/* ==========================================================================
   PT with PUBUDU — client app
   ---------------------------------------------------------------------------
   The trainee's surface. It used to be true black; the client asked for light,
   so this is a rebuild rather than a repaint: warm chalk ground, white cards,
   one ink, and gold used as *authority* rather than as glow — a hairline, a
   filled cell, a rule under a heading. Dark mode is its own palette (warm
   near-black, not an inverted white) and both are held by the same tokens, so
   no component branches on theme.

   Signature: THE BLOCK. Twelve cells on a baseline — done, current, remaining —
   with checkpoint diamonds under weeks 4, 8 and 12. It carries real
   information (the programme genuinely is a twelve-week block re-assessed at
   those three points) and it is on every screen as the constant orientation
   device.

   Contrast note: `--gold-dp` (#8A6410) is the only gold allowed to carry text
   on white — 5.6:1 on the card ground. #E4B43C is decorative: fills, rules,
   cell bodies, never type on a light ground.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --f-disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-s:8px; --r:12px; --r-l:18px; --r-pill:999px;
  --tap:44px;
  --sp:clamp(1.05rem, .45rem + 1.7vw, 1.6rem);   /* screen gutter */
  --shadow-1:0 1px 2px rgba(21,18,16,.04), 0 2px 8px rgba(21,18,16,.04);
  --shadow-2:0 1px 2px rgba(21,18,16,.05), 0 12px 30px rgba(21,18,16,.08);
  --shadow-3:0 2px 6px rgba(21,18,16,.06), 0 30px 64px rgba(21,18,16,.11);
  --shadow-gold:0 1px 2px rgba(138,100,16,.18), 0 8px 20px rgba(138,100,16,.16);
  --rail-w:17rem;
  --tabs-h:calc(3.7rem + env(safe-area-inset-bottom));
}

html[data-theme='light'] {
  /* De-yellowed. A warm cream ground plus cream cards plus gold was three
     yellows competing; with a near-white ground the gold is the only saturated
     thing on screen, which is what makes it read as an accent. */
  --ground:#F7F5F0;
  --ground-2:#F0EDE5;
  --card:#FFFFFF;
  --card-2:#FBFAF6;
  --card-3:#F4F1E9;
  --ink:#151210;
  --ink-2:#5C554A;
  /* 4.58:1 on white. The old value was 3.2:1 — under the 4.5 that small
     text needs, and these carry real information: section groups, ids,
     dates and the helper line under an alert. */
  --ink-3:#7C7564;
  --line:#E9E4DA;
  --line-2:#F2EFE8;

  --gold:#E4B43C;          /* decorative only on light */
  --gold-hi:#F8E588;
  --gold-dp:#8A6410;       /* text-safe */
  --gold-ink:#5F4409;      /* text on a gold fill is dark ink, not this */
  --gold-wash:#FBF4E1;
  --gold-line:#E8D9A8;
  --on-gold:#231A05;

  --ok:#166E45;   --ok-wash:#E4F2EA;   --ok-line:#BFDECF;
  --warn:#8A5B06; --warn-wash:#FBF0DC; --warn-line:#EBD5A8;
  --bad:#A63426;  --bad-wash:#FBE9E6;  --bad-line:#EEC7C0;
  --info:#1F5473; --info-wash:#E5F0F6; --info-line:#BBD6E4;

  --glow:radial-gradient(46rem 30rem at 50% -18%, rgba(228,180,60,.13), transparent 62%);
  --cell-empty:#EAE4D6;
  --scrim:rgba(28,22,10,.42);
}

html[data-theme='dark'] {
  /* The client asked for a black background with white or gold type. The
     ground is black; the cards keep a little warmth so the screen reads as
     considered rather than as an unlit rectangle. */
  --ground:#0A0908;
  --ground-2:#131109;
  --card:#1B1811;
  --card-2:#221E15;
  --card-3:#2A251A;
  --ink:#F5F1E6;
  --ink-2:#ADA595;
  --ink-3:#8E8778;
  --line:#302A1E;
  --line-2:#241F17;

  --gold:#E4B43C;
  --gold-hi:#F8E588;
  --gold-dp:#EFC65B;       /* text-safe gold ON DARK is the bright one */
  --gold-ink:#F8E588;
  --gold-wash:rgba(228,180,60,.11);
  --gold-line:rgba(228,180,60,.34);
  --on-gold:#1A1305;

  --ok:#63CE93;   --ok-wash:rgba(99,206,147,.12);   --ok-line:rgba(99,206,147,.30);
  --warn:#E7B053; --warn-wash:rgba(231,176,83,.12); --warn-line:rgba(231,176,83,.30);
  --bad:#EE8375;  --bad-wash:rgba(238,131,117,.12); --bad-line:rgba(238,131,117,.30);
  --info:#78BEE2; --info-wash:rgba(120,190,226,.12);--info-line:rgba(120,190,226,.30);

  --glow:radial-gradient(46rem 30rem at 50% -18%, rgba(228,180,60,.10), transparent 62%);
  --cell-empty:#2A2519;
  --scrim:rgba(0,0,0,.66);
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -12px rgba(0,0,0,.8);
  --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 22px 44px -26px rgba(0,0,0,.9);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing:border-box; }
