/* ============================================================================
   LiftMaster AI — component and layout styles
   ----------------------------------------------------------------------------
   Generated from DESIGN.md §4 (components), §5 (layout), §6 (depth), §7 (motion).
   Every value here resolves to a token; the file contains no literal colours.

   Interaction tier: the landing page is **L2** (crafted motion, six signature
   categories, one meaningful animation), the application is **L1** (fast and
   invisible: state changes only, no entrance choreography on data surfaces —
   an engineer watching a fleet does not want the table to arrive in sequence).
   ========================================================================== */

/* ============================================================================
   Primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--prose {
  max-width: var(--container-prose);
}

.container--wide {
  max-width: var(--container-wide);
}

/*
 * A vertical stack. The gap modifiers carry `display: grid` themselves rather than assuming a `.stack`
 * base class — the first version of this file separated them, and every `stack-2` used on its own
 * silently rendered as inline flow, which is what put "Signed inadminAdministrator" on one line in the
 * application rail. A layout primitive that fails quietly when half of it is omitted is a trap, so the
 * modifiers stand alone.
 */
.stack,
.stack-1,
.stack-2,
.stack-3,
.stack-4,
.stack-5,
.stack-6,
.stack-8,
.stack-12 {
  display: grid;
  align-content: start;
}

.stack-1 { gap: var(--space-1); }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }
.stack-8 { gap: var(--space-8); }
.stack-12 { gap: var(--space-12); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.row--between {
  justify-content: space-between;
}

.row--wrap {
  flex-wrap: wrap;
}

.row--top {
  align-items: flex-start;
}

.grow { flex: 1 1 auto; min-width: 0; }

.right { text-align: right; }

.mono { font-family: var(--font-mono); }

.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px
  ;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Type helpers (§3) ───────────────────────────────────────────────────── */

.display-1 {
  font: 700 var(--fs-display-1) / 1.02 var(--font-display);
  letter-spacing: -0.02em;
}

.display-2 {
  font: 700 var(--fs-display-2) / 1.08 var(--font-display);
  letter-spacing: -0.015em;
}

.h1 { font: 600 var(--fs-h1) / 1.2 var(--font-display); letter-spacing: -0.01em; }
.h2 { font: 600 var(--fs-h2) / 1.28 var(--font-display); }
.h3 { font: 600 var(--fs-h3) / 1.35 var(--font-display); }
.h4 { font: 600 var(--fs-h4) / 1.4 var(--font-sans); }

.body { font: 400 var(--fs-body) / 1.65 var(--font-sans); }
.ui { font: 400 var(--fs-ui) / 1.5 var(--font-sans); }
.sm { font: 400 var(--fs-sm) / 1.45 var(--font-sans); }
.muted { color: var(--color-text-muted); }
.secondary { color: var(--color-text-secondary); }

.label {
  font: 500 var(--fs-xs) / 1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.prose p + p { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.prose ul { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.prose li { position: relative; padding-left: var(--space-5); }
.prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: var(--color-primary);
}
.prose code {
  font: 400 var(--fs-code) / 1.6 var(--font-mono);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}

/* ── Numeric convention (§3, hard rule) ──────────────────────────────────── */

.metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.metric__unit {
  font-size: 0.7em;
  color: var(--color-text-secondary);
  margin-left: 3px;
  letter-spacing: 0.01em;
}

.metric--lg { font: 500 var(--fs-metric-lg) / 1.1 var(--font-mono); }
.metric--md { font: 500 var(--fs-metric) / 1.2 var(--font-mono); }
.metric--sm { font: 500 var(--fs-sm) / 1.4 var(--font-mono); }

.metric--safe { color: var(--color-signal-safe); }
.metric--watch { color: var(--color-signal-watch); }
.metric--alarm { color: var(--color-signal-alarm); }
.metric--unknown { color: var(--color-signal-unknown); }

.code-block {
  font: 400 var(--fs-code) / 1.6 var(--font-mono);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  overflow-x: auto;
  white-space: pre;
  color: var(--color-text);
}

/* ── Button (§4.2) ───────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-text-inverse);
  --btn-bd: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 18px;
  font: 500 var(--fs-ui) / 1 var(--font-sans);
  letter-spacing: 0.005em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    transform var(--dur-instant) ease, box-shadow var(--dur-fast) ease, color var(--dur-fast) ease;
}

.btn:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

.btn:active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
  transform: translateY(0) scale(0.985);
  box-shadow: none;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--secondary { --btn-bg: var(--color-surface); --btn-fg: var(--color-text); --btn-bd: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-sunken); border-color: var(--color-text-muted); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--color-primary); --btn-bd: transparent; }
.btn--ghost:hover { background: var(--color-primary-soft); box-shadow: none; transform: none; }

.btn--danger { --btn-bg: var(--color-signal-alarm); --btn-fg: var(--color-text-inverse); --btn-bd: var(--color-signal-alarm); }
.btn--danger:hover { background: var(--color-signal-alarm-strong); border-color: var(--color-signal-alarm-strong); }

.btn--approve { --btn-bg: var(--color-signal-safe); --btn-fg: var(--color-text-inverse); --btn-bd: var(--color-signal-safe); }
.btn--approve:hover { background: var(--color-signal-safe-strong); border-color: var(--color-signal-safe-strong); }

.btn--sm { min-height: 30px; padding: 0 12px; font-size: var(--fs-sm); }
.btn--lg { min-height: 50px; padding: 0 26px; font-size: 15px; }
.btn--full { width: 100%; }

.btn__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (pointer: coarse) {
  .btn { min-height: 44px; min-width: 44px; }
}

/* ── Field (§4.3) ────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; }
.field__label {
  font: 500 var(--fs-xs) / 1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.field__hint { font: 400 var(--fs-sm) / 1.5 var(--font-sans); color: var(--color-text-muted); }
.field__input {
  min-height: 40px;
  padding: 8px 12px;
  width: 100%;
  font: 400 var(--fs-ui) / 1.5 var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.field__input::placeholder { color: var(--color-text-muted); }
.field__input:hover:not([disabled]) { border-color: var(--color-text-muted); }
.field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}
.field__input[disabled] { background: var(--color-surface-sunken); color: var(--color-text-muted); cursor: not-allowed; }
.field__input[aria-invalid='true'] { border-color: var(--color-signal-alarm); }
.field__input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(var(--color-signal-alarm-rgb), 0.15); }
.field__error {
  display: flex;
  gap: 6px;
  font: 500 var(--fs-sm) / 1.45 var(--font-sans);
  color: var(--color-signal-alarm);
}
.field__input--mono { font-family: var(--font-mono); font-size: 13px; }
textarea.field__input { min-height: 96px; resize: vertical; }
select.field__input { appearance: none; background-image: none; padding-right: 28px; }

/* ── Card / panel (§4.4) ─────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.card--flush { padding: 0; }
.card--sunken { background: var(--color-surface-sunken); box-shadow: none; }
.card--interactive { transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.card--interactive:hover { box-shadow: var(--shadow-2); border-color: var(--color-border-strong); }

/*
 * `flex-wrap` is load-bearing here rather than decorative.
 *
 * A card header is a title block and a control — a filter, a well picker, a form. The control has a width the
 * title cannot negotiate with, and at narrow viewports the two together are wider than the card. Without
 * wrapping, the pair overflows the card and scrolls the document sideways by a few pixels: measured on the
 * fleet overview at 390 px, the condition-trend card's well picker pushed the page to 392 px. Wrapping puts the
 * control on its own line, which is what a reader on a phone expects anyway.
 */
.card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.card__header > * { min-width: 0; }

.card__body { padding: var(--space-5); }
.card__body--tight { padding: var(--space-4); }
.card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.panel-title { display: grid; gap: 2px; }

/* ── Navigation (§4.5) ───────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: rgba(var(--color-bg-rgb), 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 68px;
}

.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a { font: 500 var(--fs-ui) / 1 var(--font-sans); color: var(--color-text-secondary); }
.site-nav a:hover { color: var(--color-text); text-decoration: none; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font: 600 17px / 1 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.wordmark:hover { text-decoration: none; }
.wordmark__mark { border-radius: var(--radius-sm); }

.site-footer {
  margin-top: var(--space-24);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-block: var(--space-12) var(--space-10);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-10);
}
.site-footer a { color: var(--color-text-secondary); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--color-primary); }
.site-footer__legal {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── Badge / chip / status pill (§4.6) ───────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font: 500 var(--fs-xs) / 1.4 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.badge--safe { background: var(--color-signal-safe-soft); border-color: rgba(var(--color-signal-safe-rgb), 0.3); color: var(--color-signal-safe); }
.badge--watch { background: var(--color-signal-watch-soft); border-color: rgba(var(--color-signal-watch-rgb), 0.3); color: var(--color-signal-watch); }
.badge--alarm { background: var(--color-signal-alarm-soft); border-color: rgba(var(--color-signal-alarm-rgb), 0.3); color: var(--color-signal-alarm); }
.badge--unknown { background: var(--color-signal-unknown-soft); border-color: rgba(var(--color-signal-unknown-rgb), 0.3); color: var(--color-signal-unknown); }
.badge--primary { background: var(--color-primary-soft); border-color: rgba(var(--color-primary-rgb), 0.26); color: var(--color-primary-on-soft); }
.badge--ai { background: var(--color-ai-soft); border-color: rgba(var(--color-ai-rgb), 0.28); color: var(--color-ai); }

.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font: 500 var(--fs-xs) / 1.4 var(--font-sans);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.chip[aria-pressed='true'] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-on-soft);
}

/* ── Table (§4.7) ────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); }

table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: 400 var(--fs-sm) / 1.45 var(--font-sans);
}

table.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border-strong);
  padding: 9px 12px;
  text-align: left;
  font: 500 var(--fs-xs) / 1.4 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

table.data tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

table.data tbody tr:hover td { background: rgba(var(--color-primary-rgb), 0.035); }
table.data tbody tr[data-clickable='true'] { cursor: pointer; }
table.data tbody tr[data-clickable='true']:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.data td.sticky-col, table.data th.sticky-col {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 2;
  box-shadow: 1px 0 0 var(--color-border);
}
table.data tbody tr:hover td.sticky-col { background: #fbfdfd; }
table.data thead th.sticky-col { background: var(--color-surface-sunken); z-index: 3; }

/* ── Boundary gauge (§4.8, signature component) ──────────────────────────── */

.gauge { display: grid; gap: 6px; }
.gauge__track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.gauge__zone { position: absolute; inset-block: 0; }
.gauge__zone--safe { left: 0; width: 70%; background: rgba(var(--color-signal-safe-rgb), 0.24); }
.gauge__zone--watch { left: 70%; width: 18%; background: rgba(var(--color-signal-watch-rgb), 0.24); }
.gauge__zone--alarm { left: 88%; width: 12%; background: rgba(var(--color-signal-alarm-rgb), 0.24); }
.gauge__marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-surface);
  transition: left var(--dur-slow) var(--ease-signature);
}
.gauge__limit { position: absolute; top: -3px; width: 1px; height: 14px; background: var(--color-signal-alarm); }
.gauge__legend {
  display: flex;
  justify-content: space-between;
  font: 500 11px / 1.4 var(--font-mono);
  color: var(--color-text-secondary);
}
.gauge__label { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }

/* ── Chart primitives (§4.9) ─────────────────────────────────────────────── */

.chart { width: 100%; overflow: visible; }
.chart__grid { stroke: var(--color-border); stroke-width: 1; }
.chart__axis { stroke: var(--color-border-strong); stroke-width: 1; }
.chart__tick { fill: var(--color-text-muted); font: 500 10px / 1 var(--font-mono); }
.chart__axis-label { fill: var(--color-text-secondary); font: 500 10px / 1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--primary { stroke: var(--color-primary); }
.chart__line--accent { stroke: var(--color-accent); }
.chart__line--accent-2 { stroke: var(--color-accent-2); }
.chart__line--accent-3 { stroke: var(--color-accent-3); }
.chart__band { fill: rgba(var(--color-primary-rgb), 0.09); }
.chart__threshold { stroke: var(--color-signal-alarm); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart__threshold-label { fill: var(--color-signal-alarm); font: 500 10px / 1 var(--font-mono); }
.chart__event { fill: var(--color-signal-watch); }
.chart__degraded-band { fill: rgba(var(--color-signal-unknown-rgb), 0.14); }
.chart__degraded-label { fill: var(--color-signal-unknown); font: 500 9.5px / 1 var(--font-sans); letter-spacing: 0.04em; }
.chart__legend { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.chart__legend-item { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-xs) / 1.4 var(--font-sans); color: var(--color-text-secondary); }
.chart__swatch { width: 14px; height: 3px; border-radius: 2px; }

/* ── Empty / loading / error states (§4.12) ──────────────────────────────── */

.state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}
.state__title { font: 600 var(--fs-h4) / 1.4 var(--font-sans); color: var(--color-text); }
.state__body { font: 400 var(--fs-sm) / 1.55 var(--font-sans); max-width: 46ch; color: var(--color-text-secondary); }
.state--error { border-color: rgba(var(--color-signal-alarm-rgb), 0.35); background: var(--color-signal-alarm-soft); }
.state--ai { border-color: rgba(var(--color-ai-rgb), 0.3); background: var(--color-ai-soft); }
.state--unknown { background: var(--color-signal-unknown-soft); }

.skeleton {
  background: linear-gradient(90deg, var(--color-surface-sunken) 0%, #f7f9fb 50%, var(--color-surface-sunken) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton 1.4s ease-in-out infinite;
  min-height: 12px;
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Toast (§4.11) ───────────────────────────────────────────────────────── */

.toast-region {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-3);
  max-width: 420px;
}
.toast {
  display: grid;
  gap: 4px;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  animation: toast-in var(--dur-base) var(--ease-signature);
}
.toast--ok { border-left-color: var(--color-signal-safe); }
.toast--alarm { border-left-color: var(--color-signal-alarm); }
.toast--ai { border-left-color: var(--color-ai); }
.toast__title { font: 600 var(--fs-sm) / 1.4 var(--font-sans); }
.toast__body { font: 400 var(--fs-sm) / 1.5 var(--font-sans); color: var(--color-text-secondary); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ── Modal (§4.10) ───────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(16, 24, 40, 0.42);
  display: grid;
  place-items: center;
  padding: var(--space-6);
  animation: fade-in var(--dur-fast) ease;
}
.modal {
  width: min(720px, 100%);
  max-height: 88vh;
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-4);
  animation: modal-in var(--dur-base) var(--ease-signature);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ── AI panels ───────────────────────────────────────────────────────────── */

.ai-panel {
  border: 1px solid rgba(var(--color-ai-rgb), 0.28);
  border-radius: var(--radius-lg);
  background: var(--color-ai-soft);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.ai-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 var(--fs-sm) / 1.4 var(--font-sans);
  color: var(--color-ai);
}
.ai-panel__body { font: 400 var(--fs-sm) / 1.6 var(--font-sans); color: var(--color-text); }

/* ============================================================================
   Landing page  (tier L2)
   ========================================================================== */

.landing { background: var(--color-bg); overflow-x: clip; }

.landing__glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 720px;
  background: var(--gradient-hero-glow);
  pointer-events: none;
}

.section {
  position: relative;
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-border);
}
.section--flush { border-top: 0; }

.section__rule {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.section__rule::after { content: ''; flex: 1; height: 1px; background: var(--color-border-strong); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 500 var(--fs-xs) / 1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.eyebrow::before { content: ''; width: 16px; height: 2px; background: var(--color-primary); }

.hero {
  position: relative;
  padding-block: var(--space-24) var(--space-20);
  overflow: clip;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: var(--space-16);
  align-items: center;
}
.hero__h1 { margin-top: var(--space-5); }
.hero__h1-accent {
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .hero__h1-accent { color: var(--color-primary); }
}
.hero__lede { margin-top: var(--space-6); max-width: 54ch; font: 400 17px / 1.62 var(--font-sans); color: var(--color-text-secondary); }
.hero__actions { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__proof {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.hero__proof-item { display: grid; gap: 2px; }
.hero__media {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  padding: var(--space-3);
}
.hero__media img { border-radius: var(--radius-md); width: 100%; height: auto; }
.hero__media-caption {
  margin-top: var(--space-3);
  padding: 0 var(--space-2) var(--space-2);
  font: 400 var(--fs-sm) / 1.5 var(--font-sans);
  color: var(--color-text-muted);
}

/* Signature motion 1 — the operating-point marker settling into its envelope. */
.hero__rail { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.hero__rail-track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); }
.hero__rail-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  border-radius: var(--radius-pill);
  background: var(--gradient-boundary);
  animation: rail-sweep 2.4s var(--ease-signature) 0.4s both;
}
.hero__rail-marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--color-text);
  animation: marker-settle 2.4s var(--ease-signature) 0.4s both;
}
@keyframes rail-sweep { from { width: 0; } to { width: 63%; } }
@keyframes marker-settle {
  from { left: 6%; opacity: 0; }
  40% { opacity: 1; }
  to { left: 63%; opacity: 1; }
}
.hero__rail-legend { display: flex; justify-content: space-between; font: 500 11px / 1.4 var(--font-mono); color: var(--color-text-secondary); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

.feature {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.feature__index {
  font: 500 var(--fs-xs) / 1 var(--font-mono);
  color: var(--color-primary);
  letter-spacing: 0.08em;
}
.feature__title { font: 600 var(--fs-h4) / 1.4 var(--font-sans); }
.feature__body { font: 400 var(--fs-sm) / 1.6 var(--font-sans); color: var(--color-text-secondary); }

.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-8); border-top: 1px solid var(--color-border); }
.step:first-child { border-top: 0; }
.step__num {
  font: 500 26px / 1 var(--font-mono);
  color: var(--color-primary);
  padding-top: 2px;
}
.step__body { display: grid; gap: var(--space-3); }
.step__title { font: 600 var(--fs-h3) / 1.35 var(--font-display); }
.step__text { font: 400 var(--fs-body) / 1.68 var(--font-sans); color: var(--color-text-secondary); max-width: 74ch; }
.step__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.quote {
  padding: var(--space-6);
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: grid;
  gap: var(--space-4);
}
.quote__text { font: 400 16px / 1.7 var(--font-sans); color: var(--color-text); }
.quote__by { font: 500 var(--fs-sm) / 1.5 var(--font-sans); color: var(--color-text-secondary); }

/* An inlined diagram: the markup is part of the document, so it needs to be told how to fill its column. */
.shot__unavailable {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-border);
}
.shot__unavailable-title { font: 500 var(--fs-sm) / 1.4 var(--font-sans); color: var(--color-text); }
/* ============================================================================
   Photographs  (landing page)
   ----------------------------------------------------------------------------
   The photographic set is four frames, one per claim the page makes about the
   field rather than about the software. Two rules govern this block and both are
   about the reader rather than about the picture:

     • The box is reserved before the image arrives. The frame carries the aspect
       ratio of the file and paints the 24 px blurred copy behind itself, so a
       photograph that loads late does not push the copy below it down the page.

     • The caption is part of the figure, not an overlay. Nothing decorative is
       written across an industrial photograph: the caption states what the frame
       is, and the meta line states the lift system it belongs to. Both are read
       before the image finishes decoding.
   ========================================================================== */
