/* ============================================================================
   CCAR-F, Manual theme.

   Direction B from the "three new looks" canvas, chosen by XIG on 28 September
   2026. It loads after console.css and restyles the same class names, so no
   page is rewritten and removing this one file puts the Console look back.

   What changes, and why (the brief was "look less made by Claude"):
   - One typeface, Schibsted Grotesk, for headings, body and interface. Mono is
     kept for code only. The small uppercase tracked mono labels are gone.
   - Square corners everywhere. No rounded cards, pills or circles.
   - Heavy black rules (4px and 2px) divide the page instead of boxes.
   - One accent, a red-orange, for numbers and the current place. Buttons are
     solid black. Green and amber stay, but only for right, wrong and warnings.
   - Big red numbers: the module number in the rail, the lesson number beside
     the lesson title, and the section numbers on the course home.
   - The trap is a solid black box; the rule is a thick black frame.
   ============================================================================ */

:root{
  --ui-bg:#F7F7F4; --ui-panel:#F7F7F4; --ui-panel-2:#EFEFEA; --ui-hover:#E6E6E0;
  --ui-line:#BDBDB6; --ui-line-2:#D8D8D1; --ui-edge:#111111;
  --ui-ink:#111111; --ui-ink-2:#2B2B28; --ui-ink-3:#5A5A55;
  --ui-accent:#C23A18; --ui-accent-hi:#9E2E12; --ui-on-accent:#ffffff;
  --ui-accent-soft:rgba(194,58,24,.10); --ui-accent-line:rgba(194,58,24,.5);
  --ui-code-bg:#E9E9E3; --ui-code-ink:#111111;
  --ui-quote:none;
  --ui-track:#DDDDD6;
  --trap-kick:#FF8A66;

  --ui-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ui-serif:var(--ui-sans);
  /* Mono is for code only. Every other use of the mono token becomes the sans. */
  --code-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ui-mono:var(--ui-sans);

  --t-kick:13px; --t-lede:20px; --t-lede-s:18px; --t-num:15px; /* was 14; no 14 on the scale (4 Oct 2026) */ --t-ui:15px; --t-body:17px;
  --t-title:19px; --t-h3:24px; --t-screen:30px; --t-page:52px;
  --track:0;
  --r-sm:0; --r:0; --r-lg:0; --r-xl:0;
  --shadow:none;
  --heavy:4px solid var(--ui-ink);
  --mid:2px solid var(--ui-ink);
}
:root[data-theme="dark"]{
  --ui-bg:#121211; --ui-panel:#121211; --ui-panel-2:#1C1C1A; --ui-hover:#262623;
  --ui-line:#44443F; --ui-line-2:#2E2E2B; --ui-edge:#EDEDE8;
  --ui-ink:#EDEDE8; --ui-ink-2:#D2D2CB; --ui-ink-3:#A2A29A;
  --ui-accent:#FF6A3D; --ui-accent-hi:#FF8A66; --ui-on-accent:#121211;
  --ui-accent-soft:rgba(255,106,61,.14); --ui-accent-line:rgba(255,106,61,.5);
  --ui-code-bg:#23231F; --ui-code-ink:#EDEDE8;
  --ui-quote:none;
  --ui-track:#33332F;
  --trap-kick:#C23A18;
  --figline:#8a8a84;
}

/* The pages carry their own dark palette from before the Manual look (navy
   surfaces, a lavender accent), and a page's own dark rule outranks the theme's
   plain :root remapping. Pointed back at the Manual tokens here, so nothing the
   pages style themselves (the player's scrubber, for one) turns blue in the dark
   (XIG, 30 Sep 2026). */
:root[data-theme="dark"]{
  --ink:var(--ui-ink); --ink-2:var(--ui-ink-2); --ink-3:var(--ui-ink-3);
  --ground:var(--ui-bg); --surface:var(--ui-panel); --surface-2:var(--ui-panel-2);
  --line:var(--ui-line); --line-soft:var(--ui-line-2);
  --accent:var(--ui-accent); --accent-ink:var(--ui-accent); --accent-soft:var(--ui-accent-soft);
  --on-accent:var(--ui-on-accent);
  --mod:var(--ui-accent); --stop:var(--ui-warn); --stop-soft:var(--ui-warn-soft);
  --go:var(--ui-ok); --go-soft:var(--ui-ok-soft);
  --warn:var(--ui-warn); --warn-soft:var(--ui-warn-soft);
  --shadow:none;
}

/* Square corners, everywhere. Pages carry their own radii in their own styles,
   so this has to outrank them rather than chase each one. */
*, *::before, *::after{ border-radius:0 !important }

body{ font-family:var(--ui-sans); font-size:var(--t-body); color:var(--ui-ink) }
h1,h2,h3,h4{ font-family:var(--ui-sans); letter-spacing:-.02em }
/* Headings set tight. A heading with no line height of its own took the body's
   1.6, so a large one that wrapped (About's "02 How the course works" on a
   phone) had a gap between its lines as big as the words (XIG, 4 Oct 2026).
   Display headings are set at 1.15, as the Blueprint's domain names are. A
   heading that sets its own line height keeps it. h4 is left out: at body size
   it is a row title (Blueprint lessons) and reads as body text. */
h1,h2,h3{ line-height:1.15 }
body a{ border-bottom-width:2px }
code, pre, kbd, samp{ font-family:var(--code-mono) }
code{ font-size:.86em; padding:1px 5px }

/* ------------------------------------------------------------- labels
   The Console labels were mono, uppercase and tracked. Here a label is plain
   bold text in the quiet grey. */
.lbl, .eyebrow, .rid, .wt .items, .shead .note, .sitenav,
.lhead .bar, .lhead .bar span, .rail .facts, .rail .facts span,
.mockrail .eyebrow, .mockrail .sec, .mockcol .sec, .qn,
body[data-page="resources"] .stamp, body[data-page="lesson"] .bar, body[data-page="lesson"] .crumb{
  font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700;
  letter-spacing:0; text-transform:none; color:var(--ui-ink-3);
}

/* ------------------------------------------------------------ app bar */
.appbar{ background:var(--ui-bg); border-bottom:var(--heavy); padding:0 32px; min-height:64px; gap:12px 32px; box-sizing:border-box }
.appbar .mark{ border:0 }
.appbar .mark i{ display:none }
.appbar .mark b{ font-size:20px; font-weight:800; letter-spacing:-.01em }
.appbar nav{ gap:28px }
.appbar nav a{ padding:0; border:0; color:var(--ui-ink); font-size:var(--t-ui); font-weight:500; background:none }
.appbar nav a:hover{ color:var(--ui-accent); border:0 }
.appbar nav a[aria-current="page"]{ background:none; border:0; color:var(--ui-accent); font-weight:700 }
.appbar .tog{
  font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none;
  background:none; border:var(--mid); color:var(--ui-ink); padding:5px 10px;
}
.appbar .tog:hover{ background:var(--ui-ink); color:var(--ui-bg) }
.avatar{ border:var(--mid); background:none; color:var(--ui-ink) }
.avatar.initial{ font-family:var(--ui-sans); font-weight:800; font-size:15px; letter-spacing:0 }
.avatar:hover{ background:var(--ui-ink); color:var(--ui-bg) }

/* menus hanging off the bar. Every popup, menu and dropdown carries the same
   red offset shadow as the feedback popups (XIG, 1 Oct 2026; was black). */
.acctmenu, .dropmenu{ background:var(--ui-bg); border:var(--mid); box-shadow:6px 6px 0 var(--ui-accent); padding:0 }
.dropmenu a, .dropmenu button, .acctitem, a.acctitem{ padding:11px 14px; border-bottom:1px solid var(--ui-line); font-weight:500 }
.dropmenu a:hover, .dropmenu button:hover, .acctitem:hover{ background:var(--ui-hover) }
.dropmenu [aria-current]{ background:var(--ui-ink); color:var(--ui-bg); font-weight:700 }
.dropmenu .n{ font-family:var(--ui-sans); font-weight:800; font-size:var(--t-ui); color:var(--ui-accent) }
.dropmenu [aria-current] .n{ color:var(--ui-bg) }
.acctnote{ border-top:0; font-family:var(--ui-sans) }

/* ------------------------------------------------- the rail and the column */
/* 400px (was 360, XIG 1 Oct 2026; 340 before that): the docked player's one row of
   controls, Mark to Chapters, needs the room at every speed, 1.25x included. Every rail is this wide. */
body.has-rail .wrap{
  grid-template-columns:400px minmax(0,1fr);
  background:linear-gradient(to right, var(--ui-bg) 0 396px, var(--ui-ink) 396px 400px, transparent 400px);
}
body.has-rail .rail{ top:64px; max-height:calc(100vh - 64px); padding:32px 28px 40px }
body.dock-in-rail .rail{ height:calc(100vh - 64px); padding-bottom:0 }
.rail .modnum{
  display:block; font-size:88px; font-weight:800; line-height:.85; letter-spacing:-.045em; color:var(--ui-accent);
}
.rail .eyebrow{ margin-top:14px }
.rail h1{ margin:6px 0 0; font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.02em }
.rail .blurb{ font-size:var(--t-ui); color:var(--ui-ink-2); margin-top:12px }
.rail .facts{ display:block; margin-top:16px; border-top:var(--mid) }
.rail .facts span{ display:block; padding:7px 0; border-bottom:1px solid var(--ui-line); font-weight:500; color:var(--ui-ink-2) }
body .rail .facts span:last-child{ border-bottom:var(--mid) }
.rail .meter{ margin-top:24px; padding:0; background:none; border:0 }
.rail .meter .top{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:700; color:var(--ui-ink) }
.rail .meter .top b{ font-weight:800 }
.rail .meter .track{ height:10px; background:var(--ui-track); margin-top:8px }
.rail .meter .track i{ background:var(--ui-ink) }
.rail .meter .said{ font-family:var(--ui-sans); font-size:var(--t-kick); color:var(--ui-ink-3); margin-top:6px }
.rail .meter .progclear{
  font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:500; letter-spacing:0; text-transform:none;
  background:none; border:0; padding:0; color:var(--ui-ink-3); text-decoration:underline; cursor:pointer;
}
.rail > .lbl{ margin-top:28px !important; padding:0 0 6px; border-bottom:var(--mid); color:var(--ui-ink) }

.picker{ gap:0; margin:0 }
.pk{ padding:11px 10px; gap:10px; border-bottom:1px solid var(--ui-line); align-items:baseline }
.pk:hover{ background:var(--ui-hover) }
.pk[aria-current="true"]{ background:var(--ui-ink) }
.pk .n{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:800; color:var(--ui-accent); padding:0; min-width:28px }
.pk[aria-current="true"] .n{ color:var(--ui-bg) }
.pk .tt2{ font-size:var(--t-ui); color:var(--ui-ink) }
.pk[aria-current="true"] .tt2{ color:var(--ui-bg); font-weight:700 }
.pk .dn{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:500; color:var(--ui-ink-3); margin:0 0 0 auto }
.pk .dn.low{ color:var(--ui-accent); font-weight:800 }
.pk[aria-current="true"] .dn{ color:var(--ui-line) }
.pk .st{ display:inline-block; width:auto; height:auto; background:none !important; flex:none }
.pk .st::before{ content:"\2713"; font-weight:800; font-size:var(--t-ui); color:var(--ui-ink) }
.pk[aria-current="true"] .st::before{ color:var(--ui-bg) }

/* the column: the lesson head comes first and the tab row sits under it */

body.has-rail .panel, body.has-rail .lhead, body.has-rail .pagesheet, body.has-rail footer{ max-width:960px; width:100%; box-sizing:border-box }
/* the sheet: a page without lesson panels, in a panel's place */
body.has-rail .pagesheet{ margin:0 auto; padding:0 28px }
body.has-rail .pagesheet > footer{ padding-left:0; padding-right:0 }
body.has-rail .pagesheet .mast{ display:none }
/* what the masthead still held (About's long lede) opens the sheet */
body.has-rail .pagesheet > .mastrest{ display:block; padding-top:44px }
body.has-rail .pagesheet > .mastrest > *{ display:none }
body.has-rail .pagesheet > .mastrest > .lede{ display:block; margin:0; font-family:var(--ui-sans); font-size:var(--t-lede); line-height:1.45; color:var(--ui-ink); max-width:44em }
body.has-rail .pagesheet > .mastrest:has(> .lede) + section{ padding-top:44px }
body.has-rail .pagesheet > .mastrest:not(:has(> .lede)){ display:none }
/* anchor rows in the rail read like lesson rows */
.picker a.pk{ text-decoration:none; color:inherit; box-sizing:border-box }
.picker a.pk .n{ min-width:34px }
.rail .picker .pk .tt2 small{ display:block; font-weight:400; font-size:var(--t-kick); color:var(--ui-ink-3); margin-top:2px }
.rail .picker .pk[aria-current="true"] .tt2 small{ color:var(--ui-line) }
/* the sheet's sections start where a lesson head starts */
body.has-rail:is([data-page="resources"],[data-page="changes"],[data-page="blueprint"]) .pagesheet{ padding-top:44px }
@media (max-width:900px){
  body.has-rail .pagesheet{ padding-left:20px; padding-right:20px }

  /* the masthead, back on the page */
  body.has-rail .pagesheet > .eyebrow{ margin-top:24px }
  body.has-rail .pagesheet > h1{ margin:6px 0 0; font-size:34px; font-weight:800; line-height:1.05; letter-spacing:-.025em }
  body.has-rail .pagesheet > .blurb{ font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink-2); margin:12px 0 0 }
  body.has-rail .pagesheet > .mastrest{ padding-top:24px }
  body.has-rail:is([data-page="resources"],[data-page="changes"],[data-page="blueprint"]) .pagesheet{ padding-top:0 }
  body.has-rail:is([data-page="resources"],[data-page="changes"],[data-page="blueprint"]) .pagesheet > .blurb + *{ margin-top:36px }
  .mockcol .mast{ padding:24px 0 0; border:0 }
  .mockcol .mast h1{ font-size:34px; margin:6px 0 0 }
  .mockcol .modes{ margin-top:22px }
}
/* the tab row spans the text, not the text's padding */
body.has-rail .tabs{ max-width:904px; width:calc(100% - 56px); box-sizing:border-box }

/* ------------------------------------------------------------ lesson head */
.lhead{ padding-top:44px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:baseline }
.lhead::before{
  content:attr(data-n); grid-row:1; grid-column:1;
  /* the lesson's tag, at the title's own size: no numeral larger than a title (4 Oct 2026; was 112px) */
  font-family:var(--ui-sans); font-size:52px; font-weight:800; line-height:.98; letter-spacing:-.03em;
  color:var(--ui-accent);
}
.lhead:not([data-n])::before, .lhead[data-n=""]::before{ content:none }
.lhead:not([data-n]) > *, .lhead[data-n=""] > *{ grid-column:1 / -1 }
.lhead h2{ grid-row:1; grid-column:2; margin:0; font-size:52px; font-weight:800; line-height:.98; letter-spacing:-.03em }
.lhead > :not(h2){ grid-column:1 / -1 }
.lhead .sf{ margin:26px 0 0; font-family:var(--ui-sans); font-size:var(--t-lede); line-height:1.45; font-weight:500; color:var(--ui-ink) }
.lhead .bar{ margin:14px 0 0; gap:4px 18px }

/* ------------------------------------------------------------------- tabs */
.tabs{
  gap:0; padding:0 !important; margin-top:28px; background:var(--ui-bg);
  border-top:var(--heavy); border-bottom:1px solid var(--ui-ink); top:64px;
}
.tab{ padding:13px 22px; border:0; color:var(--ui-ink); font-size:var(--t-ui); font-weight:700 }
.tab:hover{ border:0; background:var(--ui-hover); color:var(--ui-ink) }
.tab[aria-selected="true"]{ background:var(--ui-ink); color:var(--ui-bg); border:0 }

/* ------------------------------------------------------------------- body */
.panel{ font-family:var(--ui-sans); font-size:var(--t-body); line-height:1.62; color:var(--ui-ink); padding-top:28px }
.panel p, .panel li{ color:var(--ui-ink) }
.h, .panel .h, .panel h2.h{
  margin:48px 0 12px; font-family:var(--ui-sans); font-size:30px; font-weight:800; line-height:1.12;
  letter-spacing:-.02em; text-transform:none; color:var(--ui-ink);
}
.sub, .panel .sub, .panel h3.sub{ font-size:var(--t-h3); font-weight:800; letter-spacing:-.015em; margin:36px 0 10px }
.lede, .panel > p:first-of-type{ color:var(--ui-ink) }
/* The opening paragraph under a Revision heading is body text, not a caption.
   The module pages set it at 15px, so it read smaller than the bullets under
   it for no reason (XIG, 1 Oct 2026). It now matches the rest of the body. */
