/*
 * 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);
  /* var(--font-inter) is set per-app via next/font's `${inter.variable}` on <body>,
     so the brand font renders without any per-app font-family override. */
  font-family:
    var(--font-inter),
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GlassIcon (shared component) renders <span class="rl-glass-icon"> around its SVG.
   Center it here so the icon sits centered in its box across every app. */
.rl-glass-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 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;
}
/* Light mode: a thin outline on white reads weak. Give it a soft accent-tinted
   fill + the app's accent for text/border so it has real button presence and
   stays on-brand. The html.light specificity beats the token defaults above and
   the shared-buttons.css copy. */
html.light .rl-btn-secondary {
  background-color: color-mix(in srgb, var(--rl-accent) 9%, #ffffff);
  color: var(--rl-accent);
  border-color: color-mix(in srgb, var(--rl-accent) 55%, transparent);
}
html.light .rl-btn-secondary:hover {
  background-color: color-mix(in srgb, var(--rl-accent) 18%, #ffffff);
  color: var(--rl-accent-hover);
  border-color: var(--rl-accent);
}

/* ── 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;
  white-space: nowrap;
}
/* 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;
}

/* Marketing-style arrow-on-hover for the canonical text-link family (matches
   roguelogics.com). The arrow slides in via a max-width transition so standalone
   links reserve no space; only following inline text shifts, and only on hover.
   Excludes .rl-back-link (own left chevron), .rl-card-cta (own arrow) and
   .rl-chip-link (code/mono chips). */
.rl-link::after,
.rl-link-sm::after,
.rl-link-xs::after,
.rl-link-small::after,
.rl-link-muted::after {
  content: "\2192";
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  vertical-align: baseline;
  text-decoration: none;
  transform: translateX(-0.15em);
  transition:
    max-width 0.2s ease,
    opacity 0.15s ease,
    margin-left 0.2s ease,
    transform 0.15s ease;
}
.rl-link:hover::after,
.rl-link-sm:hover::after,
.rl-link-xs:hover::after,
.rl-link-small:hover::after,
.rl-link-muted:hover::after {
  max-width: 1.25em;
  margin-left: 0.25em;
  opacity: 1;
  transform: translateX(0);
}

/* 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: 0.9375rem; /* keep in sync with the canonical def below */
  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: 0.9375rem; /* keep in sync with the canonical def below */
  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-font-bold {
  font-weight: 700;
}
.rl-m-0 {
  margin: 0;
}
.rl-mb-1 {
  margin-bottom: 0.25rem;
}
.rl-mb-2 {
  margin-bottom: 0.5rem;
}
.rl-my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.rl-py-2 {
  padding-top: 0.5rem;
  padding-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: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
.rl-page-header > .rl-page-title {
  flex-shrink: 0;
}
/* Subtitle stacks on its own line UNDER the title (order pulls it past any
   right-aligned actions; 100% basis forces the wrap), while action buttons stay
   on the title's line. Works regardless of DOM order of subtitle vs. actions. */
.rl-page-header > .rl-page-subtitle {
  order: 1;
  flex-basis: 100%;
  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);
}
/* Screen-reader-only / visually-hidden. Replaces Tailwind's `.sr-only` (removed
   in the Tailwind migration) — both names share this rule so existing markup
   keeps working and content stays in the a11y tree (not display:none). */
.rl-sr-only,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ── Tailwind-compat utilities ──────────────────────────────────────────────
   Still referenced in app markup after the Tailwind migration (audited via a
   className token-diff vs this file). Defined here so layouts/text render
   correctly without per-file churn — bare grid spans collapsing and containers
   going full-width were the visible breakage. Prefer rl-* in NEW code. */
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.line-clamp-1,
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.italic { font-style: italic; }
.line-through { text-decoration: line-through; }
.font-medium { font-weight: 500; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.pt-10 { padding-top: 2.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.mr-3 { margin-right: 0.75rem; }
.rounded-br-sm { border-bottom-right-radius: 0.125rem; }
.rounded-bl-sm { border-bottom-left-radius: 0.125rem; }
.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);
}
/* Solid variants — full-strength backgrounds for dots, icon circles, bar/progress fills,
   toggle on-states. The unsuffixed classes above are 15% tints for chips/badges/banners. */
.rl-bg-success-solid {
  background: var(--rl-success);
}
.rl-bg-error-solid {
  background: var(--rl-error);
}
.rl-bg-warning-solid {
  background: var(--rl-warning);
}
.rl-bg-accent-solid {
  background: var(--rl-accent);
}

/* 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 {
  /* light gray in light mode (#f1f5f9), navy-tint in dark — matches
     .rl-table-row-clickable:hover and other surface hovers platform-wide */
  background: var(--rl-surface-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);
}
/* Title-case select labels platform-wide (enum values are stored lowercase).
   On the closed control (.rl-select) and the option list. */
.rl-select,
.rl-select option,
select option {
  text-transform: capitalize;
}
/* ── DateField (free-text date input + calendar button) ─────── */
.rl-datefield {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 100%;
}
.rl-datefield-input {
  width: 100%;
  padding-right: 2.25rem; /* room for the calendar button */
}
.rl-datefield.is-invalid .rl-datefield-input {
  border-color: var(--rl-error);
}
.rl-datefield-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--rl-text-muted);
  cursor: pointer;
  border-radius: 0 0.5rem 0.5rem 0;
  transition: color 0.15s;
}
.rl-datefield-btn:hover {
  color: var(--rl-accent);
}
.rl-datefield-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Native picker is visually hidden but kept in the layout for showPicker(). */
.rl-datefield-native {
  position: absolute;
  right: 0.5rem;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.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;
  /* Consistent framed card for standalone empty states (matches .rl-card). */
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  background: var(--rl-bg-surface);
}
/* Inside a table cell the row is already framed — drop the nested card. */
td .rl-empty-state,
.rl-td .rl-empty-state {
  border: none;
  background: transparent;
}
.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;
}
/* Size modifiers re-asserted: the standalone .rl-modal-sm/-md rules are
   defined earlier in this file, so .rl-modal's own max-width would win. */
.rl-modal.rl-modal-sm {
  max-width: 27.5rem;
}
.rl-modal.rl-modal-md {
  max-width: 32.5rem;
}
.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;
  /* Guarantee clear separation from any status text ("Updated…", "Next refresh
     in…") rendered to the button's left, regardless of the flex wrapper's gap. */
  margin-left: 0.625rem;
  background: transparent;
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  /* Match the standard small dashboard button (.rl-btn-sm). */
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  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);
}

/* ── Semantic solid buttons (success / warning / danger) ─────────
   Filled, white-text CTAs sharing one structure — fixed vivid fills
   (same in light + dark, like a "delete" button is always red). */
.rl-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #ffffff;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: filter 0.15s;
  text-decoration: none;
}
.rl-btn-success:hover {
  filter: brightness(0.92);
}
.rl-btn-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Warning button ─────────────────────────────────────────── */
.rl-btn-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d97706;
  color: #ffffff;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: filter 0.15s;
  text-decoration: none;
}
.rl-btn-warning:hover {
  filter: brightness(0.92);
}
.rl-btn-warning:disabled {
  opacity: 0.5;
  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: #dc2626;
  color: #ffffff;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: filter 0.15s;
  text-decoration: none;
}
.rl-btn-danger:hover {
  filter: brightness(0.92);
}
.rl-btn-danger:disabled {
  opacity: 0.5;
  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;
}

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

/* ── SVG score ring (BEM-style ScoreRing in the-bridge) ───────── */
.score-ring__track {
  stroke: var(--rl-border-strong, #334155);
}
.score-ring__value {
  fill: var(--rl-text, #e2e8f0);
}
.score-ring__label {
  fill: var(--rl-text-muted, #94a3b8);
}

/* ── 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: 3px 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);
}

/* GapCard (shared component, cleartrust readiness results): card + header (rank/title/meta)
   + three callout sections (why auditors care / what good looks like / fastest next step). */
.rl-gap-card {
  background: var(--rl-bg-card);
  border: 1px solid var(--rl-border);
  border-radius: 0.875rem;
  overflow: hidden;
}
.rl-gap-card-header {
  padding: 1.25rem 1.5rem;
  background: var(--rl-bg-subtle);
  border-bottom: 1px solid var(--rl-border);
}
.rl-gap-card-rank {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background: var(--rl-accent-subtle);
  color: var(--rl-accent);
  font-weight: 700;
  font-size: 0.9375rem;
}
.rl-gap-card-meta {
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}
/* Three callout sections — colored left rail + colored heading per category */
.rl-gap-card-why,
.rl-gap-card-good,
.rl-gap-card-next {
  padding-left: 0.875rem;
  border-left: 3px solid var(--rl-border);
}
.rl-gap-card-why {
  border-left-color: var(--rl-info, var(--rl-accent));
}
.rl-gap-card-good {
  border-left-color: var(--rl-success);
}
.rl-gap-card-next {
  border-left-color: var(--rl-accent);
}
.rl-gap-card-why-heading,
.rl-gap-card-good-heading,
.rl-gap-card-next-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.rl-gap-card-why-heading {
  color: var(--rl-info, var(--rl-accent));
}
.rl-gap-card-good-heading {
  color: var(--rl-success);
}
.rl-gap-card-next-heading {
  color: var(--rl-accent);
}
.rl-gap-card-why-text,
.rl-gap-card-good-text,
.rl-gap-card-next-text {
  font-size: 0.8125rem;
  color: var(--rl-text-secondary);
  line-height: 1.55;
}
.rl-gap-card-good-bullet {
  flex-shrink: 0;
  margin-right: 0.5rem;
  color: var(--rl-success);
  font-weight: 700;
}
.rl-gap-card-next-arrow {
  flex-shrink: 0;
  margin-right: 0.5rem;
  color: var(--rl-accent);
  font-weight: 700;
}
.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 */

/* ── Score ring (conic-gradient gauge with centered value) ───── */
/* Usage:
   <div class="rl-ring" style="background: conic-gradient(...)">
     <div class="rl-ring-inner">
       <span class="rl-ring-value">57</span>
       <span class="rl-ring-label">of 100</span>
     </div>
   </div>
   The inner circle centers the value+label as a GROUP (flex column), so the
   label hugs the number instead of being distributed to the bottom edge. */
.rl-ring {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  flex-shrink: 0;
  width: 132px;
  height: 132px;
}
.rl-ring-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--rl-bg-surface);
  width: 104px;
  height: 104px;
}
.rl-ring-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rl-ring-label {
  margin-top: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rl-text-muted);
}

