/* ============================================================
   PORT ST. LUCIE WEATHER CENTER: command center cockpit
   Page-scoped styles for /command-center/ only, loaded after
   style.css. Reuses its tokens and the element hooks main.js
   already fills; changes nothing on any other page.
   Layout: the map is the whole background of the first screen,
   and every instrument floats above it as a panel inset from
   the viewport edges: the title and the headline feed along
   the top, conditions and alerts on the left, the forecast and
   the wire on the right, the layer switch along the bottom.
   Panels carry a full hairline border, never an edge accent.
   On a narrow screen the map keeps the first screen with the
   feed and the layer switch over it; the panels follow below.
   ============================================================ */

.cockpit-page { background: var(--navy-900); color: var(--gray-300); }

/* --- The stage: one screen under the nav, the map behind it all --- */
.cockpit-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) minmax(270px, 340px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "id     feed   feed"
    "left   .      right"
    "layers layers layers";
  gap: 14px;
  padding: 16px 20px 20px;
  height: calc(100vh - var(--nav-height));
  height: calc(100dvh - var(--nav-height));
  min-height: 600px;
  overflow: hidden;
  background: var(--navy-900);
}
.cockpit-map {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cockpit-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.hud-float { position: relative; z-index: 1; min-width: 0; }

/* Every floating panel: dark glass over the map, full hairline border */
.hud-plate,
.hud-tile,
.cockpit-feed {
  background: rgba(5, 13, 24, 0.86);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg);
}

/* --- Title plate (top left) --- */
.hud-id { grid-area: id; align-self: start; padding: 12px 16px 11px; }
.cockpit-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}
.cockpit-meta {
  margin-top: 3px;
  font-family: var(--font-condensed);
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}
.cockpit-meta .stamp { color: var(--teal-300); white-space: nowrap; }

/* --- Headline feed (top) --- */
.cockpit-feed {
  grid-area: feed;
  align-self: start;
  display: flex;
  align-items: stretch;
  height: 46px;
  overflow: hidden;
}
.feed-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--blue-600);
  color: var(--white);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.feed-window {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.feed-track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: ticker-scroll 110s linear infinite;
  will-change: transform;
}
.feed-track:hover,
.cockpit-feed:focus-within .feed-track,
.cockpit-feed.is-paused .feed-track { animation-play-state: paused; }
.feed-list { display: flex; align-items: center; }
.feed-list li { display: flex; align-items: center; white-space: nowrap; }
.feed-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 28px;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--white);
}
.feed-list a:hover,
.feed-list a:focus-visible { color: var(--teal-300); text-decoration: underline; }
.feed-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.feed-tag--hurricane { color: var(--alert-orange); }
.feed-tag--climate { color: var(--blue-300); }
.feed-tag--marine { color: var(--teal-300); }
.feed-tag--alert { color: #F87171; }
.feed-toggle {
  flex: 0 0 auto;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gray-300);
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.feed-toggle:hover,
.feed-toggle:focus-visible { color: var(--white); background: rgba(255, 255, 255, 0.12); }

/* --- Instrument columns (left and right flanks) ---
   Each column is only as tall as its panels, so the map stays
   reachable below them, and scrolls inside the stage when the
   screen is short. */
.hud-col {
  align-self: start;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-600) transparent;
}
.hud--left { grid-area: left; }
.hud--right { grid-area: right; }
.hud-tile {
  flex: 0 0 auto;
  padding: 14px 16px 16px;
}
.hud-title {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal-300);
  line-height: 1.2;
}
.hud-source {
  margin: 2px 0 12px;
  font-family: var(--font-condensed);
  font-size: 14px;
  color: var(--gray-500);
}
.hud-more {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  color: var(--blue-300);
}
.hud-more:hover,
.hud-more:focus-visible { color: var(--teal-300); text-decoration: underline; }

