/* ff_map_ds.css: the Flood Forecast design system for full-screen map pages.

   Opt in with `{% block body_class %} ff-ds{% endblock %}` (and ` ff-ds-dark`
   for a page whose dark mode has been done), and link this file as the LAST
   thing in the page's head_extra, after the page's own <style>, so it wins on
   order as well as specificity. It restyles the class names the map pages
   already share (.info-panel, .player-panel, .control-group, .seg-control,
   .li-pill, .mow-*, the Leaflet zoom bar), so no JS or id changes: the
   classes the scripts read (.collapsed, .hide-collapsed, .seg-active,
   .is-busy, .li-pill.on, .pp-*, .ff-fresh--panel) are restyled in place.

   First pages: /radar (and /satellite, same template) and /accum,
   2026-10-10. The homepage hero (templates/home.html, .ix-*) is the
   reference for every value here; the "Flood Forecast" design system
   artifact documents them as components. */

body.ff-ds {
  --ds-ink: #0f172a;
  --ds-body: #334155;
  --ds-muted: #475569;       /* slate-600, not 500: these panels sit over satellite */
  --ds-line: rgba(15, 23, 42, .10);
  --ds-seg: rgba(15, 23, 42, .07);
  --ds-seg-hover: rgba(15, 23, 42, .11);
  --ds-track: #e2e8f0;
  /* Glass at the homepage's satellite strength: /radar opens on satellite,
     where the hero's normal 38-62% white left muted text near 2.5:1. */
  --ds-glass: linear-gradient(140deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .70) 100%);
  --ds-glass-border: rgba(255, 255, 255, .78);
  --ds-glass-blur: blur(22px) saturate(170%);
  --ds-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(15, 23, 42, .06), 0 22px 48px -20px rgba(15, 23, 42, .42);
  --ds-font: 'Outfit', sans-serif;
}
[data-theme="dark"] body.ff-ds.ff-ds-dark {
  --ds-ink: #f1f5f9;
  --ds-body: #cbd5e1;
  --ds-muted: #cbd5e1;
  --ds-line: rgba(148, 163, 184, .18);
  --ds-seg: rgba(148, 163, 184, .14);
  --ds-seg-hover: rgba(148, 163, 184, .22);
  --ds-track: #334155;
  --ds-glass: linear-gradient(140deg, rgba(30, 41, 59, .84) 0%, rgba(15, 23, 42, .74) 100%);
  --ds-glass-border: rgba(148, 163, 184, .22);
  --ds-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3), 0 22px 48px -20px rgba(0, 0, 0, .8);
}

/* ── Glass panels: the key panel and the player ─────────────────────── */
body.ff-ds .info-panel,
body.ff-ds .player-panel {
  background: var(--ds-glass);
  -webkit-backdrop-filter: var(--ds-glass-blur);
  backdrop-filter: var(--ds-glass-blur);
  border: 1px solid var(--ds-glass-border);
  box-shadow: var(--ds-glass-shadow);
  border-radius: 18px;
  font-family: var(--ds-font);
  color: var(--ds-body);
}
body.ff-ds .info-panel:hover,
body.ff-ds .player-panel:hover { box-shadow: var(--ds-glass-shadow); }
/* The player a touch more solid and lighter than the key panel (user
   request 2026-10-10: its labels and ticks need the contrast). */
body.ff-ds .player-panel { background: linear-gradient(140deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .89) 100%); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .player-panel { background: linear-gradient(140deg, rgba(30, 41, 59, .95) 0%, rgba(15, 23, 42, .9) 100%); }
/* A little wider than the old 300px on a desktop: Outfit's wider letters,
   the Experimental tag, the status chip and two buttons share the head row,
   and at 300px the title was cut to "Rada...". The system's widget column is
   320px; this sits just past it. The expanded panel keeps the page's own
   overflow-y: auto (it scrolls when tall). */
@media (min-width: 768px) {
  body.ff-ds .info-panel,
  body.ff-ds .info-panel.collapsed { width: 372px; }
}

/* Key panel head (collapsed chip and expanded header): the site's navy, a
   touch see-through (user request 2026-10-10: a glass head lost the panel's
   anchor), white title, light tag and quiet light buttons. */
body.ff-ds .info-panel .panel-header,
body.ff-ds .info-panel .collapsed-top-row {
  background: rgba(41, 53, 72, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff;
  border-bottom: 0;
}
body.ff-ds .panel-header-title,
body.ff-ds .collapsed-title {
  font-family: var(--ds-font); font-size: 15px; font-weight: 600; letter-spacing: 0; color: #fff;
}
body.ff-ds .exp-divider { display: none; }
body.ff-ds .exp-tag {
  padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  background: rgba(255, 255, 255, .14); color: #e2e8f0; opacity: 1; border: 0;
}
body.ff-ds .chip-min-btn,
body.ff-ds .chip-open-btn,
body.ff-ds .panel-close-btn,
body.ff-ds .info-icon-btn {
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #e2e8f0; border: 0; opacity: 1;
}
body.ff-ds .chip-min-btn:hover,
body.ff-ds .chip-open-btn:hover,
body.ff-ds .panel-close-btn:hover,
body.ff-ds .info-icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
body.ff-ds .chip-min-btn svg,
body.ff-ds .chip-open-btn svg,
body.ff-ds .panel-close-btn svg,
body.ff-ds .info-icon-btn svg { width: 17px; height: 17px; }

/* The freshness chip in that head keeps base.html's light-on-navy palette,
   as on every other navy panel head. */

/* Key panel body: section headings, notes, the colour key. */
body.ff-ds .info-panel .ff-k-h,
body.ff-ds .info-panel .section-label,
body.ff-ds .info-panel .cbar-container p {
  margin: 16px 0 7px; font-family: var(--ds-font); font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ds-ink);
}
body.ff-ds .info-panel .cbar-container p { margin-top: 2px; }
body.ff-ds .info-panel .ff-k-h:first-child { margin-top: 2px; }
body.ff-ds .info-panel .ff-k-note,
body.ff-ds .info-panel #generatedAt { font-size: 11.5px; line-height: 1.5; color: var(--ds-muted); margin: 6px 0 12px; }
body.ff-ds .info-panel .ff-k-credits { font-size: 11px; line-height: 1.55; color: var(--ds-muted); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ds-line); }
body.ff-ds .info-panel .ff-k-credits strong { color: var(--ds-body); font-weight: 600; }
body.ff-ds .info-panel .ff-k-fine { font-size: 10.5px; line-height: 1.45; color: var(--ds-muted); margin: 6px 0 0; }
body.ff-ds .cbar { border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06); }
body.ff-ds .cbar-labels,
body.ff-ds .cbar-label { color: var(--ds-muted); font-family: var(--ds-font); font-weight: 500; }