/* ── Tailwind-parity utilities (dashboard migration) ─────────── */
/* Values match the Tailwind classes they replace. */
.rl-p-5 {
  padding: 1.25rem;
}
.rl-p-8 {
  padding: 2rem;
}
.rl-gap-1 {
  gap: 0.25rem;
}
.rl-gap-1-5 {
  gap: 0.375rem;
}
.rl-gap-3 {
  gap: 0.75rem;
}
.rl-gap-6 {
  gap: 1.5rem;
}
.rl-rounded-lg {
  border-radius: 0.5rem;
}
.rl-rounded-xl {
  border-radius: 0.75rem;
}
.rl-rounded-2xl {
  border-radius: 1rem;
}
.rl-rounded-full {
  border-radius: 9999px;
}
.rl-maxw-4xl {
  max-width: 56rem;
}
.rl-maxw-md {
  max-width: 28rem;
}
.rl-grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Row separators between direct children (Tailwind divide-y) */
.rl-divide-y > * + * {
  border-top: 1px solid var(--rl-border);
}
/* Bare pulse animation (rl-skeleton already bundles bg + radius) */
.rl-animate-pulse {
  animation: rl-pulse 1.5s ease-in-out infinite;
}
/* Hoverable list row */
.rl-hover-bg-muted {
  transition: background-color 0.15s;
}
.rl-hover-bg-muted:hover {
  background: var(--rl-bg-muted);
}
.rl-leading-relaxed {
  line-height: 1.625;
}
.rl-leading-none {
  line-height: 1;
}
.rl-tabular-nums {
  font-variant-numeric: tabular-nums;
}
.rl-overflow-hidden {
  overflow: hidden;
}
.rl-mb-1-5 {
  margin-bottom: 0.375rem;
}
.rl-stack-gap-xl {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* Auto-fit KPI/score tile grid (collapses gracefully at any width) */
.rl-grid-autofit-140 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
/* Medium progress track (rl-progress is 6px) */
.rl-progress-md {
  height: 0.625rem;
}
/* 8px list bullets (highlights/risks) */
.rl-bullet-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.rl-bullet-dot-success {
  background: var(--rl-success);
}
.rl-bullet-dot-warning {
  background: var(--rl-warning);
}
/* Numbered list bullet (recommendations) */
.rl-num-bullet {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--rl-accent) 15%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--rl-accent);
}
/* Module score tile (executive report module rows) */
.rl-module-score-tile {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  flex-shrink: 0;
}
.rl-maxw-7xl {
  max-width: 80rem;
}
.rl-p-2 {
  padding: 0.5rem;
}
.rl-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.rl-py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.rl-pb-4 {
  padding-bottom: 1rem;
}
.rl-pt-1 {
  padding-top: 0.25rem;
}
.rl-gap-5 {
  gap: 1.25rem;
}
.rl-mt-0-5 {
  margin-top: 0.125rem;
}
.rl-w-32 {
  width: 8rem;
}
.rl-ml-auto {
  margin-left: auto;
}
.rl-opacity-30 {
  opacity: 0.3;
}
.rl-opacity-60 {
  opacity: 0.6;
}
.rl-hover-dim:hover {
  opacity: 0.8;
}
/* Show only at ≥768px (e.g. secondary timestamps) */
.rl-md-up {
  display: none;
}
@media screen and (min-width: 768px) {
  .rl-md-up {
    display: block;
  }
}
/* Column on phones, row from 640px / 768px up */
.rl-row-responsive {
  display: flex;
  flex-direction: column;
}
.rl-row-responsive-md {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 640px) {
  .rl-row-responsive {
    flex-direction: row;
  }
  .rl-w-48-sm {
    width: 12rem;
  }
}
@media screen and (min-width: 768px) {
  .rl-row-responsive-md {
    flex-direction: row;
  }
}
/* Auto-fit stat/tile grids */
.rl-grid-autofit-110 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.rl-grid-autofit-160 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* List rows whose first/last spacing trims to the card edge */
.rl-list-trim > :first-child {
  padding-top: 0;
}
.rl-list-trim > :last-child {
  padding-bottom: 0;
}
.rl-list-trim-borders > :last-child {
  border-bottom: 0;
}
/* Dashed empty-slot card */
.rl-empty-dashed {
  border: 1px dashed var(--rl-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 8rem;
  text-align: center;
}
/* Module availability cards (command-center modules grid) */
.rl-module-card-on {
  border-color: color-mix(in srgb, var(--rl-success) 25%, transparent);
  background: color-mix(in srgb, var(--rl-success) 5%, transparent);
  cursor: pointer;
}
.rl-module-card-on:hover {
  background: color-mix(in srgb, var(--rl-success) 10%, transparent);
}
.rl-module-card-off {
  border-color: var(--rl-border);
  background: var(--rl-bg);
  opacity: 0.6;
  cursor: default;
}
.rl-underline {
  text-decoration: underline;
}
.rl-py-0-5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.rl-w-8 {
  width: 2rem;
}
.rl-icon-12 {
  width: 0.75rem;
  height: 0.75rem;
}
.rl-animate-spin {
  animation: rl-spin 1s linear infinite;
}
.rl-dot-6 {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.rl-bullet-dot-error {
  background: var(--rl-error);
}
.rl-bullet-dot-muted {
  background: var(--rl-text-muted);
}
/* Score-toned card surfaces (bg 10% + border 20% of the tone) */
.rl-tone-success {
  background: color-mix(in srgb, var(--rl-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--rl-success) 20%, transparent);
}
.rl-tone-warning {
  background: color-mix(in srgb, var(--rl-warning) 10%, transparent);
  border-color: color-mix(in srgb, var(--rl-warning) 20%, transparent);
}
.rl-tone-error {
  background: color-mix(in srgb, var(--rl-error) 10%, transparent);
  border-color: color-mix(in srgb, var(--rl-error) 20%, transparent);
}
/* Square-corner tone chips (priority/status inline labels) */
.rl-chip-tone-success {
  color: var(--rl-success);
  background: color-mix(in srgb, var(--rl-success) 10%, transparent);
}
.rl-chip-tone-warning {
  color: var(--rl-warning);
  background: color-mix(in srgb, var(--rl-warning) 10%, transparent);
}
.rl-chip-tone-error {
  color: var(--rl-error);
  background: color-mix(in srgb, var(--rl-error) 10%, transparent);
}
.rl-chip-tone-muted {
  color: var(--rl-text-muted);
  background: var(--rl-bg-muted);
}

/* ── Dashboard shell (LeftNav + header + scrollable main) ────── */
/* <div class="rl-dash-shell"><LeftNav/><div class="rl-dash-col">
     <Header/><main class="rl-dash-main">…</main><Footer/></div></div> */
.rl-dash-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.rl-dash-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.rl-dash-main {
  flex: 1;
  overflow-y: auto;
  padding: 2rem;
}
@media print {
  /* Unclip the shell so printed pages flow + paginate (the 100vh +
     overflow:hidden shell otherwise clips printouts to one page). */
  .rl-dash-shell {
    display: block;
    height: auto;
    overflow: visible;
  }
  .rl-dash-col,
  .rl-dash-main {
    display: block;
    overflow: visible;
  }
}

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

/* Spinner accent color + the transparent-top rotation gap are both set in the
   primary `.rl-spinner` definition above. A `border-color` shorthand override
   here would re-paint the transparent top, collapsing the spinner into a solid
   ring with no visible rotation — so it is intentionally omitted. */
/* ── 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;
}
/* Alert text mixes the variant hue toward the theme foreground so it stays
   readable on the 12% tinted background in BOTH themes (raw hue tokens like
   the light-mode ambers were too low-contrast on their own tint). */
.rl-alert-success {
  background: color-mix(in srgb, var(--rl-success) 12%, transparent);
  color: color-mix(in srgb, var(--rl-success) 50%, var(--rl-text));
  border-color: color-mix(in srgb, var(--rl-success) 40%, transparent);
}
.rl-alert-error {
  background: color-mix(in srgb, var(--rl-error) 12%, transparent);
  color: color-mix(in srgb, var(--rl-error) 50%, var(--rl-text));
  border-color: color-mix(in srgb, var(--rl-error) 40%, transparent);
}
.rl-alert-warning {
  background: color-mix(in srgb, var(--rl-warning) 12%, transparent);
  color: color-mix(in srgb, var(--rl-warning) 50%, var(--rl-text));
  border-color: color-mix(in srgb, var(--rl-warning) 40%, transparent);
}
.rl-alert-info {
  background: color-mix(in srgb, var(--rl-info) 12%, transparent);
  color: color-mix(in srgb, var(--rl-info) 50%, var(--rl-text));
  border-color: color-mix(in srgb, var(--rl-info) 40%, 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 is the LANDING-page section heading (clamp sizing, defined
   in "Landing section typography" below). Dashboard section headings use .rl-h2. */
.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;
}
/* App logos are theme-aware inline SVGs (wordmark via currentColor), so in dark
   mode they need no filter or chip — render them as-is. (The old
   brightness/grayscale invert flattened colour marks to a white/grey box.) */
html.dark .app-logo {
  filter: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   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;
  flex-direction: column;
  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-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: 0.8125rem;
  font-weight: 500;
  color: var(--rl-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  text-align: left;
}
.rl-user-menu-item:hover {
  background: var(--rl-surface-hover);
}
.rl-user-menu-divider {
  height: 1px;
  background: var(--rl-border);
  margin: 6px 4px;
}
.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;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  border-radius: 9999px;
  /* fixed saturated colors so white stays readable in BOTH themes — the --rl-warning/
     --rl-error tokens flip lightness between light/dark and broke contrast. */
  background: #ea580c;
}
.rl-notif-badge--high {
  background: #dc2626;
  color: #ffffff;
}
.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-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.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%);
}

/* ── Utilities converged from ThreatWatch (single-source, 2026-06-09) ─────── */
.rl-fs-xl { font-size: 1.25rem; }
.rl-fs-2xl { font-size: 1.5rem; font-weight: 700; }
.rl-fs-3xl { font-size: 1.875rem; font-weight: 700; }
.rl-fs-4xl { font-size: 2.25rem; font-weight: 800; }
.rl-text-lg { font-size: 1.125rem; }
.rl-maxw-xs { max-width: 20rem; }
.rl-maxw-xl { max-width: 36rem; }
.rl-maxw-2xl { max-width: 42rem; }
.rl-maxw-3xl { max-width: 48rem; }
.rl-maxw-5xl { max-width: 64rem; }
.rl-mono { font-family: var(--font-mono, ui-monospace, monospace); }
.rl-mono-xs { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }
.rl-nowrap { white-space: nowrap; }
.rl-hidden { display: none; }
.rl-block { display: block; }
.rl-uppercase { text-transform: uppercase; }
.rl-capitalize { text-transform: capitalize; }
.rl-relaxed { line-height: 1.625; }
.rl-pre-wrap { white-space: pre-wrap; }
.rl-prewrap { white-space: pre-wrap; }
.rl-pre-line { white-space: pre-line; }
.rl-line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.25rem; }
.rl-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.25rem; }
.rl-opacity-50 { opacity: 0.5; }
.rl-op-25 { opacity: 0.25; }
.rl-op-75 { opacity: 0.75; }
.rl-op-low { opacity: 0.1; }
.rl-z10 { position: relative; z-index: 10; }
.rl-baseline { display: flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap; }
.rl-title-snug { font-weight: 600; color: var(--rl-text-heading); line-height: 1.375; }
.rl-h2-sm { font-size: 13px; font-weight: 600; }
.rl-resize-none { resize: none; }
.rl-mb-16 { margin-bottom: 4rem; }
.rl-mt-20 { margin-top: 5rem; }
.rl-ml-1 { margin-left: 0.25rem; }
.rl-ml-2 { margin-left: 0.5rem; }
.rl-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.rl-py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.rl-pad-8 { padding: 2rem; }
.rl-pad-10 { padding: 2.5rem; }

