/* ==========================================================================
   TarangSetu -- Bharat's 3D Ocean Observatory
   Visual design: navbar + tabbed views + glass HUD panels over the globe.
   Every id and class main.js relies on is kept; the analysis tabs (views.js)
   add their own classes further down.
   ========================================================================== */

:root {
  --navbar-h: 68px;
  /* The tool rail, and the dialog that opens beside it. */
  --rail-left: 20px;
  --rail-w: 54px;
  --dialog-w: 340px;
  --dialog-left: calc(var(--rail-left) + var(--rail-w) + 12px);
  /* Where the floating section / T-S / column panels start: just right of the
     rail, or right of the dialog while one is open (see :root.tool-open). */
  --panel-left: var(--dialog-left);
  /* The regional ticker along the bottom of the globe; bottom panels sit above it. */
  --ticker-h: 34px;

  /* Light theme: warm paper pages, white cards, navy ink, an orange accent.
     The globe keeps its space backdrop; everything floating over it is a card. */
  --bg-deep: #f6f3ee;
  --bg-surface: #ffffff;
  --panel-bg: #ffffff;
  --panel-border: #e6e2da;
  --hairline: rgba(15, 27, 51, 0.08);
  --inset: #f5f6f9;
  --float: rgba(255, 255, 255, 0.96);
  --shadow-card: 0 1px 2px rgba(15, 27, 51, 0.05), 0 10px 28px rgba(15, 27, 51, 0.07);
  --shadow-float: 0 2px 6px rgba(15, 27, 51, 0.08), 0 14px 34px rgba(15, 27, 51, 0.18);

  --navy: #1e3a78;
  --navy-ink: #111b33;
  --blue: #2c5aa0;
  --blue-soft: #e8eefa;
  --orange: #e07a36;
  --orange-deep: #b8561d;
  --green: #3a7d2c;
  --green-soft: #eaf3e6;

  --accent-cyan: #1f5fa8;
  --accent-sky: #2c5aa0;
  --accent-emerald: #2f8f46;
  --accent-rose: #d43c50;
  --accent-amber: #c77a0a;

  --text-pure: #111b33;
  --text-muted: #5f6b7d;
  --text-dim: #334155;

  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  background-color: var(--bg-deep);
  color: var(--text-pure);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar {
  height: var(--navbar-h);
  background: #ffffff;
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 1px 10px rgba(15, 27, 51, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  position: relative;
  z-index: 2000;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

/* A thin strip of moving sea along the foot of the header: two wave bands,
   tinted from an orange shore through green-teal shallows to the navy deep,
   drifting slowly in opposite directions. Decoration only. Each band is the
   colour ramp cut to a wave outline by a repeating mask; the mask slides by
   whole tiles, so the loop has no seam. */
.radar-scanline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  pointer-events: none;
}

.radar-scanline::before,
.radar-scanline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e07a36 0%, #f2b27c 20%, #9fd0a4 42%, #3fa7a0 56%, #4f86c9 76%, #1e3a78 100%);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
}

/* Back band: taller, paler, drifting right. */
.radar-scanline::after {
  opacity: 0.32;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='18' viewBox='0 0 460 18'%3E%3Cpath d='M0 7 C70 1 160 1 230 7 S390 13 460 7 V18 H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='18' viewBox='0 0 460 18'%3E%3Cpath d='M0 7 C70 1 160 1 230 7 S390 13 460 7 V18 H0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 460px 18px;
  mask-size: 460px 18px;
  animation: seaDriftBack 30s linear infinite;
}

/* Front band: lower, stronger, drifting left. */
.radar-scanline::before {
  z-index: 1;
  opacity: 0.7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='18' viewBox='0 0 320 18'%3E%3Cpath d='M0 11 C40 5 120 5 160 11 S280 17 320 11 V18 H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='18' viewBox='0 0 320 18'%3E%3Cpath d='M0 11 C40 5 120 5 160 11 S280 17 320 11 V18 H0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 320px 18px;
  mask-size: 320px 18px;
  animation: seaDriftFront 18s linear infinite;
}

@keyframes seaDriftFront {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to { -webkit-mask-position: -640px 100%; mask-position: -640px 100%; }
}

@keyframes seaDriftBack {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to { -webkit-mask-position: 920px 100%; mask-position: 920px 100%; }
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.radar-circle-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  background: radial-gradient(circle at 35% 30%, #3a64b5 0%, var(--navy) 62%, #142a5c 100%);
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(30, 58, 120, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
  overflow: hidden;
}

.radar-sweep-blade {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(224, 122, 54, 0.75) 0deg, transparent 70deg, transparent 360deg);
  animation: radarSpin 3s linear infinite;
}

@keyframes radarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-title {
  font-family: var(--font-ui);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-pure);
}

.glow-cyan {
  color: var(--orange);
  text-shadow: none;
}

.brand-sub {
  font-size: 0.74rem;
  color: var(--text-dim);
}

.nav-links {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.nav-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nav-tab i { font-size: 1rem; }

.nav-tab:hover {
  color: var(--navy);
  background: var(--blue-soft);
}

.nav-tab:focus-visible {
  outline: 2px solid var(--accent-sky);
  outline-offset: 2px;
}

.nav-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
  box-shadow: inset 0 -3px 0 var(--orange), 0 4px 12px rgba(30, 58, 120, 0.25);
}

.nav-system-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.status-pill {
  background: #ffffff;
  border: 1px solid var(--panel-border);
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15, 27, 51, 0.06);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.status-pill strong { color: var(--text-pure); font-weight: 700; }
.pill-sep { color: var(--text-muted); }

/* The orb reports the backend's /health, nothing else: grey while checking,
   green when it answers, red when it does not. */
.status-orb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.status-orb.ok {
  background: var(--accent-emerald);
  box-shadow: none;
  animation: glowOrb 1.5s infinite alternate ease-in-out;
}

.status-orb.down {
  background: var(--accent-rose);
  box-shadow: none;
}

@keyframes glowOrb {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 1; }
}

/* Narrower screens: drop the clock's seconds, then the tab labels (icons
   stay). The date and minutes stay put -- they are the pill's whole point. */
/* Ten tabs do not fit on one line beside the brand and the status pill until
   the window is very wide. Below that, stack the icon over its label and let a
   two-word label take two short lines ("Citizen / Science"), which brings a
   tab from ~113 px down to ~65 px. The 1240 px rule below still takes over and
   drops the labels entirely on narrow screens. */
@media (max-width: 1800px) {
  .nav-links { gap: 2px; }
  .nav-tab {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 7px;
    font-size: 0.66rem;
    line-height: 1.12;
    white-space: normal;
    text-align: center;
    min-width: 50px;
    max-width: 74px;
  }
  .nav-tab i { font-size: 1.05rem; }
}

@media (max-width: 1480px) {
  .clock-seconds { display: none; }
}

@media (max-width: 1240px) {
  .brand-sub { display: none; }
  .nav-tab .tab-label { display: none; }
  .nav-tab { padding: 8px 10px; }
}

/* --------------------------------------------------------------------------
   Views. The globe view stays mounted under the others (views.js pauses its
   render loop while covered), so switching tabs never tears down Cesium.
   -------------------------------------------------------------------------- */

.main-container {
  height: calc(100vh - var(--navbar-h));
  width: 100%;
  position: relative;
  overflow: hidden;
}

.page-view {
  display: none;
  position: absolute;
  inset: 0;
}

.page-view.active,
#view-globe {
  display: block;
}

.page-view:not(#view-globe) {
  z-index: 1500;
  background: var(--bg-deep);
}

#cesiumContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Depth "scanner" sweep, played once when the depth slider is released. It
   is decoration only and never intercepts the mouse. */
