/*
 * MiningHub 3D Viewer — "Command Rail" redesign
 * ==============================================
 * Loaded AFTER viewer.css by BOTH public/3d/viewer.html and
 * public/3d/basic-viewer.html. Brings the two public viewers onto the same
 * light navy/white palette, IBM Plex type and left-rail + collapsible-popout
 * panelling as the 3D Data Manager (static/css/3d/data-manager-redesign.css).
 *
 * ---------------------------------------------------------------------------
 * STRATEGY — scoped token remap, not a :root remap
 * ---------------------------------------------------------------------------
 * viewer.css defines its palette once at :root and ~259 var() references read
 * it. A :root remap would flip the CHROME (header, side panel, modals) *and*
 * the VIEWPORT OVERLAYS (compass, scale bar, measurement labels, assay
 * tooltip, video controls) — but the overlays float over the dark 3D canvas
 * and must stay dark, or they turn white-on-white and vanish.
 *
 * So the light palette is scoped to the chrome subtrees (§1a), and
 * #canvas-host restores the dark palette for everything drawn over the canvas
 * (§1b). Chrome that happens to live *inside* #canvas-host — the collar detail
 * card, hotspot panel, slideshow transport — is re-lit individually (§1c).
 * Custom properties inherit, so this three-step cascade is all it takes.
 *
 * The `--surface-NN` / `--divider-NN` semantic tokens this file remaps were
 * introduced by a verified visual no-op refactor of viewer.css; see the token
 * block there for the naming contract.
 *
 * ---------------------------------------------------------------------------
 * LAYOUT CONTRACT
 * ---------------------------------------------------------------------------
 * #app becomes a 3-column grid: rail | popout | canvas. The rail and popout
 * are LEFT of the canvas, mirroring the Data Manager. VIEWER_RAIL_W and
 * VIEWER_ASSAY_PANEL_W in static/js/3d/shared/viewer-layout.js mirror the two
 * widths below, and scripts/dev-smoke-viewer-frame-aspect.js asserts they
 * equal what actually renders. Change a width here -> update that module and
 * re-run the smoke, or the Data Manager's letterboxed editing frame silently
 * stops matching what visitors see.
 */

/* ============================================================
   0. Design tokens (shared vocabulary with the Data Manager)
   ============================================================ */
:root {
  --mh-navy: #0e2a47;
  --mh-blue: #1c6fb8;
  --mh-blue-hover: #14507f;
  --mh-red: #e2342a;
  --mh-border: #e3e7ee;
  --mh-border-soft: #eef1f5;
  --mh-chip: #f4f6f9;
  --mh-faint: #8a95a4;
  --mh-fainter: #b0bac6;
  --mh-blue-tint: #eaf2fa;
  --mh-sel: #f6f9fc;

  /* --- theme-swappable surfaces (see /css/3d/theme-dark.css) ---
     --mh-navy above is the INK token (headings / hover text), so the dark theme
     flips it to near-white. Nothing in this file paints a solid navy FILL; if you
     add one, use --mh-navy-solid from the Data Manager sheet's vocabulary. */
  --mh-surface: #ffffff;   /* raised card / menu / button face */
  --mh-field: #ffffff;     /* input / select face */
  --mh-surface-hover: #e9eef5;
  --mh-border-strong: #d5dbe4;
  --mh-cta-border: #d6e5f4;

  /* Glass = the transport pill floating on the 3D canvas. Dark theme swaps this
     for translucent navy; the canvas itself never changes. */
  --mh-glass-bg: rgba(255, 255, 255, 0.94);
  --mh-glass-border: rgba(255, 255, 255, 0.6);
  --mh-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

  /* basic-viewer's amber "selected release" / project-boundary rows. */
  --mh-amber: #d99e0b;
  --mh-amber-fg: #8a6206;
  --mh-amber-bg: #fdf6e3;
  --mh-amber-bg-strong: #fbeec6;
  --mh-amber-border: #e8cf8a;

  --mh-radius: 9px;
  --mh-radius-card: 14px;
  --mh-sans: "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
  --mh-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Mirrored by VIEWER_RAIL_W / VIEWER_ASSAY_PANEL_W — see LAYOUT CONTRACT. */
  --mh-vrail-w: 62px;
  --mh-vpopout-w: 320px;
}

/* ------------------------------------------------------------
   1a. Light palette — CHROME subtrees
   ------------------------------------------------------------ */
