/* =========================================================
   HIPAA Sherpa – Design System
   Modern healthcare SaaS aesthetic
   ========================================================= */

/* ---- CSS Custom Properties ---------------------------------
   MOVED to assets/css/tokens.css (loaded before this file).
   All color/spacing/radius/shadow/type values live there. */

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
/* Content links get the brand color; button-styled links (.btn) keep their
   own component text color in both themes (see the dark override below). */
a:not(.btn) { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:not(.btn):hover { color: var(--primary-dark); }
a.btn { text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }

/* ---- Typography -------------------------------------------- */
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p  { color: var(--gray-600); line-height: 1.75; }

/* ---- Layout ------------------------------------------------ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---- Buttons ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  font-weight: 500;
  font-size: .875rem;
  border-radius: var(--radius-md);
  padding: .5rem 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.25;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-sm  { padding: .3125rem .75rem; font-size: .8125rem; }
.btn-lg  { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-full { width: 100%; }

/* 2026: subtle top-light gradient + brand-tinted ambient glow (see
   docs/style-guide-2026.html §Buttons). Gradient stops derive from --primary
   via color-mix so the treatment is theme-proof. */
.btn-primary {
  background: var(--primary);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 8px 22px -10px var(--primary);
}
.btn-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-hover) 82%, var(--color-white)), var(--primary-hover));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.26) inset, 0 10px 26px -8px var(--primary);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-300); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-alt); color: var(--text-primary); }

.btn-danger {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); box-shadow: 0 0 0 3px rgb(220 38 38 / 0.2); }

/* Soft / tonal button variants — semantic, dark-mode-safe.
   Use when a button should hint at meaning without screaming for attention. */
.btn-primary-soft {
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.btn-primary-soft:hover { background: color-mix(in srgb, var(--primary-light) 80%, var(--primary) 20%); }

.btn-success-soft {
  background: var(--success-light);
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}
.btn-success-soft:hover { background: color-mix(in srgb, var(--success-light) 80%, var(--color-success) 20%); }

.btn-warning-soft {
  background: var(--warning-light);
  color: var(--color-warning-text);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.btn-warning-soft:hover { background: color-mix(in srgb, var(--warning-light) 80%, var(--color-warning) 20%); }

.btn-danger-soft {
  background: var(--danger-light);
  color: var(--color-danger-text);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.btn-danger-soft:hover { background: color-mix(in srgb, var(--danger-light) 80%, var(--danger) 20%); }
/* Outline button tinted danger (text + border) — token-driven so it re-themes
   in dark mode. Used for destructive toggle buttons (deactivate user, etc.). */
.btn-outline.btn-outline-danger { color: var(--color-danger); border-color: var(--color-danger); }

[data-theme="dark"] .btn-primary-soft { color: var(--primary-soft); }
[data-theme="dark"] .btn-success-soft { color: var(--color-success-text); }
/* .btn-warning-soft / .btn-danger-soft dark overrides dropped 2026-07-23:
   their light rules now use --color-warning-text / --color-danger-text, which
   already carry these exact dark values. */

.btn-white {
  background: var(--color-white);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.btn-white:hover { background: var(--gray-50); color: var(--primary-dark); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

.btn-ghost-white {
  background: transparent;
  color: rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-ghost-white:hover { background: rgba(255,255,255,.12); color: var(--color-white); border-color: rgba(255,255,255,.7); }

.btn-passkey {
  background: var(--gray-50);
  color: var(--gray-800);
  border: 1.5px solid var(--gray-200);
  font-size: .9375rem;
  font-weight: 500;
  justify-content: center;
  padding: .75rem 1.25rem;
}
.btn-passkey:hover { background: var(--gray-100); border-color: var(--gray-300); }

/* ---- Badges ------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
/* Badge variants are ALIASES of the pill recipe: same status-token triads,
   so dark mode needs no per-variant rules. Prefer `.pill .pill-*` in new code. */
.badge-new      { background: var(--primary-light); color: var(--primary-text); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.badge-trust    { background: var(--gray-100); color: var(--gray-600); font-size: .75rem; font-weight: 500; }
.badge-success  { background: var(--color-success-bg); color: var(--color-success);      border: 1px solid var(--color-success-border); }
.badge-warning  { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge-danger   { background: var(--color-danger-bg);  color: var(--color-danger-text);  border: 1px solid var(--color-danger-border); }
.badge-info     { background: var(--color-info-bg);    color: var(--color-info);         border: 1px solid var(--color-info-border); }
.badge-gray     { background: var(--bg-alt);           color: var(--text-muted);         border: 1px solid var(--border-color); }

/* ---- Navigation -------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--transition-md);
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

/* Reading-progress bar on the marketing header's bottom edge. The track is a
   thin strip flush with the border; the fill width is set by app.js on scroll. */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* sit on the header's bottom border */
  height: 3px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.scroll-progress-bar {
  height: 100%;
  width: 0;                /* JS sets this from scroll percentage */
  background: linear-gradient(90deg, var(--primary), var(--primary-text));
  border-radius: 0 2px 2px 0;
  transition: width 80ms linear;
}
[data-theme="dark"] .scroll-progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--primary-soft));
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress-bar { transition: none; }
}

/* Back-to-top button — fixed bottom-right, revealed by app.js once the user
   scrolls down (.is-visible). Sits above page content but below the header. */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  pointer-events: none;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--primary-light); }
.back-to-top:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity var(--transition); transform: none; }
  .back-to-top.is-visible { transform: none; }
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-text {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gray-800);
  letter-spacing: -0.03em;
}
.nav-logo-text strong { font-weight: 800; color: var(--primary); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: 1;
}
.nav-link {
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: background var(--transition), color var(--transition);
}
.nav-link:hover, .nav-link.active { color: var(--gray-900); background: var(--gray-100); }

/* CTAs mirrored into the collapsed menu for mobile (see nav.php); the desktop
   bar shows them via .nav-actions instead, so hide these until the mobile block. */
.nav-menu-cta { display: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-700);
  border-radius: 2px;
  transition: transform var(--transition-md), opacity var(--transition-md);
}

/* ---- Hero -------------------------------------------------- */
.hero {
  position: relative;
  padding: 5rem 0 4rem;
  overflow: hidden;
  background: var(--hero-gradient);
}
/* Two-column layout so the headline column and the decorative screenshot live
   in separate grid tracks and CANNOT overlap, at any width. The screenshot
   column is allowed to bleed off the right edge (negative margin) for the
   intended "peeking in" look, but its LEFT edge is pinned to the track gap, so
   it never crosses into the text. .hero-content keeps the .container centering
   semantics via the wrapper below. */
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 38vw, 520px);
  align-items: center;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hero-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--hero-glow-opacity);
}
.hero-glow-1 { width: 500px; height: 500px; background: var(--hero-glow-1); top: -100px; left: -100px; }
.hero-glow-2 { width: 400px; height: 400px; background: var(--hero-glow-2); bottom: -100px; right: 0; }

/* Dynamic background layers (marketing-bg.php partial): slow-drifting
   geometric shapes + a twinkling starfield, all token-driven so both themes
   stay on-palette. CSS-only, compositor-friendly, frozen for reduced motion. */
.hero-shapes { position: absolute; inset: 0; overflow: hidden; }
.hero-shape {
  position: absolute;
  color: var(--hero-shape);
  animation: heroShapeDrift 36s ease-in-out infinite alternate;
  will-change: transform;
}
/* Shapes live on the RIGHT/edge regions, clear of the headline column (text
   occupies the left ~680px on the homepage hero); drift never carries them
   under the title. */
.hero-shape-1 { top: 8%; right: 5%; }
.hero-shape-2 { top: 62%; right: 12%; animation-duration: 44s; animation-delay: -12s; }
.hero-shape-3 { bottom: 6%; right: 32%; animation-duration: 52s; animation-delay: -25s; }
/* Full-width text below 1100px: fade the shapes further so they never compete
   with copy that now spans the whole hero. */
@media (max-width: 1100px) {
  .hero-shapes { opacity: .45; }
}
@keyframes heroShapeDrift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(3rem, -2rem, 0) rotate(14deg); }
}
.hero-stars,
.hero-stars::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, var(--hero-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 67%, var(--hero-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 18%, var(--hero-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 52%, var(--hero-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 31%, var(--hero-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 89% 74%, var(--hero-star) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 85%, var(--hero-star) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 88%, var(--hero-star) 50%, transparent 51%);
  background-repeat: no-repeat;
  animation: heroStarTwinkle 9s ease-in-out infinite;
}
.hero-stars { animation-delay: 0s; }
.hero-stars::after {
  inset: 0;
  transform: translate3d(4%, 7%, 0) scale(1.15);
  animation-delay: -4.5s;
}
@keyframes heroStarTwinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shape, .hero-stars, .hero-stars::after { animation: none; }
}

.hero-content {
  position: relative;
  z-index: 1;
  min-width: 0; /* allow the grid track to shrink instead of overflowing */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem .875rem;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-size: .875rem;
  color: var(--gray-600);
  margin-bottom: 1.75rem;
  backdrop-filter: blur(8px);
}
.badge-arrow { color: var(--primary); margin-left: auto; }

.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle {
  font-size: 1.1875rem;
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: 2rem;
  max-width: 580px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-bottom: 1rem;
}
.hero-note { font-size: .875rem; color: var(--gray-400); }

/* App screenshot mockup. Lives in its own grid column, so it can never cross
   into the headline column. It bleeds off the right edge (negative margin) for
   the "peeking in" look; z-index 0 is a belt-and-suspenders guard so that even
   if some future layout change lets the columns touch, text (z-index 1) wins. */
.hero-screenshot {
  position: relative;
  width: 100%;
  margin-right: -2.5rem;
  pointer-events: none;
  z-index: 0;
}
.screenshot-frame {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
}
.screenshot-header {
  display: flex;
  gap: .375rem;
  padding: .75rem 1rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
}
.screenshot-header span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gray-300);
}
.screenshot-header span:first-child { background: #fc6058; } /* hex-ok: fixed-art — macOS traffic-light in screenshot mock */
.screenshot-header span:nth-child(2) { background: #fec02f; } /* hex-ok: fixed-art — macOS traffic-light */
.screenshot-header span:nth-child(3) { background: #2aca3e; } /* hex-ok: fixed-art — macOS traffic-light */

.screenshot-body { display: flex; height: 260px; }
.mock-sidebar { width: 80px; background: var(--gray-900); padding: 1rem .5rem; }
.mock-logo-block { width: 36px; height: 36px; background: var(--primary); border-radius: 8px; margin-bottom: 1rem; }
.mock-nav-item { height: 8px; background: rgba(255,255,255,.15); border-radius: 4px; margin-bottom: .625rem; }
.mock-nav-item.active { background: rgba(255,255,255,.35); }

.mock-content { flex: 1; padding: 1rem; background: var(--gray-50); }
.mock-header-bar { height: 24px; background: var(--gray-200); border-radius: 6px; margin-bottom: 1rem; width: 60%; }
.mock-cards { display: flex; gap: .5rem; margin-bottom: 1rem; }
.mock-card { flex: 1; height: 56px; border-radius: 8px; }
.mock-card-blue   { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--color-white)), color-mix(in srgb, var(--primary) 24%, var(--color-white))); }
.mock-card-green  { background: linear-gradient(135deg, color-mix(in srgb, var(--color-success) 14%, var(--color-white)), var(--color-success-border)); }
.mock-card-amber  { background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 14%, var(--color-white)), color-mix(in srgb, var(--color-warning) 35%, var(--color-white))); }
.mock-progress-section { display: flex; flex-direction: column; gap: .5rem; }
.mock-progress-bar { height: 8px; background: linear-gradient(90deg, var(--primary) 65%, var(--gray-200) 65%); border-radius: 4px; }
.mock-progress-bar.short  { background: linear-gradient(90deg, var(--success) 40%, var(--gray-200) 40%); }
.mock-progress-bar.medium { background: linear-gradient(90deg, var(--accent) 78%, var(--gray-200) 78%); }

/* ---- Social Proof ------------------------------------------ */
.social-proof {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.social-proof-label {
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-400);
  margin-bottom: 1.25rem;
}
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.logo-pill {
  padding: .5rem 1.25rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray-500);
}

/* ---- Section Header ---------------------------------------- */
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}
.section-label {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: .75rem;
}
.section-header h2 { color: var(--gray-900); margin-bottom: .875rem; }
.section-header p  { font-size: 1.0625rem; }

/* ---- Features ---------------------------------------------- */
.features { padding: 6rem 0; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  padding: 1.75rem;
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-md), transform var(--transition-md);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.feature-icon-blue   { background: var(--primary-light); color: var(--primary); }
.feature-icon-teal   { background: var(--color-info-bg); color: var(--accent); }
.feature-icon-purple { background: var(--color-purple-bg); color: var(--color-purple); }
.feature-icon-green  { background: var(--color-success-bg); color: var(--success); }
.feature-icon-orange { background: color-mix(in srgb, var(--color-orange) 8%, var(--color-white)); color: var(--color-orange); }
.feature-icon-red    { background: var(--color-danger-bg); color: var(--danger); }
[data-theme="dark"] .feature-icon-blue   { background: color-mix(in srgb, var(--primary) 16%, transparent);  color: var(--primary-soft); }
[data-theme="dark"] .feature-icon-teal   { background: color-mix(in srgb, var(--accent) 16%, transparent);  color: var(--accent); }
[data-theme="dark"] .feature-icon-purple { background: color-mix(in srgb, var(--color-purple) 16%, transparent); color: var(--color-purple); }
[data-theme="dark"] .feature-icon-green  { background: color-mix(in srgb, var(--color-success) 16%, transparent);  color: var(--color-success-text); }
[data-theme="dark"] .feature-icon-orange { background: color-mix(in srgb, var(--color-orange) 16%, transparent);  color: color-mix(in srgb, var(--color-orange) 45%, var(--color-white)); }
[data-theme="dark"] .feature-icon-red    { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger-text); }
.feature-card h3 { margin-bottom: .5rem; color: var(--gray-900); }

/* ---- How It Works ------------------------------------------ */
.how-it-works { padding: 6rem 0; background: var(--gray-50); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; }
.step { display: flex; gap: 1.25rem; }
.step-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gray-200);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.5rem;
}
.step-content h3 { color: var(--gray-900); margin-bottom: .5rem; }

/* ---- Testimonials ------------------------------------------ */
.testimonials { padding: 6rem 0; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.testimonial-card {
  padding: 1.75rem;
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.testimonial-card p { font-size: 1rem; color: var(--gray-700); font-style: italic; margin-bottom: 1.25rem; line-height: 1.7; }
.testimonial-card footer { display: flex; align-items: center; gap: .875rem; }
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-card footer strong { display: block; font-size: .9375rem; color: var(--gray-900); }
.testimonial-card footer span   { font-size: .8125rem; color: var(--gray-400); }

/* ---- Pricing ----------------------------------------------- */
.pricing-preview { padding: 6rem 0; background: var(--gray-50); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  padding: 2rem;
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.pricing-card-featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-dark) 10%, transparent), var(--shadow-md);
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--color-white);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25rem .875rem;
  border-radius: 100px;
}
.pricing-header { margin-bottom: 1.5rem; }
.pricing-header h3 { font-size: 1.25rem; color: var(--gray-900); margin-bottom: .5rem; }
.pricing-price { margin-bottom: .5rem; }
.pricing-price span { font-size: 2.25rem; font-weight: 800; color: var(--gray-900); }
.pricing-price { font-size: .9375rem; color: var(--gray-400); }
.pricing-features { flex: 1; margin-bottom: 1.5rem; }
.pricing-features li { padding: .4375rem 0; border-bottom: 1px solid var(--gray-100); font-size: .9375rem; color: var(--gray-600); }
.pricing-features li:last-child { border: none; }
.pricing-note { text-align: center; font-size: .875rem; color: var(--gray-400); margin-top: 1.5rem; }

/* Trust strip — compact reassurance row beside a purchase decision (pricing
   cards). Each item gets a check mark; wraps to a column on small screens. */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  color: var(--gray-600);
}
.trust-strip li::before {
  content: "✓";
  margin-right: .5rem;
  font-weight: 700;
  color: var(--success);
}

/* Pricing page section + FAQ accordion */
.section-pad { padding: 5rem 0; }
.pricing-grid-4 { max-width: 1200px; margin: 0 auto 2rem; }
/* Single centered pricing card (e.g. the standalone Professional Services callout). */
.pricing-grid-single { max-width: 480px; margin: 0 auto; }
.faq-wrap { max-width: 720px; margin: 4rem auto 0; }
.faq-list { display: flex; flex-direction: column; gap: 1.25rem; }
.faq-item {
  padding: 1.25rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.faq-q {
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-plus { font-size: 1.25rem; color: var(--text-subtle); }
.faq-a { margin-top: .875rem; font-size: .9375rem; }

/* ---- Homepage comparison + FAQ sections -------------------- */
.compare-section { padding: 6rem 0; background: var(--gray-50); }
.faq-section { padding: 6rem 0; }

/* ROI / outcomes band */
.roi-band { padding: 6rem 0; }
.roi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.roi-stat { text-align: center; padding: 0 1rem; }
.roi-stat .stat-number { font-size: 2.75rem; }
.roi-label { font-weight: 600; color: var(--text-primary); margin: .5rem 0 .375rem; }
.roi-sub { font-size: .9375rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 760px) { .roi-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Integrations strip */
.integrations-section { padding: 6rem 0; background: var(--gray-50); }
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}
.integration-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.125rem 1.25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.integration-card strong { font-size: .9375rem; color: var(--text-primary); }
.integration-card span { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 900px) { .integrations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .integrations-grid { grid-template-columns: 1fr; } }
/* The homepage FAQ provides its own section header, so reset the standalone
   top margin .faq-wrap uses on the pricing page. */
.faq-section .faq-wrap { margin-top: 2rem; }

.compare-table {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr 9rem 9rem;
  align-items: center;
}
.compare-row + .compare-row { border-top: 1px solid var(--border-color); }
.compare-cell { padding: .875rem 1.25rem; font-size: .9375rem; }
.compare-feature { color: var(--text-secondary); }
.compare-them, .compare-us { text-align: center; }
.compare-head .compare-cell {
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
/* Highlight the HIPAA Sherpa column so the eye lands on the "all yes" side. */
.compare-us { background: var(--primary-light); }
.compare-head .compare-us { color: var(--primary-text); }
.compare-yes { color: var(--color-success); font-weight: 700; }
.compare-no { color: var(--text-subtle); }
@media (max-width: 640px) {
  .compare-row { grid-template-columns: 1fr 4.5rem 4.5rem; }
  .compare-cell { padding: .75rem .75rem; font-size: .875rem; }
}

/* ---- CTA Banner -------------------------------------------- */
.cta-banner {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--accent) 100%);
}
.cta-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-banner h2 { color: var(--color-white); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .375rem; }
.cta-banner p  { color: rgba(255,255,255,.75); font-size: 1.0625rem; }
.cta-banner-actions { display: flex; gap: .875rem; flex-wrap: wrap; }

/* ---- Footer ------------------------------------------------ */
.site-footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: 4rem 0 0;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 3rem;
}
.footer-brand .nav-logo-text { color: var(--color-white); }
.footer-tagline { font-size: .9rem; margin: 1rem 0; line-height: 1.6; }
.footer-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-badges span {
  padding: .25rem .625rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 100px;
  font-size: .75rem;
  color: var(--gray-400);
}
.footer-links { display: contents; }
.footer-col h4 { color: var(--color-white); font-size: .875rem; font-weight: 600; margin-bottom: 1rem; }
.footer-col li + li { margin-top: .5rem; }
.footer-col a { color: var(--gray-400); font-size: .9rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--color-white); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem;
  text-align: center;
  font-size: .8125rem;
}
.footer-disclaimer { margin-top: .5rem; color: var(--gray-600); font-size: .775rem; max-width: 600px; margin-inline: auto; }

/* ---- Alerts ------------------------------------------------ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  border-radius: var(--radius-md);
  padding: .875rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  border: 1px solid transparent;
  animation: slideDown 200ms ease both;
  margin-bottom: 1.25rem;
}
.alert p { margin: 0; }
.alert-list { margin: 0; padding-left: 1.25rem; list-style: disc; }

/* ---- Legal document pages (privacy / terms / dpa) --------------------------
   Element defaults under .legal-doc do the work, so the documents themselves
   carry no styling at all. Token-driven → dark-mode safe. */
.legal-page { background: var(--gray-50); min-height: 100vh; }
.legal-doc {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.legal-logo {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-text);
  text-decoration: none;
}
.legal-logo svg { vertical-align: -.3em; margin-right: .4em; display: inline-block; }
.legal-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}
.legal-card h1 { font-size: 1.75rem; font-weight: 700; color: var(--primary-text); margin: 0 0 .5rem; }
.legal-meta { color: var(--gray-500); font-size: .875rem; margin: 0 0 2rem; }
.legal-body { font-family: var(--font-sans); font-size: .9375rem; line-height: 1.7; color: var(--text-secondary); }
.legal-body h2 { font-size: 1.125rem; font-weight: 600; color: var(--primary-text); margin: 2rem 0 .75rem; }
.legal-body p { margin: 0 0 1rem; color: inherit; }
.legal-body ul, .legal-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin-bottom: .375rem; }
.legal-accent { color: var(--primary-text); }
.legal-callout {
  margin: 0 0 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--gray-50);
  border-left: 3px solid var(--primary-dark);
  border-radius: 0 6px 6px 0;
}
.legal-footnote {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-100);
  font-size: .875rem;
  color: var(--gray-500);
}
.legal-foot { text-align: center; margin-top: 1.5rem; font-size: .8125rem; color: var(--gray-400); }

/* ---- Credentials carousel (about page) ------------------------------------
   Token-driven, so the only dark-mode rule needed is the light chip behind the
   PNG logos (they're drawn for light backgrounds). */
.certs-section { background: var(--bg-surface); }
.team-section .team-avatar { width: 128px; height: 128px; overflow: hidden; }
.team-section .team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.certs-scroll-wrap { position: relative; max-width: 1000px; margin: 0 auto; }
.certs-scroll {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 1.75rem;
  overflow-x: auto; padding: 1rem .5rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; /* hide bar; still scrolls via JS/arrows */
}
.certs-scroll::-webkit-scrollbar { display: none; }
.certs-scroll img, .certs-scroll > span { flex: 0 0 auto; width: 120px; height: 120px; object-fit: contain; }
.certs-scroll-wrap::before, .certs-scroll-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; z-index: 1;
}
.certs-scroll-wrap::before { left: 0;  background: linear-gradient(to right, var(--bg-surface), transparent); }
.certs-scroll-wrap::after  { right: 0; background: linear-gradient(to left,  var(--bg-surface), transparent); }
.certs-scroll-controls { display: flex; justify-content: center; gap: 1rem; margin: .5rem 0 0; }
.certs-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-surface);
  color: var(--primary-text); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition);
}
.certs-arrow:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.certs-arrow:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.certs-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-alt);
  color: var(--primary-text); font-weight: 700; font-size: .85rem; text-align: center; padding: .5rem;
}
[data-theme="dark"] .certs-scroll img {
  background: var(--color-white); border-radius: 14px; padding: 10px; /* light chip for light-background PNG logos */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ---- Styleguide (/dashboard/_styleguide.php, staff-only) ---------------- */
.sg-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.sg-skel-avatar { width: 40px; height: 40px; }
.sg-skel-60 { width: 60%; }
.sg-skel-40 { width: 40%; }
.sg-swatch {
  padding: 1rem .875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 170px;
  font-size: .8125rem;
}
.sg-swatch[data-token="surface-1"]         { background: var(--surface-1); }
.sg-swatch[data-token="surface-2"]         { background: var(--surface-2); }
.sg-swatch[data-token="surface-3"]         { background: var(--surface-3); }
.sg-swatch[data-token="color-success-bg"]  { background: var(--color-success-bg); color: var(--color-success); }
.sg-swatch[data-token="color-warning-bg"]  { background: var(--color-warning-bg); color: var(--color-warning-text); }
.sg-swatch[data-token="color-danger-bg"]   { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.sg-swatch[data-token="color-info-bg"]     { background: var(--color-info-bg);    color: var(--color-info); }
.sg-hero-demo { border-radius: var(--radius-lg); margin-top: 1.5rem; }
/* 2026: alerts carry a 3px semantic left stripe (docs/style-guide-2026.html
   §Alerts) — the event's state reads at a glance even before the text. */
.alert-error   { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  border-left: 3px solid var(--color-danger);  color: var(--color-danger-text, var(--color-danger)); }
.alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); border-left: 3px solid var(--color-success); color: var(--color-success-text, var(--color-success)); }
.alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); border-left: 3px solid var(--color-warning); color: var(--color-warning-text, var(--color-warning)); }
.alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    border-left: 3px solid var(--color-info);    color: var(--color-info-text, var(--color-info)); }
.alert-list { list-style: disc; padding-left: 1rem; }

/* ---- Forms ------------------------------------------------- */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: .875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: .375rem; }
.form-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.form-label-link { font-size: .8125rem; color: var(--primary); }
.form-input,
.form-select {
  display: block;
  width: 100%;
  padding: .5625rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  box-sizing: border-box;
}
/* Compact select for dense toolbars (mirrors .btn-sm sizing). */
.form-select-sm { padding: .3125rem .5rem; font-size: .8125rem; }
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent));
}
.form-input::placeholder { color: var(--text-subtle, var(--text-disabled)); }
/* selects keep a chevron despite appearance:none */
select.form-select, select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.25rem;
}
.form-input-code {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: .25em;
  font-weight: 600;
}
.form-hint { font-size: .8125rem; color: var(--text-muted); margin-top: .375rem; display: block; }

.input-wrap { position: relative; }
.input-wrap .form-input { padding-right: 2.75rem; }
.input-toggle-vis {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  padding: .25rem;
  border-radius: 4px;
}
.input-toggle-vis:hover { color: var(--gray-600); }

.form-check { display: flex; align-items: flex-start; gap: .625rem; }
.form-checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  appearance: none;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}
.form-checkbox:checked { background: var(--primary); border-color: var(--primary); }
.form-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px;
  width: 5px; height: 9px;
  border: 2px solid var(--color-white);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.form-check-label { font-size: .875rem; color: var(--gray-600); line-height: 1.5; }
.form-check-label a { color: var(--primary); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: 1.25rem 0;
  color: var(--gray-400);
  font-size: .8125rem;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* ---- Auth pages -------------------------------------------- */
.auth-body { background: var(--gray-50); min-height: 100vh; }
.auth-layout {
  display: grid;
  grid-template-columns: 480px 1fr;
  min-height: 100vh;
}
.auth-layout-centered { grid-template-columns: 1fr; align-items: center; }
.auth-brand-panel {
  background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 50%, var(--accent) 100%);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.auth-brand-body { flex: 1; display: flex; align-items: center; }
.auth-brand-body blockquote {
  border-left: 3px solid rgba(255,255,255,.3);
  padding-left: 1.25rem;
}
.auth-brand-body blockquote p {
  color: rgba(255,255,255,.9);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.7;
  margin-bottom: .75rem;
}
.auth-brand-body blockquote footer { color: rgba(255,255,255,.6); font-size: .875rem; }
.auth-brand-body h2 { color: var(--color-white); font-size: 1.375rem; margin-bottom: 1rem; }
.auth-brand-list li { color: rgba(255,255,255,.85); padding: .375rem 0; font-size: .9375rem; }
.auth-brand-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.auth-brand-badges span {
  padding: .3125rem .75rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 100px;
  font-size: .75rem;
  color: rgba(255,255,255,.7);
}
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--color-white);
  overflow-y: auto;
}
.auth-panel-solo {
  max-width: 480px;
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
  margin: 2rem auto;
}
.auth-form-wrap { width: 100%; max-width: 420px; }
.auth-title { font-size: 1.875rem; color: var(--gray-900); margin-bottom: .375rem; }
.auth-subtitle { color: var(--gray-500); font-size: .9375rem; margin-bottom: 1.75rem; }
.auth-switch { text-align: center; font-size: .9rem; color: var(--gray-500); margin-top: 1.25rem; }
.auth-switch a { color: var(--primary); font-weight: 500; }

/* "or continue with" divider + OAuth provider buttons (login page) */
.auth-divider { position: relative; margin: 1.25rem 0; text-align: center; }
.auth-divider::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: var(--border-color);
}
.auth-divider span {
  position: relative;
  background: var(--bg-surface);
  padding: 0 .75rem;
  font-size: .8125rem;
  color: var(--text-muted);
}
.oauth-buttons { display: grid; grid-template-columns: 1fr; gap: .625rem; }
.oauth-buttons-2 { grid-template-columns: 1fr 1fr; }
.btn-oauth { justify-content: center; gap: .5rem; }

/* Code-style input (recovery codes, TOTP) */
.input-code { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.cursor-pointer { cursor: pointer; }
.my-xl { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* Key/value detail grid (invite summary, detail blocks) */
.kv-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem 1rem;
  font-size: .9rem;
  margin: 0;
}

/* Context banner — "you are managing org X" style callout (warning surface) */
.context-banner {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius);
  padding: .875rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}
.context-banner-text {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--color-warning-text);
}
.context-banner-text svg { flex-shrink: 0; }

/* Stacked request/list rows inside a card (border-top separated) */
.request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .625rem 0;
  border-top: 1px solid var(--border-color);
}

/* Highlighted table row (e.g. the org you're currently managing) */
.data-table tr.row-active { background: var(--primary-light); }
.data-table tr.row-danger { background: var(--color-danger-bg); }

/* Card with a warning-colored border (attention sections) */
.card-warning-border { border-color: var(--color-warning-border); }

/* Severity palette — finding severities are semantic, theme-stable colors.
   Backgrounds carry white text; the -text variants are for counts/labels. */
.sev-critical      { background: var(--color-danger); }
.sev-high          { background: var(--color-orange); }
.sev-medium        { background: var(--color-warning); }
.sev-low           { background: var(--color-success); }
.sev-informational { background: var(--gray-500); }
/* Severity-as-text — must use tokens (which have dark remaps) so the color
   stays legible on dark surfaces. */
