/* ==========================================================================
   MARKER'S COPY — The Separator Archive
   Paper is the ground. Ink is the words. The red pen is the only signal.
   STIX Two Text = words and marks.  Libre Franklin = the working type.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --paper:   oklch(97% .009 85);
  --paper-2: oklch(99.2% .004 90);
  --paper-3: oklch(94% .012 85);
  --sheet:   #fff;

  --ink:   oklch(20% .015 60);
  --ink-2: oklch(38% .014 60);
  --ink-3: oklch(47% .012 60);
  --ink-inv: oklch(97% .009 85);
  /* older name, still used by the JS */
  --ink-1: var(--ink);

  --rule: oklch(84% .012 80);
  --rule-2: var(--ink);

  --red:      oklch(54% .22 28);
  --red-ink:  oklch(47% .21 28);
  --red-hover: oklch(49% .22 28);
  --red-tint: oklch(54% .22 28 / .10);
  --on-red:   oklch(98% .006 85);
  --focus:    var(--red);

  --sev-brutal-mark:  oklch(44% .21 27);
  --sev-severe-mark:  oklch(55% .22 28);
  --sev-hard-mark:    oklch(65% .18 32);
  --sev-tricky-mark:  oklch(77% .11 36);
  --sev-routine-mark: oklch(70% .015 70);
  --sev-brutal-ink:  oklch(41% .20 27);
  --sev-severe-ink:  oklch(47% .21 28);
  --sev-hard-ink:    oklch(48% .17 33);
  --sev-tricky-ink:  oklch(46% .11 40);
  --sev-routine-ink: oklch(46% .012 70);
  --sev-brutal-tint:  oklch(44% .21 27 / .14);
  --sev-severe-tint:  oklch(55% .22 28 / .14);
  --sev-hard-tint:    oklch(65% .18 32 / .16);
  --sev-tricky-tint:  oklch(77% .11 36 / .22);
  --sev-routine-tint: oklch(70% .015 70 / .22);

  --scrim: oklch(20% .015 60 / .5);
  --shadow-pop: 0 1px 0 oklch(20% .015 60 / .08), 0 14px 32px -10px oklch(20% .015 60 / .28);
  --shadow-bar: 0 1px 0 oklch(20% .015 60 / .06), 0 6px 14px -8px oklch(20% .015 60 / .25);

  --font-serif: "STIX Two Text", "Times New Roman", Times, serif;
  --font-sans: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --font-ui: var(--font-sans);
  --font-source: var(--font-serif);
  --font-data: var(--font-sans);

  --t-micro: 12px;
  --t-data: 13px;
  --t-xs: 13px;
  --t-sm: 14px;
  --t-base: 17px;
  --t-lede: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --t-h4: 1.125rem;
  --t-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --t-h1: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  --t-hero: clamp(2.4rem, 1.2rem + 5vw, 6.5rem);
  --t-score: clamp(3.5rem, 2rem + 5vw, 6rem);

  --sp-1: .125rem; --sp-2: .25rem; --sp-3: .375rem; --sp-4: .5rem;
  --sp-5: .75rem;  --sp-6: 1rem;   --sp-7: 1.5rem;  --sp-8: 2rem;
  --sp-9: 3rem;    --sp-10: 4rem;  --sp-11: 6rem;
  --sp-section: clamp(3rem, 2rem + 4vw, 6rem);
  --sp-gutter: clamp(1rem, .5rem + 2vw, 3rem);
  --strip-w: 28px;

  --w-prose: 66ch;
  --w-content: 76rem;
  --w-wide: 96rem;

  --dur-1: 90ms; --dur-2: 160ms; --dur-3: 180ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ctl-h: 2.125rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(19% .012 60); --paper-2: oklch(23% .013 60); --paper-3: oklch(27% .014 60);
    --ink: oklch(94% .012 85); --ink-2: oklch(76% .012 80); --ink-3: oklch(64% .012 80); --ink-inv: oklch(19% .012 60);
    --rule: oklch(34% .012 60);
    --red: oklch(66% .21 26); --red-ink: oklch(72% .19 26); --red-hover: oklch(70% .21 26); --red-tint: oklch(66% .21 26 / .16); --on-red: oklch(15% .01 60);
    --sev-brutal-mark: oklch(56% .21 27); --sev-severe-mark: oklch(64% .21 28); --sev-hard-mark: oklch(70% .17 32); --sev-tricky-mark: oklch(78% .11 36); --sev-routine-mark: oklch(55% .015 70);
    --sev-brutal-ink: oklch(72% .19 26); --sev-severe-ink: oklch(74% .18 28); --sev-hard-ink: oklch(76% .15 34); --sev-tricky-ink: oklch(78% .10 40); --sev-routine-ink: oklch(72% .012 70);
    --sev-brutal-tint: oklch(56% .21 27 / .22); --sev-severe-tint: oklch(64% .21 28 / .2); --sev-hard-tint: oklch(70% .17 32 / .2); --sev-tricky-tint: oklch(78% .11 36 / .2); --sev-routine-tint: oklch(55% .015 70 / .22);
    --scrim: oklch(0% 0 0 / .6); --shadow-pop: 0 1px 0 oklch(0% 0 0 / .5), 0 18px 40px -10px oklch(0% 0 0 / .7); --shadow-bar: 0 1px 0 oklch(0% 0 0 / .5), 0 6px 14px -8px oklch(0% 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  --paper: oklch(19% .012 60); --paper-2: oklch(23% .013 60); --paper-3: oklch(27% .014 60);
  --ink: oklch(94% .012 85); --ink-2: oklch(76% .012 80); --ink-3: oklch(64% .012 80); --ink-inv: oklch(19% .012 60);
  --rule: oklch(34% .012 60);
  --red: oklch(66% .21 26); --red-ink: oklch(72% .19 26); --red-hover: oklch(70% .21 26); --red-tint: oklch(66% .21 26 / .16); --on-red: oklch(15% .01 60);
  --sev-brutal-mark: oklch(56% .21 27); --sev-severe-mark: oklch(64% .21 28); --sev-hard-mark: oklch(70% .17 32); --sev-tricky-mark: oklch(78% .11 36); --sev-routine-mark: oklch(55% .015 70);
  --sev-brutal-ink: oklch(72% .19 26); --sev-severe-ink: oklch(74% .18 28); --sev-hard-ink: oklch(76% .15 34); --sev-tricky-ink: oklch(78% .10 40); --sev-routine-ink: oklch(72% .012 70);
  --sev-brutal-tint: oklch(56% .21 27 / .22); --sev-severe-tint: oklch(64% .21 28 / .2); --sev-hard-tint: oklch(70% .17 32 / .2); --sev-tricky-tint: oklch(78% .11 36 / .2); --sev-routine-tint: oklch(55% .015 70 / .22);
  --scrim: oklch(0% 0 0 / .6); --shadow-pop: 0 1px 0 oklch(0% 0 0 / .5), 0 18px 40px -10px oklch(0% 0 0 / .7); --shadow-bar: 0 1px 0 oklch(0% 0 0 / .5), 0 6px 14px -8px oklch(0% 0 0 / .6);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--t-base);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 1.5px; text-underline-offset: .15em; }
