/* =================================================================
   FIRE YOUR COACH — APP DESIGN SYSTEM (Fieldhouse v1)
   Shared CSS for the app-system visual gallery.

   Consumed by:
     - app-system.html  (foundation: tokens, primitives, chrome, notes)
     - home.html        (Home / Insights states)
     - plan.html        (Plan tab + day-card variants)
     - today.html       (Today tab + readiness gate + soreness)
     - history.html     (History tab + row-detail sheet)
     - session.html     (In-session UX)
     - onboarding.html  (Sign-in + intake + CSV import)
     - system.html      (System surfaces: boot, settings, FAB, recap, etc.)

   STRUCTURE
     1. TOKENS                — :root variables, full Fieldhouse scale
     2. RESET + BASE          — minimal reset, body, links, scrollbars
     3. TYPE UTILITIES        — display, body, mono, eyebrows, labels
     4. PRIMITIVES            — buttons, chips, cards, sheets, pills
     5. APP CHROME            — header (chalk + scoreboard), tape, nav, FAB
     6. COMPONENTS            — coach-note, plan-strip, scoreboards,
                                day-card variants, screen-section, etc.
     7. SCREEN SCAFFOLDS      — phone frame, scoreboards, ink hero
     8. SECTION-SPECIFIC      — in-session UX, intake, sign-in,
                                CSV import, boot loader, plan-finale,
                                handoff card, etc.

   Tokens are also mirrored in tokens.css (drop-in for app/src/web/app.css).
   ================================================================= */
/* =================================================================
   FIRE YOUR COACH — APP DESIGN SYSTEM (Fieldhouse v1)
   Single-file source of truth. Self-contained, no external CSS.

   STRUCTURE
     1. TOKENS                — :root variables, full Fieldhouse scale
     2. RESET + BASE          — minimal reset, body, links, scrollbars
     3. TYPE UTILITIES        — display, body, mono, eyebrows, labels
     4. PRIMITIVES            — buttons, chips, cards, sheets, pills
     5. APP CHROME            — header (chalk + scoreboard), tape, nav, FAB
     6. COMPONENTS            — coach-note, plan-strip, scoreboards,
                                radar, programming bars, lift cards,
                                day-card, calendar, lift-row, PVA table
     7. SCREENS               — Home / Plan / Today / History tweaks
     8. GALLERY LAYOUT        — doc shell, section anchors, phone frame
     9. LIVE SHELL            — single-phone interactive demo
    10. REDUCED MOTION        — accessibility overrides

   CONVENTIONS
     - BEM-ish: .block, .block__elem, .block--variant
     - Hard-cut by default (radius-0), soft only for inputs (radius-1)
     - Touch targets ≥ 48px (--touch-rec)
     - Display = Oswald 700 uppercase, body = Inter 400, data = JetBrains Mono
     - One accent (oxblood). Status colors are semantic-only (success/yellow/red).
   ================================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand palette */
  --fyc-oxblood:       #C8391F;
  --fyc-oxblood-deep:  #A52913;
  --fyc-oxblood-light: #E14A35;
  --fyc-ink:           #111111;
  --fyc-steel:         #2B2B2E;
  --fyc-chalk:         #F2EDE2;
  --fyc-chalk-deep:    #E3DCCB;
  --fyc-stone:         #6F6A5F;
  --fyc-white:         #FFFFFF;

  /* Semantic surface & text (chalk / light surface) */
  --bg:           var(--fyc-chalk);
  --bg-elevated:  var(--fyc-chalk-deep);
  --bg-subtle:    #EDE7D9;
  --border:       rgba(17,17,17,0.18);
  --border-faint: rgba(17,17,17,0.10);
  --text:         var(--fyc-ink);
  --text-muted:   var(--fyc-stone);
  --text-faint:   #6E695E;
  --error-ink:    #B5331C;
  --text-on-accent: var(--fyc-chalk);

  /* Accent + states */
  --accent:        var(--fyc-oxblood);
  --accent-hover:  var(--fyc-oxblood-deep);
  --accent-light:  rgba(200, 57, 31, 0.08);
  --accent-light-2:rgba(200, 57, 31, 0.16);

  /* Status (kept neutral; distinct from brand red) */
  --success:    #1F6B3A;
  --success-bg: rgba(31, 107, 58, 0.10);
  --yellow:     #8A5A12;
  --yellow-bg:  rgba(138, 90, 18, 0.10);
  --amber:        #B45309;                /* skipped sessions, mid-soreness, deload CTA */
  --amber-hover:  #933D08;                /* deload CTA hover — slightly darker amber */
  --amber-bg:     rgba(180, 83, 9, 0.10);
  --red:        #B4281A;                  /* error only, NOT brand red */
  --red-bg:     rgba(180, 40, 26, 0.08);
  --purple:     #4B3B8F;                  /* swap deviations */
  --purple-bg:  rgba(75, 59, 143, 0.08);

  /* Ink-surface tokens (scoreboard, ink hero, deload card, rest timer) */
  --ink-bg:           var(--fyc-ink);
  --ink-bg-elevated:  var(--fyc-steel);
  --ink-text:         var(--fyc-chalk);
  --ink-text-muted:   rgba(242, 237, 226, 0.60);
  --ink-text-faint:   rgba(242, 237, 226, 0.55);
  --ink-border:       rgba(242, 237, 226, 0.12);
  --ink-accent:       var(--fyc-oxblood-light);

  /* Typography stack */
  --font-display: 'Oswald','Inter Tight',-apple-system,system-ui,sans-serif;
  --font-body:    'Inter',-apple-system,system-ui,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* Tracking */
  --display-tracking: 0.005em;
  --display-weight:   700;
  --label-tracking:   0.14em;   /* small-caps labels */
  --eyebrow-tracking: 0.18em;   /* section eyebrows */
  --mono-tracking:    0.04em;

  /* Type scale */
  --size-xs:  11px;   /* mono labels */
  --size-sm:  13px;   /* secondary body */
  --size-md:  15px;   /* body default */
  --size-lg:  17px;   /* emphasis body */
  --size-xl:  21px;   /* section title */
  --size-2xl: 28px;   /* screen title */
  --size-3xl: 36px;   /* display */
  --size-4xl: 48px;   /* hero ink display */

  /* Spacing — strict 4pt grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 56px;

  /* Geometry — Fieldhouse is hard-cut by default */
  --radius-0:    0px;        /* default: cards, buttons, sheets, chips */
  --radius-1:    2px;        /* inputs only */
  --radius-pill: 9999px;     /* readiness pill, RPE chip */

  /* Border weights */
  --rule-hairline:      1px;
  --rule-medium:        1.5px;     /* scoreboard outers, framed cards */
  --rule-double-offset: 6px;       /* gap for double-rule pattern */

  /* Elevation — used sparingly, brand prefers rules over shadow */
  --shadow-sm:    0 1px 2px rgba(17,17,17,0.08);
  --shadow-md:    0 4px 12px rgba(17,17,17,0.10);
  --shadow-frame: 0 12px 32px rgba(17,17,17,0.12);  /* gallery phone frames only */
  --shadow-red:   0 18px 40px -14px rgba(165, 41, 19, 0.45);

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);  /* default */
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);    /* timer, progress */
  --dur-fast:   120ms;     /* press */
  --dur-base:   240ms;     /* hover, chip toggle */
  --dur-screen: 400ms;     /* tab transition */
  --dur-sheet:  480ms;     /* bottom sheet */

  /* Layout */
  --app-max-w: 480px;       /* phone width cap on desktop */
  --phone-w:   400px;       /* gallery phone frame */
  --phone-h:   880px;       /* gallery phone frame */
  --nav-h:     56px;
  --header-h:  48px;
  --touch-min: 44px;
  --touch-rec: 48px;
}

/* ---------- 2. RESET + BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--size-md);
  line-height: 1.5;
  color: var(--text);
  background: #DCD5C2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 56px 24px 96px;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink-text); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 3. TYPE UTILITIES ---------- */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  line-height: 1.0;
}
.t-display em { font-style: normal; color: var(--accent); }
.t-display--ink em { color: var(--ink-accent); }

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
}
.t-body strong { font-weight: 600; color: var(--accent); }

.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--mono-tracking);
}

/* Eyebrow — mono micro-label, often paired with leading rule */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow--display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--eyebrow-tracking);
}
.eyebrow--rule::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
.eyebrow--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: currentColor;
}
.eyebrow--on-ink { color: var(--ink-accent); }
.eyebrow--muted { color: var(--text-muted); }

/* Small-caps label */
.label-sc {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.label-sc--accent { color: var(--accent); }
.label-sc--muted  { color: var(--text-muted); }
.label-sc--amber  { color: var(--amber); }

/* ---- Color utilities ----
   Single-purpose color classes for ad-hoc emphasis on non-componented elements
   (spans, ems, divs without a named class). Replace inline style="color: var(--X);"
   with one of these. For named components (.day-card, .frame-tag, .label-sc, etc.)
   prefer a component modifier (e.g. .frame-tag--amber, .day-card--deload) over a
   generic utility — keeps the chrome scoped to the component contract.
   Inline color/background/border-color overrides on classed elements are flagged
   by lint-design-system.sh. */
.is-accent { color: var(--accent); }
.is-amber  { color: var(--amber); }
.is-red    { color: var(--red); }
.is-yellow { color: var(--yellow); }
.is-purple { color: var(--purple); }
.is-success { color: var(--success); }
.is-text   { color: var(--text); }
.is-muted  { color: var(--text-muted); }
.is-faint  { color: var(--text-faint); }

/* ---------- 8. GALLERY LAYOUT ---------- */
.doc-wrap { max-width: 1280px; margin: 0 auto; }

.doc-head { margin-bottom: var(--space-8); }
.doc-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.doc-kicker b { color: var(--accent); font-weight: 700; }
.doc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  line-height: 1.0;
  margin-bottom: var(--space-3);
}
.doc-title em { font-style: normal; color: var(--accent); }
.doc-lede {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.55;
}
.doc-lede strong { color: var(--text); font-weight: 600; }

/* Sticky table of contents */
.doc-toc {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(220, 213, 194, 0.92);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  margin: 0 -24px var(--space-8);
  padding: var(--space-3) 24px;
  border-bottom: 1px solid var(--border-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
}
.doc-toc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.doc-toc a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.doc-toc a:hover { color: var(--accent); }

/* Section anchor */
.proto-section {
  margin-bottom: var(--space-12);
  scroll-margin-top: 80px;
}
.proto-section + .proto-section { padding-top: var(--space-8); border-top: 1.5px solid var(--text); }

/* Doc/spec cross-reference link. Default = accent (oxblood); --text modifier flips
   to body text. Replaces repeated `style="text-decoration: underline; text-underline-offset: 3px;"`
   inline patterns across the design-system spec pages. */
.proto-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.proto-link--text { color: var(--text); }
.proto-link--muted { color: var(--text-muted); }

.proto-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.proto-h1::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.proto-h1 em { font-style: normal; color: var(--accent); }
.proto-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.55;
  margin-bottom: var(--space-6);
}
.proto-sub strong { color: var(--text); font-weight: 600; }
.proto-sub code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  padding: 1px 5px;
}

.proto-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: var(--space-8) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1.5px solid var(--text);
}
/* Sub-section heading inside a specimen — chalk text, no rule. */
.proto-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--space-3);
}

/* Specimen panel — used for primitives, chrome, token swatches */
.specimen {
  background: var(--bg);
  border: 1px solid var(--border-faint);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
}
.specimen-cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.specimen-cap code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 700;
}
.specimen-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.specimen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.specimen-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.specimen-on-ink {
  background: var(--ink-bg);
  color: var(--ink-text);
  border-color: var(--ink-bg);
}
.specimen-on-ink .specimen-cap { color: var(--ink-text-muted); }

/* Token swatch */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}
.swatch {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-faint);
  background: var(--bg);
  min-height: 64px;
}
.swatch-chip {
  width: 56px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-faint);
}
.swatch-meta {
  flex: 1;
  padding: 8px 10px 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.swatch-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.swatch-var {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swatch-hex {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Type ramp row */
.ramp-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-faint);
}
.ramp-row:last-child { border-bottom: none; }
.ramp-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  line-height: 1.4;
}
.ramp-meta b { color: var(--accent); font-weight: 700; }
.ramp-sample {
  color: var(--text);
  line-height: 1.0;
}
.ramp-sample.body-line { line-height: 1.55; }

/* Spacing scale demo */
.space-row {
  display: grid;
  grid-template-columns: 80px auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}
.space-bar { background: var(--accent); height: 8px; }
.space-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.space-meta b { color: var(--text); font-weight: 700; }

/* Frames — phone gallery layout */
.frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--space-8);
  align-items: start;
}
.frame-set { display: flex; flex-direction: column; gap: var(--space-2); }
.frame-cap-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}
.frame-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 8px 2px;
  background: var(--bg);
  border: 1px solid var(--accent);
}
.frame-tag--ink { color: var(--ink-text); background: var(--ink-bg); border-color: var(--ink-bg); }
.frame-tag--muted { color: var(--text-muted); border-color: var(--border); }
.frame-tag--amber { color: var(--amber); border-color: var(--amber); }
.frame-tag--red { color: var(--red); border-color: var(--red); }
.frame-tag--purple { color: var(--purple); border-color: var(--purple); }
.frame-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.frame-help {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.phone {
  width: var(--phone-w);
  height: var(--phone-h);
  background: var(--bg);
  border: 1px solid rgba(17,17,17,0.25);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone button,
.phone input,
.phone textarea {
  -webkit-appearance: none;
  appearance: none;
}
.phone input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  filter: invert(0.2);
}
.phone--tall { height: 940px; }
.phone-inner-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.phone-inner-scroll::-webkit-scrollbar { width: 0; }

/* Notes panel — used for design-notes sidebars */
.notes-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: var(--space-6);
  font-family: var(--font-body);
  align-self: start;
}
.notes-panel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1.5px solid var(--text);
}
.notes-panel h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: var(--space-4) 0 var(--space-2);
}
.notes-panel p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin-bottom: var(--space-2); }
.notes-panel ul { margin: 4px 0 8px 18px; }
.notes-panel li { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-bottom: 4px; }
.notes-panel b { color: var(--text); font-weight: 600; }
.notes-panel em { color: var(--accent); font-style: normal; font-weight: 600; }
.notes-panel code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-elevated);
  padding: 1px 5px;
  letter-spacing: 0.02em;
}

/* Mapping table — primitive class → legacy class */
.legacy-map {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.legacy-map th, .legacy-map td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-faint);
  vertical-align: top;
}
.legacy-map th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1.5px solid var(--text);
}
.legacy-map td.cls {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.legacy-map td.cls-legacy { color: var(--text-muted); }

/* ---------- 4. PRIMITIVES ---------- */

/* ---- 4.1 Buttons ---- */
.btn {
  --btn-bg:        var(--accent);
  --btn-bg-hover:  var(--accent-hover);
  --btn-fg:        var(--ink-text);
  --btn-border:    transparent;
  --btn-min-h:     48px;
  --btn-pad-y:     14px;
  --btn-pad-x:     20px;
  --btn-fs:        13px;
  --btn-tracking:  0.14em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-0);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--btn-fs);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  min-height: var(--btn-min-h);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: scale(0.99); }
.btn:disabled {
  --btn-bg: var(--bg-elevated);
  --btn-bg-hover: var(--bg-elevated);
  --btn-fg: var(--text-faint);
  --btn-border: var(--border);
  cursor: not-allowed;
  transform: none;
}
.btn--on-ink:disabled {
  --btn-bg: var(--ink-border);
  --btn-bg-hover: var(--ink-border);
  --btn-fg: var(--ink-text-muted);
  --btn-border: var(--ink-border);
}
/* Loading / pending — async actions (generate, send, save). No spinner: an
   indeterminate rail (foreground color) sweeps the base, echoing the boot loader.
   Keeps the variant's fill (a loading CTA still reads as the CTA); the caller
   toggles .is-loading + aria-busy, and may swap the label to "Generating…". */
.btn.is-loading { pointer-events: none; position: relative; overflow: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: currentColor;
  animation: btn-loading 900ms var(--ease-snap) infinite;
}
@keyframes btn-loading {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation: none; width: 100%; }
}
.btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.btn--block { display: flex; width: 100%; justify-content: center; }
.btn--cta {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-height: 52px;
}
.btn--cta-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.85;
  text-transform: uppercase;
}
.btn--primary {
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-fg: var(--ink-text);
}
/* Severe-soreness swap CTA — purple matches the .gate-adjustment--purple recommendation panel. */
.btn--cta-purple {
  --btn-bg: var(--purple);
  --btn-bg-hover: var(--purple);
  --btn-fg: var(--ink-text);
}
.btn--on-ink {
  --btn-bg: var(--ink-accent);
  --btn-bg-hover: #ec5e4a;
  --btn-fg: var(--ink-bg);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  min-height: var(--touch-rec);
}
.btn--ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn--ghost-on-ink {
  --btn-bg: transparent;
  --btn-bg-hover: transparent;
  --btn-fg: var(--ink-text);
  --btn-border: var(--ink-border);
}
.btn--ghost-on-ink:hover { color: var(--ink-accent); border-color: var(--ink-accent); }
.btn--secondary-text {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--border);
  padding: 12px 0;
  min-height: var(--touch-rec);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.btn--secondary-text:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* Quiet skip-session escape hatch under the Today alt-list. */
.today-skip { margin-top: 14px; }
.btn--destructive {
  --btn-bg: transparent;
  --btn-bg-hover: var(--red-bg);
  --btn-fg: var(--red);
  --btn-border: var(--red);
}
.btn--sm {
  --btn-min-h: 36px;
  --btn-pad-y: 8px;
  --btn-pad-x: 12px;
  --btn-fs: 11px;
  --btn-tracking: 0.12em;
}
.btn--xs {
  --btn-min-h: 32px;
  --btn-pad-y: 7px;
  --btn-pad-x: 10px;
  --btn-fs: 10px;
  --btn-tracking: 0.12em;
}

/* ---- 4.2 Tape chip ---- */
.tape-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px 2px;
  background: var(--accent);
  color: var(--fyc-chalk);
  line-height: 1.3;
  border-radius: var(--radius-0);
}
.tape-chip--ink   { background: var(--fyc-ink); color: var(--fyc-chalk); }
.tape-chip--steel { background: var(--fyc-steel); color: var(--fyc-chalk); }
.tape-chip--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 2px 7px 1px;
}
.tape-chip--accent-on-ink { background: var(--ink-accent); color: var(--ink-bg); }

/* ---- 4.3 Cards & surfaces ---- */
.card {
  background: var(--bg);
  border: 1px solid var(--border-faint);
  padding: var(--space-4);
  border-radius: var(--radius-0);
}
.card--elevated  { background: var(--bg-elevated); }
.card--ink {
  background: var(--ink-bg);
  color: var(--ink-text);
  border-color: var(--ink-bg);
  /* Mirror .surface-ink token flips so nested .t-body/.is-muted/.eyebrow/etc.
     auto-render ink-themed colors without inline overrides. */
  --bg:           var(--ink-bg);
  --bg-elevated:  var(--ink-bg-elevated);
  --bg-subtle:    rgba(242, 237, 226, 0.06);
  --border:       var(--ink-border);
  --border-faint: rgba(242, 237, 226, 0.08);
  --text:         var(--ink-text);
  --text-muted:   var(--ink-text-muted);
  --text-faint:   var(--ink-text-faint);
  --accent:       var(--ink-accent);
  --accent-light: rgba(225, 74, 53, 0.15);
}
.card--rule-frame {
  border: 1.5px solid var(--text);
  position: relative;
  margin-top: 12px;
}
.card--rule-frame > .tape-chip {
  position: absolute;
  top: -10px;
  left: 12px;
}
.card--rule-frame > .tape-chip--right {
  left: auto;
  right: 12px;
}
.card--accent-rail { border-left: 2px solid var(--accent); }
.card--accent-rail--amber { border-left-color: var(--amber); }
.card--accent-rail--red { border-left-color: var(--red); }
.card--accent-rail--purple { border-left-color: var(--purple); }
.card--accent-rail--muted { border-left-color: var(--text-muted); }
/* Elevated card surface — sits on a bg-elevated background. Used when the card
   needs to stand out one notch from the surrounding chalk surface. */
.card--elevated { background: var(--bg-elevated); }

/* surface-ink utility — flips semantic tokens for nested components */
.surface-ink {
  background: var(--ink-bg);
  color: var(--ink-text);
  --bg:           var(--ink-bg);
  --bg-elevated:  var(--ink-bg-elevated);
  --bg-subtle:    rgba(242, 237, 226, 0.06);
  --border:       var(--ink-border);
  --border-faint: rgba(242, 237, 226, 0.08);
  --text:         var(--ink-text);
  --text-muted:   var(--ink-text-muted);
  --text-faint:   var(--ink-text-faint);
  --accent:       var(--ink-accent);
  --accent-light: rgba(225, 74, 53, 0.15);
}

/* ---- 4.4 Section header ---- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1.5px solid var(--text);
  gap: var(--space-3);
}
.section-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: var(--display-tracking);
  line-height: 1.2;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.section-q em { font-style: normal; color: var(--accent); }
.section-aside {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  white-space: nowrap;
}
.info-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: -1px;
  margin-left: 4px;
  cursor: pointer;
  color: var(--text-faint);
}
.info-icon:hover { color: var(--accent); }
.info-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 4.5 Coach note ---- */
.coach-note {
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
  padding: 16px 18px 14px;
  position: relative;
}
.coach-note__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.coach-note__tag { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.coach-note__tag svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coach-note__date { color: var(--text-faint); font-weight: 500; letter-spacing: 0.06em; }
.coach-note__lead {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: var(--display-tracking);
  margin-bottom: 12px;
}
.coach-note__lead em { font-style: normal; color: var(--accent); font-weight: 700; }
.coach-bullets { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 0; }
.coach-bullets li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.coach-bullets li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--bullet-color, var(--accent));
}
.coach-bullets li em { font-style: normal; font-weight: 700; color: var(--accent); }
.coach-note__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-faint);
}
.coach-note__foot-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coach-note__foot-cell.right { align-items: flex-end; text-align: right; }
.coach-note__foot-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 600;
}
.coach-note__foot-label svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.6; opacity: 0.7; }
.coach-note__foot-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.04em;
  font-weight: 500;
  white-space: nowrap;
}
.coach-note__foot-value.is-accent { color: var(--accent); font-weight: 700; }

/* Compact variant — predefined per-block note, current shipping version.
   No display-font lede, no bullets, no foot grid. The rich variant above
   is queued for the weekly-insights cron (see notes panel in plan.html). */
