/* admin-views.css — per-view module styles (admin-*.js). Zero literals:
   every color/font/radius comes from admin-tokens.css. ISC-85 layer 4.
   Absorbed the legacy admin.css view-scoped rules (dissolve, ISC-84..89). */

/* ── View header extras ───────────────────────────────────────────────────── */
.header-actions .btn-primary, .header-actions .btn-secondary { white-space: nowrap; }

/* ── Dashboard stats (orders-like views) ──────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: var(--sp-6);
}
/* JS renders <div class="stat"><span>label</span><strong>value</strong></div> */
.stat span {
  display: block;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat strong {
  font: 700 28px var(--font-display);
  display: block;
  margin-top: 5px;
  letter-spacing: -0.02em;
}

/* ── Alerts panel ─────────────────────────────────────────────────────────── */
.alerts-panel {
  margin: 0 0 18px;
  padding: var(--sp-4) 18px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-xl);
  background: var(--paper);
}
.alerts-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.alerts-heading strong { display: block; margin-top: 6px; }
.alerts-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-size: var(--fs-small);
}
.alert-item button { padding: 6px 10px; font-size: var(--fs-label); }

/* ── Orders table ─────────────────────────────────────────────────────────── */
.order-summary-row { cursor: pointer; }
.order-summary-row:hover, .order-summary-row.is-expanded { background: var(--surface-2); }
.order-summary-row td { padding-top: 11px; padding-bottom: 11px; }
.order-summary-row td:last-child { text-align: right; white-space: nowrap; }
.order-summary-name, .order-summary-domain {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-expand-button { font-size: var(--fs-label); padding: 7px 10px; white-space: nowrap; }
.order-expand-button span { margin-left: 4px; font-size: 16px; line-height: 0; }
.order-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  border-radius: var(--r-pill);
  padding: 0 10px;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: 700;
  background: var(--accent-bg);
  color: var(--accent-deep);
  white-space: nowrap;
}
.order-state-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.order-state-pill.canceled::before { background: var(--ink-faint); }
.order-state-pill.RUNNING, .order-state-pill.REVISION { background: var(--accent-bg); color: var(--accent-deep); }
.order-state-pill.APPROVED, .order-state-pill.CAPTURED, .order-state-pill.DELIVERED { background: var(--ok-bg); color: var(--ok-ink); }
.order-state-pill.REJECTED, .order-state-pill.INSUFFICIENT_SIGNAL, .order-state-pill.VOIDED { background: var(--danger-bg); color: var(--danger-ink); }
.order-state-pill.QUEUED, .order-state-pill.QUALIFYING { background: var(--warn-bg); color: var(--warn-ink); }
/* Unified order state (backend-derived, ISA ISC-1..13) */
.order-state-pill.failed { background: var(--state-failed-bg); color: var(--state-failed-ink); font-weight: 700; }
.order-state-pill.qa_pending { background: var(--state-qa-bg); color: var(--state-qa-ink); }
.order-state-pill.running { background: var(--accent-bg); color: var(--accent-deep); }
.order-state-pill.payment_pending { background: var(--state-payment-bg); color: var(--state-payment-ink); }
.order-state-pill.queued { background: var(--warn-bg); color: var(--warn-ink); }
.order-state-pill.approved { background: var(--state-ok-bg); color: var(--state-ok-ink); }
.order-state-pill.delivered { background: var(--ok-ink); color: var(--white); }
.order-state-pill.canceled { background: var(--tint); color: var(--ink-muted); text-decoration: line-through; }
.order-details-row td { padding: 0 18px 18px; background: var(--surface-2); vertical-align: top; }
.order-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.order-detail-section {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  background: var(--paper);
  overflow-wrap: anywhere;
}
.order-detail-section h3 { font-size: var(--fs-label); margin: 0 0 var(--sp-3); color: var(--accent-deep); }
.order-detail-section .qa-checklist { max-width: none; }
.order-detail-section .qa-status-select { max-width: 100%; }
.order-detail-section .muted + .muted { margin-top: 7px; }

.primary-line { font-weight: 600; color: var(--ink); }
.email-retry { margin-top: 7px; padding: 5px 8px; font-size: var(--fs-eyebrow); }
.delivery-status {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
}
.delivery-status.complete { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-ink); }
.delivery-status.error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-ink-2); }
.delivery-retry { margin-top: 7px; padding: 5px 8px; font-size: var(--fs-eyebrow); }
.delivery-retry.is-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: wait;
  opacity: 0.72;
}
.danger-text {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--danger-ink);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.danger-text:hover { color: var(--danger-ink-2); }

td select {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  background: var(--paper);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  outline: none;
}
td select:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* ── QA review ────────────────────────────────────────────────────────────── */
.qa-request-label { margin-top: 8px; }
.admin-request-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-pill);
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.qa-rule {
  margin: -2px 0 14px;
  padding: 10px 13px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-2);
  font-size: var(--fs-label);
}
.qa-status-select {
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  transition: all 0.2s;
}
.qa-status-select.QUALIFYING, .qa-status-select.QUEUED { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-border); }
.qa-status-select.RUNNING, .qa-status-select.REVISION { background: var(--accent-bg); color: var(--accent-deep); border-color: var(--accent-border); }
.qa-status-select.QA_PENDING { background: var(--accent-bg); color: var(--accent-deep); border-color: var(--accent-border); }
.qa-status-select.APPROVED, .qa-status-select.CAPTURED, .qa-status-select.DELIVERED { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-border); }
.qa-status-select.REJECTED, .qa-status-select.INSUFFICIENT_SIGNAL, .qa-status-select.VOIDED { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-border); }
.qa-checklist { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; max-width: 230px; }
.qa-checklist label { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font: 600 10px/1 var(--font-mono); }
.qa-checklist input { width: 13px; height: 13px; accent-color: var(--accent); }
.qa-checklist label.passed {
  border-color: var(--ok-border);
  background: var(--ok-bg);
  color: var(--ok-ink);
}
.qa-checklist label.failed {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-ink-2);
}
.age-critical { color: var(--danger-ink); font-weight: 700; }
.age-warning { color: var(--warn-ink); font-weight: 700; }
.age-normal { color: var(--ok-ink); font-weight: 600; }

.qa-validation-status {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
}
.qa-validation-status.running {
  display: flex;
  align-items: center;
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent-deep);
}
.qa-validation-status.failed {
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-ink-2);
}
.qa-validation-retry { justify-self: start; padding: 5px 8px; font-size: var(--fs-eyebrow); }
.qa-validation-summary {
  grid-column: 1 / -1;
  max-width: 420px;
  margin-top: 5px;
  color: var(--ink-2);
  font-size: var(--fs-eyebrow);
  line-height: 1.4;
}
.qa-validation-evidence {
  grid-column: 1 / -1;
  margin-top: 5px;
  border-top: 1px solid var(--tint);
  padding-top: 7px;
  color: var(--ink-2);
}
.qa-validation-evidence summary {
  cursor: pointer;
  color: var(--accent);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
}
.qa-evidence-rule {
  margin-top: 9px;
  padding: 9px 10px;
  border-left: 3px solid var(--ok-border);
  border-radius: var(--r-sm);
  background: var(--ok-bg);
  font-size: var(--fs-eyebrow);
  line-height: 1.45;
}
.qa-evidence-rule.failed { border-left-color: var(--danger-soft); background: var(--danger-bg); }
.qa-evidence-rule strong, .qa-evidence-rule span { display: block; }
.qa-evidence-rule p { margin: 5px 0 0; }
.qa-evidence-rule ul { margin: 5px 0 0; padding-left: 18px; }

