/* Root to End shared kit: reading footnotes, "go deeper" strips, reading list, quizzes, progress bar.
   Uses each page's own color tokens (--surface, --rule, --accent, --trace, --ok, --bad, …). */
.rk-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:50;pointer-events:none;padding-top:env(safe-area-inset-top,0px)}
.rk-progress i{display:block;height:3px;width:0;background:linear-gradient(90deg,var(--trace),var(--accent));transition:width .1s linear}
@media (prefers-reduced-motion:reduce){.rk-progress i{transition:none}}

/* footnote markers */
a.rd{font-family:var(--mono);font-size:.68em;vertical-align:super;line-height:0;text-decoration:none;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 4px;margin-left:2px;cursor:pointer;white-space:nowrap}
a.rd:hover,a.rd[aria-expanded="true"]{background:var(--accent);color:var(--surface)}
.rk-cards{display:flex;flex-direction:column;gap:8px;margin:10px 0 4px;max-width:72ch}
.rk-card{border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:0;background:var(--surface);padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:.88rem;line-height:1.5;animation:rk-in .18s ease-out}
@keyframes rk-in{from{opacity:.4;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rk-card{animation:none}}
.rk-card .n{font-family:var(--mono);font-size:.74rem;color:var(--accent);grid-row:span 3;padding-top:2px}
.rk-card .tt{font-weight:600}
.rk-card .tt a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.rk-card .tt a:hover{text-decoration-color:var(--accent)}
.rk-card .by{color:var(--muted);font-size:.82rem}
.rk-card .wh{font-size:.84rem}
.rk-card .wh b{font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--trace);margin-right:6px}
.rk-lvl{display:inline-block;font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:999px;margin-left:6px;vertical-align:1px;font-weight:500}
.rk-lvl.start{background:var(--ok-bg);color:var(--ok)}
.rk-lvl.deep{background:var(--accent-soft);color:var(--accent)}
.rk-lvl.source{background:var(--trace-bg);color:var(--trace)}