/* Switches: the key panel's checkboxes, drawn as the homepage's switch
   (the input itself, so the scripts that set .checked need no change). */
body.ff-ds .custom-checkbox {
  display: flex; align-items: center; gap: 10px; padding: 5px 0; cursor: pointer;
  font-family: var(--ds-font); font-size: 13px; font-weight: 500; color: var(--ds-body);
}
body.ff-ds .custom-checkbox input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; position: relative; margin: 0;
  width: 32px !important; height: 18px !important; border-radius: 9999px; cursor: pointer;
  background: rgba(15, 23, 42, .18); transition: background .15s;
}
body.ff-ds .custom-checkbox input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); transition: transform .15s;
}
body.ff-ds .custom-checkbox input[type="checkbox"]:checked { background: var(--brand-600); }
body.ff-ds .custom-checkbox input[type="checkbox"]:checked::after { transform: translateX(14px); }
body.ff-ds .custom-checkbox input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47, 134, 150, .35); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .custom-checkbox input[type="checkbox"] { background: rgba(148, 163, 184, .3); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .custom-checkbox input[type="checkbox"]:checked { background: var(--brand-500); }

/* Selects (both panels): the homepage's pill select. */
body.ff-ds .info-panel select,
body.ff-ds .player-panel select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  height: auto; min-height: 0; border: 0; box-shadow: none;
  padding: 7px 30px 7px 13px; border-radius: 9999px;
  background: var(--ds-seg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font: 500 13px/1.3 var(--ds-font); color: var(--ds-ink);
  transition: background-color .15s;
}
body.ff-ds .info-panel select:hover,
body.ff-ds .player-panel select:hover { background-color: var(--ds-seg-hover); }
body.ff-ds .info-panel select:focus-visible,
body.ff-ds .player-panel select:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
body.ff-ds .info-panel select { width: 100%; }
[data-theme="dark"] body.ff-ds.ff-ds-dark .info-panel select,
[data-theme="dark"] body.ff-ds.ff-ds-dark .player-panel select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.ff-ds select option { color: #0f172a; background: #fff; }

/* Range inputs in the key panel (opacity). */
body.ff-ds .info-panel input[type="range"] { accent-color: var(--brand-600) !important; }

/* ── Player controls ─────────────────────────────────────────────────── */
body.ff-ds .control-label {
  font-family: var(--ds-font); font-size: 11.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ds-muted);
}
/* Play: the system's primary action, a round brand button. Share and the
   other round buttons beside it: quiet. */
body.ff-ds #playBtn {
  width: 38px; height: 38px; border-radius: 50%; padding: 0;
  background: var(--brand-700); color: #fff; border: 0;
  box-shadow: 0 2px 6px -1px rgba(31, 85, 95, .45);
}
body.ff-ds #playBtn:hover { background: var(--brand-800); color: #fff; }
[data-theme="dark"] body.ff-ds.ff-ds-dark #playBtn { background: var(--brand-600); color: #fff; }
body.ff-ds .btn-share {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  background: var(--ds-seg); color: var(--ds-body); border: 0; box-shadow: none;
}
body.ff-ds .btn-share:hover { background: var(--ds-seg-hover); color: var(--ds-ink); }

/* Timeline: the homepage player's (templates/home.html .ix-track, .ix-fill,
   .ix-tick, .ix-slider, .ix-readout), value for value. The readout sits
   beside the track behind a hairline, as there (the pages dropped
   .pp-date-top for it). The played fill is drawn from --ff-pct, which
   static/js/ff_map_ds.js keeps in step with the slider. */
body.ff-ds .timeline-track { height: 6px; margin-top: -3px; border-radius: 3px; background: var(--ds-track); }
body.ff-ds .loaded-progress { background: rgba(121, 214, 218, .35); border-radius: 3px; }
body.ff-ds .timeline-track::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--ff-pct, 0%);
  border-radius: 3px; background: var(--brand-300);
}
[data-theme="dark"] body.ff-ds.ff-ds-dark .timeline-track::after { background: var(--brand-600); }
body.ff-ds input[type=range]#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-700); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
}
body.ff-ds input[type=range]#timeSlider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-700); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
}
body.ff-ds input[type=range]#timeSlider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(47, 134, 150, .35); }
/* Ticks: 1px marks, 4px for a frame and 12px on the hour. */
body.ff-ds .timeline-ticks .tick:not(.today-mark) { width: 1px; height: 4px; top: 8px; border-radius: 0; background: rgba(15, 23, 42, .18); }
body.ff-ds .timeline-ticks .tick.hour { height: 12px; top: 4px; background: rgba(15, 23, 42, .38); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .timeline-ticks .tick:not(.today-mark) { background: rgba(226, 232, 240, .2); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .timeline-ticks .tick.hour { background: rgba(226, 232, 240, .45); }
body.ff-ds .tick-label,
body.ff-ds .timeline-ticks .tick-label { font-family: var(--ds-font); font-size: 11px; font-weight: 500; color: var(--ds-muted); }
body.ff-ds .tick.today-mark { font-family: var(--ds-font); font-size: 11px; font-weight: 600; color: var(--ds-ink); }

/* Readout, beside the track: a hairline, the date small and muted, the
   time 16px bold ink. Fixed widths (the rule in CLAUDE.md: a readout that
   resizes as you scrub moves the track under your thumb), re-measured for
   Outfit: "Wed 30 Sept 2026" and "12:45 BST" both fit 104px. */
body.ff-ds #playerDateTime {
  font-family: var(--ds-font); font-variant-numeric: tabular-nums;
  width: 104px; padding-left: 12px; border-left: 1px solid var(--ds-line); line-height: 1.15;
}
body.ff-ds #playerDateLine { font-size: 10.5px; font-weight: 500; color: var(--ds-muted); }
body.ff-ds #playerTimeLine { font-size: 16px; font-weight: 700; color: var(--ds-ink); letter-spacing: 0; }
/* 104px on phones too: at the 11px floor "Wed 30 Sept 2026" is 89.6px, which
   the 96px phone box (83px inside) clipped. /observations writes "Latest, "
   before the newest day ("Latest, Wed 30 Sept", 98px), so it takes 112px. */
@media (max-width: 1024px) { body.ff-ds #playerTimeLine { font-size: 15px; } }
body.ff-ds:has(#srcDd) #playerDateTime { width: 112px; }

/* Segmented control (Grid / Areas): the homepage's quiet pill. The class
   names are the ones grid_area_hold.js reads. */
body.ff-ds .seg-control {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 9999px; background: var(--ds-seg); border: 0; box-shadow: none;
}
body.ff-ds .seg-btn {
  border: 0; background: transparent; color: var(--ds-body); box-shadow: none;
  font: 500 12.5px/1 var(--ds-font); padding: 7px 13px; border-radius: 9999px;
}
body.ff-ds .seg-btn:hover:not(:disabled) { color: var(--ds-ink); background: transparent; }
body.ff-ds .seg-btn.seg-active { background: #fff; color: var(--brand-800); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
body.ff-ds .seg-btn:disabled { opacity: .38; }

/* Toggle chip (Lightning, Gauges): off is the quiet pill, on is a brand
   tint with brand ink, like a segment that is selected. */
body.ff-ds .li-pill,
body.ff-ds .gauge-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9999px; cursor: pointer;
  background: var(--ds-seg); color: var(--ds-body); border: 0; box-shadow: none;
  font: 500 13px/1.3 var(--ds-font);
}
body.ff-ds .li-pill:hover,
body.ff-ds .gauge-pill:hover { background: var(--ds-seg-hover); color: var(--ds-ink); }
body.ff-ds .li-pill.on,
body.ff-ds .gauge-pill.on,
body.ff-ds .gauge-pill.active { background: var(--brand-100); color: var(--brand-800); box-shadow: inset 0 0 0 1px var(--brand-200); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .li-pill.on { background: rgba(121, 214, 218, .16); color: var(--brand-200); box-shadow: none; }

/* Warnings dropdown: its button is a pill select, its list a white card. */
body.ff-ds .mow-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9999px; border: 0; box-shadow: none;
  background: var(--ds-seg); color: var(--ds-ink); font: 500 13px/1.3 var(--ds-font);
}
body.ff-ds .mow-btn:hover { background: var(--ds-seg-hover); }
body.ff-ds .mow-panel {
  border-radius: 16px; border: 1px solid #e2e8f0; background: #fff;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 12px -4px rgba(15, 23, 42, .08);
  font-family: var(--ds-font);
}
body.ff-ds .mow-info-btn {
  width: 16px; height: 16px; border-radius: 50%; font: 600 10px/16px var(--ds-font);
  background: var(--ds-seg); color: var(--ds-body); border: 0;
}
[data-theme="dark"] body.ff-ds.ff-ds-dark .mow-panel { background: #1e293b; border-color: #334155; }

/* Share toast: the system's inverted tooltip. */
body.ff-ds .share-toast { background: #1e293b; color: #f1f5f9; border-radius: 10px; font-family: var(--ds-font); font-weight: 500; }

/* The radar view tabs on the player's top edge join the glass panel. */
/* Unselected tabs are a clearly darker slate behind the panel; the selected
   one is the player's own white and joins it (user request 2026-10-10:
   more definition between the two). */
body.ff-ds .ff-rview { background: rgba(203, 213, 225, .96); color: #334155; box-shadow: 0 -2px 6px rgba(15, 23, 42, .1); }
body.ff-ds .ff-rview:hover { background: rgba(226, 232, 240, .98); color: #0f172a; }
body.ff-ds .ff-rview.is-on { background: rgba(255, 255, 255, .95); color: var(--brand-800); font-weight: 600; box-shadow: 0 -3px 8px rgba(15, 23, 42, .08); }
body.ff-ds .pp-min-tab { background: rgba(255, 255, 255, .95); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .ff-rview { background: rgba(15, 23, 42, .92); color: #94a3b8; }
[data-theme="dark"] body.ff-ds.ff-ds-dark .ff-rview:hover { color: #fff; }
[data-theme="dark"] body.ff-ds.ff-ds-dark .ff-rview.is-on,
[data-theme="dark"] body.ff-ds.ff-ds-dark .pp-min-tab { background: rgba(30, 41, 59, .95); color: var(--brand-200); }

/* ── Map buttons: one solid white stack, found at a glance over any layer
   (zoom in, zoom out, and the spot values crosshair beneath). */
body.ff-ds .leaflet-touch .leaflet-bar,
body.ff-ds .leaflet-bar {
  border: 1px solid rgba(15, 23, 42, .28); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .28); background: #fff;
}
body.ff-ds .leaflet-bar a,
body.ff-ds .leaflet-touch .leaflet-bar a {
  width: 36px; height: 36px; line-height: 36px; border-radius: 0 !important;
  color: var(--brand-800); background: #fff; border-bottom: 1px solid rgba(15, 23, 42, .18);
  font: 500 20px/36px var(--ds-font);
}
body.ff-ds .leaflet-bar a:last-child { border-bottom: 0; }
body.ff-ds .leaflet-bar a:hover { background: var(--brand-50); color: var(--ds-ink); }
body.ff-ds .leaflet-bar a.ff-vr-btn { color: var(--brand-800); }
/* Spot values switched on: a filled brand button (value_readout.js forces it
   with !important; this is here so the stack's own rules say so too). */
body.ff-ds .leaflet-bar a.ff-vr-btn.ff-vr-on,
body.ff-ds .leaflet-touch .leaflet-bar a.ff-vr-btn.ff-vr-on { background: var(--brand-700); color: #fff; }
[data-theme="dark"] body.ff-ds.ff-ds-dark .leaflet-bar,
[data-theme="dark"] body.ff-ds.ff-ds-dark .leaflet-bar a { background: #0f172a; color: #e2e8f0; border-color: rgba(203, 213, 225, .3); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .leaflet-bar a:hover { background: #1e293b; }

/* ── Info dialogs (the warnings note on /radar, About this data on /accum):
   a white card on a dim backdrop, Outfit, a round close button. */
body.ff-ds .mow-modal-content,
body.ff-ds .info-modal {
  border-radius: 20px; border: 1px solid #e2e8f0; background: #fff; color: var(--ds-body);
  box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .45); font-family: var(--ds-font);
  font-size: 14px; line-height: 1.6;
}
body.ff-ds .mow-modal-content h3,
body.ff-ds .info-modal h3 { font-family: var(--ds-font); font-size: 18px; font-weight: 600; color: var(--ds-ink); letter-spacing: 0; }
body.ff-ds .mow-modal-close,
body.ff-ds .info-modal-close {
  width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ds-muted); font-size: 22px; line-height: 1;
}
body.ff-ds .mow-modal-close:hover,
body.ff-ds .info-modal-close:hover { background: rgba(15, 23, 42, .07); color: var(--ds-ink); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .mow-modal-content,
[data-theme="dark"] body.ff-ds.ff-ds-dark .info-modal { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] body.ff-ds.ff-ds-dark .mow-modal-content h3,
[data-theme="dark"] body.ff-ds.ff-ds-dark .info-modal h3 { color: #f1f5f9; }
body.ff-ds .info-panel .ff-k-val { min-width: 34px; text-align: right; font-size: 12px; font-weight: 500; color: var(--ds-body); font-variant-numeric: tabular-nums; }

/* The colour key, then the next section: room for the labels under it. */
body.ff-ds .info-panel .cbar-container { margin-bottom: 14px; }
body.ff-ds .info-panel .cbar-labels { margin-bottom: 6px; }

/* Phones: the pill controls at a compact size, so the player keeps its rows
   (the full-size pills pushed Warnings onto a row of its own). */
@media (max-width: 767px) {
  body.ff-ds .player-panel select,
  body.ff-ds .mow-btn,
  body.ff-ds .li-pill,
  body.ff-ds .gauge-pill { padding: 6px 24px 6px 10px; font-size: 12px; background-position: right 9px center; }
  body.ff-ds .mow-btn,
  body.ff-ds .li-pill,
  body.ff-ds .gauge-pill { padding: 6px 10px; gap: 5px; }
  body.ff-ds .seg-btn { padding: 6px 10px; font-size: 12px; }
  body.ff-ds .control-label { font-size: 11px; }
  body.ff-ds #playBtn { width: 36px; height: 36px; }
  body.ff-ds .btn-share { width: 30px; height: 30px; }
}
/* The collapsed chip is a fixed width: a slightly smaller title and tag so
   "Radar Accumulation", the tag and the status chip still fit. */
body.ff-ds .info-panel.collapsed .collapsed-title { font-size: 14px; white-space: nowrap; }
body.ff-ds .info-panel.collapsed .exp-tag { font-size: 10.5px; padding: 2px 7px; }
body.ff-ds .info-panel .title-chip-row { gap: 6px; min-width: 0; }

/* Head buttons a touch smaller in the collapsed chip, so the title keeps
   its room there. */
body.ff-ds .info-panel.collapsed .chip-min-btn,
body.ff-ds .info-panel.collapsed .chip-open-btn,
body.ff-ds .info-panel.collapsed .info-icon-btn { width: 28px; height: 28px; }
/* The title never shrinks: when the head row is short of room, the
   Experimental tag gives way instead (the shared rule in base.html lets the
   title shrink while the tag and chip hold, so "Radar Accumulation" was cut). */
body.ff-ds .title-chip-row .collapsed-title,
body.ff-ds .title-chip-row .panel-header-title { flex: 0 0 auto; overflow: visible; }
body.ff-ds .title-chip-row .exp-tag { flex: 0 0 auto; }
body.ff-ds .title-chip-row .ff-fresh--panel { flex: 0 0 auto; }
body.ff-ds .info-panel .title-chip-row { gap: 5px; }
body.ff-ds .info-panel .panel-header { padding-left: 16px; padding-right: 10px; gap: 4px; }
body.ff-ds .info-panel .collapsed-top-row { padding-left: 14px; padding-right: 8px; }
/* The head row at a size that holds title, tag, status chip and two buttons
   whole on a 372px panel (and a phone's full width). */
body.ff-ds .panel-header-title,
body.ff-ds .collapsed-title { font-size: 14.5px; }
body.ff-ds .info-panel .exp-tag { font-size: 10.5px; padding: 2px 7px; }
body.ff-ds .info-panel .panel-header .panel-close-btn,
body.ff-ds .info-panel .panel-header .info-icon-btn { width: 28px; height: 28px; }

/* Day labels on the timeline are .tick elements too: no bar behind them. */
body.ff-ds .timeline-ticks .tick.today-mark,
[data-theme="dark"] body.ff-ds .timeline-ticks .tick.today-mark { background: transparent !important; }
/* Multi view's panel pickers (Left / Middle / Right). */
body.ff-ds .info-panel .ff-k-label { display: block; margin: 0 0 4px; font-size: 11.5px; font-weight: 500; color: var(--ds-muted); }
/* Split pages' pane title strip (Multi view, Radar & gauges): the page's own
   light tone with ink labels, not a second navy bar under the nav. */
/* Every strip directly under the nav (pane titles, run and valid lines) is
   navy #3a4a63, a couple of shades lighter than the nav's #293548, with light
   text (user request 2026-10-11; a pale strip there read as washed out). */
body.ff-ds #paneBar,
body.ff-ds .pane-bar { background: #3a4a63; box-shadow: none; border-bottom: 1px solid rgba(15, 23, 42, .25); }
body.ff-ds .pane-bar-cell { font-family: var(--ds-font); font-size: 13px; font-weight: 600; letter-spacing: 0; color: #f1f5f9; }
body.ff-ds .pane-bar-cell + .pane-bar-cell { border-left: 1px solid rgba(255, 255, 255, .12); }
body.ff-ds :is(.pane-bar, #paneBar) .pbc-run { color: #f1f5f9; font-family: var(--ds-font); font-weight: 600; }
body.ff-ds :is(.pane-bar, #paneBar) .pbc-valid { color: #cbd5e1; font-family: var(--ds-font); }
/* /compare's and /ukvtrend's header rows are the same navy. */
body.ff-ds .map-header-row { background: #3a4a63; }
body.ff-ds .info-panel.collapsed .ff-k-h,
body.ff-ds .info-panel.collapsed .cbar-container p { font-size: 12px; }
/* /radar's satellite and lightning keys in the collapsed chip: the page sets
   their headings at 9px through an id rule; the system's key heading here. */
body.ff-ds .info-panel.collapsed #irKeyContainer p,
body.ff-ds .info-panel.collapsed #cthKeyContainer p,
body.ff-ds .info-panel.collapsed #liKeyContainer p.ff-k-h { font-size: 12px; font-weight: 600; color: var(--ds-ink); margin: 10px 0 6px; }
/* The key heading is one size everywhere: several pages size the headings in
   their collapsed keys through id rules (9px), which only !important beats. */
body.ff-ds .info-panel p.ff-k-h { font-size: 12px !important; font-weight: 600 !important; color: var(--ds-ink) !important; letter-spacing: 0 !important; }

/* The key panel about a quarter smaller on a laptop or desktop (user request
   2026-10-10: it felt too big), scaled as a whole so the head row keeps its
   proportions and nothing in it truncates. Phones keep full size for touch. */
@media (min-width: 768px) {
  /* zoom scales the fixed offsets too, so they are divided back out to keep
     the panel 20px below the nav (or the split pages' 34px pane strip) and
     20px in from the right edge. */
  body.ff-ds .info-panel,
  body.ff-ds .info-panel.collapsed { zoom: .78; top: calc((64px + 20px) / .78); right: calc(20px / .78); }
  body.ff-ds:has(#paneBar) .info-panel,
  body.ff-ds:has(#paneBar) .info-panel.collapsed { top: calc((64px + 34px + 16px) / .78); }
  /* /models' and /ukvsplat's strips are 52px, not 34: the 34px offset put
     the panel 2px over the strip, touching the bar above it. */
  body.ff-ds:has(#paneBar.pane-bar, #focusRunSelect) .info-panel,
  body.ff-ds:has(#paneBar.pane-bar, #focusRunSelect) .info-panel.collapsed { top: calc((64px + 52px + 16px) / .78); }
}
/* Those two hide their strip at 1024px and below, so the panel sits under
   the nav there like a page with no strip. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.ff-ds:has(#paneBar.pane-bar, #focusRunSelect) .info-panel,
  body.ff-ds:has(#paneBar.pane-bar, #focusRunSelect) .info-panel.collapsed { top: calc((64px + 20px) / .78); }
}
/* No fine white outline on the glass panels (user request, same day). */
body.ff-ds .info-panel,
body.ff-ds .player-panel { border: 0; }
/* The gap between stacked keys (rainfall, then lightning or satellite): the
   key's own bottom margin, its labels' and the next heading's top margin
   added up to about 38px. */
body.ff-ds .info-panel .cbar-container { margin-bottom: 4px; }
body.ff-ds .info-panel .cbar-labels { margin-bottom: 0; }
body.ff-ds #irKeyContainer, body.ff-ds #cthKeyContainer, body.ff-ds #liKeyContainer,
body.ff-ds #irKeySection, body.ff-ds #cthKeySection, body.ff-ds #biasKey { margin-top: 0 !important; padding-top: 0 !important; }
body.ff-ds #irKeyContainer p.ff-k-h, body.ff-ds #cthKeyContainer p.ff-k-h, body.ff-ds #liKeyContainer p.ff-k-h,
body.ff-ds #irKeySection p.ff-k-h, body.ff-ds #cthKeySection p.ff-k-h { margin-top: 6px !important; }
/* Toggle chips show keyboard focus on the chip itself (the Isobars chip has
   no icon for the old icon-based ring to hang on). */
body.ff-ds .li-pill:focus-within { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* ── The player bar, homepage style (user request 2026-10-11) ──────────
   The bar holds the view's main choice and its overlay switches; the rest
   (loop length, speed, areas, colour scale, rivers, values...) sits behind
   a tune button at the right of the top row, as on the homepage player.
   The key panel keeps keys, notes, credits and record lists.

   Toggles are switches with a label, never pill buttons: the toggle chips
   (.li-pill, a label round a checkbox, .on set by script) are redrawn in
   place, the switch drawn on the checkbox itself. The chip's On/Off text
   (#isoPillLabel, #liPillLabel...) is hidden and the group's own label
   moves inline beside the switch. */
body.ff-ds .li-pill,
body.ff-ds .li-pill.on,
body.ff-ds .li-pill:hover,
body.ff-ds .li-pill.on:hover {
  width: auto; padding: 0; gap: 8px; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--ds-ink); font: 500 13px/1.3 var(--ds-font);
}
body.ff-ds .li-pill input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; margin: 0; cursor: pointer;
  width: 32px; height: 18px; opacity: 1; pointer-events: auto; border-radius: 9999px;
  background: rgba(15, 23, 42, .18); transition: background .15s;
}
body.ff-ds .li-pill input[type=checkbox]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); transition: transform .15s;
}
body.ff-ds .li-pill input[type=checkbox]:checked { background: var(--brand-600); }
body.ff-ds .li-pill input[type=checkbox]:checked::after { transform: translateX(14px); }
body.ff-ds .li-pill input[type=checkbox]:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47, 134, 150, .35); }
body.ff-ds .li-pill:focus-within { outline: 0; }
body.ff-ds .li-pill > svg,
body.ff-ds .li-pill [id$="PillLabel"] { display: none; }
body.ff-ds .li-pill .ff-sw-txt { display: inline; }
[data-theme="dark"] body.ff-ds.ff-ds-dark .li-pill input[type=checkbox] { background: rgba(148, 163, 184, .3); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .li-pill input[type=checkbox]:checked { background: var(--brand-500); }
[data-theme="dark"] body.ff-ds.ff-ds-dark .li-pill.on { background: transparent; color: var(--ds-ink); }
/* A switch sits on the select row's baseline: its group label is the text
   beside it, so the label above is dropped. */
body.ff-ds .player-panel .control-group:has(> .li-pill) { justify-content: flex-end; min-height: 34px; padding-bottom: 7px; }
body.ff-ds .player-panel .control-group:has(> .li-pill) > .control-label { display: none; }

/* A switch that is a button whose on-state is a class (.seg-active, set by
   the page's script, e.g. /accum's Gauges): .ff-switch-btn with a
   .ff-switch-ui inside. */
body.ff-ds .ff-switch-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: transparent; cursor: pointer;
  font: 500 13px/1.3 var(--ds-font); color: var(--ds-ink); white-space: nowrap;
}
body.ff-ds .ff-switch-btn .ff-switch-ui {
  position: relative; flex-shrink: 0; width: 32px; height: 18px; border-radius: 9999px;
  background: rgba(15, 23, 42, .18); transition: background .15s;
}
body.ff-ds .ff-switch-btn .ff-switch-ui::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); transition: transform .15s;
}
body.ff-ds .ff-switch-btn.seg-active .ff-switch-ui { background: var(--brand-600); }
body.ff-ds .ff-switch-btn.seg-active .ff-switch-ui::after { transform: translateX(14px); }
body.ff-ds .ff-switch-btn:focus-visible { outline: 0; }
body.ff-ds .ff-switch-btn:focus-visible .ff-switch-ui { box-shadow: 0 0 0 3px rgba(47, 134, 150, .35); }
body.ff-ds .player-panel .control-group:has(> .ff-switch-btn) { justify-content: flex-end; min-height: 34px; padding-bottom: 7px; }

/* The tune button and its menu. */
body.ff-ds .ff-tune { position: relative; margin-left: auto; align-self: flex-end; flex: 0 0 auto; }
body.ff-ds .ff-tune-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ds-body);
}
body.ff-ds .ff-tune-btn:hover,
body.ff-ds .ff-tune-btn[aria-expanded="true"] { background: var(--ds-seg); color: var(--ds-ink); }
body.ff-ds .ff-tune-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
body.ff-ds .ff-tune-btn .material-icons { font-size: 21px; }
body.ff-ds .ff-tune-menu {
  position: absolute; right: -6px; bottom: calc(100% + 12px); z-index: 1200;
  width: 290px; max-width: calc(100vw - 24px); max-height: 62vh; overflow-y: auto;
  padding: 12px 14px; border-radius: 16px; text-align: left;
  background: linear-gradient(140deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 100%);
  -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 22px 48px -18px rgba(15, 23, 42, .45);
  font-family: var(--ds-font);
}
body.ff-ds .ff-tune-menu[hidden] { display: none; }
[data-theme="dark"] body.ff-ds.ff-ds-dark .ff-tune-menu { background: linear-gradient(140deg, rgba(30, 41, 59, .97) 0%, rgba(15, 23, 42, .94) 100%); }
/* A control group moved into the menu is one row: label left, control
   right. Switch rows (custom-checkbox, li-pill) read left to right. */
body.ff-ds .ff-tune-menu .control-group {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-width: 0; max-width: none; flex: none; margin: 0; padding: 0;
}
body.ff-ds .ff-tune-menu .control-group + .control-group,
body.ff-ds .ff-tune-menu .control-group + .custom-checkbox,
body.ff-ds .ff-tune-menu .custom-checkbox + .control-group,
body.ff-ds .ff-tune-menu .custom-checkbox + .custom-checkbox { margin-top: 10px; }
body.ff-ds .ff-tune-menu .control-label { padding: 0; margin: 0; font-size: 13px; color: var(--ds-body); white-space: nowrap; }
/* The pages size their bar selects by id (#durationSelect, #speedSelect...,
   often in phone rules), which outranks any class rule; inside the menu
   the select is always the system's pill at one width. */
body.ff-ds .ff-tune-menu select {
  flex: 0 0 auto !important; width: 150px !important; max-width: 60% !important; height: auto !important; min-height: 0 !important;
  padding: 7px 30px 7px 13px !important; border: 0 !important; border-radius: 9999px !important; box-shadow: none !important;
  font: 500 13px/1.3 var(--ds-font) !important; color: var(--ds-ink) !important;
  background: var(--ds-seg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center !important;
}
[data-theme="dark"] body.ff-ds.ff-ds-dark .ff-tune-menu select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
body.ff-ds .ff-tune-menu .custom-checkbox { display: flex; padding: 0; margin: 0; font-size: 13px; color: var(--ds-ink); }
body.ff-ds .ff-tune-menu .ff-tune-sep { height: 1px; background: var(--ds-line); margin: 12px -2px; }
/* A menu that opens on its switches (no select rows above) needs no rule. */
body.ff-ds .ff-tune-menu > .ff-tune-sep:first-child,
body.ff-ds .ff-tune-menu > [style*="display:none"] + .ff-tune-sep,
body.ff-ds .ff-tune-menu > [style*="display: none"] + .ff-tune-sep { display: none; }
body.ff-ds .ff-tune-menu .ff-tune-h { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; color: var(--ds-muted); }
body.ff-ds .ff-tune-menu input[type=range] { accent-color: var(--brand-600); }
@media (max-width: 767px) {
  body.ff-ds .ff-tune-menu { right: -4px; width: min(300px, calc(100vw - 24px)); }
  body.ff-ds .ff-tune-menu select { width: 140px !important; }
}

/* ── Rain gauge and other observation pages (2026-10-11) ─────────────── */
/* /observations' Sources: the ChecklistDropdown (a pill button the size of
   the selects beside it, a white card of options). The amber lag tag keeps
   its caution pair. */
body.ff-ds .src-dd-btn {
  padding: 7px 30px 7px 13px; border: 0; border-radius: 9999px; background-color: var(--ds-seg);
  background-position: right 12px center; font: 500 13px/1.3 var(--ds-font); color: var(--ds-ink);
}
body.ff-ds .src-dd-btn:hover,
body.ff-ds .src-dd-btn[aria-expanded="true"] { background-color: var(--ds-seg-hover); }
body.ff-ds .src-menu {
  border-radius: 16px; border: 1px solid #e2e8f0; padding: 6px; font-family: var(--ds-font);
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 12px -4px rgba(15, 23, 42, .08);
}
body.ff-ds .src-opt { border-radius: 10px; }
body.ff-ds .src-opt:hover { background: #f1f5f9; }
body.ff-ds .src-opt input { accent-color: var(--brand-600); }
body.ff-ds .src-opt-name { font-size: 13.5px; font-weight: 600; color: var(--ds-ink); }
body.ff-ds .src-opt-sub { color: var(--ds-muted); }
@media (max-width: 767px) { body.ff-ds .src-dd-btn { padding: 6px 24px 6px 10px; font-size: 12px; background-position: right 9px center; } }

/* The pages built on rain.html gave their main select (#accumSelect,
   #paramSelect) a brand outline and label; on the system the bar's main
   choice is an ordinary pill select like the rest. */
body.ff-ds #accumGroup .control-label { color: var(--ds-muted); }
body.ff-ds .player-panel select#accumSelect,
body.ff-ds .player-panel select#paramSelect { border: 0; box-shadow: none; color: var(--ds-ink); background-color: var(--ds-seg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.ff-ds .player-panel select#accumSelect:hover,
body.ff-ds .player-panel select#paramSelect:hover { background-color: var(--ds-seg-hover); }
/* /rain's two-grip window: the selected window is the homepage's played
   teal, the grab handle and the end grip brand-700, the start grip slate
   (start and end still tell apart). Geometry is the page's own. */
body.ff-ds .range-selected { background: var(--brand-300); opacity: 1; }
body.ff-ds .range-grab { background: var(--brand-700); box-shadow: 0 2px 6px -1px rgba(31, 85, 95, .55); }
body.ff-ds #sliderStart::-webkit-slider-thumb { background-color: #64748b; }
body.ff-ds #sliderEnd::-webkit-slider-thumb { background-color: var(--brand-700); box-shadow: 0 2px 6px rgba(31, 85, 95, .5), 0 0 0 2px #fff; }
body.ff-ds #sliderStart::-moz-range-thumb { background-color: #64748b; }
body.ff-ds #sliderEnd::-moz-range-thumb { background-color: var(--brand-700); box-shadow: 0 2px 6px rgba(31, 85, 95, .5), 0 0 0 2px #fff; }
/* Key panel tabs (Thresholds / Top 10, Wettest / Driest, Highest / Lowest):
   the system's segmented control. .active is what the scripts toggle. */
body.ff-ds .info-panel .panel-tabs {
  display: flex; gap: 2px; padding: 3px; border-radius: 9999px; background: var(--ds-seg);
}
body.ff-ds .info-panel .panel-tab {
  flex: 1; border: 0; border-radius: 9999px; background: transparent; color: var(--ds-body);
  font: 500 12.5px/1 var(--ds-font); padding: 7px 10px; letter-spacing: 0; text-transform: none; box-shadow: none;
}
body.ff-ds .info-panel .panel-tab:hover { color: var(--ds-ink); background: transparent; }
body.ff-ds .info-panel .panel-tab.active { background: #fff; color: var(--brand-800); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
/* The round Play button on the day players (/soil-moisture, /observations)
   is #playBtn, already covered above; their tick labels sit in .tick-label. */

/* ── Forecast pages (/models, /multimodel, /compare, /ukvtrend, /ukvsplat),
   2026-10-11. The sliding two-way toggle (Single / Multi) is the system's
   segmented control: a quiet track, a white knob, brand ink on the chosen
   side. The page's own script moves the knob. */
body.ff-ds .mode-toggle {
  background: var(--ds-seg); border: 0; border-radius: 9999px; font-family: var(--ds-font); box-shadow: none;
}
body.ff-ds .mode-toggle-knob { background: #fff; border-radius: 9999px; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
body.ff-ds .mode-toggle-label { font: 500 12.5px/1 var(--ds-font); color: var(--ds-body); }
body.ff-ds.mode-multi .mode-toggle .mtl-multi,
body.ff-ds:not(.mode-multi) .mode-toggle .mtl-single { color: var(--brand-800); font-weight: 600; }
body.ff-ds .mode-toggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
/* Share beside Play (the forecast pages call it .share-btn). */
body.ff-ds .share-btn {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 0; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-seg); color: var(--ds-body);
}
body.ff-ds .share-btn:hover { background: var(--ds-seg-hover); color: var(--ds-ink); }
body.ff-ds .info-panel #attribution { font-size: 11px; line-height: 1.55; color: var(--ds-muted); margin: 10px 0 0; }
/* /compare and /ukvtrend: a colour key floating on each pane is glass, the
   header row's menu a white card. The header row itself stays navy: the
   freshness chip in it is drawn light-on-navy. */
body.ff-ds .map-cbar {
  background: var(--ds-glass); -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur);
  border: 0; border-radius: 14px; box-shadow: var(--ds-glass-shadow); font-family: var(--ds-font); color: var(--ds-body);
}
body.ff-ds .map-cbar > p { font: 600 12px var(--ds-font); color: var(--ds-ink); letter-spacing: 0; text-transform: none; }
body.ff-ds .map-header-cell,
body.ff-ds .map-header-row { font-family: var(--ds-font); }
body.ff-ds .map-menu-dropdown {
  border-radius: 16px; border: 1px solid #e2e8f0; background: #fff; font-family: var(--ds-font);
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 12px -4px rgba(15, 23, 42, .08);
}
body.ff-ds .map-menu-item { font: 500 13px var(--ds-font); color: var(--ds-ink); }
body.ff-ds .map-menu-link { font: 500 13px var(--ds-font); color: var(--brand-700); }
/* The header menu's area values checkbox is a switch, like every on/off option. */
body.ff-ds .map-menu-item input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; margin: 0; cursor: pointer;
  width: 32px; height: 18px; border-radius: 9999px; background: rgba(15, 23, 42, .18); transition: background .15s;
}
body.ff-ds .map-menu-item input[type="checkbox"]::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .3); transition: transform .15s;
}
body.ff-ds .map-menu-item input[type="checkbox"]:checked { background: var(--brand-600); }
body.ff-ds .map-menu-item input[type="checkbox"]:checked::after { transform: translateX(14px); }

/* ── Sweep fixes (2026-10-11) ─────────────────────────────────────────── */
/* Midnight and noon ticks are coloured inline by the page scripts (#01579b,
   #4fc3f7, off-system blues); on the system they are the homepage's slate
   ticks, midnight the stronger one. */
body.ff-ds .timeline-ticks .tick:is([style*="1, 87, 155"], [style*="01579b"]) { background: rgba(15, 23, 42, .5) !important; width: 1px !important; }
body.ff-ds .timeline-ticks .tick:is([style*="79, 195, 247"], [style*="4fc3f7"]) { background: rgba(15, 23, 42, .28) !important; width: 1px !important; }
/* Nothing under the system's 11px floor: key labels, the Experimental tag,
   the forecast step line under the readout. */
body.ff-ds .cbar-labels,
body.ff-ds .cbar-label { font-size: 11px; }
body.ff-ds .exp-tag { font-size: 11px; }
body.ff-ds .info-panel .exp-tag,
body.ff-ds .info-panel.collapsed .exp-tag { font-size: 11px; }
body.ff-ds #playerOffsetLine { font-family: var(--ds-font); font-size: 11px; color: var(--ds-muted); }
/* /radar's and /satellite's "About this radar" text under the map. */
body.ff-ds .radar-about,
body.ff-ds .radar-about * { font-family: var(--ds-font); }
/* One family on a design-system map page: Outfit for every piece of text in
   the page area (the map pages' own styles set Roboto in dozens of places),
   sparing icon fonts and monospace. */
body.ff-ds main :not(.material-icons):not(.material-icons-outlined):not(code):not(pre):not(kbd):not(.font-mono):not([style*="monospace"]) { font-family: var(--ds-font); }
/* The readout's date line at the 11px floor (the homepage's 10.5px). */
body.ff-ds #playerDateLine { font-size: 11px; }
/* /compare's and /ukvtrend's under / over labels under the difference key. */
body.ff-ds .map-cbar .bias-arrows { font-size: 11px; }
/* /ukvtrend's hour labels on the timeline. */
body.ff-ds .tick-mark { font-size: 11px; }
/* The page behind a map page is the system's page sea (#e0edf3), where any of
   it shows (/compare's band under the maps on a laptop), not Tailwind's grey. */
html[data-theme] body.ff-ds { background: #e0edf3; }
[data-theme="dark"] body.ff-ds.ff-ds-dark { background: #020617; }

/* /compare shortened its maps by 140px up to 1440px, which on a laptop left an
   empty band of page under the floating player. Where the player floats
   (above 1024px) the maps run to the foot of the window, as on every other
   map page; at 1024px and below the full-width player still sits in the band. */
@media (min-width: 1025px) and (max-width: 1440px) {
  body.ff-ds .maps-outer { height: calc(100vh - 64px); }
}

/* The 11px floor below 380px: /accum's Grid/Areas and /observations' Sources
   button dropped to 10px there, smaller than the selects beside them. */
@media (max-width: 380px) {
  body.ff-ds .player-panel .control-group .seg-btn,
  body.ff-ds .player-panel .src-dd-btn { font-size: 11px; }
}

/* /rainmulti caps every control group at 130px below 1025px, and the View
   pill (Multi duration / By day) needs about 185px in the system's segmented
   style, so it ran under Duration. That group keeps its own width. */
@media (max-width: 1024px) {
  body.ff-ds .player-panel:has(#durationGroup) .control-group:has(> .seg-control) { flex: 0 0 auto; max-width: none; }
}

/* /models caps Run at 172px from 1024px down, sized for the old 11px select;
   at the system's size the run label lost its "(short)" tag there. Where the
   row has the room (880px up; below, the settings button would wrap onto a
   row of its own) Run gets the 216px that label needs. */
@media (min-width: 880px) and (max-width: 1024px) {
  body.ff-ds .player-panel .ctl-run { max-width: 216px; }
}