/* ============================================================================
   IRON FORGED - client PWA (Phase 3): Today, workout player, progress.
   Player mechanics mirror Ethan's PersonalOS workout app.
   ============================================================================ */

/* ---------- Today ---------- */
.today-date { font-size: var(--t-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-1); }

.daynext { padding: var(--s-6) var(--s-5); text-align: center; }
/* engraved gold day header on the hammered hero plate (reference client-today) */
.daynext__label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-display); font-size: var(--t-lg); margin-bottom: var(--s-1);
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.65)) drop-shadow(0 0 18px rgba(217,164,65,0.22)); }
.daynext__meta { font-size: var(--t-sm); color: var(--text-muted); margin-bottom: var(--s-5); }
.daynext__list { text-align: left; margin: 0 auto var(--s-5); max-width: 340px; }
.daynext__row { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.daynext__row:last-child { border-bottom: 0; }
.daynext__row .rx { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.startbtn { width: 100%; max-width: 340px; height: 64px; font-size: var(--t-md); letter-spacing: 0.1em; }

/* steel plate chips, gold plate when selected (reference date strip / day picker) */
.daypick { display: flex; gap: var(--s-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-4) 0 var(--s-2); }
.daypick button { flex: none; padding: 9px 16px; border-radius: var(--r-pill);
  background-image: var(--plate-sheen), var(--steel-lines), linear-gradient(180deg, #23232C, #17171E);
  border: 1px solid var(--line-strong); color: var(--text-secondary);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em;
  box-shadow: var(--inset-top), 0 2px 6px rgba(0,0,0,0.35); }
.daypick button.sel { color: var(--ember-ink); border-color: var(--gold-edge);
  background-image: none; background: var(--gold-metal);
  box-shadow: var(--gold-bevel), 0 0 20px -6px var(--ember-glow);
  text-shadow: 0 1px 0 rgba(255,246,214,0.4); }

.resume-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5); cursor: pointer;
  border: 1px solid rgba(217,164,65,0.4); box-shadow: 0 0 30px -12px var(--ember-glow); }
.resume-card b { color: var(--ember); }

/* weigh-in quick add */
.weighrow { display: flex; gap: var(--s-2); align-items: stretch; }
.weighrow .input { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Player ---------- */
.wk-top { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: var(--s-3);
  padding: calc(var(--s-3) + var(--safe-t)) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, rgba(11,11,15,0.96), rgba(11,11,15,0.8));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft); }
