/* ============================================================
   Snow Flow Co · Area page (map + conditions utility)
   /area/{stateSlug}/{areaSlug}/
   A snow-data utility, not a marketing page: near-black surfaces,
   restrained accent use, strong numeric hierarchy. Builds on
   tokens.css and reuses .sf-nav / .sf-footer / @keyframes sfPing
   from landing.css rather than redefining them.
   ============================================================ */

.area-page { background: var(--sf-page); }

.area-inner { max-width: 1108px; margin: 0 auto; padding: 0 36px; }

/* ── Nav breadcrumb: brand / state / current, inline in .sf-nav,
   matching River Flow Co's nav.css pattern (nav-sep/nav-state/
   nav-current) rather than a separate line in the hero band. ── */
.sf-nav-crumb-group { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sf-nav > div:last-child { flex-shrink: 0; }
.sf-nav-crumb-sep { font: 400 15px/1 var(--sf-sans); color: rgba(255, 255, 255, .3); flex-shrink: 0; }
.sf-nav-crumb-link, .sf-nav-crumb-current {
  font: 500 15px/1 var(--sf-serif); letter-spacing: -.01em; color: var(--sf-blue-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.sf-nav-crumb-link { text-decoration: none; }
.sf-nav-crumb-link:hover { color: #fff; }

/* ── Hero band: large title, Storm Recap ──────────────────── */
.area-hero-band {
  padding: 52px 0 48px;
  background: radial-gradient(ellipse 900px 480px at 15% -10%, rgba(44, 123, 229, .16), transparent 62%), var(--sf-page);
  border-bottom: 1px solid var(--sf-hairline);
}

.area-page-title {
  margin: 0; font: 400 clamp(46px, 6vw, 80px)/1.02 var(--sf-serif); letter-spacing: -.02em; color: #fff;
}
.area-page-title em { font-style: italic; color: var(--sf-blue-soft); }

/* ── Storm Recap: the "latest update" summary, the first real
   content on the page, sharing the hero band's background rather
   than sitting in its own card. ──────────────────────────────── */
.area-recap { margin-top: 26px; }
.storm-recap-empty { font: 400 16px/1.5 var(--sf-serif); font-style: italic; color: var(--sf-text-muted); }
.storm-recap-kicker { font: 800 11px/1 var(--sf-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--sf-blue-soft); }
.storm-recap-row { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.storm-recap-headline { flex: 1.6; min-width: 360px; margin: 0; font: italic 400 36px/1.32 var(--sf-serif); letter-spacing: -.01em; color: #fff; }
.storm-recap-headline-solo { margin-top: 14px; max-width: 720px; }
.storm-recap-total {
  flex: none; width: 250px; border-radius: 18px; padding: 22px 24px;
  background: linear-gradient(155deg, var(--sf-blue), var(--sf-blue-deep));
}
.storm-recap-total-label { font: 700 9px/1 var(--sf-sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.storm-recap-total-num { margin-top: 8px; font: 900 60px/1 var(--sf-sans); letter-spacing: -.03em; color: #fff; }
.storm-recap-total-num .unit { font-size: 19px; font-weight: 700; }
.storm-recap-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.storm-recap-tile { padding: 18px; border-radius: 14px; background: var(--sf-tile-fill); border: 1px solid var(--sf-tile-border); }
.storm-recap-tile.is-muted { border-style: dashed; background: transparent; }
.storm-recap-tile-label { font: 600 10px/1 var(--sf-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sf-text-muted); }
.storm-recap-tile-text { margin-top: 10px; font: 500 16px/1.35 var(--sf-sans); letter-spacing: -.01em; color: var(--sf-text-body); }
.storm-recap-tile.is-muted .storm-recap-tile-text { color: var(--sf-text-faint); font-style: italic; }
.storm-recap-meta { margin-top: 22px; font: 400 italic 15px var(--sf-serif); color: var(--sf-text-faint); }

/* ── Mobile compact summary (mobile only, sits before the map) ── */
.area-mobile-summary {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px 0 24px;
}
.area-mobile-stat {
  min-width: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--sf-card); border: 1px solid var(--sf-border);
}
.area-mobile-stat-label { font: 600 9px/1 var(--sf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-text-muted); }
.area-mobile-stat-val { margin-top: 6px; font: 800 22px/1 var(--sf-sans); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.area-mobile-stat-val .unit { font-size: 11px; font-weight: 700; color: var(--sf-text-label); letter-spacing: .06em; }

/* ── Hero: map + panel ────────────────────────────────────── */
.area-hero { padding: 36px 0 80px; background: var(--sf-section-alt); }
.area-hero-grid { display: grid; grid-template-columns: minmax(0, 1.66fr) minmax(320px, 1fr); gap: 24px; align-items: stretch; }

.area-map-card {
  /* z-index here is load-bearing, not decorative: Leaflet's own CSS puts
     its controls/popup panes as high as z-index:1000, and without an
     ancestor that has both position and an explicit z-index, those
     escape straight into the page's stacking context and climb over the
     sticky nav (z-index:20) once you scroll. Giving this card its own
     z-index makes it a containing block, so nothing inside the map can
     ever stack above page chrome outside it. */
  position: relative; z-index: 0;
  padding: 14px; border-radius: 22px;
  background: var(--sf-card); border: 1px solid var(--sf-border);
  display: flex; flex-direction: column; gap: 12px;
}

/* Fullscreen: the card itself is promoted to a fixed, viewport-filling
   surface rather than using the browser's native Fullscreen API, since
   iOS Safari refuses requestFullscreen() on anything but a <video>. Its
   own toolbar (Recenter, Layers) rides along unchanged; only the map
   below it needs to grow, which its existing flex: 1 already handles. */
.area-map-card.is-fullscreen {
  position: fixed; inset: 0; z-index: 100;
  width: 100vw; height: 100vh; margin: 0; border-radius: 0;
}
.area-map-card.is-fullscreen .area-map { min-height: 0; }
body.area-map-fullscreen-lock { overflow: hidden; }

.area-map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 6px 0; }

.area-reset-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; cursor: pointer;
  font: 600 11px/1 var(--sf-sans); letter-spacing: .02em; color: var(--sf-text-faint);
  transition: color .15s var(--sf-ease);
}
.area-reset-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.area-reset-link span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.area-reset-link:hover { color: #fff; }

/* ── Layers menu: one disclosure trigger + flyout, replacing the old
   toolbar's undifferentiated row of pills. Resort, SNOTEL, Runs, Lifts,
   and Winter Trails behave identically (they just draw pins or shapes)
   and share one switch group; Avalanche and Radar are true overlays
   (statewide data, animated playback) and get a second group plus the
   trigger's active-count badge. ── */
.area-layers-menu-wrap { position: relative; }

/* ── Fullscreen: a real Leaflet control floating on the map itself
   (bottomright), matching River Flow Co's guide map pattern, rather
   than a button in the card's own toolbar. Wrapped in .leaflet-bar so
   it inherits that shared dark-theme chrome. Leaflet's own default
   10px edge margin applies here (no override), same spacing the zoom
   control already sits at, so it isn't flush against the map edge. ── */
.area-fullscreen-btn {
  display: flex !important; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--sf-card-raised); color: var(--sf-text-body);
  cursor: pointer; transition: color .15s var(--sf-ease);
}
.area-fullscreen-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.area-fullscreen-btn:hover { color: #fff; }

/* The radar playback bar spans the full width of the map's bottom edge
   at z-index: 1000 and, being appended to the map container after
   Leaflet's own control corners, would otherwise paint over this
   corner's controls (fullscreen button, attribution) once Radar is on. */
.area-map .leaflet-bottom.leaflet-right { z-index: 1001; }

.area-layers-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--sf-chip-fill); border: 1px solid var(--sf-chip-border);
  font: 700 11px/1 var(--sf-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-text-faint);
  cursor: pointer; transition: background .15s var(--sf-ease), border-color .15s var(--sf-ease), color .15s var(--sf-ease);
}
.area-layers-trigger svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.area-layers-trigger:hover { color: #fff; border-color: var(--sf-blue-soft); }
.area-layers-trigger[aria-expanded="true"] { background: var(--sf-blue-tint); border-color: var(--sf-blue-soft); color: #fff; }

.area-layers-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--sf-blue); color: #fff; font: 800 10px/1 var(--sf-sans);
}
.area-layers-badge[hidden] { display: none; }

.area-layers-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; width: 250px;
  background: var(--sf-card-raised); border: 1px solid var(--sf-border); border-radius: 14px;
  padding: 12px 12px 8px; box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .6);
}

.area-layers-eyebrow {
  font: 700 9px/1 var(--sf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-faint);
}
.area-layers-divider { height: 1px; margin: 6px 0; background: rgba(255, 255, 255, .14); }

.area-layers-row {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 4px;
  background: none; border: none; cursor: pointer; text-align: left;
  font: 600 12px/1 var(--sf-sans); color: var(--sf-text-body);
}
.area-layers-row svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--sf-blue-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s var(--sf-ease); }
.area-layers-row:not(.is-active) svg { stroke: var(--sf-text-faint); }
.area-layers-row-label { flex: 1; }

.area-layers-danger-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

.area-layers-switch {
  flex: none; width: 30px; height: 16px; border-radius: 999px; position: relative;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  transition: background .15s var(--sf-ease), border-color .15s var(--sf-ease);
}
.area-layers-switch-thumb {
  position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .7); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: transform .15s var(--sf-ease), background .15s var(--sf-ease);
}
.area-layers-row.is-active .area-layers-switch { background: var(--sf-blue); border-color: var(--sf-blue); }
.area-layers-row.is-active .area-layers-switch-thumb { background: #fff; transform: translateX(14px); }

.area-map {
  /* z-index here is load-bearing, same reasoning as .area-map-card above:
     without it, Leaflet's own panes (z-index up to 700) aren't contained
     by a stacking context of their own, so they leak out and compare
     directly against sibling UI in the card, like the Layers panel,
     instead of losing to it as their lower DOM position implies. */
  position: relative; z-index: 0; flex: 1; min-height: 560px;
  border-radius: 4px; border: 1px solid var(--sf-map-border); overflow: hidden;
  background: #D8DEE4; cursor: grab;
}
.area-map .leaflet-container { background: #D8DEE4; }
.area-map .area-map-hillshade { mix-blend-mode: multiply; }

.area-map-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 6px; }
.area-map-note, .area-map-hint {
  font: 600 9px/1 var(--sf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-faint);
}

/* ── Radar playback overlay (animated radar loop, Radar layer only) ──
   Both elements are built and appended to the Leaflet map container in
   JS (see buildRadarBar in area-steamboat.js), not static HTML, so they
   sit inside Leaflet's own positioned container without fighting its
   pane management. Hidden by default; syncRadarUI toggles is-visible
   to match the Radar toolbar chip. */
.area-radar-legend, .area-radar-bar { opacity: 0; pointer-events: none; transition: opacity .15s var(--sf-ease); }
.area-radar-legend.is-visible, .area-radar-bar.is-visible { opacity: 1; pointer-events: auto; }

.area-radar-legend {
  position: absolute; top: 10px; right: 10px; z-index: 1000;
  display: flex; flex-direction: column; gap: 5px;
  padding: 7px 9px; border-radius: 10px;
  background: rgba(19, 20, 22, .72); border: 1px solid rgba(255, 255, 255, .18);
  font: 700 8px/1 var(--sf-sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.area-radar-legend-grad {
  width: 84px; height: 6px; border-radius: 999px;
  /* Matches RainViewer's actual intensity ramp (confirmed against a live
     tile), not the standard NWS green-to-red NEXRAD palette. */
  background: linear-gradient(to right, #38BDF8, #F2D24B, #F2994A, #E5484D);
}
.area-radar-legend-labels { display: flex; justify-content: space-between; }

.area-radar-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(19, 20, 22, .84) 0%, rgba(19, 20, 22, .56) 62%, rgba(19, 20, 22, 0) 100%);
}
.area-radar-play {
  width: 34px; height: 34px; border-radius: 50%; flex: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sf-blue); border: none; cursor: pointer;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .5);
  transition: background .15s var(--sf-ease), transform .15s var(--sf-ease);
}
.area-radar-play:hover { background: var(--sf-blue-deep); transform: scale(1.06); }
.area-radar-play svg { width: 13px; height: 13px; }
.area-radar-track-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.area-radar-track-labels { display: flex; justify-content: space-between; font: 600 8px/1 var(--sf-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
input[type=range].area-radar-track {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22);
  outline: none; cursor: pointer; display: block;
}
input[type=range].area-radar-track::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; }
input[type=range].area-radar-track::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--sf-blue);
  margin-top: -5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); cursor: pointer;
}
input[type=range].area-radar-track::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
input[type=range].area-radar-track::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--sf-blue); }
input[type=range].area-radar-track::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--sf-blue); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); cursor: pointer;
}
.area-radar-time {
  flex: none; min-width: 60px; text-align: center;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24);
  font: 800 11px/1 var(--sf-sans); letter-spacing: .03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.area-radar-time.is-now { background: rgba(44, 123, 229, .3); border-color: var(--sf-blue-soft); }

