/*
 * Rogue Logics — Shared Global Styles
 * Source of truth: shared-assets/public/shared-global.css
 * Served at: /shared/shared-global.css
 * Used by: ALL Rogue Logics apps via <link rel="stylesheet" href="/shared/shared-global.css">
 *
 * Dark mode is the default (root / html.dark). html.light overrides below.
 * Do NOT add app-specific overrides here. App globals.css should only contain:
 *   @import "tailwindcss"
 *   @variant dark (&:where(.dark, .dark *))
 *   (and @plugin "@tailwindcss/typography" if used)
 */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — edit here, applies everywhere automatically
   Dark mode is the default (root). html.light overrides below.
   ═══════════════════════════════════════════════════════════ */
:root,
html.dark {
  --background: #0a1929;
  --foreground: #e2e8f0;

  /* Text */
  --rl-text-primary: #f1f5f9;
  --rl-text-secondary: #a8b8cc;
  --rl-text-muted: #7a8fa3;
  --rl-text-heading: #ffffff;
  --rl-text-on-brand: #ffffff;

  /* Brand accent */
  --rl-accent: #2eb8b8;
  --rl-accent-hover: #26a0a0;
  --rl-accent-subtle: rgba(46, 184, 184, 0.14);
  --rl-accent-border: rgba(46, 184, 184, 0.3);
  --rl-brand-blue: #3b82f6;
  --rl-brand-blue-hover: #2563eb;
  --rl-brand-blue-subtle: rgba(59, 130, 246, 0.12);
  --rl-brand-blue-border: rgba(59, 130, 246, 0.3);

  /* Surfaces */
  --rl-bg-page: #0a1929;
  --rl-bg-surface: rgba(13, 33, 55, 0.6);
  --rl-bg-surface-solid: #0d2137;
  --rl-bg-elevated: rgba(30, 55, 90, 0.7);
  --rl-bg-overlay: rgba(255, 255, 255, 0.07);
  --rl-bg-overlay-hover: rgba(255, 255, 255, 0.12);
  --rl-bg: rgba(255, 255, 255, 0.07);
  --rl-bg-subtle: rgba(255, 255, 255, 0.06);
  --rl-bg-muted: rgba(255, 255, 255, 0.04);
  --rl-bg-base: #0a1929;
  --rl-bg-card: #0d2137;
  --rl-surface: #0d2137;
  --rl-surface-elevated: #1a2e4a;
  --rl-surface-hover: #1e3550;
  /* Aliases */
  --rl-text: #f1f5f9;
  --rl-fg: #f1f5f9;
  --rl-muted: #7a8fa3;
  --rl-card: #0d2137;
  --rl-divider: rgba(148, 163, 184, 0.12);
  --rl-hover: rgba(255, 255, 255, 0.07);
  --rl-radius: 0.75rem;
  --rl-brand-teal: #2eb8b8;

  /* Borders */
  --rl-border: rgba(148, 163, 184, 0.12);
  --rl-border-strong: rgba(148, 163, 184, 0.25);
  --rl-border-hover: rgba(46, 184, 184, 0.45);
  --rl-shadow-card: rgba(0, 0, 0, 0.3);
  --rl-input-bg: #0f2744;
  --rl-input-border: rgba(255, 255, 255, 0.15);
  --rl-input-text: #e2e8f0;
  --rl-input-placeholder: #64748b;
  --rl-input-focus: #0891b2;
  --rl-log-viewer-bg: #0b1d31;
  --rl-log-line-default: #9fb2c8;
  --rl-log-line-info: #5ee3a2;
  --rl-log-line-warn: #f7c74a;
  --rl-log-line-error: #ff8e8e;

  /* Sidebar */
  --rl-sidebar-bg: #0d1b2a;
  --rl-sidebar-border: rgba(255, 255, 255, 0.07);

  /* Header */
  --rl-header-bg: #0d1b2a;
  --rl-header-border: rgba(255, 255, 255, 0.07);

  /* Nav pills */
  --rl-nav-text: #cbd5e1;
  --rl-nav-text-hover: #f8fafc;
  --rl-nav-text-active: #2eb8b8;
  --rl-nav-bg: #ffffff20;
  --rl-nav-bg-hover: #ffffff40;
  --rl-nav-bg-active: #ffffff40;
  --rl-nav-icon: #94a3b8;
  --rl-nav-icon-active: #2eb8b8;
  --rl-nav-section: #64748b;
  --rl-nav-logout-text: #94a3b8;
  --rl-nav-logout-bg-hover: rgba(239, 68, 68, 0.15);
  --rl-nav-logout-text-hover: #f87171;

  /* Status */
  --rl-success: #4ade80;
  --rl-warning: #facc15;
  --rl-error: #f87171;
  --rl-info: #60a5fa;

  --rl-brand-gradient: linear-gradient(to right, #2eb8b8, #2563eb);
}

html.light:not(.dark) {
  --background: #f8fafc;
  --foreground: #0f172a;

  /* Text */
  --rl-text-primary: #1e293b;
  --rl-text-secondary: #334155;
  --rl-text-muted: #64748b;
  --rl-text-heading: #0f172a;
  --rl-text-on-brand: #ffffff;

  /* Brand accent */
  --rl-accent: #0e7272;
  --rl-accent-hover: #0a6060;
  --rl-accent-subtle: rgba(14, 114, 114, 0.1);
  --rl-accent-border: rgba(14, 114, 114, 0.35);
  --rl-brand-blue: #2563eb;
  --rl-brand-blue-hover: #1d4ed8;
  --rl-brand-blue-subtle: rgba(37, 99, 235, 0.1);
  --rl-brand-blue-border: rgba(37, 99, 235, 0.3);

  /* Surfaces */
  --rl-bg-page: #f8fafc;
  --rl-bg-surface: rgba(255, 255, 255, 0.82);
  --rl-bg-surface-solid: #ffffff;
  --rl-bg-elevated: rgba(255, 255, 255, 0.92);
  --rl-bg-overlay: rgba(255, 255, 255, 0.75);
  --rl-bg-overlay-hover: rgba(0, 0, 0, 0.1);
  --rl-bg: rgba(0, 0, 0, 0.05);
  --rl-bg-subtle: #f1f5f9;
  --rl-bg-muted: #e2e8f0;
  --rl-bg-base: #f8fafc;
  --rl-bg-card: #ffffff;
  --rl-surface: #ffffff;
  --rl-surface-elevated: #ffffff;
  --rl-surface-hover: #f1f5f9;
  /* Aliases */
  --rl-text: #1e293b;
  --rl-fg: #1e293b;
  --rl-muted: #64748b;
  --rl-card: #ffffff;
  --rl-divider: #e2e8f0;
  --rl-hover: rgba(0, 0, 0, 0.05);
  --rl-radius: 0.75rem;
  --rl-brand-teal: #0e7272;

  /* Borders */
  --rl-border: #e2e8f0;
  --rl-border-strong: #cbd5e1;
  --rl-border-hover: rgba(14, 114, 114, 0.45);
  --rl-shadow-card: rgba(0, 0, 0, 0.1);

  /* Form inputs */
  --rl-input-bg: #f8fafc;
  --rl-input-border: #cbd5e1;
  --rl-input-text: #0f172a;
  --rl-input-placeholder: #94a3b8;
  --rl-input-focus: #0e7272;
  --rl-log-viewer-bg: #f8fafc;
  --rl-log-line-default: #334155;
  --rl-log-line-info: #047857;
  --rl-log-line-warn: #b45309;
  --rl-log-line-error: #b91c1c;

  /* Sidebar */
  --rl-sidebar-bg: #ffffff;
  --rl-sidebar-border: #e2e8f0;

  /* Header */
  --rl-header-bg: #ffffff;
  --rl-header-border: #e2e8f0;

  /* Nav pills */
  --rl-nav-text: #334155;
  --rl-nav-text-hover: #0f172a;
  --rl-nav-text-active: #0e7272;
  --rl-nav-bg: rgba(0, 0, 0, 0.05);
  --rl-nav-bg-hover: rgba(0, 0, 0, 0.1);
  --rl-nav-bg-active: rgba(14, 114, 114, 0.1);
  --rl-nav-icon: #64748b;
  --rl-nav-icon-active: #0e7272;
  --rl-nav-section: #94a3b8;
  --rl-nav-logout-text: #64748b;
  --rl-nav-logout-bg-hover: rgba(220, 38, 38, 0.08);
  --rl-nav-logout-text-hover: #dc2626;

  /* Status */
  --rl-success: #16a34a;
  --rl-warning: #b45309;
  --rl-error: #dc2626;
  --rl-info: #2563eb;

  --rl-brand-gradient: linear-gradient(to right, #2eb8b8, #2563eb);
}

/* rl-btn-primary text is ALWAYS white — wins over all Tailwind utilities */
.rl-btn-primary,
.rl-btn-primary:hover,
.rl-btn-primary:focus,
.rl-btn-primary:visited {
  color: #ffffff !important;
}

/* Billing toggle active button always white */
.pricing-billing-toggle button[style*="linear-gradient"],
.pricing-billing-toggle button.text-white,
.pricing-billing-toggle button.rl-gradient-brand {
  color: #ffffff !important;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Custom layout classes ─────────────────────────────────── */

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-gradient {
  background: linear-gradient(
    135deg,
    #0d2137 0%,
    #0f2b4a 25%,
    #0d2137 50%,
    #0a2744 75%,
    #0d2137 100%
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

.grid-pattern {
  background-image:
    linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.glass-card {
  background: var(--rl-bg-surface);
  border: 1px solid var(--rl-border);
  backdrop-filter: blur(12px);
}

/* ── Shared card utilities ────────────────────────────────── */

/* Standard card: surface bg + border + radius */
.rl-card {
  background: var(--rl-bg-surface);
  border: 1px solid var(--rl-border);
  border-radius: 1rem; /* rounded-2xl */
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.admin-main .rl-card:hover {
  border-color: color-mix(in srgb, var(--rl-accent) 40%, var(--rl-border) 60%);
  box-shadow: 0 8px 30px var(--rl-shadow-card, rgba(0, 0, 0, 0.28));
  transform: translateY(-2px);
}

.rl-landing .rl-card:hover {
  border-color: color-mix(in srgb, var(--rl-accent) 32%, var(--rl-border) 68%);
  box-shadow: 0 10px 28px var(--rl-shadow-card, rgba(0, 0, 0, 0.28));
  transform: translateY(-2px);
}

/* Hover state: lift + accent border glow */
.admin-main .rl-card-hover:hover {
  border-color: var(
    --rl-border-hover,
    color-mix(in srgb, var(--rl-accent) 40%, var(--rl-border) 60%)
  );
  box-shadow: 0 8px 30px var(--rl-shadow-card, rgba(0, 0, 0, 0.28));
  transform: translateY(-2px);
}

/* Clickable/interactive card (combines both) */
.rl-card-interactive {
  background: var(--rl-bg-surface);
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
  overflow: hidden;
}
.admin-main .rl-card-interactive:hover {
  border-color: var(
    --rl-border-hover,
    color-mix(in srgb, var(--rl-accent) 40%, var(--rl-border) 60%)
  );
  box-shadow: 0 8px 30px var(--rl-shadow-card, rgba(0, 0, 0, 0.28));
  transform: translateY(-2px);
}

/* ── Light mode overrides ─────────────────────────────────── */

/* Hero gradient → soft light blue */
html.light .hero-gradient {
  background: linear-gradient(
    135deg,
    #f0f9ff 0%,
    #e0f2fe 25%,
    #f0f9ff 50%,
    #dbeafe 75%,
    #f0f9ff 100%
  ) !important;
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

/* glass-card adapts via --rl-bg-surface / --rl-border tokens — no override needed */
html.light .glass-card {
  backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html.light .rl-card,
html.light .rl-card-interactive {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

html.light .admin-main .rl-card-hover:hover,
html.light .admin-main .rl-card-interactive:hover,
html.light .rl-landing .rl-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Homepage framework grid cards — rl-card-interactive handles bg/border/hover */
html.light .homepage-fw-card .text-slate-100 {
  color: var(--rl-text-primary) !important;
}
html.light .homepage-fw-card .text-slate-400 {
  color: var(--rl-text-secondary) !important;
}

/* Dark section backgrounds */
html.light .bg-slate-950 {
  background-color: #f8fafc !important;
}
html.light .bg-slate-900 {
  background-color: #f1f5f9 !important;
}
html.light .bg-slate-800 {
  background-color: #e2e8f0 !important;
}

/* Gradient CTA section */
html.light .from-cyan-900\/40 {
  --tw-gradient-from: rgba(207, 250, 254, 0.6) !important;
}
html.light .to-slate-900 {
  --tw-gradient-to: #f1f5f9 !important;
}

/* Badge text: always white regardless of light/dark mode overrides */
.badge-white-text {
  color: white !important;
}

html.light section .text-white,
html.light main .text-white,
html.light main div.text-white {
  color: var(--rl-text-heading) !important;
}
/* exception: circles/buttons with colored backgrounds keep white text */
html.light .bg-blue-600.text-white,
html.light .bg-emerald-500.text-white,
html.light .bg-slate-400.text-white,
html.light .bg-cyan-500.text-white,
html.light .bg-amber-500.text-white,
html.light .bg-blue-600 .text-white,
html.light .bg-emerald-500 .text-white,
html.light .bg-slate-400 .text-white,
html.light main .bg-cyan-500 .text-white,
html.light main .bg-cyan-500.text-white,
/* accent-colored backgrounds and header always keep white text */
html.light header .text-white,
html.light header div.text-white,
/* Use rl-white-text utility to force white text anywhere in light mode */
html.light .rl-white-text {
  color: white !important;
}
/* (exceptions moved after duplicate rule below — see line ~320) */
html.light section .text-slate-300 {
  color: var(--rl-text-secondary) !important;
}
html.light section .text-slate-400 {
  color: var(--rl-text-secondary) !important;
}
html.light section .text-slate-500 {
  color: var(--rl-text-secondary) !important;
}
html.light section .text-slate-600 {
  color: var(--rl-text-secondary) !important;
}

/* cyan accent adjustments in light → dark teal */
html.light section .text-cyan-400 {
  color: #0e7272 !important;
}
html.light section .bg-cyan-400 {
  background-color: #0e7272 !important;
}
html.light section .bg-cyan-500\/10 {
  background-color: rgba(14, 114, 114, 0.1) !important;
}
html.light section .border-cyan-500\/30 {
  border-color: rgba(14, 114, 114, 0.3) !important;
}
html.light section .text-cyan-400.text-sm {
  color: #0e7272 !important;
}

/* Transparent white button → visible in light */
html.light .bg-white\/10 {
  background-color: rgba(15, 23, 42, 0.07) !important;
  border-color: rgba(15, 23, 42, 0.15) !important;
}
html.light .bg-white\/10:hover,
html.light .hover\:bg-white\/15:hover {
  background-color: rgba(15, 23, 42, 0.12) !important;
}
html.light .border-white\/20 {
  border-color: rgba(15, 23, 42, 0.15) !important;
}
html.light .bg-white\/10.text-white {
  color: var(--rl-text-heading) !important;
}

/* Border between items in light */
html.light .border-slate-800 {
  border-color: #e2e8f0 !important;
}
html.light .border-slate-700 {
  border-color: #cbd5e1 !important;
}
html.light .border-slate-600 {
  border-color: #94a3b8 !important;
}
html.light .border-dashed.border-slate-600 {
  border-color: #94a3b8 !important;
}

/* Login/signup form inputs in light */
html.light .bg-slate-800\/60 {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: var(--rl-text-heading) !important;
}
html.light .bg-slate-800\/60:focus {
  border-color: #0891b2 !important;
}
html.light input:not([class*="bg-"]) {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  color: var(--rl-text-heading);
}

/* Keep header/footer always dark */
html.light header.bg-\[\#0D2137\],
html.light footer.bg-\[\#0D2137\] {
  background-color: #0d2137 !important;
}
html.light header .text-white,
html.light footer .text-white {
  color: white !important;
}

/* Dashboard-specific dark bg overrides in light mode */
html.light .bg-slate-800,
html.light .bg-slate-800\/60 {
  background-color: #f8fafc !important;
}
html.light input.bg-slate-800,
html.light select.bg-slate-800,
html.light textarea.bg-slate-800 {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: var(--rl-text-heading) !important;
}
html.light .hover\:bg-slate-800:hover {
  background-color: #e2e8f0 !important;
}
html.light .bg-slate-700 {
  background-color: #e2e8f0 !important;
}
html.light .hover\:bg-slate-700:hover {
  background-color: #cbd5e1 !important;
}
html.light .border-slate-700\/50,
html.light .border-slate-800\/50 {
  border-color: #e2e8f0 !important;
}
html.light .hover\:bg-slate-800\/30:hover {
  background-color: rgba(148, 163, 184, 0.12) !important;
}

/* ── Dashboard STATUS_COLORS badge backgrounds & borders ─────────────── */
html.light .bg-green-400\/10 {
  background-color: rgba(22, 163, 74, 0.1) !important;
}
html.light .border-green-400\/30 {
  border-color: rgba(22, 163, 74, 0.4) !important;
}
html.light .bg-cyan-400\/10 {
  background-color: rgba(6, 182, 212, 0.1) !important;
}
html.light .border-cyan-400\/30 {
  border-color: rgba(6, 182, 212, 0.35) !important;
}
html.light .text-yellow-400 {
  color: rgb(234, 179, 8) !important;
}
html.light .bg-yellow-400\/10 {
  background-color: rgba(180, 83, 9, 0.08) !important;
}
html.light .border-yellow-400\/30 {
  border-color: rgba(180, 83, 9, 0.3) !important;
}
html.light .text-red-400 {
  color: #dc2626 !important;
}
html.light .bg-red-400\/10 {
  background-color: rgba(220, 38, 38, 0.08) !important;
}
html.light .border-red-400\/30 {
  border-color: rgba(220, 38, 38, 0.3) !important;
}
html.light .bg-slate-400\/10 {
  background-color: rgba(100, 116, 139, 0.1) !important;
}
html.light .border-slate-400\/30 {
  border-color: rgba(100, 116, 139, 0.3) !important;
}

html.light .text-green-400 {
  color: #16a34a !important;
}
html.light .text-slate-300 {
  color: var(--rl-text-secondary) !important;
}
html.light main .text-white,
html.light div.min-h-screen .text-white {
  color: var(--rl-text-heading) !important;
}
/* exceptions must come AFTER the broad rule above */
html.light .pricing-billing-toggle button.text-white,
html.light .pricing-billing-toggle button[style*="linear-gradient"],
html.light .pricing-billing-toggle button.rl-gradient-brand,
html.light .pricing-billing-toggle button[style*="background"] {
  color: #ffffff !important;
}
html.light .rl-btn-primary {
  color: #ffffff !important;
}
html.light main .hover\:text-white:hover {
  color: var(--rl-text-heading) !important;
}

/* ── Accent color fixes in light mode ─────────────────────────────────── */

/* cyan-300 is near-invisible on white — use a darker cyan */
html.light .text-cyan-300 {
  color: #0891b2 !important;
}
html.light .hover\:text-cyan-300:hover {
  color: #0891b2 !important;
}

/* purple-400 (multi-year discount label) — darken for legibility */
html.light .text-purple-400 {
  color: #7c3aed !important;
}

/* emerald-400 / discount badges */
html.light .text-emerald-400 {
  color: #059669 !important;
}
html.light .bg-emerald-500\/20 {
  background-color: rgba(5, 120, 85, 0.12) !important;
}

/* green-300 success banners (low contrast on white) */
html.light .text-green-300 {
  color: #15803d !important;
}
html.light .bg-green-500\/20 {
  background-color: rgba(22, 163, 74, 0.12) !important;
}
html.light .border-green-500\/40 {
  border-color: rgba(22, 163, 74, 0.4) !important;
}

/* red-300 error banners (low contrast on white) */
html.light .text-red-300 {
  color: #dc2626 !important;
}
html.light .bg-red-500\/20 {
  background-color: rgba(220, 38, 38, 0.1) !important;
}
html.light .border-red-500\/40 {
  border-color: rgba(220, 38, 38, 0.35) !important;
}

/* Solid colored buttons keep white text */
html.light .bg-cyan-600 {
  color: #ffffff !important;
}
html.light .hover\:bg-cyan-500:hover {
  color: #ffffff !important;
}
html.light .from-cyan-500.text-white,
html.light .bg-cyan-600.text-white,
html.light .bg-cyan-600 .text-white {
  color: #ffffff !important;
}

/* Contract year buttons on hero: make non-selected text readable */
html.light .hero-gradient .text-slate-500 {
  color: #374151 !important;
}
html.light .hero-gradient .text-slate-400 {
  color: #4b5563 !important;
}
html.light
  .hero-gradient
  button:not(.bg-cyan-600):not(.rl-btn-primary):not(.rl-gradient-brand) {
  color: #374151 !important;
}
html.light
  .hero-gradient
  button:not(.bg-cyan-600):not(.rl-btn-primary):not(.rl-gradient-brand):hover {
  color: #111827 !important;
}

/* Dark theme overrides */
html.dark body {
  background: #0a1929;
  color: #e2e8f0;
}

html.dark .bg-white {
  background-color: #0d2137 !important;
}
html.dark .bg-gray-50,
html.dark .bg-slate-50 {
  background-color: #0a1929 !important;
}
html.dark .bg-slate-100 {
  background-color: #0f2744 !important;
}
html.dark .bg-gray-100 {
  background-color: #0f2744 !important;
}

html.dark .text-gray-900,
html.dark .text-slate-900 {
  color: #f1f5f9 !important;
}
html.dark .text-gray-800,
html.dark .text-slate-800 {
  color: #e2e8f0 !important;
}
html.dark .text-gray-700,
html.dark .text-slate-700 {
  color: #cbd5e1 !important;
}
html.dark .text-gray-600,
html.dark .text-slate-600 {
  color: var(--rl-text-secondary) !important;
}
html.dark .text-gray-500,
html.dark .text-slate-500 {
  color: var(--rl-text-muted) !important;
}

html.dark .border-gray-200,
html.dark .border-slate-200 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
html.dark .border-gray-100,
html.dark .border-slate-100 {
  border-color: rgba(255, 255, 255, 0.05) !important;
}
html.dark .border-gray-300,
html.dark .border-slate-300 {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark .divide-gray-200 > :not(:last-child) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
}
html.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3) !important;
}
html.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2) !important;
}

html.dark .ring-gray-200 {
  --tw-ring-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0f2744 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

/* Colored backgrounds - dark mode */
html.dark .bg-green-50,
html.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}
html.dark .bg-green-100,
html.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
html.dark .bg-red-50,
html.dark .bg-rose-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}
html.dark .bg-red-100,
html.dark .bg-rose-100 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}
html.dark .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.1) !important;
}
html.dark .bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.15) !important;
}
html.dark .bg-orange-50 {
  background-color: rgba(249, 115, 22, 0.1) !important;
}
html.dark .bg-orange-100 {
  background-color: rgba(249, 115, 22, 0.15) !important;
}
html.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1) !important;
}
html.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.15) !important;
}
html.dark .bg-blue-200 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}
html.dark .bg-cyan-50 {
  background-color: rgba(6, 182, 212, 0.1) !important;
}
html.dark .bg-cyan-100 {
  background-color: rgba(6, 182, 212, 0.15) !important;
}
html.dark .bg-purple-100 {
  background-color: rgba(147, 51, 234, 0.15) !important;
}
html.dark .bg-pink-100 {
  background-color: rgba(236, 72, 153, 0.15) !important;
}
html.dark .bg-teal-100 {
  background-color: rgba(20, 184, 166, 0.15) !important;
}
html.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.1) !important;
}

/* Colored text - dark mode */
html.dark .text-green-600 {
  color: #4ade80 !important;
}
html.dark .text-green-700 {
  color: #4ade80 !important;
}
html.dark .text-green-900,
html.dark .text-emerald-900 {
  color: #6ee7b7 !important;
}
html.dark .text-emerald-600 {
  color: #34d399 !important;
}
html.dark .text-red-600,
html.dark .text-rose-600 {
  color: #f87171 !important;
}
html.dark .text-red-700,
html.dark .text-rose-700 {
  color: #f87171 !important;
}
html.dark .text-yellow-700 {
  color: #facc15 !important;
}
html.dark .text-orange-600 {
  color: #fb923c !important;
}
html.dark .text-orange-700 {
  color: #fb923c !important;
}
html.dark .text-blue-600 {
  color: #60a5fa !important;
}
html.dark .text-blue-800,
html.dark .text-blue-900 {
  color: #93c5fd !important;
}
html.dark .text-cyan-600 {
  color: #22d3ee !important;
}
html.dark .text-cyan-700 {
  color: #22d3ee !important;
}
html.dark .text-purple-600 {
  color: #c084fc !important;
}
html.dark .text-purple-800 {
  color: #d8b4fe !important;
}
html.dark .text-pink-600 {
  color: #f472b6 !important;
}

