/* Phoenix components. Uses tokens from tokens.css only — no raw colours here. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.keep-awake { position: fixed; width: 1px; height: 1px; opacity: 0.01; pointer-events: none; left: 0; bottom: 0; }

/* ---------- Layout ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
  padding-top: env(safe-area-inset-top);
}
.topbar__inner { max-width: var(--width-wide); margin: 0 auto; padding: 0 var(--space-4); height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; }
.page { max-width: var(--width-form); margin: 0 auto; padding: var(--space-4) var(--space-4) calc(88px + env(safe-area-inset-bottom)); }
.page--wide { max-width: var(--width-wide); }

.wordmark {
  font-size: var(--font-size-sm); font-weight: var(--font-weight-strong);
  letter-spacing: var(--letter-spacing-wordmark); color: var(--color-gold); text-decoration: none;
}
.wordmark--login { display: block; text-align: center; margin-bottom: var(--space-5); }
/* Abode Fitness brand (official artwork, traced to vector). Phoenix lives inside it as a section. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: var(--control-h); }
.brand__lockup { height: 34px; width: auto; display: block; } /* full Abode Fitness lockup: symbol + ABODE + FITNESS */
.brand-fill { fill: var(--color-text); } /* ivory on graphite (Matt: no gold) */
.brand-lockup { display: block; width: 168px; height: auto; margin: 0 auto var(--space-6); }

h1 { font-size: var(--font-size-heading); font-weight: var(--font-weight-strong); line-height: 1.2; margin: 0; }
h2 { font-size: var(--font-size-title); font-weight: var(--font-weight-strong); line-height: 1.3; margin: 0; }
.label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--font-size-sm); }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-h); }
.page-sub { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.section { margin-top: var(--space-6); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.section__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-strong); color: var(--color-text-muted); margin: 0; }

.backlink {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; margin-bottom: var(--space-1);
  color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.backlink:hover { color: var(--color-text); }

/* Desktop overview: workouts and history side by side */
.overview { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.overview > .section { margin-top: 0; }
@media (min-width: 960px) {
  .overview { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}

/* ---------- Lists (one surface, divided rows) ---------- */
.list { background: var(--color-surface); border-radius: var(--radius-md); }
.list__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 56px; padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.list__row:first-child { border-top: 0; }
.list__row--active { background: var(--accent-fill); }
a.list__row { text-decoration: none; }
a.list__row:hover { background: var(--color-divider); }
.list__main { min-width: 0; }
.list__link { flex: 1 1 auto; text-decoration: none; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.list__title { font-weight: var(--font-weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.list__actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.chevron { color: var(--color-text-muted); display: inline-flex; flex-shrink: 0; }
.chevron svg { width: 18px; height: 18px; }

.empty { border: 1px dashed var(--color-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); text-align: center; color: var(--color-text-muted); }
.empty .btn { margin-top: var(--space-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-h); padding: 0 var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong);
  background: transparent; color: var(--color-text);
  font-weight: var(--font-weight-medium); font-size: var(--font-size-base);
  cursor: pointer; text-decoration: none; white-space: nowrap; touch-action: manipulation;
}
.btn:hover { border-color: var(--color-champagne); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--btn-primary-bg); border-color: transparent; color: var(--btn-primary-text); font-weight: var(--font-weight-strong); padding: 0 var(--space-4); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); border-color: transparent; }
/* Go (Start / Resume a workout): the success green, same gradient shape as the primary button (Matt, F1) */
.btn--go { background: var(--success-surface); border-color: transparent; color: var(--color-text); font-weight: var(--font-weight-strong); padding: 0 var(--space-4); }
.btn--go:hover { background: var(--success-surface-hover); border-color: transparent; }
.btn--quiet { border-color: transparent; color: var(--color-text-muted); padding: 0 var(--space-2); }
.btn--quiet:hover { color: var(--color-text); border-color: transparent; }
.btn--danger { border-color: transparent; color: var(--color-error); padding: 0 var(--space-2); }
.btn--danger:hover { border-color: transparent; text-decoration: underline; }
.btn--block { width: 100%; }
.btn--add { width: 100%; border-style: dashed; border-color: var(--color-border); color: var(--color-text-muted); }
.btn--add:hover { color: var(--color-text); }
.btn svg { width: 16px; height: 16px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--control-h); height: var(--control-h); border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--color-text-muted); cursor: pointer; touch-action: manipulation;
}
.icon-btn:hover:not(:disabled) { color: var(--color-text); background: var(--color-divider); }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.input {
  width: 100%; height: var(--control-h); padding: 0 var(--space-3);
  background: var(--color-input-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--font-size-input); font-weight: var(--font-weight-regular);
}
.input::placeholder { color: var(--color-text-muted); opacity: 0.6; }
.input:hover { border-color: var(--color-border-strong); }
.input:focus { border-color: var(--color-focus); outline: none; }
.input:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 0; }
.input--num { text-align: center; padding: 0 var(--space-1); font-variant-numeric: tabular-nums; }
.input--xs { width: 56px; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input--date { width: 160px; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.9); }
.field--inline { width: auto; }

.notice { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); border: 1px solid var(--color-border); }
.notice--error { color: var(--color-error); border-color: var(--color-error); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; max-width: 360px; margin: 0 auto; padding: var(--space-5) var(--space-4); }
.login__card { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-5); }
.login__card .btn { margin-top: var(--space-4); }

/* ---------- Builder ---------- */
.name-field { max-width: 420px; margin-top: var(--space-4); }
.ex-list { display: flex; flex-direction: column; gap: var(--space-2); }
/* Exercise block. Phone: # + name on row 1, targets on row 2, reorder/remove on row 3.
   Wider: reorder/remove move up beside the name. */
.bx {
  background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-3);
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: var(--space-2);
}
.bx__head { display: contents; }
.bx__num { grid-column: 1; grid-row: 1; line-height: var(--control-h); color: var(--color-text-muted); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; text-align: right; }
.bx__check { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; height: var(--control-h); cursor: pointer; }
.bx__tick { width: 20px; height: 20px; margin: 0; accent-color: var(--color-champagne); cursor: pointer; }
.bx.is-selected { box-shadow: inset 0 0 0 1px var(--color-champagne); }
.bx__name { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
.bx__targets { grid-column: 2 / 4; grid-row: 2; }
.bx__tools { grid-column: 2 / 4; grid-row: 3; justify-self: end; margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; }
@media (min-width: 480px) {
  .bx__name { grid-column: 2; }
  .bx__tools { grid-column: 3; grid-row: 1; margin: 0 calc(var(--space-2) * -1) 0 0; }
}
/* Exercise names wrap instead of scrolling out of view */
.input--name { display: block; height: auto; min-height: var(--control-h); padding: 10px var(--space-3); line-height: 1.35; resize: none; overflow: hidden; }
.bx__tools { display: flex; }
.bx__tools .icon-btn { width: 40px; }
.bx__targets { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); }
.bx__reps { display: contents; } /* its fields wrap individually inside .bx__targets */
.rep-range { display: flex; align-items: center; gap: 6px; }
.rep-range__sep { color: var(--color-text-muted); }
.page-note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Segmented choice (Fixed | Range) — neutral selected state, not orange */
.seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px; gap: 2px; background: var(--color-input-bg); }
.seg__btn {
  min-width: 52px; height: calc(var(--control-h) - 6px); padding: 0 var(--space-2);
  border: 0; border-radius: 3px; background: transparent; color: var(--color-text-muted);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; touch-action: manipulation;
}
.seg__btn:hover { color: var(--color-text); }
.seg__btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); }

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: var(--color-bg); border-top: 1px solid var(--color-divider);
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
}
.actionbar__inner { max-width: var(--width-form); margin: 0 auto; display: flex; justify-content: flex-end; gap: var(--space-2); }
.actionbar__inner .btn { flex: 1; }
@media (min-width: 720px) {
  .actionbar__inner .btn { flex: 0 0 auto; min-width: 120px; }
}

/* ---------- Session logging ---------- */
.page--session { max-width: 640px; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
.session-bar {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 10;
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-1);
  display: flex; align-items: center; gap: var(--space-2);
}
.session-bar__back { flex-shrink: 0; }
.session-bar__title { flex: 1 1 auto; min-width: 0; }
.session-bar__title h1 { font-size: var(--font-size-title); line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
.btn--compact { flex-shrink: 0; padding: 0 var(--space-4); }
.btn--sm { min-height: 28px !important; padding: 0 var(--space-1); font-size: var(--font-size-sm); }
.save-status { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); display: flex; align-items: center; gap: var(--space-1); min-height: 20px; }
.save-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.save-status[data-state="saved"] { color: var(--color-success); }
.save-status[data-state="saving"] { color: var(--color-text-muted); }
.save-status[data-state="error"] { color: var(--color-error); }
.save-status .btn--sm { color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; }

.session-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.session-meta__date { display: flex; align-items: center; gap: var(--space-2); }
.session-meta__prev { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.session-meta__prev-date { color: var(--color-text); font-weight: var(--font-weight-medium); }

.ex-list--log { margin-top: var(--space-3); gap: var(--space-3); }
.ex { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-3); }
.ex__name { overflow-wrap: anywhere; }
.ex__target { font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ex__note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }

/* One grid for the header and every set row: Set | Previous | Reps | kg.
   A set is complete when reps and kg are both filled — no tick boxes. */
.set-grid {
  display: grid; align-items: center; column-gap: var(--space-2);
  grid-template-columns: 22px minmax(64px, 1fr) 72px 84px;
}
.sets { margin-top: var(--space-2); }
.sets__head { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); padding-bottom: 2px; }
.sets__head > span:nth-child(n+3) { text-align: center; }
.set-row { padding-top: 3px; padding-bottom: 3px; }
.set-row__n { color: var(--color-text-muted); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
/* Previous: quieter than today's inputs, never ellipsised */
.set-row__prev { font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.25; }
.set-row .input { padding: 0 2px; }
/* Completed set: thin green marker + ivory set number; values settle into plain text (still editable).
   (Ember is not used as small text on cards — it is below 4.5:1 there.) */
.set-grid { padding-left: 8px; }
.set-row.is-done { box-shadow: inset 2px 0 0 var(--color-success); }
.set-row.is-done .set-row__n { color: var(--color-text); font-weight: var(--font-weight-strong); }
.set-row.is-done .input { border-color: transparent; background: transparent; font-weight: var(--font-weight-medium); }
.set-row.is-done .input:hover, .set-row.is-done .input:focus { border-color: var(--color-border-strong); }

/* Prescription line + per-exercise rest timer */
.ex__sub { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 2px; }
.ex__sub .ex__target { margin-top: 0; }
/* Space between the Swap row and the target / Rest row (Matt, F2) */
.ex__title + .ex__sub { margin-top: var(--space-3); }
.rest {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  min-height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--color-text);
  font-size: var(--font-size-base); font-weight: var(--font-weight-strong); cursor: pointer; touch-action: manipulation;
}
.rest svg { width: 16px; height: 16px; }
.rest__icon { display: inline-flex; color: var(--color-text-muted); }
.rest__label { color: var(--color-text-muted); }
.rest__time { min-width: 3ch; font-variant-numeric: tabular-nums; }
.rest:hover { border-color: var(--color-champagne); }
.rest[data-state="running"] { background: var(--accent-surface); border-color: transparent; }
.rest[data-state="running"] .rest__icon, .rest[data-state="running"] .rest__label { color: var(--color-text); }
.rest[data-state="running"] .rest__time { font-weight: var(--font-weight-strong); }
.rest[data-state="done"] { border-color: var(--color-success); color: var(--color-success); }
.rest[data-state="done"] .rest__label, .rest[data-state="done"] .rest__icon { display: none; }

.input--select { align-self: flex-start; width: auto; min-width: 84px; padding: 0 28px 0 var(--space-3); appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat; }
.ex__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; margin-left: calc(var(--space-2) * -1); }
.ex__foot .btn { min-height: 36px; font-size: var(--font-size-sm); }
.ex__extra { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.danger-zone { margin-top: var(--space-6); }

/* Very narrow phones: tighten gutters so values stay visible */
@media (max-width: 359px) {
  .page { padding-left: var(--space-3); padding-right: var(--space-3); }
  .session-bar { margin-left: calc(var(--space-3) * -1); margin-right: calc(var(--space-3) * -1); padding-right: var(--space-3); }
  .ex, .bx { padding: 10px; }
  .set-grid { column-gap: 6px; grid-template-columns: 20px minmax(64px, 1fr) 64px 76px; }
  .bx { column-gap: 6px; }
}

/* Completed session details */
.done-sets { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.done-sets li { display: grid; grid-template-columns: 48px 1fr; padding: 6px 0; border-top: 1px solid var(--color-divider); font-variant-numeric: tabular-nums; }
.done-sets li:first-child { border-top: 0; }
.done-sets__n { color: var(--color-text-muted); font-size: var(--font-size-sm); align-self: center; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }

/* ---------- Banner, dialog, toast ---------- */
.banner { background: var(--color-surface); border-bottom: 1px solid var(--color-error); color: var(--color-error); font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); text-align: center; }
dialog {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5);
  background: var(--color-surface); color: var(--color-text); width: min(400px, calc(100vw - 32px));
}
dialog h2 { font-size: var(--font-size-title); }
dialog h2:focus { outline: none; }
dialog::backdrop { background: var(--color-overlay); }
dialog p { margin-top: var(--space-2); color: var(--color-text-muted); }
.dialog__actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.dialog__actions .btn { flex: 1; }
.toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); z-index: 30; max-width: calc(100vw - 32px);
}
.loading { padding: 48px 0; text-align: center; color: var(--color-text-muted); }

@media (min-width: 720px) {
  .page { padding-top: var(--space-6); padding-left: var(--space-6); padding-right: var(--space-6); }
  .topbar__inner { padding: 0 var(--space-6); }
  .ex, .bx { padding: var(--space-4); }
  .set-grid { grid-template-columns: 28px minmax(0, 1fr) 80px 96px; column-gap: var(--space-3); }
  .session-bar { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0; padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3); }
}

/* ---------- Supersets ---------- */
.section__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ss { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.ss__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-left: var(--space-1); }
.ss__head .ss__title { flex: 1; }
.ss__items { display: flex; flex-direction: column; gap: var(--space-2); }
/* Builder (F165): the grip sits on the left, under the tick box */
.bx > .drag-grip { grid-column: 1; grid-row: 2; width: 28px; height: 36px; margin: 0; justify-self: center; align-self: start; }
.ss__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-strong); color: var(--color-champagne); }
.ss__rest { padding: 0 var(--space-1); }
.ss .bx__tools { display: flex; align-items: center; }
.actionbar__note { align-self: center; margin-right: auto; color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; }
.actionbar__inner .actionbar__note { flex: 0 0 auto; }
.ex__sub--top { margin-top: 0; }
.ss-title { font-size: var(--font-size-title); }
.ss-title__meta { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.ss-legend { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 2px; }
.ss-legend li { display: flex; align-items: baseline; gap: var(--space-2); }
.ss-legend__letter { flex: 0 0 22px; padding-left: 8px; box-sizing: content-box; font-weight: var(--font-weight-strong); color: var(--color-champagne); }
.ss-legend__name { flex: 1 1 auto; min-width: 0; font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.ss-legend__target { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.round__label { padding: var(--space-2) 0 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); border-top: 1px solid var(--color-divider); margin-top: 2px; }
.sets__body > .round__label:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.ex--superset .set-row__n { color: var(--color-champagne); }

/* ---------- Exercise library, picker, swap ---------- */
.ex-pick { display: block; height: auto; min-height: var(--control-h); padding: 10px var(--space-3); text-align: left; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; font-weight: var(--font-weight-medium); }
.ex-pick--empty { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.ex__title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.icon-btn--sm { width: 36px; height: 36px; margin: -6px -8px -6px 0; }
.ss-legend li { align-items: center; }
.ss-legend__swapped { color: var(--color-text-muted); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); }
.seg--nav { display: flex; width: 100%; margin-top: var(--space-3); }
.seg--nav .seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.seg--nav .seg__btn[aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.list__button { background: transparent; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; min-height: 40px; }
.pick--new { border-style: dashed; }
dialog.dialog--tall { max-height: 85vh; }
.dialog__actions--stack { flex-direction: column; }

/* ---------- Bottom tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--color-bg); border-top: 1px solid var(--color-divider);
  padding: 0 max(var(--space-2), calc((100vw - 560px) / 2)) env(safe-area-inset-bottom);
}
body.no-tabbar .tabbar { display: none; }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding-top: 3px; text-decoration: none; color: var(--color-text-muted);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); border-top: 2px solid transparent; margin-top: -1px;
}
.tab__icon { display: inline-flex; color: var(--tab-icon-idle); }
.tab__icon svg { width: 22px; height: 22px; }
.tab:hover { color: var(--color-text); }
.tab.is-active { color: var(--color-text); background: var(--tab-active-bg); }
.tab.is-active .tab__icon { color: var(--color-text); }
.page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- Calendar ---------- */
.week-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); }
.week-nav__label { font-weight: var(--font-weight-strong); }
.week-nav .icon-btn { margin: 0 calc(var(--space-2) * -1); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: var(--space-2); }
.day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 64px; padding: var(--space-1) 0; border: 1px solid var(--day-border); border-radius: 10px;
  background: var(--day-bg); color: var(--color-text); cursor: pointer; touch-action: manipulation;
}
.day:hover { border-color: var(--color-border-strong); }
.day__num { font-size: var(--font-size-title); font-weight: var(--font-weight-strong); line-height: 1.2; }
.day__wd { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.2; }
.day--today .day__wd { color: var(--color-text); font-weight: var(--font-weight-medium); }
.day__dot { width: 5px; height: 5px; border-radius: 50%; margin-top: 3px; background: transparent; }
.day__dot.is-on { background: var(--color-champagne); }
.day[aria-pressed="true"] { background: var(--btn-primary-bg); border-color: transparent; color: var(--btn-primary-text); }
.day[aria-pressed="true"] .day__wd { color: inherit; opacity: 0.8; }
.list__edit { display: inline-flex; align-items: center; gap: 2px; color: var(--color-text-muted); font-size: var(--font-size-sm); flex-shrink: 0; }
.pick-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); max-height: 50vh; overflow-y: auto; }
.pick {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-align: left;
  min-height: var(--control-h); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text); font-size: var(--font-size-base); cursor: pointer;
}
.pick:hover { border-color: var(--color-champagne); }
.pick__name { font-weight: var(--font-weight-strong); }
.pick__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); flex-shrink: 0; }
.coming__tag { font-size: var(--font-size-xs); font-weight: var(--font-weight-strong); color: var(--color-champagne); margin-bottom: var(--space-1) !important; }

