/* ==========================================================================
   BUT FOR · the visual system, first version
   public/_system.css

   One stylesheet that is the whole system, drawn from the nine-panel
   reference board Mae chose on October 31 2026. The board was read pixel by
   pixel (scripts in the session's scratchpad; the nine crops are in
   public/devpreview/panels/) and every color below names where on the
   board it was measured. Where the first reading of the board and the file
   disagreed, the file won, and the comment says so.

   The page that shows every piece beside the panel it comes from is
   public/devpreview/system.html. Nothing here is loaded by a live page.

   Order: tokens, base, then one small class family per piece, in the order
   the pieces page shows them.

   Two floors, from the standard: 18px for anything read at length, 16px for
   interface text, 12px for the smallest label, and nothing under 12px.
   Body text clears 4.5:1 against the field and against every surface
   lifted from it (the numbers are in the comments on the ink tokens).

   Faces: Source Serif 4 for display, headlines and reading, which every
   live page already loads from Google Fonts; Manrope for the interface
   (buttons, labels, nav, metrics), which no live page loads yet. This file
   names the families and loads neither: the page that uses it does.
   ========================================================================== */

:root {
  /* ----- the field, and what is lifted from it ---------------------------
     The board's app screens sit on a blue-black, not a black: the bench
     (03) reads #0b1014 outside its card and #0b1015 inside it, the question
     screen (04) #0d1013 to #0f1315, the foot of the review (06) #080e12.
     The hero (01) goes to #000409 under its photograph, and that is the
     only place the board goes that dark. The first sampling called the
     field #000008 to #000810; the file says the screens are lighter than
     that, so the field is #0a0f13 and the photograph band has its own. */
  /* November 8 2026, Mae: "reverse the grey/black with cream, same elegance".
     The page is the brand's cream; cards lift toward white; the dark the
     board drew is kept as a scope, .dark, for the cap (the top bar, the home
     hero under its photograph, the footer, the phone's price bar). The values
     below are the light set; the .dark block after this one is the board's.
     November 9 2026, Mae: back to the dark page while ChatGPT designs the light
     one properly (docs/design/public/brief-light-redesign.txt). The values below
     are the board's dark set again, as the site launched on November 7; the
     light set is in the record at 38c96a3 and f137fde. */
  --field: #262d32;
  --field-deep: #1d2328;
  --surface: #2f363b;
  --surface-2: #383f44;
  --surface-3: #41484d;
  --rule: rgba(255, 255, 255, .10);
  --rule-strong: rgba(255, 255, 255, .18);
  --rule-faint: rgba(255, 255, 255, .06);
  --track: rgba(255, 255, 255, .10);
  --track-faint: rgba(255, 255, 255, .08);
  --wash-selected: rgba(120, 96, 64, .45);
  --wash-miss: rgba(132, 68, 64, .55);

  /* ----- ink ---------------------------------------------------------------
     The board's text is ivory, not white. "Be the cause." samples #fbfaf6,
     the standfirst under it #f8f8f7. The second standfirst line and the
     answer options at rest are a grey, #b6b7b8. The small labels on the
     bench ("Questions Completed") are #a5a7aa.

     Contrast (WCAG 2 relative luminance), computed against the field
     (#0a0f13) and against the highest surface (#1d2328):
       ink    #f8f8f6   18.1:1 on the field   14.9:1 on surface-3
       ink-2  #b8bcc0   10.1:1                 8.3:1
       ink-3  #a4a8ac    8.1:1                 6.6:1
       ink-4  #888c90    5.7:1                 4.7:1
     The board's faintest grey, #787c80, is 4.6:1 on the field and 3.8:1 on
     surface-3, so ink-4 is set a step lighter than the board draws it and is
     the floor: nothing reads in a fainter grey than ink-4. */
  --ink: #f8f8f6;
  --ink-2: #b8bcc0;
  --ink-3: #adb1b5;
  --ink-4: #9a9ea2;
  --ink-on-accent: #15181b;
  --ink-on-fill: #15181b;
  --ink-on-wrong: #f8f8f6;

  /* ----- the one warm action ---------------------------------------------
     The hero's "Start practicing" samples #fdf1d8; "Submit answer" and
     "Continue" sample #f0e2ca. One cream between them for every primary
     action, and the Submit button's own shade for the pointer state, so the
     hover is a color the board draws. */
  --accent: #f8f0d8;
  --accent-deep: #efe1c8;
  --outline-selected: rgba(248, 240, 216, .45);

  /* ----- meaning ------------------------------------------------------------
     Greens: the readiness ring runs from #2d5343 at its tail to #8cc89c at
     its head (03); the subject bars are #6cb093 to #66ac88 (03); the
     correct badge is #46956b (05); the check inside the review's ring is
     #83d393 (06). Reds: the wrong badge's ring is #af6254 over a fill of
     the deeper red at about half strength (05). Golds: a bar under 70 is
     #acb272 to #bbb367 (03); the chosen confidence pill is #3c382e, which is
     #786040 drawn at .45 over the field (05); a number badge's ring is
     #877a64 (05, 09); the current tab's underline in the member bar is
     #dbc6a0 (03). The streak flame is #f6ca65 (03). The line that joins the
     method's three steps is #574838 (07). */
  --green-ring-start: #488864;
  --green-ring-end: #7cb478;
  --green-bar: #6aae8c;
  --green: #48956c;
  --green-bright: #80d494;
  --green-deep: #387454;
  --green-tint: rgba(104, 172, 132, .09);
  --red: #ac584c;
  --red-deep: #844440;
  --red-tint: rgba(172, 88, 76, .12);
  --red-text: #e09a8e;
  --gold: #b8b064;
  --gold-light: #d8c49c;
  --gold-deep: #786040;
  --gold-ring: #8a7c62;
  --orange: #f0b858;
  --warm: #604c34;

  /* ----- type --------------------------------------------------------------
     Roles, not sizes, so a piece says what it is. The display step is
     fluid: 44px on a 390 phone, 88px on a 1440 desktop, which is the ratio
     of "Be the cause." to its panel on 02 and on 01. */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  /* Manrope's standard ligatures turn "(c)" into the copyright sign, and
     "(c)" is a subsection in every statute the site quotes; every rule that
     sets the sans face also sets font-variant-ligatures: no-common-ligatures
     (November 2 2026). The serif keeps its own ligatures. */
  --t-display: clamp(2.5rem, 1.25rem + 3vw, 4rem);     /* 40px on a tablet, 64px at a wide desktop: the hero headline and the price figure. Was 88px at a desktop until Nov 8 (Mae: "huge") */
  --t-1: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);   /* a page's title: "Your Bench"          */
  --t-2: 1.75rem;                                 /* a section heading, "Correct"          */
  --t-3: 1.25rem;                                 /* a card's or a step's title            */
  --t-stand: 1.375rem;                            /* the one-line standfirst               */
  --t-read: 1.125rem;                             /* 18px: the floor for reading           */
  --t-ui: 1rem;                                   /* 16px: the floor for interface text    */
  --t-label: .8125rem;                            /* 13px: a label over a value            */
  --t-min: .75rem;                                /* 12px: the smallest label, the floor   */
  --t-metric: 2rem;                               /* the number on a metric tile           */
  --t-ring: 3.5rem;                               /* the number in the readiness ring      */
  --lh-display: 1.02;
  --lh-head: 1.15;
  --lh-read: 1.6;
  --lh-ui: 1.3;
  --track-caps: .08em;                            /* the wordmark and the smallest label   */
  --measure: 35rem;                               /* about 70 characters of 18px serif     */

  /* ----- space, radii, rules, focus ------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --r-1: 6px;                  /* a small icon box                      */
  --r-2: 8px;                  /* buttons, pills, fields                */
  --r-3: 12px;                 /* cards, rows, tiles                    */
  --r-4: 16px;                 /* a panel that holds a whole piece      */
  --r-round: 999px;
  --hair: 1px;                 /* every rule and edge                   */
  --stroke: 2px;               /* the tab underline, the focus ring     */
  --focus: var(--accent);
  --tap: 44px;                 /* the smallest thing a thumb is asked to hit */
}

/* The board's own dark, as a scope. The cap wears it: the top bar and the
   phone menu in it, the home hero under its photograph, the footer, the
   phone's price bar. Every token the light page redefines is set back here,
   so a piece inside the cap draws exactly as the board drew it. The cap is
   named by selector, not by a class, so the stamped chrome keeps its markup. */
/* November 9 2026: the page itself is dark again, so the cap wears nothing of
   its own; the scope stays for the class alone until the light design lands. */
.dark {
  --field: #0a0f13; --field-deep: #02060a;
  --surface: #0f1519; --surface-2: #151b20; --surface-3: #1d2328;
  /* Literal values, on purpose. On November 8 2026 the cream build wrote these
     five as var() of their own names (a find-and-replace of the literals reached
     the definitions themselves). A name that refers to itself is invalid, so
     for four hours no thin rule or track drew anywhere inside the cap.
     scale-lint now refuses a token that refers to itself. */
  --rule: rgba(255, 255, 255, .10); --rule-strong: rgba(255, 255, 255, .18); --rule-faint: rgba(255, 255, 255, .06);
  --track: rgba(255, 255, 255, .10); --track-faint: rgba(255, 255, 255, .08);
  --wash-selected: rgba(120, 96, 64, .45); --wash-miss: rgba(132, 68, 64, .55);
  --ink: #f8f8f6; --ink-2: #b8bcc0; --ink-3: #adb1b5; --ink-4: #9a9ea2;
  --ink-on-accent: #15181b;
  --accent: #f8f0d8; --accent-deep: #efe1c8;
  --outline-selected: color-mix(in srgb, var(--accent) 45%, transparent);
  --green-bright: #80d494; --red-text: #e09a8e; --gold-light: #d8c49c;
  color: var(--ink); background: var(--field);
}

/* ----- base ----------------------------------------------------------------
   Scoped to body.sys so the file can sit beside another stylesheet without
   restyling its page. The pieces below are plain class names. */
body.sys {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-read);
  line-height: var(--lh-read);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The resets sit inside :where() so they weigh nothing: a plain class like
   .btn-primary or .tab must be able to set its own colour over them. The first
   draft wrote these as body.sys button and body.sys a, and every cream button
   drew its label in cream, every answer row and nav link in white. */
:where(body.sys) *, :where(body.sys) *::before, :where(body.sys) *::after { box-sizing: border-box; }
:where(body.sys) :focus-visible { outline: var(--stroke) solid var(--focus); outline-offset: 3px; border-radius: var(--r-2); }
:where(body.sys) :focus:not(:focus-visible) { outline: none; }
:where(body.sys) a { color: inherit; }
:where(body.sys) button { font: inherit; color: inherit; }
:where(body.sys) img, :where(body.sys) svg { display: block; max-width: 100%; }
:where(body.sys) h1, :where(body.sys) h2, :where(body.sys) h3, :where(body.sys) p { margin: 0; }
:where(body.sys) ::selection { background: var(--gold-deep); color: var(--ink); }

/* An inline icon: one em square, drawn in the text's own color. */
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-lg { width: 1.25em; height: 1.25em; }

