/* ==========================================================================
   AuditFlow Enterprise Design System — foundation layer
   ==========================================================================
   Additive, opt-in stylesheet. Loaded after styles.css so it can coexist
   with legacy page-local CSS during migration. Nothing in here overrides
   existing classes by default — pages adopt .ds-* classes incrementally.

   Structure:
     1. Tokens (color, type, space, radius, shadow, motion, z-index)
     2. Base component classes (button, badge, card, table, form, modal,
        kpi, empty/loading/error state, alert/toast, breadcrumb)
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. TOKENS                                                              */
/* ---------------------------------------------------------------------- */

:root {
  /* Neutral scale — cool slate-blue, matches the existing navy sidebar */
  --n-950: #0b1220;
  --n-900: #0f172a;
  --n-800: #1e293b;
  --n-700: #334155;
  --n-600: #475569;
  --n-500: #64748b;
  --n-400: #94a3b8;
  --n-300: #cbd5e1;
  --n-200: #e2e8f0;
  --n-100: #f1f5f9;
  --n-50:  #f8fafc;
  --n-0:   #ffffff;

  /* Brand — reuses the app's existing identity (navy chrome + amber mark) */
  --brand-primary: #0f172a;
  --brand-primary-hover: #1e293b;
  --brand-accent: #f59e0b;
  --brand-accent-hover: #d97706;
  --brand-accent-soft: #fef3c7;

  /* Semantic severity (risk) — formalizes what the app already renders */
  --sev-critical: #b91c1c;
  --sev-critical-soft: #fef2f2;
  --sev-critical-border: #fecaca;
  --sev-high: #b45309;
  --sev-high-soft: #fffbeb;
  --sev-high-border: #fde68a;
  --sev-low: #15803d;
  --sev-low-soft: #f0fdf4;
  --sev-low-border: #bbf7d0;
  --sev-medium: #6B5300;
  --sev-medium-soft: #F8E58E;
  --sev-medium-border: #e8c74d;

  /* Semantic status (workflow state) — formalizes FRMS pill conventions */
  --st-open: #92400e;         --st-open-soft: #fef3c7;         --st-open-border: #fde68a;
  --st-progress: #1d4ed8;     --st-progress-soft: #dbeafe;     --st-progress-border: #bfdbfe;
  --st-awaiting: #6d28d9;     --st-awaiting-soft: #ede9fe;     --st-awaiting-border: #ddd6fe;
  --st-received: #0e7490;     --st-received-soft: #cffafe;     --st-received-border: #a5f3fc;
  --st-review: #4338ca;       --st-review-soft: #e0e7ff;       --st-review-border: #c7d2fe;
  --st-closed: #166534;       --st-closed-soft: #dcfce7;       --st-closed-border: #86efac;
  --st-overdue: #991b1b;      --st-overdue-soft: #fee2e2;      --st-overdue-border: #fecaca;
  --st-published: #0369a1;    --st-published-soft: #e0f2fe;    --st-published-border: #7dd3fc;
  --st-draft: #475569;        --st-draft-soft: #f1f5f9;        --st-draft-border: #e2e8f0;

  /* Feedback (system messages — distinct from risk/status semantics) */
  --fb-success: #166534;      --fb-success-soft: #f0fdf4;      --fb-success-border: #86efac;
  --fb-error: #b91c1c;        --fb-error-soft: #fef2f2;        --fb-error-border: #fca5a5;
  --fb-warning: #92400e;      --fb-warning-soft: #fffbeb;      --fb-warning-border: #fde68a;
  --fb-info: #1d4ed8;         --fb-info-soft: #eff6ff;         --fb-info-border: #bfdbfe;

  /* Surface + text (theme-swappable layer — see dark-mode block below) */
  --surface-page: #f8fafc;
  --surface-card: #ffffff;
  --surface-sunken: #f8fafc;
  --surface-overlay: rgba(15, 23, 42, 0.45);
  --text-primary: #111827;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --border-default: #e5e7eb;
  --border-strong: #cbd5e1;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Spacing — 4px base unit */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 6px 16px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.14);

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);

  /* Breakpoints (documented as custom properties for reference; media
     queries can't consume vars directly, so these must be kept in sync
     with the @media rules below) */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;

  /* Z-index scale */
  --z-sticky: 90;
  --z-dropdown: 400;
  --z-modal: 1200;
  --z-toast: 1400;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Dark mode — token layer only. Components below reference tokens, never
   literal hex, so this block is the entire dark-mode implementation.
   Not activated app-wide yet (see design-system plan, section 22); kept
   here so the migration doesn't require rewriting components later. */
:root[data-theme="dark"] {
  --surface-page: #0d1117;
  --surface-card: #151b26;
  --surface-sunken: #0f1621;
  --surface-overlay: rgba(0,0,0,0.6);
  --text-primary: #e5e9f0;
  --text-secondary: #a8b0c0;
  --text-tertiary: #6b7385;
  --border-default: #232b3a;
  --border-strong: #313c4f;
}

/* ---------------------------------------------------------------------- */
/* 2. COMPONENTS                                                          */
/* ---------------------------------------------------------------------- */

/* --- Buttons ------------------------------------------------------------
   .ds-btn is the base; pair with exactly one intent modifier and
   optionally one size modifier. Replaces one-off inline
   `style="background:#172554"` buttons scattered across pages. */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .1px;
  border-radius: var(--radius-md);
  padding: var(--density-btn-padding-y, 9px) var(--density-btn-padding-x, 16px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              opacity var(--motion-fast) var(--ease-standard);
  white-space: nowrap;
}
.ds-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.ds-btn[disabled], .ds-btn.is-disabled { opacity: .5; cursor: not-allowed; }

