/* ==========================================================================
   TOGAF 10 EA Foundation — Study Site
   ========================================================================== */
:root{
  --bg:#f6f8fb; --bg2:#ffffff; --bg3:#eef2f7; --bg4:#e2e8f1;
  --fg:#131c28; --fg2:#465667; --fg3:#6c7c8f;
  --line:#d9e0ea; --line2:#c2ccd9;
  --acc:#0f6d8c; --acc2:#0b5570; --accbg:#e2f1f7;
  --gold:#8a5d00; --goldbg:#fdf3dc;
  --grn:#1f6b45; --grnbg:#e3f3ea;
  --red:#a3282f; --redbg:#fbe8e9;
  --pur:#5b3d8a; --purbg:#eee9f8;
  --cyan:#0e7490; --pink:#a2325f; --orange:#9a5518;
  --shadow:0 1px 2px rgba(16,32,54,.05),0 4px 16px rgba(16,32,54,.07);
  --shadow2:0 8px 30px rgba(16,32,54,.12);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --topH:56px; --sideW:266px; --gut:clamp(14px,3.2vw,36px); --r:14px;
}
html[data-theme="dark"]{
  --bg:#0e131a; --bg2:#161d26; --bg3:#1d2631; --bg4:#27323f;
  --fg:#e7edf4; --fg2:#a8b6c6; --fg3:#8492a4;
  --line:#28323f; --line2:#384453;
  --acc:#4fb8d8; --acc2:#84d3ea; --accbg:#10303d;
  --gold:#e0b455; --goldbg:#32280f;
  --grn:#5fca94; --grnbg:#113127;
  --red:#f0868d; --redbg:#39181b;
  --pur:#b79ce8; --purbg:#241a39;
  --cyan:#5fc9dd; --pink:#f08bb0; --orange:#e6a15f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  --shadow2:0 10px 34px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e131a; --bg2:#161d26; --bg3:#1d2631; --bg4:#27323f;
    --fg:#e7edf4; --fg2:#a8b6c6; --fg3:#8492a4;
    --line:#28323f; --line2:#384453;
    --acc:#4fb8d8; --acc2:#84d3ea; --accbg:#10303d;
    --gold:#e0b455; --goldbg:#32280f;
    --grn:#5fca94; --grnbg:#113127;
    --red:#f0868d; --redbg:#39181b;
    --pur:#b79ce8; --purbg:#241a39;
    --cyan:#5fc9dd; --pink:#f08bb0; --orange:#e6a15f;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
    --shadow2:0 10px 34px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topH) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.62;overflow-wrap:break-word}
body.lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:60;height:var(--topH);
  background:color-mix(in srgb,var(--bg2) 93%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;
  padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:9px;font-weight:750;letter-spacing:-.015em;
  font-size:clamp(13px,2.6vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;color:var(--fg);text-decoration:none}
.brand .logo{width:26px;height:26px;flex:none;border-radius:7px;background:var(--acc);
  color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:0}
.brand em{font-style:normal;color:var(--fg3);font-weight:600}
.top .sp{flex:1 1 auto;min-width:0}
.pbar{position:absolute;left:0;bottom:-1px;height:2px;background:var(--acc);width:0}

.btn{font:inherit;font-size:13px;font-weight:640;padding:7px 12px;border-radius:9px;
  border:1px solid var(--line2);background:var(--bg2);color:var(--fg);cursor:pointer;
  white-space:nowrap;min-height:38px;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;transition:background .12s,border-color .12s}
.btn:hover{background:var(--bg3);border-color:var(--acc)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.pri:hover{background:var(--acc2);border-color:var(--acc2)}
.btn.ico{padding:7px 9px;font-size:15px;min-width:38px}
.btn.sm{min-height:32px;padding:5px 10px;font-size:12.5px}
#menuBtn{display:none}

/* search */
.search{position:relative;flex:0 1 300px;min-width:0}
.search input{width:100%;font:inherit;font-size:13.5px;padding:8px 30px 8px 32px;
  border-radius:9px;border:1px solid var(--line2);background:var(--bg);color:var(--fg);min-height:38px}
.search input:focus{outline:none;border-color:var(--acc);background:var(--bg2)}
.search .mag{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--fg3);font-size:13px;pointer-events:none}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--mono);
  font-size:10px;color:var(--fg3);border:1px solid var(--line);border-radius:4px;padding:1px 4px;
  background:var(--bg2);pointer-events:none}