.qa-review-view { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.qa-master { display: grid; gap: 10px; }
.qa-master-head .eyebrow { margin-bottom: 4px; }
.qa-master-head h2 { margin: 0 0 4px; }
.qa-master-list { display: grid; gap: 6px; }
.qa-master-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper);
  cursor: pointer; text-align: left; font: inherit;
}
.qa-master-item:hover { border-color: var(--border-strong); }
.qa-master-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.qa-master-item .qa-age { font-size: var(--fs-label); color: var(--ink-faint); }
.qa-master-item .qa-age.late { color: var(--danger-ink); font-weight: 700; }
.qa-master-item .qa-extra { grid-column: 1 / -1; font-size: var(--fs-label); color: var(--ink-muted); }
.qa-master-empty { padding: 14px; border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--ink-muted); font-size: var(--fs-small); }

.qa-panel { display: grid; gap: 14px; }
.qa-panel-empty { padding: var(--sp-6); border: 1px dashed var(--border); border-radius: var(--r-lg); color: var(--ink-muted); text-align: center; }
.qa-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.qa-panel-head h2 { margin: 0; overflow-wrap: anywhere; }
.qa-panel-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.qa-checks { display: grid; gap: var(--sp-2); }
/* Card wrapper: the row layout lives on .check-row (admin-components.css +
   #qa-review-view overrides in admin-view-qa.css). The old flat grid here
   squeezed .check-row into a 22px track and rendered labels vertically. */
.qa-check {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper);
}
.qa-blocked-note { padding: 10px 12px; border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--danger-ink); border-radius: var(--r-md); font-size: var(--fs-small); }
.qa-report-frame-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.qa-report-frame-wrap iframe { display: block; width: 100%; height: 560px; border: 0; }
#qa-report-frame {
  width: 100%;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
}
.qa-report-action { margin-top: 8px; padding: 6px 9px; font-size: var(--fs-eyebrow); }
.qa-report-status { margin-top: 6px; font-size: var(--fs-eyebrow); color: var(--ink-muted); }
.qa-report-status.error { color: var(--danger-ink); }
.qa-report-download {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-label);
  font-weight: 700;
  text-decoration: none;
}
.qa-report-download:hover { text-decoration: none; }

/* Badge notes (Needs attention causes) */
.att-cause-note { color: var(--ok-ink); font-weight: 700; }
.att-cause-note.warn { color: var(--danger-ink); }