/* ---------- Spacing utilities (CSP forbids inline styles) ---------- */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }

/* ---------- Abode exercise library: search, filters, details, form cues ---------- */
.lib-search { display: flex; gap: var(--space-2); }
.lib-search .input { flex: 1 1 auto; min-width: 0; }
.lib-search .btn { flex-shrink: 0; }
.lib-count { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-1) 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent-surface); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; }
.chip__x { display: inline-flex; color: var(--color-text-muted); }
.chip__x svg { width: 14px; height: 14px; }
.list__more { padding: var(--space-3); text-align: center; border-top: 1px solid var(--color-divider); }
.input--wide { width: 100%; align-self: stretch; }
.input--sm { width: 84px; }
.filter-grid { display: grid; gap: var(--space-3); overflow-y: auto; max-height: 60vh; padding-right: 2px; }
.pick__main { display: flex; flex-direction: column; min-width: 0; }
.pick__sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pick__group { margin-top: var(--space-2) !important; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-champagne) !important; }
.facts { margin: 0; background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3); }
.facts__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.facts__row:first-child { border-top: 0; }
.facts dt { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.cues { margin: 0; padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 18px); background: var(--color-surface); border-radius: var(--radius-md); display: grid; gap: var(--space-2); }
.cues li { padding-left: var(--space-1); line-height: 1.45; }
.cues li::marker { color: var(--color-champagne); }
dialog .cues { margin-top: var(--space-3); background: var(--color-bg); }
.cues__note { margin-top: var(--space-2) !important; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.bx__logged { margin: var(--space-1) 0 0 var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ex__name-btn { padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.ex__name-btn:hover { text-decoration-color: var(--color-champagne); }
.set-grid--one > :last-child { grid-column: 3 / 5; }
.danger-zone .btn + .btn { margin-left: var(--space-2); }

/* Accent surfaces sitting on cards use the card colour as their opaque base. */
.list, .ex, .bx, .card, dialog, .login__card, .facts, .cues { --accent-base: var(--color-surface); }

/* ---------- Calendar: week and month views (19 Oct 2026 design) ---------- */
.page-head .seg { flex-shrink: 0; }
.week-nav__label { display: inline-flex; align-items: center; gap: var(--space-2); }
.week-nav__today { min-height: 28px; }
.day__dot--done { background: var(--color-success); }
.day__dot--planned { background: var(--color-champagne); }
.day__dot--active { background: var(--accent-bar); }
.day--today .day__wd { color: var(--color-text); font-weight: var(--font-weight-medium); }

.cards { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
/* Every card spans the page (Matt, 26 Oct): one column on all screen sizes. */
.card { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; min-width: 0; }
.card__eyebrow { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.card__big { font-size: var(--font-size-heading); font-weight: var(--font-weight-strong); line-height: 1.2; margin-top: var(--space-1) !important; }
.card__link { display: block; text-decoration: none; color: inherit; }
.card__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.card__stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.card__stats .stat + .stat { border-left: 1px solid var(--color-divider); }
.hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-1) 0 var(--space-3); }
.hero__main { min-width: 0; }
.hero__title { font-size: var(--font-size-heading); line-height: 1.2; overflow-wrap: anywhere; }
.hero__status { margin-top: var(--space-1) !important; font-weight: var(--font-weight-medium); }
.status { display: inline-flex; align-items: center; gap: 6px; }
.status svg { width: 18px; height: 18px; }
.status--done { color: var(--color-success); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.ring { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--color-border-strong); color: var(--color-text-muted); }
.ring svg { width: 26px; height: 26px; }
.ring--done { border-color: var(--color-success); color: var(--color-success); }
.ring--live { border-color: transparent; background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.ring--rest { border-color: var(--color-border); }
.stat { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-1) 0; font-weight: var(--font-weight-medium); }
.stat__icon { display: inline-flex; color: var(--color-text-muted); }
.stat__icon svg { width: 20px; height: 20px; }
.progress { height: 10px; border-radius: 5px; background: var(--color-bg); overflow: hidden; margin: var(--space-3) 0 var(--space-4); }
.progress__fill { display: block; height: 100%; border-radius: 5px; background: var(--accent-bar); }

.section__head--action { align-items: center; margin-bottom: var(--space-3); }
.section__heading { font-size: var(--font-size-heading); }
button.list__row { width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.list > button.list__row:first-child { border-top: 0; }
button.list__row:hover { background: var(--color-divider); }
.up-row { justify-content: flex-start; }
.up-row .list__main { flex: 1 1 auto; display: flex; flex-direction: column; }
.up-row__date { display: flex; flex-direction: column; align-items: center; width: 44px; flex-shrink: 0; padding-right: var(--space-3); border-right: 1px solid var(--color-divider); }
.up-row__wd { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.up-row__num { font-size: var(--font-size-title); font-weight: var(--font-weight-strong); }
.up-row__icon { display: inline-flex; color: var(--color-champagne); flex-shrink: 0; }
.up-row__icon svg { width: 24px; height: 24px; }

.month { margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.month__head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); }
.month__head span { text-align: center; padding: var(--space-2) 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.month__body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mday {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  min-height: 60px; padding: var(--space-1) 2px; border: 0; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text); cursor: pointer; touch-action: manipulation; font: inherit;
}
.mday:nth-child(7n) { border-right: 0; }
.mday:hover { background: var(--color-divider); }
.mday__num { font-weight: var(--font-weight-medium); }
.mday--outside .mday__num { color: var(--color-text-muted); opacity: 0.6; }
.mday__today { font-size: 11px; line-height: 1; color: var(--color-text); font-weight: var(--font-weight-medium); }
.mday[aria-pressed="true"] { background: var(--accent-surface); border: 1px solid transparent; border-radius: var(--radius-sm); }
.mday__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: var(--space-1); background: var(--color-champagne); }
.mday__mark { display: inline-flex; margin-top: 2px; }
.mday__mark svg { width: 18px; height: 18px; }
.mday__mark--done { color: var(--color-success); }
.mday__mark--active { color: var(--color-text); }
.mday__mark--rest { color: var(--color-text-muted); opacity: 0.55; }
.mday__mark--rest svg { width: 15px; height: 15px; }
@media (min-width: 720px) { .mday { min-height: 84px; padding-top: var(--space-2); } .mday__num { font-size: var(--font-size-title); } }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.panel__title { font-size: var(--font-size-title); }
.panel__stats { display: flex; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.panel__num { color: var(--color-champagne); font-size: var(--font-size-title); font-weight: var(--font-weight-strong); }
.panel__num--done { color: var(--color-success); }

/* "Save as a template" switch in the builder (from Calendar → Create new) */
.toggle { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 520px; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); cursor: pointer; }
.toggle__box { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--color-champagne); cursor: pointer; }
.toggle__text { display: flex; flex-direction: column; gap: 2px; }
.toggle__label { font-weight: var(--font-weight-medium); }
.toggle__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.card__actions-left { margin-right: auto; }

/* ---------- Calendar planning: kinds of day, logging, copy/repeat (19 Oct 2026) ---------- */
/* Outline icons by state: planned = orange outline (allowed as an icon), done = restrained green tick,
   rest = quiet neutral, in progress = ivory. Never a solid block. (Accent is champagne since 19 Oct 2026.) */
.kind-icon, .mark { display: inline-flex; flex-shrink: 0; }
.kind-icon svg { width: 22px; height: 22px; }
.kind-icon--planned, .mark--planned { color: var(--accent-mark); }
.kind-icon--done, .mark--done { color: var(--color-success); }
.kind-icon--rest, .mark--rest { color: var(--color-text-muted); opacity: 0.7; }
.kind-icon--live, .mark--live { color: var(--color-text); }
.mark svg { width: 14px; height: 14px; }
.mark-more { font-size: 10px; line-height: 14px; color: var(--color-text-muted); }
.day__marks, .mday__marks { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 14px; margin-top: 2px; }
.mday__marks .mark svg { width: 15px; height: 15px; }
@media (min-width: 720px) { .mday__marks .mark svg { width: 18px; height: 18px; } }
.list__row.entry { justify-content: flex-start; }
.list__row.entry .list__main { flex: 1 1 auto; }
.up-row__icon svg { width: 22px; height: 22px; }
.up-row__icon--planned { color: var(--accent-mark); }
.up-row__icon--rest { color: var(--color-text-muted); }
.up-row__icon--done { color: var(--color-success); }
.ring--planned { border-color: var(--accent-mark); color: var(--accent-mark); }
.ring--rest { color: var(--color-text-muted); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 28px; }
.card__head .btn svg { width: 15px; height: 15px; }
.card__notes { margin-top: var(--space-3) !important; font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: pre-wrap; }
.card__add { align-self: flex-start; }
.card__actions { align-items: center; }
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.panel__add { flex: 1 1 auto; }

/* Add / edit dialog: type of day as five outline tiles; selected one gets the accent border. */
.kind-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.kind-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-2) 2px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted); font: inherit; font-size: 12px; line-height: 1.15; text-align: center; cursor: pointer; touch-action: manipulation; }
.kind-pick__icon { display: inline-flex; }
.kind-pick__icon svg { width: 22px; height: 22px; }
@media (hover: hover) { .kind-pick:hover { border-color: var(--color-border-strong); color: var(--color-text); } } /* no sticky hover on phones (F10) */
.kind-pick[aria-pressed="true"] { border-color: var(--accent-mark); color: var(--color-text); }
.kind-pick[aria-pressed="true"] .kind-pick__icon { color: var(--accent-mark); }
.entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.entry-grid .input--num { width: 100%; text-align: left; padding: 0 var(--space-3); }
.input--notes { height: auto; min-height: 72px; padding: var(--space-2) var(--space-3); resize: vertical; }

/* Copy / repeat: choices and the preview of affected dates */
.radio-list { display: grid; gap: var(--space-2); }
.radio { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; line-height: 1.35; }
.radio input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-champagne); flex-shrink: 0; }
.preview { list-style: none; margin: var(--space-3) 0 0; padding: 0; max-height: 40vh; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.preview__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-divider); }
.preview__row:first-child { border-top: 0; }
.preview__date { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.preview__what { display: flex; flex-direction: column; overflow-wrap: anywhere; }
.preview__clash { font-size: var(--font-size-xs); color: var(--color-champagne); }
.preview__row--clash { border-left: 2px solid var(--accent-mark); }
.list__row--hidden .list__title { color: var(--color-text-muted); text-decoration: line-through; }
.mini-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); cursor: pointer; padding: 0 var(--space-1); }
.mini-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-champagne); }
.seg--wide { display: flex; width: 100%; max-width: 420px; }
.seg--wide .seg__btn { flex: 1; }

/* Tab icons are solid (Phoenix-mark style); the Phoenix tab is the traced Phoenix mark (filled, not outline). Body follows the tab colour; the wings
   become the orange accent only while the Phoenix tab is active (an icon — allowed by the accent rule). */
.tab__icon svg.ph-icon { width: 24px; height: 24px; margin: -1px 0; }
.ti-body, .ti-accent { fill: currentColor; }
.tab.is-active .ti-accent { fill: var(--accent-mark); }

/* Activity Styles: compact rows with metric tags; editor with tap-to-toggle metric chips */
.style-row { align-items: center; }
.style-row .list__main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.style-row__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--color-border-strong); border-radius: 10px; font-size: 11px; font-weight: var(--font-weight-medium); letter-spacing: 0.02em; color: var(--color-text); }
.tag-pill--muted { border-color: var(--color-border); color: var(--color-text-muted); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: var(--space-2); }
.metric-chip { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 52px; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.metric-chip__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); padding-right: 12px; } /* clear of the dot (F163) */
.metric-chip__unit { font-size: 11px; color: var(--color-text-muted); }
.metric-chip:hover { border-color: var(--color-border-strong); }
.metric-chip[aria-pressed="true"] { border-color: var(--accent-mark); color: var(--color-text); background: var(--accent-fill); }
.metric-chip[aria-pressed="true"]::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-champagne); }

/* Exercise picker tidy-up (19 Oct 2026): rows never squash in the scrolling list; one-line meta;
   a matched nickname shows as its own quiet line; brand-coloured clear button in search boxes. */
