/* SEVI/GYM — Lineup Sheet. Two inks, one grotesque, no components we didn't need.
   Derived from .impeccable/comps/comp-final.png. Rules live in docs/DIRECTION.md. */

@font-face{
  font-family:'Saira';
  src:url('../fonts/saira-var-latin.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:50% 125%;
  font-display:block;
}

:root{
  --verm:#F24E1E;
  --bone:#EFE9DD;
  --ink:#12100E;
  --rule:rgba(18,16,14,.20);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

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

html{background:var(--verm)}          /* so the iOS overscroll edge is never white */
body{
  background:var(--bone);
  color:var(--ink);
  font-family:'Saira',system-ui,sans-serif;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  /* Kills double-tap-to-zoom (and the tap delay the browser adds while waiting to
     detect it) — rapid stepper taps must be N clicks, never a zoom. Pinch still works. */
  touch-action:manipulation;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}

/* Tap-highlight is disabled above, so every actionable element answers the finger
   itself — without this there is no sign a tap landed until the re-render. */
[data-act]:active{opacity:.6}

.screen{
  min-height:100dvh;
  display:flex;flex-direction:column;
}

/* ── shared type ────────────────────────────────────────────────────────── */

.lbl{
  font-size:10px;font-weight:700;font-stretch:100%;
  letter-spacing:.2em;text-transform:uppercase;
}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ── rail ───────────────────────────────────────────────────────────────── */

.rail{
  background:var(--verm);
  display:flex;align-items:center;gap:12px;
  padding:calc(13px + var(--safe-t)) 16px 11px;
  font-size:11px;font-weight:700;font-stretch:100%;
  letter-spacing:.2em;text-transform:uppercase;
}
.rail .sp{margin-left:auto}
/* The visible pip stays a 16×6 dash; the button around it is the real target. */
.pips{display:flex;align-items:center}
.pip{
  width:28px;height:34px;padding:0;border:none;
  display:flex;align-items:center;justify-content:center;
}
.pip::after{content:'';width:16px;height:6px;border:1.5px solid var(--ink)}
.pip.on::after{background:var(--ink)}

/* ═══ HOME ══════════════════════════════════════════════════════════════ */

.home-head{
  background:var(--verm);padding:0 16px 14px;display:block;width:100%;text-align:left;
  /* same ink hairline the active row uses — the rail and the day header are two
     different controls and must not read as one slab */
  border-top:1.5px solid rgba(18,16,14,.35);
}
.home-head .kicker{padding-top:6px}
.home-head h1{
  font-size:52px;font-weight:800;font-stretch:62%;
  text-transform:uppercase;line-height:.98;letter-spacing:.005em;
  padding:6px 0 2px;
}
.home-head .since{font-size:13px;font-weight:600;font-stretch:87%;letter-spacing:.1em;text-transform:uppercase}

.go{
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--bone);
  padding:20px 16px;width:100%;
  font-size:26px;font-weight:800;font-stretch:75%;
  text-transform:uppercase;letter-spacing:.04em;
}
.go .ar{margin-left:auto;font-size:24px}
/* two peers, one seam — the bone hairline keeps them reading as separate targets */
.go-stack .go + .go{border-top:1.5px solid var(--bone)}

/* the empty sheet under the buttons is the camera's — one tap, shot lands on the
   last training */
.shoot{
  flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:20px 16px;
}
/* the bordered box is this app's word for "tap me" — same as −30/+30 */
.cam{
  display:flex;align-items:center;justify-content:center;
  width:76px;height:76px;border:2px solid var(--ink);
  cursor:pointer;
}
.cam:active{background:var(--ink);color:var(--bone)}
.cam svg{width:40px;height:40px}
.shots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.shots img{width:64px;height:64px;object-fit:cover;border:1.5px solid var(--ink);display:block}

.days{flex:1 1 auto}
.day-row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:15px 16px;
  border-bottom:1px solid var(--rule);
}
.day-row .i{
  font-size:20px;font-weight:700;font-stretch:75%;width:26px;flex:0 0 26px;
}
.day-row .n{font-size:19px;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.02em}
.day-row .ago{margin-left:auto;font-size:10px;font-weight:700;font-stretch:100%;letter-spacing:.16em;text-transform:uppercase;opacity:.62}
.day-row.next{background:var(--verm)}
.day-row.next .ago{opacity:.82}   /* the 82%-ink floor for secondary type on vermillion */
.day-row.today .ago{opacity:1;font-weight:800}