.photo { display: grid; gap: var(--space-3); }
.photo__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface-sunken);
  /* The blurred placeholder scales with the frame rather than tiling. */
  background-repeat: no-repeat;
}
.photo__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photograph fades in over its own blur; the transition is short enough not to be a wait. */
  animation: photo-in 420ms ease-out both;
}
@keyframes photo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.photo__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  font: 400 var(--fs-sm) / 1.55 var(--font-sans);
  color: var(--color-text-secondary);
  max-width: 92ch;
}
.photo__meta {
  font: 500 11px / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* The band: a photograph that spans the section's column and is the widest thing in it. */
.photo--band .photo__frame { aspect-ratio: 1376 / 768; }
.photo--band { margin-top: var(--space-2); }
/* A photograph inside a two-column grid keeps the grid's own spacing rather than adding to it. */
.section .photo--inline { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .photo__frame img { animation: none; }
}

.figure__svg { display: block; }
.figure__svg svg { display: block; width: 100%; height: auto; }
.figure__svg { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.figure__svg--plain { border: 0; border-radius: 0; background: none; }
.figure { display: grid; gap: var(--space-3); }
.figure img { border: 1px solid var(--color-border); border-radius: var(--radius-lg); width: 100%; height: auto; }
.figure figcaption { font: 400 var(--fs-sm) / 1.55 var(--font-sans); color: var(--color-text-muted); }
.figure--placeholder {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
  padding: var(--space-6);
  gap: var(--space-3);
}
.figure--placeholder .placeholder-prompt { font: 400 var(--fs-code) / 1.6 var(--font-mono); color: var(--color-text-secondary); }

.faq { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: 600 var(--fs-h4) / 1.45 var(--font-sans);
  color: var(--color-text);
}
.faq__q:hover { color: var(--color-primary); }
.faq__chev { color: var(--color-text-muted); transition: transform var(--dur-fast) ease; }
.faq__q[aria-expanded='true'] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-16) var(--space-5) 0; font: 400 var(--fs-body) / 1.68 var(--font-sans); color: var(--color-text-secondary); animation: faq-in var(--dur-base) var(--ease-standard); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Scroll-reveal (§7.3) — signature motion 4. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-signature); }
.reveal[data-shown='true'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero__rail-fill, .hero__rail-marker { animation: none; width: 63%; left: 63%; }
}

