/* theme-bridge.css ────────────────────────────────────────────
   Bridges the Flux design tokens (defined in flux.css per
   [data-theme="dark"|"light"]) onto the legacy GDBS app.css
   variable names. By aliasing the legacy names at :root level,
   every existing rule (panels, tables, inputs, landing page,
   modules) that reads var(--bg), var(--text), var(--text-bright),
   var(--border), etc. now flips with the user's theme without any
   per-element override. flux.css is the single source of truth
   for color values; this file is only the wire-up. */

:root {
  /* Surfaces — legacy app.css names ← flux surface tokens */
  --bg:           var(--surface-0);
  --bg-alt:       var(--surface-1);
  --bg-panel:     var(--surface-2);
  --bg-card:      var(--surface-1);
  --bg-input:     var(--input-bg);
  --bg-hover:     var(--surface-3);
  --bg-active:    var(--accent-subtle);

  /* Borders */
  --border-light: var(--surface-4);

  /* Text — three levels of emphasis */
  --text:         var(--text-primary);
  --text-bright:  var(--text-primary);
  --text-dim:     var(--text-secondary);
}

/* Native form controls (select option popups, scrollbars, date/color
   pickers) follow the chosen theme. Without these, OS dark preference
   bleeds through and inputs render as black rectangles in light mode. */
html[data-theme="dark"]  { color-scheme: dark;  }
html[data-theme="light"] { color-scheme: light; }

/* ── User-pickable font ── */
html[data-font="dm-sans"] body  { font-family: 'DM Sans', system-ui, sans-serif; }
html[data-font="outfit"] body   { font-family: 'Outfit', system-ui, sans-serif; }
html[data-font="space"] body    { font-family: 'Space Grotesk', system-ui, sans-serif; }
html[data-font="geist"] body    { font-family: 'Geist', 'Inter', system-ui, sans-serif; }
html[data-font="jetbrains"] body{ font-family: 'JetBrains Mono', monospace; }

/* ── User-pickable corner radius ── */
html[data-radius="sharp"]  { --r-sm: 0; --r-md: 0; --r-lg: 0; }
html[data-radius="soft"]   { --r-sm: 4px; --r-md: 8px; --r-lg: 14px; }
html[data-radius="round"]  { --r-sm: 8px; --r-md: 14px; --r-lg: 22px; }
html[data-radius="pill"]   { --r-sm: 9999px; --r-md: 9999px; --r-lg: 9999px; }
html[data-radius] .btn,
html[data-radius] input,
html[data-radius] select,
html[data-radius] textarea,
html[data-radius] .plasma-table { border-radius: var(--r-sm, 4px); }

/* ── User-pickable density (affects table cell padding) ── */
html[data-density="compact"]  .plasma-table td,
html[data-density="compact"]  .plasma-table th { padding: 3px 6px; font-size: 11px; }
html[data-density="spacious"] .plasma-table td,
html[data-density="spacious"] .plasma-table th { padding: 10px 14px; font-size: 13px; }