.panel .rlead{ font-size:var(--t-body); line-height:inherit; color:var(--ui-ink) }
.cite{ font-family:var(--ui-sans); font-size:.62em; font-weight:800; color:var(--ui-accent) }
.csep{ font-family:var(--ui-sans) }

/* numbered steps: no box, a red number and a rule between steps */
/* overflow is visible so the read-along bar left of a step is not cut off; the
   clipping was only there for the old rounded corners, and these are square */
ol.rlist{ border:0; gap:0; border-top:var(--mid); border-bottom:var(--mid); overflow:visible }
ol.rlist li{ background:none; padding:14px 0 14px 46px; border-bottom:1px solid var(--ui-line) }
ol.rlist li:last-child{ border-bottom:0 }
ol.rlist li::before{ content:counter(step); left:4px; top:12px; font-family:var(--ui-sans); font-size:22px; font-weight:800; color:var(--ui-accent) }
.rlist li strong{ font-weight:700 }

.rnote{ background:none; border:0; border-top:var(--mid); border-bottom:1px solid var(--ui-line); padding:16px 0; color:var(--ui-ink) }

/* the trap: a solid block in the ink colour, so it flips with the theme */
.trap{ background:var(--ui-ink); border:0; padding:26px 30px; color:var(--ui-bg) }
.trap .tt{
  font-family:var(--ui-sans); font-size:23px; font-weight:800; line-height:1.22; letter-spacing:-.01em;
  text-transform:none; color:var(--ui-bg);
}
.trap .tt::before{
  content:"Trap"; display:block; margin-bottom:6px;
  font-size:var(--t-kick); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--trap-kick);
}
.trap p, .trap li{ color:var(--ui-bg); opacity:.9 }
.trap > p:first-of-type{ margin-top:12px }
.trap code{ background:rgba(127,127,127,.28); color:inherit }
.trap a{ color:inherit; border-bottom-color:currentColor }

/* the rule to carry into the exam: a thick frame */
.rule{ background:none; border:var(--heavy); padding:22px 28px; color:var(--ui-ink) }
.rule::before{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:800; letter-spacing:.06em; color:var(--ui-ink-3) }
/* a rule with points: its title on its own line, then the points as a normal list
   (XIG, 1 Oct 2026) */
.rule .rh{ margin:0 0 6px }
.rule p{ margin:0 0 10px; color:var(--ui-ink) }
.rule ul.rlist{ margin:0; color:var(--ui-ink) }
.rule ul.rlist li{ color:var(--ui-ink) }
.rule ul.rlist li:last-child{ margin-bottom:0 }

/* tables: rules above and below, no frame */
.scroller{ border:0; border-top:var(--mid); border-bottom:var(--mid) }
table.rt th, table.tr th, table.t th{
  font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none;
  color:var(--ui-ink-3); background:none; border-bottom:1px solid var(--ui-ink); padding:10px 16px 8px 0;
}
table.rt td, table.tr td, table.t td{ font-family:var(--ui-sans); color:var(--ui-ink); border-bottom:1px solid var(--ui-line); padding:12px 16px 12px 0 }
table.rt td:first-child, table.tr td:first-child, table.t td:first-child{ font-family:var(--ui-sans); font-weight:700 }
/* A column of numbers is right aligned, heading and figures alike, so the heading sits over the figures (XIG, 30 Sep 2026). The base table style set every heading left, which is what left them apart. */
table.rt th.n, table.tr th.n, table.t th.n, table.rt td.n, table.tr td.n, table.t td.n{ text-align:right }

.selfcheck{ border-top:var(--mid) }

/* sources and the lessons that cover more */
.srcp, .srcd, .srcn{ font-family:var(--ui-sans); font-size:var(--t-kick) }
.srclist a, a.xlink, .xreflist a.xlink{ font-weight:700; color:var(--ui-ink); text-decoration:none; border-bottom:2px solid var(--ui-accent) }
.srclist a:hover, a.xlink:hover, .xreflist a.xlink:hover{ color:var(--ui-accent); border-bottom-color:var(--ui-accent) }
.xreflist .xn{ background:none; color:var(--ui-accent); font-weight:800 }
.xreflist li:target .xn{ background:var(--ui-accent); color:var(--ui-on-accent) }

footer{ border-top:var(--heavy); font-family:var(--ui-sans); color:var(--ui-ink-3) }

/* ------------------------------------------------------------------ buttons
   Two styles. Primary: solid black, bold. Secondary: a black outline. */
.cta, body[data-page="home"] .cta, body[data-page="sales"] .cta, .nxt a.navlink.go,
.q button:not(.opt), body[data-page="mock"] .btn{
  background:var(--ui-ink) !important; color:var(--ui-bg) !important; border:var(--mid) !important;
  font-family:var(--ui-sans); font-weight:700; font-size:var(--t-ui); padding:12px 22px;
}
.cta:hover, body[data-page="home"] .cta:hover, body[data-page="sales"] .cta:hover, .nxt a.navlink.go:hover,
.q button:not(.opt):hover:not(:disabled), body[data-page="mock"] .btn:hover:not(:disabled){
  background:var(--ui-accent) !important; border-color:var(--ui-accent) !important; color:var(--ui-on-accent) !important;
}
.nxt{ border-top:var(--heavy) }
.nxt button, .nxt a.navlink, body[data-page="mock"] .btn.ghost, body[data-page="sales"] .cta.ghost{
  background:none !important; color:var(--ui-ink) !important; border:var(--mid) !important; font-weight:700; padding:12px 20px;
}
.nxt button:hover, .nxt a.navlink:not(.go):hover, body[data-page="mock"] .btn.ghost:hover{ background:var(--ui-hover) !important }
.q button:not(.opt):disabled, body[data-page="mock"] .btn:disabled{
  background:none !important; color:var(--ui-ink-3) !important; border:2px solid var(--ui-line) !important;
}
body[data-page="mock"] .flagbtn.on, body[data-page="mock"] .flagbtn.on:hover{ background:var(--ui-ink) !important; color:var(--ui-bg) !important }

/* ------------------------------------------------------------ audio player */
.ap, .player{ background:none; border:var(--mid); padding:12px 14px }
.ap.none{ border-style:dashed }
.apb{ background:var(--ui-ink); color:var(--ui-bg) }
/* While the track is waiting for sound, the play button shows a spinner in place
   of its symbol, so a slow start reads as loading, not broken (XIG, 1 Oct 2026).
   follow.js sets .loading. The ring is the one round thing in the Manual look
   (line 77 squares every corner): a spinning square read as a broken bracket. */
.apb.loading{ position:relative; color:transparent !important }
.apb.loading::after{
  content:''; position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-10px 0 0 -10px;
  border:2px solid var(--ui-bg); border-right-color:transparent; border-radius:50% !important;
  animation:apb-spin .8s linear infinite;
}
@keyframes apb-spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .apb.loading::after{ animation-duration:1.6s } }
.apt{ font-family:var(--ui-sans); font-weight:700 }
.aps, .dockin .apm span, .dockin .apm div{ font-family:var(--ui-sans); font-size:var(--t-kick) }
.apx button, .apc button, .dockin button:not(.apb){
  font-family:var(--ui-sans); font-weight:700; background:none; border:var(--mid); color:var(--ui-ink);
}
.dock{ background:var(--ui-bg); border-top:var(--heavy) }
body.dock-in-rail #dock{ background:var(--ui-bg); border-top:var(--heavy); box-shadow:none; margin-left:-28px; margin-right:-28px; padding-left:28px; padding-right:28px }
.dock .dockchaps, .chaps{ border:var(--mid) }
.chaps button.on{ background:var(--ui-ink); color:var(--ui-bg) }
/* The chapter list reads like the other menus (XIG, 1 Oct 2026): the same
   type, row lines and spacing as the module menu, the time in red where the
   menu has its number, and the same red shadow. */
.dock .dockchaps, .chaps{ border-radius:0; background:var(--ui-bg); box-shadow:6px 6px 0 var(--ui-accent) }
.chaps button{
  gap:10px; align-items:baseline; padding:11px 14px; border:0; border-top:1px solid var(--ui-line);
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500; line-height:1.35; color:var(--ui-ink-2);
}
.chaps button:first-child{ border-top:0 }
.chaps button:hover{ background:var(--ui-hover); color:var(--ui-ink) }
.chaps .ct{ flex:0 0 52px; font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:800; color:var(--ui-accent); font-variant-numeric:tabular-nums }
.chaps button.on{ font-weight:700 }
.chaps button.on .ct{ color:var(--ui-bg) }

/* --------------------------------------------------------- the other tabs */
.dist{ background:none; border:0; border-top:var(--heavy); padding:18px 0 4px }
.dist .dh{ font-family:var(--ui-sans); font-size:var(--t-h3); font-weight:800; letter-spacing:-.015em; text-transform:none; color:var(--ui-ink) }
ul.tick{ gap:0; border-top:var(--mid) }
ul.tick li{ background:none; border:0; border-bottom:1px solid var(--ui-line); padding:13px 0 13px 32px; font-family:var(--ui-sans); color:var(--ui-ink) }
ul.tick li::before{ left:2px; top:13px; font-weight:800; color:var(--ui-ink) }

.sum{ background:none; border:var(--heavy); padding:22px 26px }
.sumh h3{ font-size:var(--t-h3); font-weight:800 }
.sumh span, .wkn{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700 }
.sumsub, .drillnote{ font-family:var(--ui-sans) }
.wkr b{ font-family:var(--ui-sans); font-weight:800 }
.wkb{ height:10px; background:var(--ui-track) }

.q{ background:none; border:0; border-top:var(--heavy); padding:22px 0 26px; margin:0 0 20px }
.q > p, .q .stem{ font-weight:700; font-size:var(--t-title) }
.opts{ gap:8px }
.opt{ background:none; border:2px solid var(--ui-line); font-family:var(--ui-sans); color:var(--ui-ink) }
.opt:hover{ border-color:var(--ui-ink) }
.opt .l{ font-family:var(--ui-sans); font-weight:800; font-size:var(--t-ui); color:var(--ui-accent) }
.opt[aria-pressed="true"]{ border-color:var(--ui-ink); background:var(--ui-hover) }
.opt[aria-pressed="true"] .l{ color:var(--ui-ink) }
.opt.right{ border-color:var(--ui-ok); background:var(--ui-ok-soft) }
.opt.wrongpick{ border-color:var(--ui-warn); background:var(--ui-warn-soft) }
.expl{ background:none; border:0; border-top:var(--mid); padding:14px 0 4px; font-family:var(--ui-sans); color:var(--ui-ink) }

.rescard{ background:none; border:0; border-top:var(--mid); padding:18px 0 20px; margin:0 }
.rescard:hover{ background:none }
.rescard h4{ font-weight:800; font-size:var(--t-title) }
.rescard h4 a{ border-bottom:2px solid var(--ui-accent) }
.rescard .why{ font-family:var(--ui-sans); color:var(--ui-ink) }

/* ============================================================== COURSE HOME */
body:not(.has-rail):is([data-page="home"],[data-page="about"]) .wrap{ max-width:1200px; padding:0 32px 90px }
body:is([data-page="home"],[data-page="about"]) .mast{ padding:64px 0 48px; border-bottom:1px solid var(--ui-ink) }
body:is([data-page="home"],[data-page="about"]) .mast .eyebrow{ color:var(--ui-ink-3) }
body:is([data-page="home"],[data-page="about"]) .mast h1{ margin:14px 0 0; font-size:84px; font-weight:800; line-height:.94; letter-spacing:-.04em; max-width:16ch }
body:is([data-page="home"],[data-page="about"]) .lede{ margin-top:26px; font-family:var(--ui-sans); font-size:var(--t-lede); line-height:1.45; color:var(--ui-ink); max-width:44em }
body:is([data-page="home"],[data-page="about"]) #go{ margin-top:28px; padding:16px 28px; font-size:17px }
body:is([data-page="home"],[data-page="about"]) #go::after{ content:" \2192" }
body:is([data-page="home"],[data-page="about"],[data-page="resources"]) dl.facts{ gap:0; background:none; margin-top:44px; border:0; border-top:var(--mid); border-bottom:var(--mid); box-shadow:none }
body:is([data-page="home"],[data-page="about"],[data-page="resources"]) .fact{ background:none; border:0; border-right:1px solid var(--ui-ink); padding:16px 20px 16px 0; margin-right:20px }
body:is([data-page="home"],[data-page="about"],[data-page="resources"]) .fact:last-child{ border-right:0; margin-right:0 }
body:is([data-page="home"],[data-page="about"],[data-page="resources"]) .fact dt{ font-weight:700; font-size:var(--t-kick); color:var(--ui-ink-3) }
body:is([data-page="home"],[data-page="about"],[data-page="resources"]) .fact dd{ font-size:30px; font-weight:800; letter-spacing:-.02em }
body:is([data-page="home"],[data-page="about"]) .examnote{ font-family:var(--ui-sans); color:var(--ui-ink-2) }
body:is([data-page="home"],[data-page="about"]) .examnote b{ font-family:var(--ui-sans); font-weight:800 }

/* numbered sections: 01, 02, 03 in the accent, beside the heading */
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) :is(.wrap, #lab){ counter-reset:sec }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) section{ padding-top:64px }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead{ counter-increment:sec }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead{ display:block; border-bottom:var(--heavy); padding-bottom:12px }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead h2{ display:flex; align-items:baseline; gap:22px; font-size:40px; font-weight:800; letter-spacing:-.03em; margin:0 }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead h2::before{
  content:counter(sec, decimal-leading-zero); font-size:64px; line-height:.8; letter-spacing:-.04em; color:var(--ui-accent);
}
body:is([data-page="home"],[data-page="about"],[data-page="resources"]) .shead .note{ display:block; margin:10px 0 0; font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none; color:var(--ui-ink-3) }
body:is([data-page="home"],[data-page="about"]) section > p{ font-family:var(--ui-sans); color:var(--ui-ink) }

body:is([data-page="home"],[data-page="about"]) #before-you-start h3.bys{ font-size:var(--t-h3); font-weight:800; margin-top:36px }
body:is([data-page="home"],[data-page="about"]) #before-you-start p{ font-family:var(--ui-sans); color:var(--ui-ink) }
body:is([data-page="home"],[data-page="about"]) .path{ counter-reset:bys; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin-top:14px; padding:0; list-style:none }
body:is([data-page="home"],[data-page="about"]) .path li{ counter-increment:bys; margin:0; padding:12px 0 24px; border:0; border-top:var(--mid) }
body:is([data-page="home"],[data-page="about"]) .path li::before{
  content:counter(bys, upper-alpha) "."; position:static; display:inline; width:auto; height:auto; background:none;
  font-weight:800; font-size:var(--t-title); color:var(--ui-accent); margin-right:6px;
}
body:is([data-page="home"],[data-page="about"]) .path b{ display:inline; font-size:var(--t-title); font-weight:800 }
/* the explanation starts on its own line under the bold lead (XIG, 30 Sep 2026) */
body:is([data-page="home"],[data-page="about"]) .path li > span{ display:block; margin-top:8px; font-family:var(--ui-sans); color:var(--ui-ink-2) }
body:is([data-page="home"],[data-page="about"]) dl.tabguide{ border-top:var(--mid) }
body:is([data-page="home"],[data-page="about"]) dl.tabguide div{ border-bottom:1px solid var(--ui-line) }
body:is([data-page="home"],[data-page="about"]) dl.tabguide dt{ font-weight:800; color:var(--ui-ink) }
body:is([data-page="home"],[data-page="about"]) dl.tabguide dd{ font-family:var(--ui-sans); color:var(--ui-ink) }

body:is([data-page="home"],[data-page="about"]) .course{ background:none; border:0; border-top:var(--mid); padding:14px 0 4px }
body[data-page="home"] .course h3{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:800; letter-spacing:0; text-transform:none; color:var(--ui-ink) }
body[data-page="home"] .cb{ height:10px; background:var(--ui-track) }
body[data-page="home"] .cb i{ background:var(--ui-ink) }

