/* Shared styling of the study guides (site/<slug>/study-guide.html, written by tools/new-study-guide.js).
   Same tokens as the exam pages; light by default, dark from the Theme button. */

/* ============ tokens : light is the base (same as the exam pages) ============ */
:root{
  --paper:#F0F9FF;
  --surface:#FFFFFF;
  --surface-2:#E7EFF5;
  --ink:#0C2E43;
  --ink-2:#3D5567;
  --ink-3:#405360;
  --rule:#BAE6FD;
  --rule-2:#8ECBEE;
  --brand:#065E8C;
  --brand-hi:#04496D;
  --brand-soft:#DDEEF8;
  --accent:#8A5206;
  --accent-soft:#F6EBD8;
  --good:#136B42;
  --good-soft:#DCEFE4;
  --bad:#A81E13;
  --bad-soft:#F8E0DD;
  --btn-ink:#FFFFFF;
  /* one hue per exam domain, same as the quiz navigator */
  --s1:#0B6FA4; --s2:#0E7C6B; --s3:#6B4BA8; --s4:#B06A06; --s5:#B03060; --s6:#4D7A12;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shadow:0 1px 2px rgba(6,45,70,.05), 0 12px 32px -18px rgba(6,45,70,.3);
  --dots:rgba(6,94,140,.13);
}
:root[data-theme="dark"]{
  --paper:#081019;
  --surface:#101B27;
  --surface-2:#182836;
  --ink:#EAF2F8;
  --ink-2:#A8BECD;
  --ink-3:#93A9B8;
  --rule:#1E3141;
  --rule-2:#335066;
  --brand:#5CC8F5;
  --brand-hi:#8FDBFA;
  --brand-soft:#0B2A3C;
  --accent:#F0B429;
  --accent-soft:#2C2211;
  --good:#4ADE9B;
  --good-soft:#0C2A1D;
  --bad:#FF8A80;
  --bad-soft:#2E1416;
  --btn-ink:#0A1219;
  --s1:#5CC8F5; --s2:#4FD3B8; --s3:#B49BF0; --s4:#F0B429; --s5:#F58BAE; --s6:#A8DB6B;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -22px rgba(0,0,0,.9);
  --dots:rgba(92,200,245,.11);
}


/* ============ base ============ */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);background-image:radial-gradient(var(--dots) 1px,transparent 1px);background-size:22px 22px;
  color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
h1,h2,h3{font-weight:400;text-wrap:balance}
a{color:var(--brand);text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--brand);color:var(--btn-ink);font-weight:600;padding:12px 18px;border-radius:9px}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}
/* key words of a paragraph, highlighted the same way as on the exam pages */
mark{background:var(--brand-soft);color:var(--ink);font-weight:700;padding:0 4px;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* a link that opens a tool in a new tab */
.ext::after{content:" \2197";font-weight:700}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}


/* ============ top bar ============ */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar-in{max-width:900px;margin:0 auto;padding:0 24px;min-height:60px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;color:var(--ink);text-decoration:none;min-height:44px}
.brand svg{width:24px;height:24px;color:var(--brand)}
.crumb{font-size:14px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.spacer{flex:1}
.tbtn{width:44px;height:44px;border:1px solid var(--rule-2);border-radius:11px;display:grid;place-items:center;background:var(--surface)}
.tbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tbtn .ti-sun{display:none}
:root[data-theme="dark"] .tbtn .ti-sun{display:block}
:root[data-theme="dark"] .tbtn .ti-moon{display:none}
@media(max-width:560px){.crumb{display:none}}


/* ============ hero ============ */
.hero{padding:64px 0 28px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.hero h1{font-family:var(--display);font-size:clamp(40px,6.4vw,72px);line-height:1.04;letter-spacing:-.02em;margin-top:16px}
.hero h1 em{color:var(--brand)}
.lede{font-size:clamp(18px,2.2vw,21px);line-height:1.65;color:var(--ink-2);max-width:700px;margin-top:22px}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.meta span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:8px;transform:translateY(-1px)}


/* ============ chapters menu ============ */
/* Narrow screens: chips under the hero, on several lines (no sideways scroll) */
.chapters{margin-top:30px}
.chapters .toc-h{display:none}
.chapters ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chapters a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface);
  color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.chapters a:hover{border-color:var(--brand);background:var(--brand-soft)}
