/* ============================================================
   Reps — one theme, Leen's.
   Brand sampled from Leen's own GAT Study Plan: cyan #00B0F8, navy #180878,
   red #F82030. There is no light mode and no dark mode; the product has a
   single identity, and it is the course owner's.
   ============================================================ */
:root{
  --bg:#080C2C; --surface:#101745; --raise:#161F58; --sunken:#060920;
  --line:#233070; --line-soft:#1A2258;
  /* --faint carries almost every piece of small print in the app and used
     to sit at 4.26:1 on a card, just under AA. #828FCB clears 4.5 on every
     surface the app paints and stays clearly dimmer than --muted. */
  --text:#EEF2FF; --muted:#9FADE0; --faint:#828FCB;

  --gold:#00B0F8; --gold-ink:#04122E; --gold-soft:#10285C; --gold-dim:#2A6FA8;
  --mint:#35D9A8; --mint-soft:#0A2C2C;
  /* Leen's red is the fill colour and stays exactly as they use it. As
     text on a dark card it only reaches 4.26:1, so red *words* use a
     lighter ink and red *blocks* keep the brand value. */
  --red:#F82030; --red-ink:#FF6B75; --red-soft:#3A1030; --red-deep:#2A0207;
  --blue:#7FB6F8; --blue-soft:#13214F;
  --navy:#180878;

  --cta-bg:var(--gold); --cta-ink:var(--gold-ink);
  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 14px 38px rgba(2,5,28,.62);

  --ff:"Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fd:"Instrument Serif", Georgia, serif;
  --fm:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  --rail:238px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--ff); font-size:16px; line-height:1.6; font-weight:500;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
h1,h2,h3{margin:0;font-weight:700;line-height:1.2;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:1.75rem} h2{font-size:1.2rem} h3{font-size:1rem}
p{margin:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.serif{font-family:var(--fd);font-weight:400;letter-spacing:-.01em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:560px;margin-inline:auto;padding:20px 18px 10px}
.stack{display:flex;flex-direction:column;gap:16px}
/* A back button is not a full-width control. A column flex stretches every
   child by default, and a small button dropped straight into one came out
   the width of the page. */
.stack > .btn.sm{align-self:flex-start}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.tiny{font-size:.78rem;line-height:1.5} .small{font-size:.9rem}
.eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

/* ---------- motion ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes drawBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
.enter>*{animation:fadeUp .44s var(--ease) both}
.enter>*:nth-child(1){animation-delay:.02s}
.enter>*:nth-child(2){animation-delay:.07s}
.enter>*:nth-child(3){animation-delay:.12s}
.enter>*:nth-child(4){animation-delay:.17s}
.enter>*:nth-child(5){animation-delay:.22s}
.enter>*:nth-child(n+6){animation-delay:.26s}
.press{transition:transform .14s var(--spring), background-color .18s var(--ease), border-color .18s var(--ease)}
.press:active{transform:scale(.972)}

/* view transitions between tabs */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(page){animation:vtOut .22s var(--ease) both}
  ::view-transition-new(page){animation:vtIn .3s var(--ease) both}
}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* ---------- app bar ---------- */
.appbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding:12px 18px;display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.03em;font-size:1.05rem}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 4px var(--gold-soft)}
.iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.card.quiet{background:transparent;border-color:var(--line-soft)}
.card.lift{box-shadow:var(--shadow-2)}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(168deg, var(--raise), var(--surface) 62%);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;
  display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset-inline-end:-70px;top:-70px;width:190px;height:190px;
  border-radius:50%;background:radial-gradient(circle,var(--gold-soft),transparent 68%);pointer-events:none;
}
.hero-stat{display:flex;align-items:flex-end;gap:14px;position:relative}
.hero-num{font-family:var(--fd);font-size:4.1rem;line-height:.86;font-weight:400;letter-spacing:-.03em}
.hero-num.gold{color:var(--gold)}
.hero-cap{display:flex;flex-direction:column;gap:1px;padding-bottom:5px}
.hero-cap b{font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.hero-cap span{font-size:.78rem;color:var(--muted)}

.cta{
  display:flex;align-items:center;gap:14px;width:100%;text-align:start;
  background:var(--cta-bg);color:var(--cta-ink);border-radius:var(--r);
  padding:16px 18px;min-height:70px;font-family:inherit;
}
.cta-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--cta-ink) 15%,transparent);flex:none}
.cta b{display:block;font-size:1.08rem;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.cta span{display:block;font-size:.82rem;opacity:.78;line-height:1.45;margin-top:2px;font-weight:500}
.cta-go{margin-inline-start:auto;font-size:1.5rem;opacity:.6;transition:transform .2s var(--spring)}
.cta:active .cta-go{transform:translateX(4px)}

.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metric{background:var(--sunken);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 13px;display:flex;flex-direction:column;gap:3px}
.metric b{font-family:var(--fm);font-size:1.3rem;font-weight:600;line-height:1}
.metric span{font-size:.63rem;color:var(--faint);font-weight:800;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- loop diagram ---------- */
.loop{display:flex;flex-direction:column;gap:0}
.loop-step{display:flex;gap:14px;align-items:flex-start;position:relative;padding-bottom:18px}
.loop-step:last-child{padding-bottom:0}
.loop-step::before{
  content:"";position:absolute;inset-inline-start:15px;top:32px;bottom:2px;width:2px;
  background:linear-gradient(var(--line),transparent);
}
.loop-step:last-child::before{display:none}
.loop-n{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--gold-dim);color:var(--gold);
  font-family:var(--fm);font-size:.8rem;font-weight:600;background:var(--bg);z-index:1;
}
.loop-step.on .loop-n{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);animation:pulseRing 2s ease-out infinite}
.loop-b b{display:block;font-size:.98rem;font-weight:800;letter-spacing:-.01em}
.loop-b span{display:block;font-size:.85rem;color:var(--muted);line-height:1.5;margin-top:1px}