/* ── Theme drawer ─────────────────────────────────────────── */
.theme-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 360px; max-width: 100vw; height: 100vh;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px oklch(0% 0 0 / 0.3);
  transform: translateX(380px);
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
  z-index: 10000;
  display: flex; flex-direction: column;
}
.theme-drawer.open { transform: translateX(0); }
.theme-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}
.theme-drawer-head i { color: var(--accent); margin-right: 6px; }
.theme-drawer-close {
  background: transparent; border: 0; color: var(--text-dim);
  font-size: 22px; cursor: pointer; padding: 0 8px; line-height: 1;
}
.theme-drawer-close:hover { color: var(--text); }
.theme-drawer-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.theme-group { margin-bottom: 16px; }
.theme-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); margin-bottom: 6px; font-weight: 600;
}
.theme-val { color: var(--accent); font-family: 'JetBrains Mono', monospace; text-transform: none; letter-spacing: 0; }
.theme-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.theme-opt {
  background: var(--bg-alt); color: var(--text-dim);
  border: 1px solid transparent; cursor: pointer;
  padding: 5px 11px; font-size: 12px; border-radius: 4px;
  transition: all 120ms ease;
}
.theme-opt:hover { background: var(--bg-card); color: var(--text); }
.theme-opt.active {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}
.theme-slider { width: 100%; accent-color: var(--accent); margin-top: 4px; }
.theme-hue-bar {
  height: 14px; border-radius: 4px; border: 1px solid var(--border);
  background: linear-gradient(to right,
    oklch(65% 0.16 0), oklch(65% 0.16 60), oklch(65% 0.16 120),
    oklch(65% 0.16 180), oklch(65% 0.16 240), oklch(65% 0.16 300), oklch(65% 0.16 360));
  margin-bottom: 2px;
}
.theme-drawer-footer { padding-top: 8px; border-top: 1px solid var(--border); margin-top: 12px; }
body.theme-drawer-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════
   PROFESSIONAL POLISH LAYER
   Promotes the existing GDBS panels, tables, fieldsets, inputs,
   and tabs to a research-app standard inspired by physicsforums
   layout density, mathematica-style typography, and the Flux
   token system. Applies across every module (Plasma, Materials,
   Topology, Geophysics, Fluids, Quantum, Anomaly, Medical,
   Cosmic, Theory, Finance, HPC Lab) without rewriting any panel
   HTML — all rules target the existing class names.
   ════════════════════════════════════════════════════════════════ */

/* ── data-tables (.plasma-table) — Flux-table aesthetic ───── */
.plasma-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  font-size: 12px;
  margin: 8px 0;
  box-shadow: 0 1px 0 oklch(0% 0 0 / 0.08), 0 4px 16px oklch(0% 0 0 / 0.05);
}
.plasma-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  background: var(--bg-alt);
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
  white-space: nowrap;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
}
.plasma-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
  color: var(--text);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.plasma-table tbody tr:last-child td { border-bottom: 0; }
.plasma-table tbody tr:hover td { background: color-mix(in oklch, var(--accent) 5%, transparent); }
.plasma-table tbody tr:nth-child(even) td {
  background: color-mix(in oklch, var(--bg-panel) 96%, var(--text) 2%);
}
.plasma-table tbody tr:nth-child(even):hover td {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
}
.plasma-table a { color: var(--accent); text-decoration: none; }
.plasma-table a:hover { text-decoration: underline; }

/* ── fieldsets — research-paper card aesthetic ────────────── */
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  background: var(--bg-panel);
  padding: 14px 16px 12px;
  margin: 10px 0;
  box-shadow: 0 1px 0 oklch(0% 0 0 / 0.04);
}
fieldset legend {
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
}
fieldset legend i { margin-right: 5px; opacity: 0.9; }
fieldset > p { margin: 0 0 8px; line-height: 1.55; }
fieldset label { font-size: 12px; color: var(--text-dim); }
fieldset label > input,
fieldset label > select,
fieldset label > textarea {
  display: block;
  margin-top: 3px;
}

/* ── Form controls — one unified rule for every textual input ──
   Bridge handles bg/text/border colors per theme (--bg-input, --text,
   --border all alias to flux tokens), so this rule only needs to set
   shape, padding, type, and the focus ring. !important on bg/color/
   border defeats any panel-level overrides (legacy app.css panel
   rules used --bg-input which now flips correctly via the bridge). */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input:not([type]),