/* ── Components converged from ThreatWatch (Phase C) ── */
.rl-severity-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--rl-text-heading);
}
.rl-severity-badge.rl-sev-critical { background: var(--rl-error); }
.rl-severity-badge.rl-sev-medium { background: var(--rl-warning); }
.rl-severity-badge.rl-sev-low { background: var(--rl-success); }
.rl-severity-badge.rl-sev-informational { background: var(--rl-accent); }
.rl-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 13px;
  border: 1px solid var(--rl-border);
  background: color-mix(in srgb, var(--rl-surface) 5%, transparent);
  color: var(--rl-text-muted);
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
  cursor: pointer;
}
.rl-action-btn:hover {
  color: var(--rl-text-heading);
}
.rl-action-btn--active {
  background: color-mix(in srgb, var(--rl-accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--rl-accent) 30%, transparent);
  color: var(--rl-accent);
}
.rl-icon-8 {
  width: 2rem;
  height: 2rem;
}
.rl-stat-tile {
  border-radius: 0.75rem;
  padding: 1rem;
}
.rl-stat-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--rl-accent);
  margin-bottom: 0.125rem;
}
.rl-icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-icon-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.rl-icon-tile {
  flex-shrink: 0;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
}
.rl-cta-row {
  flex-direction: column;
}
@media (min-width: 640px) {
  .rl-cta-row {
    flex-direction: row;
  }
}
.rl-cta-btn {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-radius: 0.75rem;
  text-align: center;
}
.rl-faq-card {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.rl-panel-interactive {
  transition: background-color 0.15s;
}
.rl-panel-interactive:hover {
  background: color-mix(in srgb, var(--rl-surface) 8%, transparent);
}
.rl-panel--accent {
  border-color: color-mix(in srgb, var(--rl-accent) 30%, transparent);
}
.rl-stat-num {
  font-size: 1.875rem;
  font-weight: 700;
}
.rl-panel-lg {
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  border-radius: 1rem;
  padding: 2rem;
}
.rl-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 13px;
  color: var(--rl-text-muted);
  transition: color 0.15s;
  margin-bottom: 1.5rem;
}
.rl-back-link:hover {
  color: var(--rl-accent);
}
.rl-sec-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.rl-meta-label {
  font-size: 10px;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rl-meta-value {
  font-size: 13px;
  color: var(--rl-text-secondary);
  margin-top: 0.125rem;
}
.rl-chip-link {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  border-radius: 0.375rem;
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--rl-accent);
  transition: background-color 0.15s;
}
.rl-chip-link:hover {
  background: color-mix(in srgb, var(--rl-accent) 20%, transparent);
}
.rl-meta-grid {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rl-border);
}
.rl-remove-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: var(--rl-bg-overlay);
  color: var(--rl-text-muted);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  border: none;
  cursor: pointer;
}
.rl-remove-btn:hover {
  color: var(--rl-error);
}
.rl-link-muted {
  font-size: 13px;
  color: var(--rl-text-muted);
  transition: color 0.15s;
}
.rl-link-muted:hover {
  color: var(--rl-accent);
}
.rl-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 12px;
  background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
  color: var(--rl-accent);
  border: 1px solid color-mix(in srgb, var(--rl-accent) 20%, transparent);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
}
.rl-tag-x {
  margin-left: 0.25rem;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.rl-tag-x:hover {
  color: var(--rl-text-heading);
}
.rl-panel-card {
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  padding: 1.5rem;
}
.rl-pill--active {
  background: color-mix(in srgb, var(--rl-accent) 24%, transparent);
  color: var(--rl-accent);
  border-color: var(--rl-accent);
  box-shadow: inset 0 0 0 1px var(--rl-accent);
  font-weight: 600;
}
.rl-pill-lg {
  padding: 0.5rem 1rem;
}
.rl-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  accent-color: var(--rl-accent);
}
.rl-btn-gradient-lg {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, #06b6d4, #2563eb);
  /* Always white — the gradient is dark in both themes (was --rl-text-heading,
     which is near-black in light mode and unreadable). */
  color: #fff;
  font-weight: 600;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.25);
  transition: background 0.2s;
}
.rl-btn-gradient-lg:hover {
  background: linear-gradient(to right, #22d3ee, #3b82f6);
}
.rl-btn-gradient-lg:disabled {
  opacity: 0.5;
}
.rl-check-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.rl-checkbox {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  accent-color: var(--rl-accent);
  cursor: pointer;
}
.rl-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem 1rem;
}
@media (max-width: 480px) {
  .rl-check-grid {
    grid-template-columns: 1fr;
  }
}
.rl-check-group-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rl-text-muted);
  margin-bottom: 0.375rem;
}
.rl-table-card {
  border-radius: 1rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  overflow: hidden;
}
.rl-row-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  border-radius: 0.375rem;
  padding: 0.3rem 0.625rem;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.rl-row-btn:hover {
  color: var(--rl-text-heading);
  background: var(--rl-bg-subtle);
  border-color: color-mix(in srgb, var(--rl-text-muted) 35%, transparent);
}
.rl-row-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* accent variant for a row's primary action */
.rl-row-btn--accent {
  color: var(--rl-accent);
  border-color: color-mix(in srgb, var(--rl-accent) 40%, transparent);
}
.rl-row-btn--accent:hover {
  color: var(--rl-accent);
  background: var(--rl-bg-accent);
  border-color: var(--rl-accent);
}
.rl-row-btn:hover {
  color: var(--rl-text-heading);
}
.rl-row-btn-danger {
  font-size: 12px;
  color: color-mix(in srgb, var(--rl-error) 60%, transparent);
  border: 1px solid var(--rl-border);
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s;
}
.rl-row-btn-danger:hover {
  color: var(--rl-error);
}
.rl-row-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.rl-pager {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
}
.rl-pager-btn {
  font-size: 12px;
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: transparent;
  cursor: pointer;
}
.rl-pager-btn:hover {
  color: var(--rl-text-heading);
}
.rl-pager-btn:disabled {
  opacity: 0.3;
}
.rl-tab-btn {
  font-size: 13px;
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  background: transparent;
  cursor: pointer;
  transition:
    color 0.15s,
    background-color 0.15s,
    border-color 0.15s;
}
.rl-tab-btn:hover {
  color: var(--rl-text-heading);
}
.rl-tab-btn.active {
  color: var(--rl-text-heading);
  border-color: color-mix(in srgb, var(--rl-accent) 60%, transparent);
  background: color-mix(in srgb, var(--rl-accent) 12%, transparent);
}
.rl-header-search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rl-border);
  border-radius: 999px;
  color: var(--rl-text-muted);
  background: var(--rl-bg-overlay);
}
.rl-header-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.8125rem;
  color: var(--rl-text-heading);
  width: 9rem;
}
.rl-header-search:focus-within { border-color: color-mix(in srgb, var(--rl-accent) 55%, transparent); }
@media (max-width: 640px) { .rl-header-search { display: none; } }
.rl-table-card { overflow-x: auto; }
.rl-kpi-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rl-kpi-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.rl-kpi-pill b { color: var(--rl-text-heading); font-weight: 700; }
.rl-kpi-pill:hover { border-color: color-mix(in srgb, var(--rl-accent) 50%, transparent); color: var(--rl-text-heading); }
.rl-kpi-pill--warn { border-color: color-mix(in srgb, var(--rl-warning) 55%, transparent); }
.rl-kpi-pill--warn b { color: var(--rl-warning); }
.rl-pager-info {
  font-size: 12px;
  color: var(--rl-text-muted);
  align-self: center;
}
.rl-empty-card {
  border-radius: 1rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  padding: 3rem;
  text-align: center;
}
.rl-side-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1rem;
}
.rl-side-panel {
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-base);
  width: 100%;
  max-width: 28rem;
  height: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
}
.rl-danger-btn {
  flex: 1;
  font-size: 13px;
  color: var(--rl-error);
  border: 1px solid var(--rl-border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  cursor: pointer;
}
.rl-danger-btn:hover {
  background: color-mix(in srgb, var(--rl-error) 10%, transparent);
}
.rl-form-label {
  display: block;
  font-size: 12px;
  color: var(--rl-text-muted);
  margin-bottom: 0.25rem;
}
.rl-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--rl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.rl-icon-tile-grad {
  flex-shrink: 0;
  margin-top: 0.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.rl-upgrade-banner {
  background: linear-gradient(
    to right,
    rgba(22, 78, 99, 0.2),
    rgba(30, 58, 138, 0.2)
  );
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
}
.rl-tier-name {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: capitalize;
}
.rl-suggest-btn {
  text-align: left;
  font-size: 13px;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-elevated);
  color: var(--rl-text-secondary);
  transition: border-color 0.15s, color 0.15s;
  cursor: pointer;
}
.rl-suggest-btn:hover {
  border-color: var(--rl-accent);
  color: var(--rl-text-heading);
}
.rl-info-banner {
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--rl-accent) 20%, transparent);
  background: color-mix(in srgb, var(--rl-accent) 5%, transparent);
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--rl-text-primary);
}
.rl-result-banner {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 13px;
  border: 1px solid var(--rl-border);
}
.rl-clear-link {
  font-size: 13px;
  color: var(--rl-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.rl-clear-link:hover {
  color: var(--rl-text-primary);
}
.rl-side-panel-lg {
  max-width: 42rem;
}
.rl-content-box {
  border-radius: 0.5rem;
  background: var(--rl-bg-overlay);
  border: 1px solid var(--rl-border);
  padding: 1rem;
}
.rl-content-pre {
  font-size: 12px;
  color: var(--rl-text-muted);
  background: var(--rl-bg-overlay);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow: auto;
}
.rl-danger-btn-inline {
  font-size: 13px;
  color: var(--rl-error);
  border: 1px solid var(--rl-border);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  cursor: pointer;
}
.rl-danger-btn-inline:hover {
  background: color-mix(in srgb, var(--rl-error) 10%, transparent);
}
.rl-hover-underline:hover { text-decoration: underline; }
.rl-btn-gradient {
  width: 100%;
  padding: 0.625rem 1rem;
  background: linear-gradient(to right, #06b6d4, #2563eb);
  /* Always white — the gradient is dark in both themes (was --rl-text-heading,
     which is near-black in light mode and unreadable). */
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}
.rl-btn-gradient:disabled {
  opacity: 0.5;
}
.rl-check-badge {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(249, 115, 22, 0.15);
}
.rl-check-col { width: 32px; text-align: center; }


/* ── Skeletons + landing/pricing converged from ThreatWatch (Phase D1) ── */
.rl-show-mobile {
  display: flex;
}
@media (min-width: 1024px) {
  .rl-show-mobile {
    display: none;
  }
}
/* Complement of rl-show-mobile: hidden below 1024px, shown at/above it. Lets a
   page render a mobile card stack (rl-show-mobile) vs a desktop table. */
.rl-hide-mobile {
  display: none;
}
@media (min-width: 1024px) {
  .rl-hide-mobile {
    display: block;
  }
}
.rl-save-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--rl-accent);
  background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}
.rl-plan-btn {
  border-radius: 0.75rem;
  border: 1px solid var(--rl-border);
  padding: 0.625rem 0.75rem;
  text-align: left;
  transition: all 0.15s;
  cursor: pointer;
  background: transparent;
}
.rl-plan-btn:hover {
  border-color: color-mix(in srgb, var(--rl-accent) 50%, transparent);
}
.rl-plan-btn--active {
  border-color: var(--rl-accent);
  background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
}
.rl-plan-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 0.125rem;
}
.rl-plan-price {
  font-size: 13px;
  font-weight: 700;
}
.rl-section-card {
  border-top: 1px solid var(--rl-border);
  border-bottom: 1px solid var(--rl-border);
  background: var(--rl-bg-card);
}
.rl-section-base {
  background: var(--rl-bg-base);
}
.rl-feature-tile {
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
}
.rl-step-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1rem;
  background: var(--rl-brand-gradient);
  color: var(--rl-text-on-brand);
}
.rl-sources-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .rl-sources-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rl-sources-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.rl-price-card {
  position: relative;
}
.rl-price-card--popular {
  box-shadow: inset 0 0 0 1px var(--rl-accent);
  padding-top: 2rem;
}
.rl-price-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rl-hero-pad {
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.rl-sec-pad {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.rl-feature-card {
  transition: border-color 0.15s;
}
.rl-feature-card:hover {
  border-color: color-mix(in srgb, var(--rl-accent) 40%, transparent);
}
.rl-pricing-card {
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--rl-border);
  padding: 2rem;
  background: var(--rl-bg-overlay);
}
.rl-pricing-card--popular {
  border-color: color-mix(in srgb, var(--rl-accent) 40%, transparent);
  background: color-mix(in srgb, var(--rl-accent) 5%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rl-accent) 20%, transparent);
  transform: scale(1.02);
}
.rl-price-big {
  font-size: 2.25rem;
  font-weight: 800;
}
.rl-price-original {
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.7;
}
.rl-contract-row {
  transition: opacity 0.15s;
}
.rl-contract-row--off {
  opacity: 0.4;
  pointer-events: none;
}
.rl-contract-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  transition: color 0.15s;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--rl-text-muted);
}
.rl-contract-btn:hover {
  color: var(--rl-text-secondary);
}
.rl-contract-btn--active {
  background: var(--rl-bg-overlay);
  color: var(--rl-accent);
  border: 1px solid var(--rl-border);
}
.rl-plan-cta {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: all 0.15s;
}
.rl-plan-cta:disabled {
  opacity: 0.5;
}
.rl-plan-cta--gradient {
  background: linear-gradient(to right, #06b6d4, #2563eb);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.25);
}
.rl-plan-cta--gradient:hover {
  background: linear-gradient(to right, #22d3ee, #3b82f6);
}
.rl-plan-cta--current {
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-accent);
  color: var(--rl-accent);
}
.rl-discount-pill {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 12px;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}
.rl-pricing-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin-top: -2rem;
}
.rl-spinner-ring {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--rl-accent);
  border-top-color: transparent;
  border-radius: 9999px;
}
.rl-quick-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--rl-text-muted);
  transition: color 0.15s;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.rl-quick-link:hover {
  color: var(--rl-text-heading);
}
.rl-skel {
  height: 6rem;
  background: var(--rl-bg-overlay);
  border-radius: 0.75rem;
}
.rl-skel-sm {
  height: 5rem;
  background: var(--rl-bg-overlay);
  border-radius: 0.75rem;
}
.rl-skel-line {
  height: 2rem;
  background: var(--rl-bg-overlay);
  border-radius: 0.375rem;
  width: 12rem;
  margin-bottom: 1.5rem;
}
.rl-skel-lg {
  height: 8rem;
  background: var(--rl-bg-overlay);
  border-radius: 0.75rem;
}
.rl-plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--rl-bg-overlay);
}
.rl-plan-card--current {
  border-color: color-mix(in srgb, var(--rl-success) 55%, transparent);
  background: color-mix(in srgb, var(--rl-success) 6%, transparent);
}
.rl-plan-features {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}
.rl-plan-features li {
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
}
.rl-skel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.rl-skel-grid--2 { grid-template-columns: 1fr 1fr; }
.rl-skel-card { height: 84px; border-radius: 0.75rem; background: var(--rl-bg-overlay); }
.rl-skel-panel { height: 220px; border-radius: 0.75rem; background: var(--rl-bg-overlay); }
.rl-skel-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rl-skel-pill { height: 28px; width: 120px; border-radius: 999px; background: var(--rl-bg-overlay); }
@media (max-width: 720px) {
  .rl-skel-grid, .rl-skel-grid--2 { grid-template-columns: 1fr 1fr; }
}
.rl-eyebrow-label {
  color: var(--rl-text-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.rl-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rl-feature-li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
@media print {
  .rl-noprint { display: none !important; }

  /* Print ONLY the report document. When a `.rl-report` is on the page, hide
     everything (app header, left nav, tabs, the action toolbar, page chrome)
     and re-show just the report card — app-agnostic, so every app's report
     prints identically and exactly as rendered (charts included). Scoped via
     :has() so non-report pages still print normally. */
  body:has(.rl-report) * {
    visibility: hidden !important;
  }
  body:has(.rl-report) .rl-report,
  body:has(.rl-report) .rl-report * {
    visibility: visible !important;
  }
  body:has(.rl-report) .rl-report {
    position: absolute !important;
    left: 0;
    top: 0;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    /* Force the navy letterhead + chart colors to actually print. */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ── Brand decoration converged from ThreatWatch (Phase D2) ── */
.rl-orb { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(120px); background: color-mix(in srgb, var(--rl-accent) 15%, transparent); }
.rl-orb--hero { width: 24rem; height: 24rem; }
.rl-orb-lg { width: 500px; height: 500px; opacity: 0.2; }
.rl-orb-md { width: 400px; height: 400px; opacity: 0.15; }
.rl-pulse-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: var(--rl-error); }
.rl-dot-amber { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: #f97316; }
.rl-dot-teal { width: 0.375rem; height: 0.375rem; border-radius: 9999px; background: var(--rl-brand-teal, var(--rl-accent)); }
.rl-text-amber { color: #f97316; }
.rl-text-accent2 { color: var(--rl-accent); }
.rl-relative-clip { position: relative; overflow: hidden; }

/* rl-fs-4xl responsive (carried from ThreatWatch tw-fs-4xl @media) */
@media (min-width: 768px) { .rl-fs-4xl { font-size: 3rem; } }

/* ── Dashboard panel / report / notification primitives (regression fix 2026-06-09) ──
   .rl-panel was referenced by .rl-panel-interactive/--accent but never defined (lost in
   the tw-* convergence); .rl-report and the notification-page card were also missing. */
.rl-panel {
  background: var(--rl-bg-card);
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  padding: 1.25rem;
}
.rl-panel-card { /* alias kept for callers that used the -card variant */
  background: var(--rl-bg-card);
  border: 1px solid var(--rl-border);
  border-radius: 1rem;
  padding: 1.25rem;
}
.rl-panel-lg { padding: 1.5rem; }

/* Report view = a white "paper" document, in BOTH light and dark mode (like the PDF /
   print output). It's a self-contained light island: the body colors are baked for a
   light background, so we pin the theme text/surface vars to their light values here —
   otherwise dark-mode tokens render dark-on-dark / light-on-white. The dark letterhead
   (.rl-report-head) uses its own hard-coded colors, so it's unaffected. */
.rl-report {
  max-width: 60rem;
  margin: 1.5rem auto;
  padding: 2.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  color: #0f172a;
  --rl-text-heading: #0f172a;
  --rl-text-primary: #1e293b;
  --rl-text-secondary: #334155;
  --rl-text-muted: #64748b;
  --rl-text-faint: #94a3b8;
  --rl-border: #e2e8f0;
  --rl-bg-card: #ffffff;
  --rl-bg-overlay: #f8fafc;
  --rl-surface: #f8fafc;
}

/* Notification-page list item (distinct from the compact .rl-notif bell row) */
.rl-notif-card {
  position: relative;
  background: var(--rl-bg-card);
  border: 1px solid var(--rl-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  transition: background-color 0.15s, border-color 0.15s;
}
.rl-notif-card:hover { border-color: color-mix(in srgb, var(--rl-accent) 35%, transparent); }
.rl-notif-card--read { opacity: 0.6; }
.rl-notif-card--unread { border-left: 3px solid var(--rl-accent); }

/* Restore .rl-empty + .rl-pill base rules (also lost to the false-dup convergence) */
.rl-empty {
  text-align: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
  color: var(--rl-text-muted);
}
.rl-pill {
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  border-radius: 0.5rem;
  border: 1px solid var(--rl-border);
  color: var(--rl-text-muted);
  transition: color 0.15s;
  background: transparent;
  cursor: pointer;
}

/* ── FilterBar (.rl-toolbar) selects: match the 13px filter/search text + align height
   (scoped to the toolbar so standalone form selects keep their 14px) ── */
.rl-toolbar .rl-select,
.rl-toolbar select.rl-input,
.rl-toolbar select {
  font-size: 0.8125rem;
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 2rem;
}

/* ── Burndown: app-markup classes that were undefined (CSS regression test, 2026-06-10) ── */
/* Headings (sentinelops forensics, rogueone launchpad) */
.rl-h1, .rl-heading-1 { font-size: 1.5rem; font-weight: 700; color: var(--rl-text-heading); line-height: 1.2; }
.rl-h2 { font-size: 1.125rem; font-weight: 600; color: var(--rl-text-heading); line-height: 1.3; }
/* Vertical stacks (phishguard/cloudposture) */
.rl-stack-gap-lg { display: flex; flex-direction: column; gap: 1.5rem; }
.rl-stack-gap-sm { display: flex; flex-direction: column; gap: 0.75rem; }
/* Badge / status / avatar tone variants (extend existing rl-badge/rl-status/rl-avatar bases) */
.rl-badge-info { background: color-mix(in srgb, var(--rl-info, #3b82f6) 15%, transparent); border: 1px solid color-mix(in srgb, var(--rl-info, #3b82f6) 35%, transparent); color: var(--rl-info, #3b82f6); }
.rl-status-pending { background: color-mix(in srgb, var(--rl-warning) 12%, transparent); border-color: color-mix(in srgb, var(--rl-warning) 40%, transparent); color: var(--rl-warning); }
.rl-status-completed { background: color-mix(in srgb, var(--rl-success) 12%, transparent); border-color: color-mix(in srgb, var(--rl-success) 40%, transparent); color: var(--rl-success); }
.rl-avatar-green { background: color-mix(in srgb, var(--rl-success) 18%, transparent); color: var(--rl-success); }
/* Utilities + small components (cleartrust dashboards) */
.rl-border-r { border-right: 1px solid var(--rl-border); }
.rl-link-small { font-size: 0.8125rem; color: var(--rl-accent); text-decoration: none; }
.rl-link-small:hover { text-decoration: underline; }
.rl-loading { padding: 3rem 1rem; text-align: center; color: var(--rl-text-muted); font-size: 0.875rem; }
.rl-page-wrapper { padding: 1.5rem; width: 100%; max-width: 80rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 1.5rem; }
.rl-page-header-centered { text-align: center; margin-bottom: 1.5rem; }
.rl-two-col { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .rl-two-col { grid-template-columns: 1fr 1fr; } }
.rl-tab-group { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--rl-bg-subtle); border-radius: 0.625rem; }
.rl-doc-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--rl-bg-subtle); }
/* Compliance score bar (cleartrust cmmc) */
.rl-tsc-bar-track { width: 100%; height: 0.5rem; background: var(--rl-bg-subtle); border-radius: 9999px; overflow: hidden; }
.rl-tsc-bar-fill { height: 100%; background: var(--rl-accent); border-radius: 9999px; transition: width 0.3s ease; }

/* ── Rendered-markdown prose (chat/assistant output, etc.) ── */
.rl-prose { font-size: 0.875rem; line-height: 1.6; color: var(--rl-text-primary); }
.rl-prose > :first-child { margin-top: 0; }
.rl-prose > :last-child { margin-bottom: 0; }
.rl-prose h1, .rl-prose h2, .rl-prose h3, .rl-prose h4 { color: var(--rl-text-heading); font-weight: 700; line-height: 1.25; margin: 1.1em 0 0.5em; }
.rl-prose h1 { font-size: 1.35rem; }
.rl-prose h2 { font-size: 1.2rem; }
.rl-prose h3 { font-size: 1.05rem; }
.rl-prose h4 { font-size: 0.95rem; }
.rl-prose p { margin: 0.5em 0; }
.rl-prose ul, .rl-prose ol { margin: 0.5em 0; padding-left: 1.4em; }
.rl-prose ul { list-style: disc; }
.rl-prose ol { list-style: decimal; }
.rl-prose li { margin: 0.2em 0; }
.rl-prose a { color: var(--rl-accent); text-decoration: underline; }
.rl-prose strong { color: var(--rl-text-heading); font-weight: 700; }
.rl-prose em { font-style: italic; }
.rl-prose code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85em; background: var(--rl-bg-subtle); padding: 0.1em 0.35em; border-radius: 0.25rem; }
.rl-prose pre { background: var(--rl-bg-subtle); border: 1px solid var(--rl-border); border-radius: 0.5rem; padding: 0.75rem 1rem; overflow-x: auto; margin: 0.6em 0; }
.rl-prose pre code { background: none; padding: 0; font-size: 0.8125rem; }
.rl-prose hr { border: none; border-top: 1px solid var(--rl-border); margin: 1em 0; }
.rl-prose blockquote { border-left: 3px solid var(--rl-border); padding-left: 0.85rem; color: var(--rl-text-muted); margin: 0.6em 0; }
.rl-prose table { border-collapse: collapse; margin: 0.6em 0; font-size: 0.8125rem; display: block; overflow-x: auto; }
.rl-prose th, .rl-prose td { border: 1px solid var(--rl-border); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.rl-prose th { background: var(--rl-bg-subtle); color: var(--rl-text-heading); font-weight: 600; white-space: nowrap; }

/* ── Report chrome (letterhead + body) — SHARED so reports look identical across apps.
   Pair with the .rl-report container + the @react-pdf ReportLetterhead (same dark theme). ── */
.rl-report-card {
  border-radius: 1rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-overlay);
  padding: 1.25rem;
  cursor: pointer;
  transition: background-color 0.15s;
}
.rl-report-card:hover { background: color-mix(in srgb, var(--rl-surface) 8%, transparent); }
.rl-report-card:hover .rl-report-del { opacity: 1; }
.rl-report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #0f2147 0%, #0b1733 100%);
  border-bottom: 3px solid #22d3ee;
  border-radius: 12px;
}
.rl-report-headL { display: flex; flex-direction: column; max-width: 68%; }
.rl-report-headR { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rl-report-title { font-size: 22px; font-weight: 700; color: #f8fafc; margin: 0; line-height: 1.2; }
.rl-report-brand { font-size: 12px; font-weight: 700; color: #38bdf8; margin-top: 4px; letter-spacing: 0.02em; }
.rl-report-sub { font-size: 12px; color: #cbd5e1; margin-top: 2px; }
.rl-report-logo { height: 40px; width: auto; max-width: 190px; object-fit: contain; display: block; margin-bottom: 8px; background: #fff; padding: 6px 10px; border-radius: 8px; }
.rl-report-org { font-size: 13px; font-weight: 700; color: #f1f5f9; }
.rl-report-conf { font-weight: 700; letter-spacing: 0.12em; font-size: 10px; color: #f87171; margin-top: 4px; }
.rl-report-actions { display: flex; gap: 0.5rem; padding: 1rem 0 0; }
.rl-report-sec { padding: 1.25rem 0 0; }
.rl-report-sec h2 {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: #475569;
  margin: 0 0 0.6rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.35rem;
}
.rl-report-para { font-size: 13px; line-height: 1.6; color: #334155; margin: 0 0 0.6rem; }
.rl-report-note { font-size: 11px; color: #64748b; font-style: italic; margin: 0 0 0.5rem; }
.rl-report-barrow { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; }
.rl-report-barlabel { width: 130px; color: #475569; text-transform: capitalize; flex-shrink: 0; }
.rl-report-bartrack { flex: 1; height: 12px; background: #f1f5f9; border-radius: 6px; overflow: hidden; }
.rl-report-barfill { display: block; height: 100%; border-radius: 6px; }
.rl-report-barval { width: 32px; text-align: right; color: #0f172a; font-weight: 600; flex-shrink: 0; }
.rl-report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.rl-report-kpis { display: flex; flex-wrap: wrap; gap: 1rem; }
.rl-report-kpi {
  flex: 1; min-width: 120px; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 0.85rem 1rem; text-align: center;
}
.rl-report-kpi-num { font-size: 26px; font-weight: 700; color: #0f172a; line-height: 1; }
.rl-report-kpi-label { font-size: 11px; color: #64748b; margin-top: 4px; }
.rl-report-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #334155; }
.rl-report-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #64748b; padding: 6px 8px; border-bottom: 1px solid #e2e8f0;
}
.rl-report-table td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
.rl-report-table--full td:nth-child(2) { color: #0f172a; }
.rl-report-num { text-align: right; font-variant-numeric: tabular-nums; }
.rl-report-mono { font-family: ui-monospace, monospace; font-size: 11.5px; color: #0891b2; }
.rl-report-empty { color: #64748b; text-align: center; padding: 1rem; }
.rl-report-foot {
  padding: 1rem 0 0; margin-top: 1.25rem; font-size: 11px; color: #64748b;
  border-top: 1px solid #e2e8f0; text-align: center;
}

/* ── TLP 2.0 marking chip (top-right of the letterhead, standard black chip).
   Render inside .rl-report-headR, before the logo:
     <span className="rl-report-tlp rl-report-tlp--amber">TLP:AMBER</span>
   Variants: --clear --green --amber --amber-strict --red (TLP 2.0 colors). ── */
.rl-report-tlp {
  display: inline-block;
  align-self: flex-end;
  background: #000;
  color: #fff; /* clear default */
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  white-space: nowrap;
}
.rl-report-tlp--clear { color: #ffffff; }
.rl-report-tlp--green { color: #33ff00; }
.rl-report-tlp--amber,
.rl-report-tlp--amber-strict { color: #ffc000; }
.rl-report-tlp--red { color: #ff2b2b; }

/* ── Print footer (repeats on every printed page) ──
   Markup (inside .rl-report):
     <div className="rl-report-footer">Powered by ThreatWatch — Rogue Logics Corporation | Empowering the Future</div>
   Add the --confidential modifier to center the powered-by line (the header's
   .rl-report-conf block marks the report confidential). Hidden on screen — the
   on-screen footer stays .rl-report-foot. In print it is position:fixed bottom,
   which Chrome repeats on every page. Page numbers come from the @page rl-report
   @bottom-right margin box below (renders in the page MARGIN, outside the content
   area — verified in headless Chromium; the fixed footer itself gets a white
   background so it masks any content that flows under it at a page break). ── */
.rl-report-footer { display: none; }
@media print {
  .rl-report { page: rl-report; }
  .rl-report-footer {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 4px 0 2px;
    font-size: 10px;
    color: #64748b;
    text-align: left;
  }
  .rl-report-footer--confidential { text-align: center; }
}
/* Page numbers in the bottom-right page margin — Chromium 131+ supports @page
   margin boxes + counter(page)/counter(pages); scoped to the rl-report named
   page so non-report prints are unaffected. Older browsers ignore this block. */
@page rl-report {
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 9px;
    color: #64748b;
    font-family: Helvetica, Arial, sans-serif;
  }
}

/* ============================================================================
   MOBILE RESPONSIVE FOUNDATION (2026-06-11)
   ----------------------------------------------------------------------------
   Platform-wide mobile rules for every app's dashboard shell + the rl-* layout
   primitives. Breakpoints: ≤768px = primary mobile, ≤480px = tight phones.
   EVERY rule here is wrapped in `@media screen and (…)` so PRINT styles
   (reports!) are never affected.

   Shell mechanism (the off-canvas nav drawer):
   - Shared Header renders a `.rl-nav-toggle` hamburger (mobile-only; it also
     hides itself on pages with no [data-leftnav], via body:has()).
   - Toggling adds/removes `rl-nav-open` on <body>; Header renders an
     `.rl-nav-backdrop` while open and closes on route change / Escape /
     backdrop tap.
   - CSS contract (apps that own their header can reuse it by toggling the
     same body class):  at ≤768px  [data-leftnav] is position:fixed and
     translated off-canvas;  body.rl-nav-open [data-leftnav] slides in.
   ========================================================================== */

/* Hamburger + backdrop are desktop-hidden at ALL widths by default. */
.rl-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--rl-text-muted);
  cursor: pointer;
}
.rl-nav-toggle:hover {
  background: var(--rl-bg-surface);
  color: var(--rl-text-heading);
}
.rl-nav-backdrop {
  display: none;
}

@media screen and (max-width: 768px) {
  /* ── Shell: off-canvas LeftNav drawer ─────────────────────────────────
     aside[data-leftnav] (0,1,1) outranks the Tailwind w-60/h-full utilities
     the shared LeftNav also carries, regardless of stylesheet order. */
  aside[data-leftnav],
  [data-leftnav] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100dvh;
    width: min(82vw, 300px);
    z-index: 90;
    transform: translateX(-105%);
    visibility: hidden; /* keep the closed drawer out of tab order / a11y tree */
    transition:
      transform 0.22s ease,
      visibility 0.22s;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--rl-sidebar-border);
    overflow: hidden;
  }
  body.rl-nav-open [data-leftnav] {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.35);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-leftnav] {
      transition: none;
    }
  }
  /* Backdrop under the drawer (rendered by shared Header while open). */
  .rl-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(2, 6, 23, 0.55);
  }
  /* Don't scroll the page behind an open drawer. */
  body.rl-nav-open {
    overflow: hidden;
  }
  /* Hamburger: visible only when the page actually has a LeftNav drawer. */
  body:has([data-leftnav]) .rl-nav-toggle {
    display: inline-flex;
  }

  /* ── Header: collapse the action row ──────────────────────────────── */
  .rl-app-header-inner {
    padding: 8px 12px;
    min-height: 56px;
    gap: 8px;
  }
  .rl-app-header-left {
    gap: 8px;
  }
  .rl-app-header-divider,
  .rl-app-header-desc,
  .rl-header-search {
    display: none;
  }
  .rl-app-header-title {
    font-size: 16px;
  }
  /* Center nav (marketing/header links): keep reachable, scroll if long. */
  .rl-app-header-nav {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rl-app-header-nav::-webkit-scrollbar {
    display: none;
  }
  /* User chip collapses to the avatar (name/badge hidden). */
  .rl-user-chip-name,
  .rl-user-chip-badge {
    display: none;
  }
  .rl-user-chip {
    padding: 4px;
    gap: 4px;
  }
  /* Keep the dropdown on-screen on narrow viewports. */
  .rl-user-menu-panel {
    max-width: calc(100vw - 16px);
  }

  /* ── Layout primitives ────────────────────────────────────────────── */
  /* Page padding tightens */
  .rl-page,
  .rl-page-centered,
  .rl-page-boxed,
  .rl-page-boxed-sm,
  .rl-page-wrapper {
    padding: 1rem;
    gap: 1rem;
  }
  /* Dashboard content rows → single column. minmax(0,1fr), NOT bare 1fr:
     with `1fr` the track's auto min-sizing lets wide content (feed rows,
     charts, tables) push the column past the viewport. */
  .rl-grid-cols-2,
  .rl-grid-cols-3,
  .rl-grid-cols-4,
  .rl-grid-2col,
  .rl-two-col,
  .rl-modal-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Same auto-min-sizing fix for grid/flex CHILDREN of the shared layout
     primitives — panels/cards must be allowed to shrink below content width. */
  .rl-grid > *,
  .rl-stats-grid > *,
  .rl-stats-grid-4 > *,
  .rl-stat-grid > * {
    min-width: 0;
  }
  /* Stat/KPI grids → 2-up (they're compact cards); 1-up at ≤480 below */
  .rl-stats-grid,
  .rl-stats-grid-4,
  .rl-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Card padding tightens */
  .rl-card-body {
    padding: 0.875rem 1rem 1rem;
  }
  .rl-card-title {
    padding: 0.875rem 1rem 0;
  }
  .rl-card-pad-lg {
    padding: 1rem;
  }
  .rl-card-center-xl {
    padding: 1.5rem 1rem;
  }
  .rl-card-header,
  .rl-card-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── FilterBar / toolbar ──────────────────────────────────────────── */
  .rl-toolbar,
  .rl-logs-toolbar {
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
  /* Search goes full-width on its own row, above the filters. */
  .rl-toolbar .rl-search-wrap,
  .rl-logs-toolbar .rl-search-wrap {
    flex: 1 1 100%;
    min-width: 0;
    order: -1;
  }
  /* Selects share rows gracefully instead of overflowing. */
  .rl-toolbar .rl-select,
  .rl-toolbar select,
  .rl-filter-bar-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  /* Segmented tabs scroll horizontally instead of wrapping/overflowing. */
  .rl-segmented {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rl-segmented::-webkit-scrollbar {
    display: none;
  }

  /* ── Tables: scroll internally, never the page ────────────────────── */
  .rl-table-wrap,
  .rl-table-scroll,
  .rl-table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Naked tables placed directly in a card (no wrap div): make the table
     itself the scroll container. */
  .rl-card > .rl-table,
  .rl-card > table,
  .rl-card-interactive > .rl-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── Modals: full-width bottom sheet ──────────────────────────────── */
  .rl-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .rl-modal,
  .rl-modal-sm,
  .rl-modal-md,
  .rl-modal-lg,
  .rl-modal-xl {
    max-width: 100%;
    width: 100%;
    max-height: 94dvh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .rl-modal-body {
    max-height: calc(94dvh - 8.5rem);
    padding: 1rem;
  }
  .rl-modal-header,
  .rl-modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Drawers / side panels take the full width. */
  .rl-drawer,
  .rl-drawer-lg {
    max-width: 100%;
  }

  /* ── Reports (screen only — the @media print rules are untouched) ──── */
  .rl-report {
    margin: 0.75rem;
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
  }
  .rl-report-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
  }
  .rl-report-headL {
    max-width: 100%;
  }
  .rl-report-headR {
    align-items: flex-start;
    text-align: left;
  }
  .rl-report-title {
    font-size: 18px;
  }
  .rl-report-cols {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .rl-report-kpis {
    gap: 0.5rem;
  }
  .rl-report-kpi {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
    padding: 0.6rem 0.5rem;
  }
  .rl-report-actions {
    flex-wrap: wrap;
  }
  /* Wide report tables scroll internally. */
  .rl-report .rl-report-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

@media screen and (max-width: 480px) {
  /* Stat/KPI grids stack fully on tight phones. */
  .rl-stats-grid,
  .rl-stats-grid-4,
  .rl-stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rl-page,
  .rl-page-centered,
  .rl-page-boxed,
  .rl-page-boxed-sm,
  .rl-page-wrapper {
    padding: 0.75rem;
  }
  /* Header: drop the lowest-value icons to keep the row on one line.
     (Theme switching stays available ≥481px and on desktop.) */
  .rl-header-theme,
  [data-app-header] a[data-header-icon-btn][title="Home"] {
    display: none;
  }
  .rl-report {
    margin: 0.5rem;
    padding: 1rem 0.75rem;
  }
  .rl-report-kpi {
    flex: 1 1 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   Shared-component Tailwind→rl-* migration (2026-06-12)
   Families for HelpCenter, ArticleLayout, EyebrowPill, Tooltip
   position modifiers, GenerationToast, readiness ProgressBar.
   ════════════════════════════════════════════════════════════════ */

/* ── Help Center ─────────────────────────────────────────────── */
.rl-helpcenter {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.rl-help-search {
  position: relative;
}
.rl-help-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--rl-text-muted);
  pointer-events: none;
  z-index: 1;
}
.rl-help-search-results {
  position: absolute;
  top: 100%;
  margin-top: 0.25rem;
  width: 100%;
  z-index: 20;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.2),
    0 8px 10px -6px rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rl-help-search-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: background 0.15s;
}
.rl-help-search-result:hover {
  background: var(--rl-bg-overlay);
}
.rl-help-pop-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s;
}
.rl-help-pop-link:hover {
  border-color: color-mix(in srgb, var(--rl-accent) 40%, var(--rl-border) 60%);
}
.rl-help-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px solid var(--rl-border);
  margin: 0;
  padding: 0.75rem 0 0 0;
  list-style: none;
}
.rl-help-cat-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--rl-text-primary);
  transition: color 0.15s;
}
.rl-help-cat-link:hover {
  color: var(--rl-accent);
}
.rl-help-viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rl-accent);
  margin-top: 0.25rem;
}
.rl-help-viewall:hover {
  text-decoration: underline;
}
.rl-help-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
}
@media (min-width: 640px) {
  .rl-help-support {
    flex-direction: row;
  }
}

/* ── Help article layout (ArticleLayout) ─────────────────────── */
.rl-article-shell {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}
.rl-article-cols {
  display: flex;
  gap: 2.5rem;
}
.rl-article-main {
  flex: 1;
  min-width: 0;
}
.rl-article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--rl-text-muted);
  margin-bottom: 1.5rem;
}
.rl-article-breadcrumb a {
  color: inherit;
  transition: color 0.15s;
}
.rl-article-breadcrumb a:hover {
  color: var(--rl-accent);
}
.rl-article-sections {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.rl-article-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rl-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) {
  .rl-article-footer {
    flex-direction: row;
    align-items: center;
  }
}
.rl-article-toc {
  display: none;
}
@media (min-width: 1024px) {
  .rl-article-toc {
    display: block;
    width: 14rem;
    flex-shrink: 0;
  }
}
.rl-article-toc-inner {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rl-article-toc-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rl-text-muted);
  margin-bottom: 0.75rem;
}
.rl-article-toc-link {
  display: block;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--rl-text-muted);
  transition:
    color 0.15s,
    background 0.15s;
}
.rl-article-toc-link:hover {
  color: var(--rl-text-primary);
}
.rl-article-toc-link--active {
  color: var(--rl-accent);
  font-weight: 600;
  background: var(--rl-bg-overlay);
}
.rl-article-section {
  scroll-margin-top: 5rem;
}
.rl-article-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rl-border);
}
.rl-article-section-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--rl-text-primary);
}
.rl-article-callout {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--rl-text-primary);
}
.rl-article-callout--tip {
  background: rgba(46, 184, 184, 0.07);
  border: 1px solid rgba(46, 184, 184, 0.25);
}
.rl-article-callout--warning {
  background: rgba(255, 170, 0, 0.07);
  border: 1px solid rgba(255, 170, 0, 0.25);
}
.rl-article-callout-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.rl-article-callout--tip .rl-article-callout-icon {
  color: var(--rl-accent);
}
.rl-article-callout--warning .rl-article-callout-icon {
  color: var(--rl-warning);
}
.rl-article-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rl-article-step {
  display: flex;
  gap: 0.75rem;
}
.rl-article-step-num {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: rgba(46, 184, 184, 0.15);
  color: var(--rl-accent);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Eyebrow pill (readiness landing) ────────────────────────── */
.rl-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right, #ecfeff, #eff6ff, #ecfeff);
  border: 1px solid rgba(103, 232, 249, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: #0e7490;
}
html.dark .rl-eyebrow-pill {
  background: rgba(46, 184, 184, 0.15);
  border-color: rgba(46, 184, 184, 0.3);
  box-shadow: 0 0 12px rgba(46, 184, 184, 0.08);
  color: #2eb8b8;
}

/* ── Tooltip position/visibility modifiers (Tooltip.tsx) ─────── */
.rl-tooltip-body--open {
  opacity: 1;
}
.rl-tooltip-body--bottom {
  bottom: auto;
  top: calc(100% + 6px);
}
.rl-tooltip-body--left {
  bottom: auto;
  left: auto;
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.rl-tooltip-body--right {
  bottom: auto;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}

/* ── Background-generation toasts (GenerationToast) ──────────── */
.rl-toast-stack {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rl-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rl-border);
  background: var(--rl-bg-surface-solid);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
  max-width: 24rem;
  animation: rl-slide-up 0.25s ease;
}
.rl-toast--success {
  border-color: var(--rl-success);
}
.rl-toast--error {
  border-color: var(--rl-error);
}
.rl-toast-badge {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
  color: #fff;
}
.rl-toast-badge--success {
  background: var(--rl-success);
}
.rl-toast-badge--error {
  background: var(--rl-error);
}

/* Job progress panel (shared JobProgress component) */
.rl-job-progress {
  width: 100%;
}
.rl-job-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.rl-job-progress-badge--success {
  background: var(--rl-success);
}
.rl-job-progress-badge--error {
  background: var(--rl-error);
}
@keyframes rl-slide-up {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Readiness progress (Progress.tsx / SectionBar.tsx) ──────── */
.rl-progress-track-lg {
  position: relative;
  width: 100%;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--rl-bg-elevated);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.rl-progress-fill-brand {
  position: relative;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, #06b6d4, #0891b2, #2563eb);
  transition: width 0.7s ease;
  overflow: hidden;
}
.rl-progress-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}
.rl-circular-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rl-circular-glow {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(
    to bottom right,
    rgba(6, 182, 212, 0.1),
    rgba(59, 130, 246, 0.1)
  );
  filter: blur(40px);
}

/* ── Billing cards (components/billing/*) ────────────────────── */
.rl-billing-featured {
  border-color: var(--rl-accent);
  box-shadow: 0 0 0 1px var(--rl-accent);
}
.rl-billing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── LeftNav sidebar shell (was relying on unstyled Tailwind w-60/flex/
   border-r in consuming apps; now a real class — resolves the
   check-shared-classes rl-sidebar baseline) ──────────────────── */
.rl-sidebar {
  width: 15rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid var(--rl-sidebar-border);
}

/* ── Password strength meter (PasswordStrength.tsx) ──────────── */
.rl-pwstrength {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rl-pwstrength-bar {
  display: flex;
  gap: 0.25rem;
}
.rl-pwstrength-seg {
  height: 0.375rem;
  flex: 1;
  border-radius: 9999px;
  background: var(--rl-bg-elevated);
  transition: background 0.2s;
}
.rl-pwstrength-seg--weak {
  background: var(--rl-error);
}
.rl-pwstrength-seg--fair {
  background: var(--rl-warning);
}
.rl-pwstrength-seg--good {
  background: var(--rl-success);
}
.rl-pwstrength-reqs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rl-pwstrength-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.125rem 0.75rem;
  padding-left: 0.75rem;
  margin-top: 0.25rem;
}

/* ══ the-bridge Tailwind→rl-* migration utilities (2026-06-13) ══
   Generic utilities the-bridge needed; platform-wide reusable. */
.rl-break-all { word-break: break-all; }
.rl-col-span-full { grid-column: 1 / -1; }
.rl-cursor-pointer { cursor: pointer; }
.rl-font-extrabold { font-weight: 800; }
.rl-gap-10 { gap: 2.5rem; }
.rl-gap-12 { gap: 3rem; }
/* .rl-grid-cols-1 moved up to the base grid-cols block (before the responsive
   media queries) so rl-grid-{sm,md,lg}-N overrides win above their breakpoints. */
.rl-h-1-5 { height: 0.375rem; }
.rl-h-11 { height: 2.75rem; }
.rl-h-12 { height: 3rem; }
.rl-h-2 { height: 0.5rem; }
.rl-h-2-5 { height: 0.625rem; }
.rl-h-3 { height: 0.75rem; }
.rl-h-3-5 { height: 0.875rem; }
.rl-h-4 { height: 1rem; }
.rl-h-44 { height: 11rem; }
.rl-h-5 { height: 1.25rem; }
.rl-h-6 { height: 1.5rem; }
.rl-h-7 { height: 1.75rem; }
.rl-h-8 { height: 2rem; }
.rl-h-9 { height: 2.25rem; }
.rl-h-full { height: 100%; }
.rl-inline-block { display: inline-block; }
.rl-italic { font-style: italic; }
.rl-justify-end { justify-content: flex-end; }
.rl-list-disc { list-style-type: disc; }
.rl-list-inside { list-style-position: inside; }
.rl-m-4 { margin: 1rem; }
.rl-max-h-32 { max-height: 8rem; overflow: auto; }
.rl-max-h-96 { max-height: 24rem; overflow: auto; }
.rl-mb-14 { margin-bottom: 3.5rem; }
.rl-mt-1-5 { margin-top: 0.375rem; }
.rl-opacity-25 { opacity: 0.25; }
.rl-opacity-40 { opacity: 0.4; }
.rl-opacity-70 { opacity: 0.7; }
.rl-opacity-75 { opacity: 0.75; }
.rl-overflow-x-auto { overflow-x: auto; }
.rl-p-0 { padding: 0; }
.rl-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.rl-px-1-5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.rl-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.rl-px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.rl-py-1-5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.rl-py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.rl-py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.rl-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.rl-relative { position: relative; }
.rl-rounded { border-radius: 0.25rem; }
.rl-select-none { user-select: none; }
.rl-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.25), 0 4px 6px -4px rgba(0,0,0,.25); }
.rl-space-y-0-5 > * + * { margin-top: 0.125rem; }
.rl-space-y-1 > * + * { margin-top: 0.25rem; }
.rl-space-y-2 > * + * { margin-top: 0.5rem; }
.rl-space-y-2-5 > * + * { margin-top: 0.625rem; }
.rl-space-y-3 > * + * { margin-top: 0.75rem; }
.rl-space-y-4 > * + * { margin-top: 1rem; }
.rl-space-y-5 > * + * { margin-top: 1.25rem; }
.rl-space-y-6 > * + * { margin-top: 1.5rem; }
.rl-text-2xl { font-size: 1.5rem; }
.rl-text-3xl { font-size: 1.875rem; }
.rl-text-4xl { font-size: 2.25rem; }
.rl-text-base { font-size: 1rem; }
.rl-text-xl { font-size: 1.25rem; }
.rl-tracking-wide { letter-spacing: 0.025em; }
.rl-tracking-wider { letter-spacing: 0.05em; }
.rl-transition { transition: all .15s; }
.rl-transition-all { transition: all .15s; }
.rl-transition-colors { transition: color .15s, background-color .15s, border-color .15s; }
.rl-w-1-5 { width: 0.375rem; }
.rl-w-11 { width: 2.75rem; }
.rl-w-12 { width: 3rem; }
.rl-w-2 { width: 0.5rem; }
.rl-w-2-5 { width: 0.625rem; }
.rl-w-3 { width: 0.75rem; }
.rl-w-3-5 { width: 0.875rem; }
.rl-w-4 { width: 1rem; }
.rl-w-44 { width: 11rem; }
.rl-w-5 { width: 1.25rem; }
.rl-w-6 { width: 1.5rem; }
.rl-w-64 { width: 16rem; }
.rl-w-7 { width: 1.75rem; }
.rl-w-9 { width: 2.25rem; }
.rl-disabled-dim:disabled{opacity:.5;cursor:not-allowed;}
@media (min-width:1280px){.rl-grid-xl-3{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1536px){.rl-grid-2xl-4{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:640px){.rl-grid-sm-6{grid-template-columns:repeat(6,minmax(0,1fr));}}
@media (min-width:1024px){.rl-lg-flex-row{flex-direction:row;}}
@media (min-width:1024px){.rl-lg-text-left{text-align:left;}}
@media (min-width:1024px){.rl-grid-lg-6{grid-template-columns:repeat(6,minmax(0,1fr));}}
@media (min-width:1024px){.rl-lg-block{display:block;}}
@media (min-width:768px){.rl-md-p-10{padding:2.5rem;}}
.rl-focus-none:focus{outline:none;}
/* the-bridge migration: border tones + maxw-sm + a few pre-existing
   undefined the-bridge classes (were unstyled before). */
.rl-border-error { border-color: var(--rl-error); }
.rl-border-success { border-color: var(--rl-success); }
/* Purple escalation/premium tier (matches the existing .rl-text-purple #a855f7). */
.rl-bg-purple-subtle { background: color-mix(in srgb, #a855f7 10%, transparent); }
.rl-border-purple { border-color: #a855f7; }
.rl-maxw-sm { max-width: 24rem; }
.rl-stat-card-gray { border-top-color: var(--rl-text-muted); }
.rl-text-strong { font-weight: 600; color: var(--rl-text-heading); }
.rl-stat-link { color: var(--rl-accent); font-weight: 500; }
.rl-stat-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
   Base reset for apps that DON'T import Tailwind (preflight replacement).
   Gated to `<html data-rl-reset>` so it only affects opted-in apps (currently
   the-bridge) — the 8+ apps still importing Tailwind already get its preflight
   and must NOT be touched. Kept in a low-priority @layer so it never outranks
   the unlayered rl-* utilities (layered always loses to unlayered), exactly
   like Tailwind's own preflight sits under its utilities.
   When an app drops Tailwind: add `data-rl-reset` to its <html> — nothing else.
   ════════════════════════════════════════════════════════════════════════ */
@layer rl-reset {
  html[data-rl-reset] *,
  html[data-rl-reset] *::before,
  html[data-rl-reset] *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html[data-rl-reset] {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    /* the-bridge has no next/font, so the shared body rule's var(--font-inter)
       invalidates when unset → without this, text falls back to the browser
       serif default. Provide the base sans stack (what Tailwind preflight did). */
    font-family:
      "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  html[data-rl-reset] body {
    line-height: inherit;
  }
  html[data-rl-reset] hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  html[data-rl-reset] h1,
  html[data-rl-reset] h2,
  html[data-rl-reset] h3,
  html[data-rl-reset] h4,
  html[data-rl-reset] h5,
  html[data-rl-reset] h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  html[data-rl-reset] a {
    color: inherit;
    text-decoration: inherit;
  }
  html[data-rl-reset] b,
  html[data-rl-reset] strong {
    font-weight: bolder;
  }
  html[data-rl-reset] code,
  html[data-rl-reset] kbd,
  html[data-rl-reset] samp,
  html[data-rl-reset] pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1em;
  }
  html[data-rl-reset] small {
    font-size: 80%;
  }
  html[data-rl-reset] table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  html[data-rl-reset] button,
  html[data-rl-reset] input,
  html[data-rl-reset] optgroup,
  html[data-rl-reset] select,
  html[data-rl-reset] textarea {
    font: inherit;
    color: inherit;
    background: transparent;
  }
  html[data-rl-reset] button,
  html[data-rl-reset] [type="button"],
  html[data-rl-reset] [type="reset"],
  html[data-rl-reset] [type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
  }
  html[data-rl-reset] :disabled {
    cursor: default;
  }
  html[data-rl-reset] ol,
  html[data-rl-reset] ul,
  html[data-rl-reset] menu {
    list-style: none;
  }
  html[data-rl-reset] img,
  html[data-rl-reset] svg,
  html[data-rl-reset] video,
  html[data-rl-reset] canvas,
  html[data-rl-reset] audio,
  html[data-rl-reset] iframe,
  html[data-rl-reset] embed,
  html[data-rl-reset] object {
    display: block;
    vertical-align: middle;
  }
  html[data-rl-reset] img,
  html[data-rl-reset] video {
    max-width: 100%;
    height: auto;
  }
  html[data-rl-reset] [hidden] {
    display: none;
  }
  html[data-rl-reset] ::placeholder {
    opacity: 1;
    color: color-mix(in srgb, currentColor 50%, transparent);
  }
  html[data-rl-reset] textarea {
    resize: vertical;
  }
}

/* cloudposture Tailwind→rl-* migration: utility classes (auto-derived) */
.rl-absolute { position: absolute; }
.rl-bottom-n24 { bottom: -6rem; }
.rl-focus-border-accent:focus{border-color:var(--rl-accent);}
.rl-h-16 { height: 4rem; }
.rl-h-32 { height: 8rem; }
.rl-h-400px { height: 400px; }
.rl-h-500px { height: 500px; }
.rl-h-screen { height: 100vh; }
.rl-inset-y-0 { top: 0; bottom: 0; }
.rl-left-half { left: 50%; }
.rl-left-n24 { left: -6rem; }
.rl-left-n32 { left: -8rem; }
@media (min-width:1024px){.rl-lg-hidden{display:none;}}
@media (min-width:1024px){.rl-lg-justify-start{justify-content:flex-start;}}
.rl-line-through { text-decoration: line-through; }
.rl-maxw-6xl { max-width: 72rem; }
.rl-mb-0-5 { margin-bottom: 0.125rem; }
.rl-min-h-below-header { min-height: calc(100vh - 98px); }
.rl-opacity-15 { opacity: 0.15; }
.rl-opacity-20 { opacity: 0.2; }
.rl-pr-10 { padding-right: 2.5rem; }
.rl-pt-4 { padding-top: 1rem; }
.rl-pt-6 { padding-top: 1.5rem; }
.rl-py-2-5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.rl-right-3 { right: 0.75rem; }
.rl-right-n24 { right: -6rem; }
.rl-right-n32 { right: -8rem; }
.rl-self-end { align-self: flex-end; }
.rl-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }
.rl-top-0 { top: 0; }
.rl-top-n32 { top: -8rem; }
.rl-translate-center { transform: translate(-50%, -50%); }
.rl-w-16 { width: 4rem; }
.rl-w-400px { width: 400px; }
.rl-w-500px { width: 500px; }

/* phishguard Tailwind→rl-* migration: utility classes (auto-derived) */
.rl-list-decimal { list-style-type: decimal; }
.rl-ml-0 { margin-left: 0; }
.rl-pl-0 { padding-left: 0; }
.rl-pl-5 { padding-left: 1.25rem; }
.rl-select-all { user-select: all; }

/* forgeguard Tailwind→rl-* migration: utility classes (auto-derived) */
.rl-backdrop-blur-sm { backdrop-filter: blur(4px); }
.rl-fixed { position: fixed; }
.rl-inset-0 { inset: 0; }
.rl-items-end { align-items: flex-end; }
.rl-maxw-full { max-width: 100%; }
.rl-p-1 { padding: 0.25rem; }
.rl-w-fit { width: fit-content; }
.rl-z50 { z-index: 50; }

/* rogueone Tailwind→rl-* migration utilities */
.rl-border-2 { border-width: 2px; }
.rl-border-4 { border-width: 4px; }
.rl-border-t-transparent { border-top-color: transparent; }
.rl-duration-1000 { transition-duration: 1000ms; }
.rl-duration-700 { transition-duration: 700ms; }
.rl-flex-grow { flex-grow: 1; }
.rl-h-14 { height: 3.5rem; }
.rl-items-baseline { align-items: baseline; }
.rl-maxw-lg { max-width: 32rem; }
.rl-minw-200px { min-width: 200px; }
.rl-mt-auto { margin-top: auto; }
.rl-pb-12 { padding-bottom: 3rem; }
.rl-pb-3 { padding-bottom: 0.75rem; }
.rl-pb-6 { padding-bottom: 1.5rem; }
.rl-pt-2 { padding-top: 0.5rem; }
.rl-pt-8 { padding-top: 2rem; }
.rl-px-8 { padding-left: 2rem; padding-right: 2rem; }
.rl-py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.rl-rotate-n90 { transform: rotate(-90deg); }
.rl-shadow { box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rl-space-x-6 > * + * { margin-left: 1.5rem; }
.rl-space-y-1-5 > * + * { margin-top: 0.375rem; }
.rl-space-y-8 > * + * { margin-top: 2rem; }
.rl-text-10px { font-size: 10px; }
.rl-text-9px { font-size: 9px; }
.rl-top-n24 { top: -6rem; }
.rl-tracking-widest { letter-spacing: 0.1em; }
.rl-transition-transform { transition: transform .15s; }
.rl-w-10 { width: 2.5rem; }
.rl-w-14 { width: 3.5rem; }
@media (min-width:640px){.rl-grid-sm-5{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (min-width:640px){.rl-sm-flex-row{flex-direction:row;}}
@media (min-width:640px){.rl-sm-items-center{align-items:center;}}
@media (min-width:640px){.rl-sm-items-start{align-items:flex-start;}}
.rl-hover-text-muted:hover{color:var(--rl-text-muted);}
@media (min-width:768px){.rl-md-p-12{padding:3rem;}}

/* rogueone migration: a few more utilities */
.rl-border-warning { border-color: var(--rl-warning); }
.rl-tracking-05em { letter-spacing: 0.5em; }
.rl-page-break-after { break-after: page; }
@media print { .rl-print-page-break-after { break-after: page; } }
.rl-md-grid-220-1fr { }
@media (min-width:768px){ .rl-md-grid-220-1fr { grid-template-columns: 220px 1fr; } }

/* commandshield migration utilities */
.rl-gap-8 { gap: 2rem; }
.rl-h-10 { height: 2.5rem; }
.rl-h-64 { height: 16rem; }
.rl-max-h-48 { max-height: 12rem; overflow: auto; }
.rl-mb-20 { margin-bottom: 5rem; }
.rl-ml-3 { margin-left: 0.75rem; }
.rl-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.rl-pb-16 { padding-bottom: 4rem; }
.rl-pb-20 { padding-bottom: 5rem; }
.rl-pt-24 { padding-top: 6rem; }
.rl-pt-3 { padding-top: 0.75rem; }
.rl-pt-5 { padding-top: 1.25rem; }
.rl-py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.rl-sticky { position: sticky; }
.rl-w-24 { width: 6rem; }
.rl-whitespace-nowrap { white-space: nowrap; }
.rl-z40 { z-index: 40; }
.rl-placeholder-muted::placeholder{color:var(--rl-text-muted);}
@media (min-width:1024px){.rl-lg-col-span-3{grid-column:span 3;}}
.rl-hover-border-accent:hover{border-color:var(--rl-accent);}
.rl-resize-none { resize: none; }
.rl-w-auto { width: auto; }
.rl-border-y { border-top-width: 1px; border-bottom-width: 1px; }
.rl-accent-color { accent-color: var(--rl-accent); }
.rl-minh-60px { min-height: 60px; }
.rl-minh-80px { min-height: 80px; }
.rl-minh-100px { min-height: 100px; }
.rl-top-0-5 { top: 0.125rem; }
.rl-left-0-5 { left: 0.125rem; }
.rl-w-third { width: 33.333%; }
.rl-bg-brand-teal { background: var(--rl-brand-teal); }
.rl-last-border-0:last-child { border-width: 0; }
/* commandshield round-2 utilities */

/* commandshield r3 */

.rl-hover-bg-accent:hover { background: var(--rl-accent-subtle, rgba(46,184,184,0.15)); }
/* fractional widths (Skeleton placeholders) */
.rl-w-1-2 { width: 50%; } .rl-w-1-3 { width: 33.333%; } .rl-w-2-3 { width: 66.667%; }
.rl-w-1-4 { width: 25%; } .rl-w-3-4 { width: 75%; } .rl-w-4-5 { width: 80%; } .rl-w-5-6 { width: 83.333%; } .rl-w-2-5 { width: 40%; }
/* forgeguard r2 */
.rl-w-20 { width: 5rem; }
/* rogueone r2 */

/* breachlens */
.rl-h-20 { height: 5rem; }
.rl-h-24 { height: 6rem; }
.rl-h-36 { height: 9rem; }
.rl-minw-70px { min-width: 70px; }
.rl-mr-3 { margin-right: 0.75rem; }
.rl-p-7 { padding: 1.75rem; }
.rl-px-2-5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.rl-py-3-5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.rl-shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.2), 0 2px 4px -2px rgba(0,0,0,.2); }
.rl-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.rl-w-36 { width: 9rem; }
.rl-focus-ring:focus{box-shadow:0 0 0 2px var(--rl-accent-subtle, rgba(46,184,184,0.3));}

/* breachlens migration r3 — generic utilities */
.rl-border-b-2 { border-bottom-width: 2px; }
.rl-border-t-2 { border-top-width: 2px; }
.rl-border-0 { border: 0; }
.rl-duration-200 { transition-duration: 200ms; }
.rl-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,.3), 0 8px 10px -6px rgba(0,0,0,.3); }
.rl-min-w-48 { min-width: 12rem; }
.rl-overflow-auto { overflow: auto; }
.rl-font-black { font-weight: 900; }
.rl-font-light { font-weight: 300; }
.rl-text-7xl { font-size: 4.5rem; line-height: 1; }
.rl-text-current { color: currentColor; }
.rl-tracking-tight { letter-spacing: -0.025em; }
.rl-rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; }
.rl-whitespace-pre-line { white-space: pre-line; }
.rl-spinner-md { width: 2rem; height: 2rem; }
.rl-spinner-lg { width: 3rem; height: 3rem; }
.rl-ring-1 { box-shadow: 0 0 0 1px var(--rl-border); }
.rl-ring-error { box-shadow: 0 0 0 1px var(--rl-error); }
.rl-ring-success { box-shadow: 0 0 0 1px var(--rl-success); }
.rl-hover-shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.3), 0 8px 10px -6px rgba(0,0,0,.3); }
.rl-hover-shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.2), 0 2px 4px -2px rgba(0,0,0,.2); }
.rl-hover-scale-105 { transition: transform .15s; }
.rl-hover-scale-105:hover { transform: scale(1.05); }
@media (min-width:640px){.rl-sm-col-span-2{grid-column:span 2 / span 2;}}
@media (min-width:768px){.rl-md-flex-row{flex-direction:row;}}
@media (min-width:768px){.rl-md-justify-between{justify-content:space-between;}}
@media (min-width:768px){.rl-md-items-center{align-items:center;}}
@media (min-width:768px){.rl-md-items-start{align-items:flex-start;}}

/* breachlens migration r3 — hover/position/transform utilities */
.rl-hover-bg-surface:hover { background: var(--rl-surface); }
.rl-hover-text-error:hover { color: var(--rl-error); }
.rl-hover-text-accent:hover { color: var(--rl-accent); }
.rl-translate-x-5 { transform: translateX(1.25rem); }
.rl-translate-x-0 { transform: translateX(0); }
.rl-top-0_5 { top: 0.125rem; }
.rl-left-0_5 { left: 0.125rem; }

/* sentinelops migration additions */
.rl-self-center { align-self: center; }
.rl-w-28 { width: 7rem; }
.rl-w-40 { width: 10rem; }
.rl-hover-bg-card:hover{background:var(--rl-bg-card);}
.rl-max-h-90vh { max-height: 90vh; }
.rl-max-w-48 { max-width: 12rem; }
.rl-max-w-36 { max-width: 9rem; }
.rl-max-w-3xl { max-width: 48rem; }
.rl-max-w-6xl { max-width: 72rem; }
.rl-pt-10 { padding-top: 2.5rem; }
.rl-w-px { width: 1px; }
.rl-z-60 { z-index: 60; }
.rl-bg-inverse { background: var(--fg-inverse, #fff); }
.rl-bg-heading { background: var(--rl-text-heading); }
.rl-text-bg-base { color: var(--rl-bg-base); }
@media (min-width:1024px){.rl-lg-col-span-2{grid-column:span 2 / span 2;}}
@media (min-width:1280px){.rl-xl-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}}
@media (min-width:1280px){.rl-xl-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr));}}

