/* ============================================================================
   Forecast Flakes — the snowfall meteogram.

   This is Forecast Points' interface, in Forecast Flakes' colours. The layout
   grammar is theirs and deliberately unchanged — a sticky control rail on the
   left, a stack of signage-headed boxes on the right, monospaced numbers in
   columns, no dark mode — because a reader who has used one of these should not
   have to learn the other. What changes is the lead colour: Forecast Points
   leads with motorist-services blue because a point forecast is "what is
   available at this exit"; this page leads with the network's snow blue,
   #2f57bf, which is the six-inch band of the NWS snowfall scale, so the page's
   accent and the maps it links to are literally the same blue.

   No dark mode, here or anywhere on the network. This is laid out like a
   trading terminal, but terminals are dark because they are read in a dark room
   for eight hours; a forecast is read for ninety seconds in daylight and then
   printed into a briefing, so it is a document.
   ========================================================================== */

.hud { display:grid; grid-template-columns:306px minmax(0,1fr); gap:14px;
  align-items:start; padding:14px 0 40px; }
@media (max-width:1000px){ .hud{ grid-template-columns:minmax(0,1fr); } }

.hud-side { display:flex; flex-direction:column; gap:12px; position:sticky; top:16px; }
@media (max-width:1000px){ .hud-side{ position:static; } }
.hud-stage { display:flex; flex-direction:column; gap:12px; min-width:0; }

.box { background:var(--card); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.07); overflow:hidden; }
.box > .bhead { margin:0; background:var(--snow); color:#fff; padding:7px 12px;
  font:900 10.5px/1.3 'Overpass Mono',ui-monospace,monospace; letter-spacing:.14em;
  text-transform:uppercase; display:flex; align-items:center;
  justify-content:space-between; gap:8px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3); }
.box > .bhead.green { background:var(--sign); }
.box > .bhead .n { font-weight:700; color:var(--blue-sub); letter-spacing:.06em; }
.box .bbody { padding:12px; }
.box .bbody.tight { padding:8px; }

/* ── the identity strip ─────────────────────────────────────────────────── */
.ident { padding:12px 14px; }
.ident .place { font:900 21px/1.15 'Overpass',sans-serif; letter-spacing:-.01em; }
.ident .sub { margin-top:4px; font:700 10.5px/1.5 'Overpass Mono',monospace;
  color:var(--mut); letter-spacing:.05em; text-transform:uppercase; }

/* ── controls ───────────────────────────────────────────────────────────── */
.fld { display:block; margin-bottom:10px; }
.fld > label { display:block; font:800 9.5px/1.4 'Overpass Mono',monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin-bottom:4px; }
.fld select, .fld input[type="range"] { width:100%; }
select { background:#fff; border:1px solid var(--line); color:var(--ink);
  border-radius:3px; padding:6px 9px; font-family:'Overpass',sans-serif;
  font-weight:700; font-size:12px; }
select:focus { outline:2px solid var(--snow); outline-offset:1px; }

.seg { display:flex; }
.seg button { font:700 11px 'Overpass Mono',monospace; background:var(--card);
  color:var(--ink2); border:1px solid var(--line); border-left-width:0;
  padding:5px 9px; cursor:pointer; }
.seg button:first-child { border-left-width:1px; border-radius:4px 0 0 4px; }
.seg button:last-child { border-radius:0 4px 4px 0; }
.seg button:hover { color:var(--ink); }
.seg button.on { background:var(--snow); color:#fff; border-color:var(--snow-dk); }

.btn { cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink2);
  border-radius:3px; font-family:'Overpass',sans-serif; font-weight:700; font-size:11.5px;
  letter-spacing:.02em; padding:7px 12px; line-height:1.3; text-decoration:none;
  display:inline-block; }