/* Gradient overrides */
html.dark .from-green-100 {
  --tw-gradient-from: rgba(16, 185, 129, 0.15) !important;
}
html.dark .to-emerald-100 {
  --tw-gradient-to: rgba(16, 185, 129, 0.15) !important;
}
html.dark .from-blue-100 {
  --tw-gradient-from: rgba(59, 130, 246, 0.15) !important;
}
html.dark .to-cyan-100 {
  --tw-gradient-to: rgba(6, 182, 212, 0.15) !important;
}
html.dark .from-orange-100 {
  --tw-gradient-from: rgba(249, 115, 22, 0.15) !important;
}
html.dark .to-amber-100 {
  --tw-gradient-to: rgba(245, 158, 11, 0.15) !important;
}
html.dark .from-purple-100 {
  --tw-gradient-from: rgba(147, 51, 234, 0.15) !important;
}
html.dark .to-pink-100 {
  --tw-gradient-to: rgba(236, 72, 153, 0.15) !important;
}
html.dark .from-teal-100 {
  --tw-gradient-from: rgba(20, 184, 166, 0.15) !important;
}
html.dark .from-red-100 {
  --tw-gradient-from: rgba(239, 68, 68, 0.15) !important;
}
html.dark .to-rose-100 {
  --tw-gradient-to: rgba(239, 68, 68, 0.15) !important;
}
html.dark .from-gray-200 {
  --tw-gradient-from: rgba(255, 255, 255, 0.1) !important;
}
html.dark .to-gray-100 {
  --tw-gradient-to: rgba(255, 255, 255, 0.05) !important;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  animation: shimmer 3s ease-in-out infinite;
}

/* Roguelogics brand logo — dark mode invert */
.rl-logo {
  height: 40px;
  width: auto;
  display: block;
}
html.dark .rl-logo {
  filter: brightness(0) invert(1);
}

/* Portal logos in sidebar */
.rl-portal-logo {
  height: 48px;
  width: auto;
  display: block;
}
html.dark .rl-portal-logo text {
  fill: #ffffff;
}
.rl-portal-logo-link {
  display: block;
  text-decoration: none;
}
.rl-portal-logo-title {
  fill: var(--rl-text-heading);
}
.rl-portal-logo-sub {
  fill: var(--rl-text-muted);
}

/* CTA buttons: teal→blue gradient (brand button style) */
.from-cyan-500,
.from-cyan-600 {
  background-image: linear-gradient(to right, #2eb8b8, #2563eb) !important;
  background-color: transparent !important;
  color: #ffffff !important;
}
.to-blue-500,
.to-blue-600 {
  --tw-gradient-to: #2563eb !important;
}
.hover\:from-cyan-400:hover,
.hover\:from-cyan-700:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 24px rgba(46, 184, 184, 0.35);
}
/* ── Primary Button — always teal→blue gradient, always white text ── */
.rl-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rl-brand-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    filter 0.2s ease;
  text-decoration: none;
}
.rl-btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 24px rgba(46, 184, 184, 0.35);
  color: var(--rl-text-on-brand) !important;
}
.rl-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Gradient utility — applies brand gradient as background, always white text */
.rl-gradient-brand {
  background: var(--rl-brand-gradient) !important;
  color: var(--rl-text-on-brand) !important;
}

/* ── Secondary Button — uses accent token, adapts automatically ── */
.rl-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: var(--rl-accent);
  border: 1.5px solid var(--rl-accent);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  text-decoration: none;
}
.rl-btn-secondary:hover {
  background-color: var(--rl-accent-subtle);
  color: var(--rl-accent-hover);
  border-color: var(--rl-accent-hover);
}
.rl-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* No html.light/dark overrides needed — tokens handle it */

/* ── Nav Link — tokens handle light/dark automatically ──────── */
.rl-nav-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rl-nav-text) !important;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 9px;
  letter-spacing: 0.01em;
  transition:
    color 0.15s ease,
    background 0.15s ease;
  white-space: nowrap;
  margin: 0 3px;
  background: var(--rl-nav-bg);
}
.rl-nav-link:hover {
  color: var(--rl-nav-text-hover) !important;
  background: var(--rl-nav-bg-hover);
  text-decoration: underline;
  text-decoration-color: var(--rl-accent);
  text-underline-offset: 3px;
}
.rl-nav-link.active {
  color: var(--rl-nav-text-active) !important;
  background: var(--rl-nav-bg-active);
}

/* "Log in" ghost pill — token-driven */
.rl-nav-login {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rl-nav-text);
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid var(--rl-border-strong);
  letter-spacing: 0.01em;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  white-space: nowrap;
  margin: 0 3px;
}
.rl-nav-login:hover {
  color: var(--rl-nav-text-hover);
  border-color: var(--rl-border-strong);
  background: var(--rl-bg-overlay-hover);
}

/* Sticky header */
[data-app-header] {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Header icon buttons (home, help, logout, theme toggle) */
[data-app-header] [data-header-icon-btn] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  color: var(--rl-text-muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  text-decoration: none;
}
[data-app-header] [data-header-icon-btn]:hover {
  background: var(--rl-bg-surface);
  color: var(--rl-text-heading);
}

/* Header nav — square pill hover style */
[data-app-header] nav {
  gap: 2px !important;
}
[data-app-header] > div > div:last-child {
  gap: 8px !important;
}

/* Landing page CTA dark section — always white text in dark mode */
.landing-cta-section .text-white,
.landing-cta-section h2,
.landing-cta-section p {
  color: #ffffff !important;
}
.landing-cta-section p.text-slate-300 {
  color: rgba(203, 213, 225, 0.9) !important;
}
/* CTA section: light mode — replace dark inline bg with a light gradient */
html.light .landing-cta-section {
  background: linear-gradient(
    135deg,
    #e0f7fa 0%,
    #e8f4fd 50%,
    #eff6ff 100%
  ) !important;
}
html.light .landing-cta-section > div.absolute {
  display: none !important;
}
html.light .landing-cta-section .text-white,
html.light .landing-cta-section h2 {
  color: var(--rl-text-heading) !important;
}
html.light .landing-cta-section p,
html.light .landing-cta-section p.text-slate-300 {
  color: var(--rl-text-secondary) !important;
}

/* Brand badge — token-driven, no overrides needed */
.rl-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--rl-accent-subtle);
  border: 1px solid var(--rl-accent-border);
  color: var(--rl-accent);
}

.rl-most-popular {
  background: var(--rl-bg-surface-solid);
  color: var(--rl-accent);
  border: 1px solid color-mix(in srgb, var(--rl-accent) 40%, transparent);
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 9999px;
}
/* No html.light/dark overrides needed — tokens handle it */

.rl-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
  background: #7c3aed;
  animation: rl-pulse 2s ease-in-out infinite;
}

@keyframes rl-pulse {
  0% {
    opacity: 0.55;
    transform: scale(0.95);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0.55;
    transform: scale(0.95);
  }
}

/* ── Token-driven utility classes ──────────────────────────── */

/* Text helpers */
.rl-text-heading {
  color: var(--rl-text-heading);
}
.rl-text-body {
  color: var(--rl-text-body, var(--rl-text-primary));
}
.rl-text-muted {
  color: var(--rl-text-muted);
}
.rl-text-accent {
  color: var(--rl-accent);
}

/* Surface / background helpers */
.rl-surface {
  background: var(--rl-bg-surface-solid);
}
.rl-surface-overlay {
  background: var(--rl-bg-overlay);
}
.rl-page-bg {
  background: var(--rl-bg-page);
}
.rl-modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

/* Border helpers */
.rl-border {
  border: 1px solid var(--rl-border);
}
.rl-border-strong {
  border: 1px solid var(--rl-border-strong);
}
.rl-divider {
  border-top: 1px solid var(--rl-border);
}

/* Input */
.rl-input {
  background-color: var(--rl-input-bg);
  border: 1px solid var(--rl-input-border);
  color: var(--rl-input-text);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.rl-input::placeholder {
  color: var(--rl-input-placeholder);
}
.rl-input:focus {
  outline: none;
  border-color: var(--rl-input-focus);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--rl-input-focus) 20%, transparent);
}

/* Error / status banners */
.rl-error-banner {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-error) 40%, transparent);
  color: var(--rl-error);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.rl-success-banner {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-success) 40%, transparent);
  color: var(--rl-success);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* Link */
.rl-link {
  color: var(--rl-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
.rl-link:hover {
  color: var(--rl-accent-hover);
  text-decoration: underline;
}

/* Card bottom CTA — "Start Free Assessment →" style */
.rl-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  color: var(--rl-accent);
  text-decoration: none;
  transition:
    color 0.15s ease,
    gap 0.15s ease;
  margin-top: auto;
}
.rl-card-cta::after {
  content: "→";
  transition: transform 0.15s ease;
}
/* Parent group hover triggers underline + arrow nudge */
.group:hover .rl-card-cta,
.rl-card-cta:hover {
  text-decoration: underline;
  gap: 0.4rem;
}

/* Unread / notification dot badge */
.rl-badge-accent {
  background: var(--rl-accent);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0 0.375rem;
  min-width: 1.125rem;
  text-align: center;
}

.rl-badge-count {
  background: var(--rl-error);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: 9999px;
  padding: 0 0.375rem;
  min-width: 1.25rem;
  text-align: center;
}

/* Framework name badge — used on request cards */
.rl-fw-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: var(--rl-accent-subtle);
  color: var(--rl-accent);
  border: 1px solid var(--rl-accent-border);
  white-space: nowrap;
}

/* Base inline badge — combine with a color modifier (rl-badge-success etc.) */
.rl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.5;
}

/* Generic status/urgency pill badge */
.rl-status-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  white-space: nowrap;
}

/* rl-btn-primary white text is enforced in @layer base above */

/* rl-btn-secondary uses --rl-accent token — no override needed */

/* Pricing: billing toggle — active button always white text */
.pricing-billing-toggle button[style*="linear-gradient"],
.pricing-billing-toggle button.rl-gradient-brand {
  color: #ffffff !important;
}
.pricing-billing-toggle button.text-white {
  color: #ffffff !important;
}
/* Pricing: billing toggle */
.pricing-billing-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Pricing: billing toggle light mode */
html.light .pricing-billing-toggle {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid #e2e8f0 !important;
}
html.light .pricing-billing-btn-inactive {
  color: var(--rl-text-muted) !important;
  background: transparent !important;
  border-radius: 0.5rem;
}
html.light .pricing-billing-btn-inactive:hover {
  color: var(--rl-text-heading) !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Pricing: contract year pills — brighter in dark mode */
.pricing-contract-pill {
  color: #94a3b8;
}
.pricing-contract-pill.active {
  color: #5dd8d8 !important;
}
.pricing-contract-pill .text-emerald-400 {
  color: #34d399 !important;
}
/* Pricing: contract year pills light mode */
html.light .pricing-contract-pill {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: #cbd5e1 !important;
  color: var(--rl-text-muted) !important;
}
html.light .pricing-contract-pill:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: #94a3b8 !important;
  color: var(--rl-text-heading) !important;
}
html.light .pricing-contract-pill.active {
  background: rgba(8, 145, 178, 0.1) !important;
  border-color: rgba(8, 145, 178, 0.35) !important;
  color: #0369a1 !important;
}

/* Pricing: bundle tier pills light mode */
html.light .bundle-tier-pill {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: #e2e8f0 !important;
}
html.light .bundle-tier-pill .bundle-tier-label {
  color: var(--rl-text-secondary) !important;
}
html.light .bundle-tier-pill .bundle-tier-text {
  color: var(--rl-text-secondary) !important;
}
html.light .bundle-tier-pill.tier-growth .bundle-tier-label,
html.light .bundle-tier-pill.tier-growth .bundle-tier-discount {
  color: #0891b2 !important;
}
html.light .bundle-tier-pill.tier-enterprise .bundle-tier-label,
html.light .bundle-tier-pill.tier-enterprise .bundle-tier-discount {
  color: #6d28d9 !important;
}
html.light .bundle-tier-pill.tier-starter .bundle-tier-discount {
  color: var(--rl-text-secondary) !important;
}

/* Pricing fw-price: brighter in dark mode */
.pricing-fw-card .fw-price {
  color: #94a3b8;
}
html.dark .pricing-fw-card .fw-price {
  color: #94a3b8 !important;
}

/* Pricing headings light mode */
html.light .pricing-section-heading {
  color: var(--rl-text-heading) !important;
}
html.light .pricing-section-subheading {
  color: var(--rl-text-muted) !important;
}

/* Pricing framework cards — token-driven, adapts automatically */
.pricing-fw-card {
  background: var(--rl-bg-surface);
  border: 1px solid var(--rl-border);
  backdrop-filter: blur(12px);
}
.pricing-fw-card.fw-selected {
  background: var(--rl-accent-subtle);
  border: 1.5px solid var(--rl-accent-border);
}
.pricing-fw-card .fw-name {
  color: var(--rl-text-primary);
}
.pricing-fw-card .fw-price {
  color: var(--rl-text-secondary);
}
html.light .pricing-fw-card {
  backdrop-filter: none;
}
/* No other html.light/dark overrides needed — tokens handle it */

.pricing-cat-toggle {
  color: var(--rl-text-muted);
}
html.dark .pricing-cat-toggle:hover,
html.light .pricing-cat-toggle:hover,
html.dark .hero-gradient button.pricing-cat-toggle:hover,
html.light .hero-gradient button.pricing-cat-toggle:hover {
  color: #2eb8b8 !important;
}

/* ── Auth pages (login / signup) ──────────────────────────── */

/* ── Auth component classes — token-driven, no overrides needed ── */
.auth-form-heading {
  color: var(--rl-text-heading);
}
.auth-form-label {
  color: var(--rl-text-secondary);
}
.auth-panel-perk {
  color: var(--rl-text-primary);
}
.auth-panel-stat {
  color: var(--rl-text-heading);
}
.auth-form-input {
  background-color: var(--rl-input-bg);
  border-color: var(--rl-input-border);
  color: var(--rl-input-text);
}
.auth-form-input::placeholder {
  color: var(--rl-input-placeholder);
}
.auth-form-input:focus {
  border-color: var(--rl-input-focus);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}
/* No html.light/dark overrides needed — tokens handle it */

/* Left panel divider in light mode */
html.light .hidden.lg\:flex[style*="borderRight"] {
  border-right-color: rgba(0, 0, 0, 0.08) !important;
}

/* Glass-card stats in signup left panel — light mode */
html.light section .glass-card .auth-panel-stat {
  color: var(--rl-text-heading) !important;
}

/* Primary button text: always white in light mode */
html.light .rl-btn-primary {
  color: #ffffff !important;
}

/* ── Document viewer modal light mode ──────────────────────────────── */
html.light .doc-viewer {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html.light .doc-viewer .border-b {
  border-color: #e2e8f0 !important;
}
html.light .doc-viewer .text-white {
  color: var(--rl-text-heading) !important;
}
html.light .doc-viewer .text-slate-300,
html.light .doc-viewer .text-slate-400,
html.light .doc-viewer .text-slate-500,
html.light .doc-viewer .text-slate-600 {
  color: var(--rl-text-secondary) !important;
}
html.light .doc-viewer pre {
  color: var(--rl-text-primary) !important;
}
html.light .doc-viewer .bg-slate-900 {
  background-color: #f8fafc !important;
}
html.light .doc-viewer .border-slate-700,
html.light .doc-viewer .border-slate-800 {
  border-color: #e2e8f0 !important;
}
html.light .doc-viewer .text-cyan-400 {
  color: #0891b2 !important;
}
html.light .doc-viewer .text-slate-400.hover\:text-white:hover {
  color: var(--rl-text-heading) !important;
}

/* ── Unified document prose styles ─────────────────────────── */
.doc-prose {
  font-size: 13px;
  line-height: 1.75;
  color: var(--rl-text-secondary);
}
.doc-prose h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--rl-text-heading);
  margin: 24px 0 8px;
  line-height: 1.3;
}
.doc-prose h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--rl-text-heading);
  margin: 20px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e2e8f0;
}
.doc-prose h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--rl-text-primary);
  margin: 14px 0 4px;
}
.doc-prose h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--rl-text-secondary);
  margin: 10px 0 3px;
}
.doc-prose p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--rl-text-secondary);
  margin: 0 0 10px;
}
.doc-prose ul,
.doc-prose ol {
  margin: 4px 0 12px 22px;
  padding: 0;
}
.doc-prose li {
  font-size: 13px;
  line-height: 1.75;
  color: var(--rl-text-secondary);
  margin-bottom: 3px;
}
.doc-prose strong {
  color: var(--rl-text-heading);
  font-weight: 600;
}
.doc-prose em {
  color: var(--rl-text-secondary);
  font-style: italic;
}
.doc-prose code {
  background: #f1f5f9;
  color: #0f766e;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: "Menlo", "Consolas", monospace;
}
.doc-prose pre {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0;
  overflow-x: auto;
}
.doc-prose pre code {
  background: none;
  padding: 0;
  font-size: 12px;
  color: var(--rl-text-secondary);
}
.doc-prose hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 20px 0;
}
.doc-prose blockquote {
  border-left: 3px solid #0891b2;
  margin: 10px 0;
  padding: 5px 14px;
  background: #f0f9ff;
  color: var(--rl-text-secondary);
  font-style: italic;
  font-size: 13px;
}
.doc-prose table {
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 12px;
  table-layout: auto;
  white-space: normal;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.doc-prose th {
  background: #f8fafc;
  color: var(--rl-text-secondary);
  font-weight: 600;
  text-align: left;
  padding: 7px 12px;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  white-space: nowrap;
  min-width: 80px;
}
.doc-prose td {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  color: var(--rl-text-secondary);
  vertical-align: top;
  font-size: 12px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.doc-prose tr:nth-child(even) td {
  background: #fafafa;
}
.dark .doc-prose {
  color: #cbd5e1;
}
.dark .doc-prose h1,
.dark .doc-prose h2,
.dark .doc-prose h3,
.dark .doc-prose h4 {
  color: #f1f5f9;
}
.dark .doc-prose h2 {
  border-bottom-color: var(--rl-text-secondary);
}
.dark .doc-prose p,
.dark .doc-prose li {
  color: #cbd5e1;
}
.dark .doc-prose strong {
  color: #f1f5f9;
}
.dark .doc-prose code {
  background: var(--rl-text-primary);
  color: #67e8f9;
}
.dark .doc-prose pre {
  background: var(--rl-text-primary);
  border-color: var(--rl-text-secondary);
}
.dark .doc-prose pre code {
  color: #cbd5e1;
}
.dark .doc-prose hr {
  border-top-color: var(--rl-text-secondary);
}
.dark .doc-prose blockquote {
  background: #0c1a2e;
  border-left-color: #0891b2;
  color: #94a3b8;
}
.dark .doc-prose th {
  background: var(--rl-text-primary);
  color: #94a3b8;
  border-color: var(--rl-text-secondary);
}
.dark .doc-prose td {
  border-color: var(--rl-text-secondary);
  color: #cbd5e1;
}
.dark .doc-prose tr:nth-child(even) td {
  background: #1a2540;
}

/* ── Review Note callouts (📝 REVIEW NOTE: ...) ────────────────── */
.doc-prose blockquote:has(strong) {
  border-left: 3px solid #f59e0b;
  background: #fffbeb;
  color: #78350f;
  font-style: normal;
  font-size: 12px;
  line-height: 1.6;
  padding: 7px 14px;
  margin: 6px 0 12px;
  border-radius: 0 4px 4px 0;
}
.dark .doc-prose blockquote:has(strong) {
  background: #1c1407;
  border-left-color: #d97706;
  color: #fcd34d;
}
/* Regular (non-review) blockquotes keep their original style */
.doc-prose blockquote:not(:has(strong)) {
  border-left: 3px solid #0891b2;
  background: #f0f9ff;
  color: var(--rl-text-secondary);
  font-style: italic;
  font-size: 13px;
}
.dark .doc-prose blockquote:not(:has(strong)) {
  background: #0c1a2e;
  border-left-color: #0891b2;
  color: #94a3b8;
}

/* Tab bar with bottom border */
.rl-tab-bar {
  border-bottom: 1px solid var(--rl-border);
}
/* Active tab indicator */
.rl-tab-active {
  border-bottom: 2px solid var(--rl-accent);
  color: var(--rl-accent);
}

/* Tier icon container backgrounds */
.rl-tier-icon-green {
  background: color-mix(in srgb, var(--rl-success) 18%, var(--rl-bg-elevated));
}
.rl-tier-icon-yellow {
  background: color-mix(in srgb, var(--rl-warning) 18%, var(--rl-bg-elevated));
}
.rl-tier-icon-red {
  background: color-mix(in srgb, var(--rl-error) 18%, var(--rl-bg-elevated));
}

/* Priority / confidence status badges */
.rl-badge-success {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-success) 35%, transparent);
  color: var(--rl-success);
}
.rl-badge-warning {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-warning) 35%, transparent);
  color: #92400e;
}
html.dark .rl-badge-warning {
  color: var(--rl-warning);
}
.rl-badge-error {
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-error) 35%, transparent);
  color: var(--rl-error);
}
.rl-badge-gray {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  color: var(--rl-text-muted);
}
.rl-badge-blue {
  background: color-mix(in srgb, var(--rl-info) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-info) 35%, transparent);
  color: var(--rl-info);
}
.rl-badge-green {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-success) 35%, transparent);
  color: var(--rl-success);
}
.rl-badge-purple {
  background: color-mix(in srgb, #a855f7 15%, transparent);
  border: 1px solid color-mix(in srgb, #a855f7 35%, transparent);
  color: #9333ea;
}
.rl-badge-orange {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-warning) 35%, transparent);
  color: #92400e;
}
.rl-badge-teal {
  background: color-mix(in srgb, #14b8a6 15%, transparent);
  border: 1px solid color-mix(in srgb, #14b8a6 35%, transparent);
  color: #0d9488;
}

/* Solid risk badges (for panels where white text on color is needed) */
.rl-risk-badge-critical {
  background: var(--rl-error);
  border-color: var(--rl-error);
  color: var(--rl-text-on-brand);
}
.rl-risk-badge-high {
  background: color-mix(in srgb, var(--rl-error) 60%, var(--rl-warning));
  border-color: color-mix(in srgb, var(--rl-error) 60%, var(--rl-warning));
  color: var(--rl-text-on-brand);
}
.rl-risk-badge-medium {
  background: var(--rl-warning);
  border-color: var(--rl-warning);
  color: var(--rl-text-on-brand);
}
.rl-risk-badge-low {
  background: var(--rl-success);
  border-color: var(--rl-success);
  color: var(--rl-text-on-brand);
}

/* Rank / number badge used in gap cards */
.rl-rank-badge {
  background: var(--rl-bg-elevated);
  border: 1px solid var(--rl-border-strong);
  color: var(--rl-text-heading);
  border-radius: 0.75rem; /* rounded-xl */
}

/* Overlay container: subtle tinted panel */
.rl-overlay-panel {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
}

/* Section header with bottom border */
.rl-section-header {
  background: var(--rl-bg-overlay);
  border-bottom: 2px solid var(--rl-border);
}

/* Info box — blue tone */
.rl-info-box {
  background: var(--rl-accent-subtle);
  border: 1px solid var(--rl-accent-border);
  border-radius: 0.5rem;
  color: var(--rl-text-primary);
}
.rl-info-box .rl-info-box-title {
  color: var(--rl-accent);
}

/* Success box — green tone */
.rl-success-box {
  background: color-mix(in srgb, var(--rl-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-success) 25%, transparent);
  border-radius: 0.5rem;
  color: var(--rl-text-primary);
}
.rl-success-box .rl-success-box-title {
  color: var(--rl-success);
}
.rl-success-box .rl-success-box-bullet {
  color: var(--rl-success);
}

/* Action box — accent/teal tone */
.rl-action-box {
  background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-accent) 25%, transparent);
  border-radius: 0.5rem;
  color: var(--rl-text-primary);
}
.rl-action-box .rl-action-box-title {
  color: var(--rl-accent);
}
.rl-action-box .rl-action-box-arrow {
  color: var(--rl-accent);
}

