/* ProStar console design tokens: the navy system (adopted 2026-09-24).
   The ONLY source of colour, type, spacing, radius, shadow and board-metric values
   for new or changed UI. Standard: docs/design-system/README.md.
   Decision: docs/decisions/0011-ui-design-system.md. Locked decisions D1-D23 are
   reproduced in the standard; review evidence lives in
   ~/PSM-audits/visual-design-2026-09-23/ (final design: directions/A13-navy/).

   Rules
   - Reference these with var(--ds-*). Never paste a hex value, font size, weight
     or radius into a component rule; tools/design/check-ui.mjs rejects it.
   - Two layers. BRAND tokens (--ds-brand-*, --ds-chrome-*, --ds-action-*, ...) are
     the only values a second brand changes. SYSTEM neutrals are the brand ink mixed
     into the brand paper (color-mix), so the whole grey ramp re-derives per brand.
   - Hex values in comments are the computed ProStar result, for reference only.
   - Every text/non-text pair is WCAG-measured on the computed hex
     (A13 src/contrast-report.txt, 0 fails); floors are listed in the standard, section 9. */

/* Inter: the one text face (every number included, tabular figures; D2).
   Only 400 / 500 / 600 are part of the system. The 700 file stays for old screens. */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* Saira Semi Condensed 600 (ProStar style guide p.7): titles only (D3). `block` so a
   title never flashes in the fallback face and re-flows. */
@font-face { font-family: 'Saira Semi Condensed'; src: url('fonts/SairaSemiCondensed-600.woff2') format('woff2'); font-weight: 600; font-display: block; }

