/* =====================================================================================================
   PolyJacks Mission Control - ds/tokens.css (S0b-T0; contract S0bc D20 + 5.2): THE design tokens.
   3.00.71.12 / job U1 - DIRECTION A "Dispatch". Read ds/tokens2.css, which loads right after this file:
   it re-values the S0a names and the --l-* / --n-* families to UI_SPEC s1.1 (white + navy, hot orange
   #f97316 as the one action) and carries the tag hue palette plus Direction C scoped to .theme-night.
   This file's own values are held at their old palette-A figures ON PURPOSE: ds/tokens.css:41-166 is the
   PINNED S0a block (tests/s0b_ds_test.py pins its sha256) and tests/design_contrast_test.py pins the exact
   ratio of every --l-* / --n-* pair in this file, so the Direction A values live in tokens2.css instead of
   here. The NAMES are unchanged in both files - every other stylesheet keeps reading them.
   ONE SOURCE. The token block of the committed S0a app.css (commit 2cc9981, lines 28-233) sits below
   with its NAMES unchanged and its colour VALUES re-cut to palette A "Harbor Cream" (owner decision
   2026-10-02, PROJECTS/MC_PALETTE_STUDY_2026-10-02), its sha256 re-pinned by tests/s0b_ds_test.py - and
   SA-17 took it out of app.css, which loads AFTER this file. Everything after the block EXTENDS it: no later
   :root rule redefines an S0a name (the test checks that too).
   LAW (owner ruling 2026-10-02, supersedes "Screens are dark" of 2026-07-29): "I want a nicer balance between
   white sections and navy blue sections inside the software ... where it's more text heavy ... dark, light,
   dark, light ... Everything needs to be very easy to read and easy on the eyes." So every screen MIXES two
   surfaces: NAVY FRAMES (the top bar, page headers, hero and summary swaths, the board's columns, the tab bar)
   and LIGHT WORK SURFACES (forms, settings, the job and client pages, notes, the quote builder, the ledger,
   tables, the walkthrough text) in dark ink. The S0a block below stays the NAVY family; the LIGHT family
   (--l-*) and the brightened navy text set (--n-*) are declared after it, and components.css maps the --c-*
   semantic names to one family or the other per surface (the light scope and the navy scope). There is still
   no OS-driven theme: the mix is designed, never a media query on the viewer's setting. Print stays white paper.
   Fonts: system faces only, never a fixed-width face (owner rule 2026-09-23). Amounts, counts, times and
   readings use .num - tabular figures of the UI face.
   CONTRAST - WCAG 2.x relative luminance; text >= 4.5:1 (body text aims for 7:1), UI boundaries and the
   focus ring >= 3:1. The light and navy-swath pairs are proven by tests/design_contrast_test.py (the figures
   live in that file's table); the S0a pairs are recomputed on each GET /ds (routes_ds) and by s0b_ds_test:
   - screen text on canvas / column / surface / surface-2 (palette A: the last three are one #1c2944):
     --c-text 14.21 / 12.87 / 12.87 / 12.87; --c-text-2 11.07 / 10.02 / 10.02 / 10.02;
     --c-text-3 8.47 / 7.66 / 7.66 / 7.66; --c-link 7.96 / 7.20 / 7.20 / 7.20;
     --c-placeholder 7.66 on both input grounds.
   - status text on its own tint (all four opaque): good 7.97, warn 7.82, danger 7.25, info 7.48; on the
     bare surface 8.55 / 8.73 / 7.53 / 7.89; chip text on the chip 8.84.
   - ivory on the accent fill: rest 5.00, hover 6.09, pressed 6.09; the bar navy on the danger fill 5.95
     (hover 6.74).
   - status marks on navy (UI parts, lowest on the #24324f chip): warn fill 3.30, danger fill 4.48.
   - UI parts: --c-line-strong 3.27 on the surface, 3.27 column, 3.61 canvas, 3.27 surface-2; --c-focus 7.20
     at its lowest.
   - paper: text 17.85, muted 7.58, link 5.18 (the focus ring on paper uses the link colour). --c-paper-line
     is a hairline (1.23) and never a control boundary - a control on paper is outlined in --c-paper-muted.
   - print: text 17.85 on white, 16.30 on the column; text-2 10.35 / 9.45; text-3 7.58 / 6.92; link 5.18 /
     4.73; placeholder 4.76 on white; status text on its tint good 4.79, warn 4.88, danger 5.91, info 6.88;
     chip 9.45; line-strong 3.50 / 3.19; focus 5.18 / 4.73.
   - on navy (the app bar, the tab bar): text 15.07, text-3 8.98, the accent ink 8.44.
   ===================================================================================================== */