/* Quick stat mini-cards */
.rl-stat-card {
  background: var(--rl-bg-elevated);
  border: 2px solid var(--rl-border);
  border-top: 3px solid var(--rl-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  width: min(280px, 100%);
  max-width: 100%;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* ── App card (per-app summary/tenant cards) ── */
.rl-app-card {
  position: relative;
  overflow: hidden;
  white-space: normal;
  display: flex;
  flex-direction: column;
}
.rl-app-card-watermark {
  position: absolute;
  right: 0.5rem;
  bottom: 0.25rem;
  font-size: 4.5rem;
  opacity: 0.055;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.rl-app-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: relative;
}
.rl-app-card-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--rl-text-heading);
}
.rl-app-card-section {
  margin-bottom: 0.75rem;
  position: relative;
  flex: 1;
}
.rl-app-card-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.625rem;
  margin-top: auto;
  border-top: 1px solid var(--rl-divider);
  position: relative;
}
.rl-app-card-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  position: relative;
}
.rl-app-card-stat-box {
  background: var(--rl-bg-overlay);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  white-space: nowrap;
  overflow: hidden;
}
.rl-app-card-stat-box .rl-stat-value {
  font-size: 1.25rem;
}
.rl-app-card-error {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: var(--rl-error);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-app-card-pct-badge {
  background: var(--rl-bg-overlay);
  border-radius: 0.375rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rl-text-muted);
  flex-shrink: 0;
}
/* ── Two-column stat layout inside app cards ── */
.rl-app-card .rl-app-card-stats-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  margin-top: 0.25rem;
}
.rl-app-card .rl-app-card-stat-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0;
}
.rl-app-card .rl-app-card-stat-col:first-child {
  padding-right: 1rem;
}
.rl-app-card .rl-app-card-stat-col:last-child {
  padding-left: 1rem;
}
.rl-app-card .rl-app-card-stat-col-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.rl-app-card .rl-app-card-stat-divider {
  width: 1px;
  background: var(--rl-divider);
  align-self: stretch;
  flex-shrink: 0;
}
.rl-app-card .rl-app-card-big-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rl-text-heading);
}
.rl-app-card .rl-app-card-num-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Legacy footer-row (used elsewhere — keep untouched) */
.rl-app-card-footer-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.rl-app-card-footer-value {
  font-size: 1.125rem;
}
/* Small uppercase muted label above a section (e.g. "App Tenants", "App Summaries") */
.rl-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.75rem;
}
/* Centered loading placeholder inside a card */
.rl-loading-card {
  padding: 2.5rem;
  text-align: center;
  color: var(--rl-text-muted);
  font-size: 0.875rem;
}