.sev-text-critical      { color: var(--color-danger); }
.sev-text-high          { color: var(--color-warning); }
.sev-text-medium        { color: var(--color-warning); }
.sev-text-low           { color: var(--color-success); }
.sev-text-informational { color: var(--text-muted); }

/* Meter (thin progress bar) + status fills */
.meter { height: 12px; background: var(--border-color); border-radius: var(--radius-full); overflow: hidden; }
.meter-fill { height: 100%; border-radius: var(--radius-full); }
.fill-success { background: var(--color-success); }
.fill-warning { background: var(--color-warning); }
.fill-danger  { background: var(--color-danger); }

/* Grade palette (certificate legend + grade text) — fixed semantic scale,
   mirrors ComplianceScore::GRADE_THRESHOLDS and the PDF certificate */
.grade-dot-a { background: var(--color-success); }
.grade-dot-b { background: var(--primary); }
.grade-dot-c { background: var(--color-warning); }
.grade-dot-d { background: var(--color-orange); }
.grade-dot-f { background: var(--color-danger); }
/* .grade-text-{a..f} moved to the token-driven block below (~1855, re-themes in
   dark mode + adds -none); these hardcoded-hex duplicates were removed 2026-07-23. */

/* Certificate page extras (below-the-fold controls) */
.cert-extra { width: 100%; max-width: 800px; }
.cert-footnote { max-width: 600px; }
.fs-3xl { font-size: 3rem; }
.upgrade-gate-card { max-width: 480px; margin: 4rem auto; padding: 3rem 1rem; }

/* Compliance badge embed preview */
.badge-preview {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.badge-img { border-radius: 6px; box-shadow: var(--shadow-md); }

/* Public status page */
.status-h1 { font-size: 1.5rem; font-weight: 700; color: var(--primary-text); margin: 0 0 1.5rem; }
.status-hero-banner {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.25rem 1.5rem;
  color: var(--color-white);
  border-radius: 10px;
  font-family: var(--font-sans);
  margin-bottom: 2rem;
}
.status-banner-ok     { background: var(--color-success); }
.status-banner-issues { background: var(--color-warning); }
.status-banner-meta   { opacity: .85; }
.status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.status-ok          { color: var(--color-success); }
.status-degraded    { color: var(--color-warning); }
.status-partial     { color: var(--color-orange); }
.status-major       { color: var(--color-danger); }
.status-maintenance { color: var(--color-purple); }
.lh-loose { line-height: 1.7; }

/* Group-2 long-tail components */
.grid-autofill-180 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.grid-autofill-300 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.pill-outline { background: var(--bg-surface); color: var(--text-subtle); border-color: var(--border-color); }
.legend-sq { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.fill-neutral { background: var(--text-subtle); }
.opacity-30 { opacity: .3; }
.mb-1px { margin-bottom: 1px; }
.break-word { word-break: break-word; }
.minw-240 { min-width: 240px; }
.maxw-720 { max-width: 720px; }
.score-box { padding: .6rem .75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1.25rem; font-weight: 700; text-align: center; }
.matrix-grid { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 2px; font-size: .7rem; }
.matrix-axis { padding: .3rem; font-weight: 600; color: var(--text-muted); }
/* 5x5 risk-matrix tint scale (semantic, theme-stable). Backgrounds are fixed
   light pastels in BOTH themes, so pin a dark text color too — otherwise the
   cell's number inherits the page's light text in dark mode and disappears. */
.matrix-cell-1,
.matrix-cell-2,
.matrix-cell-3,
.matrix-cell-4 { color: var(--gray-800); }
.matrix-cell-1 { background: var(--matrix-1); }
.matrix-cell-2 { background: var(--matrix-2); }
.matrix-cell-3 { background: var(--matrix-3); }
.matrix-cell-4 { background: var(--matrix-4); }
/* Interactive 5×5 matrix cell (risk-register view). Carries the layout the old
   inline style provided; the .matrix-cell-N class supplies the pastel fill +
   pinned dark text (readable in both themes). */
.matrix-grid-cell { padding: .4rem; text-align: center; border-radius: 3px; min-width: 32px; }
.matrix-grid-cell.is-active { outline: 2px solid var(--primary-dark); outline-offset: 1px; font-weight: 700; }
.spark-bars-sm { height: 60px; gap: .5rem; padding-bottom: .375rem; }
.corner-tr { position: absolute; top: .75rem; right: .75rem; }

/* Group-1 long-tail components */
.invite-grid { display: grid; grid-template-columns: 1fr 180px auto; gap: .75rem; align-items: end; }
@media (max-width: 720px) { .invite-grid { grid-template-columns: 1fr; } }
.h-44 { height: 44px; }
.h-auto { height: auto; }
.w-auto { width: auto; }
.check-ring {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: .1rem;
  display: inline-block;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
}
.check-ring-btn { background: none; cursor: pointer; padding: 0; }
.mono-block {
  font-size: .875rem;
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: .75rem 1rem;
}
.meter-mini { height: 6px; border-radius: 4px; }
.fill-primary { background: var(--primary); }
.strike { text-decoration: line-through; }
/* Question-assignment picker row (settings/users/questions). */
.assignment-label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .1s;
}
.assignment-label.is-assigned { background: var(--primary-light); }
/* Active-row / active-card highlight utilities (org switchers, selected rows). */
.row-active { background: var(--primary-light); }
.ring-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
/* Org-switch row (workspace): the static layout, with .row-active toggled on. */
.org-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.logo-preview { max-width: 200px; max-height: 60px; object-fit: contain; }
.logo-inline { max-height: 28px; max-width: 140px; object-fit: contain; vertical-align: middle; }
.maxw-120 { max-width: 120px; }
.swatch-input { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; flex-shrink: 0; }

/* Compound-batch additions */
.px-xs { padding-left: .375rem; padding-right: .375rem; }
.edge-neutral { border-left: 3px solid var(--text-subtle); }
.col-w-40 { width: 40px; }
.col-w-70 { width: 70px; }
.col-w-130 { width: 130px; }
.maxw-180 { max-width: 180px; }
.minw-90 { min-width: 90px; }
.minw-100 { min-width: 100px; }
.minw-120 { min-width: 120px; }
.flex-3 { flex: 3; }
.d-contents { display: contents; }
.ob-stat-pad { padding: .875rem 1.25rem; }
.grid-main-aside { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .grid-main-aside { grid-template-columns: 1fr; } }
.acc-summary {
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: .25rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.link-card {
  display: block;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.link-card:hover { border-color: var(--border-strong); }

/* Missing-class fixes (referenced-but-undefined audit) */
.mt-0 { margin-top: 0; }
.text-inverse { color: var(--text-inverse); }
.row-rule-light { border-bottom: 1px solid var(--gray-100); }
.context-banner-label { font-size: .875rem; font-weight: 500; color: var(--color-warning-text); }
/* Screen-reader-only content (standard clip pattern) — was referenced but
   never defined, so "sr-only" text rendered visibly. */
.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;
}

/* Round-3 utilities */
.w-8 { width: 8px; }   .h-8 { height: 8px; }
.w-10 { width: 10px; } .h-10 { height: 10px; }
.w-12 { width: 12px; } .h-12 { height: 12px; }
.w-14 { width: 14px; } .h-14 { height: 14px; }
.w-16 { width: 16px; } .h-16 { height: 16px; }
.w-18 { width: 18px; } .h-18 { height: 18px; }
.w-20 { width: 20px; } .h-20 { height: 20px; }
.w-24 { width: 24px; } .h-24 { height: 24px; }
.fs-xxl { font-size: 1.5rem; }
.fs-num { font-size: 1.75rem; }
.fs-num-lg { font-size: 2rem; }
.mt-px { margin-top: .125rem; }
.mr-xs { margin-right: .25rem; }
.mr-sm { margin-right: .5rem; }
.opacity-85 { opacity: .85; }
.pl-lg { padding-left: 1.25rem; }
.pad-banner { padding: .75rem 1rem; }
.pad-btn { padding: .625rem 1rem; }
.pad-section { padding: 1.25rem 1.5rem; }
.lh-1 { line-height: 1; }
.lh-tight { line-height: 1.4; }
.lh-normal { line-height: 1.5; }
.text-strong { color: var(--gray-800); }
.bg-danger-soft  { background: var(--color-danger-bg); }
.bg-warning-soft { background: var(--color-warning-bg); }
.bg-success-soft { background: var(--color-success-bg); }
.bg-info-soft    { background: var(--color-info-bg); }
.bg-primary-soft { background: var(--primary-light); }

/* Round-4 debt-paydown utilities (auto-convert-styles.php round 4) */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-kv { grid-template-columns: 140px 1fr; }
.grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gap-kv { gap: .5rem .75rem; }
.gap-0 { gap: 0; }
.pad-tag { padding: .2rem .5rem; }
.pad-cell-y { padding: .875rem 1rem; }
.p-card { padding: 1.25rem; }
.p-3xl { padding: 3rem; }
.pt-xl { padding-top: 1.5rem; }
.mt-auto { margin-top: auto; }
.mb-2xs { margin-bottom: .375rem; }
.bt-rule { border-top: 1px solid var(--border-color); }
.border-0 { border: none; }
.bordered-danger  { border: 1px solid var(--color-danger-border); }
.bordered-warning { border: 1px solid var(--color-warning-border); }
.bordered-info    { border: 1px solid var(--color-info-border); }
.bordered-success { border: 1px solid var(--color-success-border); }
.bg-alt { background: var(--bg-alt); }
.bg-border { background: var(--border-color); }
.text-inverse-soft { color: rgba(255, 255, 255, .8); }
.font-sans { font-family: var(--font-sans); }
.align-middle { vertical-align: middle; }
.pos-sticky { position: sticky; }
.scroll-y { overflow-y: auto; }
.opacity-40 { opacity: .4; }
.opacity-50 { opacity: .5; }
.opacity-60 { opacity: .6; }
.opacity-70 { opacity: .7; }
.w-64 { width: 64px; } .h-64 { height: 64px; }
.h-6 { height: 6px; }
.maxw-240 { max-width: 240px; }
.maxw-420 { max-width: 420px; }
.maxw-560 { max-width: 560px; }
.maxw-640 { max-width: 640px; }
.maxw-840 { max-width: 840px; }
.minw-120 { min-width: 120px; }

/* Round-5 debt-paydown utilities */
.py-2xs { padding-top: .25rem; padding-bottom: .25rem; }
.py-xs { padding-top: .375rem; padding-bottom: .375rem; }
.px-sm { padding-left: .5rem; padding-right: .5rem; }
.pl-xl { padding-left: 1.5rem; }
.pt-lg { padding-top: 1rem; }
.pad-kbd { padding: .1rem .4rem; }
.pad-btn-wide { padding: .5rem 1rem; }
.my-lg { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-4xl { margin-top: 4rem; margin-bottom: 4rem; }
.ml-md { margin-left: .75rem; }
.ml-lg { margin-left: 1rem; }
.mb-neg-2 { margin-bottom: -2px; }
.list-indent { margin: 0 0 .75rem 1.1rem; }
.content-pad { padding: 3rem 1.5rem 5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.grid-auto-180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.grid-side-360 { grid-template-columns: 1fr 360px; }
.gap-rc { gap: .5rem 1rem; }
.align-icon { vertical-align: -2px; }
.pre-line { white-space: pre-line; }
.edge-success { border-left: 3px solid var(--success); }
.bordered-primary { border: 1px solid var(--primary); }
.bg-danger-solid { background: var(--danger); }
.tab-rule-ghost { border-bottom: 2px solid transparent; }
.rounded-0 { border-radius: 0; }
.pos-fixed { position: fixed; }
.pos-abs { position: absolute; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.z-10 { z-index: 10; }
.z-100 { z-index: 100; }
.z-1000 { z-index: 1000; }
.shadow-lg-u { box-shadow: var(--shadow-lg); }
.anim-spin { animation: spin 1s linear infinite; }
.v-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.w-320 { width: 320px; }
.w-40p { width: 40%; }
.h-4 { height: 4px; }
.h-44 { height: 44px; }
.col-w-120 { width: 120px; }
.maxw-120 { max-width: 120px; }
.maxw-140 { max-width: 140px; }
.minw-100 { min-width: 100px; }
.minw-140 { min-width: 140px; }
.minw-160 { min-width: 160px; }
.minw-180 { min-width: 180px; }
.minw-240 { min-width: 240px; }

/* Risk heatmap matrix (risk-register/index.php, risk/heatmap.php) */
.heatmap-axis-y { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); height: 125px; flex-shrink: 0; }
.heatmap-grid { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 3px; }
.heatmap-row-label { display: flex; align-items: center; justify-content: flex-end; padding-right: .375rem; font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }
.heatmap-cell-sm { width: 25px; height: 25px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 400; color: var(--text-muted); }
.heatmap-cell-lg { width: 64px; height: 48px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; cursor: default; transition: opacity .15s; }
.heatmap-y-lg { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-size: .75rem; font-weight: 600; color: var(--text-muted); padding-right: 4px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 28px; }
.heatmap-row-lg { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.heatmap-row-label-lg { font-size: .6875rem; color: var(--text-muted); width: 68px; text-align: right; padding-right: 6px; }
.heatmap-x-labels { display: flex; gap: 6px; margin-top: 4px; padding-left: 74px; }
.heatmap-x-title { text-align: center; font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; padding-left: 74px; }
.score-pill-solid { display: inline-block; min-width: 2rem; padding: .2rem .5rem; border-radius: 99px; color: var(--color-white); font-weight: 700; font-size: .8125rem; }
.pt-sm { padding-top: .5rem; }
.heatmap-cell-filled { font-weight: 700; color: var(--text-primary); }
.heatmap-axis-x { text-align: center; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: .375rem; padding-left: 28px; }
.legend-title { font-weight: 600; margin-bottom: .125rem; }
.legend-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.legend-swatch-critical { background: color-mix(in srgb, var(--color-danger) 75%, transparent); }
.legend-swatch-high { background: color-mix(in srgb, var(--color-orange) 75%, transparent); }
.legend-swatch-medium { background: color-mix(in srgb, var(--color-warning) 75%, transparent); }
.legend-swatch-low { background: color-mix(in srgb, var(--color-success) 75%, transparent); }
/* .status-pill retired 2026-07-24 — the last consumer (change-log) migrated to
   the canonical .pill family (guide rule 05: one status chip). */
.count-pill-danger { display: inline-block; padding: .15rem .45rem; border-radius: 100px; font-size: .7rem; font-weight: 700; background: var(--color-danger-bg); color: var(--color-danger-text); border: 1px solid var(--color-danger-border); }

/* Stat-pill accent edges (rem-stat-pill rows) */
.edge-neutral { border-left: 3px solid var(--gray-500); }
.edge-primary { border-left: 3px solid var(--primary); }
.edge-orange  { border-left: 3px solid var(--color-orange); }
.text-slate { color: var(--gray-500); }

/* risk-pill color variants (replaces per-instance --pill-bg/--pill-color) */
.risk-pill-neutral { --pill-bg: var(--gray-100); --pill-color: var(--text-secondary); }
.risk-pill-gray    { --pill-bg: var(--gray-100); --pill-color: var(--gray-600); }
.risk-pill-success { --pill-bg: var(--color-success-bg); --pill-color: var(--color-success-text); }
.risk-pill-info    { --pill-bg: var(--color-info-bg); --pill-color: var(--color-info-text); }
.risk-pill-warning { --pill-bg: var(--color-warning-bg); --pill-color: var(--color-warning-text); }
.risk-pill-danger  { --pill-bg: var(--color-danger-bg); --pill-color: var(--color-danger-text); }

/* Brand-preview widget internals (white-on-brand by design) */
.bp-header { padding: .875rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.bp-title { font-weight: 700; font-size: .9375rem; color: var(--color-white); letter-spacing: -.01em; }
.bp-item { padding: .5rem .75rem; border-radius: 6px; background: rgba(255, 255, 255, .15); color: var(--color-white); font-size: .8125rem; font-weight: 500; margin-bottom: .25rem; }
.bp-rule { border-top: 1px solid rgba(255, 255, 255, .15); margin: .5rem 0; }

/* Misc structural one-offs promoted to classes */
.self-center { align-self: center; }
.items-stretch { align-items: stretch; }
.hr-rule { border: none; border-top: 1px solid var(--border-color); margin: 1rem 0; }
.dot-current { background: currentColor; }
.bt-rule-strong { border-top: 2px solid var(--border-color); }
.bc-danger { border-color: var(--color-danger-border); }
.maxw-360 { max-width: 360px; }
.minw-44 { min-width: 44px; }
.grid-auto-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.section-title-rule { padding-bottom: .625rem; border-bottom: 1px solid var(--border-color); }
.overlay-backdrop { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45); align-items: center; justify-content: center; }
.overlay-dialog { background: var(--bg-surface); border-radius: var(--radius-lg); padding: 1.75rem; max-width: 420px; width: 90%; box-shadow: var(--shadow-xl); }
.icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--primary-light); color: var(--primary); }
.recommendation-box { background: var(--bg-surface-2, var(--gray-50)); border: 1px solid var(--border-color); border-radius: 6px; padding: .75rem 1rem; margin-bottom: 1rem; }
.danger-strip { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; border-radius: 8px; background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); color: var(--color-danger-text); font-size: .875rem; font-weight: 600; }
.event-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 8px; }
.event-badge { font-size: .75rem; font-weight: 600; padding: .2rem .5rem; border-radius: 4px; white-space: nowrap; }
.event-badge-default { background: color-mix(in srgb, var(--color-purple) 10%, var(--color-white)); color: var(--color-purple); }
[data-theme="dark"] .event-badge-default { background: color-mix(in srgb, var(--color-purple) 20%, transparent); color: var(--color-purple); }

/* Calendar event-type accents — fixed per-type palette. The row gets a colored
   left border; its badge gets a matching translucent tint. Translucent so the
   distinction survives on both light and dark surfaces (a [data-theme] rule can
   still adjust if needed), which the former inline styles could not do. */
.event-edge { border-left: 4px solid var(--border-color); }
/* <summary class="card-header"> (compliance-activity cards): flex display
   removes the native disclosure marker, so draw an explicit chevron. */
details > summary.card-header { list-style: none; }
details > summary.card-header::-webkit-details-marker { display: none; }
details > summary.card-header::after { content: '\25B8'; margin-left: auto; padding-left: .5rem; color: var(--text-muted); flex: none; transition: transform .15s ease; }
details[open] > summary.card-header::after { transform: rotate(90deg); }

.event-type-activity          { border-left-color: var(--color-info); }
.event-type-activity          .event-badge { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--color-info); }
.event-type-assessment        { border-left-color: var(--primary-dark); }
.event-type-assessment        .event-badge { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary-text); }
.event-type-remediation       { border-left-color: var(--color-danger); }
.event-type-remediation       .event-badge { background: color-mix(in srgb, var(--color-danger) 16%, transparent); color: var(--color-danger); }
.event-type-ba_review,
.event-type-vendor_review     { border-left-color: var(--color-purple); }
.event-type-ba_review         .event-badge,
.event-type-vendor_review     .event-badge { background: color-mix(in srgb, var(--color-purple) 16%, transparent); color: var(--color-purple); }
.event-type-policy_review     { border-left-color: var(--color-success); }
.event-type-policy_review     .event-badge { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }
.event-type-device_review     { border-left-color: var(--color-info); }
.event-type-device_review     .event-badge { background: color-mix(in srgb, var(--color-info) 16%, transparent); color: var(--color-info); }
.event-type-training_renewal  { border-left-color: var(--color-warning); }
.event-type-training_renewal  .event-badge { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning-text); }
[data-theme="dark"] .event-type-training_renewal .event-badge { color: var(--color-warning); }
/* Dark parity for the rest of the badge palette: the .16 tints go near-black
   on the dark surface, so the saturated light-mode text colors drop below AA —
   lift each to its 300/400-weight hue (same fix training_renewal had). */
[data-theme="dark"] .event-type-activity        .event-badge { color: var(--accent); }
[data-theme="dark"] .event-type-ba_review       .event-badge,
[data-theme="dark"] .event-type-vendor_review   .event-badge { color: var(--color-purple); }
[data-theme="dark"] .event-type-device_review   .event-badge { color: var(--accent); }
.event-edge-default { border-left: 4px solid var(--color-purple); }

/* Round-6 utilities — final static-attr paydown */
.top-lg { top: 1rem; }
.pad-empty { padding: 3rem 1.5rem; }
.col-span-all { grid-column: 1 / -1; }
.flex-fixed-140 { flex: 0 0 140px; }
.ml-xl { margin-left: 1.5rem; }
.mt-3xl { margin-top: 3rem; }
.m-md { margin: .75rem; }
.m-lg { margin: 1rem; }
.my-px { margin: .125rem 0; }
.pb-sm { padding-bottom: .5rem; }
.pb-md { padding-bottom: .75rem; }
.pb-lg { padding-bottom: 1rem; }
.pb-xl { padding-bottom: 1.5rem; }
.pl-2xl { padding-left: 2.25rem; }
.grid-kv-160 { grid-template-columns: 160px 1fr; }
.grid-form-qty { grid-template-columns: 1fr 80px 80px; }
.grid-main-aux { grid-template-columns: 1fr auto; }
.grid-auto-240 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }

/* Fixed-column grids must collapse on narrow screens (they had no breakpoint,
   so they stayed multi-column and overflowed phones). Mirrors how .form-grid
   collapses at 640px. */
@media (max-width: 900px) {
  .grid-side-360 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid-5 { grid-template-columns: 1fr; }
}
/* The 6-column risk heatmap/matrix can't collapse meaningfully, so let it
   scroll horizontally within its card instead of overflowing the page. */
@media (max-width: 640px) {
  .heatmap-grid,
  .matrix-grid { min-width: 420px; }
  .heatmap-wrap,
  .matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.kv-list { display: grid; grid-template-columns: max-content 1fr; row-gap: .875rem; column-gap: 1.5rem; }
.vis-hidden { visibility: hidden; }
.h-38 { height: 38px; }
.w-70p { width: 70%; }
.col-w-84 { width: 84px; }
.col-w-104 { width: 104px; }
.col-w-168 { width: 168px; }
.col-w-180 { width: 180px; }
.minw-130 { min-width: 130px; }
.minw-260 { min-width: 260px; }
.maxw-400 { max-width: 400px; }
.maxw-520 { max-width: 520px; }
.maxw-780 { max-width: 780px; }
.maxh-120 { max-height: 120px; }
.maxh-220 { max-height: 220px; }
.maxh-280 { max-height: 280px; }
.maxh-340 { max-height: 340px; }
.maxh-360 { max-height: 360px; }
.edge-purple { border-left: 3px solid var(--color-purple); }
.edge-border { border-left: 3px solid var(--border-color); }
.edge-strong { border-left: 3px solid var(--border-strong, var(--gray-300)); }
.text-purple { color: var(--color-purple); }
.bg-success-solid { background: var(--color-success); }
.bg-warning-solid { background: var(--color-warning); }
.bg-danger-light { background: var(--danger-light); }
.bordered-dashed { border: 1px dashed var(--border-color); }
.table-collapse { border-collapse: collapse; }
.col-tight { width: 1%; white-space: nowrap; }
.select-all { user-select: all; }
.underline { text-decoration: underline; }
.text-inherit { color: inherit; }
.trans-shadow { transition: box-shadow .15s; }
.fs-display { font-size: 1.875rem; }
.callout-brand { background: var(--primary-light); border-left: 4px solid var(--primary); padding: 1rem 1.25rem; border-radius: 6px; }
.num-dot { min-width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0; margin-top: .1rem; }
.success-orb { width: 64px; height: 64px; border-radius: 50%; background: var(--color-success-bg); display: flex; align-items: center; justify-content: center; }
.swatch-input { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; }
.brand-logo-img { height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.chip-warning { display: inline-flex; align-items: center; gap: .3rem; background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); border-radius: 100px; font-size: .75rem; font-weight: 600; padding: .2rem .6rem; text-decoration: none; }
.pick-card { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem .875rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-surface); text-align: left; cursor: pointer; transition: background .12s; }
.tool-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.link-card { display: block; border: 1px solid var(--border-color); border-radius: 10px; padding: 1.25rem 1.5rem; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }

/* Final-sweep structural utilities */
.bordered { border: 1px solid var(--border-color); }
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.uppercase { text-transform: uppercase; }
.tracking { letter-spacing: .05em; }
.overflow-hidden { overflow: hidden; }
.bg-surface { background: var(--bg-surface); }
.shadow-sm-u { box-shadow: var(--shadow-sm); }
.pad-chip { padding: .5rem .75rem; }
.pad-roomy { padding: 1rem 1.25rem; }
.mt-2xs { margin-top: .375rem; }

/* Dashboard home — compliance gauge, dimension meters, score sparkline */
.gauge-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.gauge-svg { transform: rotate(-90deg); }
.gauge-arc { transition: stroke-dasharray 800ms cubic-bezier(.4, 0, .2, 1); }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.gauge-grade { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.meter-thin { height: 5px; }
.meter-fill-animated { transition: width 600ms ease; }
.pos-rel { position: relative; }
.minw-280 { min-width: 280px; }
.gap-2xl { gap: 2rem; }
.popover-panel {
  position: absolute;
  left: 0;
  top: 24px;
  z-index: 50;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem;
  width: 300px;
  box-shadow: var(--shadow-lg);
  font-size: .8125rem;
  color: var(--text-secondary);
}
.popover-list { margin: .25rem 0 .5rem 1.1rem; font-size: .84rem; list-style: disc; }
.info-dot {
  list-style: none;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}
.spark-bars {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  height: 80px;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--border-color);
  margin-top: 1rem;
}
.spark-bar { width: 100%; border-radius: 4px 4px 0 0; }
/* A–F grade palette (matches the certificate legend dots) */
.grade-text-a { color: var(--color-success); }  .grade-bar-a { background: var(--color-success); }
.grade-text-b { color: var(--color-info); }      .grade-bar-b { background: var(--primary); }
.grade-text-c { color: var(--color-warning); }   .grade-bar-c { background: var(--color-warning); }
.grade-text-d { color: var(--color-warning); }   .grade-bar-d { background: var(--color-orange); }
.grade-text-f { color: var(--color-danger); }    .grade-bar-f { background: var(--color-danger); }
.grade-text-none { color: var(--text-muted); }   .grade-bar-none { background: var(--gray-500); }
/* Soft grade chips (bg + text) — token-driven so they re-theme in dark mode.
   Replaces the per-page gradeStyle() inline composition. */
.grade-chip { display: inline-block; font-size: .75rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px; }
.grade-chip-a { background: var(--color-success-bg); color: var(--color-success); }
.grade-chip-b { background: var(--color-info-bg);    color: var(--color-info); }
.grade-chip-c { background: var(--color-warning-bg); color: var(--color-warning-text); }
.grade-chip-d { background: var(--color-warning-bg); color: var(--color-warning-text); }
.grade-chip-f { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.grade-chip-none { background: var(--bg-alt); color: var(--text-muted); }

/* Tier-5 sweep additions */
/* Underline sub-tabs (e.g. data-flows Assets/Flows). Token-driven; the active
   tab gets .is-active. Replaces a per-page inline-styled tab. */
.subtab {
  padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid transparent; color: var(--text-muted); margin-bottom: -2px;
}
.subtab:hover { color: var(--text-primary); }
.subtab.is-active { border-bottom-color: var(--primary); color: var(--primary); }
.grid-autofit-160 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.edge-warning { border-left: 3px solid var(--color-warning); }
.edge-danger  { border-left: 3px solid var(--color-danger); }
.col-w-32 { width: 32px; }
.col-w-60 { width: 60px; }
.maxw-220 { max-width: 220px; }
.maxw-760 { max-width: 760px; }
.lvl-stat-sm { padding: .625rem; min-width: 0; }

/* Risk-analysis matrix/table helpers */
.td-cell { padding: .5rem .625rem; }
.align-top { vertical-align: top; }
.capitalize { text-transform: capitalize; }
.maxw-260 { max-width: 260px; }
.cursor-help { cursor: help; }
.fw-800 { font-weight: 800; }
.blank-pad { padding: 2rem 1.5rem; }
.lvl-stat { text-align: center; padding: .75rem 1.25rem; background: var(--gray-50); border-radius: 8px; min-width: 80px; }

/* NIST 800-30 risk levels (RiskAnalysis::levelClass) — semantic, theme-stable */
.risk-lvl-pill { display: inline-block; min-width: 2rem; padding: .15rem .45rem; border-radius: var(--radius-full); color: var(--color-white); font-weight: 700; font-size: .8125rem; text-align: center; }
.risk-lvl-pill.risk-very_high { background: var(--color-danger); }
.risk-lvl-pill.risk-high      { background: var(--color-orange); }
.risk-lvl-pill.risk-moderate  { background: var(--color-warning); }
.risk-lvl-pill.risk-low       { background: var(--primary); }
.risk-lvl-pill.risk-very_low  { background: var(--color-success); }
.risk-lvl-pill.risk-none      { background: var(--gray-500); }
.lvl-text.risk-very_high { color: var(--color-danger); }
.lvl-text.risk-high      { color: var(--color-warning); }
.lvl-text.risk-moderate  { color: var(--color-warning); }
.lvl-text.risk-low       { color: var(--color-info); }
.lvl-text.risk-very_low  { color: var(--color-success); }
.lvl-text.risk-none      { color: var(--text-muted); }

/* Security settings (MFA / recovery codes) */
.input-compact { padding: .375rem .625rem; }
.input-spread { letter-spacing: .2em; }
.maxw-200 { max-width: 200px; }
.maxw-280 { max-width: 280px; }
.maxw-320 { max-width: 320px; }
.self-start { align-self: flex-start; }
.pt-xs { padding-top: .25rem; }
.qr-frame { padding: 8px; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .375rem; font-family: var(--font-mono); font-size: .875rem; }
.recovery-grid-boxed { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: 4px; padding: .75rem; margin: 0 0 .75rem; }
.recovery-code-chip { background: var(--bg-alt); padding: .375rem .75rem; border-radius: 4px; }
.callout-warning { background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius); }
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: .625rem .875rem;
}