.coach-note--compact {
  padding: 12px 16px 12px;
}
.coach-note--compact .coach-note__head { margin-bottom: 6px; }
.coach-note--compact .coach-note__body {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.coach-note--compact .coach-note__body em { font-style: normal; color: var(--accent); font-weight: 700; }
.coach-note--compact.is-deload { border-left-color: var(--amber); }
.coach-note--compact.is-deload .coach-note__tag { color: var(--amber); }
.coach-note--compact.is-deload .coach-note__body em { color: var(--amber); }

/* ---- Deload theme · screen-level cascade ----
   .is-deload on a screen container (screen-body / phone-inner-scroll) flips the
   surrounding amber chrome — date-strip eyebrow, today-headline em, today-foot
   link. The .day-card inside still needs its own .day-card--deload modifier
   (the card chrome lives in § 7.10d); .is-deload only owns the chrome OUTSIDE
   the card so deload-aware screens don't repeat inline overrides.
   Used by: today.html (State A · deload), plan.html (State C). */
/* Today-side surfaces */
.is-deload .date-strip__eyebrow { color: var(--amber); }
.is-deload .today-headline em { color: var(--amber); }
.is-deload .today-foot a { color: var(--amber); }
/* Plan-side surfaces — tape-strip header, board, calendar */
.is-deload .tape-strip { background: var(--amber-bg); }
.is-deload .tape-strip__left { color: var(--amber); }
.is-deload .board__eyebrow { color: var(--amber); }
.is-deload .board__title em { color: var(--amber); }
.is-deload .board__tally { color: var(--amber); }
.is-deload .board__rail-fill { background: var(--amber); }
.is-deload .cal-week-label > span:first-child { color: var(--amber); }
/* Deload week's today-cell flips fill + border + selected ring from oxblood to
   amber so the calendar strip reads consistent with the rest of the .is-deload
   cascade (board, day-card chrome, rationale card). Numerals stay chalk via
   the existing .cal-day--today .cal-day__num rule — chalk on amber passes AA. */
.is-deload .cal-day--today {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--amber);
}
.is-deload .cal-day--today.is-selected,
.is-deload .cal-day.is-selected { box-shadow: 0 0 0 2px var(--amber); border-color: var(--amber); }
/* "What deload does" rationale card lives below the day-card in both Today and Plan.
   Flips accent-rail's default oxblood left-border to amber when inside a deload screen. */
.is-deload .card--accent-rail { border-left-color: var(--amber); }
.deload-rationale {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left-color: var(--amber);
}
.deload-rationale__tag {
  margin-bottom: var(--space-1);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.deload-rationale__body {
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  line-height: 1.5;
}
.deload-rationale__body b,
.deload-rationale__body strong {
  font-weight: 600;
}

/* ---- 4.6 Plan strip — context link to active block ---- */
.plan-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--text);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-5);
}
.plan-strip:hover { background: var(--accent-light); }
.plan-strip__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-text);
}
.plan-strip__icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-strip__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.plan-strip__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.plan-strip__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-strip__name em { font-style: normal; color: var(--accent); }
.plan-strip__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.plan-strip__arrow {
  color: var(--accent);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

/* ---- 4.7 Scoreboard grid (2- or 4-cell) ---- */
.scoreboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1.5px solid var(--text);
}
.scoreboard--cols-3 { grid-template-columns: repeat(3, 1fr); }
.scoreboard__cell {
  border-right: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  padding: 12px 12px 11px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.scoreboard__cell:nth-child(2n) { border-right: 0; }
.scoreboard--cols-3 .scoreboard__cell:nth-child(2n) { border-right: 1px solid var(--border-faint); }
.scoreboard--cols-3 .scoreboard__cell:nth-child(3n) { border-right: 0; }
.scoreboard__cell:nth-last-child(-n+2) { border-bottom: 0; }
.scoreboard--cols-3 .scoreboard__cell:nth-last-child(-n+3) { border-bottom: 0; }
.scoreboard__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scoreboard__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--text);
  letter-spacing: var(--display-tracking);
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.scoreboard__value em { font-style: normal; color: var(--accent); }
.scoreboard__unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.scoreboard__delta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.scoreboard__delta svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scoreboard__delta.up { color: var(--success); }
.scoreboard__delta.flat { color: var(--text-muted); }
.scoreboard__delta.dn { color: var(--yellow); }

/* Sparkline — micro bar chart */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-top: 2px; }
.spark > i { display: block; width: 3px; background: var(--accent); opacity: 0.85; }
.spark--lg { height: 24px; gap: 2px; }
.spark--lg > i { flex: 1; min-height: 2px; }

/* ---- 4.8 Tip card ---- */
.tip-card {
  margin-top: 10px;
  padding: 10px 12px 11px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.tip-card__head {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tip-card__close {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.tip-card__close:hover { color: var(--accent); }
.tip-card b { color: var(--text); font-weight: 700; }
.tip-card em { color: var(--accent); font-style: normal; font-weight: 700; }

/* ---- 4.9 Readiness pill (3-state selector) ---- */
.r-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  min-height: 56px;
  border-radius: var(--radius-0);
}
.r-pill:hover { border-color: var(--text-faint); transform: translateY(-1px); }
.r-pill:active { transform: translateY(0) scale(0.98); }
.r-pill__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--text-faint);
  transition: background var(--dur-base), transform var(--dur-base);
}
.r-pill__sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.r-pill--green .r-pill__dot  { background: var(--success); }
.r-pill--yellow .r-pill__dot { background: var(--yellow); }
.r-pill--red .r-pill__dot    { background: var(--accent); }
.r-pill--green.is-active  { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.r-pill--yellow.is-active { border-color: var(--yellow); background: var(--yellow-bg); color: var(--yellow); }
.r-pill--red.is-active    { border-color: var(--accent); background: var(--accent-light); color: var(--accent-hover); }
.r-pill.is-active .r-pill__dot { transform: scale(1.2); }
.r-pill.is-active .r-pill__sub { color: inherit; opacity: 0.8; }

/* ---- 4.10 Soreness chip (4-state cycle) ---- */
.s-chip {
  padding: 12px 8px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 56px;
  border-radius: var(--radius-0);
}
.s-chip:hover { border-color: var(--text-faint); }
.s-chip:active { transform: scale(0.97); }
.s-chip__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--border);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.s-chip[data-level="mild"] {
  border-color: var(--amber);
  background: rgba(180, 83, 9, 0.06);
  color: var(--amber);
}
.s-chip[data-level="mild"] .s-chip__dot { background: var(--amber); }
.s-chip[data-level="moderate"] {
  border-color: var(--amber);
  background: var(--amber-bg);
  color: var(--amber);
  font-weight: 700;
}
.s-chip[data-level="moderate"] .s-chip__dot { background: var(--amber); transform: scale(1.4); }
.s-chip[data-level="severe"] {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-hover);
  font-weight: 700;
}
.s-chip[data-level="severe"] .s-chip__dot { background: var(--accent); transform: scale(1.6); }

/* ---- 4.11 RPE chip (compact pill selector) ---- */
.rpe-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
}
.rpe-chip.is-active { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 700; }

/* ---- 4.12 Bottom sheet ---- */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
  z-index: 80;
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-top: 1.5px solid var(--text);
  border-radius: 0;
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease);
  z-index: 90;
  max-height: 92%;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
}
.sheet::-webkit-scrollbar { width: 0; }
.sheet.is-open { transform: translateY(0); }
.sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  margin: 8px auto 0;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet__close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sheet__close:hover { color: var(--accent); }
.sheet__body { padding: 16px 20px 24px; flex: 1; }

/* Unified header / footer convention so every sheet feels the same. The header
   sits at the top of .sheet__body: an eyebrow (.eyebrow--rule), a title, optional
   sub. Actions stack at the bottom. */
.sheet__header { margin-bottom: 14px; }
.sheet__title {
  margin: 6px 0 0;
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  font-size: 22px; line-height: 1.05; color: var(--text);
}
.sheet__title em { font-style: normal; color: var(--accent); }
.sheet__sub { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.sheet__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

/* Modifier variants (OCPM-190): the base locks handle / close / backdrop / padding /
   border; modifiers only change height + role. `.sheet--drill` is defined below. */
.sheet--picker { height: 82dvh; max-height: 82dvh; }                       /* search-header selection (exercise / protocol) */
.sheet--compact { max-height: 92%; }                                       /* content-height: confirm / cancel / reason */
.sheet--compact .sheet__body { padding-top: 20px; }
.sheet--full { top: 0; height: 100%; max-height: 100%; border-top: 0; }    /* full-screen overlay (settings) */

/* ---- 4.13 Balance bar (planning context) ---- */
.balance-bar {
  display: flex;
  gap: 1.5px;
  height: 8px;
  background: var(--text);
  margin: 6px 0;
}
.balance-bar > i { display: block; height: 100%; }
.balance-bar > i:first-child { background: var(--accent); }
.balance-bar > i:last-child  { background: var(--text-muted); }
.balance-pair {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.balance-pair__lead { color: var(--accent); font-weight: 700; }

/* ---------- 5. APP CHROME ---------- */

.app-header {
  flex-shrink: 0;
  padding: 14px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg);
  height: var(--header-h);
}
.app-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-logo__mark {
  background: var(--accent);
  color: var(--ink-text);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.app-logo__mark svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  display: block;
}
/* Subpage navigation — canonical back affordance + subpage title. Replaces the
   per-surface 32px inline back buttons; 44px hit area inside the 48px header. */
.app-header__back {
  width: 44px; height: 44px; margin: -10px 4px -10px -10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  flex-shrink: 0;
}
.app-header__back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.app-header__back:hover { color: var(--accent); }
.app-header__title {
  flex: 1; min-width: 0; text-align: left;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-header__right {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Avatar / account menu — the ONLY thing in the header right slot.
   Hard-cut 28×28 square, mirrors .app-logo__mark on the left.
   Tap opens .account-menu (see below) — the home of all settings:
   sign-out, magic-link re-auth, injury flag, units, coach picker,
   notification permission, view-all-imports beyond 90d, theme. */
.app-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  position: relative;
}
.app-avatar:hover { background: var(--bg-subtle); border-color: var(--text); }
.app-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.app-avatar__initial { display: block; }
.app-avatar__dot {
  position: absolute;
  top: -3px; right: -3px;
  width: 7px; height: 7px;
  background: var(--accent);
  border: 1.5px solid var(--bg);
}
/* When the user has an unread notice the avatar inverts (ink fill) and shows the dot.
   Replaces inline style="background: var(--text); color: var(--bg);" overrides. */
.app-avatar--has-notice {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.app-avatar--has-notice .app-avatar__dot { display: block; }

/* Account menu — opens from .app-avatar.
   Static specimen pinned below the header for documentation;
   in the live app, this is a popover anchored to the avatar
   with --dur-base + --ease (entrance), --dur-fast (exit). */
.account-menu {
  position: absolute;
  top: calc(var(--header-h) + 4px);
  right: 12px;
  width: 240px;
  background: var(--bg);
  border: 1px solid var(--text);
  z-index: 10;
  box-shadow: var(--shadow-md);
}
.account-menu__head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-faint);
}
.account-menu__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 2px;
}
.account-menu__email {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  word-break: break-all;
}
.account-menu__group {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-faint);
}
.account-menu__group:last-child { border-bottom: none; }
.account-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-height: 40px;
  transition: background var(--dur-fast) var(--ease);
}
.account-menu__item:hover { background: var(--bg-subtle); }
.account-menu__item-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}
.account-menu__item--danger { color: var(--red); }
.account-menu__item--danger:hover { background: var(--red-bg); }
.account-menu__foot {
  padding: 8px 16px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: 1px solid var(--border-faint);
}

.app-header--scoreboard {
  background: var(--ink-bg);
  border-bottom: 1.5px solid var(--ink-bg);
  color: var(--ink-text);
}
.app-header--scoreboard .app-logo { color: var(--ink-text); }
.app-header--scoreboard .app-logo__mark { background: var(--ink-accent); color: var(--ink-bg); }
.app-header--scoreboard .app-header__right { color: var(--ink-text-muted); }
.app-header--scoreboard .app-avatar {
  background: var(--ink-bg-elevated);
  color: var(--ink-text);
  border-color: var(--ink-border);
}
.app-header--scoreboard .app-avatar:hover { background: var(--fyc-steel); border-color: var(--ink-text-muted); }

/* Sign-in affordance — used in the header right slot ONLY on the
   logged-out public landing (State A). Replaces the avatar pre-auth. */
.app-header__signin {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-text);
  text-decoration: none;
  padding: 6px 10px 5px;
  border: 1px solid var(--ink-border);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.app-header__signin:hover { background: var(--ink-bg-elevated); border-color: var(--ink-text-muted); }
.app-header:not(.app-header--scoreboard) .app-header__signin {
  color: var(--text);
  border-color: var(--border);
}
.app-header:not(.app-header--scoreboard) .app-header__signin:hover { background: var(--bg-elevated); border-color: var(--text); }

/* Tape sub-strip — under header on plan / today contexts */
.tape-strip {
  flex-shrink: 0;
  padding: 7px 16px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-faint);
  color: var(--text-muted);
}
.tape-strip__left { color: var(--accent); font-weight: 600; }
.tape-strip__left::before { content: '●'; margin-right: 6px; font-size: 8px; vertical-align: 1px; }
.tape-strip__right { color: var(--text-faint); }
.tape-strip--ink {
  background: var(--ink-bg);
  border-bottom: none;
  color: var(--ink-text-muted);
}
.tape-strip--ink .tape-strip__left { color: var(--ink-accent); }
.tape-strip--ink .tape-strip__right { color: var(--ink-text-muted); }

/* Bottom nav */
.bottom-nav {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg);
  border-top: 1px solid var(--border-faint);
  height: var(--nav-h);
}
.bottom-nav--5 { grid-template-columns: repeat(5, 1fr); }
.nav-tab {
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav-tab svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-tab.is-active { color: var(--accent); }
.nav-tab.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--accent);
}

/* Feedback FAB */
.feedback-fab {
  position: absolute;
  right: 16px;
  bottom: calc(var(--nav-h) + 16px);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink-text);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 40;
}
.feedback-fab svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- 6. SCREEN COMPONENTS (shared across multiple tabs) ---------- */

/* Screen container — inside a phone */
.screen-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  scrollbar-width: none;
}
.screen-body::-webkit-scrollbar { width: 0; }

/* Screen heading block */
.screen-heading { margin-bottom: 14px; }
.screen-heading__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.screen-heading__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text);
}
.screen-heading__title em { font-style: normal; color: var(--accent); }
.screen-heading__window {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Date strip — Today tab */
.date-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.date-strip__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.date-strip__day {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.date-strip__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Lift row — used in today card, plan day card, history detail */
.lift-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-faint);
  gap: 10px;
}
.lift-row:last-child { border-bottom: none; }
.lift-row__name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Plan-letter chip — only shown for superset members. Standalone rows omit the
   chip entirely (it was noise on a flat list). When a row IS part of a superset,
   ship `<span class="key key--ss">` so the chip surfaces in purple to signal
   the grouping. Matches the .ex-block__num / .ex-block__num--ss pattern on the
   session screen. */
.lift-row__name .key {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  color: var(--text-faint);
  margin-right: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lift-row__name .key--ss {
  color: var(--purple);
  font-weight: 700;
}
/* Rx column — one consistent color across every row variant inside a day-card
   (strength, protocol, featured, unfeatured). Hierarchy is carried by font
   weight, never by color: `<strong>` numerals get +1 weight step, nothing more.
   No is-protocol / is-featured color override here — protocol-vs-strength is
   already signalled by the lift name + the rx shape (`sets × reps · weight`
   vs `ETA · RPE/Zone`), and the featured row gets a name-weight bump above. */
.lift-row__rx {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.lift-row__rx strong { font-weight: 600; }
.lift-row.is-featured .lift-row__name { font-weight: 600; }
.lift-row--has-chip { grid-template-columns: 1fr auto auto; }
.lift-row__chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- 7. SCREENS ---------- */

/* ---- 7.1 Home — ink hero (new-user empty state, ported from welcome state 1) ---- */
.ink-hero {
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 28px 20px 32px;
  margin: 0 -20px 0;     /* bleeds to phone edge from screen-body padding */
  border-bottom: 1.5px solid var(--ink-bg);
}
.ink-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-accent);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.ink-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ink-accent);
}
.ink-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 11.5vw, 48px);
  line-height: 0.92;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ink-hero__title em { font-style: normal; color: var(--ink-accent); display: block; }
.ink-hero__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-text-muted);
  margin-bottom: 22px;
  max-width: 320px;
}
.ink-hero__body strong { color: var(--ink-text); font-weight: 600; }

/* Hero foot — small mono row at bottom of ink area */
.ink-hero__foot {
  margin-top: 18px;
  padding: 10px 0 0;
  border-top: 1px solid var(--ink-border);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-text-muted);
}
.ink-hero__foot .accent { color: var(--ink-accent); }

/* Below-hero rows (chalk) — onboarding affordances under the ink hero */
.hero-below { padding: 22px 0 6px; display: flex; flex-direction: column; }
.hero-below-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-faint);
  font-size: 13px;
  color: var(--text-muted);
}
.hero-below-row:last-of-type { border-bottom: none; }
.hero-below-row strong { color: var(--text); font-weight: 600; }
.hero-below-row a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.hero-below-row a:hover { color: var(--accent-hover); }

/* ---- 7.2 Programming balance ---- */
.prog-list { display: flex; flex-direction: column; gap: 14px; }
.prog-row {
  padding: 12px 14px;
  border: 1px solid var(--border-faint);
  background: var(--bg);
}
.prog-row.is-skewed { border-color: var(--yellow); border-left-width: 3px; background: var(--yellow-bg); }
.prog-row.is-watch  { border-color: var(--accent); border-left-width: 3px; background: var(--accent-light); }
.prog-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 10px;
}
.prog-row__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.prog-row__label small {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
}
.prog-row__flag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.prog-row.is-skewed .prog-row__flag { color: var(--yellow); }
.prog-row.is-watch  .prog-row__flag { color: var(--accent); }
.prog-row__flag svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 7.3 Radar chart ---- */
.radar-wrap { padding: 6px 0 0; position: relative; }
.radar { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto; }
.rad-ring { fill: none; stroke: var(--border-faint); stroke-width: 0.5; }
.rad-ring.outer { stroke: var(--text); stroke-width: 1; }
.rad-axis { stroke: var(--border-faint); stroke-width: 0.5; }
.rad-target { fill: none; stroke: var(--text-faint); stroke-width: 0.75; stroke-dasharray: 2 3; opacity: 0.4; }
.rad-poly { fill: var(--accent); fill-opacity: 0.16; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.rad-vert { fill: var(--accent); }
.rad-vert.is-active { fill: var(--accent); stroke: var(--bg); stroke-width: 2; r: 5; }
.rad-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-faint);
  font-weight: 600;
}
.radar-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.5;
}
.radar-meta b { color: var(--text); font-weight: 600; }
.radar-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.r-tag {
  border: 1px solid var(--border-faint);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.r-tag__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.r-tag__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.r-tag__value.is-warn { color: var(--yellow); }
.radar-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
}
.radar-hint b { color: var(--accent); font-weight: 600; }
/* Radar drilldown tooltip (overlays the chart) */
.radar-tooltip {
  position: absolute;
  top: 4px;
  right: 0;
  width: 184px;
  background: var(--bg);
  border: 1.5px solid var(--text);
  padding: 12px 14px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  z-index: 2;
}
.radar-tooltip__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.radar-tooltip__status {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px 1px;
  background: var(--accent);
  color: var(--ink-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.radar-tooltip__summary {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}
.radar-tooltip__summary b { color: var(--accent); font-weight: 700; }
.subm-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.subm-row { display: flex; flex-direction: column; gap: 3px; }
.subm-row__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 500;
}
.subm-row__head b { color: var(--text); font-weight: 700; }
.subm-bar { height: 4px; background: var(--bg-elevated); border: 1px solid var(--border-faint); }
.subm-bar > i { display: block; height: 100%; background: var(--accent); }
.subm-bar.is-dim > i { background: var(--text-muted); opacity: 0.55; }
.radar-tooltip__foot {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 8px;
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.radar-tooltip__foot svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---- 7.4 Recovery row + deload card ---- */
.recovery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border-faint);
}
.rec-cell {
  padding: 10px 12px;
  background: var(--bg);
  border-right: 1px solid var(--border-faint);
}
.rec-cell:last-child { border-right: 0; }
.rec-cell__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rec-cell__label svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.rec-cell__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.04em;
}
.rec-cell__sub svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
.sore-map { display: flex; gap: 2px; height: 24px; align-items: flex-end; }
.sore-map i { flex: 1; min-height: 4px; }
.sore-low  { background: rgba(200, 57, 31, 0.20); }
.sore-mid  { background: rgba(200, 57, 31, 0.50); }
.sore-high { background: var(--accent); }

.deload-card {
  background: var(--ink-bg);
  color: var(--ink-text);
  border: 1.5px solid var(--ink-bg);
  padding: 14px 16px;
}
.deload-card__tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-accent);
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.deload-card__tag svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deload-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.deload-card__body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-text-muted);
}
.deload-card__why {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.deload-card__why-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-text-muted);
}
.deload-card__why-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.deload-card__why-list li {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-text);
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: baseline;
  gap: 6px;
}
.deload-card__why-list li svg {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  align-self: center;
  justify-self: center;
  color: var(--ink-accent);
}

/* ---- 7.5 Lift highlights ---- */
.lifts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lift-card {
  padding: 12px;
  border: 1px solid var(--border-faint);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lift-card.is-hero {
  grid-column: span 2;
  background: var(--ink-bg);
  color: var(--ink-text);
  border-color: var(--ink-bg);
  padding: 14px 16px;
}
.lift-card__tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.lift-card.is-hero .lift-card__tag { color: var(--ink-accent); }
.lift-card__tag svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lift-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.lift-card.is-hero .lift-card__name { color: var(--ink-text); font-size: 22px; }
.lift-card__fact {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.lift-card.is-hero .lift-card__fact { color: var(--ink-text-muted); font-size: 13px; }
.lift-card__fact b { color: var(--text); font-weight: 600; }
.lift-card.is-hero .lift-card__fact b { color: var(--ink-text); }

/* ---- 7.6 Worth doing next ---- */
.next-list { display: flex; flex-direction: column; gap: 0; }
.next-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--border-faint);
}
.next-card:last-child { border-bottom: 1px solid var(--border-faint); }
.next-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.next-card__body {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.next-card__body em { font-style: normal; color: var(--accent); font-weight: 700; }

/* Empty-block callout — used in plan empty + no-history-yet states */
.empty-block {
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
}
.empty-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}
.empty-block__text {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.empty-block__text b { color: var(--accent); font-weight: 700; }
.empty-block__cta { margin-top: 10px; }

/* ---- 7.7 Section + spacer rhythm ---- */
.screen-section { margin-bottom: var(--space-8); }

/* ---- 7.8 Plan — board (progress + meta) ---- */
.board {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.board__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.board__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.board__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text);
}
.board__title em { font-style: normal; color: var(--accent); }
.board__tally {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.board__pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.board__rail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.board__rail-row .board__rail { flex: 1; margin-bottom: 0; }
.board__rail {
  height: 8px;
  background: var(--border);
  position: relative;
  margin-bottom: 10px;
}
.board__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
}
.board__rail-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.board__rail-meta b { color: var(--text); font-weight: 700; }