/* Generic table/filter toolbar */
.rl-filters-card {
  padding: 0.875rem 1.25rem;
  margin-bottom: 1rem;
}
.rl-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.rl-filter-search {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}
.rl-filter-select {
  width: auto;
  min-width: 11rem;
}
.rl-filter-summary {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}
.rl-inline-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  cursor: pointer;
  color: var(--rl-text-secondary);
}
.rl-table-wrap {
  overflow-x: auto;
}
.rl-tabs-fill {
  flex: 1;
}
.rl-link-xs {
  font-size: 0.8125rem;
}
.rl-btn-ghost-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}
.rl-text-capitalize {
  text-transform: capitalize;
}
.rl-table-cell-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rl-text-heading);
}
.rl-table-cell-title-strong {
  font-weight: 600;
  color: var(--rl-text-heading);
}
.rl-table-cell-muted {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
.rl-table-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.rl-table-cell-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.rl-filter-pill-static {
  cursor: default;
  font-size: 0.6875rem;
  padding: 0.125rem 0.4375rem;
}
.rl-td-compact {
  font-size: 0.8125rem;
}
.rl-td-nowrap {
  white-space: nowrap;
}
.rl-td-muted-compact {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}
.rl-td-muted-xs {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
.rl-inline-note {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
.rl-inline-note-tight {
  margin-left: 0.25rem;
}
.rl-code-chip {
  font-size: 0.75rem;
  background: var(--rl-bg-subtle);
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
}
.rl-modal-sm {
  max-width: 27.5rem;
}
.rl-modal-md {
  max-width: 32.5rem;
}
.rl-modal-lg {
  max-width: 40rem;
}
.rl-modal-xl {
  max-width: 44rem;
  width: 96vw;
}
.rl-modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--rl-text-heading);
}
.rl-modal-subtitle {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
  margin-top: 0.125rem;
}
.rl-modal-stack-lg {
  gap: 1.25rem;
}
.rl-info-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-size: 0.8125rem;
}
.rl-field-meta {
  font-size: 0.6875rem;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.1875rem;
}
.rl-value-strong {
  font-weight: 500;
}
.rl-panel-muted {
  font-size: 0.8125rem;
  background: var(--rl-bg-subtle);
  border-radius: 0.5rem;
  padding: 0.75rem;
  line-height: 1.6;
}
.rl-form-stack {
  border-top: 1px solid var(--rl-border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rl-label-sm {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.rl-textarea-vertical {
  resize: vertical;
}
.rl-actions-row {
  display: flex;
  gap: 0.625rem;
}
.rl-actions-row > * {
  flex: 1;
}
.rl-self-start {
  align-self: flex-start;
}
.rl-page-max-md {
  max-width: 48rem;
}
.rl-stat-meta {
  font-size: 0.6875rem;
  color: var(--rl-text-muted);
  margin-top: 0.25rem;
}
.rl-text-center {
  text-align: center;
}
.rl-tabs-fill {
  flex: 1;
}
.rl-link-xs {
  font-size: 0.8125rem;
}
.rl-btn-ghost-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}
.rl-text-capitalize {
  text-transform: capitalize;
}
.rl-table-cell-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rl-text-heading);
}
.rl-table-cell-title-strong {
  font-weight: 600;
  color: var(--rl-text-heading);
}
.rl-table-cell-muted {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
.rl-table-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.rl-table-cell-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.rl-filter-pill-static {
  cursor: default;
  font-size: 0.6875rem;
  padding: 0.125rem 0.4375rem;
}
.rl-td-compact {
  font-size: 0.8125rem;
}
.rl-td-nowrap {
  white-space: nowrap;
}
.rl-td-muted-compact {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}
.rl-td-muted-xs {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
.rl-inline-note {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
.rl-inline-note-tight {
  margin-left: 0.25rem;
}
.rl-code-chip {
  font-size: 0.75rem;
  background: var(--rl-bg-subtle);
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
}
.rl-modal-sm {
  max-width: 27.5rem;
}
.rl-modal-md {
  max-width: 32.5rem;
}
.rl-modal-lg {
  max-width: 40rem;
}
.rl-modal-xl {
  max-width: 44rem;
  width: 96vw;
}
.rl-modal-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--rl-text-heading);
}
.rl-modal-subtitle {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
  margin-top: 0.125rem;
}
.rl-modal-stack-lg {
  gap: 1.25rem;
}
.rl-info-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-size: 0.8125rem;
}
.rl-field-meta {
  font-size: 0.6875rem;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.1875rem;
}
.rl-value-strong {
  font-weight: 500;
}
.rl-panel-muted {
  font-size: 0.8125rem;
  background: var(--rl-bg-subtle);
  border-radius: 0.5rem;
  padding: 0.75rem;
  line-height: 1.6;
}
.rl-form-stack {
  border-top: 1px solid var(--rl-border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rl-label-sm {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.rl-textarea-vertical {
  resize: vertical;
}
.rl-actions-row {
  display: flex;
  gap: 0.625rem;
}
.rl-actions-row > * {
  flex: 1;
}
.rl-self-start {
  align-self: flex-start;
}

/* Logs page readability helpers */
.rl-logs-filters-card {
  padding: 0.875rem 1.25rem;
  margin-bottom: 1rem;
}
.rl-logs-filters-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.rl-logs-search {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 360px;
}
.rl-logs-select {
  flex: 0 0 auto;
}
.rl-logs-level-pills {
  display: flex;
  gap: 0.375rem;
  margin-left: auto;
}
.rl-logs-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.rl-logs-summary-text {
  font-size: 0.8125rem;
}
.rl-logs-toggle {
  font-size: 0.75rem;
  color: var(--rl-accent);
  background: none;
  border: none;
  cursor: pointer;
}
.rl-logs-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rl-log-item {
  overflow: hidden;
  border-left: 3px solid var(--rl-border);
}
.rl-log-item-error {
  border-left-color: var(--rl-error);
}
.rl-log-item-warn {
  border-left-color: var(--rl-warning);
}
.rl-log-file {
  font-family: monospace;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  color: var(--rl-text-secondary);
}
.rl-log-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.rl-log-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}
.rl-log-badge-error {
  background: color-mix(in srgb, var(--rl-error) 20%, transparent);
  color: var(--rl-error);
}
.rl-log-badge-warn {
  background: color-mix(in srgb, var(--rl-warning) 20%, transparent);
  color: color-mix(in srgb, var(--rl-warning) 75%, #111827);
}
html.light:not(.dark) .rl-log-badge-warn {
  color: #92400e;
}
.rl-log-lines-count {
  font-size: 0.75rem;
}
.rl-log-viewer {
  border-top: 1px solid var(--rl-border);
  background: var(--rl-log-viewer-bg);
  padding: 1rem;
  overflow-x: auto;
  max-height: 32rem;
  overflow-y: auto;
}
.rl-log-pre {
  font-size: 0.72rem;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  line-height: 1.6;
  margin: 0;
}
.rl-log-line {
  display: block;
}
.rl-log-line-default {
  color: var(--rl-log-line-default);
}
.rl-log-line-info {
  color: var(--rl-log-line-info);
}
.rl-log-line-warn {
  color: var(--rl-log-line-warn);
}
.rl-log-line-error {
  color: var(--rl-log-line-error);
}

.rl-stat-card-red {
  border-top-color: var(--rl-error);
}
.rl-stat-card-blue {
  border-top-color: var(--rl-info);
}
.rl-stat-card-purple {
  border-top-color: #a855f7;
}
.rl-stat-card-green {
  border-top-color: var(--rl-success);
}
.rl-stat-card-amber {
  border-top-color: var(--rl-warning);
}
.rl-stat-card-orange {
  border-top-color: var(--rl-orange, #ea580c);
}

.rl-stat-red {
  color: var(--rl-error);
}
.rl-stat-blue {
  color: var(--rl-info);
}
.rl-stat-purple {
  color: #a855f7;
}

.rl-stat-label-red {
  color: color-mix(in srgb, var(--rl-error) 70%, var(--rl-text-primary));
}
.rl-stat-label-blue {
  color: color-mix(in srgb, var(--rl-info) 70%, var(--rl-text-primary));
}
.rl-stat-label-purple {
  color: color-mix(in srgb, #a855f7 70%, var(--rl-text-primary));
}

/* Action plan phase cards */
.rl-phase-card-0 {
  background: color-mix(in srgb, var(--rl-success) 8%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-phase-card-1 {
  background: color-mix(in srgb, var(--rl-info) 8%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, var(--rl-info) 30%, transparent);
}
.rl-phase-card-2 {
  background: color-mix(in srgb, #a855f7 8%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, #a855f7 30%, transparent);
}
.rl-phase-badge-0 {
  background: linear-gradient(
    135deg,
    var(--rl-success),
    color-mix(in srgb, var(--rl-success) 70%, var(--rl-info))
  );
  color: var(--rl-text-on-brand);
}
.rl-phase-badge-1 {
  background: linear-gradient(
    135deg,
    var(--rl-info),
    color-mix(in srgb, var(--rl-info) 70%, var(--rl-accent))
  );
  color: var(--rl-text-on-brand);
}
.rl-phase-badge-2 {
  background: linear-gradient(
    135deg,
    var(--rl-purple, #a855f7),
    color-mix(in srgb, var(--rl-purple, #a855f7) 70%, var(--rl-error))
  );
  color: var(--rl-text-on-brand);
}

/* Download/email card */
.rl-download-card {
  background: color-mix(in srgb, var(--rl-accent) 8%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, var(--rl-accent) 30%, transparent);
}

/* Priority gap banner */
.rl-gap-banner {
  background: color-mix(in srgb, var(--rl-error) 8%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, var(--rl-error) 30%, transparent);
  border-radius: 1rem;
}

/* Next-steps / implementation path page */
.rl-path-header-badge {
  background: color-mix(
    in srgb,
    var(--rl-purple, #a855f7) 12%,
    var(--rl-bg-elevated)
  );
  border: 1px solid
    color-mix(in srgb, var(--rl-purple, #a855f7) 30%, transparent);
  color: color-mix(
    in srgb,
    var(--rl-purple, #a855f7) 80%,
    var(--rl-text-primary)
  );
}
.rl-path-card-cyan {
  background: color-mix(in srgb, var(--rl-info) 6%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, var(--rl-info) 30%, transparent);
}
.rl-path-card-purple {
  background: color-mix(
    in srgb,
    var(--rl-purple, #a855f7) 6%,
    var(--rl-bg-elevated)
  );
  border: 2px solid
    color-mix(in srgb, var(--rl-purple, #a855f7) 30%, transparent);
}
.rl-path-card-blue {
  background: color-mix(in srgb, var(--rl-info) 8%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, var(--rl-info) 30%, transparent);
}

/* Inline-style replacement utilities */
.rl-text-65 {
  font-size: 0.65rem;
}
.rl-text-70 {
  font-size: 0.7rem;
}
.rl-text-72 {
  font-size: 0.72rem;
}
.rl-text-xs {
  font-size: 0.75rem;
}
.rl-text-sm {
  font-size: 0.875rem;
}
.rl-text-12 {
  font-size: 12px;
}
.rl-text-13 {
  font-size: 13px;
}
.rl-font-medium {
  font-weight: 500;
}
.rl-font-semibold {
  font-weight: 600;
}
.rl-font-normal {
  font-weight: 400;
}
.rl-m-0 {
  margin: 0;
}
.rl-mb-1 {
  margin-bottom: 0.25rem;
}
.rl-mb-2 {
  margin-bottom: 0.5rem;
}
.rl-mb-4 {
  margin-bottom: 1rem;
}
.rl-mt-1 {
  margin-top: 0.25rem;
}
.rl-mt-1_5 {
  margin-top: 0.375rem;
}
.rl-opacity-80 {
  opacity: 0.8;
}
.rl-opacity-90 {
  opacity: 0.9;
}
.rl-text-right {
  text-align: right;
}
.rl-minw-10 {
  min-width: 2.5rem;
}
.rl-w-half {
  width: 50%;
}
.rl-resize-y {
  resize: vertical;
}
.rl-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rl-page-header-wrap-sm {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.rl-inline-row-gap-sm {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rl-inline-row-gap-md {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rl-inline-wrap-gap-xs {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.rl-inline-metric-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rl-inline-metric-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rl-text-heading);
  min-width: 1.75rem;
  text-align: right;
  flex-shrink: 0;
}
.rl-inline-between-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rl-inline-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.rl-items-center {
  align-items: center;
}

.rl-card-pad-lg {
  padding: 1.25rem 1.5rem;
}
.rl-card-center-xl {
  padding: 3rem;
  text-align: center;
}
.rl-icon-emoji-lg {
  font-size: 2.5rem;
}
.rl-code-inline {
  font-family: monospace;
  font-size: 0.75rem;
  background: var(--rl-bg-overlay);
  padding: 2px 6px;
  border-radius: 4px;
}
.rl-contract-snippet {
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  font-family: monospace;
  border-top: 1px solid var(--rl-divider);
  padding-top: 0.75rem;
}

.rl-pre-scroll-sm {
  background: var(--rl-bg-subtle);
  border: 1px solid var(--rl-border);
  border-radius: 8px;
  padding: 12px;
  font-size: 11px;
  overflow: auto;
  max-height: 240px;
  line-height: 1.5;
}

.rl-inline-pill-offset {
  margin-top: 2px;
  display: inline-block;
}
.rl-section-label-natural {
  text-transform: none;
  font-size: 0.9375rem;
  letter-spacing: normal;
}

.rl-grid-4-gap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .rl-grid-4-gap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .rl-grid-4-gap {
    grid-template-columns: 1fr;
  }
}
.rl-skeleton-card {
  height: 80px;
  animation: pulse 1.5s infinite;
}

.rl-progress-bar {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--rl-border);
}
.rl-progress-bar::-webkit-progress-bar {
  background: var(--rl-border);
}
.rl-progress-bar::-webkit-progress-value {
  background: var(--rl-accent);
}
.rl-progress-bar::-moz-progress-bar {
  background: var(--rl-accent);
}
.rl-progress-height-xs {
  height: 4px;
}
.rl-progress-height-sm {
  height: 6px;
  min-width: 60px;
}
.rl-progress-height-md {
  height: 10px;
}
.rl-progress-accent::-webkit-progress-value,
.rl-progress-accent::-moz-progress-bar {
  background: var(--rl-accent);
}
.rl-progress-success::-webkit-progress-value,
.rl-progress-success::-moz-progress-bar {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
}
.rl-progress-warning::-webkit-progress-value,
.rl-progress-warning::-moz-progress-bar {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
}
.rl-progress-error::-webkit-progress-value,
.rl-progress-error::-moz-progress-bar {
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
}

.rl-app-accent-default {
  --rl-app-accent: var(--rl-accent);
}
.rl-app-accent-cleartrust {
  --rl-app-accent: #14b8a6;
  border-top: 3px solid #14b8a6;
}
.rl-app-accent-breachlens {
  --rl-app-accent: #6366f1;
  border-top: 3px solid #6366f1;
}
.rl-app-accent-sentinelops {
  --rl-app-accent: #a855f7;
  border-top: 3px solid #a855f7;
}
.rl-app-accent-commandshield {
  --rl-app-accent: #3b82f6;
  border-top: 3px solid #3b82f6;
}
.rl-app-accent-threatwatch {
  --rl-app-accent: #f97316;
  border-top: 3px solid #f97316;
}
.rl-app-accent-top-default {
  border-top: 3px solid var(--rl-accent);
}
.rl-app-accent-top-cleartrust {
  border-top: 3px solid #14b8a6;
}
.rl-app-accent-top-breachlens {
  border-top: 3px solid #6366f1;
}
.rl-app-accent-top-sentinelops {
  border-top: 3px solid #a855f7;
}
.rl-app-accent-top-commandshield {
  border-top: 3px solid #3b82f6;
}
.rl-app-accent-top-threatwatch {
  border-top: 3px solid #f97316;
}
.rl-app-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rl-app-accent, var(--rl-accent));
  display: inline-block;
  flex-shrink: 0;
}
.rl-filter-pill-accent {
  border-color: var(--rl-app-accent, var(--rl-accent)) !important;
  background: var(--rl-app-accent, var(--rl-accent)) !important;
  color: #fff !important;
  font-weight: 600;
}

.rl-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.rl-avatar-h0 {
  background: hsl(0 55% 40%);
}
.rl-avatar-h1 {
  background: hsl(30 55% 40%);
}
.rl-avatar-h2 {
  background: hsl(60 55% 40%);
}
.rl-avatar-h3 {
  background: hsl(90 55% 40%);
}
.rl-avatar-h4 {
  background: hsl(120 55% 40%);
}
.rl-avatar-h5 {
  background: hsl(150 55% 40%);
}
.rl-avatar-h6 {
  background: hsl(180 55% 40%);
}
.rl-avatar-h7 {
  background: hsl(210 55% 40%);
}
.rl-avatar-h8 {
  background: hsl(240 55% 40%);
}
.rl-avatar-h9 {
  background: hsl(270 55% 40%);
}
.rl-avatar-h10 {
  background: hsl(300 55% 40%);
}
.rl-avatar-h11 {
  background: hsl(330 55% 40%);
}

.rl-role-badge {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.rl-role-badge-admin {
  background: color-mix(in srgb, #f97316 15%, transparent);
  color: #c2410c;
  border: 1px solid color-mix(in srgb, #f97316 30%, transparent);
}
.rl-role-badge-client {
  background: color-mix(in srgb, #3b82f6 15%, transparent);
  color: #1d4ed8;
  border: 1px solid color-mix(in srgb, #3b82f6 30%, transparent);
}
.rl-role-badge-default {
  background: var(--rl-bg-overlay);
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
}
.rl-status-dot-muted {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-text-muted);
}
.rl-path-icon-green {
  background: color-mix(in srgb, var(--rl-success) 18%, var(--rl-bg-elevated));
}
.rl-path-icon-cyan {
  background: color-mix(in srgb, var(--rl-info) 18%, var(--rl-bg-elevated));
}
.rl-path-icon-purple {
  background: color-mix(
    in srgb,
    var(--rl-purple, #a855f7) 18%,
    var(--rl-bg-elevated)
  );
}
html.light .rl-path-icon-green {
  background: color-mix(in srgb, var(--rl-success) 20%, #e2e8f0);
}
html.light .rl-path-icon-cyan {
  background: color-mix(in srgb, var(--rl-info) 20%, #e2e8f0);
}
html.light .rl-path-icon-purple {
  background: color-mix(in srgb, var(--rl-purple, #a855f7) 20%, #e2e8f0);
}
.rl-path-icon-blue {
  background: linear-gradient(
    135deg,
    var(--rl-info),
    color-mix(in srgb, var(--rl-info) 60%, var(--rl-purple, #a855f7))
  );
  color: var(--rl-text-on-brand);
}
.rl-path-goodfit-green {
  background: color-mix(in srgb, var(--rl-success) 10%, var(--rl-bg-elevated));
  border: 1px solid color-mix(in srgb, var(--rl-success) 30%, transparent);
  border-radius: 0.5rem;
}
.rl-path-goodfit-cyan {
  background: color-mix(in srgb, var(--rl-info) 10%, var(--rl-bg-elevated));
  border: 2px solid color-mix(in srgb, var(--rl-info) 30%, transparent);
  border-radius: 0.5rem;
}
.rl-path-goodfit-purple {
  background: color-mix(
    in srgb,
    var(--rl-purple, #a855f7) 10%,
    var(--rl-bg-elevated)
  );
  border: 2px solid
    color-mix(in srgb, var(--rl-purple, #a855f7) 30%, transparent);
  border-radius: 0.5rem;
}
.rl-path-title-green {
  color: color-mix(in srgb, var(--rl-success) 80%, var(--rl-text-primary));
}
.rl-path-title-cyan {
  color: color-mix(in srgb, var(--rl-info) 80%, var(--rl-text-primary));
}
.rl-path-title-purple {
  color: color-mix(
    in srgb,
    var(--rl-purple, #a855f7) 80%,
    var(--rl-text-primary)
  );
}
.rl-path-bullet-green {
  color: var(--rl-success);
}
.rl-path-bullet-cyan {
  color: var(--rl-info);
}
.rl-path-bullet-purple {
  color: color-mix(in srgb, var(--rl-purple, #a855f7) 90%, transparent);
}
.rl-bullet-text {
  line-height: var(--rl-leading-relaxed, 1.65);
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD SHARED UTILITIES
   All colours via CSS tokens — light/dark handled automatically.
   ═══════════════════════════════════════════════════════════ */

/* ── Page structure ─────────────────────────────────────────── */
.rl-page {
  padding: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rl-page-centered {
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rl-stepper-wrap {
  padding: 0.75rem 0;
}
.rl-page-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.rl-page-header > .rl-page-title {
  flex-shrink: 0;
}
.rl-page-header > .rl-page-subtitle {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}
.rl-page-header > button,
.rl-page-header > a.rl-btn,
.rl-page-header > .rl-header-actions {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
}

/* ── Settings / Org sidebar tab nav ────────────────────────── */
.rl-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rl-settings-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--rl-radius-sm, 6px);
  border: none;
  background: transparent;
  color: var(--rl-text-muted);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  text-decoration: none;
}
.rl-settings-nav-item:hover {
  color: var(--rl-text-heading);
  background: var(--rl-nav-bg-hover, rgba(148, 163, 184, 0.08));
}
.rl-settings-nav-item.active {
  color: var(--rl-text-heading);
  background: var(--rl-nav-bg-active, rgba(148, 163, 184, 0.12));
  font-weight: 600;
}
.rl-settings-nav-item.danger {
  color: #f87171;
}
.rl-settings-nav-item.danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.dark .rl-settings-nav-item.danger {
  color: #fca5a5;
}
.dark .rl-settings-nav-item.danger:hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}

/* ── Semantic color utility classes ─────────────────────────── */
/* Text */
.rl-text-heading {
  color: var(--rl-text-heading);
}
.rl-text-primary {
  color: var(--rl-text-primary);
}
.rl-text-secondary {
  color: var(--rl-text-secondary);
}
.rl-text-muted {
  color: var(--rl-text-muted);
}
.rl-text-success {
  color: var(--rl-success);
}
.rl-text-error {
  color: var(--rl-error);
}
.rl-text-warning {
  color: var(--rl-warning);
}
.rl-text-accent {
  color: var(--rl-accent);
}
.hover\:rl-text-heading:hover {
  color: var(--rl-text-heading);
}
.hover\:rl-text-primary:hover {
  color: var(--rl-text-primary);
}
.hover\:rl-text-muted:hover {
  color: var(--rl-text-muted);
}
.hover\:rl-text-error:hover {
  color: var(--rl-error);
}

/* Background */
.rl-bg-elevated {
  background: var(--rl-bg-elevated);
}
.rl-bg-surface {
  background: var(--rl-bg-surface);
}
.rl-bg-overlay {
  background: var(--rl-bg-overlay);
}
.rl-bg-subtle {
  background: var(--rl-bg-subtle, var(--rl-bg-surface));
}
.hover\:rl-bg-overlay:hover {
  background: var(--rl-bg-overlay-hover);
}
.rl-bg-success {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
}
.rl-bg-error {
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
}
.rl-bg-warning {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
}
.rl-bg-accent {
  background: color-mix(in srgb, var(--rl-accent) 15%, transparent);
}

/* Border */
.rl-border-color {
  border-color: var(--rl-border);
}
.rl-border-strong-color {
  border-color: var(--rl-border-strong, var(--rl-border));
}
.rl-divide-color > * + * {
  border-color: var(--rl-border);
}

.rl-page-content {
  padding: 1.5rem;
}
.rl-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rl-text-heading);
}
.rl-page-subtitle {
  font-size: 0.875rem;
  color: var(--rl-text-muted);
}

/* ── Section label ──────────────────────────────────────────── */
.rl-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rl-text-muted);
  margin-bottom: 0.5rem;
}

/* ── Loading spinner ────────────────────────────────────────── */
.rl-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--rl-accent);
  border-top-color: transparent;
  border-radius: 9999px;
  animation: rl-spin 0.7s linear infinite;
}
@keyframes rl-spin {
  to {
    transform: rotate(360deg);
  }
}
.rl-spinner-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
}

/* ── Progress bar ───────────────────────────────────────────── */
.rl-progress {
  height: 0.375rem;
  background: var(--rl-bg-elevated);
  border-radius: 9999px;
  overflow: hidden;
  width: 100%;
}
.rl-progress-bar {
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 9999px;
  background: var(--rl-brand-gradient);
  transition: width 0.7s ease;
}

/* ── Table ──────────────────────────────────────────────────── */
.rl-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.rl-table-head {
  border-bottom: 2px solid var(--rl-border);
  background: var(--rl-bg-elevated);
}
.rl-th {
  text-align: left;
  padding: 0.6875rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rl-text-muted);
  white-space: nowrap;
}
.rl-tr {
  border-bottom: 1px solid var(--rl-border);
  transition: background 0.15s;
}
.rl-tr:last-child {
  border-bottom: none;
}
.rl-tr:hover {
  background: var(--rl-bg-overlay-hover);
}
.rl-tr-clickable {
  cursor: pointer;
}
.rl-td {
  padding: 0.8125rem 1.25rem;
  color: var(--rl-text-primary);
  vertical-align: middle;
  border-bottom: 1px solid var(--rl-border);
}
tr:last-child .rl-td,
tr:last-child .rl-td-muted,
tr:last-child .rl-td-mono {
  border-bottom: none;
}
.rl-td-muted {
  padding: 0.8125rem 1.25rem;
  vertical-align: middle;
  color: var(--rl-text-muted);
  border-bottom: 1px solid var(--rl-border);
}
.rl-td-mono {
  padding: 0.8125rem 1.25rem;
  vertical-align: middle;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  border-bottom: 1px solid var(--rl-border);
}

/* ── Form controls ──────────────────────────────────────────── */
.rl-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rl-text-muted);
  margin-bottom: 0.375rem;
}
.rl-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--rl-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: 1px solid var(--rl-input-border);
  color: var(--rl-input-text);
  border-radius: 0.5rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
}
.rl-select:focus {
  outline: none;
  border-color: var(--rl-input-focus);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--rl-input-focus) 20%, transparent);
}
.rl-textarea {
  background-color: var(--rl-input-bg);
  border: 1px solid var(--rl-input-border);
  color: var(--rl-input-text);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  resize: vertical;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  width: 100%;
}
.rl-textarea::placeholder {
  color: var(--rl-input-placeholder);
}
.rl-textarea:focus {
  outline: none;
  border-color: var(--rl-input-focus);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--rl-input-focus) 20%, transparent);
}

/* ── Filter row ─────────────────────────────────────────────── */
.rl-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.rl-filter-search {
  flex: 1;
  min-width: 180px;
}

/* Filter pills (e.g. category / type toggles in filter rows) */
.rl-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 400;
  border: 1px solid var(--rl-border);
  background: transparent;
  color: var(--rl-text-muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s,
    font-weight 0.15s;
  text-transform: capitalize;
  white-space: nowrap;
  line-height: 1.4;
}
.rl-filter-pill:hover {
  border-color: var(--rl-accent);
  color: var(--rl-accent);
}
.rl-filter-pill.active {
  border-color: var(--rl-accent);
  background: var(--rl-accent);
  color: #fff;
  font-weight: 600;
}

/* ── Empty state ────────────────────────────────────────────── */
.rl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 1rem;
  gap: 0.75rem;
}
.rl-empty-state-icon {
  font-size: 2.5rem;
}
.rl-empty-state-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-secondary);
}
.rl-empty-state-body {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
  max-width: 24rem;
}
.rl-td-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--rl-text-muted);
  font-size: 0.875rem;
}
.rl-td-empty-title {
  font-weight: 600;
  color: var(--rl-text-secondary);
  margin-bottom: 0.25rem;
}
.rl-td-empty-body {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}

/* ── Modal ──────────────────────────────────────────────────── */
.rl-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.rl-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.rl-modal {
  position: relative;
  width: 100%;
  max-width: 32rem;
  background: var(--rl-bg-surface-solid);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.rl-modal-lg {
  max-width: 42rem;
}
.rl-modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.rl-modal-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-heading);
}
.rl-modal-close {
  color: var(--rl-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.125rem;
  transition: color 0.15s;
}
.rl-modal-close:hover {
  color: var(--rl-text-primary);
}
.rl-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rl-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rl-border);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ── Drawer / side panel ────────────────────────────────────── */
.rl-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
}
.rl-drawer-backdrop {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
}
.rl-drawer {
  width: 100%;
  max-width: 28rem;
  background: var(--rl-bg-surface-solid);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rl-drawer-lg {
  max-width: 36rem;
}
.rl-drawer-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rl-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
}
.rl-drawer-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rl-text-heading);
}
.rl-drawer-subtitle {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}
.rl-drawer-body {
  flex: 1;
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rl-drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rl-border);
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ── Framework monospace tag ────────────────────────────────── */
.rl-fw-tag {
  font-size: 0.7rem;
  font-family: ui-monospace, monospace;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--rl-bg-elevated);
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  white-space: nowrap;
}
.rl-fw-tag-sm {
  font-size: 0.6rem;
  padding: 1px 5px;
}

/* ── Pre-discount / original price (crossed-out) ───────────── */
.rl-price-original {
  text-decoration: line-through;
  color: var(--rl-text-muted);
  opacity: 0.7;
}
.dark .rl-price-original {
  color: var(--rl-text-muted);
  opacity: 0.55;
}

/* ── Severity badges ────────────────────────────────────────── */
.rl-severity {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
}
.rl-severity-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
}
.rl-severity-critical {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-severity-high {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-severity-medium {
  background: color-mix(in srgb, var(--rl-warning) 10%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 25%, transparent);
  opacity: 0.9;
}
.rl-severity-low {
  background: color-mix(in srgb, var(--rl-info) 12%, transparent);
  color: var(--rl-info);
  border-color: color-mix(in srgb, var(--rl-info) 30%, transparent);
}
.rl-severity-informational {
  background: var(--rl-bg-elevated);
  color: var(--rl-text-muted);
  border-color: var(--rl-border);
}

/* ── Status pills ───────────────────────────────────────────── */
/* Base .rl-status is shared; modifier classes add colour */
.rl-status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
/* Control statuses */
.rl-status-met {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-status-partial {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-status-in-progress {
  background: color-mix(in srgb, var(--rl-accent) 12%, transparent);
  color: var(--rl-accent);
  border-color: color-mix(in srgb, var(--rl-accent) 30%, transparent);
}
.rl-status-not-started {
  background: var(--rl-bg-elevated);
  color: var(--rl-text-muted);
  border-color: var(--rl-border);
}
.rl-status-not-met {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-status-na {
  background: var(--rl-bg-elevated);
  color: var(--rl-text-muted);
  border-color: var(--rl-border);
  opacity: 0.6;
}
/* Finding statuses */
.rl-status-open {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-status-in-remediation {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-status-remediated {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-status-accepted-risk {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-status-closed {
  background: var(--rl-bg-elevated);
  color: var(--rl-text-muted);
  border-color: var(--rl-border);
}
/* DSR statuses */
.rl-status-received {
  background: color-mix(in srgb, var(--rl-info) 12%, transparent);
  color: var(--rl-info);
  border-color: color-mix(in srgb, var(--rl-info) 30%, transparent);
}
.rl-status-in-review {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-status-fulfilled {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-status-declined {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-status-extended {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
/* DPIA statuses */
.rl-status-draft {
  background: var(--rl-bg-elevated);
  color: var(--rl-text-muted);
  border-color: var(--rl-border);
}
.rl-status-approved {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-status-rejected {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
/* Lawful basis / consent active status */
.rl-status-active {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-status-under-review {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-status-withdrawn {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}

/* ── Status aliases (pass/fail) ─────────────────────────────── */
.rl-status-pass {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-status-fail {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}

/* ── Semantic text colour utilities ─────────────────────────── */
.rl-text-success {
  color: var(--rl-success);
}
.rl-text-warning {
  color: var(--rl-warning);
}
.rl-text-error {
  color: var(--rl-error);
}

/* ── Priority label colours ─────────────────────────────────── */
.rl-priority-critical {
  color: var(--rl-error);
  font-weight: 600;
}
.rl-priority-high {
  color: var(--rl-warning);
  font-weight: 600;
}
.rl-priority-medium {
  color: var(--rl-text-secondary);
}
.rl-priority-low {
  color: var(--rl-text-muted);
}

/* ── Deadline colouring ─────────────────────────────────────── */
.rl-deadline-overdue {
  color: var(--rl-error);
  font-weight: 700;
}
.rl-deadline-urgent {
  color: var(--rl-error);
  font-weight: 600;
}
.rl-deadline-soon {
  color: var(--rl-warning);
  font-weight: 600;
}
.rl-deadline-ok {
  color: var(--rl-text-muted);
}

/* ── GDPR lawful basis tags ─────────────────────────────────── */
.rl-lawful-basis {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.rl-lawful-consent {
  background: color-mix(in srgb, var(--rl-accent) 12%, transparent);
  color: var(--rl-accent);
  border-color: color-mix(in srgb, var(--rl-accent) 30%, transparent);
}
.rl-lawful-contract {
  background: color-mix(in srgb, var(--rl-info) 12%, transparent);
  color: var(--rl-info);
  border-color: color-mix(in srgb, var(--rl-info) 30%, transparent);
}
.rl-lawful-legal-obligation {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-lawful-vital-interests {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-lawful-public-task {
  background: color-mix(in srgb, #a855f7 12%, transparent);
  color: #a855f7;
  border-color: color-mix(in srgb, #a855f7 30%, transparent);
}
.rl-lawful-legitimate-interests {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}

/* ── Risk level ─────────────────────────────────────────────── */
.rl-risk {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid;
}
.rl-risk-low {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-risk-medium {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-risk-high {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-risk-critical {
  background: color-mix(in srgb, #dc2626 15%, transparent);
  color: #ef4444;
  border-color: color-mix(in srgb, #dc2626 40%, transparent);
}

/* ── Stat card ──────────────────────────────────────────────── */
.rl-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rl-text-heading);
  line-height: 1;
}
.rl-stat-label {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  margin-top: 0.25rem;
}

/* ── Ghost / cancel button ──────────────────────────────────── */
.rl-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  text-decoration: none;
}
.rl-btn-ghost:hover {
  background: var(--rl-bg-overlay);
  color: var(--rl-text-primary);
  border-color: var(--rl-border-strong);
}
.rl-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Refresh button — standard icon+label ghost style ────────── */
.rl-btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  text-decoration: none;
}
.rl-btn-refresh:hover {
  background: var(--rl-bg-overlay);
  color: var(--rl-text-primary);
  border-color: var(--rl-border-strong);
}
.rl-btn-refresh:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Refresh button — loading state: spin the SVG icon */
.rl-btn-refresh.refreshing {
  color: var(--rl-accent);
  border-color: var(--rl-accent);
  cursor: wait;
}
.rl-btn-refresh.refreshing svg {
  animation: rl-spin 0.7s linear infinite;
}
@keyframes rl-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Refresh "done" flash badge */
.rl-refresh-done {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rl-success);
  animation: rl-fade-out 2s ease forwards;
}
@keyframes rl-fade-out {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ── Document type selection card ───────────────────────────── */
.rl-doc-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.rl-doc-type-card-title {
  font-size: 0.875rem;
  font-weight: 600;
}
.rl-doc-type-card-desc {
  font-size: 0.75rem;
  margin-top: 0.25rem;
  color: var(--rl-text-muted);
}

/* ── Success button ─────────────────────────────────────────── */
.rl-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--rl-success);
  border: 1px solid color-mix(in srgb, var(--rl-success) 40%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.rl-btn-success:hover {
  background: color-mix(in srgb, var(--rl-success) 10%, transparent);
}
.rl-btn-success:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Warning button ─────────────────────────────────────────── */
.rl-btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--rl-warning);
  border: 1px solid color-mix(in srgb, var(--rl-warning) 40%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.rl-btn-warning:hover {
  background: color-mix(in srgb, var(--rl-warning) 10%, transparent);
}
.rl-btn-warning:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Gradient badge ─────────────────────────────────────────── */
.rl-gradient-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: linear-gradient(
    135deg,
    var(--rl-accent),
    color-mix(in srgb, var(--rl-accent) 60%, var(--rl-success))
  );
  color: #fff;
}

/* ── Danger button ──────────────────────────────────────────── */
.rl-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--rl-error);
  border: 1px solid color-mix(in srgb, var(--rl-error) 40%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.rl-btn-danger:hover {
  background: color-mix(in srgb, var(--rl-error) 10%, transparent);
}
.rl-btn-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Button size modifiers ──────────────────────────────────── */
.rl-btn-sm {
  font-size: 0.75rem !important;
  padding: 0.375rem 0.75rem !important;
}
.rl-btn-lg {
  font-size: 1rem !important;
  padding: 0.625rem 1.25rem !important;
}

/* ── Warning button ─────────────────────────────────────────── */
.rl-btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d97706;
  color: #ffffff;
  border: none;
  border-radius: var(--rl-radius, 8px);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.rl-btn-warning:hover {
  background: rgb(234, 179, 8);
}
.rl-btn-warning:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Icon button ────────────────────────────────────────────── */
.rl-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--rl-text-muted);
  border-radius: var(--rl-radius-sm, 6px);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  padding: 0.375rem;
}
.rl-btn-icon:hover {
  color: var(--rl-text-heading);
  background: var(--rl-nav-bg-hover);
}
.rl-btn-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Icon danger button ─────────────────────────────────────── */
.rl-btn-icon-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--rl-text-muted);
  border-radius: var(--rl-radius-sm, 6px);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  padding: 0.375rem;
}
.rl-btn-icon-danger:hover {
  color: var(--rl-error, #ef4444);
  background: rgba(239, 68, 68, 0.08);
}
.rl-btn-icon-danger:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Header actions wrapper (multiple buttons in rl-page-header) */
.rl-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* ── Selection / bulk-action bar ────────────────────────────── */
.rl-selection-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: color-mix(in srgb, var(--rl-accent) 8%, transparent);
  border: 1px solid var(--rl-accent-border);
  color: var(--rl-text-primary);
}

/* ── Table row action group ─────────────────────────────────── */
.rl-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.rl-table-actions .rl-action-link + .rl-action-link::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.875rem;
  background: var(--rl-border-strong);
  margin-right: 0.125rem;
  vertical-align: middle;
}

/* ── Small table action links ───────────────────────────────── */
.rl-action-link {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rl-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
  transition:
    color 0.15s,
    background 0.15s;
  text-decoration: none;
  line-height: 1;
}
.rl-action-link:hover {
  color: var(--rl-accent);
  background: var(--rl-accent-subtle);
}
.rl-action-link-danger:hover {
  color: var(--rl-error);
}

/* ── Toggleable filter chip ─────────────────────────────────── */
.rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--rl-border);
  color: var(--rl-text-muted);
  background: var(--rl-bg-elevated);
  cursor: pointer;
  transition: all 0.15s;
}
.rl-chip:hover {
  border-color: var(--rl-accent-border);
  color: var(--rl-accent);
}
.rl-chip-active {
  border-color: var(--rl-accent-border);
  color: var(--rl-accent);
  background: var(--rl-accent-subtle);
}

/* ── Horizontal rule ────────────────────────────────────────── */
.rl-divider {
  border: none;
  border-top: 1px solid var(--rl-border);
}

/* ── Info / note panel ──────────────────────────────────────── */
.rl-note {
  background: var(--rl-bg-elevated);
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--rl-text-secondary);
}
.rl-note-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rl-text-primary);
  margin-bottom: 0.5rem;
}

/* ── Accent text ────────────────────────────────────────────── */
.rl-text-accent {
  color: var(--rl-accent);
}
.rl-text-muted {
  color: var(--rl-text-muted);
}
.rl-text-primary {
  color: var(--rl-text-primary);
}
.rl-text-heading {
  color: var(--rl-text-heading);
}

/* ── Mono control ID ────────────────────────────────────────── */
.rl-control-id {
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rl-accent);
}

/* ── Two-grid stat strip ────────────────────────────────────── */
.rl-stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1rem;
}

/* ── Expandable accordion section ───────────────────────────── */
.rl-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.rl-accordion-trigger:hover {
  background: var(--rl-bg-overlay-hover);
}
/* Left / right split inside the accordion trigger */
.rl-accordion-trigger-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  min-width: 0;
}
.rl-accordion-trigger-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
/* Status dot (green/red) next to service name */
.rl-service-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rl-service-state-dot-ok {
  background: var(--rl-success);
}
.rl-service-state-dot-error {
  background: var(--rl-error);
}
/* Service name */
.rl-service-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-heading);
  white-space: nowrap;
}
/* Local path — muted, truncated, small mono */
.rl-service-path {
  font-size: 0.7rem;
  font-family: var(--rl-font-mono);
  color: var(--rl-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}
/* Latest commit pill: hash + bullet + relative date */
.rl-service-latest {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 0.375rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  color: var(--rl-text-muted);
}
.rl-service-hash {
  font-family: var(--rl-font-mono);
  font-size: 0.72rem;
  font-weight: 600;
}
/* Bullet separator between hash and date */
.rl-service-latest > span:not(:first-child)::before {
  content: "·";
  margin-right: 0.35rem;
  opacity: 0.5;
}
/* Commit count badge */
.rl-service-commit-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--rl-text-muted);
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 0.375rem;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
/* Caret */
.rl-accordion-caret {
  font-size: 0.6rem;
  color: var(--rl-text-muted);
  transition: transform 0.2s;
  display: inline-block;
}
.rl-accordion-caret-open {
  transform: rotate(0deg);
}
.rl-accordion-caret-closed {
  transform: rotate(-90deg);
}
.rl-accordion-chevron {
  transition: transform 0.2s;
  color: var(--rl-text-muted);
}
.rl-accordion-chevron-open {
  transform: rotate(180deg);
}

/* ── Deadline countdown badge ───────────────────────────────── */
.rl-countdown {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── SOC 2 TSC Category color tokens ───────────────────────── */
/* Usage: add .rl-tsc-{key} to a container, then use .rl-tsc-badge/.rl-tsc-bar inside */
.rl-tsc-cc {
  --tsc-r: 6;
  --tsc-g: 182;
  --tsc-b: 212;
} /* cyan    */
.rl-tsc-a1 {
  --tsc-r: 34;
  --tsc-g: 197;
  --tsc-b: 94;
} /* green   */
.rl-tsc-c1 {
  --tsc-r: 168;
  --tsc-g: 85;
  --tsc-b: 247;
} /* purple  */
.rl-tsc-pi1 {
  --tsc-r: 249;
  --tsc-g: 115;
  --tsc-b: 22;
} /* orange  */
.rl-tsc-p {
  --tsc-r: 236;
  --tsc-g: 72;
  --tsc-b: 153;
} /* pink    */

.rl-tsc-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b) / 0.12);
  border: 1px solid rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b) / 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b));
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--rl-font-mono);
}
.rl-tsc-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b) / 0.35);
  background: rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b) / 0.12);
  color: rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b));
}
.rl-tsc-text {
  color: rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b));
}
.rl-tsc-bar {
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b) / 0.9),
    rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b) / 0.7)
  );
  transition: width 0.7s ease;
}
.rl-tsc-link {
  font-size: 0.75rem;
  color: rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b));
  text-decoration: none;
}
.rl-tsc-link:hover {
  text-decoration: underline;
}
.rl-tsc-control-id {
  font-family: var(--rl-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgb(var(--tsc-r) var(--tsc-g) var(--tsc-b));
}

/* SVG circle progress */
.rl-circle-track {
  stroke: var(--rl-border);
}
.rl-circle-fill {
  stroke: var(--rl-accent);
  transition: stroke-dasharray 0.7s ease;
}

/* ── CMMC Implementation Status ─────────────────────────────── */
.rl-impl {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}
.rl-impl-not-implemented {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
}
.rl-impl-planned {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
}
.rl-impl-partially-implemented {
  background: color-mix(in srgb, var(--rl-info) 15%, transparent);
  color: var(--rl-info);
}
.rl-impl-implemented {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
}

/* CMMC Level badge */
.rl-cmmc-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
}
.rl-cmmc-level-1 {
  background: color-mix(in srgb, var(--rl-success) 20%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
}
.rl-cmmc-level-2 {
  background: color-mix(in srgb, var(--rl-warning) 20%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
}
.rl-cmmc-level-3 {
  background: color-mix(in srgb, var(--rl-error) 20%, transparent);
  color: var(--rl-error);
  border: 1px solid var(--rl-error);
}

/* CMMC Domain accordion */
.rl-domain-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rl-border);
  background: var(--rl-surface);
  user-select: none;
}
.rl-domain-header:hover {
  background: var(
    --rl-surface-hover,
    color-mix(in srgb, var(--rl-surface) 85%, var(--rl-accent))
  );
}
.rl-domain-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--rl-text-primary);
  flex: 1;
}
.rl-domain-abbr {
  font-family: var(--rl-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rl-text-muted);
  width: 2rem;
}
.rl-domain-progress {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  white-space: nowrap;
}
.rl-practice-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 1rem 0.65rem 2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rl-border) 50%, transparent);
}
.rl-practice-row:last-child {
  border-bottom: none;
}
.rl-practice-id {
  font-family: var(--rl-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rl-text-muted);
  min-width: 5rem;
  padding-top: 0.15rem;
}
.rl-practice-title {
  font-size: 0.8rem;
  color: var(--rl-text-primary);
  flex: 1;
  line-height: 1.4;
}
.rl-practice-desc {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  line-height: 1.4;
  margin-top: 0.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FedRAMP impact-level badges
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-fedramp-low {
  background: color-mix(in srgb, var(--rl-success) 20%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rl-fedramp-moderate {
  background: color-mix(in srgb, var(--rl-warning) 20%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.rl-fedramp-high {
  background: color-mix(in srgb, var(--rl-error) 20%, transparent);
  color: var(--rl-error);
  border: 1px solid var(--rl-error);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* FedRAMP ConMon frequency badges */
.rl-conmon-continuous {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-conmon-monthly {
  background: color-mix(in srgb, var(--rl-info) 15%, transparent);
  color: var(--rl-info);
  border: 1px solid var(--rl-info);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-conmon-quarterly {
  background: color-mix(in srgb, var(--rl-accent) 15%, transparent);
  color: var(--rl-accent);
  border: 1px solid var(--rl-accent);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-conmon-annual {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}

/* FedRAMP control inheritance type */
.rl-inherit-inherited {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-inherit-shared {
  background: color-mix(in srgb, var(--rl-info) 15%, transparent);
  color: var(--rl-info);
  border: 1px solid var(--rl-info);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-inherit-customer {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PCI DSS CDE / SAQ badges
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-pci-cde {
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
  color: var(--rl-error);
  border: 1px solid var(--rl-error);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.rl-pci-in-scope {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.rl-pci-out-scope {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.rl-saq-badge {
  background: color-mix(in srgb, var(--rl-accent) 15%, transparent);
  color: var(--rl-accent);
  border: 1px solid var(--rl-accent);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--rl-font-mono);
}

/* ── Inline-style replacement utilities (apps + readiness pages) ─────────── */
.rl-inline-row-gap-xs {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.rl-inline-row-gap-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.rl-inline-wrap-gap-sm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rl-inline-wrap-gap-md {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.rl-items-center {
  align-items: center;
}
.rl-text-right {
  text-align: right;
}
.rl-text-center {
  text-align: center;
}
.rl-text-xs {
  font-size: 0.75rem;
}
.rl-text-sm {
  font-size: 0.8125rem;
}
.rl-text-mono-xs {
  font-family: var(--rl-font-mono);
  font-size: 0.6875rem;
}
.rl-text-capitalize {
  text-transform: capitalize;
}
.rl-font-semibold {
  font-weight: 600;
}
.rl-gap-2-5 {
  gap: 0.625rem;
}
.rl-p-12 {
  padding: 3rem;
}
.rl-p-16 {
  padding: 4rem;
}
.rl-mt-2 {
  margin-top: 0.5rem;
}
.rl-mt-6 {
  margin-top: 1.5rem;
}
.rl-m-0 {
  margin: 0;
}
.rl-stack-gap-md {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rl-card-pad-lg {
  padding: 1.25rem 1.5rem;
}
.rl-card-title-sm {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-heading);
}
.rl-link-mono-xs {
  font-size: 0.75rem;
  font-family: var(--rl-font-mono);
}
.rl-actions-wrap-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rl-tooltip-inline {
  position: relative;
  display: inline-flex;
}
.rl-tooltip-body-wrap {
  white-space: pre-wrap;
  max-width: 20rem;
}

.rl-config-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.rl-config-box {
  background: var(--rl-surface);
  border-radius: 0.5rem;
  border: 1px solid var(--rl-border);
}
.rl-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.75rem;
  gap: 1rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-config-row-label {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  flex-shrink: 0;
}
.rl-config-row-value {
  font-size: 0.75rem;
  color: var(--rl-text-primary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-config-row-value-mono {
  font-family: var(--rl-font-mono);
}
.rl-config-input-row {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-config-input-label {
  display: block;
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  margin-bottom: 0.25rem;
}
.rl-config-input-hint {
  margin-left: 0.25rem;
  color: var(--rl-text-muted);
  opacity: 0.7;
}
.rl-input-config {
  font-size: 0.75rem;
  font-family: var(--rl-font-mono);
}
.rl-config-saved-text {
  font-size: 0.75rem;
  padding: 0 0.25rem;
}
.rl-config-save-btn {
  flex: 1;
  font-size: 0.75rem;
}
.rl-btn-disabled-soft {
  opacity: 0.6;
}

.rl-sidepanel-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
}
.rl-sidepanel-backdrop {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
}
.rl-sidepanel {
  width: 100%;
  max-width: 28rem;
  background: var(--rl-surface-elevated);
  border-left: 1px solid var(--rl-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--rl-shadow-xl, -4px 0 24px rgba(0, 0, 0, 0.4));
}
.rl-sidepanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-sidepanel-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-heading);
}
.rl-btn-icon-sm {
  padding: 0.375rem;
}
.rl-btn-icon-xs {
  padding: 0.25rem;
}
.rl-sidepanel-tabs-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-sidepanel-inactive-note {
  margin-left: auto;
  font-size: 0.75rem;
  font-style: italic;
}

/* Config panel — env tabs (Dev / Prod) */
.cfg-env-tab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.cfg-env-tab--selected {
  background: var(--rl-accent);
  color: #fff;
}
.cfg-env-tab--unselected {
  background: transparent;
  color: var(--rl-text-muted);
}
.cfg-env-tab--unselected:hover {
  color: var(--rl-text-heading);
  background: var(--rl-bg-overlay);
}
.cfg-env-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 9999px;
  background: var(--rl-success, #22c55e);
  flex-shrink: 0;
}

/* Config panel — inactive / env mismatch banner */
.cfg-inactive-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}
.cfg-env-inactive-banner {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 0.625rem;
  padding: 0.625rem 0.875rem;
}
.rl-sidepanel-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rl-log-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--rl-text-muted);
}
.rl-log-title {
  font-family: var(--rl-font-mono);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

.rl-fw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--rl-bg-elevated);
  color: var(--rl-text-secondary);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.rl-fw-badge-sm {
  font-size: 11px;
  padding: 2px 7px;
}
.rl-fw-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-accent);
  flex-shrink: 0;
  display: inline-block;
}

.rl-score-ring-svg {
  flex-shrink: 0;
}
.rl-score-ring-green {
  stroke: var(--rl-success);
}
.rl-score-ring-yellow {
  stroke: var(--rl-warning);
}
.rl-score-ring-red {
  stroke: var(--rl-error);
}

/* ── SecurityScoreRing component layout ─────────────────────── */
.rl-score-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rl-score-ring-body {
  position: relative;
  width: var(--ring-size, 160px);
  height: var(--ring-size, 160px);
}
.rl-score-ring-svg-r {
  display: block;
  flex-shrink: 0;
  transform: rotate(-90deg);
}
.rl-score-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rl-score-ring-score {
  font-weight: 700;
  line-height: 1.1;
  font-size: calc(var(--ring-size, 160px) * 0.225);
}
.rl-score-ring-grade {
  font-size: calc(var(--ring-size, 160px) * 0.09);
  color: var(--rl-text-muted);
  margin-top: 2px;
}
.rl-score-ring-caption {
  font-size: 0.875rem;
  color: var(--rl-text-muted);
  text-align: center;
}
.rl-score-ring-arc {
  transition: stroke-dashoffset 1s ease-out;
}

/* ── User avatar chip in header ──────────────────────────────── */
.rl-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: var(--rl-bg-muted);
  border: 1px solid var(--rl-border);
  font-size: 13px;
  color: var(--rl-text-primary);
  flex-shrink: 0;
}
.rl-user-chip-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rl-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.rl-user-chip-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
/* Button-rendered chip (dropdown trigger) keeps the same metrics as the static chip */
button.rl-user-chip {
  line-height: 1.2;
}
.rl-user-chip-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--rl-accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rl-readiness-modal {
  max-width: 56rem;
  width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 3px solid var(--rl-accent);
}
.rl-shrink-0 {
  flex-shrink: 0;
}
.rl-readiness-hero {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--rl-border);
  background: var(--rl-bg-elevated);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.rl-readiness-hero-text {
  flex: 1;
  min-width: 180px;
}
.rl-readiness-hero-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--rl-text-heading);
  margin-bottom: 6px;
}
.rl-readiness-hero-copy {
  font-size: 13px;
  color: var(--rl-text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}
.rl-readiness-quick-stat {
  min-width: 80px;
  padding: 10px 14px;
  text-align: center;
}
.rl-readiness-quick-value {
  font-size: 1.4rem;
}
.rl-readiness-tabs {
  padding: 0 24px;
  border-bottom: 1px solid var(--rl-border);
  flex-shrink: 0;
}
.rl-overview-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.rl-overview-pct-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.rl-overview-progress {
  width: 100%;
  height: 7px;
}
.rl-overview-progress::-webkit-progress-bar {
  background: var(--rl-border);
  border-radius: 9999px;
}
.rl-overview-progress::-webkit-progress-value {
  border-radius: 9999px;
}
.rl-overview-progress.rl-seg-green::-webkit-progress-value {
  background: var(--rl-success);
}
.rl-overview-progress.rl-seg-yellow::-webkit-progress-value {
  background: var(--rl-warning);
}
.rl-overview-progress.rl-seg-red::-webkit-progress-value {
  background: var(--rl-error);
}

.rl-gap-card {
  padding: 14px 16px;
}
.rl-gap-head-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.rl-gap-index-pill {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rl-error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rl-gap-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rl-gap-title {
  font-size: 14px;
  color: var(--rl-text-primary);
  margin-bottom: 8px;
  font-weight: 500;
}
.rl-gap-level-row {
  font-size: 12px;
  color: var(--rl-text-muted);
  margin-bottom: 8px;
}
.rl-gap-why-copy {
  font-size: 13px;
  color: var(--rl-text-secondary);
  border-left: 2px solid var(--rl-accent);
  padding-left: 10px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.rl-gap-next-steps {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--rl-text-secondary);
  line-height: 1.6;
}
.rl-context-key-col {
  width: 35%;
}

.rl-fw-card {
  padding: 18px 20px;
  cursor: pointer;
}
.rl-fw-card-active {
  border-color: var(--rl-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-accent) 20%, transparent);
}
.rl-fw-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.rl-fw-card-pct {
  font-size: 18px;
  font-weight: 700;
  color: var(--rl-accent);
  line-height: 1;
  display: block;
}
.rl-fw-card-sub {
  font-size: 10px;
  color: var(--rl-text-muted);
  display: block;
}
.rl-fw-card-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
}
.rl-fw-card-count-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--rl-text-heading);
  line-height: 1;
}
.rl-fw-card-bars {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.rl-fw-bar {
  flex: 1;
  height: 5px;
}
.rl-fw-bar::-webkit-progress-bar {
  background: var(--rl-bg-elevated);
  border-radius: 3px;
}
.rl-fw-bar::-webkit-progress-value {
  border-radius: 3px;
}
.rl-fw-bar.rl-seg-green::-webkit-progress-value {
  background: var(--rl-success);
}
.rl-fw-bar.rl-seg-yellow::-webkit-progress-value {
  background: var(--rl-warning);
}
.rl-fw-bar.rl-seg-red::-webkit-progress-value {
  background: var(--rl-error);
}
.rl-fw-card-tier-grid {
  display: flex;
  justify-content: space-between;
}
.rl-fw-tier-value {
  font-size: 17px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}
.rl-fw-tier-label {
  font-size: 10px;
  color: var(--rl-text-muted);
  margin-top: 1px;
}
.rl-fw-clear-btn {
  margin-left: 8px;
  font-size: 11px;
  color: var(--rl-accent);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.rl-readiness-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.rl-readiness-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.rl-spinner-sm {
  width: 1rem;
  height: 1rem;
}
.rl-pagination-row {
  padding: 12px 20px;
  border-top: 1px solid var(--rl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ISO 27001 SoA applicability badges
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-soa-applicable {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-soa-not-applicable {
  background: color-mix(in srgb, var(--rl-text-muted) 15%, transparent);
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-soa-partial {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NIST 800-53 baseline/impact level badges
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-nist-low {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.rl-nist-moderate {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.rl-nist-high {
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
  color: var(--rl-error);
  border: 1px solid var(--rl-error);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CJIS personnel screening status
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-cjis-cleared {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
  border: 1px solid var(--rl-success);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-cjis-pending {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
  border: 1px solid var(--rl-warning);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-cjis-revoked {
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
  color: var(--rl-error);
  border: 1px solid var(--rl-error);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}
.rl-cjis-not-required {
  background: color-mix(in srgb, var(--rl-text-muted) 10%, transparent);
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Hub / Card Link Layouts (PCI DSS, NIST hub pages)
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.rl-card-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.rl-card-link:hover {
  border-color: var(--rl-primary);
  box-shadow: 0 0 0 1px var(--rl-primary);
}
.rl-card-icon {
  font-size: 1.75rem;
}
.rl-card-desc {
  color: var(--rl-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Info Box (SAQ type description, etc.)
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-info-box {
  background: color-mix(in srgb, var(--rl-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-primary) 30%, transparent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.rl-info-title {
  font-weight: 600;
  color: var(--rl-text);
  font-size: 0.95rem;
}
.rl-info-item {
  font-size: 0.85rem;
  color: var(--rl-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Table utilities
   ══════════════════════════════════════════════════════════════════════════════ */
.rl-tr-selected td {
  background: color-mix(in srgb, var(--rl-primary) 8%, transparent);
}
.rl-input-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--rl-border);
  border-radius: 4px;
  background: var(--rl-input-bg);
  color: var(--rl-text);
}
.rl-select-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border: 1px solid var(--rl-border);
  border-radius: 4px;
  background: var(--rl-input-bg);
  color: var(--rl-text);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Form actions row
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── Form grid (2-col, used across inline forms in cards) ─────── */
.rl-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
}

/* ── Label: stacked (label text above input) ─────────────────── */
.rl-label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rl-text-muted);
}

/* Responsive: single column on small screens */
@media (max-width: 640px) {
  .rl-form-grid {
    grid-template-columns: 1fr;
  }
}

.rl-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--rl-border);
}
.rl-save-confirm {
  color: var(--rl-success);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ── Checklist (NF framework hub pages) ── */
.rl-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rl-checklist-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  background: var(--rl-card-bg);
  border: 1px solid var(--rl-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.rl-checklist-item:hover {
  border-color: var(--rl-primary);
}
.rl-checklist-done {
  background: color-mix(in srgb, var(--rl-success) 8%, transparent);
  border-color: var(--rl-success);
}
.rl-checklist-check {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--rl-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rl-success);
  flex-shrink: 0;
}
.rl-checklist-done .rl-checklist-check {
  background: var(--rl-success);
  border-color: var(--rl-success);
  color: #fff;
}
.rl-checklist-label {
  font-weight: 500;
  color: var(--rl-text);
  font-size: 0.9rem;
}
.rl-checklist-detail {
  color: var(--rl-text-muted);
  font-size: 0.8rem;
  margin-top: 0.2rem;
}

/* fw-scroll shared nav (used by pricing plan list vertical scroll) */
.fw-scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1.5px solid var(--rl-border);
  background: transparent;
  color: var(--rl-text-muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
  flex-shrink: 0;
}
.fw-scroll-btn:hover:not(:disabled) {
  border-color: var(--rl-accent);
  color: var(--rl-accent);
}
.fw-scroll-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.fw-scroll-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fw-scroll-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s;
  flex-shrink: 0;
}
.fw-scroll-dot.active {
  background: var(--rl-accent);
  transform: scale(1.3);
}

/* Plan list vertical scroll nav */
.plan-vscroll {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.plan-vscroll__list {
  flex: 1;
  scrollbar-width: none;
}
.plan-vscroll__list::-webkit-scrollbar {
  display: none;
}
.plan-vscroll__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
}

/* ── Checklist page layout ──────────────────────────────────── */
.rl-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.rl-stat-card .rl-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--rl-text-heading);
  line-height: 1;
}
.rl-stat-card .rl-stat-label {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  margin-top: 0.25rem;
}
.rl-progress-wrap {
  margin-bottom: 1.5rem;
}
.rl-about-section {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
}
.rl-about-section .rl-section-label {
  margin-bottom: 0.75rem;
}
.rl-about-text {
  font-size: 0.875rem;
  color: var(--rl-text-muted);
  line-height: 1.65;
}
.rl-checklist-section {
  margin-top: 0;
}
.rl-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rl-text-muted);
  margin-bottom: 0.75rem;
}
/* Count badge inside framework/filter pills */
.rl-pill-count {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--rl-accent);
  background: color-mix(in srgb, var(--rl-accent) 12%, transparent);
  border-radius: 999px;
  padding: 0 0.35rem;
  line-height: 1.6;
}
/* Subscription grid in user modal */
.rl-subscription-grid {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.rl-subscription-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--rl-bg-subtle);
  border: 1px solid var(--rl-border);
}
.rl-subscription-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rl-text-heading);
}

/* Horizontal framework carousel */
.fw-scroll-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.fw-scroll-track::-webkit-scrollbar {
  display: none;
}
.fw-scroll-card {
  flex: 0 0 calc(25% - 11px);
  min-width: 220px;
  scroll-snap-align: start;
}

/* ── Utility: form full-column span ─────────────────────────── */
.rl-form-col-full {
  grid-column: 1 / -1;
}

/* ── Modal form grid ─────────────────────────────────────────── */
.rl-modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  padding: 1.5rem;
}
.rl-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.rl-form-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rl-text-muted);
}

/* ── Utility: section/card top margin ───────────────────────── */
.rl-section-mt {
  margin-top: 1.5rem;
}
.rl-card-mt {
  margin-top: 2rem;
}

/* ── Utility: truncate with max-width ───────────────────────── */
.rl-truncate-sm {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-truncate-md {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-truncate-lg {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-truncate-xl {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* ── Utility: scrollable container ─────────────────────────── */
.rl-scroll-y {
  overflow-y: auto;
  max-height: 20rem;
}

/* ── Utility: empty state padding variant ───────────────────── */
.rl-empty-state-padded {
  padding: 3rem 1rem;
}

/* ── Utility: bg overlay surface ────────────────────────────── */
.rl-bg-overlay-card {
  background: var(--rl-bg-overlay);
}
.rl-bg-surface-solid {
  background: var(--rl-bg-surface-solid);
}

/* ── Utility: icon card for hub/nav cards ───────────────────── */
.rl-icon-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: var(--rl-radius);
  background: var(--rl-bg-surface-solid);
  border: 1px solid var(--rl-border);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.rl-icon-card:hover {
  border-color: var(--rl-accent);
  box-shadow: 0 0 0 1px var(--rl-accent);
}
.rl-icon-card__icon {
  font-size: 1.75rem;
  line-height: 1;
}
.rl-icon-card__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rl-text-heading);
}
.rl-icon-card__desc {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}

/* ── Utility: accent border card (e.g. active plan) ─────────── */
.rl-card-accent-border {
  border-color: var(--rl-accent);
}

/* ── Utility: progress bar dynamic width (via CSS var) ───────── */
/* Usage: <div class="rl-progress-bar" style="--pct:42%"> — ONLY exception: dynamic values */
/* For inline dynamic widths, components should use CSS custom property on parent */

/* ── Utility: inline icon accent color ──────────────────────── */
.rl-icon-accent {
  color: var(--rl-accent);
}
.rl-icon-muted {
  color: var(--rl-text-muted);
}

/* ── Utility: text size variants ───────────────────────────────*/
.rl-text-sm {
  font-size: 0.8125rem;
}

/* ── Utility: flex row with gap ────────────────────────────── */
.rl-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── LeftNav sidebar container & links ───────────────────────── */
[data-leftnav] {
  background: var(--rl-sidebar-bg);
  border-color: var(--rl-sidebar-border);
}
[data-leftnav-divider] {
  color: var(--rl-nav-section);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 20px 12px 4px;
}
[data-leftnav-link] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--rl-nav-text);
  text-decoration: none;
  transition:
    background 0.1s,
    color 0.1s;
}
[data-leftnav-link]:hover {
  background: var(--rl-nav-bg-hover);
  color: var(--rl-nav-text-hover);
}
[data-leftnav-link][data-active="true"] {
  background: var(--rl-nav-bg-active);
  color: var(--rl-nav-text-active);
  font-weight: 500;
}
[data-leftnav-icon] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--rl-nav-icon);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-leftnav-icon] svg {
  width: 16px;
  height: 16px;
}
[data-leftnav-link][data-active="true"] [data-leftnav-icon] {
  color: var(--rl-nav-icon-active);
}
[data-leftnav-logout] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 400;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rl-nav-logout-text);
  transition:
    background 0.1s,
    color 0.1s;
  font-family: inherit;
}
[data-leftnav-logout]:hover {
  background: var(--rl-nav-logout-bg-hover);
  color: var(--rl-nav-logout-text-hover);
}
[data-leftnav-border] {
  border-top: 1px solid var(--rl-divider);
}
[data-leftnav-logo-border] {
  border-bottom: 1px solid var(--rl-divider);
  padding: 14px 16px 12px;
  flex-shrink: 0;
}
.rl-leftnav-logo-link {
  display: block;
}
.rl-leftnav-app-name {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--rl-text-muted);
  text-decoration: none;
}
.rl-leftnav-nav {
  flex: 1;
  padding: 30px 8px;
  overflow-y: auto;
}
[data-leftnav-child-link] span[aria-hidden] {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
  font-size: 0;
  line-height: 1;
}

/* ── Collapsible nav group (LeftNav level-2) ─────────────────── */
.rl-nav-group {
}
.rl-nav-group-header {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: var(--rl-radius-sm, 6px);
}
.rl-nav-group-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rl-nav-text, var(--rl-text-muted));
  text-decoration: none;
  border-radius: var(--rl-radius-sm, 6px) 0 0 var(--rl-radius-sm, 6px);
  transition:
    color 0.15s,
    background 0.15s;
  min-width: 0;
}
.rl-nav-group-link:hover,
.rl-nav-group-link.active {
  color: var(--rl-nav-text-active, var(--rl-text-heading));
  background: var(--rl-nav-bg-active, rgba(255, 255, 255, 0.06));
}
.rl-nav-group-link.active {
  font-weight: 600;
}
.rl-nav-group-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: var(--rl-text-muted);
  cursor: pointer;
  border-radius: 0 var(--rl-radius-sm, 6px) var(--rl-radius-sm, 6px) 0;
  transition:
    color 0.15s,
    background 0.15s,
    transform 0.2s;
  padding: 0;
}
.rl-nav-group-chevron:hover {
  background: var(--rl-nav-bg-active, rgba(255, 255, 255, 0.06));
  color: var(--rl-text-heading);
}
.rl-nav-group-chevron.open {
  transform: rotate(90deg);
}
.rl-nav-group-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.rl-nav-group-children.open {
  max-height: 20rem;
}
.rl-nav-group-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.625rem 0.35rem 2rem;
  font-size: 0.775rem;
  color: var(--rl-nav-text, var(--rl-text-muted));
  text-decoration: none;
  border-radius: var(--rl-radius-sm, 6px);
  border-left: 2px solid transparent;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.rl-nav-group-child:hover {
  color: var(
    --rl-nav-text-hover,
    var(--rl-nav-text-active, var(--rl-text-heading))
  );
  background: var(--rl-nav-bg-hover, rgba(255, 255, 255, 0.06));
  border-left-color: var(--rl-nav-bg-hover, rgba(255, 255, 255, 0.06));
}
.rl-nav-group-child.active {
  color: var(--rl-nav-text-active, var(--rl-text-heading));
  background: var(--rl-nav-bg-active, rgba(255, 255, 255, 0.06));
  font-weight: 600;
  border-left-color: var(--rl-accent, #3b82f6);
}

/* ── Dynamic progress width via CSS custom property ────────── */
/* Set --pct on any bar element instead of using inline width */
[style*="--pct"] {
  width: var(--pct, 0%);
}

/* ── Utility: background accent subtle ──────────────────────── */
.rl-bg-accent-subtle {
  background: var(--rl-accent-subtle);
}

/* ── Utility: card using solid surface background ────────────── */
.rl-card-solid {
  background: var(--rl-bg-surface-solid);
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

/* ── Utility: spinner with accent border color ──────────────── */
.rl-spinner {
  border-color: var(--rl-accent);
}
/* ── Utility: divide using border color ─────────────────────── */
.rl-divide-border {
  border-color: var(--rl-border);
}

/* ── SOC2 / circular progress chart ─────────────────────────── */
.rl-circle-chart {
  width: 6rem;
  height: 6rem;
}
.rl-circle-chart-svg {
  width: 6rem;
  height: 6rem;
  transform: rotate(-90deg);
}
.rl-circle-score {
  font-size: 1.5rem;
  line-height: 1;
}
.rl-circle-label {
  font-size: 0.6rem;
  margin-top: 0.15rem;
}
.rl-divider-top {
  border-top: 1px solid var(--rl-border);
}

/* ── Skeleton height ─────────────────────────────────────────── */
.rl-skeleton-h20 {
  height: 5rem;
}

/* ── Severity dot colors ─────────────────────────────────────── */
.rl-dot-error {
  background: var(--rl-error);
}
.rl-dot-warning {
  background: var(--rl-warning);
}
.rl-dot-info {
  background: var(--rl-info);
}
.rl-dot-muted {
  background: var(--rl-text-muted);
}

/* ── Utility: extra-small narrow text (0.78-0.8rem) ─────────── */
.rl-text-xs-narrow {
  font-size: 0.8rem;
}

/* ── Stats row (horizontal grid of stat cards) ───────────────── */
.rl-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

/* ── Card typography helpers (used in card lists / resource portal) */
.rl-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-heading);
  line-height: 1.3;
  padding: 1rem 1.25rem 0;
}
.rl-card-body {
  padding: 1rem 1.25rem 1.25rem;
}
.rl-card-desc {
  font-size: 0.875rem;
  color: var(--rl-text-muted);
  line-height: 1.5;
  margin-top: 0.25rem;
}
.rl-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}
/* Separator when table-wrap is a direct child of a card (header/filters above it) */
.rl-card > .rl-table-wrap {
  border-top: 1px solid var(--rl-border);
}
.rl-card-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--rl-border);
  font-size: 0.8125rem;
}
.rl-card-meta {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}
.rl-hub-icon {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

/* ── UI Uplift additions ──────────────────────────────────────── */

/* Stat icon containers */
.rl-stat-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.rl-stat-icon-blue {
  background: color-mix(in srgb, var(--rl-info) 15%, transparent);
  color: var(--rl-info);
}
.rl-stat-icon-green {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
}
.rl-stat-icon-red {
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
  color: var(--rl-error);
}
.rl-stat-icon-amber {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  color: var(--rl-warning);
}
.rl-stat-icon-teal {
  background: color-mix(in srgb, var(--rl-accent) 15%, transparent);
  color: var(--rl-accent);
}
.rl-stat-icon-purple {
  background: color-mix(in srgb, #a855f7 15%, transparent);
  color: #a855f7;
}

/* Update rl-stats-grid to support 4 columns */
.rl-stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .rl-stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .rl-stats-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Tab components (extends rl-tab-bar / rl-tab-active) */
.rl-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rl-border);
  margin-bottom: 1.5rem;
}
.rl-tab {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rl-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  transition:
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}
.rl-tab:hover {
  color: var(--rl-text-secondary);
}
.rl-tab.rl-tab-active {
  color: var(--rl-accent);
  border-bottom-color: var(--rl-accent);
}