/* ── Report preview / share dialog ────────────────────────────────────────── */
.report-preview-dialog {
  width: min(1400px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  height: min(900px, calc(100vh - 32px));
  padding: var(--sp-5);
}
.report-preview-dialog[open] {
  display: flex;
  flex-direction: column;
}
.report-preview-actions { display: flex; align-items: center; gap: 10px; }
.report-share {
  display: grid;
  gap: 10px;
  padding: var(--sp-3) 14px;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--accent-border);
  border-radius: var(--r-lg);
  background: var(--accent-bg);
  font-size: var(--fs-small);
}
.report-share p { margin: 3px 0 0; color: var(--ink-2); }
.report-share-link { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.report-share-link input {
  flex: 1 1 230px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.report-share button { padding: 8px 11px; font-size: var(--fs-label); }
#report-share-message { color: var(--accent-deep); }

/* ── Execution log dialog ─────────────────────────────────────────────────── */
.execution-log-dialog {
  width: min(780px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: min(780px, calc(100vh - 24px));
  overflow-y: auto;
  padding: var(--sp-6);
}
.execution-log-actions { display: flex; align-items: center; gap: var(--sp-2); }
.execution-log-summary, .execution-log-upstream {
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-size: var(--fs-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.execution-log-summary strong, .execution-log-upstream strong { display: block; font-size: var(--fs-body); }
.execution-log-error { color: var(--danger-ink); }
.execution-log-events { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--accent-border); }
.execution-log-events li { position: relative; padding: 0 0 18px 17px; overflow-wrap: anywhere; }
.execution-log-events li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.execution-log-events li.is-error::before { background: var(--danger-ink); }
.execution-log-events time, .execution-log-source { color: var(--ink-muted); font-size: var(--fs-eyebrow); }
.execution-log-events p { margin: 3px 0 0; line-height: 1.5; font-size: var(--fs-small); }
.execution-log-empty { color: var(--ink-muted); padding: var(--sp-3) 0; font-size: var(--fs-small); }

/* ── Analysis rerun dialog ────────────────────────────────────────────────── */
.analysis-rerun-dialog {
  width: min(680px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: min(820px, calc(100vh - 24px));
  padding: var(--sp-6);
}
.analysis-rerun-dialog form { display: flex; flex-direction: column; gap: var(--sp-3); max-height: calc(100vh - 80px); }
.analysis-rerun-note { margin: 0; line-height: 1.5; color: var(--ink-2); font-size: var(--fs-small); }
.analysis-rerun-tools, .analysis-rerun-footer { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.analysis-rerun-tools { font-size: var(--fs-small); }
.analysis-rerun-tools span { margin-left: auto; color: var(--ink-muted); }
.analysis-rerun-options { overflow-y: auto; min-height: 80px; border: 1px solid var(--accent-border); border-radius: var(--r-lg); padding: 14px; }
.analysis-rerun-options fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.analysis-rerun-options fieldset:last-child { margin-bottom: 0; }
.analysis-rerun-options legend { font-weight: 700; font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.analysis-rerun-options label { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: var(--fs-small); cursor: pointer; }
.analysis-rerun-options input { margin-top: 2px; flex: none; }
.analysis-rerun-options label.analysis-step { align-items: center; padding: 5px 8px; margin: 0 -8px; border-radius: var(--r-sm); border-left: 3px solid transparent; }
.analysis-rerun-options label.analysis-step input { margin-top: 0; }
.analysis-rerun-options label.analysis-step.is-complete .analysis-step-name { color: var(--ink-muted); }
.analysis-rerun-options label.analysis-step.is-required { background: var(--warn-bg); border-left-color: var(--warn); }
.analysis-step-name { flex: 1; min-width: 0; }
.analysis-step-state { flex: none; font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.analysis-step-state.complete { background: var(--ok-bg); color: var(--ok-ink); }
.analysis-step-state.stale, .analysis-step-state.missing { background: var(--warn-bg); color: var(--warn-ink); }
.analysis-step-state.failed { background: var(--danger-bg); color: var(--danger-ink); }
.analysis-rerun-missing:not([hidden]) { margin: 0; padding: 10px 12px; border: 1px solid var(--warn-border); border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--fs-small); line-height: 1.5; }
#select-missing-analysis:not(:disabled) { border-color: var(--accent); color: var(--accent-deep); }
.queue-start { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin-top: 10px; font-size: var(--fs-label); }
.queue-start-error {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--danger-border); border-left: 3px solid var(--danger-ink);
  border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger-ink-2);
  line-height: 1.45; overflow-wrap: anywhere;
}
.queue-start-error strong { font-size: var(--fs-label); color: var(--danger-ink); }
.queue-start-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: var(--fs-label); }
.queue-start-button .button-spinner { width: 12px; height: 12px; }
.ucr-request-details > .queue-start { margin: 8px 0 4px; }
.analysis-rerun-confirmation:not([hidden]) { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--accent-border); border-radius: var(--r-md); padding: var(--sp-3); font-size: var(--fs-small); line-height: 1.5; }
.analysis-rerun-confirmation input { margin-top: 3px; flex: none; }
.analysis-rerun-footer { justify-content: flex-end; }

/* ── Pipeline: KPI cards + drawer ─────────────────────────────────────────── */
.pipeline-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pipeline-kpi {
  display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--paper); text-align: left; cursor: pointer; font: inherit;
}
.pipeline-kpi:hover { border-color: var(--border-strong); }
.pipeline-kpi.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pipeline-kpi .kpi-value { font: 700 22px/1.1 var(--font-display); }
.pipeline-kpi .kpi-label { font-size: var(--fs-label); color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.pipeline-kpi .kpi-eta { font-size: 11.5px; color: var(--ink-faint); }
.pipeline-table td, .pipeline-table th { vertical-align: middle; }
.pipeline-table .domain-cell { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-table .truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-row { cursor: pointer; }
.pipeline-row:hover td { background: var(--surface-2); }
.row-eta { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

/* Slide-in behaviour; box styles live in components .drawer */
.pipeline-drawer {
  transform: translateX(105%);
  transition: transform .18s ease;
}
.pipeline-drawer.open { transform: none; }
.drawer-close { border: 0; background: transparent; font-size: 20px; color: var(--ink-muted); cursor: pointer; line-height: 1; }
.drawer-body { overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-8); display: grid; gap: var(--sp-4); align-content: start; }
.drawer-timeline { display: grid; gap: 0; }
.drawer-event { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--tint-2); }
.drawer-event .ev-ts { font-size: var(--fs-label); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.drawer-event .ev-action { font-weight: 600; }
.drawer-event .ev-detail { font-size: var(--fs-small); color: var(--ink-muted); }
.drawer-event .ev-reason { font-size: var(--fs-label); color: var(--ink-faint); }
.drawer-event .ev-actor { font-size: var(--fs-eyebrow); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.drawer-csv { justify-self: start; }
.drawer-log-detail {
  font: 12px/1.5 var(--font-mono);
  color: var(--ink-muted);
  background: var(--surface-2);
  border: 1px solid var(--tint-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── UCR intake / requests ────────────────────────────────────────────────── */
.ucr-requests-view { display: grid; gap: 22px; margin-bottom: 36px; }
.ucr-progress {
  margin-top: 9px;
  width: min(260px, 100%);
  padding: 9px 10px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  background: var(--accent-bg);
  color: var(--accent-deep);
  font-size: var(--fs-label);
  line-height: 1.3;
}
.ucr-progress-main { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.ucr-progress-meta { margin: 4px 0 0 20px; color: var(--ink-muted); font-size: var(--fs-eyebrow); }
.ucr-progress.complete { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-ink); }
.ucr-progress.failed { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-ink); }
.ucr-progress.existing { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); }
.ucr-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.ucr-intake-card, .ucr-requests-list, .ucr-intake-note {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.ucr-intake-card { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(320px, 1.1fr); gap: var(--sp-8); padding: 26px; }
.ucr-intake-card h2, .ucr-list-heading h2 { margin: 8px 0; }
.ucr-intake-card .muted { line-height: 1.6; max-width: 420px; }
.ucr-request-form { display: grid; gap: 10px; }
.ucr-request-form label { font-weight: 700; font-size: var(--fs-small); }
.ucr-request-form textarea, .ucr-request-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 11px 12px;
  font: inherit;
  resize: vertical;
}
.ucr-request-form :is(textarea, input):focus { box-shadow: var(--ring); border-color: var(--accent); }
.ucr-form-footer, .ucr-list-heading, .ucr-list-actions, .ucr-request-item, .ucr-request-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ucr-form-footer { justify-content: space-between; flex-wrap: wrap; }
#ucr-form-message { font-size: var(--fs-small); color: var(--ok-ink); }
.ucr-list-heading { justify-content: space-between; flex-wrap: wrap; }
.ucr-intake-note { margin: 0; padding: var(--sp-3) var(--sp-4); color: var(--ink-2); line-height: 1.5; font-size: var(--fs-small); }
.ucr-requests-list { overflow: hidden; }
.ucr-request-item { padding: 18px 20px; border-bottom: 1px solid var(--tint); align-items: flex-start; flex-wrap: wrap; }
.ucr-request-item:last-child { border-bottom: 0; }
.ucr-request-position { flex: 0 0 106px; font-size: var(--fs-label); font-weight: 700; color: var(--warn-ink); padding-top: 3px; }
.ucr-request-position.in_progress { color: var(--accent-deep); }
.ucr-request-position.completed { color: var(--ok-ink); }
.ucr-request-position.cancelled { color: var(--ink-muted); }
.ucr-request-details { flex: 1; min-width: 220px; overflow-wrap: anywhere; }
.ucr-request-note { margin: 8px 0 0; font-size: var(--fs-small); color: var(--ink-2); white-space: pre-wrap; }
.ucr-request-actions { margin-left: auto; flex-wrap: wrap; }
.ucr-request-actions button { font-size: var(--fs-label); padding: 8px 10px; }
.ucr-request-expanded { margin-top: 9px; }
.ucr-request-expanded summary { color: var(--accent-deep); font-size: var(--fs-label); width: fit-content; }
.ucr-request-expanded-content { padding: 12px 0 2px; }
.ucr-request-expanded .ucr-request-actions { margin: 12px 0 0; }
.ucr-order-progress { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 10px; color: var(--accent-deep); font-size: var(--fs-label); }
.ucr-order-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: 9px; }
.ucr-order-links button { padding: 6px 9px; font-size: var(--fs-eyebrow); }

/* Intake: per-line validation + capacity */
.ucr-validation { display: grid; gap: 3px; margin-top: 6px; font-size: var(--fs-small); }
.ucr-validation .val-line { display: flex; gap: var(--sp-2); align-items: baseline; }
.ucr-validation .val-line.ok::before { content: "✓"; color: var(--ok-ink); font-weight: 700; }
.ucr-validation .val-line.warn::before { content: "⚠"; color: var(--warn); font-weight: 700; }
.ucr-validation .val-line.err::before { content: "✕"; color: var(--danger-ink); font-weight: 700; }
.ucr-validation .val-line.warn .val-text { color: var(--warn-ink); }
.ucr-validation .val-line.err .val-text { color: var(--danger-ink); }
.ucr-capacity { margin: 10px 0 6px; display: grid; gap: 6px; }
.ucr-capacity-track { height: 10px; border-radius: var(--r-sm); background: var(--tint); overflow: hidden; }
.ucr-capacity-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-sm); transition: width .2s; }
.ucr-capacity-text { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }

/* ── UCR directory ────────────────────────────────────────────────────────── */
.ucr-directory-view { display: grid; gap: var(--sp-4); margin-bottom: 36px; }
.ucr-directory-heading {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-6);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.ucr-directory-heading h2 { margin: 8px 0; }
.ucr-directory-heading p { margin: 0; }
.ucr-directory-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); }
.ucr-directory-toolbar label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.ucr-directory-toolbar input { width: 100%; }
.ucr-directory-list { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.ucr-directory-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-5); padding: 17px 20px; border-bottom: 1px solid var(--tint);
  cursor: pointer; transition: background 120ms ease;
}
.ucr-directory-item:hover, .ucr-directory-item:focus-visible { background: var(--surface-3); outline: none; }
.ucr-directory-item:last-child { border-bottom: 0; }
.ucr-directory-identity, .ucr-directory-details { display: flex; flex-direction: column; gap: 5px; }
.ucr-directory-identity strong { font-size: var(--fs-item); }
.ucr-directory-identity span, .ucr-directory-identity small { color: var(--ink-muted); overflow-wrap: anywhere; }
.ucr-directory-details { align-items: flex-end; text-align: right; font-size: var(--fs-small); color: var(--ink-muted); }
.ucr-directory-v21.is-saved { color: var(--accent-deep); font-weight: 700; }
.ucr-directory-open { color: var(--accent-deep); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
.ucr-directory-empty { padding: 28px; text-align: center; color: var(--ink-muted); }
.ucr-directory-pager { display: flex; gap: var(--sp-3); align-items: center; justify-content: flex-end; margin-top: var(--sp-3); }
.ucr-directory-table { width: 100%; border-collapse: collapse; }
.ucr-directory-table th {
  padding: 10px var(--sp-5); background: var(--surface-2); border-bottom: 1px solid var(--tint-2);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; color: var(--ink-muted);
  text-align: left; text-transform: uppercase; white-space: nowrap;
}
.ucr-directory-table td { padding: 12px var(--sp-5); border-bottom: 1px solid var(--tint); font-size: var(--fs-small); }
.ucr-directory-table tbody tr:last-child td { border-bottom: 0; }
.ucr-directory-row { cursor: pointer; }
.ucr-directory-row:hover td { background: var(--surface-2); }

/* ── UCR detail view ──────────────────────────────────────────────────────── */
.ucr-detail-view { display: grid; gap: var(--sp-4); margin-bottom: 36px; }
.ucr-detail-heading {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-6);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.ucr-detail-heading h2 { margin: 8px 0; }
.ucr-detail-heading p { margin: 0; }
.ucr-detail-heading #ucr-detail-back { margin-bottom: var(--sp-3); }
.ucr-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.ucr-detail-body { display: grid; gap: var(--sp-4); }
.ucr-detail-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6); display: grid; gap: var(--sp-3);
}
.ucr-detail-card h3 { margin: 0; }
.ucr-detail-identity { display: grid; gap: 6px; }
.ucr-detail-identity strong { font-size: var(--fs-h3); }
.ucr-detail-identity a { color: var(--accent-deep); overflow-wrap: anywhere; }
.ucr-detail-identity small { color: var(--ink-muted); }
.ucr-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin: 0; }
.ucr-detail-meta div { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; }
.ucr-detail-meta dt { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.ucr-detail-meta dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.ucr-detail-v21 { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 3px; }
.ucr-detail-v21.is-saved { border-color: var(--accent-border); background: var(--accent-bg); }
.ucr-detail-v21.is-saved strong { color: var(--accent-deep); }
.ucr-detail-v21 span { font-size: var(--fs-small); color: var(--ink-muted); }
.ucr-detail-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.ucr-detail-label { flex: 0 0 150px; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.ucr-detail-details { color: var(--ink-muted); }
.ucr-detail-details summary { cursor: pointer; font-weight: 600; color: var(--accent-deep); }
.ucr-detail-details p { line-height: 1.6; color: var(--ink-2); }
.ucr-detail-note {
  margin: 0; font-size: var(--fs-small); color: var(--warn-ink);
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--r-md); padding: 10px 12px;
}
.ucr-detail-empty, .ucr-detail-error {
  padding: 28px; text-align: center; color: var(--ink-muted);
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.ucr-detail-error { color: var(--danger-ink); }
.ucr-count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.ucr-count { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 12px; display: grid; gap: 2px; }
.ucr-count strong { font-size: var(--fs-h2); }
.ucr-count span { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.ucr-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--tint); border: 1px solid var(--border-soft); font-size: var(--fs-label); color: var(--ink-2);
}
.ucr-chip.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); }
.ucr-chip.bad { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-ink); }
.ucr-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ucr-module-list { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.ucr-module-row { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-small); padding: 6px 8px; border-bottom: 1px solid var(--tint); }
.ucr-module-row:last-child { border-bottom: 0; }
.ucr-module-row code { color: var(--ink-2); overflow-wrap: anywhere; }
.ucr-module-row.ok code { color: var(--ok-ink); }
.ucr-pipeline-list { display: grid; gap: 10px; max-height: 360px; overflow-y: auto; }
.ucr-pipeline-event { border-left: 3px solid var(--border-strong); padding: 4px 0 4px 12px; display: grid; gap: 3px; }
.ucr-pipeline-event.bad { border-left-color: var(--danger-soft); }
.ucr-pipeline-event time { font-size: var(--fs-eyebrow); color: var(--ink-faint); }
.ucr-pipeline-event strong { font-size: var(--fs-small); }
.ucr-pipeline-event p { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }
.ucr-pipeline-phase { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .04em; color: var(--accent-deep); }

