/* Arc design system, v4 (7 Sep 2026): the lime redesign.
   Ground is fluoro lime, ink carries every card and control, lime is the only accent inside ink.
   Display: Bricolage Grotesque 800. Body and data: Archivo. One type system, every screen.
   Chosen on the design canvas (design/ui-directions-2026-09-05/DECISIONS.md):
   Today and Plan from direction A5, the after-photo moment and Progress from B5.
   Chart series on ink: lime #E2C48A (cardio, readiness), paper #F3E8D6 at 35% (sleep, planned),
   bike blue #A9B8C7 (cross / strength), amber #C98E6B (feel). v3 is archived at
   .archive/arc-css-v3-2026-09-07/. */

:root {
  --lime: #E2C48A;
  --ink: #2A2118;
  --ink-solid: #2A2118;   /* never remapped: use for black-on-lime inside an ink card */
  --ink-2: #342A1F;
  --paper: #F3E8D6;
  --paper-2: #CFC3AE;
  --olive: #6E5E49;   /* darkened 18 Sep 2026 from #4F6000: 8.6:1 on lime, was 6:1 and read faint outdoors */
  --sage: #A8987E;
  --line-lm: rgba(42, 33, 24, 0.18);
  --line-lm-strong: rgba(42, 33, 24, 0.3);
  --line-dk: #3E3327;
  --tint: rgba(42, 33, 24, 0.08);
  --bike: #A9B8C7;
  --amber: #C98E6B;
  --bad: #B3261E;
  --bad-dk: #FF7B6B;
  --radius: 18px;
  --disp: "Bricolage Grotesque", "Arial Narrow", Impact, sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Legacy token names still referenced by older templates. Mapped onto the lime system so
     anything not rewritten (onboarding, activity, day, history, account, admin) reads as
     the same app. On the lime ground: ink text, olive muted. Inside .card they are re-mapped. */
  --bg: var(--lime);
  --card: var(--ink);
  --ink-secondary: #3E3327;
  --muted: var(--olive);
  --accent: var(--ink);
  --accent-deep: var(--ink);
  --accent-soft: var(--tint);
  --on-accent: var(--lime);
  --good: #1F5A0A;
  --line: var(--line-lm);
  --line-strong: var(--line-lm-strong);
  --glass: var(--ink);
  --glass-border: var(--line-dk);
  --s-volume: var(--lime);
  --s-sleep: var(--bike);
  --s-feel: var(--amber);
  --k-run: var(--lime);
  --k-strength: var(--bike);
  --k-mobility: var(--paper-2);
  --k-cross: var(--amber);
  --display: var(--disp);
  --grad-accent: var(--ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--lime);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
#bg-matrix { display: none; }

.shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 56px 20px calc(104px + env(safe-area-inset-bottom));
}
.shell.no-nav { padding-bottom: 44px; }

/* ---------- Type ---------- */
.display, h1.display {
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: none;
}
.display.big { font-size: 26px; }
.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--olive);
}
.eyebrow.accent { color: var(--ink); }
h1.page-title { font-size: 44px; margin: 6px 0 4px; text-wrap: balance; }
.sub { color: var(--olive); font-size: 13px; }
.num { font-family: var(--body); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
a { color: var(--ink); }

.section-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 2px;
  font-family: var(--disp);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 17px;
  color: var(--ink);
}
.section-mark .dot { display: none; }
.section-mark::after { content: ''; flex: 1; height: 1px; background: var(--line-lm-strong); }
.section-mark .mono, .section-mark .side { font-family: var(--body); font-weight: 600; font-size: 11px; color: var(--olive); letter-spacing: 0.02em; }

/* ---------- Surfaces ---------- */
.card {
  position: relative;
  background: var(--ink-solid);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 16px 14px;
  margin-top: 12px;
  --ink: var(--paper);
  --ink-secondary: var(--paper-2);
  --muted: var(--sage);
  --accent: var(--lime);
  --accent-soft: rgba(226, 196, 138, 0.14);
  --on-accent: var(--ink);
  --good: var(--lime);
  --line: var(--line-dk);
  --line-strong: rgba(243, 232, 214, 0.25);
  --bad: var(--bad-dk);
}
.card.pad { padding: 18px 18px 16px; border-radius: 22px; }
.card h2 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
  color: var(--paper);
}
.card .sub { color: var(--sage); }
.card .eyebrow { color: var(--sage); }
.card .eyebrow.accent { color: var(--lime); }
.card a { color: var(--lime); }
.card .display { color: var(--paper); }
.card.flat { background: var(--tint); color: var(--ink-solid); --ink: var(--ink-solid); --ink-secondary: #3E3327; --muted: var(--olive); --accent: var(--ink); --line: var(--line-lm); --line-strong: var(--line-lm-strong); --good: #1F5A0A; --bad: var(--bad); }
.card.flat h2, .card.flat .display { color: var(--ink); }
.card.flat .sub, .card.flat .eyebrow { color: var(--olive); }
.card.flat a { color: var(--ink); }
.card.danger { border: 1.5px solid var(--bad); background: transparent; color: var(--ink-solid); --ink: var(--ink-solid); --ink-secondary: #3E3327; --muted: var(--olive); --bad: #B3261E; }
.card.danger h2 { color: var(--bad); }
.card.danger .sub, .card.danger .eyebrow { color: var(--olive); }
/* .card strong is paper for the ink cards; the two lime-ground card variants put it back to ink. */
.card.flat strong, .card.danger strong { color: var(--ink-solid); }

/* ---------- Buttons & forms ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, opacity 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.small { width: auto; min-height: 40px; padding: 9px 16px; font-size: 13px; border-radius: 12px; }
.btn.done { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn.danger-btn { margin-top: 12px; background: transparent; color: var(--bad); border: 1.5px solid var(--bad); }
.card .btn { background: var(--lime); color: var(--on-lime); }
.card .btn.ghost { background: transparent; color: var(--paper); border: 1px solid rgba(243, 232, 214, 0.3); }
.card .btn.done { background: transparent; color: var(--lime); border: 1px solid rgba(226, 196, 138, 0.4); }
.card.flat .btn { background: var(--ink-solid); color: var(--lime); }
.card.flat .btn.ghost { background: transparent; color: var(--ink-solid); border: 1.5px solid var(--ink-solid); }

label.field { display: block; margin-top: 14px; }
label.field span { display: block; font-size: 12.5px; color: var(--ink-secondary); margin-bottom: 6px; font-weight: 500; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--ink);
  background: rgba(243, 232, 214, 0.5);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px; /* prevents iOS zoom */
}
textarea { min-height: 80px; resize: vertical; }
.card input[type="text"], .card input[type="email"], .card input[type="password"], .card input[type="number"],
.card input[type="date"], .card input[type="time"], .card select, .card textarea {
  border: 1px solid rgba(243, 232, 214, 0.25);
  background: rgba(243, 232, 214, 0.06);
  color: var(--paper);
}
.card.flat input, .card.flat select, .card.flat textarea { border: 1.5px solid var(--ink); background: rgba(243, 232, 214, 0.5); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(226, 196, 138, 0.35); }
.card input:focus, .card select:focus, .card textarea:focus { box-shadow: 0 0 0 3px rgba(226, 196, 138, 0.35); border-color: var(--lime); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  flex: 1 1 auto;
  text-align: center;
  padding: 11px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.seg input:checked + label { background: var(--ink); color: var(--lime); font-weight: 600; }
.card .seg label { border-color: rgba(243, 232, 214, 0.3); color: var(--paper); }
.card .seg input:checked + label { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.seg input:focus-visible + label { outline: 2px solid currentColor; outline-offset: 2px; }

.error {
  background: rgba(179, 38, 30, 0.08);
  border: 1.5px solid var(--bad);
  color: var(--bad);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13.5px;
  margin-top: 12px;
}
.notice {
  background: var(--tint);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 12px;
  color: var(--ink);
}
.notice a { color: var(--ink); }
.card .notice { background: rgba(243, 232, 214, 0.07); color: var(--paper-2); }
.card .notice strong, .card strong { color: var(--paper); }
.card .notice a { color: var(--lime); }

/* ---------- Tab bar: tinted glass (Today / Squad / Plan / Progress / Achievements / Account) ----------
   Option A, chosen by Keelan 26 Sep 2026. A floating espresso glass pill; the open tab sits in a
   gold-tinted glass capsule sized to its label. The tabs share the width by label length, so
   "Achievements" gets the room it needs and a capsule never crowds its neighbour. A tap slides the
   capsule to the tapped tab straight away while the next page loads (public/js/tabbar.js); the
   page itself changes as it always has. The outer strip lets taps through, so only the pill
   itself catches them. */
.tabbar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0 10px max(10px, calc(env(safe-area-inset-bottom) - 10px));
  pointer-events: none;
}
.tabbar-inner {
  position: relative;
  pointer-events: auto;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  padding: 6px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(64, 51, 38, 0.74) 0%, rgba(34, 27, 20, 0.84) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(0.72);
  backdrop-filter: blur(20px) saturate(150%) brightness(0.72);
  box-shadow: inset 0 1px 0 rgba(243, 232, 214, 0.16), inset 0 0 0 1px rgba(243, 232, 214, 0.09),
              0 18px 34px -14px rgba(42, 33, 24, 0.65), 0 3px 8px rgba(42, 33, 24, 0.22);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar-inner { background: rgba(42, 33, 24, 0.97); }
}
.tab {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  color: rgba(207, 195, 174, 0.82);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tab .face {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 52px;
  padding: 8px 5px 7px;
  border-radius: 18px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--lime); }
.tab:focus-visible { outline: none; }
.tab:focus-visible .face { outline: 2px solid var(--focus); outline-offset: 1px; }
.tab-glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(226, 196, 138, 0.10) 0%, rgba(226, 196, 138, 0.20) 55%, rgba(226, 196, 138, 0.32) 100%);
  box-shadow: inset 0 0 0 1px rgba(226, 196, 138, 0.40), inset 0 1px 0 rgba(255, 238, 205, 0.30), 0 6px 16px -8px rgba(226, 196, 138, 0.55);
}
/* In flight: tabbar.js lifts the capsule out of the old tab into the bar and slides it, behind
   the icons, to the tapped one. */
.tab-glass.moving { inset: auto; z-index: 0; border-radius: 18px; }

/* ---------- Pills, tags, chips ---------- */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.dk { background: var(--ink); color: var(--lime); }
.pill.ln { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.tagx { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: rgba(243, 232, 214, 0.12); color: var(--paper); }
.tagx.lime { background: rgba(226, 196, 138, 0.16); color: var(--lime); }
.zone-pill {
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
  background: rgba(226, 196, 138, 0.16);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line-lm-strong); color: var(--ink); }