a:hover { color: var(--red-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-8) 0 var(--sp-5); }
::selection { background: var(--red); color: var(--on-red); }

h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 700; margin: 0 0 var(--sp-4); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.015em; }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.01em; margin-top: var(--sp-section); }
h3 { font-size: var(--t-h3); line-height: 1.2; margin-top: var(--sp-8); }
h4 { font-size: var(--t-h4); line-height: 1.25; margin-top: var(--sp-7); }
h5 { font-size: var(--t-base); margin-top: var(--sp-6); }
strong, b, th { font-weight: 700; }
p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }
kbd { font-family: var(--font-sans); font-size: .8em; font-weight: 600; border: 1px solid var(--rule); border-bottom-width: 2px; padding: 0 .35em; background: var(--paper-2); color: var(--ink-2); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em; }
:not(pre) > code { background: var(--paper-3); padding: .06em .3em; overflow-wrap: anywhere; }
pre { background: var(--paper-2); border: 1px solid var(--rule); padding: var(--sp-5) var(--sp-6); overflow-x: auto; font-size: var(--t-data); line-height: 1.5; }
blockquote { margin: var(--sp-6) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); border-left: 2px solid var(--red); font-style: italic; font-size: var(--t-lede); line-height: 1.4; color: var(--ink); }
blockquote p:last-child { margin-bottom: 0; }

.mono, .num { font-family: var(--font-sans); font-variant-numeric: tabular-nums lining-nums; }
.micro { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); line-height: 1.35; }
.kicker { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin: 0 0 var(--sp-6); }
.kicker::before { content: ""; display: inline-block; width: 1.4em; height: 2px; background: var(--red); vertical-align: .3em; margin-right: .6em; }
.lede { font-size: var(--t-lede); line-height: 1.4; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.score { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-variant-numeric: lining-nums; color: var(--red-ink); }

/* the underlined phrase: the pen under the words that matter */
mark.hl, .hl { color: inherit; background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 100% .09em; padding-bottom: .04em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.js mark.hl { animation: penline 560ms var(--ease-out) 200ms both; }
@keyframes penline { from { background-size: 0 .09em; } to { background-size: 100% .09em; } }

/* ---------- layout ---------- */
.wrap { max-width: var(--w-content); margin-inline: auto; padding-inline: var(--sp-gutter); }
.wrap--wide { max-width: var(--w-wide); }
.prose { max-width: var(--w-prose); text-wrap: pretty; }
main { padding-block: 0 var(--sp-11); }
section { margin-top: var(--sp-section); }
section > h2:first-child { margin-top: 0; }
.sechead { display: flex; align-items: baseline; gap: var(--sp-5) var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--rule-2); }
.sechead h2 { margin: 0; }
.sechead .micro { margin-left: auto; }
.runfoot { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); text-align: right; margin-top: var(--sp-5); }
.runfoot a { color: var(--ink-2); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--sp-8) var(--sp-9); margin-top: var(--sp-9); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { border-top: 2px solid var(--rule-2); padding-top: var(--sp-5); min-width: 0; }
.panel > .micro { display: block; margin-bottom: var(--sp-5); }
.panel h3 { margin-top: 0; }
@media (max-width: 60rem) { .split, .split--even { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 2px solid var(--rule-2); transition: box-shadow var(--dur-2) var(--ease-out); }
.masthead.is-stuck { box-shadow: var(--shadow-bar); }
.masthead__in { max-width: var(--w-wide); margin-inline: auto; padding: var(--sp-4) var(--sp-gutter); display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap; min-height: 54px; }
.brand { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1; }
.brand:hover { color: var(--ink); }
.brand span { display: none; }
.nav { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); text-decoration: none; padding: var(--sp-2) 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-1); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.subjectbar { display: flex; gap: var(--sp-6); }
.subjectbar a { font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); text-decoration: none; padding: var(--sp-2) 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur-1); }
.subjectbar a:hover { color: var(--ink); }
.subjectbar a[aria-current="true"] { color: var(--red-ink); border-bottom-color: var(--red); }
.themebtn { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; background: transparent; border: 1px solid var(--ink-3); color: var(--ink-2); padding: var(--sp-2) var(--sp-4); cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.themebtn:hover { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
@media (max-width: 78rem) {
  .masthead__in { gap: var(--sp-5); }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: 0; width: 100%; min-width: 0; order: 3; padding-bottom: 2px; -webkit-overflow-scrolling: touch; gap: var(--sp-5); }
  .nav::-webkit-scrollbar { display: none; }
  .nav .themebtn { position: sticky; right: 0; background: var(--paper); box-shadow: -12px 0 10px -4px var(--paper); }
}
@media (max-width: 60rem) { .subjectbar { order: 2; margin-left: auto; gap: var(--sp-5); } }

/* ---------- hero, with the margin strip ---------- */
.hero { position: relative; isolation: isolate; margin-top: 0; padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2rem, 1.5rem + 2vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.hero > .wrap { padding-right: calc(var(--sp-gutter) + var(--strip-w)); }
.strip { position: absolute; top: 0; right: 0; bottom: 0; width: var(--strip-w); background: var(--ink); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.strip span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-inv); white-space: nowrap; padding: var(--sp-6) 0; }
.hero__h { font-size: var(--t-hero); line-height: .98; letter-spacing: -.02em; max-width: 18ch; margin: 0 0 var(--sp-7); }
.hero__fig { font-variant-numeric: lining-nums; }
.hero .lede { margin-bottom: var(--sp-7); }
.hero__cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.hero--doc { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.hero--doc h1 { max-width: 22ch; }
.hero--doc .lede { margin-top: var(--sp-5); }
.hero--slim { padding-block: var(--sp-8) var(--sp-7); }
.hero--slim h1 { margin: 0; font-size: var(--t-h2); max-width: 32ch; }
.hero--slim .lede { margin-top: var(--sp-4); max-width: 62ch; font-size: var(--t-base); }
@media (max-width: 48rem) { :root { --strip-w: 18px; } .strip span { font-size: 9px; } }

/* ---------- the ledger of figures ---------- */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 2px solid var(--rule-2); border-bottom: 1px solid var(--rule); margin-top: var(--sp-8); }
.ledger > div { padding: var(--sp-5) var(--sp-6) var(--sp-6) var(--sp-6); min-width: 0; border-left: 1px solid var(--rule); }
.ledger > div:first-child { border-left: 0; padding-left: 0; }
.ledger__k { display: block; font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.ledger__v { display: block; font-family: var(--font-serif); font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: lining-nums; margin-top: var(--sp-2); }
.ledger__v.score { font-style: italic; }
@media (max-width: 40rem) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .ledger > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ---------- the three subjects ---------- */
.subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--rule-2); margin-top: var(--sp-9); }
.sub { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: var(--sp-7) var(--sp-7) var(--sp-7) var(--sp-6); min-width: 0; border-left: 1px solid var(--rule); transition: background var(--dur-2); }
.sub:first-child { border-left: 0; padding-left: 0; }
.sub:hover { background: var(--paper-3); color: inherit; }
.sub__t { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 700; line-height: 1.1; }
.sub__n { font-family: var(--font-serif); font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 700; letter-spacing: -.02em; line-height: .95; margin: var(--sp-6) 0 var(--sp-3); font-variant-numeric: lining-nums; }
.sub__l { display: block; margin-bottom: var(--sp-7); }
.sub__worst { display: block; border-top: 1px solid var(--rule); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.sub__worst b { display: block; font-family: var(--font-serif); font-style: italic; font-size: var(--t-h1); font-weight: 700; line-height: 1; }
.sub__worst span { display: block; font-family: var(--font-sans); font-size: var(--t-xs); line-height: 1.4; color: var(--ink-2); margin-top: var(--sp-3); min-height: 2.8em; }
.sub__rate { height: 3px; background: var(--rule); margin-top: var(--sp-5); position: relative; }
.sub__rate i { position: absolute; inset: 0 auto 0 0; background: var(--red); }
.sub__go { margin-top: auto; padding-top: var(--sp-6); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 600; color: var(--red-ink); }
.sub:hover .sub__go { text-decoration: underline; }
@media (max-width: 60rem) {
  .subs { grid-template-columns: 1fr; }
  .sub { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--rule); }
  .sub:first-child { border-top: 0; }
  .sub__worst span { min-height: 0; }
}