/* The interface voice: everything that is not display, headline or reading. */
.ui { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: var(--lh-ui); }
.label { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); font-weight: 500; }
.kicker { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: var(--lh-ui); color: var(--ink-3); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-4); }
.num { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   1. The wordmark and the two top bars · board 01, 03, 07
   The words BUT FOR in the serif, capitals, tracked a little, never followed
   by a period. The board draws it a shade smaller than the nav's x-height
   would suggest and lets the tracking carry it. */
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-3);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.wordmark-lg { font-size: var(--t-2); }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
  padding: 0 var(--space-5);
  border-bottom: var(--hair) solid var(--rule);
  background: var(--field);
}
.topbar-nav { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.topbar-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures;
  font-size: var(--t-ui);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-2);
}
.topbar-nav a:hover, .topbar-nav a.is-hover { color: var(--ink); }
/* The current page: a short gold line under the word, as 03 and 07 draw it. */
.topbar-nav a.is-active { color: var(--ink); }
.topbar-nav a.is-active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px;
  height: var(--stroke); border-radius: var(--r-round); background: var(--gold-light);
}
.topbar-right { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.topbar .link {
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 500; color: var(--ink-2);
  text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-2);
}
.topbar .link:hover { color: var(--ink); }
.avatar {
  width: 36px; height: 36px; border-radius: var(--r-round);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair) solid var(--rule-strong); background: var(--surface-2);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 700; color: var(--ink); letter-spacing: .02em;
}
.menu-btn {
  display: none; margin-left: auto; width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--r-2); color: var(--ink); cursor: pointer;
}
.menu-btn .ic { width: 22px; height: 22px; }
/* The phone bar keeps the wordmark and the menu, as 02 and 08 show. */
/* The links never wrap; a bar too narrow for all of them shows the menu button instead,
   judged by the bar's own container so the pieces page's demo column behaves like a page. */
.topbar-nav a, .topbar .link { white-space: nowrap; }
.page-shell { container-type: inline-size; }
@container (max-width: 960px) {
  .topbar-nav, .topbar-right { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 720px) {
  .topbar { gap: var(--space-4); padding: 0 var(--space-4); }
  .topbar-nav, .topbar-right { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ===========================================================================
   2. Buttons · board 01, 04, 05, 06
   One primary action in cream with dark text and an arrow; a secondary
   outlined in ivory; a text link with an arrow. 48px tall, so a thumb has
   it, and the arrow sits in the label's own color. Hover, focus and
   disabled are not on the board: the hover is the board's deeper cream,
   focus is the system's one ring, disabled is the raised surface with the label
   ink, the neutral grey the approved homepage design draws (cream at .45 read
   as mud on the field). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; line-height: 1;
  border-radius: var(--r-2); border: var(--hair) solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn .ic { transition: transform .15s ease; }
.btn:hover .ic, .btn.is-hover .ic { transform: translateX(2px); }
.btn-primary { background: var(--accent); color: var(--ink-on-accent); border-color: var(--accent); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-secondary { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
.btn-secondary:hover, .btn-secondary.is-hover { background: var(--surface-3); border-color: var(--ink); }
.btn-text { background: none; color: var(--ink); padding: 0 var(--space-2); border-color: transparent; }
.btn-text:hover, .btn-text.is-hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: var(--hair); }
.btn.is-focus { outline: var(--stroke) solid var(--focus); outline-offset: 3px; }
.btn:disabled, .btn.is-disabled { cursor: not-allowed; background: var(--surface-2); color: var(--ink-2); border-color: var(--rule); box-shadow: none; }
.btn:disabled .ic, .btn.is-disabled .ic { transform: none; }
.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 56px; padding: 0 var(--space-6); font-size: var(--t-read); }

/* ===========================================================================
   3. The opening · board 01, 02
   A display headline, one or two standfirst lines, two actions, and a row
   of three proof items with small line icons in rule-edged boxes. */
.display {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -.015em;
  color: var(--ink); max-width: 14em;
}
.title { font-family: var(--serif); font-weight: 400; font-size: var(--t-1); line-height: var(--lh-head); letter-spacing: -.01em; color: var(--ink); }
.heading { font-family: var(--serif); font-weight: 500; font-size: var(--t-2); line-height: var(--lh-head); color: var(--ink); }
.stand { font-family: var(--serif); font-size: var(--t-stand); line-height: 1.35; color: var(--ink); max-width: 24em; }
.stand-2 { font-family: var(--serif); font-size: var(--t-read); line-height: 1.5; color: var(--ink-2); max-width: 26em; }
.opening { display: grid; gap: var(--space-5); }
.opening .display { margin-bottom: var(--space-1); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.proof { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); margin: 0; padding: var(--space-5) 0 0; list-style: none; border-top: var(--hair) solid var(--rule); }
.proof li { display: flex; align-items: center; gap: var(--space-3); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 500; color: var(--ink-2); }
.proof .box {
  width: 36px; height: 36px; border-radius: var(--r-1); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair) solid var(--rule-strong); background: var(--surface); color: var(--ink);
}
.proof .box .ic { width: 18px; height: 18px; }

/* ===========================================================================
   4. Reading · board 06, and the live method page
   18px serif, about 70 characters to a line, 1.6 leading. */
.prose { font-family: var(--serif); font-size: var(--t-read); line-height: var(--lh-read); color: var(--ink); max-width: var(--measure); }
.prose p + p { margin-top: var(--space-4); }
.prose-2 { color: var(--ink-2); }
.section { display: grid; gap: var(--space-4); }

/* ===========================================================================
   5. A card · board 03, 06, 09
   A 1px rule, a slight tonal lift, 12px corners. */
.card {
  background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3);
  padding: var(--space-5);
}
.card-raised { background: var(--surface-2); }
.card .label { display: block; margin-bottom: var(--space-2); }
.card-title { font-family: var(--serif); font-weight: 500; font-size: var(--t-3); line-height: var(--lh-head); color: var(--ink); }
.card-body { font-family: var(--serif); font-size: var(--t-read); line-height: 1.5; color: var(--ink-2); margin-top: var(--space-2); }

/* ===========================================================================
   6. Metric tiles · board 03
   A small label, a big number in the serif, a line icon at the left, a
   small arrow at the top right. */
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.metric {
  position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start;
  background: var(--surface-2); border: var(--hair) solid var(--rule); border-radius: var(--r-3);
  padding: var(--space-5) var(--space-7) var(--space-5) var(--space-5);
  text-decoration: none; color: inherit;
}
.metric .ic { width: 24px; height: 24px; margin-top: 2px; }
.metric-icon-green { color: var(--green-bar); }
.metric-icon-orange { color: var(--orange); }
.metric-label { display: block; margin-bottom: var(--space-1); }
.metric-value { font-family: var(--serif); font-size: var(--t-metric); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric-arrow { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--ink-3); }
.metric-arrow .ic { width: 16px; height: 16px; margin: 0; }
@media (max-width: 640px) { .metrics { grid-template-columns: 1fr; } }

/* ===========================================================================
   7. Subjects with bars · board 03
   Name, a 6px bar, the number. Green at 70 and over, gold under it. */
.subjects { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.subject { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr 2.5rem; align-items: center; gap: var(--space-4); }
.subject-name { font-family: var(--serif); font-size: var(--t-ui); color: var(--ink-2); }
.subject-score { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.bar { display: block; height: 6px; border-radius: var(--r-round); background: var(--track); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--r-round); background: var(--green-bar); }
.bar-fill.is-gold { background: var(--gold); }
@media (max-width: 420px) { .subject { grid-template-columns: minmax(6rem, 9.5rem) 1fr 2.2rem; gap: var(--space-3); } }

/* ===========================================================================
   8. The readiness ring · board 03, 06
   A track at .08, a green arc from the deeper green to the lighter, the
   number in the serif at the middle and the state under it. The ring is
   drawn as SVG; the arc's length is set on the circle's dash. */
.ring { position: relative; width: 168px; height: 168px; }
.ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--track-faint); stroke-width: 11; }
.ring-arc { fill: none; stroke: url(#ring-grad); stroke-width: 11; stroke-linecap: round; }
.ring-middle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); }
.ring-value { font-family: var(--serif); font-size: var(--t-ring); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring-note { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
.ring-note .ic { width: 14px; height: 14px; }
/* The small ring with a check or a cross, on the result block. */
.ring-sm {
  width: 64px; height: 64px; border-radius: var(--r-round);
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--green-bright); color: var(--green-bright);
}
.ring-sm .ic { width: 30px; height: 30px; stroke-width: 2.2; }
.ring-sm.is-wrong { border-color: var(--red); color: var(--red); }

/* ===========================================================================
   9. The question screen · designed November 3 2026
   (docs/design/member/question-screen-pass-1, built to question-screen.txt)
   One question at a time in both formats, in its three homes: the member's
   bank, the Practice Benchmark and the free twelve on Where You Stand, which
   writes the same markup. The top line: the format, the count, the progress
   line, the run as squares. The rail: the subject, the format, the tier, the
   target, the keys and the loop. The question: its first sentence as its
   heading, its paragraphs, its ask and its call, the answer rows, the
   confidence row on a rule, Submit. Then the graded card: the same question
   locked with its marks and its flag, the line to remember as a card, the
   Why rows, Read the full explanation, the explanation as reading text with
   its first sentence as a heading. Nothing here is framed: the screen is the
   page's column, as the design draws it. */
.q-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); min-height: 64px; padding: var(--space-3) 0; border-bottom: var(--hair) solid var(--rule); }
.q-top .label { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: var(--lh-ui); color: var(--ink); }
.q-count { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 500; line-height: var(--lh-ui); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.progress { display: block; flex: 1 1 8rem; height: 3px; max-width: 24rem; border-radius: var(--r-round); background: var(--rule); overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: var(--r-round); background: var(--accent); transition: width .28s ease; }
.q-top .q-tail { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.q-top .sample-tag { margin-left: 0; }
/* the run as squares: one per question, hollow until answered; the current
   one lit; answered quietly during a member run; in its verdict colour where
   verdicts are known (the squares' states are the set screen's, section 18
   of _system-app.css draws them for the lists; these are the small ones) */
.q-squares { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.q-squares .sq { width: 20px; height: 20px; border-radius: 4px; border: var(--hair) solid var(--rule-strong); background: transparent; }
.q-squares .sq.is-current { border: var(--stroke) solid var(--accent); }
.q-squares .sq.is-done { background: var(--surface-3); border-color: var(--rule-strong); }
.q-squares .sq.is-full { background: var(--green-bar); border-color: var(--green-bar); }
.q-squares .sq.is-part { background: var(--gold); border-color: var(--gold); }
.q-squares .sq.is-sw { background: var(--red); border-color: var(--red); }
.q-squares .sq.is-uw { background: color-mix(in srgb, var(--red) 42%, transparent); border-color: color-mix(in srgb, var(--red) 42%, transparent); }
.q-squares .sq.is-sure::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 7px; pointer-events: none; }
.q-squares .sq { position: relative; display: inline-block; padding: 0; flex: none; }
.q-squares a.sq, .q-squares button.sq { cursor: pointer; }
.q-squares span.sq { cursor: default; }
/* the two columns: the rail and the question */
.q-screen { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 var(--space-6); padding-top: var(--space-6); }
.q-rail { display: grid; gap: var(--space-2); align-content: start; padding-right: var(--space-5); border-right: var(--hair) solid var(--rule); color: var(--ink-2); }
.q-rail .ic { width: 22px; height: 22px; margin-bottom: var(--space-2); color: var(--ink-3); }
.q-subject { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; line-height: var(--lh-head); color: var(--ink); }
.q-rail .label { display: block; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: var(--lh-ui); color: var(--ink-3); }
.q-rail .q-rail-tier { margin-top: var(--space-3); font-weight: 600; color: var(--ink); }
.q-rail .q-rail-sub { margin-top: 0; }
/* the keys, under a rule: a key cap and its word */
.q-keys { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hair) solid var(--rule); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-2); }
.q-keys span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.q-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding: 0 var(--space-2); background: var(--surface-2); border: var(--hair) solid var(--rule-strong); border-radius: var(--r-1); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-weight: 600; line-height: 1; color: var(--ink-2); }
@media (hover: none) { .q-keys { display: none; } }
/* the free page's rail: the subject with its format on one line, the keys
   as a row of caps */
