/* Ironlog · cold-luxury system (Bugatti-inspired, inspiration only).
   Layout: one phone column (wider grid for the coach on desktop); fixed rest band + tab bar at the bottom.
   Rules: zero radius on every container, input and badge, pill radius only on what a finger presses; hairlines,
   shadows only under layers that float over content; expanded thin uppercase display, Archivo body, JetBrains Mono for labels, buttons and units;
   colour only where it means something (ice-blue selection, state colours, IWF plate colours). */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

/* dark is home: bare :root carries the dark palette */
:root {
  --bg: #0a0a0b; --surface: #111113; --surface-2: #19191c; --line: #26262b; --line-strong: #66666f;
  --ink: #f4f4f5; --body: #cacace; --muted: #9b9ba3; --faint: #6f6f78;
  --accent: #c3d9f3; --accent-ink: #0a0a0b;
  --good: #7fcf86; --warn: #e6b94a;
  --bad: #ff7a6e; --bad-soft: rgba(255, 122, 110, .12);
  --on-ink: #0a0a0b; --shadow: rgba(0, 0, 0, .55);
  --plate-red: #d3302a; --plate-blue: #2358d8; --plate-yellow: #e6b41e; --plate-green: #2c8a47; --plate-white: #e9eaec; --plate-steel: #9aa3ae; --plate-black: #2a2f36;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;
  --tabh: 64px; --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
/* silver: the cold-luxury light rendition, used when the phone is in light mode */
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --bg: #e8e9eb; --surface: #f3f4f5; --surface-2: #dcdde0; --line: #c9cbd0; --line-strong: #787b82;
  --ink: #0b0b0d; --body: #2b2c30; --muted: #54565c; --faint: #7a7c83;
  --accent: #2d5a86; --accent-ink: #ffffff;
  --good: #2a7337; --warn: #855d00;
  --bad: #b8302a; --bad-soft: rgba(184, 48, 42, .10);
  --on-ink: #f3f4f5; --shadow: rgba(40, 44, 52, .22); --plate-white: #f7f7f8; color-scheme: light } }
:root[data-theme="light"] {
  --bg: #e8e9eb; --surface: #f3f4f5; --surface-2: #dcdde0; --line: #c9cbd0; --line-strong: #787b82;
  --ink: #0b0b0d; --body: #2b2c30; --muted: #54565c; --faint: #7a7c83;
  --accent: #2d5a86; --accent-ink: #ffffff;
  --good: #2a7337; --warn: #855d00;
  --bad: #b8302a; --bad-soft: rgba(184, 48, 42, .10);
  --on-ink: #f3f4f5; --shadow: rgba(40, 44, 52, .22); --plate-white: #f7f7f8; color-scheme: light }

/* ---------- base ---------- */
* { box-sizing: border-box }
html, body { background: var(--bg); color: var(--body) }
body { font: 400 15px/1.5 var(--text); font-stretch: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; scrollbar-color: var(--line-strong) var(--bg) }
::selection { background: var(--accent); color: var(--accent-ink) }
input, textarea { caret-color: var(--accent) }
button { touch-action: manipulation }
a { color: var(--accent); text-underline-offset: 3px }
#app { max-width: 560px; margin: 0 auto; padding-inline: 16px; padding-block: 0 calc(var(--tabh) + 132px); display: flex; flex-direction: column; gap: 20px }
h1, h2, h3 { font-family: var(--display); color: var(--ink); font-weight: 300; text-transform: uppercase; margin: 0; text-wrap: balance; line-height: 1.12 }
h1 { font-size: 28px; font-stretch: 125%; letter-spacing: .08em }
h2 { font-size: 19px; font-stretch: 125%; letter-spacing: .07em }
h3 { font-size: 16px; font-stretch: 112%; font-weight: 400; letter-spacing: .06em }
p { margin: 0 }
b, strong { font-weight: 600; color: var(--ink) }
.label, .sub, .hint.mono { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1.5 }
.hint { font-size: 14px; color: var(--muted) }
.updbar { position: fixed; z-index: 40; left: 0; right: 0; top: env(safe-area-inset-top, 0px); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--ink); color: var(--on-ink); font-size: 14px; box-shadow: 0 8px 24px var(--shadow) }
.updbar .btn { color: var(--on-ink); border-color: currentColor; background: transparent; flex: none }
#app { overflow-wrap: break-word }
#app h1:focus { outline: none }
.lead { font-size: 17px; line-height: 1.45; color: var(--ink); text-wrap: pretty }
.num, .clock, .bv, .stats b, .kpis b { font-variant-numeric: tabular-nums }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* wordmark strip */
.brandbar { height: 56px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); margin-inline: -16px }
.wordmark { font-family: var(--display); font-stretch: 125%; font-weight: 400; font-size: 13px; letter-spacing: .5em; text-transform: uppercase; color: var(--ink); padding-left: .5em }
.pagehead { display: flex; flex-direction: column; gap: 8px; padding-top: 8px }

/* panels: square, hairline, barely lifted */
.card { background: var(--surface); border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 16px }
.cardhead { display: flex; flex-direction: column; gap: 6px }

