/* ============================================================
   design-system.css — Fire & Fly Design Tokens, Reset, Utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ---- Design Tokens (Dark theme = default) ---- */

:root {
  /* Colour palette — dark theme */
  --bg-base: #1a1816;
  --bg-surface: #242220;
  --bg-elevated: #2e2b28;
  --bg-subtle: #383432;
  --text-primary: #f0ece8;
  --text-secondary: #b0a99f;
  --text-tertiary: #96918c;
  /* readable-on-tint text (a11y 2026-07-05) */
  --success-text: #80ac8b;
  --error-text: #d08d8d;
  --info-text: #84a6bf;
  --warning-text: var(--warning);
  --success-contrast: #1a1816;
  --error-contrast: #1a1816;
  --accent: #c8956c;
  --success: #6b9e78;
  --error: #c47070;
  --warning: #c4a84e;
  --info: #7198b5;
  --border: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --border-strong: color-mix(in srgb, var(--text-primary) 15%, transparent);
  --stock-accent: #7198b5;
  --sales-accent: #6b9e78;
  --success-bg: color-mix(in srgb, var(--success) 8%, transparent);
  --success-border: color-mix(in srgb, var(--success) 20%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);
  --warning-bg-strong: color-mix(in srgb, var(--warning) 18%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 36%, transparent);
  --warning-border-soft: color-mix(in srgb, var(--warning) 28%, transparent);
  --accent-contrast: #1a1816;
  --accent-bg: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-bg-soft: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
  --compare-a: #7aafc4;
  --compare-a-bg: rgba(122, 175, 196, 0.08);
  --compare-a-border: rgba(122, 175, 196, 0.25);
  --error-bg: color-mix(in srgb, var(--error) 8%, transparent);
  --error-bg-strong: color-mix(in srgb, var(--error) 14%, transparent);
  --error-border: color-mix(in srgb, var(--error) 25%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 14%, transparent);
  --info-border: color-mix(in srgb, var(--info) 30%, transparent);
  --success-bg-strong: color-mix(in srgb, var(--success) 14%, transparent);
  --overlay: rgba(0, 0, 0, 0.6);

  /* Invoice module alpha tokens */
  --m-iv-error-tint: color-mix(in srgb, var(--error) 10%, transparent);
  --m-iv-error-strong: color-mix(in srgb, var(--error) 18%, transparent);
  --m-iv-error-12: color-mix(in srgb, var(--error) 12%, transparent);
  --m-iv-error-14: color-mix(in srgb, var(--error) 14%, transparent);
  --m-iv-error-15: color-mix(in srgb, var(--error) 15%, transparent);
  --m-iv-error-border: color-mix(in srgb, var(--error) 35%, transparent);
  --m-iv-error-border-30: color-mix(in srgb, var(--error) 30%, transparent);
  --m-iv-error-border-40: color-mix(in srgb, var(--error) 40%, transparent);
  --m-iv-warn-tint: color-mix(in srgb, var(--warning) 10%, transparent);
  --m-iv-warn-14: color-mix(in srgb, var(--warning) 14%, transparent);
  --m-iv-warn-20: color-mix(in srgb, var(--warning) 20%, transparent);
  --m-iv-warn-border: color-mix(in srgb, var(--warning) 30%, transparent);
  --m-iv-info-tint: rgba(120, 148, 180, 0.10);
  --m-iv-info-path-bg: rgba(124, 170, 194, 0.08);
  --m-iv-info-path-border: rgba(124, 170, 194, 0.40);
  --m-iv-upload-bg: color-mix(in srgb, var(--info) 50%, transparent);
  --m-iv-selected: rgba(122, 141, 98, 0.08);
  --m-iv-scrim: rgba(20, 18, 15, 0.45);
  --m-iv-warn-card: color-mix(in srgb, var(--warning) 35%, transparent);
  --m-iv-recon-ok-bg: rgba(80, 140, 90, 0.14);
  --m-iv-recon-ok-border: rgba(80, 140, 90, 0.30);
  --m-iv-recon-off-bg: color-mix(in srgb, var(--error) 8%, transparent);
  --m-iv-recon-off-border: color-mix(in srgb, var(--error) 30%, transparent);
  --m-iv-pill-linked: color-mix(in srgb, var(--success) 10%, transparent);
  --m-iv-pill-possible: color-mix(in srgb, var(--warning) 10%, transparent);
  --m-iv-pill-unlinked: color-mix(in srgb, var(--error) 10%, transparent);
  --m-iv-pill-nonprod: rgba(255, 255, 255, 0.08);
  --m-iv-pill-stocked: color-mix(in srgb, var(--success) 10%, transparent);
  --m-iv-pill-stocked-border: color-mix(in srgb, var(--success) 45%, transparent);
  --m-iv-recon-badge-ok: color-mix(in srgb, var(--success) 22%, transparent);
  --m-iv-recon-badge-bad: color-mix(in srgb, var(--error) 22%, transparent);
  --m-iv-lock-bg: color-mix(in srgb, var(--text-tertiary) 10%, transparent);
  --m-iv-lock-icon-bg: color-mix(in srgb, var(--text-tertiary) 20%, transparent);
  --m-iv-danger-bg: color-mix(in srgb, var(--error) 6%, transparent);
  --m-iv-danger-border: color-mix(in srgb, var(--error) 30%, transparent);
  --m-iv-stock-confirm-bg: color-mix(in srgb, var(--success) 8%, transparent);
  --m-iv-stock-confirm-border: color-mix(in srgb, var(--success) 25%, transparent);
  --m-iv-qty-ok-bg: rgba(80, 140, 90, 0.08);
  --m-iv-qty-ok-border: rgba(80, 140, 90, 0.30);
  --m-iv-pdfview-bg: #0a0907;
  --m-iv-pdfview-page-shadow: 0 6px 24px rgba(0,0,0,0.5);
  --m-iv-ocr-dropzone-bg: rgba(255, 255, 255, 0.02);
  --m-iv-ocr-icon-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --m-iv-ocr-photo-warn-bg: color-mix(in srgb, var(--warning) 10%, transparent);
  --m-iv-ocr-photo-warn-border: color-mix(in srgb, var(--warning) 40%, transparent);
  --m-iv-ocr-photo-warn-icon-bg: color-mix(in srgb, var(--warning) 18%, transparent);
  --m-iv-ocr-preview-bg: linear-gradient(135deg, #2d2620 0%, #1d1916 100%);
  /* Confirmed invoice layout tokens */
  --m-iv-conf-ocr-bg: rgba(124, 170, 194, 0.10);
  --m-iv-conf-ocr-border: rgba(124, 170, 194, 0.40);
  --m-iv-conf-manual-bg: rgba(255, 255, 255, 0.03);
  --m-iv-conf-pill-success-bg: color-mix(in srgb, var(--success) 10%, transparent);
  --m-iv-conf-pill-info-bg: color-mix(in srgb, var(--info) 10%, transparent);
  --m-iv-conf-pill-muted-bg: rgba(255, 255, 255, 0.08);
  --m-iv-conf-pill-error-bg: color-mix(in srgb, var(--error) 10%, transparent);
  --m-iv-conf-pill-warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);

  /* Settings module tokens */
  --settings-cogs-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --settings-cogs-border: color-mix(in srgb, var(--accent) 35%, transparent);
  --settings-selected-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  /* Operations module alpha tokens */
  --m-ops-accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --m-ops-accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
  --m-ops-accent-18: color-mix(in srgb, var(--accent) 18%, transparent);
  --m-ops-accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
  --m-ops-accent-42: color-mix(in srgb, var(--accent) 42%, transparent);
  --m-ops-accent-45: color-mix(in srgb, var(--accent) 45%, transparent);
  --m-ops-accent-70: color-mix(in srgb, var(--accent) 70%, transparent);
  --m-ops-warn-08: color-mix(in srgb, var(--warning) 8%, transparent);
  --m-ops-warn-12: color-mix(in srgb, var(--warning) 12%, transparent);
  --m-ops-warn-32: color-mix(in srgb, var(--warning) 32%, transparent);
  --m-ops-success-12: color-mix(in srgb, var(--success) 12%, transparent);
  --m-ops-success-16: color-mix(in srgb, var(--success) 16%, transparent);
  --m-ops-success-18: rgba(141, 197, 166, 0.18);
  --m-ops-success-32: rgba(141, 197, 166, 0.32);
  --m-ops-success-40: rgba(141, 197, 166, 0.40);
  --m-ops-attn-04: rgba(180, 80, 80, 0.04);
  --m-ops-attn-06: rgba(180, 80, 80, 0.06);
  --m-ops-attn-32: rgba(180, 80, 80, 0.32);
  --m-ops-danger-10: rgba(196, 107, 99, 0.10);
  --m-ops-danger-14: rgba(196, 107, 99, 0.14);
  --m-ops-danger-16: rgba(196, 107, 99, 0.16);
  --m-ops-danger-32: rgba(196, 107, 99, 0.32);
  --m-ops-danger-45: rgba(196, 107, 99, 0.45);
  --m-ops-danger-55: rgba(196, 107, 99, 0.55);
  --m-ops-scrim: rgba(0, 0, 0, 0.45);
  --m-ops-confirm-scrim: rgba(15, 13, 11, 0.55);
  --m-ops-archived-answer: rgba(155, 90, 107, 0.32);

  /* Border radius */
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 4px;

  /* Horizontal gutter — single source of truth for L/R page/container/card spacing.
     Container owns the edge; children sit at 0 (mobile audit #1). One-line future change. */
  --gutter: 12px;
  /* Roomier gutter — deliberately centred/non-data pages only (auth, setup, privacy). */
  --gutter-wide: 24px;

  /* spacing scale (design-audit-sweeps ruling, decisions.md [2026-07-05]) —
     FORWARD-ONLY: new/touched CSS uses these; existing literals convert only
     when their files are touched by later scheduled work. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* Font-size scale — the single type scale; every font-size keys off these (audit #2).
     Sizes only — NOT --text-*, which are COLOUR tokens. */
  --fs-2xs: 9px;          /* micro caption — mono col headers, chips, eyebrow labels */
  --fs-xs: 11px;          /* small meta / secondary labels / hints (= .text-xs) */
  --fs-sm: 13px;          /* standard body / row labels / mono values (= .text-sm) */
  --fs-base: 14px;        /* primary body / emphasised row (= .text-base) */
  --fs-lg: 16px;          /* section titles / form inputs (= .text-lg) */
  --fs-xl: 18px;          /* screen / card headings (= .text-xl) */
  --fs-2xl: 22px;         /* sub-hero headings (= .text-2xl) */
  --fs-display: 26px;     /* hero numbers (revenue, GP%) */
  --fs-display-lg: 32px;  /* largest hero figures (dashboard drill) */

  /* Typography */
  --font-heading: 'Rubik', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* PDF paper-chip gradient — literal paper colours (theme-independent), shared by the
     OCR-inbox PDF badge + the error-file thumb. Not theme tokens: no .theme-light override. */
  --pdf-chip-grad-start: #f3eede;
  --pdf-chip-grad-end: #d8cfb3;
}

