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

   Taken from "Direction B - Console.dc.html", the direction XIG chose. The
   design file is a .dc.html template and cannot be served as-is, so its token
   values, type ramp and component treatments are ported here onto the class
   names the course pages already use. Nothing in the pages is renamed.

   Two deliberate departures from the design file, both asked for:

   1. LIGHT IS THE DEFAULT, FOR EVERYONE. The design file wrote
      `:root, [data-ui-theme="dark"]` for the dark palette, so :root itself
      carried dark and the light switch never took effect. Here :root carries
      light and dark arrives only when the reader presses the toggle. The
      machine's own dark setting is not consulted, because it was overriding the
      default on any laptop set to dark.

   2. NO EM DASHES AND ALMOST NO MIDDLE DOTS. The design copy carried four em
      dashes and thirty-two middle dots. Neither survives.


   3. THE QUIET GREY IS DARKER THAN THE DESIGN FILE'S.

      `--ui-ink-3` carries every mono micro-label on the site: the eyebrows, the
      lesson numbers, the progress line, the meta rows. Measured against the
      surfaces it actually sits on, the design file's value came out at 3.53:1
      in light and 3.98:1 in dark, both under the 4.5:1 that small text needs.
      The hue is unchanged; the value moved until both clear it. Light is now
      4.73:1 and dark 4.59:1 against the worst surface each sits on.

   The sans is Archivo, chosen from a three-way comparison against Space Grotesk
   (the design file's choice) and Chivo. It sits behind one token.
   ============================================================================ */

:root{
  /* Light. The default, deliberately. */
  --ui-bg:#f5f7fa; --ui-panel:#ffffff; --ui-panel-2:#f1f4f8; --ui-hover:#e7ecf3;
  --ui-line:#dde3ec; --ui-line-2:#e8edf3; --ui-edge:#b4bfcd;
  --ui-ink:#0e151d; --ui-ink-2:#4a5766; --ui-ink-3:#626e79;
  --ui-accent:#1c6fa8; --ui-accent-hi:#15588a; --ui-on-accent:#ffffff;
  --ui-accent-soft:rgba(52,152,219,.12); --ui-accent-line:rgba(28,111,168,.35);
  --ui-warn:#96560a; --ui-warn-soft:rgba(150,86,10,.09); --ui-warn-line:rgba(150,86,10,.32);
  /* Status green. Complete, correct, on target, the ticks. Never for anything
     you can press: blue is for actions and the current item, green for state. */
  --ui-ok:#1f7a55; --ui-ok-soft:rgba(31,122,85,.12); --ui-ok-line:rgba(31,122,85,.4);
  --ui-code-bg:#eaf1f8; --ui-code-ink:#0f4e78;
  --ui-quote:linear-gradient(140deg,#e8f2fa,#f2f6fa);

  --ui-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ui-serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  /* Two radii: 6px on controls (buttons, tabs, nav pills, navigator cells),
     12px on panels and cards. The four names stay so nothing has to be renamed;
     they now resolve to those two values. Progress bars and inline code keep
     their own 3 to 4px. */
  --r-sm:6px; --r:12px; --r-lg:12px; --r-xl:12px;

  /* One type scale, whatever the container or background.
       11 mono upper  kickers and labels        12 mono   numerals
       14 sans        small UI, meta, buttons   16        all body
       18 sans 600    titles, stems, leads      22 sans 600  lesson h3
       26 sans 600    screen titles, figures    36 sans 600  page title */
  --t-kick:11px; --t-num:12px; --t-ui:14px; --t-body:16px;
  --t-title:18px; --t-h3:22px; --t-screen:26px; --t-page:36px;
  --lh:1.6; --track:.14em;

  /* The course pages address these names. Keeping them pointed at the Console
     tokens means the existing markup restyles without being rewritten. */
  --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);
  --figline:#7c8798;
  --sans:var(--ui-sans); --mono:var(--ui-mono); --serif:var(--ui-serif);
  --shadow:0 1px 2px rgba(14,21,29,.04), 0 10px 30px -22px rgba(14,21,29,.4);
}

/* Dark is a choice, not an inheritance.

   This used to sit behind `@media (prefers-color-scheme: dark)`, which meant a
   machine set to dark got a dark course whatever the page said. XIG asked for
   light to be the default, and on a dark machine it was not. The media query is
   gone: light is what everyone gets until they press the toggle, and the toggle
   is remembered. The rule below is kept as a no-op selector so the dark values
   live in exactly one place. */
@media (prefers-color-scheme: dark){ :root[data-theme="dark"]{
  --ui-bg:#0b0d10; --ui-panel:#0e1115; --ui-panel-2:#12151a; --ui-hover:#171b21;
  --ui-line:#1f242c; --ui-line-2:#171b21; --ui-edge:#39414c;
  --ui-ink:#e6e9ee; --ui-ink-2:#9aa5b4; --ui-ink-3:#768091;
  --ui-accent:#3498db; --ui-accent-hi:#5dafe6; --ui-on-accent:#04223a;
  --ui-accent-soft:rgba(52,152,219,.12); --ui-accent-line:rgba(52,152,219,.4);
  --ui-warn:#f0a44a; --ui-warn-soft:rgba(240,164,74,.09); --ui-warn-line:rgba(240,164,74,.34);
  --ui-ok:#3fb27f; --ui-ok-soft:rgba(63,178,127,.12); --ui-ok-line:rgba(63,178,127,.4);
  --ui-code-bg:#171b21; --ui-code-ink:#9ccdf0;
  --ui-quote:linear-gradient(140deg,#122437,#0f1a24);
  --figline:#78809b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -22px rgba(0,0,0,.85);
}}

:root[data-theme="dark"]{
  --ui-bg:#0b0d10; --ui-panel:#0e1115; --ui-panel-2:#12151a; --ui-hover:#171b21;
  --ui-line:#1f242c; --ui-line-2:#171b21; --ui-edge:#39414c;
  --ui-ink:#e6e9ee; --ui-ink-2:#9aa5b4; --ui-ink-3:#768091;
  --ui-accent:#3498db; --ui-accent-hi:#5dafe6; --ui-on-accent:#04223a;
  --ui-accent-soft:rgba(52,152,219,.12); --ui-accent-line:rgba(52,152,219,.4);
  --ui-warn:#f0a44a; --ui-warn-soft:rgba(240,164,74,.09); --ui-warn-line:rgba(240,164,74,.34);
  --ui-ok:#3fb27f; --ui-ok-soft:rgba(63,178,127,.12); --ui-ok-line:rgba(63,178,127,.4);
  --ui-code-bg:#171b21; --ui-code-ink:#9ccdf0;
  --ui-quote:linear-gradient(140deg,#122437,#0f1a24);
  --figline:#78809b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -22px rgba(0,0,0,.85);
}

/* ---------------------------------------------------------------- ground */

body{
  background:var(--ui-bg); color:var(--ui-ink);
  font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh);
  margin:0; -webkit-font-smoothing:antialiased;
}
body a{ color:var(--ui-accent); text-decoration:none; border-bottom:1px solid var(--ui-accent-line) }
body a:hover{ color:var(--ui-accent-hi); border-bottom-color:var(--ui-accent-hi) }
h1,h2,h3,h4{ font-family:var(--ui-sans); letter-spacing:-.018em; text-wrap:balance }
code{
  font-family:var(--ui-mono); font-size:.84em;
  background:var(--ui-code-bg); color:var(--ui-code-ink);
  padding:2px 6px; border-radius:4px; white-space:nowrap;
}
/* On a phone a long identifier, path or web address in one unbreakable run
   pushed the whole page sideways. Below 620px such a run may break; inline code
   may wrap anywhere; code blocks keep their lines and scroll inside their own box. */
@media (max-width:620px){
  body{ overflow-wrap:break-word }
  code{ white-space:normal; overflow-wrap:anywhere }
  pre code{ white-space:pre; overflow-wrap:normal }
}
:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:2px; border-radius:3px }
::selection{ background:var(--ui-accent-soft) }

/* ------------------------------------------------------------- the app bar
   Built by site.js from what is already on the page. The nav labels are the
   ones the site already uses, not the design's renamed set: changing a nav
   label is on the list of things that need saying out loud first. */

.appbar{
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
  padding:13px 28px; border-bottom:1px solid var(--ui-line);
  background:var(--ui-panel); position:sticky; top:0; z-index:30;
}
.appbar .mark{ display:flex; align-items:center; gap:11px }
.appbar .mark i{
  width:26px; height:26px; border-radius:var(--r-sm); background:var(--ui-accent);
  display:flex; align-items:center; justify-content:center; font-style:normal;
  font-family:var(--ui-mono); font-size:12px; font-weight:600; color:var(--ui-on-accent);
}
.appbar .mark b{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:600; letter-spacing:-.01em; color:var(--ui-ink) }
.appbar nav{ display:flex; flex-wrap:wrap; gap:6px }
.appbar nav a{
  padding:6px 12px; border-radius:var(--r-sm); border:1px solid transparent;
  background:transparent; color:var(--ui-ink-3);
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500; white-space:nowrap;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.appbar nav a:hover{ color:var(--ui-ink); border-color:var(--ui-edge) }
.appbar nav a[aria-current="page"]{
  background:var(--ui-panel-2); border-color:var(--ui-line); color:var(--ui-ink);
}
.appbar .right{ margin-left:auto; display:flex; align-items:center; gap:12px }
.appbar .tog{
  display:flex; align-items:center; gap:7px; padding:6px 11px;
  border-radius:var(--r-sm); border:1px solid var(--ui-line); background:var(--ui-panel-2);
  color:var(--ui-ink-2); cursor:pointer;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track); text-transform:uppercase;
  white-space:nowrap; transition:color .15s ease, border-color .15s ease;
}
.appbar .tog:hover{ color:var(--ui-ink); border-color:var(--ui-edge) }

/* ------------------------------------------------------------ the two column
   Module pages get a rail. Everything else keeps one centred column. */

.wrap{ max-width:880px; margin:0 auto; padding:26px 24px 96px }

body.has-rail .wrap{ max-width:none; margin:0; padding:0; display:grid; grid-template-columns:320px minmax(0,1fr) }
/* The rail stays where it is while the lesson scrolls. The column it sits in is
   painted by the grid itself, so the panel and its edge still run the full height
   of the page even though the rail inside it is only as tall as the viewport. */
body.has-rail .wrap{
  background:linear-gradient(to right,
    var(--ui-panel) 0 319px,
    var(--ui-line) 319px 320px,
    transparent 320px);
}
body.has-rail .rail{
  position:sticky; top:63px; align-self:start;
  max-height:calc(100vh - 63px); overflow-y:auto; overscroll-behavior:contain;
  padding:26px 24px 40px; border-right:0; background:none; min-width:0;
}
body.has-rail .col{ padding:0; min-width:0 }
/* The column used to start at the rail and stop at 860, which on a wide screen
   left the whole right half of the window empty and made the text look stranded
   against the rail. The reading block is centred in the space the rail leaves,
   so the page has a margin on both sides at any width. */
body.has-rail .panel,
body.has-rail .lhead,
body.has-rail .tabs,
body.has-rail footer{
  max-width:896px; margin-left:auto; margin-right:auto;
  padding-left:28px; padding-right:28px;
}
body.has-rail footer{ padding-bottom:80px }
/* The tab row is part of that block, so its rule ends with the text rather
   than running off to the edge of the window. */
body.has-rail .tabs{ padding-top:16px; padding-bottom:16px }

/* a label, used everywhere: mono, small, tracked. In a console this is
   instrument labelling, not decoration, which is why it survives here. */
/* `.note` is two different things in this course. On the home and status pages
   it is the small label beside a section heading. On the mock page it is a block
   of body copy. A bare `.note` in this list set the mock's paragraphs in
   uppercase mono, so the label meaning is scoped to where it actually occurs. */
.lbl, .eyebrow, .rid, .wt .items, .shead .note, .sitenav{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3);
}

