/* Forecast Points' setting for the two precipitation pages (/storylines, /rain-or-snow).
 *
 * The pages were designed in Forecast City's motif, and since 2026-10-23 the whole site wears
 * it, so this no longer reskins them: it sets them on Forecast City's own paper and green
 * (forecast.city/theme/tokens.json) under the site's shared header (assets/chrome.css), and
 * keeps their sign-yellow rule. The precipitation palette (rain green, mix magenta, snow blue,
 * dry tan) is data colour and untouched. Loaded after each page's own <style>, so these win.
 * Light only, like every page on the network.
 */
:root {
  --paper: #FBF8F1;
  --hair: #DDD2BE;
  --hair-2: #E6DDCB;
  --sign: #00703C;          /* Forecast City's guide-sign green */
  --rule: #FFCE00;          /* sign yellow */
}
.picker, .secnav { background: rgba(251, 248, 241, .97); }
/* The site header already draws the yellow rule; the templates' own would be a second one. */
.mast { border-top: 0; }

/* Until the station's document has loaded and the page has drawn, show the masthead only:
   the templates hold placeholder text that would otherwise flash. visibility, not display,
   so the charts measure their real widths while hidden. */
.fp-loading .mast .deck, .fp-loading .picker, .fp-loading .secnav, .fp-loading main,
.fp-loading footer { visibility: hidden; }

/* The station switcher and the range switch, in the masthead's chip row. */
.chip.stn { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 9px; }
.chip.stn select { font: inherit; font-weight: 750; border: 0; background: transparent; color: var(--ink);
  max-width: 220px; cursor: pointer; }
.rangeseg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.rangeseg a { font-family: var(--display); font-weight: 750; font-size: var(--s1); padding: 4px 11px 2px;
  color: var(--ink); background: var(--card); text-decoration: none; white-space: nowrap; }
.rangeseg a[aria-current="true"] { background: var(--ink); color: #fff; }

/* The chooser: every station, wettest first. */
.roster td a { color: var(--ink); text-decoration: none; }
.roster td a:hover { text-decoration: underline; }
.roster td small { display: block; font-family: var(--display); font-weight: 600; font-size: var(--s1);
  color: var(--ink-3); }
.roster td.sl { text-align: left; font-family: var(--display); font-weight: 700; white-space: normal; }
.roster .bar3 { display: flex; height: 10px; width: 120px; border-radius: 2px; overflow: hidden;
  background: var(--hair-2); margin-left: auto; }
.roster .bar3 i { display: block; height: 100%; }
/* A phone gets the station, its type split and its storyline; the numbers are a tap away. */
@media (max-width: 640px) {
  .cmp.roster { min-width: 0; }
  .roster .w { display: none; }
  .roster .bar3 { width: 64px; }
  .roster th, .roster td { padding: 7px 6px; }
  .roster th { letter-spacing: .02em; }
  .roster td:first-child { white-space: normal; }
  .roster td.sl { font-size: var(--s1); }
}
.notice { font-family: var(--display); font-size: var(--s3); color: var(--ink-2); }