/* ==========================================================================
   Lifting Tracker
   Palette: a validated data-viz palette. Light values live on :root; the dark
   values are declared twice — once under prefers-color-scheme for the OS
   setting, once under [data-theme="dark"] so the in-app toggle wins both ways.
   ========================================================================== */

:root {
  color-scheme: light;

  --plane:          #f9f9f7;   /* page behind the cards */
  --surface-1:      #fcfcfb;   /* card / chart surface  */
  --surface-2:      #f2f1ed;   /* inset controls        */
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --muted:          #898781;
  --grid:           #e1e0d9;
  --axis:           #c3c2b7;
  --border:         rgba(11, 11, 11, 0.10);
  --border-strong:  rgba(11, 11, 11, 0.18);

  --series-1:       #2a78d6;   /* the one data hue */
  --series-1-deep:  #256abf;
  --series-wash:    rgba(42, 120, 214, 0.10);
  --pop-2:          #7c4ddb;   /* the accent's gradient partner, Bold style only */
  --on-accent:      #fff;

  --good:      #0ca30c;  --good-ink: #006300;  --good-tint: rgba(12, 163, 12, 0.20);
  --warning:   #fab219;  --warn-ink: #8a5c00;  --warn-tint: rgba(250, 178, 25, 0.34);
  --critical:  #d03b3b;  --crit-ink: #b52e2e;  --crit-tint: rgba(208, 59, 59, 0.17);
  --neutral-ink: #52514e; --neutral-tint: rgba(11, 11, 11, 0.055);

  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 1px 10px rgba(11, 11, 11, 0.03);
  --radius: 14px;
  --radius-sm: 10px;
  --tap: 44px;

  /* Identity only — a lift's dot. Never the sole carrier of meaning.
     That constraint is not a preference, it is forced: eight categorical hues
     cannot be told apart pairwise under deuteranopia. Measured with the
     dataviz palette validator, the worst pair here is #d03b6b vs #1f9e6e at
     deutan dE 2.6, and an evenly spaced eight-hue wheel does no better — the
     best reachable is 2.6, against a target of 8. Only four hues clear it.
     accentIndex() hashes the exercise id, so any two of these can end up side
     by side; anything showing a dot must therefore show the lift's name with
     it. Two slots are also weak on their own terms and worth re-stepping if
     the set is ever revisited: --accent-5 sits under 3:1 on the light surface,
     and --accent-7 is close enough to grey to fail the chroma floor. */
  --accent-0: #2a78d6;  --accent-1: #d4622a;  --accent-2: #1f9e6e;  --accent-3: #9457c9;
  --accent-4: #d03b6b;  --accent-5: #c79a12;  --accent-6: #2f9fbd;  --accent-7: #7a879a;

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- type ------------------------------------------------------------
     Twenty-five hard-coded sizes collapsed onto nine steps plus two display
     sizes. In rem, not px, so the browser's own text-size setting moves them
     — the smallest UI text used to be a fixed 9.5px, which no setting could
     reach. Only the display sizes are fluid: at UI sizes a viewport-dependent
     step buys nothing and costs predictability. */
  --text-3xs:  0.625rem;   /* 10    glyphs, grid corner */
  --text-2xs:  0.719rem;   /* 11.5  axis ticks, chip labels */
  --text-xs:   0.781rem;   /* 12.5  meta, captions */
  --text-sm:   0.844rem;   /* 13.5  secondary body */
  --text-md:   0.906rem;   /* 14.5  body */
  --text-base: 1rem;       /* 16    */
  --text-lg:   1.063rem;   /* 17    card titles */
  --text-xl:   1.219rem;   /* 19.5  */
  --text-2xl:  1.375rem;   /* 22    */
  --text-3xl:  1.563rem;   /* 25    */
  --text-4xl:  1.75rem;    /* 28    */
  --text-5xl:  1.875rem;   /* 30    */
  /* The two hero numbers. Fluid so the 900px override that used to jump them
     from 52px to 60px is no longer needed: 50px on a phone, 60px on a laptop,
     and every width in between rather than a step. */
  --display:   clamp(2.875rem, 2.647rem + 1.96vw, 3.75rem);

  /* Four weights. system-ui is variable on Apple platforms, so 550/650/680
     were rendering as real intermediate weights rather than rounding — these
     are a deliberate choice, not a tidy-up. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---- space -----------------------------------------------------------
     Chosen so the values already used most often land on a step exactly:
     8px (x25), 10px (x20), 2px (x18), 6px (x17) and 12px (x11) are unchanged. */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 18px;
  --space-8: 24px;

  --radius-xs: 6px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- motion ----------------------------------------------------------
     One place to tune the feel. Everything here is still subject to the
     prefers-reduced-motion kill switch further down. */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:          #0d0d0d;
    --surface-1:      #1a1a19;
    --surface-2:      #232322;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --muted:          #898781;
    --grid:           #2c2c2a;
    --axis:           #383835;
    --border:         rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.20);

    --series-1:       #3987e5;
    --series-1-deep:  #86b6ef;
    --series-wash:    rgba(57, 135, 229, 0.14);
    --pop-2:          #9b74ef;

    --good: #0ca30c;   --good-ink: #0ca30c;   --good-tint: rgba(12, 163, 12, 0.24);
    --warning: #fab219; --warn-ink: #fab219;  --warn-tint: rgba(250, 178, 25, 0.20);
    --critical: #d03b3b; --crit-ink: #e66767; --crit-tint: rgba(230, 103, 103, 0.22);
    --neutral-ink: #c3c2b7; --neutral-tint: rgba(255, 255, 255, 0.06);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:          #0d0d0d;
  --surface-1:      #1a1a19;
  --surface-2:      #232322;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --muted:          #898781;
  --grid:           #2c2c2a;
  --axis:           #383835;
  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.20);

  --series-1:       #3987e5;
  --series-1-deep:  #86b6ef;
  --series-wash:    rgba(57, 135, 229, 0.14);
  --pop-2:          #9b74ef;

  --good: #0ca30c;   --good-ink: #0ca30c;   --good-tint: rgba(12, 163, 12, 0.24);
  --warning: #fab219; --warn-ink: #fab219;  --warn-tint: rgba(250, 178, 25, 0.20);
  --critical: #d03b3b; --crit-ink: #e66767; --crit-tint: rgba(230, 103, 103, 0.22);
  --neutral-ink: #c3c2b7; --neutral-tint: rgba(255, 255, 255, 0.06);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Room for the tab bar, plus the rest timer when it is up, so the last card
     never hides behind either. */
  padding: 0 0 calc(74px + var(--dock-h, 0px) + env(safe-area-inset-bottom));
  background: var(--plane);
  color: var(--text-primary);
  font: var(--text-base)/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

body.has-sheet { overflow: hidden; }

main {
  max-width: 560px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 14px 8px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

h1, h2, h3 { margin: 0; font-weight: var(--fw-semi); letter-spacing: -0.01em; }
p { margin: 0; }

button { font: inherit; color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface-1); color: var(--text-primary);
  padding: var(--space-4) var(--space-6); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }

/* ------------------------------------------------------------- view head */

.view { display: flex; flex-direction: column; gap: var(--space-6); }

.view-head h1 { font-size: var(--text-4xl); line-height: 1.15; }
.view-sub {
  margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45;
  max-width: 46ch;
}

.section-title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: var(--fw-semi); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }

/* ----------------------------------------------------------------- cards */