/* ---------- severity: one pen, five pressures ---------- */
.badge { display: inline-block; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border: 1.5px solid; white-space: nowrap; line-height: 1.4; background: transparent; }
.sev-brutal  { color: var(--on-red); background: var(--sev-brutal-mark); border-color: var(--sev-brutal-mark); }
.sev-severe  { color: var(--sev-severe-ink);  border-color: var(--sev-severe-mark); }
.sev-hard    { color: var(--sev-hard-ink);    border-color: var(--sev-hard-mark); }
.sev-tricky  { color: var(--sev-tricky-ink);  border-color: var(--sev-tricky-mark); }
.sev-routine { color: var(--sev-routine-ink); border-color: var(--sev-routine-mark); }
.rail-brutal  { background: var(--sev-brutal-mark); }
.rail-severe  { background: var(--sev-severe-mark); }
.rail-hard    { background: var(--sev-hard-mark); }
.rail-tricky  { background: var(--sev-tricky-mark); }
.rail-routine { background: var(--sev-routine-mark); }
.tint-brutal  { background: var(--sev-brutal-tint); }
.tint-severe  { background: var(--sev-severe-tint); }
.tint-hard    { background: var(--sev-hard-tint); }
.tint-tricky  { background: var(--sev-tricky-tint); }
.tint-routine { background: var(--sev-routine-tint); }
.sev-ink-brutal { color: var(--sev-brutal-ink); }
.sev-ink-severe { color: var(--sev-severe-ink); }
.sev-ink-hard { color: var(--sev-hard-ink); }
.sev-ink-tricky { color: var(--sev-tricky-ink); }
.sev-ink-routine { color: var(--sev-routine-ink); }

/* ---------- the band ledger and the margin note ---------- */
.heatbar { display: flex; margin-top: var(--sp-5); border: 1px solid var(--rule-2); }
.heatbar__seg { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: var(--sp-4) var(--sp-5); overflow: hidden; border-left: 1px solid var(--rule-2); }
.heatbar__seg:first-child { border-left: 0; }
.heatbar__seg b { font-family: var(--font-serif); font-size: var(--t-h2); font-weight: 700; line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums; }
.heatbar__seg span { display: block; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; color: var(--ink-2); margin-top: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heatkey { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-5); }
.heatkey > span { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 500; color: var(--ink-2); }
.note { position: relative; border-top: 2px solid var(--rule-2); padding-top: var(--sp-5); }
.note > .micro { display: block; }
.punch__n { display: block; font-family: var(--font-serif); font-style: italic; font-size: var(--t-score); font-weight: 700; line-height: .95; letter-spacing: -.02em; margin: var(--sp-5) 0 0; font-variant-numeric: lining-nums; }
.punch__l { display: block; margin-top: var(--sp-3); font-size: var(--t-sm); color: var(--ink-2); font-style: italic; }
.punch__ref { display: block; margin-top: var(--sp-5); font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.punch__tag { display: block; margin-top: var(--sp-2); font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-2); }
.note a { position: absolute; inset: 0; z-index: 1; }
.note a:focus-visible { outline-offset: -3px; }
.note:hover { background: var(--paper-3); }
@media (max-width: 44rem) { .heatbar__seg span { display: none; } .heatbar__seg b { font-size: var(--t-h3); } }

