/* ═══════════════════════════════════════════════════════════════
   UNIT 2 layout ("topic chapters" engine, grid + pills model).
   Top: essential-content grid — vocab boxes (1/4) + sims (1/2 or full)
   each with a preamble. Below: question types as pills; the active
   pill's panel shows its teaching + a callout to the sim that trains
   it + a scored check. Finishing all types reports to the gradebook.
   Its own cooler "digital" palette, distinct from Unit 3. Scoped .tchap.
   ═══════════════════════════════════════════════════════════════ */
.tchap{
  --azure:var(--c-blue); --amber:var(--c-gold); --coral:var(--c-pink); --mint:var(--c-cyan); --violet:var(--c-purple);
  --line:rgba(255,255,255,.11); --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06);
  --dim:rgba(255,255,255,.64); --faint:rgba(255,255,255,.42); --tx:rgba(255,255,255,.9);
  --mono:'JetBrains Mono',ui-monospace,monospace; --ui:'Outfit',system-ui,-apple-system,sans-serif;
  font-family:var(--ui); max-width:940px; margin:0 auto; overflow-x:clip; color:var(--tx);
}
.tchap .c-azure{--c:var(--azure)} .tchap .c-amber{--c:var(--amber)} .tchap .c-coral{--c:var(--coral)}
.tchap .c-mint{--c:var(--mint)} .tchap .c-violet{--c:var(--violet)}

