/* ============================================
   ONYX COMMAND CENTER - Review Site Theme
   Mirrors gamification app design tokens
   ============================================ */

:root {
  /* Core */
  --onyx-dark: #0A0A0A;
  --onyx-surface: #111111;
  --onyx-surface-2: #1a1a1a;
  --onyx-surface-3: #222222;
  --onyx-border: #2a2a2a;
  --onyx-border-light: #333333;

  /* Brand accent - neon mint */
  --onyx-green: #00F0B5;
  --onyx-green-dim: #00B386;
  --onyx-green-glow: rgba(0, 240, 181, 0.3);
  --onyx-green-subtle: rgba(0, 240, 181, 0.08);

  /* Palette */
  --xp-gold: #FFD700;
  --xp-gold-dim: #CC9900;
  --xp-gold-glow: rgba(255, 215, 0, 0.3);
  --streak-red: #FF6B6B;
  --streak-red-dim: #FF4444;
  --support-purple: #7B7BFF;
  --support-purple-dim: #5555FF;
  --knowledge-orange: #FFA500;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-muted: #777777;
  --text-dim: #555555;

  --background: #0A0A0A;
  --foreground: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Subtle grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 240, 181, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 181, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
}

h1 {
  font-size: 32px;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

h2 {
  font-size: 22px;
  color: var(--onyx-green);
  margin: 40px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--onyx-border);
  letter-spacing: -0.3px;
}

h3 {
  font-size: 16px;
  color: var(--xp-gold);
  margin: 20px 0 12px;
  font-weight: 600;
}

.subtitle {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 32px;
}

.back {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--onyx-green);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.back:hover {
  text-shadow: 0 0 8px var(--onyx-green-glow);
}

.summary {
  background: var(--onyx-green-subtle);
  border: 1px solid rgba(0, 240, 181, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0 32px;
}
.summary p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.summary p:last-child { margin-bottom: 0; }
.summary ul {
  margin-left: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}
.summary li { margin-bottom: 4px; }
.summary strong { color: var(--onyx-green); }
.summary h3 { margin-top: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.stat {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  transition: all 0.2s;
}
.stat:hover {
  border-color: var(--onyx-green);
  box-shadow: 0 0 12px var(--onyx-green-glow);
}
.stat-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--onyx-green);
}
.stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13px;
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 8px;
  overflow: hidden;
}
th {
  background: var(--onyx-surface-2);
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: var(--onyx-green);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--onyx-border-light);
}
td {
  padding: 12px;
  border-bottom: 1px solid var(--onyx-border);
  vertical-align: top;
  color: var(--text-secondary);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--onyx-surface-2); }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
  letter-spacing: 0.3px;
}
.b-yes, .b-green {
  background: var(--onyx-green-subtle);
  color: var(--onyx-green);
  border: 1px solid rgba(0, 240, 181, 0.3);
}
.b-no, .b-red {
  background: rgba(255, 107, 107, 0.15);
  color: var(--streak-red);
  border: 1px solid rgba(255, 107, 107, 0.3);
}
.b-partial, .b-gold {
  background: rgba(255, 215, 0, 0.12);
  color: var(--xp-gold);
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.b-purple, .b-scope {
  background: rgba(123, 123, 255, 0.15);
  color: var(--support-purple);
  border: 1px solid rgba(123, 123, 255, 0.3);
}
.b-orange, .b-agency {
  background: rgba(255, 165, 0, 0.12);
  color: var(--knowledge-orange);
  border: 1px solid rgba(255, 165, 0, 0.3);
}

/* Code */
code {
  background: var(--onyx-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--onyx-green);
  font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
  border: 1px solid var(--onyx-border);
}

/* Sections */
.section {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
}
.section:hover {
  border-color: var(--onyx-border-light);
}

/* Callouts */
.highlight, .success {
  background: var(--onyx-green-subtle);
  border-left: 3px solid var(--onyx-green);
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
  color: var(--text-secondary);
}
.highlight strong, .success strong { color: var(--onyx-green); }

.warning {
  background: rgba(255, 215, 0, 0.06);
  border-left: 3px solid var(--xp-gold);
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
  color: var(--text-secondary);
}
.warning strong { color: var(--xp-gold); }

.danger {
  background: rgba(255, 107, 107, 0.06);
  border-left: 3px solid var(--streak-red);
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
  color: var(--text-secondary);
}
.danger strong { color: var(--streak-red); }

.correction, .note {
  background: rgba(123, 123, 255, 0.06);
  border-left: 3px solid var(--support-purple);
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
  color: var(--text-secondary);
}
.correction strong, .note strong { color: var(--support-purple); }

/* Action lists */
ul.actions {
  list-style: none;
  margin: 12px 0;
}
ul.actions li {
  background: var(--onyx-green-subtle);
  border: 1px solid rgba(0, 240, 181, 0.2);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  position: relative;
  padding-left: 40px;
  color: var(--text-secondary);
}
ul.actions li::before {
  content: "✓";
  position: absolute;
  left: 14px;
  color: var(--onyx-green);
  font-weight: 700;
}

ul.manual {
  list-style: none;
  margin: 12px 0;
}
ul.manual li {
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  position: relative;
  padding-left: 40px;
  color: var(--text-secondary);
}
ul.manual li::before {
  content: "✗";
  position: absolute;
  left: 14px;
  color: var(--xp-gold);
  font-weight: 700;
}

/* Cards grid (index page) */
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}
.card {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 14px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
  display: block;
}
.card:hover {
  background: var(--onyx-surface-2);
  border-color: var(--onyx-green);
  transform: translateY(-2px);
  box-shadow: 0 0 20px var(--onyx-green-glow);
}
.card-icon {
  font-size: 32px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 6px var(--onyx-green-glow));
}
.card h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 8px;
  margin-top: 0;
}
.card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.card-meta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  background: var(--onyx-surface-2);
  color: var(--onyx-green);
  border: 1px solid var(--onyx-border);
}