.q-subject-free { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; line-height: var(--lh-ui); }
.q-keys-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.q-run { min-width: 0; }
/* the loop: four steps on a thread, the current one lit */
.q-loop { position: relative; display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: var(--hair) solid var(--rule); list-style: none; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); }
.q-loop::before { content: ""; position: absolute; left: 7px; top: calc(var(--space-4) + 20px); bottom: 14px; width: 1px; background: var(--rule); }
.q-loop li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: 28px; }
.q-loop li::before { content: ""; width: 10px; height: 10px; margin-left: 2px; border-radius: var(--r-round); border: var(--hair) solid var(--rule-strong); background: var(--field); }
.q-loop li.is-current { color: var(--ink); font-weight: 600; }
.q-loop li.is-current::before { background: var(--gold); border-color: var(--gold); }
.q-loop li.is-done { color: var(--ink-3); }
.q-loop li.is-done::before { background: var(--green-bar); border-color: var(--green-bar); }
@media (hover: none) { .q-loop { display: none; } }
/* the question */
.q-main { display: grid; gap: var(--space-5); min-width: 0; }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.45; color: var(--ink-2); }
.notice > span { flex: 1 1 16rem; }
.notice strong { color: var(--ink); font-weight: 600; }
.notice .pill { min-height: 36px; padding: 0 var(--space-4); font-size: var(--t-label); }
.notice-warn { border-left: 3px solid var(--red); }
.q-stems { display: grid; gap: var(--space-3); }
.qs-title { margin: 0; font-family: var(--serif); font-size: var(--t-2); font-weight: 400; line-height: var(--lh-head); color: var(--ink); max-width: 28em; }
.q-stem { margin: 0; font-family: var(--serif); font-size: var(--t-read); line-height: var(--lh-read); color: var(--ink); max-width: var(--measure); white-space: pre-wrap; }
.qs-ask { margin: var(--space-2) 0 0; font-family: var(--serif); font-size: var(--t-3); font-weight: 400; line-height: var(--lh-head); color: var(--ink); max-width: var(--measure); }
.q-call { margin: 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 400; line-height: var(--lh-ui); color: var(--ink-3); }
.q-meter { margin: 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.45; color: var(--ink-3); }
.q-meter b, .q-meter .v { font-weight: 600; color: var(--ink-2); }
/* the answer rows: the system's rows, as the design sizes them */
.answers { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.answer {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: var(--space-4);
  width: 100%; min-height: 64px; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3);
  font-family: var(--serif); font-size: var(--t-read); line-height: 1.45; color: var(--ink-2); text-align: left;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.answer > span:last-child { min-width: 0; }
.answer-badge {
  width: 36px; height: 36px; border-radius: var(--r-round); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair) solid var(--outline-selected); background: transparent;
  font-family: var(--serif); font-size: var(--t-ui); font-weight: 400; color: var(--ink-2); line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.answer-badge .ic { width: 16px; height: 16px; stroke-width: 2.2; }
.answer:hover, .answer.is-hover { background: var(--surface-3); border-color: var(--rule-strong); color: var(--ink); }
/* The chosen row: a full-strength edge, two pixels deep without moving the
   text (the second pixel is an inset shadow), over the filled badge. On the
   cream page the old 45% edge on a near-white fill did not read as chosen
   (Mae, November 8 2026). */
.answer.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 var(--hair) var(--accent); background: var(--surface-2); color: var(--ink); }
.answer.is-selected .answer-badge { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.answer.is-correct { background: var(--green-tint); border-color: rgba(104, 172, 132, .35); color: var(--ink); }
.answer.is-correct .answer-badge { background: var(--green); border-color: var(--green); color: var(--ink-on-fill); }
.answer.is-correct[aria-pressed="false"] .answer-badge { background: transparent; border-color: var(--green-bright); color: var(--green-bright); }
.answer.is-wrong { background: var(--red-tint); border-color: rgba(172, 88, 76, .40); color: var(--ink); }
.answer.is-wrong .answer-badge { background: var(--wash-miss); border-color: var(--red); color: var(--ink); }
.answer.is-dimmed { background: transparent; border-color: var(--rule-faint); color: var(--ink-4); cursor: default; }
.answer.is-dimmed .answer-badge { border-color: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-4); }
.answer:disabled { cursor: default; }
.answer:disabled:not(.is-correct):not(.is-wrong):not(.is-selected):not(.is-dimmed):hover { background: var(--surface); border-color: var(--rule); color: var(--ink-2); }
.answer:active:not(:disabled) { transform: translateY(1px) scale(.995); }
/* the word under a graded row says the verdict, never colour alone */
.answer .opt-mark { display: block; margin-top: var(--space-1); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; line-height: var(--lh-ui); color: var(--ink-3); }
.answer.is-correct .opt-mark { color: var(--green-bright); }
.answer.is-wrong .opt-mark { color: var(--red-text); }
a.answer { text-decoration: none; }
a.answer .scr-count { margin-left: var(--space-2); }
/* the confidence row, on a rule, and the Submit row */
.confidence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding-top: var(--space-5); border-top: var(--hair) solid var(--rule); }
.confidence .ask { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: var(--lh-ui); color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-5);
  background: var(--surface-3); border: var(--hair) solid var(--rule-strong); border-radius: var(--r-2);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 500; color: var(--ink); line-height: 1;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.pill:hover, .pill.is-hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
/* The chosen pill is filled with the action color, as a pressed button is. The
   thin gold wash it had was nearly the resting pill's own tan on the cream page:
   Mae tapped Unsure and could not see which of the two she had tapped. */
.pill.is-selected, .pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.pill:disabled, .pill.is-disabled { opacity: .45; cursor: not-allowed; }
.pill:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.pill-note { background: transparent; border-color: rgba(128, 212, 148, .45); color: var(--ink); cursor: default; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.submit-row .btn-primary { min-width: 11rem; }
.submit-row .hint { flex: 1 1 100%; }
.q-verdict { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.4; color: var(--ink-2); max-width: 24em; }
.q-verdict .pts { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; color: var(--gold-light); }
.q-verdict:empty { display: none; }
.hint { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.45; color: var(--ink-3); margin: 0; }
.hint:empty { display: none; }
/* the graded card: the same question locked, in two columns where there is
   room (the words at the left, the rows at the right), the review under it */
.review-card { display: grid; gap: var(--space-5); }
.review-card .comp-meta { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; line-height: var(--lh-ui); color: var(--ink-2); }
.review-card .comp-meta .points { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.review-card .comp-meta .points.is-missed b { color: var(--red-text); }
.review-card .comp-meta .points.is-part b { color: var(--gold-light); }
.result-flag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); margin: 0; justify-self: start; background: color-mix(in srgb, var(--gold) 22%, transparent); border: var(--hair) solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius: var(--r-2); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; line-height: 1; color: var(--gold-light); }
.qs-body { display: grid; gap: var(--space-5); }
.qs-text { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.qs-rows { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
@media (min-width: 961px) { .qs-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); } }
.review-card .explain { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: var(--hair) solid var(--rule); font-family: var(--serif); font-size: var(--t-read); line-height: var(--lh-read); color: var(--ink-2); }
.review-card .explain > p { max-width: var(--measure); }
/* the line to remember, as a card on a gold rule */
.keep-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-5); align-items: start; padding: var(--space-5) var(--space-6); background: var(--surface); border: var(--hair) solid var(--rule); border-left: 3px solid var(--gold); border-radius: var(--r-3); }
.keep-card .keep-label, .keep-card .label { display: block; margin-bottom: var(--space-2); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: var(--lh-ui); color: var(--gold-light); }
.keep-card .disc { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-3); font-weight: 400; line-height: 1.4; color: var(--ink); }
.keep-btn { min-height: 36px; padding: 0 var(--space-3); font-size: var(--t-label); white-space: nowrap; }
.keep-btn .ic { width: 14px; height: 14px; }
@media (max-width: 480px) { .keep-card { grid-template-columns: 1fr; } .keep-card .keep-btn { justify-self: start; } }
/* the review in layers: why the other answers are wrong, row by row, then
   the whole explanation */
.layers { display: grid; gap: var(--space-5); }
.layer-why { display: grid; gap: var(--space-3); }
.why { margin: 0; font-family: var(--serif); font-size: var(--t-2); font-weight: 400; line-height: var(--lh-head); color: var(--ink); }
.why-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--hair) solid var(--rule); }
.why-list li { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: var(--hair) solid var(--rule); }
.why-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: var(--space-3); align-items: start; width: 100%; min-height: var(--tap); padding: var(--space-2) 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--serif); font-size: var(--t-read); line-height: 1.5; color: var(--ink-2); transition: color .15s ease; }
.why-row:hover, .why-row[aria-expanded="true"] { color: var(--ink); }
.why-row .answer-badge { width: 28px; height: 28px; margin-top: 1px; font-size: var(--t-label); border-color: var(--rule-strong); color: var(--ink-2); }
.why-row::after { content: ""; width: 9px; height: 9px; margin: 9px 4px 0 0; justify-self: end; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s ease; }
.why-row[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 13px; }
.why-reason { display: grid; gap: var(--space-2); margin-left: calc(28px + var(--space-3)); padding-left: var(--space-4); border-left: var(--hair) solid var(--rule-strong); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.why-reason p { margin: 0; max-width: var(--measure); }
.why-reason[hidden] { display: none; }
.layer-ctl { display: flex; }
.layer-next { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--tap); padding: var(--space-2) 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; line-height: var(--lh-ui); color: var(--ink); }
.layer-next::after { content: ""; width: 9px; height: 9px; margin-right: 4px; justify-self: end; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s ease; }
.layer-next[aria-expanded="true"]::after { transform: rotate(-135deg); }
.layer-full { display: grid; gap: var(--space-4); }
.layer-full[hidden] { display: none; }
.explain-title { margin: 0; font-family: var(--serif); font-size: var(--t-3); font-weight: 400; line-height: var(--lh-head); color: var(--ink); max-width: none; }
.explain-body { margin: 0; max-width: none; font-family: var(--serif); font-size: var(--t-read); line-height: var(--lh-read); color: var(--ink-2); }
@media (min-width: 961px) { .explain-body { column-count: 2; column-gap: var(--space-7); } }
/* the lines after the explanation, and the tags */
.escore-line { margin: 0; padding-left: var(--space-4); border-left: var(--hair) solid var(--rule-strong); font-family: var(--serif); font-size: var(--t-read); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }
.escore-tag { display: block; margin-bottom: var(--space-1); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: var(--lh-ui); color: var(--ink-3); }
.escore-next { border-left-color: var(--gold); }
.escore-next .escore-tag { color: var(--gold-light); }
.trap-line { margin: 0; padding-top: var(--space-3); border-top: var(--hair) dashed var(--rule-strong); font-family: var(--serif); font-size: var(--t-read); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }
.trap-line b { color: var(--ink); font-weight: 600; }
.trap-line a { color: var(--ink); white-space: nowrap; }
.tagrow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tagrow .pill { min-height: 40px; padding: 0 var(--space-4); }
/* under 960 the squares take their own row under the count rather than
   breaking the top line part way */
@media (max-width: 960px) {
  .q-squares { flex-basis: 100%; margin-left: 0; }
}
/* the phone: one column; the rail folds to a line; the squares take their own row */
@media (max-width: 720px) {
  .q-top { min-height: 0; padding: var(--space-3) 0; gap: var(--space-3) var(--space-4); }
  .q-top .label { font-size: var(--t-label); }
  .q-count { font-size: var(--t-label); }
  .progress { flex-basis: 100%; max-width: none; order: 2; }
  .q-squares { flex-basis: 100%; margin-left: 0; order: 3; gap: 4px; }
  .q-squares .sq { width: 18px; height: 18px; }
  .q-screen { grid-template-columns: 1fr; gap: var(--space-4) 0; padding-top: var(--space-4); }
  .q-rail { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: center; padding: 0 0 var(--space-4); border-right: 0; border-bottom: var(--hair) solid var(--rule); }
  .q-rail .ic { grid-row: span 2; margin: 0; }
  .q-subject { font-size: var(--t-ui); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-weight: 600; }
  .q-rail .label { font-size: var(--t-label); }
  .q-rail .q-rail-tier { grid-column: 2; margin-top: 0; font-weight: 400; color: var(--ink-3); }
  .q-rail .q-rail-sub { grid-column: 2; }
  .q-keys, .q-loop { display: none; }
  .q-main { gap: var(--space-4); }
  /* a question screen drawn as a sample inside a .screen figure has no page
     gutter around it on a phone; it brings its own */
  .screen .q-screen { padding: 0 var(--space-4) var(--space-4); }
  .qs-title { font-size: var(--t-3); }
  .qs-ask { font-size: var(--t-ui); font-weight: 600; }
  .answer { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); font-size: var(--t-ui); }
  .answer-badge { width: 32px; height: 32px; font-size: var(--t-label); }
  .confidence .ask { flex: 1 0 100%; }
  .submit-row .btn-primary { min-width: 0; }
  .why { font-size: var(--t-3); }
}