/* go-deeper strip at the end of a section */
.deeper{border:1px dashed var(--rule);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;max-width:80ch;background:transparent}
.deeper>b{font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.deeper ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.deeper li{font-size:.86rem;line-height:1.45;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.deeper li .n{font-family:var(--mono);font-size:.72rem;color:var(--accent);min-width:2.2em}
.deeper li a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.deeper li a:hover{text-decoration-color:var(--accent)}
.deeper li .w{color:var(--muted);font-size:.8rem}

/* page reading list */
.rk-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.rk-list section,.rk-group{display:flex;flex-direction:column;gap:8px;padding:0;min-width:0}
.rk-group h3{margin:0;font-family:var(--display);font-size:1rem}
.rk-group h3 small{display:block;font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--muted)}
.rk-group .rk-card{border-left-color:var(--rule)}
.rk-group.start .rk-card{border-left-color:var(--ok)}
.rk-group.deep .rk-card{border-left-color:var(--accent)}
.rk-group.source .rk-card{border-left-color:var(--trace)}

/* predict-the-output quiz */
.quiz{border:1px solid var(--rule);border-radius:12px;background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.quiz .qh{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.quiz .qh b{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--trace);font-weight:500}
.quiz .qh .score{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.quiz .qq{font-weight:500}
.quiz pre{margin:0;background:var(--code);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:.8rem;line-height:1.55;overflow-x:auto}
.quiz .opts{display:flex;flex-direction:column;gap:6px}
.quiz .opt{text-align:left;font:inherit;font-size:.9rem;border:1px solid var(--rule);background:var(--bg);color:var(--ink);padding:8px 12px;border-radius:8px;cursor:pointer;display:flex;gap:10px;align-items:baseline;transition:transform .12s ease,border-color .12s ease}
.quiz .opt:hover{border-color:var(--accent);transform:translateX(2px)}
.quiz .opt code{font-size:.84em}
.quiz .opt .k{font-family:var(--mono);font-size:.74rem;color:var(--muted);min-width:1.2em}
.quiz .opt.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.quiz .opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.quiz .opt[disabled]{cursor:default;transform:none}
.quiz .ex{font-size:.9rem;line-height:1.6;border-top:1px solid var(--rule);padding-top:8px}
.quiz .ex b{font-weight:600}
.quiz .again{align-self:flex-start;font-size:.8rem}
.quiz.pop .qh .score{animation:rk-pop .5s ease-out}
@keyframes rk-pop{0%{transform:scale(1)}40%{transform:scale(1.35);color:var(--ok)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.quiz .opt{transition:none}.quiz.pop .qh .score{animation:none}}
.quizzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:14px;align-items:start}

/* long code and paths wrap instead of widening the page on phones */
.quiz code,ol.ex code,.prose code,.callout code,.lede code,.tldr code,.exq code,.src-list a,td code{overflow-wrap:anywhere}
.ctl label{max-width:100%;flex-wrap:wrap}.ctl select{max-width:100%;min-width:0}

/* the 60-second version, right under the hero */
.tldr{border:2px solid var(--accent);border-radius:14px;background:var(--surface);padding:18px 20px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px 24px;align-items:center;margin-top:28px;position:relative}
.tldr .tl-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.tldr .tl-head b{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
.tldr .tl-head span{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.tldr ol{margin:0;padding:0;list-style:none;counter-reset:tl;display:flex;flex-direction:column;gap:10px}
.tldr ol li{counter-increment:tl;display:grid;grid-template-columns:1.9em minmax(0,1fr);gap:8px;font-size:.98rem;line-height:1.55}
.tldr ol li::before{content:counter(tl);font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--surface);background:var(--accent);border-radius:999px;width:1.65em;height:1.65em;display:grid;place-items:center;margin-top:2px}
.tldr figure{margin:0;min-width:0}
.tldr svg{display:block;width:100%;height:auto}
.tldr figcaption{font-size:.78rem;color:var(--muted);margin-top:6px;text-align:center}
.tldr .tl-more{grid-column:1/-1;font-size:.88rem;color:var(--muted);border-top:1px dashed var(--rule);padding-top:10px}
@media (max-width:760px){.tldr{grid-template-columns:1fr}}
/* diagram parts (inline SVG): use classes so both themes work */
.tl-box{fill:var(--bg);stroke:var(--rule);stroke-width:1.5}
.tl-box.hot{fill:var(--accent-soft);stroke:var(--accent)}
.tl-box.warm{fill:var(--trace-bg);stroke:var(--trace)}
.tl-box.good{fill:var(--ok-bg);stroke:var(--ok)}
.tl-box.bad{fill:var(--bad-bg);stroke:var(--bad)}
.tl-t{fill:var(--ink);font-family:var(--mono);font-size:12px}
.tl-t.s{fill:var(--muted);font-size:10.5px}
.tl-t.b{font-weight:600}
.tl-a{stroke:var(--muted);stroke-width:1.5;fill:none}
.tl-a.hot{stroke:var(--accent)}.tl-a.bad{stroke:var(--bad);stroke-dasharray:4 3}
.tl-head-m{fill:var(--muted)}.tl-head-m.hot{fill:var(--accent)}.tl-head-m.bad{fill:var(--bad)}

/* exam-style practice */
.exam{display:flex;flex-direction:column;gap:12px;max-width:820px}
.exam-bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:.86rem;color:var(--muted)}
.exam-bar .tally{font-family:var(--mono);font-size:.8rem;color:var(--ink);background:var(--code);border-radius:999px;padding:3px 10px}
.exq{border:1px solid var(--rule);border-radius:12px;background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.exq .eh{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.exq .eh .mk{color:var(--trace);font-weight:600}
.exq .q{font-size:.97rem;line-height:1.6}
.exq .q pre,.exq .a pre{margin:8px 0 0;background:var(--code);border:1px solid var(--rule);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:.8rem;line-height:1.55;overflow-x:auto}
.exq .a{border-top:1px dashed var(--rule);padding-top:10px;font-size:.93rem;line-height:1.6;display:flex;flex-direction:column;gap:8px}
.exq .a[hidden]{display:none}
.exq .a .rub{font-size:.84rem;color:var(--muted)}
.exq .a table{font-size:.82rem}
.exq .btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.exq .btns button{font-size:.8rem;padding:4px 10px}
.exq .btns .lbl{font-size:.8rem;color:var(--muted)}
.exq .btns button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* report-a-mistake links */
.rk-report{font-size:.78rem;color:var(--muted);text-decoration:none;font-family:var(--mono);align-self:flex-start}
.rk-report:hover{color:var(--accent);text-decoration:underline}
.rk-foot{margin-top:56px;border-top:1px solid var(--rule);padding-top:16px;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}

/* what kind of evidence is this? observed / source / example / model / illustration */
.kind{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:1px 7px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;line-height:1.5;vertical-align:1px}
.kind.observed{color:var(--ok);background:var(--ok-bg)}
.kind.source{color:var(--accent);background:var(--accent-soft)}
.kind.example{color:var(--muted);background:var(--code)}
.kind.model{color:var(--trace);background:var(--trace-bg)}
.kind.illustration{color:var(--trace);background:transparent;border-style:dashed}
figure.src figcaption .kind{margin-right:2px}
.kinds-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:.82rem;color:var(--muted);margin-top:14px}
.kinds-legend b{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:500}
.scope{border:1px solid var(--rule);border-left:3px solid var(--trace);border-radius:8px;padding:8px 12px;font-size:.86rem;line-height:1.55;display:flex;flex-direction:column;gap:3px;background:var(--surface);max-width:900px}
.scope[data-kind="observed"]{border-left-color:var(--ok)}
.scope .sh{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.scope p{margin:0}
.scope p b{font-weight:600}
/* keyboard focus on anything the kit or a page makes focusable (scrolling boxes, byte cells), and a global reduced-motion fallback */
[tabindex]:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}