/* ==========================================================================
   TestGen | Powered by REVISION24 — styles.css
   One stylesheet. No framework, no build step, no request ever leaves the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE THREE VOICES

   Four typefaces doing three different jobs, so that emphasis inside a
   sentence is carried by the letterforms changing rather than by a colour
   wash or a highlighter.

     Literata      the reading voice. A screen serif drawn for long text. It
                   sets every heading, every explanation, and any term being
                   defined.
     Livvic        the site talking. A friendly sans made for small dense text,
                   so the tables stay legible when a hundred folk dances are stacked.
     Inter         the fallback sans for older cached installs and system
                   environments where Livvic has not loaded yet.
     IBM Plex Mono the labels and the numbers. Section numbers, years, heights,
                   list entries — anything that is itself the answer.

   All four are self-hosted, latin-subset, and precached by the service worker.
   Nothing is fetched from a CDN, because these pages have to work with the
   aeroplane switch on.

   font-display:swap keeps the text readable in the fallback face from the
   first paint rather than leaving the page blank while a font downloads.
   -------------------------------------------------------------------------- */

@font-face{font-family:'Literata';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/literata-400.woff2') format('woff2');}
@font-face{font-family:'Literata';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/literata-600.woff2') format('woff2');}
/* A drawn italic, not a sheared roman. The browser fakes an italic by slanting
   the upright face when none is given, and that slant is most of what makes
   emphasis look cheap. */
@font-face{font-family:'Literata';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/literata-italic-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Livvic';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/livvic-400.ttf') format('truetype');}
@font-face{font-family:'Livvic';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/livvic-600.ttf') format('truetype');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexmono-500.woff2') format('woff2');}

:root{
  /* GROUND. A cool near-black rather than a pure one, so that the panels can
     sit a step above it without either of them looking grey. */
  --bg:#0e1113;
  --panel:#171b1e;
  --panel2:#1e2429;
  --panel3:#252c32;
  --line:#2a3137;
  --line2:#39424a;
  --ink:#eef1f2;
  --dim:#98a2a8;
  --dimmer:#6a747b;

  /* PALETTE. Three text colours over one unchanging ground. The background
     never carries the colour; only the type does.

       jade   the answer: numbers, links, the thing being asked for
       sky    the structure: the key column of every table, cross-references
       rose   the warnings: the traps, the repealed, the section headings

     Each has an -rgb companion so a translucent version is derived from the
     colour instead of being typed out again — a hard-coded rgba() is a copy
     of the palette that stops moving when the palette moves. */
  --jade:#57c98a;   --jade-rgb:87,201,138;
  --sky:#6fb0f2;    --sky-rgb:111,176,242;
  --rose:#f0736f;   --rose-rgb:240,115,111;
  --sand:#d9b166;   --sand-rgb:217,177,102;

  --serif:'Literata','Iowan Old Style','Palatino Linotype',Palatino,Georgia,ui-serif,serif;
  --sans:'Livvic','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace;

  /* Use the full browser width on desktop. The layout still keeps generous
     responsive gutters, while wide screens get room for more index cards and
     a wider reading column instead of an artificially narrow centred page. */
  --maxw:100%;

  /* Type ramp. Seven steps and nothing between them, so a size is always a
     decision and never a nudge. */
  --t-micro:11.5px;
  --t-tiny:12.5px;
  --t-small:14.5px;
  --t-copy:16px;
  --t-body:17px;
  --t-lead:19px;
  --t-big:23px;

  --r:12px;
  --r-s:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  /* The safe-area padding matters once the site is installed: a standalone
     window runs under the phone's rounded corners and home indicator. */
  padding-bottom:env(safe-area-inset-bottom);
}

a{color:var(--jade);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:600}
em{font-style:italic}

:focus-visible{outline:2px solid var(--jade);outline-offset:2px;border-radius:4px}