/* ---------- buttons: pills only ---------- */
.btn { font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); padding: 0 22px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease) }
.btn:active { transform: scale(.98) }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink) }
.btn.big { min-height: 58px; font-size: 13px; letter-spacing: .2em; width: 100% }
.btn.small { min-height: 44px; font-size: 11px; padding: 0 16px }
.btn.ghost { border-color: transparent; color: var(--muted) }
.btn.danger { color: var(--bad); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; padding-inline: 4px }
.btn:disabled { opacity: .4; cursor: default; transform: none }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
@media (hover: hover) {
  .btn:hover { border-color: var(--ink) }
  .btn.primary:hover { background: var(--body); border-color: var(--body) }
  .btn.ghost:hover { color: var(--ink); border-color: var(--line-strong) }
  .chip:hover, .stp button:hover, .painrow button:hover { border-color: var(--ink) }
  .crow:hover, .ctable tbody tr:hover { background: var(--surface) }
}
.row { display: flex; gap: 10px; flex-wrap: wrap }
.row > .btn { flex: 1 1 auto }

.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chip { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease) }
.chip small { font-size: 10px; letter-spacing: .14em; color: var(--muted) }
.chip.on { background: var(--surface-2); border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
/* segmented control: the indicator is a separate outlined pill that slides between options */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; gap: 3px }
.seg button { grid-row: 1; position: relative; z-index: 1; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: color .18s var(--ease) }
.seg button.on { color: var(--ink) }
.seg-on { grid-row: 1; border: 1px solid var(--ink); border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); pointer-events: none }

/* ---------- Today: next session ---------- */
.sess-name { font-size: 24px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; line-height: 1.15 }
.sess-key { font: 400 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); border: 1px solid var(--line-strong); padding: 6px 8px; align-self: center }
.meta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.plan li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line) }
.plan .tag { font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--muted); background: none; border: 0; padding: 0; min-width: 0; text-align: left }
.x { font-style: normal; font-family: var(--mono); font-size: .62em; color: var(--muted); margin: 0 .35em; vertical-align: .12em }
.plan .nm { color: var(--ink); min-width: 0 }
.plan .rx { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.plan .rx small { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: 4px }
.plan .nm .hint, .plan .rx .st { display: block; margin-top: 4px }
.plan .rx .st { text-align: right }
.note { padding: 12px 0 0; font-size: 14px; border-top: 1px solid var(--line); color: var(--body); max-width: 65ch }
.note b { color: var(--ink) }
.note.ok b { color: var(--good) }
.note.warn { border-top-color: var(--warn) }
.note.warn b { color: var(--warn) }
.ready { display: flex; flex-direction: column; gap: 10px }

/* the coach's note: an ink rule over their words */
.msg { border-top: 1px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 8px }
.msg .lead { font-size: 18px; max-width: 60ch; overflow-wrap: anywhere }
.seg.five { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.ckq { border: 0; padding: 0; margin: 0 }
.ckq legend { font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 8px }
.ckphoto { display: block; width: 160px; max-width: 100%; height: auto; border: 1px solid var(--line-strong) }
.cklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px }
.cklist li { display: flex; flex-direction: column; gap: 2px }
.ckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 12px }
.ckgrid figure { margin: 0; display: flex; flex-direction: column; gap: 4px }
.ckgrid img { width: 100%; height: auto; display: block; border: 1px solid var(--line-strong) }
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.thread li { max-width: 86%; padding: 10px 14px; border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 4px }
.thread li.me { align-self: flex-end; background: var(--surface-2); border-color: var(--ink) }
.thread li.them { align-self: flex-start }
.thread p { margin: 0; white-space: pre-wrap; color: var(--ink) }
.flag.new { border-color: var(--accent); color: var(--accent) }
.msgfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px }
/* consistency: sessions this week against the target, the last four weeks Monday-first */
.consist { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0 18px }
.cwk { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.cnum { display: flex; align-items: baseline; font-family: var(--display); font-stretch: 112%; font-weight: 200; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px }
.cnum b { font-weight: 200; font-size: 48px }
.cnum span { font-size: 22px; color: var(--muted) }
.cal { display: grid; grid-template-columns: repeat(7, 14px); gap: 5px }
.dow { font: 400 10px/1 var(--mono); color: var(--muted); text-align: center; padding-bottom: 3px }
.day { width: 14px; height: 14px; border: 1px solid var(--line-strong) }
.day.on { background: var(--ink); border-color: var(--ink) }
.day.today { outline: 1px solid var(--accent); outline-offset: 2px }
.day.future { border-color: var(--line); border-style: dashed }

/* weekly sets: thin rules, ticks at 8 and 16 */
.bars { display: flex; flex-direction: column; gap: 12px }
.bar { display: grid; grid-template-columns: 108px 1fr 34px; gap: 12px; align-items: center; font-size: 13px; color: var(--body) }
.track { position: relative; height: 10px; overflow: visible }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line) }
.band { position: absolute; top: 0; bottom: 0; left: 33.33%; width: 33.33%; border-left: 1px solid var(--muted); border-right: 1px solid var(--muted) }
.fill { position: absolute; top: 3px; height: 4px; left: 0; background: var(--ink) }
.fill.under { background: var(--faint) }
.bv { text-align: right; font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 17px; color: var(--ink) }