/* ---- 7.9 Plan — calendar strip ---- */
.cal-strip {
  margin-bottom: 18px;
}
.cal-strip__swipe-hint {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  margin-top: 10px;
}

/* Plan-screen footer — quiet destructive affordance (Abandon plan).
   Reuses the shared destructive settings row and stays at the bottom of the
   scroll. Confirm sheet handles the actual destructive action. */
.plan-foot {
  margin-top: 28px;
  padding: 0 0 8px;
}
.cal-week {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-week-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cal-week-label small {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cal-day:hover { transform: translateY(-2px); border-color: var(--text-faint); }
.cal-day__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}
.cal-day__day {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}
.cal-day--done { background: var(--text); border-color: var(--text); }
.cal-day--done .cal-day__num { color: var(--bg); }
.cal-day--done .cal-day__day { color: rgba(242,237,226,0.5); }
.cal-day--today {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--bg) inset;
}
.cal-day--today .cal-day__num { color: var(--ink-text); }
.cal-day--today .cal-day__day { color: rgba(242,237,226,0.85); }
.cal-day--skipped {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(17,17,17,0.22) 4px, rgba(17,17,17,0.22) 5.5px);
  border-color: var(--amber);
}
.cal-day--skipped .cal-day__num { color: var(--amber); }
.cal-day--rest {
  border-color: var(--border-faint);
  background: var(--bg-subtle);
}
.cal-day--rest .cal-day__num { color: var(--text-faint); font-weight: 500; }
.cal-day.is-selected { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }

/* ---- 7.10 Plan — day card (variant-aware) ---- */
.day-card {
  background: var(--bg);
  border: 1.5px solid var(--text);
  position: relative;
  margin: 12px 0 18px;
  padding: 0;
}
/* Tape-l and tape-r are a visual pair (left/right corner tags on the same
   card edge). Keep font-size, line-height, and padding identical between
   the two so their box heights match — only family, weight, fill, and
   text colour differ. Oswald (display) and JetBrains Mono have different
   default line-heights at the same point size, so line-height is set
   explicitly on both to lock vertical metrics.

   Geometry: tape overhangs the card edge by half its own height (8px out
   of a 16px-tall tape) and insets 12px from the corner — both values snap
   to the 4pt grid via --space-2 and --space-3. Inline-flex centering keeps
   Oswald and JetBrains Mono optically aligned inside the same hard tag.     */
.day-card__tape-l {
  position: absolute;
  top: calc(var(--space-2) * -1);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 16px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--size-xs);
  line-height: 1;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  padding: 0 8px;
}
.day-card__tape-r {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 16px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-xs);
  line-height: 1;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  padding: 0 8px;
}
.day-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 18px 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.day-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  padding: 0 18px 10px;
}
.day-card__name em { font-style: normal; color: var(--accent); }
.day-card__lifts {
  border-top: 1px solid var(--border-faint);
  padding: 8px 18px 12px;
}
.day-card__lifts .lift-row { padding: 8px 0; }
.day-card__cta-wrap { padding: 0; }
.day-card__cta {
  display: flex;
  width: 100%;
  background: var(--accent);
  color: var(--ink-text);
  border: none;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  transition: background var(--dur-fast) var(--ease);
}
.day-card__cta:hover { background: var(--accent-hover); }
.day-card__cta-meta {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-text-muted);
  font-weight: 500;
}

/* Utility — dim modifier for not-applicable / N/A on first session / disabled.
   Replaces inline opacity values (was: 0.45) which couldn't be reduced-motion-aware
   and drifted between 0.45 / 0.85 / 0.6 across files. Use --is-dim for "soft no",
   --is-disabled for "can't tap", per ARIA semantics. */
.is-dim { opacity: 0.55; }
.is-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.day-card__cta-secondary {
  display: flex;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-top: 1px solid var(--border-faint);
  --btn-border: transparent;
  --btn-bg-hover: var(--bg-subtle);
  padding: 14px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}
.day-card__cta-secondary:hover {
  border-color: transparent;
  border-top-color: var(--border-faint);
  color: var(--accent);
  background: var(--bg-subtle);
}

/* Day-card variants */
.day-card--done {
  border-color: var(--border);
}
.day-card--done .day-card__tape-l { background: var(--text); color: var(--bg); }
.day-card--done .day-card__cta { background: var(--bg); color: var(--text); border-top: 1px solid var(--border-faint); }
.day-card--done .day-card__cta:hover { background: var(--bg-elevated); }

/* Skipped uses the muted/scheduled chrome family — amber is reserved for
   deload. The strikethrough on the name is the unique signal that this
   session was abandoned (vs. scheduled, which is still upcoming). Border
   stays at the base --text (ink) — status colours live on chrome (tape,
   strikethrough, meta), not on borders. Deload is the exception because the
   whole active card becomes a reduced-RX prescription. */
.day-card--skipped .day-card__tape-l { background: var(--text-muted); color: var(--bg); }
.day-card--skipped .day-card__meta { color: var(--text-faint); }
.day-card--skipped .day-card__name {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--text-faint);
  color: var(--text-muted);
}


.day-card--scheduled {
  border-color: var(--border);
}
.day-card--scheduled .day-card__tape-l { background: var(--text-muted); color: var(--bg); }
.day-card--scheduled .day-card__meta { color: var(--text-faint); }
.day-card--scheduled .day-card__cta {
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: not-allowed;
  font-weight: 600;
}
.day-card--scheduled .day-card__cta:hover { background: var(--bg-elevated); }

.day-card--freestyle {
  border-color: var(--purple);
  border-style: dashed;
  border-width: 1.5px;
}
.day-card--freestyle .day-card__tape-l { background: var(--purple); color: var(--bg); }

/* Logged-at caption — sits between the lift list and the quick-stats on the
   done variant. Anchors the moment ("when did I close this session?")
   without claiming much real estate. Mono small-caps, faint, hairline rule
   above so it reads as a section boundary, not a header. */
.day-card__logged {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: 10px 18px 0;
  border-top: 1px solid var(--border-faint);
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.day-card__logged-val { color: var(--text-muted); font-weight: 500; }

/* Quick stats — shown for done sessions. Grid is auto-fit so any cell count
   between 2 and 4 lays out evenly without a per-count override. */
.day-card__quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  padding: 10px 0 12px;
  margin: 0 18px;
}
.day-card__quick-stat {
  padding: 0 12px;
  border-right: 1px solid var(--border-faint);
}
.day-card__quick-stat:last-child { border-right: none; }
.day-card__quick-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 3px;
}
.day-card__quick-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ---- 7.10b Plan — plan-finale (celebration scoreboard for State D · plan closed)
   Ink takeover that owns the "moment a plan ends" beat: big display title,
   PR-style highlight tiles, compact wins / watch-next, then a chalk handoff card
   below for the next-plan CTA. Replaces the cramped board + day-card + accent-rail
   stack that the State D frame used in v1.4. ---- */
.plan-finale {
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 22px 18px 18px;
  position: relative;
}
.plan-finale__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-accent);
  font-weight: 700;
  margin-bottom: 10px;
}
.plan-finale__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink-text);
  margin: 0 0 8px;
}
.plan-finale__title em { font-style: normal; color: var(--ink-accent); }
.plan-finale__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-text-muted);
  margin-bottom: 18px;
}
.plan-finale__meta b { color: var(--ink-text); font-weight: 600; }
.plan-finale__highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1.5px solid var(--ink-accent);
  border-bottom: 1px solid var(--ink-border);
  padding: 14px 0 12px;
  margin-bottom: 16px;
}
.plan-finale__highlight {
  text-align: center;
  border-right: 1px solid var(--ink-border);
  padding: 0 4px;
}
.plan-finale__highlight:last-child { border-right: none; }
.plan-finale__highlight-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.005em;
  color: var(--ink-accent);
  line-height: 1;
}
.plan-finale__highlight-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-text-muted);
  font-weight: 600;
  margin-top: 7px;
}
.plan-finale__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.plan-finale__col-head {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.plan-finale__col-head--wins  { color: var(--success); }
.plan-finale__col-head--watch { color: var(--amber); }
.plan-finale__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--ink-text);
  line-height: 1.6;
}
.plan-finale__col-list li {
  padding-bottom: 4px;
}
.plan-finale__col-list li:last-child { padding-bottom: 0; }
.plan-finale__col-list b { font-weight: 700; }

/* ---- 7.10c Plan — handoff card (chalk decision panel after the finale) ---- */
.handoff-card {
  background: var(--bg);
  padding: 18px 18px 0;
  border-top: 1.5px solid var(--text);
}
.handoff-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.handoff-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--text);
}
.handoff-card__title em { font-style: normal; color: var(--accent); }
.handoff-card__body {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.handoff-card__body b { color: var(--text); font-weight: 700; }
.handoff-card__cta {
  display: flex;
  width: calc(100% + 36px);
  margin-left: -18px;
  background: var(--accent);
  color: var(--ink-text);
  border: none;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  min-height: 56px;
  transition: background var(--dur-fast) var(--ease);
}
.handoff-card__cta:hover { background: var(--accent-hover); }
.handoff-card__split {
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--border-faint);
  width: calc(100% + 36px);
  margin-left: -18px;
}
.handoff-card__split-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border-faint);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
}
.handoff-card__split-btn:last-child { border-right: none; }
.handoff-card__split-btn:hover { color: var(--text); background: var(--bg-elevated); }
.handoff-card__split-btn small {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 500;
  text-transform: uppercase;
}
.handoff-card__split-btn.is-dimmed { color: var(--text-faint); cursor: default; }
.handoff-card__split-btn.is-dimmed:hover { background: transparent; color: var(--text-faint); }
.handoff-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 14px;
  width: calc(100% + 36px);
  margin-left: -18px;
  border-top: 1px solid var(--border-faint);
  background: var(--bg);
}
.handoff-card__footer-note {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  line-height: 1.4;
}
.handoff-card__footer-link {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.handoff-card__footer-link:hover { color: var(--accent); }

/* ---- 7.11 Plan — volume balance (plan-vs-actual sibling of Home balance rows) ---- */
.plan-selected-day-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-selected-day-stack > .day-card,
.plan-selected-day-stack > .deload-rationale,
.plan-selected-day-stack > .screen-section {
  margin-top: 0;
  margin-bottom: 0;
}
.deload-rationale + .screen-section {
  margin-top: 0;
}
.plan-balance .insights-callout,
.plan-balance-help {
  margin-bottom: 12px;
}
.plan-balance-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vol-balance-row {
  padding: 12px 14px;
  border: 1px solid var(--border-faint);
  background: var(--bg);
}
.vol-balance-row.is-lagging {
  border-color: var(--amber);
  border-left-width: 3px;
  background: var(--yellow-bg);
}
.vol-balance-row.is-ahead {
  border-color: var(--accent);
  border-left-width: 3px;
  background: var(--accent-light);
}
.vol-balance-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.vol-balance-row__label {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vol-balance-row__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vol-balance-row__flag::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: currentColor;
}
.vol-balance-row__flag.is-lagging { color: var(--amber); }
.vol-balance-row__flag.is-ahead   { color: var(--accent); }
.vol-balance-row__bar {
  position: relative;
  height: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--border-faint);
  background: var(--bg-elevated);
}
.vol-balance-row__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
}
.vol-balance-row.is-lagging .vol-balance-row__bar-fill { background: var(--amber); }
.vol-balance-row.is-ahead .vol-balance-row__bar-fill { background: var(--accent); }
.vol-balance-row__bar-tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1.5px;
  background: var(--text);
}
.vol-balance-row__pair {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.vol-balance-row__pair b { color: var(--text); font-weight: 700; }

/* ---- 7.12 Today — game-day headline + ink session card ---- */
.today-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  margin-bottom: 18px;
  color: var(--text);
}
.today-headline em { font-style: normal; color: var(--accent); }

/* ---- 7.10d Day-card — deload modifier ----
   Amber chrome on the chalk day-card. Used by:
     · Today  → State A · deload  (.day-card.day-card--today.day-card--deload)
     · Plan   → State C            (.day-card.day-card--today.day-card--deload)
   Both files MUST use only the modifier class. No inline color/border/background
   overrides for the deload chrome — they're owned here so the two surfaces can't
   drift.

   Border is amber on deload — unlike skipped/scheduled, the whole card is an
   active reduced-RX prescription. The prescription text stays neutral; the
   chrome carries the recovery state.

   CTA is amber (not oxblood) — deload is the one variant where the action *is*
   the status: the call-to-action and the prescription are inseparable ("Start
   the light day"). The hover is a step darker (#B45309 → #933D08).

   Note: an earlier .day-card--ink variant existed for Today's State A; it was
   retired 2026-05-14. Plan's chalk day-card family is the source of truth and
   Today reuses it directly — see plan.html resolved decisions. */
.day-card--deload { border-color: var(--amber); }
.day-card--deload .day-card__tape-l {
  background: var(--amber);
  color: var(--ink-text);
}
.day-card--deload .day-card__meta > span:first-child { color: var(--amber); }
.day-card--deload .day-card__name em { color: var(--amber); }
.day-card--deload .day-card__cta {
  background: var(--amber);
  color: var(--ink-text);
}
.day-card--deload .day-card__cta-meta { color: var(--ink-text-muted); }
.day-card--deload .day-card__cta:hover,
.day-card--deload .day-card__cta:active {
  background: var(--amber-hover);
  color: var(--ink-text);
}
.day-card--deload .day-card__cta:hover .day-card__cta-meta,
.day-card--deload .day-card__cta:active .day-card__cta-meta { color: var(--ink-text); }

/* Deprecated alias — kept temporarily for any unmigrated callers.
   Source-of-truth uses .day-card.day-card--today (chalk). */
.today-card,
.today-card__eyebrow,
.today-card__title,
.today-card__meta,
.today-card__list,
.today-card__row,
.today-card__row-name,
.today-card__row-rx,
.today-card__more,
.today-card__cta { /* deprecated — use .day-card.day-card--today */ }

/* Alt actions list — quick check-in / build / empty */
.alt-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-faint);
  margin-bottom: 8px;
}
/* Today nav rows reuse the settings-row primitive (one row-link primitive across
   Today + Plan). --nav sits flush in the inset list; the list owns the top rule. */
.alt-list .settings-row--nav {
  padding-left: 0;
  padding-right: 6px;
  border-top: 0;
}
/* Quiet text hover — the settings-list background band reads too heavy on these
   full-width Today rows. Pull the label + arrow to accent instead. */
.alt-list .settings-row--nav:hover {
  background: transparent;
}
.alt-list .settings-row--nav:hover .settings-row__label,
.alt-list .settings-row--nav:hover .settings-row__go {
  color: var(--accent);
}
.settings-row__go {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease);
}

.today-foot {
  text-align: center;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.today-foot a { color: var(--text-muted); text-decoration: underline; }
.today-foot a:hover { color: var(--accent); }

/* No-plan callout — used in Today no-plan and elsewhere */
.np-callout {
  margin-top: 18px;
  padding: 16px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
}
.np-callout__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.np-callout__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  margin-bottom: 6px;
}
.np-callout__body {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---- 7.13 Readiness gate ---- */
.gate-screen { padding: 20px 20px 24px; }
.gate-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.gate-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--accent);
}
.gate-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.gate-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.gate-sub strong { color: var(--text); font-weight: 600; }
.gate-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.gate-section:first-of-type { padding-top: 0; border-top: none; margin-top: 0; }
.gate-section__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
  font-weight: 500;
}
.gate-readiness {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.gate-soreness {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.gate-adjustment {
  border: 0;
  border-left: 2px solid var(--accent);
  background: var(--bg-elevated);
  padding: 14px 16px 16px;
  position: relative;
  margin-top: 24px;
}
.gate-adjustment__tape {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--accent);
  color: var(--ink-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px 2px;
}
.gate-adjustment__line {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  padding-top: 6px;
  margin-bottom: 12px;
}
.gate-adjustment__line strong { font-weight: 700; color: var(--text); }
/* Themed variants — first-session (no baseline) flips the rail muted + bg-subtle;
   severe-soreness (purple) flips the rail + bg to the swap accent. The tape and
   the strong emphasis inside the line flip with the theme so the whole card
   reads as one tone. */
.gate-adjustment--muted { border-left-color: var(--text-muted); background: var(--bg-subtle); }
.gate-adjustment--muted .gate-adjustment__tape { background: var(--text-muted); }
.gate-adjustment--muted .gate-adjustment__line strong { color: var(--text); }
.gate-adjustment--purple { border-left-color: var(--purple); background: var(--purple-bg); }
.gate-adjustment--purple .gate-adjustment__tape { background: var(--purple); }
/* Leading recommendation flips purple; secondary callouts inside the line keep
   the default text color (e.g. "Swap today for <strong>Lower B</strong>"). */
.gate-adjustment--purple .gate-adjustment__line > strong:first-of-type { color: var(--purple); }
.gate-rx-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-faint);
  padding-top: 12px;
}
.gate-rx-cell {
  border-right: 1px solid var(--border-faint);
  padding-right: 12px;
}
.gate-rx-cell:last-child { border-right: none; padding-left: 14px; }
.gate-rx-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: block;
}
.gate-rx-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: var(--display-tracking);
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.gate-rx-value .delta { color: var(--accent); font-size: 22px; }
.gate-rx-value .unit {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Atomic settle: copy + Volume/Effort swap together once the readiness preview
   lands. The .is-swapping class is added by app.js only on the render where the
   settled payload changes. Restrained fade + 2px rise. */
@keyframes gate-note-settle {
  from { opacity: 0.3; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.gate-adjustment__line.is-swapping,
.gate-adjustment .gate-rx-row.is-swapping {
  animation: gate-note-settle 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .gate-adjustment__line.is-swapping,
  .gate-adjustment .gate-rx-row.is-swapping {
    animation: none;
  }
}
.gate-actions {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}

/* ---- 7.14 History — hero scoreboard ---- */
.hist-hero {
  background: var(--bg);
  color: var(--text);
  padding: 14px 20px 14px;
  margin: -18px -20px 14px;
  border-bottom: 1px solid var(--border);
}
.hist-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.hist-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.hist-hero__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-faint);
  padding-top: 10px;
}
.hist-hero__cell {
  border-right: 1px solid var(--border-faint);
  padding-right: 12px;
}
.hist-hero__cell:last-child { border-right: none; padding-left: 12px; padding-right: 0; }
.hist-hero__cell:nth-child(2) { padding-left: 12px; }
.hist-hero__cell-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.hist-hero__cell-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: var(--display-tracking);
  color: var(--text);
}
.hist-hero__cell-value em { font-style: normal; color: var(--accent); }
.hist-hero__cell-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ---- 7.15 History — filter tabs ---- */
.hist-filters {
  display: flex;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 18px;
  gap: 0;
}
.hist-filter {
  flex: 1;
  background: none;
  border: 0;
  padding: 10px 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.hist-filter__count {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.hist-filter:hover { color: var(--text); }
.hist-filter.is-active { color: var(--accent); }
.hist-filter.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 6px;
  right: 6px;
  height: 3px;
  background: var(--accent);
}

/* ---- 7.16 History — week head ---- */
.hist-week-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--text);
}
.hist-week-head__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hist-week-head__tally {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 500;
}
.hist-week-head__tally b { color: var(--text); font-weight: 700; }

/* ---- 7.17 History — session row ---- */
.hist-row {
  display: grid;
  grid-template-columns: 44px 3px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-faint);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  color: inherit;
}
.hist-row:hover { background: var(--bg-elevated); }
.hist-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.hist-row__date-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
}
.hist-row__date-day {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.hist-row__rule {
  width: 3px;
  height: 36px;
  background: var(--text);
  align-self: center;
}
.hist-row.is-skipped .hist-row__rule { background: var(--amber); }
.hist-row.is-partial .hist-row__rule { background: var(--accent); }
.hist-row.is-freestyle .hist-row__rule { background: var(--text-muted); }
.hist-row__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hist-row__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hist-row__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.hist-row__chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.hist-row__right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hist-row__duration {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.hist-row__week {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

/* Delta chips */
.hist-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 1px 6px;
  color: var(--text-muted);
  background: var(--bg);
}
/* Row chips are aggregated counts — no per-deviation chip in the list. The
   detail sheet still itemizes via .detail-changes and per-exercise chips. */
.hist-chip[data-kind="pr"]     { color: var(--accent); border-color: var(--accent); }
.hist-chip[data-kind="block"]  { color: var(--text); border-color: var(--text); }
.hist-chip[data-kind="ready"]  { color: var(--success); border-color: var(--success); }
.hist-chip[data-kind="okay"]   { color: var(--yellow); border-color: var(--yellow); }
.hist-chip[data-kind="rough"]  { color: var(--accent); border-color: var(--accent); }
.hist-chip[data-kind="sore"]   { color: var(--amber); border-color: var(--amber); }
.hist-chip[data-kind="sets"]   { color: var(--amber); border-color: var(--amber); }
.hist-chip[data-kind="effort"] { color: var(--amber); border-color: var(--amber); border-style: dashed; }
.hist-chip[data-kind="change"] { color: var(--text-muted); border-color: var(--text-muted); }
.hist-chip__dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: currentColor;
  margin-right: 4px;
}

/* History empty */
.hist-empty {
  padding: 40px 0;
  text-align: left;
}
.hist-empty__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hist-empty__eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: var(--accent);
}
.hist-empty__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.0;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}
.hist-empty__title em { font-style: normal; color: var(--accent); }
.hist-empty__body {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 320px;
}
.hist-empty__body strong { color: var(--text); font-weight: 600; }

/* ---- 7.18 History — detail sheet content ---- */
.detail-hero {
  background: var(--bg);
  color: var(--text);
  padding: 4px 20px 14px;
  margin: -16px -20px 14px;
  border-bottom: 1px solid var(--border);
}
.detail-hero__kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 6px;
}
.detail-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 6px;
}
.detail-hero__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.detail-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-faint);
  padding-top: 10px;
  gap: 8px;
}
.detail-hero__stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.detail-hero__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-top: 2px;
}

/* Plan link inside the history detail sheet uses the canonical .plan-strip
   primitive (section 4.6) — no bespoke variant. */