/* ---------- ruled list ---------- */
.rlist { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-top: 2px solid var(--rule-2); }
.rlist li { border-bottom: 1px solid var(--rule); }
.rlist a { display: flex; align-items: baseline; gap: var(--sp-4) var(--sp-6); padding: var(--sp-6) var(--sp-3); text-decoration: none; color: inherit; flex-wrap: wrap; transition: background var(--dur-1); }
.rlist a:hover { background: var(--paper-3); color: inherit; }
.rlist a:hover .rlist__t { color: var(--red-ink); }
.rlist__t { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 700; flex: 0 1 auto; }
.rlist__d { font-family: var(--font-sans); color: var(--ink-2); font-size: var(--t-sm); flex: 1 1 18ch; }
.rlist__n { margin-left: auto; font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }

/* ---------- toolbar / filters ---------- */
.toolbar { position: sticky; top: var(--head-h, 54px); z-index: 40; background: var(--paper); border-bottom: 2px solid var(--rule-2); padding-block: var(--sp-4); margin-block: 0; }
.toolbar__in { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-4); align-items: center; }
.search { flex: 1 1 16rem; min-width: 0; display: flex; align-items: center; gap: var(--sp-4); border: 1px solid var(--ink-3); padding: 0 var(--sp-5); background: var(--paper-2); min-height: var(--ctl-h); transition: border-color var(--dur-1); }
.search:focus-within { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.search .micro { color: var(--ink-2); }
.search input { flex: 1; border: 0; background: transparent; color: var(--ink); font: inherit; font-family: var(--font-sans); font-size: var(--t-sm); outline: none; min-width: 0; height: calc(var(--ctl-h) - 2px); }
.search input::placeholder { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-3); font-family: var(--font-sans); font-size: var(--t-data); font-weight: 500; padding: 0 var(--sp-5); min-height: 1.85rem; border: 1px solid var(--ink-3); background: transparent; color: var(--ink); cursor: pointer; transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1); }
.chip:hover { background: var(--paper-3); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.chip[aria-pressed="true"] .chip__n { color: var(--ink-inv); opacity: .7; }
.chip__sw { width: 9px; height: 9px; flex: none; }
.chip__n { font-family: var(--font-sans); font-size: var(--t-micro); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.clearall { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; background: none; border: 1px solid transparent; color: var(--red-ink); cursor: pointer; padding: var(--sp-3) var(--sp-4); text-decoration: underline; text-decoration-color: var(--red); }
.clearall:hover { background: var(--paper-3); color: var(--ink); }
.count { font-family: var(--font-sans); font-size: var(--t-data); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; margin-left: auto; }
select.sel { font: inherit; font-family: var(--font-sans); font-size: var(--t-data); padding: 0 var(--sp-8) 0 var(--sp-4); min-height: var(--ctl-h); border: 1px solid var(--ink-3); background: var(--paper-2); color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px);
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
select.sel:hover { border-color: var(--ink); }
.switchlab { display: inline-flex; align-items: center; gap: var(--sp-4); font-family: var(--font-sans); font-size: var(--t-data); color: var(--ink-2); cursor: pointer; padding: 0 var(--sp-4); min-height: var(--ctl-h); border: 1px solid transparent; white-space: nowrap; }
.switchlab:hover { background: var(--paper-3); color: var(--ink); }
.switchlab:has(.selbox:checked) { color: var(--ink); }
.filters { padding-block: var(--sp-5) 0; display: grid; gap: var(--sp-4); }

/* ---------- the table ---------- */
.tablewrap { border-bottom: 2px solid var(--rule-2); margin-top: var(--sp-6); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); font-size: var(--t-data); background: var(--paper); }
table.data thead th { position: sticky; background-clip: padding-box; top: calc(var(--head-h, 54px) + var(--bar-h, 0px)); z-index: 30; background: var(--paper); font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 700; color: var(--ink-2); text-align: left; padding: var(--sp-4) var(--sp-4); border-bottom: 2px solid var(--rule-2); white-space: nowrap; }
table.data thead th[data-sort] { cursor: pointer; user-select: none; }
table.data thead th[data-sort]:hover { color: var(--ink); }
table.data thead th .arrow { opacity: 0; transition: opacity var(--dur-2); }
table.data thead th[aria-sort] .arrow { opacity: 1; }
table.data thead th[aria-sort] { color: var(--red-ink); }
table.data tbody td { border-bottom: 1px solid var(--rule); }
table.data td { padding: 5px var(--sp-4); vertical-align: middle; line-height: 1.3; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover > td { background: var(--paper-3); }
table.data tbody tr:focus-within > td { background: var(--paper-3); }
td.rail { padding: 0; width: 4px; position: relative; }
td.rail i { position: absolute; inset: 0; width: 4px; }
td.num, th.num { font-family: var(--font-sans); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.pctcell { position: relative; display: inline-block; min-width: 4.5rem; padding: 0 0 3px; vertical-align: middle; }
.pctcell i { position: absolute; left: 0; bottom: 0; height: 2px; }
.pctcell b { position: relative; display: block; font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; font-weight: 700; line-height: 1.05; font-variant-numeric: lining-nums; }
.pctcell .rail-brutal + b { color: var(--sev-brutal-ink); }
.pctcell .rail-severe + b { color: var(--sev-severe-ink); }
.pctcell .rail-hard + b { color: var(--sev-hard-ink); }
.pctcell .rail-tricky + b { color: var(--sev-tricky-ink); }
.pctcell .rail-routine + b { color: var(--sev-routine-ink); }
.qref { font-family: var(--font-sans); font-weight: 700; white-space: nowrap; }
.topiccell { max-width: 16rem; color: var(--ink-2); }
.rowbtn { font: inherit; font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; background: none; border: 1px solid var(--ink-3); color: var(--ink-2); cursor: pointer; padding: 2px 7px; white-space: nowrap; }
.rowbtn:hover { border-color: var(--ink); color: var(--ink); }
tr.detail > td { background: var(--paper-2); padding: var(--sp-6); cursor: default; }
tr.detail:hover > td { background: var(--paper-2); }
.detail__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
@media (max-width: 60rem) { .detail__grid { grid-template-columns: 1fr; } }
.qimg { background: var(--sheet); border: 1px solid var(--rule-2); padding: var(--sp-3); max-height: 72vh; overflow: auto; position: relative; }
.qimg img { display: block; width: 100%; }
.detail__sec { margin-bottom: var(--sp-6); }
.detail__sec p { font-size: var(--t-sm); margin-bottom: 0; }
.detail__sec p.micro { font-size: var(--t-micro); margin-top: var(--sp-3); }
.detail__sec > .micro { display: block; margin-bottom: var(--sp-3); }
.srcquote { font-family: var(--font-serif); font-style: italic; font-size: var(--t-base); line-height: 1.45; border-left: 2px solid var(--red); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); }
.distbar { display: flex; height: 22px; margin-top: var(--sp-4); overflow: hidden; border: 1px solid var(--rule); }
.distbar__seg { display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 1 auto; min-width: 6px; border-left: 1px solid var(--paper); }
.distbar__seg:first-child { border-left: 0; }
.distbar__seg b { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 700; color: var(--ink); white-space: nowrap; }
/* VCAA's own marks table, ruled as the report prints it */
table.marks { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: var(--t-data); margin-top: var(--sp-3); }
table.marks th, table.marks td { border: 1px solid var(--ink-2); padding: 3px var(--sp-4); text-align: center; font-variant-numeric: tabular-nums; }
table.marks th { font-family: var(--font-serif); font-weight: 700; text-align: left; white-space: nowrap; }
table.marks td.is-full { font-family: var(--font-serif); font-style: italic; font-weight: 700; color: var(--red-ink); background: var(--red-tint); }

/* the question cell is the control; one line per row */
.qcell { display: flex; align-items: baseline; gap: var(--sp-4); width: 100%; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; flex-wrap: wrap; }
.qcell__ref { font-family: var(--font-sans); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.qcell__meta { font-family: var(--font-sans); font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* mobile card fallback */
.cards { display: none; }
@media (max-width: 48rem) {
  .tablewrap { display: none; }
  .cards { display: block; border-top: 2px solid var(--rule-2); margin-top: var(--sp-5); }
  .card { display: grid; grid-template-columns: 4px auto 1fr; border-bottom: 1px solid var(--rule); background: var(--paper); }
  .card__body { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; font-family: var(--font-sans); font-size: var(--t-sm); color: inherit; cursor: pointer; padding: var(--sp-5); min-width: 0; }
  .card__top { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
  .card__topic { display: block; font-size: var(--t-xs); color: var(--ink-2); margin-top: var(--sp-2); }
  .card__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
  .card__k { display: block; }
  .card__v { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
  .card__grid > span:first-child .card__v { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--red-ink); }
  .card__pick { display: flex; align-items: flex-start; padding: var(--sp-6) 0 var(--sp-5) var(--sp-4); }
  .card.is-picked { background: var(--red-tint); }
  .toolbar { top: 0; position: static; }
  table.data thead th { top: 0; }
}

/* ---------- charts ---------- */
.chartrow { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 3.5rem; gap: var(--sp-5); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); font-family: var(--font-sans); font-size: var(--t-sm); }
.chartrow:last-child { border-bottom: 0; }
.chartrow .bar { height: 6px; background: var(--paper-3); position: relative; }
.chartrow .bar i { position: absolute; inset: 0 auto 0 0; }
.chartrow .num { text-align: right; font-weight: 700; }
@media (max-width: 40rem) { .chartrow { grid-template-columns: minmax(6rem, 8rem) 1fr 3rem; font-size: var(--t-xs); } }

/* ---------- content pages ---------- */
.doc { max-width: var(--w-prose); text-wrap: pretty; }
.doc .tablescroll { overflow-x: auto; margin: var(--sp-6) 0; }
.doc table { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: var(--t-data); }
.doc table th { font-family: var(--font-serif); font-size: var(--t-sm); text-align: left; color: var(--ink); border-bottom: 2px solid var(--rule-2); padding: var(--sp-4) var(--sp-5); white-space: nowrap; }
.doc table td { border-bottom: 1px solid var(--rule); padding: var(--sp-4) var(--sp-5); vertical-align: top; }
.doc ul, .doc ol { padding-left: 1.25em; }
.doc li { margin-bottom: var(--sp-3); }
.doc li::marker { color: var(--red-ink); font-family: var(--font-sans); font-size: .9em; }
.doc h2 { margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 2px solid var(--rule-2); }
.doc h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc img { border: 1px solid var(--rule); background: var(--sheet); }
.doc { min-width: 0; overflow-wrap: break-word; }
blockquote, .srcquote, .callout { overflow-wrap: break-word; }
.doclayout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-9); align-items: start; margin-top: var(--sp-8); }
@media (max-width: 64rem) { .doclayout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }
.toc { position: sticky; top: calc(var(--head-h, 54px) + 1.5rem); max-height: calc(100vh - var(--head-h, 54px) - 3rem); overflow-y: auto; font-family: var(--font-sans); font-size: var(--t-xs); border-left: 1px solid var(--rule); padding-left: var(--sp-5); }
.toc > .micro { display: block; margin-bottom: var(--sp-4); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: var(--sp-3); line-height: 1.35; }
.toc li.lvl3 { padding-left: var(--sp-5); font-size: var(--t-micro); }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--red-ink); }
@media (max-width: 64rem) { .toc { position: static; max-height: none; border-left: 0; border-top: 2px solid var(--rule-2); padding: var(--sp-5) 0 0; } }

