/* ff_warn_ds.css: the Flood Forecast design system for the warnings map
   pages: /floodwarnings, /warningexplorer, /warnings and
   /warnings/archive-view (2026-10-10).

   These pages are a different family from the radar pages: a map with a
   floating control bar, and a sidebar of cards beside it (stacked under the
   map on a phone). They opt in with
   `{% block body_class %} ff-ds ff-ds-dark ff-ds-warn{% endblock %}` and
   link css/ff_map_ds.css (the glass player, pill selects, map buttons,
   info dialog) and then this file, last in head_extra.

   Their own <style> sits in main_content, AFTER head_extra, so these rules
   win on specificity only, never on order. Every rule is therefore scoped
   `body.ff-ds.ff-ds-warn` (0,3,1 and up), which beats both the page's light
   rules and its `[data-theme="dark"] .x` (0,2,0) dark rules. Colours come
   from the variables below, redefined for dark, so a light rule here never
   paints a white panel in dark mode.

   Class names the scripts read are kept and restyled in place (.active,
   .mode-polygons/.mode-centroids, .open, .on, .show, .selected, .expired,
   .is-new, .has-active, .collapsed, the badge classes). */

body.ff-ds.ff-ds-warn {
  --w-page: #e0edf3;
  --w-surface: #ffffff;
  --w-sunk: #f1f5f9;
  --w-ink: #0f172a;
  --w-body: #334155;
  --w-muted: #64748b;
  --w-line: #e2e8f0;
  --w-edge: rgba(15, 23, 42, .08);
  --w-seg: rgba(15, 23, 42, .06);
  --w-seg-hover: rgba(15, 23, 42, .10);
  --w-seg-on: #ffffff;
  --w-seg-on-ink: var(--brand-800);
  --w-link: var(--brand-600);
  --w-head: #3a4a63;
  --w-strip: #3a4a63;
  --w-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px -4px rgba(15, 23, 42, .08);
  --w-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 28px -8px rgba(15, 23, 42, .16);
  --w-shadow-menu: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 12px -4px rgba(15, 23, 42, .08);
  --w-shadow-float: 0 1px 2px rgba(15, 23, 42, .08), 0 14px 34px -12px rgba(15, 23, 42, .42);
  --w-chev: 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");
  --w-chev-light: 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='%23e2e8f0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --w-font: 'Outfit', sans-serif;
  background: var(--w-page);
  color: var(--w-body);
}
[data-theme="dark"] body.ff-ds.ff-ds-warn {
  --w-page: #020617;
  --w-surface: #0f172a;
  --w-sunk: #1e293b;
  --w-ink: #f1f5f9;
  --w-body: #cbd5e1;
  --w-muted: #94a3b8;
  --w-line: rgba(148, 163, 184, .18);
  --w-edge: rgba(148, 163, 184, .16);
  --w-seg: rgba(148, 163, 184, .14);
  --w-seg-hover: rgba(148, 163, 184, .22);
  --w-seg-on: #334155;
  --w-seg-on-ink: #ffffff;
  --w-link: var(--brand-300);
  --w-head: #1e293b;
  --w-strip: #0f172a;
  --w-shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --w-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -8px rgba(0, 0, 0, .6);
  --w-shadow-menu: 0 18px 40px -12px rgba(0, 0, 0, .7);
  --w-shadow-float: 0 14px 34px -12px rgba(0, 0, 0, .8);
  --w-chev: 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");
}

/* ── One family: Outfit for everything on the page (the system's rule for a
   page moved onto it). !important because a few rows carry an inline
   Roboto; the alert id in the drawer keeps its monospace. */
body.ff-ds.ff-ds-warn :is(.floodwarnings-outer, .warningexplorer-outer, .warnings-outer, .details-drawer, .info-modal-backdrop, .intro-overlay),
body.ff-ds.ff-ds-warn :is(.floodwarnings-outer, .warningexplorer-outer, .warnings-outer, .details-drawer, .info-modal-backdrop, .intro-overlay) *:not(#drawerId) {
  font-family: var(--w-font) !important;
}

/* ── Page, map and scrollbars ───────────────────────────────────────── */
body.ff-ds.ff-ds-warn .panels-row { background: var(--w-page); }
body.ff-ds.ff-ds-warn #map,
body.ff-ds.ff-ds-warn .panel-map { background: var(--w-page); }
body.ff-ds.ff-ds-warn ::-webkit-scrollbar-track { background: transparent; }
body.ff-ds.ff-ds-warn ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 3px; }
[data-theme="dark"] body.ff-ds.ff-ds-warn ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .28); }

/* ── Sidebar: a white column with the navy head the freshness chip and the
   info button are drawn for (light on navy), and a list of cards on the
   page's own sea colour. */