/* ------------------------------------------------------------------- rail */

.rail .eyebrow{ display:flex; flex-wrap:wrap; gap:4px 12px }
.rail h1{ margin:10px 0 0; font-size:var(--t-h3); font-weight:600; line-height:1.25 }
.rail .meter{
  margin-top:18px; padding:16px; border-radius:var(--r);
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
}
.rail .meter .top{ display:flex; justify-content:space-between; font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3) }
.rail .meter .top b{ color:var(--ui-ink); font-weight:400 }
.rail .meter .progclear{ display:inline-block; margin:10px 0 0 }
.rail .meter .track{ height:5px; border-radius:3px; background:var(--ui-line); margin-top:9px; overflow:hidden }
/* progress is state, not an action: the fill is neutral, not blue */
.rail .meter .track i{ display:block; height:100%; background:var(--ui-ink-3) }
.rail .meter .said{ margin-top:10px; font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3) }

.picker{ display:flex; flex-direction:column; gap:3px; margin:10px 0 0; background:none; border:0; box-shadow:none }
.pk{
  display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%;
  padding:10px 12px; border-radius:var(--r-sm); border:0; background:transparent;
  cursor:pointer; font-family:var(--ui-sans); transition:background .15s ease;
}
.pk:hover{ background:var(--ui-hover) }
.pk[aria-current="true"]{ background:var(--ui-accent-soft) }
.pk .n{
  flex:none; font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3);
  padding-top:2px; text-transform:none; letter-spacing:0;
}
.pk[aria-current="true"] .n{ color:var(--ui-accent) }
.pk .tt2{
  display:block; font-size:var(--t-ui); font-weight:500; line-height:var(--lh);
  color:var(--ui-ink-2); margin:0;
}
.pk[aria-current="true"] .tt2{ color:var(--ui-ink) }
/* the drill score sits hard right whatever the length of the title */
.pk .tt2{ flex:1 1 auto; min-width:0 }
.pk .dn{ display:block; flex:none; margin:2px 0 0 auto; text-align:right; font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3) }
.pk .st{ display:none; background:var(--ui-ok) }

/* ------------------------------------------------------------------- tabs */

.tabs{
  display:flex; flex-wrap:wrap; gap:6px; margin:0;
  padding:16px 28px; border-bottom:1px solid var(--ui-line); border-top:0;
  position:sticky; top:63px; z-index:20; background:var(--ui-bg);
}
.tab{
  padding:8px 15px; border-radius:var(--r-sm);
  border:1px solid transparent; background:transparent; color:var(--ui-ink-3);
  cursor:pointer; font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500;
  white-space:nowrap; margin:0;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.tab:hover{ color:var(--ui-ink); border-color:var(--ui-edge) }
.tab[aria-selected="true"]{
  background:var(--ui-accent-soft); border-color:var(--ui-accent-line); color:var(--ui-accent);
}

/* --------------------------------------------------------------- lesson head */

.lhead{ padding-top:32px }
.lhead h2{ margin:10px 0 0; font-size:var(--t-screen); font-weight:600; letter-spacing:-.025em; line-height:1.1 }
.lhead .sf{ margin:12px 0 0; font-size:var(--t-title); line-height:var(--lh); color:var(--ui-ink-2); max-width:none; font-family:var(--ui-serif) }
.lhead .bar{ display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:14px;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track); text-transform:uppercase; color:var(--ui-ink-3) }
.lhead .bar .pill{ border:0; background:none; padding:0; border-radius:0; font:inherit; color:inherit }

/* ------------------------------------------------------------------- body */

.panel{ padding-top:8px; padding-bottom:80px; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2) }
/* No cap. A paragraph that stops short of the step blocks and tables beside it
   draws a false right edge down the page, which is what it looked like. Prose now
   runs to the same width as everything else in the column. */
.panel p{ margin:0 0 18px; max-width:none }
.panel h2, .panel h3, .panel h4{ color:var(--ui-ink) }
.panel .h, .panel h2.h{
  color:var(--ui-accent); font-family:var(--ui-mono); font-size:var(--t-kick); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase; margin:36px 0 14px;
}
.panel .sub, .panel h3.sub{
  font-family:var(--ui-sans); font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.015em; color:var(--ui-ink); text-transform:none; margin:32px 0 12px;
}

/* the section marker: mono, tracked, in the accent */
.h{
  margin:36px 0 14px; font-family:var(--ui-mono); font-size:var(--t-kick); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase; color:var(--ui-accent);
}
.sub{
  margin:32px 0 12px; font-family:var(--ui-sans); font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.015em; color:var(--ui-ink);
}
.lede, .panel > p:first-of-type{ color:var(--ui-ink-2) }

.cite{
  font-family:var(--ui-mono); font-size:11px; font-weight:500; line-height:1;
  vertical-align:super; color:var(--ui-accent); background:none; border:0;
  padding:0; margin-left:2px; border-radius:0; text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.cite:hover{ color:var(--ui-accent-hi); text-decoration:underline; background:none }
/* two markers side by side read as one number ("68"); the build puts a comma between them */
.csep{ font-family:var(--ui-mono); font-size:11px; line-height:1; vertical-align:super; color:var(--ui-ink-3) }

/* numbered steps: the design's banded block, rebuilt on the existing <ol> */
ol.rlist{
  list-style:none; counter-reset:step; margin:0 0 26px; padding:0;
  display:flex; flex-direction:column; gap:1px;
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--ui-line);
}
/* The numerals used to sit in a flex row with the text beside them. Flex wraps
   every run of text and every inline <code> in its own anonymous box, so a
   sentence containing `tool_use` was broken into three boxes and wrapped in the
   gaps between them rather than as one sentence. The counter is positioned
   instead, and the text is left to flow. */
ol.rlist li{
  counter-increment:step; display:block; position:relative; margin:0;
  padding:16px 16px 16px 48px; background:var(--ui-panel-2);
  font-family:inherit; font-size:var(--t-body); font-weight:400; line-height:var(--lh); color:var(--ui-ink);
}
ol.rlist li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:16px; top:18px;
  font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-accent);
}
ol.rlist li code{ white-space:normal }
ul.rlist{ margin:0 0 22px; padding-left:22px; list-style:disc }
ul.rlist li{ margin:9px 0; color:var(--ui-ink-2); font-size:var(--t-body); line-height:var(--lh) }
.rlist li strong{ color:var(--ui-ink); font-family:var(--ui-sans); font-weight:600 }

.rnote{
  margin:0 0 22px; padding:24px; border-radius:var(--r);
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2); border-left-width:1px;
}
.rnote strong{ color:var(--ui-ink); font-family:var(--ui-sans); font-weight:600 }

/* the exam trap */
.trap{
  margin:0 0 28px; padding:24px; border-radius:var(--r-lg);
  background:var(--ui-warn-soft); border:1px solid var(--ui-warn-line);
}
.trap .tt{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-warn); font-weight:500;
}
.trap .tt::after{ content:none }
/* Prose inside a block runs to the block. A narrower measure here reads as a
   ragged right edge against the box that holds it, not as typography. */
.trap p{ margin:6px 0 0; font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2); max-width:none }
.trap > p:first-of-type{ margin-top:8px }

/* the one rule to carry into the exam */
.rule{
  margin:0 0 28px; padding:24px; border:1px solid var(--ui-accent-line);
  border-left-width:1px; border-radius:var(--r-xl); background:var(--ui-quote);
  font-family:inherit; font-size:var(--t-body); font-weight:400; line-height:var(--lh);
  color:var(--ui-ink); max-width:none;
}
.rule::before{
  content:"Carry this into the exam"; display:block;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-accent); font-weight:500; margin-bottom:10px;
}