/* ---------- progress ---------- */
.bar{height:6px;border-radius:99px;background:var(--sunken);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--gold);transform-origin:left;transition:width .55s var(--ease)}
.bar.thin{height:4px}
.bar.mint>i{background:var(--mint)}

/* ---------- section head ---------- */
.shead{display:flex;align-items:baseline;justify-content:space-between;
  gap:6px 12px; flex-wrap:wrap; margin-bottom:12px}
/* The title keeps the row to itself rather than breaking across two lines
   when the column is narrow; the meta drops beneath it. */
.shead h2{flex:1 1 auto; min-width:0}
.shead > span{flex:0 0 auto}
.shead h2{font-size:1.1rem}
.shead span{font-family:var(--fm);font-size:.75rem;color:var(--faint);font-weight:500}

/* ---------- set grid ---------- */
.setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:9px}
.setcell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  animation:popIn .3s var(--ease) both;
}
.setcell b{font-family:var(--fm);font-size:1rem;font-weight:600}
.setcell small{font-size:.66rem;color:var(--faint);font-weight:600}
.setcell.done{border-color:var(--gold-dim);background:var(--gold-soft)}
.setcell.done small{color:var(--gold);font-family:var(--fm);font-weight:700;font-size:.72rem}

/* ---------- lesson rows ---------- */
.lesson{
  display:flex;align-items:center;gap:13px;width:100%;text-align:start;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:13px 15px;min-height:58px;
}
.tick{
  width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line);background:var(--sunken);
  display:grid;place-items:center;flex:none;color:transparent;font-size:.78rem;font-weight:900;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.lesson.done .tick{background:var(--mint);border-color:var(--mint);color:var(--bg)}
/* Option letters are content, not checkmarks — they must be readable unpicked. */
.tick.letter{color:var(--muted);font-family:var(--fm);font-size:.76rem;font-weight:600}
.lesson .tick.letter.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.lesson.done .l-t{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
.l-b{flex:1;min-width:0}
.l-t{display:block;font-size:.92rem;font-weight:600;line-height:1.4}
.l-m{display:block;font-family:var(--fm);font-size:.72rem;color:var(--faint);margin-top:1px}
.tag{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--faint);white-space:nowrap}
.tag.gold{color:var(--gold);border-color:var(--gold-dim);background:var(--gold-soft)}
.tag.red{color:var(--red-ink);border-color:var(--red);background:var(--red-soft)}
.tag.blue{color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}
.tag.mint{color:var(--mint);border-color:var(--mint);background:var(--mint-soft)}

