/* Eve unified components — derived 1:1 from handoff/Design-unified/Eve Shell.dc.html.
   tokens.css is the value authority; nothing here invents styling.
   Class names kept stable across the app so screens share one vocabulary. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  /* Behave like an app, not a page: no double-tap zoom, and no Safari
     text inflation on rotate. Pinch is blocked in index.html (the viewport
     tag plus gesture handlers, since iOS ignores user-scalable in a tab). */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;   /* no rubber-band past the ends */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; color: inherit; background: none; border: none; }
input { font-family: inherit; }
input::placeholder { color: var(--faint); }

.num, input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---- app frame ---- */
#app {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- header: monogram / title / right chips ----
   The web app runs standalone with viewport-fit=cover and a translucent
   status bar, so the view extends under the clock and the Dynamic Island —
   the header must inset itself or it renders behind them. Sticky at top:0
   keeps the inset area filled with --bg while content scrolls under it. */
.app-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  padding: calc(14px + env(safe-area-inset-top)) 16px 8px;
  display: flex; align-items: center; gap: 10px;
  min-height: 56px;
}
.app-title { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
.app-title .co { font-weight: 500; color: var(--dim); }  /* KRAFT<span class="co">ful</span> */
.spacer { flex: 1; }

.monogram {
  border-radius: 999px;
  background: var(--acc); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0; padding-bottom: 1px;
}
.monogram.sm { width: 26px; height: 26px; font-size: 15px; }
.monogram.md { width: 28px; height: 28px; font-size: 16px; }

.hdr-pill {
  font-size: 12.5px; color: var(--ink-3);
  border: 1px solid var(--chip-line-2); border-radius: var(--r-pill);
  padding: 5px 12px; font-variant-numeric: tabular-nums;
}
.hdr-icon {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--field);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 14px;
}
.hdr-icon.round { border-radius: 13px; width: 26px; height: 26px; background: none; border: 1px solid var(--chip-line-2); font-size: 13px; }

/* ---- content ---- */
.content {
  flex: 1;
  padding: 4px 16px 140px;   /* room for the floating dock */
  display: flex; flex-direction: column; gap: 12px;
}

/* ---- cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--r-card);
  padding: 18px 20px;
}
.card.list { padding: 6px 20px; }
.card.tight { padding: 16px 18px; }
.card-title { font-size: 17px; font-weight: 700; }
.card-head { display: flex; align-items: center; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 2px; }
.half-row { display: flex; gap: 12px; }
.half-row > .card { flex: 1; }

/* module OFF — dashed read-only card */
.card.off {
  background: var(--canvas);
  border: 1px dashed var(--hatch);
}
.card.off .card-title, .card.off .hero { color: var(--ink-3); }
.card.off .hero-unit, .card.off .footnote { color: var(--dock-dim); }

/* ---- source chips + pills ---- */
.src {
  margin-left: auto;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--dim);
  border: 1px solid var(--chip-line); border-radius: var(--r-pill);
  padding: 3px 9px; text-transform: uppercase; white-space: nowrap;
}
.src.acc { font-weight: 700; color: var(--acc); background: var(--acc-tint); border: none; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600;
  border-radius: var(--r-pill); padding: 3px 10px;
  border: 1px solid var(--chip-line-2);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill.good { color: var(--good); border-color: var(--good-border); }
.pill.warn { color: var(--warn); border-color: var(--warn-border); }
.pill.bad  { color: var(--bad); border-color: var(--bad-border); }
.pill.acc  { color: var(--acc); background: var(--acc-tint); border: none; font-weight: 700; font-size: 11px; letter-spacing: 0.4px; }

/* micro-label — tracked caps, used inside KOST + eyebrows only */
.micro {
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--dim);
}
.micro.faint { color: var(--faint); }