.cta-band {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: var(--space-8);
  align-items: center;
  box-shadow: var(--shadow-1);
}

/* ============================================================================
   Documentation page
   ========================================================================== */

.docs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12); }
.docs__toc { position: sticky; top: 92px; align-self: start; display: grid; gap: var(--space-2); }
.docs__toc a { font: 400 var(--fs-sm) / 1.5 var(--font-sans); color: var(--color-text-secondary); padding: 3px 0 3px var(--space-3); border-left: 2px solid transparent; }
.docs__toc a:hover { color: var(--color-primary); text-decoration: none; }
.docs__toc a[aria-current='true'] { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: 500; }
.docs__toc-group { margin-top: var(--space-4); font: 500 var(--fs-xs) / 1.4 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.docs__body { display: grid; gap: var(--space-4); min-width: 0; }
.docs__section { padding-bottom: var(--space-10); border-bottom: 1px solid var(--color-border); }
.docs__section:last-child { border-bottom: 0; }

.shot { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.shot__frame {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.shot__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
}
.shot__url { font: 400 11.5px / 1.4 var(--font-mono); color: var(--color-text-secondary); }
.shot__dots { display: flex; gap: 4px; }
.shot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
/*
 * The frame reserves the space the capture will claim.
 *
 * Captures are lazy, and a documentation page is mostly captures, so without a reserved box every image that
 * arrives above the fold pushes the rest of the page down — which does not merely look untidy: a deep link to a
 * section is scrolled before those images have loaded, and the reader lands hundreds of pixels short of the
 * section they asked for and concludes the link is broken. Every capture is taken at 1440×900 (see
 * scripts/capture-screenshots.mjs), and the embedded fallback copies keep the same ratio.
 */
.shot__frame img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; background: var(--color-surface-sunken); }

/*
 * A phone-width capture keeps its own portrait frame, at a width that reads as a phone.
 *
 * Reserving 16/10 for a 395×844 capture would stretch it; reserving nothing costs the reflow guarantee the
 * other frames exist for. So the ratio is the capture's own and the frame is capped — the reserved box is still
 * exact, and the page does not jump when the image arrives.
 */
.shot--narrow { max-width: 420px; }
.shot--narrow .shot__frame img { aspect-ratio: 395 / 844; }
.shot__caption { font: 400 var(--fs-sm) / 1.6 var(--font-sans); color: var(--color-text-secondary); }
.shot__caption strong { color: var(--color-text); font-weight: 600; }
.shot__annotations { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.shot__annotation { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); font: 400 var(--fs-sm) / 1.6 var(--font-sans); color: var(--color-text-secondary); }
.shot__annotation-num {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font: 500 11px / 1 var(--font-mono);
}

/* ============================================================================
   Application shell  (tier L1)
   ========================================================================== */

.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: var(--color-bg); }