/* Links inside content */
p a, li a, td a {
  color: var(--onyx-green);
  text-decoration: none;
}
p a:hover, li a:hover, td a:hover {
  text-shadow: 0 0 8px var(--onyx-green-glow);
}

/* Pre/code blocks */
pre {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 12px 0;
}

/* Workflow card styling (for handoff doc) */
.workflow-card {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 12px;
  margin: 16px 0;
  overflow: hidden;
  transition: all 0.2s;
}
.workflow-card:hover {
  border-color: var(--onyx-border-light);
}
.workflow-header {
  background: var(--onyx-surface-2);
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--onyx-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.workflow-header:hover {
  background: var(--onyx-surface-3);
}
.workflow-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--onyx-green);
}
.workflow-body {
  padding: 20px;
  display: none;
}
.workflow-card.open .workflow-body { display: block; }
.workflow-card.open .chevron { transform: rotate(90deg); }
.chevron {
  transition: transform 0.2s;
  color: var(--text-muted);
}

/* SMS/Email boxes */
.sms-box {
  background: rgba(0, 240, 181, 0.04);
  border-left: 3px solid var(--onyx-green);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.email-box {
  background: rgba(123, 123, 255, 0.04);
  border-left: 3px solid var(--support-purple);
  border-radius: 4px;
  padding: 12px 16px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.sms-badge {
  display: inline-block;
  background: var(--onyx-green-subtle);
  color: var(--onyx-green);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
.email-badge {
  display: inline-block;
  background: rgba(123, 123, 255, 0.15);
  color: var(--support-purple);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

/* Global site-wide nav (top of every page) */
.site-nav {
  position: sticky;
  top: 0;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--onyx-border);
  margin: -40px -40px 24px;
  padding: 10px 40px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.site-nav-brand {
  color: var(--onyx-green);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  margin-right: 18px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.site-nav-brand:hover {
  text-shadow: 0 0 10px var(--onyx-green-glow);
}
.site-nav a:not(.site-nav-brand) {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.site-nav a:not(.site-nav-brand):hover {
  color: var(--onyx-green);
  background: var(--onyx-green-subtle);
}
.site-nav a.active {
  color: var(--onyx-green);
  background: var(--onyx-green-subtle);
  border: 1px solid rgba(0, 240, 181, 0.25);
}
@media (max-width: 768px) {
  .site-nav { margin: -20px -20px 16px; padding: 8px 20px; gap: 4px; }
  .site-nav-brand { font-size: 12px; margin-right: 10px; }
  .site-nav a:not(.site-nav-brand) { font-size: 11px; padding: 4px 7px; }
}

/* Nav bar (for long pages - page-internal anchors, sits below site-nav) */
.nav {
  position: sticky;
  top: 44px;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--onyx-border);
  padding: 12px 0;
  margin: 0 -40px 24px;
  padding-left: 40px;
  padding-right: 40px;
  z-index: 100;
}
.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  margin-right: 20px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}
.nav a:hover {
  color: var(--onyx-green);
  background: var(--onyx-green-subtle);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--onyx-dark); }
::-webkit-scrollbar-thumb {
  background: var(--onyx-border-light);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--onyx-green-dim);
}

/* Responsive */
@media (max-width: 768px) {
  body { padding: 20px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: 1fr; }
  .nav { margin: -20px -20px 16px; padding: 12px 20px; }
}

/* ============================================================
   LIGHT MODE TOKENS
   Activated when <html> has the .light class (set via
   onyx-shell.js + the no-FOUC inline init script in <head>).
   Only the new Command Center vocabulary (`.oc-*` classes
   below) is theme-aware. Legacy pages (01-11) ship dark-only
   intentionally so they're untouched by this override.
   ============================================================ */
.light {
  --onyx-dark: #ffffff;
  --onyx-surface: #f5f6f8;
  --onyx-surface-2: #ebedf2;
  --onyx-surface-3: #d4d8e0;
  --onyx-border: #c0c5d0;
  --onyx-border-light: #b0b7c4;

  --onyx-green: #009A6E;
  --onyx-green-dim: #007A56;
  --onyx-green-glow: rgba(0, 154, 110, 0.18);
  --onyx-green-subtle: rgba(0, 154, 110, 0.10);

  --xp-gold: #9A6C00;
  --xp-gold-dim: #7A5500;
  --xp-gold-glow: rgba(154, 108, 0, 0.18);
  --streak-red: #C52020;
  --streak-red-dim: #A01818;
  --support-purple: #4338CA;
  --support-purple-dim: #3730A3;
  --knowledge-orange: #A85D00;

  --text-primary: #0f172a;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-dim: #7f8694;

  --background: #ffffff;
  --foreground: #0f172a;
}

/* ============================================================
   COMMAND CENTER VOCABULARY (.oc-* prefix)
   Used by pages that want full Command Center parity (header
   with theme toggle, retro cards, glow buttons, FAQ accordions,
   subtle neon grid backdrop). Prefix isolates these rules from
   the legacy .card/.section/.workflow-card rules used by the
   handoff/spec pages (01-11).
   ============================================================ */

/* Page shell ------------------------------------------------- */
body.oc-page {
  padding: 0;
  max-width: none;
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
body.oc-page::before {
  background-image:
    linear-gradient(rgba(0, 240, 181, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 181, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
}
.light body.oc-page::before {
  background-image:
    linear-gradient(rgba(0, 154, 110, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 154, 110, 0.05) 1px, transparent 1px);
}

/* Header ----------------------------------------------------- */
.oc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 1px solid var(--onyx-border);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.light .oc-header {
  background: rgba(255, 255, 255, 0.88);
}

.oc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.oc-brand-wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--onyx-green);
  text-shadow:
    0 0 7px var(--onyx-green-glow),
    0 0 14px var(--onyx-green-glow);
  transition: text-shadow 0.2s ease;
}
.light .oc-brand-wordmark { text-shadow: 0 0 6px var(--onyx-green-glow); }
.oc-brand:hover .oc-brand-wordmark {
  text-shadow:
    0 0 10px var(--onyx-green),
    0 0 22px var(--onyx-green-glow);
}
.oc-brand-sep {
  color: var(--onyx-border-light);
  font-size: 16px;
  user-select: none;
}
.oc-brand-title {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.oc-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oc-theme-toggle {
  background: transparent;
  border: 1px solid var(--onyx-border);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
  padding: 0;
}
.oc-theme-toggle:hover {
  background: var(--onyx-surface-2);
  border-color: var(--onyx-green);
  color: var(--onyx-green);
}
.oc-theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* Main content area ----------------------------------------- */
.oc-main {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 48px;
}
@media (max-width: 768px) { .oc-main { padding: 32px 20px; } }

.oc-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--onyx-green);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 12px;
  display: inline-block;
}
.oc-page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
}
@media (max-width: 768px) { .oc-page-title { font-size: 30px; } }
.oc-page-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 0 48px;
}