.callout { background: var(--paper-2); border: 1px solid var(--ink-2); padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0; font-size: var(--t-sm); font-family: var(--font-sans); }
.callout .micro { display: block; margin-bottom: var(--sp-3); color: var(--ink); }
p.callout { display: block; }

/* ---------- footer ---------- */
.foot { border-top: 2px solid var(--rule-2); padding-block: var(--sp-8) var(--sp-9); margin-top: var(--sp-11); font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-3); }
.foot a { color: var(--ink-2); }
.foot__brand { font-family: var(--font-serif); font-size: var(--t-base); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-5); }

/* ---------- reveal ---------- */
.reveal { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: var(--sp-5) 0 0; }
.reveal__btn { display: flex; align-items: center; gap: var(--sp-4); width: 100%; padding: var(--sp-5) 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.reveal__btn::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: var(--red); color: var(--on-red); font-size: 15px; line-height: 1; flex: none; font-weight: 700; }
.reveal__btn[aria-expanded="true"]::before { content: "\2212"; }
.reveal__btn:hover { color: var(--red-ink); }
.reveal__body { padding-bottom: var(--sp-5); animation: revealIn var(--dur-2) var(--ease-out); }
.reveal__body > .detail__sec:first-child { margin-top: 0; }
@keyframes revealIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- published answer figures ---------- */
.ansimg { margin: 0 0 var(--sp-4); padding: var(--sp-4); background: var(--sheet); border: 1px solid var(--rule-2); max-height: 60vh; overflow: auto; }
.ansimg img { display: block; max-width: 100%; margin-inline: auto; }
.ansimg__cap { margin: calc(var(--sp-2) * -1) 0 0; }
@media print { .ansimg { max-height: none; } }