.pick-list > * { flex-shrink: 0; }
.pick-list { padding-bottom: 2px; scroll-padding-bottom: 8px; }
.pick { align-items: center; min-height: 56px; padding: var(--space-2) var(--space-3); }
.pick__main { gap: 2px; flex: 1 1 auto; }
.pick__name { line-height: 1.25; overflow-wrap: anywhere; }
.pick__sub, .pick__aka { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.pick__aka { font-size: var(--font-size-xs); color: var(--color-champagne); }
.list__main .pick__aka { margin-top: 2px; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; cursor: pointer;
  background: var(--color-text-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/></svg>") center / 16px no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--color-text); }
.pick-list { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 20px), transparent); padding-bottom: 20px; }

/* Number boxes with up/down arrows (workout builder: sets and reps) */
.stepper { display: inline-flex; align-items: stretch; height: var(--control-h); }
.stepper .stepper__input { width: 48px; height: 100%; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.stepper__btns { display: flex; flex-direction: column; width: 26px; border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; overflow: hidden; background: var(--color-input-bg); }
.stepper__btn { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.stepper__btn + .stepper__btn { border-top: 1px solid var(--color-border); }
.stepper__btn svg { width: 14px; height: 14px; }
.stepper__btn:hover { color: var(--color-text); background: var(--color-divider); }
.stepper__btn:active { color: var(--color-champagne); }
.stepper:focus-within .stepper__btns { border-color: var(--color-focus); }
.editor-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.editor-foot .btn--danger svg { width: 16px; height: 16px; }

/* Profile & Goal */
.page-head .save-status { flex-shrink: 0; }
.profile-grid { display: grid; gap: var(--space-4); }
/* One above the other on every screen (Matt, 27 Oct; F160) */
.profile-grid { max-width: 520px; }
.profile-grid .name-row { grid-template-columns: 1fr; }
.unit-inputs { display: flex; align-items: center; gap: var(--space-2); }
.unit-inputs__unit { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.age-chip { color: var(--color-champagne); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; }
.field__error { margin-top: var(--space-1) !important; font-size: var(--font-size-sm); color: var(--color-error); }
.goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 720px) { .goal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.goal-pick { min-height: var(--control-h); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted);
  font: inherit; font-weight: var(--font-weight-medium); text-align: center; cursor: pointer; touch-action: manipulation; }
.goal-pick:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.goal-pick[aria-pressed="true"] { border-color: var(--accent-mark); color: var(--color-text); background: var(--accent-fill); }
.login__hint { margin-top: var(--space-2) !important; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.account-card { margin-top: var(--space-4); max-width: 520px; }
.account-card .section__title { margin: 0; }

/* Password boxes: eye button to show/hide. Hidden: plain eye ("tap to see"); shown: eye with a slash ("tap to hide"). */
.pw-field { position: relative; display: block; }
.pw-field .input { padding-right: 48px; }
.pw-toggle { position: absolute; top: 0; right: 0; width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; touch-action: manipulation; }
.pw-toggle:hover { color: var(--color-text); }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle[aria-pressed="true"] { color: var(--color-champagne); }
.pw-toggle .pw-eye__slash, .pw-toggle svg path:last-child { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye__slash, .pw-toggle[aria-pressed="true"] svg path:last-child { display: inline; }
/* Browser autofill keeps the brand colours (Chrome otherwise paints the box light blue) */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text); caret-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-input-bg) inset; box-shadow: 0 0 0 1000px var(--color-input-bg) inset;
  transition: background-color 9999s ease-out 0s;
}
.invite__title { font-size: var(--font-size-title); margin: 0 0 var(--space-1); }

/* Coaching: Me / client switcher in the top bar, and the strip shown while a client's account is open */
.switcher { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 55%; min-height: 36px; padding: 0 var(--space-2) 0 4px; border: 1px solid var(--color-border); border-radius: 18px;
  background: transparent; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; }
.switcher:hover { border-color: var(--color-border-strong); }
.switcher--client { border-color: var(--accent-mark); }
.switcher__avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface); color: var(--color-champagne); font-size: 11px; font-weight: var(--font-weight-medium); letter-spacing: 0.04em; }
.switcher__avatar--lg { width: 36px; height: 36px; font-size: var(--font-size-xs); margin-right: var(--space-1); }
.switcher__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher__chev { display: inline-flex; color: var(--color-text-muted); }
.switcher__chev svg { width: 14px; height: 14px; }
/* Coaching strip: scrolls away with the page and is opaque, so it never sits over the week strip (F40). */
.coach-strip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-1) var(--space-4); background: var(--accent-fill), var(--color-bg); border-bottom: 1px solid var(--color-divider); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.coach-strip strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.coach-strip .btn { flex-shrink: 0; color: var(--color-text); }
.pick--current { border-color: var(--accent-mark); }
.invite-link { font-size: var(--font-size-sm); }
.logged-by { margin-top: var(--space-1) !important; font-size: var(--font-size-sm); color: var(--color-champagne); }
.coach-strip { min-height: 36px; }
.client-row { justify-content: flex-start; }
.client-row .list__main { flex: 1 1 auto; }
.client-row .list__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.login__links { margin-top: var(--space-3) !important; text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.login__links a { color: var(--color-text-muted); text-underline-offset: 3px; }
.login__links a:hover { color: var(--color-text); }
.from-coach { color: var(--color-champagne); }
.sent-note { color: var(--color-success) !important; }
/* Client access dialog + archived clients */
.access-list { display: grid; gap: var(--space-2); }
.access-list .toggle { max-width: none; background: var(--color-bg); }
.list__row--archived .list__title { color: var(--color-text-muted); }
/* Settings › Training / Check-in / Tracking */
.pref-list { display: grid; gap: var(--space-2); }
.toggle--wide { max-width: none; }
.tag-pill--checkin { margin-left: var(--space-2); height: 18px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border-color: var(--accent-edge); vertical-align: 1px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Weight ▲▼ while logging: compact so the set grid still fits a phone */
.stepper--weight { width: 100%; }
.stepper--weight .stepper__input { width: auto; min-width: 0; flex: 1 1 auto; }
.stepper--weight .stepper__btns { width: 20px; flex: 0 0 20px; }
.stepper--weight .stepper__btn svg { width: 12px; height: 12px; }
/* ---------- Calendar: six types, statuses, repeat (19 Oct 2026) ---------- */
/* 3 per row everywhere: the dialog is narrow, and six across cramped "Resistance" */
.kind-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-head__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
/* Status: a quiet diagonal hatch (no new colours) so blocked days read differently from planned ones */
.status-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kind-pick--sm { font-size: 11.5px; }
.status-band { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--color-divider) 0 6px, transparent 6px 12px); }
.status-band__icon { display: inline-flex; color: var(--color-text); }
.status-band__icon svg { width: 20px; height: 20px; }
.status-band__main { flex: 1 1 auto; min-width: 0; }
.status-band__title { font-weight: var(--font-weight-medium); }
.status-band__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.mday--status[aria-pressed="true"], .day--status[aria-pressed="true"] { background: var(--btn-primary-bg); }
.mark--status { color: var(--color-text); }
.kind-icon--skipped, .mark--skipped { color: var(--color-text-muted); opacity: 0.5; }
.card--skipped .hero__title { color: var(--color-text-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
/* Month view: the chosen day shows a + (tap again to add) */
.mday { position: relative; }
.mday__add { position: absolute; right: 4px; bottom: 4px; display: inline-flex; color: var(--accent-mark); }
.mday__add svg { width: 14px; height: 14px; }
@media (min-width: 720px) { .mday__add svg { width: 16px; height: 16px; } }
/* Repeat picker */
.repeat__label { display: inline-flex; align-items: center; gap: 6px; }
.repeat__label svg { width: 15px; height: 15px; }
.wd-pick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wd-pick__btn { height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); cursor: pointer; touch-action: manipulation; }
.wd-pick__btn[aria-pressed="true"] { border-color: var(--accent-mark); color: var(--color-text); background: var(--accent-fill); }
.repeat__ends { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.repeat__count { display: inline-flex; align-items: center; gap: var(--space-2); }
/* On-brand dropdowns (replace the device's native menu highlight, e.g. a yellow macOS accent) */
.bsel-native { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; }
.bsel { display: inline-flex; align-items: center; text-align: left; }
.bsel__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsel[aria-expanded="true"] { border-color: var(--color-focus); }
.bsel-menu { position: fixed; z-index: 1000; overflow-y: auto; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  box-shadow: 0 10px 30px var(--color-overlay); outline: none; max-width: calc(100vw - 16px); }
.bsel-opt { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3) 0 28px; border-radius: var(--radius-sm); color: var(--color-text); cursor: pointer; position: relative; white-space: nowrap; }
.bsel-opt.is-active { background: var(--accent-fill); }
.bsel-opt[aria-selected="true"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 4px; margin-top: -4px; border-left: 2px solid var(--accent-mark); border-bottom: 2px solid var(--accent-mark); transform: rotate(-45deg); }
.bsel-opt.is-disabled { color: var(--color-text-muted); cursor: default; }
@media (min-width: 720px) { .bsel-opt { min-height: 34px; } }
/* Search in lists and dropdowns */
.list > [hidden], .pick-list > [hidden], .bsel-menu > [hidden] { display: none !important; }
.list-search { margin-bottom: var(--space-2); }
.chips-row + .list-search { margin-top: var(--space-4); } /* filter chips then search: room between them (Matt, 28 Oct) */
.list-search__none { margin-top: var(--space-2); }
.bsel-search { position: sticky; top: -4px; z-index: 1; height: 38px; margin-bottom: 4px; font-size: var(--font-size-base); background: var(--color-bg); }
.bsel-empty { padding: var(--space-2) var(--space-3); color: var(--color-text-muted); }
/* ---------- Blocks ---------- */
.phase-bar { display: flex; gap: 3px; margin: 6px 0 4px; max-width: 360px; }
.phase-bar__seg { height: 6px; border-radius: 2px; background: var(--color-divider); flex: 1 1 0; }
.phase-bar__seg--done { background: var(--color-ash); }
.phase-bar__seg--now { background: var(--accent-bar); }
.block-row .list__link { display: block; }
.phases { display: grid; gap: var(--space-3); }
.phase { padding: var(--space-3); }
.phase__head { display: flex; gap: var(--space-2); align-items: center; }
.phase__name { flex: 1 1 auto; font-weight: var(--font-weight-medium); }
.phase__weeks { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.phase__tools { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
/* The phase's week: a list of days on phones, seven columns on wider screens */
.bweek { display: grid; gap: 4px; }
.bday { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 40px; padding: 4px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.bday__name { width: 34px; flex-shrink: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.bchip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 28px; padding: 2px 8px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-divider);
  color: var(--color-text); font: inherit; font-size: var(--font-size-sm); cursor: pointer; text-align: left; }
.bchip--strength { border-color: var(--accent-mark); }
.bchip--rest { background: transparent; border-style: dashed; color: var(--color-text-muted); }
.bchip__icon { display: inline-flex; flex-shrink: 0; }
.bchip__icon svg { width: 14px; height: 14px; }
.bchip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bday__add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; border: 1px dashed var(--color-border-strong); border-radius: 14px; background: transparent; color: var(--accent-mark); cursor: pointer; }
.bday__add svg { width: 14px; height: 14px; }
@media (min-width: 720px) {
  .bweek { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .bday { flex-direction: column; align-items: stretch; min-height: 110px; }
  .bday__name { width: auto; }
  .bchip { border-radius: var(--radius-sm); }
  .bday__add { margin: auto auto 0; }
}
.assign-info { margin-top: var(--space-2); }
/* Rest dock: the running rest timer stays on screen; tap to jump back to the exercise */
.rest-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: var(--space-2); align-items: stretch;
  max-width: var(--width-form); margin: 0 auto; padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: var(--color-bg); border-top: 1px solid var(--color-border); }
.rest-dock[hidden] { display: none; }
.rest-dock__main { position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
/* Green fills left to right as the rest counts down: empty at the start, full when rest is over (Matt, F6) */
.rest-dock__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--success-progress); transition: width 0.25s linear; pointer-events: none; }
.rest-dock__main > :not(.rest-dock__fill) { position: relative; }
@media (prefers-reduced-motion: reduce) { .rest-dock__fill { transition: none; } }
.rest-dock__icon { display: inline-flex; }
.rest-dock__icon svg { width: 20px; height: 20px; }
.rest-dock__time { font-size: 24px; font-weight: var(--font-weight-strong); min-width: 4ch; }
.rest-dock__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); }
.rest-dock__label { color: var(--color-text-muted); }
.rest-dock[data-state="done"] .rest-dock__main { border-color: var(--color-success); }
.rest-dock[data-state="done"] .rest-dock__fill { width: 100%; }
.rest-dock[data-state="done"] .rest-dock__time, .rest-dock[data-state="done"] .rest-dock__icon { color: var(--color-success); }
.rest-dock__stop { flex: 0 0 52px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); cursor: pointer; }
.rest-dock__stop svg { width: 18px; height: 18px; }
.page--session { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
/* Brief highlight on the exercise you jumped back to */
@keyframes flash-card { from { box-shadow: 0 0 0 2px var(--accent-mark); } to { box-shadow: 0 0 0 2px transparent; } }
.is-flash { animation: flash-card 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .is-flash { animation: none; box-shadow: 0 0 0 2px var(--accent-mark); } }
/* Swap (substitute) button: icon + word, compact so it doesn't push the exercise name down */
.swap-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 28px; margin: -2px 0; padding: 0 10px 0 7px; border: 1px solid var(--color-border); border-radius: 14px;
  background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); cursor: pointer; touch-action: manipulation; }