/* ---- hero values ---- */
.hero {
  font-size: 42px; font-weight: 700; letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.hero.k44 { font-size: 44px; }
.hero-unit { font-size: 14px; color: var(--dim); font-variant-numeric: tabular-nums; }
.baseline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.footnote { font-size: 12.5px; color: var(--dim); margin-top: 8px; font-variant-numeric: tabular-nums; }
.footnote b { color: var(--ink); font-weight: 600; }
.footnote .em { color: var(--ink-2); font-weight: 600; }
.meta12 { font-size: 12px; color: var(--faint); line-height: 1.5; }

/* ---- progress bars ---- */
.bar {
  height: 8px; border-radius: 4px;
  background: var(--track); overflow: hidden;
}
.bar.k9 { height: 9px; border-radius: 5px; }
.bar > .fill {
  height: 100%; border-radius: inherit;
  background: var(--good);
  transition: width 0.4s var(--ease);
}
.bar > .fill.warn { background: var(--warn); }
.bar > .fill.bad { background: var(--bad); }
.bar > .fill.acc { background: var(--acc); }
.bar > .fill.same { background: var(--faint); }
@media (prefers-reduced-motion: reduce) {
  .bar > .fill { transition: none; }
  * { animation: none !important; }
}

/* ---- buttons ---- */
.btn-primary {
  display: block; width: 100%;
  background: var(--acc); color: var(--bg);
  border-radius: var(--r-btn);
  padding: 14px; text-align: center;
  font-size: 15.5px; font-weight: 700;
}
.btn-primary.k18 { border-radius: 18px; padding: 15px; font-size: 16px; }
.btn-primary:disabled { opacity: 0.45; cursor: default; }
.btn-outline {
  background: var(--dock-bg);
  border: 1px solid var(--acc-border-strong);
  color: var(--acc);
  border-radius: var(--r-btn);
  padding: 14px; text-align: center;
  font-size: 15.5px; font-weight: 700;
}
.btn-quiet {
  border: 1px solid var(--chip-line-2); color: var(--ink-2);
  border-radius: var(--r-btn);
  padding: 14px 18px; font-size: 15px; font-weight: 600;
}
.btn-chip {   /* Swap, ⋯ — small hairline pill button */
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--chip-line-2); border-radius: var(--r-pill);
  padding: 6px 14px;
}
.link { font-size: 13.5px; font-weight: 600; color: var(--acc); cursor: pointer; background: none; border: none; padding: 0; }
.link.bad { color: var(--bad); }
button:active { transform: scale(0.97); }

/* unlock pill (settings) */
.unlock-pill {
  background: var(--acc-tint-2); color: var(--acc);
  font-size: 13px; font-weight: 700;
  border-radius: var(--r-pill); padding: 8px 18px; flex-shrink: 0;
}

/* ---- toggle (mint when on) ---- */
.toggle {
  width: 50px; height: 30px; border-radius: 15px; flex-shrink: 0;
  background: var(--field); border: 1px solid var(--chip-line);
  position: relative; transition: background 0.2s var(--ease); padding: 0;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 26px; height: 26px; border-radius: 13px;
  background: var(--dim);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.toggle.on { background: var(--good); border-color: var(--good); }
.toggle.on::after { transform: translateX(20px); background: #fff; }

/* ---- list rows ---- */
.list-head { display: flex; align-items: center; padding: 14px 0 8px; }
.list-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 13px 0;
  border-bottom: 1px solid var(--card-line);
}
.list-row:last-child { border-bottom: none; }
.list-row .name { flex: 1; font-size: 15px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.list-row .meta { font-size: 12.5px; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.list-row .meta b { color: var(--ink); font-weight: 600; }
.chev { flex-shrink: 0; }

/* ---- session grammar: sub-cards, value chips, RIR, beam ---- */
.subrow {
  border: 1px solid var(--sub-line);
  border-radius: var(--r-sub);
  padding: 14px; margin-top: 10px;
}
.subrow.done { border-color: var(--good-border-strong); }
.setnum {
  width: 24px; height: 24px; border-radius: 12px; flex-shrink: 0;
  border: 1.5px solid var(--faint); color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.setnum.done { border-color: var(--good); color: var(--good); }
.setnum.sm { width: 22px; height: 22px; border-radius: 11px; font-size: 11px; }
.valchip {
  background: var(--val); border-radius: var(--r-val); border: none;
  padding: 9px 14px; font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
  display: inline-flex; align-items: baseline; gap: 5px;
}
.valchip .unit { font-size: 12px; font-weight: 500; color: var(--dim); }
.valchip input {
  width: 44px; background: none; border: none; outline: none;
  font: inherit; color: inherit; text-align: center; padding: 0;
}
.valchip.sm { border-radius: 10px; padding: 7px 12px; font-size: 14.5px; }
.valchip.sm .unit { font-size: 11px; }
.done-btn {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--field); color: var(--faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; margin-left: auto;
}
.done-btn.done { background: var(--good); color: var(--bg); font-weight: 800; }
.beam { height: 3px; border-radius: 2px; background: var(--track-2); margin-top: 8px; position: relative; }
.beam .marker { position: absolute; top: -3px; width: 3px; height: 9px; border-radius: 2px; background: var(--good); }
.beam .marker.warn { background: var(--warn); }
.beam-state { font-size: 12.5px; font-weight: 600; margin-top: 10px; }
.beam-state.good { color: var(--good); }
.beam-state.warn { color: var(--warn); }
.prog-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-top: 12px; font-variant-numeric: tabular-nums; }
.prog-line b { color: var(--ink-2); font-weight: 600; }
.rir-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.rir-label { font-size: 11px; font-weight: 700; color: var(--dim); width: 26px; }
.rir-chip {
  flex: 1; text-align: center; font-size: 13.5px; font-weight: 600;
  color: var(--dim); background: var(--field);
  border-radius: var(--r-chip); padding: 8px 0;
  font-variant-numeric: tabular-nums;
}
.rir-chip.selected { color: var(--bg); background: var(--acc); font-weight: 700; }
.role-pill {
  font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 3px 10px;
  color: var(--acc); background: var(--acc-tint);
}
.role-pill.backoff { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.role-pill.warmup { color: var(--dim); background: var(--field); }

/* ---- eyebrow (EXERCISE 1 OF 14 · REST 1:30) ---- */
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; color: var(--dim); text-transform: uppercase; }

/* ---- search field ---- */
.search-field {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--field); border-radius: 14px;
  padding: 12px 14px; min-height: 46px;
}
.search-field input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 14.5px; color: var(--ink);
}

/* ---- segmented pill (7d / 30d / 90d) ---- */
.seg { display: flex; background: var(--field); border-radius: var(--r-pill); padding: 3px; }
.seg button {
  font-size: 12px; font-weight: 600; color: var(--dim);
  border-radius: var(--r-pill); padding: 5px 14px;
}
.seg button.active { font-weight: 700; color: var(--bg); background: var(--acc); }

/* ---- the Eve dock ---- */
.dock-wrap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 14px 14px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, var(--bg-0));
  pointer-events: none;
}
.dock-inner { max-width: 600px; margin: 0 auto; pointer-events: auto; }
.dock-extra { margin-bottom: 8px; }        /* screen-supplied footer content (progress bars, buttons) */