/* ── Templates page ───────────────────────────────────────────────────────── */
.templates-view { display: grid; gap: 14px; }
.templates-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--paper); width: fit-content; }
.templates-tabs button { padding: 9px 18px; border: 0; background: transparent; font: 600 13px var(--font-body); color: var(--ink-muted); cursor: pointer; }
.templates-tabs button[aria-selected="true"] { background: var(--accent-deep); color: var(--white); }
.template-sample { margin-top: 10px; }
.template-sample select { max-width: 100%; }
.template-tip { font-size: var(--fs-small); color: var(--ink-muted); }
.template-success { min-height: 20px; color: var(--ok-ink); font-size: var(--fs-small); }
.template-dialog { width: min(1180px, calc(100% - 32px)); max-width: calc(100% - 32px); }
.template-variables {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: 18px;
  color: var(--ink-2);
  font-size: var(--fs-label);
}
.template-variables code {
  padding: 5px 8px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-sm);
  background: var(--accent-bg);
  color: var(--accent-deep);
}
.template-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr);
  gap: var(--sp-5);
}
.template-editor { display: grid; gap: 14px; }
.template-editor label { display: grid; gap: 7px; font-weight: 700; font-size: var(--fs-small); }
.template-editor input,
.template-editor textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 11px 12px;
  outline: none;
  resize: vertical;
}
.template-editor textarea { font: 12px/1.5 var(--font-mono); }
.template-editor input:focus,
.template-editor textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
.template-preview {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: var(--sp-3);
}
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.preview-toolbar button { padding: 7px 10px; font-size: var(--fs-label); }
.preview-subject { margin: 12px 0 8px; padding: 9px 10px; border-radius: var(--r-sm); background: var(--white); font-weight: 700; }
#template-preview-frame { width: 100%; height: 440px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--white); }
#template-preview-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--font-mono); }
.template-message { grid-column: 1 / -1; margin: 0; }
.template-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

/* ── Users page ───────────────────────────────────────────────────────────── */
.users-page { display: grid; gap: 14px; }
.users-invite { display: grid; gap: 10px; }
.users-invite .invite-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--tint-2); font-size: var(--fs-small); }
.users-table th { font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.role-chip { border-radius: var(--r-pill); padding: 2px 9px; font: 700 11px var(--font-body); }
.role-chip.admin { background: var(--accent-bg); color: var(--accent-deep); }
.role-chip.operator { background: var(--accent-bg); color: var(--accent-deep); }
.role-chip.qa { background: var(--warn-bg); color: var(--warn-ink); }
.user-status { font-size: var(--fs-label); }
.user-status.inactive { color: var(--danger-ink); }
/* Legacy account rows still emitted by admin.js */
.new-user {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin: var(--sp-5) 0;
}
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--tint);
  padding: var(--sp-4) 0;
}
.user-row small { color: var(--ink-muted); font-size: var(--fs-small); }

