/* AirTime web UI — design foundation (docs/13 "Design foundation").
   Tokens first (spacing, type, colour, radius, shadow, focus), then base elements, the shell, the shared components
   (card, buttons, pills, step list, device chip, callout, segmented toggle, progress, empty state), then page rules.
   Hand-written, no framework, CSP-safe (classes only: no inline styles anywhere). Colours meet WCAG AA on their
   backgrounds; status is never colour-only (pills and icons carry text or an accessible name). */

:root {
  /* Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type: a modern system stack (Segoe UI Variable on Windows 11, SF on macOS, Roboto on Android). */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-md: 0.9375rem; /* 15 (base) */
  --text-lg: 1.0625rem; /* 17 */
  --text-xl: 1.25rem;   /* 20 */
  --text-2xl: 1.5rem;   /* 24 */
  --text-3xl: 1.875rem; /* 30 */
  --text-4xl: 2.25rem;  /* 36 */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Neutrals (cool slate) and one calm accent. */
  --gray-0: #ffffff;
  --gray-25: #fbfcfd;
  --gray-50: #f5f7f9;
  --gray-100: #eef1f4;
  --gray-200: #e1e6eb;
  --gray-300: #ccd3db;
  --gray-400: #9ba5b1;
  --gray-500: #677281;
  --gray-600: #4f5967;
  --gray-700: #374150;
  --gray-800: #242b35;
  --gray-900: #151a21;
  --accent-50: #eef4fe;
  --accent-100: #dbe7fd;
  --accent-200: #b8cffb;
  --accent-500: #2f6be0;
  --accent-600: #2358c2;
  --accent-700: #1c4699;

  /* Status: ink on bg passes AA; solid for icons and bars. */
  --success-bg: #e8f6ee; --success-border: #b7e1c8; --success-ink: #18603b; --success-solid: #22895a;
  --warning-bg: #fff5de; --warning-border: #f1d394; --warning-ink: #7a4f00; --warning-solid: #d08b00;
  --danger-bg: #fdecea;  --danger-border: #f3bfb9;  --danger-ink: #a3241a;  --danger-solid: #d13b2f;
  --info-bg: var(--accent-50); --info-border: var(--accent-200); --info-ink: var(--accent-700); --info-solid: var(--accent-500);
  --muted-bg: var(--gray-100); --muted-border: var(--gray-200); --muted-ink: var(--gray-600); --muted-solid: var(--gray-400);

  /* Surfaces. */
  --surface: var(--gray-0);
  --surface-sunken: var(--gray-50);
  --page-bg: #f3f5f8;
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --text: var(--gray-900);
  --text-2: var(--gray-700);
  --text-muted: var(--gray-500);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 32px rgba(16, 24, 40, 0.10);
  --focus-ring: 0 0 0 3px rgba(47, 107, 224, 0.35);

  /* Legacy names used by the older pages, mapped onto the tokens. */
  --ink: var(--text);
  --ink-2: var(--text-2);
  --muted: var(--text-muted);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --bg: var(--page-bg);
  --accent: var(--accent-600);
  --accent-ink: #ffffff;
  --accent-hover: var(--accent-700);
  --focus: var(--accent-500);
  --ok-bg: var(--success-bg);   --ok-ink: var(--success-ink);
  --warn-bg: var(--warning-bg); --warn-ink: var(--warning-ink);
  --err-bg: var(--danger-bg);   --err-ink: var(--danger-ink);
  --radius: var(--radius-sm);
  --font: var(--font-sans);
  --mono: var(--font-mono);
}

* { box-sizing: border-box; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 1rem; color: var(--text); background: var(--page-bg); line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent-600); text-underline-offset: 2px; }
a:hover { color: var(--accent-700); }
:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: var(--leading-tight); color: var(--text); }
h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-5); }
h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin: 0 0 var(--space-3); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
code, .mono { font-family: var(--font-mono); font-size: .9em; }
code.block { display: block; white-space: pre-wrap; word-break: break-all; margin-top: var(--space-1); }
.muted { color: var(--text-muted); }
.lead { font-size: var(--text-lg); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--surface); padding: var(--space-2) var(--space-4); z-index: 10; border-radius: var(--radius-sm); }
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* The DEV server's strip above the top bar (AIRTIME_ENVIRONMENT=dev), so it is never mistaken for the study server. */
.env-strip { background: var(--warning-solid); color: #fff; text-align: center; font-weight: var(--weight-bold);
  font-size: var(--text-sm); letter-spacing: .02em; padding: 4px var(--space-4); }

/* ---- shell: a calm white top bar; main links, an Admin / More menu and the user menu (details/summary disclosures) */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 20;
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02); }
.topbar-inner { display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); min-height: 56px; max-width: 1440px; margin: 0 auto; }
.topbar a { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--text); flex: none; }
.brand::before { content: ""; width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, var(--accent-500), #22a3a3); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.main-nav { flex: 1; min-width: 0; }
.main-nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.main-nav a, .nav-menu > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-2); font-size: var(--text-md); font-weight: var(--weight-medium); white-space: nowrap; }
.main-nav a:hover, .nav-menu > summary:hover { background: var(--gray-100); color: var(--text); }
.main-nav a.current, .nav-menu > summary.current { background: var(--accent-50); color: var(--accent-700); font-weight: var(--weight-semibold); }
.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; font-family: inherit; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.nav-menu[open] > summary { background: var(--gray-100); color: var(--text); }
.nav-menu-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 14rem; z-index: 30; list-style: none; margin: 0; padding: var(--space-1);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.nav-menu-list li { margin: 0; }
.nav-menu-list a { display: flex; width: 100%; padding: 8px var(--space-3); border-radius: var(--radius-sm); color: var(--text); font-weight: var(--weight-medium); }
.nav-menu-list a:hover { background: var(--gray-100); }
.nav-menu-list a.current { background: var(--accent-50); color: var(--accent-700); }
.user-menu { margin-left: auto; flex: none; }
.user-menu > summary { padding: 4px 8px 4px 4px; }
.user-menu .nav-menu-list { left: auto; right: 0; min-width: 16rem; }
.user-menu-list { display: flex; flex-direction: column; gap: 2px; }
.user-menu-who { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
.user-menu-who .user-email { font-weight: var(--weight-semibold); color: var(--text); overflow-wrap: anywhere; }
.user-menu-list form { margin: 0; }
.user-menu-list .link-button { display: flex; width: 100%; padding: 8px var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-weight: var(--weight-medium); }
.user-menu-list .link-button:hover { background: var(--gray-100); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent-100), var(--accent-200)); color: var(--accent-700); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.user-menu-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; }
.link-button { background: none; border: 0; padding: 0; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; }
.link-button:hover { color: var(--text); background: none; }

main { max-width: 1280px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-6); }
main > * + * { margin-top: 0; }
section { margin-bottom: var(--space-5); }
.footer { max-width: 1280px; margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-6); color: var(--text-muted); font-size: var(--text-xs); }
main.wide ~ .footer { max-width: none; }
.narrow { max-width: 28rem; }
/* The older pages' plain card: same look as .ui-card so unconverted pages already match. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.form-title { font-weight: var(--weight-semibold); margin: 0; }

/* ---- page header: crumbs, eyebrow, title, subtitle, ONE primary action on the right */
.page-header { margin: 0 0 var(--space-5); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 var(--space-2); padding: 0; font-size: var(--text-sm); color: var(--text-muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--gray-400); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-700); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: var(--weight-medium); }
.page-header-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.page-heading { min-width: 0; }
.page-heading h1 { margin: 0; font-size: var(--text-3xl); }
.page-subtitle { margin: var(--space-1) 0 0; color: var(--text-2); font-size: var(--text-md); max-width: 60rem; }
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-3); }
.section-head h2 { margin: 0; }
.section-head p { margin: var(--space-1) 0 0; }
.section-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* ---- narrow screens: the nav takes its own wrapping row under the brand and the user menu; filters stack */
@media (max-width: 960px) {
  .topbar-inner { flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-4); }
  .main-nav { order: 3; flex-basis: 100%; }
  .main-nav > ul { flex-wrap: wrap; }
  .main-nav a, .nav-menu > summary { padding: 5px var(--space-2); font-size: var(--text-sm); }
  .user-menu-name { display: none; }
  main { padding: var(--space-4) var(--space-4) var(--space-5); }
  .page-heading h1 { font-size: var(--text-2xl); }
  .filter-search { flex-basis: 100%; max-width: none; }
  .filter-field { flex: 1 1 10rem; }
  .filter-field select, .filter-field input { width: 100%; }
  .toolbar { align-items: flex-start; }
}
@media (max-width: 480px) {
  .page-header-main { align-items: flex-start; }
  .page-actions { width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .stat-value { font-size: var(--text-2xl); }
  .ui-card-body { padding: var(--space-4); }
}

/* ---- flash */
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: 0 0 var(--space-4); border: 1px solid transparent; }
.flash-ok { background: var(--success-bg); color: var(--success-ink); border-color: var(--success-border); }
.flash-error { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-border); }
.flash-warn { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-border); }

