/* Seascope Ventilation — a map with as little furniture around it as possible.
 *
 * The map is the page; everything else is a card floating over it. One dark
 * theme, because the whole surface is a deep-ocean colour ramp and a light
 * chrome around it would fight the data for attention. */

:root {
  color-scheme: dark;

  --surface-0: #08131f; /* the map itself */
  --surface-1: #101d2b; /* panels — the validated chart surface */
  --surface-2: #17293a; /* inputs, inset blocks */
  --surface-3: #1f3548; /* hover */
  --border: #263d52;
  --border-strong: #38536d;

  --text-primary: #e9f2f9;
  --text-secondary: #a9c0d2;
  --text-muted: #7d94a8;

  --accent: #57c8b8;
  --accent-dim: #2f7f76;
  --warn: #e0a458;

  --series-1: #3987e5;
  --series-2: #d95926;

  --panel-width: 336px;
  /* Twice the old 392px, so the per-method curves have room to be read rather
     than merely seen. Clamped against the viewport so the panel can never grow
     over the colour scale and depth rail on the right: 336 for the control
     panel, 300 for that stack, and the four gaps between them. */
  --point-width: min(784px, calc(100vw - 336px - 300px - var(--gap) * 4));
  --gap: 12px;
  --radius: 10px;
  --radius-sm: 7px;

  --shadow: 0 10px 30px rgb(2 8 14 / 0.55);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

/* Several components below set `display`, which outranks the user-agent rule
   for `[hidden]`. Panels that are meant to be closed must actually close. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}

.map {
  position: absolute;
  inset: 0;
}

.offscreen {
  position: absolute;
  left: -20000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Shared furniture ─────────────────────────────────────────────────── */

.card,
.panel {
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration: none;
}

.control__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.control__label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 0.75;
}

.control__hint {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

select,
input[type="number"] {
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  font-size: 15px;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  appearance: none;
}

select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 26px;
}

select:disabled,
input:disabled {
  opacity: 0.45;
}

select option:disabled {
  color: var(--text-muted);
}

select:focus-visible,
input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 9px;
  font-size: 15px;
  color: var(--text-secondary);
  cursor: pointer;
}

.check.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.check input {
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex: none;
}

.slider-row {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-secondary);
}

.slider-row span {
  display: block;
  margin-bottom: 4px;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}

.swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
  /* A 2px surface ring rather than a border drawn round the mark. */
  box-shadow: 0 0 0 2px var(--surface-1);
}

/* ── Panels ───────────────────────────────────────────────────────────── */

.panel {
  position: absolute;
  top: var(--gap);
  bottom: var(--gap);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel--controls {
  left: var(--gap);
  width: var(--panel-width);
}

.panel--point {
  left: calc(var(--panel-width) + var(--gap) * 2);
  width: var(--point-width);
}

body.panel-collapsed .panel--point {
  left: 52px;
}

.panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 16px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 14px 15px;
  border-bottom: 1px solid var(--border);
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 12px;
  flex: none;
}