/* ── Map markers (Leaflet divIcons) ───────────────────────── */
.area-marker { display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: pointer; }
.area-marker.area-layer-hidden { display: none; }

/* Solid pill instead of a text-shadow halo: reads at full contrast over
   any basemap (satellite, hillshade, bare terrain) rather than fading
   into busy imagery, and echoes the same pill shape as every other
   clickable chip on the site (layer toggles, nav pills), so a marker
   reads as "clickable UI" on sight, not just on hover. */
.area-marker-text {
  display: flex; flex-direction: column; gap: 0; padding: 4px 10px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .08);
  transition: box-shadow .15s var(--sf-ease), transform .15s var(--sf-ease), background .15s var(--sf-ease);
}
.area-marker-label {
  font: 700 10px/1.3 var(--sf-sans); letter-spacing: .07em; text-transform: uppercase; color: #1B222B;
}
.area-marker-stat { font: 800 11px/1.3 var(--sf-sans); letter-spacing: .01em; color: var(--sf-blue-deep); }

.area-marker-dotwrap { position: relative; display: inline-flex; width: 13px; height: 13px; flex: none; }
.area-marker-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--sf-blue); animation: sfPing 3s ease-out infinite; }
.area-marker-glyph {
  position: relative; width: 13px; height: 13px; border-radius: 50%; background: var(--sf-blue);
  box-shadow: 0 0 0 5px rgba(44, 123, 229, .28), 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .15s var(--sf-ease), box-shadow .15s var(--sf-ease);
}

