/* ╔══════════════════════════════════════════════════════════════════════╗
 * WEATHER NOC — Dark operations-center styling
 *
 * Palette:
 *   bg-0    #050810   page bg (near-black)
 *   bg-1    #0a1020   panels
 *   bg-2    #111a2e   nested cards
 *   border  #1a2540   hairlines
 *   ink-0   #e6ecff   primary text
 *   ink-1   #93a3c4   secondary text
 *   ink-2   #5d6e8e   tertiary / labels
 *   accent  #4fc3f7   cyan (radar / water)
 *   accent2 #ffb300   amber (warnings)
 *   danger  #ff5252   red (severe alerts)
 *   good    #4caf50   green (ok status)
 *
 * The vibe is "Bloomberg terminal meets storm chaser dashboard":
 * monospace metadata, dense data, hairline borders, no rounded corners,
 * subtle scanline animation, glowing accents.
 * ╚══════════════════════════════════════════════════════════════════════╝ */

:root {
  --bg-0: #050810;
  --bg-1: #0a1020;
  --bg-2: #111a2e;
  --border: #1a2540;
  --border-2: #243356;
  --ink-0: #e6ecff;
  --ink-1: #93a3c4;
  --ink-2: #5d6e8e;
  --accent: #4fc3f7;
  --accent-dim: #1a4d6b;
  --accent2: #ffb300;
  --danger: #ff5252;
  --good: #4caf50;
  --severe: #ff8a00;
  --warn-bg: rgba(255, 179, 0, 0.08);
  --severe-bg: rgba(255, 82, 82, 0.10);
  --extreme-bg: rgba(255, 82, 82, 0.22);
}

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

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* mono for numeric metadata */
.mono, .meta-value, .bs-card-header, .rail-card-header,
.layer-panel-header, .modal-header, .noc-footer, .status-pill,
.radar-time, .legend-row, .bs-tile-num, .alert-headline,
.bs-tile-label, .current-temp {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
}

body {
  display: grid;
  grid-template-rows: 64px 1fr 220px 28px;
  grid-template-columns: 100%;
}

/* ─── HEADER ───────────────────────────────────────────────────────────── */
.noc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(180deg, #0a1020 0%, #050810 100%);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.noc-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: 0.4;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px var(--accent));
  animation: pulse 2.4s ease-in-out infinite;
}
.brand-title { font-size: 18px; font-weight: 700; letter-spacing: 2px; color: var(--ink-0); }
.brand-subtitle { font-size: 11px; color: var(--ink-2); letter-spacing: 1px; }

.header-meta { display: flex; gap: 26px; align-items: center; }
.meta-item { text-align: right; }
.meta-label { font-size: 9px; color: var(--ink-2); letter-spacing: 1.5px; margin-bottom: 2px; }
.meta-value { font-size: 15px; color: var(--ink-0); letter-spacing: 1px; }

.status-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-2);
  box-shadow: 0 0 6px var(--ink-2);
}
.status-pill.ok .status-dot { background: var(--good); box-shadow: 0 0 8px var(--good); animation: pulse 2s infinite; }
.status-pill.warn .status-dot { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); animation: pulse 1s infinite; }
.status-pill.err .status-dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: pulse 0.6s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── MAIN ─────────────────────────────────────────────────────────────── */
.noc-main {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}