/* ---- forms */
label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
input, select, button, .button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], input[type=url], textarea, select {
  padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); min-width: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent-500); box-shadow: var(--focus-ring); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack button { align-self: flex-start; }
.row-form, .filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.inline input[type=password] { width: 13rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- buttons: plain <button> is the secondary look; .btn-* (and the legacy .primary / .danger) pick a role.
   Sizes: .btn-sm, (default), .btn-lg. One primary action per view. */
button, .button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 7px 14px;
  min-height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-weight: var(--weight-medium); line-height: 1.2; cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease; }
button:hover, .button:hover, .btn:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--text); }
button:focus-visible, .button:focus-visible, .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button:disabled, .btn:disabled, .btn[aria-disabled=true] { opacity: .5; cursor: not-allowed; box-shadow: none; }
button.primary, .btn-primary { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
button.primary:hover, .btn-primary:hover { background: var(--accent-700); border-color: var(--accent-700); color: #fff; }
.btn-secondary { background: var(--surface); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--gray-100); border-color: transparent; color: var(--text); }
button.danger, .btn-danger { background: var(--surface); color: var(--danger-ink); border-color: var(--danger-border); }
button.danger:hover, .btn-danger:hover { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-solid); }
.btn-danger-solid { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.btn-danger-solid:hover { background: var(--danger-ink); border-color: var(--danger-ink); color: #fff; }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: var(--text-sm); }
.btn-lg { min-height: 48px; padding: 10px 22px; font-size: var(--text-lg); font-weight: var(--weight-semibold); border-radius: var(--radius-md); }
.btn-block { width: 100%; }
.btn-icon { width: 1.1em; height: 1.1em; flex: none; }
/* Text-like buttons of the older pages keep their compact look. */
.link-button, .link-like, .small-button { min-height: 0; box-shadow: none; }
.link-like:hover { background: none; }

/* ---- tables: quiet rules, readable rows, the table sits in a card */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ui-card-body.is-flush > .table-wrap, .ui-card-body.is-flush > .empty-state { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: none; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
table.data th, table.data td { padding: 12px var(--space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
table.data thead th { background: var(--gray-25); font-weight: var(--weight-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); white-space: nowrap; position: sticky; top: 0; padding-top: 10px; padding-bottom: 10px; }
table.data tbody tr:hover { background: var(--gray-25); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.row-actions { width: 1%; white-space: nowrap; text-align: right; }
table.data a { text-decoration: none; }
table.data a:hover { text-decoration: underline; }
table.data .cell-main { font-weight: var(--weight-semibold); color: var(--text); }
table.data a.cell-main:hover { color: var(--accent-700); }
table.data .cell-sub { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
a.sort { color: inherit; text-decoration: none; }
a.sort:hover, a.sort.active { color: var(--text); }
.sort-arrow { font-size: .8em; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); }
.pager-buttons { display: inline-flex; align-items: center; gap: var(--space-3); }
details summary { cursor: pointer; }

/* ---- empty state */
.empty-state { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; color: var(--text-2); }
.empty-state p { margin: var(--space-1) 0; }
.empty-state-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-1) !important; }
.empty-state-icon { width: 40px; height: 40px; color: var(--gray-400); margin: 0 auto var(--space-3); display: block; }
.empty-state-actions { margin-top: var(--space-4); display: flex; justify-content: center; gap: var(--space-2); }

/* ---- status pills (badge() draws a pill too) */
.rel-time { font-size: .85em; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--muted-border);
  background: var(--muted-bg); color: var(--muted-ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; line-height: 1.5; vertical-align: middle; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill.pill-plain::before { display: none; }
.pill-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
.pill-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
.pill-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
.pill-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-ink); }
.pill-muted { background: var(--muted-bg); border-color: var(--muted-border); color: var(--muted-ink); }
.pill-live::before { animation: pill-pulse 1.4s ease-in-out infinite; }
@keyframes pill-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---- card component (header / body / footer) */
.ui-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
main > .ui-card, main > .stat-grid, main > .filter-bar, main > .callout, main > .card, main > .table-wrap { margin-bottom: var(--space-5); }
.ui-card + .ui-card { margin-top: 0; }
.ui-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.ui-card-heading { min-width: 0; }
.ui-card-title { margin: 0; font-size: var(--text-lg); }
.ui-card-subtitle { margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.ui-card-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.ui-card-body { padding: var(--space-5); }
.ui-card-body.is-flush { padding: 0; }
.ui-card-body > :first-child { margin-top: 0; }
.ui-card-body > :last-child { margin-bottom: 0; }
.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--space-5); align-items: start; margin-bottom: var(--space-5); }
.cards-2 > .ui-card { margin: 0; }

/* ---- stat tiles (a row of numbers; links when they lead somewhere) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; min-width: 0; }
a.stat-tile:hover { border-color: var(--accent-200); box-shadow: var(--shadow-md); color: var(--text); }
.stat-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-of { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-muted); }
.stat-label { font-weight: var(--weight-semibold); color: var(--text-2); }
.stat-detail { font-size: var(--text-sm); color: var(--text-muted); }
.stat-tile.is-ok .stat-value { color: var(--success-ink); }
.stat-tile.is-warn .stat-value { color: var(--warning-ink); }
.stat-tile.is-error .stat-value { color: var(--danger-ink); }

/* ---- facts grid (label over value, wraps into columns) */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.facts-grid .fact { min-width: 0; }
.facts-grid dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 2px; }
.facts-grid dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

/* ---- technical details (collapsed card at the bottom of detail pages) */
details.tech { margin-top: var(--space-5); }
details.tech > summary { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); list-style: none; }
details.tech > summary::-webkit-details-marker { display: none; }
details.tech > summary::before { content: "▸"; color: var(--text-muted); transition: transform .15s ease; }
details.tech[open] > summary::before { transform: rotate(90deg); }
.tech-title { font-weight: var(--weight-semibold); }
.tech-hint { font-size: var(--text-sm); color: var(--text-muted); }
.tech-body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border); }
.tech-body > :first-child { margin-top: var(--space-4); }
.tech-body h3 { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); }

/* ---- action menu ("⋯": row and page actions) */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-trigger { min-width: 32px; letter-spacing: .05em; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 13rem; padding: var(--space-1); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); text-align: left; }
.menu-list form { margin: 0; }
.menu-item { display: flex; width: 100%; justify-content: flex-start; padding: 8px var(--space-3); border: 0; border-radius: var(--radius-sm); background: none;
  box-shadow: none; min-height: 0; color: var(--text); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; cursor: pointer; }
.menu-item:hover { background: var(--gray-100); color: var(--text); }
.menu-item.is-danger { color: var(--danger-ink); }
.menu-item.is-danger:hover { background: var(--danger-bg); color: var(--danger-ink); }
.menu-sep { height: 1px; background: var(--border); margin: var(--space-1) 0; }
.menu-form-inline { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); }

/* ---- filter bar: search + most-used filters + "More filters"; active filters as chips */
.filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4); }
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.filter-search { flex: 1 1 16rem; max-width: 26rem; }
.filter-bar .filter-search input { width: 100%; padding-left: 34px; background: var(--surface) no-repeat 10px center / 16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.filter-field { gap: 2px; min-width: 9rem; }
.filter-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.filter-field select, .filter-field input { min-width: 9rem; }
.filter-field.is-active select, .filter-field.is-active input { border-color: var(--accent-500); background-color: var(--accent-50); }
.filter-more { position: relative; }
.filter-more > summary { list-style: none; }
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more[open] > summary { background: var(--gray-100); }
.filter-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); width: 100%; }
.filter-row > .filter-more { flex-basis: auto; }
.filter-row > .filter-more[open] { flex-basis: 100%; order: 10; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border-radius: var(--radius-pill); background: var(--accent-50);
  border: 1px solid var(--accent-200); color: var(--accent-700); font-size: var(--text-sm); text-decoration: none; }
.chip:hover { background: var(--accent-100); color: var(--accent-700); }
.chip-label { color: var(--text-2); }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-weight: var(--weight-bold); }
.chip:hover .chip-x { background: var(--accent-200); }
.chip-clear { font-size: var(--text-sm); color: var(--text-muted); margin-left: var(--space-1); }

/* ---- segmented links (tabs, group-by) */
.segmented-links a { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 4px; font-size: var(--text-sm);
  color: var(--text-2); text-decoration: none; font-weight: var(--weight-medium); }
.segmented-links a:hover { background: rgba(255, 255, 255, .6); color: var(--text); }
.segmented-links a[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: var(--weight-semibold); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3); }
.toolbar-label { font-size: var(--text-sm); color: var(--text-muted); margin-right: var(--space-2); }
.ui-card-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--gray-25); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 var(--space-1); }