body.ff-ds.ff-ds-warn .side,
body.ff-ds.ff-ds-warn .right-wrap {
  background: var(--w-surface); border-left: 1px solid var(--w-line);
}
body.ff-ds.ff-ds-warn .side-head,
body.ff-ds.ff-ds-warn .right-header {
  background: var(--w-head); color: #fff; border-bottom: 0;
}
body.ff-ds.ff-ds-warn .side-head-title,
body.ff-ds.ff-ds-warn .right-header-title {
  font-size: 15px; font-weight: 600; letter-spacing: 0; color: #fff;
}
body.ff-ds.ff-ds-warn .right-header .cnt,
body.ff-ds.ff-ds-warn #sidebarCounts {
  font-size: 12px !important; font-weight: 500 !important; color: #cbd5e1 !important;
  font-variant-numeric: tabular-nums;
}
/* Sort select on the navy head: a quiet light pill. */
body.ff-ds.ff-ds-warn .side-head .sort-select {
  background: rgba(255, 255, 255, .12) var(--w-chev-light) no-repeat right 10px center;
  color: #f1f5f9; border: 0; border-radius: 9999px; padding: 6px 26px 6px 12px;
  font-size: 12px; font-weight: 500;
}
body.ff-ds.ff-ds-warn .side-head .sort-select:hover { background-color: rgba(255, 255, 255, .2); }
body.ff-ds.ff-ds-warn .sort-select option { color: #0f172a; background: #fff; }

/* Selects that sit on a white surface (sort in the explorer's key row, the
   chart's period, the archive's month): the system's pill select. */
body.ff-ds.ff-ds-warn .legend .sort-select,
body.ff-ds.ff-ds-warn .chart-period-select,
body.ff-ds.ff-ds-warn .sidebar-filter-controls select.premium-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--w-seg) var(--w-chev) no-repeat right 11px center;
  border: 0; border-radius: 9999px; box-shadow: none; height: auto;
  padding: 6px 28px 6px 12px; font-size: 12px; font-weight: 500; color: var(--w-ink);
}
body.ff-ds.ff-ds-warn .legend .sort-select:hover,
body.ff-ds.ff-ds-warn .chart-period-select:hover,
body.ff-ds.ff-ds-warn .sidebar-filter-controls select.premium-select:hover { background-color: var(--w-seg-hover); }
body.ff-ds.ff-ds-warn .sidebar-filter-controls select.premium-select { padding: 8px 30px 8px 14px; font-size: 13px; }
body.ff-ds.ff-ds-warn :is(.sort-select, .chart-period-select, select.premium-select):focus-visible {
  outline: 2px solid var(--brand-500); outline-offset: 1px;
}

/* The archive's month row (inline-styled grey band). */
body.ff-ds.ff-ds-warn .sidebar-filter-controls {
  background: var(--w-surface) !important; border-bottom: 1px solid var(--w-line) !important;
}

/* The explorer's key row (Warning area, Alert area, sort). */
body.ff-ds.ff-ds-warn .legend { color: var(--w-body); font-size: 12px; padding: 10px 14px; border-bottom: 1px solid var(--w-line); }
body.ff-ds.ff-ds-warn .legend i { width: 10px; height: 10px; border-radius: 3px; }

/* Warning counts: the system's WarningCounts tiles (the homepage's .ix-count),
   gradient and ink per level, colour kept at zero. The tiles carry an inline
   background, hence !important; their display (Severe hides) is left alone. */
body.ff-ds.ff-ds-warn .summary { gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--w-line); }
body.ff-ds.ff-ds-warn .stat {
  --c-top: #e2e8f0; --c-bot: #cbd5e1; --c-edge: rgba(15, 23, 42, .14); --c-ink: #1e293b;
  background: linear-gradient(160deg, var(--c-top) 0%, var(--c-bot) 100%) !important;
  color: var(--c-ink); border-radius: 14px; padding: 10px 8px 9px; outline: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px var(--c-edge), 0 1px 2px rgba(15, 23, 42, .06);
}
body.ff-ds.ff-ds-warn #statAlert   { --c-top: #fef3c7; --c-bot: #fde68a; --c-edge: rgba(180, 83, 9, .18);  --c-ink: #713f12; }
body.ff-ds.ff-ds-warn #statWarning { --c-top: #f6d5cf; --c-bot: #d99a90; --c-edge: rgba(153, 27, 27, .18); --c-ink: #6b1d17; }
body.ff-ds.ff-ds-warn #statSevere  { --c-top: #e2e8f0; --c-bot: #cbd5e1; --c-edge: rgba(15, 23, 42, .14);  --c-ink: #1e293b; }
[data-theme="dark"] body.ff-ds.ff-ds-warn #statAlert   { --c-top: rgba(217, 119, 6, .38);  --c-bot: rgba(180, 83, 9, .24);  --c-edge: rgba(251, 191, 36, .25);  --c-ink: #fde68a; }
[data-theme="dark"] body.ff-ds.ff-ds-warn #statWarning { --c-top: rgba(185, 28, 28, .42); --c-bot: rgba(153, 27, 27, .26); --c-edge: rgba(248, 113, 113, .25); --c-ink: #fecaca; }
[data-theme="dark"] body.ff-ds.ff-ds-warn #statSevere  { --c-top: rgba(100, 116, 139, .45); --c-bot: rgba(71, 85, 105, .3); --c-edge: rgba(203, 213, 225, .2); --c-ink: #e2e8f0; }
body.ff-ds.ff-ds-warn .stat:hover { opacity: 1; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px var(--c-edge), 0 6px 14px -6px rgba(15, 23, 42, .25); }
body.ff-ds.ff-ds-warn .stat.active { transform: none; box-shadow: inset 0 0 0 2px var(--c-ink), 0 1px 2px rgba(15, 23, 42, .06); }
body.ff-ds.ff-ds-warn .stat .n { font-size: 26px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
body.ff-ds.ff-ds-warn .stat .l { font-size: 12px; font-weight: 500; opacity: 1; margin-top: 5px; }
body.ff-ds.ff-ds-warn .stat .src-split { font-size: 11px; font-weight: 500; height: 14px; letter-spacing: 0; margin-top: 3px; }
body.ff-ds.ff-ds-warn .stat .src-split.show { opacity: .85; }

/* History strip (/floodwarnings, chart scrubbed to a past time): a sunk band,
   no decorative left rule, the way out as a quiet pill. */
body.ff-ds.ff-ds-warn .hist-bar {
  background: var(--w-sunk); color: var(--w-body); border-left: 0; border-bottom: 1px solid var(--w-line);
  font-size: 12.5px; padding: 9px 14px;
}
body.ff-ds.ff-ds-warn .hist-bar .hb-when { color: var(--w-ink); }
body.ff-ds.ff-ds-warn .hist-bar button,
body.ff-ds.ff-ds-warn #timeBanner button {
  border: 0 !important; background: var(--w-surface) !important; color: var(--w-ink) !important;
  box-shadow: inset 0 0 0 1px var(--w-line); border-radius: 9999px !important;
  padding: 5px 12px !important; font-size: 12px !important; font-weight: 600 !important;
}
body.ff-ds.ff-ds-warn .hist-bar button:hover,
body.ff-ds.ff-ds-warn #timeBanner button:hover { background: var(--w-seg) !important; }
/* The chart's own banner is inline-styled; its display is set by script. */
body.ff-ds.ff-ds-warn #timeBanner {
  background: var(--w-sunk) !important; color: var(--w-body) !important;
  border-left: 0 !important; border-top: 1px solid var(--w-line) !important; font-size: 12.5px !important;
}

