/* ============================================================
   NORCET Study Planner — NPrep design system
   Poppins · Midnight Blue #131B63 · Clear Sky Blue #15CAE8 · Ice Blue #E5F0F8
   70% brand anchor / 30% modern (gradients, glass, soft shadows, motion).
   Visual layer only — no markup class was renamed, logic untouched.
   ============================================================ */

:root{
  /* brand */
  --navy:#131B63; --sky:#15CAE8; --ice:#E5F0F8; --ice-soft:#EEF4FB;
  --white:#fff; --gray:#CCCCCC;
  /* derived / neutrals (30% expanded) */
  --ink:#1b2240; --muted:#5b6683; --line:#e7edf6; --bg:#FAFBFF;   /* --muted darkened for WCAG AA (was #6b7793, 4.48:1) */
  --navy-2:#232f8f;               /* lighter navy for gradient stops */
  /* fill vs text split: --sky/--ok/--warn/--hi stay BRIGHT for backgrounds, dots, bars,
     gradients; the *-text tokens are the AA-safe (≥4.5:1 on white) versions for small text. */
  --sky-deep:#0b6f80;             /* AA-safe sky text/icon (was #0fb3cf, 2.5:1) */
  --ok-text:#157a4e; --warn-text:#a85a12; --hi-text:#c0344a;
  /* priority + status */
  --hi:#EF5D6F; --med:#F4B740; --lo:#9AA3AF; --ok:#18b26b; --warn:#e8823a;
  /* gradients */
  --grad-brand:linear-gradient(120deg,var(--navy) 0%,#2740b8 55%,var(--sky) 130%);
  --grad-sky:linear-gradient(120deg,var(--sky),#2f6bff);
  /* shape + depth (multi-layer soft shadows) */
  --r:16px; --r-lg:22px;
  --shadow2:0 1px 3px rgba(19,27,99,.06),0 6px 18px rgba(19,27,99,.06);
  --shadow:0 2px 8px rgba(19,27,99,.07),0 16px 40px rgba(19,27,99,.10);
  --shadow-sky:0 10px 30px rgba(21,202,232,.28);
  --glow:0 0 0 3px rgba(21,202,232,.22);
  --stick:150px;
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.68,-.55,.265,1.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em}
button{font-family:inherit;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* faint dot texture on the app canvas (30% trendy) */
body::before{content:'';position:fixed;inset:0;z-index:-2;
  background:radial-gradient(circle at 1px 1px,rgba(19,27,99,.035) 1px,transparent 0);background-size:26px 26px;pointer-events:none}
/* soft brand blobs behind everything */
body::after{content:'';position:fixed;z-index:-1;top:-160px;right:-140px;width:520px;height:520px;pointer-events:none;
  background:radial-gradient(closed,transparent);
  background:radial-gradient(circle,rgba(21,202,232,.16),transparent 62%);filter:blur(10px)}

/* ---------------------------------------------------------------------------
   REMOVED: styles for features that no longer exist in the markup.
   The device-preview toggle, the rationale/"logic" side panel, the
   how-it-works drawer and its backdrop, the mobile FAB, and the stat strip
   were all deleted from the UI in earlier passes; their CSS was left behind.
   None of these class names is emitted by any code path — verified against
   app.js and index.html, and by diffing the computed style of every element
   across 10 rendered states before and after this deletion.
   --------------------------------------------------------------------------- */

/* ===== app shell ===== */
.app-wrap{display:flex;min-height:100vh;align-items:stretch}
.main{flex:1;min-width:0}
/* The 480px phone MOCK-UP that `body.m` used to draw is gone. It existed for a
   device-preview toggle that is no longer in the markup — and a real phone was
   getting the mock-up's constraints (capped width, fake device frame, unusable grey
   gutter) with none of its purpose. The app now simply fills whatever it is given;
   the reading measure is held by max-width on the CONTENT further down, not by a
   fake device frame around it. */
.app-wrap{width:100%}


/* Brand lock-up: the real NPrep wordmark, with the product name under it. The old
   `.logo` rule (a navy square containing the letter "N") stood in for the real mark
   and has been deleted along with it. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-bottom:20px}
.brand-mark{height:30px;width:auto;display:block}
/* The wordmark is solid navy artwork on transparent; on a dark canvas it would vanish,
   so it gets a light plate rather than being recoloured (never recolour a logo). */
@media (prefers-color-scheme:dark){
  .brand-mark{background:#fff;padding:5px 9px;border-radius:8px;box-sizing:content-box}
}
.brand-txt h1{font-size:17px;color:var(--navy);letter-spacing:-.02em}
.brand h1{font-size:17px;color:var(--navy)}
.brand small{color:var(--muted);font-size:12px;font-weight:500}

/* ============ WIZARD ============ */
/* ---- the landing -------------------------------------------------------------
   Deliberately quiet: a logo, a sentence, two numbers and one button. Everything the
   wizard asks is still available behind "Customize my plan", but it is asked SECOND —
   a student arriving from an ad wants to know whether this is worth their time before
   being asked how many hours they can spare. */
.intro{max-width:520px;margin:0 auto;padding:clamp(28px,8vh,64px) clamp(20px,6vw,32px) 48px;
  text-align:center;animation:slidein .45s var(--ease)}
.intro-logo{height:38px;width:auto;display:block;margin:0 auto clamp(28px,7vh,56px)}
.intro-h{font-size:clamp(28px,8vw,38px);line-height:1.22;font-weight:800;color:var(--navy);
  letter-spacing:-.03em;margin:0;text-wrap:balance}
.intro-spark{margin-left:6px;font-size:.72em;vertical-align:.28em}
.intro-sub{margin:clamp(14px,3vh,20px) 0 0;font-size:clamp(15px,4vw,17px);color:var(--muted);font-weight:500}
.intro-sub b{color:var(--ink);font-weight:700}
.intro-sub .intro-exam{color:#1668d8}

/* The recommendation itself. A card rather than two loose figures, because the pair is
   one answer — this many hours AT this speed — and splitting them invites reading either
   one alone. */
.intro-card{display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;
  margin:clamp(24px,6vh,40px) 0 0;padding:clamp(20px,5vw,28px) 0;
  border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow2)}
/* Every cell is placed explicitly: auto-placement runs the definite-column
   pseudo-element first, and would otherwise shunt both stats one track right. */
.intro-card::before{content:'';grid-area:1/2;justify-self:center;width:1px;height:78%;background:var(--line)}
.intro-card .intro-stat:first-child{grid-area:1/1}
.intro-card .intro-stat:last-child{grid-area:1/3}
.intro-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.intro-ic{width:clamp(52px,13vw,62px);height:clamp(52px,13vw,62px);border-radius:50%;
  background:#eef5fd;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.intro-ic svg{width:46%;height:46%;color:#1668d8}
.intro-stat b{font-size:clamp(28px,8vw,34px);font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.1}
.intro-stat span{font-size:clamp(13px,3.6vw,14px);color:var(--muted)}

/* The intro label is the longest CTA text in the app, so it trades the shared
   44px side padding for a narrower gutter to keep itself on one line. */
.cta.intro-cta{width:100%;margin-top:clamp(26px,6vh,40px);padding-left:18px;padding-right:18px;
  font-size:clamp(15px,4.2vw,17px)}
/* The arrow on the intro CTA moves. Three chevrons march right on a stagger, forever.
   AMBIENT rather than hover-only because 74.5% of students land here on a phone (measured
   from the access log, 31 Aug onward) and hover never fires on touch — a hover-only arrow
   would be invisible to three students in four. The hover nudge below is the desktop
   quarter's share of it.
   Scoped to #introGo by id: `.cta` is also worn by another button, which must not inherit a
   loop that never stops. The reduced-motion block at the top of this file already kills
   every animation and transition, so this needs no separate opt-out. */
#introGo .ic{position:relative;display:inline-block;width:26px;height:16px;vertical-align:-3px;
  margin-left:8px;transition:transform .4s var(--spring)}
#introGo .ic svg{position:absolute;top:0;left:0;opacity:0;animation:convoy 1.5s var(--ease) infinite}
#introGo .ic svg:nth-child(2){left:6px;animation-delay:.16s}
#introGo .ic svg:nth-child(3){left:12px;animation-delay:.32s}
@keyframes convoy{
  0%{opacity:0;transform:translateX(-5px)}
  35%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(7px)}
}
/* Desktop only, and it moves the CHEVRONS, not the button. `.cta:hover` already lifts and
   scales the whole thing; adding another transform here would overwrite that lift rather
   than add to it. pointer:fine keeps it away from hybrid touchscreens that claim hover. */
@media (hover:hover) and (pointer:fine){
  #introGo:hover .ic{transform:translateX(5px)}
}
/* A link, not a second button: it is the quieter of the two choices and should look it. */
.intro-link{display:block;margin:18px auto 0;border:0;background:none;cursor:pointer;
  font-size:15px;font-weight:600;color:#1668d8;text-decoration:underline;
  text-decoration-style:dashed;text-underline-offset:5px;padding:8px 12px}
.intro-link:hover{color:var(--navy)}
.intro-link:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:8px}
@media (hover:none) and (pointer:coarse){ .intro-link{min-height:44px} }

.wizard{max-width:820px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 140px}
.wz-panel{animation:slidein .45s var(--ease)}
.wz-h{font-size:clamp(25px,4vw,38px);font-weight:800;line-height:1.14;
  background:linear-gradient(115deg,var(--navy),#2c3bb0 60%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.wz-sub{color:var(--muted);font-size:16px;margin:12px 0 32px}

.tiles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:8px 0}
.tile{min-width:96px;padding:20px 10px;border-radius:18px;border:2px solid var(--line);background:#fff;text-align:center;transition:.28s var(--ease);box-shadow:var(--shadow2)}
.tile:hover{transform:translateY(-4px);border-color:#bfe9f4;box-shadow:var(--shadow)}
.tile.sel{border-color:var(--sky);background:linear-gradient(180deg,#fff,#f2fcfe);box-shadow:0 10px 26px rgba(21,202,232,.22);transform:translateY(-4px)}
.tile .big{font-size:32px;font-weight:800;color:var(--navy)}
.tile.sel .big{color:var(--sky-deep)}
.tile .u,.tile div:last-child{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.summary{max-width:520px;margin:22px auto 4px;background:var(--ice);border-radius:18px;padding:22px;text-align:center;border:1px solid #d8e8f4}
.summary .lab{font-size:14px;color:#33406b}
.summary .pace{font-size:30px;font-weight:800;color:var(--navy);margin-top:2px}
.centre{text-align:center}
.hint{font-size:12.5px;color:var(--muted);font-weight:400}
.pills{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.pill{border:2px solid var(--line);background:#fff;border-radius:30px;padding:12px 22px;font-size:15px;font-weight:600;color:var(--navy);transition:.22s var(--ease);box-shadow:var(--shadow2)}
.pill:hover{border-color:#bfe9f4;transform:translateY(-2px)}
.pill.sel{border-color:transparent;background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(19,27,99,.26)}
.pill.sel::before{content:'✓  ';color:var(--sky)}
.pill.sm{padding:9px 16px;font-size:13.5px}

.wz-cta-wrap{position:fixed;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(#FAFBFF00,#FAFBFF 34%);display:flex;flex-direction:column;align-items:center;gap:9px;z-index:5}
/* The CTA used to be pinned to the 480px phone mock-up's centre line. With the
   mock-up gone it spans the viewport and centres its own contents, matching the
   wizard's max-width above it. */
.cta{background:var(--grad-brand);color:#fff;border:none;border-radius:30px;padding:16px 44px;font-weight:700;font-size:17px;min-width:min(320px,84vw);transition:transform .3s var(--spring),box-shadow .3s var(--ease);box-shadow:0 12px 30px rgba(21,202,232,.32)}
.cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 40px rgba(21,202,232,.42)}
.cta:active{transform:scale(.97);transition:transform .1s ease}
.cta:disabled{background:#c7cfe0;box-shadow:none;cursor:not-allowed;transform:none}
.subrow{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:28px}
input[type=date]{font-family:inherit;border:2px solid var(--line);border-radius:12px;padding:11px 14px;font-size:15px;color:var(--navy);transition:.2s var(--ease);background:#fff}
input[type=date]:focus{outline:none;border-color:var(--sky);box-shadow:var(--glow)}
.mini-label{font-size:13px;font-weight:600;color:var(--muted)}

/* ============ PLAN — sticky header stack ============ */
.plan-sticky{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line);box-shadow:0 6px 22px rgba(19,27,99,.06)}
.countdown{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--grad-brand);color:#fff;font-size:13px;font-weight:600;padding:10px 14px;letter-spacing:.005em}
.countdown b{font-variant-numeric:tabular-nums;font-weight:700}
.countdown .cd-x{opacity:.7;font-weight:500}
@media(max-width:520px){.countdown .cd-x{display:none}}
.plan-head{padding:15px clamp(16px,3vw,40px) 11px}
.ph-row{display:flex;align-items:flex-start;gap:12px}
.ph-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.ph-mark{width:28px;height:28px;flex:none;display:block}
.ph-title h2{font-size:22px;color:var(--navy);min-width:0;overflow-wrap:anywhere}
.ph-title .subj{color:var(--muted);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-actions{display:flex;gap:8px;flex:none}
.iconbtn{border:1px solid var(--line);background:#fff;color:var(--navy);height:38px;min-width:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600;padding:0 12px;box-shadow:var(--shadow2);transition:.2s var(--ease)}
.iconbtn:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px)}
.iconbtn.wide span{font-size:14px}
/* The edit control sits beside the title now, so it stays an icon: the title already
   says what the page is, and a second worded button next to it competed with the one
   action that matters here — downloading the plan. */
.ph-title .iconbtn{flex:none;height:32px;min-width:32px;padding:0;font-size:14px;box-shadow:none;border-color:transparent;background:var(--ice);color:var(--navy)}
.ph-title .iconbtn:hover{background:var(--navy);color:#fff;transform:none}

/* Download is the primary action on this screen — worded, and big enough to read as
   a button rather than a glyph. */
.btn-dl{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:none;
  border-radius:14px;background:var(--grad-brand);color:#fff;font-size:14.5px;font-weight:600;
  box-shadow:0 6px 18px rgba(19,27,99,.24);transition:.2s var(--ease);white-space:nowrap}
.btn-dl span{font-size:17px;line-height:1}
.btn-dl:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(19,27,99,.30)}
.btn-dl:active{transform:translateY(0)}
.btn-dl:focus-visible{outline:none;box-shadow:var(--glow)}
.btn-dl[disabled]{opacity:.65;pointer-events:none}
@media (max-width:520px){
  /* Keep the label on a phone — it is the whole point of the change — but tighten it. */
  .btn-dl{height:40px;padding:0 14px;font-size:13.5px;border-radius:12px}
  .ph-title h2{font-size:18px}
}
@media (max-width:380px){
  .btn-dl{padding:0 11px;font-size:12.5px;gap:6px}
}

.daybar{display:flex;gap:9px;overflow-x:auto;padding:12px clamp(16px,3vw,40px);scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.daybar::-webkit-scrollbar{height:6px}
.daybar::-webkit-scrollbar-thumb{background:#d5deee;border-radius:6px}
.daychip{flex:none;border:1px solid var(--line);background:#fff;border-radius:14px;padding:9px 15px;min-width:86px;text-align:left;transition:.22s var(--ease);box-shadow:var(--shadow2);scroll-snap-align:center}
.daychip:hover{border-color:#bfe9f4;transform:translateY(-2px)}
/* The selected day: a TINT, not a fill. Solid navy made the day strip read as a
   navigation bar with one item switched on, and the chosen day shouted louder than the
   plan underneath it — which is the thing a student came to read. A pale wash with a
   sky border marks the same day just as clearly and lets the navy text stay navy, so
   the chip still matches every other chip in the row instead of inverting. */
.daychip.sel{background:#e8f7fc;border-color:var(--sky);color:var(--navy);
  box-shadow:0 2px 10px rgba(21,202,232,.18)}
.daychip.sel small{opacity:1;color:var(--sky-deep)}
.daychip b{display:block;font-size:13.5px}
.daychip small{font-size:10.5px;opacity:.85}
.daychip.nash{background:#fff5f6;border-color:#fbd6dc}
.daychip.nash.sel{background:#fdeff1;border-color:#f0a8b4;color:var(--hi-text)}
.daychip.nash.sel small{color:var(--hi-text)}

.day-sec{padding:24px clamp(16px,3vw,40px);border-bottom:1px solid var(--line);animation:fade .4s var(--ease);scroll-margin-top:var(--stick)}
.day-sec h3{font-size:20px;color:var(--navy)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:7px 0 4px}
.badge{font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:20px;letter-spacing:.02em}
.b-pyq{background:var(--ice);color:#2563c9}
.b-pyq2{background:#ece0ff;color:#6b3fa0}
.b-phase{font-weight:700;background:var(--navy);color:#fff}
.b-rev{background:#e7f7ef;color:var(--ok-text)}
.unit{margin-top:22px}
.subj-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-deep)}
.unit .ttl{font-size:17px;font-weight:600;color:var(--navy);margin:3px 0 4px}
.unit .usum{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:15px}
/* NOTE: this auto-fill is overridden to a single column further down (the
   'one card per lecture' declutter pass). Kept as the base so the grid still
   has sane behaviour, but a single column IS the intended design at every
   width — don't 'fix' it back to multi-column without asking. */
.cards-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:12px}
/* The old JS-class-gated single-column rule was removed here; the max-width:768px
   media query in the RESPONSIVE section does that job without depending on JS. */
.ucard{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:15px;padding:14px 16px;background:#fff;box-shadow:var(--shadow2);transition:.24s var(--ease)}
.ucard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dbe6f5}
.ucard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:17px}
.ic-v{background:var(--ice);color:var(--navy)}
.ic-p{background:#e4f0ff;color:#2563c9}
.ucard .cbody{flex:1;min-width:0}
.ucard .cttl{font-weight:600;font-size:14px;color:var(--navy);line-height:1.3}
.ucard .csub{font-size:12px;color:var(--muted);margin-top:3px}
/* Runtime + play button read as one control, so they sit together on the right.
   `flex:none` keeps the pair intact and lets the title column absorb the squeeze. */
.ucard .play{display:flex;align-items:center;gap:9px;flex:none}
/* On a phone the runtime and the button together claim ~112px of a ~334px row, which left
   66px for the title — "Obstetric & Gynaecological Nursing - 05" wrapped to TEN lines and
   a 206px-tall card. Below 560px they move to their own row instead, so the title keeps
   the full width.
   GRID, not flex-wrap: a wrapped flex row starts at the card's content edge, i.e. UNDER
   THE ICON, so the runtime sat at x=49 while the title started at x=98 — lined up with
   nothing. The grid gives the icon its own column and stacks the title and the runtime in
   the second one, so both share the same left edge. `auto` on the icon column also means
   no hard-coded icon width to drift when the breakpoint resizes it. */
@media(max-width:560px){
  .ucard.lec{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:11px;row-gap:6px;align-items:center}
  .ucard.lec .ic{grid-column:1;grid-row:1}
  .ucard.lec .cbody{grid-column:2;grid-row:1}
  .ucard.lec .play{grid-column:2;grid-row:2;justify-content:flex-start}
}
/* Print-only link affordance. Hidden on screen, where the hover lift and the ▶/→ button
   already say "tappable" — both of which print CSS removes. */
.p-cta{display:none}
.ucard .playmin{font-size:12px;color:var(--muted);white-space:nowrap}
.ucard .playmin b{color:var(--navy);font-weight:600}
.ucard .act{width:30px;height:30px;border-radius:10px;background:var(--ice);color:var(--sky-deep);display:grid;place-items:center;flex:none;font-size:13px;transition:.2s var(--spring)}
.ucard:hover .act{background:var(--sky);color:#fff;transform:scale(1.08)}
.sugg{border:1px dashed #cfe3d6;background:linear-gradient(180deg,#f4fcf8,#eefaf3);border-radius:15px;padding:16px 18px;margin-top:15px}
.sugg h4{font-size:14px;color:var(--ok-text);display:flex;align-items:center;gap:8px}
.sugg ul{margin:7px 0 0;padding-left:18px;font-size:12.5px;color:#3a4a63;
  display:flex;flex-direction:column;gap:3px}
.sugg li{margin:0;line-height:1.5}
.sugg b{color:var(--navy)}
/* Every card carries a bulleted list now, so the help link needs its own separation. */
.sugg .help-cta{margin-top:10px}
.revchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.revchip{font-size:12px;padding:7px 13px;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--navy);box-shadow:var(--shadow2);transition:.2s var(--ease)}
.revchip:hover{background:var(--ice);transform:translateY(-2px)}
.nashta-card{display:flex;align-items:center;gap:14px;border:1px solid #fbd6dc;background:linear-gradient(120deg,#fff,#fff5f6);border-radius:15px;padding:16px 18px;margin-top:15px}
.nashta-card .ic{width:44px;height:44px;border-radius:12px;background:#fde3e7;color:var(--hi-text);display:grid;place-items:center;font-size:19px;flex:none}
.note{background:var(--ice);border-radius:14px;padding:15px 17px;font-size:13px;color:var(--navy);margin:16px clamp(16px,3vw,40px);box-shadow:var(--shadow2)}
.note.warn{background:#fdf2e7;color:#8a4a17}
.note.addl{background:var(--ice);color:#25308f;border-left:4px solid var(--sky)}

/* FAB (mobile only) */

/* ============ LOGIC PANEL ============ */

/* mobile: logic becomes bottom sheet */

/* ============ HOW-IT-WORKS drawer ============ */

/* ============ motion ============ */
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes slidein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes fabPop{0%{opacity:0;transform:translateX(-50%) scale(.8)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes cardPop{0%{opacity:0;transform:translateY(24px) scale(.96)}70%{transform:translateY(-4px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes shimmer{100%{background-position:200% 0}}

/* scroll-entrance: applied by anim.js */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-pop.visible{animation:cardPop .55s var(--spring)}
/* stagger children */
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.stagger.visible>*{opacity:1;transform:none}
.stagger.visible>*:nth-child(1){transition-delay:.04s}
.stagger.visible>*:nth-child(2){transition-delay:.09s}
.stagger.visible>*:nth-child(3){transition-delay:.14s}
.stagger.visible>*:nth-child(4){transition-delay:.19s}
.stagger.visible>*:nth-child(5){transition-delay:.24s}
.stagger.visible>*:nth-child(6){transition-delay:.29s}

.hidden{display:none!important}

/* ============ generating moment ============ */
.genwrap{position:fixed;inset:0;z-index:300;display:none;place-items:center;background:rgba(250,251,255,.88);backdrop-filter:blur(10px)}
.genwrap.show{display:grid;animation:fade .3s var(--ease)}
.gen-card{text-align:center;padding:24px;animation:cardPop .55s var(--spring)}
/* The mark itself now, not a navy tile with a letter in it. No background plate:
   the gen card is white, and the mark reads cleanly on it. */
.gen-logo{width:64px;height:64px;display:block;margin:0 auto 22px;animation:pulseLogo 1.4s var(--ease) infinite}
.gen-spin{display:flex;gap:9px;justify-content:center;margin-bottom:20px}
.gen-spin i{width:10px;height:10px;border-radius:50%;background:var(--sky);animation:bounceDot 1s var(--ease) infinite}
.gen-spin i:nth-child(2){animation-delay:.15s}
.gen-spin i:nth-child(3){animation-delay:.3s}
.gen-title{font-size:19px;font-weight:700;color:var(--navy)}
.gen-sub{font-size:13px;color:var(--muted);margin:7px auto 0;max-width:280px}
/* Download progress. A bare number gives no sense of how far along a 5.7 MB file is on a
   slow connection; the bar carries that at a glance and the percentage stays for precision.
   Width comes from bytes actually received — never animated, never estimated. */
.gen-bar{width:min(280px,72vw);height:8px;margin:14px auto 0;border-radius:999px;
  background:rgba(19,27,99,.10);overflow:hidden}
.gen-bar[hidden]{display:none}
.gen-bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#00A3BE,#131B63);transition:width .25s ease-out}
@media (prefers-reduced-motion:reduce){ .gen-bar i{transition:none} }
@keyframes pulseLogo{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes bounceDot{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-9px);opacity:1}}

/* ============ single coaching signal ============ */
.coach{display:flex;gap:11px;align-items:flex-start;margin:16px clamp(16px,3vw,40px);padding:15px 17px;border-radius:16px;font-size:14px;line-height:1.5;font-weight:500;box-shadow:var(--shadow2);animation:cardPop .5s var(--spring)}
.coach .coach-ic{font-size:20px;flex:none;line-height:1.35}
.coach.good{background:linear-gradient(120deg,#eefaf3,#e8f7ef);border:1px solid #c8e9d6;color:#166b43}
.coach.warn{background:linear-gradient(120deg,var(--ice),#eaf2fb);border:1px solid #d5e6f5;color:#2a3a7a}

/* decluttered day: one card per lecture + one compact practice card */
.ucard.lec{align-items:center}
a.ucard{text-decoration:none;color:inherit}
a.ucard:active{transform:scale(.98)}
a.ucard:active .act{background:var(--sky);color:#fff}
/* `white-space:nowrap` kept the subject chip on one line, which is right for "MSN" and
   wrong for "OBSTETRIC & GYNAECOLOGICAL NURSING" — at 320px that single unbreakable
   run pushed the card 33px past the screen edge. It may still wrap as a unit; the
   nowrap now only applies where there is room for it. */
.cttl .tag-subj{font-size:10.5px;font-weight:700;margin-left:8px;opacity:.9;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;display:inline-block}
@media (max-width:420px){
  .cttl .tag-subj{white-space:normal;margin-left:0;display:block;margin-top:3px}
}
.practice{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);border-left:3px solid var(--sky);border-radius:15px;padding:14px 16px;background:linear-gradient(120deg,#fff,#f4fcfe);box-shadow:var(--shadow2);margin-top:12px}
.practice>.ic{width:40px;height:40px;border-radius:11px;background:#e6f9fd;color:var(--sky-deep);display:grid;place-items:center;flex:none;font-size:16px}
.practice .cttl{font-weight:700;font-size:14px;color:var(--navy)}
.practice .csub{font-size:12.5px;color:#3a4a63;margin-top:3px;line-height:1.55}

/* ============ B2C: centered column + collapsible day cards ============ */
#daySecs{max-width:740px;margin-inline:auto}
.coach{max-width:740px;margin-inline:auto}
/* Reading measure for the plan. Was gated on `body.w`, so a stale/missing class
   made the whole plan go full-bleed across a 27in monitor. It is a typographic
   constraint, not a device one — it applies always, and simply has no effect
   below 740px. */
#plan .plan-head, #plan .statstrip, #plan .daybar, #plan>.day-sec{max-width:740px;margin-left:auto;margin-right:auto}
.day-card{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow2);margin:12px clamp(16px,3vw,40px);overflow:hidden;transition:box-shadow .25s var(--ease);scroll-margin-top:var(--stick)}
.day-card[open]{box-shadow:var(--shadow)}
.day-sum{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;transition:background .2s var(--ease)}
.day-sum::-webkit-details-marker{display:none}
.day-sum:hover{background:var(--ice-soft)}
.day-sum-date{font-size:16px;font-weight:700;color:var(--navy)}
.day-sum-n{font-size:12px;font-weight:500;color:var(--muted);margin-left:5px}
.day-sum-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.day-sum-r{display:flex;align-items:center;gap:11px;flex:none}
.day-time{font-size:13.5px;font-weight:700;color:var(--sky-deep)}
.day-tag{font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px}
.day-tag.rev{background:#e7f7ef;color:var(--ok-text)}
.day-tag.nash{background:#fde3e7;color:var(--hi-text)}
.day-body{padding:2px 18px 18px;animation:fade .3s var(--ease)}
.day-body .badges{margin-top:0}
.cards-row{grid-template-columns:minmax(0,1fr)}   /* minmax(0,..) not 1fr: `1fr`'s implicit min is min-content, which overflowed narrow screens */

/* contextual mentor nudge (subject-test <60% gate) — small inline link */
.help-cta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--sky-deep);text-decoration:none;padding:9px 13px;border-radius:11px;background:#fff;border:1px solid #d5e6f5;transition:.2s var(--ease)}
.help-cta:hover{background:var(--sky);color:#fff;border-color:transparent;transform:translateY(-1px);box-shadow:var(--shadow-sky)}

/* mentor support card — shown once at the end of the plan */
/* Support card — WHITE, and last on the page. It was navy-on-gradient and sat above the
   day's work, where it out-shouted the one thing the student is meant to do next. It is
   a safety net: available, not attention-grabbing. */
.mentor-wrap{max-width:740px;margin:34px auto 44px;padding:0 clamp(16px,3vw,40px)}
.mentor{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;
  background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow2)}
.mentor-av{width:52px;height:52px;border-radius:16px;background:var(--ice);display:grid;place-items:center;font-size:26px;flex:none}
.mentor-main{flex:1;min-width:0}
.mentor-h{font-size:15.5px;font-weight:700;line-height:1.3;color:var(--navy)}
.mentor-p{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.mentor-p b{color:var(--navy)}
/* Two actions, WhatsApp first and Call to its right. WhatsApp carries WhatsApp's own
   green so it is recognised at a glance; Call stays brand navy as the secondary. */
.mentor-acts{flex:none;display:flex;align-items:center;gap:10px}
.mentor-btn{flex:none;background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;text-decoration:none;padding:12px 18px;border-radius:24px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;transition:transform .25s var(--spring),box-shadow .2s var(--ease)}
.mentor-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 20px rgba(19,27,99,.24)}
.mentor-btn.wa{background:#25D366;color:#0b3d1f}
.mentor-btn.wa:hover{box-shadow:0 8px 20px rgba(37,211,102,.38)}
.mentor-btn.call{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.mentor-btn.call:hover{border-color:var(--navy);box-shadow:0 8px 20px rgba(19,27,99,.16)}
.wa-i{flex:none;display:block}
@media(max-width:560px){
  .mentor{flex-direction:column;text-align:center}
  /* Side by side is the point of the pair, so they stay in one row and share the width
     rather than stacking into two full-width bars. */
  .mentor-acts{width:100%}
  .mentor-btn{flex:1 1 0;justify-content:center;padding:12px 10px;font-size:12.5px}
}

/* Q-bank facts as bullets rather than a five-sentence paragraph the student re-reads
   on every one of 43 days. */
.csub-list{margin:5px 0 0;padding-left:17px;display:flex;flex-direction:column;gap:3px}
.csub-list li{font-size:12.5px;color:#3a4a63;line-height:1.5}
.csub-list b{color:var(--navy)}

/* ============ single-day pager ============ */
#dayView{max-width:740px;margin-inline:auto}
.day-card{box-shadow:var(--shadow)}                 /* always the raised, in-focus card */
.day-sum{cursor:default}
.day-sum:hover{background:transparent}
.day-body{padding:2px 18px 18px}
/* one dominant "next day" action; back is a quiet chevron */
.daynav-row{display:flex;gap:10px;align-items:stretch;max-width:740px;margin:16px clamp(16px,3vw,40px) 6px;margin-inline:auto}
.daynav{font-family:inherit;cursor:pointer;border:none;transition:transform .25s var(--spring),box-shadow .2s var(--ease)}
.daynav.prev{flex:none;width:54px;background:#fff;border:1.5px solid var(--line);color:var(--navy);font-size:24px;border-radius:16px;display:grid;place-items:center;line-height:1}
.daynav.prev:hover{border-color:var(--navy);background:var(--ice);transform:translateY(-1px)}
.daynav.next{flex:1;background:var(--grad-brand);color:#fff;border-radius:18px;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 12px 30px rgba(21,202,232,.34);font-size:15.5px;font-weight:700}
.daynav.next:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(21,202,232,.46)}
.daynav.next .dn-d{font-weight:600;opacity:.9}
.daynav.next .dn-a{transition:transform .2s var(--ease);font-size:18px}
.daynav.next:hover .dn-a{transform:translateX(4px)}
.daynav.done{flex:1;text-align:center;font-size:13.5px;color:#166b43;background:linear-gradient(120deg,#eefaf3,#e8f7ef);border:1px solid #c8e9d6;border-radius:18px;padding:18px 22px;line-height:1.55}
.daynav.done b{font-weight:700;display:block;font-size:15px;margin-bottom:2px}
/* help is a whisper, never a competing button */
.mentor-whisper{display:block;text-align:center;max-width:740px;margin:2px auto 52px;padding:10px;font-size:13px;color:var(--muted);text-decoration:none}
.mentor-whisper b{color:var(--sky-deep);font-weight:600}
.mentor-whisper:hover b{text-decoration:underline}

/* onboarding payoff line */
.summary .pace-sub{font-size:13px;color:#3a4a63;margin-top:7px;min-height:18px;transition:opacity .25s var(--ease)}

/* clear the mobile FAB so it never covers the last card */
body.m.on-plan #daySecs{padding-bottom:88px}

/* slim the sticky header on phones — it was eating a third of the screen */
@media(max-width:520px){
  .countdown{padding:8px 12px;font-size:12px}
  .plan-head{padding:11px 16px 9px}
  .ph-title h2{font-size:19px}
  .daybar{padding:9px 16px;gap:8px}
  .daychip{min-width:78px;padding:7px 12px}
  .coach{margin:14px 16px;font-size:13.5px}
}

/* web ↔ mobile layout switches */
/* ============================================================
   PRINT / SAVE AS PDF
   The screen is a one-day-at-a-time pager, so printing what is on screen gave a
   one-day PDF. printPlan() injects #printAll — a cover sheet plus every day — and
   removes it again afterwards. Here we hide the interactive shell and show that.
   ============================================================ */
#printAll{display:none}

@media print{
  @page{ margin:14mm 12mm; }
  /* The entire interactive plan is hidden and replaced by #printAll. Hiding it piecemeal
     was wrong: #plan carries its own copy of the "Straight with you" block, which then
     printed a second time above the cover sheet. #printAll is appended to <body>, not
     inside #plan, so one rule covers all of it. */
  /* .app-wrap carries min-height:100vh. With everything inside it hidden it still
     reserved a full viewport, so the PDF opened with a blank page before the cover.
     Hide the shell itself — #printAll is a sibling of it, not a child. */
  #plan,#setup,.genwrap,.app-wrap{display:none!important}
  body{background:#fff!important}
  body::before,body::after{display:none}

  #printAll{display:block}

  /* Cover sheet gets the first page to itself. */
  /* ---- COVER ----------------------------------------------------------------
     A hero band, the journey, then the numbers. The band bleeds to the paper edge, so
     the @page margin is cancelled with a negative inset rather than removed: every other
     page still needs it. */
  /* THE COVER GETS ITS OWN PAGE WITH NO MARGIN.
     Chrome clips paged content to the page box, so a negative margin cannot reach past
     the @page margin — the band kept a white border on all four sides, which is the one
     thing a full-bleed photograph must not have. A named page sets the margin to zero
     for this page only; the margins come back as padding on the parts that need them,
     and every other page is untouched. */
  @page cover{ margin:0; }
  .pr-cover{break-after:page;text-align:left;page:cover;padding:0 0 14mm}
  /* The width is explicit. A block with negative side margins SHOULD grow by them, but
     Chrome's paged layout resolves the available width against the page box first and the
     band stayed inside the margin — a photograph with a white border around it, which is
     the one thing a bleed is not. */
  .pr-hero{position:relative;margin:0;width:100%;height:124mm;overflow:hidden;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pr-heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
  /* The left third carries the headline, and the photograph is dark green hillside
     there. A wash keeps navy type legible without bleaching the climber on the right. */
  .pr-herotint{position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 30%,rgba(255,255,255,.18) 55%,rgba(255,255,255,0) 72%)}
  .pr-herotxt{position:absolute;inset:0;padding:16mm 12mm}
  .pr-logo{height:34px;width:auto;display:block;margin:0 0 12mm}
  .pr-cover h1{font-size:44px;line-height:1.06;color:var(--navy);letter-spacing:-.03em;margin:0;font-weight:800}
  .pr-exam{display:flex;align-items:center;gap:7px;margin:11px 0 0;font-size:13px;
    font-weight:600;color:var(--navy)}
  .pr-exam svg{width:15px;height:15px;color:var(--sky-deep);flex:none}
  .pr-exam i{color:#9fb0cf;font-style:normal}
  /* The one number that changes how a student feels about the plan they are holding. */
  .pr-count{display:inline-block;margin-top:9mm;padding:14px 22px 12px;border-radius:14px;
    background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(19,27,99,.13);text-align:center}
  .pr-count b{display:block;font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em;
    color:#1668d8}
  .pr-count span{display:block;margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--navy)}

  /* ---- the journey ---- */
  .pr-journey{margin:11mm 12mm 0}
  .pr-jh{display:flex;align-items:center;gap:14px;margin-bottom:9mm;color:var(--navy)}
  .pr-jh span{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
  .pr-jh::before,.pr-jh::after{content:'';flex:1;height:1px;background:#d8e3f2}
  .pr-jrow{display:flex;align-items:flex-start;justify-content:center;gap:0}
  .pr-jstage{flex:1 1 0;text-align:center;min-width:0}
  .pr-jic{width:58px;height:58px;margin:0 auto 9px;border-radius:50%;background:#eef5fd;
    border:1px solid #dbe8f8;display:flex;align-items:center;justify-content:center;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pr-jic svg{width:26px;height:26px;color:var(--navy)}
  .pr-jname{font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--navy)}
  .pr-jdays{display:inline-block;margin-top:7px;padding:5px 14px;border-radius:8px;
    background:#eaf4ff;color:#1668d8;font-size:12.5px;font-weight:700;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pr-jwhen{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:9px;
    padding-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);white-space:nowrap}
  .pr-jwhen svg{width:12px;height:12px;color:#8fa6c8;flex:none}
  /* The chevron between stages. Its own flex item so the three stages stay equal width. */
  .pr-jarrow{flex:0 0 26px;height:58px;position:relative}
  .pr-jarrow::after{content:'';position:absolute;top:24px;left:8px;width:9px;height:9px;
    border-right:2.5px solid #1668d8;border-top:2.5px solid #1668d8;transform:rotate(45deg)}

  /* ---- the numbers ---- */
  .pr-stats{display:flex;margin:10mm 12mm 0;border:1px solid var(--line);border-radius:14px;
    padding:7mm 0;background:#fbfcfe;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pr-stat{flex:1 1 0;text-align:center;position:relative}
  .pr-stat + .pr-stat::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
  .pr-sic svg{width:26px;height:26px;color:#1668d8}
  .pr-stat b{display:block;margin-top:7px;font-size:27px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
  .pr-stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.09em}

  .pr-cfg{font-size:11.5px;color:var(--muted);margin:7mm 12mm 0;text-align:center}
  .pr-cfg + .pr-cfg{margin-top:4px}
  /* Its own page, with the normal margins back — it is no longer inside .pr-cover. */
  .pr-honest{break-before:page;break-inside:avoid}
  .pr-honest .honesty{text-align:left;max-width:none;margin:0;background:#fffdf7;box-shadow:none;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pr-foot{font-size:12px;color:var(--muted);margin:6mm 12mm 0;text-align:center}

  /* Every day starts on a fresh page. A day taller than one page still flows onto the
     next — forcing break-inside:avoid instead would push the whole day wholesale and
     leave half a blank page behind it. Breaking is avoided on the cards, where a split
     actually hurts. */
  .pr-day{break-before:page;break-inside:auto;margin-bottom:0}
  .pr-day:first-of-type{break-before:auto}

  /* The date is the page's title. */
  .pr-dayhead{border-bottom:2px solid var(--navy);padding-bottom:7px;margin-bottom:12px;
    display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .pr-dayhead h2{font-size:20px;color:var(--navy);letter-spacing:-.01em}
  .pr-dayhead span{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap}
  /* The card repeats the date on screen; on paper the page heading already says it. */
  .pr-day .day-sum-date{display:none}
  .pr-day .day-card{border:none;padding:0}
  .pr-day .day-sum{border:none;padding:0 0 6px}

  /* In the flow at the end of each day, NOT position:fixed. Fixed repeats on every page
     but is out of flow, so content on a full page was painted underneath it — 17 of 101
     pages had a card running beneath the footer. In flow it cannot collide. */
  .pr-cta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
    margin-top:14px;padding:9px 10px;border-top:1px solid #d8dfec;
    color:var(--navy)!important;break-inside:avoid}
  .pr-cta b{font-size:11px;font-weight:700}
  /* Real links, so they stay tappable in the PDF; printed as pills so the pair reads as
     two actions rather than one run-on sentence. */
  .pr-cta-btn{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
    text-decoration:none!important;padding:4px 10px;border-radius:20px;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .pr-cta-btn.wa{background:#25D366;color:#0b3d1f!important}
  .pr-cta-btn.call{background:#fff;color:var(--navy)!important;border:1px solid #c9d3e8}
  .pr-foot a{color:var(--navy)!important;text-decoration:none!important;font-weight:700}
  /* Never leave a day's header stranded at the foot of a page. */
  .day-sum{break-after:avoid;page-break-after:avoid}
  .day-card{border:1px solid #d8dfec;box-shadow:none!important;margin-bottom:0}
  .unit,.ucard,.lec-wrap,.sugg,.nashta-card{break-inside:avoid;page-break-inside:avoid}
  /* The Q-bank card is the tallest thing on a day and must be ALLOWED to break. Held
     together it jumped to a page of its own, which both wasted the bottom of the
     previous page and produced a page carrying no date heading. Its groups stay
     unbreakable instead, so one lecture's chips never split across pages. */
  .practice{break-inside:auto}
  .ucard,.practice,.qb-chip{box-shadow:none!important}

  /* Entrance animations must never survive into print. anim.js adds .reveal/.stagger
     (opacity:0) and only clears them when an element scrolls into view; the print tree is
     never on screen, so day bodies printed BLANK — header only, no lectures, no Q-bank.
     This is the guarantee: it cannot be defeated by timing, unlike the JS-side guards. */
  .reveal,.stagger,.stagger>*,.reveal-pop{opacity:1!important;transform:none!important;
    animation:none!important;transition:none!important}
  .day-sec,.day-body,.wz-panel{animation:none!important;opacity:1!important}

  /* Question banks must be visible on paper — printPlan opens every <details>, and the
     disclosure control itself is meaningless once printed. */
  .qb-detail>.qb-chips{margin-top:10px}
.qb-detail>summary{display:none!important}
  /* Compact on paper: the screen sizing is for thumbs, print is for eyes. Fits more of
     a day onto its own page, which is the point of a per-day page. */
  /* NOT compacted for print. An earlier version shrank cards, chips and type to force a
     day onto one page; the client's call is that a day may run to a second page and
     legibility matters more. */


  /* Links: the deeplinks are unusable on paper and their raw URLs are noise, so keep the
     label and drop the underline rather than printing href text. */
  a{text-decoration:none!important;color:inherit!important}
  .ucard .act{display:none}
  /* A tap target is meaningless on paper, and `color:inherit` above turned the button's
     label white-on-white. The number is in the card's text either way. */
  .mentor-btn,.help-cta{display:none!important}
  /* .pr-cta-btn is the PRINT equivalent and must survive the rule above. */
  .pr-cta-btn{display:inline-flex!important}
}

/* ============================================================
   Per-lecture topics — the chapter markers inside that lecture's own video, listed
   directly beneath its card so each topic says which video teaches it. Replaced a
   day-level "What you'll learn today" panel that pooled every lecture's topics into
   one list, where a topic no longer belonged to anything in particular.
   ============================================================ */
.lec-wrap{display:flex;flex-direction:column;min-width:0}
/* Indented under its card and separated by a small gap, rather than glued to it: the
   card lifts on hover, and a panel welded to its bottom edge would tear away as it moved.
   The inset plus the gap is what says "these belong to the lecture above". */
.lec-topics{margin:7px 9px 0;padding:9px 11px 10px;border-radius:13px;
  background:var(--ice-soft);border:1px solid #e2ebf7}
/* Small, uppercase and muted on purpose: this label repeats under every lecture, so at
   body weight four of them would shout over the topics they are introducing. */
.lec-topics-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;margin:0 0 7px}
.topic-chips{display:flex;flex-wrap:wrap;gap:6px}
.topic-chips span{font-size:12px;font-weight:500;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:5px 10px;line-height:1.35}
/* "+8 more" used to be a dead label. It is now the control on a <details>, so the rest
   of the day's topics expand in place. */
.topic-acc>summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.topic-acc>summary::-webkit-details-marker{display:none}
.topic-chips .topic-more{color:var(--sky-deep);background:#e6f9fd;border:1px solid #c9edf5;
  border-style:dashed;font-weight:600;transition:.2s var(--ease)}
.topic-acc>summary:hover .topic-more{background:#d8f4fb;border-color:#a9e3f0}
.topic-acc>summary:focus-visible .topic-more{outline:none;box-shadow:var(--glow)}
/* Only one of the two pills is ever shown, so the label matches the state. */
.topic-more.less{display:none}
.topic-acc[open]>summary .topic-more.more{display:none}
.topic-acc[open]>summary .topic-more.less{display:inline-flex}
.topic-rest{margin-top:6px}
@media print{
  .p-cta{display:block;font-size:9.5px;font-weight:700;color:var(--sky-deep);
    margin-top:3px;letter-spacing:.02em}
  .lec-topics{background:#fff;break-inside:avoid}
  /* printPlan opens every <details>, so the full list prints — the toggles are noise. */
  .topic-more{display:none!important}
  .topic-rest{margin-top:6px}
}

/* ============================================================
   Download nudge — offered once, ten seconds after the plan appears, and only if the
   student has not already saved it. Suppressed for good afterwards.
   ============================================================ */
.dl-prompt{position:fixed;inset:0;z-index:280;background:rgba(19,27,99,.42);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px);
  animation:fade .25s var(--ease)}
.dl-prompt .dlp-card{background:#fff;border-radius:20px;padding:26px 24px;max-width:360px;
  width:100%;text-align:center;box-shadow:0 24px 60px rgba(19,27,99,.32);
  animation:cardPop .4s var(--spring)}
.dlp-ic{width:52px;height:52px;border-radius:16px;margin:0 auto 14px;display:grid;
  place-items:center;font-size:24px;background:var(--ice);color:var(--navy)}
.dl-prompt b{display:block;font-size:17px;color:var(--navy);margin-bottom:7px}
.dl-prompt p{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 18px}
.dlp-go{width:100%;border:none;background:var(--grad-brand);color:#fff;font-weight:600;
  font-size:14.5px;padding:13px;border-radius:14px;box-shadow:0 6px 18px rgba(19,27,99,.24)}
.dlp-go:hover{transform:translateY(-1px)}
.dlp-no{width:100%;border:none;background:transparent;color:var(--muted);font-size:13px;
  font-weight:500;padding:11px 0 0}
.dlp-no:hover{color:var(--navy)}
@media print{ .dl-prompt{display:none!important} }

/* ============================================================
   Download gate — phone + OTP. Sits above the nudge (z-index 290) because the nudge's
   own button opens it. Styled off the nudge deliberately: a student who has just been
   offered the PDF should feel he is still in the same conversation, not on a login page.
   ============================================================ */
.gate{position:fixed;inset:0;z-index:290;background:rgba(19,27,99,.5);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(4px);
  animation:fade .25s var(--ease);overflow-y:auto}
.gate .gt-card{position:relative;background:#fff;border-radius:20px;padding:28px 24px 24px;
  max-width:380px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(19,27,99,.32);
  animation:cardPop .4s var(--spring)}
.gt-x{position:absolute;top:10px;right:12px;border:none;background:transparent;
  font-size:26px;line-height:1;color:var(--muted);padding:4px 8px}
.gt-x:hover{color:var(--navy)}
.gt-logo{width:44px;height:44px;margin:0 auto 12px;display:block}
.gate b{display:block;font-size:18px;color:var(--navy);margin-bottom:7px}
.gate p{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 16px}
/* The +91 is fixed text, not part of the input: a student pasting a number with a
   country code should not end up sending it twice. */
.gt-field{display:flex;align-items:center;gap:8px;border:1.5px solid #dfe3f5;
  border-radius:13px;padding:0 12px;transition:border-color .2s var(--ease)}
.gt-field:focus-within{border-color:var(--navy)}
.gt-cc{font-size:15px;font-weight:600;color:var(--navy);padding-right:8px;
  border-right:1px solid #e6e9f7}
.gt-field input{flex:1;border:none;outline:none;font-family:inherit;font-size:16px;
  padding:14px 0;letter-spacing:.4px;color:var(--navy);background:transparent}
/* 16px on the inputs is not cosmetic — iOS Safari zooms the whole page in on any
   focused field below it, and the modal then sits half off-screen. */
.gt-otp{width:100%;border:1.5px solid #dfe3f5;border-radius:13px;padding:14px;
  font-family:inherit;font-size:24px;font-weight:700;text-align:center;
  letter-spacing:10px;text-indent:10px;color:var(--navy);outline:none}
.gt-otp:focus{border-color:var(--navy)}
.gt-err{font-size:12.5px;color:#c62828;min-height:17px;margin:7px 0 0;line-height:1.4}
.gt-go{width:100%;border:none;background:var(--grad-brand);color:#fff;font-weight:600;
  font-size:14.5px;padding:13px;border-radius:14px;margin-top:10px;
  box-shadow:0 6px 18px rgba(19,27,99,.24)}
.gt-go:hover{transform:translateY(-1px)}
.gt-link{border:none;background:transparent;color:var(--navy);font-family:inherit;
  font-size:12.5px;font-weight:600;text-decoration:underline;padding:0}
.gt-link[disabled]{color:var(--muted);text-decoration:none;font-weight:500}
.gt-resend{font-size:12.5px;color:var(--muted);margin-top:14px}
.gt-fine{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:14px}
.gt-spin{display:flex;gap:6px;justify-content:center;margin:6px 0 16px}
.gt-spin i{width:9px;height:9px;border-radius:50%;background:var(--navy);
  animation:gtBounce 1s infinite var(--ease)}
.gt-spin i:nth-child(2){animation-delay:.15s}
.gt-spin i:nth-child(3){animation-delay:.3s}
@keyframes gtBounce{0%,80%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-6px)}}
/* The page behind a modal must not scroll under it on a phone. */
body.gate-open{overflow:hidden}
@media print{ .gate{display:none!important} }

/* Shown only when the browser has no working print dialog (in-app webviews). */
.print-help{position:fixed;inset:0;z-index:300;background:rgba(19,27,99,.45);
  display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.print-help .ph-card{background:#fff;border-radius:18px;padding:22px;max-width:400px;
  box-shadow:var(--shadow);text-align:left;position:relative}
/* Dismissal, deliberately quiet — the point of this card is the one button below it.
   Padded well past the glyph so it is still a comfortable thumb target. */
.print-help .ph-x{position:absolute;top:6px;right:8px;border:none;background:none;
  color:#98a3b5;font-size:22px;line-height:1;padding:8px 11px;cursor:pointer}
/* Right padding keeps the heading clear of the ✕ when it wraps to two lines. */
/* The card HEADING only — hence the direct-child selector. This used to be `.print-help b`,
   which also caught every bold word inside a paragraph and made each one a block: mid-
   sentence emphasis broke onto its own line and left the following full stop stranded on a
   line of its own. Any notice with a bold phrase in its copy was affected. */
.print-help .ph-card > b{color:var(--navy);font-size:15px;display:block;margin-bottom:8px;
  padding-right:26px}
/* Emphasis inside body copy stays inline, and names controls the student has to find. */
.print-help p b{color:var(--navy);font-weight:600}
.print-help p{font-size:13px;color:#3a4a63;line-height:1.6;margin:0 0 16px}
/* The way out of the in-app browser: "Open in Chrome" on Android, "Copy link" on iOS.
   An <a> and a <button> share this class, so the anchor needs the text styling reset. */
.print-help .ph-go{display:block;box-sizing:border-box;border:none;text-decoration:none;
  text-align:center;background:var(--grad-brand);color:#fff;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:12px;width:100%;margin-bottom:9px;cursor:pointer}
/* Once the link is copied the button stops being an action and becomes the thing to
   paste — so it has to be selectable and able to wrap a whole URL without overflowing. */
.print-help .ph-go.ok{background:#eef1ff;color:var(--navy);font-weight:600;font-size:12px;
  word-break:break-all;user-select:all;-webkit-user-select:all}
/* The card's last element is now the CTA, so it carries no bottom gap of its own. */
.print-help .ph-go:last-child{margin-bottom:0}
/* The way out of the way out. A third of in-app downloads DO finish, so a student who
   would rather not leave the app must never be trapped by the notice offering to move
   them. Deliberately quieter than the primary action, not hidden. */
.print-help .ph-note{font-size:12px;color:#5a6b85;line-height:1.6;margin:12px 0 0;text-align:center}
.print-help .ph-link{display:block;width:100%;margin:10px 0 0;padding:8px;border:none;
  background:none;color:var(--muted,#5b6683);font:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline}
.print-help .ph-link:hover{color:var(--navy,#131B63)}
@media print{ .print-help{display:none!important} }

/* ============================================================
   First activity of the plan — "Start here"
   Whatever the plan opens with (a lecture, a Q-bank or a paper) gets one unmissable
   marker. There is only ever ONE of these, so it can afford to be loud.
   ============================================================ */
.first-act{position:relative;border-color:var(--sky)!important;
  box-shadow:0 0 0 2px rgba(21,202,232,.30),0 10px 26px rgba(21,202,232,.22)!important;
  background:linear-gradient(120deg,#fff,#f2fcfe)!important}
.start-badge{position:absolute;top:-11px;left:14px;z-index:1;
  display:inline-flex;align-items:center;gap:5px;
  background:var(--grad-brand);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
  box-shadow:0 4px 12px rgba(19,27,99,.28);white-space:nowrap}
/* The card gets a little headroom so the badge does not sit on the card above it. */
.cards-row .first-act,.practice.first-act{margin-top:8px}
@media (prefers-reduced-motion:no-preference){
  .first-act{animation:firstPulse 2.4s var(--ease) 3}
}
@keyframes firstPulse{
  0%,100%{box-shadow:0 0 0 2px rgba(21,202,232,.30),0 10px 26px rgba(21,202,232,.22)}
  50%    {box-shadow:0 0 0 5px rgba(21,202,232,.18),0 12px 30px rgba(21,202,232,.30)}
}
@media print{
  /* The screen treatment does not survive as ink. On paper the glow prints as a fuzzy
     grey halo, and the badge — a pill floating outside the card — reads as detached,
     colliding with whatever sits above it. Print gets a flat version instead: a solid
     navy rule down the side of the card, and the label INSIDE it, in the flow. */
  /* Prominence that survives as INK. The first flat version (white fill, hairline border,
     9px grey label at 75% opacity) was too quiet to find on a dense page. It is now a
     tinted card with a heavy navy rule and a solid badge — all flat fills, which print
     cleanly, unlike the screen's glow. print-color-adjust:exact stops the browser
     helpfully dropping the fills to save ink, which would undo the whole thing. */
  .first-act{animation:none!important;box-shadow:none!important;
    border:1.5px solid #8fd2e2!important;border-left:5px solid var(--navy)!important;
    background:#eff9fd!important;position:relative;padding-top:15px!important;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .cards-row .first-act,.practice.first-act{margin-top:12px}
  /* Tucked into the card's own top-right corner: attached to the card, out of the way
     of the title, and not a flex item pushing the icon across. The arrow that normally
     sits there is hidden in print, so the corner is free. */
  .start-badge{position:absolute;top:6px;right:9px;left:auto;margin:0;
    background:var(--navy)!important;color:#fff!important;box-shadow:none!important;
    font-size:8.5px;font-weight:700;letter-spacing:.08em;padding:2px 8px!important;
    border-radius:999px;opacity:1;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* ============================================================
   Question-bank disclosure — the day's linked Q-bank categories.
   Collapsed by default so the day card stays quiet (LOGIC.md §4:
   the day shows ONE Q-bank activity, not 40 block titles), but one
   tap from the real banks now that each carries its own deeplink.
   ============================================================ */
.qb-detail{margin-top:11px}
.qb-detail>.qb-chips{margin-top:10px}
.qb-detail>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:600;color:var(--sky-deep);background:#e6f9fd;border:1px solid #c9edf5;
  border-radius:999px;padding:6px 13px;transition:.2s var(--ease);-webkit-tap-highlight-color:transparent}
.qb-detail>summary::-webkit-details-marker{display:none}
.qb-detail>summary::before{content:'▸';font-size:10px;transition:transform .2s var(--ease)}
.qb-detail[open]>summary::before{transform:rotate(90deg)}
.qb-detail>summary:hover{background:#d8f4fb;border-color:#a9e3f0}
.qb-detail>summary:focus-visible{outline:none;box-shadow:var(--glow)}
.qb-chips{display:flex;flex-wrap:wrap;gap:6px}
.qb-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:6px 10px;text-decoration:none;transition:.2s var(--ease);max-width:100%}
.qb-chip>span{flex:none;font-size:10.5px;font-weight:700;color:var(--sky-deep);
  background:var(--ice);border-radius:6px;padding:1px 6px}
a.qb-chip:hover{border-color:#9fdcea;background:#f4fcfe;transform:translateY(-1px)}
a.qb-chip:focus-visible{outline:none;box-shadow:var(--glow)}
.qb-chip.flat{opacity:.62}

/* ============================================================
   "Straight with you" — what the plan could NOT fit.
   Deliberately plain and calm: this is the honesty surface, and a
   loud red panel would read as an error rather than a fact.

   THE CLASS IS .honesty. Every rule in this block used to say .honest, which has not
   existed in the markup since the block became a <details class="honesty">. So none of
   it applied: on the PDF cover the note fell back to a browser-default <ul>, inheriting
   the cover's text-align:center — centred bullets, default sizes, no panel. It appears
   only on covers where something did NOT fit, which is why it survived unnoticed.
   ============================================================ */
.honesty{max-width:740px;margin:16px clamp(16px,3vw,40px);margin-inline:auto;padding:17px 19px;
  border-radius:16px;background:#fffdf7;border:1px solid #f0e2c4;box-shadow:var(--shadow2)}
.honesty summary{list-style:none;cursor:default}
.honesty summary::-webkit-details-marker{display:none}
.honesty summary b,.honesty h3{font-size:13.5px;color:var(--warn-text)}
.honesty ul{margin:9px 0 0;padding-left:19px;display:flex;flex-direction:column;gap:7px}
.honesty li{font-size:12.5px;color:#3a4a63;line-height:1.55}
.honesty .mentor{margin-top:15px;margin-inline:0;max-width:none}
/* One marker per tone, so "this was dropped" and "this is how to fix it" are told apart
   at a glance instead of reading as one undifferentiated list of bad news. */
.honesty .hn-ok{list-style:none;margin-left:-19px;padding-left:19px;position:relative}
.honesty .hn-ok::before{content:'✓';position:absolute;left:0;color:#12a3b8;font-weight:700}
.honesty .hn-fix{color:#1b2240}
.honesty .hn-foot{margin-top:12px;padding-top:10px;border-top:1px solid #f0e2c4;
  font-size:12px;color:#5b6683;line-height:1.55}

/* ============================================================
   RESPONSIVE
   The prototype leaned on a JS class (body.m / body.w) flipped at a
   single 800px breakpoint, so layout depended on scripting and had
   exactly two states. These are real media queries: they work with
   JS off, and they cover the sizes students actually hold.
   Breakpoints: 1024 (small laptop) · 768 (tablet) · 560 (large phone)
                · 400 (small phone) · landscape-short.
   ============================================================ */

/* Never let anything push the page sideways. Wide content scrolls in its
   own box instead — the daybar and stat strip already do this. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
/* Long lecture and block names are unbreakable strings on narrow screens. */
.ucard .cttl,.unit .ttl,.qb-chip,.daychip b{overflow-wrap:anywhere}

@media (max-width:1024px){
  .wizard{padding:22px clamp(16px,4vw,32px) 140px}
}

@media (max-width:768px){
  /* One column of cards — two 290px columns cannot fit and were collapsing
     into a cramped 1.2-column grid with clipped titles. */
  .cards-row{grid-template-columns:minmax(0,1fr)}   /* minmax(0,..) not 1fr: `1fr`'s implicit min is min-content, which overflowed narrow screens */
  .day-sec{padding:20px 16px}
  .coach{margin:14px 16px;padding:13px 15px}
  .honesty{margin:14px 16px;padding:15px 16px}
  .tiles{gap:10px}
  .unit{margin-top:18px}
  .unit .ttl{font-size:16px}
  /* The mentor card stacks: side-by-side left an 80px-wide button. */
  .mentor{flex-direction:column;align-items:flex-start;text-align:left;gap:12px}
  .mentor-btn{width:100%;text-align:center}
}

@media (max-width:560px){
  .wizard{padding:18px 16px 132px}
  /* The reserve above has to clear the FIXED cta block, and 132px stopped being
     enough at the narrow end: below ~370px the hint under the button wraps to two
     lines and the block measures 146px, so the last row of the panel sat 14px under
     it — at 320px that buried the 1.75x and 2x speeds, which stayed unreachable even
     scrolled all the way down.
     It only surfaced when the start-date field was removed: that field sat at the
     bottom of the panel and had been acting as the spacer covering the shortfall. */
  .wz-h{font-size:clamp(21px,6vw,27px)}
  .wz-sub{font-size:13px}
  .summary{padding:17px;margin:18px auto 4px}
  .practice{padding:12px 13px;gap:10px}
  .practice>.ic{width:34px;height:34px;font-size:14px}
  .ucard{padding:12px 13px;gap:11px}
  .ucard .ic{width:38px;height:38px;font-size:15px}
  .day-sec{padding:17px 14px}
  .coach{margin:12px 14px}
  .honesty{margin:12px 14px}
  /* Chips wrap rather than forcing a horizontal scroll inside a card. */
  .qb-chip{font-size:11.5px;padding:5px 9px}
}

@media (max-width:370px){
  /* 146px measured + a little slack, so a third hint line could not bury a control
     again. Nothing above the fold moves; this is only the floor beneath the panel. */
  .wizard{padding-bottom:164px}
}

@media (max-width:400px){
  .tiles{gap:8px}
  .tile{min-width:0;flex:1 1 calc(33.333% - 6px)}
  .ph-row{gap:8px}
  .ph-title h2{font-size:17px}
  .iconbtn.wide{padding:6px 10px;font-size:12px}
  .day-sec{padding:15px 12px}
  .coach{margin:11px 12px;font-size:13px}
  .honesty{margin:11px 12px}
  .daynav-row{margin-inline:12px}
}

/* A phone held sideways has ~380px of height. A 150px sticky header plus a
   fixed CTA leaves almost nothing, so both shrink and the header unsticks. */
@media (max-height:480px) and (orientation:landscape){
  :root{--stick:0px}
  .plan-sticky{position:static}
  .wizard{padding-bottom:110px}
  .wz-cta-wrap{padding:12px}
}

/* Touch targets: the WCAG 2.2 minimum is 24px, Apple/Google advise ~44px.
   The chevron day-nav and icon buttons were under both on a phone. */
@media (hover:none) and (pointer:coarse){
  .daynav,.iconbtn,.qb-detail>summary,.qb-chip,.pill,.daychip{min-height:44px}
  .daynav.prev{min-width:44px}
  .ucard:hover{transform:none}   /* no hover lift where there is no hover */
  .daychip:hover{transform:none}
  a.qb-chip:hover{transform:none}

  /* ---- the rest of the touch targets -------------------------------------
     Measured on real widths (320/360/390/414), these were the controls still
     under the 44px minimum: the tick box at 22x22, the gate's close button at
     33x34, the compact edit button at 32 wide, and four controls 26-42px tall.
     A 22px circle is about 4mm — smaller than a fingertip, so the student aims
     rather than taps.

     TWO TECHNIQUES, and which one is used matters.

     A control that can simply grow does grow: min-height moves the pixels it
     owns and cannot reach into a neighbour.

     A control with a FIXED size — a 22px circle, a close cross pinned to a
     corner — cannot grow without a visible change, so it gets an invisible
     centred overlay instead. That is only safe where the space around it is
     whitespace. It is deliberately NOT used on .dlp-no or .fit-link: both sit
     directly beneath a primary button, and a centred overlay there would
     extend upward over the bottom of the button it sits under, quietly
     stealing taps from the one control the page exists to lead to.
 */

  /* grow in place — no overlap possible */
  .dlp-no, .mentor-whisper, .pill.sm{ min-height:44px; }
  .fit-link{ min-height:44px; display:inline-flex; align-items:center; }
  /* The download button is deliberately compacted to 40px on narrow screens.
     Four pixels is the difference between comfortable and fiddly on the one
     control this whole page exists to lead to, so it keeps its full height. */
  .btn-dl{ min-height:44px; }

  /* fixed-size controls, surrounded by whitespace — invisible overlay */
  .gt-x, .ph-title .iconbtn{ position:relative; }
  .gt-x::before, .ph-title .iconbtn::before{
    content:''; position:absolute; left:50%; top:50%;
    width:100%; height:100%; min-width:44px; min-height:44px;
    transform:translate(-50%,-50%);
  }
}

/* Honour the OS dark preference at least enough not to flash white. The app is a
   light-first brand surface, so this only softens the page canvas rather than
   inventing a full dark theme that has not been designed or contrast-checked. */
@media (prefers-color-scheme:dark){
  html{background:#0e1330}
}

/* ---------------------------------------------------------------------------
   Topics under a lecture, and the fit panel above the plan.
   Both are NORCET 12 additions; everything above this line is shared with the
   NORCET 11 build and deliberately untouched.
   ------------------------------------------------------------------------ */

.topics{
  margin-top:6px; font-size:.86rem; line-height:1.5; color:var(--muted, #5b6683);
}
.topics b{ color:var(--accent-deep, #0b7d90); font-weight:600; }

/* The fit panel. Two tones only: calm blue when the plan loses low-yield topics,
   amber when a high-yield subject is at risk. A plan that fits shows nothing —
   silence is the third state, and it is the commonest one. */
.fit{
  margin:14px 0 4px; border-radius:16px; padding:18px 20px;
  border:1px solid #cfe0f2; background:#e8f2fb; border-left:4px solid #15cae8;
}
.fit.tight{ border-color:#f0cfa8; background:#fdf3e7; border-left-color:#d98324; }
.fit-main{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.fit-ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; font-weight:700; color:#15cae8; box-shadow:0 1px 3px rgba(19,27,99,.08);
}
.fit.tight .fit-ic{ color:#d98324; }
.fit-txt{ flex:1 1 320px; min-width:0; }
.fit-txt h3{ margin:0 0 4px; font-size:1.06rem; font-weight:700; color:#131b63; }
.fit-txt p{ margin:0; font-size:.95rem; line-height:1.6; color:#3d456b; }
.fit-fix{
  margin-top:12px; background:#fff; border-radius:12px; padding:10px 14px;
  font-size:.93rem; color:#131b63; border:1px solid rgba(19,27,99,.07);
}
.fit-cta{
  flex:0 0 auto; align-self:center; border:0; cursor:pointer;
  padding:12px 20px; border-radius:12px; font-size:.95rem; font-weight:600; color:#fff;
  background:linear-gradient(120deg,#131b63,#2563c9);
}
.fit.tight .fit-cta{ background:linear-gradient(120deg,#8a4a10,#d98324); }
.fit-cta:hover{ filter:brightness(1.08); }
.fit-cta:focus-visible{ outline:3px solid #15cae8; outline-offset:2px; }

@media (max-width:620px){
  .fit-cta{ width:100%; }
}

/* In print the panel is information, not a control — the button cannot be pressed on
   paper, and a PDF that shows one reads as broken. */
@media print{
  .fit-cta{ display:none; }
  .fit{ break-inside:avoid; }
  .topics{ color:#444; }
}

/* --- an already-watched lecture ------------------------------------------
   Deliberately quiet: it is a receipt, not a task. Grey ground, no accent, and
   the only affordance is the way back in. The eye should skip it and land on
   whatever is still to do. */
.unit.done{ margin-bottom:10px; }
.donecard{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#f4f6fa; border:1px solid #e4e9f2; border-radius:14px; padding:12px 14px;
}
.donetick{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:#fff;
  border:1px solid #dbe3f0; display:flex; align-items:center; justify-content:center;
  color:#8b94b0; font-size:.95rem;
}
.donetxt{ flex:1 1 200px; min-width:0; font-size:.95rem; line-height:1.5; color:#8b94b0; }
.donetxt b{ font-weight:500; color:#8b94b0; }
.doneword{ color:#12a3b8; font-weight:600; }
.donebtn{
  flex:0 0 auto; text-decoration:none; border-radius:10px; padding:9px 16px;
  background:#e4f4f8; color:#0b7d90; font-weight:600; font-size:.92rem; border:1px solid #cbe9f0;
}
.donebtn:hover{ background:#d5eef5; }
.donebtn:focus-visible{ outline:3px solid #15cae8; outline-offset:2px; }

/* the one thing to do next */
.unit.isnow .ucard{ border-color:#9fe3ef; background:#f2fcfe; }
.nowword{ color:#12a3b8; font-weight:700; }

@media print{
  /* On paper a "Revise" button is not pressable, but the LINK still matters — the PDF
     is read on a phone as often as it is printed. Keep it as text with its href intact. */
  .donebtn{ background:none; border:0; padding:0; color:#0b7d90; }
  .donecard{ background:#f6f7fa; }
}

/* ---------------------------------------------------------------------------
   Day rows and the fit panel — NORCET 12.
   A day is a list to scan, not cards to read: one row per thing, topics under
   the title, chevron on the right so the whole row reads as tappable.
   ------------------------------------------------------------------------ */

.drow{
  display:flex; align-items:flex-start; gap:12px; text-decoration:none;
  background:#f5f7fb; border:1px solid transparent; border-radius:14px;
  padding:13px 14px; margin-bottom:10px; transition:.18s var(--ease);
}
a.drow:hover{ background:#eef3fb; border-color:#dbe6f5; }
a.drow:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.drow:last-child{ margin-bottom:0; }

.ric{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  border:1px solid #e4e9f2;
}
.ri-v{ color:var(--navy); }
.ri-q{ color:#c07a1a; }
.ri-p{ color:#2563c9; }
.ri-done{ color:#8b94b0; }

.rbody{ flex:1 1 auto; min-width:0; }
.rtitle{ font-size:.98rem; font-weight:600; color:var(--navy); line-height:1.45; }
.rmin{ font-weight:400; color:var(--muted,#5b6683); }
.rsub{ margin-top:3px; font-size:.87rem; color:var(--muted,#5b6683); }
.rchev{ flex:0 0 auto; align-self:center; color:var(--sky-deep,#0b7d90); font-size:1.2rem; }

/* Topics sit under the title, in the row — never their own block. The dotted rule
   separates what the lecture IS from what it covers, so the eye can stop at the title
   when it is only scanning for the next thing to watch. */
.drow .topics{
  margin-top:7px; padding-top:7px; border-top:1px dotted #c3cee2;
  font-size:.87rem; line-height:1.5; color:var(--muted,#5b6683);
}
.drow .topics b{ color:var(--sky-deep,#0b7d90); font-weight:600; }
.drow.isnow .topics,.drow.first-act .topics{ border-top-color:#9fe3ef; }

/* The next thing to do, and the very first thing in the whole plan. The pill is INLINE:
   the old badge hung above the card on a negative offset and the day card clips its
   overflow, so it was being cut off exactly where it mattered most. */
.drow.isnow{ background:#f2fcfe; border-color:#9fe3ef; }
.drow.first-act{ background:linear-gradient(120deg,#fff,#f2fcfe); border-color:var(--sky); box-shadow:0 0 0 2px rgba(21,202,232,.22); }
.start-pill{
  display:inline-block; margin-bottom:5px; background:var(--grad-brand); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; white-space:nowrap;
}
.nowword{ color:#12a3b8; font-weight:700; }
.drow.soon{ opacity:.72; }

/* already watched */
.drow.done{ background:#f4f6fa; }
.drow.done .rtitle{ font-weight:500; color:#8b94b0; }
.doneword{ color:#12a3b8; font-weight:600; }
.donebtn{
  flex:0 0 auto; align-self:center; text-decoration:none; border-radius:10px;
  padding:8px 15px; background:#e4f4f8; color:#0b7d90; font-weight:600;
  font-size:.9rem; border:1px solid #cbe9f0; white-space:nowrap;
}
.donebtn:hover{ background:#d5eef5; }

.stage-pill{
  display:inline-block; background:#e8ecfb; color:var(--navy);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; margin-right:8px; white-space:nowrap;
}

/* ---- the fit panel ---- */
.fit{ margin:14px clamp(16px,3vw,40px) 4px; border-radius:18px; padding:20px 22px;
      border:1px solid #cfe0f2; background:#e8f2fb; border-left:4px solid #15cae8; }
.fit.none{ border-color:#f0d8b8; background:#fdf1e3; border-left-color:#b5701a; }
.fit-main{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.fit-ic{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; font-weight:700; color:#2563c9; box-shadow:0 1px 3px rgba(19,27,99,.08);
}
.fit.none .fit-ic{ color:#b5701a; }
.fit-txt{ flex:1 1 340px; min-width:0; }
.fit-txt h3{ margin:0 0 10px; font-size:1.14rem; font-weight:700; color:var(--navy); line-height:1.3; }
.fit-eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--sky-deep,#0b7d90); margin-bottom:6px;
}
.fit.none .fit-eyebrow{ color:#b5701a; }
.fit-ol{ margin:0 0 10px; padding-left:1.35em; color:var(--navy); font-size:.98rem; line-height:1.75; }
.fit-ol .fit-more{ color:var(--muted,#5b6683); list-style:none; margin-left:-1em; }
.fit-verdict{ margin:0; font-size:.95rem; color:var(--navy); }
.fit-verdict .dim{ color:var(--muted,#5b6683); font-weight:400; }
.fit-txt p{ margin:0; font-size:.97rem; line-height:1.65; color:#3d456b; }
.fit-list{ margin-top:10px; font-size:.93rem; }
.fit-list summary{ cursor:pointer; color:var(--sky-deep,#0b7d90); font-weight:600; }
.fit-list ol{ margin:8px 0 0; padding-left:1.35em; color:var(--navy); line-height:1.7; }

.fit-actions{ flex:0 0 auto; display:flex; flex-direction:column; gap:9px; align-items:stretch; min-width:180px; }
.fit-cta{
  border:0; cursor:pointer; text-align:center; text-decoration:none; display:block;
  padding:13px 22px; border-radius:12px; font-size:.98rem; font-weight:700; color:#fff;
  background:linear-gradient(120deg,#131b63,#2b8fe0);
}
.fit-cta:hover{ filter:brightness(1.08); }
.fit-cta2{
  border:1px solid #cfe0f2; cursor:pointer; text-align:center; background:#fff;
  padding:13px 22px; border-radius:12px; font-size:.98rem; font-weight:700; color:var(--navy);
}
.fit-cta2:hover{ background:#f4f9ff; }
.fit-link{
  border:0; background:none; cursor:pointer; padding:2px; font-size:.93rem;
  color:var(--muted,#5b6683); font-weight:500;
}
.fit-link:hover{ color:var(--navy); text-decoration:underline; }
.fit-cta:focus-visible,.fit-cta2:focus-visible,.fit-link:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

@media (max-width:640px){
  .fit-actions{ width:100%; min-width:0; }
  .fit-ic{ width:38px; height:38px; }
}

@media print{
  .fit-actions{ display:none; }
  .fit{ break-inside:avoid; }
  .rchev{ display:none; }          /* a chevron on paper points at nothing */
  .drow{ background:#f7f8fb; break-inside:avoid; }
  .start-pill{ background:none; color:#0b7d90; border:1px solid #0b7d90; }
}

/* ---------------------------------------------------------------------------
   Phone layout for the NORCET 12 additions.
   The page was already responsive — nothing overflowed — but three blocks all
   explained the same shortfall, and the day header crushed its own date. These
   rules are about breathing room, not about rescuing a broken layout.
   ------------------------------------------------------------------------ */

.day-sum{ align-items:flex-start; gap:10px; }
.day-sum-date{ white-space:nowrap; }
.day-sum-meta{ margin-top:2px; }
.day-sum-r{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

@media (max-width:600px){
  /* Stack the header: a date and a duration fighting over 390px is why "question bank"
     was being cut in half. */
  .day-sum{ flex-direction:column; align-items:stretch; }
  .day-sum-r{ justify-content:flex-start; }
  .day-sum-meta{ white-space:normal; }

  /* Rows stay compact, but the chevron stays: it is what tells a student the row opens
     something. Removing it made the rows read as a printed list. */
  .drow{ padding:12px; gap:9px; }
  .ric{ width:30px; height:30px; font-size:14px; }
  .rtitle{ font-size:.94rem; }
  .drow .topics, .rsub{ font-size:.84rem; }
  .rchev{ font-size:1.05rem; }
  .drow.done{ flex-wrap:wrap; }
  .donebtn{ margin-left:44px; }

  /* Fit panel: full-width buttons, and the icon out of the text's way. */
  .fit{ margin:12px 16px 4px; padding:16px; border-radius:14px; }
  .fit-main{ gap:12px; }
  .fit-txt{ flex:1 1 100%; }
  .fit-txt h3{ font-size:1.04rem; }
  .fit-ol{ font-size:.94rem; line-height:1.65; }
  .fit-actions{ width:100%; }
  .fit-cta,.fit-cta2{ width:100%; padding:14px 18px; }

  /* Long lecture names must wrap rather than force the row wide. */
  .rtitle,.fit-ol li{ overflow-wrap:anywhere; }
}

@media (max-width:380px){
  .fit-ic{ display:none; }   /* on the narrowest phones the words matter more than the icon */
}

/* ===========================================================================
   NORCET 12 — plan day, rebuilt to the design system.
   The three brand colours below were ALREADY the site's tokens, character for
   character, so only the two greys and the type scale are new.
   ======================================================================== */
:root{
  --grey:#A7AEC5;          /* Gray       — meta text, inactive marks */
  --grey-lt:#F0F2F8;       /* Light Gray — row ground */
  /* Type scale, named rather than sprinkled through the file as sizes. */
  --t-h1:28px; --t-h2:16px; --t-h3:15px; --t-body:13px; --t-body2:12px; --t-label:11px;
  --sh-sm:0 1px 3px rgba(19,27,99,.06);
  --sh-md:0 8px 24px rgba(19,27,99,.08);
  --sh-lg:0 16px 40px rgba(19,27,99,.10);
}

/* ---- day header ---- */
.day-head{ padding:22px clamp(16px,3vw,26px) 4px; }
.day-eyebrow{
  font-size:var(--t-label); font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--sky-deep,#0b7d90);
}
.day-eyebrow .sep{ color:var(--grey); margin:0 2px; }
.day-title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:6px; }
.day-title{ font-size:var(--t-h1); font-weight:700; color:var(--navy); line-height:1.15; margin:0; letter-spacing:-.5px; }
.day-count{ font-size:var(--t-body2); font-weight:500; color:var(--grey); white-space:nowrap; }
.day-line{ margin:8px 0 0; font-size:var(--t-body); line-height:1.6; color:var(--muted); max-width:46ch; }
.day-plan-label{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:20px clamp(16px,3vw,26px) 10px;
  font-size:var(--t-label); font-weight:600; letter-spacing:.10em; text-transform:uppercase; color:var(--sky-deep,#0b7d90);
}
.day-when{ font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--grey); font-size:var(--t-body2); }
.day-body{ padding:0 clamp(16px,3vw,26px) 20px; }

/* ---- a plan row ---- */
.prow{ background:var(--grey-lt); border:1px solid transparent; border-radius:12px; margin-bottom:10px; overflow:hidden;
  /* the anchor for the open row's tick circle, below */ position:relative; }

.prow:last-child{ margin-bottom:0; }
.prow-head{
  display:grid; grid-template-columns:26px 30px 1fr auto 16px;
  align-items:center; gap:10px; padding:12px 14px; cursor:pointer;
}
.prow.no-expand .prow-head{ cursor:default; }
.prow-head:focus-visible{ outline:3px solid var(--sky); outline-offset:-3px; border-radius:12px; }
.prow-n{ font-size:var(--t-body2); font-weight:600; color:var(--grey); font-variant-numeric:tabular-nums; }
.tickdone{ color:#12a3b8; display:flex; align-items:center; justify-content:center; }
.ric{
  width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid #e4e9f2;
  display:flex; align-items:center; justify-content:center;
}
.ric svg{ display:block; }
.ri-v{ color:var(--navy); } .ri-q{ color:#2563c9; } .ri-p{ color:#2563c9; }
.prow-t{ font-size:var(--t-h3); font-weight:600; color:var(--navy); line-height:1.4; min-width:0; }
.prow-done{ display:block; font-size:var(--t-body2); font-weight:400; color:var(--grey); margin-top:1px; }
.prow-m{ font-size:var(--t-body2); color:var(--grey); white-space:nowrap; font-variant-numeric:tabular-nums; }
.prow-chev{ color:var(--grey); display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease,ease); }
.prow-chev svg{ display:block; }
.prow-chev.empty{ visibility:hidden; }
.prow.open .prow-chev{ transform:rotate(180deg); }

.prow.is-now{ background:#f2fcfe; border-color:#9fe3ef; }
.prow.is-done{ background:#f3f9f5; }
.prow.is-done .prow-t{ color:var(--grey); font-weight:500; }

/* ---- the expanded panel ---- */
.prow-panel{ display:none; padding:0 14px 14px 80px; }
.prow.open .prow-panel{ display:block; }
.rp-h{
  font-size:var(--t-label); font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--sky-deep,#0b7d90); margin-bottom:8px;
}
.rp-list{ margin:0 0 14px; padding-left:1.1em; display:flex; flex-direction:column; gap:5px; }
.rp-list li{ font-size:var(--t-body); color:var(--muted); line-height:1.5; }
.rp-list li::marker{ color:var(--grey); }
.rp-note{ margin:0 0 4px; font-size:var(--t-body); color:var(--muted); line-height:1.55; }
.rp-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-primary{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; cursor:pointer; border:0;
  background:var(--sky); color:#fff; font-size:var(--t-body); font-weight:600;
  padding:10px 18px; border-radius:8px; box-shadow:var(--sh-sm);
}
.btn-primary:hover{ filter:brightness(1.06); }
.btn-secondary{
  display:inline-flex; align-items:center; cursor:pointer; background:#fff; color:var(--navy);
  border:1px solid #cfd6e6; font-size:var(--t-body); font-weight:600; padding:10px 18px; border-radius:8px;
}
.btn-secondary:hover{ background:#f6f9ff; }
.btn-primary:focus-visible,.btn-secondary:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

@media (max-width:600px){
  .day-title{ font-size:23px; }
  /* On a phone the title, the duration, the chevron and the tick box cannot all share one
     line — the lecture name loses and wraps to three. So the duration drops beneath the
     title, where it still reads as part of the same thing and costs no width. */
  .prow-head{
    grid-template-columns:22px 26px 1fr 14px;
    /* The duration gets its OWN row beneath the title rather than sharing the title's
       cell — sharing it overlapped the two, and the duration printed through the
       lecture name. */
    /* Every column except the title SPANS BOTH ROWS.
       They used to sit in the top row only, so align-self:center centred them within
       that row rather than within the card — and since the duration adds a second row
       underneath, the tick circle and the chevron ended up 11px above the middle of the
       card they belong to. Measured: -11px at 390px, 0 on desktop, where the row is a
       single line and the bug cannot appear. Spanning both rows makes centre mean the
       centre of the card, so mobile now matches desktop instead of quietly differing. */
    grid-template-areas:
      'n i t c'
      'n i m c';
    gap:4px 8px; padding:11px 12px; align-items:start;
  }
  .prow-n{ grid-area:n; } .prow-head .ric{ grid-area:i; }
  .prow-t{ grid-area:t; font-size:14px; }
  .prow-chev{ grid-area:c; }
  .prow-m{ grid-area:m; justify-self:start; font-size:11px; }
  .prow-n,.prow-head .ric,.prow-chev{ align-self:center; }
  .prow-panel{ padding-left:14px; }
  .rp-actions .btn-primary,.rp-actions .btn-secondary{ flex:1 1 100%; justify-content:center; }
  .day-title-row{ gap:6px; }
}

@media print{
  /* Every panel prints OPEN. A plan of collapsed headings is a plan with its content
     removed — and this project has printed blank days before. */
  .prow-panel{ display:block !important; }
  .prow-chev{ display:none !important; }
  /* The action ROW stays. Hiding it took the "Watch lesson" anchors with it, and those
     anchors are the PDF's links — the file went from 1,187 clickable links to 443 without
     anything looking wrong. Only the button that cannot work on paper is dropped. */
  .btn-secondary{ display:none !important; }
  .btn-primary{
    background:none !important; box-shadow:none !important; padding:0 !important;
    color:#0b7d90 !important; font-weight:600; text-decoration:underline;
  }
  .prow{ background:#f7f8fb; break-inside:avoid; }
  .day-head,.day-plan-label{ break-after:avoid; }
}

/* The counter sits on the eyebrow line, where the moodboard puts it in five of its
   eight states, rather than beside the title. */
.day-eyebrow{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.day-count{ font-size:var(--t-body2); font-weight:500; color:var(--grey); white-space:nowrap;
  letter-spacing:.02em; text-transform:none; }
.day-title{ margin-top:6px; }

/* ---- mentor support ---- */
.mentor-support{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--sh-md); padding:22px clamp(18px,3vw,28px); margin:16px 0 4px;
}
.ms-top{ margin-bottom:14px; }
.ms-label{
  font-size:var(--t-label); font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--navy);
}
.ms-body{ display:flex; align-items:center; gap:clamp(14px,3vw,32px); }
.ms-art{ flex:0 0 auto; }
.ms-art img{ display:block; width:clamp(120px,22vw,200px); height:auto; }
.ms-main{ flex:1 1 auto; min-width:0; }
.ms-h{ margin:0; font-size:clamp(1.05rem,2.4vw,1.4rem); font-weight:700; color:var(--navy); line-height:1.25; }
.ms-sub{ margin:6px 0 16px; font-size:var(--t-body); color:var(--muted); }
.ms-options{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.ms-opt{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  border:1px solid #e4e9f2; border-radius:14px; padding:16px 18px; background:#fff;
  transition:.18s var(--ease,ease);
}
.ms-opt:hover{ border-color:var(--sky); box-shadow:var(--sh-sm); }
.ms-opt:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.ms-ic{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.ms-ic.wa{ color:#25D366; }
.ms-ic.wa svg{ width:28px; height:28px; }
.ms-ic.call{ color:#1a56db; }
.ms-txt{ display:flex; flex-direction:column; min-width:0; }
.ms-txt b{ font-size:var(--t-h3); font-weight:700; color:var(--navy); line-height:1.3; }
.ms-txt small{ font-size:var(--t-body2); color:var(--muted); margin-top:2px; }

@media (max-width:640px){
  .ms-body{ flex-direction:column; align-items:flex-start; gap:14px; }
  .ms-art{ align-self:center; }
  /* The two options stay SIDE BY SIDE here rather than stacking. They are a choice
     between two doors, and a choice reads as a choice when both doors are in view at
     once; stacked, the second one looked like an afterthought below the first.
     Everything below is what makes two columns survive a 320px screen. */
  .ms-opt{ padding:14px 12px; gap:10px; }
  .ms-ic.wa svg, .ms-ic.call svg{ width:24px; height:24px; }
  /* The label must never break across lines — "WhatsApp" over "us" is the exact thing
     that made stacking look necessary in the first place. */
  .ms-txt b{ white-space:nowrap; }
  .ms-txt small{ line-height:1.3; }
}
/* On a phone, two columns plus an icon BESIDE the text leaves about 110px for the
   words, and "Talk to an expert" needs a shade more than that — it wrapped to two
   lines while "Chat instantly" did not, so the two tiles disagreed about their own
   height. Moving the icon above the text returns those ~34px to the label and both
   descriptions fit on one line again. */
@media (max-width:413px){
  .ms-opt{ flex-direction:column; align-items:flex-start; gap:8px; padding:13px 12px; }
}
@media print{
  /* On paper the two options are the phone number and nothing else useful. */
  .mentor-support{ break-inside:avoid; box-shadow:none; }
  .ms-opt{ border-color:#dbe3f0; }
}

/* ---- today's focus ----
   What to DO with the day, which is a different question from what is on it. Sits after
   the rows because it is guidance, not a task — putting it above would push the actual
   plan below the fold on a phone. */
.day-focus{
  margin:16px clamp(16px,3vw,26px) 22px; padding:16px 18px;
  background:var(--ice,#E5F0F8); border-radius:12px;
}
.df-h{
  font-size:var(--t-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy); margin-bottom:8px;
}
.day-focus ul{ margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:6px; }
.day-focus li{ font-size:var(--t-body); color:#3d456b; line-height:1.55; }
.day-focus li::marker{ color:var(--sky); }
@media print{ .day-focus{ break-inside:avoid; background:#f2f6fb; } }

/* A chip naming what a row is, where the title alone would not say. */
.prow-chip{
  display:inline-block; vertical-align:middle; margin-left:8px;
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; background:#e8ecfb; color:var(--navy);
}
.prow.is-done .prow-chip{ background:#e4ece7; color:var(--grey); }
.rp-h.good{ color:#12704a; }