/* Steriview design system, installed from the handoff (tokens/*.css), verbatim.
   Fonts are served from /fonts rather than a font CDN: the on-site box may
   have no internet, and a clinical screen that falls back to a system font
   on a bad day is not the product that was designed. */
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/ibm-plex-mono-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Steriview colour tokens. Base scales first, then semantic aliases. */
:root{
/* Petrol - brand primary. Deep, clinical, cool. */
--petrol-950:#041F26;--petrol-900:#062E37;--petrol-800:#0A3F4B;--petrol-700:#0E5363;--petrol-600:#136A7D;--petrol-500:#1B8298;--petrol-400:#4FA3B5;--petrol-300:#8CC4D0;--petrol-200:#C3E0E6;--petrol-100:#E3F0F3;--petrol-50:#F2F8F9;
/* Graphite - cool neutral with a faint green-blue cast */
--graphite-950:#0F1417;--graphite-900:#171D21;--graphite-800:#262E33;--graphite-700:#3A444A;--graphite-600:#56626A;--graphite-500:#76828A;--graphite-400:#9AA4AA;--graphite-300:#C2C9CD;--graphite-200:#DDE2E5;--graphite-150:#E7EBED;--graphite-100:#EFF2F3;--graphite-50:#F6F8F9;--white:#FFFFFF;
/* Process states */
--green-700:#155C39;--green-600:#1E7F4F;--green-100:#E4F2EA;--green-200:#BFE0CC;
--red-700:#8E1A12;--red-600:#B42318;--red-100:#FBE9E7;--red-200:#F2C4BF;
--amber-700:#7A4505;--amber-600:#A15C07;--amber-100:#FCF0DC;--amber-200:#F2D39E;
--blue-700:#164A96;--blue-600:#1D5FBF;--blue-100:#E6EEFA;--blue-200:#BDD0F0;
--violet-600:#5B4BB0;--violet-100:#EEEBFA;

/* Semantic - text */
--text-primary:var(--graphite-950);--text-secondary:var(--graphite-600);--text-tertiary:var(--graphite-500);--text-disabled:var(--graphite-400);--text-inverse:var(--white);--text-brand:var(--petrol-700);--text-link:var(--petrol-600);--text-link-hover:var(--petrol-800);
/* Semantic - surfaces */
--surface-app:var(--graphite-50);--surface-card:var(--white);--surface-sunken:var(--graphite-100);--surface-hover:var(--graphite-100);--surface-selected:var(--petrol-50);--surface-inverse:var(--graphite-900);--surface-nav:var(--petrol-950);--surface-nav-hover:#0A2D35;--surface-nav-active:#0F3C47;--surface-overlay:rgba(15,20,23,.48);
/* Semantic - borders */
--border-subtle:var(--graphite-150);--border-default:var(--graphite-200);--border-strong:var(--graphite-300);--border-focus:var(--petrol-500);--border-input:var(--graphite-300);
/* Semantic - actions */
--action-primary:var(--petrol-700);--action-primary-hover:var(--petrol-800);--action-primary-active:var(--petrol-900);
/* The "go" action: the one forward move in a flow (Continue, Start a load, Send). Petrol to sterile green. */
--action-go-from:#0E5363;--action-go-to:#1E7F4F;--action-go-hover-from:#0A3F4B;--action-go-hover-to:#155C39;
--action-go-glow:0 8px 22px -8px rgba(30,127,79,.65),0 0 0 1px rgba(30,127,79,.18);--action-go-glow-hover:0 12px 30px -8px rgba(30,127,79,.8),0 0 0 1px rgba(30,127,79,.28);--action-secondary-bg:var(--white);--action-secondary-hover:var(--graphite-100);--action-danger:var(--red-600);--action-danger-hover:var(--red-700);--focus-ring:0 0 0 2px var(--white),0 0 0 4px var(--petrol-400);
/* Semantic - sterilisation status */
--status-pass-fg:var(--green-700);--status-pass-bg:var(--green-100);--status-pass-solid:var(--green-600);
--status-fail-fg:var(--red-700);--status-fail-bg:var(--red-100);--status-fail-solid:var(--red-600);
--status-warn-fg:var(--amber-700);--status-warn-bg:var(--amber-100);--status-warn-solid:var(--amber-600);
--status-running-fg:var(--blue-700);--status-running-bg:var(--blue-100);--status-running-solid:var(--blue-600);
--status-pending-fg:var(--graphite-700);--status-pending-bg:var(--graphite-100);--status-pending-solid:var(--graphite-500);
--status-released-fg:var(--petrol-800);--status-released-bg:var(--petrol-100);--status-released-solid:var(--petrol-600);
--status-test-fg:var(--violet-600);--status-test-bg:var(--violet-100);--status-test-solid:var(--violet-600);
/* Data viz - cycle curves */
--chart-temperature:#C2410C;--chart-pressure:var(--petrol-600);--chart-holding:rgba(30,127,79,.10);--chart-grid:var(--graphite-150);--chart-axis:var(--graphite-500);
}

:root{
--font-sans:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
/* Scale (px) - tuned for dense clinical desktop UI; 14 is the body default */
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-md:14px;--text-lg:16px;--text-xl:18px;--text-2xl:22px;--text-3xl:28px;--text-4xl:36px;
--leading-tight:1.2;--leading-snug:1.35;--leading-normal:1.5;
--tracking-tight:-0.01em;--tracking-normal:0;--tracking-caps:0.06em;
/* Roles */
--type-display:600 36px/1.15 var(--font-sans);
--type-h1:600 28px/1.2 var(--font-sans);
--type-h2:600 22px/1.25 var(--font-sans);
--type-h3:600 18px/1.3 var(--font-sans);
--type-h4:600 16px/1.35 var(--font-sans);
--type-body:400 14px/1.5 var(--font-sans);
--type-body-sm:400 13px/1.45 var(--font-sans);
--type-label:500 13px/1.3 var(--font-sans);
--type-caption:400 12px/1.4 var(--font-sans);
--type-overline:600 11px/1.3 var(--font-sans);
--type-data:400 13px/1.4 var(--font-mono);
--type-data-lg:500 22px/1.2 var(--font-mono);
}

:root{
--space-0:0;--space-px:1px;--space-0-5:2px;--space-1:4px;--space-1-5:6px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
/* Control heights. Touch is the floor for anything pressed with a gloved
   finger at the bench; xl is the one forward action on a screen. */
--control-sm:28px;--control-md:34px;--control-lg:40px;--control-touch:44px;--control-xl:56px;
/* Layout */
--sidebar-width:232px;--topbar-height:52px;--content-max:1440px;--page-gutter:24px;
}

:root{
/* Radii - deliberately tight. Nothing above 6px except full pills for dots/switches. */
--radius-0:0;--radius-xs:2px;--radius-sm:3px;--radius-md:4px;--radius-lg:6px;--radius-full:999px;
--border-width:1px;--border-width-strong:2px;
/* Elevation - borders do the work; shadow only for things that float */
--shadow-none:none;
--shadow-xs:0 1px 0 rgba(15,20,23,.04);
--shadow-sm:0 1px 2px rgba(15,20,23,.06),0 0 0 1px rgba(15,20,23,.04);
--shadow-md:0 4px 12px rgba(15,20,23,.08),0 1px 3px rgba(15,20,23,.06);
--shadow-lg:0 16px 40px rgba(15,20,23,.16),0 2px 6px rgba(15,20,23,.08);
/* Motion */
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */

--duration-fast:100ms; /* @kind other */
--duration-base:160ms; /* @kind other */
--duration-slow:240ms; /* @kind other */

--z-sticky:10; /* @kind other */
--z-dropdown:40; /* @kind other */
--z-overlay:80; /* @kind other */
--z-toast:100; /* @kind other */
}

/* This product's long-standing names, aliased once onto the design system's
   semantic layer. Every one of them now resolves to a design-system token, so
   the dark theme below only has to redefine the semantic layer and these
   follow. New rules use the semantic names; these are replaced as rules are
   touched. The --tint-* family is the dark-theme bridge for soft status
   grounds and reads the status backgrounds, which carry their own dark values. */
:root {
  color-scheme: light;
  --surface-1: var(--surface-card);
  --plane: var(--surface-app);
  --muted: var(--text-tertiary);
  --grid: var(--border-subtle);
  --axis: var(--chart-axis);
  --border: var(--border-default);
  --wash: var(--surface-sunken);
  --navy: var(--surface-nav);
  --navy-900: var(--surface-nav);
  --series-1: var(--action-primary);  /* the one action colour */
  --series-1-hover: var(--action-primary-hover);
  --series-1-soft: var(--surface-selected);
  --series-1-ring: var(--petrol-400);
  --series-2: var(--chart-temperature);
  --good: var(--status-pass-solid);
  --warning: var(--status-warn-solid);
  --serious: var(--status-warn-solid);
  --critical: var(--status-fail-solid);
  --shadow: var(--shadow-md);
  --tint-info: var(--status-released-bg);
  --tint-good: var(--status-pass-bg);
  --tint-warn: var(--status-warn-bg);
  --tint-serious: var(--status-warn-bg);
  --tint-bad: var(--status-fail-bg);
  /* The grey-blue plate a machine sits on, photograph or drawing. */
  --plate: var(--surface-sunken);
  --plate-edge: var(--border-strong);
  --plate-warn: var(--status-warn-bg);
  --plate-crit: var(--status-fail-bg);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--plane);
  color: var(--text-primary);
  font: 14px/1.5 var(--font-sans);
}
a { color: var(--series-1); }
.app { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }

.side {
  border-right: 0; background: var(--surface-nav); color: var(--white);
  padding-block: 18px 24px; padding-inline: 14px;
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
}
.brand { display: flex; align-items: baseline; gap: 8px; padding-inline: 6px; }
.brand h1 { font-size: 17px; margin: 0; letter-spacing: -0.01em; }
.brand h1 { color: #fff; }
.brand .ver { font-size: 11px; color: var(--petrol-300); }

.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 3px; font-size: 13.5px;
  color: var(--petrol-200); text-decoration: none;
  border-left: 2px solid transparent;
}
.side nav a:hover { background: var(--surface-nav-hover); color: var(--white); }
.side nav a[aria-current="page"] {
  background: var(--surface-nav-active); color: var(--white);
  font-weight: 600; border-left-color: transparent;
}
.side nav a .ico { flex: none; width: 16px; display: inline-flex; color: var(--petrol-300); }
.side nav a[aria-current="page"] .ico { color: #fff; }
.side nav a .count {
  margin-left: auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--series-1); color: #fff; border-radius: 3px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.side nav a .count.alert { background: var(--critical); }
.side .sidefoot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-inline: 4px; }
.side .sidefoot, .side .sidefoot * { color: var(--petrol-300); }
.side .userchip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.side .userchip > span:nth-child(2) { color: #fff; }
.side .sidefoot a, .side .sidefoot .linkbtn { color: var(--petrol-200); }

.main { padding: 26px 30px 72px; max-width: 1240px; }
.viewhead { margin-bottom: 18px; }
.viewhead h2 { font-size: 21px; margin: 0 0 4px; letter-spacing: -0.015em; }
.viewhead p { margin: 0; color: var(--text-secondary); font-size: 13.5px; max-width: 68ch; }
.backlink {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
  color: var(--series-1); background: none; border: 0; padding: 0; cursor: pointer; margin-bottom: 12px;
}

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border);
    flex-direction: column; gap: 12px; padding-block: 14px;
  }
  .side nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 2px; }
  .side nav a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 7px 10px; }
  .side nav a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--series-1); }
  .side nav a .ico { display: none; }
  .side .sidefoot { margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; }
  .main { padding: 20px 16px 56px; }
}