/* ── The list: cards on the page colour ────────────────────────────── */
body.ff-ds.ff-ds-warn .list,
body.ff-ds.ff-ds-warn .tbl-wrap { background: var(--w-page); padding: 12px; gap: 10px; }
body.ff-ds.ff-ds-warn .empty,
body.ff-ds.ff-ds-warn .empty-state { color: var(--w-body); font-size: 13px; }

/* Cards: white, a hairline, the system's card shadow, radius 14. No coloured
   stripe down the left edge (the system rules them out): the severity is a
   dot before the title instead, and is still said in words on the card.
   The stripe's colour is left in border-left-color (scripts set it inline on
   .wcard and .acard), so the dot inherits it from there; only the width goes. */
body.ff-ds.ff-ds-warn :is(.wcard, .acard, .warning-card) {
  background: var(--w-surface); border-radius: 14px; padding: 14px 16px;
  border-top: 0; border-right: 0; border-bottom: 0; border-left-width: 0;
  box-shadow: inset 0 0 0 1px var(--w-edge), var(--w-shadow-card);
}
body.ff-ds.ff-ds-warn :is(.wcard, .acard, .warning-card):hover {
  background: var(--w-surface); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--w-edge), var(--w-shadow-card-hover);
}
body.ff-ds.ff-ds-warn :is(.wcard .wt, .acard .at, .warning-card .card-title) {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--w-ink);
}
body.ff-ds.ff-ds-warn :is(.wcard .wt, .acard .at)::before,
body.ff-ds.ff-ds-warn .warning-card .card-title::before {
  content: ''; flex: 0 0 auto; width: 0; height: 9px; margin-top: 5px;
  border-left: 9px solid; border-radius: 50%;
}
body.ff-ds.ff-ds-warn :is(.wcard .wt, .acard .at) { border-left-color: inherit; }
body.ff-ds.ff-ds-warn :is(.wcard .wt, .acard .at)::before { border-left-color: inherit; }
/* /warnings: the level is a class on the card (Met Office colours). */
body.ff-ds.ff-ds-warn .warning-card .card-title::before { border-left-color: #bdc1c6; }
body.ff-ds.ff-ds-warn .warning-card.sev-extreme .card-title::before  { border-left-color: #d60000; }
body.ff-ds.ff-ds-warn .warning-card.sev-severe .card-title::before   { border-left-color: #e35c00; }
body.ff-ds.ff-ds-warn .warning-card.sev-moderate .card-title::before { border-left-color: #e0a300; }
body.ff-ds.ff-ds-warn .warning-card.sev-minor .card-title::before    { border-left-color: var(--brand-500); }
body.ff-ds.ff-ds-warn .warning-card.selected {
  background: var(--brand-50);
  box-shadow: inset 0 0 0 2px var(--brand-500), var(--w-shadow-card);
}
[data-theme="dark"] body.ff-ds.ff-ds-warn .warning-card.selected { background: rgba(47, 134, 150, .16); }
body.ff-ds.ff-ds-warn .wcard.is-new { animation: ffw-flash-new 2.5s ease-out; }
@keyframes ffw-flash-new {
  0%   { background: var(--brand-50); }
  100% { background: var(--w-surface); }
}
[data-theme="dark"] body.ff-ds.ff-ds-warn .wcard.is-new { animation-name: ffw-flash-new-dark; }
@keyframes ffw-flash-new-dark {
  0%   { background: rgba(47, 134, 150, .22); }
  100% { background: var(--w-surface); }
}
body.ff-ds.ff-ds-warn .wcard .wcard-issued { font-size: 12px; font-weight: 500; color: var(--w-body); margin-top: 5px; }
body.ff-ds.ff-ds-warn :is(.wcard .wm, .acard .am) { font-size: 12px; color: var(--w-muted); margin-top: 3px; }
body.ff-ds.ff-ds-warn .wcard-meta { border-top: 1px solid var(--w-line); margin-top: 10px; padding-top: 8px; }
body.ff-ds.ff-ds-warn .wcard-meta-item,
body.ff-ds.ff-ds-warn .wcard-prop { font-size: 12px; color: var(--w-muted); }
body.ff-ds.ff-ds-warn .wcard-meta-label { font-weight: 500; color: var(--w-body); }
/* The level pill keeps its severity fill (set inline by the script). */
body.ff-ds.ff-ds-warn .wcard .pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 9999px; }
body.ff-ds.ff-ds-warn :is(.wcard .prop-pill, .pop-prop-chip) {
  background: var(--w-sunk); color: var(--w-body); border: 0; border-radius: 9999px;
  font-size: 11px; font-weight: 600; padding: 2px 9px;
}

/* /warnings cards: time and description lines, and the small badges. */
body.ff-ds.ff-ds-warn .card-time { font-size: 12px; font-weight: 500; color: var(--w-muted); }
body.ff-ds.ff-ds-warn .card-time svg { stroke: var(--w-muted); }
body.ff-ds.ff-ds-warn .card-desc { font-size: 12.5px; line-height: 1.5; color: var(--w-body); }
body.ff-ds.ff-ds-warn :is(.sev-badge, .type-badge, .status-badge, .tag-badge) {
  font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 2px 9px; border-radius: 9999px;
}
body.ff-ds.ff-ds-warn :is(.tag-badge, .badge-unknown, .type-alert, .type-update, .expired-badge) {
  background: var(--w-sunk); color: var(--w-body); border: 1px solid var(--w-line);
}
body.ff-ds.ff-ds-warn .type-cancel { background: var(--w-ink); color: var(--w-surface); border: 1px solid var(--w-ink); }

/* Data credits at the foot of the sidebar. */
body.ff-ds.ff-ds-warn .foot {
  font-size: 11px; line-height: 1.55; color: var(--w-muted); text-align: left;
  background: var(--w-surface); border-top: 1px solid var(--w-line); padding: 10px 14px; flex-shrink: 0;
}
body.ff-ds.ff-ds-warn .foot a { color: var(--w-link); }

/* ── Chart under the map (/floodwarnings) ───────────────────────────── */
body.ff-ds.ff-ds-warn .chart-panel { background: var(--w-surface); border-top: 1px solid var(--w-line); }
body.ff-ds.ff-ds-warn .chart-head { font-size: 13px; font-weight: 600; color: var(--w-ink); }
body.ff-ds.ff-ds-warn .chart-head .legend { color: var(--w-body); font-size: 12px; padding: 0; border: 0; }
body.ff-ds.ff-ds-warn .chart-head .dot { border-radius: 50%; width: 9px; height: 9px; }
body.ff-ds.ff-ds-warn .chart-head .toggle { color: var(--w-muted); }
body.ff-ds.ff-ds-warn .chart-scope { border-radius: 9999px; font-size: 11px; }
body.ff-ds.ff-ds-warn #chartTooltip { border-radius: 10px !important; background: #1e293b !important; color: #f1f5f9 !important; font-size: 12px !important; }

/* ── Control bar over the map: ff_map_ds.css makes it glass; here the
   controls inside it share one 34px height and the system's pill shapes. */
body.ff-ds.ff-ds-warn .player-panel { padding: 10px 16px 12px; }
body.ff-ds.ff-ds-warn .control-label { padding-left: 10px; color: var(--ds-muted); }
body.ff-ds.ff-ds-warn .player-panel select.premium-select {
  height: 34px; padding: 0 30px 0 13px; font-size: 13px; line-height: 34px;
}
/* Display: Icons / Polys, the system's segmented control (the knob and the
   label classes are what the script toggles). */
body.ff-ds.ff-ds-warn .mode-toggle { background: var(--w-seg); height: 34px; border-radius: 9999px; }
body.ff-ds.ff-ds-warn .mode-toggle-knob {
  background: var(--w-seg-on); border-radius: 9999px; box-shadow: 0 1px 2px rgba(15, 23, 42, .14);
}
body.ff-ds.ff-ds-warn .mode-toggle-label { font-size: 12.5px; font-weight: 500; color: var(--ds-muted); }
body.ff-ds.ff-ds-warn .mode-toggle.mode-polygons .mtl-polygons,
body.ff-ds.ff-ds-warn .mode-toggle.mode-centroids .mtl-centroids { color: var(--w-seg-on-ink); font-weight: 600; }
body.ff-ds.ff-ds-warn .mode-toggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* On/off options are switches with a label beside them, as on the homepage
   player (user request 2026-10-11: toggles look like switches, not
   buttons): Show (Rivers, Property counts), Rivers on /warnings, and Colour
   by: Properties at risk. No pill behind them; the switch is drawn on the
   checkbox itself, or on .pm-dot for the Properties button (its .active is
   what the script toggles). */
body.ff-ds.ff-ds-warn .show-btn,
body.ff-ds.ff-ds-warn .rivers-check-label,
body.ff-ds.ff-ds-warn .check-pill,
body.ff-ds.ff-ds-warn .props-mode-btn {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; height: 34px; box-sizing: border-box;
  padding: 0 4px; gap: 8px; color: var(--w-ink); font-size: 13px; font-weight: 500;
}
body.ff-ds.ff-ds-warn .show-btn:hover,
body.ff-ds.ff-ds-warn .rivers-check-label:hover,
body.ff-ds.ff-ds-warn .check-pill:hover,
body.ff-ds.ff-ds-warn .props-mode-btn:hover,
body.ff-ds.ff-ds-warn .props-mode-btn.active { background: transparent; color: var(--w-ink); box-shadow: none; }
body.ff-ds.ff-ds-warn .show-btn label { color: var(--w-ink) !important; font-size: 13px !important; font-weight: 500 !important; gap: 8px !important; }
body.ff-ds.ff-ds-warn .show-btn svg path { stroke: var(--ds-muted); }
body.ff-ds.ff-ds-warn :is(.show-btn, .rivers-check-label, .check-pill) input[type="checkbox"],
body.ff-ds.ff-ds-warn .props-mode-btn .pm-dot {
  -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.ff-ds-warn :is(.show-btn, .rivers-check-label, .check-pill) input[type="checkbox"]::after,
body.ff-ds.ff-ds-warn .props-mode-btn .pm-dot::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-ds-warn :is(.show-btn, .rivers-check-label, .check-pill) input[type="checkbox"]:checked,
body.ff-ds.ff-ds-warn .props-mode-btn.active .pm-dot { background: var(--brand-600); }
body.ff-ds.ff-ds-warn :is(.show-btn, .rivers-check-label, .check-pill) input[type="checkbox"]:checked::after,
body.ff-ds.ff-ds-warn .props-mode-btn.active .pm-dot::after { transform: translateX(14px); }
body.ff-ds.ff-ds-warn :is(.show-btn, .rivers-check-label, .check-pill) input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47, 134, 150, .35); }
body.ff-ds.ff-ds-warn .props-mode-btn:focus-visible { outline: 0; }
body.ff-ds.ff-ds-warn .props-mode-btn:focus-visible .pm-dot { box-shadow: 0 0 0 3px rgba(47, 134, 150, .35); }
[data-theme="dark"] body.ff-ds.ff-ds-warn :is(.show-btn, .rivers-check-label, .check-pill) input[type="checkbox"],
[data-theme="dark"] body.ff-ds.ff-ds-warn .props-mode-btn .pm-dot { background: rgba(148, 163, 184, .3); }
[data-theme="dark"] body.ff-ds.ff-ds-warn :is(.show-btn, .rivers-check-label, .check-pill) input[type="checkbox"]:checked,
[data-theme="dark"] body.ff-ds.ff-ds-warn .props-mode-btn.active .pm-dot { background: var(--brand-500); }
[data-theme="dark"] body.ff-ds.ff-ds-warn :is(.show-btn, .rivers-check-label, .check-pill, .props-mode-btn) { color: var(--w-ink); }

/* Multi-select dropdowns (Hazard, Warning level, Flood source): the
   ChecklistDropdown, a pill button and a white card of options. */
body.ff-ds.ff-ds-warn .multiselect-trigger {
  background: var(--w-seg); border: 0; border-radius: 9999px; height: 34px; padding: 0 12px 0 13px;
  color: var(--w-ink); font-size: 13px; font-weight: 500;
}
body.ff-ds.ff-ds-warn .multiselect-trigger:hover { background: var(--w-seg-hover); }
body.ff-ds.ff-ds-warn .trigger-text { color: var(--w-ink); }
body.ff-ds.ff-ds-warn .multiselect-trigger .chevron { color: var(--ds-muted); }
body.ff-ds.ff-ds-warn :is(.multiselect-options, .show-panel, .info-popup) {
  background: var(--w-surface); border: 1px solid var(--w-line); border-radius: 16px;
  box-shadow: var(--w-shadow-menu); color: var(--w-body);
}
body.ff-ds.ff-ds-warn .multiselect-options { padding: 6px; }
body.ff-ds.ff-ds-warn :is(.option-item, .show-item) {
  font-size: 13px; font-weight: 500; color: var(--w-body); border-radius: 10px;
}
body.ff-ds.ff-ds-warn :is(.option-item, .show-item):hover { background: var(--w-sunk); color: var(--w-ink); }
body.ff-ds.ff-ds-warn :is(.option-item, .show-item) input { accent-color: var(--brand-600); }
body.ff-ds.ff-ds-warn .only-link { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--w-link); border-radius: 9999px; }
body.ff-ds.ff-ds-warn .show-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--w-muted); }
body.ff-ds.ff-ds-warn .show-divider { background: var(--w-line); }