/* Empty state shorthand aliases */
.rl-empty-icon {
  width: 3rem;
  height: 3rem;
  color: var(--rl-text-muted);
  opacity: 0.5;
}
.rl-empty-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-secondary);
}
.rl-empty-desc {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
  max-width: 24rem;
}

/* Framework grid (for control-testing hub cards) */
.rl-framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Card inner row layout */
.rl-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Custom select wrapper */
.rl-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.rl-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--rl-text-muted);
  pointer-events: none;
}
.rl-select-wrap select,
.rl-select-styled {
  appearance: none;
  -webkit-appearance: none;
  background: var(--rl-bg-elevated);
  border: 1px solid var(--rl-border);
  border-radius: 0.5rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--rl-text-primary);
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 10rem;
}
.rl-select-wrap select:hover,
.rl-select-styled:hover {
  border-color: var(--rl-accent);
}
.rl-select-wrap select:focus,
.rl-select-styled:focus {
  outline: none;
  border-color: var(--rl-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-accent) 20%, transparent);
}

/* Progress bar fill (dynamic via CSS var) */
.rl-progress-fill {
  height: 100%;
  width: var(--pct, 0%);
  background: var(--rl-accent);
  border-radius: inherit;
  transition: width 0.4s ease;
}

/* ── Skeleton card grid ──────────────────────────────────────── */
.rl-skeleton-card {
  background: var(--rl-bg-elevated);
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  overflow: hidden;
}
.rl-skeleton-line {
  background: var(--rl-border);
  border-radius: 0.25rem;
  animation: shimmer 1.5s ease-in-out infinite;
}
.rl-skeleton-line-title {
  height: 1rem;
  width: 60%;
  margin-bottom: 0.5rem;
}
.rl-skeleton-line-sub {
  height: 0.75rem;
  width: 80%;
  margin-bottom: 0.4rem;
}
.rl-skeleton-line-short {
  height: 0.75rem;
  width: 40%;
}