body[data-page="home"] .ledger{ gap:0; border-top:var(--mid) }
body[data-page="home"] .row{ background:none; border:0; border-bottom:1px solid var(--ui-ink); padding:22px 0 }
body[data-page="home"] .row:hover{ background:none }
body[data-page="home"] .rid{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:800; letter-spacing:0; text-transform:none; color:var(--ui-accent) }
body[data-page="home"] .row h3{ font-size:26px; font-weight:800; letter-spacing:-.02em }
body[data-page="home"] .row h3 a:hover{ color:var(--ui-accent) }
body[data-page="home"] .blurb{ font-family:var(--ui-sans); color:var(--ui-ink-2) }
body[data-page="home"] .meta{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:500; color:var(--ui-ink-3) }
body[data-page="home"] .mprog .pb{ height:10px; background:var(--ui-track) }
body[data-page="home"] .mprog .pb i{ background:var(--ui-ink) }
body[data-page="home"] .mprog .pb i.low{ background:var(--ui-accent) }
body[data-page="home"] .mprog span{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }

body[data-page="home"] .mock{ background:none; border:0 !important; border-top:var(--mid) !important; padding:22px 0 0 }
body[data-page="home"] .mock h3{ font-size:var(--t-h3); font-weight:800 }
body[data-page="home"] .mock p, body[data-page="home"] .callout{ font-family:var(--ui-sans); color:var(--ui-ink) }
body[data-page="home"] .mode{
  font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0;
  background:none; border:var(--mid); color:var(--ui-ink); padding:6px 10px;
}
body[data-page="home"] .callout{ background:none; border:0; border-top:var(--mid); padding:14px 0 4px }

body[data-page="home"] .shelf{ gap:0 32px }
body[data-page="home"] .shelf a{ background:none; border:0; border-top:var(--mid); padding:16px 0 8px }
body[data-page="home"] .shelf a:hover{ background:none; border-top-color:var(--ui-accent) }
body[data-page="home"] .shelf .n{ font-size:var(--t-h3); font-weight:800 }
body[data-page="home"] .shelf .d{ font-family:var(--ui-sans) }

body[data-page="home"] .st, body[data-page="status"] .st{ background:none; border:0; border-top:1px solid var(--ui-line) }
body[data-page="home"] .pill, body[data-page="status"] .pill{ font-family:var(--ui-sans); font-weight:800; letter-spacing:0; text-transform:none }

/* ================================================================== MOCK */
#app.mockshell{
  grid-template-columns:400px minmax(0,1fr);
  background:linear-gradient(to right, var(--ui-bg) 0 396px, var(--ui-ink) 396px 400px, transparent 400px);
}
.mockrail{ top:64px; max-height:calc(100vh - 64px); padding:32px 28px 40px }
/* the mock's shell is the lesson shell: 400px rail, heavy rule */
#app.mockshell{
  grid-template-columns:400px minmax(0,1fr);
  background:linear-gradient(to right, var(--ui-bg) 0 396px, var(--ui-ink) 396px 400px, transparent 400px);
}
/* a grid item with auto margins shrinks to its content; the column is always
   the full width of a panel, whatever it holds */
.mockcol{ max-width:960px; width:100%; box-sizing:border-box; padding:44px 28px 90px }
.mockrail .mast .eyebrow{ margin-top:0 }
.mockrail .mast h1{ margin:6px 0 0; font-size:26px; line-height:1.1 }
.mockrail .mast p{ font-size:var(--t-ui); color:var(--ui-ink-2); margin-top:12px }
/* the three ways to sit, as rail rows */
.mockrail .modes{ display:block; margin:22px 0 0 }
.mockrail .modes::before{
  content:"Sit"; display:block; font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ui-ink); padding:0 0 6px; border-bottom:var(--mid);
}
.mockrail .mode{ display:block; width:100%; margin:0; padding:11px 10px; border:0; border-bottom:1px solid var(--ui-line); background:none; text-align:left; cursor:pointer }
.mockrail .mode:hover{ background:var(--ui-hover) }
.mockrail .mode .mt{ display:block; font-size:var(--t-ui); font-weight:700; color:var(--ui-ink) }
.mockrail .mode .mm{ display:block; font-size:var(--t-kick); color:var(--ui-ink-3); margin-top:2px }
.mockrail .mode .md{ display:none }
.mockrail .mode[disabled]{ opacity:.5; cursor:default }
.mockrail .mode[disabled] .md{ display:block; font-family:var(--ui-sans); font-size:var(--t-kick); color:var(--ui-accent); margin-top:4px }
/* some pages (labs, resources) style their eyebrow spans as chips; in the rail
   they are facts, one per line with full-width rules, as on a module rail
   (XIG, 30 Sep 2026, option A) */
body .rail .facts span{ display:block; width:auto; margin:0; padding:7px 0; border:0; border-bottom:1px solid var(--ui-line); background:none; border-radius:0; font-size:var(--t-ui); color:var(--ui-ink-2); font-weight:500 }
body .rail .facts span:last-child{ border-bottom:var(--mid) }
/* the labs page's long introduction, out of the rail and above the lab head */
body[data-page="labs"] .col > .mastrest{ display:block; max-width:960px; width:100%; box-sizing:border-box; margin:0 auto; padding:44px 28px 0 }
body[data-page="labs"] .col > .mastrest > *{ display:none }
body[data-page="labs"] .col > .mastrest > .lede{ display:block; margin:0; font-family:var(--ui-sans); font-size:var(--t-lede); line-height:1.5; color:var(--ui-ink-2); max-width:44em }
body[data-page="labs"] .col > .mastrest + .lhead{ padding-top:28px }
@media (max-width:900px){ body[data-page="labs"] .col > .mastrest{ padding:24px 20px 0 } }
/* ------------------------------------------------ the Blueprint, in the theme
   (XIG, 30 Sep 2026): numbered section heads like the home's, module blocks as
   ledger rows (big red number, title, weight), lesson rows ruled in ink, and
   none of the per-domain colours. Links go to the course's own module pages. */
body[data-page="blueprint"] table.tr{ font-family:var(--ui-sans) }
body[data-page="blueprint"] table.tr th{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none; color:var(--ui-ink-3); border-bottom:var(--mid) }
body[data-page="blueprint"] table.tr td{ border-bottom:1px solid var(--ui-line); font-weight:500 }
body[data-page="blueprint"] table.tr tr:last-child td{ border-bottom:var(--mid) }
body[data-page="blueprint"] .mod{ margin:0 0 36px; padding:0; border:0; border-top:var(--heavy); border-left:0; background:none; box-shadow:none; --mc:var(--ui-ink) }
body[data-page="blueprint"] .mod-head{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:baseline; gap:0 18px; padding:14px 0 14px; border:0; border-bottom:var(--mid); margin:0; background:none }
body[data-page="blueprint"] #modules > .mod:first-child{ border-top:0 }
body[data-page="blueprint"] .mod-head .num{ font-family:var(--ui-sans); font-size:40px; font-weight:800; letter-spacing:-.04em; line-height:.9; color:var(--ui-accent); background:none; border:0; padding:0; text-transform:none }
body[data-page="blueprint"] .mod-head h3{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.15 }
/* The domain name is a heading that links to its domain, not a link in running
   text, so it carries no underline (XIG, 4 Oct 2026: the heavy line under each
   wrapped line was out of step with the rest of the site). Hover turns it red,
   as the lesson rows under it do; keyboard focus keeps a ring. */
body[data-page="blueprint"] .mod-head h3 a{ color:var(--ui-ink); text-decoration:none; border-bottom:0 }
body[data-page="blueprint"] .mod-head h3 a:hover{ color:var(--ui-accent) }
body[data-page="blueprint"] .mod-head h3 a:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:3px }
body[data-page="blueprint"] .mod-head .wt{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:700; color:var(--ui-ink-2) }
body[data-page="blueprint"] .lsn{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:0 18px; align-items:baseline; padding:12px 0; margin:0; border:0; border-bottom:1px solid var(--ui-line); text-decoration:none; color:inherit; background:none }
body[data-page="blueprint"] .lsn:hover h4{ color:var(--ui-accent) }
body[data-page="blueprint"] .lsn .id{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:800; color:var(--ui-accent); background:none; border:0; padding:0 }
body[data-page="blueprint"] .lsn h4{ margin:0; font-family:var(--ui-sans); font-size:var(--t-body); font-weight:500; color:var(--ui-ink) }
@media (max-width:900px){
  body[data-page="blueprint"] .mod-head{ grid-template-columns:44px minmax(0,1fr); }
  body[data-page="blueprint"] .mod-head .wt{ grid-column:2 }
  body[data-page="blueprint"] .lsn{ grid-template-columns:44px minmax(0,1fr) }
}
/* a lab's head: "Lab 1." in the accent, as a lesson's number is (XIG, 30 Sep 2026) */
body[data-page="labs"] .lhead h2 .labn{ color:var(--ui-accent) }
/* Resources, top of the sheet (XIG, 30 Sep 2026): the exam as a numbered
   section with one line of facts and the five domains as ruled cells; the
   entries as the second section. The old bar-and-legend block is gone. */
body[data-page="resources"] .examline{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500; color:var(--ui-ink-2); line-height:1.5; margin:18px 0 0; max-width:60em }
body[data-page="resources"] dl.facts.domains{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:24px }
body[data-page="resources"] dl.facts.domains .fact{ margin:0; padding:14px 16px 16px 0 }
body[data-page="resources"] dl.facts.domains .fact + .fact{ padding-left:16px }
body[data-page="resources"] dl.facts.domains dt{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-accent); margin:0 }
body[data-page="resources"] dl.facts.domains dd{ margin:4px 0 0; font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--ui-ink) }
body[data-page="resources"] dl.facts.domains dd small{ display:block; margin-top:6px; font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:600; color:var(--ui-ink-2); line-height:1.35; letter-spacing:0 }
body[data-page="resources"] .filters{ position:static; border:0; background:none; margin-top:0; padding:0 }
body[data-page="resources"] .accbar{ margin-top:22px }
@media (max-width:900px){
  body[data-page="resources"] dl.facts.domains{ grid-template-columns:1fr 1fr }
  body[data-page="resources"] dl.facts.domains .fact{ padding:12px 0; border-right:0 }
  body[data-page="resources"] dl.facts.domains .fact + .fact{ padding-left:0 }
}
/* the mock landing's column opens with a head, as every sheet does (XIG, 30 Sep 2026) */
body[data-page="mock"] .mockcol .lede{ font-family:var(--ui-sans); font-size:var(--t-lede); line-height:1.5; color:var(--ui-ink-2); margin:22px 0 0; max-width:44em }
body[data-page="mock"] .mockcol .lede + details.acc{ margin-top:26px; border-top:var(--heavy) }
@media (max-width:900px){
  body[data-page="mock"] .mockcol .lede{ font-size:var(--t-lede-s) }
  /* The landing on a phone keeps the wide screen's look (XIG, 30 Sep 2026):
     the head starts where every other page's does, the section head and its
     heavy rule come before the three ways to sit, and a heavy rule opens the
     notes under them. The sitting and score screens keep their own spacing. */
  body[data-page="mock"] .mockcol:has(> .mast){ padding:0 20px 80px }
  body[data-page="mock"] .mockcol > .mast{ padding:24px 0 0; border:0 }
  /* The big "Mock exam" and its one line say what the bar and the menu already
     say, and "Sitting the mock" says the rest, so only the small facts line stays
     (XIG, 30 Sep 2026). Phone only: on a wide screen this block is in the side
     rail and is not touched. */
  body[data-page="mock"] .mockcol > .mast h1, body[data-page="mock"] .mockcol > .mast p{ display:none }
  body[data-page="mock"] .mockcol > .mast{ padding-bottom:0 }
  body[data-page="mock"] .mockcol .lede + .modes{ margin-top:26px }
  body[data-page="mock"] .mockcol .modes + details.acc{ margin-top:36px; border-top:var(--heavy) }
}
/* the labs head's facts as one kicker line */
body[data-page="labs"] .labkick{ display:flex; flex-wrap:wrap; gap:4px 16px; margin:16px 0 0; font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ui-ink-3) }
/* the rail's facts never take the page's tile background */
body .rail .facts{ display:block; background:none; padding:0; margin-top:16px; border:0; border-top:var(--mid); border-radius:0; gap:0 }
.mockrail .mast h1{ font-size:26px; font-weight:800; letter-spacing:-.02em }
.mockrail .mast p{ font-family:var(--ui-sans) }
.mockrail .bar{ background:none; border:0; border-top:var(--mid); border-bottom:var(--mid); padding:14px 0; font-family:var(--ui-sans) }
.mockrail .bar .clock{ font-family:var(--ui-sans); font-size:40px; font-weight:800; letter-spacing:-.03em }
.pip{ background:none; border:2px solid var(--ui-line); color:var(--ui-ink); font-family:var(--ui-sans); font-weight:700 }
.pip:hover{ border-color:var(--ui-ink) }
.pip.done{ background:var(--ui-ink); border-color:var(--ui-ink); color:var(--ui-bg) }
.pip.flag{ background:none; border-color:var(--ui-accent); color:var(--ui-accent) }
.pip.done.flag{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent) }
/* the current question: a ring drawn inside the cell, because the navigator
   scrolls (and the rail with it), and an outline outside the cell was clipped
   at the edges (XIG, 30 Sep 2026) */
.pip.here{ outline:0; border-color:var(--ui-ink); box-shadow:inset 0 0 0 2px var(--ui-ink) }
.pip.done.here{ box-shadow:inset 0 0 0 2px var(--ui-bg) }
.pip.flag.here{ border-color:var(--ui-accent); box-shadow:inset 0 0 0 2px var(--ui-accent) }
.pip.done.flag.here{ box-shadow:inset 0 0 0 2px var(--ui-bg) }
.drawerbody .mockrail .pips{ overflow:visible; max-height:none }
.mockrail .score{ background:none; border:var(--heavy); padding:20px }
.mockrail .score .big{ font-size:48px; font-weight:800 }
.mockrail .score .outof{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0 }
.dbar .pc{ font-family:var(--ui-sans); font-weight:800 }
.dbar .track{ height:10px; background:var(--ui-track) }
/* A way to sit, or a domain to drill, in the column: a box you press, with a
   black "Start" inside, so it reads as an action and not a heading (XIG, 30 Sep
   2026). In the rail the same buttons are list rows, styled above. */
.mode{ background:none; border:var(--mid); padding:18px 18px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; cursor:pointer; color:var(--ui-ink) }
.mode:hover{ background:var(--ui-hover) }
.mode::after{ content:"Start \2192"; order:9; display:inline-block; margin-top:12px; background:var(--ui-ink); color:var(--ui-bg); font-family:var(--ui-sans); font-weight:800; font-size:var(--t-ui); padding:9px 14px }
#dompick .mode::after{ content:"Drill this domain \2192" }
.mode[disabled]::after{ content:"Not enough unseen questions"; background:none; color:var(--ui-accent); padding:0 }
.mockcol .modes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:22px 0 0 }
.mockcol .modes .mode{ margin:0 }
.mode .mt{ font-size:var(--t-h3); font-weight:800 }
.mode .md{ font-family:var(--ui-sans) }
body[data-page="mock"] .note{ background:none; border:0; border-top:var(--mid); padding:14px 0 4px; font-family:var(--ui-sans); color:var(--ui-ink) }
body[data-page="mock"] .note.warn{ background:none; border-top-color:var(--ui-warn) }
body[data-page="mock"] .qcard{ background:none; border:0; border-top:var(--heavy); padding:22px 0 }
body[data-page="mock"] .tag{ font-family:var(--ui-sans); font-weight:700; letter-spacing:0; text-transform:none; background:none; border:var(--mid); color:var(--ui-ink) }
body[data-page="mock"] .tag.sc{ background:var(--ui-ink); border-color:var(--ui-ink); color:var(--ui-bg) }
body[data-page="mock"] .qstem{ font-weight:700 }
body[data-page="mock"] .opt{ background:none; border:2px solid var(--ui-line); font-family:var(--ui-sans) }
body[data-page="mock"] .opt:hover{ border-color:var(--ui-ink) }
body[data-page="mock"] .opt[aria-pressed="true"]{ border-color:var(--ui-ink); background:var(--ui-hover) }
body[data-page="mock"] .opt .l{ font-family:var(--ui-sans); font-weight:800; color:var(--ui-accent) }
body[data-page="mock"] .verd{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:800; letter-spacing:0; text-transform:none }
body[data-page="mock"] .expl{ background:none; border-top:var(--mid); padding:14px 0 4px; font-family:var(--ui-sans) }
body[data-page="mock"] footer{ border-top:var(--heavy) }