/* ── Needs attention ──────────────────────────────────────────────────────── */
.attention-view { display: grid; gap: var(--sp-4); margin-bottom: 36px; }
.attention-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.attention-card.failed-block { border-left: 4px solid var(--danger-ink); }
.attention-card.qa-block { border-left: 4px solid var(--warn); }
.attention-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--tint); flex-wrap: wrap;
}
.attention-head h2 { margin: 0; font-size: var(--fs-item); }
.attention-head .sp { flex: 1; }
.attention-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 600; }
.attention-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.attention-badge.failed { background: var(--danger-bg); color: var(--danger-ink); }
.attention-badge.qa { background: var(--warn-bg); color: var(--warn-ink); }
.attention-threshold { font-size: var(--fs-small); color: var(--ink-faint); }
.attention-row {
  display: grid; grid-template-columns: 24px minmax(140px, 1.1fr) 2fr 110px 120px;
  gap: var(--sp-3); align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--tint);
}
.attention-row:last-child { border-bottom: 0; }
.attention-row .att-domain { font-weight: 700; }
.attention-row .att-cause { color: var(--ink-muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-row .att-age { font-size: var(--fs-small); color: var(--ink-muted); white-space: nowrap; }
.attention-row .att-age.late { color: var(--danger-ink); font-weight: 700; }
.attention-row .att-act { text-align: right; }
.attention-empty { padding: 22px; text-align: center; color: var(--ink-faint); }

/* ── Monitor view ─────────────────────────────────────────────────────────── */
.monitor-view { display: grid; gap: 18px; min-width: 0; }
.monitor-view > *, .monitor-section > *, .monitor-two > * { min-width: 0; }
.monitor-view h2 { font-size: 22px; margin: 0; }
.monitor-view h3 { font: 700 15px var(--font-display); margin: 0 0 10px; }
.monitor-view .muted { margin-top: 0; }
.monitor-view .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.monitor-health { background: var(--paper); border: 1px solid var(--border); border-left: 5px solid var(--ok-ink); border-radius: var(--r-xl); padding: 18px 22px; }
.monitor-health.warn { border-left-color: var(--warn); }
.monitor-health.bad { border-left-color: var(--danger-ink); }
.monitor-health-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: 14px; }
.monitor-health-head h2 { margin-top: 6px; }
.monitor-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.monitor-health-grid h3 { font: 600 11px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin: 0 0 6px; }
.monitor-health-grid p { margin: 0; line-height: 1.5; font-size: var(--fs-body); }
.monitor-error-text { color: var(--danger-ink); margin: 0; }
.monitor-failed { margin-top: var(--sp-4); padding-top: 14px; border-top: 1px dashed var(--border); display: grid; gap: var(--sp-2); }
.monitor-failed-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-body); }
.monitor-failed-head span { color: var(--ink-muted); font-weight: 500; }
.monitor-failed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.monitor-failed li { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-small); padding: 6px 10px; border-radius: var(--r-sm); background: var(--danger-bg); }
.monitor-failed li span:nth-child(2) { color: var(--danger-ink); overflow-wrap: anywhere; }
.monitor-failed p { margin: 0; font-size: var(--fs-small); }
.monitor-link { background: transparent; color: var(--accent-deep); padding: 0; border-radius: var(--r-xs); font: inherit; font-weight: 700; font-size: var(--fs-small); cursor: pointer; text-align: left; }
.monitor-link:hover { opacity: 1; text-decoration: underline; }
.monitor-link.strong { color: var(--ink); font-size: inherit; }
.monitor-run h3 .monitor-link { font: inherit; }
.monitor-latest { margin-top: 4px; font-size: var(--fs-label); color: var(--ink-muted); }
.monitor-latest .monitor-link { font-size: var(--fs-label); }
.monitor-section.is-empty { gap: var(--sp-1); }
.monitor-section.is-empty .monitor-heading p { display: none; }
.monitor-section.is-empty .monitor-heading h2 { font-size: 17px; }
.monitor-empty-line { margin: 0; padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--r-lg); background: var(--paper); color: var(--ink-muted); font-size: var(--fs-small); }
.monitor-empty-line .monitor-link { margin-left: 6px; }
.monitor-split { display: flex; height: 16px; border-radius: var(--r-sm); overflow: hidden; background: var(--tint); gap: 2px; }
.monitor-split span { display: block; height: 100%; min-width: 3px; }
.monitor-split .pipeline { background: var(--ink-faint); }
.monitor-split .capacity { background: var(--warn); }
.monitor-split .people { background: var(--accent); }
#monitor-lead { display: grid; gap: var(--sp-3); }
#monitor-lead .monitor-legend { margin-top: 10px; }

.monitor-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.monitor-window { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.monitor-window button { background: transparent; color: var(--ink); border-radius: 0; padding: 8px 14px; font-size: var(--fs-small); }
.monitor-window button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.monitor-updated { color: var(--ink-muted); font-size: var(--fs-small); margin-right: auto; }

.monitor-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.monitor-kpi { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; display: grid; gap: var(--sp-1); align-content: start; }
.monitor-kpi span { color: var(--ink-muted); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.monitor-kpi strong { font: 700 28px var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.monitor-kpi small { color: var(--ink-muted); font-size: var(--fs-label); line-height: 1.35; }
.monitor-kpi.ok strong { color: var(--ok-ink); }
.monitor-kpi.warn strong { color: var(--warn-ink); }
.monitor-kpi.bad strong { color: var(--danger-ink); }

.monitor-section { display: grid; gap: var(--sp-3); margin-top: 10px; }
.monitor-heading p { margin: 4px 0 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; max-width: 760px; }
.monitor-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--sp-4) 18px; min-width: 0; }
.monitor-card.flush { padding: 0; }
.monitor-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.monitor-empty { background: var(--paper); border: 1px dashed var(--border); border-radius: var(--r-lg); padding: 18px; color: var(--ink-muted); font-size: var(--fs-body); }
.monitor-empty-inline { color: var(--ink-muted); font-size: var(--fs-small); margin: 0; }
.monitor-footnote { color: var(--ink-muted); font-size: var(--fs-small); margin: 6px 2px 0; }

.monitor-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 3px 10px; font-size: var(--fs-label); font-weight: 700; white-space: nowrap; background: var(--tint-2); color: var(--ink-2); }
.monitor-chip i { width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; }
.monitor-chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.monitor-chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.monitor-chip.bad { background: var(--danger-bg); color: var(--danger-ink); }
.monitor-chip.neutral { background: var(--accent-bg); color: var(--accent-deep); }