/* Conditions now */
.now-temp {
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.now-desc {
  margin: 6px 0 14px;
  font-size: 18px;
  color: var(--gray-300);
}
.now-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.now-grid > div { padding: 10px 12px; background: var(--navy-900); }
.now-grid dt {
  font-family: var(--font-condensed);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray-500);
}
.now-grid dd {
  font-size: 21px;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

/* Alerts: main.js writes .data-panel rows into #alerts-list */
.hud-alerts { display: grid; gap: 8px; }
.hud-alerts .data-panel { padding: 12px 14px; border-radius: var(--radius-sm); }
.hud-alerts .data-panel-title { margin-bottom: 4px; font-size: 13px; color: var(--gray-300); }
.hud-alerts .data-panel-sub { font-size: 14px; line-height: 1.45; }
.hud-waiting { font-size: 15px; color: var(--gray-500); }

/* Forecast: main.js writes eight .data-panel periods into #forecast-panels */
.hud-forecast {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.hud-forecast .data-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name temp" "sub sub";
  gap: 2px 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: var(--navy-900);
  text-align: left !important;
}
.hud-forecast .data-panel-title {
  grid-area: name;
  margin: 0;
  font-size: 14px;
  color: var(--gray-300);
}
.hud-forecast .data-panel-value { grid-area: temp; font-size: 22px; }
.hud-forecast .data-panel-value small { font-size: 13px; }
.hud-forecast .data-panel-sub { grid-area: sub; margin: 0; font-size: 14px; }

/* Wire: the existing .cmd-wire-* styles. On a wide screen the
   column scrolls as one, so the list gives up its own scroll. */
.hud-wire .cmd-wire-list { max-height: none; overflow: visible; margin: 0 -16px -16px; }
.hud-wire .cmd-wire-text { font-size: 14px; }

/* --- Layer switch (bottom centre) --- */
.hud-layers {
  grid-area: layers;
  justify-self: center;
  align-self: end;
  max-width: 100%;
  padding: 6px 6px 8px;
  text-align: center;
}
.layer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.layer-bar li { flex: 0 0 auto; }
.layer-bar a {
  display: block;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}
.layer-bar a:hover,
.layer-bar a:focus-visible { color: var(--white); background: rgba(255,255,255,0.08); }
.layer-bar a[aria-current="true"] { color: var(--navy-900); background: var(--teal-400); }
.map-credit {
  max-width: 76ch;
  margin: 6px auto 0;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray-500);
}

/* --- Below the cockpit: sources, then the rest of the site --- */
.cockpit-strip { padding: 22px 20px 30px; border-top: 1px solid rgba(255,255,255,0.08); }
.cockpit-strip .hud-title { margin-bottom: 12px; }
.strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.strip-grid li { display: flex; }
.strip-grid a {
  flex: 1 1 auto;
  display: block;
  padding: 12px 14px;
  background: var(--navy-900);
}
.strip-grid a strong {
  display: block;
  font-family: var(--font-condensed);
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--white);
}
.strip-grid a span { display: block; margin-top: 2px; font-size: 14px; color: var(--gray-400); }
.strip-grid a:hover strong,
.strip-grid a:focus-visible strong { color: var(--teal-300); }
.strip-grid + .hud-title { margin-top: 22px; }

/* --- Narrower screens: four panels floating over a narrow map
   would hide the radar they frame, so the map keeps the first
   screen with the title, feed and layer switch over it, and the
   instrument panels follow underneath. --- */
@media (max-width: 1099px) {
  .cockpit-stage {
    height: auto;
    min-height: 0;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(300px, 56vh) auto auto;
    grid-template-areas:
      "id     id"
      "feed   feed"
      "view   view"
      "layers layers"
      "left   right";
    gap: 12px;
    padding: 14px 16px 20px;
  }
  .cockpit-map {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1 / 5;
    margin: -14px -16px -12px;
  }
  .hud-id { justify-self: start; }
  .hud-col { max-height: none; overflow: visible; margin-top: 12px; }
  .hud-wire .cmd-wire-list { max-height: 420px; overflow-y: auto; }
}
@media (max-width: 767px) {
  .cockpit-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "feed" "view" "layers" "left" "right";
    padding: 12px 12px 18px;
  }
  .cockpit-map { margin: -12px -12px -12px; }
  .hud--right { margin-top: 0; }
  .cockpit-title { font-size: 19px; }
  .cockpit-strip { padding: 18px 16px 26px; }
  .now-temp { font-size: 54px; }
  .feed-list a { font-size: 15px; padding: 0 20px; }
  .hud-layers { justify-self: stretch; }
  .layer-bar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .layer-bar a { padding: 9px 11px; font-size: 14px; }
}

/* --- Moving text stops for readers who ask it to --- */
@media (prefers-reduced-motion: reduce) {
  .feed-track { animation: none; }
  .feed-window { overflow-x: auto; }
  .feed-list[aria-hidden="true"], .feed-toggle { display: none; }
}