/* ═══════════════════════════════════════════════════════════════
   TOPIC HUB — shared styles for the question-type hub + overlay used
   by Unit 3 topic pages. Each page ships only its content data and
   calls TopicHub.mount(); this file + topic-hub.js do the rest.
   Everything is scoped under .thub so it can never touch the rest of
   the site (globals like .opt / .fb are overridden only inside .thub).
   ═══════════════════════════════════════════════════════════════ */
.thub{
  --pink:var(--c-pink); --cyan:var(--c-cyan); --gold:var(--c-gold); --green:var(--c-green); --purple:var(--c-purple); --orange:var(--c-orange);
  --red:var(--c-orange); --royal:var(--c-blue); --ice:var(--c-cyan); --hotpink:var(--c-pink); --warmwhite:var(--c-gold); --coldwhite:#e9f2ff;
  --accent:var(--cyan);
  --tx:rgba(255,255,255,.9); --dim:rgba(255,255,255,.58); --faint:rgba(255,255,255,.34);
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.07); --line:rgba(255,255,255,.1);
  --ui:'Outfit',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'Source Code Pro',ui-monospace,"Cascadia Code",Consolas,monospace;
  font-family:var(--ui); max-width:var(--content-w,1000px); margin:0 auto; overflow-x:clip;
}
.thub *{box-sizing:border-box}
@media(prefers-reduced-motion:reduce){.thub *{animation:none!important;transition:none!important}}