.depth-scan-laser {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 500;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.08) 50%, rgba(56, 189, 248, 0.2) 100%);
  border-bottom: 2px solid var(--accent-cyan);
  opacity: 0;
}

.depth-scan-laser.scanning {
  animation: depthLaserCycle 1.4s ease-in-out forwards;
}

@keyframes depthLaserCycle {
  0% { top: -100%; opacity: 1; }
  50% { top: 0%; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Glass HUD panels
   -------------------------------------------------------------------------- */

.hud-panel {
  background: var(--float);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-float);
  color: var(--text-pure);
}

/* While the dialog is open, result panels dock beside it rather than under it. */
:root.tool-open {
  --panel-left: calc(var(--dialog-left) + var(--dialog-w) + 12px);
}

/* The left dock holds the tool rail and, under it, the camera controls. */
.left-dock {
  position: absolute;
  top: 20px;
  left: var(--rail-left);
  z-index: 1000;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tool-rail {
  position: relative;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  border-radius: 16px;
}

.tool-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 1.22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tool-btn:hover {
  color: var(--navy);
  background: var(--blue-soft);
}

.tool-btn[aria-pressed="true"] {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
}

.tool-btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* The dialog. It keeps the id #sidebar for the code and tests that reach the
   controls through it. */
#sidebar {
  position: absolute;
  top: 20px;
  left: var(--dialog-left);
  z-index: 1000;
  width: min(var(--dialog-w), calc(100vw - var(--dialog-left) - 16px));
  max-height: calc(100vh - var(--navbar-h) - 40px - var(--ticker-h));
  overflow-y: auto;
  border-radius: 14px;
  padding: 12px 16px 16px;
}

.tool-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border);
}

.tool-dialog-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-pure);
}

.tool-dialog-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tool-dialog-close:hover { color: var(--text-pure); background: var(--inset); }
.tool-dialog-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.tool-pane > .widget-section:first-child { margin-top: 0; }

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.3); border-radius: 4px; }

.widget-section {
  margin-bottom: 16px;
}

.section-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-sky);
  font-weight: 700;
  margin-bottom: 8px;
}

select {
  width: 100%;
  background: #ffffff;
  border: 1px solid #d7dbe3;
  color: var(--text-pure);
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}

select:focus-visible,
input[type="number"]:focus-visible {
  border-color: var(--accent-sky);
}

input[type="number"] {
  background: #ffffff;
  border: 1px solid var(--panel-border);
  color: var(--text-pure);
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  outline: none;
}

.depth-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.depth-title {
  margin-bottom: 0;
}

#depthDisplay,
#dateDisplay,
#scaleModeStatus,
#layerOpacityDisplay {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-cyan);
  font-weight: 700;
}

#depthZoneBadge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--accent-cyan);
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
  display: inline-block;
  animation: borderPulse 2.4s infinite ease-in-out;
}

@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(6, 182, 212, 0.2); }
  50% { box-shadow: 0 0 12px rgba(56, 189, 248, 0.5); }
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin-top: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-cyan);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent-cyan);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

input[type="range"]:disabled { opacity: 0.45; cursor: not-allowed; }

.depth-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.64rem;
  color: var(--text-muted);
  margin-top: 5px;
  font-family: var(--font-mono);
}

.toggle-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.toggle-row input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  margin-right: 10px;
  cursor: pointer;
}

/* Overlay toggles are cards. The .toggle-row wrapper stays, because main.js
   finds it with closest(".toggle-row") to put each layer's status line under it. */
.toggle-list > .toggle-row {
  padding: 8px 11px;
  background: var(--inset);
  border: 1px solid rgba(15, 27, 51, 0.07);
  border-radius: 8px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-list > .toggle-row:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: var(--panel-border);
}

.toggle-list > .toggle-row:has(input:checked) {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.08);
}

.toggle-list > .toggle-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  cursor: pointer;
}

.toggle-list > .toggle-row label input[type="checkbox"] { margin-right: 4px; }
.toggle-list > .toggle-row label i { color: var(--accent-sky); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Selected-feature card
   -------------------------------------------------------------------------- */

#telemetryCard {
  background: var(--inset);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 14px;
}

.placeholder-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.telemetry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(15, 27, 51, 0.07);
  font-size: 0.78rem;
}

.telemetry-label { color: var(--text-muted); }

.telemetry-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-pure);
}

.discrepancy-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.button-group {
  display: flex;
  gap: 6px;
}

.btn-chip {
  flex: 1;
  background: #ffffff;
  border: 1px solid #d7dbe3;
  color: var(--text-dim);
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-chip:hover {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
}

.btn-chip:focus-visible {
  outline: 2px solid var(--accent-sky);
  outline-offset: 2px;
}

.btn-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ffffff;
  color: var(--text-dim);
  border-color: var(--panel-border);
}

/* --------------------------------------------------------------------------
   Probe HUD and legend
   -------------------------------------------------------------------------- */

#hoverHUD {
  position: absolute;
  bottom: calc(var(--ticker-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: var(--float);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 30px;
  padding: 9px 24px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}

.hud-tag {
  background: var(--orange);
  color: #ffffff;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.66rem;
  margin-right: 8px;
}

#hoverHUD span:not(.hud-tag) {
  color: var(--navy);
  font-weight: 700;
}

/* Home, rotation and zoom, stacked under the tool rail in the left dock. */
.zoom-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zoom-btn {
  width: 42px;
  height: 42px;
  background: var(--float);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-float);
  border-radius: 12px;
  color: var(--navy-ink);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.zoom-btn:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.zoom-btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* At the closest or furthest the camera will go, the step is refused; say so
   rather than letting the button look live. */
.zoom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#legend {
  position: absolute;
  bottom: calc(var(--ticker-h) + 16px);
  right: 24px;
  z-index: 1000;
  width: 280px;
  border-radius: 16px;
  padding: 14px 18px;
}

#legendTitle {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-pure);
  margin-bottom: 6px;
}

.legend-gradient {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, #1e3a8a, #06b6d4, #10b981, #facc15, #ef4444);
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 6px;
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   AI Statistical Outliers (experimental ML overlay)
   Violet throughout, deliberately: every other layer already owns a colour
   (Argo yellow, buoys blue, wave-riders lime, currents the speed ramp), and an
   alarm colour here would imply a hazard this layer does not detect.
   -------------------------------------------------------------------------- */

.experimental-tag {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #7e22ce;
  border: 1px solid rgba(192, 132, 252, 0.45);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 5px;
  vertical-align: middle;
}

#anomalyPanel {
  margin-top: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(192, 132, 252, 0.28);
  border-radius: 5px;
  background: rgba(192, 132, 252, 0.06);
  font-size: 0.68rem;
  line-height: 1.45;
}

.anomaly-title {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #7e22ce;
  margin-bottom: 6px;
}

.anomaly-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 0;
}

.anomaly-row .k { color: var(--text-muted); }
.anomaly-row .v { color: var(--text-dim); font-weight: 600; text-align: right; }

.anomaly-note {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
  font-size: 0.63rem;
  line-height: 1.4;
}

.anomaly-status {
  color: #b45309;
  font-size: 0.65rem;
  line-height: 1.4;
}

.anomaly-status.loading { color: #7e22ce; }
.anomaly-status.error { color: #b91c1c; }

/* The anomaly card puts a short rank note beside each feature value, which can
   wrap in the sidebar. Scoped to this card only: the buoy, float and current
   cards keep the single-line layout they were designed for. */
#telemetryCard[data-owner="anomaly"] .telemetry-row {
  align-items: flex-start;
  gap: 10px;
}

#telemetryCard[data-owner="anomaly"] .telemetry-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

#telemetryCard[data-owner="anomaly"] .telemetry-val {
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
}

#telemetryCard[data-owner="anomaly"] .anomaly-note {
  border-top: none;
  padding-top: 4px;
}