html {
  font-size:clamp(15px, 0.4vw + 13px, 20px);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body {
  margin:0;
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.68;
  color:var(--ink);
  background-color:var(--ground);
  background-image:var(--glow);
  background-attachment:fixed;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--gold-dp); }
img { max-width:100%; }
/* Inline icons default to text size; charts and the block opt out by class. */
svg:not(.chart):not(.spark) { width:1.05rem; height:1.05rem; flex:0 0 auto; vertical-align:-.16em; }
:focus-visible { outline:3px solid var(--gold-dp); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.skip {
  position:absolute; left:.5rem; top:-4rem; z-index:100;
  background:var(--ink); color:var(--card); padding:.6rem .9rem;
  border-radius:var(--r-s); font-weight:600; text-decoration:none;
}
.skip:focus { top:.5rem; }
.vh { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------------------- boot / noscript -- */
.boot, .noscript {
  max-width:26rem; margin:0 auto; padding:4rem var(--sp); text-align:center;
}
.noscript { max-width:32rem; }
.boot-mark {
  width:3rem; height:3rem; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 32% 26%, var(--gold-hi), var(--gold) 48%, #B47F22);
  color:#1A1305; font-family:var(--f-disp); font-weight:800; font-size:1.15rem;
  letter-spacing:.02em;
}
.boot-t { color:var(--ink-2); font-size:.9rem; }
.noscript h1 { font-family:var(--f-disp); font-size:2rem; text-transform:uppercase; margin:.4rem 0 .8rem; }
.noscript p { color:var(--ink-2); font-size:.92rem; text-align:left; }
.noscript-c { text-align:center!important; font-size:.85rem!important; }

/* ----------------------------------------------------------------- frame -- */
.frame { display:block; min-height:100vh; min-height:100dvh; }
.col {
  max-width:34rem; margin:0 auto; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
  background:var(--ground);
  box-shadow:0 0 0 1px var(--line-2);
}
.view { flex:1; padding:calc(var(--sp) * 1.25) var(--sp) calc(var(--tabs-h) + 2.2rem); }
.view > * + .card { margin-top:1rem; }

/* demo ribbon — unmistakable, and it never covers a control */
.demo-flag {
  position:sticky; top:0; z-index:45;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:#14120D; color:var(--gold);
  font-family:var(--f-mono); font-size:0.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; padding:.42rem .8rem; text-align:center;
  border-bottom:1px solid rgba(228,180,60,.28);
}
.demo-flag b { font-weight:700; }

/* ---------------------------------------------------------------- header -- */
.hd {
  position:sticky; top:0; z-index:40;
  min-height:3.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem var(--sp);
  /* No live blur on a scroll-pinned bar. A desktop CPU throttle barely shows
     it, but on a real mid-range Android a backdrop-filter behind a fixed
     element is repainted every frame of every scroll. At this opacity the
     blur was not doing visible work anyway. */
  background:var(--ground);
  border-bottom:1px solid var(--line-2);
}
.demo-flag + .hd { top:1.65rem; }
.brand { display:flex; align-items:center; gap:.55rem; min-width:0; }
.mark {
  width:2.05rem; height:2.05rem; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center;
  background:#14120D; color:var(--gold);
  font-family:var(--f-disp); font-weight:700; font-size:.78rem; letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px rgba(228,180,60,.55), 0 1px 3px rgba(20,18,13,.25);
}
.brand-t { min-width:0; }
.brand-n {
  display:block; font-family:var(--f-disp); font-weight:700; font-size:1.02rem;
  line-height:.95; text-transform:uppercase; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-n em { font-style:normal; color:var(--gold-dp); }
.brand-s {
  display:block; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hd-me {
  flex:0 0 auto; background:none; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.2rem .55rem .2rem .2rem; display:flex; align-items:center; gap:.4rem;
  cursor:pointer; min-height:var(--tap); color:var(--ink);
}
.hd-me:hover { border-color:var(--gold-line); background:var(--gold-wash); }
.hd-me .avatar { width:1.8rem; height:1.8rem; }
.hd-me span {
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}
.avatar { border-radius:50%; object-fit:cover; background:var(--card-3); display:block; }

/* ------------------------------------------------------------ bottom nav -- */
.tabs {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:34rem; z-index:40;
  display:flex;
  background:var(--card);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs button {
  flex:1 1 0; min-width:0; background:none; border:0; cursor:pointer;
  padding:.45rem .15rem .5rem; min-height:var(--tap);
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  color:var(--ink-3); position:relative;
}
.tabs button svg { width:1.15rem; height:1.15rem; stroke-width:1.7; }
.tabs button .lb {
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.tabs button[aria-current='page'] { color:var(--gold-dp); }
.tabs button[aria-current='page']::before {
  content:''; position:absolute; top:-1px; left:22%; right:22%; height:2px;
  background:var(--gold-dp); border-radius:0 0 2px 2px;
}
.tabs button .dot {
  position:absolute; top:.4rem; right:calc(50% - 1.05rem);
  width:.42rem; height:.42rem; border-radius:50%; background:var(--bad);
  box-shadow:0 0 0 2px var(--card);
}
@media (max-width:340px) { .tabs button .lb { font-size:.7rem; letter-spacing:0; } }

.rail {
  display:none; flex-direction:column; gap:1rem;
  position:sticky; top:0; align-self:start;
  height:100vh; height:100dvh; overflow-y:auto;
  padding:1.2rem 1rem;
  background:var(--card);
  border-right:1px solid var(--line);
}
.rail-brand { display:flex; align-items:center; gap:.6rem; }
.rail-nav { display:flex; flex-direction:column; gap:.1rem; }
.rail-nav button {
  display:flex; align-items:center; gap:.65rem; width:100%;
  background:none; border:0; border-radius:var(--r-s); cursor:pointer;
  padding:.55rem .6rem; min-height:var(--tap); text-align:left;
  color:var(--ink-2); font-size:.88rem; font-weight:500; position:relative;
}
.rail-nav button svg { width:1.1rem; height:1.1rem; flex:0 0 auto; stroke-width:1.7; }
.rail-nav button:hover { background:var(--card-2); color:var(--ink); }
.rail-nav button[aria-current='page'] {
  background:var(--gold-wash); color:var(--gold-dp); font-weight:600;
  box-shadow:inset 2px 0 0 var(--gold-dp);
}
.rail-nav button .dot { margin-left:auto; width:.45rem; height:.45rem; border-radius:50%; background:var(--bad); }
.rail-me {
  margin-top:auto; display:flex; align-items:center; gap:.6rem; width:100%;
  background:none; border:1px solid var(--line); border-radius:var(--r);
  padding:.5rem .6rem; cursor:pointer; text-align:left; color:var(--ink); min-height:var(--tap);
}
.rail-me:hover { border-color:var(--gold-line); background:var(--gold-wash); }
.rail-me .avatar { width:2rem; height:2rem; flex:0 0 auto; }
.rail-me b { display:block; font-size:.84rem; font-weight:600; line-height:1.2; }
.rail-me span { display:block; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }

/* ------------------------------------------------------- desktop re-lay --
   Not "the phone, wider". At >=62rem the tab bar becomes a real sidebar: the
   whole navigation, the identity and the block strip are permanently visible,
   and the content column keeps its measure instead of stretching. */
@media (min-width:62rem) {
  .frame { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); }
  /* ⚠️ A GATE SCREEN HAS NO RAIL TO SIT BESIDE.
     Sign-in, register, the waiting room and the lock screen each render as the
     ONLY child of .frame, so the two-column grid above was dropping them into
     the rail's column and squeezing a 400px card into ~222px. It had been
     doing that on every desktop sign-in. `:has` is already load-bearing in
     this file (`body:has(.demo-flag)` below), so this costs nothing new. */
  .frame:has(> .signin) { display:block; }
  .col { max-width:none; box-shadow:none; background:transparent; }
  .view { padding:1.4rem 2rem 3rem; max-width:62rem; width:100%; margin:0 auto; }
  .tabs { display:none; }
  .hd { display:none; }
  .demo-flag { position:fixed; top:0; left:0; right:0; }
  body:has(.demo-flag) .frame { padding-top:1.65rem; }
  .rail { display:flex; }
}
@media (min-width:105rem) { .view { max-width:70rem; } }

/* ============================== THE BLOCK ================================ */
.block {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:.7rem .8rem .6rem; box-shadow:var(--shadow-1);
}
.block-hd { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.block-k {
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.block-w { font-family:var(--f-mono); font-size:0.72rem; color:var(--ink-2); letter-spacing:.04em; }
.block-w b { font-family:var(--f-disp); font-size:1.15rem; font-weight:700; color:var(--gold-dp);
  letter-spacing:.02em; }
.block-cells {
  list-style:none; margin:.5rem 0 0; padding:0 0 .55rem;
  display:flex; gap:3px; position:relative;
}
.block-cells::after {
  content:''; position:absolute; left:0; right:0; bottom:.4rem; height:1px; background:var(--line);
}
.block-cells li {
  flex:1 1 0; height:1.05rem; border-radius:3px 3px 1px 1px; position:relative;
  background:var(--cell-empty);
}
.block-cells li.done { background:linear-gradient(180deg, var(--gold) 0%, #B47F22 100%); }
.block-cells li.now {
  background:linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 100%);
  box-shadow:0 0 0 1.5px var(--gold-dp), 0 3px 10px -3px rgba(228,180,60,.8);
  z-index:1;
}
.block-cells li.now::before {
  content:''; position:absolute; left:50%; top:-.34rem; transform:translateX(-50%);
  border-left:.24rem solid transparent; border-right:.24rem solid transparent;
  border-top:.26rem solid var(--gold-dp);
}
.block-cells li.check::after {
  content:''; position:absolute; left:50%; bottom:-.62rem; width:.3rem; height:.3rem;
  margin-left:-.15rem; transform:rotate(45deg);
  background:var(--card); border:1.5px solid var(--ink-3);
}
.block-cells li.check.done::after, .block-cells li.check.now::after {
  background:var(--gold-dp); border-color:var(--gold-dp);
}
.block-ft {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  margin-top:.5rem;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3);
}
.block-ft b { color:var(--gold-dp); font-weight:500; }
.block.wide .block-cells li { height:1.3rem; }

/* ------------------------------------------------------------------ type -- */
.eyebrow {
  display:block; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold-dp); font-weight:500;
}
.eyebrow.mut { color:var(--ink-3); }
.greet {
  font-family:var(--f-disp); font-weight:800; font-size:clamp(2rem,1.4rem + 2.6vw,2.7rem);
  line-height:.9; text-transform:uppercase; letter-spacing:.005em; margin:.25rem 0 0;
}
.screen-t {
  font-family:var(--f-disp); font-weight:700; font-size:clamp(1.65rem,1.2rem + 2vw,2.2rem);
  line-height:.94; text-transform:uppercase; letter-spacing:.015em; margin:.2rem 0 .1rem;
}
.sub { color:var(--ink-2); font-size:.85rem; margin:.25rem 0 0; }
.muted { color:var(--ink-2); font-size:.83rem; }
.dim { color:var(--ink-3); }
.mono { font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.head-rule { height:2px; background:var(--gold-dp); width:2.4rem; margin:.55rem 0 .9rem; border-radius:2px; }

/* ----------------------------------------------------------------- cards -- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.25rem 1.3rem; margin-bottom:1rem; box-shadow:var(--shadow-1);
}
.card.flat { box-shadow:none; }
.card.feature {
  border-color:var(--gold-line);
  background:linear-gradient(168deg, var(--gold-wash) 0%, var(--card) 58%);
  box-shadow:var(--shadow-2);
  position:relative; overflow:hidden;
}
.card.feature::before {
  content:''; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg, var(--gold-dp), var(--gold) 55%, transparent);
}
.card.quiet { background:var(--card-2); box-shadow:none; }
.card-hd {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.85rem;
  min-height:1.7rem;
}
.card-t {
  font-family:var(--f-disp); font-weight:700; font-size:1.1rem; line-height:1;
  text-transform:uppercase; letter-spacing:.028em;
}
.card-lnk {
  background:none; border:0; cursor:pointer; padding:.35rem 0; min-height:var(--tap);
  display:inline-flex; align-items:center; gap:.25rem;
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-dp); font-weight:500; white-space:nowrap;
}
.card-lnk:hover { text-decoration:underline; }
.card-lnk svg { width:.9rem; height:.9rem; }

/* the one big number per screen */
.big {
  font-family:var(--f-disp); font-weight:800; font-size:clamp(3rem,2rem + 5vw,4rem);
  line-height:.84; letter-spacing:.005em; font-variant-numeric:tabular-nums;
  color:var(--ink); display:inline-block;
}
.big.gold { color:var(--gold-dp); }
.big .unit {
  font-family:var(--f-body); font-size:.9rem; font-weight:600; color:var(--ink-2);
  letter-spacing:0; margin-left:.25rem;
}

/* ------------------------------------------------------------------ tags -- */
.tag {
  display:inline-block; font-family:var(--f-mono); font-size:0.72rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; padding:.2rem .45rem;
  border-radius:var(--r-s); border:1px solid var(--line); background:var(--card-3);
  color:var(--ink-2); white-space:nowrap; vertical-align:middle;
}
.tag.ok   { background:var(--ok-wash);   color:var(--ok);   border-color:var(--ok-line); }
.tag.warn { background:var(--warn-wash); color:var(--warn); border-color:var(--warn-line); }
.tag.bad  { background:var(--bad-wash);  color:var(--bad);  border-color:var(--bad-line); }
.tag.info { background:var(--info-wash); color:var(--info); border-color:var(--info-line); }
.tag.gold { background:var(--gold-wash); color:var(--gold-dp); border-color:var(--gold-line); }

/* ------------------------------------------------------------------ rows -- */
.line {
  display:flex; align-items:baseline; justify-content:space-between; gap:.7rem;
  padding:.7rem 0; border-bottom:1px solid var(--line-2); font-size:.88rem;
}
.line:last-child { border-bottom:0; }
.line .l { color:var(--ink-2); min-width:0; }
.line .l b { color:var(--ink); font-weight:600; }
.line .l small { display:block; font-size:0.72rem; color:var(--ink-3); line-height:1.35; }
.line .r { font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.line .r b { color:var(--ink); font-weight:600; }
.line.total { border-top:1.5px solid var(--ink); border-bottom:0; margin-top:.3rem; padding-top:.5rem; }
.line.total .l { color:var(--ink); font-weight:600; }

.ex { display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem;
  padding:.5rem 0; border-bottom:1px solid var(--line-2); }
.ex:last-of-type { border-bottom:0; }
.ex .n { font-size:.88rem; font-weight:600; line-height:1.25; }
.ex .cue { font-size:.72rem; color:var(--ink-3); margin-top:.1rem; line-height:1.35; }
.ex .note { font-size:.72rem; color:var(--gold-dp); margin-top:.12rem; }
.ex .sr {
  font-family:var(--f-mono); font-size:.92rem; font-weight:600; color:var(--gold-dp);
  white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums;
}
.ex .sr small { display:block; font-size:0.72rem; font-weight:400; color:var(--ink-3); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:var(--tap); padding:.6rem 1.1rem; border-radius:var(--r-s);
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-size:.86rem; font-weight:600; cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:background .16s, border-color .16s, color .16s, box-shadow .18s, transform .12s;
}
.btn:active { transform:translateY(1px); }
.btn:hover { border-color:var(--gold-line); background:var(--gold-wash); color:var(--gold-dp); }
.btn.primary {
  background:linear-gradient(178deg, #F0CE62 0%, var(--gold) 55%, #D3A02B 100%);
  border-color:#B98C21; color:var(--on-gold); font-weight:700;
  box-shadow:var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.primary:hover { background:linear-gradient(178deg, #F5D97E 0%, #E9BE4C 55%, #DCAA33 100%);
  color:var(--on-gold); }
.btn.danger { color:var(--bad); border-color:var(--bad-line); background:var(--bad-wash); }
.btn.danger:hover { background:var(--bad); color:#fff; border-color:var(--bad); }
.btn.ghost { background:transparent; }
.btn.wide { width:100%; }
.btn.sm { min-height:var(--tap); padding:.35rem .7rem; font-size:.74rem; font-weight:500; }
.btn[disabled], .btn[aria-disabled='true'] { opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover { background:var(--card-2); border-color:var(--line); color:var(--ink); }
.btn svg { width:1rem; height:1rem; stroke-width:1.8; }
.btn-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.btn-row > .btn { flex:1 1 8rem; }

/* --------------------------------------------------------- read-only bar --
   The trainer owns the prescription, so the screens that carry it SAY so
   rather than silently ignoring a tap. */
.locked {
  display:flex; align-items:flex-start; gap:.55rem;
  background:var(--card-2); border:1px dashed var(--line);
  border-left:3px solid var(--gold-dp);
  border-radius:var(--r-s); padding:.55rem .7rem; margin-bottom:.7rem;
  font-size:.78rem; color:var(--ink-2); line-height:1.45;
}
.locked svg { width:1rem; height:1rem; flex:0 0 auto; margin-top:.15rem; color:var(--gold-dp); stroke-width:1.8; }
.locked b { color:var(--ink); }

/* ---------------------------------------------------------------- meters -- */
.meter { height:.4rem; border-radius:var(--r-pill); background:var(--card-3); overflow:hidden; }
.meter i { display:block; height:100%; border-radius:var(--r-pill); background:var(--gold); }
.meter i.ok { background:var(--ok); } .meter i.warn { background:var(--warn); } .meter i.bad { background:var(--bad); }

.macro { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.macro > div { min-width:0; }
.macro .v { font-family:var(--f-mono); font-size:1.05rem; font-weight:600; font-variant-numeric:tabular-nums; }
.macro .v small { font-size:0.72rem; color:var(--ink-3); font-weight:400; }
.macro .k { font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.25rem; }

/* ---------------------------------------------------------------- fields -- */
.field { margin-bottom:.75rem; }
.field > label, .lbl {
  display:block; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.28rem; font-weight:500;
}
.input, select.input, textarea.input {
  width:100%; min-height:var(--tap); padding:.5rem .65rem;
  font-size:16px;                       /* iOS will not zoom the page on focus */
  border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--card); color:var(--ink); appearance:none;
}
textarea.input { min-height:5rem; resize:vertical; line-height:1.5; }
select.input {
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 1rem) 1.15rem, calc(100% - .68rem) 1.15rem;
  background-size:.32rem .32rem,.32rem .32rem; background-repeat:no-repeat; padding-right:2rem;
}
.input:focus { border-color:var(--gold-dp); }
.hint { font-size:.72rem; color:var(--ink-3); margin-top:.25rem; line-height:1.4; }
.err {
  background:var(--bad-wash); border:1px solid var(--bad-line); color:var(--bad);
  border-radius:var(--r-s); padding:.5rem .65rem; font-size:.8rem; margin-bottom:.7rem;
}
.ok-note {
  background:var(--ok-wash); border:1px solid var(--ok-line); color:var(--ok);
  border-radius:var(--r-s); padding:.5rem .65rem; font-size:.8rem; margin-bottom:.7rem;
}

/* choice chips — thumb-sized, one row, no dropdowns mid-set */
.chips { display:flex; gap:.35rem; margin:.3rem 0 .1rem; }
.chips.wrap { flex-wrap:wrap; }
.chip {
  flex:1 1 0; min-width:0; min-height:3rem; padding:.3rem .25rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card);
  cursor:pointer; color:var(--ink); font-size:.82rem; line-height:1.15; text-align:center;
}
.chip small { font-size:0.72rem; color:var(--ink-3); }
.chip[aria-pressed='true'] {
  background:linear-gradient(168deg,var(--gold-hi),var(--gold)); border-color:#B47F22;
  color:var(--on-gold); font-weight:700;
}
.chip[aria-pressed='true'] small { color:var(--on-gold); opacity:.75; }
.chip[disabled] { opacity:.4; cursor:not-allowed; text-decoration:line-through; }

.slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; }
.slots .chip { flex:none; min-height:var(--tap); font-family:var(--f-mono); font-size:.78rem; }
.days { display:flex; gap:.35rem; overflow-x:auto; padding-bottom:.2rem; -webkit-overflow-scrolling:touch; }
.days .chip { flex:0 0 3.6rem; }
.days .chip .d { font-family:var(--f-disp); font-weight:700; font-size:1.2rem; line-height:1; }
.days .chip .w { font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; }

/* ----------------------------------------------------------------- misc -- */
.empty {
  border:1px dashed var(--line); border-radius:var(--r); padding:1.5rem 1rem;
  text-align:center; color:var(--ink-3); font-size:.84rem; background:var(--card-2);
}
.empty b { display:block; color:var(--ink); font-size:.95rem; margin-bottom:.25rem; font-weight:600; }
.stack > * + * { margin-top:.7rem; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.7rem; }
.spark { display:block; width:100%; height:auto; }
.pill-row { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }

/* ---------------------------------------------------------------- photos -- */
.allow {
  display:flex; align-items:center; gap:.75rem;
}
.allow-dots { display:flex; gap:.28rem; }
.allow-dots i {
  width:1.5rem; height:1.5rem; border-radius:var(--r-s); border:1.5px solid var(--gold-line);
  background:var(--card-2); display:block;
}
.allow-dots i.used { background:linear-gradient(168deg,var(--gold),#B47F22); border-color:#B47F22; }
.photo { display:block; width:100%; }
.shots { display:grid; grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr)); gap:.5rem; }
.shot {
  position:relative; border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden;
  background:var(--card-2); padding:0; cursor:pointer; display:block; width:100%; text-align:left;
}
.shot img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.shot figcaption {
  padding:.3rem .4rem; font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; gap:.3rem;
}
.shot[aria-pressed='true'] { border-color:var(--gold-dp); box-shadow:0 0 0 2px var(--gold-dp); }
.shot .by {
  position:absolute; top:.3rem; left:.3rem; background:var(--ink); color:var(--card);
  font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.1rem .3rem; border-radius:3px; opacity:.88;
}
.shot .pick {
  position:absolute; top:.35rem; right:.35rem; width:1.25rem; height:1.25rem; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85); background:rgba(20,16,6,.18); color:#fff;
  display:grid; place-items:center; font-size:0.72rem; font-weight:700; backdrop-filter:blur(2px);
}
.shot[aria-pressed='true'] .pick { background:var(--gold-dp); border-color:var(--card); }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.compare figure { margin:0; }
.compare img { width:100%; border-radius:var(--r-s); border:1px solid var(--line); display:block;
  aspect-ratio:3/4; object-fit:cover; }
.compare figcaption { font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.3rem; text-align:center; }

/* ----------------------------------------------------------------- modal -- */
.modal-scrim {
  position:fixed; inset:0; z-index:70; background:var(--scrim);
  display:grid; place-items:center; padding:1rem;
  backdrop-filter:blur(2px);
}
.modal {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.1rem; max-width:24rem; width:100%; box-shadow:var(--shadow-2);
}
.modal p { margin:0; font-size:.92rem; }
.modal .row { display:flex; gap:.5rem; }
.lightbox { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.9);
  display:grid; place-items:center; padding:1rem; cursor:zoom-out; }
.lightbox img { max-width:100%; max-height:86vh; border-radius:var(--r); }

/* ----------------------------------------------------------------- toast -- */
#toast {
  position:fixed; left:50%; bottom:calc(var(--tabs-h) + .8rem); transform:translateX(-50%) translateY(.6rem);
  z-index:90; max-width:min(28rem,90vw);
  background:var(--ink); color:var(--ground); padding:.6rem 1rem; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:600; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  box-shadow:var(--shadow-2);
}
#toast.on { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.bad { background:var(--bad); color:#fff; }
#toast.ok { background:var(--ok); color:#fff; }
@media (min-width:62rem) { #toast { bottom:1.4rem; } }

/* ---------------------------------------------------------------- signin -- */
/* Same rule as the console: on a phone this screen fills the phone. The
   centred card appears only where there is room for it to look intentional. */
/* ⚠️ CENTRED WITH `margin:auto`, NOT `justify-content:center`.
   A flex column that centres with `justify-content` overflows in BOTH
   directions once its content is taller than the viewport, and the overflow
   above the start edge cannot be scrolled to — the top of the card is simply
   unreachable. `margin:auto` on the item centres it exactly the same way when
   there is room, and degrades to normal top-aligned scrolling when there is
   not. The lock screen is the longest of these cards and is what exposed it;
   the waiting room and a validation-heavy register form have the same shape. */
.signin { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  padding:clamp(1.1rem,5vw,1.6rem); }
.signin-card { width:100%; margin-block:auto; }
@media (min-width:40rem) {
  .signin { align-items:center; padding:2rem; }
  .signin-card { max-width:25rem; border:1px solid var(--line); border-radius:var(--r);
    padding:2rem 1.8rem; background:var(--surf); box-shadow:var(--shadow-2); }
}

/* An inline link in a hint is still a link someone has to hit with a thumb.
   Same treatment as `.built a`: 44px of real height, inline-flex so the
   padding centres on the text rather than stretching the line box. */
.signin .hint a, .signin .card p a { display:inline-flex; align-items:center;
  min-height:44px; padding:0 .2rem; text-underline-offset:3px; }
.signin .mark { width:3.2rem; height:3.2rem; font-size:1.2rem; margin-bottom:.9rem; }
.signin h1 { font-family:var(--f-disp); font-weight:800; font-size:2.3rem; line-height:.92;
  text-transform:uppercase; margin:0 0 .3rem; }
.signin .tagline { font-family:var(--f-mono); font-size:0.72rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 1.2rem; }


/* ---------------------------------------------------------------- charts --
   Colour is carried by `color` on the svg root so every child can say
   `currentColor` and the print stylesheet can re-point the lot at ink. */
.chart { display:block; width:100%; height:auto; overflow:visible; color:var(--gold-dp); }
.chart.tone-ok { color:var(--ok); }
.chart.tone-warn { color:var(--warn); }
.chart.tone-flat { color:var(--gold-dp); }
.chart-grid { stroke:var(--line-2); stroke-width:1; }
.chart-axis {
  fill:var(--ink-3); font-family:var(--f-mono); font-size:8.5px;
  letter-spacing:.02em;
}
.chart-line { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.chart-dot { fill:var(--card); stroke:currentColor; stroke-width:1.8; }
.chart-dot.last { fill:currentColor; }
.chart-target { stroke:var(--gold-dp); stroke-width:1.3; stroke-dasharray:4 3; opacity:.85; }
.chart-target-t { fill:var(--gold-dp); font-family:var(--f-mono); font-size:8.5px; }

/* band-position scale — where in the clinical range this value sits */
.band { margin-top:.4rem; }
.band-track { display:flex; height:.5rem; border-radius:var(--r-pill); overflow:visible;
  position:relative; background:var(--card-3); }
.band-seg { display:block; height:100%; }
.band-seg:first-child { border-radius:var(--r-pill) 0 0 var(--r-pill); }
.band-seg:last-child { border-radius:0 var(--r-pill) var(--r-pill) 0; }
.band-seg.tone-info { background:var(--info-line); }
.band-seg.tone-ok   { background:var(--ok-line); }
.band-seg.tone-warn { background:var(--warn-line); }
.band-seg.tone-bad  { background:var(--bad-line); }
.band-pin {
  position:absolute; top:-.22rem; width:.24rem; height:.94rem; margin-left:-.12rem;
  border-radius:2px; background:var(--ink); box-shadow:0 0 0 2px var(--card);
}
.band-ends { display:flex; justify-content:space-between; font-family:var(--f-mono);
  font-size:0.72rem; color:var(--ink-3); margin-top:.2rem; }

/* ----------------------------------------------------------------- print -- */
@media print {
  html { font-size:11.5pt; }
  html[data-theme='dark'] { color-scheme:light; }
  body {
    background:#fff!important; background-image:none!important; color:#111!important;
  }
  .tabs, .rail, .hd, .demo-flag, #toast, .skip, .card-lnk, .btn, .modal-scrim, .lightbox { display:none!important; }
  .frame { display:block!important; padding:0!important; }
  .col { max-width:100%!important; box-shadow:none!important; background:#fff!important; }
  .view { padding:0!important; max-width:100%!important; }
  .card, .block {
    background:#fff!important; border:1px solid #bbb!important; box-shadow:none!important;
    break-inside:avoid; page-break-inside:avoid; margin-bottom:.5rem;
  }
  .card.feature { background:#fff!important; }
  .card.feature::before { display:none; }
  .greet, .screen-t, .card-t, .big, .line .r b, .ex .n { color:#111!important; }
  .eyebrow, .ex .sr, .big.gold, .block-w b, .block-ft b { color:#7A5810!important; }
  .muted, .dim, .line .l, .ex .cue, .hint, .block-k, .block-ft { color:#444!important; }
  .tag { border:1px solid #999!important; color:#333!important; background:#fff!important; }
  .block-cells li { background:#e6e6e6!important; }
  .block-cells li.done { background:#B08A2A!important; }
  .block-cells li.now { background:#7A5810!important; box-shadow:none!important; }
  .locked { border:1px solid #bbb!important; background:#f6f6f6!important; color:#333!important; }
  a { color:#111!important; text-decoration:underline; }
  .chart, .chart.tone-ok, .chart.tone-warn, .chart.tone-flat { color:#5A4208!important; }
  .chart-grid { stroke:#ddd!important; }
  .chart-axis { fill:#555!important; }
  .chart-dot { fill:#fff!important; }
  .band-pin { background:#111!important; box-shadow:0 0 0 2px #fff!important; }
}

/* -- the builder's mark ------------------------------------------------------
   Sign-in, register, pending and profile all end on this line. It is a literal,
   not tenant data: re-skinning for another trainer changes their branding, not
   who built the software. --gold-dp is the only gold that carries text in
   either theme, and the anchor is 44px tall because it is a real tap target. */
.built{ margin:.4rem 0 0; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.06em; color:var(--ink-3); text-align:center; }
.built a{ display:inline-flex; align-items:center; min-height:44px;
  padding:0 .45rem; color:var(--gold-dp); text-decoration:none;
  text-underline-offset:3px; }
.built a:hover, .built a:focus-visible{ text-decoration:underline; }
@media print{ .built{ display:none; } }