/* ================================================================== LABS */
body[data-page="labs"] #lab{ max-width:960px }
body[data-page="labs"] #lab .lhead h2{ font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:.98 }
body[data-page="labs"] #lab .sf{ font-family:var(--ui-sans); font-weight:500; color:var(--ui-ink) }
body[data-page="labs"] .chip{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none; background:none; border:var(--mid); color:var(--ui-ink) }
body[data-page="labs"] .chip.n{ background:var(--ui-ink); border-color:var(--ui-ink); color:var(--ui-bg) }
body[data-page="labs"] .sec > h3{ font-family:var(--ui-sans); font-size:30px; font-weight:800; letter-spacing:-.02em; text-transform:none; color:var(--ui-ink); margin-bottom:8px }
body[data-page="labs"] .step, body[data-page="labs"] .wrapup{ background:none; border:0; border-top:var(--heavy); padding:0 }
body[data-page="labs"] .sh{ padding:18px 0 0 }
body[data-page="labs"] .sh h4{ font-size:var(--t-h3); font-weight:800 }
body[data-page="labs"] .sn{ font-family:var(--ui-sans); font-weight:800; background:none; color:var(--ui-accent); font-size:28px }
body[data-page="labs"] .sbody{ padding:0 0 22px }
body[data-page="labs"] .box{ margin:14px 0 0; border:0; border-top:2px solid var(--ui-ok); background:none; padding:12px 0 4px }
body[data-page="labs"] .prose{ font-family:var(--ui-sans); color:var(--ui-ink) }
body[data-page="labs"] .lessons a{ font-family:var(--ui-sans); font-weight:700 }

/* ======================================================== OTHER DOCUMENTS */
body[data-page="resources"] .mast h1, body[data-page="sales"] .mast h1,
body[data-page="blueprint"] .mast h1, body[data-page="status"] .mast h1{ font-size:56px; font-weight:800; letter-spacing:-.035em; line-height:.98 }
body[data-page="resources"] .mast, body[data-page="sales"] .mast,
body[data-page="blueprint"] .mast, body[data-page="status"] .mast{ border-bottom:var(--heavy) }
body[data-page="resources"] .lede, body[data-page="sales"] .lede, body[data-page="blueprint"] .lede,
body[data-page="status"] .lede, body[data-page="lesson"] .standfirst,
body[data-page="resources"] .mast > p, body[data-page="blueprint"] .mast > p{ font-family:var(--ui-sans); color:var(--ui-ink) }
body[data-page="resources"] .blueprint, body[data-page="resources"] .grp, body[data-page="resources"] .item,
body[data-page="blueprint"] .note, body[data-page="blueprint"] .phase, body[data-page="blueprint"] .case,
body[data-page="blueprint"] .mod, body[data-page="status"] .ask, body[data-page="status"] .callout,
body[data-page="sales"] .gate, body[data-page="sales"] .cmp, body[data-page="sales"] .price,
body[data-page="lesson"] .note-change{ background:none; border:0; border-top:var(--mid); padding:18px 0 }
body[data-page="blueprint"] .stat, body[data-page="sales"] .iv, body[data-page="status"] .st{ background:none; border:0; border-top:var(--mid) }
body[data-page="blueprint"] .stat .v, body[data-page="sales"] .iv .q, body[data-page="status"] .st dd{ font-weight:800 }
body[data-page="sales"] .shead h2{ font-size:36px; font-weight:800 }
body[data-page="sales"] .shead .n{ font-family:var(--ui-sans); font-weight:800; letter-spacing:0; text-transform:none; color:var(--ui-accent) }
body[data-page="sales"] .draft{ font-family:var(--ui-sans); font-weight:700; letter-spacing:0; text-transform:none }
body[data-page="resources"] .filters{ background:none; border:0; border-top:var(--mid); border-bottom:1px solid var(--ui-line); padding:14px 0 }
body[data-page="resources"] .chip, body[data-page="resources"] .tag{ font-family:var(--ui-sans); font-weight:700; letter-spacing:0; text-transform:none; background:none; border:var(--mid); color:var(--ui-ink) }
body[data-page="resources"] .chip.on{ background:var(--ui-ink); border-color:var(--ui-ink); color:var(--ui-bg) }
body[data-page="resources"] .facts{ font-family:var(--ui-sans) }
body[data-page="lesson"] .title{ font-size:52px; font-weight:800; letter-spacing:-.03em }
body[data-page="lesson"] .tabs{ border-top:var(--heavy); border-bottom:1px solid var(--ui-ink) }

/* ================================================================= NARROW */
@media (max-width:900px){
  body.has-rail .wrap{ background:none }
  body.has-rail .rail{ border-bottom:var(--heavy); background:var(--ui-bg) }
  .lhead{ padding-top:24px; column-gap:16px }
  .lhead::before{ font-size:34px; line-height:1.05 }
  .lhead h2{ font-size:34px; line-height:1.05 }
  .lhead .sf{ font-size:var(--t-lede-s); margin-top:18px }
  .tabs{ top:56px; margin-top:20px; overflow-x:auto; flex-wrap:nowrap }
  .tab{ padding:12px 14px; font-size:15px }
  /* on a phone the current tab opens the lesson list, so it carries the same arrow as the other menus */
  body[data-page="module"] .tab[aria-selected="true"]::after{ content:" \25BE"; font-size:.85em }
  body.has-rail .panel, body.has-rail .lhead, body.has-rail .tabs, body.has-rail footer{ padding-left:18px; padding-right:18px }
  body.has-rail .tabs{ padding-left:0 !important; padding-right:0 !important; width:100%; max-width:none }
  .trap{ margin-left:-18px; margin-right:-18px; padding:22px 18px }
  .rule{ padding:18px 16px }
  .h, .panel .h, .panel h2.h{ font-size:24px; margin-top:38px }

  .appbar{ height:56px; min-height:0; padding:0 14px; border-bottom:var(--heavy); background:var(--ui-bg) }
  /* On a phone the mark goes (the menu button is the way in) and the page's
     name sits left, beside the menu button (XIG, 30 Sep 2026). */
  .appbar{ grid-template-columns:auto minmax(0,1fr) auto }
  .appbar .mark{ display:none }
  .ctx{ text-align:left; font-weight:800; font-size:17px }
  .menubtn{ border:0; background:none; gap:5px; padding:0 4px }
  .menubtn span{ height:3px; background:var(--ui-ink) }
  .ctx b{ font-family:var(--ui-sans); font-weight:800; color:var(--ui-accent) }
  .ctx.hasclock, .ctx #clock{ font-family:var(--ui-sans) }
  /* Phone side menu: it lies over the page, so it gets the red edge strip and the same
     2px black border as the other menus and popups (XIG, 2 Oct 2026; was 4px). The
     desktop rail is not an overlay: it keeps its 4px divider and no red. */
  .drawer{ background:var(--ui-bg); border-right:var(--mid); box-shadow:6px 0 0 var(--ui-accent) }
  .drawerclose{ background:none; border:var(--mid); color:var(--ui-ink); font-weight:700 }
  .drawernav{ gap:0; border-top:var(--mid) }
  .drawernav a{ padding:12px 4px; border-bottom:1px solid var(--ui-line); font-weight:700; color:var(--ui-ink) }
  .drawernav a[aria-current="page"]{ background:none; color:var(--ui-accent) }
  .drawerbody{ border-top:var(--heavy) }
  .drawerbody .rail .modnum{ font-size:56px }
  .drawerbody .rail h1, .drawerbody .mockrail .mast h1{ font-size:22px; margin-top:8px }

  #app.mockshell{ background:none }
  .mockrail{ border-bottom:var(--heavy); background:var(--ui-bg) }

  body:not(.has-rail):is([data-page="home"],[data-page="about"]) .wrap{ padding:0 18px 80px }
  body:is([data-page="home"],[data-page="about"]) .mast{ padding:32px 0 32px }
  body:is([data-page="home"],[data-page="about"]) .mast h1{ font-size:48px }
  body:is([data-page="home"],[data-page="about"]) .lede{ font-size:var(--t-lede-s) }
  body[data-page="home"] #go{ display:block; text-align:center }
  body:is([data-page="home"],[data-page="about"],[data-page="resources"]) dl.facts{ grid-template-columns:1fr 1fr }
  body:is([data-page="home"],[data-page="about"],[data-page="resources"]) .fact{ border-right:0; margin-right:0; border-bottom:1px solid var(--ui-line) }
  body:is([data-page="home"],[data-page="about"]) .path{ grid-template-columns:1fr }
  body[data-page="home"] .row h3{ font-size:21px }

  body[data-page="labs"] #lab .lhead h2{ font-size:34px }
  body[data-page="resources"] .mast h1, body[data-page="sales"] .mast h1,
  body[data-page="blueprint"] .mast h1, body[data-page="status"] .mast h1{ font-size:38px }
}
@media (min-width:901px) and (max-width:1100px){
  body:is([data-page="home"],[data-page="about"]) .path{ grid-template-columns:1fr 1fr }
}

/* stat tiles: the figures line up along the top whatever the length of the note under them */
body:is([data-page="home"],[data-page="about"]) .fact{ justify-content:flex-end }
body:is([data-page="home"],[data-page="about"]) .fact dd, body:is([data-page="home"],[data-page="about"]) .fact dd small{ font-variant-numeric:normal }

/* labels that were set in uppercase, and the drill's question tags */
.qtype, .qscen, body[data-page="changes"] .kind,
body[data-page="resources"] .flabel, body[data-page="labs"] th, body[data-page="labs"] .sbody h3,
body[data-page="labs"] h3, body[data-page="blueprint"] .num, body[data-page="resources"] .code{
  text-transform:none; letter-spacing:0; font-weight:700;
}
.qtype, .qscen{ font-size:var(--t-kick); background:none; border:0; padding:0; margin-right:12px; color:var(--ui-ink-3) }
.qscen{ color:var(--ui-accent) }
input[type="range"]{ accent-color:var(--ui-accent) }
.apr::-webkit-slider-thumb{ background:var(--ui-accent) }
.apr::-moz-range-thumb{ background:var(--ui-accent) }

/* The player when it wraps (a phone, or the dock in the rail): one row of
   controls under the scrubber. Mark sits at the left, under the play button;
   the other buttons and Chapters sit right-aligned (XIG, 30 Sep 2026). Without
   a Mark button the row is just right-aligned. */
@media (max-width:620px){
  .ap .apx, .dockin .apx{ order:3; margin-left:0; flex:1 1 auto; display:flex; justify-content:flex-end; gap:6px }
  .ap .apc, .dockin .apc{ order:4 }
  .ap .apx .apmark, .dockin .apx .apmark{ order:-1; margin-right:auto }
}
body.dock-in-rail .dockin .apx{ margin-left:0; flex:1 1 auto; display:flex; justify-content:flex-end; gap:6px }
body.dock-in-rail .dockin .apx .apmark{ order:-1; margin-right:auto }

/* ============================================================ FIXES, 28 Sep
   From XIG's first look at the live site. */

/* Read ticks sat on top of the drill score: the page pins the tick to the
   corner of the row. It now sits in line, after the score. */
.pk .st{ position:static !important; width:auto !important; height:auto !important; opacity:1 !important; margin-left:8px }
.pk .dn{ white-space:nowrap }

/* The module menu hangs inside the nav, so the nav's plain-link rule was
   stripping its padding and rules. These restate the menu inside the nav. */
.appbar nav .dropmenu a{
  display:flex; gap:12px; align-items:baseline; padding:11px 16px; margin:0;
  border:0; border-bottom:1px solid var(--ui-line); color:var(--ui-ink); font-weight:500; white-space:normal;
}
.appbar nav .dropmenu a:last-child{ border-bottom:0 }
.appbar nav .dropmenu a:hover{ background:var(--ui-hover); color:var(--ui-ink) }
.appbar nav .dropmenu a[aria-current]{ background:var(--ui-ink); color:var(--ui-bg); font-weight:700 }
.appbar nav .dropmenu .n{ min-width:14px }
.appbar nav .dropmenu a[aria-current] .n{ color:var(--ui-bg) }
.dropmenu{ min-width:320px }

/* The "Before you start" letters kept the page's old circle frame. */
body:is([data-page="home"],[data-page="about"]) .path li::before{ border:0 !important; padding:0; font-family:var(--ui-sans) }

/* Inside the phone menu the sidebar is a plain list: no fixed height, no
   bottom rule. The rule was drawn where the fixed height ended, across the
   middle of the list. */
/* max-height too: the computer layout caps the sidebar at the window height, and
   inside the phone menu that cap cut the box short while the lesson list ran on
   past it, so the menu could not scroll to the last lessons (XIG, 1 Oct 2026) */
.drawerbody .rail, body.dock-in-rail .drawerbody .rail{ height:auto !important; max-height:none !important; border:0 !important; padding:0 !important; display:block }

/* Links: the underline is the accent itself, not a pale tint of it. */
body a{ border-bottom-color:var(--ui-accent) }

@media (max-width:900px){
  /* the lesson facts line up in two columns instead of wrapping ragged */
  .lhead .bar{ display:grid; grid-template-columns:max-content max-content; gap:4px 28px }
  .lhead .facts-line{ gap:4px 18px }
}

/* ------------------------------------------------ the resources page */
body[data-page="resources"] .blueprint{ border:0; border-top:var(--heavy); padding:18px 0 0; margin-top:36px }
body[data-page="resources"] .blueprint-head{ padding:0 0 14px; border-bottom:0 }
body[data-page="resources"] .blueprint-head h2{ font-size:var(--t-h3); font-weight:800 }
body[data-page="resources"] .blueprint .facts{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }
/* the weight bar: one colour, a gap between domains */
body[data-page="resources"] .blueprint .bar{ height:10px; gap:3px }
body[data-page="resources"] .blueprint .bar span{ background:var(--ui-ink) !important }
body[data-page="resources"] .legend{ border-top:0; grid-template-columns:repeat(5,minmax(0,1fr)) }
body[data-page="resources"] .legend > div{ padding:14px 16px 16px 0; border-right:0; border-bottom:1px solid var(--ui-ink) }
body[data-page="resources"] .legend > div + div{ padding-left:16px; border-left:1px solid var(--ui-line) }
body[data-page="resources"] .legend .pct{ font-family:var(--ui-sans); font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--ui-ink) !important }
body[data-page="resources"] .legend .nm{ font-family:var(--ui-sans); font-weight:700; color:var(--ui-ink) }
body[data-page="resources"] .legend .code{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-accent); text-transform:lowercase; letter-spacing:0 }
body[data-page="resources"] .legend .code::first-letter{ text-transform:uppercase }

/* The filter row stays at the top of the window while the list scrolls. It
   needs a solid background and must stop under the bar, not behind it. */
body[data-page="resources"] .filters{
  top:64px; z-index:25; background:var(--ui-bg); margin-top:0;
  border:0; border-bottom:1px solid var(--ui-ink); padding:14px 0 12px;
}
body[data-page="resources"] .flabel{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none; color:var(--ui-ink-3) }
body[data-page="resources"] .chip{ font-size:var(--t-kick); padding:5px 10px }
body[data-page="resources"] .chip[aria-pressed="true"]{ background:var(--ui-ink); border-color:var(--ui-ink); color:var(--ui-bg) }
body[data-page="resources"] .count{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }

/* sections and entries: one heavy rule under each heading, a light rule between entries */
body[data-page="resources"] section.grp{ border:0; padding:0; margin-top:52px }
body[data-page="resources"] section.grp > h2{ font-size:30px; font-weight:800; letter-spacing:-.02em; border-bottom:var(--heavy); padding-bottom:10px }
body[data-page="resources"] section.grp > .lede{ font-family:var(--ui-sans); color:var(--ui-ink) }
body[data-page="resources"] .items{ border-top:0; margin-top:4px }
body[data-page="resources"] .item{ border:0; border-bottom:1px solid var(--ui-line); padding:18px 0; margin:0 }
body[data-page="resources"] .item h3{ font-size:var(--t-title); font-weight:800 }
body[data-page="resources"] .item h3 a{ color:var(--ui-ink); border-bottom:2px solid var(--ui-accent); text-decoration:none }
body[data-page="resources"] .item h3 a:hover{ color:var(--ui-accent) }
body[data-page="resources"] .item .desc{ font-family:var(--ui-sans); color:var(--ui-ink) }
/* the tags on an entry are labels, not buttons: plain bold text, no frame */
body[data-page="resources"] .tag{
  font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none;
  background:none !important; border:0 !important; padding:0; margin-right:10px; color:var(--ui-ink-3) !important; cursor:default;
}
body[data-page="resources"] .tag.fmt{ color:var(--ui-accent) !important; text-transform:capitalize }
body[data-page="resources"] .url, body[data-page="resources"] .cost{ font-family:var(--ui-sans); font-size:var(--t-kick); color:var(--ui-ink-3) }
body[data-page="resources"] .cost{ font-weight:800; color:var(--ui-ink) }

@media (max-width:900px){
  /* On a phone the filters are five rows of buttons, a third of the screen,
     so they scroll away with the page instead of staying on top. */
  body[data-page="resources"] .filters{ position:static }
  body[data-page="resources"] .legend{ grid-template-columns:1fr }
  body[data-page="resources"] .legend > div{ display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:14px; align-items:baseline; padding:12px 0; border-left:0 !important }
  body[data-page="resources"] .legend > div + div{ padding-left:0 }
  body[data-page="resources"] .legend .pct{ grid-row:1 / span 2; font-size:26px }
  body[data-page="resources"] .legend .nm{ margin-top:0 }
}
/* the page's own ".legend div" rule also reaches the divs inside each entry */
body[data-page="resources"] .legend > div > div{ padding:0 !important; border:0 !important }
/* the masthead already ends in a heavy rule, so the exam block does not add another */
body[data-page="resources"] .blueprint{ border-top:0; padding-top:0; margin-top:28px }

/* the module switch in the centre of the phone bar */
.ctxbtn{
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:700; color:var(--ui-ink);
  background:none; border:var(--mid); padding:5px 10px; cursor:pointer; white-space:nowrap;
}
.ctxbtn::after{ content:" \25BE"; font-size:.85em }
.ctxbtn[aria-expanded="true"]{ background:var(--ui-ink); color:var(--ui-bg) }

/* the facts line under a lesson title is gone when there is nothing left in it */
.lhead .bar:empty{ display:none }

/* ============================================ THE FIVE MODULES, AS AN INDEX
   Desktop: a table like the Manual mockup's course home. Number, module,
   share of the exam, lessons read with a bar, drill score. The module you are
   in is shaded. Phone: one block per module, the bar under the title, a line
   of facts, and a button on the module you are in. The whole row is the link. */
body[data-page="home"] .ledger{ gap:0; border-top:0; margin-top:8px }
body[data-page="home"] .ledger .rid,
body[data-page="home"] .ledger .blurb,
body[data-page="home"] .ledger .meta{ display:none }
body[data-page="home"] .ledhead,
body[data-page="home"] .ledger .row{
  display:grid; grid-template-columns:88px minmax(0,1fr) 140px 240px 110px 44px;
  column-gap:0; align-items:center;
}
/* the arrow at the end of each module row (XIG, 30 Sep 2026) */
body[data-page="home"] .ledger .go{ grid-column:6; grid-row:1 / span 2; justify-self:end; padding-right:12px; font-size:24px; line-height:1; color:var(--ui-accent) }
body[data-page="home"] .ledhead{ border-bottom:var(--mid); padding:8px 0; font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }
body[data-page="home"] .ledhead span:first-child{ padding-left:12px }
body[data-page="home"] .ledhead span:nth-child(n+3){ padding-left:16px }
body[data-page="home"] .ledger .row{
  position:relative; grid-template-rows:auto auto; padding:16px 0; border:0; border-bottom:1px solid var(--ui-ink);
}
body[data-page="home"] .ledger .row:hover{ background:var(--ui-hover) }
body[data-page="home"] .ledger .row.here{ background:var(--ui-panel-2) }
body[data-page="home"] .ledger .mid,
body[data-page="home"] .ledger .info{ display:contents }
body[data-page="home"] .ledger .no{
  grid-column:1; grid-row:1 / span 2; padding-left:12px;
  font-size:40px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ui-accent);
}
body[data-page="home"] .ledger .row h3{ grid-column:2; grid-row:1 / span 2; margin:0; padding-right:16px; font-size:21px; line-height:1.2 }
body[data-page="home"] .ledger .row h3 a{ color:var(--ui-ink); border:0 }
/* the title's link covers the whole row */
body[data-page="home"] .ledger .row h3 a::after{ content:""; position:absolute; inset:0 }
body[data-page="home"] .ledger .row:hover h3 a{ color:var(--ui-accent) }
body[data-page="home"] .ledger .wt{ grid-column:3; grid-row:1 / span 2; margin:0; padding-left:16px; font-size:var(--t-body); text-align:left; justify-self:start }
body[data-page="home"] .ledger .mprog{ grid-column:4; grid-row:1; align-self:end; margin:0; padding-left:16px }
body[data-page="home"] .ledger .mprog .pb{ height:10px; background:var(--ui-track) }
body[data-page="home"] .ledger .mprog .pb i{ background:var(--ui-ink) }
body[data-page="home"] .ledger .rd{ grid-column:4; grid-row:2; align-self:start; padding:6px 0 0 16px; font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }
body[data-page="home"] .ledger .sc{ grid-column:5; grid-row:1 / span 2; padding-left:16px; font-size:var(--t-body); font-weight:700 }
body[data-page="home"] .ledger .sc.low{ color:var(--ui-accent) }
body[data-page="home"] .ledger .sc:empty::before{ content:"\2013"; color:var(--ui-ink-3); font-weight:400 }
body[data-page="home"] .ledger .act{ display:none }
body[data-page="home"] .ledger .row.total{ border-bottom:var(--heavy) }
body[data-page="home"] .ledger .row.total:hover{ background:none }
body[data-page="home"] .ledger .row.total h3{ font-size:var(--t-body) }
body[data-page="home"] .course{ border:0; padding:12px 0 0 }

@media (max-width:900px){
  body[data-page="home"] .ledhead{ display:none }
  body[data-page="home"] .ledger .row{
    grid-template-columns:48px minmax(0,1fr) 28px; grid-template-rows:none; row-gap:10px;
    padding:16px 8px 16px 0; align-items:start;
  }
  body[data-page="home"] .ledger .go{ grid-column:3; grid-row:1 / span 3; align-self:center; padding-right:0 }
  body[data-page="home"] .ledger .no{ grid-row:1 / span 3; padding-left:0; font-size:22px }
  body[data-page="home"] .ledger .row.here .no{ grid-row:1 / span 4 }
  body[data-page="home"] .ledger .row h3{ grid-column:2; grid-row:1; font-size:18px }
  body[data-page="home"] .ledger .mprog{ grid-column:2; grid-row:2; padding:0 }
  body[data-page="home"] .ledger .mprog .pb{ height:8px }
  body[data-page="home"] .ledger .info{ grid-column:2; grid-row:3; display:flex; flex-wrap:wrap; gap:2px 14px; font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }
  body[data-page="home"] .ledger .info > span, body[data-page="home"] .ledger .info .rd{ padding:0; align-self:baseline; font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }
  body[data-page="home"] .ledger .wt::after{ content:" of the exam" }
  body[data-page="home"] .ledger .row.total .wt{ display:none }
  body[data-page="home"] .ledger .sc:not(:empty)::after{ content:" drill" }
  body[data-page="home"] .ledger .sc:empty{ display:none }
}

/* ------------------------------------------------ references in the text
   A letter marker (a lesson that covers more) looks exactly like a number
   marker (a source): small, raised, red, no frame. */
.xref{
  display:inline; font-family:var(--ui-sans); font-size:.62em; font-weight:800; line-height:1;
  vertical-align:super; color:var(--ui-accent); background:none; border:0; padding:0; margin-left:2px;
  text-decoration:none;
}
.xref:hover{ color:var(--ui-accent-hi); text-decoration:underline; border:0 }
.xref + .xref{ margin-left:1px }

/* Sources and "Covered in other lessons" are one list style: the number or
   letter in plain red, no box, and the details at reading size. */
.srclist li, .xreflist li{ padding-left:36px; font-family:var(--ui-sans); font-size:var(--t-body); line-height:1.5; color:var(--ui-ink-2) }
.srclist li::before, .xreflist .xn{
  position:absolute; left:0; top:0; width:auto; height:auto; display:block;
  background:none !important; border:0 !important; padding:0;
  font-family:var(--ui-sans); font-size:var(--t-body); font-weight:800; line-height:1.5; color:var(--ui-accent) !important;
}
.srcp, .srcd{ font-family:var(--ui-sans); font-size:var(--t-body); color:var(--ui-ink-2) }
/* the entry a marker jumps to is tinted, the whole line, not the number */
.srclist li:target, .xreflist li:target{ background:var(--ui-accent-soft) }

/* space between the lesson head and the tab row, at every width (the phone
   rule in console.css zeroed the margin, which only showed once the facts
   line under the subtitle was removed) */
body.has-rail .tabs{ margin-top:28px }
@media (max-width:900px){ body.has-rail .tabs{ margin-top:24px } }

/* ======================================== PRACTICE AND REFERENCE, COURSE HOME
   Mock exams and labs side by side, each a title, one sentence, a plain list,
   a note and one link. Reference is three linked titles. */
body[data-page="home"] .pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:24px }
body[data-page="home"] .pcol h3{ margin:0; font-size:26px; font-weight:800; letter-spacing:-.02em }
body[data-page="home"] .pcol > p{ margin:8px 0 16px; font-family:var(--ui-sans); font-size:var(--t-body); line-height:1.55; color:var(--ui-ink) }
body[data-page="home"] .plist{ margin:0; border-top:var(--mid) }
/* The tag column is as wide as the list's widest tag, then the same 12px gap as
   the lab list (XIG, 4 Oct 2026: the mock tags M60, M30, MD sat in a 130px
   column, so their text started far from the tag). 2.5em fits M60. */
body[data-page="home"] .plist > div{ display:grid; grid-template-columns:2.5em minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--ui-line) }
body[data-page="home"] .plist.num > div{ grid-template-columns:24px 1fr }
body[data-page="home"] .plist dt{ font-weight:800 }
body[data-page="home"] .plist.num dt{ color:var(--ui-accent) }
body[data-page="home"] .plist dd{ margin:0 }
body[data-page="home"] .pcol > p.pnote{ margin:14px 0 0; font-size:var(--t-kick); line-height:1.5; color:var(--ui-ink-3) }
body[data-page="home"] .plink, body[data-page="home"] .rgrid a{
  display:inline-block; margin-top:18px; font-weight:700; font-size:var(--t-body);
  color:var(--ui-ink); border-bottom:3px solid var(--ui-accent); text-decoration:none;
}
body[data-page="home"] .plink::after{ content:" \2192" }
body[data-page="home"] .plink:hover, body[data-page="home"] .rgrid a:hover{ color:var(--ui-accent) }
body[data-page="home"] .rgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:24px }
body[data-page="home"] .rgrid > div{ padding-top:4px }
body[data-page="home"] .rgrid a{ margin-top:0; font-size:20px; font-weight:800 }
body[data-page="home"] .rgrid p{ margin:10px 0 0; font-family:var(--ui-sans); color:var(--ui-ink) }
@media (max-width:900px){
  body[data-page="home"] .pgrid{ grid-template-columns:1fr; gap:40px }
  body[data-page="home"] .pcol h3{ font-size:22px }
  body[data-page="home"] .rgrid{ grid-template-columns:1fr; gap:0 }
  body[data-page="home"] .rgrid{ gap:22px }
  body[data-page="home"] .rgrid > div{ padding:0 }
}

/* A table of short numbers (the mock's bank coverage, the blueprint's weights)
   on a phone (XIG, 4 Oct 2026): the name on one row, then the figures side by
   side under their column names. Kept as a table it was squashed; stacked
   fully, a screen per domain. Mark such a table class="keep". */
@media (max-width:620px){
  table.keep tbody tr{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 12px; padding:16px 0; border-bottom:1px solid var(--ui-line) }
  table.keep tbody tr:last-child{ border-bottom:var(--mid) }
  table.keep tbody td, table.keep tbody td.n{ padding:0 !important; border:0 !important; text-align:left !important; font-size:var(--t-body); white-space:normal; overflow-wrap:normal }
  table.keep tbody td:first-child{ grid-column:1 / -1; min-width:0; white-space:normal !important; font-family:var(--ui-sans); font-weight:500; color:var(--ui-ink) }
  table.keep tbody td:not(:first-child){ font-family:var(--ui-sans); font-weight:700 }
  table.keep tbody td[data-label]::before{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; text-transform:none; color:var(--ui-ink-3); margin-bottom:2px }
  body[data-page="blueprint"] table.keep tbody tr:last-child td:first-child{ font-weight:800 }
}
}
@media (max-width:620px){ table.t.cov.att td:first-child{ white-space:nowrap; overflow-wrap:normal !important } }

/* ------------------------------------------------ labs: text to paste
   The prompts to paste were a pale green box with a green bar down the left.
   They take the Manual's frame instead: a 2px black box, a small bold label,
   and the prompt at reading size. The terminal commands share it. */
body[data-page="labs"] .lab-body blockquote{
  border:var(--mid) !important; background:var(--ui-bg) !important; padding:14px 18px !important;
  font-family:var(--ui-sans); font-size:var(--t-body); color:var(--ui-ink);
}
body[data-page="labs"] .lab-body blockquote::before{
  font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:800; letter-spacing:.06em;
  color:var(--ui-ink-3); margin-bottom:6px;
}
body[data-page="labs"] .lab-body blockquote code{ background:var(--ui-code-bg) }
/* the lab's own headings and the closing box, which still carried the old accent */
body[data-page="labs"] .lab-body h3{ font-family:var(--ui-sans); font-size:var(--t-title); font-weight:800; letter-spacing:0; text-transform:none; color:var(--ui-ink); border-bottom:var(--mid) }
body[data-page="labs"] details.running summary::before{ color:var(--ui-accent); font-weight:800 }
/* The exam-guide chip carries the class "gd", which the theme also uses for a
   grid of cards on the labs page; it made the chip a 240px-wide grid. */