.anomaly-subhead {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(192, 132, 252, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  color: #7e22ce;
}

/* --------------------------------------------------------------------------
   Marine animal telemetry (historical). Emerald marks this layer: every other
   overlay already owns a colour (Argo yellow, wave-riders lime, ML violet, buoys
   blue). Amber rings mark QC-flagged fixes, which are shown, never hidden.
   -------------------------------------------------------------------------- */

.historical-tag {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #047857;
  border: 1px solid rgba(110, 231, 183, 0.5);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 5px;
  vertical-align: middle;
}

.animal-panel {
  margin: 0 0 8px;
  padding: 10px 11px;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  background: rgba(16, 185, 129, 0.05);
  font-size: 0.72rem;
}

.animal-status {
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.animal-status.error { color: #b45309; }

.animal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.animal-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.animal-field select,
.animal-field input[type="date"] {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

input[type="date"] {
  background: #ffffff;
  border: 1px solid var(--panel-border);
  color: var(--text-pure);
  border-radius: 8px;
  font-family: var(--font-mono);
  color-scheme: light;
  outline: none;
}

input[type="date"]:focus-visible { border-color: var(--accent-sky); }

.animal-panel .btn-chip { font-size: 0.68rem; padding: 7px 6px; }
.animal-panel .btn-chip:disabled { opacity: 0.45; }

#animalTimeDisplay {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #047857;
  font-weight: 700;
}

.animal-note {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 6px;
}

.animal-stats {
  margin-top: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 0.67rem;
}

.animal-stats .k { color: var(--text-muted); }
.animal-stats .v { color: var(--text-dim); font-family: var(--font-mono); text-align: right; }

.animal-card-title {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #047857;
  margin-bottom: 6px;
}

.animal-qc-suspect { color: #b45309; }

/* The model context sits in its own block, under its own heading, so a
   modelled value can never be read as an observation. Sky blue, not the
   layer's emerald: emerald marks the animal's own recorded data. */
.animal-context {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(56, 189, 248, 0.3);
}

.animal-card-title.context { color: var(--accent-sky); }

.animal-context-sub {
  font-size: 0.63rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* One heading per source, so the card reads as three separate products rather
   than one undifferentiated list of numbers. */
.animal-context-group {
  margin-top: 9px;
  margin-bottom: 4px;
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-sky);
  border-top: 1px solid rgba(56, 189, 248, 0.16);
  padding-top: 7px;
}

.satellite-tag,
.model-tag {
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #1d4ed8;
  border: 1px solid rgba(147, 197, 253, 0.45);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* A model value and a satellite value must not look alike at a glance. */
.model-tag {
  color: #a16207;
  border-color: rgba(252, 211, 77, 0.45);
}

/* What a value is measured against, or how it was made: small, but never
   optional -- an anomaly without its reference cannot be read. */
.animal-context-note {
  margin: 2px 0 4px;
  color: var(--text-muted);
  font-size: 0.6rem;
  line-height: 1.4;
}

/* Track Environment Analysis: its own panel, docked like the T-S and section
   panels, so the already-long selected-fix card does not grow further. */
.track-analysis-panel {
  position: fixed;
  left: var(--panel-left, 416px);
  bottom: calc(var(--ticker-h) + 64px);
  z-index: 30;
  width: min(620px, calc(100vw - 460px));
  /* Near-opaque: the globe's own fix label sits behind this panel, and a chart
     you can read the map through is a chart you can misread. */
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 10px 12px 8px;
  color: var(--text);
  font-size: 0.72rem;
  box-shadow: 0 10px 30px rgba(15, 27, 51, 0.12);
  max-height: calc(100vh - var(--navbar-h) - 100px);
  overflow-y: auto;
}

.track-analysis-panel[hidden] { display: none; }

.ta-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

.ta-title {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--accent-sky);
}

.ta-sub { color: var(--text-muted); font-size: 0.68rem; margin: 3px 0 8px; }

.ta-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
}

.ta-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

.ta-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}

.ta-field select {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.72rem;
  padding: 5px 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.ta-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font-size: 0.64rem; }
.ta-key { display: inline-flex; align-items: center; gap: 5px; }
.ta-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Hollow, so a reconstructed pixel cannot be mistaken for a plain one. */
.ta-diamond {
  width: 8px;
  height: 8px;
  display: inline-block;
  transform: rotate(45deg);
  border: 1.5px solid;
  background: transparent;
}

.ta-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 9px 0 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.ta-stat { display: flex; flex-direction: column; gap: 1px; min-width: 74px; }
.ta-stat span { color: var(--text-muted); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ta-stat b { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.76rem; color: var(--text); }
.ta-stat.wide { min-width: 150px; }

.ta-chart { height: 210px; position: relative; margin: 4px 0 6px; }

.ta-point {
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  padding-top: 7px;
  margin-top: 2px;
}

.ta-point-head {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.ta-point-lead, .ta-point-empty { color: var(--text-muted); font-size: 0.64rem; line-height: 1.4; margin: 3px 0; }
.ta-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.ta-row-label { color: var(--text-muted); font-size: 0.66rem; }
.ta-row-value { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.68rem; text-align: right; }

.ta-note {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: var(--text-muted);
  font-size: 0.62rem;
  line-height: 1.45;
}

.ta-warn { color: #b45309; }
.ta-hint { margin-top: 4px; opacity: 0.85; }

/* The chart takes focus for keyboard stepping, so it must show that it has it. */
.ta-chart canvas:focus-visible { outline: 2px solid var(--accent-sky); outline-offset: 2px; }

.ta-sources { margin-top: 7px; font-size: 0.64rem; color: var(--text-muted); }
.ta-sources summary { cursor: pointer; color: var(--accent-sky); }
.ta-source { margin-top: 5px; line-height: 1.4; }
.ta-source b { color: var(--text); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; }
.ta-source-id { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.58rem; opacity: 0.8; }

#telemetryCard[data-owner="animal"] details { margin-top: 8px; font-size: 0.66rem; color: var(--text-muted); line-height: 1.45; }
#telemetryCard[data-owner="animal"] summary { cursor: pointer; color: var(--accent-sky); }
#telemetryCard[data-owner="animal"] a { color: var(--accent-sky); }

/* ==========================================================================
   Analysis tabs (views.js)
   ========================================================================== */

.view-content-wrapper {
  height: 100%;
  overflow-y: auto;
  padding: 30px 44px 48px;
}

.view-content-wrapper::-webkit-scrollbar { width: 6px; }
.view-content-wrapper::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.25); border-radius: 4px; }

.section-heading {
  margin-bottom: 22px;
  max-width: 980px;
}

.heading-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-sky);
  margin-bottom: 10px;
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-ink);
  margin-bottom: 6px;
}

.section-heading p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* What a tab is not, stated up front. */
.view-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 980px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-dim);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
}

.view-note i { color: var(--accent-amber); font-size: 1.05rem; margin-top: 1px; }

.view-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  min-height: 1.2em;
}

.view-status.error { color: #b91c1c; }
.view-status.loading { color: var(--accent-sky); }

.view-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.view-toolbar .btn-chip { flex: 0 0 auto; padding: 8px 14px; }

.toolbar-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Two or three mutually exclusive options. */
.seg-control {
  display: inline-flex;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  overflow: hidden;
}

.seg-control button {
  background: #ffffff;
  border: none;
  border-right: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 7px 12px;
  cursor: pointer;
}

.seg-control button:last-child { border-right: none; }

.seg-control button[aria-pressed="true"] {
  background: var(--navy);
  color: #ffffff;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-card);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.stat-icon {
  font-size: 1.9rem;
  color: var(--accent-cyan);
  line-height: 1;
}

.stat-details { min-width: 0; }

.stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Proportional figures on the big number; tabular only where columns align. */
.stat-val {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 4px 0 2px;
  color: var(--text-pure);
}

.stat-val small { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }

.stat-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.45;
}

