/* ═════════════════════════════════════════════
   NPIA Components — UI building blocks.

   Conventions:
   - BEM-ish naming (.block__element--modifier)
   - All values use design tokens from tokens.css
   - Subtle motion via --transition-* tokens
   - Accessible focus states everywhere
   ═════════════════════════════════════════════ */

/* ── Card ─────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); }
.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}
.card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.card + .card { margin-top: var(--space-4); }

/* ── Button ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.btn:hover {
  background: var(--color-surface-alt);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-blue);
  color: #fff;
  border-color: var(--color-blue);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}
.btn--ghost:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--icon { padding: var(--space-2); }

/* ── Form ─────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.field__hint  {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.field__error { font-size: var(--text-xs); color: var(--color-danger); }
.field__row { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  .field__row { grid-template-columns: 1fr; }
}

/* Premium form card — full-width contained surface */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  width: 100%;
}

@media (max-width: 720px) {
  .form-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }
}

@media (max-width: 860px) {
  .field__row {
    grid-template-columns: 1fr;
  }
}

/* Input size variants */
.input--compact { max-width: 160px; }
.input--medium  { max-width: 240px; }
.input--full    { width: 100%; }

/* Hide native number-input spinner arrows (Chrome/Safari + Firefox) */
.input--no-spinner::-webkit-inner-spin-button,
.input--no-spinner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input--no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Input group — wrap an .input with a prefix icon or suffix unit */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group__prefix {
  position: absolute;
  left: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
}

.input-group__prefix svg {
  width: 16px;
  height: 16px;
}