.skip{
  position:fixed;left:-999px;top:0;z-index:200;
  background:var(--jade);color:#08110c;padding:10px 16px;font-weight:600;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ==========================================================================
   HEADER
   ========================================================================== */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(14,17,19,.93);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.topin{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:10px clamp(20px,3vw,48px);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex:0 0 auto}
.brand:hover{text-decoration:none}
.brandfull{display:block;width:148px;height:40px;object-fit:contain;background:#fff;border-radius:6px;flex:0 0 auto}
.brandtext{display:block;line-height:1.15}
.brand b{font-family:var(--serif);font-size:var(--t-copy);font-weight:600;display:block;letter-spacing:.1px}
#brandsub{
  display:block;font-family:var(--mono);font-size:var(--t-micro);
  color:var(--dim);text-transform:uppercase;letter-spacing:.09em;
}
.footerlogo{display:block;width:150px;height:auto;max-height:40px;object-fit:contain;object-position:left center;margin:0 0 18px;padding:5px 10px;background:#fff;border-radius:6px}

.searchwrap{position:relative;flex:1 1 auto;min-width:0;max-width:620px;margin-left:auto}
.searchwrap .ico{
  position:absolute;left:11px;top:50%;transform:translateY(-52%);
  color:var(--dimmer);font-size:19px;pointer-events:none;
}
#q{
  width:100%;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;
  padding:9px 42px 9px 34px;font-family:var(--sans);font-size:var(--t-small);
}
#q::placeholder{color:var(--dimmer)}
#q:focus{outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(var(--jade-rgb),.16)}
#q::-webkit-search-cancel-button{filter:invert(.6)}
.searchwrap kbd{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:var(--t-micro);color:var(--dimmer);
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px;pointer-events:none;
}
.langswitch{display:flex;align-items:center;gap:7px;margin:12px 0 18px}
.langswitch span{font-family:var(--mono);font-size:var(--t-micro);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.langswitch button{cursor:pointer;background:var(--panel);color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-family:var(--sans);font-size:var(--t-tiny)}
.langswitch button:hover,.langswitch button[aria-pressed="true"]{color:var(--jade);border-color:var(--jade);background:rgba(var(--jade-rgb),.08)}
#language-slot{flex:0 0 auto}
#language-slot .langswitch{margin:0;white-space:nowrap}
/* Under 640px the "/" hint is hidden, so the 42px of right padding it was
   sitting in is empty space — and on a 320px phone that empty space is the
   whole reason the header, and with it the page, scrolled sideways. The brand
   is allowed to shrink for the same reason. */
@media (max-width:640px){
  .searchwrap kbd{display:none}
  #q{padding-right:13px}
  .brand{min-width:0}
  .brandfull{width:118px;height:34px}
  #brandsub{display:none}
  .footfaq{flex:0 0 220px}
}

.installbtn{
  flex:0 0 auto;background:transparent;color:var(--jade);
  border:1px solid rgba(var(--jade-rgb),.45);border-radius:999px;
  padding:7px 13px;font-family:var(--sans);font-size:var(--t-tiny);font-weight:600;cursor:pointer;
}
.installbtn:hover{background:rgba(var(--jade-rgb),.1)}
@media (max-width:640px){.installbtn .lbl{display:none}}

/* TABS. A horizontal scroller on a phone, a row on a desktop. The active tab
   is marked by a rule under it rather than a filled pill, because a filled
   pill at this size reads as a button you have not pressed yet. */
.tabs{
  max-width:var(--maxw);margin:0 auto;
  display:flex;gap:2px;padding:0 clamp(14px,2.6vw,42px);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:var(--dim);font-family:var(--sans);font-size:var(--t-small);font-weight:600;
  padding:9px 12px 10px;border-bottom:2px solid transparent;white-space:nowrap;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current="true"]{color:var(--jade);border-bottom-color:var(--jade)}

/* ==========================================================================
   MAIN
   ========================================================================== */
main{max-width:var(--maxw);margin:0 auto;padding:32px clamp(20px,3vw,48px) 90px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.24;margin:0}
h1{font-size:var(--t-big);letter-spacing:-.2px}
h2{font-size:var(--t-lead)}
h3{font-size:var(--t-copy)}

.lede{color:var(--dim);font-size:var(--t-copy);max-width:none;margin:9px 0 0}

.eyebrow{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--rose);margin:0 0 7px;
}

.pagehead{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}

/* ==========================================================================
   THE INDEX — the home screen

   The whole point of the site is that you can see everything it contains from
   one screen, so the home page is a real index and not a set of teaser cards:
   every subject lists every topic inside it, as a link.
   ========================================================================== */
.hero{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  padding:24px 22px;margin-bottom:26px;
}
.hero h1{font-size:27px}
.hero p{margin:10px 0 0;color:var(--dim);max-width:none}
.herostats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-top:22px;font-family:var(--mono);font-size:var(--t-tiny);color:var(--dim);
}
.herostats span{
  display:flex;align-items:center;gap:9px;min-height:52px;
  padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-s);
  background:linear-gradient(145deg,var(--panel2),var(--panel));
  box-shadow:0 5px 16px rgba(0,0,0,.14);
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}
.herostats span:hover{transform:translateY(-2px);background:var(--panel3)}
.herostats span:nth-child(1){border-color:rgba(var(--jade-rgb),.42)}
.herostats span:nth-child(2){border-color:rgba(var(--sky-rgb),.42)}
.herostats span:nth-child(3){border-color:rgba(var(--sand-rgb),.42)}
.herostats span:nth-child(4){border-color:rgba(var(--rose-rgb),.42)}
.herostats span:nth-child(5){border-color:var(--line2)}
.herostats b{font-size:18px;font-weight:500;line-height:1}
.herostats span:nth-child(1) b{color:var(--jade)}
.herostats span:nth-child(2) b{color:var(--sky)}
.herostats span:nth-child(3) b{color:var(--sand)}
.herostats span:nth-child(4) b{color:var(--rose)}
.herostats span:nth-child(5){color:var(--jade)}

.indexgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.idxcard{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:18px 18px 12px;display:flex;flex-direction:column;
}
.idxcard > .num{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--dimmer);
  letter-spacing:.11em;text-transform:uppercase;
}
.idxcard h2{margin:4px 0 0}
.idxcard h2 a{color:var(--ink)}
.idxcard h2 a:hover{color:var(--jade);text-decoration:none}
.idxcard .w{color:var(--dim);font-size:var(--t-small);margin:6px 0 12px}
.idxlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.idxlist li{border-bottom:1px solid var(--line)}
.idxlist li:last-child{border-bottom:0}
.idxlist a{
  display:flex;align-items:baseline;gap:9px;
  padding:8px 2px;font-size:var(--t-small);color:var(--ink);
}
.idxlist a:hover{text-decoration:none;color:var(--jade)}
.idxlist .n{font-family:var(--mono);font-size:var(--t-micro);color:var(--dimmer);flex:0 0 22px}
.idxlist .t{flex:1 1 auto}
.idxlist .c{font-family:var(--mono);font-size:var(--t-micro);color:var(--dimmer);flex:0 0 auto}

/* ==========================================================================
   SUBJECT PAGE — a sticky rail of topics beside the reading column
   ========================================================================== */
.rail{display:grid;gap:clamp(28px,3vw,56px);grid-template-columns:clamp(230px,18vw,300px) minmax(0,1fr);align-items:start}
@media (max-width:860px){.rail{grid-template-columns:1fr}}
/* A grid item defaults to min-width:auto, which means it refuses to shrink
   below the widest thing inside it. The widest thing inside the reading column
   is a table with min-width:560px, so on a 375px phone the column grew to 560px
   and the WHOLE PAGE scrolled sideways — every line of body text clipped at the
   right edge — instead of just the table scrolling inside its own box.
   min-width:0 lets the column shrink and hands the overflow back to .tw. */
