/*
 * AIMS™ V2 Design Tokens and Base Styles
 * Sourced from DESIGN_SYSTEM.md (signed off May 13, 2026)
 * Single source of truth for color, type, spacing, radii, shadows, components.
 * Single light theme per D-01. No dark mode.
 */

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }

/* ── Design Tokens (DESIGN_SYSTEM.md Section 2) ─────────────────────── */
:root {
  /* Brand */
  --brand-navy-900: #0B1E3D;
  --brand-navy-700: #1B3A6B;
  --brand-gold-600: #C49A3C;
  --brand-gold-400: #E8C46A;

  /* Surfaces */
  --surface-page: #F7F8FA;
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-frame: #FAF8F2;        /* off-white frame: sidebar + topbar */
  --surface-sunken: #EEF0F4;
  --surface-border: #D6DBE2;
  --surface-border-strong: #9CA3AF;
  --surface-overlay: rgba(11, 30, 61, 0.55);

  /* Text */
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-inverse: #F8FAFC;
  --text-link: #1B3A6B;
  --text-disabled: #94A3B8;

  /* Risk bands */
  --risk-low-bg: #E6F0E8;       --risk-low-fg: #1E5631;
  --risk-moderate-bg: #FAF1DC;  --risk-moderate-fg: #7A5A0E;
  --risk-high-bg: #FBE4D2;      --risk-high-fg: #8A3A14;
  --risk-critical-bg: #F5D6D9;  --risk-critical-fg: #7A1224;

  /* Status */
  --status-active-bg: #E6F0E8;       --status-active-fg: #1E5631;
  --status-dormant-bg: #FAF1DC;      --status-dormant-fg: #7A5A0E;
  --status-under-eval-bg: #E1E7F2;   --status-under-eval-fg: #1B3A6B;
  --status-admin-bg: #EEF0F4;        --status-admin-fg: #475569;
  --status-decom-bg: #E5E7EB;        --status-decom-fg: #64748B;

  /* Feedback */
  --feedback-info-bg: #E1E7F2;     --feedback-info-fg: #1B3A6B;
  --feedback-success-bg: #E6F0E8;  --feedback-success-fg: #1E5631;
  --feedback-warning-bg: #FAF1DC;  --feedback-warning-fg: #7A5A0E;
  --feedback-error-bg: #F5D6D9;    --feedback-error-fg: #7A1224;

  /* Focus */
  --focus-ring: #1B3A6B;
  --focus-ring-halo: rgba(27, 58, 107, 0.15);

  /* Type. Self-hosted WOFF2 to be added before Phase 1 exit per DSN-002.
     Until then, system fallbacks render the design correctly. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-serif-report: Georgia, "Times New Roman", serif;

  /* Type scale */
  --text-display: 2rem;       /* 32px H1 */
  --text-h2:      1.375rem;   /* 22px */
  --text-h3:      1.125rem;   /* 18px */
  --text-h4:      0.9375rem;  /* 15px */
  --text-body:    0.875rem;   /* 14px */
  --text-small:   0.8125rem;  /* 13px */
  --text-tiny:    0.75rem;    /* 12px */

  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-elevated: 0 4px 12px -2px rgba(15, 23, 42, 0.08),
                     0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

/* ── Base ────────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
}

h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
h1 { font-family: var(--font-body); font-size: var(--text-display);
     font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.3; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.4; }

a { color: var(--text-link); }
a:hover { text-decoration: underline; }

/* Focus ring on every focusable element. DSN-008. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-halo);
  border-radius: var(--radius-sm);
}

/* Motion reduction. DESIGN_SYSTEM 8.6. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Skip-to-content link. DSN-009. ─────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--brand-navy-900);
  color: var(--text-inverse);
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus { top: var(--space-4); }

/* ── Layout shell ────────────────────────────────────────────────────── */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Top bar. DESIGN_SYSTEM 5.9. */
.topbar {
  height: 56px;
  background: var(--surface-frame);
  color: var(--text-primary);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-5);
}
.topbar__wordmark {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-navy-900);
}
.topbar__wordmark .gold { color: var(--brand-gold-600); }
.topbar__spacer { flex: 1; }
.topbar__user {
  font-size: var(--text-small);
  color: var(--text-secondary);
}

/* Main content area */
main {
  padding: var(--space-6) var(--space-5);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

/* Footer */
.footer {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  color: var(--text-muted);
  font-size: var(--text-small);
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

/* ── Components: Button. DESIGN_SYSTEM 5.1. ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.btn--primary {
  background: var(--brand-navy-900);
  color: var(--text-inverse);
}
.btn--primary:hover { background: var(--brand-navy-700); }
.btn--danger {
  background: var(--feedback-error-fg);
  color: var(--text-inverse);
}
.btn--danger:hover { filter: brightness(0.92); }
.btn--secondary {
  background: var(--surface-card);
  color: var(--brand-navy-900);
  border-color: var(--surface-border-strong);
}
.btn--secondary:hover { background: var(--surface-sunken); }
.btn--ghost {
  background: transparent;
  color: var(--brand-navy-900);
}
.btn--ghost:hover { background: var(--surface-sunken); }
.btn--success {
  background: #16A34A;
  color: #FFFFFF;
}
.btn--success:hover { background: #15803D; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Components: Card. DESIGN_SYSTEM 5.4. ────────────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.card__header {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card--narrow { max-width: 640px; }
.card-title { margin: 0 0 var(--space-2); }
/* Read-only value + copy button row (invite link, tokens, etc.) */
.copy-row { display: flex; gap: var(--space-2); align-items: stretch; }
.copy-row input { flex: 1 1 auto; min-width: 0; }
.copy-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Components: Risk band badge. DESIGN_SYSTEM 5.11. ────────────────── */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-tiny);
  font-weight: 600;
  text-transform: capitalize;
}
.risk-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.risk-badge--low      { background: var(--risk-low-bg);      color: var(--risk-low-fg); }
.risk-badge--moderate { background: var(--risk-moderate-bg); color: var(--risk-moderate-fg); }
.risk-badge--medium   { background: var(--risk-moderate-bg); color: var(--risk-moderate-fg); }
.risk-badge--high     { background: var(--risk-high-bg);     color: var(--risk-high-fg); }
.risk-badge--critical { background: var(--risk-critical-bg); color: var(--risk-critical-fg); }
.risk-badge--unscored { background: var(--surface-sunken);   color: var(--text-muted); }

.status-pill {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-tiny);
  font-weight: 600;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

/* ── Report tiles (Phase 9, faithful to the V1 report cards) ─────────────── */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-4);
}
.report-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.report-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.report-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--brand-navy-900);
}
.report-tile__icon .icon { width: 22px; height: 22px; }
.report-tile__badge {
  font-size: var(--text-tiny);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: #FBF3E0;
  color: var(--brand-gold-600);
}
.report-tile__title { font-size: var(--text-h3); margin: 0 0 var(--space-1); }
.report-tile__desc { font-size: var(--text-small); color: var(--text-muted); margin: 0 0 var(--space-4); }
.report-tile__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.report-tile__stat { padding: var(--space-3); border-bottom: 1px solid var(--surface-border); }
.report-tile__stat:nth-child(odd) { border-right: 1px solid var(--surface-border); }
.report-tile__stat:nth-last-child(-n+2) { border-bottom: none; }
.report-tile__stat-label {
  display: block;
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.report-tile__stat-value {
  display: block;
  margin-top: 2px;
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--brand-navy-900);
}
.report-tile__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.report-tile__btn { width: 100%; justify-content: center; }

/* ── Settings page: 2-column, compact (Phase 10 consolidation) ───────────── */
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.settings-header .page-header { margin: 0; }
.settings-bankinfo {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.settings-bankinfo__facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-3) var(--space-6);
}
.settings-bankinfo__facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-bankinfo__lbl {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--text-muted);
}
.settings-bankinfo__val { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }
.settings .card { padding: var(--space-4); }
.settings .card h3 { margin: 0 0 var(--space-3); }
.settings .field { margin-bottom: var(--space-2); }
.settings .data-table tbody td { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.settings-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: stretch; }
.settings-row .field { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
/* Bottom-align inputs so a label that wraps to two lines does not push its
   field's input out of line with the others in the row. */
.settings-row .field > input,
.settings-row .field > select,
.settings-row .field > textarea { margin-top: auto; }

/* ── Top-bar primary navigation (added Phase 4 Slice A1) ─────────────── */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: var(--space-5);
}
.topbar__nav-link {
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.topbar__nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

/* ── Data tables (added Phase 4 Slice A1) ────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-small);
}
.data-table thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--surface-border);
}
.data-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--surface-border);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-sunken); }
.data-table__numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table__check { width: 2.5rem; text-align: center; }
.data-table__check input { cursor: pointer; }

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Inventory bulk-delete toolbar. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.bulk-bar__select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--text-secondary);
  cursor: pointer;
}
.bulk-bar__count {
  font-size: var(--text-small);
  color: var(--text-secondary);
  min-width: 5rem;
}
.data-table thead th a { color: inherit; text-decoration: none; cursor: pointer; }
.data-table thead th a:hover { color: var(--text-primary); text-decoration: none; }

/* ── Risk assessment questionnaire (Phase 5 Slice 3) ─────────────────── */
.assess-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 960px) {
  .assess-grid { grid-template-columns: 1fr; }
}
.assess-grid__form { display: flex; flex-direction: column; gap: var(--space-4); }
.assess-grid__panel { position: sticky; top: var(--space-4); }

.assess-section__hint {
  color: var(--text-muted);
  font-size: var(--text-small);
  margin-bottom: var(--space-3);
}