/* The flood source note. */
body.ff-ds.ff-ds-warn .info-ico-svg { color: var(--ds-muted); }
body.ff-ds.ff-ds-warn .info-ico-svg:hover { color: var(--brand-600); }
body.ff-ds.ff-ds-warn .info-popup { font-size: 12.5px; line-height: 1.55; padding: 12px 14px; border-radius: 14px; }
body.ff-ds.ff-ds-warn .info-popup::after { border-top-color: var(--w-surface); }
body.ff-ds.ff-ds-warn .info-popup::before { border-top-color: var(--w-line); }

/* ── On the map: search, its pills, legends, the empty-state banner ──── */
body.ff-ds.ff-ds-warn .map-search input {
  background: var(--w-surface); color: var(--w-ink); border: 0; border-radius: 9999px;
  padding: 14px 44px 14px 20px; font-size: 15px; font-weight: 500;
  box-shadow: var(--w-shadow-float);
}
body.ff-ds.ff-ds-warn .map-search input::placeholder { color: var(--w-muted); font-weight: 500; }
body.ff-ds.ff-ds-warn .map-search input:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; box-shadow: var(--w-shadow-float); }
body.ff-ds.ff-ds-warn .map-search-clear { color: var(--w-muted); }
body.ff-ds.ff-ds-warn .map-search-clear:hover { color: var(--w-ink); }
body.ff-ds.ff-ds-warn .search-pill {
  background: var(--w-surface); border: 0; border-radius: 9999px; padding: 6px 12px 6px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -6px rgba(15, 23, 42, .3);
  font-size: 13.5px; font-weight: 500; color: var(--w-ink);
}
body.ff-ds.ff-ds-warn .search-pill:hover { background: var(--w-surface); }
body.ff-ds.ff-ds-warn .search-pill-close { color: var(--w-muted); font-weight: 400; }
body.ff-ds.ff-ds-warn .search-pill-close:hover { color: var(--w-ink); }