.ds-btn--primary { background: var(--brand-primary); color: #fff; }
.ds-btn--primary:hover:not([disabled]) { background: var(--brand-primary-hover); }

.ds-btn--accent { background: var(--brand-accent); color: #1c1000; }
.ds-btn--accent:hover:not([disabled]) { background: var(--brand-accent-hover); color: #fff; }

.ds-btn--danger { background: var(--fb-error); color: #fff; }
.ds-btn--danger:hover:not([disabled]) { background: #991b1b; }

/* AF: AI-powered generation actions (Generate Business Overview, Generate
   Procedures, Generate Premium Bullets, etc). Matches the Premium Finding
   Generator's own Generate button (.btn-gen in audit.html) so every
   AI-generation action across the platform reads as the same capability. */
.ds-btn--ai {
  background: linear-gradient(135deg, #064e3b 0%, #064e3b 40%, #065f46 65%, #047857 85%, #059669 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(6, 78, 59, .4);
}
.ds-btn--ai:hover:not([disabled]) {
  box-shadow: 0 4px 20px rgba(6, 78, 59, .6);
  opacity: .93;
}

/* AF: Guided audit creation (Create Audit wizard) — a visibly "navy" CTA for
   Next / final Create Audit, distinct from .ds-btn--primary's near-black
   #0f172a. Reuses the existing hero gradient (see .ds-page-hero) rather than
   introducing a new color. Scoped to the wizard only. */
.ds-wizard-cta {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #1e3a5f 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .35);
}
.ds-wizard-cta:hover:not([disabled]) {
  background: linear-gradient(135deg, var(--brand-primary-hover) 0%, #24466e 100%);
}

.wizard-skip-link {
  background: none;
  border: none;
  padding: 6px 2px;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}
.wizard-skip-link:hover { color: var(--text-secondary); }
.wizard-skip-link:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* AF: Audit Procedure Testing — collapsible procedure cards. */
.proc-item__header[aria-expanded="true"] .proc-item__chevron { transform: rotate(90deg); }
.proc-item__header:hover { background: var(--surface-sunken); }
.proc-item__header:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
.proc-item__notes { width: 100%; box-sizing: border-box; }

.ds-btn--success { background: var(--fb-success); color: #fff; }
.ds-btn--success:hover:not([disabled]) { background: #14532d; }

.ds-btn--warning { background: var(--fb-warning-soft); color: var(--fb-warning); border-color: var(--fb-warning-border); }
.ds-btn--warning:hover:not([disabled]) { background: var(--fb-warning-border); }

.ds-btn--outline { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong); }
.ds-btn--outline:hover:not([disabled]) { background: var(--surface-sunken); }

.ds-btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.ds-btn--ghost:hover:not([disabled]) { background: var(--surface-sunken); color: var(--text-primary); }

.ds-btn--sm { padding: 6px 11px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.ds-btn--lg { padding: 12px 22px; font-size: var(--text-base); border-radius: var(--radius-lg); }
.ds-btn--block { width: 100%; }

/* --- Badges / pills -------------------------------------------------------
   One shape language for every status/severity signal in the product.
   Always pair color with the text label — never rely on color alone. */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .2px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  line-height: 1.5;
}
.ds-badge--high                         { background: var(--sev-high-soft);   color: var(--sev-high);   border-color: var(--sev-high-border); }
.ds-badge--critical, .ds-badge--severe  { background: var(--sev-critical-soft); color: var(--sev-critical); border-color: var(--sev-critical-border); }
.ds-badge--medium                       { background: var(--sev-medium-soft); color: var(--sev-medium); border-color: var(--sev-medium-border); }
.ds-badge--low                          { background: var(--sev-low-soft);   color: var(--sev-low);    border-color: var(--sev-low-border); }

.ds-badge--open       { background: var(--st-open-soft);      color: var(--st-open);      border-color: var(--st-open-border); }
.ds-badge--progress   { background: var(--st-progress-soft);  color: var(--st-progress);  border-color: var(--st-progress-border); }
.ds-badge--awaiting   { background: var(--st-awaiting-soft);  color: var(--st-awaiting);  border-color: var(--st-awaiting-border); }
.ds-badge--received   { background: var(--st-received-soft);  color: var(--st-received);  border-color: var(--st-received-border); }
.ds-badge--review     { background: var(--st-review-soft);    color: var(--st-review);    border-color: var(--st-review-border); }
.ds-badge--closed     { background: var(--st-closed-soft);    color: var(--st-closed);    border-color: var(--st-closed-border); }
.ds-badge--overdue    { background: var(--st-overdue-soft);   color: var(--st-overdue);   border-color: var(--st-overdue-border); }
.ds-badge--published  { background: var(--st-published-soft); color: var(--st-published); border-color: var(--st-published-border); }
.ds-badge--draft      { background: var(--st-draft-soft);     color: var(--st-draft);     border-color: var(--st-draft-border); }
.ds-badge--warning    { background: var(--fb-warning-soft);   color: var(--fb-warning);   border-color: var(--fb-warning-border); }

/* Risk badges specifically use the High/Medium/Low naming the product's
   data already uses, kept distinct from --critical (reserved for
   system/security severity, not audit risk rating). */
.ds-badge--risk-critical { background: var(--sev-critical); color: #fff; border-color: var(--sev-critical); }
.ds-badge--risk-high   { background: var(--sev-critical-soft); color: var(--sev-critical); border-color: var(--sev-critical-border); }
.ds-badge--risk-medium { background: var(--sev-high-soft);     color: var(--sev-high);     border-color: var(--sev-high-border); }
.ds-badge--risk-low    { background: var(--sev-low-soft);      color: var(--sev-low);      border-color: var(--sev-low-border); }

/* --- Cards ---------------------------------------------------------------
   Matches the existing .card visual (white, soft shadow, 14px radius) so
   adopting .ds-card is a no-op for pages that already use .card; the
   value-add is the status-rail modifiers, which replace inline
   `style="border-left:4px solid #dc2626"` conditionals seen across
   dashboard.html / audit.html. */
.ds-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--density-card-padding, var(--space-5));
  box-shadow: var(--shadow-sm);
}
.ds-card--rail { border-left-width: 4px; }
.ds-card--rail-critical { border-left-color: var(--sev-critical); }
.ds-card--rail-high     { border-left-color: var(--sev-high); }
.ds-card--rail-low      { border-left-color: var(--sev-low); }
.ds-card--rail-info     { border-left-color: var(--fb-info); }

/* --- KPI tile --------------------------------------------------------------
   Formalizes the "colored rail + big tabular number + caption" pattern
   already used ad hoc in dashboard.html and duplicated in
   executive_summary.html. */
.ds-kpi {
  display: block;
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-lg);
  padding: var(--density-kpi-padding, 10px 12px);
  transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard);
}
a.ds-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ds-kpi__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.ds-kpi__value {
  font-size: 28px;
  line-height: 1.1;
  font-weight: var(--weight-black);
  letter-spacing: -0.7px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.ds-kpi__caption { font-size: var(--text-xs); color: var(--text-secondary); }

/* --- Tables ----------------------------------------------------------------
   Two densities: comfortable (dashboards, short lists) and compact
   (Findings Tracker / Audit Trail scale). Both share the dark header,
   the one convention already consistent across the app. */
.ds-table { width: 100%; border-collapse: collapse; background: var(--surface-card); font-size: var(--text-sm); }
.ds-table th {
  background: var(--brand-primary);
  color: #fff;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ds-table th, .ds-table td { padding: var(--density-table-cell-padding, var(--space-3)); border-bottom: 1px solid var(--border-default); vertical-align: top; }
.ds-table tr:hover td { background: var(--surface-sunken); }
.ds-table-link { color: var(--text-primary); font-weight: var(--weight-medium); text-decoration: none; }
.ds-table-link:hover { color: var(--fb-info); }
.ds-table--compact th, .ds-table--compact td { padding: var(--space-2); font-size: var(--text-sm); }
.ds-table--sticky-head th { position: sticky; top: 0; z-index: 1; }
.ds-table td[data-numeric], .ds-table--tabular td { font-variant-numeric: tabular-nums; }

/* --- Forms ------------------------------------------------------------- */
.ds-field { margin-bottom: var(--space-4); }
.ds-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--space-1);
}
.ds-field .ds-required { color: var(--fb-error); margin-left: 2px; }
.ds-field input, .ds-field select, .ds-field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  box-sizing: border-box;
}
.ds-field input:focus-visible, .ds-field select:focus-visible, .ds-field textarea:focus-visible {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
}
.ds-field__error { font-size: var(--text-xs); color: var(--fb-error); margin-top: 4px; }
.ds-field--invalid input, .ds-field--invalid select, .ds-field--invalid textarea { border-color: var(--fb-error); }

/* Modal field label — formalizes the bold/secondary label look every
   modal form was previously hand-recreating by overloading
   .ds-field__hint (a helper-text class) with a per-instance inline
   style override. Same visual output, one shared class. */
.ds-modal-field__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  margin: 4px 0 0;
}
.ds-modal-field__label .ds-required { color: var(--fb-error); margin-left: 2px; }

/* --- Breadcrumb ----------------------------------------------------------
   One markup pattern for the "Dashboard › Page" trail duplicated inline
   across audit.html / risk_register.html / findings_tracker.html. */
.ds-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-4); flex-wrap: wrap; }
.ds-breadcrumb a { color: var(--text-secondary); text-decoration: none; font-weight: var(--weight-medium); }
.ds-breadcrumb a:hover { color: var(--brand-accent-hover); }
.ds-breadcrumb .ds-breadcrumb__current { color: var(--text-primary); font-weight: var(--weight-bold); }
.ds-breadcrumb .ds-breadcrumb__sep { color: var(--border-strong); }

/* --- Alerts / flash (page-level, persistent) ---------------------------- */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
}
.ds-alert--success { background: var(--fb-success-soft); border-color: var(--fb-success-border); color: var(--fb-success); }
.ds-alert--error   { background: var(--fb-error-soft);   border-color: var(--fb-error-border);   color: var(--fb-error); }
.ds-alert--warning { background: var(--fb-warning-soft); border-color: var(--fb-warning-border); color: var(--fb-warning); }
.ds-alert--info    { background: var(--fb-info-soft);    border-color: var(--fb-info-border);    color: var(--fb-info); }

