* { box-sizing: border-box; }
/* Grayscale AA: macOS subpixel smoothing fringes light-on-dark text (reads as blur). */
html, body { margin: 0; height: 100%; background: var(--hud-bg); color: var(--hud-ink); font-family: var(--hud-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.scene { display: block; width: 100vw; height: 100vh; }
.scene-canvas { width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
/* #id beats mapbox-gl.css's `.mapboxgl-map{position:relative;overflow:hidden}` (loaded after us,
   equal class specificity) — without this the container collapses to 0 height and the map is clipped. */
#map { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.rail { position: absolute; top: 70px; left: 24px; bottom: 24px; z-index: 10; width: 236px; padding: var(--hud-pad);
  font-size: 12px; line-height: 1.4; user-select: none; overflow-y: auto; overflow-x: hidden; }
.rail-title { font-size: 10px; margin-bottom: 6px; }
/* Rows are the rail's whole interaction surface, and they were 3px tall with no horizontal padding:
   the hover tint bled to the panel edge and the target was a hairline. Sized off tokens so the
   Shadcn themes get their roomier 30px rows without a second rule. */
.rail-row { display: flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: var(--hud-row-h); padding: 0 var(--hud-row-px); margin: 0 calc(-1 * var(--hud-row-px) / 2);
  border-radius: var(--hud-radius-sm); }
.rail-swatch { width: 10px; height: 10px; border-radius: max(2px, var(--hud-radius-sm)); flex: none; }
.rail-name { flex: 1; }
.rail-count { color: var(--hud-dim); font-size: 11px; font-family: var(--hud-mono); font-variant-numeric: tabular-nums; }
.rail-box, .facet-box { margin: 0; }
/* One disclosure idiom for the whole HUD: a chevron that ROTATES. It used to swap ▸ for ▾ here and
   in .dock-row-head, which reads as two different controls and cannot animate. */
.rail-caret { cursor: pointer; color: var(--hud-dim); width: 14px; flex: none; text-align: center;
  background: none; border: 0; font: inherit; padding: 0; line-height: 1;
  transition: transform var(--hud-fast) ease, color var(--hud-fast) ease; }
.rail-caret:hover { color: var(--hud-ink); }
.rail-caret.open { transform: rotate(90deg); }
.rail-cats { margin: 0 0 4px 20px; display: none; }
.rail-cats.open { display: block; }
.rail-section { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--hud-line); }
.rail-section-title { font-size: 10px; margin-bottom: 6px; }
.dock-data-body { display: flex; flex-direction: column; gap: 6px; }
.dock-row-head { display: flex; align-items: center; justify-content: space-between; width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer; font: inherit;
  min-height: var(--hud-row-h); padding: 0 var(--hud-row-px); margin: 0 calc(-1 * var(--hud-row-px) / 2);
  border-radius: var(--hud-radius-sm); transition: background var(--hud-fast) ease; }
.dock-row-head:hover { background: var(--hud-accent-05); }
.dock-row-head::after { content: "▸"; color: var(--hud-dim); display: inline-block;
  transition: transform var(--hud-fast) ease; }
.dock-row-head.open::after { transform: rotate(90deg); }
.dock-row-body { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 6px var(--hud-row-px); }
.dock-row-body[hidden] { display: none; }
/* The way back out: pinned under the data sections with the same divider as .rail-section, so it
   reads as part of the rail — findable, not loud. Dim until hovered; the hover treatment is
   .hud-btn's own. */
.dock-signout { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--hud-line); }
.dock-signout-btn { width: 100%; color: var(--hud-dim); }
.dock-signout-btn:hover { color: var(--hud-ink); }
/* Indented under their head, so a collapsed section reads as one unit rather than a flat list —
   the depth cue the dock was missing entirely. */
.facet-row { display: flex; align-items: center; gap: 6px; cursor: pointer;
  min-height: var(--hud-row-h); padding: 0 var(--hud-row-px); margin: 0 calc(-1 * var(--hud-row-px) / 2);
  border-radius: var(--hud-radius-sm); }
.facet-name { font-size: 11px; color: var(--hud-dim); }
/* STATUS as cut-corner pills wrapping left→right: the row's background is the 1px outline
   (revealed by clip-path), ::before is the inner fill, the checkbox stays for state/a11y but
   is invisible — the whole pill is the click target. */
