/* weather-periscope layout — sits on top of doppler-news-theme.css */

html, body { height: 100%; }
body { margin: 0; }

.wx-app {
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100vh;
  min-height: 100vh;
  gap: 0;
}

/* ── Header / chrome ──────────────────────────────────────────────── */

.wp-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding: 14px 24px 18px;
  border-bottom: 1px solid var(--wx-border-bright);
}

.wp-header-titles { min-width: 0; }
.wp-header-titles .wx-title { font-size: 28px; }

.wp-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wp-actions .wx-btn {
  font-size: 10px;
  letter-spacing: 2px;
  padding: 8px 14px;
}

/* ── Status bar ───────────────────────────────────────────────────── */

.wp-status {
  padding: 8px 24px;
  border-bottom: 1px solid var(--wx-border);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--wx-text-dim);
}

.wp-status .wp-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wp-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--wx-blue);
  box-shadow: var(--wx-glow-blue);
  animation: wp-pulse 1.6s ease-in-out infinite;
}
.wp-status-dot.wp-green  { background: var(--wx-green);  box-shadow: var(--wx-glow-green); }
.wp-status-dot.wp-yellow { background: var(--wx-yellow); box-shadow: var(--wx-glow-yellow); }
.wp-status-dot.wp-red    { background: var(--wx-red);    box-shadow: var(--wx-glow-red); }
.wp-status-dot.wp-orange { background: var(--wx-orange); box-shadow: var(--wx-glow-orange); }

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

/* ── Main: cinema map + local column ──────────────────────────────── */

.wp-main {
  display: grid;
  grid-template-columns: 1fr 400px;
  min-height: 0;       /* let children scroll within their cells */
  border-bottom: 1px solid var(--wx-border);
}

.wp-cinema {
  position: relative;
  background: var(--wx-bg-2);
  border-right: 1px solid var(--wx-border);
  min-height: 0;
}

#wp-map {
  position: absolute;
  inset: 0;
}

.wp-cinema-overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 500;     /* above leaflet tiles, below leaflet popups (700) */
  pointer-events: none;
}