/* variant A — dashboard: one pill, monogram + spaces */
.dock {
  display: flex; align-items: center;
  background: var(--dock-bg);
  border: 1px solid var(--chip-line);
  border-radius: 30px; padding: 7px;
}
.eve-btn {
  width: 46px; height: 46px; border-radius: 23px;
  background: var(--acc); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; padding-bottom: 2px; flex-shrink: 0;
  position: relative;
}
/* Unread coach message or a card waiting to be reviewed. A dot, not a count:
   the number is on the screen itself, and all the dock has to answer is "is
   there something". Bordered in the dock's own background so it reads as a
   badge sitting ON the monogram rather than a smudge in it.
   ⚠️ Mint (--good) rather than the accent, for the plain reason that the
   monogram IS accent-filled — a periwinkle dot on a periwinkle disc is
   invisible. Mint is the status colour and "you have something waiting" is a
   status, so this stays inside the Eve Shell's grammar rather than bending
   it. */
.eve-btn.has-news::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 13px; height: 13px; border-radius: var(--r-pill);
  background: var(--good); border: 2.5px solid var(--dock-bg);
}
.dock-sep { width: 1px; height: 28px; background: var(--chip-line); margin: 0 6px; }
.dock-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--dock-dim); min-height: var(--tap-min); justify-content: center;
}
.dock-item .lbl { font-size: 10.5px; font-weight: 600; }
.dock-item.active { color: var(--ink); }
.dock-item.active .lbl { font-weight: 700; color: var(--acc); }
.dock-item.off { color: var(--ghost); }

/* variant C — inside modules: floating Eve button + the module's own tabs */
.dock-c { display: flex; align-items: center; gap: 10px; }
.dock-c .eve-btn { width: 52px; height: 52px; border-radius: 26px; font-size: 24px; box-shadow: 0 8px 24px var(--shadow); }
.mod-tabs {
  flex: 1; display: flex; align-items: center;
  background: var(--dock-bg);
  border: 1px solid var(--chip-line);
  border-radius: 30px; padding: 15px 18px;
}
.mod-tabs button { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--dock-dim); }
.mod-tabs button.active { font-weight: 700; color: var(--acc); }