/* cleartrust-grc migration additions */
.rl-align-middle { vertical-align: middle; }
.rl-bottom-5 { bottom: 1.25rem; }
.rl-gap-0 { gap: 0; }
.rl-gap-0-5 { gap: 0.125rem; }
.rl-gap-x-4 { column-gap: 1rem; }
.rl-gap-x-8 { column-gap: 2rem; }
.rl-gap-y-0-5 { row-gap: 0.125rem; }
.rl-gap-y-2 { row-gap: 0.5rem; }
.rl-gap-y-3 { row-gap: 0.75rem; }
.rl-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rl-h-0-5 { height: 0.125rem; }
.rl-h-1 { height: 0.25rem; }
.rl-h-28 { height: 7rem; }
.rl-h-48 { height: 12rem; }
.rl-max-h-24 { max-height: 6rem; overflow: auto; }
.rl-max-h-64 { max-height: 16rem; overflow: auto; }
.rl-max-h-80 { max-height: 20rem; overflow: auto; }
.rl-min-h-full { min-height: 100%; }
.rl-minw-18px { min-width: 18px; }
.rl-ml-0-5 { margin-left: 0.125rem; }
.rl-ml-1-5 { margin-left: 0.375rem; }
.rl-ml-6 { margin-left: 1.5rem; }
.rl-mr-1 { margin-right: 0.25rem; }
.rl-mr-2 { margin-right: 0.5rem; }
.rl-mr-4 { margin-right: 1rem; }
.rl-mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.rl-mx-4 { margin-left: 1rem; margin-right: 1rem; }
.rl-my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.rl-object-contain { object-fit: contain; }
.rl-object-cover { object-fit: cover; }
.rl-p-0-5 { padding: 0.125rem; }
.rl-p-2-5 { padding: 0.625rem; }
.rl-p-3-5 { padding: 0.875rem; }
.rl-pb-1 { padding-bottom: 0.25rem; }
.rl-pb-2 { padding-bottom: 0.5rem; }
.rl-pb-24 { padding-bottom: 6rem; }
.rl-pl-2 { padding-left: 0.5rem; }
.rl-pl-3 { padding-left: 0.75rem; }
.rl-pr-1 { padding-right: 0.25rem; }
.rl-pr-12 { padding-right: 3rem; }
.rl-pr-2 { padding-right: 0.5rem; }
.rl-pr-3 { padding-right: 0.75rem; }
.rl-pr-4 { padding-right: 1rem; }
.rl-px-3-5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.rl-px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.rl-px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
.rl-py-28 { padding-top: 7rem; padding-bottom: 7rem; }
.rl-right-0 { right: 0; }
.rl-right-5 { right: 1.25rem; }
.rl-right-6 { right: 1.5rem; }
.rl-rounded-sm { border-radius: 0.125rem; }
.rl-space-y-10 > * + * { margin-top: 2.5rem; }
.rl-space-y-12 > * + * { margin-top: 3rem; }
.rl-text-11px { font-size: 11px; }
.rl-text-7px { font-size: 7px; }
.rl-top-10 { top: 2.5rem; }
.rl-top-6 { top: 1.5rem; }
.rl-top-half { top: 50%; }
.rl-top-n3 { top: -0.75rem; }
.rl-top-n40 { top: -10rem; }
.rl-w-268px { width: 268px; }
.rl-w-52 { width: 13rem; }
.rl-w-56 { width: 14rem; }
.rl-w-80 { width: 20rem; }
@media (min-width:1024px){.rl-lg-flex{display:flex;}}
@media (min-width:768px){.rl-md-hidden{display:none;}}

