/* Weather-map design tokens (2026-10-05): the colours, sizes and type of Marc's mockups as CSS custom properties, dark and light.
   Custom properties only. The page links this file before wx.css; wx.css uses the names and imports nothing.

   Dark is the mockups' own. The dark colours were sampled from the PNGs (docs/audits/weather-map-redesign-2026-10-05/
   design-tokens.json: each comment names the JSON key; design-tokens.md says where it is used), except where a comment says
   otherwise (the map's ground, the verdict's three levels, the shadow, and the few rgba values that are the sample's estimate
   as a translucent colour). The mockups: 1 dark timeline bar, 2 light map controls and legend, 3 light timeline bar,
   4 Overview close-up, 5 the desktop screen (the reference), 6 Models tab, 7 compact layout with the drawer, 8 gauge rows,
   9 light warning box. Light follows the site's theme pill (data-theme on the html element): the JSON's light values where a
   light mockup has the thing (2, 3, 9), the site's light tokens (--v4-* in public/home-v4/chrome.css) for the panel and the
   drawer, and a plain pick where neither has it (the comment says "no mockup").

   Where things live: the dark rule holds everything (the colours, the shadow, the type and the sizes); the light rule holds the
   colours and the shadow only, in the same order. The dark rule also matches in the light theme, so a colour left out of the
   light rule would show its dark value there: every colour is in BOTH rules. Type and sizes are written ONCE, in the dark rule,
   and the light theme inherits them: the light selector is more specific than a plain .wx rule, so a size repeated there would
   beat a later media rule in wx.css (the phone's --wx-bars and --wx-nav) in the light theme only.
   scripts/test-weather-map-tokens.mjs pins this.

   Sizes are CSS px: the panel, the controls, the timeline bar and the corner radii are 5.png at its 1.6 scale (design-tokens.md
   section 5; each comment shows the sum), the drawer is 7.png at 1x. */