/* ---- callout / banner */
.callout { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--info-border); background: var(--info-bg); color: var(--info-ink); }
.callout-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.callout-body { flex: 1; min-width: 0; }
.callout-title { font-weight: var(--weight-semibold); margin: 0; }
.callout-text { margin: 2px 0 0; color: inherit; opacity: .9; }
.callout-actions { margin-left: auto; display: flex; gap: var(--space-2); align-self: center; }
.callout-success { border-color: var(--success-border); background: var(--success-bg); color: var(--success-ink); }
.callout-warning { border-color: var(--warning-border); background: var(--warning-bg); color: var(--warning-ink); }
.callout-danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-ink); }
.callout-neutral { border-color: var(--border); background: var(--gray-50); color: var(--text-2); }

/* ---- segmented toggle (aria-pressed buttons) */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--gray-100); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.segmented button { min-height: 28px; padding: 3px 12px; border: 0; background: transparent; box-shadow: none; font-size: var(--text-sm); color: var(--text-2); border-radius: 4px; }
.segmented button:hover { background: rgba(255, 255, 255, .6); }
.segmented button[aria-pressed=true] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: var(--weight-semibold); }

/* ---- switch (a checkbox styled as a toggle) */
.switch { display: inline-flex; flex-direction: row; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); font-size: var(--text-md); cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--gray-300);
  position: relative; margin: 0; cursor: pointer; flex: none; transition: background-color .15s ease; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm); transition: transform .15s ease; }
.switch input:checked { background: var(--accent-600); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.switch input:disabled { opacity: .6; cursor: not-allowed; background: var(--gray-200); }
.switch input:disabled:checked { background: var(--gray-400); }
.switch:has(input:disabled) { cursor: not-allowed; color: var(--text-muted); }

/* ---- progress bar (native <progress>, so no inline width) */
progress.progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: var(--radius-pill);
  background: var(--gray-200); overflow: hidden; color: var(--accent-500); }
progress.progress::-webkit-progress-bar { background: var(--gray-200); border-radius: var(--radius-pill); }
progress.progress::-webkit-progress-value { background: var(--accent-500); border-radius: var(--radius-pill); }
progress.progress::-moz-progress-bar { background: var(--accent-500); border-radius: var(--radius-pill); }
progress.progress.progress-success::-webkit-progress-value { background: var(--success-solid); }
progress.progress.progress-success::-moz-progress-bar { background: var(--success-solid); }
progress.progress.progress-danger::-webkit-progress-value { background: var(--danger-solid); }
progress.progress.progress-danger::-moz-progress-bar { background: var(--danger-solid); }

/* ---- step list item: todo, current, done, flagged, failed / interrupted, skipped */
.step-list { list-style: none; margin: 0; padding: 0; }
.step-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 8px var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; box-shadow: none; color: var(--text-2); text-align: left; font-weight: var(--weight-medium); min-height: 40px; justify-content: flex-start; }
button.step-item:hover { background: var(--gray-100); border-color: transparent; }
.step-item:disabled { opacity: 1; cursor: default; }
.step-icon { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid var(--gray-300); background: var(--surface); color: #fff; }
.step-icon svg { width: 12px; height: 12px; }
.step-label { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--text-md); line-height: 1.3; }
.step-meta { flex: none; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.step-item.is-current { background: var(--accent-50); color: var(--accent-700); font-weight: var(--weight-semibold); box-shadow: inset 3px 0 0 var(--accent-500); }
.step-item.is-current.is-todo .step-icon { border-color: var(--accent-500); background: var(--accent-500); }
.step-item.is-current.is-todo .step-icon::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.step-item.is-done .step-icon { border-color: var(--success-solid); background: var(--success-solid); }
.step-item.is-flagged .step-icon { border-color: var(--warning-solid); background: var(--warning-solid); }
.step-item.is-failed .step-icon { border-color: var(--danger-solid); background: var(--danger-solid); }
.step-item.is-skipped .step-icon { border-color: var(--gray-400); background: var(--gray-100); color: var(--gray-500); }
.step-item.is-skipped .step-label { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--gray-400); }
.step-group + .step-group { margin-top: var(--space-3); }
.step-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-1);
  padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* ---- device chip */