/* Legends floating on the map: glass, as everything over the map is. */
body.ff-ds.ff-ds-warn .risk-legend,
body.ff-ds.ff-ds-warn .props-legend {
  background: var(--ds-glass); -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur);
  border: 0; border-radius: 18px; box-shadow: var(--ds-glass-shadow); color: var(--ds-body);
}
body.ff-ds.ff-ds-warn .risk-legend-title,
body.ff-ds.ff-ds-warn .props-legend-title { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ds-ink); }
body.ff-ds.ff-ds-warn .risk-legend-labels,
body.ff-ds.ff-ds-warn .risk-legend-size .label,
body.ff-ds.ff-ds-warn .props-legend-ticks { font-size: 11px; font-weight: 500; color: var(--ds-muted); }
body.ff-ds.ff-ds-warn .no-warnings-banner {
  background: var(--ds-glass); -webkit-backdrop-filter: var(--ds-glass-blur); backdrop-filter: var(--ds-glass-blur);
  border: 0; border-radius: 9999px; box-shadow: var(--ds-glass-shadow);
  color: var(--ds-ink); font-size: 13px; font-weight: 600;
}

/* Tooltips and popups: white cards, a dot for the level where the old
   tooltip had a coloured stripe (inline border-left on .ff-tip-body). */