.wp-cinema-badge {
  pointer-events: auto;
  font-family: var(--wx-font-display);
  font-size: 10px;
  letter-spacing: 3px;
  padding: 6px 10px;
  background: rgba(3, 8, 26, 0.85);
  border: 1px solid var(--wx-border-bright);
  color: var(--wx-blue-bright);
  text-shadow: var(--wx-glow-blue);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Local column ─ stack of panels with internal scroll.
   `flex-shrink: 0` on children is load-bearing: without it, flex would shrink
   panels below their content height and `.wx-panel { overflow: hidden }` would
   clip the temp/icon block. Let overflow-y handle real overflow instead. */
.wp-local {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 14px;
  overflow-y: auto;
  min-height: 0;
  background: var(--wx-bg);
}
.wp-local > * { flex-shrink: 0; }

/* Each section heading should hug its own content (small gap below) and have
   clear separation from the section above (big gap). The theme's
   .wx-section-header has margin-bottom:20px which inverted this — kill it
   here, then use a negative margin-top on the element directly after a
   heading to draw it close. */
.wp-local .wx-section-header { margin-bottom: 0; }
.wp-local .wx-section-header + * { margin-top: -12px; }

.wp-local .wp-local-section { display: flex; flex-direction: column; gap: 8px; }

/* compact 5-day row — narrow cards, vertically stacked temps so triple-digits fit */
.wp-local .wx-forecast-row { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.wp-local .wx-forecast-card { padding: 10px 4px; min-width: 0; }
.wp-local .wx-fc-day { font-size: 10px; letter-spacing: 1.5px; margin-bottom: 4px; }
.wp-local .wx-fc-icon { width: 36px; height: 36px; margin: 4px auto; }
.wp-local .wx-fc-condition { font-size: 8.5px; letter-spacing: 0.5px; margin-bottom: 4px; }
.wp-local .wx-fc-temps {
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.wp-local .wx-fc-high { font-size: 14px; }
.wp-local .wx-fc-low  { font-size: 11px; }
.wp-local .wx-fc-precip { font-size: 8.5px; letter-spacing: 0.5px; margin-top: 4px; }

/* ── TEMP SCALE TOGGLES ───────────────────────────────────────── */

.wp-units {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}
.wp-unit {
  font-family: var(--wx-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 7px 0;
  background: rgba(0, 184, 230, 0.05);
  border: 1px solid var(--wx-border);
  color: var(--wx-text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, text-shadow 0.15s;
}
.wp-unit:hover {
  color: var(--wx-text);
  background: rgba(0, 184, 230, 0.12);
  border-color: var(--wx-border-bright);
}
.wp-unit-active {
  background: rgba(255, 208, 0, 0.15);
  border-color: var(--wx-yellow);
  color: var(--wx-yellow);
  text-shadow: 0 0 6px rgba(255, 208, 0, 0.6);
}

/* ── STATION TUNER ────────────────────────────────────────────── */

.wp-tuner { display: flex; flex-direction: column; gap: 4px; position: relative; }

.wp-tuner-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: stretch;
}

.wp-input {
  background: rgba(0, 184, 230, 0.05);
  border: 1px solid var(--wx-border-bright);
  color: var(--wx-text);
  font-family: var(--wx-font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 10px;
  outline: none;
  text-transform: uppercase;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wp-input:focus {
  border-color: var(--wx-yellow);
  box-shadow: 0 0 0 1px var(--wx-yellow), 0 0 12px rgba(255, 208, 0, 0.25);
}
.wp-input::placeholder { color: var(--wx-text-dim); letter-spacing: 2px; }

.wp-tuner #wp-tuner-locate { padding: 6px 10px; font-size: 10px; letter-spacing: 1.5px; }

.wp-tuner-results {
  border: 1px solid var(--wx-border-bright);
  background: var(--wx-panel);
  max-height: 220px;
  overflow-y: auto;
}
.wp-tuner-result {
  padding: 7px 10px;
  cursor: pointer;
  font-size: 10.5px;
  border-bottom: 1px solid var(--wx-border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  letter-spacing: 1px;
}
.wp-tuner-result:last-child { border-bottom: none; }
.wp-tuner-result:hover,
.wp-tuner-result.wp-tuner-result-active {
  background: rgba(0, 184, 230, 0.12);
  color: var(--wx-yellow);
}
.wp-tuner-result-place { font-weight: 600; }
.wp-tuner-result-meta  { color: var(--wx-text-dim); font-size: 9.5px; }
.wp-tuner-empty {
  padding: 10px;
  text-align: center;
  color: var(--wx-text-dim);
  font-size: 10px;
  letter-spacing: 2px;
}

.wp-tuner-status {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--wx-orange);
  padding: 4px 2px;
}

/* current-conditions: icon+temp on the left, 2×2 field readouts on the right */
.wp-current {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
}
.wp-current-hero {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wp-current-hero-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  color: var(--wx-yellow);
}
.wp-current-hero-icon svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 10px currentColor);
  display: block;
}
.wp-current .wp-temp {
  font-family: var(--wx-font-display);
  font-weight: 900;
  color: var(--wx-yellow);
  text-shadow: var(--wx-glow-yellow);
  font-size: 40px;
  line-height: 1;
  white-space: nowrap;
}
.wp-current .wp-temp-deg { font-size: 22px; vertical-align: top; opacity: 0.75; }
.wp-current .wp-temp-unit { font-size: 12px; letter-spacing: 2px; color: var(--wx-blue-dim); margin-left: 3px; }

.wp-current-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 8px;
  align-content: center;
}
.wp-current-fields .wx-field { padding: 6px 8px; }
.wp-current-fields .wx-field-label { font-size: 9px; letter-spacing: 1.5px; margin-bottom: 2px; }
.wp-current-fields .wx-field-value { font-size: 11px; }

/* atmospheric stat bars use theme classes; we just need spacing */
.wp-stats { padding: 8px 14px; }
.wp-stats .wx-stat-row { margin: 6px 0; }

/* ── Active events table ──────────────────────────────────────────── */

.wp-events {
  padding: 8px 24px 14px;
  max-height: 28vh;
  overflow-y: auto;
}
.wp-events .wx-table {
  font-size: 11px;
  width: 100%;
  border-collapse: collapse;
}
.wp-events .wp-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--wx-text-dim);
  font-size: 11px;
  letter-spacing: 3px;
}

.wp-row-crit  td { color: var(--wx-magenta); }
.wp-row-high  td { color: var(--wx-orange); }
.wp-row-med   td { color: var(--wx-yellow); }
.wp-row-low   td { color: var(--wx-blue); }

/* ── Leaflet tweaks to fit the broadcast palette ──────────────────── */

.leaflet-container {
  background: var(--wx-bg);
  font-family: var(--wx-font-mono);
}

.leaflet-control-zoom a,
.leaflet-control-attribution {
  background: rgba(3, 8, 26, 0.85) !important;
  color: var(--wx-blue-bright) !important;
  border-color: var(--wx-border-bright) !important;
  font-family: var(--wx-font-mono) !important;
}
.leaflet-control-zoom a { text-shadow: var(--wx-glow-blue); }
.leaflet-control-attribution a { color: var(--wx-blue) !important; }

/* storm map markers — divIcon-driven */

.wp-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.wp-marker-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--wx-blue);
  box-shadow: 0 0 10px currentColor;
  border: 2px solid rgba(0,0,0,0.6);
}
.wp-marker-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-family: var(--wx-font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 1px 5px;
  background: rgba(3, 8, 26, 0.9);
  border: 1px solid currentColor;
}