.detail-changes {
  background: var(--accent-light);
  border-left: 2px solid var(--accent);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.detail-changes__head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 8px;
}
.detail-changes__list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; }
.detail-changes__list li {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}
.detail-changes__list li b {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 6px;
}

/* Per-set Last / Plan / Actual table */
.detail-pva-ex { margin-bottom: 22px; }
.detail-pva-ex__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-faint);
}
.detail-pva-ex__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.detail-pva-ex__title .key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  margin-right: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.detail-pva-ex__chip {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 6px 1px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.detail-pva-ex__chip[data-status="pr"] { background: var(--accent); color: var(--ink-text); }
.detail-pva-ex__chip[data-status="hit"] { color: var(--success); border-color: var(--success); }
.detail-pva-ex__chip[data-status="swap"] { color: var(--purple); border-color: var(--purple); }
.detail-pva-ex__chip[data-status="add"]  { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.detail-pva-ex__chip[data-status="miss"] { color: var(--amber); border-color: var(--amber); }
.detail-pva-ex__chip[data-status="cut"]  { color: var(--text-muted); border-color: var(--border); }
.detail-pva-ex__note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: -4px 0 8px;
}
.detail-pva-ex__note b {
  color: var(--purple);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 6px;
}
.detail-pva-tbl {
  display: grid;
  grid-template-columns: 22px 1fr 1fr 1fr;
  gap: 10px;
  align-items: start;
  padding: 6px 0;
}
.detail-pva-th {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  padding-bottom: 4px;
}
.detail-pva-th:first-child { padding-left: 0; }
.detail-pva-row {
  display: contents;
}
.detail-pva-set {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  align-self: center;
}
.detail-pva-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-pva-cell__rx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.detail-pva-cell__effort {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  font-weight: 500;
}
.detail-pva-cell.is-last .detail-pva-cell__rx   { color: var(--text-faint); font-weight: 600; }
.detail-pva-cell.is-plan .detail-pva-cell__rx   { color: var(--text-muted); font-weight: 500; }
.detail-pva-cell.is-actual .detail-pva-cell__rx { color: var(--accent); font-weight: 700; }
.detail-pva-cell.is-empty .detail-pva-cell__rx  { color: var(--text-faint); font-style: italic; font-weight: 400; }

/* Protocol detail row (conditioning) */
.detail-proto {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 12px 14px 14px;
  margin-bottom: 22px;
}
.detail-proto__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-faint);
}
.detail-proto__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.detail-proto__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 2px;
}
.detail-proto__rounds {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 1fr;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  align-items: center;
  padding: 4px 0;
}
.detail-proto__th {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  padding-bottom: 2px;
}
.detail-proto__round-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
}
.detail-proto__cell { color: var(--text); font-weight: 600; }
.detail-proto__cell--note { color: var(--text-muted); font-weight: 500; }
.detail-proto__sum {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 1fr;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  align-items: center;
  padding: 8px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--border-faint);
}
.detail-proto__sum-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.detail-proto__sum-value {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* ---- 7.19 History — set-type indicator on the per-set Last/Plan/Actual table ----
   Mirrors .set-tag (warmup / drop / myo / failure) but sized to fit the
   detail-pva-tbl 22px set-num column. Working sets keep the plain mono number. */
.detail-pva-set[data-type] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.02em;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.detail-pva-set[data-type="warmup"]    { color: var(--text-muted); border-color: var(--border); border-style: dashed; }
.detail-pva-set[data-type="drop"]      { color: var(--purple); border-color: var(--purple); }
.detail-pva-set[data-type="myo"]       { color: var(--accent); border-color: var(--accent); }
.detail-pva-set[data-type="partial"]   { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.detail-pva-set[data-type="restpause"] { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.detail-pva-set[data-type="failure"]   { color: var(--red); border-color: var(--red); background: var(--red-bg); }

/* ---- 7.20 History — superset wrapper in detail sheet ----
   Mirrors .superset from the session screen: purple-tinted background, 2px purple
   left rule, group head with "A → B" rhythm cue. Two exercises inside are .detail-pva-ex
   with key--ss-a (oxblood) / key--ss-b (purple) on their key chips. */
.detail-pva-superset {
  background: var(--purple-bg);
  padding: 10px 12px 4px;
  margin-bottom: 22px;
  border-left: 2px solid var(--purple);
}
.detail-pva-superset__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(75,59,143,0.18);
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--purple);
}
.detail-pva-superset__head svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
  vertical-align: -1px; margin-right: 4px;
}
.detail-pva-superset__rounds {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--purple); font-weight: 600;
}
.detail-pva-superset .detail-pva-ex { margin-bottom: 14px; }
.detail-pva-superset .detail-pva-ex:last-child { margin-bottom: 4px; }

/* Superset members in the History detail PVA use the same single-purple key
   treatment as plan/today/session — no per-member color, no chip background.
   The wrapper carries the grouping; the colored letter carries the order. */
.detail-pva-ex__title .key--ss {
  color: var(--purple);
  font-weight: 700;
}

/* ---- 7.21 History — readiness + soreness block in detail sheet ----
   Renders between the hero and the changes block. Surfaces the readiness pill
   the user picked pre-session + the soreness map at that point in time. */
.detail-readiness {
  margin-bottom: 22px;
  padding: 12px 14px 12px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--border);
}
.detail-readiness__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
  margin-bottom: 10px;
}
.detail-readiness__head em {
  font-style: normal;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}
.detail-readiness__row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.detail-readiness__pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 4px;
  border: 1.5px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
}
.detail-readiness__pill .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--text-faint);
}
/* Levels mirror the readiness gate copy: Good / Okay / Rough. */
.detail-readiness__pill[data-level="good"]  { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.detail-readiness__pill[data-level="good"]  .dot { background: var(--success); }
.detail-readiness__pill[data-level="okay"]  { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-bg); }
.detail-readiness__pill[data-level="okay"]  .dot { background: var(--yellow); }
.detail-readiness__pill[data-level="rough"] { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.detail-readiness__pill[data-level="rough"] .dot { background: var(--accent); }
.detail-readiness__note {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: 0.02em;
}
.detail-readiness__sores {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border-faint);
}
.detail-readiness__sore {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg);
  font-weight: 500;
}
.detail-readiness__sore .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--border);
}
.detail-readiness__sore[data-level="none"]     { color: var(--text-faint); border-color: var(--border); }
.detail-readiness__sore[data-level="mild"]     { color: var(--amber); border-color: var(--amber); background: rgba(180,83,9,0.06); }
.detail-readiness__sore[data-level="mild"] .dot     { background: var(--amber); }
.detail-readiness__sore[data-level="moderate"] { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); font-weight: 700; }
.detail-readiness__sore[data-level="moderate"] .dot { background: var(--amber); transform: scale(1.4); }
.detail-readiness__sore[data-level="severe"]   { color: var(--accent); border-color: var(--accent); background: var(--accent-light); font-weight: 700; }
.detail-readiness__sore[data-level="severe"] .dot   { background: var(--accent); transform: scale(1.6); }

/* ---- 7.22 History — protocol shape variants ----
   The .detail-proto shell adapts per structure_type. The 4-col grid is the
   default (intervals); AMRAP / EMOM / Tempo overrides flow through here so
   reviewers can see the column shapes side by side in a specimens panel. */
.detail-proto--amrap .detail-proto__rounds,
.detail-proto--amrap .detail-proto__sum,
.detail-proto--emom  .detail-proto__rounds,
.detail-proto--emom  .detail-proto__sum {
  grid-template-columns: 28px 1fr 1fr 1fr;
}
.detail-proto--tempo .detail-proto__rounds,
.detail-proto--tempo .detail-proto__sum {
  grid-template-columns: 40px 1fr 1fr 1fr;
}
.detail-proto__shape-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--border);
}

/* ---------- 9. LIVE SHELL ---------- */

.live-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 280px) auto;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 880px) {
  .live-wrap { grid-template-columns: 1fr; }
}

.live-controls {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.live-controls h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1.5px solid var(--text);
}
.live-control-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.live-control-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.live-state-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.live-state-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 9px 5px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.live-state-btn:hover { border-color: var(--text); color: var(--text); }
.live-state-btn.is-active {
  background: var(--accent);
  color: var(--ink-text);
  border-color: var(--accent);
}
.live-control-help {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.live-control-help b { color: var(--text); font-weight: 600; }

.live-phone {
  width: var(--phone-w);
  height: var(--phone-h);
  background: var(--bg);
  border: 1px solid rgba(17,17,17,0.25);
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0 auto;
}

.live-screen {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.live-screen.is-active { display: flex; }

.live-screen-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 24px;
  scrollbar-width: none;
}
.live-screen-body::-webkit-scrollbar { width: 0; }

/* Live shell header swap */
.live-phone .app-header { transition: background var(--dur-fast) var(--ease); }
.live-phone[data-context="ink"] .app-header { background: var(--ink-bg); border-bottom-color: var(--ink-bg); color: var(--ink-text); }
.live-phone[data-context="ink"] .app-logo { color: var(--ink-text); }
.live-phone[data-context="ink"] .app-logo__mark { background: var(--ink-accent); color: var(--ink-bg); }
.live-phone[data-context="ink"] .app-header__right { color: var(--ink-text-muted); }

/* Tape strip toggle (visible only for plan/today contexts) */
.live-tape { display: none; }
.live-phone[data-tape="show"] .live-tape { display: flex; }

/* ---------- 11. SESSION COMPONENTS (in-session UX, ported from ocpm-session-FINAL) ---------- */

/* Session header — replaces the chalk app-header during a session */
.sess-header {
  flex-shrink: 0;
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 8px 12px 8px 16px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1.5px solid var(--ink-bg);
  height: var(--header-h);
}
.sess-header__close {
  position: static; inset: auto;
  width: 32px; height: 32px;
  min-width: 32px;
  background: transparent; border: 1px solid var(--ink-border);
  color: var(--ink-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-0);
}
.sess-header__close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.sess-header__close:hover { color: var(--ink-accent); border-color: var(--ink-accent); }
.sess-header__title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sess-header__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sess-header__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-text-muted); }
.sess-header__finish {
  justify-self: end; align-self: center;
  width: auto; flex-shrink: 0;
  background: var(--ink-accent); color: var(--ink-bg);
  border: none;
  padding: 8px 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-0);
}
.sess-header__finish:hover { background: #ec5e4a; }

/* Session body + progress rail */
.sess-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0; position: relative; }
.sess-body::-webkit-scrollbar { width: 0; }
.sess-progress { height: 3px; background: var(--ink-border); position: relative; flex-shrink: 0; }
.sess-progress__fill { position: absolute; inset: 0 auto 0 0; background: var(--ink-accent); transition: width var(--dur-base) var(--ease); }

/* Adjustment banner — top of the session, dismissable */
.sess-banner {
  /* Quiet coach-note language (left accent rule + elevated surface), not an
     oxblood-tinted error bar. Collapses smoothly on dismiss via max-height. */
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
  border-bottom: 1px solid var(--border-faint);
  max-height: 240px;
  padding: 11px 16px 11px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--font-body); font-size: 12px; line-height: 1.45;
  color: var(--text);
  overflow: hidden;
  transition: opacity 200ms var(--ease), max-height 260ms var(--ease),
    padding 260ms var(--ease), border-bottom-width 260ms var(--ease);
}
.sess-banner.is-dismissing {
  max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; opacity: 0;
}
.sess-banner__tape {
  flex-shrink: 0;
  color: var(--accent);
  font-family: var(--font-mono); font-weight: 700;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 1px;
}
.sess-banner__main strong { color: var(--text); font-weight: 700; }
.sess-banner__close {
  position: static; inset: auto;
  background: none; border: none; color: var(--text-faint);
  cursor: pointer; padding: 6px 0 6px 10px;
  font-size: 18px; line-height: 1; align-self: center;
}

/* Exercise block — collapsible per-exercise card */
.ex-block {
  background: var(--bg);
  border-bottom: 1px solid var(--border-faint);
  position: relative;
}
.ex-block:first-child { border-top: 1px solid var(--border-faint); }
/* No `.is-active` distinction — all rows are always-expanded and equally interactable.
   `.is-done` (dimmed) is the only state. */
.ex-block.is-done { opacity: 0.85; }
.ex-block__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 56px 12px 16px;  /* extra right-padding reserves the kebab slot */
  background: none; border: 0; width: 100%;
  text-align: left;
  cursor: default;
}
/* A1/B1/C1 number labels are HIDDEN by default — they're noise on standalone exercises.
   They only become visible when a superset modifier is present (.ss-a/.ss-b), where the
   A/B distinction within the group carries real meaning. */
.ex-block__num {
  display: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--text-faint);
  width: 24px;
}
.ex-block__num--ss { display: block; }
.ex-block.is-done .ex-block__num { color: var(--success); }
.ex-block__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-block__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-block__name-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: var(--radius-0);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  margin-left: 2px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ex-block__name-info:hover { color: var(--accent); border-color: var(--accent); }
/* Active info chip — sits in oxblood when the rationale popover is open. */
.ex-block__name-info--active { color: var(--accent); border-color: var(--accent); }
/* Muted info chip on protocol cards — transparent fill, hairline border, muted text. */
.ex-block__name-info--muted { color: var(--text-muted); border-color: var(--border); background: transparent; }
.ex-block__rx {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ex-block__rx strong { color: var(--text); font-weight: 600; }
.ex-block__rx .adjusted { color: var(--accent); font-weight: 700; }
/* Exercises render always-expanded — no chev/collapse affordance.
   Body is always visible; `.is-active` only signals "current exercise" via bg. */
.ex-block__body { padding: 0 16px 16px; }

/* Per-exercise coach note — block-specific guidance attached to the plan.
   Sits between .ex-block__head and .ex-block__body. Compact, doesn't get in the way:
   tinted bg + 2px oxblood rule + small COACH eyebrow + 12.5px body text.
   Renders only when a coach_note exists for this exercise in this plan block. */
.ex-block__coach {
  background: var(--bg-subtle);
  border-left: 2px solid var(--accent);
  padding: 10px 12px;
  margin: 0 16px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.ex-block__coach-head {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.ex-block__intensifier {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}
.ex-block__intensifier.is-adjusted-out {
  color: var(--text-faint);
  border-color: var(--text-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ex-block__adjusted-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  flex-wrap: wrap;
}
.ex-block__adjusted-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ex-block__adjusted-deltas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
}
.ex-block__adjusted-deltas span + span::before {
  content: "·";
  margin-right: 8px;
  color: var(--accent);
  opacity: 0.5;
}
.ex-block__adjusted-cause {
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-left: auto;
}
.ex-block__coach-toggle {
  /* Full-width + space-between so the toggle arrow stays at the same far-right
     spot as the expanded coach head (tap the same place to toggle both ways). */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin: 6px 14px 0;
  padding: 4px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ex-block__coach-cues {
  margin: 8px 14px 0;
  padding: 10px 14px;
  background: var(--accent-light);
  border-left: 2px solid var(--accent);
}
.ex-block__coach-cues-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.ex-block__coach-cues ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ex-block__coach-cues li {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}
.ex-block__coach-cues li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background: var(--accent);
}

/* Set-type legend — design-system specimen for the in-row set indicators. */
.set-legend-row {
  display: grid;
  grid-template-columns: 26px auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-faint);
}
.set-legend-row:last-child { border-bottom: none; }
.set-legend-tag {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
}
.set-legend-tag[data-type="warmup"] { color: var(--text-muted); border-color: var(--border); border-style: dashed; }
.set-legend-tag[data-type="drop"] { color: var(--purple); border-color: var(--purple); }
.set-legend-tag[data-type="myo"] { color: var(--accent); border-color: var(--accent); }
.set-legend-tag[data-type="partial"] { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.set-legend-tag[data-type="restpause"] { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.set-legend-tag[data-type="failure"] { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.set-legend-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.set-legend-rx {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Set table + set row — Strong-faithful, single-cell set#/type */
.set-table { display: flex; flex-direction: column; margin: 4px 0 8px; }
.set-table__head {
  display: grid;
  grid-template-columns: 36px 1fr 70px 56px 36px;
  gap: 8px;
  padding: 6px 4px 6px 0;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-faint);
}
.set-table__head span { white-space: nowrap; }
.set-row {
  display: grid;
  grid-template-columns: 36px 1fr 70px 56px 36px;
  gap: 8px;
  align-items: center;
  padding: 8px 4px 8px 0;
  border-bottom: 1px solid var(--border-faint);
}
.set-row:last-child { border-bottom: none; }
.set-row.is-done { opacity: 0.55; }
/* Drop the dim while the set-type menu is open so the popover (a child of the
   dimmed row) is not pulled into the row's group opacity and rendered see-through. */
.set-row.is-done.has-set-menu { opacity: 1; }
.set-row.is-done .set-row__weight,
.set-row.is-done .set-row__reps { color: var(--text-faint); }
.set-row.is-resting { background: var(--accent-light); }
.set-row__num {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.02em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-0);
  cursor: pointer;
  padding: 0;
  transition: all var(--dur-fast) var(--ease);
}
.set-row__num:hover { border-color: var(--text); }
.set-row__num[data-type="warmup"]    { color: var(--text-muted); border-color: var(--border); border-style: dashed; }
.set-row__num[data-type="drop"]      { color: var(--purple); border-color: var(--purple); }
.set-row__num[data-type="myo"]       { color: var(--accent); border-color: var(--accent); }
.set-row__num[data-type="partial"]   { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.set-row__num[data-type="restpause"] { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.set-row__num[data-type="failure"]   { color: var(--red); border-color: var(--red); background: var(--red-bg); }
.set-row__previous {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  background: none; border: none;
  text-align: left;
  padding: 4px 4px 4px 0;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.set-row__previous:hover { background: var(--accent-light); color: var(--accent); }
.set-row__previous:hover .set-row__previous-effort { color: var(--accent); }
.set-row__previous-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row__previous-effort { font-size: 9.5px; color: var(--text-faint); letter-spacing: 0.04em; }
.set-row__previous--empty { color: var(--text-faint); font-style: italic; cursor: default; }
.set-row__previous--empty:hover { background: none; color: var(--text-faint); }
.set-row__weight, .set-row__reps {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-1);
  padding: 8px 10px;
  width: 100%;
  text-align: center;
  letter-spacing: 0.02em;
  appearance: textfield;
  -moz-appearance: textfield;
}
.set-row__weight::-webkit-outer-spin-button, .set-row__weight::-webkit-inner-spin-button,
.set-row__reps::-webkit-outer-spin-button, .set-row__reps::-webkit-inner-spin-button {
  appearance: none; -webkit-appearance: none; margin: 0;
}
.set-row__weight.is-autofill, .set-row__reps.is-autofill { color: var(--text-faint); font-weight: 500; }
.set-row__weight:focus, .set-row__reps:focus { border-color: var(--accent); outline: none; }
.set-row__check {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-0);
  cursor: pointer;
  color: var(--text-faint);
  transition: all var(--dur-fast) var(--ease);
}
.set-row__check svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.set-row__check:hover { border-color: var(--success); }
.set-row.is-done .set-row__check { background: var(--success); border-color: var(--success); color: var(--ink-text); }
.set-row.is-done .set-row__check svg { opacity: 1; }

/* Set-tag — used only in the design-system specimens row (the in-row indicator is .set-row__num) */
.set-tag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius-0);
  cursor: pointer;
}
.set-tag[data-type="warmup"]  { color: var(--text-muted); border-color: var(--border); border-style: dashed; }
.set-tag[data-type="drop"]    { color: var(--purple); border-color: var(--purple); }
.set-tag[data-type="myo"]     { color: var(--accent); border-color: var(--accent); }
.set-tag[data-type="failure"] { color: var(--red); border-color: var(--red); background: var(--red-bg); }

/* Add-exercise persistent row at end of list */
.add-ex-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 16px 16px;
  border: 1.5px dashed var(--border);
  border-left: none; border-right: none;
  background: transparent;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  margin-top: 4px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.add-ex-row:hover { background: var(--accent-light); }
.add-ex-row svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* Exercise row · 3-dot (kebab) trigger — opens .ex-actions menu */
.ex-block__menu {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ex-block__menu::before {
  content: "";
  width: 3.5px;
  height: 3.5px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.ex-block__menu:hover,
.ex-block__menu[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-light);
}
/* Exercise action menu — dropdown opened from .ex-block__menu */
.ex-actions {
  position: absolute;
  top: 50px;
  right: 12px;
  z-index: 30;
  min-width: 240px;
  max-width: 280px;
  background: var(--bg);
  border: 1.5px solid var(--text);
  box-shadow: var(--shadow-md);
  animation: ex-actions-in 170ms var(--ease) both;
}
@keyframes ex-actions-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.ex-actions__item {
  width: 100%;
  min-height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border-faint);
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ex-actions__item:last-child { border-bottom: 0; }
.ex-actions__item:hover { background: var(--bg-elevated); color: var(--accent); }
.ex-actions__item.is-disabled { color: var(--text-faint); cursor: not-allowed; }
.ex-actions__item.is-disabled:hover { background: transparent; color: var(--text-faint); }
.ex-actions__item--danger { color: var(--red); }
.ex-actions__item--danger:hover { background: var(--red-bg); color: var(--red); }

.ex-actions__cue {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint);
}
.ex-actions__cue svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none; stroke-width: 2;
}
.ex-actions__item:hover .ex-actions__cue { color: currentColor; }
.ex-actions__item--danger .ex-actions__cue { color: var(--red); }

.ex-actions__soon {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* + Add set — slim affordance at the bottom of a set-table.
   New exercises always come in with 1 set; user taps this to extend. */
.set-add-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border: 1.5px dashed var(--border);
  background: transparent;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.set-add-row:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.set-add-row svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* Set-row menu (tap on the set-type label opens this; right-click on
   desktop). Shares the same enter motion as .ex-actions so the two
   in-session menus feel consistent. */
.set-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg);
  border: 1.5px solid var(--text);
  box-shadow: var(--shadow-md);
  z-index: 100;
  width: min(264px, calc(100vw - 32px));
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  padding: 4px 0;
  border-radius: var(--radius-0);
  transform-origin: 0 0;
  animation: ex-actions-in 170ms var(--ease) both;
}
/* Flip above the anchor when a downward menu would spill past the fixed nav. */
.set-menu--up {
  top: auto;
  bottom: 100%;
  margin-bottom: 4px;
  transform-origin: 0 100%;
}
@media (prefers-reduced-motion: reduce) {
  .set-menu { animation: none; }
}
.set-menu__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  background: none; border: none; width: 100%; text-align: left;
}
.set-menu__item:hover { background: var(--bg-elevated); color: var(--accent); }
.set-menu__item--destructive { color: var(--red); }
.set-menu__item--destructive:hover { background: var(--red-bg); }
.set-menu__divider { height: 1px; background: var(--border-faint); margin: 4px 0; }