.rail {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.rail__head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
.rail__nav { padding: var(--space-4) var(--space-3); display: grid; gap: 2px; align-content: start; }
.rail__group { margin: var(--space-4) var(--space-3) var(--space-2); font: 500 11px / 1.4 var(--font-sans); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); }
.rail__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  font: 500 var(--fs-ui) / 1.4 var(--font-sans);
  color: var(--color-text-secondary);
  border-left: 2px solid transparent;
}
.rail__link:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.rail__link[aria-current='page'] {
  background: var(--color-primary-soft);
  color: var(--color-primary-on-soft);
  border-left-color: var(--color-primary);
}
.rail__link-badge {
  margin-left: auto;
  font: 500 11px / 1 var(--font-mono);
  background: var(--color-signal-alarm-soft);
  color: var(--color-signal-alarm);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
}
.rail__foot { padding: var(--space-4); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-3); }

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: rgba(var(--color-bg-rgb), 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.topbar__account { display: grid; gap: 1px; min-width: 0; }

/*
 * Both of these are single-column grids, and both state their column as `minmax(0, 1fr)` rather than leaving it
 * implicit.
 *
 * An implicit `auto` column is sized to its widest item's max-content width, and nothing stops it from exceeding
 * the container: a track of 1 024 px inside a 390 px viewport was measured on the fleet overview, with the
 * review queue at 807 px and the wells list at 796 px. The shell column grew with it, and the whole document
 * acquired a horizontal scrollbar — on every screen whose content happened to be intrinsically wide, which is
 * most of them. `minmax(0, 1fr)` makes the column the width of the layout, and anything genuinely too wide for
 * it then has to scroll inside its own container, which is where `.table-wrap` and `.code-block` already put it.
 *
 * The page header is the item that exposes this most clearly, because `.page-head__lede`'s `max-width: 74ch`
 * gives the title block a 666 px max-content width at any type size: on a phone the header alone pushed the
 * document 650 px wide.
 */
.main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.main__content {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-content: start;
  max-width: var(--container-wide);
  width: 100%;
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.page-head__title { display: grid; gap: var(--space-2); }
.page-head__lede { font: 400 var(--fs-ui) / 1.6 var(--font-sans); color: var(--color-text-secondary); max-width: 74ch; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
/*
 * How many figures a strip holds, when it is not the default five.
 *
 * These exist as classes rather than as `style={{ gridTemplateColumns: ... }}` on the element, which is how the
 * allocation, plan and review screens used to express the same thing. An inline style beats every rule in this
 * file, including the media queries below — so a four-figure strip stayed four-across on a 390 px phone, in
 * 67 px columns, while the CSS that was written to collapse it could not apply. The count is a property of the
 * strip, and it belongs where the breakpoints are.
 */
.kpi-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.kpi__label { font: 500 var(--fs-xs) / 1.4 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); }
.kpi__value { display: flex; align-items: baseline; gap: var(--space-2); }
.kpi__delta { font: 500 var(--fs-xs) / 1.4 var(--font-mono); }
.kpi__delta--up { color: var(--color-signal-safe); }
.kpi__delta--down { color: var(--color-signal-alarm); }
.kpi__foot { font: 400 11.5px / 1.45 var(--font-sans); color: var(--color-text-muted); }

.feed { display: grid; gap: 0; max-height: 420px; overflow-y: auto; }
.feed__item { display: grid; grid-template-columns: 78px 1fr; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.feed__item:last-child { border-bottom: 0; }
.feed__time { font: 400 11.5px / 1.5 var(--font-mono); color: var(--color-text-muted); }
.feed__body { display: grid; gap: 4px; min-width: 0; }
.feed__title { font: 500 var(--fs-sm) / 1.5 var(--font-sans); }
.feed__text { font: 400 var(--fs-sm) / 1.55 var(--font-sans); color: var(--color-text-secondary); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-5); align-items: start; }
.rail-recommendation { position: sticky; top: 72px; display: grid; gap: var(--space-4); }

.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.tab {
  padding: 9px var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font: 500 var(--fs-ui) / 1.4 var(--font-sans);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tab:hover { color: var(--color-text); }
.tab[aria-selected='true'] { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.definition { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); padding: 9px 0; border-bottom: 1px solid var(--color-border); align-items: baseline; }
.definition:last-child { border-bottom: 0; }
.definition__key { font: 400 var(--fs-sm) / 1.5 var(--font-sans); color: var(--color-text-secondary); }
.definition__value { font: 500 var(--fs-sm) / 1.5 var(--font-mono); text-align: right; }

/*
 * The stacked form, for values that are sentences rather than figures.
 *
 * The pair layout above sizes its value column to the widest line of its content, which is correct for a
 * number and wrong for a paragraph: the paragraph claims the row, the key collapses, and the prose spills
 * back over the row above it. Here the key is a heading and the value is left-aligned reading text.
 */
.definitions--stacked .definition { grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: start; padding: var(--space-3) 0; }
.definitions--stacked .definition__key { font-weight: 500; color: var(--color-text); }
.definitions--stacked .definition__value { font: 400 var(--fs-sm) / 1.6 var(--font-sans); text-align: left; color: var(--color-text-secondary); }
.definitions--stacked .definition__value .mono { font-family: var(--font-mono); }

.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 68px; gap: var(--space-3); align-items: center; padding: 6px 0; }
.bar-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-sunken); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-primary); transition: width var(--dur-slow) var(--ease-signature); }
.bar-fill--safe { background: var(--color-signal-safe); }
.bar-fill--watch { background: var(--color-signal-watch); }
.bar-fill--alarm { background: var(--color-signal-alarm); }
.bar-fill--unknown { background: var(--color-signal-unknown); }
.bar-fill--ai { background: var(--color-ai); }