/* ---- bottom sheets (native <dialog>) ---- */
dialog.sheet-dialog {
  border: none; background: none; padding: 0;
  width: 100%; max-width: 600px;
  margin: auto auto 0; max-height: 92dvh;
  color: var(--ink);
}
dialog.sheet-dialog::backdrop { background: var(--scrim); }
dialog.picker-dialog { max-height: 100dvh; height: 100dvh; }
/* Full-height, so it owns the status-bar area the same way the header does. */
dialog.picker-dialog .sheet {
  border-radius: 0; height: 100%; overflow-y: auto;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.sheet {
  background: var(--sheet);
  border-top: 1px solid var(--chip-line);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 10px 20px calc(40px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; max-height: 92dvh;
  animation: sheet-up 0.25s var(--ease);
}
.sheet .grip { width: 38px; height: 5px; border-radius: 3px; background: var(--grip); margin: 4px auto 8px; flex-shrink: 0; }
.sheet-title { font-size: 17px; font-weight: 700; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }

/* switcher space rows */
.space-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--wash);
  border: 1px solid var(--sub-line);
  border-radius: var(--r-sub);
  padding: 14px 16px; width: 100%; text-align: left;
}
.space-row.active { background: color-mix(in srgb, var(--acc) 10%, transparent); border-color: var(--acc-border); }
.space-row .name { font-size: 15.5px; font-weight: 700; }
.space-row .sub { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* ---- info note (routine editor progression note) ---- */
.note {
  display: flex; gap: 10px;
  background: color-mix(in srgb, var(--acc) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 18%, transparent);
  border-radius: 14px; padding: 11px 14px;
  font-size: 12px; color: var(--dim); line-height: 1.5;
}
.note .i { color: var(--acc); font-weight: 700; }

/* ---- inputs (settings, weigh-in) ---- */
.field-input {
  min-height: 44px;
  background: var(--field); border: none; border-radius: 12px;
  color: var(--ink); padding: 0 14px; font-size: 14.5px; outline: none;
}
.field-input:focus { outline: 1px solid var(--acc-border); }

/* ---- charts ---- */
.chart-svg { width: 100%; display: block; }

/* ---- empty states ---- */
.empty { font-size: 14px; color: var(--dim); padding: 16px 0; text-align: center; }
.caption { font-size: 12px; color: var(--faint); text-align: center; padding: 2px 24px; line-height: 1.5; }

/* ---- compat: legacy class names, restyled to the new grammar ----
   (kost-picker and parts of kraft were written against the first vocabulary;
   these render them per the Eve design until each file is fully migrated.) */
.icon-btn {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--field); border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); flex-shrink: 0;
}
.icon-btn.lg { width: 46px; height: 46px; border-radius: 14px; color: var(--ink); }
.recessed {
  display: flex; align-items: baseline; gap: 6px;
  background: var(--val); border: none; border-radius: var(--r-val);
  padding: 9px 14px;
}
.recessed input {
  background: none; border: none; outline: none;
  font-size: 18px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; width: 52px;
}
.recessed input::placeholder { color: var(--dim); font-weight: 700; }
.recessed .unit { font-size: 12px; font-weight: 500; color: var(--dim); }
.chip-row { display: flex; gap: 8px; flex: 1; }
.chip {
  flex: 1; min-width: var(--tap-min); min-height: var(--tap-min);
  border-radius: var(--r-chip); border: none;
  background: var(--field); color: var(--dim);
  font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chip.selected { background: var(--acc); color: var(--bg); font-weight: 700; }
.quick-log {
  min-height: var(--tap-min); padding: 8px 14px;
  background: var(--acc-tint-2); border: none; border-radius: var(--r-pill);
  color: var(--acc); font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}
.quick-log.logged { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.btn {
  min-height: var(--tap-min); padding: 0 14px;
  background: var(--field); border: 1px solid var(--chip-line);
  border-radius: 14px; color: var(--ink);
  font-size: 13.5px; font-weight: 600;
}
.card.card-list { padding: 6px 16px; }
.card-flat { padding: 14px 16px; }
.list-row.tall { min-height: 60px; padding: 8px 0; }
.subcard {
  border: 1px solid var(--sub-line); background: none;
  border-radius: var(--r-sub); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.subcard.done { border-color: var(--good-border-strong); }
.hero-sm { font-size: 42px; }
.value-lg { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.beam-track { position: relative; height: 3px; border-radius: 2px; background: var(--track-2); }
.beam-band { position: absolute; top: 0; bottom: 0; background: var(--acc-border); border-radius: 2px; opacity: 0.5; }
.beam-marker { position: absolute; top: -3px; width: 3px; height: 9px; border-radius: 2px; background: var(--good); }
.beam-marker.warn { background: var(--warn); }
.setnum.sm2 { width: 26px; height: 26px; }
.module-off-note { font-size: 12px; color: var(--dim); }
.locked-card { align-items: center; text-align: center; gap: 8px; padding: 24px 16px; display: flex; flex-direction: column; }
.setting-row { display: flex; align-items: center; gap: 12px; min-height: 56px; border-top: 1px solid var(--card-line); padding: 8px 0; }
.setting-row:first-of-type { border-top: none; }
.setting-row .title { font-size: 14px; font-weight: 600; color: var(--ink); }
.setting-row .sub { font-size: 12px; color: var(--dim); }

/* ---- landscape on a phone: ask for portrait ----
   Scoped to touch devices short enough to be a handset, so tablets, the
   desktop browser and the dev preview are untouched. Modal dialogs live in
   the top layer and would paint over any normal overlay, so they are hidden
   here rather than covered — reopening on rotate is automatic. */
#rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  #app, .dock-wrap, dialog[open] { display: none !important; }
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 200;
    background: var(--bg); color: var(--dim);
    align-items: center; justify-content: center; text-align: center;
    padding: 24px;
  }
  #rotate-hint .rot-text { font-size: 14px; font-weight: 600; margin-top: 12px; }
}

/* ---- toast ---- */
#toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(8px);
  z-index: 60; max-width: 90vw;
  background: var(--sheet); border: 1px solid var(--chip-line); border-radius: 14px;
  color: var(--ink); font-size: 13px; font-weight: 600;
  padding: 10px 16px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- dashboard detail panels ----
   Ported detail bodies from dash/public/dashboard.html, re-clothed in Eve
   tokens. Everything below is additive and scoped (.detail / .compliance-body /
   the expandable-head classes) so no existing rule changes meaning. */

:root {
  /* two legacy vars the ported markup uses that tokens.css does not alias */
  --bad-tint: color-mix(in srgb, var(--bad) 10%, transparent);
  --accent-border: var(--acc-border);
}

/* expandable card head: whole row is the tap target, chevron rotates open */
.card-head.tappable {
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  min-height: var(--tap-min); padding: 10px 0; margin: -10px 0;
}
.card-head .exp-chev {
  display: flex; align-items: center; justify-content: center;
  width: 20px; flex-shrink: 0; margin-left: 2px;
  color: var(--faint); transition: transform 0.2s var(--ease);
}
.card-head.tappable[aria-expanded="true"] .exp-chev { transform: rotate(90deg); }

/* method-note "i" button (44px target, small glyph) */
.info-btn {
  width: var(--tap-min); height: var(--tap-min); margin: -12px -10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; color: var(--dim);
}
.info-btn span {
  width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 11.5px; font-weight: 700; font-style: italic; line-height: 16px; text-align: center;
}
.sheet .method-p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.sheet .method-p b, .sheet .method-p code { color: var(--ink); }
.sheet .method-p code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12.5px; }

/* detail body under a summary card */
.detail {
  margin-top: 14px; border-top: 1px solid var(--card-line); padding-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.detail[hidden] { display: none; }
.detail hr { border: 0; border-top: 1px solid var(--card-line); margin: 4px 0; width: 100%; }
.detail .sub { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.detail .sub b.up { color: var(--good); }
.detail .sub b.down { color: var(--bad); }

/* window segments (ported markup drives state via aria-pressed) */
.detail .seglab { font-size: 12px; color: var(--dim); margin-bottom: -6px; }
.detail .seg { width: 100%; }
.detail .seg button { flex: 1; min-height: var(--tap-min); padding: 5px 6px; }
.seg button[aria-pressed="true"] { font-weight: 700; color: var(--bg); background: var(--acc); }

/* stat tiles */
.detail .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.detail .stat { background: var(--field); border: 1px solid var(--card-line); border-radius: 12px; padding: 10px 12px; }
.detail .stat .k { font-size: 12px; color: var(--dim); }
.detail .stat .n { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* metric rows (label / value / bar) */
.detail .metric { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 2px 0; }
.detail .metric .lab { font-size: 13px; color: var(--ink); }
.detail .metric .val { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.detail .metric .bar { grid-column: 1 / -1; }
/* neutralise the app-level .note (info box) inside detail bodies — here it is
   the ported quiet caption, not the accent note component */
.detail .note {
  display: block; background: none; border: none; border-radius: 0; padding: 0;
  font-size: 12px; color: var(--faint); line-height: 1.5;
}
.detail .metric .note { grid-column: 1 / -1; }

/* ported bars fill with an <i> child */
.detail .bar > i { display: block; height: 100%; border-radius: inherit; background: var(--good); transition: width 0.4s var(--ease); }
.detail .bar.warn > i { background: var(--warn); }
.detail .bar.bad > i { background: var(--bad); }
.detail .bar.accent > i { background: var(--acc); }

/* chart legend chips (ported .chiprow > .chip — override the app-level .chip) */
.detail .chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.detail .chiprow .chip {
  flex: none; min-width: 0; min-height: 0; background: none; border-radius: 0;
  font-size: 12px; font-weight: 500; color: var(--dim);
  display: inline-flex; align-items: center; gap: 5px;
}
.detail .chiprow .chip i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.detail .warnbox {
  background: var(--warn-tint); border: 1px solid var(--warn-border); border-radius: 12px;
  padding: 10px 12px; font-size: 13px; color: var(--ink); line-height: 1.5;
}

svg.chart { display: block; width: 100%; height: auto; overflow: visible; }

/* week-grouped tables */
.detail table { width: 100%; border-collapse: collapse; }
.detail th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dim);
  text-align: right; padding: 6px 4px; font-weight: 600;
}
.detail th:first-child { text-align: left; }
.detail td {
  font-size: 13px; text-align: right; padding: 7px 4px;
  border-top: 1px solid var(--card-line); font-variant-numeric: tabular-nums;
}
.detail td:first-child { text-align: left; color: var(--dim); }
.detail tr.wkavg td { background: var(--field); font-weight: 650; color: var(--ink); }
.detail tr.wkavg td:first-child { color: var(--dim); font-weight: 600; }
.detail tr.wkstart td { border-top: 2px solid var(--chip-line); }

/* the "earlier rows" / lazy folds nested inside a detail body */
.detail details.more { border-top: 1px solid var(--card-line); margin-top: 2px; }
.detail details.more > summary {
  list-style: none; cursor: pointer; padding: 12px 0; min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--dim);
}
.detail details.more > summary::-webkit-details-marker { display: none; }
.detail details.more > summary::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.2s var(--ease);
}
.detail details.more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* recovery signal rows + normal-range band */
.detail .sig { padding: 6px 0 2px; border-top: 1px solid var(--card-line); }
.detail .sig:first-of-type { border-top: 0; }
.detail .sig .row { align-items: baseline; gap: 8px; }
.detail .sig .row .lab { flex: 1; font-size: 14px; color: var(--ink); }
.detail .sig .row .now { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.detail .sig .row .dev { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--dim); }
.detail .band { position: relative; height: 22px; margin: 5px 0 2px; }
.detail .band .track { position: absolute; top: 9px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--track); }
.detail .band .norm { position: absolute; top: 9px; height: 4px; border-radius: 2px; background: var(--chip-line-2); }
.detail .band .mark { position: absolute; top: 3px; width: 3px; height: 16px; border-radius: 2px; background: var(--ink); transform: translateX(-1.5px); }
.detail .band .mark.good { background: var(--good); }
.detail .band .mark.warn { background: var(--warn); }
.detail .band .mark.bad { background: var(--bad); }
.detail .band .ends {
  position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between;
  font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums;
}