/* ── warm-up ────────────────────────────────────────────────────────────── */
/* Four static rows in the day-list grammar; the dose sits where "hace n días" would.
   No per-row interaction — the whole screen completes with one tap on Hecho. */

.wu-list{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.wu-row{
  display:flex;align-items:center;gap:12px;
  padding:18px 16px;
  border-bottom:1px solid var(--rule);
}
.wu-row:first-child{border-top:1px solid var(--rule)}
.wu-row .i{font-size:20px;font-weight:700;font-stretch:75%;width:26px;flex:0 0 26px}
/* illustration sits on the sheet's own bone — grounds are normalised to #EFE9DD,
   so no frame, no crop, the plate is the row itself */
.wu-row .pic{flex:0 0 72px;height:72px;display:flex;align-items:center;justify-content:center}
.wu-row .pic img{height:100%;width:auto}
.wu-row .n{font-size:19px;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.02em}
.wu-row .d{margin-left:auto;font-size:13px;font-weight:600;font-stretch:87%;letter-spacing:.1em;text-transform:uppercase;opacity:.62;white-space:nowrap}
/* bone seam between the two dock strips, same as the go-stack seam */
.go-stack .go + .next{border-top:1.5px solid var(--bone)}

/* ── progress ───────────────────────────────────────────────────────────── */

.screen.prog{overflow-y:auto}
.pd{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:800;font-stretch:100%;
}

/* stat strip — three instrument cells sharing rules */
.pstats{display:flex;border-bottom:1.5px solid var(--ink)}
.ps{
  flex:1;padding:14px 16px 12px;
  display:flex;flex-direction:column;gap:2px;
}
.ps + .ps{border-left:1px solid var(--rule)}
.ps b{font-size:34px;font-weight:800;font-stretch:75%;line-height:1}
.ps .lbl{opacity:.6}

/* the body: illustrated figures, front + back; the selected muscle lights up on both.
   The two drawings have different aspect ratios — align them by height, not width. */
.bodies{display:flex;gap:20px;justify-content:center;align-items:flex-end;padding:22px 16px 6px}
.bodies figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:center}
.bodies svg{height:min(46vh,360px);width:auto;display:block}
.bodies .lbl{opacity:.5}
/* invisible hit areas — the selected muscle is painted IN the swapped illustration,
   not by an overlay shape */
.bp{fill:transparent;pointer-events:all;cursor:pointer}

/* the verdict: one number, one muscle, one curve */
.mg-head{
  padding:10px 16px 0;min-height:64px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.mg-head b{font-size:56px;font-weight:800;font-stretch:62%;line-height:.95}
.mg-head .lbl{font-size:12px;opacity:.6}
.mg-head .hint{opacity:.45}

/* stalled movement, named — a flag, not a scold */
.meseta{
  padding:6px 16px 0;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verm);
}
/* his own measured rate; no reference number renders next to it — ever */
.ritmo{
  padding:12px 16px 0;font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.6;
}