/* ===========================================================================
   10. The result block · board 06
   A green-washed panel: the small ring, the verdict in the serif, the
   letter chosen, the confidence that was given, and a note on what it does
   to the record. The wash runs from the board's #1a2a24 at the top to the
   field at the foot. */
.result {
  display: grid; justify-items: center; gap: var(--space-3); text-align: center;
  padding: var(--space-6) var(--space-5);
  background: linear-gradient(180deg, rgba(56, 116, 84, .30), rgba(56, 116, 84, .06));
  border: var(--hair) solid rgba(56, 116, 84, .45); border-radius: var(--r-3);
}
.result.is-wrong { background: linear-gradient(180deg, rgba(132, 68, 64, .28), rgba(132, 68, 64, .05)); border-color: rgba(172, 88, 76, .45); }
.result-title { font-family: var(--serif); font-size: var(--t-2); line-height: var(--lh-head); color: var(--ink); }
.result-sub { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink-2); }
.result-note {
  margin-top: var(--space-2); padding: var(--space-4) var(--space-5);
  border: var(--hair) solid var(--rule); border-radius: var(--r-3); background: color-mix(in srgb, var(--field-deep) 35%, transparent);
  font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); text-align: left; max-width: 18em;
}

/* ===========================================================================
   11. The review panel · board 06
   Two tabs on a rule, the explanation as reading text, then "Why the other
   answers are incorrect:" with lettered rows. */
.review { display: grid; gap: var(--space-5); }
.tabs { display: flex; gap: var(--space-2); border-bottom: var(--hair) solid var(--rule); }
.tab {
  position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4);
  background: none; border: 0; border-bottom: var(--stroke) solid transparent; margin-bottom: -1px;
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 500; color: var(--ink-3); cursor: pointer;
}
.tab:hover, .tab.is-hover { color: var(--ink-2); }
.tab.is-active, .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
/* "Why the other answers are wrong" and its rows are the question screen's, section 9. */

/* ===========================================================================
   12. Numbered steps · board 07, 08
   A ring with the number, a title and a line, joined by the warm thread. */
.steps { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: start; }
.step-num {
  width: 48px; height: 48px; border-radius: var(--r-round);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: var(--hair) solid var(--gold-ring);
  font-family: var(--serif); font-size: var(--t-3); color: var(--ink); line-height: 1;
}
.step + .step::before { content: ""; position: absolute; left: 23.5px; top: calc(-1 * var(--space-5)); height: var(--space-5); width: var(--hair); background: var(--warm); }
.step-title { font-family: var(--serif); font-weight: 500; font-size: var(--t-3); line-height: var(--lh-head); color: var(--ink); margin-top: var(--space-2); }
.step-line { font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); margin-top: var(--space-1); max-width: 28em; }

/* ===========================================================================
   13. The practice loop · board 09
   Four cards in a row, each with a number badge, a title, a line and a
   small drawn figure. The figures draw with the palette and carry no words. */
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.loop-card { display: grid; gap: var(--space-4); align-content: start; background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3); padding: var(--space-5); }
.loop-head { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); align-items: start; }
.num-badge {
  width: 32px; height: 32px; border-radius: var(--r-round); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair) solid var(--gold-ring); background: var(--surface-2);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 700; color: var(--ink); line-height: 1;
}
.loop-title { font-family: var(--serif); font-weight: 500; font-size: var(--t-3); line-height: var(--lh-head); color: var(--ink); margin-top: 4px; }
.loop-line { font-family: var(--serif); font-size: var(--t-ui); line-height: 1.45; color: var(--ink-2); margin-top: var(--space-1); }
.loop-fig { width: 100%; height: auto; border-radius: var(--r-2); }
@media (max-width: 960px) { .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .loop { grid-template-columns: 1fr; } }

/* ===========================================================================
   14. A form field · not on the board
   A label over a 48px field on the second surface, with the cream button
   beside it; the error state draws the edge in red and a line under. */
.field { display: grid; gap: var(--space-2); }
.field-label { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; color: var(--ink-2); }
.input {
  width: 100%; min-height: 48px; padding: 0 var(--space-4);
  background: var(--surface-2); border: var(--hair) solid var(--rule-strong); border-radius: var(--r-2);
  font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.input::placeholder { color: var(--ink-4); }
.input:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.input:focus-visible { border-color: var(--accent); outline-offset: 2px; }
.field.is-error .input, .form-row.is-error .input { border-color: var(--red); }
.field-msg { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--red-text); }
.form-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: end; }
.form-row .field-msg { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
/* A select, drawn as the same field: the native arrow goes and a chevron in
   the second ink is drawn at the right, so the field matches the text field
   beside it on every platform. */
.select-wrap { position: relative; }
.select-wrap .input { appearance: none; -webkit-appearance: none; padding-right: calc(var(--space-4) * 2 + 12px); cursor: pointer; }
.select-wrap::after {
  content: ""; position: absolute; right: calc(var(--space-4) + 3px); top: calc(50% - 7px); width: 9px; height: 9px;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); pointer-events: none;
}

/* ===========================================================================
   15. The footer · the live site's words, the board's field
   The wordmark and a line, three columns of links, a legal note. */
.footer { border-top: var(--hair) solid var(--rule); padding: var(--space-7) 0 var(--space-6); display: grid; gap: var(--space-6); }
.footer-top { display: grid; grid-template-columns: minmax(12rem, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.footer-tag { font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); margin-top: var(--space-3); max-width: 18em; }
.footer-col h3 { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-3); }
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.footer-col a { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 28px; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.footer-legal { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.5; color: var(--ink-3); border-top: var(--hair) solid var(--rule); padding-top: var(--space-4); }
@media (max-width: 720px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > :first-child { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-top { grid-template-columns: 1fr; } }

/* A piece that needs the page's full width (the top bars) stacks its reference panels under it. */
.piece-wide .piece-grid { grid-template-columns: 1fr; }
.piece-wide .ref { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.piece-wide .ref > * { flex: 1 1 320px; max-width: 520px; }

/* ===========================================================================
   16. The frame a drawn screen sits in, and the words inside it
   The homepage and the pieces page draw the product's screens as figures.
   A figure says only the screen's own labels and words the site already
   shows in public; no bar ever stands in for text (the founder reads a grey
   bar as the generic AI look). A passage longer than its box shows its first
   lines and fades into the box's own color.
   The frame: the field inside a rule with 16px corners, and a small gold
   word at the top right of any screen whose numbers are not a real record. */
.screen { position: relative; background: var(--field); border: var(--hair) solid var(--rule); border-radius: var(--r-4); overflow: hidden; }
/* A question screen drawn as a sample on a reading page stands inside this
   frame, so it brings its own gutter at every width, the top line as well as
   the question. Until November 8 2026 only the question had one, and only on
   a phone, so the wordmark and the Sample tag sat on the frame's edge at
   every width. Named by the reading column: the member's runner wears the
   same class as its page column and must not be padded twice. */
.read-main .screen > .q-top { padding-left: var(--space-4); padding-right: var(--space-4); }
@media (min-width: 721px) {
  .read-main .screen > .q-top { padding-left: var(--space-5); padding-right: var(--space-5); }
  .read-main .screen > .q-screen { padding: 0 var(--space-5) var(--space-5); }
}
.sample-tag { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-light); white-space: nowrap; }
.q-top .sample-tag, .pt-bar .sample-tag, .bench-head .sample-tag, .set-meta .sample-tag { margin-left: auto; }
/* The words inside a screen: a passage at 16px in the serif, a note at 13px
   in the small figures, a document's or a set's title, a count beside a label. */
.scr-read { font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.scr-note { font-family: var(--serif); font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.scr-title { font-family: var(--serif); font-weight: 600; font-size: var(--t-ui); line-height: var(--lh-head); color: var(--ink); }
.scr-title-sm { font-family: var(--serif); font-weight: 600; font-size: var(--t-label); line-height: 1.3; color: var(--ink); }
.scr-count { font-weight: 500; color: var(--ink-3); }
/* A box that clips: the first lines show, the rest fades into the box's own
   color (--clip-bg names it). Four lines of 16px at 1.5, or six, plus the
   box's padding. */
.clip { position: relative; overflow: hidden; --clip-bg: var(--surface); }
.clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5rem; background: linear-gradient(180deg, color-mix(in srgb, var(--clip-bg) 0%, transparent), var(--clip-bg)); pointer-events: none; }
.clip-4 { max-height: 7.5rem; }
.clip-6 { max-height: 10.5rem; }
.response-box.clip { --clip-bg: var(--surface-2); }
.clip-news { --clip-bg: var(--surface-2); }
.scr-read b { font-weight: 600; color: var(--ink); }
/* A small button, as the runners draw Continue in the record's bar and
   Submit in the task's. */
.btn-sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--t-label); }
/* A check box, drawn: the scoring guide's Awarded column and the plan's
   done marks. On, it takes the correct badge's green. */
.check { width: 20px; height: 20px; flex: none; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; border: var(--hair) solid var(--rule-strong); background: transparent; color: var(--ink-on-fill); }
.check.is-on { background: var(--green); border-color: var(--green); }
.check .ic { width: 13px; height: 13px; stroke-width: 2.4; }
/* The runners' section call: "The matter", "Case material", "Writing
   assignment". The sans at 16px in the full ink, with a points figure in
   the label grey when the section carries one. */
.scr-call { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; line-height: var(--lh-ui); color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.scr-call .points { font-weight: 500; color: var(--ink-3); }
/* A component's strip: its number, its subject, its format, its points. */
.comp-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; line-height: var(--lh-ui); color: var(--ink-3); }
.comp-meta .points { margin-left: auto; color: var(--ink-2); }
/* A written answer's field: the label over a box on the raised surface. */
.response { display: grid; gap: var(--space-2); }
.response-box { min-height: 88px; padding: var(--space-3) var(--space-4); background: var(--surface-2); border: var(--hair) solid var(--rule-strong); border-radius: var(--r-2); display: grid; gap: var(--space-2); align-content: start; }
/* Compact answer rows, for a figure the size of a card: 13px text, a 24px badge. */
.answers-sm .answer { min-height: 40px; padding: var(--space-2) var(--space-3); grid-template-columns: 24px 1fr; font-size: var(--t-label); line-height: 1.35; }
.answers-sm .answer-badge { width: 24px; height: 24px; font-size: var(--t-min); }

/* ===========================================================================
   17. The question screen, six choices · board 04 and 05, and the practice
   runner (app/practice)
   The screen of 9 with six rows, two of them picked, the runner's own
   "Select two." call under the stem, and its confidence line, "Before you
   submit:", on the Sure and Unsure pills. */
/* .q-stems and .q-call are the question screen's, section 9. */

/* ===========================================================================
   18. The integrated set screen · the set runner (app/iqs)
   What the runner draws, in its order: the set's head with the components
   answered, the matter in a card, a component answered, a written component
   with its answer, new information arriving on a gold rule, the next
   component with its confidence line, and the bar that advances the record.
   The words are the Formats page's own exhibit. */
.set-screen { display: grid; gap: var(--space-4); padding: var(--space-5); align-content: start; }
.set-head { display: grid; gap: var(--space-3); }
.set-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
.set-progress { display: grid; gap: var(--space-2); }
.set-progress .label { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--ink-2); }
.set-progress .progress { max-width: none; width: 100%; }
.matter, .component { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3); }
.newinfo { display: grid; gap: var(--space-3); margin-left: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface-2); border: var(--hair) solid var(--rule); border-left: 3px solid var(--gold); border-radius: 0 var(--r-3) var(--r-3) 0; }
.newinfo .scr-call { color: var(--gold-light); }
.lockbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--hair) dashed var(--gold-ring); border-radius: var(--r-3); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; line-height: var(--lh-ui); color: var(--gold-light); }
@media (max-width: 720px) {
  .set-screen { padding: var(--space-4); gap: var(--space-4); }
  .matter, .component, .newinfo { padding: var(--space-4); }
  .newinfo { margin-left: var(--space-3); }
}

