:root {
  --bg-deep: #0a1628;
  --panel: rgba(255, 255, 255, 0.045);
  --panel-hover: rgba(255, 255, 255, 0.08);
  --panel-selected: rgba(94, 234, 212, 0.1);
  --border: rgba(255, 255, 255, 0.1);
  --text: #eef3f9;
  --text-muted: #8fa2ba;
  --accent: #5eead4;
  --accent-strong: #2dd4bf;
  --danger: #f28b82;

  --water: #a9cddd;
  --land: #d9caa0;
  --coast: #362c16;
  --border-line: #6b5a38;
  --state-line: #5b4c2e;
  --grid-line: rgba(74, 58, 34, 0.42);
  --grid-label: rgba(20, 35, 55, 0.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg-deep);
}

.shell { height: 100%; display: flex; flex-direction: column; }

.demo-banner {
  background: #3a2d0b; color: #ffd97a; font-size: 12.5px; font-weight: 600;
  text-align: center; padding: 7px 12px; border-bottom: 1px solid rgba(255, 217, 122, 0.25);
}
.demo-banner[hidden] { display: none; }
.demo-banner a { color: #ffe9ad; }

.topbar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 24px; background: var(--bg-deep); border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.topbar__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.topbar__mark {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 7px; color: var(--accent); background: rgba(94, 234, 212, 0.1); flex-shrink: 0;
}
.topbar__name { font-weight: 800; letter-spacing: 0.01em; }
.topbar__links { display: flex; align-items: center; gap: 4px; }
.topbar__link {
  color: var(--text-muted); text-decoration: none; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}
.topbar__link:hover { color: var(--text); background: var(--panel-hover); }
.topbar__link.is-active { color: var(--text); background: var(--panel); }
.topbar__link--accent { color: var(--accent); }
.topbar__link--accent:hover { background: rgba(94, 234, 212, 0.1); }

/* Hidden above the mobile breakpoint -- .topbar__links renders inline
   there instead (see the base rule above). Shown and given its collapse
   behavior only inside the 760px block below. */
.topbar__menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  cursor: pointer; flex-shrink: 0;
}
.topbar__menu-toggle:hover { background: var(--panel-hover); }

.hero {
  min-height: 66px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: #0d1f38;
  border-bottom: 1px solid var(--border);
  z-index: 30;
}
.hero__brand { display: flex; align-items: center; gap: 12px; }
.hero__mark {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; color: var(--accent);
  background: var(--bg-deep);
  flex-shrink: 0;
}
.hero__brand h1 { margin: 0; font-size: 18px; letter-spacing: 0.01em; }
.hero__brand p { margin: 1px 0 0; font-size: 12px; color: var(--text-muted); }
.hero__status {
  margin: 0; font-size: 12.5px; color: var(--accent); font-weight: 600;
  padding: 6px 12px; border: 1px solid rgba(94, 234, 212, 0.25); border-radius: 999px;
  background: rgba(94, 234, 212, 0.06);
}
/* Ticker (a sentence, anchored left) and live-status (numbers, anchored
   right via margin-left: auto -- not space-between, so it stays pinned
   to the right edge even when the ticker is hidden at zero systems)
   share one row instead of each being its own thin left-heavy bar with
   a dead stretch of empty background to its right. */
