/* Mendeleev Investigation — styles. Page tokens are defined for light and dark; the lab-shell look (header with tabs,
 * cards, buttons, dialog) follows the Ionic or Covalent? Properties Lab so the labs read as one family. */
:root{
  --ink:var(--tlg-text,#0b1f33);--muted:var(--tlg-text-muted,#52667a);--bg:var(--tlg-page-bg,#e8ecf0);--card:var(--tlg-surface,#fff);
  --line:#0b1f33;--soft:#c9d3dc;--field:#fff;--accent:#0a5fc0;--accent-h:#084a99;--ok:#0b6e4f;--bad:#a61b1b;--amber:#a15c00;
  --focus:#ffb800;--hdr:#0b1f33;--hover:#e4edf7;--tint:#f2f7fc;--thbg:#dfe8f1;--oktint:#eafaf3;--badtint:#fff0f0;--ambertint:#fff3df;
  --paper:#fbf6e6;--paper-line:#d9ceac;--manila:#f1dfae;--manila-ink:#4a3a12;--stamp:#c0262d;--bench:#8a5a32;--bench2:#6e4524;
  --cellbg:rgba(255,255,255,.55);--hatch:#b9c3cc;--radius:12px;
  --font:var(--tlg-font-body,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  --font-h:var(--tlg-font-heading,var(--font));
}
html[data-theme="dark"]{
  --ink:#e3ecf5;--muted:#a3b6c8;--bg:#0d1620;--card:#15212e;--line:#7f97ad;--soft:#2f4356;--field:#0f1a25;
  --accent:#2f7fe0;--accent-h:#1f66bd;--ok:#5fd6a6;--bad:#ff8a80;--amber:#ffb35c;
  --hdr:#07131f;--hover:#1f3347;--tint:#1a2a3a;--thbg:#1f3144;--oktint:#123126;--badtint:#3a1818;--ambertint:#3a2a12;
  --paper:#e9e2c9;--paper-line:#a99c74;--manila:#cdbb88;--manila-ink:#2e2408;--stamp:#d9454b;--bench:#5d3d22;--bench2:#432a16;
  --cellbg:rgba(255,255,255,.06);--hatch:#3a4b5c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 var(--font)}
h1,h2,h3{font-family:var(--font-h);line-height:1.2;margin:.2em 0 .5em}
h2{font-size:1.35rem}h3{font-size:1.1rem}
p{margin:.5em 0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:4px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#0b1f33;padding:8px;z-index:100}.skip:focus{left:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:max(1rem,16px);color:var(--muted)}
[hidden]{display:none!important}

/* header */
header#top{background:var(--hdr);color:#fff;padding:6px 14px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;position:relative;z-index:20}
.titleBox{display:flex;flex-direction:column;min-width:0}
header#top h1{margin:0;color:#fff;font-size:1.15rem;white-space:nowrap}
#actTitle{font-size:16px;color:#c9d7e4;font-weight:600}
#tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 100%;order:3}
.tools{margin-left:auto}
#tabs button{background:transparent;color:#fff;border:2px solid #7f95aa;border-radius:10px;padding:6px 11px;min-height:42px;cursor:pointer;font-weight:600;font-size:16px}
#tabs button[aria-selected=true]{background:#fff;color:#0b1f33;border-color:#fff}
#tabs button:disabled{opacity:.45;cursor:not-allowed}
.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tools .btn{min-height:40px;padding:5px 10px;font-size:16px;background:#fff;color:#0b1f33;border-color:#0b1f33}
.tools .btn:hover,.tools .btn:focus-visible{background:#dbe9f7;color:#0b1f33}
#saveStat{font-size:16px;color:#c9d7e4}
#tiSlot .lgt-stat{color:#fff}
.abSlot{display:flex;align-items:center}
#actTools[hidden] ~ .abSlot{margin-left:auto}
@media (max-width:1400px){.abSlot{margin-left:auto}} /* when the pill wraps below the tools, keep it on the right */
@media(max-width:700px){header#top{position:static}}
main{max-width:1500px;margin:0 auto;padding:12px;overflow-x:clip}
.card{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.grid2>*{min-width:0}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.btn{background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:10px;padding:8px 14px;min-height:44px;cursor:pointer;font-weight:650;font-size:16px}
.btn:hover:not(:disabled){background:var(--hover)}
.btn.pri{background:var(--accent);color:#fff}.btn.pri:hover:not(:disabled){background:var(--accent-h)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.sm{min-height:36px;padding:3px 10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.bar label{display:flex;gap:6px;align-items:center;font-weight:600}
label.f{display:block;font-weight:650;margin:.8em 0 .25em}
input:not([type=checkbox]):not([type=radio]),select,textarea{border:3px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--field);min-height:44px;font-size:16px}
textarea{width:100%;min-height:84px;resize:vertical}
select{max-width:100%}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}
.wc{margin:.15em 0 .4em;font-size:16px;color:var(--muted)}.wc.ok{color:var(--ok);font-weight:650}
.msg{font-weight:650}.msg:empty{display:none}
.toggle{display:inline-flex;gap:8px;align-items:center;font-weight:650;cursor:pointer}
.nextRow{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:10px 0 24px;flex-wrap:wrap}
.tabIntro h2{margin-top:.3em}
.tableWrap{overflow-x:auto}
details>summary{cursor:pointer;font-weight:700}

/* hub */
.hubIntro{max-width:900px;margin:18px auto 8px;text-align:center}
.hubIntro p{font-size:1.15rem}
.hubCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1240px;margin:16px auto}
@media(max-width:980px){.hubCards{grid-template-columns:1fr}}
.hubCard{display:flex;gap:14px;align-items:stretch;text-align:left;border:3px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);padding:14px;cursor:pointer;min-height:190px}
.hubCard:hover{background:var(--hover)}
.hubArt{flex:0 0 112px;background:var(--paper);border-radius:12px;display:flex;align-items:center;justify-content:center;border:2px solid var(--paper-line)}
.hubArt svg{width:100px;height:auto}
.hubText{display:flex;flex-direction:column;gap:6px}
.hubKicker{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hubText b{font-size:1.3rem;font-family:var(--font-h)}
.hubBadges{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.status{border:2px solid var(--line);border-radius:999px;padding:1px 12px;font-weight:700;font-size:16px}
.status.none{background:var(--card)}.status.progress{background:var(--ambertint);border-color:var(--amber)}.status.done{background:var(--oktint);border-color:var(--ok)}
.status.assigned{background:var(--accent);color:#fff;border-color:var(--accent)}

/* paper cards (agents) */
.agentCard{position:relative;background:var(--paper);border:2px solid var(--paper-line);border-radius:10px;display:flex;flex-direction:column;align-items:center;padding:2px 2px 4px;color:#1d1a16;user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.agentCard svg{width:100%;height:auto;display:block}
.agentCard .code{font:700 15px/1.1 var(--font);color:#3b3324}
.agentCard.picked{outline:4px solid var(--accent);outline-offset:1px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.agentCard.dragging{opacity:.3}
.dragGhost{position:fixed!important;left:0;top:0;z-index:95;pointer-events:none;opacity:.92;box-shadow:0 12px 26px rgba(0,0,0,.35);transition:none!important}

/* briefing */
.dossier{position:relative;background:var(--manila);color:var(--manila-ink);border-radius:6px 18px 6px 6px;padding:22px 28px 26px;margin:6px 0 12px;border:2px solid #b89a52;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 2px,transparent 2px 6px),radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.35),transparent 60%);box-shadow:0 4px 0 #b89a52}
.dossier h2,.dossier h3{color:var(--manila-ink)}
.fileNo{font:800 16px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em}
.stamp{position:absolute;right:26px;top:18px;border:5px solid var(--stamp);color:var(--stamp);font:900 1.6rem/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;padding:6px 14px;transform:rotate(-9deg);border-radius:6px;opacity:.85;mix-blend-mode:multiply}
.stampIn{animation:stamp .45s cubic-bezier(.2,1.4,.4,1) .25s both}
@keyframes stamp{0%{transform:rotate(-9deg) scale(2.4);opacity:0}100%{transform:rotate(-9deg) scale(1);opacity:.85}}
@media(max-width:600px){.stamp{position:static;display:inline-block;margin-bottom:6px}}
.clue{background:rgba(255,255,255,.45);border:2px dashed #9b7d38;border-radius:10px;padding:8px 14px;margin:12px 0}
.goal{background:rgba(255,255,255,.6);border-left:6px solid var(--stamp);padding:8px 12px;font-size:1.05rem}
.numFold{position:relative;overflow-x:auto;overflow-y:hidden;margin:10px 0;transition:height .5s}
.num{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;border:2px solid #6b5420;border-radius:6px;background:#fffdf3;color:#2d2410;font:700 15px/1 ui-monospace,Menlo,monospace;transition:transform .6s cubic-bezier(.3,.8,.3,1),background .4s}
.numFold.folded .num.d0{background:#ffd6d6}.numFold.folded .num.d1{background:#ffe7c2}.numFold.folded .num.d2{background:#fff6b8}.numFold.folded .num.d3{background:#dcf5c4}.numFold.folded .num.d4{background:#c8f0e0}
.numFold.folded .num.d5{background:#c9e8fa}.numFold.folded .num.d6{background:#d6dcff}.numFold.folded .num.d7{background:#ead5ff}.numFold.folded .num.d8{background:#fbd3ec}.numFold.folded .num.d9{background:#e3e3e3}
.foldCap{font-size:1.05rem}

/* boards */
.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:6px;position:relative}
.orgWrap{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:12px;align-items:start}
.orgSide{position:sticky;top:calc(var(--tlg-hh,0px) + var(--lab-hh,0px) + 8px);display:flex;flex-direction:column;max-height:calc(100vh - var(--tlg-hh,0px) - var(--lab-hh,0px) - 16px)}
.orgSide .card{margin-bottom:8px;padding:8px 12px}
.orgSide .trayBox{flex:1 1 auto;min-height:220px;display:flex;flex-direction:column;margin:0}
.orgSide .trayBox .tray{flex:1;overflow-y:auto;min-height:0}
.zoom.compact{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.zoom.compact h3{grid-column:1/-1;margin:0;font-size:1rem}
.zoom.compact .zoomArt{width:116px;margin:0;grid-row:span 3}
.zoom.compact .counts{margin:0;font-size:15px;padding-left:1em}
.zoom.compact .small{grid-column:1/-1;margin:0}
@media(max-width:1100px){.orgWrap{grid-template-columns:1fr}.orgSide{position:static;max-height:none}.orgSide .trayBox .tray{overflow:visible}}
.boardBox{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);padding:10px;overflow-x:auto}
.a1board{min-width:640px}
.a1board .cell{border:2px dashed var(--soft);border-radius:10px;aspect-ratio:130/168;background:var(--cellbg);display:flex;align-items:stretch;justify-content:stretch;cursor:pointer;min-width:0}
.a1board .cell>.agentCard{width:100%}
.a1board .cell:focus-visible{outline:4px solid var(--focus)}
.picking .a1board .cell:not(:has(.agentCard)){border-color:var(--accent);background:var(--tint)}
.cell.dropHover,.mcell.dropHover{border-color:var(--ok)!important;border-style:solid!important;background:var(--oktint)!important}
.cell.pulse{animation:pulse 1.4s ease-in-out infinite;border-color:var(--stamp);border-style:solid}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,38,45,.6)}50%{box-shadow:0 0 0 8px rgba(192,38,45,0)}}
.outline{border:4px solid var(--amber);border-radius:12px;pointer-events:none;margin:-3px;z-index:2}
.orgSide .card{margin-bottom:12px}
.prog{font-size:1.05rem;margin:0}
.zoom h3{margin-top:0}
.zoomArt{background:var(--paper);border:2px solid var(--paper-line);border-radius:10px;max-width:260px;margin:0 auto 6px}
.zoomArt svg{width:100%;height:auto;display:block}
.counts{margin:.4em 0;padding-left:1.1em}
.trayBox{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);padding:8px 12px}
.trayBox h3{margin:.2em 0 .4em}
.tray{display:flex;flex-wrap:wrap;gap:8px;min-height:140px;border:2px dashed var(--soft);border-radius:10px;padding:8px;align-content:flex-start}
#a1tray .agentCard{width:104px;flex:0 0 auto}
.picking .tray{border-color:var(--accent)}
.trayEmpty{margin:auto}

/* sketch */
.sketchWrap{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(220px,.8fr) minmax(300px,1fr);gap:12px;align-items:start}
@media(max-width:1150px){.sketchWrap{grid-template-columns:1fr 1fr}.sketchWrap .mini{grid-column:1/-1}}
@media(max-width:700px){.sketchWrap{grid-template-columns:1fr}}
.sketchWrap .card{margin:0}
.stepper,.fRow{display:flex;align-items:center;gap:8px;margin:6px 0;flex-wrap:wrap}
.fRow.col{flex-direction:column;align-items:stretch}
.stLbl{font-weight:650;min-width:7.5em}
.stepper output{font:800 1.2rem ui-monospace,Menlo,monospace;min-width:1.6em;text-align:center}
.stepper .btn{min-width:44px;font-size:1.2rem}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:2px solid var(--line);border-radius:8px;background:var(--card);min-height:42px;min-width:48px;padding:4px 12px;cursor:pointer;font-weight:700;font-size:16px;display:inline-flex;gap:6px;align-items:center}
.seg button[aria-checked=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.swatches button{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line);border-radius:10px;background:var(--paper);color:#1d1a16;padding:4px;cursor:pointer;font-size:15px;font-weight:600;line-height:1.15;text-align:center}
.swatches button[aria-checked=true]{outline:4px solid var(--accent);outline-offset:1px}
.swatch{width:40px;height:40px}
.bigArt{background:var(--paper);border:2px solid var(--paper-line);border-radius:12px;max-width:300px;margin:0 auto}
.bigArt svg{width:100%;height:auto;display:block}
.miniBoard{gap:4px}
.miniBoard .cell{aspect-ratio:130/168;border:2px dashed var(--soft);border-radius:6px;display:flex;align-items:center;justify-content:center;min-width:0}
.miniBoard .cell.nb{border:3px solid var(--accent);background:var(--tint)}
.miniBoard .cell.target{border:3px solid var(--stamp);animation:pulse 1.4s ease-in-out infinite}
.miniBoard .q{font:900 1.4rem var(--font-h);color:var(--stamp)}
.miniCard{all:unset;cursor:pointer;background:var(--paper);border-radius:5px;width:100%;height:100%;display:block}
.miniCard svg{width:100%;height:100%;display:block}
.miniCard:focus-visible{outline:4px solid var(--focus)}
.mini .zoom{margin-top:10px}

/* answer sheet */
.unkRow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.unkArt{width:170px;background:var(--paper);border:2px solid var(--paper-line);border-radius:10px}
.unkArt svg{width:100%;display:block}
.unkFields input{width:8em}
table.pat{border-collapse:collapse;width:100%;min-width:640px}
table.pat th,table.pat td{border:2px solid var(--line);padding:6px 8px;text-align:left;vertical-align:middle}
table.pat thead th{background:var(--thbg)}
table.pat select{width:100%}
.reveal .board{max-width:900px;margin:10px 0}
.revealBoard .cell{aspect-ratio:130/168;border-radius:8px;position:relative;background:var(--paper);border:3px solid transparent}
.revealBoard .cell:empty{background:transparent;border:2px dashed var(--soft)}
.revealBoard .cell svg{width:100%;height:100%;display:block;opacity:.55}
.revealBoard .cell.ok{border-color:var(--ok)}.revealBoard .cell.off{border-color:var(--amber)}
.revealBoard .sym{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 2.1rem/1 var(--font-h);color:#0b1f33;text-shadow:0 0 6px #fff,0 0 12px #fff;animation:symIn .45s ease-out both;animation-delay:var(--d)}
@keyframes symIn{0%{opacity:0;transform:scale(2.2)}100%{opacity:1;transform:scale(1)}}
.codeList li{margin:.3em 0}

/* assessment */
.robotBoard{max-width:1000px;margin:0 auto}
.robotBoard .cell{aspect-ratio:130/170;background:var(--paper);border:2px solid var(--paper-line);border-radius:8px;display:flex;align-items:center;justify-content:center;min-width:0}
.robotBoard .cell svg{width:100%;height:100%;display:block}
.robotBoard .cell.blank{background:transparent;border:0}
.robotBoard .cell.hidden{border:3px dashed var(--stamp);background:var(--ambertint)}
.robotBoard .cell.cerHi{outline:4px solid var(--accent)}
.robotBoard .q{font:900 2rem var(--font-h);color:var(--stamp)}
ol.items{list-style:none;padding:0;margin:0}
.item{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);padding:10px 16px;margin-bottom:12px}
.iq{font-size:1.08rem;margin:.2em 0 .5em}
.numIn{width:7em}
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choices.mc{flex-direction:column;max-width:820px}
.choice{border:3px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:8px 14px;min-height:48px;cursor:pointer;text-align:left;font-weight:600;font-size:16px}
.choice:hover{background:var(--hover)}
.choice[aria-checked=true]{border-color:var(--accent);background:var(--tint);box-shadow:0 0 0 3px var(--accent) inset}
.choices.faces .choice{display:flex;flex-direction:column;align-items:center;gap:4px}
.choices.faces .swatch{width:66px;height:46px}
.choices.robots .choice{position:relative;width:150px;padding:6px;background:var(--paper)}
.choices.robots svg{width:100%;height:auto;display:block}
.optN{position:absolute;left:8px;top:6px;background:#0b1f33;color:#fff;border-radius:6px;padding:0 8px;font-size:16px}
.scoreCard .bigScore{font:800 2.4rem/1 ui-monospace,Menlo,monospace;color:var(--ok);margin:.2em 0}
ol.review li{margin:.6em 0;padding:6px 10px;border-radius:8px}
ol.review li.ok{background:var(--oktint)}ol.review li.no{background:var(--badtint)}
.okT{color:var(--ok)}.noT{color:var(--bad)}

/* activity 2: bench, mat, cards */
.a2wrap{display:grid;grid-template-columns:minmax(600px,860px) minmax(300px,1fr);gap:12px;align-items:start}
@media(max-width:1150px){.a2wrap{grid-template-columns:1fr}}
.matBox{background:linear-gradient(135deg,var(--bench),var(--bench2));border-radius:var(--radius);padding:10px;overflow-x:auto;border:3px solid var(--line);
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 3px,transparent 3px 14px),linear-gradient(135deg,var(--bench),var(--bench2))}
.mat{display:grid;grid-template-columns:72px repeat(2,minmax(82px,1fr)) 12px minmax(82px,1fr) 8px repeat(2,minmax(82px,1fr)) 8px repeat(2,minmax(82px,1fr));gap:5px;min-width:680px;background:#f4ecd8;border-radius:8px;padding:6px}
html[data-theme="dark"] .mat{background:#d8ceb4}
.gHead{all:unset;cursor:pointer;text-align:center;font-weight:800;font-size:15px;color:#2d2410;border-bottom:3px solid #6b5420;padding:4px 0}
.gHead:hover{background:rgba(0,0,0,.06)}.gHead:focus-visible{outline:4px solid var(--focus)}
.pHead{display:flex;align-items:center;font-weight:800;font-size:15px;color:#2d2410}
.mcell{min-height:60px;border:2px dashed #9b8a62;border-radius:6px;background:rgba(255,255,255,.55);display:flex;align-items:stretch;cursor:pointer;min-width:0}
.mcell.off{background:repeating-linear-gradient(45deg,#c8bc9c 0 4px,#e6dcc1 4px 10px);border:2px solid #b3a581;cursor:default}
.picking .mcell:not(.off):not(:has([data-card])){border-color:var(--accent);background:#e6f0fb}
.mcell.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.miniEl{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fffdf6;border:2px solid #3b3324;border-radius:6px;color:#1d1a16;padding:2px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;min-width:0}
.miniEl b{font:800 18px/1 var(--font-h)}
.miniEl.unk{background:#fff1c9;border-style:dashed}
.miniEl .mt{display:flex;align-items:center;gap:4px}
.miniEl .md{font:700 16px/1.1 var(--font);font-variant-numeric:tabular-nums;white-space:nowrap;color:#1d1a16}
.stIcon{width:15px;height:15px;fill:#3b3324;stroke:#3b3324}
.miniEl.picked,.idxCard.picked{outline:4px solid var(--accent);outline-offset:1px}
.miniEl.dragging,.idxCard.dragging{opacity:.3}
.knownTray .miniEl{width:92px;min-height:60px;flex:0 0 auto}
.a2side .card{margin-bottom:12px}
.trayCard .tray{max-height:46vh;overflow-y:auto;min-height:90px}
.idxCard{background:#fffdf6;color:#1d1a16;border:2px solid #3b3324;border-radius:6px;width:250px;box-shadow:0 2px 0 rgba(0,0,0,.15);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 23px,#c9dcef 23px 24px);background-position:0 34px}
.idxCard.unk{background-color:#fff8df}
.idxHead{font:800 18px/1 var(--font-h);padding:7px 10px;border-bottom:2px solid #d4626a}
.idxCard dl{margin:0;padding:2px 10px 6px}
.idxCard dl div,.idxRows div{display:flex;align-items:baseline;gap:4px;font-size:15px;line-height:24px}
.idxCard dt,.idxRows dt{flex:0 0 auto;font-weight:700}
.idxCard dt::after,.idxRows dt::after{content:"";flex:1}
.idxCard dd,.idxRows dd{margin:0 0 0 auto;text-align:right;border-bottom:0}
.idxCard dl div::before{content:none}
.idxCard dl div dt{position:relative}
.obsBtn{border:2px solid #0a5fc0;border-radius:6px;background:#e9f2fc;color:#0a3d78;font-weight:700;font-size:15px;padding:0 6px;cursor:pointer}
.unkTray{gap:10px}
.gTable{border-collapse:collapse;font-size:15px;min-width:560px}
.gTable th,.gTable td{border:1px solid var(--soft);padding:3px 6px;text-align:left}
.gTable thead th{background:var(--thbg)}
.gTable tr.uRow{background:var(--ambertint)}
.tools summary{font-size:1.05rem}
.graph{width:100%;max-width:520px;height:auto;display:block;margin-top:6px}
.graph text{font:600 15px var(--font);fill:var(--ink)}
.graph .gl{stroke:var(--soft);stroke-width:1}
.graph .gline{fill:none;stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4}
.graph .pk{fill:var(--accent)}.graph .pu{fill:var(--card);stroke:var(--amber);stroke-width:3}.graph .tu{fill:var(--amber)}
.rq{font-size:1.1rem;font-weight:700}
.dataTables{display:flex;gap:16px;flex-wrap:wrap}
table.dt{border-collapse:collapse;min-width:260px}
table.dt th,table.dt td{border:2px solid var(--line);padding:5px 8px;text-align:left}
table.dt thead th{background:var(--thbg)}
.symIn{width:5em;text-align:center;font-weight:700}
.symIn[aria-invalid=true]{border-color:var(--bad);background:var(--badtint)}
.symNote{display:block;color:var(--bad);font-size:15px}
.insertBar{background:var(--tint);border-radius:8px;padding:6px 8px}
.mat.ro .mcell{cursor:default}
.flip{flex:1;position:relative;transform-style:preserve-3d;perspective:600px;display:flex}
.flip .fFront,.flip .fBack{position:absolute;inset:0;backface-visibility:hidden;display:flex}
.flip .fFront>*{flex:1}
.flip .fBack{transform:rotateY(180deg);flex-direction:column;align-items:center;justify-content:center;background:#fffdf6;border:3px solid;border-radius:6px;color:#1d1a16}
.flip .fBack b{font:900 20px/1 var(--font-h)}.flip .fBack span{font-size:15px}
.flip.ok .fBack{border-color:#0b6e4f;background:#e3f7ee}.flip.off .fBack{border-color:#c77800;background:#fff0d6}
.flip{transition:transform .6s;transform:rotateY(180deg)}
.flip.go{animation:flipIn .7s ease both;animation-delay:var(--d)}
@keyframes flipIn{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
.files .folderTabs{display:flex;gap:4px}
.folderTabs button{border:2px solid #9b7d38;border-bottom:0;border-radius:10px 10px 0 0;background:#e8d6a2;color:#3b2c08;font-weight:800;min-width:56px;min-height:42px;cursor:pointer;font-size:16px}
.folderTabs button[aria-selected=true]{background:var(--manila);transform:translateY(2px)}
.folder{background:var(--manila);color:var(--manila-ink);border:2px solid #9b7d38;border-radius:0 10px 10px 10px;padding:10px 14px}
.folder h3{color:var(--manila-ink)}
.spec{width:100%;max-width:260px;display:block;margin:6px auto;background:#f6f8fa;border-radius:10px}
.idxRows{background:#fffdf6;color:#1d1a16;border-radius:6px;padding:6px 10px;margin:8px 0 0}
table.g16{border-collapse:collapse;width:100%;min-width:560px}
table.g16 th,table.g16 td{border:2px solid var(--line);padding:2px;text-align:left}
table.g16 thead th{background:var(--thbg);padding:5px}
table.g16 input{width:100%;min-width:76px;border:0;border-radius:0;min-height:40px}
#dlgB .seg{margin-top:10px}
.modelNote{border-top:2px solid var(--soft);padding-top:8px}

/* periodic table slide-over */
#ptable{position:fixed;right:0;top:0;bottom:0;width:min(100vw,1110px);z-index:1000;background:var(--card);color:var(--ink);border-left:4px solid var(--line);display:flex;flex-direction:column;box-shadow:-10px 0 30px rgba(0,0,0,.3)}
.ptHead{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:3px solid var(--line);flex-wrap:wrap}
.ptHead h2{margin:0}.ptHead .btn{margin-left:auto}
.ptScroll{overflow:auto;padding:10px}
.ptGrid{display:grid;grid-template-columns:repeat(18,minmax(54px,1fr));grid-auto-rows:minmax(54px,auto);gap:3px;min-width:1030px}
.pt{font:inherit;color:inherit;cursor:pointer;border:2px solid var(--line);border-radius:5px;background:var(--tint);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px;line-height:1.05;text-align:center;min-width:0}
.pt i{font-style:normal;font-size:15px;color:var(--muted)}.pt b{font-size:19px}.pt:hover,.pt:focus-visible{background:var(--hover)}
.ptRead{margin:0;font-size:17px;min-width:16em}.ptRead b{font-size:20px;margin-right:4px}
.pt.ptf{background:var(--card);border-style:dashed;cursor:default}.pt.ptf b{font-size:15px}
.ptg{text-align:center;font-weight:800;color:var(--muted);font-size:15px;align-self:end}

/* dialog + toast */
dialog{border:4px solid var(--line);border-radius:14px;padding:0;max-width:min(94vw,700px);width:100%;background:var(--card);color:var(--ink)}
dialog::backdrop{background:rgba(11,31,51,.6)}
#dlgT{margin:0;padding:12px 18px;background:var(--hdr);color:#fff;font-size:1.15rem}
#dlgB{padding:10px 18px;max-height:66vh;overflow:auto}
#dlgF{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:10px 18px 16px}
#toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);background:#0b1f33;color:#fff;padding:10px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:90;max-width:92vw;text-align:center;font-weight:600}
#toast.show{opacity:1;transform:translate(-50%,0)}
#printArea{display:none}

@media(prefers-reduced-motion:reduce){.stampIn,.cell.pulse,.miniBoard .cell.target,.flip.go,.revealBoard .sym,.mcell.shake{animation:none!important}.num{transition:none!important}}

/* print: only the answer sheet */
@media print{
  html,body{background:#fff;color:#000}
  body.printing>*:not(#printArea){display:none!important}
  body.printing #printArea{display:block!important;font:12pt/1.4 Georgia,serif;color:#000}
  .printHead{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:10px}
  #printArea h2{font-size:16pt}#printArea h3{font-size:13pt;margin:12px 0 4px;break-after:avoid}
  .printTable{border-collapse:collapse;width:100%;margin:4px 0}.printTable th,.printTable td{border:1px solid #000;padding:4px 6px;text-align:left;vertical-align:top}
  .printTwo{display:flex;gap:12px}.printTwo table{flex:1}
  .printBoard{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,28px);gap:3px;max-width:640px}
  .printBoard .pc{border:1px solid #000;display:flex;align-items:center;justify-content:center;font-size:10pt}
  .printUnk{display:flex;gap:14px;align-items:flex-start}.printArt{width:120px;border:1px solid #000}.printArt svg{width:100%;display:block}
  .printRobots .board{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;max-width:640px}
  .printRobots .cell{border:1px solid #999;aspect-ratio:130/170}.printRobots .cell svg{width:100%;height:100%}.printRobots .cell.blank{border:0}
  .printRobots .q{font-size:16pt;font-weight:900;display:flex;justify-content:center}
  .pq{break-inside:avoid;margin:8px 0}
  .blank{display:block;border-bottom:1px solid #000;height:2.4em}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.zoomBig{background:var(--paper);border:2px solid var(--paper-line);border-radius:12px;width:min(300px,80vw);margin:0 auto}.zoomBig svg{width:100%;display:block}
.zoom.compact .btn.sm{justify-self:start}
.robotBoard .cell.shown{position:relative;background:var(--paper)}.robotBoard .tag{position:absolute;left:4px;top:4px;background:var(--stamp);color:#fff;font-weight:800;border-radius:6px;padding:0 7px;font-size:16px}