.results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow2);max-height:min(70vh,460px);
  overflow-y:auto;display:none;z-index:80;padding:5px}
.results.on{display:block}
.results a{display:block;padding:8px 11px;border-radius:8px;text-decoration:none;color:var(--fg);font-size:13.5px}
.results a:hover,.results a.cur{background:var(--accbg)}
.results a .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--acc);font-weight:750}
.results a .s{color:var(--fg3);font-size:12.5px;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.results .empty{padding:14px;color:var(--fg3);font-size:13.5px;text-align:center}

/* ---------- layout ---------- */
.wrap{display:flex;align-items:flex-start;max-width:1620px;margin:0 auto}
.scrim{position:fixed;inset:0;z-index:54;background:rgba(6,12,20,.55);opacity:0;
  pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
nav.side{position:sticky;top:var(--topH);width:var(--sideW);flex:0 0 var(--sideW);
  height:calc(100vh - var(--topH));overflow-y:auto;overscroll-behavior:contain;
  padding:14px 8px 60px 14px;border-right:1px solid var(--line);font-size:13.5px}
nav.side h4{margin:15px 0 5px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg3);font-weight:750;padding-left:9px}
nav.side h4:first-child{margin-top:0}
nav.side a{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:8px;
  color:var(--fg2);text-decoration:none;line-height:1.3;margin-bottom:1px;min-height:34px}
nav.side a:hover{background:var(--bg3);color:var(--fg)}
nav.side a.on{background:var(--accbg);color:var(--acc);font-weight:680}
nav.side a .ic{width:19px;flex:none;text-align:center;font-size:13px;opacity:.85}
nav.side a .qw{margin-left:auto;font-size:10.5px;color:var(--fg3);background:var(--bg3);
  padding:1px 6px;border-radius:20px;font-weight:750;flex:none}
nav.side a.on .qw{background:var(--bg2);color:var(--acc)}
nav.side .prog{margin:10px 9px 4px;padding:11px 12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:11px}
nav.side .prog .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--fg3);font-weight:750;display:flex;justify-content:space-between;gap:6px}
nav.side .prog b{color:var(--acc);font-variant-numeric:tabular-nums}
main{flex:1 1 auto;min-width:0;padding:clamp(18px,2.6vw,30px) var(--gut) 120px;max-width:1150px}

/* ---------- typography ---------- */
h1{font-size:clamp(23px,4.6vw,33px);line-height:1.14;letter-spacing:-.025em;margin:0 0 8px}
h2{font-size:clamp(18px,3.5vw,23px);line-height:1.22;letter-spacing:-.018em;
  margin:clamp(30px,4.6vw,44px) 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:9px}
h3{font-size:clamp(15.5px,3vw,17px);margin:26px 0 8px;letter-spacing:-.01em}
h4{font-size:14.4px;margin:20px 0 6px}
p{margin:10px 0}
ul,ol{margin:9px 0;padding-left:21px}
li{margin:4px 0}
li::marker{color:var(--acc)}
a{color:var(--acc)}
strong{font-weight:670}
code{font-family:var(--mono);font-size:.87em;background:var(--bg3);padding:1px 5px;border-radius:4px}
.lede{font-size:clamp(15px,3.1vw,16.6px);color:var(--fg2);margin-bottom:4px}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  font-weight:780;margin-bottom:5px}
.sub{color:var(--fg3);font-size:13.4px;margin:2px 0 16px}
.muted{color:var(--fg3)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:730;
  background:var(--bg3);color:var(--fg2);padding:2px 9px;border-radius:20px;white-space:nowrap}
.chip.acc{background:var(--accbg);color:var(--acc)}
.chip.gold{background:var(--goldbg);color:var(--gold)}
.chip.grn{background:var(--grnbg);color:var(--grn)}
.chip.red{background:var(--redbg);color:var(--red)}
.chip.pur{background:var(--purbg);color:var(--pur)}
.lo{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:750;
  background:var(--purbg);color:var(--pur);padding:1.5px 6px;border-radius:5px;white-space:nowrap}
.src{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--fg3);
  border:1px solid var(--line);padding:0 5px;border-radius:4px;white-space:nowrap}