.rail > *{min-width:0}
.railnav{position:sticky;top:104px}
@media (max-width:860px){.railnav{position:static}}
.railnav .lbl{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--dimmer);padding:0 0 8px;display:block;
}
.railnav ol{list-style:none;margin:0;padding:0;counter-reset:r}
.railnav li{counter-increment:r}
.railnav a{
  display:block;padding:6px 10px 6px 30px;position:relative;
  font-size:var(--t-small);color:var(--dim);border-left:2px solid var(--line);
}
.railnav a::before{
  content:counter(r);position:absolute;left:9px;top:6px;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--dimmer);
}
.railnav a:hover{color:var(--ink);text-decoration:none;border-left-color:var(--line2)}
.railnav a[aria-current="true"]{color:var(--jade);border-left-color:var(--jade)}

/* ==========================================================================
   BLOCKS — the shapes every topic is built out of
   ========================================================================== */
.topic + .topic{margin-top:38px;padding-top:32px;border-top:1px solid var(--line)}
.topic h2{scroll-margin-top:118px}
.topic .w{color:var(--dim);font-size:var(--t-copy);margin:7px 0 0;max-width:none}

/* Quick revision — the handful of lines from a topic most likely to be the
   whole question. Set apart at the top so a revision pass can read only these. */
.quick{
  border:1px solid rgba(var(--jade-rgb),.3);border-radius:var(--r);
  background:rgba(var(--jade-rgb),.06);padding:14px 16px;margin:18px 0 6px;
}
.quick .qh{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--jade);margin-bottom:8px;
}
.quick ul{margin:0;padding-left:19px}
.quick li{font-size:var(--t-small);margin:5px 0}
.quick li::marker{color:rgba(var(--jade-rgb),.6)}

.block{margin-top:26px}
.block > h3{
  font-family:var(--mono);font-size:var(--t-tiny);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sand);
  margin-bottom:10px;
}
.block p{margin:0 0 12px;max-width:none;font-size:var(--t-copy)}
.block > ul{margin:0 0 12px;padding-left:20px;max-width:none}
.block > ul li{margin:6px 0;font-size:var(--t-copy)}
.block > ul li::marker{color:var(--dimmer)}

/* TABLES. Two or three columns, the first of which is the key you are trying
   to recall. It is set in the sky colour and in the serif, so a scan down the
   left edge reads as a list of things and the rest reads as the answers. */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:var(--t-small)}
thead th{
  text-align:left;font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  padding:9px 14px;border-bottom:1px solid var(--line2);background:var(--panel2);
  white-space:nowrap;
}
tbody td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.017)}
tbody td:first-child{
  font-family:var(--serif);color:var(--sky);font-weight:600;
  white-space:nowrap;
}
/* Once a table is more than two columns wide, forcing the first column onto
   one line is what makes a phone scroll sideways for ever. Let it wrap. */
table.wide tbody td:first-child{white-space:normal;min-width:9ch}
table.wide{min-width:560px}
/* A number that is itself the answer is set in the mono face wherever it
   appears, so that a section number reads as a label and not as prose. */
td code,li code,p code{
  font-family:var(--mono);font-size:.93em;color:var(--jade);
  background:rgba(var(--jade-rgb),.09);border-radius:4px;padding:1px 5px;
}

/* CAREFUL. The box for the place where the confidently repeated answer is the
   wrong one. Rose, because it is the only thing on the page that is a warning. */
.careful{
  border:1px solid rgba(var(--rose-rgb),.32);border-left:3px solid var(--rose);
  border-radius:var(--r-s);background:rgba(var(--rose-rgb),.06);
  padding:12px 15px;margin:16px 0;font-size:var(--t-small);
}
.careful .cl{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--rose);display:block;margin-bottom:4px;font-weight:500;
}