.thub .topic-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);margin-bottom:.5rem;text-align:center}
.thub .topic-title{font-size:clamp(1.8rem,7vw,3.0rem);line-height:1.02;margin:.35rem 0 .5rem;color:#fff;text-align:center;font-weight:800;letter-spacing:-.02em}
.thub .topic-sub{font-size:clamp(1rem,2.3vw,1.15rem);color:var(--dim);max-width:62ch;margin:0 auto;text-align:center}
.thub .topic-sub b{color:#fff}
/* Header-only hero (Unit 2 pages supply their own content below the hub header,
   with no concept grid to space it). Give it the same bottom cushion the 1.0
   hero uses so the first content block never crowds the subtitle. */
.thub.u2hero{margin-bottom:34px}

.thub .hbox{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.028)}
.thub .hbox-h{padding:.5rem .9rem;font-weight:800;font-size:.9rem;letter-spacing:.4px;color:var(--c-ground);display:flex;align-items:center;gap:.5rem}
.thub .hbox-b{padding:.9rem 1rem}
.thub .hbox-b p{margin:.1rem 0;color:var(--dim);font-size:.95rem}
.thub .hbox-b p:first-child{margin-top:0}
.thub .h-cyan .hbox-h{background:var(--cyan)} .thub .h-gold .hbox-h{background:var(--gold)} .thub .h-purple .hbox-h{background:var(--purple)}
.thub .h-pink .hbox-h{background:var(--pink);color:#fff} .thub .h-green .hbox-h{background:var(--green)} .thub .h-orange .hbox-h{background:var(--orange);color:#fff}
.thub .h-ice .hbox-h{background:var(--ice)} .thub .h-hotpink .hbox-h{background:var(--hotpink);color:#fff}
.thub .h-red .hbox-h{background:var(--red);color:#fff} .thub .h-royal .hbox-h{background:var(--royal);color:#fff}

/* concept grid: 4 across → 2×2 → 1. Never 3+1. */
.thub .concept{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1.8rem 0 2.2rem}
@media(max-width:860px){.thub .concept{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.thub .concept{grid-template-columns:1fr}}

.thub .band{display:flex;align-items:center;gap:.7rem;margin:2rem 0 1rem}
.thub .band .bt{font-size:1.5rem;color:#fff;font-weight:800;letter-spacing:-.01em}
.thub .band .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

.thub .path{display:flex;flex-direction:column;gap:0}
.thub .arrow{align-self:center;color:var(--faint);font-size:1.3rem;line-height:1;padding:.3rem 0}
.thub .type-card{position:relative;width:100%;text-align:left;display:flex;align-items:center;gap:1rem;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);border-left-width:4px;border-radius:14px;padding:.95rem 1.1rem;
  transition:transform .15s,background .15s;font-family:var(--ui);overflow:hidden;color:var(--tx);border-left-color:var(--c)}
.thub .type-card:hover{transform:translateX(4px);background:var(--glass2)}
.thub .type-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.thub .type-card .tnum{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:1.05rem;color:var(--c-ground);background:var(--c)}
.thub .type-card .tmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.thub .type-card .tk{font-family:var(--mono);font-size:.64rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.thub .type-card .tt{font-family:var(--ui);font-weight:800;font-size:1.2rem;line-height:1.1;color:#fff;letter-spacing:-.01em}
.thub .type-card .tl{font-size:.85rem;color:var(--dim)}
.thub .type-card .go{flex:0 0 auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.5px;color:var(--faint)}
.thub .type-card .donebadge{position:absolute;top:0;left:0;display:none;align-items:center;gap:.3rem;background:var(--green);color:#04231a;font-size:.6rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:.15rem .5rem .2rem;border-radius:0 0 8px 0}
.thub .type-card.done .donebadge{display:inline-flex}
.thub .type-card.done{border-left-color:var(--green)!important;padding-top:1.25rem}
/* Inline card placement: a filled <div data-thub-card="N"> slot dropped between
   page content. .thub gives it the style context; add breathing room around it. */
.thub-card-slot{margin-top:1.75rem!important;margin-bottom:1.75rem!important}

.thub .overlay{position:fixed;inset:0;z-index:99990;display:none;background:rgba(6,6,12,.8);backdrop-filter:blur(8px);overflow-y:auto;padding:clamp(.6rem,3vw,1.6rem)}
.thub .overlay.open{display:block;animation:thofade .22s ease}
@keyframes thofade{from{opacity:0}to{opacity:1}}
.thub .sheet{position:relative;max-width:950px;margin:0 auto;min-height:min(90vh,760px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(20,18,30,.97),rgba(12,11,18,.98));border:1px solid var(--line);border-radius:20px;box-shadow:0 40px 120px -30px rgba(0,0,0,.95);overflow:hidden}
.thub .o-head{position:sticky;top:0;z-index:5;background:rgba(14,12,20,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:.7rem .9rem}
.thub .o-head-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.thub .o-badge{font-family:var(--mono);font-size:.64rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim)}
.thub .o-name{font-family:var(--ui);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;color:#fff;line-height:1.05;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thub .xclose{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--glass2);border:1px solid var(--line);color:#fff;font-size:1rem;cursor:pointer}
.thub .xclose:hover{background:rgba(var(--c-pink-rgb),.2);border-color:var(--pink)}
.thub .thub-lock{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--glass2);border:1px solid var(--line);color:#fff;font-size:.9rem;cursor:pointer;opacity:.55}
.thub .thub-lock:hover{opacity:1;border-color:var(--accent)}
.thub .partnav{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.15rem}
.thub .pchip{flex:0 0 auto;display:flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;color:var(--faint);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:.22rem .6rem;cursor:pointer;white-space:nowrap}
.thub .pchip:hover{color:var(--tx)}
.thub .pchip .d{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-size:.55rem}
.thub .pchip.on{color:var(--c-ground);background:var(--accent);border-color:var(--accent)}
.thub .pchip.done{color:var(--green)} .thub .pchip.done .d{background:var(--green);border-color:var(--green);color:#04231a}
.thub .pchip.locked{opacity:.45;cursor:not-allowed}
.thub .pchip.locked:hover{color:var(--faint)}
.thub .pchip.locked .d{font-size:.68rem;border:none}
/* Unit 2 three-tab flow: full-width, equal tabs and flush author content. */
.thub .partnav.wide3{gap:.5rem;overflow-x:visible}
.thub .partnav.wide3 .pchip{flex:1 1 0;justify-content:center;font-size:.82rem;padding:.55rem .5rem;border-radius:12px}
.thub .barebox{margin-top:.2rem}
.thub .barebox .afteract{margin-top:1.25rem}

.thub .o-body{flex:1;padding:clamp(1rem,3vw,1.6rem);overflow-y:auto}
.thub .part{animation:thpfade .2s ease}
@keyframes thpfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.thub .part-intro{font-size:1rem;color:var(--tx);max-width:60ch;margin:0 0 1rem}
.thub .part-intro b{color:#fff}
.thub .pq-lead{margin:0 0 1.4rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.thub .pq-lead-h1{font-weight:900;font-size:clamp(1.6rem,4vw,2rem);color:#fff;margin:0 0 .4rem}
.thub .pq-lead-sub{font-size:1rem;color:var(--dim);max-width:52ch;margin:0 auto;line-height:1.6}

.thub .o-nav{position:sticky;bottom:0;background:rgba(14,12,20,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:.7rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.thub .navbtn{font-family:var(--ui);font-weight:600;font-size:.9rem;border-radius:10px;padding:.55rem 1.05rem;cursor:pointer;border:1px solid var(--line);background:var(--glass);color:var(--tx)}
/* ghost buttons tint to the accent on hover; filled buttons keep their
   dark text and just brighten (so the label never disappears) */
.thub .navbtn:hover:not(:disabled):not(.primary):not(.finish){border-color:var(--accent);color:var(--accent)}
.thub .navbtn.primary{background:var(--accent);color:var(--c-ground);border-color:var(--accent)}
.thub .navbtn.finish{background:var(--green);color:#04231a;border-color:var(--green)}
.thub .navbtn.primary:hover:not(:disabled),.thub .navbtn.finish:hover:not(:disabled){filter:brightness(1.08)}
.thub .navbtn:disabled{opacity:.35;cursor:default}

/* activity bits used inside a part */
/* activity divider — centered label flanked by fading hairlines, in the
   current section's accent, so "now you do it" clearly belongs here */
.thub .mini{display:flex;align-items:center;justify-content:center;gap:.7rem;text-align:center;
  margin:2.6rem 0 1rem;font-family:var(--ui);font-weight:800;font-size:.72rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent)}
.thub .mini::before,.thub .mini::after{content:"";height:1px;flex:1;max-width:80px}
.thub .mini::before{background:linear-gradient(90deg,transparent,var(--accent))}
.thub .mini::after{background:linear-gradient(90deg,var(--accent),transparent)}
/* activity question prompts pop in the section's accent; the graded
   practice set (.qc) reads as plain questions — white, normal, left */
.thub .qq .ask{color:var(--accent);font-weight:700}
.thub .qq.qc .ask{color:#fff;font-weight:400;text-align:left}
.thub .wordy{border:1px solid var(--line);border-left:3px solid var(--faint);border-radius:0 10px 10px 0;background:rgba(0,0,0,.28);padding:.7rem .9rem;margin:.1rem 0 .3rem;font-size:.95rem;color:var(--dim);font-style:italic}
.thub .qq + .qq{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line)}
.thub .ctabs{display:flex;gap:.35rem;margin-bottom:.5rem;flex-wrap:wrap}
.thub .ctab{font-family:var(--ui);font-weight:600;font-size:.78rem;border-radius:8px;padding:.3rem .7rem;cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim)}
.thub .ctab.on{background:var(--accent);color:var(--c-ground);border-color:var(--accent)}
.thub .tracewrap{display:flex;flex-direction:column;gap:.5rem}
.thub .tracewrap iframe{width:100%;height:470px;border:0;border-radius:12px;max-width:100%;background:rgba(0,0,0,.3)}

.thub pre.thcode{font-family:var(--mono);font-size:1.12rem;line-height:1.75;background:rgba(0,0,0,.42);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:.1rem 0 .4rem;white-space:pre;overflow-x:auto;color:#dce3ee}
/* Text code is monochrome, like the printed exam. Structure words carry
   weight instead of colour so nothing teaches a cue the test does not
   give. Matches the blocks view, which is monochrome for the same reason. */
.thub .thcode .kw,.thub .thcode .io{color:#fff;font-weight:700}
.thub .thcode .st,.thub .thcode .nu{color:inherit}
.thub .tell{color:var(--dim);font-size:.9rem;margin-top:.5rem}
.thub .maptbl{font-family:var(--mono);font-size:.88rem;line-height:1.9;color:#dce3ee;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:10px;padding:.7rem .95rem;white-space:pre;overflow-x:auto}
.thub .maptbl .k{color:var(--gold)}
.thub .ask{font-size:1.15rem;color:#fff;font-weight:600;margin:0;white-space:pre-line;line-height:1.5}
.thub ol.steps{margin:.2rem 0 0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:.5rem}
.thub ol.steps li{display:flex;gap:.65rem;font-size:.98rem;color:var(--tx);line-height:1.5}
.thub ol.steps li::before{counter-increment:s;content:counter(s);flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--accent);font-size:.75rem;font-weight:800;display:grid;place-items:center}
.thub .ans{margin-top:.9rem;background:rgba(0,0,0,.3);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:.6rem .85rem;font-size:1rem}
.thub .ans b{color:var(--accent)}

.thub .opts{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.thub .opt{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .75rem;border:1px solid var(--line);border-radius:9px;font-size:.95rem;color:var(--dim);background:rgba(255,255,255,.03);width:100%;text-align:left;font-family:var(--ui);cursor:pointer;transition:all .13s}
.thub .opt:hover:not(:disabled){border-color:var(--line);background:rgba(255,255,255,.06);color:#fff}
.thub .opt .ltr{flex:0 0 auto;width:20px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:.7rem;font-weight:800;background:rgba(255,255,255,.08);color:var(--dim)}
.thub .opt.correct{border-color:var(--green);background:rgba(var(--c-green-rgb),.1);color:var(--c-green)}.thub .opt.correct .ltr{background:var(--green);color:#04231a}
.thub .opt.wrong{border-color:var(--orange);background:rgba(var(--c-orange-rgb),.12);color:var(--c-orange)}.thub .opt.wrong .ltr{background:var(--orange);color:#3d1c00}
.thub .fb{margin-top:.7rem;font-size:.95rem;border-radius:9px;padding:.6rem .85rem;display:none}
.thub .fb.show{display:block}
.thub .fb.win{background:rgba(var(--c-green-rgb),.1);border:1px solid rgba(var(--c-green-rgb),.4);color:var(--c-green)}.thub .fb.win b{color:var(--green)}
.thub .fb.nudge{background:rgba(var(--c-orange-rgb),.12);border:1px solid rgba(var(--c-orange-rgb),.4);color:var(--c-orange)}.thub .fb.nudge b{color:var(--orange)}
.thub .codeframe{width:100%;height:560px;border:0;border-radius:12px;max-width:100%;background:rgba(0,0,0,.3)}
.thub .codenote{font-size:1rem;color:var(--dim);text-align:center;margin:.1rem 0 1.3rem}

/* ═══ Quiet separator between a section's teaching and its activity
   (replaces the old shouty "QUICK CHECK —" labels) ═══ */
.thub .afteract{margin-top:1.3rem;padding-top:1.15rem;border-top:1px solid var(--line)}

/* ═══ Get the Points — one-question-at-a-time quiz (pq-*) ═══ */
.thub .pq-progress{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.5px;color:var(--faint);text-transform:uppercase;margin-bottom:.6rem;text-align:center}
.thub .pq-next,.thub .pq-retry{margin-top:1rem}
.thub .pq-result{text-align:center;padding:1.5rem 1rem}
.thub .pq-score{font-family:var(--mono);font-size:2.4rem;font-weight:800;margin-bottom:.5rem}
.thub .pq-pass .pq-score{color:var(--green)}
.thub .pq-fail .pq-score{color:var(--orange)}
.thub .pq-result p{color:var(--tx);font-size:.98rem;margin-bottom:.9rem}

/* ═══ LESSON KIT — the "Learn it" block on the hub home. Rich teaching
   content, all colors from the palette (no per-page hex). ═══ */
.thub .teach{font-family:var(--ui);color:var(--tx);margin:.2rem 0 .5rem}
.thub .teach > * + *{margin-top:1rem}
.thub .teach .lz-h{font-weight:800;font-size:1.12rem;letter-spacing:-.01em;color:#fff;margin-top:1.8rem}
.thub .teach .lz-h:first-child{margin-top:.2rem}
.thub .teach .lz-h.cyan{color:var(--cyan)} .thub .teach .lz-h.gold{color:var(--gold)}
.thub .teach .lz-h.pink{color:var(--hotpink)} .thub .teach .lz-h.green{color:var(--green)}
.thub .teach .lz-h.orange{color:var(--orange)} .thub .teach .lz-h.purple{color:var(--purple)}
.thub .teach .lz-p{color:var(--dim);font-size:1rem;line-height:1.7}
.thub .teach .lz-p b,.thub .teach .lz-key{color:#fff;font-weight:700}
.thub .teach .lz-p .k-cyan{color:var(--cyan)} .thub .teach .lz-p .k-gold{color:var(--gold)}
.thub .teach .lz-p .k-pink{color:var(--hotpink)} .thub .teach .lz-p .k-green{color:var(--green)}

/* two-up compare cards */
.thub .teach .lz-two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:640px){.thub .teach .lz-two{grid-template-columns:1fr}}
.thub .teach .lz-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.028)}
.thub .teach .lz-card .lz-cap{padding:.7rem 1rem;font-weight:800;font-size:1rem;color:#062b2a}
.thub .teach .lz-card .lz-body{padding:.85rem 1rem;color:var(--dim);font-size:.95rem;line-height:1.6}
.thub .teach .lz-card .lz-body ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.thub .teach .lz-card .lz-body b{color:#fff}
.thub .teach .lz-card.cyan .lz-cap{background:var(--cyan)}
.thub .teach .lz-card.gold .lz-cap{background:var(--gold)}
.thub .teach .lz-card.green .lz-cap{background:var(--green)}
.thub .teach .lz-card.pink .lz-cap{background:var(--hotpink);color:#fff}
.thub .teach .lz-card.purple .lz-cap{background:var(--purple);color:#fff}
.thub .teach .lz-card.orange .lz-cap{background:var(--orange);color:#fff}

/* callout note */
.thub .teach .lz-note{border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:12px;padding:.85rem 1.05rem;background:var(--glass);font-size:.97rem;line-height:1.6;color:var(--dim)}
.thub .teach .lz-note b{color:#fff}
.thub .teach .lz-note.cyan{border-left-color:var(--cyan)} .thub .teach .lz-note.pink{border-left-color:var(--hotpink)}
.thub .teach .lz-note.green{border-left-color:var(--green)} .thub .teach .lz-note.purple{border-left-color:var(--purple)}
.thub .teach .lz-note.orange{border-left-color:var(--orange)}

/* table (ASCII/Unicode, place values, etc.) — shared by teach-content
   tables and question-embedded data tables (mc()'s elements/table
   rendering), so the selector isn't scoped to .teach specifically. */
.thub .lz-scroll{overflow-x:auto}
.thub .lz-tbl{border-collapse:collapse;font-size:.9rem;min-width:100%}
.thub .lz-tbl th,.thub .lz-tbl td{border:1px solid var(--line);padding:.45rem .65rem;text-align:left;color:var(--dim);white-space:nowrap}
.thub .lz-tbl th{color:#fff;background:rgba(255,255,255,.05);font-weight:700}
.thub .lz-mono{font-family:var(--mono);color:#dce3ee}

/* Question-embedded data table (from a bank question's "elements": [{type:"table",...}]) */
.thub .qq .qtable-wrap{margin:0 0 .7rem}
.thub .qq .lz-tbl td,.thub .qq .lz-tbl th{white-space:normal}

/* Question-embedded pseudocode (from a bank question's "elements":
   [{type:"code",mode:"blocks",...}]) — the graphical AP-style block
   boxes, same shape the question-builder tool's preview renders. */
.thub .tb-blocks{font-family:var(--mono);font-size:.92rem;color:var(--tx);margin:.2rem 0 .9rem}
.thub .tb-blocks .block-statement{display:block;margin:2px 0}
.thub .tb-blocks .block-expr{border:solid 1px var(--line);border-radius:5px;font-family:var(--mono);padding:3px 7px;background:rgba(255,255,255,.03);display:inline-block;margin-top:1px}
.thub .tb-blocks .block-val{border:solid 1px var(--line);border-radius:0;margin:1px;padding:2px 5px;display:inline-block;background:rgba(255,255,255,.03)}
.thub .tb-blocks .block-cond{border:solid 1px var(--line);border-radius:30px;padding:2px 12px;display:inline-block;background:rgba(255,255,255,.03)}
.thub .tb-blocks .block-control{background:rgba(255,255,255,.06);border:solid 1px var(--line);border-radius:6px;padding:7px;margin:2px 0;display:table}
.thub .tb-blocks .block-control-header{display:inline}
.thub .tb-blocks .block-control-body{display:block;margin-left:20px;margin-top:2px}
.thub .tb-blocks .block-procedure{background:rgba(255,255,255,.06);border:solid 1px var(--line);border-radius:6px;padding:7px;margin:2px 0;display:table}
.thub .tb-blocks .block-procedure-header{display:inline}
.thub .tb-blocks .block-procedure-body{display:block;margin-left:20px;margin-top:2px}
.thub .tb-blocks .block-keyword{font-weight:700;font-family:var(--mono);color:var(--tx)}
.thub .tb-blocks .block-arrow{font-family:var(--mono)}
.thub .tb-blocks .block-list{border:solid 1px var(--line);border-radius:0;padding:2px 5px;display:inline-block;background:rgba(255,255,255,.03)}
.thub .tb-blocks .block-else{margin-top:2px;font-family:var(--mono);display:block;font-weight:700}

/* labelled chips row */
.thub .teach .lz-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.thub .teach .lz-chip{font-family:var(--mono);font-size:.78rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--dim)}

/* centered diagram/figure */
.thub .teach figure{margin:0;text-align:center}
.thub .teach figure svg,.thub .teach figure img{max-width:100%;height:auto;border-radius:12px}
.thub .teach figcaption{font-size:.82rem;color:var(--faint);margin-top:.5rem}

/* ── Select-two (CB "Select two answers" — always the last 5 on the exam) ── */
.thub .sel2tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.5px;color:var(--c-gold);background:rgba(247,202,62,.08);border:1px dashed rgba(247,202,62,.4);border-radius:8px;padding:.3rem .6rem;margin:.15rem 0 .5rem}
.thub .opt.picked{border-color:var(--accent);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px var(--accent)}
.thub .opt.picked .ltr{background:var(--accent);color:var(--c-ground)}

/* ── Prove It / gated questions ───────────────────────────────────────
   A bank item stores its scenario in `context`, separate from the question
   sentence in `q`. Until now `context` was carried in the data and never
   drawn, so questions arrived on screen without their setup. */
.thub .qq .pq-context{color:var(--dim);font-size:.95rem;line-height:1.55;margin:0 0 .6rem;white-space:pre-line}
.thub .qq.qc .pq-context{text-align:left}
/* An answer option that is a code segment rather than a sentence. */
.thub .opt .optbody{flex:1 1 auto;min-width:0}
.thub .opt .optbody .tb-blocks{margin:0;font-size:.86rem}
.thub .opt .optbody pre.thcode{margin:0;font-size:1.02rem}
.thub .opt:has(.tb-blocks),.thub .opt:has(pre.thcode){align-items:flex-start}