/* Remediation/task view */
.td-tight { padding: .375rem .5rem; }
.minw-220 { min-width: 220px; }
.maxw-100 { max-width: 100px; }
.btn-bare { background: none; border: none; cursor: pointer; padding: .1rem .3rem; }
.btn-solid-success { background: var(--color-success); color: var(--color-white); border: none; }
.btn-soft-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  border: 1px solid var(--color-danger-border); }
.btn-soft-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.btn-soft-success { background: var(--color-success-bg); color: var(--color-success);      border: 1px solid var(--color-success-border); }
.btn-soft-info    { background: var(--color-info-bg);    color: var(--color-info);         border: 1px solid var(--color-info-border); }
.opacity-65 { opacity: .65; }
.frame-danger-border { border-color: var(--color-danger-border); }
.card-tint-warning { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.card-tint-success { border-color: var(--color-success-border); background: var(--color-success-bg); }
.pre-wrap { white-space: pre-wrap; }
.no-select { user-select: none; }
.q-num { font-size: .75rem; font-weight: 700; color: var(--text-muted); min-width: 20px; padding-top: .1rem; }
.response-box { font-size: .875rem; padding: .5rem .75rem; background: var(--bg-surface); border: 1px solid var(--gray-300); border-radius: 6px; line-height: 1.5; }

/* Onboarding wizard */
.ob-wrap { max-width: 680px; margin: 2.5rem auto; padding: 0 1rem 4rem; }
.ob-topbar { background: var(--bg-surface); border-bottom: 1px solid var(--border-color); padding: .875rem 1.5rem; }
.ob-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; }
.ob-stat { padding: .875rem 1.5rem; background: var(--gray-50); border: 1px solid var(--border-color); border-radius: var(--radius); min-width: 140px; }
.ob-stat-value { font-size: 2rem; font-weight: 700; color: var(--primary-text); line-height: 1; }
.ob-row { display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem; background: var(--gray-50); border: 1px solid var(--border-color); border-radius: var(--radius); }

/* S1.4: onboarding launch-step "next steps" (invite team, add BAs) */
.ob-nextsteps { text-align: left; }
.ob-nextstep { display: flex; align-items: center; gap: .75rem; padding: .75rem .875rem; margin-bottom: .5rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--transition), background var(--transition); }
.ob-nextstep:hover { border-color: var(--border-strong, var(--text-muted)); background: var(--bg-elevated, var(--bg-alt)); }
.ob-nextstep-icon { flex: none; color: var(--primary-text, var(--primary)); }
.ob-nextstep-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ob-nextstep-title { font-weight: 600; color: var(--text-primary); font-size: .9375rem; }
.ob-nextstep-sub { font-size: .8125rem; color: var(--text-muted); }
.ob-nextstep-arrow { flex: none; color: var(--text-muted); }
.ob-section { padding: 1.25rem 1.25rem 1rem; }

/* Numbered progress stepper */
.stepper { display: flex; gap: 0; align-items: flex-start; justify-content: center; margin-bottom: 2.5rem; }
.stepper-item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.stepper-rule { position: absolute; top: 17px; right: 50%; left: 0; height: 2px; background: var(--border-color); }
.stepper-rule-active { background: var(--primary); }
.stepper-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  border: 2px solid transparent;
}
.stepper-circle-active  { background: var(--primary);        color: var(--color-white); border-color: var(--primary); }
.stepper-circle-done    { background: var(--color-success);  color: var(--color-white); border-color: var(--color-success); }
.stepper-circle-pending { background: var(--bg-surface); color: var(--text-subtle); border-color: var(--gray-300); }
.stepper-label { font-size: .75rem; margin-top: .4rem; }
.stepper-label-active  { color: var(--primary-text); font-weight: 600; }
.stepper-label-done    { color: var(--color-success); }
.stepper-label-pending { color: var(--text-subtle); }

/* Sweep support */
.page-surface-gray { background: var(--gray-100); min-height: 100vh; }
.icon-disc-lg { width: 72px; height: 72px; }
.icon-disc-success { background: var(--color-success-bg); color: var(--color-success); }
.btn-xl-pad { font-size: 1.0625rem; padding: .75rem 2rem; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.maxw-480 { max-width: 480px; }
.mx-sm { margin-left: .5rem; margin-right: .5rem; }

/* Notification step dots (breach workflow checkmarks) */
.step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid transparent;
}
.step-dot-done   { background: var(--color-success-bg); border-color: var(--color-success); }
.step-dot-warn   { background: var(--color-warning-bg); border-color: var(--color-warning); }
.step-dot-danger { background: var(--color-danger-bg);  border-color: var(--color-danger); }
.frame-danger { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.icon-disc-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.rule-top-md { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-color); }
.lh-relaxed { line-height: 1.65; }
.table-mini { font-size: .8125rem; border-collapse: collapse; width: 100%; }
.th-mini { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--border-color); color: var(--text-muted); }
.td-mini { padding: .3rem .5rem; border-bottom: 1px solid var(--gray-100); }
.grid-autofill-200 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .4rem .75rem; }

/* Deadline status card (breach HHS deadline etc.) */
.deadline-card-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.deadline-card-date  { font-size: 1.5rem; font-weight: 700; }
.deadline-card-sub   { font-size: .875rem; margin-top: .25rem; }
.deadline-card-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.deadline-card-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.deadline-card-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-danger-text); }

/* Vertical event timeline (breach lifecycle etc.) */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline-rule { position: absolute; left: .4rem; top: 0; bottom: 0; width: 2px; background: var(--border-color); }
.timeline-item { position: relative; margin-bottom: 1rem; padding-left: .75rem; }
.timeline-dot {
  position: absolute;
  left: -1.1rem;
  top: .1rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
}
.timeline-dot-neutral { background: var(--text-muted);     box-shadow: 0 0 0 1px var(--text-muted); }
.timeline-dot-pending { background: var(--border-strong);  box-shadow: 0 0 0 1px var(--border-strong); }
.timeline-dot-success { background: var(--color-success);  box-shadow: 0 0 0 1px var(--color-success); }
.timeline-dot-warning { background: var(--color-warning);  box-shadow: 0 0 0 1px var(--color-warning); }
.timeline-dot-danger  { background: var(--color-danger);   box-shadow: 0 0 0 1px var(--color-danger); }

/* Status banner — signed/locked/draft strip on shared reports */
.status-banner {
  padding: .75rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .9375rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.status-banner-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.status-banner-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.status-banner-neutral { background: var(--gray-100);         border-color: var(--gray-300);             color: var(--text-secondary); }

/* Quoted/aside callout (left-rule) */
.quote-callout {
  margin-top: .5rem;
  padding: .625rem .75rem;
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
  border-radius: 0 4px 4px 0;
  font-size: .875rem;
  color: var(--text-secondary);
}

/* Bordered frame for grouped list content */
.frame { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.frame-row-head { padding: .75rem 1rem; background: var(--gray-50); border-bottom: 1px solid var(--border-color); font-size: .875rem; font-weight: 600; }
.frame-row { padding: .75rem 1rem; background: var(--bg); }
.frame-row + .frame-row { border-top: 1px solid var(--border-color); }
.frame-row-muted { background: var(--gray-50); }
.resize-y { resize: vertical; }

/* Misc text/layout utilities (global sweep) */
.fs-2xs { font-size: .625rem; }
.italic { font-style: italic; }
.break-all { word-break: break-all; }
.grid { display: grid; }
.summary-plain { list-style: none; }
.rule-top { border-top: 1px solid var(--border-color); padding-top: .5rem; margin-top: .25rem; }
.bg-gray-100 { background: var(--gray-100); }
.bg-alt-surface { background: var(--gray-50); }

/* Report page bits */
.mini-th { padding: .5rem; color: var(--text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.mini-th.ta-left { padding-left: 0; }
.report-footnote { margin-top: 2rem; padding: 1rem; border-top: 1px solid var(--border-color); font-size: .75rem; color: var(--text-muted); line-height: 1.6; }
.row-rule        td, .row-rule        th { border-bottom: 1px solid var(--border-color); }
.row-rule-strong td, .row-rule-strong th { border-bottom: 2px solid var(--border-color); }
.icon-disc { width: 64px; height: 64px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; }
.svg-inline { vertical-align: -.15em; margin-right: .3em; display: inline-block; }
.minw-200 { min-width: 200px; }
.upgrade-gate { max-width: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; }
.upgrade-gate-sub { max-width: 380px; margin: 0 0 1.75rem; }
.btn-lg-pad { font-size: 1rem; padding: .625rem 1.75rem; }

/* Vendor questionnaire (public, token-gated form) */
.vq-page { background: var(--gray-50); min-height: 100vh; padding: 2rem 1rem; font-family: var(--font-sans); }
.vq-wrap { max-width: 680px; margin: 0 auto; }
.vq-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
.vq-header { background: var(--primary); padding: 1.75rem 2rem; }
.vq-header-title { color: var(--color-white); margin: 0 0 .35rem; }
.vq-header-sub { color: color-mix(in srgb, var(--primary) 24%, var(--color-white)); }
.vq-question { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-100); }
.vq-question-label { display: block; font-size: .9375rem; font-weight: 600; color: var(--gray-800); margin-bottom: .6rem; line-height: 1.5; }
.vq-option { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; cursor: pointer; font-weight: 400; }
.vq-scale-option { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .8125rem; color: var(--text-muted); cursor: pointer; font-weight: 400; }
.vq-textarea { resize: vertical; }
.vq-emoji { font-size: 2.5rem; }
.vq-success-disc {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-success-bg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
}
.p-2xl { padding: 2.5rem; }

/* Auditor portal layout */
.auditor-wrap { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }
.auditor-topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

/* Underlined tab strip (auditor scopes etc.) */
.tab-strip {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}
.tab-strip-link {
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 400;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: -1px;
}
.tab-strip-link.active { font-weight: 600; color: var(--primary-text); border-bottom-color: var(--primary); }

/* Inline code chip (tokens, ids) */
.code-chip {
  background: var(--gray-100);
  color: var(--gray-800);
  padding: .15rem .4rem;
  border-radius: 4px;
  font-size: .8125rem;
  font-family: var(--font-mono);
}

/* Plain horizontal scroll (tables inside flush cards) */
.scroll-x { overflow-x: auto; }
.p-xl { padding: 1.5rem; }
.link-plain-color { text-decoration: none; }
/* First/last columns of a table inside a flush card align with the card header */
.card-flush .data-table th:first-child, .card-flush .data-table td:first-child { padding-left: 1.5rem; }
.card-flush .data-table th:last-child,  .card-flush .data-table td:last-child  { padding-right: 1.5rem; }

.w-280 { width: 280px; }

/* Global-sweep additions */
.svg-inline-lg { vertical-align: -.3em; margin-right: .4em; display: inline-block; }
.doc-list { font-size: .875rem; color: var(--text-secondary); margin: 0 0 1.75rem; padding-left: 1.25rem; line-height: 1.8; }
.eyebrow-subtle { font-size: .75rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .05em; }
.page-surface-light { background: var(--gray-50); min-height: 100vh; }
.col-w-100 { width: 100px; }
.col-w-160 { width: 160px; }
.maxw-960 { max-width: 960px; }
.maxw-160 { max-width: 160px; }
.section-rule-top { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.mb-0 { margin-bottom: 0; }
.mb-px { margin-bottom: 1px; }
.pb-px { padding-bottom: 1px; }
.maxw-600 { max-width: 600px; }
.maxw-680 { max-width: 680px; }
.maxw-740 { max-width: 740px; }
.maxw-800 { max-width: 800px; }
.maxw-860 { max-width: 860px; }
.maxw-900 { max-width: 900px; }
.eyebrow { font-size: .75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.p-cell { padding: .625rem .75rem; }
.m-opt { margin: .375rem 0 .375rem .25rem; }
.doc-h1 { font-size: 1.375rem; font-weight: 700; color: var(--primary-text); margin: 0 0 .75rem; }
.flex-2  { flex: 2; }
.minw-0  { min-width: 0; }
.my-xs   { margin-top: .25rem; margin-bottom: .25rem; }
.mb-2xs  { margin-bottom: .375rem; }
.list-indent { margin: 0 0 1rem; padding-left: 1.5rem; }
.th-light { text-align: left; padding: .5rem .75rem; color: var(--text-muted); font-weight: 500; }
/* Long-form document heading (docs / guides / blog) */
.doc-h2 { font-size: 1.125rem; font-weight: 600; color: var(--primary-text); margin: 2rem 0 .75rem; }

/* Wave-A additions */
.fs-2xl { font-size: 1.25rem; }
.ml-2xs { margin-left: .375rem; }
.ml-xs  { margin-left: .25rem; }
.ml-sm  { margin-left: .5rem; }
/* Letter-spacing utility for uppercase eyebrow/kicker labels. */
.ls-wide { letter-spacing: .04em; }
.input-mono { font-family: var(--font-mono); }
.link-plain { text-decoration: none; color: inherit; }
.auth-wrap-sm { width: 100%; max-width: 420px; margin: 2rem auto; padding: 0 1rem; }
.auth-center { display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); }
.page-surface { min-height: 100vh; background: var(--bg-alt); }
.blank-state { text-align: center; padding: 4rem 1rem; }
/* Table column width hints */
.col-w-80  { width: 80px; }
.col-w-90  { width: 90px; }
.col-w-110 { width: 110px; }
.col-w-140 { width: 140px; }
.auth-mfa-icon { text-align: center; margin-bottom: 1.25rem; }
.auth-success-state { text-align: center; }
.auth-success-icon { margin: 0 auto 1rem; width: fit-content; }
.auth-brand-logo-inline {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 2rem;
  text-decoration: none;
}

/* ---- App Layout (Dashboard) -------------------------------- */
.app-body { background: var(--bg-body); }
.app-layout { display: flex; min-height: 100vh; background: var(--bg-body); }
/* overflow-x: clip (not `overflow: hidden`) prevents horizontal overflow from
   wide tables without turning .app-main into a scroll/clip container — the
   latter clips the sticky topbar's absolutely-positioned org/user dropdowns and
   lets page-header content bleed through them. min-width:0 lets the flex child
   shrink so wide content scrolls inside .app-content instead of stretching. */
.app-main { flex: 1; min-width: 0; overflow-x: clip; background: var(--bg-body); }

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.sidebar-header {
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-header .nav-logo-text { color: var(--text-primary); font-size: 1rem; }
.sidebar-nav { padding: .75rem 0; flex: 1; }
.sidebar-nav ul { padding: 0 .5rem; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: 500;
  color: var(--sidebar-link-color);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  margin: 1px 0;
}
.sidebar-link:hover { background: var(--sidebar-link-hover-bg); color: var(--text-primary); }
.sidebar-link.active { background: var(--sidebar-link-active-bg); color: var(--sidebar-link-active-color); font-weight: 600; }
.sidebar-link-logout { color: var(--color-danger); }
.sidebar-link-logout:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.sidebar-divider { height: 1px; background: var(--sidebar-border); margin: .75rem .5rem; }

.app-topbar {
  height: 56px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.sidebar-toggle-btn { color: var(--text-muted); padding: .375rem; border-radius: var(--radius-sm); }
.sidebar-toggle-btn:hover { background: var(--bg-alt); color: var(--text-secondary); }
.topbar-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.topbar-alert {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .75rem;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-full);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--color-warning-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.topbar-alert:hover { background: var(--color-warning-border); color: var(--color-warning-text); }
.topbar-user { display: flex; align-items: center; gap: .625rem; }
/* .user-avatar removed 2026-07-23 — superseded by the .avatar / .avatar-{size}
   family that oh_avatar() emits; nothing referenced .user-avatar. */
.user-name { font-size: .875rem; font-weight: 500; color: var(--text-secondary); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.page-header h1 { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -.02em; }

/* ---- Stat widgets ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}
.stat-widget:hover { box-shadow: var(--shadow-md); }
.stat-widget-warn  { border-top: 3px solid var(--color-warning); }
.stat-widget-success { border-top: 3px solid var(--color-success); }
.stat-widget-value { font-size: 1.875rem; font-weight: 700; line-height: 1; color: var(--text-primary); }
.stat-widget-value-link { color: inherit; text-decoration: none; }
.stat-widget-value-link:hover { color: inherit; text-decoration: underline; }
.stat-widget-label { font-size: .8125rem; font-weight: 500; color: var(--text-muted); margin-top: .375rem; }
.stat-widget-sub   { font-size: .75rem; color: var(--primary); margin-top: .5rem; }
.stat-widget-warn .stat-widget-value    { color: var(--warning); }
.stat-widget-success .stat-widget-value { color: var(--success); }

/* ---- Unified stats-pill row (Findings, Remediation, Change Log, Incidents,
   Breaches, Risk Register, Access Reviews, Vendors all share this look) ---- */
.risk-summary-row,
.remediation-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: 1.25rem;
}
.risk-pill,
.rem-stat-pill {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 92px;
  padding: .625rem .875rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius, 8px);
  text-decoration: none;
  transition: box-shadow var(--transition-fast, .12s ease), border-color var(--transition-fast, .12s ease);
}
a.risk-pill:hover,
a.rem-stat-pill:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.risk-pill.risk-pill-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
/* Active state for a clickable .pill used as a filter toggle. */
.pill.pill-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
a.pill:hover { box-shadow: var(--shadow-sm); }
/* Findings pills use --pill-bg/--pill-color custom props for a tinted fill. */
.risk-pill { background: var(--pill-bg, var(--bg-surface)); }
.risk-pill-count,
.rem-stat-count { font-size: 1.375rem; font-weight: 700; line-height: 1; color: var(--pill-color, var(--text-primary)); }
.risk-pill-label,
.rem-stat-label { font-size: .75rem; font-weight: 500; color: var(--text-muted); }

.welcome-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.welcome-card-icon { flex-shrink: 0; }
.welcome-card h2 { font-size: 1.25rem; color: var(--text-primary); margin-bottom: .5rem; }
.welcome-card p { margin-bottom: 1.5rem; }
.getting-started-steps { display: flex; flex-direction: column; gap: 1rem; }
.gs-step {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
}
.gs-step.gs-done { opacity: .6; }
.gs-num {
  width: 28px; height: 28px;
  background: var(--primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.gs-done .gs-num { background: var(--success); }
.gs-step strong { display: block; font-size: .9375rem; color: var(--gray-900); margin-bottom: .25rem; }
.gs-step p { font-size: .875rem; margin-bottom: 0; }

/* ---- Page Hero (inner pages) ------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 3.5rem;
  background: var(--hero-gradient);
  border-bottom: 1px solid var(--gray-200);
  text-align: center;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { max-width: 760px; margin: .75rem auto 1.25rem; color: var(--gray-900); }
.page-hero-sub { font-size: 1.125rem; max-width: 680px; margin: 0 auto; }

/* ---- Product page ------------------------------------------ */
/* Every section paints an opaque background so the page backdrop never shows
   through between sections — the star field stays confined to the hero. The
   two variants alternate between subtly different solid surfaces so adjacent
   sections still read as distinct bands. */
.product-section { padding: 6rem 0; background: var(--bg-surface); }
.product-section-alt { background: var(--bg-body); }
/* Hero "at a glance" capability cards — link into each product section.
   One row of four on desktop, 2×2 on tablets, stacked on phones. */
.product-glance { max-width: 1060px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .product-glance { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .product-glance { grid-template-columns: 1fr; } }
.product-glance-card {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.product-glance-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.06));
}
.product-glance-card strong { margin-bottom: .25rem; }
.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.product-row-reverse { direction: rtl; }
.product-row-reverse > * { direction: ltr; }
.product-text .section-label { margin-bottom: .75rem; }
.product-text h2 { margin-bottom: 1rem; }
.product-text > p { margin-bottom: 1.5rem; }
.feature-list { display: flex; flex-direction: column; gap: 1rem; }
.feature-list li { display: flex; gap: .875rem; }
.feature-list-icon {
  width: 22px; height: 22px;
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-white));
  color: var(--success);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-list strong { display: block; color: var(--gray-900); margin-bottom: .25rem; }
.feature-list p { font-size: .9rem; margin-bottom: 0; }

.product-card-demo {
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}
.demo-progress-header { display: flex; justify-content: space-between; font-size: .875rem; font-weight: 500; color: var(--gray-600); margin-bottom: .375rem; }
.demo-pct { font-weight: 700; color: var(--gray-900); }
.demo-progress-bar-wrap { height: 8px; background: var(--gray-100); border-radius: 4px; margin-bottom: 1rem; overflow: hidden; }
.demo-progress-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
/* Static demo widget fills (product page mockup) */
.demo-fill-a { width: 78%; background: var(--primary-dark); }
.demo-fill-b { width: 91%; background: var(--accent); }
.demo-fill-c { width: 64%; background: var(--color-purple); }
.demo-finding { display: flex; align-items: center; gap: .625rem; padding: .625rem; background: var(--gray-50); border-radius: var(--radius-sm); margin-bottom: .5rem; font-size: .875rem; color: var(--gray-600); }
.finding-badge { padding: .2rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 700; }
.finding-high   { background: var(--color-danger-bg); color: var(--danger); }
.finding-medium { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-white)); color: var(--warning); }
.demo-section-label { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-400); margin-bottom: 1rem; }
.demo-check-item { padding: .625rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: .375rem; display: flex; align-items: center; gap: .625rem; }
.demo-check-done::before { content: '✓'; color: var(--success); font-weight: 700; }
.demo-check-warn::before { content: '⚠'; color: var(--warning); }
.demo-check-fail::before { content: '✕'; color: var(--danger); }
.demo-check-done { background: var(--color-success-bg); color: var(--color-success-text); }
.demo-check-warn { background: var(--color-warning-bg); color: var(--color-warning-text); }
.demo-check-fail { background: var(--color-danger-bg); color: var(--color-danger-text); }

.risk-matrix { background: var(--color-white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); }
.risk-matrix-label { font-size: .875rem; font-weight: 600; color: var(--gray-500); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.risk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .375rem; }
.risk-cell { padding: .75rem .5rem; border-radius: var(--radius-sm); text-align: center; font-size: .75rem; font-weight: 700; }
.risk-critical { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-white)); color: var(--color-danger-text); }
.risk-high     { background: color-mix(in srgb, var(--color-warning) 14%, var(--color-white)); color: var(--color-warning-text); }
.risk-medium   { background: var(--color-warning-bg); color: var(--color-warning-text); }
.risk-low      { background: var(--color-success-bg); color: var(--color-success-text); }

.demo-task-item { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-radius: var(--radius-sm); margin-bottom: .5rem; font-size: .9rem; }
.task-status { padding: .2rem .625rem; border-radius: 100px; font-size: .75rem; font-weight: 600; flex-shrink: 0; }
.demo-task-done     { background: var(--color-success-bg); }
.task-status.done   { background: color-mix(in srgb, var(--color-success) 14%, var(--color-white)); color: var(--color-success-text); }
.demo-task-progress { background: var(--primary-light); }
.task-status.progress { background: color-mix(in srgb, var(--primary) 14%, var(--color-white)); color: var(--primary-dark); }
.demo-task-open     { background: var(--gray-50); }
.task-status.open   { background: var(--gray-200); color: var(--gray-600); }

.report-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.report-feature {
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
}
.report-feature-icon { font-size: 2rem; margin-bottom: .875rem; }
.report-feature h3 { margin-bottom: .5rem; }

/* ---- About page -------------------------------------------- */
.mission-section { padding: 6rem 0; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.mission-statement h2 { margin-bottom: 1rem; }
.mission-statement p + p { margin-top: 1rem; }
.mission-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Scoped to .mission-stats so the marketing "big number" tile doesn't collide
   with the dashboard mini-stat .stat-card (defined later with a flex/max-width
   layout that was capping these). Surface token instead of var(--color-white) so it adapts
   to dark mode. */
.mission-stats .stat-card {
  padding: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.stat-number { font-size: 2.25rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: .375rem; }
.stat-label  { font-size: .875rem; color: var(--gray-500); }

.values-section { padding: 6rem 0; background: var(--gray-50); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.value-card { padding: 1.75rem; background: var(--color-white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.value-icon { font-size: 2rem; margin-bottom: 1rem; }

.team-section { padding: 6rem 0; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.team-card { text-align: center; padding: 1.75rem; background: var(--color-white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.team-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 auto 1rem;
}
.team-title { font-size: .8125rem; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.team-bio  { font-size: .875rem; color: var(--gray-500); line-height: 1.6; }

.security-section { padding: 6rem 0; background: var(--gray-50); }
.security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.security-item { padding: 1.5rem; background: var(--color-white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); }
.security-item h4 { margin-bottom: .5rem; color: var(--gray-900); }

/* ---- Responsive -------------------------------------------- */
/* 1100–1280px: tighten the gap so the headline column keeps room; the grid
   tracks already prevent overlap, this just keeps the text comfortable. */
@media (max-width: 1280px) {
  .hero-layout { gap: 1.5rem; }
}

/* Below 1100px the screenshot column is dropped entirely and the headline goes
   full-width — a single-column hero. With no screenshot in the grid, there is
   nothing for the text to overlap. */
@media (max-width: 1100px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero-screenshot { display: none; }
  .footer-container { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { padding: 2rem 1rem; }

  .product-row { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-row-reverse { direction: ltr; }
  .mission-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-menu { display: none; }
  /* The bar's CTA links/buttons overflow the 390px viewport (they push the
     row to ~513px), so drop them here — they're mirrored into the collapsed
     menu as .nav-menu-cta. The theme-toggle (a control, not a CTA) stays. */
  .nav-actions .btn, .nav-actions .nav-link { display: none; }
  .nav-toggle { display: flex; }
  .nav-menu.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--bg-surface);
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }
  .nav-menu.open .nav-menu-cta { display: block; }
  /* Visual divider before the mirrored CTAs. */
  .nav-menu.open .nav-menu-cta:first-of-type {
    margin-top: .5rem; padding-top: .75rem;
    border-top: 1px solid var(--border-color);
  }
  .site-header { position: relative; }

  .hero { padding: 3rem 0 2.5rem; }
  .cta-banner-content { flex-direction: column; text-align: center; }
  .features-grid, .testimonials-grid, .pricing-grid { grid-template-columns: 1fr; }

  /* Mobile sidebar behavior lives in the transform-based block further down
     (~line 3019). The old display:none rules here killed its slide transition. */
  .footer-container { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .steps { grid-template-columns: 1fr; }
}

/* ---- Theme Toggle Button ------------------------------------------- */
.theme-toggle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--gray-500);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--gray-100); color: var(--gray-700); }
.theme-icon-moon { display: block; }
.theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun  { display: block; }

/* ---- Sidebar admin label ------------------------------------------- */
.sidebar-section-label {
  padding: 16px 20px 4px;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-top: .25rem;
}

/* ---- Sidebar collapsible groups ------------------------------------ */
.sidebar-group { border: none; }
.sidebar-group summary.sidebar-group-label {
  list-style: none;
  cursor: pointer;
  padding: .3rem .75rem .3rem 1rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  margin-top: .375rem;
}
.sidebar-group summary.sidebar-group-label::-webkit-details-marker { display: none; }
.sidebar-group summary.sidebar-group-label::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.sidebar-group[open] summary.sidebar-group-label::after { transform: rotate(90deg); }
.sidebar-group summary.sidebar-group-label:hover { color: var(--text-secondary); }
.sidebar-group > ul { margin: 0; padding: 0; }

/* ---- Admin / Questions table --------------------------------------- */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.admin-toolbar .form-input { max-width: 260px; }
/* ---- Filter row / select ---- */
.filter-row {
  display: flex; flex-wrap: wrap; gap: .625rem; align-items: center;
  margin-bottom: 1.25rem;
}
.filter-select {
  padding: .5rem .75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .625rem center;
  padding-right: 2rem;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: auto; min-width: 140px; max-width: 200px;
}
.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  /* Use the theme-aware focus-ring token (higher contrast, visible in dark mode)
     instead of a hard-coded 0.1-alpha ring that was near-invisible. WCAG 2.4.11. */
  box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent));
}

/* ---- Tables ---- */
.data-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
/* Horizontal scroll for a wide row (e.g. a multi-tab bar) on narrow screens,
   instead of wrapping to two lines. */
.scroll-x-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead th {
  background: var(--bg-alt);
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  text-align: left;
}
/* Legacy selector support */
.data-table th {
  padding: .625rem 1rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-color);
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-fast);
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody td { padding: .75rem 1rem; font-size: .875rem; color: var(--text-secondary); vertical-align: middle; }
.data-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  vertical-align: top;
  font-size: .875rem;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-hover); }
