/* The weather glyphs' paint — the CSS half of static/js/nh_wx_icons.js.
 *
 * It moved out of css/pages/open_map_weather.css on 2026-09-05 for exactly the
 * reason the shapes moved out of open_map_weather.js: two surfaces draw them
 * now (a station's card on the open map, and the dashboard's weather widget),
 * and a palette that exists twice is a palette that will eventually paint a
 * different sun on each. These seven colours ARE the icon set — the shapes
 * carry no fill of their own — so they belong with the shapes and not with
 * either page.
 *
 * Sized in `em`, so one glyph follows whatever font size the block around it
 * is set in and neither caller needs to know a pixel number. `--wx-icon-size`
 * is the one knob: the map's card sets nothing and gets 2.1em; the dashboard
 * widget, whose cells go down to 90 px, turns it down in its own stylesheet.
 *
 * Painted from named classes rather than `currentColor`: a sun the same grey
 * as the text beside it is not a sun. Every colour has a `body.dark-mode`
 * partner where it needs one — this app's dark mode is a class on <body>, not
 * a media query, so a `prefers-color-scheme` block here would paint the wrong
 * half of the readers.
 */

.wx-icon {
  width: var(--wx-icon-size, 2.1em);
  height: var(--wx-icon-size, 2.1em);
  flex: none;
  display: block;
}

.wx-icon .wx-sun { fill: #f0a824; }
.wx-icon .wx-ray { stroke: #f0a824; stroke-width: 1.7; stroke-linecap: round; fill: none; }
.wx-icon .wx-cloud { fill: #b8c2cf; }
.wx-icon .wx-fog { stroke: #b8c2cf; stroke-width: 1.7; stroke-linecap: round; fill: none; }
.wx-icon .wx-rain { stroke: #3b82c4; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.wx-icon .wx-snow { stroke: #7dd3fc; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.wx-icon .wx-bolt { fill: #f0a824; }

body.dark-mode .wx-icon .wx-cloud { fill: #94a3b8; }
body.dark-mode .wx-icon .wx-fog { stroke: #94a3b8; }
body.dark-mode .wx-icon .wx-rain { stroke: #60a5fa; }