.rail-status .facet { display: flex; flex-wrap: wrap; gap: 4px; }
.rail-status .facet-row { position: relative; padding: 3px 9px; min-height: 0; margin: 0;
  background: var(--hud-line);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.rail-status .facet-row::before { content: ""; position: absolute; inset: 1px;
  background: var(--hud-glass-solid);
  clip-path: polygon(6.5px 0, 100% 0, 100% calc(100% - 6.5px), calc(100% - 6.5px) 100%, 0 100%, 0 6.5px); }
.rail-status .facet-box { position: absolute; opacity: 0; pointer-events: none; }
.rail-status .facet-name { position: relative; }
.rail-status .facet-row:hover { background: var(--hud-accent-dim); box-shadow: none; }
.rail-status .facet-row:has(.facet-box:checked) { background: var(--hud-hot); }
.rail-status .facet-row:has(.facet-box:checked) .facet-name { opacity: 1; }
.rail-status .facet-row:not(:has(.facet-box:checked)) .facet-name { opacity: 0.5; }
.scrub { margin-top: 2px; }
.scrub-value { font-size: 11px; font-family: var(--hud-mono); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.scrub-range { width: 100%; display: block; margin: 1px 0; }
/* Loading overlay — server-rendered, faded out by the client once the field first renders. */
.loading { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; background: var(--hud-bg); color: var(--hud-ink);
  transition: opacity 0.4s ease; }
.loading.hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.loading-label { font-size: 13px; letter-spacing: var(--hud-tracking-ui); color: var(--hud-dim); text-transform: var(--hud-case); } /* solid dim ink — alpha-faded 12px read as blurry */
.surface-panel { position: fixed; top: 24px; left: 24px; z-index: 10; padding: var(--hud-pad); font-size: 12px; }
.surface-panel-title { font-size: 11px; margin-bottom: 4px; }
.surface-panel-select { width: 220px; }
.grid-btn[hidden], .grid-ranges[hidden] { display: none; }
.grid-ranges { display: flex; flex-direction: column; gap: 4px; }
.grid-ranges input[type="range"] { width: 100%; }
.mohawk-panel-select { width: 100%; }
.interval-toggle { display: flex; align-items: center; gap: 6px; font: inherit; cursor: pointer; }
.interval-count { margin-top: 4px; font-size: 11px; }
.seismic-sliders { display: flex; flex-direction: column; gap: 6px; }
.seismic-sliders[hidden] { display: none; }
.seismic-axis { font-size: 11px; display: flex; gap: 4px; align-items: center; }
.seismic-axis input[type="range"] { width: 100%; }
/* Coordinate readout: centred in the frame's bottom-centre tab. left/right:0 + margin-inline:auto
   centres a fit-content box WITHOUT a transform, so the .hud-enter translateY entrance still works. */
.hud-strip { position: fixed; left: 0; right: 0; bottom: 24px; margin-inline: auto; width: fit-content;
  z-index: 10; padding: 6px 12px; font-size: 12px; }
.interval-count, .scrub-value { color: var(--hud-dim); }
.hud-strip[hidden] { display: none; }
/* Brand lockup: the small red corner wordmark (.corner-svg) + spaced GEOLOGIQ, chipless, letterforms
   matched at ~12px. z above the boot overlay (20). The BIG cinematic wordmark (.brand-svg) is an
   absolute child of this box, drawn centre-screen during boot then drained off (see hud.css); it
   sits out of the flex flow so the corner slot lays out on its own. */
.brand { position: fixed; top: 24px; left: 24px; z-index: 21; display: flex; gap: 8px; align-items: center; }
/* The svg's LAYOUT size is the large boot size, scaled DOWN 6x into a small slot: WebKit
   rasterizes layers at layout size, so scaling a 12px logo UP blurs it in Safari — downscaling
   a 72px one is always sharp. The slot gives the lockup its true 172x12 footprint. */
.brand-slot { display: block; width: 172px; height: 12px; }
.corner-svg { height: 72px; width: auto; display: block; transform: scale(0.16667); transform-origin: top left; }
/* Big boot wordmark: absolute in .brand (origin 12,12 — the hud.css centre transform corrects for it),
   native 72px, no scale. Never lands in the corner now — it drains in place as .corner-svg fills. */
.brand-svg { position: absolute; top: 0; left: 0; height: 72px; width: auto; display: block; transform-origin: center; }
.brand-name { font-family: var(--hud-font); font-weight: 600; font-size: 17px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--hud-on-scene); } /* 17px Rajdhani caps ~= the 12px wordmark */