/* /snow-map/ — the one dark surface in the storefront. Every selector is scoped to
 * .aeri-storefront .aeri-snowmap so it outranks the 0-2-0 heading rule in home-native.css; a bare
 * component class would be silently overridden there. */
/* overflow:clip, not hidden: a hidden ancestor becomes the scrollport and the sticky map stops
 * sticking. clip contains the snow layers without creating one. */
.aeri-storefront .aeri-snowmap{background:var(--aeri-black);color:#f5f5f5;padding:40px 0 72px;position:relative;isolation:isolate;overflow:clip}
.aeri-storefront .aeri-snowmap a{color:var(--aeri-signal-lime)}
.aeri-storefront .aeri-snowmap a:focus-visible{outline-color:var(--aeri-signal-lime)}
.aeri-snowmap-inner{max-width:var(--aeri-max);margin:0 auto;padding:0 var(--aeri-gutter)}

/* Falling snow behind the page. Two tiled gradient layers with different dot sizes and speeds read
 * as depth. They sit at z-index -1 inside the isolated stacking context, so the map plate, cards
 * and text paint over them and stay unobstructed. Each layer travels exactly one tile, so the loop
 * never jumps. */
.aeri-snowmap::before,.aeri-snowmap::after{
  content:"";position:absolute;left:0;right:0;z-index:-1;pointer-events:none;
  top:calc(-1 * var(--snow-tile));height:calc(100% + var(--snow-tile));
  background-size:var(--snow-tile) var(--snow-tile);background-repeat:repeat;
  animation:aeri-snowfall var(--snow-speed) linear infinite;
}
/* A radial-gradient here paints one soft-edged dot; five per tile is the flake field. There is no
 * gradient surface anywhere on this page. */
.aeri-snowmap::before{
  --snow-tile:240px;--snow-speed:30s;opacity:.65;
  background-image:radial-gradient(1.7px 1.7px at 32px 44px,rgba(255,255,255,.9),transparent 70%),radial-gradient(1.3px 1.3px at 128px 18px,rgba(255,255,255,.7),transparent 70%),radial-gradient(2.1px 2.1px at 196px 107px,rgba(255,255,255,.85),transparent 70%),radial-gradient(1.3px 1.3px at 74px 156px,rgba(255,255,255,.6),transparent 70%),radial-gradient(1.6px 1.6px at 168px 206px,rgba(255,255,255,.75),transparent 70%);/* taste-skill-ignore */
}
.aeri-snowmap::after{
  --snow-tile:380px;--snow-speed:19s;opacity:.8;
  background-image:radial-gradient(2.6px 2.6px at 52px 66px,rgba(255,255,255,.95),transparent 70%),radial-gradient(2px 2px at 236px 34px,rgba(255,255,255,.8),transparent 70%),radial-gradient(3px 3px at 128px 262px,rgba(255,255,255,1),transparent 70%),radial-gradient(2.2px 2.2px at 318px 178px,rgba(255,255,255,.85),transparent 70%),radial-gradient(1.9px 1.9px at 292px 322px,rgba(255,255,255,.7),transparent 70%);/* taste-skill-ignore */
}
@keyframes aeri-snowfall{to{transform:translateY(var(--snow-tile))}}
/* base.css already stops every animation under reduced motion; that would leave the flakes frozen
 * on screen, so the layers are removed instead. */
@media(prefers-reduced-motion:reduce){.aeri-snowmap::before,.aeri-snowmap::after{display:none}}

/* Heading */
.aeri-storefront .aeri-snowmap-head{max-width:860px;margin:0 auto 28px;text-align:center}
.aeri-storefront .aeri-snowmap .aeri-snowmap-head h1{margin:0 0 16px;color:#fff;font-size:var(--aeri-type-h1)}
.aeri-snowmap-lead{margin:0 auto;max-width:640px;color:#e7e8e3;font-size:20px;line-height:1.5}
.aeri-snowmap-updated{margin:16px 0 0;color:#9a9c96;font:400 14px/1.4 Roboto,Arial,sans-serif}
.aeri-snowmap-stale{margin:16px auto 0;max-width:640px;padding:10px 14px;border-left:3px solid #f5a524;background:rgba(245,165,36,.12);color:#f7d9a6;font-size:14px;text-align:left}

/* Map stage. This page declares no shadows and no outlines: surfaces are separated by a step in
 * tone only, so the map's own alert colours stay the only colour on the screen. */
/* Split stage: the map holds the left half and stays put; the numbers, alerts and table scroll
 * past it. The map is sized to the viewport so the whole of it is visible while you read. */
.aeri-snowmap-split{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,4vw,64px);align-items:start}
.aeri-snowmap-fixed{position:sticky;top:calc(var(--aeri-header-height,142px) + 16px)}
.aeri-snowmap-flow{min-width:0}
.aeri-snowmap-map{position:relative;height:clamp(400px,calc(100svh - var(--aeri-header-height,142px) - 140px),760px);background:#0b0e14;overflow:hidden}
.aeri-snowmap-map .maplibregl-canvas{outline:none}
.aeri-storefront .aeri-snowmap .maplibregl-ctrl-group{background:#23262b;box-shadow:none}
.aeri-storefront .aeri-snowmap .maplibregl-ctrl-group button{background:#23262b;box-shadow:none}
.aeri-storefront .aeri-snowmap .maplibregl-ctrl-group button span{filter:invert(1)}
.aeri-storefront .aeri-snowmap .maplibregl-ctrl-attrib{background:rgba(17,17,17,.82);color:#c9cbc4;font-size:11px}
.aeri-storefront .aeri-snowmap .maplibregl-ctrl-attrib a{color:#d8dacf}
.aeri-snowmap-map-note{margin:0;padding:28px;color:#c9cbc4;font-size:14px;line-height:1.5;text-align:center}

/* Temperature layer control, on its own row above the map. */
.aeri-snowmap-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.aeri-storefront .aeri-snow-temp-toggle{--aeri-btn-bg:#23262b;--aeri-btn-fg:#e5e7eb;--aeri-btn-border:#23262b;padding:8px 14px;border:0;border-radius:0;background:#23262b;color:#e5e7eb;font:700 14px/1.2 Jost,Arial,sans-serif;box-shadow:none}
.aeri-storefront .aeri-snow-temp-toggle[aria-pressed=true]{background:#3a3f47;color:var(--aeri-signal-lime);--aeri-btn-bg:#3a3f47;--aeri-btn-fg:var(--aeri-signal-lime)}
.aeri-snow-temp-legend{display:flex;flex-direction:column;gap:6px}
/* The one gradient on the page, and it is a scale, not decoration: the bar's colours are the
 * same ramp the map paints the stations with, so the legend has to match it. */
.aeri-snow-temp-bar{display:block;width:150px;height:8px;background:linear-gradient(90deg,#2563eb,#3b82f6,#60a5fa,#bfdbfe,#e5e7eb,#fcd34d,#fb923c,#ef4444)}/* taste-skill-ignore: a temperature scale, not decoration */
.aeri-snow-temp-scale{display:flex;justify-content:space-between;width:150px;color:#9a9c96;font:400 14px/1 Roboto,Arial,sans-serif}
.aeri-snow-temp-scale i{font-style:normal}

/* Popups */
.aeri-snow-popup{min-width:200px;max-width:260px;font:400 13px/1.45 Roboto,Arial,sans-serif;color:#171717}
.aeri-snow-popup strong{display:block;margin:0 0 4px;font:700 14px/1.3 Jost,Arial,sans-serif}
.aeri-snow-popup .aeri-snow-popup-when{margin:6px 0 0;color:#4e514d}
.aeri-snow-popup .aeri-snow-popup-remark{margin:6px 0 0;color:#4e514d;font-size:12px}

/* Cards */
.aeri-snowmap-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 48px}
.aeri-snow-card:last-child{grid-column:1/-1}
.aeri-storefront .aeri-snow-card{background:#1a1d21;border:0;padding:18px 20px}
.aeri-storefront .aeri-snowmap .aeri-snow-card h2{margin:0 0 12px;color:#e7e8e3;font:600 14px/1.3 Roboto,Arial,sans-serif}
/* The figure leads and its heading captions it. A small label stacked over a 48px number is the
 * eyebrow pattern whatever the tag says, so the number comes first. */
.aeri-snow-card-value{margin:0 0 2px;color:#fff;font:700 48px/1 Jost,Arial,sans-serif;font-variant-numeric:tabular-nums}
.aeri-snow-card-list{margin:0 0 10px;padding:0;list-style:none;display:grid;gap:4px}
.aeri-snow-card-list li{display:flex;align-items:center;gap:8px}
.aeri-snow-card-list--reports li{justify-content:space-between;color:#d6d7d2;font-size:15px}
.aeri-snow-card-list--reports strong{color:#fff;font:700 17px/1 Jost,Arial,sans-serif}
.aeri-snow-card-note{margin:8px 0;color:#9a9c96;font-size:14px;line-height:1.45}
.aeri-snow-card-note a{color:#d8dacf;text-decoration:underline}

/* Severity filter buttons */
.aeri-snow-filter{display:flex;align-items:center;gap:8px;width:100%;padding:5px 0;border:0;background:transparent;color:#d6d7d2;font:400 15px/1.3 Roboto,Arial,sans-serif;text-align:left;box-shadow:none}
.aeri-snow-filter[aria-pressed=true]{color:var(--aeri-signal-lime)}
.aeri-snow-filter strong{margin-left:auto;color:#fff;font:700 17px/1 Jost,Arial,sans-serif}
.aeri-snow-dot{width:9px;height:9px;flex:none;border-radius:50%}
.aeri-snow-dot--warning{background:#e5484d}
.aeri-snow-dot--watch{background:#f5a524}
.aeri-snow-dot--advisory{background:#e8d44d}

/* Subscribe form */
.aeri-snow-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.aeri-snow-label{display:block;margin:0 0 4px;color:#cfd1c8;font-size:14px}
.aeri-storefront .aeri-snow-input{width:100%;min-height:42px;padding:8px 12px;border:1px solid rgba(255,255,255,.28);border-radius:0;background:#0b0e14;color:#fff;font-size:16px}/* taste-skill-ignore: a form field */
.aeri-storefront .aeri-snow-input::placeholder{color:#8f918b}
.aeri-snow-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}/* taste-skill-ignore: offscreen honeypot, not a rule */
.aeri-storefront .aeri-snow-submit{width:100%;margin-top:12px;min-height:46px;padding:10px 16px;border:0;background:var(--aeri-signal-lime);color:var(--aeri-black);font:700 14px/1.2 Jost,Arial,sans-serif;letter-spacing:.04em}
.aeri-storefront .aeri-snow-submit:hover{background:#d9ff33;color:var(--aeri-black)}
.aeri-snow-status{margin:10px 0 0;padding:8px 10px;border-left:3px solid var(--aeri-signal-lime);background:rgba(200,240,0,.1);color:#e7f9a8;font-size:13px}
.aeri-snow-status--error{border-left-color:#e5484d;background:rgba(229,72,77,.12);color:#ffc9cb}

/* Text version. The sections use the container width the map set up; only running paragraphs are
 * capped, so the page has one left edge instead of a 1424px map above a 900px column. */
.aeri-snowmap-text{max-width:none;margin:0 0 48px}
.aeri-storefront .aeri-snowmap .aeri-snowmap-text h2{margin:0 0 16px;color:#fff;font-size:26px}
.aeri-storefront .aeri-snowmap .aeri-snowmap-text h3{margin:28px 0 10px;color:#e7e8e3;font:700 20px/1.2 Jost,Arial,sans-serif}
.aeri-snowmap-text p{max-width:70ch;color:#d6d7d2;font-size:17px;line-height:1.6}
/* One state per block. The split's reading column is already a readable measure; when the page
 * stacks full width below 1024 the list runs two abreast instead of one very long line. */
.aeri-snowmap-text--alerts h3{break-after:avoid}
.aeri-snowmap-text--alerts .aeri-snow-alert-list{margin:0 0 4px;break-inside:avoid}
.aeri-snow-alert-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.aeri-snow-alert-list li{color:#d6d7d2;font-size:16px;line-height:1.5}
.aeri-snow-badge{display:inline-block;margin-right:6px;padding:2px 8px;border-radius:2px;color:#111;font:700 13px/1.6 Jost,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.aeri-snow-badge--warning{background:#e5484d;color:#fff}
.aeri-snow-badge--watch{background:#f5a524}
.aeri-snow-badge--advisory{background:#e8d44d}
.aeri-snow-alert-when{color:#9a9c96}
.aeri-snow-table{width:100%;border-collapse:collapse;font-size:16px}
.aeri-snow-table th{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.24);color:#9a9c96;font:600 14px/1.2 Roboto,Arial,sans-serif}
.aeri-snow-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);color:#d6d7d2}
.aeri-snow-table td:first-child{color:#fff;font:700 17px/1.2 Jost,Arial,sans-serif;font-variant-numeric:tabular-nums}
.aeri-snowmap-source{max-width:70ch;margin:0;color:#9a9c96;font-size:14px;line-height:1.6}

/* Stacked: the map stops sticking and sits above the data, full width. */
@media(max-width:1199px){
.aeri-snowmap-split{grid-template-columns:minmax(0,1fr);gap:28px}
.aeri-snowmap-fixed{position:static}
.aeri-snowmap-map{height:clamp(360px,56vh,620px)}
.aeri-snowmap-text--alerts{columns:2}
}
@media(max-width:767px){
.aeri-storefront .aeri-snowmap{padding:28px 0 56px}
.aeri-snowmap-map{height:52vh;min-height:320px}
.aeri-snowmap-cards{grid-template-columns:1fr;gap:8px;margin-bottom:36px}
.aeri-snow-card:last-child{grid-column:auto}
.aeri-snow-card-value{font-size:40px}
.aeri-snowmap-head{margin-bottom:20px}
.aeri-snowmap-text--alerts{columns:1}
.aeri-snow-table th:nth-child(2),.aeri-snow-table td:nth-child(2){display:none}
}

/* Motion. Each block gets its own entrance rather than one fade over the whole page. The map only
 * fades: translating a live canvas resamples its tiles. Transform and opacity only. */
@media(prefers-reduced-motion:no-preference){
.aeri-in{opacity:0;transform:translateY(22px);transition:opacity .55s var(--aeri-ease),transform .55s var(--aeri-ease)}
.aeri-in--on{opacity:1;transform:none}
.aeri-snowmap-map.aeri-in{transform:none}
}
/* Feedback on the three controls the page has. */
.aeri-snow-filter,.aeri-snow-temp-toggle,.aeri-snow-submit{transition:color .18s var(--aeri-ease),background-color .18s var(--aeri-ease),transform .18s var(--aeri-ease)}
.aeri-snow-filter:hover strong{color:var(--aeri-signal-lime)}
.aeri-snow-filter:active,.aeri-snow-temp-toggle:active,.aeri-snow-submit:active{transform:translateY(1px)}