.input-group__suffix {
  position: absolute;
  right: var(--space-3);
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.input-group .input { width: 100%; }
.input-group--prefix .input { padding-left: calc(var(--space-3) + 20px + var(--space-2)); }
.input-group--suffix .input { padding-right: calc(var(--space-3) + 32px); }

/* Static read-only display field — premium gradient surface for
   auto-generated values that should feel "claimed" but not editable. */
.field__static {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(
    135deg,
    var(--color-blue-soft) 0%,
    var(--color-surface-soft) 100%
  );
  border: 1.5px solid var(--color-blue);
  border-radius: var(--radius-md);
  font-family: var(--font-technical);
  font-size: var(--text-sm);
  color: var(--color-blue);
  font-weight: 600;
  min-height: 42px;
}

.field__static-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: var(--color-blue-soft);
  color: var(--color-blue);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Smart 2/3-col form row — collapses to 1col on narrow */
.form-row {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form-row--2    { grid-template-columns: 1fr 1fr; }
.form-row--3    { grid-template-columns: 1fr 1fr 1fr; }
.form-row--4    { grid-template-columns: 180px 1fr 1fr 140px; }
.form-row--auto { grid-template-columns: auto 1fr; }

/* Fields inside a form-row don't add their own bottom margin —
   the row already controls vertical rhythm via its margin-bottom. */
.form-row .field {
  margin-bottom: 0;
}

/* Last field in a section drops its trailing margin so the
   section padding/action divider isn't doubled. */
.form-section .field:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .form-row--2,
  .form-row--3,
  .form-row--4,
  .form-row--auto {
    grid-template-columns: 1fr;
  }
}

.input, .select, .textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.input:hover:not(:focus),
.select:hover:not(:focus),
.textarea:hover:not(:focus) {
  border-color: var(--color-border-strong);
}
.textarea { min-height: 6rem; resize: vertical; }

/* ── Badge ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: var(--border-width) solid transparent;
}
.badge::before {
  content: "";
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* Inquiry / gate statuses */
.badge--draft           { background: var(--color-surface-alt); color: var(--color-text-muted); }
.badge--under-review,
.badge--in-progress     { background: var(--color-info-soft); color: var(--color-info); }
.badge--approved        { background: var(--color-success-soft); color: var(--color-success); }
.badge--blocked         { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--rejected        { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--archived,
.badge--not-applicable  { background: var(--color-surface-alt); color: var(--color-text-subtle); }
.badge--not-started     { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* Severity */
.badge--severity-blocking { background: var(--color-danger-soft); color: var(--color-severity-blocking); }
.badge--severity-high     { background: #fed7aa; color: var(--color-severity-high); }
.badge--severity-medium   { background: var(--color-warning-soft); color: var(--color-severity-medium); }
.badge--severity-low      { background: #d9f99d; color: var(--color-severity-low); }

/* ── Empty state ──────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.empty__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.empty__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 32rem;
  margin-bottom: var(--space-4);
}

/* ── Stat block — icon+label header above value ───────────── */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
}
.stat__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.stat__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.stat__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat__sub {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

@media (max-width: 1100px) {
  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat {
  min-width: 0;
  overflow: hidden;
}

/* ── Section heading inside main ──────────────── */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.section-title h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  min-width: 0;
}
.section-title__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ── Alerts — used by auth + form-error surfaces ─── */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
}
.alert--error   { border-color: var(--color-danger);  color: var(--color-danger); }
.alert--success { border-color: var(--color-success); color: var(--color-success); }

/* ── Page header — reusable pattern across main pages ─────── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}
.page-header__main { min-width: 0; flex: 1; }
.page-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
}
.page-header__subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: var(--space-1) 0 0 0;
}
.page-header__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Stat strip + stat cards ──────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
  min-height: 116px;
}

.stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--color-blue-soft);
  color: var(--color-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.stat-card__label {
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}

.stat-card__value {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 2px;
}

.stat-card__value--text {
  font-size: 22px;
}

.stat-card__suffix {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.stat-card__sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Surface + data table ─────────────────────────────────── */
.surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.surface--table { padding: 0; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table thead {
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  padding: 14px 18px;
  text-align: left;
  font-family: var(--font-technical);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.data-table td {
  padding: 16px 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.data-table tbody tr {
  cursor: pointer;
}

.data-table tbody tr:hover {
  background: var(--color-surface-soft);
}

.data-table tbody tr:first-child td {
  border-top: none;
}

.data-table__ref {
  font-family: var(--font-technical);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.data-table__num {
  font-variant-numeric: tabular-nums;
}

.data-table__col-center {
  text-align: center;
}

.data-table__col-num {
  width: 40px;
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.data-table__col-action {
  text-align: right;
  width: 90px;
}

.data-table__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}

.data-table__indicator--yes {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.data-table__indicator--no {
  color: var(--color-text-soft);
}

/* ── A11y utility ─────────────────────────────────────────── */
.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;
}

/* ── Detail page — section wrapper + back link + mono title ── */

.detail-section {
  margin-bottom: var(--space-6);
}

.page-back {
  display: inline-flex;
  margin-bottom: var(--space-3);
}

.page-header__title--mono {
  font-family: var(--font-technical);
  letter-spacing: 0.02em;
}

.page-header__title--id {
  font-family: var(--font-technical);
  font-size: var(--text-xl);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header__subtitle--ref {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ── Candidate grid — responsive auto-fill of tank cards ───── */

.candidate-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: var(--space-4);
}

/* ── Lifecycle A2 — structural only, NO state colors ──────── */

.lifecycle {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-2);
  overflow-x: auto;
}

.lifecycle__track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: max-content;
  padding: var(--space-4) var(--space-2);
}

.lifecycle__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 96px;
  flex-shrink: 0;
}

.lifecycle__node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  flex-shrink: 0;
  box-shadow: var(--shadow-card);
}

.lifecycle__gate-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
  margin-top: var(--space-1);
}

.lifecycle__gate-code {
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.lifecycle__connector {
  flex: 1;
  height: 2px;
  margin-top: 23px;
  min-width: 20px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* ── Lifecycle gate colors (G0–G8) ──────────────────────────── */

.lifecycle__gate--g0 .lifecycle__node {
  background: var(--color-surface);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.lifecycle__gate--g1 .lifecycle__node {
  background: var(--color-surface);
  border-color: #7C3AED;          /* purple — document/data */
  color: #7C3AED;
}

.lifecycle__gate--g2 .lifecycle__node {
  background: var(--color-surface);
  border-color: #0891B2;          /* cyan — tank/registry */
  color: #0891B2;
}

.lifecycle__gate--g3 .lifecycle__node {
  background: var(--color-surface);
  border-color: #D97706;          /* amber — Safety */
  color: #D97706;
}

.lifecycle__gate--g4 .lifecycle__node {
  background: var(--color-surface);
  border-color: #D97706;          /* amber — Environmental (paired with Safety) */
  color: #D97706;
}

.lifecycle__gate--g5 .lifecycle__node {
  background: var(--color-surface);
  border-color: #0891B2;          /* cyan — Operations */
  color: #0891B2;
}

.lifecycle__gate--g6 .lifecycle__node {
  background: var(--color-surface);
  border-color: #059669;          /* green — Engineering */
  color: #059669;
}

.lifecycle__gate--g7 .lifecycle__node {
  background: var(--color-surface);
  border-color: #7C3AED;          /* purple — Disposal */
  color: #7C3AED;
}

.lifecycle__gate--g8 .lifecycle__node {
  background: var(--color-surface);
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* ── Audit log — neutral classes, replaces forbidden .timeline */

.audit-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.audit-log__item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.audit-log__time {
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.audit-log__actor {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.audit-log__content {
  color: var(--color-text);
}

/* ─── F0A.4b: shared utilities + extraction card ─────────── */

/* Mono utility — for inline technical values inside flowing text */

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

/* Spinner — reusable inline progress indicator */

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: -2px;
}

.spinner--animate {
  animation: spin 0.8s linear infinite;
}

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

/* Form actions — bottom row of submit-cluster on a form */

.form-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

/* Fieldset variants — replace inline borders/padding on legacy <fieldset> */

.fieldset--reset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
}

.fieldset--bordered {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0 0 var(--space-4) 0;
}

.fieldset__legend {
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

/* Checkbox list — vertical stack of label rows */

.checkbox-list {
  display: grid;
  gap: var(--space-2);
}

.checkbox-list__item {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

/* Data-table actions cell — cluster of buttons / icons */

.data-table__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Btn hint — small muted text shown next to a submit button */

.btn-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

/* Upload skeleton — full-screen overlay shown during file upload.
   Driven by window.NPIA.startUploadSkeleton(filename). Reuses the
   existing @keyframes spin defined above for .spinner--animate. */

.upload-skeleton {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-skeleton__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-10);
  text-align: center;
  min-width: 320px;
  box-shadow: 0 24px 64px rgba(10, 20, 40, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.upload-skeleton__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.upload-skeleton__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 80px;
  justify-content: center;
}

.upload-skeleton__msg {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin: 0;
}

.upload-skeleton__msg.active {
  opacity: 1;
  transform: translateY(0);
  color: var(--color-text);
  font-weight: 600;
}

.upload-skeleton__msg.done {
  opacity: 0.5;
  transform: translateY(0);
  text-decoration: line-through;
  font-size: var(--text-xs);
}

.upload-skeleton__filename {
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Neutral badge — for counts / chips without status semantics */

.badge--neutral {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Extraction card — F0A.4a result surface */

.extraction-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.extraction-card--success {
  border-color: var(--color-blue);
}

.extraction-card--failed {
  border-color: var(--color-border-strong);
  background: var(--color-surface-soft);
}

.extraction-card__meta {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.extraction-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.extraction-card__meta-label {
  font-family: var(--font-technical);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
}

.extraction-card__meta-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.extraction-card__confidence {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.confidence-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  max-width: 200px;
}

.confidence-bar__fill {
  height: 100%;
  background: var(--color-blue);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.confidence-label {
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Extraction-card description — for failed/blocked rows */

.extraction-card__description {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* ─── F0A.4b polish: stat icons, section icons, featured ── */

/* Stat-card icon — sits inline next to the label */

.stat__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.stat__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

/* Color per stat type */
.stat--product .stat__icon { color: var(--color-blue); }
.stat--volume  .stat__icon { color: #0891B2; }    /* cyan  — tank/quantity */
.stat--date    .stat__icon { color: #7C3AED; }    /* purple — schedule */
.stat--count   .stat__icon { color: #059669; }    /* green — count */

/* icon_tanks() macro hardcodes width/height=20 — bump it up for stat use */
.stat--count .stat__icon svg {
  width: 28px;
  height: 28px;
}

/* Section-title icon — inline prefix on h2/h3 headings */

.section-icon {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-2);
  color: var(--color-blue);
  opacity: 0.8;
  vertical-align: middle;
}

.section-icon svg {
  width: 18px;
  height: 18px;
}

/* Featured detail-section — surface-elevated container */

.detail-section--featured {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

/* When .section-title sits as the first child of a featured panel,
   the global `margin-top: var(--space-6)` (32px) doubles with the
   panel's own `padding: var(--space-4)` (16px) and pushes the
   heading 48px from the panel's top edge — breaks the "one
   cohesive section" feel. Same idea for the gap between title
   and the lifecycle frame: the global `margin-bottom: var(--space-3)`
   (12px) reads loose inside a framed panel where every other gap is
   tighter. We collapse the top margin and tighten the bottom margin
   so the title and the frame below feel like a single Control Tower
   block (~8px gap, intentional). */
.detail-section--featured > .section-title:first-child {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* The lifecycle frame already has its own padding for the track;
   when it follows the section-title inside a featured panel we
   want it to butt up against the title with only the title's
   tightened margin-bottom between them. Explicit zero kills any
   margin-top a future variant might inherit. */
.detail-section--featured > .section-title + .lifecycle {
  margin-top: 0;
}

/* ── Candidates layout — fluid SDS-summary | tank-cards ────── */

.candidates-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
  align-items: start;
  width: 100%;
  min-width: 0;
}

/* Source order is tanks-then-SDS; pin each side so SDS renders on
   the left at the same top as tanks without moving the markup. */
.candidates-layout__sds   { grid-column: 1; grid-row: 1; }
.candidates-layout__tanks { grid-column: 2; grid-row: 1; }

@media (max-width: 1100px) {
  .candidates-layout {
    grid-template-columns: 1fr;
  }
  .candidates-layout__sds   { grid-column: 1; grid-row: 1; }
  .candidates-layout__tanks { grid-column: 1; grid-row: 2; }
  .sds-summary {
    position: static;
  }
}

.candidates-layout__tanks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Candidate card — fluid 3-col, sized for content ─────── */

.candidate-card {
  position: relative;
  display: grid;
  /* Two-row grid:
     row 1 — identity | tank | metadata
     row 2 — review dock spans full width
     Columns use minmax() so identity + metadata never collapse
     while the tank flexes between them. The dock is placed via
     `grid-area: dock` (see .review-dock rule below) so reordering
     the markup never breaks the layout. */
  grid-template-columns: minmax(180px, 0.85fr)
                         minmax(280px, 1.2fr)
                         minmax(220px, 1fr);
  grid-template-areas:
    "identity tank meta"
    "dock     dock dock";
  column-gap: var(--space-6);
  row-gap: var(--space-4);
  align-items: center;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Top-right hint shown only on hover, signalling the card opens a modal. */
.candidate-card__expand-hint {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  color: var(--color-text-subtle);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}

.candidate-card:hover .candidate-card__expand-hint {
  opacity: 1;
}

.candidate-card:hover {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.06);
}

/* Lead column — id, capacity, eyebrow */
.candidate-card__lead {
  grid-area: identity;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.candidate-card__id {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.04em;
}

.candidate-card__capacity {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.candidate-card__capacity-unit {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.candidate-card__eyebrow {
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin-top: var(--space-1);
}

/* Visual column — tank SVG. Capped via max-* on the SVG itself so
   the tank never grows to fill the row's vertical canvas at medium
   widths (the previous layout's failure mode). */
.candidate-card__visual {
  grid-area: tank;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.candidate-card__visual > svg,
.candidate-card__visual img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  display: block;
}

/* ── Review dock — per-area checklist entry points
   Lives below the tank visual on each candidate card. Compact
   horizontal button dock — wraps to a second row on narrow cards,
   never collapses into a vertical stacked menu. Active items link
   to the per-area review page (Safety, Operations); upcoming items
   render as muted, non-clickable chips so the dock never produces
   a broken link.

   Icon family mirrors the Review Lifecycle component
   (icon_hse / icon_operations / icon_environmental /
   icon_engineering / icon_admin). CRITICALLY, each area icon also
   preserves the lifecycle's per-gate semantic color identity so the
   dock and the lifecycle component read as one navigation system —
   see `.review-dock__item[data-area=...] .review-dock__icon` rules
   below for the exact mapping. */
.review-dock {
  /* Sibling of identity / tank / meta — placed on its own grid row
     so it always spans the full card width. */
  grid-area: dock;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.review-dock__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.review-dock__item--active {
  cursor: pointer;
}

.review-dock__item--active:hover {
  border-color: var(--color-blue);
  background: rgba(37, 99, 235, 0.04);
}

/* Upcoming chips dim via opacity only — the area icon keeps its
   semantic lifecycle color so the area-to-color mapping holds even
   for not-yet-shipped phases. Do not override the icon color here. */
.review-dock__item--upcoming {
  opacity: 0.55;
  cursor: default;
  background: var(--color-surface-soft);
}

.review-dock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* `currentColor` lets the per-area `.review-dock__item[data-area=…]`
     rules below drive the icon stroke color through the wrapper span
     without touching the inline SVG (the icon macros use
     stroke="currentColor"). Default fallback (only fires for an area
     without an explicit mapping) keeps the dock readable. */
  color: var(--color-text-muted);
}

.review-dock__icon svg {
  width: 14px;
  height: 14px;
}

/* ── Per-area icon colors — must match the Review Lifecycle component.
   Source values come from `.lifecycle__gate--g{3..7} .lifecycle__node`
   (this file). Reusing the same hex codes — not approximations — keeps
   the area-to-color mapping identical across both surfaces. */
.review-dock__item[data-area="safety"] .review-dock__icon {
  color: #D97706; /* lifecycle G3 — amber */
}
.review-dock__item[data-area="environmental"] .review-dock__icon {
  color: #D97706; /* lifecycle G4 — amber (paired with Safety) */
}
.review-dock__item[data-area="operations"] .review-dock__icon {
  color: #0891B2; /* lifecycle G5 — cyan */
}
.review-dock__item[data-area="engineering"] .review-dock__icon {
  color: #059669; /* lifecycle G6 — green */
}
.review-dock__item[data-area="disposal"] .review-dock__icon {
  color: #7C3AED; /* lifecycle G7 — purple */
}

.review-dock__label {
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Upcoming-only status pill — small uppercase technical badge. The
   active dock tiles never render a status pill: an enabled tile is
   communicated by being clickable, by hover/border feedback, and by
   the area icon's semantic color. We deliberately do not show
   GENERATED / PENDING / etc. because the tile's enabled state
   already conveys that the checklist is reachable. */
.review-dock__status {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: var(--weight-semibold);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: var(--color-surface-soft);
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
}

.review-dock__status--upcoming {
  color: var(--color-text-subtle);
}

/* ── Candidate-card responsive breakpoints ─────────────────────
   The grid-template-areas approach lets us keep identity / tank /
   meta on row 1 with the dock on row 2 across every desktop and
   laptop width — including 11–12" (~1180px). On narrow screens
   we collapse to a single column stack so nothing clips. */

@media (max-width: 1180px) {
  .candidate-card {
    /* Tighter columns for 11–12" laptops; identity and meta stay
       visible side-by-side with the tank. Tank also tightens via
       the visual max-height rule above. */
    grid-template-columns: minmax(160px, 0.85fr)
                           minmax(220px, 1fr)
                           minmax(220px, 1fr);
    column-gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
  }

  .candidate-card__visual > svg,
  .candidate-card__visual img {
    max-height: 180px;
  }
}

@media (max-width: 780px) {
  .candidate-card {
    /* Single column stack: identity → tank → metadata → dock.
       Dock stays horizontal (flex-wrap) per directive. */
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "tank"
      "meta"
      "dock";
    row-gap: var(--space-3);
  }

  .candidate-card__visual > svg,
  .candidate-card__visual img {
    max-height: 160px;
  }

  .review-dock {
    justify-content: center;
  }
}

/* Right column — list of spec rows */
.candidate-card__right {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.candidate-card__spec {
  display: grid;
  /* icon | label (auto-hugs content) | value (flex, can shrink to 0)
     The `minmax(0, 1fr)` track is what prevents long values from
     pushing the row past the card's right edge — without the 0 min
     a `1fr` track still respects min-content width and overflows. */
  grid-template-columns: 16px auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  font-size: var(--text-xs);
  min-width: 0;
}

.candidate-card__spec-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  opacity: 0.75;
  flex-shrink: 0;
}

.candidate-card__spec-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.candidate-card__spec-value {
  color: var(--color-text);
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.candidate-card__spec--wrap .candidate-card__spec-value {
  white-space: normal;
  word-break: break-word;
}

/* Medium — visual top-left, lead top-right, specs as chip grid below */
@media (max-width: 900px) {
  .candidate-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .candidate-card__visual {
    grid-column: 1;
    grid-row: 1;
  }
  .candidate-card__lead {
    grid-column: 2;
    grid-row: 1;
  }
  .candidate-card__right {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-2);
  }
  .candidate-card__spec {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-1) var(--space-2);
  }
}

/* Mobile — single column, centered */
@media (max-width: 600px) {
  .candidate-card {
    grid-template-columns: 1fr;
  }
  .candidate-card__visual {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
  }
  .candidate-card__lead {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
    align-items: center;
  }
  .candidate-card__right {
    grid-column: 1;
    grid-row: 3;
  }
}

/* ── SDS property summary panel ──────────────────────────────── */

.sds-summary {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  position: sticky;
  top: var(--space-4);
}

/* Below 1200px the candidates-layout collapses to single column,
   so sticky-positioning the SDS panel would pin it above the
   tank cards instead of side-by-side. Switch off sticky there. */
@media (max-width: 1200px) {
  .sds-summary {
    position: static;
  }
}

.sds-summary--empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

.sds-summary__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.sds-summary__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sds-summary__sub {
  font-size: 10px;
  color: var(--color-text-subtle);
}

.sds-summary__empty-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── SDS property list ───────────────────────────────────────── */

.sds-prop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sds-prop {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: 6px;
  transition: background 0.1s;
}

.sds-prop:hover {
  background: var(--color-surface);
}

.sds-prop__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  flex-shrink: 0;
}

.sds-prop__icon--warning {
  color: #D97706;
}

.sds-prop__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sds-prop__value {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}

/* List variant — for arrays (incompatibilities, H-codes).
   Label sits next to the icon on row 1; value wraps below
   on row 2 spanning the icon+label columns. */

.sds-prop--list {
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  align-items: start;
}

.sds-prop--list .sds-prop__icon {
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  margin-top: 2px;
}

.sds-prop--list .sds-prop__label {
  grid-row: 1;
  grid-column: 2;
}

.sds-prop--list .sds-prop__value {
  grid-row: 2;
  grid-column: 2;
  text-align: left;
  white-space: normal;
  font-weight: 500;
  line-height: 1.4;
  padding-top: 2px;
}

/* ── Drop zone — drag-and-drop file picker ──────────────────── */

.drop-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  background: var(--color-surface-soft);
}

.drop-zone:hover,
.drop-zone--active {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
}

.drop-zone__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.drop-zone__icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
}

.drop-zone--active .drop-zone__icon {
  color: var(--color-blue);
}

/* Persistent "file selected" state — stays applied after the user drops
   or picks a file, until they clear the selection. */
.drop-zone--ready {
  border-color: var(--color-blue);
  background: var(--color-blue-soft);
}

.drop-zone--ready .drop-zone__icon {
  color: var(--color-blue);
}

.drop-zone__text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.drop-zone__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

.drop-zone__browse {
  color: var(--color-blue);
  text-decoration: underline;
  cursor: pointer;
}

.drop-zone__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0;
}

.drop-zone__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: center;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.drop-zone__filename {
  font-weight: 600;
  font-family: var(--font-technical);
  font-size: var(--text-xs);
}

.drop-zone__clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: 0 var(--space-1);
  line-height: 1;
}

.drop-zone__clear:hover {
  color: var(--color-text);
}

/* ── Form section — grouped fields with icon header ────────── */

.form-section {
  padding-left: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-left: 3px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  transition: border-left-color 0.15s;
}

/* Last form-row in a section already has section padding-bottom
   underneath it — drop its own bottom margin to avoid doubling. */
.form-section > .form-row:last-child {
  margin-bottom: 0;
}

.form-section:focus-within {
  border-left-color: var(--color-blue);
}

.form-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-4);
}

.form-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Badge-style section icon — soft-blue rounded square, 32x32.
   Distinct color modifiers per section give the form visual rhythm. */
.form-section__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-blue-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  flex-shrink: 0;
}

.form-section__icon svg {
  width: 16px;
  height: 16px;
}

.form-section__icon--reference {
  background: rgba(37, 99, 235, 0.10);
  color: var(--color-blue);
}

.form-section__icon--product {
  background: rgba(124, 58, 237, 0.10);
  color: #7C3AED;
}

.form-section__icon--volume {
  background: rgba(8, 145, 178, 0.10);
  color: #0891B2;
}

.form-section__icon--notes {
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
}

.form-section__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.form-section__subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  margin-top: 1px;
}

/* ── Field markers — required (*) and (optional) ───────────── */

.field__required {
  color: #DC2626;
  margin-left: 2px;
}

.field__optional {
  color: var(--color-text-subtle);
  font-weight: 400;
  font-size: var(--text-xs);
  margin-left: var(--space-1);
}

/* ── Registry preflight banner (Tank Status state on intake) ─ */

.registry-preflight {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.registry-preflight--empty {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
}

.registry-preflight--loaded {
  background: var(--color-blue-soft);
  border-color: var(--color-blue);
}

.registry-preflight__icon {
  display: flex;
  align-items: center;
  color: var(--color-blue);
  flex-shrink: 0;
}

.registry-preflight__icon--empty {
  color: var(--color-text-subtle);
}

.registry-preflight__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.registry-preflight__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.registry-preflight__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.registry-preflight__action {
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .registry-preflight {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .registry-preflight__action {
    width: 100%;
  }
  .registry-preflight__action .btn {
    width: 100%;
    text-align: center;
  }
}

/* ── Tank detail modal ───────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 40, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay--visible {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(10, 20, 40, 0.18);
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  transition: transform 0.2s ease;
}

.modal-overlay--visible .modal {
  transform: translateY(0);
}

/* ── Modal header bar (sticky, top) ───────────────────────── */
.modal__header-bar {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.modal__header-close {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-right: 1px solid var(--color-border);
  cursor: pointer;
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.modal__header-close:hover {
  background: var(--color-surface-soft);
  color: var(--color-text);
}

.modal__header-id {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-technical);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
}

.modal__header-meta {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

.modal__header-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--color-border);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
}

.modal__header-field:last-child {
  border-right: none;
}

.modal__header-field-label {
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  flex-shrink: 0;
}

.modal__header-field-value {
  color: var(--color-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrollable content region between header bar and bottom strip */
.modal__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* 3-panel layout: chemistry/safety | tank visual | infrastructure */
.modal__three-col {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  flex: 1;
  min-height: 400px;
}

@media (max-width: 800px) {
  .modal__three-col {
    grid-template-columns: 1fr;
  }
}

.modal__panel {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
}

.modal__panel--left {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

.modal__panel--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-surface-soft) 100%
  );
  padding: var(--space-6);
}

.modal__panel--right {
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-soft);
}

@media (max-width: 800px) {
  .modal__panel--left,
  .modal__panel--right {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--color-border);
  }
}

.modal__panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Per-section accent colors so each panel reads with a distinct domain
   (chemistry / NFPA / infrastructure / atmosphere / pumping). */
.modal__panel-title--chemistry { color: #D97706; }  /* amber  — hazard      */
.modal__panel-title--nfpa      { color: #DC2626; }  /* red    — danger      */
.modal__panel-title--infra     { color: #0891B2; }  /* cyan   — technical   */
.modal__subsection-title--atmo    { color: #7C3AED; }  /* purple — atmosphere */
.modal__subsection-title--pumping { color: #059669; }  /* green  — mechanical */

/* Tank-id caption inside the center panel — same look as panel title
   but no bottom border. */
.modal__center-caption {
  margin-top: var(--space-2);
  font-family: var(--font-technical);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-align: center;
}

.modal__tank-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Subsections used inside left/right panels (e.g., Atmosphere control,
   Pumping, NFPA placard). */
.modal__subsection {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.modal__subsection-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
}

/* NFPA placard block (left panel) */
.modal__nfpa {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.modal__nfpa-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.modal__nfpa-title--accent {
  color: #DC2626;
}

.modal__nfpa-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 0;
  font-size: var(--text-xs);
}

.modal__nfpa-label {
  color: var(--color-text);
  font-weight: 600;
}

.nfpa-badge {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xs);
  color: white;
  flex-shrink: 0;
}

/* Diamond-shaped NFPA badge — rotated 45deg with counter-rotated content
   so the number reads upright. Used in the modal's NFPA placard block. */
.nfpa-diamond {
  width: 32px;
  height: 32px;
  transform: rotate(45deg);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nfpa-diamond span {
  transform: rotate(-45deg);
  font-weight: 800;
  font-size: var(--text-sm);
  color: white;
  line-height: 1;
}

.nfpa-diamond--health  { background: #2563EB; }
.nfpa-diamond--fire    { background: #DC2626; }
.nfpa-diamond--react   { background: #D97706; }
.nfpa-diamond--special {
  background: #FFFFFF;
  border: 2px solid #333;
}
.nfpa-diamond--special span { color: #333; }

/* Section-title icons inherit currentColor so each section's accent
   color colors its glyph naturally. */
.modal__panel-title svg,
.modal__subsection-title svg,
.modal__nfpa-title svg,
.modal__logistics-title svg {
  flex-shrink: 0;
}

.nfpa-badge--health { background: #2563EB; }
.nfpa-badge--fire   { background: #DC2626; }
.nfpa-badge--react  { background: #D97706; color: #fff; }

/* Property rows used in left + right panels */
.modal__prop-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
  font-size: var(--text-xs);
}

.modal__prop-row:last-child {
  border-bottom: none;
}

.modal__prop-label {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.modal__prop-value {
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

/* ── Bottom strip — Logistics & Flows (routes + permitted rates) ── */
.modal__bottom {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  flex-shrink: 0;
}

.modal__bottom-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: var(--space-4) var(--space-5);
}

@media (max-width: 800px) {
  .modal__bottom-inner {
    grid-template-columns: 1fr;
  }
}

.modal__logistics-section {
  padding: 0 var(--space-4) 0 0;
}

.modal__logistics-section + .modal__logistics-section {
  padding: 0 0 0 var(--space-4);
  border-left: 1px solid var(--color-border);
}

@media (max-width: 800px) {
  .modal__logistics-section + .modal__logistics-section {
    padding: var(--space-3) 0 0 0;
    margin-top: var(--space-3);
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

.modal__logistics-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  margin-bottom: var(--space-3);
}

.modal__logistics-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
}

.modal__logistics-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.modal__logistics-label {
  color: var(--color-text-muted);
  min-width: 80px;
}

.modal__logistics-value {
  font-weight: 600;
  color: var(--color-text);
}

/* ── Tank Registry Browser (F0B.4b) ────────────────────────────────
   Premium table-first browser: each tank gets a rich row with mini-SVG
   preview, status / product, capacity (no fake fill — Tank has no live
   level field), safety chips, route chips, and a link out. KPI strip
   is intentionally compact so the table dominates. Reuses tokens:
   var(--color-*), var(--space-*), var(--radius-*), var(--shadow-*). */

/* Local nav strip (Registry / Uploads tabs) */

.tank-status-nav {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  width: fit-content;
  margin-bottom: var(--space-4);
}

.tank-status-nav__link {
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-card) - 6px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.tank-status-nav__link:hover {
  color: var(--color-text);
}

.tank-status-nav__link--active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* KPI cards — colored modifiers on top of the existing .stat-card
   primitive. The registry browser shows 4 cards (Total / Available /
   Occupied-Reserved / Maintenance-Cleaning); each picks up an accent
   from its modifier class. */

.registry-kpi {
  margin-bottom: var(--space-4);
}

.stat-card--registry {
  border-left-width: 4px;
  border-left-color: var(--color-blue);
}

.stat-card--success {
  border-left-color: var(--color-success);
}
.stat-card--success .stat-card__value {
  color: var(--color-success);
}

.stat-card--info {
  border-left-color: var(--color-info);
}
.stat-card--info .stat-card__value {
  color: var(--color-info);
}

.stat-card--warning {
  border-left-color: var(--color-warning);
}
.stat-card--warning .stat-card__value {
  color: var(--color-warning);
}

/* Filter bar — single horizontal row on desktop, wraps on mobile */

.registry-filters {
  margin-bottom: var(--space-4);
}

.registry-filters__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.registry-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 220px;
  min-width: 200px;
}

.registry-filters__field input,
.registry-filters__field select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
}

.registry-filters__field input:focus,
.registry-filters__field select:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
  border-color: var(--color-blue);
}

.registry-filters__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* Registry rows — table-first browser. Each row is a self-contained
   article element so we can use CSS grid for the cell layout. The grid
   collapses cleanly on tablet/mobile by changing template-areas. */

.registry-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.registry-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: grid;
  grid-template-columns:
    minmax(160px, 1.2fr)   /* identity */
    96px                    /* preview  */
    minmax(180px, 1.4fr)   /* status   */
    100px                   /* capacity */
    minmax(200px, 1.5fr)   /* safety   */
    minmax(180px, 1.5fr)   /* routes   */
    auto;                   /* actions  */
  gap: var(--space-4);
  align-items: start;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.registry-row:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.registry-row:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

/* Status accent on the row's left border — driven by the latest
   availability label so the eye scans status quickly. */
.registry-row--available         { border-left-color: var(--color-success); }
.registry-row--occupied          { border-left-color: var(--color-info); }
.registry-row--reserved          { border-left-color: #7C3AED; }  /* violet */
.registry-row--maintenance       { border-left-color: var(--color-danger); }
.registry-row--cleaning-required { border-left-color: var(--color-warning); }
.registry-row--unknown,
.registry-row--partially-available,
.registry-row--out-of-service,
.registry-row--unavailable       { border-left-color: var(--color-border-strong); }

.registry-row__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* 1. Identity */

.registry-row__code {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

.registry-row__name {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.registry-row__location {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.registry-row__id-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--color-text-subtle);
  margin-top: 2px;
}

.registry-row__id-meta span {
  background: var(--color-surface-alt);
  padding: 1px 6px;
  border-radius: 4px;
}

/* 2. Preview — mini SVG tank with capacity + N/A level caption */

.registry-row__preview {
  align-items: center;
  text-align: center;
}

.mini-tank {
  width: 60px;
  height: 70px;
  display: block;
}

.mini-tank__body {
  fill: var(--color-surface-soft);
  stroke: var(--color-border-strong);
  stroke-width: 1.4;
  stroke-dasharray: 2 3;
}

.mini-tank__roof {
  fill: var(--color-surface-alt);
  stroke: var(--color-border-strong);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.mini-tank__base {
  fill: var(--color-border-strong);
}

.mini-tank__hatch {
  stroke: var(--color-border);
  stroke-width: 0.8;
  opacity: 0.7;
}

/* Status accent on the cap — gives the preview a quick colour cue
   without filling the body (which would imply a fake level). */
.mini-tank--available   .mini-tank__roof { fill: var(--color-success-soft); stroke: var(--color-success); }
.mini-tank--occupied    .mini-tank__roof { fill: var(--color-info-soft);    stroke: var(--color-info); }
.mini-tank--reserved    .mini-tank__roof { fill: #EDE9FE;                    stroke: #7C3AED; }
.mini-tank--maintenance .mini-tank__roof { fill: var(--color-danger-soft);  stroke: var(--color-danger); }
.mini-tank--cleaning-required .mini-tank__roof { fill: var(--color-warning-soft); stroke: var(--color-warning); }

.registry-row__preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  margin-top: 4px;
}

.registry-row__level-na {
  font-size: 10px;
  color: var(--color-text-subtle);
  font-style: italic;
}

/* 3. Status / Product */

.registry-row__customer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.registry-row__note {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 2px;
  align-self: flex-start;
}

.registry-row__note--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.registry-row__note--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* 4. Capacity */

.registry-row__capacity {
  align-items: flex-end;
  text-align: right;
}

.registry-row__capacity-value {
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1.2;
}

.registry-row__unit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
  margin-left: 2px;
}

.registry-row__capacity-secondary {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.registry-row__capacity-level {
  margin-top: 2px;
  font-style: italic;
}

/* 5. Safety */

.registry-row__safety {
  gap: var(--space-2);
}

/* Internal grouping inside the safety cell: each group is its own
   block, separated by a thin dashed rule when there are multiples. */
.registry-row__chip-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.registry-row__chip-group + .registry-row__chip-group {
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
}

.registry-row__pump {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.registry-row__pump-icon {
  display: inline-flex;
  color: var(--color-info);
}

/* NFPA mini-diamond — flat 3-cell strip; honest "—" when a rating is missing */

.nfpa-mini {
  display: inline-flex;
  gap: 2px;
  font-family: var(--font-technical);
}

.nfpa-mini__cell {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  border-radius: 3px;
}

.nfpa-mini__cell--health { background: #2563EB; }
.nfpa-mini__cell--fire   { background: #DC2626; }
.nfpa-mini__cell--react  { background: #D97706; }

/* Generic chip — used for product, chemistry, placard, atmosphere,
   safety, infra. Variants colour-code the domain. */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.chip__icon {
  display: inline-flex;
}

.chip__icon svg {
  width: 12px;
  height: 12px;
}

.chip--product     { background: #DBEAFE; color: #1E3A8A; }
.chip--chemistry   { background: #FEF3C7; color: #92400E; }
.chip--temperature { background: #FFE4E6; color: #9F1239; }
.chip--placard     { background: #FECACA; color: #991B1B; font-family: var(--font-technical); }
.chip--atmosphere  { background: #DDD6FE; color: #5B21B6; }
.chip--safety      { background: var(--color-warning-soft); color: var(--color-warning); }
.chip--infra       { background: #CFFAFE; color: #155E75; }

/* 6. Routes */

.route-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.route-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.route-chip__icon {
  display: inline-flex;
}

.route-chip__icon svg {
  width: 12px;
  height: 12px;
}

.route-chip__label {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.route-chip__detail {
  font-size: 11px;
  font-weight: 500;
}

.route-chip--dock  { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.route-chip--truck { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.route-chip--rail  { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.route-chip--flow  { background: #E0F2FE; color: #075985; border-color: #BAE6FD; }

/* 7. Actions */

.registry-row__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.registry-row__updated {
  font-size: 10px;
  font-family: var(--font-technical);
}

/* Muted helpers used inline */

.muted          { color: var(--color-text-muted); }
.muted--small   { font-size: var(--text-xs); font-style: italic; }

/* Empty states */

.registry-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  text-align: center;
}

.registry-empty__icon {
  color: var(--color-text-subtle);
}

.registry-empty__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}

.registry-empty__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 480px;
  margin: 0;
}

/* Availability status badges — values come from AvailabilityStatus
   enum via availability_badge() macro: "available", "occupied",
   "reserved", "maintenance", "cleaning_required", "unknown" plus the
   secondary statuses. The macro emits .badge--availability-<value>. */

.badge--availability-available {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.badge--availability-occupied {
  background: var(--color-info-soft);
  color: var(--color-info);
}
.badge--availability-reserved {
  background: #EDE9FE;
  color: #5B21B6;
}
.badge--availability-maintenance {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.badge--availability-cleaning-required {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.badge--availability-out-of-service,
.badge--availability-unavailable {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.badge--availability-unknown,
.badge--availability-partially-available {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* Page header hint */

.page-header__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: var(--font-technical);
  margin: var(--space-1) 0 0 0;
}

.page-header__hint-link {
  color: var(--color-blue);
  text-decoration: none;
}

.page-header__hint-link:hover {
  text-decoration: underline;
}

/* Responsive — desktop (≥1200): all 7 cells in one row.
   Tablet: collapse to 2 rows × 4 cells via reordering.
   Mobile: stack each cell vertically. */

@media (max-width: 1200px) {
  .registry-row {
    grid-template-columns:
      minmax(140px, 1fr) 80px minmax(160px, 1fr) auto;
    grid-template-areas:
      "ident preview status capacity"
      "safety safety routes routes"
      "actions actions actions actions";
    gap: var(--space-3);
  }
  .registry-row__identity { grid-area: ident; }
  .registry-row__preview { grid-area: preview; }
  .registry-row__status { grid-area: status; }
  .registry-row__capacity { grid-area: capacity; }
  .registry-row__safety { grid-area: safety; }
  .registry-row__routes { grid-area: routes; }
  .registry-row__actions { grid-area: actions; flex-direction: row;
                            justify-content: space-between; align-items: center; }
}

@media (max-width: 720px) {
  .registry-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ident"
      "preview"
      "status"
      "capacity"
      "safety"
      "routes"
      "actions";
  }
  .registry-row__capacity { align-items: flex-start; text-align: left; }
  .registry-row__actions { align-items: flex-start; flex-direction: column; }
  .registry-filters__form { flex-direction: column; align-items: stretch; }
  .registry-row__chip-group + .registry-row__chip-group { border-top: none; padding-top: 0; }
}

/* ── Checklist review UI (F0C.1B) ─────────────────────────────────
   Premium technical-review surface for the Safety checklist. Cards
   are status-accented on the left border so a reviewer can scan
   accept/override/needs-review at a glance. The "Evidence-backed
   draft" panel is the canonical NPIA-proposes block; the reviewer
   panel below it is where the human decides. */

/* Hero panel ─────────────────────────────────────────────────────── */

.checklist-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.checklist-hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

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

.checklist-hero__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.checklist-hero__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.checklist-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.checklist-hero__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checklist-hero__label {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.checklist-hero__value {
  font-weight: 600;
  color: var(--color-text);
}

.checklist-hero__counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.checklist-hero__counter strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
  margin-right: 4px;
}

.checklist-hero__counter--good strong  { color: #059669; }
.checklist-hero__counter--warn strong  { color: #DC2626; }

.checklist-hero__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-blue);
}

.checklist-hero__tank-svg svg {
  width: 80px;
  height: 80px;
  color: var(--color-blue);
}

.checklist-hero__level-na {
  font-size: 10px;
  font-style: italic;
  color: var(--color-text-subtle);
}

/* Status badge for the area-result lifecycle. */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-badge--pending      { background: var(--color-surface-alt); color: var(--color-text-muted); }
.status-badge--generated    { background: var(--color-info-soft);   color: var(--color-info); }
.status-badge--under_review { background: var(--color-warning-soft); color: var(--color-warning); }
.status-badge--completed    { background: var(--color-success-soft); color: var(--color-success); }
.status-badge--needs_review { background: var(--color-danger-soft);  color: var(--color-danger); }

/* Progress strip — F0C.1B legacy block removed in F0C.1E; the
   Control Tower hero now carries a slim inline progress rail and
   numeric "X of Y reviewed" cue inside .checklist-hero__progress-line.
   No standalone horizontal bar below the hero. */

/* Question card ──────────────────────────────────────────────────── */

.checklist-question {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  transition: box-shadow 0.15s ease, border-left-color 0.2s ease;
}
.checklist-question:hover { box-shadow: var(--shadow-md); }

.checklist-question--pending      { border-left-color: var(--color-border); }
.checklist-question--accepted     { border-left-color: #059669; }
.checklist-question--overridden   { border-left-color: #D97706; }
.checklist-question--needs_review { border-left-color: #DC2626; }
.checklist-question--na           { border-left-color: var(--color-border); opacity: 0.6; }

.checklist-question__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.checklist-question__code {
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

.checklist-question__answer-type-badge {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  padding: 1px 6px;
  border-radius: 3px;
}

.checklist-question__text {
  font-weight: 600;
  color: var(--color-text);
  flex: 1 1 100%;
  margin: 0;
}

/* Evidence-backed draft panel ───────────────────────────────────── */

.checklist-suggestion {
  background: var(--color-blue-soft);
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checklist-suggestion__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
}

.checklist-suggestion__label svg {
  width: 14px;
  height: 14px;
}

.checklist-suggestion__answer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
}

.checklist-suggestion__answer-text {
  word-break: break-word;
}

.checklist-suggestion__reason {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.confidence-badge {
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.confidence-badge--HIGH   { background: #D1FAE5; color: #065F46; }
.confidence-badge--MEDIUM { background: #FEF3C7; color: #92400E; }
.confidence-badge--LOW    { background: var(--color-surface-alt); color: var(--color-text-muted); }
.confidence-badge--NONE   { background: var(--color-surface-alt); color: var(--color-text-subtle); }

/* Evidence chips ──────────────────────────────────────────────── */

.checklist-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding-top: var(--space-1);
}

.checklist-evidence__label {
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-right: 4px;
}

.evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 2px 8px;
}

.evidence-chip__model {
  font-weight: 700;
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.evidence-chip__field {
  font-family: var(--font-technical);
  font-size: 10px;
  color: var(--color-text-muted);
}

.evidence-chip__value {
  color: var(--color-text);
  font-weight: 500;
}

.evidence-chip__meta {
  font-size: 9px;
  color: var(--color-text-subtle);
  font-family: var(--font-technical);
}

.evidence-chip--sdsextractedfield,
.evidence-chip--sds                 { border-color: #93C5FD; }
.evidence-chip--sdsextraction       { border-color: #93C5FD; }
.evidence-chip--tank                { border-color: #94A3B8; }
.evidence-chip--tankavailability,
.evidence-chip--availability        { border-color: #6EE7B7; }
.evidence-chip--inquiry             { border-color: #C4B5FD; }

/* Missing-data block ─────────────────────────────────────────── */

.checklist-missing {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.checklist-missing__label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #DC2626;
}

.checklist-missing__label svg {
  width: 14px;
  height: 14px;
}

.missing-chip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: #7F1D1D;
}

.missing-chip__source {
  font-weight: 700;
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.missing-chip__field {
  font-family: var(--font-technical);
  font-size: 10px;
}

.missing-chip__reason {
  color: #991B1B;
}

/* Reviewer panel ─────────────────────────────────────────────── */

.checklist-reviewer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.answer-option-group {
  display: flex;
  gap: var(--space-4);
  margin: 0 0 var(--space-1) 0;
  border: none;
  padding: 0;
}

.answer-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-size: var(--text-sm);
}

.answer-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.btn--xs {
  padding: 2px var(--space-2);
  font-size: 10px;
}

.btn--muted {
  opacity: 0.7;
}

.checklist-reviewer__error {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
}

/* Reviewer decision summary ─────────────────────────────────── */

.reviewer-decision-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
}

.reviewer-decision__status {
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reviewer-decision__status--accepted     { color: #059669; }
.reviewer-decision__status--overridden   { color: #6D28D9; }
.reviewer-decision__status--needs_review { color: #DC2626; }
.reviewer-decision__status--pending      { color: var(--color-text-subtle); }

.reviewer-decision__answer {
  font-weight: 600;
  color: var(--color-text);
}

.reviewer-decision__comment {
  font-style: italic;
}

.reviewer-decision__timestamp {
  color: var(--color-text-subtle);
  font-family: var(--font-technical);
  font-size: 10px;
}

@media (max-width: 720px) {
  .checklist-hero {
    grid-template-columns: 1fr;
  }
  .checklist-hero__visual {
    flex-direction: row;
    justify-content: flex-start;
  }
  .answer-option-group {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* ───────────────────────────────────────────────────────────────────
   F0C.1E — Safety checklist Control Tower polish
   ────────────────────────────────────────────────────────────────
   Refines the F0C.1C/D surface into a denser, less generic, more
   technical interface. Compared to the prior block, this one:

     • Adds a hero "overline" rule + technical SVG backdrop so the
       header reads as a Control Tower panel, not a generic banner.
     • Replaces bulky boxed KPI cards with horizontal metric tiles
       (icon · value · label) — same data, less chrome, more density.
     • Drops the standalone horizontal blue progress bar; the hero
       now carries a slim inline rail + "X of Y reviewed" cue.
     • Tightens toolbar spacing and aligns control heights.
     • Sharpens question-row hierarchy (text > status > draft >
       confidence > source > answer-type) using typography rather
       than chip-soup.
     • Replaces evidence chip palette with subdued source cards,
       one per evidence row.
     • Folds the area-evaluation form into a 3-column grid so it
       reads as part of the same Control Tower language as the hero.

   No backend, route, model, permission, or JS-contract change. */

/* ── Hero — Control Tower panel (2-row layout)
     Row 1: Identity (left) + Tank summary (right)
     Row 2: Full-width instrument rail (5 KPI items)
   ──────────────────────────────────────────────────────────── */

.checklist-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background:
    linear-gradient(
      180deg,
      var(--color-surface) 0%,
      var(--color-surface) 60%,
      var(--color-surface-soft) 100%);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-blue);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  overflow: hidden;
  isolation: isolate;
}

.checklist-hero__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--color-blue-muted);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}

/* Top row — identity left, tank right ─────────────────────── */
.checklist-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: stretch;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.checklist-hero__identity { min-width: 0; }

/* Identity zone ─────────────────────────────────────────────── */

.checklist-hero__overline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0 0 var(--space-1) 0;
}

.checklist-hero__overline-rule {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.checklist-hero__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0;
}

.checklist-hero__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.012em;
  line-height: 1.15;
}

.checklist-hero__title-divider {
  margin: 0 8px;
  color: var(--color-text-subtle);
  font-weight: 300;
}

.checklist-hero__title-tank {
  color: var(--color-blue);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.checklist-hero__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 6px 0 0 0;
  line-height: 1.5;
}

.checklist-hero__subtitle-sep {
  margin: 0 6px;
  color: var(--color-text-subtle);
}

.checklist-hero__subtitle-product {
  color: var(--color-text);
  font-weight: 600;
}

/* Slim inline progress rail — replaces the F0C.1B horizontal bar. */
.checklist-hero__progress-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.checklist-hero__progress-rail {
  position: relative;
  display: inline-block;
  flex: 1 1 auto;
  height: 3px;
  max-width: 320px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.checklist-hero__progress-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--color-blue) 0%, #38BDF8 100%);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.checklist-hero__progress-text {
  font-family: var(--font-technical);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.checklist-hero__progress-text strong {
  color: var(--color-text);
  font-weight: 700;
}

/* ── Tank summary zone (top row, right side) ─────────────────── */

.checklist-hero__tank {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-4);
  margin-left: var(--space-4);
  border-left: 1px solid var(--color-border);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(241, 245, 249, 0.4) 100%);
  border-radius: 12px;
  padding: var(--space-3) var(--space-4);
}

.checklist-hero__tank-visual {
  flex-shrink: 0;
}

.checklist-hero__tank-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  font-size: var(--text-xs);
  min-width: 160px;
}

.checklist-hero__tank-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 0;
  border-bottom: 1px dotted var(--color-border);
}

.checklist-hero__tank-fact:last-child {
  border-bottom: none;
}

.checklist-hero__tank-fact dt {
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 600;
}

.checklist-hero__tank-fact dd {
  color: var(--color-text);
  font-weight: 600;
  margin: 0;
  text-align: right;
  font-size: 11px;
}

.checklist-hero__tank-fact--muted dd {
  color: var(--color-text-subtle);
  font-style: italic;
  font-weight: 500;
}

/* ───────────────────────────────────────────────────────────────
   KPI Instrument Rail — full-width second row of the hero.

   One continuous horizontal strip with 5 KPI items, separated by
   subtle vertical dividers. No per-item card borders. Each item
   gets generous horizontal width so labels render fully (Reviewed,
   Pending, High confidence, Missing data, Needs review) and never
   truncate. Icons are 28px; values are 22px mono. The whole rail
   sits inside a single panel-style container so it reads as one
   instrument, not five Bootstrap cards. */

.checklist-kpi-strip {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    var(--shadow-sm);
  overflow: hidden;
}

.kpi-tile {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  isolation: isolate;
  min-width: 0;
  transition: background 0.15s ease;
}

/* Subtle vertical separator between adjacent KPI items. */
.kpi-tile + .kpi-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--color-border);
}

.kpi-tile:hover {
  background: var(--color-surface-soft);
}

/* Icon wrapper — gives the icon a soft tinted disc so it reads as
   a true instrument indicator and not a thin line drawing. */
.kpi-tile__icon-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.kpi-tile__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: inherit;
  stroke-width: 1.7;
}

.kpi-tile__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.kpi-tile__value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-technical);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1.0;
  letter-spacing: -0.015em;
}

.kpi-tile__value > strong {
  font-weight: 700;
  color: inherit;
}

.kpi-tile__divider {
  color: var(--color-text-subtle);
  font-weight: 400;
  font-size: 16px;
}

.kpi-tile__label {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
  /* No overflow:hidden / ellipsis — labels must always show fully. */
}

/* Per-state accent — tint the icon disc + icon stroke. The value
   on Hi/Missing/Needs picks up the semantic color too so the rail
   communicates state at a glance without painting whole panels. */
.kpi-tile--reviewed .kpi-tile__icon-wrap {
  background: var(--color-blue-soft);
  color: var(--color-blue);
}

.kpi-tile--pending .kpi-tile__icon-wrap {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.kpi-tile--high .kpi-tile__icon-wrap {
  background: #ECFDF5;
  color: #047857;
}
.kpi-tile--high .kpi-tile__value > strong { color: #047857; }

.kpi-tile--missing .kpi-tile__icon-wrap {
  background: #FFFBEB;
  color: #B45309;
}
.kpi-tile--missing .kpi-tile__value > strong { color: #B45309; }

.kpi-tile--needs .kpi-tile__icon-wrap {
  background: #FEF2F2;
  color: #B91C1C;
}
.kpi-tile--needs .kpi-tile__value > strong { color: #B91C1C; }

/* Compatibility shims — preserve historical .kpi-pill selectors
   targeted by tests + JS counters. The old boxed-pill look is
   gone; modifier classes still apply state colour to the tile. */
.kpi-pill { /* alias of .kpi-tile */ }
.kpi-pill__value { /* alias of .kpi-tile__value */ }
.kpi-pill__label { /* alias of .kpi-tile__label */ }
.kpi-pill__divider { /* alias of .kpi-tile__divider */ }

/* ── Toolbar — tighter, cleaner ──────────────────────────────── */

.checklist-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.checklist-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3) var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.checklist-toolbar__bulk {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding-left: var(--space-3);
  margin-left: auto;
  border-left: 1px solid var(--color-border);
  align-self: stretch;
}

.checklist-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 0 0 auto;
}

.checklist-toolbar__field .field__label {
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.checklist-toolbar__field--grow {
  flex: 1 1 220px;
  min-width: 200px;
}

.checklist-toolbar__field input,
.checklist-toolbar__field select {
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  line-height: 1.2;
}

.checklist-toolbar__field input:hover,
.checklist-toolbar__field select:hover {
  border-color: var(--color-border-strong);
}

.checklist-toolbar__field input:focus,
.checklist-toolbar__field select:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
  border-color: var(--color-blue);
}

/* Search wrapper — leading icon */
.checklist-toolbar__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.checklist-toolbar__input-wrap input {
  width: 100%;
  padding-left: 30px;
}

.checklist-toolbar__input-icon {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  color: var(--color-text-soft);
  pointer-events: none;
}

/* Tighter buttons inside the bulk cluster — they should not
   compete with the primary action buttons elsewhere on the page. */
.checklist-toolbar__bulk .btn {
  height: 32px;
  padding: 0 12px;
  font-size: var(--text-xs);
}

/* ── Question list ───────────────────────────────────────────── */

.checklist-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checklist-question--filtered-out {
  display: none !important;
}

.checklist-question {
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
  transition: box-shadow 0.15s ease, border-left-color 0.2s ease,
              border-color 0.15s ease;
}
.checklist-question:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.checklist-question[open] {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.checklist-question--pending      { border-left-color: var(--color-border-strong); }
.checklist-question--accepted     { border-left-color: #059669; }
.checklist-question--overridden   { border-left-color: #7C3AED; }
.checklist-question--needs_review { border-left-color: #DC2626; }

/* Per-status summary tint — premium semantic color confined to the
   header row only. Body (.checklist-expanded) stays neutral so the
   color reads as a status signal, not a mood. The gradient fades
   to transparent at the bottom of the summary so the transition
   into the expanded body is seamless. */
.checklist-question--accepted > summary {
  background: linear-gradient(
    180deg,
    rgba(5, 150, 105, 0.055) 0%,
    rgba(5, 150, 105, 0.012) 70%,
    transparent 100%);
}
.checklist-question--pending > summary {
  background: linear-gradient(
    180deg,
    rgba(100, 116, 139, 0.045) 0%,
    rgba(100, 116, 139, 0.010) 70%,
    transparent 100%);
}
.checklist-question--overridden > summary {
  background: linear-gradient(
    180deg,
    rgba(124, 58, 237, 0.055) 0%,
    rgba(124, 58, 237, 0.012) 70%,
    transparent 100%);
}
.checklist-question--needs_review > summary {
  background: linear-gradient(
    180deg,
    rgba(220, 38, 38, 0.055) 0%,
    rgba(220, 38, 38, 0.012) 70%,
    transparent 100%);
}

/* Top-rail accent — a thin colored bar at the very top of the
   summary in the matching semantic color. Reads as a SCADA
   indicator stripe; one rule per state via ::before. */
.checklist-question > summary {
  position: relative;
}
.checklist-question > summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-border-strong);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  pointer-events: none;
}
.checklist-question[open] > summary::before { opacity: 1; }
.checklist-question--accepted > summary::before     { background: #059669; opacity: 1; }
.checklist-question--overridden > summary::before   { background: #7C3AED; opacity: 1; }
.checklist-question--needs_review > summary::before { background: #DC2626; opacity: 1; }
.checklist-question--pending > summary::before      { background: var(--color-border-strong); }

/* Missing-data micro-indicator — a small amber dot in the top-right
   corner of the summary, independent of reviewer_status. Subtle by
   design so it never overpowers the status-pill anchor. */
.checklist-question[data-missing="1"] > summary::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
  pointer-events: none;
}

/* ── Collapsed summary row ───────────────────────────────────── */

.checklist-question > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
}
.checklist-question > summary::-webkit-details-marker { display: none; }

.checklist-summary {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4);
  align-items: center;
}

.checklist-summary__lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
}

.checklist-summary__code {
  font-family: var(--font-technical);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text);
  line-height: 1.2;
}

/* Answer-type — most subtle in hierarchy. */
.checklist-summary__answer-type {
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  font-weight: 500;
}

.checklist-summary__center {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Primary line — the question itself. */
.checklist-summary__text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Secondary meta line — Draft · Confidence · Source · Missing */
.checklist-summary__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.checklist-summary__divider {
  color: var(--color-border-strong);
  user-select: none;
}

.checklist-summary__draft {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  max-width: 240px;
}

.checklist-summary__draft-label {
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  font-weight: 600;
}

/* Draft answer — medium prominence. */
.checklist-summary__draft-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checklist-summary__missing-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #B45309;
}

.checklist-summary__missing-icon {
  width: 12px;
  height: 12px;
}

.checklist-summary__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.checklist-summary__timestamp {
  font-family: var(--font-technical);
  font-size: 10px;
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}

/* Status pill — strongest visual anchor on the right. */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.status-pill--pending      {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.status-pill--accepted     {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}
.status-pill--overridden   {
  background: #F5F3FF;
  color: #6D28D9;
  border-color: #DDD6FE;
}
.status-pill--needs_review {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}

/* Confidence — supporting size in the collapsed summary. */
.confidence-badge--sm {
  font-size: 9px;
  padding: 1px 5px;
}

/* Source chip — quietest in-summary signal. */
.source-chip {
  font-family: var(--font-technical);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-soft);
}
.source-chip--sdsextractedfield,
.source-chip--sds            { color: #1E40AF; }
.source-chip--sdsextraction  { color: #1E40AF; }
.source-chip--tank           { color: #475569; }
.source-chip--tankavailability,
.source-chip--availability   { color: #047857; }
.source-chip--inquiry        { color: #6D28D9; }

.expand-toggle {
  width: 16px;
  height: 16px;
  color: var(--color-text-soft);
  transition: transform 0.2s ease, color 0.15s ease;
}
.checklist-question:hover .expand-toggle {
  color: var(--color-text-muted);
}
.checklist-question[open] .expand-toggle {
  transform: rotate(180deg);
  color: var(--color-blue);
}

/* ── Expanded body — 3-column grid ───────────────────────────── */

.checklist-expanded {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

.checklist-expanded__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-3);
}

.checklist-expanded__col-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px dotted var(--color-border);
}

.checklist-expanded__col-title svg,
.checklist-expanded__col-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-blue);
}

/* The Evidence-backed draft suggestion card. */
.checklist-suggestion {
  background: linear-gradient(
    180deg,
    var(--color-blue-soft) 0%,
    #EFF6FF 100%);
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checklist-suggestion__answer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.checklist-suggestion__answer-text {
  word-break: break-word;
  flex: 1 1 auto;
}

.checklist-suggestion__reason {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Source cards — one per evidence row. */
.source-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.source-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 6px;
  padding: 8px var(--space-3);
  font-size: var(--text-xs);
  transition: border-color 0.15s ease;
}

.source-card:hover {
  border-color: var(--color-border-strong);
}

.source-card__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.source-card__source {
  font-family: var(--font-technical);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.source-card__field {
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-technical);
}

.source-card__value {
  color: var(--color-text);
  font-weight: 500;
  font-size: 12px;
  word-break: break-word;
  line-height: 1.45;
}

.source-card__meta {
  margin-top: 4px;
  font-size: 9px;
  color: var(--color-text-soft);
  font-family: var(--font-technical);
}

.source-card--sdsextractedfield,
.source-card--sds           { border-left-color: #2563EB; }
.source-card--sdsextraction { border-left-color: #2563EB; }
.source-card--tank          { border-left-color: #475569; }
.source-card--tankavailability,
.source-card--availability  { border-left-color: #059669; }
.source-card--inquiry       { border-left-color: #7C3AED; }

.source-empty,
.missing-empty {
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  font-style: italic;
  margin: 0;
  padding: 4px 0;
}

/* Missing-data block — minor footprint inside the evidence column. */
.checklist-missing {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  padding: 8px var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checklist-missing__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-technical);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B45309;
}

.checklist-missing__label svg {
  width: 12px;
  height: 12px;
}

.missing-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: #78350F;
}

.missing-chip__source {
  font-weight: 700;
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.missing-chip__field {
  font-family: var(--font-technical);
  font-size: 10px;
  color: #92400E;
}

.missing-chip__reason {
  color: #78350F;
}

/* Reviewer column — read-only fallback. */
.checklist-reviewer__readonly {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-surface-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .checklist-hero__top {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .checklist-hero__tank {
    margin-left: 0;
    padding-left: var(--space-3);
    border-left: none;
    border-top: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-3);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
  }
}

@media (max-width: 1024px) {
  .checklist-summary {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "lead   right"
      "center center";
  }
  .checklist-summary__lead   { grid-area: lead; }
  .checklist-summary__center { grid-area: center; }
  .checklist-summary__right  { grid-area: right; justify-self: end; }
}

@media (max-width: 900px) {
  .checklist-expanded {
    grid-template-columns: 1fr;
  }
  .checklist-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .checklist-toolbar__bulk {
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-left: 0;
    padding-top: var(--space-2);
    margin-left: 0;
  }
  .checklist-toolbar__field { min-width: 0; }

  /* On narrow viewports the rail wraps to two rows of items; the
     vertical separators on row-2 items would point into empty space,
     so suppress the leading-edge separator on the wrap boundary. */
  .checklist-kpi-strip {
    flex-wrap: wrap;
  }
  .kpi-tile {
    flex: 1 1 calc(50% - 1px);
    min-width: 160px;
    padding: 12px 14px;
  }
  .kpi-tile__icon-wrap { width: 40px; height: 40px; }
  .kpi-tile__icon { width: 24px; height: 24px; }
  .kpi-tile__value { font-size: 20px; }
}

@media (max-width: 560px) {
  .kpi-tile {
    flex: 1 1 100%;
  }
  .kpi-tile + .kpi-tile::before {
    left: 14px;
    right: 14px;
    top: auto;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   F0C.1D — Safety area evaluation panel (Control Tower polish)
   ────────────────────────────────────────────────────────────────
   Same Control Tower visual language as the hero — overline rule,
   compact readiness summary, refined verdict badge, 3-column form
   grid. No approved / rejected vocabulary; no backend change. */

.verdict-panel {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-surface) 75%,
    var(--color-surface-soft) 100%);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-blue);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.verdict-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.verdict-panel__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.verdict-panel__overline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0;
}

.verdict-panel__overline-rule {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.verdict-panel__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.005em;
}

.verdict-panel__rule {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.verdict-panel__current {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Verdict badges — semantic colors, no approved / rejected vocab. */
.verdict-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-technical);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.verdict-badge--suitable                 { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.verdict-badge--suitable_with_conditions { background: #FFFBEB; color: #B45309; border-color: #FCD34D; }
.verdict-badge--not_suitable             { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.verdict-badge--needs_more_information   { background: var(--color-info-soft); color: var(--color-info); border-color: #BFDBFE; }
.verdict-badge--none                     { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }

/* Readiness summary — compact horizontal cluster. */
.verdict-readiness {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 10px var(--space-4);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  list-style: none;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.verdict-readiness li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.verdict-readiness__label {
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.verdict-readiness strong {
  font-family: var(--font-technical);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.verdict-readiness__divider {
  color: var(--color-text-soft);
}

.verdict-readiness__pending { color: var(--color-text-muted); }
.verdict-readiness__needs   { color: #DC2626; }

/* Banners — block / warn. */
.verdict-banner {
  margin: 0;
  padding: 8px var(--space-3);
  border-radius: 8px;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.verdict-banner::before {
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.verdict-banner--block {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}
.verdict-banner--warn {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
}

/* Verdict form — 3-column grid for verdict / comment / conditions. */
.verdict-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
}

.verdict-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.verdict-form__field .field__label {
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.verdict-form__field select,
.verdict-form__field textarea {
  padding: 8px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
}

.verdict-form__field select {
  height: 36px;
  padding: 0 var(--space-3);
}

.verdict-form__field select:hover,
.verdict-form__field textarea:hover {
  border-color: var(--color-border-strong);
}

.verdict-form__field select:focus,
.verdict-form__field textarea:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: 1px;
  border-color: var(--color-blue);
}

.verdict-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: 4px;
}

.verdict-form__error {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
}

.verdict-form__readonly {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-surface-soft);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  margin: 0;
}

.verdict-panel__footer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  border-top: 1px dotted var(--color-border);
  margin: 0;
}

.verdict-panel__footer strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .verdict-form__grid {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════
   F0C.3 — Candidate Decision Console (premium Control Tower)
   One read-only consolidated view per (inquiry, candidate). Reuses
   the lifecycle area-color palette from `.lifecycle__gate--g{3..7}
   .lifecycle__node` so the decision-console area cards read as the
   same visual family as the rest of the technical UI.

   Visual model:
     hero (3-zone candidate summary + KPI rail + recommendation banner)
     2-col layout (main stream + sticky reviewer rail)
   ════════════════════════════════════════════════════════════ */

/* ── Hero / Candidate summary panel ─────────────────────────── */
.decision-hero {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.decision-hero__crosshair {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.decision-hero > * { position: relative; z-index: 1; }

/* ── Hero heading (page title block) — sits ABOVE the identity row */
.decision-hero__heading {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.decision-hero__overline {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-2);
}
.decision-hero__overline-rule {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--color-blue);
}
.decision-hero__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
}
.decision-hero__inquiry {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.decision-hero__inquiry-sep { margin: 0 var(--space-2); color: var(--color-text-subtle); }
.decision-hero__product { color: var(--color-text); font-family: inherit; font-weight: var(--weight-medium); }

/* ── Hero main row — tank cluster (left) + right rail (right).
   The tank cluster (tank SVG + identity stack) keeps its intrinsic
   width on the left. The right rail stacks the KPI strip above
   the provisional-recommendation banner, both stretching to match
   the tank cluster height. `align-items: stretch` lets the rail
   fill the cluster height; `justify-content: space-between` inside
   the rail then balances KPIs at the top and banner at the bottom. */
.decision-hero__main {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}
.decision-hero__main > .decision-hero__identity-row { flex: 0 0 auto; }
.decision-hero__main > .decision-hero__rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ── Hero identity cluster — tank SVG + tank identity stack.
   The tank code is the strongest text in the hero; everything else
   below it is in descending hierarchy. The cluster reads as a single
   identity unit, not as a row of separate technical labels. The
   identity stack sits at the TOP of the cluster (align-items: start)
   so `TK-101` is the first scannable line in the hero. */
.decision-hero__identity-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  min-width: 0;
}
.decision-hero__visual {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 260px;
  flex-shrink: 0;
}
.decision-hero__visual > svg,
.decision-hero__visual img {
  max-height: 280px;
  max-width: 100%;
  width: auto;
}
.decision-hero__identity-stack {
  /* Stretch to match the tank's height so the identity lines spread
     vertically (TK-101 at the top, location pill at the bottom)
     instead of bunching at the top of the cluster. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  align-self: stretch;
  padding: var(--space-1) 0;
}
/* Tank code — the page's primary identifier. Bold, large, mono,
   high-contrast, immediately scannable. */
.decision-hero__tank-code {
  margin: 0;
  font-size: var(--text-3xl, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
  line-height: 1;
}
/* Capacity — second-strongest line. Tabular numerals for crisp
   alignment, slightly muted unit. */
.decision-hero__capacity {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.decision-hero__capacity-unit {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-left: 4px;
}
/* Supporting facts — Material + Design pressure. Compact stack with
   small uppercase labels, regular-weight values. Spacing tight enough
   that they read as a single supporting block, not separate fields. */
.decision-hero__supporting-facts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-1) 0 0;
}
.decision-hero__supporting-facts > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: baseline;
  gap: var(--space-2);
}
.decision-hero__supporting-facts dt {
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  font-weight: var(--weight-medium);
}
.decision-hero__supporting-facts dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
/* Location pill — compact, uppercase mono, technical. */
.decision-hero__location-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.decision-hero__location-pill-sep { color: var(--color-text-subtle); }

/* ── KPI instrument rail — single horizontal row of 5 tiles. The
   strip stretches across the rail's full width (no `align-self`
   override) so the 5 tiles span the same horizontal area as the
   provisional-recommendation banner stacked beneath them. Each
   tile gets 1/5 of the rail width minus the inter-tile gaps. */
.decision-kpi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  /* `align-self` defaults to `stretch` from the parent rail's flex,
     which is what we want here — the strip fills the rail width
     and the 1fr columns inside it distribute equally. */
}
.decision-kpi .kpi-tile {
  /* Grid: icon spans both rows on the left; value sits on row 1
     to the right of the icon; label sits on row 2 underneath the
     value. The tile frame stays neutral — only the icon stroke
     carries the semantic color. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "icon value"
    "icon label";
  column-gap: var(--space-3);
  row-gap: 2px;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  min-width: 0;
}
.decision-kpi .kpi-tile__icon {
  grid-area: icon;
  width: 38px; height: 38px;
  color: currentColor;
  align-self: center;
  flex-shrink: 0;
}
.decision-kpi .kpi-tile__value {
  grid-area: value;
  font-size: var(--text-3xl, 1.875rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.decision-kpi .kpi-tile__label {
  grid-area: label;
  font-family: var(--font-technical);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  white-space: normal;
}
/* KPI tile semantic accents (the icon + accent bar take the color). */
.decision-kpi .kpi-tile--blue   { color: var(--color-blue); }
.decision-kpi .kpi-tile--slate  { color: var(--color-text-muted); }
.decision-kpi .kpi-tile--green  { color: #059669; }
.decision-kpi .kpi-tile--amber  { color: #D97706; }
.decision-kpi .kpi-tile--violet { color: #7C3AED; }

/* ── Provisional recommendation banner ────────────────────────
   Semantic operational summary, NOT a neutral note box. The state
   class on the banner root sets `color`; everything inside that
   should reflect the state inherits via `currentColor` (signal
   rail, icon stroke, title text). The tinted background is set
   per-state below. ───────────────────────────────────────── */
.provisional-banner {
  /* Lives inside `.decision-hero__rail` — no top margin needed; the
     rail's gap handles the spacing between the KPI strip and the
     banner. */
  margin: 0;
  display: grid;
  /* No left signal rail — the banner's left edge sits flush with the
     first KPI tile so the rail reads as a single column. The state
     color now lives only in the icon, the title, and the soft
     background tint. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  /* Default fallback — overridden by `--<state>` rules below. */
  color: var(--color-blue);
  background: rgba(37, 99, 235, 0.04);
}
.provisional-banner__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  /* The icon ring uses a soft tint of the state color so it reads
     as a status indicator, not a hard chip. */
  background: rgba(255, 255, 255, 0.6);
  border-right: 1px solid currentColor;
}
.provisional-banner__icon {
  width: 36px;
  height: 36px;
  color: currentColor;
}
.provisional-banner__body {
  padding: var(--space-3) var(--space-5);
}
.provisional-banner__overline {
  margin: 0;
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.provisional-banner__value {
  margin: 2px 0 var(--space-1);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  /* Title color inherits the banner state — strongest signal in
     the banner. Subtitle stays neutral so the state read is
     unambiguous. */
  color: currentColor;
  letter-spacing: -0.01em;
}
.provisional-banner__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.provisional-banner__note strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* Per-state semantic overrides — color cascades to icon + title +
   rail, background uses the soft tint of the same hex. */
.provisional-banner--recommended {
  color: #059669;
  background: rgba(5, 150, 105, 0.06);
}
.provisional-banner--recommended_with_conditions {
  color: #D97706;
  background: rgba(217, 119, 6, 0.06);
}
.provisional-banner--needs_more_information {
  color: var(--color-blue);
  background: rgba(37, 99, 235, 0.06);
}
.provisional-banner--not_recommended {
  color: #DC2626;
  background: rgba(220, 38, 38, 0.06);
}

/* ── 2-col layout: main stream + sticky reviewer rail ──────── */
.decision-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: var(--space-4);
}
.decision-layout__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.decision-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
}
.decision-section__header { margin-bottom: var(--space-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.decision-section__heading { min-width: 0; }
.decision-section__header h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
  color: var(--color-text);
}
.decision-section__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.decision-section__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3) 0;
}

/* ── Area matrix — 5 independent decision modules ──────────── */
.area-matrix {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.area-matrix > li { list-style: none; }
.area-matrix__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.area-matrix__card:hover {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.05);
  text-decoration: none;
}

.area-matrix__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
}
.area-matrix__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
}
.area-matrix__icon svg { width: 28px; height: 28px; }
.area-matrix__icon--safety        { color: #D97706; }
.area-matrix__icon--operations    { color: #0891B2; }
.area-matrix__icon--environmental { color: #0D9488; }
.area-matrix__icon--engineering   { color: #059669; }
.area-matrix__icon--disposal      { color: #7C3AED; }

.area-matrix__label {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: 1.2;
}

.area-matrix__card .verdict-pill {
  align-self: center;
  width: 100%;
  text-align: center;
  font-size: 12px;
  padding: 8px var(--space-3);
}

.area-matrix__count-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.area-matrix__count-label {
  margin: 0;
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.area-matrix__count-big {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.area-matrix__count-total {
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  margin-left: 2px;
}

.area-matrix__signals {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.area-matrix__signals li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
}
.area-matrix__signals li > span:first-child {
  color: var(--color-text-muted);
}
.area-matrix__signals li > span:last-child {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.area-matrix__summary {
  margin: 0;
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Verdict pills — strong emphasis in area-matrix card headers.
   Bigger, bolder, uppercase — the verdict is one of the primary
   scannable elements of each card. */
.verdict-pill {
  display: inline-block;
  font-family: var(--font-technical);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 5px var(--space-3);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1.1;
}
.verdict-pill--suitable                 { color: #047857; border-color: rgba(5, 150, 105, 0.45);  background: rgba(5, 150, 105, 0.12);  }
.verdict-pill--suitable_with_conditions { color: #B45309; border-color: rgba(217, 119, 6, 0.45);  background: rgba(217, 119, 6, 0.12);  }
.verdict-pill--needs_more_information   { color: #1D4ED8; border-color: rgba(37, 99, 235, 0.45);  background: rgba(37, 99, 235, 0.12); }
.verdict-pill--not_suitable             { color: #B91C1C; border-color: rgba(220, 38, 38, 0.45);  background: rgba(220, 38, 38, 0.12);  }
.verdict-pill--not_generated            { color: var(--color-text-subtle); border-color: var(--color-border); }
.verdict-pill--in_progress              { color: #1D4ED8; border-color: rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.08); }

/* ── Cross-area summary panels ────────────────────────────── */
.cross-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.cross-summary__panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.cross-summary__panel header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  align-items: center;
}
.cross-summary__panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.cross-summary__panel-icon svg { width: 20px; height: 20px; }
.cross-summary__panel h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: currentColor;
  letter-spacing: 0;
  text-transform: none;
}
.cross-summary__count {
  font-family: var(--font-technical);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: currentColor;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 0;
  padding: 0;
}
.cross-summary__panel ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.cross-summary__panel li {
  margin-bottom: var(--space-1);
  color: var(--color-text);
  line-height: 1.45;
}
.cross-summary__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.cross-summary__cta {
  margin-top: auto;
  padding-top: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: currentColor;
  text-decoration: none;
}
.cross-summary__cta:hover { text-decoration: underline; }
.cross-summary__panel--blockers   { color: #DC2626; }
.cross-summary__panel--conditions { color: #D97706; }
.cross-summary__panel--gaps       { color: var(--color-blue); }
.cross-summary__panel--shared     { color: #7C3AED; }

/* ── Action plan preview — operational worklist ────────────── */
.action-table-wrap { overflow-x: auto; }
.action-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.action-table th, .action-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.action-table thead th {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  font-weight: var(--weight-semibold);
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--color-border);
}
.action-table__row { transition: background 0.12s; }
.action-table__row:hover { background: rgba(37, 99, 235, 0.03); }
.action-table__detail { display: flex; flex-direction: column; gap: 2px; min-width: 220px; }
.action-table__source {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  text-transform: uppercase;
}
.action-table__text { color: var(--color-text); }
.action-table__due  { color: var(--color-text-subtle); }

/* Area chip used inside the worklist. */
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--weight-medium);
  background: var(--color-surface-soft);
  color: var(--color-text);
  white-space: nowrap;
}
.area-chip__icon { display: inline-flex; align-items: center; }
.area-chip__icon svg { width: 12px; height: 12px; }
.area-chip--safety        { border-color: rgba(217, 119, 6, 0.35); color: #B45309; }
.area-chip--operations    { border-color: rgba(8, 145, 178, 0.35); color: #0E7490; }
.area-chip--environmental { border-color: rgba(13, 148, 136, 0.35); color: #0F766E; }
.area-chip--engineering   { border-color: rgba(5, 150, 105, 0.35); color: #047857; }
.area-chip--disposal      { border-color: rgba(124, 58, 237, 0.35); color: #6D28D9; }

/* Owner bubble — initials on a soft circle, name beside on wider screens. */
.owner-bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.owner-bubble__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  font-family: var(--font-technical);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: 0;
}
.owner-bubble__name { color: var(--color-text-muted); }

/* Priority + status pills (priority-pill kept compatible with action
   preview from the previous F0C.3 patch). */
.priority-pill, .status-pill {
  display: inline-block;
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.priority-pill--high   { color: #DC2626; border-color: rgba(220, 38, 38, 0.3);  background: rgba(220, 38, 38, 0.08);  }
.priority-pill--medium { color: #D97706; border-color: rgba(217, 119, 6, 0.3);  background: rgba(217, 119, 6, 0.08);  }
.priority-pill--low    { color: var(--color-text-muted); }
.status-pill--proposed { color: var(--color-blue); border-color: rgba(37, 99, 235, 0.3);  background: rgba(37, 99, 235, 0.08); }

/* ── Final reviewer decision panel — sticky right rail ─────── */
.decision-final {
  position: sticky;
  top: var(--space-4);
  align-self: flex-start;
}
.decision-final__inner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}
/* Subtle technical accent strip on the left edge to anchor the rail. */
.decision-final__inner::before {
  content: ""; position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--color-blue), rgba(37, 99, 235, 0.2));
}
.decision-final__header { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); }
.decision-final__overline {
  margin: 0;
  font-family: var(--font-technical);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  display: flex; align-items: center; gap: var(--space-2);
}
.decision-final__overline-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-blue);
}
.decision-final__title {
  margin: var(--space-1) 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.decision-final__rule {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.decision-final__rule strong { color: var(--color-text); font-weight: var(--weight-semibold); }

.decision-final__current {
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.decision-final__current-label {
  margin: 0;
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
.provisional-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: rgba(37, 99, 235, 0.06);
  color: var(--color-blue);
}
.provisional-pill--recommended                 { color: #059669; background: rgba(5, 150, 105, 0.08); }
.provisional-pill--recommended_with_conditions { color: #D97706; background: rgba(217, 119, 6, 0.08); }
.provisional-pill--not_recommended             { color: #DC2626; background: rgba(220, 38, 38, 0.08); }
.provisional-pill--needs_more_information      { color: var(--color-blue); }

.decision-final__notice {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: rgba(37, 99, 235, 0.04);
  border: 1px dashed rgba(37, 99, 235, 0.35);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: flex; align-items: flex-start; gap: var(--space-2);
}
.decision-final__notice-tag {
  font-family: var(--font-technical);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue);
  background: rgba(37, 99, 235, 0.08);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
.decision-final__form { display: flex; flex-direction: column; gap: var(--space-3); }
.decision-final__field { display: flex; flex-direction: column; gap: var(--space-1); }
.decision-final__submit { align-self: stretch; }
.decision-final__form[aria-disabled="true"] .select,
.decision-final__form[aria-disabled="true"] .textarea {
  background: var(--color-surface-soft);
  cursor: not-allowed;
  opacity: 0.85;
}
.decision-final__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 1280px) {
  /* Mid-range screens: keep the side-by-side layout but allow the
     KPI rail to wrap to 2 rows if needed. */
  .decision-kpi {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }
}
@media (max-width: 1180px) {
  /* Below 1180px the right rail drops under the tank cluster so the
     tank identity stays full-width readable. */
  .decision-hero__main {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }
  .decision-hero__main > .decision-hero__rail { width: 100%; }
  .decision-hero__identity-stack {
    /* In the stacked layout the identity stack no longer needs to
       stretch to the tank's height. */
    justify-content: flex-start;
    align-self: auto;
  }
  .decision-kpi {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .decision-kpi {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}
@media (max-width: 1024px) {
  .decision-layout { grid-template-columns: 1fr; }
  .decision-final { position: static; }
}
@media (max-width: 780px) {
  .decision-hero__identity-row {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--space-3);
  }
  .decision-hero__visual { max-width: 160px; }
  .decision-hero__visual > svg,
  .decision-hero__visual img { max-height: 160px; }
  .decision-hero__supporting-facts > div { grid-template-columns: 110px 1fr; }
  .provisional-banner {
    grid-template-columns: 4px auto 1fr;
  }
  .provisional-banner__icon { width: 28px; height: 28px; }
}

/* ── Error pages (404 / 500) ───────────────────────────────── */
.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--space-8));
  padding: var(--space-6) var(--space-4);
}
.error-page__inner {
  max-width: 480px;
  text-align: center;
}
.error-page__code {
  margin: 0;
  font-family: var(--font-technical);
  font-size: 96px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.error-page__title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.error-page__message {
  margin: 0 0 var(--space-5);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.error-page__actions {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}