#app,
header,
#assay-panel,
.mh-vrail,
.terms-modal-overlay,
.help-modal-overlay,
#breakpoint-modal,
.breakpoint-modal-overlay,
#mobile-info-bar,
#mobile-bottom-bar,
.hierarchy-zoom-menu {
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --bg-elevated: #f4f6f9;
  --text: #14263d;
  --text-muted: #5a6675;
  --text-dim: #8a95a4;
  --accent: #1c6fb8;
  --accent-light: #1c6fb8;
  --accent-hover: #14507f;
  --border-light: #eef1f5;
  --border-medium: #e3e7ee;
  --border-accent: rgba(28, 111, 184, 0.35);
  --box-shadow-m: 0 4px 16px rgba(14, 42, 71, 0.1);
  --box-shadow-lg: 0 10px 32px rgba(14, 42, 71, 0.16);

  --chrome-bg: #ffffff;
  --chrome-header-bg: #f4f6f9;
  --chrome-header-bg-strong: #eef1f5;

  --surface-03: #f8fafc;
  --surface-06: #f4f6f9;
  --surface-08: #eef2f7;
  --surface-1: #eaeef4;
  --surface-12: #e6ebf2;
  --surface-15: #dfe6ef;
  --surface-3: #cbd5e1;

  --divider-04: #f2f4f8;
  --divider-05: #eef1f5;
  --divider-06: #eef1f5;
  --divider-08: #e3e7ee;
  --divider-1: #e3e7ee;
  --divider-12: #dde3ec;
  --divider-15: #d5dbe4;
  --divider-2: #c6ced9;
  --divider-25: #b8c2cf;
  --divider-45: #8a95a4;
  --divider-5: #5a6675;

  --scrollbar-thumb: rgba(14, 42, 71, 0.22);
  --control-bg: #ffffff;
  --control-border: #e3e7ee;
  --selected-bg: rgba(28, 111, 184, 0.1);
  --selected-border: #1c6fb8;
}

/* ------------------------------------------------------------
   1b. Restore the DARK palette for everything over the canvas.
       Compass, scale bar, measurement labels, assay tooltip,
       screen/video overlay controls and the loading spinners all
       sit on the 3D scene and must stay dark in every theme.
   ------------------------------------------------------------ */
#canvas-host {
  --panel: rgba(15, 23, 42, 0.92);
  --panel-solid: #111827;
  --bg-elevated: #1e293b;
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;
  --accent: #0091af;
  --accent-light: #38bdf8;
  --accent-hover: #00b4d8;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.12);
  --box-shadow-m: 0 4px 16px rgba(0, 0, 0, 0.4);
  --box-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ------------------------------------------------------------
   1c. …but chrome that LIVES inside #canvas-host is re-lit.
       These are cards/panels, not scene annotations. Add any
       future over-canvas CARD here; scene annotations (compass,
       scale bar, tooltips) must stay on the dark palette above.
   ------------------------------------------------------------ */
#canvas-host .collar-detail-panel {
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --bg-elevated: #f4f6f9;
  --text: #14263d;
  --text-muted: #5a6675;
  --text-dim: #8a95a4;
  --accent: #1c6fb8;
  --accent-light: #1c6fb8;
  --border-light: #eef1f5;
  --border-medium: #e3e7ee;
  --box-shadow-m: 0 8px 26px rgba(14, 42, 71, 0.18);
  --box-shadow-lg: 0 12px 36px rgba(14, 42, 71, 0.22);
  --chrome-bg: #ffffff;
  --chrome-header-bg: #f4f6f9;
  --chrome-header-bg-strong: #eef1f5;
  --surface-03: #f8fafc;
  --surface-06: #f4f6f9;
  --surface-08: #eef2f7;
  --surface-1: #eaeef4;
  --surface-12: #e6ebf2;
  --surface-15: #dfe6ef;
  --surface-3: #cbd5e1;
  --divider-04: #f2f4f8;
  --divider-05: #eef1f5;
  --divider-06: #eef1f5;
  --divider-08: #e3e7ee;
  --divider-1: #e3e7ee;
  --divider-12: #dde3ec;
  --divider-15: #d5dbe4;
  --divider-2: #c6ced9;
  --divider-25: #b8c2cf;
  --divider-45: #8a95a4;
  --divider-5: #5a6675;
  --scrollbar-thumb: rgba(14, 42, 71, 0.22);
  --control-bg: #ffffff;
  --control-border: #e3e7ee;
  --selected-bg: rgba(28, 111, 184, 0.1);
  --selected-border: #1c6fb8;
}

