/* ============================================================
   Luqen Dashboard — style.css
   WCAG 2.2 AA design system (AAA on shareable artifacts)
   Identity: Oxblood (OKLCH 0.34 0.09 25) + Citron evidence accent
   Typography: Inter Display / Inter / IBM Plex Mono (self-hosted)
   Contract: /DESIGN.md
   ============================================================ */

/* ---- Self-hosted Type (~78KB total: Inter variable latin + Plex Mono 400/500 latin) ----
   Latin-ext chars fall back gracefully to system-ui — acceptable for a minority of locales.
   "Inter Display" is the same Inter Variable file; the display family is just Inter at
   higher weight with tighter tracking applied per-element via the .font-display rule. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2-variations'),
       url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2-variations'),
       url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Design Tokens (Light Mode) ----
   New namespace: --id-* (identity). Legacy --accent/--bg-* preserved as
   aliases for one milestone so unaudited inline overrides keep working. */
:root {
  /* Identity (oxblood + citron evidence accent) */
  --id-accent: oklch(0.34 0.09 25);
  --id-accent-hover: oklch(0.28 0.09 25);
  --id-accent-tint: oklch(0.96 0.02 25);
  --id-accent-on: oklch(0.98 0.005 25);
  --id-evidence: oklch(0.84 0.18 105);
  --id-evidence-soft: oklch(0.96 0.10 105);

  /* Surfaces */
  --bg-page: oklch(0.995 0.005 25);
  --bg-surface: oklch(0.98 0.005 25);
  --bg-surface-raised: oklch(0.96 0.005 25);
  --bg-muted: oklch(0.94 0.008 25);
  /* Light-theme sidebar — off-white surface, accent-tint hover/active.
     Was always-dark oxblood; user reported the sidebar ignored the
     light theme setting. */
  --bg-sidebar: oklch(0.97 0.005 25);
  --bg-sidebar-hover: oklch(0.94 0.008 25);
  --bg-sidebar-active: oklch(0.96 0.02 25);

  /* Borders */
  --border-subtle: oklch(0.90 0.008 25);
  --border-strong: oklch(0.82 0.012 25);

  /* Text */
  --text-primary: oklch(0.18 0.015 25);
  --text-secondary: oklch(0.42 0.012 25);
  --text-muted: oklch(0.55 0.010 25);
  --text-on-accent: oklch(0.98 0.005 25);
  /* Light-theme sidebar text reads on the new pale sidebar background. */
  --text-sidebar: oklch(0.30 0.018 25);
  --text-sidebar-active: oklch(0.36 0.13 25);  /* oxblood accent on hover/active */

  /* Status (semantic — universal meaning, retuned for AAA contrast) */
  --status-success: oklch(0.42 0.13 150);
  --status-success-bg: oklch(0.95 0.05 150);
  --status-warning: oklch(0.50 0.13 70);
  --status-warning-bg: oklch(0.95 0.05 80);
  --status-error: oklch(0.48 0.20 27);
  --status-error-bg: oklch(0.94 0.05 27);
  --status-error-hover: oklch(0.40 0.20 27);
  --status-info: oklch(0.42 0.14 250);
  --status-info-bg: oklch(0.95 0.04 250);
  --status-running: oklch(0.42 0.14 250);
  --status-running-bg: oklch(0.95 0.04 250);
  --status-queued: oklch(0.50 0.13 70);
  --status-queued-bg: oklch(0.95 0.05 80);

  /* Radii */
  --border-radius: 6px;
  --border-radius-sm: 4px;
  --border-radius-lg: 10px;

  /* Focus — citron ring on either canvas */
  --focus-ring: 0 0 0 3px oklch(0.84 0.18 105 / 0.55);
  --focus-outline: 3px solid oklch(0.84 0.18 105);
  --focus-outline-offset: 2px;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0.10 0.02 25 / 0.06);
  --shadow-md: 0 4px 10px oklch(0.10 0.02 25 / 0.08);
  --shadow-lg: 0 10px 24px oklch(0.10 0.02 25 / 0.12);

  /* Spacing (1, 2, 3, 4, 5, 6, 7, 8) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* --- Legacy spacing aliases (R1 transition) — used by ~hundreds of rules; do not remove --- */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-5);
  --space-xl: var(--space-6);
  --space-2xl: var(--space-7);

  /* --- Legacy radius / weight / hover / text aliases (R1 transition) --- */
  --radius-sm: var(--border-radius-sm);
  --radius-md: var(--border-radius);
  --radius-lg: var(--border-radius-lg);
  --fw-medium: 500;
  --fw-bold: 700;
  --bg-hover: var(--bg-muted);
  --text: var(--text-primary);

  /* Typography */
  --font-display: 'Inter Display', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Type scale (1.333 ratio, base 1rem = 16px) */
  --type-display-1: 2.986rem;
  --type-display-2: 2.241rem;
  --type-display-3: 1.682rem;
  --font-size-3xl: 1.5rem;
  --font-size-2xl: 1.25rem;
  --font-size-xl: 1.125rem;
  --font-size-lg: 1.0625rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.8125rem;

  /* --- Legacy aliases (deprecated; do not use in new code) --- */
  --bg-primary: var(--bg-page);
  --bg-secondary: var(--bg-surface);
  --bg-tertiary: var(--bg-surface-raised);
  --surface-muted: var(--bg-muted);
  --border-muted: var(--border-subtle);
  --border-color: var(--border-subtle);
  --border-color-strong: var(--border-strong);
  --text-inverse: var(--text-on-accent);
  --accent: var(--id-accent);
  --accent-hover: var(--id-accent-hover);
  --accent-light: var(--id-accent-tint);

  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 0px;

  /* Template accent — kept for category taxonomy; retuned to a quiet plum */
  --accent-template: oklch(0.42 0.10 305);
  --accent-template-light: oklch(0.95 0.03 305);

  /* Transitions — ease-out-quart, no bounce */
  --transition-fast: 120ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 280ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

/* ---- Dark Mode (oxblood retuned for dark canvas) ---- */
[data-theme="dark"] {
  /* Identity inverts to a softer warm tone on the dark canvas */
  --id-accent: oklch(0.78 0.08 25);
  --id-accent-hover: oklch(0.85 0.08 25);
  --id-accent-tint: oklch(0.22 0.03 25);
  --id-accent-on: oklch(0.14 0.012 25);

  /* Surfaces */
  --bg-page: oklch(0.14 0.012 25);
  --bg-surface: oklch(0.18 0.012 25);
  --bg-surface-raised: oklch(0.22 0.015 25);
  --bg-muted: oklch(0.26 0.018 25);
  --bg-sidebar: oklch(0.10 0.015 25);
  --bg-sidebar-hover: oklch(0.16 0.02 25);
  --bg-sidebar-active: oklch(0.22 0.04 25);

  /* Borders */
  --border-subtle: oklch(0.28 0.015 25);
  --border-strong: oklch(0.38 0.018 25);

  /* Text */
  --text-primary: oklch(0.97 0.005 25);
  --text-secondary: oklch(0.78 0.008 25);
  --text-muted: oklch(0.62 0.010 25);
  --text-on-accent: oklch(0.14 0.012 25);
  --text-sidebar: oklch(0.74 0.012 25);
  --text-sidebar-active: oklch(0.98 0.005 25);

  /* Status (retuned for AAA on dark canvas) */
  --status-success: oklch(0.82 0.16 150);
  --status-success-bg: oklch(0.22 0.04 150);
  --status-warning: oklch(0.82 0.16 80);
  --status-warning-bg: oklch(0.22 0.04 70);
  --status-error: oklch(0.78 0.18 27);
  --status-error-bg: oklch(0.22 0.05 27);
  --status-error-hover: oklch(0.85 0.18 27);
  --status-info: oklch(0.82 0.13 250);
  --status-info-bg: oklch(0.22 0.04 250);
  --status-running: oklch(0.82 0.13 250);
  --status-running-bg: oklch(0.22 0.04 250);
  --status-queued: oklch(0.82 0.16 80);
  --status-queued-bg: oklch(0.22 0.04 70);

  --accent-template: oklch(0.78 0.10 305);
  --accent-template-light: oklch(0.22 0.04 305);

  /* Focus stays citron on either canvas */
  --focus-outline: 3px solid oklch(0.84 0.18 105);
  --focus-ring: 0 0 0 3px oklch(0.84 0.18 105 / 0.55);

  --shadow-sm: 0 1px 2px oklch(0.04 0.01 25 / 0.40);
  --shadow-md: 0 4px 10px oklch(0.04 0.01 25 / 0.50);
  --shadow-lg: 0 10px 24px oklch(0.04 0.01 25 / 0.60);
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--bg-page);
  min-height: 100vh;
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.012em;
}

h1 { font-size: var(--font-size-3xl); font-weight: 600; line-height: 1.15; }
h2 { font-size: var(--font-size-2xl); font-weight: 600; line-height: 1.2; }
h3 { font-size: var(--font-size-xl); font-weight: 600; line-height: 1.25; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }

/* ---- Skip Link ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 10000;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--accent);
  color: var(--text-inverse);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-md);
}

/* ---- Focus Styles ---- */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-radius: 2px;
}

/* Remove default focus for mouse users, preserve for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Layout ---- */

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  background-color: var(--bg-sidebar);
  color: var(--text-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform var(--transition-base);
  transform: translateX(-100%); /* hidden by default on all screen sizes */
}

.sidebar.is-open {
  transform: translateX(0); /* shown when toggled */
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-sidebar-active);
  text-decoration: none;
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sidebar__logo:focus-visible {
  outline-color: var(--text-inverse);
}

.sidebar__nav {
  flex: 1;
  padding: var(--space-md) 0;
}

.sidebar__section-label {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sidebar);
  opacity: 0.6;
  margin-top: var(--space-md);
}

.sidebar__subsection-label {
  padding: var(--space-xs) var(--space-md) var(--space-xs) calc(var(--space-md) + 4px);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: var(--space-sm);
}

.sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-sidebar);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.sidebar__item--child {
  padding-left: calc(var(--space-md) + var(--space-md));
  font-size: var(--font-size-xs);
}

.sidebar__item:hover {
  background-color: var(--bg-sidebar-hover);
  color: var(--text-sidebar-active);
}

.sidebar__item.is-active {
  background-color: var(--bg-sidebar-active);
  color: var(--text-sidebar-active);
  font-weight: 600;
}

/* 1px right-edge citron mark on the active item — utility mark, not a side-stripe */
.sidebar__item.is-active::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 0;
  width: 2px;
  background-color: var(--id-evidence);
  border-radius: 1px;
}

.sidebar__item:focus-visible {
  outline-color: var(--text-inverse);
  outline-offset: -3px;
}

.sidebar__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  aria-hidden: true;
}

.sidebar__locale,
.sidebar__org-switcher {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background-color: var(--bg-sidebar);
}

.sidebar__locale .select--sm,
.sidebar__org-switcher .select--sm {
  width: 100%;
  background: var(--bg-sidebar-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-sidebar);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.sidebar__locale .select--sm:hover,
.sidebar__org-switcher .select--sm:hover {
  background: var(--bg-sidebar-active);
  border-color: var(--border-strong);
}

.sidebar__locale .select--sm:focus,
.sidebar__org-switcher .select--sm:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sidebar__footer {
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-subtle);
  background-color: var(--bg-sidebar);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Sidebar is always an overlay on all screen sizes — slides in from left */
.main-content {
  margin-left: 0;
}
.app-header {
  left: 0;
}

/* Close button in sidebar header */
.sidebar__collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-sidebar);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: background var(--transition-fast);
}
.sidebar__collapse-btn:hover {
  background: var(--bg-sidebar-hover);
}

/* ---- Main Content ---- */
.main-content {
  margin-left: 0;
  padding-top: 56px; /* space for fixed app header */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-strong);
  background-color: var(--bg-page);
}

.page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Phase 65 — page-header back link, breadcrumbs, scope chip.
   Adopted from fleet-detail.hbs and now project-wide. */
.page-header__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
  margin-bottom: var(--space-2, 8px);
  padding: 2px var(--space-2, 8px);
  border-radius: var(--border-radius-sm, 4px);
}
.page-header__back:hover,
.page-header__back:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}
.page-header__back-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.page-header__crumbs {
  margin-bottom: var(--space-2, 8px);
  font-size: var(--font-size-sm);
}
.page-header__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
}
.page-header__crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
}
.page-header__crumbs li:not(:last-child)::after {
  content: '/';
  color: var(--text-muted);
  opacity: 0.6;
}
.page-header__crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}
.page-header__crumbs a:hover,
.page-header__crumbs a:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}
.page-header__crumbs [aria-current='page'] {
  color: var(--text-primary);
}
.page-header__chip {
  display: inline-block;
  margin-left: var(--space-2, 8px);
  padding: 2px var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--border-radius-sm, 4px);
  background-color: var(--bg-muted, var(--bg-surface-raised));
  color: var(--text-secondary);
  vertical-align: middle;
}
.page-header__chip--admin {
  background-color: var(--id-accent-tint, var(--bg-muted));
  color: var(--id-accent, var(--text-primary));
}
.page-header__chip--warning {
  background-color: var(--status-warning-bg, var(--bg-muted));
  color: var(--status-warning-fg, var(--text-secondary));
}

.page-body {
  padding: var(--space-xl);
  flex: 1;
}

/* ---- Cards ---- */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card__value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
}