select,
textarea {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm, 4px);
  padding: 5px 9px;
  font-size: 12px;
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  outline: none;
  box-sizing: border-box;
}
textarea {
  /* textarea-specific: vertical resize, monospace for the report
     reference field and similar code-shaped content, comfortable
     line height. */
  resize: vertical;
  line-height: 1.55;
  min-height: 64px;
}
/* File input — Chromium/Webkit shadow-DOM lets us tone the button */
input[type="file"] {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm, 4px);
  padding: 4px 6px;
  font-size: 12px;
  font-family: inherit;
}
input[type="file"]::file-selector-button {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: var(--r-sm, 4px);
  padding: 4px 10px;
  margin-right: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  transition: background 120ms ease;
}
input[type="file"]::file-selector-button:hover {
  background: color-mix(in oklch, var(--accent) 22%, transparent);
}
/* Color picker — fills the swatch but keeps a neutral chrome */
input[type="color"] {
  width: 32px;
  height: 24px;
  padding: 2px;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm, 4px);
  background: var(--bg-input) !important;
  cursor: pointer;
}
/* Focus ring — applied uniformly to every interactive form control */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent) !important;
  outline: none;
}
/* Spinner / checkbox / range — accent the active color */
input[type="number"]   { accent-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
input[type="radio"]    { accent-color: var(--accent); cursor: pointer; }
input[type="range"]    { accent-color: var(--accent); }
/* Placeholder — dim text token at reduced opacity for both themes */
input::placeholder,
textarea::placeholder { color: var(--text-dim); opacity: 0.7; }
/* Disabled state — keep readable but de-emphasized */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--bg-alt) !important;
  color: var(--text-dim) !important;
  cursor: not-allowed;
  opacity: 0.65;
}

/* ── Code-block surface (matrix dumps, formula readouts, JSON output) ──
   flux.css defines --code-bg per theme (deep dark in dark mode, very
   light slate in light mode). Use this class anywhere you'd otherwise
   hardcode `background:#080d1a` or `background:#0b1520`. */
.code-block {
  background: var(--code-bg) !important;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  font-family: var(--mono, ui-monospace, monospace);
}

/* ── buttons — flat with refined hover ─────────────────────── */
.btn {
  padding: 5px 12px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary {
  background: var(--accent);
  /* Theme-paired on-accent text: flux computes --accent-text to contrast
     with --accent per theme (dark text on a light accent, white on a
     dark accent). The old hardcoded oklch(15%) was near-black and
     vanished whenever the accent was dark/saturated. */
  color: var(--accent-text, #fff);
  border-color: var(--accent);
}
.btn-primary i, .btn-primary .fas, .btn-primary svg { color: inherit; }
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 35%, transparent);
}
.btn-sm { padding: 4px 10px; font-size: 11.5px; }
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: transparent;
}
.btn-ghost:hover { color: var(--text); background: color-mix(in oklch, var(--text) 5%, transparent); }

/* ── topbar — subtle elevation, own stacking context ────────
   Without an explicit z-index/position pair, content panels with their
   own stacking contexts (Q-Desic modal at 1000, modals at 100, etc.)
   could paint above the user-menu dropdown when it was opened. Lifting
   the entire topbar to z=1000 ensures everything inside it — including
   the user-menu absolute popup — sits above page content. */
.topbar {
  position: relative;
  z-index: 1000;
  box-shadow: 0 1px 0 oklch(0% 0 0 / 0.15);
  backdrop-filter: blur(8px);
}

/* ── sidebar nav items — clearer hover/active ──────────────── */
.nav-item {
  transition: background 150ms ease, color 150ms ease, border-left-color 150ms ease;
  border-left: 3px solid transparent;
  position: relative;
}
.nav-item:hover { background: color-mix(in oklch, var(--accent) 10%, transparent); color: var(--text); }
.nav-item.active {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  border-left-color: var(--accent);
}

/* "?" reference badge — top-right corner of nav-items that have a /docs page.
   Click opens the in-app docs topic without triggering the parent view switch. */
.nav-item .nav-doc-ref {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  font-size: 9px;
  line-height: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  opacity: 0.55;
  cursor: help;
  user-select: none;
  transition: opacity 120ms ease, background 120ms ease, transform 120ms ease;
}
.nav-item:hover .nav-doc-ref { opacity: 1; }
.nav-item .nav-doc-ref:hover {
  opacity: 1;
  background: color-mix(in oklch, var(--accent) 40%, transparent);
  transform: scale(1.12);
}