body.ff-ds.ff-ds-warn .leaflet-tooltip.ff-tip,
body.ff-ds.ff-ds-warn .leaflet-tooltip.sharp-radar {
  background: var(--w-surface); color: var(--w-ink); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 14px 32px -10px rgba(15, 23, 42, .35);
}
body.ff-ds.ff-ds-warn .ff-tip-body { border-left-width: 0 !important; padding: 11px 14px; }
body.ff-ds.ff-ds-warn .ff-tip-head { border-left-color: inherit; align-items: flex-start; gap: 8px; }
body.ff-ds.ff-ds-warn .ff-tip-head::before {
  content: ''; flex: 0 0 auto; width: 0; height: 9px; margin-top: 5px;
  border-left: 9px solid; border-left-color: inherit; border-radius: 50%;
}
body.ff-ds.ff-ds-warn .ff-tip-title { font-size: 14px; font-weight: 600; color: var(--w-ink); }
body.ff-ds.ff-ds-warn :is(.ff-tip-sub, .ff-tip-prop) { font-size: 12px; color: var(--w-muted); }
body.ff-ds.ff-ds-warn .tt-desc { color: var(--w-body); font-size: 12px; }
body.ff-ds.ff-ds-warn .leaflet-popup-content-wrapper,
body.ff-ds.ff-ds-warn .leaflet-popup-tip { background: var(--w-surface); color: var(--w-body); }
body.ff-ds.ff-ds-warn .leaflet-popup-content-wrapper {
  border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 22px 48px -18px rgba(15, 23, 42, .45);
}
body.ff-ds.ff-ds-warn .leaflet-popup-content { font-size: 13.5px; }
body.ff-ds.ff-ds-warn .pop-tabs { border-bottom: 1px solid var(--w-line); }
body.ff-ds.ff-ds-warn .pop-tab { font-size: 13px; font-weight: 500; color: var(--w-muted); }
body.ff-ds.ff-ds-warn .pop-tab.active { color: var(--brand-700); font-weight: 600; border-bottom-color: var(--brand-500); }
[data-theme="dark"] body.ff-ds.ff-ds-warn .pop-tab.active { color: var(--brand-300); border-bottom-color: var(--brand-300); }
body.ff-ds.ff-ds-warn .pop-table td { border-bottom-color: var(--w-line); }
body.ff-ds.ff-ds-warn .pop-table-label { color: var(--w-muted); }
body.ff-ds.ff-ds-warn .pop-table-value { color: var(--w-ink); }
body.ff-ds.ff-ds-warn :is(.hist-block) { color: var(--w-body); }
body.ff-ds.ff-ds-warn .hist-title { font-size: 14px; font-weight: 600; color: var(--w-ink); }
body.ff-ds.ff-ds-warn .hist-sub { color: var(--w-ink); font-weight: 600; }
body.ff-ds.ff-ds-warn :is(.hist-muted, .hist-date) { color: var(--w-muted); }
body.ff-ds.ff-ds-warn .hist-row { border-bottom-color: var(--w-line); }