.card__body {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.card__body p {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.card__label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* ---- Stat Cards (home page) ----
   Note: home page is being restructured to the typographic docket in R2 (Phase 57).
   These cards stay in /admin/system only; on home they will be replaced. */
.stat-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.stat-card__value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* ============================================================
   Verdict line — Phase 57.
   The primary unit of evidence display: one display-weight sentence
   plus a meta line with provenance. Used on report-detail and the
   agent share view.
   ============================================================ */
.verdict-line {
  padding: var(--space-2) 0 var(--space-5);
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: var(--space-6);
}

.verdict-line__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.verdict-line__eyebrow--pass { color: var(--status-success); }
.verdict-line__eyebrow--warn { color: var(--status-warning); }
.verdict-line__eyebrow--fail { color: var(--status-error); }
.verdict-line__eyebrow--info { color: var(--status-info); }

.verdict-line__sentence {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display-3);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 60ch;
}

.verdict-line__meta {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

html[data-density="plain"] .verdict-line__sentence {
  font-size: calc(var(--type-display-3) * 1.05);
  line-height: 1.35;
}

/* The ACR call-to-action has a long label ("View our Accessibility Conformance
   Report (ACR)"). The base .btn is white-space:nowrap, which overflows the
   viewport on narrow screens — allow it to wrap and stay within bounds. */
.verdict-line__acr .btn {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

/* ============================================================
   Docket — home page two-column layout (Phase 57 / R2 Move D)
   Left rail = org posture as type. Right column = activity stream.
   No cards. Citron 2px left-edge mark on flag rows only —
   the documented utility-mark exception to the side-stripe ban.
   ============================================================ */
.docket {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-7);
  margin-top: var(--space-2);
  min-height: 60vh;
}

@media (max-width: 900px) {
  .docket {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---- Rail (posture block) ---- */
.docket__rail {
  border-right: 1px solid var(--border-strong);
  padding-right: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .docket__rail {
    border-right: 0;
    border-bottom: 1px solid var(--border-strong);
    padding-right: 0;
    padding-bottom: var(--space-5);
  }
}

.docket__rail-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.docket__rail-score {
  margin: var(--space-2) 0 var(--space-1);
  line-height: 1;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

.docket__rail-score-value {
  font-size: var(--type-display-1);
  font-weight: 700;
  color: var(--text-primary);
}

.docket__rail-score-unit {
  font-size: var(--type-display-3);
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 0.05em;
}

.docket__rail-verdict {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  max-width: 28ch;
}

.docket__rail-meta {
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.docket__rail-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.docket__rail-meta-row:last-child { border-bottom: 0; }

.docket__rail-meta dt {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.docket__rail-meta dd {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin: 0;
}

.docket__rail-cta {
  align-self: flex-start;
  margin-top: var(--space-4);
}

/* ---- Stream ---- */
.docket__stream {
  min-width: 0;
}

.docket__stream-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
}

.docket__stream-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.docket__stream-link {
  font-size: var(--font-size-sm);
  color: var(--id-accent);
  text-decoration: none;
}

.docket__stream-link:hover,
.docket__stream-link:focus-visible {
  text-decoration: underline;
}

.docket__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docket__row {
  display: grid;
  grid-template-columns: 12rem 1fr auto;
  grid-template-areas:
    "time headline status"
    "time detail   detail";
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  align-items: baseline;
}

@media (max-width: 640px) {
  .docket__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "headline status"
      "time     time"
      "detail   detail";
  }
}

.docket__row--flag::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}

.docket__row-time {
  grid-area: time;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.docket__row-headline {
  grid-area: headline;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.docket__row-headline:hover,
.docket__row-headline:focus-visible { color: var(--id-accent); }

.docket__row-status {
  grid-area: status;
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.docket__row-status--completed { color: var(--status-success); }
.docket__row-status--running   { color: var(--status-info); }
.docket__row-status--queued    { color: var(--status-warning); }
.docket__row-status--failed    { color: var(--status-error); }

.docket__row-detail {
  grid-area: detail;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.docket__row-detail a {
  color: var(--id-accent);
  text-decoration: none;
}

.docket__row-detail a:hover,
.docket__row-detail a:focus-visible { text-decoration: underline; }

.docket__empty {
  padding: var(--space-7) 0;
  text-align: left;
}

.docket__empty-headline {
  font-family: var(--font-display);
  font-size: var(--type-display-3);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  max-width: 36ch;
}

/* ============================================================
   Public self-scan report — /reports/:id/public (Phase 58 R5).
   Standalone, no admin chrome. Built around the verdict-line
   pattern with a small summary and the badge embed snippet.
   ============================================================ */
body.report-public { background: var(--bg-page); }

.report-public__main {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}

.report-public__brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-strong);
}

.report-public__brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--id-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-xl);
  letter-spacing: -0.015em;
}

.report-public__brand-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.report-public__summary {
  margin: var(--space-6) 0;
}

.report-public__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-5);
  margin: 0;
}

.report-public__summary-row { margin: 0; }

.report-public__summary-row dt {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.report-public__summary-row dd {
  font-family: var(--font-display);
  font-size: var(--type-display-3);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.report-public__badge-section {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-strong);
}

.report-public__h2 {
  font-family: var(--font-display);
  font-size: var(--type-display-3);
  font-weight: 600;
  margin-bottom: var(--space-3);
  letter-spacing: -0.015em;
}

.report-public__badge-preview {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--bg-muted);
  border-radius: var(--border-radius-sm);
  display: inline-block;
}

.report-public__footer {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-relaxed);
}

.report-public__footer a { color: var(--id-accent); }

/* ---- Login self-scan badge (Phase 58 R5) ---- */
.login-card__self-badge {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
  border: 0;
  line-height: 0;
}

.login-card__self-badge img {
  display: inline-block;
  vertical-align: middle;
}

.login-card__self-badge:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 4px;
}

/* ---- Login learn-more link (Phase 58 R5) ---- */
.login-card__learn-more {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: center;
}

.login-card__learn-more a {
  color: var(--id-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.login-card__learn-more a:hover,
.login-card__learn-more a:focus-visible {
  color: var(--id-accent-hover);
}

/* ============================================================
   Glossary — inline definition affordance (Phase 58).
   <dfn data-glossary="key"> renders the term with a dotted
   underline. Tooltip is positioned by JS in main.hbs.
   ============================================================ */
dfn[data-glossary],
[data-glossary] {
  font-style: normal;
  border-bottom: 1px dotted var(--text-muted);
  cursor: help;
  text-decoration: none;
}

html[data-density="plain"] dfn[data-glossary],
html[data-density="plain"] [data-glossary] {
  border-bottom-style: solid;
}

.glossary-tip {
  position: absolute;
  z-index: 120;
  max-width: 320px;
  padding: var(--space-3);
  background: var(--bg-page);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  pointer-events: none;
}

.glossary-tip strong {
  font-weight: 600;
  color: var(--id-accent);
  letter-spacing: 0;
}

.glossary-tip[hidden] { display: none; }

/* ============================================================
   Fix proposals — two-pane (R5).
   Left: rationale (prose + provenance).
   Right: diff (mono code, citron evidence stripe on the wrapper).
   ============================================================ */
.fix-proposal {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.fix-proposal:last-child { border-bottom: 0; }

.fix-proposal__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.fix-proposal__check-label { display: inline-flex; align-items: center; }
.fix-proposal__check-label input { width: 16px; height: 16px; accent-color: var(--id-accent); }

.fix-proposal__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.fix-proposal__severity--error   { color: var(--status-error); }
.fix-proposal__severity--warning { color: var(--status-warning); }
.fix-proposal__severity--notice  { color: var(--status-info); }

.fix-proposal__effort,
.fix-proposal__confidence { color: var(--text-muted); }

.fix-proposal__panes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .fix-proposal__panes { grid-template-columns: 1fr; }
}

/* ── Rationale pane ── */
.fix-proposal__description {
  font-size: var(--font-size-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  max-width: 60ch;
  margin: 0 0 var(--space-4);
}

.fix-proposal__provenance {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fix-proposal__provenance-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.fix-proposal__provenance-row dt {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  padding-top: 2px;
}

.fix-proposal__provenance-row dd {
  margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  min-width: 0;
}

.fix-proposal__provenance-row code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--text-secondary);
}

.fix-proposal__context-toggle {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
}

.fix-proposal__context-toggle summary {
  cursor: pointer;
  color: var(--id-accent);
  font-weight: 500;
  padding: var(--space-2) 0;
  list-style: none;
}

.fix-proposal__context-toggle summary::-webkit-details-marker { display: none; }
.fix-proposal__context-toggle summary::before {
  content: '+';
  display: inline-block;
  width: 1em;
  font-family: var(--font-mono);
  font-weight: 600;
}
.fix-proposal__context-toggle[open] summary::before { content: '−'; }

.fix-proposal__context {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-x: auto;
}

/* ── Diff pane ── */
.fix-proposal__diff {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--id-evidence);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.fix-proposal__diff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-muted);
}

.fix-proposal__diff-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fix-proposal__copy {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}

.fix-proposal__copy:hover,
.fix-proposal__copy:focus-visible {
  background: var(--bg-page);
  border-color: var(--text-secondary);
}

.fix-proposal__code {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-surface);
  overflow-x: auto;
  white-space: pre;
}

/* ---- Scan-new advanced sections (R3 strip-down) ---- */
.scan-advanced {
  margin-bottom: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

.scan-advanced__summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--id-accent);
  padding: var(--space-2) 0;
  list-style: none;
}

.scan-advanced__summary::-webkit-details-marker { display: none; }

.scan-advanced__summary::before {
  content: '+';
  display: inline-block;
  width: 1em;
  font-family: var(--font-mono);
  font-weight: 600;
}

.scan-advanced[open] .scan-advanced__summary::before { content: '−'; }

.scan-advanced > .form-group,
.scan-advanced > .picker,
.scan-advanced > p { margin-top: var(--space-3); }

/* ============================================================
   Reports docket — /reports list (Phase 58 / R3).
   Same primitives as the home docket, plus a leading checkbox
   column for the compare workflow and a trailing actions group.
   ============================================================ */
.reports-docket {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-strong);
}

.reports-docket__row {
  display: grid;
  /*
   * Pinned widths so per-row content (varying action sets, status labels)
   * never reflows the status column. Status: 6rem fits COMPLETED / RUNNING /
   * QUEUED / FAILED with breathing room. Actions: 10rem fits "vs Previous"
   * + "Delete" in EN; longer locales scroll-x within the cell.
   */
  grid-template-columns: 1.5rem 11rem minmax(0, 1fr) 6rem 10rem;
  grid-template-areas:
    "check time     headline status actions"
    "check time     detail   detail actions";
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  align-items: baseline;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.reports-docket__row:hover {
  background-color: var(--bg-muted);
}

@media (max-width: 900px) {
  .reports-docket__row {
    grid-template-columns: 1.5rem 1fr auto;
    grid-template-areas:
      "check headline status"
      "check time     time"
      ".     detail   detail"
      ".     actions  actions";
    row-gap: var(--space-2);
  }
}

.reports-docket__row--flag::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background: var(--status-error);
  border-radius: 1px;
}

.reports-docket__check {
  grid-area: check;
  align-self: center;
  width: 16px;
  height: 16px;
  accent-color: var(--id-accent);
  cursor: pointer;
}

.reports-docket__check-placeholder {
  grid-area: check;
  display: inline-block;
}