/* ---------- answers recreated as markup ---------- */
.ansmk { background: var(--paper-2); border: 1px solid var(--rule-2); padding: var(--sp-5) var(--sp-6); overflow-x: auto; }
.ansmk > *:first-child { margin-top: 0; }
.ansmk > *:last-child { margin-bottom: 0; }
.mtx { display: inline-flex; align-items: stretch; margin: var(--sp-2) .15em; vertical-align: middle; }
.mtx::before, .mtx::after { content: ""; width: .42em; flex: none; border: 1.5px solid var(--ink); }
.mtx::before { border-right: 0; }
.mtx::after { border-left: 0; }
.mtx table { border-collapse: collapse; margin: 0 .18em; }
.mtx td, .mtx th { padding: .16em .5em; text-align: center; font-family: var(--font-serif); font-size: var(--t-sm); font-variant-numeric: lining-nums; }
.mtx th { font-style: italic; font-weight: 400; color: var(--ink-3); }
.eqn { font-family: var(--font-serif); font-size: var(--t-base); line-height: 1.7; font-variant-numeric: lining-nums; margin: var(--sp-3) 0; }
.eqn sub, .eqn sup { font-size: .78em; }
table.anstable { border-collapse: collapse; font-family: var(--font-sans); font-size: var(--t-data); margin: var(--sp-3) 0; }
table.anstable th { font-family: var(--font-serif); font-size: var(--t-sm); font-weight: 700; color: var(--ink); text-align: left; border-bottom: 2px solid var(--rule-2); padding: var(--sp-3) var(--sp-5); white-space: nowrap; }
table.anstable td { border-bottom: 1px solid var(--rule); padding: var(--sp-3) var(--sp-5); font-variant-numeric: tabular-nums; }
.origtoggle { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; background: none; border: 0; color: var(--red-ink); cursor: pointer; padding: var(--sp-3) 0 0; text-decoration: underline; text-decoration-color: var(--red); }
.origtoggle:hover { color: var(--ink); }

/* ---------- a11y utilities ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skiplink { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--red); color: var(--on-red); padding: var(--sp-4) var(--sp-6); font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 700; }
.skiplink:focus { left: var(--sp-gutter); top: var(--sp-4); }
button.sortbtn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-3); }
button.sortbtn:hover { color: var(--ink); }

/* ---------- applied-filter echo ---------- */
.echo { margin-top: var(--sp-4); }
.token { display: inline-flex; align-items: baseline; gap: var(--sp-3); cursor: pointer; background: var(--paper-3); border: 1px solid var(--rule); padding: var(--sp-2) var(--sp-4); font-family: var(--font-sans); font-size: var(--t-data); color: var(--ink); }
.token:hover { border-color: var(--ink-2); }
.token__k { font-size: var(--t-micro); color: var(--ink-3); }
.token__x { color: var(--ink-3); }
.token:hover .token__x { color: var(--red-ink); }

/* ---------- empty state ---------- */
.empty { padding: var(--sp-9) var(--sp-5); max-width: 52ch; }
.empty__h { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 700; margin: 0 0 var(--sp-4); }
.empty .chip { margin-top: var(--sp-5); }
.emptyrow > td { cursor: default; }