/* ===========================================================================
   19. The performance task screen · the task runner (app/pt)
   A bar with the task's name, the clock, Saved and Submit; two panes, the
   File and the Library in tabs on the left with a document under them, the
   writing on the right: the writing assignment, the response, then the
   scoring guide's line. The words are the Formats page's own exhibit. At
   phone width the panes stack, as the runner's do. */
.pt-screen { display: grid; align-content: start; }
.pt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); min-height: 64px; padding: var(--space-3) var(--space-5); border-bottom: var(--hair) solid var(--rule); }
.pt-id { display: grid; gap: var(--space-1); flex: 1 1 12rem; min-width: 0; }
.pt-timer { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-saved { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; color: var(--ink-3); }
.pt-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pt-pane { display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding: var(--space-5); }
.pt-pane + .pt-pane { border-left: var(--hair) solid var(--rule); }
.pt-docs { display: grid; gap: var(--space-4); }
.pt-doc { display: grid; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: var(--hair) solid var(--rule-faint); }
.pt-divider { height: var(--hair); background: var(--rule); }
.pt-guide { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); }
.pt-self { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.rubric { width: 100%; border-collapse: collapse; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-2); }
.rubric th { text-align: left; font-weight: 600; color: var(--ink-3); padding: var(--space-2); border-bottom: var(--hair) solid var(--rule-strong); }
.rubric td { padding: var(--space-3) var(--space-2); border-bottom: var(--hair) solid var(--rule); vertical-align: middle; }
.rubric .r { text-align: right; white-space: nowrap; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rubric .w-check { width: 4rem; }
.rubric tfoot td { border-bottom: 0; color: var(--ink-3); font-weight: 600; }
@media (max-width: 720px) {
  .pt-split { grid-template-columns: 1fr; }
  .pt-pane { padding: var(--space-4); }
  .pt-pane + .pt-pane { border-left: 0; border-top: var(--hair) solid var(--rule); }
  .pt-bar { padding: var(--space-3) var(--space-4); }
}

/* ===========================================================================
   20. The bench · board 03, and the dashboard (app/dashboard)
   What the dashboard draws: Your bench, then Today with the study plan's
   own three lines for a week's day, the ledger's four
   numbers in tiles under the dashboard's own heading, accuracy by subject
   with a bar per subject (green at 70 and over, gold under it, as 7 draws
   them), and Train my gaps. At phone width the two columns stack and every
   column of the table stays, the bar on its own line. */
.bench { display: grid; gap: var(--space-5); padding: var(--space-5); align-content: start; }
.bench-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.bench-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5) var(--space-6); align-items: start; }
.bench-col { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.today { display: grid; gap: var(--space-3); }
.todo { display: grid; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.todo li { display: flex; align-items: flex-start; gap: var(--space-3); }
.todo .check { margin-top: 2px; }
/* The ledger's head is the dashboard's own: the kicker, then its heading
   "What the record shows", which is also where a reader meets the word. */
.ledger-head { display: grid; gap: var(--space-1); margin: 0; }
.ledger-head .kicker { display: block; }
.ledger-title { font-family: var(--serif); font-weight: 500; font-size: var(--t-3); line-height: var(--lh-head); color: var(--ink); }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.ledger > div { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); background: var(--surface-2); border: var(--hair) solid var(--rule); border-radius: var(--r-3); }
.ledger b { font-family: var(--serif); font-size: var(--t-metric); font-weight: 400; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); }
.ledger .warn b { color: var(--red-text); }
.acc { display: grid; gap: 0; }
.acc .kicker { margin-bottom: var(--space-3); }
.acc-head, .acc-row { display: grid; grid-template-columns: minmax(7rem, 11rem) 4.5rem 5rem 3.2rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.acc-head .acc-lab { grid-column: span 2; }
.acc-pct { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.acc-head { padding-bottom: var(--space-2); border-bottom: var(--hair) solid var(--rule-strong); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 600; line-height: var(--lh-ui); color: var(--ink-3); }
.acc-row { padding: var(--space-2) 0; border-bottom: var(--hair) solid var(--rule-faint); }
.acc .n { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.acc-head .n { font-size: var(--t-label); color: var(--ink-3); }
.bench-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
@media (max-width: 960px) { .bench-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .bench { padding: var(--space-4); gap: var(--space-4); }
  /* Every column stays: the name and the three numbers on one line, the bar
     under them on its own line. A phone loses nothing the desktop shows. */
  .acc-head, .acc-row { grid-template-columns: minmax(0, 1fr) 3.3rem 3rem 3.2rem; gap: var(--space-2) var(--space-3); }
  .acc-head { font-size: var(--t-min); }
  .acc-head .n { font-size: var(--t-min); }
  .acc-head .acc-lab { grid-column: auto; }
  .acc-row .bar { grid-column: 1 / -1; }
}

/* ===========================================================================
   21. The figures · the public pages' data drawn as pieces of The Bench
   scripts/design/system-figures.mjs draws them to the designs Mae approved
   on November 3 2026 (docs/design/public/figures-pass-1/) and stamps them
   into the pages. One language for all of them, the member screens' own:
   a square is one thing, hollow until it has happened, green when right or
   full or filed, gold for part or in progress, red with a thin ring when
   wrong and marked Sure, faint red when wrong and Unsure, cream for today,
   the exam day or the one action; a ring is a score or a share of a whole;
   a card is one thing on the bench. Motion: one quiet entrance per figure,
   under a second, when the small observer on the page adds is-in; without
   it, and under prefers-reduced-motion, every figure draws complete. */
.figure { position: relative; display: grid; gap: var(--space-4); align-content: start; min-width: 0; padding: var(--space-5); background: var(--field); border: var(--hair) solid var(--rule); border-radius: var(--r-4); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-2); }
/* the browser's list and paragraph defaults, reset at no specificity so
   every piece's own rule wins */
:where(.figure) :is(ul, ol) { margin: 0; padding: 0; list-style: none; max-width: none; }
:where(.figure) li { margin: 0; max-width: none; }
:where(.figure) p { margin: 0; max-width: none; }
/* the frame on a page holds the card and its caption, under a rule; a card
   drawn on its own keeps its own frame */
.figure-wrap { margin: 0; display: grid; gap: var(--space-4); min-width: 0; padding: var(--space-5); background: var(--field); border: var(--hair) solid var(--rule); border-radius: var(--r-4); }
.figure-wrap > .figure { padding: 0; background: none; border: 0; border-radius: 0; }
/* the homepage's pair: the record and the trend as one picture */
.fig-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.fig-pair > .fig-trend { border-left: var(--hair) solid var(--rule); padding-left: var(--space-5); }
.fig-pair > .figure-cap { grid-column: 1 / -1; }
.fig-pair .rc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "c c"; gap: var(--space-1) var(--space-3); }
.fig-pair .rc-cells { --fc: 7px; }
.fig-pair .rc-cells .fc { --fc: 7px; }
.fig-pair .tr { justify-content: space-between; gap: var(--space-2); }
.fig-pair .tr .fr { width: 52px; height: 52px; }
.fig-pair .tr .fr > b { font-size: 15.6px; }
/* The head clips its own overflow so the sub-caption's separator dot, drawn in
   the column gap to its left, disappears when the sub-caption wraps to a line
   of its own (November 8 2026: on a phone 9 of 25 figure heads wrapped, and every one
   began its second line with a dangling dot). */
.figure-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--hair) solid var(--rule); overflow: hidden; }
.figure-head .kicker { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: var(--lh-ui); color: var(--ink); }
.figure-head .sample-tag { margin-left: auto; }
.figure-meta { position: relative; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 500; line-height: var(--lh-ui); color: var(--ink-3); }
.figure-meta::before { content: "\00b7"; position: absolute; top: 0; right: 100%; width: var(--space-3); text-align: center; color: var(--ink-4); }
/* One plain line at the top of a figure that says how to read it (Mae, November
   8 2026: "you have to clearly explain in human terms what each section is
   conveying"). The legend may follow it directly, before the marks it names. */
.figure-lead { margin: var(--space-4) 0 0; max-width: var(--measure); font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.figure-lead + .fg-legend { margin-top: var(--space-3); padding-top: 0; border-top: 0; }
.figure-lead + .fg-legend + * { margin-top: var(--space-5); }
.figure-cap { margin: 0; padding-top: var(--space-4); border-top: var(--hair) solid var(--rule); font-family: var(--serif); font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.figure-cap > span { display: block; max-width: var(--measure); }

/* the square: one thing, in the record's states */
.fc { --fc: 12px; position: relative; display: block; flex: none; width: var(--fc); height: var(--fc); padding: 0; border-radius: 3px; background: transparent; border: var(--hair) solid var(--rule-strong); box-sizing: border-box; font: inherit; color: inherit; }
.fc[data-s="f"] { background: var(--green-bar); border-color: var(--green-bar); }
.fc[data-s="p"] { background: var(--gold); border-color: var(--gold); }
.fc[data-s="w"] { background: var(--red); border-color: var(--red); }
.fc[data-s="u"] { background: color-mix(in srgb, var(--red) 42%, transparent); border-color: color-mix(in srgb, var(--red) 42%, transparent); }
.fc[data-s="x"] { background: var(--accent); border-color: var(--accent); }
.fc[data-s="d"] { background: color-mix(in srgb, var(--ink) 30%, transparent); border-color: transparent; }
.fc[data-s="q"] { background: var(--surface-3); border-color: var(--surface-3); }
.fc[data-s="s"] { background: var(--gold); border-color: var(--gold); }
.fc[data-s="r"] { border-color: var(--gold); }
.fc[data-s="bm"] { border-radius: var(--r-round); border-width: 1.5px; border-color: var(--ink-2); }
.fc[data-r]::after { content: ""; position: absolute; inset: -3px; border: 1px solid color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 5px; pointer-events: none; }
.fc-row { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }

/* the ring: a share of the circle, the number inside */
.fr { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--size, 56px); height: var(--size, 56px); }
.fr svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fr-track { fill: none; stroke: var(--track); stroke-width: 11; }
.fr-arc { fill: none; stroke-width: 11; stroke-linecap: round; }
.fr[data-t="f"] .fr-arc { stroke: var(--green-bar); }
.fr[data-t="p"] .fr-arc { stroke: var(--gold); }
.fr[data-t="c"] .fr-arc { stroke: var(--accent); }
.fr > b { position: relative; font-family: var(--serif); font-weight: 400; font-size: calc(var(--size, 56px) * .3); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr > b small { font-size: max(12px, .7em); color: var(--ink-2); }
.fr-key { display: block; width: 12px; height: 12px; border-radius: var(--r-round); border: 2px solid var(--gold); }

/* the legend: a square in a state, a ring, or a sign, beside its word */
.fg-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-top: var(--space-3); border-top: var(--hair) solid var(--rule-faint); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); }
.fg-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.fg-legend .fc { --fc: 11px; }
.fg-legend b { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-weight: 700; color: var(--ink-2); }
.fg-legend em { font-style: normal; color: var(--ink-4); }
.fg-legend .fc[data-s="filed"] { background: var(--green-bar); border-color: var(--green-bar); }
.fg-legend .fc[data-s="missed"] { background: color-mix(in srgb, var(--red) 40%, transparent); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.fg-legend .fc[data-s="today"], .fg-legend .fc[data-s="exam"] { background: var(--accent); border-color: var(--accent); }
.fg-legend .fc[data-s="rest"] { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--rule-strong) 3px 4px); }

