/* Layout: app shell — sticky course bar + tabs; Study = sidebar outline + long chapter column; Test and Mocks reuse one quiz engine. Visual language follows the Celebrate the Diversity decks: condensed uppercase heads, number tiles, gradient scales, one dark statement card per section. */
:root{
  --paper:#F5EFE4; --card:#EFE7DA; --card-2:#E8DECD; --line:#D9D0C2;
  --ink:#1D1715; --ink-2:#3F3632; --ink-3:#5E5550;
  --claret:#853535; --claret-ink:#853535; --gold:#9C5B4F; --gold-ink:#853535;
  --merlot:#5E3A6E; --dry:#5F7A2A; --water:#C9DBE0; --water-ink:#2F5D6B;
  --dark:#1D1715; --dark-ink:#F5EFE4; --dark-2:#BDB4A8; --dark-gold:#D88A84;
  --ok:#2E6B4A; --bad:#A23A2A; --zone:#E3D9C8;
  --f-body:"Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-head:"Barlow", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#1D1715; --card:#241D1A; --card-2:#2A2320; --line:#3A322E;
  --ink:#F5EFE4; --ink-2:#D6CDC1; --ink-3:#BDB4A8;
  --claret:#853535; --claret-ink:#D88A84; --gold:#B5776B; --gold-ink:#D88A84;
  --merlot:#B48BC8; --dry:#A9C46A; --water:#22404A; --water-ink:#8FC3D1;
  --dark:#2A2320; --dark-ink:#F5EFE4; --dark-2:#BDB4A8; --dark-gold:#D88A84;
  --ok:#7FC79E; --bad:#EE7D63; --zone:#2E2622; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#1D1715; --card:#241D1A; --card-2:#2A2320; --line:#3A322E;
  --ink:#F5EFE4; --ink-2:#D6CDC1; --ink-3:#BDB4A8;
  --claret:#853535; --claret-ink:#D88A84; --gold:#B5776B; --gold-ink:#D88A84;
  --merlot:#B48BC8; --dry:#A9C46A; --water:#22404A; --water-ink:#8FC3D1;
  --dark:#2A2320; --dark-ink:#F5EFE4; --dark-2:#BDB4A8; --dark-gold:#D88A84;
  --ok:#7FC79E; --bad:#EE7D63; --zone:#2E2622; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;text-transform:none;letter-spacing:-.005em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.band{display:flex;height:4px}.band i{flex:1;background:var(--claret)}
.eyebrow{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.num{font-family:var(--f-head);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:10px}
.brand{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.brand b{font-family:var(--f-head);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.18em}
.brand{flex-direction:row;align-items:center;gap:12px}.brand .wlogo{height:44px;width:auto}.brand .wlogo.dk{display:none}.brand .btxt{display:flex;flex-direction:column;gap:2px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand .wlogo.lt{display:none}:root:not([data-theme="light"]) .brand .wlogo.dk{display:block}}
:root[data-theme="dark"] .brand .wlogo.lt{display:none}:root[data-theme="dark"] .brand .wlogo.dk{display:block}
.brand span{font-size:13px;color:var(--ink-3)}
.chip{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--card-2);color:var(--ink-2)}
.tabs{display:flex;gap:4px;background:var(--card);padding:4px;border-radius:2px}
.tab{border:0;background:none;padding:8px 14px;border-radius:2px;font-weight:600;font-size:15px;cursor:pointer;color:var(--ink-2)}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tab small{font-weight:700;color:var(--claret-ink);margin-left:4px}

/* hero */
.hero{padding-block:44px 28px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:end}
.hero h1{font-size:clamp(64px,11vw,128px);color:var(--claret-ink);letter-spacing:1px}
.hero .lede{font-size:21px;color:var(--ink-2);max-width:34ch;margin-top:14px}
.progress-card{background:var(--dark);color:var(--dark-ink);border-radius:2px;padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.progress-card .eyebrow{color:var(--dark-gold)}
.pbar{height:10px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--claret),var(--gold));width:0;transition:width .4s}
.prow{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--dark-2)}
.prow b{color:var(--dark-ink)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:28px}
.tile{background:var(--card);border-radius:2px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tile .num{font-size:46px;color:var(--claret-ink)}
.tile b{font-size:16px}
.tile p{font-size:14px;color:var(--ink-2);line-height:1.4}

/* study layout */
.study{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;padding-bottom:80px}
.study>*{min-width:0}
.toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:2px}
.toc a{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:2px;color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500}
.toc a:hover{background:var(--card)}
.toc a .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:10px;color:var(--paper)}
.toc a.done .dot{background:var(--ok);border-color:var(--ok)}
.toc a.done .dot::after{content:"✓"}
.toc .toc-cta{margin-top:12px}