/* ---------- answer sheet ---------- */
.runbar{
  position:sticky;top:62px;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);padding:14px 0 14px;border-bottom:1px solid var(--line);margin-bottom:16px;
}
.clock{font-family:var(--fm);font-size:2.4rem;font-weight:600;line-height:1;letter-spacing:-.04em}
.clock.warn{color:var(--red-ink)}
.qrow{display:grid;grid-template-columns:30px repeat(4,1fr);gap:7px;align-items:center;padding:4px 0}
.qn{font-family:var(--fm);font-size:.78rem;color:var(--faint);text-align:center;font-weight:600}
.opt{
  border:1.5px solid var(--line);background:var(--surface);border-radius:11px;min-height:46px;
  font-family:var(--fm);font-size:.92rem;font-weight:600;color:var(--muted);
  transition:transform .13s var(--spring),background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.opt:active{transform:scale(.94)}
.opt.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

/* ---------- marking ---------- */
.mrow{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.mrow:last-child{border-bottom:0}
.mbtn{flex:1;min-height:44px;border-radius:11px;border:1.5px solid var(--line);background:var(--surface);font-weight:700;font-size:.88rem;color:var(--muted)}
.mbtn.ok.on{background:var(--mint-soft);border-color:var(--mint);color:var(--mint)}
.mbtn.no.on{background:var(--red-soft);border-color:var(--red);color:var(--red-ink)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid var(--line);background:var(--surface);border-radius:99px;
  padding:9px 15px;font-size:.88rem;font-weight:700;color:var(--muted);min-height:42px;
  transition:transform .13s var(--spring),background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.chip.t-red.on{background:var(--red);border-color:var(--red);color:#fff}
.chip.t-amber.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.chip.t-blue.on{background:var(--blue);border-color:var(--blue);color:var(--bg)}
.chip.t-mint.on{background:var(--mint);border-color:var(--mint);color:var(--bg)}

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.field>label{font-size:.8rem;font-weight:700;color:var(--muted)}
input[type=date],input[type=text],input[type=number],textarea{
  width:100%;padding:13px 14px;border-radius:var(--r);border:1.5px solid var(--line);
  background:var(--sunken);color:var(--text);font-weight:600;
  transition:border-color .18s var(--ease);
}
input:focus,textarea:focus{border-color:var(--gold);outline:none}
textarea{resize:vertical;min-height:88px;line-height:1.65;font-weight:500}
.btn{
  border-radius:var(--r);padding:15px 20px;font-weight:800;font-size:1rem;letter-spacing:-.01em;
  background:var(--cta-bg);color:var(--cta-ink);min-height:54px;width:100%;
  transition:transform .14s var(--spring),opacity .2s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn.ghost{background:var(--surface);color:var(--text);border:1.5px solid var(--line)}
.btn.danger{background:var(--red);color:var(--red-deep)}
.btn.sm{min-height:44px;padding:11px 16px;font-size:.9rem;width:auto}
.btn:disabled{opacity:.38;transform:none}

/* ---------- review ---------- */
.rcard{
  background:linear-gradient(168deg,var(--raise),var(--surface) 70%);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;
  display:flex;flex-direction:column;gap:14px;min-height:250px;
  animation:popIn .34s var(--spring) both;
}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grade{
  border-radius:13px;border:1.5px solid var(--line);background:var(--surface);
  padding:12px 4px;font-size:.8rem;font-weight:800;min-height:62px;
  display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  transition:transform .13s var(--spring),background-color .18s var(--ease);
}
.grade:active{transform:scale(.94)}
.grade small{font-family:var(--fm);font-size:.62rem;color:var(--faint);font-weight:600}
.grade.g1{color:var(--red-ink)} .grade.g2{color:var(--gold)} .grade.g3{color:var(--text)} .grade.g4{color:var(--mint)}

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.tab{
  border-radius:13px;padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--faint);font-size:.68rem;font-weight:800;letter-spacing:.01em;position:relative;
  transition:color .2s var(--ease),transform .14s var(--spring);
}
.tab:active{transform:scale(.93)}
.tab.on{color:var(--gold)}
.tab svg{transition:transform .28s var(--spring)}
.tab.on svg{transform:translateY(-1px) scale(1.07)}
.tab .badge{
  position:absolute;top:3px;inset-inline-end:calc(50% - 21px);
  background:var(--red);color:#fff;font-family:var(--fm);font-size:.6rem;font-weight:700;
  min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;padding:0 4px;
  animation:popIn .3s var(--spring) both;
}


/* ---------- misc ---------- */
.empty{text-align:center;padding:38px 18px;display:flex;flex-direction:column;gap:10px;align-items:center;color:var(--muted)}
.empty b{font-size:1.05rem;color:var(--text)}
.toast{position:fixed;inset-inline:0;bottom:calc(90px + env(safe-area-inset-bottom));z-index:70;display:flex;justify-content:center;pointer-events:none;padding-inline:18px}
.toast>div{background:var(--text);color:var(--bg);border-radius:99px;padding:11px 20px;font-size:.88rem;font-weight:700;box-shadow:var(--shadow-2);animation:popIn .3s var(--spring)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ============================================================
   Larger screens.
   A phone layout stretched to 1400px is not a desktop app. Past 900px the
   navigation becomes a persistent rail, the page gets a real measure, and the
   surfaces that read as a set — insight cards, the day's blocks — lay out in
   columns instead of one long ribbon.
   ============================================================ */
.rail{display:none}

@media (min-width: 900px){
  body{padding-bottom:0; display:grid; grid-template-columns:var(--rail) 1fr; min-height:100svh}
  /* During onboarding the rail is hidden, and a hidden grid item leaves the
     main column sitting in the rail's 238px track. Onboarding owns the whole
     window instead. */
  body.onboarding{display:block}
  .appbar{display:none}
  .tabbar{display:none !important}

  .rail{
    display:flex; flex-direction:column; gap:6px;
    position:sticky; top:0; align-self:start; height:100svh;
    padding:26px 16px; border-inline-end:1px solid var(--line-soft);
    background:var(--sunken);
  }
  .rail .logo{font-size:1.2rem; padding:0 10px 22px; gap:10px}
  .rail-item{
    display:flex; align-items:center; gap:12px; width:100%; text-align:start;
    padding:11px 12px; border-radius:12px; color:var(--muted);
    font-size:.92rem; font-weight:700; position:relative;
    transition:background-color .18s var(--ease), color .18s var(--ease);
  }
  .rail-item:hover{background:var(--surface); color:var(--text)}
  .rail-item.on{background:var(--gold-soft); color:var(--gold)}
  .rail-item .badge{
    margin-inline-start:auto; background:var(--red); color:#fff;
    font-family:var(--fm); font-size:.66rem; font-weight:700;
    min-width:20px; height:20px; border-radius:99px; display:grid; place-items:center; padding:0 6px;
  }
  .rail-foot{margin-top:auto; padding:0 10px; font-size:.72rem; color:var(--faint); line-height:1.6}
  .rail-foot a{color:var(--gold); text-decoration:none}

  .wrap{max-width:980px; padding:34px 32px 56px; margin-inline:0}
  h1{font-size:2rem}

  /* Today: the day's work beside the day's context */
  .today-grid{display:grid; grid-template-columns:1.35fr .95fr; gap:22px; align-items:start}
  .today-grid > .col{display:flex; flex-direction:column; gap:16px; min-width:0}

  /* Insight cards read as a set, so they sit in a set */
  .insight-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
  .insight-grid .span-2{grid-column:1 / -1}

  .setgrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .hero-num{font-size:4.6rem}
  .runbar{top:0}
  .qrow{grid-template-columns:40px repeat(4,1fr); gap:10px}
  .opt{min-height:52px; font-size:1rem}
  .grades{gap:10px}
  .ob{max-width:620px}
  .ob-title{font-size:3.2rem}
}

@media (min-width: 1280px){
  .wrap{max-width:1140px}
  .insight-grid{grid-template-columns:1fr 1fr 1fr}
  .insight-grid .span-2{grid-column:span 2}
  .insight-grid .span-3{grid-column:1 / -1}
}

/* Tablet portrait: keep the bottom bar, but stop the single-column stretch. */
@media (min-width: 620px) and (max-width: 899px){
  .wrap{max-width:720px; padding:26px 24px 16px}
  .today-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
  .today-grid > .col{display:flex; flex-direction:column; gap:14px; min-width:0}
  .insight-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
  .insight-grid .span-2{grid-column:1 / -1}
  .hero-num{font-size:4.2rem}
  .setgrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
}

/* A pointer that is a mouse deserves hover states. */
@media (hover: hover){
  .lesson:hover{border-color:var(--gold-dim)}
  .setcell:hover{border-color:var(--gold-dim)}
  .chip:hover{border-color:var(--gold-dim)}
  .btn:hover{filter:brightness(1.06)}
  .cta:hover{filter:brightness(1.05)}
}

/* ---------- The Paper ---------- */
.paper-wrap{display:flex; flex-direction:column; gap:14px}
.paper-band{display:flex; flex-direction:column; gap:7px}
.paper-band h4{
  margin:0; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); display:flex; justify-content:space-between; align-items:baseline;
}
.paper-band h4 span{font-family:var(--fm); letter-spacing:0; text-transform:none; font-weight:500}
.paper-grid{display:grid; grid-template-columns:repeat(13,1fr); gap:4px}
.cellq{
  aspect-ratio:1; border-radius:3px; background:transparent;
  border:1px solid var(--line); position:relative;
  animation:cellIn .4s var(--spring) both;
}
.cellq.secured{background:var(--gold); border-color:var(--gold)}
.cellq.shaky{background:var(--gold-dim); border-color:var(--gold-dim); opacity:.85}
.cellq.leaking{background:var(--red); border-color:var(--red); opacity:.9}
.cellq.unknown{border-style:dashed; opacity:.55}
@keyframes cellIn{from{opacity:0; transform:scale(.4)}to{opacity:1; transform:none}}
.paper-legend{display:flex; flex-wrap:wrap; gap:12px; font-size:.72rem; color:var(--muted)}
.paper-legend i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-inline-end:5px; vertical-align:-1px}
.paper-head{display:flex; align-items:flex-end; gap:14px}
.paper-head .n{font-family:var(--fd); font-size:3.6rem; line-height:.88; color:var(--gold)}
.paper-head .of{font-family:var(--fm); font-size:1rem; color:var(--faint); padding-bottom:6px}
@media (min-width:620px){ .paper-grid{grid-template-columns:repeat(20,1fr); gap:5px} }
@media (min-width:900px){ .paper-grid{grid-template-columns:repeat(26,1fr)} .paper-head .n{font-size:4.4rem} }

/* ---------- Reclaimed ---------- */
.reclaim{display:flex; align-items:center; gap:14px}
.reclaim .n{font-family:var(--fd); font-size:2.8rem; line-height:.9; color:var(--mint)}

/* Paper cells are buttons now — they must not inherit button chrome, but they
   must still look pressable. */
.cellq{padding:0; cursor:pointer; transition:transform .12s var(--spring), filter .16s var(--ease)}
.cellq:hover{transform:scale(1.25); z-index:2; filter:brightness(1.25)}
.cellq:active{transform:scale(.9)}
.cellq:focus-visible{outline:2px solid var(--text); outline-offset:2px}

/* ============================================================
   Onboarding.
   Two screens, and the first one has to explain the whole product before the
   student decides whether to care. On a phone it is a single column; past
   900px the promise sits beside the loop rather than above it, so neither has
   to shout.
   ============================================================ */
.ob{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  gap:26px; padding:40px 22px calc(40px + env(safe-area-inset-bottom));
  max-width:560px; margin-inline:auto;
}
.ob-mark{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-.03em}
.ob-mark .dot{width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px var(--gold-soft)}
.ob-title{
  font-family:var(--fd); font-weight:400; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(2.2rem, 8vw, 3rem); text-wrap:balance; margin:0;
}
.ob-title em{font-style:normal; color:var(--gold)}
.ob-lede{font-size:1.02rem; line-height:1.6; color:var(--muted); max-width:46ch}
.ob-panel{
  background:linear-gradient(168deg, var(--raise), var(--surface) 72%);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:24px;
}
/* The two blocks are flex columns at every width, not just on desktop —
   otherwise their children collapse together on a phone. */
.ob-left{display:flex; flex-direction:column; gap:14px}
.ob-right{display:flex; flex-direction:column; gap:16px}
.ob-actions{display:flex; flex-direction:column; gap:10px}
.ob-dots{display:flex; gap:7px; justify-content:center; padding-top:2px}
.ob-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); transition:all .3s var(--spring)}
.ob-dots i.on{background:var(--gold); width:24px; border-radius:99px}

/* The loop, drawn as a loop */
.loop{display:flex; flex-direction:column; gap:0}
.loop-step{display:flex; gap:15px; align-items:flex-start; position:relative; padding-bottom:20px}
.loop-step:last-child{padding-bottom:0}
.loop-step::before{
  content:""; position:absolute; inset-inline-start:16px; top:36px; bottom:2px; width:2px;
  background:linear-gradient(var(--gold-dim), var(--line-soft));
}
.loop-step:last-child::before{display:none}
.loop-n{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1.5px solid var(--gold-dim); color:var(--gold); background:var(--bg); z-index:1;
  font-family:var(--fm); font-size:.82rem; font-weight:600;
}
.loop-step.on .loop-n{background:var(--gold); border-color:var(--gold); color:var(--gold-ink); animation:pulseRing 2.4s ease-out infinite}
.loop-b b{display:block; font-size:1.02rem; font-weight:800; letter-spacing:-.01em; margin-bottom:2px}
.loop-b span{display:block; font-size:.9rem; color:var(--muted); line-height:1.55}

@media (min-width: 900px){
  .ob{
    max-width:1020px; display:grid; align-content:center;
    grid-template-columns:1fr 1fr; gap:20px 56px; padding:56px 40px;
  }
  .ob-left{gap:22px; justify-content:center}
  .ob-right{justify-content:center}
  .ob-title{font-size:3.4rem}
  .ob-lede{font-size:1.08rem}
}

/* ============================================================
   Now.
   Today used to open with three competing countdowns, the same figure
   printed twice, and a paragraph under every card explaining why the card
   existed. A student opening a study app at 9pm wants one instruction.
   ============================================================ */
.now-head{display:flex; flex-direction:column; gap:7px}
.now-topic{
  font-family:var(--fd); font-weight:400; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.7rem, 5vw, 2.4rem); color:var(--text); text-wrap:balance;
}
.now-card{
  background:linear-gradient(168deg, var(--raise), var(--surface) 74%);
  border:1px solid var(--gold-dim); border-radius:var(--r-xl);
  padding:24px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-2);
}
.now-tag{display:flex; align-items:center; gap:10px}
.now-title{font-size:1.35rem; font-weight:800; letter-spacing:-.02em; line-height:1.3}
.now-note{font-size:.92rem; color:var(--muted); line-height:1.55}
.now-actions{display:flex; gap:10px; margin-top:4px}
.now-actions .btn{flex:1}
.done-card{border-color:var(--mint)}