/* ==========================================================================
   The study view — the whole screen is the marked paper
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 80; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; animation: studyIn var(--dur-3) var(--ease-out); }
.drawer__panel { min-height: 100%; display: flex; flex-direction: column; }
.drawer__panel:focus { outline: none; }
@keyframes studyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.drawer__head { position: sticky; top: 0; z-index: 3; flex: none; display: flex; align-items: center; gap: var(--sp-4) var(--sp-5); flex-wrap: wrap; padding: var(--sp-4) var(--sp-gutter); background: var(--paper); border-bottom: 2px solid var(--rule-2); min-height: 54px; }
.drawer__head.is-stuck { box-shadow: var(--shadow-bar); }
.drawer__title { margin: 0; font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; color: var(--ink); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study__pos { font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.drawer__nav { margin-left: auto; display: flex; gap: var(--sp-3); flex: none; align-items: center; }
.iconbtn { height: 30px; padding: 0 var(--sp-4); display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; background: transparent; border: 1px solid var(--ink-3); color: var(--ink-2); font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600; line-height: 1; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.iconbtn:hover:not([disabled]) { background: var(--ink); color: var(--ink-inv); border-color: var(--ink); }
.iconbtn[disabled] { opacity: .35; cursor: default; }
.iconbtn kbd { border: 0; background: none; padding: 0; opacity: .7; font-weight: 500; color: inherit; }
.drawer__body { flex: 1 1 auto; width: 100%; max-width: var(--w-wide); margin-inline: auto; padding: var(--sp-7) var(--sp-gutter) var(--sp-10); display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-8) var(--sp-9); align-items: start; }
.study__doc { min-width: 0; }
.study__doc .qimg { max-height: none; overflow: visible; padding: var(--sp-5); }
.study__doc .qimg img { max-width: 60rem; margin-inline: auto; }
.study__doc > .micro { display: block; margin-top: var(--sp-4); }
.study__side { position: sticky; top: calc(var(--study-bar, 54px) + var(--sp-6)); max-height: calc(100dvh - var(--study-bar, 54px) - var(--sp-8)); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--sp-2); }
.study__side:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dfig { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--rule); }
.dfig__q { display: block; font-family: var(--font-serif); font-size: var(--t-h2); font-weight: 700; line-height: 1.05; }
.dfig__w { display: block; font-family: var(--font-sans); font-size: var(--t-xs); color: var(--ink-2); margin-top: var(--sp-2); }
.dfig__n { display: block; font-family: var(--font-serif); font-style: italic; font-size: var(--t-score); font-weight: 700; line-height: .95; letter-spacing: -.02em; font-variant-numeric: lining-nums; margin: var(--sp-6) 0 var(--sp-3); }
.dfig__l { margin: 0; font-size: var(--t-sm); color: var(--ink-2); display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.dstats { margin: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); }
.dstats > div { display: flex; justify-content: space-between; gap: var(--sp-5); align-items: baseline; padding: var(--sp-3) 0; font-family: var(--font-sans); font-size: var(--t-sm); }
.dstats > div + div { border-top: 1px solid var(--rule); }
.dstats .micro { flex: none; }
.dstats .num, .dstats span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.study__side .detail__sec { margin-top: var(--sp-6); margin-bottom: 0; }
.study__side .reveal { margin-top: var(--sp-6); }
body.is-drawer-open { overflow: hidden; }
@media (max-width: 60rem) {
  .drawer__body { grid-template-columns: 1fr; gap: var(--sp-7); }
  .study__side { display: contents; }
  .study__rail { order: 1; }
  .study__doc { order: 2; }
  .study__ans { order: 3; }
  .dfig__n { font-size: clamp(3rem, 12vw, 4.5rem); }
  .drawer__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4) var(--sp-5); align-items: center; }
  .drawer__title { grid-column: 2; grid-row: 1; }
  .drawer__head > label { grid-column: 3; grid-row: 1; }
  .study__pos { grid-column: 1; grid-row: 2; }
  .drawer__nav { grid-column: 2 / 4; grid-row: 2; justify-self: end; margin-left: 0; }
  .study__doc .qimg { margin-inline: calc(var(--sp-gutter) * -1); padding: var(--sp-2); border-left: 0; border-right: 0; }
}

/* ---------- narrow screens: filters are one scrolling row ---------- */
@media (max-width: 48rem) {
  .toolbar__in { gap: var(--sp-3); }
  .toolbar__in .sel { flex: 1 1 8rem; min-width: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-2); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip { flex: none; scroll-snap-align: start; }
  .echo { flex-wrap: wrap; overflow: visible; }
  .count { margin-left: 0; }
}

/* ==========================================================================
   Selection, export, and the shared control surface
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-4); font-family: var(--font-sans); font-size: var(--t-data); font-weight: 600; line-height: 1; padding: 0 var(--sp-6); min-height: var(--ctl-h); border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.btn:hover { background: var(--ink); color: var(--ink-inv); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); color: var(--on-red); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--paper-3); color: var(--ink); }
.btn--sm { font-size: var(--t-micro); padding: 0 var(--sp-5); min-height: 1.85rem; }
.btn--lg { min-height: 2.75rem; padding: 0 var(--sp-8); font-size: var(--t-sm); }
.btn__k { font-family: var(--font-sans); font-size: var(--t-micro); opacity: .7; }

/* ---------- checkbox ---------- */
.selbox { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 15px; height: 15px; border: 1.5px solid var(--ink-3); background: var(--paper-2); cursor: pointer; position: relative; transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.selbox:hover { border-color: var(--ink); }
.selbox:checked, .selbox:indeterminate { background: var(--red); border-color: var(--red); }
.selbox:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--on-red); border-width: 0 1.8px 1.8px 0; transform: rotate(42deg); }
.selbox:indeterminate::after { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 0; border-top: 1.8px solid var(--on-red); }
td.pick, th.pick { width: 2.2rem; padding-right: 0 !important; }
td.pick label, th.pick label { display: flex; align-items: center; justify-content: center; padding: var(--sp-4); margin: calc(var(--sp-4) * -1); cursor: pointer; }
td.pick label:hover .selbox { border-color: var(--ink); }
tr.is-picked > td { background: var(--red-tint); }
tr.is-picked > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.is-picked .qcell__ref { color: var(--red-ink); }
table.data tbody tr.is-picked:hover > td { background: var(--red-tint); }
.card.is-picked { background: var(--red-tint); }
.card__pick { display: flex; align-items: flex-start; padding: var(--sp-6) 0 var(--sp-5) var(--sp-5); }