/* --- Toast (client-driven, transient) -----------------------------------
   Replaces the scattered inline "Saving… / Saved" status-text spans in
   findings_tracker.html / audit.html, which disappear once scrolled out
   of view. Corner-anchored, auto-dismisses. See design-system.js. */
.ds-toast-stack {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.ds-toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  background: var(--n-900);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: ds-toast-in var(--motion-base) var(--ease-standard);
}
.ds-toast--success { border-left: 3px solid #4ade80; }
.ds-toast--error   { border-left: 3px solid #f87171; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* --- Empty state ---------------------------------------------------------
   Replaces bare grey sentences ("No dept data.", "No results found")
   with a consistent icon + message (+ optional single CTA) block. */
.ds-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-tertiary);
}
.ds-empty__icon { font-size: 22px; margin-bottom: var(--space-2); color: var(--border-strong); }
/* Explicit --text-secondary, not inherited --text-tertiary: the tertiary
   token is ~2.6:1 on white and fails WCAG AA for real message text (the
   9.35 review's contrast-failure gap — see also audit_trail.html). */
.ds-empty__message { font-size: var(--text-base); margin-bottom: var(--space-3); color: var(--text-secondary); }
.ds-empty__action { }

/* --- Loading states --------------------------------------------------------
   .ds-spinner: inline async-action indicator (promotes audit.html's
   bespoke .loader to a shared class). .ds-skeleton: block placeholder
   for first-paint data fetches. */
.ds-spinner {
  width: 13px; height: 13px;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  display: inline-block;
  animation: ds-spin .8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-skeleton {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--border-default) 37%, var(--surface-sunken) 63%);
  background-size: 400% 100%;
  animation: ds-skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes ds-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --- Modal ----------------------------------------------------------------
   Formalizes the hand-rolled overlay pattern already used in
   dashboard.html's Publish Report dialog.
   Accessibility contract (see design-system.js): toggle the overlay via
   the `hidden` attribute (not display:none) so the MutationObserver
   picks it up; give any dismiss control `data-ds-modal-close` so
   Escape/backdrop-click/close-button all resolve to the same handler.
   Escape-to-close, backdrop-click-to-close, Tab focus-trap, and
   focus-on-open are all handled generically — no per-modal JS needed. */
.ds-modal-overlay {
  position: fixed; inset: 0;
  background: var(--surface-overlay);
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
/* An author rule's `display` always beats the UA stylesheet's
   `[hidden]{display:none}`, regardless of selector specificity — so
   without this override, toggling the `hidden` attribute (the
   documented contract, see design-system.js) does nothing and the
   overlay renders at all times. */
.ds-modal-overlay[hidden] { display: none; }
.ds-modal {
  position: relative;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: var(--space-6);
}
.ds-modal__title { font-size: var(--text-xl); font-weight: var(--weight-black); margin: 0 0 4px; color: var(--text-primary); }
.ds-modal__subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.ds-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

/* Header close (×) control — auto-injected by design-system.js into any
   .ds-modal that doesn't already provide its own [data-ds-modal-close]
   (e.g. the command palette / Copilot drawer keep their bespoke ones).
   One shared affordance instead of adding it by hand to every modal. */
.ds-modal__close {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-md);
  font-size: 20px; line-height: 1; color: var(--text-tertiary);
  cursor: pointer;
}
.ds-modal__close:hover { background: var(--surface-sunken); color: var(--text-primary); }
.ds-modal__close:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }

/* --- Callout grid ------------------------------------------------------
   Formalizes the colored RISK/RECOMMENDATION/AGREED-MEASURE summary blocks
   duplicated with hardcoded per-instance hex across audit.html's finding
   cards. Neutral by default; modifiers tint toward the relevant feedback
   color family. */
.ds-callout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.ds-callout { border-radius: var(--radius-md); padding: 10px 14px; background: var(--surface-sunken); }
.ds-callout__label { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .5px; margin-bottom: 4px; color: var(--text-secondary); }
.ds-callout__value { font-size: var(--text-sm); color: var(--text-primary); }
.ds-callout--risk     { background: var(--sev-critical-soft); }
.ds-callout--risk .ds-callout__label     { color: var(--sev-critical); }
.ds-callout--rec       { background: var(--fb-info-soft); }
.ds-callout--rec .ds-callout__label      { color: var(--fb-info); }
.ds-callout--positive  { background: var(--fb-success-soft); }
.ds-callout--positive .ds-callout__label { color: var(--fb-success); }

/* --- Next-step banner ------------------------------------------------------
   Formalizes the workflow-exit link-tile row already used in
   audit.html / findings_tracker.html so every workflow page can adopt
   it, including ones that currently dead-end. */
.ds-next-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.ds-next-step {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard);
}
.ds-next-step:hover { background: var(--n-100); }
.ds-next-step__title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); }
.ds-next-step__desc { font-size: var(--text-xs); color: var(--text-secondary); }
.ds-next-step__arrow { color: var(--text-tertiary); font-size: var(--text-xs); margin-left: auto; }

/* --- KPI rail color modifiers ---------------------------------------------
   Formalizes the per-metric colored left-border used ad hoc across
   executive_summary.html / dashboard.html KPI strips (inline
   border-left:4px solid #hex). Pair with .ds-kpi; overrides only the rail. */
.ds-kpi--info     { border-left-color: var(--fb-info); }
.ds-kpi--critical { border-left-color: var(--sev-critical); }
.ds-kpi--high     { border-left-color: var(--sev-high); }
.ds-kpi--low      { border-left-color: var(--sev-low); }
.ds-kpi--success  { border-left-color: var(--fb-success); }

/* --- Static / marketing pages ----------------------------------------------
   Shared shell for standalone pages that don't use the app sidebar
   (About, Contact, Privacy, Terms). Replaces four near-duplicate
   <style> blocks that each hand-rolled the same hero/section pattern. */
