/* app.css — the dashboard stylesheet, vendored from design/dashboard/industry-styles.css ("Industry"). This file is a COPY of the upstream design-system sheet with exactly five sanctioned edits applied, as specified in 03-UI-SPEC.md § Design System → Vendoring contract. Everything beyond those five edits is append-only, so re-applying them after an upstream refresh stays a mechanical patch. Edit 1 the Google Fonts import rule is deleted and replaced by local face declarations for the three vendored WOFF2 files. CSP is `default-src 'self'` with `font-src 'self'`; an external host is not a preference here, it is blocked. Edit 2 the six sub-pixel spacing tokens become the seven-token integer scale {4,8,16,24,32,48,64}. The 12px token is DELETED, not retuned — it was never a member of the standard set. Edit 3 the nine component rules that referenced the deleted token, or that pin a fixed height this contract declares, are rewritten. Edit 4 every upstream font-size is remapped onto the four-size ramp (72 / 24 / 14 / 11). There is no fifth size. Edit 5 the dashboard's own tokens and classes. It grows by appending, and an existing Edit-5 declaration may be retuned in place — see the three clauses below, which say exactly what that permits. WHAT "APPEND-ONLY" PROTECTS, IN THREE CLAUSES. Settled in Phase 3.1, which is the first phase that needed to change an Edit-5 VALUE rather than add a rule, and recorded here rather than in a plan file because this is where the next reader looks. (1) The SET of rules ABOVE Edit 5 is FROZEN. Edits 1-4 and every upstream rule they rewrite are what "append-only" protects, and freezing them is what keeps re-applying this vendoring after an upstream refresh a mechanical patch instead of an archaeology exercise. (2) Edit 5 GROWS BY APPENDING. Each appended block names the plan that appended it, restates these terms, and quotes the measurement that is its argument. (3) An Edit-5 DECLARATION may be retuned in place when the design contract changes its value — provided the comment above it is rewritten in the same edit to say why the new value is the right one. Phase 3.1 is the first exercise of clause (3): --row-h moves from 36px to 44px because 03.1-UI-SPEC.md § Row-Height Arithmetic corrects the arithmetic that produced 36px, and the comment above the token is rewritten with it. The alternative considered and REJECTED was declaring a sixth edit. A sixth edit would assert a sixth CATEGORY OF DIVERGENCE from design/dashboard/industry-styles.css, and that would be false: Phase 3.1 touches no upstream rule at all. Every token and class it changes is already Edit-5 material, which is precisely why clause (3) is the honest framing and a sixth edit is not. Enforced by TestVendoredCSSContract in internal/web, which reads these bytes back out of the embedded filesystem. A vendoring regression is otherwise invisible until someone screenshots the page. */ /* ── Edit 1 ── Self-hosted fonts. Latin subset, exactly three files: that is the asset-level enforcement of the two-weight rule (400 + 600). Barlow 500 and Barlow Condensed 400 are deliberately not shipped. SIL Open Font License 1.1 — Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow). font-display: swap so a slow font never blanks the table. */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/barlow-400.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/barlow-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/barlow-condensed-600.woff2") format("woff2"); } :root { --color-bg: #f2f2f3; --color-surface: #e9e9ea; --color-text: #1d1f20; --color-accent: #5980a6; --color-accent-2: #728fab; --color-divider: color-mix(in srgb, #1d1f20 16%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea; --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba; --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d; --color-neutral-700: #5d5d60; --color-neutral-800: #424244; --color-neutral-900: #2b2b2d; --color-accent-100: #eef6ff; --color-accent-200: #d6ebff; --color-accent-300: #b5d9fd; --color-accent-400: #94bce3; --color-accent-500: #749dc4; --color-accent-600: #597ea3; --color-accent-700: #416180; --color-accent-800: #2c455d; --color-accent-900: #1d2d3d; --color-accent-2-100: #eef6ff; --color-accent-2-200: #d6ebff; --color-accent-2-300: #bdd8f2; --color-accent-2-400: #9ebbd8; --color-accent-2-500: #7e9cb8; --color-accent-2-600: #627d98; --color-accent-2-700: #486077; --color-accent-2-800: #314457; --color-accent-2-900: #1f2d3a; --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Barlow", system-ui, sans-serif; /* ── Edit 2 ── The integer spacing scale. Every value is a member of {4, 8, 16, 24, 32, 48, 64}; all seven are declared and nothing outside the set exists. The upstream 0.85x-density values were sub-pixel (3.4 / 6.8 / 10.2 / 13.6 / 20.4 / 27.2) and produced fractional row heights in a 1,033-row table — a direct conflict with the anti-flicker rule. The 12px token is gone entirely: see Edit 3 for its nine callers. */ --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; /* Elevation — derived from the ground: soft ink-tinted shadows on a light theme, a hairline edge + ambient darkness on a dark one. */ --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent); /* ── Edit 5 ── Dashboard tokens. One semantic exception to the mono-steel palette. --color-alert is NOT "destructive": Phase 3 has zero mutating actions. It means exactly one thing — a human is required. Body-size text never uses it directly; the accent/alert pairs are tuned to 3:1, which is chrome contrast, not body contrast. Use --color-alert-text at 14px and below. */ --color-alert: #a35138; --color-alert-text: #7a3b26; --color-alert-tint: color-mix(in srgb, var(--color-alert) 18%, var(--color-bg)); --color-muted: color-mix(in srgb, var(--color-text) 55%, transparent); /* The reversed field's text colour. The spec names exactly THREE reversed surfaces — the login hero, the all-clean plate and the run-log 
 — and
     all three already agreed on this value, hardcoded, three times. Declared
     here with its reasoning for the same purpose the alert tokens above are:
     the risk being closed is a FOURTH reversed surface added later, picking a
     different value, with nothing in the sheet to catch the disagreement. This
     was the only un-tokenized colour left in an otherwise fully token-driven
     sheet (03.1-UI-SPEC.md § Color → "One token to add", M22). */
  --color-reversed-text: #cfe0f0;

  /* One token, one render. Never per-row: a table with mixed 36 and 44px rows
     is the worst of both, which is why this is a token and not a per-row style.

     Retuned in place from 36px in Phase 3.1, under clause (3) of the Edit-5
     terms at the top of this file. The arithmetic is the argument
     (03.1-UI-SPEC.md § Row-Height Arithmetic):

         44px   border-box height declared on the 
       -  8px   block padding (--space-1 x 2)
       = 36px   content box

       tallest content — td.col-remaining and td.col-confidence, which carry TWO
       line boxes:
         line box 1  strip / tick glyphs, 14px x 1.5   = 21.0px
         line box 2  the .sub-line caption, 11px x 1.2 = 13.2px  (display:block,
                     per the D1 ellipsis rule)
                                                  total  34.2px  <  36px, slack 1.8px

     So the cause of the bump is that SECOND LINE BOX and the phase that makes
     it is Phase 3.1. The comment this replaces was wrong on both counts — it
     credited Phase 5 and the Device cell's account caption — and a comment that
     misattributes a change to a future phase is how the next reader concludes
     the value was raised by mistake and reverts it, silently reopening D1.

     The D1 ellipsis rule (.table-fleet td .sub-line, far below) is UNTOUCHED by
     this retune. This phase changes the DECLARED height to match the content
     the design actually has; it does not undo the ellipsis, and content still
     never sets the height. */
  --row-h: 44px;
  /*
   * Phase 5 does not move this again. The site_label sub-line the roster import
   * adds lands INSIDE the Device cell, whose two inline boxes are already
   * covered by the same 36px content box (21.0 + 13.2 = 34.2px), so the
   * declared height stays 44px when the roster import ships.
   */

  /* The status glyphs are not in Barlow's glyph set and WILL fall back to a
     system font. Naming the fallback chain here, plus the fixed metrics on
     .glyph below, is what stops a substituted glyph from shifting row
     height by a pixel on every poll. */
  --font-glyph: "Barlow", "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif;

  /* A voice, not a size — technical readouts render at Body 14px/1.5. Never
     apply font-size-adjust to this stack: it resolves differently per
     machine (Cascadia Mono on a dev box, Consolas on stock Windows 11) and
     would produce a different rendered size per client. */
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
/* The -6px offsets are the one true exception to the 4-grid. They are drawn
   to align with the 1px frame; rounding them breaks the corner crosshair. */
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
/* Edit 4: body 15px/1.55 -> Body 14px/1.5. */
body { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
/* Edit 4: h1-h4 (42/32/25/20) -> Heading 24px; h5/h6 (16/13) -> Label 11px. */
h1 { font-size: 24px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.2; }
h4 { font-size: 24px; line-height: 1.2; }
h5 { font-size: 11px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
h6 { font-size: 11px; line-height: 1.2; }
h6 { letter-spacing: 0.14em; text-transform: uppercase; }
/* Edit 3: the deleted 12px token -> --space-4. */
p { margin: 0 0 var(--space-4); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
/* Edit 3: .btn gets the declared 32px filter-bar height instead of deriving
   it from the deleted token. One height, one baseline across the filter bar. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  height: 32px; padding: 0 var(--space-4);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
/* Edit 3 + Edit 4: 12px -> Label 11px, 5px margin -> --space-1. */
.field > label {
  display: block; font-size: 11px; margin-bottom: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
/* Edit 3: the login field height, deliberately 8px taller than the 32px
   table chrome so the sole solid-filled object reads as primary. */
.input {
  width: 100%; height: 40px; padding: 0 var(--space-4); font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; height: auto; padding: var(--space-2) var(--space-4); resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
/* Edit 4: .seg-opt 13px -> Body 14px. Unlisted in the Normalisation table
   because the class is unused in Phase 3, but remapped anyway: the contract
   requires every declared size to be one of the four, unused or not. */
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 14px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
/* Edit 3: the deleted 12px token -> --space-4. */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface);
}
/* Edit 4: .card-kicker 10px -> Label 11px. */
.card-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-700); }
/* Edit 4: .card-title 17px -> Heading 24px. */
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: 1.2;
}
/* Edit 4: .card-body 13px -> Body 14px. */
.card-body { margin: 0; font-size: 14px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

/* — navigation — */
/* Edit 3: .nav pins the 56px chrome height explicitly rather than deriving
   it from padding, so a font fallback cannot change it. */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  height: 56px; padding: 0 var(--space-8);
  border-bottom: none;
}
/* Edit 4: .nav-brand 18px -> Heading 24px. */
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Edit 3: --space-1 block / --space-2 inline. 4px x 2 + a 28px content box
   is the 36px row; horizontal padding never contributed to row height, and
   8px is what makes the 32px chevron column viable. */
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
/* Edit 3: the class is UNUSED in Phase 3 — read-only, no confirmations —
   and is remapped only so no reference to the deleted token survives. */
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
/* Edit 4: .dialog-title 20px -> Heading 24px. */
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }

/* ══════════════════════════════════════════════════════════════════════════
   Edit 5 — APPEND ONLY. The dashboard's own classes.

   Nothing below may declare a CSS transition on a table row or a count span:
   anti-flicker rule 5 forbids motion on polled elements. A row that changes
   status changes instantly; a 200ms fade across 100 rows reads as a glitch.
   ══════════════════════════════════════════════════════════════════════ */

/* — voices — */
.kicker {
  font-size: 11px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.sub-line {
  font-size: 11px; font-weight: 400; line-height: 1.2;
  color: var(--color-muted);
  /* No top margin. Its own 1.2 line box supplies the optical gap; 4px of
     margin would overflow the 44px sub-line row's content box and the row
     would silently grow to 46px — exactly the flicker this forbids. */
  margin: 0;
}
.device-name { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.mono {
  font-family: var(--font-mono); font-size: 14px; font-weight: 400;
  line-height: 1.5;
}

/* The headline figure. One element, one view. */
.figure {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 72px; line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

/* Every numeric readout. Non-negotiable: this is what stops a 30-second poll
   from reflowing the table. */
.num, .tile-count, .table td, .table th { font-variant-numeric: tabular-nums; }

/* — glyphs —
   Verbatim from 03-UI-SPEC.md § Glyph Contract. Fixed width plus
   line-height: 1 plus vertical-align: middle makes a fallback substitution
   metric-neutral, and caps a glyph's contribution to a row at its em box. */
.glyph {
  font-family: var(--font-glyph);
  display: inline-block;
  width: 1em; text-align: center;
  line-height: 1; vertical-align: middle;
}

/* — buttons, additional heights — */
/* 28px: it must fit inside the 36px panel-header strip (4px block padding
   x 2 + 28px = exactly 36px). The size difference from the 32px filter bar
   is also the only cue that says "scoped to one panel". */
.btn-sm { height: 28px; padding: 0 var(--space-2); }
/* 40px: the login/primary height. */
.btn-lg { height: 40px; padding: 0 var(--space-4); }

/* — status chips —
   Eight treatments carry thirteen labels. The chip's text is the derived
   status verbatim; the treatment is its tile group's. Every chip is one
   line: 11px x 1.2 (13.2px) + 4px x 2 padding + 1px x 2 border = 23.2px,
   the tallest thing in a 28px row content box. A chip must never wrap. */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 11px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent; border-radius: 0;
  white-space: nowrap;
}
/* 1 — solid steel */
.chip-verified-clean { background: var(--color-accent-800); color: var(--color-neutral-100); border-color: var(--color-accent-800); }
/* 2 — solid steel + alert hairline. Structurally distinct from 1, not just
   hue-distinct: it is the pair most likely to be conflated. */
.chip-rmm-clean-av-blocked { background: var(--color-accent-800); color: var(--color-neutral-100); border-color: var(--color-alert); }
/* 3 — steel tint */
.chip-remaining { background: var(--color-accent-200); color: var(--color-accent-800); border-color: var(--color-accent-400); }
/* 4 — steel outline */
.chip-awaiting-reboot { background: transparent; color: var(--color-accent-800); border-color: var(--color-accent-600); }
/* 5 — alert tint (fill) */
.chip-av-blocked { background: var(--color-alert-tint); color: var(--color-alert-text); border-color: var(--color-alert); }
/* 6 — alert outline. Shares a hue with 5, separated by fill vs outline. */
.chip-needs-human { background: transparent; color: var(--color-alert-text); border-color: var(--color-alert); }
/* 7 — alert outline, dashed. Sends the operator to the server, not the PC. */
.chip-agent-fault { background: transparent; color: var(--color-alert-text); border-color: var(--color-alert); border-style: dashed; }
/* 8 — neutral dashed. Never styled as an error: no_data is a routine
   lock_held skip and must never page anyone. */
.chip-no-data { background: transparent; color: var(--color-neutral-700); border-color: var(--color-neutral-400); border-style: dashed; }

/* 9 — never reported. Tile only; there are no device rows behind it, the
   count is arithmetic. Ground + neutral diagonal hatch + hairline. */
.tile-never-reported {
  border: 1px solid var(--color-divider);
  background-color: var(--color-bg);
  background-image: repeating-linear-gradient(135deg,
    var(--color-neutral-300) 0, var(--color-neutral-300) 1px,
    transparent 1px, transparent 6px);
}

/* Regression prefix badge: 1px border + a 14px content box for an 11px
   glyph at line-height 1. */
.badge-regressed {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none;
  font-size: 11px; line-height: 1;
  border: 1px solid var(--color-alert); color: var(--color-alert-text);
}

/* — the inverted component strip —
   Filled = STILL PRESENT. Hollow = gone. A clean machine's strip is empty,
   so the fleet's success state is an empty, quiet grid and activity reads as
   debt. Anyone building this from intuition builds it backwards and it looks
   correct. Data-driven per D-27: min(total, 12) cells, `filled` of them
   solid. At the 12-cell cap: 12 x 8px + 11 x 4px = 140px, which fits the
   200px column beside the count label. */
.strip { display: inline-flex; align-items: center; gap: var(--space-1); }
.strip-cell {
  width: 8px; height: 8px; flex: none;
  border: 1px solid var(--strip-fill, var(--color-accent-800));
  background: transparent;
}
.strip-cell.is-filled { background: var(--strip-fill, var(--color-accent-800)); }
/* Fill colour follows the row's tile group: steel for groups 1-4, alert for
   groups 5-7. */
.strip.is-alert { --strip-fill: var(--color-alert); }
/* The +N label when total exceeds the cap. */
.strip-more { font-size: 11px; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* — freshness as row solidity, never as a category —
   This is what avoids an 8 x 3 status-freshness matrix. Freshness carries no
   hue at all: three-tick glyphs plus the treatments below.

   The veil is applied to a wrapper 
 INSIDE each , never to the :
   a  opacity change would fade the alert left edge and the confidence
   glyph too, and the contract requires a faded row to keep one sharp thing
   in it to pull the eye. Templates therefore omit .veil in the confidence
   cell — opacity cannot be undone by a child. */
.veil { opacity: 1; }
tr.is-stale .veil { opacity: 0.62; }
tr.is-missing .veil { opacity: 0.45; }
tr.is-stale {
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--color-text) 6%, transparent) 0,
    color-mix(in srgb, var(--color-text) 6%, transparent) 1px,
    transparent 1px, transparent 7px);
}
tr.is-missing {
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--color-text) 11%, transparent) 0,
    color-mix(in srgb, var(--color-text) 11%, transparent) 1px,
    transparent 1px, transparent 5px);
  /* border-left does not render reliably under border-collapse; an inset
     shadow gives the 2px alert edge without disturbing the fixed layout. */
  box-shadow: inset 2px 0 0 0 var(--color-alert);
}

