/* ===========================================================================
   theme.css — Benjamin's own tokens, plus the components both pages share.

   The palette is his supplied Tailwind/shadcn theme: neutral greyscale, Geist,
   0.5rem radius. Three semantic colours are added because the tool has to say
   good / middling / bad at a glance and greyscale cannot.

   Both pages load this. A verdict must not look different depending on whose
   screen it is on.
   =========================================================================== */

:root{
  --bg:#FCFCFC;
  --surface:#FFFFFF;
  --sunk:#F6F6F6;
  --ink:#0A0A0A;
  --body:#2E2E2E;
  --muted:#6E6E6E;
  --faint:#9C9C9C;
  --line:#E6E6E6;
  --line-soft:#F0F0F0;

  --good:#2F7D4F;  --good-bg:#EDF6F0;  --good-line:#C3DFCF;
  --warn:#8F6300;  --warn-bg:#FBF3E1;  --warn-line:#E5D4A6;
  --bad:#AE372E;   --bad-bg:#FAECEA;   --bad-line:#E7C3BE;
  --live:#2B4A75;  --live-bg:#EBF1F8;  --live-line:#C4D3E8;

  --radius:.5rem;
  --sans:Geist, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0B; --surface:#141414; --sunk:#101010;
    --ink:#F5F5F5; --body:#D0D0D0; --muted:#949494; --faint:#6C6C6C;
    --line:#262626; --line-soft:#1B1B1B;
    --good:#7CC698; --good-bg:#111E16; --good-line:#26482F;
    --warn:#DCAD4E; --warn-bg:#1F1A0B; --warn-line:#4A3A19;
    --bad:#E08A80;  --bad-bg:#1F1211;  --bad-line:#4C2926;
    --live:#8FB2DE; --live-bg:#0F1722; --live-line:#25384F;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0B; --surface:#141414; --sunk:#101010;
  --ink:#F5F5F5; --body:#D0D0D0; --muted:#949494; --faint:#6C6C6C;
  --line:#262626; --line-soft:#1B1B1B;
  --good:#7CC698; --good-bg:#111E16; --good-line:#26482F;
  --warn:#DCAD4E; --warn-bg:#1F1A0B; --warn-line:#4A3A19;
  --bad:#E08A80;  --bad-bg:#1F1211;  --bad-line:#4C2926;
  --live:#8FB2DE; --live-bg:#0F1722; --live-line:#25384F;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--body);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:28px 20px 96px}
.wrap.wide{max-width:920px}

h1{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px;text-wrap:balance}
h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:34px 0 12px}
h3{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
p{margin:0 0 12px}
a{color:var(--live)}
.lede{color:var(--muted);font-size:15px;margin:0 0 4px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ shell */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.topbar .brand{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.topbar .who{font-size:13px;color:var(--muted)}
.themebtn{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:5px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);
}
.themebtn:hover{color:var(--ink);border-color:var(--faint)}
.themebtn:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.crumb{margin:0 0 14px;font-size:13.5px}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--ink)}

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 12px;
}
.card.sunk{background:var(--sunk)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.card-h h3{margin:0}

.kv{display:grid;grid-template-columns:112px 1fr;gap:7px 14px;font-size:14.5px}
.kv dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.kv dd{margin:0;color:var(--body)}
.unk{color:var(--faint);font-style:italic}

/* ------------------------------------------------------------------ pills */
.pill{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;
  border:1px solid var(--line);color:var(--muted);background:var(--bg);white-space:nowrap;
}
.pill.good{color:var(--good);background:var(--good-bg);border-color:var(--good-line)}
.pill.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.pill.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.pill.live{color:var(--live);background:var(--live-bg);border-color:var(--live-line)}

/* ------------------------------------------------------------- the verdict */
.verdict{border-radius:var(--radius);padding:15px 17px;border:1px solid var(--line);background:var(--surface);margin:0 0 12px}
.verdict .vk{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px}
.verdict .vt{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 5px;letter-spacing:-.01em}
.verdict .vb{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.verdict.good{background:var(--good-bg);border-color:var(--good-line)} .verdict.good .vt{color:var(--good)}
.verdict.warn{background:var(--warn-bg);border-color:var(--warn-line)} .verdict.warn .vt{color:var(--warn)}
.verdict.bad{background:var(--bad-bg);border-color:var(--bad-line)}    .verdict.bad .vt{color:var(--bad)}
.verdict.unknown{background:var(--sunk);border-style:dashed}           .verdict.unknown .vt{color:var(--body)}

/* --------------------------------------------------------------- weigh-ins */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{
  border:1px solid var(--line);border-radius:6px;background:var(--bg);
  min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);
}
.day .dl{font-size:9.5px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;margin-bottom:2px}
.day.on{background:var(--surface);border-color:var(--line)}
.day.off{color:var(--faint)}
.day input{
  width:100%;border:0;background:transparent;text-align:center;
  font:500 16px var(--mono);color:var(--ink);padding:0;-moz-appearance:textfield;
}
.day input:focus{outline:2px solid var(--live);outline-offset:1px;border-radius:3px}
.day input::-webkit-outer-spin-button,.day input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rel{margin:10px 0 0;font-size:13.5px;font-family:var(--mono);letter-spacing:.01em}
.rel.none,.rel.thin{color:var(--bad)}
.rel.ok{color:var(--warn)}
.rel.good{color:var(--good)}

/* ------------------------------------------------------------------ table */
.weeks{width:100%;border-collapse:collapse;font-size:14px}
.weeks th{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);text-align:left;
  padding:0 10px 8px 0;border-bottom:1px solid var(--line);
}
.weeks td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.weeks tr:last-child td{border-bottom:0}
.weeks .n{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px}
.weeks a{text-decoration:none;color:var(--ink);font-weight:600}
.weeks a:hover{text-decoration:underline}
.dots{display:flex;gap:3px}
.dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);background:var(--bg)}
.dot.y{background:var(--good);border-color:var(--good)}
.dot.n{background:var(--bad);border-color:var(--bad)}
.tscroll{overflow-x:auto}