.monitor-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.monitor-run { background: var(--paper); border: 1px solid var(--border); border-top: 4px solid var(--ok-ink); border-radius: var(--r-xl); padding: var(--sp-4) 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.monitor-run.warn { border-top-color: var(--warn); }
.monitor-run.bad { border-top-color: var(--danger-ink); }
.monitor-run-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-label); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.monitor-run h3 { font-size: var(--fs-h2); margin: 0; overflow-wrap: anywhere; }
.monitor-run-position { margin: -6px 0 0; color: var(--ink-muted); font-size: var(--fs-small); }
.monitor-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.monitor-stages li { display: grid; gap: 5px; min-width: 0; }
.monitor-stages .seg { position: relative; display: block; height: 10px; border-radius: var(--r-xs); background: var(--tint); overflow: hidden; }
.monitor-stages .seg i { position: absolute; inset: 0 auto 0 0; background: var(--ok-ink); }
.monitor-stages .current .seg { background: var(--warn-bg); box-shadow: inset 0 0 0 1.5px var(--warn); }
.monitor-stages .current .seg i { background: var(--warn); }
.monitor-stages .reused .seg, .monitor-stages .skipped .seg { background: repeating-linear-gradient(135deg, var(--border-soft) 0 3px, var(--surface-2) 3px 6px); }
.monitor-stages-wrap { display: grid; gap: 6px; }
.monitor-stage-caption { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--ink-faint); }
.monitor-stage-caption .done { color: var(--ok-ink); }
.monitor-stage-caption .current { color: var(--warn-ink); font-weight: 700; }
.monitor-stage-caption .reused, .monitor-stage-caption .skipped { text-decoration: line-through; }
.monitor-steptime-label { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: var(--fs-small); margin-bottom: 7px; }
.monitor-steptime-label span { color: var(--ink-muted); }
.monitor-range { position: relative; height: 12px; border-radius: var(--r-sm); background: var(--tint); }
.monitor-range .band { position: absolute; top: 0; bottom: 0; border-radius: var(--r-sm); background: var(--ink); opacity: .55; }
.monitor-range .timeout { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -3px; border-radius: var(--r-xs); background: var(--danger-ink); }
.monitor-range .now { position: absolute; top: -4px; width: 20px; height: 20px; margin-left: -10px; border-radius: var(--r-pill); background: var(--ok-ink); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--border); }
.monitor-range .now.warn { background: var(--warn); }
.monitor-range .now.bad { background: var(--danger-ink); }
.monitor-range-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-muted); margin-top: 7px; font-variant-numeric: tabular-nums; }
.monitor-range-scale strong { color: var(--ink); }
.monitor-range-scale .timeout-label { color: var(--danger-ink); font-weight: 600; }
.monitor-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--tint-2); border-radius: var(--r-md); overflow: hidden; }
.monitor-facts div { padding: 8px 10px; border-right: 1px solid var(--tint-2); min-width: 0; }
.monitor-facts div:last-child { border-right: 0; }
.monitor-facts dt { font-size: var(--fs-eyebrow); font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.monitor-facts dd { margin: 3px 0 0; font: 700 15px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.monitor-run-error { margin: 0; font-size: var(--fs-small); color: var(--danger-ink); background: var(--danger-bg); border-radius: var(--r-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.monitor-log-button { justify-self: start; padding: 7px 12px; font-size: var(--fs-small); }

.monitor-subhead { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin: 6px 0 8px; }
.monitor-subhead h3 { margin: 0; }
.monitor-subhead span { color: var(--ink-muted); font-size: var(--fs-small); margin-right: auto; }
.monitor-subhead button { padding: 7px 12px; font-size: var(--fs-small); }

.monitor-scroll { overflow-x: auto; position: relative; }
.monitor-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--paper); font-size: var(--fs-small); }
.monitor-queue .monitor-scroll { border: 1px solid var(--border); border-radius: var(--r-lg); }
.monitor-table th { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--tint); text-align: left; white-space: nowrap; }
.monitor-table td { padding: 10px 14px; border-bottom: 1px solid var(--tint); vertical-align: middle; }
.monitor-table tbody tr:last-child td { border-bottom: 0; }
.monitor-table.compact { min-width: 420px; }
.monitor-table.compact th, .monitor-table.compact td { padding: 8px; }
.monitor-table.compact td:nth-child(2) { width: 34%; }
.monitor-table tr.total td { background: var(--surface-2); font-weight: 700; }
.monitor-table .muted { font-size: var(--fs-label); }
.monitor-sample {
  font: 12px/1.4 var(--font-mono); color: var(--ink-muted); margin-top: 3px;
  max-width: 320px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.monitor-table .monitor-chip { white-space: normal; }
.monitor-outcomes { white-space: nowrap; }
.monitor-outcomes .monitor-chip + .monitor-chip { margin-left: 4px; }
.monitor-run-row { cursor: pointer; }
.monitor-run-row:hover td { background: var(--surface-2); }

.monitor-bar { position: relative; display: block; height: 10px; border-radius: var(--r-sm); background: var(--tint); overflow: hidden; min-width: 80px; }
.monitor-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-sm); }
.monitor-bar i.p90 { background: var(--border-strong); }
.monitor-bar i.p50 { background: var(--ink-faint); }
.monitor-bar.bad i.p90 { background: var(--danger-soft); }
.monitor-bar.bad i.p50 { background: var(--danger-ink); }
.monitor-bar.people i.p50 { background: var(--accent); }
.legend-swatch { display: inline-block; width: 12px; height: 8px; border-radius: var(--r-xs); vertical-align: 0; }
.legend-swatch.p50 { background: var(--ink-faint); }
.legend-swatch.p90 { background: var(--border-strong); }

.monitor-callout { display: grid; gap: var(--sp-1); border-left: 4px solid var(--accent); background: var(--accent-bg); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 12px 16px; font-size: var(--fs-small); line-height: 1.5; margin-top: var(--sp-3); }
.monitor-callout strong { font: 700 16px/1.35 var(--font-display); }
.monitor-callout span { color: var(--ink-2); }
.monitor-callout.warn { border-left-color: var(--danger-ink); background: var(--danger-bg); }

.monitor-timeline { display: grid; gap: var(--sp-2); min-width: 0; }
.monitor-axis, .monitor-lane { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: center; }
.monitor-lane-label { font-size: var(--fs-label); font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.monitor-axis-track { position: relative; height: 16px; }
.monitor-axis-track span { position: absolute; transform: translateX(-50%); font-size: var(--fs-eyebrow); color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.monitor-axis-track span.now { transform: translateX(-100%); font-weight: 700; color: var(--ink); }
.monitor-lane-track { position: relative; height: 30px; border-radius: var(--r-sm); background: var(--tint); }
.monitor-lane-track.queue { height: 16px; }
.monitor-lane-bar {
  position: absolute; top: 4px; bottom: 4px; min-width: 3px; border: 0; border-radius: var(--r-xs);
  padding: 0 6px; font: 600 11px/22px var(--font-body); color: var(--white);
  text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; background: var(--ink-faint);
}
.monitor-lane-bar.complete { background: var(--ok-ink); }
.monitor-lane-bar.stopped { background: repeating-linear-gradient(45deg, var(--danger-ink) 0 6px, var(--danger-ink-2) 6px 9px); }
.monitor-lane-bar.running { background: var(--accent-strong); }
.monitor-lane-track.queue .monitor-lane-bar { top: 3px; bottom: 3px; padding: 0; cursor: default; }
.monitor-lane-bar.waiting { background: var(--warn); }
.monitor-lane-bar.idle { background: repeating-linear-gradient(135deg, var(--danger-ink) 0 4px, var(--danger-soft) 4px 8px); }
.monitor-lane-bar:hover { filter: brightness(1.08); }
.monitor-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-small); color: var(--ink-muted); margin-top: var(--sp-3); }
.monitor-legend i { display: inline-block; width: 14px; height: 10px; border-radius: var(--r-xs); margin-right: 6px; vertical-align: -1px; }
.monitor-legend i.complete { background: var(--ok-ink); }
.monitor-legend i.stopped { background: repeating-linear-gradient(45deg, var(--danger-ink) 0 4px, var(--danger-ink-2) 4px 6px); }
.monitor-legend i.running { background: var(--accent-strong); }
.monitor-legend i.pipeline { background: var(--ink-faint); }
.monitor-legend i.capacity { background: var(--warn); }
.monitor-legend i.people { background: var(--accent); }
.monitor-legend i.waiting { background: var(--warn); }
.monitor-legend i.idle { background: repeating-linear-gradient(135deg, var(--danger-ink) 0 3px, var(--danger-soft) 3px 6px); }