/* ── tabs (plasma, materials, geophysics, theory, etc.) ───── */
.ptab, .mattab, .geotab, .ctab, .mtab, .toptab, .theory-tab, .theory-subtab,
.ballistics-subtab, .pcr-tab, .sim-tab {
  transition: color 120ms ease, border-bottom-color 120ms ease, background 120ms ease;
}
.ptab:hover, .mattab:hover, .geotab:hover, .ctab:hover, .mtab:hover, .toptab:hover {
  background: color-mix(in oklch, var(--accent) 7%, transparent);
}

/* ── plasma dropdown tabs (Tokamak / Device / Analysis) ────────
   Mirror of the HPC Lab .hpc-group / .hpc-group-toggle / .hpc-group-menu
   theme overrides below. app.css hardcodes the menu panel and hover wash
   in dark-mode-only values; this re-binds them to theme variables so the
   dropdowns read correctly in both dark and light modes. */
.ptab-group-toggle {
  transition: background 120ms ease, color 120ms ease, border-bottom-color 120ms ease;
}
.ptab-group-toggle:hover {
  background: color-mix(in oklch, var(--accent) 9%, transparent);
  color: var(--text);
}
.ptab-group:hover > .ptab-group-toggle {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
}
.ptab-group.active > .ptab-group-toggle {
  color: var(--accent);
}
.ptab-group-menu {
  background: var(--bg-card, var(--bg-panel));
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--text) 18%, transparent);
}
.ptab-group-menu .ptab {
  transition: background 120ms ease, color 120ms ease, border-left-color 120ms ease;
}
.ptab-group-menu .ptab:hover {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  color: var(--text);
}
.ptab-group-menu .ptab.active {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ── HPC Lab / HPC Sim / HPC-IO dropdown menus ────────────────
   app.css hardcodes the menu panel as #12122a and the hover wash
   as rgba(99,102,241,…), neither of which flips on theme change.
   Re-bind the menu chrome to theme variables so it reads correctly
   in both dark and light modes. */
.hpc-group-toggle {
  transition: background 120ms ease, color 120ms ease, border-bottom-color 120ms ease;
}
.hpc-group-toggle:hover {
  background: color-mix(in oklch, var(--accent) 9%, transparent);
  color: var(--text);
}
.hpc-group:hover > .hpc-group-toggle {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.hpc-group-menu {
  background: var(--bg-card, var(--bg-panel));
  border: 1px solid var(--border);
  border-top: none;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--text) 18%, transparent);
}
.hpc-tab {
  transition: background 120ms ease, color 120ms ease, border-left-color 120ms ease;
}
.hpc-tab:hover {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  color: var(--text);
}
.hpc-tab.active {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  border-left-color: var(--accent);
}

/* ── status pills (.badge) — Flux-style pill ───────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  padding: 2px 9px;
  border-radius: var(--r-full, 9999px);
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-clickable { cursor: pointer; transition: filter 120ms ease; }
.badge-clickable:hover { filter: brightness(1.15); }

/* ── User menu — single dropdown replacing the row of topbar buttons ── */
.user-menu-wrap {
  position: relative;
  /* Tier badge sits to the LEFT of the user dropdown trigger. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* New stacking context so the dropdown lifts above chart canvases. */
  z-index: 1100;
}
.user-menu-trigger .user-prefix { color: var(--text-dim); margin-right: -2px; }
.user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border-color: color-mix(in oklch, var(--accent) 25%, transparent);
}
.user-menu-trigger .user-info { font-weight: 500; }
.user-menu-trigger .user-menu-caret {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 2px;
  transition: transform 150ms ease;
}
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }

.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-card, var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px color-mix(in oklch, var(--text) 22%, transparent);
  padding: 4px 0;
  /* Stays above Chart.js canvases (which can paint inside positioned
     .chart-wrap / .md-chart-cell elements at their own z-index) and any
     content modals/panels that use up to ~10000. */
  z-index: 99999;
}
.user-menu.hidden { display: none; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.user-menu-item:hover {
  background: color-mix(in oklch, var(--accent) 9%, transparent);
  color: var(--text);
}
.user-menu-item i {
  width: 16px; text-align: center;
  color: var(--text-dim);
}
.user-menu-item:hover i { color: var(--accent); }
.user-menu-item.hidden { display: none; }
.user-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.user-menu-danger { color: var(--accent-red, oklch(60% 0.20 25)); }
.user-menu-danger i { color: var(--accent-red, oklch(60% 0.20 25)); }
.user-menu-danger:hover {
  background: color-mix(in oklch, var(--accent-red, oklch(60% 0.20 25)) 12%, transparent);
}
.user-menu-danger:hover i { color: var(--accent-red, oklch(60% 0.20 25)); }

/* Help & Support is now in the user menu — hide the floating FAB so it
   no longer overlaps Report buttons or downloaded charts. The panel
   (#gdbs-help-panel) is unchanged and still opens via gdbsHelpToggle(). */
#gdbs-help-fab { display: none !important; }

/* ── Tier selector — vertical labeled pills (STD / PRO / HPC) ─────────
   Three portrait-oriented mini-pills sitting side by side, each with
   its label rotated 90° so the letters run top-to-bottom along the
   long axis. writing-mode: vertical-rl handles the rotation; default
   text-orientation (mixed) rotates the Latin letters cleanly. */
.tier-dots {
  flex-direction: row !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 8px 4px !important;
}
.tier-dot {
  width: 13px !important;
  height: 40px !important;
  border-radius: 2px !important;
  border: 1px solid transparent !important;
  font-family: var(--mono, ui-monospace, monospace) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: #fff !important;
  /* sideways-lr rotates text 180° from vertical-rl so STD/PRO/HPC reads
     bottom-to-top instead of top-to-bottom. */
  writing-mode: sideways-lr !important;
  text-orientation: mixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  user-select: none;
  transition: filter 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.tier-dot:hover {
  transform: none !important;
  filter: brightness(1.15);
  box-shadow: 0 0 4px currentColor !important;
}
.tier-dot.active {
  transform: none !important;
  border-color: var(--text-bright, #fff) !important;
  box-shadow: 0 0 6px currentColor !important;
}

/* Nav-item icons inherit their tier's pill color so the sidebar reads as
   three coherent color bands — grey for STD, amber for PRO, green for
   HPC — instead of the per-module rainbow from app.css. Specificity
   (0,2,3) beats the per-data-view overrides in app.css (0,2,2). */
.nav-tier-section[data-tier="standard"] .nav-item i { color: #6b7280 !important; }
.nav-tier-section[data-tier="pro"]      .nav-item i { color: #f59e0b !important; }
.nav-tier-section[data-tier="ent"]      .nav-item i { color: #10b981 !important; }
.nav-tier-section .nav-item.active i,
.nav-tier-section .nav-item:hover i { color: var(--accent) !important; }

/* ── Flux custom dropdown widget (flux-select.js) ──────────────────────
   Drop-in replacement for <select> popups whose native OS chrome can't
   be themed (BSSN selects were rendering with a dark popup even with
   color-scheme:light). The underlying <select> stays in the DOM for
   form reads — only its popup is replaced. */
.flux-select-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.flux-select-native {
  /* Visually hide the native select but keep it in the form. */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1;
}
.flux-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 5px 10px;
  background: var(--bg-card, var(--bg-panel));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  font-size: 12px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  min-height: 28px;
}
.flux-select-trigger:hover {
  border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
}
.flux-select-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
}
.flux-select-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flux-select-caret {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform 150ms ease, color 120ms ease;
}
.flux-select-trigger:hover .flux-select-caret { color: var(--text); }
.flux-select-trigger[aria-expanded="true"] .flux-select-caret {
  transform: rotate(180deg);
  color: var(--accent);
}
.flux-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1100;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card, var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 4px);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--text) 22%, transparent);
  padding: 4px 0;
}
.flux-select-menu.hidden { display: none; }
.flux-select-group {
  padding: 8px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.flux-select-option {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.flux-select-option:hover {
  background: color-mix(in oklch, var(--accent) 9%, transparent);
  color: var(--text);
}
.flux-select-option.selected {
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 500;
}
.flux-select-option.disabled {
  color: var(--text-dim);
  opacity: 0.55;
  cursor: not-allowed;
}
.flux-select-option.disabled:hover { background: none; }

/* ── Q-Desic "Equation Overrides" modal — theme-aware overrides ───────
   The popover ships with hardcoded #161b22 panel + #0d1117 textareas and
   raw rgba green borders in inline styles. We can't drop the inline
   styles without touching ~14 elements, so this layer uses !important to
   beat them and re-bind chrome to theme variables. The semantic green /
   amber / purple label colors stay (they identify equation groups). */
#qdc-eqn-backdrop {
  background: color-mix(in oklch, var(--text) 55%, transparent) !important;
}
#qdc-eqn-panel {
  background: var(--bg-card, var(--bg-panel)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px color-mix(in oklch, var(--text) 30%, transparent) !important;
}
#qdc-eqn-panel p {
  color: var(--text-dim) !important;
}
#qdc-eqn-panel p code {
  background: var(--bg-alt);
  padding: 1px 4px;
  border-radius: 3px;
}
#qdc-eqn-panel [id^="qdc-eq-"] {
  background: var(--bg, var(--bg-input)) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