/* ---------- cards / boxes ---------- */
.box{border:1px solid var(--line);background:var(--bg2);border-radius:var(--r);
  padding:clamp(13px,2.8vw,17px) clamp(14px,3vw,19px);margin:16px 0;box-shadow:var(--shadow)}
.box>:first-child{margin-top:0}.box>:last-child{margin-bottom:0}
.box .bt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:760;
  margin-bottom:7px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.box.key{border-left:3px solid var(--acc);background:var(--accbg)} .box.key .bt{color:var(--acc)}
.box.exam{border-left:3px solid var(--gold);background:var(--goldbg)} .box.exam .bt{color:var(--gold)}
.box.trap{border-left:3px solid var(--red);background:var(--redbg)} .box.trap .bt{color:var(--red)}
.box.mem{border-left:3px solid var(--pur);background:var(--purbg)} .box.mem .bt{color:var(--pur)}
.box.def{border-left:3px solid var(--grn);background:var(--grnbg)} .box.def .bt{color:var(--grn)}

.grid{display:grid;gap:13px;margin:16px 0}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr))}
.card{border:1px solid var(--line);background:var(--bg2);border-radius:12px;padding:14px 16px;
  box-shadow:var(--shadow)}
.card h5{margin:0 0 5px;font-size:14px;color:var(--acc);letter-spacing:-.005em}
.card p{margin:0;font-size:13.5px;color:var(--fg2);line-height:1.5}
.card .n{font-family:var(--mono);font-size:10.5px;color:var(--fg3);display:block;margin-bottom:3px}
a.card{text-decoration:none;color:inherit;display:block;transition:border-color .12s,transform .12s,box-shadow .12s}
a.card:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--shadow2)}

/* ---------- stat tiles ---------- */
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat .v{font-size:clamp(21px,4.4vw,28px);font-weight:780;letter-spacing:-.035em;line-height:1.05;
  color:var(--acc);font-variant-numeric:tabular-nums}
.stat .v small{font-size:.5em;font-weight:700;letter-spacing:0}
.stat .k{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg3);
  font-weight:750;margin-top:4px}
.stat .note{font-size:11.5px;color:var(--fg3);margin-top:6px;line-height:1.4}
.stat.gold .v{color:var(--gold)} .stat.grn .v{color:var(--grn)}
.stat.red .v{color:var(--red)} .stat.pur .v{color:var(--pur)}

/* ---------- tables ---------- */
.tw{position:relative;margin:16px 0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg2);overflow-x:auto}
.tw.enh{overflow:visible}
.tsc{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:clamp(13.2px,2.7vw,14px);min-width:520px}
th,td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg3);font-size:10.6px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:760;color:var(--fg2);white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg3)}
td.ph{font-weight:700;color:var(--acc)}
td.ph.nw{white-space:nowrap}
td ul,td ol{margin:2px 0;padding-left:17px}
.tw.tight table{font-size:clamp(12.8px,2.6vw,13.4px)}
.tw.tight th,.tw.tight td{padding:7px 11px}
.tw[data-sc="1"]::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:26px;
  border-radius:0 var(--r) var(--r) 0;pointer-events:none;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--bg2) 86%,var(--fg3)))}
.tw[data-sc="1"][data-end="1"]::after{display:none}
.swipe{display:none;font-size:10.4px;color:var(--fg3);font-weight:750;letter-spacing:.05em;
  text-transform:uppercase;padding:5px 12px 0}
.tw[data-sc="1"] .swipe{display:block}

/* ---------- charts ---------- */
.chartCard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow)}
.chartCard h5{margin:0 0 2px;font-size:14px;letter-spacing:-.01em}
.chartCard .cap{font-size:12px;color:var(--fg3);margin:0 0 12px;line-height:1.45}
.donutWrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.donutWrap svg{flex:none}
.legend{display:grid;gap:5px;font-size:12.7px;min-width:170px;flex:1 1 170px}
.legend .li{display:flex;align-items:center;gap:8px;padding:2px 0;cursor:default;border-radius:6px}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:none}
.legend .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg2)}
.legend .vl{font-variant-numeric:tabular-nums;font-weight:750;color:var(--fg);flex:none}
.bars{display:grid;gap:9px;margin-top:4px}
.bars .row{display:grid;grid-template-columns:minmax(84px,auto) 1fr auto;gap:10px;align-items:center;font-size:12.8px}
.bars .row .nm{color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .row .tr{height:9px;background:var(--bg4);border-radius:6px;overflow:hidden}
.bars .row .tr i{display:block;height:100%;border-radius:6px;background:var(--acc)}
.bars .row .vl{font-variant-numeric:tabular-nums;font-weight:750;font-size:12px;color:var(--fg3);min-width:40px;text-align:right}
.ring{display:grid;place-items:center;position:relative}
.ring .mid{position:absolute;text-align:center;line-height:1.1}
.ring .mid b{font-size:22px;font-weight:790;letter-spacing:-.03em;color:var(--acc);display:block;
  font-variant-numeric:tabular-nums}
.ring .mid span{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);font-weight:750}