.card-list { display: flex; flex-direction: column; gap: var(--space-4); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card.is-open { border-color: var(--border-strong); }

.card-head {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-5) var(--space-6); background: none; border: 0; text-align: left;
  min-height: var(--tap); cursor: pointer;
}
.card-head.static { cursor: default; }
.card-head-main { flex: 1; min-width: 0; }
.card-title { font-size: var(--text-lg); }
.card-meta { margin-top: var(--space-0); color: var(--text-secondary); font-size: var(--text-xs); }
.card-chevron {
  flex: none; width: 20px; height: 20px; color: var(--muted);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.18s ease, color 0.18s ease;
}
.card.is-open > .card-head .card-chevron { transform: rotate(180deg); color: var(--text-primary); }
.card-chevron.is-right { transform: rotate(-90deg); }
.card-body { padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.card-note { color: var(--text-secondary); font-size: var(--text-sm); }
/* For cards whose content is not wrapped in .card-body — settings panels and
   the like — so nothing sits flush against the card edge. */
.card-pad { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.card-detail { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.card-actions { display: flex; gap: var(--space-3); }
.card-actions-end { justify-content: flex-end; flex-wrap: wrap; }
.card-actions .btn { flex: 1; }
.card-actions-end .btn { flex: none; }

/* ---------------------------------------------------------- prescription */

.presc { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.presc-hero { display: flex; align-items: baseline; gap: var(--space-2); }
.presc-scheme { font-size: var(--text-xl); font-weight: var(--fw-semi); color: var(--text-secondary); }
.presc-at { color: var(--muted); font-size: var(--text-md); }
.presc-weight { font-size: var(--text-5xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.presc-weight small { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-secondary); }

/* One hero figure per view: the open card's weight. */
.presc-hero .presc-weight { font-size: var(--display); line-height: 1; }
.presc-hero .presc-weight small { font-size: var(--text-xl); }
.presc-hero .presc-scheme { font-size: var(--text-3xl); }

.presc-side { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.presc-delta { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.presc-delta.is-good { color: var(--good-ink); }
.presc-explain { color: var(--text-secondary); font-size: var(--text-sm); }

.presc-readiness {
  display: flex; gap: var(--space-2); align-items: baseline;
  margin-top: -2px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--neutral-tint); color: var(--text-secondary); font-size: var(--text-xs);
}
.presc-readiness-glyph { flex: none; font-size: var(--text-2xs); opacity: 0.8; }
.presc-readiness.is-detrained { background: var(--crit-tint); color: var(--crit-ink); }

/* ------------------------------------------------------------ band chips */

.band-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--fw-semi); white-space: nowrap;
  background: var(--band-tint, var(--neutral-tint));
  color: var(--band-ink, var(--neutral-ink));
}
.band-glyph { font-weight: var(--fw-bold); font-size: var(--text-xs); line-height: 1; }

/* The five verdicts get their colours in exactly one place. Everything that
   shows a band — the chip, a grid cell, its glyph, the legend — then reads
   --band-tint and --band-ink. Custom properties inherit and do not fight over
   specificity, which is what the grid rules below used to need a
   `table.grid td.cell` prefix to survive. */
[data-band]           { --band-tint: var(--neutral-tint); --band-ink: var(--neutral-ink); }
[data-band="ideal"]   { --band-tint: var(--good-tint);    --band-ink: var(--good-ink); }
[data-band="stretch"] { --band-tint: var(--warn-tint);    --band-ink: var(--warn-ink); }
[data-band="toobig"]  { --band-tint: var(--crit-tint);    --band-ink: var(--crit-ink); }
[data-band="beaten"]  { --band-tint: var(--neutral-tint); --band-ink: var(--neutral-ink); }
[data-band="return"]  { --band-tint: var(--neutral-tint); --band-ink: var(--text-secondary); }

.status-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semi); padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
  background: var(--neutral-tint); color: var(--neutral-ink); white-space: nowrap;
}
.status-chip.is-on-target { background: var(--good-tint); color: var(--good-ink); }
.status-chip.is-under { background: var(--warn-tint); color: var(--warn-ink); }
.status-chip.is-over { background: var(--crit-tint); color: var(--crit-ink); }
.status-glyph { font-weight: var(--fw-bold); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-1);
  font-size: var(--text-md); font-weight: var(--fw-semi); cursor: pointer;
  touch-action: manipulation; transition: transform 0.08s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: var(--series-1); border-color: var(--series-1); color: var(--on-accent); }
.btn-ghost { background: var(--surface-2); border-color: transparent; }
.btn-danger { background: var(--crit-tint); border-color: transparent; color: var(--crit-ink); }
.btn-block { width: 100%; }
/* An anchor dressed as a button (the donate link) should read as one, not as a hyperlink. */
a.btn { color: inherit; text-decoration: none; }
a.btn-primary { color: var(--on-accent); }

/* The support card at the top of Setup: one line of why, then the coffee. */
.support-card { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.support-text { display: flex; flex-direction: column; gap: var(--space-0); }
.btn-sm { min-height: 36px; padding: 0 var(--space-5); font-size: var(--text-sm); }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.link-btn {
  background: none; border: 0; padding: var(--space-2) var(--space-0); min-height: 32px;
  color: var(--series-1); font-size: var(--text-sm); font-weight: var(--fw-semi); cursor: pointer;
}
.link-btn-block { align-self: flex-start; }

.hint-btn {
  display: flex; flex-direction: column; gap: var(--space-0); width: 100%; text-align: left;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); min-height: var(--tap); cursor: pointer;
}
.hint-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: var(--fw-semi); }
.hint-value { font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: 1.45; }

.back-btn { background: none; border: 0; padding: var(--space-3) 0; font-size: var(--text-md); font-weight: var(--fw-semi); color: var(--series-1); cursor: pointer; }
.detail-bar { display: flex; align-items: center; justify-content: space-between; }

/* --------------------------------------------------------------- fields */

.field-block { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: var(--fw-semi); }
.field-hint { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }

.lever-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.lever-row > * { flex: 1; min-width: 0; }
/* A row holding a single control keeps the column width of the paired rows
   above it, rather than stretching across and looking like a different form. */
.lever-row-half > * { max-width: calc(50% - 4px); }

.stepper { display: flex; flex-direction: column; gap: var(--space-2); }
.stepper-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: var(--fw-semi); }
.stepper-row { display: flex; align-items: stretch; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.stepper-btn {
  flex: none; width: 38px; min-height: var(--tap); border: 0; background: none;
  font-size: var(--text-2xl); font-weight: var(--fw-medium); color: var(--text-secondary); cursor: pointer;
  touch-action: manipulation;
}
.stepper-btn:active { background: var(--border); }
.stepper-field { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-0); }
.stepper-input {
  width: 100%; min-width: 0; border: 0; background: none; text-align: center;
  font: var(--fw-semi) var(--text-lg)/1 var(--font); color: var(--text-primary);
  font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield;
}
.stepper-input:focus { outline: none; }
.stepper-field:focus-within { box-shadow: inset 0 -2px 0 var(--series-1); }
.stepper-suffix { color: var(--muted); font-size: var(--text-xs); }
.stepper-input::placeholder { color: var(--muted); font-weight: var(--fw-medium); font-size: var(--text-md); }

/* The weight field gets a row of its own: it is the number that moves most. */
.lever-row-wide .stepper-row { min-height: 52px; }
.lever-row-wide .stepper-input { font-size: var(--text-2xl); }
.lever-row-wide .stepper-btn { width: 56px; font-size: var(--text-3xl); }

.text-input, .date-input, .notes-input {
  width: 100%; min-height: var(--tap); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-1); color: var(--text-primary);
  font: var(--text-base)/1.3 var(--font);
}
.notes-input { min-height: 62px; resize: vertical; }
.date-row { display: flex; gap: var(--space-3); align-items: center; }
.date-row .date-input { flex: 1; min-width: 0; }
.notes-wrap[hidden] { display: none; }

/* ---------------------------------------------------------------- chips */

.chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-0); }
.chips::-webkit-scrollbar { display: none; }
.chips-wrap { flex-wrap: wrap; overflow: visible; }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1); flex: none;
  min-height: 40px; padding: 0 var(--space-6); border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface-1);
  font-size: var(--text-md); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
}
.chip.is-selected {
  background: var(--series-1); border-color: var(--series-1); color: var(--on-accent); font-weight: var(--fw-semi);
}
.chip small { font-size: var(--text-2xs); opacity: 0.75; }
.chip-lift { min-height: var(--tap); }

.segmented {
  display: inline-flex; background: var(--surface-2); border-radius: var(--radius-pill); padding: var(--space-1); gap: var(--space-0);
}
.seg {
  border: 0; background: none; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-secondary); cursor: pointer;
  min-height: 36px; touch-action: manipulation;
}
.seg.is-selected { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow); }

/* ----------------------------------------------------------------- facts */

.target-facts { display: flex; gap: var(--space-4); }
.fact { flex: 1; display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-4); }
.fact-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: var(--fw-semi); }
.fact-value { font-size: var(--text-lg); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.fact-sub { font-size: var(--text-2xs); color: var(--text-secondary); }

/* ------------------------------------------------------------ the grid */

.grid-block { display: flex; flex-direction: column; gap: var(--space-4); }
.grid-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.grid-head h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grid-note { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--text-xs); }

table.grid { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 320px; }
table.grid th {
  font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--muted);
  padding: var(--space-0); text-align: center; font-variant-numeric: tabular-nums;
}
table.grid th.is-col, table.grid th.is-row { color: var(--text-primary); }
.grid-corner { text-align: left !important; line-height: 1.1; }
.grid-corner small { display: block; font-size: var(--text-3xs); font-weight: var(--fw-medium); opacity: 0.8; }

table.grid td.cell {
  padding: 0; border-radius: var(--radius-xs);
  background: var(--band-tint, var(--neutral-tint));
}
table.grid td.cell.is-pick { box-shadow: inset 0 0 0 2px var(--series-1); }