/* ---- BEGIN the S0a token block: app.css (commit 2cc9981) lines 28-233, moved VERBATIM ---- */
:root {
  color-scheme: dark;

  /* ---- brand primitives (identical in both themes; palette A "Harbor Cream", owner 2026-10-02) ---- */
  --navy: #121c32;
  --navy-2: #1e293b;
  --amber: #b04d1e;
  --amber-l: #e9a97f;
  --amber-d: #9e4119;
  --amber-700: #c2410c;
  --amber-800: #9a3412;
  --cream: #fff7ed;
  --tex-topo-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='64'%3E%3Cpath d='M0 16 Q 27.5 6 55 16 T 110 16 T 165 16 T 220 16' stroke='%23f6f1e7' stroke-opacity='.045' stroke-width='1.4' fill='none'/%3E%3Cpath d='M0 38 Q 27.5 28 55 38 T 110 38 T 165 38 T 220 38' stroke='%23f6f1e7' stroke-opacity='.03' stroke-width='1.4' fill='none'/%3E%3Cpath d='M0 55 Q 27.5 47 55 55 T 110 55 T 165 55 T 220 55' stroke='%23e9a97f' stroke-opacity='.09' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  --brand-tile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf7f0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 11 5-5 5 5M12 6v12M6 19h12'/%3E%3C/svg%3E");

  /* ---- semantic colour: the SCREEN theme (navy; palette A: canvas < column = surface = surface-2) ---- */
  --c-canvas: #16213a; /* the harbour navy band (palette A) */
  --c-surface: #1c2944;
  --c-surface-2: #1c2944;
  --c-column: #1c2944;
  --c-column-line: #33415e;
  --c-line: #33415e;
  --c-line-strong: #6c7892; /* control borders: 3.27:1 on the surface, 3.27:1 on the column */
  --c-hover: rgba(255, 255, 255, .07);
  --c-text: #f6f1e7; /* 12.87:1 on the surface */
  --c-text-2: #ddd6c8;
  --c-text-3: #c2bcb0; /* muted: 7.66:1 on the surface, 7.66:1 on the column */
  --c-placeholder: #c2bcb0; /* 7.66:1 */
  --c-link: #e9a97f; /* the accent ink on navy, 7.20:1 */
  --c-focus: #e9a97f;
  --c-accent-line: #e9a97f; /* the accent as a BOUNDARY on navy (active filter, pending card) */
  --c-primary: #b04d1e;
  --c-primary-hover: #9e4119;
  --c-primary-press: #9e4119;
  --c-on-primary: #faf7f0; /* ivory on the rust fill, 5.00:1 */
  --c-good-text: #9fd3ae; /* 7.97:1 on its tint */
  --c-good-fill: #9fd3ae;
  --c-good-bg: #1b3236;
  --c-good-line: #2f5a4a;
  --c-warn-text: #e7c398; /* A's amber lifted: 7.82:1 on its tint, 7.70:1 on the chip */
  --c-warn-fill: #b2742a; /* A's warn fill: 3.74:1 on the surface, 3.30:1 on the chip */
  --c-warn-bg: #3c2f20;
  --c-warn-line: #725737;
  --c-danger-text: #e7ada6; /* A's brick lifted: 7.25:1 on its tint, 6.65:1 on the chip */
  --c-danger-fill: #db8076; /* A's #a8382c lifted to clear 3:1 on navy: 5.08:1 on the surface */
  --c-danger-bg: #3e2623;
  --c-danger-line: #73403a;
  --c-info-text: #e8b49c; /* A's rust lifted: 7.48:1 on its tint, 6.96:1 on the chip */
  --c-info-bg: #3c2920;
  --c-info-line: #724937;
  --c-chip: #24324f;
  --c-chip-text: #ddd6c8; /* 8.84:1 */
  --c-scrim: rgba(2, 6, 23, .72);
  --c-hatch: rgba(255, 255, 255, .03);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2bcb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7c398' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16v.5'/%3E%3C/svg%3E");

  /* ---- stage accents: bars and dots only, never text; palette A's ONE muted set reads on navy and light ---- */
  --stage-new: #5b85b0;
  --stage-contacted: #7878ad;
  --stage-quoted: #c8622d;
  --stage-signed: #5b916c;
  --stage-rig: #4a8a96;
  --stage-done: #8c8477;
  --stage-visit: #9272a8;
  --stage-abandoned: #83878c;
  --stage-follow: #a8822e;
  --stage-lost: #c45f62;
  --stage-nofit: #747b8a;

  /* ---- type: system faces only ---- */
  --font-ui: "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-1: 13px; /* captions, chips, meta - the floor (contract 5.3: text >= 13 px) */
  --fs-2: 14px; /* body */
  --fs-3: 15px; /* card titles */
  --fs-4: 17px; /* section and dialog titles */
  --fs-5: 21px; /* page titles */
  --fs-6: 27px; /* sign-in headline */
  --lh-tight: 1.25;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  /* ---- space: a 4 px rhythm ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --gutter: 24px;
  --topbar-h: 56px;

  /* ---- shape (brand radii 10 / 14 / 20 / 26) ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- elevation (the brand's shadow shapes, deepened for a dark screen; the accent CTA glow) ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .22);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 40px -12px rgba(0, 0, 0, .6);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, .4), 0 30px 60px -18px rgba(0, 0, 0, .72);
  --shadow-glow: 0 4px 12px -4px rgba(176, 77, 30, .45);
  --shadow-glow-sm: 0 4px 12px -4px rgba(176, 77, 30, .45);

  /* ---- motion: the brand curve; every duration drops to 0 under reduced motion ---- */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 320ms;

  /* ---- layers (dialogs use the browser's top layer) ---- */
  --z-raised: 1;
  --z-sticky: 20;
  --z-pop: 40;
  --z-ghost: 60;
  --z-toast: 70;
}

