:root {
  color-scheme: dark;
  --bg: transparent;
  --panel: #131a2e;
  --line: #2a3450;
  --text: #e8ecf6;
  --muted: #98a2bd;
  --accent: #22d3ee;
  --accent-2: #a855f7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.tt-app { padding: 4px 2px 8px; }

/* Controls row */
.tt-controls {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 14px;
}
.tt-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.tt-field--grow { flex: 1 1 260px; }
.tt-field label {
  font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
}
.tt-field select {
  background: #0d1426; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 10px; font-size: 13.5px; font-family: inherit;
}
.tt-field select:focus { outline: 2px solid rgba(34,211,238,0.3); outline-offset: 1px; }

/* Radius toggle row */
.tt-radius-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-bottom: 14px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.tt-radius-label { font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--text); }
.tt-check input { accent-color: var(--accent); }
.tt-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tt-swatch--r34 { background: rgba(0,220,220,0.6); border: 1px solid rgba(0,220,220,0.9); }
.tt-swatch--r50 { background: rgba(255,180,0,0.6); border: 1px solid rgba(255,180,0,0.9); }
.tt-swatch--r64 { background: rgba(255,60,60,0.6); border: 1px solid rgba(255,60,60,0.9); }

/* Stats strip */
.tt-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.tt-stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px;
}
.tt-stat-label { font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.tt-stat-value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tt-stat--hot { border-color: rgba(255,64,196,0.55); background: linear-gradient(180deg, rgba(255,64,196,0.13), var(--panel)); }
.tt-stat--hot .tt-stat-value { color: #ff8fd8; }

/* Storm | Season segmented toggle */
.tt-segmented { display: inline-flex; background: #0d1426; border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.tt-seg {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 650; line-height: 1;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
}
.tt-seg.is-active { background: var(--accent); color: #04121a; }
.tt-seg:not(.is-active):hover { color: var(--text); }

/* ENSO badge */
.tt-enso-badge {
  display: inline-flex; align-items: center; height: 38px; padding: 0 12px;
  border-radius: 8px; font-size: 13px; font-weight: 650; white-space: nowrap;
  background: #0d1426; border: 1px solid var(--line); color: var(--muted);
}
.tt-enso--nino { color: #ffb4a2; border-color: rgba(255,99,71,0.5); background: rgba(255,99,71,0.12); }
.tt-enso--nina { color: #a2c8ff; border-color: rgba(56,152,255,0.5); background: rgba(56,152,255,0.12); }
.tt-enso--neutral { color: #c7d0e0; background: rgba(150,170,200,0.1); }

/* Forecast toggle bits in the radius row */
.tt-radius-sep { width: 1px; height: 20px; background: var(--line); }
.tt-swatch--fc { background: rgba(124,58,237,0.5); border: 1px solid rgba(196,181,253,0.9); }

/* Season-overview mode: hide the per-storm chrome, show a hint */
.tt-season-hint { display: none; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.tt-app.is-season .tt-season-hint { display: block; }
.tt-app.is-season .tt-radius-controls,
.tt-app.is-season .tt-stats,
.tt-app.is-season .tt-scrubber,
.tt-app.is-season .tt-chart,
.tt-app.is-season .tt-details { display: none; }

/* Season climatology panel */
.tt-clim { margin: 6px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tt-clim > summary {
  cursor: pointer; padding: 12px 16px; font-size: 13px; font-weight: 650;
  color: var(--accent); list-style: none;
}
.tt-clim > summary::-webkit-details-marker { display: none; }
.tt-clim > summary::before { content: "\25B8\00A0"; }
.tt-clim[open] > summary::before { content: "\25BE\00A0"; }
.tt-clim-chart { width: 100%; min-height: 250px; padding: 0 8px; }
.tt-clim-note { margin: 0; padding: 8px 16px 14px; font-size: 11.5px; color: var(--muted); }
.tt-clim-key { font-weight: 700; padding: 0 1px; }
.tt-clim-key--nino { color: #ff6347; }
.tt-clim-key--nina { color: #3898ff; }
.tt-clim-key--neutral { color: #9db0cc; }

/* Track / Forecast mode visibility */
.tt-predict-only, .tt-predict-panel, .tt-predict-hint { display: none; }
.tt-app.mode-predict .tt-predict-only { display: flex; }
.tt-app.mode-predict .tt-track-only { display: none; }
.tt-app.mode-predict .tt-stats,
.tt-app.mode-predict .tt-scrubber,
.tt-app.mode-predict .tt-chart,
.tt-app.mode-predict .tt-legend,
.tt-app.mode-predict .tt-details { display: none; }
.tt-app.mode-predict .tt-predict-panel { display: flex; }
.tt-app.mode-predict .tt-predict-hint { display: block; }
.tt-predict-hint { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.tt-predict-hint b { color: var(--text); }
.tt-predict-hint a { color: var(--accent); }

/* Forecast animation controls (shown only in Forecast mode) */
.tt-fc-controls { display: none; align-items: center; gap: 8px; margin: 0 0 10px; }
.tt-app.mode-predict .tt-fc-controls { display: flex; }
.tt-fc-controls button {
  min-width: 40px; height: 34px; padding: 0 12px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.tt-fc-controls button:hover { background: rgba(255,213,74,0.14); border-color: #ffd54a; }
.tt-fc-controls button:active { transform: scale(0.95); }
#tt-fc-speed { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Experimental AI-model overlay control (emerald, distinct from JMA violet) */
.tt-ai-forecast { align-items: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 12px; }
.tt-ai-btn {
  border: 1px solid rgba(52,211,153,0.5); background: rgba(52,211,153,0.10);
  color: #6ee7b7; font: inherit; font-size: 12.5px; font-weight: 650;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
}
.tt-ai-btn:hover { background: rgba(52,211,153,0.18); }
.tt-ai-btn.is-on { background: rgba(52,211,153,0.22); border-color: #34d399; }
.tt-ai-status { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tt-ai-status--loading { color: #fcd34d; }
.tt-ai-status--on { color: #6ee7b7; }
.tt-ai-status--err { color: #fca5a5; }
.tt-fc-slider {
  flex: 1 1 auto; min-width: 0; height: 6px; margin: 0 4px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,213,74,0.5));
  border-radius: 999px;
}
.tt-fc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 999px;
  background: #ffd54a; border: 2px solid rgba(20,26,46,0.9); cursor: pointer;
  box-shadow: 0 0 6px rgba(255,180,0,0.7);
}
.tt-fc-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 999px;
  background: #ffd54a; border: 2px solid rgba(20,26,46,0.9); cursor: pointer;
}
.tt-fc-time {
  flex: 0 0 auto; min-width: 122px; text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Forecast side panel — mirrors the live-details panel */
.tt-predict-panel {
  flex: 0 0 260px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; flex-direction: column; gap: 11px;
}
.tt-pred-head { display: flex; flex-direction: column; gap: 5px; }
.tt-pred-foot { font-size: 11px; color: var(--muted); line-height: 1.5; }
.tt-pred-foot a { color: var(--accent); }

/* Current-conditions stats as tidy tiles, with the two headline numbers
   (pressure, max wind) given a touch more weight than gusts/movement. */
.tt-predict-panel .tt-details-grid { gap: 7px; }
.tt-predict-panel .tt-details-item {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; gap: 3px;
}
.tt-predict-panel .tt-details-value--sm { font-size: 14.5px; font-weight: 750; }

.tt-fc-badgerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-fc-badge {
  font-size: 13px; font-weight: 750;
  padding: 5px 10px; border-radius: 999px; width: fit-content;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
}
.tt-fc-tnum {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--text); cursor: help; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.05);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.tt-fc-tnum--past { color: #7dd3fc; border-color: rgba(56,189,248,0.45); background: rgba(56,189,248,0.1); }
.tt-fc-tnum--now  { color: #fde68a; border-color: rgba(253,224,138,0.5); background: rgba(253,224,138,0.12); }
.tt-fc-tnum--fcst { color: #c4b5fd; border-color: rgba(196,181,253,0.5); background: rgba(196,181,253,0.12); }
/* Live sweep readout — a small telemetry strip, updated each animation frame */
.tt-fc-live {
  display: flex; align-items: center; gap: 7px; min-height: 30px;
  font-size: 11.5px; color: var(--text); font-variant-numeric: tabular-nums;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,213,74,0.07); border: 1px solid rgba(255,213,74,0.2);
}
.tt-fc-live-dot {
  width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto;
  background: #ffd54a; box-shadow: 0 0 6px rgba(255,180,0,0.85);
  animation: tt-fc-pulse 1.8s ease-in-out infinite;
}
@keyframes tt-fc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .tt-fc-live-dot { animation: none; } }
.tt-fc-live-dot--past { background: rgba(255,255,255,0.5); box-shadow: none; }
.tt-fc-live-past { color: var(--muted); }
.tt-fc-pos {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; color: var(--text);
}
.tt-fc-subhead {
  font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line);
}
.tt-fc-rows { display: flex; flex-direction: column; gap: 3px; }
.tt-fc-row {
  position: relative;
  display: grid; grid-template-columns: 42px 1fr auto; column-gap: 6px; row-gap: 1px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
  padding: 4px 6px 4px 12px; border-radius: 7px;
  transition: background-color .15s ease;
}
/* intensity spine — a colored bar keyed to that lead time's wind (JMA scale),
   turning the plain list into an at-a-glance intensification/weakening timeline */
.tt-fc-row::before {
  content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 3px;
  border-radius: 999px; background: var(--fc-row, var(--line));
}
.tt-fc-row:hover { background: rgba(255,255,255,0.04); }
.tt-fc-h { grid-column: 1; grid-row: 1; font-weight: 750; color: #c4b5fd; }
.tt-fc-val { grid-column: 2; grid-row: 1; color: var(--text); }
.tt-fc-circ { grid-column: 3; grid-row: 1; color: var(--muted); }
.tt-fc-when {
  grid-column: 2 / -1; grid-row: 2;
  color: var(--muted); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
}

/* Map + live details, side by side */
.tt-mapwrap { display: flex; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.tt-map-shell { flex: 1 1 auto; min-width: 0; position: relative; }
.tt-map {
  width: 100%; min-height: 460px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden;
}
.tt-error { padding: 40px; text-align: center; color: var(--muted); }

/* Zoom controls, overlaid top-right on the map */
.tt-zoom-controls {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px;
}
.tt-zoom-controls button {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(19,26,46,0.88); border: 1px solid var(--line); color: var(--text);
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.tt-zoom-controls button:hover { background: rgba(34,211,238,0.18); border-color: var(--accent); }
.tt-zoom-controls button:active { transform: scale(0.94); }
#tt-zoom-reset { font-size: 13px; }
.tt-zoom-hint {
  position: absolute; bottom: 8px; left: 12px; z-index: 5;
  margin: 0; font-size: 10.5px; color: rgba(232,236,246,0.55);
  pointer-events: none;
}

/* Live details panel */
.tt-details {
  flex: 0 0 240px; min-width: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.tt-details-top { display: flex; flex-direction: column; gap: 6px; }
.tt-details-name { font-size: 17px; font-weight: 700; color: var(--text); }
.tt-details-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted);
}
.tt-details-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; width: fit-content;
  background: rgba(150,190,215,0.14); color: #d7e6f2;
  transition: background-color .35s ease, color .35s ease;
}
.tt-details-cat::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor;
  animation: tt-livedot 1.6s ease-in-out infinite;
}
@keyframes tt-livedot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.tt-details-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-details-dvorak {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.04);
  cursor: help;
}

.tt-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-details-item { display: flex; flex-direction: column; gap: 2px; }
.tt-details-item--wide { grid-column: 1 / -1; }
.tt-details-label { font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tt-details-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tt-details-value small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.tt-details-value--sm { font-size: 13px; font-weight: 600; }

.tt-details-subhead {
  font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line);
}
.tt-details .tt-radius-row {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px;
}
.tt-details .tt-radius-row-label { flex: 1; color: var(--muted); }
.tt-details .tt-radius-row span:last-child {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* Scrubber */
.tt-scrubber {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.tt-play-btn {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  background: linear-gradient(120deg, #22d3ee, #a855f7);
  color: #06121c; border: none; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tt-play-btn:hover { filter: brightness(1.08); }
#tt-slider { flex: 1; accent-color: var(--accent); }
.tt-time-readout {
  flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--muted); white-space: nowrap;
  min-width: 220px; text-align: right;
}

/* Chart */
.tt-chart {
  width: 100%; min-height: 220px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 14px;
}

/* Legend */
.tt-legend { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 14px; }
.tt-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tt-legend-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.tt-source-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
.tt-source-note a { color: var(--accent); }

@media (max-width: 780px) {
  .tt-mapwrap { flex-direction: column; }
  .tt-details { flex: 1 1 auto; }
  .tt-map { min-height: 360px; }
}

/* Desktop, Forecast mode: the info panel lists a full 5-day forecast and so runs
   much taller than the map. Side by side, that stretched the row to the panel's
   height and left a big blank strip under the map before the timebar. The map is
   a Plotly geo plot with a fixed height (its min-height) — it can't be grown to
   fill space without letterboxing — so instead cap the PANEL to the map's height
   and let it scroll its own overflow. Both columns end up the same height. */
@media (min-width: 781px) {
  .tt-app.mode-predict .tt-predict-panel {
    max-height: 460px; overflow-y: auto;   /* == .tt-map min-height */
  }
}

@media (max-width: 640px) {
  .tt-field { min-width: 100%; }
  .tt-time-readout { min-width: 0; text-align: left; }
  .tt-scrubber { flex-wrap: wrap; }
}