/* program week stepper + session sheet */
.detail .wknav { display: flex; align-items: center; gap: 10px; }
.detail .wknav button {
  min-width: var(--tap-min); min-height: var(--tap-min);
  border: 1px solid var(--chip-line); background: var(--field); color: var(--ink);
  border-radius: 12px; font-size: 16px; line-height: 1;
}
.detail .wknav button:disabled { opacity: 0.3; cursor: default; }
.detail .wknav .rng { flex: 1; text-align: center; font-size: 14px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.detail .wknav .rng small { display: block; font-size: 11px; font-weight: 500; color: var(--faint); }
.detail .mtx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.detail .sessgrid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 16px; align-items: start; }
.detail .sesshead { padding-bottom: 7px; border-bottom: 1px solid var(--card-line); }
.detail .sesshead .wo { display: block; font-size: 11px; color: var(--acc); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
.detail .sesshead .dt { display: block; font-size: 14px; color: var(--ink); font-weight: 650; }
.detail .sesshead .mn { display: block; font-size: 11px; color: var(--faint); }
.detail .lift { padding: 10px 0; border-top: 1px solid var(--card-line); }
.detail .lift:first-of-type { border-top: 0; }
.detail .lname { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.detail .lift .sets { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 3px; }
.detail .lift .meta { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.detail .lift .warm { color: var(--faint); }
.detail .vs { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: 2px; }
.detail .vs.up { color: var(--good); }
.detail .vs.down { color: var(--bad); }
.detail .vs.same { color: var(--dim); }

/* compliance grid (This week) */
.compliance-body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.compliance-body .grid { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 4px; align-items: center; }
.compliance-body .grid .h { font-size: 11px; color: var(--dim); text-align: center; text-transform: uppercase; letter-spacing: 0.4px; }
.compliance-body .grid .rl { font-size: 12px; color: var(--ink); padding-right: 6px; white-space: nowrap; }
.compliance-body .cell { height: 26px; border-radius: 7px; border: 1px solid var(--card-line); background: var(--field); }
.compliance-body .cell.good { background: var(--good-tint); border-color: var(--good-border); }
.compliance-body .cell.warn { background: var(--warn-tint); border-color: var(--warn-border); }
.compliance-body .cell.bad { background: var(--bad-tint); border-color: var(--bad-border); }
.compliance-body .cell.none { background: repeating-linear-gradient(135deg, transparent, transparent 4px, rgba(91,102,118,0.18) 4px, rgba(91,102,118,0.18) 5px); }
.compliance-body .legend { display: flex; flex-wrap: wrap; gap: 8px; }
.compliance-body .legend span { font-size: 12px; color: var(--dim); display: inline-flex; align-items: center; gap: 5px; }
.compliance-body .legend i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--card-line); display: inline-block; }
.compliance-body .sub { font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ── recording (C9: text, voice, video) ────────────────────────────────── */
.rec-bar[hidden] { display: none; }   /* an element with display:flex ignores the
                                          hidden attribute, which only sets
                                          display:none at the weakest possible
                                          specificity — so say it explicitly */
.rec-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--bad-border); border-radius: var(--r-sub);
  padding: 10px 12px; margin-bottom: 10px; background: var(--field);
}
.rec-bar .spacer { flex: 1; }
.rec-dot {
  width: 10px; height: 10px; border-radius: var(--r-pill);
  background: var(--bad); animation: rec-pulse 1.2s var(--ease) infinite;
}
@keyframes rec-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none } }
.rec-time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rec-preview {
  width: 160px; border-radius: var(--r-val); background: #000;
  transform: scaleX(-1);   /* a selfie preview that is not mirrored feels wrong */
}
.rec-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rec-btn { white-space: nowrap; }