.table-card,
.chart-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-card);
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 22px;
}

.table-header-row,
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.table-card h3,
.chart-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.card-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 18px;
}

.chart-body {
  position: relative;
  height: 320px;
}

.chart-body.tall { height: 440px; }

.table-scroll { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.data-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--inset);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 27, 51, 0.07);
  color: var(--text-dim);
  vertical-align: middle;
}

.data-table td.num,
.data-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table td.mono { font-family: var(--font-mono); white-space: nowrap; }
.data-table tr.muted td { color: var(--text-muted); }

.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge.neutral { background: rgba(148, 163, 184, 0.12); color: var(--text-dim); border: 1px solid rgba(148, 163, 184, 0.35); }

/* What kind of value a source provides. The same colours mark the same kinds
   elsewhere: amber for model output, blue for satellite products. */
.status-badge.kind-model { background: rgba(252, 211, 77, 0.12); color: #a16207; border: 1px solid rgba(252, 211, 77, 0.45); }
.status-badge.kind-satellite { background: rgba(147, 197, 253, 0.12); color: #1d4ed8; border: 1px solid rgba(147, 197, 253, 0.45); }
.status-badge.kind-insitu { background: rgba(16, 185, 129, 0.15); color: #047857; border: 1px solid var(--accent-emerald); }
.status-badge.kind-record { background: rgba(56, 189, 248, 0.12); color: var(--accent-sky); border: 1px solid rgba(56, 189, 248, 0.45); }
.status-badge.kind-derived { background: rgba(192, 132, 252, 0.12); color: #7e22ce; border: 1px solid rgba(192, 132, 252, 0.45); }

/* About tab */
.stat-val.about-val { font-size: 1.12rem; line-height: 1.3; }
.about-table td { vertical-align: top; line-height: 1.5; }
.about-table td:first-child { white-space: nowrap; width: 1%; padding-right: 22px; }
.about-table td .status-badge { margin: 0 4px 4px 0; }
.about-dim { color: var(--text-dim); font-size: 0.78em; font-weight: 500; }
.about-note span { line-height: 1.6; }
.about-credits { line-height: 1.7; }
@media (max-width: 720px) {
  .about-table td:first-child { white-space: normal; width: auto; }
}

/* Stacked share bars (productivity). 2px surface gap between segments. */
.share-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.share-legend span { display: inline-flex; align-items: center; gap: 6px; }
.share-legend .swatch { width: 12px; height: 12px; border-radius: 3px; }

.share-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.share-row .name { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }

.share-bar {
  display: flex;
  gap: 2px;
  height: 26px;
}

.share-bar .seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  overflow: hidden;
  white-space: nowrap;
}

.share-bar .seg:first-child { border-radius: 5px 0 0 5px; }
.share-bar .seg:last-child { border-radius: 0 5px 5px 0; }

.view-footnote {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 980px;
}

.view-footnote code,
.api-path {
  font-family: var(--font-mono);
  color: var(--accent-sky);
  font-size: 0.74rem;
}

.coord-inputs {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.coord-inputs input { width: 92px; }

/* API tab */
.http-badge {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  font-family: var(--font-mono);
  background: rgba(16, 185, 129, 0.2);
  color: #047857;
  border: 1px solid var(--accent-emerald);
}

.http-badge.post { background: rgba(56, 189, 248, 0.18); color: var(--accent-sky); border-color: var(--accent-sky); }

.code-box {
  background: var(--inset);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 10px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-sky);
  line-height: 1.5;
}

a.inline-link { color: var(--accent-sky); }

@media (prefers-reduced-motion: reduce) {
  .radar-scanline::before,
  .radar-scanline::after,
  .radar-sweep-blade,
  .status-orb.ok,
  #depthZoneBadge { animation: none; }
  .depth-scan-laser { display: none; }
}


/* --- Marine heatwaves ---------------------------------------------------- */

.hw-map-wrap {
  position: relative;
  margin-top: 10px;
  /* The domain is 34 deg of longitude by 20 of latitude, so at full page width
     the picture is ~760px tall and pushes the chart below the fold. Capped so
     the map, the chart and the first events are all in the first screen. */
  max-width: 660px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  /* The open ocean behind the categories, so land reads as absence. */
  background: #071528;
}

#hwMap {
  display: block;
  width: 100%;
  height: auto;
  /* One canvas pixel is one model cell: keep the cells square-edged rather
     than letting the browser blur a 409-wide image up to full width. */
  image-rendering: pixelated;
  cursor: crosshair;
}

.hw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 8px 12px;
  background: var(--inset);
  border-top: 1px solid var(--panel-border);
  font-size: 0.72rem;
  color: var(--text-dim);
}

.hw-key { display: inline-flex; align-items: center; gap: 6px; }
.hw-key i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}
.hw-key-none { background: rgba(148, 163, 184, 0.28); }
.hw-key b { color: var(--text-pure); font-weight: 600; }

.hw-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Category badges use the same ramp as the map, so the table and the picture
   agree at a glance. */
.hw-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  color: #1c1207;
}
.hw-cat-1 { background: #fdd34d; }
.hw-cat-2 { background: #fb923c; }
.hw-cat-3 { background: #dc2626; color: var(--text-pure); }
.hw-cat-4 { background: #7f1d1d; color: var(--text-pure); }

/* An event the record cut off rather than one seen to finish. Amber, not red:
   this is an absence of data, not a more severe heatwave. */
.hw-ongoing {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  color: #0b1220;
  background: var(--accent-amber);
}

.hw-row-ongoing td { background: rgba(245, 158, 11, 0.07); }

/* The heatwave layer's legend in the sidebar. Same swatches as the Heatwaves
   tab, at sidebar scale. */
.hw-layer-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 0.68rem;
  color: var(--text-dim);
}
.hw-layer-legend .hw-key i { width: 10px; height: 10px; }

/* The glider's temperature-against-depth profile, sized for the sidebar. */
.glider-chart {
  position: relative;
  height: 150px;
  margin-top: 10px;
  background: var(--inset);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 6px 8px 4px;
}

/* --- Map key ---------------------------------------------------------------
   The globe carries no captions any more, so the marker vocabulary is stated
   once, here. Every colour below is the constant main.js draws that entity
   with, so the key cannot quietly disagree with the map:
     Argo float, INCOIS buoy (normal / model gap >= 0.5) and wave-rider buoy:
                        the marker icons themselves, painted in by main.js
                        (paintMapKeyIcons) from the images the globe draws
     #facc15            drift path and the hollow oldest-surfacing ring
   It sits under the status pill in the top right, clear of the colour legend. */
#mapKey {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 1000;
  width: 240px;
  border-radius: 16px;
  padding: 14px 16px;
}

#mapKey .key-title {
  display: block;
  font-family: var(--font-ui, inherit);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-ink);
  margin-bottom: 9px;
}

#mapKey .key-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#mapKey .key-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--text-dim);
}

#mapKey .key-text em {
  font-style: normal;
  color: var(--text-muted);
}

/* Each mark is drawn as the entity is: a filled dot, a hollow ring, or a
   length of line -- dashed where the map dashes it. */
#mapKey .key-mark {
  flex: none;
  width: 16px;
  height: 12px;
  position: relative;
}

#mapKey .key-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Instrument rows show the marker icon itself (set by main.js). */
#mapKey .key-mark.key-icon {
  width: 18px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#mapKey .key-mark.key-icon::before {
  content: none;
}

#mapKey .key-oldest::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #facc15;
}

#mapKey .key-drift::before {
  width: 16px;
  height: 0;
  border-top: 2px dashed #facc15;
}

