/* ==========================================================================
   Catch Signal: base stylesheet (public/css/base.css)

   Shared by every page. The static pages (privacy, terms, data-deletion,
   sources, 404) load only this file; the app shell (index.html) loads it and
   then css/app.css, which holds the forecast components.

   Contents
     1. Design tokens (light theme, then dark overrides)
     2. Reset and document defaults
     3. Typography
     4. Page frame and layout helpers
     5. Site header (logo + nav slot + actions slot)
     6. Site footer (links + data attribution)
     7. Buttons
     8. Form controls
     9. Prose (legal and long-form pages)
    10. Notices, utilities, focus, print, forced colours, reduced motion

   Page head (every page, in this order):
     <meta name="color-scheme" content="light dark">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap">
     <link rel="stylesheet" href="/css/base.css">
   Every font token has system fallbacks, so pages still read well when
   Google Fonts is blocked or slow.

   Page skeleton:
     <body class="page">
       <a class="skip-link" href="#main">Skip to content</a>
       <header class="site-header"><div class="frame site-header-inner">
         <a class="brand" href="/"><img class="brand-mark" src="/img/logo.svg" alt="" width="32" height="32">
           <span class="brand-name">Catch Signal</span></a>
         <nav class="site-nav" aria-label="Main">...links; mark the current one aria-current="page"...</nav>
         <div class="site-actions">...optional: sign-in / profile button...</div>
       </div></header>
       <main id="main" class="frame site-main">...</main>
       <footer class="site-footer"><div class="frame">...</div></footer>
     </body>

   Themes: follow the operating system (prefers-color-scheme). A script may
   force one with <html data-theme="light"> or <html data-theme="dark">.
   Static pages need no JavaScript.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   Carried over from the Bite Window prototype: sea mist, harbour navy,
   channel teal and port-marker orange. Colour pairs used for text were
   checked for WCAG AA contrast (4.5:1) in both themes; --field-line meets the
   3:1 boundary contrast for form controls.
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces, from the page background up to raised cards and down to wells */
  --bg: #edf2f1;                 /* sea mist: page background */
  --surface: #ffffff;            /* cards, dialogs, panels */
  --sunken: #e2eae9;             /* wells, active nav item, skeletons */
  --field: #f8fbfa;              /* form control fill */
  --bar: rgb(237 242 241 / .92); /* translucent sticky header */

  /* Text and lines */
  --ink: #0f2a3a;                /* harbour navy: body text and headings */
  --muted: #526974;              /* secondary text; AA on bg, surface and sunken */
  --line: #d0dcdb;               /* hairlines and card borders (decorative) */
  --field-line: #778c93;         /* form control and button borders (3:1 on bg, field and surface) */

  /* Brand */
  --accent: #0e727e;             /* channel teal: links, primary buttons, focus ring; a shade darker than
                                    Bite Window's #0e7480 so links stay AA on --sunken and --warn-bg */
  --accent-ink: #ffffff;         /* text on an --accent fill */
  --marker: #d9541a;             /* port-marker orange: best windows, highlights (fills, borders) */
  --marker-text: #b8410f;        /* the marker orange when used as small text */

  /* Status colours (verdicts and notices); each colour is AA on its own -bg */
  --good: #23784a;     --good-bg: #dcefe3;     /* Go, success */
  --caution: #8a5a00;  --caution-bg: #fbefd2;  /* Marginal */
  --warn: #b0301c;     --warn-bg: #fae4de;     /* No-go, errors, safety notes */

  /* Data colours for the forecast charts (defined here so both themes live in one place) */
  --tide: #1d4f91;               /* tide curve */
  --moon-lit: #f2e2a2;
  --moon-dark: #34505e;
  --band: rgb(52 80 94 / .09);   /* dawn/dusk shading, consensus bands */
  --heat-0: #dbe4e3; --heat-1: #b5d4d2; --heat-2: #79b9b8; --heat-3: #2b8f95; --heat-4: #0a5c68;
  --heat-ink-0: #0f2a3a; --heat-ink-1: #0f2a3a; --heat-ink-2: #0f2a3a; --heat-ink-3: #ffffff; --heat-ink-4: #ffffff;

  --shadow: 0 1px 2px rgb(15 42 58 / .06), 0 8px 24px -12px rgb(15 42 58 / .18);

  /* Type families, each with fallbacks that keep similar proportions */
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, Consolas, 'Courier New', monospace;

  /* Type scale: fixed small steps, fluid headings (375 px phone to desktop) */
  --fs-xs: .8125rem;                                /* 13px: captions, attribution */
  --fs-sm: .875rem;                                 /* 14px: secondary text, buttons */
  --fs-base: 1rem;                                  /* 16px: body; also keeps iOS from zooming inputs */
  --fs-md: 1.125rem;                                /* 18px: lead paragraphs */
  --fs-lg: 1.25rem;                                 /* 20px: h3 */
  --fs-xl: clamp(1.375rem, 1.2rem + .75vw, 1.75rem); /* 22-28px: h2 */
  --fs-2xl: clamp(2rem, 1.6rem + 2vw, 2.875rem);    /* 32-46px: h1 */
  --lh-tight: 1.1;
  --lh-body: 1.55;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* Shape and layout */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --frame: 64rem;                /* widest content column (1024px) */
  --measure: 44rem;              /* reading width for prose, about 75 characters */
  --gutter: 16px;                /* side padding at every width */
  --header-h: 58px;              /* single-row header height */

  color-scheme: light;
}