.device-chip { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.device-chip-icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-600); }
.device-chip-icon svg { width: 20px; height: 20px; }
.device-chip.is-ok .device-chip-icon { background: var(--success-bg); color: var(--success-ink); }
.device-chip.is-warn .device-chip-icon { background: var(--warning-bg); color: var(--warning-ink); }
.device-chip.is-off { background: var(--gray-25); border-style: dashed; }
.device-chip-body { flex: 1; min-width: 0; }
.device-chip-title { font-weight: var(--weight-semibold); margin: 0; }
.device-chip-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.device-chip-meta { margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.device-chip-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-2); }
.device-chip-facts li { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ---- dashboard */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); }
.tile-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.tile-label { font-weight: var(--weight-semibold); color: var(--text-2); }
.tile-detail { color: var(--text-muted); font-size: var(--text-sm); }
.inline-list { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---- device pages */
.pairing-code-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 36rem; box-shadow: var(--shadow-md); }
.pairing-code { font-family: var(--font-mono); font-size: 3rem; font-weight: var(--weight-bold); letter-spacing: .15em; margin: var(--space-2) 0 var(--space-4); color: var(--text); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
dl.facts dt { font-weight: var(--weight-medium); color: var(--text-muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---- QC pages */
.small { font-size: .85rem; }
ul.plain, ul.attempts, ul.annotations { list-style: none; margin: 0; padding: 0; }
ul.attempts li { white-space: nowrap; margin: .1rem 0; }
table.data.grid th[scope=row] { white-space: nowrap; }
pre.json { background: #f6f8fa; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; overflow: auto;
  max-height: 32rem; font-family: var(--mono); font-size: .82rem; white-space: pre; }
details.json { margin: .5rem 0; }
.seg-strip { display: inline-flex; gap: 2px; flex-wrap: wrap; vertical-align: middle; }
.seg { display: inline-block; min-width: 1.35rem; text-align: center; border-radius: 3px; font-size: .75rem; font-weight: 700;
  line-height: 1.35rem; background: var(--muted-bg); color: var(--ink-2); }
.seg-ok { background: var(--ok-bg); color: var(--ok-ink); }
.seg-warn { background: var(--warn-bg); color: var(--warn-ink); }
.seg-error { background: var(--err-bg); color: var(--err-ink); }
.seg-info { background: var(--info-bg); color: var(--info-ink); }
.seg-extra { outline: 1px dashed var(--line-strong); }
.signal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .75rem; }
.signal h3 { font-size: 1rem; margin: 0 0 .5rem; }
.signal audio { width: 100%; max-width: 40rem; display: block; margin-bottom: .5rem; }
.waveform-slot { color: var(--muted); padding: .5rem 0; }
figure.waveform { margin: 0; }
figure.waveform figcaption { font-size: .8rem; margin-top: .25rem; }
.wave-lane { margin-bottom: .35rem; }
.wave-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
svg.wave { display: block; width: 100%; height: 72px; background: #fbfcfd; border: 1px solid var(--line); border-radius: 3px; }
svg.wave .wave-path { stroke: var(--accent); stroke-width: 1; fill: none; }
svg.wave .wave-axis, svg.timeline .wave-axis { stroke: var(--line-strong); stroke-width: 1; }
svg.timeline { display: block; width: 100%; height: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; margin-bottom: .5rem; }
svg.timeline .tick { stroke-width: 2; stroke: var(--muted); }
svg.timeline .ev-phase { stroke: var(--info-ink); }
svg.timeline .ev-marker { stroke: #b07800; }
svg.timeline .ev-quality, svg.timeline .ev-interrupt { stroke: var(--err-ink); }
.annotation-text { white-space: pre-wrap; margin: .1rem 0 .75rem; }
/* textarea / date / number inputs share the main input look (see forms). */

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
fieldset legend { font-weight: 600; font-size: .9rem; }
label.check { flex-direction: row; align-items: center; gap: .35rem; font-weight: 400; }
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: .75rem; }
.download-grid p { margin-top: 0; }

@media (max-width: 720px) {
  .pairing-code { font-size: 2.2rem; }
}

@media (forced-colors: active) {
  .badge { border: 1px solid CanvasText; }
}

/* Protocols: the canonical torso (TorsoOutline) with location sites. */
.torso-pair { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: .5rem 0 1rem; }
.torso-figure { margin: 0; }
svg.torso { display: block; width: 15rem; height: auto; overflow: visible; }
svg.torso .torso-outline { fill: #f3f5f7; stroke: var(--line-strong); stroke-width: .8; stroke-linejoin: round; }
svg.torso .torso-site circle { fill: var(--accent); stroke: #fff; stroke-width: .6; }
svg.torso .torso-site-outside circle { fill: var(--err-ink); }
svg.torso .torso-num { font-size: 3.6px; font-weight: 700; fill: #fff; text-anchor: middle; }
svg.torso .torso-label { font-size: 4px; fill: var(--ink); }
svg.torso .torso-label-left { text-anchor: end; }
ol.segment-sequence { columns: 2 22rem; margin: 0; }
ol.segment-sequence li { break-inside: avoid; }

/* Protocol editor (/protocols/{id}/{version}/edit, static/editor/). */
main.wide { max-width: none; }
.editor-intro { margin: -.5rem 0 .75rem; }
.ed-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: .5rem 0; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.ed-bar-sep { width: 1px; height: 1.6rem; background: var(--line-strong); }
.ed-tabs { display: inline-flex; gap: 0; }
.ed-tabs button { border-radius: 0; }
.ed-tabs button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ed-tabs button:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.ed-tabs button[aria-selected=true] { background: var(--info-bg); color: var(--info-ink); font-weight: 600; }
.ed-status { margin-left: auto; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--muted-bg); color: var(--ink-2); }
.ed-status-saved { background: var(--ok-bg); color: var(--ok-ink); }
.ed-status-saving, .ed-status-dirty { background: var(--info-bg); color: var(--info-ink); }
.ed-status-conflict, .ed-status-error, .ed-status-invalid, .ed-status-signedout { background: var(--err-bg); color: var(--err-ink); }
.ed-banner p { margin: 0 0 .5rem; }
.ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1rem; align-items: start; }
.ed-main, .ed-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ed-side { position: sticky; top: 3.5rem; max-height: calc(100vh - 4rem); overflow: auto; }
.ed-header textarea { width: 100%; }
.ed-header > label { margin-top: .6rem; }
.ed-stage { padding: .75rem; }
.ed-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ed-stage-num { font-weight: 700; }
.ed-stage-title { font-weight: 600; min-width: 16rem; flex: 1 1 16rem; }
.ed-stage-actions { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.ed-inline-label { flex-direction: row; align-items: center; gap: .35rem; font-weight: 400; }
.ed-handle { cursor: grab; color: var(--muted); padding: 0 .2rem; user-select: none; }
table.ed-table th, table.ed-table td { padding: .25rem .35rem; vertical-align: middle; }
table.ed-table input[type=text], table.ed-table select { width: 100%; padding: .25rem .35rem; }
table.ed-table .ed-duration { width: 5rem; padding: .25rem .35rem; }
table.ed-table td.ed-sel, table.ed-table th.ed-sel { width: 1.8rem; }
table.ed-table td.ed-num { white-space: nowrap; width: 3.2rem; }
table.ed-table tr.selected { background: var(--info-bg) !important; }
table.ed-table tr.has-error td:first-child { box-shadow: inset 3px 0 0 var(--err-ink); }
table.ed-table tr.has-warning td:first-child { box-shadow: inset 3px 0 0 #b07800; }
table.ed-table tr.drop-before td { box-shadow: inset 0 3px 0 var(--accent); }
table.ed-table tr.drop-after td { box-shadow: inset 0 -3px 0 var(--accent); }
tr.drop-into td, section.drop-into { outline: 2px dashed var(--accent); }
section.ed-stage.drop-before { box-shadow: 0 -4px 0 var(--accent); }
section.ed-stage.drop-after { box-shadow: 0 4px 0 var(--accent); }
td.ed-label { min-width: 11rem; }
table.ed-table select { min-width: 6.5rem; }
.ed-generated { color: var(--muted); font-style: italic; }
.ed-override { display: flex; gap: .25rem; align-items: center; }
td.ed-more { white-space: nowrap; }
tr.ed-details td { background: #f8fafc; }
.link-like { background: none; border: 0; padding: 0 .2rem; color: var(--accent); text-decoration: underline; cursor: pointer; }
.combo { position: relative; min-width: 7rem; }
.combo-list { position: fixed; z-index: 60; min-width: 14rem; max-height: 16rem; overflow: auto; margin: 0;
  padding: .2rem 0; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.combo-list li { padding: .3rem .6rem; cursor: pointer; }
.combo-list li.active { background: var(--info-bg); }
.combo-list li.combo-create { border-top: 1px solid var(--line); color: var(--accent); }
.ed-selection { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; margin-bottom: .75rem;
  position: sticky; top: 3.2rem; z-index: 4; }
.ed-bulk-value { min-width: 12rem; }
.ed-preview.stale { opacity: .75; }
.ed-preview svg.torso { width: 11rem; }
details.phone-stage { border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .6rem; margin: .4rem 0; }
details.phone-stage.active { border-color: var(--accent); }
details.phone-stage summary { font-family: var(--font); font-size: .95rem; }
.phone-block-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #666); margin: .6rem 0 .2rem; }
.phone-stage-title { font-weight: 600; }
ol.phone-steps { margin: .4rem 0; padding-left: 1.4rem; font-size: .88rem; }
table.phone-matrix { font-size: .82rem; }
.ed-json textarea { width: 100%; font-size: .82rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem .9rem; }
.field-grid input[type=text] { width: 100%; }
.hint { font-weight: 400; }
.field-issue { font-weight: 400; font-size: .85rem; color: var(--warn-ink); margin: .2rem 0; }
.field-issue-error { color: var(--err-ink); }
[aria-invalid=true] { border-color: var(--err-ink) !important; box-shadow: 0 0 0 1px var(--err-ink); }
input[type=number] { width: 8rem; }
input[type=search] { padding: .35rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; }
.small-button { padding: .15rem .5rem; font-size: .85rem; }

ul.issue-list { list-style: none; margin: 0; padding: 0; }
ul.issue-list li { padding: .35rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
dialog { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1rem 1.25rem; max-width: min(72rem, 96vw); max-height: 92vh; overflow: auto; }
dialog::backdrop { background: rgba(20, 26, 33, .45); }
.gen-dialog { width: 72rem; }
.entry-dialog { width: 30rem; }
.entry-dialog svg.torso { width: 14rem; }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin-bottom: .75rem; }
fieldset.gen-checks, fieldset.gen-order { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.gen-check-list { max-height: 12rem; overflow: auto; display: flex; flex-direction: column; gap: .1rem; }
fieldset.gen-order ol { margin: 0 0 .5rem; padding-left: 1.4rem; }
fieldset.gen-order li { margin: .15rem 0; cursor: grab; }
.gen-rows { max-height: 18rem; overflow: auto; }
svg.torso-pick { cursor: crosshair; }
svg.torso .torso-site-selected circle { fill: #b07800; stroke: var(--ink); stroke-width: .8; }
@media (max-width: 1100px) { .ed-grid { grid-template-columns: minmax(0, 1fr); } .ed-side { position: static; max-height: none; } }

/* Library (/admin/library). */
.section-toc { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
ol.torso-legend { margin: .25rem 0 0; padding-left: 1.4rem; font-size: .85rem; columns: 2; }
.library-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1rem; align-items: start; }
.library-form svg.torso { width: 13rem; }
.site-feedback { color: var(--err-ink); min-height: 1.2em; margin: 0 0 .5rem; }
@media (max-width: 960px) { .library-grid { grid-template-columns: minmax(0, 1fr); } }

/* Recordings explorer (/recordings). */
.facets { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem .9rem; align-items: end; }
.facets select, .facets input { width: 100%; }
svg [hidden] { display: none; }
ul.diff-list { margin: 0 0 .75rem; padding-left: 1.2rem; }
ul.diff-list li { margin: .2rem 0; }

/* Grouped grids (StageMatrix) and the visit page's step panel. */
table.grouped th[scope=colgroup], table.grouped th[scope=rowgroup] { background: #e6ebf0; }
table.grouped td.empty { background: repeating-linear-gradient(45deg, #f3f5f7, #f3f5f7 4px, #e9edf1 4px, #e9edf1 8px); }
.step-num { display: inline-block; min-width: 1.6rem; padding: 0 .3rem; border-radius: 999px; background: var(--info-bg);
  color: var(--info-ink); font-weight: 700; font-size: .8rem; text-align: center; text-decoration: none; }
a.step-num:hover { background: var(--accent); color: var(--accent-ink); }
.phone-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.phone-head h3 { margin: .5rem auto .5rem 0; }
.step-panel:empty { display: none; }
.step-panel { margin-top: .75rem; }
.step-panel .attempt { border-top: 1px solid var(--line); padding: .5rem 0; }
ul.players li { margin: .25rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
ul.players audio { height: 2rem; }


/* ==== Live sessions console (/live, static/console/, docs/13) ==== */
.live-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: calc(-1 * var(--space-3)) 0 var(--space-5); color: var(--text-muted); font-size: var(--text-sm); }
.live-top .live-top-text { margin-right: auto; }
.live-sessions { display: flex; flex-direction: column; gap: var(--space-6); }

/* The session card: header (who), control bar, then steps | current step | devices. */
.live-session-header { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-4) var(--space-5); }
.live-who { min-width: 0; }
.live-who .eyebrow { margin: 0; }
.live-who-name { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.live-who-meta { margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.live-who-meta a { color: inherit; }
.live-progress { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.live-progress-text { text-align: right; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.live-progress-count { display: block; font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.live-progress progress { width: 160px; }

.control-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); background: var(--gray-50); color: var(--text-2); }
.control-bar-icon { width: 20px; height: 20px; flex: none; }
.control-bar-text { margin: 0; flex: 1; min-width: 0; }
.control-bar-text strong { color: var(--text); }
.control-bar.is-console { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); }
.control-bar.is-console strong { color: var(--accent-700); }
.control-bar.is-offline { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-border); }

.live-grid { display: grid; grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(260px, 300px); }
.live-col { min-width: 0; padding: var(--space-5); }
.live-col + .live-col { border-left: 1px solid var(--border); }
.live-steps { padding: var(--space-5) var(--space-2); max-height: 680px; overflow-y: auto; }
.live-col.live-now-col { padding: 0; }
.live-col-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 var(--space-3); }
.live-steps .live-col-title { padding: 0 var(--space-3); }

/* Current step: the objective in large type, a short checklist, the state, the actions. */
.live-now { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-6); }
.objective { margin: 0; font-size: var(--text-4xl); line-height: 1.15; font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--text); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: checklist; }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-lg); color: var(--text-2); counter-increment: checklist; }
.checklist li::before { content: counter(checklist); width: 24px; height: 24px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--gray-100);
  color: var(--text-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; }

.state-line { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--gray-50); border: 1px solid var(--border); }
.state-line-icon { width: 22px; height: 22px; flex: none; color: var(--gray-500); }
.state-line-text { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); }
.state-line-sub { margin: 0; color: var(--text-muted); font-size: var(--text-md); }
.state-line-main { flex: 1; min-width: 0; }
.state-line.is-recording { background: var(--danger-bg); border-color: var(--danger-border); }
.state-line.is-recording .state-line-icon { color: var(--danger-solid); }
.state-line.is-check { background: var(--accent-50); border-color: var(--accent-100); }
.state-line.is-check .state-line-icon { color: var(--accent-500); }
.state-line.is-success { background: var(--success-bg); border-color: var(--success-border); }
.state-line.is-success .state-line-icon, .state-line.is-success .state-line-text { color: var(--success-ink); }
.state-line.is-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.state-line.is-warning .state-line-icon, .state-line.is-warning .state-line-text { color: var(--warning-ink); }
.state-line.is-danger { background: var(--danger-bg); border-color: var(--danger-border); }
.state-line.is-danger .state-line-icon, .state-line.is-danger .state-line-text { color: var(--danger-ink); }

.timer { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.timer-total { color: var(--text-muted); font-weight: var(--weight-semibold); font-size: var(--text-2xl); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--danger-solid); flex: none; animation: pill-pulse 1.4s ease-in-out infinite; }
.state-progress { flex-basis: 100%; }

.signal-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.signal-tile { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.signal-tile-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text); }
.signal-tile-state { font-size: var(--text-xs); color: var(--text-muted); }
.signal-tile.is-ok .signal-tile-state { color: var(--success-ink); }
.signal-tile.is-warn { border-color: var(--warning-border); }
.signal-tile.is-warn .signal-tile-state { color: var(--warning-ink); }
.signal-tile.is-bad { border-color: var(--danger-border); }
.signal-tile.is-bad .signal-tile-state { color: var(--danger-ink); }
.signal-tile.is-off { background: var(--gray-50); }
meter.level { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; border: 0; border-radius: var(--radius-pill); background: var(--gray-200); }
meter.level::-webkit-meter-bar { background: var(--gray-200); border: 0; border-radius: var(--radius-pill); height: 6px; }
meter.level::-webkit-meter-optimum-value { background: var(--success-solid); border-radius: var(--radius-pill); }
meter.level::-moz-meter-bar { background: var(--success-solid); border-radius: var(--radius-pill); }

.action-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.action-row .action-spacer { flex: 1; }
.action-note { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.action-note.is-error { color: var(--danger-ink); }
.live-details { font-size: var(--text-sm); color: var(--text-muted); }
.live-details summary { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); }
.live-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-4); margin: var(--space-2) 0 0; }
.live-details dt { color: var(--text-muted); }
.live-details dd { margin: 0; color: var(--text-2); }

.live-devices { display: flex; flex-direction: column; gap: var(--space-3); }
.device-chip-error { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-2) 0 0; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger-ink); font-size: var(--text-sm); line-height: 1.35; }
.device-chip-error .btn-icon { margin-top: 1px; }

/* QTM: "Record with QTM" for the current step, the QTM capture's status, the synchronised countdown. */
.qtm-choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--gray-25); max-width: 25rem; }
.qtm-choice.is-on { background: var(--accent-50); border-color: var(--accent-100); }
.qtm-choice.is-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.qtm-choice-icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--gray-500); }
.qtm-choice.is-on .qtm-choice-icon { color: var(--accent-600); }
.qtm-choice.is-warning .qtm-choice-icon { color: var(--warning-ink); }
.qtm-choice-icon svg { width: 20px; height: 20px; display: block; }
.qtm-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qtm-choice .switch { font-weight: var(--weight-semibold); }
.qtm-choice-hint { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.qtm-choice-hint .btn-icon { margin-top: 2px; }
.qtm-choice-hint.is-warning { color: var(--warning-ink); }

.qtm-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: calc(-1 * var(--space-2)); }
.qtm-status-icon { width: 18px; height: 18px; flex: none; color: var(--gray-500); }
.qtm-status-name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }

.countdown { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--accent-50); border: 1px solid var(--accent-200); }
.countdown-main { flex: 1; min-width: 0; }
.countdown-text { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--accent-700); }
.countdown-sub { margin: 2px 0 0; color: var(--text-2); font-size: var(--text-md); }
.countdown-number { width: 88px; height: 88px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--accent-600); color: #fff; font-family: var(--font-display); font-size: 3.25rem; font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums; line-height: 1; box-shadow: 0 0 0 6px var(--accent-100); animation: countdown-pop .3s ease-out; }
.countdown .rec-dot { width: 20px; height: 20px; margin: 0 34px; }
@keyframes countdown-pop { from { transform: scale(.88); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .countdown-number { animation: none; } }

.fallback .callout-text { color: var(--text-2); opacity: 1; }
.fallback-actions { margin-top: var(--space-3); }

/* A step that records with QTM: a quiet tag in the step list. */
.step-tag { flex: none; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted);
  font-size: 0.6875rem; font-weight: var(--weight-semibold); letter-spacing: .04em; line-height: 16px; }
.step-item.is-current .step-tag { border-color: var(--accent-200); background: var(--surface); color: var(--accent-700); }

/* A primary button that waits (e.g. "Getting QTM ready…"): readable, with a small spinner. */
.btn.is-busy:disabled { opacity: .85; }
.btn.is-busy::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff; animation: btn-spin .8s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.idle-list { list-style: none; margin: var(--space-4) auto 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-width: 28rem; text-align: left; }

@media (max-width: 1180px) {
  .live-grid { grid-template-columns: minmax(230px, 260px) minmax(0, 1fr); }
  .live-col.live-devices-col { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
  .live-devices { flex-direction: row; flex-wrap: wrap; }
  .live-devices > * { flex: 1 1 260px; }
}
@media (forced-colors: active) {
  .pill, .step-icon, .device-chip { border: 1px solid CanvasText; }
}

/* ==== Visit list (/visits) ==== */
.visit-row-title { font-weight: var(--weight-semibold); }
.visit-row-code { display: inline-block; margin-left: var(--space-2); padding: 0 6px; border-radius: 4px; background: var(--gray-100); color: var(--text-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.visit-row-status { display: inline-flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.visit-row-steps { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.visit-row-steps + .visit-row-steps { margin-top: var(--space-1); }
.visit-row-count { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.seg-strip { gap: 3px; }
.seg { min-width: 1.4rem; border-radius: 5px; line-height: 1.4rem; font-size: .6875rem; }

/* ==== Visit page (/visits/..., static/visit/) ==== */
.vp { display: flex; flex-direction: column; gap: var(--space-5); }
.vp-icon { width: 18px; height: 18px; flex: none; }
.vp-icon-sm { width: 14px; height: 14px; flex: none; }
.vp-muted { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.vp-loading { padding: var(--space-6) 0; }
.vp-note { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--gray-50); color: var(--text-2); font-size: var(--text-sm); }

.vp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: calc(-1 * var(--space-2)) 0 0; padding: 0;
  font-size: var(--text-sm); color: var(--text-muted); }
.vp-crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--gray-300); }
.vp-crumbs a { color: var(--text-2); text-decoration: none; }
.vp-crumbs a:hover { color: var(--accent-700); text-decoration: underline; }
.vp-crumbs [aria-current] { color: var(--text); font-weight: var(--weight-semibold); }

/* Header card: who, where it stands, three counts. */
.vp-hero { overflow: hidden; }
.vp-hero-main { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) var(--space-6);
  background: linear-gradient(120deg, var(--surface) 55%, var(--accent-50)); }
.vp-hero-who { flex: 1; min-width: 0; }
.vp-hero-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 2px 0 var(--space-3); }
.vp-participant { margin: 0; font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: -0.02em; line-height: 1.1; }
.vp-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; color: var(--text-2); font-size: var(--text-md); }
.vp-meta li { display: inline-flex; align-items: center; gap: var(--space-2); }
.vp-meta .vp-icon { color: var(--gray-400); }
.vp-meta strong { color: var(--text); }