.info-bar {
  display: flex; align-items: center; gap: 20px; padding: 8px 24px; min-height: 34px;
  background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: live-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes live-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.activity-ticker { display: flex; align-items: center; gap: 10px; min-width: 0; }
.activity-ticker[hidden] { display: none; }
.activity-ticker__label {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 10.5px; color: var(--bg-deep); background: var(--accent);
  padding: 3px 8px; border-radius: 999px;
}
.activity-ticker__text { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.activity-ticker__text strong { color: var(--accent); font-weight: 700; }

.live-status-bar {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  margin-left: auto; padding-left: 20px; border-left: 1px solid var(--border);
}
.live-status-bar__label {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 10.5px; color: var(--text); background: rgba(255, 255, 255, 0.12);
  padding: 3px 8px; border-radius: 999px;
}
.live-status-bar__text { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.content { flex: 1; min-height: 0; display: flex; }

.system-list {
  width: 330px; flex: 0 0 330px; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(4, 12, 24, 0.4);
  border-right: 1px solid var(--border);
}
.system-list__empty { color: var(--text-muted); font-size: 13px; text-align: center; margin-top: 30px; }
.system-list__empty[hidden] { display: none; }
/* Mobile-only bottom-sheet handle for #system-list (live map page) -- see
   the 760px block below for its actual layout; hidden on desktop, where
   the sidebar is always fully visible and there's nothing to expand. */
.system-list__handle { display: none; }

.sidebar-overview { display: flex; gap: 8px; }
.sidebar-overview__tile {
  flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.sidebar-overview__value { font-size: 22px; font-weight: 800; color: var(--accent); }
.sidebar-overview__label {
  font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
}

.system-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 13px; overflow: hidden;
  transition: background .12s ease, border-color .12s ease;
}
.system-card.is-selected { background: var(--panel-selected); border-color: rgba(94, 234, 212, 0.4); }
.system-card__summary {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: none; border: none; color: var(--text); padding: 13px 14px; cursor: pointer; font: inherit;
}
.system-card__summary:hover { background: var(--panel-hover); }
.system-card__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }
.system-card__name { flex: 1; font-weight: 700; font-size: 14px; }
.system-card__tag {
  font-size: 11px; font-weight: 700; color: #06222a; padding: 4px 9px; border-radius: 999px;
  white-space: nowrap;
}

.system-card__detail { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.system-card__meta { margin: 0 0 8px; color: var(--text-muted); font-size: 12px; }
.system-card__subheading {
  margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.info-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.info-row:last-of-type { border-bottom: none; }
.info-row__label { color: var(--text-muted); }
.info-row__value { font-weight: 600; }
.info-track-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.info-track-list li {
  background: rgba(255, 255, 255, 0.07); border-radius: 7px; padding: 4px 9px; font-size: 11.5px; font-weight: 600;
}

.system-card__download {
  margin-top: 10px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--accent); background: rgba(94, 234, 212, 0.1); border: 1px solid rgba(94, 234, 212, 0.35);
  cursor: pointer;
}
.system-card__download:hover { background: rgba(94, 234, 212, 0.18); }

.system-card__watch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.system-card__watch-item {
  border-radius: 7px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; color: #06222a;
}

.map-pane {
  flex: 1; position: relative; background: var(--water); overflow: hidden;
  margin: 14px 14px 14px 0; border-radius: 14px; border: 1px solid var(--border);
}
#map { width: 100%; height: 100%; display: block; cursor: default; user-select: none; touch-action: none; }
#map.is-panning { cursor: grabbing; }

.discussion-callout {
  position: absolute; z-index: 20; max-width: 340px; max-height: calc(100% - 24px);
  overflow-y: auto; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.97); border: 1px solid #cbd5e1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5; color: #122033;
  white-space: pre-wrap; word-break: break-word;
}
.discussion-callout[hidden] { display: none; }

.map-legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 14px; max-width: calc(100% - 28px);
  background: rgba(10, 22, 40, 0.82); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px; padding: 10px 12px;
}
.map-legend__group { display: flex; flex-direction: column; gap: 6px; }
.map-legend__title {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); white-space: nowrap;
}
.map-legend__swatches { display: flex; gap: 4px; }
.map-legend__swatches span {
  width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

/* The watch/warning group's title doubles as its expand/collapse button
   (18 product x level swatches is too many to show open at all times --
   see map-legend__watch-grid below) -- reset button chrome back to how
   the plain .map-legend__title span already looks, plus a chevron that
   flips when expanded. */
.map-legend__toggle {
  display: flex; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; cursor: pointer;
}
.map-legend__toggle:hover { color: var(--text); }
.map-legend__chevron { display: inline-block; font-size: 8px; transition: transform .15s ease; }
.map-legend__toggle[aria-expanded="true"] .map-legend__chevron { transform: rotate(180deg); }

/* Collapsed by default at every width (not just below a breakpoint --
   unlike .topbar__links, which this reuses the toggle/class/aria-expanded
   mechanics of) -- 18 swatches permanently open would make the legend bar
   several times today's size. */
.map-legend__watch-grid {
  display: none;
  grid-template-columns: auto repeat(3, 1fr);
  gap: 3px; align-items: center; margin-top: 2px;
}
.map-legend__watch-grid.is-open { display: grid; }
.map-legend__watch-head {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); text-align: center; padding: 0 2px;
}
.map-legend__watch-row-label {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; padding-right: 6px;
}
.map-legend__watch-swatch { width: 18px; height: 18px; border-radius: 5px; }

