/* course.css — tokens, fonts, header and theme follow the live
   grade6-singapore-math-cpa/curriculum.css; ledger status colours and icons
   match live-sound-eq-sop. tests/ui.test.js checks every text pairing below
   in both themes. */
/* Self-hosted fonts (Lexend, Fraunces) - SIL Open Font License 1.1, see fonts/OFL-*.txt.
   Served from this site so learners' browsers make no third-party font requests. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lexend-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lexend-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lexend-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Naming: a bare hue (--teal, --att) is for borders and fills; its -text twin
   is the shade that passes 4.5:1 as text. --ink* flips in dark mode, so it is
   never a background — use --header-bg, --btn-bg or --chip-bg for dark bands. */
:root{
  color-scheme:light;
  --ink:#0F2338; --ink-2:#1B3A5C; --ink-3:#33557A;
  --header-bg:#0F2338; --btn-bg:#0F2338; --btn-bg-hover:#1B3A5C; --chip-bg:#33557A;
  --teal:#1F8A7D; --teal-text:#136155; --teal-pale:#DCEFEB;
  --amber:#E4A03C; --amber-pale:#FAEDD6;
  --peri:#6B7FB3; --peri-pale:#E4E9F4; --rose:#C2536B; --rose-pale:#F6E3E8;
  --paper:#F3F6F8; --card:#FFFFFF; --line:#D3DCE4;
  --text:#16283C; --muted:#5B7189;
  --att:#2A8A55; --att-text:#1F6E44; --prop:#96650F; --exp:#B23E27; --rej:#6A7183;
  /* one colour per lesson, readable as text on a card; always paired with the lesson number */
  --l1:#1F6FB2; --l2:#6D4BB0; --l3:#0F7A80; --l4:#8A6A00; --l5:#B8561A; --l6:#5C7A10; --l7:#5C3317; --l8:#2E7D32; --l9:#4A5568; --l10:#243B7A; --l11:#155E75; --l12:#374151; --on-lc:#FFFFFF;
  /* type scale: every font-size uses one of these (tests/ui.test.js) */
  --fs-xs:.8rem; --fs-sm:.9rem; --fs-base:1rem; --fs-md:1.125rem; --fs-lg:1.25rem; --fs-xl:1.7rem;
  --fs-display:clamp(2.1rem,4.5vw,2.9rem);
  --lh-display:1.08; --lh-heading:1.2; --lh-body:1.62; --measure:60ch; --measure-serif:50ch;
  --r-sm:4px; --r-md:8px; --r-lg:10px; --r-pill:999px;
  --focus:#B06A00;
  /* non-text edges, 3:1 on a card: grid lines, and the ring that keeps a button visible */
  --edge:#7A8FA6; --btn-edge:#0F2338;
  --sans:"Lexend",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
}
/* Theme-independent: the header is a dark band in both themes, so its colours never flip. */
:root{
  --on-dark:#FFFFFF; --header-muted:#9FB6CC; --header-sub:#B8CBDC; --pill-text:#0F2338; --pill-hover-text:#2B1B04;
}
/* dark theme — toggled via [data-theme] on <html>, see theme-toggle.js.
   The header stays a dark band in both themes; only body chrome inverts. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#EAF2F9; --ink-2:#BFD4E8; --ink-3:#93AEC9;
  --header-bg:#0A1420; --btn-bg:#1F5F96; --btn-bg-hover:#2A6FA8; --chip-bg:#2B4A6B;
  --teal:#3FBFA9; --teal-text:#5FE0C7; --teal-pale:#153732;
  --amber:#E9AD55; --amber-pale:#3A2C13;
  --peri:#8FA0D6; --peri-pale:#232B47; --rose:#E07992; --rose-pale:#3A1E27;
  --paper:#0F151C; --card:#1A222B; --line:#2B3641;
  --text:#DCE6EE; --muted:#93A7BC;
  --att:#3FB271; --att-text:#5CCB8A; --prop:#D9A441; --exp:#EE8A74; --rej:#A9B0C0;
  --l1:#6FA8E0; --l2:#B39AEB; --l3:#4FC3C9; --l4:#E3C04F; --l5:#EE9A5C; --l6:#B3CF5A; --l7:#C99A7A; --l8:#81C784; --l9:#A0AEC0; --l10:#9DB0EE; --l11:#67C6DE; --l12:#D1D5DB; --on-lc:#0B1622;
  --focus:#E9AD55;
  --edge:#5F7488; --btn-edge:#93AEC9;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:var(--lh-body);-webkit-font-smoothing:antialiased;transition:background-color .2s,color .2s}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
a{color:var(--ink-2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{background:var(--header-bg);color:var(--on-dark);padding:24px 0 16px;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:26px 26px}
.top a{color:var(--header-muted)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.top a.back{font-family:var(--sans);font-size:var(--fs-lg);color:var(--pill-text);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;min-height:48px;
  background:var(--on-dark);border:2px solid var(--on-dark);border-radius:var(--r-pill);padding:8px 24px 8px 16px;font-weight:700}
.top a.back:hover{background:var(--amber);border-color:var(--amber);color:var(--pill-hover-text)}
.theme-toggle{font-family:var(--sans);font-size:var(--fs-lg);color:var(--on-dark);font-weight:700;
  display:inline-flex;align-items:center;gap:8px;margin:0 0 8px auto;cursor:pointer;min-height:48px;
  background:rgba(255,255,255,.18);border:2px solid var(--on-dark);border-radius:var(--r-pill);padding:8px 24px}
.theme-toggle:hover{background:rgba(255,255,255,.3);border-color:var(--on-dark)}
.top .eyebrow{font-family:var(--sans);font-size:var(--fs-xl);font-weight:700;color:var(--amber);margin:0 0 8px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;line-height:var(--lh-heading)}
.top h1{font-family:var(--serif);font-weight:600;font-size:var(--fs-display);margin:0 0 8px;letter-spacing:-.015em;line-height:var(--lh-display)}
.top .sub{color:var(--header-sub);margin:0 0 16px;max-width:var(--measure)}
.facts{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--sans);font-size:var(--fs-sm);color:var(--header-muted);margin-bottom:12px}
.facts b{color:var(--on-dark);font-weight:600;font-family:var(--sans)}
.tracks{border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);padding:4px 16px 8px;margin:0;display:flex;flex-wrap:wrap;gap:8px 24px;width:fit-content;max-width:100%}
.tracks legend{font-family:var(--sans);font-size:var(--fs-sm);color:var(--header-muted);padding:0 8px}
.tracks label{cursor:pointer;font-weight:700;font-size:var(--fs-md);display:flex;align-items:center;gap:12px;min-height:44px}
.tracks input{accent-color:var(--amber);width:22px;height:22px;margin:0}
/* Wide screens: the track picker sits beside the title instead of under it, so the lesson starts higher. */
.top #top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:start}
.top #top > *{grid-column:1}
.top #top > .tracks{grid-column:2;grid-row:1 / span 4;flex-direction:column;flex-wrap:nowrap;gap:0}