/* ── Global select styling (catches un-classed selects) ──────── */
.rl-page select,
.rl-filter-row select,
.rl-form select,
.rl-modal-content select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--rl-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: 1px solid var(--rl-input-border);
  color: var(--rl-input-text);
  border-radius: 0.5rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.rl-page select:focus,
.rl-filter-row select:focus,
.rl-form select:focus,
.rl-modal-content select:focus {
  outline: none;
  border-color: var(--rl-input-focus);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--rl-input-focus) 20%, transparent);
}

/* ═══════════════════════════════════════════════════════════
   PORTAL LANDING PAGES (Auditor + Resource)
   ═══════════════════════════════════════════════════════════ */
.portal-landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rl-bg-page);
  padding: 1.5rem;
}
.portal-card {
  max-width: 28rem;
  width: 100%;
  text-align: center;
}
.portal-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.portal-icon-auditor {
  background: var(--rl-accent-subtle);
  border: 1px solid var(--rl-accent-border);
  color: var(--rl-accent);
}
.portal-icon-resource {
  background: var(--rl-brand-blue-subtle);
  border: 1px solid var(--rl-brand-blue-border);
  color: var(--rl-brand-blue);
}
.portal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rl-text-heading);
  margin-bottom: 0.5rem;
}
.portal-description {
  font-size: 0.875rem;
  color: var(--rl-text-muted);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.portal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Auditor primary: teal (matches compliance portal) */
.portal-btn-primary-auditor {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--rl-accent);
  color: var(--rl-text-on-brand);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.portal-btn-primary-auditor:hover {
  background: var(--rl-accent-hover);
}
/* Resource primary: blue (distinct identity) */
.portal-btn-primary-resource {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--rl-brand-blue);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.portal-btn-primary-resource:hover {
  background: var(--rl-brand-blue-hover);
}
/* Shared secondary (outline) */
.portal-btn-secondary {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: var(--rl-text-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid var(--rl-border);
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.portal-btn-secondary:hover {
  background: var(--rl-bg-overlay);
  border-color: var(--rl-border-strong);
}
.portal-footer-text {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
.portal-footer-link-auditor {
  color: var(--rl-accent);
  text-decoration: none;
}
.portal-footer-link-auditor:hover {
  text-decoration: underline;
}
.portal-footer-link-resource {
  color: var(--rl-brand-blue);
  text-decoration: none;
}
.portal-footer-link-resource:hover {
  text-decoration: underline;
}

/* ── Missing stat color variants ─────────────────────────────── */
.rl-stat-green {
  color: var(--rl-success);
}
.rl-stat-yellow {
  color: var(--rl-warning);
}

/* ── Filter button tabs ──────────────────────────────────────── */
.rl-filter-btn {
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rl-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.rl-filter-btn:hover {
  background: var(--rl-bg-elevated);
  color: var(--rl-text-primary);
}
.rl-filter-btn-active {
  background: var(--rl-accent);
  color: var(--rl-text-on-brand);
  border-color: var(--rl-accent);
}
html.light .rl-filter-btn-active {
  color: var(--rl-text-on-brand);
}

/* ── Auth-package card list ──────────────────────────────────── */
.rl-card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Package document checklist ─────────────────────────────── */
.rl-package-docs {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem;
  flex-wrap: wrap;
}
.rl-doc-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.rl-doc-complete {
  background: color-mix(in srgb, var(--rl-success) 12%, var(--rl-bg-elevated));
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
  color: var(--rl-success);
}
.rl-doc-missing {
  background: var(--rl-bg-elevated);
  border-color: var(--rl-border);
  color: var(--rl-text-muted);
}
.rl-doc-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Alert banners ────────────────────────────────────────── */
.rl-alert {
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border: 1px solid;
}
.rl-alert-success {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-alert-error {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-alert-warning {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-alert-info {
  background: color-mix(in srgb, var(--rl-info) 12%, transparent);
  color: var(--rl-info);
  border-color: color-mix(in srgb, var(--rl-info) 30%, transparent);
}

/* ── Stat grid ────────────────────────────────────────────── */
.rl-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) {
  .rl-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.rl-stat-card-clickable {
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.rl-stat-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.rl-stat-card-active {
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--rl-accent) 25%, transparent),
    0 1px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.rl-app-summaries-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rl-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  position: relative;
}

/* ── Small spinner (for use inside buttons) ───────────────── */
.rl-spinner-sm {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  display: inline-block;
  animation: rl-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Small back-nav link ──────────────────────────────────── */
.rl-link-sm {
  font-size: 0.8125rem;
}

/* ── App brand text colours (for reports stat values) ─────── */
.rl-text-teal {
  color: #14b8a6;
}
.rl-text-indigo {
  color: #6366f1;
}
.rl-text-purple {
  color: #a855f7;
}
.rl-stat-amber {
  color: var(--rl-warning);
}

/* ── Task status toggle circles ───────────────────────────── */
.rl-btn-status-done {
  background: var(--rl-success);
  border-color: var(--rl-success);
}
.rl-btn-status-progress {
  border-color: var(--rl-info);
  background: color-mix(in srgb, var(--rl-info) 20%, transparent);
}
.rl-btn-status-open {
  border-color: var(--rl-border);
}
.rl-btn-status-open:hover {
  border-color: var(--rl-accent);
}

/* ── Progress bar ─────────────────────────────────────────── */
.rl-completion-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rl-completion-bar-track {
  flex: 1;
  height: 0.5rem;
  background: var(--rl-bg-elevated);
  border-radius: 9999px;
  overflow: hidden;
}
.rl-completion-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s;
  width: var(--pct, 0%);
}
.rl-completion-bar-fill-green {
  background: var(--rl-success);
}
.rl-completion-bar-fill-yellow {
  background: var(--rl-warning);
}
.rl-completion-bar-fill-red {
  background: var(--rl-error);
}

/* ── Score / mini progress bar ───────────────────────────── */
.rl-score-track {
  background: var(--rl-border-strong);
  border-radius: 9999px;
  overflow: hidden;
}
.rl-score-fill-green {
  background: var(--rl-success);
  height: 100%;
  border-radius: 9999px;
}
.rl-score-fill-yellow {
  background: var(--rl-warning);
  height: 100%;
  border-radius: 9999px;
}
.rl-score-fill-red {
  background: var(--rl-error);
  height: 100%;
  border-radius: 9999px;
}
.rl-score-fill-cyan {
  background: var(--rl-accent);
  height: 100%;
  border-radius: 9999px;
}

/* ── Ring chart color helpers ────────────────────────────── */
.rl-ring-track {
  color: var(--rl-border-strong);
}
.rl-text-orange {
  color: #f97316 !important;
}

/* ── Main page background ─────────────────────────────────── */
.rl-main-bg {
  background: var(--rl-bg-page);
}

/* ── Section dividers ──────────────────────────────────────── */
.rl-section-heading {
  color: var(--rl-text-heading);
  font-weight: 600;
  font-size: 1.125rem;
}
.rl-divider-line {
  flex: 1;
  height: 1px;
  background: var(--rl-border);
}
.rl-border-b {
  border-bottom: 1px solid var(--rl-border);
}
.rl-border-tb {
  border-top: 1px solid var(--rl-border);
  border-bottom: 1px solid var(--rl-border);
}

/* ── Card hover action ─────────────────────────────────────── */
.rl-card-action {
  transition: background 0.15s;
}
.rl-card-action:hover {
  background: var(--rl-bg-overlay-hover);
}
.rl-card-connected {
  border-color: color-mix(
    in srgb,
    var(--rl-success) 50%,
    transparent
  ) !important;
  background: color-mix(
    in srgb,
    var(--rl-success) 5%,
    var(--rl-bg-surface)
  ) !important;
}

/* ── Upload dropzone ────────────────────────────────────────── */
.rl-dropzone {
  border: 2px dashed var(--rl-border-strong);
  border-radius: 12px;
  background: var(--rl-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.rl-dropzone:hover,
.rl-dropzone-active {
  border-color: var(--rl-accent-border);
  background: var(--rl-accent-subtle);
}
.rl-dropzone-success {
  border-color: var(--rl-success);
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
}

/* ── Comment card states ────────────────────────────────────── */
.rl-comment-inactive {
  border-color: var(--rl-accent-border);
}
.rl-comment-active {
  border-color: var(--rl-accent-border);
  background: var(--rl-accent-subtle);
}

/* ── Chat / engagement panel ───────────────────────────────── */
.rl-chat-sidebar {
  padding: 16px;
  border-bottom: 1px solid var(--rl-border);
  position: sticky;
  top: 0;
  background: var(--rl-bg-page);
  z-index: 10;
}
.rl-chat-item {
  width: 100%;
  text-align: left;
  padding: 16px;
  transition: background 0.15s;
}
.rl-chat-item:hover {
  background: var(--rl-bg-overlay);
}
.rl-chat-item-active {
  background: var(--rl-accent-subtle) !important;
}
.rl-avatar {
  border-radius: 9999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.rl-avatar-indigo {
  background: color-mix(in srgb, #818cf8 20%, transparent);
  color: #818cf8;
}
.rl-avatar-purple {
  background: color-mix(in srgb, #c084fc 20%, transparent);
  color: #c084fc;
}
.rl-avatar-neutral {
  background: var(--rl-bg-overlay);
  color: var(--rl-text-muted);
}
.rl-msg-other {
  background: var(--rl-bg-overlay);
  color: var(--rl-text-heading);
  border-radius: 0 12px 12px 12px;
}
.rl-msg-time {
  font-size: 10px;
  margin-top: 4px;
  color: var(--rl-text-muted);
}
.rl-msg-time-client {
  font-size: 10px;
  margin-top: 4px;
  color: color-mix(in srgb, var(--rl-accent) 70%, white 30%);
}

/* ── Sidebar subscription panel ─────────────────────────── */
.rl-sub-panel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--rl-text-muted);
}
.rl-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  font-size: 12px;
}
.rl-sub-item-name {
  font-weight: 500;
  color: var(--rl-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-sub-more-btn {
  margin-top: 8px;
  width: 100%;
  font-size: 10px;
  color: var(--rl-text-muted);
  text-align: center;
  transition: color 0.15s;
}
.rl-sub-more-btn:hover {
  color: var(--rl-text-primary);
}

/* ── Alert item (hoverable row) ─────────────────────────────── */
.rl-alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  transition: background 0.15s;
}
.rl-alert-item:hover {
  background: var(--rl-bg-overlay);
}

/* ── Alert count badge ──────────────────────────────────────── */
.rl-count-badge-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--rl-warning) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-warning) 40%, transparent);
  color: var(--rl-warning);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ── Role badge colors ───────────────────────────────────────── */
.rl-role-owner {
  background: color-mix(in srgb, #a855f7 12%, transparent);
  color: #a855f7;
  border-color: color-mix(in srgb, #a855f7 30%, transparent);
}
.rl-role-admin {
  background: color-mix(in srgb, var(--rl-accent) 12%, transparent);
  color: var(--rl-accent);
  border-color: var(--rl-accent-border);
}
.rl-role-manager {
  background: color-mix(in srgb, #60a5fa 12%, transparent);
  color: #60a5fa;
  border-color: color-mix(in srgb, #60a5fa 30%, transparent);
}
.rl-role-analyst {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-role-auditor {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}
.rl-role-viewer {
  background: var(--rl-bg-overlay);
  color: var(--rl-text-muted);
  border-color: var(--rl-border-strong);
}

/* ── Engagement status + priority ─────────────────────────── */
.rl-status-matched {
  background: color-mix(in srgb, #a855f7 12%, transparent);
  color: #a855f7;
  border-color: color-mix(in srgb, #a855f7 30%, transparent);
}
.rl-status-bidding {
  background: color-mix(in srgb, #818cf8 12%, transparent);
  color: #818cf8;
  border-color: color-mix(in srgb, #818cf8 30%, transparent);
}

/* ── Input error border ──────────────────────────────────── */
.rl-input-error {
  border-color: var(--rl-error) !important;
}

/* ── Skeleton single element ─────────────────────────────── */
.rl-skeleton {
  background: var(--rl-border-strong);
  border-radius: 4px;
  animation: rl-pulse 1.5s ease-in-out infinite;
}
@keyframes rl-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ── Document surface (prose/viewer area) ────────────────── */
.rl-doc-surface {
  background: var(--rl-bg-surface-solid);
  border: 1px solid var(--rl-border);
  border-radius: 8px;
  padding: 20px;
  overflow-y: auto;
}

/* ── Document markdown prose classes ────────────────────── */
.rl-doc-h1 {
  color: var(--rl-text-heading);
  font-size: 1.125rem;
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 8px;
}
.rl-doc-h1:first-child {
  margin-top: 0;
}
.rl-doc-h2 {
  color: var(--rl-text-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--rl-border);
  padding-bottom: 4px;
}
.rl-doc-h3 {
  color: var(--rl-text-heading);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 4px;
}
.rl-doc-p {
  color: var(--rl-text-primary);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 8px;
}
.rl-doc-li {
  color: var(--rl-text-primary);
  font-size: 0.875rem;
  line-height: 1.625;
}
.rl-doc-strong {
  color: var(--rl-text-heading);
  font-weight: 600;
}
.rl-doc-th {
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: var(--rl-text-heading);
  font-size: 0.875rem;
}
.rl-doc-td {
  border: 1px solid var(--rl-border);
  padding: 6px 8px;
  color: var(--rl-text-primary);
  font-size: 0.875rem;
}
.rl-doc-hr {
  border-color: var(--rl-border);
  margin: 12px 0;
}
.rl-blockquote-warning {
  border-left: 4px solid var(--rl-warning);
  background: color-mix(
    in srgb,
    var(--rl-warning) 8%,
    var(--rl-bg-surface-solid) 92%
  );
  border-radius: 0 4px 4px 0;
  padding: 8px 12px;
  margin: 8px 0;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--rl-text-heading);
}
.rl-blockquote-info {
  border-left: 4px solid var(--rl-accent);
  background: var(--rl-accent-subtle);
  padding: 4px 12px;
  margin: 8px 0;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--rl-text-primary);
}

/* ── Generate wizard step indicators ────────────────────── */
.rl-step-circle-done {
  background: var(--rl-success);
  border: 2px solid color-mix(in srgb, var(--rl-success) 60%, transparent);
  color: white;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-step-circle-active {
  background: var(--rl-accent);
  border: 2px solid var(--rl-accent);
  color: white;
}
.rl-step-circle-pending {
  background: var(--rl-bg-overlay);
  border: 2px solid var(--rl-border-strong);
  color: var(--rl-text-muted);
}
.rl-step-connector {
  flex: 1;
  height: 2px;
  margin: 0 8px;
  margin-top: -20px;
  border-radius: 9999px;
  background: var(--rl-border-strong);
  transition: background 0.3s;
}
.rl-step-connector-done {
  background: var(--rl-success);
}
.rl-step-label {
  font-size: 11px;
  color: var(--rl-text-muted);
  margin-top: 6px;
  text-align: center;
}
.rl-step-label-done {
  font-size: 11px;
  color: var(--rl-success);
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
}

/* ── Field status buttons (question tracker) ─────────────── */
.rl-qtracker-complete {
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-success) 30%, transparent);
  color: var(--rl-success);
}
.rl-qtracker-issue {
  background: color-mix(in srgb, var(--rl-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-warning) 30%, transparent);
  color: var(--rl-warning);
}
.rl-qtracker-required {
  background: color-mix(in srgb, var(--rl-error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-error) 30%, transparent);
  color: var(--rl-error);
}
.rl-qtracker-empty {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border-strong);
  color: var(--rl-text-muted);
}

/* ── Legend color swatches ─────────────────────────────────── */
.rl-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.rl-legend-dot-green {
  background: var(--rl-success);
}
.rl-legend-dot-red {
  background: var(--rl-error);
}
.rl-legend-dot-amber {
  background: var(--rl-warning);
}
.rl-legend-dot-muted {
  background: var(--rl-border-strong);
}

/* ── Step numbered circle ──────────────────────────────────── */
.rl-step-num {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
  background: var(--rl-bg-overlay);
  color: var(--rl-text-muted);
}

/* ── Toggle switch off state ────────────────────────────── */
.rl-toggle-off {
  background: var(--rl-border-strong);
}

/* ── Typing cursor (blinking) ────────────────────────────── */
.rl-typing-cursor {
  display: inline-block;
  width: 6px;
  height: 16px;
  background: var(--rl-accent);
  border-radius: 2px;
  margin-left: 2px;
  vertical-align: middle;
  animation: rl-blink 0.8s infinite;
}
@keyframes rl-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* ── Success icon circle ─────────────────────────────────── */
.rl-success-icon {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
  color: var(--rl-success);
}

/* ── Faint / very muted text ─────────────────────────────── */
.rl-text-faint {
  color: var(--rl-border-strong) !important;
}

/* ── Document type selection card ───────────────────────── */
.rl-type-card-selected {
  border-color: var(--rl-accent) !important;
  background: var(--rl-accent-subtle) !important;
}
.rl-type-card-title-selected {
  color: var(--rl-accent) !important;
}

/* ── Framework selector badge (selected / default) ──────── */
.rl-fw-badge-selected {
  background: var(--rl-accent-subtle);
  color: var(--rl-accent);
  border: 1px solid var(--rl-accent-border);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-weight: 500;
  font-size: 0.875rem;
}
.rl-fw-badge {
  background: var(--rl-bg-overlay);
  color: var(--rl-text-primary);
  border: 1px solid var(--rl-border-strong);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: capitalize;
}

/* ── Framework selector toggle button ───────────────────── */
.rl-fw-btn {
  padding: 6px 8px;
  font-size: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--rl-border-strong);
  color: var(--rl-text-primary);
  background: var(--rl-bg-surface-solid);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.rl-fw-btn:hover {
  border-color: var(--rl-accent-border);
  background: var(--rl-accent-subtle);
}

/* ── Annotation highlight in document viewer ────────────── */
.rl-annotation-highlight {
  background: #fef08a;
  color: #1a1a1a;
  border-radius: 2px;
  padding: 0 2px;
  transition: background 0.2s;
}

/* ── Annotation action buttons — see end of file for full styles ── */

/* ── Annotation type badge ───────────────────────────────── */
.rl-annot-ai {
  background: color-mix(in srgb, var(--rl-warning) 30%, transparent);
  color: var(--rl-warning);
}
.rl-annot-user {
  background: var(--rl-accent-subtle);
  color: var(--rl-accent);
}

/* ── Show/hide resolved toggle ───────────────────────────── */
.rl-show-resolved {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border-strong);
  color: var(--rl-text-heading);
}
.rl-show-resolved-off {
  border: 1px solid var(--rl-border);
  color: var(--rl-text-muted);
}
.rl-show-resolved-off:hover {
  color: var(--rl-text-primary);
}

/* ── Thread avatar ───────────────────────────────────────── */
.rl-thread-avatar {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  margin-top: 2px;
  background: var(--rl-border-strong);
  color: var(--rl-text-muted);
}

/* ── Icon accent container ────────────────────────────────── */
.rl-icon-accent {
  background: var(--rl-accent-subtle);
  border: 1px solid var(--rl-accent-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rl-accent);
}

/* ── Review metadata box ──────────────────────────────────── */
.rl-review-box {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 12px;
  divide-color: var(--rl-border);
}
.rl-review-key {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rl-text-muted);
}
.rl-review-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rl-text-heading);
}

/* ── Comment action buttons — improved visibility ────────── */
.rl-annot-resolve,
.rl-annot-edit,
.rl-annot-delete {
  color: var(--rl-text-heading);
  background: var(--rl-bg-overlay-hover);
  border: 1px solid var(--rl-border-strong);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.7rem;
  font-weight: 500;
  transition: all 0.15s;
}
.rl-annot-resolve:hover {
  color: var(--rl-success);
  border-color: var(--rl-success);
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
}
.rl-annot-resolve.resolved,
.rl-text-success.rl-annot-resolve {
  color: var(--rl-success);
  border-color: var(--rl-success);
  background: color-mix(in srgb, var(--rl-success) 15%, transparent);
}
.rl-annot-edit:hover {
  color: var(--rl-accent);
  border-color: var(--rl-accent-border);
  background: var(--rl-accent-subtle);
}
.rl-annot-delete:hover {
  color: var(--rl-error);
  border-color: var(--rl-error);
  background: color-mix(in srgb, var(--rl-error) 15%, transparent);
}

/* ── Rich text document editor ───────────────────────────── */
.rl-rich-editor-wrap {
  border: 1px solid var(--rl-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--rl-bg-overlay);
  display: flex;
  flex-direction: column;
  min-height: 400px;
}
.rl-rich-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--rl-border);
  background: var(--rl-bg-surface);
  flex-wrap: wrap;
}
.rl-rich-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rl-text-muted);
  border: 1px solid transparent;
  transition: all 0.12s;
  line-height: 1;
}
.rl-rich-tool:hover {
  color: var(--rl-text-heading);
  background: var(--rl-bg-hover);
  border-color: var(--rl-border);
}
.rl-rich-tool.active {
  color: var(--rl-accent);
  background: var(--rl-accent-subtle);
  border-color: var(--rl-accent-border);
}
.rl-rich-divider {
  display: block;
  width: 1px;
  height: 18px;
  background: var(--rl-border);
  margin: 0 4px;
}
.rl-rich-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.rl-rich-editor ::selection {
  background: #fef08a;
  color: #1a1a1a;
}
.rl-rich-editor {
  min-height: 360px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--rl-text-primary);
  outline: none;
}
.rl-rich-editor h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1em 0 0.5em;
  color: var(--rl-text-heading);
}
.rl-rich-editor h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1em 0 0.4em;
  color: var(--rl-text-heading);
}
.rl-rich-editor h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.9em 0 0.3em;
  color: var(--rl-text-heading);
}
.rl-rich-editor p {
  margin: 0.5em 0;
}
.rl-rich-editor ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.rl-rich-editor ol {
  list-style: decimal;
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.rl-rich-editor li {
  margin: 0.25em 0;
}
.rl-rich-editor blockquote {
  border-left: 3px solid var(--rl-accent-border);
  padding-left: 1em;
  margin: 0.75em 0;
  color: var(--rl-text-muted);
  font-style: italic;
}
.rl-rich-editor code {
  background: var(--rl-bg-overlay);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.82em;
  font-family: ui-monospace, monospace;
}
.rl-rich-editor pre {
  background: var(--rl-bg-overlay);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0.75em 0;
}
.rl-rich-editor pre code {
  background: none;
  padding: 0;
}
.rl-rich-editor hr {
  border: none;
  border-top: 1px solid var(--rl-border);
  margin: 1.25em 0;
}
.rl-rich-editor strong {
  font-weight: 700;
  color: var(--rl-text-heading);
}
.rl-rich-editor em {
  font-style: italic;
}
.rl-rich-editor .is-editor-empty::before {
  content: attr(data-placeholder);
  color: var(--rl-text-faint);
  pointer-events: none;
  position: absolute;
}

/* ── App logo (header + sidebar) ── */
.app-logo {
  height: 50px;
  width: auto;
  display: block;
  margin: 0 auto;
}
html.dark .app-logo {
  filter: brightness(0) invert(1);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Horizontal scroll carousel (used in Bridge dashboard FrameworkCarousel)
   ══════════════════════════════════════════════════════════════════════════════ */
.fw-scroll-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.fw-scroll-track::-webkit-scrollbar {
  display: none;
}
.fw-scroll-card {
  flex: 0 0 calc(25% - 11px);
  min-width: 220px;
  scroll-snap-align: start;
}
.fw-scroll-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.fw-scroll-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  border: none;
  background: var(--rl-border-strong);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.15s,
    transform 0.15s;
}
.fw-scroll-dot.active {
  background: var(--rl-accent);
  transform: scale(1.25);
}
.fw-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-surface-solid);
  color: var(--rl-text-muted);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.fw-scroll-btn:hover:not(:disabled) {
  background: var(--rl-bg-elevated);
  color: var(--rl-text-heading);
  border-color: var(--rl-border-strong);
}
.fw-scroll-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Bridge dashboard card system (explicit/scoped to avoid global collisions) ── */
.rl-page .rl-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 108px;
  justify-content: center;
  white-space: normal;
  padding: 20px 24px;
}
.rl-page .rl-kpi-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rl-text-muted);
  line-height: 1.2;
}
.rl-page .rl-kpi-value {
  font-size: clamp(1.45rem, 1.8vw, 1.9rem);
  font-weight: 700;
  color: var(--rl-text-heading);
  line-height: 1.05;
}
.rl-page .rl-kpi-sub {
  font-size: 0.76rem;
  color: var(--rl-text-secondary);
  line-height: 1.25;
}