.then{border:1px solid var(--line-soft); border-radius:var(--r); background:var(--surface)}
.then summary{
  padding:14px 16px; cursor:pointer; font-size:.9rem; font-weight:700; color:var(--muted);
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.then summary::-webkit-details-marker{display:none}
.then summary::after{content:"\203a"; font-size:1.3rem; color:var(--faint); transition:transform .25s var(--spring)}
.then[open] summary::after{transform:rotate(90deg)}
.then > div{padding:0 12px 12px}

.status-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
}
.status-cell{
  background:var(--surface); padding:13px 12px; display:flex; flex-direction:column; gap:2px;
  text-align:start; transition:background-color .18s var(--ease);
}
.status-cell:hover{background:var(--raise)}
.status-cell b{font-family:var(--fm); font-size:1.3rem; font-weight:600; line-height:1}
.status-cell span{font-size:.68rem; color:var(--faint); font-weight:700; letter-spacing:.03em}

.quiet-link{
  color:var(--gold); font-size:.9rem; font-weight:700; padding:10px 2px; text-align:start;
}
@media (min-width:900px){
  .now-card{padding:30px}
  .now-title{font-size:1.6rem}
}

/* ---------- The day ends ---------- */
.done-card{
  background:linear-gradient(168deg, var(--mint-soft), var(--surface) 78%);
  border:1px solid var(--mint); border-radius:var(--r-xl); padding:30px 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  animation:popIn .45s var(--spring) both;
}
.done-mark{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--mint); color:var(--bg); font-size:1.5rem; font-weight:900;
  animation:cellIn .5s var(--spring) both; animation-delay:.1s;
}
.done-title{font-family:var(--fd); font-weight:400; font-size:1.9rem; letter-spacing:-.02em; line-height:1.15}
.done-line{font-family:var(--fm); font-size:.85rem; color:var(--mint)}
.done-note{font-size:.88rem; color:var(--muted)}