/* 1. the record: a row per subject, its squares wrapping to the right */
.rc { display: grid; gap: var(--space-3); }
.rc-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); grid-template-areas: "l c" "n c"; gap: 0 var(--space-4); align-items: start; }
.rc-l { grid-area: l; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 500; line-height: var(--lh-ui); color: var(--ink); }
.rc-n { grid-area: n; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rc-cells { grid-area: c; --fc: 8px; gap: 2px; align-self: center; }
.rc-cells .fc { --fc: 8px; border-radius: 2px; }
.rc-cells .fc[data-r]::after { inset: -2px; border-radius: 3px; }
.rc-sep { height: var(--hair); background: var(--rule); margin: var(--space-1) 0; }
.rc-big .rc-cells { --fc: 18px; gap: 6px; }
.rc-big .rc-cells .fc { --fc: 18px; border-radius: 4px; }

/* 2. the trend: five rings in a row */
.tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; }
.tr-run { display: grid; justify-items: center; gap: var(--space-2); }
.tr-d { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-2); white-space: nowrap; }

/* 3. what the payment covers: the exam days on one line of time */
.cv { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cv::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-6) + 12px); height: var(--hair); background: var(--rule-strong); }
.cv-adm { position: relative; display: grid; justify-items: center; gap: var(--space-3); min-width: 0; text-align: center; }
.cv-when { font-family: var(--serif); font-size: var(--t-3); line-height: var(--lh-head); color: var(--ink); }
.cv-days { display: flex; gap: 4px; padding: 0 var(--space-2); background: var(--field); }
.cv-days .fc { --fc: 24px; border-radius: 5px; }
.cv-dates { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); }

/* 4. the rollout: four rows of fifty-six, and the door's card */
.ro { display: grid; gap: var(--space-4); }
.ro-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.ro-l { display: grid; gap: 2px; }
.ro-l b { font-family: var(--serif); font-size: var(--t-ui); font-weight: 400; line-height: var(--lh-head); color: var(--ink); }
.ro-l span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); }
.ro-cells { --fc: 11px; }
.ro-cells .fc { --fc: 11px; }
.fc.is-open { box-shadow: 0 0 0 2px var(--field), 0 0 0 3.5px var(--accent); }
button.fc { cursor: pointer; }
button.fc:focus-visible { outline: var(--stroke) solid var(--focus); outline-offset: 3px; }
.ro-body { position: relative; display: grid; gap: var(--space-4); }
.ro-foot { position: relative; display: grid; gap: var(--space-3); min-height: 6.5rem; padding-top: var(--space-4); border-top: var(--hair) solid var(--rule); }
.ro-foot-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.ro-card { position: absolute; top: var(--space-4); right: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: center; min-width: 13rem; padding: var(--space-3) var(--space-4); background: var(--surface); border: var(--hair) solid color-mix(in srgb, var(--green-bar) 50%, transparent); border-radius: var(--r-3); }
.ro-card.is-placed { right: auto; left: var(--cx, 0px); }
.ro-pin { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: color-mix(in srgb, var(--accent) 70%, transparent); pointer-events: none; }
.ro-pin-h { width: 0; height: 1px; }
.ro-card .fc { --fc: 14px; grid-row: span 2; }
.ro-name { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; line-height: var(--lh-head); color: var(--ink); }
.ro-when { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }

/* 5. what the exam hands you: two pages of words on the same two minutes */
.pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.pm-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t r" "w r" "c c"; gap: var(--space-1) var(--space-3); padding: var(--space-4); background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3); }
.pm-t { grid-area: t; font-family: var(--serif); font-size: var(--t-3); line-height: var(--lh-head); color: var(--ink); }
.pm-w { grid-area: w; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
.pm-card .fr { grid-area: r; }
.pm-words { grid-area: c; --fc: 9px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--hair) solid var(--rule); }
.pm-words .fc { --fc: 9px; border-radius: 2px; }
.pm-count { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: baseline; margin: 0; padding-top: var(--space-3); border-top: var(--hair) solid var(--rule); max-width: none; }
.pm-count b { font-family: var(--serif); font-size: var(--t-2); font-weight: 400; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-count span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.45; color: var(--ink-2); }

/* 6. every pair on a select-two: the triangle of graded badges */
.pr { display: grid; gap: var(--space-2); padding: var(--space-2) 0; }
.pr-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pr-pair { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-2); border: var(--hair) solid var(--rule); }
.pr-pair b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-round); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-weight: 700; line-height: 1; }
.pr-pair[data-s="f"] { background: color-mix(in srgb, var(--green-bar) 22%, transparent); border-color: color-mix(in srgb, var(--green-bar) 60%, transparent); }
.pr-pair[data-s="f"] b { background: var(--green-bar); color: var(--ink-on-fill); }
.pr-pair[data-s="h"] { background: color-mix(in srgb, var(--gold) 20%, transparent); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.pr-pair[data-s="h"] b { background: var(--gold); color: var(--ink-on-fill); }
.pr-pair[data-s="z"] { background: color-mix(in srgb, var(--red) 16%, transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.pr-pair[data-s="z"] b { background: color-mix(in srgb, var(--red) 55%, transparent); color: var(--ink-2); }
.pr-key { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--hair) solid var(--rule); }
.pr-key p { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: 0; max-width: none; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: var(--lh-ui); color: var(--ink); }
.pr-key .fc[data-s="u"] { background: color-mix(in srgb, var(--red) 55%, transparent); border-color: transparent; }
/* the key stands before the pairs it names, under the figure's opening line */
.figure-lead + .pr-key { margin-top: var(--space-4); padding-top: 0; border-top: 0; }
.pr-key + .pr { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hair) solid var(--rule); }

/* 7. the clock: one hour, four arcs on it */
.ck { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; }
.ck-face { position: relative; width: min(100%, 22rem); margin: 0 auto; }
.ck-face svg { display: block; width: 100%; height: auto; }
.ck-ticks line { stroke: var(--rule-strong); stroke-width: 1; }
.ck-ticks line.is-q { stroke: var(--ink-3); stroke-width: 1.5; }
.ck-arc { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 115px 115px; }
.ck-t { font-family: var(--sans); font-size: 9px; fill: var(--ink-3); text-anchor: middle; }
.ck-t.ck-r { text-anchor: end; }
.ck-t.ck-l { text-anchor: start; }
.ck-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; line-height: 1.1; }
.ck-mid b { font-family: var(--serif); font-size: var(--t-2); font-weight: 400; line-height: 1.1; color: var(--ink); }
.ck-mid span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); color: var(--ink-3); }
.ck-key { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ck-key li { display: grid; grid-template-columns: 16px auto; gap: 2px var(--space-3); align-items: center; }
.ck-key i { grid-row: span 2; display: block; width: 16px; height: 4px; border-radius: var(--r-round); background: var(--accent); }
.ck-key b { font-family: var(--serif); font-size: var(--t-ui); font-weight: 400; color: var(--ink); line-height: 1.2; }
.ck-key span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }

/* 8. sure and wrong: a row per run, ten squares, the score as a ring */
.sw { display: grid; }
.sw-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: var(--hair) solid var(--rule-faint); }
.sw-row:first-child { border-top: 0; padding-top: 0; }
.sw-d { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink-2); }
.sw-cells { --fc: 26px; gap: 6px; }
.sw-cells .fc { --fc: 26px; border-radius: 6px; }
.sw-cells .fc[data-r]::after { inset: -4px; border-radius: 9px; }

/* 9. marks: a card per mark */
.mk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.mk { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: var(--space-4) var(--space-3); min-height: 7rem; padding: var(--space-4); background: var(--surface); border: var(--hair) solid var(--rule); border-radius: var(--r-3); }
.mk-l { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; line-height: var(--lh-head); color: var(--ink); }
.mk .fc { --fc: 12px; }
.mk-s { grid-column: 1 / -1; align-self: end; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.45; color: var(--ink-3); }
.mk-s.is-gold { color: var(--gold-light); }
.mk.is-ahead { background: transparent; border-style: dashed; border-color: var(--rule-strong); }
.mk.is-ahead .mk-l { color: var(--ink-2); }

/* 10. what the grader marks against: the counts, then thirty stacks */
.gr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--hair) solid var(--rule); }
.gr-stat { display: grid; gap: var(--space-1); }
.gr-stat b { font-family: var(--serif); font-size: var(--t-2); font-weight: 400; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.gr-stat span { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); }
.gr-cols { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; align-items: end; padding-top: var(--space-2); }
.gr-col { display: flex; flex-direction: column-reverse; gap: 3px; min-width: 0; }
.gr-col .fc { --fc: auto; width: 100%; aspect-ratio: 1; height: auto; max-width: 18px; border-radius: 3px; }

/* 11. twelve weeks: a row per week */
.wk { display: grid; }
.wk-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 6.5rem 6rem 5rem; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: var(--hair) solid var(--rule-faint); }
.wk-head { padding-top: 0; border-top: 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
.wk-head .wk-n, .wk-head .wk-t { font: inherit; color: inherit; }
.wk-n { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
.wk-t { font-family: var(--serif); font-size: var(--t-ui); line-height: 1.3; color: var(--ink); }
.wk-row .fc { --fc: 16px; border-radius: 4px; }
.wk-row .fc-row { gap: 4px; }
/* the Benchmark is a circle in its row, as the opening line says */
.wk-row .fc[data-s="bm"] { border-radius: var(--r-round); }

/* 12. the docket: the calendar, one cell a day */
.fdk-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; max-width: none; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: var(--lh-ui); color: var(--ink-3); }
.fdk-stats b { font-family: var(--serif); font-size: var(--t-ui); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.fdk { display: grid; gap: 3px; }
.fdk-row { display: grid; grid-template-columns: minmax(8rem, 10rem) repeat(7, minmax(0, 1fr)); gap: 3px; align-items: stretch; }
.fdk-head { margin-bottom: var(--space-1); }
.fdk-h { display: block; text-align: center; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: var(--lh-ui); color: var(--ink-3); }
.fdk-w { display: grid; align-content: center; gap: 1px; padding-right: var(--space-2); min-width: 0; }
.fdk-w b { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-weight: 500; line-height: var(--lh-ui); color: var(--ink-3); }
.fdk-w span { font-family: var(--serif); font-size: var(--t-label); line-height: 1.25; color: var(--ink); }
.fdk-d { position: relative; display: grid; place-items: center; min-height: 32px; border-radius: 4px; background: transparent; border: var(--hair) solid var(--rule-strong); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-weight: 500; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fdk-d[data-s="filed"] { background: var(--green-bar); border-color: var(--green-bar); color: var(--ink-on-fill); }
.fdk-d[data-s="missed"] { background: color-mix(in srgb, var(--red) 40%, transparent); border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--ink); }
.fdk-d[data-s="today"] { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.fdk-d[data-s="rest"] { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--rule) 4px 5px); border-color: var(--rule); }
.fdk-d[data-s="exam"] { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); }
.fdk-d[data-s="blank"] { background: transparent; border-color: transparent; }
.fdk-d[data-b]::after { content: "B"; position: absolute; right: 2px; top: 1px; font-size: 8px; font-weight: 700; line-height: 1; color: currentColor; opacity: .85; }

/* 13. the seven checks: seven gates on a line, the reader at the end */
.ld { position: relative; display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ld::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--rule-strong); }
.ld-step, .ld-end { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.ld-gate { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--green-bar); }
.ld-gate::after { content: ""; width: 10px; height: 10px; border-radius: 2px; border: 2px solid var(--ink-on-fill); }
.ld-gate.is-end { background: var(--accent); }
.ld-gate.is-end::after { content: none; }
.ld-t { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.35; color: var(--ink); }
.ld-t b { font-weight: 700; }

