/* ============================================================================
   Think Lab — SHARED QUIZ ENGINE (CSS), replicated from the Grammar Academy gold
   (universal_grammar_v2 chapter engine). For CONTENT-DENSE games: MC / MMC / Match
   / Sequence / Fill-the-blank. Unlike tl-standard, this LETS content breathe and
   scroll INSIDE its card (footer pinned outside) — never overflow:hidden. [2026-06-30]
   ============================================================================ */
:root{
  --q-ch:#ea7a27; --q-ch-soft:#fde8c4; --q-ch-mist:#fdf8f1; --q-ch-deep:#92400e;
  --q-ok:#16a34a; --q-ok-soft:#dcfce7; --q-err:#dc2626; --q-err-soft:#fee2e2;
  --q-ink:#171717; --q-ink-2:#3f3f46; --q-ink-3:#71717a; --q-hint-soft:#f3e8ff;
  --q-card:#ffffff; --q-border:#e7e2d8; --q-bg:#fdfcfa; --q-bg-warm:#fdf3e3; --q-dur:.18s;
}

/* ---- shell: header stays, the question card scrolls, the footer is pinned ---- */
/* Fills the viewport (mount must be a flex column with a height). Content grows to fill when short
   so the footer pins to the bottom with NO exposed band; when a longer question overflows, the whole
   page scrolls on the NATURAL browser scrollbar — never an inner pane. */
.tlq-wrap{ display:flex; flex-direction:column; flex:1; min-height:0; background:var(--q-bg); }
.tlq-card{ flex:1 0 auto; padding:16px 16px 92px; width:100%; max-width:560px; margin:0 auto; }  /* bottom pad clears the fixed footer */