/* tables, in their own frame */
.scroller{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--ui-line); margin:0 0 28px }
table.rt, table.tr, table.t{ border-collapse:collapse; width:100%; font-size:var(--t-body); line-height:var(--lh); margin:0 }
table.rt th, table.tr th, table.t th{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track); text-transform:uppercase;
  color:var(--ui-ink-3); text-align:left; padding:10px 16px;
  background:var(--ui-panel-2); border-bottom:1px solid var(--ui-line); font-weight:500;
}
table.rt td, table.tr td, table.t td{
  padding:12px 16px; border-bottom:1px solid var(--ui-line-2);
  vertical-align:top; color:var(--ui-ink-2); font-family:var(--ui-serif); font-weight:400;
}
/* the first column is ink, not bold: body in a table stays body */
table.rt td:first-child, table.tr td:first-child, table.t td:first-child{
  color:var(--ui-ink); font-family:var(--ui-serif); font-weight:400;
}
table.rt tr:last-child td, table.tr tr:last-child td, table.t tr:last-child td{ border-bottom:0 }

.selfcheck{ border-top:1px solid var(--ui-line); margin-top:44px; padding-top:10px }

/* sources */
.srclist{ display:grid; gap:10px; margin:12px 0 0; padding:0; list-style:none }
.srcs{ margin-top:40px }
.srcp, .srcd, .srcn{ font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3) }
/* "Covered in other lessons" reads like Sources: a sentence in the sources'
   face, the lesson names as links styled like source titles, and the letter
   in the same filled box as a source number. */
.xreflist{ display:grid; gap:10px }
.xreflist li{ font-family:var(--ui-sans); font-size:var(--t-body); line-height:1.5; color:var(--ui-ink-2) }
.xreflist .srcn{ display:inline; margin:0; font-family:var(--ui-sans); font-size:var(--t-body); color:var(--ui-ink-2) }
.xreflist .xn{ border:0; background:var(--ui-accent-soft); color:var(--ui-accent) }
.xreflist li:target .xn{ background:var(--ui-accent); color:var(--ui-on-accent) }
.srclist a, .xreflist a.xlink{ font-family:var(--ui-sans); font-weight:600; color:var(--ui-accent);
  text-decoration:none; border-bottom:1px solid var(--ui-accent-line) }
.srclist a:hover, .xreflist a.xlink:hover{ color:var(--ui-accent-hi); border-bottom-color:var(--ui-accent-hi) }

footer{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--ui-line);
  font-family:var(--ui-sans); font-size:var(--t-ui); line-height:var(--lh); color:var(--ui-ink-3);
  max-width:none;
}

/* the row at the foot of a lesson. Lesson to lesson is a secondary button;
   the step out of a module is the primary one; a note under it can name a lab
   or the mock. */
.nxt{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  gap:10px; margin:38px 0 0; padding-top:20px; border-top:1px solid var(--ui-line)}
.nxt button, .nxt a.navlink{
  display:inline-block; padding:9px 16px; border-radius:var(--r-sm);
  border:1px solid var(--ui-line); background:var(--ui-panel); color:var(--ui-ink-2);
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500; line-height:1.4;
  text-align:left; cursor:pointer; text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.nxt button:hover, .nxt a.navlink:hover{ border-color:var(--ui-edge); color:var(--ui-ink) }
.nxt a.navlink.go{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent); font-weight:600 }
.nxt a.navlink.go:hover{ background:var(--ui-accent-hi); border-color:var(--ui-accent-hi); color:var(--ui-on-accent) }
.nxt .then{ flex-basis:100%; margin:4px 0 0; text-align:right;
  font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink-2) }

/* Before you start, on the course home: the Start here content folded in */
body[data-page="home"] #before-you-start h3.bys{
  margin:32px 0 0; font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600;
  letter-spacing:-.01em; color:var(--ui-ink);
}
body[data-page="home"] #before-you-start p{
  margin:12px 0 0; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh);
  color:var(--ui-ink-2); max-width:none;
}
body[data-page="home"] dl.tabguide div{ border-bottom-color:var(--ui-line-2) }
body[data-page="home"] dl.tabguide dt{ font-family:var(--ui-sans); font-size:var(--t-body); color:var(--ui-accent) }
body[data-page="home"] dl.tabguide dd{ font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2) }

/* the audio dock keeps its behaviour, takes the new surface */
.dock{ background:var(--ui-panel); border-top:1px solid var(--ui-line) }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important } }

/* ----------------------------------------------------------------- narrow */

@media (max-width:900px){
  body.has-rail .wrap{ display:block; background:none }
  body.has-rail .rail{
    position:static; max-height:none; overflow:visible;
    border-right:0; border-bottom:1px solid var(--ui-line);
    background:var(--ui-panel); padding:20px 20px 24px;
  }
  body.has-rail .panel, body.has-rail .lhead, body.has-rail footer{ padding-left:20px; padding-right:20px }
  .tabs{ padding:12px 20px; top:0; overflow-x:auto; flex-wrap:nowrap }
  .appbar{ padding:11px 20px; position:static }
  .appbar .right{ margin-left:0; width:100% }
  .wrap{ padding:20px 20px 96px }
}


/* ------------------------------------------------- fixes found by looking

   Three things the first render got wrong, all of them the page's own rules
   still winning where the Console treatment should. */

/* The lesson meta was a row of bordered chips. In the design it is a plain
   mono line, so the chip is removed rather than restyled. */
.lhead .bar{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:14px }
.lhead .bar span{
  background:none; border:0; padding:0; border-radius:0;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3);
}

/* The audio card was a white panel with a drop shadow. Console surfaces are
   flat, on panel-2, inside a 12px radius. */
.ap, .player{
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  border-radius:var(--r-lg); box-shadow:none; padding:16px;
  margin-top:26px; gap:14px;
}
.ap.none{ background:none; border-style:dashed; box-shadow:none }
.apt{ font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:600; color:var(--ui-ink) }
.aps{ font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3) }
.apb{
  border-radius:50%; background:var(--ui-accent); color:var(--ui-on-accent);
  border:0; width:38px; height:38px;
}
.apb:disabled{ background:var(--ui-panel); color:var(--ui-ink-3) }
/* On a phone the four buttons left the title and the time a column 11px wide. The
   card wraps instead: play, title, time and position on the first line, the buttons
   on a line of their own under them. The bar at the foot of the screen is .dockin
   and keeps its own one-line layout. */
@media (max-width:620px){
  .ap{ flex-wrap:wrap; row-gap:12px }
  .ap .apm{ flex:1 1 calc(100% - 52px); min-width:0 }
  .ap .apx{ order:3; margin-left:52px }
  .ap .apc{ order:4 }
}

/* The rail carries the module blurb under the title, small. Left where it was
   it sat above the lesson with no styling at all. */
.rail .blurb{
  margin:10px 0 0; font-family:var(--ui-sans); font-size:var(--t-ui);
  line-height:var(--lh); color:var(--ui-ink-2);
}
.rail .facts{
  display:flex; flex-wrap:wrap; gap:3px 12px; margin-top:10px;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3);
}
.mastrest{ display:none }

/* ============================================================================
   COURSE HOME

   The first pass put the app bar on this page and nothing else, so the top of
   the page promised a console and everything under it was still the old
   brochure. This rebuilds the body onto the Console vocabulary from the design
   file: a 1180 column, cards on a 12 to 14px radius, mono labels in the accent,
   and the section note stacked under its heading instead of floating in the
   corner of it.
   ============================================================================ */

body:not(.has-rail)[data-page="home"] .wrap,
body[data-page="status"] .wrap{ max-width:1180px; padding:34px 28px 90px }

/* the markup tool's own hint sits above everything, so it takes the surface */

/* ------------------------------------------------------------------ hero */

body[data-page="home"] .mast{ padding:0 0 34px; border-bottom:1px solid var(--ui-line) }
body[data-page="home"] .mast h1{
  margin:10px 0 0; font-size:var(--t-page); font-weight:600;
  letter-spacing:-.025em; line-height:1.08; max-width:22ch; color:var(--ui-ink);
}
body[data-page="home"] .lede{
  margin:12px 0 0; font-size:var(--t-title); line-height:var(--lh); color:var(--ui-ink-2); max-width:none;
  font-family:var(--ui-serif);
}
body[data-page="home"] .facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin:28px 0 0; background:none; border:0; box-shadow:none;
}
/* A stat tile leads with its figure. The markup has the label first, so the
   tile reverses; the label becomes a plain 14px line under the number. */
body[data-page="home"] .fact{
  padding:16px; border-radius:var(--r-lg);
  background:var(--ui-panel); border:1px solid var(--ui-line);
  display:flex; flex-direction:column-reverse;
}
body[data-page="home"] .fact dt{
  margin-top:6px; font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ui-ink-2); display:block;
}
body[data-page="home"] .fact dd{
  margin:0; font-family:var(--ui-sans); font-size:var(--t-screen); font-weight:600;
  letter-spacing:-.015em; color:var(--ui-ink); font-variant-numeric:tabular-nums; line-height:1.1;
}
body[data-page="home"] .fact dd small{
  display:block; margin-top:4px; font-family:var(--ui-sans); font-size:var(--t-ui);
  font-weight:400; color:var(--ui-ink-2); line-height:var(--lh); letter-spacing:0;
}
body[data-page="home"] .examnote{
  margin-top:22px; font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2); max-width:none;
  font-family:var(--ui-serif);
}
body[data-page="home"] .examnote b{ font-family:var(--ui-mono); font-weight:500; color:var(--ui-ink) }

/* --------------------------------------------------------- section heads
   The small note used to float in the top right corner of the heading with no
   alignment to anything. It stacks under it now. */

body[data-page="home"] section,
body[data-page="status"] section{ padding-top:52px }
/* The markup has the heading first and its aside second. The Console head puts
   the small label above the heading, so the box reverses rather than the page
   files being edited. */