.cell-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 100%; min-height: 42px; padding: var(--space-1) var(--space-0); border: 0; background: none;
  border-radius: var(--radius-xs); cursor: pointer; touch-action: manipulation;
}
.cell-value { font-size: var(--text-sm); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.cell-glyph {
  font-size: var(--text-3xs); font-weight: var(--fw-bold); line-height: 1.1;
  color: var(--band-ink, var(--neutral-ink));
}

/* ------------------------------------------------- strength and size */

/* Both answers, always on the card. The current one is stated; the other is a
   button, because the only thing standing between them is a tap. */
.picks { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.picks-label {
  font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: var(--fw-semi);
}
.pick {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-primary);
  text-align: left; cursor: pointer; touch-action: manipulation;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pick.is-current { cursor: default; border-color: var(--series-1); background: var(--series-wash); }
.pick-zone {
  flex: 0 0 auto; min-width: 58px;
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: var(--fw-bold);
}
.pick-value { font-size: var(--text-sm); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.pick-sub { font-size: var(--text-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pick-tag {
  margin-left: auto; font-size: var(--text-3xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--series-1-deep); font-weight: var(--fw-bold);
}
.pick .band-chip { margin-left: auto; }
.pick.is-current .band-chip { margin-left: 0; }

/* Which rep ranges are which, drawn in the grid rather than left to memory.
   A left edge, not a fill: the cells already carry the band colours and a
   second colour system over the top of them would fight for the same meaning. */
.grid tbody tr[data-zone="strength"] th[scope="row"] { box-shadow: inset 3px 0 0 var(--series-1); }
.grid tbody tr[data-zone="hypertrophy"] th[scope="row"] { box-shadow: inset 3px 0 0 var(--series-1-deep); }
.grid tbody tr[data-zone="both"] th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--series-1), inset 3px 0 0 var(--series-1-deep);
}
/* Ten rows rather than seven: keep the row heads legible while it scrolls. */
.grid tbody th[scope="row"] { position: sticky; left: 0; background: var(--surface-1); z-index: 1; }
.grid-zone-note { margin-top: calc(var(--space-1) * -1); margin-bottom: var(--space-2); }

/* What a set is worth as a hypertrophy dose, under the live score. */
.preview-hard { font-size: var(--text-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- legend */

.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.legend-item {
  display: grid; grid-template-columns: 20px auto 1fr; align-items: baseline; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--text-secondary);
}
.legend-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--radius-xs); font-size: var(--text-3xs); font-weight: var(--fw-bold);
  background: var(--band-tint, var(--neutral-tint));
  color: var(--band-ink, var(--neutral-ink));
}
.legend-label { font-weight: var(--fw-semi); color: var(--text-primary); }
.legend-hint { font-size: var(--text-2xs); }

/* ----------------------------------------------------------- stat tiles */

.kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.kpi-row-2 { grid-template-columns: 1fr 1fr; }
.stat {
  display: flex; flex-direction: column; gap: var(--space-0);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
}
.stat-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: var(--fw-semi); line-height: 1.3; }
.stat-value { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.stat-value small { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-secondary); }
.stat-delta { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stat-delta small { font-weight: var(--fw-normal); }
.stat-delta.is-good { color: var(--good-ink); }
.stat-delta.is-bad { color: var(--crit-ink); }

.hero {
  display: flex; flex-direction: column; gap: var(--space-0);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-6) 16px; box-shadow: var(--shadow);
}
.hero-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: var(--fw-semi); }
/* tabular-nums matters more here than anywhere: without it the digits change
   width as the number runs up and the whole line jitters. */
.hero-value {
  font-size: var(--display); font-weight: var(--fw-bold); line-height: 1.05;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
}
.hero-value small { font-size: var(--text-xl); font-weight: var(--fw-medium); color: var(--text-secondary); }
.hero-delta { font-size: var(--text-sm); color: var(--text-secondary); }
.hero-delta.is-good { color: var(--good-ink); }
.hero-delta.is-bad { color: var(--crit-ink); }

/* --------------------------------------------------------- progress rows */

.card-row { padding: 0; }
.row-open {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-5) var(--space-6); background: none; border: 0; text-align: left; cursor: pointer; min-height: 62px;
}
.row-open-main { flex: 1; min-width: 0; }
.row-open-figs { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.row-adj-big { font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.row-adj-big small { font-size: var(--text-2xs); font-weight: var(--fw-medium); color: var(--text-secondary); }
.row-trend { font-size: var(--text-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.row-trend.is-good { color: var(--good-ink); }
.row-trend.is-bad { color: var(--crit-ink); }
.row-trend.is-muted { color: var(--muted); }

/* -------------------------------------------------------------- the form */

.card-form .card-head { padding-bottom: var(--space-2); }
.form-body { padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }

.plan-strip {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--series-wash); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
}
.plan-strip-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: var(--fw-semi); }
.plan-strip-value { font-size: var(--text-md); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.plan-strip .link-btn { margin-left: auto; }

.warmup-steps { display: flex; flex-direction: column; gap: var(--space-1); }
.warmup-step { display: flex; align-items: center; gap: var(--space-3); }
.warmup-step-value { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.warmup-step .link-btn { margin-left: auto; }

.preview {
  display: flex; flex-direction: column; gap: var(--space-1);
  border-top: 1px solid var(--border); padding-top: var(--space-4);
}
.preview-main { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.preview-value { font-size: var(--text-3xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.preview-value small { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-secondary); }
.preview-sub { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.preview-hint { font-size: var(--text-sm); color: var(--muted); }

.btn-save { margin-top: var(--space-0); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- history */

.history { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); }
.day { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-2); }
.day-when { font-size: var(--text-md); font-weight: var(--fw-semi); }
.day-meta { font-size: var(--text-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.day-list { list-style: none; margin: 0; padding: 0 0 var(--space-1); }
.day-list li + li { border-top: 1px solid var(--border); }
.row-btn {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-0) var(--space-4); width: 100%;
  padding: var(--space-4) var(--space-6); background: none; border: 0; text-align: left; cursor: pointer; min-height: var(--tap);
}
.row-name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--fw-semi); min-width: 0; }
.row-set { font-size: var(--text-md); font-variant-numeric: tabular-nums; text-align: right; }
.row-adj { font-size: var(--text-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.row-rir { font-size: var(--text-2xs); color: var(--muted); text-align: right; }
/* Spans both columns so a long note wraps under the row rather than squeezing
   the numbers, and sits in quote-ish italics so it reads as your words. */
.row-note {
  grid-column: 1 / -1; font-size: var(--text-2xs); font-style: italic;
  color: var(--text-secondary); margin-top: var(--space-0);
}

/* --------------------------------------------------------------- charts */

.chart-card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-5) var(--space-4) var(--space-4); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.chart { margin: 0; }
.chart-plot { position: relative; }
.chart-svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; }
.chart-empty { color: var(--text-secondary); font-size: var(--text-sm); padding: var(--space-4) var(--space-1); }
.chart-cap { margin-top: var(--space-2); padding: 0 var(--space-1); font-size: var(--text-2xs); color: var(--muted); }

.chart-svg .grid { stroke: var(--grid); stroke-width: 1; }
.chart-svg .axis { stroke: var(--axis); stroke-width: 1; }
.chart-svg .ref-best { stroke: var(--axis); stroke-width: 1; }
.chart-svg .ref-target { stroke: var(--axis); stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font: var(--fw-medium) var(--text-3xs) var(--font); font-variant-numeric: tabular-nums; }

.chart-svg .area { fill: var(--series-wash); }
.chart-svg .line { stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .dot { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
.chart-svg .dot-last { fill: var(--series-1); }
.chart-svg .trend { stroke: var(--muted); stroke-width: 2; opacity: 0.85; }
.chart-svg .trend-proj { stroke: var(--series-1); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.55; }
.chart-svg .proj-dot { fill: var(--series-1); opacity: 0.55; }
.chart-svg .target-ring { fill: none; stroke: var(--good); stroke-width: 2; }
.chart-svg .target-dot { fill: var(--good); }

.chart-svg .label-last { fill: var(--text-primary); font: var(--fw-semi) var(--text-xs) var(--font); }
.chart-svg .label-target { fill: var(--good-ink); font: var(--fw-semi) var(--text-3xs) var(--font); }
.chart-svg .label-proj { fill: var(--muted); font: var(--fw-medium) var(--text-3xs) var(--font); }

.chart-svg .bar { fill: var(--series-1); opacity: 0.55; }
.chart-svg .bar-current { fill: var(--series-1); opacity: 1; }

.chart-svg .crosshair { stroke: var(--axis); stroke-width: 1; }
.chart-svg .focus-dot { fill: var(--series-1); stroke: var(--surface-1); stroke-width: 2; }
/* The scrub layer is focusable for keyboard users, but must not flash a focus
   ring when it is merely tapped. */
.chart-svg .capture { cursor: crosshair; outline: none; }
.chart-svg .capture:focus { outline: none; }
.chart-svg .capture:focus-visible { outline: 2px solid var(--series-1); outline-offset: -1px; }

.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 128px; padding: var(--space-2) var(--space-4);
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.chart-tip strong { font-size: var(--text-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.chart-tip .tip-sub { font-size: var(--text-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chart-tip[hidden] { display: none; }

.chart-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding: var(--space-3) var(--space-1) 0; }
.key-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); color: var(--text-secondary); }
.key-mark { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--series-1); flex: none; }
.key-mark.key-trend { background: var(--muted); }
.key-mark.key-proj { background: repeating-linear-gradient(90deg, var(--series-1) 0 5px, transparent 5px 9px); opacity: 0.6; }
.key-mark.key-target { width: 10px; height: 10px; border-radius: 50%; background: none; border: 2px solid var(--good); }

.spark { flex: none; opacity: 0.95; }
.spark-line { stroke: var(--axis); stroke-width: 1.5; }
.spark-dot { fill: var(--series-1); }

/* ---------------------------------------------------------------- meter */

.meter { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-0) var(--space-1); }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.meter-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: var(--fw-semi); }
.meter-value { font-size: var(--text-base); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.meter-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--series-wash); overflow: hidden; }
.meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--series-1); }
.meter-fill.is-under { background: var(--warning); }
.meter-fill.is-on-target { background: var(--good); }
.meter-fill.is-over { background: var(--critical); }
.meter-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--axis); }