/* ── /warnings: the day bar is the navy strip every page has under the nav
   (#3a4a63, a couple of shades lighter than the nav; user request
   2026-10-11), light text, the chosen day lifted with a teal underline. */
body.ff-ds.ff-ds-warn .day-header-bar {
  background: var(--w-strip); box-shadow: none; border-bottom: 1px solid rgba(15, 23, 42, .25);
}
body.ff-ds.ff-ds-warn .day-header-cell {
  color: #cbd5e1; border-right: 1px solid rgba(255, 255, 255, .12); border-bottom: 3px solid transparent;
}
body.ff-ds.ff-ds-warn .day-header-cell:hover { background: rgba(255, 255, 255, .06); color: #fff; }
body.ff-ds.ff-ds-warn .day-header-cell.active {
  background: rgba(255, 255, 255, .10); color: #fff; border-bottom-color: var(--brand-300); font-weight: 600;
}
body.ff-ds.ff-ds-warn .day-label { font-size: 13px; font-weight: 600; letter-spacing: 0; }
body.ff-ds.ff-ds-warn .day-date { font-size: 13px; font-weight: 500; color: #cbd5e1; opacity: 1; }
body.ff-ds.ff-ds-warn .day-header-cell.active .day-date { color: #e2e8f0; }
@media (min-width: 768px) and (max-width: 1000px) {
  body.ff-ds.ff-ds-warn .day-label, body.ff-ds.ff-ds-warn .day-date { font-size: 12px; }
}
@media (max-width: 767px) {
  body.ff-ds.ff-ds-warn .day-label { font-size: 12px; }
}

/* ── Details drawer (/warnings, archive): a white sheet, rounded on top. */
body.ff-ds.ff-ds-warn .details-drawer {
  background: var(--w-surface); border-top: 0; border-radius: 20px 20px 0 0;
  box-shadow: 0 -1px 0 var(--w-line), 0 -18px 40px -16px rgba(15, 23, 42, .35);
}
body.ff-ds.ff-ds-warn .drawer-header {
  background: transparent; border-bottom: 1px solid var(--w-line); border-radius: 20px 20px 0 0; padding: 10px 18px 10px 20px;
}
body.ff-ds.ff-ds-warn .drawer-title { color: var(--w-ink); }
body.ff-ds.ff-ds-warn #drawerTitleText { font-size: 16px; font-weight: 600; color: var(--w-ink); }
body.ff-ds.ff-ds-warn .drawer-title .sev-badge { border-color: rgba(15, 23, 42, .15); }
body.ff-ds.ff-ds-warn .drawer-close {
  width: 32px; height: 32px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--w-muted); font-size: 22px;
}
body.ff-ds.ff-ds-warn .drawer-close:hover { background: var(--w-seg); color: var(--w-ink); }
body.ff-ds.ff-ds-warn .drawer-desc-col h4 { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--w-ink); }
body.ff-ds.ff-ds-warn .drawer-desc-col p { font-size: 13.5px; line-height: 1.6; color: var(--w-body); }
body.ff-ds.ff-ds-warn #drawerHeadline { color: var(--w-ink) !important; font-size: 14.5px !important; }
/* Safety advice: a sunk panel, not a card with a coloured stripe. */
body.ff-ds.ff-ds-warn #drawerInstruction {
  background: var(--w-sunk) !important; border-left-width: 0 !important; border-radius: 12px !important;
}
body.ff-ds.ff-ds-warn .meta-block { background: var(--w-sunk); border: 0; border-radius: 12px; padding: 9px 12px; }
body.ff-ds.ff-ds-warn .meta-item-lbl { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--w-muted); }
body.ff-ds.ff-ds-warn .meta-item-val { font-size: 13px; font-weight: 600; color: var(--w-ink); }
@media (max-width: 767px) {
  body.ff-ds.ff-ds-warn .details-drawer { border-radius: 20px 20px 0 0; }
  body.ff-ds.ff-ds-warn .details-drawer::before { background: rgba(15, 23, 42, .18); }
  body.ff-ds.ff-ds-warn .drawer-header { padding: 18px 14px 10px; }
  body.ff-ds.ff-ds-warn .drawer-close { min-width: 36px; min-height: 36px; margin: -4px -4px 0 0; }
}

/* ── Dialogs: the explorer's first-visit note and the About boxes ─────── */
body.ff-ds.ff-ds-warn .intro-overlay,
body.ff-ds.ff-ds-warn .info-modal-backdrop { background: rgba(15, 23, 42, .4); }
body.ff-ds.ff-ds-warn .intro-card,
body.ff-ds.ff-ds-warn .info-modal {
  background: var(--w-surface); color: var(--w-body); border: 1px solid var(--w-line); border-radius: 20px;
  box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .45);
}
body.ff-ds.ff-ds-warn .intro-card h2,
body.ff-ds.ff-ds-warn .info-modal h3 { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--w-ink); }
body.ff-ds.ff-ds-warn .intro-card p { font-size: 14px; line-height: 1.6; color: var(--w-body); }
body.ff-ds.ff-ds-warn .intro-close {
  width: 32px; height: 32px; background: transparent; color: var(--w-muted); font-size: 22px;
}
body.ff-ds.ff-ds-warn .intro-close:hover { background: var(--w-seg); color: var(--w-ink); }