.wk-timer { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.wk-discard { color: var(--danger); border-color: rgba(195,106,80,0.38); }
.wk-discard:hover { border-color: rgba(195,106,80,0.6); }
/* player stats: one instrument plate (statplate markup lives in vPlayer now) */
.wk-statwrap { padding: var(--s-4) var(--s-4) 0; max-width: 560px; margin: 0 auto; }

.wk-body { padding: var(--s-4) var(--s-4) 140px; max-width: 560px; margin: 0 auto; }

.excard { margin-top: var(--s-4); padding: var(--s-4); }
.excard__head { display: flex; align-items: center; gap: var(--s-2); }
/* engraved cream exercise name (reference workout-logging "BARBELL BENCH PRESS") */
.excard__name { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.08em;
  color: #EDEAE1; text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.05); }
.excard__video { flex: none; color: var(--ember); border-color: rgba(217,164,65,0.4);
  box-shadow: var(--inset-top), 0 0 14px -6px var(--ember-glow); }
.excard__note { font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.4; padding: 2px 0 0; }

.set-table { margin-top: var(--s-3); }
.set-row { display: grid; grid-template-columns: 34px 1fr 1fr 52px; gap: var(--s-2); align-items: center; padding: 4px 0; }
/* 7 Aug (Jono's Loom): these micro-labels were too faint to read at a glance
   mid-session - scoped override, not a global token change (--text-faint/
   --text-muted are shared across the whole app). */
.set-row.header span { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
.set-row .col-set { text-align: center; color: var(--text-secondary); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
/* prescribed RIR column (coach-set, read-only): between REPS and the tick */
.set-row.has-rir { grid-template-columns: 34px 1fr 1fr 40px 52px; }
.set-row .col-rir { text-align: center; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; }
.set-row .rirval { color: var(--text-secondary); font-size: var(--t-sm); }
.set-row input { width: 100%; height: 44px; text-align: center; font-variant-numeric: tabular-nums;
  background: var(--steel-400); border: 1px solid var(--line); border-radius: var(--r-xs);
  color: var(--text-primary); font-size: 16px; font-weight: 600; }
/* done = golden wash across the whole row bar; text stays normal ink (Ethan's call) */
.set-row { position: relative; padding-left: 6px; padding-right: 6px; margin: 0 -6px; border-radius: var(--r-xs); }
.set-row.done { background: linear-gradient(90deg, rgba(217,164,65,0.22), rgba(217,164,65,0.06));
  box-shadow: inset 0 0 0 1px rgba(217,164,65,0.28); }
.set-row.done input { color: var(--text-primary); border-color: rgba(217,164,65,0.3); background: transparent; }
.tickbtn { height: 44px; border-radius: var(--r-xs); display: grid; place-items: center;
  background: var(--steel-400); border: 1px solid var(--line); color: var(--text-faint);
  font-size: 18px; transition: all var(--dur-fast) var(--ease); }
.tickbtn.done { background: var(--gold-metal); border: 1px solid var(--gold-edge); color: var(--ember-ink);
  box-shadow: var(--gold-bevel), 0 0 18px -4px var(--ember-glow); }
.tickbtn:active { transform: scale(0.94); }
.set-row .pr-flag { position: absolute; }
.prbadge { display: inline-block; margin-left: 6px; font-size: 0.7rem; }

/* rest timer pill */
.restpill { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + var(--safe-b)); z-index: 60;
  display: flex; align-items: center; gap: var(--s-3); padding: 12px 22px;
  border-radius: var(--r-pill); background: var(--steel-300); border: 1px solid var(--ember-deep);
  box-shadow: var(--shadow-lg), 0 0 40px -10px var(--ember-glow); cursor: pointer;
  animation: rise var(--dur) var(--ease-out); }
.restpill b { font-variant-numeric: tabular-nums; font-size: var(--t-lg); color: var(--ember); }
.restpill span { font-size: var(--t-xs); color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.restpill.flash { animation: restflash 600ms var(--ease) 3; }
@keyframes restflash { 50% { background: var(--ember-deep); } }

/* finish + celebration */
.wk-finishbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: var(--s-3) var(--s-4) calc(var(--s-3) + var(--safe-b));
  background: linear-gradient(0deg, rgba(11,11,15,0.98), rgba(11,11,15,0.85));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft); display: flex; gap: var(--s-3); }
.wk-finishbar .btn { flex: 1; }

.celebrate { min-height: calc(100dvh - 190px); display: grid; place-items: center; padding: var(--s-6) var(--s-5); text-align: center; }
.celebrate__inner { max-width: 380px; }
.celebrate h1 { font-size: var(--t-2xl); margin: var(--s-4) 0 var(--s-2); }
.celebrate .crest { width: 110px; height: 110px; margin-bottom: var(--s-2); }
.prline { color: var(--ember); font-weight: 700; margin-top: var(--s-2); }
/* finish-screen form-clip nudge (Jono's ask) */
.celebform { margin-top: var(--s-5); padding: var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--steel-100); display: flex; flex-direction: column;
  gap: var(--s-3); align-items: center; }
.celebform__ask { font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.4; }
.celebform__done { font-size: var(--t-sm); color: var(--ember); font-weight: 600; }

/* PR toast moment */
.prtoast { position: fixed; top: 18%; left: 50%; transform: translate(-50%, 0) scale(0.9);
  z-index: 70; padding: var(--s-4) var(--s-6); border-radius: var(--r-md); text-align: center;
  background: var(--ember-fill); color: var(--ember-ink); font-weight: 800;
  box-shadow: 0 0 80px var(--ember-glow), var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: all 300ms var(--ease-out); }
.prtoast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.prtoast .big { font-size: var(--t-lg); display: block; }

.restpill__skip { padding: 7px 14px; border-radius: var(--r-pill); background: var(--steel-400);
  border: 1px solid var(--line-strong); color: var(--text-secondary); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- keypad (mirrors the PersonalOS workout keypad, forged skin) ---------- */
.kpad-scrim { position: fixed; inset: 0; z-index: 88; background: rgba(8,8,11,0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.kpad-scrim.open { opacity: 1; pointer-events: auto; }
.kpad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 89;
  background: var(--steel-200); border-top: 1px solid var(--line-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg);
  padding: var(--s-3) var(--s-4) calc(var(--s-4) + var(--safe-b));
  transform: translateY(105%); transition: transform 260ms var(--ease-out); }
.kpad.open { transform: translateY(0); }
@media (min-width: 861px) { .kpad { left: 50%; right: auto; transform: translate(-50%, 105%); width: 420px; }
  .kpad.open { transform: translate(-50%, 0); } }
.kpad__head { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-1) var(--s-3); }
.kpad__label { flex: 1; font-size: var(--t-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-muted); font-weight: 600; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpad__val { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ember); }
.kpad__chips { display: flex; gap: var(--s-2); padding-bottom: var(--s-3); }
.kpad__chips button { flex: 1; height: 38px; border-radius: var(--r-xs); background: var(--steel-300);
  border: 1px solid var(--line); color: var(--text-secondary); font-weight: 700;
  font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.kpad__chips button:active { background: var(--steel-400); color: var(--ember); }
.kpad__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.kp-btn { height: 52px; border-radius: var(--r-sm); background: var(--steel-300);
  border: 1px solid var(--line); color: var(--text-primary); font-size: var(--t-md);
  font-weight: 700; font-variant-numeric: tabular-nums; transition: background var(--dur-fast) var(--ease); }
.kp-btn:active { background: var(--steel-400); }
.kp-btn.action { color: var(--ember); font-size: var(--t-sm); }
.kp-btn.done { background: var(--ember-fill); border-color: transparent; color: var(--ember-ink);
  letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-sm); }
input.kpad-focus { border-color: var(--ember) !important; box-shadow: 0 0 0 2px var(--ember-glow-soft); }

/* ---------- voice note (debrief mic, OS pattern) ----------
   The WRAPPER is the visible text box; the textarea + mic live inside it, so the
   mic is structurally inside the box regardless of load order. */
.notewrap { position: relative; background: var(--steel-400); border: 1px solid var(--line);
  border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.notewrap:focus-within { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-glow-soft); }
.notewrap textarea { display: block; width: 100%; height: 112px; padding: var(--s-3);
  padding-right: 54px; background: transparent; border: 0; outline: none;
  color: var(--text-primary); font-size: 16px; line-height: 1.45; resize: none;
  border-radius: var(--r-sm); font-family: inherit; }
.notewrap textarea::placeholder { color: var(--text-faint); }
.micbtn { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--steel-300); border: 1px solid var(--line); color: var(--text-secondary); }
.micbtn svg { width: 18px; height: 18px; }
.micbtn.rec { background: var(--ember-fill); border-color: transparent; color: var(--ember-ink);
  animation: micpulse 1.4s var(--ease) infinite; }
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--ember-glow); }
  50%      { box-shadow: 0 0 0 9px rgba(217,164,65,0); }
}
.micstatus { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--text-muted); min-height: 1.1em; }