/* The LIGHT set: paper. A printed board or lead is a white page (his ink law); every pair is contrast-checked. */
@media print {
  :root {
    color-scheme: light;
    --c-canvas: #ffffff;
    --c-surface: #ffffff;
    --c-surface-2: #f8fafc;
    --c-column: #f1f5f9;
    --c-column-line: #dde3eb;
    --c-line: #e2e8f0;
    --c-line-strong: #7c8aa0; /* 3.5:1 on white */
    --c-hover: rgba(15, 23, 42, .06);
    --c-text: #0f172a; /* 17.9:1 */
    --c-text-2: #334155;
    --c-text-3: #475569; /* 7.6:1 on white, 6.9:1 on the column */
    --c-placeholder: #64748b;
    --c-link: #c2410c; /* amber-700 text, 5.18:1 */
    --c-focus: #c2410c;
    --c-accent-line: #ea580c;
    --c-good-text: #15803d; /* 4.8:1 on its tint */
    --c-good-fill: #16a34a;
    --c-good-bg: #f0fdf4;
    --c-good-line: #bbf7d0;
    --c-warn-text: #c2410c; /* 4.9:1 on cream */
    --c-warn-fill: #f97316;
    --c-warn-bg: #fff7ed;
    --c-warn-line: #fed7aa;
    --c-danger-text: #b91c1c; /* 5.9:1 on its tint */
    --c-danger-fill: #dc2626;
    --c-danger-bg: #fef2f2;
    --c-danger-line: #fecaca;
    --c-info-text: #9a3412; /* 6.9:1 on cream */
    --c-info-bg: #fff7ed;
    --c-info-line: #fed7aa;
    --c-chip: #f1f5f9;
    --c-chip-text: #334155;
    --c-scrim: rgba(15, 23, 42, .55);
    --c-hatch: rgba(15, 23, 42, .045);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16v.5'/%3E%3C/svg%3E");
    --stage-new: #0284c7;
    --stage-contacted: #4f46e5;
    --stage-quoted: #ea580c;
    --stage-signed: #16a34a;
    --stage-rig: #0d9488;
    --stage-done: #0f172a;
    --stage-visit: #7c3aed;
    --stage-abandoned: #64748b;
    --stage-follow: #ca8a04;
    --stage-lost: #dc2626;
    --stage-nofit: #94a3b8;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---- END the S0a token block ---- */

/* ---- S0b extensions (contract 5.2) ---- */
:root {
  /* The PAPER card: a document shown on a screen (the agreement on the signing page, a frozen statement) is
     white paper inside the dark shell - the same white reportlab draws the PDF on. */
  --c-paper: #ffffff;
  --c-paper-text: #0f172a; /* 17.85:1 */
  --c-paper-muted: #475569; /* 7.58:1 - also the boundary of every control on paper */
  --c-paper-link: #c2410c; /* 5.18:1 - also the focus ring on paper */
  --c-paper-line: #e2e8f0; /* hairlines only (1.23:1) */
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, .35), 0 24px 48px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06);

  /* Wave 8 BRAND, re-cut to palette A (owner 2026-10-02): the wordmark's accent ink on navy, a NEW
     name - never a redefinition of an S0a one (test_no_later_rule_redefines_an_s0a_token). WCAG 2.x: 8.44:1
     on --navy #121c32 (the app bar/appbar/public bar background), 7.96:1 on --c-canvas #16213a - both clear
     the 4.5:1 AA floor for the 13px/650 text it is used on (the focus ring and the gradient rule, app.css). */
  --c-brand-accent: #e9a97f;

  /* The Kyle app, 390 px first. */
  --tabbar-h: 64px;
  --tap: 44px; /* the smallest touch target on a phone or a coarse pointer */
  --ring-size: 112px; /* the accept-clock ring */
  --hero-fs: 40px; /* the MONEY hero number */

  /* Glyphs: 24 px line icons as data-URI masks. .ico paints a glyph in currentColor (components.css), so an
     icon always carries its text's colour and contrast. Decorative only: the words beside it carry the meaning. */
  --glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --glyph-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --glyph-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16v.5'/%3E%3C/svg%3E");
  --glyph-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.5'/%3E%3C/svg%3E");
  --glyph-offline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5a16 16 0 0 1 20 0M5.5 12.5a10.5 10.5 0 0 1 13 0M9 16.5a5 5 0 0 1 6 0M12 20h.5M3 3l18 18'/%3E%3C/svg%3E");
  --glyph-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --glyph-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E");
  --glyph-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --glyph-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --glyph-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  --glyph-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l2 3h4l2-3h5'/%3E%3Cpath d='M5.5 5h13L21 13v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z'/%3E%3C/svg%3E");
  --glyph-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --glyph-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  --glyph-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --glyph-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l2 5-2.5 1.5a11 11 0 0 0 5.5 5.5l1.5-2.5 5 2V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  --glyph-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  --glyph-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --glyph-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 4.5-9 4.5-9-4.5zM3 12l9 4.5 9-4.5M3 16.5l9 4.5 9-4.5'/%3E%3C/svg%3E");
  --glyph-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M16.5 14h.5'/%3E%3C/svg%3E");
  --glyph-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --glyph-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --glyph-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  --glyph-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5'/%3E%3C/svg%3E");
  --glyph-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  --glyph-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M8 17v-5'/%3E%3Cpath d='M13 17V8'/%3E%3Cpath d='M18 17v-8'/%3E%3C/svg%3E");
}