/* Inline resting marker — appears below a just-completed set */
.set-resting-marker {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px 8px 36px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.set-resting-marker__dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: var(--radius-pill);
  animation: pulse 1.2s var(--ease-snap) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}

/* Superset — visual grouping wrapper around 2+ .ex-block members.
   Members look like regular exercises (same head, same rx, same set table);
   the .superset container is the only grouping signal. When a session holds
   more than one superset, alternate between .superset (purple) and
   .superset--alt (indigo) so stacked supersets don't read as one giant pair.
   Caps at two colors — a 3rd loops back to purple. The plan-letter labels
   (C1/C2, D1/D2, …) carry order within each group. No per-member color. */
.superset {
  border-left: 3px solid var(--purple);
  background: var(--purple-bg);
  margin: 4px 0;
  padding: 0;
  border-bottom: 1px solid var(--border-faint);
}
.superset__head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px 4px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--purple);
}
.superset__head svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.superset .ex-block { background: transparent; border-bottom: none; }
.superset .ex-block + .ex-block { border-top: 1px solid var(--border-faint); }

/* Second-superset variant — indigo. Use on the 2nd superset in a session
   (and any even-indexed one beyond, looping every 2). The wrapper left rule +
   tinted background + colored eyebrow carry the differentiation; plan-letter
   chips inside stay muted to match the first superset's chip treatment —
   wrapper color is the at-a-glance signal, the chip text just carries order. */
.superset--alt {
  border-left-color: var(--indigo);
  background: var(--indigo-bg);
}
.superset--alt .superset__head { color: var(--indigo); }

/* Rest bar — sticky bottom, ink surface */
.rest-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 10px 16px 12px;
  z-index: 60;
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease);
  border-top: 1.5px solid var(--ink-bg);
}
.rest-bar.is-active { transform: translateY(0); }
.rest-bar__progress { height: 3px; background: var(--ink-border); margin-bottom: 8px; position: relative; }
.rest-bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--ink-accent); transition: width var(--dur-base) linear; }
.rest-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rest-bar__adjust {
  background: transparent;
  border: 1px solid var(--ink-border);
  color: var(--ink-text-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius-0);
  min-height: 36px;
}
.rest-bar__adjust:hover { color: var(--ink-text); border-color: var(--ink-text-muted); }
.rest-bar__time {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 28px;
  color: var(--ink-text);
  letter-spacing: 0.04em;
  flex: 1;
  text-align: center;
}
.rest-bar__skip {
  background: none; border: none;
  color: var(--ink-text-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 4px;
  cursor: pointer;
  min-height: 36px;
}
.rest-bar__skip:hover { color: var(--ink-accent); }

/* Deviation chip — inline label for swap/add/remove/pr */
.dev-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 1px 6px;
  color: var(--text-muted);
  background: var(--bg);
}
.dev-chip[data-kind="swap"]   { color: var(--purple); border-color: var(--purple); }
.dev-chip[data-kind="add"]    { color: var(--success); border-color: var(--success); }
.dev-chip[data-kind="remove"] { color: var(--text-muted); border-color: var(--border); border-style: dashed; }
.dev-chip[data-kind="pr"]     { color: var(--success); border-color: var(--success); background: var(--success-bg); }
/* "gate" — adjustment from readiness check (e.g. −1 set on shoulders); oxblood since the recommendation came from the engine.
   "cut"  — exercise truncated mid-session (cancelled / felt off); amber for partial-cancel context. */
.dev-chip[data-kind="gate"]   { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.dev-chip[data-kind="cut"]    { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); }
.dev-chip svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Plan + Adjusted strip — two-row, locked. Renders only when planned ≠ adjusted. */
.pa-rx {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 8px 16px 10px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-faint);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.04em;
}
.pa-rx__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
  align-self: center;
}
.pa-rx__val { color: var(--text); font-weight: 600; }
.pa-rx__row.is-planned .pa-rx__val { color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
.pa-rx__row.is-adjusted .pa-rx__label { color: var(--accent); }
.pa-rx__row.is-adjusted .pa-rx__val   { color: var(--accent); font-weight: 700; }

/* Exercise-info tooltip — opens from name (i) tap */
.ex-info {
  background: var(--ink-bg);
  color: var(--ink-text);
  border: 1.5px solid var(--ink-bg);
  padding: 14px 16px 16px;
  margin: 8px 0 14px;
}
.ex-info__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-border);
}
.ex-info__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-text);
}
.ex-info__close {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-text-muted); background: none; border: none; cursor: pointer;
}
.ex-info__close:hover { color: var(--ink-accent); }
.ex-info__image {
  width: 100%; aspect-ratio: 16/9;
  background: rgba(242,237,226,0.06);
  border: 1px solid var(--ink-border);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-text-faint); font-weight: 600;
  position: relative;
}
.ex-info__image svg { width: 28px; height: 28px; stroke: var(--ink-text-faint); fill: none; stroke-width: 1.2; }
.ex-info__image-label {
  position: absolute; bottom: 6px; right: 8px;
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-text-faint);
}
.ex-info__muscles {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-text-muted);
  margin-bottom: 10px;
}
.ex-info__muscles b { color: var(--ink-accent); font-weight: 600; }
.ex-info__steps {
  list-style: decimal;
  padding-left: 16px; margin: 0;
  font-family: var(--font-body); font-size: 12.5px;
  color: var(--ink-text-muted); line-height: 1.5;
}
.ex-info__steps li { margin-bottom: 4px; }
.ex-info__foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-border);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-text-faint);
  display: flex; gap: 14px;
}
.ex-info__foot a { color: var(--ink-accent); text-decoration: none; font-weight: 700; }

/* Reason picker — chip grid + free-text */
.reason-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin: 12px 0 10px;
}
.reason-chip {
  background: var(--bg);
  border: 1.5px solid var(--border);
  padding: 12px 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-0);
  min-height: 48px;
  transition: all var(--dur-fast) var(--ease);
}
.reason-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0; }
.reason-chip:hover { border-color: var(--text); color: var(--text); }
.reason-chip.is-selected { border-color: var(--accent); background: var(--accent-light); color: var(--accent); font-weight: 700; }
.reason-text {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-1);
  padding: 10px 12px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 60px;
}
.reason-text:focus { border-color: var(--accent); outline: none; }
.reason-text::placeholder { color: var(--text-faint); font-style: italic; }

/* Exercise picker overlay — slide-up */
.picker {
  position: absolute; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  z-index: 95;
  transform: translateY(100%);
  transition: transform var(--dur-sheet) var(--ease);
}
.picker.is-open { transform: translateY(0); }
.picker__head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 10px;
  border-bottom: 1.5px solid var(--text);
}
.picker__close {
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.picker__close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.picker__search {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-1);
  padding: 10px 12px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--text);
}
.picker__search::placeholder { color: var(--text-faint); }
.picker__filters {
  display: flex; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border-faint);
  overflow-x: auto;
  scrollbar-width: none;
}
.picker__filters::-webkit-scrollbar { height: 0; }
.picker-filter {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 9px 4px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-0);
}
.picker-filter.is-active { background: var(--accent); color: var(--ink-text); border-color: var(--accent); }
.picker__list { flex: 1; overflow-y: auto; scrollbar-width: none; }
.picker__list::-webkit-scrollbar { width: 0; }
.picker__group-head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding: 14px 16px 6px;
  border-bottom: 1px solid var(--border-faint);
}
.picker__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-faint);
  cursor: pointer;
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left;
}
.picker__row:hover { background: var(--bg-elevated); }
.picker__row-name { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--text); }
.picker__row-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 2px; }
.picker__row-tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* Protocol card (inline pattern — covers all 8 structure types).
   Light surface — sits on chalk like the rest of the session, slightly elevated
   so it visually distinguishes from .ex-block strength rows. */
.proto-card {
  background: var(--bg-elevated);
  color: var(--text);
  margin: 12px 16px;
  border: 1px solid var(--border);
  position: relative;  /* anchor for the .ex-actions dropdown */
}
.proto-card__head {
  padding: 14px 12px 12px 16px;
  border-bottom: 1px solid var(--border-faint);
  display: grid;
  grid-template-columns: 1fr auto auto;  /* third column reserves slot for the kebab */
  align-items: start;  /* top-aligned so multi-line title + rx don't drift the kebab into the middle */
  gap: 10px;
}
.proto-card__head > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.proto-card__head .proto-card__rx { margin-top: 2px; }
/* Reuse the .ex-block__menu kebab on protocol cards for visual consistency,
   but let it flow inside the head's grid instead of being absolutely positioned. */
.proto-card .ex-block__menu { position: static; }
/* Completed protocol — dimmed, no inline CTA, summary content in the body */
.proto-card.is-done { opacity: 0.85; }
.proto-card__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}
.proto-card__type {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.proto-card__rx { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }
.proto-card__body { padding: 12px 16px 12px; }
.proto-card__clock {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  color: var(--text);
  letter-spacing: 0.005em;
  text-align: center;
  margin: 8px 0 12px;
  font-variant-numeric: tabular-nums;
}
/* Clock state modifiers — running (live, green); idle (not started, faint);
   paused (paused mid-protocol, muted). The size also tracks state in the protos. */
.proto-card__clock--running { color: var(--success); }
.proto-card__clock--idle    { color: var(--text-faint); }
.proto-card__clock--paused  { color: var(--text-muted); }
.proto-card__phase-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.proto-card__phase-row b { color: var(--accent); font-weight: 700; }
.proto-card__cta {
  display: flex; width: 100%;
  background: var(--accent); color: var(--text-on-accent);
  border: 0;
  padding: 14px 16px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  min-height: 48px;
  justify-content: space-between;
  align-items: center;
}
.proto-card__cta:hover { background: var(--accent-hover); }
/* Secondary CTA — transparent on the light card surface */
.proto-card__cta--secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  font-size: 11px;
  min-height: 44px;
  padding: 10px;
}
.proto-card__cta--secondary:hover { color: var(--text); border-color: var(--text); background: transparent; }

.proto-rounds { display: flex; gap: 4px; margin-bottom: 18px; justify-content: center; flex-wrap: wrap; }
.proto-round-cell {
  width: 28px; height: 28px;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-faint);
}
.proto-round-cell.is-done { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.proto-round-cell.is-active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--bg-elevated) inset; }
.proto-components {
  background: var(--bg-subtle);
  border-left: 2px solid var(--accent);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.proto-components__head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.proto-component-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0;
  font-family: var(--font-body); font-size: 13px;
  color: var(--text);
}
.proto-component-row + .proto-component-row { border-top: 1px solid var(--border-faint); }
.proto-component-row__rx { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; }

/* Protocol note — free-text block inside a .proto-card.
   Default: tinted background, body text, no rule (description).
   .proto-note--coach: adds left oxblood rule + COACH-style eyebrow (plan-block note). */
.proto-note {
  background: var(--bg-subtle);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.proto-note > p { margin: 0; }
.proto-note__head {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.proto-note--coach {
  border-left: 2px solid var(--accent);
}

/* RIR / RPE numeric chip rows — used at exercise completion */
.rir-row, .rpe-num-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rir-chip, .rpe-num-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-0);
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
}
.rir-chip:hover, .rpe-num-chip:hover { border-color: var(--text); color: var(--text); }
.rir-chip.is-target, .rpe-num-chip.is-target { border-style: dashed; color: var(--text); }
.rir-chip.is-target::after, .rpe-num-chip.is-target::after {
  content: 'rx'; margin-left: 4px;
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600;
}
.rir-chip.is-active, .rpe-num-chip.is-active {
  border-color: var(--accent); border-style: solid;
  background: var(--accent-light); color: var(--accent); font-weight: 700;
}
.rir-chip.is-active.is-target::after, .rpe-num-chip.is-active.is-target::after { color: var(--accent); }

/* Exercise recap — RPE/RIR + note prompt at exercise complete */
.exercise-recap {
  padding: 16px;
  background: var(--bg-elevated);
  border-top: 1.5px solid var(--text);
  border-bottom: 1px solid var(--border-faint);
  margin: 4px 0;
}
.exercise-recap__head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.exercise-recap__notes {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-1);
  padding: 8px 10px;
  font-family: var(--font-body); font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 60px;
}
.exercise-recap__notes::placeholder { color: var(--text-faint); font-style: italic; }
.exercise-recap__skip {
  display: block;
  background: none; border: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px 0 0;
  margin: 6px 0 0 auto;
}

/* Cancel + Finish */
.cancel-question {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.1;
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.cancel-help {
  font-family: var(--font-body); font-size: 13px; line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.finish-hero {
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 24px 20px 20px;
  border-bottom: 1.5px solid var(--ink-bg);
  margin: -16px -20px 18px;
}
/* When the hero follows a date-strip (Today's done-recap variants), drop the
   negative top margin — otherwise the hero pulls up into the date-strip. */
.date-strip + .finish-hero { margin-top: 0; }
.finish-hero__check {
  width: 48px; height: 48px;
  background: var(--success);
  color: var(--ink-text);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  border-radius: var(--radius-0);
}
.finish-hero__check svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 3; }
/* Variants — cancelled session flips the check to amber; milestone PR flips it
   to ink-accent (trophy moment). Keeps the chrome inline-free across recap states. */
.finish-hero__check--amber { background: var(--amber); }
.finish-hero__check--trophy { background: var(--ink-accent); color: var(--ink-bg); }
.finish-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 0.95;
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  color: var(--ink-text);
  margin-bottom: 4px;
}
.finish-hero__sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-text-muted);
  margin-bottom: 14px;
}
.finish-hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink-border);
  padding-top: 12px;
}
.finish-hero__stat { border-right: 1px solid var(--ink-border); padding-right: 10px; }
.finish-hero__stat:last-child { border-right: none; padding-left: 10px; }
.finish-hero__stat:nth-child(2) { padding-left: 10px; }
.finish-hero__stat-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-text-muted);
  margin-bottom: 3px;
}
.finish-hero__stat-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; letter-spacing: 0.005em;
  color: var(--ink-text);
}
/* PR delta / accent values flip to ink-accent (oxblood-on-ink). */
.finish-hero__stat-value--accent { color: var(--ink-accent); }
.finish-section { margin-bottom: 18px; }
.finish-section__head {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 6px; margin-bottom: 8px;
  border-bottom: 1.5px solid var(--text);
}

/* ---------- 12. ONBOARDING & AUTH ---------- */

/* Intake — full-screen question flow on the chalk surface */
.intake-screen {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 18px 20px 24px;
  overflow-y: auto;
  scrollbar-width: none;
  animation: intake-screen-enter var(--dur-screen) var(--ease) both;
  contain: layout paint;
}
.intake-screen::-webkit-scrollbar { width: 0; }
.intake-screen--ink {
  background: var(--ink-bg);
  color: var(--ink-text);
}

.intake-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
}
.intake-progress__cell {
  flex: 1;
  height: 3px;
  background: var(--border);
}
.intake-progress__cell.is-done   { background: var(--accent); }
.intake-progress__cell.is-active { background: var(--accent); }
.intake-screen--ink .intake-progress__cell { background: var(--ink-border); }
.intake-screen--ink .intake-progress__cell.is-done,
.intake-screen--ink .intake-progress__cell.is-active { background: var(--ink-accent); }

.intake-step-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.intake-step-label b { color: var(--accent); font-weight: 700; }
.intake-screen--ink .intake-step-label { color: var(--ink-text-muted); }
.intake-screen--ink .intake-step-label b { color: var(--ink-accent); }

.intake-question {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1.0;
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.intake-question em { font-style: normal; color: var(--accent); }
.intake-screen--ink .intake-question { color: var(--ink-text); }
.intake-screen--ink .intake-question em { color: var(--ink-accent); }
.intake-help {
  font-family: var(--font-body); font-size: 13px; line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 320px;
}
.intake-screen--ink .intake-help { color: var(--ink-text-muted); }

/* Intake option list — large stacked choice cards */
.intake-options {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.intake-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-0);
  padding: 14px 14px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
  min-height: 64px;
}
.intake-option:hover { border-color: var(--text); transform: translateY(-1px); }
.intake-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.intake-option__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-muted);
  flex-shrink: 0;
}
.intake-option__icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.intake-option.is-selected .intake-option__icon { background: var(--accent); color: var(--ink-text); }
.intake-option__icon--initials {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em;
  width: 36px; height: 36px;
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--border);
}
.intake-option.is-selected .intake-option__icon--initials {
  background: var(--accent); color: var(--ink-text);
  border-color: var(--accent);
}
/* Sub-section label inside an intake step (e.g. "Biological sex" + "Age" both on step 2) */
.intake-sublabel {
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 12px 0 6px;
}
.intake-sublabel:first-of-type { margin-top: 0; }
.intake-option__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
  margin-bottom: 2px;
}
.intake-option.is-selected .intake-option__title { color: var(--accent); }
.intake-option__help {
  font-family: var(--font-body); font-size: 12px;
  color: var(--text-muted); line-height: 1.4;
}
.intake-option__check {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-0);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.intake-option__check svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 3; }
.intake-option.is-selected .intake-option__check {
  background: var(--accent); border-color: var(--accent); color: var(--ink-text);
}

@keyframes intake-screen-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Intake actions — sticky bottom */
.intake-actions {
  display: flex; flex-direction: column; gap: 0;
  margin-top: auto;
  padding-top: 18px;
}
.intake-back {
  background: none; border: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer; padding: 10px 0 0;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  display: inline-flex; align-items: center;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px; text-decoration-color: var(--border);
  align-self: flex-start;
}
.intake-back:hover { color: var(--accent); }
.intake-screen--ink .intake-back { color: var(--ink-text-muted); }
.intake-screen--ink .intake-back:hover { color: var(--ink-accent); }

/* Intake input — large text/number field */
.intake-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-1);
  padding: 16px 18px;
  font-family: var(--font-body); font-size: 18px; font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.intake-input:focus { border-color: var(--accent); outline: none; }
.intake-input::placeholder { color: var(--text-faint); }
.intake-input--textarea {
  font-size: 14px; font-weight: 400;
  line-height: 1.55;
  min-height: 132px;
  resize: vertical;
  margin-bottom: 12px;
}

/* CSV Import sheet — Strong / Hevy import flow inside a bottom sheet */
.import-source {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.import-source__btn {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-0);
  cursor: pointer;
  text-align: left;
  min-height: 84px;
  transition: all var(--dur-fast) var(--ease);
}
.import-source__btn:hover { border-color: var(--text); }
.import-source__btn.is-selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.import-source__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}
.import-source__btn.is-selected .import-source__name { color: var(--accent); }
.import-source__hint {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}

.import-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 22px 14px;
  background: var(--bg-subtle);
  border: 2px dashed var(--border);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-align: center;
  margin-bottom: 12px;
}
.import-drop:hover { border-color: var(--accent); background: var(--accent-light); }
.import-drop.is-active { border-color: var(--accent); background: var(--accent-light); border-style: solid; }
.import-drop__icon {
  width: 36px; height: 36px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.import-drop__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.import-drop__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}
.import-drop__sub {
  font-family: var(--font-body); font-size: 11.5px;
  color: var(--text-muted);
}

.import-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: var(--success-bg);
  border-left: 3px solid var(--success);
  margin-bottom: 12px;
}
.import-summary__icon {
  width: 28px; height: 28px;
  background: var(--success);
  color: var(--ink-text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.import-summary__icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.import-summary__main {
  font-family: var(--font-body); font-size: 12.5px;
  color: var(--text);
}
.import-summary__main strong { font-weight: 700; }
.import-summary__sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 2px;
}
.import-summary__remove {
  background: none; border: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  cursor: pointer; padding: 4px;
}
.import-summary__remove:hover { color: var(--red); }

.import-summary--error {
  background: var(--red-bg);
  border-left-color: var(--red);
}
.import-summary--error .import-summary__icon { background: var(--red); }
.import-summary--warn {
  background: var(--yellow-bg);
  border-left-color: var(--yellow);
}
.import-summary--warn .import-summary__icon { background: var(--yellow); }

.import-checks {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px;
}
.import-checks__row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 4px 0;
}
.import-checks__row svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.import-checks__row.is-pass { color: var(--success); }
.import-checks__row.is-fail { color: var(--red); }
.import-checks__row.is-warn { color: var(--yellow); }
.import-checks__row b { color: var(--text); font-weight: 700; }

.import-privacy {
  display: flex; gap: 10px;
  align-items: flex-start;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-left: 2px solid var(--text-faint);
  font-family: var(--font-body); font-size: 11.5px;
  color: var(--text-muted); line-height: 1.5;
}
.import-privacy__icon {
  width: 14px; height: 14px;
  stroke: var(--text-muted);
  fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 2px;
}
.import-privacy strong { color: var(--text); font-weight: 600; }

/* CSV import — parse-progress sheet body. Same brand-mark + pulse-ring + step-list
   language as the boot loader and intake generating screen, just inside the bottom
   sheet on a chalk surface (no full ink takeover — the sheet itself is the takeover). */
.import-progress {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 28px 18px;
  text-align: center;
}
.import-progress__pulse {
  width: 56px; height: 56px;
  background: var(--accent);
  color: var(--ink-text);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 6px;
}
.import-progress__pulse svg {
  width: 38px; height: 38px;
  fill: currentColor;
  stroke: none;
  display: block;
}
.import-progress__pulse::after {
  content: '';
  position: absolute; inset: -8px;
  border: 2px solid var(--accent);
  opacity: 0.45;
  animation: boot-pulse 1.6s var(--ease-snap) infinite;
}
.import-progress__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}
.import-progress__sub {
  font-family: var(--font-body); font-size: 12.5px;
  color: var(--text-muted);
}
.import-progress__steps {
  list-style: none; margin: 8px 0 0; padding: 0;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
}
.import-progress__steps li { display: flex; align-items: center; gap: 8px; }
.import-progress__steps li::before {
  content: ''; width: 6px; height: 6px;
  background: var(--text-faint);
  flex-shrink: 0;
}
.import-progress__steps li.is-done::before { background: var(--accent); }
.import-progress__steps li.is-active::before { background: var(--accent); animation: pulse 1.2s var(--ease-snap) infinite; }
.import-progress__steps li.is-done   { color: var(--text); }
.import-progress__steps li.is-active { color: var(--text); font-weight: 700; }