/* Section blocks -------------------------------------------- */
.oc-section { margin-top: 56px; }
.oc-section:first-of-type { margin-top: 32px; }
.oc-section-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--onyx-green);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 6px;
}
.oc-section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}

/* Card grids ------------------------------------------------ */
.oc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.oc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .oc-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .oc-grid-2, .oc-grid-3 { grid-template-columns: 1fr; }
}

/* RetroCard ------------------------------------------------- */
.oc-card {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 14px;
  padding: 22px 22px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.oc-card:hover {
  border-color: var(--onyx-green);
  box-shadow:
    0 0 0 1px var(--onyx-green-subtle),
    0 0 24px var(--onyx-green-glow);
  transform: translateY(-1px);
}

/* Session card (booking pattern) ---------------------------- */
.oc-session-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.oc-session-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 14px;
}
.oc-bullets {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex: 1;
}
.oc-bullets li {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.oc-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  background-color: var(--onyx-green-subtle);
  border: 1px solid var(--onyx-green);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300F0B5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-size: 9px 9px;
  background-position: center;
}
.light .oc-bullets li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009A6E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* GlowButton ------------------------------------------------ */
.oc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  background: linear-gradient(135deg, var(--onyx-green) 0%, var(--onyx-green-dim) 100%);
  color: var(--onyx-dark);
  align-self: flex-start;
}
.light .oc-button { color: #ffffff; }
.oc-button:hover {
  box-shadow: 0 0 22px var(--onyx-green-glow);
  transform: translateY(-1px);
}
.oc-button:active { transform: translateY(0); }
.oc-button-arrow {
  display: inline-block;
  transition: transform 0.18s ease;
}
.oc-button:hover .oc-button-arrow { transform: translateX(2px); }

.oc-button-secondary {
  background: transparent;
  color: var(--onyx-green);
  border: 1px solid var(--onyx-green);
}
.oc-button-secondary:hover {
  background: var(--onyx-green-subtle);
  box-shadow: 0 0 14px var(--onyx-green-glow);
}

/* Resource card (single-CTA pattern) ------------------------ */
.oc-resource-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.oc-resource-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 18px;
  flex: 1;
}