.wx {
  /* type */
  --wx-font: var(--v4-font, 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif);  /* Manrope only (public/home-v4/manrope-*.ttf): the stack wx.css already uses */

  /* ground, panel and cards */
  --wx-bg: #07142a;                          /* the dark ground behind the map and the panels: today's wx.css value (the mockups show the map there, so nothing was sampled) */
  --wx-panel: rgba(4, 20, 38, .94);          /* 5.png: panel body, translucent navy over the map. JSON panel-bg-css-equivalent says .88, but that alpha was an estimate: over the map .88 rendered about 20 lighter than the sampled #081b2e (the comparison, Task 13), so the ruling of 6 Oct 12:00 set .94; the JSON stays the sampling record. The 12px backdrop blur goes where the panel is styled */
  --wx-panel-2: #0d253b;                     /* 5.png: the darker inset cards, day tiles and chart wells (JSON tile-bg) */
  --wx-card: #0a2034;                        /* 5.png: the verdict block (JSON card-bg) */
  --wx-card-line: rgba(60, 140, 200, .35);   /* 5.png: the verdict block's 1px border, sampled about #1e4c72 top and #134561 left (design-tokens.md 1a) */
  --wx-tile-chance: #102d4e;                 /* 5.png: the inactive chance tiles (JSON chance-tile-inactive-bg) */
  --wx-tile-chance-line: #133e6d;            /* 5.png: their 1px border (JSON chance-tile-inactive-border) */
  --wx-line: #6da7d0;                        /* 5.png: the 1.5px hairline round the panel and the timeline bar, flat as sampled (JSON panel-border) */
  --wx-divider: #102f4a;                     /* 5.png: the 1px rule under the day tiles (JSON divider) */

  /* text */
  --wx-text: #ffffff;                        /* 5.png: title, verdict headline, tile numbers (JSON text-primary) */
  --wx-muted: #d9e5f0;                       /* 5.png: subtitle and body text (JSON text-secondary-subtitle) */
  --wx-faint: #a6c0d9;                       /* 5.png: the model name and run lines (JSON text-tertiary-model-name) */
  --wx-pill-sub: #98bcdc;                    /* 5.png: the pill's "BST · +78 h" (JSON text-tertiary-pill-suffix) */
  --wx-link: #00b5f5;                        /* 7.png: View all, Reset to default (JSON link-cyan-view-all-7png) */

  /* tabs and chips */
  --wx-accent: #1a5bc3;                      /* 5.png: the active tab pill and the active chance tile (JSON tab-active-bg) */
  --wx-accent-ink: #f8fcff;                  /* 5.png: text on the active tab (JSON tab-text-active) */
  --wx-track: #132f4f;                       /* 5.png: the tab strip behind the pills (JSON tab-bar-bg) */
  --wx-chip: #18437d;                        /* 5.png: the ECMWF chip (JSON pill-bg) */
  --wx-close: #183a69;                       /* 5.png: the round close button (JSON close-bg) */
  --wx-time-pill: #1e3e61;                   /* 5.png: the Thu 8 Oct 07:00 pill at the top right (JSON time-pill-bg) */

  /* the verdict */
  --wx-good: #158c42;                        /* 5.png: the verdict disc (JSON verdict-green-fill) */
  --wx-good-ring: #70e098;                   /* 5.png: the disc's 2px rim (JSON verdict-green-rim) */
  --wx-good-ink: #3fd564;                    /* 5.png: the LOW RAINFALL RISK text (JSON verdict-green-text) */
  --wx-amber: #ffcc3d;                       /* not in the mockups (they show only the lowest verdict): the site's own --v4-elevated, the verdict's level 1 */
  --wx-orange: #ff9142;                      /* not in the mockups: the site's own --v4-above, the verdict's level 2 */
  --wx-red: #ff5b63;                         /* not in the mockups: the site's own --v4-high, the verdict's level 3 */
  --wx-amber-ring: #ffe08a;                  /* derived: no mockup for levels 1-3. The level-1 disc's 2px rim, --wx-amber about 30% lighter (5.png's green rim is its disc lightened) */
  --wx-orange-ring: #ffb98a;                 /* derived: no mockup for levels 1-3. The level-2 disc's rim, --wx-orange about 30% lighter */
  --wx-red-ring: #ff9aa0;                    /* derived: no mockup for levels 1-3. The level-3 disc's rim, --wx-red about 30% lighter */
  --wx-grey: #7f94b2;                        /* derived: no mockup for the grey verdicts (not yet rated, no forecast here): their disc */
  --wx-grey-ring: #a6b6ce;                   /* derived: no mockup. The grey disc's rim, about 30% lighter */

  /* the warning box */
  --wx-warn-bg: #fda648;                     /* 5.png: the orange warning box, flat (JSON alert-bg) */
  --wx-warn-bg-2: #fda648;                   /* 5.png: the box's gradient foot: as --wx-warn-bg, so the dark box stays flat (wx.css draws both themes' box as one gradient) */
  --wx-warn-ink: #0d1218;                    /* 5.png: its title (JSON alert-title) */
  --wx-warn-icon: #e63d0a;                   /* 5.png: its red triangle (JSON alert-icon-red) */

  /* the timeline bar */
  --wx-now: #eb6f0f;                         /* 5.png: the Now line on the timeline (JSON now-line-timeline) */
  --wx-now-ink: #f8c75a;                     /* 5.png: the Now label; its glyph core is #fef4bc inside an orange fringe, so this is the flat equivalent (JSON now-label-flat-equivalent-est, marked est.) */
  --wx-bar-top: #1466db;                     /* 5.png: the brightest future rain bars (JSON timeline-bar-future-bright) */
  --wx-bar-foot: #1450a4;                    /* 5.png: the dimmer future bars (JSON timeline-bar-future-dim) */
  --wx-bar-past: #22476d;                    /* 5.png: the bars left of Now, desaturated (JSON timeline-bar-past) */
  --wx-handle: #fdfdfe;                      /* 5.png: the slider handle's disc (JSON slider-handle-disc) */
  --wx-handle-ring: #177ef8;                 /* 5.png: its 3px ring (JSON slider-handle-ring) */
  --wx-stem: #3eb0e9;                        /* 5.png: the 3px stem from the bubble down to the handle (JSON slider-stem) */
  --wx-play: #1563f2;                        /* 5.png: the play disc (JSON play-bg) */
  --wx-dock-bg: #132d47;                     /* 5.png: the timeline bar, the panel's navy again (JSON timeline-bg) */
  --wx-dock-line: #4a97c8;                   /* 5.png: the bar's 1px top border (JSON timeline-border-top) */
  --wx-step-line: #16385a;                   /* 5.png: the step back and forward buttons' 1px border (JSON step-btn-border) */
  --wx-speed-line: #173957;                  /* 5.png: the 1x speed pill's border (JSON speed-pill-border) */
  --wx-cal-line: #265686;                    /* 5.png: the calendar button's border (JSON calendar-border) */
  --wx-tooltip-bg: #0f253b;                  /* 5.png: the bubble over the handle (JSON tooltip-bg) */
  --wx-tooltip-line: #4585b9;                /* 5.png: its 1px border (JSON tooltip-border) */
  --wx-credit-bg: rgba(255, 255, 255, .72);  /* no mockup: the licence line under the bar, a map-attribution strip on the map (ruling R2, 6 Oct 12:35); the map is light in both themes, so the same in both */
  --wx-credit-ink: #364860;                  /* no mockup: its words, a dark slate that stays 4.7:1 or more on that strip whatever the map draws under it (the strip over black is #b8b8b8); the same in both themes */

  /* the rain chart and the models chart */
  --wx-chart-area: #185aad;                  /* 5.png: the rainfall chart's area fill (JSON chart-area-fill) */
  --wx-chart-dots: #e5f0f8;                  /* 5.png: the dotted line along the top of the fill (JSON chart-dotted-line) */
  --wx-chart-grid: #1e3a4f;                  /* 5.png: the 10 and 20 mm gridlines (JSON chart-grid-20) */
  --wx-chart-base: #184983;                  /* 5.png: the chart's baseline (JSON chart-baseline) */
  --wx-range-track: #04467f;                 /* 7.png: the expected-range bar's track (design-tokens.md 2.6, sampled #04467f) */
  --wx-m-ecmwf: #1189f2;                     /* 6.png: the ECMWF line (JSON models-line-ecmwf) */
  --wx-m-mogreps: #17a54c;                   /* 6.png: the Met Office line (JSON models-line-metoffice) */
  --wx-m-icon: #eb8f0d;                      /* 6.png: the DWD line (JSON models-line-dwd) */
  --wx-m-gfs: #942be6;                       /* 6.png: the NOAA line (JSON models-line-noaa) */
  --wx-m-arpege: #a824bc;                    /* 6.png: the Meteo-France line (JSON models-line-meteofrance) */
  --wx-band: rgba(140, 160, 200, .3);        /* 6.png: the ensemble band behind the lines, sampled #314260 (JSON models-band-fill) */
  --wx-conf: #51d083;                        /* 6.png: the forecast-confidence bar, filled part (JSON confidence-bar-fill) */
  --wx-conf-track: #176a4e;                  /* 6.png: its unfilled track (JSON confidence-bar-track) */

  /* map controls and the rain legend */
  --wx-ctl-bg: #eaf3fe;                      /* 5.png: the control buttons are light even on the dark screen (JSON control-btn-bg) */
  --wx-ctl-ink: #091849;                     /* 5.png: their icons (JSON control-btn-icon) */
  --wx-ctl-line: #cee0f8;                    /* 5.png: the 1px rule between + and − (JSON control-btn-divider) */
  --wx-legend-bg: #092247;                   /* 7.png: the rain legend card (JSON legend-bg-7png) */
  --wx-legend-line: #0b66b9;                 /* 7.png: its 1px blue border (JSON legend-border-top-7png) */
  --wx-legend-ink: #ecf0f5;                  /* 7.png: its labels, 50+ to 0 (JSON legend-labels-7png) */

  /* the Layers and settings drawer */
  --wx-drawer-bg: #011d35;                   /* 7.png: the drawer (JSON drawer-bg) */
  --wx-drawer-edge: #96b8d6;                 /* 7.png: its 1px light left edge (JSON drawer-left-edge) */
  --wx-drawer-line: rgba(255, 255, 255, .08);/* 7.png: the dividers inside it, about 8% white (sampled #143754, #092a45, #0c3552) */
  --wx-toggle-on: #0c9cfc;                   /* 7.png: a switch's track, on (JSON toggle-on-track) */
  --wx-toggle-off: #466f92;                  /* 7.png: a switch's track, off (JSON toggle-off-track) */
  --wx-knob: #ffffff;                        /* 7.png: a switch's knob (JSON toggle-knob) */
  --wx-tile-on: #2eacfc;                     /* 7.png: the selected Map layer tile (JSON icon-tile-active-bg) */
  --wx-tile-off: #0b2c49;                    /* 7.png: the other Map layer tiles (JSON icon-tile-inactive-bg) */
  --wx-tile-ink-on: #000a18;                 /* 7.png: icon and label on the selected tile (JSON icon-tile-active-ink) */
  --wx-seg-track: #0f3252;                   /* 7.png: a segmented control's track (JSON segmented-track) */
  --wx-seg-on: #22a8fc;                      /* 7.png: its selected segment (JSON segmented-active) */
  --wx-seg-ink: #00040c;                     /* 7.png: text on the selected segment (JSON segmented-active-text) */
  --wx-select-bg: #0d3150;                   /* 7.png: the drop-down pills (JSON dropdown-pill-bg) */
  --wx-select-line: #193f63;                 /* 7.png: their 1px border (JSON dropdown-pill-border) */
  --wx-tile-line: #1a405f;                   /* 7.png: the other Map layer tiles' 1px edge (sampled at 1323,270: not in the JSON) */
  --wx-seg-sep: #153c5d;                     /* 7.png: the 1px rule between two segments not chosen (sampled at 1385,407 and 1450,407: not in the JSON) */
  --wx-info-ink: #78d5f3;                    /* 7.png: the ⓘ rings beside the headings (JSON info-icon-cyan-drawer) */

  /* the nearest-gauge rows */
  --wx-row: #163451;                         /* 5.png: a gauge row (JSON gauge-row-bg-5png) */
  --wx-row-sub: #80a0bd;                     /* 5.png: its second line, the river (JSON gauge-row-sub-5png) */
  --wx-dot-ok: #1ec456;                      /* 5.png: the Normal status dot (JSON gauge-dot-5png) */
  --wx-spark: #49b7e8;                       /* 5.png: its sparkline (JSON gauge-spark-line-5png) */
  --wx-spark-fill: #1d4b88;                  /* 5.png: the area under the sparkline (JSON gauge-spark-fill-5png) */

  /* shape and size: type and sizes are in this rule only, the light theme inherits them */
  --wx-shadow: 0 14px 44px rgba(0, 0, 0, .35);  /* the site's dark card shadow shape (--v4-shadow: 0 14px 44px), black at 35%; not sampled. The light rule sets its own */
  --wx-radius-panel: 10px;                   /* 5.png: the panel's corner, 16 px ÷ 1.6 */
  --wx-radius-dock: 12px;                    /* 5.png: the timeline bar's corner, 20 px ÷ 1.6 = 12.5, set to 12 */
  --wx-radius-card: 8px;                     /* 5.png: the verdict block, day tiles and chance tiles, 12 px ÷ 1.6 = 7.5, set to 8 */
  --wx-radius-pill: 9px;                     /* 5.png: the time pill, 14 px ÷ 1.6 = 8.75, set to 9 */
  --wx-panel-w: 382px;                       /* 5.png: the panel, 611 px ÷ 1.6 */
  --wx-drawer-w: 300px;                      /* 7.png: the drawer, 297 px at 1x */
  --wx-ctl-size: 40px;                       /* 5.png: a map control square, 65 px ÷ 1.6 */
  --wx-bars: 20px;                           /* 5.png: the rain bars over the timeline, 32 px ÷ 1.6 (the old design's were 28 from 5 Oct); the phone's 24px is set in wx.css */
  --wx-dock-h: 60px;                         /* 5.png: the timeline bar's height, 95 px ÷ 1.6 = 59.4, set to 60 */
  --wx-dock: calc(var(--wx-dock-h) + 16px);  /* how far up from the map's foot anything must stop: the bar and its 16px gap */
  --wx-nav: 0px;                             /* the phone's bottom inset: wx.css sets env(safe-area-inset-bottom) there */
}