.sec{padding-block:36px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:22px;scroll-margin-top:96px}
.sec:first-child{border-top:0;padding-top:0}
.sec-head{display:flex;flex-direction:column;gap:8px}
.sec-head h2{font-size:clamp(34px,5vw,48px)}
.prose{display:flex;flex-direction:column;gap:14px;max-width:68ch;color:var(--ink)}
.prose p{color:var(--ink-2)}
.prose strong{color:var(--ink)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border-radius:2px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card h3{font-size:22px;color:var(--claret-ink)}
.card p,.card li{font-size:15.5px;color:var(--ink-2);line-height:1.5}
.card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.card.dark{background:var(--dark);color:var(--dark-ink)}
.card.dark h3{color:var(--dark-gold)}
.card.dark p,.card.dark li{color:var(--dark-2)}
.focus{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--gold);border-radius:2px;padding:16px 18px;max-width:72ch}
.focus .eyebrow{color:var(--gold-ink);flex:none;padding-top:2px}
.focus p{font-size:15.5px;color:var(--ink-2)}
.terms{display:flex;flex-wrap:wrap;gap:8px}
.term{font-size:14px;padding:5px 11px;border-radius:99px;background:var(--card);color:var(--ink-2)}
.term b{color:var(--ink)}
.figure{background:var(--card);border-radius:2px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.figure .cap{font-size:13.5px;color:var(--ink-3)}
.figure h3{font-size:22px}
.svgbox{overflow-x:auto}
.svgbox svg{display:block;width:100%;height:auto;min-width:520px}
.sec-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--card);border-radius:2px;padding:16px 18px}

/* timeline */
.tl{display:flex;flex-direction:column;gap:0;border-left:3px solid var(--line);margin-left:6px}
.tl div{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:8px 0 8px 18px;position:relative}
.tl div::before{content:"";position:absolute;left:-8px;top:15px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--claret)}
.tl .num{font-size:26px;color:var(--claret-ink)}
.tl p{font-size:15.5px;color:var(--ink-2)}