/* lists: History, recent */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.hitem { border-top: 1px solid var(--line) }
.hitem:first-child { border-top: 0 }
.hbtn { width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 16px 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; cursor: pointer; font: inherit }
.hdate { text-align: left; line-height: 1 }
.hdate b { display: block; font-family: var(--display); font-stretch: 112%; font-weight: 200; font-size: 30px; color: var(--ink) }
.hdate span { font: 400 10px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.hmain { min-width: 0; display: flex; flex-direction: column; gap: 4px }
.hmain strong { font-family: var(--display); font-stretch: 112%; font-weight: 400; font-size: 15px; letter-spacing: .06em; text-transform: uppercase }
.hmain .hint { overflow-wrap: anywhere }
.hdetail { padding: 0 0 16px 66px; display: flex; flex-direction: column; gap: 8px; font-size: 14px }
.hedit .hlift { display: flex; flex-direction: column; gap: 4px }
.hedit .hsets { display: flex; flex-wrap: wrap; gap: 6px 18px }
.hedit .hset { display: flex; gap: 10px }
.hedit .fld { width: 78px }
.hedit .fld input { font-size: 20px; padding: 6px 0 4px }
.edsess { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px }
.edsess .btn { align-self: flex-start }
.cfind { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px }
.cfind .chips { display: flex; flex-wrap: wrap; gap: 8px }
.sessfull { display: flex; flex-direction: column; gap: 6px; font-size: 14px; padding-top: 4px }
.sessfull .lift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px }
.sessfull .lift span:last-child { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.hdetail .lift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px }
.hdetail .lift span:last-child { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }

/* ---------- workout ---------- */
.wkhead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); margin-inline: -16px; padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line) }
.wkhead h1 { font-size: 20px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.wkt { min-width: 0; display: flex; flex-direction: column; gap: 6px }
.wkhead .clock { color: var(--ink) }
.counter { margin: 0; display: flex; align-items: baseline; font-family: var(--display); font-stretch: 112%; font-weight: 200; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums }
.counter b { font-weight: 200; font-size: 40px }
.counter span { font-size: 18px; color: var(--muted) }
.wkprog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(var(--p)) }
.wkprog.grow { animation: grow .7s var(--ease) both }
.pair { border-left: 1px solid var(--line-strong); padding-left: 12px; display: flex; flex-direction: column; gap: 12px }
.pairhead { font: 400 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.ex { background: var(--surface); border: 1px solid var(--line); padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s var(--ease) }
.ex.complete { border-color: var(--line-strong) }
.exhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start }
.tag { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--ink); border: 1px solid var(--line-strong); padding: 7px 6px; min-width: 34px; text-align: center }
.ex.complete .tag { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.exname { min-width: 0; display: flex; flex-direction: column; gap: 6px }
.target { font: 400 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.tk { white-space: nowrap }
.coach { font-size: 14px; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--body) }
.coach .last { font: 400 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums }
.aux:empty { display: none }
.aux { display: flex; flex-direction: column; gap: 10px }
.warm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.warm .label { margin-right: 6px }
.wchip { font: 400 12px/1 var(--mono); padding: 7px 10px; border: 1px solid var(--line); color: var(--body); font-variant-numeric: tabular-nums }
.plates { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-height: 66px }
.plates .label { margin-right: 8px }
.sleeve { width: 18px; height: 6px; background: var(--plate-steel) }
.plate { display: inline-grid; place-items: center; width: 28px; height: var(--h); font: 500 12px/1 var(--mono); writing-mode: vertical-rl; transform: rotate(180deg); border: 1px solid rgba(0,0,0,.25) }
.plate.red { background: var(--plate-red); color: #fff } .plate.blue { background: var(--plate-blue); color: #fff }
.plate.yellow { background: var(--plate-yellow); color: #141414 } .plate.green { background: var(--plate-green); color: #fff }
.plate.white { background: var(--plate-white); color: #141414 } .plate.steel { background: var(--plate-steel); color: #141414 }
.plate.black { background: var(--plate-black); color: #fff }
.plates .rem { font: 400 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); margin-left: 8px }

/* signature: each set row is a spec cell, thin numerals over mono units */
.sets { display: flex; flex-direction: column }
.set { display: grid; grid-template-columns: 20px 1fr 1fr 52px; gap: 6px 14px; align-items: center; padding: 6px 0; scroll-margin-bottom: calc(var(--tabh) + 200px); scroll-margin-top: 96px }
.set.next .sn { color: var(--accent) }
.set.next .fld { border-bottom-color: var(--ink) }
.steps { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 4px }
.stp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.stp button { min-height: 44px; min-width: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 400 13px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .1s var(--ease) }
.stp button:active { transform: scale(.95); background: var(--surface-2) }
.sn { font: 400 11px/1 var(--mono); color: var(--muted); text-align: left }
.fld { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line-strong); min-width: 0; overflow: hidden; transition: border-color .18s var(--ease) }
.fld:focus-within { border-bottom-color: var(--accent) }
.fld input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--display); font-stretch: 112%; font-weight: 250; font-size: 34px; line-height: 1; padding: 8px 0 6px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; border-radius: 0 }
/* a long weight steps down so it is never clipped; the padding keeps the height and the baseline of the 34px field */
.set .fld input[data-len="4"] { font-size: 24px; padding: 17px 0 8px }
.set .fld input[data-len="5"] { font-size: 19px; padding: 21px 0 9px }
.fld input::-webkit-outer-spin-button, .fld input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.fld input::placeholder { color: var(--muted); opacity: 1 }
/* a word placeholder ("Weight") is a prompt, not a number: set it as a mono label */
.fld input.ph-word::placeholder { font: 400 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase }
.fld input:focus { outline: none }
.fld span { font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap }
.fld.need { border-bottom-color: var(--warn); box-shadow: 0 1px 0 var(--warn) }
.check { position: relative; isolation: isolate; overflow: hidden; width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease) }
.check:active { transform: scale(.94) }
.check svg { width: 20px; height: 20px }
.check::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ink); clip-path: circle(0 at 50% 50%); opacity: 0; pointer-events: none }
.check svg { opacity: .3 }
.set.done .check { border-color: var(--ink); color: var(--on-ink) }
.set.done .check::before { clip-path: circle(75% at 50% 50%); opacity: 1 }
.set.done .check svg { opacity: 1 }
/* the set lands: ink floods the check from the centre, the tick draws, then it settles to the outline */
.set.landed .check { animation: land-ink .8s linear both }
.set.landed .check::before { animation: land .8s var(--ease) both }
.set.landed .check path { stroke-dasharray: 1; animation: tick .4s .1s var(--ease) both }
.set.landed .fld input { animation: settle .8s var(--ease) both }
.set.done .fld { border-bottom-color: var(--line) }
.set.done .fld input { color: var(--body) }
.exfoot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.cue { margin-left: auto; font-size: 14px }
.cue summary { cursor: pointer; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); list-style: none; padding: 16px 4px }
.cue summary::-webkit-details-marker { display: none }
.cue[open] { flex-basis: 100%; margin-left: 0 }
.cue p { padding: 0 4px 4px; color: var(--body) }
/* start and end photos: stacked on a phone so each is large enough to read, side by side when there is room */
.pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; padding: 0 4px 12px }
.pics img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; background: var(--surface-2) }
.swaps { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line) }
.pain { display: flex; flex-direction: column; gap: 8px }
.painrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px }
.painrow button { min-height: 46px; min-width: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 400 14px/1 var(--mono); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease) }
.painrow button.hi { border-color: color-mix(in srgb, var(--bad) 50%, var(--line-strong)) }
.painrow button.on.ok { background: var(--surface-2); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.painrow button.on.hi { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad) }
.ex.folded { gap: 0; padding-block: 12px }
.ex.folded :is(.sets, .aux, .coach, .pain, .exfoot, .swaps, .target, .hint) { display: none }
.ex.folded .exhead { align-items: center }
.foldsum { font: 400 12px/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums }
textarea { width: 100%; min-height: 84px; border: 0; border-bottom: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 16px/1.5 var(--text); padding: 10px 0; border-radius: 0; resize: vertical }
textarea:focus { outline: none; border-bottom-color: var(--accent) }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.stats div { padding: 14px 0; display: flex; flex-direction: column; gap: 6px }
.stats div + div { border-left: 1px solid var(--line); padding-left: 14px }
.stats b { font-family: var(--display); font-stretch: 112%; font-weight: 200; font-size: 34px; line-height: 1; color: var(--ink) }
.stats span { font: 400 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.prs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px }
.prs span { color: var(--good) }
.summary.fresh .prs li { animation: rise-in .55s var(--ease) both; animation-delay: calc(.55s + var(--i) * .09s) }