.map-col {
  position: relative;
  background: var(--bg-1);
}
#map {
  position: absolute;
  inset: 0;
  background: #050810;
}
/* override Leaflet defaults to feel NOC */
.leaflet-container {
  background: #050810;
  font-family: 'JetBrains Mono', monospace;
}
.leaflet-control-attribution {
  background: rgba(10, 16, 32, 0.85) !important;
  color: var(--ink-2) !important;
  font-size: 9px !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-control-zoom a {
  background: var(--bg-2) !important;
  color: var(--ink-0) !important;
  border: 1px solid var(--border-2) !important;
}
/* Push the zoom +/- controls below the layer panel at desktop widths so
 * they don't sit on top of the layer toggles. At desktop the layer panel
 * is 200px wide × ~360px tall starting at (14, 14), so the zoom control
 * needs to start at y ≈ 380. We do this by moving .leaflet-top.leaflet-left
 * down to ~390px via a transform — Leaflet's CSS uses absolute positioning
 * from top, so we offset with translateY. */
.leaflet-top.leaflet-left { transform: translateY(388px); }
/* On phones the layer panel collapses to a 44×44 ≡ button, so zoom controls
 * can move back up — but only enough to clear the collapsed button. When the
 * panel is tapped open (.leaflet-controls-shifted, set by JS in app.js's
 * setupLayerPanelToggle), we push the controls down past the expanded panel
 * (~290px tall). Without this second rule, the +/− buttons sit on top of
 * the LAYERS header when the mobile panel is open. */
@media (max-width: 700px) {
  .leaflet-top.leaflet-left { transform: translateY(56px); }
  .leaflet-top.leaflet-left.leaflet-controls-shifted { transform: translateY(310px); }
}

/* ─── Layer panel ──────────────────────────────────────────────────────── */
.layer-panel {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 500;
  background: rgba(10, 16, 32, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-2);
  padding: 10px 12px;
  width: 200px;
  font-size: 11px;
  letter-spacing: 1px;
}
.layer-panel-header {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.layer-panel-divider {
  height: 1px;
  background: var(--border);
  margin: 10px -12px;
}
.layer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--ink-1);
  user-select: none;
}
.layer-toggle input[type="checkbox"] {
  appearance: none;
  width: 14px; height: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  cursor: pointer;
  position: relative;
}
.layer-toggle input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.layer-toggle input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: -3px; left: 1px;
  color: var(--bg-0);
  font-size: 12px;
  font-weight: 700;
}
.layer-toggle:hover span { color: var(--ink-0); }