/* Intake flow map — conditional paths reference */
.flow-map {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  padding: 8px 0 0;
}
@media (max-width: 800px) {
  .flow-map { grid-template-columns: 1fr; }
}
.flow-map__head {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
  margin: 0 0 12px;
}
.flow-chain {
  display: flex; flex-direction: column; gap: 0;
}
.flow-node {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  padding: 9px 12px;
  position: relative;
}
.flow-node--ink {
  background: var(--ink-bg);
  color: var(--ink-text);
  border-color: var(--ink-bg);
}
.flow-node--ink .flow-node__num { color: var(--ink-accent); }
.flow-node--ink .flow-node__meta { color: var(--ink-text-muted); }
.flow-node--cond {
  border: 1.5px dashed var(--accent);
  background: var(--accent-light);
}
.flow-node--cond .flow-node__num { color: var(--accent); }
.flow-node--opt {
  background: var(--bg-subtle);
  border-color: var(--border-faint);
}
.flow-node--opt .flow-node__num { color: var(--text-faint); }
.flow-node__num {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.flow-node__label {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.flow-node__meta {
  font-family: var(--font-mono); font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.flow-link {
  width: 2px; height: 10px;
  background: var(--border);
  margin-left: 28px;
}
.flow-branch-note {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 6px 0 6px 14px;
  margin-left: 26px;
  border-left: 2px dashed var(--accent);
  line-height: 1.55;
}
.flow-branch-note em { color: var(--accent); font-style: normal; font-weight: 700; }
.flow-branch-note strong { color: var(--text); font-weight: 700; }

.path-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono); font-size: 11px;
  margin-bottom: 6px;
}
.path-matrix th, .path-matrix td {
  border: 1px solid var(--border-faint);
  padding: 8px 10px;
  text-align: left;
  letter-spacing: 0.04em;
  vertical-align: top;
}
.path-matrix th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--text-faint);
  background: var(--bg-subtle);
}
.path-matrix td b { color: var(--accent); font-weight: 700; }
.path-matrix tr:hover { background: var(--bg-subtle); }
.path-matrix__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--text);
}

.path-tests {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.55;
  color: var(--text);
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.path-tests li {
  padding: 8px 0;
  border-top: 1px solid var(--border-faint);
}
.path-tests li:last-child { border-bottom: 1px solid var(--border-faint); }
.path-tests li b { color: var(--accent); font-weight: 700; }
.path-tests li code {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-subtle); padding: 1px 4px;
  letter-spacing: 0.04em;
}

/* Intake upload — Strong / Hevy CSV affordance on the History pre-step */
.intake-upload {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--ink-bg);
  color: var(--ink-text);
  border: 1.5px solid var(--ink-bg);
  border-radius: var(--radius-0);
  padding: 16px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all var(--dur-fast) var(--ease);
  min-height: 64px;
  margin-bottom: 4px;
}
.intake-upload:hover { border-color: var(--ink-accent); }
.intake-upload__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-accent);
  color: var(--ink-text);
  flex-shrink: 0;
}
.intake-upload__icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.intake-upload__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-text);
  margin-bottom: 2px;
}
.intake-upload__help {
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-text-muted); line-height: 1.4;
}
.intake-upload__arrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px;
  color: var(--ink-accent);
}

/* Intake "what we know" signals — recap state on History pre-step */
.intake-signal-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-faint);
}
.intake-signal-row:last-of-type { border-bottom: 1px solid var(--border-faint); }
.intake-signal-row__label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
  flex-shrink: 0;
}
.intake-signal-row__value {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text);
  text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap;
}
.intake-signal-row__value em { font-style: normal; color: var(--accent); }
.intake-signal-row__value strong { color: var(--accent); font-weight: 700; }
.intake-signal-row__value.is-display {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: 0.02em;
}
.intake-signal-row__unit {
  font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted); letter-spacing: 0.04em;
  margin-left: 4px;
}
.intake-signal-row__delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--success);
}
.intake-signal-row__delta svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intake-signal-section {
  padding: 12px 0;
  border-top: 1px solid var(--border-faint);
}
.intake-signal-section__head {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
  margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.intake-signal-section__head em { font-style: normal; color: var(--text-muted); font-weight: 500; letter-spacing: 0.04em; }

.intake-disclaimer {
  display: flex; gap: 10px;
  align-items: flex-start;
  margin-top: 10px; margin-bottom: 4px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-faint);
  border-left: 3px solid var(--text-faint);
  font-family: var(--font-body); font-size: 11.5px;
  color: var(--text-muted); line-height: 1.5;
}
.intake-disclaimer strong { color: var(--text); font-weight: 600; }
.intake-disclaimer__icon {
  width: 16px; height: 16px;
  stroke: var(--text-muted);
  fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}
.intake-disclaimer span { min-width: 0; }

/* Intake chip-grid (e.g. days/week) */
.intake-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 22px;
}
.intake-grid-cell {
  aspect-ratio: 1;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
}
.intake-grid--plan-length .intake-grid-cell {
  aspect-ratio: auto;
  min-height: 44px;
  padding: 0 8px;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
}
.intake-grid-cell:hover { border-color: var(--text); color: var(--text); }
.intake-grid-cell.is-selected {
  background: var(--accent); border-color: var(--accent);
  color: var(--ink-text);
}

/* Generating-plan hero — ink takeover with FYC flame mark + pulse ring.
   Visual language matches the post-auth boot loader: hard-cut square mark,
   square ring `::after` (no border-radius), `boot-pulse` keyframe, hard-cut
   step dots. The two surfaces are siblings — one bridges sign-in to Home,
   the other bridges intake-complete to the new plan; they must feel like
   the same "we're working on it" beat. */
.gen-hero {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px;
  text-align: center;
  background: var(--ink-bg);
  color: var(--ink-text);
  gap: 16px;
}
.gen-hero__pulse {
  width: 64px; height: 64px;
  background: var(--ink-accent);
  color: var(--ink-text);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 12px;
}
.gen-hero__pulse svg {
  width: 44px; height: 44px;
  fill: currentColor;
  stroke: none;
  display: block;
}
.gen-hero__pulse::after {
  content: '';
  position: absolute; inset: -10px;
  border: 2px solid var(--ink-accent);
  opacity: 0.45;
  animation: boot-pulse 1.6s var(--ease-snap) infinite;
}
.gen-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 0.95;
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  color: var(--ink-text);
}
.gen-hero__title em { font-style: normal; color: var(--ink-accent); }
.gen-hero__sub {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-text-muted); line-height: 1.55;
  max-width: 280px;
}
.gen-hero__steps {
  list-style: none; margin: 8px 0 0; padding: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-text-muted);
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.gen-hero__steps li { display: flex; align-items: center; gap: 8px; }
.gen-hero__steps li::before {
  content: ''; width: 6px; height: 6px;
  background: var(--ink-text-faint);
  flex-shrink: 0;
}
.gen-hero__steps li.is-done::before { background: var(--ink-accent); }
.gen-hero__steps li.is-active::before { background: var(--ink-accent); animation: pulse 1.2s var(--ease-snap) infinite; }
.gen-hero__steps li.is-done    { color: var(--ink-text); }
.gen-hero__steps li.is-active  { color: var(--ink-text); font-weight: 700; }

/* Sign-in — chalk centered hero + email/code input */
.signin-screen {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 32px 24px 24px;
  overflow-y: auto;
  scrollbar-width: none;
}
.signin-screen::-webkit-scrollbar { width: 0; }
.signin-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.signin-eyebrow::before {
  content: ''; display: inline-block;
  width: 22px; height: 1.5px; background: var(--accent);
}
.signin-headline {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 0.95;
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  color: var(--text); margin-bottom: 8px;
}
.signin-headline em { font-style: normal; color: var(--accent); }
.signin-help {
  font-family: var(--font-body); font-size: 14px;
  color: var(--text-muted); line-height: 1.55;
  margin-bottom: 28px;
  max-width: 320px;
}
.signin-help strong { color: var(--text); font-weight: 600; }

/* Code input — 6 boxes */
.code-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-bottom: 18px;
}
.code-cell {
  aspect-ratio: 1;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 24px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.code-cell.is-active { border-color: var(--accent); }
.code-cell.is-empty { color: var(--text-faint); }

.signin-resend {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); letter-spacing: 0.04em;
  text-align: center;
}
.signin-resend a { color: var(--accent); font-weight: 600; }

/* (Sign-in success "delight cascade" was removed in v1.5 — after code entry, the user
   routes straight to the post-auth Boot loader on its way to Home. CSS and the four
   keyframes (signin-stamp-in / signin-underline-draw / signin-receipt-in / signin-sub-in)
   were deleted with the frame; see Sign-in flow § Step 3 for the current handoff and
   the v1.5 changelog entry for the reasoning.) */

/* ---------- 13. SYSTEM SURFACES ---------- */

/* Settings screen layout */
.settings-screen {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px 0 32px;
}
.settings-screen::-webkit-scrollbar { width: 0; }
.settings-section { margin-bottom: 22px; }
.settings-section__head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 20px 8px;
  margin-bottom: 0;
}
.settings-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  background: var(--bg);
  border: 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.settings-row + .settings-row { border-top: none; }
.settings-row:hover { background: var(--bg-elevated); }
.settings-row__label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}
.settings-row__help {
  font-family: var(--font-body); font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.settings-row__value {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted); font-weight: 500;
  letter-spacing: 0.04em;
}
.settings-row__value.is-accent { color: var(--accent); font-weight: 700; }
.settings-row--destructive .settings-row__label { color: var(--red); }
.settings-row--destructive:hover { background: var(--red-bg); }

/* Toggle switch */
.toggle {
  width: 44px; height: 24px;
  background: var(--border);
  border-radius: var(--radius-pill);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--bg);
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease);
}
.toggle.is-on { background: var(--accent); }
.toggle.is-on::after { transform: translateX(20px); }

/* Segment switcher (units kg/lb) */
.segment {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 2px;
  flex-shrink: 0;
}
.segment__option {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 12px;
  border: none; background: none; cursor: pointer;
  border-radius: var(--radius-1);
}
.segment__option.is-active { background: var(--accent); color: var(--ink-text); }

/* --- Settings: Account redesign / Variation A (2026-06) --- */
.settings-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.settings-section__note {
  font-family: var(--font-body); font-size: 12px; line-height: 1.45;
  color: var(--text-muted); padding: 0 20px 10px;
}

/* Plan defaults read as a distinct class of setting: accent-ruled, inset. */
.settings-section--plan {
  margin: 0 20px 22px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--bg-subtle); padding-top: 12px;
}
.settings-section--plan .settings-section__head,
.settings-section--plan .settings-section__note { padding-inline: 14px; }
.settings-section--plan .settings-row { background: transparent; padding-inline: 14px; border-top: 0; border-bottom: 0; }
.settings-section--plan .settings-row + .settings-row { border-top: 1px solid var(--border-faint); }
.settings-section--plan .settings-row:hover { background: var(--bg-elevated); }

/* Wide choices stack to a full-width segment under the label. */
.settings-row--stacked { grid-template-columns: 1fr; gap: 10px; }
.settings-row--stacked .segment { display: flex; width: 100%; }
.settings-row--stacked .segment__option { flex: 1 1 0; min-width: 0; }

/* Age — inline number field. */
.settings-num {
  display: inline-flex; align-items: stretch; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-1); overflow: hidden;
}
.settings-num input {
  width: 56px; min-height: 38px; padding: 0 8px; border: 0; background: transparent;
  font-family: var(--font-mono); font-size: 14px; text-align: center; color: var(--text);
}
.settings-num input:focus-visible { outline: none; background: var(--accent-light); }
.settings-num button {
  min-height: 38px; padding: 0 12px; border: 0; border-left: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* Settings controls clear the 44px touch target without inflating global density. */
.settings-row .segment__option {
  padding: 9px 14px; min-height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
}
.settings-row .toggle { width: 48px; height: 28px; }
.settings-row .toggle::after { width: 24px; height: 24px; }
.settings-row .toggle.is-on::after { transform: translateX(20px); }

/* Feedback FAB sheet — ink top, chalk body */
.fb-context {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.fb-context svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Post-auth boot screen — ink takeover loader between sign-in and Home state determination.
   Also fires on cold-launch with persisted session and on background→foreground resume after
   long sleep. Designed to bridge the data-load wait without flickering through default states. */
.boot-screen {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 36px 24px 0;
  position: relative;
  text-align: center;
  gap: 14px;
}
.boot-screen__mark {
  width: 64px; height: 64px;
  background: var(--ink-accent);
  color: var(--ink-text);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 8px;
}
.boot-screen__mark svg {
  width: 44px; height: 44px;
  fill: currentColor;
  stroke: none;
  display: block;
}
.boot-screen__mark::after {
  content: '';
  position: absolute; inset: -10px;
  border: 2px solid var(--ink-accent);
  opacity: 0.45;
  animation: boot-pulse 1.6s var(--ease-snap) infinite;
}
@keyframes boot-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1.55); opacity: 0; }
}
.boot-screen__eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-accent); font-weight: 700;
}
.boot-screen__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.0;
  letter-spacing: 0.005em; text-transform: uppercase;
  color: var(--ink-text);
  max-width: 280px;
}
.boot-screen__title em { font-style: normal; color: var(--ink-accent); }
.boot-screen__steps {
  list-style: none; margin: 8px 0 0; padding: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-text-muted);
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.boot-screen__steps li { display: flex; align-items: center; gap: 8px; }
.boot-screen__steps li::before {
  content: ''; width: 6px; height: 6px;
  background: var(--ink-text-faint);
  flex-shrink: 0;
}
.boot-screen__steps li.is-done::before   { background: var(--ink-accent); }
.boot-screen__steps li.is-active::before { background: var(--ink-accent); animation: pulse 1.2s var(--ease-snap) infinite; }
.boot-screen__steps li.is-done   { color: var(--ink-text); }
.boot-screen__steps li.is-active { color: var(--ink-text); font-weight: 700; }

/* Thin progress rail at the bottom — animates 0→100% over the minimum-display window
   (or until data-confirmed, whichever is later). Pure visual; not bound to real progress. */
.boot-screen__bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ink-border);
  overflow: hidden;
}
.boot-screen__bar-fill {
  height: 100%;
  background: var(--ink-accent);
  width: 0;
  animation: boot-bar-fill 1400ms var(--ease) forwards;
}
@keyframes boot-bar-fill {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* Reduced motion — kill the pulse + bar animation, hold final state.
   Applies to every brand-mark loader: boot, intake generating, CSV parse progress. */
@media (prefers-reduced-motion: reduce) {
  .boot-screen__mark::after,
  .gen-hero__pulse::after,
  .import-progress__pulse::after { animation: none; opacity: 0.3; }
  .boot-screen__steps li.is-active::before,
  .gen-hero__steps li.is-active::before,
  .import-progress__steps li.is-active::before { animation: none; }
  .boot-screen__bar-fill { animation: none; width: 100%; }
}

/* Save-status banner — sticky top of session/screen */
.save-status {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; font-weight: 500;
  border-bottom: 1px solid var(--border-faint);
  background: var(--bg-elevated);
  color: var(--text-muted);
}
.save-status__dot {
  width: 8px; height: 8px;
  background: var(--text-faint);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.save-status.is-saving      { background: var(--bg-subtle); color: var(--text-muted); }
.save-status.is-saving .save-status__dot { background: var(--accent); animation: pulse 1.2s var(--ease-snap) infinite; }
.save-status.is-saved       { background: var(--success-bg); color: var(--success); }
.save-status.is-saved .save-status__dot { background: var(--success); }
.save-status.is-error       { background: var(--red-bg); color: var(--red); }
.save-status.is-error .save-status__dot { background: var(--red); }
.save-status__msg { flex: 1; }
.save-status__retry {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
  background: none; border: none; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.save-status__retry:hover { color: var(--red); }

/* Stale-session resume banner */
.stale-banner {
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1.5px solid var(--ink-bg);
}
.stale-banner__icon {
  width: 32px; height: 32px;
  background: var(--ink-accent);
  color: var(--ink-bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stale-banner__icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.stale-banner__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-text);
  margin-bottom: 2px;
}
.stale-banner__sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-text-muted);
}
.stale-banner__actions { display: flex; gap: 6px; }
.stale-banner__btn {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink-accent); color: var(--ink-bg);
  border: none; padding: 8px 12px;
  cursor: pointer; min-height: 32px;
}
.stale-banner__btn--ghost { background: transparent; color: var(--ink-text-muted); border: 1px solid var(--ink-border); }
.stale-banner__btn--ghost:hover { color: var(--ink-text); }

/* ---------- Messaging: toast · inline error · confirmation ---------- */
/* Toast — transient, self-dismissing confirmation. Bottom-center, ink pill.
   For things that succeeded; never for errors that need a decision or retry. */
.feedback-toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 68px);
  transform: translateX(-50%) translateY(10px);
  padding: 10px 20px; border-radius: var(--radius-1);
  background: var(--text); color: var(--bg);
  font-family: var(--font-mono); font-size: 13px; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 140;
  transition: opacity 0.25s, transform 0.25s;
}
.feedback-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Static doc rendering of the toast (specimens can't be position:fixed). */
.feedback-toast--static,
.feedback-toast--static.visible { position: static; transform: none; opacity: 1; }

/* Canonical text input. */
.field-input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-1);
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px;
}
.field-input:focus-visible { outline: none; border-color: var(--accent); background: var(--accent-light); }

/* Inline field error — sits directly under the input it refers to. */
.field-error {
  display: block; margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--red);
}
/* The input it describes gets the error ring. */
.field-input.is-error { border-color: var(--red); background: var(--red-bg); }

/* Ink confirmation — full-screen takeover for weighty / destructive choices
   (abandon plan, sign out, delete). Lighter confirmations use a sheet. */
.ink-confirmation {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: 48px 24px 24px;
  background: var(--ink-bg); color: var(--ink-text);
}
.ink-confirmation__eyebrow { margin-bottom: 14px; color: var(--ink-accent); }
.ink-confirmation__title {
  max-width: 320px; margin: 0 0 12px; color: var(--ink-text);
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  font-size: 42px; line-height: 0.92;
}
.ink-confirmation__body {
  max-width: 340px; margin: 0 0 18px; color: var(--ink-text-muted);
  font-size: 14px; line-height: 1.55;
}
.ink-confirmation__body strong { color: var(--ink-text); font-weight: 700; overflow-wrap: anywhere; }
.ink-confirmation__meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%;
  margin: 8px 0 18px; padding: 10px 0;
  border-top: 1px solid var(--ink-border); border-bottom: 1px solid var(--ink-border);
}
.ink-confirmation__meta span {
  min-width: 0; padding: 0 8px; border-right: 1px solid var(--ink-border);
  color: var(--ink-text-muted); font-family: var(--font-mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: 0.14em; line-height: 1.35;
  text-align: center; text-transform: uppercase; overflow-wrap: anywhere;
}
.ink-confirmation__meta span:first-child { padding-left: 0; }
.ink-confirmation__meta span:last-child { padding-right: 0; border-right: 0; }
.ink-confirmation__meta em { color: var(--ink-accent); font-style: normal; }
.ink-confirmation__actions { width: 100%; margin-top: auto; }

/* Offline / connectivity banner — pinned under the header when the app is
   degraded but still usable (boot 8-sec cap → cached Home; lost connection).
   Oxblood = attention, not failure; persists until retry succeeds or dismiss. */
.offline-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: var(--accent); color: var(--text-on-accent);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent-hover);
}
.offline-banner__dot {
  width: 8px; height: 8px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--text-on-accent);
}
.offline-banner__msg { flex: 1; min-width: 0; }
/* Scoped above .btn--on-ink / .btn--ghost-on-ink so the banner's chalk-on-oxblood
   treatment wins — the on-ink button skin would otherwise render dark text. */
.offline-banner .offline-banner__action {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-on-accent); background: none; border: 0; border-radius: 0; cursor: pointer;
  padding: 4px 10px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.offline-banner .offline-banner__action:hover { background: none; color: var(--text-on-accent); opacity: 0.85; }

/* ---------- Forms & inputs ---------- */
.field { display: block; margin-bottom: 16px; }
.field-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.field-help { margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
textarea.field-input { min-height: 96px; line-height: 1.5; resize: vertical; }
select.field-input {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}

/* ---------- Chips & badges ---------- */
/* One small-label family. Square by default (Fieldhouse hard-cut); --pill for the
   readiness / RPE round chips. Consolidates .frame-tag, .status-pill, .drill-status,
   .fb-context, the Soon pill, .r-pill, .rpe-chip. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; min-height: 22px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
}
.chip svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.chip--accent { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.chip--solid  { color: var(--text-on-accent); background: var(--accent); border-color: var(--accent); }
.chip--good   { color: var(--success); background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.chip--warn   { color: var(--yellow);  background: var(--yellow-bg);  border-color: color-mix(in srgb, var(--yellow) 40%, var(--border)); }
.chip--bad    { color: var(--red);     background: var(--red-bg);     border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.chip--pill   { border-radius: var(--radius-pill); }
/* Selectable choice chip — a tappable tag in a chip group (feedback reasons,
   filters). Outline-selected to read as a choice, not a status. 44px target. */
.chip--choice {
  min-height: 44px; padding: 9px 12px; cursor: pointer;
  font-size: 11px; color: var(--text-muted);
  background: var(--bg); border-color: var(--border);
}
.chip--choice svg { width: 14px; height: 14px; }
.chip--choice:hover { color: var(--text); border-color: var(--text); }
.chip--choice.is-selected { color: var(--accent); background: var(--accent-light); border-color: var(--accent); }
.chip--choice.is-selected svg { color: var(--accent); }

/* Block review — ink celebratory transition */
.block-review {
  flex: 1;
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 32px 24px 24px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
}
.block-review::-webkit-scrollbar { width: 0; }
.block-review__eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-accent);
  font-weight: 600;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.block-review__eyebrow::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px;
  background: var(--ink-accent);
}
.block-review__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; line-height: 0.92;
  letter-spacing: var(--display-tracking); text-transform: uppercase;
  color: var(--ink-text);
  margin-bottom: 18px;
}
.block-review__title em { font-style: normal; color: var(--ink-accent); display: block; }
.block-review__lede {
  font-family: var(--font-body); font-size: 15px;
  color: var(--ink-text-muted); line-height: 1.55;
  margin-bottom: 22px;
  max-width: 320px;
}
.block-review__lede strong { color: var(--ink-text); font-weight: 600; }
.block-review__lede em { color: var(--ink-accent); font-style: normal; font-weight: 700; }

/* Wins/Misses dual stack */
.review-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--ink-border);
  border: 1px solid var(--ink-border);
  margin-bottom: 22px;
}
.review-col { background: var(--ink-bg); padding: 14px 12px; }
.review-col__head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-text-muted);
  margin-bottom: 8px;
}
.review-col__head.is-wins { color: var(--success); }
.review-col__head.is-miss { color: var(--ink-accent); }
.review-col ul { list-style: none; padding: 0; margin: 0; }
.review-col li {
  font-family: var(--font-body); font-size: 12.5px;
  color: var(--ink-text); line-height: 1.45;
  padding: 6px 0;
  border-top: 1px solid var(--ink-border);
}
.review-col li:first-child { border-top: none; }
.review-col li b { color: var(--ink-accent); font-weight: 700; }