/* Dark theme. The same values appear twice: once for "follow the system"
   and once for an explicit data-theme="dark". Keep the two blocks in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1820; --surface: #10232c; --sunken: #0c1d25; --field: #0c1d25; --bar: rgb(10 24 32 / .92);
    --ink: #e1ecee; --muted: #8ba3ac; --line: #1f3a46; --field-line: #4f717e;
    --accent: #48b8c0; --accent-ink: #052027; --marker: #ff8a3d; --marker-text: #ff8a3d;
    --good: #6cc98a; --good-bg: #12301f; --caution: #f0b85a; --caution-bg: #33260f; --warn: #ff8b78; --warn-bg: #3b1a15;
    --tide: #8fb6ff; --moon-lit: #f0e0a0; --moon-dark: #2a4250; --band: rgb(160 200 215 / .08);
    --heat-0: #15303a; --heat-1: #1c4b55; --heat-2: #236f79; --heat-3: #3399a0; --heat-4: #72d1cf;
    --heat-ink-0: #e1ecee; --heat-ink-1: #e1ecee; --heat-ink-2: #e1ecee; --heat-ink-3: #052027; --heat-ink-4: #052027;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1820; --surface: #10232c; --sunken: #0c1d25; --field: #0c1d25; --bar: rgb(10 24 32 / .92);
  --ink: #e1ecee; --muted: #8ba3ac; --line: #1f3a46; --field-line: #4f717e;
  --accent: #48b8c0; --accent-ink: #052027; --marker: #ff8a3d; --marker-text: #ff8a3d;
  --good: #6cc98a; --good-bg: #12301f; --caution: #f0b85a; --caution-bg: #33260f; --warn: #ff8b78; --warn-bg: #3b1a15;
  --tide: #8fb6ff; --moon-lit: #f0e0a0; --moon-dark: #2a4250; --band: rgb(160 200 215 / .08);
  --heat-0: #15303a; --heat-1: #1c4b55; --heat-2: #236f79; --heat-3: #3399a0; --heat-4: #72d1cf;
  --heat-ink-0: #e1ecee; --heat-ink-1: #e1ecee; --heat-ink-2: #e1ecee; --heat-ink-3: #052027; --heat-ink-4: #052027;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
  color-scheme: dark;
}


/* --------------------------------------------------------------------------
   2. Reset and document defaults
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* In-page anchors land below the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--space-3));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/var(--lh-body) var(--font-body);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

img, video { max-width: 100%; height: auto; }
img { border-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }


/* --------------------------------------------------------------------------
   3. Typography
   Headings use the condensed display face in capitals, like a printed tide
   table. Body text is Barlow; numbers and codes use IBM Plex Mono.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: var(--fs-xl); text-transform: uppercase; }
h3 { font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .04em; }
h4 { font-size: var(--fs-md); letter-spacing: .03em; }

p { margin: 0; }
b, strong { font-weight: 600; }  /* Barlow is loaded up to 600; avoid synthetic bold */
small { font-size: var(--fs-sm); }

a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

code, kbd, samp, pre { font-family: var(--font-data); font-size: .9em; }
code {
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--sunken);
  overflow-wrap: anywhere;
}
pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--sunken);
  overflow-x: auto;
  line-height: 1.45;
}
pre code { padding: 0; background: none; overflow-wrap: normal; }