/* ---------- Method, on request ---------- */
.method{margin-top:12px; border-top:1px solid var(--line-soft); padding-top:10px}
.method summary{
  cursor:pointer; list-style:none; font-size:.74rem; font-weight:700; color:var(--faint);
  display:inline-flex; align-items:center; gap:6px; padding:2px 0;
}
.method summary::-webkit-details-marker{display:none}
.method summary::before{
  content:"i"; width:15px; height:15px; border-radius:50%; border:1px solid var(--faint);
  display:grid; place-items:center; font-family:var(--fm); font-size:.62rem; font-style:italic;
}
.method summary:hover{color:var(--muted)}
.method[open] summary{color:var(--muted); margin-bottom:7px}
.method p{font-size:.78rem; line-height:1.55; color:var(--muted); margin-bottom:6px}
.method p:last-child{margin-bottom:0}

/* ---------- forecast band: percentages as the scale, so nothing scales ---------- */
.fbar{margin-top:16px; padding:0 2px}
.fbar-track{
  position:relative; height:22px; margin:20px 0 6px;
}
.fbar-track::before{
  content:""; position:absolute; inset-inline:0; top:10px; height:2px;
  background:var(--line); border-radius:2px;
}
.fbar-band{
  position:absolute; top:3px; height:16px; min-width:10px; border-radius:8px;
  background:var(--gold-soft); border:1px solid var(--gold-dim);
}
.fbar-dot{
  position:absolute; top:5px; width:12px; height:12px; border-radius:50%;
  background:var(--gold); transform:translateX(-50%); box-shadow:0 0 0 3px var(--surface);
}
.fbar-target{
  position:absolute; top:-2px; height:26px; width:2px;
  background:repeating-linear-gradient(var(--mint) 0 3px, transparent 3px 6px);
  transform:translateX(-50%);
}
.fbar-target span{
  position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
  font-size:.66rem; color:var(--mint); line-height:1;
}
.fbar-ends{display:flex; justify-content:space-between; font-size:.68rem}