/* Insights drilldown — bottom-sheet variant.
   .sheet--drill pushes close button into the handle zone (top: 10px)
   and adds generous body padding so title + status chip sit below it. */
.sheet--drill { height: 75%; max-height: 75%; }
.sheet--drill .sheet__handle { position: relative; z-index: 3; }
.sheet--drill .sheet__close {
  top: 10px;
  right: 14px;
  z-index: 4;
  background: var(--bg);
  color: var(--text-muted);
  box-shadow: 0 0 0 8px var(--bg);
}
.sheet--drill .sheet__close:hover,
.sheet--drill .sheet__close:focus-visible {
  color: var(--text);
}
.sheet--drill .sheet__body { padding: 24px 20px 28px; }
.drill-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  /* Clear the absolute close button (right:10px + 36px) so the chip can't slide under the X. */
  padding-right: 52px;
  border-bottom: 1.5px solid var(--text);
}
.drill-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
}
.drill-title em { font-style: normal; color: var(--accent); }
.drill-status {
  flex-shrink: 0;
  margin-top: 1px;
  white-space: nowrap;
}
.drill-status.chip {
  min-height: 0;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-0);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1;
}
.drill-status.chip--good {
  background: var(--success);
  border-color: var(--success);
  color: var(--text-on-accent);
}
.drill-status.chip--warn {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--text-on-accent);
}
.drill-status.chip--bad {
  background: var(--red);
  border-color: var(--red);
  color: var(--text-on-accent);
}
.drill-status.chip:not(.chip--good):not(.chip--warn):not(.chip--bad) {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.drill-summary {
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-muted); line-height: 1.5;
  margin-bottom: 14px;
}
.drill-summary b { color: var(--accent); font-weight: 700; }
.drill-evidence {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 14px 0 8px;
}
.drill-evidence-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.drill-evidence-list li {
  font-family: var(--font-body); font-size: 12.5px;
  color: var(--text); line-height: 1.45;
  padding-left: 16px;
  position: relative;
}
.drill-evidence-list li::before {
  content: '';
  position: absolute; left: 2px; top: 7px;
  width: 5px; height: 5px;
  background: var(--accent);
}
.drill-evidence-list li b { color: var(--accent); font-weight: 700; }

/* Trajectory drill-down — stats row, table, bars, formula, felt chips */
.drill-stats {
  display: flex; gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: var(--space-4);
}
.drill-stat { flex: 1; }
.drill-stat__label {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 2px;
}
.drill-stat__value {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
}
.drill-stat__value--sm { font-size: 14px; }
.drill-tone--good { color: var(--success); }
.drill-tone--bad { color: var(--red); }
.drill-tone--accent { color: var(--accent); }
.drill-tone--muted { color: var(--text-muted); }

.drill-table {
  width: 100%; border-collapse: collapse;
}
.drill-th {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--text-faint); padding: 0 0 var(--space-2);
}
.drill-th--left,
.drill-td--left { text-align: left; }
.drill-th--center,
.drill-td--center { text-align: center; }
.drill-th--right,
.drill-td--right { text-align: right; }
.drill-row { border-top: 1px solid var(--border-faint); }
.drill-row.is-empty { opacity: 0.55; }
.drill-row.is-deload { color: var(--text-muted); text-decoration: line-through; }
.drill-td { padding: var(--space-3) 0; font-size: var(--size-sm); vertical-align: middle; }
.drill-td--mono { font-family: var(--font-mono); font-weight: 600; }
.drill-td__name { font-weight: 600; }
.drill-td__sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.drill-td--ready-green { color: var(--success); }
.drill-td--ready-yellow { color: var(--yellow); }
.drill-td--ready-red { color: var(--accent); }
.drill-td--ready-null { color: var(--text-muted); }

.drill-felt-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 1px 6px;
  color: var(--text-muted);
}
.drill-felt-chip[data-felt="easy"]     { color: var(--success); border-color: var(--success); }
.drill-felt-chip[data-felt="moderate"] { color: var(--amber); border-color: var(--amber); }
.drill-felt-chip[data-felt="hard"]     { color: var(--accent); border-color: var(--accent); }
.drill-felt-chip[data-felt="all-out"]  { color: var(--text); border-color: var(--text); background: var(--bg-elevated); }

/* Efficiency chart — conditioning drill-down.
   Bars grow from a 1.0 baseline (center of the chart area).
   Above = improving, below = regressing. Uses CSS custom property --eff
   on each bar to set height via inline style. The baseline is a 1px rule
   at 50% (representing eff = 1.0 in a 0.6–1.4 range). */
.drill-eff-chart {
  display: flex; gap: 6px; margin-bottom: 4px;
}
.drill-eff-chart__y {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono); font-size: 8px; color: var(--text-faint);
  width: 32px; flex-shrink: 0;
}
.drill-eff-chart__area {
  flex: 1; height: 72px; position: relative;
  border-bottom: 1px solid var(--border-faint);
}
.drill-eff-chart__baseline {
  position: absolute; top: 50%; left: 0; right: 0;
  border-top: 1px dashed var(--border);
}
.drill-eff-chart__bars {
  display: flex; align-items: stretch; gap: 4px;
  height: 100%; position: relative;
}
.drill-eff-bar {
  flex: 1; position: relative;
}
.drill-eff-bar::after {
  content: '';
  position: absolute; left: 0; right: 0;
  transition: height var(--dur-base) var(--ease);
}
.drill-eff-bar.is-above::after {
  bottom: 50%;
  height: max(5px, calc((var(--eff) - 1.0) / 0.4 * 50%));
  background: var(--success); opacity: 0.65;
}
.drill-eff-bar.is-below::after {
  top: 50%;
  height: max(5px, calc((1.0 - var(--eff)) / 0.4 * 50%));
  background: var(--accent); opacity: 0.55;
}
.drill-eff-bar.is-empty::after {
  bottom: 50%; height: 2px;
  background: var(--border-faint);
}
.drill-eff-bar.is-peak::after {
  opacity: 0.85;
}

/* Per-week detail rows — compact cards replacing the 5-column table.
   Each row: week label | context (readiness dot + soreness + felt chip) | eff value.
   Vertical padding matches .drill-td (space-3 = 12px) for rhythm parity
   with the other three drill-down sheets. */
.drill-week-rows {
  margin-bottom: var(--space-4);
}
.drill-week-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-faint);
}
.drill-week-row__wk {
  font-family: var(--font-mono); font-size: var(--size-sm); font-weight: 600;
  width: 28px; flex-shrink: 0;
}
.drill-week-row__ctx {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-size: var(--size-sm); min-height: 20px;
}
.drill-week-row__eff {
  font-family: var(--font-mono); font-size: var(--size-sm); font-weight: 700;
  text-align: right; min-width: 36px;
}
.drill-week-row.is-empty {
  opacity: 0.55;
}
.drill-ready-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.drill-sore-tag {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--amber);
}

/* Bar chart with optional Y-axis.
   .drill-chart wraps .drill-y-axis + .drill-bars for side-by-side layout. */
.drill-chart {
  display: flex; gap: 6px; margin-bottom: 4px;
}
.drill-y-axis {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono); font-size: 8px; color: var(--text-faint);
  padding-bottom: 1px; width: 32px; flex-shrink: 0;
}
.drill-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 64px; flex: 1;
  border-bottom: 1px solid var(--border-faint);
}
.drill-bar {
  flex: 1; min-height: 2px;
  background: var(--border-faint); transition: height var(--dur-base) var(--ease);
}
.drill-bar.is-active { background: var(--accent); opacity: 0.6; }
.drill-bar.is-deload { background: var(--border-faint); opacity: 0.5; }

.drill-bar-labels {
  display: flex; justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-left: 38px;
}
.drill-bar-labels span {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-faint);
}
.drill-bar-labels .is-deload {
  color: var(--text-muted); text-decoration: line-through;
}

/* Contribution grid — weeks as ROWS, days as COLUMNS.
   Reads like a calendar: scan left-to-right for a week's pattern.
   Cell colored by readiness (green/yellow/red). */
.drill-grid-wrap {
  margin-bottom: var(--space-4);
}
.drill-grid-head {
  display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 2px;
  margin-bottom: 2px;
}
.drill-grid-head span {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-faint); text-align: center;
}
.drill-grid-week {
  display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 2px;
  margin-bottom: 2px;
}
.drill-grid-week__label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: var(--text-faint); display: flex; align-items: center;
}
.drill-grid__cell {
  aspect-ratio: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-faint);
}
.drill-grid__cell.is-green  { background: var(--success); border-color: var(--success); opacity: 0.75; }
.drill-grid__cell.is-yellow { background: var(--yellow);  border-color: var(--yellow);  opacity: 0.75; }
.drill-grid__cell.is-red    { background: var(--accent);  border-color: var(--accent);  opacity: 0.65; }
.drill-grid__cell.is-active { background: var(--text-muted); border-color: var(--text-muted); opacity: 0.45; }
.drill-grid__cell.is-today {
  outline: 1.5px solid var(--text);
  outline-offset: -1px;
}
.drill-grid__cell.is-future {
  background: transparent; border-color: transparent;
}
.drill-grid-legend {
  display: flex; gap: 10px; margin-top: 8px;
}
.drill-grid-legend__item {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-faint);
}
.drill-grid-legend__swatch {
  display: inline-block; width: 8px; height: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border-faint);
}
.drill-grid-legend__swatch.is-green  { background: var(--success); border-color: var(--success); opacity: 0.75; }
.drill-grid-legend__swatch.is-yellow { background: var(--yellow);  border-color: var(--yellow);  opacity: 0.75; }
.drill-grid-legend__swatch.is-red    { background: var(--accent);  border-color: var(--accent);  opacity: 0.65; }

/* Readiness dot — shared by cadence table + conditioning session rows.
   Use .drill-dot inside table cells or .drill-session__right.
   .drill-dots wraps multiple dots in a row (per-session-per-week in cadence). */
.drill-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted); opacity: 0.4;
  vertical-align: middle;
}
.drill-dot.is-green  { background: var(--success); opacity: 1; }
.drill-dot.is-yellow { background: var(--yellow);  opacity: 1; }
.drill-dot.is-red    { background: var(--accent);  opacity: 1; }
.drill-dots {
  display: inline-flex; gap: 3px; align-items: center;
}

.drill-foot {
  margin-top: var(--space-4);
  font-family: var(--font-body); font-size: 11px;
  color: var(--text-muted); line-height: 1.5;
}

.drill-note {
  margin-top: var(--space-5);
  padding: 10px 12px 11px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent);
}
.drill-note__title {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.drill-note__eq {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.drill-note__body {
  font-family: var(--font-body); font-size: 12px;
  color: var(--text-muted); line-height: 1.5;
}
.drill-note__body b { color: var(--text); font-weight: 700; }
.drill-note__body em { color: var(--accent); font-style: normal; font-weight: 700; }

/* Soreness chip — compact amber-bordered chip for body parts */
.drill-sore-chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--amber, #B45309);
  color: var(--amber, #B45309);
  padding: 0 5px;
  line-height: 16px;
}

/* Conditioning per-session rows */
.drill-session-head {
  display: flex; align-items: baseline;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-faint);
}
.drill-session-head__left {
  flex: 1; min-width: 0;
}
.drill-session-head__col {
  width: 44px; text-align: center; flex-shrink: 0;
}
.drill-session-head__col--right { text-align: right; }
.drill-session-head__left,
.drill-session-head__col {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: var(--text-faint);
}
.drill-session-list {
  display: flex; flex-direction: column;
}
.drill-session {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-faint);
  gap: var(--space-3);
}
.drill-session__left { flex: 1; min-width: 0; }
.drill-session__name {
  font-family: var(--font-body); font-size: var(--size-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drill-session__meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  margin-top: 1px;
}
.drill-session__right {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.drill-session__eff {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  min-width: 32px; text-align: right;
}

.proto-backdrop-content {
  opacity: 0.25;
  pointer-events: none;
  min-height: 300px;
}
.proto-radar-screen { padding-top: var(--space-4); }

/* Exercise-level injury warning — slots between .ex-block__head and .ex-block__body */
.ex-warn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--amber-bg);
  border-top: 1.5px solid var(--amber);
  border-bottom: 1px solid var(--border-faint);
}
.ex-warn__tape {
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--amber); color: var(--bg);
  padding: 4px 6px 3px;
  align-self: start;
}
.ex-warn__main {
  font-family: var(--font-body); font-size: 12.5px;
  color: var(--text); line-height: 1.4;
}
.ex-warn__main strong { color: var(--amber); font-weight: 700; }
.ex-warn__actions { display: flex; gap: 4px; flex-shrink: 0; }
.ex-warn__action {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 6px 8px; cursor: pointer;
}
.ex-warn__action:hover { color: var(--text); border-color: var(--text); }
.ex-warn__action.is-primary {
  background: var(--text); color: var(--bg);
  border-color: var(--text);
}
/* Stacked variant — for pre-flight / gate contexts where tape, message, and
   actions need vertical room (longer copy, 3+ actions on a narrow phone). */
.ex-warn--stacked {
  display: block;
  padding: 14px 20px 16px;
}
.ex-warn--stacked .ex-warn__tape {
  display: inline-block;
  margin-bottom: 10px;
}
.ex-warn--stacked .ex-warn__main { margin-bottom: 14px; }
.ex-warn--stacked .ex-warn__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.ex-warn--stacked .ex-warn__action {
  text-align: center;
  padding: 10px 6px;
}

/* Reason → engine signal mapping specimen (deviation taxonomy) */
.signal-map {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: 12px;
  margin-top: 4px;
}
.signal-map thead th {
  text-align: left;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  padding: 8px 12px;
  border-bottom: 1.5px solid var(--text);
}
.signal-map tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-faint);
  vertical-align: top; line-height: 1.45;
  color: var(--text);
}
.signal-map tbody tr:hover { background: var(--bg-elevated); }
.signal-map tbody td:first-child {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); white-space: nowrap; width: 28%;
}
.signal-map tbody td:nth-child(2) {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.04em; color: var(--text-muted);
  white-space: nowrap; width: 22%;
}

/* Destructive type-to-confirm input — Remove imported data, delete account, etc. */
.confirm-input {
  display: block; width: 100%;
  background: var(--bg-subtle);
  border: 1.5px solid var(--red);
  border-radius: var(--radius-1);
  padding: 12px 14px;
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 0.04em; color: var(--text);
}
.confirm-input::placeholder {
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.confirm-input__help {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 6px;
}

/* Sparse-data hint — sits under the scoreboard when < N sessions logged */
.scoreboard-hint {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-left: 2px solid var(--accent);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.scoreboard-hint b { color: var(--accent); font-weight: 700; }
.scoreboard-hint__count {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--text); text-transform: uppercase;
}

/* Imported-data card in Settings · with destructive remove affordance */
.imported-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--text);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.imported-card__icon {
  width: 36px; height: 36px;
  background: var(--text); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.imported-card__icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Accent variant — oxblood rail + icon. Used when the import is the celebrated
   anchor (e.g. "your last 90 days are in"). */
.imported-card--accent { border-left-color: var(--accent); }
.imported-card--accent .imported-card__icon { background: var(--accent); }
.imported-card__main {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text);
}
.imported-card__sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--text-muted);
  margin-top: 3px;
}
.imported-card__remove {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
  background: transparent;
  border: 1px solid var(--red);
  padding: 8px 10px;
  cursor: pointer;
}
.imported-card__remove:hover { background: var(--red); color: var(--bg); }

/* ---------- 10. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-screen: 0ms;
    --dur-sheet: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   12 — Lead-magnet intake (v2) — OCPM-192
   Components added for the Hyrox lead-magnet flow. See
   brand/design-system/lead-magnet.html for the design reference.

     .tradeoff-card       Goal/tradeoff picker (with stacked-bar weight viz)
     .modality            Inline tap-to-expand conditioning-load picker
                          (wrapper for .modality-toggle + sibling .mc-controls)
     .eq-grid+.eq-chip    Hyrox-aware multi-select equipment grid
     .plan-view           Plan reveal chalk surface
     .plan-attrs-card     Ink-inverted stats card on Chalk
     .coach-note          Expandable accent-tinted card
     .plan-week-acc       Two-level drilldown accordion
     .sheet--gate         Email-capture sheet modifier
     .export-success      Post-email export + early-access handoff
     .paywall             Future Ink payment wall handoff

   All sized to match .intake-option vertical rhythm so screens have the
   same pacing as the existing intake.
   ========================================================================== */

/* 12.1 — Goal/tradeoff card */
/* Radio-group container — wraps all .tradeoff-card siblings + any expansion
   panels (e.g. .tc-event-panel) so the whole picker is one keyboard-navigable
   group. Implementation: render as <div role="radiogroup">. */
.tradeoff-group { display: block; }

/* Tradeoff card — implementation MUST use <label> wrapping a hidden
   <input type="radio">. Do NOT use <div role="button">: inner content
   includes interactive controls (the Event-prep panel chips + date input
   live as siblings), and nested interactive descendants under a single
   focusable container break keyboard tab order and screen-reader semantics.
   The hidden radio is .sr-only; selection state is reflected via JS adding
   .is-selected to the parent label (and via :focus-within for keyboard focus). */
.tradeoff-card {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-0);
  padding: 14px 16px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  margin-bottom: 8px;
  transition:
    border-color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.tradeoff-card:hover { border-color: var(--text); transform: translateY(-1px); }
.tradeoff-card:focus-visible,
.tradeoff-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tradeoff-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: inset 4px 0 0 var(--accent);
}
.tradeoff-card.is-selected:hover {
  border-color: var(--accent);
  transform: none;
}

/* Screen-reader-only utility — visually hides an element while keeping it
   focusable + announced. Used for the hidden radio input inside .tradeoff-card. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.tc-bar {
  display: flex; gap: 2px; height: 6px;
  margin: 0 0 10px;
}
.tc-bar > span { display: block; height: 100%; }
.tc-bar .seg--hyp  { background: var(--accent); }
.tc-bar .seg--str  { background: var(--text); }
.tc-bar .seg--cond { background: color-mix(in srgb, var(--text) 55%, var(--bg)); }
.tc-bar .seg--end  { background: color-mix(in srgb, var(--text) 30%, var(--bg)); }
.tc-head { display: flex; align-items: baseline; gap: 8px; }
.tc-title {
  flex: 1;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  font-size: 14px; line-height: 1.1;
}
.tc-badge {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-on-accent);
  background: var(--accent);
  padding: 3px 6px;
  border: 1px solid var(--accent);
  font-weight: 800;
}
.tc-help {
  font-family: var(--font-body); font-size: 13px;
  color: var(--text-muted); line-height: 1.4;
  margin: 4px 0 0;
}
.tc-legend {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-faint); margin-top: 6px;
  font-weight: 500;
  display: flex; flex-wrap: wrap; gap: 2px 8px;
}
.tc-legend span { white-space: nowrap; }
/* Event prep expansion panel — rendered as a SIBLING of the Event-prep
   .tradeoff-card (NOT nested inside). Lives directly below the card it
   expands; visually attached via accent background + matching inset rule.
   Implementation: only render this block when the Event-prep radio is
   checked; remove from the DOM (or hide via [hidden]) otherwise. */
.tc-event-panel {
  margin: -8px 0 8px;            /* lift up so it sits flush under the card */
  padding: 14px 16px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-top: 0;                 /* visually continues from the selected card */
  box-shadow: inset 4px 0 0 var(--accent);
  animation: intake-panel-enter var(--dur-base) var(--ease) both;
}
.tc-event-panel__label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--accent-hover);
  margin-bottom: 6px; font-weight: 600;
}
.tc-event-panel__chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 12px;
}
.tc-event__chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 500; letter-spacing: var(--mono-tracking);
  padding: 10px 12px; min-height: 44px;
  cursor: pointer;
  border-radius: var(--radius-0);
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.tc-event__chip:hover { border-color: var(--text); }
.tc-event__chip.is-active {
  background: var(--accent); color: var(--text-on-accent); border-color: var(--accent);
}
.tc-event__date {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: var(--mono-tracking);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  color: var(--text);
  -webkit-appearance: none; appearance: none;
}
.tc-event__date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; }
.tc-event__meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-faint); margin: 4px 0 0;
}

.event-length-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
  background: var(--accent-light);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.event-length-note b {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  text-transform: uppercase;
}
.event-length-note span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
}

.coach-option {
  position: relative;
  display: grid;
  /* Lift the whole card on hover, not just the inner button: the coach name is an
     absolutely-positioned title link that is a SIBLING of the button, so lifting
     only the button leaves the title behind (looks broken). Lift the container so
     button + title move together; cancel the inner button lift so they don't
     desync into a 2px stack, and never lift a disabled card. */
  transition: transform var(--dur-fast) var(--ease);
}
.coach-option:hover { transform: translateY(-1px); }
.coach-option .intake-option:hover { transform: none; }
.coach-option.is-disabled:hover { transform: none; }
.coach-option .intake-option {
  min-height: 82px;
  padding: 12px 44px 12px 12px;
}
.coach-option--has-source-label .intake-option {
  padding-right: 78px;
}
.coach-option__avatar {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.coach-option__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.intake-option.is-selected .coach-option__avatar {
  border-color: var(--accent);
}
.coach-option__topline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.coach-option__topline .intake-option__title {
  margin-bottom: 0;
}
.coach-option__linked-title-spacer {
  visibility: hidden;
}
.coach-option__badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.coach-option__source {
  position: absolute;
  top: 12px;
  left: 72px;
  right: 44px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 116px);
  min-height: 20px;
  padding: 0;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.intake-option.is-selected + .coach-option__source {
  color: var(--accent);
}
.coach-option__source-icon {
  flex: 0 0 auto;
  margin-left: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
}
.coach-option__source:hover,
.coach-option__source:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: 1.5px solid var(--accent);
  outline-offset: 3px;
}
.coach-option__source--placeholder {
  top: auto;
  left: auto;
  right: 12px;
  bottom: 12px;
  max-width: calc(100% - 84px);
  min-height: 24px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--mono-tracking);
  border-bottom-style: dashed;
  pointer-events: none;
}
.coach-option.is-disabled .intake-option {
  cursor: not-allowed;
  opacity: 0.64;
}
.coach-option.is-disabled .intake-option:hover {
  border-color: var(--border);
  transform: none;
}

@keyframes intake-panel-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 12.2 — Modality (conditioning load)
   Each modality is a per-row toggle. Implementation pattern:
     <div class="modality [is-on]">
       <button class="modality-toggle" aria-expanded="…">…header…</button>
       <div class="mc-controls">…chip rows live here when is-on…</div>
     </div>
   The toggle is a real <button>; controls render as a SIBLING (not a descendant)
   so the inner chip <button>s never sit inside an interactive ancestor. The
   wrapper carries the is-on selection style. */