/* — the fleet table —
   Fixed layout with declared widths: a polled swap must never re-measure a
   column. Rule 1 is only sound because --row-h is declared and no cell
   content can exceed it (see the row-height arithmetic in the UI-SPEC).

   The declared minimum is the SUM of the eight column widths below
   (240 + 150 + 200 + 130 + 130 + 110 + 70 + 32 = 1062), and it is why no
   horizontal scrollbar appears at >= 1280px once the fleet view's nested
   620px scroller is gone (Phase 3.1, Q4). It is also the number that
   permanently rules out a sticky left rail — see the .tile comment. */
.table-fleet { table-layout: fixed; width: 100%; min-width: 1062px; }
.table-fleet td { height: var(--row-h); overflow: hidden; }
.col-device { width: 26%; min-width: 240px; }
.col-status { width: 150px; }
.col-remaining { width: 200px; }
.col-confidence { width: 130px; }
.col-last-seen { width: 130px; }
.col-first-seen { width: 110px; }
.col-runs { width: 70px; }
.col-chevron { width: 32px; }
/* The sticky header never re-renders; only  and count  elements
   are swap targets. */
.table-fleet thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface); }
/* Inactive sortable headers reserve the arrow's width so toggling sort does
   not shift the header text. */
.sort-indicator { display: inline-block; width: 1em; text-align: center; color: var(--color-accent-700); }
.row-chevron { color: var(--color-accent-700); }