/*
 * The stale-build notice.
 *
 * It sits above the application rather than inside a screen: a tab running a build that is no longer
 * deployed is not a state of any screen, and every screen can be showing the previous version's answers.
 */
.update-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--color-signal-watch-soft);
  border-bottom: 1px solid rgba(var(--color-signal-watch-rgb), 0.3);
  font: 500 var(--fs-sm) / 1.45 var(--font-sans);
  color: var(--color-text);
}

.update-bar__action {
  font: 600 var(--fs-sm) / 1 var(--font-sans);
  color: var(--color-signal-watch);
  background: var(--color-surface);
  border: 1px solid rgba(var(--color-signal-watch-rgb), 0.4);
  border-radius: var(--radius-md);
  min-height: 30px;
  padding: 0 var(--space-4);
  cursor: pointer;
}

.update-bar__action:hover { border-color: var(--color-signal-watch); }

.callout {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  font: 400 var(--fs-sm) / 1.6 var(--font-sans);
}
.callout--safe { background: var(--color-signal-safe-soft); border-color: rgba(var(--color-signal-safe-rgb), 0.3); }
.callout--watch { background: var(--color-signal-watch-soft); border-color: rgba(var(--color-signal-watch-rgb), 0.3); }
.callout--alarm { background: var(--color-signal-alarm-soft); border-color: rgba(var(--color-signal-alarm-rgb), 0.3); }
.callout--unknown { background: var(--color-signal-unknown-soft); }
.callout__title { font: 600 var(--fs-sm) / 1.45 var(--font-sans); }