/* A row of facing cards, for "this became that" — an old section number and
   its new one, an old name and its new one. */
.swap{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));margin:14px 0}
.swap div{
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel);padding:11px 13px;
}
.swap .k{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--dimmer);display:block;margin-bottom:3px;
}
.swap .v{font-family:var(--serif);font-size:var(--t-copy);color:var(--jade);font-weight:600}
.swap .s{display:block;font-size:var(--t-tiny);color:var(--dim);margin-top:3px}

.hychip{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-family:var(--mono);font-size:var(--t-micro);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--rose);border:1px solid rgba(var(--rose-rgb),.4);
  border-radius:999px;padding:1px 8px;
}

/* ==========================================================================
   SEARCH RESULTS
   ========================================================================== */
#results{
  position:fixed;left:50%;transform:translateX(-50%);
  top:60px;width:min(760px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:80;padding:6px;
}
#results .rrow{
  display:block;padding:10px 13px;border-radius:var(--r-s);color:var(--ink);
}
#results .rrow:hover,#results .rrow.sel{background:var(--panel3);text-decoration:none}
#results .rk{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--sand);
}
#results .rt{font-family:var(--serif);font-size:var(--t-copy);font-weight:600;margin:1px 0 2px}
#results .rs{font-size:var(--t-tiny);color:var(--dim)}
/* Search hits, both in the results list and marked on the page you land on.
   Without this the browser's own bright yellow <mark> lands in the middle of a
   dark page and reads as a rendering fault rather than as a found word. */
mark,#results mark{
  background:rgba(var(--jade-rgb),.26);color:var(--ink);
  border-radius:3px;padding:0 2px;
}
#results .empty{padding:18px 14px;color:var(--dim);font-size:var(--t-small)}

/* ==========================================================================
   BACK BUTTON AND FOOTER
   ========================================================================== */
.backfab{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line2);
  border-radius:999px;padding:9px 17px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-tiny);font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.backfab:hover{background:var(--panel3)}

footer{border-top:1px solid var(--line);background:var(--panel);margin-top:40px}
footer .wrap{max-width:var(--maxw);margin:0 auto;padding:26px clamp(20px,3vw,48px) 40px}
footer p{color:var(--dim);font-size:var(--t-small);max-width:none;margin:0 0 11px}
footer b{color:var(--ink)}
.faqgrid{display:flex;gap:10px;overflow-x:auto;padding:2px 0 12px}
.footfaq{flex:1 1 0;min-width:0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel2)}
.footfaq summary{cursor:pointer;list-style:none;color:var(--ink);font-size:var(--t-small);font-weight:600;line-height:1.35;padding:13px 14px;min-height:66px}
.footfaq summary::-webkit-details-marker{display:none}
.footfaq summary::after{content:"＋";float:right;color:var(--jade);font-family:var(--mono);font-weight:400;margin-left:7px}
.footfaq[open] summary{border-bottom:1px solid var(--line);color:var(--jade)}
.footfaq[open] summary::after{content:"−"}
.footfaq>div{color:var(--dim);font-size:var(--t-small);line-height:1.55;padding:13px 14px 15px}
.footfaq>div em{color:var(--ink)}
.colophon{color:var(--dimmer)!important;font-size:var(--t-tiny)!important;margin-top:16px!important}
.copyright{color:var(--dimmer)!important;font-family:var(--mono);font-size:var(--t-micro)!important;letter-spacing:.03em;margin-top:18px!important;margin-bottom:0!important}
footer kbd{
  font-family:var(--mono);font-size:var(--t-micro);
  border:1px solid var(--line2);border-radius:4px;padding:0 5px;color:var(--dim);
}

/* ==========================================================================
   THE INDEX IN PARTS

   The site has two halves that are read in two different ways — one you read,
   one you answer — so the index names them instead of running eleven cards
   together.
   ========================================================================== */