.reports-docket__time {
  grid-area: time;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.reports-docket__headline {
  grid-area: headline;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.reports-docket__headline:hover,
.reports-docket__headline:focus-visible { color: var(--id-accent); }

.reports-docket__status {
  grid-area: status;
  justify-self: end;          /* right-align inside the pinned 6rem track */
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.reports-docket__status--completed { color: var(--status-success); }
.reports-docket__status--running   { color: var(--status-info); }
.reports-docket__status--queued    { color: var(--status-warning); }
.reports-docket__status--failed    { color: var(--status-error); }

.reports-docket__detail {
  grid-area: detail;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.reports-docket__detail a {
  color: var(--id-accent);
  text-decoration: none;
}

.reports-docket__detail a:hover,
.reports-docket__detail a:focus-visible { text-decoration: underline; }

.reports-docket__actions {
  grid-area: actions;
  display: grid;
  /* Two equal slots so 'vs Previous' lives in its own column.
     When previousScanId is absent we render an invisible placeholder so
     'Delete' always sits in the same screen position across rows. */
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-2);
  align-items: center;
  align-self: center;
  justify-items: end;
  overflow-x: auto;
}

.reports-docket__action-link {
  background: transparent;
  border: 0;
  padding: 2px var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.reports-docket__action-placeholder {
  /* Reserves the 'vs Previous' grid slot on rows that don't have it,
     so the Delete button never slides into the previous column. */
  display: block;
  width: 1px;
  height: 1px;
}

.reports-docket__action-link:hover,
.reports-docket__action-link:focus-visible {
  color: var(--text-primary);
  background: var(--bg-muted);
}

.reports-docket__action-link--danger { color: var(--status-error); }
.reports-docket__action-link--danger:hover,
.reports-docket__action-link--danger:focus-visible {
  color: var(--status-error);
  background: var(--status-error-bg);
}

/* ---- Section Title ---- */
.section-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---- Quick Scan (home page) ---- */
.quick-scan-section {
  margin-bottom: var(--space-xl);
}

.quick-scan-form .input-group {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.quick-scan-form .input-group input {
  flex: 1;
}

@media (max-width: 767px) {
  .quick-scan-form .input-group {
    flex-direction: column;
  }

  .quick-scan-form .input-group .btn {
    width: 100%;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Table Responsive (home page) ---- */
.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
}

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

.data-table th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background-color: var(--bg-tertiary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.data-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:nth-child(even) {
  background-color: var(--bg-secondary);
}

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

.cell--url {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell--wrap {
  max-width: 320px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── Bulk action bar ─────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: var(--surface-alt, var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}
.col--check { width: 2.5rem; text-align: center; }
.bulk-bar__select-all { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; font-weight: 600; }

/* ── Diff panel (proposal change details) ────────────────── */
.diff-panel { margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-secondary, #f8f9fa); border-radius: var(--border-radius); font-size: 0.8rem; }
.diff-section { margin-bottom: 0.4rem; }
.diff-section ul { margin: 0.2rem 0 0 1.2rem; padding: 0; }
.diff-section li { margin-bottom: 0.15rem; line-height: 1.4; }
.diff-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.diff-section--added .diff-label { color: var(--success, #22c55e); }
.diff-section--removed .diff-label { color: var(--error, #ef4444); }
.diff-section--modified .diff-label { color: var(--warning, #f59e0b); }
.diff-section--added li { color: var(--success, #22c55e); }
.diff-section--removed li { color: var(--error, #ef4444); text-decoration: line-through; }
.diff-section--modified li { color: var(--text-primary); }
.btn--xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }

/* ── Generic tabs (proposals, reusable) ──────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 1.25rem;
}
.tab {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text-primary); text-decoration: none; }
.tab--active,
.tab--active:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab .badge { margin-left: 0.4rem; vertical-align: middle; }

.cell--url a {
  color: var(--accent);
  text-decoration: none;
}

.cell--url a:hover {
  text-decoration: underline;
}

.cell--wrap {
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
}

.cell--jurisdictions {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ---- Text color helpers ---- */
.text--error { color: var(--status-error); }
.text--warning { color: var(--status-warning); }
.text--success { color: var(--status-success); }

/* ---- Empty State ---- */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--text-muted);
}

/* ---- Mobile: home page data-table → cards ---- */
@media (max-width: 767px) {
  .table-responsive {
    border: none;
    overflow-x: visible;
  }

  .data-table, .data-table thead, .data-table tbody,
  .data-table th, .data-table tr, .data-table td {
    display: block;
  }

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

  .data-table tbody tr {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
  }

  .data-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--bg-tertiary);
    font-size: var(--font-size-sm);
    text-align: right;
    min-height: 36px;
  }

  .data-table td:last-child {
    border-bottom: none;
    justify-content: flex-end;
  }

  .data-table td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
    margin-right: var(--space-sm);
    white-space: nowrap;
  }

  .cell--url {
    max-width: none;
    white-space: normal;
    word-break: break-all;
  }

  /* Long-form cells (Source URL, Summary, etc.) read better stacked
     vertically on mobile: label sits above the value with a small gap,
     full row width is used for the content. The default flex layout
     squeezes long text into the right column and creates ragged wraps
     (see /admin/proposals on narrow viewports). */
  .data-table td.cell--wrap {
    display: block;
    text-align: left;
    padding: var(--space-sm) 0;
  }

  .data-table td.cell--wrap::before {
    display: block;
    margin-bottom: var(--space-xs);
  }

  .data-table td.cell--wrap {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* ---- Tables ---- */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
}

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

caption {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

th {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:nth-child(even) {
  background-color: var(--bg-secondary);
}

tbody tr:hover {
  background-color: var(--bg-tertiary);
}

/* Sortable column headers */
th[aria-sort] {
  cursor: pointer;
  user-select: none;
}

th[aria-sort]:hover {
  background-color: var(--bg-tertiary);
  color: var(--accent);
}

th[aria-sort="ascending"]::after { content: " ↑"; }
th[aria-sort="descending"]::after { content: " ↓"; }
th[aria-sort="none"]::after { content: " ↕"; opacity: 0.4; }

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Status badges include an icon so colour is not the only indicator */
.badge--completed { background-color: var(--status-success-bg); color: var(--status-success); }
.badge--failed    { background-color: var(--status-error-bg);   color: var(--status-error); }
.badge--running   { background-color: var(--status-running-bg); color: var(--status-running); }
.badge--queued    { background-color: var(--status-queued-bg);  color: var(--status-queued); }
.badge--info      { background-color: var(--status-info-bg);    color: var(--status-info); }
.badge--warning   { background-color: var(--status-warning-bg); color: var(--status-warning); }

.badge--success  { background-color: var(--status-success-bg); color: var(--status-success); }
.badge--error    { background-color: var(--status-error-bg);   color: var(--status-error); }
.badge--neutral  { background-color: var(--bg-tertiary);       color: var(--text-secondary); }

/* Phase 54-04: tiny variant + per-org override marker beside source mode badge. */
.badge--xs { font-size: 0.65rem; padding: 1px 6px; }
.source-mode-override { font-style: italic; opacity: 0.85; margin-left: 4px; }

.badge__icon { width: 12px; height: 12px; flex-shrink: 0; }

/* Status cell: groups a badge with an optional small suffix like "(Expired)" */
.status-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background-color: var(--id-accent);
  color: var(--text-on-accent);
  border-color: var(--id-accent);
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--id-accent-hover);
  border-color: var(--id-accent-hover);
}

.btn--secondary {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn--secondary:hover:not(:disabled) {
  background-color: var(--accent-light);
}

.btn--danger {
  background-color: var(--status-error);
  color: var(--text-inverse);
  border-color: var(--status-error);
}

.btn--danger:hover:not(:disabled) {
  background-color: var(--status-error-hover);
  border-color: var(--status-error-hover);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn--ghost:hover:not(:disabled) {
  background-color: var(--bg-muted);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.btn--warning {
  background-color: var(--status-warning);
  color: var(--text-inverse);
  border-color: var(--status-warning);
}

.btn--warning:hover:not(:disabled) {
  opacity: 0.85;
}

.btn--sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
}

.btn--lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
}

.btn--full {
  width: 100%;
}

/* ---- Forms ---- */
.form-group {
  margin-bottom: var(--space-md);
}

.form-group--inline {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

/*
 * Reports controls row — used as the parent of stacked form-groups +
 * trailing action buttons. Was unstyled; the form-group `flex: 1` did
 * nothing and the trailing <a>/<button> elements sat in document flow,
 * giving the appearance of slightly-misaligned button baselines. Now:
 *   - flex row, wraps on narrow viewports
 *   - align-items: end so the buttons sit on the same baseline as the
 *     bottom edge of the form-control inputs (labels live above)
 *   - explicit gap so buttons share rhythm with the inputs
 */
.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}
.controls-row .btn,
.controls-row .btn--sm {
  /* Match input height (36px default) so buttons line up bottom-to-bottom
     with the form fields without manual nudging. */
  height: 36px;
}

label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

label .required {
  color: var(--status-error);
  margin-left: var(--space-xs);
  aria-label: " (required)";
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
  outline: none;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--status-error);
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* Readonly inputs show as muted with dashed border */
input[readonly] {
  background-color: var(--bg-secondary);
  border-style: dashed;
  color: var(--text-muted);
  cursor: not-allowed;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.radio-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.radio-group--inline { flex-direction: row; gap: var(--space-md); }
.radio-label { display: flex; align-items: flex-start; gap: var(--space-xs); cursor: pointer; font-size: var(--font-size-sm); }
.radio-label input[type="radio"] { margin-top: 0.2rem; accent-color: var(--accent); }
.radio-label .form-hint { margin-top: 0; margin-left: 0; display: block; }

.form-error {
  font-size: var(--font-size-xs);
  color: var(--status-error);
  margin-top: var(--space-xs);
  display: flex;
  align-items: flex-start;
}
.form-error:empty {
  display: none;
  gap: var(--space-xs);
}

.form-error::before {
  content: "⚠";
  flex-shrink: 0;
}

/* Checkboxes and radios */
.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 400;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* Select custom arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6b6b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: calc(var(--space-md) + 20px);
}

/* ---- Alert / Error Boxes ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  border: 1px solid;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
}

.alert--error   { background-color: var(--status-error-bg);   border-color: var(--status-error);   color: var(--status-error); }
.alert--success { background-color: var(--status-success-bg); border-color: var(--status-success); color: var(--status-success); }
.alert--warning { background-color: var(--status-warning-bg); border-color: var(--status-warning); color: var(--status-warning); }
.alert--info    { background-color: var(--status-info-bg);    border-color: var(--status-info);    color: var(--status-info); }

.alert__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert__body { flex: 1; }
.alert__title { font-weight: 700; margin-bottom: var(--space-xs); }

/* ---- OAuth Consent Screen (Phase 31.1) ---- */
.consent { max-width: 640px; margin: var(--space-lg) auto; }
.consent h1 { margin-bottom: var(--space-xs); }
.consent > .muted { margin-bottom: var(--space-lg); }

.consent__kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-sm) var(--space-md);
  margin: var(--space-lg) 0;
  align-items: baseline;
}
.consent__kv dt {
  font-weight: 600;
  color: var(--text-muted, var(--text-secondary, #666));
  white-space: nowrap;
}
.consent__kv dd { margin: 0; }

.consent__scopes, .consent__resources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.consent__scopes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
}
.consent__scopes code {
  font-weight: 600;
  padding: 2px 6px;
  background: var(--surface-muted, rgba(0,0,0,0.05));
  border-radius: 4px;
  min-width: 9ch;
  text-align: left;
}
.consent__scope-desc { color: var(--text-secondary, inherit); }
.consent__scopes--skipped code { opacity: 0.6; text-decoration: line-through; }
.consent__scopes--skipped .consent__scope-desc { opacity: 0.6; }
.consent__resources code, .consent__redirect {
  padding: 2px 6px;
  background: var(--surface-muted, rgba(0,0,0,0.05));
  border-radius: 4px;
  word-break: break-all;
}

.consent__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border, rgba(0,0,0,0.1));
}
.consent__actions .btn { min-width: 120px; }

@media (max-width: 480px) {
  .consent__kv { grid-template-columns: 1fr; gap: 0; }
  .consent__kv dt { margin-top: var(--space-sm); }
  .consent__actions { flex-direction: column; }
  .consent__actions .btn { width: 100%; }
}

/* ---- Toast Notifications ---- */
#toast-container {
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
  max-width: calc(100vw - 2 * var(--space-lg));
  width: 360px;
}

#toast-container:not(:empty) {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  pointer-events: auto;
  animation: toastIn 300ms ease forwards;
  border: 1px solid;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.toast--success { background-color: var(--status-success-bg); border-color: var(--status-success); color: var(--status-success); }
.toast--error   { background-color: var(--status-error-bg);   border-color: var(--status-error);   color: var(--status-error); }
.toast--info    { background-color: var(--status-info-bg);    border-color: var(--status-info);    color: var(--status-info); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal {
  background-color: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-xl);
  position: relative;
}

.modal--wide { max-width: min(960px, 95vw); }

/* Native <dialog> element styling */
dialog {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 90vw;
  padding: var(--space-xl);
  margin: auto;
  position: fixed;
  inset: 0;
  height: fit-content;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Locked / muted card: used for read-only prompt segments */
.card--muted {
  background-color: var(--bg-tertiary);
  min-width: 0;
}
.card--muted .card__header {
  flex-wrap: wrap;
}
.prompt-segment-content {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* Diff view: wraps long lines inside the modal body */
.prompt-diff {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
}
.prompt-diff__line { display: block; }
.prompt-diff__line--add { background-color: rgba(46, 160, 67, 0.15); color: var(--status-success); }
.prompt-diff__line--remove { background-color: rgba(248, 81, 73, 0.15); color: var(--status-error); }
.prompt-diff__line--context { color: var(--text-muted); }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.modal__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xl);
  color: var(--text-muted);
  padding: var(--space-xs);
  border-radius: var(--border-radius);
  line-height: 1;
}

.modal__close:hover { color: var(--text-primary); }

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

/* ---- Progress Bar ---- */
.progress-bar {
  width: 100%;
  height: 12px;
  background-color: var(--bg-tertiary);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.progress-bar__fill {
  height: 100%;
  background-color: var(--accent);
  border-radius: 6px;
  transition: width var(--transition-base);
  min-width: 4px;
}

.progress-bar__fill--success { background-color: var(--status-success); }
.progress-bar__fill--warning { background-color: var(--status-warning); }
.progress-bar__fill--error   { background-color: var(--status-error); }

/* ── Brand Score Panel (Phase 20) ───────────────────────────── */
.brand-panel__big-number {
  color: var(--text-primary);
}

/* ── Brand Overview Page (Phase 23) ────────────────────────── */
.brand-overview__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.brand-overview__sites {
  position: sticky;
  top: var(--space-md);
}

.brand-overview__site-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.brand-overview__site-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.brand-overview__site-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.brand-overview__site-item.is-active {
  background: var(--accent-muted, var(--bg-hover));
  border-color: var(--accent);
  font-weight: var(--fw-medium);
}

.brand-overview__site-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  font-size: var(--font-size-sm);
}

.brand-overview__site-score {
  font-weight: var(--fw-bold);
  font-size: var(--font-size-sm);
  margin-left: var(--space-sm);
  flex-shrink: 0;
}

.brand-overview__detail {
  min-width: 0;
}

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

.brand-overview__big-score {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.brand-overview__delta {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
}

.brand-overview__sparkline {
  width: 120px;
  height: 40px;
  flex-shrink: 0;
}

.brand-overview__subs {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.brand-overview__subs > div {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  .brand-overview__layout {
    grid-template-columns: 1fr;
  }
  .brand-overview__sites {
    position: static;
  }
  .brand-overview__score-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .brand-overview__subs > div {
    grid-template-columns: 80px 1fr auto;
  }
}

/* Progress with label */
.progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ---- Picker (searchable multi-select) ---- */
.picker {
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.picker__tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.picker__tab {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-secondary);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.picker__tab--active {
  background: var(--bg-primary);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.picker__search {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  outline: none;
}

.picker__search:focus {
  background: var(--accent-light);
}

.picker__list {
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 400;
  border-bottom: 1px solid var(--bg-tertiary);
  transition: background var(--transition-fast);
}

.picker__item:hover {
  background: var(--accent-light);
}

.picker__item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.picker__selected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  min-height: 0;
}

.picker__selected:empty {
  display: none;
}

.picker__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.picker__tag button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--accent);
  padding: 0;
  line-height: 1;
}

/* ---- Load More ---- */
.load-more {
  text-align: center;
  padding: var(--space-md) 0;
}

/* ---- HTMX indicators ---- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator  { display: inline; }

/* ---- Pagination ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

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

/* ---- Search Bar & Filter Bar ---- */
.search-bar,
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.search-bar input {
  max-width: 360px;
}

.filter-bar select {
  max-width: 300px;
}

/* ---- Status Indicators ---- */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status dots are always accompanied by visible text labels */
.status-dot--up      { background-color: var(--status-success); }
.status-dot--down    { background-color: var(--status-error); }
.status-dot--unknown { background-color: var(--text-muted); }

.service-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
}

/* ---- Log/Terminal area ---- */
.log-area {
  background-color: var(--bg-sidebar);
  color: #c8d3e0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border-color);
}

.log-entry {
  display: block;
  line-height: 1.4;
  padding: 1px 0;
}

.log-entry--error   { color: #f85149; }
.log-entry--warning { color: #e3b341; }
.log-entry--success { color: #56d364; }
.log-entry--info    { color: #79c0ff; }

/* ---- Issue counters ---- */
.issue-counters {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.issue-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  min-width: 80px;
  text-align: center;
}

.issue-counter__count {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.1;
}

.issue-counter__label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.issue-counter--errors   .issue-counter__count { color: var(--status-error); }
.issue-counter--warnings .issue-counter__count { color: var(--status-warning); }
.issue-counter--notices  .issue-counter__count { color: var(--status-info); }

/* ---- Login Page ---- */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-light);
  padding: var(--space-md);
}

.app-version {
  margin-top: auto;
  align-self: flex-end;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.login-card {
  width: 100%;
  max-width: 440px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-lg);
}

.login-card__logo {
  text-align: center;
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--accent);
}

.login-card__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--space-xs);
}

.login-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-xl);
  line-height: var(--leading-normal);
}

/* ---- Login SSO & Fallback ---- */
.login-sso {
  margin-bottom: var(--space-lg);
}

.login-password-fallback,
.login-apikey-fallback {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-md);
}

.login-password-fallback summary,
.login-apikey-fallback summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  padding: var(--space-sm) 0;
  transition: color var(--transition-fast);
}

.login-password-fallback summary:hover,
.login-apikey-fallback summary:hover {
  color: var(--accent);
}

/* ---- Sidebar Backdrop (overlay when menu is open) ---- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.sidebar-backdrop.is-visible {
  display: block;
}

/* ---- App Header (always visible — burger menu + branding) ---- */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 50;
}

.app-header__brand {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.app-header__user {
  margin-left: auto;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ---- Density toggle (Phase 57) ---- */
.density-toggle {
  display: inline-flex;
  margin-left: auto;
  background: var(--bg-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--border-radius);
  padding: 2px;
  gap: 2px;
}

.app-header .density-toggle { margin-left: auto; }
.app-header .density-toggle + .app-header__user { margin-left: var(--space-3); }

.density-toggle__btn {
  background: transparent;
  border: 0;
  padding: 4px var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  min-height: 28px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.density-toggle__btn[aria-pressed="true"] {
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.density-toggle__btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .density-toggle { display: none; }
}

/* ---- Density-driven rules ---- */
html[data-density="plain"] body {
  line-height: var(--leading-relaxed);
}

html[data-density="plain"] .docket__row {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  row-gap: var(--space-2);
}

html[data-density="plain"] .docket__row-detail {
  font-size: var(--font-size-base);
}

html[data-density="plain"] .data-table td,
html[data-density="plain"] .data-table th {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.menu-toggle:hover {
  background-color: var(--bg-muted);
  border-color: var(--text-secondary);
}

/* ---- Detail List (view mode) ---- */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.detail-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--bg-tertiary);
}

.detail-list__item:last-child {
  border-bottom: none;
}

.detail-list__item dt {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 100px;
}

.detail-list__item dd {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

/* ---- Detail Section Title ---- */
.detail-section-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

/* ---- Detail Cards (nested items in view mode) ---- */
.detail-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  background-color: var(--bg-secondary);
}

.detail-card--compact {
  padding: var(--space-sm) var(--space-md);
}

.detail-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.detail-card__body {
  font-size: var(--font-size-sm);
}

.detail-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.detail-card__footer {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
}

/* ---- Source Link (prominent) ---- */
.detail-source-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background-color: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--border-radius);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: background-color var(--transition-fast);
}

.detail-source-link:hover {
  background-color: var(--accent);
  color: var(--text-inverse);
}

/* ---- Admin Header ---- */
.admin-header {
  margin-bottom: var(--space-lg);
}

.admin-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-xs);
}

/* ---- Admin Section ---- */
.admin-section {
  margin-bottom: var(--space-xl);
}

/* ---- Table Container (alias for table-wrapper) ---- */
.table-container {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
}

/* ---- Button Group ---- */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

/* ---- Plugin Org Picker ---- */
/* ---- Plugin inline config ---- */
.plugin-inline-config {
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  max-height: 400px;
  overflow-y: auto;
}

/* ---- Org deploy (collapsible) ---- */
.org-deploy {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-sm);
}

.org-deploy > summary {
  cursor: pointer;
  list-style: none;
}

.org-deploy > summary::-webkit-details-marker { display: none; }

.org-deploy__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  max-height: 160px;
  overflow-y: auto;
  padding: var(--space-xs) 0;
}

.org-deploy__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.org-deploy__item:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color-strong);
}