/* pyramid */
.pyr{display:flex;flex-direction:column;align-items:center;gap:6px}
.pyr div{text-align:center;padding:14px 18px;color:#FBFBF8;border-radius:2px;display:flex;flex-direction:column;gap:2px}
.pyr b{font-family:var(--f-head);font-size:22px;text-transform:uppercase;letter-spacing:.5px}
.pyr span{font-size:14px;opacity:.88}
.pyr .l1{width:44%;background:#4F1222}.pyr .l2{width:70%;background:#7A1F35}.pyr .l3{width:96%;background:#9A6A28}

/* class ladder */
.ladder{display:flex;flex-direction:column}
.ladder div{display:flex;align-items:baseline;gap:16px;border-bottom:1.5px solid rgba(255,255,255,.14);padding:7px 0}
.ladder .num{font-size:30px;width:56px;color:var(--dark-gold);flex:none}
.ladder p{font-size:15px;color:var(--dark-2)}

/* gradient scale */
.scale{display:flex;flex-direction:column;gap:8px}
.scale .bar{display:flex;height:14px;border-radius:2px;overflow:hidden}
.scale .ends{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;color:var(--ink-2)}

/* map */
.mapgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.map svg{width:100%;height:auto;display:block;touch-action:manipulation}
.map .sea{fill:var(--water);opacity:.55}
.map .river{fill:none;stroke:var(--water-ink);stroke-linecap:round;stroke-linejoin:round}
.map .estuary{fill:var(--water);stroke:var(--water-ink);stroke-width:1.2}
.map .coast{fill:none;stroke:var(--water-ink);stroke-width:1.5}
.map .zone{cursor:pointer}
.map .zone .shape{stroke-width:1.5;transition:fill-opacity .15s}
.map .zone:hover .shape{fill-opacity:.55}
.map .zone.sel .shape{fill-opacity:.8;stroke-width:3}
.map .c-cab .shape{fill:var(--claret);stroke:var(--claret);fill-opacity:.28}
.map .c-mer .shape{fill:var(--merlot);stroke:var(--merlot);fill-opacity:.28}
.map .c-dry .shape{fill:var(--dry);stroke:var(--dry);fill-opacity:.28}
.map .c-sweet .shape{fill:var(--gold);stroke:var(--gold);fill-opacity:.32}
.map .quiz .zone .shape{fill:var(--zone);stroke:var(--ink-3);fill-opacity:.9}
.map .quiz .zone:hover .shape{fill:var(--card-2)}
.map .quiz .zone.sel .shape{fill:var(--gold);fill-opacity:.85}
.map .quiz .zone.ok .shape{fill:var(--ok);fill-opacity:.85}
.map .quiz .zone.bad .shape{fill:var(--bad);fill-opacity:.85}
.map text{font-family:var(--f-body);fill:var(--ink);font-size:16px;font-weight:600;pointer-events:none}
.map text.big{font-family:var(--f-head);font-size:20px;letter-spacing:1.5px;fill:var(--ink-2);font-weight:700}
.map text.water{fill:var(--water-ink);font-style:italic;font-weight:500;font-size:15px}
.map text.muted{fill:var(--ink-3);font-weight:500;font-style:italic}
.map .city{fill:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--ink-2)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.zinfo{position:sticky;top:96px}
.zinfo .card{gap:10px}
.zinfo .tagrow{display:flex;flex-wrap:wrap;gap:6px}
.zinfo dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:15px}
.zinfo dt{color:var(--ink-3);font-weight:600}
.zinfo dd{margin:0;color:var(--ink-2)}

/* buttons */
.btn{border:0;background:var(--claret);color:#FBFBF8;font-weight:700;padding:11px 18px;border-radius:2px;cursor:pointer;font-size:15px;letter-spacing:.2px}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.gold{background:var(--gold);color:#141414}
.btn.small{padding:7px 12px;font-size:14px}
.btn.done{background:var(--ok)}

/* quiz */
.quiz{background:var(--card);border-radius:2px;padding:22px;display:flex;flex-direction:column;gap:18px}
.quiz.mini{background:var(--paper);border:1.5px solid var(--line)}
.qhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.qhead h3{font-size:26px}
.qmeta{display:flex;gap:10px;align-items:center;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2)}
.qtime{background:var(--dark);color:var(--dark-ink);padding:4px 10px;border-radius:2px;font-family:var(--f-head);font-size:20px}
.qtime.low{background:var(--bad)}
.qbar{height:6px;border-radius:4px;background:var(--card-2);overflow:hidden}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--claret),var(--gold));transition:width .3s}
.qbody{display:flex;flex-direction:column;gap:14px}
.qtopic{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--gold-ink)}
.qq{font-size:21px;font-weight:600;line-height:1.35;max-width:60ch}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.opts.tf{grid-template-columns:1fr 1fr;max-width:420px}
.opt,.pill{border:1.5px solid var(--line);background:var(--paper);border-radius:2px;padding:12px 14px;text-align:left;cursor:pointer;font-size:16px;font-weight:500;line-height:1.35}
.opt:hover:not(:disabled),.pill:hover:not(:disabled){border-color:var(--ink-3)}
.opt.sel,.pill.sel{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--paper))}
.opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--paper))}
.opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--paper))}
.opt:disabled{cursor:default}
.hint{font-size:14px;color:var(--ink-3);font-weight:600}
.seq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:20px}
.seq li{display:flex;gap:10px;align-items:center}
.seq .n{font-family:var(--f-head);font-size:22px;width:26px;color:var(--claret-ink);font-weight:800}
.seq .slot{flex:1;border:1.5px dashed var(--line);border-radius:2px;padding:11px 14px;color:var(--ink-3);font-size:15px}
.pool{display:flex;flex-wrap:wrap;gap:8px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.match .col{display:flex;flex-direction:column;gap:8px}
.pill.p0{border-color:var(--claret);background:color-mix(in srgb,var(--claret) 18%,var(--paper))}
.pill.p1{border-color:var(--water-ink);background:color-mix(in srgb,var(--water-ink) 18%,var(--paper))}
.pill.p2{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 22%,var(--paper))}
.pill.p3{border-color:var(--merlot);background:color-mix(in srgb,var(--merlot) 18%,var(--paper))}
.pill.active{outline:3px solid var(--ink);outline-offset:1px}
.pill.ok{border-color:var(--ok);border-width:2.5px}
.pill.bad{border-color:var(--bad);border-width:2.5px}
.pill small{display:block;font-size:13px;color:var(--bad);font-weight:600;margin-top:4px}
.buckets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bucket{border:1.5px dashed var(--line);border-radius:2px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:120px;cursor:pointer;background:var(--paper);text-align:left}
.bucket.armed{border-color:var(--gold);border-style:solid}
.bucket h4{font-size:16px;color:var(--ink-2)}
.bucket .pool{gap:6px}
.qmap{max-width:560px}
.qfoot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.qfb{font-size:15.5px;color:var(--ink-2);max-width:62ch;flex:1;min-width:220px}
.qfb b{font-family:var(--f-head);text-transform:uppercase;font-size:18px;letter-spacing:.5px;margin-right:6px}
.qfb.ok b{color:var(--ok)}.qfb.bad b{color:var(--bad)}
.qbtns{display:flex;gap:8px;margin-left:auto}
.flash-ok{animation:fok .4s}.flash-bad{animation:fbad .4s}
@keyframes fok{0%{box-shadow:0 0 0 0 var(--ok)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes fbad{0%{box-shadow:0 0 0 0 var(--bad)}100%{box-shadow:0 0 0 14px transparent}}

/* results */
.res{display:grid;grid-template-columns:260px 1fr;gap:18px}
.res .score{background:var(--dark);color:var(--dark-ink);border-radius:2px;padding:22px;display:flex;flex-direction:column;gap:8px}
.res .score .num{font-size:72px;color:var(--dark-gold)}
.res .score p{color:var(--dark-2);font-size:15px}
.verdict{font-family:var(--f-head);text-transform:uppercase;font-size:24px;font-weight:800}
.verdict.pass{color:var(--ok)}.verdict.fail{color:var(--bad)}
.topics{display:flex;flex-direction:column;gap:10px}
.trow{display:grid;grid-template-columns:110px 1fr 54px;gap:10px;align-items:center;font-size:14.5px}
.trow .tb{height:10px;border-radius:2px;background:var(--card-2);overflow:hidden}
.trow .tb i{display:block;height:100%;background:var(--claret)}
.trow span:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.review{display:flex;flex-direction:column;gap:10px}
.review div{border-left:3px solid var(--bad);padding:4px 0 4px 12px}
.review b{display:block;font-size:15px}
.review p{font-size:14.5px;color:var(--ink-2)}

/* test + mocks pages */
.page{padding-block:36px 80px;display:flex;flex-direction:column;gap:24px}
.page-head{display:flex;flex-direction:column;gap:10px;max-width:70ch}
.page-head h2{font-size:clamp(36px,5vw,56px)}
.page-head p{color:var(--ink-2);font-size:18px}
.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.mock{background:var(--card);border-radius:2px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.mock h3{font-size:24px}
.mock .meta{display:flex;flex-wrap:wrap;gap:6px}
.mock p{font-size:15px;color:var(--ink-2);flex:1}
.mock .best{font-size:14px;color:var(--ink-3);font-weight:600}
.mock.locked{opacity:.6}
.mock.locked h3{color:var(--ink-3)}
.gate{background:var(--dark);color:var(--dark-ink);border-radius:2px;padding:24px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.gate h3{font-size:28px;color:var(--dark-gold)}
.gate ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15.5px;color:var(--dark-2)}
.gate li::before{content:"○";margin-right:8px;color:var(--dark-2)}
.gate li.met{color:var(--dark-ink)}
.gate li.met::before{content:"●";color:var(--dark-gold)}
.gate .note{font-size:14px;color:var(--dark-2);margin-top:10px}

/* record */
.record{border:2px solid var(--gold);border-radius:2px;padding:30px;display:flex;flex-direction:column;gap:14px;background:var(--paper);position:relative;overflow:hidden}
.record::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,var(--claret) 40%,var(--gold) 40%)}
.record h3{font-size:30px;color:var(--claret-ink)}
.record .name{font-family:var(--f-head);font-size:40px;font-weight:800;text-transform:uppercase;border-bottom:1.5px solid var(--line);padding-bottom:6px;min-height:52px}
.record p{color:var(--ink-2)}
.record .sig{display:flex;gap:40px;flex-wrap:wrap;font-size:14px;color:var(--ink-3);padding-top:10px}
.record .sig b{display:block;color:var(--ink);font-size:15px}
.record .fine{font-size:13px;color:var(--ink-3)}
.field{display:flex;flex-direction:column;gap:6px;max-width:360px}
.field label{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-3)}
.field input{font:inherit;padding:10px 12px;border-radius:2px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}

footer{border-top:1px solid var(--line);padding-block:22px;color:var(--ink-3);font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .study{grid-template-columns:1fr}
  .toc{position:sticky;top:118px;z-index:5;flex-direction:row;overflow-x:auto;background:var(--paper);padding-block:8px;margin-inline:-4px;scrollbar-width:none}
  .toc a{white-space:nowrap;flex:none;background:var(--card)}
  .toc .toc-cta{display:none}
  .mapgrid{grid-template-columns:1fr}
  .zinfo{position:static}
  .res{grid-template-columns:1fr}
  .rules{grid-template-columns:repeat(2,1fr)}
  .gate{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tabs{width:100%}.tab{flex:1;padding:8px 6px;font-size:14px}
  .match,.buckets{grid-template-columns:1fr}
  .tile .num{font-size:38px}
  .opts.tf{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}