/* ---- Light theme overrides ---- */

html.theme-light,
body.theme-light {
  --bg-base: #f5f0eb;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #ebe5de;
  --text-primary: #1a1816;
  --text-secondary: #5c564e;
  --text-tertiary: #6c665f;
  /* readable-on-tint text (a11y 2026-07-05) */
  --success-text: #426f4d;
  --error-text: #a04949;
  --info-text: #476985;
  --warning-text: #766624;
  --success-contrast: #ffffff;
  --error-contrast: #ffffff;
  --accent: #a97a52;
  --success: #4a7d56;
  --error: #b85454;
  --warning: #9e8830;
  --info: #567fa0;
  --border: color-mix(in srgb, var(--text-primary) 8%, transparent);
  --border-strong: color-mix(in srgb, var(--text-primary) 15%, transparent);
  --stock-accent: #567fa0;
  --sales-accent: #4a7d56;
  --success-bg: color-mix(in srgb, var(--success) 8%, transparent);
  --success-border: color-mix(in srgb, var(--success) 20%, transparent);
  --warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);
  --warning-bg-strong: color-mix(in srgb, var(--warning) 18%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 36%, transparent);
  --warning-border-soft: color-mix(in srgb, var(--warning) 28%, transparent);
  --accent-contrast: #1a1816;
  --accent-bg: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-bg-soft: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
  --error-bg: color-mix(in srgb, var(--error) 8%, transparent);
  --error-bg-strong: color-mix(in srgb, var(--error) 14%, transparent);
  --error-border: color-mix(in srgb, var(--error) 25%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 14%, transparent);
  --info-border: color-mix(in srgb, var(--info) 30%, transparent);
  --success-bg-strong: color-mix(in srgb, var(--success) 14%, transparent);
  --overlay: rgba(0, 0, 0, 0.5);

  /* Invoice module alpha tokens */
  --m-iv-error-tint: color-mix(in srgb, var(--error) 10%, transparent);
  --m-iv-error-strong: color-mix(in srgb, var(--error) 18%, transparent);
  --m-iv-error-12: color-mix(in srgb, var(--error) 12%, transparent);
  --m-iv-error-14: color-mix(in srgb, var(--error) 14%, transparent);
  --m-iv-error-15: color-mix(in srgb, var(--error) 15%, transparent);
  --m-iv-error-border: color-mix(in srgb, var(--error) 35%, transparent);
  --m-iv-error-border-30: color-mix(in srgb, var(--error) 30%, transparent);
  --m-iv-error-border-40: color-mix(in srgb, var(--error) 40%, transparent);
  --m-iv-warn-tint: color-mix(in srgb, var(--warning) 10%, transparent);
  --m-iv-warn-14: color-mix(in srgb, var(--warning) 14%, transparent);
  --m-iv-warn-20: color-mix(in srgb, var(--warning) 20%, transparent);
  --m-iv-warn-border: color-mix(in srgb, var(--warning) 30%, transparent);
  --m-iv-info-tint: color-mix(in srgb, var(--info) 10%, transparent);
  --m-iv-info-path-bg: color-mix(in srgb, var(--info) 8%, transparent);
  --m-iv-info-path-border: color-mix(in srgb, var(--info) 40%, transparent);
  --m-iv-upload-bg: color-mix(in srgb, var(--info) 50%, transparent);
  --m-iv-selected: color-mix(in srgb, var(--success) 8%, transparent);
  --m-iv-scrim: rgba(20, 18, 15, 0.35);
  --m-iv-warn-card: color-mix(in srgb, var(--warning) 35%, transparent);
  --m-iv-recon-ok-bg: color-mix(in srgb, var(--success) 14%, transparent);
  --m-iv-recon-ok-border: color-mix(in srgb, var(--success) 30%, transparent);
  --m-iv-recon-off-bg: color-mix(in srgb, var(--error) 8%, transparent);
  --m-iv-recon-off-border: color-mix(in srgb, var(--error) 30%, transparent);
  --m-iv-pill-linked: color-mix(in srgb, var(--success) 10%, transparent);
  --m-iv-pill-possible: color-mix(in srgb, var(--warning) 10%, transparent);
  --m-iv-pill-unlinked: color-mix(in srgb, var(--error) 10%, transparent);
  --m-iv-pill-nonprod: rgba(0, 0, 0, 0.08);
  --m-iv-pill-stocked: color-mix(in srgb, var(--success) 10%, transparent);
  --m-iv-pill-stocked-border: color-mix(in srgb, var(--success) 45%, transparent);
  --m-iv-recon-badge-ok: color-mix(in srgb, var(--success) 22%, transparent);
  --m-iv-recon-badge-bad: color-mix(in srgb, var(--error) 22%, transparent);
  --m-iv-lock-bg: color-mix(in srgb, var(--text-tertiary) 10%, transparent);
  --m-iv-lock-icon-bg: color-mix(in srgb, var(--text-tertiary) 20%, transparent);
  --m-iv-danger-bg: color-mix(in srgb, var(--error) 6%, transparent);
  --m-iv-danger-border: color-mix(in srgb, var(--error) 30%, transparent);
  --m-iv-stock-confirm-bg: color-mix(in srgb, var(--success) 8%, transparent);
  --m-iv-stock-confirm-border: color-mix(in srgb, var(--success) 25%, transparent);
  --m-iv-qty-ok-bg: color-mix(in srgb, var(--success) 8%, transparent);
  --m-iv-qty-ok-border: color-mix(in srgb, var(--success) 30%, transparent);
  --m-iv-pdfview-bg: #1a1816;
  --m-iv-pdfview-page-shadow: 0 6px 24px rgba(0,0,0,0.3);
  --m-iv-ocr-dropzone-bg: rgba(0, 0, 0, 0.02);
  --m-iv-ocr-icon-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --m-iv-ocr-photo-warn-bg: color-mix(in srgb, var(--warning) 10%, transparent);
  --m-iv-ocr-photo-warn-border: color-mix(in srgb, var(--warning) 40%, transparent);
  --m-iv-ocr-photo-warn-icon-bg: color-mix(in srgb, var(--warning) 18%, transparent);
  --m-iv-ocr-preview-bg: linear-gradient(135deg, #e8e4de 0%, #d4cfc6 100%);
  /* Confirmed invoice layout tokens */
  --m-iv-conf-ocr-bg: color-mix(in srgb, var(--info) 10%, transparent);
  --m-iv-conf-ocr-border: color-mix(in srgb, var(--info) 40%, transparent);
  --m-iv-conf-manual-bg: rgba(0, 0, 0, 0.03);
  --m-iv-conf-pill-success-bg: color-mix(in srgb, var(--success) 10%, transparent);
  --m-iv-conf-pill-info-bg: color-mix(in srgb, var(--info) 10%, transparent);
  --m-iv-conf-pill-muted-bg: rgba(0, 0, 0, 0.08);
  --m-iv-conf-pill-error-bg: color-mix(in srgb, var(--error) 10%, transparent);
  --m-iv-conf-pill-warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);

  /* Settings module tokens */
  --settings-cogs-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --settings-cogs-border: color-mix(in srgb, var(--accent) 35%, transparent);
  --settings-selected-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  /* Operations module alpha tokens (light) */
  --m-ops-accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --m-ops-accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
  --m-ops-accent-18: color-mix(in srgb, var(--accent) 18%, transparent);
  --m-ops-accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
  --m-ops-accent-42: color-mix(in srgb, var(--accent) 42%, transparent);
  --m-ops-accent-45: color-mix(in srgb, var(--accent) 45%, transparent);
  --m-ops-accent-70: color-mix(in srgb, var(--accent) 70%, transparent);
  --m-ops-warn-08: color-mix(in srgb, var(--warning) 8%, transparent);
  --m-ops-warn-12: color-mix(in srgb, var(--warning) 12%, transparent);
  --m-ops-warn-32: color-mix(in srgb, var(--warning) 32%, transparent);
  --m-ops-success-12: color-mix(in srgb, var(--success) 12%, transparent);
  --m-ops-success-16: color-mix(in srgb, var(--success) 16%, transparent);
  --m-ops-success-18: rgba(100, 162, 128, 0.18);
  --m-ops-success-32: rgba(100, 162, 128, 0.32);
  --m-ops-success-40: rgba(100, 162, 128, 0.40);
  --m-ops-attn-04: rgba(156, 62, 62, 0.04);
  --m-ops-attn-06: rgba(156, 62, 62, 0.06);
  --m-ops-attn-32: rgba(156, 62, 62, 0.32);
  --m-ops-danger-10: rgba(176, 86, 78, 0.10);
  --m-ops-danger-14: rgba(176, 86, 78, 0.14);
  --m-ops-danger-16: rgba(176, 86, 78, 0.16);
  --m-ops-danger-32: rgba(176, 86, 78, 0.32);
  --m-ops-danger-45: rgba(176, 86, 78, 0.45);
  --m-ops-danger-55: rgba(176, 86, 78, 0.55);
  --m-ops-scrim: rgba(0, 0, 0, 0.35);
  --m-ops-confirm-scrim: rgba(15, 13, 11, 0.45);
  --m-ops-archived-answer: rgba(140, 75, 92, 0.32);
}