/* 14. what the checks measured: the field, the four stacks, the ring */
.chk-all { display: grid; gap: var(--space-3); }
.chk-all p { margin: 0; max-width: none; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.45; color: var(--ink); }
.chk-all b { font-weight: 700; }
.chk-field { --fc: 6px; gap: 2px; }
.chk-field .fc { --fc: 6px; border-radius: 1px; }
.chk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: end; padding-top: var(--space-4); border-top: var(--hair) solid var(--rule); }
.chk-spread { display: grid; gap: var(--space-3); }
.chk-cols { position: relative; display: flex; gap: var(--space-5); align-items: end; padding-top: var(--space-2); }
.chk-cols::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(1.9rem + var(--even) * 8px); height: var(--hair); background: var(--rule-strong); }
.chk-col { display: grid; justify-items: center; gap: var(--space-1); }
.chk-stack { display: flex; flex-direction: column-reverse; gap: 2px; }
.chk-stack .fc { --fc: 6px; width: 10px; border-radius: 1px; }
.chk-col b { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 700; color: var(--ink); }
.chk-n { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
.chk-spread p, .chk-ring p { margin: 0; max-width: none; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.45; color: var(--ink-3); }
.chk-ring { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }

/* 15. what the bank holds: the lists' own doors */
.tl { display: grid; gap: var(--space-3); }
.tl-l { margin: 0; max-width: none; font-family: var(--serif); font-size: var(--t-ui); line-height: 1.4; color: var(--ink); }
.tl-big { --fc: 22px; gap: 6px; }
.tl-big .fc { --fc: 22px; border-radius: 5px; }
.tl-big + .tl-l { margin-top: var(--space-2); }

/* 16 and 19. an index: the row is the link, one square per entry */
.ix { display: grid; }
.ix-row { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) 2.5rem; gap: var(--space-4); align-items: center; min-height: var(--tap); padding: var(--space-2) 0; border-top: var(--hair) solid var(--rule-faint); color: inherit; text-decoration: none; }
.ix-row:first-child { border-top: 0; }
.ix-row:hover .ix-l, .ix-row:focus-visible .ix-l { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: var(--hair); }
.ix-row:hover .fc, .ix-row:focus-visible .fc { border-color: var(--accent); }
.ix-l { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.3; color: var(--ink); }
.ix-marks { --fc: 14px; gap: 4px; }
.ix-marks .fc { --fc: 14px; }
.ix-n { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

/* 17. July 2026: one square per applicant */
.rm-key { display: grid; gap: var(--space-1); }
.rm-key p { display: flex; align-items: center; gap: var(--space-3); margin: 0; max-width: none; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: 1.4; color: var(--ink); }
.rm-key em { font-style: normal; color: var(--ink-4); }
.rm { --fc: 6px; gap: 2px; padding-top: var(--space-2); }
.rm .fc { --fc: 6px; border-radius: 1px; }

/* 18. the readings: fifteen days on one line */
.rd { display: grid; gap: var(--space-3); }
.rd-ends { display: flex; justify-content: space-between; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
.rd-days { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
.rd-days .fc { --fc: auto; width: 100%; height: auto; aspect-ratio: 1; max-width: 40px; border-radius: 6px; display: grid; place-items: center; }
.rd-days .fc[data-m]::before { content: ""; width: 30%; height: 30%; border-radius: 2px; border: 2px solid var(--ink-on-fill); }
.rd-list { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) 0 0; list-style: none; border-top: var(--hair) solid var(--rule-faint); }
.rd-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); line-height: var(--lh-ui); color: var(--ink); }
.rd-list li span:first-child { color: var(--ink-3); }
.rd-list li.is-red span { color: var(--red-text); }

/* the entrance: only while armed, never under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .figure.is-armed .fg-pop { opacity: 0; transition: opacity .45s ease calc(var(--i, 0) * 1ms); }
  .figure.is-armed.is-in .fg-pop { opacity: 1; }
  .figure.is-armed .fg-wipe { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 1ms); }
  .figure.is-armed.is-in .fg-wipe { clip-path: inset(0 0 0 0); }
  .figure.is-armed .gr-col.fg-grow { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 1ms); }
  .figure.is-armed.is-in .gr-col.fg-grow { transform: none; }
}

/* the phone: every figure its own composition, not the desktop squeezed */
@media (max-width: 960px) {
  .mk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck { grid-template-columns: 1fr; }
  .ck-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .figure { padding: var(--space-4); gap: var(--space-4); }
  .figure-wrap { padding: var(--space-4); }
  .fig-pair { grid-template-columns: 1fr; }
  .fig-pair > .fig-trend { border-left: 0; padding-left: 0; border-top: var(--hair) solid var(--rule); padding-top: var(--space-4); }
  .rc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l n" "c c"; gap: var(--space-1) var(--space-3); }
  .rc-cells { --fc: 7px; }
  .rc-cells .fc { --fc: 7px; }
  .rc-big .rc-cells { --fc: 16px; gap: 4px; }
  .rc-big .rc-cells .fc { --fc: 16px; }
  .tr { justify-content: space-around; }
  .cv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv::before { content: none; }
  .ro-row, .ro-foot-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .ro-cells { --fc: 9px; }
  .ro-cells .fc { --fc: 9px; }
  .ro-foot { min-height: 0; }
  .ro-card { position: static; margin-top: var(--space-2); }
  .pm { grid-template-columns: 1fr; }
  .pm-count { grid-template-columns: 1fr; gap: var(--space-1); }
  .pr-row { gap: 4px; }
  .pr-pair { padding: 4px 6px; gap: 4px; }
  .pr-pair b { width: 20px; height: 20px; }
  .pr-key p { flex-direction: row; font-size: var(--t-label); }
  .sw-row { grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--space-3); }
  .sw-cells { --fc: 14px; gap: 3px; flex-wrap: nowrap; }
  .sw-cells .fc { --fc: 14px; border-radius: 3px; }
  .sw-cells .fc[data-r]::after { inset: -3px; border-radius: 5px; }
  .sw-row .fr { width: 48px; height: 48px; }
  .sw-row .fr > b { font-size: 14.4px; }
  .mk-list { grid-template-columns: 1fr 1fr; }
  .mk { min-height: 0; }
  .gr-cols { gap: 2px; }
  .gr-col { gap: 2px; }
  .wk-row { grid-template-columns: 4rem minmax(0, 1fr) 5.5rem 4.5rem; grid-template-areas: "n t t t" "s s k b"; gap: var(--space-2) var(--space-3); align-items: center; }
  .wk-row > :nth-child(1) { grid-area: n; }
  .wk-row > :nth-child(2) { grid-area: t; }
  .wk-row > :nth-child(3) { grid-area: s; }
  .wk-row > :nth-child(4) { grid-area: k; }
  .wk-row > :nth-child(5) { grid-area: b; }
  .wk-head { grid-template-areas: "s s k b"; }
  .wk-head > :nth-child(1), .wk-head > :nth-child(2) { display: none; }
  .wk-row .fc { --fc: 14px; }
  .wk-row .fc-row { gap: 3px; }
  .fdk-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .fdk-w { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: var(--space-2); padding: var(--space-2) 0 0; align-items: baseline; }
  .fdk-head .fdk-w { display: none; }
  .fdk-d { min-height: 28px; }
  .chk-two { grid-template-columns: 1fr; }
  .tl-big { --fc: 18px; gap: 4px; }
  .tl-big .fc { --fc: 18px; }
  .ix-row { grid-template-columns: minmax(0, 1fr) 2.5rem; gap: var(--space-1) var(--space-3); }
  .ix-row > .ix-l { grid-column: 1; grid-row: 1; }
  .ix-row > .ix-n { grid-column: 2; grid-row: 1; }
  .ix-row > .ix-marks { grid-column: 1 / -1; grid-row: 2; }
  .rm { --fc: 5px; gap: 1px; }
  .rm .fc { --fc: 5px; }
  .rd-days { gap: 2px; }
  .rd-days .fc { border-radius: 4px; }
}
@media (max-width: 480px) {
  .mk-list { grid-template-columns: 1fr; }
  .gr-stats { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   22. The frame · the top bar, the menu, the skip link, the wordmark, the
   marks list, the closing form and the footer, one copy for every page
   Moved here on November 3 2026 from the three copies the page stylesheets
   carried (public/_reading.css, _home.css, _practice.css), which had
   drifted: the free pages' phone footer had 29px rows where every other page
   had 44px, and the homepage's top bar had its own padding. The reading
   pages' copy, which twelve pages wore, is the one kept. The markup is
   stamped from landing.html by scripts/build_chrome.mjs on every page that
   carries it. */
:root { --bar-h: clamp(4.5rem, 6vw, 5.25rem); --bar-pad: clamp(1.5rem, 4.2vw, 3.75rem); --content: 1200px; --pad: clamp(1.5rem, 4vw, 3rem); }
.skip { position: absolute; top: var(--space-3); left: 50%; z-index: 100; transform: translate(-50%, -300%); padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--ink-on-accent); border-radius: var(--r-2); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-ui); font-weight: 600; text-decoration: none; }
.skip:focus-visible { transform: translate(-50%, 0); }
.site-head { position: relative; z-index: 3; }
.site-head .topbar { min-height: var(--bar-h); padding: 0 var(--bar-pad); gap: var(--space-5); }
.site-head .topbar-nav { gap: var(--space-3); }
.menu-btn { border: var(--hair) solid var(--rule-strong); }
.menu-btn[aria-expanded="true"] .ic-burger { display: none; }
.menu-btn:not([aria-expanded="true"]) .ic-x { display: none; }
@media (max-width: 1379px) {
  .site-head .topbar-nav { gap: var(--space-1); }
  .site-head .topbar-nav a { padding: 0 var(--space-2); }
  .site-head .topbar { gap: var(--space-4); }
}
@media (max-width: 1199px) {
  .site-head .topbar-nav, .site-head .topbar-right { display: none; }
  .site-head .menu-btn { display: inline-flex; }
}
.msheet { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: var(--field); border-top: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); padding: var(--space-2) var(--pad) var(--space-5); }
.msheet.open { display: block; position: fixed; top: var(--bar-h); bottom: 0; overflow-y: auto; }
/* While the menu is open the page under it holds still and the phone's bar steps aside. */
html.menu-open, html.menu-open body { overflow: hidden; }
/* The bar itself holds still too: a phone can scroll the page under an open
   menu whatever overflow says, and the bar with its close button went with
   it (cold read, Nov 8). Fixed while open, the sheet hangs from it. */