.ds-page-hero {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #1e3a5f 100%);
  color: #fff;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border-bottom: 1px solid var(--border-default);
}
.ds-page-hero--compact { padding: var(--space-10) var(--space-6); }
.ds-page-hero h1 { font-size: var(--text-3xl); font-weight: var(--weight-black); margin: 0 0 var(--space-3); letter-spacing: -1px; }
.ds-page-hero p { font-size: var(--text-md); color: var(--n-300); margin: 0; }

.ds-page-content { max-width: 900px; margin: 0 auto; padding: var(--space-16) var(--space-6); }
.ds-page-content--narrow { max-width: 800px; }
.ds-page-section { margin-bottom: var(--space-10); }
.ds-page-section h2 { font-size: var(--text-2xl); font-weight: var(--weight-black); color: var(--text-primary); margin: 0 0 var(--space-4); }
.ds-page-section h3 { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-secondary); margin: var(--space-3) 0 var(--space-2); }
.ds-page-section p { font-size: var(--text-md); line-height: 1.7; color: var(--text-secondary); margin: 0 0 var(--space-3); }
.ds-page-section ul { margin: var(--space-3) 0; padding-left: var(--space-6); }
.ds-page-section li { font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--space-2); line-height: 1.6; }
.ds-page-updated { font-size: var(--text-xs); color: var(--text-secondary); font-style: italic; margin-bottom: var(--space-6); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-4); }

.ds-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.ds-feature-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); }
.ds-feature-card i { font-size: var(--text-2xl); color: var(--brand-primary); margin-bottom: var(--space-3); }
.ds-feature-card h3 { font-size: var(--text-base); font-weight: var(--weight-bold); margin: 0 0 var(--space-2); color: var(--text-primary); }
.ds-feature-card p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

.ds-page-footer-nav { text-align: center; padding: var(--space-10) var(--space-6); color: var(--text-secondary); font-size: var(--text-sm); }
.ds-page-footer-nav a { color: #1d4ed8; text-decoration: none; font-weight: var(--weight-medium); margin: 0 var(--space-3); }
.ds-page-footer-nav a:hover { text-decoration: underline; }

/* --- Trust Center -----------------------------------------------------------
   Public, unauthenticated page (same shell family as About/Privacy/Terms)
   summarizing AuditFlow's actual current security/compliance/AI posture for
   procurement/security reviewers. Card grid + search up top, detailed
   anchor sections below; every claim in the template is sourced from the
   AF-9.93 security assessment and AF-9.94 Azure readiness assessment. */
.ds-trust-disclaimer {
  max-width: 900px; margin: var(--space-6) auto 0; padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6;
}
.ds-trust-disclaimer strong { color: var(--text-primary); }

.ds-trust-hero-search { max-width: 520px; margin: var(--space-6) auto 0; position: relative; }
.ds-trust-hero-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--n-500); font-size: var(--text-sm); }
.ds-trust-hero-search input {
  width: 100%; padding: 13px 16px 13px 44px; border-radius: var(--radius-pill);
  border: 1px solid transparent; font-size: var(--text-sm); font-family: inherit;
  background: #fff; color: var(--n-900, #111827);
}
.ds-trust-hero-search input:focus { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.ds-trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-5); margin: var(--space-2) 0 var(--space-12); }
.ds-trust-card {
  background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-5); text-decoration: none; display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.ds-trust-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15,23,42,.12); border-color: var(--brand-accent); }
.ds-trust-card.is-hidden { display: none; }
.ds-trust-card__icon { font-size: var(--text-2xl); color: var(--brand-primary); }
.ds-trust-card__title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); margin: 0; }
.ds-trust-card__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; flex: 1; margin: 0; }
.ds-trust-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
.ds-trust-card__link { font-size: var(--text-xs); font-weight: var(--weight-bold); color: #1d4ed8; }
.ds-trust-empty { display: none; text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); padding: var(--space-8) 0; }
.ds-trust-empty.is-visible { display: block; }

.ds-trust-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--weight-bold); border: 1px solid transparent; letter-spacing: .2px; white-space: nowrap; }
.ds-trust-pill--live { background: var(--fb-success-soft); color: var(--fb-success); border-color: var(--fb-success-border); }
.ds-trust-pill--planned { background: var(--fb-warning-soft); color: var(--fb-warning); border-color: var(--fb-warning-border); }
.ds-trust-pill--info { background: var(--surface-sunken); color: var(--text-secondary); border-color: var(--border-default); }

.ds-trust-section { margin: 0 0 var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-default); scroll-margin-top: var(--space-6); }
.ds-trust-section__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.ds-trust-section__head i { font-size: var(--text-2xl); color: var(--brand-primary); }
.ds-trust-section__head h2 { font-size: var(--text-2xl); font-weight: var(--weight-black); color: var(--text-primary); margin: 0; }
.ds-trust-section__intro { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.7; margin: var(--space-3) 0 var(--space-5); }

.ds-trust-fact { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px dashed var(--border-default); }
.ds-trust-fact:last-child { border-bottom: none; }
.ds-trust-fact__pill { flex-shrink: 0; margin-top: 2px; }
.ds-trust-fact__body strong { display: block; color: var(--text-primary); font-size: var(--text-sm); margin-bottom: 2px; }
.ds-trust-fact__body span { display: block; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

.ds-trust-back-to-top { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: #1d4ed8; text-decoration: none; margin-top: var(--space-2); }
.ds-trust-back-to-top:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .ds-trust-grid { grid-template-columns: 1fr; }
}

/* --- Resources Center (AF-9.96) --------------------------------------------
   Enterprise knowledge hub: searchable, card-based, self-contained. Renders
   inside the normal app shell (sidebar + topbar), unlike the static-pages
   block above which is for the sidebar-less legal/marketing pages. */
.ds-resources { max-width: 1100px; margin: 0 auto; }

.ds-resources__hero { text-align: center; padding: var(--space-8) var(--space-4) var(--space-6); }
.ds-resources__hero h1 { font-size: var(--text-3xl); font-weight: var(--weight-black); color: var(--text-primary); margin: 0 0 var(--space-2); letter-spacing: -0.5px; }
.ds-resources__hero p { font-size: var(--text-md); color: var(--text-secondary); margin: 0 auto var(--space-6); max-width: 560px; }

.ds-resources__search { position: relative; max-width: 480px; margin: 0 auto; }
.ds-resources__search i { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: var(--text-base); }
.ds-resources__search input {
  width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4) var(--space-3) 44px;
  font-size: var(--text-md); border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-primary); outline: none;
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.ds-resources__search input:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-accent-soft); }
.ds-resources__empty { text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); padding: var(--space-8) 0; }

.ds-resource-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.ds-resource-category-card {
  display: flex; align-items: flex-start; gap: var(--space-4); background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5);
  text-decoration: none; color: inherit; transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.ds-resource-category-card:hover { border-color: var(--brand-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ds-resource-category-card__icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--fb-info-soft); color: var(--fb-info); font-size: var(--text-lg);
}
.ds-resource-category-card__body { flex: 1; min-width: 0; }
.ds-resource-category-card__body h3 { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); margin: 0 0 4px; }
.ds-resource-category-card__body p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-2); line-height: 1.5; }
.ds-resource-category-card__count { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--weight-medium); }
.ds-resource-category-card__chevron { align-self: center; color: var(--text-tertiary); font-size: var(--text-sm); flex-shrink: 0; }