main{padding:32px 0 48px}
section{margin-bottom:48px}
h2{font-family:var(--serif);font-weight:600;font-size:var(--fs-xl);color:var(--ink);margin:0 0 12px;line-height:var(--lh-heading)}
.lede{color:var(--muted);max-width:var(--measure);margin:0 0 16px}
.loading{color:var(--muted)}
.warn{background:var(--rose-pale);border-left:4px solid var(--rose);padding:16px 16px;border-radius:0 var(--r-md) var(--r-md) 0}
.warn b{display:block}

/* hub */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
[data-lesson="1"]{--lc:var(--l1)} [data-lesson="2"]{--lc:var(--l2)} [data-lesson="3"]{--lc:var(--l3)}
[data-lesson="4"]{--lc:var(--l4)} [data-lesson="5"]{--lc:var(--l5)}
[data-lesson="6"]{--lc:var(--l6)} [data-lesson="7"]{--lc:var(--l7)} [data-lesson="8"]{--lc:var(--l8)}
[data-lesson="9"]{--lc:var(--l9)} [data-lesson="10"]{--lc:var(--l10)} [data-lesson="11"]{--lc:var(--l11)} [data-lesson="12"]{--lc:var(--l12)}
.card{background:var(--card);border:2px solid var(--lc,var(--line));border-top-width:8px;border-radius:var(--r-lg);padding:24px 24px}
.card.pending{border-style:dashed;border-top-style:solid}
.card h3{font-family:var(--serif);font-size:var(--fs-lg);margin:0 0 8px;line-height:var(--lh-heading)}
.card h3 a{color:var(--lc)}
.card .eyebrow{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--lc);margin:0 0 4px}
.top[data-lesson]{border-bottom:8px solid var(--lc)}
.lesson-no{display:inline-block;background:var(--lc);color:var(--on-lc);font-weight:700;padding:4px 12px;border-radius:var(--r-sm)}
.objs{padding-left:0;list-style:none;margin:12px 0 0;font-size:var(--fs-sm)}
.objs li{margin-bottom:8px}
.bloom{font-family:var(--sans);font-size:var(--fs-xs);color:var(--ink-3);background:var(--peri-pale);padding:2px 8px;border-radius:var(--r-sm);margin-right:8px;white-space:nowrap}
.note{font-size:var(--fs-sm);color:var(--muted);margin:12px 0 0}
table.basis{border-collapse:collapse;width:100%;max-width:calc(var(--measure) * 1.4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.basis th,.basis td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.basis th{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.basis td:first-child{font-weight:600;width:30%}
.basis small{font-weight:400;color:var(--muted)}
/* Evaluation: Kirkpatrick's four levels, cool to warm as they move from the day itself to lasting results.
   Each level also carries its number and name, so colour is never the only cue. */
ol.eval-levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;max-width:calc(var(--measure) * 1.6)}
.lvl{background:var(--lvl-pale);border:1px solid var(--line);border-left:8px solid var(--lvl);border-radius:0 var(--r-lg) var(--r-lg) 0;padding:16px 16px 16px 24px;color:var(--text)}
.lvl h3{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;margin:0 0 4px;color:var(--text);line-height:var(--lh-heading)}
.lvl-no{display:block;font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.lvl-who{font-size:var(--fs-sm);font-weight:600;margin:0 0 8px;color:var(--text)}
.lvl p{margin:0 0 8px}
.lvl p:last-child{margin-bottom:0}
.lvl-1{--lvl:var(--peri);--lvl-pale:var(--peri-pale)}
.lvl-2{--lvl:var(--teal);--lvl-pale:var(--teal-pale)}
.lvl-3{--lvl:var(--prop);--lvl-pale:var(--amber-pale)}
.lvl-4{--lvl:var(--rose);--lvl-pale:var(--rose-pale)}
.tally{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-family:var(--sans)}

/* claims and status badges — shape and text as well as colour */
.claims{display:grid;gap:12px}
.claim{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--prop);border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 16px}
.claim[data-status="attested"]{border-left-color:var(--att)}
.claim[data-status="expired"]{border-left-color:var(--exp)}
.claim[data-status="rejected"]{border-left-color:var(--rej)}
.claim[data-status="rejected"] > p{text-decoration:line-through;color:var(--rej)}
.claim p{margin:8px 0}
:where(.block, .obj, .claim, .card, .sidebox) :where(p, li, dd){max-width:var(--measure)}
.claim-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.claim-id{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)}
.claim-also{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
/* The ledger on the hub: one collapsed group per lesson, with its colour as a ribbon beside its number. */
.claim-groups{display:grid;gap:12px}
.claim-group{background:var(--card);border:1px solid var(--line);border-left:8px solid var(--lc,var(--line));border-radius:0 var(--r-lg) var(--r-lg) 0;padding:4px 16px}
.claim-group > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:12px;padding:8px 0}
.cg-text{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.claim-group > summary .lesson-no{font-size:var(--fs-sm)}
.cg-title{font-family:var(--serif);font-size:var(--fs-md);font-weight:600;color:var(--ink);line-height:var(--lh-heading)}
.cg-count{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)}
.claim-group[open] > .claims{margin:8px 0 16px}
.claim details summary{cursor:pointer;font-size:var(--fs-sm);color:var(--ink-3);font-weight:600;min-height:44px;display:flex;align-items:center}
.claim dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;font-size:var(--fs-sm);margin:12px 0 0}
.claim dt{color:var(--muted)}
.claim dd{margin:0;overflow-wrap:anywhere}
.badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;background:var(--card);padding:2px 8px 2px 8px;border-radius:var(--r-pill);border:1.5px solid currentColor}
.badge svg{width:14px;height:14px}
.st-attested{color:var(--att-text)} .st-proposed{color:var(--prop)} .st-expired{color:var(--exp)} .st-rejected{color:var(--rej)}