/* ---------- progress ---------- */
select { width: 100%; min-height: 48px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 400 16px var(--text); padding: 0 4px 0 0 }
select option { background: var(--surface); color: var(--ink) }
.chart { width: 100%; height: auto; display: block; max-height: 260px }
.chart .grid { stroke: var(--line); stroke-width: 1 }
.chart .ax { fill: var(--muted); font: 400 10px var(--mono); letter-spacing: .04em }
.chart .ln { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: draw 1.1s var(--ease) both }
.chart .ar { fill: var(--ink); opacity: .06; animation: fade .8s .35s var(--ease) both }
.chart .end, .chart .endl { animation: fade .4s .85s var(--ease) both }
.chart .dt { fill: var(--bg); stroke: var(--ink); stroke-width: 1.25 }
.chart .end { fill: var(--accent) }
.chart .endl { fill: var(--ink); font: 400 12px var(--mono) }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.kpis div { padding: 14px 0; display: flex; flex-direction: column; gap: 6px }
.kpis div + div { border-left: 1px solid var(--line); padding-left: 14px }
.kpis b { font-family: var(--display); font-stretch: 112%; font-weight: 200; font-size: 30px; line-height: 1; color: var(--ink) }
.kpis span { font: 400 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px }
.tbl th { text-align: left; font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 0 }
.tbl td { padding: 10px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; color: var(--body) }
.tbl td:last-child { text-align: right; font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 17px; color: var(--ink) }

/* ---------- program, settings ---------- */
.sessblock { display: flex; flex-direction: column; gap: 4px }
.sessblock + .sessblock { border-top: 1px solid var(--line); padding-top: 18px }
.sessblock h3 { display: flex; gap: 10px; align-items: baseline }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line) }
.setting > div:first-child { min-width: 0; flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px }
.setting strong { font-weight: 500 }
.seg.two { grid-template-columns: repeat(2, 1fr); min-width: 150px }
.why { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px }
.why li { display: flex; flex-direction: column; gap: 6px; max-width: 65ch }
.why strong { font-family: var(--display); font-stretch: 112%; font-weight: 400; font-size: 14px; letter-spacing: .06em; text-transform: uppercase }
.why p { font-size: 15px }
.why cite { font: normal 400 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted) }
.rules { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; max-width: 65ch; font-size: 15px }
.rules li::marker { font-family: var(--mono); font-size: 12px; color: var(--muted) }
.changes { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 4px }
details summary.label { cursor: pointer; padding: 6px 0 }
.sync { display: flex; align-items: center; gap: 10px; font-size: 14px }
.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--faint); flex-shrink: 0 }
.dot.on { background: var(--good) } .dot.err { background: var(--warn) }