.data-table .q-code { font-family: var(--font-mono); font-size: .8125rem; color: var(--primary); font-weight: 600; white-space: nowrap; }
.data-table .q-text { max-width: 380px; }
.data-table .q-text p { font-size: .875rem; margin-bottom: 0; color: var(--gray-700); }
.scope-badge {
  display: inline-block;
  padding: .2rem .625rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Scope variants resolve from the token triads (dark handled by the remap);
   location_ephi keeps a bespoke orange pair — no orange status token exists. */
.scope-org, .scope-badge-org           { background: var(--primary-light);    color: var(--primary-text); }
.scope-location, .scope-badge-location { background: var(--color-success-bg); color: var(--color-success); }
.scope-ephi, .scope-badge-ephi         { background: var(--color-purple-bg);  color: var(--color-purple); }
.scope-location_ephi  { background: color-mix(in srgb, var(--color-orange) 8%, var(--color-white)); color: var(--color-orange); }
[data-theme="dark"] .scope-location_ephi { background: color-mix(in srgb, var(--color-orange) 15%, transparent); color: color-mix(in srgb, var(--color-orange) 45%, var(--color-white)); }
.status-active   { color: var(--success); font-weight: 600; }
.status-inactive { color: var(--gray-400); }

.import-zone {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  background: var(--gray-50);
  margin-bottom: 1rem;
  transition: border-color var(--transition), background var(--transition);
}
.import-zone:hover, .import-zone.dragover {
  border-color: var(--primary-light);
  background: var(--primary-light);
}
.import-zone p { font-size: .9375rem; margin-bottom: .75rem; }
.table-empty {
  text-align: center;
  padding: 3rem;
  color: var(--gray-400);
}

/* ---- Dark Mode ------------------------------------------------------ */
/* Dark-mode TOKEN remap moved to tokens.css — only component-level dark rules
   remain below. New components should not need any: use the tokens. */
/* Base */
[data-theme="dark"] body {
  background: var(--bg-body);
  color: var(--text-primary);
}
[data-theme="dark"] p { color: var(--text-muted); }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6 { color: var(--text-primary); }
/* Content links only — a button-styled link (.btn) keeps its own text color;
   otherwise this recolors .btn-primary anchors (marketing CTAs) blue-on-blue. */
[data-theme="dark"] a:not(.btn) { color: var(--primary-text); }
[data-theme="dark"] a:not(.btn):hover { color: var(--primary-soft); }

/* Navigation */
[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--bg-inverse) 92%, transparent);
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .nav-logo-text { color: var(--text-primary); }
[data-theme="dark"] .nav-link { color: var(--text-muted); }
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active { color: var(--text-primary); background: rgba(255,255,255,.07); }
[data-theme="dark"] .nav-toggle span { background: var(--text-muted); }
[data-theme="dark"] .nav-menu.open {
  background: var(--bg-surface);
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .theme-toggle { color: var(--text-muted); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.07); color: var(--text-secondary); }

/* Buttons */
[data-theme="dark"] .btn-outline {
  color: var(--primary-text);
  border-color: var(--primary-text);
}
[data-theme="dark"] .btn-outline:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary-soft); }
[data-theme="dark"] .btn-ghost {
  background: rgba(255,255,255,.06);
  color: var(--text-secondary);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: var(--text-primary); }
[data-theme="dark"] .btn-passkey {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .btn-passkey:hover { background: var(--border-color); }

/* Hero */
/* .hero / .hero-grid / .hero-glow-* dark values come from the token remap in
   tokens.css (--hero-*); only text-level overrides remain here. */
[data-theme="dark"] .hero-title { color: var(--text-primary); }
[data-theme="dark"] .hero-subtitle { color: var(--text-muted); }
[data-theme="dark"] .hero-note { color: var(--text-disabled); }
[data-theme="dark"] .hero-badge {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--text-muted);
}

/* Cards and surfaces */
[data-theme="dark"] .feature-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .security-item,
[data-theme="dark"] .team-card,
[data-theme="dark"] .report-feature,
[data-theme="dark"] .product-card-demo,
[data-theme="dark"] .risk-matrix {
  background: var(--bg-surface);
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .feature-card h3,
[data-theme="dark"] .testimonial-card footer strong,
[data-theme="dark"] .security-item h4,
[data-theme="dark"] .team-card h3 { color: var(--text-primary); }
[data-theme="dark"] .testimonial-card p { color: var(--text-muted); }

/* Section backgrounds */
[data-theme="dark"] .how-it-works,
[data-theme="dark"] .pricing-preview,
[data-theme="dark"] .compare-section,
[data-theme="dark"] .integrations-section,
/* Dark mode: product sections alternate between two solid surfaces (plain =
   raised var(--bg-surface), -alt = base var(--bg-body)) so nothing shows through between them.
   .values-section / .security-section keep their raised tint over the body. */
[data-theme="dark"] .product-section { background: var(--bg-surface); }

[data-theme="dark"] .values-section,
[data-theme="dark"] .security-section { background: var(--bg-surface); }
[data-theme="dark"] .social-proof { border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .logo-pill { background: var(--bg-surface); border-color: rgba(255,255,255,.08); color: var(--text-subtle); }

/* Section headings */
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .step-content h3,
[data-theme="dark"] .page-hero h1 { color: var(--text-primary); }
[data-theme="dark"] .step-number { color: var(--border-color); }
[data-theme="dark"] .page-hero {
  /* gradient comes from the --hero-gradient token remap */
  border-bottom-color: rgba(255,255,255,.06);
}

/* Forms — base colors handled by variables; keeping specific overrides */
[data-theme="dark"] .form-check-label { color: var(--text-muted); }
[data-theme="dark"] .form-label-link { color: var(--primary-text); }
[data-theme="dark"] .input-toggle-vis { color: var(--text-disabled); }
[data-theme="dark"] .input-toggle-vis:hover { color: var(--text-muted); }
[data-theme="dark"] .form-checkbox { border-color: rgba(255,255,255,.2); background: var(--bg-surface); }
[data-theme="dark"] .auth-divider { color: var(--text-disabled); }
[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after { background: var(--border-color); }

/* Auth pages */
[data-theme="dark"] .auth-body { background: var(--bg-body); }
[data-theme="dark"] .auth-form-panel { background: var(--bg-body); }
[data-theme="dark"] .auth-panel-solo { background: var(--bg-surface); border: 1px solid rgba(255,255,255,.08); }
[data-theme="dark"] .auth-title { color: var(--text-primary); }
[data-theme="dark"] .auth-subtitle { color: var(--text-subtle); }
[data-theme="dark"] .auth-switch { color: var(--text-subtle); }
[data-theme="dark"] .auth-switch a { color: var(--primary-text); }

/* Alerts — handled by CSS variables */

/* App layout — dark mode handled by CSS variables above */
[data-theme="dark"] .gs-step strong { color: var(--text-primary); }

/* Footer */
[data-theme="dark"] .site-footer { background: var(--bg-body); }

/* Admin / questions table — dark mode handled by CSS variables */
[data-theme="dark"] .data-table .q-text p { color: var(--text-muted); }
[data-theme="dark"] .import-zone {
  border-color: rgba(255,255,255,.12);
  background: var(--bg-surface);
}
[data-theme="dark"] .import-zone:hover,
[data-theme="dark"] .import-zone.dragover {
  border-color: var(--primary-text);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

/* Pricing */
[data-theme="dark"] .pricing-price span,
[data-theme="dark"] .pricing-header h3 { color: var(--text-primary); }
[data-theme="dark"] .pricing-features li {
  border-bottom-color: rgba(255,255,255,.06);
  color: var(--text-muted);
}
[data-theme="dark"] .pricing-note { color: var(--text-disabled); }
[data-theme="dark"] .pricing-card-featured { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }

/* Screenshot mockup */
[data-theme="dark"] .screenshot-frame { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06); }
[data-theme="dark"] .screenshot-header { background: var(--bg-body); border-bottom-color: rgba(255,255,255,.06); }
[data-theme="dark"] .mock-content { background: var(--bg-body); }
[data-theme="dark"] .mock-header-bar { background: var(--bg-surface); }

/* ---- Tabs ---------------------------------------------------------- */
.tabs { }
.tab-list {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid var(--border-color);
  padding: 0 0 0 .25rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  margin-bottom: -2px;
  cursor: pointer;
}
.tab-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.tab-btn.active { color: var(--primary-text); border-bottom-color: var(--primary); font-weight: 600; }
.tab-count {
  font-size: .75rem;
  padding: .1rem .4rem;
  border-radius: var(--radius-full);
  background: var(--bg-alt);
  color: var(--text-muted);
  margin-left: .125rem;
}
.tab-btn.active .tab-count { background: var(--primary-light); color: var(--primary-text); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 150ms ease; }

/* ---- Settings cards ------------------------------------------------ */
.settings-card,
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}
/* Danger-zone card — destructive sections (account closure, etc.). */
.card-danger { border-color: var(--color-danger-border); }
.settings-card:hover,
.card:hover { box-shadow: var(--shadow); }
@media (max-width: 768px) {
  .settings-card, .card { padding: 1rem; }
}

/* Card variants (component library). `.settings-card` is a legacy alias of
   `.card` — prefer `.card` in new code. */
.card-pad-sm { padding: .875rem 1rem; }
.card-pad-lg { padding: 2rem; }
.card-flush  { padding: 0; }            /* for cards whose content is a table */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.card-header h2, .card-header h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.card-flush .card-header { padding: 1rem 1.25rem; margin: 0; border-bottom: 1px solid var(--border-color); }
/* Card header/body regions referenced by templates but previously undefined
   (rendered unstyled). .settings-card-header mirrors .card-header's row layout
   and adds a divider; the *-body classes are simple content regions (the
   parent .card/.settings-card supplies padding). */
.settings-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--border-color);
}
.card-body, .settings-card-body, .welcome-card-body { display: block; }

/* ---- Pill family (token-driven status badges) ----------------------------
   One set for every status chip. Colors come ONLY from the status token
   triads, so dark mode needs no extra rules. `.badge-*` / `.scope-badge`
   remain as legacy aliases — prefer `.pill` in new code. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .2em .7em;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
/* 2026: a state dot in currentColor — encodes state in form, not just text
   (docs/style-guide-2026.html §Status pills). Token-driven, so it re-themes. */
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pill-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.pill-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.pill-danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-danger-text); }
.pill-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info); }
.pill-neutral { background: var(--bg-alt);           border-color: var(--border-color);         color: var(--text-muted); }
.pill-primary { background: var(--primary-light);    border-color: transparent;                 color: var(--primary-text); }

/* ---- Dialog (native <dialog> component classes) ---------------------------
   Extracted from the inline-styled modals; pairs with the existing
   data-modal-open / data-modal-close bindings in app.js. */
.dialog {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  background: var(--bg-surface);
  color: var(--text-primary);
}
.dialog::backdrop { background: var(--overlay, color-mix(in srgb, var(--bg-inverse) 50%, transparent)); }
.dialog-body { padding: 1.5rem; }
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.dialog-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.dialog-actions {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}

/* ---- Form layout helpers --------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
}

/* ---- Page header action slot ----------------------------------------------- */
.page-header-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* ---- Data table extras -------------------------------------------------------
   `body.density-compact` is toggled by the [data-density-toggle] binding in
   app.js (topbar user menu). (A `.data-table-sticky` sticky-header rule lived
   here too but had no markup consumer — removed 2026-07-23.) */
body.density-compact .data-table th,
body.density-compact .data-table td { padding: .375rem .625rem; }

/* ---- Role checkbox grid -------------------------------------------- */
.role-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem;
}
.role-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .625rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  font-size: .875rem;
  color: var(--gray-700);
}
.role-checkbox-item:hover { background: var(--gray-50); border-color: var(--gray-300); }
.role-checkbox-item input[type="checkbox"]:checked ~ span { color: var(--primary); font-weight: 500; }
.role-checkbox-item:has(input:checked) { background: var(--primary-light); border-color: color-mix(in srgb, var(--primary) 24%, var(--color-white)); }

/* ---- Modal --------------------------------------------------------- */
/* .modal-overlay / .modal-box removed (2026-06-17, UI review D7): the three
   pages that used them (settings locations / ephi / organization) now use the
   canonical native <dialog class="dialog"> component. */

/* Dark mode: tabs and settings-card handled by CSS variables */

/* Dark mode: role checkbox grid */
[data-theme="dark"] .role-checkbox-item { border-color: rgba(255,255,255,.08); color: var(--text-muted); }
[data-theme="dark"] .role-checkbox-item:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .role-checkbox-item:has(input:checked) { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }

/* ==========================================================================
   Assessment view
   ========================================================================== */

/* Header row */
/* .assessment-view-header layout removed (S3.2): the header now uses the
   canonical .page-header. The content classes below still style its inner parts. */
.assessment-view-meta h1 { font-size: 1.375rem; }
.assessment-view-sub { font-size: .875rem; color: var(--gray-500); margin-top: .25rem; }
.assessment-view-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }

/* Status badges retired 2026-07-23 — fully merged into the .pill family
   (see .pill / .pill-{success,warning,danger,info,neutral,primary}). */

/* ---- Progress bar ---- */
.assessment-progress {
  display: flex; align-items: center; gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.assessment-progress-bar {
  flex: 1; height: 6px;
  background: var(--border-color);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.assessment-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-text));
  border-radius: var(--radius-full);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.assessment-progress-label { font-size: .8125rem; color: var(--text-muted); white-space: nowrap; }
/* Compact inline progress bar (assessment list rows) — width set via data-bar-width */
.mini-progress-fill { height: 4px; background: var(--primary); border-radius: var(--radius-sm); }

/* Part 2 #6: assessment velocity sparkline (answers/day, last 14 days).
   Bar heights are set from data-bar-height in a nonced page script. */
.velocity-sparkline {
  display: flex; align-items: flex-end; gap: 3px;
  height: 48px; padding: .25rem 0;
}
.velocity-bar {
  flex: 1 1 0; min-width: 4px; height: 4%;
  background: var(--primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.velocity-bar-empty { background: var(--border-color); }
/* S4.1: near-done completion nudge on the assessment view */
.assessment-nearly-done { margin: -.5rem 0 1.25rem; font-size: .875rem; color: var(--text-secondary); }
.assessment-nearly-done[hidden], .assessment-all-answered[hidden] { display: none; }
/* All-answered cue — success-tinted; appears live when the last question lands. */
.assessment-all-answered {
  margin: -.5rem 0 1.25rem; padding: .5rem .75rem;
  font-size: .875rem; color: var(--color-success);
  background: var(--color-success-bg); border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
}
/* UX A2: sticky position indicator — stays visible while answering so the user
   keeps a sense of where they are after scrolling/filtering. Sits just below
   the 64px app top bar. */
.assessment-position {
  position: sticky;
  top: 56px; /* flush under the 56px .app-topbar (was 64 — left an 8px gap) */
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .875rem;
  margin-bottom: .75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.assessment-position-name  { font-weight: 600; color: var(--text-primary); }
.assessment-position-count { font-size: .8125rem; color: var(--text-muted); }

/* UX A3: prev/next section pager at the foot of each category panel. */
.section-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

/* UX A1: resume-jump hint above the progress bar. */
.assessment-resume-hint {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1rem; padding: .5rem .75rem;
  font-size: .875rem; color: var(--text-secondary);
  background: var(--primary-light); border-radius: var(--radius);
}
.assessment-resume-hint svg { color: var(--primary-text); flex-shrink: 0; }
.assessment-resume-hint a { margin-left: auto; white-space: nowrap; }

/* P3 #13: policy acknowledgments */
.policy-ack { margin-bottom: 1.25rem; }
.policy-ack-me { padding: .625rem .75rem; background: var(--color-warning-bg, var(--bg-alt)); border: 1px solid var(--color-warning-border, var(--border-color)); border-radius: var(--radius-md); }

/* P2 #8: persistent setup hub */
.setup-hub { margin-bottom: 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: .625rem .875rem; background: var(--bg-alt); }
.setup-hub-summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--text-primary); list-style: none; }
.setup-hub-summary::-webkit-details-marker { display: none; }
.setup-hub-count { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--text-muted); background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: .05rem .5rem; }
.setup-hub-count.is-complete { color: var(--color-success); border-color: var(--color-success-border, var(--border-color)); }
.setup-hub-list { list-style: none; margin: .625rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.setup-hub-item { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.setup-hub-check { flex: none; color: var(--text-muted); }
.setup-hub-item.is-done .setup-hub-check { color: var(--color-success); }
.setup-hub-item.is-done .setup-hub-label { color: var(--text-muted); }
.setup-hub-label { color: var(--text-brand, var(--primary)); text-decoration: none; }
.setup-hub-label:hover { text-decoration: underline; }

/* P2 #5: saved views (per-user filter presets) */
.saved-views { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.saved-views-label { font-size: .8125rem; font-weight: 600; color: var(--text-muted); }
.saved-views-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.saved-view-chip { display: inline-flex; align-items: center; gap: .15rem; border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: .1rem .25rem .1rem .6rem; background: var(--bg-alt); }
.saved-view-chip-link { font-size: .8125rem; color: var(--text-secondary); text-decoration: none; }
.saved-view-chip-link:hover { color: var(--text-primary); }
.saved-view-chip-del { background: transparent; border: 0; color: var(--text-subtle, var(--text-muted)); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; }
.saved-view-chip-del:hover { color: var(--color-danger); }

/* P1 #4: list/board view toggle + remediation kanban */
.view-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--radius-full); overflow: hidden; }
.view-toggle-btn { padding: .25rem .75rem; font-size: .8125rem; color: var(--text-secondary); text-decoration: none; }
.view-toggle-btn.is-active { background: var(--primary); color: var(--color-white); }
.rem-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; align-items: start; }
@media (max-width: 900px) { .rem-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .rem-board { grid-template-columns: 1fr; } }
.rem-board-col { background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: .625rem; }
.rem-board-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.rem-board-count { font-size: .8125rem; font-weight: 600; color: var(--text-muted); }
.rem-board-drop { display: flex; flex-direction: column; gap: .5rem; min-height: 2.5rem; border-radius: var(--radius-md); transition: background var(--transition); }
.rem-board-drop.is-drop-target { background: var(--primary-light); outline: 2px dashed var(--primary); outline-offset: -2px; }
.rem-board-card { background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: .625rem .75rem; cursor: grab; }
.rem-board-card[draggable="true"]:active { cursor: grabbing; }
.rem-board-card.is-dragging { opacity: .5; }
.rem-board-card--overdue { border-left: 3px solid var(--color-danger); }
.rem-board-card-title { display: block; font-size: .875rem; font-weight: 600; color: var(--text-primary); text-decoration: none; margin-bottom: .35rem; }
.rem-board-card-title:hover { text-decoration: underline; }
.rem-board-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .75rem; color: var(--text-muted); }
.rem-board-card-assignee, .rem-board-card-due { white-space: nowrap; }

/* P1 #3: notification center */
.notif-filter { display: flex; gap: .5rem; margin-bottom: 1rem; }
.notif-filter-chip { background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: .25rem .75rem; font-size: .8125rem; color: var(--text-secondary); cursor: pointer; }
.notif-filter-chip.is-active { background: var(--primary); color: var(--color-white); border-color: var(--primary); }
.notif-filter-n { opacity: .75; margin-left: .15rem; }
.notif-page-item { display: block; color: inherit; text-decoration: none; }
.notif-page-item--unread { background: var(--primary-light); }
.notif-page-item:hover .notif-row { background: var(--bg-alt); }
.notif-row { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .875rem; border-bottom: 1px solid var(--border-color); }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: .35rem; background: var(--border-color); }
.notif-page-item--unread .notif-dot { background: var(--primary); }
.notif-main { flex: 1; min-width: 0; }
.notif-title { font-size: .875rem; font-weight: 500; color: var(--text-primary); margin-bottom: .2rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.notif-page-item--unread .notif-title { font-weight: 600; }
.notif-tag { flex: none; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: .05rem .35rem; }

/* P1 #2: pre-flight "ready to complete?" checklist */
.completion-preflight { margin: 0 0 1.25rem; padding: .75rem .875rem; background: var(--color-warning-bg, var(--bg-alt)); border: 1px solid var(--color-warning-border, var(--border-color)); border-radius: var(--radius-lg); }
.completion-preflight-head { display: flex; align-items: center; gap: .5rem; color: var(--color-warning-text, var(--text-primary)); margin-bottom: .375rem; }
.completion-preflight-head strong { color: var(--text-primary); }
.completion-preflight-list { list-style: none; margin: 0 0 .375rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.completion-preflight-item { background: transparent; border: 0; padding: .1rem 0; font-size: .875rem; font-weight: 500; color: var(--text-brand, var(--primary)); cursor: pointer; text-align: left; }
.completion-preflight-item:hover { text-decoration: underline; }

/* P1 #1: team progress (per-person assignment overview) */
/* #2c: quiet grouping label over the collapsible insight panels (velocity +
   team progress) so they read as one cluster, not loose stacked widgets. */
.assessment-insights-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 .5rem; }
.team-progress { margin: 0 0 1.25rem; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: .625rem .875rem; background: var(--bg-alt); }
.team-progress-summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--text-primary); list-style: none; }
.team-progress-summary::-webkit-details-marker { display: none; }
.team-progress-count { margin-left: auto; font-size: .8125rem; font-weight: 500; color: var(--text-muted); }

/* Risk-treatment badges (S3.1). Soft token triads, matching .pill/.risk-badge —
   the --color-*-bg/-text tokens carry correct light AND dark values, so there
   are no raw hex and no separate dark-mode rules (the old solid fills used white
   text, which under-contrasted on the lightened dark-mode fills). */
.treatment-badge { display: inline-block; padding: .1rem .5rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 600; }
.treatment-badge-mitigate { background: var(--color-info-bg);    color: var(--color-info); }
.treatment-badge-accept   { background: var(--color-warning-bg); color: var(--color-warning-text); }
.treatment-badge-transfer { background: var(--color-purple-bg);  color: var(--color-purple); }
.treatment-badge-avoid    { background: var(--color-danger-bg);  color: var(--color-danger-text); }

/* Post-completion wayfinding banner (S1.1): what the assessment produced + next steps */
.assessment-complete-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; margin: 1rem 0 1.5rem; padding: .875rem 1rem;
  background: var(--color-success-bg); border: 1px solid var(--color-success-border);
  border-radius: var(--radius-lg);
}
.assessment-complete-main { display: flex; align-items: center; gap: .625rem; color: var(--color-success); min-width: 0; }
.assessment-complete-main strong { color: var(--text-primary); }
.assessment-complete-main span { color: var(--text-secondary); font-size: .9375rem; }
.assessment-complete-actions { display: flex; flex-wrap: wrap; gap: .5rem; flex: none; }

/* Question subcategory section */
.question-subcategory { margin-bottom: 2rem; }
.question-subcategory-title {
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-400);
  padding-bottom: .5rem; border-bottom: 1px solid var(--gray-200);
  margin: 0 0 1rem;
}

/* Question card */
.question-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.125rem 1.25rem;
  margin-bottom: .75rem;
}
/* N1-5: brief highlight when a resolved finding deep-links back to its source
   question for re-evaluation. */
.question-card-flash { animation: questionCardFlash 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .question-card-flash { animation: none; }
}
@keyframes questionCardFlash {
  0%, 30% { box-shadow: 0 0 0 2px var(--primary) inset, var(--shadow-md); }
  100%    { box-shadow: none; }
}
.question-header { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .75rem; }
.question-code {
  font-family: var(--font-mono, monospace);
  font-size: .75rem; font-weight: 600;
  color: var(--primary); background: var(--primary-light);
  padding: .15rem .45rem; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.question-text { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text-primary); }

/* Guidance accordion */
.question-guidance {
  font-size: .85rem; color: var(--gray-500);
  margin-bottom: .875rem;
  border: 1px solid var(--border-color); border-radius: var(--radius);
  overflow: hidden;
}
.question-guidance summary {
  cursor: pointer; padding: .4rem .75rem;
  font-size: .8rem; font-weight: 500; color: var(--gray-400);
  list-style: none; user-select: none;
}
.question-guidance summary::-webkit-details-marker { display: none; }
.question-guidance[open] summary { border-bottom: 1px solid var(--border-color); }
.question-guidance p { padding: .625rem .75rem; margin: 0; line-height: 1.6; }

/* Prior-assessment answer snapshot ("what did we answer last time?"). */
.prior-answer {
  font-size: .85rem; margin-bottom: .875rem;
  border: 1px solid var(--border-color); border-radius: var(--radius);
  border-left: 3px solid var(--primary); overflow: hidden;
  background: var(--primary-light);
}
.prior-answer summary {
  cursor: pointer; padding: .4rem .75rem;
  font-size: .8rem; font-weight: 500; color: var(--text-secondary, var(--gray-500));
  list-style: none; user-select: none;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.prior-answer summary::-webkit-details-marker { display: none; }
.prior-answer-verdict { font-weight: 700; }
.prior-answer-yes     { color: var(--color-success-text); }
.prior-answer-no      { color: var(--color-danger-text); }
.prior-answer-partial { color: var(--color-warning-text); }
.prior-answer-na      { color: var(--text-muted); }
.prior-answer-meta    { color: var(--text-muted); font-weight: 400; margin-left: auto; }
.prior-answer-note    { padding: .5rem .75rem; margin: 0; line-height: 1.55; color: var(--text-secondary, var(--gray-600)); }
.prior-answer [data-prior-copy] { margin: 0 .75rem .6rem; }

/* Scope group (per-location / per-ePHI) */
.scope-group { margin-bottom: .75rem; }
.scope-group-label {
  display: flex; align-items: center; gap: .375rem;
  font-size: .8rem; font-weight: 600; color: var(--gray-500);
  margin-bottom: .4rem;
}
.scope-setup-notice {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--gray-500);
  background: var(--gray-50); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: .6rem .875rem;
}
.scope-setup-notice a { color: var(--primary); font-weight: 500; }

/* Answer widget */
.answer-widget { padding-top: .25rem; }
.answer-widget-locked { opacity: .75; pointer-events: none; }

.answer-btns {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin-bottom: .625rem;
}
.answer-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .35rem .875rem;
  font-size: .8125rem; font-weight: 500;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-surface); color: var(--gray-500);
  cursor: pointer; transition: all .12s;
}
.answer-btn:hover:not(:disabled) { border-color: var(--gray-400); color: var(--text-primary); }

.answer-btn-yes.active   { background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); border-color: var(--color-success); color: var(--color-success-text); font-weight: 600; }
.answer-btn-no.active    { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-white)); border-color: var(--color-danger); color: var(--color-danger-text); font-weight: 600; }
.answer-btn-partial.active { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); border-color: var(--color-warning-text); color: var(--color-warning-text); font-weight: 600; }
.answer-btn-na.active    { background: var(--text-primary); border-color: var(--text-muted); color: var(--border-strong); font-weight: 600; }

.answer-btn-clear {
  padding: .35rem .5rem;
  color: var(--gray-400); border-style: dashed;
}
.answer-btn-clear:hover { color: var(--danger); border-color: var(--danger); }

.answer-meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: flex-start;
}
.answer-notes {
  flex: 1; min-width: 200px;
  font-size: .8125rem; min-height: 2.5rem; max-height: 8rem;
  resize: vertical; padding: .4rem .6rem;
}
/* N/A chosen but not yet justified — draw the eye to the notes field. */
.answer-na-needs-note .answer-notes {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 2px var(--color-warning-bg);
}
.answer-assign {
  font-size: .8125rem; padding: .375rem .6rem;
  min-width: 160px; max-width: 220px;
}

.answer-status {
  font-size: .75rem; margin-top: .375rem;
  min-height: 1.2em;
}
.answer-status.saving  { color: var(--gray-400); }
.answer-status.saved   { color: var(--color-success); }
.answer-status.error   { color: var(--danger); }

/* ---- AI evaluation -------------------------------------------------------- */
.answer-ai-eval {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .5rem;
}
.ai-eval-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-alt); color: var(--text-primary);
  cursor: pointer;
}
.ai-eval-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--bg-alt) 70%, var(--primary) 12%); }
.ai-eval-btn:disabled { opacity: .5; cursor: not-allowed; }
.ai-eval-badge {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 999px;
}
.ai-eval-badge.ai-eval-success  { background: var(--success-light); color: var(--color-success-text); }
.ai-eval-badge.ai-eval-needsinfo { background: var(--danger-light);  color: var(--color-danger-text); }
.ai-eval-stale { font-size: .72rem; color: var(--gray-400); font-style: italic; }
.ai-eval-msg   { font-size: .72rem; color: var(--gray-400); }
.ai-eval-msg.error { color: var(--danger); }
/* E1: daily-cap message — a budget notice, not an error (neutral, not red). */
.ai-eval-msg-cap { color: var(--text-muted); }
/* E2: one-time inline-AI intro hint. Reuses .alert .alert-info; the dismiss
   button sits at the end without disturbing the icon + copy flex row. */