body[data-page="home"] .shead,
body[data-page="status"] .shead{
  display:flex; flex-direction:column-reverse; align-items:flex-start;
  gap:8px; border-bottom:0; padding-bottom:0;
}
body[data-page="home"] .shead h2,
body[data-page="status"] .shead h2{
  font-family:var(--ui-sans); font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.018em; color:var(--ui-ink); text-transform:none;
}
body[data-page="home"] .shead .note,
body[data-page="status"] .shead .note{
  margin:0; font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3); font-weight:500;
}
body[data-page="home"] section > p{
  margin:10px 0 0; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh);
  color:var(--ui-ink-2); max-width:none;
}

/* ---------------------------------------------------------------- ledger */

body[data-page="home"] .ledger{
  margin-top:16px; border:0; background:none; box-shadow:none;
  display:flex; flex-direction:column; gap:10px;
}
body[data-page="home"] .row{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:0; align-items:start;
  padding:16px; border:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line);
  border-radius:var(--r-xl); background:var(--ui-panel);
  transition:border-color .15s ease;
}
body[data-page="home"] .row:hover{ border-color:var(--ui-edge) }
body[data-page="home"] .rid{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-accent); display:block;
}
body[data-page="home"] .row h3{
  margin:6px 0 0; font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600;
  letter-spacing:-.01em; line-height:1.3;
}
body[data-page="home"] .row h3 a{ color:var(--ui-ink); border-bottom:0 }
body[data-page="home"] .row h3 a:hover{ color:var(--ui-accent) }
body[data-page="home"] .blurb{
  margin:6px 0 0; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh);
  color:var(--ui-ink-2); max-width:none;
}
body[data-page="home"] .meta{
  margin-top:9px; display:flex; flex-wrap:wrap; gap:3px 14px;
  font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3);
  font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none;
}
/* the progress line: a full-width bar with the counts under it, shown from
   the start at zero so the row keeps one shape */
body[data-page="home"] .mprog{ display:block; margin-top:12px }
body[data-page="home"] .mprog .pb{
  flex:none; width:100%; height:6px; border-radius:3px;
  background:var(--ui-line); overflow:hidden;
}
body[data-page="home"] .mprog .pb i{ display:block; height:100%; background:var(--ui-ink-3) }
body[data-page="home"] .mprog .pb i.low{ background:var(--ui-warn) }
body[data-page="home"] .mprog span{
  display:block; margin-top:6px; font-family:var(--ui-mono); font-size:var(--t-num);
  color:var(--ui-ink-3); font-variant-numeric:tabular-nums;
}

/* the across-the-course block above the ledger */
body[data-page="home"] .course{
  margin-top:16px; padding:24px; border-radius:var(--r-xl);
  background:var(--ui-accent-soft); border:1px solid var(--ui-accent-line);
}
body[data-page="home"] .course h3{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-accent); font-weight:500;
}
body[data-page="home"] .course p{ margin:8px 0 0; font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2) }
body[data-page="home"] .cb{
  height:6px; border-radius:3px; background:var(--ui-line);
  margin-top:12px; overflow:hidden;
}
body[data-page="home"] .cb i{ background:var(--ui-ink-3) }

/* ------------------------------------------------- mock, labs, callouts */

body[data-page="home"] .mock{
  margin-top:16px; padding:24px; border-radius:var(--r-xl);
  background:var(--ui-panel); border:1px solid var(--ui-line);
  border-left-width:1px; box-shadow:none;
}
body[data-page="home"] .mock h3{
  font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600; letter-spacing:-.015em;
  color:var(--ui-ink);
}
body[data-page="home"] .mock p{
  margin:9px 0 0; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh);
  color:var(--ui-ink-2); max-width:none;
}
body[data-page="home"] .modes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
body[data-page="home"] .mode{
  font-family:var(--ui-mono); font-size:var(--t-num); letter-spacing:.04em;
  background:var(--ui-panel-2); color:var(--ui-ink-2);
  padding:6px 11px; border-radius:var(--r-sm); border:1px solid var(--ui-line);
}
body[data-page="home"] .cta{
  display:inline-block; margin-top:18px; padding:10px 18px;
  border-radius:var(--r-sm); border:0; background:var(--ui-accent);
  color:var(--ui-on-accent); font-family:var(--ui-sans); font-size:var(--t-ui);
  font-weight:600; text-decoration:none;
  transition:background .15s ease;
}
body[data-page="home"] .cta:hover{ background:var(--ui-accent-hi); color:var(--ui-on-accent) }
/* The labs card and its button carry an inline green. Green is a status colour
   and a button has two styles, so both are overridden here; !important is the
   only thing that outranks an inline style. */
body[data-page="home"] .cta{ background:var(--ui-accent) !important }
body[data-page="home"] .cta:hover{ background:var(--ui-accent-hi) !important }
body[data-page="home"] .mock{ border-left-color:var(--ui-line) !important }
body[data-page="home"] .callout{
  margin-top:20px; padding:24px; border-radius:var(--r-lg);
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  border-left-width:1px; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh);
  color:var(--ui-ink-2);
}
body[data-page="home"] .callout b{ font-family:var(--ui-sans); font-weight:600; color:var(--ui-ink) }

/* ------------------------------------------------------------------ path */

body[data-page="home"] .path{ margin-top:16px; display:flex; flex-direction:column; gap:0 }
body[data-page="home"] .path li{
  padding:14px 0 14px 44px; margin-left:11px;
  border-left:1px solid var(--ui-line); position:relative;
}
body[data-page="home"] .path li::before{
  content:""; position:absolute; left:-4px; top:20px;
  width:7px; height:7px; border-radius:50%; background:var(--ui-accent);
}
body[data-page="home"] .path b{
  font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600;
  letter-spacing:-.01em; color:var(--ui-ink); display:block;
}
body[data-page="home"] .path li > span{
  font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2);
  display:block; margin-top:4px; max-width:none;
}

/* ----------------------------------------------------------------- shelf */

body[data-page="home"] .shelf{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin-top:16px; background:none; border:0; box-shadow:none;
}
body[data-page="home"] .shelf a{
  padding:24px; border-radius:var(--r-xl);
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  transition:border-color .15s ease;
  display:flex; flex-direction:column;
}
body[data-page="home"] .shelf a:hover{ background:var(--ui-panel-2); border-color:var(--ui-edge) }
/* The card leads with its title. The kind label, first in the markup, drops
   under the title as a plain 14px line; the title moves up with order. */
body[data-page="home"] .shelf .k{
  display:block; order:2; margin-top:6px; font-family:var(--ui-sans); font-size:var(--t-ui);
  letter-spacing:0; text-transform:none; color:var(--ui-ink-2);
  padding:0; border-radius:0; background:none;
}
body[data-page="home"] .shelf .n{
  display:block; order:1; margin-top:0; font-family:var(--ui-sans); font-size:var(--t-title);
  font-weight:600; line-height:1.3; color:var(--ui-ink); letter-spacing:-.01em;
}
body[data-page="home"] .shelf .d{
  display:block; order:3; margin-top:8px; font-family:var(--ui-serif); font-size:var(--t-body);
  color:var(--ui-ink-2); line-height:var(--lh);
}

/* ---------------------------------------------------------------- status */

body[data-page="home"] .status,
body[data-page="status"] .status{
  margin-top:16px; border:0; background:none;
  display:flex; flex-direction:column; gap:8px;
}
body[data-page="home"] .st,
body[data-page="status"] .st{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px;
  padding:16px; border:1px solid var(--ui-line); border-radius:var(--r);
  background:var(--ui-panel-2); align-items:start;
}
body[data-page="home"] .pill,
body[data-page="status"] .pill{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; padding:4px 8px; border-radius:var(--r-sm);
  text-align:center; font-weight:500;
}
body[data-page="home"] .p-done,
body[data-page="status"] .p-done{ background:var(--go-soft); color:var(--go) }
body[data-page="home"] .p-todo,
body[data-page="status"] .p-todo{ background:var(--ui-warn-soft); color:var(--ui-warn) }
body[data-page="home"] .st p,
body[data-page="status"] .st p{
  margin:0; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2);
}
body[data-page="home"] .st b,
body[data-page="status"] .st b{ font-family:var(--ui-sans); font-weight:600; color:var(--ui-ink) }

@media (max-width:820px){
  body:not(.has-rail)[data-page="home"] .wrap,
  body[data-page="status"] .wrap{ padding:24px 20px 80px }
}

/* ============================================================================
   THE OTHER THREE MODULE TABS

   The first pass rebuilt the Lesson tab and left Revision, Drill and Go deeper
   wearing new colours on the old shapes. These bring them onto the same
   surfaces: one radius family, flat panels rather than drop shadows, mono
   labels in the accent, and the serif kept for anything you actually read.
   ============================================================================ */

/* ---------------------------------------------------------- revision tab */

.dist{
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  border-radius:var(--r-lg); padding:24px; margin:0 0 24px; box-shadow:none;
}
.dist .dh{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-accent); font-weight:500;
}
.dist .rlist{ margin-top:10px }
.dist .rlist li{ font-size:var(--t-body) }

ul.tick{ list-style:none; padding-left:0; display:flex; flex-direction:column; gap:8px; margin:12px 0 24px }
ul.tick li{
  padding:16px 16px 16px 40px; position:relative; margin:0;
  border-radius:var(--r); background:var(--ui-panel-2);
  border:1px solid var(--ui-line);
  font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2);
}
ul.tick li::before{
  content:"\2713"; position:absolute; left:15px; top:16px;
  color:var(--ui-ok); font-size:14px; font-family:var(--ui-sans);
}

/* ------------------------------------------------------------- drill tab */