.area-marker-station .area-marker-pulse { display: none; }
.area-marker-station .area-marker-dotwrap { width: 10px; height: 10px; }
.area-marker-station .area-marker-glyph {
  width: 10px; height: 10px; background: var(--sf-blue-deep);
  box-shadow: 0 0 0 4px rgba(11, 79, 168, .26), 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35);
}

.area-marker-trailhead .area-marker-dotwrap { display: none; }
.area-marker-triangle {
  width: 0; height: 0; flex: none;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--sf-blue-deep);
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
.area-marker-trailhead.is-snowmobile .area-marker-triangle { border-bottom-color: #C97300; }
.area-marker-trailhead .area-marker-text { padding: 3px 9px 2px; }
.area-marker-trailhead .area-marker-label { font-size: 9px; }

/* Hovering (mouse) or focusing (keyboard, Leaflet's marker wrapper is
   tabindex'd via keyboard:true) makes every pin visibly reactive, on
   top of the ring and pill it already shows at rest. */
.area-marker:hover .area-marker-glyph, .leaflet-marker-icon:focus .area-marker-glyph {
  transform: scale(1.3); box-shadow: 0 0 0 7px rgba(44, 123, 229, .38), 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35);
}
.area-marker:hover .area-marker-text, .leaflet-marker-icon:focus .area-marker-text {
  background: #fff; transform: translateY(-1px);
  box-shadow: 0 4px 10px -1px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .1);
}