/* The one meaningful animation (§7.4): the interlock clamping a candidate setpoint. */
.soe-clamp { position: relative; height: 30px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); overflow: hidden; }
.soe-clamp__requested { position: absolute; inset-block: 0; left: 0; background: rgba(var(--color-primary-rgb), 0.22); }
.soe-clamp__final { position: absolute; inset-block: 0; left: 0; background: var(--color-primary); }
.soe-clamp__limit { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-signal-alarm); }
.soe-clamp__limit::after {
  content: attr(data-label);
  position: absolute;
  top: -18px;
  transform: translateX(-50%);
  font: 500 10px / 1 var(--font-mono);
  color: var(--color-signal-alarm);
  white-space: nowrap;
}
.soe-clamp--animated .soe-clamp__final { animation: clamp-in 1.1s var(--ease-signature) both; }
@keyframes clamp-in { from { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .soe-clamp--animated .soe-clamp__final { animation: none; }
}

.sig-pad {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--color-border) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--color-border) 23px 24px),
    var(--color-surface);
  height: 132px;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font: 400 var(--fs-sm) / 1.5 var(--font-sans);
  text-align: center;
  padding: var(--space-4);
}

.divider { height: 1px; background: var(--color-border); }
.stack-bar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-sunken); }
.stack-bar__seg { height: 100%; }