/* ── the coaching screen ───────────────────────────────────────────────────
   ⚠️ ALL SCOPED UNDER .coach-screen. This screen borrows shapes from the coach
   portal (a hairline tag, a before/after grid, a message thread) that the Eve
   app has no vocabulary for — and one name, .chip, that it DOES have and means
   something entirely different (a 44px flex tap target for RIR selection).
   Scoping keeps both meanings intact. Every value below is an existing token;
   nothing new is invented (§7.3). */
.coach-screen .card + .card { margin-top: var(--gap-card); }
.coach-screen .body { margin-top: 10px; }
.coach-screen .dim { color: var(--dim); }
.coach-screen .err { color: var(--bad); font-size: 13px; margin: 8px 0 0; }
.coach-screen h4 {
  margin: 14px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--faint); font-weight: 600;
}

/* Hairline pill — the coach portal's .chip, renamed so it cannot collide. */
.coach-screen .tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--chip-line); background: var(--field);
  border-radius: var(--r-pill); padding: 3px 9px;
  font-size: 12px; color: var(--dim); white-space: nowrap;
}
.coach-screen .tag.acc { border-color: var(--acc-border); color: var(--acc); }

.coach-screen .access-list { margin: 0; padding-left: 18px; }
.coach-screen .access-list li { margin-bottom: 8px; line-height: 1.45; }