/* ---------- the selection bar ---------- */
.selbar { position: fixed; left: 50%; bottom: var(--sp-7); translate: -50% 0; z-index: 60; display: flex; align-items: center; gap: var(--sp-5); background: var(--ink); color: var(--ink-inv); border: 1px solid var(--ink); box-shadow: var(--shadow-pop); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-7); animation: selbar-in var(--dur-3) var(--ease-out); max-width: calc(100vw - 2rem); }
@keyframes selbar-in { from { opacity: 0; translate: -50% 10px; } to { opacity: 1; translate: -50% 0; } }
.selbar__n { font-family: var(--font-sans); font-size: var(--t-data); font-variant-numeric: tabular-nums; color: var(--ink-inv); white-space: nowrap; }
.selbar__n b { font-weight: 700; }
.selbar__sep { width: 1px; align-self: stretch; background: var(--ink-3); }
.selbar .btn--ghost { color: var(--ink-inv); }
.selbar .btn--ghost:hover { background: var(--ink-2); color: var(--ink-inv); }
@media (max-width: 34rem) {
  .selbar { padding-left: var(--sp-5); gap: var(--sp-3); width: calc(100vw - 2rem); justify-content: space-between; }
  .selbar__n { font-size: var(--t-micro); }
}
body.has-selection { padding-bottom: 4.5rem; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--sp-6); }
.modal__scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade var(--dur-2) var(--ease-out); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal__panel { position: relative; width: min(34rem, 100%); max-height: calc(100vh - 3rem); overflow-y: auto; background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--shadow-pop); padding: var(--sp-7); animation: panel-in var(--dur-3) var(--ease-out); }
.modal__panel:focus { outline: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal__title { font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 700; margin: 0 0 var(--sp-2); }
.modal__lede { font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--sp-6); }
.modal__foot { display: flex; gap: var(--sp-4); justify-content: flex-end; align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--rule); }
.modal__foot .spacer { margin-right: auto; }
.field { display: block; margin-bottom: var(--sp-6); }
.field > .micro { display: block; margin-bottom: var(--sp-3); }
.field input[type="text"], .field select { width: 100%; font: inherit; font-family: var(--font-sans); font-size: var(--t-sm); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--ink-3); background: var(--paper-2); color: var(--ink); }
.field input[type="text"]:focus { border-color: var(--red); outline: none; box-shadow: inset 0 0 0 1px var(--red); }
.opts { display: grid; gap: var(--sp-3); }
.opt { display: flex; align-items: flex-start; gap: var(--sp-5); font-family: var(--font-sans); font-size: var(--t-sm); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--rule); cursor: pointer; }
.opt:hover { background: var(--paper-3); }
.opt:focus-within { border-color: var(--ink-3); background: var(--paper-3); }
.opt input { margin-top: .22em; }
.opt__d { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.progress { height: 3px; background: var(--paper-3); overflow: hidden; margin-top: var(--sp-5); }
.progress i { display: block; height: 100%; width: 0; background: var(--red); transition: width var(--dur-2) linear; }

/* the collection page lists what is chosen, in export order */
.picklist { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-top: 2px solid var(--rule-2); }
.picklist li { display: flex; align-items: baseline; gap: var(--sp-5); padding: var(--sp-4) var(--sp-2); border-bottom: 1px solid var(--rule); font-family: var(--font-sans); font-size: var(--t-sm); }
.picklist__n { font-size: var(--t-micro); color: var(--ink-3); width: 1.6rem; text-align: right; }
.picklist__r { font-size: var(--t-data); white-space: nowrap; }
.picklist__t { color: var(--ink-2); font-size: var(--t-xs); flex: 1 1 10ch; }

/* how many questions are waiting in the collection, shown in the nav */
.navcount { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; margin-left: var(--sp-3); padding: 0 .3em; background: var(--red); color: var(--on-red); font-family: var(--font-sans); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: .05em; }

/* ---------- the hardest questions, closing the front page ---------- */
.worst { margin-top: var(--sp-section); }
.worst__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--rule-2); }
.worst__head h2 { margin: 0; }
.worst__list { list-style: none; margin: 0; padding: 0; }
.worst__row { border-bottom: 1px solid var(--rule); }
.worst__row a { display: grid; grid-template-columns: minmax(5rem, 7rem) 1fr auto; align-items: center; gap: var(--sp-6); padding: var(--sp-4) var(--sp-4); text-decoration: none; color: inherit; transition: background var(--dur-2) var(--ease-out); }
.worst__row a:hover { background: var(--paper-3); color: inherit; }
.worst__p { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: .9; letter-spacing: -.01em; font-variant-numeric: lining-nums; text-align: right; }
.worst__p i { font-style: italic; font-size: .55em; margin-left: .04em; }
.worst__ref { display: block; font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.worst__meta { display: block; margin-top: 2px; font-weight: 500; }
.worst__go { font-family: var(--font-sans); color: var(--ink-3); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.worst__row a:hover .worst__go { color: var(--red-ink); transform: translateX(3px); }
@media (max-width: 34rem) {
  .worst__row a { grid-template-columns: 4rem 1fr; gap: var(--sp-5); }
  .worst__go { display: none; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js mark.hl { animation: none; }
  .reveal__body, .drawer, .selbar, .modal__panel, .modal__scrim { animation: none; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; }
  .rail-brutal, .rail-severe, .rail-hard, .rail-tricky, .rail-routine,
  .badge, .pctcell i, .distbar__seg, .chip__sw, .hl, .heatbar__seg, .tint-brutal, .tint-severe, .tint-hard, .tint-tricky, .tint-routine, table.marks td.is-full {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .masthead, .toolbar, .rowbtn, .themebtn, .toc, .skiplink, .strip { display: none !important; }
  .hero > .wrap { padding-right: var(--sp-gutter); }
  table.data thead th { position: static; }
  .reveal__btn { display: none; }
  .reveal__body { animation: none; }
  .ansimg img { filter: none !important; }
  .selbar, .modal, .navcount, td.pick, th.pick, .card__pick, .study__pos { display: none !important; }
  body.is-drawer-open .drawer { position: static; overflow: visible; animation: none; }
  body.is-drawer-open .drawer__head { position: static; box-shadow: none; }
  body.is-drawer-open .drawer__nav, body.is-drawer-open .drawer__head label { display: none !important; }
  body.is-drawer-open .drawer__body { display: block; }
  body.is-drawer-open .study__side { position: static; max-height: none; overflow: visible; }
  body.is-drawer-open main { display: none !important; }
  body.is-drawer-open { overflow: visible; }
}

/* ---------- inline equations recovered from the reports (MathType pictures) ---------- */
.eq { height: 1.15em; width: auto; display: inline-block; vertical-align: -.22em; margin: 0 .08em; background: #fff; }
.eq--tall { vertical-align: middle; }
:root[data-theme="dark"] .eq { filter: invert(1) hue-rotate(180deg); background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eq { filter: invert(1) hue-rotate(180deg); background: transparent; } }
@media print { .eq { filter: none !important; } }