/* Hyde DataLink design tokens.
   V3 (2026-10-31): the V1 set below is kept name for name; the V3 set is appended under it. Every V3 token is prefixed --v3-.
   Fonts are SELF-HOSTED under app/fonts/v3/ (latin woff2 from Google Fonts, 2026-10-31; OFL). Signature italic = Instrument Serif (wordmark only).
   Sans = Manrope variable 200-800 (UI, headings). Mono = JetBrains Mono variable 100-800 (figures, tables, monitor). No third-party request; the page CSP
   (font-src 'self') is satisfied. Absolute /fonts/v3/ paths so the same file works from /css/, /p/ and /t/ (hosts that whitelist files must allow them: REQUESTS B-5). */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/v3/instrument-serif/instrument-serif-latin-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/v3/instrument-serif/instrument-serif-latin-normal-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/v3/manrope/manrope-latin-normal-200-800.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/v3/jetbrains-mono/jetbrains-mono-latin-normal-100-800.woff2") format("woff2"); }
/* V1 note, kept: read from hydeaviation.com on 3 Oct 2026: royal blue #1B16FB, Helvetica Neue Light for display lines, DIN Next for small headings,
   a quiet lowercase lead line over one strong capitalised line, hairlines instead of boxes. */
@font-face { font-family: "Inter"; src: url("../vendor/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* ---------- V1 tokens (unchanged names; values retuned where V3 wants it, see BRAND.md) */
  --bg: #F7F7F5;
  --panel: #FFFFFF;
  --ink: #0E1116;
  --ink-2: #3A4350;
  --muted: #5F6873;
  --faint: #67707C;
  --line: #E6E6E2;
  --line-2: #D4D5D0;
  --navy: #0B1F3A;
  --blue: #1B16FB;
  --blue-soft: #ECEBFF;
  --sky: #8EA9B8;
  --sky-soft: #EEF1F2;
  --ok: #2A7553;
  --watch: #946210;
  --bad: #9B2C2C;
  --ok-bg: #E8F3EE;
  --watch-bg: #FBF3E3;
  --bad-bg: #F8E9E9;

  --font-display: var(--v3-font-sans);
  --font-ui: var(--v3-font-sans);

  --radius: 12px;
  --radius-lg: 16px;
  --nav-h: 60px;
  --filter-h: 52px;
  --shadow: var(--v3-shadow-1);
  --shadow-lg: var(--v3-shadow-3);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- V3 type */
  --v3-font-sig: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
  --v3-font-sans: "Manrope", "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v3-font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --v3-mono-features: "tnum" 1, "zero" 1, "ss01" 1;

  /* type ramp (px): keep bodies at 15+ for the client-facing surfaces; 14 is the floor in staff tables */
  --v3-fs-0: 11px;    /* eyebrow / table head, always uppercase + tracked */
  --v3-fs-1: 12.5px;  /* meta, source lines */
  --v3-fs-2: 14px;    /* dense table cells */
  --v3-fs-3: 15px;    /* body */
  --v3-fs-4: 17px;    /* lead, card value small */
  --v3-fs-5: 22px;    /* panel head */
  --v3-fs-6: 28px;    /* section title */
  --v3-fs-7: 36px;    /* page title */
  --v3-fs-8: 52px;    /* hero figure */
  --v3-track-eyebrow: .12em;
  --v3-track-title: -.015em;
  --v3-lh-tight: 1.1;
  --v3-lh-body: 1.5;

  /* ---------- V3 color: light, warm, one accent */
  --v3-accent: #1B16FB;          /* royal blue, 8.2:1 on white */
  --v3-accent-ink: #150FDB;      /* hover / pressed */
  --v3-accent-soft: #ECEBFF;
  --v3-accent-line: #C9C6FF;
  --v3-ink: #0E1116;
  --v3-ink-2: #3A4350;
  --v3-muted: #5F6873;           /* 6.1:1 on white */
  --v3-faint: #67707C;           /* tertiary text, 5.0:1 on white, 4.7:1 on the page (was 2.6:1: AA, brand-final 2026-11-03) */
  --v3-graphite: #23272E;        /* dark surface (monitor, dark wordmark backing) */
  --v3-ok: #2A7553;  --v3-ok-bg: #E8F3EE;  --v3-ok-ink: #1F6446;
  --v3-watch: #946210; --v3-watch-bg: #FBF3E3; --v3-watch-ink: #8A5A0E;
  --v3-bad: #9B2C2C;  --v3-bad-bg: #F8E9E9;  --v3-bad-ink: #7A1F1F;

  /* ---------- V3 surface tiers (0 = page, 1 = card, 2 = raised, 3 = overlay) */
  --v3-surface-0: #F7F7F5;
  --v3-surface-1: #FFFFFF;
  --v3-surface-2: #FBFBFA;
  --v3-surface-3: rgba(255, 255, 255, .86);
  --v3-surface-dark: #0E1116;

  /* ---------- V3 hairlines */
  --v3-hair: 1px solid #E6E6E2;
  --v3-hair-2: 1px solid #D4D5D0;
  --v3-hair-accent: 1px solid #C9C6FF;
  --v3-hair-color: #E6E6E2;
  --v3-hair-color-2: #D4D5D0;

  /* ---------- V3 spacing (4-base) */
  --v3-sp-1: 4px;  --v3-sp-2: 8px;  --v3-sp-3: 12px; --v3-sp-4: 16px;
  --v3-sp-5: 20px; --v3-sp-6: 24px; --v3-sp-7: 32px; --v3-sp-8: 40px; --v3-sp-9: 56px;

  /* ---------- V3 radii (tighter than V1: corporate, not bubbly) */
  --v3-r-1: 6px;    /* inputs, tags */
  --v3-r-2: 10px;   /* buttons, chips */
  --v3-r-3: 12px;   /* cards */
  --v3-r-4: 16px;   /* panels, dialogs */
  --v3-r-pill: 999px;

  /* ---------- V3 shadows (ambient, warm-neutral) */
  --v3-shadow-0: none;
  --v3-shadow-1: none;                 /* cards are a hairline, not a shadow (ui-system 2026-11-04); shadows are for overlays only */
  --v3-shadow-2: 0 1px 2px rgba(14, 17, 22, .05), 0 6px 20px rgba(14, 17, 22, .06);
  --v3-shadow-3: 0 2px 6px rgba(14, 17, 22, .06), 0 20px 50px rgba(14, 17, 22, .12);
  --v3-focus: 0 0 0 3px rgba(27, 22, 251, .18);

  /* ---------- V3 motion */
  --v3-ease: cubic-bezier(.2, .7, .2, 1);
  --v3-t-fast: .12s;
  --v3-t: .2s;
}

/* ===================================================================================================================
   LAYOUT TOKENS (2026-11-02, brand-final; docs/v3/BRAND.md "Layers and viewport"). Loaded before mobile-shell.css / shell-v5.css, which override --dock-h, --nav-h etc. per breakpoint.
   Z-INDEX: five layers, nothing above 400 outside the scale (login is the one exception, 500). New code uses var(--z-*), never a literal.
   VIEWPORT: use var(--app-h) for full-height holders (100dvh where supported, 100vh fallback), minus --nav-h, --filter-h, --banner-h as needed. */
:root {
  --z-base: 1;        /* inside-component stacking (map controls, sticky table head inside a card) */
  --z-sticky: 10;     /* sticky headers, filter bars */
  --z-banner: 100;    /* all-hands / status banner (same layer as the dock; never taller than 64px on phones) */
  --z-dock: 100;      /* top nav, bottom section dock */
  --z-drawer: 200;    /* side drawers, bottom sheets, Clippy drawer */
  --z-modal: 300;     /* dialogs, command bar */
  --z-toast: 400;     /* toasts, AFK guard */
  --z-login: 500;     /* sign-in / PIN layer, the one exception */

  --app-h: 100vh;
  --banner-h: 0px;
  --filter-h: 52px;
  --dock-h: 0px;
  --dl-bottom-nav-h: var(--dock-h);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* space a scrolling page must leave at its end so a fixed dock / floating helper never covers content */
  --page-pad-b: calc(var(--dock-h) + var(--safe-b) + 16px);
  /* the sub-tab strip (#subnav, 45px) is published by the shell only while it is shown; 0 otherwise */
  --subnav-h: 0px;
  /* what is left for a holder under the top bar, sub-tab strip and banner */
  --view-h: calc(var(--app-h) - var(--nav-h) - var(--subnav-h, 0px) - var(--banner-h));
}
@supports (height: 100dvh) { :root { --app-h: 100dvh; } }

/* ===================================================================================================================
   THEME TOKENS (2026-11-01, shell modernisation). ADDITIVE: nothing above this line changed.
   Semantic --dl-* tokens with a light and a dark value. LIGHT IS THE DEFAULT and equals today's look; dark is opt-in (account menu: Light / Dark / Match system),
   stored in localStorage "dl_theme" and applied by js/theme.js as <html data-theme="light|dark"> (+ data-theme-choice="light|dark|system").
   How to use them: docs/v4/THEME.md. Text/background pairs below are >= 4.5:1 (checked 2026-11-01).
   Under [data-theme="dark"] the LEGACY tokens (--bg, --panel, --ink, --line, --blue, --navy, --v3-*) are remapped too, so screens that already use tokens follow the theme;
   screens that hard-code #fff do not, and that is why dark is opt-in until they are redesigned. */
:root {
  --dl-bg: #F7F7F5;            /* page */
  --dl-surface: #FFFFFF;       /* cards, panels, menus */
  --dl-surface-2: #FBFBFA;     /* inputs, table hover, subnav */
  --dl-surface-3: #FFFFFF;     /* popovers, dialogs, command bar */
  --dl-hover: rgba(14, 17, 22, .045);   /* hover tint on any surface */
  --dl-ink: #0E1116;
  --dl-ink-2: #3A4350;
  --dl-muted: #5F6873;         /* 5.65:1 on white */
  --dl-faint: #67707C;         /* tertiary text: 5.0:1 on white, 4.7:1 on the page (was 2.6:1) */
  --dl-line: #E6E6E2;
  --dl-line-2: #D4D5D0;
  --dl-control: #848C97;       /* border of a text field, select, checkbox: 3.4:1 on white (WCAG 1.4.11 non-text) */
  --dl-accent: #1B16FB;        /* FILL: primary buttons, toggles, active bars (white text on it: 8.2:1) */
  --dl-accent-hover: #150FDB;
  --dl-on-accent: #FFFFFF;
  --dl-accent-text: #1B16FB;   /* TEXT/ICON in accent on a surface: links, active tab (7.7:1) */
  --dl-accent-soft: #ECEBFF;   /* selected row, soft chip background */
  --dl-accent-line: #C9C6FF;
  --dl-ok: #2A7553;            /* text on surface 5.6:1, on --dl-ok-bg 4.9:1 */
  --dl-ok-bg: #E8F3EE;
  --dl-warn: #8A5A0E;          /* text on surface: 5.4:1 (the fill is --watch #B7791F) */
  --dl-warn-bg: #FBF3E3;
  --dl-bad: #9B2C2C;           /* text on surface: 7.5:1 */
  --dl-bad-bg: #F8E9E9;
  --dl-on-bad: #FFFFFF;        /* text on a --dl-bad fill (badges) */
  --dl-glass: rgba(246, 247, 249, .86);   /* sticky filter bar */
  --dl-inverse: #0B1F3A;       /* a dark-on-light pill (selected segment, account initial): navy here, pale in dark */
  --dl-on-inverse: #FFFFFF;
  --dl-focus: #1B16FB;         /* focus ring colour: always 3px, offset 2px */
  --dl-shadow: none;
  --dl-shadow-lg: 0 2px 6px rgba(14, 17, 22, .06), 0 20px 50px rgba(14, 17, 22, .12);
  --dl-scrim: rgba(14, 17, 22, .28);
  --dl-nav-bg: rgba(255, 255, 255, .86);
  --dl-scroll: #CDD3DB;
  --dl-surface-4: #FFFFFF;
  --dl-info: #1B16FB;
  --dl-info-bg: #ECEBFF;
  --dl-map-bg: #EEF1F4;
}

/* ===================================================================================================================
   BRAND-FINAL ROLE TOKENS (2026-11-03). Theme-safe names for the things the V3 components used to hard-code as "--v3-ink + #fff" or "--v3-accent + #fff".
   In dark, --v3-accent is the pale TEXT blue and --v3-ink is the pale text colour, so white on them is 2.2:1 / 1.1:1: a fill must use these, never the text tokens.
   FILL + ON-FILL pairs (proved >= 4.5:1 in both themes by tests/final/test_tokens.py):
     --v3-accent-fill / --v3-on-accent      primary buttons, active toggles, the mark
     --v3-ink-fill    / --v3-on-ink         selected chip / segment / count badge / toast
     --v3-bad-fill    / --v3-on-bad         destructive hover, error badge
   Density, focus ring, illustration, count-up motion: see docs/v3/BRAND.md "Final brand spec". */
:root {
  --v3-accent-fill: var(--dl-accent);
  --v3-accent-fill-hover: var(--dl-accent-hover);
  --v3-on-accent: var(--dl-on-accent);
  --v3-ink-fill: var(--dl-inverse);
  --v3-on-ink: var(--dl-on-inverse);
  --v3-bad-fill: var(--dl-bad);
  --v3-on-bad: var(--dl-on-bad);
  --v3-ring: 3px solid var(--dl-focus);          /* focus ring: 3px, offset 2px, one colour everywhere */
  --v3-ring-offset: 2px;
  --v3-tap: 44px;                                /* minimum touch target */
  --v3-row-h: 44px;                              /* comfortable table / list row */
  --v3-row-h-dense: 36px;                        /* dense staff table row (desktop only) */
  --v3-t-count: .4s;                             /* number tiles count up once, never longer */
  --v3-illus-line: var(--dl-muted);              /* empty-state illustration stroke */
  --v3-illus-fill: var(--dl-accent-soft);        /* empty-state illustration tint */
  /* monitor surfaces are dark in BOTH themes (Inspector, selftest): fixed pale status colours, all >= 7:1 on --v3-surface-dark */
  --v3-mon-ink: #E8EAED; --v3-mon-ok: #7FD3A8; --v3-mon-watch: #F0C36D; --v3-mon-bad: #F09595;
}
@media (prefers-reduced-motion: reduce) { :root { --v3-t-fast: 0s; --v3-t: 0s; --v3-t-count: 0s; } }
/* DARK v2 (2026-11-02, docs/v3/DARK-MODE.md): cool blue-grey neutrals (Apple / Linear / Vercel family), NOT indigo. Elevation = lighter surface, hairline borders, shadows only on overlays.
   Surfaces step 0 -> 4 (bg, surface, surface-2, surface-3, surface-4); text never pure white; accent is a desaturated Apple-style blue; every text pair is >= 4.5:1 (muted on the lightest surface 4.6:1). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --dl-bg: #0C0F14;
  --dl-surface: #14181F;
  --dl-surface-2: #1A1F28;
  --dl-surface-3: #222833;
  --dl-surface-4: #2A313D;
  --dl-hover: rgba(255, 255, 255, .055);
  --dl-ink: #ECEFF4;
  --dl-ink-2: #BEC6D2;
  --dl-muted: #8F9BAD;         /* 6.8:1 on bg, 5.9:1 on surface-2, 4.6:1 on surface-4 */
  --dl-faint: #8F9BAD;         /* tertiary text: equals --dl-muted so it is AA on all five surfaces (4.6:1 on surface-4); hierarchy comes from size and weight */
  --dl-line: #262C36;          /* hairline */
  --dl-line-2: #374050;        /* quiet border */
  --dl-control: #68758A;       /* border of a field: >= 3:1 on surface and surface-2 */
  --dl-accent: #2563EB;        /* FILL; white on it 5.2:1 */
  --dl-accent-hover: #2C69EE;
  --dl-on-accent: #FFFFFF;
  --dl-accent-text: #7AB0FF;   /* 8.0:1 on surface */
  --dl-accent-soft: #13203A;
  --dl-accent-line: #25407A;
  --dl-ok: #5FD3A0;
  --dl-ok-bg: #102A20;
  --dl-warn: #E8B45A;
  --dl-warn-bg: #2C2412;
  --dl-bad: #FF8F8F;
  --dl-bad-bg: #331A1F;
  --dl-info: #7AB0FF;
  --dl-info-bg: #13203A;
  --dl-on-bad: #2A0B10;
  --dl-glass: rgba(12, 15, 20, .86);
  --dl-inverse: #E8ECF3;
  --dl-on-inverse: #0C0F14;
  --dl-focus: #7AB0FF;
  --dl-shadow: 0 0 0 1px rgba(255, 255, 255, .03);
  --dl-shadow-lg: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
  --dl-scrim: rgba(4, 6, 10, .66);
  --dl-nav-bg: rgba(12, 15, 20, .82);
  --dl-scroll: #374050;
  /* data-viz (colour-blind-aware order; all >= 3:1 on surface) */
  --dl-chart-1: #5B9BFF; --dl-chart-2: #4CC9B0; --dl-chart-3: #E8B45A; --dl-chart-4: #C792EA;
  --dl-chart-5: #FF8F8F; --dl-chart-6: #7FD1F0; --dl-chart-7: #9AA6B8; --dl-chart-8: #F0A06A;
  --dl-chart-grid: #262C36; --dl-chart-axis: #8F9BAD;
  /* map basemap tint (applied as a filter on light raster tiles, see mapx.css) */
  --dl-map-bg: #10151C;

  /* legacy tokens follow the theme (names unchanged) */
  --bg: var(--dl-bg); --panel: var(--dl-surface); --ink: var(--dl-ink); --ink-2: var(--dl-ink-2); --muted: var(--dl-muted); --faint: var(--dl-faint);
  --line: var(--dl-line); --line-2: var(--dl-line-2);
  --navy: #C9D3E4;             /* legacy navy is mostly used as TEXT (chips, icons): pale here. Fills use --dl-inverse / --dl-accent instead. */
  --blue: var(--dl-accent-text); --blue-soft: var(--dl-accent-soft);
  --sky: #5E7388; --sky-soft: #1A222D;
  --ok: var(--dl-ok); --watch: var(--dl-warn); --bad: var(--dl-bad);
  --ok-bg: var(--dl-ok-bg); --watch-bg: var(--dl-warn-bg); --bad-bg: var(--dl-bad-bg);
  --shadow: var(--dl-shadow); --shadow-lg: var(--dl-shadow-lg);
  --v3-accent: var(--dl-accent-text); --v3-accent-ink: var(--dl-accent-text); --v3-accent-soft: var(--dl-accent-soft); --v3-accent-line: var(--dl-accent-line);
  --v3-ink: var(--dl-ink); --v3-ink-2: var(--dl-ink-2); --v3-muted: var(--dl-muted); --v3-faint: var(--dl-faint);
  --v3-ok: var(--dl-ok); --v3-ok-bg: var(--dl-ok-bg); --v3-ok-ink: var(--dl-ok);
  --v3-watch: var(--dl-warn); --v3-watch-bg: var(--dl-warn-bg); --v3-watch-ink: var(--dl-warn);
  --v3-bad: var(--dl-bad); --v3-bad-bg: var(--dl-bad-bg); --v3-bad-ink: var(--dl-bad);
  --v3-surface-0: var(--dl-bg); --v3-surface-1: var(--dl-surface); --v3-surface-2: var(--dl-surface-2); --v3-surface-3: var(--dl-nav-bg);
  --v3-hair: 1px solid #262C36; --v3-hair-2: 1px solid #374050; --v3-hair-accent: 1px solid #25407A; --v3-hair-color: #262C36; --v3-hair-color-2: #374050;
  --v3-shadow-1: var(--dl-shadow); --v3-shadow-2: var(--dl-shadow-lg); --v3-shadow-3: var(--dl-shadow-lg);
  --v3-focus: 0 0 0 3px rgba(122, 176, 255, .35);
}

/* ===================================================================================================================
   UI SYSTEM SCALES (2026-11-04, docs/v4/progress/ui-system.md). One short scale per thing; components.css is the only place that turns them into components.
   Space (4-pt): --sp-1 4  --sp-2 8  --sp-3 12  --sp-4 16  --sp-5 24  --sp-6 32  --sp-7 48
   Type (6 steps): --fs-1 12 meta/labels  --fs-2 13 controls, dense tables  --fs-3 14 body  --fs-4 16 lead, card title  --fs-5 22 section  --fs-6 30 page title
   Radius: --r-1 6 (inputs, tags)  --r-2 8 (buttons)  --r-3 12 (cards, panels)  --r-pill. Control height: --ctl-h 36 (30 small, 44 touch). */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 22px; --fs-6: 30px;
  --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-pill: 999px;
  --ctl-h: 36px; --ctl-h-sm: 30px; --ctl-h-touch: 44px;
}
@media (pointer: coarse) { :root { --ctl-h: 44px; --ctl-h-sm: 44px; } }