.sum{
  padding:24px; border-radius:var(--r-xl); margin:0 0 24px;
  background:var(--ui-accent-soft); border:1px solid var(--ui-accent-line);
  box-shadow:none;
}
.sumh{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline }
/* the score card leads with its title, not a kicker */
.sumh h3{
  font-family:var(--ui-sans); font-size:var(--t-title); letter-spacing:-.012em;
  text-transform:none; color:var(--ui-ink); font-weight:600; margin:0;
}
.sumh span{
  font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3);
  font-variant-numeric:tabular-nums; margin-left:auto;
}
.sumsub{ margin:10px 0 0; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2); max-width:none }
.wkr{ display:flex; align-items:flex-start; gap:12px; margin-top:12px }
.wkm{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; padding-top:6px }
.wkr b{ font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink); flex:none; width:34px }
.wkb{ display:flex; height:6px; border-radius:3px; background:var(--ui-line); overflow:hidden }
/* measured against every question in the lesson: green is correct, amber is
   wrong (the same amber as a wrong pick in the drill), the bare track is not
   answered yet. A full green bar means every question answered and right. */
.wkb i{ display:block; height:100%; flex:none }
.wkb i.ok{ background:var(--ui-ok) }
.wkb i.bad{ background:var(--ui-warn) }
.wkn{ font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3); font-variant-numeric:tabular-nums }

.drillnote{ color:var(--ui-ink-2); font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); margin:0 0 20px }

.q{
  background:var(--ui-panel); border:1px solid var(--ui-line);
  border-radius:var(--r-xl); padding:24px; margin:0 0 16px; box-shadow:none;
}
.qn{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3);
}
.q > p, .q .stem{ font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600; line-height:var(--lh); color:var(--ui-ink); max-width:none }
.opts{ display:flex; flex-direction:column; gap:8px; margin-top:18px }
.opt{
  display:flex; gap:13px; align-items:flex-start; text-align:left;
  padding:16px; border-radius:var(--r); background:var(--ui-panel-2);
  border:1px solid var(--ui-line);
  font-family:var(--ui-serif); font-size:var(--t-body); font-weight:400; line-height:var(--lh); color:var(--ui-ink);
  transition:border-color .15s ease;
}
.opt:hover{ border-color:var(--ui-edge) }
.opt .l{ font-family:var(--ui-mono); font-size:var(--t-num); font-weight:600; color:var(--ui-ink-3); flex:none; padding-top:2px }
.opt[aria-pressed="true"]{ border-color:var(--ui-accent-line); background:var(--ui-accent-soft) }
.opt[aria-pressed="true"] .l{ color:var(--ui-accent) }
.opt.right{ border-color:var(--ui-ok-line); background:var(--ui-ok-soft) }
.opt.right .l{ color:var(--ui-ok) }
.opt.wrongpick{ border-color:var(--ui-warn-line); background:var(--ui-warn-soft) }
.opt.wrongpick .l{ color:var(--ui-warn) }
.q button:not(.opt){
  padding:9px 18px; border-radius:var(--r-sm); border:0;
  background:var(--ui-accent); color:var(--ui-on-accent);
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:600; cursor:pointer;
  transition:background .15s ease;
}
.q button:not(.opt):hover:not(:disabled){ background:var(--ui-accent-hi) }
.q button:not(.opt):disabled{ background:var(--ui-panel-2); color:var(--ui-ink-3); cursor:default }
.expl{
  margin-top:16px; padding:16px; border-top:0; border-radius:var(--r);
  background:var(--ui-panel-2); font-family:var(--ui-serif);
  font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2);
}
.expl strong{ color:var(--ui-ink); font-family:var(--ui-sans); font-weight:600 }

/* --------------------------------------------------------- go deeper tab */

.rescard{
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  border-radius:var(--r-xl); padding:24px; margin:0 0 12px; box-shadow:none;
  transition:border-color .15s ease;
  display:flex; flex-direction:column;
}
.rescard:hover{ border-color:var(--ui-edge) }
/* the meta row sits first in the markup; it drops beneath the title by order */
.rescard .rmeta{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; margin:6px 0 0; order:2 }
.rescard .rsrc, .rescard .kind{
  font-family:var(--ui-sans); font-size:var(--t-ui); letter-spacing:0;
  text-transform:none; color:var(--ui-ink-2);
  padding:0; border-radius:0; background:none;
}
.rescard h4{
  order:1; font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600;
  letter-spacing:-.01em; line-height:1.3; margin:0;
}
.rescard h4 a{ color:var(--ui-ink); border-bottom:0 }
.rescard h4 a:hover{ color:var(--ui-accent) }
.rescard .why{
  order:3; margin:10px 0 0; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh);
  color:var(--ui-ink-2); max-width:none;
}

/* ============================================================================
   THE MOCK EXAM

   Restyle plus the left rail. The design file put the item navigator on the
   right; every other page here puts navigation on the left, so it moves and the
   convention holds. console.js does the moving, once per render.

   The review list is a separate piece of work and is not in here.
   ============================================================================ */

body[data-page="mock"] .wrap{ max-width:none; margin:0; padding:0 }

/* The wrap owns the height, not #app. #app used to carry a 100vh min-height
   with the footer sitting below it, so every short page was taller than the
   window by exactly the height of the footer. That gave a scrollbar with nothing
   to scroll to, and scrolling it cut the top off the sticky rail. Now the wrap
   is a column the height of the window, #app takes what is left after the
   footer, and a short page does not scroll at all. */
body[data-page="mock"] .wrap{ min-height:calc(100vh - 63px) }
#app.mockshell{
  /* The footer is inside the column now, so #app is the whole page and can own
     the height. It used to stop short of the window with the footer below it,
     which is what cut the bottom off the rail. */
  min-height:calc(100vh - 63px);
  display:grid; grid-template-columns:320px minmax(0,1fr);
  background:linear-gradient(to right,
    var(--ui-panel) 0 319px,
    var(--ui-line) 319px 320px,
    transparent 320px);
}
.mockrail{
  position:sticky; top:63px; align-self:start;
  max-height:calc(100vh - 63px); overflow-y:auto; overscroll-behavior:contain;
  padding:26px 24px 40px; min-width:0;
}
.mockcol{
  min-width:0; max-width:896px; margin:0 auto;
  padding:26px 28px 90px;
}

/* the rail's masthead, same shape as a module's */
.mockrail .mast{ padding:0; border:0 }
.mockrail .eyebrow{
  display:flex; flex-wrap:wrap; gap:3px 12px;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3);
}
.mockrail .mast h1{
  margin:10px 0 0; font-family:var(--ui-sans); font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.015em; line-height:1.25; color:var(--ui-ink);
}
.mockrail .mast p{
  margin:10px 0 0; font-family:var(--ui-sans); font-size:var(--t-ui);
  line-height:var(--lh); color:var(--ui-ink-2); max-width:none;
}

/* the sitting bar: clock, counts, the two controls */
.mockrail .bar{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin:18px 0 0; padding:16px; border-radius:var(--r);
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3);
}
.mockrail .bar .clock{
  font-family:var(--ui-mono); font-size:var(--t-screen); font-weight:600;
  color:var(--ui-ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.mockrail .bar .clock.low{ color:var(--ui-warn) }
.mockrail .bar .sp{ margin-left:0; display:flex; flex-wrap:wrap; gap:8px; width:100% }
.mockrail .bar .btn{ flex:1 1 auto }

/* the item navigator */
.mockrail .pips{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(38px,1fr));
  gap:7px; margin-top:18px;
}
.pip{
  /* width and height are cleared deliberately: the page pins both to 19px, and
     without clearing them the aspect-ratio below has nothing to act on and the
     chip stays a 19px square inside a 38px grid cell. */
  width:auto; height:auto; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1px solid var(--ui-line);
  background:var(--ui-panel-2); color:var(--ui-ink-3); cursor:pointer;
  font-family:var(--ui-mono); font-size:var(--t-num); line-height:1;
  font-variant-numeric:tabular-nums;
  padding:0; transition:border-color .15s ease;
}
.pip:hover{ border-color:var(--ui-edge) }
.pip.done{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent) }
.pip.flag{ background:var(--ui-warn-soft); border-color:var(--ui-warn); color:var(--ui-warn) }
.pip.done.flag{ background:var(--ui-warn); border-color:var(--ui-warn); color:var(--ui-bg) }
.pip.here{ outline:2px solid var(--ui-ink); outline-offset:1px }

/* the score block */
.mockrail .score{ margin:18px 0 0; padding:24px; border-radius:var(--r-xl);
  background:var(--ui-quote); border:1px solid var(--ui-accent-line); text-align:left }
.mockrail .score .big{
  font-family:var(--ui-sans); font-size:var(--t-screen); font-weight:600; letter-spacing:-.02em;
  line-height:1; font-variant-numeric:tabular-nums; color:var(--ui-ink);
}
.mockrail .score .big.fail{ color:var(--ui-warn) }
/* pass or fail is a status: green or amber, never blue, and no kicker */
.mockrail .score .verdict{
  margin-top:10px; font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--ui-ok);
}
.mockrail .score .verdict.fail{ color:var(--ui-warn) }
.mockrail .score .sub{ margin-top:6px; font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink-2) }
.mockrail .sec{
  margin:22px 0 0; padding:0; border:0;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3); font-weight:500;
}
.mockrail .dbars{ display:flex; flex-direction:column; gap:10px; margin-top:10px }
.dbar{ display:grid; grid-template-columns:1fr auto; gap:2px 10px }
/* `.lbl` is also the generic kicker class; this one is a domain name, not a label */
.dbar .lbl{ display:block; font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink-2); text-transform:none; letter-spacing:0 }
.dbar .pc{ font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink); font-variant-numeric:tabular-nums }
.dbar .track{ grid-column:1 / -1; height:5px; border-radius:3px; background:var(--ui-line); overflow:hidden }
.dbar .fill{ display:block; height:100% }

/* the column */
.mockcol .modes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:0 }
.mode{
  display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:24px; border-radius:var(--r-xl); background:var(--ui-panel);
  border:1px solid var(--ui-line); cursor:pointer;
  transition:border-color .15s ease;
}
.mode:hover{ border-color:var(--ui-edge) }
.mode .mt{ order:1; font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600; letter-spacing:-.012em; color:var(--ui-ink) }
.mode .mm{ order:2; font-family:var(--ui-sans); font-size:var(--t-ui); letter-spacing:0; text-transform:none; color:var(--ui-ink-2) }
.mode .md{ order:3; font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2) }
.mode[disabled]{ opacity:.5; cursor:default }