.sub { color: var(--text-secondary); font-size: 12.5px; margin: 0; }
.sub code { font-size: 11.5px; color: var(--muted); word-break: break-all; }

.banner {
  border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
  background: var(--tint-warn); border-radius: 4px; padding: 10px 14px;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 20px;
}

/* ---- filters: one row above everything it scopes ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.filters input, .filters select {
  font: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 3px; padding: 7px 10px; min-height: 34px;
}
.filters input { min-width: 190px; }
.spacer { flex: 1; }

/* ---- stat tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px; }
.tile .k { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.tile .v { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.tile .n { font-size: 12px; color: var(--muted); margin-top: 4px; }
.tile.alert .v { color: var(--critical); }

/* ---- table ---- */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
/* Tables carry the product's data density rule: 11px uppercase headers on a
   sunken ground, 10px rows, tabular numerals throughout so columns of readings
   line up digit under digit. */
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
thead th {
  text-align: left; font: var(--type-overline, 600 11px/1.3 var(--font-sans));
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);
  background: var(--graphite-50);
  padding: 8px 12px; border-bottom: 1px solid var(--grid); white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
/* Every identifier, reading, lot number and timestamp is mono. */
.mono, td.mono, .code { font-family: var(--font-mono); font-feature-settings: "zero" 1; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--wash); }
tbody tr[aria-selected="true"] { background: var(--wash); }
.num { font-variant-numeric: tabular-nums; }
.dim { color: var(--text-secondary); }
.scroll-x { overflow-x: auto; }

/* ---- status pills: icon + label, never colour alone ---- */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.pill svg { flex: none; }
.pill.pass { color: var(--good); }
.pill.fail { color: var(--critical); }
.pill.indeterminate { color: var(--text-secondary); }
.pill.warn { color: var(--serious); }

.chip {
  display: inline-block; font-size: 11px; line-height: 1.5; font-weight: 600;
  color: var(--text-secondary); background: var(--wash);
  border: 1px solid var(--border); border-radius: 2px;
  padding: 0 6px; margin-right: 7px; min-width: 22px; text-align: center;
}
.chip.test { font-weight: 500; }

.flag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  color: var(--critical); border: 1px solid currentColor; border-radius: 2px;
  padding: 1px 7px; margin-left: 6px; white-space: nowrap;
}

/* ---- detail ---- */
.detail { margin-top: 0; }
.detail h2 { font-size: 16px; margin: 0 0 2px; }
.detail .meta { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
.verdictbar {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  padding: 13px 16px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface-1); margin-bottom: 14px;
}
.verdictbar .vb { display: flex; flex-direction: column; gap: 3px; }
.verdictbar .vb .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.disagree {
  border: 1px solid color-mix(in srgb, var(--critical) 38%, var(--border));
  background: var(--tint-bad); border-radius: 4px; padding: 11px 14px;
  font-size: 13px; margin-bottom: 14px;
}
.checks { display: grid; gap: 8px; margin-bottom: 18px; }
.check {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  padding: 11px 14px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 4px;
}
.check .lbl { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.check .txt { color: var(--text-secondary); font-size: 13px; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.metric { background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; padding: 11px 13px; }
.metric .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.metric .v { font-size: 17px; margin-top: 3px; }

/* ---- charts ---- */
.chartcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px 6px; margin-bottom: 14px; position: relative; }
.chartcard h3 { font-size: 13px; margin: 0 0 2px; }
.chartcard .cap { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 2px; border-radius: 4px; display: inline-block; }
.swatch.dash { height: 0; border-top: 2px dotted var(--muted); }
svg.chart { display: block; width: 100%; height: auto; touch-action: none; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-md); padding: 8px 10px;
  font-size: 12px; min-width: 130px; transition: opacity .08s;
}
.tooltip .tt-t { color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.tooltip .tt-r { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tooltip .tt-r b { font-variant-numeric: tabular-nums; font-weight: 600; }

.phaseribbon { display: flex; gap: 2px; margin-bottom: 10px; font-size: 11px; }
.phaseribbon div { padding: 3px 7px; border-radius: 2px; background: var(--wash); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phaseribbon div.sterilization { background: color-mix(in srgb, var(--series-1) 16%, transparent); color: var(--text-primary); }

details.raw { margin-top: 10px; }
details.raw summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 6px 0; }
pre.rawfile {
  max-height: 320px; overflow: auto; background: var(--plane); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px; font-size: 11.5px; line-height: 1.45; margin: 6px 0 0;
}
.issue { font-size: 12.5px; color: var(--text-secondary); padding: 3px 0; }
.issue b { color: var(--serious); font-weight: 600; }
.empty { padding: 34px 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
  .verdictbar { gap: 10px 16px; }
  .tile .v { font-size: 22px; }
}

/* ---- header tools ---- */
.headtools { display: flex; align-items: center; gap: 8px; }
.userchip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--surface-1);
  border-radius: 4px; padding: 5px 8px 5px 6px; font-size: 13px; min-height: 34px;
}
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--series-1); color: #fff; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.userchip .role { color: var(--muted); font-size: 11px; }
.linkbtn {
  background: none; border: 0; padding: 0 2px; font: inherit; font-size: 12px;
  color: var(--series-1); cursor: pointer; text-decoration: underline;
}

/* ---- sign-in ---- */
.signin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.signin select, .signin input {
  font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px; padding: 7px 10px; min-height: 34px;
}
.signin input[type="password"] { width: 92px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* ---- release tray ---- */
.tray { margin-bottom: 22px; }
.tray.empty-tray { padding: 30px 16px; text-align: center; color: var(--text-secondary); font-size: 13.5px; }
.tray h2 {
  font-size: 13px; margin: 0 0 9px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.confirm {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 6px; padding: 15px 17px; margin-bottom: 10px;
}
.confirm.attention { background: var(--tint-bad); border-color: color-mix(in srgb, var(--critical) 38%, var(--border)); }
.confirm .ctitle { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.confirm .cmeta { color: var(--text-secondary); font-size: 13px; margin-bottom: 11px; }
.confirm .cverdicts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 11px; }
.confirm .cwhy {
  font-size: 13px; color: var(--text-secondary); background: var(--wash);
  border-radius: 6px; padding: 9px 11px; margin-bottom: 12px;
}
.confirm .cwhy b { color: var(--critical); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions .sub { margin-right: 2px; }
.reasonbox {
  width: 100%; font: inherit; font-size: 13px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 10px; margin-bottom: 10px; resize: vertical; min-height: 62px;
}
.radios { display: flex; gap: 14px; align-items: center; margin-bottom: 11px; font-size: 13px; }
.radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.trayrest { font-size: 13px; color: var(--text-secondary); }
.trayrest button { margin-left: 6px; }
.errline { color: var(--critical); font-size: 13px; margin-top: 8px; }
.okline { color: var(--good); font-size: 13px; margin-top: 8px; }

/* ---- maintenance ---- */
.maint { margin-top: 0; }
.maint h2 { font-size: 16px; margin: 0 0 3px; }
.maint .lead { color: var(--text-secondary); font-size: 13px; margin: 0 0 14px; }
.mrow {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center;
  padding: 12px 15px; border-bottom: 1px solid var(--grid);
}
.mrow:last-child { border-bottom: 0; }
.mrow .mlabel { font-size: 13.5px; font-weight: 600; }
.mrow .mdetail { font-size: 12.5px; color: var(--text-secondary); }
.mrow .mbar { grid-column: 1 / -1; height: 5px; border-radius: 4px; background: var(--wash); overflow: hidden; }
.mrow .mbar i { display: block; height: 100%; border-radius: 4px; background: var(--series-1); }
.mrow.soon .mbar i { background: var(--warning); }
.mrow.due .mbar i, .mrow.overdue .mbar i { background: var(--critical); }
.mrow .mright { display: flex; align-items: center; gap: 10px; }
.mrow .mcount { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.waterrow {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 12px 15px; border-bottom: 1px solid var(--grid); font-size: 13px;
}
.waterrow .wv { font-size: 17px; font-variant-numeric: tabular-nums; }

/* ---- machine gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 14px; }
.mcard {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; cursor: pointer; text-align: left; padding: 0; font: inherit;
  display: flex; flex-direction: column; color: var(--text-primary);
}
.mcard:hover { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); }
.mcard:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mart { background: var(--plane); padding: 16px 18px 12px; display: flex; justify-content: center; border-bottom: 1px solid var(--border); }
.mart .mplate { width: 100%; }
.mbody { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
.mname { font-size: 14.5px; font-weight: 600; }
.mserial { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mstats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-secondary); }
.mstats b { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }

/* ---- machine status blocks ---- */
.machinehead { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.machinehead .art { width: 132px; flex: none; }
.machinehead .art .mplate { width: 100%; }
.machinehead .who h2 { font-size: 21px; margin: 0 0 3px; letter-spacing: -0.015em; }
.machinehead .who p { margin: 0; color: var(--text-secondary); font-size: 13px; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 12px; margin-bottom: 22px; }
.statblock {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px;
  padding: 14px 16px; text-align: left; font: inherit; color: var(--text-primary);
  cursor: pointer; display: flex; flex-direction: column; gap: 5px;
}
.statblock:hover { background: var(--wash); border-color: color-mix(in srgb, var(--series-1) 40%, var(--border)); }
.statblock:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.statblock .k { font-size: 12px; color: var(--text-secondary); }
.statblock .v { font-size: 19px; letter-spacing: -0.01em; }
.statblock .n { font-size: 12px; color: var(--muted); }
.statblock .more { font-size: 12px; color: var(--series-1); margin-top: 2px; }

/* ---- exports ---- */
.scopebar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 13px 15px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 4px; margin-bottom: 14px;
}
.scopebar label { font-size: 12.5px; color: var(--text-secondary); }
.scopebar input, .scopebar select {
  font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px; padding: 6px 9px; min-height: 32px;
}
.scopesum {
  font-size: 13px; color: var(--text-secondary); padding: 10px 15px;
  background: var(--wash); border-radius: 4px; margin-bottom: 18px;
}
.scopesum b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.exports { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.exp {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 8px;
}
.exp h3 { font-size: 14px; margin: 0; }
.exp p { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
.exp .go { display: flex; align-items: center; gap: 9px; }
.exp .fmt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}

/* ---- kits ---- */
.kitlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kitcard {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px;
  padding: 14px 15px; text-align: left; font: inherit; color: var(--text-primary); cursor: pointer;
  display: flex; flex-direction: column; gap: 7px;
}
.kitcard:hover { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); }
.kitcard[aria-pressed="true"] { border-color: var(--series-1); background: var(--wash); }
.kitcard .kn { font-size: 14.5px; font-weight: 600; }
.kitcard .kd { font-size: 12.5px; color: var(--text-secondary); }
.kitcard .kt { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.kitcard .kt svg { width: 44px; height: 10px; color: var(--muted); }

/* The width a folded step keeps. It stays in its own column and narrows;
   it never moves somewhere else on the page. */
:root { --rail: 78px; }
.editor {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: var(--cols, minmax(0, 0.9fr) minmax(0, 2.2fr) minmax(0, 1fr));
}
@media (max-width: 1100px) { .editor { grid-template-columns: minmax(0, 1fr); } }

/* ---- a step header, which is also the way to fold it ---- */
.phead {
  display: flex; align-items: center; gap: 0; width: 100%;
  margin: 0 0 12px; padding: 0; border: 0; background: none;
  font: inherit; text-align: left; color: var(--text-primary); cursor: pointer;
}
.phead .ptitle { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; flex: 1; min-width: 0; }
.phead .pchev { flex: none; color: var(--muted); transform: rotate(-90deg); transition: transform 140ms ease; }
.phead[aria-expanded="false"] .pchev { transform: rotate(90deg); }
.phead:hover .pchev { color: var(--series-1); }
.phead:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* ---- a folded step ----
   The title turns on its side and the step keeps its column. What it settled
   is what the title says while it is folded, so the rail is a summary and not
   just a closed drawer. */
/* Every rail the same height, whatever it holds, so three folded steps read as
   three of one thing. The shade is the whole colour accent they need: it says a
   card is there and closed, without spending a state colour on saying it. */
.pane.folded {
  min-height: 244px;
  padding: 12px 8px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--wash), transparent 62%), var(--surface-1);
}
.pane.folded .part { width: 44px; flex: none; }
.pane.folded .phead {
  flex-direction: column; align-items: center; gap: 10px; margin: 0; flex: 1;
}
.pane.folded .phead .stepno { margin-right: 0; }
.pane.folded .phead .ptitle {
  writing-mode: vertical-rl; transform: rotate(180deg);
  flex: 1; min-height: 90px; text-align: right; font-size: 14px;
}
.pane.folded .phead .pchev { transform: rotate(-90deg); }
@media (max-width: 1100px) {
  /* Stacked, a rail would be a tall thin nothing, so it lies back down. */
  .pane.folded { flex-direction: row; align-items: center; padding: 10px 14px; }
  .pane.folded .phead { flex-direction: row; }
  .pane.folded .phead .ptitle { writing-mode: horizontal-tb; transform: none; min-height: 0; text-align: left; }
  .pane.folded .phead .pchev { transform: rotate(90deg); }
}
.pane { background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; padding: 14px 15px; }
.pane h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; color: var(--text-primary); letter-spacing: -0.005em; }
.pane input[type="text"], .pane textarea, .pane select {
  font: inherit; font-size: 13px; width: 100%; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px; padding: 7px 9px; margin-bottom: 9px;
}
.itemrow {
  display: grid; grid-template-columns: 66px 1fr auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--grid);
}
.itemrow:last-child { border-bottom: 0; }
.itemrow svg { width: 66px; height: 14px; color: var(--text-secondary); }
.itemrow .in { font-size: 13px; }
.itemrow .ik { font-size: 11px; color: var(--muted); }
.itemrow .iq { display: flex; align-items: center; gap: 5px; }
.itemrow .iq button {
  width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary); font: inherit; cursor: pointer; line-height: 1;
}
.itemrow .iq span { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.pickrow { cursor: pointer; }
.pickrow:hover { background: var(--wash); }
.consum { opacity: .78; }
.catfilter { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.catfilter button {
  font: inherit; font-size: 11.5px; padding: 3px 8px; border-radius: 3px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); cursor: pointer;
}
.catfilter button[aria-pressed="true"] { border-color: var(--series-1); color: var(--series-1); font-weight: 600; }

/* ---- settings ---- */
.setgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.fieldrow { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fieldrow label { font-size: 12px; color: var(--text-secondary); }
.fieldrow input, .fieldrow select {
  font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px; padding: 7px 9px;
}
.fieldrow .hint { font-size: 11.5px; color: var(--muted); }
.toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.toggle input { width: 18px; height: 18px; }
.toggle span { font-size: 13.5px; }

/* ---- what needs a person ----
   Every fact here was already on the board as a small flag on a card in one of
   three columns. Assembling them was a job the reader had to do by scanning.
   It is additive: nothing is only here, and no claim about safety is hidden
   below because it is summarised above. */
.needs { margin-bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
/* Two across, because six full-width rows on a wide screen is a wall of
   mostly empty line. The pair in a row stretches to the taller of the two,
   so nothing is truncated to make them match. */
.nlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
@media (max-width: 1100px) { .nlist { grid-template-columns: minmax(0, 1fr); } }
.needs h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 3px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em;
}
.needs h3 .wn {
  font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: var(--wash); border-radius: 2px; padding: 1px 8px; color: var(--text-primary);
}
.nrow {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 10px 14px; font: inherit; text-align: left; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-primary);
}
.nrow:hover { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); }
.nrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nrow .ndot { flex: none; width: 8px; height: 8px; border-radius: 999px; align-self: center; }
.nrow.fail { background: var(--tint-bad); border-color: color-mix(in srgb, var(--critical) 38%, var(--border)); }
.nrow.fail .ndot { background: var(--critical); }
.nrow.warn { background: var(--tint-serious); border-color: color-mix(in srgb, var(--serious) 38%, var(--border)); }
.nrow.warn .ndot { background: var(--serious); }
.nrow .nwhat { font-size: 14px; font-weight: 600; flex: none; }
.nrow .nwhy { font-size: 12.5px; color: var(--text-secondary); flex: 1; min-width: 0; }
.needs .nmore { align-self: flex-start; margin-top: 2px; }
/* Said out loud rather than shown by an absence: an empty space does not tell
   anyone whether the screen looked and found nothing, or never looked. */