/* One arrow for every disclosure. A flex summary loses the browser's own marker, so draw it. */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";display:inline-block;width:16px;margin-right:4px;flex:none}
summary::before{content:"▸" / ""}
details[open] > summary::before{content:"▾"}
details[open] > summary::before{content:"▾" / ""}

/* lesson */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:24px;align-items:start}
.obj{background:var(--card);border-left:4px solid var(--amber);padding:16px 24px;border-radius:0 var(--r-md) var(--r-md) 0;margin-bottom:16px}
.obj p{margin:0 0 8px}
.obj ul{margin:0;padding-left:0;list-style:none}
.obj li{margin-bottom:8px}
.oid{font-family:var(--sans);font-weight:600;color:var(--ink-3);margin-right:4px}
.block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px;margin-bottom:16px}
.block > h2{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;margin:0 0 8px;color:var(--ink);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;line-height:var(--lh-heading)}
.block.c{border-top:4px solid var(--teal)}
.block.p{border-top:4px solid var(--amber)}
.block.a{border-top:4px solid var(--peri)}
.block.w{border-top:4px solid var(--rose)}
.block.why{border-top:4px solid var(--ink-3)}
.block.transfer{border-top:4px solid var(--ink)}
.relevance{font-family:var(--serif);font-size:var(--fs-md);color:var(--ink-2);max-width:var(--measure-serif)}
.mins{font-family:var(--sans);font-size:var(--fs-xs);color:var(--on-dark);background:var(--chip-bg);padding:2px 8px;border-radius:var(--r-sm);font-weight:400}
.sense{font-family:var(--sans);font-size:var(--fs-base);font-weight:600;color:var(--teal-text);margin:0 0 12px}
.stage-meta{margin:0 0 12px}
.subhead{font-family:var(--serif);font-size:var(--fs-md);font-weight:600;color:var(--ink);margin:0 0 8px;line-height:var(--lh-heading)}
.targets{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.context{font-style:italic;color:var(--ink-3)}
.passage{margin:0 0 16px;background:var(--paper);border:1px dashed var(--ink-3);border-radius:var(--r-md);padding:16px 16px 12px}
.passage ol{margin:0;padding-left:24px}
.passage li{margin-bottom:12px}
.passage li > p{margin:0;font-family:var(--serif);font-size:var(--fs-md);max-width:var(--measure-serif)}
.passage figcaption{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.key summary{cursor:pointer;font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--ink-3);min-height:44px;display:flex;align-items:center}
.key p{margin:4px 0;font-size:var(--fs-sm)}
.k{font-family:var(--sans);font-size:var(--fs-xs);background:var(--card);padding:2px 8px;border-radius:var(--r-sm);border:1.5px solid currentColor;margin-right:4px}
.k-correct{color:var(--att-text)} .k-wrong{color:var(--exp)} .k-no-source{color:var(--prop)} .k-nothing{color:var(--rej)}
.src{color:var(--muted)}
.keyclaim{margin-bottom:16px}
.moves{margin:0 0 16px;padding-left:16px}
.moves li{margin-bottom:8px;font-size:var(--fs-base)}
.say{border-left:3px solid var(--line);padding:2px 0 2px 16px;margin:0 0 16px}
.say p{margin:0 0 8px;font-size:var(--fs-base);color:var(--ink-2)}
.say .who{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);display:block;margin-bottom:2px}
.watch,.expect,.crit{background:var(--amber-pale);border-radius:var(--r-md);padding:12px 16px;font-size:var(--fs-sm);margin-top:12px}
.expect,.crit{background:var(--peri-pale)}
.watch b,.expect b,.crit b{font-family:var(--serif);font-weight:600;display:block;margin-bottom:2px}
.facil{background:var(--paper);border:1px dashed var(--ink-3);border-radius:var(--r-lg);padding:16px;margin:16px 0}
.facil > .subhead{margin:0 0 12px}
.facil > :last-child{margin-bottom:0}
.legend{font-size:var(--fs-sm);color:var(--muted);margin:12px 0 0}
ol.probs{margin:0;padding-left:24px}
ol.probs li{margin-bottom:16px}
.exit{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.exit p{margin:4px 0}
.figure{overflow-x:auto;margin-bottom:12px;container-type:inline-size}
.btn{font-family:var(--sans);font-weight:600;font-size:var(--fs-sm);background:var(--btn-bg);color:var(--on-dark);border:2px solid var(--btn-edge);border-radius:var(--r-md);padding:8px 16px;cursor:pointer;margin-bottom:16px;min-height:44px}
.btn:hover{background:var(--btn-bg-hover)}
/* Next lesson is the main action; previous is quieter (hierarchy). Both are 44px targets. */
.lesson-nav{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin:24px 0 0}
.lesson-nav a{min-height:44px;display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600}
.lesson-nav .prev{color:var(--ink-2);font-size:var(--fs-sm)}
.lesson-nav .next{margin:0 0 0 auto;text-decoration:none}

/* prompt pairs (Lesson 2): each part has a pale surface, a border in its own
   hue AND a written label, so colour is never the only cue. */
.part-task{--pc:var(--peri);--pp:var(--peri-pale)}
.part-context{--pc:var(--amber);--pp:var(--amber-pale)}
.part-constraints{--pc:var(--rose);--pp:var(--rose-pale)}
.part-format{--pc:var(--teal);--pp:var(--teal-pale)}
.req{font-family:var(--serif);font-size:var(--fs-md);color:var(--ink-2);margin:0 0 12px;max-width:var(--measure-serif)}
.cmp-label{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin:12px 0 4px}
.pair .cmp-label:first-child{margin-top:0}
ol.gaps{margin:0 0 16px;padding-left:24px}
ol.gaps li{margin-bottom:12px}
ol.gaps li > p{margin:0}
/* sign-offs (Lesson 4) */
dl.so-line{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:4px 0 0;font-size:var(--fs-sm)}
.so-line div{display:contents}
.so-line dt{color:var(--muted);font-weight:600}
.so-line dd{margin:0;color:var(--text)}
.so-ledger{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.k-sound{color:var(--att-text)} .k-not-a-person{color:var(--exp)} .k-no-basis{color:var(--prop)} .k-wrong-signer{color:var(--rej)} .k-lapsed{color:var(--exp)}
.so-form{display:grid;gap:12px;margin:0 0 16px;max-width:var(--measure)}
.so-form label{display:grid;gap:4px;font-weight:600;color:var(--ink)}
.so-form input[type="text"],.so-form input[type="date"]{font:inherit;font-size:var(--fs-base);font-weight:400;color:var(--text);background:var(--card);border:2px solid var(--edge);border-radius:var(--r-md);padding:8px 12px;min-height:44px}
.so-who{border:2px solid var(--edge);border-radius:var(--r-md);padding:4px 16px 8px;margin:0;display:flex;flex-wrap:wrap;gap:0 24px}
.so-who legend{font-weight:600;color:var(--ink);padding:0 8px}
.so-who label{display:flex;align-items:center;gap:12px;min-height:44px}
.so-who input{width:22px;height:22px;margin:0;accent-color:var(--btn-bg)}
.so-result{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px}
.so-status{margin:0;font-weight:600;color:var(--ink-2);min-height:52px;flex:1 1 240px}
.so-empty{color:var(--muted)}
.tl-axis{stroke:var(--edge);stroke-width:2}
.tl-live{stroke:var(--ink-3);stroke-width:6;stroke-linecap:round}
.tl-today{stroke:var(--ink);stroke-width:2;stroke-dasharray:4 4}
/* checklist builder (Lesson 5) */
.k-fabrication{color:var(--exp)} .k-outdated{color:var(--prop)} .k-bias{color:var(--rej)} .k-misread{color:var(--teal-text)} .k-fine{color:var(--att-text)}
.ck-form{display:grid;gap:12px;margin:0 0 16px;max-width:var(--measure)}
.ck-form > label{display:grid;gap:4px;font-weight:600;color:var(--ink)}
.ck-form input[type="text"]{font:inherit;font-size:var(--fs-base);font-weight:400;color:var(--text);background:var(--card);border:2px solid var(--edge);border-radius:var(--r-md);padding:8px 12px;min-height:44px}
.ck-list{border:2px solid var(--edge);border-radius:var(--r-md);padding:4px 16px 8px;margin:0;display:grid;gap:0}
.ck-list legend{font-weight:600;color:var(--ink);padding:0 8px}
.ck-list label{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--text)}
.ck-list input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--btn-bg)}
.ck-mine{margin:0 0 16px}
.ck-mine ol{margin:0;padding-left:24px}
.ck-mine p{margin:0 0 8px}
.ck-run li{margin-bottom:8px}
.ck-miss{font-weight:700;color:var(--exp)}
.g-stat{font-size:15px;font-weight:600;text-anchor:start}
.g-stat.ok{fill:var(--att-text)}
.g-stat.gap{fill:var(--exp)}
/* screens (Lesson 6): a made-up AI-built screen in a sandboxed frame */
iframe.mock{display:block;width:100%;max-width:360px;border:2px solid var(--edge);border-radius:var(--r-md);background:var(--card);margin:0 0 12px}
.textver{margin:0 0 12px}
.textver ol{margin:4px 0 0;padding-left:24px}
.goal{font-weight:600}
.k-user-centricity{color:var(--teal-text)} .k-consistency{color:var(--ink-3)} .k-hierarchy{color:var(--prop)} .k-context{color:var(--exp)} .k-user-control{color:var(--rej)} .k-accessibility{color:var(--att-text)} .k-usability{color:var(--ink-2)}
.fix-order{font-weight:600;color:var(--ink-2);margin:0 0 12px}
.ref-wrap{container-type:inline-size}
.ref-list{display:none;margin:0 0 16px}
.ref-list > div{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;margin:0 0 8px;background:var(--card)}
.ref-list dt{font-weight:600;color:var(--ink);margin:0 0 4px}
.ref-list dd{margin:0 0 4px;font-size:var(--fs-sm)}
.ref-k{font-weight:600;color:var(--ink-3)}
@container (max-width:440px){.ref-wrap table.ref{display:none}.ref-wrap .ref-list{display:block}}
table.ref{border-collapse:collapse;width:100%;max-width:calc(var(--measure) * 1.1);margin:0 0 16px;font-size:var(--fs-sm)}
.ref th,.ref td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.ref thead th{color:var(--ink-3)}
.ref tbody th{color:var(--ink);font-weight:600}
/* audit + contrast checker (Lesson 7) */
.k-wcag{color:var(--exp)} .k-pattern{color:var(--prop)}
.k-keep{color:var(--att-text)} .k-change{color:var(--prop)} .k-stop{color:var(--rej)}
.cc-form{display:grid;gap:12px;margin:0 0 12px;max-width:var(--measure)}
.cc-pair{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.cc-pair label{display:grid;gap:4px;font-weight:600;color:var(--ink)}
.cc-pair input[type="text"]{font:inherit;font-size:var(--fs-base);font-weight:400;color:var(--text);background:var(--card);border:2px solid var(--edge);border-radius:var(--r-md);padding:8px 12px;min-height:44px;width:12ch}
.cc-pair input[type="color"]{width:64px;min-height:44px;padding:4px;border:2px solid var(--edge);border-radius:var(--r-md);background:var(--card)}
.row-btns{display:flex;flex-wrap:wrap;gap:8px}
.row-btns .btn{margin-bottom:12px}
.btn:disabled{cursor:not-allowed;background:var(--card);color:var(--ink-3)}
svg.cc-sample{display:block;width:100%;max-width:360px;height:auto;font-family:var(--sans)}
.cc-frame{stroke:var(--edge);stroke-width:2}
.cc-empty{fill:var(--card)}
.pf{display:inline-block;font-weight:700;background:var(--card);padding:2px 8px;border-radius:var(--r-sm);border:1.5px solid currentColor}
.pf.pass{color:var(--att-text)} .pf.fail{color:var(--exp)}
/* course search (hub) */
.search-form{display:grid;gap:4px;margin:0 0 8px;max-width:var(--measure)}
.search-form label{font-weight:600;color:var(--ink)}
.search-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.search-row input{flex:1 1 240px;font:inherit;font-size:var(--fs-base);color:var(--text);background:var(--card);border:2px solid var(--edge);border-radius:var(--r-md);padding:8px 12px;min-height:44px}
.search-row .btn{margin:0}
ol.search-results{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:var(--measure)}
.search-results li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px}
.search-results a{font-weight:700;display:inline-block;min-height:24px}
.search-results .where{display:block;font-size:var(--fs-sm);color:var(--muted)}
.search-results p{margin:4px 0 0}
mark{background:var(--amber-pale);color:var(--text);font-weight:700;padding:0 2px;border-radius:var(--r-sm)}
dl.levels{margin:0 0 16px}
.levels div{margin-bottom:8px}
.levels dt{font-weight:700;color:var(--ink)}
.levels dd{margin:0}
ol.uses{margin:0 0 16px;padding-left:24px}
ol.uses li{margin-bottom:8px}
.k-stated{color:var(--att-text)} .k-vague{color:var(--prop)} .k-missing{color:var(--exp)}
.cmp-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cmp-btn{margin:0}
.cmp-btn[aria-pressed="true"]{background:var(--card);color:var(--ink)}
.cmp-btn[aria-pressed="true"]:hover{background:var(--peri-pale)}
.cmp-btn[aria-pressed="true"]::before{content:"✓ "}
.cmp-status{font-family:var(--sans);font-size:var(--fs-base);font-weight:600;color:var(--ink-2);margin:0 0 16px;min-height:52px}
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}
.cmp-parts{margin:0}
.cmp-part{background:var(--pp);border-left:4px solid var(--pc);border-radius:0 var(--r-md) var(--r-md) 0;padding:8px 12px;margin:0 0 8px;color:var(--text)}
.cmp-part dt{font-family:var(--sans);font-size:var(--fs-sm);font-weight:700}
.cmp-part dd{margin:0}
ul.cmp-out{list-style:none;margin:0;padding:0}
.cmp-out li{font-family:var(--serif);font-size:var(--fs-base);padding:4px 8px;margin:0 0 4px;border-radius:var(--r-sm)}
.cmp-out li.on{background:var(--pp);outline:2px solid var(--pc);color:var(--text)}
.cmp-tag,.cmp-inv{display:inline-block;font-family:var(--sans);font-size:var(--fs-sm);font-weight:700;background:var(--card);padding:2px 8px;border-radius:var(--r-sm);border:1.5px solid currentColor}
.cmp-tag{color:var(--text);white-space:nowrap}
.cmp-inv{color:var(--exp)}
.cmp-note{display:block;font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted);margin-top:4px}