.parth{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:var(--t-tiny);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sand);
  margin:34px 0 14px;
}
.parth:first-of-type{margin-top:0}
.parth span{flex:0 0 auto}
.parth::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.qtot{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--jade);
  margin:10px 0 0;padding-top:9px;border-top:1px solid var(--line);
}
.tabdiv{flex:0 0 auto;width:1px;background:var(--line2);margin:9px 9px 10px}
.bnote{color:var(--dim);font-size:var(--t-small)}

/* ==========================================================================
   QUESTIONS

   A formula is either in your head or it is not. Reading it again cannot tell
   you which, and that is the only reason this shape exists: the answer is not
   on the screen until you have committed to one, and committing locks the
   question.
   ========================================================================== */
.mcqbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px 2px;margin-bottom:4px;
}
.mcqbar .score{font-family:var(--mono);font-size:var(--t-tiny);color:var(--jade)}
.mcqbar .acts{display:flex;gap:8px}
.mcqbar button{
  background:transparent;color:var(--dim);
  border:1px solid var(--line2);border-radius:999px;
  padding:4px 12px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-micro);font-weight:600;
}
.mcqbar button:hover{color:var(--ink);border-color:var(--dim)}

.mcqs{
  list-style:none;margin:0;padding:0;counter-reset:q;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:16px;align-items:start;
}
.mcq{
  counter-increment:q;position:relative;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:0;margin:0;overflow:hidden;
}
.mcq::before{
  content:"Q" counter(q);position:absolute;left:16px;top:9px;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em;
  color:var(--dimmer);
}
.mcq.ok{border-color:rgba(var(--jade-rgb),.34)}
.mcq.done:not(.ok){border-color:rgba(var(--rose-rgb),.3)}

/* FAQ behaviour: the card starts compact and opens in place. The summary is
   the question itself, so the active question gets the same jade highlight as
   a correct answer without changing the data or question logic. */
.qfaq{padding:0}
.qfaq > summary{
  list-style:none;cursor:pointer;padding:30px 16px 16px;
  transition:background .15s ease,color .15s ease;
}
.qfaq > summary::-webkit-details-marker{display:none}
.qfaq > summary::after{
  content:"＋";float:right;color:var(--dimmer);font-family:var(--mono);
  font-size:var(--t-copy);line-height:1;margin-left:12px;
}
.qfaq[open] > summary{
  color:var(--jade);background:rgba(var(--jade-rgb),.06);
  border-bottom:1px solid var(--line);
}
.qfaq[open] > summary::after{content:"−";color:var(--jade)}
.qfaq > :not(summary){margin-left:16px;margin-right:16px}
.qfaq > .dia{margin-top:14px}

.qt{
  font-family:var(--serif);font-size:var(--t-copy);line-height:1.5;
  margin:0;
}
.qtag{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--sky);
  border:1px solid rgba(var(--sky-rgb),.35);border-radius:999px;padding:0 8px;
  white-space:nowrap;
}

/* Options two across once there is room for two. SSC options are short — a
   formula, a ratio, a number — and stacking four of them turns one question
   into a screenful. */
.opts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr))}
.opt{
  display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%;
  background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-s);
  padding:9px 12px;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-small);line-height:1.45;
}
.opt:hover:not(:disabled){border-color:var(--line2);background:var(--panel3)}
.opt:disabled{cursor:default;opacity:.62}
.opt .ol{
  flex:0 0 auto;font-family:var(--mono);font-size:var(--t-micro);
  color:var(--dimmer);border:1px solid var(--line2);border-radius:50%;
  width:19px;height:19px;line-height:17px;text-align:center;margin-top:2px;
}
.opt .ox{flex:1 1 auto;min-width:0}
.opt.right,.opt.wrong{opacity:1}
.opt.right{border-color:var(--jade);background:rgba(var(--jade-rgb),.1)}
.opt.right .ol{color:var(--jade);border-color:var(--jade)}
.opt.wrong{border-color:var(--rose);background:rgba(var(--rose-rgb),.09)}
.opt.wrong .ol{color:var(--rose);border-color:var(--rose)}
.opt.right::after,.opt.wrong::after{
  flex:0 0 auto;font-family:var(--mono);font-size:var(--t-small);margin-top:1px;
}
.opt.right::after{content:"✓";color:var(--jade)}
.opt.wrong::after{content:"✗";color:var(--rose)}