.swap-btn:hover { color: var(--color-text); border-color: var(--color-champagne); }
.swap-btn__icon { display: inline-flex; }
.swap-btn__icon svg { width: 16px; height: 16px; }
/* ---------- Sign-up wizard ---------- */
.login__or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.login__or::before, .login__or::after { content: ""; flex: 1; height: 1px; background: var(--color-divider); }
.wiz-choices { display: grid; gap: var(--space-2); }
.wiz-choice { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; }
.wiz-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wiz-choice:has(input:checked) { border: 1px solid transparent; background: var(--accent-surface); }
.wiz-choice:has(input:focus-visible) { outline: 1px solid var(--color-focus); outline-offset: 2px; }
.wiz-choice__icon { display: inline-flex; color: var(--accent-mark); flex-shrink: 0; }
.wiz-choice__icon svg { width: 26px; height: 26px; }
.wiz-choice__text { display: flex; flex-direction: column; gap: 2px; }
.wiz-choice__text span { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.wiz-step { font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: 0.04em; margin-bottom: var(--space-2) !important; }
.wiz-dots { display: flex; gap: 4px; margin-bottom: var(--space-2); }
.wiz-dots i { width: 24px; height: 4px; border-radius: 2px; background: var(--color-divider); }
.wiz-dots i.on { background: var(--accent-bar); }
.wiz-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--accent-fill); font-size: var(--font-size-sm); }
.wiz-note > span:last-child, .wiz-note > strong + span { display: block; color: var(--color-text-muted); }
.wiz-note strong { display: block; color: var(--color-text); font-weight: var(--font-weight-medium); }
.wiz { max-width: 480px; margin: 0 auto; padding-top: var(--space-4); }
.wiz-actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.wiz-code { letter-spacing: 0.12em; text-transform: uppercase; }
.coach-code { font-size: 26px; letter-spacing: 0.14em; text-align: center; padding: var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); font-variant-numeric: tabular-nums; user-select: all; }
.coach-code--sm { font-size: 20px; padding: var(--space-2); }
.finish-card .card__eyebrow { color: var(--color-text); }
/* Block banner on the calendar ("Week 6 of 12 · Intensification") and the overview */
.block-banner { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; margin: var(--space-3) 0; padding: var(--space-3); text-align: left;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--accent-fill); color: var(--color-text); font: inherit; cursor: pointer; }
.block-banner:hover { border-color: var(--color-champagne); }
.block-banner__eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-champagne); }
.block-banner__title { font-size: var(--font-size-title); font-weight: var(--font-weight-medium); }
.block-banner__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.block-banner .phase-bar { max-width: none; }
.block-note { white-space: pre-wrap; padding: var(--space-3); border-left: 2px solid var(--accent-mark); background: var(--color-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.preview__row--now { box-shadow: inset 2px 0 0 var(--accent-mark); }
.assign-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
.assign-chip { cursor: pointer; background: transparent; font: inherit; font-size: 12px; height: 26px; }
.block-row { flex-wrap: wrap; }
.linklike { padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--color-text); }
.list__title--danger { color: var(--color-error); }
.wiz-note:has(> strong:first-child) { flex-direction: column; gap: 2px; }
/* ---------- Tracking ---------- */
.week--sm .day { min-height: 0; padding-top: 6px; padding-bottom: 4px; }
.week--sm .day:disabled { opacity: 0.35; cursor: default; }
.trk-card { margin-top: var(--space-3); }
.trk-field { margin-top: var(--space-3); }
.trk-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.trk-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); text-align: right; }
.trk-input { text-align: left; padding: 0 var(--space-3); max-width: 220px; }
.trk-bar { height: 5px; margin-top: 6px; border-radius: 3px; background: var(--color-divider); max-width: 220px; overflow: hidden; }
.trk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--success-bar); } /* green (Matt, F29) */
.rate { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-width: 320px; }
.rate__btn { height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font: inherit; cursor: pointer; touch-action: manipulation; }
.rate__btn[aria-pressed="true"] { border-color: var(--accent-mark); background: var(--accent-fill); color: var(--color-text); font-weight: var(--font-weight-medium); }
.trk-chart { width: 100%; height: auto; display: block; margin-top: var(--space-2); }
.trk-chart__grid { stroke: var(--color-divider); stroke-width: 1; }
.trk-chart__label { fill: var(--color-text-muted); font-size: 9px; font-family: var(--font-family); }
.trk-chart__dot { fill: var(--color-text-muted); }
.trk-chart__line { fill: none; stroke: var(--accent-mark); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.trk-chart__goal { stroke: var(--color-success); stroke-dasharray: 4 4; stroke-width: 1; }
.trk-chart__goal-label { fill: var(--color-success); font-size: 9px; font-family: var(--font-family); }
.trk-val { font-weight: var(--font-weight-medium); flex-shrink: 0; }
.checkin-row { display: flex; background: var(--color-surface); border-radius: var(--radius-md); }
/* Tracking › Body */
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--color-bg); object-fit: cover; }
.photo--compare { aspect-ratio: 3 / 4; margin-top: var(--space-2); }
.photo--thumb { width: 56px; height: 74px; }
.photo--full { max-height: 70vh; object-fit: contain; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.compare__side { min-width: 0; }
.compare__side .input--select, .compare__side .bsel { width: 100%; }
.photo-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.photo-thumb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 11px; cursor: pointer; }
.photo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.photo-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.photo-slot__preview { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--font-size-sm); overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--color-divider) 0 6px, transparent 6px 12px); }
.photo-slot__label { font-size: var(--font-size-xs); color: var(--accent-mark); }
.photo-slot:focus-within .photo-slot__preview { outline: 1px solid var(--color-focus); }
/* Sets done before a swap stay with the original exercise (F8) */
.ex--before-swap { padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.before-swap { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.before-swap__text { flex: 1 1 auto; min-width: 0; }
.before-swap__edit { flex-shrink: 0; min-height: 32px; }
.before-swap__icon { display: inline-flex; color: var(--color-success); }
.before-swap__icon svg { width: 16px; height: 16px; }
.before-swap__name { color: var(--color-text); font-weight: var(--font-weight-medium); }
/* Calendar check-in row: "Check-in" as the title, the summary on its own line underneath (F31) */
.checkin-row .list__main { flex: 1 1 auto; display: flex; flex-direction: column; }
.checkin-row .list__meta { white-space: normal; }
/* Month totals under the month grid (F32) */
.month-sum { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: right; }
.month-sum strong { color: var(--color-text); font-weight: var(--font-weight-strong); }
.month-sum .panel__num--done { color: var(--color-success); }
/* First and last name side by side (F14); stacked on very narrow phones */
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.name-row .field { margin-top: 0; min-width: 0; }
@media (max-width: 340px) { .name-row { grid-template-columns: 1fr; } }
/* Coach code with Copy / Share (F17) */
.coach-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); user-select: auto; }
.coach-code__text { user-select: all; }
.coach-code__actions { display: inline-flex; gap: var(--space-2); letter-spacing: normal; font-size: var(--font-size-sm); }
.coach-code__actions .btn span { display: inline-flex; }
.coach-code__actions svg { width: 15px; height: 15px; }
/* "Is this your coach?" card is the confirm button (F18) */
.wiz-note--tap { width: 100%; align-items: center; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); text-align: left; cursor: pointer; }
.wiz-note--tap:hover { border-color: var(--accent-mark); }
.wiz-note__main { flex: 1 1 auto; min-width: 0; }
.wiz-note__main > span { display: block; color: var(--color-text-muted); }
.wiz-note.wiz-note--tap > .chevron { display: inline-flex; color: var(--color-text-muted); }
/* Data & Backup: tick right next to the text (F43) */
.backup-row { justify-content: flex-start; gap: var(--space-3); }
.backup-row .list__main { flex: 1 1 auto; }
.backup-row .list__title { white-space: normal; }
/* Day card with no Start/Log (rest day): ⋯ beside the icon instead of on its own row (F44) */
.hero__side { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
/* ---------- Blocks rework (F23–F26, 24 Oct 2026) ---------- */
/* Week bar: one segment per week; done green, current champagne */
.week-bar { display: flex; gap: 3px; margin: 6px 0 2px; }
.week-bar__seg { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--color-divider); }
.week-bar__seg--done { background: var(--success-bar); }
.week-bar__seg--now { background: var(--accent-bar); }
/* Goal + length side by side */
.field-pair { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; }
.field-pair .field { margin-top: 0; min-width: 0; }
.len-stepper { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.len-stepper__btn { width: var(--control-h); height: var(--control-h); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: inherit; font-size: 20px; cursor: pointer; }
.len-stepper__btn:disabled { opacity: 0.4; cursor: default; }
.len-stepper__n { min-width: 2ch; text-align: center; font-size: var(--font-size-title); font-weight: var(--font-weight-medium); }
.bweek-card { padding: var(--space-2); }
/* Save bar fixed to the bottom while there are unsaved changes (F26) */
.save-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  max-width: var(--width-form); margin: 0 auto; padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--color-bg); border-top: 1px solid var(--color-border); }
.save-bar[hidden] { display: none; }
.save-bar__text { color: var(--color-champagne); font-size: var(--font-size-sm); }
.page--savebar { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
/* On-brand date boxes: Day · Month · Year */
.date-boxes { display: grid; grid-template-columns: 0.8fr 1.2fr 1fr; gap: 6px; }
.date-boxes .input--select { width: 100%; min-width: 0; }
.changed { color: var(--color-champagne); }
.notice--warn { display: block; padding: var(--space-3); border: 1px solid var(--color-error); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.notice--warn strong { color: var(--color-error); font-weight: var(--font-weight-medium); }
/* Programme timeline (F25) */
.timeline { list-style: none; margin: var(--space-3) 0 0 var(--space-2); padding: 0 0 0 var(--space-5); border-left: 2px solid var(--color-divider); }
.tl { position: relative; margin-bottom: var(--space-3); }
.tl::before { content: ""; position: absolute; left: calc(var(--space-5) * -1 - 7px); top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-ash); }
.tl--done::before { background: var(--color-success); border-color: var(--color-success); }
.tl--now::before { background: var(--color-champagne); border-color: var(--color-champagne); }
.tl--ended::before { border-style: dashed; }
.tl--gap::before { border-color: var(--color-error); border-style: dashed; }
.tl__card { margin: 0; }
.tl--now .tl__card { border: 1px solid var(--accent-mark); }
.tl--gap .tl__card { background: transparent; border: 1px dashed var(--color-error); }
.tl--gap .list__title { color: var(--color-error); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tag-pill--now { border-color: var(--accent-mark); color: var(--color-champagne); }
.assign-chip--now { border-color: var(--accent-mark); }
/* Coach alerts (F24) */
.needs-you { padding: var(--space-3); }
.needs-you .section__title { margin-bottom: var(--space-1); }
.alert-row { justify-content: flex-start; gap: var(--space-3); }
.alert-row .list__main { flex: 1 1 auto; display: flex; flex-direction: column; }
.alert-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-mark); }
.alert-dot--urgent { background: var(--color-error); }
/* Block chips wrap onto two lines on wide screens instead of cutting names short (F54) */
@media (min-width: 720px) { .bchip__text { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
/* Swipe left to delete (F50) */
.swipe { position: relative; overflow: hidden; }
.swipe__row { position: relative; z-index: 1; background: var(--color-surface); touch-action: pan-y; }
.swipe__row--anim { transition: transform 0.18s ease-out; }
.swipe__del { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; border: 0; border-radius: 0; background: var(--color-error); color: var(--color-bg); font: inherit; font-weight: var(--font-weight-medium); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .swipe__row--anim { transition: none; } }
/* Compact entry rows (F49) */
.entry--compact .list__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry--tap { cursor: pointer; }
.entry .list__actions { flex-shrink: 0; }
.list > .swipe:not(:first-child) > .swipe__row { border-top: 1px solid var(--color-divider); }
.swipe > .list__row--active { background: var(--accent-fill), var(--color-surface); }
/* Measurements (F33, F34): compact latest card, left / right, how to measure */
.mcard { padding: var(--space-3); }
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin-top: var(--space-2); }
@media (min-width: 720px) { .mgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mtile { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 var(--space-2); }
.mtile__label { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.mtile__val { font-weight: var(--font-weight-medium); }
.mtile--old .mtile__val { color: var(--color-text-muted); }
.mchg { font-size: var(--font-size-sm); }
.mchg--down { color: var(--color-success); }
.mchg--up { color: var(--color-champagne); }
.mchg--flat { color: var(--color-text-muted); }
.mcard__foot { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.info-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--color-champagne); font: inherit; font-size: 14px; cursor: pointer; }
.mgrid-form { display: grid; gap: var(--space-3); }
.mrow .field__label { display: flex; align-items: center; gap: 4px; }
.mrow__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mrow__pair label { display: flex; align-items: center; gap: 6px; }
.mrow__side { font-size: var(--font-size-xs); color: var(--color-text-muted); width: 12px; }
.mhist { white-space: normal; }
.howto { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.howto p { margin: 0; align-self: stretch; }
.howto__fig { flex-shrink: 0; display: flex; justify-content: center; width: 100%; padding: var(--space-2) 0; border-radius: 12px; background: var(--color-bg); }
.howto__fig svg { max-width: 100%; height: auto; }
.howto__body { fill: var(--color-divider); stroke: var(--color-border-strong); stroke-width: 0.8; }
.howto__tape { fill: none; stroke: var(--color-champagne); stroke-width: 1.8; stroke-linecap: round; }
.howto__tape--back { stroke-width: 1.2; stroke-dasharray: 2.4 2; opacity: 0.8; }
/* Profile photos (F45) and the account switcher (F38) */
.avatar-img { object-fit: cover; padding: 0; }
.switcher__avatar--xl { width: 72px; height: 72px; font-size: 22px; }
.pick--who { display: flex; gap: var(--space-3); text-align: left; }
.pick--who .pick__main { flex: 1 1 auto; }
/* Thin coaching strip (F40): one line, scrolls away */
#coach-strip.coach-strip { min-height: 32px; padding: 4px var(--space-4); font-size: var(--font-size-sm); }
.coach-strip__text { min-width: 0; }
.coach-strip__more { color: var(--color-text-muted); }
.coach-strip__back { flex-shrink: 0; color: var(--color-text); }
/* Profile photo block on Profile & Goal */
.photo-row { display: flex; align-items: center; gap: var(--space-4); }
.photo-row__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Settings groups (F41) */
.settings-group__note { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
/* ---------- Batch 2: trainer set-up, brand, finish screen (24 Oct 2026) ---------- */
.title-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.title-chip { min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: 18px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.title-chip[aria-pressed="true"] { border-color: var(--accent-mark); color: var(--color-text); background: var(--accent-fill); }
.code-input { letter-spacing: 0.12em; text-transform: uppercase; font-weight: var(--font-weight-medium); }
.text-ok { color: var(--color-success); }
.text-error { color: var(--color-error); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 2px var(--color-bg); }
.swatch[aria-checked="true"] { border-color: var(--color-text); }
.swatch--own { background: transparent; border: 1px dashed var(--color-border-strong); color: var(--color-text-muted); font: inherit; box-shadow: none; }
.custom-colour { margin-top: var(--space-2); max-width: 220px; }
.logo-slot { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }
.logo-slot__img { width: 100%; height: 100%; object-fit: contain; }
.logo-slot__none { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.brand-preview { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.brand-preview__top { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.brand-preview .trainer-card { padding: var(--space-2) var(--space-3); border: 1px solid var(--accent-mark); border-radius: var(--radius-md); }
.brand__logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.brand__name { font-weight: var(--font-weight-medium); letter-spacing: 0.02em; }
.topbar .brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.powered-by { margin: var(--space-4) 0 calc(var(--space-6) + 64px); text-align: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.login .powered-by { margin-bottom: 0; }
.invite__logo { display: block; width: 72px; height: 72px; margin: 0 auto var(--space-3); object-fit: contain; border-radius: var(--radius-md); }
.trainer-card { margin-top: var(--space-3); }
.trainer-card__row { display: flex; align-items: flex-start; gap: var(--space-3); }
.trainer-card__main { flex: 1 1 auto; min-width: 0; }
.trainer-card__msg { margin: 2px 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
section.trainer-card { border: 1px solid var(--accent-mark); }
/* Finish screen (F15) */
.wiz-done { text-align: center; margin-top: var(--space-4); }
.wiz-done__ring { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 2px solid var(--color-success); border-radius: 50%; color: var(--color-success); }
.wiz-done__ring svg { width: 28px; height: 28px; }
.next-steps { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.next-step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.next-step__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--accent-mark); border-radius: 50%; color: var(--color-champagne); font-size: var(--font-size-xs); }
.next-step__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wiz-done__alt { text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }
/* Tap the photo circle to add or change it (F61) */
.avatar-tap { position: relative; display: inline-flex; cursor: pointer; border-radius: 50%; }
.avatar-tap__badge { position: absolute; right: -2px; bottom: -2px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--accent-mark); color: var(--color-champagne); }
.avatar-tap__badge svg { width: 14px; height: 14px; }
/* Date boxes never squash (Matt's Profile screenshot, 24 Oct): readable minimum widths, and the date of birth
   gets the whole row on wide screens */
.date-boxes { grid-template-columns: minmax(64px, 0.8fr) minmax(88px, 1.2fr) minmax(88px, 1fr); flex: 1 1 auto; min-width: 0; max-width: 360px; }
.date-boxes .bsel, .date-boxes .input--select { width: 100%; min-width: 0; padding-right: 26px; }
.profile-grid .field:has(.date-boxes) { grid-column: 1 / -1; }
.unit-inputs:has(.date-boxes) { flex-wrap: wrap; }
/* ---------- Progress (Round 3, 24 Oct 2026) ---------- */
.large-title { font-size: 30px; line-height: 1.15; margin: var(--space-2) 0 var(--space-3); }
.seg--range { margin-bottom: var(--space-3); }
.pcards { display: grid; gap: var(--space-2); }
@media (min-width: 720px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pcard { display: block; padding: var(--space-3); border-radius: 12px; background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: transform 0.12s ease-out; }
.pcard:active { transform: scale(0.985); }
.pcard__head { display: flex; justify-content: space-between; align-items: center; }
.pcard__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-champagne); letter-spacing: 0.02em; }
.pcard__body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: 2px; }
.pcard__main { min-width: 0; display: flex; flex-direction: column; }
.pcard__big { font-size: 28px; font-weight: var(--font-weight-medium); line-height: 1.1; }
.pcard__big small { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.pcard__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.spark { width: 84px; height: 28px; flex-shrink: 0; }
.spark__line { fill: none; stroke: var(--color-champagne); stroke-width: 2; }
.spark__dot { fill: var(--color-champagne); }
.spark__bar { fill: var(--color-ash); }
.spark__bar--done { fill: var(--color-success); }
.spark__bar--now { fill: var(--color-champagne); }
.chg-up { color: var(--color-champagne); font-size: var(--font-size-sm); }
.chg-down { color: var(--color-success); font-size: var(--font-size-sm); }
.tag-pb { font-size: 11px; padding: 1px 7px; border: 1px solid var(--color-success); border-radius: 9px; color: var(--color-success); flex-shrink: 0; }
.pchart-wrap { margin: var(--space-2) 0; touch-action: pan-y; }
.pchart { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.pchart__grid { stroke: var(--color-divider); stroke-width: 1; }
.pchart__label { fill: var(--color-text-muted); font-size: 9px; font-family: var(--font-family); }
.pchart__line { fill: none; stroke: var(--color-champagne); stroke-width: 2.5; stroke-linejoin: round; }
.pchart__pt { fill: var(--color-champagne); }
.pchart__pt--best { fill: var(--color-success); }
.pchart__dot { fill: var(--color-border-strong); }
.pchart__goal { stroke: var(--color-success); stroke-dasharray: 4 4; }
.pchart__goal-label { fill: var(--color-success); font-size: 9px; font-family: var(--font-family); }
.pchart__cursor { stroke: var(--color-text); stroke-width: 1; opacity: 0.6; }
.pchart__tipbox { fill: var(--color-surface); stroke: var(--color-border-strong); }
.pchart__tip { fill: var(--color-text); font-size: 10px; font-family: var(--font-family); }
.ptiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 720px) { .ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ptile { display: flex; flex-direction: column; padding: var(--space-3); border-radius: 12px; background: var(--color-surface); }
.ptile b { font-size: var(--font-size-title); font-weight: var(--font-weight-medium); }
.ptile__label { display: flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ptile__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.vlist { display: grid; gap: 10px; }
.vrow { display: grid; grid-template-columns: 96px 1fr 32px; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
.vrow b { text-align: right; font-weight: var(--font-weight-medium); }
.vbar { position: relative; height: 12px; border-radius: 6px; background: var(--color-bg); overflow: hidden; }
.vbar__range { position: absolute; top: 0; bottom: 0; background: var(--color-divider); }
.vbar__val { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 5px; background: var(--accent-bar); }
.vbar__val--low { background: var(--color-ash); }
.day-dots { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.day-dots__dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border-strong); }
.day-dots__dot--hit { background: var(--color-success); border-color: var(--color-success); }
.wbars { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: var(--space-2); }
.wbars__col { position: relative; flex: 1 1 0; height: 100%; }
.wbars__plan { position: absolute; left: 0; right: 0; bottom: 0; border: 1px solid var(--color-border-strong); border-radius: 3px; }
.wbars__done { position: absolute; left: 2px; right: 2px; bottom: 0; border-radius: 3px; background: var(--color-champagne); }
.wbars__done--full { background: var(--color-success); }
.note-card { padding: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--accent-mark); }
.note-card__text { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.formula { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.formula--yours { border: 1px solid var(--accent-mark); }
/* Bottom sheets (Apple style): slide up from the bottom with a grab bar; swipe down to close */
dialog.dialog--sheet { transition: transform 0.18s ease-out; }
@media (max-width: 719px) {
  dialog.dialog--sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); animation: sheet-up 0.22s ease-out; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.dialog--sheet { animation: none; transition: none; } }
.sheet__grab { width: 40px; height: 5px; margin: -4px auto var(--space-3); border-radius: 3px; background: var(--color-ash); cursor: grab; touch-action: none; }
/* ---------- The Apple pass (24 Oct 2026) ---------- */
/* A8 · Large page titles on phones */
@media (max-width: 719px) { .page-head h1 { font-size: 28px; line-height: 1.15; } }
/* A9 · On/off settings look like iOS switches (green when on) */
.toggle__box { appearance: none; -webkit-appearance: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: var(--color-border-strong); transition: background 0.18s ease-out; flex-shrink: 0; }
.toggle__box::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--switch-knob); transition: transform 0.18s ease-out; }
.toggle__box:checked { background: var(--color-success); }
.toggle__box:checked::after { transform: translateX(20px); }
.toggle__box:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.toggle { align-items: center; }
/* A11 · Buttons and cards dip slightly when pressed */
.btn, .icon-btn, .seg__btn, .kind-pick, .title-chip, .swatch { transition: transform 0.1s ease-out; }
.btn:active, .icon-btn:active, .seg__btn:active, .kind-pick:active, .title-chip:active, .swatch:active { transform: scale(0.97); }
a.list__row:active, .entry--tap:active { background: var(--color-divider); }
@media (prefers-reduced-motion: reduce) { .btn:active, .icon-btn:active, .seg__btn:active, .pcard:active { transform: none; } .toggle__box, .toggle__box::after { transition: none; } }
/* A3 · Undo toast */
.toast--undo { display: flex; align-items: center; gap: var(--space-3); }
.toast__undo { border: 0; background: transparent; color: var(--color-champagne); font: inherit; font-weight: var(--font-weight-medium); cursor: pointer; padding: 4px 2px; }
/* A6 · Pull to refresh */
.ptr { position: fixed; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%); z-index: 40; padding: 4px 12px; border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ptr--ready { color: var(--color-text); border-color: var(--accent-mark); }
/* A2 · Sheets: the grab bar only shows on phones */
@media (min-width: 720px) { .sheet__grab { display: none; } }
/* Admin account (24 Oct 2026) */
.admin-eyebrow { margin: var(--space-2) 0 0; font-size: var(--font-size-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-champagne); }
.chips-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
a.title-chip { display: inline-flex; align-items: center; text-decoration: none; }
.ptile--link { color: var(--color-text); text-decoration: none; }
.ptile--link:active { transform: scale(0.98); }
.admin-row { gap: var(--space-3); justify-content: flex-start; }
.admin-row .list__main { flex: 1 1 auto; display: flex; flex-direction: column; }
.admin-row__status { margin-left: var(--space-2); text-transform: capitalize; color: var(--color-text-muted); }
/* Book a demo + privacy notice (public pages) */
.consent { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.consent input { margin-top: 3px; accent-color: var(--color-champagne); }
.legal h2 { font-size: var(--font-size-title); margin-top: var(--space-4); }
.legal ul { padding-left: var(--space-4); }
/* Abode HQ */
.page--hq { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.hq-tabs { z-index: 26; }
body.no-tabbar .hq-tabs { display: grid; }
.hq-row { gap: var(--space-3); justify-content: flex-start; }
.hq-row .list__main { flex: 1 1 auto; display: flex; flex-direction: column; }
.hq-note { margin: 0; white-space: pre-wrap; color: var(--color-text); font-size: var(--font-size-sm); }
.hq-reply { border-left: 2px solid var(--accent-mark); }
.hq-task { justify-content: flex-start; gap: var(--space-3); cursor: pointer; }
.is-done-text { text-decoration: line-through; color: var(--color-text-muted); }
.alert-dot--ok { background: var(--color-success); }

/* ---------- Plans and billing (F68) ---------- */
.plan-chooser { display: flex; flex-direction: column; }
.plan-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); }
.plan-slider { width: 100%; margin: var(--space-2) 0 0; accent-color: var(--color-champagne); min-height: 32px; }
.plan-ticks { display: flex; justify-content: space-between; padding: 0 9px; margin-top: calc(-1 * var(--space-2)); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.plan-ticks span { width: 0; display: flex; justify-content: center; }
.plan-price { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.plan-price__who { display: flex; flex-direction: column; min-width: 0; }
.plan-price__big { font-size: 40px; line-height: 1; font-weight: var(--font-weight-medium); white-space: nowrap; }
.plan-price__big small { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.plan-ticks2 { list-style: none; margin: 0; padding: 0; font-size: var(--font-size-sm); }
.plan-ticks2 li { position: relative; padding: 2px 0 2px 22px; }
.plan-ticks2 li::before { content: "✓"; position: absolute; left: 2px; color: var(--color-success); }
.code-row { display: flex; gap: var(--space-2); }
.code-row .input { flex: 1; min-width: 0; text-transform: uppercase; }
.notice--ok { color: var(--color-success); border-color: var(--color-success); }
.test-pay { margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-champagne); border-radius: var(--radius-sm); color: var(--color-champagne); font-size: var(--font-size-sm); text-align: center; }
.pay-lines { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-input-bg); }
.pay-line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-sm); }
.pay-line--total { margin-top: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); }
.seat-card { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.seat-card:active { transform: scale(0.99); }
.seat-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.seat-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--color-input-bg); overflow: hidden; margin: var(--space-1) 0; }
.seat-bar::-webkit-progress-bar { background: var(--color-input-bg); border-radius: 3px; }
.seat-bar::-webkit-progress-value { background: var(--success-bar); border-radius: 3px; }
.seat-bar::-moz-progress-bar { background: var(--success-bar); border-radius: 3px; }
.plan-status { display: flex; flex-direction: column; gap: var(--space-1); }
.plan-offer { border: 1px solid var(--color-champagne); }
.plan-tag { font-size: var(--font-size-xs); padding: 1px 8px; border: 1px solid var(--color-border-strong); border-radius: 10px; color: var(--color-text-muted); white-space: nowrap; }
.plan-tag--ok { border-color: var(--color-success); color: var(--color-success); }
.plan-banner { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-error); font-size: var(--font-size-sm); color: var(--color-text); text-align: center; }
.plan-banner a { color: var(--color-error); font-weight: var(--font-weight-medium); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pricing__table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.pricing__table th, .pricing__table td { padding: 6px 4px; border-bottom: 1px solid var(--color-divider); text-align: left; }
.pricing__table th { color: var(--color-text-muted); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); }
.pricing__table td.num, .pricing__table th:not(:first-child) { text-align: right; }
.pricing__promise { margin: var(--space-2) 0 0; padding-left: 18px; font-size: var(--font-size-sm); }
.pricing__promise li { margin-bottom: var(--space-1); }
.pricing__promise strong { font-weight: var(--font-weight-medium); }

/* ---------- Move and Scale (F69) and your own colour (F70) ---------- */
.crop { position: relative; width: 288px; height: 288px; max-width: 100%; margin: var(--space-3) auto 0; border-radius: var(--radius-md); overflow: hidden; background: var(--color-input-bg); touch-action: none; }
.crop--square { background: var(--color-input-bg); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.crop__canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.crop__canvas:active { cursor: grabbing; }
.crop:not(.crop--square)::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-border-strong); pointer-events: none; }
.crop__zoom-row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) auto 0; max-width: 288px; color: var(--color-text-muted); }
.crop__zoom { flex: 1; accent-color: var(--color-champagne); min-height: 32px; }
.colour-row { display: flex; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-3); }
.colour-wheel__wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.colour-wheel { width: 64px; height: 64px; padding: 0; border: 1px solid var(--color-border-strong); border-radius: 50%; background: transparent; cursor: pointer; overflow: hidden; }
/* F165: make the wheel look tappable: an accent ring, a pencil badge and "Tap to choose" */
.colour-wheel__tap { position: relative; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--accent-mark); }
.colour-wheel__hint { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }
.colour-wheel::-webkit-color-swatch-wrapper { padding: 0; }
.colour-wheel::-webkit-color-swatch { border: 0; border-radius: 50%; }
.colour-wheel::-moz-color-swatch { border: 0; border-radius: 50%; }
.colour-hex { max-width: 140px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.colour-preview { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg); }
.colour-preview .list__meta { flex: 1; }
.colour-sample { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--color-bg); }