.tag.race { color: var(--bad); border-color: var(--bad); }
.tag.good { color: #1F5A0A; border-color: #1F5A0A; }
.ph-base, .ph-build, .ph-peak, .ph-taper, .ph-absorb { --ph: var(--ink); }
.tag.ph-base, .tag.ph-build, .tag.ph-peak, .tag.ph-taper, .tag.ph-absorb { color: var(--ink); border-color: var(--ink); }
.card .tag { color: var(--paper); border-color: rgba(243, 232, 214, 0.3); }

.chips { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 68px;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
}
.chip .num { font-size: 24px; font-weight: 500; line-height: 1.05; }
.chip span:last-child { font-size: 9.5px; color: var(--olive); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; }
.chip-zone { background: var(--ink); color: var(--lime); }
.chip-zone .num { color: var(--lime); }
.chip-zone span:last-child { color: var(--sage); }
/* A chip that asks for a look: the audit's error count, an edited draft. */
.chip-warn { background: #F5EBCF; color: #7A5200; }
.chip-warn .num { color: #7A5200; }
.chip-warn span:last-child { color: #7A5200; opacity: .8; }

/* ---------- Activity cards (Today, Day) ---------- */
.act {
  position: relative;
  border-radius: var(--radius);
  background: var(--ink-solid);
  color: var(--paper);
  padding: 14px 14px 14px 16px;
  margin-top: 10px;
  --ink: var(--paper); --ink-secondary: var(--paper-2); --muted: var(--sage); --accent: var(--lime); --good: var(--lime); --line: var(--line-dk); --bad: var(--bad-dk);
}
.act.hero { padding: 18px 18px 16px; border-radius: 22px; }
.act-link { display: block; color: inherit; text-decoration: none; }
.act-link:active { opacity: 0.75; }
.act-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.act-title { font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; line-height: 1.05; }
.act.hero .act-title { font-size: 28px; }
.act-kind { font-size: 10px; color: var(--sage); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; white-space: nowrap; }
/* Default is the lime ground (the Day page header uses it outside a card); inside ink it goes pale. */
.act-stats { display: flex; gap: 12px; margin-top: 7px; font-size: 12.5px; color: var(--olive); align-items: baseline; flex-wrap: wrap; }
.act-stats .num { font-size: 15px; color: var(--ink-solid); font-weight: 600; }
.act .act-stats, .card .act-stats { color: var(--sage); }
.act .act-stats .num, .card .act-stats .num { color: var(--paper); font-weight: 500; }
.act-detail { margin-top: 8px; font-size: 13px; color: var(--paper-2); line-height: 1.45; }
.act-fuel { margin-top: 8px; font-size: 12px; color: var(--lime); }
.act-actual { margin-top: 6px; font-size: 12.5px; color: var(--lime); font-variant-numeric: tabular-nums; }
.act-cta { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.act.done-act { opacity: 0.85; }
.badge-done { color: var(--ink-solid); font-weight: 600; font-size: 13px; }
.act .badge-done, .card:not(.flat):not(.danger) .badge-done { color: var(--lime); }
.act .sub { color: var(--sage); }
.act a.sub { color: var(--lime); }
.act .btn { background: var(--lime); color: var(--on-lime); }
/* The camera sits under "Start the session" on Today, so it has to read as the second action. */
.drawer .btn.ghost { background: transparent; color: var(--paper); border: 1.5px solid var(--lime); }
.act .btn.ghost { background: transparent; color: var(--paper); border: 1.5px solid rgba(243, 232, 214, 0.35); }
.act .btn.small { min-height: 44px; }
.act .icon-btn { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-dk); color: var(--paper); text-decoration: none; flex: 0 0 auto; }
.act.hero .btn { width: 100%; }

/* ---------- Session detail ---------- */
.zonebar { display: flex; gap: 4px; margin-top: 15px; }
.zoneseg { flex: 1; border-radius: 10px; border: 1px solid var(--line-dk); padding: 8px 0 7px; text-align: center; opacity: 0.8; }
.zoneseg .zl { display: block; font-weight: 600; font-size: 13px; color: var(--paper-2); }
.zoneseg .zb { display: block; font-size: 8.5px; color: var(--sage); margin-top: 1px; text-transform: uppercase; letter-spacing: 0.06em; }
.zoneseg.active { opacity: 1; background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.zoneseg.active .zl, .zoneseg.active .zb { color: var(--ink-solid); }
.steps { list-style: none; margin-top: 6px; }
.steps li { position: relative; padding: 9px 0 9px 22px; font-size: 13.5px; color: var(--paper-2); border-top: 1px solid var(--line-dk); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: ''; position: absolute; left: 3px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); color: var(--on-lime); }
.lift-row { display: grid; grid-template-columns: 1fr 64px 52px 52px; gap: 7px; margin-top: 7px; }
.lift-row input { padding: 9px 10px; font-size: 15px; }
/* The pre-filled strength log: one block per lift, prescription under the inputs, two suggestions under that. */
.lift { padding: 12px 0 12px; border-top: 1px solid var(--line-dk); }
.lift:first-child { border-top: 0; padding-top: 6px; }
.lift-top { display: flex; gap: 7px; align-items: center; }
.lift-top .l-name { flex: 1; min-width: 0; margin: 0; padding: 4px 0; font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1.3; }
/* Option A or B per lift, picked and locked before the workout (Keelan, 23 Sep 2026). */
.pick-b { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; vertical-align: 2px; }
.lift-choose .notice { margin-bottom: 10px; }
.choose-row { padding: 12px 0; border-top: 1px solid var(--line-dk); }
.choose-row:first-of-type { border-top: 0; padding-top: 4px; }
.choose-rx { margin: 0 0 6px; font-size: 12px; color: var(--paper-2); }
.choose-opts { display: flex; gap: 8px; }
.choose-opt { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 8px 11px; border-radius: 10px; border: 1.5px solid rgba(243, 232, 214, 0.3); background: transparent; color: var(--paper); font-family: var(--body); text-align: left; cursor: pointer; }
.choose-opt .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--sage); }
.choose-opt b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.choose-opt.sel { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.choose-opt.sel .k { color: #3E3327; }
.choose-only { flex: 1; align-self: center; margin: 0; font-size: 12px; }
.card.flat .choose-row { border-top-color: var(--line-lm); }
.card.flat .choose-opt { border-color: var(--ink-solid); color: var(--ink-solid); }
.card.flat .choose-opt .k, .card.flat .choose-rx { color: var(--olive); }
@media (max-width: 420px) { .choose-opts { flex-direction: column; } }
.lift .l-x { flex: 0 0 26px; height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.set-head, .set-row { display: grid; grid-template-columns: 28px 1fr 1fr 26px; gap: 8px; align-items: center; }
.set-head { margin-top: 8px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.set-head em { font-style: normal; color: var(--sage); letter-spacing: 0.04em; text-transform: none; }
.lift-bw { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.set-row { margin-top: 6px; }
.set-row .set-n { font-size: 12px; color: var(--sage); font-variant-numeric: tabular-nums; text-align: center; }
.set-row input { width: 100%; padding: 9px 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
.set-row .s-x { width: 26px; height: 32px; border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.set-add { margin-top: 8px; min-height: 34px; padding: 6px 12px; font-size: 12px; }
.lift-sug { flex-direction: column; }
.sug { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.sug .k { flex: 0 0 auto; }
.sug b { text-align: right; }
.lift .l-x:hover { color: var(--paper); }
.lift-rx { margin-top: 6px; font-size: 12px; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.lift-rx .lift-cue { color: var(--sage); }
.lift-sug { display: flex; gap: 8px; margin-top: 8px; }
.sug { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 7px 10px; border-radius: 10px; border: 1.5px solid rgba(243, 232, 214, 0.3); background: transparent; color: var(--paper); font-family: var(--body); text-align: left; cursor: pointer; }
.sug .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--sage); }
.sug b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sug.sel { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.sug.sel .k { color: #3E3327; }
.lift-why { margin-top: 6px; font-size: 11.5px; color: var(--sage); line-height: 1.4; }
.lift-why .w { color: var(--paper-2); }
.card.flat .lift { border-top-color: var(--line-lm); }
.card.flat .sug { border-color: var(--ink-solid); color: var(--ink-solid); }
.card.flat .sug .k, .card.flat .lift-why, .card.flat .lift-rx .lift-cue { color: var(--olive); }
.card.flat .lift-rx, .card.flat .lift-why .w { color: #3E3327; }
.inline-log { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.inline-log input { flex: 1; min-width: 0; }
.inline-log.wrap { flex-wrap: wrap; }
.inline-log.wrap input[type="text"]:first-child { flex: 1 1 100%; }
.inline-log .btn { flex: 0 0 auto; }
.test-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 1px solid var(--line-dk); padding: 10px 0; font-size: 13px; }
.test-row:first-child { border-top: 0; }
.test-row .t-name { color: var(--paper-2); }
.test-row .t-val { white-space: nowrap; color: var(--paper); }
.t-delta { font-size: 12px; margin-left: 6px; font-weight: 600; }
.t-delta.up { color: var(--lime); }
.t-delta.down { color: var(--bad-dk); }

/* ---------- Feel / segment rows (check-in feedback, morning) ---------- */
.feel-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 8px; }
.feel-row button, .fb-seg button, .segrow button {
  min-height: 40px;
  border-radius: 9px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
}
.feel-row button { aspect-ratio: 1; }
.feel-row button.sel, .fb-seg button.sel, .segrow button.sel { background: var(--ink); color: var(--lime); font-weight: 600; }
.card .feel-row button, .card .fb-seg button, .card .segrow button { border-color: rgba(243, 232, 214, 0.3); color: var(--paper); }
.card .feel-row button.sel, .card .fb-seg button.sel, .card .segrow button.sel { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.segrow { display: grid; gap: 6px; }
.segrow.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.segrow.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segrow.n10 { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.segrow.n11 { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.segrow.n11 button { min-height: 38px; font-size: 12px; border-radius: 8px; }
.segrow.n5 button, .segrow.n4 button { min-height: 44px; border-radius: 10px; }
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px; align-items: center; margin-top: 8px; }
.stepper button { height: 46px; border-radius: 12px; border: 1.5px solid var(--ink); background: transparent; font-size: 22px; color: var(--ink); cursor: pointer; }
.stepper output { height: 46px; border-radius: 12px; background: var(--ink); color: var(--lime); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.q { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.q .qh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.q .qh b { font-size: 14px; font-weight: 600; }
.q .qh span { font-size: 11.5px; color: var(--olive); text-align: right; }

/* ---------- Camera ---------- */
.cam-stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 3 / 4;
  margin-top: 14px;
}
.cam-stage video, .cam-stage canvas, .cam-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(243, 232, 214, 0.85); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.cam-controls { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.shutter { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--ink); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.shutter span { width: 66px; height: 66px; border-radius: 50%; background: var(--ink); display: block; }
.round-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- Cohort wall ---------- */
.cohort-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tile { height: 76px; border-radius: 10px; position: relative; overflow: hidden; background: var(--ink-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.blur { filter: blur(4px); }
.tile .nm { position: absolute; left: 6px; bottom: 5px; font-size: 9px; font-weight: 600; color: var(--paper); letter-spacing: 0.06em; }
.tile.slot { border: 1px dashed #3A4420; background: transparent; display: flex; align-items: center; justify-content: center; }
.tile.you { outline: 2px solid var(--lime); outline-offset: -2px; }
.tile.you .nm { color: var(--lime); }
.tile.pending { border: 1px solid var(--line-dk); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tile.pending .nm { position: static; color: var(--sage); }
.tile.pending .nb { font-size: 9px; color: var(--sage); }
.tile.more { border: 1px solid var(--line-dk); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--sage); }

/* ---------- Deadline bar ---------- */
.deadline { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.deadline .row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: var(--olive); }
.deadline .row .mono { color: var(--ink); font-weight: 600; }
.bar { height: 3px; border-radius: 2px; background: var(--line-lm); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--ink); }

/* ---------- Plan ---------- */
.shape-bar { display: flex; gap: 3px; height: 44px; margin-top: 10px; }
/* Segments are sized by weeks, so the narrowest (a 2-week taper) is about 45px wide on a phone.
   Two stacked lines, one short word each, is what fits at that width without clipping. */
.shape-seg { border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; padding: 0 3px; background: rgba(226, 196, 138, 0.14); border: 1px solid rgba(226, 196, 138, 0.35); }
.shape-seg span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lime); }
.shape-seg .sn { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.shape-seg .sw { font-size: 9px; font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; }
.shape-seg.now { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.shape-seg.now span { color: #2A2118; }   /* literal on purpose: inside .card the --ink token is remapped to paper */
.phase-bar, .phase-seg .pl, .phase-seg .pw { }
.vol-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 10px; padding: 0 2px; border-bottom: 1px solid var(--line-dk); }
.vol-bars .vb { flex: 1; border-radius: 3px 3px 0 0; background: rgba(226, 196, 138, 0.35); min-height: 4px; }
.vol-bars .vb.down { background: rgba(243, 232, 214, 0.2); }
.vol-bars .vb.taper { background: rgba(143, 184, 255, 0.5); }
.vol-bars .vb.now { background: var(--lime); color: var(--on-lime); }
.key-dates { list-style: none; margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; color: var(--paper-2); }
.key-dates li span { color: var(--sage); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 600; display: block; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; gap: 10px; }
.week-head .display { font-size: 22px; }
.week-tags { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
details.week { margin-top: 4px; }
details.week > summary { list-style: none; cursor: pointer; }
details.week > summary::-webkit-details-marker { display: none; }
details.week > summary.week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
details.week:not([open]) > summary .display::after { content: ' ›'; color: var(--olive); }
.week-card { padding: 6px !important; display: flex; flex-direction: column; gap: 2px; }
.day-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 11px 12px; border-radius: 12px; color: var(--paper); border-top: 0; }
.day-row.today-row { background: var(--lime); color: var(--on-lime); }
a.day-link { display: block; color: inherit; text-decoration: none; }
a.day-link:active { opacity: 0.7; }
.day-date { font-family: var(--body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; color: var(--sage); padding-top: 2px; }
.day-row.today-row .day-date { color: var(--olive); }
.day-chevron { display: none; }
.day-acts { display: flex; flex-direction: column; gap: 4px; }
.mini-act { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mini-act .t { color: var(--paper); }
.mini-act .t::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--kind, var(--sage)); }
.mini-act.k-run { --kind: var(--lime); } .mini-act.k-strength { --kind: var(--bike); }
.mini-act.k-mobility { --kind: var(--paper-2); } .mini-act.k-cross { --kind: var(--amber); }
.day-row.today-row .mini-act .t { color: var(--ink-solid); }
.day-row.today-row .mini-act .t::before { background: var(--ink-solid); }
.mini-act .m { color: var(--sage); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.day-row.today-row .mini-act .m { color: var(--olive); }
.mini-act.done .t { text-decoration: line-through; opacity: 0.6; }
.mini-act.skipped .t { opacity: 0.45; text-decoration: line-through dotted; }
.rest { color: var(--sage); font-size: 13px; }

/* ---------- Progress ---------- */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; border-top: 1px solid var(--line-lm-strong); border-bottom: 1px solid var(--line-lm-strong); }
.strip.cont { border-top: 0; margin-top: 0; }
.strip > div { padding: 12px 0 12px 14px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line-lm-strong); min-width: 0; }
.strip > div:first-child { padding-left: 0; }
.strip > div:last-child { border-right: 0; }
.strip .v { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.strip .l { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.kpi { padding: 14px; border-radius: 16px; border: 1.5px solid var(--ink); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kpi .l { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.kpi .v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.kpi .v b { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .v span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); }
.kpi .bar { height: 6px; border-radius: 3px; background: rgba(42, 33, 24, 0.15); }
.kpi .hint { font-size: 11px; color: var(--olive); line-height: 1.4; }
.spark { display: block; width: 100%; height: auto; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tiles.tiles-3 { grid-template-columns: 1fr 1fr 1fr; }
.tile-stat { padding: 14px; border-radius: 16px; background: var(--ink-solid); color: var(--paper); }
.tiles .tile { height: auto; padding: 14px 12px 12px; border-radius: 16px; background: var(--ink-solid); color: var(--paper); overflow: visible; }
.tiles .tile .v { font-family: var(--body); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--lime); }
.tiles .tile .l { font-size: 9.5px; color: var(--sage); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; }
.chart-card svg { display: block; width: 100%; height: auto; }
.legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--paper-2); }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-tip {
  position: fixed;
  pointer-events: none;
  background: var(--ink-solid);
  color: var(--paper);
  border: 1px solid var(--line-dk);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  z-index: 60;
  display: none;
  white-space: nowrap;
}

/* ---------- Moment (after the photo) ---------- */
.ring { position: relative; width: 240px; height: 240px; margin: 0 auto; }
.ring svg { position: absolute; inset: 0; }
.ring .c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ring .n { font-size: 88px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.axis { margin-top: 20px; padding: 14px; border-radius: 16px; background: var(--ink-solid); color: var(--paper); position: relative; height: 96px; }
.axis .base { position: absolute; left: 14px; right: 14px; top: 64px; height: 1px; background: rgba(226, 196, 138, 0.25); }
.axis .blk { position: absolute; border-radius: 5px; top: 22px; height: 42px; min-width: 8px; }
.axis .lb { position: absolute; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.axis .hr { position: absolute; top: 72px; font-size: 10px; color: var(--sage); font-variant-numeric: tabular-nums; }

/* ---------- Tables (admin) ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-family: var(--body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--muted); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line-strong); }
td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll { overflow-x: auto; }

/* ---------- Intake wizard ---------- */
.wizard-progress { margin-top: 16px; }
.wp-bar { height: 4px; border-radius: 2px; background: var(--line-lm); overflow: hidden; }
.wp-bar span { display: block; height: 100%; width: 12.5%; background: var(--ink); border-radius: 2px; transition: width 0.25s ease; }
.step { display: none; }
.step.active { display: block; }
.grid2.form { gap: 0 10px; margin-top: 0; }
.flabel { display: block; font-size: 12.5px; color: var(--ink-secondary); margin: 14px 0 4px; font-weight: 500; }
.flabel .sub { font-weight: 400; }
.wizard-nav { display: flex; gap: 10px; margin-top: 20px; }
.wizard-nav .btn { flex: 1; }
.avail-grid { margin-top: 10px; }
.avail-row { display: grid; grid-template-columns: 34px 1fr 96px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.avail-row:first-child { border-top: 0; }
.avail-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }
.avail-row label { font-size: 14px; color: var(--ink-secondary); }
.avail-row input[type="number"] { padding: 8px 10px; font-size: 14px; }

/* The intake's live payoff (15 Sep 2026, panel review part 2). The block's shape redrawn from
   the answers so far, by the same architect that writes the real one. It sits above the wizard
   and stays put while the steps change underneath it. */
.shape { position: sticky; top: 0; z-index: 5; margin-top: 14px; background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 14px 16px; }
.shape-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shape-weeks { font-family: var(--disp); font-weight: 800; font-size: 26px; line-height: 1; color: var(--lime); letter-spacing: -0.02em; }
.shape-weeks small { font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-2); display: block; margin-top: 4px; }
.shape-head { font-size: 12.5px; line-height: 1.4; color: var(--paper-2); text-align: right; max-width: 60%; }
.shape-bar { display: flex; gap: 2px; margin-top: 12px; }
.shape-bar i { flex: 1; height: 8px; border-radius: 2px; background: rgba(243, 232, 214, 0.22); }
.shape-bar i.base { background: rgba(243, 232, 214, 0.45); }
.shape-bar i.build { background: var(--lime); opacity: 0.6; color: var(--on-lime); }
.shape-bar i.peak, .shape-bar i.realisation, .shape-bar i.intensification { background: var(--lime); color: var(--on-lime); }
.shape-bar i.taper, .shape-bar i.deload, .shape-bar i.absorb { background: rgba(243, 232, 214, 0.15); }
.shape-bar i.down { background: repeating-linear-gradient(45deg, rgba(243, 232, 214,0.3), rgba(243, 232, 214,0.3) 2px, transparent 2px, transparent 4px); }
.shape-bar i.race { background: var(--amber); }
.shape-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shape-stats span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-2); border: 1px solid rgba(243, 232, 214, 0.2); border-radius: 999px; padding: 3px 9px; }
.shape-stats span b { color: var(--lime); font-weight: 600; }
.shape.thin { padding: 11px 16px; }
.shape-wait { font-size: 12.5px; color: var(--paper-2); margin-top: 2px; }

/* Core versus sharper. The core is what a block can be written from; everything after it makes
   the block better and nothing after it makes the block possible. */
/* The badge always sits inside an ink card, where --ink is remapped to paper. Painting it with
   var(--ink) therefore drew lime on near-white and the badge read as an empty pill. */
.tier { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; margin-bottom: 8px; }
.tier.core { background: var(--lime); color: var(--on-lime); }
.tier.sharper { background: transparent; color: var(--paper-2); border: 1px solid rgba(243, 232, 214, 0.32); }
.wp-bar span.sharper { background: var(--olive); }
.wizard-nav .btn.wide { flex: 1.6; }
.draft-state { font-size: 12px; color: var(--olive); margin-top: 8px; text-align: center; min-height: 16px; }
.draft-state.bad { color: var(--bad); font-weight: 600; }
.sharper-gate { border-top: 1px solid var(--line-lm); margin-top: 18px; padding-top: 14px; }

/* A number and the unit it was typed in. The canonical unit never changes in the database;
   this is only about not making an athlete convert their own height in their head. */
/* `label.field span { display: block }` is more specific than a bare `.unit-row`, so the row
   inside a <label> stacked while the identical row inside a <span class="field"> did not.
   Scoping it to .field wins the cascade and makes both behave the same. */
.grid1 { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.unit-row, .field .unit-row { display: flex; gap: 6px; align-items: stretch; margin-bottom: 0; }
.unit-row input[type="number"], .field .unit-row input[type="number"] { flex: 1; min-width: 0; margin-bottom: 0; }
.unit-row select, .field .unit-row select { flex: 0 0 auto; width: auto; min-width: 84px; padding-right: 26px; margin-bottom: 0; }
.unit-row .ftin, .field .unit-row .ftin { display: flex; gap: 6px; flex: 1; min-width: 0; }
.unit-row .ftin input { flex: 1; min-width: 0; }

/* Known trips, as real dates. Free text cannot be marked on a calendar. */
.trip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.trip-row .field { margin-top: 0; }
.trip-row .trip-note { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .shape-head { max-width: 50%; }
  .shape-weeks { font-size: 22px; }
}

.list-plain { list-style: none; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
code { font-size: 12.5px; background: var(--tint); border-radius: 6px; padding: 1px 6px; }
.card code { background: rgba(243, 232, 214, 0.1); }
.legal-list { margin: 10px 0 0; padding-left: 18px; }
.legal-list li { color: var(--ink-secondary); font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Phase A (7 Sep 2026): feedback, planned vs actual, life handling, history ---------- */
.fb-card h2 { margin-bottom: 2px; }
.fb-seg { display: flex; gap: 8px; margin-top: 6px; }
.fb-seg button { flex: 1; padding: 11px 8px; border-radius: 12px; }
.fb-actuals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fb-actuals > label { flex: 1 1 0; min-width: 64px; }
.fb-dur { flex: 1 1 100%; display: flex; gap: 8px; }   /* time as h, min, s on its own row */
.fb-actuals label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.fb-actuals input { width: 100%; }
.fb-pain-toggle { display: block; width: 100%; text-align: left; margin-top: 14px; padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); background: transparent; color: inherit; font-family: var(--body); font-weight: 600; font-size: 13px; cursor: pointer; }
.fb-pain-toggle .sub { font-weight: 400; margin-left: 6px; }
.fb-edit summary { cursor: pointer; list-style: none; }
.fb-edit summary::before { content: '+ '; color: var(--accent); }
.fb-edit[open] summary::before { content: '– '; }
.pva { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pva > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.pva .l { display: block; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; }
.pva .v { display: block; margin-top: 5px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.adj-card { }
.adj-inputs { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.adj-inputs li { font-size: 11.5px; color: var(--ink-secondary); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; }
.change-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 10px 0; font-size: 13px; }
.change-row:first-of-type { border-top: 0; }
.change-row .t { color: var(--ink-secondary); flex: 1; }
.change-row select { width: auto; max-width: 48%; padding: 8px 10px; font-size: 13px; }
.export-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.export-links a { display: block; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 12.5px; text-decoration: none; color: inherit; }
.hist-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 11.5px; color: var(--ink-secondary); }
.hist-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.hist-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hist-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.hist-day { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-secondary); font-size: 11px; }
.hist-day.today { border-color: var(--lime); }
.hist-day .dn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 9.5px; color: var(--muted); }
.hist-day .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--st, var(--line)); }
.hist-day .cnt { font-size: 11px; font-variant-numeric: tabular-nums; min-height: 13px; }
.hist-day .mv { position: absolute; top: 4px; right: 5px; font-size: 9px; color: var(--muted); }
.st-complete { --st: var(--lime); }  i.st-complete { background: var(--lime); color: var(--on-lime); }
.st-partial { --st: var(--amber); }   i.st-partial { background: var(--amber); }
.st-missed { --st: var(--bad-dk); }   i.st-missed { background: var(--bad); }
.st-sick, .st-travel { --st: var(--bike); } i.st-sick { background: var(--bike); }
.st-rest, .st-before { --st: transparent; } i.st-rest { background: var(--line-lm-strong); }
.st-rest .dot, .st-before .dot { border: 1px solid var(--line); }
.st-today .dot, .st-upcoming .dot { border: 1px dashed var(--line-strong); background: transparent; }
.hist-legend i.st-complete { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---------- Library and Status (10 Sep 2026) ---------- */
.field[hidden], .lib-tile[hidden], .lib-grid[hidden], .section-mark[hidden] { display: none !important; }
.lib-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.lib-filters .chip { border: 1px solid var(--line-lm-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 5px 11px; font: 600 11.5px var(--body); cursor: pointer; }
.lib-filters .chip.on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.lib-tile { background: var(--ink); color: var(--paper); border: 1px solid var(--line-dk); border-radius: 14px; padding: 12px 6px 10px; text-align: center; cursor: pointer; font-family: var(--body); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lib-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lib-tile .tv { align-self: flex-end; font-family: var(--disp); font-weight: 800; font-size: 11px; color: var(--sage); margin: -4px 2px -8px 0; }
/* 88 px where the column allows it; on a 320 px phone each tile has 71 px inside it, so the medal
   shrinks to fit rather than pushing the grid, and the whole page, 22 px past the screen. */
.lib-tile { min-width: 0; }
.lib-tile .bdg { width: min(88px, 100%); aspect-ratio: 1; display: block; }
.lib-tile .bdg img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--ink-2); }
.lib-tile.locked .bdg img { filter: grayscale(1) brightness(.55) contrast(.9); opacity: .8; }
.lib-tile .nm { font-weight: 600; font-size: 12px; line-height: 1.2; margin-top: 4px; }
.lib-tile .st { font-size: 10px; color: var(--sage); font-variant-numeric: tabular-nums; }
.lib-tile .st.e { color: var(--lime); }
/* The secret medal, once earned: its own section at the top of the Library, one tile, the medal larger. */
.lib-grid.omni { grid-template-columns: minmax(0, 1fr); }
.lib-grid.omni .lib-tile { padding: 16px 12px 14px; }
.lib-grid.omni .lib-tile .bdg { width: min(160px, 100%); }
.lib-grid.omni .lib-tile .nm { font-family: var(--disp); font-weight: 800; font-size: 17px; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--ink); color: var(--paper); border-left: 1px solid var(--line-dk); transform: translateX(102%); transition: transform .25s; z-index: 40; padding: 26px 22px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; }
.drawer.open { transform: none; }
.drawer .x { position: absolute; top: 14px; right: 14px; background: transparent; border: 1px solid var(--line-dk); color: var(--paper); border-radius: 999px; width: 34px; height: 34px; font-size: 18px; cursor: pointer; }
.drawer .big { width: 200px; height: 200px; margin: 6px auto 0; }
.drawer .big img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; display: block; background: var(--ink-2); }
.drawer .big.locked img { filter: grayscale(1) brightness(.55) contrast(.9); opacity: .8; }
.drawer .eyebrow.accent { color: var(--lime); }
.drawer .sub { color: var(--sage); }
.lib-dl { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; margin-top: 18px; font-size: 13px; border-top: 1px solid var(--line-dk); padding-top: 14px; }
.lib-dl dt { color: var(--sage); font-weight: 600; }
/* Part 12: the cup cabinet and the one "coming" tile (21 Sep 2026). Stand-in cup glyphs until the rendered cups land. */
/* The Squad League, cups and the Raid (Part 12). Cup colours are set per ground so silver reads on light and dark. */
.cup-mark { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; margin-left: 4px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.cupslot.none svg { opacity: .28; filter: grayscale(1); }
.league-row .place { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--lime); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.league-row .lv { font-size: 10.5px; font-weight: 500; color: var(--olive); margin-left: 4px; }
.league-row .pct { font-size: 20px; }
.raid-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 10px; }
.raid-p { border-radius: 8px; padding: 7px 4px; text-align: center; font: 600 10px var(--mono); letter-spacing: .06em; background: var(--line-dk); color: var(--sage); }
.raid-p.through { background: var(--lime); color: var(--on-lime); }
.raid-p.short { background: transparent; border: 1px solid var(--line-dk); color: var(--sage); text-decoration: line-through; }
.medal-feed { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-lm-strong); font-size: 13px; }
.medal-feed:first-child { border-top: 0; }
.medal-feed img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--ink); }
/* The Raid pop-up (Part 12): the PB pop-up's frame, its own ground and type. */
.raid-pop .raid-art { background: radial-gradient(90% 60% at 50% 18%, rgba(226, 196, 138,.34), rgba(226, 196, 138,0) 60%), repeating-linear-gradient(135deg, #0B1002 0 22px, #0E1504 22px 44px); }
.raid-pop .pb-shade { background: linear-gradient(to bottom, rgba(30, 24, 17,0) 20%, rgba(30, 24, 17,.8) 55%, rgba(30, 24, 17,.97) 85%); }
.raid-pop .raid-big { font-size: clamp(44px, 14vw, 84px); color: var(--lime); text-wrap: balance; }
.raid-pop .raid-art::after { content: 'RAID'; position: absolute; left: 0; right: 0; top: 9%; text-align: center; font: 800 clamp(120px, 44vw, 260px)/1 var(--disp); letter-spacing: -.04em; color: rgba(226, 196, 138,.13); }
.raid-squad { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.raid-squad span { font: 700 11px var(--mono); letter-spacing: .08em; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(226, 196, 138,.5); color: #F3E8D6; }
@media (prefers-reduced-motion: no-preference) { .raid-pop.pb-in .raid-art::after { animation: pb-stamp .6s cubic-bezier(.2,1.6,.4,1) both; } .raid-pop.pb-in .raid-big { animation: pb-stamp .5s .1s cubic-bezier(.2,1.6,.4,1) both; } }
/* Squads (rule 54). */
.sq-req { padding: 10px 0; border-top: 1px solid var(--line-dk); } .sq-req:first-of-type { border-top: 0; }
.sq-member { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-lm-strong); flex-wrap: wrap; }
.sq-member:first-child { border-top: 0; }
.sq-role { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--olive); margin-left: 4px; }
.sq-acts { display: flex; gap: 12px; flex-wrap: wrap; } .sq-acts form { margin: 0; }
.linkish { background: none; border: 0; padding: 0; font: 600 12px var(--body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish.warn { color: var(--bad, #B3361E); }
.sq-code { font-size: 28px; letter-spacing: .3em; color: var(--lime); }
/* The Hunt on Today (Part 12). */
.hunt-card .hunt-row { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-dk); }
.hunt-card .hunt-row:last-of-type { border-bottom: 0; }
.hunt-card .hunt-row img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--ink-2); }
.hunt-card .hr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hunt-card .hr-body b { color: var(--paper); font-size: 14px; }
.hunt-card .hr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hunt-card .hr-count { font-size: 11px; color: var(--sage); white-space: nowrap; }
.hunt-card .hr-line { font-size: 12px; color: var(--sage); line-height: 1.4; }
.hunt-card .hr-line strong { color: var(--lime); font-weight: 600; }
.hunt-card .hr-bar { display: block; height: 4px; background: var(--line-dk); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.hunt-card .hr-bar i { display: block; height: 100%; background: var(--lime); color: var(--on-lime); }
.hunt-card .got img { filter: grayscale(1) brightness(.55); }
.hunt-card .got b { color: var(--sage); text-decoration: line-through; text-decoration-thickness: 1px; }
.hunt-card .got .hr-bar i { background: var(--sage); opacity: .6; }
.hunt-card .got-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--lime); color: var(--lime); border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.cabinet .cups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.cupslot { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--ink-2); border-radius: 12px; padding: 10px 6px 8px; }
.cupslot b { font-size: 20px; color: var(--paper); font-variant-numeric: tabular-nums; }
.cupslot span { font-size: 10.5px; color: var(--sage); text-transform: uppercase; letter-spacing: .08em; }
.card.coming { display: block; margin-top: 18px; border: 1px dashed var(--line-dk); cursor: pointer; font-family: var(--body); color: var(--paper); }
.card.coming:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.lib-chain { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lib-chain span { width: 52px; height: 52px; border-radius: 10px; background: var(--ink-2); display: grid; place-items: center; border: 1px solid var(--line-dk); }
.lib-chain span img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.lib-chain span.lk img { filter: grayscale(1) brightness(.55); opacity: .75; }
.lib-chain span.cur { border-color: var(--lime); }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 30; }
.scrim.on { opacity: 1; pointer-events: auto; }
.stat-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line-dk); }
.stat-row:last-child { border-bottom: 0; }
.stat-row .nm { font-weight: 600; font-size: 13px; color: var(--paper); }
.stat-row .v { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -.02em; text-align: right; line-height: 1; color: var(--paper); }
.stat-row .d { grid-column: 1 / -1; font-size: 11px; color: var(--sage); }
.stat-row .d.up { color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .drawer, .scrim { transition: none; } }

/* ---------- The live session screen (views/session.ejs, public/js/live.js) ---------- */
.live-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.live-clock { font-family: var(--disp); font-weight: 800; font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.live-tabs { display: flex; gap: 6px; margin-top: 14px; position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--bg); }
.live-tabs button { flex: 1; min-height: 40px; border-radius: 12px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: 12.5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.live-tabs button.active { background: var(--ink); color: var(--lime); }
.live-tab-n { font-size: 10px; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
.live-tab-n:empty { display: none; }
.live-section { margin: 18px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.live-section .sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.live-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; width: 100%; text-align: left; margin-top: 8px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--body); cursor: pointer; }
.live-row-t { font-size: 14px; font-weight: 600; }
.live-row-d { font-size: 12px; color: var(--olive); font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-row-s { font-size: 12px; font-weight: 700; color: var(--olive); min-width: 14px; text-align: right; }
.live-row.done { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.live-row.done .live-row-d, .live-row.done .live-row-s { color: var(--lime); }
.live-row.skipped { opacity: .55; border-style: dashed; }
.live-card { margin-top: 10px; }
.live-card h2 { font-size: 20px; }
.live-dose { margin-top: 4px; font-size: 13px; color: var(--lime); font-variant-numeric: tabular-nums; }
.live-why, .live-how { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--paper-2); }
.live-why span, .live-how span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 2px; }
.live-cues { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.live-cues span { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(226, 196, 138, 0.45); color: var(--lime); }
.live-avoid { margin-top: 8px; font-size: 12px; color: var(--amber); line-height: 1.4; }
.live-sets { margin-top: 12px; }
.live-set { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-dk); }
.live-set.lift { grid-template-columns: 28px 1fr 1fr 40px; gap: 8px; }
.live-set:first-child { border-top: 0; }
.live-set.done { color: var(--sage); }
.live-set.running { color: var(--lime); }
.live-set-n { font-size: 13px; font-weight: 600; }
.live-set.lift .live-set-n { font-size: 12px; color: var(--sage); text-align: center; font-variant-numeric: tabular-nums; }
.live-set-rx { font-size: 13px; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.live-set input { width: 100%; padding: 9px 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
.live-tick { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(243, 232, 214, 0.35); background: transparent; color: var(--paper); font-size: 16px; font-weight: 700; cursor: pointer; }
.live-tick.on { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.live-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.live-actions .btn { width: auto; flex: 1 1 auto; }
.live-step-text { font-size: 14px; line-height: 1.5; color: var(--paper); }
.live-note { white-space: normal; }
.live-form p { margin-top: 6px; font-size: 13px; line-height: 1.45; padding-left: 14px; position: relative; }
.live-form p::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.live-sw { text-align: center; }
.live-sw-time { font-family: var(--disp); font-weight: 800; font-size: 64px; letter-spacing: -.03em; line-height: 1; margin: 12px 0 6px; color: var(--paper); font-variant-numeric: tabular-nums; }
.live-sw .live-actions { justify-content: center; }
.live-laps { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 12px; font-size: 12.5px; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.live-laps b { color: var(--lime); margin-right: 4px; }
.live-laps i { font-style: normal; color: var(--sage); }
.live-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--ink); color: var(--paper); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(42, 33, 24, 0.35); }
.live-bar-in { max-width: 440px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.live-bar-in .sub { flex: 1; color: var(--paper-2); font-size: 12.5px; line-height: 1.3; }
.live-bar-in .num { font-family: var(--disp); font-weight: 800; font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--lime); }
.live-bar-in .btn { width: auto; background: var(--lime); color: var(--on-lime); }
.live-bar-track { max-width: 440px; margin: 10px auto 0; height: 4px; border-radius: 2px; background: rgba(243, 232, 214, 0.15); overflow: hidden; }
.live-bar-track i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .25s linear; color: var(--on-lime); }
.shell.no-nav.has-bar { padding-bottom: 120px; }
.live-start { margin-top: 14px; }
/* The start-and-end picture on a movement or lift card (16 Sep 2026): one square image, the
   left half A the start of the rep, the right half B the end. The caption names what is drawn
   so a variant of the movement is never mistaken for the picture. */
.live-ab { margin: 12px 0 0; }
.live-ab img { display: block; width: 100%; height: auto; border-radius: 12px; background: #2A2118; }
.live-ab figcaption { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.live-ab figcaption b { color: var(--lime); margin-right: 4px; }
.live-ab-shown { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--paper-2); text-align: right; }
/* The plate calculator under a barbell lift's sets. */
.live-ramp { margin: 10px 0 12px; padding: 8px 10px 4px; border: 1px dashed var(--line-dk); border-radius: 10px; }
.live-ramp .eyebrow { margin: 0 0 2px; }
.live-set.ramp { grid-template-columns: 28px 1fr 1.3fr 40px; }
.live-set.ramp .ramp-w { font-weight: 600; font-variant-numeric: tabular-nums; }
.live-set.ramp .ramp-r { font-size: 13px; color: var(--paper-2); }
.live-set.ramp .ramp-r em { font-style: normal; color: var(--sage); margin-left: 4px; }
.live-plates { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.live-plates b { color: var(--lime); font-weight: 600; }
.live-plates .live-bar-btn { flex: 0 0 auto; font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(243, 232, 214, 0.3); background: transparent; color: var(--paper-2); cursor: pointer; }
.live-plates .live-bar-btn:active { border-color: var(--lime); color: var(--lime); }
/* The one-line hint under the countdown bar when a push cannot reach this phone. */
.live-bar-hint { max-width: 440px; margin: 8px auto 0; display: flex; align-items: center; gap: 10px; font-size: 11.5px; line-height: 1.35; color: var(--sage); }
.live-bar-hint a { color: var(--lime); }
.live-bar-hint button { flex: 0 0 auto; background: none; border: 0; color: var(--sage); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }

/* ---------- The front door and the trial lock (rule 33, 15 Sep 2026) ---------- */
.shell:has(> .landing) { max-width: 720px; }
.landing { display: flex; flex-direction: column; gap: 28px; }
.land-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.land-links { display: flex; gap: 16px; font-size: 13.5px; font-weight: 600; }
.land-links a { text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; }
.land-hero h1 { margin-top: 8px; }
.land-lede { font-size: 16px; line-height: 1.5; color: var(--ink-secondary); max-width: 58ch; margin-top: 12px; }
.land-h2 { font-size: 30px; }
.land-q { margin-top: 10px; }
.land-q .flabel { color: var(--paper-2); }
.card .flabel { color: var(--paper-2); }
.seg.wrap label { flex: 1 1 30%; }
.land-season-note { margin-top: 8px; }
.land-preview .btn { margin-top: 18px; }
.land-legend { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--sage); flex-wrap: wrap; margin-top: 6px; }
.land-week { margin-top: 14px; border-top: 1px solid var(--line-dk); padding-top: 12px; }
.land-week-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.land-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.land-day { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.land-day-name { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); font-weight: 600; }
.land-chip { display: block; font-size: 10.5px; line-height: 1.2; padding: 5px 5px; border-radius: 7px; background: rgba(243, 232, 214, 0.08); color: var(--paper-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.land-chip i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--paper); }
.land-chip.k-run { border-left: 3px solid var(--k-run); }
.land-chip.k-cross { border-left: 3px solid var(--k-cross); }
.land-chip.k-strength { border-left: 3px solid var(--k-strength); }
.land-chip.k-mobility { border-left: 3px solid var(--k-mobility); }
.land-chip.rest { color: var(--sage); background: transparent; border: 1px dashed rgba(243, 232, 214, 0.2); }
.land-notes { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--paper-2); }
.land-notes li { border-left: 2px solid var(--lime); padding-left: 10px; }
.land-cta { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.land-cta .btn { flex: 1 1 200px; margin-top: 0; }
.land-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.land-three .card { margin-top: 0; }
.land-three h3 { font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; line-height: 1.05; margin: 6px 0 8px; }
.land-season-list { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-secondary); }
.land-season-list li { border-top: 1px solid var(--line-lm); padding-top: 8px; }
.land-season-list b { color: var(--ink); font-weight: 600; }
.land-wait { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.land-wait .field { margin-top: 0; }
.land-wait .btn { margin-top: 0; width: auto; white-space: nowrap; }
.land-foot { font-size: 12.5px; color: var(--olive); padding-bottom: 12px; }
.land-foot a { color: var(--ink); }
.lock-card h2 { margin-top: 6px; }
@media (max-width: 640px) {
  .land-three { grid-template-columns: 1fr; }
  .land-wait { grid-template-columns: 1fr; }
  .land-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- The season plan (Phase B, 15 Sep 2026) ---------- */
.season-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.season-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.season-actions form { margin: 0; }
.season-actions .btn.small { min-height: 34px; padding: 6px 10px; }

/* ---------- The streak warning and the moment share (16 Sep 2026) ---------- */
.risk-card { border: 1px solid var(--lime); box-shadow: 0 0 0 4px rgba(226, 196, 138, 0.22); }
.risk-card h2 { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.05; color: var(--paper); }
.share-row { margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.share-row .btn { display: inline-flex; align-items: center; gap: 8px; width: auto; padding-inline: 20px; }

/* ---------- The closed loop (panel Part 7, 16 Sep 2026) ---------- */
.fb-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; margin-top: 8px; }
.fb-choice button { min-height: 40px; padding: 8px 6px; border-radius: 12px; font: 600 12.5px var(--body); line-height: 1.15; border: 1px solid var(--line-lm-strong); background: transparent; color: var(--ink); cursor: pointer; }
.fb-choice button.sel { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.card .fb-choice button { border-color: rgba(243, 232, 214, 0.3); color: var(--paper); background: transparent; }
.card .fb-choice button.sel { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.fb-hint { font-size: 11px; color: var(--sage); margin-top: 5px; }
.sugg-card { border: 1px solid var(--lime); }
.sugg-card h2 { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; line-height: 1.05; color: var(--paper); }
.sugg-actions { display: flex; gap: 8px; margin-top: 12px; }
.sugg-actions .btn { margin-top: 0; }
.verdict-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.verdict-row button { min-height: 34px; padding: 6px 12px; border-radius: 999px; font: 600 12px var(--body); border: 1px solid rgba(243, 232, 214, 0.3); background: transparent; color: var(--paper); cursor: pointer; }
.verdict-row button.sel { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }
.verdict-row .sub { margin-top: 0; font-size: 12px; }
.curve-line { font-size: 12.5px; color: var(--paper-2); margin-top: 8px; line-height: 1.45; }
.adjust-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.adjust-opts .btn { margin-top: 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.adjust-opts .btn .sub { font-size: 12px; line-height: 1.4; }
.squad-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-lm-strong); }
.squad-row:first-child { border-top: 0; }
.squad-row .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--lime); display: flex; align-items: center; justify-content: center; font: 800 13px var(--disp); }
.squad-row .av.out { background: transparent; border: 1.5px solid var(--line-lm-strong); color: var(--olive); }
.squad-row .nm { font-weight: 600; font-size: 14px; }
.squad-row .st { font-size: 11px; color: var(--olive); margin-top: 2px; }
.squad-row .pct { font-family: var(--body); font-weight: 500; font-size: 22px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: right; }
.squad-row .pct small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); }
.squad-row.me .nm { color: var(--ink); }
.squad-row .bar { grid-column: 2 / 4; height: 5px; border-radius: 3px; background: rgba(42, 33, 24, 0.12); margin-top: -2px; }
.squad-row .bar span { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.land-engine { margin-top: 44px; }
.land-engine .card { margin-top: 14px; }
.land-engine ol { padding-left: 20px; margin: 10px 0 0; color: var(--paper-2); font-size: 14px; line-height: 1.5; }
.land-engine ol li { margin-bottom: 6px; }
.land-engine ol li b { color: var(--paper); font-weight: 600; }

/* ---------- The level ladder (16 Sep 2026) ---------- */
.ladder { list-style: none; margin: 10px 0 0; padding: 0; max-height: 420px; overflow-y: auto; }
.ladder li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 4px; border-top: 1px solid var(--line-dk); font-size: 13.5px; color: var(--sage); }
.ladder li:first-child { border-top: 0; }
.ladder li .lv { font-size: 11px; color: var(--sage); }
.ladder li .xp { font-size: 10.5px; color: var(--sage); }
.ladder li.past { color: var(--paper-2); }
.ladder li.past .nm { color: var(--paper-2); }
.ladder li.here { color: var(--lime); background: rgba(226, 196, 138, 0.08); border-radius: 8px; }
.ladder li.here .lv, .ladder li.here .xp, .ladder li.here .nm { color: var(--lime); font-weight: 600; }
.ladder li.inf { align-items: center; }
.ladder li.inf .nm { font-family: var(--disp); font-weight: 800; letter-spacing: 0.02em; }
/* The top rung keeps its ∞ and it reads bigger than every level number above it (Keelan, 26 Sep 2026). */
.ladder li.inf .lv { font-size: 26px; line-height: 1; }
.ladder li.stage { border-top: 1px solid rgba(226, 196, 138, 0.35); margin-top: 6px; padding-top: 8px; }
.ladder li.stage .nm { font-family: var(--disp); font-weight: 800; font-size: 15px; color: var(--paper); letter-spacing: 0.01em; }
.ladder li.stage .lv, .ladder li.stage .xp { color: var(--sage); }

/* Tempo in plain words (beta feedback, 17 Sep 2026) */
.tempo { margin-top: 10px; }
.tempo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tempo-strip span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; border: 1px solid rgba(226, 196, 138, 0.45); text-align: center; }
.tempo-strip span.z { border-color: var(--line-dk); }
.tempo-strip i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sage); }
.tempo-strip b { font-family: var(--disp); font-size: 26px; line-height: 1; color: var(--lime); }
.tempo-strip span.z b { color: var(--sage); }
.tempo-strip em { font-style: normal; font-size: 11px; color: var(--paper-2); }
.tempo-say { margin-top: 8px; font-size: 14px; color: var(--paper); }
.tempo-explain { margin-top: 6px; font-size: 13px; }
.tempo-explain summary { cursor: pointer; color: var(--lime); font-weight: 600; }
.tempo-explain p { margin-top: 6px; color: var(--paper-2); }
.card:not(.live-card) .tempo-explain summary { color: inherit; text-decoration: underline; }
.card:not(.live-card) .tempo-explain p { color: var(--ink-secondary); }
.lift-tempo { margin-top: 2px; }

/* Plan: the opt-in start time per session (18 Sep 2026) */
.sched-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px 78px; margin-top: -4px; }
.sched-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--paper); border: 1px dashed rgba(243, 232, 214, 0.35); text-decoration: none; max-width: 100%; }
.sched-pill .sp-t { font-weight: 500; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.sched-pill.set { border-style: solid; border-color: var(--lime); color: var(--lime); }
@media (max-width: 380px) { .sched-strip { padding-left: 12px; } }
/* Squad: the evening push (18 Sep 2026) */
.squad-row .nudge-row { grid-column: 2 / 4; display: flex; justify-content: flex-end; }
.nudge-btn { font: 700 12px var(--body); letter-spacing: 0.02em; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--lime); border: 0; cursor: pointer; min-height: 34px; }
.nudge-btn:disabled { background: transparent; color: var(--olive); border: 1.5px solid var(--line-lm-strong); cursor: default; }
.card input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; }
/* Planning the week's times (18 Sep 2026) */
.week-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; margin-top: 16px; }
.week-times-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--lime); }
.wt-day { margin-top: 14px; }
.wt-row { display: grid; grid-template-columns: 1fr 128px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(243, 232, 214, 0.12); }
.wt-row:first-of-type { border-top: 0; }
.wt-row .t { font-size: 14px; font-weight: 600; }
.wt-row .m { font-size: 12px; color: var(--sage); margin-top: 2px; }
.wt-row .m .was { color: var(--lime); }
.wt-row input[type="time"] { padding: 10px 10px; font-size: 16px; }
/* Today: the time each session is scheduled for (18 Sep 2026) */
.act-time { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 5px 11px; border-radius: 999px; background: var(--lime); color: var(--on-lime); font: 700 14px var(--body); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; text-decoration: none; }
.act.hero .act-time { font-size: 16px; padding: 6px 13px; }
.act-time.none { background: transparent; color: var(--sage); border: 1px dashed rgba(243, 232, 214, 0.35); font-size: 12px; font-weight: 600; }
.act-time.past { background: transparent; color: var(--sage); border: 1px solid rgba(243, 232, 214, 0.2); }
/* Part 10, under the bar (18 Sep 2026). A record is read off the bar, never estimated (rule 43),
   and it is the athlete's own: none of these classes appear on the Squad or any cohort surface. */
.rec-chip { display: inline-block; font: 700 10px var(--body); letter-spacing: 0.12em; text-transform: uppercase; background: var(--lime); color: var(--on-lime); padding: 3px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
/* Session page: the block's target */
.tgt-card .tgt { padding: 12px 0; border-top: 1px solid var(--line-dk); }
.tgt-card .tgt:first-of-type { border-top: 0; padding-top: 6px; }
.tgt-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.tgt-done { font: 700 10px var(--body); letter-spacing: 0.12em; text-transform: uppercase; background: var(--lime); color: var(--on-lime); padding: 3px 8px; border-radius: 999px; }
.tgt-big { margin-top: 4px; color: var(--sage); font-size: 13px; }
.tgt-big .num { font-family: var(--disp); font-weight: 800; font-size: 26px; color: var(--paper); letter-spacing: -0.02em; }
.tgt-line { display: block; font-size: 12.5px; color: var(--sage); margin-top: 2px; }
.tgt-bar { height: 8px; background: var(--line-dk); border-radius: 999px; overflow: hidden; margin: 8px 0 4px; }
.tgt-bar i { display: block; height: 100%; background: var(--lime); border-radius: 999px; color: var(--on-lime); }
.tgt-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.tgt-nums span { min-width: 0; }
.tgt-nums i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.tgt-nums b { display: block; font-size: 14px; color: var(--paper); margin-top: 2px; overflow-wrap: anywhere; }
.tgt-say { margin-top: 8px; font-size: 12.5px; }
.tgt.hit .tgt-big .num { color: var(--lime); }
/* Session page: the save banner and the per-lift history */
.rec-banner { margin-top: 12px; padding: 12px; border: 1px solid var(--lime); border-radius: 14px; }
.rec-banner[hidden] { display: none; }
.rec-line { font-size: 13px; color: var(--paper-2); margin-top: 4px; overflow-wrap: anywhere; }
.rec-line.head { font-size: 15px; color: var(--paper); }
.rec-line b { color: var(--lime); }
.rec-line.medal { color: var(--sage); }
.rec-banner a.sub { display: inline-block; margin-top: 8px; font-size: 12px; }
.lift-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.lift-hist { margin-top: 10px; padding: 10px; background: var(--ink-2); border-radius: 12px; }
.lift-hist[hidden] { display: none; }
.lift-hist-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lift-hist-top .sub { font-size: 12px; }
.hist-range { display: inline-flex; border: 1px solid var(--line-dk); border-radius: 999px; overflow: hidden; }
.hist-range button { font: 600 11.5px var(--body); background: transparent; color: var(--sage); border: 0; padding: 6px 10px; min-height: 30px; cursor: pointer; }
.hist-range button.sel { background: var(--paper); color: var(--ink-solid); }
.lift-chart { margin-top: 8px; }
.lift-chart svg { display: block; width: 100%; height: auto; }
.lift-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 13px; }
.lift-day[hidden] { display: none; }
.lift-day .num { color: var(--paper-2); font-variant-numeric: tabular-nums; }
.lift-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11px; color: var(--sage); }
.lift-key i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.lift-key .k-top { width: 8px; height: 8px; border-radius: 50%; background: var(--bike); }
.lift-key .k-rec { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); color: var(--on-lime); }
.lift-key .k-est { width: 14px; height: 0; border-top: 1px solid var(--sage); }
.lift-key .k-goal { width: 14px; height: 0; border-top: 1.5px dashed var(--paper); }
/* Live screen: the chip on the set that did it */
.live-rec { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12.5px; color: var(--lime); }
.live-set.rec { border-top-color: var(--lime); }
/* The moment: today's records and the share filter */
.rec-card { margin: 12px 0 0; text-align: left; background: var(--lime); color: var(--on-lime); border: 0; }
.rec-card .eyebrow, .rec-card .eyebrow.accent { color: var(--ink-solid); }
.rec-card .big { font-family: var(--disp); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; margin-top: 4px; }
.rec-card p { color: var(--ink-solid); }
.rec-card .sm { font-size: 13px; margin-top: 6px; }
.rec-list { margin: 12px 0 0; text-align: left; }
.rec-list .rec-line { color: var(--paper); }
.share-pb { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.share-pb input { width: 20px; height: 20px; accent-color: var(--ink); }
/* The record history */
.rec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px; }
.rec-row .l { min-width: 0; }
.rec-row .d { font-size: 12px; color: var(--sage); white-space: nowrap; }
/* Log a Result: a personal best */
.res-pb { margin-left: 6px; }