body[data-page="labs"] .chip.gd{ display:inline-block; grid-template-columns:none }
/* only the lab's title is large; section headings inside the lab are section size */
body[data-page="labs"] #lab .lab-body h2:not(.shead > h2){ font-size:30px; line-height:1.12; letter-spacing:-.02em }
@media (max-width:900px){ body[data-page="labs"] #lab .lab-body h2:not(.shead > h2){ font-size:24px } }
/* the Setting up entry in the labs list: a word, not a number */
body[data-page="labs"] .pk.setup .n{ font-size:var(--t-kick); letter-spacing:.04em; text-transform:uppercase }
body[data-page="labs"] .setuptable td:first-child{ font-weight:800 }
body[data-page="labs"] .lab-body table.setuptable{ border:0 !important; margin:8px 0 0 }
body[data-page="labs"] .lab-body table.setuptable th,
body[data-page="labs"] .lab-body table.setuptable td{ border:0 !important; border-bottom:1px solid var(--ui-line) !important; background:none !important; padding:12px 18px 12px 0 !important }
body[data-page="labs"] .lab-body table.setuptable th{ border-bottom:1px solid var(--ui-ink) !important; padding-top:8px !important; padding-bottom:8px !important }
/* column names on a table stacked for a phone: plain bold labels, like every
   other label in the Manual look */
@media (max-width:620px){
  table.rt tbody td[data-label]::before, table.tr tbody td[data-label]::before, table.t tbody td[data-label]::before{
    font-family:var(--ui-sans) !important; font-size:var(--t-kick) !important; font-weight:700;
    letter-spacing:0 !important; text-transform:none !important; color:var(--ui-ink-3);
  }
}

/* ---- accordions (XIG, 29 Sep 2026): long pages fold into rows ---- */
details.acc{ border-top:var(--heavy); border-bottom:var(--mid); margin:0 }
details.acc + details.acc, .accbar + details.acc, .shead + details.acc{ border-top:0 }
/* Resources wraps each group's accordion in its own section, so the sibling
   rule above never matched and every row drew both rules: one rule between
   rows, and none over the footer after the last (XIG, 30 Sep 2026) */
body[data-page="resources"] .grp > details.acc{ border-top:0 }
body[data-page="resources"] footer{ border-top:0; margin-top:24px }
body[data-page="mock"] .modes + details.acc{ margin-top:8px }
details.acc > summary{ list-style:none; display:flex; align-items:center; gap:14px; padding:15px 0; cursor:pointer; min-height:48px; box-sizing:border-box; font-family:var(--ui-sans) }
details.acc > summary::-webkit-details-marker{ display:none }
details.acc > summary::marker{ content:"" }
details.acc > summary .acc-n{ flex:none; min-width:56px; white-space:nowrap; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--ui-accent) }
details.acc > summary .acc-t{ flex:1; font-size:20px; font-weight:700; letter-spacing:-.015em; line-height:1.25 }
details.acc > summary .acc-c{ flex:none; font-size:var(--t-num); color:var(--ui-ink-3) }
details.acc > summary .acc-pm{ flex:none; width:24px; text-align:right; font-size:26px; line-height:1; color:var(--ui-accent) }
details.acc > summary .acc-pm::before{ content:"+" }
details.acc[open] > summary .acc-pm::before{ content:"\2013" }
details.acc[open] > summary .acc-t{ color:var(--ui-accent) }
details.acc > summary:hover .acc-t{ color:var(--ui-accent) }
details.acc > .acc-body{ padding:0 0 26px }
details.acc > .acc-body > :first-child{ margin-top:0 }
details.acc.acc-sub{ border:var(--mid); margin:16px 0 0; padding:0 16px; max-width:66ch; box-sizing:border-box }
details.acc.acc-sub > summary{ padding:11px 0; min-height:44px }
details.acc.acc-sub > summary .acc-t{ font-size:15px }
details.acc.acc-sub > summary .acc-pm{ font-size:22px }
details.acc.acc-sub > .acc-body{ padding:0 0 16px }
.accbar{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:var(--mid); padding:0 0 10px; margin:30px 0 0 }
.accbar .acc-cap{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-accent) }
.accbar .acc-all{ font-family:var(--ui-sans); font-size:var(--t-num); font-weight:700; color:var(--ui-accent); background:none; border:0; border-bottom:2px solid var(--ui-accent); padding:0; cursor:pointer }
body[data-page="labs"] .lab-body details.acc{ max-width:none }
body[data-page="labs"] .lab-body details.acc > .acc-body > h3:first-child{ margin-top:0 }
body[data-page="resources"] section.grp{ border:0; padding:0; margin:0 }
body[data-page="resources"] .accbar{ margin-top:34px }
body[data-page="mock"] details.acc .t.cov{ margin-top:0 }
@media (max-width:900px){
  details.acc > summary{ gap:12px; padding:13px 0 }
  details.acc > summary .acc-n{ min-width:0; font-size:11px }
  details.acc > summary .acc-t{ font-size:17px }
  details.acc > summary .acc-c{ font-size:13px }
  details.acc > summary .acc-pm{ font-size:22px; width:20px }
  .accbar{ margin-top:22px }
  body:is([data-page="home"],[data-page="about"]) #before-you-start details.acc > .acc-body{ padding-bottom:20px }
  body:is([data-page="home"],[data-page="about"]) #before-you-start details.acc > .acc-body > .path{ margin-top:0 }
}

/* ---- course home as a desk (XIG, 29 Sep 2026) ---- */
body[data-page="home"] .where{ border:var(--heavy); padding:22px 24px 26px; margin-top:40px }
body[data-page="home"] .where .wk{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; letter-spacing:0; color:var(--ui-ink-3) }
body[data-page="home"] .where .wl{ font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.12; margin-top:6px }
body[data-page="home"] .where .wn{ color:var(--ui-accent) }
body[data-page="home"] .where #go{ margin-top:18px }
body[data-page="home"] .where .wsub{ font-family:var(--ui-sans); font-size:var(--t-num); color:var(--ui-ink-3); margin:14px 0 0 }
/* The Continue box sits in the rail (XIG, 30 Sep 2026: one shell for every
   signed-in page); the ledger has the whole sheet. */
body[data-page="home"] :is(.rail, .pagesheet) > .where{ margin:-32px -28px 24px; padding:24px 28px 24px; border:0; background:var(--ui-ink); color:var(--ui-bg) }
body[data-page="home"] :is(.rail, .pagesheet) > .where .wk{ color:var(--ui-line) }
body[data-page="home"] :is(.rail, .pagesheet) > .where .wl{ font-size:22px }
body[data-page="home"] :is(.rail, .pagesheet) > .where .wn{ color:var(--ui-accent-hi, var(--ui-accent)) }
/* the CTA rule above sets ink with !important, so the white button in the black box needs the same */
body[data-page="home"] :is(.rail, .pagesheet) > .where #go{ display:inline-block; background:var(--ui-bg) !important; color:var(--ui-ink) !important; border-color:var(--ui-bg) !important; margin-top:14px; padding:10px 16px; font-size:var(--t-ui); text-align:left }
body[data-page="home"] :is(.rail, .pagesheet) > .where #go:hover{ background:var(--ui-accent) !important; border-color:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
body[data-page="home"] :is(.rail, .pagesheet) > .where .wsub{ color:var(--ui-line) }
/* on a phone the box is the first thing on the page, edge to edge, as in the rail */
@media (max-width:900px){
  body[data-page="home"] .pagesheet > .where{ margin:0 -20px 24px; padding:22px 20px 24px }
}
}
@media (max-width:900px){
  body[data-page="home"] .where{ margin-top:22px; padding:18px 18px 20px }
  body[data-page="home"] .where .wl{ font-size:22px }
}
body[data-page="about"] .also a{ font-family:var(--ui-sans); font-weight:800; font-size:var(--t-title); color:var(--ui-ink); border-bottom:1px solid var(--ui-ink) }
body[data-page="about"] .also a:hover{ color:var(--ui-accent) }
body[data-page="about"] .also a small{ font-weight:400; font-size:var(--t-body); color:var(--ui-ink-2) }
body[data-page="about"] .also{ border-top:0 }
body[data-page="about"] .startrow{ border-top:0; padding-top:0; margin:40px 0 44px }
body[data-page="about"] #start::after{ content:" \2192" }
body[data-page="about"] #before-you-start details.acc > .acc-body{ padding-bottom:24px }
body[data-page="about"] #before-you-start details.acc > .acc-body > .path{ margin-top:0 }

/* a chevron at the right of every rail row: rail lists are places to go
   (XIG, 30 Sep 2026) */
.rail .pk, .mockrail .mode{ position:relative; padding-right:26px !important }
.rail .pk::after, .mockrail .mode::after{
  content:"\203A"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--ui-sans); font-size:20px; line-height:1; font-weight:400; color:var(--ui-ink-3);
  background:none; padding:0; margin:0; display:block;
}
.rail .pk[aria-current="true"]::after{ color:var(--ui-bg) }
.mockrail .mode[disabled]::after{ content:"\203A"; color:var(--ui-line) }

/* the mark's note box: an input and two square buttons of the same height,
   tick to keep the mark (with the note if typed), cross to remove it
   (XIG, 30 Sep 2026) */
.apn{ gap:6px; align-items:stretch }
.apn input{ height:44px; box-sizing:border-box; padding:0 12px; border:var(--mid); border-radius:0; background:var(--ui-bg); color:var(--ui-ink); font-family:var(--ui-sans); font-size:var(--t-ui) }
.apn input:focus{ outline:0; border-color:var(--ui-accent) }
.apn button{ flex:0 0 44px; width:44px; height:44px; padding:0; border:var(--mid); border-radius:0; font-family:var(--ui-sans); font-size:18px; font-weight:800; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center }
.apn .apn-ok{ background:var(--ui-ink); color:var(--ui-bg); border-color:var(--ui-ink) }
.apn .apn-ok:hover{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent) }
.apn .apn-x{ background:none; color:var(--ui-ink) }
.apn .apn-x:hover{ background:var(--ui-hover) }
.apn button:disabled, .apn input:disabled{ opacity:.5; cursor:default }
.apnm{ display:block; padding:12px 0 }

/* the text follows the audio (XIG, 30 Sep 2026): the paragraph being read has a
   thin accent bar at its left; the pill brings the page back when the reader has
   scrolled it off the screen */
.follow-on:not(td):not(th):not(tr){ position:relative }
.follow-on:not(td):not(th):not(tr):not(li)::before{ content:""; position:absolute; left:calc(-16px - var(--fo, 0px)); top:.15em; bottom:.15em; width:4px; background:var(--ui-accent) }
/* a list item's ::before is its step number or tick, so its bar is ::after and
   the number stays (XIG, 1 Oct 2026). Every bar sits where a paragraph's does,
   left of the text column: follow.js sets --fo, how far the item sits in from
   the column (an indented list, a line inside a decision rule box or a trap).
   The fallbacks are for an item lit without it. */
li.follow-on::after{ content:""; position:absolute; left:calc(-16px - var(--fo, 24px)); top:.15em; bottom:.15em; width:4px; background:var(--ui-accent) }
:is(ol.rlist, ul.tick, .srclist, .p-plan ul, .path) > li.follow-on::after{ left:calc(-16px - var(--fo, 0px)) }
/* a trap's title already uses ::before for its "Trap" label, so its bar is ::after */
.trap .tt.follow-on::before{ position:static; width:auto; background:none; top:auto; bottom:auto; left:auto }
/* a rule box of one statement lights as a whole; its ::before is the "Carry this
   into the exam" label, so its bar is ::after too */
.rule.follow-on::before{ position:static; width:auto; background:none; top:auto; bottom:auto; left:auto; content:"Carry this into the exam" }
.rule.follow-on::after{ content:""; position:absolute; left:calc(-16px - var(--fo, 0px)); top:.15em; bottom:.15em; width:4px; background:var(--ui-accent) }
@media (max-width:900px){ .rule.follow-on::after{ left:calc(-11px - var(--fo, 0px)); width:3px } }
.trap .tt.follow-on::after{ content:""; position:absolute; left:calc(-16px - var(--fo, 0px)); top:.15em; bottom:.15em; width:4px; background:var(--ui-accent) }
@media (max-width:900px){ .trap .tt.follow-on::after{ left:calc(-11px - var(--fo, 0px)); width:3px } }
/* the lesson title shares its row with the big lesson number, so a bar of its own
   would sit between the two. The header draws the bar instead, at the left edge
   where a paragraph's bar sits, as tall as the title row (XIG, 1 Oct 2026). */
.lhead > h2.follow-on::before{ content:none }
.lhead:has(> h2.follow-on)::after{
  content:""; grid-row:1; grid-column:1; justify-self:start; align-self:stretch;
  width:4px; margin:4px 0 4px -16px; background:var(--ui-accent);
}
@media (max-width:900px){ .lhead:has(> h2.follow-on)::after{ width:3px; margin-left:-11px } }
@media (max-width:900px){
  .follow-on:not(td):not(th):not(tr):not(li)::before{ left:calc(-11px - var(--fo, 0px)); width:3px }
  li.follow-on::after{ left:calc(-11px - var(--fo, 21px)); width:3px }
  :is(ol.rlist, ul.tick, .srclist, .p-plan ul, .path) > li.follow-on::after{ left:calc(-11px - var(--fo, 0px)) }
}
/* a table cell's bar sits outside the cell, the same distance left of its text as
   a paragraph's, instead of a stripe inside the cell that touched the first letters.
   ::after, because a cell stacked for a phone uses ::before for its column name
   (XIG, 1 Oct 2026) */
:is(td, th, tr).follow-on{ position:relative }
:is(td, th, tr).follow-on::after{ content:""; position:absolute; left:calc(-16px - var(--fo, 0px)); top:.15em; bottom:.15em; width:4px; background:var(--ui-accent) }
@media (max-width:900px){ :is(td, th, tr).follow-on::after{ left:calc(-11px - var(--fo, 0px)); width:3px } }
/* a whole row being read: the bar runs down the row, left of its first cell.
   A row that is still a table row cannot carry a box of its own (the browser
   makes it an extra cell and pushes the row sideways), so there the first cell
   draws it, and a cell is as tall as its row. On a phone the row is a stacked
   block and draws the bar itself. */
tr.follow-on::after{ top:6px; bottom:6px }
@media (min-width:621px){
  tr.follow-on::after{ content:none }
  tr.follow-on > :first-child{ position:relative }
  tr.follow-on > :first-child::after{ content:""; position:absolute; left:calc(-16px - var(--fo, 0px)); top:6px; bottom:6px; width:4px; background:var(--ui-accent) }
}
@media (min-width:621px) and (max-width:900px){ tr.follow-on > :first-child::after{ left:calc(-11px - var(--fo, 0px)); width:3px } }
/* A table's frame cuts off anything outside it, and the bar sits outside the
   first column. So the frame reaches 16px (11px up to 900px) further left,
   empty, and the table stays where it was. The rules above and below are drawn
   as backgrounds that start where the table starts, so they do not grow. On a
   phone the table is stacked blocks with no frame, and nothing is cut off, as
   the stacked layout intends (XIG, 1 Oct 2026). */
@media (min-width:621px){
  .panel .scroller{
    --gut:16px; margin-left:calc(-1 * var(--gut)); padding:2px 0 2px var(--gut); border:0; max-width:none;
    background:
      linear-gradient(var(--ui-ink), var(--ui-ink)) var(--gut) 0 / calc(100% - var(--gut)) 2px no-repeat,
      linear-gradient(var(--ui-ink), var(--ui-ink)) var(--gut) 100% / calc(100% - var(--gut)) 2px no-repeat;
  }
}
@media (min-width:621px) and (max-width:900px){ .panel .scroller{ --gut:11px } }
@media (max-width:620px){ .panel .scroller{ overflow:visible } }
.followpill{
  position:fixed; z-index:40; transform:translateX(-50%); left:50%;
  background:var(--ui-ink); color:var(--ui-bg); border:0; border-radius:0;
  font-family:var(--ui-sans); font-weight:800; font-size:var(--t-ui); padding:11px 18px;
  cursor:pointer; box-shadow:4px 4px 0 var(--ui-accent);
}
.followpill::before{ content:"\2193  " }
.followpill.up::before{ content:"\2191  " }
.followpill:hover{ background:var(--ui-accent); color:var(--ui-on-accent) }
.followpill[hidden]{ display:none }

/* "Back to lesson" on the Reference tab matches "Back to reading": black, square,
   red shadow (XIG, 1 Oct 2026). It sits 20px above the foot of the window, or
   above the player when the player lies across the foot of a phone screen. The
   page used to add the player's height even when the player was in the rail,
   which left the button floating mid-page on a desktop. */
body .backjump{
  bottom:calc(var(--dock, 0px) + 20px); z-index:40;
  background:var(--ui-ink); color:var(--ui-bg); border:0; border-radius:0;
  font-family:var(--ui-sans); font-weight:800; font-size:var(--t-ui); padding:11px 18px;
  box-shadow:4px 4px 0 var(--ui-accent);
}
body .backjump::before{ content:"\2190  " }
body .backjump:hover{ opacity:1; background:var(--ui-accent); color:var(--ui-on-accent) }

/* The reference detail a link lands on lights red, the theme's colour (was blue;
   XIG, 1 Oct 2026). It holds at full strength for 1 second, then fades over 0.6
   seconds (XIG, 1 Oct 2026: 1.3 seconds in all was too quick). */
@keyframes refhit-red{
  0%, 62.5%{ background:color-mix(in srgb, var(--ui-accent) 16%, transparent);
           box-shadow:0 0 0 8px color-mix(in srgb, var(--ui-accent) 16%, transparent) }
  100%{ background:transparent; box-shadow:0 0 0 8px transparent }
}
body .refhit{ animation:refhit-red 1.6s ease-out }
@media (prefers-reduced-motion:reduce){ body .refhit{ animation-duration:.6s } }

/* ------------------------------------------------ feedback (scripts/markup.js)
   Press and hold a passage, or press Mark on the player, and the note opens in a
   popup with a text box that grows as it is filled (XIG, 1 Oct 2026). */
/* The long press is the note gesture, so the phone's own copy bubble stays out
   of the way. Text selection still works. */