/* ---------- Appearance (F71) ---------- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); }
.mode { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); background: none; border: 0; color: var(--color-text); font: inherit; cursor: pointer; padding: 0; }
.mode-thumb { display: flex; width: 74px; height: 120px; border-radius: 12px; border: 2px solid var(--color-border); overflow: hidden; }
.mode[aria-checked="true"] .mode-thumb { border-color: var(--accent-mark); }
.mode-thumb i { display: block; flex: 0 0 30px; margin: 6px; border-radius: 4px; width: calc(100% - 12px); }
.mode-thumb--light { background: var(--swatch-light-bg); flex-direction: column; } .mode-thumb--light i { background: var(--swatch-light-card); }
.mode-thumb--dark { background: var(--swatch-dark-bg); flex-direction: column; } .mode-thumb--dark i { background: var(--swatch-dark-card); }
.mode-thumb--split { padding: 0; }
.mode-thumb__half { display: flex; flex-direction: column; flex: 1; }
.mode__dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border-strong); display: inline-flex; align-items: center; justify-content: center; }
.mode[aria-checked="true"] .mode__dot { border-color: var(--accent-mark); }
.mode[aria-checked="true"] .mode__dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-mark); }
.mode:active .mode-thumb { transform: scale(0.97); }
/* A trainer's logo on a dark tile in light mode ("On a dark tile"); in dark mode the tile is see-through. */
.logo--tile { background: var(--logo-tile); padding: 3px; }
.logo--tile-on { background: var(--swatch-dark-bg); padding: 3px; }
.logo-previews { display: flex; gap: var(--space-2); }
.logo-preview { flex: 1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.logo-preview--light { background: var(--swatch-light-bg); color: var(--swatch-light-text); }
.logo-preview--dark { background: var(--swatch-dark-bg); color: var(--swatch-dark-text); }
.logo-preview__label { font-size: var(--font-size-xs); }
.colour-previews { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0; }
.colour-previews .colour-preview { margin: 0; }
.colour-preview--dark { background: var(--swatch-dark-bg); color: var(--swatch-dark-text); }
.colour-preview--light { background: var(--swatch-light-bg); color: var(--swatch-light-text); border: 1px solid var(--color-border); }
.colour-preview--light .btn { color: var(--swatch-light-text); }
.colour-preview--dark .btn { color: var(--swatch-dark-text); }
.colour-preview__label { flex: 1; font-size: var(--font-size-xs); }
.colour-preview--dark { --accent-base: var(--swatch-dark-bg); }
.colour-preview--light { --accent-base: var(--swatch-light-bg); }
/* Light mode: white cards lift slightly off the grey page (no shadow in dark mode). */
.list, .card, .pcard, .ptile, .seat-card, .plan-card, .dialog { box-shadow: var(--surface-shadow); }
.card .list, .card .card, dialog .list, dialog .card { box-shadow: none; }

/* ---------- Refined header (24 Oct): calmer proportions, a lighter account selector ---------- */
.brand__lockup { height: 30px; }
.switcher { min-height: 34px; padding: 0 10px 0 3px; gap: 6px; background: var(--color-surface); border-color: var(--color-border); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.switcher .switcher__avatar { width: 28px; height: 28px; background: var(--color-bg); }

/* ---------- The refined look, everywhere (approved on Settings, 24 Oct; PHOENIX_BRIEF.md › Visual direction) ----------
   Compact grouped rows like iPhone Settings: medium 16px labels, regular 13px supporting text, inset dividers,
   aligned chevrons, small uppercase section labels, 12px corners. */
h1 { font-size: 28px; letter-spacing: -0.01em; }
.large-title { font-size: 28px; letter-spacing: -0.01em; }
.page-head { min-height: 0; margin: var(--space-1) 0 var(--space-2); }
.section { margin-top: var(--space-5); }
.section.mt-4 { margin-top: var(--space-5); }
.section__head { margin: 0 0 6px; }
.section__title { font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); padding: 0; }
/* Indented to line up with the row text only above a grouped list or card (iOS style); flush with plain form fields. */
.section:has(> .list, > .card) > .section__head .section__title, .section__title + .list, .section:has(> .list) > .section__title { padding-left: var(--space-4); }
.card { border-radius: 12px; }
.list { border-radius: 12px; overflow: hidden; }
.list__row { position: relative; justify-content: flex-start; gap: var(--space-3); min-height: 52px; padding: 8px 14px 8px var(--space-4); border-top: 0; }
.list__row + .list__row::before, .list > form + .list__row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--space-4); border-top: 1px solid var(--color-divider); pointer-events: none; }
.list__main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.list__title { font-size: 16px; font-weight: var(--font-weight-medium); line-height: 1.25; }
.list__meta { font-size: 13px; font-weight: var(--font-weight-regular); line-height: 1.3; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.list__row > .chevron, .list__row > .list__actions { margin-left: auto; }
.chevron svg { width: 16px; height: 16px; }
a.list__row:hover, button.list__row:hover { background: var(--color-bg); }
.page--settings .list__meta { white-space: nowrap; }
.settings-avatar { width: 36px; height: 36px; font-size: 12px; margin: 0; border: 1px solid var(--color-border); }
.settings-group__note { text-transform: none; letter-spacing: 0; }
/* Finish setting up: one compact row per item, ✕ to dismiss. */
.nudge-row { padding-right: 4px !important; }
.nudge-row__go { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.nudge-row__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--color-border-strong); color: var(--color-text-muted); }
.nudge-row__icon svg { width: 14px; height: 14px; }
.nudge-row__close { flex: none; width: 44px; height: 44px; color: var(--color-text-muted); }
.nudge-row__close svg { width: 16px; height: 16px; }
.signout-row { justify-content: center !important; color: var(--color-error) !important; font-weight: var(--font-weight-medium); }
.settings-foot { margin: var(--space-3) var(--space-4) 0; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); text-align: center; }

/* ---------- Your business: backgrounds, highlights, live preview, welcome, questions (F74) ---------- */
.biz-card { gap: 0; }
.biz-note { margin: 0 0 var(--space-3); }
.biz-sub { font-weight: var(--font-weight-medium); color: var(--color-text); }
.theme-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.theme-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; background: none; border: 0; color: var(--color-text); font: inherit; font-size: var(--font-size-xs); cursor: pointer; }
.theme-chip { display: flex; align-items: flex-end; justify-content: center; width: 100%; max-width: 64px; height: 44px; border-radius: 10px; border: 2px solid var(--color-border); overflow: hidden; }
.theme-chip i { display: block; width: 70%; height: 55%; border-radius: 5px 5px 0 0; }
.theme-pick[aria-checked="true"] .theme-chip { border-color: var(--accent-mark); }
.swatch-auto { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) 0 0; background: none; border: 0; color: var(--color-text); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.brand-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.brand-phone { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-size: 13px; min-width: 0; }
.brand-phone__top { display: flex; align-items: center; gap: 6px; padding: 10px; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.brand-phone__top .brand__logo { width: 22px; height: 22px; }
.brand-phone__top .brand__name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-phone__body { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.brand-phone__body .card { padding: 10px; border-radius: 10px; background: var(--color-surface); }
.brand-phone__body .list__title { font-size: 13px; }
.brand-phone__body .list__meta { font-size: 11px; }
.brand-phone__body .btn--sm { min-height: 26px; font-size: 12px; padding: 0 10px; }
.brand-phone__msg { font-size: 12px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brand-phone__week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.brand-phone__week .day { min-height: 40px; border-radius: 8px; cursor: default; }
.brand-phone__week .day__num { font-size: 13px; }
.brand-phone__week .day__wd { font-size: 10px; }
.brand-phone .powered-by { margin: 0 0 22px; font-size: 10px; }
.brand-phone__label { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 10px; color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.edit-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.edit-list__row { display: flex; align-items: center; gap: var(--space-2); }
.edit-list__row .input { flex: 1 1 auto; min-width: 0; }
.edit-list__row--q .input--select, .edit-list__row--q .select-btn { flex: 0 0 120px; }
.edit-list .btn--quiet { align-self: flex-start; padding-left: 0; }
.link-box { display: flex; flex-direction: column; gap: var(--space-2); }
.link-box .coach-code__actions { display: flex; gap: var(--space-2); }
/* A trainer's public pages (F74): their logo and name instead of Abode's lockup. */
.trainer-lockup { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0 auto var(--space-5); text-align: center; }
.trainer-lockup__logo { width: 88px; height: 88px; object-fit: contain; border-radius: 18px; }
.trainer-lockup__name { font-size: 20px; font-weight: var(--font-weight-medium); color: var(--color-text); }
.trainer-lockup__by { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.trainer-page__bio { margin: var(--space-3) 0 0; color: var(--color-text); line-height: 1.5; white-space: pre-wrap; }
/* First week with a trainer (F74) */
.fw-row { justify-content: flex-start; }
.fw-tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); color: var(--color-surface); }
.fw-tick.is-done { background: var(--color-success); border-color: var(--color-success); }
.fw-tick svg { width: 14px; height: 14px; }
.fw-play { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; color: var(--accent-mark); }
.fw-play svg { width: 18px; height: 18px; }
.trk-qhead { margin: var(--space-4) 0 var(--space-1); font-size: 12px; font-weight: var(--font-weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.rate__btn--wide { flex: 1 1 0; }
/* Calories in / out / net for the day (Tracking) */
.energy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.energy__cell { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border-radius: 10px; background: var(--color-bg); }
.energy__label { font-size: 12px; color: var(--color-text-muted); }
.energy__cell b { font-size: 20px; font-weight: var(--font-weight-medium); line-height: 1.2; }
.energy__unit { font-size: 11px; color: var(--color-text-muted); }

/* ---------- Calendar, calmer (testing 25 Oct) ---------- */
.day__marks, .mday__marks { gap: 3px; min-height: 8px; margin-top: 5px; }
.dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; }
.dot--done { background: var(--color-success); }
.dot--planned { box-shadow: inset 0 0 0 1.5px var(--accent-mark); }
.dot--live { background: var(--accent-mark); }
.dot--rest { background: var(--color-border-strong); }
.dot--skipped { box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.dot--status { width: 10px; height: 3px; border-radius: 2px; background: var(--color-text-muted); }
.day[aria-pressed="true"] .dot--planned { box-shadow: inset 0 0 0 1.5px currentColor; }
.day[aria-pressed="true"] .dot--status, .day[aria-pressed="true"] .dot--rest { background: currentColor; opacity: 0.6; }
.status-band { gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 0; border-radius: 10px; background: var(--color-bg); }
.status-band__icon { color: var(--color-text-muted); }
.status-band__icon svg { width: 16px; height: 16px; }
.status-band__title { font-size: var(--font-size-sm); }
.status-band__meta { font-size: 12px; }
.status-band .btn--sm { min-height: 30px; }
.ring { width: 48px; height: 48px; border-width: 2px; }
.ring svg { width: 20px; height: 20px; }
.hero { margin: var(--space-2) 0 var(--space-2); }
.hero__title { font-size: 24px; }
.card--day .list { background: transparent; border-radius: 0; margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); border-top: 1px solid var(--color-divider); }
.list__row.entry .kind-icon svg { width: 20px; height: 20px; }
.card__add { margin-left: calc(-1 * var(--space-1)); }
/* Day view: fold a card away, and "Edit this view" (testing 25 Oct) */
.fold-btn { width: 32px; height: 32px; margin-left: var(--space-1); color: var(--color-text-muted); }
.fold-btn svg { width: 16px; height: 16px; transition: transform 0.15s ease-out; }
.is-folded .fold-btn svg { transform: rotate(-90deg); }
.card.is-folded > :not(.card__head), .section.is-folded > :not(.section__head) { display: none; }
.card.is-folded { padding-bottom: var(--space-3); }
.card__head { gap: var(--space-1); }
.card__head .card__eyebrow { margin-right: auto; }
.section__head--action .section__heading { margin-right: auto; }
.edit-view { color: var(--color-text-muted); }
.edit-card__toggle { flex: 1 1 auto; min-width: 0; }
.edit-card .icon-btn:disabled { opacity: 0.3; }
.page > .card, .page > .checkin-row { margin-top: var(--space-3); }
/* How a workout went (testing 25 Oct) */
.rate--10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.rate--10 .rate__btn { min-width: 0; padding: 0; }
.rpe-words { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.how-card { margin: var(--space-3) 0; }

/* ---------- How it went: the effort dial (testing 25 Oct, after Trainerize, made Abode) ---------- */
dialog.dialog--how { max-height: 96vh; }
@media (max-width: 719px) { dialog.dialog--how.dialog--sheet { min-height: 92vh; } }
.how { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-4) 0 var(--space-2); min-height: 100%; }
.how__back { position: absolute; left: 0; top: 0; color: var(--color-text-muted); }
.how__title { margin: var(--space-6) 0 var(--space-1); font-size: 22px; font-weight: var(--font-weight-medium); max-width: 260px; line-height: 1.3; }
.how__intro { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.dial { display: flex; flex-direction: column; align-items: center; width: 100%; outline: none; }
.dial__word { margin: var(--space-4) 0 0; font-size: 15px; font-weight: var(--font-weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); min-height: 22px; }
.dial[data-level="easy"] .dial__word { color: var(--color-success); }
.dial[data-level="mid"] .dial__word { color: var(--color-champagne); }
.dial[data-level="hard"] .dial__word { color: var(--color-error); }
.dial__face { position: relative; width: min(260px, 72vw); aspect-ratio: 1; margin-top: var(--space-2); }
.dial__svg { width: 100%; height: 100%; touch-action: none; cursor: pointer; overflow: visible; }
.dial__track { fill: none; stroke: var(--color-border); stroke-width: 12; stroke-linecap: round; }
.dial__fill { fill: none; stroke: url(#dialGrad); stroke-width: 12; stroke-linecap: round; }
.dial__tick { fill: var(--color-border); transition: fill 0.15s; }
.dial__tick.is-on { fill: var(--color-text-muted); }
.dial[data-level="easy"] .dial__tick.is-on { fill: var(--color-success); }
.dial[data-level="hard"] .dial__tick.is-on { fill: var(--color-error); }
.dial__thumb { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 4; }
.dial-stop--easy { stop-color: var(--color-success); }
.dial-stop--mid { stop-color: var(--color-champagne); }
.dial-stop--hard { stop-color: var(--color-error); }
.dial__flame { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: transform 0.2s ease-out, color 0.2s; pointer-events: none; }
.dial__flame svg { width: 88px; height: 88px; stroke-width: 1.2; }
.dial[data-level="easy"] .dial__flame { color: var(--color-success); }
.dial[data-level="mid"] .dial__flame { color: var(--color-champagne); }
.dial[data-level="hard"] .dial__flame { color: var(--color-error); }
.how__comment { margin-top: var(--space-4); min-height: 44px; padding: 0 var(--space-6); border: 0; border-radius: 10px; background: var(--color-bg); color: var(--color-text-muted); font: inherit; cursor: pointer; }
.how textarea { width: 100%; margin-top: var(--space-4); }
.how__kcal { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text); }
.how__kcal .input { width: 96px; min-height: 40px; text-align: center; }
.how__kcal .stat__icon svg { width: 18px; height: 18px; color: var(--color-text-muted); }
.how__done { margin-top: auto; min-height: 52px; border-radius: 14px; }
.how .notice { width: 100%; }
.dial__flame svg path { fill: currentColor; fill-opacity: 0.18; }
/* Effort: option A, bars that rise (approved 25 Oct) */
.how { align-items: stretch; text-align: left; }
.how__title { margin: var(--space-6) 0 var(--space-1); max-width: none; font-size: 24px; }
.effort { align-items: stretch; margin-top: var(--space-5); }
.effort__big { display: flex; align-items: baseline; }
.effort__num { font-size: 64px; line-height: 1; font-weight: var(--font-weight-medium); }
.effort__of { font-size: 18px; color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.effort__word { margin: var(--space-2) 0 0; font-size: 18px; font-weight: var(--font-weight-medium); color: var(--color-text-muted); transition: color 0.2s; }
.effort[data-level="easy"] .effort__word { color: var(--effort-easy-text); }
.effort[data-level="mid"] .effort__word { color: var(--effort-mid-text); }
.effort[data-level="hard"] .effort__word { color: var(--effort-hard-text); }
.effort__hint { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); min-height: 18px; }
.effort__bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: var(--space-6); cursor: pointer; }
.effort__bar { flex: 1; border-radius: 6px; background: var(--color-input-bg); transition: background 0.15s; }
.effort__bar--1 { height: 20%; } .effort__bar--2 { height: 28%; } .effort__bar--3 { height: 36%; } .effort__bar--4 { height: 44%; } .effort__bar--5 { height: 52%; }
.effort__bar--6 { height: 60%; } .effort__bar--7 { height: 68%; } .effort__bar--8 { height: 76%; } .effort__bar--9 { height: 88%; } .effort__bar--10 { height: 100%; }
/* Each bar's colour: green → champagne → red, mixed from the effort tokens (light mode has brighter ones). */
.effort__bar--1.is-on { background: var(--effort-easy); }
.effort__bar--2.is-on { background: color-mix(in srgb, var(--effort-easy) 78%, var(--effort-mid)); }
.effort__bar--3.is-on { background: color-mix(in srgb, var(--effort-easy) 56%, var(--effort-mid)); }
.effort__bar--4.is-on { background: color-mix(in srgb, var(--effort-easy) 34%, var(--effort-mid)); }
.effort__bar--5.is-on { background: color-mix(in srgb, var(--effort-easy) 12%, var(--effort-mid)); }
.effort__bar--6.is-on { background: color-mix(in srgb, var(--effort-hard) 15%, var(--effort-mid)); }
.effort__bar--7.is-on { background: color-mix(in srgb, var(--effort-hard) 35%, var(--effort-mid)); }
.effort__bar--8.is-on { background: color-mix(in srgb, var(--effort-hard) 58%, var(--effort-mid)); }
.effort__bar--9.is-on { background: color-mix(in srgb, var(--effort-hard) 80%, var(--effort-mid)); }
.effort__bar--10.is-on { background: var(--effort-hard); }
.effort__range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: var(--space-2) 0 0; background: transparent; cursor: pointer; }
.effort__range:focus { outline: none; }
.effort__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--color-input-bg); }
.effort__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-text); }
.effort__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--color-input-bg); }
.effort__range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-text); }
.effort__range.is-unset::-webkit-slider-thumb { border-style: dashed; }
.effort__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--color-focus); }
.how .how__comment { align-self: stretch; text-align: left; }
.how__kcal { justify-content: space-between; background: var(--color-bg); border-radius: 12px; padding: var(--space-2) var(--space-3); }
/* Calories burned icon (option 9): warm, wherever it appears */
.icon-flame { color: var(--effort-hard); }
.stat__icon .icon-flame, .how__kcal .icon-flame { color: var(--effort-hard); }