/* ---- CSS Reset ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

select,
select option {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ---- Base body styles ---- */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-width: 390px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Font utility classes ---- */

.font-mono { font-family: var(--font-mono); }
.font-heading { font-family: var(--font-heading); font-weight: 300; }

/* ---- Text colour utilities ---- */

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }

/* ---- Text size utilities ---- */

.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }

/* ---- Font weight utilities ---- */

.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }

/* ---- Text transform utilities ---- */

.uppercase { text-transform: uppercase; letter-spacing: 0.8px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Message banners (inline, NOT flash messages) ---- */

.msg-success,
.msg-error,
.msg-warning,
.msg-info {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: var(--fs-base);
  margin-bottom: 16px;
  border-left: 3px solid;
  position: relative;
}

.msg-success {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
  border-left-color: var(--success);
}

.msg-error {
  background: color-mix(in srgb, var(--error) 15%, transparent);
  color: var(--error);
  border-left-color: var(--error);
}

.msg-warning {
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  color: var(--warning);
  border-left-color: var(--warning);
}

.msg-info {
  background: color-mix(in srgb, var(--info) 15%, transparent);
  color: var(--info);
  border-left-color: var(--info);
}

/* Close button injected by JS auto-dismiss */
.msg-close {
  position: absolute;
  top: 8px;
  right: 8px;
  /* a11y wave 3: ≥24×24 effective target (WCAG 2.2 AA min) via min-size + flex
     centring — the visual glyph is unchanged (audit R9). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  box-sizing: border-box;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: var(--fs-lg);
  padding: 4px;
  line-height: 1;
  transition: opacity 0.15s ease;
}

.msg-close:hover {
  opacity: 1;
}

.msg-close:active {
  opacity: 1;
}

/* ---- Date input calendar icon — accent colour globally ---- */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(68%) sepia(40%) saturate(500%) hue-rotate(335deg) brightness(90%);
  cursor: pointer;
  opacity: 1;
}
input[type="date"] { color-scheme: dark; }

/* ============================================================
   ACCESSIBILITY — skip link, global focus-visible baseline,
   reduced-motion (a11y wave 3, audit R6 + R7 + R10).
   These are shell-level: one fix each, app-wide effect.
   ============================================================ */

/* Skip link — visually hidden until focused (clip-rect pattern so it stays
   in the a11y tree + tab order); becomes a visible accent pill top-left when
   a keyboard user first Tabs into the page. Target is <main id="page-content">. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  z-index: 10000;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus-visible {
  width: auto;
  height: auto;
  padding: 10px 16px;
  clip: auto;
  clip-path: none;
  overflow: visible;
  outline: 2px solid var(--accent-contrast);
  outline-offset: 2px;
}

/* Global focus-visible baseline — the app had ZERO :focus-visible rules while
   outline:none appeared 61× in components.css. This is the backstop that keeps
   keyboard focus visible everywhere a component doesn't paint its own ring.
   Accent vs the dark grounds = 6.7:1 (passes the 3:1 UI-component floor). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Keep mouse/touch clicks quiet — only keyboard focus shows the ring. */
:focus:not(:focus-visible) {
  outline: none;
}
/* The <main> content region is the skip-link / focus-shift TARGET, not an
   interactive control. Following the skip link keyboard-focuses it, which would
   otherwise paint the global ring around the ENTIRE content viewport (main is
   flex:1 + the scrollport) — a full-page frame. Suppress it here: focus still
   lands (AC1 unaffected), just without the rectangle. */
main.page-content:focus,
main.page-content:focus-visible {
  outline: none;
}

/* Mobile top-bar title is now an <h1> (a11y wave 3). The .m-top-bar__title
   class (layout.css) already carries font-size/weight/family; only the UA
   heading margin leaks, so reset that alone (NOT font-size/weight — those
   are owned by the class and must not be flattened to inherit). */
h1.m-top-bar__title {
  margin: 0;
}

/* Global reduced-motion baseline — the only prior reduce rules were keypad-
   scoped. Neutralises animations/transitions app-wide for users who ask for it
   (audit R10). pdf-viewer.js carries the JS-side matchMedia guard (wave 2). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}