.rl-page .rl-framework-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 172px;
  padding: 18px 20px;
}
.rl-page .rl-framework-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.rl-page .rl-framework-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--rl-text-heading);
  line-height: 1.2;
}
.rl-page .rl-framework-card-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.rl-page .rl-framework-card-total-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rl-text-heading);
}
.rl-page .rl-framework-card-total-label {
  font-size: 0.7rem;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rl-page .rl-progress-track {
  display: flex;
  gap: 3px;
  height: 8px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--rl-bg-overlay);
}
.rl-page .rl-progress-track > div {
  flex-shrink: 0;
  border-radius: 9999px;
  min-width: 4px;
}
/* Width utility classes for progress bar segments */
.rl-w-pct-0 {
  width: 0%;
}
.rl-w-pct-5 {
  width: 5%;
}
.rl-w-pct-10 {
  width: 10%;
}
.rl-w-pct-15 {
  width: 15%;
}
.rl-w-pct-20 {
  width: 20%;
}
.rl-w-pct-25 {
  width: 25%;
}
.rl-w-pct-30 {
  width: 30%;
}
.rl-w-pct-35 {
  width: 35%;
}
.rl-w-pct-40 {
  width: 40%;
}
.rl-w-pct-45 {
  width: 45%;
}
.rl-w-pct-50 {
  width: 50%;
}
.rl-w-pct-55 {
  width: 55%;
}
.rl-w-pct-60 {
  width: 60%;
}
.rl-w-pct-65 {
  width: 65%;
}
.rl-w-pct-70 {
  width: 70%;
}
.rl-w-pct-75 {
  width: 75%;
}
.rl-w-pct-80 {
  width: 80%;
}
.rl-w-pct-85 {
  width: 85%;
}
.rl-w-pct-90 {
  width: 90%;
}
.rl-w-pct-95 {
  width: 95%;
}
.rl-w-pct-100 {
  width: 100%;
}
.rl-page .rl-framework-card-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.rl-page .rl-framework-card-metric {
  min-width: 0;
}
.rl-page .rl-framework-card-metric-value {
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.16rem 0.42rem;
  border-radius: 9999px;
  line-height: 1.2;
}
.rl-page .rl-framework-card-metric-label {
  margin-top: 0.28rem;
  font-size: 0.72rem;
  color: var(--rl-text-muted);
  line-height: 1.15;
}

.rl-page .rl-ops-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 180px;
  padding: 20px;
}
.rl-page .rl-ops-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.rl-page .rl-ops-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rl-text-heading);
}
.rl-page .rl-ops-card-link {
  font-size: 0.82rem;
  color: var(--rl-accent);
  font-weight: 600;
}
.rl-page .rl-ops-card-stack {
  display: grid;
  gap: 0.42rem;
}
.rl-page .rl-ops-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.rl-page .rl-ops-card-row-label {
  font-size: 0.8rem;
  color: var(--rl-text-secondary);
}
.rl-page .rl-ops-card-row-value {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.14rem 0.45rem;
  border-radius: 9999px;
  line-height: 1.2;
}

.rl-page .rl-quick-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: 100px;
  padding: 18px 20px;
}
.rl-page .rl-quick-link-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--rl-text-heading);
  margin: 0;
}
.rl-page .rl-quick-link-desc {
  font-size: 0.8rem;
  color: var(--rl-text-secondary);
  margin: 0.35rem 0 0;
  line-height: 1.35;
}

/* ── KPI card — accent variant (gradient brand background) ── */
.rl-kpi-accent {
  background: var(--rl-brand-gradient) !important;
  border-color: transparent !important;
  color: #ffffff;
}
.rl-kpi-accent .rl-kpi-label,
.rl-kpi-accent .rl-kpi-sub {
  color: rgba(255, 255, 255, 0.65) !important;
}
.rl-kpi-accent .rl-kpi-value {
  color: #ffffff !important;
}

/* ── Section divider header ── */
.rl-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 16px;
}
.rl-section-divider-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rl-section-divider-line {
  flex: 1;
  height: 1px;
  background: var(--rl-border);
}

/* ── Status pill (inline status chip) ── */
.rl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}
.rl-status-gray {
  color: var(--rl-text-muted);
  background: var(--rl-bg-overlay);
}

/* ── Status badge (inline pill) ── */
.rl-status-green {
  color: var(--rl-success);
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
}
.rl-status-yellow {
  color: #92400e;
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
}
.rl-status-red {
  color: var(--rl-error);
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
}
/* Framework carousel card score numbers: no background box */
.fw-scroll-card .rl-status-green,
.fw-scroll-card .rl-status-yellow,
.fw-scroll-card .rl-status-red {
  background: transparent;
}
.rl-status-blue {
  color: var(--rl-info);
  background: color-mix(in srgb, var(--rl-info) 12%, transparent);
}
.rl-status-amber {
  color: var(--rl-warning);
  background: color-mix(in srgb, var(--rl-warning) 10%, transparent);
}
.rl-status-slate {
  color: var(--rl-text-muted);
  background: var(--rl-bg-overlay);
}

/* ── Progress bar segments ── */
.rl-seg-green {
  background: var(--rl-success);
}
.rl-seg-yellow {
  background: var(--rl-warning);
}
.rl-seg-red {
  background: var(--rl-error);
}

/* ── Card section header (titled row at top of an rl-card) ─── */
.rl-card-header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--rl-border);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rl-text-primary);
  background: var(--rl-bg-elevated);
}

/* ── Warning banner ─────────────────────────────────────────── */
.rl-warning-banner {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rl-warning) 40%, transparent);
  color: var(--rl-warning);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* ── Health status aliases ──────────────────────────────────── */
.rl-status-healthy {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: var(--rl-success);
  border-color: color-mix(in srgb, var(--rl-success) 30%, transparent);
}
.rl-status-error {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: var(--rl-error);
  border-color: color-mix(in srgb, var(--rl-error) 30%, transparent);
}
.rl-status-degraded {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: var(--rl-warning);
  border-color: color-mix(in srgb, var(--rl-warning) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════════
   App Services page — stat cards, action buttons, status badges
   ══════════════════════════════════════════════════════════════════════════════ */

/* Boxed page layout */
.rl-page-boxed {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Stat cards */
.rl-app-stat-card {
  background: var(--rl-bg-surface-solid);
  border-radius: 0.75rem;
  border: 1px solid var(--rl-border);
  padding: 1.25rem;
}
.rl-app-stat-card-online {
  border-color: #a7f3d0;
}
.rl-app-stat-card-degraded {
  border-color: #fde68a;
}
.rl-app-stat-card-offline {
  border-color: #fecaca;
}
html.dark .rl-app-stat-card-online {
  border-color: #065f46;
}
html.dark .rl-app-stat-card-degraded {
  border-color: #92400e;
}
html.dark .rl-app-stat-card-offline {
  border-color: #991b1b;
}

.rl-app-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rl-text-muted);
}
.rl-app-stat-label-online {
  color: #059669;
}
.rl-app-stat-label-degraded {
  color: #d97706;
}
.rl-app-stat-label-offline {
  color: #dc2626;
}
html.dark .rl-app-stat-label-online {
  color: #34d399;
}
html.dark .rl-app-stat-label-degraded {
  color: #fbbf24;
}
html.dark .rl-app-stat-label-offline {
  color: #f87171;
}

.rl-app-stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.25rem;
  color: var(--rl-text-heading);
}
.rl-app-stat-value-online {
  color: #059669;
}
.rl-app-stat-value-degraded {
  color: #d97706;
}
.rl-app-stat-value-offline {
  color: #dc2626;
}
html.dark .rl-app-stat-value-online {
  color: #34d399;
}
html.dark .rl-app-stat-value-degraded {
  color: #fbbf24;
}
html.dark .rl-app-stat-value-offline {
  color: #f87171;
}

/* Status badge dot */
.rl-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.rl-status-dot-online {
  background: #10b981;
}
.rl-status-dot-degraded {
  background: #f59e0b;
}
.rl-status-dot-offline {
  background: #ef4444;
}

/* Action buttons (Config / Start / Restart / Stop) */
.rl-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid;
  cursor: pointer;
  transition:
    background 0.15s,
    opacity 0.15s;
  white-space: nowrap;
}
.rl-app-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--rl-bg-subtle) !important;
  color: var(--rl-text-muted) !important;
  border-color: var(--rl-border) !important;
}

.rl-app-btn-config {
  background: var(--rl-bg-surface-solid);
  color: var(--rl-text-secondary);
  border-color: var(--rl-border-strong);
}
.rl-app-btn-config:hover:not(:disabled) {
  background: var(--rl-bg-subtle);
}

.rl-app-btn-start {
  background: #ecfdf5;
  color: #065f46;
  border-color: #6ee7b7;
}
.rl-app-btn-start:hover:not(:disabled) {
  background: #d1fae5;
}
html.dark .rl-app-btn-start {
  background: rgba(6, 78, 59, 0.3);
  color: #6ee7b7;
  border-color: #065f46;
}
html.dark .rl-app-btn-start:hover:not(:disabled) {
  background: rgba(6, 78, 59, 0.5);
}

.rl-app-btn-restart {
  background: #fffbeb;
  color: #92400e;
  border-color: #fcd34d;
}
.rl-app-btn-restart:hover:not(:disabled) {
  background: #fef3c7;
}
html.dark .rl-app-btn-restart {
  background: rgba(120, 53, 15, 0.3);
  color: #fcd34d;
  border-color: #92400e;
}
html.dark .rl-app-btn-restart:hover:not(:disabled) {
  background: rgba(120, 53, 15, 0.5);
}

.rl-app-btn-stop {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}
.rl-app-btn-stop:hover:not(:disabled) {
  background: #fee2e2;
}
html.dark .rl-app-btn-stop {
  background: rgba(127, 29, 29, 0.3);
  color: #fca5a5;
  border-color: #991b1b;
}
html.dark .rl-app-btn-stop:hover:not(:disabled) {
  background: rgba(127, 29, 29, 0.5);
}

/* ── InlineLog terminal strip ───────────────────────────────── */
.rl-app-log {
  margin-top: 0.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--rl-border);
  background: #0a0f14;
}
html.light .rl-app-log {
  background: #0a0f14;
  border-color: #1e2d3d;
}
.rl-app-log-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid #1e2d3d;
}
html.light .rl-app-log-titlebar {
  background: rgba(0, 0, 0, 0.4);
  border-bottom-color: #1e2d3d;
}
.rl-app-log-body {
  padding: 0.625rem 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  max-height: 12rem;
  overflow-y: auto;
}
.rl-app-log-line {
  color: #94a3b8;
}
html.light .rl-app-log-line {
  color: #94a3b8;
}
.rl-app-log-prefix {
  color: #475569;
  margin-right: 0.5rem;
  user-select: none;
}
html.light .rl-app-log-prefix {
  color: #475569;
}

/* ── App card meta pills (port, path, uptime) ───────────────── */
.rl-app-meta-pill {
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  color: var(--rl-text-secondary);
  background: var(--rl-bg-subtle);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
html.light .rl-app-meta-pill {
  color: #475569;
  background: #f1f5f9;
}
.rl-app-meta-uptime {
  font-size: 0.72rem;
  color: var(--rl-text-muted);
}
html.light .rl-app-meta-uptime {
  color: #64748b;
}

/* ── Tooltip ──────────────────────────────────────────────────── */
.rl-tooltip-wrap {
  position: relative;
  display: inline-flex;
}
.rl-tooltip-body {
  pointer-events: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  font-size: 0.7rem;
  line-height: 1.5;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: pre-wrap;
  max-width: 20rem;
  text-align: left;
}
.rl-tooltip-wrap:hover .rl-tooltip-body {
  opacity: 1;
}
html.light:not(.dark) .rl-tooltip-body {
  background: #1e293b;
  color: #f8fafc;
  border-color: rgba(0, 0, 0, 0.18);
}

/* ── Landing page layout utilities ──────────────────────────── */
.rl-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.rl-section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Landing hero typography */
.rl-hero-heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--rl-text-heading);
}

.rl-hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  color: var(--rl-text-muted);
}

.rl-hero-accent {
  color: #7c3aed;
}

.rl-landing-orb {
  position: absolute;
  top: -80px;
  right: 10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.rl-landing-signin {
  font-size: 16px;
  padding: 14px 32px;
  background: #7c3aed;
  border-color: #7c3aed;
}

.rl-landing-signin:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.rl-landing-platform-section {
  background: color-mix(in srgb, var(--rl-bg-surface-solid) 90%, transparent);
}

.rl-app-icon-shell {
  border: 1px solid transparent;
}

.rl-app-icon-blue {
  color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 15%, transparent);
  border-color: color-mix(in srgb, #3b82f6 25%, transparent);
}

.rl-app-icon-teal {
  color: #14b8a6;
  background: color-mix(in srgb, #14b8a6 15%, transparent);
  border-color: color-mix(in srgb, #14b8a6 25%, transparent);
}

.rl-app-icon-amber {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  border-color: color-mix(in srgb, #f59e0b 25%, transparent);
}

.rl-app-icon-red {
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 15%, transparent);
  border-color: color-mix(in srgb, #ef4444 25%, transparent);
}

.rl-app-icon-violet {
  color: #8b5cf6;
  background: color-mix(in srgb, #8b5cf6 15%, transparent);
  border-color: color-mix(in srgb, #8b5cf6 25%, transparent);
}

.rl-app-icon-rose {
  color: #e8002a;
  background: color-mix(in srgb, #e8002a 15%, transparent);
  border-color: color-mix(in srgb, #e8002a 25%, transparent);
}

.rl-feature-icon {
  color: #7c3aed;
  background: color-mix(in srgb, #7c3aed 12%, transparent);
  border: 1px solid color-mix(in srgb, #7c3aed 20%, transparent);
}

.rl-inline-flex-center {
  display: inline-flex;
  align-items: center;
}

/* Landing section typography */
.rl-section-heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rl-text-heading);
  margin-bottom: 0.75rem;
}

.rl-section-subtitle {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--rl-text-muted);
}

/* ============================================================
   SEGMENTED CONTROL / TOOLBAR
   ============================================================ */
.rl-segmented {
  display: inline-flex;
  align-items: center;
  background: var(--rl-bg-subtle);
  border: 1px solid var(--rl-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.rl-segmented-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rl-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.rl-segmented-btn:hover {
  color: var(--rl-text);
}
.rl-segmented-btn.active {
  background: var(--rl-bg-surface-solid);
  color: var(--rl-text);
  font-weight: 600;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}
.rl-segmented-btn.active.error {
  color: var(--rl-error);
}
.rl-segmented-btn.active.warning {
  color: var(--rl-warning);
}

.rl-seg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.rl-seg-dot-error {
  background: var(--rl-error);
}
.rl-seg-dot-warning {
  background: var(--rl-warning);
}
.rl-seg-count {
  font-size: 0.75rem;
  font-weight: 600;
}

/* ============================================================
   TOOLBAR (filter bar container)
   ============================================================ */
.rl-toolbar,
.rl-logs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: var(--rl-card-bg);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  margin-bottom: 1rem;
}

/* ============================================================
   FILTER BAR SELECT (dropdown inside toolbar)
   ============================================================ */
.rl-filter-bar-select {
  width: auto;
  min-width: 9rem;
  font-size: 0.75rem !important;
  padding: 0.3rem 0.625rem;
  height: 2.2rem;
}

/* ============================================================
   TOOLBAR SEARCH
   ============================================================ */
.rl-search-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 10rem;
}
.rl-search-icon {
  position: absolute;
  left: 0.55rem;
  width: 15px;
  height: 15px;
  color: var(--rl-text-muted);
  pointer-events: none;
}
.rl-search-input {
  width: 100%;
  height: 2rem;
  font-size: 0.8125rem;
  padding-left: 2rem;
  padding-right: 0.75rem;
  background: var(--rl-bg-subtle);
  border: 1px solid var(--rl-border);
  border-radius: 0.5rem;
  color: var(--rl-text);
  outline: none;
  transition: border-color 0.15s;
}
.rl-search-input::placeholder {
  color: var(--rl-text-muted);
}
.rl-search-input:focus {
  border-color: var(--rl-accent);
}

.rl-toolbar-count {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ============================================================
   STAT CARD VALUE COLORS (borders defined at line ~2467)
   ============================================================ */
.rl-stat-card-blue .rl-stat-value {
  color: var(--rl-info);
}
.rl-stat-card-green .rl-stat-value {
  color: var(--rl-success);
}
.rl-stat-card-red .rl-stat-value {
  color: var(--rl-error);
}
.rl-stat-card-amber .rl-stat-value {
  color: var(--rl-warning);
}
.rl-stat-card-purple .rl-stat-value {
  color: #a855f7;
}
.rl-stat-card-orange .rl-stat-value {
  color: var(--rl-orange, #ea580c);
}

/* ── Page layout variants ── */
.rl-page-boxed-sm {
  padding: 1.5rem;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Utility flex/layout classes ── */
.rl-flex {
  display: flex;
}
.rl-flex-1 {
  flex: 1;
}
.rl-justify-between {
  justify-content: space-between;
}
.rl-items-start {
  align-items: flex-start;
}
.rl-min-w-0 {
  min-width: 0;
}
.rl-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.rl-gap-2 {
  gap: 0.5rem;
}
.rl-flex-wrap {
  flex-wrap: wrap;
}
.rl-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.rl-py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* ── Security Operations page ── */
.rl-security-top-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.rl-security-threat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.rl-security-threat-pill.rl-status-red {
  color: var(--rl-error);
  background: color-mix(in srgb, var(--rl-error) 10%, transparent);
}
.rl-security-threat-pill.rl-status-yellow {
  color: var(--rl-warning);
  background: color-mix(in srgb, var(--rl-warning) 10%, transparent);
}
.rl-security-threat-pill.rl-status-green {
  color: var(--rl-success);
  background: color-mix(in srgb, var(--rl-success) 10%, transparent);
}

/* ── Breakdown bar card ── */
.rl-security-breakdown-card {
  padding: 0.875rem 1rem;
}
.rl-security-breakdown-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.rl-security-breakdown-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rl-security-breakdown-bar {
  display: flex;
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 2px;
  min-width: 80px;
}
.rl-security-breakdown-legend {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  align-items: center;
}
.rl-security-breakdown-legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.rl-security-breakdown-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rl-security-breakdown-name {
  font-size: 0.72rem;
  color: var(--rl-text-muted);
  text-transform: capitalize;
}
.rl-security-breakdown-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: var(--rl-bg-overlay);
}

/* ── Alert / finding rows ── */
.rl-security-alert-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-security-alert-row:last-child {
  border-bottom: none;
}
.rl-security-alert-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.rl-security-alert-row-clickable:hover {
  background: var(--rl-surface-hover, rgba(0, 0, 0, 0.03));
}
.rl-security-alert-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rl-text-heading);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-security-alert-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.rl-security-alert-date {
  font-size: 0.72rem;
  color: var(--rl-text-muted);
  white-space: nowrap;
}

/* ── Platform summary card ── */
.rl-security-summary-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
}
.rl-security-summary-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
}
.rl-security-summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rl-security-summary-value {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--rl-text-heading);
  font-weight: 500;
}
.rl-security-summary-meta {
  font-size: 0.72rem;
  color: var(--rl-text-muted);
  margin-top: 0.25rem;
}

/* ── Threat / source indicator dots ── */
.rl-threat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rl-threat-dot-critical {
  background: var(--rl-error);
}
.rl-threat-dot-high {
  background: #f97316;
}
.rl-threat-dot-medium {
  background: var(--rl-warning);
}
.rl-threat-dot-low {
  background: var(--rl-success);
}
.rl-threat-dot-info {
  background: var(--rl-info);
}

.rl-source-dot-sentinelops {
  background: #6366f1;
}
.rl-source-dot-pentest {
  background: #f97316;
}
.rl-source-dot-compliance {
  background: var(--rl-accent);
}

/* ── Modal detail boxes ── */
.rl-modal-note {
  font-size: 0.8rem;
  color: var(--rl-text-muted);
}
.rl-modal-detail-box {
  background: var(--rl-surface-alt, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--rl-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.rl-modal-detail-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Report modal content sections ── */
.rl-content-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rl-content-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rl-text-muted);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-content-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--rl-text-secondary);
  margin: 0;
}
/* Key metrics grid */
.rl-key-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
}
.rl-key-metric {
  background: var(--rl-bg-elevated);
  border: 1px solid var(--rl-border);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  text-align: center;
}
.rl-key-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rl-text-heading);
  line-height: 1.2;
}
.rl-key-metric-label {
  font-size: 0.68rem;
  color: var(--rl-text-muted);
  text-transform: capitalize;
  margin-top: 0.2rem;
  line-height: 1.3;
}
/* Threat list */
.rl-threat-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rl-threat-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--rl-text-secondary);
}
.rl-threat-text {
  flex: 1;
  line-height: 1.4;
}
.rl-threat-meta {
  color: var(--rl-text-muted);
  font-size: 0.8rem;
}
/* Recommendations list */
.rl-recommendations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rl-recommendation-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--rl-text-secondary);
  line-height: 1.5;
}
.rl-recommendation-mark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-accent);
  flex-shrink: 0;
  margin-top: 0.45rem;
}

/* ── Missing utility classes ── */
.rl-text-white {
  color: #ffffff;
}
.rl-bg-page {
  background: var(--rl-bg-page);
}
.rl-bg-base {
  background: var(--rl-bg-base);
}
.rl-bg-muted {
  background: var(--rl-bg-muted);
}
.rl-no-underline {
  text-decoration: none;
}
.rl-font-sans {
  font-family: Inter, system-ui, sans-serif;
}
.rl-pointer-none {
  pointer-events: none;
}

/* ── Extended utility classes ── */
.rl-text-error {
  color: var(--rl-error);
}
.rl-bg-card {
  background: var(--rl-bg-card);
}
.rl-bg-error {
  background: var(--rl-error);
}
.rl-bg-border {
  background: var(--rl-border);
}
.rl-border-top {
  border-top: 1px solid var(--rl-border);
}
.rl-border-bottom {
  border-bottom: 1px solid var(--rl-border);
}
.rl-badge-accent {
  background: var(--rl-accent-subtle);
  color: var(--rl-accent);
}