.btn:hover { border-color:var(--snow); color:var(--ink); }
.btn.on { background:var(--snow); color:#fff; border-color:var(--snow-dk); }
.btn.wide { width:100%; margin-top:7px; text-align:center; }

/* The place list is a rail, not a dropdown: twenty-six towns strung along one
   storm track read as a sequence, and picking the next one down is the gesture
   this page is actually for. */
.places { max-height:340px; overflow:auto; border-top:1px solid var(--line2); }
.pl { display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  border:0; border-bottom:1px solid var(--line2); background:transparent;
  padding:6px 12px; cursor:pointer; font-family:'Overpass',sans-serif; }
.pl:hover { background:var(--paper2); }
.pl.on { background:var(--snow); color:#fff; }
.pl .nm { font-weight:800; font-size:12.5px; flex:1; }
.pl .st { font:700 10px 'Overpass Mono',monospace; opacity:.65; }
.pl .ob { font:800 12px 'Overpass Mono',monospace; font-variant-numeric:tabular-nums; }

/* ── the chart ──────────────────────────────────────────────────────────── */
.chart { width:100%; display:block; background:#fff; }
.chart text { font-family:'Overpass Mono',ui-monospace,monospace; }
.axl { font-size:10px; fill:var(--mut); }
.axt { font-size:10.5px; fill:var(--ink2); font-weight:700; }
.axk { font-size:9.5px; fill:var(--mut); letter-spacing:.1em; text-transform:uppercase; }
.gl { stroke:var(--grid); stroke-width:1; shape-rendering:crispEdges; }
.gl0 { stroke:var(--line); stroke-width:1.4; shape-rendering:crispEdges; }
.night { fill:#dce4f2; opacity:.55; }
.dayrule { stroke:var(--line); stroke-width:1; stroke-dasharray:3 3; }

.readout { display:flex; flex-wrap:wrap; gap:10px 20px; padding:9px 12px;
  border-top:1px solid var(--line2); background:var(--paper2);
  font:700 11px 'Overpass Mono',monospace; }
.readout .k { color:var(--mut); letter-spacing:.08em; text-transform:uppercase; }
.readout .v { color:var(--ink); font-weight:800; }
.readout .v.up { color:var(--red); }
.readout .v.dn { color:var(--blue); }

.legrow { display:flex; flex-wrap:wrap; gap:6px 16px; padding:8px 12px;
  border-top:1px solid var(--line2); font:700 10.5px 'Overpass Mono',monospace;
  color:var(--ink2); }
.legrow i { display:inline-block; width:16px; height:9px; border-radius:2px;
  margin-right:5px; vertical-align:middle; font-style:normal; }
.legrow i.ln { height:0; border-top:2.5px solid currentColor; border-radius:0; }

table.sg { width:100%; border-collapse:collapse; font:700 11.5px 'Overpass Mono',monospace;
  font-variant-numeric:tabular-nums; }
table.sg th, table.sg td { padding:5px 9px; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--line2); }
table.sg th:first-child, table.sg td:first-child { text-align:left; }
table.sg thead th { color:var(--mut); font-weight:800; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; }
table.sg tr.sel td { background:#e8eefb; }
table.sg td.hit { color:var(--sign); }
table.sg td.over { color:var(--red); }
table.sg td.under { color:var(--blue); }

.fine2 { font:600 11px/1.55 'Overpass',sans-serif; color:var(--ink2); margin:0; }
.fine2 b { color:var(--ink); }

@media print {
  .util, .hud-side, .no-print, footer { display:none !important; }
  .hud { grid-template-columns:1fr; }
  .box { box-shadow:none; break-inside:avoid; }
}

/* ── the decision-horizon panel ─────────────────────────────────────────── */
.dlab { font:800 12.5px 'Overpass',sans-serif; fill:var(--ink); }
.dsub { font:700 9.5px 'Overpass Mono',monospace; fill:var(--mut);
  letter-spacing:.07em; text-transform:uppercase; }
.dchip { font:800 9px 'Overpass Mono',monospace; letter-spacing:.06em; }
.dchip2 { font:800 10px 'Overpass Mono',monospace; letter-spacing:.05em; }

/* The written decision verdict reads as a conclusion, not as another caption. */
.verdict-decide { background:#eef3ec; border:1px solid #cfe0d3; border-left:4px solid var(--sign);
  border-radius:8px; padding:10px 14px; margin:10px 0 0; font-size:13px; line-height:1.65;
  color:var(--ink2); }
.verdict-decide b { color:var(--ink); }

/* The printable sheet gets the accent: it is the thing a reader takes away. */
.btn-pdf { background:var(--snow); color:#fff; border-color:var(--snow-dk);
  font-weight:800; letter-spacing:.04em; }
.btn-pdf:hover { background:var(--snow-dk); color:#fff; border-color:var(--snow-dk); }