.wp-marker-crit { color: var(--wx-magenta); }
.wp-marker-crit .wp-marker-dot { background: var(--wx-magenta); animation: wp-pulse-strong 1.2s ease-in-out infinite; }

.wp-marker-high { color: var(--wx-orange); }
.wp-marker-high .wp-marker-dot { background: var(--wx-orange); animation: wp-pulse 1.6s ease-in-out infinite; }

.wp-marker-med  { color: var(--wx-yellow); }
.wp-marker-med  .wp-marker-dot { background: var(--wx-yellow); }

.wp-marker-low  { color: var(--wx-blue-bright); }
.wp-marker-low  .wp-marker-dot { background: var(--wx-blue-bright); }

/* Ambient seismic — hollow white ring (no fill), distinct from any filled
   storm/precipitation marker. White avoids the doppler precipitation palette. */
.wp-marker-seismic { color: #FFFFFF; }
.wp-marker-seismic .wp-marker-dot {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.4), inset 0 0 3px rgba(255, 255, 255, 0.15);
  opacity: 0.8;
}
.wp-marker-seismic:hover .wp-marker-dot {
  opacity: 1;
  border-color: var(--wx-yellow);
  box-shadow: 0 0 14px var(--wx-yellow), inset 0 0 5px rgba(255, 208, 0, 0.35);
}

@keyframes wp-pulse-strong {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

.wp-popup {
  font-family: var(--wx-font-mono);
  font-size: 11px;
  color: var(--wx-text);
}
.wp-popup-title {
  font-family: var(--wx-font-display);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--wx-yellow);
  text-shadow: var(--wx-glow-yellow);
  margin-bottom: 4px;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: rgba(3, 8, 26, 0.95) !important;
  color: var(--wx-text) !important;
  border: 1px solid var(--wx-border-bright);
  border-radius: 0 !important;
}

/* ── BTN hover used by chrome ─────────────────────────────────────── */

.wp-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Fallback when local data not yet loaded ──────────────────────── */

.wp-loading {
  padding: 24px 14px;
  text-align: center;
  color: var(--wx-text-dim);
  font-size: 11px;
  letter-spacing: 3px;
  font-family: var(--wx-font-display);
}

/* ── Smaller viewports — minimal stacking, no full mobile design ──── */

@media (max-width: 900px) {
  .wx-app { height: auto; min-height: 100vh; }
  .wp-main { grid-template-columns: 1fr; }
  .wp-cinema { border-right: none; border-bottom: 1px solid var(--wx-border); min-height: 60vh; }
  .wp-local { max-height: none; overflow: visible; }
  .wp-events { max-height: none; padding: 8px 14px 14px; overflow-x: auto; }
  .wp-events .wx-table { min-width: 560px; }   /* keep table readable, allow horizontal scroll */

  .wp-header { grid-template-columns: 1fr; gap: 10px; padding: 10px 14px 14px; }
  .wp-header-titles .wx-title { font-size: 22px; letter-spacing: 3px; }
  .wp-actions { justify-self: stretch; flex-wrap: wrap; }
  .wp-actions .wx-btn { flex: 1 1 auto; justify-content: center; }
  .wp-status { padding: 8px 14px; gap: 10px; font-size: 9px; }
}

@media (max-width: 480px) {
  .wp-cinema { min-height: 50vh; }
  .wp-local .wx-forecast-card { padding: 8px 3px; }
  .wp-local .wx-fc-icon { width: 28px; height: 28px; }
  .wp-local .wx-fc-day { font-size: 9px; }
}