#qdc-eqn-panel [id^="qdc-eq-"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);
  outline: none;
}
#qdc-eqn-panel [id^="qdc-eq-"]::placeholder {
  color: var(--text-dim);
  opacity: 0.55;
}
/* Close-X button next to the modal heading */
#qdc-eqn-panel > div:first-child > button {
  color: var(--text-dim) !important;
  transition: color 120ms ease;
}
#qdc-eqn-panel > div:first-child > button:hover {
  color: var(--text) !important;
}
/* Toggle button that opens the modal */
#qdc-eqn-toggle {
  background: color-mix(in oklch, oklch(65% 0.16 150) 8%, transparent) !important;
  border-color: color-mix(in oklch, oklch(65% 0.16 150) 35%, transparent) !important;
  transition: background 120ms ease, border-color 120ms ease;
}
#qdc-eqn-toggle:hover {
  background: color-mix(in oklch, oklch(65% 0.16 150) 16%, transparent) !important;
}

/* ── chart-wrap consistency ───────────────────────────────── */
.chart-wrap {
  background: var(--bg-card, var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}
.chart-wrap canvas { display: block; width: 100%; height: 100%; }

/* ── headings / module titles ──────────────────────────────── */
.materials-header h2,
.molecular-header h2,
.geo-header h2,
.cosmic-header h2,
.plasma-header h2 {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ── docs & KB typography (research-paper polish) ──────────── */
.docs-content h1, .docs-content h2, .docs-content h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.docs-content h1 { font-size: 22px; margin: 16px 0 8px; }
.docs-content h2 { font-size: 17px; margin: 18px 0 6px; color: var(--accent); }
.docs-content h3 { font-size: 14px; margin: 12px 0 4px; }
.docs-content p, .docs-content li { line-height: 1.7; }
.docs-content code {
  background: color-mix(in oklch, var(--text) 8%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.92em;
}
.docs-content pre {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: var(--r-md, 8px);
  overflow-x: auto;
}

/* ── tooltips on validation rows: cursor cue ──────────────── */
.plasma-table td span[title] { cursor: help; }

/* ── pricing-card / gate-content polish ───────────────────── */
.license-gate, .pro-gate {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
}

/* ── light-mode-specific table refinement ─────────────────── */
html[data-theme="light"] .plasma-table {
  background: #ffffff;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04), 0 4px 12px oklch(0% 0 0 / 0.02);
}
html[data-theme="light"] .plasma-table thead th {
  background: oklch(94% 0.012 260);
}
html[data-theme="light"] .plasma-table tbody tr:nth-child(even) td {
  background: oklch(97% 0.006 260);
}
html[data-theme="light"] fieldset {
  background: #ffffff;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04);
}
html[data-theme="light"] .chart-wrap {
  background: #ffffff;
}

/* ── scrollbar polish (webkit/blink) ──────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--text) 12%, transparent);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, var(--text) 22%, transparent);
}

/* ── selection highlight uses accent ──────────────────────── */
::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); color: var(--text); }

/* ── tighter spacing for materials/cosmic panels — research-app density ── */
.materials-panel, .geo-panel, .cosmic-panel, .molecular-panel,
.ptab-pane, .theory-domain, .ballistics-subpanel, .pcr-subpanel {
  padding: 12px 16px;
}

/* ── help & support widget contrast ───────────────────────── */
.gdbs-help-ctx { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }

/* ── geonum precision section headings — accent color so labels pop ── */
.geonum-result {
  background: var(--bg-card, var(--bg-panel));
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
}
.geonum-label {
  color: var(--accent) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  margin-bottom: 6px;
}
.geonum-ieee { color: var(--text); }
.geonum-geo  { color: oklch(65% 0.18 150); font-weight: 500; }
.geonum-meta { color: var(--text-dim); }

/* --text-bright is now bridged to var(--text-primary) via the :root
   alias block at the top of this file. The previous hard-coded
   light-mode override here is no longer needed. */

/* ── brand badge: GDBS + Pro — single accent color, weight contrast ── */
.brand { color: var(--text) !important; font-weight: 600; letter-spacing: 0.01em; }
.brand .accent { color: var(--accent); font-weight: 500; margin-left: 1px; }
.topbar-left i.fa-database { color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
   TOAST SYSTEM
   JS-driven stacking toasts anchored under the top header (or
   under the system notice when present). Variant via .info /
   .success / .error / .warn. Auto-dismiss after timeout, click
   × to dismiss early. Use window.gdbsToast(msg, kind, opts).
   ════════════════════════════════════════════════════════════════ */
#toast-stack {
  position: fixed;
  top: 48px;             /* topbar (36px) + small gap */
  right: 16px;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
#toast-stack.below-notice { top: 90px; }   /* shift down when notice is visible */
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
  max-width: 460px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.25);
  transform: translateX(20px);
  opacity: 0;
  transition: transform 200ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.info    { border-left-color: var(--accent); }
.toast.success { border-left-color: oklch(65% 0.16 150); }
.toast.warn    { border-left-color: oklch(72% 0.15 80); }
.toast.error   { border-left-color: oklch(65% 0.18 25); }
.toast i.toast-icon { font-size: 14px; padding-top: 1px; }
.toast.info    i.toast-icon { color: var(--accent); }
.toast.success i.toast-icon { color: oklch(65% 0.16 150); }
.toast.warn    i.toast-icon { color: oklch(72% 0.15 80); }
.toast.error   i.toast-icon { color: oklch(65% 0.18 25); }
.toast-body { flex: 1; color: var(--text); }
.toast-body strong { display: block; margin-bottom: 1px; font-weight: 600; }
.toast-close {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  margin: -2px -2px 0 0;
}
.toast-close:hover { color: var(--text); }
.toast .toast-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0.45;
  width: 100%;
  transform-origin: left center;
  border-bottom-left-radius: var(--r-md, 8px);
  border-bottom-right-radius: var(--r-md, 8px);
}
.toast { position: relative; }
html[data-theme="light"] .toast { box-shadow: 0 6px 18px oklch(0% 0 0 / 0.12); }