/* ff_page_ds.css: the Flood Forecast design system for ordinary (scrolling)
   pages: the page sea behind white cards, Outfit throughout, pill controls.

   First pages: the Warnings menu's document pages (2026-10-10):
   /floodguidance and /fgscomparison, /flood-outlook, /rapidflood, /storms
   and /tidal. A page opts in with
   `{% block body_class %} ff-ds-page{% endblock %}` and links this file in
   head_extra (after its own <style> there, if it has one). Anything only one
   page has goes in that page's own <style>, scoped `body.ff-ds-page` and
   written with the variables below, so dark mode follows by itself.

   Everything is scoped `body.ff-ds-page`, so shared markup (the impact terms
   banner, the FGS view toggle, the freshness chip) changes only on pages that
   have opted in. The values are the "Flood Forecast" design system artifact's
   tokens; the homepage (templates/home.html) is the reference. */

body.ff-ds-page {
  --p-page: #e0edf3;
  --p-surface: #ffffff;
  --p-sunk: #f1f5f9;
  --p-ink: #0f172a;
  --p-body: #334155;
  --p-muted: #64748b;
  --p-line: #e2e8f0;
  --p-seg: rgba(15, 23, 42, .06);
  --p-seg-hover: rgba(15, 23, 42, .10);
  --p-seg-on: #ffffff;
  --p-seg-on-ink: var(--brand-800);
  --p-link: var(--brand-600);
  --p-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px -4px rgba(15, 23, 42, .08);
  --p-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 28px -8px rgba(15, 23, 42, .16);
  --p-shadow-menu: 0 18px 40px -12px rgba(15, 23, 42, .28), 0 4px 12px -4px rgba(15, 23, 42, .08);
  --p-shadow-seg-on: 0 1px 2px rgba(15, 23, 42, .14);
  --p-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");
  --p-font: 'Outfit', sans-serif;
  background: var(--p-page);
  color: var(--p-body);
  font-family: var(--p-font);
}
/* Dark only for pages whose own content has a dark pass. A light-only page
   adds ff-ds-light and keeps its light panels in dark mode, rather than dark
   cards under its hard-coded dark text (the map pages' ff-ds vs ff-ds-dark). */
[data-theme="dark"] body.ff-ds-page:not(.ff-ds-light) {
  --p-page: #020617;
  --p-surface: #0f172a;
  --p-sunk: #1e293b;
  --p-ink: #f1f5f9;
  --p-body: #cbd5e1;
  --p-muted: #94a3b8;
  --p-line: #1e293b;
  --p-seg: rgba(148, 163, 184, .14);
  --p-seg-hover: rgba(148, 163, 184, .22);
  --p-seg-on: #334155;
  --p-seg-on-ink: #ffffff;
  --p-link: var(--brand-300);
  --p-shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --p-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -8px rgba(0, 0, 0, .6);
  --p-shadow-menu: 0 18px 40px -12px rgba(0, 0, 0, .7);
  --p-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");
}

/* The body carries Tailwind's bg-gray-50 and dark:bg-slate-950, and the dark
   variant (0,2,0) outranks body.ff-ds-page; this one wins in both themes, so
   a light-only page keeps its light sea in dark mode. */
html[data-theme] body.ff-ds-page { background: var(--p-page); color: var(--p-body); }

/* The content is set in Outfit (the system's one family). The material
   icon font is spared, or every icon would render as its ligature name. */
body.ff-ds-page main,
body.ff-ds-page main :not(.material-icons):not(.material-icons-outlined):not(.font-mono):not(code):not(pre) {
  font-family: var(--p-font);
}

/* The base card primitive (base.html .card) at the system's values: radius
   20, a hairline, the card shadow. */
body.ff-ds-page .card {
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 20px;
  box-shadow: var(--p-shadow-card);
}
body.ff-ds-page .card:hover { box-shadow: var(--p-shadow-card-hover); }