body,
html {
  font-family: var(--mh-sans);
}

/* Mono for coordinates, grades, counts and section labels — matches the DM. */
.legend-title,
.collars-title,
.mineral-content-title,
.status-legend-title,
.scale-bar-label,
.slideshow-indicator,
.mh-mono {
  font-family: var(--mh-mono);
}

/* ============================================================
   2. LAYOUT — rail | popout | canvas
   ============================================================ */
#app {
  /* Was `1fr auto` (canvas | panel). The rail and popout now lead. */
  grid-template-columns: var(--mh-vrail-w) auto 1fr;
  /* Containing block for the absolutely-positioned collapse chevron. */
  position: relative;
}

/* Explicit placement so DOM order (header, canvas, panel) is irrelevant. */
#app > header { grid-column: 1 / -1; grid-row: 1; }
#app > .mh-vrail { grid-column: 1; grid-row: 2; }
#app > #assay-panel { grid-column: 2; grid-row: 2; }
#app > #canvas-host { grid-column: 3; grid-row: 2; }

/* ============================================================
   3. THE RAIL
   ============================================================ */
.mh-vrail {
  width: var(--mh-vrail-w);
  background: var(--panel);
  border-right: 1px solid var(--mh-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 0;
  gap: 2px;
  overflow: hidden;
  z-index: 6;
}

.mh-vrail-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mh-vrail-label {
  font: 600 8px var(--mh-mono);
  letter-spacing: 0.7px;
  color: var(--mh-fainter);
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0 4px;
}

.mh-vrail-btn {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mh-faint);
  padding: 9px 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: 600 8px var(--mh-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease;
}

.mh-vrail-btn[hidden] { display: none; }

.mh-vrail-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.mh-vrail-ico svg { display: block; }

.mh-vrail-btn:hover {
  background: var(--mh-chip);
  color: var(--mh-navy);
}

.mh-vrail-btn.active {
  background: var(--mh-blue-tint);
  color: var(--mh-blue);
}

/* Left bar means "this panel is open" — the same grammar as the DM rail. */
.mh-vrail-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--mh-blue);
}

.mh-vrail-spacer { flex: 1; }

.mh-vrail-divider {
  height: 1px;
  margin: 8px 12px;
  background: var(--mh-border);
}

/* ============================================================
   4. THE POPOUT (#assay-panel re-homed)
   ============================================================ */
#assay-panel {
  width: var(--mh-vpopout-w);
  background: var(--panel);
  border-left: 0;
  border-right: 1px solid var(--mh-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* `overflow: hidden` is already set by viewer.css — required for the
     collapse animation not to spill content. */
  transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

#assay-panel.mh-vcollapsed {
  width: 0;
  border-right-width: 0;
}

/* Popout header — panel title + close, mirroring .mh-popout-header in the DM. */
.mh-vpopout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mh-border);
  flex: none;
  min-width: var(--mh-vpopout-w);
}

.mh-vpopout-title {
  font: 600 12px var(--mh-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mh-navy);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mh-vpopout-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mh-faint);
  font-size: 18px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
}
.mh-vpopout-close:hover { background: var(--mh-chip); color: var(--mh-navy); }

/* Edge chevron — collapses the popout without hunting for the ×.
   It is a child of #app, NOT of #assay-panel: the panel keeps the
   `overflow: hidden` its collapse animation depends on, which would clip a
   chevron hanging off its edge. Absolutely positioned grid children are out
   of flow, so this adds no column. Its offset follows the panel via the
   sibling selector below — hence it must stay AFTER #assay-panel in the DOM. */
/* Geometry, shape and behaviour deliberately mirror the DM's .mh-popout-collapse
   (static/css/3d/data-manager-redesign.css) — keep the two in step.
   The one unavoidable difference: the DM's button is a CHILD of its panel, so it
   centres on `top: 50%`. Ours is positioned against #app, which also spans the
   52px header, so the +26px shifts it back onto the panel's midpoint. */