.ds-resources__category-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); }
.ds-resources__category-header__icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  background: var(--fb-info-soft); color: var(--fb-info); font-size: var(--text-xl);
}
.ds-resources__category-header h1 { font-size: var(--text-2xl); font-weight: var(--weight-black); color: var(--text-primary); margin: 0 0 4px; }
.ds-resources__category-header p { font-size: var(--text-base); color: var(--text-secondary); margin: 0; }

.ds-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.ds-resource-card {
  display: flex; gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.ds-resource-card--soon { opacity: 0.85; }
.ds-resource-card__icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--brand-primary); font-size: var(--text-base);
}
.ds-resource-card__body { flex: 1; min-width: 0; }
.ds-resource-card__title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ds-resource-card__body h3 { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); margin: 0 0 6px; }
.ds-resource-card__body p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-3); line-height: 1.55; }
.ds-resource-card__badge {
  font-size: 10px; font-weight: var(--weight-bold); letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--surface-sunken); color: var(--text-tertiary); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 2px 7px; margin-bottom: 6px;
}
.ds-resource-card__soon-badge {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary);
  background: var(--surface-sunken); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 3px 9px;
}
.ds-resource-card__result-category { font-size: 10px; font-weight: var(--weight-bold); letter-spacing: 0.4px; text-transform: uppercase; color: var(--fb-info); margin-bottom: 4px; }

.ds-resources__other-categories { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-default); }
.ds-resources__other-categories h2 { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 var(--space-3); }
.ds-resources__chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-resources__chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary); background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.ds-resources__chip:hover { border-color: var(--brand-accent); color: var(--text-primary); }

/* AF-9.97: Learning Experience — Learn More link, FAQ accordion, shortcuts
   table, product tour overlay, and the create-audit Guided Setup wizard. */
.ds-learn-more { flex-shrink: 0; }

.ds-faq-item { cursor: pointer; }
.ds-faq-item__question { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); list-style: none; }
.ds-faq-item__question::-webkit-details-marker { display: none; }
.ds-faq-item__question::before { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: var(--space-3); color: var(--brand-accent); display: inline-block; transition: transform var(--motion-fast) var(--ease-standard); }
.ds-faq-item[open] .ds-faq-item__question::before { transform: rotate(90deg); }
.ds-faq-item__answer { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin: var(--space-3) 0 0; }

.ds-shortcuts-table { width: 100%; border-collapse: collapse; }
.ds-shortcuts-table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary); padding: 0 0 var(--space-2); border-bottom: 1px solid var(--border-default); }
.ds-shortcuts-table td { padding: var(--space-3) var(--space-2) var(--space-3) 0; border-bottom: 1px solid var(--border-default); font-size: var(--text-sm); color: var(--text-secondary); vertical-align: middle; }
.ds-shortcuts-table tr:last-child td { border-bottom: none; }
.ds-shortcuts-table kbd { background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: 4px; padding: 2px 7px; font-family: inherit; font-size: var(--text-xs); color: var(--text-primary); }

.ds-tour-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); z-index: 9998; }
.ds-tour-card {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,.35));
  width: min(420px, 90vw); padding: var(--space-6); border: 1px solid var(--border-default);
}
.ds-tour-card__step { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 1px; text-transform: uppercase; color: var(--brand-accent); margin-bottom: var(--space-2); }
.ds-tour-card__title { font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--text-primary); margin: 0 0 var(--space-2); }
.ds-tour-card__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--space-5); }
.ds-tour-card__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ds-tour-nav-highlight { outline: 3px solid var(--brand-accent) !important; outline-offset: 2px; border-radius: var(--radius-md); }

.ds-wizard-steps { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; }
.ds-wizard-step { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-tertiary); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); }
.ds-wizard-step.is-active { color: #fff; background: var(--brand-accent); }
.ds-wizard-step.is-done { color: var(--fb-success); background: var(--fb-success-soft); }
.ds-wizard-tip { font-size: var(--text-sm); color: var(--text-secondary); background: var(--fb-info-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.ds-wizard-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }

/* --- Layout helpers ---------------------------------------------------------
   Formalizes the "filter bar" and split-panel patterns from the standard
   page template (breadcrumb -> KPI strip -> filter bar -> table ->
   next-steps banner), replacing one-off inline grid/flex rules that didn't
   reflow on narrow viewports (risk_register.html, reports_database.html,
   executive_summary.html previously hard-coded fixed grid-template-columns
   or lacked a table scroll container). */
.ds-filter-bar { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--space-4); }
.ds-filter-bar .ds-field { margin-bottom: 0; }

/* --- Progressive disclosure: "More filters" ------------------------------
   One reusable pattern for every filter bar (Control Library, Risk
   Universe, Findings Tracker, Actions): primary filters stay visible,
   secondary ones collapse behind a toggle. `display:contents` keeps the
   collapsed fields as direct flex/grid items of the parent bar once
   revealed, so they line up exactly like the always-visible ones — no
   extra wrapper box in the layout. See design-system.js `dsFilterToggle`. */
.ds-filter-bar__extra,
.frms-filter-row .ds-filter-bar__extra { display: none; }
.ds-filter-bar__extra.is-open { display: contents; }
.ds-filter-bar__toggle {
  background: none; border: 1px solid var(--border-default); color: var(--text-secondary);
  border-radius: var(--radius-md); padding: 7px 12px; font-size: var(--text-xs); font-weight: var(--weight-medium);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ds-filter-bar__toggle:hover { background: var(--surface-sunken); }
.ds-filter-bar__toggle i { font-size: 10px; transition: transform var(--motion-fast, .15s) ease; }
.ds-filter-bar__toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* --- Command palette (Ctrl/Cmd+K) -----------------------------------------
   Reuses .ds-modal-overlay/.ds-modal (open/close/focus-trap already wired
   in design-system.js) and .ds-search__* item styling (see the topbar
   search dropdown above) — only the palette-specific chrome is new. */
.ds-modal-overlay--palette { align-items: flex-start; padding-top: 12vh; }
.ds-modal--palette { max-width: 640px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.ds-cmdk__input-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.ds-cmdk__input-icon { color: var(--text-tertiary); font-size: var(--text-sm); }
.ds-cmdk__input { flex: 1; border: none; outline: none; font-size: var(--text-md); background: transparent; color: var(--text-primary); }
.ds-cmdk__close { background: none; border: none; font-size: var(--text-xl); line-height: 1; color: var(--text-tertiary); cursor: pointer; padding: 0 4px; }
.ds-cmdk__list { overflow-y: auto; padding: var(--space-2) 0; }
.ds-cmdk__list .ds-search__item.is-active { background: var(--surface-sunken); }
.ds-cmdk__footer { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-default); font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; }
.ds-cmdk__footer kbd { background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 5px; font-family: inherit; }
@media (max-width: 640px) {
  .ds-modal-overlay--palette { padding-top: 0; align-items: stretch; }
  .ds-modal--palette { max-width: 100%; max-height: 100vh; border-radius: 0; }
}

.ds-split-2-1, .ds-split-1-1 { display: grid; gap: var(--space-4); align-items: start; }
.ds-split-2-1 { grid-template-columns: 2fr 1fr; }
.ds-split-1-1 { grid-template-columns: 1fr 1fr; }
/* Grid items default to min-width:auto, which sizes the track to fit
   content (e.g. a wide table) instead of shrinking — the classic CSS
   Grid overflow footgun. Without this, any wide child (a .ds-table-wrap,
   long unbroken text) blows out the track and causes page-level
   horizontal scroll on narrow viewports. */
.ds-split-2-1 > *, .ds-split-1-1 > * { min-width: 0; }

.ds-table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------------- */
/* AF-9.54 "AI Excellence" addition — AuditFlow Copilot drawer            */
/* ---------------------------------------------------------------------- */
/* Purely additive to the AI-shared component vocabulary (AF-9.55 to
   reconcile): a right-anchored *drawer* variant of the existing
   .ds-modal-overlay/.ds-modal system above, reusing its hidden-attribute
   visibility contract, Escape/backdrop-close, and focus trap as-is (see
   design-system.js) — no new JS, no new interaction model, same tokens.
   The trigger button itself reuses .ds-notif-btn unchanged (see
   templates/layout.html) rather than a new button class. */
.ds-modal-overlay--drawer { justify-content: flex-end; padding: 0; }
.ds-modal--drawer {
  width: 400px; max-width: 92vw; height: 100vh; max-height: 100vh;
  margin: 0; border-radius: 0; padding: 0;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--motion-base) var(--ease-standard);
}
.ds-modal-overlay--drawer:not([hidden]) .ds-modal--drawer { transform: translateX(0); }

.ds-copilot__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.ds-copilot__title { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.ds-copilot__close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: var(--text-lg); padding: var(--space-1); }

.ds-copilot__tabs { display: flex; gap: var(--space-2); padding: 0 var(--space-5); border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.ds-copilot__tab { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-3) var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-tertiary); cursor: pointer; }
.ds-copilot__tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-accent); }