.chapters b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--brand)}
/* Wide screens: a vertical menu in the right margin, always visible, the current chapter marked */
@media(min-width:1380px){
  .chapters{position:fixed;top:104px;left:calc(50% + 474px);width:210px;margin:0;z-index:40;transition:opacity .2s}
  .chapters.away{opacity:0;pointer-events:none}
  .chapters .toc-h{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px 14px}
  .chapters ol{flex-direction:column;flex-wrap:nowrap;gap:2px;border-left:2px solid var(--rule)}
  .chapters a{min-height:38px;padding:0 12px;margin-left:-2px;border:0;border-left:2px solid transparent;border-radius:0 10px 10px 0;background:none;font-size:14px;font-weight:500;color:var(--ink-2)}
  .chapters a:hover{background:var(--brand-soft);color:var(--ink)}
  .chapters a[aria-current="true"]{border-left-color:var(--brand);background:var(--brand-soft);color:var(--ink);font-weight:700}
}


/* ============ chapters ============ */
.chap{padding:60px 0 8px}
.chap .num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--brand);font-weight:600}
.chap h2{font-family:var(--display);font-size:clamp(32px,4.6vw,50px);line-height:1.08;letter-spacing:-.015em;margin-top:8px}
.chap h2 em{color:var(--brand)}
.chap > .wrap > p,.chap .prose{color:var(--ink-2);max-width:700px;margin-top:16px}
.chap p strong{color:var(--ink)}
.small{font-size:14px;color:var(--ink-3)}
.sub-h{font-family:var(--display);font-size:clamp(26px,3.4vw,34px);line-height:1.1;margin-top:44px}


/* ============ 01 the ticket ============ */
.ticket{display:grid;grid-template-columns:1fr 230px;margin-top:30px;background:var(--surface);border:1px solid var(--rule-2);border-radius:22px;box-shadow:var(--shadow);position:relative}
.ticket-main{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;padding:30px 30px 28px}
.tf .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tf .v{font-family:var(--display);font-size:clamp(30px,4vw,40px);line-height:1.05;margin-top:4px;color:var(--ink)}
.tf .s{font-size:13.5px;color:var(--ink-2);line-height:1.4;margin-top:4px}
.ticket-stub{border-left:2px dashed var(--rule-2);padding:30px 24px;display:flex;flex-direction:column;justify-content:center;text-align:center;background:var(--brand-soft);border-radius:0 22px 22px 0}
.ticket-stub .big{font-family:var(--display);font-size:56px;line-height:1;color:var(--brand)}
.ticket-stub .big small{font-size:24px;color:var(--ink-3)}
.ticket-stub .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.ticket::before,.ticket::after{content:"";position:absolute;right:218px;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--rule-2)}
.ticket::before{top:-12px;clip-path:inset(50% 0 0 0)}
.ticket::after{bottom:-12px;clip-path:inset(0 0 50% 0)}
@media(max-width:760px){
  .ticket{grid-template-columns:1fr}
  .ticket-main{grid-template-columns:1fr 1fr;padding:24px 22px}
  .ticket-stub{border-left:0;border-top:2px dashed var(--rule-2);border-radius:0 0 22px 22px;padding:22px}
  .ticket::before,.ticket::after{display:none}
}
.fine{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:760px){.fine{grid-template-columns:1fr}}
.fine article{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:18px 18px 16px}
.fine h3{font-family:var(--display);font-size:23px;line-height:1.15}
.fine p{font-size:15px;color:var(--ink-2);margin-top:8px;line-height:1.55}