/* ---------- food ---------- */
.daynav { display: flex; align-items: center; gap: 4px; margin-left: -12px }
.daynav .sub { min-width: 0; flex: 0 1 auto; padding: 0 4px }
.daynav .btn { min-width: 44px; padding: 0 12px }
/* the day's numbers: calories across the top, macros as three spec cells, each over a hairline bar */
.fband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.fband > div { padding: 14px 0 14px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.fband > div:nth-child(2) { padding-left: 0 }
.fband > div + div:not(:nth-child(2)) { border-left: 1px solid var(--line) }
.fband .fkcal { grid-column: 1 / -1; padding-left: 0; border-bottom: 1px solid var(--line) }
.fband.total { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.fnum { display: flex; align-items: baseline; gap: 4px; font-family: var(--display); font-stretch: 112%; font-weight: 200; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; margin: 0; min-width: 0 }
.fnum b { font-weight: 200; font-size: 30px }
.fnum span { font-size: 14px; color: var(--muted); white-space: nowrap }
.fnum.big b { font-size: 48px }
.fnum.big span { font-size: 18px }
.fbar { position: relative; display: block; height: 2px; background: var(--line); margin-top: 4px; overflow: hidden }
.fbar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p)); transition: transform .5s var(--ease) }
.fadd { display: flex; flex-direction: column; gap: 10px }
.fadd label.btn { cursor: pointer }
.fadd .row.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.fadd .row.three .btn { padding: 0 6px; letter-spacing: .12em; min-width: 0 }
/* barcode scanner: the live picture edge to edge, a frame to aim with, an ice line sweeping it */
.scanview { position: relative; margin: -20px -20px 0; aspect-ratio: 4 / 3; background: #000; overflow: hidden }
.scanview video { width: 100%; height: 100%; object-fit: cover; display: block }
/* the frame dims everything outside it, like a viewfinder; white reads on any camera picture */
.scanframe { position: absolute; left: 8%; right: 8%; top: 28%; bottom: 28%; border: 1px solid rgba(255, 255, 255, .75); outline: 100vmax solid rgba(0, 0, 0, .35); overflow: hidden }
.scanframe::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); animation: sweep 1.8s cubic-bezier(.45, 0, .55, 1) infinite alternate }
.bcmanual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end }
.hint.small { font-size: 12px }
.pnote { white-space: pre-wrap; color: var(--ink) }
.src.label { border-color: var(--ink) }
.fadd .btn svg { width: 20px; height: 20px }
#f-snap:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px }
.fbox { gap: 12px }
.fresults { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.fresults li + li { border-top: 1px solid var(--line) }
.fresults li.hint { padding: 10px 0 }
.fres { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 12px 0; cursor: pointer; min-height: 48px }
.fres > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.fres strong { font-weight: 500; color: var(--ink) }
.fres .hint { font-size: 13px; overflow-wrap: anywhere }
.fk { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums }
.fk b { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 20px; line-height: 1; color: var(--ink) }
.fk small { font: 400 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap }
.usuals { display: flex; flex-direction: column; gap: 8px }
.mslot + .mslot { margin-top: 6px }
.mslot > .label { padding-bottom: 4px }
.meal + .meal { border-top: 1px solid var(--line) }
.mrow { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 12px 0; cursor: pointer }
.mthumb { width: 56px; height: 56px; object-fit: cover; display: block; background: var(--surface-2) }
.mthumb.none { display: grid; place-items: center; color: var(--faint); border: 1px solid var(--line) }
.mthumb.none svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.mmain { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.mmain strong { font-family: var(--display); font-stretch: 112%; font-weight: 400; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere }
.mmain .hint { font: 400 11px/1.4 var(--mono); letter-spacing: .04em; font-variant-numeric: tabular-nums }
.mdetail { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px 70px }
.mitems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px }
.mitems li { display: flex; justify-content: space-between; gap: 12px }
.mitems li > span:last-child { font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.micros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column }
.micros li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) auto; grid-template-areas: "l v p" "b b b"; gap: 6px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line) }
.micros li:first-child { border-top: 0 }
.micros .ml { grid-area: l; font-size: 14px; color: var(--ink) }
.micros .ml small { font: 400 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: 4px }
.micros .mv { grid-area: v; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.micros .mv small { color: var(--muted); font-size: 11px }
.micros .mp { grid-area: p; min-width: 40px; text-align: right; font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums }
.micros .mbar { grid-area: b; position: relative; height: 2px; background: var(--line); overflow: hidden }
.micros .mbar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p)) }
.micros li.low .mp { color: var(--warn) }
.micros li.low .mbar i { background: var(--warn) }
.micros li.high .mp { color: var(--bad) }
.micros li.high .mbar i { background: var(--bad) }
.tgts { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.tgts > div { padding: 12px 0 12px 10px; display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0 }
.tgts > div:first-child { padding-left: 0 }
.tgts > div + div { border-left: 1px solid var(--line) }
.tgts dt { font: 400 9px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.tgts dd { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 17px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.wlog { display: flex; align-items: center; gap: 10px }
.wlog .fld { width: 110px }
.wlog .fld input { font-size: 26px; padding: 4px 0; min-height: 44px }
.cue summary { min-height: 44px; display: flex; align-items: center }
.cue .demo { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-underline-offset: 3px }
/* review: the photo scans while Claude reads it, then each food lands in turn */
.shot { margin: 0 -16px; position: relative; overflow: hidden; background: var(--surface-2) }
.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: filter .5s var(--ease) }
.shot.reading img { filter: saturate(.55) brightness(.8) }
.shot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 20%, transparent)); border-bottom: 1px solid var(--accent) }
.shot.reading::after { opacity: 1; animation: scan 2.4s cubic-bezier(.45, 0, .55, 1) infinite }
.fstatus { display: flex; flex-direction: column; gap: 6px }
.fitems { gap: 0 }
.fitem { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line) }
.fitem:first-child { border-top: 0; padding-top: 0 }
.fitem.fresh { animation: rise-in .55s var(--ease) both; animation-delay: calc(var(--i) * 80ms) }
.fhead { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center }
.fhead h3 { overflow-wrap: anywhere }
.src { font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 5px 6px; border: 1px solid var(--line-strong); color: var(--ink) }
.src.estimate { border-color: var(--warn); color: var(--warn) }
.fitem .hint.flag { color: var(--warn) }
.linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px }
.fgrams { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end }
.fgrams .stp { width: 120px }
.portions .chip { min-height: 44px; font-size: 10px; padding: 0 12px }
.fmacro { font: 400 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums }
.falt { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line) }
.meal.landed { animation: rise-in .6s var(--ease) both }
/* coach: a week of calories as seven thin columns against the target line */
.ndays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 92px; align-items: end; position: relative; padding-bottom: 18px }
.ndays::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(18px + 80% * (74 / 92)); border-top: 1px dashed var(--line-strong) }
.nday { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center }
.nday i { display: block; width: 100%; max-width: 22px; height: calc(var(--p) * 80%); background: var(--ink); transform-origin: bottom; animation: grow-y .6s var(--ease) both }
.nday.off i { background: transparent; border-bottom: 1px solid var(--line-strong); height: 0 }
.nday small { position: absolute; bottom: -18px; font: 400 10px var(--mono); color: var(--muted) }
.tgts.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.tgts dd small { display: block; margin-top: 6px; font: 400 9px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: normal }
.tgts > div { justify-content: flex-end }
.nmeals { display: flex; flex-direction: column }
.nmeals .mrow + .mrow { border-top: 1px solid var(--line) }
.mrow.static { cursor: default }