.mh-vpopout-collapse {
  position: absolute;
  top: calc(50% + 26px);
  transform: translateY(-50%);
  /* -1px so the tab overlaps the panel's right border instead of sitting beside
     it — otherwise that 1px rule shows as a seam against the border-less edge.
     The DM gets this for free from `right: -26px` inside its panel. */
  left: calc(var(--mh-vrail-w) + var(--mh-vpopout-w) - 1px);
  width: 26px;
  height: 44px;
  border: 1px solid var(--mh-border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: var(--mh-surface);
  color: var(--mh-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 2px 0 6px rgba(14, 42, 71, 0.06);
  z-index: 7;
}
.mh-vpopout-collapse:hover { color: var(--mh-navy); }

/* Collapse-only, like the DM: once collapsed the rail is the way back in, so the
   tab hides rather than becoming an expand button. */
#assay-panel.mh-vcollapsed ~ .mh-vpopout-collapse { display: none; }

/* The rail owns the panel identity now — viewer.css's own header is redundant. */
#assay-panel .panel-header { display: none; }

/* The tab bar was mobile-only chrome; the rail drives it on desktop, so it
   stays in the DOM (viewer-rail.js clicks it) but is never shown here. */
@media (min-width: 769px) {
  #assay-panel .viewer-mobile-tabs { display: none !important; }

  /* Desktop used to stack every pane. The rail makes them exclusive, matching
     the Data Manager popout showing one panel at a time. */
  .viewer-tab-pane { display: none; }
  .viewer-tab-pane.active { display: block; }
}

#assay-panel .panel-content {
  min-width: var(--mh-vpopout-w);
}

/* ============================================================
   5. TOP NAV (header)
   ============================================================ */
header {
  min-height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--mh-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  gap: 14px;
}

.mh-vnav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  text-decoration: none;
}
/* Brand logo — same lockup as the Data Manager nav. Two <img>s ship, the
   navy-ink asset for light mode and the white-ink one for dark, and only one
   is ever displayed. The dark-mode swap lives in theme-dark.css (loaded last
   and shared by all three 3D surfaces, so the toggle is written once). */
.mh-brand-logo { height: 20px; width: auto; display: block; }
.mh-brand-logo--dark { display: none; }
.mh-vnav-divider {
  width: 1px;
  height: 24px;
  background: var(--mh-border);
  flex: none;
}

header .title {
  font: 600 14px var(--mh-sans);
  color: var(--mh-navy);
  letter-spacing: 0.2px;
}

header .control { color: var(--text-muted); font-size: 12px; }
header .control label {
  font: 600 8px var(--mh-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--mh-faint);
}
header .control input[type="range"] { accent-color: var(--mh-blue); }
header .control input[type="checkbox"] { accent-color: var(--mh-blue); }

/* Beat viewer.css's `.control select.view-preset-select` (2 classes + element)
   — this file loads later, so matching specificity is enough. */
header .control select.view-preset-select {
  background: var(--mh-field);
  color: var(--mh-navy);
  border: 1px solid var(--mh-border);
  border-radius: 6px;
  padding: 4px 8px;
  font: 500 11px var(--mh-sans);
}

.header-tool-btn,
.header-help-btn {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  color: var(--text-muted);
  border-radius: 7px;
}
.header-tool-btn:hover,
.header-help-btn:hover {
  background: var(--mh-chip);
  color: var(--mh-navy);
  border-color: var(--mh-border-strong);
}
.header-tool-btn.active {
  background: var(--mh-blue-tint);
  color: var(--mh-blue);
  border-color: var(--mh-blue);
}

/* ============================================================
   6. PANEL CONTENT — light corrections
   viewer.css hardcodes a few colours the token pass could not
   reach (text colours and non-bg/border decls).
   ============================================================ */
#assay-panel h3,
#assay-panel label,
.collars-title,
.mineral-content-title {
  color: var(--mh-navy);
}

.collars-main-header,
.mineral-content-header {
  background: var(--chrome-header-bg);
  border-radius: var(--mh-radius);
}

.collars-toggle-all,
.legend-btn {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  color: var(--mh-blue);
  border-radius: 6px;
}
.collars-toggle-all:hover,
.legend-btn:hover {
  background: var(--mh-blue-tint);
  border-color: var(--mh-blue);
}

#assay-panel select {
  background: var(--mh-field);
  color: var(--mh-navy);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius);
}
#assay-panel select:hover { border-color: var(--mh-border-strong); }
#assay-panel select:focus {
  border-color: var(--mh-blue);
  outline: none;
  box-shadow: 0 0 0 3px var(--mh-blue-tint);
}

/* Panel sections separate themselves with a top rule. Whichever section leads
   a pane has nothing above it to separate from, and the popout header already
   provides that edge — so drop the leading rule (it read as a stray line). */