/* Before → after on an accept-card. Two columns so the numbers line up; the
   old value is struck through rather than removed, because "what changes" is
   the question a client actually has. */
.coach-screen .kv {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  font-variant-numeric: tabular-nums; margin: 8px 0;
}
.coach-screen .kv > :nth-child(odd) { color: var(--dim); }
.coach-screen .was { color: var(--faint); text-decoration: line-through; }

.coach-screen .row-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.coach-screen .card.accent { border-color: var(--acc-border); background: var(--acc-tint); }
.coach-screen .card.dashed { border-style: dashed; background: transparent; }

/* The thread. Deliberately the same shapes as the coach portal's, so the two
   halves of one conversation look like one conversation. */
.coach-screen .thread { display: grid; gap: 10px; margin: 10px 0; max-height: 52vh; overflow-y: auto; }
.coach-screen .msg {
  max-width: 82%; padding: 10px 13px; border-radius: var(--r-sub);
  background: var(--field); border: 1px solid var(--card-line); font-size: 14.5px;
}
.coach-screen .msg.mine { margin-left: auto; background: var(--acc-tint); border-color: var(--acc-border); }
.coach-screen .msg.system {
  margin: 0 auto; background: none; border-style: dashed;
  color: var(--dim); font-size: 13px; text-align: center;
}
.coach-screen .msg .meta { font-size: 11px; color: var(--faint); margin-top: 5px; }
.coach-screen .msg audio { width: 100%; margin-top: 6px; }
.coach-screen .msg video { max-width: 100%; margin-top: 6px; border-radius: var(--r-val); }