@media (max-width: 900px) {
  #mapKey { display: none; }
}

/* ==========================================================================
   Forecast tab: 72-hour model forecast off coastal cities (views.js)
   ========================================================================== */

.fc-block {
  margin-bottom: 44px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--hairline);
}

.fc-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 12px;
}

.fc-title {
  font-family: var(--font-ui);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy-ink);
  margin-bottom: 14px;
}

.fc-title span { color: var(--blue); }

.fc-lede {
  max-width: 820px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 26px;
}

.fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.fc-chip {
  background: #ffffff;
  border: 1px solid #d9dde5;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.fc-chip:hover { border-color: var(--accent-sky); color: var(--text-pure); }
.fc-chip:focus-visible { outline: 2px solid var(--accent-sky); outline-offset: 2px; }

.fc-chip[aria-pressed="true"] {
  background: var(--blue-soft);
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: 0 0 0 1px var(--navy);
}

.fc-charts { gap: 28px; }

.fc-card {
  border-radius: 22px;
  padding: 26px 28px 20px;
}

.fc-card h3 {
  font-family: var(--font-ui);
  font-size: 1.12rem;
  font-weight: 700;
}

.fc-units {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fc-units-wave { color: var(--blue); }
.fc-units-sst { color: var(--orange); }

.fc-card .chart-body { height: 360px; }

/* ==========================================================================
   Argo vs Model: the 3D model block (argo3d.js)
   ========================================================================== */

.a3-wrap { padding-bottom: 28px; }

.a3-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: 10px;
}

.a3-title {
  font-family: var(--font-ui);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}

.a3-title span { color: var(--green); }

.a3-lede {
  max-width: 900px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.a3-stage {
  position: relative;
  height: max(620px, calc(100vh - 150px));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

#a3Canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.a3-panel {
  position: absolute;
  top: 18px;
  left: 18px;
  bottom: 18px;
  width: 330px;
  overflow-y: auto;
  padding: 20px 22px;
  background: var(--float);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-card);
  border-radius: 18px;
  z-index: 2;
}

.a3-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 16px;
}

.a3-brand i { font-size: 1.4rem; color: var(--accent-sky); }
.a3-brand strong { display: block; font-size: 1rem; }
.a3-brand span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.a3-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--hairline); }

.a3-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-sky);
  margin-bottom: 10px;
}

.a3-depth-value { font-family: var(--font-mono); font-size: 0.95rem; margin-bottom: 12px; }

#a3Depth { width: 100%; accent-color: var(--blue); }

.a3-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.a3-seg { display: flex; gap: 6px; }
.a3-seg button {
  flex: 1;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid #d9dde5;
  background: #ffffff;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  cursor: pointer;
}
.a3-seg button[aria-pressed="true"] { border-color: var(--green); color: var(--green); background: var(--green-soft); box-shadow: 0 0 0 1px var(--green); }

.a3-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-dim);
  padding: 5px 0;
  cursor: pointer;
}
.a3-check input { width: 16px; height: 16px; accent-color: var(--green); }

.a3-telemetry {
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 12px;
  background: var(--inset);
}

.a3-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 5px 0;
  color: var(--text-muted);
}
.a3-row span:last-child { color: var(--text-pure); text-align: right; }
.a3-row .tone-amber { color: #b45309 !important; }
.a3-row .tone-green { color: var(--green) !important; }
.a3-row .tone-sky { color: var(--blue) !important; }
.a3-row .tone-lime { color: #a3e635 !important; }
.a3-muted { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; margin-top: 6px; }

.a3-status {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--float);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--text-dim);
  z-index: 3;
}
.a3-status.loading { color: var(--accent-sky); }
.a3-status.error { color: #b91c1c; }

.a3-tip {
  position: absolute;
  pointer-events: none;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--float);
  border: 1px solid rgba(250, 204, 21, 0.4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #92400e;
  z-index: 4;
  white-space: nowrap;
}

.a3-probe {
  position: absolute;
  left: calc(50% + 150px);
  transform: translateX(-50%);
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--float);
  border: 1px solid rgba(148, 163, 184, 0.18);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  z-index: 2;
}
.a3-probe b { color: var(--text-pure); font-weight: 500; }
.a3-probe i { font-style: normal; opacity: 0.5; }
.a3-probe .a3-probe-value { color: var(--green); }
.a3-probe-tag {
  padding: 3px 10px;
  border-radius: 5px;
  background: rgba(56, 189, 248, 0.16);
  color: var(--accent-sky);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.a3-legend {
  position: absolute;
  right: 18px;
  bottom: 70px;
  width: 300px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--float);
  border: 1px solid rgba(148, 163, 184, 0.18);
  z-index: 2;
}
.a3-legend-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.a3-legend-ramp { height: 9px; border-radius: 5px; }
.a3-legend-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.a3-legend-surface { display: block; font-size: 0.66rem; color: var(--text-muted); margin-top: 6px; }