/* Swipe to delete: the red fills the whole end of the row, corners included (testing 25 Oct) */
.swipe:has(> .card), .swipe:has(> .pcard) { border-radius: 12px; }
.day-list { margin-top: var(--space-2); }
.day-empty { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); }

.session-meta__when { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.session-meta__when .linklike { color: var(--color-text); }

/* Clean-up (25 Oct): check-in numbers as tidy rows — label left, small box right, thin line between (like iOS Health). */
.trk-field--num { display: grid; grid-template-columns: 1fr 128px; align-items: center; column-gap: var(--space-3); margin-top: 0; padding: var(--space-3) 0; }
.trk-field--num + .trk-field--num { border-top: 1px solid var(--color-divider); }
.trk-field--num .trk-row { flex-direction: column; align-items: flex-start; gap: 2px; }
.trk-field--num .trk-row .field__label { margin: 0; }
.trk-field--num .trk-hint { text-align: left; }
.trk-field--num .trk-input { max-width: none; width: 100%; min-height: 40px; text-align: right; }
.trk-field--num .field__error, .trk-field--num > div { grid-column: 1 / -1; }
.trk-field--num > div:empty { display: none; }
.client-row { cursor: pointer; }
.client-row .switcher__avatar { background: var(--color-bg); }
button.chevron { border: 0; background: none; padding: 0; cursor: pointer; }
.save-status:empty::before, .save-status:not([data-state])::before { display: none; }
.card .switcher__avatar, .list .switcher__avatar { background: var(--color-bg); }

/* 4/78 retest (25 Oct): the red only appears once you actually swipe; pressing a row is solid, never see-through. */
.swipe__del { visibility: hidden; }
.swipe--live > .swipe__del { visibility: visible; }
.swipe__row.entry--tap:active, a.swipe__row:active { background: linear-gradient(var(--color-divider), var(--color-divider)), var(--color-surface); }
.sheet__grab { position: relative; }
.sheet__grab::after { content: ""; position: absolute; inset: -14px -40px; } /* bigger target to grab */
.no-focus-ring:focus { outline: none; }
.day-more { margin: -6px -8px -6px auto; flex-shrink: 0; }
.panel__head .day-more { align-self: center; }

/* Unsaved-draft note (DESIGN_RULES 6.1) */
.draft-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }
.draft-note p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.draft-note strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.draft-note__actions { display: flex; gap: var(--space-2); }

/* "Discard what you've typed?" inside a sheet (DESIGN_RULES 4.2) */
.discard-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin: var(--space-3) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); border-top: 1px solid var(--color-divider); z-index: 5; }
.discard-bar p { margin: 0; font-weight: var(--font-weight-medium); }
.discard-bar__actions { display: flex; gap: var(--space-2); }
.btn--discard { background: var(--color-error); border-color: var(--color-error); color: var(--color-bg); }
.btn--destructive { color: var(--color-error); }
.card--upcoming .list { background: transparent; border-radius: 0; margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); border-top: 1px solid var(--color-divider); margin-top: var(--space-2); }
.card__head .btn--quiet.btn--sm + .fold-btn { margin-left: 0; }
.card__head > .card__eyebrow { flex: 1 1 auto; }

/* A card on top of an open sheet (how to measure from the Add form) */
.sheet-overlay { position: absolute; left: 0; right: 0; top: 0; min-height: 100%; z-index: 6; padding: var(--space-4) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); background: var(--color-surface); border-radius: inherit; }

/* Measurement history: compare a range (H3) */
.mcmp { margin-top: var(--space-2); border-radius: 12px; background: var(--color-bg); overflow: hidden; }
.mcmp__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 66px; align-items: center; padding: 9px var(--space-3); font-size: var(--font-size-sm); position: relative; }
.mcmp__row + .mcmp__row::before { content: ""; position: absolute; left: var(--space-3); right: 0; top: 0; border-top: 1px solid var(--color-divider); }
.mcmp__row > :not(:first-child) { text-align: right; }
.mcmp__row--head { font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: 0.04em; }
.mcmp__name { font-weight: var(--font-weight-medium); }
.mcmp__chg { color: var(--color-champagne); white-space: nowrap; }
.mrange { display: grid; gap: var(--space-3); }
.mrange .field { margin-top: 0; }
.switch-clients .bsel { display: flex; width: 100%; }
.colour-tip { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Get started: tap an option to continue (F102). Continue only shows for keyboard users. */
.wiz-tap .wiz-next:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }

/* P1 · Choose your plan: two cards (Free / Pro) */
.plan-pick { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.plan-opt { border-radius: 14px; background: var(--color-surface); padding: var(--space-3) var(--space-4); border: 1px solid transparent; cursor: pointer; text-align: left; }
.plan-opt[aria-pressed="true"] { border-color: var(--color-champagne); }
.plan-opt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.plan-opt__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.plan-opt__name { font-weight: var(--font-weight-medium); font-size: 17px; display: inline-flex; align-items: center; gap: var(--space-2); }
.plan-opt__tag { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bg); background: var(--color-champagne); border-radius: 4px; padding: 1px 6px; }
.plan-opt__price { font-weight: var(--font-weight-medium); font-size: 20px; }
.plan-opt__price small { font-size: 13px; color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.plan-opt__note { margin: 2px 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.plan-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.plan-list li { padding: 3px 0 3px 20px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 5px; border-left: 2px solid var(--color-champagne); border-bottom: 2px solid var(--color-champagne); transform: rotate(-45deg); }
.plan-list li.plus { color: var(--color-text-muted); }
.plan-list li strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.plan-opt__more { margin-top: var(--space-2); color: var(--color-champagne); }
.pro-more { margin-top: var(--space-2); }
.pro-all__group + .pro-all__group { margin-top: var(--space-3); }
.pro-all__title { margin: 0; font-weight: var(--font-weight-medium); }
/* A heading above a long list (Activity styles, template kit groups): bigger than the small Settings labels (F160) */
.section__title--list { font-size: var(--font-size-title); text-transform: none; letter-spacing: 0; color: var(--color-text); font-weight: var(--font-weight-medium); }
.metric-chip--always { cursor: default; }
/* Check-ins on one page (F162): the week in words, the days, "Weekly" under the weekly day (option B) */
.ck-when { gap: var(--space-2); }
.ck-sum { margin: 0 0 var(--space-2); font-size: var(--font-size-base); }
.ck-sum strong { font-weight: var(--font-weight-medium); }
.ck-under { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: -2px; text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text); min-height: 1.2em; }
.ck-when__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); margin-top: var(--space-2); }
.ck-when__day { width: auto; }
.ck-when__ctl { display: flex; align-items: center; gap: var(--space-3); }
.ck-when__label { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.ck-include--flat { padding: var(--space-3) 0 0; background: none; border-top: 1px solid var(--color-divider); border-radius: 0; }
/* Drag to reorder (F164): a grip on the left of each row; the row lifts while dragged, the others slide */
.drag-grip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 40px; margin-left: calc(var(--space-2) * -1); padding: 0; border: 0; background: none; color: var(--color-text-muted); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.drag-grip svg { width: 20px; height: 20px; }
.drag-grip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: var(--radius-sm); }
.is-sorting { -webkit-user-select: none; user-select: none; }
.is-sorting > :not(.is-dragging) { transition: transform 150ms ease; }
.is-dragging { position: relative; z-index: 2; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border-strong); cursor: grabbing; }
/* Trainer set-up (F172): welcome video and clients' check-ins folded in place */
.fw-video { padding: var(--space-3); }
.fw-video__player { display: block; width: 100%; max-height: 360px; margin-top: var(--space-2); border-radius: var(--radius-md); background: var(--color-bg); }
.ck-fold > summary { list-style: none; cursor: pointer; }
.ck-fold > summary::-webkit-details-marker { display: none; }
.ck-fold[open] .ck-fold__arrow { transform: rotate(180deg); }
.ck-embed { padding: 0 var(--space-1) var(--space-2); }
/* Trainer pricing estimator (F173; mockups/trainer-pricing-3.html) */
.est-promises { margin: 0 0 var(--space-3); font-size: var(--font-size-base); }
.est-card { gap: var(--space-2); }
.est-q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.est-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; }
.est-stepper button { width: 38px; border: 0; background: transparent; color: var(--color-text); font-size: 20px; cursor: pointer; }
.est-box { width: 56px; border: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); background: var(--color-input-bg); color: var(--color-text); text-align: center; font: inherit; font-size: var(--font-size-input); font-weight: var(--font-weight-medium); padding: 6px 0; }
.est-track { position: relative; margin: 30px 4px 2px; }
.est-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 5px; margin: 0; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, var(--color-text) 0 var(--pct, 0%), var(--color-divider) var(--pct, 0%) 100%); }
.est-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-text); }
.est-range { border: 0; box-shadow: none; outline: none; }
.est-range:focus, .est-range:focus-visible { outline: none; } /* no ring round the track (F174); the thumb shows focus */
.est-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-divider); }
.est-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-text); }
.est-bubble { position: absolute; top: -30px; transform: translateX(-50%); padding: 1px 8px; border-radius: var(--radius-md); background: var(--color-text); color: var(--color-bg); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); pointer-events: none; white-space: nowrap; }
.est-marks { position: relative; height: 18px; margin: 4px 4px 0; font-size: 11px; color: var(--color-text-muted); }
.est-marks span { position: absolute; transform: translateX(-50%); }
.est-marks__free { color: var(--color-success); font-weight: var(--font-weight-medium); }
.est-answer { text-align: center; margin-top: var(--space-2); }
.seg--sm .seg__btn { padding: 3px 12px; font-size: var(--font-size-xs); }
.code-link { display: block; color: var(--color-text-muted); word-break: break-all; }
/* Your app's look, grouped by mode (F174) */
.look-mode__title { margin: 0 0 var(--space-2); font-size: var(--font-size-title); font-weight: var(--font-weight-medium); }
.theme-chip--own { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--color-border-strong); background: transparent; color: var(--color-text-muted); }
.theme-chip--own svg { width: 18px; height: 18px; }
.bg-preview { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); color: var(--color-text); }
.bg-preview__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.bg-preview__card { display: flex; flex-direction: column; padding: var(--space-3); border-radius: var(--radius-md); }
.colour-tip--ok { color: var(--color-success); }
.est-big--words { font-size: 30px; }
.est-with { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.est-big { font-size: 42px; line-height: 1.1; font-weight: var(--font-weight-medium); }
.est-unit { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.est-sub { margin: 2px 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.est-info { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.est-i { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; font-weight: var(--font-weight-medium); font-style: normal; }
.est-foot { margin: var(--space-2) 0 0; text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.price-free { color: var(--color-success); }
.price-table__cap { border-top: 2px solid var(--color-text); }
.member-now { margin-top: var(--space-1); }
.hq-custom > summary { cursor: pointer; }
/* A tick box with a title and a line under it (F158: Use this look on my own app too) */
.check-row { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.check-row input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--btn-primary-bg); }
.check-row > span > span { display: block; }
/* The Pro lock (F158, Matt 27 Oct; mockups/pro-lock-and-colours.html): Personal Free sees Pro things faded, with a
   PRO badge at full strength; tapping explains and offers Go Pro. Never hidden. */
.is-locked .list__title, .is-locked .list__meta, .btn.is-locked > span:not(.tag-pill) { opacity: .45; }
.is-locked .tag-pill--pro, .pro-badge { background: var(--color-champagne); color: var(--color-bg); border-color: var(--color-champagne); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: var(--font-weight-medium); }
.pro-locked { position: relative; }
.pro-locked__body { opacity: .45; pointer-events: none; user-select: none; }
.pro-locked__tap { position: absolute; inset: 0; width: 100%; background: transparent; border: 0; cursor: pointer; border-radius: inherit; }
.pro-sheet__title { display: flex; align-items: center; gap: var(--space-2); }
.pro-sheet__sum { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); margin: var(--space-2) 0 var(--space-3); }
/* Calendar: an in-progress row keeps its layout; only the name part is the link (F157) */
.entry__open { display: contents; color: inherit; text-decoration: none; }
/* Membership: what you've got, what Pro unlocks (26 Oct) */
.plan-label { margin: 0; font-size: var(--font-size-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.plan-list__sub { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.plan-list--unlock li::before { content: "+"; border: 0; transform: none; width: auto; height: auto; top: 2px; left: 3px; color: var(--color-champagne); font-weight: var(--font-weight-medium); }
.plan-unlock__title { margin: 0; font-size: var(--font-size-title); font-weight: var(--font-weight-medium); display: flex; align-items: center; gap: var(--space-2); }
.plan-unlock .plan-chooser { margin-top: var(--space-3); }
/* P1 · Product tour */
.tour { display: flex; flex-direction: column; min-height: calc(100vh - 120px); max-width: 520px; margin: 0 auto; padding-top: var(--space-2); touch-action: pan-y; }
.tour__bar { display: flex; justify-content: space-between; align-items: center; }
.tour__part { font-size: var(--font-size-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.tour__skip { color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-base); }
.tour__art { position: relative; border-radius: 18px; background: var(--color-surface); margin: var(--space-3) 0 var(--space-4); padding: var(--space-4); display: grid; gap: var(--space-2); min-height: 220px; align-content: center; }
.tour__pro { position: absolute; top: 12px; right: 12px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--color-bg); background: var(--color-champagne); border-radius: 4px; padding: 2px 6px; }
.tour__row { display: flex; justify-content: space-between; gap: var(--space-2); background: var(--color-bg); border-radius: 10px; padding: 10px 12px; font-size: var(--font-size-sm); }
.tour__art--pro .tour__row .num { color: var(--color-champagne); }
.tour__title { font-size: 24px; margin: 0 0 var(--space-1); }
.tour__text { margin: 0; color: var(--color-text-muted); }
.tour__pager { display: flex; gap: 6px; justify-content: center; margin: var(--space-4) 0 var(--space-2); }
.tour__pager i { width: 6px; height: 6px; border-radius: 3px; background: var(--color-divider); }
.tour__pager i.on { width: 18px; background: var(--color-champagne); }
.tour__actions { margin-top: auto; display: grid; gap: var(--space-2); padding-bottom: var(--space-3); }
/* P1 · First look on the Calendar */
.card--hello .hello__title { margin: 0 0 var(--space-1); font-size: 20px; font-weight: var(--font-weight-medium); }
.card--hello .hello__text { margin: 0; color: var(--color-text-muted); }
.card--hello .hello__alt { margin: var(--space-2) 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Anything marked hidden stays hidden, whatever its display style (the cause of the discount-code link doing nothing, 25 Oct). */
[hidden] { display: none !important; }
.tour__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.tour__photo { margin: 0; background: var(--color-bg); border-radius: 12px; padding: var(--space-2); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tour__photo figcaption { font-size: var(--font-size-xs); color: var(--color-text-muted); }
/* Tour: "Make it yours" previews (painted by paintBrand with real themes) */
.looks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.look { background: var(--color-bg); color: var(--color-text); border-radius: 12px; padding: 10px; display: grid; gap: 8px; border: 1px solid var(--color-divider); }
.look__bar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); }
.look__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-champagne); }
.look__card { background: var(--color-surface); border-radius: 8px; padding: 8px; display: grid; gap: 5px; }
.look__line { height: 6px; border-radius: 3px; background: var(--color-divider); }
.look__line--short { width: 60%; }
.look__bar-fill { height: 6px; border-radius: 3px; width: 70%; background: var(--color-champagne); }
.look__btn { justify-self: start; pointer-events: none; }
.look__label { font-size: 11px; color: var(--color-text-muted); }
.tour__art--pro { padding-top: 44px; } /* room for the PRO badge */
.tour__part--pro { font-weight: var(--font-weight-medium); color: var(--color-text); }
.tour__photo-fig { display: flex; justify-content: center; }
/* Tour previews: the app's real components, smaller and not interactive */
.tour__screen { zoom: 0.82; pointer-events: none; display: grid; gap: var(--space-2); }
.tour__screen .card, .tour__screen .ex-card, .tour__screen .pcard { margin: 0; }
.rest-dock--inline { position: static; display: flex; transform: none; margin: var(--space-2) 0 0; max-width: none; padding: 0; border: 0; background: none; }
.rest-dock--inline .rest-dock__main { flex: 1; }

/* How to do it: set up, steps, key points, common mistakes (1,171-exercise library, 25 Oct 2026) */
.guide { display: grid; gap: var(--space-4); }
.guide--sheet { margin-top: var(--space-3); }
.guide__part { display: grid; gap: var(--space-2); }
.guide__part p { margin: 0; line-height: 1.5; }
.guide__head { margin: 0; font-size: var(--font-size-base); font-weight: 500; color: var(--color-text); }
.guide__steps { margin: 0; padding-left: calc(var(--space-3) + 6px); display: grid; gap: var(--space-2); line-height: 1.5; }
.guide__steps li::marker { color: var(--color-champagne); font-weight: 500; }
.guide__fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.guide__fixes li { display: grid; gap: 2px; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-md); line-height: 1.45; }
.guide__fixes span { color: var(--color-text-muted); }
dialog .guide__fixes li { background: var(--color-bg); }
.guide__note { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.45; }
.guide .cues__note { margin-top: 0 !important; }
.guide__fixes strong { font-weight: 500; }

/* Programming: programmes made of blocks (F124, 25 Oct 2026) */
.prog-block__n { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px; background: var(--color-bg); color: var(--color-champagne); font-size: var(--font-size-sm); }
.tag-pill--pro { border-color: var(--accent-mark); color: var(--color-champagne); }
.list__row.is-locked .list__title { color: var(--color-text-muted); }
.prog-step { margin: 0 0 var(--space-1); font-size: var(--font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.prog-dates { display: grid; gap: 2px; margin-top: var(--space-2); }
.prog-dates__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-sm); }
.prog-dates__row span:last-child { color: var(--color-text-muted); }
.tl__blocks { margin-top: var(--space-3); }

/* Your own exercise: details (26 Oct 2026) */
.pick-many .chips { margin-top: 0; margin-bottom: var(--space-1); }
.chip__x { color: var(--color-text-muted); padding-right: var(--space-2); }
.field__hint { display: block; margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.more-details summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--space-2) 0; }
.more-details[open] summary { color: var(--color-text); }
.bsel-group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
/* Workouts / Programming: My … | … templates (26 Oct 2026) */
.seg--sub { background: transparent; }
/* Workout and programme templates: preview sheet (F133, 26 Oct 2026; mockups/templates-rows.html) */
.tpl-meta { margin: 2px 0 var(--space-3); font-size: 13px; color: var(--color-text-muted); }
.tpl-note { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); }
.tpl-list { margin-top: var(--space-2); }
.tpl-ex { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--color-divider); font-size: var(--font-size-sm); }
.tpl-ex > span:last-child { flex: none; color: var(--color-text-muted); text-align: right; }
.tpl-ex--ss { padding-left: var(--space-3); }
.tpl-ss + .tpl-ex { border-top: 0; }
.tpl-ss { padding-top: 8px; border-top: 1px solid var(--color-divider); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-champagne); }
.tpl-block { padding: 9px 0; border-top: 1px solid var(--color-divider); font-size: var(--font-size-sm); }
.tpl-block__name { font-weight: var(--font-weight-medium); }
.tpl-adds { margin: 0; padding-top: 9px; border-top: 1px solid var(--color-divider); }
/* Template preview: blocks and workouts fold open with an arrow (26 Oct 2026) */
.tpl-group { margin: var(--space-3) 0 var(--space-1); font-size: var(--font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.tpl-fold { border-top: 1px solid var(--color-divider); font-size: var(--font-size-sm); }
.tpl-fold__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 6px 0; cursor: pointer; list-style: none; }
.tpl-fold__head::-webkit-details-marker { display: none; }
.tpl-fold__arrow { flex: none; display: inline-flex; color: var(--color-text-muted); transition: transform 0.2s ease; }
.tpl-fold__arrow svg { width: 18px; height: 18px; }
.tpl-fold[open] > .tpl-fold__head .tpl-fold__arrow { transform: rotate(180deg); }
.tpl-fold__body { padding: 0 0 var(--space-2); }
.tpl-fold__note { margin: 0 0 var(--space-2); }
.tpl-day { display: flex; gap: var(--space-3); padding: 5px 0; }
.tpl-day__name { flex: none; width: 36px; color: var(--color-text-muted); }
.tpl-fold__body .tpl-list { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .tpl-fold__arrow { transition: none; } }

/* Date of birth: type it or pick from a calendar (F138, 26 Oct 2026). Selected day in the brand's button colours. */
.dob__row { display: flex; align-items: center; gap: var(--space-2); }
.dob__part { width: 4.2em; text-align: center; }
.dob__part--y { width: 5.6em; }
.dob__sep { color: var(--color-text-muted); }
.dob__cal { flex: none; width: 46px; height: 46px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-input-bg); color: var(--color-text); }
.calp__label { margin: 0 0 var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.calp__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.calp__title { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--color-text); font: inherit; font-size: 1.125rem; font-weight: var(--font-weight-medium); padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.calp__yr { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); }
.calp__caret svg { width: 16px; height: 16px; }
.calp__nav--prev svg { transform: rotate(180deg); }
.calp__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.calp__wd { font-size: var(--font-size-xs); color: var(--color-text-muted); padding: 4px 0; }
.calp__day { aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: none; color: var(--color-text); font: inherit; cursor: pointer; }
.calp__day:hover:not(:disabled) { background: var(--color-divider); }
.calp__day:disabled { color: var(--color-text-muted); opacity: 0.45; cursor: default; }
.calp__day.is-sel, .calp__year.is-sel { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.calp__years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); max-height: 300px; overflow-y: auto; }
.calp__year { min-height: 44px; border: 0; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; cursor: pointer; }