/* Photos in the thread. Capped so a portrait phone shot does not become a
   scroll of its own, and tappable through to the full image. */
.coach-screen .msg img { max-width: 100%; max-height: 320px; border-radius: var(--r-val); margin-top: 6px; display: block; }

.coach-screen .composer { display: flex; gap: 8px; align-items: flex-end; }
.coach-screen .composer textarea {
  flex: 1; background: var(--field); border: 1px solid var(--chip-line); color: var(--ink);
  border-radius: var(--r-val); padding: 11px 12px; font: inherit; resize: vertical;
  min-height: var(--tap-min);
}
.coach-screen .composer textarea:focus { outline: none; border-color: var(--acc-border); }
.coach-screen input[type="text"], .coach-screen #coach-code {
  width: 100%; background: var(--field); border: 1px solid var(--chip-line); color: var(--ink);
  border-radius: var(--r-val); padding: 12px; font: inherit; min-height: var(--tap-min);
  margin-bottom: 10px;
}

/* ── the client's own plan (idea 3) ──────────────────────────────────────
   Scoped under .coach-screen like the rest of the coaching UI, so none of
   these names can collide with the app's own vocabulary — the lesson from
   .chip, which meant a 44px tap target here and a hairline pill there. */
.coach-screen .plan-line { list-style: none; margin: 14px 0 0; padding: 0 0 0 22px; position: relative; }
.coach-screen .plan-line::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--card-line);
}
.coach-screen .plan-phase { position: relative; padding: 0 0 16px; }
.coach-screen .plan-phase:last-child { padding-bottom: 0; }
.coach-screen .plan-dot {
  position: absolute; left: -22px; top: 4px; width: 12px; height: 12px;
  border-radius: 999px; background: var(--bg); border: 2px solid var(--ghost);
}
.coach-screen .plan-phase.is-active .plan-dot { border-color: var(--acc); background: var(--acc); }
.coach-screen .plan-phase.is-done .plan-dot,
.coach-screen .plan-phase.is-skipped .plan-dot { border-color: var(--good); background: var(--good); }
.coach-screen .plan-phase.is-done, .coach-screen .plan-phase.is-skipped { opacity: 0.68; }
.coach-screen .plan-phase .name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coach-screen .plan-phase .sub { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin-top: 2px; }

/* ── sign in ─────────────────────────────────────────────────────────────
   A full-screen overlay, not a route. Every screen in this app needs data, so
   there is nothing to show behind it. */
.login-screen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: grid; place-items: center;
  padding: 24px calc(18px + env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
}
.login-card { width: min(400px, 100%); display: grid; gap: 12px; }
.login-mark {
  width: 46px; height: 46px; border-radius: 999px; background: var(--acc);
  color: var(--bg); display: grid; place-items: center;
  font-size: 22px; font-weight: 700; margin-bottom: 4px;
}
.login-screen .field { display: grid; gap: 6px; font-size: 13px; color: var(--dim); }
.login-screen .field input {
  background: var(--field); border: 1px solid var(--chip-line); color: var(--ink);
  border-radius: var(--r-val); padding: 13px; font: inherit;
  /* 16px stops iOS zooming the page when the field takes focus — below that
     Safari treats it as unreadable and scales, which shifts the whole layout. */
  font-size: 16px; min-height: var(--tap-min);
}
.login-screen .field input:focus { outline: none; border-color: var(--acc-border); }
.login-err { color: var(--bad); font-size: 13px; line-height: 1.5; }