/* Login screen */
.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--color-bg);
}
.auth-card { width: min(460px, 100%); display: grid; gap: var(--space-6); }
.auth-card__body { display: grid; gap: var(--space-5); padding: var(--space-8); }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font: 500 var(--fs-xs) / 1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* ============================================================================
   Responsive (§9)
   ========================================================================== */

@media (max-width: 1200px) {
  .col-8, .col-7, .col-5, .col-4 { grid-column: span 12; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .rail-recommendation { position: static; }
}

@media (max-width: 1024px) {
  :root { --fs-display-1: 46px; --fs-display-2: 34px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-strip--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs__toc { position: static; display: none; }
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  :root { --fs-display-1: 40px; --fs-display-2: 32px; }
  .section { padding-block: var(--space-16); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  /*
   * The rail becomes a strip at the top, not a column that pushes the screen off the fold.
   *
   * Below this width the shell is one column, and leaving the rail as a vertical list put its entire contents
   * — brand, two navigation groups, plan, sign-in and sign-out — in front of the screen the reader had just
   * asked for: measured at 395 px, the gas allocation screen began about 600 px below the fold, so opening it
   * showed navigation and nothing else. As a strip, the brand stays on its own line, the destinations become a
   * horizontally scrollable row of labels, and the plan and sign-out stay reachable underneath.
   */
  .rail { position: static; height: auto; grid-template-rows: auto auto auto; border-right: 0; border-bottom: 1px solid var(--color-border); overflow: visible; }
  .rail__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
  .rail__nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-3) var(--space-3);
    overflow-x: auto;
    /* The group headings are structural on a wide screen and noise in a strip: the order already groups. */
    scrollbar-width: none;
  }
  .rail__nav > .stack-2 { display: contents; }
  .rail__group { display: none; }
  .rail__link {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 8px var(--space-3) 6px;
  }
  .rail__link[aria-current='page'] { border-bottom-color: var(--color-primary); background: var(--color-primary-soft); }
  .rail__link-badge { margin-left: var(--space-2); }
  .rail__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
  /*
   * The footer's first block is a `.stack-2` grid (label over value), and it is re-laid here as a single line —
   * a grid is its own formatting context, so `flex-direction` on it would do nothing. The second block (who is
   * signed in) is dropped: on a phone the identity is already in the strip above, and the two facts that matter
   * at this size are what the plan is and how to leave.
   */
  .rail__foot > .stack-2 { display: flex; align-items: baseline; gap: var(--space-2); }
  .rail__foot > .stack-2 > .label { display: none; }
  .rail__foot > .divider { display: none; }
  .rail__foot > .stack-1 { display: none; }
  .rail__foot > .btn { width: auto; }
  .main__content { padding: var(--space-4); }
  .grid-2, .grid-3, .grid-4, .kpi-strip, .kpi-strip--4, .kpi-strip--3 { grid-template-columns: minmax(0, 1fr); }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 12; }
  .site-nav { display: none; }
  .container { padding-inline: var(--space-4); }
  .feed__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .toast-region { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); max-width: none; }
  .definition { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .definition__value { text-align: left; }
}

@media print {
  .site-header, .rail, .topbar, .toast-region, .btn { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
}