/* /warnings: Rivers and Colour by carry an inline `flex: 0; min-width: 0`,
   which let them collapse to nothing while the four selects kept their room,
   so at 1366 their pills ran out past the bar's right edge. Sized to their
   content above the phone layout (whose own rule turns them into half-width
   cells), with the selects giving way instead. */
@media (min-width: 768px) {
  body.ff-ds.ff-ds-warn .player-panel .control-group[style*="flex: 0"] { flex: 0 0 auto !important; }
}
/* Below about 1150px the map column cannot hold /warnings' six controls in
   one row (the selects were squeezed to their chevrons), so the bar takes
   two rows of three, as /floodwarnings' does at tablet widths. */
@media (min-width: 768px) and (max-width: 1150px) {
  body.ff-ds.ff-ds-warn .warnings-outer .player-panel:has(#propsModeBtn) { flex-wrap: wrap; row-gap: 8px; align-items: flex-end; }
  body.ff-ds.ff-ds-warn .warnings-outer .player-panel:has(#propsModeBtn) .control-group,
  body.ff-ds.ff-ds-warn .warnings-outer .player-panel:has(#propsModeBtn) .control-group[style*="flex: 0"] { flex: 1 1 30% !important; min-width: 130px !important; }
}

/* ── Tablet ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 900px) {
  body.ff-ds.ff-ds-warn .player-panel { padding: 10px 14px; }
}

/* ── Phone: the control bar flows under the map, so it stops being glass
   (glass only over the map): a flat white band with hairlines. The sidebar
   stacks under it with a hairline instead of the old 2px rule. */
@media (max-width: 767px) {
  body.ff-ds.ff-ds-warn .player-panel {
    background: var(--w-surface); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-radius: 0; box-shadow: none;
    border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line);
  }
  body.ff-ds.ff-ds-warn .side,
  body.ff-ds.ff-ds-warn .right-wrap { border-left: 0; border-top: 1px solid var(--w-line); }
  body.ff-ds.ff-ds-warn .right-header-title,
  body.ff-ds.ff-ds-warn .side-head-title { font-size: 14px; }
  body.ff-ds.ff-ds-warn .map-search input { padding: 12px 40px 12px 16px; font-size: 14px; }
}

/* /floodwarnings' selects were cut short at 1366 ("Alert and abov…",
   "Great Brit…"): Alerts and Warnings and Location keep the width their
   longest option needs above the phone layout. */
@media (min-width: 768px) {
  body.ff-ds.ff-ds-warn .player-panel .control-group:has(#sevSel) { min-width: 156px; }
  body.ff-ds.ff-ds-warn .player-panel .control-group:has(#sourceSel) { min-width: 138px; }
  body.ff-ds.ff-ds-warn .player-panel .control-group:has(#categorySel) { min-width: 128px; }
}
/* One row of /floodwarnings' six controls needs about 850px, which the map
   column only has from about 1250px; below that (down to the page's own
   two-row tablet rule at 900px) Display, Show and Areas ran into each other.
   Two rows of three instead, as /warnings does. */
@media (min-width: 901px) and (max-width: 1250px) {
  body.ff-ds.ff-ds-warn .player-panel:has(#sevSel) { flex-wrap: wrap; row-gap: 8px; align-items: flex-end; width: 95%; max-width: 720px; }
  body.ff-ds.ff-ds-warn .player-panel:has(#sevSel) .control-group { flex: 1 1 30%; min-width: 130px; }
}
/* /warningexplorer's Show control (a Property counts switch plus a chevron
   for its Rivers menu) was squeezed until the label ran under the chevron:
   it keeps its content width. Below about 1250px the map column cannot hold
   the six controls in one row either, so it takes two rows of three, as
   /floodwarnings does. */
@media (min-width: 768px) {
  body.ff-ds.ff-ds-warn .player-panel .control-group:has(#showDropdown) { flex: 0 0 auto; }
  body.ff-ds.ff-ds-warn .player-panel .control-group:has(#showDropdown) .show-btn { width: auto; }
}
@media (min-width: 768px) and (max-width: 1250px) {
  body.ff-ds.ff-ds-warn .player-panel:has(#showDropdown) { flex-wrap: wrap; row-gap: 8px; align-items: flex-end; width: 95%; max-width: 720px; }
  body.ff-ds.ff-ds-warn .player-panel:has(#showDropdown) .control-group { flex: 1 1 30%; min-width: 130px; }
  body.ff-ds.ff-ds-warn .player-panel:has(#showDropdown) .control-group:has(#showDropdown) { flex: 1 1 30%; }
}
/* In /warnings' two-row layout "Properties at risk" was clipped at its last
   letters (820px): its group holds the switch and the whole label, and the
   Rivers switch beside it takes only its own width so the row still fits. */
@media (min-width: 768px) and (max-width: 1150px) {
  body.ff-ds.ff-ds-warn .warnings-outer .player-panel:has(#propsModeBtn) .control-group:has(#propsModeBtn) { min-width: 172px !important; }
  body.ff-ds.ff-ds-warn .warnings-outer .player-panel:has(#propsModeBtn) .control-group:has(.rivers-check-label) { flex: 0 0 auto !important; min-width: 0 !important; }
}