/* ---- The two surface families (owner ruling 2026-10-02: screens MIX navy frames and light work surfaces).
   NEW names only - the S0a block above is pinned verbatim. components.css maps the semantic --c-* names to
   one family per surface: the LIGHT SCOPE (#main, .swath-light, .on-light, .paper, the board's cards, the Kyle
   app, the signing stage) takes --l-*, the NAVY SCOPE (.swath-navy, .on-navy, the top bar, the tab bar, the
   drawer head, toasts) takes the S0a navy grounds with the brightened --n-* ink - never gray body text on
   navy. Every pair below is proven by tests/design_contrast_test.py. ---- */
:root {
  /* the light family (palette A "Harbor Cream"): a warm cream canvas, ivory cards - never pure white on a
     screen; a document's PAPER stays --c-paper white - and navy ink */
  --l-canvas: #fff7ed; /* the page ground of a light swath - the website's cream (owner 2026-10-05) */
  --l-surface: #faf7f0; /* cards and inputs (ivory) */
  --l-surface-2: #f6f2ea; /* an inset well, a dialog foot */
  --l-column: #ebe5d8; /* table heads, the segmented track, a quiet well */
  --l-column-line: #e3dccd;
  --l-line: #e3dccd; /* hairlines only */
  --l-line-strong: #8a7f6e; /* control boundaries: 3.67:1 on the card, 3.40:1 on the canvas, 3.13:1 in a well */
  --l-hover: rgba(15, 23, 42, .06);
  --l-text: #18233a; /* ink: 14.64:1 on the card, 13.54:1 on the canvas */
  --l-text-2: #343c4e; /* the secondary ink: 10.32:1 on the card, 9.54:1 on the canvas */
  --l-text-3: #4d5360; /* captions and meta: 7.21:1 on the card, 6.67:1 on the canvas */
  --l-placeholder: #6b6f78; /* 4.71:1 on the card */
  --l-link: #9e4119; /* the rust deepened for text: 6.09:1 on the card, 5.63:1 on the canvas */
  --l-focus: #9e4119; /* the focus ring on light: 6.09:1 */
  --l-accent-line: #c8622d; /* the accent as a boundary: 3.75:1 on the card */
  --l-good-text: #285c3b; /* 6.46:1 on its tint, 7.31:1 on the card */
  --l-good-fill: #4f8a5e;
  --l-good-bg: #e4ecdc;
  --l-good-line: #bfd2b8;
  --l-warn-text: #7a3f10; /* 6.72:1 on its tint, 7.71:1 on the card */
  --l-warn-fill: #b2742a;
  --l-warn-bg: #f5e6cf;
  --l-warn-line: #e2c39a;
  --l-danger-text: #8f2a22; /* 6.40:1 on its tint, 7.78:1 on the card */
  --l-danger-fill: #a8382c; /* ivory on it 6.01:1 (a danger button on light is ivory on red) */
  --l-danger-bg: #f4ddd5;
  --l-danger-line: #e2b4a8;
  --l-info-text: #8c3d17;
  --l-info-bg: #f4e3d3;
  --l-info-line: #e4bfa0;
  --l-chip: #e8e1d3;
  --l-chip-text: #343c4e; /* 8.49:1 */
  /* a job tag's own colour (owner 2026-10-15): one fill + ink pair per tag name - the ink on its own fill,
     counted with the WCAG 2.x formula the tests use: slate 9.20, amber 6.51, green 8.30, blue 8.49,
     red 6.80, violet 7.57. The first six names mc/vocab.py's TAG_COLORS already stores. */
  --l-tag-slate-bg: #eef2f6;
  --l-tag-slate-ink: #334155;
  --l-tag-amber-bg: #fdf0c9;
  --l-tag-amber-ink: #7c4a06;
  --l-tag-green-bg: #dcfce7;
  --l-tag-green-ink: #14532d;
  --l-tag-blue-bg: #dbeafe;
  --l-tag-blue-ink: #1e3a8a;
  --l-tag-red-bg: #fee2e2;
  --l-tag-red-ink: #991b1b;
  --l-tag-violet-bg: #ede9fe;
  --l-tag-violet-ink: #5b21b6;
  --l-scrim: rgba(7, 13, 26, .55);
  --l-hatch: rgba(15, 23, 42, .045);
  --l-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d5360' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --l-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a3f10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5M12 16v.5'/%3E%3C/svg%3E");
  --l-stage-new: #5b85b0;
  --l-stage-contacted: #7878ad;
  --l-stage-quoted: #c8622d;
  --l-stage-signed: #5b916c;
  --l-stage-rig: #4a8a96;
  --l-stage-done: #8c8477;
  --l-stage-visit: #9272a8;
  --l-stage-abandoned: #83878c;
  --l-stage-follow: #a8822e;
  --l-stage-lost: #c45f62;
  --l-stage-nofit: #747b8a;
  /* soft elevation for a light surface: a hairline of warm shadow, never a dark halo */
  --l-shadow-1: 0 1px 2px rgba(60, 45, 20, .05), 0 2px 8px -2px rgba(60, 45, 20, .09);
  --l-shadow-2: 0 2px 4px rgba(60, 45, 20, .06), 0 12px 24px -8px rgba(60, 45, 20, .14);
  --l-shadow-3: 0 8px 16px -6px rgba(60, 45, 20, .12), 0 24px 48px -12px rgba(60, 45, 20, .24);

  /* the navy family's INK on the S0a grounds (palette A: #16213a canvas; #1c2944 column, surface and
     surface-2) - cream ink, so nothing on navy reads gray */
  --n-text: #f6f1e7; /* 14.21:1 on the canvas, 12.87:1 on the surface */
  --n-text-2: #ddd6c8; /* 11.07:1 on the canvas, 10.02:1 on the surface */
  --n-text-3: #c2bcb0; /* 8.47:1 on the canvas, 7.66:1 on the surface - the quietest ink allowed on navy */
  --n-chip-text: #ddd6c8; /* 8.84:1 on the chip */
  --n-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2bcb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --n-rule: #33415e; /* a hairline on navy */
  --n-rule-strong: #6c7892; /* a control edge on navy: 3.61:1 on the canvas, 3.83:1 on the bar */
  --n-hover: rgba(255, 255, 255, .08);

  /* the accent INK on navy (palette A, the same value as --c-brand-accent above): eyebrows, the wordmark,
     the current-nav underline and accent edges on navy (7.96:1 on the canvas, 8.44:1 on --navy);
     an accent edge on LIGHT is --l-accent-line and text on light is --l-link - never this */
  --c-brand: #e9a97f;
  --c-on-danger: #121c32; /* the ink on the danger fill: the bar navy on the navy set's #db8076 (5.95:1),
                             ivory on light */

  /* the type scale above the S0a sizes: hero and display */
  --fs-7: 30px; /* page title in a hero swath */
  --fs-8: 38px; /* a display figure */
  --lh-display: calc(11 / 10);

  /* swath rhythm (the 4 px grid continued) and page widths */
  --sp-12: 48px;
  --sp-16: 64px;
  --swath-y: var(--sp-12); /* the vertical padding of a swath - generous on a desk, tighter on a phone */
  --page-w: 1200px; /* a page root sets its own */
}

@media (max-width: 767px) {
  :root {
    --fs-7: 26px;
    --fs-8: 32px;
    --swath-y: var(--sp-8);
  }
}

/* Paper prints flat. */
@media print {
  :root {
    --shadow-paper: none;
  }
}

/* Every amount, count, time and reading: tabular figures of the UI face, so a column of numbers aligns. */
.num {
  font-variant-numeric: tabular-nums;
}