.vp-ring { position: relative; width: 132px; height: 132px; flex: none; }
.vp-ring svg { width: 100%; height: 100%; display: block; }
.vp-ring-track { fill: none; stroke: var(--gray-200); stroke-width: 9; }
.vp-ring-value { fill: none; stroke: var(--accent-500); stroke-width: 9; stroke-linecap: round; }
.vp-ring.is-complete .vp-ring-value { stroke: var(--success-solid); }
.vp-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vp-ring-count { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.vp-ring-of { font-size: var(--text-lg); color: var(--text-muted); font-weight: var(--weight-semibold); }
.vp-ring-label { margin-top: 4px; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--weight-semibold); }

.vp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.vp-stat { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); }
.vp-stat + .vp-stat { border-left: 1px solid var(--border); }
.vp-stat-icon { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md);
  background: var(--accent-50); color: var(--accent-600); }
.vp-stat-icon .vp-icon { width: 22px; height: 22px; }
.vp-stat.is-ok .vp-stat-icon { background: var(--success-bg); color: var(--success-ink); }
.vp-stat.is-warn .vp-stat-icon { background: var(--warning-bg); color: var(--warning-ink); }
.vp-stat-body { flex: 1; min-width: 0; }
.vp-stat-value { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1.15; font-variant-numeric: tabular-nums; }
.vp-stat-of { color: var(--text-muted); font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.vp-stat-label { margin: 0; font-weight: var(--weight-semibold); color: var(--text); }
.vp-stat-detail { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.vp-stat progress { margin-top: var(--space-2); max-width: 14rem; }
.vp-banner { margin: 0; }

/* Sections and multi-phone parts. */
.vp-part { display: flex; flex-direction: column; gap: var(--space-5); }
.vp-part-head { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 2px solid var(--border); }
.vp-part-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--gray-100); color: var(--gray-600); }
.vp-part-title { margin: 0; font-size: var(--text-xl); }
.vp-section { margin: 0; }
.vp-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-3); }
.vp-section-head h2 { margin: 0; }
.vp-h-sub { font-size: var(--text-lg); }

.vp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--text-2); }
.vp-legend li { display: inline-flex; align-items: center; gap: 6px; }
.vp-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface); flex: none; }

/* Steps: stage cards with the phone's grid of tiles, beside the step panel. */
.vp-steps-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: var(--space-5); align-items: start; }
.vp-stages { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.vp-stage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5) var(--space-5); }
.vp-stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.vp-stage-head h3 { margin: 0; font-size: var(--text-lg); }
.vp-stage-count { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-stage-count.is-complete { color: var(--success-ink); font-weight: var(--weight-semibold); }
.vp-block + .vp-block { margin-top: var(--space-4); }
.vp-block-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

/* The wrap (not the table) takes the negative margin that cancels the table's outer border-spacing: the table is then
   exactly as wide as the wrap, so it only scrolls when the tiles really do not fit, and the spacing leaves room for a
   tile's hover lift and selection ring (overflow-x: auto clips vertical overflow into a scrollbar otherwise). */
.vp-matrix-wrap { overflow-x: auto; margin: calc(-1 * var(--space-2)); }
table.vp-matrix { border-collapse: separate; border-spacing: var(--space-2); width: 100%; table-layout: auto; }
table.vp-matrix th { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); text-align: left; vertical-align: middle; padding: 0 var(--space-2); white-space: nowrap; }
table.vp-matrix thead th { text-align: center; padding-bottom: 2px; }
table.vp-matrix thead th.vp-col-group { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
table.vp-matrix tbody th, table.vp-matrix .vp-corner { width: 1%; padding-right: var(--space-3); }
table.vp-matrix td { padding: 0; vertical-align: top; }
.vp-tile-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.vp-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; width: 100%; min-width: 150px; min-height: 84px;
  padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text);
  text-align: left; font-weight: var(--weight-medium); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.vp-tile.is-wide { width: 236px; }
button.vp-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
button.vp-tile:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-md); }
.vp-tile.is-selected { box-shadow: 0 0 0 2px var(--accent-500), var(--shadow-md); transform: translateY(-1px); }
.vp-tile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.vp-tile-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(16, 24, 40, .08); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.vp-tile-label { font-size: var(--text-sm); color: var(--text-2); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vp-tile-state { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.vp-tile-icon { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--gray-300); color: #fff; }
.vp-tile-icon .vp-icon { width: 12px; height: 12px; stroke-width: 3; }
.vp-tile-count { font-weight: var(--weight-medium); color: var(--text-muted); }

.vp-tile.is-good { background: var(--success-bg); border-color: var(--success-border); }
.vp-tile.is-good .vp-tile-state { color: var(--success-ink); }
.vp-tile.is-good .vp-tile-icon { background: var(--success-solid); }
.vp-tile.is-flagged { background: var(--warning-bg); border-color: var(--warning-border); }
.vp-tile.is-flagged .vp-tile-state { color: var(--warning-ink); }
.vp-tile.is-flagged .vp-tile-icon { background: var(--warning-solid); }
.vp-tile.is-failed { background: var(--danger-bg); border-color: var(--danger-border); }
.vp-tile.is-failed .vp-tile-state { color: var(--danger-ink); }
.vp-tile.is-failed .vp-tile-icon { background: var(--danger-solid); }
.vp-tile.is-review { background: var(--info-bg); border-color: var(--info-border); }
.vp-tile.is-review .vp-tile-state { color: var(--info-ink); }
.vp-tile.is-review .vp-tile-icon { background: var(--info-solid); }
.vp-tile.is-skipped { background: repeating-linear-gradient(135deg, var(--gray-50), var(--gray-50) 6px, var(--gray-100) 6px, var(--gray-100) 12px); border-color: var(--gray-200); }
.vp-tile.is-skipped .vp-tile-state { color: var(--text-muted); }
.vp-tile.is-skipped .vp-tile-icon { background: var(--gray-400); }
.vp-tile.is-todo { background: var(--surface); border: 1.5px dashed var(--gray-300); box-shadow: none; }
.vp-tile.is-todo .vp-tile-state { color: var(--text-muted); font-weight: var(--weight-medium); }
.vp-tile.is-todo .vp-tile-icon { background: transparent; border: 1.5px solid var(--gray-300); color: transparent; }
.vp-tile.is-extra { border-style: dashed; }
.vp-tile.is-none { cursor: default; box-shadow: none; border: 1px dashed var(--gray-200);
  background: repeating-linear-gradient(45deg, var(--gray-25), var(--gray-25) 5px, var(--gray-50) 5px, var(--gray-50) 10px); }
.vp-swatch.is-good { background: var(--success-solid); border-color: var(--success-solid); }
.vp-swatch.is-flagged { background: var(--warning-solid); border-color: var(--warning-solid); }
.vp-swatch.is-failed { background: var(--danger-solid); border-color: var(--danger-solid); }
.vp-swatch.is-review { background: var(--info-solid); border-color: var(--info-solid); }
.vp-swatch.is-skipped { background: repeating-linear-gradient(135deg, var(--gray-100), var(--gray-100) 3px, var(--gray-300) 3px, var(--gray-300) 6px); }
.vp-swatch.is-todo { border-style: dashed; }

.vp-oep { display: inline-flex; align-items: center; padding: 0 6px; height: 20px; border-radius: 5px; font-size: 0.6875rem; font-weight: var(--weight-bold);
  letter-spacing: .05em; color: #fff; background: var(--gray-400); flex: none; }
.vp-oep.is-ok { background: var(--success-solid); }
.vp-oep.is-warn { background: var(--warning-solid); color: var(--gray-900); }
.vp-oep.is-error { background: var(--danger-solid); }

/* The step panel. */
.vp-panel { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.vp-panel.is-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-7) var(--space-5);
  border-style: dashed; box-shadow: none; background: var(--gray-25); }
.vp-panel-empty-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-50); color: var(--accent-500); }
.vp-panel-empty-icon .vp-icon { width: 24px; height: 24px; }
.vp-panel-empty-title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.vp-panel.is-empty .vp-muted { max-width: 18rem; }
.vp-panel-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.vp-panel-head-text { flex: 1; min-width: 0; }
.vp-panel-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.3; }
.vp-panel-title:focus { outline: none; }
.vp-panel-title:focus-visible { outline: none; }
.vp-panel-state { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; }
.vp-panel-close { flex: none; min-height: 32px; width: 32px; padding: 0; }
.vp-panel-none { padding: var(--space-4) var(--space-5); }
.vp-panel-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); background: var(--gray-25); font-size: var(--text-sm); }
.vp-panel-foot a, .vp-rec-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: var(--weight-medium); }
.vp-panel-foot a:hover, .vp-rec-link:hover { text-decoration: underline; }