:root[data-theme=light] .wx {
  /* ground, panel and cards */
  --wx-bg: #d3dde8;                          /* the map's light sea behind the panels: the live light theme's --wx-bg (JSON light site-wx-bg) */
  --wx-panel: #ffffff;                       /* the site's --v4-panel: no light mockup of the panel body */
  --wx-panel-2: #f3f6fb;                     /* the site's --v4-input: tiles and chart wells */
  --wx-card: #f3f6fb;                        /* the verdict block: as --wx-panel-2 */
  --wx-card-line: rgba(30, 60, 110, .15);    /* the live light theme's --wx-line (JSON light site-line) */
  --wx-tile-chance: #eef3f9;                 /* no mockup of light chance tiles: as --wx-tile-off */
  --wx-tile-chance-line: #d0d9e6;            /* no mockup: as --wx-line */
  --wx-line: #d0d9e6;                        /* the site's --v4-border */
  --wx-divider: #e3e9f1;                     /* no mockup: a rule a shade lighter than --wx-line */

  /* text */
  --wx-text: #123051;                        /* the site's --v4-text */
  --wx-muted: #536581;                       /* the site's --v4-muted */
  --wx-faint: #5b6d87;                       /* the site's --v4-faint (#71829c) darkened for text: 5.3:1 on white, 4.5:1 on --wx-track, 4.9:1 on --wx-row (WCAG AA; the whole-branch review, 6 Oct); --wx-grey keeps #71829c for the disc */
  --wx-pill-sub: #536581;                    /* no mockup for the light pill: the site's --v4-muted, as --wx-muted */
  --wx-link: #0a6aa6;                        /* no mockup: the link blue for the white panel */

  /* tabs and chips */
  --wx-accent: #087fda;                      /* the site's --v4-accent */
  --wx-accent-ink: #ffffff;                  /* the site's --v4-accent-text */
  --wx-track: #e8eef6;                       /* no mockup: the tab strip, a pale grey-blue */
  --wx-chip: #e8eef6;                        /* no mockup: as --wx-track */
  --wx-close: #e8eef6;                       /* no mockup: as --wx-track */
  --wx-time-pill: #ffffff;                   /* no mockup: the time pill, white like the panel */

  /* the verdict */
  --wx-good: #2e8f5f;                        /* the site's --v4-typical */
  --wx-good-ring: #8fd9b0;                   /* no mockup: a lighter green for the disc's rim */
  --wx-good-ink: #1f7a4c;                    /* no mockup: a darker green for text on white */
  --wx-amber: #cf8f00;                       /* the site's own --v4-elevated (light), the verdict's level 1 */
  --wx-orange: #e2670c;                      /* the site's own --v4-above (light), level 2 */
  --wx-red: #c81e2a;                         /* the site's own --v4-high (light), level 3 */
  --wx-amber-ring: #f3c86a;                  /* derived: no mockup for levels 1-3. A lighter amber for the level-1 disc's rim */
  --wx-orange-ring: #f0a070;                 /* derived: no mockup for levels 1-3. A lighter orange for the level-2 disc's rim */
  --wx-red-ring: #e38a90;                    /* derived: no mockup for levels 1-3. A lighter red for the level-3 disc's rim */
  --wx-grey: #71829c;                        /* derived: no mockup. The grey verdicts' disc: the site's --v4-faint */
  --wx-grey-ring: #9fb0c6;                   /* derived: no mockup. A lighter grey for its rim */

  /* the warning box */
  --wx-warn-bg: #ffbf5b;                     /* 9.png: the box's gradient runs #ffbf5b (top) to #ffa32d; this is the top stop, flat (JSON light alert-gradient-top). The gradient goes where the box is styled */
  --wx-warn-bg-2: #ffa32d;                   /* 9.png: the gradient's foot (JSON light alert-gradient-bottom) */
  --wx-warn-ink: #1a1307;                    /* 9.png: its title (JSON light alert-title) */
  --wx-warn-icon: #e63d0a;                   /* as dark */

  /* the timeline bar */
  --wx-now: #f87e14;                         /* 3.png: the Now line (JSON light now-line) */
  --wx-now-ink: #fe7115;                     /* 3.png: the NOW label (JSON light now-text) */
  --wx-bar-top: #74b7fc;                     /* 3.png: the future rain bars (JSON light bars-future) */
  --wx-bar-foot: #a9cefb;                    /* 3.png: the paler later bars (JSON light bars-pale) */
  --wx-bar-past: #7894b4;                    /* 3.png: the bars left of Now, grey-blue (JSON light bars-past) */
  --wx-handle: #fdfdfd;                      /* 3.png: the slider handle's disc (JSON light handle-disc) */
  --wx-handle-ring: #0aa0fc;                 /* 3.png: its 3px ring (JSON light handle-ring) */
  --wx-stem: #4897fa;                        /* 3.png: the stem down to the handle (JSON light stem) */
  --wx-play: #0b5dc5;                        /* 3.png: the play disc, a darker blue than the dark theme's (JSON light play-bg) */
  --wx-dock-bg: #ebf5fe;                     /* 3.png: the timeline bar (JSON light timeline-bg) */
  --wx-dock-line: #cfe0f3;                   /* 3.png: the bar has no border; this is the soft edge of its buttons (JSON light step-edge-shadow) */
  --wx-step-line: #cfe0f3;                   /* 3.png: the same soft edge on the step buttons (JSON light step-edge-shadow) */
  --wx-speed-line: #cfe0f3;                  /* 3.png: and on the speed pill (JSON light step-edge-shadow) */
  --wx-cal-line: #cfe0f3;                    /* 3.png has no calendar button: as the step buttons */
  --wx-tooltip-bg: #fafafb;                  /* 3.png: the bubble over the handle (JSON light tooltip-bg) */
  --wx-tooltip-line: #3797f9;                /* 3.png: its border (JSON light tooltip-border) */
  --wx-credit-bg: rgba(255, 255, 255, .72);  /* no mockup: as the dark rule (the map under the line is the same in both themes) */
  --wx-credit-ink: #364860;                  /* no mockup: as the dark rule */

  /* the rain chart and the models chart */
  --wx-chart-area: #1f78c8;                  /* no mockup: the rainfall chart's fill, a mid blue that shows on white */
  --wx-chart-dots: #10223f;                  /* the live light theme's text colour (JSON light site-text), for the dotted line */
  --wx-chart-grid: rgba(30, 60, 110, .14);   /* no mockup: the site's light line colour, a touch lighter */
  --wx-chart-base: rgba(30, 60, 110, .3);    /* no mockup: the site's light line colour, stronger */
  --wx-range-track: #cfe3f7;                 /* derived: no light mockup. The expected-range bar's track, a pale blue */
  --wx-m-ecmwf: #1189f2;                     /* as dark: the five model colours are the same in both themes */
  --wx-m-mogreps: #17a54c;                   /* as dark */
  --wx-m-icon: #eb8f0d;                      /* as dark */
  --wx-m-gfs: #942be6;                       /* as dark */
  --wx-m-arpege: #a824bc;                    /* as dark */
  --wx-band: rgba(49, 150, 220, .18);        /* no mockup: the ensemble band, pale blue */
  --wx-conf: #2e8f5f;                        /* the site's --v4-typical */
  --wx-conf-track: #cfe6d8;                  /* no mockup: a pale green track */

  /* map controls and the rain legend */
  --wx-ctl-bg: #f5f9fe;                      /* 2.png: the control buttons (JSON light control-bg) */
  --wx-ctl-ink: #0d1f55;                     /* 2.png: their icons (JSON light control-icon-layers) */
  --wx-ctl-line: #d6e3ee;                    /* 2.png: the rule between + and − (JSON light control-divider) */
  --wx-legend-bg: #f0f7fd;                   /* 2.png: the rain legend card (JSON light legend-card-bg) */
  --wx-legend-line: #d6e3ee;                 /* 2.png: no border sampled on the card; the controls' divider colour (JSON light control-divider) */
  --wx-legend-ink: #5f769f;                  /* 2.png: its labels (JSON light legend-labels) */

  /* the Layers and settings drawer */
  --wx-drawer-bg: #ffffff;                   /* the site's --v4-panel */
  --wx-drawer-edge: #d0d9e6;                 /* the site's --v4-border */
  --wx-drawer-line: rgba(18, 48, 81, .08);   /* the site's --v4-text at 8% */
  --wx-toggle-on: #087fda;                   /* the site's --v4-accent */
  --wx-toggle-off: #b8c6d8;                  /* no mockup: a switch's track, off */
  --wx-knob: #ffffff;                        /* as dark */
  --wx-tile-on: #087fda;                     /* the site's --v4-accent */
  --wx-tile-off: #eef3f9;                    /* no mockup: the other Map layer tiles */
  --wx-tile-ink-on: #ffffff;                 /* no mockup: text on the selected tile */
  --wx-seg-track: #e8eef6;                   /* no mockup: as --wx-track */
  --wx-seg-on: #087fda;                      /* the site's --v4-accent */
  --wx-seg-ink: #ffffff;                     /* no mockup: text on the selected segment */
  --wx-select-bg: #f3f6fb;                   /* the site's --v4-input */
  --wx-select-line: #d0d9e6;                 /* the site's --v4-border */
  --wx-tile-line: #d0d9e6;                   /* the site's --v4-border */
  --wx-seg-sep: #d0d9e6;                     /* the site's --v4-border */
  --wx-info-ink: #0a6aa6;                    /* no mockup: as --wx-link */

  /* the nearest-gauge rows */
  --wx-row: #f3f6fb;                         /* the site's --v4-input */
  --wx-row-sub: #536581;                     /* the site's --v4-muted */
  --wx-dot-ok: #2e8f5f;                      /* the site's --v4-typical */
  --wx-spark: #1f78c8;                       /* no mockup: as --wx-chart-area */
  --wx-spark-fill: #cfe3f7;                  /* no mockup: a pale blue under the sparkline */

  /* shadow: the one thing besides colours that a theme sets; type and sizes are in the dark rule only */
  --wx-shadow: 0 8px 26px rgba(20, 45, 90, .14);  /* the live light theme's card shadow in wx.css */
}