/* ── Docs / Guide ─────────────────────────────────────────────────────────── */
.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.docs-side { position: sticky; top: 16px; display: grid; gap: 14px; }
.docs-search input { width: 100%; }
.docs-index { display: grid; gap: var(--sp-3); }
.docs-index-group h3 { margin: 0 0 6px; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.docs-index-group a { display: block; padding: 3px 0; color: var(--accent-deep); text-decoration: none; font-size: var(--fs-small); }
.docs-index-group a:hover { text-decoration: underline; }
.docs-content { max-width: 720px; display: grid; gap: 10px; }
.docs-content h1 { font: 700 26px/1.25 var(--font-display); margin: 0 0 4px; }
.docs-content h2 { font: 700 19px/1.3 var(--font-display); margin: 22px 0 8px; border-top: 1px solid var(--tint-2); padding-top: 18px; }
.docs-content h2:first-of-type { border-top: 0; padding-top: 0; }
.docs-content p { margin: 6px 0; line-height: 1.55; font-size: var(--fs-item); }
.docs-content ol, .docs-content ul { margin: 6px 0; padding-left: 22px; line-height: 1.55; font-size: var(--fs-item); }
.docs-content li { margin: 3px 0; }
.docs-content table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: var(--fs-small); }
.docs-content th, .docs-content td { border: 1px solid var(--border); padding: 7px 10px; text-align: left; }
.docs-content th { background: var(--surface-2); }
.docs-content code { background: var(--surface-2); border: 1px solid var(--tint-2); border-radius: var(--r-xs); padding: 1px 5px; font-size: var(--fs-small); }
.docs-content a { color: var(--accent-deep); }
.docs-search-empty { color: var(--ink-faint); font-size: var(--fs-small); }
.docs-topic-target { scroll-margin-top: 20px; }

/* ── Ask chat ─────────────────────────────────────────────────────────────── */
.ask-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  border: 0; border-radius: var(--r-pill); padding: 12px 20px;
  background: var(--accent); color: var(--white); font: 700 14px var(--font-body); cursor: pointer;
  box-shadow: var(--shadow-pop);
}
.ask-fab:hover { background: var(--accent-deep); }
.ask-panel {
  position: fixed; right: 22px; bottom: 78px; z-index: 61; width: min(380px, 92vw);
  display: grid; grid-template-rows: auto 1fr auto; max-height: 62dvh;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.ask-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--tint-2); }
.ask-head strong { font: 700 14px var(--font-body); }
.ask-close { border: 0; background: transparent; font-size: 18px; color: var(--ink-muted); cursor: pointer; }
.ask-body { overflow: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.ask-examples { display: grid; gap: 6px; }
.ask-example {
  border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--paper); color: var(--accent-deep);
  padding: 8px 10px; font-size: var(--fs-small); text-align: left; cursor: pointer;
}
.ask-example:hover { border-color: var(--accent-deep); }
.ask-msg { max-width: 88%; padding: 9px 12px; border-radius: var(--r-lg); font-size: var(--fs-small); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-msg.user { justify-self: end; background: var(--accent); color: var(--white); }
.ask-msg.assistant { justify-self: start; background: var(--accent-bg); color: var(--ink); }
.ask-msg.assistant.error { background: var(--danger-bg); color: var(--danger-ink); }
.ask-input-row { display: flex; gap: var(--sp-2); padding: 10px 12px; border-top: 1px solid var(--tint-2); }
.ask-input-row input { flex: 1; }
.ask-msg a { color: inherit; text-decoration: underline; }
.ask-msg code { background: var(--ink-alpha-06); border-radius: var(--r-xs); padding: 0 4px; font-size: var(--fs-small); }
.ask-msg.assistant a { color: var(--accent-deep); }

/* Ask action cards — proposed actions awaiting operator confirmation
   (ISA-ask-copilot ISC-16/20/22). */
.ask-action {
  justify-self: start; max-width: 92%; display: grid; gap: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper);
  padding: 10px 12px; font-size: var(--fs-small); color: var(--ink);
}
.ask-action-desc { display: grid; gap: 2px; }
.ask-action-risk { color: var(--danger-ink); font-size: var(--fs-label); }
.ask-action-buttons { display: flex; gap: var(--sp-2); align-items: center; }
.ask-action-confirm {
  border: 0; border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer;
  background: var(--accent); color: var(--white); font: 600 12.5px var(--font-body);
}
.ask-action-confirm:disabled { opacity: .6; cursor: default; }
.ask-action-cancel {
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--ink); font-size: var(--fs-small);
}
.ask-action-cancel:disabled { opacity: .6; cursor: default; }
.ask-action-status { font-size: var(--fs-label); color: var(--ink-muted); }
.ask-action.done { opacity: .75; }

/* ── Shortcuts overlay ────────────────────────────────────────────────────── */
.shortcuts-overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: var(--ink-alpha-40); padding: var(--sp-5);
}
.shortcuts-overlay:not([open]) { display: none; }
.shortcuts-card { width: min(520px, 94vw); background: var(--paper); border-radius: var(--r-xl); padding: 20px 24px; box-shadow: var(--shadow-pop); }
.shortcuts-card h2 { margin: 0 0 12px; }
.shortcuts-card table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.shortcuts-card td { padding: 7px 6px; border-bottom: 1px solid var(--tint-2); }
.shortcuts-card td:first-child { width: 96px; }
.shortcuts-card code { background: var(--surface-2); border: 1px solid var(--tint-2); border-radius: var(--r-xs); padding: 1px 7px; font-size: var(--fs-small); }
.shortcuts-close { float: right; border: 0; background: transparent; font-size: 20px; color: var(--ink-muted); cursor: pointer; }