.ds-copilot__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.ds-copilot__panel[hidden] { display: none; }

.ds-copilot__answer { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5; background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3); }
.ds-copilot__sources { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ds-copilot__source { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); font-size: var(--text-xs); }
.ds-copilot__source:hover { background: var(--surface-sunken); }
.ds-copilot__source-label { color: var(--text-tertiary); flex-shrink: 0; }

.ds-copilot__suggestion { display: block; width: 100%; text-align: left; background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium); }
.ds-copilot__suggestion:hover { border-color: var(--brand-accent); }
.ds-copilot__style-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.ds-copilot__style-chip { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); cursor: pointer; }
.ds-copilot__style-chip.is-active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

@media (max-width: 480px) {
  .ds-modal--drawer { width: 100vw; max-width: 100vw; }
}

/* --- App shell: sidebar navigation -----------------------------------------
   AF-9.52. Formalizes templates/layout.html's sidebar — brand mark, nav
   sections, links, and the bottom user card — as componentized classes so
   the shell no longer relies on inline styles/colors. Coexists with the
   base .sidebar positioning rules in styles.css (width/fixed/scroll);
   these classes own the *content* inside it. */
.ds-sidebar__brand { margin-bottom: var(--space-6); }
.ds-sidebar__logo { font-size: 22px; font-weight: var(--weight-black); line-height: 1.2; }
.ds-sidebar__logo img { max-height: 40px; max-width: 160px; object-fit: contain; vertical-align: middle; }
.ds-sidebar__logo-af { color: #fff; }
.ds-sidebar__logo-flow { color: var(--brand-accent); }
.ds-sidebar__tagline { font-size: var(--text-xs); color: var(--n-400); margin-top: 2px; }

.ds-nav-divider { border: none; border-top: 1px solid var(--n-800); margin: var(--space-5) 0; }
.ds-nav-section { font-size: 10px; font-weight: var(--weight-bold); color: var(--n-600); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--space-2); padding: 0 10px; }

/* Selectors are scoped under .sidebar so specificity reliably beats the
   legacy `.sidebar a` / `.sidebar a.active` rules in styles.css (still
   loaded first, for pages/partials not yet touched by this rebuild) rather
   than depending on stylesheet load order. */
.sidebar .ds-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #ffffff;
  text-decoration: none;
  padding: var(--density-nav-padding-y, 9px) var(--density-nav-padding-x, 10px);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  font-size: var(--text-sm);
  border-left: 3px solid transparent;
  transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.sidebar .ds-nav-link i { width: 16px; text-align: center; flex-shrink: 0; }