.radar-time {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-0);
  margin: 6px 0;
  letter-spacing: 2px;
}
#radar-scrub {
  width: 100%;
  accent-color: var(--accent);
  margin: 6px 0 10px;
}
.radar-legend {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  font-size: 9px;
  color: var(--ink-2);
}
.legend-row {
  display: flex; align-items: center; gap: 8px;
}
.legend-row .dot {
  width: 12px; height: 12px; display: inline-block;
  border: 1px solid var(--border-2);
}
.dot.d-1 { background: #4caf50; }
.dot.d-2 { background: #ffc107; }
.dot.d-3 { background: #ff9800; }
.dot.d-4 { background: #f44336; }
.dot.d-5 { background: #b71c1c; }

/* Radar playback controls (play/pause, NOW jump, speed presets). */
.radar-controls {
  display: flex; align-items: center; gap: 4px;
  margin-top: 6px; margin-bottom: 4px;
  flex-wrap: wrap;
}
.radar-btn {
  background: rgba(10, 16, 32, 0.6);
  border: 1px solid var(--border-2);
  color: var(--accent);
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.radar-btn:hover { background: rgba(76, 175, 80, 0.18); color: #fff; }
.radar-btn.playing { background: var(--accent); color: #0a1020; }
.radar-btn-now { font-size: 9px; padding: 4px 6px; }
.radar-speeds { display: flex; gap: 2px; margin-left: auto; }
.radar-speed {
  background: rgba(10, 16, 32, 0.6);
  border: 1px solid var(--border-2);
  color: var(--ink-2);
  font-size: 9px;
  padding: 4px 5px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  min-width: 24px;
}
.radar-speed:hover { color: var(--ink-0); }
.radar-speed.active { color: var(--accent); border-color: var(--accent); }

/* Saved-locations search bar: pin/dropdown/input/+ buttons. */
.search-bar {
  display: flex; align-items: stretch; gap: 4px;
}
.saved-btn {
  background: rgba(10, 16, 32, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-2);
  color: var(--accent);
  padding: 0 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  font-family: inherit;
}
.saved-btn:hover { color: #fff; border-color: var(--accent); }
.saved-btn.home-active { color: var(--accent2); }
.search-bar #search-input {
  flex: 1; min-width: 0;
  border-left: none; border-right: none;
}
.saved-dropdown {
  background: rgba(10, 16, 32, 0.95);
  border: 1px solid var(--border-2);
  border-top: none;
  max-height: 240px;
  overflow-y: auto;
}
.saved-dropdown-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--ink-0);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
.saved-dropdown-row:hover { background: rgba(76, 175, 80, 0.1); }
.saved-dropdown-row.home { border-left: 2px solid var(--accent2); }
.saved-dropdown-row .saved-name { flex: 1; }
.saved-dropdown-row .saved-coord { font-size: 10px; color: var(--ink-2); }
.saved-dropdown-row .saved-del {
  background: none; border: none; color: var(--ink-2);
  cursor: pointer; padding: 2px 6px; font-size: 14px;
}
.saved-dropdown-row .saved-del:hover { color: var(--accent2); }
.saved-dropdown-empty {
  padding: 16px; text-align: center;
  color: var(--ink-2); font-size: 11px; font-family: 'JetBrains Mono', monospace;
}

/* ─── Search panel ─────────────────────────────────────────────────────── */
.search-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 500;
  width: 280px;
}
#search-input {
  width: 100%;
  background: rgba(10, 16, 32, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-2);
  padding: 10px 12px;
  color: var(--ink-0);
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  outline: none;
}
#search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-dim);
}
#search-results {
  background: rgba(10, 16, 32, 0.95);
  border: 1px solid var(--border-2);
  border-top: none;
  max-height: 280px;
  overflow-y: auto;
  display: none;
}
#search-results.open { display: block; }
.search-result {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.search-result:hover { background: var(--bg-2); color: var(--accent); }
.search-result-name { color: var(--ink-0); font-weight: 600; }
.search-result-meta { color: var(--ink-2); font-size: 10px; margin-top: 2px; }

/* ─── Right rail ───────────────────────────────────────────────────────── */
.rail {
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  overflow: hidden;
}
.rail-card {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.rail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 2px;
  flex-shrink: 0;
}
.rail-card-count {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 1px 8px;
  font-size: 10px;
  min-width: 20px;
  text-align: center;
}
.rail-card-count.has-alerts {
  background: var(--danger);
  color: white;
  animation: pulse 1.6s infinite;
}
.rail-card-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px;
  min-height: 0;
}
.empty-state {
  color: var(--ink-2);
  font-size: 11px;
  padding: 16px 8px;
  text-align: center;
  font-style: italic;
}

/* alerts list */
.alert-row {
  background: var(--bg-2);
  border-left: 3px solid var(--ink-2);
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.alert-row:hover { background: var(--border); }
.alert-row.severity-Extreme  { border-left-color: #b71c1c; background: var(--extreme-bg); }
.alert-row.severity-Severe   { border-left-color: var(--danger); background: var(--severe-bg); }
.alert-row.severity-Moderate { border-left-color: var(--accent2); background: var(--warn-bg); }
.alert-row.severity-Minor    { border-left-color: var(--accent); }
.alert-event {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.alert-severity-badge {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 1px;
  background: var(--ink-2);
  color: var(--bg-0);
}
.severity-Extreme .alert-severity-badge { background: #b71c1c; color: white; }
.severity-Severe  .alert-severity-badge { background: var(--danger); color: white; }
.severity-Moderate .alert-severity-badge { background: var(--accent2); color: var(--bg-0); }
.severity-Minor    .alert-severity-badge { background: var(--accent); color: var(--bg-0); }
.alert-area { font-size: 11px; color: var(--ink-1); margin-bottom: 4px; }
.alert-expires {
  font-size: 9px;
  color: var(--ink-2);
  letter-spacing: 1px;
  margin-top: 4px;
}
.alert-headline { font-size: 10px; color: var(--ink-2); }

/* click card */
.click-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.click-station {
  background: var(--bg-2);
  padding: 8px 10px;
  border-left: 2px solid var(--accent);
  margin-bottom: 8px;
}
.click-station-name {
  font-size: 12px;
  color: var(--ink-0);
  font-weight: 600;
}
.click-station-meta {
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
}
.click-station-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}
.click-station-grid > div {
  background: var(--bg-1);
  padding: 4px 6px;
}
.click-station-grid .lbl { color: var(--ink-2); font-size: 9px; }
.click-station-grid .val { color: var(--ink-0); }

.click-feed-section {
  margin-top: 10px;
}
.click-feed-section-title {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.click-feed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-2);
  margin-bottom: 4px;
  cursor: pointer;
  border-left: 2px solid transparent;
  font-size: 11px;
}
.click-feed:hover {
  border-left-color: var(--accent);
  background: var(--border);
}
.click-feed-type {
  font-size: 9px;
  color: var(--accent);
  width: 60px;
  letter-spacing: 1px;
}
.click-feed-name { color: var(--ink-0); flex: 1; }
.click-feed-dist {
  font-size: 9px;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Bottom strip ─────────────────────────────────────────────────────── */
.bottom-strip {
  display: grid;
  /* minmax(0, ...) lets each track shrink below its content's intrinsic
   * minimum width, so the strip always fits the viewport. Without this,
   * the HOURLY card's 24 fixed-width hour cells (60px each = 1440px) blow
   * the grid out to 1464px, pushing the 7-DAY and SYSTEM cards past the
   * right edge and clipping them off-screen. The four cards are sized as:
   * CURRENT (1fr, ~187px), HOURLY (1.4fr), DAILY (1.6fr — widest, 7 cells),
   * SYSTEM (0.6fr, narrow). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 0.6fr);
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}
.bs-card {
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* min-width: 0 lets the card's children shrink so the grid track doesn't
   * get pushed out by inner content (esp. the hourly strip). */
  min-width: 0;
  overflow: hidden;
}
.bs-card-header {
  padding: 8px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 2px;
  flex-shrink: 0;
}
.bs-card-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  min-height: 0;
}

/* current conditions */
.current-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  height: 100%;
}
.current-temp {
  font-size: 48px;
  font-weight: 200;
  color: var(--ink-0);
  line-height: 1;
}
.current-temp sup { font-size: 16px; vertical-align: top; color: var(--accent); }
.current-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
}
.current-meta-row { display: flex; justify-content: space-between; }
.current-meta-row .lbl { color: var(--ink-2); }
.current-meta-row .val { color: var(--ink-0); }
.current-desc {
  font-size: 13px;
  color: var(--ink-1);
  margin-top: 6px;
  text-transform: capitalize;
}
.current-loc {
  font-size: 10px;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
  letter-spacing: 1px;
}

/* hourly strip */
.hourly-strip {
  display: flex;
  gap: 0;
  /* Horizontal scroll when 24 × 60px cells overflow the card width. The
   * parent grid already constrains us via minmax(0, 1.4fr), so this just
   * gives users a way to scrub through every hour without blowing the page
   * out horizontally. */
  overflow-x: auto;
  height: 100%;
  align-items: stretch;
}
.hour-cell {
  flex: 0 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-right: 1px solid var(--border);
  font-size: 10px;
}
.hour-time { color: var(--ink-2); font-family: 'JetBrains Mono', monospace; }
.hour-precip { font-size: 9px; color: var(--accent); }
.hour-temp { font-size: 14px; color: var(--ink-0); font-family: 'JetBrains Mono', monospace; }
.hour-icon { font-size: 18px; }
.hour-precip.hi { color: var(--accent2); font-weight: 700; }
.hour-wind { font-size: 9px; color: var(--ink-2); font-family: 'JetBrains Mono', monospace; }

/* daily cards */
.daily-strip {
  display: grid;
  /* minmax(0, 1fr) lets each day cell shrink below its content's intrinsic
   * width (emoji + hi/lo + %), so the 7-DAY card stays inside its grid
   * track even when the column itself is narrow. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  height: 100%;
}
.day-cell {
  background: var(--bg-2);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--accent-dim);
}
.day-cell.today { border-top-color: var(--accent); }
.day-name { font-size: 10px; color: var(--ink-2); letter-spacing: 1.5px; }
.day-icon { font-size: 22px; margin: 2px 0; }
.day-high { font-size: 14px; color: var(--ink-0); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.day-low  { font-size: 11px; color: var(--ink-1); font-family: 'JetBrains Mono', monospace; }
.day-precip {
  font-size: 9px;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}
.day-precip.hi { color: var(--accent2); font-weight: 700; }
/* Sunrise/sunset rendered as compact monospace strings per day-cell. */
.day-sun {
  font-size: 9px;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1.2;
}
.day-sun .sun-up { color: #ffb74d; }     /* sunrise: warm amber */
.day-sun .sun-dn { color: #7986cb; }     /* sunset: cool indigo  */
/* "Where is the sun right now" marker — orange dot for daylight, dim for night.
   Renders as a 4px circle inline with the day-sun line. */
.day-sun .sun-now {
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; margin: 0 3px;
  vertical-align: middle;
  background: #ffb74d;
  box-shadow: 0 0 6px #ffb74d;
}
.day-sun .sun-now.night { background: #455a64; box-shadow: none; }

/* meta */
.meta-table {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.7;
}
.meta-table .lbl { color: var(--ink-2); }
.meta-table .val { color: var(--ink-0); float: right; }
.meta-table .val.ok { color: var(--good); }
.meta-table .val.warn { color: var(--accent2); }

/* ─── Modal ────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The HTML `hidden` attribute must always win — CSS `display: flex` above
 * would otherwise force the backdrop to stay visible even when `hidden=true`.
 * This is the reason the × button on mobile never closed the modal. */
.modal-backdrop[hidden] { display: none !important; }
.modal {
  background: var(--bg-1);
  border: 1px solid var(--border-2);
  width: min(960px, 92vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(79, 195, 247, 0.3);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 2px;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--ink-1);
  width: 28px; height: 28px;
  font-size: 20px;
  cursor: pointer;
  font-family: inherit;
}
.modal-close:hover { color: var(--danger); border-color: var(--danger); }
.modal-body {
  flex: 1;
  overflow: auto;
  padding: 0;
}
.modal-body iframe, .modal-body img {
  width: 100%;
  height: 540px;
  border: none;
  background: black;
  display: block;
}
/* Offline-feed fallback shown when the channel isn't broadcasting live. */
.offline-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 540px;
  padding: 32px;
  text-align: center;
  background: var(--bg-0);
  gap: 12px;
}
.offline-icon { font-size: 56px; opacity: 0.55; }
.offline-headline {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink-0);
  font-family: 'JetBrains Mono', monospace;
}
.offline-meta {
  font-size: 12px;
  color: var(--ink-1);
  max-width: 460px;
  line-height: 1.6;
}
.offline-cta {
  margin-top: 12px;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.15s;
}
.offline-cta:hover {
  background: var(--accent);
  color: var(--bg-0);
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
.noc-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  font-size: 9px;
  color: var(--ink-2);
  letter-spacing: 1px;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Scrollbars ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--border-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ─── Responsive collapse ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  body { grid-template-rows: 64px 1fr 28px; }
  .noc-main { grid-template-columns: 1fr; grid-template-rows: 60vh 1fr; }
  .rail { max-height: 50vh; flex-direction: row; }
  .rail-card { flex: 1 1 0; min-height: 0; }
  .bottom-strip { display: none; }
  /* On tablets/small screens: explicit height so #map can fill its container.
     Without this, .map-col has no intrinsic height and Leaflet's
     `position:absolute; inset:0` collapses to zero — hence an empty map. */
  .map-col { min-height: 60vh; }

  /* Header meta compresses: drop the two least-essential clocks, shrink gaps.
     Otherwise the brand + 6 meta items overflow the 64px row and overlap. */
  .header-meta { gap: 14px; }
  .meta-item.utc, .meta-item.local { display: none; }
  .status-pill { padding: 4px 10px; font-size: 10px; }
}
@media (max-width: 820px) {
  /* Even more aggressive: keep ONLY last-refresh + status. */
  .header-meta { gap: 10px; }
  .meta-item.next { display: none; }
  .brand-subtitle { display: none; }
  .noc-header { padding: 0 12px; }
}
@media (max-width: 700px) {
  .header-meta { gap: 8px; }
  .meta-label { font-size: 8px; }
  .meta-value { font-size: 12px; }
  .meta-item.refresh .meta-label { display: none; }
  .noc-header { gap: 8px; }
  /* Collapse the layer panel into a small toggle button so it doesn't fight
     the search input for horizontal space at phone widths. */
  .layer-panel {
    width: 44px; height: 44px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: width 0.2s, height 0.2s, padding 0.2s;
  }
  .layer-panel > * { display: none; }
  .layer-panel::before {
    content: "≡";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 22px;
    color: var(--accent);
  }
  .layer-panel.expanded {
    width: calc(100vw - 24px);
    height: auto;
    padding: 10px 12px;
    z-index: 600;
  }
  .layer-panel.expanded > * { display: revert; }
  .layer-panel.expanded::before { display: none; }
  /* Stack the search panel below the collapsed layer button to avoid collision. */
  .search-panel { width: calc(100vw - 24px); top: 64px; }
  #search-input { font-size: 12px; padding: 8px 10px; }
  .noc-main { grid-template-rows: 50vh 1fr; }
  .map-col { min-height: 50vh; }
  .rail { flex-direction: column; max-height: 45vh; }
  .modal { width: 96vw; }
  .modal-body iframe, .modal-body img { height: 50vh; }
  .offline-card { height: 50vh; padding: 20px; }
}