/* — panels and scroll wrappers — */
.panel { border: 1px solid var(--color-divider); background: transparent; }
.panel-header {
  display: flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: var(--space-1) var(--space-4);
  background: var(--color-surface);
}
.scroll-620 { max-height: 620px; overflow: auto; }
/* 432px = 12 x the 36px module: twelve whole run entries and a cleanly
   half-cut thirteenth, which reads as "there is more, scroll". */
.scroll-432 { max-height: 432px; overflow: auto; }

/* — the reversed field: exactly three surfaces —
   the login hero panel, the all-clean end-state plate, and the run log. All
   three read --color-reversed-text; none of them carries a literal any more. */
.reversed { background: var(--color-accent-900); color: var(--color-reversed-text); }
.log-pre {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5;
  background: var(--color-accent-900); color: var(--color-reversed-text);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 620px; overflow: auto;
  margin: 0; padding: var(--space-4);
}

/* — empty states — */
.empty-state { padding: var(--space-12) var(--space-4); text-align: center; }
/* The shared padding-and-field rule for a reversed surface. It was originally
   named after the all-clean end-state plate — the first of its TWO callers —
   and the login hero has worn a class named after a state it is not in ever
   since. login.gohtml:10-17 has carried that as a written ticket since plan
   03-05; this rename closes it. No alias is left behind: a second name for one
   concept means the next reader cannot tell which one is current. Its two
   template callers move in the same wave (plan 03.1-05). */
.reversed-plate { padding: var(--space-16); background: var(--color-accent-900); color: var(--color-reversed-text); }
.hatch-ground {
  background-image: repeating-linear-gradient(135deg,
    var(--color-divider) 0, var(--color-divider) 1px,
    transparent 1px, transparent 7px);
}

/* — the live poll indicator — */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px; flex: none;
  border-radius: 50%; background: var(--color-accent);
}

/* — the fleet status tiles —
   A tile is a FILTER CONTROL, so it ships as a