/* header */
.tchap .ch-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--azure);text-align:center;margin-bottom:.4rem}
.tchap .ch-title{font-weight:800;font-size:clamp(2.5rem,7vw,3.8rem);letter-spacing:-.02em;line-height:.98;text-align:center;margin:0 0 .5rem;color:#fff}
.tchap .ch-sub{color:var(--dim);text-align:center;max-width:62ch;margin:0 auto;font-size:clamp(1rem,2.2vw,1.1rem);line-height:1.5}
.tchap .ch-sub b{color:#fff}

/* section label */
.tchap .seclabel{display:flex;align-items:center;gap:.7rem;margin:32px 0 14px;font-weight:800;font-size:.76rem;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.tchap .seclabel .rule{flex:1;height:1px;background:var(--line)}

/* essential-content grid */
.tchap .egrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tchap .vbox{grid-column:span 1;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:14px;background:var(--panel);padding:14px}
.tchap .vbox .term{font-weight:800;font-size:1.02rem;margin-bottom:3px;color:var(--c)}
.tchap .vbox .def{color:var(--dim);font-size:.88rem;line-height:1.45}
@media(max-width:720px){.tchap .egrid{grid-template-columns:repeat(2,1fr)} .tchap .vbox{grid-column:span 1}}

.tchap .simcard{grid-column:span 4;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.tchap .simcard.half{grid-column:span 2}
@media(max-width:720px){.tchap .simcard,.tchap .simcard.half{grid-column:span 2}}
.tchap .preamble{padding:12px 15px;border-bottom:1px solid var(--line);display:flex;gap:.6rem;align-items:baseline}
.tchap .preamble .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--azure);font-weight:700;flex-shrink:0}
.tchap .preamble .what{color:var(--dim);font-size:.9rem;line-height:1.45}
.tchap .preamble .what b{color:#fff}
.tchap .simframe{width:100%;border:0;display:block;background:transparent}
.tchap .simcard .simbody{background:transparent}

/* question types — pills + panel */
.tchap .qhead{text-align:center;margin:44px 0 4px}
.tchap .qtitle{font-weight:800;font-size:1.5rem;letter-spacing:-.01em}
.tchap .qintro{color:var(--dim);font-size:.95rem;margin-top:3px}
.tchap .pills{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:18px 0 16px}
.tchap .pill{font-family:var(--ui);font-weight:800;font-size:.86rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);color:var(--dim);background:var(--panel);cursor:pointer;white-space:nowrap}
.tchap .pill .n{font-family:var(--mono);font-size:.7rem;opacity:.7;margin-right:.4rem}
.tchap .pill:hover{color:#fff}
.tchap .pill.on{background:var(--c);color:#0a0c12;border-color:var(--c)}
.tchap .pill.done{border-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.tchap .pill .tick{color:var(--mint);margin-left:.35rem;display:none}
.tchap .pill.done .tick{display:inline}

.tchap .panel{border:1px solid var(--line);border-top:3px solid var(--c);border-radius:16px;background:var(--panel);padding:20px 22px;display:none}
.tchap .panel.show{display:block}
.tchap .panel .plabel{font-family:var(--mono);font-size:.64rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint)}
.tchap .panel h3{font-size:1.28rem;font-weight:800;margin:.15rem 0 .5rem;color:#fff}
.tchap .panel .ptext{color:var(--dim);line-height:1.65;font-size:1rem;margin-bottom:1rem}
.tchap .panel .ptext b{color:#fff}
.tchap .simnote{display:flex;gap:.5rem;align-items:baseline;background:color-mix(in srgb,var(--c) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);border-radius:10px;padding:.6rem .8rem;margin-bottom:.9rem}
.tchap .simnote .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:1px;text-transform:uppercase;color:var(--c);font-weight:700;flex-shrink:0}
.tchap .simnote .what{color:var(--dim);font-size:.88rem;line-height:1.45}

/* questions */
.tchap .qq{margin-top:.9rem}
.tchap .qprompt{font-weight:700;margin-bottom:.55rem;line-height:1.4}
.tchap pre.code{font-family:var(--mono);font-size:.88rem;line-height:1.6;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:9px;padding:.6rem .8rem;margin:.1rem 0 .6rem;white-space:pre;overflow-x:auto;color:#dce3ee}
.tchap .opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.tchap .opt{display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .75rem;border:1px solid var(--line);border-radius:9px;font-size:.95rem;color:var(--dim);background:rgba(255,255,255,.02);width:100%;text-align:left;font-family:var(--ui);cursor:pointer;transition:.12s}
.tchap .opt:hover:not(:disabled){background:var(--panel2);color:#fff}
.tchap .opt .ltr{flex:0 0 auto;width:20px;height:20px;border-radius:5px;display:grid;place-items:center;font-size:.68rem;font-weight:800;background:rgba(255,255,255,.08);color:var(--dim)}
.tchap .opt.correct{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 14%,transparent);color:var(--c-cyan)}.tchap .opt.correct .ltr{background:var(--mint);color:#04241c}
.tchap .opt.wrong{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--c-orange)}.tchap .opt.wrong .ltr{background:var(--amber);color:#3d2c00}
.tchap .fb{margin-top:.6rem;font-size:.92rem;border-radius:9px;padding:.55rem .8rem;display:none}
.tchap .fb.show{display:block}
.tchap .fb.win{background:color-mix(in srgb,var(--mint) 10%,transparent);border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);color:var(--c-cyan)}.tchap .fb.win b{color:var(--mint)}
.tchap .fb.nudge{background:color-mix(in srgb,var(--amber) 12%,transparent);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);color:var(--c-orange)}.tchap .fb.nudge b{color:var(--amber)}
.tchap .paneln{display:flex;justify-content:space-between;align-items:center;margin-top:1.1rem}
.tchap .nextbtn{font-family:var(--ui);font-weight:800;font-size:.9rem;padding:.5rem 1rem;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--dim);cursor:pointer}
.tchap .nextbtn.ready{background:var(--c);color:#0a0c12;border-color:var(--c)}

/* exam-style practice */
.tchap .examhead{margin-top:46px}
.tchap .examhead .examstat{flex:0 0 auto;font-weight:800;font-size:.72rem;letter-spacing:.03em;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;text-transform:none}
.tchap .examintro{color:var(--dim);font-size:.95rem;line-height:1.5;margin:-4px 0 6px}
.tchap .examsec{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.tchap .examsec .eq{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 18px;margin-top:0;
  border-left:3px solid var(--azure);transition:border-color .2s,background .2s}
.tchap .examsec .eq.qdone{border-left-color:var(--mint);background:color-mix(in srgb,var(--mint) 5%,transparent)}
.tchap .examsec .qn{font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem}
.tchap .examsec .qn .qtag{color:var(--azure)}
.tchap .examsec .eq.qdone .qn .qtag{color:var(--mint)}
.tchap .examsec .qprompt{font-weight:600;line-height:1.55;font-size:1rem}

/* save bar / result */
.tchap .savebar{margin-top:26px;border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--mint) 7%,transparent);padding:16px 18px;text-align:center}
.tchap .savebar .st{color:var(--dim);font-size:.95rem;margin-bottom:.6rem}
.tchap .savebar b{color:var(--mint)}
.tchap .savebtn{font-family:var(--ui);font-weight:800;font-size:1rem;padding:.7rem 1.4rem;border-radius:12px;border:1px solid var(--mint);background:var(--mint);color:#04241c;cursor:pointer}
.tchap .savebtn:disabled{opacity:.4;cursor:default;background:var(--panel);color:var(--faint);border-color:var(--line)}
.tchap .result{margin-top:.9rem;font-size:.9rem;border-radius:9px;padding:.6rem .8rem;display:none}
.tchap .result.show{display:block}
.tchap .result.ok{background:color-mix(in srgb,var(--mint) 10%,transparent);border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);color:var(--c-cyan)}
.tchap .result.warn{background:rgba(var(--c-orange-rgb),.12);border:1px solid rgba(var(--c-orange-rgb),.35);color:var(--c-orange)}
.tchap .result .score{font-size:1.5rem;font-weight:900;color:var(--mint)}