/* ---------- breadcrumb / page nav ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.7px;
  color:var(--fg3);margin-bottom:12px}
.crumb a{color:var(--fg2);text-decoration:none;padding:3px 8px;border-radius:7px;background:var(--bg3)}
.crumb a:hover{background:var(--accbg);color:var(--acc)}
.crumb i{font-style:normal;opacity:.6}
.pagenav{display:flex;gap:10px;justify-content:space-between;margin:30px 0 0;
  padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.pagenav a{flex:1 1 210px;min-width:0;text-decoration:none;border:1px solid var(--line);
  background:var(--bg2);border-radius:12px;padding:11px 14px;box-shadow:var(--shadow);
  transition:border-color .12s,transform .12s}
.pagenav a:hover{border-color:var(--acc);transform:translateY(-1px)}
.pagenav a .d{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg3);font-weight:750}
.pagenav a .t{font-weight:700;color:var(--fg);font-size:14px;display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagenav a.nx{text-align:right}

/* ---------- misc ---------- */
.mn{font-family:var(--mono);font-size:clamp(13px,2.7vw,14.6px);font-weight:760;color:var(--acc);letter-spacing:.02em}
.chain{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:11px 0;font-size:12.7px}
.chain b{background:var(--accbg);color:var(--acc);padding:3px 9px;border-radius:7px;font-weight:730;
  border:1px solid color-mix(in srgb,var(--acc) 28%,transparent)}
.chain i{color:var(--fg3);font-style:normal}
.tglrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0;
  padding:11px 13px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.tglrow .sp{flex:1}
select.btn{padding:7px 9px;max-width:min(100%,230px)}
.doneBtn{display:inline-flex;align-items:center;gap:7px}
.doneBtn.is-done{background:var(--grnbg);border-color:var(--grn);color:var(--grn)}
.resume{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--goldbg);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);border-left:3px solid var(--gold);
  border-radius:12px;padding:12px 15px;margin:0 0 18px}
.resume .tx{flex:1 1 220px;min-width:0;font-size:13.6px}
.resume .tx b{color:var(--gold)}
.hl{background:color-mix(in srgb,var(--gold) 34%,transparent);border-radius:3px;padding:0 1px}
.xref{color:var(--acc);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--acc) 55%,transparent);cursor:pointer}
.xref:hover{border-bottom-style:solid;background:var(--accbg);border-radius:3px}
hr{border:none;border-top:1px solid var(--line);margin:28px 0}
footer{border-top:1px solid var(--line);margin-top:46px;padding-top:18px;font-size:12.4px;color:var(--fg3)}
.toTop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  width:44px;height:44px;border-radius:50%;display:none;place-items:center;background:var(--acc);
  color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow2);font-size:18px}