.needs.calm {
  flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 4px;
}

/* ---- the release queue ----
   A queue of nineteen is a table. Nineteen near-identical cards at ninety
   pixels each was a table wearing a costume. */
.wqueue { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.wqueue h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em;
}
.wqueue h3 .wn {
  font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: var(--wash); border-radius: 2px; padding: 1px 8px; color: var(--text-primary);
}
/* A count with no age says nothing about whether anyone is falling behind. */
.wqueue h3 .qage { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); }
.wqueue .card { width: 100%; }
.wqueue tbody tr.attention { background: var(--tint-bad); }
.wqueue tbody tr.attention:hover { background: var(--tint-bad); filter: brightness(0.985); }
.wqueue td b { font-weight: 600; }

/* ---- the bands ----
   Today is bands stacked in the order the room works in, not columns side by
   side. Columns gave a bench holding one load and a backlog holding nineteen
   the same width, which says they are comparable piles. Each band now takes
   the shape its contents deserve: a sentence, a row of cards, a table. */
.wband { display: flex; flex-direction: column; gap: 9px; min-width: 0; margin-bottom: 26px; }
.wband h3, .bench h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 2px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em;
}
.wband h3 .wn, .bench h3 .wn, .bhead .wn {
  font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0;
  background: var(--wash); border-radius: 2px; padding: 1px 8px; color: var(--text-primary);
}

/* ---- a band header, which is also the way to fold it ----
   The same object as a step header on the load screen, down to the chevron:
   the whole row is the button, and the turn of the chevron is the state. The
   bands are stacked rather than side by side, so a fold here takes away
   height, where a folded step narrows into a rail. */
.bhead {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 2px; padding: 4px 0; border: 0; background: none;
  font: inherit; text-align: left; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em;
}
.bhead .btitle { flex: none; }
/* What the band still says when it is shut. Never a count on its own: a count
   with no shape to it says nothing about whether anyone should be worried. */
.bhead .bnote {
  flex: 1; min-width: 0; letter-spacing: 0; text-transform: none;
  font-weight: 500; font-size: 12.5px; color: var(--muted);
}
/* Shut points along the row, open points down at what it opened: the bands
   stack, so the chevron follows the direction the content actually goes. */
.bhead .pchev {
  flex: none; margin-left: auto; color: var(--muted);
  transform: rotate(90deg); transition: transform 140ms ease;
}
.bhead[aria-expanded="false"] .pchev { transform: none; }
/* ---- colour on a shut band ----
   The rule the whole product follows: a soft tint and a full border, never a
   bar down one side, and never on something that has nothing wrong with it.
   A shut band is the one place a header speaks for its contents, so it takes
   the contents' colour and hands it straight back when it opens. */
.bhead.flag { padding: 8px 12px; border: 1px solid var(--border); border-radius: 2px; }
.bhead.flag .bdot { flex: none; width: 8px; height: 8px; border-radius: 999px; }
.bhead.flag.bad {
  background: var(--tint-bad); border-color: color-mix(in srgb, var(--critical) 38%, var(--border));
}
.bhead.flag.bad .bdot { background: var(--critical); }
.bhead.flag.warn {
  background: var(--tint-serious); border-color: color-mix(in srgb, var(--serious) 38%, var(--border));
}
.bhead.flag.warn .bdot { background: var(--serious); }
.bhead.flag .wn { background: var(--surface-1); }

.bhead:hover { color: var(--text-primary); }
.bhead:hover .pchev { color: var(--series-1); }
.bhead:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
/* A shut band is a line, so it keeps a line's worth of room around it. */
.wband.shut, .needs.shut, .wqueue.shut { margin-bottom: 14px; gap: 0; }
.needs.shut, .wqueue.shut { display: block; }
/* A live stage holds one to three loads, so the cards run across the full
   width and wrap. They keep a card shape because they are the things someone
   is physically waiting on, not rows in a backlog. */
.wstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
@media (max-width: 700px) { .wstrip { grid-template-columns: minmax(0, 1fr); } }

/* The bench, stated rather than held: Packing owns the cards, Today says in
   one line what is there. No tint, because a load that has not been through a
   machine is not claiming anything is sterile. */
.bench {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 11px 14px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px;
}
.bench h3 { margin: 0; flex: none; }
.bench .bmeta {
  font-size: 13px; color: var(--text-secondary); flex: 1; min-width: 0;
  text-align: left; font-weight: 400;
}
.bench .bgo { flex: none; min-width: 220px; }

/* Packing leads with the action, because starting a load is the most frequent
   thing anyone does in this product. */
.pactions { display: flex; margin-bottom: 16px; }
.pactions .wnew { min-width: 220px; }
.wnew { min-height: 46px; justify-content: center; }

.wcard {
  display: flex; flex-direction: column; gap: 6px; width: 100%;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 4px;
  padding: 13px 14px; min-height: 76px; text-align: left; font: inherit;
  color: var(--text-primary); cursor: pointer;
}
.wcard:hover { background: var(--wash); }
.wcard:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wcard.attention { background: var(--tint-bad); border-color: color-mix(in srgb, var(--critical) 38%, var(--border)); }
.wcard .wtitle { font-size: 14.5px; font-weight: 600; }
.wcard .wmeta { font-size: 12.5px; color: var(--text-secondary); }
.wcard .wfoot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 12px; font-size: 12px; margin-top: 2px;
}

/* ---- the scan bar, on the screen that exists to answer one question ---- */
.scanbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.scanbar input {
  flex: 1; max-width: 460px; font: inherit; font-size: 16px; letter-spacing: .06em;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px; padding: 11px 13px; min-height: 46px;
}
.scanbar input:focus { outline: none; box-shadow: var(--focus-ring); }
.scanout {
  border: 1px solid var(--border);
  background: var(--surface-1); border-radius: 4px; padding: 13px 15px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; max-width: 560px;
}
.scanout.pass { background: var(--tint-good); border-color: color-mix(in srgb, var(--good) 38%, var(--border)); }
.scanout.warn { background: var(--tint-serious); border-color: color-mix(in srgb, var(--serious) 38%, var(--border)); }
.scanout.fail { background: var(--tint-bad); border-color: color-mix(in srgb, var(--critical) 38%, var(--border)); }
.scanout .sh { font-size: 15px; font-weight: 600; }
.scanout .sm { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.scanout .sd { font-size: 13px; color: var(--text-secondary); }

/* ---- tabs inside a grouped screen ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--grid); margin-bottom: 18px; }
.tabs button {
  font: inherit; font-size: 13.5px; padding: 9px 13px; min-height: 40px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-secondary); cursor: pointer;
}
.tabs button:hover { color: var(--text-primary); }
.tabs button[aria-selected="true"] { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--series-1); }

/* ---- the sheet: what replaced prompt(), confirm() and alert() ----
   In the page, so it cannot be blocked by an embedding context, and sized for
   a gloved finger rather than a mouse. */
/* An author rule beats the browser's own [hidden] rule, so say it here or the
   invisible overlay keeps swallowing every click on the page behind it. */
.sheetwrap[hidden], .toast[hidden] { display: none !important; }
.sheetwrap {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(11, 11, 11, .34);
}
.sheetbox {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow-lg); padding: 20px 22px 18px; width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 12px;
}
.sheetbox h3 { font-size: 16.5px; margin: 0; letter-spacing: -0.01em; }
.sheetbox p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.sfield { display: flex; flex-direction: column; gap: 5px; }
.sfield span { font-size: 12px; color: var(--text-secondary); }
.sfield select, .sfield input {
  font: inherit; font-size: 16px; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px; padding: 11px 12px; min-height: 48px;
}
.sfield input[type="password"] { letter-spacing: .45em; font-variant-numeric: tabular-nums; }
.sheetacts { display: flex; gap: 8px; margin-top: 2px; }
.sheetacts .btn { flex: 1; min-height: 48px; justify-content: center; display: inline-flex; align-items: center; }