.a3-dialog {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 460px;
  max-height: calc(100% - 48px);
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 24px 60px rgba(15, 27, 51, 0.12);
  z-index: 5;
}
.a3-dialog-wide { width: min(780px, calc(100% - 400px)); overflow-x: hidden; }
.a3-dialog h3 { font-family: var(--font-ui); font-size: 1.25rem; font-weight: 700; padding-right: 30px; }
.a3-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  vertical-align: middle;
  color: var(--accent-sky);
  border: 1px solid rgba(56, 189, 248, 0.5);
}
.a3-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.15rem;
  cursor: pointer;
}
.a3-where, .a3-sub {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--accent-sky);
  margin: 6px 0 14px;
}
.a3-sub { color: var(--text-muted); text-transform: uppercase; font-size: 0.7rem; }
.a3-chart { position: relative; height: 330px; }
.a3-summary {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
  margin-top: 12px;
}
.a3-note { font-size: 0.72rem; line-height: 1.5; color: var(--text-muted); margin-top: 10px; }
.a3-info { border-bottom: 1px solid var(--hairline); padding-bottom: 10px; margin-bottom: 12px; }
.a3-info .a3-row { font-size: 0.8rem; }
.a3-status-line { font-size: 0.8rem; color: var(--accent-sky); }
.a3-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.a3-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--inset);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.a3-metric-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.a3-metric-value { font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-pure); }
.a3-metric-unit { font-size: 0.66rem; color: var(--text-muted); }
.a3-metric.warn .a3-metric-value { color: #b45309; }
.a3-metric.good .a3-metric-value { color: var(--green); }
.a3-charts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.a3-chart-sm { position: relative; height: 260px; min-width: 0; }
.a3-footnote { margin-top: 12px; max-width: none; }

/* ==========================================================================
   Water Column: the descent (descent3d.js)
   ========================================================================== */

.dc-wrap { padding-bottom: 28px; }

.dc-title {
  font-family: var(--font-ui);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.dc-title span { color: var(--blue); }

.dc-lede { max-width: 900px; font-size: 1rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 24px; }

.dc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.dc-chip {
  background: #ffffff;
  border: 1px solid #d9dde5;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.dc-chip small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-left: 6px; }
.dc-chip:hover { border-color: var(--accent-sky); color: var(--text-pure); }
.dc-chip[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--navy); color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.dc-chip[aria-pressed="true"] small { color: var(--navy); }

.dc-stage {
  position: relative;
  height: max(620px, calc(100vh - 160px));
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  overflow: hidden;
  background: #0b1c31;
}
#dcCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.dc-loading {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 400px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--float);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: var(--accent-sky);
  font-size: 0.82rem;
  z-index: 3;
}

.dc-panel {
  position: absolute;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: 340px;
  overflow-y: auto;
  padding: 20px 20px 16px;
  border-radius: 16px;
  background: var(--float);
  border: 1px solid rgba(148, 163, 184, 0.16);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.dc-panel-head { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; }
.dc-panel-head i { color: var(--accent-sky); margin-top: 18px; }
.dc-panel-head strong { display: block; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em; }
.dc-panel-head span { display: block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }

.dc-row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 0.76rem; padding: 4px 0; color: var(--text-muted); text-transform: uppercase; }
.dc-row b { font-weight: 400; color: var(--text-pure); text-transform: none; text-align: right; }
.dc-row b.tone-sky { color: var(--blue); }
.dc-row b.tone-green { color: var(--green); text-transform: uppercase; }
.dc-rows { margin-bottom: 12px; }

.dc-qc {
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(47, 125, 50, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.dc-qc-title { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.dc-qc .dc-row b { color: var(--text-pure); }
.dc-qc #dcQcErr, .dc-qc #dcQcStatus { color: var(--green); }
.dc-qc[data-status="drift"] { border-color: rgba(245, 158, 11, 0.7); background: rgba(199, 122, 10, 0.08); }
.dc-qc[data-status="drift"] #dcQcErr, .dc-qc[data-status="drift"] #dcQcStatus { color: #b45309; }
.dc-qc[data-status="failing"] { border-color: rgba(239, 68, 68, 0.75); background: rgba(185, 28, 28, 0.06); }
.dc-qc[data-status="failing"] #dcQcErr, .dc-qc[data-status="failing"] #dcQcStatus { color: #b91c1c; }
.dc-qc[data-status="none"] { border-color: rgba(148, 163, 184, 0.25); background: var(--inset); }
.dc-qc[data-status="none"] #dcQcStatus { color: var(--text-muted); font-size: 0.68rem; }
.dc-qc-note, .dc-qc-float { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.dc-qc-float { color: #b45309; opacity: 0.8; margin-top: 4px; }

.dc-profile { border-top: 1px solid var(--hairline); padding-top: 12px; margin-top: auto; }
#dcProfile { width: 100%; height: auto; display: block; }
.dc-profile-zone { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }

.dc-dock {
  position: absolute;
  bottom: 18px;
  left: calc(50% - 180px);
  transform: translateX(-50%);
  width: min(820px, calc(100% - 420px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px 12px 16px;
  border-radius: 999px;
  background: var(--float);
  border: 1px solid rgba(148, 163, 184, 0.2);
  z-index: 2;
}
.dc-play {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(90, 180, 240, 0.5);
  background: rgba(56, 189, 248, 0.12);
  color: var(--blue);
  cursor: pointer;
}
.dc-dock-main { flex: 1; min-width: 0; }
.dc-dock-top { display: flex; align-items: center; gap: 14px; }
.dc-dock-surface, .dc-dock-floor { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.dc-dock-surface { color: var(--blue); }
.dc-dock-floor { color: var(--green); }
#dcSlider { flex: 1; accent-color: var(--blue); }
.dc-zones { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.dc-zones span.active { color: var(--green); }
.dc-footnote { margin-top: 12px; max-width: none; }

/* Water Column: looking around, and the column metrics */
.dc-stage:focus { outline: none; }
.dc-stage:focus-visible { outline: 2px solid var(--accent-sky); outline-offset: 2px; }
#dcCanvas { cursor: grab; touch-action: none; }
#dcCanvas.dragging { cursor: grabbing; }

.dc-view-tools {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.dc-view-tools button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: var(--float);
  color: var(--text-dim);
  cursor: pointer;
}
.dc-view-tools button:hover { border-color: var(--accent-sky); color: var(--text-pure); }
.dc-hint {
  margin-left: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--float);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dc-loading { top: 62px; }

.dc-metrics { margin-top: 26px; }
.dc-metrics-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dc-metrics-head h3 { font-family: var(--font-display); font-size: 1.1rem; }

/* ==========================================================================
   Wildlife Dive (wildlife3d.js)
   ========================================================================== */

.wd-wrap { padding-bottom: 28px; }
.wd-eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 10px; }
.wd-title { font-family: var(--font-ui); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.wd-title span { color: #047857; }
.wd-lede { max-width: 920px; font-size: 1rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 24px; }

.wd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.wd-chip { background: #ffffff; border: 1px solid #d9dde5; color: var(--text-dim); font-family: var(--font-ui); font-size: 0.92rem; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.wd-chip small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-left: 6px; }
.wd-chip:hover { border-color: #059669; color: var(--text-pure); }
.wd-chip[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.wd-chip[aria-pressed="true"] small { color: var(--green); }

.wd-stage { position: relative; height: max(640px, calc(100vh - 150px)); border-radius: 22px; border: 1px solid rgba(148, 163, 184, 0.14); overflow: hidden; background: #0b1c31; }
.wd-stage:focus { outline: none; }
.wd-stage:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
#wdCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#wdCanvas.dragging { cursor: grabbing; }
.wd-loading { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--float); border: 1px solid rgba(110, 231, 183, 0.35); color: var(--green); font-size: 0.8rem; z-index: 4; }

.wd-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.wd-label { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; font-family: var(--font-mono); text-shadow: none; }
.wd-label b { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.wd-label span { display: block; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-dim); }

.wd-panel { position: absolute; top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--float); border: 1px solid rgba(148, 163, 184, 0.16); z-index: 2; overflow-y: auto; }
.wd-left { left: 18px; width: 360px; bottom: 110px; }
.wd-right { right: 18px; width: 330px; max-height: calc(100% - 128px); }
.wd-kicker { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.wd-kicker-sky { color: var(--blue); margin-top: 14px; }
.wd-panel h3 { font-family: var(--font-ui); font-size: 1.25rem; font-weight: 700; }
.wd-region { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 14px; }
.wd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.wd-stats div { text-align: center; }
.wd-stats b { display: block; font-family: var(--font-mono); font-size: 1rem; font-weight: 400; color: var(--blue); }
.wd-stats span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

.wd-species { list-style: none; }
.wd-species li { padding: 10px 6px; border-radius: 8px; cursor: pointer; }
.wd-species li:hover, .wd-species li:focus-visible { background: rgba(56, 189, 248, 0.08); outline: none; }
.wd-sp-top { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wd-sp-top span { flex: 1; }
.wd-species i, .wd-column i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wd-species p { font-size: 0.74rem; line-height: 1.45; color: var(--text-muted); margin: 5px 0 0 15px; }
.wd-badge { font-style: normal; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--green); }
.wd-badge.seasonal { color: #b45309; }
.wd-badge.undated { color: var(--text-muted); }

.wd-panel-head { display: flex; align-items: center; gap: 8px; }
.wd-panel-head i { color: var(--green); }
.wd-panel-head strong { font-size: 0.95rem; text-transform: uppercase; }
.wd-diver { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.wd-diver b { color: var(--blue); font-weight: 400; }
.wd-column { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wd-column li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: border-color 0.3s, background 0.3s; }
.wd-col-name { flex: 1; }
.wd-col-status { font-weight: 400; white-space: nowrap; }
.wd-column li[data-status="in"] { border-color: rgba(74, 222, 128, 0.45); background: rgba(47, 125, 50, 0.08); color: var(--text-pure); }
.wd-column li[data-status="in"] .wd-col-status { color: var(--green); }

.wd-dock { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(860px, calc(100% - 60px)); padding: 14px 24px 12px; border-radius: 999px; background: var(--float); border: 1px solid rgba(148, 163, 184, 0.2); z-index: 3; }
.wd-dock-top { display: flex; align-items: center; gap: 14px; }
.wd-dock-surface, .wd-dock-floor { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.wd-dock-surface { color: var(--green); }
.wd-dock-floor { color: var(--blue); }
.wd-track { position: relative; flex: 1; }
#wdSlider { width: 100%; accent-color: #059669; }
.wd-ticks { position: absolute; left: 8px; right: 8px; top: -6px; height: 4px; pointer-events: none; }
.wd-ticks span { position: absolute; width: 4px; height: 4px; border-radius: 50%; transform: translateX(-50%); }
.wd-zones { position: relative; height: 16px; margin: 6px 78px 0 82px; }
.wd-zones button { position: absolute; transform: translateX(-50%); background: none; border: none; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; white-space: nowrap; }


.wd-zones button:hover { color: var(--green); }

.wd-dossier { position: absolute; top: 18px; right: 360px; width: 380px; max-height: calc(100% - 128px); overflow-y: auto; padding: 20px 22px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(110, 231, 183, 0.3); box-shadow: 0 24px 60px rgba(15, 27, 51, 0.12); z-index: 4; }
.wd-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; }
.wd-sci { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 12px; }
.wd-iucn { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; }
.wd-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 0.74rem; padding: 4px 0; color: var(--text-muted); }
.wd-row b { font-weight: 400; color: var(--text-pure); text-align: right; }
.wd-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 56px; margin: 6px 0 8px; }
.wd-months div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.wd-months span { width: 100%; background: #4ade80; border-radius: 2px 2px 0 0; min-height: 1px; opacity: 0.85; }
.wd-months em { font-style: normal; font-family: var(--font-mono); font-size: 0.56rem; color: var(--text-muted); margin-top: 2px; }
.wd-source { font-size: 0.7rem; line-height: 1.5; color: var(--text-muted); margin-top: 10px; }
.wd-link { display: inline-flex; gap: 4px; align-items: center; margin-top: 8px; font-size: 0.76rem; color: var(--blue); }
.wd-footnote { margin-top: 12px; max-width: none; }

/* ==========================================================================
   Hazards: 72-hour outlooks (hazards.js)
   ========================================================================== */

.hz-wrap { padding-bottom: 28px; }
.hz-eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 10px; }
.hz-title { font-family: var(--font-ui); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.hz-title span { color: var(--orange-deep); }
.hz-lede { max-width: 920px; font-size: 1rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 22px; }
.hz-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hz-chip { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #d9dde5; color: var(--text-dim); font-family: var(--font-ui); font-size: 0.92rem; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.hz-chip:hover { border-color: var(--orange); color: var(--text-pure); }
.hz-chip[aria-pressed="true"] { background: #fdf0e6; border-color: var(--orange); color: var(--orange-deep); box-shadow: 0 0 0 1px var(--orange); }

.hz-predictor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.hz-map-card, .hz-side { background: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-card); border-radius: 16px; padding: 18px 20px; }
.hz-map-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.hz-map-head h3 { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 700; }
.hz-value { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; max-width: 520px; }
.hz-leads { display: flex; gap: 6px; flex-wrap: wrap; }
.hz-leads button { font-family: var(--font-mono); font-size: 0.72rem; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.25); background: #ffffff; color: var(--text-dim); cursor: pointer; }
.hz-leads button[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); background: rgba(56, 189, 248, 0.12); }
.hz-leads .hz-play { width: 32px; padding: 6px 0; }
.hz-map-wrap { position: relative; }
#hzMap { width: 100%; height: auto; display: block; border-radius: 10px; cursor: crosshair; background: #1a2433; }
.hz-map-status { position: absolute; top: 12px; left: 12px; right: 12px; padding: 8px 14px; border-radius: 10px; background: var(--float); border: 1px solid rgba(251, 146, 60, 0.4); color: var(--orange-deep); font-size: 0.8rem; }
.hz-tip { position: absolute; pointer-events: none; padding: 5px 9px; border-radius: 6px; background: var(--float); border: 1px solid rgba(148, 163, 184, 0.3); font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-pure); white-space: nowrap; }
.hz-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.74rem; color: var(--text-dim); }
.hz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hz-legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.hz-kicker { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 6px; }
.hz-when { font-family: var(--font-mono); font-size: 0.8rem; color: var(--blue); margin-bottom: 12px; }
.hz-metric { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; padding: 5px 0; border-bottom: 1px solid var(--hairline); color: var(--text-muted); }
.hz-metric b { font-family: var(--font-mono); font-weight: 400; color: var(--text-pure); text-align: right; }
.hz-metric.now b { color: var(--blue); }
.hz-chart { position: relative; height: 170px; margin: 14px 0; }
.hz-point { margin-top: 6px; }
.hz-muted { font-size: 0.76rem; color: var(--text-muted); }
.hz-note { margin: 12px 0 30px; max-width: none; }
.hz-record-head { margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--hairline); }
/* Ocean productivity by basin, the last section of the Ocean Hazards tab. */
.hz-prod { margin-top: 18px; }
/* The forecast block is the whole Forecast tab now: no rule under it. */
.fc-block:last-child { margin-bottom: 0; border-bottom: none; }
@media (max-width: 1100px) { .hz-predictor { grid-template-columns: 1fr; } }
.hz-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; }
.hz-zoom button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.3); background: var(--float); color: var(--text-dim); cursor: pointer; font-size: 0.95rem; }
.hz-zoom button:hover { border-color: var(--orange); color: var(--text-pure); }
.hz-zoom span { font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-muted); background: var(--float); padding: 2px 5px; border-radius: 4px; }
#hzMap.zoomed { cursor: grab; }
#hzMap.panning { cursor: grabbing; }
#hzMap:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ==========================================================================
   Ocean Connect: the Indian Ocean intelligence feed (connect.js)
   ========================================================================== */
.oc-wrap { padding-bottom: 28px; }
.oc-eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 10px; }
.oc-title { font-family: var(--font-ui); font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; }
.oc-title span { color: #0f766e; }
.oc-lede { max-width: 940px; font-size: 1rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 22px; }
.oc-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }
.oc-kicker { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: #0f766e; margin-bottom: 4px; }
.oc-muted { font-size: 0.8rem; color: var(--text-muted); padding: 8px 0; }
.oc-error { font-size: 0.8rem; color: #b91c1c; padding: 8px 0; }

.oc-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.oc-stat { --c: #0d9488; background: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-card); border-top: 2px solid var(--c); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.oc-stat-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.oc-stat-val { font-family: var(--font-ui); font-size: 1.7rem; font-weight: 800; margin: 4px 0 2px; color: var(--text-pure); }
.oc-stat-sub { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }

.oc-main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: stretch; }
.oc-map-card, .oc-feed-card, .oc-section { background: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-card); border-radius: 16px; padding: 18px 20px; }
.oc-map-head, .oc-feed-head, .oc-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.oc-map-head h3, .oc-section-head h3 { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 700; }
.oc-layers, .oc-filters, .oc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.oc-layers button, .oc-filters button, .oc-tags button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 0.76rem; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.25); background: #ffffff; color: var(--text-muted); cursor: pointer; }
.oc-layers button[aria-pressed="true"], .oc-filters button[aria-pressed="true"], .oc-tags button[aria-pressed="true"] { border-color: #0d9488; color: #0f766e; background: rgba(45, 212, 191, 0.1); }
.oc-map-wrap { position: relative; }
.oc-map-wrap canvas { display: block; width: 100%; height: auto; border-radius: 10px; cursor: grab; outline: none; }
.oc-map-wrap canvas.panning { cursor: grabbing; }
.oc-map-wrap canvas:focus-visible { box-shadow: 0 0 0 2px #2dd4bf; }
.oc-zoom button:hover { border-color: #0d9488; }
.oc-map-status { position: absolute; top: 12px; left: 12px; right: 60px; padding: 8px 14px; border-radius: 10px; background: var(--float); border: 1px solid rgba(251, 146, 60, 0.4); color: var(--orange-deep); font-size: 0.78rem; }
#ocTip { white-space: pre; max-width: 300px; }
.oc-detail { position: absolute; left: 12px; bottom: 12px; width: min(360px, calc(100% - 24px)); padding: 14px 16px; border-radius: 12px; background: var(--float); border: 1px solid rgba(148, 163, 184, 0.3); font-size: 0.8rem; color: var(--text-dim); box-shadow: 0 10px 30px rgba(15, 27, 51, 0.12); }
.oc-detail h4 { font-family: var(--font-ui); font-size: 0.98rem; color: var(--text-pure); margin: 8px 0 6px; padding-right: 20px; }
.oc-detail p { line-height: 1.5; margin-bottom: 6px; }
.oc-detail-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; }
.oc-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 0.72rem; color: var(--text-muted); }
.oc-key span { display: inline-flex; align-items: center; gap: 6px; }
.oc-key .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); display: inline-block; }
.oc-key .diamond { width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid #f87171; display: inline-block; }

.oc-feed-card { display: flex; flex-direction: column; min-height: 0; max-height: 920px; }
.oc-refresh { background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.25); color: var(--text-muted); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
.oc-refresh:hover { color: var(--text-pure); border-color: #0d9488; }
.oc-filters { margin-bottom: 10px; }
.oc-feed { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.oc-group { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 6px; }
.oc-group:first-child { margin-top: 0; }
.oc-item { padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; border-left: 2px solid rgba(148, 163, 184, 0.2); margin-bottom: 6px; background: var(--inset); cursor: pointer; }
.oc-item:hover, .oc-item:focus-visible { border-color: rgba(148, 163, 184, 0.3); outline: none; }
.oc-item.selected { border-color: var(--navy); }
.oc-item.oc-event, .oc-item.oc-hazard { border-left-color: var(--c, #94a3b8); }
.oc-item-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.oc-item-top time { margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); }
.oc-badge { --c: #94a3b8; display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; color: #020612; background: var(--c); white-space: nowrap; }
.oc-level { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(148, 163, 184, 0.35); color: var(--text-dim); }
.oc-kind { font-size: 0.66rem; color: var(--text-muted); }
.oc-item-title { font-size: 0.84rem; font-weight: 600; color: var(--text-pure); line-height: 1.35; }
.oc-item-title a { color: inherit; text-decoration: none; }
.oc-item-title a:hover { text-decoration: underline; }
.oc-item-text { font-size: 0.76rem; color: var(--text-dim); line-height: 1.45; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oc-item-meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.oc-more { width: 100%; margin: 6px 0; padding: 8px; border-radius: 8px; border: 1px dashed rgba(148, 163, 184, 0.3); background: none; color: var(--text-muted); cursor: pointer; font-size: 0.76rem; }
.oc-more:hover { color: var(--text-pure); }

.oc-section { margin-top: 18px; }
.oc-note { margin: 12px 0 0; max-width: none; }
.oc-classes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.oc-class { --c: #94a3b8; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, #ffffff); cursor: pointer; color: var(--text-pure); }
.oc-class i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.oc-class-name { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--c); }
.oc-class-count { font-size: 0.72rem; color: var(--text-dim); }
.oc-class.quiet { opacity: 0.6; }
.oc-class[aria-pressed="false"] { opacity: 0.3; filter: grayscale(0.8); }
.oc-event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.oc-event { --c: #94a3b8; padding: 14px 16px; border-radius: 12px; background: var(--inset); border: 1px solid rgba(148, 163, 184, 0.16); border-top: 3px solid var(--c); cursor: pointer; font-size: 0.78rem; color: var(--text-dim); }
.oc-event:not(.active) { border-top-width: 1px; }
.oc-event:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.oc-event-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oc-sender { margin-left: auto; font-size: 0.66rem; color: var(--text-muted); }
.oc-event h4 { font-family: var(--font-ui); font-size: 0.95rem; color: var(--text-pure); margin: 8px 0 4px; }
.oc-event-when { font-family: var(--font-mono); font-size: 0.66rem; color: var(--blue); margin-bottom: 6px; }
.oc-event p { line-height: 1.5; margin-bottom: 6px; }
.oc-event details summary { cursor: pointer; font-size: 0.74rem; color: var(--text-pure); }
.oc-event details ul { margin: 6px 0 0 16px; max-height: 220px; overflow-y: auto; }
.oc-event details li { margin-bottom: 6px; line-height: 1.45; font-size: 0.72rem; }
.oc-event-place { font-size: 0.72rem; color: var(--text-muted); }
.oc-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.7rem; color: var(--blue); text-decoration: none; }
.oc-src:hover { text-decoration: underline; }

.oc-networks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.oc-net { --c: #94a3b8; text-align: left; padding: 14px 16px; border-radius: 12px; background: var(--inset); border: 1px solid rgba(148, 163, 184, 0.16); border-left: 3px solid var(--c); cursor: pointer; color: var(--text-dim); font-family: var(--font-ui); }
.oc-net[aria-pressed="false"] { opacity: 0.45; }
.oc-net:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.oc-net-top { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--text-pure); }
.oc-net-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.oc-net-count { font-size: 1.6rem; font-weight: 800; color: var(--c); margin: 6px 0 2px; }
.oc-net-rep { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); margin-bottom: 8px; }
.oc-net-about { font-size: 0.72rem; line-height: 1.45; color: var(--text-muted); }

.oc-tags { margin-bottom: 12px; }
.oc-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px 16px; }
.oc-article { display: block; padding: 10px 12px; border-radius: 10px; background: var(--inset); border: 1px solid transparent; text-decoration: none; }
.oc-article:hover { border-color: rgba(45, 212, 191, 0.4); }
.oc-article-title { display: block; font-size: 0.84rem; font-weight: 600; color: var(--text-pure); line-height: 1.35; }
.oc-article-meta { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 1300px) {
  .oc-main { grid-template-columns: minmax(0, 1fr); }
  .oc-feed-card { max-height: 640px; }
  .oc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .oc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-news { grid-template-columns: minmax(0, 1fr); }
}
.oc-detail-alert { padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--hairline); }
.oc-detail h4 + .oc-detail-alert { border-top: none; margin-top: 0; padding-top: 0; }
.oc-detail-alert p { margin: 6px 0 4px; }
.oc-detail { max-height: calc(100% - 24px); overflow-y: auto; }
.oc-feed { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.3) transparent; }
.oc-item, .oc-event, .oc-detail { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Regional ticker along the bottom of the globe (ticker.js). A fixed label on
   the left, the regions scrolling right to left behind it; hovering pauses it.
   -------------------------------------------------------------------------- */
.region-ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ticker-h);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  background: linear-gradient(90deg, #102a5c 0%, #163a78 55%, #12306a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.74rem;
  color: #d6e0f2;
}

.rt-label {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px 0 16px;
  background: linear-gradient(100deg, #f2a25e 0%, var(--orange) 55%, #c9622a 100%);
  border-top-right-radius: 16px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rt-label b {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rt-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.rt-track {
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  will-change: transform;
}

.rt-track.rt-moving {
  animation: rt-scroll var(--rt-duration, 60s) linear infinite;
}

.region-ticker:hover .rt-track.rt-moving {
  animation-play-state: paused;
}

@keyframes rt-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.rt-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.rt-item b {
  color: #ffffff;
  font-weight: 700;
  margin-right: 2px;
}

.rt-item .rt-v {
  font-family: var(--font-mono);
  color: #ffffff;
}

.rt-item .rt-sep {
  color: rgba(214, 224, 242, 0.5);
}

.rt-item .rt-alert {
  color: #ffc58f;
}

.rt-muted, .rt-note {
  color: #aebbd6;
}

@media (prefers-reduced-motion: reduce) {
  .rt-track.rt-moving { animation: none; }
  .rt-viewport { overflow-x: auto; }
}