/* Weather stations (/station/, 2026-10-26). Its own file so the page doesn't touch the shared style.css.
   Chart colours: observed bars in ink, normal range a pale band, record high warm (--pig), record low cool
   (--sky-deep), rain green (the site's impact colour for rain). */
:root{
  --st-obs:   #2c3a55;
  --st-norm:  rgba(31,79,130,.13);
  --st-rhi:   var(--pig);
  --st-rlo:   var(--sky-deep);
  --st-rain:  #237a3b;
  --st-rnorm: #7d879c;
  --st-dot:   rgba(72,84,108,.45);
}
/* Dark is the site toggle only (data-theme), as in style.css; no OS media query. */
:root[data-theme="dark"]{
  --st-obs:  #d6deec; --st-norm: rgba(140,170,210,.16); --st-rain: #6fc46f; --st-rnorm: #8c96aa; --st-dot: rgba(190,200,220,.45);
}

.st-wrap{ max-width:980px; }
.st-asof{ margin:8px 0 0; font-size:14px; color:var(--ink-3); }
.st-section{ padding-top:0; }
.section.st-top{ padding-bottom:20px; }

.st-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:0 0 8px; }
.st-tile{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:0; }
.st-tile .l{ margin:0; font-size:13px; font-weight:600; color:var(--ink-2); }
.st-tile .v{ margin:2px 0 0; font-family:var(--font-display); font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.st-tile .s{ margin:2px 0 0; font-size:13px; color:var(--ink-3); }

.st-block{ margin:28px 0 0; }
.st-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.st-h2{ font-family:var(--font-display); font-size:22px; margin:0 0 8px; text-wrap:balance; }
.st-prose{ margin:0 0 8px; color:var(--ink-2); max-width:70ch; }
.st-note{ margin:6px 0 0; font-size:13px; color:var(--ink-3); }

.st-seg{ display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; }
.st-seg button{ font:inherit; font-size:14px; padding:8px 14px; min-height:40px; background:none; border:0; color:var(--ink-2); cursor:pointer; }
.st-seg button[aria-pressed="true"]{ background:var(--fill-sky); color:#fff; }

.st-chart{ position:relative; margin:4px 0 0; }
.st-chart svg{ display:block; overflow:visible; }
.st-grid{ stroke:var(--line); stroke-width:1; }
.st-tick{ stroke:var(--line-2); stroke-width:1; }
.st-ax{ font-size:11px; fill:var(--ink-3); font-variant-numeric:tabular-nums; }
.st-norm{ fill:var(--st-norm); }
.st-rhi{ fill:none; stroke:var(--st-rhi); stroke-width:1.5; opacity:.75; }
.st-rlo{ fill:none; stroke:var(--st-rlo); stroke-width:1.5; opacity:.75; }
.st-obs{ fill:var(--st-obs); }
.st-rain{ fill:none; stroke:var(--st-rain); stroke-width:2.5; stroke-linejoin:round; }
.st-rnorm{ fill:none; stroke:var(--st-rnorm); stroke-width:2; stroke-dasharray:5 4; }
.st-guide{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; }
.st-mean{ stroke:var(--st-rnorm); stroke-width:1.5; stroke-dasharray:5 4; }
.st-dot{ fill:var(--st-dot); }
.st-dot.me{ fill:var(--pig); stroke:var(--bg); stroke-width:2; }
.st-tip{ position:absolute; top:0; pointer-events:none; background:var(--bg); border:1px solid var(--line-2); border-radius:8px;
  padding:6px 9px; font-size:13px; line-height:1.4; color:var(--ink); box-shadow:0 4px 14px var(--shadow); white-space:nowrap; z-index:2; }

.st-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 0; font-size:13px; color:var(--ink-2); }
.st-legend i{ display:inline-block; width:14px; height:10px; margin-right:6px; vertical-align:-1px; border-radius:2px; }
.st-legend .k-obs{ background:var(--st-obs); width:5px; height:14px; vertical-align:-3px; }
.st-legend .k-norm{ background:var(--st-norm); border:1px solid var(--line-2); }
.st-legend .k-rhi{ height:2px; background:var(--st-rhi); vertical-align:3px; }
.st-legend .k-rlo{ height:2px; background:var(--st-rlo); vertical-align:3px; }
.st-legend .k-rain{ height:3px; background:var(--st-rain); vertical-align:3px; }
.st-legend .k-rnorm, .st-legend .k-mean{ height:0; border-top:2px dashed var(--st-rnorm); vertical-align:3px; border-radius:0; }
.st-legend .k-me{ width:10px; height:10px; border-radius:50%; background:var(--pig); }
.st-legend .k-dot{ width:8px; height:8px; border-radius:50%; background:var(--st-dot); }

.st-recs{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.st-recs li{ font-size:15px; color:var(--ink-2); }
.st-recs b{ color:var(--ink); display:inline-block; min-width:56px; }
.st-recs strong{ color:var(--ink); }

.st-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; }
.st-table{ width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.st-table th, .st-table td{ padding:8px 10px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); }
.st-table th:first-child, .st-table td:first-child{ text-align:left; position:sticky; left:0; background:var(--bg); }
.st-table thead th{ font-size:12px; font-weight:600; color:var(--ink-3); background:var(--bg-2); }
.st-table thead th:first-child{ background:var(--bg-2); }
.st-table tbody tr:last-child td{ border-bottom:0; }
.st-table td.w{ color:var(--pig); }
.st-table td.c{ color:var(--sky-deep); }
.st-table small{ color:var(--ink-3); font-size:12px; }

.st-find{ display:flex; align-items:center; gap:12px; margin:0 0 12px; }
.st-find input{ flex:1; font:inherit; font-size:16px; padding:10px 14px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); color:var(--ink); min-width:0; }
.st-count{ font-size:13px; color:var(--ink-3); white-space:nowrap; }
.st-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 20px; }
.st-row{ display:flex; align-items:baseline; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; min-width:0; }
.st-row b{ font-family:var(--font-display); min-width:48px; }
.st-row span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.st-row em{ font-style:normal; font-size:12px; color:var(--ink-3); white-space:nowrap; }
.st-row:hover b{ color:var(--sky-deep); }