.toTop.show{display:grid}
.fadeIn{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1239px){ :root{--sideW:228px} nav.side{font-size:13px;padding-left:10px} }
@media (max-width:1023px){
  #menuBtn{display:inline-flex}
  nav.side{position:fixed;left:0;top:var(--topH);z-index:55;width:min(86vw,306px);
    flex-basis:min(86vw,306px);background:var(--bg2);font-size:14px;
    transform:translateX(-102%);transition:transform .2s ease;box-shadow:10px 0 34px rgba(0,0,0,.22);padding-left:14px}
  nav.side.open{transform:none}
  nav.side a{min-height:40px}
  main{max-width:none}
  .search{flex-basis:190px}
}
@media (max-width:720px){
  .search kbd{display:none}
  .search{flex-basis:140px}
  .brand em{display:none}
}
@media (max-width:640px){
  :root{--topH:54px;--r:12px}
  .tw.st2 table{min-width:0}
  .tw.st2 .tsc{overflow-x:visible}
  .tw.st2 thead{display:none}
  .tw.st2 tbody,.tw.st2 tr,.tw.st2 td{display:block}
  .tw.st2 tr{border-bottom:1px solid var(--line);padding:11px 13px}
  .tw.st2 tr:last-child{border-bottom:none}
  .tw.st2 td{border:none;padding:0}
  .tw.st2 td:first-child{font-weight:750;color:var(--acc);margin-bottom:4px;font-size:13.6px;white-space:normal}
  .tw.st2 td:last-child{font-size:13.8px;line-height:1.55}
  .tw.st2::after,.tw.st2 .swipe{display:none}
  .tw.st2 tbody tr:hover{background:none}
  .donutWrap{justify-content:center}
}
@media (max-width:430px){ .btn{font-size:12.5px;padding:7px 10px} th,td{padding:8px 10px} }
@media (pointer:coarse){ nav.side a{min-height:42px} .btn{min-height:42px} }

@media print{
  nav.side,.top,.toTop,.scrim,.swipe,.tglrow,.pagenav,.crumb,.resume{display:none!important}
  main{max-width:none;padding:0}
  body{font-size:10.5pt;background:#fff;color:#000}
  .tsc{overflow:visible} table{min-width:0}
  .box,.card,.tw,.chartCard{break-inside:avoid;box-shadow:none}
  a{color:#000;text-decoration:none}
}

/* ==========================================================================
   Exam-practice components
   ========================================================================== */

/* sticky in-page section nav */
.toc{position:sticky;top:calc(var(--topH) + 8px);z-index:40;display:flex;gap:6px;flex-wrap:wrap;
  padding:9px 11px;margin:18px 0 26px;background:color-mix(in srgb,var(--bg2) 94%,transparent);
  backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.toc a{font-size:12.2px;font-weight:680;text-decoration:none;color:var(--fg2);
  padding:4px 10px;border-radius:20px;background:var(--bg3);white-space:nowrap}
.toc a:hover{background:var(--accbg);color:var(--acc)}
.toc a.on{background:var(--acc);color:#fff}

/* section heading with a rule */
.sec{scroll-margin-top:calc(var(--topH) + 66px)}
.sec>h2{border-top:2px solid var(--line);padding-top:16px}
.secN{font-family:var(--mono);font-size:12px;font-weight:750;color:#fff;background:var(--acc);
  width:23px;height:23px;border-radius:7px;display:inline-grid;place-items:center;flex:none}

/* ---------- weighting bars ---------- */
.wbar{display:grid;grid-template-columns:minmax(140px,1.1fr) 1fr auto;gap:11px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:13.4px}
.wbar:last-child{border-bottom:none}
.wbar .nm{min-width:0}
.wbar .nm b{display:block;font-weight:700;line-height:1.25}
.wbar .nm span{font-size:11.4px;color:var(--fg3)}
.wbar .tr{height:20px;background:var(--bg3);border-radius:6px;overflow:hidden;position:relative}
.wbar .tr i{display:block;height:100%;border-radius:6px;background:var(--acc)}
.wbar.hot .tr i{background:var(--gold)}
.wbar .vl{font-variant-numeric:tabular-nums;font-weight:780;color:var(--fg);white-space:nowrap;
  font-size:13.6px;min-width:66px;text-align:right}
.wbar .vl em{font-style:normal;color:var(--fg3);font-weight:650;font-size:11.6px}

/* ---------- question-format cards ---------- */
.fmt{border:1px solid var(--line);background:var(--bg2);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow);margin:13px 0}
.fmt .hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.fmt .hd h4{margin:0;font-size:15.2px;letter-spacing:-.01em}
.fmt .share{margin-left:auto;font-size:11.4px;font-weight:780;color:var(--acc);
  background:var(--accbg);padding:2px 9px;border-radius:20px;white-space:nowrap}
.fmt .shape{font-family:var(--mono);font-size:12.4px;color:var(--fg2);background:var(--bg3);
  border-left:3px solid var(--line2);border-radius:0 8px 8px 0;padding:8px 12px;margin:0 0 9px}
.fmt .eg{font-size:13.4px;color:var(--fg2);font-style:italic;margin:0 0 10px;
  padding-left:12px;border-left:2px solid var(--acc)}
.fmt .atk{font-size:13.5px;margin:0;line-height:1.55}
.fmt .atk::before{content:"How to attack it — ";font-weight:760;color:var(--grn);font-style:normal}

/* ---------- deliverable x phase matrix ---------- */
.mx{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);
  box-shadow:var(--shadow);overflow-x:auto;margin:18px 0}
.mx table{min-width:660px;font-size:12.8px;border-collapse:collapse;width:100%}
.mx th,.mx td{border-bottom:1px solid var(--line);padding:0}
.mx thead th{background:var(--bg3);font-size:10.4px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:760;color:var(--fg2);text-align:center;padding:8px 3px;white-space:nowrap}
.mx thead th:first-child{text-align:left;padding-left:13px;min-width:210px}
/* Row labels are full deliverable names — override the global uppercase th style. */
.mx tbody th{text-align:left;font-weight:640;color:var(--fg);padding:7px 13px;font-size:13px;
  background:var(--bg2);line-height:1.3;text-transform:none;letter-spacing:0;white-space:normal}
.mx tbody tr:hover th,.mx tbody tr:hover td{background:var(--bg3)}
.mx td{text-align:center;padding:7px 3px}
.mx .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line2)}
.mx .first{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:10.5px;font-weight:800;line-height:1}
.mx tbody tr:last-child th,.mx tbody tr:last-child td{border-bottom:none}
.mxkey{display:flex;gap:16px;flex-wrap:wrap;font-size:12.4px;color:var(--fg3);margin:-6px 0 20px;
  padding-left:2px;align-items:center}