/* ── Micro-didáctica ──────────────────────────────────────────────────────── */
.micro-hint {
  display: grid; gap: 2px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--paper); font-size: var(--fs-small); color: var(--ink-muted); margin: 6px 0;
}
.micro-hint a { color: var(--accent-deep); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .monitor-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .monitor-two { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .qa-review-view { grid-template-columns: 1fr; }
  .qa-master { max-height: 260px; overflow: auto; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-side { position: static; }
  .monitor-axis-track span.minor { display: none; }
}
@media (max-width: 800px) {
  .ucr-intake-card { grid-template-columns: 1fr; gap: var(--sp-4); }
  .stats { grid-template-columns: 1fr 1fr; }
  .new-user { grid-template-columns: 1fr; }
  .template-layout { grid-template-columns: 1fr; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .attention-row { grid-template-columns: 24px 1fr auto; }
  .attention-row .att-cause, .attention-row .att-age { grid-column: 2 / -1; }
}
@media (max-width: 700px) {
  .monitor-health-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .monitor-axis, .monitor-lane { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .monitor-axis > .monitor-lane-label { display: none; }
  .monitor-failed li { grid-template-columns: minmax(0, 1fr) auto; }
  .monitor-failed li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .monitor-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-live { grid-template-columns: 1fr; }
  .monitor-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-facts div:nth-child(2) { border-right: 0; }
  .monitor-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--tint-2); }
  .monitor-updated { width: 100%; order: 3; }
  .pipeline-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer-event { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .ucr-directory-item { align-items: flex-start; flex-direction: column; }
  .ucr-directory-details { align-items: flex-start; text-align: left; }
  .order-details-row { margin-bottom: var(--sp-3); }
  .table-card tr:not(.order-details-row) td:last-child { border-bottom: 0; text-align: right; }
  .table-card .order-summary-name, .table-card .order-summary-domain { max-width: 100%; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
}

/* ── Demand Intelligence view ─────────────────────────────────────────────── */
.demand-view .card { padding: var(--sp-5); }
.demand-header h2 { margin: 0 0 6px; font-size: 22px; }
.demand-form { display: flex; gap: var(--sp-3); align-items: flex-end; margin: var(--sp-4) 0; flex-wrap: wrap; }
.demand-input { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; font-size: 13px; color: var(--ink-muted); }
.demand-input input { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font: inherit; }
.demand-check { flex: 0 0 auto; min-width: 160px; }
.demand-check input { width: 18px; height: 18px; accent-color: var(--accent, #2563eb); cursor: pointer; }
.demand-status { padding: 10px 14px; border-radius: var(--r-md); background: var(--tint-1); font-size: 13px; margin-bottom: var(--sp-4); }
.demand-status.error { background: #fff0f0; color: #b42318; }
.demand-subhead { font-size: 15px; margin: var(--sp-5) 0 var(--sp-3); }
.demand-grid { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Grouped by domain ─────────────────────────────────────────────────── */
.demand-group { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.demand-group-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--tint-1, #f7f7f5);
}
.demand-group-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.demand-group-meta { font-size: 12px; color: var(--ink-muted); margin-right: auto; }
.demand-rescan { margin-left: var(--sp-2); }
.demand-group-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }

.demand-card { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 10px; }
.demand-primary { border-left: 3px solid var(--accent, #2563eb); }
.demand-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.demand-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.demand-card-file { font-size: 13px; font-weight: 600; word-break: break-all; }
.demand-card-actions { display: flex; gap: 8px; }
.demand-card-stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.demand-stat { display: flex; flex-direction: column; gap: 2px; min-width: 56px; }
.demand-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.demand-stat span { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.demand-stat-meta { margin-left: auto; text-align: right; }
.demand-stat-meta b { font-size: 12px; }

.demand-badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--tint-1, #efefe9); color: var(--ink-muted, #555); white-space: nowrap;
}
.demand-badge-browser { background: #e3f2fd; color: #0b5cad; }
.demand-badge-server { background: #eef2ec; color: #3d5a3d; }
.demand-badge-comp { background: #f3e8ff; color: #6d28d9; }
.demand-badge-fixture { background: #fff7e0; color: #92600a; }

.demand-secondary { display: flex; flex-direction: column; gap: 6px; }
.demand-secondary-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  border-radius: var(--r-md); border: 1px dashed var(--border);
  font-size: 12.5px;
}
.demand-secondary-file { font-weight: 500; word-break: break-all; }
.demand-secondary-meta { margin-left: auto; color: var(--ink-muted); font-size: 12px; white-space: nowrap; }

.btn-xs { padding: 3px 10px; font-size: 12px; border-radius: var(--r-sm, 6px); }

/* ── Demand report detail view ──────────────────────────────────────────── */
.demand-file-link { color: var(--accent-deep, #1d4ed8); text-decoration: none; cursor: pointer; }
.demand-file-link:hover { text-decoration: underline; }
.demand-detail-hero .demand-card-stats { width: 100%; }
.demand-stat-detail { font-size: 11px; color: var(--ink-muted); text-transform: none; letter-spacing: 0; max-width: 220px; }
.demand-detail-takeaway { margin: var(--sp-2) 0 0; font-size: 13.5px; line-height: 1.5; }
.demand-detail-error { padding: var(--sp-4); color: #b42318; background: #fff0f0; border-radius: var(--r-md); }
.demand-detail-section { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.demand-detail-section h3 { font-size: 15px; margin: 0; }
.demand-fam-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--tint-1, #efefe9); color: var(--ink-muted, #555);
  font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.demand-detail-method { margin-top: var(--sp-4); font-size: 12px; line-height: 1.5; }

/* Findings */
.demand-finding { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--paper); }
.demand-finding-high { border-left: 3px solid var(--danger-ink, #b42318); }
.demand-finding summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; flex-wrap: wrap;
  list-style: none;
}
.demand-finding summary::-webkit-details-marker { display: none; }
.demand-finding summary::before { content: "▸"; color: var(--ink-muted); font-size: 12px; }
.demand-finding[open] summary::before { content: "▾"; }
.demand-finding-cov { margin-left: auto; color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.demand-finding-share {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap;
  background: var(--accent-bg, #eee8f8); color: var(--accent-deep, #3f2a75);
}
.demand-finding-lead { font-size: 13.5px; font-weight: 600; }
.demand-commercial { display: flex; gap: 6px; flex-wrap: wrap; }
.demand-badge-comm { background: var(--tint-3, #f3ece4); color: var(--ink-2, #4a423c); }
.demand-fixkit { border: 1px dashed var(--border-strong, #cdbfb1); border-radius: var(--r-sm, 6px); margin-top: 4px; }
.demand-fixkit > summary { padding: 6px 10px; cursor: pointer; font-size: 12.5px; font-weight: 600; list-style: none; }
.demand-fixkit > summary::-webkit-details-marker { display: none; }
.demand-fixkit-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.demand-fixkit-body .demand-plain-list { margin: 0; padding-left: 18px; }
.demand-schema {
  margin: 0; padding: 8px 10px; border-radius: var(--r-sm, 6px); background: var(--surface-3, #f7f2ec);
  font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 11.5px; overflow-x: auto; white-space: pre-wrap;
}
.demand-finding-body { padding: 0 14px 12px 34px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.demand-finding-body p { margin: 0; }
.demand-finding-ev code { background: var(--tint-1, #efefe9); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* Checks table */
.demand-checks-family { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--paper); }
.demand-checks-family > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-weight: 600;
  list-style: none;
}
.demand-checks-family > summary::-webkit-details-marker { display: none; }
.demand-checks-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.demand-checks-table th, .demand-checks-table td {
  text-align: left; padding: 6px 10px; border-top: 1px solid var(--border); vertical-align: top;
}
.demand-checks-table th { color: var(--ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.demand-check-flag td { background: var(--danger-bg, #fff0f0); }
.mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; }
.st {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.st-OBSERVED { background: #e8f5e9; color: #1b5e20; }
.st-NOT_OBSERVED { background: #ffebee; color: #b71c1c; }
.st-NOT_APPLICABLE, .st-INCONCLUSIVE, .st-ABSTAIN { background: #f3f4f6; color: #6b7280; }
.st-BLOCKED, .st-COLLECTION_FAILED { background: #fff3e0; color: #e65100; }

/* Evidence + lists */
.demand-evidence { display: flex; flex-direction: column; padding: 6px 14px 12px; gap: 4px; font-size: 12.5px; }
.demand-evidence-row { display: flex; gap: 10px; align-items: baseline; }
.demand-evidence-row code { background: var(--tint-1, #efefe9); padding: 1px 6px; border-radius: 4px; }
.demand-evidence-row span { flex: 1; word-break: break-all; }
.demand-evidence-row small { color: var(--ink-muted); }
.demand-plain-list { margin: 6px 14px 12px; padding-left: 20px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.demand-report .actions a { font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .monitor-lane-bar:hover { filter: none; }
}