.vp-attempts { list-style: none; margin: 0; padding: 0; }
.vp-attempt { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.vp-attempt + .vp-attempt { border-top: 1px solid var(--border); background: var(--gray-25); }
.vp-attempt-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vp-attempt-title { font-weight: var(--weight-semibold); }
.vp-attempt-current { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--accent-700); }
.vp-attempt-time { margin-left: auto; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }

.vp-rec { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-2); }
.vp-rec-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vp-rec-icon { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-50); color: var(--accent-600); }
.vp-rec-icon.is-oep { background: #e6f6f5; color: #11776f; }
.vp-rec-title { font-weight: var(--weight-semibold); }
.vp-rec-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.vp-rec-link { flex: none; font-size: var(--text-sm); }
.vp-rec-facts { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.vp-rec-error { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); color: var(--danger-ink); }
.vp-file-name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.vp-audio { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.vp-audio li { display: flex; flex-direction: column; gap: 2px; }
.vp-audio-label { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-2); }
.vp-audio audio { width: 100%; height: 34px; }
.vp-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.vp-files li { display: grid; grid-template-columns: 18px 7.5rem minmax(0, 1fr) max-content; align-items: center; gap: var(--space-2); padding: 3px 0; }
.vp-files .vp-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.vp-file-check { display: inline-flex; color: var(--warning-ink); }
.vp-files li.is-verified .vp-file-check { color: var(--success-solid); }
.vp-file-kind { font-weight: var(--weight-medium); color: var(--text-2); white-space: nowrap; }
.vp-file-size { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--text-xs); white-space: nowrap; }
.vp-scheduled { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Step attempts: a timeline of cards, oldest first. */
.vp-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.vp-timeline::before { content: ""; position: absolute; left: 87px; top: 14px; bottom: 14px; width: 2px; background: var(--border); }
.vp-tl-day { padding: var(--space-2) 0 0 112px; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.vp-tl-item { position: relative; display: grid; grid-template-columns: 64px 24px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.vp-tl-card { display: grid; grid-template-columns: minmax(0, 1fr) auto 168px; align-items: center; gap: var(--space-4); min-width: 0; padding: 10px var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.vp-tl-time { text-align: right; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vp-tl-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-300); color: #fff; box-shadow: 0 0 0 4px var(--page-bg); }
.vp-tl-dot .vp-icon { width: 13px; height: 13px; stroke-width: 3; }
.vp-tl-item.is-good .vp-tl-dot { background: var(--success-solid); }
.vp-tl-item.is-flagged .vp-tl-dot { background: var(--warning-solid); }
.vp-tl-item.is-failed .vp-tl-dot { background: var(--danger-solid); }
.vp-tl-item.is-review .vp-tl-dot { background: var(--info-solid); }
.vp-tl-item.is-replaced .vp-tl-dot, .vp-tl-item.is-skipped .vp-tl-dot { background: var(--gray-400); }
.vp-tl-step { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.vp-tl-results { display: grid; grid-template-columns: 11.5rem 11.5rem; align-items: center; gap: var(--space-2); }
.vp-tl-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.vp-tl-state { justify-self: start; }
.vp-tl-step-button { display: flex; align-items: center; gap: var(--space-2); min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--text);
  font-weight: var(--weight-semibold); text-align: left; justify-content: flex-start; }
.vp-tl-step-button:hover { background: none; color: var(--accent-700); }
.vp-tl-step-button:hover .vp-tl-label { text-decoration: underline; }
.vp-tl-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--gray-100); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-2); flex: none; }
.vp-tl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-tl-attempt { font-size: var(--text-sm); color: var(--text-muted); }
.vp-result { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-medium);
  text-decoration: none; white-space: nowrap; border: 1px solid var(--muted-border); background: var(--muted-bg); color: var(--muted-ink); }
a.vp-result:hover { text-decoration: underline; }
.vp-result.is-ok { background: var(--success-bg); border-color: var(--success-border); color: var(--success-ink); }
.vp-result.is-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-ink); }
.vp-result.is-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
.vp-result.is-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-ink); }
.vp-result.is-none { background: transparent; border-style: dashed; color: var(--text-muted); }
.vp-result-flag { padding-left: 6px; border-left: 1px solid currentColor; font-size: var(--text-xs); }

/* Technical details. */
.vp-tech > summary { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); font-family: var(--font-sans); font-size: var(--text-md); list-style: none; }
.vp-tech > summary::-webkit-details-marker { display: none; }
.vp-tech > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: rotate(-45deg);
  transition: transform .15s ease; align-self: center; margin-right: 2px; }
.vp-tech[open] > summary::before { transform: rotate(45deg); }
.vp-tech > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }
.vp-tech-summary-title { font-weight: var(--weight-semibold); color: var(--text); }
.vp-tech-body { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--space-4); }
.vp-tech-body > .vp-facts { margin-top: var(--space-4); }
.vp-tech-part { display: flex; flex-direction: column; gap: var(--space-3); }
.vp-tech-part + .vp-tech-part { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.vp-tech-title { margin: 0; font-size: var(--text-md); }
.vp-tech-sub { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); }
.vp-tech-sub a { font-weight: var(--weight-medium); }
.vp-tech-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.vp-tech-table { font-size: var(--text-sm); }
.vp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-5); margin: 0; font-size: var(--text-sm); }
.vp-facts dt { color: var(--text-muted); }
.vp-facts dd { margin: 0; color: var(--text); }
.vp-export { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0; }
.vp-json summary { font-size: var(--text-sm); color: var(--text-2); font-family: var(--font-sans); }