/* intro screen — fills the viewport, NO footer/CTA (the quiz footer renders only after Start) */
.tlq-intro{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--q-bg); }
.tlq-introcard{ max-width:380px; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.tlq-introshape{ width:92px; height:92px; border-radius:24px; background:#fff; border:1px solid var(--q-border); box-shadow:0 6px 18px rgba(120,72,20,.10); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.tlq-introtitle{ font-family:'Playfair Display',Georgia,serif; font-size:1.7rem; font-weight:800; color:var(--q-ch); line-height:1.1; }
.tlq-introdesc{ font-size:.95rem; line-height:1.55; color:var(--q-ink-2); }
.tlq-intropoints{ display:flex; flex-direction:column; gap:9px; background:var(--q-card); border:1px solid var(--q-border); border-radius:14px; padding:14px 18px; width:100%; text-align:left; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.tlq-intropoint{ font-size:.88rem; color:var(--q-ink-2); display:flex; align-items:center; gap:9px; line-height:1.4; }
.tlq-intropoint::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--q-ch); flex-shrink:0; }
.tlq-start{ margin-top:8px; }

.tlq-q{ font-family:'Playfair Display',Georgia,serif; font-size:1.12rem; font-weight:800;
  color:var(--q-ink); line-height:1.3; margin:4px 0 6px; }
.tlq-scenario{ font-size:.94rem; line-height:1.55; color:var(--q-ink-2); margin:6px 0 10px; }
.tlq-rule{ font-size:.85rem; font-weight:700; color:var(--q-ch-deep); background:var(--q-ch-mist);
  border:1px solid var(--q-ch-soft); border-radius:10px; padding:9px 12px; margin:8px 0; }
.tlq-statements{ display:flex; flex-direction:column; gap:8px; margin:10px 0 4px; }
.tlq-stmt{ display:flex; align-items:flex-start; gap:10px; background:#f7f5f1; border-radius:10px; padding:10px 12px; }
.tlq-stmt .who{ font-weight:800; color:var(--q-ink); flex-shrink:0; }
.tlq-stmt .says{ color:var(--q-ink-2); font-size:.92rem; line-height:1.45; }
/* clue list (logic-grid games) */
.tlq-cluehead{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--q-ch-deep); margin:12px 0 6px; }
.tlq-clues{ display:flex; flex-direction:column; gap:7px; }
.tlq-clue{ display:flex; align-items:flex-start; gap:9px; background:#f7f5f1; border-radius:9px; padding:9px 11px; font-size:.9rem; line-height:1.45; color:var(--q-ink-2); }
.tlq-clue .cn{ width:20px; height:20px; border-radius:50%; background:var(--q-ch-soft); color:var(--q-ch-deep); font-weight:800; font-size:11px; display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.tlq-matchhint{ font-size:.82rem; color:var(--q-ink-3); margin:12px 0 2px; font-style:italic; }

/* ---- footer: Check / Next pinned below the scroll ---- */
/* footer is FIXED to the viewport bottom so the CTA (Check / Next) is ALWAYS visible — even after the
   answer/feedback card pushes the page taller on mobile. The card's bottom padding keeps content from
   hiding behind it; the page (not an inner pane) scrolls behind the fixed footer. */
.tlq-foot{ position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; gap:10px; justify-content:center;
  padding:12px 16px max(14px,env(safe-area-inset-bottom,14px));
  background:var(--q-card); border-top:1px solid var(--q-border); box-shadow:0 -4px 16px rgba(0,0,0,.07); }
.tlq-btn{ font-family:'Playfair Display',Georgia,serif; font-weight:800; font-size:1rem;
  border:none; border-radius:14px; padding:13px 30px; cursor:pointer; transition:transform .1s, background .15s; }
.tlq-btn:active{ transform:translateY(2px); }
.tlq-btn.primary{ background:var(--q-ch); color:#fff; box-shadow:0 3px 0 var(--q-ch-deep); flex:1; max-width:340px; }
.tlq-btn.primary:disabled{ background:#d9d2c6; box-shadow:none; cursor:default; }
.tlq-btn.ghost{ background:#fff; color:var(--q-ch-deep); border:2px solid var(--q-ch-soft); }
.tlq-btn.hidden{ display:none; }

/* ---- stimulus ---- */
.stim-text{ font-family:'Lora',Georgia,serif; font-size:.96rem; line-height:1.7; color:var(--q-ink-2);
  background:#f7f5f1; border-radius:10px; padding:12px 14px; margin:10px 0; }

/* ---- MCQ (verbatim from gold) ---- */
.mcq-opts{ display:flex; flex-direction:column; gap:10px; margin:14px 0; }
/* short options pack into as many columns as fit (3 short names → one row), 1-col on phones */
.mcq-opts.compact{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.mcq-opts.compact .mcq-opt{ min-height:48px; padding:12px 14px; }
@media (max-width:380px){ .mcq-opts.compact{ grid-template-columns:1fr; } }
.mcq-opt{ padding:14px 18px; border-radius:10px; border:2px solid var(--q-border); background:var(--q-card);
  box-shadow:0 2px 6px rgba(0,0,0,.04); font-size:.95rem; font-weight:500; cursor:pointer; text-align:left;
  font-family:inherit; transition:all var(--q-dur); min-height:52px; line-height:1.4; color:var(--q-ink);
  display:flex; align-items:flex-start; gap:10px; width:100%; max-width:100%; }
.mcq-opt > span:not(.mcq-marker){ flex:1; min-width:0; word-break:break-word; padding-top:1px; }
.mcq-opt > .mcq-marker{ margin-top:1px; }
.mcq-opt:hover{ border-color:var(--q-ch); background:#fffcf7; transform:translateY(-1px); box-shadow:0 4px 12px rgba(234,122,39,.1); }
.mcq-opt.sel{ border-color:var(--q-ch); background:var(--q-ch); color:#fff; }
.mcq-opt.ok{ border-color:var(--q-ok); background:var(--q-ok-soft); color:#14532d; }
.mcq-opt.err{ border-color:var(--q-err); background:var(--q-err-soft); color:#991b1b; }
.mcq-opt.miss{ border-color:var(--q-ch); background:var(--q-bg-warm); color:var(--q-ch-deep); border-style:dashed; font-style:italic; }
.mcq-marker{ width:22px; height:22px; border-radius:50%; border:2px solid var(--q-border); display:grid; place-items:center;
  font-size:11px; font-weight:700; color:var(--q-ink-3); flex-shrink:0; }
.mcq-opt.sel .mcq-marker{ border-color:#fff; background:#fff; color:var(--q-ch); }
.mcq-opt.ok .mcq-marker{ border-color:var(--q-ok); background:var(--q-ok); color:#fff; }
.mcq-opt.err .mcq-marker{ border-color:var(--q-err); background:var(--q-err); color:#fff; }
.mcq-opt.miss .mcq-marker{ border-color:var(--q-ch); background:var(--q-ch-soft); color:var(--q-ch-deep); }

/* ---- Match (verbatim from gold: tap-to-pair, colour-coded) ---- */
/* always 2 columns (people | answers) — short labels fit on mobile; tighter gap on phones */
.match-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0; }
@media (max-width:380px){ .match-grid{ gap:7px; } .m-item{ padding:10px 9px; font-size:.84rem; } }
.match-col{ display:flex; flex-direction:column; gap:8px; }
.m-item{ padding:12px; border-radius:9px; border:1.5px solid var(--q-border); background:var(--q-card);
  font-size:.88rem; font-weight:600; cursor:pointer; min-height:44px; display:flex; align-items:center;
  transition:all var(--q-dur); line-height:1.3; font-family:inherit; color:var(--q-ink); }
.m-item:hover{ border-color:var(--q-ch); background:var(--q-ch-soft); }
.m-item.act{ border-color:var(--q-ch); background:var(--q-ch); color:#fff; }
.m-item.err{ border-color:var(--q-err); background:var(--q-err-soft); color:#991b1b; }
.m-item.pair-0{ background:#fef3c7; border-color:#f59e0b; color:#78350f; pointer-events:none; }
.m-item.pair-1{ background:#dbeafe; border-color:#3b82f6; color:#1e3a8a; pointer-events:none; }
.m-item.pair-2{ background:#ede9fe; border-color:#8b5cf6; color:#4c1d95; pointer-events:none; }
.m-item.pair-3{ background:#fce7f3; border-color:#ec4899; color:#831843; pointer-events:none; }
.m-item.pair-0::after,.m-item.pair-1::after,.m-item.pair-2::after,.m-item.pair-3::after{ content:''; width:8px; height:8px; border-radius:50%; margin-left:auto; opacity:.85; }
.m-item.pair-0::after{ background:#f59e0b; } .m-item.pair-1::after{ background:#3b82f6; }
.m-item.pair-2::after{ background:#8b5cf6; } .m-item.pair-3::after{ background:#ec4899; }

/* ---- feedback (verbatim from gold: in-flow cards, not a drawer) ---- */
.fb-area{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.fb-card{ border-radius:10px; padding:14px 16px; font-size:14.5px; line-height:1.55; border:1px solid; }
.fb-card.verdict{ background:#fff7ed; border-color:rgba(234,122,39,.3); color:var(--q-ink); }
.fb-card.reveal{ background:var(--q-ok-soft); border-color:rgba(22,163,74,.3); color:#14532d; }
.fb-card.insight{ background:linear-gradient(135deg,#f0fdf4 0%,#fefce8 100%); border-color:#bbf7d0; color:var(--q-ink); }
.fb-title{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.85; margin-bottom:5px; }
.fb-card.insight .fb-title{ color:#166534; }
.fb-card.verdict .fb-title{ color:var(--q-ch-deep); }
.fb-card.reveal .fb-title{ color:#166534; }
.fb-card p{ margin:0; }