svg.grid{width:100%;min-width:560px;height:auto;font-family:var(--sans)}
.g-cell{fill:var(--card);stroke:var(--edge);stroke-width:1.5}
.g-plain circle{fill:var(--card);stroke:var(--ink-3);stroke-width:2;stroke-dasharray:4 3}
.g-plain text{fill:var(--ink-3);font-size:16px;font-weight:700;text-anchor:middle}
.g-feel{font-weight:400}
.thread .when{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--ink-3);margin:0 0 4px}
.k-ordinary{color:var(--att-text)} .k-warning{color:var(--exp)}
.respond .situations{padding-left:24px;margin:0}
.respond .situations > li{margin-bottom:16px}
.respond .situation{font-weight:600;margin:0 0 8px}
.respond .responses{list-style:lower-alpha;padding-left:24px;margin:0}
.respond .responses li{margin-bottom:8px}
.respond .responses p{margin:0}
.k-safe{color:var(--att-text)} .k-risky{color:var(--exp)}
.g-flow{stroke:var(--ink-3);stroke-width:2}
.chat .turns{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.chat .turn{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;background:var(--card)}
.chat .turn.you{margin-left:32px;border-style:dashed}
.chat .turn p{margin:0 0 4px}
.chat .who-said{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--ink-3)}
.k-helpful{color:var(--att-text)} .k-flattery{color:var(--prop)} .k-guilt{color:var(--rej)} .k-pressure{color:var(--exp)} .k-product{color:var(--teal-text)} .k-human{color:var(--ink-2)}
.g-dot{fill:var(--btn-bg);stroke:var(--btn-edge);stroke-width:1.5}
.g-axis{stroke:var(--edge);stroke-width:1.5}
.g-mean{stroke:var(--ink-3);stroke-width:2.5;stroke-dasharray:6 4}
.g-meanlabel{font-size:15px;font-weight:600;fill:var(--ink-3);text-anchor:start}
.g-pick{fill:none;stroke:var(--focus);stroke-width:3}
.grid-alt .picked{outline:3px solid var(--focus);outline-offset:-3px}
.g-cell.g-aim{stroke:var(--teal);stroke-width:4;stroke-dasharray:8 5}
.g-col{font-size:15px;font-weight:600;fill:var(--ink-3);text-anchor:middle}
.g-row{font-size:15px;font-weight:600;fill:var(--ink-3);text-anchor:end}
.g-mark circle{fill:var(--btn-bg);stroke:var(--btn-edge);stroke-width:2}
/* Narrow figure: the drawing would need a sideways scroll that hides half of it, so show the same grid as a table. */
table.grid-alt{display:none;width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-sm)}
.grid-alt th{overflow-wrap:break-word}
.grid-alt thead th:first-child{width:36%}
.grid-alt th,.grid-alt td{border:1.5px solid var(--edge);padding:8px 4px;text-align:center;vertical-align:middle}
.grid-alt thead th{color:var(--ink-3);font-weight:600}
.grid-alt tbody th{color:var(--ink-3);font-weight:600;text-align:left;padding:8px}
.tmark{display:inline-block;min-width:32px;padding:2px 4px;background:var(--btn-bg);color:var(--on-dark);border:2px solid var(--btn-edge);border-radius:var(--r-pill);font-weight:700;line-height:var(--lh-heading)}
.tmark + .tmark{margin-left:4px}
@container (max-width:559px){
  svg.grid{display:none}
  table.grid-alt{display:table}
}
.g-mark text{fill:var(--on-dark);font-size:16px;font-weight:700;text-anchor:middle}