/* Tour cards, round 2 (F140, 26 Oct 2026; mockups/p1-round2.html) */
.tour-good { color: var(--color-success); font-weight: var(--font-weight-medium); }
.tour-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.tour-pgrid .pcard__body { display: grid; gap: var(--space-2); }
.tour-pgrid .pcard { background: var(--color-bg); }
.tnext { display: grid; gap: 6px; }
.tnext__ex { font-weight: var(--font-weight-medium); font-size: 1.05rem; }
.tnext__goal { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: 4px; }
.tnext__row { display: grid; grid-template-columns: 22px 1fr 1fr; gap: 6px; align-items: center; font-size: var(--font-size-sm); }
.tnext__row--head { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.tnext__n { color: var(--color-text-muted); text-align: center; }
.tnext__cell { background: var(--color-bg); border-radius: 8px; padding: 7px 9px; }
.tnext__cell small { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.tnext__cell--today { background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: var(--font-weight-medium); }
.tnext__why { margin-top: 4px; font-size: var(--font-size-sm); color: var(--color-success); background: var(--color-bg); border-radius: 8px; padding: 8px 10px; line-height: 1.4; }
.tproof { display: grid; gap: var(--space-2); }
.tproof__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tproof__chip { font-size: var(--font-size-xs); padding: 3px 9px; border-radius: 10px; background: var(--color-bg); color: var(--color-text-muted); }
.tproof__chip.is-on { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.tproof__big { font-size: 1.7rem; font-weight: var(--font-weight-medium); line-height: 1.1; }
.tproof__big small { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: 400; }
.tproof__chart svg { display: block; width: 100%; height: 90px; }
.tproof__line { fill: none; stroke: var(--color-text); stroke-width: 2.5; }
.tproof__area { fill: var(--color-text); opacity: 0.06; }
.tproof__dot { fill: var(--color-success); }
.tproof__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tproof__stats div { background: var(--color-bg); border-radius: 10px; padding: 7px 8px; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.tproof__stats b { display: block; font-size: 1rem; color: var(--color-success); font-weight: var(--font-weight-medium); }
.tcal { display: grid; gap: var(--space-2); }
.tcal__seg .seg__btn { font-size: var(--font-size-xs); }
.tmeas { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.tmeas th { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-medium); text-align: right; padding: 4px; }
.tmeas th:first-child, .tmeas td:first-child { text-align: left; }
.tmeas td { padding: 7px 4px; border-top: 1px solid var(--color-divider); text-align: right; }
.ttpls { display: grid; gap: 6px; }
.ttpls__label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ttpl { background: var(--color-bg); border-radius: 10px; padding: 8px 11px; display: grid; gap: 1px; font-size: var(--font-size-sm); }
.ttpl b { font-weight: var(--font-weight-medium); }
.ttpl span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ttpl--own { background: transparent; border: 1px dashed var(--color-border-strong); text-align: center; color: var(--color-text-muted); }

/* Get started (P2, F143/F146): one card across the page, first week only */
.gs-card { margin-top: var(--space-4); }
.gs-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.gs-card__title { margin: 0; font-size: 20px; font-weight: var(--font-weight-medium); }
.gs-card__sub { margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.gs-first { margin-bottom: var(--space-2); }
.gs-first__alt { margin: var(--space-2) 0 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.gs-list { background: transparent; }
.gs-row.is-done { pointer-events: none; }
@media (min-width: 720px) { .gs-first { display: flex; align-items: center; gap: var(--space-4); } .gs-first .btn { width: auto; flex: none; padding: 0 var(--space-5); } .gs-first__alt { margin: 0; text-align: left; } }
/* Add to the calendar › Resistance: or start from a template (P2, F145) */
.tpl-offer { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3); }
.tpl-offer__title { margin: 0 0 4px; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.tpl-offer__links { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.tpl-offer__list { margin-top: var(--space-2); max-height: 260px; overflow-y: auto; }
.tpl-offer__row { padding-left: 0; padding-right: 0; }
.tpl-offer__never { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.week-empty { margin: 4px 0 0; }
/* Exercise picker filters (P2, 26 Oct) */
.pick-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.pick-filter { min-width: 0; font-size: var(--font-size-sm); }

/* Month view (P2, 26 Oct): compact on phones; on wider screens each day lists what's on it (Trainerize-style) */
.mday { min-height: 52px; }
.mday__items { display: none; }
@media (min-width: 720px) {
  .month__body .mday { min-height: 104px; align-items: stretch; padding: 6px 6px 8px; }
  .month__body .mday__num { align-self: flex-end; font-size: var(--font-size-sm); }
  .month__body .mday__today { align-self: flex-end; }
  .month__body .mday__marks { display: none; }
  .mday__items { display: grid; gap: 3px; margin-top: 4px; min-width: 0; }
  .mitem { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--font-size-xs); line-height: 1.25; text-align: left; color: var(--color-text); }
  .mitem .dot { flex: none; }
  .mitem__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mitem--rest, .mitem--skipped { color: var(--color-text-muted); }
  .mitem--more { color: var(--color-text-muted); padding-left: 13px; }
}

/* Month view, tighter (F166, Matt 27 Oct; mockups/calendar-month-2.html) */
.dot { width: 8px; height: 8px; }
.dot--missed { position: relative; box-shadow: inset 0 0 0 1.5px var(--color-text-muted); }
.dot--missed::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -0.75px 0 0 -4.5px; background: var(--color-text-muted); transform: rotate(-45deg); }
.dot-more { font-size: 10px; line-height: 8px; color: var(--color-text-muted); }
.kind-icon--missed { color: var(--color-text-muted); }
.mday { min-height: 46px; }
.mday__ci { display: block; width: 14px; height: 2px; border-radius: 1px; margin: 2px auto 0; background: var(--color-success); opacity: 0.8; }
.mday__ci--key { display: inline-block; width: 10px; margin: 0; vertical-align: middle; }
.month-sum { text-align: left; margin: var(--space-2) 2px 0; }
.month-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-1) 2px 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.month-key span { display: inline-flex; align-items: center; gap: 5px; }
.month-key--list { flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); }
.month-panel { margin-top: var(--space-4); }
.month-wide { display: none; }
.month-side__title { margin: 0 0 var(--space-2); font-size: var(--font-size-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.month-sumcard__row { display: flex; justify-content: space-between; padding: 3px 0; font-size: var(--font-size-sm); }
.month-sumcard__row strong { font-weight: var(--font-weight-medium); }
@media (min-width: 720px) {
  .month__body .mday { min-height: 84px; padding: 4px 6px 6px; }
  .month__body .mday__ci { display: none; }
  .mitem--ci { color: var(--color-text-muted); padding-left: 0; }
}
@media (min-width: 1100px) {
  .month-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
  .month-narrow { display: none; }
  .month-wide { display: block; }
  .month-layout__side { display: flex; flex-direction: column; gap: var(--space-3); position: sticky; top: var(--space-3); }
  .month-layout__side .month-panel { margin-top: 0; }
  .month-side__card { padding: var(--space-3) var(--space-4); }
}

/* Check-ins (F150, 26 Oct 2026; mockups/checkins.html) */
.ck-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ck-day { min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-input-bg); color: var(--color-text); font: inherit; cursor: pointer; }
.ck-day[aria-pressed="true"] { background: var(--btn-primary-bg); border-color: transparent; color: var(--btn-primary-text); }
.ck-day:disabled { cursor: default; opacity: 0.7; }
.ck-row { gap: var(--space-2); }
.ck-row.is-off .list__title { color: var(--color-text-muted); }
.ck-row__move { display: inline-flex; flex: none; }
.ck-row__main { flex: 1; min-width: 0; text-align: left; }
.linklike-row { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 2px; }
.ck-row__toggle { flex: none; margin-left: auto; }
.ck-pro { margin-left: var(--space-2); }
.ck-status { min-height: 1.2em; margin-top: var(--space-2); }
.wk-row { padding-left: 0; padding-right: 0; justify-content: flex-start; gap: var(--space-3); }
.wk-row--static { cursor: default; }
.trk-q { justify-content: space-between; }
/* Check-ins round 2 (26 Oct) */
.ck-all, .ck-include { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--font-size-sm); cursor: pointer; }
.ck-all input, .ck-include input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--btn-primary-bg); }
.ck-include { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-3); }
.ck-include__title { display: block; font-size: var(--font-size-base); }
.ck-include__hint { display: block; color: var(--color-text-muted); }
.ck-none { text-align: center; }
.ck-types { margin-top: var(--space-1); }
.ck-type { justify-content: space-between; }
.ck-type[aria-checked="true"] .list__main { font-weight: var(--font-weight-medium); }
.ck-type__tick svg { width: 16px; height: 16px; }
.ck-note { margin-top: var(--space-3); }
.trk-part { display: flex; justify-content: space-between; margin: var(--space-4) calc(-1 * var(--space-4)) var(--space-1); padding: var(--space-3) var(--space-4) 0; border-top: 1px solid var(--color-divider); font-size: var(--font-size-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.trk-none { margin: var(--space-2) 0 var(--space-3); color: var(--color-text-muted); }
.trk-none strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.rate--10 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rate--wrap { flex-wrap: wrap; }
.settings-gopro { flex: none; pointer-events: none; }

/* Audit B2: Pro-only ranges on Personal Free (faded, like the Pro lock) */
.seg__btn--pro { opacity: 0.45; }
/* Audit B4: the gentle "Running a gym or team?" link under the estimator */
.est-team { display: block; margin-top: var(--space-2); }

/* Audit 27 Oct (DESIGN_RULES 11.2; Apple's minimum): every control answers a 44px tap, while looking exactly the same.
   An invisible area is added around small controls. */
.btn--sm, .info-btn, .est-info, .swap-btn, .week-nav__today, .chip, .title-chip, .wd-pick__btn, .switcher, .swatch, .rate__btn, .ex__foot .btn, .icon-btn, .ck-row__main.is-tappable { position: relative; }
.btn--sm::before, .info-btn::before, .est-info::before, .swap-btn::before, .week-nav__today::before, .chip::before, .title-chip::before, .wd-pick__btn::before, .switcher::before, .swatch::before, .rate__btn::before, .ex__foot .btn::before, .icon-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
.ck-row__main.is-tappable { cursor: pointer; }

/* Calories and macros worked out (Pro; Matt, 28 Oct 2026; mockups/calories-worked-out.html) */
.wo-dots { margin-top: var(--space-3); }
.wo-lab { margin: var(--space-5) 0 var(--space-2); font-size: var(--font-size-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.wo-opt { display: flex; gap: var(--space-3); align-items: flex-start; width: 100%; min-height: var(--control-h); margin: 0 0 var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.wo-opt.is-on { border-color: var(--accent-mark); box-shadow: 0 0 0 1px var(--accent-mark); }
.wo-opt__dot { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); }
.wo-opt.is-on .wo-opt__dot { border: 5px solid var(--accent-mark); }
.wo-opt__main { display: flex; flex-direction: column; }
.wo-opt__title { font-weight: var(--font-weight-medium); }
.wo-opt__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.wo-src { display: inline-flex; align-items: center; min-height: 28px; margin-left: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--color-border); border-radius: 14px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-xs); cursor: pointer; white-space: nowrap; position: relative; }
.wo-src::after { content: ""; position: absolute; inset: -8px -2px; } /* 44px tap area */
.wo-src__head { margin: var(--space-4) 0 var(--space-1); font-weight: var(--font-weight-medium); }
.wo-src__list { margin: 0; padding-left: var(--space-4); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.wo-src__list li { margin-bottom: var(--space-2); }
.wo-card { margin-top: var(--space-3); }
.wo-card .card__title { margin: 0 0 var(--space-1); }
.wo-big { margin: var(--space-1) 0; font-size: 34px; line-height: 1.1; font-weight: var(--font-weight-medium); }
.wo-big span { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.wo-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--space-3); padding: 0; text-align: center; }
.wo-grid__cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) var(--space-1); border-left: 1px solid var(--color-divider); }
.wo-grid__cell:first-child { border-left: 0; }
.wo-grid__cell b { font-size: 19px; font-weight: var(--font-weight-medium); }
.wo-grid__cell span { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.wo-grid__cell .wo-src { margin: var(--space-1) 0 0; }
.wo-warn { margin-top: var(--space-3); }
.wo-advice { margin: var(--space-3) 0 0; padding: var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-md); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.wo-math { width: 100%; border-collapse: collapse; margin-top: var(--space-2); font-size: var(--font-size-sm); }
.wo-math td { padding: var(--space-1) 0; vertical-align: top; }
.wo-math td:last-child { text-align: right; padding-left: var(--space-3); white-space: nowrap; font-weight: var(--font-weight-medium); }
.wo-math__tot td { border-top: 1px solid var(--color-divider); padding-top: var(--space-2); }
.backlink--btn { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }
.wo-select { width: auto; min-width: 120px; }

/* Next-session targets (Pro; Matt, 28 Oct 2026; mockups/next-session-targets.html) */
.nx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-divider); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text); background: transparent; font-family: inherit; text-align: left; width: 100%; }
.nx__last { color: var(--color-text-muted); }
.nx__today { font-weight: var(--font-weight-medium); }
.nx__tools { display: inline-flex; gap: var(--space-1); margin-left: auto; }
.nx__tools .wo-src { margin-left: 0; }
.nx--locked { opacity: 0.55; cursor: pointer; min-height: var(--control-h); }
.nx-ss { display: flex; align-items: center; gap: var(--space-2); }
.nx-ss .nx { margin: var(--space-1) 0; }
.bx__focus { margin-top: var(--space-2); max-width: 320px; }

