/* css/whales.css — Mega Whales: the universe IS the page.
   Third design, to the corrected brief: full-viewport cinematic scene with
   real portraits; every control floats; the ranked list lives in a drawer.
   Palette: champagne gold for presence on near-black, green = climbing,
   amber = sinking. No HUD gimmicks — the light does the talking. */

/* Every colour on this page comes from these six tokens plus the site's own,
   which is what makes the light theme a redefinition rather than a rewrite.
   ⚠ Add a colour here, not inline: the page ships in two themes now. */
.page-whales {
  --wh-gold: #f2c66d;
  --wh-gold-dim: rgba(242, 198, 109, .55);
  --wh-gold-border: rgba(242, 198, 109, .28);
  --wh-gold-glow: rgba(242, 198, 109, .14);
  --wh-glass: rgba(8, 12, 16, .72);
  --wh-glass-border: rgba(255, 255, 255, .09);
  --wh-hairline: rgba(255, 255, 255, .06);
  --wh-tint: rgba(255, 255, 255, .02);
  --wh-well: rgba(0, 0, 0, .3);
  /* ⚠ These two were `--wh-ink: var(--wh-ink)` — a SELF-REFERENCE, which the
     spec makes guaranteed-invalid, so every `color: var(--wh-ink)` on this
     page resolved to nothing and silently INHERITED instead. It looked fine
     by luck (the inherited colour was close) and never errored. Fixed
     2026-08-19; the values are the ones the 3D scene already uses for the
     same two jobs in js/whales-universe-3d.js (PALETTES.dark.name and the
     ink it draws on a gold fill). */
  --wh-ink: #f5efdf;                /* strong text on the stage */
  --wh-on-gold: #1a1204;            /* text sitting ON a gold fill */
  --wh-stage-bg: #05070a;
  --wh-stage-wash: rgba(10, 18, 26, .9);
  --wh-vignette: rgba(2, 4, 6, .7);
  --wh-panel: rgba(7, 10, 14, .92);
  --wh-panel-solid: rgba(7, 10, 14, .96);
}

/* ── light theme ──────────────────────────────────────────────────
   Rewritten 2026-08-19 with the site's light theme: the ground is cool
   periwinkle now (base.css), not desert sand, so the stage stops being warm
   daylight and becomes a bright cool sky. Gold still carries the page — it
   is the whale identity — but it deepens to an ANTIQUE BRASS rather than
   the old bronze, because bronze on a blue ground reads as dirt. The glass
   is frosted white, matching the clay surfaces everywhere else.

   ⚠ The 3D scene carries its OWN light palette in js/whales-universe-3d.js
   and re-skins on `lws-theme-change`. These tokens and that PALETTES object
   are one change in two files — a cool stage here with a sand scene there
   is the failure to expect. */
:root[data-theme="light"] .page-whales {
  --wh-gold: #7d5a10;
  --wh-gold-dim: rgba(96, 70, 14, .74);
  --wh-gold-border: rgba(125, 90, 16, .34);
  --wh-gold-glow: rgba(150, 112, 26, .16);
  --wh-glass: rgba(255, 255, 255, .72);
  --wh-glass-border: rgba(255, 255, 255, .85);
  --wh-stage-bg: #dde5f5;
  --wh-stage-wash: rgba(214, 224, 244, .85);
  --wh-vignette: rgba(52, 68, 110, .24);
  --wh-panel: rgba(252, 253, 255, .93);
  --wh-panel-solid: rgba(252, 253, 255, .97);
  --wh-hairline: rgba(22, 29, 51, .10);
  --wh-tint: rgba(22, 29, 51, .03);
  --wh-well: rgba(255, 255, 255, .62);
  --wh-ink: #161d33;
  --wh-on-gold: #fffdf4;
}