.land { fill: var(--land); stroke: var(--coast); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.lake { fill: var(--water); stroke: var(--coast); stroke-width: 0.9px; vector-effect: non-scaling-stroke; }
.country-borders { fill: none; stroke: var(--border-line); stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
.state-borders { fill: none; stroke: var(--state-line); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.grid-line { stroke: var(--grid-line); stroke-width: 0.7px; vector-effect: non-scaling-stroke; pointer-events: none; }
.grid-label { fill: var(--grid-label); font-family: inherit; }

/* Shapes & arrows -- exact values from editor/styles.css so a system's
   annotations look identical here and in the editor. Color (fill/stroke)
   comes from annotationRenderer.js as a presentation attribute per
   instance, same as the editor; pointer-events stays on (unlike a plain
   reused style) since a shape/arrow is a real click target here -- it's
   what selects the owning system when there's no marker to click (see
   pointRenderer.js's hideUnformed). */
.annotation-shape-fill {
  stroke-width: 1.6px; vector-effect: non-scaling-stroke; cursor: pointer;
}
.annotation-arrow-line {
  fill: none; stroke-width: 2.2px; stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: pointer;
}
.annotation-arrow-hit { display: none; }
.annotation-arrowhead { stroke: none; }

.live-pulse {
  pointer-events: none; transform-box: fill-box; transform-origin: center;
  animation: live-pulse 2.6s ease-out infinite;
}
@keyframes live-pulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}

.point-x-outline { stroke: rgba(10, 22, 40, .9); stroke-width: 7px; stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: pointer; }
.point-x-fill { stroke-width: 4px; stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: pointer; }
.point-label {
  fill: #0b1f3a; font-weight: 700; text-anchor: middle; paint-order: stroke fill;
  stroke: #fff; stroke-width: 3px; vector-effect: non-scaling-stroke;
}
.point-selection-ring { fill: none; stroke: var(--accent); stroke-width: 1.8px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }

.forecast-cone, .forecast-cone-late, .forecast-cone-outline, .forecast-track { pointer-events: none; }
.forecast-cone.cone-fill { fill: rgba(238, 243, 249, .88); stroke: none; }
.forecast-cone-late.cone-day4-5 { fill: rgba(238, 243, 249, .5); stroke: none; }
.forecast-cone-outline { stroke: none; }
.forecast-cone-outline-full { fill: rgba(238, 243, 249, .95); }
.forecast-cone-outline-early { fill: rgba(6, 14, 26, .92); }
.forecast-track { fill: none; stroke: #111820; stroke-width: 2.1px; vector-effect: non-scaling-stroke; }
.forecast-point-marker { pointer-events: none; }
.forecast-point-core { fill: #050505; stroke: #050505; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.forecast-point-symbol { fill: #fff; font-weight: 800; font-family: inherit; }
.forecast-point-marker-label {
  fill: #111; font-weight: 800; font-family: inherit;
  paint-order: stroke; stroke: rgba(255, 255, 255, .88); stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.wind-field { vector-effect: non-scaling-stroke; pointer-events: none; stroke-width: 1.35px; }
.wind-field-gale { fill: rgba(240, 188, 74, .4); stroke: #f0bc4a; }
.wind-field-hfw { fill: rgba(224, 100, 100, .4); stroke: #e06464; }

/* Watch/warning zones -- color comes from watchColor() inline per
   instance (severity, not an owning system), same split as wind-field. */
.watch-zone-fill { vector-effect: non-scaling-stroke; pointer-events: none; stroke-width: 2px; }

.fatal-error {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep); color: var(--danger); font-size: 14px; padding: 20px; text-align: center;
}

@media (max-width: 760px) {
  .content { position: relative; flex-direction: column; }
  /* General case (history.html/past.html's #history-list): a plain
     40%-height strip above the chart -- unchanged from before. Overridden
     below for index.html's #system-list specifically (an id selector
     always wins over this class one, regardless of source order). */
  .system-list { width: auto; flex: 0 0 40%; border-right: none; border-bottom: 1px solid var(--border); }
  .map-pane { flex: 1; margin: 14px; }
  .hero { flex-wrap: wrap; }
  .map-legend { gap: 10px; padding: 8px 10px; }
  .map-legend__swatches span { width: 15px; height: 15px; font-size: 8.5px; }
  .map-legend__watch-swatch { width: 15px; height: 15px; }
  .map-legend__watch-row-label { font-size: 9px; }
  .map-legend__watch-head { font-size: 8px; }

  .topbar__menu-toggle { display: flex; }
  .topbar__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-deep); border-bottom: 1px solid var(--border);
    padding: 8px 14px 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }
  .topbar__links.is-open { display: flex; }
  .topbar__link { padding: 10px 12px; border-radius: 10px; }

  .info-bar { flex-direction: column; align-items: stretch; gap: 6px; }
  .live-status-bar { margin-left: 0; padding-left: 0; border-left: none; padding-top: 6px; border-top: 1px solid var(--border); }
  .activity-ticker__text, .live-status-bar__text { white-space: normal; }
  .discussion-callout--docked {
    top: 14px; left: 14px; right: 14px; bottom: auto;
    max-width: none; max-height: 50%;
  }

  /* Live map only. The map goes full-bleed (.map-pane only ever appears
     on index.html, so no scoping needed here beyond that); #system-list
     becomes a bottom sheet over it instead of a permanent 40%-height
     strip, collapsed to just its handle by default and sliding up when
     tapped -- see main.js's systemListExpanded wiring, which also auto-
     collapses it on selecting a system or tapping the map outside it. */
  .map-pane { position: absolute; inset: 0; margin: 10px; flex: none; }
  /* Lifted clear of #system-list's own 56px collapsed handle just below
     (14px original gap + 56px handle) -- pre-existing overlap that only
     ever mattered cosmetically before (a 3rd legend group wrapping below
     the visible fold was still just a static color key), now a real bug
     since that group's title is a click target (the watch/warning
     collapse toggle just above). */
  .map-legend { bottom: 70px; }
  #system-list {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    flex: none; width: auto; max-height: 75vh;
    border-bottom: none; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; z-index: 15;
    background: rgba(4, 12, 24, 0.97);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
    transform: translateY(calc(100% - 56px));
    transition: transform .28s ease;
  }
  #system-list.is-expanded { transform: translateY(0); }

  .system-list__handle {
    position: relative; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; height: 56px; margin: 0 -14px; padding: 0 14px;
    background: none; border: none; border-bottom: 1px solid var(--border);
    color: var(--text); font: inherit; font-weight: 700; font-size: 12.5px;
    cursor: pointer;
  }
  .system-list__handle::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px; background: var(--border);
  }
}

/* Small-phone tightening -- everything above already reads fine down to
   760px; this covers the genuinely cramped case below it (most phones'
   own CSS viewport width is well under 430px, so 480px catches all of
   them with margin, while staying clearly distinct from the 760/860px
   tiers above -- see history.css's own comment on why 860 isn't 760 for
   the same "pick a number for a specific, different reason" precedent). */
@media (max-width: 480px) {
  .hero__brand h1 { font-size: 16px; }
  .hero__brand p { font-size: 11px; }
  /* Icon-only wordmark -- frees up room in the brand+hamburger row, which
     is the tightest horizontal squeeze on the page at this width. */
  .topbar__name { display: none; }
  .map-legend { gap: 8px; padding: 7px 9px; }
  .map-legend__title { font-size: 9px; }
  .map-legend__swatches span { width: 13px; height: 13px; font-size: 7.5px; }
  .map-legend__watch-swatch { width: 13px; height: 13px; }
  .map-legend__watch-row-label { font-size: 8px; }
  .map-legend__watch-head { font-size: 7px; }
  .system-card__summary { padding: 11px 12px; }
  .system-card__detail { padding: 0 12px 12px; }
}