.showans{
  background:none;border:0;cursor:pointer;padding:10px 2px 0;
  font-family:var(--sans);font-size:var(--t-tiny);font-weight:600;
  color:var(--dim);text-decoration:underline;text-underline-offset:3px;
}
.showans:hover{color:var(--jade)}
.mcq.open .showans{display:none}
.qfaq > .showans{margin-bottom:14px}

/* The explanation. It carries the formula being tested and why the tempting
   option is the tempting one, which is the part worth reading twice.

   The [hidden] rule is not redundant. The hidden attribute works by setting
   display:none in the browser's own stylesheet, so ANY display declaration of
   ours beats it — without the second rule here, every answer on the site is
   on screen from the first paint and the practice is worthless. */
.ans{
  display:flex;gap:11px;align-items:flex-start;
  border-left:3px solid var(--jade);border-radius:0 var(--r-s) var(--r-s) 0;
  background:rgba(var(--jade-rgb),.07);
  padding:11px 13px;margin-top:12px;
}
.ans .al{
  flex:0 0 auto;font-family:var(--mono);font-size:var(--t-tiny);font-weight:500;
  color:#08110c;background:var(--jade);border-radius:5px;
  width:22px;height:22px;line-height:22px;text-align:center;
}
.ans[hidden]{display:none}
.ans .aw{flex:1 1 auto;min-width:0;font-size:var(--t-small);color:var(--ink)}
.ans .aw code{font-size:.95em}

/* ==========================================================================
   FIGURES

   Hand-drawn SVG, four strokes and nothing else:
     .l  the construction — the figure itself
     .a  the thing being asked for
     .g  guides and equal marks, dashed
     .f  a shaded region
   The figures take their colours from the palette above rather than carrying
   their own, so a drawing cannot drift out of step with the site.
   ========================================================================== */
.dia{
  margin:0 0 13px;padding:12px;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel2);
  display:flex;flex-direction:column;align-items:center;
}
.dia svg{width:100%;height:auto;max-width:330px;display:block;overflow:visible}
.dia svg .l{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dia svg .a{fill:none;stroke:var(--jade);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.dia svg .g{fill:none;stroke:var(--line2);stroke-width:1.2;stroke-dasharray:4 4}
.dia svg .m{fill:none;stroke:var(--dim);stroke-width:1.3;stroke-linecap:round}
.dia svg .f{fill:rgba(var(--jade-rgb),.17);stroke:none}
.dia svg .p{fill:var(--sky);stroke:none}
.dia svg text{font-family:var(--mono);font-size:11px;fill:var(--dim)}
.dia svg text.b{fill:var(--ink)}
.dia svg text.j{fill:var(--jade)}
.dia figcaption{
  font-size:var(--t-tiny);color:var(--dim);margin-top:9px;text-align:center;max-width:46ch;
}
.dia.miss{
  font-family:var(--mono);font-size:var(--t-tiny);color:var(--rose);
  border-color:rgba(var(--rose-rgb),.4);padding:14px;
}

@media print{
  .top,.backfab,#results,footer,.railnav,.mcqbar,.showans{display:none}
  body{background:#fff;color:#000}
  .ans{display:flex!important}
  .ans[hidden]{display:flex!important}
}

/* The study content is intentionally read-only and cannot be selected. */
body.copy-protected,
body.copy-protected *{
  -webkit-user-select:none;
  user-select:none;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}