/* Season definitions (views/partials/season-def.ejs): label beside the text on a wide screen,
   label above it on a phone, where two columns left the text a few words wide. */
.season-def .sd-row { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 10px; }
.season-def .sd-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.season-def dd { margin: 0; }
@media (min-width: 560px) { .season-def .sd-row { grid-template-columns: 7.5em 1fr; gap: 4px 12px; margin-top: 6px; } .season-def .sd-k { font-size: inherit; letter-spacing: 0; text-transform: none; } }

/* The Squad wall (18 Sep 2026): a tile per check-in photo, portrait like the photo, three across
   on a phone, the day's count for that athlete in the top corner. */
.wall-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wtile { aspect-ratio: 3 / 4; max-width: 100%; border-radius: 12px; position: relative; overflow: hidden; background: var(--ink-2); }
.wtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wtile .fog { position: absolute; inset: 0; filter: blur(6px); }
.wtile .ct { position: absolute; top: 6px; right: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(42, 33, 24, 0.78); color: var(--lime); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.wtile .nm { position: absolute; left: 7px; bottom: 6px; font-size: 10px; font-weight: 700; color: var(--paper); letter-spacing: 0.06em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.wtile.you { outline: 2px solid var(--lime); outline-offset: -2px; }
.wtile.you .nm { color: var(--lime); }
.wtile.pending { border: 1px solid var(--line-dk); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.wtile.pending .nm { position: static; color: var(--sage); text-shadow: none; }
.wtile.pending .nb { font-size: 9px; color: #4E5751; letter-spacing: 0.06em; }
.wtile.pending .ct { color: var(--sage); background: transparent; border: 1px solid var(--line-dk); }
.wall-note { font-size: 12px; color: var(--sage); margin: 10px 0 0; }

.wall-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wchip { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--sage); border: 1px solid var(--line-dk); border-radius: 999px; padding: 4px 9px; }
.wchip b { color: var(--paper); font-variant-numeric: tabular-nums; font-weight: 700; }
.wchip.in b { color: var(--lime); }
.wchip.you { border-color: var(--lime); color: var(--lime); }

/* History toggle (18 Sep 2026): lime while the lift's history is showing, black while it is not. */
/* Inside an ink card --ink is remapped to paper, so both states use the fixed tokens, and the
   selector outranks .card .btn.ghost. */
.card .btn.lift-hist-btn.on, .btn.lift-hist-btn.on { background: var(--lime); color: var(--on-lime); border: 1.5px solid var(--lime); }
.card .btn.lift-hist-btn:not(.on), .btn.lift-hist-btn:not(.on) { background: var(--ink-solid); color: var(--paper); border: 1.5px solid rgba(243, 232, 214, 0.3); }
.live-card .lift-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Progress, Part 11: the receipts (18 Sep 2026) ---------- */
.verdict-card { padding: 16px 16px 14px; }
.verdict-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card .verdict-h { font-family: var(--disp); font-weight: 800; font-size: 30px; line-height: 1.02; letter-spacing: -0.02em; margin: 8px 0 6px; color: var(--paper); }
.card .verdict-h.st-warn { color: var(--amber); }
.card .verdict-h.st-good { color: var(--lime); }
.vchip { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(243, 232, 214, 0.1); color: var(--paper); white-space: nowrap; }
.vchip.race { background: var(--lime); color: var(--on-lime); }
.vchip.deep, .vchip.stale { background: var(--amber); color: var(--ink-solid); }
.vnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vnums > div { background: rgba(243, 232, 214, 0.06); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; }
.vnums b { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.vnums span { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.vfoot { margin-top: 12px; font-size: 12.5px; }
.prog-tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--lime); padding: 10px 0 8px; margin-top: 12px; color: var(--on-lime); }
.prog-tabs .chip { font-size: 12.5px; padding: 7px 14px; }
.lockbox { border: 1px dashed rgba(243, 232, 214, 0.35); border-radius: 12px; padding: 12px; margin-top: 10px; color: var(--paper-2); font-size: 13.5px; line-height: 1.45; }
.lockbox b { color: var(--paper); }
.gcard .grow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line-dk); align-items: baseline; }
.gcard .grow:last-of-type { border-bottom: 0; }
.gcard .grow span { color: var(--paper-2); font-size: 13.5px; }
.gcard .grow b { color: var(--paper); font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.gcard .grow i { grid-column: 1 / -1; font-style: normal; color: var(--sage); font-size: 12px; }
.score-list li { border-top: 1px solid var(--line-dk); }
.score-list summary { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: baseline; padding: 9px 0; cursor: pointer; list-style: none; }
.score-list summary::-webkit-details-marker { display: none; }
.score-list .d { color: var(--sage); font-size: 12px; font-variant-numeric: tabular-nums; }
.score-list .t { color: var(--paper); font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.score-list b { color: var(--lime); font-size: 15px; }
.score-list .tagx { font-style: normal; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-left: 4px; }
.score-list .why { color: var(--paper-2); font-size: 12.5px; margin: 0 0 10px 60px; }
.rate-ext { display: flex; gap: 8px; align-items: center; margin: 0 0 10px 60px; font-size: 12.5px; color: var(--paper-2); }
.rate-ext select { padding: 6px 8px; font-size: 13px; width: auto; }
details.how summary { cursor: pointer; list-style: none; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary h2::after { content: ' +'; color: var(--lime); }
details.how[open] summary h2::after { content: ' −'; }
details.how p { color: var(--paper-2); font-size: 13.5px; margin-top: 10px; }
.chart-sum { margin-top: 8px; font-size: 12.5px; }
.chart-card svg:focus { outline: none; }
.chart-card svg:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- the PB celebration (public/js/pb.js)
 * Full screen, after the fact only (LESSONS rule 45). The athlete's own photo from the session
 * fills it; the animal is a 16-bit sprite bottom right beside the writing, so the top of the
 * photo stays clear (Keelan, 23 Sep 2026). No photo: the sprite's pixel backdrop. */
html.pb-open, html.pb-open body { overflow: hidden; }
.pb-pop { position: fixed; inset: 0; z-index: 1000; background: #1E1811; color: #F3E8D6; overflow: hidden; opacity: 0; transition: opacity .25s ease; }
.pb-pop.pb-in { opacity: 1; }
.pb-pop.pb-out { opacity: 0; }
.pb-art { position: absolute; inset: 0; }
.pb-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.pb-art canvas { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.pb-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30, 24, 17,0) 46%, rgba(30, 24, 17,.72) 66%, rgba(30, 24, 17,.96) 88%); }
.pb-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px calc(24px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
.pb-eyebrow { font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin: 0 0 6px; }
.pb-pun { font: 800 clamp(24px, 8vw, 36px)/1.02 var(--disp); color: var(--lime); margin: 0 0 8px; text-wrap: balance; letter-spacing: -.01em; }
.pb-big { font: 800 clamp(56px, 19vw, 104px)/.9 var(--disp); letter-spacing: -.02em; margin: 0; color: #fff; }
.pb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.pb-what { font: 800 clamp(22px, 7vw, 32px)/1.1 var(--disp); margin: 6px 0 8px; color: #fff; }
.pb-line { font: 500 15px/1.45 var(--body); color: #CFC3AE; margin: 0 0 18px; }
.pb-me { position: relative; margin: 0 -4px 16px 0; }
.pb-sprite { display: block; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)); }
.pb-tag { position: absolute; left: -8px; top: -6px; font: 800 12px/1 var(--body); letter-spacing: .06em; color: var(--on-lime); background: var(--lime); padding: 4px 6px; box-shadow: 2px 2px 0 #1E1811; }
.pb-note { font: 500 13px var(--body); color: #CFC3AE; margin: 0 0 8px; min-height: 0; }
.pb-note:empty { display: none; }
.pb-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb-go, .pb-share { width: 100%; min-height: 54px; border-radius: 999px; font: 700 16px var(--body); cursor: pointer; }
.pb-go { border: 0; background: var(--lime); color: var(--on-lime); }
.pb-share { border: 1.5px solid rgba(255,255,255,.55); background: transparent; color: #fff; }
.pb-share:disabled { opacity: .6; }
.pb-go:focus-visible, .pb-share:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .pb-in .pb-copy > * { animation: pb-rise .5s cubic-bezier(.2,.9,.3,1.2) both; }
  .pb-in .pb-copy > :nth-child(2) { animation-delay: .12s; }
  .pb-in .pb-copy > :nth-child(3) { animation-delay: .2s; }
  .pb-in .pb-copy > :nth-child(4) { animation-delay: .28s; }
  .pb-in .pb-copy > :nth-child(5) { animation-delay: .36s; }
  .pb-in .pb-copy > :nth-child(6) { animation-delay: .44s; }
  .pb-in .pb-big { animation: pb-stamp .45s .15s cubic-bezier(.2,1.6,.4,1) both; }
  .pb-in .pb-me { animation: pb-pop-in .5s .35s steps(5) both; }
}
@keyframes pb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pb-stamp { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
@keyframes pb-pop-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Champagne trial (24 Sep 2026, branch champagne-trial, never deployed) ----------
   The lime role is split: the page ground is cream, and --lime (the accent on ink) is gold.
   Anything that painted a lime chip on the ground now paints a gold chip on cream. */
:root { --ground: #F3E8D6; --bg: var(--ground); --olive: #6E5E49; --good: #3F6B2A; --k-run: #E2C48A; --s-volume: #E2C48A; }
body { background: var(--ground); }
.prog-tabs { background: var(--ground); }


/* ---------- Champagne trial, pass 2 (24 Sep 2026): gold lives on dark surfaces only ----------
   Gold on cream is 1.4:1, under the 3:1 a bar or control needs. On the cream ground the accent
   role is espresso with cream text on it; on every espresso surface it is gold with espresso text. */
:root { --lime: #2A2118; --on-lime: #F3E8D6; --olive: #5F503C; }
.act,
.axis,
.bar span,
.btn,
.btn.lift-hist-btn:not(.on),
.card,
.card .btn.lift-hist-btn:not(.on),
.card.flat .btn,
.chart-tip,
.chip-zone,
.cupslot,
.drawer,
.drawer .big img,
.fb-choice button.sel,
.fb-seg button.sel,
.feel-row button.sel,
.hist-legend i.st-complete,
.hunt-card .hunt-row img,
.league-row .place,
.lib-chain span,
.lib-filters .chip.on,
.lib-tile,
.lib-tile .bdg img,
.lift-hist,
.live-ab img,
.live-bar,
.live-row.done,
.live-tabs button.active,
.medal-feed img,
.nudge-btn,
.pb-pop,
.pill.dk,
.seg input:checked + label,
.segrow button.sel,
.shape,
.shutter span,
.squad-row .av,
.squad-row .bar span,
.stepper output,
.tabbar,
.tile,
.tile-stat,
.tiles .tile,
.wp-bar span,
.wtile { --lime: #E2C48A; --on-lime: #2A2118; }
.card.flat, .card.danger { --lime: #2A2118; --on-lime: #F3E8D6; }
/* flat cards read as a deliberate quieter surface, not a faded one */
.card.flat { background: rgba(42, 33, 24, 0.07); box-shadow: inset 0 0 0 1px rgba(42, 33, 24, 0.14); }
/* medal art on espresso: a cream ring and a lighter disc so bronze does not sink into brown */
.hunt-card .hunt-row img, .lib-tile .bdg img, .medal-feed img, .drawer .big img { background: #3E3327; box-shadow: 0 0 0 2px rgba(243, 232, 214, 0.22); }
.lib-chain span, .cupslot { box-shadow: inset 0 0 0 1px rgba(243, 232, 214, 0.14); }
/* the key session leads the day */
.act.hero { box-shadow: inset 0 3px 0 #E2C48A; padding-top: 20px; }
.act.hero .act-title { font-size: 32px; }
.tagx.key { background: #E2C48A; color: #2A2118; }


/* ---------- Champagne trial, pass 3 (24 Sep 2026) ----------
   A. One dark block per screen: only the key session stays espresso. Everything else on Today
      is a cream surface with an espresso outline, the tokens flipped so its contents follow. */
.act.lite, .card.lite {
  --paper: #2A2118; --paper-2: #4A3D2E; --sage: #5F503C; --ink: #2A2118;
  --lime: #2A2118; --on-lime: #F3E8D6; --accent: #2A2118; --good: #3F6B2A;
  --line-dk: rgba(42, 33, 24, 0.18); --line: rgba(42, 33, 24, 0.18);
  background: transparent; color: #2A2118;
  box-shadow: inset 0 0 0 1.5px rgba(42, 33, 24, 0.22);
}
.card.lite .eyebrow, .card.lite .sub, .act.lite .act-kind, .act.lite .sub { color: #5F503C; }
.card.lite .eyebrow.accent { color: #2A2118; }
.act.lite .act-time.none { border-color: rgba(42, 33, 24, 0.35); color: #5F503C; }
.act.lite .act-time.past { border-color: rgba(42, 33, 24, 0.25); color: #5F503C; }
.act.lite .btn.ghost { color: #2A2118; border-color: rgba(42, 33, 24, 0.35); }
.act.lite .icon-btn { border-color: rgba(42, 33, 24, 0.22); color: #2A2118; }
.act.lite .tagx { background: rgba(42, 33, 24, 0.08); color: #2A2118; }
/* The Daily becomes a ribbon: a rule above, a hairline below, no block. */
.card.lite.daily-card { box-shadow: inset 0 2px 0 #2A2118, inset 0 -1px 0 rgba(42, 33, 24, 0.2); border-radius: 0; padding: 12px 0 10px; margin-top: 18px; }

/* C. Gold foil, in one place only: the rim of the session on top. A brushed band
      drawn as a border-box gradient, so it catches light like a medal edge. */
.act.hero {
  box-shadow: 0 1px 0 rgba(42, 33, 24, 0.08), 0 18px 34px -20px rgba(42, 33, 24, 0.6); padding-top: 18px;
  border: 2px solid transparent;
  background: linear-gradient(#2A2118, #2A2118) padding-box,
              linear-gradient(118deg, #A9843F 0%, #F3DCA4 22%, #C9A15E 44%, #F6E6BD 63%, #B38E48 82%, #E8CB8C 100%) border-box;
}


/* D. The finish moment: one gold sweep across a session the first time it shows as done, then
      a shimmer crosses it, and the gold stays (Keelan, 26 Sep 2026: "all completed stay gold post
      shimmer"). Every finished session on Today is a gold card with espresso text (9:1 at the
      darkest end). The sweep plays once per session, never on a reload; after that the card is
      simply gold. The one gold surface on the cream ground: the text on it is espresso, never gold. */
.act.done-act { opacity: 1; }
.act.done-act .act-title { text-decoration: none; }
.act.lite.done-act {
  --gold-foil: linear-gradient(100deg, #C9A15E, #F3DCA4 55%, #E2C48A);
  background: var(--gold-foil);
}
.act.sweep { overflow: hidden; }
.act.lite.done-act.sweep { background: transparent; }
.act.sweep::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--gold-foil, linear-gradient(100deg, #C9A15E, #F3DCA4 55%, #E2C48A));
  transform-origin: left center; transform: scaleX(0);
  animation: arc-sweep 0.85s cubic-bezier(.2, .7, .2, 1) 0.2s forwards;
}
/* the shimmer: one bright band crosses the new gold as it settles, then it is gone */
.act.sweep::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 250, 235, 0) 35%, rgba(255, 250, 235, 0.7) 50%, rgba(255, 250, 235, 0) 65%);
  transform: translateX(-100%);
  animation: arc-glint 0.7s ease-out 0.85s forwards;
}
.act.sweep > * { position: relative; z-index: 1; }
@keyframes arc-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes arc-glint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .act.lite.done-act.sweep { background: var(--gold-foil); }
  .act.sweep::before, .act.sweep::after { animation: none; display: none; }
}
/* The drop (Keelan, 26 Sep 2026): Today opens in the order the day had before a session was
   finished, and once the gold has landed and shimmered (1.6 s in) the cards move to their new places
   and slide there (today.ejs). #day-list is a plain block, so the spacing is exactly as before. */

/* Controls inside a cream card take the cream-ground accent: espresso fill, cream text. */
.act.lite .btn:not(.ghost), .card.lite .btn:not(.ghost), .card.lite .pill { --lime: #2A2118; --on-lime: #F3E8D6; }

/* Open items carry a bold espresso outline, so what is still to do separates from what is done. */
.act.lite.todo, .card.lite.todo { box-shadow: inset 0 0 0 2.5px #2A2118; }
/* a finished session is gold (pass D): a darker gold hairline holds its edge on the cream */
.act.lite.done-act { box-shadow: inset 0 0 0 1px rgba(120, 88, 30, 0.45), 0 10px 22px -16px rgba(120, 88, 30, 0.7); }

/* Fields and notes that sit on the cream ground read in espresso. The card rule gives every
   field inside a .card cream text, which vanished on the transparent danger and lite cards. */
.card.danger input, .card.danger select, .card.danger textarea,
.card.lite input, .card.lite select, .card.lite textarea { border: 1.5px solid #2A2118; background: rgba(243, 232, 214, 0.5); color: #2A2118; }
details.how p { color: #5F503C; }
.card:not(.lite):not(.flat):not(.danger) details.how p { color: var(--paper-2); }


/* ---------- Champagne trial, pass 4 (24 Sep 2026): feel, focus, depth ----------
   Feel: everything you can tap answers the press. Short, springy, transform only.
   Focus: one token, espresso on the cream ground and gold inside espresso, so the ring shows
   on every surface. Depth: espresso objects cast a warm shadow onto the paper; cream cards
   are printed on it and cast none. */
body { min-height: 100dvh; }
:root { --focus: #2A2118; }
:where(.card, .act, .tabbar, .drawer, .live-bar, .shape, .axis, .tile-stat, .chart-tip, .lib-grid) { --focus: #E2C48A; }
:where(.card.lite, .act.lite, .card.flat, .card.danger) { --focus: #2A2118; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn:focus-visible, a:focus-visible, button:focus-visible,
.seg input:focus-visible + label, .lib-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .pill, .tab, .chip, .icon-btn, .act-time, .bw-u, .live-tick, .lib-tile,
  .choose-opt, .sug, .zoneseg, .seg label, .fb-choice button, .verdict-row button,
  .feel-row button, .segrow button, .fb-seg button, .live-tabs button, .act, a.card {
    transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.18s ease,
                color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  }
  .btn:active, .pill:active, .chip:active, .icon-btn:active, .act-time:active, .bw-u:active,
  .live-tick:active, .choose-opt:active, .sug:active, .zoneseg:active, .seg label:active,
  .fb-choice button:active, .verdict-row button:active, .feel-row button:active,
  .segrow button:active, .fb-seg button:active, .live-tabs button:active { transform: scale(0.97); }
  .tab:active { transform: scale(0.92); }
  .lib-tile:active { transform: scale(0.96); }
  a.card:active, .act:has(.act-link:active) { transform: scale(0.985); }
  .act-link:active { opacity: 1; }
}
@media (hover: hover) {
  .btn:hover { filter: brightness(1.06); }
  .btn.ghost:hover, .card.lite .btn.ghost:hover { background-color: rgba(42, 33, 24, 0.06); }
  a.card:hover { filter: brightness(1.03); }
}

:where(.card:not(.lite):not(.flat):not(.danger), .tile-stat, .lib-grid) {
  box-shadow: 0 1px 0 rgba(42, 33, 24, 0.08), 0 16px 30px -20px rgba(42, 33, 24, 0.55);
}

/* Today, polished: the headline never strands a word, the key session carries one tag,
   the time sits with the actions, and the Daily reads as one clean ribbon. */
.page-title .hl-line { display: block; }
.hero-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-kind { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.act-cta .act-time { margin-bottom: 0; }
.cta-sub { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.cta-sub .btn { flex: 1 1 auto; width: auto; }
.act.hero .cta-sub .act-time { min-height: 52px; border-radius: 14px; padding: 0 16px; font-size: 15px; justify-content: center; }
.act.hero .cta-sub .act-time:not(.none) { background: transparent; color: var(--paper); border: 1px solid rgba(243, 232, 214, 0.3); }
.act.lite .act-cta .act-time:not(.none) { background: transparent; color: #2A2118; box-shadow: inset 0 0 0 1.5px rgba(42, 33, 24, 0.35); }
.act.lite .act-cta .act-time { min-height: 40px; }
.daily-card .xp-track { height: 6px; background: var(--line-dk); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.daily-card .xp-track i { display: block; height: 100%; background: var(--lime); border-radius: 999px; }
.daily-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--sage); }
.daily-row .daily-count { color: #2A2118; font-weight: 600; }
.daily-level { margin-top: 4px; font-size: 11.5px; color: var(--sage); }
.act-cta .act-time { flex: 0 0 auto; white-space: nowrap; }
.act-title { text-wrap: balance; }

/* ---------- Champagne trial, pass 5: the medal case ----------
   Each category's medals sit in one espresso display case, set into slightly lighter wells,
   instead of every medal being its own dark card. The ladder and the coming-soon note are
   supporting information and sit on the paper. */
.lib-grid { background: #2A2118; padding: 10px; border-radius: 22px; gap: 6px; }
.lib-tile { background: #33291F; border: 0; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(243, 232, 214, 0.05); }
.lib-tile.locked { background: #2F261C; }
.card.lite .ladder li.stage { border-top-color: rgba(42, 33, 24, 0.16); }
.card.lite .ladder li.here { background: rgba(42, 33, 24, 0.07); }

/* ---------- Champagne trial, pass 6: paper grain ----------
   A faint espresso grain on the cream ground, so it reads as heavy paper stock rather than a
   flat screen colour. Tiled from an inline SVG, so it costs one tiny raster and no request.
   Cream surfaces that paint their own ground (the sticky strips) carry the same tile. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .09 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }
body, .prog-tabs, .live-tabs { background-image: var(--grain); background-size: 160px 160px; }
.page-title .nw { white-space: nowrap; }

/* ---------- Champagne trial, pass 7 (24 Sep 2026): mobile first ----------
   Built from the smallest phone up. Every tap target reaches 44 px (Apple's minimum),
   no field zooms an iPhone when tapped, the six tabs fit a 320 px screen, and the parts
   that pin to the top clear the clock when Arc runs from the home screen. */

/* The home-screen app draws under the clock (black-translucent status bar), so the page
   top and anything sticky start below the safe area. In Safari the inset is 0: no change. */
.shell { padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 12px)); }
.shape, .live-tabs { top: env(safe-area-inset-top, 0px); }

/* Tap targets. Buttons grow to 44 px; small pills keep their look and get an invisible
   44 px hit area above and below, never sideways, so neighbours never overlap. */
.btn.small, .live-tabs button, .fb-choice button { min-height: 44px; }
.live-tick { width: 44px; height: 44px; }
a.pill, button.pill, a.act-time, a.chip, button.chip, .nudge-btn, .verdict-row button, .bw-units .bw-u { position: relative; }
a.pill::after, button.pill::after, a.act-time::after, a.chip::after, button.chip::after,
.nudge-btn::after, .verdict-row button::after { content: ''; position: absolute; inset: -8px 0; }
.bw-units .bw-u::after { content: ''; position: absolute; inset: -4px 0; }

/* Fields at 16 px: anything smaller makes iOS Safari zoom the page on focus. */
.lift-row input, .avail-row input[type="number"], .change-row select, .rate-ext select { font-size: 16px; }

/* Six tabs on a 320 px screen: the glass pill leaves 294 px, and the capsules at full size need
   331. Below 371 px each capsule narrows to 44 px and the labels drop to 9 px, which fits all six
   with room to spare. */
@media (max-width: 370px) {
  .tabbar { padding-inline: 8px; }
  .tabbar-inner { padding: 5px; }
  .tab .face { min-width: 44px; padding-inline: 4px; font-size: 9px; }
}

/* Score rows (the morning check-in, the photo check-in and session feedback): every
   1 to 10 and 0 to 10 button is 44 px tall. Ten or eleven in a row cannot also be 44 px
   wide on a phone, so they keep a gap that leaves each one at least 24 px of its own. */
.feel-row button, .fb-seg button, .segrow button, .segrow.n11 button { min-height: 44px; }

/* "Where?" body-area chips are 36 px tall: 4 px of invisible hit area above and below
   brings each to 44, and the 8 px row gap keeps neighbouring rows from overlapping. */
.areas { gap: 8px 6px; }
.areas button { position: relative; }
.areas button::after { content: ''; position: absolute; inset: -4px 0; }

/* Achievements filters: one row that scrolls sideways, like the Progress tabs, so each
   chip's 44 px hit area never lands on a chip in a second row. The padding keeps that
   hit area inside the scroller, which would otherwise clip it. */
.lib-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 8px 20px; }
.lib-filters::-webkit-scrollbar { display: none; }
.lib-filters .chip { flex: 0 0 auto; }

/* Intake day rows: the day name is the tap target for its tick box, so it fills the
   row's height; the box itself grows from 18 to 22 px. */
.avail-row label { display: block; padding-block: 12px; }
.avail-row input[type="checkbox"] { width: 22px; height: 22px; }
/* The RPE and pain rows drew each button square, so a 40 px minimum height made every
   button 40 px wide in a 22 to 29 px column: neighbours overlapped on every phone and a tap
   near an edge could land on the wrong number. The column sets the width, the minimum the height. */
.feel-row button { aspect-ratio: auto; min-width: 0; }
/* The filter chips are 24.5 px tall, so their hit area reaches 10 px above and below. */
.lib-filters { padding-block: 10px; }
.lib-filters .chip::after { inset: -10px 0; }

/* ---------- Champagne trial, pass 8 (25 Sep 2026): the effort wheel ----------
   How hard a session was, as a ribbed roller like a car vent's thumbwheel: minus and plus
   either side, the numbers curving away from a gold-framed centre, and the planned range
   marked under its numbers. Sits in the dark feedback cards. Script: public/js/wheel.js. */
.wheel { --rw-cell: 52px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 10px; margin-top: 10px; }
.rw-step { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(243, 232, 214, 0.3); background: transparent; color: var(--paper); font: 600 26px/1 var(--body); display: grid; place-items: center; padding: 0; cursor: pointer; }
.rw-step:disabled { opacity: 0.3; cursor: default; }
.rw-drum { position: relative; height: 84px; border-radius: 14px; overflow: hidden; background-color: #1B150F;
  background-image: repeating-linear-gradient(90deg, rgba(243, 232, 214, 0.14) 0 1px, rgba(0, 0, 0, 0.3) 1px 2px, transparent 2px 7px);
  box-shadow: inset 0 0 0 1px rgba(243, 232, 214, 0.14), inset 0 14px 16px -12px rgba(0, 0, 0, 0.75), inset 0 -14px 16px -12px rgba(0, 0, 0, 0.75); }
.rw-drum::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 15, 10, 0.9) 0%, rgba(20, 15, 10, 0.22) 26%, rgba(243, 232, 214, 0.06) 50%, rgba(20, 15, 10, 0.22) 74%, rgba(20, 15, 10, 0.9) 100%); }
/* The pointer: a gold tick above and below the centre, like the notch on a dial. */
.rw-drum::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; z-index: 3; pointer-events: none; background: linear-gradient(#E2C48A 0 11px, transparent 11px calc(100% - 11px), #E2C48A calc(100% - 11px)); }
.rw-track { position: relative; z-index: 1; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: calc(50% - var(--rw-cell) / 2); perspective: 420px; overscroll-behavior-x: contain; outline: none; }
.rw-track::-webkit-scrollbar { display: none; }
/* Focus rings the drum from outside, in the surface's own focus colour: gold in a card, espresso on cream. */
.rw-drum:has(.rw-track:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.rw-n { flex: 0 0 var(--rw-cell); position: relative; scroll-snap-align: center; display: grid; place-items: center; font: 800 30px/1 var(--disp); letter-spacing: -0.02em; color: rgba(243, 232, 214, 0.55); cursor: pointer; font-variant-numeric: tabular-nums; }
.rw-n.on { color: #E2C48A; }
.rw-n.plan::after { content: ''; position: absolute; bottom: 17px; left: 50%; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: rgba(226, 196, 138, 0.6); }
.wheel.unset .rw-n.on { color: rgba(243, 232, 214, 0.55); }
.rw-hint { margin-top: 8px; text-align: center; font-size: 12px; color: var(--sage); }
@media (prefers-reduced-motion: no-preference) { .rw-step:active { transform: scale(0.94); } }


/* ---------- Champagne trial, pass 9 (25 Sep 2026): the wheel on the morning check-in ----------
   Sleep quality, feel and body weight take the effort wheel (Keelan, 25 Sep 2026). On the cream
   page the drum stays espresso, like the sleep boxes beside it, and the steps turn espresso.
   Body weight is the fine wheel: a detent every 0.1, whole numbers printed, ticks drawn by the
   tape's own background so only the numbers are elements. Script: public/js/wheel.js. */
.rw-step { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wheel.ground .rw-step { color: #2A2118; }
.wheel.ground + .rw-hint { color: #5F503C; }
.wheel:not(.unset) + .rw-hint.while-unset { display: none; }
.q .wheel { margin-top: 2px; }
.q .wheel + .rw-hint { margin-top: 0; }

.wheel.fine { --rw-tick: 8px; --rw-major: 10; --rw-mid: 5; }   /* px per detent (wheel.js reads it); ticks per printed number, set by wheel.js */
.wheel.fine .rw-drum { background-image: none; }
.wheel.fine .rw-track { scroll-snap-type: none; padding-inline: 50%; }
.rw-tape { --t: var(--rw-tick); flex: 0 0 auto; height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--t) / 2 - 1px), rgba(243, 232, 214, 0.62) calc(var(--t) / 2 - 1px) calc(var(--t) / 2 + 1px), transparent calc(var(--t) / 2 + 1px) calc(var(--t) * var(--rw-major))) left top / 100% 17px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(var(--t) / 2 - 1px), rgba(243, 232, 214, 0.62) calc(var(--t) / 2 - 1px) calc(var(--t) / 2 + 1px), transparent calc(var(--t) / 2 + 1px) calc(var(--t) * var(--rw-major))) left bottom / 100% 17px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(var(--t) / 2 - 0.75px), rgba(243, 232, 214, 0.36) calc(var(--t) / 2 - 0.75px) calc(var(--t) / 2 + 0.75px), transparent calc(var(--t) / 2 + 0.75px) calc(var(--t) * var(--rw-mid))) left top / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(var(--t) / 2 - 0.75px), rgba(243, 232, 214, 0.36) calc(var(--t) / 2 - 0.75px) calc(var(--t) / 2 + 0.75px), transparent calc(var(--t) / 2 + 0.75px) calc(var(--t) * var(--rw-mid))) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(var(--t) / 2 - 0.5px), rgba(243, 232, 214, 0.2) calc(var(--t) / 2 - 0.5px) calc(var(--t) / 2 + 0.5px), transparent calc(var(--t) / 2 + 0.5px) var(--t)) left top / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(var(--t) / 2 - 0.5px), rgba(243, 232, 214, 0.2) calc(var(--t) / 2 - 0.5px) calc(var(--t) / 2 + 0.5px), transparent calc(var(--t) / 2 + 0.5px) var(--t)) left bottom / 100% 8px no-repeat; }
.rw-lab { position: absolute; top: 50%; padding: 8px 6px; font: 800 22px/1 var(--disp); letter-spacing: -0.02em; color: rgba(243, 232, 214, 0.55); transform: translate(-50%, -50%); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rw-lab.on { color: #E2C48A; }
.wheel.unset .rw-lab.on { color: rgba(243, 232, 214, 0.55); }


/* ---------- Champagne trial, pass 10 (25 Sep 2026): raised keys ----------
   Keelan: the clear buttons should be raised, "subtle enough to not be overdone but visible
   enough to create visual depth". One rule for the whole app: what you can press stands up off
   its surface, the option that is chosen is pressed in, and information (tags, stats, rows,
   tiles) stays flat. Each surface lights its own keys through the tokens below, so a single
   declaration serves the cream page, the espresso cards and the cream cards. A press drops the
   key 1 px and takes its shadow with it. The state rides on --key-now, so pressed and chosen
   never have to out-rank the many specific rules that already paint these controls. */
:where(.card, .act, .drawer, .live-bar, .tabbar, .shape, .axis, .tile-stat, .chart-tip, .lib-grid) {
  --key-face: linear-gradient(180deg, #3D3125 0%, #31271D 100%);
  --key-edge: rgba(243, 232, 214, 0.4);
  --key-lift: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 8px 14px -8px rgba(0, 0, 0, 0.65),
              inset 0 1px 0 rgba(243, 232, 214, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  --key-press: 0 0 0 transparent, inset 0 1px 3px rgba(0, 0, 0, 0.55);
  --key-sunk: inset 0 2px 4px rgba(42, 33, 24, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 1px 0 rgba(243, 232, 214, 0.1);
  --cta-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.08));
  --cta-lift: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 5px -1px rgba(0, 0, 0, 0.55), 0 9px 16px -10px rgba(0, 0, 0, 0.7);
  --cta-press: inset 0 2px 4px rgba(42, 33, 24, 0.5);
}
/* Cream: the page itself, and the cream cards printed on it. Declared after the dark set so a
   cream card inside nothing else wins it back. Edge 3.4:1 on the paper, the line a control needs. */
:root, :where(.card.lite, .act.lite, .card.flat, .card.danger) {
  --key-face: linear-gradient(180deg, #FDF9F2 0%, #F5ECDF 100%);
  --key-edge: rgba(42, 33, 24, 0.55);
  --key-lift: 0 1px 0 rgba(42, 33, 24, 0.12), 0 2px 3px -1px rgba(42, 33, 24, 0.22), 0 7px 12px -8px rgba(42, 33, 24, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(42, 33, 24, 0.05);
  --key-press: 0 0 0 transparent, inset 0 1px 3px rgba(42, 33, 24, 0.22);
  --key-sunk: inset 0 2px 5px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(243, 232, 214, 0.07), 0 1px 0 rgba(255, 255, 255, 0.85);
  --cta-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.12));
  --cta-lift: inset 0 1px 0 rgba(243, 232, 214, 0.18), 0 1px 0 rgba(42, 33, 24, 0.2), 0 2px 4px -1px rgba(42, 33, 24, 0.35), 0 9px 16px -10px rgba(42, 33, 24, 0.6);
  --cta-press: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}

/* The keys: every clear control. The second half of the list restates the in-card versions,
   because their original rules paint them transparent at a higher specificity. */
:is(.segrow, .fb-seg, .feel-row, .fb-choice, .live-tabs, .stepper, .verdict-row, .areas) button,
.seg label, .bw-u, .rw-step, .btn.ghost, .btn.done, .btn.danger-btn, .icon-btn, a.pill.ln, button.chip,
.lib-filters .chip, .choose-opt, .sug, .live-tick, a.act-time, a.sched-pill, .round-btn, .fb-pain-toggle,
.drawer .x, .live-plates .live-bar-btn,
.card :is(.segrow, .fb-seg, .feel-row, .fb-choice) button, .card .seg label, .card .btn.ghost, .card .btn.done,
.card.flat .btn.ghost, .drawer .btn.ghost, .act .btn.ghost, .act.lite .btn.ghost, .act .icon-btn, .act.lite .icon-btn,
.act.hero .cta-sub .act-time:not(.none) {
  background: var(--key-face);
  border-color: var(--key-edge);
  box-shadow: var(--key-now, var(--key-lift));
}
.btn.danger-btn { border-color: var(--bad); }
/* Two keys keep the gold edge they were given: the drawer's action and a finished session's button. */
.drawer .btn.ghost { border-color: var(--lime); }
.card .btn.done { border-color: rgba(226, 196, 138, 0.5); }
/* The time chip on a cream session card draws its edge as a ring; keep it under the lift. */
.act.lite .act-cta .act-time:not(.none) { background: var(--key-face); box-shadow: inset 0 0 0 1.5px var(--key-edge), var(--key-now, var(--key-lift)); }
/* A filled button is a solid key: a soft sheen on its face and the same lift. */
.btn:not(.ghost):not(.done):not(.danger-btn), .nudge-btn:not(:disabled), a.pill.dk {
  background-image: var(--cta-sheen);
  box-shadow: var(--key-now, var(--cta-lift));
}

/* Pressed: the key goes down and its shadow goes with it. */
:is(.segrow, .fb-seg, .feel-row, .fb-choice, .live-tabs, .stepper, .verdict-row, .areas) button:active,
.seg label:active, .bw-u:active, .rw-step:active, .btn.ghost:active, .btn.done:active, .btn.danger-btn:active,
.icon-btn:active, a.pill.ln:active, button.chip:active, .choose-opt:active, .sug:active, .live-tick:active, a.act-time:active,
a.sched-pill:active, .round-btn:active, .fb-pain-toggle:active, .drawer .x:active, .live-plates .live-bar-btn:active { --key-now: var(--key-press); }
.btn:not(.ghost):not(.done):not(.danger-btn):active, .nudge-btn:not(:disabled):active, a.pill.dk:active { --key-now: var(--cta-press); }
/* Chosen: pressed in, and it stays in while it is the answer. */
:is(.segrow, .fb-seg, .feel-row, .fb-choice, .verdict-row, .areas) button.sel, .live-tabs button.active,
.seg input:checked + label, .bw-u.sel, .lib-filters .chip.on, button.chip.on, .choose-opt.sel, .sug.sel,
.live-tick.on, .btn.lift-hist-btn.on { --key-now: var(--key-sunk); }
/* Nothing to press: flat. */
.btn[disabled], .nudge-btn:disabled, .rw-step:disabled { --key-now: none; }
.rw-step:disabled { background: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .rw-step, .areas button { transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.16s ease, background-color 0.18s ease, color 0.18s ease; }
  :is(.segrow, .fb-seg, .feel-row, .fb-choice, .live-tabs, .stepper, .verdict-row, .areas) button:active:not(:disabled),
  .seg label:active, .bw-u:active, .rw-step:active:not(:disabled), .btn:active:not(:disabled), .icon-btn:active,
  a.pill:active, button.chip:active, .choose-opt:active, .sug:active, .live-tick:active, a.act-time:active,
  a.sched-pill:active, .round-btn:active, .fb-pain-toggle:active, .drawer .x:active, .live-plates .live-bar-btn:active,
  .nudge-btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
}


/* ---------- Champagne trial, pass 11 (25 Sep 2026): fields sit in ----------
   The other half of pass 10: keys stand up, fields sit into the surface, so what you tap and
   what you type read apart at a glance. A field is a shallow well: a shade darker than its
   surface, shadowed under its top edge, with a thin light lip below. Same per-surface tokens,
   same 3:1 edge. Placeholders take a warm grey that still reads (about 4:1 on the cream well). */
:where(.card, .act, .drawer, .live-bar, .tabbar, .shape, .axis, .tile-stat, .chart-tip, .lib-grid) {
  --well-face: linear-gradient(180deg, #1B150F 0%, #221B14 100%);
  --well-edge: rgba(243, 232, 214, 0.4);
  --well-sink: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(243, 232, 214, 0.09);
  --well-focus: #E2C48A;
  --well-glow: rgba(226, 196, 138, 0.3);
  --well-hint: rgba(243, 232, 214, 0.45);
}
:root, :where(.card.lite, .act.lite, .card.flat, .card.danger) {
  --well-face: linear-gradient(180deg, #EBDEC8 0%, #F0E4D1 100%);
  --well-edge: rgba(42, 33, 24, 0.55);
  --well-sink: inset 0 2px 4px -1px rgba(42, 33, 24, 0.24), inset 0 1px 0 rgba(42, 33, 24, 0.07), 0 1px 0 rgba(255, 255, 255, 0.75);
  --well-focus: #2A2118;
  --well-glow: rgba(42, 33, 24, 0.12);
  --well-hint: #7A6B57;
}
:is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
    input[type="time"], input[type="search"], input[type="tel"], input[type="url"], select, textarea),
.card :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
    input[type="time"], input[type="search"], input[type="tel"], input[type="url"], select, textarea) {
  background: var(--well-face);
  border-color: var(--well-edge);
  box-shadow: var(--well-sink);
}
:is(input, textarea)::placeholder { color: var(--well-hint); opacity: 1; }
:is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"],
    input[type="time"], input[type="search"], input[type="tel"], input[type="url"], select, textarea):focus,
.card :is(input, select, textarea):focus {
  border-color: var(--well-focus);
  box-shadow: var(--well-sink), 0 0 0 3px var(--well-glow);
}


/* ---------- Champagne trial, pass 12 (25 Sep 2026): the finished day ----------
   Keelan: "a finish day card that closes the day off". Once every session is done, one card
   closes the day where the next session stood. While a photo is missing it is the one thing
   left to do, plain espresso. Once the arc is closed it wears the brushed gold rim the top
   session wears, earned rather than given, and a sheen crosses it once. */
.day-close { margin-top: 16px; padding: 20px 18px 18px; }
.day-close:not(.almost) {
  overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(#2A2118, #2A2118) padding-box,
              linear-gradient(118deg, #A9843F 0%, #F3DCA4 22%, #C9A15E 44%, #F6E6BD 63%, #B38E48 82%, #E8CB8C 100%) border-box;
  box-shadow: 0 1px 0 rgba(42, 33, 24, 0.08), 0 18px 34px -20px rgba(42, 33, 24, 0.6);
}
.day-close .dc-title { margin: 8px 0 0; font-family: var(--disp); font-weight: 800; font-size: 36px; line-height: 1; letter-spacing: -0.02em; color: var(--paper); text-wrap: balance; }
.day-close.almost .dc-title { font-size: 26px; line-height: 1.08; }
.dc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.dc-stats div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 11px 11px 10px; border-radius: 12px; background: rgba(243, 232, 214, 0.05); box-shadow: inset 0 0 0 1px rgba(243, 232, 214, 0.1); }
.dc-stats b { font: 800 21px/1 var(--disp); letter-spacing: -0.02em; color: #E2C48A; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-stats span { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.dc-line { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--paper-2); }
.dc-line b { color: var(--paper); font-weight: 600; }
.dc-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(243, 232, 214, 0.14); color: var(--paper); text-decoration: none; }
a.dc-next { min-height: 44px; }
.dc-next-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dc-next-t b { font-size: 16px; font-weight: 600; line-height: 1.25; }
.dc-next-t .sub { font-size: 12.5px; }
.dc-next svg { flex: 0 0 auto; color: #E2C48A; }
.dc-rest { font-size: 13px; color: var(--paper-2); }
.day-close.almost .dc-why { margin-top: 8px; line-height: 1.5; }
.day-close.almost .btn { margin-top: 14px; }
/* The sheen: once per day, the first time the closed card shows (today.ejs adds .shine). */
.day-close.shine::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(246, 230, 189, 0.22) 46%, rgba(246, 230, 189, 0.06) 56%, transparent 70%);
  transform: translateX(-110%); animation: dc-shine 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s forwards; }
@keyframes dc-shine { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .day-close.shine::after { display: none; } }


/* ---------- The run screen (25 Sep 2026): the session as written, step by step, with a voice ----------
   public/js/run-coach.js. The card is the one dark block on the screen; the plan's lines sit under it
   on the cream ground, the line being run marked by weight, never by gold (gold stays on espresso). */
.run-now .run-meta { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); min-height: 1.3em; }
.run-now .run-title { margin-top: 4px; font-size: 21px; line-height: 1.25; color: var(--paper); }
.run-now .live-sw-time { margin: 10px 0 8px; }
.run-now.open .live-sw-time { color: var(--paper-2); }
.run-track { height: 6px; border-radius: 3px; background: rgba(243, 232, 214, 0.14); overflow: hidden; margin: 0 4px; }
.run-track i { display: block; height: 100%; width: 0; background: var(--lime); transition: width .25s linear; }
.run-next { margin-top: 10px; font-size: 13.5px; color: var(--paper-2); min-height: 1.3em; }
.run-now .live-actions { margin-top: 14px; }
.run-opts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.card .btn.ghost.run-opt { min-height: 44px; font-size: 12.5px; }
.card .btn.ghost.run-opt.on { --key-now: var(--key-sunk); color: var(--lime); border-color: rgba(226, 196, 138, 0.55); }
.run-voice-note { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--sage); text-align: left; }
.run-choose .run-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.run-choice-t { flex: 1; font-size: 13.5px; line-height: 1.35; }
.run-choice-v { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.run-choice-v b { min-width: 30px; text-align: center; font-size: 20px; }
.run-choice-v em { font-style: normal; font-size: 11.5px; color: var(--olive); margin-left: -4px; }
.run-choice-v .round-btn { width: 44px; height: 44px; font-size: 20px; }
.run-choice-v .round-btn[disabled] { opacity: .35; --key-now: none; }
.run-plan { margin-top: 6px; }
.run-row { cursor: default; }
.run-row.now { border-width: 2.5px; box-shadow: inset 5px 0 0 var(--ink); padding-left: 18px; }
.run-row.now .live-row-t { font-weight: 800; }
.run-notes p { font-size: 13px; }
/* Pocket mode: a black screen that ignores touches until it is held for a second. */
.pocket { position: fixed; inset: 0; z-index: 60; background: #000; color: #8A7A62; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.pocket-title { font-size: 16px; line-height: 1.35; max-width: 320px; }
.pocket-time { font-family: var(--disp); font-weight: 800; font-size: 72px; letter-spacing: -.03em; color: #B89C68; font-variant-numeric: tabular-nums; }
.pocket-hint { font-size: 12px; letter-spacing: .06em; }
.pocket-hold { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: #B89C68; }
.pocket.holding .pocket-hold { width: 100%; transition: width 1s linear; }
/* The eyebrow on a bulleted card is a heading, not a bullet (it carried a dot since 13 Sep). */
.live-form p.eyebrow { padding-left: 0; }
.live-form p.eyebrow::before { display: none; }


/* ---------- The medal pop-up (Keelan, 26 Sep 2026) ----------
   public/js/medal-pop.js. Every medal earned gets one moment, after any PB pop-up: the rendered
   medal on a 3D tile, a gold slab 20 px deep that flips in, rests at a lean so its edge shows,
   floats, and leans toward the finger, over the page itself, blurred. Gold sits on the dark scrim only (rule 62). */
html.md-open, html.md-open body { overflow: hidden; }
.md-pop { position: fixed; inset: 0; z-index: 1000; color: #F3E8D6; opacity: 0; transition: opacity .28s ease; }
.md-pop.md-in { opacity: 1; }
.md-pop.md-out { opacity: 0; }
.md-scrim { position: absolute; inset: 0; background: rgba(30, 24, 17, .68); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
.md-stage { position: relative; height: 100%; max-width: 480px; margin: 0 auto; padding: calc(24px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow-y: auto; }
.md-eyebrow { font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #E2C48A; margin: 0 0 22px; }
.md-scene { --size: min(58vw, 236px); position: relative; width: var(--size); height: var(--size); perspective: 900px; margin-bottom: 34px; flex: 0 0 auto; touch-action: none; }
.md-scene::before { content: ''; position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 196, 138, .38), rgba(226, 196, 138, 0)); pointer-events: none; }
.md-shadow { position: absolute; left: 14%; right: 14%; bottom: -30px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); }
.md-spin, .md-float, .md-tile { position: absolute; inset: 0; transform-style: preserve-3d; }
.md-float { transform: rotateX(12deg) rotateY(-18deg); }
.md-tile { --rx: 0deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.md-edge { position: absolute; inset: 0; border-radius: 26px; transform: translateZ(calc(var(--z) * -1.25px)); background: linear-gradient(135deg, #8A6830, #D8B878 38%, #9C7838 62%, #C9A15E); }
.md-edge:last-of-type { background: linear-gradient(135deg, #5E4520, #8A6830 50%, #5E4520); }
.md-face { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; transform: translateZ(1px); border: 3px solid transparent;
  background: linear-gradient(#15110C, #15110C) padding-box, linear-gradient(118deg, #A9843F 0%, #F3DCA4 22%, #C9A15E 44%, #F6E6BD 63%, #B38E48 82%, #E8CB8C 100%) border-box; }
.md-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.md-face::after { content: ''; position: absolute; inset: 0; border-radius: 23px; box-shadow: inset 0 1px 0 rgba(255, 246, 222, .25), inset 0 -22px 36px rgba(0, 0, 0, .35); pointer-events: none; }
.md-glint { position: absolute; inset: -25%; z-index: 1; background: linear-gradient(105deg, rgba(255, 246, 222, 0) 40%, rgba(255, 246, 222, .5) 50%, rgba(255, 246, 222, 0) 60%); transform: translateX(-130%); pointer-events: none; }
.md-copy { width: 100%; }
.md-name { font: 800 clamp(30px, 9vw, 40px)/1.02 var(--disp); letter-spacing: -.02em; color: #fff; margin: 0; text-wrap: balance; }
.md-plain { font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #CFC3AE; margin: 8px 0 0; }
.md-why { font: 500 16px/1.4 var(--body); color: #F3E8D6; margin: 16px 0 0; text-wrap: balance; }
.md-why span { display: inline-block; font: 700 10.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #2A2118; background: #E2C48A; border-radius: 999px; padding: 3px 8px; margin-right: 4px; vertical-align: 2px; }
.md-why b { font-weight: 600; }
.md-from, .md-more { font: 500 14px/1.45 var(--body); color: #CFC3AE; margin: 8px 0 0; text-wrap: balance; }
.md-from[hidden], .md-more[hidden] { display: none; }
.md-btns { width: 100%; margin-top: 26px; display: grid; gap: 6px; justify-items: center; }
.md-go { width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: #E2C48A; color: #2A2118; font: 700 16px var(--body); cursor: pointer; box-shadow: 0 3px 0 #8A6830, 0 14px 24px -14px rgba(0, 0, 0, .7); }
.md-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #8A6830; }
.md-lib { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; color: #F3E8D6; font: 600 14px var(--body); text-decoration: underline; text-underline-offset: 3px; }
.md-go:focus-visible, .md-lib:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-height: 640px) { .md-scene { --size: min(46vw, 180px); margin-bottom: 26px; } .md-eyebrow { margin-bottom: 14px; } .md-btns { margin-top: 18px; } }

@media (prefers-reduced-motion: no-preference) {
  .md-land .md-spin { animation: md-flip 1s cubic-bezier(.2, 1.2, .35, 1) both; }
  .md-land .md-shadow { animation: md-shadow-in 1s ease both; }
  .md-in .md-float { animation: md-float 6s ease-in-out 1.1s infinite; }
  .md-land .md-glint { animation: md-glint 1.1s ease .85s both; }
  .md-land .md-copy > * { animation: pb-rise .5s cubic-bezier(.2, .9, .3, 1.2) .35s both; }
  .md-land .md-copy > :nth-child(2) { animation-delay: .43s; }
  .md-land .md-copy > :nth-child(3) { animation-delay: .51s; }
  .md-land .md-copy > :nth-child(4) { animation-delay: .59s; }
  .md-land .md-copy > :nth-child(5) { animation-delay: .67s; }
}
@keyframes md-flip { from { transform: translateY(60px) rotateX(24deg) rotateY(-200deg) scale(.5); } to { transform: none; } }
@keyframes md-shadow-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes md-float { 0%, 100% { transform: rotateX(12deg) rotateY(-18deg); } 50% { transform: rotateX(7deg) rotateY(17deg) translateZ(10px); } }
@keyframes md-glint { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  .md-tile { transition: none; }
  .md-pop { transition: none; }
}