html.menu-open .site-head { position: fixed; top: 0; left: 0; right: 0; }
html.menu-open .scta { display: none; }
.msheet ul { list-style: none; margin: 0; padding: 0; }
.msheet a { display: grid; gap: 2px; padding: var(--space-3) 0; min-height: 56px; border-bottom: var(--hair) solid var(--rule-faint); text-decoration: none; font-family: var(--serif); font-size: var(--t-read); line-height: 1.3; color: var(--ink); }
.msheet li:last-child a { border-bottom: 0; }
.msheet .ms-num { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-3); }
@media (min-width: 1200px) {
  .msheet.open { display: none; }
}
.proof-h { font-family: var(--serif); font-weight: 500; font-size: var(--t-2); line-height: var(--lh-head); color: var(--ink); margin: 0 0 var(--space-5); }
.proof-note { font-family: var(--serif); font-size: var(--t-2); line-height: 1.3; color: var(--ink); margin: 0; padding: var(--space-6) 0 var(--space-7); border-bottom: var(--hair) solid var(--rule); }
.foot-capture { padding: var(--space-8) 0; }
.foot-capture.ruled { border-top: 0; }
.foot-capture-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5) var(--space-6); align-items: center; }
.foot-capture-in .title { max-width: 18em; font-size: var(--t-2); font-weight: 500; text-wrap: balance; }
.foot-capture-in .form-note { grid-column: 2; margin-top: 0; }
.footer-top { grid-template-columns: minmax(12rem, 1.4fr) repeat(3, minmax(0, 1fr)); }
.footer-col h3 { font-family: var(--serif); font-size: var(--t-2); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: var(--space-4); }
.footer-col ul { gap: var(--space-3); }
.footer-legal { font-size: var(--t-ui); }
@media (max-width: 720px) {
  .footer-col a { min-height: var(--tap); }
  .footer-col ul { gap: 0; }
  .site-head .wordmark { display: inline-flex; align-items: center; min-height: var(--tap); }
}
@media (max-width: 960px) {
  .foot-capture-in { grid-template-columns: 1fr; }
  .foot-capture-in .form-note { grid-column: 1; }
  .foot-capture-in .title { max-width: none; }
}
@media (max-width: 720px) {
  .proof-note { padding: var(--space-5) 0 var(--space-6); }
  .foot-capture { padding: var(--space-7) 0; }
  .footer-top { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-top > :first-child { grid-column: auto; }
  .footer-col { padding-top: var(--space-5); border-top: var(--hair) solid var(--rule); }
}
/* the footer's top and, on a phone, its wordmark as a tap target (every link
   in the footer is already 44px tall there) */
footer .wrap > .footer { padding-top: var(--space-8); }
@media (max-width: 720px) {
  footer .wordmark { display: inline-flex; align-items: flex-end; min-height: var(--tap); margin-top: calc(-1 * var(--space-5)); }
}

/* ===========================================================================
   THE HEADINGS, as the approved design draws them, and one rule on top:
   on any one page, every section heading is drawn the same.

   November 8 2026, in order. Mae at a desktop circled "What you can check"
   (28px) beside "Try three questions from the bank" (44px): "why are the
   heading sizes inconsistent??". That evening every section heading on the
   site was moved to 28px in the heavy cut. She saw it live and wrote "the
   design on this is awful", "what happened to the beautiful design", "this
   looks like a page made by someone who's never designed a website before".
   The design's large, light serif headings ARE the design; the answer to an
   inconsistency in it was to bring the odd heading up to the others, never to
   flatten them all. This block is that answer.

     the home page and the two practice pages
       a section heading            --t-1   400   the marks heading included
     the reading pages
       a section heading (h2)       --t-2   500   the marks heading and the
                                                  closing form's heading too
     every page
       a page's title (h1)          --t-1   400   (the home headline: display, 600)
       a sub-heading, a step        --t-3   500
       a figure's title             --t-3   400

   On a phone every section heading is the section step in the heavy cut, the
   version she approved there on a phone picture the same day.
   scripts/design/heading-scale.mjs measures it: on each page, at a phone and
   at a desktop width, every section heading must match the page's own. */
.sys.practice .proof-h { font-size: var(--t-1); font-weight: 400; letter-spacing: -.01em; }
@media (max-width: 720px) {
  .proof-h, .sys.practice .proof-h { font-size: var(--t-2); font-weight: 600; letter-spacing: 0; }
}

/* ===========================================================================
   The phone's type scale, one step down (Mae, November 3, on the live site:
   "the fonts overall are too big"). Reading text 16px, interface text 15px,
   the headings in step; labels keep their floors. Every page, one scale. */
@media (max-width: 720px) {
  :root {
    --t-display: 2.5rem;
    --t-1: 1.75rem;
    --t-2: 1.5rem;
    --t-3: 1.125rem;
    --t-stand: 1.1875rem;
    --t-read: 1rem;
    --t-ui: .9375rem;
    --t-metric: 1.75rem;
  }
}

/* ===========================================================================
   The footer on a phone (Mae, November 6: twenty links in three lists read
   as a long tail). The three lists in two columns, the long Read list down
   the left, Try and Standard stacked at the right; smaller heads, rows a
   thumb can hit. Every link stays: the footer is the one complete map. */
@media (max-width: 720px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) var(--space-5); }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-top > .footer-col:nth-child(2) { grid-row: 2 / span 2; }
  .footer-col h3 { font-size: var(--t-3); margin-bottom: var(--space-2); }
  .footer-col ul { gap: 0; }
  .footer-col a { font-size: var(--t-ui); min-height: 44px; }
}

/* 21b. THE BENCH figure (the homepage, under What you get), to the design
   of November 6 2026: three columns on a wide screen, the bank list full
   width over two columns on a phone. */
.fig-bench .figure-head { justify-content: space-between; }
.fig-bench .figure-meta { margin-left: auto; }
.fig-bench .figure-meta::before { content: none; }
.fig-bench .figure-meta b { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; color: var(--ink); margin-right: var(--space-1); }
.fig-bench .bf-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.fig-bench .bf-col + .bf-col { border-left: var(--hair) solid var(--rule); padding-left: var(--space-6); }
.fig-bench .bf-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.fig-bench .bf-t { font-family: var(--serif); font-size: var(--t-3); line-height: 1.4; color: var(--ink); }
.fig-bench .bf-n { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-2); }
.fig-bench .bf-sub { margin: var(--space-1) 0 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.4; color: var(--ink-3); }
.fig-bench .bf-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.fig-bench .bf-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--hair) solid var(--rule); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); color: var(--ink-2); }
.fig-bench .bf-dot { width: 7px; height: 7px; border-radius: var(--r-round); border: var(--hair) solid var(--rule-strong); }
.fig-bench .bf-count { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig-bench .bf-ninth { margin-top: var(--space-3); padding-top: var(--space-2); border-top: var(--hair) solid var(--rule); }
.fig-bench .bf-ninth li { border-top: 0; }
.fig-bench .bf-name small { display: block; font-size: var(--t-min); color: var(--ink-3); }
.fig-bench .bf-part + .bf-part { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--hair) solid var(--rule); }
.fig-bench .bf-sq { gap: 6px; margin-top: var(--space-3); max-width: calc(6 * 24px + 5 * 6px); }
.fig-bench .bf-sq .fc { --fc: 24px; border-radius: 4px; border-color: var(--rule-strong); }
.fig-bench .bf-doc, .fig-bench .bf-rec { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.fig-bench .bf-page { display: grid; gap: 6px; width: 64px; padding: 12px 10px; border: var(--hair) solid var(--rule-strong); border-radius: 3px; }
.fig-bench .bf-page i, .fig-bench .bf-marks i, .fig-bench .bf-lines i { display: block; height: 2px; background: var(--rule-strong); }
.fig-bench .bf-page i:nth-child(2) { width: 70%; }
.fig-bench .bf-page i:nth-child(4) { width: 50%; }
.fig-bench .bf-marks { display: grid; gap: 6px; width: 72px; }
.fig-bench .bf-marks i.is-on { background: var(--green-bar); }
.fig-bench .bf-marks i:nth-child(3) { width: 60%; }
.fig-bench .bf-rec .fc { --fc: 24px; border-radius: 4px; }
.fig-bench .bf-lines { display: grid; gap: 6px; flex: 1; }
.fig-bench .bf-lines i { background: color-mix(in srgb, var(--green-bar) 70%, transparent); }
.fig-bench .bf-lines i:nth-child(2) { width: 85%; }
.fig-bench .bf-lines i:nth-child(3) { width: 60%; }
.fig-bench .bf-rec-sub { margin-top: var(--space-3); }
@media (max-width: 720px) {
  .fig-bench .bf-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .fig-bench .bf-bank { padding-bottom: var(--space-5); border-bottom: var(--hair) solid var(--rule); }
  .fig-bench .bf-col + .bf-col { border-left: 0; padding-left: 0; }
  .fig-bench .bf-mid, .fig-bench .bf-right { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
  .fig-bench .bf-part + .bf-part { margin-top: 0; padding-top: 0; border-top: 0; }
  .fig-bench .bf-right { padding-top: var(--space-5); border-top: var(--hair) solid var(--rule); }
}

/* 21c. ONE SESSION (the method page, under Five things that actually work). */
.fig-session .ss-head { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; align-items: baseline; }
.fig-session .ss-k { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.fig-session .ss-head .ss-k:first-child { font-family: var(--serif); font-size: var(--t-3); color: var(--ink); }
.fig-session .ss-n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--r-round); border: var(--hair) solid var(--rule-strong); font-family: var(--sans); font-size: var(--t-min); font-style: normal; line-height: 1; color: var(--ink-2); }
/* Six to a row: the figure sits in the reading column (about 650px wide), where
   twelve 44px cells broke every subject name in half (Nov 8). Six gives each
   square about 100px, room for "Procedure" and "select-two" whole. */
.fig-session .ss-grid { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
.fig-session .ss-sub, .fig-session .ss-fmt { max-width: 100%; overflow-wrap: anywhere; }
.fig-session .ss-q { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.fig-session .ss-sq { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; border: var(--hair) solid var(--rule-strong); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); font-weight: 400; line-height: 1; color: var(--ink); }
.fig-session .ss-q[data-s="f"] .ss-sq { background: var(--green-bar); border-color: var(--green-bar); color: var(--ink-on-fill); }
.fig-session .ss-q[data-s="p"] .ss-sq { background: var(--gold); border-color: var(--gold); color: var(--ink-on-fill); }
.fig-session .ss-q[data-s="w"] .ss-sq { background: var(--red); border-color: var(--red); color: var(--ink-on-wrong); }
.fig-session .ss-q[data-s="u"] .ss-sq { background: color-mix(in srgb, var(--red) 42%, transparent); border-color: transparent; }
.fig-session .ss-q[data-r] .ss-sq::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid color-mix(in srgb, var(--ink) 70%, transparent); border-radius: 9px; }
.fig-session .ss-sub { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: 1.3; color: var(--ink-2); }
.fig-session .ss-fmt { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: 1.3; color: var(--ink-3); }
.fig-session .ss-totals { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--hair) solid var(--rule); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.fig-session .ss-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--hair) solid var(--rule); }
.fig-session .ss-sub2 { display: block; margin-top: var(--space-1); padding-left: 26px; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: 1.4; color: var(--ink-3); }
.fig-session .ss-sw-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.fig-session .ss-sw-list li { display: flex; gap: var(--space-3); align-items: baseline; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.4; color: var(--ink); }
.fig-session .ss-sw-list b { font-family: var(--serif); font-size: var(--t-3); font-weight: 400; line-height: 1.4; color: var(--red-text); }
.fig-session .ss-sw-list small { display: block; font-size: var(--t-min); color: var(--ink-3); }
.fig-session .ss-legend { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: 1.4; color: var(--ink-3); }
.fig-session .ss-legend i { width: 10px; height: 10px; border: var(--hair) solid var(--ink-2); border-radius: 3px; }
@media (max-width: 720px) {
  .fig-session .ss-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-2); }
  .fig-session .ss-foot, .fig-session .ss-sw-list { grid-template-columns: 1fr; }
  .fig-session .ss-head { flex-direction: column; align-items: flex-start; }
}
/* At the narrowest phones four columns are a pixel too tight for "Contracts"
   and "Civil Procedure" (the sweep's SPLIT rule at 320, November 8 2026). */
@media (max-width: 340px) {
  .fig-session .ss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 21d. QUESTION 1200 (the method page, under How the questions are made). */
.fig-question-record .qr-draft { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--hair) solid var(--rule); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.4; color: var(--ink-2); }
.fig-question-record .qr-checks { list-style: none; margin: 0; padding: 0; }
.fig-question-record .qr-checks li, .fig-question-record .qr-rel { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--hair) solid var(--rule); }
.fig-question-record .qr-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; background: color-mix(in srgb, var(--green-bar) 28%, transparent); border: var(--hair) solid var(--green-bar); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); font-style: normal; line-height: 1; color: var(--green-bright); }
.fig-question-record .qr-n.is-end { background: var(--green-bar); }
.fig-question-record .qr-q { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-label); line-height: 1.4; color: var(--ink); }
.fig-question-record .qr-q small { display: block; margin-top: 2px; font-size: var(--t-min); line-height: 1.4; color: var(--ink-3); }
.fig-question-record .qr-p { font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: 1.4; color: var(--ink-3); }
.fig-question-record .qr-rel { border-bottom: 0; padding-top: var(--space-5); }
.fig-question-record .qr-rel-t { font-family: var(--serif); font-size: var(--t-3); line-height: 1.4; color: var(--ink); }
.figure-cap small { display: block; margin-top: var(--space-1); font-family: var(--sans); font-variant-ligatures: no-common-ligatures; font-size: var(--t-min); line-height: 1.4; color: var(--ink-3); }