body.can-note :is(#p-read, #p-ref, #p-refx, #p-drill, #p-more){ -webkit-touch-callout:none }
.mkheld, .mkon{ background:var(--ui-accent-soft) !important; transition:background .18s ease }
@media (prefers-reduced-motion:reduce){ .mkheld{ transition:none } }
.mkpin{
  display:inline-block; font-family:var(--ui-sans); font-size:11px; font-weight:800; line-height:1;
  vertical-align:super; color:var(--ui-on-accent); background:var(--ui-accent);
  padding:3px 6px; margin-left:5px; cursor:pointer; -webkit-user-select:none; user-select:none;
}
.mkhint{
  display:flex; gap:12px; align-items:center; margin:0 0 16px; padding:10px 14px;
  border:var(--mid);
  font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink-2);
}
.mkhint button{ margin-left:auto; padding:0; border:0; background:none; font:inherit; font-weight:700; color:var(--ui-ink); text-decoration:underline; cursor:pointer }
/* The line the Notes page's "Go to this spot" puts above a passage. It can land
   inside a box the theme draws inverted, a trap box (ink ground, page-colour
   text), where the hint's own ink text on no ground could not be read (XIG,
   3 Oct 2026). So it carries its own page-colour ground and full ink text, a
   card on any ground in either theme. */
.mkhint.mkjump{
  align-items:flex-start; background:var(--ui-bg); color:var(--ui-ink);
  border:2px solid var(--ui-ink); font-weight:400; line-height:1.5; opacity:1;
}
.trap .mkhint.mkjump{ margin:16px 0 }
.mkhint.mkjump span{ color:var(--ui-ink) }
.mkstale{ font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:800; letter-spacing:.06em; color:var(--ui-accent) }

.mkpop{
  width:min(640px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box;
  margin:auto; padding:0; overflow:auto;
  background:var(--ui-bg); color:var(--ui-ink); border:var(--heavy); border-radius:0;
  box-shadow:6px 6px 0 var(--ui-accent); font-family:var(--ui-sans);
}
.mkpop::backdrop{ background:rgba(0,0,0,.45) }
.mkpop-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:var(--mid) }
.mkpop-head h2{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.2 }
.mkpop-x{
  margin-left:auto; flex:0 0 40px; width:40px; height:40px; padding:0; border:var(--mid); border-radius:0;
  background:none; color:var(--ui-ink); font-size:16px; font-weight:800; line-height:1; cursor:pointer;
}
.mkpop-x:hover{ background:var(--ui-hover) }
.mkpop-body{ padding:16px 18px 18px }
.mkpop .mkq{
  /* the same tint the held passage carries on the page, so the two read as one */
  margin:0 0 14px; padding:10px 12px; background:var(--ui-accent-soft);
  font-size:var(--t-ui); line-height:1.5; color:var(--ui-ink-2); max-height:9em; overflow:auto;
}
.mkpop .mkkind{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px; font-size:var(--t-ui); font-weight:700 }
.mkpop select{
  font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink); background:var(--ui-bg);
  border:var(--mid); border-radius:0; padding:8px 10px;
}
.mkpop .how{ margin:0 0 8px; font-size:var(--t-ui); color:var(--ui-accent) }
.mkpop textarea{
  display:block; width:100%; min-height:9em; box-sizing:border-box; resize:vertical;
  padding:10px 12px; border:var(--mid); border-radius:0; background:var(--ui-bg); color:var(--ui-ink);
  font-family:var(--ui-sans); font-size:16px; line-height:1.5;
}
.mkpop textarea:focus, .mkpop select:focus{ outline:0; border-color:var(--ui-accent) }
.mkpop .row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px }
.mkpop .row button{
  min-height:44px; padding:0 18px; border:var(--mid); border-radius:0; background:none; color:var(--ui-ink);
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:800; cursor:pointer;
}
.mkpop .row button.go{ background:var(--ui-ink); color:var(--ui-bg); border-color:var(--ui-ink) }
.mkpop .row button.go:hover{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent) }
.mkpop .row button.no:hover{ background:var(--ui-hover) }
.mkpop button:disabled, .mkpop textarea:disabled{ opacity:.5; cursor:default }
.mkpop .msg{ margin-left:auto; font-size:var(--t-kick); color:var(--ui-ink-3) }
/* "Say it like this" (3 Oct 2026): as written, and how it should sound */
.mkpop .mksay-t{
  display:inline-flex; align-items:center; min-height:44px; margin:0 0 10px; padding:0 14px;
  border:var(--mid); border-radius:0; background:none; color:var(--ui-ink);
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:700; cursor:pointer }
.mkpop .mksay-t:hover{ background:var(--ui-hover) }
.mkpop .mksay-t[aria-expanded="true"]{ background:var(--ui-accent-soft); border-color:var(--ui-accent) }
.mkpop .mksay{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 12px }
.mkpop .mksay[hidden]{ display:none }
.mkpop .mksay label{ display:flex; flex-direction:column; gap:4px; min-width:0; font-size:var(--t-ui); font-weight:700 }
.mkpop .mksay input{
  width:100%; box-sizing:border-box; min-height:44px; padding:8px 10px;
  border:var(--mid); border-radius:0; background:var(--ui-bg); color:var(--ui-ink);
  font-family:var(--ui-sans); font-size:16px; font-weight:400 }
.mkpop .mksay input:focus{ outline:0; border-color:var(--ui-accent) }
.mkpop .mksay input:disabled{ opacity:.5 }
.mknote p{ white-space:pre-wrap }
@media (max-width:480px){ .mkpop .mksay{ grid-template-columns:1fr } }
.mknote{ border-top:1px solid var(--ui-line); padding-top:10px; margin-top:12px }
.mknote .meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:var(--t-kick); color:var(--ui-ink-3) }
.mknote .meta button{ padding:4px 10px; border:var(--mid); border-radius:0; background:none; color:var(--ui-ink); font:inherit; font-weight:700; cursor:pointer }
.mknote p{ margin:6px 0 0; font-size:var(--t-ui); color:var(--ui-ink) }
@media (max-width:620px){
  .mkpop{ width:calc(100vw - 16px); max-height:calc(100dvh - 16px) }
  .mkpop-head, .mkpop-body{ padding-left:14px; padding-right:14px }
}

/* automatic jumps land below the bar and the tab row, not under them: the
   height is measured by console.js into --pin (XIG, 30 Sep 2026) */
html{ scroll-padding-top:calc(var(--pin, 112px) + 12px); scroll-padding-bottom:var(--dock, 0px) }
/* and nothing at the foot of the page is left under the docked player */
body{ padding-bottom:var(--dock, 0px) }
/* the side menu scrolls on its own, over the page, so it gets the same room at
   its foot: its last lines can be scrolled clear of the player (XIG, 1 Oct 2026) */
.drawer{ padding-bottom:calc(40px + var(--dock, 0px)); scroll-padding-bottom:var(--dock, 0px) }

/* the drill summary's buttons, full width and centred on a phone (XIG, 30 Sep 2026) */
@media (max-width:900px){
  .sumact{ display:flex; flex-direction:column; align-items:stretch; gap:10px }
  .sumact button{ width:100%; margin:0; text-align:center; justify-content:center }
}

/* an armed clear button: press and hold fills it left to right, then clears
   (XIG, 30 Sep 2026) */
.sumact button.arm{ position:relative; overflow:hidden; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-action:manipulation }
.sumact button.arm .holdtxt{ position:relative }
.sumact button.arm .holdfill{ position:absolute; inset:0; background:var(--ui-accent-soft); transform:scaleX(0); transform-origin:left center }
.sumact button.arm.holding .holdfill{ transform:scaleX(1); transition:transform .9s linear }

/* ================================================================ signed-out pages
   The front page, pricing, and the signed-out view of What changed and About
   (XIG, 30 Sep 2026; design canvas "Proposals · Signed-out pages"). Same type,
   colours and heavy rules as the signed-in pages. The front page and pricing have
   no rail; What changed keeps its own. */

/* things only a signed-in reader can use are not offered to a signed-out one */
.ccaf-guest [data-member]{ display:none !important }

/* the bar's two actions: Sign in, and the one filled button */
.appbar .gacts{ display:flex; align-items:center; gap:10px }
.appbar .gbtn{
  display:inline-flex; align-items:center; min-height:40px; box-sizing:border-box; padding:0 16px;
  border:var(--mid); color:var(--ui-ink); background:none; text-decoration:none;
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:800; white-space:nowrap;
}
.appbar .gbtn:hover{ background:var(--ui-ink); color:var(--ui-bg) }
.appbar .gbtn.k{ background:var(--ui-ink); color:var(--ui-bg) }
.appbar .gbtn.k:hover{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent) }
@media (max-width:620px){
  /* on a phone only the filled button stays in the bar; Sign in is in the menu */
  .appbar .gbtn:not(.k){ display:none }
  .appbar .gbtn{ min-height:36px; padding:0 12px; font-size:14px }
}

/* What changed, signed out: the two counts, and the offer at the foot of the rail */
.chcount{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:var(--mid); margin:8px 0 12px }
.chcount > div{ padding:14px 18px }
.chcount > div + div{ border-left:var(--mid) }
.chcount .k{ display:block; font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }
.chcount b{ display:block; font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--ui-accent); margin:2px 0 }
.chcount .s{ display:block; font-size:14px; line-height:1.4; color:var(--ui-ink-3) }
@media (max-width:620px){
  .chcount{ grid-template-columns:1fr }
  .chcount > div + div{ border-left:0; border-top:var(--mid) }
}
.railoffer{ margin-top:28px; background:var(--ui-ink); color:var(--ui-bg); padding:20px 22px }
.railoffer b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px }
.railoffer span{ display:block; font-size:14px; line-height:1.45; opacity:.8; margin-bottom:14px }
.railoffer a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:0;
  background:var(--ui-bg); color:var(--ui-ink); font-weight:800; font-size:15px; text-decoration:none;
}
.railoffer a:hover{ background:var(--ui-accent); color:var(--ui-on-accent) }

/* ------------------------------------------------ the front page and pricing */
body:is([data-page="front"],[data-page="pricing"]){ background:var(--ui-bg) }
.pub{ --g:64px; color:var(--ui-ink); font-family:var(--ui-sans); display:block; max-width:1440px; margin:0 auto }
.pub *{ box-sizing:border-box }
.pub a:not(.p-btn){ color:var(--ui-accent); border-bottom:0 }
.pub h1, .pub h2, .pub h3, .pub p, .pub ul{ margin:0 }
.pub h2{ font-weight:800; letter-spacing:-.03em }
.pub h3{ letter-spacing:-.02em }
.p-cap{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ui-accent) }
.p-lede{ font-size:22px; line-height:1.45; color:var(--ui-ink-2); max-width:640px }
.p-small{ font-size:14px; line-height:1.5; color:var(--ui-ink-3) }
.p-mono{ font-family:var(--code-mono); font-size:.88em; white-space:nowrap }

.p-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px;
  border:var(--mid); color:var(--ui-ink) !important; background:none; text-decoration:none;
  font-weight:800; font-size:16px; white-space:nowrap;
}
.p-btn.big{ min-height:56px; font-size:18px; padding:0 24px }
.p-btn:hover{ background:var(--ui-ink); color:var(--ui-bg) !important }
.p-btn.k{ background:var(--ui-ink); color:var(--ui-bg) !important }
.p-btn.k:hover{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent) !important }
.p-btn.inv{ background:var(--ui-bg); border-color:var(--ui-bg); color:var(--ui-ink) !important }
.p-btn.inv:hover{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent) !important }

.p-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:72px; padding:80px var(--g) 72px; border-bottom:var(--heavy) }
.p-hero-text{ display:flex; flex-direction:column; gap:22px }
.p-hero h1{ font-size:84px; line-height:.95; letter-spacing:-.05em; font-weight:800; text-wrap:balance }
.p-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:8px }
.p-modhead{ display:flex; justify-content:space-between; gap:12px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ui-ink-3); border-bottom:var(--heavy); padding-bottom:8px }
.p-mod{ display:grid; grid-template-columns:48px minmax(0,1fr) 120px 44px; gap:0 16px; align-items:center; border-bottom:var(--mid); padding:14px 0 }
.p-mod .n{ font-size:26px; font-weight:800; color:var(--ui-accent); letter-spacing:-.04em }
.p-mod .t{ font-size:18px; font-weight:700; letter-spacing:-.015em }
.p-mod .c{ font-size:14px; color:var(--ui-ink-3); text-align:right; font-variant-numeric:tabular-nums }
.p-mod .w{ height:8px; background:var(--ui-track); position:relative }
.p-mod .w::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w,0); background:var(--ui-ink) }

.p-why{ padding:72px var(--g) 0; display:grid; grid-template-columns:320px minmax(0,1fr); gap:48px; align-items:start }
.p-why .p-cap{ padding-top:10px }
.p-why > div{ border-top:var(--heavy); padding-top:22px; display:flex; flex-direction:column; gap:16px }
.p-quote{ font-size:40px; line-height:1.12; letter-spacing:-.03em; font-weight:800; max-width:900px }
.p-body{ font-size:18px; line-height:1.55; color:var(--ui-ink-2); max-width:800px }

.p-check{ margin:48px var(--g) 0; border:var(--heavy); padding:28px 32px; display:grid; grid-template-columns:320px minmax(0,1fr); gap:40px; align-items:start }
.p-check h2{ font-size:28px; line-height:1.1 }
.p-check > div{ display:flex; flex-direction:column; gap:10px; font-size:17px; line-height:1.55; color:var(--ui-ink-2) }

.p-sec{ padding:72px var(--g) 0; display:flex; flex-direction:column; gap:28px }
.p-sechead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; border-bottom:var(--heavy); padding-bottom:10px }
.p-sechead h2{ font-size:34px }
.p-sechead span{ font-size:15px; color:var(--ui-ink-3) }
.p-nums{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px }
.p-num{ border-top:var(--heavy); padding-top:14px }
.p-num b{ display:block; font-size:64px; font-weight:800; letter-spacing:-.05em; line-height:.9; color:var(--ui-accent); font-variant-numeric:tabular-nums }
.p-num h3{ font-size:20px; margin:10px 0 6px }
.p-num p{ font-size:15px; line-height:1.5; color:var(--ui-ink-2) }
.p-points{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px }
.p-points h3{ font-size:22px; line-height:1.2; margin-bottom:8px }
.p-points p{ font-size:16px; line-height:1.55; color:var(--ui-ink-2) }
.p-latest{ margin-top:12px }
.p-latesthead{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 20px; border-bottom:var(--heavy); padding-bottom:8px }
.p-latesthead h3{ font-size:22px }
.p-latesthead a{ font-weight:800; font-size:16px; text-decoration:none }
.p-ent{ display:grid; grid-template-columns:110px 160px minmax(0,1fr); gap:0 18px; border-bottom:1px solid var(--ui-ink); padding:12px 0; font-size:15px; line-height:1.5 }
.p-ent .d{ font-size:13px; color:var(--ui-ink-3); padding-top:2px }
.p-ent .who{ color:var(--ui-accent); font-weight:700 }
.p-ent .x{ color:var(--ui-ink-2) }

.p-two{ padding:80px var(--g) 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px }
.p-two > div{ display:flex; flex-direction:column; gap:16px }
.p-list{ padding:0 !important; list-style:none }
.p-list li{ border-bottom:1px solid var(--ui-ink); padding:12px 0; font-size:16px; line-height:1.5; color:var(--ui-ink-2) }
.p-list li b{ color:var(--ui-ink) }
.p-renew{ padding:80px var(--g) 0; display:grid; grid-template-columns:320px minmax(0,1fr); gap:48px }
.p-renew h2{ font-size:34px; line-height:1.05 }
.p-renew .p-list{ border-top:var(--heavy) }

.p-band{ margin:80px var(--g) 0; background:var(--ui-ink); color:var(--ui-bg); padding:40px 48px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:40px; align-items:center }
.p-bandcap{ font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.75 }
.p-bandprice{ margin-top:8px !important; font-size:48px; font-weight:800; letter-spacing:-.04em; line-height:1 }
.p-bandnote{ margin-top:12px !important; font-size:17px; line-height:1.5; opacity:.8 }
.p-bandacts{ display:flex; flex-direction:column; gap:12px }
.pub .p-bandlink{ color:var(--ui-bg); font-weight:700; font-size:15px; text-align:center }

