/* ═══════════════════════════════════════════════════════
   TBAi component library (originally Units 5 & 6).
   Plain GLOBAL classes — no wrapper, usable on any page like the
   rest of the notebook. Colours come from css/palette.css.
═══════════════════════════════════════════════════════ */

/* shared greys, global (notebook body already supplies Outfit + #fff) */
:root {
  --border: rgba(255,255,255,0.08);
  --text:   rgba(255,255,255,0.88);
  --muted:  rgba(255,255,255,0.45);
  --surface: rgba(255,255,255,0.03);
}

code, .mono {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.9em;
  background: rgba(255,255,255,0.06);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* ── Page header ── */
.page-header { text-align: center; margin-bottom: 2.5rem; }
.page-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--c-cyan); margin-bottom: 0.5rem; }
.page-title { font-size: 2.8rem; font-weight: 900; line-height: 1.1; margin-bottom: 0.85rem; }
.page-sub { font-size: 1.05rem; color: var(--muted); max-width: 640px; margin: 0 auto; line-height: 1.7; }

/* ── Section heading ── */
.sh { font-size: 1.5rem; font-weight: 900; margin: 2.5rem 0 1.1rem; display: flex; align-items: center; gap: 0.75rem; }
.sh::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.sh-cyan   { color: var(--c-cyan); }
.sh-gold   { color: var(--c-gold); }
.sh-pink   { color: var(--c-pink); }
.sh-purple { color: var(--c-purple); }
.sh-green  { color: var(--c-green); }
.sh-white  { color: #fff; }

/* ── Prose ── */
.prose { font-size: 0.92rem; color: rgba(255,255,255,0.72); line-height: 1.75; margin-bottom: 1.25rem; }
.prose strong { color: #fff; }
.prose em { color: var(--c-cyan); font-style: normal; font-weight: 700; }

/* ── Vocab cards ── */
.vcard-row { display: grid; gap: 0.85rem; margin-bottom: 1.25rem; }
.vcard-row.two   { grid-template-columns: 1fr 1fr; }
.vcard-row.three { grid-template-columns: 1fr 1fr 1fr; }
.vcard { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.vcard-head { padding: 0.85rem 1.1rem 0.7rem; display: flex; flex-direction: column; gap: 0.15rem; }
.vcard-label { font-size: 0.58rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; opacity: 0.7; }
.vcard-term { font-size: 1.45rem; font-weight: 900; line-height: 1.1; }
.vcard.cyan   .vcard-head { background: var(--c-cyan); color: #000; }
.vcard.gold   .vcard-head { background: var(--c-gold); color: #000; }
.vcard.green  .vcard-head { background: var(--c-green); color: #000; }
.vcard.purple .vcard-head { background: var(--c-purple); color: #fff; }
.vcard.pink   .vcard-head { background: var(--c-pink); color: #fff; }
.vcard-body { padding: 0.9rem 1.1rem; background: rgba(255,255,255,0.03); font-size: 0.88rem; color: rgba(255,255,255,0.78); line-height: 1.62; }
.vcard-body strong { color: #fff; }
.vcard-context { padding: 0.65rem 1.1rem 0.9rem; background: rgba(0,0,0,0.2); font-size: 0.8rem; color: var(--muted); line-height: 1.55; border-top: 1px solid var(--border); }
.vcard-context strong { color: rgba(255,255,255,0.6); }

/* ── Concept box ── */
.concept-box { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 1.25rem; }
.cb-left { background: rgba(255,255,255,0.03); padding: 1.4rem 1.5rem; border-right: 1px solid rgba(255,255,255,0.18); display: flex; flex-direction: column; gap: 0.5rem; }
.cb-right { background: rgba(0,0,0,0.3); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.75rem; }
.cb-side-label { font-size: 0.78rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.cb-analogy { font-size: 0.92rem; color: rgba(255,255,255,0.75); line-height: 1.68; }
.cb-analogy strong { color: #fff; }

/* ── Distinction block — self-contained (inlined greys + its own box model) ── */
.distinction, .distinction *, .distinction-flow, .distinction-flow * { box-sizing: border-box; }
.distinction { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 1.25rem; }
.distinction-header { padding: 0.75rem 1.25rem; background: rgba(255,255,255,0.03); font-size: 0.7rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.08); }
.distinction-header.pink   { color: var(--c-pink); }
.distinction-header.gold   { color: var(--c-gold); }
.distinction-header.purple { color: var(--c-purple); }
.distinction-header.cyan   { color: var(--c-cyan); }
.distinction-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
/* Flow "split" row — two independent boxes side by side (class, not inline grid,
   so the mobile inline-grid collapse rule can't catch it). */
.dist-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.25rem; align-items: stretch; }
.dist-split .distinction { margin-bottom: 0; }
@media (max-width: 560px) { .dist-split { grid-template-columns: 1fr; } }
.dist-side { padding: 1.25rem 1.4rem; }
.dist-side.cyan-bg   { background: rgba(var(--c-cyan-rgb),0.05); }
.dist-side.pink-bg   { background: rgba(var(--c-pink-rgb),0.05); }
.dist-side.gold-bg   { background: rgba(var(--c-gold-rgb),0.05); }
.dist-side.purple-bg { background: rgba(var(--c-purple-rgb),0.05); }
.dist-side.green-bg  { background: rgba(var(--c-green-rgb),0.05); }
.dist-term { font-size: 1.25rem; font-weight: 900; margin-bottom: 0.4rem; }
.dist-term.cyan   { color: var(--c-cyan); }
.dist-term.pink   { color: var(--c-pink); }
.dist-term.gold   { color: var(--c-gold); }
.dist-term.purple { color: var(--c-purple); }
.dist-term.green  { color: var(--c-green); }
.dist-term.white  { color: #fff; }
.dist-def { font-size: 0.88rem; color: rgba(255,255,255,0.72); line-height: 1.6; margin-bottom: 0.5rem; }
.dist-examples { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.55; }
.dist-examples strong { color: rgba(255,255,255,0.5); }
.dist-divider { display: flex; align-items: center; justify-content: center; padding: 0 0.75rem; background: transparent; }  /* translucent gap — the connector floats, no boxed channel */
.conn-arrow { display: block; }  /* inline-SVG connector arrow, matches the free-form arrows */
.distinction-header.bare { background: transparent; border-bottom-color: transparent; }  /* see-through title bar */

/* ═══════════ Flow v2 — one clean box type, fixed-gap grid, reflowable ═══════════ */
.flow2 { --flow2-gap: 2.5rem; --flow2-conn-w: 3rem; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.flow2-row { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.flow2-row.halves { grid-template-columns: 1fr 1fr; column-gap: var(--flow2-gap); }
.flow2-row.halves.has-conn { grid-template-columns: 1fr var(--flow2-conn-w) 1fr; column-gap: 0; }  /* fixed middle column ⇒ boxes keep a constant width and dot mapping */
.flow2-box { border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; padding: 1.25rem 1.4rem; background: rgba(255,255,255,0.02); }
.flow2-box.tint-cyan   { background: rgba(var(--c-cyan-rgb),0.05);   border-color: rgba(var(--c-cyan-rgb),0.18); }
.flow2-box.tint-gold   { background: rgba(var(--c-gold-rgb),0.05);   border-color: rgba(var(--c-gold-rgb),0.18); }
.flow2-box.tint-green  { background: rgba(var(--c-green-rgb),0.05);  border-color: rgba(var(--c-green-rgb),0.18); }
.flow2-box.tint-pink   { background: rgba(var(--c-pink-rgb),0.05);   border-color: rgba(var(--c-pink-rgb),0.18); }
.flow2-box.tint-purple { background: rgba(var(--c-purple-rgb),0.05); border-color: rgba(var(--c-purple-rgb),0.18); }
.flow2-box.tint-orange { background: rgba(var(--c-orange-rgb),0.05); border-color: rgba(var(--c-orange-rgb),0.18); }
.fb-title { font-size: 1.05rem; font-weight: 800; line-height: 1.2; margin-bottom: 0.5rem; }
.fb-title.cyan{color:var(--c-cyan);} .fb-title.gold{color:var(--c-gold);} .fb-title.green{color:var(--c-green);}
.fb-title.pink{color:var(--c-pink);} .fb-title.purple{color:var(--c-purple);} .fb-title.orange{color:var(--c-orange);} .fb-title.white{color:#fff;}
.fb-body { font-size: 0.95rem; color: rgba(255,255,255,0.82); line-height: 1.6; }
.fb-eg { margin-top: 0.6rem; font-size: 0.82rem; color: var(--muted); }
.fb-eg:empty { display: none; }
/* optional per-box fields — only appear when filled (hidden when empty) */
.fb-sub { font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.62); line-height: 1.4; margin: -0.15rem 0 0.55rem; }
.fb-code { font-family: 'Source Code Pro','Menlo','Monaco','Consolas',monospace; font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.35); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0.1rem 0 0.65rem; white-space: pre-wrap; overflow-x: auto; }
.fb-sub:empty, .fb-code:empty { display: none; }
.flow2-conn { display: flex; align-items: center; justify-content: center; }
.flow2-rowconn { display: flex; align-items: center; justify-content: center; padding: 0.1rem 0; }
.flow2-sym { font-size: 2.3rem; font-weight: 900; line-height: 1; color: #fff; opacity: 0.55; font-family: 'Outfit','Helvetica Neue',Arial,sans-serif; font-variant-emoji: text; }
.flow2-sym.ac-cyan{color:var(--c-cyan);opacity:.9;} .flow2-sym.ac-gold{color:var(--c-gold);opacity:.9;} .flow2-sym.ac-green{color:var(--c-green);opacity:.9;}
.flow2-sym.ac-pink{color:var(--c-pink);opacity:.9;} .flow2-sym.ac-purple{color:var(--c-purple);opacity:.9;} .flow2-sym.ac-orange{color:var(--c-orange);opacity:.9;}
/* Tablet-ish and down: two boxes stack, the join flips to a straight ↓, and the
   free-form (SVG overlay) arrows step aside so a stacked layout never overlaps. */
@media (max-width: 880px) {
  .flow2-row.halves, .flow2-row.halves.has-conn { grid-template-columns: 1fr; column-gap: 0; row-gap: 0.9rem; }
  .flow2-conn-arrow { transform: rotate(90deg); }
  .flow-diagram:has(> .flow2) > svg.flow-arrows { display: none; }
}

/* ═══════════ Diagram grid — pure CSS grid, one rotated CSS arrow, no JS ═══════════ */
.dg-wrap { container-type: inline-size; }  /* collapse responds to the diagram's own width, not the viewport */
.dgrid { --dg-gap: 3.25rem; --dg-len: calc(var(--dg-gap) - 0.55rem); display: grid; grid-template-columns: 1fr var(--dg-gap) 1fr; align-items: stretch; margin-bottom: 1.25rem; }
.flow2-box { min-width: 0; }  /* let long words wrap instead of stretching a grid track */
.dg-conn { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); }
.dg-conn.ac-cyan{color:var(--c-cyan);} .dg-conn.ac-gold{color:var(--c-gold);} .dg-conn.ac-green{color:var(--c-green);}
.dg-conn.ac-pink{color:var(--c-pink);} .dg-conn.ac-purple{color:var(--c-purple);} .dg-conn.ac-orange{color:var(--c-orange);}
/* ONE arrow shape (points right), rotated per direction so every arrow matches
   with a proper tail. Colour comes from the parent via currentColor. */
.dg-arrow { position: relative; display: block; width: var(--dg-len); height: 4px; background: currentColor; border-radius: 2px; }
.dg-arrow::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translate(-1px,-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; }
.dg-arrow.dir-left { transform: rotate(180deg); }
.dg-arrow.dir-down { transform: rotate(90deg); }
.dg-arrow.dir-up   { transform: rotate(-90deg); }
.dg-arrow.dir-both::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translate(1px,-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 11px solid currentColor; }
.dg-sym { font-size: 1.9rem; font-weight: 800; line-height: 1; font-family: 'Outfit','Helvetica Neue',Arial,sans-serif; font-variant-emoji: text; }  /* = ≠ + between two boxes */
.dg-stack { display: none; }
/* Phone-width (the diagram's own width, ~820px): grid → single flex column in
   reading order, with a ↓ between each box. Pure CSS — nothing measured. */
@container (max-width: 820px) {
  .dgrid { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .dgrid .flow2-box { order: var(--mord, 0); }
  .dgrid .dg-stack { order: var(--mord); }
  .dg-conn { display: none; }
  .dg-stack { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); padding: 0.35rem 0; }
}
.big-sym { font-size: 4rem; font-weight: 900; line-height: 1; color: #fff; opacity: 0.65; font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; font-variant-emoji: text; }
/* Distinction extras (used by Element Studio's customiser; all additive) */
.distinction-header.green  { color: var(--c-green); }
.distinction-header.white  { color: #fff; }
.distinction-header.hbg-cyan   { background: rgba(var(--c-cyan-rgb),0.10); }
.distinction-header.hbg-gold   { background: rgba(var(--c-gold-rgb),0.10); }
.distinction-header.hbg-pink   { background: rgba(var(--c-pink-rgb),0.10); }
.distinction-header.hbg-green  { background: rgba(var(--c-green-rgb),0.10); }
.distinction-header.hbg-purple { background: rgba(var(--c-purple-rgb),0.10); }
/* Solid (bold) header bar — full palette colour with auto-contrast text.
   .solid + .hbg-X together beat the .distinction-header.<textcolour> rule, so
   the bar stays readable whatever header text colour was picked. */
.distinction-header.solid.hbg-cyan   { background: var(--c-cyan);   color: #0a0a0f; }
.distinction-header.solid.hbg-gold   { background: var(--c-gold);   color: #0a0a0f; }
.distinction-header.solid.hbg-green  { background: var(--c-green);  color: #0a0a0f; }
.distinction-header.solid.hbg-pink   { background: var(--c-pink);   color: #fff; }
.distinction-header.solid.hbg-purple { background: var(--c-purple); color: #fff; }
.distinction-body.merged { grid-template-columns: 1fr 1fr; }  /* no connector → boxes join */
.big-sym.word { font-size: 0.95rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: 0.5; text-align: center; }
/* Distinction flow — stack rows into a vertical flowchart with connectors */
.distinction-flow { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.distinction-flow .distinction { margin-bottom: 0; }
.flow-link { display: flex; align-items: center; justify-content: center; padding: 0.6rem 0; }  /* medium gap */
.flow-link.gap-s { padding: 0.2rem 0; }
.flow-link.gap-l { padding: 1.7rem 0; }
.flow-sym { font-size: 4rem; font-weight: 900; line-height: 1; color: #fff; opacity: 0.6; font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; font-variant-emoji: text; }  /* matches .big-sym */
.flow-sym.word { font-size: 0.95rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: 0.5; color: rgba(255,255,255,0.6); }
/* down/up arrows reuse the SAME → glyph as the side arrow, just rotated */
.flow-sym.rot-down { transform: rotate(90deg); }
.flow-sym.rot-up   { transform: rotate(-90deg); }
/* connector arrow colours — apply to both the in-box (.big-sym) and between-row (.flow-sym) arrows; white is the default (no class) */
.big-sym.ac-cyan,   .flow-sym.ac-cyan   { color: var(--c-cyan);   opacity: 0.9; }
.big-sym.ac-gold,   .flow-sym.ac-gold   { color: var(--c-gold);   opacity: 0.9; }
.big-sym.ac-pink,   .flow-sym.ac-pink   { color: var(--c-pink);   opacity: 0.9; }
.big-sym.ac-green,  .flow-sym.ac-green  { color: var(--c-green);  opacity: 0.9; }
.big-sym.ac-purple, .flow-sym.ac-purple { color: var(--c-purple); opacity: 0.9; }

/* ── Flow connector ── */
.flow-chain { display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 1.25rem; }
.flow-node { flex: 1; padding: 1.25rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.flow-node.purple-bg { background: rgba(var(--c-purple-rgb),0.07); border-right: 1px solid var(--border); }
.flow-node.pink-bg   { background: rgba(var(--c-pink-rgb),0.07);   border-right: 1px solid var(--border); }
.flow-node.gold-bg   { background: rgba(var(--c-gold-rgb),0.07);   border-right: 1px solid var(--border); }
.flow-node.cyan-bg   { background: rgba(var(--c-cyan-rgb),0.07);   border-right: 1px solid var(--border); }
.flow-node.green-bg  { background: rgba(var(--c-green-rgb),0.07); }
.flow-eyebrow { font-size: 0.58rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.flow-eyebrow.purple { color: var(--c-purple); }
.flow-eyebrow.pink   { color: var(--c-pink); }
.flow-eyebrow.gold   { color: var(--c-gold); }
.flow-eyebrow.cyan   { color: var(--c-cyan); }
.flow-eyebrow.green  { color: var(--c-green); }
.flow-term { font-size: 1.2rem; font-weight: 900; line-height: 1.2; }
.flow-term.purple { color: var(--c-purple); }
.flow-term.pink   { color: var(--c-pink); }
.flow-term.gold   { color: var(--c-gold); }
.flow-term.cyan   { color: var(--c-cyan); }
.flow-term.green  { color: var(--c-green); }
.flow-desc { font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 1.5; }
.flow-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 0.5rem; min-width: 48px; background: rgba(255,255,255,0.015); }
.flow-arrow-sym { font-size: 2.4rem; font-weight: 900; color: #fff; opacity: 0.35; line-height: 1; }
.flow-arrow-lbl { font-size: 0.5rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.25); text-align: center; margin-top: 0.2rem; }

/* ── Sim banner ── */
.sim-banner { border-radius: 14px; border: 1px dashed rgba(var(--c-cyan-rgb),0.25); background: rgba(var(--c-cyan-rgb),0.03); padding: 1.75rem 1.5rem; margin-bottom: 1.25rem; display: flex; gap: 1.5rem; align-items: center; }
.sim-icon { font-size: 3rem; flex-shrink: 0; }
.sim-label { font-size: 0.6rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--c-cyan); margin-bottom: 0.4rem; }
.sim-title { font-size: 1.25rem; font-weight: 900; color: #fff; margin-bottom: 0.35rem; }
.sim-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.sim-tabs { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.sim-tab { font-size: 0.72rem; font-weight: 800; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(var(--c-cyan-rgb),0.08); border: 1px solid rgba(var(--c-cyan-rgb),0.2); color: var(--c-cyan); }

/* ── Callouts ── */
.callout-tip { background: rgba(var(--c-cyan-rgb),0.05); border: 1px solid rgba(var(--c-cyan-rgb),0.2); border-left: 3px solid var(--c-cyan); border-radius: 0 10px 10px 0; padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.9rem; color: rgba(255,255,255,0.78); line-height: 1.6; }
.callout-tip strong { color: var(--c-cyan); }
.callout-tip-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-cyan); margin-bottom: 0.3rem; }
.callout-warn { background: rgba(var(--c-gold-rgb),0.05); border: 1px solid rgba(var(--c-gold-rgb),0.2); border-left: 3px solid var(--c-gold); border-radius: 0 10px 10px 0; padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.9rem; color: rgba(255,255,255,0.78); line-height: 1.6; }
.callout-warn strong { color: var(--c-gold); }
.callout-warn-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-gold); margin-bottom: 0.3rem; }
.callout-pink { background: rgba(var(--c-pink-rgb),0.05); border: 1px solid rgba(var(--c-pink-rgb),0.2); border-left: 3px solid var(--c-pink); border-radius: 0 10px 10px 0; padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.9rem; color: rgba(255,255,255,0.78); line-height: 1.6; }
.callout-pink strong { color: var(--c-pink); }
.callout-pink-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-pink); margin-bottom: 0.3rem; }

/* ── CB Translation table ── */
.cb-table { border-radius: 14px; overflow: hidden; border: 1px solid rgba(var(--c-gold-rgb),0.2); margin-bottom: 1.25rem; }
.cb-table-head { background: rgba(var(--c-gold-rgb),0.08); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 900; letter-spacing: 0.5px; color: var(--c-gold); border-bottom: 1px solid rgba(var(--c-gold-rgb),0.15); }
.cb-table-body { background: rgba(var(--c-gold-rgb),0.03); }
.cb-table-cols { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(var(--c-gold-rgb),0.12); }
.cb-table-col-head { padding: 0.5rem 1.25rem; font-size: 0.75rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(var(--c-gold-rgb),0.55); }
.cb-table-col-head:first-child { border-right: 1px solid rgba(var(--c-gold-rgb),0.1); }
.cb-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(var(--c-gold-rgb),0.07); }
.cb-row:last-child { border-bottom: none; }
.cb-cell { padding: 0.9rem 1.25rem; font-size: 0.87rem; line-height: 1.55; }
.cb-cell.left { border-right: 1px solid rgba(var(--c-gold-rgb),0.07); color: rgba(255,255,255,0.48); font-style: italic; }
.cb-cell.right { color: rgba(255,255,255,0.82); }
.cb-cell.right strong { color: var(--c-gold); font-style: normal; }

/* ── Question tabs ── */
.qt-wrap { margin-top: 0.5rem; }
.qt-tabs { display: flex; border: 1px solid var(--border); border-radius: 14px 14px 0 0; overflow: hidden; }
.qt-tab { flex: 1; padding: 0.9rem 0.5rem; text-align: center; font-size: 0.78rem; font-weight: 800; cursor: pointer; background: rgba(255,255,255,0.02); color: var(--muted); border-right: 1px solid var(--border); transition: all 0.15s; line-height: 1.3; }
.qt-tab:last-child { border-right: none; }
.qt-tab:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.qt-tab.active.c { color: var(--c-cyan);   background: rgba(var(--c-cyan-rgb),0.06);  border-bottom: 2px solid var(--c-cyan); }
.qt-tab.active.g { color: var(--c-gold);   background: rgba(var(--c-gold-rgb),0.06);  border-bottom: 2px solid var(--c-gold); }
.qt-tab.active.p { color: var(--c-pink);   background: rgba(var(--c-pink-rgb),0.06);  border-bottom: 2px solid var(--c-pink); }
.qt-tab.active.v { color: var(--c-purple); background: rgba(var(--c-purple-rgb),0.06); border-bottom: 2px solid var(--c-purple); }
.qt-tab.active.n { color: var(--c-green);  background: rgba(var(--c-green-rgb),0.06);  border-bottom: 2px solid var(--c-green); }
.qt-panel { display: none; border: 1px solid var(--border); border-top: none; border-radius: 0 0 14px 14px; }
.qt-panel.active { display: block; }
.qt-inner { padding: 1.5rem; }
.qt-plain { background: rgba(var(--c-green-rgb),0.05); border: 1px solid rgba(var(--c-green-rgb),0.15); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.qt-plain-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-green); margin-bottom: 0.3rem; }
.qt-plain-text { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.5; }
.qt-costume { background: rgba(var(--c-gold-rgb),0.04); border: 1px solid rgba(var(--c-gold-rgb),0.15); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.qt-costume-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-gold); margin-bottom: 0.3rem; }
.qt-costume-text { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.6; font-style: italic; }
.qt-steps { margin-bottom: 1.25rem; }
.qt-steps-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.qt-step { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.5rem; font-size: 0.9rem; color: rgba(255,255,255,0.72); line-height: 1.55; }
.qt-step-n { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--border); font-size: 0.7rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; color: rgba(255,255,255,0.4); }
.exq-card { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.exq-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.exq-stem { font-size: 0.95rem; font-weight: 600; color: #fff; line-height: 1.6; margin-bottom: 1rem; }
.exq-opt { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.55rem 0.75rem; border-radius: 8px; margin-bottom: 0.4rem; font-size: 0.88rem; color: rgba(255,255,255,0.6); border: 1px solid transparent; cursor: pointer; transition: all 0.12s; }
.exq-opt:hover { background-color: rgba(255,255,255,0.04); border-color: var(--border); }
.exq-opt.correct { background-color: rgba(var(--c-green-rgb),0.07); border-color: rgba(var(--c-green-rgb),0.3); color: rgba(255,255,255,0.85); }
.exq-opt.correct .opt-l { background: var(--c-green); color: #000; }
.opt-l { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.08); font-size: 0.72rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-top: 0.05rem; }
.exq-why { background: rgba(var(--c-green-rgb),0.05); border: 1px solid rgba(var(--c-green-rgb),0.12); border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.83rem; color: rgba(255,255,255,0.62); line-height: 1.55; margin-top: 0.75rem; }
.exq-why strong { color: var(--c-green); }
.practice-set { margin-top: 1rem; }
.practice-label { font-size: 0.62rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }

/* ── Interactive practice questions ──
   A .practice-q card hides its answer until the student picks an option.
   The worked example (which is NOT .practice-q) still shows its answer up
   front as the single modeled solution. On the first click the card gets
   .answered (see u5pick in scripts/unit5_6.js): the correct option turns
   green, a wrong pick turns pink, and the explanation reveals. */
/* While unanswered: mask the correct option so it looks like every other,
   and hide the explanation. Using :not(.answered) (rather than a higher-
   specificity reveal rule) means that the moment the card is answered these
   rules simply stop matching and the normal .exq-opt.correct / .exq-why
   styles take over — no specificity duel to lose. */
.exq-card.practice-q:not(.answered) .exq-opt.correct { background-color: transparent; border-color: transparent; color: rgba(255,255,255,0.6); }
.exq-card.practice-q:not(.answered) .exq-opt.correct .opt-l { background: rgba(255,255,255,0.08); color: #fff; }
.exq-card.practice-q:not(.answered) .exq-why { display: none; }
/* After a pick: correct is green (base rule), the wrong pick goes pink,
   untouched options dim, and check/cross markers appear. */
.exq-card.practice-q.answered .exq-opt { cursor: default; }
.exq-card.practice-q.answered .exq-opt:hover { background-color: transparent; border-color: transparent; }
.exq-card.practice-q.answered .exq-opt.correct { background-color: rgba(var(--c-green-rgb),0.07); border-color: rgba(var(--c-green-rgb),0.3); }
.exq-card.practice-q.answered .exq-opt.correct::after { content: '✓'; margin-left: auto; color: var(--c-green); font-weight: 900; }
.exq-card.practice-q.answered .exq-opt.picked:not(.correct) { background-color: rgba(var(--c-pink-rgb),0.07); border-color: rgba(var(--c-pink-rgb),0.35); color: rgba(255,255,255,0.85); }
.exq-card.practice-q.answered .exq-opt.picked:not(.correct) .opt-l { background: var(--c-pink); color: #000; }
.exq-card.practice-q.answered .exq-opt.picked:not(.correct)::after { content: '✗'; margin-left: auto; color: var(--c-pink); font-weight: 900; }
.exq-card.practice-q.answered .exq-opt:not(.correct):not(.picked) { opacity: 0.5; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .vcard-row.two, .vcard-row.three { grid-template-columns: 1fr; }
  .concept-box { grid-template-columns: 1fr; }
  .cb-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .distinction-body { grid-template-columns: 1fr; }
  .dist-divider { padding: 0.5rem; border: none; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
  .flow-chain { flex-direction: column; }
  .flow-node { border-right: none !important; border-bottom: 1px solid var(--border); }
  .flow-arrow { min-width: auto; padding: 0.4rem; }
  .cb-table-cols, .cb-row { grid-template-columns: 1fr; }
  .cb-cell.left { border-right: none; border-bottom: 1px solid rgba(var(--c-gold-rgb),0.07); }
  .qt-tabs { flex-wrap: wrap; }
  .qt-tab { flex: none; width: 50%; }
  .sim-banner { flex-direction: column; text-align: center; }
}