.mockcol .sec{
  margin:38px 0 0; padding:0; border:0;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3); font-weight:500;
}
body[data-page="mock"] .note{
  display:block; text-transform:none; letter-spacing:0;
  margin-top:14px; padding:24px; border-radius:var(--r-lg);
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
  font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2); max-width:none;
}
body[data-page="mock"] .note.warn{ background:var(--ui-warn-soft); border-color:var(--ui-warn-line) }
body[data-page="mock"] .note strong{ font-family:var(--ui-sans); font-weight:600; color:var(--ui-ink) }

body[data-page="mock"] .qcard{
  background:var(--ui-panel); border:1px solid var(--ui-line);
  border-radius:var(--r-xl); padding:24px; margin:14px 0 0; box-shadow:none;
}
body[data-page="mock"] .qmeta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px }
body[data-page="mock"] .tag{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track); text-transform:uppercase;
  padding:4px 8px; border-radius:var(--r-sm); background:var(--ui-panel-2); color:var(--ui-ink-3);
}
body[data-page="mock"] .tag.sc{ background:var(--ui-accent-soft); color:var(--ui-accent) }
body[data-page="mock"] .qstem{
  font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600; line-height:var(--lh); color:var(--ui-ink); margin:0; max-width:none;
}
body[data-page="mock"] .opts{ display:flex; flex-direction:column; gap:8px; margin-top:18px }
body[data-page="mock"] .opt{
  display:flex; gap:13px; align-items:flex-start; text-align:left;
  padding:16px; border-radius:var(--r); background:var(--ui-panel-2);
  border:1px solid var(--ui-line); cursor:pointer;
  font-family:var(--ui-serif); font-size:var(--t-body); font-weight:400; line-height:var(--lh); color:var(--ui-ink);
  transition:border-color .15s ease;
}
body[data-page="mock"] .opt:hover{ border-color:var(--ui-edge) }
body[data-page="mock"] .opt[aria-pressed="true"]{ border-color:var(--ui-accent-line); background:var(--ui-accent-soft) }
body[data-page="mock"] .opt .l{ font-family:var(--ui-mono); font-size:var(--t-num); font-weight:600; color:var(--ui-ink-3); flex:none; padding-top:2px }
body[data-page="mock"] .opt.right{ border-color:var(--ui-ok-line); background:var(--ui-ok-soft) }
body[data-page="mock"] .opt.right .l{ color:var(--ui-ok) }
body[data-page="mock"] .opt.wrongpick{ border-color:var(--ui-warn-line); background:var(--ui-warn-soft) }
body[data-page="mock"] .verd{
  margin-top:14px; font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ok);
}
body[data-page="mock"] .verd.n{ color:var(--ui-warn) }
body[data-page="mock"] .expl{
  margin-top:12px; padding:16px; border-radius:var(--r);
  background:var(--ui-panel-2); font-family:var(--ui-serif);
  font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2);
}
body[data-page="mock"] .nav{ display:flex; gap:10px; margin-top:20px }
/* two button styles. Primary: solid accent, weight 600. Secondary: line border,
   panel, ink-2 at weight 500, and ink on an edge border when hovered. */
body[data-page="mock"] .btn{
  padding:9px 18px; border-radius:var(--r-sm); border:0;
  background:var(--ui-accent); color:var(--ui-on-accent);
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:600; cursor:pointer;
  transition:background .15s ease;
}
body[data-page="mock"] .btn:hover:not(:disabled){ background:var(--ui-accent-hi) }
body[data-page="mock"] .btn.ghost{
  background:var(--ui-panel); color:var(--ui-ink-2); border:1px solid var(--ui-line); font-weight:500;
}
body[data-page="mock"] .btn.ghost:hover{ border-color:var(--ui-edge); color:var(--ui-ink); background:var(--ui-panel) }

/* The flag control used to live in the bar, which the shell moves into the rail,
   so on a phone you had to open the menu to mark the question you were looking
   at. It sits in the question's own navigation row now, hard right of Back and
   Next, and says which state it is in rather than what the click will do. */
body[data-page="mock"] .qcard .nav{ align-items:center; gap:10px }
body[data-page="mock"] .flagbtn{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
}
body[data-page="mock"] .flagbtn svg{ flex:none; opacity:.75 }
/* The ghost hover rule carries a pseudo-class and so outranks a plain
   two-class state. The flagged look has to be stated for hover as well or it
   vanishes under the cursor that just set it, which is the one moment the
   reader is looking at it. */
body[data-page="mock"] .flagbtn.on,
body[data-page="mock"] .flagbtn.on:hover{
  background:var(--ui-panel-2); border-color:var(--ui-edge); color:var(--ui-ink);
}
body[data-page="mock"] .flagbtn.on svg path{ opacity:1; fill:currentColor; fill-opacity:.22 }
body[data-page="mock"] .flagbtn.on svg{ opacity:1 }
@media (max-width: 560px){
  body[data-page="mock"] .flagbtn{ margin-left:0; width:100%; justify-content:center }
}

body[data-page="mock"] .btn:disabled{ background:var(--ui-panel-2); color:var(--ui-ink-3); cursor:default }

/* The footer sits outside #app, so it needs the column's own gutters or it runs
   edge to edge under a page that does not. */
/* Inside the column it needs no offsets of its own: it takes the column's
   gutters, the same as the footer on a module page. */
body[data-page="mock"] footer{
  margin:44px 0 0; padding:22px 0 0; max-width:none;
  border-top:1px solid var(--ui-line);
  font-family:var(--ui-sans); font-size:var(--t-ui); line-height:var(--lh); color:var(--ui-ink-3);
}

@media (max-width:900px){
  body[data-page="mock"] .wrap{ min-height:0 }
  #app.mockshell{ display:block; background:none; min-height:0 }
  body[data-page="mock"] footer{ margin-top:32px; padding:20px 0 0 }
  .mockrail{
    position:static; max-height:none; overflow:visible;
    background:var(--ui-panel); border-bottom:1px solid var(--ui-line);
    padding:20px 20px 22px;
  }
  /* Sixty cells between the clock and the question is a wall on a phone, so the
     navigator becomes a short scrolling grid rather than a full-height one. */
  .mockrail .pips{ max-height:104px; overflow-y:auto; overscroll-behavior:contain }
  .mockcol{ padding:22px 20px 80px }
}

/* The headline score had no denominator, so a low number read as a percentage.
   "100" and "1 of 30 correct" on the same card is a contradiction until the
   scale is stated. */
.mockrail .score .big{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.mockrail .score .outof{
  font-family:var(--ui-mono); font-size:var(--t-num); font-weight:400;
  letter-spacing:.06em; color:var(--ui-ink-3);
}

/* ============================================================================
   THE REMAINING PAGES

   Labs, resources, sales, status, blueprint, and lesson 3.6 on its own page.
   These are documents rather than tools, so they take the same surfaces and the
   same type ramp as everything else and nothing more. Where a page already had
   a real idea, like the register's per-domain colours, it is kept.
   ============================================================================ */

/* ------------------------------------------------------------------- labs
   Labs already gets the module rail, because it has a masthead and a picker.
   Its content lives in #lab rather than .panel, so it never picked up the
   column's width or gutters and ran the full width of the window. */

body[data-page="labs"] #lab{
  max-width:896px; margin-left:auto; margin-right:auto;
  padding:26px 28px 90px; min-width:0;
}
body[data-page="labs"] #lab .sf{
  margin:12px 0 0; font-family:var(--ui-serif); font-size:var(--t-title); line-height:var(--lh); color:var(--ui-ink-2);
}
body[data-page="labs"] .facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px }
body[data-page="labs"] .chip{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; padding:5px 10px; border-radius:var(--r-sm);
  background:var(--ui-panel-2); border:1px solid var(--ui-line); color:var(--ui-ink-3);
}
body[data-page="labs"] .chip.n{ background:var(--ui-accent-soft); border-color:var(--ui-accent-line); color:var(--ui-accent) }
/* `.sec` on labs is a wrapper round a whole section, not a heading. Styling it
   as a label set the entire body of every section in uppercase mono. The heading
   is `.sec > h3`, and `.sh` is the grid that holds a step's number and title, so
   neither of those is a label either. Read the page, do not assume the name. */
/* The lab heading block took the module pages' column padding on top of the
   lab column's own, so it sat 28px in from the text under it on both sides. */
body[data-page="labs"] #lab .lhead{ padding-left:0; padding-right:0; max-width:none; margin-left:0; margin-right:0 }
body[data-page="labs"] .sec{ margin-top:40px }
body[data-page="labs"] .sec > h3{
  font-family:var(--ui-mono); font-size:var(--t-kick); font-weight:500;
  letter-spacing:var(--track); text-transform:uppercase; color:var(--ui-accent);
  border-bottom:0; padding-bottom:0; margin:0 0 12px;
}
body[data-page="labs"] .sh{ padding:24px 24px 0 }
body[data-page="labs"] .sh h4{
  font-family:var(--ui-sans); font-size:var(--t-title); font-weight:600; letter-spacing:-.015em;
  color:var(--ui-ink);
}
body[data-page="labs"] .sn{
  font-family:var(--ui-mono); font-size:var(--t-num); background:var(--ui-accent);
  color:var(--ui-on-accent); border-radius:50%;
}
body[data-page="labs"] .step, body[data-page="labs"] .wrapup{
  background:var(--ui-panel); border:1px solid var(--ui-line);
  border-radius:var(--r-xl); padding:0 0 4px; margin:18px 0 0; box-shadow:none;
}
body[data-page="labs"] .box{
  margin:16px 24px 0; border:1px solid var(--ui-ok-line); border-left-width:1px;
  border-radius:var(--r); background:var(--ui-ok-soft); padding:16px;
}
body[data-page="labs"] .sbody{ padding:0 24px 24px }
body[data-page="labs"] .prose{
  font-family:var(--ui-serif); font-size:var(--t-body); line-height:var(--lh); color:var(--ui-ink-2);
}
body[data-page="labs"] .prose p,
body[data-page="labs"] .prose ul,
body[data-page="labs"] .prose ol{ max-width:none }
body[data-page="labs"] .bt{
  font-family:var(--ui-sans); font-weight:600; color:var(--ui-ink);
}
body[data-page="labs"] .gd{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;
}
body[data-page="labs"] .lessons a{ font-family:var(--ui-mono); font-size:var(--t-num) }
/* A lab entry is a long title plus a line of facts. Beside the title the facts
   squeezed it into a column one word wide, so on the labs page they sit under
   the title instead: the number on the left, title and facts stacked beside
   it. Lesson entries keep their score hard right. */