/* ============ 02 where the points live ============ */
.points{margin-top:28px;display:grid;gap:10px}
.prow{display:grid;grid-template-columns:minmax(150px,260px) 1fr 190px;gap:8px 18px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px 18px}
.prow .nm{font-weight:600;font-size:15px;line-height:1.35}
.prow .nm i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--c);letter-spacing:.1em;display:block}
.prow .track{height:14px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.prow .track b{display:block;height:100%;width:var(--w);background:var(--c);border-radius:99px}
.prow .pc{font-family:var(--mono);font-size:13px;text-align:right;color:var(--ink-2);white-space:nowrap}
.prow .pc strong{color:var(--ink);font-size:15px}
@media(max-width:700px){.prow{grid-template-columns:1fr auto}.prow .track{grid-column:1/-1;order:3}}
.callout{margin-top:20px;border:1px solid var(--rule-2);border-left:4px solid var(--brand);border-radius:0 14px 14px 0;background:var(--surface);padding:18px 22px;max-width:700px}
.callout p{color:var(--ink-2);font-size:16px}
.callout strong{color:var(--ink)}


/* ============ plan builder (each day with its three tools) ============ */
.planner{margin-top:34px;background:var(--surface);border:1px solid var(--rule-2);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.planner h3{font-family:var(--display);font-size:clamp(26px,3.4vw,34px);line-height:1.1}
.planner > p{color:var(--ink-2);font-size:15.5px;margin-top:8px}
.days{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.days button{min-height:46px;min-width:86px;padding:0 18px;border:1.5px solid var(--rule-2);border-radius:12px;background:var(--paper);font-weight:700;font-size:15px;transition:border-color .15s,background .15s}
.days button:hover{border-color:var(--brand)}
.days button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--btn-ink)}
.recipe{margin-top:18px;padding:16px 18px;border-radius:14px;background:var(--brand-soft);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.recipe div{font-size:14.5px;color:var(--ink-2);line-height:1.45}
.recipe b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
@media(max-width:640px){.recipe{grid-template-columns:1fr}}
.plan{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.plan li{display:grid;grid-template-columns:120px 1fr;gap:10px 16px;align-items:start;padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--rule)}
.plan .d{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-2);padding-top:2px}
.plan .t{font-size:15px;font-weight:600;line-height:1.35}
.plan .t span{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:9px}
.plan .t small{display:block;font-weight:400;color:var(--ink-3);font-size:13.5px;margin-top:2px}
.plan li.mock{border-style:dashed;border-color:var(--brand)}
.tools-row{grid-column:2;display:flex;flex-wrap:wrap;gap:6px}
.tchip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--surface);
  color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.tchip:hover{border-color:var(--brand);background:var(--brand-soft)}
.tchip i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:1px 6px;border-radius:5px}
.tchip i.free{background:var(--good-soft);color:var(--good)}
.tchip i.kit{background:var(--surface-2);color:var(--ink-3)}
.tchip .sm{display:none}
@media(max-width:560px){
  .plan li{grid-template-columns:1fr}
  .tools-row{grid-column:1}
  .tchip{padding:0 10px;font-size:13px;gap:5px}
  .tchip .lg{display:none}
  .tchip .sm{display:inline}
}