.area-marker.is-selected .area-marker-dotwrap { width: 15px; height: 15px; }
.area-marker.is-selected .area-marker-glyph { width: 15px; height: 15px; background: #1B222B; box-shadow: 0 0 0 5px rgba(27, 34, 43, .24), 0 0 0 2px #fff; }
.area-marker.is-selected .area-marker-pulse { background: #1B222B; }
.area-marker.is-selected .area-marker-text { box-shadow: 0 0 0 2px var(--sf-blue), 0 2px 6px -1px rgba(0, 0, 0, .4); }
.area-marker.is-selected .area-marker-label { font-weight: 800; }
.area-marker.is-selected .area-marker-stat { color: #1B222B; }

@media (prefers-reduced-motion: reduce) {
  .area-marker-pulse { animation: none; }
}

/* ── Leaflet chrome, dark theme ───────────────────────────── */
.leaflet-control-zoom a { background: var(--sf-card-raised); color: var(--sf-text-body); border-color: var(--sf-border); }
.leaflet-control-zoom a:hover { background: var(--sf-card-raised); color: #fff; }
.leaflet-bar { border: 1px solid var(--sf-border); box-shadow: none; }
.leaflet-control-scale-line {
  background: rgba(26, 27, 29, .7); border-color: rgba(255, 255, 255, .34); color: var(--sf-text-muted);
  font: 600 9px/1.6 var(--sf-sans); letter-spacing: .12em; text-transform: uppercase;
}
.leaflet-control-attribution {
  background: rgba(23, 29, 36, .78) !important; color: var(--sf-text-faint) !important;
  font: 500 9px/1.5 var(--sf-sans) !important;
}
.leaflet-control-attribution a { color: var(--sf-text-muted) !important; }

.leaflet-popup-content-wrapper {
  background: var(--sf-card-raised) !important; color: var(--sf-text-body) !important;
  border-radius: 10px !important; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .65) !important;
}
.leaflet-popup-tip { background: var(--sf-card-raised) !important; }
.leaflet-popup-content { margin: 12px 14px; font: 400 12.5px/1.55 var(--sf-sans); }
.leaflet-container a.leaflet-popup-close-button { color: var(--sf-text-faint) !important; }
.leaflet-container a.leaflet-popup-close-button:hover { color: #fff !important; }
.area-caic-popup strong { display: block; margin-bottom: 3px; font: 700 12.5px/1.3 var(--sf-sans); color: #fff; }
.area-caic-popup a { color: var(--sf-blue-soft); }

/* ── Conditions panel ─────────────────────────────────────── */
.area-panel {
  display: flex; flex-direction: column;
  border-radius: 22px; border: 1px solid var(--sf-border);
  background: var(--sf-card);
  padding: 30px;
}
.area-panel-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.area-panel-label { font: 600 10px/1 var(--sf-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-text-muted); }
.area-panel-freshness { font: 600 10px/1 var(--sf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-faint); }

.area-panel-name { margin: 14px 0 3px; font: 400 30px/1.05 var(--sf-serif); color: var(--sf-blue-soft); }
.area-panel-meta { font: 400 14px/1.4 var(--sf-serif); font-style: italic; color: var(--sf-text-body); }

.area-panel-loading, .area-panel-error {
  margin-top: 18px; font: 400 14px/1.5 var(--sf-serif); font-style: italic; color: var(--sf-text-muted);
}

.area-stat-hero-row { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 0; }
.area-stat-hero-num { font: 900 68px/1 var(--sf-sans); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
/* Smaller text, but the same 68px line box as a real reading (68px/1), so
   an N/A temp (common preseason, or any card whose live source is down)
   never shrinks this row against a card that has a real number. */
.area-stat-hero-num.is-empty { color: var(--sf-text-faint); font-size: 44px; line-height: 68px; }
.area-stat-hero-unit { font: 700 13px/1 var(--sf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-text-muted); }

/* min-height reserves 2 lines (line-height x2) unconditionally: this is the
   one line whose real content length varies most between selections (a
   short SNOTEL read vs. the long "Season closed..." resort message), so
   without a floor here the panel visibly jumps height when switching. */
.area-condition-read { margin-top: 12px; font: 400 16px/1.45 var(--sf-serif); font-style: italic; color: #fff; min-height: 2.9em; }
/* Always rendered, even with no forecast text (see renderPanel), so the
   resort card's extra line doesn't unbalance the row against station/zone
   cards, which have no per-selection forecast source to fill it with. */
.area-condition-sky { margin-top: 6px; font: 400 14px/1.45 var(--sf-serif); font-style: italic; color: var(--sf-text-body); }
.area-condition-sky.is-empty { visibility: hidden; }

.area-dashed-rule { height: 1px; margin: 24px 0; border-top: 1px dashed var(--sf-dashed); }

.area-substats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.area-substat-label { font: 600 10px/1 var(--sf-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-text-muted); margin-bottom: 7px; }
.area-substat-val { font: 900 26px/1 var(--sf-sans); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
/* Same 26px line box as a real reading (26px/1), so an N/A stat never
   makes its grid row shorter than a sibling row with a real number. */
.area-substat-val.is-empty { color: var(--sf-text-faint); font-size: 16px; font-weight: 600; line-height: 26px; }
/* Resort's Elevation is a base-summit range ("6,900-10,568"), the one
   value long enough to wrap the ~150px grid cell onto a second line at
   26px; 20px keeps it on one line (verified against the real column
   width), matching every single-number Elevation cell elsewhere. */
.area-substat-val.is-range { font-size: 20px; }
.area-substat-val .unit { font-size: 12px; letter-spacing: .06em; color: var(--sf-text-label); }
.area-substat-sub { margin-top: 4px; font: 500 11px/1.3 var(--sf-sans); color: var(--sf-text-faint); }
/* Always rendered by statBlock() now (see area-steamboat.js), so a row's
   height never depends on whether this particular selection happens to
   have source/detail text for this specific stat. */
.area-substat-sub.is-empty { visibility: hidden; }

.area-panel-footer { margin-top: auto; padding-top: 4px; }
.area-panel-sources { margin-top: 9px; font: 400 14px/1.5 var(--sf-serif); font-style: italic; color: var(--sf-text-body); }
.area-panel-observed { margin-top: 8px; font: 600 9px/1.6 var(--sf-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sf-text-faint); }
.area-panel-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  height: 44px; padding: 0 24px; border-radius: 999px;
  background: var(--sf-blue); color: #fff;
  font: 700 12px/1 var(--sf-sans); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 8px 22px -8px rgba(44, 123, 229, .85);
  transition: background .15s var(--sf-ease);
}
.area-panel-cta:hover { background: var(--sf-blue-deep); color: #fff; }
/* min-height reserves 2 lines: the zone card's advisory line ("Map
   position is this zone's SNOTEL network center, not a published
   boundary.") is real, necessary disclosure text that runs longer than
   resort/station's one-line source credit, so without a floor here the
   panel is shorter whenever a one-line source is showing. */
.area-panel-source { margin-top: 14px; font: 500 11px/1.5 var(--sf-sans); color: var(--sf-text-faint); min-height: 3em; }
.area-panel-source a { color: var(--sf-text-muted); }
.area-panel-source a:hover { color: var(--sf-blue-soft); }

/* ── Comparison section ───────────────────────────────────── */
.area-compare { padding: 60px 0; background: var(--sf-page); border-top: 1px solid var(--sf-hairline); }
.area-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.area-section-eyebrow { font: 600 11px/1 var(--sf-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sf-text-muted); }
.area-section-head h2 { margin: 13px 0 0; font: 400 36px/1.1 var(--sf-serif); letter-spacing: -.02em; color: #fff; }
.area-section-sub { margin: 0; max-width: 330px; font: 400 15px/1.5 var(--sf-serif); font-style: italic; color: var(--sf-text-body); text-align: right; }

.area-compare-table-wrap { overflow-x: auto; }
.area-compare-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0 8px; }
.area-compare-table thead th {
  padding: 0 22px 4px; text-align: right;
  font: 600 9px/1.4 var(--sf-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-text-faint);
}
.area-compare-table thead th.is-loc { text-align: left; width: 26%; }
.area-compare-table tbody tr {
  cursor: pointer; background: var(--sf-card); border: 1px solid var(--sf-border);
  transition: background .15s var(--sf-ease), border-color .15s var(--sf-ease);
}
.area-compare-table tbody tr:hover { background: var(--sf-card-raised); border-color: rgba(127, 178, 240, .7); }
.area-compare-table tbody tr.is-selected { background: var(--sf-card-raised); border-color: rgba(127, 178, 240, .7); }
.area-compare-table td {
  padding: 18px 22px; text-align: right; border-top: 1px solid var(--sf-border); border-bottom: 1px solid var(--sf-border);
  font: 900 18px/1 var(--sf-sans); letter-spacing: -.03em; color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums;
}
.area-compare-table td:first-child { border-left: 1px solid var(--sf-border); border-radius: 14px 0 0 14px; }
.area-compare-table td:last-child { border-right: 1px solid var(--sf-border); border-radius: 0 14px 14px 0; }
.area-compare-table td.is-empty { color: var(--sf-text-faint); font-size: 13px; font-weight: 600; }
.area-compare-table td.is-loc { text-align: left; display: flex; flex-direction: column; gap: 5px; }
.area-compare-kind {
  display: flex; align-items: center; gap: 8px;
  font: 600 9px/1 var(--sf-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sf-text-muted);
}
.area-compare-kind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-blue); }
.area-compare-name { font: 500 20px/1.15 var(--sf-serif); letter-spacing: -.01em; color: var(--sf-blue-soft); }
.area-compare-table .unit { font-size: 10px; letter-spacing: .06em; color: var(--sf-text-label); }
.area-compare-sub { margin-top: 4px; font: 600 9px/1 var(--sf-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sf-text-faint); text-align: right; }

/* ── Forecast section ─────────────────────────────────────── */
.area-forecast { padding: 72px 0; background: var(--sf-section-alt); }
.area-forecast-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr);
  gap: 12px; overflow-x: auto; padding-bottom: 14px; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--sf-blue-soft) transparent;
}
.area-forecast-row::-webkit-scrollbar { height: 6px; }
.area-forecast-row::-webkit-scrollbar-track { background: transparent; }
.area-forecast-row::-webkit-scrollbar-thumb { background: var(--sf-blue-soft); border-radius: 999px; }
.area-forecast-row::-webkit-scrollbar-thumb:hover { background: #fff; }
.area-forecast-card {
  padding: 20px 18px; min-height: 210px;
  border-radius: 14px; background: var(--sf-card-raised);
  border: 1px solid var(--sf-border);
  display: flex; flex-direction: column; gap: 14px;
  scroll-snap-align: start;
  cursor: pointer; text-align: left; transition: border-color .15s, background .15s;
}
.area-forecast-card:hover { border-color: var(--sf-blue-soft); }
.area-forecast-card.is-selected { border-color: var(--sf-blue-soft); background: var(--sf-blue-tint); }
.area-forecast-card:focus-visible { outline: 2px solid var(--sf-blue-soft); outline-offset: 2px; }
.area-forecast-day { font: 700 10px/1 var(--sf-sans); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.area-forecast-date { margin-top: 6px; font: 600 9px/1 var(--sf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-faint); }
.area-forecast-icon {
  width: 36px; height: 36px;
  stroke: var(--sf-blue-soft); stroke-width: 1.4; fill: var(--sf-blue-tint);
  stroke-linecap: round; stroke-linejoin: round;
}
.area-forecast-icon .wx-sun { fill: rgba(247, 197, 90, .22); stroke: var(--sf-sun); }
.area-forecast-icon .wx-ray { stroke: var(--sf-sun); }
.area-forecast-icon .wx-bolt { fill: rgba(247, 197, 90, .35); stroke: var(--sf-sun); }
.area-forecast-icon .wx-flake { stroke: #fff; }
.area-forecast-temps { display: flex; align-items: baseline; gap: 8px; }
.area-forecast-hi { font: 900 28px/1 var(--sf-sans); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.area-forecast-lo { font: 900 16px/1 var(--sf-sans); letter-spacing: -.02em; color: var(--sf-text-faint); font-variant-numeric: tabular-nums; }
.area-forecast-pop { font: 600 11px/1 var(--sf-sans); color: var(--sf-blue-soft); }
.area-forecast-wind { font: 600 9px/1 var(--sf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-faint); }
.area-forecast-text { margin-top: auto; font: 400 13px/1.4 var(--sf-serif); font-style: italic; color: var(--sf-text-body); }
.area-forecast-source { margin-top: 16px; font: 500 11px/1.5 var(--sf-sans); color: var(--sf-text-faint); }
.area-forecast-source a { color: var(--sf-text-muted); }
.area-forecast-source a:hover { color: var(--sf-blue-soft); }

.area-forecast-hourly { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--sf-hairline); }
.area-forecast-hourly-head h3 { margin: 0 0 14px; font: 400 20px/1.1 var(--sf-serif); letter-spacing: -.01em; color: #fff; }
.area-forecast-hourly-head h3 em { font-style: italic; color: var(--sf-text-faint); }
.area-forecast-hourly-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--sf-blue-soft) transparent;
}
.area-forecast-hourly-row::-webkit-scrollbar { height: 6px; }
.area-forecast-hourly-row::-webkit-scrollbar-track { background: transparent; }
.area-forecast-hourly-row::-webkit-scrollbar-thumb { background: var(--sf-blue-soft); border-radius: 999px; }
.area-hourly-card {
  padding: 14px 10px; border-radius: 12px; background: var(--sf-card-raised);
  border: 1px solid var(--sf-border);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  scroll-snap-align: start;
}
.area-hourly-time { font: 700 10px/1 var(--sf-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sf-text-faint); }
.area-hourly-card .area-forecast-icon { width: 26px; height: 26px; }
.area-hourly-temp { font: 900 18px/1 var(--sf-sans); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.area-hourly-pop { font: 600 10px/1 var(--sf-sans); color: var(--sf-blue-soft); }
.area-hourly-wind { display: flex; align-items: center; gap: 4px; font: 600 10px/1 var(--sf-sans); color: var(--sf-text-faint); font-variant-numeric: tabular-nums; }
.area-wind-arrow { width: 11px; height: 11px; flex-shrink: 0; stroke: var(--sf-blue-soft); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: center; }

/* ── Cams section ─────────────────────────────────────────── */
.area-cams { padding: 60px 0; background: var(--sf-page); border-top: 1px solid var(--sf-hairline); }
.area-cams-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: start;
  gap: 16px;
}
.area-cams-more { margin-top: 16px; }
.area-cams-more[hidden] { display: none; }
.area-cam-card {
  border-radius: 14px; background: var(--sf-card-raised);
  border: 1px solid var(--sf-border); overflow: hidden;
  transition: border-color .15s ease, grid-column .15s ease;
}
.area-cam-card.is-expanded { grid-column: span 2; }
.area-cam-card:hover { border-color: rgba(127, 178, 240, .7); }
.area-cam-media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.area-cam-media iframe, .area-cam-photo { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.area-cam-badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(19, 20, 22, .72); backdrop-filter: blur(2px);
  font: 700 9px/1 var(--sf-sans); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  pointer-events: none;
}
.area-cam-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-blue-soft); }
.area-cam-media.is-photo .area-cam-badge::before { background: var(--sf-text-faint); }
.area-cam-expand-btn {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border-radius: 999px; border: none; background: rgba(19, 20, 22, .72); backdrop-filter: blur(2px);
  cursor: pointer; transition: background .15s ease;
}
.area-cam-expand-btn svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.area-cam-expand-btn:hover { background: var(--sf-blue); }
.area-cam-body { padding: 10px 14px 12px; min-width: 0; }
.area-cam-name { font: 600 14px/1.3 var(--sf-sans); color: #fff; }
.area-cam-loc { margin-top: 2px; font: 600 10px/1.3 var(--sf-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--sf-text-faint); }
.area-cam-source { color: var(--sf-text-faint); text-decoration: none; }
.area-cam-source:hover { color: var(--sf-blue-soft); }
.area-cams-toggle {
  display: block; margin: 18px auto 0;
  padding: 11px 22px;
  border-radius: 999px; border: 1px solid var(--sf-border); background: transparent;
  font: 600 12px/1 var(--sf-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sf-text-muted);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.area-cams-toggle:hover { border-color: rgba(127, 178, 240, .7); color: var(--sf-blue-soft); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1040px) {
  .area-hero-grid { grid-template-columns: 1fr; }
  .area-mobile-summary { display: grid; }
  .area-map { min-height: 420px; }
  .area-panel { min-height: 0; }
  .area-forecast-row { grid-auto-columns: minmax(132px, 1fr); }
  .sf-nav-links .sf-nav-link { display: none; }
  .storm-recap-tiles { grid-template-columns: repeat(2, 1fr); }
  .area-cams-grid { grid-template-columns: repeat(2, 1fr); }
  .area-cam-card.is-expanded { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .sf-nav-wordmark { display: none; }
}
@media (max-width: 640px) {
  .area-inner { padding: 0 20px; }
  .area-hero-band { padding: 28px 0 32px; }
  .area-hero { padding: 24px 0 44px; }
  .area-map { min-height: 340px; }
  .area-map-note { display: none; }
  .area-panel { padding: 22px; }
  .area-stat-hero-num { font-size: 46px; }
  .area-compare, .area-forecast, .area-cams { padding: 44px 0; }
  .area-section-head { flex-direction: column; align-items: flex-start; }
  .area-section-sub { text-align: left; max-width: 100%; }
  .area-forecast-row { grid-auto-columns: minmax(120px, 1fr); }
  .area-cams-grid { grid-template-columns: 1fr; }
  .area-cam-card.is-expanded { grid-column: auto; }
  .area-page-title { font-size: 40px; }
  .storm-recap-headline { font-size: 24px; min-width: 0; }
  .storm-recap-total { width: 100%; }
  .storm-recap-total-num { font-size: 48px; }
  .storm-recap-tiles { grid-template-columns: 1fr; }
}