/* =====================================================================
 * Special Purpose Medic — COCOM Scenarios · WebGL field + glass + a11y
 * ===================================================================== */
#webgl-bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;background:var(--bg)}
.spm-top,.wrap{position:relative;z-index:1}
/* Glass: translucent surfaces so the ambient field reads through. */
body.glass{--glass-alpha:.6}
body.glass{
  --panel:color-mix(in srgb,#181a13 calc(var(--glass-alpha)*100%),transparent);
  --panel2:color-mix(in srgb,#1f2118 calc(var(--glass-alpha)*100%),transparent);
  --bg2:color-mix(in srgb,#13140f calc(var(--glass-alpha)*100%),transparent);
}
html[data-theme="light"] body.glass{
  --panel:color-mix(in srgb,#fffdf6 calc(var(--glass-alpha)*100%),transparent);
  --panel2:color-mix(in srgb,#efece0 calc(var(--glass-alpha)*100%),transparent);
  --bg2:color-mix(in srgb,#fbf9f1 calc(var(--glass-alpha)*100%),transparent);
}
body.glass .scenario{background:var(--panel)}
body.glass .env .card{background:var(--panel)}
body.glass .scenario,body.glass .env .card,body.glass .panel-controls,body.glass .spm-top,body.glass .tweaks{
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
/* Back-to-hub tab */
.hub-link{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:99999;display:flex;align-items:center;gap:6px;
  padding:9px 11px 9px 9px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#1a1405;text-decoration:none;background:linear-gradient(180deg,#e7b34c,#c98a26);border:1px solid #e7b34c;border-left:0;
  border-radius:0 9px 9px 0;box-shadow:0 8px 26px -12px rgba(0,0,0,.75);transition:padding .15s,filter .15s}
.hub-link:hover{filter:brightness(1.08);padding-left:14px}
.hub-link .hl-x{font-size:13px;line-height:1}
/* Tweaks panel */
.tweaks-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;opacity:0;pointer-events:none;transition:opacity .25s}
.tweaks-scrim.open{opacity:1;pointer-events:auto}
.tweaks{position:fixed;top:0;right:0;height:100%;width:320px;max-width:86vw;z-index:401;background:var(--bg2);border-left:1px solid var(--line);
  box-shadow:-20px 0 60px -30px rgba(0,0,0,.8);transform:translateX(105%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:20px}
.tweaks.open{transform:translateX(0)}
.tweaks h3{font-family:var(--display);font-size:1.5rem;color:var(--gold);margin:0 0 2px}
.tweaks .tw-sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-bottom:16px}
.tw-close{position:absolute;top:16px;right:16px;background:none;border:1px solid var(--line);color:var(--muted);width:30px;height:30px;border-radius:6px;cursor:pointer}
.tw-close:hover{border-color:var(--clay);color:var(--clay)}
.tw-group{margin-bottom:18px;border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--panel)}
.tw-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:block}
.tw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0;font-size:13.5px;color:var(--ink)}
.tw-range{width:100%;accent-color:var(--gold);margin-top:6px}
.switch{position:relative;width:42px;height:23px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;background:var(--panel2);border:1px solid var(--line);border-radius:20px;transition:.2s}
.switch .thumb{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:.2s}
.switch input:checked+.track{background:rgba(216,162,59,.25);border-color:var(--gold)}
.switch input:checked~.thumb{transform:translateX(19px);background:var(--gold)}
.btn:focus-visible,.cocom-seg button:focus-visible,.fpill:focus-visible,.hub-link:focus-visible,.spm-search input:focus-visible,
.sc-head:focus-visible,.q-toggle:focus-visible,.reveal-btn:focus-visible,.switch:focus-within,.idx-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){ #webgl-bg{will-change:auto} .cocom-panel,.tweaks{animation:none;transition:none} }