/* --------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.data-table caption { caption-side: top; text-align: left; padding: var(--space-4) var(--space-5) var(--space-2); font-size: var(--text-2xs); color: var(--muted); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table thead th { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: var(--fw-semi); border-bottom: 1px solid var(--border); }
.data-table tbody th { text-align: left; font-weight: var(--fw-semi); }
.data-table thead th:first-child, .data-table tbody th:first-child { text-align: left; }
.data-table tbody tr + tr th, .data-table tbody tr + tr td { border-top: 1px solid var(--border); }
.data-table tbody tr.is-pick { background: var(--series-wash); }
.data-table-wide { min-width: 720px; }

/* ---------------------------------------------------------------- notes */

.note {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.note summary {
  padding: var(--space-5) var(--space-6); min-height: var(--tap); display: flex; align-items: center;
  font-size: var(--text-md); font-weight: var(--fw-semi); cursor: pointer; list-style: none;
}
.note summary::-webkit-details-marker { display: none; }
.note summary::after { content: '⌄'; margin-left: auto; color: var(--muted); }
.note[open] summary::after { content: '⌃'; }
.note-body { padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; }

.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  background: var(--surface-1); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); padding: var(--space-7) 16px;
}
.empty h3 { font-size: var(--text-base); }
.empty p { font-size: var(--text-sm); color: var(--text-secondary); }

.foot-note { padding: var(--space-3) var(--space-0) var(--space-1); font-size: var(--text-2xs); color: var(--muted); }

/* --------------------------------------------------------------- tabbar */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center; gap: var(--space-0);
  padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .tabbar { background: var(--plane); }
}
.tab {
  flex: 1; max-width: 130px; display: flex; flex-direction: column; align-items: center; gap: var(--space-0);
  padding: var(--space-2) var(--space-1); min-height: 52px; border: 0; background: none;
  color: var(--muted); cursor: pointer; border-radius: var(--radius-sm);
  touch-action: manipulation;
}
.tab.is-active { color: var(--series-1); }
.tab-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tab-label { font-size: var(--text-2xs); font-weight: var(--fw-semi); letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- toast */

.toast-host {
  position: fixed; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom) + var(--dock-h, 0px));
  z-index: 40; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-6); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--space-5); max-width: 520px; width: 100%;
  background: var(--text-primary); color: var(--plane);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-6); font-size: var(--text-sm); font-weight: var(--fw-medium);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
  opacity: 0; transform: translateY(8px); transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: auto;
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-leaving { opacity: 0; transform: translateY(6px); }
.toast-msg { flex: 1; }
.toast-action {
  flex: none; background: none; border: 0; padding: var(--space-1) var(--space-0);
  color: inherit; font-weight: var(--fw-bold); text-decoration: underline; cursor: pointer;
}

/* ---------------------------------------------------------------- sheet */

.sheet-wrap {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(11, 11, 11, 0.42); opacity: 0; transition: opacity 0.18s ease;
}
.sheet-wrap.is-in { opacity: 1; }
.sheet {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--surface-1); border-radius: var(--radius-lg) 18px 0 0;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-6);
  transform: translateY(14px); transition: transform 0.2s ease;
}
.sheet-wrap.is-in .sheet { transform: none; }
.sheet-grip { width: 38px; height: 4px; border-radius: var(--radius-pill); background: var(--axis); align-self: center; margin: var(--space-1) 0 var(--space-0); }
.sheet-title { font-size: var(--text-lg); }
.sheet-body { display: flex; flex-direction: column; gap: var(--space-6); }
.sheet-text { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.5; }
.sheet-actions { display: flex; gap: var(--space-3); }
.sheet-actions .btn { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media (min-width: 480px) {
  .kpi-row { grid-template-columns: repeat(4, 1fr); }
  .kpi-row-2 { grid-template-columns: 1fr 1fr; }
}

/* There was nothing between 480px and 900px, so a big phone in landscape and
   every tablet in portrait got the narrow phone column with phone gutters.
   The column stays single — a card is a row and reads better full width — it
   just stops being cramped. */
@media (min-width: 640px) {
  main {
    max-width: 660px;
    padding-left: max(var(--space-8), env(safe-area-inset-left));
    padding-right: max(var(--space-8), env(safe-area-inset-right));
  }
  .kpi-row { gap: var(--space-5); }
}

/* ==========================================================================
   Motion, identity and the gym-side furniture
   Everything below is additive: without it the app is exactly what it was, so
   a browser that supports none of it still gets the whole application.
   ========================================================================== */

/* ------------------------------------------------------- view transitions */

/* Every render replaces the DOM, so nothing here can be a CSS transition. The
   View Transitions API snapshots the old and new trees instead and animates
   between them; cards carry their own name, so they morph individually while
   the rest of the page cross-fades. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 200ms; }

::view-transition-group(*) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Fixed furniture is named so it is lifted out of the page snapshot and stays
   put during a transition rather than cross-fading with the content. */
.tabbar { view-transition-name: tabbar; }
.dock { view-transition-name: dock; }
.fab-host { view-transition-name: fab; }

/* The panel a card opens: it cannot transition (it is a brand new node), but it
   can arrive rather than appear. */
@keyframes detail-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.card-detail { animation: detail-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* ------------------------------------------------------------- identity */

.accent-dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-0) 18%, transparent);
}
.accent-1 { background: var(--accent-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 18%, transparent); }
.accent-2 { background: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.accent-3 { background: var(--accent-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-3) 18%, transparent); }
.accent-4 { background: var(--accent-4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-4) 18%, transparent); }
.accent-5 { background: var(--accent-5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-5) 18%, transparent); }
.accent-6 { background: var(--accent-6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-6) 18%, transparent); }
.accent-7 { background: var(--accent-7); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-7) 18%, transparent); }

h1 .accent-dot { width: 11px; height: 11px; margin-right: 9px; vertical-align: middle; display: inline-block; }
.chip .accent-dot { box-shadow: none; width: 8px; height: 8px; }
.chip.is-selected .accent-dot { background: currentColor; }

.card-title-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }

.pr-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-0) var(--space-3) var(--space-0) var(--space-2); border-radius: var(--radius-pill);
  background: var(--good-tint); color: var(--good-ink);
  font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: 0.02em; white-space: nowrap;
}
.pr-glyph { font-size: var(--text-3xs); line-height: 1; }
.data-table tbody tr.is-pr td, .data-table tbody tr.is-pr th { background: color-mix(in srgb, var(--good) 8%, transparent); }
.data-table td .pr-badge { margin-left: 6px; }

/* --------------------------------------------------------- readiness UI */

.day-strip {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
  background: var(--series-wash); font-size: var(--text-sm); color: var(--text-secondary);
}
.day-strip-day { font-weight: var(--fw-bold); color: var(--text-primary); }
.day-strip-sep { color: var(--muted); }
.day-strip-fact { font-variant-numeric: tabular-nums; }
.day-strip-fact.is-done { color: var(--good-ink); font-weight: var(--fw-semi); }

.group-head { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.group-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--neutral-tint); color: var(--text-secondary);
  font-size: var(--text-2xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}

.stale-chip {
  padding: var(--space-0) var(--space-3); border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--warn-tint); color: var(--warn-ink);
  font-size: var(--text-2xs); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
}
/* Readiness phases: recovering and holding are states, not warnings; only a
   real layoff is worth colouring as one. */
.stale-chip.is-recovering { background: var(--neutral-tint); color: var(--neutral-ink); }
.stale-chip.is-holding    { background: var(--neutral-tint); color: var(--text-secondary); }
.stale-chip.is-detrained  { background: var(--crit-tint); color: var(--crit-ink); }
/* Not a phase of the model at all — a lift you have finished for the day. */
.stale-chip.is-done       { background: var(--good-tint); color: var(--good-ink); }

.card.is-finished { border-color: color-mix(in srgb, var(--good) 35%, var(--border)); }
.done-line { display: flex; align-items: baseline; gap: var(--space-2); color: var(--good-ink); }

/* ---------------------------------------------------------- chart motion */

@keyframes draw-line {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}
@keyframes wash-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* pathLength="1" on the path makes this a plain 1 -> 0 sweep whatever the
   real length of the line is. */