/* Progress over any dates (Pro; 28 Oct 2026, F188) */
.prange__line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--font-size-sm); }
.prange__line b { font-weight: var(--font-weight-medium); }

/* HQ › Plans & features (28 Oct 2026, F190) */
.pf-card { padding: 0; overflow: hidden; }
.pf-row { display: grid; grid-template-columns: 1fr 92px 92px; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); min-height: var(--control-h); }
.pf-row:first-child { border-top: 0; }
.pf-row--one { grid-template-columns: 1fr 120px; }
.pf-head { min-height: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); font-size: var(--font-size-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.pf-main { display: flex; flex-direction: column; min-width: 0; }
.pf-cell { display: flex; justify-content: center; }
.pf-select { width: 100%; min-width: 0; font-size: var(--font-size-sm); padding-left: var(--space-2); padding-right: var(--space-2); }
.pf-num { width: 64px; text-align: center; }
.pf-always { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.pf-toggle { margin: 0; }

/* Personal plan step and the Go Pro pay screen (28 Oct 2026, F191) */
.plan-opt .btn { margin-top: var(--space-3); }
.pro-pay__title { margin: var(--space-2) 0 0; font-size: var(--font-size-heading); font-weight: var(--font-weight-medium); }
.pay-opt { align-items: center; }
.pay-tag { margin-left: auto; flex: none; font-size: var(--font-size-xs); border: 1px solid var(--color-success); color: var(--color-success); border-radius: 10px; padding: 1px var(--space-2); }
.pay-sum { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pay-sum strong { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* Progress charts, cleaner and easier to read (Matt, 28 Oct 2026, F192; mockups/progress-charts.html). Later rules win. */
.pcard__chart { margin-top: var(--space-2); }
.pchart--card { height: auto; }
.pchart__label { fill: var(--color-text-muted); font-size: 10.5px; font-family: var(--font-family); }
.pchart__val { fill: var(--color-text); font-size: 11px; font-weight: var(--font-weight-medium); font-family: var(--font-family); }
.pchart__line { fill: none; stroke: var(--accent-mark); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pchart__area { fill: var(--accent-mark); }
.pchart__pt { fill: var(--color-surface); stroke: var(--accent-mark); stroke-width: 1.75; }
.pchart__now { fill: var(--accent-mark); }
.pchart__dot { fill: var(--color-text-muted); opacity: 0.45; }
.pchart__goal { stroke: var(--color-success); stroke-width: 1.5; stroke-dasharray: 4 4; }
.pchart__goal-label { fill: var(--color-success); font-size: 10.5px; font-weight: var(--font-weight-medium); font-family: var(--font-family); }
.pchart__cursor { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 1; }
.pchart__ring { fill: none; stroke: var(--accent-mark); stroke-width: 2; }
.pchart__tipbox { fill: var(--color-text); stroke: none; }
.pchart__tip { fill: var(--color-bg); font-size: 11.5px; font-weight: var(--font-weight-medium); font-family: var(--font-family); }
.pchart__tip2 { fill: var(--color-bg); font-size: 10px; font-family: var(--font-family); opacity: 0.85; }
.pchart__bar { fill: var(--color-border-strong); opacity: 0.55; }
.pchart__bar--now { fill: var(--accent-mark); opacity: 1; }
.pchart__plan { fill: none; stroke: var(--color-border-strong); stroke-width: 1.2; stroke-dasharray: 3 3; }
.pchart-wrap, .pcard__chart { touch-action: pan-y; }
.wbars__n { position: absolute; left: 0; right: 0; text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.wbars__dates { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.vbar { overflow: visible; background: var(--color-divider); }
.vbar__range { top: -3px; bottom: -3px; border-radius: 4px; background: var(--success-fill); }
.vbar__val { top: 0; bottom: 0; border-radius: 6px; }


/* ---------- Pair 3: one look for sign-up, sign-in and set-up (Matt, 28 Oct 2026, F194; mockups/pair3-one-look-3.html) ----------
   One frame before the app: the real logo, a warm glow at the top, a faint Abode mark behind, 24px side margins,
   16px between fields, 48px boxes, 52px buttons at the bottom, one progress header. Later rules win. */
.ob-body, body.page--ob { background: radial-gradient(120% 420px at 50% -60px, var(--ob-glow), transparent 70%) no-repeat, var(--color-bg); min-height: 100vh; }
.ob-watermark { position: fixed; right: -80px; bottom: -40px; width: 340px; height: auto; transform: rotate(-8deg); opacity: var(--ob-mark); pointer-events: none; z-index: 0; }
.ob-watermark .brand-fill { fill: var(--color-champagne); }
.login.ob { position: relative; z-index: 1; max-width: 420px; justify-content: flex-start; padding: var(--space-6) var(--space-6) var(--space-6); }
.login.ob .brand-lockup { width: 104px; margin: var(--space-4) auto var(--space-6); }
.login.ob .brand-lockup--wide { width: auto; height: 18px; margin: var(--space-2) auto var(--space-4); }
.login.ob .trainer-lockup { margin-top: var(--space-4); }
.login.ob .login__card { background: transparent; padding: 0; flex: 1; display: flex; flex-direction: column; border-radius: 0; }
.login.ob .invite__title { font-size: 30px; line-height: 36px; font-weight: var(--font-weight-medium); letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.login.ob .page-note { font-size: 15px; line-height: 22px; margin: 0 0 var(--space-6); }
.login.ob .field { margin-top: 0 !important; margin-bottom: var(--space-4); }
.login.ob .field__label { margin-bottom: var(--space-2); font-size: 12.5px; line-height: 16px; }
.login.ob .input { min-height: 48px; border-radius: 12px; padding: 0 var(--space-4); font-size: var(--font-size-input); }
.login.ob .name-row { gap: var(--space-3); margin-top: 0 !important; }
.login.ob .btn { min-height: 52px; border-radius: 14px; font-size: 16px; }
.login.ob .btn--primary { margin-top: var(--space-4); }
.login.ob .btn--quiet { min-height: 44px; }
.login.ob .login__hint { margin: calc(-1 * var(--space-2)) 0 var(--space-4) !important; }
.login.ob .notice { margin: 0 0 var(--space-4); }
.ob-fill { flex: 1; min-height: var(--space-6); }
/* Bigger screens: no stretched gap; the column sits in the middle (Matt, 28 Oct: "a massive gap to sign in"). */
@media (min-width: 600px) { .login.ob { justify-content: center; } .login.ob .login__card { flex: none; } .ob-fill { flex: none; } }
.ob-center { text-align: center; }
.ob-eyebrow { font-size: 11px; line-height: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-champagne); margin: 0 0 var(--space-2); }
.ob-eyebrow a { color: inherit; text-underline-offset: 3px; }
.ob-forgot { display: flex; justify-content: flex-end; margin: calc(-1 * var(--space-1)) 0 0; font-size: var(--font-size-sm); }
.ob-forgot a { color: var(--color-champagne); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ob-foot { text-align: center; font-size: var(--font-size-sm); line-height: 20px; color: var(--color-text-muted); margin: var(--space-4) 0 0; }
.ob-foot + .ob-foot { margin-top: var(--space-2); }
.ob-foot a { color: var(--color-text); text-underline-offset: 3px; display: inline-block; min-height: 32px; padding: 6px 0; }
.ob-progress { margin: 0 0 var(--space-6); }
.ob-progress__lbl { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.ob-progress__lbl b { color: var(--color-text); font-weight: var(--font-weight-medium); }
.ob-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ob-bars i { height: 4px; border-radius: 2px; background: var(--color-border); }
.ob-bars i.on { background: linear-gradient(90deg, var(--color-gold), var(--color-champagne)); }
.ob-choices { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.ob-choice { display: grid; grid-template-columns: 48px 1fr 16px; gap: var(--space-4); align-items: center; min-height: 88px; padding: 0 var(--space-4); border-radius: 18px;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.ob-choice:hover { border-color: var(--accent-mark); }
.ob-choice__icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-champagne); }
.ob-choice__icon svg { width: 24px; height: 24px; }
.ob-choice__text strong { display: block; font-weight: var(--font-weight-medium); font-size: 16px; line-height: 22px; }
.ob-choice__text span { display: block; color: var(--color-text-muted); font-size: 13px; line-height: 18px; margin-top: 2px; }
.ob-choice__chev { color: var(--color-text-muted); display: flex; } .ob-choice__chev svg { width: 16px; height: 16px; }
.ob-icon { width: 96px; height: 96px; margin: var(--space-6) auto var(--space-6); border-radius: 28px; display: flex; align-items: center; justify-content: center; color: var(--color-champagne);
  background: radial-gradient(circle at 50% 30%, var(--ob-glow), transparent 75%); border: 1px solid var(--color-border-strong); }
.ob-icon svg { width: 44px; height: 44px; }
.login.ob .consent { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: center; min-height: 44px; margin: 0 !important; font-size: 13.5px; line-height: 19px; cursor: pointer; }
.login.ob .consent input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 1.5px solid var(--color-border-strong); background: transparent; display: grid; place-content: center; cursor: pointer; }
.login.ob .consent input:checked { background: var(--color-champagne); border-color: var(--color-champagne); }
.login.ob .consent input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--color-bg); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* The set-up wizard in the app: the same frame (no top bar during set-up, no account switcher) */
body.page--ob .topbar { display: none; }
body.page--ob #app { padding-top: 0; }
.wiz.ob-wiz { max-width: 420px; padding: var(--space-6) var(--space-6) var(--space-6); min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.ob-top { height: 40px; display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: var(--space-4); }
.ob-top .brand__lockup { height: 18px; width: auto; }
.ob-back { position: absolute; left: -10px; top: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--color-text); cursor: pointer; }
.ob-back svg { width: 22px; height: 22px; }
.ob-wiz h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.01em; margin: 0 0 var(--space-2) !important; }
.ob-wiz .page-sub { font-size: 15px; line-height: 22px; margin: 0 0 var(--space-6); }
.ob-wiz .field { margin-top: 0; margin-bottom: var(--space-4); }
.ob-wiz .input { min-height: 48px; border-radius: 12px; }
.ob-wiz .wiz-actions { margin-top: auto; padding-top: var(--space-6); gap: var(--space-3); }
.ob-wiz .wiz-actions .btn { min-height: 52px; border-radius: 14px; font-size: 16px; }
.ob-wiz .wiz-actions .btn--quiet { min-height: 44px; }
.ob-reassure { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: 16px; background: var(--success-fill); border: 1px solid var(--color-success); font-size: 13.5px; line-height: 19px; color: var(--color-text-muted); }
.ob-reassure b { display: block; font-weight: var(--font-weight-medium); font-size: 15px; line-height: 20px; color: var(--color-text); }
.ob-reassure__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--success-progress); color: var(--color-success); }
.ob-reassure__icon svg { width: 20px; height: 20px; }
.ob-reassure .linklike { color: var(--color-text); }
.ob-swatches { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.ob-swatches .swatch { width: 40px; height: 40px; }
.ob-preview { margin-top: var(--space-2); }
.ob-logo { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); align-items: center; }
.login.ob .invite__title { margin-bottom: var(--space-6); }
.login.ob .invite__title + .page-note { margin-top: calc(-1 * var(--space-4)); }
.ob-wiz h1 { margin-bottom: var(--space-6) !important; }
.ob-wiz h1 + .page-sub { margin-top: calc(-1 * var(--space-4)); }
.login.ob .input, .ob-wiz .input { background: var(--color-surface); }
.ob-logo { grid-template-columns: 64px 1fr; gap: var(--space-4); }
.ob-logo .page-note { margin: var(--space-1) 0 0; }
.ob-swatches .swatch { box-shadow: none; outline: none; border: 0; }
.ob-swatches .swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text); }

/* HQ › one person's extras (Matt, 28 Oct 2026; mockups/account-features.html) */
.tag-pill--extra { margin-left: var(--space-2); border-color: var(--color-champagne); color: var(--color-champagne); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; vertical-align: 1px; }
.list__value { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; margin-left: var(--space-2); }

/* Pair 4 (Matt, 28 Oct; mockups/pair4-endings-tour.html): one Get started card, a calm waiting card */
.gs-bars { margin: 0 0 var(--space-2); }
.gs-row--alt { padding-left: calc(24px + var(--space-3)); min-height: 44px; }
.gs-row--alt .list__title { color: var(--color-champagne); font-size: var(--font-size-sm); }
.gs-stack > .card + .card { margin-top: var(--space-3); }
.gs-wait { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); }
.gs-wait__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--color-champagne); color: var(--color-champagne); display: inline-flex; align-items: center; justify-content: center; }
.gs-wait__icon svg { width: 18px; height: 18px; }
.gs-wait__cancel { margin-top: var(--space-2); min-height: 44px; color: var(--color-text-muted); }
/* Tour (Pair 4): set-up bars and "n of N", a picture that's always the same height, buttons pinned at the bottom */
.tour__count { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.tour__skip { min-height: 44px; }
.tour__bars { margin: var(--space-1) 0 0; }
.tour__art { height: 320px; min-height: 0; overflow: hidden; align-content: center; padding-top: var(--space-4); }
.tour__title { font-size: 30px; line-height: 36px; font-weight: var(--font-weight-medium); letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.tour__text { font-size: 15px; line-height: 22px; }
.tour__actions { padding-top: var(--space-4); }
.tour__actions--split { grid-template-columns: 1fr 1fr; }
.tour__actions--split .btn--quiet { order: -1; }
.tour__actions--split > :only-child { grid-column: 1 / -1; }
.empty--clients { text-align: center; padding: var(--space-6) var(--space-4) var(--space-2); }
.empty__icon { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--color-border); color: var(--color-champagne); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.empty__icon svg { width: 24px; height: 24px; }
.empty__title { color: var(--color-text); font-size: 19px; font-weight: var(--font-weight-medium); margin: 0 0 var(--space-1); }
.gs-card .gs-list .list__row { padding-left: 0; padding-right: 0; }
.gs-card .gs-list .gs-row--alt { padding-left: calc(24px + var(--space-3)); }
.card.gs-wait { flex-direction: row; }