body[data-page="labs"] .pk{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:11px; align-items:start }
body[data-page="labs"] .pk .n{ grid-row:1 / span 2 }
body[data-page="labs"] .pk .tt2{ grid-column:2 }
body[data-page="labs"] .pk .dn{ grid-column:2; margin:4px 0 0; text-align:left; white-space:normal }
body[data-page="labs"] .pk .dn .rd{ display:block; margin-top:2px }
body[data-page="labs"] .pk .dn .rd.ok{ color:var(--ui-ok) }

/* -------------------------------------------- the single-column documents */

body:not(.has-rail)[data-page="resources"] .wrap,
body[data-page="sales"] .wrap,
body:not(.has-rail)[data-page="blueprint"] .wrap,
body[data-page="lesson"] .wrap{ max-width:1040px; padding:30px 28px 90px }

body[data-page="resources"] .mast h1,
body[data-page="sales"] .mast h1,
body[data-page="blueprint"] .mast h1,
body[data-page="status"] .mast h1{
  margin:10px 0 0; font-family:var(--ui-sans); font-size:var(--t-page);
  font-weight:600; letter-spacing:-.025em; line-height:1.1; max-width:24ch;
  color:var(--ui-ink);
}
body[data-page="resources"] .mast,
body[data-page="sales"] .mast,
body[data-page="blueprint"] .mast,
body[data-page="status"] .mast{ padding:0 0 30px; border-bottom:1px solid var(--ui-line) }
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{
  margin:14px 0 0; font-family:var(--ui-serif); font-size:var(--t-title); line-height:var(--lh);
  color:var(--ui-ink-2); max-width:none;
}
body[data-page="resources"] .mast > p,
body[data-page="blueprint"] .mast > p{
  margin:14px 0 0; font-family:var(--ui-serif); font-size:var(--t-title); line-height:var(--lh); color:var(--ui-ink-2);
}

/* the metadata strip under a masthead */
body[data-page="resources"] .stamp,
body[data-page="lesson"] .bar{
  display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:18px;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3);
}
body[data-page="resources"] .stamp span,
body[data-page="lesson"] .bar span{
  background:none; border:0; padding:0; border-radius:0; font:inherit; color:inherit;
}

/* every card-like block on these pages lands on the same two surfaces */
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:var(--ui-panel); border:1px solid var(--ui-line);
  border-radius:var(--r-xl); border-left-width:1px; box-shadow:none;
  padding:24px; margin:16px 0 0;
}
body[data-page="blueprint"] .note.ok,
body[data-page="status"] .callout{ background:var(--ui-accent-soft); border-color:var(--ui-accent-line) }
body[data-page="blueprint"] .note.warn,
body[data-page="sales"] .gate{ background:var(--ui-warn-soft); border-color:var(--ui-warn-line) }

/* number tiles, wherever they appear */
body[data-page="blueprint"] .stats,
body[data-page="sales"] .inv,
body[data-page="status"] .state{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px; margin:22px 0 0; background:none; border:0; box-shadow:none;
}
body[data-page="blueprint"] .stat,
body[data-page="sales"] .iv,
body[data-page="status"] .st{
  padding:16px; border-radius:var(--r-lg);
  background:var(--ui-panel); border:1px solid var(--ui-line);
  display:block;
}
body[data-page="blueprint"] .stat .v,
body[data-page="sales"] .iv .q,
body[data-page="status"] .st dd{
  font-family:var(--ui-sans); font-size:var(--t-screen); font-weight:600; letter-spacing:-.02em;
  color:var(--ui-ink); font-variant-numeric:tabular-nums; margin:0; line-height:1.1;
}
body[data-page="blueprint"] .stat .k,
body[data-page="sales"] .iv .l,
body[data-page="status"] .st dt{
  margin:6px 0 0; font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:400;
  color:var(--ui-ink-2); text-transform:none; letter-spacing:0;
}
body[data-page="sales"] .iv .d,
body[data-page="status"] .st small{
  display:block; margin-top:4px; font-family:var(--ui-sans); font-size:var(--t-ui);
  font-weight:400; color:var(--ui-ink-2); line-height:var(--lh); letter-spacing:0;
}
body[data-page="status"] .st.ok dd{ color:var(--ui-ok) }
body[data-page="status"] .st.hold dd{ color:var(--ui-warn) }

/* section heads, the same stacked shape as the home page */
body[data-page="sales"] section,
body[data-page="status"] section,
body[data-page="resources"] section,
body[data-page="blueprint"] section{ padding-top:52px }
body[data-page="sales"] .shead{
  display:flex; flex-direction:column-reverse; align-items:flex-start;
  gap:8px; border-bottom:0; padding-bottom:0;
}
body[data-page="sales"] .shead h2{
  font-family:var(--ui-sans); font-size:var(--t-h3); font-weight:600;
  letter-spacing:-.018em; color:var(--ui-ink); text-transform:none;
}
body[data-page="sales"] .shead .n{
  margin:0; font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3); font-weight:500;
}

/* the sales draft banner stays loud, because it is telling the truth */
body[data-page="sales"] .draft{
  background:var(--ui-warn-soft); border-bottom:1px solid var(--ui-warn-line);
  color:var(--ui-warn); font-family:var(--ui-mono); font-size:var(--t-kick);
  letter-spacing:var(--track); text-transform:uppercase; padding:10px 28px; text-align:center;
}
body[data-page="sales"] .cta{
  display:inline-block; margin-top:18px; padding:10px 18px;
  border-radius:var(--r-sm); border:0; background:var(--ui-accent);
  color:var(--ui-on-accent); font-family:var(--ui-sans); font-size:var(--t-ui);
  font-weight:600; text-decoration:none; transition:background .15s ease;
}
body[data-page="sales"] .cta:hover{ background:var(--ui-accent-hi); color:var(--ui-on-accent) }
body[data-page="sales"] .cta.ghost{
  background:var(--ui-panel); color:var(--ui-ink-2); border:1px solid var(--ui-line); font-weight:500;
}
body[data-page="sales"] .cta.ghost:hover{ background:var(--ui-panel); border-color:var(--ui-edge); color:var(--ui-ink) }

/* register: the filters and the resource rows */
body[data-page="resources"] .filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0;
  padding:16px; border-radius:var(--r-lg);
  background:var(--ui-panel-2); border:1px solid var(--ui-line);
}
body[data-page="resources"] .chip, body[data-page="resources"] .tag{
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; padding:5px 10px; border-radius:var(--r-sm);
  background:var(--ui-panel); border:1px solid var(--ui-line); color:var(--ui-ink-3);
  cursor:pointer;
}
body[data-page="resources"] .chip.on{
  background:var(--ui-accent-soft); border-color:var(--ui-accent-line); color:var(--ui-accent);
}
body[data-page="resources"] .facts{
  display:flex; flex-wrap:wrap; gap:4px 16px;
  font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3);
}
body[data-page="resources"] .facts span{ background:none; border:0; padding:0 }

/* lesson 3.6 borrows the module reader's treatment wholesale */
body[data-page="lesson"] .crumb{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  font-family:var(--ui-mono); font-size:var(--t-kick); letter-spacing:var(--track);
  text-transform:uppercase; color:var(--ui-ink-3);
}
body[data-page="lesson"] .title{
  margin:12px 0 0; font-family:var(--ui-sans); font-size:var(--t-page);
  font-weight:600; letter-spacing:-.025em; line-height:1.12; color:var(--ui-ink);
}
body[data-page="lesson"] .tabs{
  position:static; margin:26px 0 0; padding:0 0 0; border-bottom:1px solid var(--ui-line);
  display:flex; gap:2px;
}
body[data-page="lesson"] .panel{ padding:22px 0 80px; max-width:none }

@media (max-width:900px){
  body[data-page="labs"] #lab{ padding:22px 20px 80px }
  body:not(.has-rail)[data-page="resources"] .wrap,
  body[data-page="sales"] .wrap,
  body:not(.has-rail)[data-page="blueprint"] .wrap,
  body[data-page="lesson"] .wrap{ padding:24px 20px 80px }
}

/* ============================================================================
   THE PHONE

   Measured before any of this was written, at 390 by 844: the app bar alone was
   177px tall, three wrapped rows, and not even fixed. Content began 507px down
   on the mock mid sitting, 927px down on a module page and 1132px down on the
   home page. A fifth of the screen went to chrome on every view.

   One fixed bar, three slots, each answering one question. Left, where in the
   course. Centre, where am I now. Right, who am I and how does this look. The
   rail is the page's own navigation, so on a phone it becomes the second half of
   the menu rather than a wall above the thing you came to read.
   ============================================================================ */

.menubtn, .ctx{ display:none }
/* The account button shows at every width: it is where signing out lives. */