.sidebar .ds-nav-link:hover { background: var(--n-800); color: #fff; }
.sidebar .ds-nav-link.is-active { background: var(--n-800); color: #fff; border-left-color: var(--brand-accent); font-weight: var(--weight-bold); padding-left: 7px; }
.sidebar .ds-nav-link:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }

/* Highlighted variants — used sparingly for demo-facing / preview entries,
   not a general-purpose modifier. */
.sidebar .ds-nav-link--accent { margin-top: 4px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.22); color: var(--brand-accent); font-weight: var(--weight-bold); letter-spacing: .2px; }
.sidebar .ds-nav-link--accent:hover { background: rgba(245,158,11,0.16); color: var(--brand-accent); }
.sidebar .ds-nav-link--preview { margin-top: 4px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.18); color: #818cf8; font-size: var(--text-xs); font-weight: var(--weight-bold); }
.sidebar .ds-nav-link--preview:hover { background: rgba(99,102,241,0.16); color: #818cf8; }
.ds-nav-link__badge { margin-left: auto; font-size: 9px; font-weight: var(--weight-bold); letter-spacing: .4px; text-transform: uppercase; background: rgba(99,102,241,0.18); color: #818cf8; padding: 2px 6px; border-radius: var(--radius-sm); }

.sidebar .ds-nav-link--admin { color: var(--brand-accent); }

.ds-user-card { position: absolute; bottom: 18px; left: 18px; right: 18px; background: var(--n-900); border-radius: var(--radius-xl); padding: 14px; }
.ds-user-card__row { display: flex; align-items: center; gap: 12px; }
.ds-user-card__avatar { width: 42px; height: 42px; border-radius: 50%; background: #172554; color: #fbbf24; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-sm); flex-shrink: 0; }
.ds-user-card__body { flex: 1; min-width: 0; }
.ds-user-card__name { font-weight: var(--weight-bold); color: #fff; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-user-card__role { font-size: var(--text-xs); color: var(--n-400); text-transform: capitalize; }
.ds-user-card__logout { color: var(--n-400); text-decoration: none; font-size: var(--text-sm); flex-shrink: 0; padding: 6px; border-radius: var(--radius-sm); }
.ds-user-card__logout:hover { color: #fff; background: var(--n-800); }
/* V10: sign-out is a POST form; make its button look like the old link. */
.ds-logout-form { display: inline-flex; margin: 0; flex-shrink: 0; }
.ds-logout-form button { border: 0; font: inherit; cursor: pointer; }
.ds-logout-form button.ds-user-card__logout { background: none; }
/* In the sidebar the old link also picked up styles.css's `.sidebar a`. */
.sidebar .ds-logout-form button.ds-user-card__logout { color: #e5e7eb; padding: 8px 10px; border-radius: 8px; margin-bottom: 4px; font-size: 13px; }

/* Desktop sidebar collapse (AF-4 §3) — toggled via [data-ds-sidebar-collapse]
   (see design-system.js), state persisted in localStorage and applied to
   html[data-sidebar-collapsed] by an inline script in layout.html before the
   sidebar paints, avoiding a flash of the wrong state. Distinct from the
   <900px mobile overlay drawer (.sidebar.is-open in styles.css), which this
   attribute deliberately does not touch — collapse is a desktop-only, persistent
   icon-rail mode; mobile keeps its own full-width slide-in behavior. */
.ds-sidebar__collapse-btn {
  position: absolute;
  top: 20px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--n-700);
  background: var(--n-900);
  color: var(--n-300);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  z-index: 10;
  padding: 0;
}
.ds-sidebar__collapse-btn:hover { background: var(--n-800); color: #fff; }
.ds-sidebar__collapse-btn i { transition: transform var(--motion-fast) var(--ease-standard); }

@media (min-width: 901px) {
  html[data-sidebar-collapsed="1"] .sidebar { width: 68px; padding-left: 12px; padding-right: 12px; }
  html[data-sidebar-collapsed="1"] .main { margin-left: 68px; }
  html[data-sidebar-collapsed="1"] .sidebar .ds-sidebar__collapse-btn i { transform: rotate(180deg); }
  html[data-sidebar-collapsed="1"] .sidebar .ds-nav-link { justify-content: center; }
  html[data-sidebar-collapsed="1"] .sidebar .ds-nav-link__label,
  html[data-sidebar-collapsed="1"] .sidebar .ds-nav-link__badge,
  html[data-sidebar-collapsed="1"] .sidebar .ds-sidebar__tagline,
  html[data-sidebar-collapsed="1"] .sidebar .ds-sidebar__logo-flow,
  html[data-sidebar-collapsed="1"] .sidebar .ds-sidebar__logo img,
  html[data-sidebar-collapsed="1"] .sidebar .ds-nav-section,
  html[data-sidebar-collapsed="1"] .sidebar .ds-user-card__body,
  html[data-sidebar-collapsed="1"] .sidebar .ds-user-card__logout { display: none; }
  html[data-sidebar-collapsed="1"] .sidebar .ds-sidebar__logo { font-size: 15px; text-align: center; }
  html[data-sidebar-collapsed="1"] .sidebar .ds-user-card { left: 8px; right: 8px; padding: 10px 6px; display: flex; justify-content: center; }
  html[data-sidebar-collapsed="1"] .sidebar .ds-user-card__row { gap: 0; }
}

/* Sidebar mobile toggle — real hamburger, replaces the "no true
   mobile-optimized navigation" gap named in AuditFlow_UI_UX_Philosophy.md.
   Hidden on desktop; shown and functional under the 900px breakpoint via
   design-system.js (see .ds-sidebar-toggle handler). */
.ds-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.ds-sidebar-backdrop { display: none; }

/* --- App shell: topbar / global search / notifications --------------------
   Formalizes the hand-rolled inline-style topbar row, search box + result
   dropdown, and notification bell + dropdown from templates/layout.html. */
.ds-topbar__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ds-topbar__title { font-weight: var(--weight-bold); color: var(--text-primary); }
.ds-topbar__subtitle { font-size: var(--text-xs); color: var(--text-tertiary); }
.ds-topbar__tools { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }

.ds-search { position: relative; }
.ds-search__input {
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 7px 14px 7px 34px;
  font-size: var(--text-xs);
  width: 240px;
  margin: 0;
  outline: none;
  font-family: var(--font-sans);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.ds-search__input:focus { border-color: var(--brand-accent); }
.ds-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: var(--text-xs); pointer-events: none; }
.ds-search__dropdown {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  min-width: 340px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  max-height: 420px;
  overflow-y: auto;
  font-size: var(--text-xs);
}
.ds-search__dropdown.is-open { display: block; }
.ds-search__group-label { padding: 7px 12px 3px; font-size: 10px; font-weight: var(--weight-bold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .6px; }
.ds-search__group-label:not(:first-child) { border-top: 1px solid var(--surface-sunken); margin-top: 4px; }
.ds-search__item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none; color: var(--text-primary); }
.ds-search__item:hover { background: var(--surface-sunken); }
.ds-search__item-icon { font-size: var(--text-xs); flex-shrink: 0; }
.ds-search__item-title { font-weight: var(--weight-medium); }
.ds-search__item-sub { font-size: 10px; color: var(--text-tertiary); }
.ds-search__status { padding: 10px 14px; color: var(--text-tertiary); font-size: var(--text-xs); }
.ds-search__status--error { color: var(--fb-error); }

.ds-notif-btn { position: relative; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-sunken); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: var(--text-base); }
.ds-notif-btn:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.ds-notif-badge { display: none; position: absolute; top: -5px; right: -5px; background: var(--fb-error); color: #fff; font-size: 9px; font-weight: var(--weight-bold); min-width: 16px; height: 16px; border-radius: var(--radius-pill); align-items: center; justify-content: center; padding: 0 3px; line-height: 16px; text-align: center; }
.ds-notif-dropdown { display: none; position: absolute; top: 40px; right: 0; width: 340px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); max-height: 420px; overflow-y: auto; font-size: var(--text-xs); }
.ds-notif-dropdown.is-open { display: block; }
.ds-notif-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--surface-sunken); }
.ds-notif-header__title { font-weight: var(--weight-bold); font-size: var(--text-xs); color: var(--text-primary); }
.ds-notif-mark-all { background: none; border: none; color: var(--fb-info); font-size: 11px; font-weight: var(--weight-medium); cursor: pointer; }
.ds-notif-item { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; text-decoration: none; border-bottom: 1px solid var(--surface-sunken); background: var(--surface-card); }
.ds-notif-item:hover { background: var(--surface-sunken); }
.ds-notif-item--unread { background: var(--surface-sunken); }
.ds-notif-item__icon { font-size: 11px; margin-top: 2px; flex-shrink: 0; }
.ds-notif-item__body { flex: 1; min-width: 0; }
.ds-notif-item__title { font-size: var(--text-xs); color: var(--text-primary); }
.ds-notif-item--unread .ds-notif-item__title { font-weight: var(--weight-bold); }
.ds-notif-item__time { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
.ds-notif-item__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fb-info); flex-shrink: 0; margin-top: 5px; }
.ds-notif-empty { padding: 20px; text-align: center; color: var(--text-tertiary); font-size: var(--text-xs); }

.ds-experiment-banner { background: var(--fb-warning-soft); border-bottom: 1px solid var(--fb-warning-border); padding: 10px 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ds-experiment-banner__label { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--fb-warning); }
.ds-experiment-banner__desc { font-size: var(--text-xs); color: var(--fb-warning); }

.ds-flash-list { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: 6px; }

/* --- Page header ------------------------------------------------------------
   Formalizes the "title + subtitle on the left, primary action on the
   right" row duplicated (each as its own inline-style flex block) across
   admin_*.html and most list pages. */
.ds-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.ds-page-header h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-black); color: var(--text-primary); }
.ds-page-header__subtitle { color: var(--text-secondary); font-size: var(--text-sm); margin-top: var(--space-1); }
.ds-page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Standard accessible visually-hidden utility — replaces the inline
   position:absolute/clip block re-typed ad hoc wherever a visible label
   would be redundant but a programmatic one is still required. */