.ai-intro-hint { align-items: center; }
.ai-intro-hint p { font-weight: 400; }
.ai-intro-dismiss {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  border: none;
  background: transparent;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.ai-intro-dismiss:hover { opacity: 1; }
.ai-intro-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.ai-eval-suggestion {
  flex-basis: 100%;
  font-size: .78rem;
  background: var(--danger-light);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: 6px; padding: .4rem .6rem;
}
.ai-eval-suggestion > summary {
  cursor: pointer; font-weight: 600; color: var(--color-danger-text); list-style: revert;
}
.ai-eval-suggestion > p { margin: .4rem 0 0; color: var(--text-primary); }
.ai-eval-all-status { font-size: .78rem; color: var(--text-secondary); margin-left: .25rem; }
/* AI executive summary panel */
.ai-summary-panel {
  margin-top: .75rem; padding: .875rem 1rem;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
}
.ai-summary-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.ai-summary-meta { font-size: .72rem; color: var(--gray-400); }
.ai-summary-body p { margin: 0 0 .5rem; font-size: .875rem; color: var(--text-primary); }
.ai-summary-body h4 { margin: .5rem 0 .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.ai-summary-body ul { margin: 0 0 .5rem 1.1rem; font-size: .85rem; color: var(--text-primary); }
.ai-summary-posture {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: .15rem .5rem;
  border-radius: 999px; margin-bottom: .5rem;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
}
.ai-summary-msg { font-size: .72rem; color: var(--gray-400); }
.ai-summary-msg:empty { display: none; }
/* Top-risk → findings deep links in the AI summary. */
.ai-summary-risk-link { text-decoration: none; color: inherit; }
.ai-summary-risk-link:hover strong { text-decoration: underline; }
.ai-summary-risk-sev { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
/* AI proposal lists (remediation, risk, crosswalk) */
.ai-proposals { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.ai-proposal {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .5rem .625rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-surface); font-size: .85rem; cursor: pointer;
}
.ai-proposal input[type=checkbox] { margin-top: .2rem; }
.ai-proposal-main { display: block; }
.ai-proposal-title { font-weight: 600; color: var(--text-primary); }
.ai-proposal-tag {
  display: inline-block; font-size: .68rem; font-weight: 600; padding: .05rem .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
}
.ai-proposal-due { font-size: .7rem; color: var(--gray-400); }
.ai-proposal-steps { margin: .35rem 0 .25rem 1.1rem; font-size: .82rem; color: var(--text-primary); }
.ai-proposal-ev { font-size: .78rem; color: var(--text-secondary); margin-top: .2rem; }
.ai-evidence-summary { background: var(--bg-alt); font-size: .82rem; padding: .625rem .875rem !important; }
.ai-evidence-summary p { margin: .35rem 0; }
.ai-evidence-summary ul { margin: .25rem 0 .25rem 1.1rem; }
.ai-eval-meta  { font-size: .7rem; color: var(--gray-400); }
.ai-eval-disclaimer { font-size: .7rem; color: var(--gray-400); font-style: italic; flex-basis: 100%; }

/* ---- AI #7: self-critique callout (remediation drafter + planner) ---- */
.ai-plan-summary { font-size: .85rem; color: var(--text-secondary); margin: 0 0 .5rem; }
.ai-critique {
  border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
  background: var(--bg-alt); border-radius: 8px;
  padding: .5rem .7rem; margin: 0 0 .6rem; font-size: .8rem;
}
.ai-critique.needs-review {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: var(--warning-light);
}
.ai-critique-head { display: flex; align-items: center; gap: .4rem; }
.ai-critique-score { font-size: .72rem; color: var(--text-secondary); font-weight: 600; }
.ai-critique-flag {
  font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  padding: .05rem .4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning);
}
.ai-critique-issues { margin: .35rem 0 0 0; padding-left: 1.1rem; }
.ai-critique-issues li { margin: .15rem 0; color: var(--text-primary); }

/* ---- Workflow-level AI surfaces: kickoff planner, program roadmap, audit readiness ---- */
/* Assessment kickoff planner — ordered section list. */
.ai-plan-list { margin: .25rem 0 .5rem 1.2rem; padding: 0; font-size: .85rem; }
.ai-plan-list li { margin: 0 0 .5rem; color: var(--text-primary); }
.ai-plan-meta { font-size: .72rem; color: var(--text-secondary); font-weight: 400; }
.ai-plan-reason { font-size: .8rem; color: var(--text-secondary); margin-top: .15rem; }

/* Program tools section header on Reports. */
.ai-program-tools { border-left: 3px solid color-mix(in srgb, var(--primary) 40%, transparent); }

/* Selectable generate→apply checklist (audit readiness + roadmap). */
.ai-checklist { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.ai-checklist-item {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-surface); font-size: .85rem; cursor: pointer;
}
.ai-checklist-item:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.ai-checklist-item input[type=checkbox] { margin-top: .2rem; flex: none; }
.ai-checklist-body { display: block; }
.ai-checklist-body strong { color: var(--text-primary); }
.ai-checklist-bar { margin: .25rem 0 .5rem; }

/* Readiness verdict pill. */
.ai-readiness-verdict { font-size: .85rem; margin: 0 0 .6rem; }
.ai-readiness-verdict strong {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem;
}
.ai-readiness-not_ready strong { background: var(--danger-light); color: var(--danger); }
.ai-readiness-developing strong { background: var(--warning-light); color: var(--warning); }
.ai-readiness-audit_ready strong { background: var(--success-light); color: var(--success); }

/* Findings grouped under a roadmap phase. */
.ai-roadmap-findings { margin: .35rem 0 0 0; padding-left: 1.1rem; font-size: .8rem; }
.ai-roadmap-findings li { margin: .15rem 0; color: var(--text-secondary); }
.ai-critique-sev {
  display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  margin-right: .35rem; color: var(--text-secondary);
}
.ai-critique-issues li.sev-major .ai-critique-sev { color: var(--danger); }

/* ---- AI #4: Posture Coach trend table ---- */
.ai-coach-trend-wrap { overflow-x: auto; margin: 0 0 .75rem; }
.ai-coach-trend { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ai-coach-trend th, .ai-coach-trend td {
  text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--border);
}
.ai-coach-trend thead th { color: var(--text-secondary); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; }
.ai-coach-trend tbody th { font-weight: 500; color: var(--text-primary); }
.ai-coach-trend tr.trend-regressed td:nth-child(3) { color: var(--danger); font-weight: 600; }
.ai-coach-trend tr.trend-improved  td:nth-child(3) { color: var(--success); font-weight: 600; }
.ai-coach-empty { font-size: .82rem; color: var(--text-secondary); font-style: italic; }

/* ---- AI #2: evidence-gap one-click attach ---- */
.ai-evgap-attach { margin-left: .5rem; padding: .1rem .5rem; font-size: .72rem; }
.ai-evgap-feedback { list-style: none; margin-top: .4rem; }

/* ---- AI: Next 3 actions card ---- */
.ai-actions-card .ai-summary-head { justify-content: space-between; align-items: center; }
.ai-actions-msg { display: block; font-size: .8rem; color: var(--text-muted, var(--gray-500)); margin: .25rem 0; min-height: 1rem; }
.ai-actions-msg.is-error { color: var(--danger); }
.ai-actions-empty { font-size: .85rem; color: var(--text-muted, var(--gray-500)); margin: .25rem 0 .5rem; }
.ai-actions-list { list-style: none; margin: .25rem 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ai-action-item { display: flex; align-items: flex-start; gap: .625rem; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt, transparent); }
.ai-action-impact { flex-shrink: 0; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .45rem; border-radius: 5px; margin-top: .1rem; }
.ai-action-impact-high   { background: var(--danger-light);  color: var(--color-danger-text); }
.ai-action-impact-medium { background: var(--primary-light); color: var(--primary); }
.ai-action-impact-low    { background: var(--success-light); color: var(--color-success-text); }
.ai-action-body { display: flex; flex-direction: column; gap: .15rem; }
.ai-action-title { font-size: .875rem; font-weight: 600; color: var(--text-primary); }
.ai-action-why { font-size: .8rem; color: var(--text-muted, var(--gray-500)); line-height: 1.45; }
.ai-action-link { align-self: flex-start; margin-top: .15rem; font-size: .8rem; font-weight: 500; color: var(--text-brand, var(--primary)); white-space: nowrap; }
.ai-action-link:hover { text-decoration: underline; }
.sherpa-brief-action-link { display: inline-block; margin-top: .15rem; font-size: .8125rem; font-weight: 500; color: var(--text-brand, var(--primary)); }
.sherpa-brief-action-link:hover { text-decoration: underline; }
[data-theme="dark"] .ai-action-impact-high   { background: color-mix(in srgb, var(--color-danger) 18%, transparent); }
[data-theme="dark"] .ai-action-impact-medium { background: color-mix(in srgb, var(--primary) 18%, transparent);  color: var(--primary-soft); }
[data-theme="dark"] .ai-action-impact-low    { background: color-mix(in srgb, var(--color-success) 18%, transparent); }

/* ---- AI: Ask about your compliance program ---- */
.ai-assistant-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .625rem; }
.ai-ask-chip {
  font-size: .78rem; padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-alt, transparent);
  color: var(--text-muted, var(--gray-600)); cursor: pointer; transition: var(--transition-fast, .12s ease);
}
.ai-ask-chip:hover { border-color: var(--primary); color: var(--primary); }
.ai-assistant-form { display: flex; gap: .5rem; align-items: center; }
.ai-assistant-form .form-input { flex: 1; }
.ai-assistant-answer { margin: .75rem 0 .5rem; padding: .75rem .875rem; border-radius: 8px; background: var(--bg-alt, var(--gray-50)); border: 1px solid var(--border); font-size: .875rem; line-height: 1.55; color: var(--text-primary); }
.ai-assistant-answer.is-loading { color: var(--text-muted, var(--gray-500)); font-style: italic; }
.ai-assistant-answer.is-error { color: var(--danger); border-color: var(--danger); background: var(--danger-light); }
.ai-answer-text { margin: 0; }
.ai-answer-flag { margin: .5rem 0 0; font-size: .76rem; color: var(--color-warning-text); }
.ai-answer-cites { margin: .5rem 0 0; font-size: .76rem; color: var(--text-muted, var(--gray-500)); }
.ai-answer-cites span { font-weight: 600; }
.ai-answer-cites ul { margin: .15rem 0 0 1.1rem; padding: 0; }
@media (max-width: 640px) { .ai-assistant-form { flex-direction: column; align-items: stretch; } }

/* Human review (accept / override) */
.ai-eval-review { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
/* "Sherpa suggested this — you decide:" — keeps the human-in-the-loop framing
   on the verdict, matching the suggest-only disclaimers on the other AI tools. */
.ai-eval-review-label { font-size: .7rem; color: var(--text-muted); }
.ai-override-btn {
  font-size: .7rem; padding: .15rem .5rem; border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.ai-override-btn:hover { background: var(--bg-alt); }
.ai-override-btn.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  color: var(--primary);
  font-weight: 600;
}
.ai-override-state { font-size: .7rem; color: var(--gray-400); }
/* Dark mode: the --success-light/--danger-light backgrounds flip to dark, so the
   light-mode dark-green/dark-red text would be unreadable. Mirror the dark badge palette. */
[data-theme="dark"] .ai-eval-badge.ai-eval-success   { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
[data-theme="dark"] .ai-eval-badge.ai-eval-needsinfo { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
[data-theme="dark"] .ai-eval-suggestion {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
}

/* ---- Evidence widget (per-answer attachments) -------------------------- */
.answer-evidence {
  margin-top: .625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.evidence-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.evidence-list:empty { display: none; }

.evidence-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-alt, var(--gray-50));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: .25rem .375rem;
  max-width: 240px;
  transition: border-color .15s, background .15s;
}
.evidence-chip:hover { border-color: var(--primary); }
.evidence-chip.is-uploading { opacity: .8; }
/* Upload progress bar — a thin track pinned to the chip's bottom edge, filled
   live from the XHR upload-progress event (#2b). Only shown while uploading. */
.evidence-progress-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--border-color);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.evidence-chip:not(.is-uploading) .evidence-progress-track { display: none; }
.evidence-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primary);
  transition: width .2s ease;
}
.evidence-chip-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--text-primary);
  min-width: 0;
  flex: 1;
}
.evidence-thumb {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: 5px;
  background: var(--gray-100);
  flex-shrink: 0;
  display: block;
}
.evidence-thumb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-500);
  background: transparent;
}
.evidence-meta {
  display: flex; flex-direction: column;
  min-width: 0; line-height: 1.2;
}
.evidence-name {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evidence-size {
  font-size: .6875rem;
  color: var(--text-muted);
  margin-top: .125rem;
}
.evidence-delete {
  background: none; border: 0; cursor: pointer;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.evidence-delete:hover { background: var(--danger); color: var(--color-white); }

.evidence-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--primary);
  background: transparent;
  border: 1px dashed var(--primary);
  border-radius: 8px;
  padding: .375rem .625rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.evidence-upload-btn:hover,
.evidence-upload-btn:focus-within {
  background: var(--primary-light);
  outline: 0;
}
.evidence-upload-btn.is-uploading {
  cursor: wait;
  opacity: .7;
}
.evidence-upload-hint {
  font-size: .6875rem;
  color: var(--text-muted);
}

[data-theme="dark"] .evidence-chip { background: rgba(255,255,255,.04); }
[data-theme="dark"] .evidence-upload-btn:hover,
[data-theme="dark"] .evidence-upload-btn:focus-within { background: color-mix(in srgb, var(--primary) 12%, transparent); }

.answer-widget-locked .evidence-upload-btn,
.answer-widget-locked .evidence-delete { display: none; }

/* Form helper */
.form-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.form-row .form-group { min-width: 120px; }

/* Empty state */
.empty-state {
  text-align: center; padding: 3rem 1rem;
  color: var(--gray-500); font-size: .9375rem;
}

/* Alert — duplicate removed; canonical definitions are at the top of this file using CSS variables */

/* ==========================================================================
   Dark mode: assessment view
   ========================================================================== */
/* Status pills need no dark overrides: the .pill-* light rules use the
   --color-*-bg/-text/-border token triads, which carry correct dark values, so
   dark mode is token-derived (consistent with .risk-badge). */

/* assessment progress — handled by CSS variables */

[data-theme="dark"] .question-subcategory-title { color: var(--text-subtle); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .question-card { background: var(--bg-surface); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .question-code { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary-text); }
[data-theme="dark"] .question-text { color: var(--text-secondary); }

[data-theme="dark"] .question-guidance { border-color: rgba(255,255,255,.08); color: var(--text-muted); }
[data-theme="dark"] .question-guidance[open] summary { border-bottom-color: rgba(255,255,255,.08); }

[data-theme="dark"] .scope-group-label { color: var(--text-subtle); }
[data-theme="dark"] .scope-setup-notice { background: var(--bg-body); border-color: rgba(255,255,255,.08); color: var(--text-subtle); }

[data-theme="dark"] .answer-btn { background: var(--bg-surface); border-color: rgba(255,255,255,.12); color: var(--text-muted); }
[data-theme="dark"] .answer-btn:hover:not(:disabled) { border-color: rgba(255,255,255,.25); color: var(--text-secondary); }
[data-theme="dark"] .answer-btn-yes.active    { background: color-mix(in srgb, var(--color-success) 15%, transparent); border-color: var(--color-success); color: var(--color-success); }
[data-theme="dark"] .answer-btn-no.active     { background: color-mix(in srgb, var(--color-danger) 15%, transparent); border-color: var(--color-danger); color: var(--color-danger); }
[data-theme="dark"] .answer-btn-partial.active { background: color-mix(in srgb, var(--color-warning) 15%, transparent); border-color: var(--color-warning); color: var(--color-warning); }
[data-theme="dark"] .answer-btn-na.active     { background: rgba(255,255,255,.07); border-color: var(--text-muted); color: var(--text-muted); }
[data-theme="dark"] .answer-btn-clear         { color: var(--text-subtle); }
[data-theme="dark"] .answer-btn-clear:hover   { color: var(--color-danger); border-color: var(--color-danger); }

[data-theme="dark"] .alert-error   { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger-text); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
[data-theme="dark"] .alert-success { background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
[data-theme="dark"] .alert-warning { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
[data-theme="dark"] .alert-info    { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary-text); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }

/* Sidebar group arrow — dark mode uses a lighter stroke color */
[data-theme="dark"] .sidebar-group summary.sidebar-group-label::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Risk badges & colors
   ========================================================================== */
/* NOTE: a `.risk-{critical,high,medium,low}` "text colors" block used to live
   here and, being defined after the risk-matrix cells (~2556), silently
   overrode their color — rendering product.php's CRITICAL cell as purple text
   on a red background. It had no standalone consumer, so it was pure harm and
   was removed 2026-07-23. The live definitions are the .risk-cell.risk-* matrix
   rules above; risk *levels* elsewhere use .risk-lvl-* / .sev-* / .risk-badge. */

.risk-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
}
/* Severity triads come straight from the --color-* tokens, which already carry
   correct light AND dark values — so no separate dark-mode block is needed. */
.risk-badge-critical     { background: var(--color-purple-bg);  color: var(--color-purple); }
.risk-badge-high         { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.risk-badge-medium       { background: var(--color-warning-bg); color: var(--color-warning-text); }
.risk-badge-low          { background: var(--color-success-bg); color: var(--color-success); }
.risk-badge-informational{ background: var(--bg-alt);           color: var(--text-muted); }

/* ==========================================================================
   Answer badges (inline small)
   ========================================================================== */
.answer-badge {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  white-space: nowrap;
}
.answer-badge-yes     { background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); color: var(--color-success-text); }
.answer-badge-no      { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-white)); color: var(--color-danger-text); }
.answer-badge-partial { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); color: var(--color-warning-text); }
.answer-badge-na      { background: var(--text-primary); color: var(--border-strong); }

[data-theme="dark"] .answer-badge-yes     { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
[data-theme="dark"] .answer-badge-no      { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
[data-theme="dark"] .answer-badge-partial { background: color-mix(in srgb, var(--color-warning) 13%, transparent); color: var(--color-warning); }
[data-theme="dark"] .answer-badge-na      { background: rgba(255,255,255,.07); color: var(--text-muted); }

/* Answer dot (used in reports) */
.answer-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.answer-dot.answer-yes     { background: var(--color-success); }
.answer-dot.answer-partial { background: var(--color-warning-text); }
.answer-dot.answer-no      { background: var(--color-danger); }
.answer-dot.answer-na      { background: var(--text-muted); }

/* ==========================================================================
   Status pills — the legacy .status-finding-*/.status-rem-* family (raw hex +
   manual dark overrides, with NO rule for the live in_progress/accepted_risk/
   pending_approval states) was retired 2026-07-23: findings + remediation now
   render the canonical `.pill pill-*` via Finding/Remediation::STATUS_PILL.
   ========================================================================== */

/* ==========================================================================
   Stat cards row (findings / remediation dashboards)
   ========================================================================== */
.stats-row {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  flex: 1; min-width: 120px; max-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.stat-card-value {
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: var(--text-primary);
}
.stat-card-label {
  font-size: .75rem; color: var(--gray-500); font-weight: 500;
}
.stat-card-danger  .stat-card-value { color: var(--danger); }
.stat-card-warning .stat-card-value { color: var(--warning); }
/* Alias classes used by admin dashboard and physical-safeguards stats */
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1; margin: .125rem 0; }
.stat-sub   { font-size: .75rem; color: var(--gray-400); }

/* ==========================================================================
   Findings list / view
   ========================================================================== */
.finding-detail-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .finding-detail-grid { grid-template-columns: 1fr; }
}

.finding-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}
.finding-panel + .finding-panel { margin-top: 1rem; }
.finding-panel-title {
  font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gray-500);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Remediation task cards
   ========================================================================== */
.remediation-task-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  margin-bottom: .625rem;
}
.remediation-task-card:last-child { margin-bottom: 0; }
.remediation-task-card-header {
  display: flex; align-items: flex-start; gap: .625rem;
  margin-bottom: .375rem;
}
.remediation-task-card-title {
  font-size: .875rem; font-weight: 600; flex: 1;
  color: var(--text-primary);
}
.remediation-task-card-meta {
  font-size: .75rem; color: var(--gray-500);
  display: flex; flex-wrap: wrap; gap: .5rem;
}

/* ==========================================================================
   Evidence file rows
   ========================================================================== */
/* .evidence-file-{row,icon,name,meta} removed 2026-07-23 — orphaned file-list
   design; evidence/index.php uses an id (#evidence-file-name) + utility classes,
   not this component family. */

/* Upload drag-and-drop zone */
.upload-zone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  color: var(--gray-500);
}
.upload-zone:hover, .upload-zone.drag-over {
  border-color: var(--primary-light);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.upload-zone input[type="file"] { display: none; }
.upload-selected-name {
  font-size: .875rem; font-weight: 500; color: var(--text-primary);
  margin-top: .5rem;
}

/* ==========================================================================
   Report styles
   ========================================================================== */
.report-toolbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

.report-page {
  max-width: 900px; margin: 2rem auto 4rem;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.report-cover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-dark) 100%);
  color: var(--color-white);
  padding: 3rem 3.5rem;
}
.report-logo {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 2.5rem;
  color: var(--color-white);
}
.report-title {
  font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700;
  margin-bottom: .5rem; letter-spacing: -0.02em;
  color: var(--color-white);
}
.report-subtitle {
  font-size: 1rem; color: rgba(255,255,255,.75);
  margin-bottom: 2rem;
}
.report-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.report-meta-item { display: flex; flex-direction: column; gap: .25rem; }
.report-meta-key  { font-size: .75rem; color: rgba(255,255,255,.6); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.report-meta-val  { font-size: .9375rem; font-weight: 600; color: var(--color-white); }

.report-section {
  padding: 2rem 3.5rem;
  border-bottom: 1px solid var(--border-color);
}
.report-section:last-child { border-bottom: none; }
.report-section-title {
  font-size: 1.125rem; font-weight: 700; margin-bottom: 1.25rem;
  color: var(--text-primary);
}

.report-page-break { page-break-before: always; }

/* Score circle */
.report-score-grid {
  display: flex; flex-wrap: wrap; gap: 2rem; align-items: center;
}
.report-score-main { flex-shrink: 0; }
.report-score-circle {
  width: 130px; height: 130px;
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 6px solid currentColor;
}
.score-green  { color: var(--color-success); }
.score-yellow { color: var(--color-warning); }
.score-red    { color: var(--color-danger); }
.score-number { font-size: 2rem; font-weight: 800; line-height: 1; }
.score-label  { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }

.report-answer-breakdown { flex: 1; min-width: 220px; }
.answer-row {
  display: flex; align-items: center; gap: .625rem;
  padding: .375rem 0;
  font-size: .875rem; color: var(--gray-600);
}
.answer-row strong { margin-left: auto; color: var(--text-primary); }

/* Risk summary bar */
.risk-summary-table { display: flex; flex-direction: column; gap: .5rem; }
.risk-summary-row {
  display: flex; align-items: center; gap: .75rem;
}
.risk-summary-bar-wrap {
  flex: 1; height: 8px; background: var(--gray-200);
  border-radius: 999px; overflow: hidden;
}
.risk-summary-bar {
  height: 100%; background: var(--primary-light);
  border-radius: 999px; transition: width .3s ease;
}

/* Detailed findings */
.report-finding {
  background: var(--gray-50);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: .75rem;
}
.report-finding:last-child { margin-bottom: 0; }
.report-finding-header {
  display: flex; align-items: center; gap: .625rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}

/* Q&A table */
.report-qa-table {
  width: 100%; border-collapse: collapse;
  font-size: .875rem; margin-bottom: 1.5rem;
}
.report-qa-table th, .report-qa-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border-color);
  text-align: left; vertical-align: top;
}
.report-qa-table th {
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--gray-500);
  background: var(--gray-50);
}
.report-footer {
  padding: 1.25rem 3.5rem;
  font-size: .8125rem; color: var(--gray-400);
  text-align: center;
  background: var(--gray-50);
}

/* Report cards (index list) */
.report-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: 1.25rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.report-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-sm);
}
.report-card-main { flex: 1; min-width: 0; }
.report-card-title {
  font-size: .9375rem; font-weight: 600; color: var(--text-primary);
  margin-bottom: .25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.report-card-meta { font-size: .8125rem; color: var(--gray-500); display: flex; flex-wrap: wrap; gap: .625rem; }
.report-card-score {
  flex-shrink: 0; width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .9375rem; font-weight: 800;
  border: 3px solid currentColor;
}
.report-card-actions { flex-shrink: 0; }
/* Reports-index layout: vertical stack of report cards + each card's header
   row (title block left, action button right). Were referenced but undefined,
   so the cards rendered with no gap and the header didn't lay out. */
.report-list { display: flex; flex-direction: column; gap: 1rem; }
.report-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}

/* Per-assessment stat row inside a .report-card (reports index). These were
   referenced by the markup but never defined — the tiles rendered as plain
   stacked spans. Token-driven so they retheme in dark. */
.report-card-stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}
.report-stat { display: flex; flex-direction: column; gap: .125rem; min-width: 72px; }
.report-stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.report-stat-label { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* ==========================================================================
   Security settings page
   ========================================================================== */
.security-method-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .875rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  margin-bottom: .5rem;
}
.security-method-row:last-child { margin-bottom: 0; }
/* .security-method-{icon,info,name,detail,actions} removed 2026-07-23 — the
   .security-method-row markup (settings/security.php) styles its contents with
   utility classes, so those child rules were never referenced. The whole
   .session-* / .current-session family (an orphaned session-list design with no
   markup) was removed here too. */

/* Detail list (sidebar metadata) */
.detail-list { display: flex; flex-direction: column; gap: .625rem; }
.detail-list-row { display: flex; flex-direction: column; gap: .1rem; }
.detail-list-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--gray-500); }
.detail-list-value { font-size: .875rem; color: var(--text-primary); }

/* ==========================================================================
   Billing page
   ========================================================================== */
.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.billing-plan-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.billing-plan-card.current {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent);
}
.billing-plan-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.billing-plan-price { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.billing-plan-price span { font-size: .9rem; font-weight: 500; color: var(--gray-500); }
.billing-plan-features { display: flex; flex-direction: column; gap: .375rem; }
.billing-plan-feature { font-size: .875rem; color: var(--gray-600); display: flex; gap: .5rem; }
.billing-plan-feature::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; }

/* ==========================================================================
   Dark mode: new components — most handled by CSS variables now
   ========================================================================== */
[data-theme="dark"] .upload-zone:hover,
[data-theme="dark"] .upload-zone.drag-over { border-color: var(--border-focus); background: color-mix(in srgb, var(--primary) 8%, transparent); }
[data-theme="dark"] .report-card:hover { border-color: var(--border-focus); }
[data-theme="dark"] .billing-plan-card.current { border-color: var(--primary); }
[data-theme="dark"] .risk-summary-bar-wrap { background: var(--border-strong); }
[data-theme="dark"] .answer-row { color: var(--text-muted); }
[data-theme="dark"] .report-answer-breakdown .answer-row strong { color: var(--text-primary); }

/* ==========================================================================
   Settings sub-navigation
   ========================================================================== */
.settings-nav-wrap { margin-bottom: 1.5rem; }
.settings-nav-search {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .625rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: .75rem;
  max-width: 280px;
  color: var(--text-muted);
}
.settings-nav-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--text-primary);
  font-size: .8125rem;
}
.settings-nav-search input::placeholder { color: var(--text-subtle); }
.settings-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
}
.settings-subnav-group {
  display: inline-flex;
  align-items: flex-end;
  gap: .125rem;
  padding-right: .75rem;
  margin-right: .25rem;
  position: relative;
}
.settings-subnav-group:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 20px;
  width: 1px;
  background: var(--border-color);
  opacity: .6;
}
.settings-subnav-group-label {
  display: none; /* shown on hover via tooltip / accessible to SR */
  position: absolute;
  bottom: 100%;
  left: 0;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-subtle);
  margin-bottom: .25rem;
}
.settings-subnav-link {
  padding: .5rem .75rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color .12s, border-color .12s, background .12s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.settings-subnav-link svg { opacity: .75; flex-shrink: 0; }
.settings-subnav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.settings-subnav-link:hover svg { opacity: 1; }
.settings-subnav-link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.settings-subnav-link.active svg { opacity: 1; color: var(--primary); }
[data-theme="dark"] .settings-subnav-link:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .settings-subnav-group:not(:last-child)::after { background: rgba(255,255,255,.1); }
@media (max-width: 768px) {
  .settings-subnav { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .settings-subnav-group { padding-right: .5rem; margin-right: .125rem; }
  .settings-subnav-link span { display: none; } /* icon-only on mobile */
  .settings-subnav-link { padding: .5rem .625rem; }
}

/* ---- Notification Bell (styles live in head.php inline <style> to work on every page) --- */

/* ---- Global Search (inline topbar input) ------------------------------- */
.search-wrap-inline { position: relative; }
.search-inline {
  position: relative;
  display: flex;
  align-items: center;
  width: 280px;
  height: 36px;
  background: var(--bg-alt, var(--gray-50));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 .625rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.search-inline:focus-within {
  border-color: var(--primary);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}
.search-inline-icon {
  flex-shrink: 0;
  color: var(--gray-500);
  margin-right: .5rem;
}
.search-inline-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: .875rem;
  color: var(--text-primary);
}
.search-inline-input::placeholder { color: var(--text-muted); }
.search-inline-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* P2 #7: ⌘K hint chip inside the search box */
.search-inline-kbd { flex: none; font-size: .6875rem; font-weight: 600; color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: .05rem .3rem; margin-left: .25rem; }
.search-inline:focus-within .search-inline-kbd { display: none; }
@media (max-width: 768px) { .search-inline-kbd { display: none; } }

.search-inline-results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 2rem);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,.12));
  z-index: 250;
}
.search-inline-results[hidden] { display: none; }
.search-inline-empty {
  padding: .875rem 1rem;
  font-size: .875rem;
  color: var(--text-muted);
}

.search-result-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .875rem; text-decoration: none;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-fast);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover, .search-result-item.is-active { background: var(--bg-hover); color: var(--text-primary); }
.search-result-type  { font-size: .6875rem; font-weight: 600; text-transform: uppercase; flex-shrink: 0; min-width: 70px; }
.search-result-title { flex: 1; font-size: .875rem; }
.search-result-meta  { font-size: .75rem; color: var(--text-disabled); flex-shrink: 0; }
/* Command-palette rows: a leading icon chip instead of a type badge. */
.search-cmd-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--radius-sm); color: var(--text-muted);
  background: var(--bg-alt);
}
.search-cmd-item:hover .search-cmd-icon,
.search-cmd-item.is-active .search-cmd-icon { color: var(--primary); }

/* ---- Comment @mentions + autocomplete ----------------------------------- */
/* (.comment-compose positioning is defined in the comment-thread block below.) */
.comment-mention {
  color: var(--primary-text, var(--primary));
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  padding: 0 .2em; font-weight: 600;
}
.mention-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20;
  max-height: 220px; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}
.mention-menu[hidden] { display: none; }
.mention-option {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  padding: .5rem .75rem; text-align: left; background: none; border: 0;
  cursor: pointer; color: var(--text-primary); font: inherit;
  min-height: 2.5rem; /* comfortable touch target */
}
.mention-option:hover, .mention-option.is-active { background: var(--bg-hover); }
/* On short/landscape-phone viewports cap the menu so it can't cover the field. */
@media (max-height: 480px) { .mention-menu { max-height: 40vh; } }
/* Long comment threads scroll within the thread instead of pushing the page. */
.answer-comments-list, .comment-item .comment-body { overflow-wrap: anywhere; }
.mention-option-name { font-weight: 600; font-size: .875rem; }
.mention-option-slug { font-size: .75rem; color: var(--text-muted); }

.srch-type-finding            { color: var(--danger); }
.srch-type-assessment         { color: var(--primary); }
.srch-type-remediation        { color: var(--color-success); }
.srch-type-business_associate { color: var(--color-purple); }
.srch-type-incident           { color: var(--danger); }
.srch-type-policy             { color: var(--primary); }
.srch-type-vendor             { color: var(--color-purple); }
.srch-type-ephi_system        { color: var(--accent); }
[data-theme="dark"] .srch-type-ephi_system { color: var(--accent); }
.srch-type-evidence           { color: var(--color-success); }
.srch-type-training           { color: var(--color-warning-text); }
[data-theme="dark"] .srch-type-training { color: var(--color-warning); }

