/* =====================================================================
 * Special Purpose Medic Drug Box — WebGL ambient field + glass chrome + a11y
 * Loaded after styles.css.
 * ===================================================================== */
#webgl-bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;background:var(--bg)}
.app{position:relative;z-index:1}

/* Glass: re-point surface tokens to translucent so the field shows through. */
body.glass{--glass-alpha:.62}
body.glass{
  --bg2:color-mix(in srgb,#0f1217 calc(var(--glass-alpha)*100%),transparent);
  --bg3:color-mix(in srgb,#12161c calc(var(--glass-alpha)*100%),transparent);
  --bg4:color-mix(in srgb,#181d25 calc(var(--glass-alpha)*100%),transparent);
}
:root[data-theme="light"] body.glass{
  --bg2:color-mix(in srgb,#ffffff calc(var(--glass-alpha)*100%),transparent);
  --bg3:color-mix(in srgb,#f6f8fa calc(var(--glass-alpha)*100%),transparent);
  --bg4:color-mix(in srgb,#e8ecf1 calc(var(--glass-alpha)*100%),transparent);
}
body.glass .topbar,body.glass .sidebar,body.glass .ref-cell,body.glass .scen,
body.glass .q-card,body.glass .ri,body.glass .tweaks{
  -webkit-backdrop-filter:blur(13px) saturate(1.15);backdrop-filter:blur(13px) saturate(1.15);
}

/* 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:600;letter-spacing:.14em;text-transform:uppercase;
  color:#cdd6d9;text-decoration:none;background:rgba(10,12,15,.7);border:1px solid rgba(255,255,255,.12);border-left:0;
  border-radius:0 9px 9px 0;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 8px 26px -12px rgba(0,0,0,.75);transition:background .15s,color .15s,padding .15s}
.hub-link:hover{background:rgba(20,26,30,.92);color:#fff;padding-left:14px}
.hub-link .hl-x{font-size:13px;line-height:1}
:root[data-theme="light"] .hub-link{background:rgba(255,255,255,.82);color:#1d2530;border-color:rgba(0,0,0,.1)}
:root[data-theme="light"] .hub-link:hover{background:#fff;color:#0c1117}

/* 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:330px;max-width:86vw;z-index:401;background:var(--bg2);
  border-left:1px solid var(--border);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(--serif);font-size:1.3rem;color:var(--white);margin-bottom:2px}
.tweaks .tw-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--tx2);text-transform:uppercase;margin-bottom:18px}
.tw-close{position:absolute;top:16px;right:16px;background:none;border:1px solid var(--border);color:var(--tx2);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:1rem}
.tw-close:hover{border-color:var(--red);color:var(--red)}
.tw-group{margin-bottom:20px;border:1px solid var(--border);border-radius:9px;padding:14px;background:var(--bg3)}
.tw-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--phos);margin-bottom:10px;display:block}
.tw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 0;font-size:.84rem;color:var(--tx)}
.tw-seg{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden}
.tw-seg button{flex:1;font-family:var(--mono);font-size:.64rem;padding:7px 9px;background:var(--bg2);color:var(--tx2);border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.tw-seg button.on{background:var(--phos);color:#06090d;font-weight:700}
.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(--bg4);border:1px solid var(--border);border-radius:20px;transition:.2s}
.switch .thumb{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--tx2);transition:.2s}
.switch input:checked+.track{background:var(--phos-dim);border-color:var(--phos)}
.switch input:checked~.thumb{transform:translateX(19px);background:var(--phos)}
.tw-range{width:100%;accent-color:var(--phos);margin-top:6px}

/* Accessibility */
.tbtn:focus-visible,.seg button:focus-visible,.chip:focus-visible,.cat-head:focus-visible,.drug-link:focus-visible,
.q-choice:focus-visible,.btn:focus-visible,.hub-link:focus-visible,.search input:focus-visible,
.scen-head:focus-visible,.scen-tab:focus-visible,.tw-seg button:focus-visible,.switch:focus-within{
  outline:2px solid var(--phos);outline-offset:2px;border-radius:6px}

@media (prefers-reduced-motion: reduce){
  #webgl-bg{will-change:auto}
  .detail,.brand .dot,.toast,.tweaks,.quiz-bar i{animation:none;transition:none}
}