/* ---- a message that does not stop anyone working ----
   The design system's Toast: a solid block in the status colour, a darker
   icon column, a white title and a line of detail, one outlined action, and a
   bar along the bottom that runs down with the time it stays.
   It floats over the page, so the block itself never intercepts a press: it
   once sat on top of "Send to the machine" and made the button take a second
   try, which on a bench reads as a broken button. Only its buttons take one. */
.toast {
  --toast-bg: var(--petrol-800); --toast-edge: var(--petrol-600);
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: var(--z-toast);
  display: flex; align-items: stretch; width: 400px; max-width: calc(100vw - 32px); overflow: hidden;
  background: var(--toast-bg); color: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); pointer-events: none;
}
.toast.good { --toast-bg: var(--green-700); --toast-edge: var(--green-600); }
.toast.bad { --toast-bg: var(--red-700); --toast-edge: var(--red-600); }
.toast.warn { --toast-bg: var(--amber-700); --toast-edge: var(--amber-600); }
.toast .ti { width: 48px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--toast-edge); }
.toast .ti .ic { width: 22px; height: 22px; }
.toast .tb { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 14px; }
.toast .tb b { font: 600 14px/1.3 var(--font-sans); }
.toast .tb small { font: 400 12.5px/1.4 var(--font-sans); color: rgba(255,255,255,.86); }
.toast .tacts { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
.toast .tact {
  height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-xs);
  background: transparent; color: var(--white); font: 600 12.5px/1 var(--font-sans); cursor: pointer; pointer-events: auto;
}
.toast .tact:hover { background: rgba(255,255,255,.12); }
.toast .tx {
  width: 30px; height: 30px; border: 0; background: transparent; color: rgba(255,255,255,.8); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; pointer-events: auto;
}
.toast .tbar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.45);
  transform-origin: left; animation: sv-toast-timer linear forwards;
}
@keyframes sv-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* In the dark theme the -700 steps sink into the navy, so the block takes the
   -600 step and the icon column goes one step darker instead. */
:root[data-theme="dark"] .toast { --toast-bg: var(--petrol-600); --toast-edge: #0A3F4B; }
:root[data-theme="dark"] .toast.good { --toast-bg: var(--green-600); --toast-edge: var(--green-700); }
:root[data-theme="dark"] .toast.bad { --toast-bg: var(--red-600); --toast-edge: var(--red-700); }
:root[data-theme="dark"] .toast.warn { --toast-bg: var(--amber-600); --toast-edge: var(--amber-700); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast { --toast-bg: var(--petrol-600); --toast-edge: #0A3F4B; }
  :root:not([data-theme="light"]) .toast.good { --toast-bg: var(--green-600); --toast-edge: var(--green-700); }
  :root:not([data-theme="light"]) .toast.bad { --toast-bg: var(--red-600); --toast-edge: var(--red-700); }
  :root:not([data-theme="light"]) .toast.warn { --toast-bg: var(--amber-600); --toast-edge: var(--amber-700); }
}

/* ---- picking what goes in the load: tiles, not rows with a small button ---- */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 9px; }
.pick {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  text-align: left; font: inherit;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 14px; min-height: 76px; color: var(--text-primary); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.pick:hover { border-color: var(--petrol-400); background: var(--surface-selected); }
.pick:active { background: var(--petrol-100); transform: scale(.985); }
.pick:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pick .pn { font: 600 14px/1.25 var(--font-sans); padding-right: 44px; }
.pick .pc {
  font-size: 11.5px; font-weight: 500; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The signed-in chip sits in a 224px sidebar, so the name truncates rather
   than pushing "Sign out" onto its own line. */
.userchip { width: 100%; }
.userchip > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userchip .linkbtn { flex: none; }

/* ---- how many of each ----
   A practice sterilises thirty of one kit at a time, so the quantity is a
   control of its own rather than thirty presses of the same tile. */
.qtybar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 14px; margin-bottom: 12px; border-radius: var(--radius-md);
  background: var(--graphite-50); border: 1px solid var(--border-subtle);
}
.qtybar .ql { font: var(--type-label); color: var(--text-secondary); }
/* The stepper is one joined control: minus, the typed value, plus. */
.qset { display: flex; align-items: center; }
.qset .qstep {
  width: var(--control-touch); height: var(--control-touch); border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-primary); font: 500 20px/1 var(--font-sans);
  cursor: pointer;
}
.qset .qstep:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.qset .qstep:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.qset .qstep:hover:not(:disabled) { background: var(--surface-hover); }
.qset .qstep:disabled { opacity: .45; cursor: not-allowed; }
/* Specific enough to beat the .pane input rule, which stretches fields. */
.qtybar .qset input {
  width: 56px; flex: none; height: var(--control-touch); margin: 0; text-align: center;
  font: 600 18px/1 var(--font-mono); color: var(--text-primary); background: var(--surface-card);
  border: 1px solid var(--border-strong); border-left: 0; border-right: 0; border-radius: 0;
}
/* Quick amounts. 36px is the lower limit for a chip on the bench. */
.qquick { display: flex; flex-wrap: wrap; gap: 6px; }
.qquick button {
  height: 36px; min-width: 40px; padding: 0 10px; border-radius: var(--radius-sm); cursor: pointer;
  font: 600 13px/1 var(--font-mono); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-primary);
}
.qquick button:hover { border-color: var(--border-strong); }
.qquick button[aria-pressed="true"] { border-color: var(--action-primary); background: var(--action-primary); color: var(--text-inverse); }

/* The multiplier is stated on every tile, so a batch can never be added by
   accident while a quantity is set: a quiet + at one, a filled +N above. */
.pick .px {
  position: absolute; top: 10px; right: 10px; height: 24px; min-width: 24px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--petrol-800); font: 600 12px/1 var(--font-mono);
}
.pick:hover .px { background: var(--petrol-100); }
.pick .px.on { background: var(--action-primary); color: var(--text-inverse); }

