/* ─────────────────────────────────────────────────────────────────────────────
   Edifice Insights — the design system, in one place.

   Every page links this file BEFORE its own <style>, so a page can still
   override anything here; nothing below is a page's business to redefine.

   It exists because the tokens used to be copy-pasted into all nine pages,
   two or three blocks each, under a comment asking the next person to keep
   them in sync. They had already drifted: the login and 403 pages carried 8
   of the 19 tokens, the admin page had lost the warn pair and the mono
   stack, and three pages had dropped "Helvetica Neue" from the sans stack,
   so the same sentence rendered in a different face depending on the tab.
   A stylesheet cannot drift from itself.

   Page-specific components stay in their page. What lives here is what every
   page either uses or should have used: the tokens, the base, the pill, and
   the two accessibility rules that were present on some pages and missing on
   others.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
/* The "framed sheet" style: a neutral #f9fbfc frame (sidebar + top bar), the work on a white sheet,
   borders one tone step, no shadow on anything at rest. Edifice orange is the ONE data hue:
   --accent / --chart-1 go on data and the logo only, never on chrome (nav, chips, buttons).
   #c4623f is 4.07:1 on white and 3.92:1 on the frame; words in the accent use --accent-ink (#a24f30, 5.68:1).
   Status pairs are a pale tint with dark ink of the same hue; --good/--warn/--crit are the text colours.
   Every grey that carries words is 4.5:1 or more on the surface it sits on. */
:root {
  --ground:#f9fbfc; --surface:#fff; --surface-2:#f4f6f8; --active:#ebedee;
  --ink:#131416; --ink-2:#5d5f60; --ink-3:#666869;   /* --ink-3 holds 4.5:1 on the --active fill too (4.77) */
  --rule:#e8eaec; --rule-row:#f0f1f2; --rule-2:#cdced1;
  --accent:#c4623f; --chart-1:var(--accent); --accent-ink:#a24f30; --grid:#e5e5e5;
  --primary:#1d1f20; --on-primary:#fff;
  --good:#1e7b4f; --good-bg:#dcfae5; --good-ink:#04250e;
  --warn:#92400e; --warn-bg:#fffbeb; --warn-ink:#92400e; --warn-line:#fde68a;
  --crit:#c4242a; --crit-bg:#ffedea; --crit-ink:#831c1e;
  --mute-bg:#ebedee; --mute-ink:#353736;
  /* Charts: everything beside the orange main series is grey; trace marks keep one quiet hue. */
  --team:#5d5f60; --ev-trace:#2f70bb;
  /* Initials avatars: a pale tint of the person's own hue (format.ts avatarHue), dark ink of the same hue. */
  --av-s:60%; --av-l:91%; --av-ink-s:45%; --av-ink-l:26%;
  --scrim:rgba(0,0,0,.35);
  /* Only what floats (menus, popovers, dialogs, tooltips) casts a shadow. */
  --shadow:0 1px 3px rgba(0,0,0,.08), 0 12px 32px -8px rgba(0,0,0,.18);
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;

  /* ── Type scale ──────────────────────────────────────────────────────────
     Seven sizes: small 12 · subline 13 · body 14 · section 16 · phone title 20 · title 22 · KPI 28.
     The old step names stay so the pages need no rename; several now land on one size. Nothing under 12. */
  --t-micro:12px;     /* meta, axis ticks, the pill */
  --t-fine:12px;
  --t-small:12px;     /* labels, table heads, axis ticks, the freshness stamp */
  --t-sub:13px;       /* sublines under a name or a figure, hints, pills */
  --t-table:14px;     /* table body */
  --t-body:14px;      /* the base size; body sets it */
  --t-head:16px;      /* section headings */
  --t-title-sm:20px;  /* page title on a phone */
  --t-title:22px;     /* page title */
  --t-metric:28px;    /* a KPI value */

  /* ── Radius ──────────────────────────────────────────────────────────────
     Tight: chip 4, control 6, card 8; the sheet 16; pills full. */
  --r-xs:4px;         /* chips, tags, items inside a control */
  --r-sm:6px;         /* controls: buttons, inputs */
  --r-md:8px;         /* cards, tables, panels, notices */
  --r-sheet:16px;     /* the white sheet in the frame */
  --r-pill:99px;      /* pills */
}