.org-deploy__item:has(input:checked) {
  background-color: var(--accent-light);
  border-color: var(--accent);
}

.org-deploy__item input[type="checkbox"] {
  accent-color: var(--accent);
}

.plugin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

/* ---- Plugin Grid ---- */
.plugin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
}

/* ---- Stats List (key-value pairs inside cards) ---- */
.stats-list {
  margin-bottom: var(--space-md);
}

.stats-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--bg-tertiary);
  font-size: var(--font-size-sm);
}

.stats-list__item:last-child {
  border-bottom: none;
}

.stats-list__item dt {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-list__item dd {
  color: var(--text-primary);
}

/* ---- Page Actions (desktop) ---- */
.page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* ---- Form Actions ---- */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ---- Toast Warning Variant ---- */
.toast--warning {
  background-color: var(--status-warning-bg);
  border-color: var(--status-warning);
  color: var(--status-warning);
}

/* ---- Toast close button ---- */
.toast__close {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  font-size: var(--font-size-lg);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-left: auto;
  transition: opacity var(--transition-fast);
}

.toast__close:hover {
  opacity: 1;
}

/* ---- Profile page ---- */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 900px;
}

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

.profile-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm) var(--space-lg);
  margin: 0;
}

.profile-details dt {
  font-weight: 600;
  color: var(--text-secondary);
}

.profile-details dd {
  margin: 0;
}

.sidebar__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.sidebar__footer-logout {
  display: inline;
}

.sidebar__footer-user {
  color: var(--text-sidebar);
  text-decoration: none;
  font-weight: 500;
}

.sidebar__footer-user:hover {
  text-decoration: underline;
  color: var(--accent);
}

/* Override ghost/secondary buttons inside sidebar for WCAG contrast on dark bg */
.sidebar .btn--ghost,
.sidebar .btn--secondary {
  color: var(--text-sidebar);
}
.sidebar .btn--ghost:hover:not(:disabled),
.sidebar .btn--secondary:hover:not(:disabled) {
  color: var(--text-sidebar-active);
  background-color: var(--bg-sidebar-hover);
}

/* ---- Larger modal for detail views ---- */
.modal--lg {
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 767px) {
  .modal--lg {
    max-width: 100%;
  }
}

/* ---- Responsive (Tablet & Mobile < 1024px) ---- */
@media (max-width: 1024px) {
  /* Sidebar backdrop and toggle already handled globally */

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  /* ---- Layout ---- */
  .page-body {
    padding: var(--space-sm);
  }

  .page-header {
    padding: var(--space-sm) var(--space-md);
  }

  .page-header__title {
    font-size: var(--font-size-xl);
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .card {
    padding: var(--space-md);
  }

  .card__value {
    font-size: var(--font-size-2xl);
  }

  /* ---- TABLE → CARD LAYOUT ----
     Each <tr> becomes a stacked card. <th> headers are hidden.
     Each <td> uses its data-label attribute as a label prefix.
     No template changes needed — just add data-label="Column Name" on <td> elements.
     Works without data-label too — cells just stack without labels. */
  .table-wrapper {
    border: none;
    border-radius: 0;
    overflow-x: visible;
  }

  table, thead, tbody, th, tr, td {
    display: block;
  }

  thead {
    /* Visually hide headers but keep for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  tbody tr {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
  }

  tbody tr:hover {
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-md);
  }

  /* Make entire card tappable on mobile */
  tbody tr {
    cursor: pointer;
    position: relative;
  }

  /* Row arrow removed — View button serves the same purpose */

  /* Better touch targets for buttons inside cards */
  td .btn {
    min-height: 40px;
    font-size: var(--font-size-sm);
  }

  td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--bg-tertiary);
    font-size: var(--font-size-sm);
    text-align: right;
    min-height: 36px;
  }

  td:last-child {
    border-bottom: none;
    padding-top: var(--space-sm);
    justify-content: flex-end;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  /* data-label creates inline labels for each field */
  td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
    margin-right: var(--space-sm);
    white-space: nowrap;
  }

  /* Actions row: center buttons */
  td:last-child .btn {
    flex: 1;
    min-width: 0;
  }

  .hide-mobile {
    display: none;
  }

  /* ---- Page Actions ---- */
  .page-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
  }

  .page-actions .btn {
    justify-content: center;
  }

  /* ---- Forms ---- */
  .form-actions {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .form-actions .btn {
    width: 100%;
  }

  .login-card {
    padding: var(--space-lg);
    border-radius: var(--border-radius);
  }

  .search-bar,
  .filter-bar {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .search-bar input,
  .filter-bar input,
  .filter-bar select {
    max-width: 100%;
    width: 100%;
  }

  /* ---- Modal (bottom sheet) ---- */
  .modal {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    margin-top: auto;
    margin-bottom: 0;
    padding: var(--space-lg);
    padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 16px));
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal__footer {
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }

  /* ---- Toast ---- */
  #toast-container {
    left: var(--space-sm);
    right: var(--space-sm);
    bottom: var(--space-sm);
    max-width: none;
  }

  /* ---- Issue counters ---- */
  .issue-counters {
    justify-content: space-around;
  }

  .issue-counter {
    min-width: 60px;
    padding: var(--space-xs) var(--space-sm);
  }

  /* ---- Badges ---- */
  .badge {
    font-size: 0.7rem;
  }

  /* ---- Log area ---- */
  .log-area {
    height: 150px;
    font-size: 0.7rem;
  }

  /* ---- Pagination ---- */
  .pagination {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .pagination .btn {
    width: 100%;
  }

  /* ---- Service status cards ---- */
  .service-status {
    padding: var(--space-xs) 0;
  }

  /* ---- Admin header ---- */
  .admin-header h2 {
    font-size: var(--font-size-xl);
  }

  /* ---- Plugin grid ---- */
  .plugin-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Button group ---- */
  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }

  /* ---- Table container ---- */
  .table-container {
    border: none;
    border-radius: 0;
  }
}

/* Desktop only — mobile elements already hidden by default (display: none) */

/* ---- Print Styles ---- */
@media print {
  .sidebar,
  .app-header,
  .page-header .btn,
  nav,
  #toast-container,
  .modal-overlay {
    display: none !important;
  }

  .main-content {
    margin-left: 0;
    padding-top: 0;
  }

  .page-body {
    padding: 0;
  }

  .page-header {
    background-image: none;
  }

  body {
    font-family: Georgia, 'Times New Roman', serif;
    color: #000000;
    background: #ffffff;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }

  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #000000;
  }

  .card {
    border: 1px solid #000000;
    box-shadow: none;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  tr, .card {
    page-break-inside: avoid;
  }
}

/* ---- Utilities ---- */
.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;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.ml-sm { margin-left: var(--space-sm); }
.fw-bold { font-weight: 700; }
.text--center { text-align: center; }
.text--capitalize { text-transform: capitalize; }
.word-break { word-break: break-all; }
.is-hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.font-mono { font-family: var(--font-mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Report Detail — .rpt-* namespace
   ============================================================ */

/* ── Tabs ──────────────────────────────────────────────────── */
.rpt-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 1.25rem;
}
.rpt-tab {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}
.rpt-tab:hover { color: var(--text-primary); }
.rpt-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.rpt-tab-panel--hidden { display: none; }

/* ── Tab shell — side-rail layout (Phase 58 R5) ────────────────────────
   Top-level rpt-tabs (those with .rpt-tabs--rail) flip to a vertical
   nav rail on the left. Sub-tabs inside panels keep the original
   horizontal layout. */
.rpt-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-4);
}

.rpt-shell__panels { min-width: 0; }

.rpt-tabs--rail {
  flex-direction: column;
  gap: 0;
  border-bottom: 0;
  border-right: 1px solid var(--border-strong);
  margin: 0;
  padding-right: var(--space-3);
  position: sticky;
  top: 76px; /* below app-header (56px) + breathing room */
  align-self: start;
}

.rpt-tabs--rail .rpt-tab {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border: 0;
  border-right: 2px solid transparent;
  margin: 0 -1px 0 0;
  border-radius: 0;
  font-size: var(--font-size-sm);
}

.rpt-tabs--rail .rpt-tab:hover,
.rpt-tabs--rail .rpt-tab:focus-visible {
  background-color: var(--bg-muted);
  color: var(--text-primary);
}

.rpt-tabs--rail .rpt-tab--active {
  color: var(--id-accent);
  border-right-color: var(--id-evidence);
  border-bottom-color: transparent;
  background-color: var(--id-accent-tint);
  font-weight: 600;
}

@media (max-width: 900px) {
  .rpt-shell { grid-template-columns: 1fr; gap: var(--space-4); }
  .rpt-tabs--rail {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--border-strong);
    padding-right: 0;
    padding-bottom: 0;
    position: static;
    overflow-x: auto;
  }
  .rpt-tabs--rail .rpt-tab {
    border-right: 0;
    border-bottom: 2px solid transparent;
    margin: 0 0 -1px;
    white-space: nowrap;
  }
  .rpt-tabs--rail .rpt-tab--active {
    border-right-color: transparent;
    border-bottom-color: var(--id-evidence);
  }
}