:root {
  /* ══ BRAND ═════════════════════════════════════════════════════════════════ */
  --ds-brand-ink:          #0b1d36;   /* ProStar print navy: text ink and the root of every neutral */
  --ds-brand-paper:        #f5f6f8;   /* page canvas and base of every neutral. Owner 2026-09-25 picked V1 "white workspace": cool neutral replaced D5 warm paper #f1f0ed */
  --ds-chrome:             #0b1d36;   /* top bar, record strip and stage bar (one fused navy chrome) */
  --ds-chrome-raise:       #183153;   /* the ONE active style on chrome: active nav item, lit record tab, pressed segment, user avatar */
  --ds-chrome-field:       #122745;   /* search / select fill on chrome */
  --ds-chrome-line:        #20395d;   /* 1px inner shadow between the top bar and the record strip (D22a) */
  --ds-chrome-edge:        #7f93b1;   /* control outlines and key hints on chrome (5.40:1) */
  --ds-chrome-fg:          #ffffff;   /* active labels, logo, titles on chrome */
  --ds-chrome-fg-2:        #b4c1d5;   /* stage-tab labels, chrome control text (9.27:1) */
  --ds-chrome-fg-3:        #8a9dba;   /* counts, placeholders, chrome icons (6.12:1) */
  --ds-chrome-dim:         color-mix(in srgb, #ffffff 62%, var(--ds-chrome));   /* #a2a9b3 inactive nav + record-tab text (7.13:1) */
  --ds-chrome-dirty:       #e3a84e;   /* unsaved-edit dot on a record tab (D18) */
  --ds-action:             #0b1d36;   /* the one primary action per screen (D7) */
  --ds-action-hover:       #1a3257;   /* primary hover: one visible step lighter (white 12.82:1) */
  --ds-action-press:       #050f1e;   /* primary pressed: one step darker (white 19.20:1) */
  --ds-action-fg:          #ffffff;   /* primary label */
  --ds-selection:          #0b1d36;   /* 3px selection rail, selected block ring */
  --ds-now:                #0b1d36;   /* board now-line and now pill (D4) */
  --ds-focus:              #3d6fc4;   /* the single 2px focus ring: a clear blue, never the button navy (4.32:1 on paper) */
  --ds-brand-display-font: 'Saira Semi Condensed';   /* display face slot (D3); a second brand swaps it */
  --ds-display-weight:     600;       /* the display face is used at 600 only */
  --ds-display-track:      -0.012em;  /* display letter-spacing (d1); d2 uses -0.004em */
  --ds-brand-name:         'Pro Star Mechanical';   /* content: var() for the brand avatar byline */
  --ds-brand-license:      ' · CSLB #1044879';      /* licence line after the brand name */
  --ds-brand-logo:         url('assets/prostar-logo-white.png');   /* D6 white logo on navy. File to add to static/contract-ops-v2/assets/ with the first chrome release (source: ~/PSM-audits/visual-design-2026-09-23/assets/) */
  --ds-brand-logo-w:       128px;     /* logo box width in the top bar */
  --ds-brand-logo-h:       28px;      /* logo box height in the top bar */
  --ds-brand-logo-nudge:   -3px;      /* optical: the star rises above the wordmark, so the box lifts 3px */
  --ds-brand-wordmark:     '';        /* text wordmark for a brand without an image logo */
  --ds-brand-mark:         url('assets/prostar-star-white.png');   /* the star: brand avatar + empty state only (D6) */
  --ds-brand-mark-text:    '';        /* text mark for a brand without an image mark */

  /* ══ SYSTEM: warm-paper neutrals (navy ink mixed into the paper, D5) ════════ */
  --ds-strip:        var(--ds-chrome);   /* D22a: record strip is the same navy as the top bar */
  --ds-surface:      #ffffff;            /* raised things only: blocks, open record, inputs, hover card, email thumbnail */
  --ds-canvas:       var(--ds-brand-paper);                                          /* #f1f0ed page, side panels, footers, board grid */
  --ds-wash:         color-mix(in srgb, var(--ds-brand-paper) 45%, #ffffff);        /* #f9f8f7 done block, between white and paper */
  --ds-hair:         color-mix(in srgb, var(--ds-brand-ink) 5%,  var(--ds-brand-paper));   /* #e6e5e4 light dividers, half-hour gridlines, Dense row lines */
  --ds-line:         color-mix(in srgb, var(--ds-brand-ink) 11%, var(--ds-brand-paper));   /* #d8d9d9 section rules, frames, hour gridlines, row lines */
  --ds-rule:         color-mix(in srgb, var(--ds-brand-ink) 22%, var(--ds-brand-paper));   /* #bec2c5 0.5px list-row rules (one device pixel at 2x) */
  --ds-field:        color-mix(in srgb, var(--ds-brand-ink) 56%, var(--ds-brand-paper));   /* #707a87 control borders, total rules (>= 3:1 on white, wash, paper) */
  --ds-field-quiet:  color-mix(in srgb, var(--ds-brand-ink) 52%, var(--ds-brand-paper));   /* #79828e scheduled/done block edge (D20: >= 3:1) */
  --ds-icon:         color-mix(in srgb, var(--ds-brand-ink) 62%, var(--ds-brand-paper));   /* #626d7c icons, separators "·" */
  --ds-ink:          var(--ds-brand-ink);                                                   /* #0b1d36 titles, values, body */
  --ds-ink-2:        color-mix(in srgb, var(--ds-brand-ink) 80%, var(--ds-brand-paper));   /* #39475b secondary text, every status word */
  --ds-ink-3:        color-mix(in srgb, var(--ds-brand-ink) 70%, var(--ds-brand-paper));   /* #505c6d tertiary text, caps labels (>= 4.5:1 on every surface) */
  --ds-sel-bg:       color-mix(in srgb, var(--ds-selection) 6%, #ffffff);                  /* #f0f1f3 selected queue item */
  --ds-paper-hover:  color-mix(in srgb, var(--ds-brand-ink) 3.5%, var(--ds-brand-paper)); /* #e9e9e7 hover on a paper row / secondary button */
  --ds-tint:         color-mix(in srgb, var(--ds-brand-ink) 5%, var(--ds-brand-paper));   /* #e6e5e4 neutral banner fill (D16) */
  --ds-thumb:        color-mix(in srgb, var(--ds-brand-ink) 7%, var(--ds-brand-paper));   /* #e1e1e0 photo placeholder tile (D11) */
  --ds-skeleton:     color-mix(in srgb, var(--ds-brand-ink) 14%, var(--ds-brand-paper));  /* #d1d2d3 loading bar, first line (second line uses --ds-line) */
  --ds-tag-bg:       color-mix(in srgb, var(--ds-chrome-raise) 20%, #ffffff);             /* #d1d6dd D23 stamped equipment tag fill (ink on it 11.56:1) */
  --ds-disabled-bg:  var(--ds-canvas);                                                      /* disabled secondary control fill */
  --ds-disabled-fg:  color-mix(in srgb, var(--ds-brand-ink) 60%, var(--ds-brand-paper));   /* #67717f disabled label (4.34:1) */
  --ds-disabled-bd:  color-mix(in srgb, var(--ds-brand-ink) 50%, var(--ds-brand-paper));   /* #7e8692 disabled outline (3.20:1) */
  --ds-disabled-primary-bg: color-mix(in srgb, var(--ds-action) 12%, var(--ds-brand-paper)); /* #d5d7d7 disabled primary: pale navy, never reads as a secondary */
  --ds-disabled-primary-fg: color-mix(in srgb, var(--ds-brand-ink) 66%, var(--ds-brand-paper)); /* #596574 disabled primary label */
  --ds-scrim:        color-mix(in srgb, var(--ds-canvas) 66%, transparent);               /* D10/D22b: dims the board grid behind the hover card (queue stays full strength) */
  --ds-pop-edge:     rgba(11, 29, 54, 0.18);   /* hairline edge of a popover caret */

  /* ══ SYSTEM: status (glyph colour / word-on-tint ink / soft tint / block edge) ═ */
  --ds-st-sched:     #767f8b;   /* scheduled ring (4.05:1 on white) */
  --ds-st-route:     #b0721a;   --ds-st-route-ink: #774a08;   --ds-st-route-bg: #f7eedc;   --ds-st-route-bd: #a9812f;   /* en route, due soon, for review */
  --ds-st-site:      #2f6cb8;   --ds-st-site-ink:  #1f4a82;   --ds-st-site-bg:  #e7edf5;   --ds-st-site-bd:  #5d80b0;   /* on site */
  --ds-st-done:      #3a7a58;   --ds-st-done-ink:  #2b6446;   --ds-st-done-bg:  #e6f0ea;                                /* done, completed, sent */
  --ds-st-late:      #b93a2e;   --ds-st-late-ink:  #9c2f24;   --ds-st-late-bg:  #f9e9e6;   --ds-st-late-bd:  #c4655b;   /* late, overdue, failed, overlap, error */
  --ds-blk-late-bg:  color-mix(in srgb, var(--ds-st-late) 17%, var(--ds-surface));     /* #f3dedb late visit block: the strongest tint on the board */
  --ds-blk-route-bg: color-mix(in srgb, var(--ds-st-route-bg) 55%, var(--ds-surface)); /* #fbf6ec en-route visit block: steps back behind late */
  --ds-board-past:   color-mix(in srgb, var(--ds-paper-hover) 45%, var(--ds-canvas));  /* past time on the board grid */
  --ds-board-offhours: #edf0f4;  /* V1: after-hours shading on the white board (grid lines stay visible over it) */
  --ds-grid-hour:      #d3d9e0;  /* V1: hour gridline, visible on white and on after-hours */
  --ds-grid-half:      #e0e4ea;  /* V1: half-hour gridline */
  --ds-e-float:        0 1px 2px rgba(11,29,54,.05), 0 3px 10px rgba(11,29,54,.06);  /* V1: soft lift for white cards on the page tone */
  /* role aliases (ok / warn / bad / info / idle) for code written against the 2026-09-23 names */
  --ds-ok:   var(--ds-st-done);  --ds-ok-ink:   var(--ds-st-done-ink);  --ds-ok-soft:   var(--ds-st-done-bg);  --ds-ok-pill-ink: var(--ds-st-done-ink);
  --ds-warn: var(--ds-st-route); --ds-warn-ink: var(--ds-st-route-ink); --ds-warn-soft: var(--ds-st-route-bg); --ds-warn-line: var(--ds-st-route-bd);
  --ds-bad:  var(--ds-st-late);  --ds-bad-ink:  var(--ds-st-late-ink);  --ds-bad-soft:  var(--ds-st-late-bg);  --ds-bad-line:  var(--ds-st-late-bd);
  --ds-info: var(--ds-st-site);  --ds-info-ink: var(--ds-st-site-ink);  --ds-info-soft: var(--ds-st-site-bg);
  --ds-idle: var(--ds-st-sched); --ds-idle-ink: var(--ds-ink-2);        --ds-idle-soft: var(--ds-tint);

  /* ══ Type ═══════════════════════════════════════════════════════════════════
     Desktop (6 sizes): 11 caps/tag · 12 meta · 13 body · 14 row + section title · 20 display page · 28 display record
     Phone (4 sizes):   14 meta · 16 body · 20 section/name · 32 display visit title
     Weights: 400 · 500 · 600 only. Display face only at 600 and only where D3 says. */
  --ds-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;   /* everything, every number */
  --ds-display:  var(--ds-brand-display-font), 'Inter', sans-serif;   /* D3: page title / board date, open record title, phone visit title. Nothing else */
  --ds-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* diagnostic text only (raw logs in admin tools); never product UI */
  --ds-features: 'cv11', 'ss01', 'calt' 0;   /* Inter: single-storey a, open digits; body font-feature-settings */
  --ds-nums:     tabular-nums lining-nums;   /* D2: set on body; every number is tabular */
  --ds-text-caps: 11px;  --ds-lh-caps: 16px;   /* UPPERCASE table column heads only; the stamped tag; now pill */
  --ds-text-sm:   12px;  --ds-lh-sm:   16px;   /* meta, status words, pills, board block text, axis hours, record tabs */
  --ds-text-base: 13px;  --ds-lh-base: 20px;   /* body, buttons, inputs, nav, stage tabs, table cells */
  --ds-text-md:   14px;  --ds-lh-md:   20px;   /* list-row title, section title (.h3), hover-card site name, sticky-bar record */
  --ds-text-d2:   20px;  --ds-lh-d2:   24px;   /* display: page title / board date (D3) */
  --ds-text-d1:   28px;  --ds-lh-d1:   32px;   /* display: open record title (Jobs expansion, quote) (D3) */
  --ds-text-p-meta: 14px; --ds-lh-p-meta: 20px;   /* phone: meta, labels, status */
  --ds-text-p-body: 16px; --ds-lh-p-body: 24px;   /* phone: body, buttons, list rows */
  --ds-text-p-d2:   20px; --ds-lh-p-d2:   24px;   /* phone: header name, section title */
  --ds-text-p-d1:   32px; --ds-lh-p-d1:   36px;   /* phone: display visit title (D3) */
  --ds-text-av:     10px;   /* avatar initials inside a 24px disc only */
  --ds-w-regular: 400;   /* body, values */
  --ds-w-medium:  500;   /* buttons, nav, status words, section heads in a record */
  --ds-w-semi:    600;   /* titles, site names, primary label, caps, totals */
  --ds-track-caps:  0.06em;    /* caps labels */
  --ds-track-tag:   0.05em;    /* stamped tag */
  --ds-track-sm:    0.004em;   /* 12px text */
  --ds-track-base: -0.003em;   /* 13px text */
  --ds-track-tight: -0.011em;  /* 14px titles */
  --ds-track-p:    -0.014em;   /* phone titles */

  /* ══ Spacing: 4px grid; 24px page gutter ════════════════════════════════════ */
  --ds-s-1: 4px;  --ds-s-2: 8px;  --ds-s-3: 12px; --ds-s-4: 16px; --ds-s-5: 20px;
  --ds-s-6: 24px; --ds-s-8: 32px; --ds-s-10: 40px; --ds-s-12: 48px;
  --ds-gutter: 24px;   /* left/right padding of every bar, list, queue and action bar */

  /* ══ Sizes ══════════════════════════════════════════════════════════════════ */
  --ds-bar-h: 48px;          /* top bar */
  --ds-rec-h: 30px;          /* D18 record-tab strip (tabs 24px) */
  --ds-sub-h: 40px;          /* stage bar (folder tabs 32px); chrome total 118px */
  --ds-tab-h: 32px;          /* stage folder tab */
  --ds-rtab-h: 24px;         /* record tab */
  --ds-control-h: 32px;      /* buttons, inputs, selects, chrome controls */
  --ds-primary-h: 40px;      /* the primary button in the sticky action bar (.lg) */
  --ds-actionbar-h: 64px;    /* D19 sticky action bar */
  --ds-row-h: 64px;          /* Jobs list row (two lines) */
  --ds-lhead-h: 40px;        /* list header */
  --ds-tag-h: 18px;          /* stamped tag (16px inside a board block, 22px on phone) */
  --ds-pill-h: 24px;         /* status pill (28px on phone) */
  --ds-glyph: 12px;          /* status glyph (D14), 1.5px strokes */
  --ds-touch-h: 48px;        /* phone targets (never under 44px) */
  --ds-touch-primary: 56px;  /* phone primary in the thumb zone */
  --ds-phone-bar-h: 98px;    /* phone sticky bar incl. home indicator */
  --ds-ico: 16px; --ds-ico-lg: 20px; --ds-ico-xl: 24px;   /* icons: 1.5px stroke at every size */
  --ds-page-min: 1180px;     /* desktop min width; phone layout below 760px */

  /* ══ Radius ═════════════════════════════════════════════════════════════════ */
  --ds-r-tag:   2px;    /* D23 stamped tag, record-tab lit bar, skeleton bars */
  --ds-r-block: 3px;    /* visit block (D20: weight comes down by radius, not contrast) */
  --ds-r-sm:    4px;    /* pills, key hint, now pill, toast undo, segment inside a control */
  --ds-r-md:    6px;    /* buttons, inputs, selects, nav items, record tabs, banner, toast, email frame */
  --ds-r-lg:    8px;    /* hover card, stage folder tab top corners, phone cards + primary, photo tiles, state frames */
  --ds-r-full:  999px;  /* avatars, dots */
  --ds-rule-hair: 0.5px;   /* list-row rule width */

  /* ══ Elevation: flat surfaces; shadow only on floating layers and the primary ══ */
  --ds-e-pop: 0 0 0 0.5px rgba(11, 29, 54, 0.18), 0 1px 2px rgba(11, 29, 54, 0.06), 0 12px 28px -6px rgba(11, 29, 54, 0.20);   /* hover card, menus, toast */
  --ds-e-bar: 0 -1px 0 var(--ds-line), 0 -1px 2px rgba(11, 29, 54, 0.04), 0 -8px 18px -8px rgba(11, 29, 54, 0.14);   /* sticky bars: 1px top edge + soft upward shadow */
  --ds-e-primary: 0 1px 0 rgba(11, 29, 54, 0.22);            /* D17 primary: one subtle 1px shadow */
  --ds-e-primary-press: inset 0 1px 1px rgba(0, 0, 0, 0.30); /* D17 primary pressed: the shadow moves inside */
  --ds-e-secondary: inset 0 0 0 1px var(--ds-field);         /* D17 secondary: flat, one 1px line */
  --ds-e-chrome: inset 0 -0.5px 0 rgba(255, 255, 255, 0.10); /* phone header bottom edge */
  --ds-e-toast: inset 0 1px 0 rgba(255, 255, 255, 0.08);     /* toast top highlight (with --ds-e-pop) */
  --ds-e-blk-sel: 0 2px 6px -2px rgba(11, 29, 54, 0.30);     /* selected visit block lift (with its 2px selection ring) */
  --ds-focus-w: 2px;     /* D17 focus ring width: an outline, so the box never moves */
  --ds-focus-off: 2px;   /* D17 focus ring offset outside the control */
  --ds-focus-ring: 0 0 0 2px var(--ds-surface), 0 0 0 4px var(--ds-focus);   /* shadow form of the same ring, where an outline cannot draw */

  /* ══ Avatars: four low-chroma tints mixed from the ink; never a status hue ══ */
  --ds-av-1: color-mix(in srgb, var(--ds-brand-ink) 9%,  #ffffff);   /* #e9ebed */
  --ds-av-2: color-mix(in srgb, var(--ds-brand-ink) 9%,  var(--ds-brand-paper));   /* #dcdddd */
  --ds-av-3: color-mix(in srgb, var(--ds-brand-ink) 14%, #f3f4f6);   /* V1: cool base (was warm #f4f3f0) */
  --ds-av-4: color-mix(in srgb, var(--ds-brand-ink) 5%,  #e6e8ec);   /* V1: cool base (was warm #e8e7e3) */

  /* ══ Dispatch board metrics (Schedules; reference/board.js is the renderer) ═══
     Axis 7 AM-5 PM. Rows are equal height and fill the board (Comfortable 78px at 9
     technicians, Compact 44px at 16, Dense 30px at 22 on 1440x900). */
  --ds-board-start: 7;           /* first hour on the axis */
  --ds-board-end: 17;            /* last hour on the axis */
  --ds-board-pad: 16px;          /* lane padding before the first and after the last hour */
  --ds-board-who-w: 208px;       /* technician column */
  --ds-board-queue-w: 304px;     /* work queue column */
  --ds-board-visit-gap: 2px;     /* a block ends 2px before the next visit; its 1px edge sits on its start gridline */
  --ds-board-now-w: 1.5px;       /* D4 now-line */
  --ds-board-glyph-gap: 6px;     /* status glyph to text (Dense 4px) */
  --ds-board-mark-only: 44px;    /* D1: under ~44px inner width a block shows its status mark only */
  --ds-board-half-min: 17px;     /* D9: an overlap half-lane is never shorter */
  /* Comfortable: three-line blocks ([glyph] [word ·] 9:30-10:00 + tag / site name 1-2 lines / #job · scope) */
  --ds-board-axis-h: 44px;       --ds-board-foot-h: 36px;
  --ds-board-inset: 6px;         /* block inset from the row edge */
  --ds-board-lane-gap: 5px;      /* gutter between two overlap lanes (the only place the hatch is drawn) */
  --ds-board-pad-t: 6px;  --ds-board-pad-b: 4px;  --ds-board-pad-x: 8px;   /* block padding (Comfortable + Compact) */
  --ds-board-line1-h: 16px;  --ds-board-name-lh: 15px;  --ds-board-job-lh: 16px;   /* D21 fixed line slots */
  --ds-board-qg-h: 32px;         /* queue group header */
  /* Compact: two lines (glyph + time + tag / site name) */
  --ds-board-axis-h-compact: 40px;  --ds-board-foot-h-compact: 32px;
  --ds-board-inset-compact: 2px;    --ds-board-lane-gap-compact: 3px;
  --ds-board-qg-h-compact: 28px;
  /* Dense: one line per block and per technician; name always, never a time (D13) */
  --ds-board-row-max-dense: 32px;   /* rows = min(32px, board height / technicians) */
  --ds-board-row-min-dense: 28px;   /* never below; a conflict row is 2x (D9 amended) */
  --ds-board-foot-h-dense: 32px;
  --ds-board-inset-dense: 3px;      --ds-board-lane-gap-dense: 6px;
  --ds-board-pad-x-dense: 4px;      /* also the side padding of every half-lane */
  --ds-board-glyph-gap-dense: 4px;
  --ds-board-qg-h-dense: 28px;

  /* ══ Motion ═════════════════════════════════════════════════════════════════ */
  --ds-ease: cubic-bezier(.2, 0, 0, 1);  --ds-fast: 120ms;  --ds-base: 180ms;   /* opening, closing, moving only; honour prefers-reduced-motion */
}