/* ---------- coach ---------- */
#app.wide { max-width: 760px }
.badge { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 0; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 10px/14px var(--mono); text-align: center; letter-spacing: 0 }
.status { display: inline-flex; align-items: center; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 0; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap }
.status.s-ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--line)) }
.status.s-review { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.status.s-pain { background: var(--bad); border-color: var(--bad); color: var(--on-ink) }
.status.s-inactive { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)) }
.status.s-stalled, .status.s-regress { color: var(--ink); border-color: var(--ink) }
.clist { display: flex; flex-direction: column; border-top: 1px solid var(--line) }
.crow { text-align: left; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 20px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; cursor: pointer; transition: background .18s var(--ease) }
.crow strong { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); line-height: 1.2 }
.crow .hint { grid-column: 1 / -1; min-width: 0 }
.flags { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 1 / -1 }
.flag { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border: 1px solid var(--line); color: var(--body) }
/* desktop client table (1024px and up; the cards are drawn below that) */
.ctable { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line) }
.ctable th, .ctable td { height: 44px; padding: 0 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-weight: 400; color: var(--body) }
.ctable .n { text-align: right; font-variant-numeric: tabular-nums }
.ctable thead th, .ctable thead button { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap }
.ctable thead button { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer }
.ctable [aria-sort] button { color: var(--ink) }
.ctable [aria-sort=ascending] button::after { content: ' ↑' }
.ctable [aria-sort=descending] button::after { content: ' ↓' }
.ctable tbody tr:focus-within { background: var(--surface) }
.tname { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: inherit; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap }
.tname strong { font-family: var(--display); font-stretch: 112%; font-weight: 400; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink) }
.form { display: flex; flex-direction: column; gap: 18px }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field > span { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 400 16px var(--text); padding: 8px 0 }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent) }
.field input[type=number] { -moz-appearance: textfield; appearance: textfield }
.field input[type=number]::-webkit-inner-spin-button, .field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px }
.checks { display: flex; flex-direction: column; gap: 4px }
.checks label { display: flex; gap: 12px; align-items: center; font-size: 15px; min-height: 44px; color: var(--ink) }
.checks input { width: 20px; height: 20px; accent-color: var(--ink) }
.checks .btn { justify-content: flex-start }
.ed { display: flex; flex-direction: column }
.edrow { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 16px 0; border-top: 1px solid var(--line) }
.edrow .tag { align-self: start }
.edmain { display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.edmain select { min-height: 44px; font-size: 16px }
.ednums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.ednums label { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; font: 400 10px/1.3 var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; min-width: 0 }
.ednums input, .ednums select { width: 100%; min-width: 0; min-height: 44px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 300 20px var(--display); font-stretch: 112%; padding: 4px 0; font-variant-numeric: tabular-nums }
.ednums select, .ednums input[type=text] { font: 400 16px var(--text) }
.ednums .wide { grid-column: 1 / -1 }
.ednums .w2 { grid-column: span 2 }
.edbtns { display: flex; gap: 6px; flex-wrap: wrap }
/* save bar: a quiet row until something changes, then it sticks above the tab bar */
.edsave { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line) }
.edsave .hint { margin-right: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase }
.edsave.dirty { position: sticky; bottom: calc(var(--tabh) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 6; background: var(--surface); border: 1px solid var(--line-strong); padding: 8px 8px 8px 16px; box-shadow: 0 12px 32px var(--shadow) }
.edsave.dirty .hint { color: var(--ink) }
@media (max-width: 559px) { .edsave { flex-wrap: nowrap; justify-content: flex-end } .edsave .hint { display: none } }
.inboxitem { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line) }
.inboxitem:first-child { border-top: 0; padding-top: 0 }
.inboxitem .meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap }
.inboxitem .meta strong { color: var(--ink); font-family: var(--display); font-stretch: 112%; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: 13px }
.inboxitem p { color: var(--body) }
.inboxitem p.ibmeta { font: 400 10px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.ibend { padding-top: 12px; border-top: 1px solid var(--line) }
.ibbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px }
.ibgroup { display: flex; flex-direction: column; gap: 16px }
.ibgroup + .ibgroup { border-top: 1px solid var(--line-strong); padding-top: 16px }
.ibgroup h3 { display: flex; align-items: baseline; gap: 10px }
.ibgroup h3 .linkbtn { text-transform: inherit; letter-spacing: inherit; text-align: left }
.ibgroup h3 + .inboxitem { border-top: 0; padding-top: 0 }
.ibgroup h3 small { font: 400 10px/1 var(--mono); letter-spacing: .14em; color: var(--muted) }
.btn.strong { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink) }
.tplrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line) }
.tplrow:first-child { border-top: 0; padding-top: 0 }
.tplrow > span { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.tplrow strong { font-weight: 500 }
/* the coach's week: four spec cells, the decisions cell jumps to the inbox */
.wkband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.wkband > * { padding: 14px 0 14px 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit; background: none; border: 0; min-width: 0 }
.wkband > :nth-child(odd) { padding-left: 0 }
.wkband > :nth-child(even) { border-left: 1px solid var(--line) }
.wkband > :nth-child(n+3) { border-top: 1px solid var(--line) }
.wkband b { font-family: var(--display); font-stretch: 112%; font-weight: 200; font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums }
.wkband span { font: 400 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.wkband button { cursor: pointer }
.wkband .hot span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.wkband .bad b { color: var(--bad) }
/* each client's last 14 days */
.act { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0 }
.strip { display: grid; grid-template-columns: repeat(14, 10px); gap: 3px }
.strip i { height: 10px; border: 1px solid var(--line-strong) }
.strip i.on { background: var(--ink); border-color: var(--ink) }
.adh { font: 400 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.adh b { font-family: var(--display); font-stretch: 112%; font-weight: 300; font-size: 16px; letter-spacing: .02em; color: var(--ink); margin-right: 4px }
/* pain trend: bars against the 3/10 line, morning checks underneath */
.pchart { width: 100%; max-width: 560px; height: auto; display: block }
.pchart .grid { stroke: var(--line) }
.pchart .lim { stroke: var(--warn); stroke-dasharray: 3 3 }
.pchart .ax { fill: var(--muted); font: 400 10px var(--mono) }
.pchart .pb { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 100%; animation: grow-y .7s var(--ease) both }
.pchart .pb.hi { fill: var(--bad) }
.pchart .mc { fill: none; stroke: var(--faint); stroke-width: 1.25 }
.pchart .mc.ok { fill: var(--good); stroke: var(--good) }
.pchart .mc.no { stroke: var(--bad); stroke-width: 1.5 }
.kind { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase }
.kind.k-pr { color: var(--good) } .kind.k-pain, .kind.k-overnight { color: var(--bad) } .kind.k-swap { color: var(--muted) }
.cgrid { display: grid; gap: 20px }
.copy { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.copy code { font: 400 13px var(--mono); border-bottom: 1px solid var(--line-strong); padding: 10px 0; overflow-wrap: anywhere; min-width: 0; flex: 1 1 200px; color: var(--ink) }
.demo-bar { font: 400 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: nowrap; border-bottom: 1px solid var(--line); margin-inline: -16px; padding: 0 16px }
.demo-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.demo-bar b { color: var(--ink); font-weight: 500 }
.demo-bar button { flex-shrink: 0 }
.demo-bar button { background: none; border: 0; color: var(--accent); font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 14px 0; text-decoration: underline; text-underline-offset: 3px }

/* sign-in and demo picker */
.signin { max-width: 440px; width: 100%; margin: 10vh auto 0; display: flex; flex-direction: column; gap: 28px }
.brand { font-family: var(--display); font-stretch: 125%; font-weight: 200; font-size: 34px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink); line-height: 1 }
.empty { text-align: left; padding: 28px 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start }

/* ---------- fixed bars ---------- */
#dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; pointer-events: none }
#dock > * { pointer-events: auto }
.startbar { max-width: 560px; width: 100%; margin: 0 auto; padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--line-strong) }
.startbar .btn { width: 100% }
/* rest band: black while resting, inverts to white when it is time to lift */
.timer { max-width: 560px; width: 100%; margin: 0 auto; background: var(--surface-2); color: var(--ink); border-top: 1px solid var(--line-strong); box-shadow: 0 -16px 40px var(--shadow); padding: 14px 16px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; position: relative; isolation: isolate; overflow: hidden; transition: color .3s .12s var(--ease) }
.timer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease) }
.timer.over { color: var(--on-ink) }
.timer.over::before { clip-path: inset(0 0 0 0) }
.timer.rise { animation: rise .5s var(--ease) both }
.timer .tl { font-family: var(--display); font-stretch: 112%; font-weight: 200; font-size: clamp(44px, 16.5vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; transform-origin: left center }
.timer.over .tl { font-stretch: 125%; letter-spacing: .3em; font-size: 46px; text-transform: uppercase }
.timer .tn { font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .85; grid-column: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.timer .tb { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px }
.timer .tb button { min-height: 44px; min-width: 50px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: 400 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: .9 }
.timer .prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .25s linear, height .2s var(--ease) }
.timer.final .prog { height: 4px }
.timer.over .prog { background: var(--on-ink) }
.tabs { background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px) }
.tabs:has(nav:empty) { display: none }
.tabs nav { max-width: 560px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--tabh) }
.tabs button { position: relative; background: none; border: 0; color: var(--muted); font: 400 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: color .18s var(--ease) }
.tabs button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.tabs button.on { color: var(--ink) }
.tabs button.on::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--ink) }
#toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translate(-50%, -16px); background: var(--ink); color: var(--on-ink); padding: 12px 18px; font: 400 12px/1.45 var(--mono); letter-spacing: .04em; opacity: 0; pointer-events: none; z-index: 40; max-width: calc(100% - 32px); box-shadow: 0 10px 30px var(--shadow); text-align: center }
#toast.on { opacity: 1; transform: translate(-50%, 0) }