/* Text set straight on the page sea: muted fails AA there, so a page's
   lede and its sync line use body (the system's contrast rule). Pages mark
   them .ff-p-lede. */
body.ff-ds-page .ff-p-lede { color: var(--p-body) !important; }
body.ff-ds-page .ff-p-title { color: var(--p-ink); letter-spacing: -.01em; font-weight: 600; }

/* The system's pill select (Select), for any .ffsel or .ff-p-sel. */
body.ff-ds-page :is(select.ffsel, select.ff-p-sel) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--p-seg) var(--p-chev) no-repeat right 12px center;
  border: 0; border-radius: 9999px; box-shadow: none;
  padding: 7px 32px 7px 14px; font: 500 13px/1.3 var(--p-font); color: var(--p-ink);
}
body.ff-ds-page :is(select.ffsel, select.ff-p-sel):hover { background-color: var(--p-seg-hover); }
body.ff-ds-page :is(select.ffsel, select.ff-p-sel):focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
body.ff-ds-page :is(select.ffsel, select.ff-p-sel) option { color: #0f172a; background: #fff; }

/* An on/off option is a switch with its label beside it, never a bare
   checkbox or a pill button (user request 2026-10-11): input.ff-p-switch,
   drawn on the checkbox itself so scripts reading .checked need nothing. */
body.ff-ds-page input.ff-p-switch {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; margin: 0; cursor: pointer;
  width: 32px; height: 18px; border-radius: 9999px; border: 0; background: rgba(15, 23, 42, .18); transition: background .15s;
}
body.ff-ds-page input.ff-p-switch::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-page input.ff-p-switch:checked { background: var(--brand-600); }
body.ff-ds-page input.ff-p-switch:checked::after { transform: translateX(14px); }
body.ff-ds-page input.ff-p-switch:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(47, 134, 150, .35); }
[data-theme="dark"] body.ff-ds-page:not(.ff-ds-light) input.ff-p-switch { background: rgba(148, 163, 184, .3); }
[data-theme="dark"] body.ff-ds-page:not(.ff-ds-light) input.ff-p-switch:checked { background: var(--brand-500); }

/* A quiet pill button (Refresh, Open PDF, CSV): ff-p-btn. No display here:
   scripts show and hide some of these with Tailwind's hidden/flex, which a
   display in this (more specific) rule would override. */
body.ff-ds-page .ff-p-btn {
  align-items: center; gap: 7px; cursor: pointer; text-decoration: none;
  background: var(--p-surface); color: var(--p-ink); border: 0; border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--p-line), 0 1px 2px rgba(15, 23, 42, .05);
  padding: 7px 14px; font: 500 13px/1.3 var(--p-font);
  transition: background-color .15s, box-shadow .15s;
}
body.ff-ds-page .ff-p-btn:hover { background: var(--p-sunk); color: var(--p-ink); }
body.ff-ds-page .ff-p-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
body.ff-ds-page .ff-p-btn .material-icons { font-size: 17px; color: var(--p-muted); }

/* The info dialog (InfoDialog): a white card, radius 20, Outfit, a round
   quiet close. Pages mark the card .ff-p-dialog, its head .ff-p-dialog-head,
   its foot .ff-p-dialog-foot. */
body.ff-ds-page .ff-p-dialog {
  background: var(--p-surface) !important; color: var(--p-body); border: 1px solid var(--p-line);
  border-radius: 20px !important; box-shadow: 0 30px 70px -24px rgba(15, 23, 42, .45) !important;
}
body.ff-ds-page .ff-p-dialog-head {
  background: transparent !important; border-bottom: 1px solid var(--p-line) !important;
}
body.ff-ds-page .ff-p-dialog-head h3 { font-size: 18px; font-weight: 600; color: var(--p-ink) !important; }
body.ff-ds-page .ff-p-dialog-head h3 .material-icons { color: var(--brand-600) !important; }
body.ff-ds-page .ff-p-dialog-foot { background: transparent !important; border-top: 1px solid var(--p-line) !important; }
body.ff-ds-page .ff-p-dialog-foot button {
  background: var(--p-seg) !important; color: var(--p-ink) !important; border-radius: 9999px !important;
  font-weight: 500 !important; padding: 7px 16px !important;
}
body.ff-ds-page .ff-p-dialog-foot button:hover { background: var(--p-seg-hover) !important; }
body.ff-ds-page .ff-p-dialog a { color: var(--p-link) !important; }