/* ── the stage ─────────────────────────────────────────────────── */
.wh-stage {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 30%, var(--wh-gold-glow), transparent 60%),
    radial-gradient(140% 120% at 50% 110%, var(--wh-stage-wash), transparent 70%),
    var(--wh-stage-bg);
}
.wh-universe { position: absolute; inset: 0; cursor: grab; }
.wh-universe:active { cursor: grabbing; }
/* Cinematic vignette over the render, under the UI. */
.wh-universe::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 115% at 50% 45%, transparent 58%, var(--wh-vignette) 100%);
}

/* ── floating UI (glass) ───────────────────────────────────────── */
.wh-float { position: absolute; z-index: 5; }
.wh-modes, .wh-drawer-btn, .wh-dossier {
  background: var(--wh-glass);
  border: 1px solid var(--wh-glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
}

.wh-title-block { top: 22px; left: 26px; max-width: min(46vw, 420px); pointer-events: none; }
.wh-eyebrow {
  font: 700 10.5px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase;
  color: var(--wh-gold-dim); margin-bottom: 8px;
}
.wh-title {
  margin: 0 0 10px; font-size: clamp(30px, 4.2vw, 52px); font-weight: 800;
  color: var(--wh-ink); letter-spacing: -.01em;
  text-shadow: 0 0 34px var(--wh-gold-glow), 0 2px 18px rgba(0, 0, 0, .8);
}
.wh-stats { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.wh-stats span {
  font: 600 11px/1 var(--font-data); color: var(--text-2);
  background: var(--wh-glass); border: 1px solid var(--wh-glass-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 6px 10px;
}
.wh-stats b { color: var(--wh-gold); font-weight: 800; }

/* mode switcher — bottom centre, like a film's chapter selector */
.wh-modes {
  bottom: 26px; left: 50%; translate: -50% 0;
  display: flex; gap: 4px; padding: 5px;
}
.wh-mode {
  font: 700 13px/1 inherit; color: var(--text-2);
  background: transparent; border: none; border-radius: 10px;
  padding: 10px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .2s, background .2s;
}
.wh-mode:hover { color: var(--wh-ink); }
.wh-mode.on {
  color: var(--wh-on-gold); background: var(--wh-gold);
  box-shadow: 0 0 24px var(--wh-gold-glow);
}
.wh-mode.on .wh-pro { color: var(--wh-on-gold); border-color: rgba(0, 0, 0, .35); }
.wh-pro {
  font: 800 8.5px/1 var(--font-data); letter-spacing: .1em;
  color: var(--accent); border: 1px solid var(--accent-border);
  border-radius: 4px; padding: 2px 4px;
}

.wh-cap {
  bottom: 84px; left: 50%; translate: -50% 0;
  margin: 0; max-width: min(86vw, 720px); text-align: center;
  font: 500 11.5px/1.5 var(--font-data); color: var(--text-3);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
  pointer-events: none;
}

.wh-drawer-btn {
  top: 22px; right: 26px;
  font: 700 13px/1 inherit; color: var(--wh-ink);
  padding: 12px 18px; cursor: pointer;
}

.wh-drawer-btn:hover { border-color: var(--wh-gold-border); box-shadow: 0 0 18px var(--wh-gold-glow); }

.wh-foot {
  bottom: 10px; left: 14px; margin: 0;
  font: 500 10px/1.4 var(--font-data); color: var(--text-3);
  opacity: .7; pointer-events: none;
}

/* ── the focus dossier ─────────────────────────────────────────── */
.wh-dossier {
  left: 26px; bottom: 92px; width: min(320px, calc(100vw - 52px));
  padding: 16px;
}
.wh-do-head { display: flex; gap: 12px; align-items: center; }
.wh-do-face {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--wh-gold-border); box-shadow: 0 0 20px var(--wh-gold-glow);
  background: var(--bg-3); flex-shrink: 0;
}
.wh-do-face.ini { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: var(--text-2); }
.wh-do-name { font-size: 16px; font-weight: 800; color: var(--wh-ink); }
.wh-do-meta { font: 500 11px/1.5 var(--font-data); color: var(--text-3); }
.wh-do-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.wh-do-cell { border: 1px solid var(--wh-glass-border); border-radius: 10px; padding: 8px 10px; }
.wh-do-cell b { display: block; font: 800 15px/1.3 var(--font-data); color: var(--wh-gold); }
.wh-do-cell b.up { color: var(--accent); }
.wh-do-cell b.down { color: var(--amber); }
.wh-do-cell span { font: 600 9.5px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.wh-do-actions { display: flex; gap: 8px; margin-top: 12px; }
.wh-do-actions button, .wh-do-actions a {
  flex: 1; text-align: center; font: 700 12px/1 inherit; cursor: pointer; text-decoration: none;
  color: var(--wh-ink); background: transparent;
  border: 1px solid var(--wh-glass-border); border-radius: 10px; padding: 10px;
}
.wh-do-actions .primary { background: var(--wh-gold); color: var(--wh-on-gold); border-color: transparent; }
.wh-do-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--text-3); font-size: 15px; cursor: pointer;
}

/* ── the drawer ───────────────────────────────────────────────── */
.wh-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 8;
  width: min(430px, 100vw);
  background: var(--wh-panel);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--wh-glass-border);
  transform: translateX(102%);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px 24px;
}
.wh-drawer.open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .wh-drawer { transition: none; } }