/* FAQ accordion --------------------------------------------- */
.oc-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  /* Each item should size to its own content. Without this, the default
     `align-items: stretch` would force a closed card on the right to
     grow to match the height of an open card on the left. */
  align-items: start;
}
@media (max-width: 768px) { .oc-faq-grid { grid-template-columns: 1fr; } }

.oc-faq-item {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.oc-faq-item:hover { border-color: var(--onyx-border-light); }
.oc-faq-item[open] {
  border-color: var(--onyx-green);
  box-shadow: 0 0 18px var(--onyx-green-glow);
}
.oc-faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}
.oc-faq-summary::-webkit-details-marker { display: none; }
.oc-faq-summary::marker { content: ''; }
.oc-faq-chevron {
  flex-shrink: 0;
  color: var(--onyx-green);
  transition: transform 0.2s ease;
  width: 16px;
  height: 16px;
}
.oc-faq-item[open] .oc-faq-chevron { transform: rotate(180deg); }
.oc-faq-body {
  padding: 0 18px 18px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}
.oc-faq-body p { margin: 8px 0; }
.oc-faq-body p:first-child { margin-top: 0; }
.oc-faq-body p:last-child { margin-bottom: 0; }
.oc-faq-body strong { color: var(--text-primary); }
.oc-faq-body a { color: var(--onyx-green); text-decoration: underline; text-underline-offset: 2px; }

/* Footer ----------------------------------------------------- */
.oc-footer {
  position: relative;
  z-index: 1;
  margin-top: 64px;
  padding: 24px 32px 32px;
  text-align: center;
  border-top: 1px solid var(--onyx-border);
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .oc-card,
  .oc-button,
  .oc-faq-item,
  .oc-faq-chevron,
  .oc-button-arrow,
  .oc-theme-toggle,
  .oc-brand-wordmark { transition: none; }
}

/* ============================================================
   DIRECTORY PAGES (carrier + tags)
   Search input, letter/policy chip nav, list-style data cards,
   workflow accordions.
   ============================================================ */

/* Search row -------------------------------------------------- */
.oc-search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.oc-search {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.oc-search:focus-within {
  border-color: var(--onyx-green);
  box-shadow: 0 0 0 1px var(--onyx-green-subtle), 0 0 14px var(--onyx-green-glow);
}
.oc-search svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.oc-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  padding: 2px 0;
}
.oc-search input::placeholder { color: var(--text-dim); }
.oc-search-meta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Letter chip nav (A-Z) -------------------------------------- */
.oc-letter-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  padding: 8px 0;
  border-top: 1px solid var(--onyx-border);
  border-bottom: 1px solid var(--onyx-border);
}
.oc-letter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.12s ease;
}
.oc-letter-chip:hover {
  background: var(--onyx-green-subtle);
  color: var(--onyx-green);
}

/* Letter block (groups carriers under their first letter) ---- */
.oc-letter-block { scroll-margin-top: 88px; margin: 0 0 36px; }
.oc-letter-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--onyx-green);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--onyx-border);
}

