/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   foyl Labs - interactive check engine v2 (chrome).

   Paired with /labs/labs.js (window.foylLab). Each section's task
   mounts IN-FLOW at the bottom of that `.sec` (never overlays the
   content) as a collapsible panel. Widgets favour tactile, animated,
   3D interactions over plain multiple-choice. Uses platform CSS vars
   so projector mode + per-lab palettes are inherited; GSAP powers the
   entrances/success bursts, three.js the 3D topology (both optional,
   with static fallbacks under reduced-motion / projector / no-WebGL).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{ --lab-accent:var(--blue,#00AEEF); --lab-accent2:var(--cyan,#00D4FF); }

/* Shared answer-backed sidebar state. Legacy lab scripts still move the
   current-section highlight, but the engine owns `.dn`, the checkmark, and
   the progress fill based only on correctly solved activities. */
.sbbtn{ font-size:11.75px!important; }
.sbbtn.dn .sbnum::after{ content:'\2713'; font-size:10px; margin-left:2px; }
.sbbtn[data-activity-status="required"] .sbnum{ color:var(--tx4,#9A948D); }

/* ── locked / ready Next button ──────────────────────────────── */
#next-btn.lab-locked{ background:var(--surf2,#151817)!important; color:var(--tx3,#A19B94)!important;
  border:1px solid var(--border2,rgba(100,168,255,.13))!important; cursor:not-allowed; }
#next-btn.lab-locked::after{ content:'\1F512'; margin-left:7px; font-size:11px; opacity:.7; }
#next-btn.lab-ready{ animation:lab-ready 1.3s ease-in-out 2; }
@keyframes lab-ready{ 0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,0)} 50%{box-shadow:0 0 0 4px rgba(0,212,255,.22)} }

/* ── in-flow task panel (child of .sec, shows when section is .on) ── */
.lab-tp{ flex-shrink:0; display:flex; flex-direction:column; min-height:0;
  background:linear-gradient(180deg,var(--bg2,#080A09),var(--bg,#020403));
  border-top:1px solid var(--border2,rgba(100,168,255,.16));
  box-shadow:0 -1px 0 rgba(0,212,255,.06), 0 -18px 40px -30px rgba(0,212,255,.4);
  font-family:var(--font,'Outfit',sans-serif); position:relative; }
.lab-tp::before{ content:''; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--lab-accent),var(--lab-accent2),transparent);
  opacity:.55; }
.lab-tp.solved::before{ background:linear-gradient(90deg,transparent,var(--ok,#00897B),#4DB6AC,transparent); opacity:.7; }
.lab-tp-hd{ display:flex; align-items:center; gap:12px; padding:10px 22px; cursor:pointer; user-select:none;
  flex-shrink:0; }
.lab-tp-hd:focus-visible{ outline:2px solid var(--lab-accent2); outline-offset:-3px; }
.lab-tp-ico{ width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,174,239,.1); border:1px solid rgba(0,174,239,.25); color:var(--lab-accent); flex-shrink:0; }
.lab-tp.solved .lab-tp-ico{ background:rgba(0,137,123,.12); border-color:rgba(0,137,123,.35); color:var(--ok-fg,#4DB6AC); }
.lab-tp-ico svg{ width:13px; height:13px; }
.lab-tp-tt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.lab-tp-k{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tx3,#A19B94); }
.lab-tp-t{ font-size:13.5px; color:var(--tx,#EDE9E3); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lab-tp-status{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.lab-tp-status.locked{ color:var(--warn,#C4942A); background:rgba(196,148,42,.1); border:1px solid rgba(196,148,42,.28); }
.lab-tp-status.solved{ color:var(--ok-fg,#4DB6AC); background:rgba(0,137,123,.1); border:1px solid rgba(0,137,123,.3); }
.lab-tp-status .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.lab-tp-status.locked .d{ animation:live-pulse 1.4s ease-in-out infinite; }
.lab-tp-chev{ color:var(--tx3,#A19B94); transition:transform .28s cubic-bezier(.4,0,.2,1); font-size:12px; flex-shrink:0; }
.lab-tp.collapsed .lab-tp-chev{ transform:rotate(-90deg); }
.lab-tp-exit{ display:none; flex-shrink:0; padding:6px 10px; color:var(--tx3,#A19B94); font:10px/1 var(--mono,monospace);
  background:var(--surf,#0F1110); border:1px solid var(--border2,rgba(100,168,255,.14)); border-radius:7px; cursor:pointer; }
.lab-tp-exit:hover{ color:var(--tx,#EDE9E3); border-color:var(--border3,rgba(100,168,255,.24)); }
.lab-tp-notice{ display:none; flex-shrink:0; padding:8px 22px; color:var(--warn,#C4942A); font:10px/1.45 var(--mono,monospace);
  letter-spacing:.04em; background:rgba(196,148,42,.06); border-top:1px solid rgba(196,148,42,.16); border-bottom:1px solid rgba(196,148,42,.16); }
.lab-tp-body{ overflow-y:auto; overflow-x:hidden; padding:2px 22px 20px; max-height:44vh;
  transition:max-height .34s cubic-bezier(.4,0,.2,1), padding .3s, opacity .25s; }
.lab-tp.collapsed .lab-tp-body{ max-height:0!important; padding-top:0; padding-bottom:0; opacity:0; }
.lab-tp.tall .lab-tp-body{ max-height:56vh; }

/* A blocked navigation attempt promotes the required activity into the full
   section workspace. It stays inside the lab shell on desktop and becomes a
   viewport sheet on narrow screens. */
.sec.lab-task-mode{ position:relative!important; }
.lab-tp.lab-task-focus{ position:absolute; inset:0; z-index:180; flex:1 1 auto; min-height:0;
  border:1px solid var(--border2,rgba(100,168,255,.16)); border-radius:0;
  box-shadow:0 -20px 70px rgba(0,0,0,.72),0 0 0 1px rgba(0,212,255,.06);
  background:linear-gradient(180deg,var(--bg2,#080A09),var(--bg,#020403)); }
.lab-tp.lab-task-focus .lab-tp-hd{ padding-top:14px; padding-bottom:14px; background:rgba(8,10,9,.96); border-bottom:1px solid var(--border2,rgba(100,168,255,.14)); }
.lab-tp.lab-task-focus .lab-tp-exit,.lab-tp.lab-task-focus .lab-tp-notice{ display:block; }
.lab-tp.lab-task-focus .lab-tp-body,.lab-tp.lab-task-focus.tall .lab-tp-body{ flex:1 1 auto; max-height:none!important; min-height:0;
  padding:8px clamp(18px,3vw,34px) 28px; opacity:1; overscroll-behavior:contain; }
.lab-tp.lab-task-attention{ animation:lab-task-rise .58s cubic-bezier(.18,.84,.24,1) both; }
@keyframes lab-task-rise{
  0%{ opacity:.35; transform:translateY(72%); }
  68%{ opacity:1; transform:translateY(-1.5%); }
  100%{ opacity:1; transform:translateY(0); }
}
@media(max-width:720px){
  .lab-tp.lab-task-focus{ position:fixed; inset:56px 0 0; z-index:1800; }
  .lab-tp.lab-task-focus .lab-tp-status{ display:none; }
  .lab-tp.lab-task-focus .lab-tp-hd{ gap:9px; padding-left:14px; padding-right:14px; }
  .lab-tp.lab-task-focus .lab-tp-body{ padding-left:14px; padding-right:14px; }
}

/* ── shared mission brief ───────────────────────────────────── */
.mission-overlay{ position:fixed; inset:0; z-index:1400; display:grid; place-items:center; padding:24px;
  background:rgba(2,4,3,.86); backdrop-filter:blur(12px); opacity:0; visibility:hidden;
  transition:opacity .24s ease,visibility .24s ease; }
.mission-brief-open{ overflow:hidden!important; }
.mission-overlay.is-open{ opacity:1; visibility:visible; }
.mission-board{ width:min(920px,100%); max-height:calc(100vh - 48px); overflow-y:auto; padding:clamp(24px,4vw,42px);
  background:linear-gradient(145deg,rgba(21,24,23,.98),rgba(6,9,8,.99)),var(--bg2,#080A09);
  border:1px solid rgba(45,212,191,.22); border-radius:18px; box-shadow:0 34px 100px rgba(0,0,0,.7);
  transform:translateY(12px) scale(.985); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.mission-overlay.is-open .mission-board{ transform:none; }
.mission-board:focus{ outline:none; }
.mission-board-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.mission-eyebrow{ margin-bottom:7px; color:var(--lab-accent2); font:9px/1 var(--mono,monospace); letter-spacing:.21em; text-transform:uppercase; }
.mission-board-label{ color:var(--tx3,#A19B94); font:10px/1 var(--mono,monospace); letter-spacing:.16em; text-transform:uppercase; }
.mission-close{ width:33px; height:33px; flex-shrink:0; color:var(--tx3,#A19B94); font:300 20px/1 var(--font,sans-serif);
  background:var(--surf,#0F1110); border:1px solid var(--border2,rgba(100,168,255,.14)); border-radius:8px; cursor:pointer;
  transition:color .16s,border-color .16s,background .16s; }
.mission-close:hover{ color:var(--tx,#EDE9E3); border-color:var(--border3,rgba(100,168,255,.24)); background:var(--surf2,#151817); }
.mission-title{ max-width:790px; margin:24px 0 0; color:var(--tx,#EDE9E3); font:600 clamp(30px,5vw,50px)/1.06 var(--jakarta,sans-serif); letter-spacing:-.05em; }
.mission-title span{ color:transparent; background:linear-gradient(135deg,var(--lab-accent2),var(--lab-accent),var(--ok,#00897B)); background-clip:text; -webkit-background-clip:text; }
.mission-copy{ max-width:770px; margin:16px 0 0; color:var(--tx2,#A8A29A); font-size:14px; line-height:1.75; }
.mission-definition{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; align-items:start; margin-top:20px; padding:14px 16px;
  background:rgba(0,174,239,.045); border:1px solid rgba(34,211,238,.15); border-radius:10px; }
.mission-definition-label{ color:var(--lab-accent2); font:10px/1.45 var(--mono,monospace); letter-spacing:.09em; text-transform:uppercase; }
.mission-definition p{ margin:0; color:var(--tx2,#A8A29A); font-size:14px; line-height:1.65; }
.mission-objectives{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:24px; }
.mission-objective{ min-height:146px; padding:14px; color:inherit; text-align:left; background:rgba(15,17,16,.78);
  border:1px solid var(--border,rgba(100,168,255,.08)); border-radius:10px; }
button.mission-objective{ font-family:var(--font,sans-serif); cursor:pointer; transition:transform .18s,border-color .18s,background .18s; }
button.mission-objective:hover{ transform:translateY(-2px); border-color:rgba(0,212,255,.3); }
button.mission-objective.active{ border-color:rgba(45,212,191,.45); background:linear-gradient(145deg,rgba(45,212,191,.1),rgba(0,174,239,.04)); box-shadow:0 14px 28px -24px var(--lab-accent2); }
.mission-objective>span{ display:block; color:var(--lab-accent2); font:9px/1 var(--mono,monospace); }
.mission-objective b{ display:block; margin-top:18px; color:var(--tx,#EDE9E3); font:500 12px/1.35 var(--jakarta,sans-serif); }
.mission-objective p{ margin:7px 0 0; color:var(--tx3,#A19B94); font-size:14px; line-height:1.5; }
.mission-objective em{ display:block; margin-top:9px; color:var(--tx4,#9A948D); font:normal 8.5px/1 var(--mono,monospace); letter-spacing:.05em; }
.mission-objective.active em{ color:var(--lab-accent2); }
.mission-objective-detail{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.mission-objective-detail>div{ padding:12px 14px; background:rgba(2,4,3,.42); border:1px solid var(--border,rgba(100,168,255,.08)); border-radius:9px; }
.mission-objective-detail span{ color:var(--tx4,#9A948D); font:8.5px/1 var(--mono,monospace); letter-spacing:.14em; text-transform:uppercase; }
.mission-objective-detail p{ margin:6px 0 0; color:var(--tx2,#A8A29A); font-size:14px; line-height:1.55; }
.mission-objective-detail.pulse{ animation:mission-detail .34s ease; }
@keyframes mission-detail{ from{ opacity:.25; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.mission-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.mission-stats .mini-stat{ padding:12px 14px; background:rgba(15,17,16,.74); border:1px solid var(--border,rgba(100,168,255,.08)); border-radius:9px; }
.mission-stats .mini-stat b{ display:block; color:var(--tx,#EDE9E3); font:600 17px/1.1 var(--jakarta,sans-serif); }
.mission-stats .mini-stat span{ display:block; margin-top:4px; color:var(--tx4,#9A948D); font:8px/1.4 var(--mono,monospace); letter-spacing:.12em; text-transform:uppercase; }
.mission-toolbox{ margin-top:14px; padding:13px 14px; background:rgba(0,174,239,.035); border:1px solid rgba(0,174,239,.13); border-radius:10px; }
.mission-toolbox-label{ color:var(--tx2,#A8A29A); font:9px/1 var(--mono,monospace); letter-spacing:.14em; text-transform:uppercase; }
.mission-toolbox-label span{ margin-left:7px; color:var(--tx4,#9A948D); font-size:10px; letter-spacing:.05em; }
.mission-tool-links{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.mission-tool-link{ display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:var(--tx2,#A8A29A); font:10px/1 var(--mono,monospace);
  text-decoration:none; background:rgba(0,174,239,.055); border:1px solid rgba(0,174,239,.2); border-radius:7px; transition:color .16s,transform .16s,border-color .16s; }
.mission-tool-link::after{ content:'\2197'; color:var(--lab-accent2); }
.mission-tool-link:hover{ color:var(--tx,#EDE9E3); border-color:rgba(0,212,255,.4); transform:translateY(-1px); }
.mission-progress{ margin-top:14px; padding:12px 14px; background:rgba(45,212,191,.035); border:1px solid rgba(45,212,191,.13); border-radius:10px; }
.mission-progress-copy{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--tx4,#9A948D); font:8.5px/1 var(--mono,monospace); letter-spacing:.12em; text-transform:uppercase; }
.mission-progress-copy b{ color:var(--tx2,#A8A29A); font-weight:400; letter-spacing:.04em; text-transform:none; }
.mission-progress-track{ height:4px; margin-top:9px; overflow:hidden; background:var(--surf3,#1C1F1E); border-radius:99px; }
.mission-progress-fill{ display:block; width:0; height:100%; background:linear-gradient(90deg,var(--lab-accent),var(--lab-accent2),var(--ok,#00897B)); border-radius:inherit; transition:width .6s cubic-bezier(.22,1,.36,1); }
.mission-actions{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:17px; margin-top:16px; border-top:1px solid var(--border,rgba(100,168,255,.08)); }
.mission-actions p{ max-width:560px; margin:0; color:var(--tx3,#A19B94); font-size:14px; line-height:1.5; }
.mission-enter{ padding:10px 16px; color:#03110f; font:600 11px/1 var(--mono,monospace); background:linear-gradient(120deg,var(--lab-accent2),var(--lab-accent),var(--ok,#00897B));
  border:0; border-radius:8px; cursor:pointer; white-space:nowrap; transition:transform .16s,filter .16s; }
.mission-enter:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.mission-pill{ position:fixed; top:68px; right:18px; z-index:110; display:flex; align-items:center; gap:8px; padding:8px 9px;
  color:var(--tx2,#A8A29A); font:10px/1 var(--mono,monospace); background:rgba(8,10,9,.94); border:1px solid rgba(45,212,191,.25);
  border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,.35); cursor:pointer; animation:mission-pill-enter .28s ease both; }
.mission-pill[hidden]{ display:none; }
.mission-pill:hover{ color:var(--tx,#EDE9E3); border-color:rgba(45,212,191,.48); }
.mission-pill-dot{ width:7px; height:7px; background:var(--ok,#00897B); border-radius:50%; box-shadow:0 0 10px rgba(45,212,191,.5); }
.mission-pill-open,.mission-pill-progress{ padding:3px 6px; color:var(--tx4,#9A948D); font-size:10px; background:var(--surf2,#151817); border-radius:999px; }
.mission-pill-progress{ color:var(--lab-accent2); }
.mission-pill.is-complete .mission-pill-dot{ background:#4DB6AC; }
@keyframes mission-pill-enter{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }

html[data-theme="projector"] .mission-pill{
  color:var(--tx2,#1A1A1A); background:var(--bg,#FFFFFF); border-color:rgba(21,94,56,.46);
  box-shadow:none; animation:none;
}
html[data-theme="projector"] .mission-pill:hover{
  color:var(--tx,#060606); background:var(--bg2,#F2F4F3); border-color:var(--ok,#155E38);
}
html[data-theme="projector"] .mission-pill-dot{ box-shadow:none; }
html[data-theme="projector"] .mission-pill-open,
html[data-theme="projector"] .mission-pill-progress{ background:var(--surf,#DEE1DF); }

@media(max-width:680px){
  .mission-overlay{ padding:10px; }
  .mission-board{ max-height:calc(100vh - 20px); padding:22px 18px; }
  .mission-objectives{ grid-template-columns:repeat(2,1fr); }
  .mission-definition,.mission-objective-detail{ grid-template-columns:1fr; gap:7px; }
  .mission-actions{ align-items:stretch; flex-direction:column; }
  .mission-enter{ width:100%; }
  .mission-pill{ top:62px; right:10px; }
}

/* ── check card ──────────────────────────────────────────────── */
.lc{ border:1px solid var(--border,rgba(100,168,255,.08)); border-radius:12px;
  background:linear-gradient(180deg,var(--surf,#0F1110),var(--surf,#0F1110)); padding:16px 18px; margin-top:14px;
  position:relative; overflow:hidden; }
.lc::after{ content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02); }
.lc.solved{ border-color:rgba(0,137,123,.3); background:linear-gradient(180deg,rgba(0,137,123,.05),transparent); }
.lc-head{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.lc-tag{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lab-accent); border:1px solid var(--border2,rgba(100,168,255,.14)); padding:3px 9px; border-radius:5px;
  background:rgba(0,174,239,.05); }
.lc-mark{ margin-left:auto; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tx3,#A19B94); display:inline-flex; align-items:center; gap:6px; }
.lc.solved .lc-mark{ color:var(--ok-fg,#4DB6AC); }
.lc-prompt{ font-size:14.5px; color:var(--tx,#EDE9E3); line-height:1.62; margin-bottom:13px; }
.lc-prompt b,.lc-prompt strong{ font-weight:500; }
.lc-prompt code{ font-family:var(--mono,monospace); font-size:12.5px; color:var(--lab-accent2); background:var(--surf2,#151817); padding:1px 6px; border-radius:4px; }
.lc-sub{ font-size:14px; color:var(--tx3,#A19B94); line-height:1.55; margin:-5px 0 12px; }
.lc-actions{ display:flex; align-items:center; gap:10px; margin-top:15px; flex-wrap:wrap; }
.lc-btn{ font-family:var(--font,sans-serif); font-size:13px; padding:9px 17px; border-radius:8px; cursor:pointer;
  border:1px solid var(--border2,rgba(100,168,255,.14)); background:var(--surf2,#151817); color:var(--tx2,#A8A29A); transition:all .16s; }
.lc-btn:hover{ color:var(--tx,#EDE9E3); border-color:var(--border3,rgba(100,168,255,.24)); transform:translateY(-1px); }
.lc-btn.primary{ background:linear-gradient(120deg,var(--lab-accent2),var(--lab-accent)); border:none; color:#041014; font-weight:600; box-shadow:0 4px 14px -6px var(--lab-accent); }
.lc-btn.primary:hover{ opacity:.94; color:#041014; }
.lc-btn.ghost{ background:none; }
.lc-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.lc-hintbtn{ font-family:var(--mono,monospace); font-size:11px; letter-spacing:.06em; color:var(--warn,#C4942A);
  background:none; border:none; cursor:pointer; text-decoration:underline dotted; padding:4px; }
/* help-ladder rungs: hidden until earned (hint used / repeated fails) */
.lc-rung{ display:none; }
.lc-rung.on{ display:inline-block; animation:lc-slidein .3s ease; }
a.lc-rung{ color:var(--cyan,#00D4FF); }
.lc-rung.used{ opacity:.55; text-decoration:none; cursor:default; }
.lc-walk{ margin-top:11px; padding:12px 15px; border-radius:9px; background:rgba(0,174,239,.06);
  border:1px solid rgba(0,174,239,.22); font-size:14px; color:var(--tx2,#A8A29A); line-height:1.7; display:none; }
.lc-walk.show{ display:block; animation:lc-slidein .3s ease; }
.lc-walk .wl{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan,#00D4FF); display:block; margin-bottom:5px; }
.lc-walk code{ font-family:var(--mono,monospace); font-size:11px; color:var(--cyan,#00D4FF); background:rgba(0,174,239,.08); border-radius:4px; padding:1px 5px; }
.lc-feedback{ font-size:14px; margin-top:11px; line-height:1.55; opacity:0; transition:opacity .2s; }
.lc-feedback.show{ opacity:1; }
.lc-feedback.bad{ color:var(--danger-fg,#DF796F); }
.lc-feedback.good{ color:var(--ok-fg,#4DB6AC); }
.lc-hint{ margin-top:11px; padding:10px 14px; border-radius:8px; background:rgba(196,148,42,.07);
  border:1px solid rgba(196,148,42,.22); font-size:14px; color:var(--tx2,#A8A29A); line-height:1.55; display:none; }
.lc-hint.show{ display:block; animation:lc-slidein .3s ease; }
.lc-hint b{ color:var(--warn,#C4942A); font-weight:500; }
.lc-explain{ margin-top:13px; padding:12px 15px; border-radius:9px; background:rgba(0,137,123,.06);
  border:1px solid rgba(0,137,123,.22); font-size:14px; color:var(--tx2,#A8A29A); line-height:1.6; display:none; }
.lc.solved .lc-explain.has{ display:block; animation:lc-slidein .4s ease; }
.lc-explain .el{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ok-fg,#4DB6AC); display:block; margin-bottom:5px; }
@keyframes lc-slidein{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
@keyframes lc-shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
.lc.shake{ animation:lc-shake .34s; }
/* success sweep overlay */
.lc-sweep{ position:absolute; inset:0; pointer-events:none; border-radius:12px; opacity:0;
  background:linear-gradient(120deg,transparent 20%,rgba(0,212,255,.16),rgba(0,137,123,.14),transparent 80%);
  background-size:220% 100%; }
.lc.solved .lc-sweep{ animation:lc-sweep 1s ease; }
@keyframes lc-sweep{ 0%{opacity:1;background-position:120% 0} 100%{opacity:0;background-position:-40% 0} }

/* ── command widget (animated terminal) ──────────────────────── */
.lc-term{ border:1px solid var(--border2,rgba(100,168,255,.14)); border-radius:10px; overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%, rgba(0,174,239,.05), var(--bg,#020403) 60%); }
.lc-term-bar{ display:flex; align-items:center; gap:6px; padding:7px 12px; background:var(--bg2,#080A09); border-bottom:1px solid var(--border,rgba(100,168,255,.07)); }
.lc-term-dot{ width:9px; height:9px; border-radius:50%; }
.lc-term-title{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.1em; color:var(--tx3,#A19B94); margin-left:6px; }
.lc-cmd{ display:flex; align-items:center; gap:0; padding:2px 4px; }
.lc-cmd-ps{ font-family:var(--mono,monospace); font-size:13px; color:var(--ok-fg,#4DB6AC); padding:11px 4px 11px 12px; align-self:center; white-space:nowrap; }
.lc-cmd input{ flex:1; background:none; border:none; outline:none; color:var(--tx,#EDE9E3); font-family:var(--mono,monospace); font-size:13px; padding:11px 12px; min-width:0; caret-color:var(--lab-accent2); }
.lc-cmd input::placeholder{ color:var(--tx4,#9A948D); }
.lc-term-out{ font-family:var(--mono,monospace); font-size:12px; color:var(--ok-fg,#4DB6AC); padding:0 14px; max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease; white-space:pre-wrap; line-height:1.6; }
.lc.solved .lc-term-out{ max-height:200px; padding:2px 14px 12px; }
.lc-tokens{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.lc-token{ font-family:var(--mono,monospace); font-size:11px; color:var(--tx2,#A8A29A); background:var(--surf2,#151817);
  border:1px solid var(--border2,rgba(100,168,255,.14)); border-radius:6px; padding:5px 10px; cursor:pointer; transition:all .14s; }
.lc-token:hover{ color:var(--lab-accent2); border-color:var(--lab-accent); transform:translateY(-1px); background:rgba(0,174,239,.06); }

/* ── option cards (quiz / pick) ──────────────────────────────── */
.lc-opts{ display:flex; flex-direction:column; gap:9px; }
.lc-opt{ display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border2,rgba(100,168,255,.13)); background:var(--surf2,#151817); transition:transform .14s, border-color .14s, background .14s, box-shadow .14s;
  font-size:14px; color:var(--tx2,#A8A29A); line-height:1.5; }
.lc-opt:hover{ border-color:var(--border3,rgba(100,168,255,.24)); color:var(--tx,#EDE9E3); transform:translateX(3px); }
.lc-opt.sel{ border-color:var(--lab-accent); background:rgba(0,174,239,.08); color:var(--tx,#EDE9E3); box-shadow:0 0 0 1px var(--lab-accent) inset, 0 6px 18px -12px var(--lab-accent); }
.lc-opt.right{ border-color:rgba(0,137,123,.55); background:rgba(0,137,123,.09); color:var(--tx,#EDE9E3); }
.lc-opt.wrong{ border-color:rgba(196,90,80,.55); background:rgba(196,90,80,.09); animation:lc-shake .3s; }
.lc-box{ width:19px; height:19px; border-radius:6px; border:1.5px solid var(--tx4,#9A948D); flex-shrink:0; margin-top:0;
  display:flex; align-items:center; justify-content:center; transition:all .14s; }
.lc-box.round{ border-radius:50%; }
.lc-opt.sel .lc-box{ border-color:var(--lab-accent); background:var(--lab-accent); }
.lc-opt.sel .lc-box::after{ content:''; width:8px; height:8px; border-radius:2px; background:#041014; }
.lc-box.round.round::after,.lc-opt.sel .lc-box.round::after{ border-radius:50%; }
.lc-opt.right .lc-box{ border-color:var(--ok,#00897B); background:var(--ok,#00897B); }

/* ── classify (drag chips into buckets) ──────────────────────── */
.lc-cl{ display:flex; flex-direction:column; gap:14px; }
.lc-cl-pool{ display:flex; flex-wrap:wrap; gap:8px; min-height:20px; }
.lc-chip{ font-size:12.5px; color:var(--tx,#EDE9E3); background:var(--surf2,#151817); border:1px solid var(--border2,rgba(100,168,255,.16));
  border-radius:8px; padding:8px 12px; cursor:grab; transition:transform .12s, box-shadow .12s, border-color .12s; user-select:none; }
.lc-chip:hover{ border-color:var(--lab-accent); box-shadow:0 4px 14px -8px var(--lab-accent); }
.lc-chip.dragging{ opacity:.5; cursor:grabbing; }
.lc-chip.placed.right{ border-color:rgba(0,137,123,.5); }
.lc-chip.placed.wrong{ border-color:rgba(196,90,80,.5); animation:lc-shake .3s; }
.lc-buckets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.lc-bucket{ border:1.5px dashed var(--border2,rgba(100,168,255,.16)); border-radius:10px; padding:10px; min-height:76px;
  background:var(--bg,#020403); transition:border-color .15s, background .15s; }
.lc-bucket.over{ border-color:var(--lab-accent); background:rgba(0,174,239,.05); }
.lc-bucket-lbl{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx3,#A19B94); margin-bottom:8px; }
.lc-bucket .lc-drop{ display:flex; flex-wrap:wrap; gap:7px; }

/* ── order (reorder rows) ────────────────────────────────────── */
.lc-ord{ display:flex; flex-direction:column; gap:7px; }
.lc-ord-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:9px;
  border:1px solid var(--border2,rgba(100,168,255,.13)); background:var(--surf2,#151817); transition:border-color .14s, transform .18s; }
.lc-ord-num{ font-family:var(--mono,monospace); font-size:12px; color:var(--lab-accent); width:20px; font-weight:500; }
.lc-ord-lbl{ flex:1; font-size:13px; color:var(--tx2,#A8A29A); }
.lc-ord-move{ display:flex; flex-direction:column; gap:3px; }
.lc-ord-btn{ background:var(--surf3,#1C1F1E); border:none; color:var(--tx2,#A8A29A); width:24px; height:17px; border-radius:5px; cursor:pointer; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.lc-ord-btn:hover{ color:var(--lab-accent2); background:var(--surf,#0F1110); }
.lc-ord-item.right{ border-color:rgba(0,137,123,.45); }
.lc-ord-item.wrong{ border-color:rgba(196,90,80,.45); }

/* ── diagram (2D SVG builder + 3D host) ──────────────────────── */
.lc-stage{ position:relative; border:1px solid var(--border2,rgba(100,168,255,.14)); border-radius:12px;
  background:radial-gradient(120% 120% at 50% 0%, rgba(0,174,239,.05), var(--bg,#020403) 65%); overflow:hidden; }
.lc-stage canvas{ display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.lc-stage canvas:active{ cursor:grabbing; }
.lc-diagram svg{ display:block; width:100%; height:auto; touch-action:none; }
.lc-dg-node rect{ fill:var(--surf2,#151817); stroke:var(--border3,rgba(100,168,255,.3)); stroke-width:1.5; transition:stroke .15s, fill .15s; cursor:pointer; }
.lc-dg-node:hover rect{ stroke:var(--lab-accent2); }
.lc-dg-node.src rect{ stroke:var(--lab-accent2); stroke-width:2.5; fill:rgba(0,212,255,.08); }
.lc-dg-node.attacker rect{ stroke:rgba(196,90,80,.5); }
.lc-dg-node text{ fill:var(--tx,#EDE9E3); font-family:var(--mono,monospace); font-size:12px; pointer-events:none; text-anchor:middle; }
.lc-dg-node tspan.sub{ fill:var(--tx3,#A19B94); font-size:10px; }
.lc-dg-edge{ stroke:var(--warn,#C4942A); stroke-width:2.5; cursor:pointer; }
.lc-dg-edge:hover{ stroke:var(--danger,#C45A50); }
.lc-dg-edge.ok{ stroke:var(--ok,#00897B); }
.lc-dg-edge.wrong{ stroke:var(--danger,#C45A50); stroke-dasharray:6 4; }
.lc-flow{ fill:var(--lab-accent2); }
.lc-dg-bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--border,rgba(100,168,255,.07)); background:var(--bg2,#080A09); flex-wrap:wrap; }
.lc-dg-hint{ font-size:12px; color:var(--tx3,#A19B94); flex:1; min-width:170px; line-height:1.45; }
.lc-dg-count{ font-family:var(--mono,monospace); font-size:11px; color:var(--tx2,#A8A29A); }
.lc-3dbadge{ position:absolute; top:10px; right:12px; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--lab-accent2); background:rgba(0,10,14,.5); border:1px solid rgba(0,212,255,.25); padding:3px 9px; border-radius:999px; pointer-events:none; }

/* ── completion overlay ──────────────────────────────────────── */
.lab-overlay{ position:fixed; inset:0; z-index:2000; background:rgba(2,4,3,.85); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; animation:lab-fade .3s ease forwards; }
@keyframes lab-fade{ to{opacity:1} }
.lab-card{ width:100%; max-width:520px; background:linear-gradient(180deg,var(--surf,#0F1110),var(--bg2,#080A09));
  border:1px solid var(--border2,rgba(100,168,255,.18)); border-radius:18px; padding:32px 30px 26px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.6); position:relative; overflow:hidden; }
.lab-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--lab-accent2),var(--ok,#00897B)); }
.lab-card .k{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ok-fg,#4DB6AC); }
.lab-card .t{ font-family:var(--jakarta,sans-serif); font-size:24px; font-weight:600; color:var(--tx,#EDE9E3); margin:8px 0 4px; }
.lab-card .grade{ font-size:13.5px; color:var(--tx2,#A8A29A); margin-bottom:18px; }
.lab-score-row{ display:flex; align-items:center; justify-content:center; gap:26px; margin:6px 0 20px; }
.lab-ring{ position:relative; width:120px; height:120px; flex-shrink:0; }
.lab-ring .num{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lab-ring .num .v{ font-family:var(--jakarta,sans-serif); font-size:28px; font-weight:600; color:var(--tx,#EDE9E3); }
.lab-ring .num .u{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx3,#A19B94); }
.lab-tally{ display:flex; flex-direction:column; gap:12px; text-align:left; }
.lab-tally-item .v{ font-family:var(--jakarta,sans-serif); font-size:19px; font-weight:600; color:var(--tx,#EDE9E3); }
.lab-tally-item .l{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--tx3,#A19B94); }
.lab-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.lab-actions a,.lab-actions button{ font-family:var(--font,sans-serif); font-size:13px; padding:10px 18px; border-radius:9px; cursor:pointer; text-decoration:none; border:1px solid var(--border2,rgba(100,168,255,.13)); background:var(--surf2,#151817); color:var(--tx2,#A8A29A); transition:all .15s; }
.lab-actions .primary{ background:linear-gradient(120deg,var(--lab-accent2),var(--ok,#00897B)); border:none; color:#041014; font-weight:600; }
.lab-actions a:hover,.lab-actions button:hover{ color:var(--tx,#EDE9E3); }

/* projector + reduced motion: kill motion, keep legibility */
:root[data-theme="projector"] .lab-tp{ background:var(--bg2,#fff); }
:root[data-theme="projector"] .lab-tp-status.locked .d{ animation:none; }
@media (prefers-reduced-motion:reduce){
  .lc.shake,.lc-opt.wrong,.lc-chip.placed.wrong{ animation:none; }
  #next-btn.lab-ready,.lc.solved .lc-sweep,.lab-overlay,.lab-tp.lab-task-attention{ animation:none; opacity:1; transform:none; }
  .lc-hint.show,.lc.solved .lc-explain.has{ animation:none; }
}

/* ── detect check (detection-rule builder, precision/recall scored) ── */
.lc-detect{ display:flex; flex-direction:column; gap:14px; margin-top:4px; }
.lc-rule{ background:var(--bg,#020403); border:1px solid var(--border2,rgba(100,168,255,.14)); border-radius:10px; padding:14px; }
.lc-rule-lbl{ font-family:var(--mono,monospace); font-size:11px; letter-spacing:.04em; color:var(--tx3,#A19B94); margin-bottom:10px; }
.lc-conds{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.lc-cond{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lc-and{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.1em; color:var(--lab-accent); min-width:44px; }
.lc-sel,.lc-vin{ font-family:var(--mono,monospace); font-size:12px; padding:6px 9px; border-radius:6px;
  background:var(--surf,#0F1110); border:1px solid var(--border2,rgba(100,168,255,.14)); color:var(--tx,#EDE9E3); outline:none; }
.lc-sel:focus,.lc-vin:focus{ border-color:var(--lab-accent); }
.lc-sel.op{ color:var(--lab-accent2); }
.lc-vin{ width:120px; }
.lc-rm{ font-family:var(--mono,monospace); font-size:14px; line-height:1; width:26px; height:26px; border-radius:6px;
  background:transparent; border:1px solid var(--border2,rgba(100,168,255,.14)); color:var(--tx4,#9A948D); cursor:pointer; transition:all .12s; }
.lc-rm:hover{ color:var(--danger-fg,#DF796F); border-color:rgba(196,90,80,.4); }
.lc-addcond{ font-family:var(--mono,monospace); font-size:11px; letter-spacing:.03em; padding:6px 12px; border-radius:6px;
  background:rgba(0,174,239,.06); border:1px dashed var(--border3,rgba(100,168,255,.22)); color:var(--lab-accent); cursor:pointer; transition:all .12s; }
.lc-addcond:hover{ background:rgba(0,174,239,.12); }
.lc-nocond{ font-size:12px; color:var(--tx4,#9A948D); font-style:italic; }
.lc-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
@media(max-width:560px){ .lc-metrics{ grid-template-columns:repeat(2,1fr); } }
.lc-metric{ background:var(--surf,#0F1110); border:1px solid var(--border,rgba(100,168,255,.08)); border-radius:8px; padding:9px 11px; text-align:center; transition:border-color .2s; }
.lc-metric.ok{ border-color:rgba(0,137,123,.4); background:rgba(0,137,123,.06); }
.lc-metric.target{ border-style:dashed; }
.lc-metric-v{ font-family:var(--mono,monospace); font-size:19px; color:var(--tx,#EDE9E3); font-weight:500; }
.lc-metric-v.small{ font-size:13px; }
.lc-metric.ok .lc-metric-v{ color:#4DB6AC; }
.lc-metric-l{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--tx4,#9A948D); margin-top:3px; }
.lc-dlegend{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.04em; color:var(--tx3,#A19B94); }
.lc-dlegend .ld{ display:inline-flex; align-items:center; gap:6px; }
.lc-dlegend .ld::before{ content:''; width:9px; height:9px; border-radius:2px; }
.lc-dlegend .tp::before{ background:rgba(0,137,123,.55); }
.lc-dlegend .fp::before{ background:rgba(196,90,80,.55); }
.lc-dlegend .fn::before{ background:rgba(196,148,42,.55); }
.lc-logs{ overflow-x:auto; border:1px solid var(--border,rgba(100,168,255,.08)); border-radius:8px; }
.lc-logtable{ width:100%; border-collapse:collapse; font-family:var(--mono,monospace); font-size:11px; }
.lc-logtable th{ text-align:left; padding:7px 10px; color:var(--tx4,#9A948D); font-size:10px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--border2,rgba(100,168,255,.14)); white-space:nowrap; }
.lc-logtable td{ padding:6px 10px; color:var(--tx3,#A19B94); border-bottom:1px solid var(--border,rgba(100,168,255,.06)); white-space:nowrap; }
.lc-logtable tr:last-child td{ border-bottom:none; }
.lc-logtable tr.tp td{ background:rgba(0,137,123,.1); color:var(--tx2,#A8A29A); }
.lc-logtable tr.fp td{ background:rgba(196,90,80,.1); color:var(--tx2,#A8A29A); }
.lc-logtable tr.fn td{ background:rgba(196,148,42,.09); }
.lc-truth{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.lc-truth.bad{ color:var(--danger-fg,#DF796F); }
.lc-truth.ok{ color:var(--tx4,#9A948D); }