.rl-border-full {
  border: 1px solid var(--rl-border);
}
.rl-border-accent {
  border: 1px solid var(--rl-accent-border, var(--rl-accent));
}

/* ── User/detail modal info tiles ── */
.rl-user-info-tile {
  background: var(--rl-bg-surface);
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.rl-user-info-tile-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-text-heading);
  margin-top: 0.25rem;
}
/* Action buttons row at bottom of modals */
.rl-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rl-border);
}

/* ============================================================
   SERVICE / SOURCE COLOR TOKENS
   Deployments page: text, border-left accent, dot indicator
   ============================================================ */
/* ClearTrust GRC — teal */
.rl-service-cleartrust {
  color: #14b8a6;
}
.rl-service-dot-cleartrust {
  background: #14b8a6;
}
.rl-service-border-cleartrust {
  border-left-color: #14b8a6 !important;
}

/* BreachLens / pentest — indigo */
.rl-service-breachlens {
  color: #6366f1;
}
.rl-service-dot-breachlens {
  background: #6366f1;
}
.rl-service-border-breachlens {
  border-left-color: #6366f1 !important;
}

/* SentinelOps — purple */
.rl-service-sentinelops {
  color: #a855f7;
}
.rl-service-dot-sentinelops {
  background: #a855f7;
}
.rl-service-border-sentinelops {
  border-left-color: #a855f7 !important;
}

/* CommandShield — orange */
.rl-service-commandshield {
  color: #f97316;
}
.rl-service-dot-commandshield {
  background: #f97316;
}
.rl-service-border-commandshield {
  border-left-color: #f97316 !important;
}

/* ThreatWatch — red */
.rl-service-threatwatch {
  color: #ef4444;
}
.rl-service-dot-threatwatch {
  background: #ef4444;
}
.rl-service-border-threatwatch {
  border-left-color: #ef4444 !important;
}

/* The Bridge — accent */
.rl-service-thebridge {
  color: var(--rl-accent);
}
.rl-service-dot-thebridge {
  background: var(--rl-accent);
}
.rl-service-border-thebridge {
  border-left-color: var(--rl-accent) !important;
}

/* Reports source aliases (maps to same colors as service) */
.rl-source-compliance {
  color: #14b8a6;
}
.rl-source-pentest {
  color: #6366f1;
}
.rl-source-sentinelops {
  color: #a855f7;
}
.rl-source-dot-compliance {
  background: #14b8a6;
}
.rl-source-dot-pentest {
  background: #6366f1;
}
.rl-source-dot-sentinelops {
  background: #a855f7;
}
.rl-source-border-compliance {
  border-left-color: #14b8a6 !important;
}
.rl-source-border-pentest {
  border-left-color: #6366f1 !important;
}
.rl-source-border-sentinelops {
  border-left-color: #a855f7 !important;
}

/* ============================================================
   MODAL HEADER COLOR VARIANTS
   Tinted bottom-border strip for each service/source
   ============================================================ */
.rl-modal-header-cleartrust,
.rl-modal-header-compliance {
  border-bottom-color: color-mix(in srgb, #14b8a6 55%, var(--rl-border));
  background: color-mix(in srgb, #14b8a6 6%, var(--rl-card-bg));
}
.rl-modal-header-breachlens,
.rl-modal-header-pentest {
  border-bottom-color: color-mix(in srgb, #6366f1 55%, var(--rl-border));
  background: color-mix(in srgb, #6366f1 6%, var(--rl-card-bg));
}
.rl-modal-header-sentinelops {
  border-bottom-color: color-mix(in srgb, #a855f7 55%, var(--rl-border));
  background: color-mix(in srgb, #a855f7 6%, var(--rl-card-bg));
}
.rl-modal-header-commandshield {
  border-bottom-color: color-mix(in srgb, #f97316 55%, var(--rl-border));
  background: color-mix(in srgb, #f97316 6%, var(--rl-card-bg));
}
.rl-modal-header-threatwatch {
  border-bottom-color: color-mix(in srgb, #ef4444 55%, var(--rl-border));
  background: color-mix(in srgb, #ef4444 6%, var(--rl-card-bg));
}
.rl-modal-header-thebridge {
  border-bottom-color: color-mix(
    in srgb,
    var(--rl-accent) 55%,
    var(--rl-border)
  );
  background: color-mix(in srgb, var(--rl-accent) 6%, var(--rl-card-bg));
}

/* ── Modal overline (small label above title) ── */
.rl-modal-overline {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.2rem;
}

/* ── Modal title wrapper (overline + h2 stacked) ── */
.rl-modal-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

/* ── Modal source chip (colored pill with dot + label) ── */
.rl-modal-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}
.rl-modal-source-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Modal detail grid (label / value key-value rows) ── */
.rl-modal-detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rl-border);
  margin-bottom: 1rem;
}
.rl-modal-detail-value {
  font-size: 0.875rem;
  color: var(--rl-text);
}
.rl-modal-detail-value-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  color: var(--rl-text);
  opacity: 0.85;
}
.rl-modal-detail-value-muted {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}
.rl-modal-detail-value-primary {
  font-size: 0.875rem;
  color: var(--rl-text);
  font-weight: 500;
}

/* ── Modal body section blocks ── */
.rl-modal-section {
  padding: 1rem 0;
  border-top: 1px solid var(--rl-border);
}
.rl-modal-section-compact {
  padding: 0.625rem 0;
  border-top: 1px solid var(--rl-border);
}

/* ── Modal note centered ── */
.rl-modal-note-center {
  text-align: center;
}

/* ── Modal external link button ── */
.rl-modal-external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--rl-radius);
  font-size: 0.875rem;
  font-weight: 600;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  color: inherit;
  text-decoration: none;
  transition:
    background 0.15s,
    transform 0.1s;
}
.rl-modal-external-link:hover {
  background: color-mix(in srgb, currentColor 22%, transparent);
  transform: translateY(-1px);
}

/* Source-colored external link variants */
.rl-report-link-compliance {
  color: #14b8a6;
}
.rl-report-link-pentest {
  color: #6366f1;
}
.rl-report-link-sentinelops {
  color: #a855f7;
}

/* ── Report source tab active state (uses data-active or .active class) ── */
.rl-report-tab-compliance.active {
  color: #14b8a6;
  border-bottom-color: #14b8a6;
}
.rl-report-tab-pentest.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}
.rl-report-tab-sentinelops.active {
  color: #a855f7;
  border-bottom-color: #a855f7;
}

/* ============================================================
   DEPLOYMENT ACCORDION
   ============================================================ */
.rl-accordion-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.rl-accordion-card {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--rl-border);
  overflow: hidden;
}

.rl-accordion-body {
  border-top: 1px solid var(--rl-border);
  padding: 0;
}

/* ── Deployment commit-detail meta grid ── */
.rl-deploy-meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  margin-bottom: 1rem;
}

/* ============================================================
   CHANGED FILES LIST (commit detail modal)
   ============================================================ */
.rl-changes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  overflow: hidden;
}
.rl-change-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3125rem 0.75rem;
  background: var(--rl-card-bg);
  border-bottom: 1px solid var(--rl-border);
}
.rl-change-row:last-child {
  border-bottom: none;
}
.rl-change-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.rl-change-status-added {
  background: color-mix(in srgb, var(--rl-success) 18%, transparent);
  color: var(--rl-success);
}
.rl-change-status-modified {
  background: color-mix(in srgb, var(--rl-warning) 18%, transparent);
  color: var(--rl-warning);
}
.rl-change-status-deleted {
  background: color-mix(in srgb, var(--rl-error) 18%, transparent);
  color: var(--rl-error);
}
.rl-change-status-renamed {
  background: color-mix(in srgb, #3b82f6 18%, transparent);
  color: #3b82f6;
}
.rl-change-status-copied {
  background: color-mix(in srgb, #a855f7 18%, transparent);
  color: #a855f7;
}
.rl-change-status-other {
  background: var(--rl-bg-subtle);
  color: var(--rl-text-muted);
}
.rl-change-path {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  color: var(--rl-text);
  opacity: 0.9;
  word-break: break-all;
  min-width: 0;
}
.rl-changes-header-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rl-text-muted);
  margin-left: 0.25rem;
}

/* ============================================================
   TABLE ROW — CLICKABLE CURSOR
   ============================================================ */
.rl-table-row-clickable {
  cursor: pointer;
}
.rl-table-row-clickable:hover td {
  background: var(--rl-surface-hover, var(--rl-bg-subtle));
}

/* ============================================================
   CARD SIZE VARIANTS
   ============================================================ */
.rl-card-sm {
  padding: 0.75rem 1rem;
}
.rl-card-xl {
  padding: 2rem 2.25rem;
}

/* ── Compact empty state (inside accordion / small container) ── */
.rl-empty-state-compact {
  padding: 1.5rem 1rem;
  text-align: center;
}
.rl-empty-state-compact .rl-empty-state-title {
  font-size: 0.875rem;
  margin: 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.rl-flex-col {
  display: flex;
  flex-direction: column;
}
.rl-inline-flex {
  display: inline-flex;
}
.rl-justify-center {
  justify-content: center;
}
.rl-leading-tight {
  line-height: 1.25;
}
.rl-break-word {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.rl-box-border {
  box-sizing: border-box;
}
.rl-min-h-screen {
  min-height: 100vh;
}
.rl-w-full {
  width: 100%;
}
.rl-w-60 {
  width: 3.75rem;
}
.rl-max-w-sm {
  max-width: 24rem;
}
.rl-gap-4 {
  gap: 1rem;
}
.rl-p-3 {
  padding: 0.75rem;
}
.rl-p-4 {
  padding: 1rem;
}
.rl-p-6 {
  padding: 1.5rem;
}
.rl-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.rl-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.rl-mb-3 {
  margin-bottom: 0.75rem;
}
.rl-mb-5 {
  margin-bottom: 1.25rem;
}
.rl-mb-6 {
  margin-bottom: 1.5rem;
}
.rl-rounded-md {
  border-radius: 0.375rem;
}
.rl-text-5xl {
  font-size: 3rem;
  line-height: 1;
}

/* --- Table alignment helpers --- */
.rl-th-right {
  text-align: right;
}
.rl-td-right {
  text-align: right;
}

/* --- Table cell secondary text --- */
.rl-td-meta {
  font-size: 0.75rem;
  color: var(--rl-muted);
  line-height: 1.4;
  margin-top: 0.125rem;
}

/* --- Badge row (flex-wrap row for multiple badges) --- */
.rl-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

/* --- Row flex (horizontal flex row with gap) --- */
.rl-row-flex {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* --- Spacing utility --- */
.rl-ml-4 {
  margin-left: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   CommandShield — app-specific utility classes
   (shared here so no app-local globals.css custom CSS is needed)
   ═══════════════════════════════════════════════════════════════════ */

/* Feature card — used on /features page */
.feature-card {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: border-color 0.2s;
}
.feature-card:hover {
  border-color: var(--rl-accent);
}

/* Pricing billing toggle */
.pricing-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  background: var(--rl-border);
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: background 0.2s;
}
.pricing-toggle[data-active="true"] {
  background: var(--rl-accent);
}
.toggle-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: white;
  transition: transform 0.2s;
  pointer-events: none;
}
.pricing-toggle[data-active="true"] .toggle-dot {
  transform: translateX(20px);
}

/* Sticky header backdrop (used in admin layout) */
.rl-header-sticky {
  background: color-mix(in srgb, var(--rl-bg-page) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Shared eyebrow / pill label */
.tw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-accent);
  border: 1px solid color-mix(in srgb, var(--rl-accent) 30%, transparent);
  background: color-mix(in srgb, var(--rl-accent) 8%, transparent);
  padding: 4px 12px;
  border-radius: 9999px;
}

/* ── Per-app accent overrides ────────────────────────────────────────── */
/* SentinelOps — brand purple */
[data-app="sentinelops"] {
  --rl-accent: #8b5cf6;
  --rl-accent-hover: #7c3aed;
  --rl-accent-subtle: rgba(139, 92, 246, 0.14);
  --rl-accent-border: rgba(139, 92, 246, 0.3);
}

/* ── Modal / drawer backdrop overlay ─────────────────────────────────── */
.rl-modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 1 — Extracted shared component styles
   Classes moved out of inline style={{}} in shared components so the design
   system is the single source of truth. Token-driven; light/dark handled by
   the --rl-* variables above (no JS isDark branching needed).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Dark/light logo swap (CSS-only, replaces JS isDark image switch) ──── */
.rl-logo-dark {
  display: block;
}
.rl-logo-light {
  display: none;
}
html.light:not(.dark) .rl-logo-dark {
  display: none;
}
html.light:not(.dark) .rl-logo-light {
  display: block;
}

/* ── Button: base + md size (variants/sm/lg already defined above) ────── */
.rl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.rl-btn:focus-visible {
  outline: 2px solid var(--rl-accent);
  outline-offset: 2px;
}
.rl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.rl-btn-md {
  font-size: 1rem;
  padding: 0.5rem 1rem;
}

/* ── Card sub-parts (Card.tsx) ────────────────────────────────────────── */
.rl-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-card-body {
  padding: 1rem 1.5rem;
}
.rl-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rl-border);
}

/* ── Footer (Footer.tsx) ──────────────────────────────────────────────── */
.rl-footer {
  border-top: 1px solid var(--rl-border);
  background: var(--rl-bg-page);
}
.rl-footer-inner {
  padding: 1.25rem 1.5rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.rl-footer-inner--full {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.rl-footer-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.rl-footer-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rl-footer-logo {
  height: 26px;
  width: auto;
}
.rl-footer-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rl-text-muted);
}
.rl-footer-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.rl-footer-link {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rl-footer-link:hover {
  color: var(--rl-text-heading);
  text-decoration: underline;
}
.rl-footer-copyright {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rl-divider);
  font-size: 0.7rem;
  color: var(--rl-text-muted);
}

/* ── Decorative gradient utilities (replaces inline radial-gradient orbs
      on landing/auth pages across apps) ───────────────────────────────── */
.rl-radial-glow {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 0;
}
.rl-radial-glow--accent {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--rl-accent) 40%, transparent) 0%,
    transparent 70%
  );
}
.rl-radial-glow--blue {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--rl-brand-blue) 45%, transparent) 0%,
    transparent 70%
  );
}
/* Hero orb sizing presets */
.rl-hero-orb-lg {
  width: 500px;
  height: 500px;
}
.rl-hero-orb-md {
  width: 400px;
  height: 400px;
}

/* ── Spinner: centered block variant (replaces inline margin:0 auto) ──── */
.rl-spinner-block {
  margin-left: auto;
  margin-right: auto;
}

/* ── App header layout (Header.tsx) ───────────────────────────────────── */
[data-app-header] * {
  font-family: inherit;
  box-sizing: border-box;
}
.rl-app-header {
  background: var(--rl-header-bg);
  border-bottom: 1px solid var(--rl-header-border);
  flex-shrink: 0;
}
.rl-app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  min-height: 72px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.rl-app-header-inner--full {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.rl-app-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1;
}
.rl-app-header-logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.rl-app-header-divider {
  width: 1px;
  height: 20px;
  background: var(--rl-header-border);
  flex-shrink: 0;
}
.rl-app-header-titles {
  display: block;
  min-width: 0;
}
.rl-app-header-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--rl-text-heading);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-app-header-desc {
  font-size: 13px;
  color: var(--rl-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.rl-app-header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rl-app-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* Header nav items (declarative navItems) */
.rl-header-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 9999px;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.rl-header-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── User menu dropdown (Header.tsx UserMenu) ─────────────────────────── */
.rl-user-menu {
  position: relative;
}
.rl-user-menu-trigger {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}
.rl-user-menu-caret {
  margin-left: 2px;
  transition: transform 0.15s ease;
}
.rl-user-menu-caret--open {
  transform: rotate(180deg);
}
.rl-user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--rl-surface-elevated);
  border: 1px solid var(--rl-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  padding: 6px;
  z-index: 1000;
}
.rl-user-menu-account {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rl-border);
  margin-bottom: 6px;
}
.rl-user-menu-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--rl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-user-menu-email {
  font-size: 12px;
  color: var(--rl-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rl-user-menu-role {
  font-size: 11px;
  color: var(--rl-text-muted);
  margin-top: 2px;
  text-transform: capitalize;
}
.rl-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--rl-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.rl-user-menu-item:hover {
  background: var(--rl-surface-hover);
}
.rl-user-menu-logout {
  margin-top: 6px;
  border-top: 1px solid var(--rl-border);
  border-radius: 0;
}
.rl-user-menu-logout--bare {
  margin-top: 0;
  border-top: none;
}

/* ── Notification bell (NotificationBell.tsx) ─────────────────────────── */
.rl-notif {
  position: relative;
}
.rl-notif-trigger {
  position: relative;
  padding: 8px;
}
.rl-notif-icon {
  width: 20px;
  height: 20px;
}
.rl-notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 9999px;
  background: var(--rl-warning);
}
.rl-notif-badge--high {
  background: var(--rl-error);
}
.rl-notif-panel {
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 50;
  width: 320px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--rl-border);
  background: var(--rl-surface);
  overflow: hidden;
}
.rl-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rl-border);
}
.rl-notif-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.rl-notif-count {
  font-size: 12px;
}
.rl-notif-list {
  max-height: 320px;
  overflow-y: auto;
}
.rl-notif-loading {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
}
.rl-notif-empty {
  padding: 32px 16px;
  text-align: center;
}
.rl-notif-msg {
  font-size: 14px;
  margin: 0;
}
.rl-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--rl-border);
  text-decoration: none;
  cursor: default;
}
.rl-notif-item--link {
  cursor: pointer;
}
.rl-notif-item-icon {
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.rl-notif-item-body {
  min-width: 0;
  flex: 1;
}
.rl-notif-item-title {
  font-size: 12px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-notif-item-desc {
  font-size: 12px;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-notif-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--rl-border);
}
.rl-notif-footer-link {
  font-size: 12px;
  white-space: nowrap;
}

/* ── LeftNav layout helpers (LeftNav.tsx) ─────────────────────────────── */
[data-leftnav] {
  font-family: inherit;
}
.rl-leftnav-logo {
  padding: 14px 16px 12px;
  flex-shrink: 0;
}
.rl-leftnav-nav {
  flex: 1;
  padding: 30px 8px;
  overflow-y: auto;
}
.rl-leftnav-bottom {
  padding: 6px 8px;
}
.rl-leftnav-child-dot {
  display: none;
}

/* ── Security score ring (SecurityScoreRing.tsx) — static layout ──────── */
[data-score-ring] {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
[data-score-ring-body] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
[data-score-ring-svg] {
  display: block;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
[data-score-ring-center] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
[data-score-ring-label] {
  font-size: 14px;
  color: var(--rl-text-muted);
  text-align: center;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 — Shared layout + form primitives
   Class-driven building blocks (Container/Stack/Cluster/Grid/Field) so app
   code stops hand-rolling flex/grid/gap Tailwind utilities. Driven by a
   t-shirt gap scale; no inline styles needed in the primitive components.
   ═══════════════════════════════════════════════════════════════════════ */

/* Gap scale — shared by Stack / Cluster / Grid */
.rl-gap-none {
  gap: 0;
}
.rl-gap-xs {
  gap: 0.25rem;
}
.rl-gap-sm {
  gap: 0.5rem;
}
.rl-gap-md {
  gap: 1rem;
}
.rl-gap-lg {
  gap: 1.5rem;
}
.rl-gap-xl {
  gap: 2rem;
}

/* Container — max-width centered page wrapper */
.rl-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.rl-container--narrow {
  max-width: 768px;
}
.rl-container--wide {
  max-width: 1536px;
}
.rl-container--flush {
  padding-left: 0;
  padding-right: 0;
}

/* Stack — vertical flex */
.rl-stack {
  display: flex;
  flex-direction: column;
}
.rl-stack--center {
  align-items: center;
}
.rl-stack--start {
  align-items: flex-start;
}
.rl-stack--end {
  align-items: flex-end;
}

/* Cluster — horizontal flex (wraps) */
.rl-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.rl-cluster--nowrap {
  flex-wrap: nowrap;
}
.rl-cluster--top {
  align-items: flex-start;
}
.rl-cluster--baseline {
  align-items: baseline;
}
.rl-cluster--between {
  justify-content: space-between;
}
.rl-cluster--start {
  justify-content: flex-start;
}
.rl-cluster--end {
  justify-content: flex-end;
}
.rl-cluster--center {
  justify-content: center;
}

/* Grid — responsive column grid (collapses to 1 col on narrow screens) */
.rl-grid {
  display: grid;
}
.rl-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rl-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rl-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .rl-grid-cols-3,
  .rl-grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .rl-grid-cols-2,
  .rl-grid-cols-3,
  .rl-grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Breakpoint-faithful responsive grids (match Tailwind sm=640 / md=768 / lg=1024):
   single column below the breakpoint, N columns at/above it. Use with the Grid
   primitive's `at` prop to replace `grid md:grid-cols-N` without shifting layout. */
.rl-grid-at {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .rl-grid-sm-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rl-grid-sm-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rl-grid-sm-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .rl-grid-md-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rl-grid-md-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rl-grid-md-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rl-grid-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rl-grid-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rl-grid-lg-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Form field primitives (.rl-input already defined above) */
.rl-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rl-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rl-text-secondary);
}
.rl-label-required::after {
  content: " *";
  color: var(--rl-error);
}
.rl-field-hint {
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}
.rl-field-error {
  font-size: 0.8125rem;
  color: var(--rl-error);
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — Shared utility/semantic classes
   Frozen vocabulary that replaces the high-frequency STATIC inline style={{}}
   patterns across apps (token-based). App migrations target these instead of
   inventing new classes. Dynamic values (computed width/color) stay inline.
   ═══════════════════════════════════════════════════════════════════════ */

/* Font-size scale (size only; pair with rl-text-muted/-accent/-heading for color) */
.rl-fs-2xs {
  font-size: 0.6875rem; /* 11px */
}
.rl-fs-xs {
  font-size: 0.75rem; /* 12px */
}
.rl-fs-sm {
  font-size: 0.8125rem; /* 13px */
}
.rl-fs-md {
  font-size: 0.875rem; /* 14px */
}
.rl-fs-lg {
  font-size: 1rem; /* 16px */
}

/* Hairline dividers (token-based) */
.rl-border-b {
  border-bottom: 1px solid var(--rl-border);
}
.rl-border-t {
  border-top: 1px solid var(--rl-border);
}

/* Box padding presets (replace ad-hoc inline padding) */
.rl-pad-sm {
  padding: 12px 16px;
}
.rl-pad {
  padding: 20px;
}
.rl-pad-lg {
  padding: 24px;
}

/* Data table — add .rl-table to the <table>; cells/headers styled via descendants */
.rl-table {
  width: 100%;
  border-collapse: collapse;
}
.rl-table th,
.rl-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}
.rl-table thead th {
  border-bottom: 1px solid var(--rl-border);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rl-text-muted);
  white-space: nowrap;
}
.rl-table tbody tr {
  border-bottom: 1px solid var(--rl-border);
}
.rl-table tbody tr:last-child {
  border-bottom: none;
}
/* Standalone cell classes for non-<table> grid layouts */
.rl-th {
  padding: 12px 16px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rl-text-muted);
}
.rl-td {
  padding: 12px 16px;
  text-align: left;
}

/* Horizontal scroll wrapper for wide tables */
.rl-table-scroll {
  overflow-x: auto;
}

/* Spacing + alignment utilities (complete the shared scale so app code uses
   these instead of Tailwind margin/align utilities; values match Tailwind).
   Standalone margins only — use Stack/Cluster gap for spacing between items. */
.rl-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.rl-text-left {
  text-align: left;
}
.rl-mb-0 {
  margin-bottom: 0;
}
.rl-mb-8 {
  margin-bottom: 2rem;
}
.rl-mb-10 {
  margin-bottom: 2.5rem;
}
.rl-mb-12 {
  margin-bottom: 3rem;
}
.rl-mt-3 {
  margin-top: 0.75rem;
}
.rl-mt-4 {
  margin-top: 1rem;
}
.rl-mt-5 {
  margin-top: 1.25rem;
}
.rl-mt-8 {
  margin-top: 2rem;
}
.rl-mt-10 {
  margin-top: 2.5rem;
}
.rl-mt-12 {
  margin-top: 3rem;
}

/* ── Marketing CTA band — ONE consistent treatment for the final landing
      section across ALL apps (replaces per-app hero-gradient / *-bg-card /
      *-cta-band / landing-cta-section). Theme-aware, matches the hero palette. */
.rl-cta-section {
  background: linear-gradient(135deg, #0d2137 0%, #0f2b4a 50%, #0d2137 100%);
  border-top: 1px solid var(--rl-border);
  border-bottom: 1px solid var(--rl-border);
}
html.light:not(.dark) .rl-cta-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
}