.lead { font-size: var(--fs-md); color: var(--muted); }
.eyebrow {
  font: 600 .75rem/1.2 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.mono { font-family: var(--font-data); }
.muted { color: var(--muted); }


/* --------------------------------------------------------------------------
   4. Page frame and layout helpers
   Mobile first: one column with 16px gutters, capped at --frame.
   -------------------------------------------------------------------------- */
.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Static pages: header, main and footer, with the footer kept at the bottom
   of short pages. (The app shell can skip .page and lay itself out.) */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page > main { flex: 1 0 auto; }
/* Minimal server-rendered pages (e.g. the Worker's /data-deletion/status) may
   put .page on <main> without a header or frame: give them gutters anyway. */
main.page {
  display: block;
  width: 100%;
  min-height: 0;
  margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-7);
}

.site-main { padding-block: var(--space-5) var(--space-7); }
.site-main > * { min-width: 0; }

/* Title block at the top of a page */
.page-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: var(--measure); }

/* Vertical rhythm for any group of blocks; override the gap per use */
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
/* A wrapping row of inline items (buttons, chips, links) */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }


/* --------------------------------------------------------------------------
   5. Site header
   Brand on the left, the nav slot next to it, an optional actions slot on the
   right. On phones the nav drops to its own row and scrolls sideways if it
   ever has more links than fit (the page itself never scrolls sideways).
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-5);
  min-height: var(--header-h);
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  color: var(--ink);
  text-decoration: none;
  font: 700 1.4375rem/1 var(--font-display);  /* 23px */
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark { display: block; flex: none; width: 32px; height: 32px; border-radius: 8px; }

.site-nav { display: flex; gap: 2px; min-width: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"], .site-nav a.on { color: var(--ink); background: var(--sunken); }

.site-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

@media (max-width: 39.99rem) {
  /* Phones: brand + actions on row one, nav on row two */
  .site-header-inner { padding-block: var(--space-1) 0; }
  .brand { order: 1; }
  .site-actions { order: 2; }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding-inline: 8px; }
}


/* --------------------------------------------------------------------------
   6. Site footer
   The attribution paragraph is required by the data licences; keep it on
   every page (see sources.html for the full list).
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.site-footer > .frame {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-7);
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-weight: 600; }
.footer-links a { display: inline-block; padding-block: var(--space-1); color: var(--ink); }
.footer-safety { color: var(--ink); max-width: 75ch; }
.attribution { max-width: 75ch; font-size: var(--fs-xs); line-height: 1.6; }
.attribution a { color: inherit; }
.footer-meta { font-size: var(--fs-xs); }


/* --------------------------------------------------------------------------
   7. Buttons
   .btn is the base; combine with .primary, .ghost, .danger, .small or .block.
   Works on <button> and <a>.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 600 var(--fs-sm)/1.1 var(--font-body);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--sunken); }
.btn.danger { color: var(--warn); }
.btn.danger:hover { border-color: var(--warn); }
.btn.small { min-height: 32px; padding: 6px 10px; font-size: var(--fs-xs); }
.btn.block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; filter: none; pointer-events: none; }


/* --------------------------------------------------------------------------
   8. Form controls
   Wrapped in :where() so these defaults have zero specificity and any
   component rule in app.css overrides them.
   -------------------------------------------------------------------------- */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--field-line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: 400 var(--fs-base)/1.3 var(--font-body);  /* 16px stops iOS zooming on focus */
}
:where(textarea) { min-height: 6rem; resize: vertical; }
:where(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* In Chrome a date/time field's day/month/hour parts take the focus, so the field itself matches neither :focus nor
   :focus-visible (no ring at all): ring it whenever focus is inside it */
input:is([type="date"], [type="time"], [type="datetime-local"]):focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
:where(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
:where(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:where(input, select, textarea):user-invalid { border-color: var(--warn); }
:where(input[type="checkbox"], input[type="radio"]) { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

:where(label) { font-weight: 600; font-size: var(--fs-sm); }
:where(fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(legend) { padding: 0; font-weight: 600; font-size: var(--fs-sm); }

/* A label, its control and an optional hint, stacked */
.field { display: grid; gap: 6px; min-width: 0; }
/* A checkbox or radio with its label on one line */
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; cursor: pointer; }
.hint { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
/* A control and its button side by side, wrapping on narrow screens */
.input-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.input-row > :where(input, select) { flex: 1 1 12rem; width: auto; }


/* --------------------------------------------------------------------------
   9. Prose
   For legal and long-form pages: comfortable measure, spaced blocks,
   readable lists and tables. Put .prose on the article element.
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }

/* Browser margins off, with zero specificity so the spacing rules below always win */
:where(.prose) :where(ul, ol, dl, dd, blockquote, figure) { margin: 0; }
:where(.prose) :where(ul, ol) { padding-left: 1.4em; }

/* Flow spacing: every block after the first gets a gap (beats the global p { margin: 0 }) */
.prose > * + *,
.prose section > * + * { margin-top: var(--space-4); }
.prose > section:not(.callout) { margin-top: var(--space-7); }
/* Headings come after the flow rules so their larger gaps win */
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); font-size: var(--fs-md); }
.prose h4 { margin-top: var(--space-5); }
.prose :is(h2, h3, h4) + * { margin-top: var(--space-3); }
.prose section > :first-child { margin-top: 0; }

.prose li + li { margin-top: var(--space-2); }
.prose li > :is(ul, ol, p) { margin-top: var(--space-2); }
.prose li::marker { color: var(--muted); }

.prose dt { font-weight: 600; }
.prose dd { margin-top: 2px; }
.prose dd + dt { margin-top: var(--space-3); }  /* space between term groups, not within them */

.prose a { overflow-wrap: anywhere; }  /* long URLs wrap instead of widening the page */

.prose blockquote {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
}
.prose blockquote > * + * { margin-top: var(--space-2); }
.prose figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--muted); }

/* Wide tables scroll inside their wrapper, never the page */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prose table { width: 100%; font-size: var(--fs-sm); }
.prose th, .prose td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose tr:last-child > * { border-bottom: 0; }
.prose th { font-weight: 600; background: var(--sunken); }

/* "On this page" list for long pages */
.toc {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.toc h2 { margin: 0 0 var(--space-2); font-size: var(--fs-sm); letter-spacing: .1em; font-family: var(--font-body); font-weight: 600; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2 14rem; column-gap: var(--space-6); }
.toc li { break-inside: avoid; }
.toc li + li { margin-top: var(--space-1); }


/* --------------------------------------------------------------------------
   10. Notices, utilities, focus, print, forced colours, reduced motion
   -------------------------------------------------------------------------- */

/* A boxed note. Default is neutral; .info is teal, .warn is for safety. */
.callout {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
}
.callout > * + * { margin-top: var(--space-3); }
.callout h2, .callout h3 { font-size: var(--fs-md); margin-top: 0; }
.callout.info { border-left-color: var(--accent); }
.callout.warn { border-color: var(--line); border-left-color: var(--warn); background: var(--warn-bg); }
@supports (color: color-mix(in srgb, red 50%, red)) { .callout.warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); border-left-color: var(--warn); } }
.callout.caution { border-left-color: var(--caution); background: var(--caution-bg); }
.callout ul { margin: 0; padding-left: 1.2em; }
.callout li + li { margin-top: var(--space-1); }