/* ---- the load, grouped ---- */
.grp { border-bottom: 1px solid var(--grid); }
.grp:last-child { border-bottom: 0; }
.ghead { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex-wrap: wrap; }
.gname {
  flex: 1 1 180px; min-width: 0; min-height: var(--control-touch); display: flex; align-items: center; gap: 12px;
  text-align: left; font: inherit; background: none; border: 0; padding: 0;
  color: var(--text-primary); cursor: pointer;
}
.gcount {
  flex: none; min-width: 36px; height: 30px; padding: 0 6px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--font-mono); background: var(--petrol-100); color: var(--petrol-800);
}
.gtext { display: flex; flex-direction: column; min-width: 0; }
.gtitle { font: var(--type-label); }
.gchev { font: var(--type-caption); color: var(--text-secondary); white-space: nowrap; }
/* Touch size on the bench: these are pressed with gloves on. */
.gdel {
  flex: none; min-width: var(--control-touch); height: var(--control-touch); padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-primary); font: 600 14px/1 var(--font-sans); cursor: pointer;
}
.gdel.mono { font-family: var(--font-mono); }
.gdel:hover { border-color: var(--critical); color: var(--critical); }
.gcodes { padding: 0 0 8px 48px; display: flex; flex-direction: column; gap: 2px; }
.crow {
  display: grid; grid-template-columns: 84px 1fr var(--control-touch); gap: 8px; align-items: center;
  font-size: 12.5px; padding: 2px 0;
}
.crow .num { color: var(--muted); letter-spacing: .06em; }
.crow button {
  width: var(--control-touch); height: var(--control-touch); border-radius: var(--radius-sm); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-primary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.crow button:hover { border-color: var(--critical); color: var(--critical); }


/* On a phone the sidebar becomes a strip, and the footer's helper text has no
   room to be helpful. The controls stay; the prose goes. */
@media (max-width: 860px) {
  .sidefoot { flex-wrap: wrap; gap: 8px; }
  .sidefoot .sub { display: none; }
  .sidefoot > div { flex: 1 1 auto; }
}

/* ---- scanning the labels back ----
   Top of the pane once anything is printed, because at that point it is the
   only thing the person is doing, once per pouch. */
.scanback {
  border: 1px solid var(--border);
  background: var(--wash); border-radius: 4px; padding: 12px 14px; margin-bottom: 14px;
}
.scanback.done { background: var(--tint-good); border-color: color-mix(in srgb, var(--good) 38%, var(--border)); }
.scanback .sbhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.scanback .sbhead b { font-size: 13.5px; }
.scanback .sbcount { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.scanback input {
  width: 100%; font: inherit; font-size: 16px; letter-spacing: .06em; min-height: 46px;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px;
}
.scanback input:focus { outline: none; box-shadow: var(--focus-ring); }
.scanback .sbnote { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }

/* When the label went on, kept beside the scan status rather than instead of
   it. Folding the two together hid the first: a late-labelled pouch read
   "Labelled after the cycle" for ever, so scanning it back changed nothing
   visible and looked as though the scan had been ignored. */
.latemark {
  display: inline-block; font-size: 11px; white-space: nowrap;
  color: var(--serious); border: 1px solid currentColor; border-radius: 2px;
  padding: 0 7px; margin-right: 7px;
}
.crow .cstat { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }

/* A scan that contradicts the load being sealed in the chamber. Red, because
   unlike a late label this is not a weaker claim, it is two records that cannot
   both be true. */
.badmark {
  display: inline-block; font-size: 11px; white-space: nowrap; font-weight: 600;
  color: var(--critical); border: 1px solid currentColor; border-radius: 2px;
  padding: 0 7px; margin-right: 7px;
}

/* ---- what gets printed on a pouch ----
   Shown at the configured stock size, because the elements the national rules
   ask for do not shrink to fit whatever roll the practice happened to buy. */
/* ---- what gets printed on a pouch ----
   Positioned from the layout the printer is handed, scaled to the screen, so
   the picture cannot drift from the label. */
.lblwrap { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.lblwrap h3 { font-size: 13px; margin: 0; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.lbl {
  position: relative; background: #fff; color: #000;
  border: 1px solid var(--border-strong); border-radius: 2px;
  /* The printer's font is a condensed sans, so the preview is set in sans:
     mono ran wider than the print and clipped the date that fits on paper. */
  font-family: var(--font-sans);
  overflow: hidden; flex: none;
}
.lbl .lf {
  position: absolute; font-style: normal; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.lbl .lf-code { font-weight: 700; letter-spacing: .04em; }
.lbl .lf-contents { font-weight: 700; letter-spacing: -.01em; }
.lbl .lf { font-weight: 600; }
.lbl .lf-code, .lbl .lf-contents { font-weight: 700; }
.lbl .lr { position: absolute; background: #000; }
.lbl .lq {
  position: absolute;
  background:
    repeating-linear-gradient(90deg, #111 0 3px, #fff 3px 6px),
    repeating-linear-gradient(0deg, #111 0 3px, #fff 3px 6px);
  background-blend-mode: difference;
}

/* ---- the category list, beside the kits it applies to ----
   Chips rather than a textarea of comma-separated words: the count says which
   ones are load-bearing, and a category still in use cannot be removed. */
.cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cat {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  border: 1px solid var(--border); background: var(--surface-1);
  border-radius: 2px; padding: 3px 5px 3px 11px;
}
.cat i {
  font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--wash); border-radius: 2px; padding: 0 6px;
}
.cat button {
  width: 22px; height: 22px; flex: none; line-height: 1; font: inherit; font-size: 14px;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.cat button:hover:not(:disabled) { background: var(--wash); color: var(--critical); }
.cat button:disabled { opacity: .3; cursor: not-allowed; }
.catadd { display: flex; gap: 8px; align-items: center; }
/* Specific enough to beat the .pane input rule, which stretches every field
   to 100% and would push the Add button off the end of the row. */
.pane .catadd input[type="text"] { flex: none; width: 220px; margin-bottom: 0; }

/* ---- borrowing a drawing ----
   A drawing cannot be guessed from a name and a wrong one is worse than none,
   so an item reuses one already in the catalogue. The preview is beside the
   picker because the names alone do not tell you what you are choosing. */
.drawpick { display: flex; align-items: center; gap: 9px; }
.drawpick .dl { font-size: 12px; color: var(--text-secondary); flex: none; }
/* Specific enough to beat the .pane select rule, which stretches every field. */
.pane .drawpick select { flex: 1; min-width: 0; margin-bottom: 0; }
.drawpick .dp { flex: none; width: 66px; display: inline-flex; justify-content: center; color: var(--text-secondary); }
.drawpick .dp svg { width: 66px; height: 14px; }
.drawpick .dp em { font-size: 11px; color: var(--muted); font-style: normal; }
/* .itemrow svg is the instrument drawing at 66x14. The pencil is also an svg
   inside an .itemrow, so without this it inherits that size and is squashed
   into an empty-looking box. */
.itemrow .iq [data-edititem] { color: var(--muted); }
.itemrow .iq [data-edititem]:hover { color: var(--series-1); border-color: var(--series-1); }
.itemrow .iq svg { width: 12px; height: 12px; }

/* ---- a photograph in place of the sketch ----
   Same footprint as the drawing so a row of items still lines up, cropped
   rather than squashed because a phone photo is never 240x48. */
.itemimg { width: 66px; height: 22px; object-fit: cover; border-radius: 4px; display: block; }
.kitcard .kt .itemimg { width: 44px; height: 14px; }
.drawpick .dp .itemimg { width: 66px; height: 22px; }
.pane .catsearch {
  width: 100%; font: inherit; font-size: 13px; margin-bottom: 9px;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 2px; padding: 7px 9px;
}
.drawpick input[type="file"] { flex: 1; min-width: 0; font-size: 12px; }

/* ---- the step numbers ----
   Where you are in the flow, without gating anything. Lit when the step is
   satisfied, quiet when it is not, and every control live either way. */
.stepno {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 20px; padding: 0 8px; border-radius: 2px; margin-right: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted); background: var(--wash); border: 1px solid var(--border);
}
/* Done is the same solid green with white text as a done step in the stepper. */
.stepno.done { color: var(--white); background: var(--green-600); border-color: var(--green-600); }
.pane h3 { display: flex; align-items: center; }
/* What is already packed opens Step 2, above the picker: the bench has to see
   the load it is building without scrolling past eight kit tiles. */
.packed:not(:empty) { margin-bottom: 4px; }
.actions .stepno { margin-right: 2px; }

/* ---- the machine, on a plate ----
   Whatever the picture is, it sits on the same tinted plate with the same
   edge, so the drawing and a photograph read as the same kind of object and a
   practice with one of each does not get two different tiles side by side.

   The plate is never the colour of the card behind it, because dental
   autoclaves are white and a product shot with a transparent background would
   disappear. It follows the theme, so the drawing on it keeps its own colours
   instead of inverting into a dark silhouette on a light ground.

   Three signals, because a solid-background photograph covers the plate:
   the plate tint, the edge, and the light in the corner. Only the edge and the
   light survive an image that fills the frame, which is why the edge carries
   the state too. */
.mplate {
  position: relative; display: block; width: 100%;
  --plate-bg: var(--plate);
  --plate-line: var(--plate-edge);
  aspect-ratio: 1; border-radius: 4px; overflow: hidden;
  background: var(--plate-bg); border: 1.5px solid var(--plate-line);
}
/* The whole machine, as large as the square allows. Never cropped: a product
   shot is square-ish and a bench photograph is landscape, and cropping either
   to fill would cut the machine rather than the paper around it. The blank
   margin is taken off at upload instead, which is where it belongs. */
.mplate > img, .mplate > svg {
  display: block; width: 100%; height: 100%; object-fit: contain; padding: 5px;
}
/* "All in order" stays neutral. Colour in this product means a clinical state,
   and a green plate under every healthy machine spends that meaning on
   nothing. Only the two states worth looking up for are tinted. */
.mplate.soon { --plate-bg: var(--plate-warn); --plate-line: var(--warning); }
.mplate.attention { --plate-bg: var(--plate-crit); --plate-line: var(--critical); }
/* The ring is whichever plate is underneath, so the light reads as a light
   rather than as a sticker stuck on the picture. */
.mled {
  position: absolute; top: 7px; right: 7px; width: 9px; height: 9px;
  border-radius: 999px; box-shadow: 0 0 0 2px var(--plate-bg);
}
.mled.ok { background: var(--good); }
.mled.soon { background: var(--warning); }
.mled.attention { background: var(--critical); }
.mart .mplate { max-width: 150px; }
.machthumb {
  width: 104px; height: 104px; object-fit: contain; padding: 5px; border-radius: 4px;
  display: block; background: var(--plate); border: 1px solid var(--plate-edge);
}

/* ---- the machine's picture, wherever it is named ----
   The same plate at row and inline size. No state light on the inline one: in a
   line of running text it reads as punctuation rather than as a signal. */
.mchip { display: block; width: 62px; flex: none; }
.mchip .mplate { width: 100%; }
/* The 5px inset that frames a 150px plate eats a fifth of a 62px one, and the
   machine inside is mostly white. Less air, so the outline still reads. */
.mchip .mplate > img, .mchip .mplate > svg { padding: 2px; }
.mchip.sm { display: inline-block; width: 26px; margin-right: 6px; vertical-align: -8px; }
.mchip.sm .mled { display: none; }
.devname { display: flex; align-items: center; gap: 12px; }
.cgmachine { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.cgmachine > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.devname > span { min-width: 0; }

/* ---- choosing the machine by sight ----
   Staff know their autoclave by looking at it. A dropdown of serial numbers
   was the one place this app asked them to know it by its paperwork. After the
   design system's MachineTile: a 168px plate on top, contain-fit, with a solid
   state badge in the corner; the name, the last test and a round mark below. */
.mpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 10px; }
.mtile {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface-card); border: 1px solid var(--border-default);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.mtile:hover { box-shadow: var(--shadow-md); }
.mtile[data-on] { background: var(--surface-selected); border-color: var(--petrol-500); box-shadow: 0 0 0 1px var(--petrol-500); }
.mtile.attention { border-color: color-mix(in srgb, var(--status-fail-solid) 45%, var(--border-default)); }
.mtplate { position: relative; height: 168px; padding: 10px; background: var(--plate); }
.mtile.attention .mtplate { background: var(--status-fail-bg); }
.mtplate .mplate { height: 100%; aspect-ratio: auto; border: 0; background: transparent; }
.mtplate .mled { display: none; }
.mtbadge { position: absolute; top: 10px; right: 10px; pointer-events: none; }
.mtphoto { position: absolute; left: 10px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; text-decoration: none; }
.mtpick {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px 12px 16px;
  border: 0; border-top: 1px solid var(--border-subtle); background: transparent; text-align: left;
  font: inherit; color: var(--text-primary); cursor: pointer;
}
div.mtpick { cursor: default; }
.mtpick:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.mttext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mtname { font: 600 15px/1.25 var(--font-sans); }
.mttest { display: flex; align-items: center; gap: 6px; font: var(--type-caption); color: var(--text-secondary); }
.mttest.bad { color: var(--status-fail-fg); }
.mttest .ic { width: 12px; height: 12px; }
.mtradio {
  width: 26px; height: 26px; flex: none; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-strong); background: var(--surface-card); color: var(--white);
}
.mtile[data-on] .mtradio { border-color: var(--petrol-600); background: var(--petrol-600); }
.mpick + .hint { display: block; font: var(--type-caption); color: var(--text-tertiary); margin: 0 0 10px; }

/* A status word on its solid colour, for a badge that sits on a picture.
   White whatever the theme rules below say about a badge's text colour. */
.badge.solid { color: var(--white) !important; background: var(--graphite-600); }
.badge.solid.pass { background: var(--green-600); }
.badge.solid.fail { background: var(--red-600); }
.badge.solid.warn { background: var(--amber-600); }
.badge.solid.running { background: var(--blue-600); }

/* ---- kit categories, ahead of the kits ----
   At the bench you know it is a surgery tray before you know which one. */
.cattiles { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; }
.cattile {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 0 14px; border-radius: var(--radius-md); min-height: var(--control-touch);
  background: var(--surface-card); border: 1px solid var(--border-default); color: var(--text-primary);
  font: 500 13px/1 var(--font-sans);
}
.cattile:hover { border-color: var(--border-strong); }
.cattile[aria-pressed="true"] { border-color: var(--petrol-600); background: var(--action-primary); color: var(--text-inverse); }
.cattile .cc { font: 600 11px/1 var(--font-mono); opacity: .75; }


/* =========================================================================
   App frame, after the Steriview design file.
   A top bar that says where you are and takes a search or a scan from
   anywhere; a rail that carries the practice, the daily screens, and the
   configuration apart from them; cards with a header instead of loose
   headings. Tokens only: every colour below is already defined above.
   ========================================================================= */
.app { grid-template-columns: 232px minmax(0, 1fr); }
.side { padding: 0 12px 14px; gap: 0; }
.brand { height: 52px; align-items: center; padding-inline: 10px; }
.brand h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }

.practice {
  display: flex; align-items: center; gap: 9px; margin: 4px 0 16px;
  padding: 8px 10px; border: 1px solid #133f49; border-radius: 3px;
}
.practice .pico { color: var(--petrol-300); display: inline-flex; flex: none; }
.practice .ptext { display: flex; flex-direction: column; min-width: 0; }
.practice .pname { font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.practice .pwhere { font-size: 11px; color: var(--petrol-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side nav a { height: 34px; padding: 0 10px; gap: 10px; font-size: 13px; font-weight: 500; border-left: 0; }
.side nav a[aria-current="page"] { font-weight: 500; }
.side nav a .nl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side nav a .count { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border-radius: 2px; min-width: 0; background: var(--petrol-700); }
.side nav a .count.alert { background: var(--red-600); }
.side .sidefoot { border-top: 1px solid #133f49; padding: 12px 0 0; gap: 10px; }
.side .sidefoot nav { display: flex; flex-direction: column; gap: 2px; }
.side .sidefoot nav a, .side .sidefoot nav a * { color: var(--petrol-200); }
.side .sidefoot nav a[aria-current="page"], .side .sidefoot nav a[aria-current="page"] * { color: #fff; }
.sidetools { display: flex; flex-direction: column; gap: 6px; }
.sidetools .btn { font-size: 12px; min-height: 30px; padding: 5px 9px; text-align: center; cursor: pointer; }
.side .sidefoot .sub { font-size: 11px; line-height: 1.45; padding-inline: 10px; }
.side .userchip { border-radius: 3px; }
.side .avatar { border-radius: 3px; background: var(--petrol-700); }

.mainwrap { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 52px; flex: none;
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
  background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.crumbs .here { color: var(--text-primary); }
.crumbs .mono { font-family: var(--font-mono); }
.crumbs .csep { color: var(--muted); font-weight: 400; }
.gsearch {
  display: flex; align-items: center; gap: 8px; width: min(340px, 34vw); height: 32px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-1); color: var(--muted);
}
.gsearch:focus-within { box-shadow: var(--focus-ring); border-color: var(--series-1-ring); }
.gsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; color: var(--text-primary); }

.main { padding: 24px 24px 72px; max-width: 1440px; width: 100%; }

.viewhead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.viewhead .vhtext { flex: 1; min-width: 260px; }
.viewhead h2 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viewhead p { margin-top: 4px; font-size: 13px; max-width: 88ch; }
.viewhead .vhacts { display: flex; gap: 8px; flex-wrap: wrap; }
.viewhead .vhacts .btn { min-height: 34px; display: inline-flex; align-items: center; font-weight: 500; text-decoration: none; }

/* ---- a card with a header ---- */
.ccard {
  display: flex; flex-direction: column; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 16px;
  text-align: left; font: inherit; color: var(--text-primary); padding: 0; width: 100%;
}
.ccard .chead { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--grid); }
.ccard .cht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ccard .cht h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ccard .cht p { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); }
.ccard .cha { display: flex; gap: 8px; align-items: center; }
.ccard .cbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ccard .cfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--grid); font-size: 12px; color: var(--text-secondary); }

/* ---- a status word on a tint ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none;
  font: 500 12px/1 var(--font-sans); padding: 4px 7px; border-radius: 2px;
  background: var(--wash); color: var(--text-secondary);
}
.badge svg { width: 12px; height: 12px; flex: none; }
.badge.pass { background: var(--tint-good); color: var(--good); }
.badge.fail { background: var(--tint-bad); color: var(--critical); }
.badge.warn { background: var(--tint-warn); color: var(--warning); }
:root:not([data-theme="dark"]) .badge.pass { color: var(--green-700); }
:root:not([data-theme="dark"]) .badge.fail { color: var(--red-700); }
:root:not([data-theme="dark"]) .badge.warn { color: var(--amber-700); }
.viewhead h2 .badge { font-size: 12px; letter-spacing: 0; }

/* ---- Overview ---- */
.mstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.mstrip .ccard { margin: 0; cursor: pointer; }
.ovm:hover { border-color: color-mix(in srgb, var(--series-1) 45%, var(--border)); }
.ovm:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ovm .ovname { font-size: 14px; font-weight: 600; }
.ovm .ovsub { font-size: 12px; color: var(--text-secondary); }
.ovm .ovlast { font-size: 13px; color: var(--text-secondary); }
.ovm .ovlast b { color: var(--text-primary); font-weight: 500; }
.omrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.om { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.omk { font: 600 11px/1.3 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.omv { font: 500 18px/1.2 var(--font-mono); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omv small { font: 400 12px var(--font-mono); color: var(--muted); margin-left: 4px; }
.omv.bad { color: var(--critical); }
.ovm .golink { color: var(--series-1); font-weight: 500; font-size: 13px; }

.ovgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ovside { display: flex; flex-direction: column; gap: 16px; }
.ovside .bench { margin: 0; flex-direction: column; align-items: flex-start; gap: 6px; }
.ovside .ccard { margin: 0; }
.printercard .prow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.printercard .pico { color: var(--text-secondary); display: inline-flex; }
.printercard .ptext { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.printercard .ptext .dim { font-size: 12px; }
@media (max-width: 1100px) { .ovgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- tabs carry a count ---- */
.tabs { gap: 20px; margin-bottom: 16px; }
.tabs button { padding: 9px 0; font-weight: 500; }
.tabs button[aria-selected="true"] { font-weight: 500; }
.tabs .tn { font: 500 11px/1 var(--font-mono); background: var(--wash); color: var(--text-secondary); border-radius: 2px; padding: 3px 5px; margin-left: 7px; }

/* ---- settings beside the label they change ---- */
.setlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.setlayout .setgrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.setside { position: sticky; top: 68px; }
.setside .lblwrap { margin-top: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px; }
.savebar { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1100px) { .setlayout { grid-template-columns: minmax(0, 1fr); } .setside { position: static; } }

.mono { font-family: var(--font-mono); font-feature-settings: "zero" 1; }
.devrow td { vertical-align: top; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { padding: 0 14px 12px; }
  .practice { margin-bottom: 10px; }
  .side .sidefoot { border-top: 0; padding-top: 6px; flex-wrap: wrap; }
  .side .sidefoot nav { flex-direction: row; }
  .sidetools { flex-direction: row; }
  .topbar { padding: 0 16px; gap: 8px; }
  .crumbs { display: none; }
  .gsearch { flex: 1; width: auto; }
  .main { padding: 18px 16px 56px; }
  .omrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.side .sidefoot code { font-family: inherit; font-size: inherit; word-break: normal; }

/* ---- a cycle: the trace, with its verdict beside it ---- */
.cyclegrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.cgside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 68px; }
.cgside .ccard { margin: 0; }
.cgside .checks { gap: 0; margin: 0; }
.cgside .check { border: 0; border-bottom: 1px solid var(--grid); border-radius: 0; padding: 10px 16px; background: none; }
.cgside .check:last-child { border-bottom: 0; }
.check .clbl { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.cgside .check .txt { font-size: 12.5px; }
.cgside .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.cgside .metric { border: 0; border-radius: 0; border-bottom: 1px solid var(--grid); padding: 10px 16px; }
.cgside .metric:nth-child(odd) { border-right: 1px solid var(--grid); }
.cgside .metric .v { font-size: 15px; }
@media (max-width: 1180px) { .cyclegrid { grid-template-columns: minmax(0, 1fr); } .cgside { position: static; } }

/* ---- kits: the list, and the one you picked ---- */
.kitlayout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.kitcol { display: flex; flex-direction: column; gap: 16px; }
.kitcol .ccard, .kitcol .pane { margin: 0 !important; }
.kitfilter { padding: 10px 12px; border-bottom: 1px solid var(--grid); }
.kitfilter input { width: 100%; font: inherit; font-size: 13px; padding: 6px 9px; min-height: 32px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-1); color: var(--text-primary); }
.kitlistcard .kitlist { display: flex; flex-direction: column; gap: 0; margin: 0; }
.kitlistcard .kitcard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 8px;
  border: 0; border-bottom: 1px solid var(--grid); border-radius: 0; padding: 10px 14px; background: none;
}
.kitlistcard .kitcard .kn { font-size: 13px; font-weight: 500; grid-column: 1; }
.kitlistcard .kitcard .kd { font-size: 12px; grid-column: 1; }
.kitlistcard .kitcard .kchev { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 18px; }
.kitlistcard .kitcard:hover { background: var(--wash); }
.kitlistcard .kitcard[aria-pressed="true"] { background: var(--surface-selected, var(--series-1-soft)); box-shadow: inset 2px 0 0 transparent; }
.kitlistcard .kitcard[aria-pressed="true"] .kn { color: var(--series-1); font-weight: 600; }
.kitlistcard .kitcard.knew .kn { color: var(--series-1); }
.kitlistcard .kitcard:last-child { border-bottom: 0; }
.kitdetail .editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; }
.kitcol .cats { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1100px) { .kitlayout { grid-template-columns: minmax(0, 1fr); } .kitdetail .editor { grid-template-columns: minmax(0, 1fr); } }

/* ---- where a load has got to ---- */
.stepper { list-style: none; margin: 0 0 18px; padding: 0; display: flex; align-items: center; gap: 12px; }
.stepper .sstep { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper .sn {
  width: 28px; height: 28px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--font-mono); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-tertiary);
}
.stepper .sn svg { width: 15px; height: 15px; }
.stepper .sl { font: 500 14px/1 var(--font-sans); color: var(--text-tertiary); }
/* Done: solid green with a white check, the same in both themes. */
.stepper .done .sn { background: var(--green-600); border-color: var(--green-600); color: var(--white); }
.stepper .done .sl { color: var(--text-secondary); }
.stepper .now .sn { background: var(--action-primary); border-color: var(--action-primary); color: var(--white); }
.stepper .now .sl { color: var(--text-primary); font-weight: 600; }
.stepper .sline { flex: 1; min-width: 24px; height: 2px; border-radius: 1px; background: var(--border-default); }
.stepper .sline.on { background: linear-gradient(90deg, var(--action-go-from), var(--action-go-to)); }
@media (max-width: 700px) { .stepper .sl { display: none; } }

/* Every step header on the load screen is a gloved target too. */
.editor .phead { min-height: var(--control-touch); }

/* ---- the chamber, as a soft bar ----
   Provisional: shown only where a practice has typed a capacity in. Amber when
   over, and it never stops anything. */
#capslots { height: var(--control-md); padding: 0 10px; font: var(--type-data); border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); }
.capbar { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.capbar .caphead { display: flex; justify-content: space-between; font: var(--type-caption); color: var(--text-secondary); }
.capbar .caphead .mono { font: var(--type-data); font-size: 12px; }
.capbar.over .caphead .mono { color: var(--status-warn-fg); }
.capbar .captrack { height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.capbar .captrack i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--action-go-from), var(--action-go-to));
  transition: width var(--duration-base) var(--ease-standard);
}
.capbar.over .captrack i { background: var(--status-warn-solid); }
.capbar .capwarn {
  display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--status-warn-bg); color: var(--status-warn-fg); font: var(--type-caption);
}

/* ---- labels, all at once or by category ---- */
.lprint { border: 1px solid var(--border-default); border-radius: var(--radius-md); margin-top: 12px; overflow: hidden; }
.lphead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.lphead + .lgroup { border-top: 1px solid var(--border-subtle); }
.lpcount { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lpcount b { font: 600 22px/1 var(--font-mono); color: var(--text-primary); }
.lpcount b span { color: var(--text-tertiary); font-weight: 500; }
.lpcount small { font: var(--type-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.lphead .btn { min-height: var(--control-touch); }
.lgroup { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.lgroup:last-child { border-bottom: 0; }
.lgico {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--text-secondary);
}
.lgico.done { background: var(--status-pass-bg); color: var(--status-pass-fg); }
.lgtext { flex: 1 1 0; min-width: 0; }
.lgname { font: 600 14px/1.3 var(--font-sans); }
.lgname .mono { font: 500 12px/1 var(--font-mono); color: var(--text-tertiary); margin-left: 6px; }
.lgkits { font: var(--type-caption); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgroup .btn { flex: none; min-width: 104px; min-height: var(--control-touch); padding: 0 12px; }

/* ---- the chemical indicator: asked, never required ---- */
.indcheck {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; min-height: var(--control-touch);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer;
}
.indcheck input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--action-primary); }
.indcheck span { display: flex; flex-direction: column; gap: 2px; }
.indcheck b { font: var(--type-label); }
.indcheck small { font: var(--type-caption); color: var(--text-secondary); }

/* ---- the door: why it is not ready yet, right-aligned beside it ---- */
.doorbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.doorbar .doorwhy { flex: 1 1 160px; font: var(--type-caption); color: var(--text-secondary); text-align: right; }
.doorbar #send { flex: 0 1 380px; min-width: 260px; }

/* ---- an empty bench ---- */
.benchhero {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding: 40px 32px; margin-bottom: 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card);
}
.benchhero .bhico {
  width: 72px; height: 72px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--petrol-100) 60%, var(--surface-card)); color: var(--petrol-700);
}
.benchhero .bhico .ic { width: 34px; height: 34px; }
.benchhero .bhtext { flex: 1 1 280px; min-width: 0; }
.benchhero h3 { margin: 0; font: var(--type-h2); color: var(--text-primary); }
.benchhero p { margin: 6px 0 0; font: var(--type-body); color: var(--text-secondary); max-width: 460px; }
.benchhero .btn { flex: 0 1 380px; min-width: 300px; }
.benchrest { margin-top: 16px; }
.benchrest .ovrow > .ic:last-child { color: var(--text-tertiary); }
@media (max-width: 640px) {
  .benchhero { padding: 28px 20px; gap: 20px; }
  .benchhero .btn, .doorbar #send { min-width: 0; flex: 1 1 100%; }
  .doorbar .doorwhy { text-align: left; }
}
.pane > .hint { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.kitdetail .editor .pane:last-child .itemrow.pickrow { scroll-margin-top: 70px; }

/* =========================================================================
   Components, as the Steriview design system specifies them
   (components/*.jsx in the handoff), expressed as classes for this app's
   HTML. These come last so they are the ones that apply.
   ========================================================================= */
body { font: var(--type-body); color: var(--text-primary); background: var(--surface-app); -webkit-font-smoothing: antialiased; }
.ic { flex: none; display: block; }

/* Button: 34px, 3px radius, 500 13px, 14px sides; primary petrol-700,
   secondary white on border-strong. Hover one step darker, no lift. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-md); min-height: 0; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-primary);
  font: 500 13px/1 var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--action-secondary-hover); text-decoration: none; }
.btn:active { background: var(--graphite-150); }
.btn.primary { background: var(--action-primary); border-color: transparent; color: var(--text-inverse); font-weight: 500; padding: 0 14px; }
.btn.primary:hover { background: var(--action-primary-hover); }
.btn.primary:active { background: var(--action-primary-active); }
.btn.danger { background: var(--surface-card); color: var(--status-fail-fg); border-color: var(--border-strong); }
.btn.danger:hover { background: var(--status-fail-bg); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-hover); }
.btn.sm { height: var(--control-sm); padding: 0 10px; font-size: 13px; }
.btn.sm .ic { width: 14px; height: 14px; }
.btn:disabled { background: var(--surface-sunken); color: var(--text-disabled); border-color: var(--border-default); cursor: not-allowed; opacity: 1; }
.btn.primary:disabled { background: var(--graphite-300); color: var(--white); }
.btn.icon { width: var(--control-md); padding: 0; }
.btn[aria-pressed="true"] { border-color: var(--action-primary); color: var(--text-brand); }
.btn.lg { height: var(--control-lg); padding: 0 18px; font-size: 14px; }
/* Go: the one forward move on a screen, and only one per screen. Not for
   Release, which is a responsibility step and keeps petrol plus the PIN. */
.btn.go {
  background: linear-gradient(100deg, var(--action-go-from), var(--action-go-to)); border-color: transparent;
  color: var(--text-inverse); font-weight: 600; letter-spacing: .005em; box-shadow: var(--action-go-glow);
  transition: box-shadow var(--duration-base) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.btn.go:hover { background: linear-gradient(100deg, var(--action-go-hover-from), var(--action-go-hover-to)); box-shadow: var(--action-go-glow-hover); }
.btn.go:active { background: var(--green-700); transform: translateY(1px); }
.btn.go:disabled { background: var(--graphite-300); box-shadow: none; color: var(--white); transform: none; }
.btn.go .ic:last-child:not(:first-child) { margin-left: auto; padding-left: 4px; }
.btn.xl { height: var(--control-xl); padding: 0 24px; font-size: 16px; font-weight: 600; gap: 10px; }
.btn.xl .ic { width: 20px; height: 20px; }
.topbar .btn { height: var(--control-sm); min-height: 0; padding: 0 10px; }
.topbar .btn.icon { width: var(--control-sm); padding: 0; border-color: transparent; color: var(--text-secondary); }
.topbar .btn.icon:hover { background: var(--surface-hover); }

/* Badge: 22px (20 small), 2px radius, soft status tint, 12px icon or 6px dot. */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; flex: none;
  border-radius: var(--radius-xs); border: 1px solid transparent; white-space: nowrap;
  font: 500 12px/1 var(--font-sans); background: var(--status-pending-bg); color: var(--status-pending-fg);
}
.badge.sm { height: 20px; padding: 0 6px; font-size: 11px; }
.badge .bdot { width: 6px; height: 6px; border-radius: 1px; flex: none; background: var(--status-pending-solid); }
.badge svg { width: 12px; height: 12px; }
.badge.pass { background: var(--status-pass-bg); color: var(--status-pass-fg); } .badge.pass .bdot { background: var(--status-pass-solid); }
.badge.fail { background: var(--status-fail-bg); color: var(--status-fail-fg); } .badge.fail .bdot { background: var(--status-fail-solid); }
.badge.warn { background: var(--status-warn-bg); color: var(--status-warn-fg); } .badge.warn .bdot { background: var(--status-warn-solid); }
.badge.running { background: var(--status-running-bg); color: var(--status-running-fg); } .badge.running .bdot { background: var(--status-running-solid); }
.badge.released { background: var(--status-released-bg); color: var(--status-released-fg); } .badge.released .bdot { background: var(--status-released-solid); }
.badge.test { background: var(--status-test-bg); color: var(--status-test-fg); } .badge.test .bdot { background: var(--status-test-solid); }
:root:not([data-theme="dark"]) .badge.pass { color: var(--status-pass-fg); }
:root:not([data-theme="dark"]) .badge.fail { color: var(--status-fail-fg); }
:root:not([data-theme="dark"]) .badge.warn { color: var(--status-warn-fg); }

/* The app's inline status pills take the small badge's shape, so a status
   reads the same in every table and card. */
.pill {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-xs); font: 500 11px/1 var(--font-sans); white-space: nowrap;
  background: var(--status-pending-bg); color: var(--status-pending-fg);
}
.pill svg { width: 12px; height: 12px; }
.pill.pass { background: var(--status-pass-bg); color: var(--status-pass-fg); }
.pill.fail { background: var(--status-fail-bg); color: var(--status-fail-fg); }
.pill.warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.pill.indeterminate { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.flag { height: 20px; border-radius: var(--radius-xs); font: 500 11px/1 var(--font-sans); background: var(--status-fail-bg); border-color: transparent; color: var(--status-fail-fg); }

/* Tag */
.tag, .chip {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px;
  border-radius: var(--radius-xs); background: var(--surface-sunken); border: 1px solid var(--border-default);
  color: var(--text-secondary); font: 500 12px/1 var(--font-sans); white-space: nowrap;
}
.tag.mono { font: 400 11px/1 var(--font-mono); }
.chip { height: 20px; font-size: 11px; padding: 0 5px; margin-right: 6px; min-width: 20px; justify-content: center; }

/* Card */
.ccard, .card, .pane, .tile, .chartcard, .metric, .verdictbar, .confirm, .scopebar, .exp, .statblock, .check, .kitcard, .wcard, .mcard, .bench, .needs.calm {
  border-color: var(--border-default); border-radius: var(--radius-md); box-shadow: none;
}
.ccard { background: var(--surface-card); border: 1px solid var(--border-default); }
.ccard .chead { align-items: center; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.ccard .cht { gap: 1px; }
.ccard .cht h3, .ccard .cht .ovname { font: var(--type-h4); font-size: 14px; margin: 0; }
.ccard .cht p, .ccard .cht .ovsub { font: var(--type-caption); color: var(--text-secondary); margin: 0; }
.ccard .cbody { padding: 16px; }
.ccard .cfoot { padding: 10px 16px; border-top: 1px solid var(--border-subtle); font: var(--type-caption); color: var(--text-secondary); }
.pane h3, .tray h2 { font: var(--type-h4); font-size: 14px; }

/* Metric */
.metricx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.metricx .mk { font: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.metricx .mv { display: flex; align-items: baseline; gap: 4px; color: var(--text-primary); }
.metricx .mv b { font: 500 16px/1.2 var(--font-mono); letter-spacing: -0.02em; }
.metricx .mv small { font: 400 12px/1 var(--font-mono); color: var(--text-secondary); }
.metricx.fail .mv { color: var(--status-fail-fg); }
.metricx.warn .mv { color: var(--status-warn-fg); }

/* DataTable */
table { border-collapse: separate; border-spacing: 0; font: var(--type-body-sm); font-variant-numeric: tabular-nums; }
thead th {
  padding: 8px 12px; background: var(--graphite-50); border-bottom: 1px solid var(--border-default);
  font: 600 11px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap;
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
table.dense tbody td { padding: 7px 12px; }
tbody tr:hover { background: var(--graphite-50); }
td.mono, td .mono { font: var(--type-data); font-size: 12px; }
td.muted { color: var(--text-secondary); }
td.num, th.num { text-align: right; }

/* Tabs: 38px, 2px petrol underline, count chip */
.tabs { gap: 20px; border-bottom: 1px solid var(--border-default); margin-bottom: 16px; }
.tabs button { display: inline-flex; align-items: center; gap: 6px; height: 38px; min-height: 0; padding: 0; margin-bottom: -1px; font: 500 13px/1 var(--font-sans); color: var(--text-secondary); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--text-primary); font-weight: 500; border-bottom-color: var(--action-primary); }
.tabs .tn { margin-left: 0; font: 500 11px/1 var(--font-mono); padding: 3px 5px; border-radius: 2px; background: var(--surface-sunken); color: var(--text-secondary); }
.tabs button[aria-selected="true"] .tn { background: var(--petrol-100); color: var(--petrol-800); }

/* Inputs */
input[type="text"], input[type="search"], input[type="number"], input[type="password"], select, textarea {
  font-family: var(--font-sans); border-color: var(--border-input); border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--petrol-100); }

/* Page header: H2 22/600 -0.01em, subtitle body-sm */
.viewhead { align-items: flex-end; margin-bottom: 20px; }
.viewhead h2 { font: var(--type-h2); letter-spacing: -0.01em; }
.viewhead p { font: var(--type-body-sm); color: var(--text-secondary); margin-top: 4px; }
.viewhead .vhacts .btn { height: var(--control-md); min-height: 0; }

/* Sidebar and top bar, per the UI kit's Shell */
.brand h1 { font: 600 18px/1 var(--font-sans); letter-spacing: -0.02em; }
.side nav a { font: 500 13px/1 var(--font-sans); }
.side nav a .ico { color: inherit; }
.side nav a .count { font: 500 11px/1 var(--font-mono); padding: 3px 5px; border-radius: 2px; background: var(--petrol-700); }
.crumbs { font: 500 13px/1 var(--font-sans); gap: 6px; }
.crumbs .csep { display: inline-flex; color: var(--text-tertiary); }
.topbar { gap: 16px; padding: 0 var(--page-gutter); background: var(--surface-card); border-bottom-color: var(--border-default); }
.gsearch { height: var(--control-sm); width: 320px; border-color: var(--border-input); border-radius: var(--radius-sm); color: var(--text-tertiary); }

/* ---- Overview, after the UI kit's Dashboard ---- */
.mstrip { display: grid; gap: 16px; margin-bottom: 16px; }
.mstrip .ovm { margin: 0; cursor: default; }
.ovm:hover { border-color: var(--border-default); }
.ovphase { display: flex; align-items: center; gap: 6px; font: var(--type-body-sm); color: var(--text-secondary); margin-bottom: 14px; }
.ovphase .mono { font-family: var(--font-mono); color: var(--text-primary); }
.ovphase.fail { color: var(--status-fail-fg); }
.ovphase.warn { color: var(--status-warn-fg); }
.omgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ovm .cbody { display: block; }
.ovfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font: var(--type-caption); color: var(--text-secondary); min-height: 41px; }
.ovgrid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ovmain .ccard, .ovside .ccard { margin: 0; }
.ovrow {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: left;
  border: 0; border-bottom: 1px solid var(--border-subtle); background: none; font: inherit; color: var(--text-primary);
}
.ovrow:last-child { border-bottom: 0; }
.ovrow[data-go] { cursor: pointer; }
.ovrow[data-go]:hover { background: var(--graphite-50); }
.ovrow > .ic { color: var(--text-secondary); }
.ovrt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ovrt .mono { font: var(--type-data); }
.ovrt .lbl1 { font: var(--type-label); }
.ovrt .cap { font: var(--type-caption); color: var(--text-secondary); }
.nicon { display: inline-flex; flex: none; }
.nicon.fail { color: var(--status-fail-solid); }
.nicon.warn { color: var(--status-warn-solid); }
.needs.ccard { display: flex; gap: 0; margin: 0; }
.ovside .bench { border: 0; border-radius: 0; margin: 0; padding: 12px 16px; flex-direction: row; background: none; }
.ovside .empty { padding: 18px 16px; }
.ovcycles table { font: var(--type-body-sm); }
@media (max-width: 1100px) { .mstrip { grid-template-columns: minmax(0, 1fr) !important; } }
.needs.ccard .chead h3 { display: block; font: var(--type-h4); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text-primary); margin: 0; }
.needs.ccard .nrow, .needs.ccard .nrow.fail, .needs.ccard .nrow.warn { background: none; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; padding: 12px 16px; align-items: center; }
.needs.ccard .nrow:hover { background: var(--graphite-50); }
.needs.ccard .nrow > .ic { color: var(--text-tertiary); }
.needs.ccard .nwhat { font: var(--type-label); }
.needs.ccard .nwhy { font: var(--type-caption); color: var(--text-secondary); }
.ovmain { display: flex; flex-direction: column; gap: 16px; }
.ccard .cfoot .linkbtn { font-size: 12px; }

/* The design system is light only. The dark theme this product keeps for a
   dimmed operatory maps the system's own semantic names onto its dark
   values, so every component above follows the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-app: var(--graphite-950); --surface-card: var(--graphite-900); --surface-sunken: #1F272B;
    --surface-hover: #222A2F; --surface-selected: #0B2A32;
    --border-subtle: #232B30; --border-default: #2C353A; --border-strong: #3A444A; --border-input: #3A444A;
    --text-primary: #EDF1F2; --text-secondary: var(--graphite-300); --text-tertiary: var(--graphite-400); --text-brand: var(--petrol-300);
    --action-primary: var(--petrol-600); --action-primary-hover: var(--petrol-500); --action-primary-active: var(--petrol-700); --action-secondary-hover: #222A2F;
    --status-pass-fg: #4FBF92; --status-pass-bg: #11302A; --status-fail-fg: #E8705F; --status-fail-bg: #3A1F1D;
    --status-warn-fg: #D9A33C; --status-warn-bg: #32280F; --status-running-fg: #7FA8E8; --status-running-bg: #16233A;
    --status-pending-fg: var(--graphite-300); --status-pending-bg: #222A2F; --status-released-fg: var(--petrol-300); --status-released-bg: #0B2A32;
    --status-test-fg: #A99BEA; --status-test-bg: #231E3D;
    --graphite-50: #1B2226; --graphite-150: #2C353A; --petrol-100: #0B2A32; --petrol-800: var(--petrol-300);
    --status-pass-solid: #4FBF92; --status-fail-solid: #E8705F; --status-warn-solid: #D9A33C; --status-running-solid: #7FA8E8;
    --chart-temperature: #E4713F; --chart-axis: var(--graphite-500);
    --shadow-md: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55);
    --focus-ring: 0 0 0 2px var(--graphite-900), 0 0 0 4px var(--petrol-400);
    --action-go-glow: 0 8px 22px -8px rgba(79,191,146,.9), 0 0 0 1px rgba(79,191,146,.3);
    --action-go-glow-hover: 0 12px 30px -8px rgba(79,191,146,.95), 0 0 0 1px rgba(79,191,146,.4);
    --series-1: var(--petrol-400); --series-1-hover: var(--petrol-300); --series-1-ring: var(--petrol-500);
    --plate: #222A2F; --plate-edge: rgba(255,255,255,.18);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-app: var(--graphite-950); --surface-card: var(--graphite-900); --surface-sunken: #1F272B;
  --surface-hover: #222A2F; --surface-selected: #0B2A32;
  --border-subtle: #232B30; --border-default: #2C353A; --border-strong: #3A444A; --border-input: #3A444A;
  --text-primary: #EDF1F2; --text-secondary: var(--graphite-300); --text-tertiary: var(--graphite-400); --text-brand: var(--petrol-300);
  --action-primary: var(--petrol-600); --action-primary-hover: var(--petrol-500); --action-primary-active: var(--petrol-700); --action-secondary-hover: #222A2F;
  --status-pass-fg: #4FBF92; --status-pass-bg: #11302A; --status-fail-fg: #E8705F; --status-fail-bg: #3A1F1D;
  --status-warn-fg: #D9A33C; --status-warn-bg: #32280F; --status-running-fg: #7FA8E8; --status-running-bg: #16233A;
  --status-pending-fg: var(--graphite-300); --status-pending-bg: #222A2F; --status-released-fg: var(--petrol-300); --status-released-bg: #0B2A32;
  --status-test-fg: #A99BEA; --status-test-bg: #231E3D;
  --graphite-50: #1B2226; --graphite-150: #2C353A; --petrol-100: #0B2A32; --petrol-800: var(--petrol-300);
  --status-pass-solid: #4FBF92; --status-fail-solid: #E8705F; --status-warn-solid: #D9A33C; --status-running-solid: #7FA8E8;
  --chart-temperature: #E4713F; --chart-axis: var(--graphite-500);
  --shadow-md: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.55);
  --focus-ring: 0 0 0 2px var(--graphite-900), 0 0 0 4px var(--petrol-400);
  --action-go-glow: 0 8px 22px -8px rgba(79,191,146,.9), 0 0 0 1px rgba(79,191,146,.3);
  --action-go-glow-hover: 0 12px 30px -8px rgba(79,191,146,.95), 0 0 0 1px rgba(79,191,146,.4);
  --series-1: var(--petrol-400); --series-1-hover: var(--petrol-300); --series-1-ring: var(--petrol-500);
  --plate: #222A2F; --plate-edge: rgba(255,255,255,.18);
}
.side .btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #E3F0F3; }
.side .btn:hover { background: rgba(255,255,255,.16); }
@media (max-width: 860px) {
  .topbar { gap: 8px; padding: 0 16px; }
  .gsearch { width: auto; flex: 1; min-width: 0; }
  #scanbtn { padding: 0 8px; }
  .viewhead .vhacts { flex-wrap: wrap; }
}
@media (max-width: 480px) { #scanbtn { font-size: 0; gap: 0; } }

/* ---- Live ---- */
.livecard { margin-bottom: 18px; }
.livetiles { margin-bottom: 14px; }
.livetiles .tile .v { font-size: 22px; }
.liveinputs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.liveinputs .tag b { font-weight: 600; margin-left: 4px; }
.livewarn { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; color: var(--text-secondary); }
.livechart { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.livechart .lch-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.livechart h4 { margin: 0; font-size: 13px; font-weight: 600; }
.livechart .legend { font-size: 12px; color: var(--text-secondary); display: inline-flex; gap: 6px; align-items: center; }
.livechart .legend .swatch { display: inline-block; width: 12px; height: 2px; margin-left: 8px; }
.livechart .empty { padding: 18px 8px; }
.liveraw { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 10px; font-size: 13px; }
.liveraw summary { cursor: pointer; color: var(--text-link); }
.liveraw table { margin-top: 8px; }
.liveraw td.num { text-align: right; font-family: var(--font-mono, "IBM Plex Mono", monospace); }
.liveraw pre { margin-top: 10px; max-height: 280px; overflow: auto; font-size: 11.5px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); padding: 10px; }
@media (max-width: 640px) { .livetiles { grid-template-columns: 1fr 1fr; } }
.livechart .lc-t svg.chart { height: 150px; }
.livechart .lc-p svg.chart { height: 130px; }

/* ---- Sign-in -------------------------------------------------------------
   A full screen, not a sheet: nothing behind it loads until someone is in.
   At a bench screen the names are tiles and the PIN is a pad, both well over
   the 44px floor for a gloved finger. Square-ish corners and hairline borders,
   as everywhere else; colour only where it says something. */
.signin[hidden] { display: none !important; }
.signin {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: var(--surface-app);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 8vh, 96px) 16px 32px;
}
html.signing-in .app { visibility: hidden; }
.sicard {
  width: 100%; max-width: 560px; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: 4px;
  padding: 24px 24px 16px; display: flex; flex-direction: column; gap: 14px;
}
.sihead { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); }
.simark { width: 28px; height: 28px; border-radius: 4px; background: var(--petrol-800); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sibrand { font: var(--type-h4); letter-spacing: -0.01em; color: var(--text-primary); }
.sipractice { margin-left: auto; font: var(--type-body-sm); color: var(--text-secondary); text-align: right; }
.sititle { font: var(--type-h2); margin: 4px 0 0; color: var(--text-primary); letter-spacing: -0.01em; }
.sisub { margin: -6px 0 0; font: var(--type-body); color: var(--text-secondary); }
.sireason { font: var(--type-body-sm); color: var(--status-warn-fg); background: var(--status-warn-bg); border: 1px solid var(--amber-200); border-radius: 4px; padding: 8px 10px; }
.sierr { margin: 0; }
.sinames { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.siname {
  min-height: 76px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 4px;
  font: var(--type-label); color: var(--text-primary);
}
.siname:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.siname:focus-visible, .sikey:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.siname .sinm { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.siname .role { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.avatar.lg { width: 30px; height: 30px; font-size: 12px; }
.sidots { display: flex; justify-content: center; gap: 14px; padding: 6px 0 2px; }
.sidots i { width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid var(--border-strong); background: transparent; }
.sidots i.on { background: var(--petrol-700); border-color: var(--petrol-700); }
.sipad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; width: 100%; margin: 0 auto; }
.sikey {
  height: 64px; border-radius: 4px; cursor: pointer;
  background: var(--surface-card); border: 1px solid var(--border-default);
  font: 500 24px/1 var(--font-mono); color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.sikey:hover { background: var(--surface-hover); }
.sikey:active { background: var(--surface-selected); border-color: var(--petrol-400); }
.sikey.fn { font: var(--type-label); color: var(--text-secondary); background: var(--surface-sunken); }
.siform { display: flex; flex-direction: column; }
.siform .fieldrow input { height: var(--control-touch); font-size: 15px; width: 100%; box-sizing: border-box; }
.sigo { height: var(--control-touch); justify-content: center; margin-top: 4px; }
.sialt { align-self: center; min-height: var(--control-touch); padding: 0 10px; }
.sifoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-subtle); font: var(--type-caption); color: var(--text-tertiary); }
.sifoot > span { display: inline-flex; align-items: center; gap: 6px; }
.useracts { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 4px 0; font-size: 12px; }

/* ---- People ---- */
table.people td.acts, table.dense td.acts { white-space: nowrap; text-align: right; }
table.people td.acts .btn + .btn, table.dense td.acts .btn + .btn { margin-left: 4px; }
table.people tr.dimrow td { color: var(--text-tertiary); }
.pperson { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.pperson .dim { font-weight: 400; }
@media (max-width: 640px) {
  .sicard { padding: 18px 16px 12px; }
  .sinames { grid-template-columns: repeat(2, 1fr); }
  .sikey { height: 58px; }
}