/* ============ 03 the lineup (game) ============ */
.js .rounds{display:none}
.rounds{margin-top:26px;padding-left:22px;display:grid;gap:14px;color:var(--ink-2)}
.rounds .clue{color:var(--ink);font-weight:600}
.rounds .rule{font-size:15px;margin-top:4px}
.game{margin-top:26px;background:var(--surface);border:1px solid var(--rule-2);border-radius:22px;padding:28px;box-shadow:var(--shadow);min-height:340px;display:flex;flex-direction:column}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.g-dots{display:flex;gap:6px}
.g-dots i{width:10px;height:10px;border-radius:50%;background:var(--surface-2);border:1px solid var(--rule-2)}
.g-dots i.on{background:var(--brand);border-color:var(--brand)}
.g-dots i.win{background:var(--good);border-color:var(--good)}
.g-dots i.lose{background:var(--bad);border-color:var(--bad)}
.g-clue{font-family:var(--display);font-size:clamp(27px,3.8vw,38px);line-height:1.15;margin-top:22px;letter-spacing:-.01em}
.g-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
@media(max-width:560px){.g-opts{grid-template-columns:1fr}}
.g-opt{min-height:82px;padding:14px 18px;border:2px solid var(--rule-2);border-radius:16px;background:var(--paper);text-align:left;transition:border-color .15s,transform .15s,background .15s}
.g-opt b{display:block;font-size:20px;font-weight:700}
.g-opt span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.g-opt:hover:not(:disabled){border-color:var(--brand);transform:translateY(-2px)}
.g-opt:disabled{cursor:default}
.g-opt.good{border-color:var(--good);background:var(--good-soft)}
.g-opt.bad{border-color:var(--bad);background:var(--bad-soft)}
.g-fb{margin-top:20px;min-height:64px;font-size:16px;color:var(--ink-2)}
.g-fb strong{color:var(--ink)}
.g-fb .v-good{color:var(--good);font-weight:700}
.g-fb .v-bad{color:var(--bad);font-weight:700}
.g-next{align-self:flex-start;margin-top:14px}
.g-end{text-align:center;padding:14px 0 4px;margin:auto 0}
.g-end .score{font-family:var(--display);font-size:clamp(64px,12vw,104px);line-height:1;color:var(--brand)}
.g-end .score small{font-size:.4em;color:var(--ink-3)}
.g-end h3{font-family:var(--display);font-size:30px;margin-top:6px}
.g-end p{color:var(--ink-2);max-width:540px;margin:12px auto 0;font-size:16px}
.g-end .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.links-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}


/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--brand);transition:background .15s,color .15s}
.btn-a{background:var(--brand);color:var(--btn-ink)}
.btn-a:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.btn-b{background:transparent;color:var(--brand)}
.btn-b:hover{background:var(--brand-soft)}


/* ============ 04 the family tree (a Concept Map excerpt) ============ */
.js .tree-dl{display:none}
.tree-dl{margin-top:22px;display:grid;gap:10px}
.tree-dl dt{font-weight:700}
.tree-dl dd{color:var(--ink-2);font-size:15.5px}
.treebox{margin-top:26px;display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch}
@media(max-width:760px){.treebox{grid-template-columns:1fr}}
.tree{background:var(--surface);border:1px solid var(--rule-2);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
/* each layer is opaque, so the colors do not pile up from one layer to the next */
.ring{border:2px solid var(--rc);border-radius:18px;padding:8px 10px 10px;background:var(--surface);transition:background .15s,box-shadow .15s}
.ring .ring{margin-top:6px}
.ring.on{background:color-mix(in srgb,var(--rc) 14%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--rc) 25%,transparent)}
.ring.on .ring{background:var(--surface)}
.ring > button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 6px;font-weight:700;font-size:15px;color:var(--ink);text-align:left;border-radius:8px}
.ring > button i{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--rc);letter-spacing:.08em}
.ring > button:hover{text-decoration:underline;text-underline-offset:3px}
.tcard{background:var(--surface);border:1px solid var(--rule);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:12px}
.tcard .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tcard h3{font-family:var(--display);font-size:32px;line-height:1.1}
.tcard .def{font-size:16px;color:var(--ink)}
.tcard .mix{border-radius:12px;padding:11px 14px;background:var(--accent-soft);font-size:15px;line-height:1.5}
.tcard .mix b,.tcard .clue b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px;color:var(--accent)}
.tcard .clue{font-size:15px;color:var(--ink-2)}
.tcard .clue b{color:var(--brand)}
.tcard .links-row{margin-top:auto}


/* ============ 05 reflex answers ============ */
.reflex{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.reflex{grid-template-columns:1fr}}
.rcard{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:14px}
.rcard .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.rcard .tag::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:8px}
.rcard h3{font-family:var(--display);font-size:25px;line-height:1.15}
.rcard .scene{font-size:15px;color:var(--ink-2)}
.rcard .you,.rcard .real{border-radius:12px;padding:11px 14px;font-size:15px;line-height:1.5}
.rcard .you{background:var(--bad-soft);color:var(--ink)}
.rcard .real{background:var(--good-soft);color:var(--ink)}
.rcard .you b,.rcard .real b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.rcard .you b{color:var(--bad)}
.rcard .real b{color:var(--good)}
.rcard .rule{font-size:14.5px;color:var(--ink-3);border-top:1px dashed var(--rule-2);padding-top:12px;margin-top:auto}
.rcard .rule strong{color:var(--ink)}