#assay-panel .panel-content > .viewer-tab-pane > *:first-child,
#assay-panel .panel-content > .viewer-tab-pane > *:first-child > .legend:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.legend-title { color: var(--mh-navy); }
.legend-range-label { color: var(--text-muted); }
.legend-swatch { box-shadow: 0 0 0 1px rgba(14, 42, 71, 0.14) inset; }
.stats { color: var(--mh-faint); }

/* Layer/collar rows */
.collar-item:hover,
.article-header:hover,
.folder-header:hover { background: var(--surface-08); }

/* Custom radios were built for a dark panel (see the note in viewer.css);
   on white they need a visible ring. */
.custom-radio { border-color: var(--divider-2); background: var(--mh-field); }
.custom-radio:hover { border-color: var(--mh-blue); }

/* Terms + project CTA footers */
.panel-terms-footer { border-top: 1px solid var(--mh-border); }
.terms-link { color: var(--mh-faint); }
.terms-link:hover { color: var(--mh-blue); }

.project-cta {
  background: var(--mh-blue-tint);
  border: 1px solid var(--mh-cta-border);
  border-radius: var(--mh-radius-card);
}
.project-cta-title { color: var(--mh-navy); }
.project-cta-sub { color: var(--text-muted); }
.project-cta-link { color: var(--mh-blue); }

/* Navigation pane (presentation states). The base rules hardcode an orange
   accent bar + teal active tint from the dark theme — both read as noise on the
   white panel, so the active row is re-cut in brand blue like every other
   selected row in the popout. */
.hotspot-item {
  background: var(--mh-chip);
  border-left-color: transparent;
}
.hotspot-item:hover { background: var(--mh-sel); }
.hotspot-item.hotspot-active {
  background: var(--mh-blue-tint);
  border-left-color: var(--mh-blue);
}
.hotspot-item-title { color: var(--mh-navy); }
.hotspot-item.hotspot-active .hotspot-item-title { color: var(--mh-blue); }
/* .hotspot-item-desc keeps the base rule's var(--text-muted), which §1a already
   remaps to the light palette inside the panel. */

/* ============================================================
   7. FLOATING CHROME over the canvas
   ============================================================ */
.collar-detail-panel {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--box-shadow-m);
}
.collar-detail-header {
  background: var(--chrome-header-bg);
  border-bottom: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-card) var(--mh-radius-card) 0 0;
}
.collar-detail-title { color: var(--mh-navy); }
.collar-detail-close { color: var(--mh-faint); }
.collar-detail-close:hover { color: var(--mh-navy); }
.info-section-title {
  color: var(--mh-navy);
  font-family: var(--mh-mono);
  letter-spacing: 0.4px;
}

/* Assay table + footer inside the collar card. The base rules leave a saturated
   blue header (var(--accent)) that clashes with the navy section titles, white-
   on-white low-grade rows (hardcoded rgba(255,255,255,.3)), and a stark white
   footer. Re-cut all three on the light navy/blue scheme. */
.collar-detail-content .assay-table th {
  color: var(--mh-navy);
  background: var(--mh-chip);
  border-bottom: 1px solid var(--mh-border);
}
.collar-detail-content .assay-table tbody tr.assay-row-muted td {
  color: var(--mh-fainter);
}
.collar-detail-content .assay-table tbody tr.assay-row-highlight {
  background-color: var(--mh-blue-tint);
}
.collar-detail-footer {
  background: var(--mh-chip);
  border-top: 1px solid var(--mh-border);
}
.collar-detail-footer .checkbox-label:hover { color: var(--mh-navy); }
.collar-detail-footer input[type="checkbox"] { accent-color: var(--mh-blue); }

/* Transport pill — white glass, matching the DM's Slides strip. */
#slideshow-controls {
  background: var(--mh-glass-bg);
  border: 1px solid var(--mh-glass-border);
  box-shadow: var(--mh-glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#slideshow-controls button {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  color: var(--mh-navy);
}
#slideshow-controls button:hover:not(:disabled) {
  background: var(--mh-blue-tint);
  border-color: var(--mh-blue);
  color: var(--mh-blue);
}
#slideshow-controls .slideshow-indicator { color: var(--text-muted); }

/* ============================================================
   8. MODALS
   ============================================================ */
.terms-modal,
.help-modal,
#breakpoint-modal {
  background: var(--mh-surface);
  border: 1px solid var(--mh-border);
  border-radius: var(--mh-radius-card);
  color: var(--text);
}
.terms-modal-header,
.help-modal-header,
.breakpoint-modal-header {
  background: var(--chrome-header-bg);
  border-bottom: 1px solid var(--mh-border);
}
.terms-modal-header h2,
.help-modal-header h2,
.breakpoint-modal-header h3 { color: var(--mh-navy); }