/* Narrow viewports: shrink input width so it doesn't crowd the topbar. */
@media (max-width: 720px) {
  .search-inline { width: 200px; }
  .search-inline-results { width: 300px; }
}
@media (max-width: 540px) {
  .search-inline { width: 44px; padding: 0; justify-content: center; }
  .search-inline:focus-within { width: 220px; padding: 0 .625rem; justify-content: flex-start; }
  .search-inline-input { width: 0; padding: 0; }
  .search-inline:focus-within .search-inline-input { width: auto; padding-left: 0; }
  .search-inline-icon { margin-right: 0; }
  .search-inline:focus-within .search-inline-icon { margin-right: .5rem; }
}

/* ==========================================================================
   Animations & Keyframes
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.spinner { animation: spin 600ms linear infinite; }

/* ============================================================
   Marketing motion & wayfinding (driven by initMarketingMotion in app.js)
   ============================================================ */

/* Reveal-on-scroll: hidden until app.js adds .in-view. A [data-reveal-delay]
   step staggers siblings (e.g. cards in a grid). Falls back to fully visible
   under reduced motion or no-JS-observer. */
/* Hidden only when JS is present to un-hide it (.js set by theme.js before
   paint), so no-JS visitors never see blank sections. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
  will-change: opacity, transform;
}
.js [data-reveal].in-view { opacity: 1; transform: translateY(0); }

/* Grid/row stagger without per-item markup: cards inside these containers get a
   small incremental delay by position, so a row reveals left-to-right. */
.js .features-grid [data-reveal]:nth-child(3n+2) { transition-delay: 80ms; }
.js .features-grid [data-reveal]:nth-child(3n+3) { transition-delay: 160ms; }
.js .steps [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.js .steps [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.js .steps [data-reveal]:nth-child(4) { transition-delay: 240ms; }
.js .testimonials-grid [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.js .testimonials-grid [data-reveal]:nth-child(3) { transition-delay: 180ms; }
.js .pricing-grid [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.js .pricing-grid [data-reveal]:nth-child(3) { transition-delay: 180ms; }
.js .pricing-grid [data-reveal]:nth-child(4) { transition-delay: 270ms; }
.js .report-features-grid [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.js .report-features-grid [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.js .report-features-grid [data-reveal]:nth-child(4) { transition-delay: 240ms; }

/* Count-up stats keep stable width while the number changes. */
[data-count] { font-variant-numeric: tabular-nums; }

/* Active-section nav link (set by the scroll observer on long pages). */
.nav-link.nav-link-current { color: var(--gray-900); background: var(--gray-100); }
[data-theme="dark"] .nav-link.nav-link-current { color: var(--text-primary); background: rgba(255,255,255,.07); }

/* Feature-card hover: lift (kept) plus a primary border accent and a small
   icon nudge so the grid feels interactive. */
.feature-card { transition: box-shadow var(--transition-md), transform var(--transition-md), border-color var(--transition-md); }
.feature-card:hover { border-color: var(--primary); }
.feature-card .feature-icon { transition: transform var(--transition-md); }
.feature-card:hover .feature-icon { transform: translateY(-2px) scale(1.05); }

/* Logo-strip marquee: a slow, seamless auto-scroll. The track is duplicated in
   markup so the loop has no visible seam; pauses on hover. */
.logo-strip-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* hex-ok: fixed-art — neutral marquee mask */
.logo-strip-marquee .logo-strip {
  flex-wrap: nowrap;
  width: max-content;
  animation: logoMarquee 40s linear infinite;
}
.logo-strip-marquee:hover .logo-strip { animation-play-state: paused; }
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* one full (duplicated) set */
}

/* Honeypot field for public forms: off-screen (not display:none, which some
   bots skip) and out of the tab order. Real users never see or fill it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* In-page section nav (product page): sticks just below the 64px site header
   and highlights the section in view (.nav-link-current from the observer). */
.section-nav {
  position: sticky;
  top: 64px;
  z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
}
.section-nav-inner {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav-link {
  flex: 0 0 auto;
  padding: .85rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.section-nav-link:hover { color: var(--gray-900); }
.section-nav-link.nav-link-current {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
/* Anchor targets clear both the header and the section nav on jump. */
.product-section[id] { scroll-margin-top: 124px; }
[data-theme="dark"] .section-nav {
  background: color-mix(in srgb, var(--bg-inverse) 92%, transparent);
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .section-nav-link { color: var(--text-muted); }
[data-theme="dark"] .section-nav-link:hover { color: var(--text-primary); }
[data-theme="dark"] .section-nav-link.nav-link-current { color: var(--primary-soft); border-bottom-color: var(--primary-soft); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .feature-card:hover .feature-icon { transform: none; }
  .logo-strip-marquee .logo-strip { animation: none; width: auto; flex-wrap: wrap; }
  .logo-strip-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Page entrance animations */
.app-content > * {
  animation: fadeInUp 220ms ease both;
}
.app-content > *:nth-child(1) { animation-delay: 0ms; }
.app-content > *:nth-child(2) { animation-delay: 40ms; }
.app-content > *:nth-child(3) { animation-delay: 80ms; }
.app-content > *:nth-child(4) { animation-delay: 120ms; }
.app-content > *:nth-child(5) { animation-delay: 160ms; }
.app-content > *:nth-child(n+6) { animation-delay: 200ms; }
/* Data tables: opacity-only entrance (no translateY). The transform-based
   fadeInUp left a composited ghost of the first row's status badge / Open
   button painting over the header on some browsers. */
.app-content > .data-table-wrap { animation-name: fadeIn; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .app-content > *, [class*="animate"] {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */
.app-content {
  padding: 1.5rem 2rem;
  max-width: 100%;
}

@media (max-width: 768px) {
  .app-content { padding: 1rem; }

  .app-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--transition-md), box-shadow var(--transition-md);
    box-shadow: none;
    width: 240px;
  }
  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }
  .app-main { margin-left: 0 !important; }
  .sidebar-toggle-btn { display: flex !important; }
  .page-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .page-header .btn { width: 100%; }
  .filter-row { flex-direction: column; }
  .filter-row .filter-select { width: 100%; max-width: 100%; }
  .data-table-wrap { border-radius: var(--radius-md); font-size: .8125rem; }
  .data-table th, .data-table td { padding: .5rem .625rem; }
}

@media (min-width: 769px) {
  .sidebar-toggle-btn { display: none; }
  .app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
  }
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}

/* ==========================================================================
   Sidebar overlay (mobile)
   ========================================================================== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 199;
  animation: fadeIn 200ms ease;
}
.sidebar-overlay.visible { display: block; }

/* Sidebar nav item aliases (alternate class names for flexibility) */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--sidebar-link-color);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  margin: 1px 0;
}
.sidebar-nav-item:hover { background: var(--sidebar-link-hover-bg); color: var(--text-primary); }
.sidebar-nav-item.active { background: var(--sidebar-link-active-bg); color: var(--sidebar-link-active-color); font-weight: 600; }

/* ==========================================================================
   Empty states
   ========================================================================== */
.empty-state,
.table-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
  font-size: .9375rem;
  animation: fadeIn 300ms ease;
}
.empty-state svg { opacity: 0.3; margin-bottom: 1rem; }
.empty-state p { font-size: .9375rem; margin: 0 0 1rem; }
.empty-state-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .5; }

/* ==========================================================================
   Trial banner
   ========================================================================== */
.trial-banner {
  margin: .75rem;
  padding: .875rem;
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  font-size: .8125rem;
  animation: slideDown 300ms ease;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

/* ==========================================================================
   Loading bar (injected by JS)
   ========================================================================== */
#loading-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--primary); z-index: 9999;
  width: 0; pointer-events: none; opacity: 0;
  transition: width 200ms ease, opacity 300ms ease;
}

/* ==========================================================================
   Assessment DX: filter toolbar, jump-next, lightbox, comments, due date,
   evidence picker, evidence-required badge, activity timeline, bulk N/A
   ========================================================================== */

/* ---- Filter toolbar ----------------------------------------------------- */
.qfilter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
  margin: 1rem 0 .75rem;
  padding: .625rem .75rem;
  background: var(--bg-alt, var(--gray-50));
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.qfilter-search {
  position: relative;
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0 .625rem;
  height: 34px;
  color: var(--gray-500);
}
.qfilter-search-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  height: 100%;
  font: inherit;
  font-size: .875rem;
  color: var(--text-primary);
}
.qfilter-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);
}
/* "My questions" strip + assignment badges (regular-user UX) */
.my-questions-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem .875rem;
  margin-bottom: 1rem;
  background: var(--primary-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: .8125rem;
  color: var(--text-secondary);
}
.my-questions-done { color: var(--color-success); font-weight: 600; }
.assigned-to-you-badge {
  display: inline-flex;
  align-items: center;
  background: var(--primary-light);
  color: var(--primary-text, var(--primary));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: .6875rem;
  font-weight: 600;
  padding: .0625rem .5rem;
  white-space: nowrap;
}
.section-assign { max-width: 220px; font-size: .75rem; }
.answer-slot-flags { display: flex; gap: .375rem; margin-bottom: .375rem; }
.answer-flag-assigned {
  display: inline-flex;
  background: var(--primary-light);
  color: var(--primary-text, var(--primary));
  border-radius: var(--radius-full);
  font-size: .6875rem;
  font-weight: 600;
  padding: .0625rem .5rem;
}
.answer-flag-readonly {
  display: inline-flex;
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: .6875rem;
  font-weight: 600;
  padding: .0625rem .5rem;
}

.qfilter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.qfilter-chip {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.qfilter-chip:hover { background: var(--bg-hover, var(--gray-100)); }
a.qfilter-chip { text-decoration: none; display: inline-flex; align-items: center; }
.qfilter-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-white);
}
/* Framework filter chips — visually distinct (teal) from the blue state chips. */
.qfilter-fw-chips { align-items: center; margin-top: .375rem; }
.qfilter-fw-label { font-size: .72rem; font-weight: 600; color: var(--text-secondary); margin-right: .125rem; }
.qfilter-fw-chip.is-active,
.qfilter-fw-all.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-white);
}
.qfilter-counts {
  font-size: .75rem;
  color: var(--text-muted);
  margin-left: auto;
}
/* Zero-result filter escape — shown when active filters match no questions. */
.qfilter-empty {
  display: flex; align-items: center; gap: .625rem;
  margin: 1rem 0; padding: 1rem 1.25rem;
  background: var(--bg-alt); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); color: var(--text-secondary); font-size: .875rem;
}
.qfilter-empty[hidden] { display: none; }
.qfilter-empty svg { color: var(--text-muted); flex-shrink: 0; }
.qfilter-empty .btn { margin-left: auto; }

/* ---- Question card filter / highlight states --------------------------- */
.question-card { transition: outline-color .3s, box-shadow .3s; }
.question-card.is-highlighted {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(37 99 235 / 0.08);
}

/* ---- Subcategory header (with bulk-NA button) -------------------------- */
.question-subcategory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.btn-bulk-na {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: .25rem .625rem;
  font-size: .75rem;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-bulk-na:hover {
  background: var(--bg-hover, var(--gray-100));
  border-color: var(--primary);
  color: var(--primary);
}

/* ---- Evidence-required badge in question header ------------------------ */
.evidence-required-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-warning-text);
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-white));
  border-radius: 6px;
  padding: .15rem .4rem;
  margin-left: .5rem;
  white-space: nowrap;
}
[data-theme="dark"] .evidence-required-badge {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}

/* ---- Due date input ---------------------------------------------------- */
.answer-due-date {
  font-size: .8125rem;
  padding: .375rem .5rem;
  min-width: 150px;
}

/* ---- Comments section -------------------------------------------------- */
.answer-comments { margin-top: .75rem; }
.answer-comments-details summary {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: .25rem 0;
}
.answer-comments-details summary::-webkit-details-marker { display: none; }
.answer-comments-count {
  background: var(--bg-alt, var(--gray-100));
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0 .5rem;
  font-size: .6875rem;
  font-weight: 700;
  min-width: 1.2rem;
  text-align: center;
}
.answer-comments-list {
  margin: .5rem 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.answer-comments-list:empty { display: none; }
.comment-item {
  background: var(--bg-alt, var(--gray-50));
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: .5rem .625rem;
}
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.comment-author { font-weight: 600; color: var(--text-primary); }
.comment-time   { color: var(--text-muted); }
.comment-edited { color: var(--text-muted); }
/* Right-aligned action cluster (Edit / delete) shared by all comment surfaces. */
.comment-actions { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; }
.comment-edit {
  background: transparent; border: 0; cursor: pointer; color: var(--text-muted);
  padding: 0 .25rem; border-radius: 4px;
}
.comment-edit:hover { color: var(--primary); background: var(--bg-hover); }
.comment-delete {
  background: transparent; border: 0; cursor: pointer; color: var(--text-muted);
  font-size: 1rem; line-height: 1; padding: 0 .375rem; border-radius: 4px;
}
.comment-delete:hover { background: var(--danger); color: var(--color-white); }
.comment-body {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Compose + inline-edit areas. Relative so the @mention menu anchors to them. */
.comment-compose { position: relative; margin-top: .5rem; }
.comment-edit-area { position: relative; margin-top: .375rem; }
.comment-input { width: 100%; min-height: 2.25rem; font-size: .8125rem; }

/* ---- Activity timeline ------------------------------------------------- */
.answer-activity { margin-top: .375rem; }
.answer-activity-summary {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  padding: .25rem 0;
}
.answer-activity-summary::-webkit-details-marker { display: none; }
.answer-activity-list {
  list-style: none;
  margin: .375rem 0 0;
  padding: 0;
  font-size: .75rem;
  color: var(--text-secondary);
}
.answer-activity-item {
  display: flex;
  gap: .5rem;
  padding: .25rem 0;
  border-top: 1px dashed var(--border-color);
}
.answer-activity-item:first-child { border-top: 0; }
.answer-activity-who { font-weight: 500; color: var(--text-primary); }
.answer-activity-when { margin-left: auto; color: var(--text-muted); }

/* ---- Floating "next unanswered" button --------------------------------- */
.jump-next-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--primary);
  color: var(--color-white);
  border: 0;
  border-radius: 999px;
  padding: .625rem 1.125rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform .15s, background .15s;
}
.jump-next-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.jump-next-btn.is-done { background: var(--color-success); }
.jump-next-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  border-radius: 4px;
  padding: 0 .375rem;
  font-size: .75rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 600;
  min-width: 1.2rem;
}
@media (max-width: 540px) {
  .jump-next-btn { right: 1rem; bottom: 1rem; padding: .5rem .875rem; }
  .jump-next-btn span { display: none; }
}

/* ---- Evidence pick-existing button ------------------------------------- */
.evidence-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: .375rem .625rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.evidence-pick-btn:hover {
  background: var(--bg-hover, var(--gray-100));
  color: var(--primary);
  border-color: var(--primary);
}

/* ---- Evidence picker modal -------------------------------------------- */
.evidence-picker-modal {
  position: fixed; inset: 0;
  z-index: 400;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.evidence-picker-modal[hidden] { display: none; }
.evidence-picker-card {
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.evidence-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border-color);
}
.evidence-picker-close {
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 .375rem;
  line-height: 1;
}
.evidence-picker-search {
  margin: .75rem 1rem 0;
  padding: .5rem .75rem;
  font-size: .875rem;
}
.evidence-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.evidence-picker-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .5rem .625rem;
  cursor: pointer;
  text-align: left;
}
.evidence-picker-item:hover {
  background: var(--bg-hover, var(--gray-100));
  border-color: var(--border-color);
}
.evidence-picker-thumb {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-100);
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.evidence-picker-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.evidence-picker-name {
  font-size: .875rem; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evidence-picker-sub {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .125rem;
}
.evidence-picker-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: .875rem;
  color: var(--text-muted);
}

/* ---- Evidence lightbox ------------------------------------------------- */
.evidence-lightbox {
  position: fixed; inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.evidence-lightbox[hidden] { display: none; }
.evidence-lightbox-body {
  max-width: 92vw;
  max-height: 80vh;
  display: flex; align-items: center; justify-content: center;
}
.evidence-lightbox-body img {
  max-width: 92vw;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  object-fit: contain;
}
.evidence-lightbox-caption {
  margin-top: 1rem;
  color: var(--color-white);
  font-size: .875rem;
  max-width: 92vw;
  text-align: center;
  word-break: break-word;
}
.evidence-lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: rgba(255,255,255,.12);
  border: 0;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-white);
  cursor: pointer;
}
.evidence-lightbox-close:hover { background: rgba(255,255,255,.22); }
.evidence-thumb[data-lightbox-image] { cursor: zoom-in; }

/* ==========================================================================
   Mobile & tablet polish — touch targets, stacking, viewport-aware widths
   ========================================================================== */
@media (max-width: 768px) {
  /* Tap-target sizing: 36px clears WCAG 2.5.8 AA (24px min) with comfortable
     headroom. Intentionally not 44px (that's AAA) — forcing 44px would crowd
     the dense compliance tables these chips/buttons sit in. */
  .answer-btn,
  .answer-btn-clear,
  .btn-bulk-na,
  .evidence-pick-btn,
  .qfilter-chip,
  .comment-submit,
  .evidence-delete,
  .comment-delete,
  .btn-bare,
  .ai-eval-btn,
  .ai-draft-btn {
    min-height: 36px;
    min-width: 36px;
  }
  /* Icon-only bare buttons need centering once they gain a min box. */
  .btn-bare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .answer-btn { padding: .5rem .875rem; font-size: .9375rem; }

  /* Answer widget stacks vertically on phones */
  .answer-meta {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .answer-assign,
  .answer-due-date {
    width: 100%;
    max-width: none;
  }

  /* Filter toolbar collapses to two rows */
  .qfilter-toolbar { flex-direction: column; align-items: stretch; }
  .qfilter-search  { flex: 1 1 auto; height: 38px; }
  .qfilter-chips   { gap: .375rem; }
  .qfilter-chip    { padding: .375rem .75rem; font-size: .8125rem; }
  .qfilter-counts  { margin-left: 0; }

  /* Question card breathing room */
  .question-card { padding: .875rem; }
  .question-header { flex-wrap: wrap; gap: .375rem; }
  .question-code { flex-shrink: 0; }
  .evidence-required-badge { margin-left: 0; }

  /* Subcategory header bulk-NA wraps under the title on phones */
  .question-subcategory-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
  }

  /* Evidence chips: don't try to fit two per row at this width */
  .evidence-chip { max-width: 100%; flex: 1 1 100%; }

  /* Lightbox padding */
  .evidence-lightbox { padding: .75rem; }
  .evidence-lightbox-close { top: .5rem; right: .5rem; }

  /* Comments form stacks above button */
  .comment-form { flex-direction: column; align-items: stretch; }
  .comment-submit { align-self: flex-end; }

  /* Reports and settings cards lose horizontal padding to claim more width */
  .settings-card { padding: 1rem; }

  /* Topbar shrinks user name to avatar-only */
  .topbar-user .user-name { display: none; }

  /* Tabs scroll horizontally instead of wrapping awkwardly */
  .tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .tab-btn { flex-shrink: 0; }

  /* Page header drops the "Back" button below the title */
  .page-header { flex-wrap: wrap; gap: .5rem; }
}

@media (max-width: 480px) {
  /* Smaller phones */
  .question-text { font-size: .9375rem; }
  .answer-btn { font-size: .875rem; padding: .5rem .625rem; }

  /* Evidence chips: full-width single-column list */
  .evidence-list { flex-direction: column; }
  .evidence-chip { max-width: 100%; }
  .evidence-thumb { width: 32px; height: 32px; }

  /* Floating jump-next becomes icon-only */
  .jump-next-btn { padding: .625rem .75rem; }

  /* Smaller modal headers */
  .evidence-picker-card { max-height: 92vh; }
  .evidence-picker-search { margin: .5rem; }
}

/* Touch-device hover state cleanup: many touch devices fire :hover on tap and
   then "stick" — disable hover bg flashes on coarse pointers. */
@media (hover: none) {
  .evidence-chip:hover { border-color: var(--border-color); }
  .qfilter-chip:hover { background: transparent; }
  .btn-bulk-na:hover { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
  .evidence-pick-btn:hover { background: transparent; color: var(--text-secondary); border-color: var(--border-color); }
}

/* ==========================================================================
   Dark-mode safety net for hardcoded inline backgrounds & text colors.

   The dashboard has many small inline-styled pills (`PHI`, `BAA`, severity
   chips, etc.) that hardcode pastel pairs like var(--color-danger-bg) / var(--color-danger). Those look
   correct in light mode but lose readability or contrast in dark mode.

   Refactoring every one to a class would touch ~50 files. Instead, this
   block uses CSS attribute-substring selectors with !important to override
   just the relevant inline declarations when the page is in dark mode.

   Pattern: keep the SAME accent color so the meaning is preserved, but use a
   subtle translucent background that works on dark surfaces.
   ========================================================================== */
[data-theme="dark"] [style*="background:var(--color-danger-bg)"],
[data-theme="dark"] [style*="background: var(--color-danger-bg)"]   { background: color-mix(in srgb, var(--color-danger) 12%, transparent) !important; }
[data-theme="dark"] [style*="background:#f0fdf4"],
[data-theme="dark"] [style*="background: #f0fdf4"]   { background: color-mix(in srgb, var(--color-success) 10%, transparent) !important; }
[data-theme="dark"] [style*="background:var(--primary-light)"],
[data-theme="dark"] [style*="background: var(--primary-light)"]   { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
[data-theme="dark"] [style*="background:var(--color-info-bg)"],
[data-theme="dark"] [style*="background: var(--color-info-bg)"]   { background: color-mix(in srgb, var(--color-info) 12%, transparent) !important; }
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background: #f1f5f9"]   { background: var(--bg-alt) !important; }
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f8fafc"]   { background: var(--bg-alt) !important; }
[data-theme="dark"] [style*="background:var(--color-white);"]:not([style*="background:#fff7"]):not([style*="background:#fffb"]):not([style*="background:#fff3"]),
[data-theme="dark"] [style*="background:var(--color-white)"]                                                       { background: var(--bg-surface) !important; }

/* Text color: keep semantic accent visible against dark backgrounds */
[data-theme="dark"] [style*="color:#1046c1"],
[data-theme="dark"] [style*="color: #1046c1"] { color: var(--primary-soft) !important; }
[data-theme="dark"] [style*="color:#1e3a5f"],
[data-theme="dark"] [style*="color: #1e3a5f"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"] { color: var(--text-primary) !important; }
[data-theme="dark"] [style*="color:#374151"],
[data-theme="dark"] [style*="color: #374151"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"] { color: var(--text-secondary) !important; }
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"] { color: var(--text-muted) !important; }
[data-theme="dark"] [style*="color:var(--color-warning-text)"],
[data-theme="dark"] [style*="color: var(--color-warning-text)"] { color: var(--color-warning-text) !important; }
[data-theme="dark"] [style*="color:var(--color-success-text)"],
[data-theme="dark"] [style*="color: var(--color-success-text)"] { color: var(--color-success-text) !important; }
[data-theme="dark"] [style*="color:var(--color-danger-text)"],
[data-theme="dark"] [style*="color: var(--color-danger-text)"] { color: var(--color-danger-text) !important; }
[data-theme="dark"] [style*="color:#7f1d1d"],
[data-theme="dark"] [style*="color: #7f1d1d"] { color: var(--color-danger-text) !important; }
/* Border colors that lock to light hue */
[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] { border-color: var(--border-color) !important; }

/* ==========================================================================
   Global polish: focus rings, selection, scrollbars, smoothing
   ========================================================================== */

/* Accessible focus ring for every keyboard-reachable control. Browsers'
   default focus rings differ; this is consistent + on-brand. We only paint
   on `:focus-visible` so mouse clicks don't trigger the ring. */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible > summary,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Existing form inputs use a tinted box-shadow ring — keep theirs. */
input.form-input:focus-visible,
textarea.form-input:focus-visible,
select.filter-select:focus-visible { outline: none; }

/* Text selection — branded but readable */
::selection      { background: color-mix(in srgb, var(--primary) 25%, transparent); color: var(--text-primary); }
::-moz-selection { background: color-mix(in srgb, var(--primary) 25%, transparent); color: var(--text-primary); }

/* Scrollbars — quiet by default, slightly more visible in dark mode */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar              { width: 10px; height: 10px; }
*::-webkit-scrollbar-track        { background: transparent; }
*::-webkit-scrollbar-thumb        {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover  { background: var(--text-muted); background-clip: padding-box; border: 2px solid transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: var(--text-disabled); background-clip: padding-box; border: 2px solid transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: padding-box; border: 2px solid transparent; }

/* Image rendering and font smoothing — keeps thumbnails crisp at retina */
img { image-rendering: -webkit-optimize-contrast; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Disabled state polish — ensure pointer cursor doesn't lie */
button:disabled,
.btn:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}

/* `<details>` summary — remove default disclosure triangle on Webkit and
   replace with a subtle chevron so all <details> elements look consistent */
details > summary::-webkit-details-marker { display: none; }
details > summary { list-style: none; }

/* Empty states — uniform muted styling */
.empty-state {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
.empty-state p:first-child { margin-top: 0; font-size: .9375rem; }
.empty-state p:last-child  { margin-bottom: 0; }
.empty-state .btn { margin-top: 1rem; }

/* Settings card / data card baseline — many pages reinvent this inline */
.settings-card,
.settings-card + .settings-card,

/* Form input/textarea consistency — anchors padding + radius across pages */
.form-input,
.filter-select {
  border-radius: var(--radius-md);
}

/* Tighter button density inside crowded toolbars */
.btn-toolbar { display: inline-flex; gap: .5rem; flex-wrap: wrap; }

/* Smooth color transitions when toggling theme so dark-mode swap doesn't flash */
html, body, .app-body, .app-content,
.app-topbar, .app-sidebar, .settings-card, .question-card,
.btn, .form-input, .filter-select, .badge {
  transition: background-color .25s ease, color .15s ease, border-color .2s ease;
}

/* Suppress those transitions during initial theme load to avoid the FOUC. */

/* Print: respect the user's intent — clean output without dashboard chrome */
@media print {
  .app-sidebar, .app-topbar, .jump-next-btn,
  .qfilter-toolbar, .evidence-upload-btn, .evidence-pick-btn,
  .comment-form, .comment-delete, .evidence-delete {
    display: none !important;
  }
  body, .app-body { background: #fff !important; color: #111 !important; }
  .settings-card, .question-card { box-shadow: none !important; break-inside: avoid; }
}

/* ==========================================================================
   Base refinements: scroll-margin (anchors under sticky topbar), sticky
   table headers, gentler row hovers, page fade-in.
   ========================================================================== */

/* Make #q-... anchor scrolls land just below the 56px sticky topbar */
html { scroll-behavior: smooth; }
.question-card,
[id^="finding-"],
[id^="task-"],
[id^="comment-"],
[id^="ba-"],
[id^="section-"] {
  scroll-margin-top: 72px;
}

/* Table headers: opaque, non-sticky. (A previous position:sticky here did not
   work — the .data-table-wrap uses overflow-x:auto, which silently disables
   vertical sticky and left the first row's status badge / Open button ghosting
   through the header. The lists are short enough not to need a pinned header.) */
.data-table thead th,
.app-content table > thead > tr > th {
  position: static;
  background: var(--bg-alt);
}
[data-theme="dark"] .data-table thead th,
[data-theme="dark"] .app-content table > thead > tr > th { background: var(--bg-surface); }

/* Gentler row hover for data tables */
.data-table tbody tr { transition: background-color .12s; }
.data-table tbody tr:hover { background: var(--bg-hover, var(--bg-alt)); }
.data-table a { color: var(--text-primary); }
.data-table a:hover { color: var(--primary); }

/* Page fade-in — pairs with the existing loading bar.
   Suppressed when the user prefers reduced motion. */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app-content { animation: pageFadeIn 160ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .app-content { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Toasts — top-right slide-in for short-lived feedback
   ========================================================================== */
.toast-container {
  position: fixed;
  top: 72px; /* under the 56px topbar + breathing room */
  right: 1rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 2rem));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .75rem .875rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  pointer-events: auto;
  font-size: .875rem;
  line-height: 1.4;
  animation: toastSlideIn 160ms ease-out both;
  border-left: 3px solid var(--text-muted);
}
.toast.is-leaving { animation: toastSlideOut 180ms ease-in forwards; }
.toast-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.toast-body { flex: 1; min-width: 0; word-wrap: break-word; }
.toast-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 .25rem;
  line-height: 1;
  font-size: 1.125rem;
}
.toast-close:hover { color: var(--text-primary); }
.toast.toast-success { border-left-color: var(--color-success); }
.toast.toast-error   { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--color-warning); }
.toast.toast-info    { border-left-color: var(--primary); }
.toast-success .toast-icon { color: var(--color-success); }
.toast-error   .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--color-warning); }
.toast-info    .toast-icon { color: var(--primary); }
@keyframes toastSlideIn  { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastSlideOut { from { opacity: 1; transform: translateX(0);   } to { opacity: 0; transform: translateX(20px); } }

@media (max-width: 480px) {
  .toast-container { left: 1rem; right: 1rem; max-width: none; }
}

/* ==========================================================================
   Tooltips — [data-tip] hover with delay + dark-mode-safe
   ========================================================================== */
[data-tip] { position: relative; }
[data-tip]::before,
[data-tip]::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  transition-delay: 0s;
}
[data-tip]::before {
  content: attr(data-tip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform-origin: bottom center;
  transform: translate(-50%, 4px);
  background: var(--text-primary);
  color: var(--bg-surface);
  font-size: .75rem;
  font-weight: 500;
  padding: .375rem .625rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  max-width: min(280px, 80vw);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  z-index: 50;
}
[data-tip]::after {
  content: "";
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translate(-50%, 4px);
  border: 6px solid transparent;
  border-top-color: var(--text-primary);
  z-index: 50;
}
[data-tip]:hover::before,
[data-tip]:hover::after,
[data-tip]:focus-visible::before,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: .3s;
}
[data-tip-pos="bottom"]::before { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
[data-tip-pos="bottom"]::after  { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--text-primary); transform: translate(-50%, -4px); }
[data-tip-pos="bottom"]:hover::before,
[data-tip-pos="bottom"]:hover::after { transform: translate(-50%, 0); }

/* Inline help marker: a "?" pip next to a label */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: .25rem;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  cursor: help;
  user-select: none;
  vertical-align: 1px;
}
.info-tip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.info-tip:hover, .info-tip:focus-visible {
  background: var(--primary-light);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
[data-theme="dark"] .info-tip:hover, [data-theme="dark"] .info-tip:focus-visible {
  background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ==========================================================================
   Topbar user-menu dropdown (triggered by clicking the user chip)
   ========================================================================== */
/* ---- Topbar org picker (current-org dropdown; superadmin gets search) ---- */
.topbar-org-menu { position: relative; min-width: 0; }
.topbar-org-trigger {
  background: none;
  border: 0;
  cursor: pointer;
  padding: .375rem .625rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-secondary);
  font-size: .875rem;
  font-weight: 500;
  max-width: 100%;
  transition: background .12s ease;
}
.topbar-org-trigger:hover,
.topbar-org-menu.is-open .topbar-org-trigger { background: var(--bg-alt); }
.topbar-org-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
  color: var(--text-primary);
}
.topbar-org-role {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: .0625rem .5rem;
  white-space: nowrap;
}
.topbar-org-static {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-org-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 300px;
  max-width: calc(100vw - 1rem);
  max-height: min(60vh, 480px);
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02);
  z-index: 1100;
  animation: userMenuIn 140ms cubic-bezier(.16,.84,.44,1);
}
.topbar-org-dropdown[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .topbar-org-dropdown { animation: none; } }
.topbar-org-search-wrap {
  padding: .625rem;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-surface);
}
.topbar-org-search { width: 100%; font-size: .875rem; }
.topbar-org-section { padding: .375rem; }
.topbar-org-section + .topbar-org-section { border-top: 1px solid var(--border-color); }
.topbar-org-item { margin: 0; }
.topbar-org-item[hidden] { display: none; }
.topbar-org-item button {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .625rem;
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--text-primary);
  text-align: left;
}
.topbar-org-item button:hover,
.topbar-org-item button:focus-visible { background: var(--bg-alt); }
.topbar-org-item button[aria-current="true"] { font-weight: 600; }
.topbar-org-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-org-check { color: var(--color-success); font-weight: 700; }
.topbar-org-browse {
  display: block;
  padding: .5rem .625rem;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--primary-text, var(--primary));
  text-decoration: none;
}
.topbar-org-browse:hover,
.topbar-org-browse:focus-visible { background: var(--bg-alt); }