.mxkey span{display:inline-flex;align-items:center;gap:6px}

/* ---------- deliverable cards, shape-coded by first phase ---------- */
.dlv{border:1px solid var(--line);background:var(--bg2);border-radius:var(--r);
  box-shadow:var(--shadow);padding:15px 17px;position:relative;overflow:hidden}
.dlv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.dlv.p-PRE::before{background:var(--fg3)}
.dlv.p-A::before{background:var(--acc)}
.dlv.p-B::before,.dlv.p-C::before,.dlv.p-D::before{background:var(--grn)}
.dlv.p-E::before,.dlv.p-F::before{background:var(--orange)}
.dlv.p-G::before,.dlv.p-H::before{background:var(--pur)}
.dlv.p-RM::before{background:var(--pink)}
.dlv h4{margin:0 0 3px;font-size:15px;letter-spacing:-.012em;padding-right:4px}
.dlv .ph{display:flex;gap:4px;flex-wrap:wrap;margin:7px 0 10px}
.dlv .ph b{font-family:var(--mono);font-size:10.6px;font-weight:750;padding:1.5px 6px;border-radius:5px;
  background:var(--bg3);color:var(--fg3)}
.dlv .ph b.is1{background:var(--acc);color:#fff}
.dlv p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--fg2)}
.dlv .cts{font-size:12.7px;color:var(--fg3);line-height:1.6;border-top:1px dashed var(--line);
  padding-top:9px;margin-top:2px}
.dlv .cts b{color:var(--fg2);font-weight:700;display:block;font-size:10.6px;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:3px}

/* group heading for the deliverable lanes */
.lane{display:flex;align-items:center;gap:10px;margin:30px 0 12px;font-size:13px;font-weight:750;
  color:var(--fg2);letter-spacing:.02em}
.lane .pill{font-family:var(--mono);font-size:11.4px;font-weight:800;color:#fff;background:var(--acc);
  padding:3px 10px;border-radius:20px;flex:none}
.lane.l-PRE .pill{background:var(--fg3)} .lane.l-A .pill{background:var(--acc)}
.lane.l-B .pill,.lane.l-E .pill{background:var(--grn)}
.lane.l-F .pill{background:var(--orange)} .lane.l-G .pill{background:var(--pur)}
.lane.l-H .pill{background:var(--pur)} .lane.l-RM .pill{background:var(--pink)}
.lane .rule{flex:1;height:1px;background:var(--line)}