/* ── Compliance traffic light banner ──────────────────────── */
.rpt-compliance-banner {
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.rpt-compliance-banner--pass { background: var(--status-success-bg, #dcfce7); color: var(--status-success, #166534); border: 1px solid var(--status-success, #22c55e); }
.rpt-compliance-banner--review { background: var(--status-warning-bg, #fef9c3); color: var(--status-warning-text, #854d0e); border: 1px solid var(--status-warning, #f59e0b); }
.rpt-compliance-banner--fail { background: var(--status-error-bg, #fee2e2); color: var(--status-error, #991b1b); border: 1px solid var(--status-error, #ef4444); }

/* ── Summary bar (compact inline badges) ──────────────────── */
.rpt-summary-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.6rem 0;
}
.rpt-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; }
.rpt-badge--pass { background: var(--status-success); color: var(--text-inverse); }
.rpt-badge--fail { background: var(--status-error); color: var(--text-inverse); }
.rpt-badge--neutral { background: var(--bg-tertiary); color: var(--text-secondary); }
.rpt-badge--white { background: rgba(255,255,255,0.2); color: var(--text-inverse); }
.rpt-badge--error-light { background: var(--status-error-bg); color: var(--status-error); }
.rpt-badge--warning-light { background: var(--status-warning-bg); color: var(--status-warning); }
.rpt-badge--notice-light { background: var(--status-info-bg); color: var(--status-info); }
.rpt-badge--success-light { background: var(--status-success-bg, #dcfce7); color: var(--status-success, #166534); }

/* ── Section wrapper ──────────────────────────────────────── */
.rpt-section { background: var(--bg-primary); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 1.25rem; }
.rpt-section__header { padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.rpt-section__header--dark { background: var(--bg-sidebar); color: var(--text-inverse); }
.rpt-section__title { font-size: 1rem; font-weight: 700; }
.rpt-section__subtitle { font-size: 0.78rem; opacity: 0.85; margin-top: 0.2rem; }
.rpt-section__meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ── Issue section headers (Tab 2) ────────────────────────── */
.rpt-issue-section { margin-bottom: 1.25rem; }
.rpt-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.rpt-section-header__title { font-size: 0.92rem; font-weight: 700; margin: 0; }
.rpt-section-header__hint { font-size: 0.72rem; font-style: italic; margin-left: auto; }
.rpt-section-header--regulatory { background: var(--status-error-bg); padding-left: var(--space-3); }
.rpt-section-header--template { background: var(--accent-template-light); padding-left: var(--space-3); }
.rpt-section-header--other { background: var(--bg-tertiary); padding-left: var(--space-3); }

/* ── Collapsible issue groups ─────────────────────────────── */
.rpt-issue-list { display: flex; flex-direction: column; gap: 0.35rem; }
.rpt-group {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow-x: hidden;
}
.rpt-group__header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;
  transition: background 0.1s;
}
.rpt-group__header:hover { background: var(--bg-secondary); }
.rpt-group__title { font-weight: 600; font-size: 0.84rem; }
.rpt-component-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 4px; font-size: 0.78rem; font-weight: 700; background: var(--accent-template); color: var(--text-inverse); white-space: nowrap; }
.rpt-group__body { padding: 0 0.85rem 0.65rem; }
.rpt-group--collapsed .rpt-group__body { display: none; }

/* ── Individual issue items ───────────────────────────────── */
.rpt-issue-item {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.82rem;
  min-width: 0;
}
.rpt-issue-item:last-child { border-bottom: none; }
.rpt-template-block { border: 1px solid var(--accent-template); padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; border-radius: var(--border-radius-sm); }
.rpt-template-block__label { font-size: 0.72rem; font-weight: 600; color: var(--accent-template); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }

/* ── Templates tab ────────────────────────────────────── */
.rpt-template-intro { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 1rem; }
.rpt-group--template { border: 1px solid var(--accent-template); border-radius: var(--border-radius-sm); padding: var(--space-2); }
.rpt-issue-item__head { display: flex; align-items: flex-start; gap: 0.4rem; flex-wrap: wrap; }
.rpt-issue-item__message { flex: 1; min-width: 0; }
.rpt-issue-item__detail { margin-top: 0.2rem; }
.rpt-issue-item__regs { margin-top: 0.3rem; display: flex; flex-wrap: wrap; gap: 0.2rem; }
.rpt-issue-item__wcag-desc { font-size: 0.73rem; margin-top: 0.1rem; }
.rpt-issue-item__affected { margin-top: 0.35rem; font-size: 0.75rem; color: var(--text-muted); }
.rpt-issue-item__affected summary { cursor: pointer; color: var(--accent-template); font-weight: 600; }
.rpt-issue-item__affected ul { margin-top: 0.3rem; padding-left: 1.2rem; }
.rpt-issue-item__affected li { font-size: 0.72rem; word-break: break-all; }

/* ── Jurisdiction cards ───────────────────────────────────── */
.rpt-juris-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; padding: 1.25rem; }
.rpt-juris-card { border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.rpt-juris-card__head { padding: 0.7rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.rpt-juris-card__head--pass-head { background: var(--status-success-bg); border-bottom: 2px solid var(--status-success); }
.rpt-juris-card__head--fail-head { background: var(--status-error-bg); border-bottom: 2px solid var(--status-error); }
.rpt-juris-card__head--review-head { background: var(--status-warning-bg); border-bottom: 2px solid var(--status-warning); }
.rpt-juris-card__name { font-weight: 700; font-size: 0.9rem; }
.rpt-juris-card__id { font-size: 0.7rem; color: var(--text-secondary); }
.rpt-juris-card__status { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.rpt-juris-card__status--s-pass { color: var(--status-success); }
.rpt-juris-card__status--s-fail { color: var(--status-error); }
.rpt-juris-card__status--s-review { color: #78350f; }
.rpt-juris-card__body { padding: 0.7rem 1rem; font-size: 0.82rem; }
.rpt-juris-card__viol { margin-bottom: 0.3rem; }
.rpt-juris-card__regs { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rpt-text--fail { color: var(--status-error); }
.rpt-text--muted { color: var(--text-muted); }

/* Phase 89 — false-positive dismissal controls (89-UI-SPEC.md, "Proposed CSS additions") */
.rpt-dismiss-btn { margin-left: auto; }
.rpt-assign-btn ~ .rpt-dismiss-btn { margin-left: 0; }
.rpt-dismiss-dialog { max-height: calc(100vh - 2 * var(--space-md)); overflow-y: auto; }
.rpt-dismiss-dialog .modal__title { font-weight: 600; }
.rpt-dismiss-dialog__preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  margin: var(--space-md) 0;
}
.rpt-dismiss-dialog__preview dd { margin: 0; font-weight: 600; }
/* 89-11 (D-15 Q1 item 3, D-02): the dialog is the scroll container; its footer stays in view at
   open, over the dialog's bottom padding, opaque in both themes. scroll-padding keeps focus
   scrolling (textarea, error) above it. Scoped: the global .modal__footer is unchanged. */
.rpt-dismiss-dialog { scroll-padding-bottom: calc(var(--space-8) + var(--space-lg)); }
.rpt-dismiss-dialog .modal__footer {
  position: sticky;
  /* Chromium insets the sticky edge by the scroll container's padding; reach the dialog's edge. */
  bottom: calc(-1 * var(--space-xl));
  background-color: var(--bg-primary);
  padding-bottom: var(--space-xl);
  margin-bottom: calc(-1 * var(--space-xl));
}

/* Phase 89 Plan 05 — the Dismissed findings section (details at the end of the Issues panel) */
.rpt-dismissed { margin-top: var(--space-lg); }
.rpt-dismissed__summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.rpt-dismissed__summary::-webkit-details-marker { display: none; }
.rpt-dismissed__summary::before {
  content: '\25B6';
  display: inline-block; /* a transform does not apply to a plain inline box, so the open marker never turned */
  margin-right: var(--space-sm);
  font-size: var(--font-size-xs);
  transition: transform 0.15s;
}
details[open] > .rpt-dismissed__summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .rpt-dismissed__summary::before { transition: none; }
}
.rpt-dismissed__summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
.rpt-dismissed__heading {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: var(--space-md) 0 var(--space-sm);
}
.rpt-dismissed__intro {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: var(--space-sm) 0 var(--space-md);
}
/* Revoked rows carry .rpt-text--muted, but `.data-table td` sets its own colour and outranks that
   single-class utility, so without this rule the rows are muted in markup and not on screen. */
.rpt-dismissed td.rpt-text--muted { color: var(--text-muted); }
/* 89-11 (D-15 Q1 item 4, D-07): desktop only. The 8-column revoked table squeezed the rule code
   (break-all broke it per character over up to 11 lines) and collapsed the Comment column. The
   <=767px card layout above is untouched. */
@media (min-width: 768px) {
  .rpt-dismissed .data-table th { white-space: normal; padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .rpt-dismissed .data-table td { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .rpt-dismissed .data-table td:first-child { min-width: 11rem; }
  .rpt-dismissed .data-table td:first-child .rpt-code { word-break: normal; overflow-wrap: anywhere; }
  .rpt-dismissed .data-table .cell--wrap { min-width: 8rem; }
  .rpt-dismissed .data-table .cell--url { max-width: 8rem; }
}
/* 89-11 (D-15 Q1 item 5, D-11): room under the report's top-level tab panels for the fixed
   assistant launcher, only when it is on the page and only on screen (the child combinator keeps
   the nested compliance sub-panels from adding it twice). The launcher itself is unchanged. */
@media screen {
  body:has(#agent-launch) .rpt-shell__panels > .rpt-tab-panel { padding-bottom: calc(var(--space-8) + var(--space-md)); }
}

/* ── Severity badge ───────────────────────────────────────── */
.rpt-severity { display: inline-block; padding: 0.12rem 0.45rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; }
.rpt-severity--error { background: var(--status-error-bg); color: var(--status-error); }
.rpt-severity--warning { background: var(--status-warning-bg); color: var(--status-warning); }
.rpt-severity--notice { background: var(--status-info-bg); color: var(--status-info); }
.rpt-severity--clean { background: var(--status-success-bg); color: var(--status-success); }

/* ── Regulation tags ──────────────────────────────────────── */
.rpt-reg-tag { display: inline-block; padding: 0.12rem 0.45rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; margin: 0.1rem 0.1rem 0.1rem 0; white-space: nowrap; text-decoration: none; }
.rpt-reg-tag--obligation-mandatory { background: var(--status-error-bg); color: var(--status-error); border: 1px solid var(--status-error); }
.rpt-reg-tag--obligation-recommended { background: var(--status-warning-bg); color: var(--status-warning); border: 1px solid var(--status-warning); }
.rpt-reg-tag--obligation-optional { background: var(--status-info-bg); color: var(--status-info); border: 1px solid var(--status-info); }

/* ── Code / WCAG references ───────────────────────────────── */
.rpt-code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.75rem; color: var(--accent-template); word-break: break-all; }
.rpt-code-ctx { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.75rem; background: var(--bg-secondary); padding: 0.15rem 0.35rem; border-radius: 4px; word-break: break-all; display: inline-block; max-width: 400px; overflow: hidden; text-overflow: ellipsis; }
.rpt-wcag-link { color: inherit; text-decoration: underline dotted; }
.rpt-wcag-link:hover { text-decoration: underline; }
.rpt-wcag-info { margin-top: 0.25rem; }
.rpt-wcag-info__title { font-weight: 600; font-size: 0.78rem; }
.rpt-wcag-info__desc { font-size: 0.73rem; color: var(--text-muted); margin-top: 0.1rem; }

/* ── Issue table (per-page, Tab 3) ────────────────────────── */
.rpt-table-wrap { overflow-x: auto; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }
.rpt-table th { background: var(--bg-secondary); padding: 0.55rem 1rem; text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-color); }
.rpt-table th:nth-child(1) { width: 7%; }   /* Severity */
.rpt-table th:nth-child(2) { width: 20%; }  /* WCAG Criterion */
.rpt-table th:nth-child(3) { width: 38%; }  /* What's Wrong */
.rpt-table th:nth-child(4) { width: 15%; }  /* Legal Impact */
.rpt-table th:nth-child(5) { width: 20%; }  /* Element */
.rpt-table td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--border-color); vertical-align: top; overflow-wrap: break-word; word-break: break-word; }
.rpt-table tr:last-child td { border-bottom: none; }




/* ── Controls (filter bar, search) ────────────────────────── */
.rpt-controls { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rpt-search { padding: 0.38rem 0.7rem; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 0.84rem; width: 200px; }
.rpt-issues-header { margin-bottom: 1rem; }
.rpt-bulk-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.85rem; background: var(--accent-light); border: 1px solid var(--accent); border-radius: 6px; margin-bottom: 0.75rem; flex-wrap: wrap; font-size: 0.84rem; }
.rpt-bulk-bar__select-all { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; font-weight: 600; }
.rpt-bulk-bar__input { padding: 0.3rem 0.6rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.82rem; width: 160px; }
.rpt-bulk-cb { cursor: pointer; margin-right: 0.2rem; display: none; }
.rpt-bulk-active .rpt-bulk-cb { display: inline-block; }
.rpt-bulk-bar__select { padding: 0.3rem 0.6rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.82rem; }
.rpt-issues-summary { font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.5rem; }
.rpt-filter-bar { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.rpt-filter-sep { color: var(--border-color); font-size: 0.85rem; margin: 0 0.1rem; }
.rpt-filter-btn--error.btn--active { background: var(--status-error); border-color: var(--status-error); color: var(--text-inverse); }
.rpt-filter-btn--warning.btn--active { background: var(--status-warning); border-color: var(--status-warning); color: var(--text-inverse); }
.rpt-filter-btn--notice.btn--active { background: var(--status-info); border-color: var(--status-info); color: var(--text-inverse); }
.rpt-filter-btn--regulatory.btn--active { background: var(--status-error); border-color: var(--status-error); color: var(--text-inverse); }
.rpt-filter-btn--template.btn--active { background: var(--accent-template); border-color: var(--accent-template); color: var(--text-inverse); }
.rpt-filter-summary { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.75rem; min-height: 1.2em; }
.rpt-group__counts { display: flex; gap: 0.25rem; align-items: center; margin-left: auto; flex-shrink: 0; }

/* ── Page sections (Tab 3) ────────────────────────────────── */
.rpt-page { background: var(--bg-primary); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 0.6rem; overflow-x: hidden; }
.rpt-page__header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.1rem; cursor: pointer; user-select: none; border-bottom: 1px solid transparent; transition: background 0.1s; }
.rpt-page__header:hover { background: var(--bg-secondary); }
.rpt-page__url { font-size: 0.85rem; font-weight: 600; color: var(--status-info); word-break: break-all; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.rpt-page__meta { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; margin-left: 0.75rem; flex-wrap: wrap; }
.rpt-page__body { padding: 0; }
.rpt-page__body--collapsed { display: none; }
.rpt-no-issues { padding: 0.85rem 1.1rem; color: var(--status-success); font-size: 0.84rem; font-weight: 500; }

/* ── Chevron indicator ────────────────────────────────────── */
.rpt-chevron { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; transform: rotate(0deg); }
.rpt-group--collapsed .rpt-chevron { transform: rotate(-90deg); }

/* ── Scan errors ──────────────────────────────────────────── */
.rpt-scan-errors { margin-top: 1.5rem; }
.rpt-scan-error { margin-bottom: 0.4rem; font-size: 0.82rem; }

/* ── Executive Summary ────────────────────────────────────── */
.exec-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.exec-summary__card {
  background: var(--accent-light);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent);
  border-radius: var(--border-radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.exec-summary__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.exec-summary__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}

.exec-summary__value--trend {
  font-size: 1.25rem;
}

.exec-summary__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Trends KPI cards ─────────────────────────────────────── */
.trends-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.trends-kpi-card {
  text-align: center;
  padding: 1.25rem 1rem;
}

.trends-kpi-card__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.trends-kpi-card__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.trends-kpi-card__sub {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

/* ── Trends chart ─────────────────────────────────────────── */
.trends-chart-container {
  position: relative;
  height: 400px;
  width: 100%;
  margin-top: 1rem;
}

.trend-delta {
  font-size: 0.8em;
  margin-left: 0.25rem;
}

.text--success { color: var(--status-success); }
.text--muted { color: var(--text-muted); }

/* Dark mode report overrides handled via --accent-template / --accent-template-light variables */

/* ── Mobile responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .exec-summary { grid-template-columns: repeat(2, 1fr); }
  .trends-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .trends-chart-container { height: 280px; }
  .rpt-tabs { overflow-x: auto; }
  .rpt-tab { padding: 0.5rem 0.85rem; font-size: 0.8rem; white-space: nowrap; }
  .rpt-summary-bar { gap: 0.35rem; }
  .rpt-juris-grid { grid-template-columns: 1fr; padding: 0.75rem; }
  .rpt-table { font-size: 0.75rem; }
  .rpt-table th, .rpt-table td { padding: 0.45rem 0.6rem; }
  .rpt-controls { gap: 0.3rem; }
  .rpt-search { width: 100%; }
  .rpt-group__header { padding: 0.45rem 0.65rem; font-size: 0.78rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MANUAL TESTING CHECKLIST
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Progress bar ─────────────────────────────────────────────────────── */
.mt-progress { margin-bottom: 1.5rem; }
.mt-progress__bar {
  height: 8px;
  background: var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.mt-progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--border-radius);
  transition: width 0.3s ease;
}
.mt-progress__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.mt-stat-sep { color: var(--border-color); }
.mt-stat--pass { color: var(--status-success); }
.mt-stat--fail { color: var(--status-error); }
.mt-stat--na { color: var(--text-secondary); }

/* ── Filter buttons ───────────────────────────────────────────────────── */
.mt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}
.mt-filter {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.mt-filter:hover { border-color: var(--accent); color: var(--accent); }
.mt-filter--active {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}

/* ── Section headings ─────────────────────────────────────────────────── */
.mt-section { margin-bottom: 2rem; }
.mt-section__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mt-section__count {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.mt-section__desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* ── Criterion card ───────────────────────────────────────────────────── */
.mt-criterion {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 0.5rem;
  background: var(--bg-primary);
}
.mt-criterion__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  cursor: default;
  flex-wrap: wrap;
  font-size: 0.88rem;
}
.mt-criterion__body {
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--border-color);
}
.mt-criterion__body--collapsed { display: none; }

/* ── Status badges ────────────────────────────────────────────────────── */
.mt-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 3.5rem;
  text-align: center;
}
.mt-badge--untested { background: var(--border-color); color: var(--text-secondary); }
.mt-badge--pass { background: var(--status-success-bg); color: var(--status-success); }
.mt-badge--fail { background: var(--status-error-bg); color: var(--status-error); }
.mt-badge--na { background: var(--status-warning-bg); color: var(--status-warning); }

/* ── Level badge ──────────────────────────────────────────────────────── */
.mt-level {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}




/* ── Toggle button ────────────────────────────────────────────────────── */
.mt-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  transition: transform 0.15s;
}
.mt-toggle:hover { color: var(--accent); }

/* ── Instructions & checklist ─────────────────────────────────────────── */
.mt-instructions {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.mt-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem 0;
}
.mt-checklist li {
  font-size: 0.83rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  position: relative;
  color: var(--text-primary);
}
.mt-checklist li::before {
  content: '\2610';
  position: absolute;
  left: 0;
  color: var(--text-secondary);
}

/* ── Action buttons ───────────────────────────────────────────────────── */
.mt-actions {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.mt-btn {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.15s;
}
.mt-btn:hover { opacity: 0.85; }
.mt-btn--pass { color: var(--status-success); border-color: var(--status-success); }
.mt-btn--pass.mt-btn--active { background: var(--status-success-bg); font-weight: 700; }
.mt-btn--fail { color: var(--status-error); border-color: var(--status-error); }
.mt-btn--fail.mt-btn--active { background: var(--status-error-bg); font-weight: 700; }
.mt-btn--na { color: var(--status-warning); border-color: var(--status-warning); }
.mt-btn--na.mt-btn--active { background: var(--status-warning-bg); font-weight: 700; }

/* ── Notes textarea ───────────────────────────────────────────────────── */
.mt-notes-wrap { margin-bottom: 0.5rem; }
.mt-notes-wrap label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}
.mt-notes {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-family: inherit;
  resize: vertical;
}
.mt-notes:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* ── Tested info ──────────────────────────────────────────────────────── */
.mt-tested-info {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ── Manual-test verdict save + change history ───────────────────────── */
.mt-save-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0;
}
.mt-save-hint {
  font-size: 0.75rem;
  color: var(--color-warning, #b45309);
  font-style: italic;
}
.mt-history {
  margin: 0.4rem 0;
  font-size: 0.8rem;
}
.mt-history__summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 600;
}
.mt-history__list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0 0 0 0.5rem;
  border-left: 2px solid var(--border-subtle, var(--border, #e5e7eb));
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mt-history__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.mt-history__change { font-weight: 600; }
.mt-history__to--pass { color: var(--color-success, #15803d); }
.mt-history__to--fail { color: var(--color-danger, #b91c1c); }
.mt-history__to--na,
.mt-history__to--untested { color: var(--text-secondary); }
.mt-history__comment { font-style: italic; color: var(--text-primary); }
.mt-history__meta { color: var(--text-secondary); font-size: 0.72rem; }

/* ── Manual-test evidence (Slice C) ──────────────────────────────────── */
.mt-evidence {
  margin: 0.5rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle, var(--border, #e5e7eb));
}
.mt-evidence__heading {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}
.mt-evidence__list {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mt-evidence__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.mt-evidence__del {
  border: none;
  background: none;
  color: var(--color-danger, #b91c1c);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.mt-evidence__upload {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mt-evidence__file {
  font-size: 0.8rem;
  max-width: 100%;
}

/* ── Step-by-step guide (manual testing) ─────────────────────────────── */
.mt-steps-detail,
.mt-examples-detail {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.mt-steps-toggle,
.mt-examples-toggle {
  cursor: pointer;
  padding: 0.45rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg-secondary);
  list-style: none;
}
.mt-steps-toggle::-webkit-details-marker,
.mt-examples-toggle::-webkit-details-marker { display: none; }
.mt-steps-toggle::before,
.mt-examples-toggle::before {
  content: '\25B6';
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.65rem;
  transition: transform 0.15s;
}
details[open] > .mt-steps-toggle::before,
details[open] > .mt-examples-toggle::before {
  transform: rotate(90deg);
}
.mt-steps {
  padding: 0.5rem 0.75rem 0.5rem 1.75rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.mt-steps li {
  padding: 0.2rem 0;
  line-height: 1.5;
}
.mt-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.75rem;
}
@media (max-width: 640px) {
  .mt-examples { grid-template-columns: 1fr; }
}
.mt-example {
  border-radius: var(--border-radius);
  overflow: hidden;
}
.mt-example--good { border: 1px solid var(--status-success); border-radius: var(--border-radius-sm); }
.mt-example--bad { border: 1px solid var(--status-error); border-radius: var(--border-radius-sm); }
.mt-example__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  background: var(--bg-secondary);
}
.mt-example--good .mt-example__label { color: var(--status-success); }
.mt-example--bad .mt-example__label { color: var(--status-error); }
.mt-example__code {
  margin: 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}

/* ── Fix suggestion hints (report detail) ────────────────────────────── */
.rpt-fix-hint {
  margin-top: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
  box-sizing: border-box;
  min-width: 0;
}
.rpt-fix-hint__toggle {
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rpt-fix-hint__toggle::-webkit-details-marker { display: none; }
.rpt-fix-hint__toggle::before {
  content: '\1F527';
  font-size: 0.85rem;
}
.rpt-fix-hint__desc {
  padding: 0.5rem 0.7rem 0.25rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rpt-fix-hint__code {
  display: block;
  margin: var(--space-sm);
  padding: var(--space-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.rpt-fix-hint__code code {
  font-family: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}
.rpt-fix-effort {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: var(--space-xs);
}
.rpt-fix-effort--low {
  background: var(--status-success-bg);
  color: var(--status-success);
}
.rpt-fix-effort--medium {
  background: var(--status-warning-bg);
  color: var(--status-warning);
}
.rpt-fix-effort--high {
  background: var(--status-error-bg);
  color: var(--status-error);
}

/* ── AI Fix Hint — Phase 1 additions ──────────────────────────────────────── */
.rpt-fix-hint__source {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px var(--space-xs);
  border-radius: 9999px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.rpt-fix-hint__source--ai {
  background: var(--accent-light, #f0fdf4);
  color: var(--accent, #15803d);
}
.rpt-fix-hint__source--pattern {
  background: var(--bg-tertiary, #f8f9fa);
  color: var(--text-muted, #64748b);
}
.rpt-fix-hint__loading {
  padding: var(--space-sm) var(--space-md);
}
.rpt-fix-hint__loading-wrap {
  padding: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rpt-fix-hint__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
}

/* ── Loading skeleton ────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--border-radius);
}
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── AI Summary Panel — Phase 2 additions ────────────────────────────── */
.rpt-ai-summary {
  padding: var(--space-md);
}
.rpt-ai-summary__section {
  margin-bottom: var(--space-lg);
}
.rpt-ai-summary__heading {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-primary, inherit);
}
.rpt-ai-summary__body {
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed, 1.6);
  margin: 0;
}
.rpt-ai-summary__list {
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed, 1.6);
  padding-left: var(--space-lg);
  margin: 0;
}
.rpt-ai-summary__list li {
  margin-bottom: var(--space-xs);
}
.rpt-ai-summary__footer {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #64748b);
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color, #e5e7eb);
}
.rpt-ai-summary__loading {
  padding: var(--space-md);
}
.rpt-ai-summary--unavailable {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state__icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
}
.empty-state__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
}
.empty-state__desc {
  font-size: 0.85rem;
  max-width: 400px;
  margin: 0 auto 1rem;
}

/* ── Micro-animations ────────────────────────────────────────────────── */
.btn { transition: all var(--transition-fast); }
.btn:active { transform: scale(0.97); }
.card { transition: box-shadow var(--transition-fast); }
.card:hover { box-shadow: var(--shadow-md); }
.rpt-group { transition: box-shadow var(--transition-fast); }
.rpt-group:hover { box-shadow: var(--shadow-sm); }
.sidebar__item { transition: all var(--transition-fast); }
.stat-card { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ══════════════════════════════════════════════════════════════════════════
   UTILITY & COMPONENT ADDITIONS (Task 13 — Core Pages Redesign)
   ══════════════════════════════════════════════════════════════════════════ */

/* Layout helpers */
.page-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.page-header-row .section-title { margin: 0; }

.page-intro {
  max-width: 60ch;
}

/* Form grid for narrower constrained forms */
.form-grid {
  display: grid;
  gap: var(--space-sm);
}
.form-grid--narrow {
  max-width: 600px;
}

/* Narrow number input */
.input--narrow {
  max-width: 120px;
}

/* Card variants */
.card--alt {
  background: var(--bg-secondary);
}
.card__subtitle {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}
.card__header-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.card__header-row .card__title { margin: 0; }

/* Btn ghost danger */
.btn--danger-ghost {
  color: var(--status-error);
}
.btn--danger-ghost:hover {
  background: var(--status-error-bg);
  border-color: var(--status-error);
}

/* List utilities */
.list--padded {
  margin: 0;
  padding-left: 1.5rem;
}
.list--steps {
  padding-left: 1.5rem;
  line-height: 1.8;
}

/* Code block */
.code-block {
  background: var(--bg-tertiary);
  padding: var(--space-md);
  border-radius: var(--border-radius);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
}
.code-block--sm {
  font-size: 0.8rem;
  padding: var(--space-sm);
}

/* Trends chart tall variant */
.trends-chart-container--tall {
  height: 280px;
}

/* Fix proposals */
.rpt-fix-proposal {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}
.fix-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.fix-description {
  margin: 0 0 var(--space-sm);
  font-weight: 500;
}
.fix-details {
  margin-bottom: var(--space-sm);
}
.fix-details__summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.875rem;
}
.fix-details__body {
  padding: var(--space-sm) 0;
}
.fix-details__item {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
}
.fix-code-block {
  margin-top: var(--space-sm);
}
.fix-code-block__label {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.fix-code-block__pre {
  position: relative;
}
.fix-code-block__copy {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.7rem;
}

/* ── Brand-related badges and filter bar ─────────────────────────────── */
.badge--brand {
  background: var(--status-warning_bg, #fef3c7);
  color: var(--status-warning, #92400e);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
}

.badge__dot--brand {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-warning, #f59e0b);
}

.issue__brand-detail {
  font-size: 0.75rem;
  color: var(--status-warning, #d97706);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-secondary, #f9fafb);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: var(--space-md);
}

.filter-bar__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.kpi-card--brand {
  border-color: var(--status-warning, #f59e0b);
  background: var(--status-warning_bg, #fffbeb);
}

.kpi-card__secondary {
  font-size: 0.8125rem;
  color: var(--status-success, #059669);
  margin-top: var(--space-xs);
}

/* ── Brand Discovery ─────────────────────────────────────────────── */
.brd-discover {
  margin-top: var(--space-lg);
}

.brd-discover__heading {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}
.brd-discover__desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.brd-discover__form {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
  flex-wrap: wrap;
  max-width: 600px;
}
.brd-discover__form .form-group {
  margin-bottom: 0;
}
.brd-discover__form button[type="submit"] {
  flex-shrink: 0;
}

.brd-discover__input-group {
  flex: 1;
  min-width: 240px;
}

/* ── Brand Score Widget (Phase 21, BUI-02) ────────────────────── */
.brand-score-widget-section {
  margin-bottom: var(--space-lg);
}

.brand-score-widget-row {
  display: flex;
  gap: var(--space-md);
}

.brand-score-widget {
  min-width: 0;
  max-width: 280px;
}

.brand-score-widget__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand-score-widget__sparkline svg {
  max-height: 40px;
}

.brand-score-widget--empty {
  opacity: 0.7;
}

/* ── LLM admin + brand discovery — mobile responsive ─────────────────── */
@media (max-width: 640px) {
  .tabs { flex-wrap: wrap; gap: 0; }
  .tab { padding: 0.5rem 0.75rem; font-size: var(--font-size-xs); white-space: nowrap; }
  .fallback-chain li {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .fallback-chain li .form-group { width: 100%; }
  .tab-content .cards { grid-template-columns: 1fr; }
  .tab-content table { font-size: var(--font-size-xs); }
  .tab-content .form-grid { grid-template-columns: 1fr; }
  .tab-content .btn { width: 100%; }
  .brd-discover__form { flex-direction: column; }
  .brd-discover__input-group { min-width: unset; width: 100%; }
  .alert code { word-break: break-all; }
  .brand-score-widget-row { flex-direction: column; }
  .brand-score-widget { max-width: 100%; }
}

/* ---- Agent Admin (Phase 32) ---- */
/* D-13 locked-fence border colors for the agent-system prompt editor
   (rbac=info/blue, confirmation=warning/amber, honesty=success/green).
   Each variant lays atop the existing .card--muted base. */
.card--locked-rbac { border-color: var(--status-info); }
.card--locked-confirmation { border-color: var(--status-warning); }
.card--locked-honesty { border-color: var(--status-success); }
#agent-conv-non-tool-alert[hidden] { display: none; }
/* Phase 32.1-05: wrap badge rows + long card copy so the agent-conversation
   row on /admin/llm?tab=capabilities and the agent-system locked-prompt
   panels don't overflow on narrow viewports. */
.capabilities-list .badge-row,
.capabilities-list .capability-meta,
.prompts-list .prompt-segment-content {
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.card--locked-rbac,
.card--locked-confirmation,
.card--locked-honesty {
  overflow-wrap: anywhere;
}
/* Phase 32.1-06: agent markdown rendering — tables, code blocks, headings
   inside the chat drawer. Selectors target both marked's default <table>
   output and the fallback renderer's .agent-md-table class. Override the
   mobile data-table card layout (line 710) so markdown tables stay tabular.
   Wrap in a horizontal scroller so wide tables don't crush columns. */
.agent-msg__body table,
.agent-md-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: var(--space-xs, 0.5rem) 0;
  font-size: 0.9em;
  white-space: nowrap;
}
.agent-msg__body table thead {
  display: table-header-group !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  margin: 0 !important;
}
.agent-msg__body table tbody { display: table-row-group !important; }
.agent-msg__body table tr {
  display: table-row !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.agent-msg__body table th,
.agent-msg__body table td,
.agent-md-table th,
.agent-md-table td {
  display: table-cell;
  border: 1px solid var(--border-muted, #e5e7eb);
  padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem);
  text-align: left;
  overflow-wrap: anywhere;
  background: transparent;
  box-shadow: none;
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  border-radius: 0;
  justify-content: flex-start;
  align-items: baseline;
  font-size: inherit;
}
.agent-msg__body table th,
.agent-md-table th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
}
.agent-msg__body pre {
  background: var(--surface-muted, #f3f4f6);
  padding: var(--space-xs, 0.5rem);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.9em;
}
.agent-msg__body code {
  background: var(--surface-muted, #f3f4f6);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.9em;
}
.agent-msg__body pre code {
  background: transparent;
  padding: 0;
}
.agent-msg__body h1,
.agent-msg__body h2,
.agent-msg__body h3,
.agent-msg__body h4,
.agent-msg__body h5,
.agent-msg__body h6 {
  margin: var(--space-sm, 0.75rem) 0 var(--space-xs, 0.5rem);
  font-weight: 600;
  line-height: 1.25;
}
.agent-msg__body h1 { font-size: 1.25em; }
.agent-msg__body h2 { font-size: 1.15em; }
.agent-msg__body h3 { font-size: 1.05em; }
.agent-msg__body h4,
.agent-msg__body h5,
.agent-msg__body h6 { font-size: 1em; }
.agent-msg__body ul,
.agent-msg__body ol {
  margin: var(--space-xs, 0.5rem) 0;
  padding-left: var(--space-lg, 1.5rem);
}
.agent-msg__body p { margin: var(--space-xs, 0.5rem) 0; }
.agent-msg__body p:first-child { margin-top: 0; }
.agent-msg__body p:last-child { margin-bottom: 0; }
.agent-msg__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--space-xs, 0.5rem) 0;
  border-radius: 4px;
}
.agent-msg__body a {
  color: var(--link-color, #2563eb);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* ---- Agent Drawer (Phase 32) ---- */
/* Surface 1 of the Phase 32 chat UI. All values reuse existing design-token
   custom properties — no new --var declarations. Mobile < 900px → drawer
   slides over full width; desktop ≥ 900px → 400px right-anchored panel.
   Reduced-motion honoured by the global rule at line 149. */

.agent-launch {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  width: 56px;
  height: 56px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}
.agent-launch:hover { background: var(--accent-hover); box-shadow: var(--shadow-lg); }
.agent-launch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.agent-launch svg { color: #fff; }

.agent-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 105;
}
.agent-backdrop[hidden] { display: none; }

.agent-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 100vw;
  height: 100dvh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 110;
}
.agent-drawer--open { transform: translateX(0); }
.agent-drawer[hidden] { display: none; }

.agent-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  row-gap: var(--space-xs);
}
.agent-drawer__title { margin: 0; font-size: 1.125rem; color: var(--text-primary); }
.agent-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  min-width: 44px;
  min-height: 44px;
}
.agent-drawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.agent-drawer__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  /* Bug #4 (agent-chat-ui-cluster): prevent scroll bleed into the main page
     when the user reaches the top/bottom of the chat list. `contain` stops
     scroll-chaining to the document; `auto` for non-supporting browsers. */
  overscroll-behavior: contain;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.agent-drawer__stream-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--space-md);
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.agent-drawer__stream-status[hidden] { display: none; }
.agent-drawer__stream-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: agent-pulse 1.2s ease-in-out infinite;
}
@keyframes agent-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-drawer__stream-indicator { animation: none; }
  .agent-drawer { transition: none; }
}

.agent-drawer__input {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: var(--space-md);
  border-top: 1px solid var(--border-color);
}
.agent-drawer__input textarea {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 160px;
  resize: none;
  overflow-y: auto;
}

/* Phase 83 multimodal — staged image attachments tray (sits full-width above
   the composer row) + per-message thumbnails. */
.agent-drawer__attachments {
  flex: 1 0 100%;
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.agent-attachment {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 56px;
}
.agent-attachment__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--border-radius-md, 8px);
  border: 1px solid var(--border-color);
}
.agent-attachment__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.agent-msg__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.agent-msg__image {
  max-width: 160px;
  max-height: 160px;
  border-radius: var(--border-radius-md, 8px);
  border: 1px solid var(--border-color);
}

/* Phase 37 — copy/share success/error glyph flip. */
.agent-msg__action--ok { color: var(--status-success); }
.agent-msg__action--err { color: var(--status-error); }

/* Share toast: reports clipboard outcome for the share action. */
.agent-drawer__toast {
  position: absolute;
  bottom: calc(var(--space-md) + 60px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--border-radius-md, 8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: var(--font-size-sm);
  z-index: 1000;
  pointer-events: none;
  animation: agent-toast-fade 2.5s ease forwards;
  max-width: 80%;
  text-align: center;
}
@keyframes agent-toast-fade {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-drawer__toast { animation: none; }
}

/* Share URL inline chip: rendered next to the share button after success. */
.agent-msg__share-link {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 2px var(--space-xs);
  font-size: var(--font-size-xs, 12px);
  color: var(--text-link, var(--status-info, #0066cc));
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-sm);
  text-decoration: underline;
  word-break: break-all;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.chat-btn--icon {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.chat-btn--icon[hidden] { display: none; }

.agent-msg {
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  word-wrap: break-word;
}
.agent-msg__role {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.agent-msg__body { color: var(--text-primary); white-space: pre-wrap; }
.agent-msg--user {
  background: var(--bg-primary);
  border: 1px solid var(--id-accent);
}
.agent-msg--assistant { background: var(--bg-secondary); }
.agent-msg--tool { background: var(--bg-tertiary); }
.agent-msg--tool[data-pending="true"] { border: 1px solid var(--status-warning); }

/* ---- Phase 37 Plan 02 — per-message action row + stopped chip + edit form ---- */
/* Hover-revealed on desktop, always-visible on touch. Uses only existing
   tokens (--space-*, --text-*, --bg-*, --border-color, --border-radius-sm,
   --focus-outline, --transition-base, --font-size-xs). Token substitutions
   from plan: --space-1→--space-xs, --space-2→--space-sm,
   --bg-hover→--bg-tertiary, --radius-sm→--border-radius-sm,
   --border-default→--border-color. Documented in 37-02-SUMMARY.md. */

/* Establish positioning context for the desktop floating action row. */
.agent-msg { position: relative; }

/* Defensive: superseded rows should never reach the DOM (server filter
   in Plan 01), but if one slips through, hide it. */
.agent-msg--superseded { display: none; }

/* Stopped marker — partial response is the final state of that turn,
   so no italic styling per CONTEXT decision. */
.agent-msg--stopped .agent-msg__body { font-style: normal; }

.agent-msg__actions {
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  margin-top: var(--space-sm);
}

.agent-msg__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.agent-msg__action:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.agent-msg__action:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* Stopped chip — visual reference is 36-04 .agent-drawer__tool-chip. */
.agent-msg__stopped-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.agent-msg__stopped-chip svg { flex-shrink: 0; }

/* Inline edit form (Plan 04 toggles its visibility). */
.agent-msg__edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
}
.agent-msg__edit-textarea {
  width: 100%;
  min-height: calc(var(--space-sm) * 6);
  font: inherit;
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  resize: vertical;
}
.agent-msg__edit-textarea:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
.agent-msg__edit-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* Desktop: action row floats inside the bubble, fades in on hover/focus. */
@media (hover: hover) {
  .agent-msg__actions {
    position: absolute;
    bottom: var(--space-xs);
    right: var(--space-sm);
    margin-top: 0;
    opacity: 0;
    transition: opacity var(--transition-base);
  }
  .agent-msg:hover .agent-msg__actions,
  .agent-msg:focus-within .agent-msg__actions,
  .agent-msg__actions:focus-within { opacity: 1; }
}

/* Touch: action row sits below the bubble body, always visible. */
@media (hover: none) {
  .agent-msg__actions {
    position: static;
    opacity: 1;
    margin-top: var(--space-sm);
  }
}

/* Reduced-motion: no opacity transition. */
@media (prefers-reduced-motion: reduce) {
  .agent-msg__action,
  .agent-msg__actions { transition: none; }
}

/* Mobile reflow — larger touch targets matches existing 480px-class
   breakpoints elsewhere in the file. */
@media (max-width: 480px) {
  .agent-msg__action { min-width: 36px; min-height: 36px; width: 36px; height: 36px; }
}

@media (max-width: 899px) {
  .agent-drawer { width: 100vw; }
  body:has(.agent-drawer--open) .agent-launch { display: none; }
}

/* ---- Agent confirmation dialog (Phase 32 Plan 07 — Surface 2) ---- */
/* Destructive-action gate. Uses native <dialog>.showModal() — browser handles
   focus trap, Esc, modal backdrop. Summary card uses existing status-error
   tokens so the warning affordance is consistent with other alerts. */
.agent-confirm__summary {
  border: 1px solid var(--status-error);
  background: var(--status-error-bg);
  padding: var(--space-md);
  margin: 0.75rem 0;
  border-radius: var(--border-radius-sm);
}
.agent-confirm__raw summary { cursor: pointer; font-weight: 600; }
.agent-confirm__raw pre {
  margin-top: 0.5rem;
  max-height: 200px;
  overflow: auto;
  font-size: 0.8125rem;
}
#agent-confirm-dialog .modal__footer { gap: 0.5rem; justify-content: flex-end; }

/* Phase 35 — history panel */
.agent-drawer__history {
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 1;
}
.agent-drawer__history[aria-hidden="false"],
.agent-drawer--history-open .agent-drawer__history { transform: translateX(0); }
.agent-drawer__history[hidden] { display: none; }

.agent-drawer__history-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}
.agent-drawer__history-head h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0;
  color: var(--text-primary);
}

.agent-drawer__history-search {
  position: relative;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}
.agent-drawer__history-search input[type="search"] {
  width: 100%;
  font-size: var(--font-size-sm);
  line-height: var(--leading-normal);
  padding: var(--space-sm) var(--space-md);
  padding-right: calc(var(--space-md) * 2);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 4px;
}
.agent-drawer__history-search input[type="search"]:hover { border-color: var(--border-color-strong); }
.agent-drawer__history-search input[type="search"]:focus-visible { outline: var(--focus-outline); }
.agent-drawer__history-search-clear {
  position: absolute;
  right: calc(var(--space-md) + var(--space-sm));
  top: 50%;
  transform: translateY(-50%);
}

.agent-drawer__history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}
.agent-drawer__history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--space-sm);
  row-gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--bg-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
.agent-drawer__history-item:hover { background: var(--bg-secondary); }
.agent-drawer__history-item:focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.agent-drawer__history-item-title {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agent-drawer__history-item-meta {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.agent-drawer__history-item-snippet {
  grid-column: 1 / span 2;
  grid-row: 2;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.agent-drawer__history-item-snippet mark {
  background: var(--accent-light);
  color: var(--text-primary);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}
.agent-drawer__history-item-menu {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-muted);
  align-self: center;
}
.agent-drawer__history-item-menu[aria-expanded="true"] { background: var(--bg-tertiary); }
.agent-drawer__history-item-menu:focus-visible { outline: var(--focus-outline); }

/* Phase 38 Plan 04 — Org-name chip on history cards (admin viewers only). */
.agent-drawer__history-item-org-chip {
  grid-column: 1;
  grid-row: 3;
  display: inline-block;
  margin-top: var(--space-xs, 4px);
  padding: 2px var(--space-xs, 6px);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs, 11px);
  border-radius: var(--border-radius-sm, 4px);
  max-width: max-content;
}

.agent-drawer__history-menu {
  position: absolute;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: var(--space-sm) 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 2;
  transition: opacity var(--transition-fast);
}
.agent-drawer__history-menu[hidden] { display: none; }
.agent-drawer__history-menu [role="menuitem"] {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
}
.agent-drawer__history-menu [role="menuitem"]:hover,
.agent-drawer__history-menu [role="menuitem"]:focus-visible { background: var(--bg-tertiary); }
.agent-drawer__history-menu [role="menuitem"][data-action="deleteConversation"] { color: var(--status-error); }
.agent-drawer__history-menu [role="menuitem"][data-action="deleteConversation"]:hover { background: var(--status-error-bg); }

.agent-drawer__history-rename {
  padding: var(--space-md);
  background: var(--bg-secondary);
}
.agent-drawer__history-rename input {
  width: 100%;
  font-size: var(--font-size-sm);
  padding: var(--space-sm);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
.agent-drawer__history-rename input[aria-invalid="true"] { border-color: var(--status-error); }

.agent-drawer__history-confirm {
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--status-error);
  border-radius: var(--border-radius-sm);
}

.agent-drawer__history-sentinel { height: 1px; }

.agent-drawer__history-empty {
  padding: var(--space-lg);
  text-align: center;
  margin-top: var(--space-2xl);
  list-style: none;
}
.agent-drawer__history-empty h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}
.agent-drawer__history-empty p {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

.agent-drawer__history-skeleton[hidden] { display: none; }
.agent-drawer__history-skeleton-row {
  height: 44px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  margin: var(--space-sm) var(--space-md);
  animation: agent-history-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes agent-history-skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.agent-drawer__history-error {
  padding: var(--space-lg);
  text-align: center;
}
.agent-drawer__history-error[hidden] { display: none; }
.agent-drawer__history-error h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .agent-drawer__history { transition: none; }
  .agent-drawer__history-skeleton-row { animation: none; }
  .agent-drawer__history-menu { transition: none; }
}

/* Phase 36 — agent tool chip strip (ATOOL-01 / ATOOL-03).
   BEM block .agent-drawer__tool-chips. Tokens-only — no new custom properties. */
.agent-drawer__tool-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  flex: 0 0 auto;
}
.agent-drawer__tool-chips:empty { display: none; border-top: 0; }
.agent-drawer__tool-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}
.agent-drawer__tool-chip-icon {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
}
.agent-drawer__tool-chip--running .agent-drawer__tool-chip-icon {
  animation: agent-tool-chip-spin 0.8s linear infinite;
}
.agent-drawer__tool-chip--success { color: var(--status-success); }
.agent-drawer__tool-chip--success .agent-drawer__tool-chip-icon {
  border-color: var(--status-success);
  border-top-color: var(--status-success);
}
.agent-drawer__tool-chip--error   { color: var(--status-error); }
.agent-drawer__tool-chip--error .agent-drawer__tool-chip-icon {
  border-color: var(--status-error);
  border-top-color: var(--status-error);
}
.agent-drawer__tool-chip--cap {
  background: var(--status-error-bg);
  color: var(--status-error);
  width: 100%;
  justify-content: center;
}
@keyframes agent-tool-chip-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-drawer__tool-chip--running .agent-drawer__tool-chip-icon { animation: none; }
}

/* Phase 36 — admin audit rationale cell */
.audit-rationale__toggle {
  display: block;
  text-align: left;
  white-space: normal;
  max-width: 32ch;
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  border-radius: var(--border-radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.audit-rationale__toggle:hover,
.audit-rationale__toggle:focus-visible {
  background: var(--bg-secondary);
  border-color: var(--bg-tertiary);
  outline: none;
}
.audit-rationale__toggle[aria-expanded="true"] {
  background: var(--bg-tertiary);
}
.audit-rationale__preview {
  color: inherit;
  font-size: var(--font-size-sm);
}
/* When expanded, hide the truncated preview so the full panel below isn't a duplicate.
   The button stays in place (collapsed state's accessible label kicks in via JS) — only
   the body of the button is empty so the user clicks the same target to collapse. */
.audit-rationale__toggle[aria-expanded="true"] .audit-rationale__preview {
  display: none;
}
.audit-rationale__toggle[aria-expanded="true"]::before {
  content: "▾ ";
}
.audit-rationale__toggle[aria-expanded="false"]::before {
  content: "▸ ";
}
.audit-rationale__full {
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--border-radius-sm);
  margin-top: var(--space-xs);
  max-width: 60ch;
  transition: opacity 0.15s ease;
}
.audit-rationale__text {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.audit-rationale__meta {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--font-size-xs);
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .audit-rationale__toggle,
  .audit-rationale__full { transition: none; }
}

/* ----------------------------------------------------------------------------
 * Phase 37 Plan 05 Task 2 — Share view polish.
 *
 * The share view is a standalone read-only page (no drawer, no composer).
 * The .agent-share BEM block constrains the thread to a comfortable reading
 * width on desktop and pads down gracefully on mobile (375px). Markdown
 * code blocks already get overflow-x: auto from the .agent-msg__body pre
 * rules above; this block adds the page-level container chrome only.
 * ------------------------------------------------------------------------- */
.agent-share {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-md);
  background: var(--bg-primary);
  color: var(--text-primary, #111827);
}
.agent-share__head {
  margin-bottom: var(--space-lg);
}
.agent-share__head h1 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-xs);
  line-height: 1.25;
}
.agent-share__head .form-hint {
  /* form-hint already routes through --text-secondary in the existing
   * design system — this rule is a no-op refinement that documents the
   * contrast contract: WCAG 2.2 AA against --bg-primary. */
  color: var(--text-secondary, #4b5563);
  margin: 0;
}
.agent-share__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (max-width: 480px) {
  .agent-share {
    padding: var(--space-md) var(--space-sm);
  }
  .agent-share__head {
    margin-bottom: var(--space-md);
  }
}

/* Phase 38 Plan 02 — Org switcher in drawer header (AORG-01, AORG-04 UI side). */
.agent-drawer__org-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 var(--space-sm);
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.agent-drawer__org-switcher-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.agent-drawer__org-switcher-select {
  font-size: var(--font-size-sm);
  padding: 4px var(--space-xs);
  flex: 1 1 auto;
  min-height: 36px;
  min-width: 0;
  max-width: 100%;
}
/* Mobile: switcher occupies its own full-width row below the title */
@media (max-width: 600px) {
  .agent-drawer__org-switcher {
    order: 99;
    flex-basis: 100%;
    margin: 0;
  }
  .agent-drawer__org-switcher-select {
    min-height: 44px;
    font-size: 1rem;
  }
}
/* Org-switch toast modifier — anchored to the switcher (not the drawer footer). */
.agent-drawer__toast--org {
  position: absolute;
  top: 100%;
  left: 0;
  bottom: auto;
  transform: translateY(-4px);
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color, var(--bg-tertiary));
  border-radius: var(--border-radius-md, 4px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  animation: none;
  max-width: none;
  text-align: left;
}
.agent-drawer__toast--org.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.agent-drawer__toast--org.is-error {
  color: var(--status-error);
  border-color: var(--status-error);
}

/* ─── Phase 43 Plan 03 — agent plan bubble + step indicator ─────────────
 * Inline plan bubble rendered when an SSE `plan` frame arrives. Reuses
 * existing .agent-msg geometry; adds the ordered step list, indicator
 * (spinner / checkmark), label / rationale, and Cancel button. Reuses the
 * agent-tool-chip-spin keyframes so the spinner matches the chip strip.
 */
.message--plan { border: 1px solid var(--id-accent); border-radius: var(--border-radius-sm); }
.message--plan--cancelled,
.message--plan--aborted {
  opacity: 0.65;
  border-color: var(--status-warning);
}
.message--plan--cancelled .agent-plan__step--pending,
.message--plan--aborted .agent-plan__step--pending,
.message--plan--cancelled .agent-plan__step--active,
.message--plan--aborted .agent-plan__step--active {
  text-decoration: line-through;
  color: var(--text-muted);
}
.message--plan--cancelled::after,
.message--plan--aborted::after {
  content: 'Cancelled';
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 2px 8px;
  background: var(--status-warning-bg);
  color: var(--status-warning);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.agent-plan {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.agent-plan__step {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: baseline;
  column-gap: 0.5rem;
  padding: 0.25rem 0;
}
.agent-plan__indicator {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
}
.agent-plan__step--pending .agent-plan__indicator {
  border: 2px solid var(--text-muted);
  background: transparent;
}
.agent-plan__step--active .agent-plan__indicator {
  border: 2px solid var(--accent);
  border-top-color: transparent;
  animation: agent-tool-chip-spin 0.8s linear infinite;
}
.agent-plan__step--done .agent-plan__indicator {
  border: 2px solid transparent;
  position: relative;
  width: auto;
  height: auto;
}
.agent-plan__step--done .agent-plan__indicator::before {
  content: '\2713';
  color: var(--status-success);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.agent-plan__label {
  grid-column: 2;
  font-weight: 600;
  color: var(--text-primary, var(--text));
}
.agent-plan__rationale {
  grid-column: 2;
  display: block;
  color: var(--text-muted);
  font-size: 0.875em;
  margin-top: 0.125rem;
}
.agent-plan__cancel {
  margin-top: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .agent-plan__step--active .agent-plan__indicator { animation: none; }
}

/* ── Phase 45-01 — structured tool-result cards ─────────────────────── */
.tool-result-card {
  margin: var(--space-sm) 0;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
}
.tool-result-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.tool-result-card__site {
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}
.tool-result-card__status {
  text-transform: uppercase;
  font-size: 0.75rem;
}
.tool-result-card--scan .tool-result-card__score {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  margin: var(--space-xs) 0 var(--space-sm);
}
.tool-result-card__issues {
  list-style: disc;
  padding-left: var(--space-lg);
  margin: 0 0 var(--space-sm);
  color: var(--text-secondary);
}
.tool-result-card__link {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--accent);
  text-decoration: underline;
}
.tool-result-card__more {
  margin-top: var(--space-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.tool-result-card__raw {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
}
.tool-result-card__raw summary {
  cursor: pointer;
  color: var(--text-muted);
}
.tool-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.tool-result-table th,
.tool-result-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border-muted);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}
.tool-result-table th {
  background: var(--surface-muted);
  font-weight: 600;
  color: var(--text-secondary);
}
.tool-result-card--proposals .tool-result-proposal {
  padding: var(--space-sm);
  border: 1px solid var(--border-muted);
  border-radius: var(--border-radius-sm);
  margin-bottom: var(--space-sm);
  background: var(--bg-primary);
}
.tool-result-proposal__header {
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.tool-result-proposal__date {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
}
.tool-result-proposal__added,
.tool-result-proposal__removed,
.tool-result-proposal__modified {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-muted);
  border-radius: var(--border-radius-sm);
}
.tool-result-proposal__added { border-color: var(--status-success); }
.tool-result-proposal__removed { border-color: var(--status-error); }
.tool-result-proposal__modified { border-color: var(--status-warning); }
.tool-result-proposal__added strong,
.tool-result-proposal__removed strong,
.tool-result-proposal__modified strong {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}
.tool-result-proposal__added ul,
.tool-result-proposal__removed ul,
.tool-result-proposal__modified ul {
  margin: 0;
  padding-left: var(--space-md);
}
@media (max-width: 480px) {
  .tool-result-card { padding: var(--space-sm); }
  .tool-result-card--scan .tool-result-card__score { font-size: 1.4rem; }
  .tool-result-table th,
  .tool-result-table td { padding: var(--space-xs); font-size: 0.85rem; }
}

/* ============================================================
   Share panel — report-detail page (Phase 64).
   Inline disclosure, no modal (per DESIGN.md component-modal rule).
   ============================================================ */
.share-panel {
  margin: var(--space-5) 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 6px);
}
.share-panel[hidden] { display: none; }

.share-panel__head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.share-panel__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.012em;
}
.share-panel__lede {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.share-panel__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
}
.share-panel__row + .share-panel__row {
  border-top: 1px solid var(--border-subtle);
}

.share-panel__row-title {
  margin: 0 0 2px;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary);
}
.share-panel__row-desc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  max-width: 56ch;
}

/* Toggle switch (CSS only, no JS layout coupling). */
.share-panel__switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
.share-panel__switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.share-panel__switch-track {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg-muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.share-panel__switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-on-accent);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out);
}
.share-panel__switch input:checked + .share-panel__switch-track {
  background: var(--id-accent);
  border-color: var(--id-accent);
}
.share-panel__switch input:checked + .share-panel__switch-track::after {
  transform: translateX(18px);
}
.share-panel__switch input:focus-visible + .share-panel__switch-track {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.share-panel__snippet {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: var(--bg-muted);
  border-radius: var(--radius-sm, 4px);
}
.share-panel__snippet[hidden] { display: none; }
.share-panel__snippet-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.share-panel__snippet-code {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-2);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  resize: vertical;
  min-height: 60px;
}

.share-panel__status {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  min-height: 1.4em;
}
.share-panel__status--error { color: var(--status-error); }

/* admin/badges — Phase 64.x polish */
.admin-badges__pill {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  vertical-align: middle;
}
.admin-badges__hint {
  font-weight: 400;
  font-size: var(--font-size-sm);
  margin-left: var(--space-2);
}
.admin-badges__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding-top: 1.5rem; /* line up with neighbouring form-group's input baseline */
  user-select: none;
}
.admin-badges__check input[type="checkbox"] {
  margin: 0;
}

/* Phase 65 — identity & access pivot tabs (rendered above .page-body on the
   six admin pages whose individual sidebar entries were consolidated). */
.ia-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin: 0 var(--space-xl) var(--space-md);
  padding: 0 0 var(--space-1, 4px);
  border-bottom: 1px solid var(--border-subtle, var(--border));
}
.ia-tabs__tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--border-radius-sm, 4px) var(--border-radius-sm, 4px) 0 0;
}
.ia-tabs__tab:hover,
.ia-tabs__tab:focus-visible {
  color: var(--text-primary);
  background-color: var(--bg-muted);
}
.ia-tabs__tab.is-active {
  color: var(--text-primary);
  border-bottom-color: var(--id-accent, var(--accent));
  font-weight: 500;
}

/* Phase 65 — sidebar "More" disclosure. Wraps the admin-chrome cluster
   collapsed behind a <details> so the visible sidebar stays at 13 items. */
.sidebar__more {
  margin-top: var(--space-md);
}
.sidebar__more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.sidebar__more > summary::-webkit-details-marker {
  display: none;
}
.sidebar__section-label--summary {
  margin-top: 0;
}
.sidebar__more-chevron {
  width: 14px;
  height: 14px;
  margin-right: var(--space-md);
  opacity: 0.6;
  transition: transform var(--duration-fast, 120ms) var(--ease-out, ease);
}
.sidebar__more[open] > summary .sidebar__more-chevron {
  transform: rotate(180deg);
}

/* Phase 70 — hero-metric purge: typographic verdict line that
   replaces 4-up stat-card grids on brand-overview (and pattern
   target for other surfaces). Reads as a sentence; numbers stay
   scannable via <strong>. */
.brand-overview__verdict {
  font-size: var(--font-size-md, 1rem);
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}
.brand-overview__verdict strong {
  font-weight: 600;
}
.text--positive { color: var(--status-success-fg, oklch(0.5 0.15 145)); }
.text--negative { color: var(--status-error-fg,   oklch(0.5 0.18 25)); }

/* rpt-exposure-* — Phase 81: exposure card left-border accent by band.
   No new colours; reuses existing status tokens. */
.rpt-exposure-card { border-left: 4px solid var(--border-subtle); }
.rpt-exposure-card--lower    { border-left-color: var(--status-info); }
.rpt-exposure-card--moderate { border-left-color: var(--status-warning); }
.rpt-exposure-card--elevated { border-left-color: var(--status-error); }
.rpt-exposure-card--high     { border-left-color: var(--status-error); filter: brightness(0.85); }

/* rpt-digest-* — Phase 82: digest view cards. */
.rpt-digest-card {
  margin-bottom: var(--space-lg);
}
.rpt-digest-card--changed .card__header { border-left: 4px solid var(--status-info); }
.rpt-digest-card--risk .card__header    { border-left: 4px solid var(--status-warning); }
.rpt-digest-card--footer                { background: var(--bg-surface); }

/* Delta text utilities (complement existing .text--success at line 4239) */
.text--error  { color: var(--status-error); }
.text--muted  { color: var(--text-muted); }