/* ---------- insights: two stacks that pack by height, not by row ---------- */
.insight-cols{display:grid; grid-template-columns:1fr; gap:16px}
.icol{display:flex; flex-direction:column; gap:16px; min-width:0}
@media (min-width: 900px){
  .insight-cols{grid-template-columns:1.5fr 1fr; gap:18px; align-items:start}
}

/* ---------- the narrowest phones (320px) ----------
   Two buttons sharing a row get about 135px each there, which is not enough
   for "Review 3 reps". They stack instead of wrapping their own labels. */
@media (max-width: 359px){
  /* These buttons carry an inline flex:1 from the view that builds them, so
     the override has to outrank it. Scoped to the one width that needs it. */
  .row{flex-wrap:wrap}
  .row > .btn{flex:1 1 100% !important}
  .spread{flex-wrap:wrap; gap:6px}
  .btn.sm{white-space:nowrap}
  .now-actions{flex-wrap:wrap}
  .now-actions .btn{flex:1 1 100%}
  .paper-legend{gap:6px 10px}
}

/* ---------- today's skills, straight off Leen's plan line ---------- */
.skills-card{border-color:var(--gold-dim)}
.skills-card .chips{gap:7px}
.skills-card .chip{font-size:.8rem}

/* ---------- the named mistake behind a wrong option ---------- */
.trap{
  display:flex; gap:9px; align-items:flex-start; margin-top:12px;
  padding:11px 13px; border-radius:var(--r-sm);
  background:var(--red-soft); border:1px solid var(--red);
  font-size:.84rem; line-height:1.55; color:var(--text);
}
.trap b{color:var(--red-ink); font-weight:800}
.trap-ic{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--red-ink); color:var(--red-ink);
  display:grid; place-items:center; font-family:var(--fm);
  font-size:.66rem; font-weight:700; margin-top:1px;
}

/* ---------- the sample-account strip ---------- */
.demo-bar{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin-bottom:20px; padding:11px 15px;
  border:1px solid var(--gold-dim); border-radius:var(--r-sm);
  background:var(--gold-soft);
}
.demo-dot{
  flex:0 0 auto; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft);
}
.demo-text{flex:1 1 240px; font-size:.83rem; line-height:1.5; color:var(--text); min-width:0}
.demo-text b{color:var(--gold); font-weight:800}
.demo-out{
  flex:0 0 auto; border:1px solid var(--gold-dim); background:transparent;
  color:var(--gold); font-family:var(--ff); font-size:.78rem; font-weight:700;
  padding:7px 13px; border-radius:999px; cursor:pointer;
}
.demo-out:hover{background:var(--gold-soft); border-color:var(--gold)}
@media (max-width: 420px){ .demo-out{flex:1 1 100%; text-align:center} }