@media (max-width: 760px){
  .st-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .st-list{ grid-template-columns:1fr; }
  .st-tile .v{ font-size:22px; }
}
/* list page (2026-10-27): major cities, then a state picker */
#stHome .st-h2{ margin-top:24px; }
.st-pick{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:14px; color:var(--ink-2); }
.st-pick select{ font:inherit; font-size:16px; padding:8px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); color:var(--ink); min-width:0; max-width:100%; }
.st-pick select:focus-visible{ outline:2px solid var(--sky-deep); outline-offset:2px; }

/* dry spell + this day in history + Share (2026-10-30, Mike) */
.st-head:has(.st-share){ flex-wrap:nowrap; align-items:flex-start; }
.st-head:has(.st-share) .st-h2{ flex:1; min-width:0; }
.st-share{ flex:none; color:var(--ink-2); border:1px solid var(--line-2); min-height:36px; }
.st-callout{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--pig); border-radius:12px; padding:14px 16px 10px; }
.st-callout .st-h2{ margin-bottom:4px; }
.st-dryband{ fill:var(--pig); opacity:.10; }
.st-pbar{ fill:var(--st-rain); }
.st-ago{ grid-template-columns:repeat(5, minmax(0,1fr)); margin-top:14px; }
.st-tops{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px 20px; margin:14px 0 0; }
.st-tops .l{ margin:0 0 4px; font-size:13px; font-weight:600; color:var(--ink-2); }
.st-tops ol{ margin:0; padding:0 0 0 20px; font-size:15px; color:var(--ink-2); }
.st-tops li{ margin:2px 0; }
.st-tops strong{ color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width: 760px){
  .st-ago{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .st-ago .st-tile:last-child:nth-child(odd){ grid-column:1 / -1; }
  .st-tops{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.st-callout-wet{ border-left-color:var(--st-rain); }
.st-wetband{ fill:var(--st-rain); opacity:.10; }
/* records set: the latest 8, then this (2026-10-30) */
.st-more{ margin:10px 0 0; font:inherit; font-size:14px; font-weight:600; color:var(--sky-deep); background:none; border:1px solid var(--line-2);
  border-radius:999px; padding:8px 14px; min-height:40px; cursor:pointer; }
.st-more:hover{ border-color:var(--sky-deep); }
.st-recs li[hidden]{ display:none; }
.st-todayhead{ margin:18px 0 8px; }
.st-todayhead .st-h2{ margin:0; }