/* Small labels over a card's content (base.html's .section-label is 10px,
   under the system's 11px floor). Used both as an eyebrow above a heading
   (/fgscomparison) and as a card's only title (/tidal), so it stays quiet. */
body.ff-ds-page .section-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--p-muted); }

/* Shared FGS partials, restyled only where the page has opted in (/archive,
   /calendars and /barcode use them too and are not on the system yet).
   The impact terms notice: a card, no coloured stripe, Outfit. */
body.ff-ds-page .ff-terms {
  border-radius: 20px; border: 1px solid var(--p-line); border-left: 1px solid var(--p-line);
  background: var(--p-surface); color: var(--p-body); font-family: var(--p-font); box-shadow: var(--p-shadow-card);
}
body.ff-ds-page .ff-terms-lede { color: var(--p-body); }
body.ff-ds-page .ff-terms-note,
body.ff-ds-page .ff-terms-matrix .ax { color: var(--p-muted); }
body.ff-ds-page .ff-terms-matrix .ax { font-size: 11px; }
/* (Statement / Comparison is styled in its own partial: deliberately louder
   than a segmented control, see partials/fgs_view_toggle.html.) */

/* ── Tailwind bridge (2026-10-11) ───────────────────────────────────────
   Most document pages are built from Tailwind utility strings. Rather than
   rewrite every string, the common patterns are mapped onto the system on
   opted-in pages only. Specific markup still takes the ff-p-* classes; these
   are the safety net that keeps a page from carrying an off-system blue, a
   square select or a 9px label. */

/* Headings: Outfit 600, ink, tight at large sizes (font-bold is 700). */
body.ff-ds-page main h1 { font-weight: 600; letter-spacing: -.01em; }
body.ff-ds-page main :is(h2, h3) { font-weight: 600; }

/* Light-only pages in dark mode: the site sets the dark colour scheme on
   <html>, which draws native form controls dark (the survey's radios came
   out as dark discs), and any Tailwind dark: text class on the page would
   be light text on the light page. Both are pinned to light here. */
html[data-theme="dark"] body.ff-ds-page.ff-ds-light { color-scheme: light; }
html[data-theme="dark"] body.ff-ds-page.ff-ds-light main :is(.dark\:text-white, .dark\:text-slate-100, .dark\:text-slate-200) { color: var(--p-ink); }
html[data-theme="dark"] body.ff-ds-page.ff-ds-light main :is(.dark\:text-slate-300, .dark\:text-slate-400, .dark\:text-slate-500) { color: var(--p-body); }

/* A title's lede sits on the page sea, where muted fails AA: body instead. */
body.ff-ds-page main h1 + p:is(.text-slate-500, .text-slate-400, .text-gray-500) { color: var(--p-body); }

/* Nothing under the system's 11px floor. */
body.ff-ds-page main :is(.text-\[9px\], .text-\[10px\], .text-\[10\.5px\]) { font-size: 11px; }
body.ff-ds-page main .text-\[8px\] { font-size: 11px; }

/* Off-system blue, indigo and sky go to the brand ramp (light), the brand's
   lighter steps (dark). Purple stays: it is the named storm / Rapid Flood
   Guidance colour. */
body.ff-ds-page main :is(.text-blue-400, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800,
  .text-indigo-500, .text-indigo-600, .text-indigo-700, .text-sky-600, .text-sky-700) { color: var(--brand-700); }