.chart-svg .line { stroke-dasharray: 1; animation: draw-line 620ms cubic-bezier(0.3, 0.8, 0.4, 1) both; }
.chart-svg .area { animation: wash-in 500ms ease-out 200ms both; }
.chart-svg .dot, .chart-svg .dot-last, .chart-svg .dot-pr {
  transform-box: fill-box; transform-origin: center;
  animation: mark-in 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.chart-svg .trend, .chart-svg .trend-proj, .chart-svg .proj-dot,
.chart-svg .target-ring, .chart-svg .target-dot,
.chart-svg .label-last, .chart-svg .label-target, .chart-svg .label-proj {
  animation: wash-in 400ms ease-out 420ms both;
}
.chart-svg .bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: bar-grow 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.chart-svg .dot-pr { fill: none; stroke: var(--good); stroke-width: 2; }
.key-mark.key-pr { width: 10px; height: 10px; border-radius: 50%; background: none; border: 2px solid var(--good); }

/* ------------------------------------------------------------- celebration */

.confetti-host {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden;
}
.confetti {
  position: absolute; top: -14px; width: 7px; height: 12px; border-radius: 2px;
  background: var(--series-1);
  animation: confetti-fall 1600ms cubic-bezier(0.3, 0.5, 0.6, 1) both;
}
.confetti-1 { background: var(--good); width: 9px; height: 9px; border-radius: 50%; }
.confetti-2 { background: var(--warning); }
.confetti-3 { background: var(--accent-3); width: 6px; height: 14px; }
@keyframes confetti-fall {
  from { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
  to { transform: translate3d(var(--drift, 0), 78vh, 0) rotate(var(--spin, 360deg)); opacity: 0; }
}

/* --------------------------------------------------------- the rest timer */

.dock {
  position: fixed; z-index: 25;
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: calc(70px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none;
}
.dock:empty { display: none; }

.rest {
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; max-width: 540px; min-height: 48px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface-1); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.rest.is-in { opacity: 1; transform: none; }
.rest.is-leaving { opacity: 0; transform: translateY(8px); }

/* The linear fill that used to wash across the dock is now the ring on the
   left — see restRing() in charts.js. Kept: the tint when rest is up, which is
   what makes the dock readable from across the room. */
.rest.is-done { background: color-mix(in srgb, var(--good) 8%, var(--surface-1)); }
.rest-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rest-label {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rest.is-done .rest-label { color: var(--good-ink); }
.rest-time { font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.rest-btn {
  position: relative; flex: none; min-height: 36px; padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-1);
  font-size: var(--text-sm); font-weight: var(--fw-semi); cursor: pointer; touch-action: manipulation;
}
.rest-close { background: var(--surface-2); border-color: transparent; }

/* ------------------------------------------------------- the action button */

.fab-host {
  position: fixed; z-index: 24;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(74px + env(safe-area-inset-bottom) + var(--dock-h, 0px));
  transition: bottom 0.2s ease;
}
.has-sheet .fab-host { display: none; }
.fab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 48px; padding: 0 17px 0 var(--space-6); border: 0; border-radius: var(--radius-pill);
  background: var(--series-1); color: var(--on-accent); font-size: var(--text-md); font-weight: var(--fw-bold);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--series-1) 34%, transparent);
  cursor: pointer; touch-action: manipulation;
  transition: transform 0.1s ease;
}
.fab:active { transform: scale(0.96); }
.fab-plus { font-size: var(--text-2xl); font-weight: var(--fw-medium); line-height: 1; margin-top: -2px; }

/* -------------------------------------------------------- swipe to delete */

.swipe-row { position: relative; overflow: hidden; }
.swipe-row .row-btn {
  position: relative; z-index: 1; background: var(--surface-1);
  touch-action: pan-y; will-change: transform;
}
.swipe-action {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  padding-right: 16px; background: var(--crit-tint); color: var(--crit-ink);
  font-size: var(--text-sm); font-weight: var(--fw-bold);
}
.swipe-row.is-armed .swipe-action { background: var(--critical); color: #fff; }

/* --------------------------------------------------------- welcome tour */

.welcome-wrap {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: color-mix(in srgb, var(--plane) 92%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.22s ease;
}
.welcome-wrap.is-in { opacity: 1; }
.welcome {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5);
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.welcome.is-stepping { animation: detail-in 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.welcome-art {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--radius-lg);
  background: var(--series-wash); font-size: var(--text-4xl); line-height: 1;
}
.welcome-title { font-size: var(--text-2xl); line-height: 1.2; }
.welcome-body { font-size: var(--text-md); line-height: 1.55; color: var(--text-secondary); }
.welcome-dots { display: flex; gap: var(--space-2); padding: var(--space-0) 0 var(--space-1); }
.welcome-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.welcome-dot.is-on { background: var(--series-1); }
.welcome-actions { display: flex; align-items: center; gap: var(--space-3); width: 100%; }
.welcome-actions .btn { flex: 1; }
.welcome-actions-end { flex-direction: column; align-items: stretch; }
.welcome-note { font-size: var(--text-xs); color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------------- odds and ends */

/* A settings card folded inside an explainer should read as part of it. */
.note-body .card { border: 0; box-shadow: none; background: none; padding: 0; }
.note-body .card-pad { padding: 0; }

.sheet-wrap.is-leaving { opacity: 0; }
.sheet-wrap.is-leaving .sheet { transform: translateY(14px); }

/* --------------------------------------------------------------- desktop */

/* On a wide screen the single 560px column is a lot of empty room. The list
   becomes two columns and the open card spans both, which is the same
   master-detail idea without a second scroll container to keep in sync. */
@media (min-width: 900px) {
  main { max-width: 940px; }
  .view-plan .card-list,
  .view-progress .card-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start;
  }
  .view-plan .card.is-open { grid-column: 1 / -1; }
  .view-setup .card-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
  .view-setup .card.is-open { grid-column: 1 / -1; }
  .kpi-row-2 { grid-template-columns: repeat(4, 1fr); }
  .fab { min-height: 52px; }
}

/* --------------------------------------------------------- set-by-set log */

.mode-row { display: flex; justify-content: center; padding-bottom: var(--space-0); }
.mode-row .segmented { width: 100%; }
.mode-row .seg { flex: 1; }

.chip-done {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 var(--space-2); margin-left: 2px; border-radius: var(--radius-pill);
  background: var(--good-tint); color: var(--good-ink);
  font-size: var(--text-3xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.chip.is-selected .chip-done { background: rgba(255, 255, 255, 0.24); color: var(--on-accent); }

.set-track {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.set-track.is-complete { background: color-mix(in srgb, var(--good) 12%, var(--surface-2)); }
.set-track-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 22px; }
.set-track-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: var(--fw-semi); }
.set-track-head .link-btn { padding: 0 var(--space-0); min-height: 22px; }

/* Calling a lift done. Green while it is the thing to do, quiet once it is
   done — at that point the button is only the way back, not the next step. */
.done-btn { border: 1px solid var(--good); background: var(--good-tint); color: var(--good-ink); }
.done-btn.is-done {
  border-color: var(--border); background: transparent; color: var(--text-secondary);
  font-weight: var(--fw-normal);
}

.set-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong); background: none;
  color: var(--muted); font-size: var(--text-md); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
}
.set-pill.is-done {
  border-style: solid; border-color: transparent;
  background: var(--series-1); color: var(--on-accent);
  animation: mark-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.set-pill.is-next {
  border-style: solid; border-color: var(--series-1); color: var(--series-1);
  background: var(--surface-1);
}

/* ------------------------------------------------------------ disclosure */

/* One design, with the arithmetic one tap under the verdict rather than behind
   a mode switch. Styled to recede: this is a footnote you can open, not a
   second half of the screen. */
.disclose { margin-top: var(--space-2); }
.disclose-summary {
  display: flex; align-items: center; gap: var(--space-1);
  min-height: 28px; padding: var(--space-0) 0;
  color: var(--muted); font-size: var(--text-2xs); font-weight: var(--fw-medium);
  cursor: pointer; list-style: none; user-select: none;
}
.disclose-summary::-webkit-details-marker { display: none; }
.disclose-summary:hover { color: var(--text-secondary); }
.disclose-chevron {
  width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-out);
}
.disclose[open] > .disclose-summary { color: var(--text-secondary); }
.disclose[open] > .disclose-summary .disclose-chevron { transform: rotate(180deg); }
.disclose-body {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-1);
  color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5;
  animation: detail-in var(--dur-base) var(--ease-out) both;
}
.disclose-body .fact-value,
.disclose-body .fact-label { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------- the session so far */

.chart-trace { margin: var(--space-2) 0 0; }

/* Done sets are solid; the one you are about to do is an outline, the same
   language the set pills used before they grew an axis. */
.chart-svg .trace-bar { fill: var(--series-1); opacity: 0.6; }
.chart-svg .trace-bar.bar-current { opacity: 1; }
/* A set that came up short of the plan. The dashed reference line above it is
   what carries the meaning; the lighter fill only seconds it. */
.chart-svg .trace-bar.is-short { fill: var(--warning); opacity: 0.75; }
.chart-svg .trace-bar.is-next {
  fill: none; stroke: var(--series-1); stroke-width: 1.5; stroke-dasharray: 3 3; animation: none;
}
.chart-svg .trace-slot { stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; }

.chart-svg .trace-reps {
  fill: var(--text-primary); font: var(--fw-bold) var(--text-2xs) var(--font);
  font-variant-numeric: tabular-nums;
}
.chart-svg .trace-reps.is-next { fill: var(--series-1); }
.chart-svg .trace-rir {
  fill: var(--muted); font: var(--fw-medium) var(--text-3xs) var(--font);
  font-variant-numeric: tabular-nums;
}
.chart-svg .trace-rest {
  fill: var(--axis); font: var(--fw-medium) var(--text-3xs) var(--font);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ rest ring */

.rest-ring { flex: none; display: block; }
.rest-ring-track { fill: none; stroke: var(--border-strong); stroke-width: 2.5; }
.rest-ring-arc {
  fill: none; stroke: var(--series-1); stroke-width: 2.5; stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-base) linear;
}
.rest.is-done .rest-ring-arc { stroke: var(--good); }

/* ------------------------------------------------------------ session rail */

/* The first view of a session as a whole rather than one lift at a time. */
.rail {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); margin-bottom: var(--space-4);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.rail-title { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-primary); }
.rail-sub {
  font-size: var(--text-2xs); color: var(--muted); font-variant-numeric: tabular-nums;
  text-align: right;
}
.rail-track {
  display: flex; gap: var(--space-1); overflow-x: auto; padding-bottom: var(--space-0);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail-track::-webkit-scrollbar { display: none; }

/* A segment names its lift. It has to: the identity hues cannot be told apart
   pairwise under deuteranopia, so the dot is never the only thing saying which
   lift this is. See the note on --accent-* in the token block. */
.rail-seg {
  flex: 1 0 auto; min-width: 82px; max-width: 148px;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-0);
  padding: var(--space-2) var(--space-2) var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-secondary);
  text-align: left; cursor: pointer; touch-action: manipulation;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rail-seg.is-current {
  border-color: var(--series-1); background: var(--series-wash); color: var(--text-primary);
}
.rail-seg.is-complete { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.rail-seg.is-complete .rail-seg-count { color: var(--good-ink); }
.rail-seg-name {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.rail-seg-count {
  font-size: var(--text-3xs); font-weight: var(--fw-medium); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rail-seg-bar {
  width: 100%; height: 4px; border-radius: var(--radius-pill);
  background: var(--neutral-tint); overflow: hidden; margin-top: var(--space-0);
}
.rail-seg-fill {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--series-1); transition: width var(--dur-slow) var(--ease-out);
}
.rail-seg.is-complete .rail-seg-fill { background: var(--good); }

/* The session total, in the same meter language as the weekly sets meter. */
.rail-total { display: flex; align-items: center; gap: var(--space-3); }
.rail-total-track {
  flex: 1; height: 6px; border-radius: var(--radius-pill);
  background: var(--neutral-tint); overflow: hidden;
}
.rail-total-fill {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--series-1); transition: width var(--dur-slow) var(--ease-out);
}
.rail-total.is-complete .rail-total-fill { background: var(--good); }
.rail-total-value {
  font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* -------------------------------------------------------------- milestone */

/* A destination for the trend line. The projections were always there; what
   was missing was something to be projecting toward. */
.milestone {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
}
.milestone.is-compact { padding: var(--space-2) var(--space-3); gap: var(--space-1); }
.milestone-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.milestone-label {
  font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.milestone-value {
  font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.milestone-value small { font-size: var(--text-2xs); font-weight: var(--fw-medium); color: var(--muted); }
.milestone.is-compact .milestone-value { font-size: var(--text-lg); }
.milestone-track {
  height: 6px; border-radius: var(--radius-pill);
  background: var(--neutral-tint); overflow: hidden;
}
.milestone-fill {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: var(--series-1);
  transition: width var(--dur-slow) var(--ease-out);
}
.milestone-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-2xs); color: var(--text-secondary);
}
.milestone-from { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.milestone-eta { text-align: right; }

/* What a lift is worth today, when that is not what you last lifted. Only ever
   shown while a layoff is actually discounting it. */
.baseline-note {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--warn-ink);
}
.baseline-note strong { font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }

/* -------------------------------------------------- trajectory chart v2 */

/* A repaint after a resize is the same chart at a new size, not a new chart. */
.chart.no-anim .line,
.chart.no-anim .area,
.chart.no-anim .dot,
.chart.no-anim .dot-pr,
.chart.no-anim .bar { animation: none; }

/* The room the sessions actually scatter in. Deliberately faint: it is context
   for the projection, not a second series. */
.chart-svg .proj-cone { fill: var(--series-1); opacity: 0.10; }

/* The running best, as a step. A plateau should look like a plateau. */
.chart-svg .pr-step {
  stroke: var(--good); stroke-width: 1.5; opacity: 0.5;
  stroke-linejoin: round; stroke-dasharray: 1 3; stroke-linecap: round;
}

.chart-svg .ref-milestone { stroke: var(--series-1); stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.7; }
.chart-svg .label-milestone {
  fill: var(--series-1-deep); font: var(--fw-semi) var(--text-3xs) var(--font);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- readiness lane */

.chart-readiness .line { stroke: var(--series-1); }
.chart-svg .readiness-wash { fill: var(--series-1); opacity: 0.10; }
.chart-svg .ready-mark { stroke: var(--good); stroke-width: 1; stroke-dasharray: 3 3; }

/* --------------------------------------------------------- chart ranges */

.chart-range { display: flex; align-items: center; justify-content: flex-end; }
.chart-range .segmented { font-size: var(--text-2xs); }

/* The cone is an area, so its key mark has to be one too — a 2px rule would
   read as another line. */
.key-mark.key-cone {
  height: 9px; border-radius: 2px;
  background: color-mix(in srgb, var(--series-1) 22%, transparent);
}
.key-mark.key-best {
  background: repeating-linear-gradient(90deg, var(--good) 0 2px, transparent 2px 5px); opacity: 0.7;
}
.key-mark.key-milestone {
  background: repeating-linear-gradient(90deg, var(--series-1) 0 5px, transparent 5px 9px); opacity: 0.8;
}

/* ========================================================== whole body */

/* --- consistency: every day, shaded by the work it carried --- */
.heat-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.heat { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.heat::-webkit-scrollbar { display: none; }
.heat-days {
  display: grid; grid-template-rows: repeat(7, 12px); gap: 2px; flex: none;
  font-size: var(--text-3xs); color: var(--muted); align-items: center;
}
.heat-cells {
  display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column;
  grid-auto-columns: 12px; gap: 2px; flex: none;
}
.heat-cell { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--neutral-tint); }
.heat-cell.is-blank { background: none; }

/* A magnitude, so one hue getting darker — never a rainbow. The date and set
   count ride on every cell, so the shade is never the only thing saying it. */
.heat-cell.is-l0 { background: var(--neutral-tint); }
.heat-cell.is-l1 { background: color-mix(in srgb, var(--series-1) 26%, var(--surface-2)); }
.heat-cell.is-l2 { background: color-mix(in srgb, var(--series-1) 48%, var(--surface-2)); }
.heat-cell.is-l3 { background: color-mix(in srgb, var(--series-1) 72%, var(--surface-2)); }
.heat-cell.is-l4 { background: var(--series-1); }

.heat-key {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-3xs); color: var(--muted);
}
.heat-key span:first-child { margin-right: var(--space-1); }
.heat-key span:last-child { margin-left: var(--space-1); }

/* --- balance: where the work went --- */
.balance-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.balance { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.balance-row {
  display: grid; grid-template-columns: minmax(78px, 1fr) 2fr auto auto;
  align-items: center; gap: var(--space-3);
}
.balance-name {
  display: flex; align-items: center; gap: var(--space-2); min-width: 0;
  font-size: var(--text-2xs); font-weight: var(--fw-medium); color: var(--text-primary);
}
.balance-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-track {
  position: relative; height: 8px; border-radius: var(--radius-pill);
  background: var(--neutral-tint); overflow: visible;
}
.balance-fill {
  display: block; height: 100%; border-radius: var(--radius-pill); background: var(--series-1);
  transition: width var(--dur-slow) var(--ease-out);
}
.balance-fill.is-under { background: color-mix(in srgb, var(--series-1) 55%, var(--surface-2)); }
.balance-fill.is-over { background: var(--warning); }
.balance-mark {
  position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px;
  background: var(--axis);
}
.balance-count {
  font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; min-width: 20px; text-align: right;
}

/* --- the PR timeline --- */
.pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-event {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: var(--space-1) var(--space-3); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.pr-event:last-child { border-bottom: 0; }
.pr-when {
  grid-column: 1 / -1; font-size: var(--text-3xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; order: -1;
}
.pr-lift {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--text-primary);
}
.pr-set { font-size: var(--text-2xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pr-gain {
  font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--good-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The Lifts / Body switch sits above everything on the Progress tab. */
.view-switch { margin-bottom: var(--space-4); }
.view-switch .segmented { width: 100%; }
.view-switch .seg { flex: 1; }

/* ========================================================== kinetic pass */

.hero-num, .preview-num { font-variant-numeric: tabular-nums; }

/* The set that takes a session past its best. The confetti is the celebration;
   this is the number acknowledging it. */
.preview.is-pr .preview-value { animation: pr-flash var(--dur-slow) var(--ease-spring) both; }
@keyframes pr-flash {
  0%   { transform: scale(1); color: var(--text-primary); }
  40%  { transform: scale(1.06); color: var(--good-ink); }
  100% { transform: scale(1); color: var(--text-primary); }
}
.preview-value { display: inline-block; transform-origin: left center; }

/* --- what the lift just did --- */
.session-summary {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); margin-top: var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--good) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--good) 22%, transparent);
  animation: detail-in var(--dur-base) var(--ease-out) both;
}
.summary-head {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-md); font-weight: var(--fw-semi); color: var(--good-ink);
}
.summary-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  background: var(--good); color: var(--surface-1);
  font-size: var(--text-3xs); font-weight: var(--fw-bold); flex: none;
}
.summary-facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.summary-facts li { display: flex; align-items: center; gap: var(--space-2); }
.summary-facts li + li::before {
  content: '·'; color: var(--muted); margin-right: var(--space-2);
}
.summary-note { font-size: var(--text-2xs); color: var(--muted); }

/* A chip that reports rather than offers: "Custom", when a lift has been tuned
   by hand and matches none of the presets. */
.chip.is-static { cursor: default; pointer-events: none; }

/* ------------------------------------------------ top set + back-offs */

/* The back-offs sit under the hero as one quieter line: the top set is the
   number the target is about, and this is what follows it. */
.presc-then {
  flex-basis: 100%; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  margin: 0; font-size: var(--text-md); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums;
}
.presc-then-label {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: var(--fw-semi);
}
.presc-then-sub { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-secondary); }
.plan-strip-topset { background: var(--surface-2); }

/* ------------------------------------------------- body measurements */

.measure-prompt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  background: var(--series-wash); border: 1px solid var(--series-1); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.measure-prompt-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 220px; min-width: 0; }
.measure-prompt-text strong { font-size: var(--text-md); }
.measure-prompt-text span { font-size: var(--text-sm); color: var(--text-secondary); }
.measure-prompt-actions { display: flex; gap: var(--space-2); flex: none; }