.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; }

/* --- Settings / form-heavy admin screens -----------------------------------
   Formalizes patterns repeated 2-5x each within admin_settings.html and
   duplicated in spirit across the other admin_*.html screens: an uppercase
   section label inside a .ds-card, small muted helper text under a field,
   and a right-aligned form-action row. */
.ds-card__section-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-3); }
.ds-card__section-title i { margin-right: 6px; }
.ds-field__hint { font-size: var(--text-xs); color: var(--text-tertiary); margin: 4px 0 0; }
.ds-form-actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }

/* Stat grid — the label-over-value attribute grid duplicated verbatim
   across risk_universe_detail.html and control_detail.html's header cards. */
.ds-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.ds-stat__label { font-size: 10px; font-weight: var(--weight-bold); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .5px; }
.ds-stat__value { font-size: var(--text-sm); font-weight: var(--weight-medium); margin-top: 2px; color: var(--text-primary); }

/* Label/value row — Launch Readiness's health-check and DB-stat lists, and
   any future "key: value" list that isn't a full table. */
.ds-kv-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--surface-sunken); }
.ds-kv-row:last-child { border-bottom: none; }
.ds-kv-row__label { font-size: var(--text-sm); color: var(--text-primary); }
.ds-kv-row__value { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }

/* Checklist item — replaces the per-item inline conditional
   background/border color block in admin_launch.html. */
.ds-checklist-item { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--surface-sunken); }
.ds-checklist-item--done { background: var(--fb-success-soft); border-color: var(--fb-success-border); }
.ds-checklist-item__icon { font-size: 16px; margin-top: 1px; }
.ds-checklist-item__body { flex: 1; }
.ds-checklist-item__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.ds-checklist-item--done .ds-checklist-item__title { color: var(--fb-success); }
.ds-checklist-item__detail { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.ds-checklist-item__action { font-size: var(--text-xs); color: var(--st-progress); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }

.ds-inline-code { background: var(--surface-sunken); padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font-mono); }

.ds-app-footer { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-default); font-size: var(--text-xs); color: var(--text-secondary); text-align: center; }
.ds-app-footer__links { margin-bottom: var(--space-3); }
.ds-app-footer a { color: #1d4ed8; text-decoration: none; margin: 0 12px; }
.ds-app-footer a:hover { text-decoration: underline; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .ds-kpi__value { font-size: 22px; }
  .ds-table--compact th, .ds-table--compact td { font-size: var(--text-xs); }
  .ds-page-hero h1 { font-size: var(--text-2xl); }
  .ds-page-content { padding: var(--space-10) var(--space-4); }
  .ds-split-2-1, .ds-split-1-1 { grid-template-columns: 1fr; }

  /* Real mobile nav: sidebar becomes an off-canvas drawer instead of an
     inline full-width block stacked above page content. */
  .ds-sidebar-toggle { display: flex; }
  .sidebar {
    position: fixed;
    width: 260px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--motion-base) var(--ease-standard);
    z-index: var(--z-modal);
  }
  .sidebar.is-open { transform: translateX(0); }
  .ds-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: calc(var(--z-modal) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-standard);
  }
  .ds-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .ds-search__input { width: 160px; }
  .ds-topbar__subtitle { display: none; }
  .ds-sidebar__collapse-btn { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Navigation-organization pass — top supporting ribbon                   */
/* Administration / Framework Vault / Trust Center, relocated out of the  */
/* left sidebar (see templates/partials/nav_top_ribbon.html). Reuses      */
/* existing tokens (colors, spacing, shadow, radius) throughout — no new  */
/* palette introduced. Menus use position:fixed with JS-computed          */
/* placement (static/js/nav-ribbon.js) rather than position:absolute, so  */
/* they can never be clipped by an ancestor's overflow — the same fix     */
/* already applied to the Audit Register's three-dot menu.                */
/* ---------------------------------------------------------------------- */
.ds-ribbon {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  background: var(--n-900);
  border-radius: var(--radius-lg);
  padding: 6px 10px;
}
.ds-ribbon__item-wrap { position: relative; }
.ds-ribbon__item {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--n-400);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  padding: 5px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.ds-ribbon__item:hover,
.ds-ribbon__item[aria-expanded="true"] {
  border-bottom-color: var(--brand-accent);
  color: #fff;
}
.ds-ribbon__item:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.ds-ribbon__caret { font-size: 9px; color: var(--n-500); transition: transform var(--motion-fast) var(--ease-standard); }
.ds-ribbon__item:hover .ds-ribbon__caret,
.ds-ribbon__item[aria-expanded="true"] .ds-ribbon__caret { color: #fff; }
.ds-ribbon__item[aria-expanded="true"] .ds-ribbon__caret { transform: rotate(180deg); }

.ds-ribbon__menu {
  position: fixed;
  min-width: 220px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  z-index: var(--z-dropdown);
}
.ds-ribbon__menu[hidden] { display: none; }
.ds-ribbon__menu--wide { min-width: 460px; }
.ds-ribbon__menu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.ds-ribbon__menu-col { display: flex; flex-direction: column; gap: 2px; }
.ds-ribbon__menu-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 8px;
}
.ds-ribbon__menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
}
.ds-ribbon__menu-link i { width: 14px; text-align: center; flex-shrink: 0; color: var(--text-tertiary); font-size: 12px; }
.ds-ribbon__menu-link:hover { background: var(--surface-sunken); }
.ds-ribbon__menu-link:hover i { color: var(--brand-accent); }
.ds-ribbon__menu-top-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--brand-primary);
  text-decoration: none;
}
.ds-ribbon__menu-top-link:hover { color: var(--brand-accent-hover); }

@media (max-width: 900px) {
  .ds-ribbon__item .ds-ribbon__item-label { display: none; }
  .ds-ribbon__menu--wide { min-width: min(90vw, 460px); }
}

/* Sitemap page (templates/sitemap.html) — reuses .ds-card as its section
   container, same as every other listing page. */
.ds-sitemap__heading {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-3);
}
.ds-sitemap__link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.ds-sitemap__link:hover { background: rgba(245,158,11,0.12); color: var(--brand-accent); }
.ds-sitemap__link:hover .ds-sitemap__hint { color: var(--brand-accent); opacity: .8; }

/* Sidebar "Findings Management" flyout trigger — a <button> styled to
   look identical to the existing <a class="ds-nav-link"> items around it
   (same padding/color/hover/active rules already apply via .ds-nav-link;
   this just resets the button-specific defaults a plain <a> doesn't have,
   and adds the right-pointing caret). No sidebar width/color/spacing
   token was changed. */
.ds-sidebar__flyout-wrap { position: relative; }
.ds-sidebar__flyout-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  font: inherit;
  cursor: pointer;
}
.ds-sidebar__flyout-trigger.is-active { border-left-color: var(--brand-accent); }
.ds-sidebar__flyout-caret { margin-left: auto; font-size: 10px; color: var(--n-500); flex-shrink: 0; }
.ds-sidebar__flyout-trigger:hover .ds-sidebar__flyout-caret,
.ds-sidebar__flyout-trigger.is-active .ds-sidebar__flyout-caret { color: #fff; }
.ds-sitemap__hint { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-tertiary); }