.side{position:sticky;top:18px;display:grid;gap:16px}
.sidebox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 16px;font-size:var(--fs-sm)}
.sidebox h2{font-family:var(--serif);font-size:var(--fs-md);margin:0 0 8px;color:var(--ink);line-height:var(--lh-heading)}
.sidebox p{margin:0 0 12px}
.sidebox p b{text-transform:capitalize;display:block;font-family:var(--sans);font-size:var(--fs-xs);color:var(--teal-text)}
table.align{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:var(--fs-xs);text-align:center}
.align th,.align td{border:1px solid var(--line);padding:4px 4px}
.align tbody th{color:var(--ink-3);text-align:left}
.align td{color:var(--att-text);font-weight:700}

.foot{font-size:var(--fs-sm);color:var(--muted);padding-bottom:48px}

@media (max-width:900px){
  .lesson{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .top #top{display:block}
  .top #top > .tracks{flex-direction:row;flex-wrap:wrap;gap:0 24px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .top a.back,.theme-toggle{font-size:var(--fs-base);padding:8px 16px}
  .top a.back{padding-right:16px}
  .hdr-row{flex-wrap:nowrap}
  .tracks label{font-size:var(--fs-base)}
  .block{padding:16px 16px}
  .cards{grid-template-columns:1fr}
  .basis td:first-child{width:auto}
}
@media print{
  :root,:root[data-theme="dark"]{
    color-scheme:light;
    --ink:#0F2338;--ink-2:#1B3A5C;--ink-3:#33557A;--header-bg:#fff;--btn-bg:#0F2338;--chip-bg:#33557A;
    --teal:#1F8A7D;--teal-text:#136155;--teal-pale:#DCEFEB;--amber:#E4A03C;--amber-pale:#FAEDD6;
    --peri:#6B7FB3;--peri-pale:#E4E9F4;--rose:#C2536B;--rose-pale:#F6E3E8;
    --att:#2A8A55;--att-text:#1F6E44;--prop:#96650F;--exp:#B23E27;--rej:#6A7183;
    --l1:#1F6FB2;--l2:#6D4BB0;--l3:#0F7A80;--l4:#8A6A00;--l5:#B8561A;--l6:#5C7A10;--l7:#5C3317;--l8:#2E7D32;--l9:#4A5568;--l10:#243B7A;--l11:#155E75;--l12:#374151;--on-lc:#fff;
    --edge:#666;--btn-edge:#0F2338;--paper:#fff;--card:#fff;--line:#999;--text:#000;--muted:#333;
  }
  body{background:#fff;font-size:11pt}
  .top{background:#fff;color:#000;border-bottom:2px solid #000;background-image:none}
  .top h1,.facts b{color:#000}
  .facts,.top .sub,.top .eyebrow{color:#333}
  .tracks,.btn,.back,.theme-toggle,.foot{display:none}
  .lesson{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .block,.card{break-inside:avoid}
}