/* Dark: true neutral darks, the frame #000 and the sheet #111 with #2e2e2e lines; two greys that read apart;
   the primary inverted to white; the orange lifted (#e2794d is 6.36:1 on #111). The OS preference applies
   unless the theme switch on <html> says light; the switch's dark choice applies anyway. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#000; --surface:#111; --surface-2:#1a1a1a; --active:#222;
    --ink:#fff; --ink-2:#b4b4b4; --ink-3:#949494;
    --rule:#2e2e2e; --rule-row:#222; --rule-2:#444;
    --accent:#e2794d; --accent-ink:#f2a688; --grid:#2b2b2b;
    --primary:#fff; --on-primary:#000;
    --good:#3fc07a; --good-bg:#172a1d; --good-ink:#3fc07a;
    --warn:#e5a93b; --warn-bg:#2b2414; --warn-ink:#e5a93b; --warn-line:#5c4a1c;
    --crit:#e5566f; --crit-bg:#2c1a20; --crit-ink:#e5566f;
    --mute-bg:#222; --mute-ink:#fff;
    --team:#b4b4b4; --ev-trace:#6a9be0;
    --av-s:30%; --av-l:20%; --av-ink-s:60%; --av-ink-l:84%;
    --scrim:rgba(0,0,0,.6);
    --shadow:0 1px 3px rgba(0,0,0,.5), 0 12px 32px -8px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --ground:#000; --surface:#111; --surface-2:#1a1a1a; --active:#222;
  --ink:#fff; --ink-2:#b4b4b4; --ink-3:#949494;
  --rule:#2e2e2e; --rule-row:#222; --rule-2:#444;
  --accent:#e2794d; --accent-ink:#f2a688; --grid:#2b2b2b;
  --primary:#fff; --on-primary:#000;
  --good:#3fc07a; --good-bg:#172a1d; --good-ink:#3fc07a;
  --warn:#e5a93b; --warn-bg:#2b2414; --warn-ink:#e5a93b; --warn-line:#5c4a1c;
  --crit:#e5566f; --crit-bg:#2c1a20; --crit-ink:#e5566f;
  --mute-bg:#222; --mute-ink:#fff;
  --team:#b4b4b4; --ev-trace:#6a9be0;
  --av-s:30%; --av-l:20%; --av-ink-s:60%; --av-ink-l:84%;
  --scrim:rgba(0,0,0,.6);
  --shadow:0 1px 3px rgba(0,0,0,.5), 0 12px 32px -8px rgba(0,0,0,.7);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* The sticky 48px top bar must not cover a scrollIntoView or #anchor target. */
html{scroll-padding-top:56px}
/* An element with display:flex or inline-flex beats the UA sheet's [hidden] rule,
   so hiding one needs this. */
[hidden]{display:none !important}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:var(--t-body);line-height:20px;-webkit-font-smoothing:antialiased}

/* ── Pill ────────────────────────────────────────────────────────────────── */
/* FOUR states, four names. There were thirteen names across the pages - ok,
   crit, warn, mute, exception, revit-error, repeats, not-tested, issues, open,
   soft, err - for what is really these four, because each page named the pill
   after its own data instead of after what the colour means.

   A page keeps its own vocabulary and maps it here, in its render code:
     fleet    OK / PENDING / DEFERRED / FAILED   -> ok / mute / warn / crit
     testing  Not tested / OK / Issues           -> mute / ok / crit
     gaps     Verified / Returned / soft / hard  -> ok / mute / warn / crit
     crashes  exception / revit-error / other    -> crit / warn / mute
   Never add a fifth colour here for a fifth word. */
/* 20px, a pale tint with dark ink of the same hue, 13/500; never squeezed by its column. */
.pill{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 8px;border-radius:var(--r-pill);
      font-size:var(--t-sub);font-weight:500;line-height:1;white-space:nowrap;vertical-align:middle}
.pill.ok{background:var(--good-bg);color:var(--good-ink)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.crit{background:var(--crit-bg);color:var(--crit-ink)}
.pill.mute{background:var(--mute-bg);color:var(--mute-ink)}

/* ── Accessibility floor ─────────────────────────────────────────────────── */
/* Both rules were on some pages and not others, so a keyboard user lost the
   focus ring by changing tab, and the skeleton animated for people who had
   asked the OS for less motion. */
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}