.acct{ position:relative }
.avatar{
  width:32px; height:32px; border-radius:50%; padding:0;
  border:1px solid var(--ui-line); background:var(--ui-panel-2);
  color:var(--ui-ink-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.avatar:hover{ border-color:var(--ui-edge); color:var(--ui-ink) }
.acctmenu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:40;
  min-width:250px; padding:8px; border-radius:var(--r-lg);
  background:var(--ui-panel); border:1px solid var(--ui-line);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.45);
}
/* box-sizing: a link row (Feedback notes, Audio changes, Sign out) is not a
   button, and on a page without its own border-box rule its padding went on top
   of the full width, so its hover band ran 28px past the menu's border (XIG,
   4 Oct 2026). A long label wraps inside the row rather than running out. */
.acctitem{
  display:block; width:100%; box-sizing:border-box; text-align:left; padding:9px 11px;
  overflow-wrap:anywhere; white-space:normal;
  border:0; border-radius:var(--r-sm); background:none; cursor:pointer;
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500; color:var(--ui-ink);
}
.acctitem:hover{ background:var(--ui-hover) }
a.acctitem{ border-bottom:0; text-decoration:none; color:var(--ui-ink) }
.acctnote{
  padding:10px 11px 6px; margin-top:4px; border-top:1px solid var(--ui-line-2);
  font-family:var(--ui-sans); font-size:var(--t-ui); line-height:var(--lh); color:var(--ui-ink-3);
}

/* a small menu under a control: the module switch in the bar, and on a
   phone the lesson list under a tab */
.navdrop{ position:relative; display:flex }
/* the link inside the wrapper is laid out as a block, the same as the bare nav
   links beside it, or it sits as inline text: shorter, and higher by 2px */
.navdrop > a{ display:block }
.navdrop > a::after, .navdrop > button::after{ content:" \25BE"; font-size:.85em; opacity:.7 }
.dropmenu{
  position:absolute; left:0; top:calc(100% + 6px); z-index:45;
  min-width:240px; padding:6px; border-radius:var(--r-lg);
  background:var(--ui-panel); border:1px solid var(--ui-line);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.45);
}
.dropmenu.fixed{ position:fixed; overflow-y:auto }
/* on a phone the lesson list is a panel across the page under the tab row,
   with the same side margins as the cards, not a box hung off one tab */
.dropmenu.sheet{ min-width:0 }
/* a menu that would run off the right edge lines up with its control's right edge */
.dropmenu.flip{ left:auto; right:0 }
.dropmenu a, .dropmenu button{
  display:flex; gap:10px; align-items:baseline; width:100%; text-align:left;
  padding:9px 11px; border:0; border-radius:var(--r-sm); background:none; cursor:pointer;
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500; color:var(--ui-ink-2);
  text-decoration:none; line-height:1.35;
}
.dropmenu a:hover, .dropmenu button:hover{ background:var(--ui-hover); color:var(--ui-ink) }
.dropmenu [aria-current]{ background:var(--ui-accent-soft); color:var(--ui-ink) }
.dropmenu .n{ flex:none; font-family:var(--ui-mono); font-size:var(--t-num); color:var(--ui-ink-3) }
.dropmenu [aria-current] .n{ color:var(--ui-accent) }
.dropmenu .t{ flex:1 1 auto; min-width:0 }

/* the drawer, off-screen until asked for */
.scrim{
  position:fixed; inset:0; z-index:50; background:rgba(6,10,16,.5);
  backdrop-filter:blur(1px);
}
.drawer{
  position:fixed; left:0; top:0; bottom:0; z-index:51;
  width:min(86vw, 360px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--ui-panel); border-right:1px solid var(--ui-line);
  padding:14px 18px 40px;
  box-shadow:0 0 60px -20px rgba(0,0,0,.6);
}
.drawertop{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.drawerclose{
  border:1px solid var(--ui-line); background:var(--ui-panel-2); color:var(--ui-ink-2);
  border-radius:var(--r-sm); padding:6px 11px; cursor:pointer;
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500;
}
.drawerclose:hover{ border-color:var(--ui-edge); color:var(--ui-ink) }
.drawernav{ display:flex; flex-direction:column; gap:2px; margin-top:10px }
.drawernav a{
  padding:11px 12px; border-radius:var(--r-sm); border:0;
  font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:500;
  color:var(--ui-ink-2); text-decoration:none;
}
.drawernav a[aria-current="page"]{ background:var(--ui-accent-soft); color:var(--ui-accent); font-weight:600 }
.drawerbody{ margin-top:18px; border-top:1px solid var(--ui-line); padding-top:6px }
.drawerbody .rail,
.drawerbody .mockrail{
  position:static; max-height:none; overflow:visible;
  padding:0; border:0; background:none; width:auto; min-width:0;
}
body.drawer-open{ overflow:hidden }

@media (max-width: 900px){
  /* one row, fixed, and nothing wraps */
  .appbar{
    position:fixed; top:0; left:0; right:0; z-index:30;
    display:grid; grid-template-columns:auto auto minmax(0,1fr) auto;
    align-items:center; gap:10px; flex-wrap:nowrap;
    padding:9px 14px; height:56px;
  }
  .appbar nav{ display:none }
  .appbar .mark b{ display:none }
  .appbar .mark{ border:0 }
  .appbar .tog{ display:none }
  .appbar .right{ margin-left:0 }
  .menubtn{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:34px; height:34px; padding:0 7px;
    border:1px solid var(--ui-line); border-radius:var(--r-sm);
    background:var(--ui-panel-2); cursor:pointer;
  }
  .menubtn span{ display:block; height:1.5px; background:var(--ui-ink-2); border-radius:2px }
  .ctx{
    display:block; min-width:0; text-align:center;
    font-family:var(--ui-sans); font-size:var(--t-ui); font-weight:600;
    color:var(--ui-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .ctx b{ font-family:var(--ui-mono); font-weight:500; color:var(--ui-accent);
         font-variant-numeric:tabular-nums; margin-right:2px }
  .ctx.hasclock{ font-family:var(--ui-mono); font-variant-numeric:tabular-nums }
  .ctx #clock{ font-size:16px; font-weight:600; color:var(--ui-ink) }
  .ctx #clock.low{ color:var(--ui-warn) }
  .acct{ display:block }

  /* the bar is fixed, so every page starts below it and nothing else adds height */
  body{ padding-top:56px }
  body.has-rail .wrap{ display:block; background:none }
  body.has-rail .panel, body.has-rail .lhead, body.has-rail .tabs, body.has-rail footer{
    max-width:none; margin:0; padding-left:20px; padding-right:20px;
  }
  .tabs{ top:56px }
  #app.mockshell{ display:block; background:none; min-height:0 }
  .mockcol{ padding:18px 20px 80px }
  body[data-page="mock"] .wrap{ min-height:0 }

  /* inside the drawer the rail is a list, not a panel */
  .drawerbody .rail h1, .drawerbody .mockrail .mast h1{ font-size:var(--t-title); margin-top:8px }
  .drawerbody .meter{ margin-top:14px }
  .drawerbody .picker{ margin-top:8px }
  .drawerbody .pk{ padding:11px 10px }
  .drawerbody .mockrail .pips{ grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); max-height:none }
  .drawerbody .mockrail .bar{ margin-top:14px }
  .drawerbody .mockrail .bar .clock{ display:none }
}

/* ------------------------------------------------------- the fixed player

   One player stays on screen. On a phone it is the bar at the foot of the screen,
   shown once a track has been started. On a wide screen it sits at the foot of the
   rail, always there, and it is the only player: the cards in the page are hidden
   (XIG, 28 September 2026). Both carry speed and chapters. */
.dock .dockchaps{
  margin:0 auto 10px; max-width:840px; max-height:45vh; overflow-y:auto;
  border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-panel);
}
.dock .dockchaps button:first-child{ border-top:0 }
@media (max-width:620px){
  .dockin{ flex-wrap:wrap; row-gap:10px }
  .dockin .apm{ flex:1 1 calc(100% - 52px); min-width:0 }
  .dockin .apx{ order:3; margin-left:50px }
  .dockin .apc{ order:4 }
}

body.dock-in-rail .panel .ap,
body.dock-in-rail .panel .ap + .chaps{ display:none }
body.dock-in-rail .rail{ display:flex; flex-direction:column; height:calc(100vh - 63px); padding-bottom:0 }
body.dock-in-rail .rail > *{ flex:0 0 auto }
body.dock-in-rail #dock{
  position:sticky; bottom:0; left:auto; right:auto; z-index:2;
  transform:none; transition:none;
  margin:24px -24px 0; margin-top:auto; padding:14px 24px 18px;
  background:var(--ui-panel); border-top:1px solid var(--ui-line);
  box-shadow:0 -10px 18px -14px rgba(0,0,0,.28);
}
body.dock-in-rail #dock.empty{ display:none }
body.dock-in-rail .dockin{ max-width:none; flex-wrap:wrap; row-gap:10px; gap:10px 12px }
body.dock-in-rail .dockin .apm{ flex:1 1 calc(100% - 52px); min-width:0 }
body.dock-in-rail .dockin .apx{ order:3 }
body.dock-in-rail .dockin .apc{ order:4 }
body.dock-in-rail .dockin.none .apm{ flex-basis:100% }
body.dock-in-rail .dock .dockchaps{ max-height:40vh; margin:0 0 12px }

/* the player's Mark button (feedback accounts only) */
.apmark{ font-weight:600 }
.apmark[disabled]{ opacity:.7 }
/* The note box under the player after a mark (XIG, 30 Sep 2026). */
.ap:has(.apn), .dockin:has(.apn){ flex-wrap:wrap }
.apn{ flex:1 1 100%; order:5; display:flex; gap:8px; align-items:center; min-width:0 }
.apn input{ flex:1 1 auto; min-width:0; font:inherit; font-size:var(--t-ui); padding:6px 10px;
  border:1px solid var(--ui-line); border-radius:var(--r-md, 8px); background:var(--ui-panel); color:var(--ui-ink) }
.apn button{ flex:0 0 auto }
.apnm{ font-family:var(--ui-sans); font-size:var(--t-ui); color:var(--ui-ink-3) }