/* ---------- checklist ---------- */
.checkl{list-style:none;padding:0;margin:14px 0;display:grid;gap:7px}
.checkl li{display:flex;gap:11px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);
  border-radius:11px;padding:11px 14px;font-size:13.7px;box-shadow:var(--shadow);cursor:pointer;
  transition:border-color .12s,background .12s}
.checkl li::marker{content:none}
.checkl li:hover{border-color:var(--acc)}
.checkl li .bx{width:19px;height:19px;flex:none;border:2px solid var(--line2);border-radius:6px;
  display:grid;place-items:center;font-size:12px;color:transparent;margin-top:1px}
.checkl li.done{background:var(--grnbg);border-color:var(--grn)}
.checkl li.done .bx{background:var(--grn);border-color:var(--grn);color:#fff}
.checkl li.done .tx{text-decoration:line-through;opacity:.68}

/* ---------- glossary ---------- */
.gterm{border-bottom:1px solid var(--line);padding:13px 2px}
.gterm:last-child{border-bottom:none}
.gterm h4{margin:0 0 4px;font-size:14.6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gterm p{margin:0;font-size:13.6px;color:var(--fg2);line-height:1.58}
.azbar{display:flex;flex-wrap:wrap;gap:3px;margin:12px 0 6px}
.azbar a{font-family:var(--mono);font-size:11.6px;font-weight:750;color:var(--fg3);text-decoration:none;
  padding:2px 7px;border-radius:6px;background:var(--bg3)}
.azbar a:hover{background:var(--accbg);color:var(--acc)}
.azbar a.off{opacity:.32;pointer-events:none}
.gletter{scroll-margin-top:calc(var(--topH) + 74px);font-family:var(--mono);font-size:12px;
  font-weight:800;color:var(--acc);letter-spacing:.1em;margin:24px 0 2px}

/* ---------- master sheet image ---------- */
.sheetWrap{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);
  box-shadow:var(--shadow);padding:10px;margin:18px 0;overflow:auto}
.sheetWrap img{display:block;width:100%;height:auto;border-radius:8px}
.sheetWrap.zoom{cursor:zoom-out}
.sheetWrap.zoom img{width:auto;max-width:none;min-width:1672px;cursor:zoom-out}
.sheetWrap:not(.zoom) img{cursor:zoom-in}

/* ---------- misc additions ---------- */
.pairs{display:grid;gap:9px;margin:14px 0}
.pair{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:12px;align-items:start;
  border:1px solid var(--line);background:var(--bg2);border-radius:11px;padding:10px 14px;
  box-shadow:var(--shadow);font-size:13.4px}
.pair .lt{font-weight:730;color:var(--red)}
.pair .rt{color:var(--fg2);line-height:1.52}
.numgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));margin:14px 0}
.numgrid .nx{display:flex;gap:11px;align-items:baseline;border:1px solid var(--line);background:var(--bg2);
  border-radius:10px;padding:9px 13px;box-shadow:var(--shadow);font-size:13.2px}
.numgrid .nx b{font-family:var(--mono);font-size:16px;font-weight:800;color:var(--acc);flex:none;
  min-width:30px;font-variant-numeric:tabular-nums}
.numgrid .nx span{color:var(--fg2);line-height:1.45}
@media (max-width:640px){
  .toc{position:static}
  .wbar{grid-template-columns:1fr auto;gap:6px}
  .wbar .tr{grid-column:1/-1}
  .pair{grid-template-columns:1fr;gap:3px}
}
@media print{ .toc,.azbar{display:none!important} .sheetWrap{page-break-inside:avoid} }

/* ---------- learning outcomes ---------- */
details.uni{border:1px solid var(--line);background:var(--bg2);border-radius:var(--r);
  box-shadow:var(--shadow);margin:12px 0;overflow:hidden}
details.uni>summary{cursor:pointer;list-style:none;padding:12px 16px;display:flex;gap:9px;
  align-items:center;flex-wrap:wrap;font-size:14.2px;background:var(--bg2)}
details.uni>summary::-webkit-details-marker{display:none}
details.uni>summary::before{content:"\25B8";color:var(--acc);font-size:12px;flex:none;
  transition:transform .15s}