/* ============ one real question, every option explained ============ */
.oq{margin-top:22px;background:var(--surface);border:1px solid var(--rule-2);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.oq .tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--s2)}
.oq .stem{font-family:var(--display);font-size:clamp(24px,3.2vw,30px);line-height:1.2;margin-top:10px}
.oq ol{list-style:none;padding:0;margin-top:18px;display:grid;gap:10px}
.oq-opt{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:left;padding:13px 16px;border:2px solid var(--rule-2);border-radius:14px;background:var(--paper);transition:border-color .15s,background .15s}
.oq-opt .l{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600;background:var(--surface-2);color:var(--ink-2)}
.oq-opt b{font-size:16px;display:block}
.oq-opt:hover:not(:disabled){border-color:var(--brand)}
.oq-opt:disabled{cursor:default}
.oq-why{display:block;font-weight:400;font-size:14.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.js .oq:not(.done) .oq-why{display:none}
.oq.done .oq-opt.right{border-color:var(--good);background:var(--good-soft)}
.oq.done .oq-opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.oq .verdict{margin-top:16px;font-weight:700}
.oq .verdict.ok{color:var(--good)}
.oq .verdict.no{color:var(--bad)}
.oq .carry{margin-top:12px;font-size:15px;color:var(--ink-2);border-top:1px dashed var(--rule-2);padding-top:12px}
.js .oq:not(.done) .carry{display:none}
.oq .carry strong{color:var(--ink)}


/* ============ 06 your move ============ */
.tools{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.tools{grid-template-columns:1fr}}
.tool{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tool:hover{border-color:var(--brand);transform:translateY(-2px)}
.tool .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.tool b{font-family:var(--display);font-size:26px;font-weight:400;line-height:1.1}
.tool span{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.tool .go{margin-top:auto;padding-top:8px;font-weight:700;color:var(--brand);font-size:15px}
.closer{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}


/* ============ 07 skip list ============ */
.skips{margin-top:26px;display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media(max-width:760px){.skips{grid-template-columns:1fr}}
.skip-list,.need{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:22px 24px}
.skip-list h3,.need h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.skip-list ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:8px}
.skip-list li{display:flex;gap:12px;font-size:16px;color:var(--ink-2);line-height:1.45}
.skip-list li::before{content:"\00D7";flex:none;width:24px;height:24px;border-radius:50%;background:var(--bad-soft);color:var(--bad);font-weight:700;display:grid;place-items:center;font-size:16px;line-height:1}
.need{background:var(--brand-soft);border-color:transparent}
.need p{margin-top:12px;font-family:var(--display);font-size:25px;line-height:1.2;color:var(--ink)}
.need p + p{font-family:var(--sans);font-size:14.5px;color:var(--ink-2);margin-top:12px;line-height:1.55}


/* ============ 08 exam day ============ */
.rules{list-style:none;padding:0;margin-top:26px;display:grid;gap:12px;counter-reset:r}
.rules li{counter-increment:r;display:grid;grid-template-columns:54px 1fr;gap:4px 14px;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:16px 20px;align-items:start}
.rules li::before{content:counter(r);grid-row:1/3;font-family:var(--display);font-size:46px;line-height:1;color:var(--brand)}
.rules b{font-size:17px}
.rules span{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.sources{margin-top:46px;padding-top:22px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-3)}
.sources ul{padding-left:20px;margin-top:8px}
.sources li{margin-top:4px}


/* ============ footer ============ */
.foot{margin-top:60px;background:#0C2E43;color:#DCE9F2;padding:36px 0;text-align:center;font-size:15px;line-height:1.7}
:root[data-theme="dark"] .foot{background:#050B12;color:var(--ink-2);border-top:1px solid var(--rule)}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot p + p{margin-top:8px}


/* ============ family tree as a grid (a free-map group that is not nested) ============ */
.tree.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
@media(max-width:560px){.tree.grid{grid-template-columns:1fr}}