.wh-drawer-head {
  display: flex; gap: 8px; align-items: center;
  position: sticky; top: -14px; z-index: 2;
  background: var(--wh-panel-solid); padding: 14px 0 10px; margin-top: -14px;
}
.wh-search { flex: 1 1 auto; min-width: 0; }
.wh-select { flex: 0 1 140px; }
.wh-drawer-close {
  flex-shrink: 0; width: 36px; height: 36px; cursor: pointer;
  background: transparent; border: 1px solid var(--wh-glass-border);
  border-radius: 10px; color: var(--text-2); font-size: 14px;
}

.wh-panel { display: none; }
.wh-panel.on { display: block; }
.wh-panel-lede { font-size: 12.5px; line-height: 1.55; color: var(--text-2); margin: 4px 0 10px; }
.wh-count { font: 600 11px/1 var(--font-data); color: var(--text-3); margin: 6px 0 8px; }

/* rows */
.wh-list { display: flex; flex-direction: column; }
.wh-row {
  display: grid;
  grid-template-columns: 30px auto 1fr auto auto;
  gap: 9px; align-items: center;
  padding: 8px 6px; border-top: 1px solid var(--wh-hairline);
  cursor: pointer;
}
.wh-row:first-child { border-top: none; }
.wh-row:hover { background: rgba(242, 198, 109, .05); }
.wh-row.picked { background: rgba(242, 198, 109, .08); box-shadow: inset 2px 0 0 var(--wh-gold); }
.wh-rank { font: 800 11px/1 var(--font-data); color: var(--text-3); text-align: right; }
.wh-face {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  background: var(--bg-3); border: 1px solid var(--wh-gold-border);
}
.wh-face.ini { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: var(--text-2); }
.wh-who { min-width: 0; }
.wh-name { display: block; font-size: 13px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-meta { display: block; font: 500 10.5px/1.3 var(--font-data); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-thp { font: 800 12.5px/1.3 var(--font-data); color: var(--wh-gold); white-space: nowrap; text-align: right; }
.wh-growth { display: block; font: 700 10.5px/1.2 var(--font-data); white-space: nowrap; text-align: right; }
.wh-growth.up { color: var(--accent); }
.wh-growth.down { color: var(--amber); }
.wh-growth.locked { color: var(--text-3); letter-spacing: 2px; cursor: help; }
.wh-pick {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--wh-glass-border); color: var(--text-2);
  font-size: 13px; line-height: 1;
}
.wh-pick:hover { color: var(--wh-gold); border-color: var(--wh-gold-border); }
.wh-empty, .wh-compare-empty { padding: 24px 8px; text-align: center; color: var(--text-3); font-size: 13px; }
.wh-more {
  width: 100%; margin-top: 8px; padding: 10px;
  font: 700 12px/1 var(--font-data); color: var(--text-2);
  background: transparent; border: 1px solid var(--wh-glass-border);
  border-radius: 10px; cursor: pointer;
}
.wh-more:hover { color: var(--wh-gold); border-color: var(--wh-gold-border); }

/* compare bits — chip hues MUST match DUEL_COLORS in whales-universe-3d.js */
.wh-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-data); color: var(--text-2);
  border: 1px solid var(--wh-glass-border); border-radius: 999px; padding: 6px 8px 6px 10px;
}
.wh-chip b { color: var(--text-1); }
.wh-chip button { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 12px; padding: 0 2px; }
.wh-chip.c0 b { color: #f6c667; }
.wh-chip.c1 b { color: #2ee88a; }
.wh-chip.c2 b { color: #6aa9ff; }
.wh-chip.c3 b { color: #c98bff; }
.wh-line.c0 { color: #f6c667; } .wh-line.c1 { color: #2ee88a; }
.wh-line.c2 { color: #6aa9ff; } .wh-line.c3 { color: #c98bff; }

.wh-faceoff {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  padding: 14px 12px 10px; margin-bottom: 10px;
  border: 1px solid var(--wh-gold-border); border-radius: 12px;
  background: linear-gradient(180deg, var(--wh-gold-glow), transparent 60%);
}
.wh-fo-side { text-align: center; min-width: 0; }
.wh-fo-face {
  display: block; margin: 0 auto;
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--wh-gold-border); box-shadow: 0 0 16px var(--wh-gold-glow);
  background: var(--bg-3);
}
.wh-fo-side.chase .wh-fo-face { border-color: var(--amber-border); box-shadow: 0 0 16px var(--amber-glow); }
.wh-fo-face.ini { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--text-2); }
.wh-fo-name { margin-top: 6px; font-size: 12.5px; font-weight: 800; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-fo-thp { font: 800 14px/1.4 var(--font-data); color: var(--wh-gold); }
.wh-fo-side.chase .wh-fo-thp { color: var(--amber); }
.wh-fo-gain { font: 600 10px/1.4 var(--font-data); color: var(--text-3); }
.wh-fo-gain.up { color: var(--accent); } .wh-fo-gain.down { color: var(--amber); }
.wh-fo-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wh-fo-vs { font: 900 13px/1 var(--font-data); letter-spacing: .16em; color: var(--wh-gold-dim); }
.wh-fo-gap { font: 700 10px/1 var(--font-data); color: var(--text-2); white-space: nowrap; }
.wh-fo-lab {
  font: 700 10.5px/1 var(--font-data); color: var(--wh-gold); text-decoration: none;
  border: 1px solid var(--wh-gold-border); border-radius: 999px; padding: 5px 9px; white-space: nowrap;
}
.wh-fo-verdict {
  grid-column: 1 / -1; text-align: center;
  font-size: 11.5px; line-height: 1.5; color: var(--text-2);
  border-top: 1px solid var(--wh-glass-border); padding-top: 8px;
}

.wh-chart-svg { width: 100%; height: auto; background: var(--wh-well); border: 1px solid var(--wh-glass-border); border-radius: 10px; }
.wh-chart-scale { display: flex; justify-content: space-between; font: 600 10px/1 var(--font-data); color: var(--text-3); margin-top: 4px; }
.wh-chart-note { font-size: 11px; line-height: 1.5; color: var(--text-3); margin: 6px 0 0; }

/* ── no-WebGL fallback: the drawer IS the page ─────────────────── */
body.wh-flat .wh-universe,
body.wh-flat .wh-dossier,
body.wh-flat .wh-drawer-btn { display: none; }
body.wh-flat .wh-stage { height: auto; min-height: 100dvh; overflow: visible; }
body.wh-flat .wh-title-block { position: static; max-width: none; padding: 22px 16px 0; }
body.wh-flat .wh-modes { position: static; translate: none; margin: 14px 16px; width: fit-content; }
body.wh-flat .wh-drawer {
  position: static; transform: none; width: auto; max-width: 760px;
  border-left: none; background: transparent; backdrop-filter: none;
}
body.wh-flat .wh-drawer-close { display: none; }
body.wh-flat .wh-foot { position: static; padding: 10px 16px 20px; }

/* ── mobile ───────────────────────────────────────────────────── */
@media (max-width: 699px) {
  /* the site's app-bar (top) and bottom-nav flank the stage */
  .wh-stage { height: calc(100dvh - 56px); }
  /* ⚠ The stage starts UNDER the fixed app bar on a phone, so a title at
     top:12px had its ascenders sliced off (owner screenshot, 2026-08-16).
     Clear the bar, and let the title wrap instead of being cropped. */
  .wh-title-block {
    top: 66px; left: 14px;   /* .app-bar is 56px tall (css/nav.css) + breathing room */
    max-width: calc(100vw - 28px);
  }
  .wh-title { font-size: 24px; line-height: 1.15; }
  /* the eyebrow wrapped to two loud lines over the globe; the stat chips
     under the title already say how many whales and warzones there are */
  .wh-eyebrow { display: none; }
  .wh-stats span { padding: 5px 8px; font-size: 10px; }
  /* ⚠ NOT top-right on a phone: the app bar owns that corner (the global
     segment chip sits exactly there), so this button was UNREACHABLE — a
     click probe found the chip intercepting every tap, which is much of why
     choosing a segment felt impossible. Above the bottom tab bar instead,
     where nothing overlaps and the thumb already rests. */
  .wh-drawer-btn {
    top: auto; right: 14px; bottom: calc(var(--nav-h) + 14px);
    padding: 14px 20px; font-size: 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
  }
  .wh-modes { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .wh-dossier { left: 12px; right: 12px; width: auto; bottom: calc(136px + env(safe-area-inset-bottom)); }
  .wh-foot { display: none; }
}

/* layout.js appends the site footer INTO .app-content — which is our stage,
   where every other child is absolutely positioned, so the static footer
   rendered as a text strip across the TOP of the universe. Its links are on
   every other page and its credit line lives in .wh-foot here. The app-bar
   (mobile top bar) stays — it is position-aware on its own. */
.page-whales .wh-stage > .site-footer { display: none; }
body.wh-flat .wh-stage > .site-footer { display: block; }

/* drawer sort chips — growth first, because growth is the page's purpose */
.wh-sorts { display: flex; gap: 6px; margin: 2px 0 4px; }
.wh-sort {
  font: 700 11.5px/1 var(--font-data); color: var(--text-2);
  background: transparent; border: 1px solid var(--wh-glass-border);
  border-radius: 999px; padding: 7px 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.wh-sort.on { color: var(--wh-on-gold); background: var(--wh-gold); border-color: transparent; }
.wh-sort.on .wh-pro { color: var(--wh-on-gold); border-color: rgba(13,10,4,.4); }

/* segment lane labels — DOM, projected by the scene each frame (crisper and
   clickable, unlike text baked into a texture) */
.wh-seg-label {
  position: absolute; z-index: 4; translate: -50% 0;
  font: 700 11px/1 var(--font-data); letter-spacing: .08em;
  color: var(--wh-gold-dim); white-space: nowrap; cursor: pointer;
  background: var(--wh-glass); border: 1px solid var(--wh-glass-border);
  border-radius: 999px; padding: 6px 10px;
  transition: color .15s;
}
.wh-seg-label:hover { color: var(--wh-gold); border-color: var(--wh-gold-border); }
.wh-seg-label.hidden { display: none; }
@media (max-width: 699px) { .wh-seg-label { font-size: 10px; padding: 5px 8px; } }

.wh-seg-label.on { color: var(--wh-gold); border-color: var(--wh-gold-border); box-shadow: 0 0 18px rgba(242,198,109,.25); }
.wh-seg-label.dim { opacity: .35; }

/* ── the segment table — one segment, every whale, both numbers ── */
.wh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* NOT sticky, deliberately. Three sticky layers inside one scroll box (the
   drawer head, the segment rail, this header) spent two rounds covering each
   other: the header first parked over the segment's #1 row and ate clicks on
   it, then floated into the middle of the list. The drawer head is the only
   sticky thing here now; a ≤100-row segment table does not need more. */
.wh-table th {
  text-align: left; font: 600 10px/1 var(--font-data); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); padding: 8px 6px 6px;
  border-bottom: 1px solid var(--wh-glass-border);
}
.wh-tr { cursor: pointer; }
.wh-tr td { padding: 6px; border-bottom: 1px solid var(--wh-hairline); vertical-align: middle; }
.wh-tr:hover td { background: rgba(242,198,109,.05); }
.wh-tr.picked td { background: rgba(242,198,109,.09); }
.wh-td-rank { font: 700 12px/1 var(--font-data); color: var(--wh-gold-dim); width: 30px; }
.wh-td-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wh-td-thp, .wh-td-grow { font-family: var(--font-data); white-space: nowrap; }
.wh-td-grow .wh-growth { margin-left: 0; }
.wh-td-pick { width: 30px; }
.wh-entry { font-size: 11px; }
#whList { overflow-x: auto; }

.wh-growth.flat { color: var(--text-3); }

/* ── segment rail — the primary way to choose a segment ──────────
   Replaces a <select> that truncated to "677-8" and hid the choices behind
   a tap. Every segment is visible, each chip is a real target (44px on
   touch), and the rail scrolls horizontally on a phone. */
.wh-segrail {
  /* flex: 0 0 auto because the drawer is a flex COLUMN: as a default flex
     item the rail shrank to 19px and squashed its own 34px chips. */
  flex: 0 0 auto;
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--wh-glass-border);
}
.wh-segrail::-webkit-scrollbar { display: none; }
.wh-seg {
  flex: 0 0 auto; min-height: 34px; padding: 7px 11px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 600 12px/1 var(--font-data); letter-spacing: .02em;
  color: var(--text-2); background: var(--wh-glass);
  border: 1px solid var(--wh-glass-border);
  transition: color .15s, border-color .15s, background .15s;
}
.wh-seg b { font-weight: 700; color: var(--text-3); margin-left: 4px; }
.wh-seg:hover { color: var(--wh-gold); border-color: var(--wh-gold-border); }
.wh-seg.on {
  color: var(--bg-1); background: var(--wh-gold); border-color: var(--wh-gold);
}
.wh-seg.on b { color: var(--bg-2); }
@media (max-width: 699px) { .wh-seg { min-height: 44px; padding: 12px 14px; } }

/* ── the duel, inline in the table ──────────────────────────────── */
.wh-duel {
  margin: 10px 0 12px; padding: 10px;
  border: 1px solid var(--wh-gold-border); border-radius: 12px;
  background: rgba(242,198,109,.05);
}
.wh-duel-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 11px/1 var(--font-data); letter-spacing: .1em;
  text-transform: uppercase; color: var(--wh-gold-dim); margin-bottom: 8px;
}
.wh-duel-clear {
  font: 600 11px/1 var(--font-data); color: var(--text-3);
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
}
.wh-duel-clear:hover { color: var(--wh-gold); }

/* the globe's segment labels are tap targets too */
.wh-seg-label { min-height: 32px; }
@media (max-width: 699px) { .wh-seg-label { min-height: 40px; padding: 10px 12px; } }

/* ── the globe in the drawer ─────────────────────────────────────
   Replaced Whale Watch here (owner, 2026-08-16). Sized so it never crowds the
   table: it is orientation, not the main event. */
.wh-mini {
  flex: 0 0 auto;
  margin: 10px 0 6px; padding: 10px;
  border: 1px solid var(--wh-glass-border); border-radius: 12px;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(242,198,109,.07), transparent 65%),
    var(--wh-tint);
  cursor: pointer;
  transition: border-color .15s;
}
.wh-mini:hover { border-color: var(--wh-gold-border); }
.wh-mini-stage { display: flex; justify-content: center; align-items: center; min-height: 150px; }
.wh-mini-cap {
  margin-top: 6px; text-align: center;
  font: 600 10.5px/1.3 var(--font-data); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
@media (max-width: 699px) { .wh-mini-stage { min-height: 150px; } .wh-mini { padding: 8px; } }
.wh-mini-update {
  margin-top: 4px; text-align: center;
  font: 600 10px/1.35 var(--font-data); letter-spacing: .05em;
  color: var(--wh-gold-dim); opacity: .85;
}

/* ── 🔴 PARKED FOR REDESIGN (2026-09-27) ─────────────────────────
   Owner: park /whales behind a maintenance notice pending a full redesign.

   `is-maintenance` hides every child of the stage EXCEPT the notice, so the
   original markup stays in the file and unparking is one class plus the
   script tag in whales.html. The page keeps its app bar and bottom nav —
   those come from layout.js, outside <main> — because a reader who lands
   here needs a way out.

   ⚠ `!important` is deliberate and load-bearing here. The stage's children
   carry their own `display` (`.wh-universe` is a block, `.wh-float` and the
   drawer are flex/fixed), and several set it again inside media queries, so
   an ordinary rule loses to any of them at some width. This is the one place
   in this file where overriding everything is the intent.
   ⚠ It does NOT use the `hidden` attribute for the same reason — a class
   that sets `display` beats `hidden` (CLAUDE.md, 2026-08-22). */
/* 🔴 EXEMPT WHAT layout.js INJECTS INTO <main>. The app bar and the site
   footer are NOT page content — `appContent.prepend(appBar)` and
   `appContent.appendChild(footer)` (js/layout.js:1490, :1514) make them
   CHILDREN of this element, so a blanket `> *` rule hides the site's own
   navigation. The first version of this did exactly that: measured
   `.app-bar` at `display: none`, height 0, on the parked page only — the
   reader had a maintenance notice and no way back. */
.wh-stage.is-maintenance > *:not(.wh-maint):not(.app-bar):not(.site-footer) {
  display: none !important;
}

.wh-stage.is-maintenance {
  /* ⚠ `height: auto` is REQUIRED, not tidiness. `.wh-stage` sets
     `height: 100dvh; overflow: hidden` for the full-bleed globe, and a
     `min-height` cannot override a hard `height` — the notice inherited a
     viewport-tall box and pushed the app bar off the first screen. */
  height: auto; overflow: visible;
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; padding: 32px var(--page-px);
}
.wh-maint {
  max-width: 520px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.wh-maint-icon { font-size: 52px; line-height: 1; opacity: .85; }
.wh-maint-h {
  margin: 0; font-size: 24px; font-weight: 800; color: var(--text-1);
  text-wrap: balance;
}
.wh-maint-p {
  margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--text-2);
}
.wh-maint-dim { color: var(--text-3); font-size: 13.5px; }
.wh-maint-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.wh-maint-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px;
  border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none;
  background: var(--accent); color: #04140c; border: 1px solid var(--accent);
}
.wh-maint-btn.ghost {
  background: transparent; color: var(--text-1); border-color: var(--border-1);
}

@media (max-width: 560px) {
  .wh-maint-h { font-size: 21px; }
  /* Full-width buttons on a phone — two pills side by side at 384px leaves
     each below a comfortable thumb target. */
  .wh-maint-cta { flex-direction: column; align-self: stretch; }
  .wh-maint-btn { justify-content: center; }
}