/* =====================================================================
 * WebGL ambient field + glass chrome + PK/PD charts + 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);
}
/* Content rides above the field. */
.app { position: relative; z-index: 1; }

/* ── Glass: translucent surface tokens so the tier-tinted field shows
   through the chrome. The field colour tracks the active tier. ── */
body.glass {
  --glass-alpha: 0.62;
  --bg2: color-mix(in srgb, #111620 calc(var(--glass-alpha) * 100%), transparent);
  --bg3: color-mix(in srgb, #171D2A calc(var(--glass-alpha) * 100%), transparent);
  --bg4: color-mix(in srgb, #1E2538 calc(var(--glass-alpha) * 100%), transparent);
}
body.glass.light {
  --bg2: color-mix(in srgb, #FFFFFF calc(var(--glass-alpha) * 100%), transparent);
  --bg3: color-mix(in srgb, #F8FAFC calc(var(--glass-alpha) * 100%), transparent);
  --bg4: color-mix(in srgb, #E2E8F0 calc(var(--glass-alpha) * 100%), transparent);
}
body.glass .header,
body.glass .sidebar,
body.glass .panel,
body.glass .drug-section,
body.glass .zone-bar-wrap,
body.glass .drip-section,
body.glass .explain-panel {
  -webkit-backdrop-filter: blur(11px) saturate(1.15);
  backdrop-filter: blur(11px) saturate(1.15);
}

/* ── Back-to-hub tab (matches the other dashboards) ── */
.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(12, 16, 17, .68);
  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(22, 28, 30, .92); color: #fff; padding-left: 14px; }
.hub-link .hl-x { font-size: 13px; line-height: 1; }

/* ── Fluidity: smoother interactions, collapsible categories ── */
tbody tr { transition: background .15s ease, box-shadow .15s ease; }
.drug-section-header { cursor: pointer; transition: background .15s ease; }
.drug-section-header:hover { background: var(--bg3); }
.drug-section.collapsed table { display: none; }
.drug-section.collapsed .drug-section-header { opacity: .8; }
.explain-body { transition: max-height .3s ease, padding .3s ease, opacity .2s ease; }
.explain-body.collapsed { max-height: 0 !important; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; }

/* ── Accessibility: visible focus ── */
.tier-btn:focus-visible, .theme-btn:focus-visible, .hub-link:focus-visible,
.field input:focus-visible, .field select:focus-visible,
.drug-section-header:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
tbody tr[role="button"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* ── PK / PD charts (drug detail panel) ── */
.pkpd-wrap { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.pkpd-chart { flex: 1 1 150px; min-width: 150px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 8px 8px 6px; }
.pkpd-ct { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); }
.pkpd-svg { width: 100%; height: auto; display: block; margin: 4px 0 2px; }
.pkpd-sub { font-size: 8px; color: var(--text3); letter-spacing: .3px; }
.pkpd-meta { font-family: var(--mono); font-size: 9px; color: var(--text3); margin-top: 2px; }
.pkpd-note { font-size: 10px; color: var(--text3); }

@media (prefers-reduced-motion: reduce) {
  #webgl-bg { will-change: auto; }
  tbody tr, .drug-section-header, .explain-body { transition: none; }
}

/* PK/PD route selector + modifier overlay caption */
.pkpd-routes { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pkpd-route {
  cursor: pointer; font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; color: var(--text2);
  background: var(--bg4); border: 1px solid var(--border); transition: all .15s;
}
.pkpd-route:hover { border-color: var(--cyan); color: var(--text); }
.pkpd-route.on { background: color-mix(in oklab, var(--cyan) 18%, transparent); border-color: var(--cyan); color: var(--cyan); font-weight: 700; }
.pkpd-route:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pkpd-modline {
  margin-top: 6px; font-size: 10px; line-height: 1.5; color: var(--amber);
  background: var(--amber3); border: 1px solid var(--amber2); border-radius: 5px; padding: 5px 9px;
}
.pkpd-modline .pkpd-key { color: var(--text3); font-style: italic; }

/* ===== Unified slide-in Tweaks panel (matches the other dashboards) ===== */
.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(--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;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.tweaks.open{transform:translateX(0)}
.tweaks h3{font-size:1.15rem;color:var(--text);margin:0 0 2px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tweaks .tw-sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;margin-bottom:16px}
.tw-close{position:absolute;top:16px;right:16px;background:none;border:1px solid var(--border);color:var(--text2);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:1rem}
.tw-close:hover{border-color:var(--green);color:var(--green)}
.tw-group{margin-bottom:18px;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(--green);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(--text)}
.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(--text2);border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.tw-seg button.on{background:var(--green);color:var(--bg);font-weight:700}
.tw-switch{position:relative;width:42px;height:23px;flex-shrink:0;cursor:pointer}
.tw-switch input{opacity:0;width:0;height:0;position:absolute}
.tw-switch .track{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--border);border-radius:20px;transition:.2s}
.tw-switch .thumb{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--text2);transition:.2s}
.tw-switch input:checked+.track{background:var(--green3);border-color:var(--green)}
.tw-switch input:checked~.thumb{transform:translateX(19px);background:var(--green)}
.tw-range{width:100%;accent-color:var(--green);margin-top:6px}
.tweaks-btn{cursor:pointer;background:var(--bg3);border:1px solid var(--border);border-radius:5px;padding:4px 10px;color:var(--text2);font-size:11px;font-family:var(--font);transition:all .15s}
.tweaks-btn:hover{border-color:var(--green);color:var(--text)}
.tweaks-btn:focus-visible,.tw-close:focus-visible,.tw-seg button:focus-visible,.tw-switch:focus-within{outline:2px solid var(--green);outline-offset:2px}