:root {
  --bg: #ffffff;
  --fg: #14202b;
  --muted: #5b6b7a;
  --line: #dde3e9;
  --panel: #ffffff;
  --accent: #1d6a8c;
  --shadow: 0 1px 2px rgba(20, 32, 43, .06), 0 4px 14px rgba(20, 32, 43, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f151b;
    --fg: #e6edf3;
    --muted: #9aa9b7;
    --line: #22303c;
    --panel: #151d25;
    --accent: #5cc2e6;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); }

/* ── header ─────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--line);
}

.topbar h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

.tagline {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.release {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

/* ── controls ───────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.ctl {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.ctl > span {
  color: var(--muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ctl select,
.ctl input[type="range"] {
  font: inherit;
  padding: .35rem .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--fg);
  max-width: 20rem;
}

.ctl input[type="range"] { padding: 0; width: 11rem; accent-color: var(--accent); }
.ctl-depth output { font-variant-numeric: tabular-nums; }

.spacer { flex: 1 1 auto; }

.badge {
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-final  { background: #e6f6ec; color: #1a6b3c; border-color: #bfe6ce; }
.badge-prelim { background: #fdf0e3; color: #8a4b12; border-color: #f2d5b3; }

@media (prefers-color-scheme: dark) {
  .badge-final  { background: #122c1e; color: #7fd6a2; border-color: #1d4a32; }
  .badge-prelim { background: #33230f; color: #eab77a; border-color: #5a3d18; }
}

/* ── layout ─────────────────────────────────────────────────────────────── */

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1rem;
  padding: 1rem 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  main { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: .75rem;
  min-width: 0;
}

.panel h2 {
  margin: .1rem 0 .5rem;
  font-size: .8rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

/* Plotly sizes itself to the container, so the container needs a definite height
   — a percentage or `auto` here leaves the plot taller than the panel and the
   axis labels spill over whatever follows. */
.plot { width: 100%; height: 540px; }
.map  { width: 100%; height: 300px; }

@media (max-width: 900px) { .plot { height: 420px; } }

.note {
  margin: .5rem .15rem 0;
  color: var(--muted);
  font-size: .8rem;
}

/* the stage caveat belongs ABOVE the plot: it changes how the numbers should be
   read, so it cannot be something the reader finds afterwards */
.note-top {
  margin: 0 .15rem .5rem;
  padding: .45rem .6rem;
  border-left: 3px solid #e0a15a;
  background: rgba(224, 161, 90, .09);
  border-radius: 0 5px 5px 0;
  color: var(--fg);
}

.error { color: #b3261e; padding: 1rem; }

footer {
  padding: .5rem 1.25rem 2rem;
  color: var(--muted);
  font-size: .8rem;
}

/* ── the comparable-axis checkbox ───────────────────────────────────────────
   A checkbox rather than a second dropdown because it is a modifier of the view,
   not a choice between two views — and because "off" is the default and should
   look like it. */
.ctl-check {
  flex-direction: row;
  align-items: center;
  gap: .45rem;
  padding-top: 1.15rem;   /* baseline-align with the labelled controls */
}
.ctl-check input { accent-color: var(--accent); margin: 0; }
.ctl-check > span { color: var(--muted); font-size: .78rem; }
.ctl-check:has(input:disabled) { opacity: .45; }
.ctl-check abbr {
  cursor: help;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 1.05em; height: 1.05em;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; text-decoration: none;
}

/* ── map legend ─────────────────────────────────────────────────────────────
   Three keys, because "not occupied on this cruise" and "on another line" are
   different facts and the first one explains why the section stops where it
   does. Identity is never colour alone here — each key is labelled. */
.legend {
  list-style: none;
  margin: .5rem .15rem 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  font-size: .76rem;
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: .4rem; }
.key {
  width: 11px; height: 11px; border-radius: 50%;
  flex: 0 0 auto;
}
.key-occ  { background: #e34948; }
.key-line { background: transparent; border: 1.5px solid #e34948; }
.key-grid { background: rgba(110,122,134,.55); width: 7px; height: 7px; }
@media (prefers-color-scheme: dark) {
  .key-grid { background: rgba(150,160,172,.5); }
}

/* ── methods ────────────────────────────────────────────────────────────────
   An accordion, closed by default: the reader who just wants the section is not
   made to scroll past a page of prose, and the reader who needs to know what a
   baseline is does not have to leave for the repo to find out. */
.panel-methods { margin: 0 1.25rem 1.25rem; }
#methods > summary {
  cursor: pointer;
  list-style: none;
  padding: .3rem 0;
}
#methods > summary::-webkit-details-marker { display: none; }
#methods > summary h2 {
  display: inline;
  font-size: .95rem;
  font-weight: 600;
}
#methods > summary::before {
  content: "▸";
  display: inline-block;
  width: 1rem;
  color: var(--muted);
  transition: transform .12s ease;
}
#methods[open] > summary::before { transform: rotate(90deg); }
#methods h3 {
  font-size: .85rem;
  margin: 1.1rem 0 .35rem;
}
#methods p {
  margin: 0 0 .6rem;
  max-width: 68ch;      /* prose, not a full-width wall */
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
}
#methods strong { color: var(--fg); font-weight: 600; }
#methods code {
  font-size: .95em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 .25em;
}