/* Row of buttons at the foot of an assessment (Complete / Re-assess / Back). */
.assess-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* --- Inherent risk panel (R3): two axes + segmented pill grades ---------- */
.inherent-panel { margin-bottom: var(--space-4); }
.inherent-panel__hint { margin-bottom: var(--space-3); }
.inherent-scores {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.inherent-scores__op { align-self: center; color: var(--text-muted); font-size: var(--text-small); white-space: nowrap; }
.inherent-score {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-base);
  min-width: 96px;
}
.inherent-score__label {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.inherent-score__value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.inherent-score__formula { font-size: var(--text-tiny); color: var(--text-muted); margin-top: 2px; }
.inherent-score--overall { background: var(--brand-navy-900, #0B1E3D); border-color: var(--brand-navy-900, #0B1E3D); }
.inherent-score--overall .inherent-score__label { color: var(--gold-300, #E8C46A); }
.inherent-score--overall .inherent-score__value { color: #ffffff; }
.inherent-score--overall .inherent-score__formula { color: var(--gold-300, #E8C46A); }

.inherent-axes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 760px) { .inherent-axes { grid-template-columns: 1fr; } }
.inherent-axis {
  padding: var(--space-3);
  border-radius: 8px;
  border-left: 4px solid transparent;
}
.inherent-axis--exposure { background: #F1F5F9; border-left-color: #1B3A6B; }
.inherent-axis--ai { background: #FBF6EA; border-left-color: #C49A3C; }
.inherent-axis__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.inherent-axis--exposure .inherent-axis__title { color: #1B3A6B; }
.inherent-axis--ai .inherent-axis__title { color: #94701F; }
.inherent-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.inherent-signal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}
/* Fixed-width name so the pills line up close to the labels, not far right. */
.inherent-signal__name { flex: 0 0 150px; font-size: var(--text-small); color: var(--text-secondary); }

/* Segmented pill control (None / Some / High; reused for mitigants in R5). */
.seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--surface-border); border-radius: 999px; overflow: hidden; }
.seg__btn {
  border: 0;
  background: var(--surface-base);
  color: var(--text-muted);
  font-size: var(--text-tiny);
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  border-left: 1px solid var(--surface-border);
}
.seg__btn:first-child { border-left: 0; }
.seg--readonly .seg__btn { cursor: default; }
.seg__btn--active { color: #ffffff; }
.seg__btn--g0.seg__btn--active { background: var(--text-muted); }
.seg__btn--g1.seg__btn--active { background: #F59E0B; }
.seg__btn--g2.seg__btn--active { background: #EA580C; }
/* Wider segmented control for descriptive option labels (operational risk). */
.seg--wide { flex: 0 1 auto; }
.seg--wide .seg__btn { padding: 5px 10px; line-height: 1.2; }

/* --- Operational risk panel (R4) --------------------------------------- */
.operational-panel { margin-bottom: var(--space-4); }
.operational-panel__hint { margin-bottom: var(--space-3); }
.operational-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.operational-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--surface-border);
  flex-wrap: wrap;
}
.operational-q:first-child { border-top: 0; }
.operational-q__name { font-size: var(--text-small); color: var(--text-secondary); font-weight: 600; }

/* --- Re-assessment comparison: original value as text, pills aligned ----- */
.reassess-note {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--gold-50, #FBF6EA);
  border-left: 3px solid var(--gold-600, #C49A3C);
  border-radius: 4px;
  font-size: var(--text-small);
  color: var(--text-secondary);
}
/* Three aligned columns: label | original value | editable pills. Fixed label
   and original widths keep every pill group starting at the same x, so the
   pills read as a single column the assessor scans down and updates. */
.operational-list--reassess .operational-q {
  display: grid;
  grid-template-columns: 210px 92px 1fr;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  border-left: 3px solid transparent;
  padding-left: var(--space-2);
}
.operational-q--head { border-top: 0; padding-top: 0; padding-bottom: 0; }
.reassess-head {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.operational-q__original { font-size: var(--text-small); color: var(--text-muted); font-weight: 600; }
/* Changed: tint the row, accent the left edge, strike the now-stale original. */
.operational-q--changed { background: var(--gold-50, #FBF6EA); border-left-color: var(--gold-600, #C49A3C); }
.operational-q--changed .operational-q__name { color: #94701F; font-weight: 700; }
.operational-q--changed .operational-q__original { text-decoration: line-through; }
@media (max-width: 720px) {
  .operational-list--reassess .operational-q { grid-template-columns: 1fr; }
  .operational-q--head { display: none; }
}
/* Inherent signals get the same treatment in re-assess: name | original | pills. */
.inherent-signals--reassess .inherent-signal {
  display: grid;
  grid-template-columns: 1fr 48px max-content;
  align-items: center;
  gap: var(--space-2);
  border-left: 3px solid transparent;
  padding-left: var(--space-1);
}
.inherent-signal__original { font-size: var(--text-tiny); color: var(--text-muted); font-weight: 600; }
.inherent-signal--changed { background: var(--gold-50, #FBF6EA); border-left-color: var(--gold-600, #C49A3C); border-radius: 6px; }
.inherent-signal--changed .inherent-signal__name { color: #94701F; font-weight: 700; }
.inherent-signal--changed .inherent-signal__original { text-decoration: line-through; }

/* --- Mitigant levers (R5): stronger control = greener pill ------------- */
.mitigant-panel { margin-bottom: var(--space-4); }
.mitigant-panel__hint { margin-bottom: var(--space-3); }
.mitigant-panel__credit { background: var(--risk-low-bg); color: var(--risk-low-fg); font-weight: 700; }
.seg__btn--m0.seg__btn--active { background: var(--text-muted); }
.seg__btn--m1.seg__btn--active { background: #F59E0B; }
.seg__btn--m2.seg__btn--active { background: #2563EB; }
.seg__btn--m3.seg__btn--active { background: #1E5631; }

/* --- Residual summary (R6): the assembled headline ---------------------- */
/* The residual headline sticks to the top of the scroll area so the score stays
   visible (and visibly recalculating) while the assessor scrolls the questions.
   Pinned flush to the topbar (top: 0): the see-through band above the tile equals
   the sticky offset, so 0 leaves nothing visible between it and the header. */
.residual-summary {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: var(--space-4);
}
.sticky-sentinel { height: 0; margin: 0; padding: 0; }
/* When pinned, a page-coloured cap fills the band between the header and the tile
   (the scroll area's top padding) so no scrolling content shows through. Only
   active while stuck, so it never overlaps the page header when unscrolled. The
   100vh height is clipped by the scroll container, so it covers any gap size. */
.residual-summary::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0;
  background: var(--surface-page);
}
.residual-summary--stuck::before { height: 100vh; }
.residual-summary__hint { margin: var(--space-3) 0 0; }
.risk-badge--lg { font-size: var(--text-base); padding: 6px 14px; }
.residual-flow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.residual-flow__op { align-self: center; color: var(--text-muted); font-size: var(--text-tiny); font-weight: 400; text-align: center; line-height: 1.2; max-width: 90px; }
.residual-flow__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-base);
  min-width: 84px;
}
.residual-flow__label {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}
.residual-flow__value { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.residual-flow__note { font-size: var(--text-tiny); color: var(--text-muted); font-weight: 600; }
.operational-panel__floor { font-size: var(--text-tiny); font-weight: 600; }
.residual-flow__item--final { background: var(--brand-navy-900, #0B1E3D); border-color: var(--brand-navy-900, #0B1E3D); }
.residual-flow__item--final .residual-flow__label { color: var(--gold-300, #E8C46A); }
.residual-flow__item--final .residual-flow__value { color: #ffffff; }

/* --- Risk model config editor (R8) ------------------------------------- */
.cfg-form .card { margin-bottom: var(--space-3); }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.cfg-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-small); color: var(--text-secondary); }
.cfg-num { width: 100%; padding: 6px 8px; border: 1px solid var(--surface-border); border-radius: 6px; font-size: var(--text-small); }
.cfg-num--grade { width: 56px; text-align: center; }
.cfg-sum { font-size: var(--text-tiny); font-weight: 700; }
.cfg-sum--ok { color: var(--risk-low-fg); }
.cfg-sum--warn { color: #B45309; }
.cfg-table .cfg-num { width: 80px; }
.cfg-matrix-scroll { overflow-x: auto; }
.cfg-matrix { font-size: var(--text-tiny); }
.cfg-matrix__col { white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
.cfg-matrix__cat { white-space: nowrap; font-weight: 600; position: sticky; left: 0; background: var(--surface-base); }
.cfg-actions { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }

/* --- Re-assessment comparison mode ------------------------------------- */
/* Per-question side-by-side: original answer (read-only) beside the new
   editable radio group. Single column when not comparing. */
.assess-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.assess-question--compare .assess-compare {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
}
@media (max-width: 720px) {
  .assess-question--compare .assess-compare { grid-template-columns: 1fr; }
}
.assess-compare__heading {
  display: block;
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.assess-compare__orig {
  border-right: 1px solid var(--surface-border);
  padding-right: var(--space-3);
}
@media (max-width: 720px) {
  .assess-compare__orig {
    border-right: none;
    border-bottom: 1px solid var(--surface-border);
    padding-right: 0;
    padding-bottom: var(--space-3);
  }
}
.assess-compare__answer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-secondary);
}
.assess-compare__answer-label { font-weight: 600; }
.assess-compare__answer--none { color: var(--text-muted); font-style: italic; }

/* Highlight the newly selected option when it differs from the original. */
.assess-option--changed {
  border-color: #C49A3C;
  background: var(--surface-sunken);
}

/* Mitigant rows carry an "Original: X" chip beside the editable select. */
.assess-mitigant__original {
  font-size: var(--text-tiny);
  color: var(--text-muted);
  white-space: nowrap;
}
.assess-mitigant__original--changed { color: #B45309; font-weight: 600; }

/* Score panel comparison: original vs new bands, delta table, "was" notes. */
.score-compare__bands {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.score-compare__band-item { display: flex; flex-direction: column; gap: 2px; }
.score-compare__band-label {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}
.score-compare__arrow { color: var(--text-muted); font-size: 1.2rem; }
.score-compare {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}
.score-compare th, .score-compare td {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-small);
}
.score-compare thead th {
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--surface-border);
}
.score-compare tbody th { text-align: left; font-weight: 600; color: var(--text-secondary); }
.score-compare__residual th, .score-compare__residual td {
  border-top: 1px solid var(--surface-border);
  font-weight: 700;
}
.score-delta--worse  { color: #C2410C; font-weight: 700; }
.score-delta--better { color: #15803D; font-weight: 700; }
.score-delta--same   { color: var(--text-muted); }
.domain-score__was {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--text-tiny);
  color: var(--text-muted);
  font-weight: 400;
}
.mitigant-rating__was {
  margin-left: var(--space-1);
  font-size: var(--text-tiny);
  color: var(--text-muted);
  font-weight: 400;
}

.assess-question {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.assess-question legend {
  font-weight: 600;
  padding: 0 var(--space-2);
  color: var(--text-primary);
}
.assess-options { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.assess-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.assess-option:hover { background: var(--surface-sunken); }
.assess-option input[type="radio"] { margin: 0; width: 16px; height: 16px; }
.assess-option__label { flex: 1; font-size: var(--text-body); }
.assess-option__points {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--text-muted);
}

.assess-mitigant {
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-border);
}
.assess-mitigant:last-child { border-bottom: none; }
.assess-mitigant__label { display: flex; flex-direction: column; gap: var(--space-1); }
.assess-mitigant__name { font-weight: 600; }
.assess-mitigant__weight { font-size: var(--text-small); color: var(--text-muted); }

.score-panel {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.score-panel h3 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-3);
}
.score-panel__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}
.score-panel__grid dt { color: var(--text-muted); font-size: var(--text-small); }
.score-panel__grid dd {
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.score-panel__hint {
  font-size: var(--text-small);
  color: var(--text-muted);
  border-top: 1px solid var(--surface-border);
  padding-top: var(--space-3);
}
.score-panel__hint--ready {
  color: var(--feedback-success-fg);
  font-weight: 600;
}

/* Live score preview (V1 parity): per-domain bars, score trio, mitigant ratings. */
.score-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.score-panel__head h3 { margin: 0; }
.score-panel__section-title {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-secondary);
}
.domain-scores { display: flex; flex-direction: column; gap: var(--space-3); }
.domain-score__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.domain-score__label { font-size: var(--text-small); color: var(--text-secondary); font-weight: 600; }
.domain-score__value { font-size: var(--text-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.domain-score__unit { color: var(--text-muted); font-weight: 400; }
.dbar { display: block; width: 100%; height: 8px; }

.score-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--surface-border);
}
.score-trio__item { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.score-trio__label {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  font-weight: 600;
}
.score-trio__value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.mitigant-ratings { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; }
.mitigant-rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-border);
}
.mitigant-rating:last-child { border-bottom: none; }
.mitigant-rating__name { font-size: var(--text-small); color: var(--text-secondary); }
.mitigant-rating__value { font-size: var(--text-small); font-weight: 700; }
.rating--strong   { color: var(--risk-low-fg); }
.rating--adequate { color: var(--text-link); }
.rating--partial  { color: var(--risk-moderate-fg); }
.rating--none     { color: var(--text-muted); }

/* ── Page: landing (Phase 1 placeholder) ─────────────────────────────── */
.hero {
  max-width: 720px;
  margin: var(--space-6) auto;
  text-align: center;
}
.hero h1 { margin-bottom: var(--space-4); }
.hero p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: var(--space-5);
}
.hero__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.phase-grid .card h3 { margin-bottom: var(--space-2); font-size: var(--text-h4); }
.phase-grid .card p  { color: var(--text-muted); font-size: var(--text-small); }

/* ── Form fields. DESIGN_SYSTEM 5.2. ────────────────────────────────── */
.field { display: block; margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="url"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 0 var(--space-3);
  height: 36px;
  font-size: var(--text-body);
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  transition: border-color 120ms, box-shadow 120ms;
}
.field textarea { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: var(--surface-border-strong);
}
.field input[aria-invalid="true"], .field input.input-validation-error,
.field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--feedback-error-fg);
}
.field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--feedback-error-fg);
  min-height: 1.2em;
}
.field-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.field .checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
  font-size: var(--text-body);
  color: var(--text-primary);
}
.field .checkbox input[type="checkbox"] { width: 16px; height: 16px; }

/* ── Banner (page-level info / success / warning / error). ───────────── */
.banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-body);
  border-left: 4px solid;
}
.banner--info    { background: var(--feedback-info-bg);    color: var(--feedback-info-fg);    border-left-color: var(--feedback-info-fg); }
.banner--success { background: var(--feedback-success-bg); color: var(--feedback-success-fg); border-left-color: var(--feedback-success-fg); }
.banner--warning { background: var(--feedback-warning-bg); color: var(--feedback-warning-fg); border-left-color: var(--feedback-warning-fg); }
.banner--error   { background: var(--feedback-error-bg);   color: var(--feedback-error-fg);   border-left-color: var(--feedback-error-fg); }

/* ── Auth pages (Login, MFA, ForgotPassword, etc.). DESIGN_SYSTEM 6.7. ── */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
}
.auth-wordmark {
  text-align: center;
  padding: var(--space-8) var(--space-5) var(--space-4);
}
.auth-wordmark a {
  display: inline-block;
  text-decoration: none;
  color: var(--brand-navy-900);
}
.auth-wordmark__pentedge {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: var(--space-2);
}
.auth-wordmark__aims {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-gold-600);
}
.auth-tagline {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.auth-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--space-5) var(--space-6);
}
.auth-card {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  width: 100%;
  max-width: 420px;
}
.auth-card h1 {
  font-family: var(--font-body);
  font-size: var(--text-h2);
  margin-bottom: var(--space-1);
}
.auth-subtitle {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.auth-secondary {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-small);
}
.auth-footer {
  text-align: center;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* ── In-app page header (Profile, MfaEnroll, etc.). ──────────────────── */
.page-header {
  margin-bottom: var(--space-5);
}
.page-header h1 { margin-bottom: var(--space-1); }
.page-subtitle {
  color: var(--text-muted);
  font-size: var(--text-body);
}

/* ── Profile dl grid. ────────────────────────────────────────────────── */
/* Combined Settings + Profile page (R0). Stacked cards with consistent
   spacing; each section is a top-level card. */
.settings-section { margin-bottom: var(--space-4); }
.settings-section h3 { margin: 0 0 var(--space-2); }
.settings-section .card-head { margin-bottom: var(--space-2); }
.settings-bankinfo--block {
  border-top: 1px solid var(--surface-border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}
.settings-identity {
  border-top: 1px solid var(--surface-border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}
.settings-identity dt {
  align-self: center;
}
.settings-identity dd {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.settings-actions { margin-top: var(--space-3); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.settings-inline-form { display: inline; margin: 0; }
.settings-users-table { margin-top: var(--space-2); }
.settings-users-table__name { display: block; font-weight: 600; }
.settings-users-table__email { color: var(--text-muted); font-size: var(--text-tiny); }
.settings-users-table__actions { text-align: right; }
.settings-section__footer-link { margin: var(--space-3) 0 0; font-size: var(--text-small); }

/* R2: Tier-2 regulator picker rendered inside the institution-profile modal,
   and refreshed via HTMX when the institution type changes. Layout is a
   single-column checkbox list so the chips line up cleanly. */
.regulator-picker { margin-top: var(--space-1); }
.regulator-picker__hint { margin: 0 0 var(--space-2); }
.regulator-picker__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.regulator-picker__item { margin: 0; }
.regulator-picker__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  cursor: pointer;
}
.regulator-picker__row input[type="checkbox"] { margin-top: 0.2em; }
.regulator-picker__name {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.regulator-picker__chip { font-size: var(--text-tiny); }
.regulator-picker__chip--state {
  background-color: var(--surface-muted);
  color: var(--text-muted);
}
.regulator-picker__chip--anticipated {
  background-color: var(--color-gold-bg, #FBF2D8);
  color: var(--color-navy-deep, #0B1E3D);
}
.settings-bankinfo__regulators .settings-bankinfo__val {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* R3: tool catalog and detail driven by the active regime.
   - regime ribbon: small label above filters that tells the user what
     regime they're seeing tools through
   - out-of-scope rows: dimmed and unsortable; surfaced only via the toggle
   - status chips: Anticipated effective YYYY, Out of scope */
.catalog-regime-ribbon {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
}
.catalog-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  cursor: pointer;
}
.rs-filters__toggle { align-self: end; }
.catalog-row__chip {
  font-size: var(--text-tiny);
  margin-left: var(--space-1);
}
.catalog-row__chip--anticipated {
  background-color: var(--color-gold-bg, #FBF2D8);
  color: var(--color-navy-deep, #0B1E3D);
}
.catalog-row__chip--out-of-scope {
  background-color: var(--surface-muted);
  color: var(--text-muted);
}
.catalog-row--out-of-scope { opacity: 0.6; }
.catalog-row--out-of-scope strong { font-weight: 600; }

.regframe__regime {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
}
.regframe__chip { font-size: var(--text-tiny); }
.regframe__chip--anticipated {
  background-color: var(--color-gold-bg, #FBF2D8);
  color: var(--color-navy-deep, #0B1E3D);
}
.regframe__chip--out-of-scope {
  background-color: var(--surface-muted);
  color: var(--text-muted);
}
.regframe__notes {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* Prominent back link above tool detail header. */
.detail-back { margin: 0 0 var(--space-2); }
.detail-back__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-navy, #1B3A6B);
  text-decoration: none;
}
.detail-back__link:hover { text-decoration: underline; }
.detail-back__arrow { font-size: 1.1em; line-height: 1; }

/* SR-4: Scanner-rules manager. Three section cards stack vertically with a
   colored accent strip so users see at a glance which class of rule they're
   editing. Tables stay readable, patterns render as monospace code. */
.sr-section { margin-bottom: var(--space-4); }
.sr-section__sub { margin: 0; }
.sr-section__empty { margin: var(--space-2) 0 0; }
.sr-section--ai .card-head { border-left: 4px solid var(--color-navy, #1B3A6B); padding-left: var(--space-3); }
.sr-section--pii .card-head { border-left: 4px solid var(--color-gold-bg, #C49A3C); padding-left: var(--space-3); }
.sr-section--email .card-head { border-left: 4px solid var(--text-muted, #6B7280); padding-left: var(--space-3); }
.sr-table { margin-top: var(--space-2); width: 100%; }
.sr-table__col-enabled { width: 64px; text-align: center; }
.sr-table__col-pattern { width: 40%; }
.sr-table__col-severity { width: 110px; }
.sr-table__col-actions { width: 1%; white-space: nowrap; text-align: right; }
.sr-table__notes {
  color: var(--text-muted);
  font-size: var(--text-tiny);
  margin-top: 2px;
}
.sr-table__actions { display: flex; gap: var(--space-1); justify-content: flex-end; align-items: center; }
.sr-pattern {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-tiny);
  background: var(--surface-muted);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.sr-row--off td { opacity: 0.55; }
.sr-row--off td .sr-toggle { opacity: 1; }

.sr-chip {
  display: inline-block;
  font-size: var(--text-tiny);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  vertical-align: middle;
}
.sr-chip--type { background: var(--surface-muted); color: var(--text-secondary); margin-right: var(--space-1); }
.sr-chip--builtin {
  background: var(--surface-muted);
  color: var(--text-muted);
  margin-left: var(--space-1);
}
.sr-chip--info { background: #E2EAF5; color: #0B1E3D; }
.sr-chip--warning { background: #FBF2D8; color: #6B4A0A; }
.sr-chip--critical { background: #FBE1E1; color: #8B1F1F; }

.sr-inline-form { display: inline; margin: 0; }
.sr-toggle {
  border: 1px solid var(--surface-border);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--text-tiny);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.sr-toggle--on { background: #DCF1E0; color: #1A5A2A; border-color: #1A5A2A; }
.sr-toggle--off { background: var(--surface-muted); color: var(--text-muted); }
.sr-btn-delete { color: #8B1F1F; }
.sr-btn-delete:hover { background: #FBE1E1; }

.sr-form-card { max-width: 760px; }
.sr-form__hint { margin: var(--space-1) 0 0; font-size: var(--text-tiny); }
.sr-form__enable { margin-top: var(--space-2); }
.sr-form__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
}
.sr-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
}

/* ST-4: attestation panel on the audit-run detail page. */
.audit-attestation { margin-top: var(--space-3); }
.audit-attestation__form { display: flex; flex-direction: column; gap: var(--space-2); }
.audit-attestation__form textarea { width: 100%; max-width: 720px; }
.audit-attestation__line { margin: 0 0 var(--space-1); }
.audit-attestation__email { color: var(--text-muted); }
.audit-attestation__comments {
  margin: var(--space-1) 0;
  font-style: italic;
  color: var(--text-secondary);
}
.audit-attestation__hash code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-tiny);
  background: var(--surface-muted);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

/* Audit log: small monospace pill next to the affected-record label,
   showing the first eight chars of the underlying entity id so an
   examiner can still trace a row back to the underlying record. */
.audit-entity-id {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--text-tiny);
  color: var(--text-muted);
  margin-left: 6px;
}

/* Risk Scoring row action column: lets View + Re-assess sit side by side. */
.rs-actions { white-space: nowrap; }
.rs-actions .btn + .btn { margin-left: var(--space-1); }

/* ── Dashboard redesign (Jun 2026): two top tiles, full-width trend,
   pie + top-10 vendors below. Keeps everything on one screen at 1440. ── */
.dash-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dash-tile {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
}
.dash-tile--score { background: linear-gradient(135deg, #0B1E3D 0%, #1B3A6B 100%); color: #ffffff; }
.dash-tile--score h3, .dash-tile--score .dash-tile__sub { color: #ffffff; }
.dash-tile--score .dash-tile__unit { color: #E8C46A; }
.dash-tile__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.dash-tile__head h3 { margin: 0; font-size: 1rem; }
.dash-tile__score { margin-top: var(--space-2); display: flex; align-items: baseline; }
.dash-tile__big { font-size: 3rem; font-weight: 800; line-height: 1; }
.dash-tile__unit { font-size: 1.25rem; margin-left: var(--space-1); opacity: 0.85; }
.dash-tile__sub { margin: var(--space-2) 0 0; font-size: var(--text-small); opacity: 0.85; }
.dash-tile--inventory .dash-tile__sub a { color: var(--color-navy, #1B3A6B); font-weight: 600; text-decoration: none; }
.dash-tile--inventory .dash-tile__sub a:hover { text-decoration: underline; }
.dash-tile__stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.dash-tile__stats li { display: flex; flex-direction: column; align-items: flex-start; }
.dash-tile__stat-value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--color-navy, #1B3A6B); }
.dash-tile__stat-value--active { color: #1E5631; }
.dash-tile__stat-value--dormant { color: #B45309; }
.dash-tile__stat-label { font-size: var(--text-small); color: var(--text-muted); margin-top: 2px; }

.dash-section { margin-bottom: var(--space-3); }
.dash-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.dash-section__head h3 { margin: 0; }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-3);
}

/* Pie distribution (left 1/4) beside the risk-score trend (right 3/4).
   Stretch both cards to equal height so their bottoms line up; the trend
   chart centers vertically in its card rather than leaving a gap below. */
.dash-split {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-3);
  align-items: stretch;
}
.dash-section--trend { display: flex; flex-direction: column; }
.dash-section--trend .trend-chart { margin-top: auto; margin-bottom: auto; }
@media (max-width: 1100px) {
  .dash-tiles { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-split { grid-template-columns: 1fr; }
}

.pie-chart { width: 100%; max-width: 240px; height: auto; }
.dash-pie { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
/* In the narrow 1/4 column, stack the pie above its legend. */
.dash-pie--stacked { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.dash-pie--stacked .pie-chart { max-width: 200px; align-self: center; }
.dash-pie--stacked .dash-pie__legend { width: 100%; }
.dash-pie__legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.dash-pie__legend li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); }

.trend-chart { width: 100%; height: auto; display: block; }

/* Residual-risk distribution bar chart (tools inventory tile). */
.bar-chart { width: 100%; max-width: 560px; height: auto; display: block; margin-top: var(--space-2); }
.tools-risk-dist { margin-bottom: var(--space-4); }

.dash-top-list { list-style: decimal inside; padding: 0; margin: var(--space-2) 0 0; }
.dash-top-list__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--surface-border);
}
.dash-top-list__item:last-child { border-bottom: 0; }
.dash-top-list__name { display: flex; flex-direction: column; min-width: 0; }
.dash-top-list__name strong { font-size: var(--text-base); }
.dash-top-list__name .rs-muted { font-size: var(--text-small); }
.dash-top-list__score { display: flex; align-items: center; gap: var(--space-2); }
.dash-top-list__num { font-size: 1.125rem; font-weight: 700; color: var(--color-navy, #1B3A6B); font-variant-numeric: tabular-nums; }

/* Tool catalog row: Add button on the LEFT of the name so it's visible
   without scrolling on narrow viewports. Single column table; Adopted /
   Out-of-scope rows render a chip in place of the button. */
.catalog-table td { vertical-align: top; }
.catalog-row__cell { display: flex; align-items: flex-start; gap: var(--space-2); }
.catalog-row__add {
  flex: 0 0 auto;
  margin-top: 1px; /* optical alignment with the tool name */
}
.catalog-row__status {
  flex: 0 0 auto;
  font-size: var(--text-tiny);
  margin-top: 2px;
}
.catalog-row__body { flex: 1 1 auto; min-width: 0; }
/* Tool name with a "Details" link sitting immediately to its right,
   left-justified so it stays visible in the narrow catalog pane. */
.catalog-row__title {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
.catalog-row__details {
  flex: 0 0 auto;
  font-size: var(--text-tiny);
  font-weight: 600;
  white-space: nowrap;
  color: var(--brand-navy-700, #1B3A6B);
  text-decoration: none;
}
.catalog-row__details:hover { text-decoration: underline; }
/* Inherent risk score chip on each catalog row, band-colored, pushed right. */
.catalog-row__risk {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--text-tiny);
  font-weight: 700;
  padding: 1px 8px;
  white-space: nowrap;
}
.btn--xs {
  padding: 2px 8px;
  font-size: var(--text-tiny);
  min-height: 0;
  line-height: 1.4;
}

/* Form action rows (top + bottom) on long forms like Add tool: kept in a
   class instead of inline styles so the CSP stays strict. */
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.form-actions--top {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--surface-border);
}
.form-actions--bottom { margin-top: var(--space-4); }
.form-subhead { margin-top: var(--space-5); }

/* Overall assessment notes block at the bottom of the Mitigants card. */
.assess-notes { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--surface-border); }
.assess-notes__label { display: block; margin-bottom: var(--space-1); }
.assess-notes__name { display: block; font-weight: 600; }
.assess-notes__hint { display: block; font-size: var(--text-tiny); color: var(--text-muted); }
.assess-notes textarea { width: 100%; max-width: 100%; resize: vertical; min-height: 96px; }

.profile-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-body);
}
.profile-grid dt {
  color: var(--text-muted);
  font-weight: 600;
}
.profile-grid dd { color: var(--text-primary); }

/* ── User menu in product top bar. ───────────────────────────────────── */
.topbar__user-name {
  font-size: var(--text-small);
  color: var(--text-secondary);
  margin-right: var(--space-3);
}
.topbar__user-action {
  font-size: var(--text-small);
  color: var(--brand-gold-600);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.topbar__user-action:hover {
  background: var(--surface-sunken);
  text-decoration: none;
}

/* ============================================================
   R3 design conformance: self-hosted fonts (DSN-002), left
   sidebar (DSN-018), Heroicons sprite sizing (DSN-003).
   ============================================================ */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;            /* variable */
  font-display: swap;
  src: url("/fonts/dmsans.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfair-700.woff2") format("woff2");
}

body { font-family: var(--font-body); }
h1, .page-header h1 { font-family: var(--font-body); font-weight: 700; }

/* Heroicons sprite */
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.18em; flex: none; }

/* AIMS Manifest emblem: sized to sit inline with a nav label / the topbar wordmark. */
.nav-emblem { width: 1.6em; height: 1.6em; object-fit: contain; flex: none; vertical-align: -0.4em; }
.topbar__wordmark { display: inline-flex; align-items: center; gap: 0.4rem; }
.topbar__emblem { height: 2rem; width: auto; flex: none; }
/* "Powered By Lumi" attribution after the topbar product name - smaller + lighter. */
.topbar__sub { font-size: 0.55em; font-weight: 500; opacity: 0.7; }

/* Sidebar layout (DSN-018). Desktop: fixed 240px column. */
.app--with-sidebar { grid-template-rows: none; grid-template-columns: 240px 1fr; }
.app__main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }

.sidebar {
  background: var(--surface-frame);
  color: var(--text-primary);
  border-right: 1px solid var(--surface-border);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.sidebar__brand {
  display: block;
  text-decoration: none;
  padding: var(--space-2) var(--space-3) var(--space-5);
}
.sidebar__logo {
  display: block;
  width: 100%;
  max-width: 184px;
  height: auto;
}
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.sidebar__link:hover { background: var(--surface-sunken); color: var(--text-primary); }
.sidebar__link .icon { width: 22px; height: 22px; }

/* Workspace separator below the main nav. */
.sidebar__divider {
  border: none;
  border-top: 1px solid var(--surface-border);
  margin: var(--space-3) var(--space-2);
}
.sidebar__section-label {
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-3);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
}

/* Selected nav item (V1 parity): cream pill, gold left bar, gold icon, bold. */
.sidebar__link--active,
.sidebar__link--active:hover {
  background: #FBF2DA;
  color: var(--brand-navy-900);
  font-weight: 700;
  box-shadow: inset 3px 0 0 0 var(--brand-gold-600);
}
.sidebar__link--active .icon { color: var(--brand-gold-600); }

/* Sign out pinned to the bottom of the sidebar. */
.sidebar__signout { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--surface-border); }
.sidebar__link--signout {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--brand-gold-600);
}

/* Nested nav groups (DSN-018b). Uses native <details>/<summary>; the
   one-open-at-a-time accordion is via name="sidebar-group" (HTML5). All
   styling is class-based so the strict CSP (style-src 'self') allows it. */
.sidebar__group { margin: 0; }
.sidebar__group > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  list-style: none;
  user-select: none;
}
.sidebar__group > summary::-webkit-details-marker { display: none; }
.sidebar__group > summary:hover { background: var(--surface-sunken); color: var(--text-primary); }
.sidebar__group > summary .icon { width: 22px; height: 22px; }
.sidebar__group-label { flex: 1; min-width: 0; }
/* Sub-attribution line under a product name (e.g. "Powered By Lumi") - smaller + lighter. */
.sidebar__group-sub { display: block; font-size: 0.72em; font-weight: 500; opacity: 0.7; letter-spacing: 0; }
.sidebar__chev {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.sidebar__group[open] > summary .sidebar__chev { transform: rotate(180deg); }
.sidebar__sublist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 var(--space-2) var(--space-3);
}
.sidebar__sublink {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px var(--space-3);
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.sidebar__sublink:hover { background: var(--surface-sunken); color: var(--text-primary); }
.sidebar__sublink .icon { width: 18px; height: 18px; color: inherit; }
.sidebar__sublink--active,
.sidebar__sublink--active:hover {
  background: #FBF2DA;
  color: var(--brand-navy-900);
  font-weight: 700;
  box-shadow: inset 3px 0 0 0 var(--brand-gold-600);
}
.sidebar__sublink--active .icon { color: var(--brand-gold-600); }

/* Desktop app shell: the authenticated layout is exactly one viewport tall;
   only the main content area scrolls, so the full-height sidebar (with Sign
   out pinned to its bottom) stays visible. Mobile keeps normal page scroll. */
@media (min-width: 1024px) {
  .app--with-sidebar { height: 100vh; overflow: hidden; }
  .app--with-sidebar .app__main { height: 100vh; overflow: hidden; }
  .app--with-sidebar .app__main > main { overflow-y: auto; min-height: 0; }
  .app--with-sidebar .sidebar { height: 100vh; }
}

.topbar__menu {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: var(--space-2);
}

/* Mobile: sidebar collapses to an off-canvas drawer toggled by the hamburger. */
@media (max-width: 1023px) {
  .app--with-sidebar { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.is-open {
    display: flex;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 240px;
    z-index: 50;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
  }
  .topbar__menu { display: inline-flex; }
}

/* ============================================================
   Risk Scoring board (V1 parity). All styling lives in classes
   because the app CSP (style-src 'self') blocks inline styles.
   ============================================================ */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (max-width: 1200px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .kpi-row { grid-template-columns: 1fr; } }

.kpi {
  background: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-left: 5px solid var(--surface-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.kpi__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.kpi__label {
  margin: 0;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-muted);
}
.kpi__icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--surface-sunken);
  color: var(--text-muted);
}
.kpi__icon .icon { width: 22px; height: 22px; }
.kpi__value {
  margin: var(--space-2) 0 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
}
.kpi__unit { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.kpi__sub { margin: var(--space-1) 0 0; font-size: var(--text-small); color: var(--text-muted); }

.kpi--total     { border-left-color: #2B5CE6; }
.kpi--total .kpi__value { color: #2B5CE6; }
.kpi--total .kpi__icon  { background: #E7ECFC; color: #2B5CE6; }
.kpi--scored    { border-left-color: var(--risk-low-fg); }
.kpi--scored .kpi__value { color: var(--risk-low-fg); }
.kpi--scored .kpi__icon  { background: var(--risk-low-bg); color: var(--risk-low-fg); }
.kpi--avg       { border-left-color: var(--brand-gold-600); }
.kpi--avg .kpi__icon     { background: var(--risk-moderate-bg); color: var(--risk-moderate-fg); }
.kpi--attention { border-left-color: var(--risk-critical-fg); }
.kpi--attention .kpi__value { color: var(--risk-critical-fg); }
.kpi--attention .kpi__icon  { background: var(--risk-critical-bg); color: var(--risk-critical-fg); }

/* Generic color variants (used by the dashboard tiles). */
.kpi-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .kpi-row--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpi-row--three { grid-template-columns: 1fr; } }
.kpi-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .kpi-row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpi-row--four { grid-template-columns: 1fr; } }

.kpi--blue   { border-left-color: #2B5CE6; }
.kpi--blue .kpi__value { color: #2B5CE6; }
.kpi--blue .kpi__icon  { background: #E7ECFC; color: #2B5CE6; }
.kpi--green  { border-left-color: var(--risk-low-fg); }
.kpi--green .kpi__value { color: var(--risk-low-fg); }
.kpi--green .kpi__icon  { background: var(--risk-low-bg); color: var(--risk-low-fg); }
.kpi--gold   { border-left-color: var(--brand-gold-600); }
.kpi--gold .kpi__value { color: var(--risk-moderate-fg); }
.kpi--gold .kpi__icon  { background: var(--risk-moderate-bg); color: var(--risk-moderate-fg); }
.kpi--red    { border-left-color: var(--risk-critical-fg); }
.kpi--red .kpi__value { color: var(--risk-critical-fg); }
.kpi--red .kpi__icon  { background: var(--risk-critical-bg); color: var(--risk-critical-fg); }
.kpi--purple { border-left-color: #7C3AED; }
.kpi--purple .kpi__value { color: #7C3AED; }
.kpi--purple .kpi__icon  { background: #EFE7FC; color: #7C3AED; }
.kpi--navy   { border-left-color: var(--brand-navy-900); }
.kpi--navy .kpi__value { color: var(--brand-navy-900); }
.kpi--navy .kpi__icon  { background: var(--surface-sunken); color: var(--brand-navy-900); }

/* Audit action chips */
.action-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
}
.action-chip--export { background: var(--risk-moderate-bg); color: var(--risk-moderate-fg); }
.action-chip--login  { background: #E7ECFC; color: #2B5CE6; }
.action-chip--create { background: var(--risk-low-bg); color: var(--risk-low-fg); }
.action-chip--update { background: #E7ECFC; color: var(--text-link); }
.action-chip--delete { background: var(--risk-critical-bg); color: var(--risk-critical-fg); }
.action-chip--neutral { background: var(--surface-sunken); color: var(--text-secondary); }

/* Filter bar */
.rs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}
.rs-filters .field { margin-bottom: 0; }
.rs-filters__search { flex: 1; min-width: 240px; }
/* Compact variant: equal-ish small fields all on one line (AI tool inventory). */
.rs-filters--compact .field { flex: 0 1 220px; min-width: 0; margin-bottom: 0; }
/* Action button row above a filter bar / table. */
.page-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }

/* ── Savings (V1 parity) ──────────────────────────────────────────────── */
.savings-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.savings-stack__note { color: var(--text-muted); margin-top: var(--space-2); }
.savings-subtiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (max-width: 600px) { .savings-subtiles { grid-template-columns: 1fr; } }
.savings-subtile { border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.savings-subtile__label {
  margin: 0;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--text-muted);
}
.savings-subtile__value { margin: var(--space-1) 0 0; font-size: 1.75rem; font-weight: 700; }
.savings-subtile--spend { background: var(--risk-moderate-bg); }
.savings-subtile--spend .savings-subtile__value { color: var(--risk-moderate-fg); }
.savings-subtile--count { background: var(--risk-low-bg); }
.savings-subtile--count .savings-subtile__value { color: var(--risk-low-fg); }

.dormant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--surface-border);
}
.dormant-row__main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.dormant-row__detail { color: var(--text-muted); font-size: var(--text-small); }
.dormant-row__cost { font-weight: 700; color: var(--risk-low-fg); white-space: nowrap; }

.overlap-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.overlap-legend__title {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: var(--space-2);
}

.overlap-group { padding: 0; }
.overlap-group + .overlap-group { margin-top: var(--space-3); }
.overlap-group__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}
.overlap-group__summary::-webkit-details-marker { display: none; }
.overlap-group__summary::before {
  content: "\25B6";
  color: var(--text-muted);
  font-size: 0.7em;
  flex: none;
  transition: transform 0.15s ease;
}
.overlap-group[open] .overlap-group__summary::before { transform: rotate(90deg); }
.overlap-group__name { font-weight: 700; font-size: var(--text-h4); }
.overlap-group__meta { color: var(--text-muted); font-size: var(--text-small); margin-top: 2px; }
.overlap-group__score { margin-left: auto; text-align: right; white-space: nowrap; }
.overlap-group__score-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.overlap-group__score-unit { font-size: var(--text-small); color: var(--text-muted); font-weight: 400; }
.overlap-group__score-label { font-size: var(--text-small); font-weight: 700; text-transform: uppercase; }
.overlap-group__body { padding: 0 var(--space-4) var(--space-4); }
.overlap--low { color: var(--risk-low-fg); }
.overlap--moderate { color: var(--risk-moderate-fg); }
.overlap--high { color: var(--risk-critical-fg); }

/* ── Modal (data-attribute driven; open/close wired in site.js) ───────── */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 30, 61, 0.45);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal[data-open="true"] { display: flex; }
.modal__dialog {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.modal__head h3 { margin: 0; }
.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 var(--space-1);
}
.modal__close:hover { color: var(--text-primary); }
.modal__actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }

/* Table embellishments */
.rs-subtext {
  color: var(--text-muted);
  font-size: var(--text-small);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42ch;
}

/* AI tool inventory: Active tools (wider, left) + compact catalog (right).
   Order swapped in June 2026 so the user's own inventory is the dominant
   pane and the catalog reads as a secondary picker. */
.tools-2pane {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
/* Grid items default to min-width:auto (= content width), which lets the wide
   catalog table override the fr ratio. Force the tracks to honor the ratio and
   let an over-wide table scroll inside its pane instead. */
.tools-2pane > * { min-width: 0; }
.tools-2pane #catalog-results,
.tools-2pane #tool-results { overflow-x: auto; }
@media (max-width: 1100px) { .tools-2pane { grid-template-columns: 1fr; } }

/* Drag a catalog tool into My Tools to adopt it (wired in site.js). */
#catalog-results tr[draggable="true"] { cursor: grab; }
#catalog-results tr[draggable="true"]:active { cursor: grabbing; }
.dropzone.is-dragover {
  outline: 2px dashed var(--brand-gold-600);
  outline-offset: -6px;
  background: var(--surface-frame);
}
.rs-muted { color: var(--text-muted); }
.score--mitigant { color: var(--text-link); }
.score--residual { font-weight: 700; }

.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  white-space: nowrap;
}
.status-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
}
.status-chip--active    { background: var(--risk-low-bg);      color: var(--risk-low-fg); }
.status-chip--dormant   { background: var(--surface-sunken);   color: var(--text-muted); }
.status-chip--muted     { background: var(--surface-sunken);   color: var(--text-muted); }
.status-chip--undereval { background: var(--risk-moderate-bg); color: var(--risk-moderate-fg); }
.status-chip--adminonly { background: var(--surface-sunken);   color: var(--text-secondary); }

/* Compact action button for table rows */
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-small); }

/* Header row with a right-aligned action (e.g. Export CSV). */
.head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.detail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.detail-actions--top { align-items: center; margin-bottom: var(--space-4); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-head h3 { margin: 0; }

/* Tool detail: two-column layout with a regulatory framework side panel. */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 1024px) { .detail-layout { grid-template-columns: 1fr; } }
.detail-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.detail-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.detail-section__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-secondary);
}
.detail-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.detail-section__head .detail-section__title { margin-bottom: var(--space-1); }
.detail-section__edit { font-size: var(--text-tiny); font-weight: 600; color: var(--brand-navy-700, #1B3A6B); text-decoration: none; white-space: nowrap; }
.detail-section__edit:hover { text-decoration: underline; }
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
@media (max-width: 600px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.detail-field--full { grid-column: 1 / -1; }
.detail-field__label {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text-muted);
}
.detail-field__value {
  background: var(--surface-sunken);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-height: 1.25em;
  color: var(--text-primary);
}
.detail-field__value--multiline { white-space: pre-wrap; min-height: 3em; }

/* Applicable regulatory framework panel */
.regframe__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.regframe__head .detail-section__title { margin: 0; }
.regframe__group { margin-top: var(--space-4); }
.regframe__group:first-of-type { margin-top: var(--space-3); }
.regframe__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-border);
}
.regframe__group-title {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: var(--text-primary);
}
.regframe__list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.regframe__list--touch { margin-top: var(--space-2); opacity: 0.92; }
.regframe__list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.regframe__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--brand-gold-600);
}
.regframe__count {
  background: #EFE7FC;
  color: #7C3AED;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: var(--text-small);
  font-weight: 700;
  flex: none;
}

/* Pager */
.table-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.table-pager__controls { display: flex; align-items: center; gap: var(--space-2); }

/* ============================================================
   Vendor Historical Activity Monitoring (Mon-P2). Sectioned list
   and detail view. CSP-safe (class-based) like the rest of the app.
   ============================================================ */
.page-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-muted);
}
.mon-back { color: inherit; text-decoration: none; }
.mon-back:hover { color: var(--text-primary); text-decoration: underline; }

.mon-section { margin-bottom: var(--space-5); }
.mon-section__head { margin-bottom: var(--space-3); }
.mon-section__head h2 { margin: 0 0 var(--space-1); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.mon-section__sub { margin: 0; color: var(--text-muted); font-size: var(--text-small); }

.mon-table th, .mon-table td { vertical-align: middle; }
.mon-table .num, .data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mon-table thead th.num { text-align: right; }
.mon-table__link { color: var(--brand-navy-900); text-decoration: none; font-weight: 600; }
.mon-table__link:hover { text-decoration: underline; color: var(--brand-gold-600); }

.mon-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  background: var(--surface-frame);
}
.mon-meta__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mon-meta__label { font-size: var(--text-tiny); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; }
.mon-meta__value { color: var(--text-primary); font-weight: 600; }

.mon-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.mon-cards > * { min-width: 0; }
@media (max-width: 980px) { .mon-cards { grid-template-columns: 1fr; } }

.card-head__count {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-small);
  font-weight: 700;
}

.data-table--compact thead th { padding: 6px var(--space-3); }
.data-table--compact tbody td { padding: 6px var(--space-3); }

.mon-form { display: block; }
.mon-section__head--row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.mon-table__check { width: 36px; text-align: center; }
.mon-table__check input[type="checkbox"] { cursor: pointer; }
.mon-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-4) 0;
}
.mon-actions__hint { color: var(--text-muted); font-size: var(--text-small); }

.mon-upload-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 560px; }
.mon-upload-form .form-row { display: flex; flex-direction: column; gap: 6px; }
.mon-upload-form .form-row label { font-weight: 600; font-size: var(--text-small); color: var(--text-secondary); }
.mon-upload-form .form-row select,
.mon-upload-form .form-row input[type="file"] {
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-base);
  font: inherit;
}
.mon-upload-form .form-row--actions { flex-direction: row; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.mon-upload-form .form-row textarea {
  padding: 10px 12px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-base);
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 160px;
}

/* Ingest-mode chooser (AH-2). Two side-by-side radio cards; the second
   (Admin API) is disabled and labeled "Coming soon" until AH-6. */
.ingest-mode {
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: var(--space-3);
  margin: 0;
  background: var(--surface-frame);
}
.ingest-mode legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.ingest-mode__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 6px;
  cursor: pointer;
  margin-top: 4px;
}
.ingest-mode__option:hover { background: var(--surface-sunken); }
.ingest-mode__option--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.ingest-mode__option--disabled:hover { background: transparent; }
.ingest-mode__option input[type="radio"] { margin-top: 4px; cursor: inherit; flex: none; }
.ingest-mode__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ingest-mode__title {
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.ingest-mode__sub { color: var(--text-muted); font-size: var(--text-small); }

/* Tighter action row inside the page header for inline-action pages. */
.page-header__actions { margin: var(--space-2) 0 0; }
.page-header__subtitle {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--text-muted);
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Per-vendor file block within an audit run (AH-3). Stacked cards inside
   the Files section, each with its own table + inline upload form. */
.audit-files {
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface-base);
}
.audit-files + .audit-files { margin-top: var(--space-3); }
.audit-files__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.audit-files__head h4 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
.audit-files__meta { display: inline-flex; align-items: center; gap: var(--space-3); }
.audit-files__count { color: var(--text-muted); font-size: var(--text-small); }

.audit-files__form {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--surface-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.audit-files__pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 240px;
}
.audit-files__hint { color: var(--text-muted); font-size: var(--text-small); }
.audit-files__form input[type="file"] {
  padding: 6px 8px;
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  background: var(--surface-frame);
  font: inherit;
}
.audit-files__note { font-size: var(--text-tiny); font-style: italic; margin-top: 2px; }
.audit-files__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-tiny);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1F8A4C;
}
.audit-files__live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1F8A4C;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Audit run actions row (Run audit / Export PDF). Same shape as .mon-actions
   but with an accented background to read as a primary action zone. */
.audit-actions {
  background: var(--surface-frame);
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}

.audit-summary__line { margin: var(--space-3) 0 0; }

/* Per-vendor findings block inside the Complete view. */
.audit-vendor {
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface-base);
}
.audit-vendor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.audit-vendor__head h4 { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
.audit-vendor__meta { color: var(--text-muted); font-size: var(--text-small); }
.audit-vendor__table { margin-bottom: var(--space-3); }

.audit-vendor__tops {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 900px) { .audit-vendor__tops { grid-template-columns: 1fr; } }
.audit-vendor__topcol h5 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-tiny);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}
.audit-tops { margin: 0; padding: 0; list-style: none; }
.audit-tops li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 4px 0;
  border-top: 1px dashed var(--surface-border);
  font-size: var(--text-small);
}
.audit-tops li:first-child { border-top: none; }
.audit-tops .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); }

.mon-actions__form { margin: 0; }
.mon-actions__form button { font: inherit; }

/* AI Network Monitoring (Mon-P4) page-specific helpers. */
.net-subhead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.net-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: var(--surface-sunken);
  padding: 1px 6px;
  border-radius: 4px;
}
.net-excluded {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
}
.net-excluded li { margin-bottom: 4px; }

/* Lumi Desktop Monitoring overview (Mon-P4b). Three-column dashboard with
   one card per channel (Browser, Desktop, Extension). Stat list is a
   two-column <dl> so the labels and numbers grid-align across the card. */
.lumi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.lumi-grid > * { min-width: 0; }
@media (max-width: 1080px) { .lumi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .lumi-grid { grid-template-columns: 1fr; } }

.lumi-card { display: flex; flex-direction: column; gap: var(--space-3); }
.lumi-card__head { display: flex; align-items: center; gap: var(--space-3); }
.lumi-card__icon { width: 32px; height: 32px; flex: none; color: var(--text-secondary); }
.lumi-card__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.lumi-card__title h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.lumi-card__status {
  display: inline-block;
  font-size: var(--text-tiny);
  background: var(--surface-sunken);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lumi-card--blue  .lumi-card__icon { color: #2B5CE6; }
.lumi-card--blue  .lumi-card__status { background: #E7ECFC; color: #1B3A6B; }
.lumi-card--gold  .lumi-card__icon { color: var(--brand-gold-600); }
.lumi-card--gold  .lumi-card__status { background: var(--risk-moderate-bg); color: var(--risk-moderate-fg); }
.lumi-card--green .lumi-card__icon { color: #1F8A4C; }
.lumi-card--green .lumi-card__status { background: var(--risk-low-bg); color: var(--risk-low-fg); }
.lumi-card__desc { margin: 0; color: var(--text-muted); font-size: var(--text-small); line-height: 1.4; }

.lumi-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px var(--space-3);
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}
.lumi-stats dt {
  color: var(--text-muted);
  font-weight: 500;
  padding: 6px 0 0;
  border-top: 1px dashed var(--surface-border);
}
.lumi-stats dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 6px 0 0;
  border-top: 1px dashed var(--surface-border);
  color: var(--text-primary);
}
.lumi-stats dt:first-of-type,
.lumi-stats dd:first-of-type { border-top: none; padding-top: 0; }

.lumi-card__foot { margin-top: auto; padding-top: var(--space-2); }

/* ============================================================
   Mode badge: per-feature monitoring posture indicator.
   Layout-injected at the top of <main> for vendor / monitoring /
   lumi groups; section-level on the network page (Traffic = passive,
   Decryption = active). Big, branded, with an icon "chip" on the left.
   ============================================================ */
.mode-row {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3) 0 var(--space-2);
}
.mode-badge {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid transparent;
  background: var(--surface-base);
  box-shadow: 0 1px 2px rgba(11, 30, 61, 0.08), 0 4px 12px rgba(11, 30, 61, 0.04);
  cursor: default;
  overflow: hidden;
  font-family: inherit;
}
.mode-badge__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  flex: none;
}
.mode-badge__icon { width: 28px; height: 28px; color: #fff; }
.mode-badge__text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px 10px 14px;
  min-width: 0;
}
.mode-badge__label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.05;
}
.mode-badge__sub {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  opacity: 0.78;
}

/* Passive: navy/gold cool palette. Icon chip is deep navy with a gold
   accent ring; body is a soft tinted cream tone for contrast. */
.mode-badge--passive {
  border-color: #C7D2EB;
  background: linear-gradient(180deg, #F4F7FF 0%, #E7ECFC 100%);
}
.mode-badge--passive .mode-badge__icon-wrap {
  background: linear-gradient(135deg, var(--brand-navy-900) 0%, #1B3A6B 100%);
  box-shadow: inset 0 -2px 0 rgba(196, 154, 60, 0.55);
}
.mode-badge--passive .mode-badge__label { color: var(--brand-navy-900); }
.mode-badge--passive .mode-badge__sub   { color: #1B3A6B; }

/* Active: green palette with a brighter accent. */
.mode-badge--active {
  border-color: #B7E4C7;
  background: linear-gradient(180deg, #F1FAF4 0%, #DEF4E5 100%);
}
.mode-badge--active .mode-badge__icon-wrap {
  background: linear-gradient(135deg, #14532D 0%, #1F8A4C 100%);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.18);
}
.mode-badge--active .mode-badge__label { color: #14532D; }
.mode-badge--active .mode-badge__sub   { color: #1F8A4C; }

/* Section-level badge (e.g., Network page sub-sections). Compact pill
   variant that sits inline with the section h2. Drops the subtitle. */
.mode-badge--inline {
  border-radius: 999px;
  vertical-align: middle;
  margin-left: var(--space-3);
  box-shadow: none;
}
.mode-badge--inline .mode-badge__icon-wrap { padding: 4px 8px; }
.mode-badge--inline .mode-badge__icon { width: 14px; height: 14px; }
.mode-badge--inline .mode-badge__text { padding: 4px 12px 4px 6px; }
.mode-badge--inline .mode-badge__label { font-size: 0.7rem; letter-spacing: 0.08em; }
.mode-badge--inline .mode-badge__sub { display: none; }

/* /users/{id} maintenance detail page. Two-column grid (profile + actions)
   that collapses to a single column on narrow screens. */
.user-detail-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 900px) { .user-detail-grid { grid-template-columns: 1fr; } }
.user-card { margin: 0; }
.user-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.user-actions form { margin: 0; }
.user-actions form + form {
  border-top: 1px solid var(--surface-border);
  padding-top: var(--space-3);
}
.user-actions__hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-tiny);
  color: var(--text-muted);
}
.user-issued-link { margin-bottom: var(--space-3); }
.user-issued-link h3 { margin: 0 0 var(--space-2); }
.user-issued-link__url {
  margin: var(--space-2) 0 0;
  word-break: break-all;
}
.user-issued-link__url code {
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--surface-border);
  border-radius: 6px;
  font-size: var(--text-small);
}

/* --- FI-scoring: adoption stage track + org assessment (F3) ------------- */
.stage-banner { margin-bottom: var(--space-4); }
.stage-banner__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.stage-banner__label { margin: 0; font-size: var(--text-tiny); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; }
.stage-banner__value { margin: var(--space-1) 0 0; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.stage-banner__value--empty { color: var(--text-muted); font-weight: 600; font-size: var(--text-body); }

/* Horizontal 4-step track. done = navy filled, current = gold, todo = muted. */
.stage-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.stage-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); border-radius: 8px; border: 1px solid var(--surface-border); position: relative; }
.stage-step__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: var(--text-small); background: var(--surface-sunken); color: var(--text-muted); }
.stage-step__label { font-size: var(--text-small); font-weight: 600; color: var(--text-secondary); }
.stage-step--done { background: var(--surface-sunken); }
.stage-step--done .stage-step__num { background: var(--brand-navy-700, #1B3A6B); color: #fff; }
.stage-step--current { background: var(--gold-50, #FBF6EA); border-color: var(--gold-600, #C49A3C); box-shadow: inset 0 0 0 1px var(--gold-600, #C49A3C); }
.stage-step--current .stage-step__num { background: var(--gold-600, #C49A3C); color: var(--brand-navy-900, #0B1E3D); }
.stage-step--current .stage-step__label { color: #94701F; }

.stage-card { margin-bottom: var(--space-4); }
.stage-card__score { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Org assessment questionnaire */
.org-form__hint { margin: 0 0 var(--space-3); }
.org-dim { margin-bottom: var(--space-3); }
.org-dim__title { margin: 0 0 var(--space-2); }
.org-dim__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.org-statement { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--surface-border); }
.org-statement:first-child { border-top: 0; }
.org-statement__check { margin-top: 3px; flex: 0 0 auto; }
.org-statement__label { font-size: var(--text-small); color: var(--text-secondary); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; cursor: pointer; }
.org-statement__stage { flex: 0 0 auto; font-size: var(--text-tiny); }

/* --- FI-scoring: mitigation control questionnaire (F5) ------------------ */
.controls-hint { margin: 0 0 var(--space-3); }
.control-lever { margin-bottom: var(--space-3); }
.control-lever__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--surface-border); }
.control-lever__title h3 { margin: 0; }
.control-lever__domain { font-size: var(--text-tiny); }
.control-lever__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.control-lever__count { font-size: var(--text-small); color: var(--text-muted); font-weight: 600; }
.control-band { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--text-tiny); font-weight: 700; }
.control-band--0 { background: var(--surface-sunken); color: var(--text-muted); }
.control-band--1 { background: #FEF3C7; color: #92400E; }
.control-band--2 { background: #DBEAFE; color: #1E40AF; }
.control-band--3 { background: var(--risk-low-bg); color: var(--risk-low-fg); }
.control-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.control-q { display: grid; grid-template-columns: 1fr max-content; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--surface-border); }
.control-q:first-child { border-top: 0; }
.control-q__text { font-size: var(--text-small); color: var(--text-secondary); }
.control-q__code { font-weight: 700; color: var(--text-muted); font-size: var(--text-tiny); }
@media (max-width: 720px) { .control-q { grid-template-columns: 1fr; } }

/* --- FI-scoring: mitigant lines with Pill/Controls toggle (F6) ---------- */
.mitigant-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mitigant-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--surface-border); }
.mitigant-line:first-child { border-top: 0; }
.mitigant-line__name { font-size: var(--text-small); color: var(--text-secondary); font-weight: 600; }
.mitigant-line__rating { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
/* Answer-count reads as a pill button so it is clearly the place to click to open the control questions. */
.mitigant-line__link {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--brand-navy-700, #1B3A6B);
  border-radius: 999px;
  font-size: var(--text-tiny);
  font-weight: 600;
  color: var(--brand-navy-700, #1B3A6B);
  background: var(--surface-card, #fff);
  text-decoration: none;
  white-space: nowrap;
}
.mitigant-line__link:hover,
.mitigant-line__link:focus {
  background: var(--brand-navy-900, #0B1E3D);
  border-color: var(--brand-navy-900, #0B1E3D);
  color: #fff;
  text-decoration: none;
}
.seg--toggle { flex: 0 0 auto; }
.seg--toggle .seg__btn { padding: 4px 12px; }
@media (max-width: 760px) { .mitigant-line { grid-template-columns: 1fr; } .mitigant-line__rating { justify-content: flex-start; } }

/* --- Generic sticky-top (org assessment stage panel, F6+) --------------- */
.js-sticky { position: sticky; top: 0; z-index: 20; }
.js-sticky::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0;
  background: var(--surface-page);
}
.js-sticky.is-stuck::before { height: 100vh; }
.js-sticky.is-stuck { box-shadow: var(--shadow-card); }

/* --- AIMS AI RMF: NIST tags on the control questionnaire (Phase 2) ------ */
.nist-chip { background: var(--brand-navy-900, #0B1E3D); color: var(--gold-300, #E8C46A); font-weight: 700; }
.control-q__tags { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; margin-left: var(--space-1); vertical-align: middle; }
.control-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: var(--text-tiny); font-weight: 700; white-space: nowrap; }
.control-tag--nist { background: var(--surface-sunken); color: var(--brand-navy-700, #1B3A6B); }
.control-tag--trait { background: var(--gold-50, #FBF6EA); color: #94701F; }
.control-lever__domain .control-tag { margin-left: var(--space-1); }

/* --- AIMS AI RMF: NIST Map tags on tools (Phase 3) --------------------- */
.trait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
.trait-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--text-secondary); cursor: pointer; }

/* --- AIMS AI RMF: on-screen NIST function coverage panel (Phase 5) ------ */
.nist-panel__head { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.nist-func-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.nist-func { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-sunken); cursor: default; }
.nist-func:focus { outline: 2px solid var(--brand-gold-600, #C49A3C); outline-offset: 2px; }
.nist-func__name { font-size: var(--text-tiny); font-weight: 700; letter-spacing: .04em; color: var(--brand-navy-700, #1B3A6B); }
.nist-func__count { font-size: var(--text-h3); font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.nist-func__total { font-size: var(--text-small); font-weight: 600; color: var(--text-muted); }
.nist-func__purpose { font-size: var(--text-tiny); color: var(--text-secondary); }
.nist-func__hint { font-size: var(--text-tiny); color: var(--text-disabled, #94A3B8); margin-top: 2px; }

/* CSS-only detail popover (hover or keyboard focus; CSP-safe, no JS). */
.nist-func__pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 320px;
  max-width: 88vw;
  max-height: 340px;
  overflow-y: auto;
  padding: var(--space-3);
  background: var(--surface-card, #fff);
  border: 1px solid var(--surface-border, #D6DBE2);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(11, 30, 61, 0.18);
  text-align: left;
  white-space: normal;
}
.nist-func__pop--right { left: auto; right: 0; }
.nist-func:hover .nist-func__pop,
.nist-func:focus .nist-func__pop,
.nist-func:focus-within .nist-func__pop { display: block; }
.nist-func__pop-title { margin: 0 0 6px; font-size: var(--text-tiny); font-weight: 700; letter-spacing: .04em; color: var(--brand-navy-700, #1B3A6B); }
.nist-func__pop-line { margin: 0 0 6px; font-size: var(--text-small); color: var(--text-secondary); }
.nist-func__pop-label { display: block; font-weight: 600; color: var(--text-primary); }
.nist-func__pop-note { margin: 0 0 6px; font-size: var(--text-tiny); color: var(--text-muted); }
.nist-func__pop-note:last-child { margin-bottom: 0; }

/* --- AIMS adoption readiness: two-axis org assessment (readiness + exposure) --- */
.org-group__title { font-size: var(--text-h3); font-weight: 700; margin: var(--space-5) 0 var(--space-2); color: var(--brand-navy-900, #0B1E3D); }
.org-group__sub { font-size: var(--text-small); font-weight: 500; }
.stage-card__sub { font-size: var(--text-small); color: var(--text-secondary); margin: var(--space-2) 0 var(--space-1); }
.exposure-line { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* --- AIMS AI RMF risk-model editor: trait/function tags on fields -------- */
.cfg-field__name { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-bottom: 2px; }
.cfg-field__hint { font-size: var(--text-tiny, 11px); color: var(--text-tertiary, var(--text-secondary)); margin-top: 2px; font-weight: 400; }

/* --- AIMS AI RMF: faceted control grid (Phase B) ----------------------- */
.control-base { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.control-base:last-child { border-bottom: none; }
.control-base__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.control-base__title { font-weight: 600; color: var(--text-primary); flex: 1 1 320px; }
.control-base__count { font-size: var(--text-tiny); font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.control-facets { display: grid; gap: var(--space-1); padding-left: var(--space-3); }
.facet-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: var(--space-2); }
.facet-row__label { font-size: var(--text-small); color: var(--text-secondary); font-weight: 600; }
.seg--facet { max-width: 420px; }

/* --- AIMS AI RMF: org assessment banner actions ------------------------ */
.stage-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --- Catalog enrichment: spreadsheet "Sheet" grid view --------------------- */
.sheet-toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
.sheet-toggle, .sheet-filters, .sheet-export { display: flex; gap: var(--space-2); align-items: center; }
.sheet-filters { flex: 1 1 auto; flex-wrap: wrap; }
/* Sheet view scroll model: the GRID is the only scroll region. Make <main> a flex
   column that exactly fills its layout cell and never scrolls itself, then let the
   grid take the remaining height. Without this, <main> overflows by a few dozen px
   and its own (page-level) vertical scrollbar pushes the grid's horizontal scrollbar
   below the fold. Deterministic, no offset/header-height guessing. The base
   .sheet-scroll max-height below is the fallback for browsers without :has(). */
main:has(> .sheet-scroll) { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
main:has(> .sheet-scroll) > .sheet-scroll { flex: 1 1 auto; min-height: 160px; max-height: none; }
.sheet-scroll { overflow-x: scroll; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); min-height: 160px; max-height: calc(100vh - 340px); }
.sheet-scroll::-webkit-scrollbar { height: 14px; width: 14px; }
.sheet-scroll::-webkit-scrollbar-track { background: var(--surface-sunken); border-radius: 7px; }
.sheet-scroll::-webkit-scrollbar-thumb { background: var(--brand-navy-700, #1B3A6B); border-radius: 7px; border: 3px solid var(--surface-sunken); }
.sheet-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand-navy-900, #0B1E3D); }
.sheet-scroll::-webkit-scrollbar-corner { background: var(--surface-sunken); }
.sheet-table { border-collapse: collapse; width: 100%; font-size: var(--text-small); white-space: nowrap; }
.sheet-table thead th { position: sticky; top: 0; background: var(--brand-navy-900, #0B1E3D); color: #fff; text-align: left; padding: var(--space-2) var(--space-3); cursor: pointer; user-select: none; font-weight: 600; z-index: 1; }
.sheet-table thead th[data-sort="asc"]::after { content: " \2191"; }
.sheet-table thead th[data-sort="desc"]::after { content: " \2193"; }
.sheet-table tbody td { padding: 6px var(--space-3); border-top: 1px solid var(--border-subtle); }
.sheet-table tbody tr:nth-child(even) { background: var(--surface-sunken); }
.sheet-table tbody tr:hover { background: var(--gold-50, #FBF6EA); }
.page-header--actions { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.kpi__link { display: inline-block; margin-top: var(--space-2); font-size: var(--text-small); font-weight: 600; color: var(--brand-navy-700, #1B3A6B); text-decoration: none; }
.kpi__link:hover { text-decoration: underline; }

/* ── Bulk import review (Tools/ImportReview) ─────────────────────────────── */
.card--stack { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.text-muted { color: var(--text-muted); }
.table-scroll { overflow-x: auto; }

.imp-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.imp-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 4px var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--surface-border); background: var(--surface-muted);
  font-size: 0.85rem; color: var(--text-body);
}
.imp-chip strong { font-variant-numeric: tabular-nums; }

.imp-toolbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) 0; position: sticky; top: 0; z-index: 2;
  background: var(--surface-page);
}
.imp-ai { display: inline-flex; align-items: center; gap: var(--space-2); }
.imp-ai__note { font-size: 0.8rem; color: var(--text-muted); }

.imp-group { margin-bottom: var(--space-5); }
.imp-group__head {
  border-left: 4px solid var(--surface-border-strong);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2);
  background: var(--surface-muted); border-radius: var(--radius-sm);
}
.imp-group__title {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--text-base); cursor: pointer;
}
.imp-group__count {
  font-size: 0.8rem; font-variant-numeric: tabular-nums;
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  background: var(--surface-card); border: 1px solid var(--surface-border);
}
.imp-group__blurb { margin: var(--space-1) 0 0; font-size: 0.82rem; color: var(--text-muted); }

.imp-bucket--inv .imp-group__head,
.imp-group__head.imp-bucket--inv { border-left-color: var(--gold-600); }
.imp-bucket--cat.imp-group__head { border-left-color: var(--color-navy); }
.imp-bucket--ai.imp-group__head { border-left-color: #2e7d64; }
.imp-bucket--nontech.imp-group__head { border-left-color: #9a6a6a; }
.imp-bucket--unc.imp-group__head { border-left-color: var(--surface-border-strong); }
.imp-chip.imp-bucket--cat { border-color: var(--color-navy); }
.imp-chip.imp-bucket--nontech { border-color: #9a6a6a; }

.imp-table { width: 100%; }
.imp-table thead th { white-space: nowrap; }
.imp-td-check { text-align: center; width: 1%; white-space: nowrap; }
.imp-name { width: 100%; min-width: 180px; }
.imp-cat, .imp-status { max-width: 210px; }
/* Mapping-screen file preview: a horizontally scrollable snapshot of the first rows. */
.imp-preview-scroll { overflow-x: auto; }
.imp-preview { font-size: 0.85rem; }
.imp-preview th, .imp-preview td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Chat door: a conversation column beside a proposed-mapping panel. */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .chat-layout { grid-template-columns: 1fr; } }
.chat-main { min-height: 420px; }
.chat-log { display: flex; flex-direction: column; gap: var(--space-3); max-height: 60vh; overflow-y: auto; padding-right: var(--space-2); }
.chat-msg { display: flex; flex-direction: column; gap: 2px; max-width: 85%; }
.chat-msg--user { align-self: flex-end; align-items: flex-end; }
.chat-msg--assistant { align-self: flex-start; align-items: flex-start; }
.chat-msg__who { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.03em; }
.chat-msg__text { white-space: pre-wrap; padding: var(--space-2) var(--space-3); border-radius: 12px; background: var(--surface-sunken); }
.chat-msg--user .chat-msg__text { background: var(--brand-navy-900); color: #fff; }
.chat-input { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); }
.chat-input textarea { flex: 1; resize: vertical; }
.chat-side { position: sticky; top: var(--space-4); }
.chat-map dt { font-size: 0.78rem; }
.chat-map dd { font-weight: 600; }
.chat-sep { border: none; border-top: 1px solid var(--surface-border); margin: var(--space-2) 0; }
.imp-muted { color: var(--text-muted); font-size: 0.88rem; }
/* "AI" chip on a review row the uploaded file flagged as AI. */
.imp-ai-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-navy-900);
  background: var(--brand-gold-200, #F2E3BE);
  border: 1px solid var(--brand-gold-600, #C49A3C);
  border-radius: 999px;
}
.imp-match {
  display: inline-block; font-size: 0.82rem; color: var(--text-secondary);
  padding: 1px var(--space-2); border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.imp-undo { display: inline; }

/* Import history list */
.imp-hist { margin-top: var(--space-4); }
/* Version stamp: report id + run timestamp + catalog snapshot on the review screen. */
.imp-report { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-4); }
.imp-report .detail-field__value { font-variant-numeric: tabular-nums; }
.imp-hist__id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; white-space: nowrap; }
.imp-hist__badge {
  display: inline-block; font-size: 0.78rem; padding: 2px var(--space-2);
  border-radius: var(--radius-full); border: 1px solid var(--surface-border);
  background: var(--surface-muted); white-space: nowrap;
}
.imp-hist__badge--done { border-color: var(--color-navy); }
.imp-hist__badge--staged { border-color: var(--gold-600); }
.imp-hist__badge--undone { border-color: #9a6a6a; }
.imp-hist__badge--discarded { color: var(--text-muted); }

/* In-progress state for long submits (import commit, undo, AI classify) */
/* Author `display` beats the UA stylesheet's [hidden]{display:none}, so the panel
   must opt back out explicitly or it shows on page load. */
.imp-progress[hidden] { display: none; }
.imp-progress {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) 0; padding: var(--space-3);
  border: 1px solid var(--surface-border); border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-sm); background: var(--surface-muted);
  color: var(--text-base); font-size: 0.9rem;
}
.imp-progress__spinner {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--surface-border-strong); border-top-color: var(--color-navy);
  animation: imp-spin 0.8s linear infinite;
}
@keyframes imp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .imp-progress__spinner { animation-duration: 2.4s; }
}

/* ── Self-service signup (public enrollment) ─────────────────────────────── */
.auth-card--wide { max-width: 720px; }
.signup .signup-section {
  margin: var(--space-6, 24px) 0 var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--brand-navy-700, #1b3a6b);
  font-size: 1.05rem;
  color: var(--brand-navy-900, #0b1e3d);
}
.signup .field-row {
  display: flex;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}
.signup .field-row .field { flex: 1 1 160px; }
.signup .btn--block { width: 100%; margin-top: var(--space-4, 16px); }

.signup .plan-grid { display: flex; gap: var(--space-3, 12px); flex-wrap: wrap; }
.signup .plan-card {
  display: block;
  border: 1px solid var(--brand-navy-700, #1b3a6b);
  border-radius: 8px;
  padding: var(--space-3, 12px);
  flex: 1 1 220px;
  cursor: pointer;
}
.signup .plan-card--single { cursor: default; }
.signup .plan-card__name { font-weight: 600; color: var(--brand-navy-900, #0b1e3d); display: block; }
.signup .plan-card__price { color: var(--brand-gold-600, #c49a3c); font-weight: 600; display: block; margin: 2px 0; }
.signup .plan-card__desc { font-size: 0.9rem; display: block; }

/* Payment method: CSS-only tab toggle (no inline JS; CSP-safe). */
.signup .pay-radio { position: absolute; opacity: 0; pointer-events: none; }
.signup .pay-tab {
  display: inline-block;
  padding: 6px 14px;
  margin-right: 6px;
  border: 1px solid var(--brand-navy-700, #1b3a6b);
  border-radius: 6px;
  cursor: pointer;
}
.signup #pm-card:checked ~ .pay-tab[for="pm-card"],
.signup #pm-ach:checked ~ .pay-tab[for="pm-ach"] {
  background: var(--brand-navy-900, #0b1e3d);
  color: #fff;
}
.signup .pay-fields { display: none; margin-top: var(--space-3, 12px); }
.signup #pm-card:checked ~ .pay-card { display: block; }
.signup #pm-ach:checked ~ .pay-ach { display: block; }

/* ── Product updates tile (PU-01), pinned above the dashboard title ───────── */
.pupd { margin: 0 0 var(--space-5, 24px) 0; }
.pupd__toggle { position: absolute; opacity: 0; pointer-events: none; }
.pupd__top { display: flex; gap: var(--space-2, 8px); align-items: stretch; }

/* Compact counters tile: 4 stacked "number + label" lines. */
.pupd__counters {
  flex: 0 0 auto;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--surface-border, #d6dbe2);
  border-radius: 10px;
}
.pupd__counter { display: flex; align-items: baseline; gap: var(--space-2, 8px); text-decoration: none; color: inherit; }
.pupd__counter-num { min-width: 2.5ch; font-size: 0.95rem; font-weight: 700; color: var(--brand-navy-900, #0b1e3d); }
.pupd__counter-label { font-size: var(--text-tiny, 0.75rem); color: var(--text-muted, #475569); }
.pupd__counter--link { cursor: pointer; }
.pupd__counter--link:hover .pupd__counter-label { color: var(--brand-navy-700, #1b3a6b); }
.pupd__counter--alert .pupd__counter-num { color: var(--brand-gold-600, #c49a3c); }

/* Wide message tile: single line, fills the rest of the row. */
.pupd__tile {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--surface-border, #d6dbe2);
  border-radius: 10px;
  cursor: pointer;
}
.pupd__tile-icon { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--brand-navy-700, #1b3a6b); stroke-width: 1.6; }
.pupd__tile-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pupd__tile-title { font-weight: 600; color: var(--brand-navy-900, #0b1e3d); }
.pupd__tile-sep { color: var(--text-disabled, #94a3b8); margin: 0 4px; }
.pupd__tile-summary { color: var(--text-muted, #475569); font-size: var(--text-small, 0.8125rem); }
.pupd__badge { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--brand-navy-900, #0b1e3d); color: #fff; font-size: var(--text-tiny, 0.75rem); font-weight: 600; }
.pupd__chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--text-muted, #475569); stroke-width: 2; transition: transform 0.15s ease; }
.pupd__toggle:checked ~ .pupd__top .pupd__chev { transform: rotate(180deg); }

/* Expandable panel: full width below the top row. */
.pupd__panel {
  display: none;
  margin-top: var(--space-2, 8px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--surface-border, #d6dbe2);
  border-radius: 10px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
}
.pupd__toggle:checked ~ .pupd__panel { display: block; }

.pupd__tabs { display: flex; gap: var(--space-3, 12px); border-bottom: 1px solid var(--surface-border, #d6dbe2); margin-bottom: var(--space-1, 4px); }
.pupd__tab { padding: var(--space-1, 4px) 0; font-size: var(--text-small, 0.8125rem); color: var(--text-muted, #475569); text-decoration: none; cursor: pointer; border-bottom: 2px solid transparent; }
.pupd__tab--active { color: var(--brand-navy-900, #0b1e3d); font-weight: 600; border-bottom-color: var(--brand-gold-600, #c49a3c); }

.pupd__form { margin: 0; }
.pupd__list { list-style: none; margin: 0; padding: 0; }
/* Single-line item: summary truncates, actions pinned right. */
.pupd__item { display: flex; align-items: center; gap: var(--space-2, 8px); padding: var(--space-2, 8px) 0; border-bottom: 1px solid var(--surface-sunken, #eef0f4); }
.pupd__item:last-child { border-bottom: 0; }
.pupd__cat { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--surface-sunken, #eef0f4); color: var(--text-secondary, #334155); font-size: var(--text-tiny, 0.75rem); font-weight: 600; }
.pupd__item-title { flex: none; font-weight: 600; color: var(--brand-navy-900, #0b1e3d); }
.pupd__item-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted, #475569); font-size: var(--text-small, 0.8125rem); }
.pupd__item-actions { flex: none; display: flex; align-items: center; gap: var(--space-2, 8px); }
.pupd__item-link { color: var(--text-link, #1b3a6b); font-size: var(--text-small, 0.8125rem); font-weight: 600; white-space: nowrap; }
.pupd__empty { color: var(--text-muted, #475569); font-size: var(--text-small, 0.8125rem); padding: var(--space-2, 8px) 0; margin: 0; }

/* Narrow screens: stack the counters above the message tile. */
@media (max-width: 640px) {
  .pupd__top { flex-direction: column; }
  .pupd__counters { min-width: 0; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
}