@media (max-width: 1100px) {
  .vp-steps-layout { grid-template-columns: minmax(0, 1fr); }
  .vp-panel { position: static; max-height: none; }
  .vp-tl-card { grid-template-columns: minmax(0, 1fr) auto; }
  .vp-tl-results { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, max-content)); }
}
@media (max-width: 720px) {
  .vp-hero-main { flex-direction: column; align-items: flex-start; padding: var(--space-4); }
  .vp-stats { grid-template-columns: minmax(0, 1fr); }
  .vp-stat + .vp-stat { border-left: 0; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .vp-tile, .vp-tech > summary::before { transition: none; }
}
@media (forced-colors: active) {
  .vp-tile, .vp-oep, .vp-swatch, .vp-tl-dot { border: 1px solid CanvasText; }
  .vp-tile.is-selected { outline: 3px solid Highlight; }
}

/* ==== page styles A: recordings, recording detail, QTM recording, step attempt (insert below, keep inside this block) ==== */
.pill-row { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
ul.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.explorer-results { margin: var(--space-5) 0 0; }
.explorer-results > .filter-chips { margin: 0 0 var(--space-3); padding: 0; border: 0; }
.toolbar-summary { margin: 0; font-weight: var(--weight-semibold); color: var(--text-2); }
.toolbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* recording detail, QTM recording, step attempt */
.rec-hero .ui-card-body { display: flex; flex-direction: column; gap: var(--space-4); }
.rec-hero-top .pill { font-size: var(--text-lg); padding: 4px 16px; }
.rec-hero-top .pill-plain { font-size: var(--text-sm); padding: 2px 10px; }
.rec-callout { margin: 0; }
main > .stat-grid + .ui-card, .stat-grid + .ui-card { margin-top: var(--space-5); }
.rec-signal { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.rec-signal:first-of-type { padding-top: 0; border-top: 0; }
.rec-signal:last-child { padding-bottom: 0; }
.rec-signal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.rec-signal-head h3 { margin: 0; font-size: var(--text-md, 1rem); }
.rec-signal audio { width: 100%; max-width: 40rem; display: block; margin: var(--space-2) 0; }
.rec-signal .waveform-slot { padding: var(--space-2) 0; }
.rec-signal .callout { margin-top: var(--space-2); }
.timeline-wrap { margin-bottom: var(--space-4); }
.row-details > summary { cursor: pointer; color: var(--accent-700); font-size: var(--text-sm); }
.row-details pre.json { margin-top: var(--space-2); max-height: 20rem; }
ul.issue-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
li.issue { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--gray-50); }
.issue-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.issue-title { font-weight: var(--weight-semibold); }
.issue-meaning { margin: var(--space-1) 0 0; color: var(--text-2); }
li.issue p.small { margin: var(--space-1) 0 0; }
.rec-notes { margin-top: var(--space-5); }
.rec-notes > h3 { margin: 0 0 var(--space-3); font-size: var(--text-md, 1rem); }
.rec-notes ul.annotations { margin-bottom: var(--space-3); }
.rec-notes ul.annotations li { padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.rec-notes .callout { margin-bottom: var(--space-3); }
details.note-add { margin: var(--space-3) 0; background: var(--gray-50); }
details.note-add > summary { list-style: none; display: inline-flex; margin: var(--space-3); cursor: pointer; }
details.note-add > summary::-webkit-details-marker { display: none; }
details.note-add[open] > summary { margin-bottom: 0; }
details.note-add textarea { width: 100%; max-width: 40rem; }
.text-danger { color: var(--danger-ink); }
.rec-observed { margin-top: var(--space-4); }
.tech-body h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-md, 1rem); }
.tech-body > h3:first-child { margin-top: var(--space-4); }
.rec-observed > p.small, #timeline p.small { margin: var(--space-2) 0 var(--space-1); font-weight: var(--weight-semibold); }

/* ==== end A ==== */

/* ==== page styles B: dashboard, devices, users, integrity, audit, import, account, login (insert below) ==== */

/* dashboard */
.cell-main + .pill { margin-left: var(--space-2); }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.attention-list li:first-child { padding-top: 0; }
.attention-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.attention-text { font-weight: var(--weight-medium); }
.bar-row { display: grid; grid-template-columns: 9rem 1fr 4rem; align-items: center; gap: var(--space-3); padding: 6px 0; }
.bar-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

/* a menu that opens a form as a panel (Pair a device, Add user) and a form inside a row menu */
details.pop-menu > summary { list-style: none; }
.pop-panel { min-width: 24rem; max-width: calc(100vw - 2rem); padding: var(--space-4); }
.pop-panel .stack { margin-top: var(--space-3); }
.pop-panel button[hidden] { display: none; }
.pop-title { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.pair-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
details.menu-sub > summary.menu-item { list-style: none; }
details.menu-sub > summary.menu-item::-webkit-details-marker { display: none; }
details.menu-sub > summary.menu-item::after { content: "▸"; margin-left: auto; color: var(--text-muted); }
details.menu-sub[open] > summary.menu-item { background: var(--gray-100); }
details.menu-sub[open] > summary.menu-item::after { content: "▾"; }
.menu-sub .menu-form-inline { min-width: 14rem; }
.menu-sub .menu-form-inline form { display: flex; flex-direction: column; gap: var(--space-2); }
.table-wrap:has(details.menu[open]) { overflow: visible; }

/* devices */
.dev-hero .ui-card-body { padding: var(--space-4) var(--space-5); }
.dev-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.calib-profile { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.calib-profile p { margin: 0 0 var(--space-1); }
.calib-title { font-weight: var(--weight-semibold); }
.center-card { display: flex; justify-content: center; padding: var(--space-5) 0; }
.pairing-card { max-width: 36rem; width: 100%; text-align: center; }
.pairing-card .pairing-code { margin: var(--space-3) 0; }
.pairing-card pre { text-align: left; overflow-x: auto; background: var(--gray-50); padding: var(--space-3); border-radius: var(--radius-sm); }
.pairing-card .callout { text-align: left; margin: var(--space-4) 0; }

/* users */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); }
.role-box { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--gray-25); }
.role-box h3 { margin: 0 0 var(--space-1); }
.role-box p { margin: 0 0 var(--space-3); }

/* import */
ul.plain-list { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--text-2); }
ul.plain-list li { margin-bottom: var(--space-1); }
.import-hero { margin-bottom: var(--space-4); }
.import-hero .ui-card-body > * + * { margin-top: var(--space-4); }
main > .callout + .ui-card, main > .stat-grid + .callout, main > .stat-grid + .ui-card, main > .callout + .callout { margin-top: var(--space-4); }
main > .stat-grid { margin-bottom: var(--space-4); }

/* login */
.login-card { width: 100%; max-width: 24rem; }
.login-card .ui-card-body { padding: var(--space-6); }
.login-brand { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); }
.login-brand::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent-500), #22a3a3); }
.login-title { margin: 0 0 var(--space-4); }
.login-card .callout { margin-bottom: var(--space-4); }
.login-note { margin: var(--space-4) 0 0; }

/* ==== end B ==== */

/* ==== page styles C: export, protocols, library, releases, participants, visits list (insert below) ==== */

/* -- export */
.export-filters .filter-row { align-items: flex-end; }
.export-more { margin-top: var(--space-3); }
.export-more > .filter-more-grid, .export-more > fieldset { margin-top: var(--space-3); }
.export-more fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.export-more legend { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); padding: 0 var(--space-2); }
.export-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--space-3); }
.export-devices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.export-excluded-title { margin: var(--space-4) 0 var(--space-1); font-weight: var(--weight-semibold); }
.export-excluded { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.format-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.format-option { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); row-gap: 2px; align-items: start; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.format-option input { grid-row: 1 / span 2; margin-top: 3px; }
.format-option:hover { border-color: var(--border-strong); }
.format-option:has(input:checked) { border-color: var(--accent-500); background: var(--accent-50); }
.format-title { font-weight: var(--weight-semibold); }
.format-text { grid-column: 2; font-size: var(--text-sm); color: var(--text-2); font-weight: var(--weight-regular, 400); }
.export-ttl { display: none; margin-top: var(--space-4); max-width: 22rem; }
.export-download:has(input[value=script]:checked) .export-ttl, .export-download:has(input[value=urls]:checked) .export-ttl { display: flex; }
.export-actions { margin-top: var(--space-4); }

/* -- shared by page C: a form card that opens from a header button (#target) */
.on-demand { display: none; }
.on-demand:target { display: block; }
.stack-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 44rem; }
.stack-form .form-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.stack-form .form-row > label { flex: 1 1 14rem; }
.stack-form input[type=text], .stack-form input[type=file], .stack-form select, .stack-form textarea { width: 100%; }
.form-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.page-actions form.inline { display: inline-flex; margin: 0; }
.page-actions-note { align-self: center; max-width: 24rem; }

/* -- protocols */
.protocol-hero-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.protocol-hero-id { color: var(--text-2); }
.protocol-hero-text { margin: 0 0 var(--space-4); color: var(--text-2); }
.protocol-hero .stat-grid { margin-bottom: var(--space-4); }
.validation-list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.validation-rules { margin-bottom: var(--space-5); }
.validation-rules > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.diff-summary { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.protocol-body { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-5); align-items: start; margin-bottom: var(--space-5); }
.protocol-body > .ui-card { margin: 0; }
.protocol-sites { position: sticky; top: var(--space-4); }
@media (max-width: 1000px) { .protocol-body { grid-template-columns: 1fr; } .protocol-sites { position: static; } }
.stage-block + .stage-block { border-top: 1px solid var(--border); }
.stage-block-head { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-2); }
.stage-block-head h3 { margin: 0; font-size: var(--text-md); }
.stage-block-text { padding: 0 var(--space-5); margin: 0 0 var(--space-2); }
.step-rows { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.step-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-5); }
.step-row:hover { background: var(--gray-50); }
.step-row-num { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.step-row-main { display: flex; flex-direction: column; min-width: 0; }
.step-row-label { font-weight: var(--weight-semibold); }
.step-row-sub { font-size: var(--text-sm); color: var(--text-muted); }
.step-row-duration { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); }
.step-row-signals { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 8rem; }
.signal { font-size: var(--text-xs); padding: 1px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); }
.signal.is-required { color: var(--text); border-color: var(--border-strong); font-weight: var(--weight-semibold); }
.signal.is-marker { color: var(--info-ink); border-color: var(--info-border); background: var(--info-bg); }
@media (max-width: 700px) { .step-row { grid-template-columns: 2rem minmax(0, 1fr) auto; } .step-row-signals { grid-column: 2 / -1; justify-content: flex-start; } }

/* -- library */
.library-rules { margin-bottom: var(--space-4); }
main > .segmented-links { margin-bottom: var(--space-4); }
.library-hero .torso-pair { margin-top: var(--space-4); }
.library-form .torso { width: 13rem; }
.used-by { list-style: none; margin: 0; padding: 0; }
.used-by li { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--border); }
.used-by-note { padding: var(--space-3) var(--space-5) 0; margin: 0; }

/* -- releases (bridge, app) */
.release-callout { margin-top: var(--space-4); }
.release-upload { margin-bottom: var(--space-5); }
.release-upload .cards-2 { margin-bottom: var(--space-3); }
.release-help > summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); }
.release-help ul { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-2); }

/* -- visits, participants */
.participant-hero .stat-grid { margin-bottom: var(--space-4); }
.step-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); }
.step-legend-item { white-space: nowrap; }
.step-panel-body .attempt { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
.step-panel-body .attempt:first-child { border-top: 0; padding-top: 0; }
.attempt-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.attempt-head .btn { margin-left: auto; }

/* -- page C: spacing inside cards */
.ui-card-body > .stat-grid { margin-bottom: var(--space-4); }
.ui-card-body.is-flush > .pager { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); }

/* ==== end C ==== */