/* ----------------------------------------------------------------- inputs */
label.f{display:block;margin:0 0 12px}
label.f span{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
/* 16px is not a taste decision. Safari on iOS zooms the whole page whenever a
   focused input's text is under 16px, which throws the layout sideways the
   moment a client taps a field. Every input here is therefore 16px minimum.
   The fix is the font size, NOT disabling pinch-zoom in the viewport tag —
   that breaks zoom for anyone who needs it. */
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=email],input[type=password],input[type=tel],input[type=search],
input:not([type]),textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--sans);
}
textarea{resize:vertical;min-height:74px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--live);outline-offset:0;border-color:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

.btn{
  font:600 14.5px var(--sans);padding:10px 16px;border-radius:6px;cursor:pointer;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);
}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn.sm{font-size:13px;padding:7px 12px}
.btn:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.saved{font-size:13px;color:var(--good);font-family:var(--mono)}

.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{
  font:500 13.5px var(--sans);padding:7px 13px;border-radius:6px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);color:var(--body);
}
.seg button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.seg.lights button.on[data-v=g]{background:var(--good);border-color:var(--good);color:#fff}
.seg.lights button.on[data-v=a]{background:var(--warn);border-color:var(--warn);color:#fff}
.seg.lights button.on[data-v=r]{background:var(--bad);border-color:var(--bad);color:#fff}

/* ------------------------------------------------------------------ misc */
.hide{display:none !important}
.note{font-size:13.5px;color:var(--muted);line-height:1.55}
.hint{font-size:13px;color:var(--faint);margin:6px 0 0}
.sep{height:1px;background:var(--line);margin:22px 0}
.out{
  font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre-wrap;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;color:var(--body);cursor:pointer;overflow-x:auto;
}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:0 0 5px;font-size:14.5px;line-height:1.5}

@media (max-width:560px){
  .wrap{padding:20px 14px 72px}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dt{padding-top:8px}
  .row2{grid-template-columns:1fr}
  .days{gap:4px}
  .day{min-height:46px;font-size:12px}
}

/* ===========================================================================
   The information devices, ported from the live tool — STRUCTURE ONLY.

   Benjamin, on the first attempt at this: "it feels like you've actually just
   taken elements like colors and things like that straight out of the other
   check-in form and stuck them into this one… I want the neutral version, so
   that we're not doing any design thinking for the sake of aesthetics."

   So: the hierarchy is carried by SIZE and POSITION, not by colour. Nothing
   here has a tinted panel, a gradient or a display weight. Colour appears in
   exactly one place — the strips — because there colour IS the data.
   =========================================================================== */

/* --- the two-box hero: actual AND target, with a verdict ----------------- */
.twobox{display:flex;gap:10px;margin:0 0 10px}
.box{
  flex:1;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 14px;min-width:0;
}
.box .cap{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:8px;
}
.box .fig{
  font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.box .fig small{
  font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.box .vd{
  margin-top:8px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
/* The only signal colour on the hero, and only on the word itself. */
.box .vd.hit{color:var(--good)}
.box .vd.miss{color:var(--bad)}

.subline{
  font-size:13px;color:var(--muted);margin:8px 0 0;
  font-variant-numeric:tabular-nums;
}

/* Plain notes. No coloured fill — a rule on the left is enough to separate
   them from body copy, and it does not shout. */
.flag,.wiwarn{
  border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:0 6px 6px 0;padding:11px 14px;font-size:13.5px;
  color:var(--body);margin:12px 0 0;line-height:1.5;background:var(--surface);
}
.flag{border-left-color:var(--bad)}

/* --- the strips: the whole phase in one glance -------------------------- */
.strips{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.strip{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.strip:last-child{margin-bottom:0}
.strip .sl{width:70px;flex:none;font-size:12.5px;color:var(--muted)}
.strip .cells{display:flex;gap:3px;flex:1;min-width:0}
.strip .cells .c{
  flex:1;height:13px;border-radius:3px;background:var(--line);min-width:0;
}
.strip .cells .c.g{background:var(--good)}
.strip .cells .c.a{background:var(--warn)}
.strip .cells .c.r{background:var(--bad)}
.strip .cells .c.now{outline:1.5px solid var(--faint);outline-offset:1px}
.striphdr{display:flex;gap:8px;margin-bottom:8px}
.striphdr .sl{width:70px;flex:none}
.striphdr .cells{display:flex;gap:3px;flex:1;min-width:0}
.striphdr .cells span{
  flex:1;text-align:center;font-size:10px;color:var(--faint);
  font-family:var(--mono);min-width:0;
}
/* Target is the outcome; the six under the rule are its inputs. */
.strip-target{padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.strip-target .sl{color:var(--ink);font-weight:600}

/* --- the chart ----------------------------------------------------------- */
.chartwrap{position:relative}
.chartip{
  position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;
  padding:6px 9px;border-radius:5px;white-space:nowrap;z-index:5;
}
.chartwrap .hit:hover{fill:var(--ink);fill-opacity:.06}
.chartkey{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;
  font-size:12px;color:var(--muted);
}
.chartkey .k{width:14px;height:2.5px;border-radius:2px;background:var(--ink);margin-left:10px}
.chartkey .k:first-child{margin-left:0}
.chartkey .k-day{opacity:.3}
.chartkey .k-tgt{background:transparent;height:0;border-top:2px dashed var(--faint)}

/* --- "what is this page for?" — the helper the old tool had -------------- */
.howto{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 16px;background:var(--surface)}
.howto-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;background:transparent;border:0;cursor:pointer;
  font:500 14px var(--sans);color:var(--muted);text-align:left;
}
.howto-toggle:hover{color:var(--ink)}
.howto-toggle:focus-visible{outline:2px solid var(--live);outline-offset:-2px;border-radius:var(--radius)}
.howto-chev{transition:transform .18s ease;color:var(--faint)}
.howto.open .howto-chev{transform:rotate(90deg)}
.howto-body{display:none;padding:0 15px 15px;font-size:14.5px;line-height:1.6;color:var(--body)}
.howto.open .howto-body{display:block}
.howto-body p{margin:0 0 9px}
.howto-body p:last-child{margin-bottom:0}
.howto-body .lead{color:var(--ink);font-weight:600}

@media (max-width:560px){
  .twobox{gap:8px}
  .box{padding:14px 11px}
  .box .fig{font-size:22px}
  .box .fig small{font-size:11.5px}
  .strip .sl,.striphdr .sl{width:56px;font-size:11.5px}
}

/* --- flags: the runs worth noticing, ported from renderReport() ---------- */
.flags{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:6px 16px}
.fl{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.5}
.fl:last-child{border-bottom:0}
.fl-i{width:6px;height:6px;border-radius:50%;background:var(--muted);margin-top:8px}
.fl-x .fl-i,.fl-m .fl-i{background:var(--bad)}
.fl-r .fl-i{background:var(--bad)}
.fl-ok .fl-i{background:var(--good)}
/* The client's own explanation, carried under the flag it belongs to. His
   treatment, from .rlnote in the live tool: indented to the flag's text column,
   italic, muted, and pulled up tight so it reads as a sub-line of the flag
   above rather than as another flag. */
.fl-note{
  font-size:14px;line-height:1.5;color:var(--muted);font-style:italic;
  margin:-4px 0 0 16px;padding:0 0 11px;border-bottom:1px solid var(--line-soft);
}
.fl-note:last-child{border-bottom:0;padding-bottom:2px}
/* the flag directly above its own note loses its rule, so the pair reads as one */
.fl:has(+ .fl-note){border-bottom:0;padding-bottom:4px}
/* --- the today box: the one thing this page is for on most days --------- */
/* Prominent through SIZE and SPACE, not through a heavy outline. A 2px black
   border made it shout against a page that is otherwise all hairlines, which
   read as incohesive rather than as important. */
.todaybox{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px 22px;margin:0 0 14px;background:var(--surface);
}
.todaybox .tl{
  font-size:17px;font-weight:600;color:var(--ink);margin:0 0 3px;letter-spacing:-.01em;
}
.todaybox .ts{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.todayrow{display:flex;gap:8px}
.todayrow input{
  flex:1;min-width:0;font-size:20px;font-weight:500;padding:14px 16px;
  font-variant-numeric:tabular-nums;border:1px solid var(--line);background:var(--bg);
}
.todayrow input::placeholder{font-weight:400;color:var(--faint)}
.todayrow button{flex:none;padding:14px 24px;font-size:15px}
.todaydone{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:15px;color:var(--body);
}
.todaydone b{font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.todaydone .re{font-size:13.5px;color:var(--muted);cursor:pointer;text-decoration:underline}

/* --- the top bar on a phone ---------------------------------------------
   375px is the real target: every client uses this on their phone. The bar
   was wrapping onto three lines and eating a third of the first screen. */
@media (max-width:560px){
  .topbar{padding:10px 14px;gap:8px}
  .topbar .brand{font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
  .topbar .who{display:none}            /* they know who they are */
  .themebtn{padding:5px 8px;font-size:9.5px;letter-spacing:.05em;white-space:nowrap}
  .todaybox{padding:16px 14px 18px}
  .todayrow input{font-size:17px;padding:12px 12px}
  .todayrow button{padding:12px 16px;font-size:14px}
  .day{min-height:44px}
  .weeknav .wk{font-size:17px}
}

/* The three Big Three rows must wrap the same way as each other. A long target
   line ("8,000 a day, 10k on non-training days") was pushing only that row's
   buttons onto a second line, so the three read as different components. */
@media (max-width:560px){
  .b3row{flex-direction:column;align-items:stretch;gap:10px}
  .b3row .seg{justify-content:flex-start}
  .lightrow{gap:8px}
}

/* The phase theme, sitting above the week's box on the coach side so the week
   is written in service of something rather than in isolation. */
.phasebar{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start;
  padding:12px 14px;margin:0 0 16px;border:1px solid var(--line);
  border-radius:6px;background:var(--sunk);
}
.phasebar .pl{
  grid-column:1;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
}
.phasebar .pv{grid-column:1;font-size:14.5px;line-height:1.45;color:var(--body)}
.phasebar .pp{grid-column:1;font-size:13px;color:var(--muted)}
.phasebar button{grid-column:2;grid-row:1 / span 3;align-self:center}

.banner{padding:12px 15px;border-radius:var(--radius);margin:0 0 14px;font-size:14.5px;line-height:1.5}
.banner.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}
.banner.bad{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);cursor:pointer}