.modality-list { display: flex; flex-direction: column; gap: 8px; }
.modality { display: block; }
.modality-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-0);
  padding: 12px 14px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  transition:
    border-color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.modality-toggle:hover { border-color: var(--text); transform: translateY(-1px); }
.modality-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modality-toggle:disabled { cursor: not-allowed; }
.modality.is-on .modality-toggle,
.modality-toggle.is-on {
  border-color: var(--accent);
  background: var(--accent-light);
}
.mc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.modality-toggle .mc-name,
.modality-toggle .mc-meta,
.modality-toggle .mc-hint {
  display: inline-block;
}
.modality-toggle {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.mc-name {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  font-size: 14px;
}
.mc-meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--mono-tracking); color: var(--accent-hover);
  font-feature-settings: "tnum";
}
.mc-hint {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-faint);
}
/* mc-controls is a SIBLING of .modality-toggle inside .modality.
   When the toggle is is-on, render this block; otherwise omit (or [hidden]). */
.mc-controls {
  margin-top: 6px;
  padding: 10px 14px 12px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-top: 0;
  display: flex; flex-direction: column; gap: 10px;
  animation: intake-panel-enter var(--dur-base) var(--ease) both;
}
.mc-sublabel {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px; font-weight: 600;
}
.mc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-chips button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 500; letter-spacing: var(--mono-tracking);
  padding: 10px 12px; min-width: 44px; min-height: 44px;
  cursor: pointer; border-radius: var(--radius-0);
  font-feature-settings: "tnum";
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.mc-chips button:hover { border-color: var(--text); }
.mc-chips button.is-active {
  background: var(--accent); color: var(--text-on-accent); border-color: var(--accent);
}
.none-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-0);
  cursor: pointer;
  margin-bottom: 12px;
  font-family: var(--font-body); font-size: 14px;
  min-height: 48px;
  text-align: left;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.none-toggle:hover {
  border-color: var(--text);
  transform: translateY(-1px);
}
.none-toggle.is-on {
  border-color: var(--accent);
  background: var(--accent-light);
}
.none-toggle__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
}
.none-toggle__box svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
}
.none-toggle.is-on .none-toggle__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-text);
}
.none-toggle__label {
  min-width: 0;
  font-weight: 600;
}
.none-toggle__hint {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 12.3 — Equipment grid (sectional, Hyrox-aware) */
.eq-section { margin-bottom: 14px; }
.eq-section-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 6px; font-weight: 600;
}
.eq-section-label .count {
  font-family: var(--font-mono); color: var(--text-muted);
  text-transform: none; letter-spacing: 0.02em;
}
.eq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.eq-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 10px 12px; min-height: 44px;
  cursor: pointer; border-radius: var(--radius-0);
  text-align: left;
  display: flex; align-items: center; gap: 8px;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.eq-chip:hover { border-color: var(--text); transform: translateY(-1px); }
.eq-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eq-chip.is-on {
  background: var(--accent-light);
  color: var(--text);
  border-color: var(--accent);
}
.eq-chip__check {
  display: inline-flex; width: 12px; height: 12px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.eq-chip.is-on .eq-chip__check {
  background: var(--accent); border-color: var(--accent);
  color: var(--ink-text);
}
.eq-chip__check::after {
  content: "";
  width: 6px;
  height: 3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}
.eq-warning {
  background: var(--yellow-bg);
  border-left: 3px solid var(--yellow);
  padding: 10px 12px;
  margin-top: 10px;
  font-family: var(--font-body); font-size: 12px;
  color: var(--text); line-height: 1.4;
}
.eq-warning b {
  display: block;
  color: var(--yellow); text-transform: uppercase;
  letter-spacing: var(--label-tracking); font-size: 10px;
  font-family: var(--font-mono); margin-bottom: 2px; font-weight: 700;
}

/* 12.4 — Plan view · scoreboard reveal */
.plan-view {
  display: flex; flex-direction: column;
  padding: 18px 16px 16px;
  min-height: 100%;
  overflow-anchor: none;
}
.plan-view > * {
  flex-shrink: 0;
}
.plan-view__kicker {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 10px; font-weight: 600;
}
.plan-attrs-card {
  background: var(--ink-bg); color: var(--ink-text);
  padding: 16px 16px 12px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.plan-attrs-card__coach {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--ink-border);
}
.plan-attrs-card__coach span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-text-faint);
  font-weight: 600;
}
.plan-attrs-card__coach b {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-accent);
  text-align: right;
}
.plan-attrs-card__name {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--display-tracking);
  font-size: 22px; line-height: 1; margin: 0 0 4px;
  color: var(--ink-text);
}
.plan-attrs-card__sub {
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-text-muted); margin: 0 0 12px;
}
.plan-attrs-card__stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  border-top: 1px solid var(--ink-border);
  padding-top: 10px;
}
.plan-stat__label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--ink-text-faint); font-weight: 600;
}
.plan-stat__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--ink-text);
  margin-top: 2px;
  font-feature-settings: "tnum";
}
.plan-stat__unit {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-text-muted); margin-left: 3px; font-weight: 500;
}

/* 12.5 — Coach note · expandable accent-tinted card */
.coach-note {
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.coach-note__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--accent-hover); margin-bottom: 4px; font-weight: 600;
}
details.coach-note > .coach-note__head {
  list-style: none;
  cursor: pointer;
  justify-content: flex-start;
}
details.coach-note > .coach-note__head::-webkit-details-marker { display: none; }
details.coach-note > .coach-note__head .coach-note__byline { margin-left: auto; }
details.coach-note > .coach-note__head::after {
  content: '+';
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  line-height: 1;
}
details.coach-note[open] > .coach-note__head::after { content: '-'; }
.coach-note__byline {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: none; letter-spacing: 0.04em; color: var(--text-muted);
}
.coach-note__lead {
  font-family: var(--font-body); font-size: 13px;
  color: var(--text); line-height: 1.5; margin: 0;
}
.coach-note__lead em { color: var(--accent); font-style: normal; font-weight: 600; }
.coach-note__more {
  font-family: var(--font-body); font-size: 13px;
  color: var(--text); line-height: 1.5;
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid rgba(200, 57, 31, 0.25);
}
.coach-note__toggle {
  background: transparent; border: 0; padding: 6px 0 0;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--accent); cursor: pointer; font-weight: 600;
}

/* 12.6 — Plan week/day drilldown */
.plan-eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 8px; font-weight: 600;
}
.breadcrumb {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--mono-tracking);
  line-height: 1;
  text-transform: uppercase;
}
.breadcrumb__link {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease);
}
.breadcrumb__link:hover,
.breadcrumb__link:active {
  color: var(--accent);
}
.breadcrumb__slash {
  color: var(--text-muted);
}
.breadcrumb__current {
  color: var(--text);
}
.plan-view.plan-full-view {
  /* Keep flush top/sides; restore the standard bottom inset so the last block's
     week cards clear the fixed bottom nav instead of butting against it. */
  padding: 0 0 var(--tab-shell-bottom);
  gap: 0;
}
.plan-shell.is-route-entering {
  animation: plan-route-forward-in 220ms var(--ease) both;
  will-change: opacity, transform;
}
.plan-shell.is-route-entering--back {
  animation-name: plan-route-back-in;
}
@keyframes plan-route-forward-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes plan-route-back-in {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-shell.is-route-entering {
    animation: none;
  }
}
.plan-full-link {
  appearance: none;
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.plan-full-link:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.plan-full-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.plan-full-link:active {
  transform: scale(0.995);
}
.plan-full-link__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: var(--text-on-accent);
}
.plan-full-link__icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.plan-full-link__title {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  line-height: 1;
  text-transform: uppercase;
}
.plan-full-link__meta {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--mono-tracking);
  line-height: 1.35;
  color: var(--text-muted);
  text-transform: uppercase;
}
.plan-full-link__arrow {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
}
.plan-structure {
  display: grid;
  gap: var(--space-8);
}
.plan-block-section {
  margin-top: 28px;
}
.plan-block-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  /* Rule sits BELOW the headline (matching the app's section headers), not above
     the eyebrow. Block separation comes from the section margin-top above. */
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--text);
}
.plan-block-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent);
}
.plan-block-title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--display-weight);
  line-height: 0.98;
  /* Display tracking, not --label-tracking (0.14em) — that wide small-caps
     tracking is for 10px labels and spread a 24px heading into "A C C U M…". */
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
}
.plan-block-subtitle {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}
.plan-block-status {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .plan-block-head { grid-template-columns: 1fr; }
  .plan-block-status { justify-self: start; }
}
.plan-block-weeks {
  display: grid;
  gap: 6px;
}
.plan-week-acc {
  background: var(--bg);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  overflow: clip;
  transition: border-color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.plan-week-acc[open] { border-color: var(--text); }
.plan-block-weeks .plan-week-acc { margin-bottom: 0; }
.plan-week-acc--deload {
  background: var(--amber-bg);
  border-color: color-mix(in srgb, var(--amber) 45%, var(--border));
}
.plan-week-acc--deload[open] { border-color: var(--amber); }
.plan-week-acc--deload .plan-week-acc__name { color: var(--amber); }
.plan-week-acc--deload .plan-week-acc__head:hover {
  background: color-mix(in srgb, var(--amber-bg) 70%, var(--bg));
}
.plan-week-acc__head {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; min-height: 48px;
}
.plan-week-acc__head:hover { background: var(--bg-subtle); }
.plan-week-acc__head::-webkit-details-marker { display: none; }
.plan-week-acc__name {
  flex: 1;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  font-size: 14px;
}
.plan-week-acc__meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-muted);
}
.plan-week-acc__chevron {
  width: 14px; height: 14px;
  color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease);
}
.plan-week-acc[open] .plan-week-acc__chevron { transform: rotate(90deg); }
.plan-week-acc__body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  border-top: 0 solid transparent;
  transition: grid-template-rows var(--dur-screen) var(--ease),
              opacity var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.plan-week-acc[open] > .plan-week-acc__body-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
  border-top: 1px solid var(--border-faint);
}
.plan-week-acc__body {
  min-height: 0;
  overflow: hidden;
  padding: 4px 4px 8px;
}
.plan-note-acc {
  margin: 6px 0 8px;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  overflow: clip;
}
.plan-note-acc--week {
  background: var(--bg-subtle);
  border-left-color: var(--border);
}
.plan-note-acc__head {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
}
.plan-note-acc__head::-webkit-details-marker { display: none; }
.plan-note-acc__label {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-hover);
}
.plan-note-acc--week .plan-note-acc__label { color: var(--text-muted); }
.plan-note-acc__meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--text-faint);
}
.plan-note-acc__chevron {
  width: 12px;
  height: 12px;
  color: var(--text-faint);
  transition: transform var(--dur-base) var(--ease);
}
.plan-note-acc[open] .plan-note-acc__chevron { transform: rotate(90deg); }
.plan-note-acc__body {
  padding: 0 12px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}
.plan-note-acc__body em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}
.plan-day-acc {
  border-left: 3px solid transparent;
  margin: 4px 0;
  transition: background var(--dur-base) var(--ease),
              border-left-color var(--dur-base) var(--ease);
}
.plan-day-acc[open] { background: var(--bg-subtle); }
.plan-day-acc--lift  { border-left-color: var(--accent); }
.plan-day-acc--cond, .plan-day-acc--event { border-left-color: var(--purple); }
.plan-day-acc--rest  { border-left-color: var(--border); }
.plan-day-acc__head {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; min-height: 44px;
}
.plan-day-acc__head:hover { background: color-mix(in srgb, var(--bg-subtle) 70%, transparent); }
.plan-day-acc__head::-webkit-details-marker { display: none; }
.plan-day-acc__dow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; width: 28px; flex-shrink: 0;
}
.plan-day-acc__label {
  flex: 1;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.plan-day-acc--rest .plan-day-acc__label {
  color: var(--text-faint); font-style: italic;
}
.plan-day-acc__type {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-muted);
}
.plan-day-acc__chevron {
  width: 12px; height: 12px;
  color: var(--text-faint);
  transition: transform var(--dur-base) var(--ease);
}
.plan-day-acc[open] .plan-day-acc__chevron { transform: rotate(90deg); }
.plan-day-acc__body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur-screen) var(--ease),
              opacity var(--dur-base) var(--ease);
}
.plan-day-acc[open] > .plan-day-acc__body-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}
.plan-day-acc__body {
  min-height: 0;
  overflow: hidden;
  padding: 4px 12px 10px calc(28px + 10px + 12px);
}
@supports (interpolate-size: allow-keywords) {
  .plan-week-acc,
  .plan-day-acc {
    interpolate-size: allow-keywords;
  }
  .plan-week-acc::details-content,
  .plan-day-acc::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 280ms var(--ease),
      opacity var(--dur-base) var(--ease),
      content-visibility 280ms allow-discrete;
  }
  .plan-week-acc[open]::details-content,
  .plan-day-acc[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}
.plan-exercises { list-style: none; padding: 0; margin: 6px 0 0; }
.plan-exercise {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--border-faint);
}
.plan-exercise:last-child { border-bottom: 0; }
.plan-exercise__name {
  flex: 1;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.plan-exercise__rx {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--mono-tracking); color: var(--text-muted);
  font-feature-settings: "tnum"; text-align: right; flex-shrink: 0;
}
.plan-show-more {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 100%; padding: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  cursor: pointer; margin: 8px 0 16px;
  font-weight: 600;
}
.plan-show-more:hover { color: var(--text); border-color: var(--text); }
.plan-cta {
  width: 100%; min-height: 48px;
  background: var(--accent); color: var(--text-on-accent);
  border: 0; padding: 14px;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  font-size: 14px; cursor: pointer;
  margin-top: auto;
}
.plan-cta-meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--text-muted); text-align: center;
  margin-top: 6px;
}

/* 12.7 — Email gate · .sheet--gate modifier of canonical .sheet base */
.gate-host { position: relative; overflow: hidden; }
.gate-behind { filter: blur(0.5px); opacity: 0.55; pointer-events: none; }
.sheet--gate {
  border-top: var(--rule-medium) solid var(--accent);
  padding: 16px 14px 14px;
  max-height: 60%;
}
.sheet--gate.is-open { transform: translateY(0); }
.gate-title {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--display-tracking);
  font-size: 18px; margin: 0 0 6px;
}
.gate-help {
  font-family: var(--font-body); font-size: 12px;
  color: var(--text-muted); line-height: 1.4; margin: 0 0 12px;
}
.gate-input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-mono); font-size: 14px;
  letter-spacing: var(--mono-tracking);
  background: var(--bg);
  border: var(--rule-medium) solid var(--text);
  border-radius: var(--radius-1);
  color: var(--text);
  margin-bottom: 10px;
  -webkit-appearance: none; appearance: none;
}
.gate-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate-formats {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 10px;
}
.gate-format {
  background: transparent;
  border: 1px solid var(--border-faint);
  color: var(--text-muted);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  padding: 10px 14px; min-height: 44px;
  cursor: pointer; font-weight: 600;
}
.gate-format.is-active { color: var(--accent); border-color: var(--accent); }

/* 12.8 — Export success · restrained handoff delight */
.export-success {
  min-height: 100%;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-anchor: none;
}
.export-success > * {
  flex-shrink: 0;
}
.export-success__hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-bg);
  color: var(--ink-text);
  border: var(--rule-medium) solid var(--ink-bg);
  padding: 18px 16px 16px;
}
.export-success__hero::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: var(--rule-medium);
  background: var(--ink-accent);
}
.export-success__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: var(--ink-accent);
  color: var(--ink-bg);
  animation: success-stamp var(--dur-screen) var(--ease-snap) both;
}
.export-success__mark svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.export-success__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-text-faint);
  margin-bottom: 10px;
  font-weight: 600;
}
.export-success h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--ink-text);
}
.export-success h2 em {
  font-style: normal;
  color: var(--ink-accent);
}
.export-success p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-text-muted);
}
.export-success__email {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-text);
  overflow-wrap: anywhere;
}
.export-panel {
  border-top: var(--rule-medium) solid var(--border);
  padding-top: 14px;
}
.export-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.export-link {
  min-height: 62px;
  border: var(--rule-medium) solid var(--border);
  color: var(--text);
  text-decoration: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.export-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.export-link:active { transform: scale(0.99); }
.export-link span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}
.export-link b {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
}
.export-note {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
}
.export-success__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memory-panel {
  background: var(--ink-bg);
  color: var(--ink-text);
  padding: 16px;
  border: var(--rule-medium) solid var(--ink-bg);
}
.memory-panel h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--ink-text);
}
.memory-panel p {
  margin: 0 0 12px;
  color: var(--ink-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
}
.memory-panel .btn {
  border-color: var(--ink-accent);
  background: var(--ink-accent);
  color: var(--ink-bg);
  width: 100%;
}
.memory-panel .btn:disabled {
  border-color: var(--ink-border);
  background: var(--ink-border);
  color: var(--ink-text-muted);
  cursor: not-allowed;
}
.memory-list {
  margin: 12px 0 14px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink-border);
}
.memory-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-border);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-text);
}
.access-request-card {
  margin: 14px 0;
  padding: 14px;
  border: var(--rule-medium) solid var(--ink-accent);
  background: color-mix(in srgb, var(--ink-accent) 18%, var(--ink-bg));
  box-shadow: inset 0 -4px 0 var(--ink-accent);
  animation: access-card-in 220ms var(--ease) both;
}
.access-request-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.access-request-card__mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink-accent);
  color: var(--ink-bg);
  flex-shrink: 0;
}
.access-request-card__mark svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.access-request-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-accent);
  font-weight: 700;
}
.access-request-card h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 0.95;
  letter-spacing: var(--display-tracking);
  text-transform: uppercase;
  color: var(--ink-text);
}
.access-request-steps {
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--ink-border);
  list-style: none;
  display: grid;
  gap: 8px;
}
.access-request-steps li {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 10px;
  align-items: baseline;
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 13px;
}
.access-request-steps li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--ink-accent);
  transform: translateY(-1px);
}
@keyframes access-card-in {
  from { opacity: 0.45; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.trust-line {
  margin-top: 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
}
.memory-copy {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--ink-border);
  font-family: var(--font-body);
  font-size: 12px !important;
  line-height: 1.55;
}
@keyframes success-stamp {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 12.9 — Future paywall · ink payment handoff */
.paywall {
  background: var(--ink-bg); color: var(--ink-text);
  padding: 20px 18px 16px;
  min-height: 100%;
  display: flex; flex-direction: column;
}
.paywall__kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--ink-text-faint); margin-bottom: 12px; font-weight: 600;
}
.paywall__kicker-rule { flex: 1; height: 1px; background: var(--ink-border); }
.paywall__headline {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--display-tracking);
  font-size: 26px; line-height: 1; margin: 0 0 10px;
  color: var(--ink-text);
}
.paywall__sub {
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-text-muted); line-height: 1.5; margin: 0 0 16px;
}
.paywall__bullets {
  list-style: none; padding: 14px 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: var(--rule-medium) solid var(--ink-border);
  border-bottom: var(--rule-medium) solid var(--ink-border);
}
.paywall__bullet {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--ink-text); line-height: 1.4;
}
.paywall__bullet-mark {
  display: inline-block; width: 9px; height: 9px;
  background: var(--ink-accent); flex-shrink: 0; margin-top: 5px;
}
.paywall__cta {
  background: var(--ink-accent); color: var(--ink-bg);
  border: var(--rule-medium) solid var(--ink-accent);
  padding: 14px; min-height: 48px; width: 100%;
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  font-size: 15px; cursor: pointer;
  margin-bottom: 6px;
}
.paywall__trust {
  text-align: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking); text-transform: uppercase;
  color: var(--ink-text-muted); margin-bottom: 14px; font-weight: 500;
}
.paywall__faq {
  padding-top: 12px;
  border-top: 1px solid var(--ink-border);
}
.paywall__faq-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--ink-text-faint); margin-bottom: 8px; font-weight: 600;
}
.paywall__faq-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-border);
  font-family: var(--font-body); font-size: 13px;
  color: var(--ink-text); text-decoration: none;
}
.paywall__faq-item:hover { color: var(--ink-accent); }
.paywall__faq-item:last-of-type { border-bottom: 0; }
.paywall__faq-arrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-text-faint);
}
.paywall__below-fold {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--ink-border);
  font-family: var(--font-body); font-size: 12px;
  color: var(--ink-text-muted); line-height: 1.55;
}

/* 12.10 — Notes textarea (final intake step) */
.intake-textarea {
  width: 100%; min-height: 120px;
  padding: 12px;
  font-family: var(--font-body); font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  resize: vertical;
}
.intake-textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 12.11 — In-app onboarding (v2) warm-start primitives */
.recap-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  width: fit-content;
}
.recap-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.recap-status--done {
  color: var(--ink-accent);
  border: 1px solid var(--ink-border);
}
.recap-status--abandoned {
  color: var(--ink-text-muted);
  border: 1px solid var(--ink-border);
}
.carry-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-1);
  padding: 11px 13px;
  margin: 14px 0;
}
.carry-line__icon {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 1px;
  color: var(--text-faint);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.carry-line b {
  color: var(--text);
  font-weight: 600;
}
.carry-line a,
.carry-line button {
  color: var(--accent);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--mono-tracking);
  cursor: pointer;
  flex: none;
}
.confirm-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.confirm-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  padding: 13px 14px;
  background: var(--bg-elevated);
}
.confirm-card.is-confirmed {
  border-color: var(--accent);
  background: var(--accent-light);
}
.confirm-card.is-editing {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.confirm-card__icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-1);
  color: var(--text-muted);
}
.confirm-card__icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.confirm-card__icon--initials {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.confirm-card__main {
  flex: 1;
  min-width: 0;
}
.confirm-card__label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.confirm-card__value {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.confirm-card__value .sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0;
}
.confirm-card__change {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  cursor: pointer;
}
.confirm-card__change:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.confirm-expand {
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 var(--radius-1) var(--radius-1);
  padding: 12px;
  margin: -10px 0 0;
  background: var(--bg);
}
.confirm-expand .intake-options { margin-top: 0; }
.what-changed {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  overflow: hidden;
  margin-bottom: 18px;
}
.wc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-faint);
}
.wc-row:last-child { border-bottom: none; }
.wc-row__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  width: 82px;
  flex: none;
}
.wc-row__value {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  min-width: 0;
}
.wc-row__value .muted {
  color: var(--text-muted);
  font-weight: 400;
}
.wc-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  flex: none;
}
.wc-tag--carried {
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-faint);
}
.wc-tag--changed {
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--accent);
}
.wc-tag--cleared {
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px dashed var(--border);
}
.invalidate-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--yellow-bg);
  border: 1px solid var(--yellow);
  border-left-width: 3px;
  border-radius: var(--radius-1);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 16px;
}
.invalidate-banner__icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  color: var(--yellow);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.invalidate-banner b { font-weight: 700; }