/* ---------- Progress ---------- */
.sesscard { margin-bottom: var(--s-4); }
.offline-note { font-size: var(--t-xs); color: var(--warn); }

/* MAINT-3: quiet "waiting to sync" line on Today, fed from if_sync_queue */
.syncnote { margin-bottom: var(--s-4); padding: 8px 14px; border-radius: var(--r-md);
  background: var(--steel-100); border: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--warn); }

/* P0-8: privacy notice overlay (first-login consent gate + Settings > Privacy) */
.privov { position: fixed; inset: 0; z-index: 130; overflow-y: auto;
  background: rgba(6, 6, 10, 0.86); backdrop-filter: blur(6px);
  padding: max(var(--s-5), var(--safe-t)) var(--s-4) var(--s-6);
  display: grid; justify-items: center; align-items: start; }
.privov__card { width: 100%; max-width: 560px; padding: var(--s-6) var(--s-5); }
.privbody h3 { font-size: var(--t-sm); color: var(--ember); text-transform: uppercase;
  letter-spacing: 0.06em; margin: var(--s-4) 0 var(--s-1); }
.privbody p { font-size: var(--t-sm); color: var(--text-secondary); line-height: 1.55; }
.privbody .privlead { color: var(--text-primary); font-size: var(--t-base); }
.privbody { margin-bottom: var(--s-5); }
.privfoot { font-size: var(--t-xs); text-align: center; margin-top: var(--s-3); }

/* jono_33: first-run onboarding (rides the .privov overlay) */
.onbopt { text-transform: none; letter-spacing: 0; color: var(--text-faint); font-weight: 500; }
.onbnum { position: relative; }
.onbnum .input { width: 100%; padding-right: 46px; }
.onbunit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--text-muted); pointer-events: none; }
.onbftin { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.onbftin__cell { position: relative; }
.onbftin__cell .input { width: 100%; padding-right: 38px; }
.onbdob { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--s-2); }
.onbdob .input { width: 100%; padding: var(--s-3) var(--s-2); }

/* jono_33: install screen */
.installsteps { background: var(--steel-100); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-5); }
.installsteps p { font-size: var(--t-base); color: var(--text-primary); line-height: 1.6; margin: 0; }
.installsteps b { color: var(--ember); }
.shareglyph { width: 1.05em; height: 1.05em; vertical-align: -0.18em; color: var(--ember);
  display: inline-block; margin: 0 2px; }
.installrow { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-3) auto 0;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  color: var(--text-secondary); font: inherit; font-size: var(--t-sm); font-weight: 600;
  padding: 8px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.installrow .shareglyph { width: 1em; height: 1em; }

/* sync banner */
.syncbar { position: fixed; top: calc(var(--safe-t)); left: 50%; transform: translateX(-50%);
  z-index: 65; margin-top: 8px; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--steel-300); border: 1px solid var(--line-strong); font-size: var(--t-xs);
  color: var(--text-secondary); box-shadow: var(--shadow-md); }

/* ============================ Phase 4 - tracking ============================ */

/* photos: one-button upload card (take OR upload - the phone offers both natively) */
.phadd { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3); }


/* ============================ nutrition (Phase 4c) ============================
   The OS food tracker's face in Iron Forged skin: kcal ring, macro bars, slots. */
.foodhero { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); margin-bottom: var(--s-4); }
.ring { position: relative; width: 128px; height: 128px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: #34343F; stroke-width: 9; }
.ring__fill { fill: none; stroke: var(--ember); stroke-width: 9; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(217,164,65,0.45)); transition: stroke-dashoffset 500ms var(--ease-out); }
.ring__fill.over { stroke: var(--warn); }
.ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__num { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ring__lab { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.foodhero__side { min-width: 0; }
.foodhero__eaten { font-size: var(--t-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.foodhero__eaten span { font-size: var(--t-xs); font-weight: 500; color: var(--text-muted); }
.foodhero__goal { font-size: var(--t-sm); color: var(--text-muted); margin-top: 4px; }
.foodhero__goal b { color: var(--ember); }

.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-5); }
.macro { background: var(--steel-100); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: var(--s-3); }
.macro__lab { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.macro__num { font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--t-md); margin: 3px 0 6px; }
.macro__num small { font-size: 0.65em; color: var(--text-faint); font-weight: 600; }
.macro__bar { height: 5px; border-radius: 3px; background: var(--steel-400); overflow: hidden; }
.macro__bar i { display: block; height: 100%; border-radius: 3px; background: var(--ember-fill); transition: width 400ms var(--ease-out); }
.macro__left { font-size: 0.6rem; color: var(--text-faint); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* meal slots (structured plan + diary rows) */
.mslot { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); }
.mslot__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.mslot__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-display); font-size: var(--t-sm); }
.mrow { display: flex; align-items: center; gap: var(--s-2); padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.mrow__food { flex: 1; min-width: 0; }
.mrow__del { background: none; border: 0; color: var(--text-faint); font-size: 1.1rem;
  padding: 2px 6px; line-height: 1; }
.mslot__kcal { font-size: var(--t-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.planrow { display: flex; align-items: center; gap: var(--s-3); padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.planrow__main { flex: 1; min-width: 0; }
.planrow__name { font-size: var(--t-sm); }
.planrow__sub { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.planrow { cursor: pointer; }
.planrow:active { background: var(--steel-100); }
.planrow__logged { flex: none; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-ink);
  background: var(--gold-metal); border: 1px solid var(--gold-edge);
  padding: 5px 10px; border-radius: var(--r-pill);
  box-shadow: var(--gold-bevel), 0 3px 14px -6px var(--ember-glow); }
.planrow__hint { flex: none; font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.planrow.done { background: linear-gradient(90deg, rgba(217,164,65,0.10), transparent); border-radius: var(--r-xs); margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.mrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mrow__sub { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mrow__kcal { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.mealadd2 { width: 100%; background: none; border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 11px; color: var(--text-secondary); font-size: var(--t-sm); font-weight: 600; margin-top: var(--s-3);
  display: flex; align-items: center; justify-content: center; gap: 6px; }
.mealadd2:active { border-color: var(--ember); color: var(--ember); }
.mealadd2 span { color: var(--ember); font-weight: 800; }
.mealadd2:disabled { opacity: 0.55; }

/* add-food overlay */
.foodov { position: fixed; inset: 0; z-index: 86; background: var(--iron-050); display: flex; flex-direction: column;
  animation: rise var(--dur) var(--ease-out); }
.foodov__head { display: flex; align-items: center; gap: var(--s-3);
  padding: calc(var(--s-3) + var(--safe-t)) var(--s-4) var(--s-3); border-bottom: 1px solid var(--line-soft); }
.foodov__head .iconbtn { font-size: 22px; }
.foodov__title { flex: 1; font-weight: 800; font-size: var(--t-md); }
.foodov__body { flex: 1; overflow-y: auto; overflow-x: clip; -webkit-overflow-scrolling: touch;
  padding: var(--s-4) var(--s-4) calc(var(--s-8) + var(--safe-b)); }
/* 2x2 per-100g grid (manual/label form): .input has no width of its own, so number
   inputs render at intrinsic width and escape 1fr tracks on phones (Ethan, 1 Aug). */
.macrogrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
.macrogrid .field { margin-bottom: var(--s-2); }
.qtycard .input { width: 100%; min-width: 0; }
.fovrow { display: flex; gap: var(--s-2); align-items: center; }
.fovrow .input { flex: 1; min-width: 0; }
.frow { display: flex; align-items: center; gap: var(--s-3); padding: 12px 2px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.frow:active { background: var(--steel-100); }
.frow__main { flex: 1; min-width: 0; }
.frow__name { font-size: var(--t-sm); }
.frow__sub { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }
.frow__add { color: var(--ember); font-size: 20px; font-weight: 800; flex: none; }
.scanwrap { position: relative; border-radius: var(--r-md); overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 56dvh; }
.scanwrap video { width: 100%; height: 100%; object-fit: cover; }
.scanframe { position: absolute; left: 12%; right: 12%; top: 32%; height: 26%;
  border: 2px solid var(--ember); border-radius: var(--r-sm); box-shadow: 0 0 0 999px rgba(0,0,0,0.35); }
.scanmiss { text-align: center; padding: var(--s-7) var(--s-4); }
.qtycard { padding: var(--s-5); }
.qtycard__name { font-weight: 800; font-size: var(--t-md); }
.qtycard__brand { font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }
.qtychips { display: flex; gap: var(--s-2); margin: var(--s-2) 0 var(--s-4); }
.qtychips button { flex: 1; height: 38px; border-radius: var(--r-pill); background: var(--steel-100);
  border: 1px solid var(--line); color: var(--text-secondary); font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.qtychips button:active { color: var(--ember); border-color: var(--ember-deep); }
.qtyprev { display: flex; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-3); border-radius: var(--r-sm);
  background: var(--steel-100); border: 1px solid var(--line-soft); font-size: var(--t-sm);
  color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.qtyprev b { color: var(--text-primary); }
.qtyprev .cal b { color: var(--ember); }

/* OS-look pass on the add-food overlay (Ethan 19 Jul: match PersonalOS, IF skin) */
.fovicon { width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--steel-100); border: 1px solid var(--line);
  color: var(--ember); }
.fovicon:active { background: var(--steel-300); }
.fovtabs { display: flex; gap: var(--s-5); margin: var(--s-4) 0 var(--s-2);
  border-bottom: 1px solid var(--line-soft); }
.fovtabs button { background: none; border: 0; padding: 0 2px 10px; font-size: var(--t-sm);
  font-weight: 700; color: var(--text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; letter-spacing: 0.02em; }
.fovtabs button.active { color: var(--ember); border-bottom-color: var(--ember); }
.mslot__name { font-size: var(--t-md); }
.mrow__kcal { font-weight: 600; color: var(--text-secondary); font-size: var(--t-sm); }

/* ============================ Phase 5 - readout layer ============================
   Every numeral that matters wears the mono readout face (Chivo Mono): timers,
   set numbers, kg/reps, rings, macro counts. Labels above them wear the mono
   micro-label. This is what separates instrumentation from body copy. */
.wk-timer, .wk-stat b, .set-row input, .set-row .col-set, .kpad__val, .kp-btn,
.ring__num, .foodhero__eaten, .macro__num, .macro__left, .mrow__kcal, .qtyprev,
.daynext__row .rx, .restpill b, .mslot__kcal, .planrow__sub,
.mrow__sub, .kpad__chips button, .qtychips button, .sess__date, .frow__sub {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.today-date, .wk-stat span, .set-row.header span, .macro__lab, .ring__lab,
.daynext__meta, .offline-note {
  font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.daynext__meta { font-size: 0.62rem; }

/* the set number cell reserves badge space - the 🏆 lands without moving a digit */
.set-row .col-set { position: relative; }
.prbadge { position: absolute; top: -7px; right: -3px; margin: 0; font-size: 0.68rem;
  animation: prpop 500ms var(--ease-out); }
@keyframes prpop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.25) rotate(8deg); } }

/* sheets ride the one sheet curve */
.kpad { transition: transform 340ms var(--ease-sheet); }
.foodov { animation: none; transform: translateY(24px); opacity: 0;
  transition: transform 340ms var(--ease-sheet), opacity 240ms var(--ease); }
.foodov.open { transform: none; opacity: 1; }

/* the ledger: session cards (these styles previously only existed on the coach side) */
.sess__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); flex-wrap: wrap; }
.sess__date { font-weight: 700; }
.sess__day { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ember); padding: 3px 9px;
  border: 1px solid rgba(217,164,65,0.3); border-radius: var(--r-pill); }
/* prescribed-RIR label riding on a logged exercise line, quiet mono */
.exrir { font-style: normal; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; color: var(--text-faint); white-space: nowrap; }
.setline { display: flex; gap: var(--s-3); font-size: var(--t-sm); padding: 6px 0;
  border-bottom: 1px solid var(--line-soft); }
.sesscard .setline:last-child { border-bottom: 0; }
.setline .ex { flex: 1; min-width: 0; }
.setline .nums { color: var(--text-secondary); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; text-align: right; letter-spacing: -0.01em; }
.stat--fit { font-size: clamp(1.7rem, 6.5vw, 2.6rem); }   /* six-digit numbers stay inside their card */

/* Weekly weigh-in averages on Progress (Phase 2): quiet mono rows, newest first */
.wkline { display: grid; grid-template-columns: 1fr 72px 64px; gap: var(--s-3);
  align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm); }
.wkline:last-child { border-bottom: 0; }
.wkline .wk { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; }
.wkline .avg { font-weight: 700; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; text-align: right; }
.wkline .chg { color: var(--text-secondary); font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-size: 0.68rem; text-align: right; }

/* ============================ Phase 3 - forged re-skin ============================ */

/* client page titles centre like the reference screens (NUTRITION / PROGRESS) */
#cview .pagehead { text-align: center; }

/* Ledger stat plate: 2x2 on phones so six-digit volume breathes */
.statplate--wrap { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) {
  .statplate--wrap { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
  .statplate--wrap > div:nth-child(2n + 1) { border-left: 0; box-shadow: none; }
}

/* weigh-in quick add: gold circular + (reference client-today card) */
.weighbtn { width: 52px; height: 52px; padding: 0; border-radius: 50%; flex: none;
  font-size: 24px; font-weight: 800; line-height: 1; }

/* keypad: steel keys on a plated sheet, gold commit (reference weigh-keypad) */
.kpad { background-image: var(--plate-sheen), var(--texture-forge), var(--steel-lines), var(--plate-fill);
  background-blend-mode: normal, overlay, normal, normal;
  background-size: auto, 420px 420px, auto, auto;
  border-top: 1px solid rgba(217,164,65,0.28); }
.kp-btn { background-image: var(--plate-sheen), linear-gradient(180deg, #2B2B36, #1E1E26);
  border: 1px solid var(--line-strong); color: #EDEAE1;
  box-shadow: var(--inset-top), 0 2px 5px rgba(0,0,0,0.4), 0 3px 10px -6px rgba(217,122,42,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.kp-btn:active { background-image: var(--plate-sheen), linear-gradient(180deg, #24242E, #191920);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), 0 0 14px -4px var(--ember-glow); }
.kp-btn.done { background-image: none; background: var(--gold-metal);
  border-color: var(--gold-edge); color: var(--ember-ink);
  box-shadow: var(--gold-bevel), 0 0 20px -6px var(--ember-glow); text-shadow: 0 1px 0 rgba(255,246,214,0.4); }
.kpad__val { color: var(--ember-hot); text-shadow: 0 0 18px rgba(217,164,65,0.45); font-size: var(--t-xl); }

/* nutrition: glowing ring + gold bars with a lit terminator dot */
.ring__fill { stroke: var(--ember-hot); filter: drop-shadow(0 0 8px rgba(217,164,65,0.55)); }
.macro__bar { overflow: visible; }
.macro__bar i { position: relative; background: var(--gold-metal); }
.macro__bar i::after { content: ""; position: absolute; right: -2px; top: 50%;
  transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember-bright); box-shadow: 0 0 8px var(--ember-glow); }
.mslot__name, .mpslot__name {
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.mrow__kcal { color: var(--ember-hot); }
.frow__add { text-shadow: 0 0 12px rgba(217,164,65,0.5); }

/* food overlay: glowing gold icon squares + engraved serif tabs (reference) */
.fovicon { color: var(--ember); border-color: rgba(217,164,65,0.35);
  background-image: var(--plate-sheen), linear-gradient(180deg, #23232C, #17171E);
  box-shadow: var(--inset-top), 0 0 18px -8px var(--ember-glow); }
.fovtabs button { font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; }
.fovtabs button.active { border-image: var(--gold-metal) 1;
  text-shadow: 0 0 12px rgba(217,164,65,0.35); }

/* celebration plate spacing (statplate markup lives in vCelebrate now) */
.celebrate__stats { margin: var(--s-6) 0; }
.celebrate h1 { line-height: 1.15; }

/* rest pill: plated with a gold rim */
.restpill { background-image: var(--plate-sheen), var(--steel-lines), var(--plate-fill);
  border: 1px solid rgba(217,164,65,0.45); }

/* ---- Wide screens (laptop/desktop): the client app is a phone product, so
   present it as a centred phone-width column instead of stretching cards to
   1180px. Tab bar and food overlay become a matching centred dock. ---- */
@media (min-width: 700px) {
  #cview { max-width: 520px; }
  .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 520px;
    border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
    border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .foodov { left: 50%; right: auto; width: 560px; margin-left: -280px;
    border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
}

/* ============================ Phase 4 - rest days ============================ */
.daynext--rest .daynext__label { color: var(--text-secondary); }
.restday__body { font-size: var(--t-sm); color: var(--text-muted); max-width: 320px;
  margin: 0 auto var(--s-5); line-height: 1.5; }

/* ============================ Phase 6.5 - settings ============================ */
.backlink { background: none; border: 0; color: var(--ember); font: inherit; font-weight: 700;
  font-size: 1rem; padding: 4px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.setlab { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 var(--s-2) var(--s-2); }
.setgroup { background: var(--steel-100); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; margin-bottom: var(--s-5); }
.setrow { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 52px;
  border-bottom: 1px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.setrow:last-child { border-bottom: 0; }
.setrow--static { cursor: default; }
.setrow.dim { opacity: 0.45; pointer-events: none; }
.setname { flex: 1; min-width: 0; font-weight: 600; }
.setval { color: var(--text-muted); font-size: 0.92rem; white-space: nowrap; }
.setrow--danger .setname { color: var(--danger); flex: 1; }
.seticon { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center;
  background: var(--steel-300); color: var(--text-secondary); flex: none; }
.seticon svg { width: 17px; height: 17px; }
.seticon--ember { background: var(--ember); color: var(--ember-ink); }
.seticon--grey { background: var(--steel-400); color: var(--text-secondary); }
.seticon--danger { background: var(--danger-dim); color: var(--danger); }
.swt { width: 46px; height: 28px; border-radius: 14px; background: var(--steel-400);
  border: 1px solid var(--line-strong); position: relative; flex: none; cursor: pointer;
  padding: 0; transition: background 0.18s, border-color 0.18s; -webkit-tap-highlight-color: transparent; }
.swt i { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #C9CBCF; transition: transform 0.18s; display: block; }
.swt.on { background: var(--ember); border-color: var(--ember-deep); }
.swt.on i { transform: translateX(18px); background: #FFF8E8; }
.avcoin { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid;
  place-items: center; background: var(--steel-300); border: 1px solid var(--line-strong); flex: none; }
.avcoin img { width: 100%; height: 100%; object-fit: cover; }
.avnone { color: var(--text-secondary); font-weight: 700; font-size: 0.82rem;
  font-family: var(--font-mono); letter-spacing: 0.02em; }
.avpick .avcoin.avnone { font-size: 1.05rem; }
.avcoin--big.avnone { font-size: 3rem; }
/* topbar profile button when no image is chosen: the initials monogram coin */
.topbar__crest.avmono { display: grid; place-items: center; background: var(--steel-300);
  color: var(--text-secondary); font-family: var(--font-mono); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.02em; }
/* the five looks (28 Jul): gold, iron, iron and gold, cartoon, original.
   av4 (cartoon) is its own artwork (icons/avatar-cartoon.png), no filter. */
.av1 { background: #2A1E08; } .av1 img, img.av1 { filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(-10deg) brightness(1.12); }
.av2 { background: #1C1C24; } .av2 img, img.av2 { filter: grayscale(1) brightness(0.95) contrast(1.15); }
.av3 { background: #52545C; }
.av4 { background: #141419; }
.av5 { background: #141419; }
.avrow { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.avpick { background: none; border: 0; padding: 2px; border-radius: 50%; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.avpick .avcoin { width: 44px; height: 44px; }
.avpick.sel { outline: 2px solid var(--ember); outline-offset: 2px; }
.crestbtn { background: none; border: 0; padding: 0; cursor: pointer; flex: none; display: grid;
  place-items: center; -webkit-tap-highlight-color: transparent; }
.namein { background: var(--steel-400); border: 1px solid var(--line-strong); border-radius: 8px;
  color: inherit; font: inherit; font-size: 16px; padding: 6px 10px; width: 55%; min-width: 0;
  text-align: right; }
/* avatar preview + picker confirm (28 Jul: coins were too small to judge) */
.avwrap { border-bottom: 1px solid var(--line); }
.avprev { display: grid; place-items: center; padding: 14px 0 2px; }
.avcoin--big { width: 118px; height: 118px; }
.avuse { margin: 4px 14px 14px; width: calc(100% - 28px); }
.avrow { border-bottom: 0; }
/* quiet grey footer, no box */
.setfoot { text-align: center; color: var(--text-faint); font-size: 0.78rem; margin: var(--s-2) 0 var(--s-6); }
.setfoot + .setfoot { margin-top: calc(var(--s-6) * -1 + var(--s-1)); }   /* credit hugs the version line */
.setfoot__link { color: var(--text-faint); text-decoration: underline; }
.setfoot__link:hover { color: var(--text-secondary); }
/* report-a-problem box */
.bugbox { display: grid; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bugbox textarea { background: var(--steel-400); border: 1px solid var(--line-strong); border-radius: 8px;
  color: inherit; font: inherit; font-size: 16px; padding: 10px; resize: vertical; min-height: 88px; }

/* ============ daily accountability sheet (Phase 7.5 item 3) ============ */
/* Today card: weigh-in row folded in, auto line, CTA, 7-day strip */
.dlweigh { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.dlweigh .num { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-primary); }
.dlweigh .unit { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); margin-left: 4px; }
.dlw__note { font-size: var(--t-xs); color: var(--text-muted); }
.dldelta { font-family: var(--font-mono); font-size: var(--t-xs); margin-left: auto; }
.dldelta.up { color: var(--warn); }
.dldelta.down { color: var(--ok); }
.dlauto { font-size: var(--t-sm); color: var(--text-secondary); margin: var(--s-3) 0; }
.dlcta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 12px 14px; background: var(--steel-200); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent; }
.dlcta:hover { border-color: var(--line-strong); }
.dlcta__done { color: var(--ok); font-weight: 600; font-size: var(--t-sm); }
.dlcta__meta { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); }
.dlstrip { display: flex; gap: 6px; margin-top: var(--s-4); }
.dlchip { flex: 1; display: grid; justify-items: center; gap: 5px; padding: 7px 0 8px;
  background: none; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dlchip__d { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--text-muted); text-transform: uppercase; }
.dlchip__dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text-faint); }
.dlchip.filled .dlchip__dot { background: var(--ember); border-color: var(--ember); }
.dlchip.missed .dlchip__dot { border-color: var(--text-faint); }
.dlchip.today { border-color: var(--line-strong); background: var(--steel-100); }
.dlchip.today .dlchip__d { color: var(--text-secondary); }
.dlchip.today:not(.filled) .dlchip__dot { border-color: var(--ember); }

/* form-clip slim status row (card chrome dropped, Ethan 2 Aug) */
/* Slim action rows on Today (form clips + Your plan): plated with a REAL
   button (Ethan, 4 Aug: the hairline text rows read as footnotes, not
   controls; the outline fcchip pill is gone). */
.fcline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4); }
.fcline__lab { font-size: var(--t-sm); color: var(--text-primary); font-weight: 600; }
.slimrow__sub { display: block; font-size: var(--t-xs); color: var(--text-muted); margin-top: 2px; }
.fcline .btn { flex: none; white-space: nowrap; }
.fcstate.ok { color: var(--ok); font-size: var(--t-xs); white-space: nowrap; }
/* Your plan + Calendar rows: whole row taps through; View is a styled span */
.planline, .calline { cursor: pointer; }
/* small button size (coach.css has its own copy; celebration screen uses it too) */
.btn--sm { height: 36px; padding: 0 var(--s-4); font-size: var(--t-xs); }

/* the sheet overlay: full-screen, scrolls; IFPad (z 88/89) rides above it */
.dlov { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: rgba(6, 6, 10, 0.86); backdrop-filter: blur(6px);
  padding: max(var(--s-5), var(--safe-t)) var(--s-4) var(--s-6);
  /* minmax(0,1fr) pins the column to the viewport width so the card (and the
     supplement inputs inside it) shrink to fit instead of forcing sideways
     scroll - an auto column would grow to the inputs' intrinsic width. */
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start; }
.dlov__card { position: relative; width: 100%; max-width: 560px; padding: var(--s-5) var(--s-4) 280px;
  background: var(--steel-100); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); }
.dlov__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s-3); }
.dlov__title { font-size: var(--t-lg); }
.dlov__auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  margin-bottom: var(--s-3); background: var(--steel-200); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--text-secondary); }
.dlov__auto i { color: var(--text-faint); font-style: normal; }
.dlmealhint { font-size: var(--t-xs); color: var(--ember); margin-bottom: var(--s-3); }
.dlnote { padding: 12px 14px; margin-bottom: var(--s-3); background: var(--steel-200);
  border-left: 2px solid var(--ember); border-radius: var(--r-sm); }
.dlnote p:last-child { font-size: var(--t-sm); color: var(--text-primary); line-height: 1.5; margin-top: 4px; }
.dlrow { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.dlrow__lab { display: block; font-size: var(--t-sm); color: var(--text-secondary); margin-bottom: 8px; }
.dlhint { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); font-style: normal; }
.dlten { display: flex; gap: 4px; }
.dlten__c { flex: 1; min-width: 0; padding: 8px 0; background: var(--steel-300); border: 1px solid var(--line);
  border-radius: var(--r-xs); color: var(--text-secondary); font-family: var(--font-mono);
  font-size: var(--t-xs); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dlten__c.on { background: var(--ember-fill); border-color: var(--ember-deep); color: var(--ember-ink); font-weight: 700; }
.dlyn { display: flex; gap: 6px; }
.dlyn button { flex: 1; padding: 9px 0; background: var(--steel-300); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-secondary); font: inherit; font-size: var(--t-sm);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dlyn button.on { background: var(--ember-fill); border-color: var(--ember-deep); color: var(--ember-ink); font-weight: 600; }
.dlstep { display: flex; align-items: center; gap: var(--s-3); }
.dlstep button { width: 44px; height: 44px; flex: none; background: var(--steel-300);
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-primary);
  font-size: 1.2rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; }
.dlstep__v { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 1.15rem;
  font-variant-numeric: tabular-nums; color: var(--text-primary); }
.dlstep__v i { font-style: normal; font-size: var(--t-xs); color: var(--text-muted); margin-left: 4px; }
.dlpadrow { display: flex; align-items: center; gap: var(--s-2); }
.dlpadrow .input { flex: 1; min-width: 0; text-align: center; font-variant-numeric: tabular-nums; }
.dlunit { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); flex: none; }
.dltime, .dltext { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.dltime { text-align: center; font-variant-numeric: tabular-nums; }
.dlsave { margin-top: var(--s-5); }

/* ---- Phase 7.5 round 2 (Ethan's phone review, 3 Aug) ---- */
/* stepper value is tappable for a custom amount */
.dlstep__mid { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.dlstep__in { flex: 1; min-width: 0; text-align: center; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; }
.dlstep__mid i { font-style: normal; font-size: var(--t-xs); color: var(--text-muted); flex: none; }

/* supplements list editor under the Yes toggle */
/* minmax(0,1fr) keeps the list column at the row width so the inputs shrink to
   fit the phone instead of growing to their intrinsic size (sideways scroll). */
.dlsup { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dlsup__row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.dlsup__n { flex: 1.6; min-width: 0; }
.dlsup__d { flex: 1; min-width: 0; }
.dlsup__x { width: 38px; height: 38px; flex: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.dlsup__x:hover { color: var(--danger); border-color: var(--line-strong); }
.dlsup__add { padding: 9px 0; background: none; border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm); color: var(--text-secondary); font: inherit; font-size: var(--t-xs);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dlsup__add:hover { color: var(--ember); border-color: rgba(217,164,65,0.45); }

/* "Jono left a note" line on the sheet card + gold ring on noted chips */
.dlnoteline { display: block; width: 100%; margin-top: var(--s-3); padding: 9px 12px;
  background: none; border: 1px solid rgba(217,164,65,0.35); border-radius: var(--r-md);
  color: var(--ember); font: inherit; font-size: var(--t-xs); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.dlnoteline:hover { border-color: rgba(217,164,65,0.6); }
.dlchip.noted .dlchip__dot { box-shadow: 0 0 0 2px var(--ember-glow-soft); }

/* IFTime: the Iron Forged time wheel (kpad skin, scroll-snap columns) */
.iftime { position: fixed; left: 0; right: 0; bottom: 0; z-index: 89;
  background: var(--steel-200); border-top: 1px solid var(--line-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg);
  padding: var(--s-3) var(--s-4) max(var(--s-4), var(--safe-b, 0px));
  transform: translateY(105%); transition: transform var(--dur) var(--ease-sheet); }
.iftime.open { transform: translateY(0); }
@media (min-width: 861px) { .iftime { left: 50%; right: auto; transform: translate(-50%, 105%); width: 420px; }
  .iftime.open { transform: translate(-50%, 0); } }
.iftime__wheels { position: relative; display: flex; align-items: stretch; justify-content: center;
  gap: 4px; height: 200px; margin: var(--s-3) 0; }
.iftime__col { width: 86px; overflow-y: auto; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; z-index: 1; }
.iftime__col::-webkit-scrollbar { display: none; }
.iftime__pad { height: 80px; }
.iftime__opt { display: block; width: 100%; height: 40px; scroll-snap-align: center;
  background: none; border: 0; color: var(--text-muted); font-family: var(--font-mono);
  font-size: 1.15rem; font-variant-numeric: tabular-nums; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color var(--dur-fast) var(--ease); }
.iftime__opt.on { color: var(--ember-bright); font-weight: 700; }
.iftime__colon { align-self: center; color: var(--text-faint); font-family: var(--font-mono);
  font-size: 1.15rem; position: relative; z-index: 1; }
.iftime__band { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 220px; height: 40px; border-top: 1px solid rgba(217,164,65,0.5);
  border-bottom: 1px solid rgba(217,164,65,0.5); border-radius: var(--r-xs);
  background: var(--ember-glow-soft); pointer-events: none; }
.iftime__foot { display: flex; gap: var(--s-3); }
.iftime__foot .btn { flex: 1; }

/* ============ Photo poses (jono_27): weekly folders + pose grid ============ */
.phweeks { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.phweek { display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4); background: var(--steel-200); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text-primary); }
.phweek:active { background: var(--steel-300); }
.phweek__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--steel-300); font-size: 1.1rem; flex: none; }
.phweek__ico--done { background: var(--ember-glow-soft); color: var(--ember); }
.phweek__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.phweek__main b { font-size: var(--t-base); }
.phweek__sub { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-secondary); }
.phweek__chev { color: var(--text-muted); font-size: var(--t-lg); }

.phdrill { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; }
.phdrill .loglink { background: none; border: none; color: var(--ember); font-size: var(--t-sm); padding: 0; cursor: pointer; }
.phdrill__title { font-size: var(--t-md); margin: 0; }

.phposegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
.phslot { display: flex; flex-direction: column; gap: var(--s-2); }
.phslot__img, .phslot__ph { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; }
.phslot__img { border: 1px solid var(--line); }
.phslot__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phslot__ph { position: relative; display: grid; place-items: center; color: var(--text-muted);
  background: var(--steel-200); border: 1.5px dashed var(--line-strong); cursor: pointer; }
.phslot__ph:active { background: var(--steel-300); }
/* the pose reference (the armoured model showing the pose) fills the slot; a pill invites the upload */
.phslot__ref { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.phslot__plus { position: relative; z-index: 1; background: rgba(0,0,0,0.6); color: var(--text-primary);
  font-family: var(--font-mono); font-size: var(--t-xs); padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15); }
.phslot__label { font-size: var(--t-xs); color: var(--text-secondary); text-align: center; }
.phslot--done .phslot__label { color: var(--text-primary); }

/* in-app Calendly overlay (jono_29): full-screen frame so booking never leaves the app */
.calov { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: var(--iron-050); animation: calovin 0.22s var(--ease-sheet, ease); }
@keyframes calovin { from { opacity: 0; } to { opacity: 1; } }
.calov__bar { flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: calc(var(--safe-t) + var(--s-3)) var(--s-4) var(--s-3);
  background: var(--steel-100); border-bottom: 1px solid var(--line-soft); }
.calov__title { font-family: var(--font-display, inherit); font-size: var(--t-md, 1rem);
  letter-spacing: 0.02em; color: var(--text-primary); }
.calov__x { flex: none; width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  background: var(--steel-200); border: 1px solid var(--line); color: var(--text-primary);
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.calov__frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--iron-050); }
.calov__ext { flex: none; text-align: center; padding: var(--s-3) var(--s-4)
  calc(var(--safe-b) + var(--s-3)); font-size: var(--t-xs); color: var(--text-secondary);
  background: var(--steel-100); border-top: 1px solid var(--line-soft);
  text-decoration: underline; text-underline-offset: 3px; }