.chips{display:flex;gap:8px;padding:12px 16px 0}
.chip{
  border:1.5px solid var(--ink);padding:8px 14px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.chip.on{background:var(--ink);color:var(--bone)}

/* fixed aspect, uniform scale — stretching the SVG would stretch the type */
.chart{width:100%;height:auto;aspect-ratio:375/190;display:block}
.chart .grid line{stroke:var(--ink);stroke-width:1;opacity:.15}
.chart text{
  font-weight:600;font-size:9px;fill:var(--ink);opacity:.55;
  letter-spacing:.08em;text-transform:uppercase;
}
.chart .area{fill:var(--verm);opacity:.14}
.chart .line{fill:none;stroke:var(--verm);stroke-width:2.5}
.chart .pts circle{fill:var(--ink)}

.foot-note{
  padding:14px 16px calc(16px + var(--safe-b));
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.5;
}

/* ═══ SESSION ═══════════════════════════════════════════════════════════ */

.head{background:var(--verm);padding-bottom:12px;flex:0 0 auto}

/* Every illustration's ground is normalised to exactly --bone, so the plate is the
   sheet's own colour and no rectangle can appear behind the art. Do not re-encode the
   images lossily: a 2-level drift on that flat field shows up as an edge. */
.plate{
  background:var(--bone);
  height:168px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* never crop the art: the square illustration scales to whatever height the plate has */
.plate img{height:100%;width:auto;display:block}

.name{
  font-size:44px;font-weight:800;font-stretch:62%;
  letter-spacing:.005em;text-transform:uppercase;line-height:1;
  padding:14px 16px 0;
}
.name.long{font-size:34px;font-stretch:58%}

.hero{display:flex;align-items:flex-end;gap:9px;padding:6px 16px 0}
.hero .n{
  font-size:120px;font-weight:800;font-stretch:62%;
  line-height:.76;letter-spacing:-.012em;
}
.hero .n.sm{font-size:92px}
.hero .u{
  font-size:21px;font-weight:700;font-stretch:75%;
  text-transform:uppercase;letter-spacing:.08em;padding-bottom:9px;
}
.hero .tgt{
  margin-left:auto;text-align:right;padding-bottom:7px;
  font-size:10px;font-weight:700;font-stretch:100%;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.6;
}
.hero .tgt b{display:block;font-size:19px;font-stretch:87%;letter-spacing:.03em;line-height:1.1}
.hero .tgt .inv{display:block;font-size:9px;letter-spacing:.14em;opacity:.82}
/* the next-step prescription: what to do today, decided from last time */
.hero .tgt .sug{
  display:inline-block;margin-top:4px;padding:3px 7px;
  border:1.5px solid var(--verm);color:var(--verm);
  font-size:9px;letter-spacing:.14em;
}

/* The sheet opens on a rule, not on a label row — each number carries its own unit. */
.cols-rule{border-bottom:1.5px solid var(--ink)}

/* On the session sheet the dock (next/rest) must never scroll away: the screen is
   viewport-fixed and any overflow lives inside the set list alone. */
.screen.sess{height:100dvh;overflow:hidden}
.sets{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow-y:auto}

/* Rows share the sheet, but never stretch to fill it: a one-set exercise like the
   bike would otherwise flood half the screen with a single vermillion band. */
/* Rows split the sheet between them with no height cap — capped rows left a bone
   gap between the last set and the dock. A single-set exercise still gets one tall
   band; the dock staying glued to the sets matters more. */
.row{
  display:grid;gap:10px 10px;align-items:center;
  padding:10px 16px;
  border-bottom:1px solid var(--rule);
  flex:1;
}
.row.active{
  background:var(--verm);border-bottom-color:rgba(18,16,14,.35);
  flex:1.4;align-content:center;padding-top:12px;padding-bottom:14px;
}
.row.pending .val{opacity:.5}

.idx{font-size:30px;font-weight:700;font-stretch:75%;line-height:1}

.cell{min-width:0}
.cell .val{
  font-size:40px;font-weight:800;font-stretch:75%;
  line-height:.9;
  display:flex;align-items:baseline;gap:7px;
}
/* the unit rides the number, so a row still reads on its own once the header is gone */
.unit{
  font-size:.32em;font-weight:700;font-stretch:100%;
  letter-spacing:.12em;text-transform:uppercase;
  margin-left:-2px;opacity:.7;
}
.row.active .unit{opacity:.82}   /* 70% ink on vermillion fails AA; 82% is the floor */
/* "nothing here yet" — never a display-weight dash, that reads as a redaction bar */
.ph{font-size:.34em;font-weight:400;font-stretch:100%;opacity:.45;vertical-align:.3em}

/* Saira carries no U+25B2/25BC — the delta arrow is drawn, never a fallback glyph */
.tri{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent}
.tri.up{border-bottom:6px solid currentColor}
.tri.dn{border-top:6px solid currentColor}

/* the value itself is the type-it-exactly target */
.val-btn{padding:0;display:block}
.edit-wrap{display:flex;gap:6px;align-items:stretch}
.val-in{
  font:inherit;font-size:44px;font-weight:800;font-stretch:75%;
  width:100%;min-width:0;flex:1;background:var(--bone);color:var(--ink);
  border:2px solid var(--ink);padding:0 6px;
  -webkit-appearance:none;appearance:none;
}
.val-in::selection{background:var(--verm);color:var(--bone)}
/* the decimal pad has no Return key — OK is the dismissal, sized for a thumb */
.ok{
  flex:0 0 48px;
  background:var(--ink);color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;font-stretch:100%;letter-spacing:.1em;
  padding:0;
}

/* arrows ride each quantity on the working set — no stepper strip, no set he is
   not working */
/* the value gets a fixed slot so the arrows sit at the same x on every row,
   one or two digits alike — never pinned to the cell edge, that collides with
   the neighbour column */
.qty{display:flex;align-items:center;gap:10px}
.qty .val-btn{min-width:88px;text-align:left}
/* the pair stands exactly as tall as the ✓ box: 25 + 4 + 25 = 54 */
.arr{display:flex;flex-direction:column;gap:4px}
.st{
  width:40px;height:25px;
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.st:active{background:var(--ink);color:var(--verm)}

.tick{
  width:54px;height:54px;
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.tick.on{background:var(--ink);color:var(--bone)}   /* the check strokes currentColor */
.tick svg{width:27px;height:27px}

/* ── next / finish strip ─────────────────────────────────────────────── */

.next{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 16px;
  background:var(--ink);color:var(--bone);
  font-size:11px;font-weight:700;font-stretch:100%;
  letter-spacing:.16em;text-transform:uppercase;
}
.next .n{opacity:.72}
.next .x{margin-left:auto;font-size:15px;line-height:1}

/* A storage failure is the only way a real set can be lost — it gets the loudest bar
   on the screen rather than a console line nobody reads. */
.err{
  background:var(--ink);color:var(--bone);
  padding:11px 16px;letter-spacing:.14em;
}

/* ── rest timer ──────────────────────────────────────────────────────── */

/* The clock exists only while it counts — no idle line, and it removes itself at 0. */
/* Ink on the sheet's hottest moment — the clock must read as its own zone, not as
   more of the active row's vermillion. */
.rest{
  background:var(--ink);color:var(--bone);
  padding:10px 16px calc(15px + var(--safe-b));
  flex:0 0 auto;
}
/* same bone seam as the home buttons — two black strips need a visible joint */
.next + .rest{border-top:1.5px solid var(--bone)}
.rest .bar{display:flex;align-items:flex-end;gap:12px;margin-top:1px}
.rest .t{font-size:50px;font-weight:800;font-stretch:62%;line-height:.92}
.rest .adj{display:flex;gap:8px;margin-left:auto;padding-bottom:3px}
.rest .adj button{
  border:2px solid var(--bone);padding:12px 15px;   /* ≥44px tall — jabbed at mid-rest */
  font-size:14px;font-weight:700;font-stretch:87%;letter-spacing:.05em;
}
.track{height:5px;background:rgba(239,233,221,.22);margin-top:9px}
/* scaleX, not width — the bar animates every second and must never cost a layout */
.track i{
  display:block;height:100%;width:100%;background:var(--verm);
  transform-origin:left;transition:transform .9s linear;
}
@media (prefers-reduced-motion:reduce){.track i{transition:none}}