/* Full-width variant of the context banner, pinned under the topbar */
.context-banner-topbar {
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  position: sticky;
  top: 56px;
  z-index: 40;
}

.topbar-user-menu { position: relative; }
.topbar-user-menu .topbar-user {
  background: none;
  border: 0;
  cursor: pointer;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text-primary);
  transition: background .12s ease;
}
.topbar-user-menu .topbar-user:hover { background: var(--bg-alt); }
.topbar-user-menu.is-open .topbar-user { background: var(--bg-alt); }
.topbar-user-caret {
  color: var(--text-muted);
  transition: transform .15s ease;
}
.topbar-user-menu.is-open .topbar-user-caret { transform: rotate(180deg); }

.topbar-user-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  min-width: 280px;
  max-width: calc(100vw - 1rem);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02);
  z-index: 1100;
  overflow: hidden;
  animation: userMenuIn 140ms cubic-bezier(.16,.84,.44,1);
}
.topbar-user-dropdown[hidden] { display: none; }
@keyframes userMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right; }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) { .topbar-user-dropdown { animation: none; } }

.topbar-user-dropdown-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border-color);
}
.topbar-user-dropdown-id { min-width: 0; flex: 1; }
.topbar-user-dropdown-name  { font-size: .875rem; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user-dropdown-email { font-size: .75rem; color: var(--text-muted);  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .125rem; }
.topbar-user-dropdown-org {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .375rem;
  font-size: .6875rem;
  color: var(--text-muted);
  font-weight: 500;
}
.topbar-user-dropdown-org svg { opacity: .65; }
.topbar-user-dropdown-role {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0 .375rem;
  border-radius: 100px;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: .125rem;
}

.topbar-user-dropdown-section {
  padding: .25rem 0;
  border-bottom: 1px solid var(--border-color);
}
.topbar-user-dropdown-section:last-child { border-bottom: 0; }
.topbar-user-dropdown a,
.topbar-user-dropdown button {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .5rem .875rem;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: .8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background .1s ease, color .1s ease;
}
.topbar-user-dropdown a:hover,
.topbar-user-dropdown button:hover,
.topbar-user-dropdown a:focus-visible,
.topbar-user-dropdown button:focus-visible {
  background: var(--bg-alt);
  color: var(--text-primary);
  outline: none;
}
.topbar-user-dropdown svg { opacity: .7; flex-shrink: 0; }
.topbar-user-dropdown a:hover svg,
.topbar-user-dropdown button:hover svg { opacity: 1; }
.topbar-user-dropdown-signout { color: var(--danger) !important; }
.topbar-user-dropdown-signout:hover { background: var(--danger-light) !important; }
[data-theme="dark"] .topbar-user-dropdown-signout:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent) !important; }
.topbar-user-dropdown-kbd {
  margin-left: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-size: .6875rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--text-muted);
}
.topbar-user-dropdown-theme-toggle .theme-icon-sun { display: none; }
.topbar-user-dropdown-theme-toggle .theme-icon-moon { display: inline-block; }
[data-theme="dark"] .topbar-user-dropdown-theme-toggle .theme-icon-sun { display: inline-block; }
[data-theme="dark"] .topbar-user-dropdown-theme-toggle .theme-icon-moon { display: none; }

@media (max-width: 480px) {
  .topbar-user-menu .topbar-user .user-name { display: none; }
  .topbar-user-dropdown { right: .5rem; min-width: 240px; }
}

/* ==========================================================================
   Score trend stat strip (dashboard compliance score card)
   ========================================================================== */
.score-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .75rem;
  padding: .75rem;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
}
.score-stat {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}
.score-stat-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.score-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

/* ==========================================================================
   Dashboard "Needs your attention" cards
   ========================================================================== */
.attention-section { margin: 1rem 0 1.5rem; }
.attention-heading {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0 0 .625rem;
}
.attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .625rem;
}
.attention-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
}
.attention-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  border-color: var(--primary);
}
.attention-card-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.attention-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.attention-card-count {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}
.attention-card-label {
  font-size: .8125rem;
  color: var(--text-secondary);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attention-card-arrow {
  color: var(--text-muted);
  opacity: .55;
  transition: transform .12s ease, opacity .12s ease;
}
.attention-card:hover .attention-card-arrow { opacity: 1; transform: translateX(2px); color: var(--primary); }

.attention-card-danger {
  border-left-color: var(--danger);
}
.attention-card-danger .attention-card-icon { background: var(--danger-light); color: var(--danger); }
.attention-card-danger .attention-card-count { color: var(--danger); }

.attention-card-warning {
  border-left-color: var(--color-warning);
}
.attention-card-warning .attention-card-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.attention-card-warning .attention-card-count { color: var(--color-warning-text); }

.attention-card-info {
  border-left-color: var(--primary);
}
.attention-card-info .attention-card-icon { background: var(--primary-light); color: var(--primary); }
.attention-card-info .attention-card-count { color: var(--primary); }

[data-theme="dark"] .attention-card-danger  .attention-card-icon { background: color-mix(in srgb, var(--color-danger) 15%, transparent);  color: var(--color-danger-text); }
[data-theme="dark"] .attention-card-warning .attention-card-icon { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
[data-theme="dark"] .attention-card-info    .attention-card-icon { background: color-mix(in srgb, var(--primary) 18%, transparent);  color: var(--primary-soft); }
[data-theme="dark"] .attention-card-danger  .attention-card-count { color: var(--color-danger-text); }

[data-theme="dark"] .attention-card-info    .attention-card-count { color: var(--primary-soft); }

.attention-empty {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.125rem;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-md);
  color: var(--color-success);
}
.attention-empty p { margin: 0; font-size: .875rem; color: var(--text-secondary); line-height: 1.4; }
[data-theme="dark"] .attention-empty {
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
  color: var(--color-success);
}

/* ==========================================================================
   Compliance deadlines panel — list of upcoming items grouped by category.
   Used by dashboard/index.php after the attention cards.
   ========================================================================== */
.deadlines-card { margin-top: 1rem; padding: 1rem 1.25rem; }
.deadlines-inner {
  border-left: 3px solid var(--color-warning);
  padding-left: .875rem;
}
.deadlines-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .875rem;
}
.deadlines-header h3 {
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text-primary);
}
.deadlines-header svg { color: var(--color-warning); flex-shrink: 0; }
.deadlines-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.deadline-column {
  flex: 1;
  min-width: 220px;
}
.deadline-column-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.deadline-list {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.deadline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .375rem .625rem;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  text-decoration: none;
  color: var(--text-primary);
  transition: background .12s, transform .12s;
}
.deadline-row:hover {
  background: var(--bg-hover);
  transform: translateX(2px);
}
.deadline-row-text {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  flex: 1;
}
.deadline-row-text svg { flex-shrink: 0; }
.deadline-row-text span {
  font-size: .8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deadline-row-badge {
  flex-shrink: 0;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--color-white);
  border-radius: 99px;
  padding: .1rem .45rem;
  white-space: nowrap;
}
.deadline-row-badge-danger  { background: var(--color-danger); }
.deadline-row-badge-warning { background: var(--color-warning); }
.deadline-row-badge-info    { background: var(--color-info); }
@media (max-width: 640px) {
  .deadlines-grid { gap: 1rem; }
  .deadline-column { min-width: 100%; }
}

/* ==========================================================================
   Dark-mode floating-panel shadows — alpha shadows blend into dark bg, so
   bump shadow + add a subtle border-shine for separation.
   ========================================================================== */
[data-theme="dark"] .oh-modal-card,
[data-theme="dark"] .confirm-card,
[data-theme="dark"] .notif-dropdown,
[data-theme="dark"] .topbar-user-dropdown,
[data-theme="dark"] .shortcut-card,
[data-theme="dark"] .evidence-picker-card {
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}
[data-theme="dark"] .attention-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
[data-theme="dark"] .toast {
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}

/* ==========================================================================
   Attention grid + activity feed — mobile rules
   ========================================================================== */
@media (max-width: 640px) {
  .attention-grid { grid-template-columns: 1fr; gap: .5rem; }
  .attention-card-icon { width: 32px; height: 32px; }
  .activity-item { padding: .5rem 0; font-size: .8125rem; gap: .5rem; }
  .activity-item .avatar-sm { display: none; } /* save space on phone */
}

/* ==========================================================================
   Activity feed — recent events on the dashboard
   ========================================================================== */
.activity-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.activity-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: .875rem;
}
.activity-item:last-child { border-bottom: 0; }
.activity-item-body { flex: 1; min-width: 0; line-height: 1.4; }
.activity-item-actor { font-weight: 500; color: var(--text-primary); }
.activity-item-event { color: var(--text-secondary); }
.activity-item-event::before { content: " — "; color: var(--text-subtle); }
.activity-item time { font-size: .75rem; color: var(--text-muted); flex-shrink: 0; }

/* CSV import preview summary header */
.import-preview-summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .875rem;
}

/* ==========================================================================
   Skip-to-main-content link — visible on keyboard focus
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 10000;
  background: var(--primary);
  color: var(--color-white);
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: .875rem;
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--bg-surface);
  outline-offset: 2px;
}

/* ==========================================================================
   Skeleton loaders — shimmer placeholders for AJAX content
   ========================================================================== */
.skeleton {
  display: inline-block;
  background:
    linear-gradient(90deg,
      var(--bg-alt) 0%,
      var(--bg-hover, var(--gray-100)) 50%,
      var(--bg-alt) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
  user-select: none;
}
.skeleton-line   { display: block; height: .875em; margin: .375em 0; }
.skeleton-circle { display: inline-block; border-radius: 50%; }
@keyframes skeletonShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--bg-alt); }
}

/* ==========================================================================
   Shortcut help modal
   ========================================================================== */
.shortcut-modal {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.shortcut-modal[hidden] { display: none; }

/* Subtle always-present affordance so users discover shortcuts exist and can
   see the ones for the current page. Sits out of the way (bottom-left), quiet
   until hover; hidden on touch / narrow screens where shortcuts don't apply. */
.shortcut-hint {
  position: fixed;
  left: .85rem;
  bottom: .85rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--transition), color var(--transition), border-color var(--transition);
}
.shortcut-hint:hover,
.shortcut-hint:focus-visible { opacity: 1; color: var(--text-primary); border-color: var(--border-strong, var(--text-muted)); }
.shortcut-hint .shortcut-kbd { border: 0; background: none; box-shadow: none; padding: 0; font-size: .8125rem; }
@media (max-width: 768px), (hover: none) { .shortcut-hint { display: none; } }
@media print { .shortcut-hint { display: none; } }
.shortcut-card {
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.shortcut-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.shortcut-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.shortcut-body {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 1.25rem 1.25rem;
}
.shortcut-section {
  margin-top: 1rem;
}
.shortcut-section:first-child { margin-top: 0; }
.shortcut-section h3 {
  margin: 0 0 .5rem;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}
.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .375rem 0;
  border-top: 1px dashed var(--border-color);
  font-size: .875rem;
}
.shortcut-row:first-of-type { border-top: 0; }
.shortcut-keys { display: inline-flex; gap: .25rem; }
.shortcut-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 .375rem;
  min-width: 22px;
  height: 22px;
  font-size: .75rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ==========================================================================
   Empty-state polish (extends earlier base class with a friendly icon area)
   ========================================================================== */
.empty-state .empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-muted);
}
.empty-state h3 { margin: 0 0 .375rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.empty-state p  { margin: 0 0 1rem; }

/* ==========================================================================
   Icon normalization — gentle pass that aligns inconsistent SVG strokes
   across pages without touching markup. Targets `<svg fill="none">` icons
   that use `currentColor` strokes (the dominant pattern in this app).
   ========================================================================== */
svg[fill="none"] path[stroke="currentColor"],
svg[fill="none"] circle[stroke="currentColor"],
svg[fill="none"] rect[stroke="currentColor"],
svg[fill="none"] line[stroke="currentColor"],
svg[fill="none"] polyline[stroke="currentColor"],
svg[fill="none"] polygon[stroke="currentColor"] {
  vector-effect: non-scaling-stroke;
}
/* Default icon stroke for the dashboard chrome — only applied when there's
   no inline stroke-width override on the parent element class. */
.btn svg[fill="none"], .sidebar-link svg[fill="none"],
.topbar-right svg[fill="none"], .filter-select + svg[fill="none"] {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Confirm modal — styled replacement for window.confirm (OHConfirm)
   ========================================================================== */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: confirmFadeIn 120ms ease-out;
}
.confirm-modal.is-leaving { animation: confirmFadeOut 160ms ease-in forwards; }
.confirm-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 1.25rem 1.25rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .875rem;
  row-gap: .75rem;
  animation: confirmPopIn 180ms cubic-bezier(.16,.84,.44,1);
}
.confirm-modal.is-leaving .confirm-card { animation: confirmPopOut 140ms ease-in forwards; }
.confirm-icon {
  grid-row: 1;
  grid-column: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.confirm-danger  .confirm-icon { color: var(--danger);  background: var(--danger-light); }
.confirm-primary .confirm-icon { color: var(--primary); background: var(--primary-light); }
[data-theme="dark"] .confirm-danger  .confirm-icon { background: color-mix(in srgb, var(--color-danger) 18%, transparent);  color: var(--color-danger-text); }
[data-theme="dark"] .confirm-primary .confirm-icon { background: color-mix(in srgb, var(--primary) 22%, transparent);  color: var(--primary-soft); }
.confirm-content { grid-row: 1; grid-column: 2; min-width: 0; }
.confirm-title { margin: .125rem 0 .25rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.confirm-body  { margin: 0; font-size: .875rem; color: var(--text-secondary); line-height: 1.5; }
.confirm-typing-label {
  display: block;
  margin: .75rem 0 .25rem;
  font-size: .75rem;
  color: var(--text-muted);
}
.confirm-typing-label strong {
  color: var(--danger);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
}
.confirm-typing { width: 100%; font-family: ui-monospace, SFMono-Regular, monospace; }
.confirm-prompt-label {
  display: block;
  margin: .75rem 0 .25rem;
  font-size: .75rem;
  color: var(--text-muted);
}
.confirm-prompt { width: 100%; resize: vertical; }
.confirm-actions {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: .25rem;
}
@keyframes confirmFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes confirmPopIn   { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes confirmPopOut  { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .confirm-modal, .confirm-card { animation: none; }
}

/* ==========================================================================
   Button loading state — toggled by OHBusy.on(btn) / OHBusy.off(btn)
   The original label is preserved; a spinner overlays via ::after.
   ========================================================================== */
.btn[data-busy="1"] {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
.btn[data-busy="1"] > * { visibility: hidden; }
.btn[data-busy="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text-primary);
  animation: btnSpin .6s linear infinite;
}
.btn-primary[data-busy="1"]::after, .btn-primary.is-busy::after,
.btn-danger[data-busy="1"]::after,  .btn-danger.is-busy::after  { color: var(--color-white); }
.btn-outline[data-busy="1"]::after, .btn-outline.is-busy::after,
.btn-ghost[data-busy="1"]::after,   .btn-ghost.is-busy::after   { color: var(--text-primary); }
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-busy="1"]::after::after { animation: none; }
}

/* ==========================================================================
   Breadcrumbs — rendered by templates/partials/breadcrumb.php
   ========================================================================== */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .125rem;
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--text-muted);
}
.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  min-width: 0;
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: .125rem .375rem;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease;
}
.breadcrumb a:hover { color: var(--text-primary); background: var(--bg-alt); }
[data-theme="dark"] .breadcrumb a:hover { background: rgba(255,255,255,.06); }
.breadcrumb .breadcrumb-sep {
  display: inline-flex;
  color: var(--text-muted);
  opacity: .45;
  padding: 0 .125rem;
}
.breadcrumb [aria-current="page"] {
  color: var(--text-primary);
  font-weight: 500;
  padding: .125rem .375rem;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Sortable data-table headers — enabled by adding `data-sortable` to a
   `.data-table` and `data-sort="key"` to its `<th>` cells.
   ========================================================================== */
.data-table[data-sortable] th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table[data-sortable] th[data-sort]:hover { color: var(--text-primary); }
.data-table[data-sortable] th[data-sort]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.data-table th .sort-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: .25rem;
  vertical-align: -1px;
  color: var(--text-muted);
  opacity: .35;
  transition: opacity .12s ease, color .12s ease, transform .12s ease;
}
.data-table th[data-sort]:hover .sort-indicator { opacity: .8; }
.data-table th[aria-sort="ascending"]  .sort-indicator,
.data-table th[aria-sort="descending"] .sort-indicator {
  opacity: 1;
  color: var(--primary);
}
.data-table th[aria-sort="descending"] .sort-indicator { transform: rotate(180deg); }

/* ==========================================================================
   Utility classes — small, single-purpose; gradually replace inline styles.
   Naming follows: u-{property}-{value}.  Aliases without the `u-` prefix
   exist for the most common cases so markup stays terse.
   ========================================================================== */

/* Text size */
.fs-xs   { font-size: .75rem; }
.fs-sm   { font-size: .8125rem; }
.fs-md   { font-size: .875rem; }
.fs-lg   { font-size: 1rem; }
.fs-xl   { font-size: 1.125rem; }

/* Text weight */
.fw-400  { font-weight: 400; }
.fw-500  { font-weight: 500; }
.fw-600  { font-weight: 600; }
.fw-700  { font-weight: 700; }

/* Text color (semantic — uses tokens, dark-mode safe) */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-subtle    { color: var(--text-subtle); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--danger); }
.text-info      { color: var(--color-info); }
.text-brand     { color: var(--primary); }
.text-inherit   { color: inherit; }
.muted          { color: var(--text-muted); }

/* Text alignment */
.ta-left   { text-align: left; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }

/* Truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap   { white-space: nowrap; }

/* Display */
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-none         { display: none; }
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.flex-col       { display: flex; flex-direction: column; }
.flex-row       { display: flex; flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-start    { justify-content: flex-start; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.justify-between  { justify-content: space-between; }
.flex-1   { flex: 1; }
.flex-grow{ flex-grow: 1; }
.flex-none{ flex: none; }

/* Gap */
.gap-xs { gap: .25rem; }
.gap-sm { gap: .5rem; }
.gap-md { gap: .75rem; }
.gap-lg { gap: 1rem; }
.gap-xl { gap: 1.5rem; }

/* Margin (scale: xs=.25, sm=.5, md=.75, lg=1, xl=1.5, 2xl=2) */
.m-0    { margin: 0; }
.mt-xs  { margin-top: .25rem; }
.mt-sm  { margin-top: .5rem; }
.mt-md  { margin-top: .75rem; }
.mt-lg  { margin-top: 1rem; }
.mt-xl  { margin-top: 1.5rem; }
.mt-2xl { margin-top: 2rem; }
.mb-xs  { margin-bottom: .25rem; }
.mb-sm  { margin-bottom: .5rem; }
.mb-md  { margin-bottom: .75rem; }
.mb-lg  { margin-bottom: 1rem; }
.mb-xl  { margin-bottom: 1.5rem; }
.mb-2xl { margin-bottom: 2rem; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding (rarely needed inline; provide for one-offs) */
.pt-0  { padding-top: 0; }
.p-0   { padding: 0; }
.p-xs  { padding: .25rem; }
.p-sm  { padding: .5rem; }
.p-md  { padding: .75rem; }
.p-lg  { padding: 1rem; }

/* The "stack" pattern: vertical rhythm via consecutive-child margin */
.stack > * + *      { margin-top: 1rem; }
.stack-sm > * + *   { margin-top: .5rem; }

/* Width helpers */
.w-full      { width: 100%; }

/* Visibility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Generic `.badge` — semantic variants. Use this for ad-hoc pills instead of
   handcrafted inline styles. The `.pill`, `.risk-badge`, and `.scope-badge`
   families keep their specific palettes for their dedicated surfaces.
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .15rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 100px;
  border: 1px solid transparent;
  background: var(--bg-alt);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge-muted   { background: var(--bg-alt);            color: var(--text-muted);     border-color: var(--border-color); }
.badge-success { background: var(--color-success-bg);  color: var(--color-success);  border-color: var(--color-success-border); }
.badge-warning { background: var(--color-warning-bg);  color: var(--color-warning-text); border-color: var(--color-warning-border); }
.badge-danger  { background: var(--color-danger-bg);   color: var(--color-danger-text); border-color: var(--color-danger-border); }
.badge-info    { background: var(--color-info-bg);     color: var(--color-info);     border-color: var(--color-info-border); }
.badge-brand   { background: var(--primary-light);     color: var(--primary);        border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.badge-purple  { background: var(--color-purple-bg);   color: var(--color-purple);   border-color: color-mix(in srgb, var(--color-purple) 30%, transparent); }
.badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Dark-mode badge colors come entirely from the token remap (tokens.css) —
   no per-variant overrides needed; badges now match the .pill family exactly. */

/* ==========================================================================
   Filter chips — render active filters as removable chips above a list page.
   Markup:
     <div class="filter-chip-bar" data-filter-chips>
       <span class="filter-chip" data-filter-key="status" data-filter-value="open">
         Status: Open <button type="button" aria-label="Remove filter">×</button>
       </span>
       <button type="button" class="filter-chip-clear">Clear all</button>
     </div>
   The OHFilterChips JS module wires the buttons to remove URL params.
   ========================================================================== */
.filter-chip-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  margin: -.25rem 0 .75rem;
  min-height: 1.75rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5rem .25rem .625rem;
  font-size: .75rem;
  font-weight: 500;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 100px;
  line-height: 1.3;
}
.filter-chip strong { font-weight: 600; color: var(--text-primary); }
.filter-chip button {
  background: none;
  border: 0;
  padding: 0 .125rem;
  margin-left: .125rem;
  cursor: pointer;
  color: var(--primary);
  font-size: 1rem;
  line-height: 1;
  border-radius: 50%;
  opacity: .65;
  transition: opacity .12s ease, background .12s ease;
}
.filter-chip button:hover { opacity: 1; background: color-mix(in srgb, var(--primary) 15%, transparent); }
.filter-chip-clear {
  background: none;
  border: 0;
  font-size: .75rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
}
.filter-chip-clear:hover { color: var(--text-primary); background: var(--bg-alt); }
[data-theme="dark"] .filter-chip {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  color: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
[data-theme="dark"] .filter-chip strong { color: var(--text-primary); }

/* ==========================================================================
   Bulk action bar — slide-in from bottom when rows are selected.
   Used via OHBulk JS module. Wraps a checkbox table:
     <table data-bulk-select>
       <tbody><tr><td><input type="checkbox" class="bulk-check" value="123"></td></tr></tbody>
     </table>
   ========================================================================== */
.bulk-bar {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translate(-50%, 120%);
  z-index: 8500;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem .625rem 1rem;
  background: var(--bg-inverse); /* slate-900 — explicit so it stays dark on both themes */
  color: var(--color-white);
  border-radius: 100px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  font-size: .8125rem;
  transition: transform .22s cubic-bezier(.16,.84,.44,1), opacity .18s ease;
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
[data-theme="dark"] .bulk-bar {
  /* background comes from --bg-inverse (raised in dark, so the chip stands out) */
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.bulk-bar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.bulk-bar-count { font-weight: 600; }
.bulk-bar-sep   { width: 1px; height: 16px; background: rgba(255,255,255,.18); }
.bulk-bar .btn {
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255,255,255,.18);
  padding: .25rem .625rem;
  font-size: .75rem;
  font-weight: 500;
}
.bulk-bar .btn:hover { background: rgba(255,255,255,.08); }
.bulk-bar .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
}
.bulk-bar .btn-danger:hover { background: var(--color-danger); }
.bulk-bar-close {
  background: none;
  border: 0;
  color: rgba(255,255,255,.55);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .25rem;
}
.bulk-bar-close:hover { color: var(--color-white); }

/* ==========================================================================
   Generic modal primitive (OHModal) — replaces the hand-rolled modals.
   Markup:
     <div class="oh-modal" id="x" hidden>
       <div class="oh-modal-card">
         <header class="oh-modal-head"><h3>Title</h3><button data-oh-modal-close>×</button></header>
         <div class="oh-modal-body">…</div>
         <footer class="oh-modal-foot">…buttons…</footer>
       </div>
     </div>
   ========================================================================== */
.oh-modal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: ohModalFadeIn 140ms ease-out;
}
.oh-modal[hidden] { display: none; }
.oh-modal.is-leaving { animation: ohModalFadeOut 180ms ease-in forwards; }
.oh-modal-card {
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ohModalPopIn 200ms cubic-bezier(.16,.84,.44,1);
}
.oh-modal.is-leaving .oh-modal-card { animation: ohModalPopOut 160ms ease-in forwards; }
.oh-modal-card.oh-modal-lg { max-width: 720px; }
.oh-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
.oh-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.oh-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.oh-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-alt);
}
.oh-modal-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
}
.oh-modal-close:hover { color: var(--text-primary); background: var(--bg-alt); }
@keyframes ohModalFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ohModalFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes ohModalPopIn   { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ohModalPopOut  { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(4px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .oh-modal, .oh-modal-card { animation: none; }
}

/* ==========================================================================
   Form-field validation — toggled by OHValidate JS module.
   The native :invalid pseudo only kicks in after first interaction (via the
   `is-touched` class we set on blur), so users don't see red errors before
   they've typed anything.
   ========================================================================== */
.form-input.is-touched:invalid,
textarea.form-input.is-touched:invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 12%, transparent);
}
.form-input.is-touched:valid {
  border-color: color-mix(in srgb, var(--color-success) 60%, var(--border-color));
}
.form-error {
  display: none;
  margin-top: .375rem;
  font-size: .75rem;
  color: var(--danger);
  line-height: 1.4;
}
.form-group.has-error .form-error,
.form-error.is-visible {
  display: block;
}
.form-group.has-error .form-input { border-color: var(--danger); }
/* ==========================================================================
   Avatar — circular initials by default, optionally renders an image.
   Use via the avatar.php partial which picks size + image source.
   ========================================================================== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .02em;
  overflow: hidden;
  user-select: none;
  flex-shrink: 0;
  position: relative;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.avatar-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
}
.avatar-grav .avatar-fallback { z-index: 1; }
.avatar-grav img { z-index: 2; }
.avatar-sm  { width: 24px; height: 24px; font-size: .625rem; }
.avatar-md  { width: 32px; height: 32px; font-size: .75rem; }
.avatar-lg  { width: 40px; height: 40px; font-size: .875rem; }
.avatar-xl  { width: 56px; height: 56px; font-size: 1.125rem; }
/* Avatar tints — the guide's six-hue set as token mixes (style-guide
   §Steppers & avatars). Fully token-driven: the mixes and the -text tokens
   carry both themes, so no dark overrides are needed. */
.avatar-tint-1 { background: color-mix(in srgb, var(--primary) 16%, transparent);       color: var(--primary-text); }
.avatar-tint-2 { background: color-mix(in srgb, var(--color-purple) 16%, transparent);  color: var(--color-purple); }
.avatar-tint-3 { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success-text); }
.avatar-tint-4 { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning-text); }
.avatar-tint-5 { background: color-mix(in srgb, var(--color-danger) 16%, transparent);  color: var(--color-danger-text); }
.avatar-tint-6 { background: color-mix(in srgb, var(--color-info) 16%, transparent);    color: var(--color-info-text); }
.avatar-stack {
  display: inline-flex;
}
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--bg-surface); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ==========================================================================
   Empty-state card — used via empty-state.php partial
   ========================================================================== */