/* Visually hidden but read by screen readers (.sr kept for the prototype's markup) */
.sr, .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One focus style everywhere; keyboard only */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Windows high-contrast and other forced-colour modes */
@media (forced-colors: active) {
  .btn, .callout, .toc { border: 1px solid CanvasText; }
  .site-nav a[aria-current="page"] { outline: 1px solid CanvasText; }
}

/* Respect "reduce motion": no transitions, animations or smooth scrolling */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Printing a policy page: plain black on white, no chrome, show link targets */
@media print {
  /* Always print the light palette with black text. The selector list has the same specificity
     as the dark-theme selectors in section 1 and comes later, so a dark screen theme never prints
     pale text on paper (browsers drop page backgrounds when printing). */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --sunken: #f2f2f2; --field: #fff; --bar: #fff;
    --ink: #000; --muted: #333; --line: #bbb; --field-line: #777;
    --accent: #000; --accent-ink: #fff; --marker: #d9541a; --marker-text: #b8410f;
    --good: #23784a; --good-bg: #dcefe3; --caution: #8a5a00; --caution-bg: #fbefd2; --warn: #b0301c; --warn-bg: #fae4de;
    --tide: #1d4f91; --moon-lit: #f2e2a2; --moon-dark: #34505e; --band: rgb(52 80 94 / .09);
    --heat-0: #dbe4e3; --heat-1: #b5d4d2; --heat-2: #79b9b8; --heat-3: #2b8f95; --heat-4: #0a5c68;
    --heat-ink-0: #0f2a3a; --heat-ink-1: #0f2a3a; --heat-ink-2: #0f2a3a; --heat-ink-3: #ffffff; --heat-ink-4: #ffffff;
    --shadow: none;
    color-scheme: light;
  }
  .site-header { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav, .site-actions, .skip-link, .toc { display: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .prose h2, .prose h3 { break-after: avoid; }
}