/* ===== THEME TOKENS (A11Y-2, A11Y-3) =====
   Contrast vs --card (AA needs 4.5:1 text, 3:1 large/UI):
   NIGHT  tx 13.3  mu 6.9  cy 11.1  li 14.1  am 11.1  pk 4.9 (dark text on pk)
   DAY    tx 17.9  mu 7.6  cy 5.4   li 5.0   am 5.0   pk 6.0 (white text on pk)
   CONTRAST tx 21   mu/cy/am 19.6  li 15.5  pk 8.0 (black text on pk)
   Text on a --cy button uses --bg: 12.4 / 5.1 / 19.6.
   Re-check any colour you add. Tokens only: never hard-code colours in rules. */
.studio-shell{--bg:#0B0F1A;--card:#151B2E;--bd:#2c3552;--cy:#00E5FF;--pk:#FF2E88;--onpk:#0B0F1A;--li:#B6FF3B;--am:#FFC83D;--mu:#9AA4BF;--tx:#DDE3F2;--hd:#fff;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);font-size:100%}
.studio-shell[data-theme=day]{--bg:#f8fafc;--card:#fff;--bd:#94a3b8;--cy:#0e7490;--pk:#be185d;--onpk:#fff;--li:#4d7c0f;--am:#b45309;--mu:#475569;--tx:#0f172a;--hd:#0f172a;color-scheme:light}
.studio-shell[data-theme=contrast]{--bg:#000;--card:#000;--bd:#ff0;--cy:#ff0;--pk:#f6c;--onpk:#000;--li:#0f6;--am:#ff0;--mu:#ff0;--tx:#fff;--hd:#fff;color-scheme:dark}
.studio-shell[data-theme=contrast] .panel,.studio-shell[data-theme=contrast] textarea,.studio-shell[data-theme=contrast] input[type=text],.studio-shell[data-theme=contrast] select,.studio-shell[data-theme=contrast] .dlg,.studio-shell[data-theme=contrast] .rc{border-width:2px}

/* ===== BASE (A11Y-10, RESP-1) ===== */
*{box-sizing:border-box}
.studio-shell{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4rem)}
.studio-shell,.studio-shell{overflow-x:hidden}
.studio-shell{margin:0;background:var(--bg);color:var(--tx);font:1rem/1.45 Calibri,Arial,sans-serif;transition:background-color .2s,color .2s}
p,span,h1,h2,h3,div,label,button,small,li{overflow-wrap:anywhere}
/* Dyslexic mode swaps EVERY font (buttons and headings too) and loosens spacing */
.studio-shell.dys,.studio-shell.dys *{font-family:"OpenDyslexic","Open Dyslexic","Comic Sans MS","Comic Neue",Verdana,sans-serif!important}
.studio-shell.dys{letter-spacing:.03em;word-spacing:.08em;line-height:1.7}
/* A11Y-4 */
:focus-visible{outline:3px solid var(--am)!important;outline-offset:2px}
/* A11Y-1 skip link: hidden until focused */
.skip{position:absolute;left:-999px;top:0;background:var(--cy);color:var(--bg);padding:10px 16px;z-index:100;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ===== ACCESSIBILITY TOOLBAR ===== */
.a11y{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:2px solid var(--bd);padding:8px 14px}
.a11y-in{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.a11y-l{font-size:.75rem;letter-spacing:2px;font-weight:700;color:var(--mu);text-transform:uppercase}
.grp{display:flex;align-items:center;gap:4px;background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:3px}
.a11y button{background:transparent;color:var(--tx);border:1.5px solid transparent;padding:2px 10px;min-height:2rem;font-size:.8125rem} /* compact bar: 32px, above the WCAG 2.2 AA 24px minimum */
.a11y button.on{background:var(--cy);color:var(--bg);border-color:var(--cy)}
.a11y .solo{background:var(--bg);border:1.5px solid var(--bd)}
#fsd{min-width:3.2em;text-align:center;font-size:.75rem;font-weight:700;color:var(--mu)}

/* ===== LAYOUT + CONTROLS ===== */
header,main{max-width:1000px;margin:0 auto;padding:0 20px}header{padding-top:22px}main{padding-bottom:40px}main:focus{outline:none}
.tag{display:inline-block;background:var(--li);color:var(--bg);font-weight:700;letter-spacing:2px;font-size:.75rem;padding:4px 12px}
h1{font:700 1.875rem "Trebuchet MS",Arial,sans-serif;color:var(--hd);margin:10px 0 2px}.sub{color:var(--mu);font-style:italic;margin:0 0 10px}
button{font:700 .9375rem "Trebuchet MS",Arial,sans-serif;border:0;border-radius:6px;padding:9px 16px;min-height:2.75rem;cursor:pointer;background:var(--cy);color:var(--bg)} /* A11Y-12 */
button.alt{background:transparent;color:var(--cy);border:1.5px solid var(--cy)}button:hover:not(:disabled){filter:brightness(1.12)}
button:disabled{opacity:.5;cursor:not-allowed}
select{background:var(--card);color:var(--hd);border:1.5px solid var(--bd);border-radius:6px;padding:7px 9px;min-height:2.75rem;font:inherit;max-width:100%}
.tts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 6px;padding:8px 10px;background:var(--card);border:1.5px solid var(--bd);border-radius:8px}
.tts button{background:transparent;color:var(--cy);border:1.5px solid var(--cy)}.tts label{color:var(--mu);font-size:.875rem;font-weight:700}
[role=tablist]{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
[role=tab]{background:var(--card);color:var(--mu);border:1.5px solid var(--bd);display:flex;gap:8px;align-items:center;font-size:.8125rem}
[role=tab][aria-selected=true]{background:var(--cy);color:var(--bg);border-color:var(--cy)}
.panel{background:var(--card);border:1.5px solid var(--bd);border-left:6px solid var(--li);border-radius:10px;padding:16px 18px}.panel:focus{outline:none}
.panel h2{font:700 1.375rem "Trebuchet MS",Arial,sans-serif;color:var(--hd);margin:0 0 4px}
label.f{display:block;font-weight:700;margin:12px 0 2px;color:var(--hd)}.hint{display:block;color:var(--mu);font-size:.875rem;margin-bottom:3px;font-weight:400}
textarea,input[type=text]{width:100%;background:var(--bg);color:var(--hd);border:1.5px solid var(--bd);border-radius:6px;padding:9px 11px;min-height:2.75rem;font:inherit}
textarea{min-height:4.5em;resize:vertical}
.ig{display:flex;align-items:flex-start;gap:10px} /* input group: field + Dictate button, attached like a Tailwind button group */
.ig>textarea,.ig>input{flex:1 1 auto;width:auto;min-width:0}.ig>textarea{max-height:12rem}
.ig>.mic{margin:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 12px;font-size:.8125rem;min-height:2.75rem;max-height:3.5rem;border-radius:6px}
.ref{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:10px}
.rc{--c:var(--cy);background:var(--bg);border:1.5px solid var(--c);border-radius:8px;padding:2px 14px 14px}.rc.sw{--c:var(--pk)}.rc.nw{--c:var(--li)}
.rc label.f{color:var(--c);font:700 1.125rem "Trebuchet MS",Arial,sans-serif;margin-top:12px}.rc .hint{font:400 .875rem Calibri,Arial,sans-serif;color:var(--mu)}
.cite{margin:12px 0 0;font-size:.8125rem}
.sel{margin:2px 0 8px}.sel label{display:block;font-size:.875rem;font-weight:700;color:var(--mu);margin-bottom:2px}.sel select{width:100%}
.rc select{border-color:var(--c)}
.mic[aria-pressed=true]{background:var(--pk);color:var(--onpk);border-color:var(--pk)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* Back / Next at the bottom of every tab */
.pnav{justify-content:space-between;margin-top:18px}.pnav button{flex:1 1 10rem}
@media print{.pnav{display:none!important}}
#live{min-height:1.5em;color:var(--li);font-weight:700;margin-top:10px}
/* A11Y-11: emoji shows only until Font Awesome replaces the <i> with an SVG */
i[data-fb]::before{content:attr(data-fb);font-style:normal;font-family:inherit}.svg-inline--fa,i[data-fb]{margin-right:.3em}

/* ===== MODAL (A11Y-8) ===== */
.ov{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px))}.ov[hidden]{display:none}
.dlg{background:var(--card);color:var(--tx);border:2px solid var(--bd);border-top:6px solid var(--li);border-radius:12px;width:100%;max-width:480px;max-height:100%;overflow:auto;padding:18px}
.dlg h2{font:700 1.375rem "Trebuchet MS",Arial,sans-serif;color:var(--hd);margin:0 0 4px}.dlg h3{font:700 1rem "Trebuchet MS",Arial,sans-serif;color:var(--cy);margin:14px 0 6px}.dlg .hint{margin:0 0 12px}
.opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin:0 0 8px;padding:10px 14px}.opt small{display:block;font-weight:400;color:var(--mu);font-size:.8125rem}.dlg .close{margin-top:6px;width:100%}

/* ===== MOTION + PRINT (A11Y-9, PRINT-1) ===== */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.a11y,.skip,.tts,#tabs,.row,.mic,#dh,#live,button{display:none!important}.studio-shell{background:#fff;color:#000}.panel{border-color:#000}textarea,input{border-color:#000;color:#000;background:#fff}}
.wg{margin:10px 0}.wh{font:700 1.125rem "Trebuchet MS",Arial,sans-serif;color:var(--cy);margin:16px 0 6px}
.pool,.chips{display:flex;flex-wrap:wrap;gap:8px}.pool{min-height:3rem;padding:8px;border:2px dashed var(--bd);border-radius:8px}
.cd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:6px 8px;cursor:grab}.cd .em{font-size:1.5rem}.cd .ct{font-weight:700;color:var(--hd)}.cd select{max-width:11rem}
.gs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:12px}.gp{border:2px solid var(--c);border-top-width:8px;border-radius:8px;padding:6px 10px 10px;min-height:5rem;display:flex;flex-direction:column;gap:6px}.gp h3{color:var(--c);margin:4px 0;font:700 1.0625rem "Trebuchet MS",Arial,sans-serif}
.bar{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) 3.2rem;gap:8px;align-items:center;margin:4px 0}.tr{background:var(--bg);border:1.5px solid var(--bd);height:14px;border-radius:7px;overflow:hidden}.tr i{display:block;height:100%;background:var(--li)}
.rd{border-left:4px solid var(--am);padding:2px 12px;margin:10px 0}.rd a{color:var(--cy);font-weight:700}.wg svg{width:100%;height:auto;max-width:640px;display:block;margin:8px 0}
.portrow{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:10px}.pc-ctl{flex:1;min-width:240px}
.pt{width:200px;height:200px;border:6px solid;overflow:hidden;background:var(--bg);flex:none}.wg .pt svg,.pt img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;margin:0}
.blk{border:2px solid var(--c);border-left-width:8px;border-radius:8px;padding:6px 10px 10px;width:100%}.hd{cursor:grab;font-weight:700;color:var(--mu)}
#cv{border:2px solid var(--bd);border-radius:8px;background:#fff;touch-action:none;width:240px;max-width:100%;height:auto;cursor:crosshair}
.pc{border:2px solid var(--bd);border-radius:12px;padding:14px;background:var(--bg)}.pch{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.pn{font:700 1.5rem "Trebuchet MS",Arial,sans-serif;color:var(--hd);margin:0}blockquote{margin:6px 0;color:var(--am);font-style:italic}
.panel>.ref{grid-template-columns:1fr} /* Reflect: What / So What / Now What stacked in rows */
.steps{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}.hud{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0;font-weight:700;color:var(--hd)}.hud .tr{flex:1;min-width:140px}.ok{color:var(--li)}.no{color:var(--am)}.wg dl{margin:0}.wg dt{font-weight:700;color:var(--cy);margin-top:8px}.wg dd{margin:0}.ck{display:flex;gap:8px;align-items:center;margin:6px 0;font-weight:400;color:var(--tx)}.ck input{width:1.3rem;height:1.3rem}
/* ===== DIAGRAMS (guide, options map, Draw editor) ===== */
.dcv{overflow:auto;border:2px solid var(--bd);border-radius:8px;background:var(--bg);margin:8px 0}
.wg .dcv svg{display:block;width:100%;min-width:600px;max-width:none;height:auto;margin:0}
.wg .dcv #d-svg{min-width:640px;touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none}
.dn{cursor:grab;touch-action:none}
g[data-a]{cursor:pointer;touch-action:auto}
.dn:focus,g[data-a]:focus{outline:none!important}
.fr{display:none}.dn:focus-visible .fr{display:inline}
.tool-on #d-svg,.tool-on .dn{cursor:crosshair}
.dmsg{min-height:1.4em;margin:4px 0;color:var(--li);font-weight:700}
.dsel{border:1.5px solid var(--bd);border-radius:8px;padding:2px 12px 12px;margin:10px 0;background:var(--bg)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:10px;align-items:end}
.dgrid .sel{margin:0}.dtop{align-items:flex-end}.dtop .sel{flex:1 1 16rem;margin:0}
.dl{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.dl li{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:6px 10px}.dl li>span{flex:1 1 12rem}
.chk{list-style:none;padding:0;display:grid;gap:6px}.chk li{border-left:6px solid var(--c);padding:4px 10px;background:var(--bg);border-radius:4px}.chk .ok{--c:var(--li)}.chk .no{--c:var(--am)}
.dtxt{margin:12px 0}.dtxt summary{cursor:pointer;font-weight:700;color:var(--cy);min-height:2.75rem;display:flex;align-items:center}
.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:12px}
.gc{background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:6px 12px 10px}
.gc h4{font:700 1.0625rem "Trebuchet MS",Arial,sans-serif;color:var(--cy);margin:6px 0}
.wg .gc svg{margin:4px 0 8px}.gc p{margin:4px 0}
.tbw{overflow-x:auto}.tb{border-collapse:collapse;width:100%;min-width:30rem}.tb th,.tb td{border:1.5px solid var(--bd);padding:6px 10px;text-align:left;vertical-align:top}.tb thead th,.tb tbody th{background:var(--bg);color:var(--hd)}.tb caption{text-align:left;padding:4px 0}
@media print{.studio-shell,.studio-shell[data-theme]{--bg:#fff;--card:#fff;--tx:#000;--hd:#000;--mu:#333;--cy:#0e7490;--li:#4d7c0f;--am:#b45309;--pk:#be185d;--bd:#94a3b8}.dcv{overflow:visible;border-color:#000}.wg .dcv svg{min-width:0}}
/* ===== GAME LEVELS 1-3 ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hbox{border:1.5px dashed var(--am);border-radius:8px;padding:2px 12px 10px;margin:10px 0;background:var(--bg)}.hbox[hidden]{display:none}
.fc{border:1.5px solid var(--bd);border-radius:8px;padding:8px 12px 10px;margin:10px 0;background:var(--bg)}.fc .ct{font-weight:700;color:var(--hd);display:block}.fc .wh{margin-top:4px}
.fc.okc{border-left:6px solid var(--li)}.fc.noc{border-left:6px solid var(--am)}
.hl3{margin:6px 0 0;padding-left:1.2rem}.hl3 li{margin:2px 0}
.l2g{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:12px;align-items:start}
.l2p{position:sticky;top:4.5rem;background:var(--bg);border:1.5px solid var(--bd);border-radius:8px;padding:2px 10px 10px;z-index:2}
.pool2{display:grid;gap:6px;min-height:3rem}
.cdb{text-align:left;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.cdb[aria-pressed=true]{background:var(--cy);color:var(--bg)}
.l2d svg{user-select:none;-webkit-user-select:none}
.wg .l2d{max-width:640px}.wg .l2d svg,.wg .t3d svg{min-width:420px}
g.sl{cursor:pointer;touch-action:none}
g.sl .hl{display:none}g.sl:focus-visible .hl,g.sl.hot .hl{display:inline}
.holding g.sl .hl{display:inline;opacity:.55}.holding g.sl.hot .hl{opacity:1}
.ghost{position:fixed;z-index:80;pointer-events:none;transform:translate(-50%,-50%);background:var(--cy);color:var(--bg);font:700 .9375rem "Trebuchet MS",Arial,sans-serif;padding:8px 14px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.slotlist{list-style:none;padding:0;display:grid;gap:8px}
.rw{border:1.5px solid var(--bd);border-radius:8px;padding:8px 10px;background:var(--bg)}.rw .ct{display:block;font-weight:700;color:var(--hd)}
.rw2{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}.rw2 select{flex:1 1 12rem}
.reads{margin:6px 0;font-style:italic}
@media(max-width:760px){.l2g{grid-template-columns:1fr}.l2p{position:static}}
@media print{.ghost{display:none}}

/* ===== SIMPLER UI (v2) ===== */
/* icons: Font Awesome swaps <i> for an <svg>; the generic ".wg svg" rule used to blow it up inside the game and Draw panels */
.svg-inline--fa,.wg svg.svg-inline--fa,.wg .dcv svg.svg-inline--fa,.wg .gc svg.svg-inline--fa{width:1.1em!important;height:1em!important;min-width:0!important;max-width:none!important;display:inline-block!important;margin:0 .35em 0 0!important;vertical-align:-.15em;flex:none}
/* one scrolling row of tabs */
[role=tablist]{flex-wrap:nowrap;overflow-x:auto;position:relative;padding:4px 2px 6px;scrollbar-width:thin}
[role=tab]{flex:0 0 auto;white-space:nowrap}
@media(max-width:640px){[role=tab] svg,[role=tab] i{display:none}}
/* Draw */
.dbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:stretch;margin:10px 0 4px}
.dgp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;border:1.5px solid var(--bd);border-radius:8px;background:var(--bg)}
.dgl{font-size:.75rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mu);margin-right:2px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px}
.seg button[aria-pressed=true]{background:var(--cy);color:var(--bg)}.seg button[aria-pressed=true]::before{content:"✔ "}
#d-tool[aria-pressed=true]{background:var(--pk);color:var(--onpk);border-color:var(--pk)}
.d4{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;padding:0;margin:8px 0}
.d4 li{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border:1.5px solid var(--bd);border-radius:999px;font-size:.875rem;background:var(--bg)}
.d4 li.done{border-color:var(--li)}.d4 li.now{border-color:var(--cy);font-weight:700}
.dn2{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--mu);color:var(--bg);font-size:.75rem;font-weight:700;flex:none}
.d4 li.done .dn2{background:var(--li)}.d4 li.now .dn2{background:var(--cy)}
.dnm{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.dnm .sel{flex:1 1 14rem;margin:0}
.dsel{padding:2px 12px 10px}.dsel:not(.has){padding:4px 12px;border-style:dashed}.dsel:not(.has) h3{display:none}.dsel p{margin:4px 0}
.dl{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.hrow{margin-top:6px}
@media print{.dbar,.d4{display:none}}


 [hidden]{display:none!important}.summary-open{display:block;margin:10px 0}.studio-shell main{padding-top:0}.panel>.ref{grid-template-columns:1fr}

/* ===== v3: lighter on phones ===== */
.mob{display:none}@media(max-width:640px){.mob{display:block}}
.dgu{margin-left:auto}
@media(max-width:640px){
 .dbar{gap:6px}.dgu{margin-left:0}.dgl{display:none}
 .dgp{padding:4px 6px;gap:4px;width:100%}
 .dbar button{font-size:.875rem;padding:.5rem .7rem}
 .d4{gap:4px 6px;margin:6px 0}.d4 li{padding:2px 8px 2px 4px;font-size:.8125rem}
 .d4 li:not(.now) .stx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

:host{display:block} [hidden]{display:none!important}.summary-open{display:block;margin:10px 0}.studio-shell main{padding-top:0}.panel>.ref{grid-template-columns:1fr}