/* cleartrust-grc migration r2 — generic utilities */
.rl-duration-150 { transition-duration: 150ms; }
.rl-duration-300 { transition-duration: 300ms; }
.rl-duration-500 { transition-duration: 500ms; }
.rl-duration-2000 { transition-duration: 2000ms; }
.rl-border-transparent { border-color: transparent; }
.rl-border-collapse { border-collapse: collapse; }
.rl-mr-auto { margin-right: auto; }
.rl-transition-opacity { transition: opacity .15s; }
.rl-justify-start { justify-content: flex-start; }
.rl-opacity-100 { opacity: 1; }
.rl-leading-snug { line-height: 1.375; }
.rl-leading-1-1 { line-height: 1.1; }
.rl-leading-1-08 { line-height: 1.08; }
.rl-max-w-none { max-width: none; }
.rl-max-w-64 { max-width: 16rem; }
.rl-max-w-260px { max-width: 260px; }
.rl-ring-2 { box-shadow: 0 0 0 2px var(--rl-border); }
.rl-ring-4 { box-shadow: 0 0 0 4px var(--rl-border); }
.rl-rotate-180 { transform: rotate(180deg); }
.rl-rotate-0 { transform: rotate(0deg); }
.rl-cursor-default { cursor: default; }
.rl-min-h-0 { min-height: 0; }
.rl-min-h-60vh { min-height: 60vh; }
.rl-min-h-80vh { min-height: 80vh; }
.rl-min-h-100px { min-height: 100px; }
.rl-min-h-200px { min-height: 200px; }
.rl-min-h-300px { min-height: 300px; }
.rl-h-60vh { height: 60vh; }
.rl-max-h-88vh { max-height: 88vh; }
.rl-max-h-70vh { max-height: 70vh; }
.rl-max-h-480px { max-height: 480px; }
.rl-max-h-560px { max-height: 560px; }
.rl-rounded-t { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.rl-z-100 { z-index: 100; }
.rl-select-text { user-select: text; }
.rl-divide-x > * + * { border-left: 1px solid var(--rl-border); }
.rl-flex-nowrap { flex-wrap: nowrap; }
.rl-bg-current { background-color: currentColor; }
.rl-tracking-015em { letter-spacing: 0.15em; }
.rl-mt-78px { margin-top: 78px; }
.rl-mx-n6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.rl-my-n2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
.rl-mt-n1 { margin-top: -0.25rem; }
.rl-grid-cols-200-1fr { grid-template-columns: 200px 1fr; }
.rl-hover-bg-overlay:hover { background: var(--rl-overlay, rgba(0,0,0,0.5)); }
.rl-hover-text-primary:hover { color: var(--rl-text-primary); }
.rl-hover-border:hover { border-color: var(--rl-border); }
.rl-hover-bg-warning-solid:hover { background: var(--rl-warning); }
.rl-hover-bg-warning:hover { background: color-mix(in srgb, var(--rl-warning) 15%, transparent); }
.rl-group-hover-text-accent { color: inherit; }
.rl-group:hover .rl-group-hover-text-accent { color: var(--rl-accent); }
/* responsive table-cell visibility (paired with rl-hidden) */
@media (min-width:640px){.rl-sm-table-cell{display:table-cell;}}
@media (min-width:768px){.rl-md-table-cell{display:table-cell;}}
@media (min-width:1024px){.rl-lg-table-cell{display:table-cell;}}
.rl-hover-scale-102:hover { transform: scale(1.02); }

/* cleartrust-grc migration r3 — variant/arbitrary utilities */
.rl-hover-shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.25), 0 4px 6px -4px rgba(0,0,0,.25); }
.rl-hover-opacity-90:hover { opacity: .9; }
.rl-hover-opacity-80:hover { opacity: .8; }
.rl-hover-opacity-70:hover { opacity: .7; }
.rl-hover-opacity-100:hover { opacity: 1; }
.rl-group:hover .rl-group-hover-opacity-80 { opacity: .8; }
.rl-hover-no-underline:hover { text-decoration: none; }
.rl-hover-bg-error-solid:hover { background: var(--rl-error); }
.rl-hover-bg-accent-solid:hover { background: var(--rl-accent); }
.rl-hover-bg-error:hover { background: var(--rl-error-subtle, rgba(239,68,68,.12)); }
.rl-hover-bg-accent-subtle:hover { background: var(--rl-accent-subtle, rgba(46,184,184,.15)); }
.rl-hover-text-warning:hover { color: var(--rl-warning); }
.rl-hover-bg-surface-hover:hover { background: var(--rl-surface-hover, color-mix(in srgb, var(--rl-surface) 85%, var(--rl-accent))); }
.rl-text-fg { color: var(--rl-fg, var(--rl-text-primary)); }
.rl-bg-hover { background: var(--rl-hover); }
.rl-bg-input { background: var(--rl-input-bg); }
.rl-border-accent-30 { border-color: color-mix(in srgb, var(--rl-accent) 30%, transparent); }
.rl-max-w-70pct { max-width: 70%; }
.rl-max-w-72px { max-width: 72px; }
.rl-h-calc-screen { height: calc(100vh - 3.5rem - 2rem); }
.rl-z-9999 { z-index: 9999; }
.rl-focus-ring-error:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-error) 40%, transparent); }
@media (min-width:640px){.rl-sm-col-span-1{grid-column:span 1 / span 1;}}
@media (min-width:640px){.rl-sm-flex{display:flex;}}
@media (min-width:640px){.rl-sm-block{display:block;}}
@media (min-width:768px){.rl-md-col-span-2{grid-column:span 2 / span 2;}}
@media (min-width:768px){.rl-md-text-xl{font-size:1.25rem;}}
@media (min-width:768px){.rl-md-text-2xl{font-size:1.5rem;}}
@media (min-width:1024px){.rl-lg-w-96{width:24rem;}}
@media (min-width:1024px){.rl-lg-inline{display:inline;}}
@media (min-width:1280px){.rl-xl-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}}
.rl-ring-accent-2 { box-shadow: 0 0 0 2px var(--rl-accent); }
.rl-ring-accent-subtle-2 { box-shadow: 0 0 0 2px var(--rl-accent-subtle, rgba(46,184,184,0.3)); }
.rl-accent-color { accent-color: var(--rl-accent); }
.rl-mt-n20px { margin-top: -20px; }
.rl-hover-text-heading:hover { color: var(--rl-text-heading); }
.rl-hover-border-warning:hover { border-color: var(--rl-warning); }
.rl-hover-border-error:hover { border-color: var(--rl-error); }
.rl-hover-bg-base:hover { background: var(--rl-bg-base); }
.rl-last-mb-0:last-child { margin-bottom: 0; }