/* Carrier card --------------------------------------------- */
.oc-carrier-card { gap: 10px; }
.oc-carrier-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.oc-carrier-phone {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--onyx-green);
  text-decoration: none;
  margin: 2px 0 4px;
  letter-spacing: 0.02em;
}
.oc-carrier-phone:hover { text-decoration: underline; }
.oc-carrier-phone-empty { color: var(--text-dim); font-weight: 500; }
.oc-carrier-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.oc-carrier-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--onyx-surface-2);
  border: 1px solid var(--onyx-border);
  border-radius: 7px;
  transition: all 0.15s ease;
}
.oc-carrier-link svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: color 0.15s ease, transform 0.15s ease;
}
.oc-carrier-link:hover {
  border-color: var(--onyx-green);
  color: var(--onyx-green);
  background: var(--onyx-green-subtle);
}
.oc-carrier-link:hover svg {
  color: var(--onyx-green);
  transform: translate(1px, -1px);
}
.oc-carrier-noresources {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  padding: 6px 0;
}

/* Empty state ----------------------------------------------- */
.oc-empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--onyx-border);
  border-radius: 14px;
  background: var(--onyx-surface);
}
.oc-empty-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.oc-empty-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Policy chip nav (tags directory) -------------------------- */
.oc-policy-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 36px;
  padding: 12px 0;
  border-top: 1px solid var(--onyx-border);
  border-bottom: 1px solid var(--onyx-border);
}
.oc-policy-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 999px;
  transition: all 0.15s ease;
}
.oc-policy-chip:hover {
  border-color: var(--onyx-green);
  color: var(--onyx-green);
  background: var(--onyx-green-subtle);
}
.oc-policy-chip-short {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--onyx-green);
  background: var(--onyx-green-subtle);
  padding: 2px 7px;
  border-radius: 4px;
}
.oc-policy-chip:hover .oc-policy-chip-short {
  background: var(--onyx-green);
  color: var(--onyx-dark);
}
.light .oc-policy-chip:hover .oc-policy-chip-short { color: #ffffff; }

/* Policy section ------------------------------------------- */
.oc-policy-section {
  margin: 0 0 56px;
  scroll-margin-top: 88px;
}
.oc-policy-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--onyx-border);
  margin-bottom: 22px;
}
.oc-subsection-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 24px 0 14px;
}
.oc-count-pill {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--onyx-green);
  background: var(--onyx-green-subtle);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Trigger tag cards --------------------------------------- */
.oc-tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.oc-tag-card {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-left: 3px solid var(--onyx-green);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.oc-tag-card:hover {
  border-color: var(--onyx-green);
  border-left-color: var(--onyx-green);
  box-shadow: 0 0 12px var(--onyx-green-glow);
}
.oc-tag-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--onyx-green);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  word-break: break-word;
}
.oc-tag-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Workflow list (compact accordion) ----------------------- */
.oc-workflow-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oc-workflow-item {
  background: var(--onyx-surface);
  border: 1px solid var(--onyx-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.oc-workflow-item:hover { border-color: var(--onyx-border-light); }
.oc-workflow-item[open] {
  border-color: var(--onyx-green);
  box-shadow: 0 0 12px var(--onyx-green-glow);
}
.oc-workflow-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}
.oc-workflow-summary::-webkit-details-marker { display: none; }
.oc-workflow-summary::marker { content: ''; }
.oc-workflow-name {
  flex: 1;
  letter-spacing: -0.005em;
}
.oc-workflow-chevron {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--onyx-green);
  transition: transform 0.2s ease;
}
.oc-workflow-item[open] .oc-workflow-chevron { transform: rotate(180deg); }
.oc-workflow-desc {
  padding: 0 14px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Keyboard focus states ------------------------------------ */
/* These mirror :hover but are always rendered with an outline so
   keyboard users can track focus across the directory controls.
   .oc-theme-toggle is included so keyboard users hitting Tab from
   the brand link land on a clearly-focused control rather than a
   low-contrast browser-default ring. */
.oc-letter-chip:focus-visible,
.oc-carrier-link:focus-visible,
.oc-policy-chip:focus-visible,
.oc-workflow-summary:focus-visible,
.oc-theme-toggle:focus-visible {
  outline: 2px solid var(--onyx-green);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--onyx-green-subtle);
  border-radius: 8px;
}

/* Reduced motion add-ons ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .oc-search,
  .oc-letter-chip,
  .oc-carrier-link,
  .oc-carrier-link svg,
  .oc-policy-chip,
  .oc-policy-chip-short,
  .oc-tag-card,
  .oc-workflow-item,
  .oc-workflow-chevron { transition: none; }
}