.empty-state-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--bg-surface);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}
[data-theme="dark"] .empty-state-card { border-color: rgba(255,255,255,.1); }
.empty-state-card .empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto .875rem;
  background: var(--bg-alt);
  color: var(--text-muted);
  border-radius: 50%;
}
.empty-state-card h3 { margin: 0 0 .375rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.empty-state-card p  { margin: 0 auto 1rem; max-width: 42ch; color: var(--text-muted); font-size: .875rem; line-height: 1.5; }
.empty-state-card .empty-state-actions { display: inline-flex; gap: .5rem; }

/* ==========================================================================
   Icon-only button polish — subtle ring + press feedback for theme/bell/etc.
   ========================================================================== */
.icon-btn,
.sidebar-toggle-btn,
.theme-toggle,
.notif-bell-btn {
  transition: background .12s ease, transform .08s ease, color .12s ease;
}
.icon-btn:active,
.sidebar-toggle-btn:active,
.theme-toggle:active,
.notif-bell-btn:active {
  transform: scale(.94);
}

/* ==========================================================================
   Notifications drawer — bell button, badge, dropdown panel.
   Mounted into the topbar by head.php JS (looks for `.topbar-right`).
   ========================================================================== */
.notif-bell-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-bell-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: .375rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.notif-bell-btn:hover { background: var(--bg-alt); color: var(--text-primary); }
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger);
  color: var(--color-white);
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: .625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg-surface);
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 1rem);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.02);
  z-index: 1050;
  display: none;
  flex-direction: column;
  max-height: 480px;
  overflow: hidden;
  transform-origin: top right;
  animation: notifDropIn 140ms cubic-bezier(.16,.84,.44,1);
}
.notif-dropdown.is-open { display: flex; }
@keyframes notifDropIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-dropdown { animation: none; }
}
.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .875rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  gap: .5rem;
}
.notif-dropdown-title { font-size: .875rem; font-weight: 600; color: var(--text-primary); flex: 1; }
.notif-mark-all-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: .75rem;
  color: var(--primary);
  padding: 0;
  white-space: nowrap;
  font-weight: 500;
}
.notif-mark-all-btn:hover { text-decoration: underline; }
.notif-close-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: .25rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.notif-close-btn:hover { background: var(--bg-alt); color: var(--text-primary); }
.notif-dropdown-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: block;
  padding: .75rem .875rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background .1s;
  color: var(--text-secondary);
}
.notif-item:hover { background: var(--bg-alt); }
.notif-item.unread {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  padding-left: calc(.875rem - 3px);
}
[data-theme="dark"] .notif-item.unread { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.notif-item:last-child { border-bottom: 0; }
.notif-item-title { font-size: .8125rem; font-weight: 500; color: var(--text-primary); margin-bottom: .15rem; line-height: 1.35; }
.notif-item-body  { font-size: .75rem;   color: var(--text-secondary); margin-bottom: .15rem; line-height: 1.4; }
.notif-item-time  { font-size: .6875rem; color: var(--text-muted); }
.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  font-size: .875rem;
  color: var(--text-subtle);
}
.notif-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 auto .5rem;
  background: var(--bg-alt);
  color: var(--text-subtle);
  border-radius: 50%;
}
.notif-skeleton {
  padding: .75rem .875rem;
  border-bottom: 1px solid var(--border-color);
}
.notif-skeleton:last-child { border-bottom: 0; }
.notif-dropdown-footer {
  padding: .625rem .875rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.notif-dropdown-footer a {
  font-size: .8125rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.notif-dropdown-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Chord nav hint — small badge in the bottom-right corner when `g` is pressed
   ========================================================================== */
.chord-hint {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9000;
  background: var(--bg-inverse);
  color: var(--color-white);
  padding: .375rem .75rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
[data-theme="dark"] .chord-hint {
  /* background comes from --bg-inverse (raised in dark) */
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.chord-hint.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .chord-hint { transition: none; } }

/* ==========================================================================
   Search dropdown section labels + recent items polish
   ========================================================================== */
.search-section-label {
  display: block;
  padding: .375rem .75rem .25rem;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
}


/* ==========================================================================
   Page nav transition — fades the main content slightly while a link
   is loading. Pairs with the top loading bar in app.js.
   ========================================================================== */
.is-navigating .app-content {
  opacity: .55;
  pointer-events: none;
  transition: opacity .14s ease;
}
@media (prefers-reduced-motion: reduce) {
  .is-navigating .app-content { opacity: 1; transition: none; }
}

/* ==========================================================================
   Mobile responsive — small-screen rules for the new components.
   ========================================================================== */
@media (max-width: 640px) {
  /* Data tables: horizontal scroll inside the wrap, hint with shadow */
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 1rem;
  }
  .data-table { font-size: .8125rem; }
  /* Only force the horizontal-scroll min-width when the table is inside a
     scroll wrapper — an unwrapped .data-table must stay within the viewport
     instead of pushing the whole page wide on phones. */
  .data-table-wrap .data-table,
  .scroll-x .data-table { min-width: 600px; }

  /* Filter toolbar: stack vertically, full-width selects */
  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .admin-toolbar .filter-select,
  .admin-toolbar .form-input { width: 100%; max-width: none; }
  .admin-toolbar .btn { width: 100%; }

  /* Modal cards: full-width on small screens */
  .oh-modal { padding: .75rem; align-items: flex-end; }
  .oh-modal-card { max-width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .oh-modal-head, .oh-modal-body, .oh-modal-foot { padding-left: 1rem; padding-right: 1rem; }
  .confirm-modal { padding: .75rem; align-items: flex-end; }
  .confirm-card { max-width: 100%; }

  /* Bulk bar: full-width, label hidden when actions get tight */
  .bulk-bar {
    left: .5rem;
    right: .5rem;
    transform: translateY(120%);
    max-width: none;
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
  }
  .bulk-bar.is-visible { transform: translateY(0); }

  /* Filter chip bar: tighter gaps */
  .filter-chip-bar { gap: .25rem; }

  /* Chord hint: move up so it's not over thumb area */
  .chord-hint { bottom: 4rem; left: 50%; transform: translate(-50%, 8px); }
  .chord-hint.is-visible { transform: translate(-50%, 0); }

  /* Notification drawer: full-width sheet from the right */
  .notif-dropdown {
    position: fixed;
    top: 56px;
    right: .5rem;
    left: .5rem;
    width: auto;
    max-height: calc(100vh - 72px);
  }

  /* Breadcrumb: hide ellipsis on the leaf to allow wrap */
  .breadcrumb [aria-current="page"] { max-width: none; white-space: normal; }

  /* Stat pills wrap to fill the row on small screens */
  .risk-summary-row .risk-pill,
  .remediation-stats-row .rem-stat-pill { flex: 1 1 calc(50% - .625rem); }

  /* Page header: stack title + actions */
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header > div:last-child { flex-wrap: wrap; }

  /* Form row: stack */
  .form-row { flex-direction: column; gap: 0; }
}
@media (max-width: 480px) {
  .data-table { font-size: .75rem; }
  /* Smaller btn padding when actions are crammed */
  .bulk-bar .btn { padding: .25rem .5rem; font-size: .6875rem; }
}

/* ==========================================================================
   Print — used by reports (board-summary, CAP, certificate, OCR package, etc.)
   Hides app chrome so the content fits A4 / Letter cleanly.
   ========================================================================== */
@media print {
  /* Strip the app shell */
  .app-sidebar,
  .app-topbar,
  .sidebar-toggle-btn,
  .theme-toggle,
  .topbar-right,
  .topbar-user,
  .topbar-alert,
  .notif-bell-wrap,
  .search-wrap,
  .filter-chip-bar,
  .admin-toolbar,
  .bulk-bar,
  .chord-hint,
  .toast-container,
  .breadcrumb,
  .btn,
  .icon-btn,
  .sidebar-overlay,
  #loading-bar,
  .oh-modal,
  .confirm-modal,
  .shortcut-modal,
  .evidence-lightbox,
  .evidence-picker-modal,
  details,
  .skip-link,
  [data-no-print] { display: none !important; }

  /* Reset body / layout for print flow */
  html, body {
    background: #fff !important;
    color: #111 !important;
    font-size: 11pt;
  }
  .app-layout, .app-main {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .app-content {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: none !important;
  }
  .page-header { border-bottom: 1px solid #999; padding-bottom: .5rem; margin-bottom: 1rem; }
  .page-header h1 { font-size: 18pt; }
  .settings-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  /* Tables: explicit borders, prevent row-splitting */
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
    page-break-inside: auto;
  }
  .data-table th, .data-table td {
    border: 1px solid #ccc;
    padding: 4pt 6pt;
  }
  .data-table thead { background: #f3f3f3; display: table-header-group; }
  .data-table tbody tr { page-break-inside: avoid; }

  /* Status / risk pills as colorless text */
  .pill, .risk-badge, .badge, .scope-badge {
    background: transparent !important;
    border: 1px solid #999 !important;
    color: #111 !important;
    padding: 1pt 4pt !important;
  }

  /* Anchors: underline + show URL hint for important links */
  a { color: #111; text-decoration: underline; }
  a[href]::after { content: ""; } /* don't pollute with raw URLs by default */
  .data-table a[href]::after { content: ""; }

  /* Avoid breaks inside critical blocks */
  h1, h2, h3, h4 { page-break-after: avoid; }
  table, figure, .empty-state-card { page-break-inside: avoid; }
}


/* ---- Rendered Markdown (blog posts, in-app docs — F22/F23) ---- */
.md-body { color: var(--text-secondary); }
.md-body p { margin: 0 0 1rem; line-height: 1.7; }
.md-body .md-h { color: var(--text-primary); font-weight: 600; margin: 1.5rem 0 .5rem; line-height: 1.3; }
.md-body h2.md-h { font-size: 1.35rem; }
.md-body h3.md-h { font-size: 1.15rem; }
.md-body h4.md-h, .md-body h5.md-h { font-size: 1rem; }
.md-body .md-list { margin: 0 0 1rem 1.25rem; padding: 0; }
.md-body .md-list li { margin: .25rem 0; line-height: 1.6; }
.md-body .md-quote { margin: 0 0 1rem; padding: .5rem 1rem; border-left: 3px solid var(--border-strong, var(--border-color)); color: var(--text-muted); background: var(--bg-alt); border-radius: var(--radius-sm); }
.md-body .md-code { margin: 0 0 1rem; padding: .875rem 1rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius); overflow-x: auto; font-size: .8125rem; }
.md-body code { background: var(--bg-alt); padding: .1rem .35rem; border-radius: var(--radius-sm); font-size: .85em; }
.md-body .md-code code { background: none; padding: 0; }
.md-body a { color: var(--primary); text-decoration: underline; }
.md-body hr { border: 0; border-top: 1px solid var(--border-color); margin: 1.5rem 0; }
.bordered-bottom { border-bottom: 1px solid var(--border-color); }

/* Contextual help link in page headers (F23) */
.help-link { display: inline-flex; align-items: center; color: var(--text-muted); margin-left: .4rem; vertical-align: middle; }
.help-link:hover { color: var(--primary); }

/* ---- Persistent "Ask Sherpa" launcher (topbar button + slide-in panel) ---- */
.topbar-sherpa-btn {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .375rem .625rem; background: transparent;
    border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px);
    color: var(--text-secondary, var(--text-muted)); font-size: .8125rem; font-weight: 500;
    cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.topbar-sherpa-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.topbar-sherpa-btn[aria-expanded="true"] { color: var(--primary); border-color: var(--primary); }
.topbar-sherpa-label { white-space: nowrap; }
@media (max-width: 640px) { .topbar-sherpa-label { display: none; } }

.sherpa-launcher {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
    z-index: 1200; display: flex; flex-direction: column;
    background: var(--bg-surface, var(--bg-body));
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 28px rgba(0,0,0,.14);
    transform: translateX(100%); transition: transform .18s ease;
}
.sherpa-launcher.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .sherpa-launcher { transition: none; } }
.sherpa-launcher-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border-color); }
.sherpa-launcher-title { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; }
.sherpa-launcher-full { margin-left: auto; font-size: .8125rem; font-weight: 500; color: var(--text-brand, var(--primary)); }
.sherpa-launcher-full:hover { text-decoration: underline; }
.sherpa-launcher-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.sherpa-launcher-empty { display: flex; flex-direction: column; gap: .75rem; }
.sherpa-launcher-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.sherpa-launcher-composer { display: flex; gap: .5rem; padding: .75rem 1rem .5rem; border-top: 1px solid var(--border-color); }
.sherpa-launcher-composer .form-input { flex: 1 1 auto; }
.sherpa-launcher-foot { padding: 0 1rem .75rem; }

/* ---- Sherpa (AI chat) ---- */
.sherpa-shell { display: flex; flex-direction: column; }
.sherpa-transcript {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 200px;
  max-height: 52vh;
  overflow-y: auto;
  padding: .25rem;
  margin-bottom: 1rem;
}
.sherpa-empty { text-align: center; padding: 2.5rem 1rem; }
.sherpa-msg { display: flex; }
.sherpa-msg-user { justify-content: flex-end; }
.sherpa-msg-ai   { justify-content: flex-start; }
.sherpa-bubble {
  max-width: 80%;
  padding: .625rem .875rem;
  border-radius: var(--radius-lg);
  font-size: .9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.sherpa-msg-user .sherpa-bubble {
  background: var(--primary);
  color: var(--color-white);
  border-bottom-right-radius: var(--radius-sm);
}
.sherpa-msg-ai .sherpa-bubble {
  background: var(--bg-alt);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-bottom-left-radius: var(--radius-sm);
}
.sherpa-citations {
  margin: .5rem 0 0;
  padding: .5rem 0 0 1rem;
  border-top: 1px solid var(--border-color);
  font-size: .8125rem;
  color: var(--text-muted);
}
.sherpa-citations li { margin: .15rem 0; }
.sherpa-lowconf { margin: .5rem 0 0; font-size: .8125rem; color: var(--color-warning-text); }
.sherpa-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sherpa-chip {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: .375rem .75rem;
  font-size: .8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.sherpa-chip:hover { background: var(--bg-alt); color: var(--text-primary); border-color: var(--border-strong, var(--text-muted)); }
.sherpa-composer { display: flex; gap: .5rem; }
.sherpa-composer .form-input { flex: 1; }
.sherpa-thinking { display: inline-flex; gap: .25rem; align-items: center; }
.sherpa-thinking span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: sherpaPulse 1.2s infinite ease-in-out;
}
.sherpa-thinking span:nth-child(2) { animation-delay: .2s; }
.sherpa-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes sherpaPulse { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sherpa-thinking span { animation: none; } }

/* ---- Sherpa Daily Brief panel ---- */
.sherpa-brief-list { margin: .5rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.sherpa-brief-list li { font-size: .9375rem; color: var(--text-secondary); }
.sherpa-brief-action {
  display: flex; gap: .625rem; align-items: flex-start;
  margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--border-color);
}

/* ---- Sherpa Evidence radar panel ---- */
.sherpa-radar-subhead {
  margin: .875rem 0 .375rem; font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.sherpa-radar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.sherpa-radar-list li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; }
.sherpa-radar-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sherpa-radar-due { margin-left: auto; color: var(--text-muted); font-size: .8125rem; flex: none; }

/* ---- Explain this requirement (assessment question) ----
   A collapsible, compact panel: smaller body text than the question itself,
   and a capped scroll height so a long explanation never dominates the page.
   The trigger caret rotates when open (driven by aria-expanded in JS). */
.ai-explain { margin-top: .5rem; }
.ai-explain-caret { transition: transform var(--transition-base); }
[data-ai-explain-btn][aria-expanded="true"] .ai-explain-caret { transform: rotate(180deg); }
.ai-explain-body {
  margin-top: .5rem; padding: .75rem .875rem;
  background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  max-height: 22rem; overflow-y: auto;
}
.ai-explain-summary {
  margin: 0 0 .5rem; font-size: .8125rem; line-height: 1.55; color: var(--text-secondary);
  white-space: pre-wrap;
}
/* auto-fit so a single populated section (e.g. only "Good evidence") fills the
   width instead of leaving the second column as dead space; two sections sit
   side-by-side when there's room, then stack under 640px. */
.ai-explain-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .ai-explain-cols { grid-template-columns: 1fr; } }
.ai-explain-subhead {
  margin: 0 0 .25rem; font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted);
}
.ai-explain-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.ai-explain-list li { font-size: .8125rem; color: var(--text-secondary); line-height: 1.5; }

/* ---- Draft answer (suggest-only) ---- */
.ai-draft-btn { /* shares .ai-eval-btn layout */ margin-left: .25rem; }
.ai-draft {
  margin-top: .5rem; padding: .75rem .875rem;
  background: var(--bg-alt); border: 1px dashed var(--border-color); border-radius: var(--radius-lg);
}
.ai-draft-suggested { font-size: .875rem; color: var(--text-secondary); margin-bottom: .375rem; }
.ai-draft-notes { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; }
.ai-draft-caveat { margin: .5rem 0; font-size: .8125rem; color: var(--color-warning-text); }
.ai-draft-suggested-btn { outline: 2px solid var(--primary); outline-offset: 1px; }
.ai-draft-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; }

/* Evidence radar — actionable row deep-links (A4). The row is a flex line:
   badge · name · due (pushed right via its own margin-left:auto) · action. */
.sherpa-radar-action { flex: none; margin-left: .5rem; font-size: .8125rem; font-weight: 500; color: var(--text-brand, var(--primary)); white-space: nowrap; }

/* ---- A1 unified question AI panel ---- */
.ai-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.ai-toolbar-label { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-right: .25rem; }
.ai-toolbar-nudge { background: transparent; border: 0; padding: 0; font-size: .8125rem; font-weight: 500; color: var(--text-brand, var(--primary)); cursor: pointer; }
.ai-toolbar-nudge:hover { text-decoration: underline; }
/* Coverage-unavailable hint: explains the yes/partial + evidence prerequisite
   in the toolbar's place, so the missing "Map to other frameworks" button reads
   as gated, not broken. Muted to sit quietly beside the active tools. */
.ai-cover-locked { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--text-muted); }
.ai-cover-locked svg { opacity: .6; flex: none; }

/* ---- A2 AI suggestions inbox ---- */
.ai-inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ai-inbox-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .875rem; background: var(--bg-elevated, var(--bg-alt)); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.ai-inbox-main { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.ai-inbox-kind { flex: none; }
.ai-inbox-summary { color: var(--text-primary); font-size: .9375rem; }
.ai-inbox-time { color: var(--text-muted); font-size: .8125rem; }
.ai-inbox-actions { display: flex; gap: .375rem; flex: none; }

/* ---- AI feedback (helpful / not-helpful thumbs on any artifact) ---- */
.ai-feedback { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.ai-feedback-label { font-size: .8125rem; color: var(--text-muted); margin-right: .125rem; }
.ai-feedback-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; padding: 0;
    background: transparent; border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 6px); color: var(--text-muted);
    cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ai-feedback-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ai-feedback-up.is-active   { color: var(--color-success);      border-color: currentColor; background: var(--color-success-bg); }
.ai-feedback-down.is-active { color: var(--color-danger-text);  border-color: currentColor; background: var(--color-danger-bg); }
.ai-feedback-thanks { font-size: .8125rem; color: var(--text-muted); font-style: italic; }
.ai-feedback-compact .ai-feedback-btn { width: 1.5rem; height: 1.5rem; }
/* Spacing wrapper used where a panel server-renders or JS-injects the widget
   (assessment summary, posture narrative, mock audit, incident triage, evidence
   summary). Empty until populated, so it adds no gap when there's no artifact. */
.ai-summary-feedback:not(:empty) { margin-top: .5rem; }

/* ---- Tier B cohesion ---- */
/* B2: inline "draft remediation" deep-link shown after a verdict when a finding exists */
.ai-eval-remediate { display: inline-block; margin-top: .25rem; font-size: .8125rem; font-weight: 500; color: var(--text-brand, var(--primary)); }
.ai-eval-remediate:hover { text-decoration: underline; }
/* B3: source HIPAA question codes behind a framework's coverage */
.coverage-rollup-sources { color: var(--text-muted); font-size: .8125rem; }

/* ======================================================================== */
/* Tier 2/3 AI expansion features                                           */
/* ======================================================================== */

/* ---- #5 Cross-framework coverage ---- */
.ai-cover { margin-top: .5rem; padding: .75rem .875rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.ai-cover-list { list-style: none; margin: .25rem 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.ai-cover-list li { font-size: .875rem; }
.ai-cover-list label { cursor: pointer; }
.ai-cover-conf { color: var(--text-muted); font-size: .8125rem; margin-left: .25rem; }
.ai-cover-why { display: block; color: var(--text-secondary); font-size: .8125rem; margin-top: .1rem; }
.ai-cover-empty { font-size: .875rem; color: var(--text-muted); margin: .25rem 0; }
.coverage-rollup-list { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.coverage-rollup-list li { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.coverage-rollup-count { font-weight: 600; color: var(--text-primary); }
.coverage-rollup-meta { color: var(--text-muted); font-size: .8125rem; }

/* Framework coverage (bank reach) — stacked progress: a lighter "assessable"
   track sits behind the solid "answered" fill in the same bar. */
.coverage-bank-row { display: block; }
.coverage-bank-row .assessment-progress-bar { position: relative; height: 8px; }
.coverage-bank-row .assessment-progress-fill { position: absolute; inset: 0 auto 0 0; }
.coverage-mapped-track {
  background: var(--border-strong, var(--border-color)) !important;
  opacity: .55;
}

/* ---- #6 Policy drafting ---- */
.policy-draft-preview { margin-top: 1rem; padding: 1rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-lg); max-height: 50vh; overflow-y: auto; }
.policy-draft-sections .policy-draft-heading { margin: .875rem 0 .25rem; font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
.policy-draft-sections .policy-draft-body { margin: 0 0 .5rem; font-size: .875rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; }

/* ---- #7 Incident triage ---- */
.triage-deadlines { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 .75rem; }
.triage-deadline { flex: 1 1 12rem; padding: .625rem .75rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.triage-deadline-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.triage-deadline-date { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); }
.triage-deadline-cite { display: block; font-size: .75rem; color: var(--text-muted); }
.triage-rec { margin: .5rem 0; }
.triage-factor-list { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: .5rem 0 0; font-size: .875rem; }
.triage-factor-list dt { font-weight: 600; color: var(--text-muted); }
.triage-factor-list dd { margin: 0; color: var(--text-primary); }
.triage-rationale { margin: .5rem 0 0; font-size: .875rem; color: var(--text-secondary); font-style: italic; }

/* ---- #10 Posture narrative ---- */
.posture-narrative-headline { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.posture-narrative-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 720px) { .posture-narrative-cols { grid-template-columns: 1fr; } }

/* ---- #11 Mock OCR interview ---- */
.mock-audit-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.mock-audit-empty { font-size: .9375rem; color: var(--text-muted); margin: .75rem 0; }
.mock-q { padding: .75rem .875rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.mock-q-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.mock-q-area { font-size: .8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.mock-q-prompt { margin: .25rem 0; font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
.mock-q-why { margin: .15rem 0; font-size: .8125rem; color: var(--text-secondary); }
.mock-q-missing { margin: .35rem 0 0; font-size: .8125rem; color: var(--text-secondary); }
.mock-q-action { display: inline-block; margin-top: .4rem; font-size: .8125rem; font-weight: 500; color: var(--text-brand, var(--primary)); }
.mock-q-action:hover { text-decoration: underline; }

/* ---- shared small affordances ---- */
.ai-link-code { background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: .1rem .4rem; font-size: .8125rem; color: var(--text-brand, var(--primary)); cursor: pointer; }
.ai-link-code:hover { background: var(--bg-alt); }
.ai-link-code.is-linked { color: var(--color-success-text, var(--text-muted)); border-color: var(--color-success-text, var(--border-color)); cursor: default; }
.packet-narrative-opt { font-size: .8125rem; color: var(--text-secondary); display: inline-flex; align-items: center; gap: .25rem; }

/* ---- Data-driven color helpers ----
   Consume the --accent / --fill custom property set by the [data-accent] /
   [data-fill] initializer in app.js, so a genuinely runtime color (risk
   severity, heatmap alpha, user-chosen classification) needs no inline
   style="". Placed last so these utilities win over component color rules
   (e.g. .rem-stat-count) by source order when both apply. */
.accent-text   { color: var(--accent, currentColor); }
.accent-edge-3 { border-left: 3px solid var(--accent, var(--border-color)); }
.fill-bg       { background: var(--fill, transparent); }

/* Data-classification badge tints (data-flows PHI asset table) — fixed enum,
   so a class per classification rather than an inline style. bg ≈ 10% / border
   ≈ 20% of the base color, matching the prior `<color>1a` / `<color>33` form. */
.class-badge-phi            { background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent); }
.class-badge-de_identified  { background: color-mix(in srgb, var(--color-warning) 10%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 20%, transparent); }
.class-badge-administrative { background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); }
.class-badge-public         { background: color-mix(in srgb, var(--color-success) 10%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 20%, transparent); }

/* Breach-response task cards — left-edge by state, title, per-type badge tint.
   Fixed palettes → classes, not inline styles. */
.breach-task-card { border-left: 4px solid var(--border-color); padding-left: 1.25rem; }
.breach-task-done    { border-left-color: var(--color-success); }
.breach-task-overdue { border-left-color: var(--color-warning); }
.breach-task-open    { border-left-color: var(--primary); }
.breach-task-title { font-size: .9375rem; }
.breach-task-title.is-done { text-decoration: line-through; color: var(--text-subtle); }
.breach-badge { font-size: .75rem; padding: .15rem .5rem; border-radius: 99px; font-weight: 600; }
.breach-badge-classify      { background: color-mix(in srgb, var(--color-purple) 13%, transparent); color: var(--color-purple); border: 1px solid color-mix(in srgb, var(--color-purple) 27%, transparent); }
.breach-badge-assess_phi    { background: color-mix(in srgb, var(--color-warning) 13%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 27%, transparent); }
.breach-badge-notify        { background: color-mix(in srgb, var(--color-info) 13%, transparent); color: var(--color-info); border: 1px solid color-mix(in srgb, var(--color-info) 27%, transparent); }
.breach-badge-legal_review  { background: color-mix(in srgb, var(--color-purple) 13%, transparent); color: var(--color-purple); border: 1px solid color-mix(in srgb, var(--color-purple) 27%, transparent); }
.breach-badge-default       { background: color-mix(in srgb, var(--gray-500) 13%, transparent); color: var(--gray-500); border: 1px solid color-mix(in srgb, var(--gray-500) 27%, transparent); }

/* Vendor view — risk dot + score-history mini bars (color via [data-fill]/
   [data-accent], height via [data-bar-height]). */
.risk-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.vendor-score-num { font-size: .6rem; font-weight: 700; }
.vendor-score-bar { width: 100%; border-radius: 3px 3px 0 0; }

/* PHI-asset type/status badges (settings/assets.php) — fixed enums → classes. */
.asset-badge { font-size: .75rem; }
.asset-badge-blue   { background: color-mix(in srgb, var(--primary) 14%, var(--color-white)); color: var(--primary-dark); }
.asset-badge-violet { background: color-mix(in srgb, var(--color-purple) 14%, var(--color-white)); color: var(--color-purple); }
.asset-badge-amber  { background: color-mix(in srgb, var(--color-orange) 25%, var(--color-white)); color: var(--color-warning-text); }
.asset-badge-teal   { background: color-mix(in srgb, var(--accent) 14%, var(--color-white)); color: var(--color-success-text); }
.asset-badge-green  { background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); color: var(--color-success-text); }
.asset-badge-red    { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-white)); color: var(--color-danger-text); }
.asset-badge-gray   { background: var(--gray-100); color: var(--gray-600); }
[data-theme="dark"] .asset-badge-blue   { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary-soft); }
[data-theme="dark"] .asset-badge-violet { background: color-mix(in srgb, var(--color-purple) 20%, transparent); color: var(--color-purple); }
[data-theme="dark"] .asset-badge-amber  { background: color-mix(in srgb, var(--color-warning) 20%, transparent); }
[data-theme="dark"] .asset-badge-teal   { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
[data-theme="dark"] .asset-badge-green  { background: color-mix(in srgb, var(--color-success) 20%, transparent); color: color-mix(in srgb, var(--color-success) 40%, var(--color-white)); }
[data-theme="dark"] .asset-badge-red    { background: color-mix(in srgb, var(--color-danger) 20%, transparent); }

/* ---- Markdown-lite bodies -----------------------------------
   Containers for markdownLite() output (policy statements and
   descriptions). The renderer only ever emits p/br/strong/em/a/
   ul/ol/li. Re-enable list markers (the global reset strips
   them) and match the rhythm of the old nl2br rendering. */
.md-body p { margin: 0 0 .5rem; color: inherit; line-height: 1.6; }
.md-body ul, .md-body ol { margin: 0 0 .5rem; padding-left: 1.25rem; }
.md-body ul { list-style: disc; }
.md-body ol { list-style: decimal; }
.md-body li { margin-bottom: .125rem; }
.md-body a { text-decoration: underline; }
.md-body > :last-child { margin-bottom: 0; }

/* Markdown editor toolbar + server-rendered preview panel */
.md-toolbar { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin-bottom: .375rem; }
.md-toolbar-btn { padding: .125rem .5rem; font-size: .75rem; line-height: 1.4; }
.md-toolbar-preview { margin-left: auto; }
.md-preview { border: 1px dashed var(--border-color); border-radius: var(--radius-md); padding: .75rem; background: var(--bg-surface); }

/* Policy version diff (textDiffHtml output: div.diff-block > span/del/ins) */
.diff-block { white-space: pre-wrap; font-size: .8125rem; line-height: 1.55; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: .75rem; background: var(--bg-surface); max-height: 480px; overflow-y: auto; }
.diff-block .diff-ctx { display: block; color: var(--text-secondary); }
.diff-block .diff-del { display: block; text-decoration: line-through; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.diff-block .diff-ins { display: block; text-decoration: none; color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }