/* Storm Station 247. ONE THEME, THE WEATHER PAGES' OWN.
 *
 * Owner, Sep 24: "I do not care for the theme, it is not congruent, make
 * everything like the Snowpack weather/instrument page." So the light ground
 * is not a Storm Station palette at all: it is the weather page's own
 * tokens, copied here so the front door and the alerts wear them too, and
 * stormthemeproof holds the two equal. The bar is Snowpack's navy bar.
 *
 * DARK AND BLACK REDEFINE EVERY TOKEN THE WEATHER PAGE READS, not a set of
 * our own beside them. They did before only in name: the weather shell
 * declares its tokens in an inline :root that loads after this file, so at
 * equal weight it won, and a reader who chose Black got a black bar over a
 * white page (owner's screenshots, Sep 24). html[data-theme] outweighs :root
 * wherever either is written.
 *
 * BLACK IS BLACK: the page, every card, the bar and the menu are #000, and
 * only lines and ink are lighter.
 */

:root{
  --snow:#f6f8fb; --card:#ffffff; --line:#e3e9f1; --ink:#17222f;
  --dim:#5d6c7e; --faint:#6c7682; --ice:#1478c9; --ice2:#e8f3fd; --ice-ink:#0d5ea3;
  --teal:#1fae97; --warm:#d97a1f;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --shadow:0 10px 30px -12px rgba(23,34,47,.14);
  --plate-accent:var(--warm);
  --wrap:1180px; --gutter:clamp(16px,4vw,40px);
  --map-land:#16243a; --map-edge:#8ea5c1; --map-hot:#24507f;
  --map-ink:#c6d6ea;  --map-ink-on:#ffffff; --map-led:#b9c6d6;
  --map-water:#f6f8fb; --map-water-edge:#8ea5c1; --map-water-ink:#66788f;
  --map-sea:#9fb0c4;

  /* Storm Station's own, beside them. */
  --sev-extreme:#9f1239; --sev-severe:#c62828; --sev-moderate:#b45309; --sev-minor:#4d7c0f;
  --pin:#ffffff; --pin-halo:#0a1425;
  --d0:#eef1f6; --d1:#d7dfea; --d2:#b0bece; --d3:#7f90a4; --d4:#48586c; --d-edge:#ffffff;
  --dots-edge:#b3c1d3; --dots-ink:#7d8ea4; --dots-hot:#17222f; --trend-band:#f3f6fa;
  --trend-hi:#e0813a; --trend-hi-ink:#b4600f;
  color-scheme:light;
}

html[data-theme="dark"]{
  --snow:#0b1320; --card:#101b2b; --line:#22324a; --ink:#e6edf5;
  --dim:#a3b3c6; --faint:#8494a8; --ice:#5aa9ec; --ice2:#15283f; --ice-ink:#8cc4f5;
  --teal:#3cc7ae; --warm:#e79a4f;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --map-land:#1b2c44; --map-edge:#4f6a8c; --map-hot:#2d5a8c;
  --map-ink:#c6d6ea; --map-ink-on:#ffffff; --map-led:#4f6a8c;
  --map-water:#0b1320; --map-water-edge:#4f6a8c; --map-water-ink:#8494a8; --map-sea:#5d7390;
  --sev-extreme:#f472b6; --sev-severe:#f87171; --sev-moderate:#fbbf24; --sev-minor:#a3e635;
  --pin-halo:#0b1320;
  --d0:#132033; --d1:#1b2d46; --d2:#294262; --d3:#3e5e87; --d4:#5f86b5; --d-edge:#0b1320;
  --dots-edge:#33475f; --dots-ink:#8494a8; --dots-hot:#e6edf5; --trend-band:#15283f;
  --trend-hi:#f0a060; --trend-hi-ink:#f0a060;
  /* The atlas's inks on a dark ground. Measured in OKLab against the light
     palette's own floors: the closest pair is 21.1 apart in ordinary vision,
     18.5 under protanopia and 11.4 under deuteranopia, and every one clears
     4:1 on navy and on black. The rarest network is still the loudest.
     (A mid-century set was tried on Sep 24 and the owner kept these.) */
  --atlas-asos:#eef4ff; --atlas-rwis:#e8553a; --atlas-dcp:#2aa7c9; --atlas-coop:#c9b24f; --atlas-cocorahs:#8e5bd6;
  --atlas-other:#9aa6b4; --atlas-bound:#eaa05a; --atlas-ring:rgba(0,0,0,.7); --atlas-hot:#ffffff;
  --atlas-land:#101b2b; --atlas-land-on:#15283f; --atlas-edge:#22324a; --atlas-edge-on:#4f6a8c;
  color-scheme:dark;
}
html[data-theme="black"]{
  --snow:#000000; --card:#000000; --line:#262626; --ink:#f2f2f2;
  --dim:#a8a8a8; --faint:#858585; --ice:#6cb6f2; --ice2:#0f1a26; --ice-ink:#9fd0f7;
  --teal:#3cc7ae; --warm:#eaa05a;
  --shadow:none;
  --map-land:#121212; --map-edge:#4a4a4a; --map-hot:#1f3a5a;
  --map-ink:#d4d4d4; --map-ink-on:#ffffff; --map-led:#4a4a4a;
  --map-water:#000000; --map-water-edge:#4a4a4a; --map-water-ink:#858585; --map-sea:#6a6a6a;
  --sev-extreme:#f472b6; --sev-severe:#f87171; --sev-moderate:#fbbf24; --sev-minor:#a3e635;
  --pin-halo:#000000;
  --d0:#0d0d0d; --d1:#1a1a1a; --d2:#2b2b2b; --d3:#454545; --d4:#686868; --d-edge:#000000;
  --dots-edge:#333333; --dots-ink:#858585; --dots-hot:#f2f2f2; --trend-band:#0f0f0f;
  --trend-hi:#f0a060; --trend-hi-ink:#f0a060;
  /* The atlas's inks on a dark ground. Measured in OKLab against the light
     palette's own floors: the closest pair is 21.1 apart in ordinary vision,
     18.5 under protanopia and 11.4 under deuteranopia, and every one clears
     4:1 on navy and on black. The rarest network is still the loudest.
     (A mid-century set was tried on Sep 24 and the owner kept these.) */
  --atlas-asos:#eef4ff; --atlas-rwis:#e8553a; --atlas-dcp:#2aa7c9; --atlas-coop:#c9b24f; --atlas-cocorahs:#8e5bd6;
  --atlas-other:#9aa6b4; --atlas-bound:#eaa05a; --atlas-ring:rgba(0,0,0,.7); --atlas-hot:#ffffff;
  --atlas-land:#0a0a0a; --atlas-land-on:#141414; --atlas-edge:#262626; --atlas-edge-on:#4a4a4a;
  color-scheme:dark;
}
html, body{ background:var(--snow); color:var(--ink); }

/* THE WEATHER PAGE'S FIXED COLOURS, AS TOKENS. Twelve rules on the weather
   shell name a colour instead of a token; each is restated here so it
   follows the ground. Light keeps the shell's own values. Each is
   written under html because the shell's rules come later at the same weight
   and would otherwise win. */
html .us-a.d0 .us-st{ fill:var(--d0); } html .us-a.d1 .us-st{ fill:var(--d1); } html .us-a.d2 .us-st{ fill:var(--d2); }
html .us-a.d3 .us-st{ fill:var(--d3); } html .us-a.d4 .us-st{ fill:var(--d4); }
html .us-a.d4 .us-st, html .us-a.d3 .us-st{ stroke:var(--d-edge); }
html .usmap.dots-on .us-a .us-st{ stroke:var(--dots-edge); }
html .usmap.dots-on .us-a:hover .us-st, html .usmap.dots-on .us-a:focus-visible .us-st{ stroke:var(--dots-hot); }
html .usmap.dots-on .us-k{ fill:var(--dots-ink); }
html .usmap.dots-on .us-a:hover .us-k{ fill:var(--dots-hot); }
html .trend-b{ fill:var(--trend-band); }
html .trend-d-hi, html .trend-hi{ stroke:var(--trend-hi); }
html .trend-v-hi{ fill:var(--trend-hi-ink); }
html .viewsw b{ color:var(--snow); }

/* THE RULED GRIDS ARE RULED BY THEIR CELLS. The weather pages draw the lines
   between cards by painting the line colour behind a grid and letting a
   pixel of gap show through, so wherever a last row ends early the empty
   slots are a solid block of that colour: a grey patch on paper, a grey
   patch on black (owner, Sep 24: "some different grey background"). Each
   cell draws its own right and bottom line instead, and the grid shows the
   page's ground. */
html .grid, html .lg-grid, html .inst-list{ background:var(--snow); gap:0; }
html .grid > *, html .lg-grid > *, html .inst-list > *{ box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line); }

/* THE ICONS, FINER. The same drawings, at a drafting pen's weight. */
svg.ss-g, svg.now-i, svg.day-g{ color:var(--dim); }
svg.ss-g *, svg.now-i *, svg.day-g *{ stroke-width:1.05; }

/* ── THE BAR AND THE MENU: the shared component (src/nav), in this site's
   colours. Navy on the light and dark grounds, black on black. */
:root{ --atlas-asos:#10305c; --atlas-rwis:#b8471f; --atlas-dcp:#2e8b87; --atlas-coop:#5e3c26; --atlas-cocorahs:#8f6fbf; }
:root{ --nv-bar:#0a1425; --nv-bar-ink:#ffffff; --nv-bar-lit:#66a7f1; --nv-bar-edge:rgba(0,0,0,.35); }
html[data-theme="black"]{ --nv-bar:#000000; --nv-bar-edge:#262626; }

/* ── THE FOOT ─────────────────────────────────────────────────────────── */
.ss-foot{ border-top:1px solid var(--line); margin-top:48px; font-family:var(--sans); background:var(--card); }
.ss-foot-in{ max-width:var(--wrap); margin:0 auto; padding:34px var(--gutter) 40px; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px; }
.ss-foot h4{ margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600; }
.ss-foot a{ display:block; color:var(--dim); text-decoration:none; font-size:13.5px; padding:3px 0; }
.ss-foot a:hover{ color:var(--ink); }
.ss-foot p{ color:var(--faint); font-size:12.5px; margin:0; line-height:1.5; }

/* ── STORM STATION'S OWN PAGES, in the weather page's hand ───────────── */
.ss-page{ font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.45; margin:0; }
.ss-page *{ box-sizing:border-box; }
.ss-page a{ color:inherit; }
.ss-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.ss-head{ background:var(--card); border-bottom:1px solid var(--line); }
.ss-head .ss-wrap{ padding-block:clamp(14px,2.2vw,22px) clamp(10px,1.6vw,16px); }
.ss-crumb{ font-size:13px; color:var(--dim); letter-spacing:.02em; margin:0; }
.ss-crumb a{ text-decoration:none; } .ss-crumb a:hover{ color:var(--ice-ink); text-decoration:underline; }
.ss-crumb i{ font-style:normal; color:var(--line); padding:0 6px; }
.ss-head h1{ font-size:clamp(24px,3.4vw,36px); line-height:1.08; letter-spacing:-.02em; font-weight:700; margin:6px 0 0; text-wrap:balance; }
.ss-sub{ color:var(--dim); font-size:15px; max-width:760px; margin:6px 0 0; line-height:1.5; }
.ss-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--faint); }
.ss-meta b{ color:var(--ink); font-weight:600; }
.ss-meta a{ color:var(--ice-ink); text-decoration:none; } .ss-meta a:hover{ text-decoration:underline; }

.ss-sevs{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.ss-sev{ font-family:var(--sans); font-size:12.5px; border:1px solid var(--line); border-radius:999px; padding:3px 10px 3px 8px;
  color:var(--dim); background:var(--card); display:inline-flex; align-items:center; gap:6px; }
.ss-sev::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--faint); }
.ss-sev b{ font-variant-numeric:tabular-nums; color:var(--ink); }
.ss-sev.sev-extreme::before{ background:var(--sev-extreme); } .ss-sev.sev-severe::before{ background:var(--sev-severe); }
.ss-sev.sev-moderate::before{ background:var(--sev-moderate); } .ss-sev.sev-minor::before{ background:var(--sev-minor); }

/* ── THE READER'S PLACE: the strip, and the place page's card under it ──
   Snowpack's front-door strip: sky, temperature, what it is doing and a
   press to open. What opens is the place page's own card, in the weather
   page's own classes. */
/* The weather shell pads every section by up to 44 px; this site's own
   bands set their own. */
.ss-page .ss-now, .ss-page .ss-cc, .ss-page .ss-head, .ss-page .ss-sec{ padding-block:0; }
.ss-page .ss-sec{ padding-top:26px; }
.ss-now{ background:var(--card); border-bottom:1px solid var(--line); }
.ss-now-in{ max-width:1440px; margin:0 auto; padding:10px clamp(12px,2.4vw,28px) 12px; }
.ss-now-eb{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; row-gap:2px; gap:4px 16px; margin:0 0 6px; }
.ss-now-eb p{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; }
.ss-now-eb b{ font-size:15px; font-weight:650; }
.ss-now-eb span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.ss-now-page{ font-size:13.5px; color:var(--ice-ink); text-decoration:none; font-weight:600; }
.ss-now-page:hover{ text-decoration:underline; }
.ss-strip{ width:100%; display:grid; grid-template-columns:44px auto minmax(0,1fr) auto; align-items:center; gap:12px;
  font:inherit; color:var(--ink); background:var(--snow); border:1px solid var(--line); padding:8px 14px; cursor:pointer; text-align:left; }
.ss-strip:hover{ background:var(--ice2); }
.ss-strip .ss-strip-g{ width:44px; height:44px; color:var(--dim); }
.ss-strip-t{ font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.ss-strip-t i{ font-style:normal; font-weight:500; color:var(--faint); }
.ss-strip-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ss-strip-txt b{ font-size:15px; font-weight:650; }
.ss-strip-txt span{ font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-strip-go{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ice-ink); }
.ss-strip-go svg{ width:18px; height:18px; transition:transform .18s ease; }
.ss-strip-go .close{ display:none; }
.ss-strip[aria-expanded="true"] .ss-strip-go .open{ display:none; }
.ss-strip[aria-expanded="true"] .ss-strip-go .close{ display:inline; }
.ss-strip[aria-expanded="true"] .ss-strip-go svg{ transform:rotate(180deg); }
.ss-now-x{ border:1px solid var(--line); border-top:0; background:var(--card); }
.ss-now-x .lead-in, .ss-now-x .week-in{ padding-inline:clamp(12px,2vw,24px); }
.ss-now-foot{ margin:0; padding:12px clamp(12px,2vw,24px) 14px; border-top:1px solid var(--line); font-size:13.5px; }
.ss-now-foot a{ color:var(--ice-ink); text-decoration:none; font-weight:600; }
.ss-now-foot a:hover{ text-decoration:underline; }
@media (max-width:560px){
  .ss-strip{ grid-template-columns:36px auto minmax(0,1fr) 22px; gap:10px; padding:8px 10px; }
  .ss-strip .ss-strip-g{ width:36px; height:36px; }
  .ss-strip-t{ font-size:28px; }
  .ss-strip-go span{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){ .ss-strip-go svg{ transition:none; } }

/* ── THE COMMAND CENTER: the map first ─────────────────────────────────
   Owner, Sep 24: "I also want the map to be the first thing the user sees,
   our amazing map... that will be the command center", and of the front
   door as it was: "it reads like a weird long scroll". The country, every
   alert in force painted on it and the temperature now at 24 cities, with
   the alerts and the cities beside it in one rail that scrolls on its own,
   so the page is one screen and not a column. */
.ss-cc{ background:var(--card); border-bottom:1px solid var(--line); }
.ss-cc-in{ max-width:1440px; margin:0 auto; padding:14px clamp(12px,2.4vw,28px) 16px; display:grid;
  grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:stretch; }
.ss-cc-map{ min-width:0; }
.ss-cc-head h1{ font-size:clamp(22px,2.6vw,30px); line-height:1.1; letter-spacing:-.02em; font-weight:700; margin:4px 0 0; text-wrap:balance; }
.ss-cc-head .ss-meta{ margin:8px 0 6px; }
.ss-cc-map .usmap svg{ display:block; width:100%; height:auto; }
.ss-cc-map .us-st{ fill:var(--map-land); stroke:var(--map-edge); stroke-width:1; stroke-linejoin:round; transition:fill .14s ease; }
.ss-cc-map .us-a:hover .us-st, .ss-cc-map .us-a:focus-visible .us-st{ fill:var(--map-hot); }
.ss-cc-map .us-k{ fill:var(--map-ink); font-family:var(--mono); font-weight:600; pointer-events:none; opacity:.8; }
.ss-cc-map .us-w{ fill:var(--map-water); stroke:var(--map-water-edge); stroke-width:.8; }
.ss-cc-map .us-wk{ fill:var(--map-water-ink); font-family:var(--mono); font-style:italic; letter-spacing:.04em; }
.ss-cc-map .us-sea{ fill:var(--map-sea); font-family:var(--mono); letter-spacing:.3em; }
.ss-cc-map .us-led{ stroke:var(--map-led); stroke-width:1; fill:none; pointer-events:none; }
.us-a.ax-extreme .us-st{ fill:color-mix(in srgb, var(--sev-extreme) 42%, var(--map-land)); }
.us-a.ax-severe .us-st{ fill:color-mix(in srgb, var(--sev-severe) 32%, var(--map-land)); }
.us-a.ax-moderate .us-st{ fill:color-mix(in srgb, var(--sev-moderate) 22%, var(--map-land)); }
.us-a.ax-minor .us-st{ fill:color-mix(in srgb, var(--sev-minor) 16%, var(--map-land)); }
.ss-poly{ stroke-width:1.2; stroke-linejoin:round; pointer-events:none; }
.ss-poly.sev-extreme{ fill:color-mix(in srgb, var(--sev-extreme) 45%, transparent); stroke:var(--sev-extreme); }
.ss-poly.sev-severe{ fill:color-mix(in srgb, var(--sev-severe) 40%, transparent); stroke:var(--sev-severe); }
.ss-poly.sev-moderate{ fill:color-mix(in srgb, var(--sev-moderate) 32%, transparent); stroke:var(--sev-moderate); }
.ss-poly.sev-minor{ fill:color-mix(in srgb, var(--sev-minor) 25%, transparent); stroke:var(--sev-minor); }
.ss-pin circle{ fill:var(--warm); stroke:var(--pin-halo); stroke-width:1.5; }
.ss-pin text{ fill:var(--pin); font-family:var(--sans); font-weight:700; paint-order:stroke; stroke:var(--pin-halo);
  stroke-width:3.2px; stroke-linejoin:round; font-variant-numeric:tabular-nums; }
.ss-pin:hover circle, .ss-pin:focus-visible circle{ fill:var(--pin); }
.ss-pin:focus-visible text{ text-decoration:underline; }
/* THE LAYERS: the instruments lead, the alerts and the temperatures are a
   press away. Each switch says whether its layer is on. */
.ss-layers{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
.ss-layer{ font:inherit; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); background:var(--card); border:1px solid var(--line); padding:6px 11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; }
.ss-layer::before{ content:""; width:9px; height:9px; border:1.5px solid currentColor; border-radius:2px; }
.ss-layer[aria-pressed="true"]{ color:var(--ink); border-color:var(--ink); }
.ss-layer[aria-pressed="true"]::before{ background:var(--warm); border-color:var(--warm); }
.ss-layer:focus-visible{ outline:2px solid var(--ice); outline-offset:2px; }
.ss-ccmap{ position:relative; }
.ss-ccmap .usmap{ max-width:none; margin:0; padding:0; }
/* Instruments off: the dots go, and the states take their ground back. */
.ss-ccmap:not(.show-inst) .atlas-c{ visibility:hidden; }
.ss-ccmap:not(.show-inst) .usmap.dots-on .us-a .us-st{ fill:var(--map-land); stroke:var(--map-edge); }
.ss-ccmap:not(.show-inst) .usmap.dots-on .us-k{ fill:var(--map-ink); }
/* Alerts off: no tint and no outlines. On: over the dots the tint is a wash,
   so the instruments under it still read. */
.ss-ccmap:not(.show-alerts) .ss-polys{ display:none; }
.ss-ccmap.show-alerts .usmap.dots-on .us-a.ax-extreme .us-st{ fill:color-mix(in srgb, var(--sev-extreme) 30%, transparent); }
.ss-ccmap.show-alerts .usmap.dots-on .us-a.ax-severe .us-st{ fill:color-mix(in srgb, var(--sev-severe) 24%, transparent); }
.ss-ccmap.show-alerts .usmap.dots-on .us-a.ax-moderate .us-st{ fill:color-mix(in srgb, var(--sev-moderate) 18%, transparent); }
.ss-ccmap:not(.show-alerts) .us-a[class*="ax-"] .us-st{ fill:var(--map-land); }
.ss-ccmap.show-inst:not(.show-alerts) .usmap.dots-on .us-a[class*="ax-"] .us-st{ fill:none; }
.ss-ccmap:not(.show-temps) .ss-pins{ display:none; }
.ss-key-l{ display:none; margin:0; flex-wrap:wrap; align-items:center; gap:6px 14px; }
#cckey.k-on-inst .k-inst, #cckey.k-on-alerts .k-alerts, #cckey.k-on-temps .k-temps{ display:flex; }
.ss-key{ display:flex; flex-direction:column; gap:6px; margin-top:8px; font-size:12px; color:var(--dim); }
.ss-key i{ font-style:normal; display:inline-flex; align-items:center; gap:6px; }
.ss-key i::before{ content:""; width:10px; height:10px; border-radius:2px; background:var(--k); }
.ss-key i.k-pin::before{ border-radius:50%; background:var(--warm); }

.ss-rail{ position:relative; min-height:420px; border:1px solid var(--line); background:var(--snow); }
.ss-rail-in{ position:absolute; inset:0; display:flex; flex-direction:column; }
.ss-tabs{ display:flex; border-bottom:1px solid var(--line); background:var(--card); flex:0 0 auto; }
.ss-tabs button{ flex:1; font:inherit; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); background:none; border:0; border-bottom:2px solid transparent; padding:11px 8px 9px; cursor:pointer; }
.ss-tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--warm); }
.ss-tabs button b{ font-weight:600; color:var(--ink); margin-left:4px; }
.ss-tabp{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; }
.ss-rail-foot{ flex:0 0 auto; border-top:1px solid var(--line); padding:9px 12px; background:var(--card); font-size:13px; }
.ss-rail-foot a{ color:var(--ice-ink); text-decoration:none; } .ss-rail-foot a:hover{ text-decoration:underline; }

.ss-cities{ list-style:none; margin:0; padding:0; }
.ss-city{ display:grid; grid-template-columns:minmax(0,1fr) auto 26px; align-items:center; gap:2px 10px; padding:8px 12px;
  border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); background:var(--card); }
.ss-city:hover{ background:var(--ice2); }
.ss-city-n{ font-size:14px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-city-n i{ font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-left:6px; font-weight:500; }
.ss-city-t{ font-size:20px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-align:right; grid-row:1/3; grid-column:2; }
.ss-city-t small{ font-size:11px; color:var(--faint); margin-left:1px; font-weight:500; }
.ss-city .ss-g{ width:26px; height:26px; grid-row:1/3; grid-column:3; }
.ss-city-s{ font-size:12px; color:var(--dim); font-family:var(--mono); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ss-alerts{ background:var(--card); }
.ss-alert{ border-bottom:1px solid var(--line); border-left:3px solid var(--line); }
.ss-alert.sev-extreme{ border-left-color:var(--sev-extreme); } .ss-alert.sev-severe{ border-left-color:var(--sev-severe); }
.ss-alert.sev-moderate{ border-left-color:var(--sev-moderate); } .ss-alert.sev-minor{ border-left-color:var(--sev-minor); }
.ss-alert summary{ list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:9px 12px; font-size:13.5px; }
.ss-alert summary::-webkit-details-marker{ display:none; }
.ss-alert summary:hover{ background:var(--ice2); }
.ss-alert-e{ font-weight:650; }
.ss-alert-s{ text-align:right; font-family:var(--mono); font-size:11.5px; grid-row:1; grid-column:2; align-self:baseline; }
.ss-alert-s a{ color:var(--ice-ink); text-decoration:none; margin-left:5px; }
.ss-alert-a{ grid-column:1/-1; color:var(--dim); font-size:12.5px; line-height:1.4; }
.ss-alert-t{ grid-column:1/-1; font-family:var(--mono); font-size:11.5px; color:var(--faint); }
.ss-alert-body{ padding:2px 14px 14px 13px; color:var(--ink); font-size:13.5px; line-height:1.55; }
.ss-alert-body p{ margin:0 0 8px; }
.ss-alert-body h4{ margin:12px 0 4px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.ss-alert-full b{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-right:6px; font-weight:600; }
.ss-quiet{ padding:16px 12px; color:var(--dim); margin:0; font-size:14px; }

/* The alerts page lists at full width, with the summary on one line. */
.ss-list{ border:1px solid var(--line); margin:18px 0 0; }
@media (min-width:861px){
  .ss-list .ss-alert summary{ grid-template-columns:230px minmax(0,1fr) 170px 110px; align-items:baseline; gap:12px; padding:11px 14px; }
  .ss-list .ss-alert-a, .ss-list .ss-alert-t{ grid-column:auto; }
  .ss-list .ss-alert-e{ order:1; } .ss-list .ss-alert-a{ order:2; } .ss-list .ss-alert-t{ order:3; } .ss-list .ss-alert-s{ order:4; grid-row:auto; grid-column:auto; }
  .ss-list .ss-alert-body{ max-width:900px; padding-left:17px; }
}

.ss-sec{ padding:26px 0 0; }
.ss-sec h2{ font-size:20px; letter-spacing:-.015em; margin:0 0 4px; }
.ss-sec .ss-lede{ color:var(--dim); margin:0 0 12px; font-size:14px; }
.ss-doors{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); border:1px solid var(--line); background:var(--snow); gap:0; }
.ss-doors > *{ box-shadow:1px 0 0 var(--line), 0 1px 0 var(--line); }
.ss-door{ display:block; background:var(--card); padding:16px 16px 14px; text-decoration:none; color:var(--ink); }
.ss-door:hover{ background:var(--ice2); }
.ss-door .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.ss-door h3{ margin:5px 0 4px; font-size:16px; }
.ss-door p{ margin:0; color:var(--dim); font-size:13.5px; line-height:1.5; }
.ss-btn{ display:inline-block; margin-top:12px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  padding:8px 14px; font-size:13.5px; text-decoration:none; }
.ss-btn:hover{ background:var(--ice2); }

@media (max-width:1100px){
  .ss-cc-in{ grid-template-columns:1fr; }
  .ss-rail{ min-height:0; }
  .ss-rail-in{ position:static; }
  .ss-tabp{ max-height:62vh; }
}
@media (max-width:560px){
  .ss-cc-head h1{ font-size:22px; }
  .ss-cc-in{ padding:8px 0 12px; gap:10px; }
  .ss-cc-map .ss-key, .ss-cc-head{ padding:0 12px; }
  .ss-rail{ border-left:0; border-right:0; }
}
@media (prefers-reduced-motion:reduce){ .ss-cc-map .us-st{ transition:none; } }