/* ---------- motion ---------- */
@keyframes land { 0% { clip-path: circle(0 at 50% 50%); opacity: 1; animation-timing-function: cubic-bezier(.3, .6, .3, 1) } 40% { clip-path: circle(72% at 50% 50%); opacity: 1 } 100% { clip-path: circle(72% at 50% 50%); opacity: 0 } }
@keyframes land-ink { 0%, 45% { color: var(--on-ink) } 100% { color: var(--ink) } }
@keyframes tick { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes settle { from { color: var(--ink) } }
@keyframes grow { from { transform: scaleX(var(--from)) } }
@keyframes rise { from { transform: translateY(100%) } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px) } }
@keyframes draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes fade { from { opacity: 0 } }
@keyframes scan { from { transform: translateY(-100%) } to { transform: translateY(333%) } }
@keyframes breathe { 50% { opacity: .35 } }
@keyframes sweep { from { top: 0 } to { top: calc(100% - 1px) } }
@keyframes grow-y { from { transform: scaleY(0) } }
@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes vt-out-l { to { opacity: 0; transform: translateX(-16px) } }
@keyframes vt-in-r { from { opacity: 0; transform: translateX(16px) } }
@keyframes vt-out-r { to { opacity: 0; transform: translateX(16px) } }
@keyframes vt-in-l { from { opacity: 0; transform: translateX(-16px) } }
#toast { transition: opacity .2s var(--ease), transform .25s var(--ease) }
/* view transitions: the dock stays put, selections slide, cards morph, tabs shift in the direction travelled */
#dock { view-transition-name: dock }
::view-transition-group(*) { animation-duration: .4s; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
::view-transition-image-pair(*) { overflow: clip }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s }
::view-transition-group(dock) { animation: none }
::view-transition-old(dock) { display: none }
::view-transition-new(dock) { animation: none }
:root[data-nav="fwd"]::view-transition-old(root) { animation: vt-out-l .22s cubic-bezier(.16, 1, .3, 1) both }
:root[data-nav="fwd"]::view-transition-new(root) { animation: vt-in-r .32s cubic-bezier(.16, 1, .3, 1) both }
:root[data-nav="back"]::view-transition-old(root) { animation: vt-out-r .22s cubic-bezier(.16, 1, .3, 1) both }
:root[data-nav="back"]::view-transition-new(root) { animation: vt-in-l .32s cubic-bezier(.16, 1, .3, 1) both }
/* reduced motion: fades and colour changes stay, travel goes */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .btn:active, .check:active, .stp button:active { transform: none }
  #toast { transform: translate(-50%, 0); transition: opacity .2s var(--ease) }
  .timer.rise, .summary.fresh .prs li { animation-name: fade }
  .timer::before { clip-path: none; opacity: 0; transition: opacity .3s var(--ease) }
  .timer.over::before { opacity: 1 }
  .set.landed .check::before { clip-path: none; animation-name: fade-out }
  .set.landed .check path { animation: none }
  .wkprog.grow { animation: none }
  .chart .ln, .pchart .pb, .fitem.fresh, .meal.landed { animation-name: fade }
  .shot.reading::after { transform: none; height: 100%; border: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); animation: breathe 2s ease-in-out infinite }
  .fbar i { transition: none }
  .scanframe::after { animation: breathe 2s ease-in-out infinite; top: 50% }
  ::view-transition-group(*) { animation: none }
  :root[data-nav]::view-transition-old(root) { animation: fade-out .2s ease both }
  :root[data-nav]::view-transition-new(root) { animation: fade .2s ease both }
}
@media (min-width: 560px) { .ednums { grid-template-columns: repeat(6, minmax(0, 1fr)) } .timer { border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong) } }
@media (min-width: 760px) {
  .wkband { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .wkband > * { border-top: 0 !important; border-left: 1px solid var(--line); padding-left: 14px }
  .wkband > :first-child { border-left: 0; padding-left: 0 }
}
@media (min-width: 1024px) {
  #app.wide { max-width: 1180px }
  .cgrid { grid-template-columns: 3fr 2fr; align-items: start }
  h1 { font-size: 34px }
}
@media (max-width: 380px) { .fnum b { font-size: 26px } .fnum.big b { font-size: 42px } .tgts dd { font-size: 15px } }
@media (max-width: 380px) { .set { grid-template-columns: 16px 1fr 1fr 48px; gap: 10px } .fld input { font-size: 28px } .set .fld input[data-len="4"] { font-size: 22px; padding: 14px 0 7px } .set .fld input[data-len="5"] { font-size: 17px; padding: 18px 0 8px } .check { width: 48px; height: 48px } .bar { grid-template-columns: 92px 1fr 30px } h1 { font-size: 24px } }

/* consent screen: plain checkbox and radio rows (not the round set-check buttons) */
.consent .form { gap: 18px }
.optset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px }
.optset legend { font: 500 12px/1.4 var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; padding: 0 }
.opts { display: grid; gap: 4px }
.opt { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 10px 0; min-height: 44px; cursor: pointer; line-height: 1.45 }
.opt input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink) }
.opt a { color: inherit; text-decoration: underline }