/* ============================================================
   9. BASIC VIEWER (.bv-*) — panel rows built for a dark panel
   ------------------------------------------------------------
   These selectors only exist in public/3d/basic-viewer.html; they are inert
   for viewer.html. Its inline <style> block loads BEFORE this file and uses
   `#assay-panel #collars-content .x` (two IDs) to outrank viewer.css, so the
   overrides below must match that specificity to win.

   Only rows that now sit on a WHITE panel are re-lit. Basic-viewer chrome
   that floats over the canvas — #status-legend, #bv-article-modal,
   .bv-floating-tools — is deliberately left dark.
   ============================================================ */

/* Release rows: near-white text was invisible once the panel went white. */
#assay-panel #collars-content .article-date { color: var(--mh-navy); }

/* Selected release — amber reads as a tint on white rather than a glow. */
#assay-panel #collars-content .article-group.bv-release-selected {
  border-left-color: var(--mh-amber);
  background: var(--mh-amber-bg);
}
#assay-panel #collars-content .article-group.bv-release-selected .article-header {
  background: var(--mh-amber-bg-strong);
}
#assay-panel #collars-content .article-group.bv-release-selected .article-title,
#assay-panel #collars-content .article-group.bv-release-selected .article-date {
  color: var(--mh-amber-fg);
}

/* Year folders */
#collars-content .bv-year-header {
  background: var(--mh-chip);
  color: var(--mh-navy);
}
#collars-content .bv-year-header:hover { background: var(--mh-surface-hover); }

/* Per-hole affordances */
#assay-panel #collars-content .collar-item:hover > .collar-item-row label {
  color: var(--mh-blue);
}
#assay-panel #collars-content .bv-zoom-eye { color: var(--mh-faint); }
#assay-panel #collars-content .bv-zoom-eye:hover {
  color: var(--mh-blue);
  background: var(--mh-blue-tint);
}

/* Project boundary row */
#assay-panel #collars-content #bv-boundary-row {
  background: var(--mh-amber-bg);
  border-color: var(--mh-amber-border);
  color: var(--mh-navy);
}

/* Status badges — darker faces so they hold contrast on white. */
#assay-panel #collars-content .bv-badge-new { color: #05320f; background: #86efac; }
#assay-panel #collars-content .bv-badge-pending { color: #451a03; background: #fcd34d; }
#assay-panel #collars-content .bv-badge-prev { color: #475569; background: #e2e8f0; }
#assay-panel #collars-content .bv-best-star { color: var(--mh-amber); }

/* ============================================================
   10. MOBILE (≤768px) — the rail is a desktop affordance.
      The existing bottom-sheet drawer + tab bar take over.
   ============================================================ */
@media (max-width: 768px) {
  .mh-vrail,
  .mh-vpopout-header,
  .mh-vpopout-collapse { display: none !important; }

  /* Restore viewer.css's single-column mobile grid. */
  #app { grid-template-columns: 1fr; }
  #app > #assay-panel,
  #app > #canvas-host { grid-column: 1; }

  /* A collapse left over from desktop must never strand the drawer. */
  #assay-panel.mh-vcollapsed { width: auto; }

  #assay-panel .panel-header { display: none; }

  /* Give the project title the full bar. Without this the brand's display:flex
     (this file loads after basic-viewer's inline block) would beat that page's
     own `≤900px { .bv-brand { display:none } }` and wrap the header. */
  .mh-vnav-brand,
  .mh-vnav-divider { display: none !important; }

  /* The drawer's tab bar was a dark strip (`rgba(0,0,0,.2)`); on the white
     sheet that reads as a grey block behind the inactive tabs. */
  #assay-panel .viewer-mobile-tabs {
    background: var(--mh-surface);
    border-bottom: 1px solid var(--mh-border);
    margin-top: 6px;
  }
  #assay-panel .viewer-mobile-tab { color: var(--mh-faint); }
  #assay-panel .viewer-mobile-tab.active { color: var(--mh-blue); border-bottom-color: var(--mh-blue); }
}

/* basic-viewer hides its brand from 900px, below the 768px panel breakpoint —
   honour that intermediate band too. */
@media (max-width: 900px) {
  .bv-brand.mh-vnav-brand { display: none !important; }
}