.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.brand__title {
  font-size: 23px;
  font-weight: 680;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.brand__sub {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

/* ── Collapsible control sections ─────────────────────────────────────── */

.control {
  border-bottom: 1px solid var(--border);
}

.control:last-child {
  border-bottom: 0;
}

.control__toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 13px 2px;
  font: inherit;
  text-align: left;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.control__toggle .control__label {
  margin-bottom: 0;
  flex: none;
}

/* What the section is set to, so a collapsed one still answers the question
   it would have been opened to check. */
.control__value {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-size: 14px;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control__chevron {
  flex: none;
  margin-left: 8px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

/* With the summary hidden there is nothing pushing the chevron over, so it
   takes the free space itself — it stays top-right either way. */
.control.is-open .control__chevron {
  margin-left: auto;
  transform: rotate(180deg);
}

/* The summary answers what a *closed* section is set to; with the section
   open the controls themselves say it, and repeating it is noise. */
.control.is-open .control__value {
  display: none;
}

.control__body {
  display: none;
  padding-bottom: 15px;
}

.control.is-open .control__body {
  display: block;
}

.compare {
  margin-top: 8px;
  padding: 9px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.compare .control__hint {
  margin-top: 6px;
}

.range-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 9px;
}

.range-inputs label {
  font-size: 13px;
  color: var(--text-muted);
}

.range-inputs input {
  margin-top: 3px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.segmented__item {
  padding: 7px 6px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.segmented__item[aria-checked="true"] {
  color: var(--surface-0);
  background: var(--accent);
}

/* A layer this method has no data for: kept in place so the set of layers does
   not change shape between methods, but plainly not selectable. */
.segmented__item:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
}

.panel__collapse {
  flex: none;
}

.panel__expand {
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  width: 30px;
  height: 30px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 3;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid var(--border);
}

.panel__title {
  font-size: 15.5px;
  letter-spacing: 0.01em;
}

/* ── Depth rail ───────────────────────────────────────────────────────── */

/* The depth rail keeps its own place — right edge, vertically centred. The
   colour scale is taken out of flow above it (see .card--legend), so this box
   is exactly the height of the rail and centring it centres the rail, as
   before. */
.right-stack {
  position: absolute;
  top: 50%;
  right: var(--gap);
  transform: translateY(-50%);
}

.rail {
  width: 108px;
  padding: 12px 10px 10px;
  text-align: center;
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.rail__title {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.rail__value {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.rail__value.is-seafloor {
  color: var(--accent);
}

.rail__body {
  position: relative;
  height: 250px;
  margin: 10px 0 4px;
}

/* Rotated rather than `writing-mode: vertical-*`: a rotation is unambiguous
   about which end is the minimum, and the shallow level must be at the top.
   The margins centre the box on (left, top) first, so that rotating about its
   own centre leaves the track exactly where the column is. */
/* Qualified by the attribute selector so it outranks the generic
   `input[type="range"] { width: 100% }` rule above. */
input[type="range"].rail__slider {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 250px;
  height: 20px;
  margin: -10px 0 0 -125px;
  transform: rotate(90deg);
}

.rail__scale {
  position: absolute;
  inset: 0 0 0 40px;
  pointer-events: none;
}

.rail__tick {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.rail.is-seafloor .rail__slider,
.rail.is-seafloor .rail__scale {
  opacity: 0.35;
}

.check--rail {
  justify-content: center;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
}

/* ── Bottom bar ───────────────────────────────────────────────────────── */

.bottom-bar {
  position: absolute;
  left: calc(var(--panel-width) + var(--gap) * 2);
  right: calc(108px + var(--gap) * 2);
  bottom: var(--gap);
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: var(--gap);
  align-items: flex-end;
  pointer-events: none;
}

body.panel-collapsed .bottom-bar {
  left: 52px;
}

body.has-point .bottom-bar {
  left: calc(var(--panel-width) + var(--point-width) + var(--gap) * 3);
}

body.has-point.panel-collapsed .bottom-bar {
  left: calc(var(--point-width) + 52px + var(--gap));
}

.bottom-bar > * {
  pointer-events: auto;
}

/* ── Legend ───────────────────────────────────────────────────────────── */

/* Directly above the depth rail, and out of its flow so the rail stays exactly
   where it has always been rather than being pushed down by this. */
.card--legend {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--gap));
  width: 300px;      /* 264 was sized for the old type; the ticks need the room */
  padding: 10px 12px 9px;
}

.legend__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.legend__title {
  font-size: 14.5px;
  font-weight: 600;
}

.legend__units {
  font-size: 12.5px;
  color: var(--text-muted);
}

.legend__bar {
  height: 18px;
  margin-top: 8px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

/* The graduation: numbers large enough to read off the map at a glance, each
   under a tick drawn against the bar, so a value belongs to a position on it
   rather than floating near one. Positioned rather than distributed — see
   legend.js. */
.legend__ticks {
  position: relative;
  height: 27px;
  margin-top: 0;
  font-size: 14.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.legend__tick {
  position: absolute;
  top: 0;
  padding-top: 8px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.legend__tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--border-strong);
}

/* The end labels are pulled inside the bar rather than centred on its edges,
   which would hang half a number off the card. */
.legend__tick--first {
  transform: none;
}

.legend__tick--first::before {
  left: 0;
}

.legend__tick--last {
  transform: translateX(-100%);
}

.legend__tick--last::before {
  left: 100%;
}

.legend__note {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.legend__note--warn {
  color: var(--warn);
}

.legend__readout {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  min-height: 26px;
}

.legend__readout-pos {
  color: var(--text-muted);
}

.legend__readout-value {
  font-weight: 650;
  margin-left: auto;
}

.legend__readout-value--empty {
  font-weight: 400;
  color: var(--text-muted);
}

.legend__readout-depth {
  color: var(--text-muted);
}

/* ── Year bar ─────────────────────────────────────────────────────────── */

/* Wide enough that the slider is worth dragging; when the panels leave less
   than that, `wrap-reverse` lifts the whole card onto its own row instead of
   crushing it. */
.card--year {
  flex: 1 1 320px;
  padding: 9px 14px 6px;
}

.card--year.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.year__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.year__head .control__label {
  margin-bottom: 0;
}

.year__entry {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.year__entry input {
  width: 74px;
  padding: 4px 7px;
  font-size: 15.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.year__unit {
  font-size: 13px;
  color: var(--text-muted);
}

#year {
  margin-top: 7px;
}

.year__scale {
  position: relative;
  height: 14px;
}

.year__tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* ── Info bubble ──────────────────────────────────────────────────────── */

.card--info {
  width: 296px;
  flex: none;
  overflow: hidden;
}

.card__toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.card__toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  flex: none;
}

.card__chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.card--info.is-open .card__chevron {
  transform: rotate(180deg);
}

.info {
  display: none;
  max-height: 42vh;
  overflow-y: auto;
  padding: 0 12px 11px;
  scrollbar-width: thin;
}

.card--info.is-open .info {
  display: block;
}

.info__list {
  display: grid;
  gap: 4px;
  margin: 0;
}

.info__list > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  font-size: 14px;
  /* File names and grid summaries are long and must not be clipped. */
  overflow-wrap: anywhere;
}

.info__list--tight > div {
  grid-template-columns: 88px 1fr;
}

.info__list dt {
  color: var(--text-muted);
}

.info__list dd {
  margin: 0;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.info__citation {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.info__details {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.info__details summary {
  cursor: pointer;
  color: var(--text-secondary);
}

.info__notes {
  margin: 6px 0 0;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.info__notes li + li {
  margin-top: 5px;
}

.info__credit {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.8;
}

/* ── Point query ──────────────────────────────────────────────────────── */

.point-summary {
  padding-top: 12px;
}

.point-summary__where {
  font-size: 18px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.point-summary__pending {
  margin: 0;
  color: var(--text-muted);
}

.point-summary__error {
  margin: 8px 0 0;
  padding: 9px 10px;
  font-size: 14.5px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: var(--radius-sm);
}

.point-summary__level {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text-muted);
}

/* One row per dataset. Each snapped to its own grid, so depth and offset
   differ between them — that difference is part of the answer. */
.method-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.method-table th,
.method-table td {
  padding: 5px 6px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.method-table thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.method-table tbody th {
  display: flex;
  gap: 7px;
  align-items: center;
  font-weight: 500;
  text-align: left;
  color: var(--text-primary);
}

.method-table thead th:first-child {
  text-align: left;
}

.method-row.is-active {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.method-row--dry td {
  color: var(--text-muted);
  text-align: left;
  font-size: 12.5px;
}

.method-row__spread {
  margin-left: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.chart-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.chart-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chart-block__title {
  font-size: 14.5px;
}

.chart-block__actions {
  display: flex;
  gap: 5px;
}

.chip {
  padding: 3px 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  color: var(--surface-0);
  background: var(--accent);
  border-color: var(--accent);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 10px 0 2px;
  font-size: 14px;
  color: var(--text-secondary);
}

.chart-legend__item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.chart-legend__meta {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.chart-block__note {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Chart ────────────────────────────────────────────────────────────── */

.chart {
  position: relative;
}

.chart__svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.chart__grid line {
  stroke: var(--border);
  stroke-width: 1;
}

.chart__axis {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.chart__tick {
  fill: var(--text-muted);
  font-size: 11.5px;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The spread of a curve across an ensemble's members. Translucent so an
   overlapping line stays readable through it, and unstroked so the band does
   not read as two more series. */
.chart__band {
  stroke: none;
  opacity: 0.22;
}

.chart__endlabel {
  font-size: 12px;
  font-family: var(--font);
  font-weight: 600;
}

.chart__dot {
  stroke: var(--surface-1);
  stroke-width: 2;
}

.chart__marker {
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.55;
}

.chart__horizon {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.chart__crosshair {
  stroke: var(--text-muted);
  stroke-width: 1;
}

.chart__tooltip {
  position: absolute;
  z-index: 2;
  min-width: 132px;
  padding: 7px 9px;
  font-size: 13px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.chart__tooltip-head {
  margin-bottom: 4px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.chart__row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.chart__row-label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart__row-value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.chart__row-band,
.data-table__band {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.data-table__band {
  display: block;
}

.data-table tbody th {
  display: flex;
  gap: 7px;
  align-items: center;
}

.data-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 4px 6px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.data-table thead th,
.data-table tbody th {
  color: var(--text-muted);
  font-weight: 500;
  text-align: left;
}

.data-table thead th {
  text-align: right;
}

.data-table thead th:first-child,
.data-table tbody th {
  text-align: left;
}

/* ── Map decoration ───────────────────────────────────────────────────── */

.cell-marker {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.cell-marker__ring {
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(8 19 31 / 0.75), 0 0 12px rgb(87 200 184 / 0.5);
}

.maplibregl-ctrl-group {
  background: color-mix(in srgb, var(--surface-1) 94%, transparent) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow) !important;
}

.maplibregl-ctrl-group button + button {
  border-top-color: var(--border) !important;
}

.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(88%) sepia(9%) saturate(400%) hue-rotate(170deg);
}

.maplibregl-ctrl-scale {
  color: var(--text-secondary) !important;
  background: color-mix(in srgb, var(--surface-1) 80%, transparent) !important;
  border-color: var(--border-strong) !important;
  font-size: 12px !important;
}

.status {
  position: absolute;
  top: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  max-width: 520px;
  padding: 9px 14px;
  font-size: 14.5px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.status--error {
  color: var(--warn);
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-1));
}

body.is-loading .card--legend::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep 1s linear infinite;
}

/* Absolute already gives the loading sweep its containing block; this only has
   to keep the sweep clipped to the card. */
.card--legend {
  overflow: hidden;
}

@keyframes sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* ── Narrow screens ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  :root {
    --panel-width: 288px;
    /* Still doubled, still clamped — there is simply less to clamp to here. */
    --point-width: min(576px, calc(100vw - 288px - var(--gap) * 3));
  }

  .rail {
    width: 88px;
  }

  /* Not enough width for a 300px scale beside everything else. */
  .card--legend {
    width: 240px;
  }

  .rail__body {
    height: 190px;
  }

  input[type="range"].rail__slider {
    width: 190px;
    margin-left: -95px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}