body.ff-ds-page main :is(.hover\:text-blue-400, .hover\:text-blue-500, .hover\:text-blue-600, .hover\:text-blue-700):hover { color: var(--brand-800); }
body.ff-ds-page main :is(.bg-blue-50, .bg-indigo-50, .bg-sky-50, .bg-indigo-50\/50, .bg-indigo-100\/50, .bg-blue-500\/10) { background-color: var(--brand-50); }
body.ff-ds-page main .hover\:bg-blue-50:hover { background-color: var(--brand-50); }
body.ff-ds-page main :is(.border-blue-100, .border-blue-200, .border-blue-300, .border-indigo-200\/50, .border-blue-500\/30) { border-color: var(--brand-200); }
body.ff-ds-page main :is(.border-blue-400, .border-blue-500, .border-blue-700) { border-color: var(--brand-500); }
body.ff-ds-page main :is(.focus\:ring-blue-500, .focus\:ring-indigo-500):focus { --tw-ring-color: var(--brand-500); }
body.ff-ds-page main :is(.accent-indigo-600, .accent-blue-600) { accent-color: var(--brand-600); }
[data-theme="dark"] body.ff-ds-page:not(.ff-ds-light) main :is(.dark\:text-blue-300, .dark\:text-blue-400, .dark\:text-indigo-300, .dark\:text-indigo-400) { color: var(--brand-300); }
[data-theme="dark"] body.ff-ds-page:not(.ff-ds-light) main :is(.dark\:bg-blue-900\/30, .dark\:bg-indigo-900\/20, .dark\:bg-indigo-900\/40, .dark\:hover\:bg-blue-900\/20:hover) { background-color: rgba(121, 214, 218, .12); }
[data-theme="dark"] body.ff-ds-page:not(.ff-ds-light) main :is(.dark\:border-blue-800, .dark\:border-indigo-800\/50) { border-color: rgba(121, 214, 218, .25); }

/* Selects are the system's pill select; text and search inputs are pills on
   the surface with a hairline. Classed selects (ffsel, ff-p-sel) above. */
body.ff-ds-page main select:not(.ffsel):not(.ff-p-sel):not([multiple]) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--p-seg) var(--p-chev) no-repeat right 12px center;
  border: 0; border-radius: 9999px; box-shadow: none;
  padding: 7px 32px 7px 14px; font: 500 13px/1.3 var(--p-font); color: var(--p-ink);
}
body.ff-ds-page main select:not(.ffsel):not(.ff-p-sel):not([multiple]):hover { background-color: var(--p-seg-hover); }
body.ff-ds-page main select option { color: #0f172a; background: #fff; }
body.ff-ds-page main :is(input[type="text"], input[type="search"], input[type="email"], input[type="date"], input[type="number"]):not(.ff-storm-filter):not(.ffsel) {
  border: 1px solid var(--p-line); border-radius: 9999px; background-color: var(--p-surface); color: var(--p-ink);
  font-family: var(--p-font);
}
body.ff-ds-page main :is(select, input, textarea):focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* White panels built from utilities (bg-white + border + rounded + shadow)
   take the Card's radius and shadow. */
body.ff-ds-page main :is(.rounded-xl, .rounded-2xl).border:is(.shadow-sm, .shadow, .shadow-md, .shadow-lg) {
  border-radius: 20px; border-color: var(--p-line); box-shadow: var(--p-shadow-card);
}

/* Table heads in cards: sentence case, quiet, no letter spacing. */
body.ff-ds-page .ff-p-table thead { background: transparent !important; color: var(--p-muted) !important; }
body.ff-ds-page .ff-p-table th { font-size: 12px; font-weight: 500; letter-spacing: 0; }
body.ff-ds-page .ff-p-table td { color: var(--p-body); }

/* Sweep fixes (2026-10-11): the Experimental tag at the 11px floor. */
body.ff-ds-page .exp-tag { font-size: 11px; }