details.uni[open]>summary::before{transform:rotate(90deg)}
details.uni>summary:hover{background:var(--bg3)}
details.uni>summary b{font-weight:730;letter-spacing:-.01em}
details.uni[open]>summary{border-bottom:1px solid var(--line)}
.loQ{padding:12px 16px;border-bottom:1px solid var(--line)}
.loQ:last-child{border-bottom:none}
.loQ h4{margin:0 0 5px;font-size:13.9px;font-weight:700;display:flex;gap:7px;
  align-items:baseline;flex-wrap:wrap;line-height:1.4}
.loQ p{margin:0;font-size:13.5px;color:var(--fg2);line-height:1.58}
@media print{ details.uni{break-inside:avoid} details.uni>summary::before{content:""} }

/* ==========================================================================
   Diagram gallery
   ========================================================================== */
.dgGrid{display:grid;gap:13px;margin:14px 0 4px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.dgCard{display:flex;flex-direction:column;gap:0;padding:0;text-align:left;font:inherit;
  border:1px solid var(--line);background:var(--bg2);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);cursor:zoom-in;transition:border-color .12s,transform .12s,box-shadow .12s}
.dgCard:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--shadow2)}
/* Figures vary from wide banners to tall portraits, so size the img box to the
   thumbnail and let object-fit letterbox whatever shape arrives. */
.dgCard .thumb{display:block;background:#fff;height:168px;overflow:hidden;
  border-bottom:1px solid var(--line);padding:8px}
.dgCard .thumb img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.dgCard .meta{display:block;padding:10px 13px 12px}
.dgCard .meta b{display:block;font-size:13.6px;font-weight:700;line-height:1.32;color:var(--fg);
  letter-spacing:-.01em;margin-bottom:4px}
.dgCard .rf{display:block;font-family:var(--mono);font-size:10.6px;color:var(--fg3)}
.dgCard .pri{display:inline-block;margin-top:7px;font-size:10.4px;font-weight:780;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:20px;background:var(--bg3);color:var(--fg3)}
.dgCard.pri3 .pri{background:var(--goldbg);color:var(--gold)}
.dgCard.pri2 .pri{background:var(--accbg);color:var(--acc)}
.dgCard.pri3{border-left:3px solid var(--gold)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,12,20,.82);backdrop-filter:blur(4px);
  display:none;flex-direction:column;padding:14px}
.lb.on{display:flex}
.lbBar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 2px 11px;color:#fff}
.lbBar b{font-size:15px;letter-spacing:-.01em}
.lbBar .sp{flex:1}
.lbBar .chip{background:rgba(255,255,255,.16);color:#fff}
.lbBar .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.lbBar .btn:hover{background:rgba(255,255,255,.2);border-color:#fff}
.lbBody{flex:1;min-height:0;display:grid;grid-template-columns:1fr minmax(260px,340px);gap:14px}
.lbImg{background:#fff;border-radius:12px;overflow:auto;display:grid;place-items:center;padding:12px}
.lbImg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in}
.lbImg.zoom{place-items:start}
.lbImg.zoom img{max-width:none;max-height:none;width:auto;height:auto;cursor:zoom-out}
.lbSide{background:var(--bg2);border-radius:12px;padding:15px 17px;overflow-y:auto;
  overscroll-behavior:contain}
.lbSide h4{margin:0 0 6px;font-size:10.8px;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);
  font-weight:780}
.lbSide h4+p,.lbSide h4+ul{margin-top:0}
.lbSide p{font-size:13.4px;color:var(--fg2);line-height:1.55;margin:0 0 16px}
.lbSide ul{margin:0 0 14px;padding-left:18px}
.lbSide li{font-size:13.2px;line-height:1.5;margin:0 0 7px;color:var(--fg2)}
.lbSide li::marker{color:var(--acc)}
.lbSrc{font-size:11.4px!important;color:var(--fg3)!important;border-top:1px solid var(--line);
  padding-top:10px;margin:0!important}
@media (max-width:860px){
  .lbBody{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .lbSide{max-height:44vh}
  .lbBar b{width:100%}
}
@media print{ .lb{display:none!important} .dgCard{break-inside:avoid} }

/* inline link from the notes into a gallery figure */
.figLink{display:inline-flex;align-items:center;gap:6px;font-size:12.6px;font-weight:680;
  text-decoration:none;color:var(--acc);background:var(--accbg);border-radius:20px;
  padding:3px 11px;margin:3px 6px 3px 0;
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent)}
.figLink:hover{background:var(--acc);color:#fff;border-color:var(--acc)}