.p-foot{ margin-top:80px; border-top:var(--heavy); padding:22px var(--g) 28px; display:flex; justify-content:space-between; gap:24px 40px; font-size:13px; line-height:1.5; color:var(--ui-ink-3) }
.p-foot p{ max-width:820px }
.p-foot nav{ display:flex; gap:20px; font-weight:700; white-space:nowrap }
.pub .p-foot nav a{ color:var(--ui-ink); text-decoration:none }
.pub .p-foot nav a:hover{ color:var(--ui-accent) }

/* pricing */
.p-head{ padding:64px var(--g) 40px; display:flex; flex-direction:column; gap:16px }
.p-head h1{ font-size:64px; line-height:1; letter-spacing:-.045em; font-weight:800; max-width:1000px; text-wrap:balance }
.p-plans{ padding:0 var(--g); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:stretch }
.p-plan{ border:var(--heavy); padding:32px; display:flex; flex-direction:column; gap:18px }
.p-plan.full{ background:var(--ui-ink); color:var(--ui-bg); border-color:var(--ui-ink) }
.p-plan h2{ font-size:30px }
.p-tag{ align-self:flex-start; border:2px solid currentColor; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px }
.p-price{ font-size:72px; font-weight:800; letter-spacing:-.05em; line-height:.9 }
.p-price small{ font-size:18px; font-weight:500; letter-spacing:0; margin-left:8px }
.p-plan ul{ padding:0; list-style:none; border-top:2px solid currentColor }
.p-plan li{ padding:11px 0 11px 26px; border-bottom:1px solid currentColor; font-size:16px; line-height:1.45; position:relative }
.p-plan li::before{ content:"\2713"; position:absolute; left:0; font-weight:800; color:var(--ui-accent) }
.p-plan.full li::before{ color:inherit }
.p-plan .p-btn{ margin-top:auto }
.p-plan.full .p-small{ color:inherit; opacity:.75 }
.p-cost{ padding:64px var(--g) 0; display:grid; grid-template-columns:360px minmax(0,1fr); gap:40px }
.p-cost h2{ font-size:30px; line-height:1.1 }
.p-cost table{ border-collapse:collapse; width:100%; font-size:16px; font-variant-numeric:tabular-nums }
.p-cost th{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ui-ink-3); text-align:left; padding:8px 0; border-bottom:var(--heavy) }
.p-cost td{ padding:11px 0; border-bottom:1px solid var(--ui-ink) }
.p-cost .r{ text-align:right }
.p-faq{ padding:64px var(--g) 0 }
.p-faq > h2{ font-size:34px; border-bottom:var(--heavy); padding-bottom:10px }
.p-q{ border-bottom:var(--mid); padding:18px 0; display:grid; grid-template-columns:360px minmax(0,1fr); gap:40px }
.p-q h3{ font-size:19px; line-height:1.3 }
.p-q p{ font-size:16px; line-height:1.55; color:var(--ui-ink-2) }

/* narrower screens: the side-by-side parts stack */
@media (max-width:1100px){
  .pub{ --g:40px }
  .p-hero{ grid-template-columns:1fr; gap:48px }
  .p-hero h1{ font-size:64px }
  .p-nums{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .p-points{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px }
}
@media (max-width:900px){
  .pub{ --g:24px }
  .p-why, .p-check, .p-renew, .p-cost, .p-q, .p-two{ grid-template-columns:1fr }
  .p-why, .p-renew, .p-cost{ gap:16px }
  .p-check{ gap:16px; padding:22px 20px }
  .p-q{ gap:8px }
  .p-two{ gap:48px }
  .p-plans{ grid-template-columns:1fr }
  .p-band{ grid-template-columns:1fr; padding:32px 24px; gap:24px }
  .p-bandacts{ align-items:stretch }
  .p-foot{ flex-direction:column }
  .p-ent{ grid-template-columns:110px minmax(0,1fr) }
  .p-ent .x{ grid-column:1 / -1; margin-top:4px }
}
@media (max-width:620px){
  .pub{ --g:18px }
  .p-hero{ padding-top:36px; padding-bottom:48px; gap:40px }
  .p-hero h1{ font-size:46px; line-height:.98 }
  .p-lede{ font-size:19px }
  .p-ctas .p-btn{ flex:1 1 100% }
  .p-mod{ grid-template-columns:32px minmax(0,1fr) 44px }
  .p-mod .w{ display:none }
  .p-mod .t{ font-size:16px }
  .p-quote{ font-size:28px }
  .p-sec, .p-why{ padding-top:56px }
  .p-two, .p-renew{ padding-top:64px }
  .p-sechead h2, .p-renew h2, .p-faq > h2{ font-size:28px }
  .p-nums{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px }
  .p-num b{ font-size:44px }
  .p-num h3{ font-size:17px }
  .p-points{ grid-template-columns:1fr; gap:32px }
  .p-band{ margin-top:64px }
  .p-bandprice{ font-size:34px }
  .p-head{ padding-top:36px }
  .p-head h1{ font-size:42px }
  .p-plan{ padding:24px 20px }
  .p-price{ font-size:56px }
  .p-foot nav{ flex-wrap:wrap }
}

/* ============================================================ TYPE SCALE
   One scale for the whole site (XIG, 3 Oct 2026): 17px body, 15px secondary,
   13px small print, and one size for the intro paragraph under a page title
   (--t-lede, 20px; --t-lede-s, 18px on a phone). The pages carry their own
   copies of some text rules, with half sizes such as 14.5px and 15.5px. This
   block loads after them and pins those texts to the scale, so a page cannot
   drift. Headings, code and the audio player are left alone. */
body .note, body .expl, body .rnote, body .rlist li, body .refempty, body .resnote,
body .rescard .why, body .drillnote, body .box p, body .lab-body blockquote,
body .path li > span, body .opt, body .qstem, body .mock p,
body .trap p, body details p, body summary,
body[data-page="resources"] .item .desc,
body[data-page="resources"] section.grp > .lede{ font-size:var(--t-body) }
body .item h3, body .rescard h4{ font-size:var(--t-title) }
body .rep p, body .rep .who, body table.tr, body .examnote, body .srcn,
body .shelf .d, body .lessons{ font-size:var(--t-ui) }
body .fact dd small, body .srcp, body .srcd, body .rep a, body .score, body .lessons .rdy, body .lessons a{ font-size:var(--t-kick) }
body[data-page="home"] .rail .blurb{ font-size:var(--t-ui); margin-top:12px }

/* ============================================================ TAGS (4 Oct 2026)
   Every numeral is red and a letter says what kind of thing it is: D1 a domain,
   2.5 a lesson, L1 a lab and L1.1 a step, M60 / M30 / MD1 a mock, 01 02 03 a
   section on this page. A reference inside a sentence or a list is the tag
   first, in red, then the name. The design standard is claude/design-standard.md. */
.ntag, .dtag{ color:var(--ui-accent); font-weight:800 }
.rail h1 .dtag, .drawerbody .rail h1 .dtag{ color:var(--ui-accent) }
.rail .modnum, .drawerbody .rail .modnum{ display:none }

/* ===================================================== PAGE HEADS (4 Oct 2026)
   Every page opens the main column with a title, a standfirst and a facts line
   (.lhead.phead), the way a lesson and a lab already did. The panel describes
   the container; the head names the subject. */
body.has-rail .pagesheet{ padding-top:44px }
body.has-rail .pagesheet > .lhead.phead{ padding-top:0 }
body[data-page="mock"] .mockcol .lhead.phead{ padding-top:44px }
body[data-page="mock"] .mockcol .shead + .note, body[data-page="mock"] .mockcol .shead + table{ margin-top:24px }
.lhead.phead h2{ grid-column:1 / -1 }
.lhead .bar, .lhead .bar span, body[data-page="labs"] .labkick, body[data-page="labs"] .labkick span{ letter-spacing:0; text-transform:none }
.lhead .facts-line{ display:flex; flex-wrap:wrap; gap:4px 22px; margin:14px 0 0; padding:0; height:auto; background:none; border:0; font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3) }
.lhead .facts-line span{ background:none; border:0; padding:0 }
/* the head takes the width of the sections under it, not the lesson column's narrower measure */
body.has-rail .pagesheet > .lhead.phead, body[data-page="mock"] .mockcol > .lhead.phead{ max-width:none; margin:0; padding-left:0; padding-right:0 }
/* lab section headings match the other pages; the page's own h2 rule is for headings inside a step */

/* lab sections: open; the steps fold under 03 */
body[data-page="labs"] #lab .accbar{ margin-top:18px }
body[data-page="labs"] #lab .lablead{ margin-top:18px }
details.acc > summary .acc-n{ font-size:var(--t-body); font-weight:800; letter-spacing:0; min-width:64px }
@media (max-width:900px){ details.acc > summary .acc-n{ font-size:var(--t-body); min-width:56px } }
.mockrail .modes::before{ letter-spacing:0; text-transform:none; color:var(--ui-ink-3) }
.trap .tt{ font-size:24px }
body[data-page="resources"] .rep .score, .acc-all, details.acc > summary .acc-c, .apx button, .apc button{ font-size:var(--t-kick) }

/* ======================================================== PHONE RULE (4 Oct 2026)
   The main title is the page head on every page. The actions follow it: the
   home's Continue box, the mock's three Start rows. The menu holds the panel's
   about block and its lists. */
@media (max-width:900px){
  body.has-rail .pagesheet{ padding-top:0 }
  body.has-rail .pagesheet > .lhead.phead{ padding-top:24px }
  body[data-page="home"] .pagesheet > .where[data-phone-col]{ margin:24px -20px 0; padding:20px 20px 22px }
  body[data-page="mock"] .mockcol > .lhead.phead{ padding-top:24px }
  body[data-page="mock"] .mockcol > .modes[data-phone-col]{ margin:24px 0 0 }
  body[data-page="mock"] .mockcol:has(> .lhead.phead){ padding:0 20px 80px }
  /* the five-domain grid on Resources: one row per domain, the share on the left */
  body[data-page="resources"] dl.facts.domains{ display:block; margin-top:20px; border-top:var(--mid); border-bottom:var(--mid) }
  body[data-page="resources"] dl.facts.domains .fact{ display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:14px; align-items:baseline; padding:12px 0; border-right:0; border-bottom:1px solid var(--ui-line); margin:0 }
  body[data-page="resources"] dl.facts.domains .fact:last-child{ border-bottom:0 }
  body[data-page="resources"] dl.facts.domains .fact dt{ grid-column:2; grid-row:1 }
  body[data-page="resources"] dl.facts.domains .fact dd{ grid-column:1; grid-row:1 / span 2; font-size:26px; margin:0 }
  body[data-page="resources"] dl.facts.domains .fact dd.fname{ grid-column:2; grid-row:2; font-size:var(--t-body); font-weight:400; letter-spacing:0; color:var(--ui-ink) }
}
body[data-page="resources"] dl.facts.domains .fact dd.fname{ font-size:var(--t-ui); font-weight:500; letter-spacing:0; color:var(--ui-ink-2); margin-top:8px; line-height:1.35 }
body[data-page="resources"] dl.facts.domains dt{ font-size:var(--t-ui) }

/* ============================================================ AFTER THE CLEAN-OUT (4 Oct 2026)
   The pages' own <style> blocks carry no type declarations any more
   (tools/strip-page-type.py removed font-size, font-family, font-weight,
   line-height, letter-spacing and text-transform from all of them), so this
   file is the only source of type. The few role weights the pages used to
   set that the scale wants are restated here, once. */
body table th{ font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-2) }
body table td{ font-size:var(--t-body) }
body[data-page="module"] table.rt td:first-child{ font-weight:700 }
body[data-page="module"] summary{ font-weight:500 }
body .fact dd small{ font-weight:400; letter-spacing:0; line-height:1.4 }
body .item h3, body .rescard h4{ line-height:1.3 }
body .chip, body .pbtn, body .apb{ font-family:var(--ui-sans); line-height:1.3 }
body .pbtn, body .apb{ font-size:var(--t-ui) }
body[data-page="labs"] #lab .sf{ font-size:var(--t-lede) }
@media (max-width:900px){ body[data-page="labs"] #lab .sf{ font-size:var(--t-lede-s) } }
/* The space above a page title is the same on every page: the head carries it
   (44px desktop, 24px phone) and the column around it carries none. */
body[data-page="labs"] #lab{ padding-top:0 }
@media (max-width:900px){ body.has-rail .wrap > .col{ border-top:0 } }
/* The mock's panel about block reads like the others': eyebrow, title, blurb, facts rows. */
.mockrail .mast{ padding:0; border:0; margin:0 }
.mockrail .mast .eyebrow{ margin-top:14px }
.mockrail .mast .blurb{ font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink-2); margin-top:12px }
.mockrail .mast .facts{ display:block; margin-top:16px; border-top:var(--mid) }
.mockrail .mast .facts span{ display:block; padding:7px 0; border-bottom:1px solid var(--ui-line); font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500; color:var(--ui-ink-2) }
.mockrail .mast .facts span:last-child{ border-bottom:var(--mid) }
body[data-page="mock"] .mockcol .shead + .note{ border-top:0; padding-top:0 }
/* ------------------------------------------------ Blueprint and What changed in the standard (4 Oct 2026) */
body[data-page="blueprint"] .mod-head .num{ font-size:var(--t-body); line-height:inherit }
body[data-page="blueprint"] .mod-head{ grid-template-columns:64px minmax(0,1fr) auto }
/* On a phone the lesson rows' number column is 44px, so the domain head's is too:
   the line above set 64px at every width and pushed the domain name 20px right
   of the lesson titles under it (XIG, 4 Oct 2026). The share goes under the name. */
@media (max-width:900px){
  body[data-page="blueprint"] .mod-head{ grid-template-columns:44px minmax(0,1fr) }
}
body[data-page="changes"] .chg{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--ui-line) }
body[data-page="changes"] .chg .who{ font-family:var(--ui-sans) }
body[data-page="changes"] .chg .who a{ text-decoration:none; border:0 }
body[data-page="changes"] .chg .kind{ display:block; margin-top:4px; padding:0; border:0; background:none; font-family:var(--ui-sans); font-size:var(--t-kick); font-weight:700; color:var(--ui-ink-3); letter-spacing:0; text-transform:none }
/* "Claude changed" is a label, not a number: ink, so red stays for the lesson id (XIG, 4 Oct 2026). */
body[data-page="changes"] .chg .kind.product{ color:var(--ui-ink) }
body[data-page="changes"] .chg p{ margin:0; font-family:var(--ui-sans); color:var(--ui-ink) }
@media (max-width:900px){ body[data-page="changes"] .chg{ grid-template-columns:1fr; gap:6px } body[data-page="changes"] .chg .kind{ display:inline; margin-left:10px } }
body[data-page="blueprint"] .shead + .scroller{ margin-top:24px }
body[data-page="mock"] .mockcol:has(> .lhead.phead){ padding-top:0 }

/* ============================================================ SECTION HEADS (4 Oct 2026)
   One rule for the seven pages with numbered sections. Nothing page-specific
   above may restate these; the audit measures them on every page. Desktop:
   title 40/800, numeral 64, 64px above a section (56 under the page head or an
   action block). Phone: title 28, numeral 44, 48 above a section (44 under the head). */
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) section{ padding-top:64px }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) :is(.lhead, .lablead, .where, .modes, .mastrest) + section, body[data-page="changes"] #log > section:first-child, body[data-page="labs"] #lab .lab-body > section:first-child{ padding-top:56px }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead{ display:block; border-bottom:var(--heavy); padding:0 0 12px; margin:0 }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead h2{ display:flex; align-items:last baseline; gap:22px; margin:0; padding:0; border:0; font-family:var(--ui-sans); font-size:40px; font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--ui-ink) }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead h2::before{ content:counter(sec, decimal-leading-zero); flex:none; font-size:64px; line-height:.8; letter-spacing:-.04em; color:var(--ui-accent) }
body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead + *:not(details.acc){ margin-top:24px }
@media (max-width:900px){
  body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) section{ padding-top:48px }
  body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) :is(.lhead, .lablead, .where, .modes, .mastrest) + section, body[data-page="changes"] #log > section:first-child, body[data-page="labs"] #lab .lab-body > section:first-child{ padding-top:44px }
  body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead h2{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:last baseline; gap:14px; font-size:28px }
  body:is([data-page="home"],[data-page="about"],[data-page="resources"],[data-page="mock"],[data-page="labs"],[data-page="blueprint"],[data-page="changes"]) .shead h2::before{ font-size:44px }
}