.measure-cta { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.measure-form { margin-bottom: var(--space-4); }
.measure-form .card-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6); }
.measure-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4) var(--space-3); }
.check-row { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.check-row input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--series-1); }
.check-row small { color: var(--text-secondary); font-size: var(--text-xs); }
.measure-tiles { margin-bottom: var(--space-4); }
.measure-flag {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--warn-tint); color: var(--text-primary); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); margin-bottom: var(--space-4);
}
.measure-flag-glyph { font-weight: var(--fw-bold); color: var(--warn-ink); flex: none; }
.measure-how { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.measure-history { margin-bottom: var(--space-4); }
.measure-table th[scope="row"] { white-space: nowrap; text-align: left; }

/* Bodyweight beside a bodyweight lift: context, never part of the set. */
.bw-note {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  margin: 0; font-size: var(--text-sm); color: var(--text-secondary);
}
.bw-note-label {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: var(--fw-semi);
}
.bw-note-value { font-weight: var(--fw-semi); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bw-note-sub { font-size: var(--text-xs); color: var(--muted); }
.bw-note.is-missing { font-size: var(--text-xs); color: var(--muted); }
.bw-tag { grid-column: 1 / -1; font-size: var(--text-2xs); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Body charts: where you started is the line that matters. */
.chart-svg .ref-start { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 3 3; }
.key-mark.key-start { background: repeating-linear-gradient(90deg, var(--axis) 0 3px, transparent 3px 6px); }
.chart-compare .series-line { stroke: var(--series); }
.chart-compare .series-dot { fill: var(--series); }
.chart-compare .series-label { fill: var(--series); font: var(--fw-semi) var(--text-3xs) var(--font); font-variant-numeric: tabular-nums; }
.measure-chart-card { margin-bottom: var(--space-4); }
.measure-chart-card .chips { margin-bottom: var(--space-1); }
.measure-tiles .stat.is-pickable { cursor: pointer; }
.measure-tiles .stat.is-picked { border-color: var(--series-1); box-shadow: 0 0 0 1px var(--series-1) inset; }

/* Hard sets per muscle: the usual range drawn into each track. */
.muscle-range {
  position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--good) 22%, transparent);
}
.muscle-bars .balance-fill { position: relative; }
.muscle-chips .chip { min-height: 36px; }
.muscle-editor .field-label + .chips { margin-bottom: var(--space-2); }

/* The two answers a set needs: highlighted when missing, never greyed out. */
.btn-save.is-blocked { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border-strong); }
.needs-answer { outline: 2px solid var(--warning); outline-offset: 4px; border-radius: var(--radius-sm); }
.day-check { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.day-check.is-done {
  flex-direction: row; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: var(--text-secondary);
}
.day-check.is-done .link-btn { margin-left: auto; }
/* Fixed trailing columns so every track starts and ends in the same place. */
.muscle-bars .balance-row { grid-template-columns: minmax(78px, 1fr) 2fr 30px 92px; }
.muscle-bars .status-chip { justify-content: center; }

/* ------------------------------------------------------- fewer taps, less to read */

/* Sized for a 440 pt wide phone (iPhone 16 Pro Max) first: a 16 pt gutter, every
   target at least 44 pt, and the things a set needs inside the thumb's reach. */
main {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.view { gap: var(--space-5); }
.view-head { display: flex; flex-direction: column; gap: var(--space-1); }

/* Next: the day's facts are a line under the title, not a card of their own. */
.view-head .day-strip { padding: 0; background: none; font-size: var(--text-xs); gap: var(--space-1); }

/* Log: title and date share one row. */
.log-head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); }
.log-head .date-row { gap: var(--space-2); flex: 0 1 auto; min-width: 0; }
.log-head .chip { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.log-head .date-input { flex: 0 1 132px; min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }

/* A check-in prompt is one row with its two buttons. */
.measure-prompt { padding: var(--space-4) var(--space-5); gap: var(--space-3); align-items: center; flex-wrap: nowrap; }
.measure-prompt-text { flex: 1 1 auto; gap: 0; }
.measure-prompt-text strong { font-size: var(--text-sm); }
.measure-prompt-text span { font-size: var(--text-xs); }

/* Next: a closed card is one row — the plan, and a button that logs it. */
.card-head-row { display: flex; align-items: center; }
.card-head-row > .card-head { flex: 1; min-width: 0; }
.card-quick { flex: none; margin-right: var(--space-5); min-width: 64px; min-height: 40px; }
.card-plan { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); }
.card-plan-value { font-size: var(--text-md); font-weight: var(--fw-semi); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.card-meta.done-line { display: flex; gap: var(--space-2); align-items: baseline; }
.card-head-row .card-chevron { display: none; }
.card.is-open .card-head-row .card-chevron,
.card-head-row:not(:has(.card-quick)) .card-chevron { display: block; }

/* Log: the check-in is two answers on one row. */
.day-check { gap: var(--space-3); padding: var(--space-5); }
.day-check-row { display: grid; grid-template-columns: minmax(132px, 0.8fr) 1.2fr; gap: var(--space-4); align-items: end; }
.day-check-row .stepper-btn { width: 34px; }
.day-check-row .chips { gap: var(--space-1); flex-wrap: nowrap; }
.day-check-row .chip { flex: 1; min-width: 0; justify-content: center; padding: 0; flex-direction: column; gap: 0; min-height: var(--tap); }
.day-check-row .chip small { font-size: var(--text-3xs); line-height: 1; }

/* Log: the lift list, grouped by readiness. */
.lift-picker { gap: var(--space-3); }
.picker-groups { display: flex; flex-direction: column; gap: var(--space-4); }
.picker-group { display: flex; flex-direction: column; gap: var(--space-2); }
.picker-group-title { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: var(--fw-semi); }

/* The rail is the lift switcher once a lift is chosen. */
.rail { margin-bottom: 0; padding: var(--space-3) var(--space-4); }
.rail-seg { min-height: var(--tap); }
.rail-add {
  flex: none; align-self: stretch; min-width: 72px; min-height: var(--tap);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: none; color: var(--series-1); font-size: var(--text-sm); font-weight: var(--fw-semi);
  cursor: pointer; touch-action: manipulation;
}
.rail-add.is-open { border-style: solid; color: var(--text-secondary); }

/* The form: RIR and the log button stay under the thumb. */
.card-form { overflow: visible; }
.log-dock {
  position: sticky; z-index: 5;
  bottom: calc(70px + env(safe-area-inset-bottom) + var(--dock-h, 0px));
  display: flex; flex-direction: column; gap: var(--space-3);
  margin: 0 calc(-1 * var(--space-6)); padding: var(--space-4) var(--space-6);
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
.rir-block .chips { gap: var(--space-2); }
.rir-block .chip { flex: 1; justify-content: center; min-height: var(--tap); padding: 0; font-weight: var(--fw-semi); }
.rir-block .field-label { font-size: var(--text-2xs); }
.btn-save { min-height: 52px; font-size: var(--text-md); }
.preview { padding-top: var(--space-3); }
.preview-value { font-size: var(--text-2xl); }
.form-body .disclose { margin-top: 0; }
.mode-row { padding-top: var(--space-2); }

/* Once a lift is done: the next one, one tap away. */
.next-up { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.next-up-label { width: 100%; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: var(--fw-semi); }
.next-up-btn { min-height: var(--tap); }

/* Setup: the name is the first thing in an open lift. */
.name-input { font-size: var(--text-md); font-weight: var(--fw-semi); }

.measure-prompt, .day-check { margin-bottom: 0; }
.card.is-open .card-head-row .card-chevron { transform: rotate(180deg); color: var(--text-primary); }
.log-dock.is-finished { position: static; }
.rail-head { align-items: center; }
.rail-head .rail-total { flex: 1; min-width: 0; }

/* Adjusting a top set + back-offs: the top set's options, one row. */
.topset-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.topset-option {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-0);
  min-height: 64px; padding: var(--space-3) var(--space-1); border: 0; border-radius: var(--radius-sm);
  background: var(--band-tint, var(--neutral-tint)); color: var(--band-ink, var(--text-primary));
  cursor: pointer; touch-action: manipulation; font-variant-numeric: tabular-nums;
}
.topset-option.is-pick { box-shadow: inset 0 0 0 2px var(--series-1); }
.topset-option-reps { font-size: var(--text-xs); font-weight: var(--fw-semi); color: var(--text-secondary); }
.topset-option-weight { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-primary); }
.topset-backoff-now { font-size: var(--text-sm); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
.topset-pcts .chip { flex: 1; justify-content: center; min-height: var(--tap); padding: 0; }


/* ---------------------------------------------------------------- accents

   The accent is a choice, made in Setup → Appearance and stored with the
   theme. Only the accent moves: the verdict colours (green, amber, red) and
   each lift's identity dot never do, because they carry meaning. Blue is the
   palette above and needs no block. Each accent declares its light values
   here and its dark values twice, the same way the base palette does. */

:root[data-accent="violet"] {
  --series-1: #7444d6; --series-1-deep: #6338bd; --series-wash: rgba(116, 68, 214, 0.1);
  --pop-2: #d63384; --on-accent: #fff;
}
:root[data-accent="pink"] {
  --series-1: #d02f7d; --series-1-deep: #b5246a; --series-wash: rgba(208, 47, 125, 0.1);
  --pop-2: #e0661b; --on-accent: #fff;
}
:root[data-accent="orange"] {
  --series-1: #d4580f; --series-1-deep: #b94a0a; --series-wash: rgba(212, 88, 15, 0.1);
  --pop-2: #d02f7d; --on-accent: #fff;
}
:root[data-accent="teal"] {
  --series-1: #0e857f; --series-1-deep: #0a6f6a; --series-wash: rgba(14, 133, 127, 0.1);
  --pop-2: #2a78d6; --on-accent: #fff;
}
:root[data-accent="graphite"] {
  --series-1: #2f3238; --series-1-deep: #1f2125; --series-wash: rgba(47, 50, 56, 0.1);
  --pop-2: #6b7280; --on-accent: #fff;
}
@media (prefers-color-scheme: dark) {
  :root[data-accent="violet"]:not([data-theme="light"]) {
    --series-1: #9b74ef; --series-1-deep: #c6b0f7; --series-wash: rgba(155, 116, 239, 0.16);
  --pop-2: #ec5fa3; --on-accent: #fff;
  }
  :root[data-accent="pink"]:not([data-theme="light"]) {
    --series-1: #ec5fa3; --series-1-deep: #f5a3c9; --series-wash: rgba(236, 95, 163, 0.16);
  --pop-2: #f2803a; --on-accent: #fff;
  }
  :root[data-accent="orange"]:not([data-theme="light"]) {
    --series-1: #f2803a; --series-1-deep: #f8b98e; --series-wash: rgba(242, 128, 58, 0.16);
  --pop-2: #ec5fa3; --on-accent: #1a0d04;
  }
  :root[data-accent="teal"]:not([data-theme="light"]) {
    --series-1: #22b3ac; --series-1-deep: #8fdcd7; --series-wash: rgba(34, 179, 172, 0.16);
  --pop-2: #3987e5; --on-accent: #03201e;
  }
  :root[data-accent="graphite"]:not([data-theme="light"]) {
    --series-1: #e4e5e8; --series-1-deep: #ffffff; --series-wash: rgba(228, 229, 232, 0.16);
  --pop-2: #9ca3af; --on-accent: #111214;
  }
}
:root[data-theme="dark"][data-accent="violet"] {
  --series-1: #9b74ef; --series-1-deep: #c6b0f7; --series-wash: rgba(155, 116, 239, 0.16);
  --pop-2: #ec5fa3; --on-accent: #fff;
}
:root[data-theme="dark"][data-accent="pink"] {
  --series-1: #ec5fa3; --series-1-deep: #f5a3c9; --series-wash: rgba(236, 95, 163, 0.16);
  --pop-2: #f2803a; --on-accent: #fff;
}
:root[data-theme="dark"][data-accent="orange"] {
  --series-1: #f2803a; --series-1-deep: #f8b98e; --series-wash: rgba(242, 128, 58, 0.16);
  --pop-2: #ec5fa3; --on-accent: #1a0d04;
}
:root[data-theme="dark"][data-accent="teal"] {
  --series-1: #22b3ac; --series-1-deep: #8fdcd7; --series-wash: rgba(34, 179, 172, 0.16);
  --pop-2: #3987e5; --on-accent: #03201e;
}
:root[data-theme="dark"][data-accent="graphite"] {
  --series-1: #e4e5e8; --series-1-deep: #ffffff; --series-wash: rgba(228, 229, 232, 0.16);
  --pop-2: #9ca3af; --on-accent: #111214;
}

/* ------------------------------------------------------------- Bold style

   The default look. Same layout, same tokens, more energy: the accent runs
   as a gradient into its partner colour, the headline numbers carry it, and
   things that are pressed or land spring rather than fade. "Clean" in Setup
   switches all of this off and leaves the original, quieter design. */
:root[data-style="bold"] {
  --radius: 18px;
  --radius-sm: 12px;
  --pop: linear-gradient(135deg, var(--series-1) 0%, var(--pop-2) 100%);
  --glow: 0 8px 20px -8px color-mix(in srgb, var(--series-1) 70%, transparent);
}

[data-style="bold"] .view-head h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.035em; }

[data-style="bold"] .btn-primary,
[data-style="bold"] .fab,
[data-style="bold"] .chip.is-selected {
  background: var(--pop); border-color: transparent; box-shadow: var(--glow);
}
[data-style="bold"] .btn-primary { font-weight: var(--fw-bold); }
[data-style="bold"] .btn-primary.is-blocked,
[data-style="bold"] .btn-primary[aria-disabled="true"] { background: var(--surface-2); box-shadow: none; }
[data-style="bold"] .btn,
[data-style="bold"] .chip,
[data-style="bold"] .seg,
[data-style="bold"] .topset-option,
[data-style="bold"] .pick { transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease; }
[data-style="bold"] .btn:active,
[data-style="bold"] .chip:active,
[data-style="bold"] .topset-option:active,
[data-style="bold"] .pick:active { transform: scale(0.94); }

/* The numbers that matter wear the accent. */
[data-style="bold"] .presc-hero .presc-weight,
[data-style="bold"] .hero-value,
[data-style="bold"] .preview-value .preview-num {
  background: var(--pop); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
[data-style="bold"] .card-plan-value { font-weight: var(--fw-bold); }

/* Progress you can see fills with the gradient too. */
[data-style="bold"] .rail-seg-fill,
[data-style="bold"] .rail-total-fill { background: var(--pop); }
[data-style="bold"] .rail-seg.is-complete .rail-seg-fill,
[data-style="bold"] .rail-total.is-complete .rail-total-fill { background: var(--good); }

/* The current tab sits on a pill of its accent. */
[data-style="bold"] .tab.is-active { background: var(--series-wash); }
[data-style="bold"] .tab.is-active .tab-icon { stroke-width: 2.4; }

/* An open card lifts off the page a little. */
[data-style="bold"] .card.is-open { box-shadow: var(--glow), var(--shadow); border-color: color-mix(in srgb, var(--series-1) 35%, var(--border)); }

/* A set landing: the button gives a little bounce. */
.btn-save.is-landed { animation: landed var(--dur-slow) var(--ease-spring) both; }
@keyframes landed {
  0% { transform: scale(1); }
  35% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------ the PR moment */

.pr-burst {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--plane) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pr-fade 2600ms ease both;
}
.pr-burst-card {
  position: relative; overflow: hidden; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  width: min(360px, 100%); padding: 28px 22px 24px; border-radius: 28px;
  background: linear-gradient(140deg, var(--series-1), var(--pop-2));
  color: var(--on-accent);
  box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--series-1) 80%, transparent);
  animation: pr-pop 700ms var(--ease-spring) both;
}
/* Rays turning slowly behind the trophy. */
.pr-burst-card::before {
  content: ""; position: absolute; inset: -60%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.16) 0deg 10deg, transparent 10deg 30deg);
  animation: pr-spin 6s linear infinite;
}
.pr-burst-card > * { position: relative; }
.pr-burst-trophy { font-size: 64px; line-height: 1; animation: pr-trophy 900ms var(--ease-spring) 120ms both; }
.pr-burst-kicker { font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.9; }
.pr-burst-lift { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.pr-burst-value { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pr-burst-sub { font-size: var(--text-sm); font-weight: 600; opacity: 0.9; }
.pr-burst-hint { margin-top: var(--space-3); font-size: var(--text-2xs); opacity: 0.75; }

@keyframes pr-fade { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pr-pop { 0% { transform: scale(0.4) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.06) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes pr-trophy { 0% { transform: translateY(30px) scale(0.3); } 100% { transform: none; } }
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* Confetti in the accent's own colours, beside the verdict ones. */
.confetti-4 { background: var(--pop-2); width: 8px; height: 8px; border-radius: 50%; }
.confetti-5 { background: linear-gradient(var(--series-1), var(--pop-2)); width: 5px; height: 16px; }

/* Setup: the accent swatches. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  min-width: 56px; padding: var(--space-2) var(--space-1); border: 0; background: none;
  font-size: var(--text-2xs); font-weight: var(--fw-semi); color: var(--text-secondary);
  cursor: pointer; touch-action: manipulation;
}
.swatch-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sw-1), var(--sw-2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.swatch.is-selected { color: var(--text-primary); }
.swatch.is-selected .swatch-dot { box-shadow: 0 0 0 2px var(--plane), 0 0 0 4px var(--sw-1); transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .pr-burst, .pr-burst-card, .pr-burst-trophy, .pr-burst-card::before, .btn-save.is-landed { animation: none !important; }
}