/* ════════════════════════════════════════════════════════════════ */
/* DESIGN TOKENS                                                   */
/* ════════════════════════════════════════════════════════════════ */

:root {
  /* Layout */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --radius: var(--radius-md);
  --radius-xl: var(--radius-lg);
  --header-height: 56px;
  --app-shell-max-width: 1320px;
  --view-shell-max-width: 1040px;
  --view-shell-gutter: clamp(14px, 2vw, 24px);
  --view-shell-y: clamp(18px, 3vh, 34px);
  --max-width: 780px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --font-sans: var(--font);
  --text-hero: 1.75rem;
  --text-2xl: 2.25rem;
  --text-xl: 1.375rem;
  --text-lg: 1.125rem;
  --text-base: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.6875rem;
  --text-xsm: 0.625rem;
  --leading-tight: 1.3;
  --leading-normal: 1.55;
  --leading-snug: 1.4;

  /* Light theme */
  --bg-body: #f8f9fb;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-inset: #f1f3f6;
  --bg-topbar: #ffffff;
  --bg: var(--bg-card);
  --bg-surface: var(--bg-card);
  --bg-input: var(--bg-inset);
  --bg-code: #1e1e2e;
  /* Semantic aliases used across secondary components */
  --bg-primary: var(--bg-body);
  --bg-secondary: var(--bg-inset);
  --bg-tertiary: var(--bg-card-hover);
  --bg-hover: var(--bg-card-hover);
  --surface-1: var(--bg-card);
  --surface-2: var(--bg-inset);
  --border: #e2e8f0;
  --border-subtle: var(--border);
  --border-light: color-mix(in srgb, var(--border) 50%, transparent);
  --border-hover: color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  --border-focus: #3b82f6;
  /* Text — WCAG AA compliant: #6b7280 = 4.6:1 on white */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #6b7280;
  --text-muted: var(--text-tertiary);
  --text-inverse: #ffffff;
  --fg: var(--text-primary);
  --fg-muted: var(--text-secondary);
  --text-code: #cdd6f4;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 12px 28px rgba(0,0,0,0.12);
  --shadow-color: #000000;
  --shadow-glow: 0 0 0 3px rgba(59,130,246,0.15);

  /* Severity palette */
  --sev-critical: #ef4444;
  --sev-critical-bg: #fef2f2;
  --sev-high: #f97316;
  --sev-high-bg: #fff7ed;
  --sev-medium: #eab308;
  --sev-medium-bg: #fefce8;
  --sev-low: #22c55e;
  --sev-low-bg: #f0fdf4;
  --severity-alert: var(--sev-critical);
  --severity-watch: var(--sev-high);
  --severity-ok: var(--sev-low);
  --severity-good: var(--sev-low);

  /* Accent */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-bg: #eff6ff;
  --accent-rgb: 59, 130, 246;
  --accent-light: var(--accent-bg);
  --accent-dark: var(--accent-hover);
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --blue: var(--accent);
  --success: #10b981;
  --success-bg: #ecfdf5;
  --green: var(--success);
  --warning: var(--sev-high);
  --info: var(--accent);
  --red: var(--sev-critical);
  --score: 0;
  --stage-pct: 0;
  --confidence: 0;
  --cd-score-color: var(--accent);
  --surface: var(--bg-card);
  --danger: var(--sev-critical);
  /* Severity — badge/bg tokens kept as-is; text uses --sev-*-text */
  --sev-medium-text: #b45309; /* 7.1:1 on white — WCAG AA for small text */

  /* Health ring colors */
  --ring-good: #22c55e;
  --ring-ok: #eab308;
  --ring-warn: #f97316;
  --ring-bad: #ef4444;
}

[data-theme="dark"] {
  --bg-body: #0c0f17;
  --bg-card: #151923;
  --bg-card-hover: #1c2233;
  --bg-inset: #1a1f2e;
  --bg-topbar: #111520;
  --border: #262d3d;
  --border-focus: #60a5fa;
  --text-primary: #e8ecf4;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-inverse: #0f172a;
  --bg: var(--bg-card);
  --bg-surface: var(--bg-card);
  --bg-input: var(--bg-inset);
  --bg-code: #0f172a;
  --fg: var(--text-primary);
  --fg-muted: var(--text-secondary);
  --text-code: #cbd5e1;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-xl: 0 14px 30px rgba(0,0,0,0.55);
  --shadow-color: #000000;
  --shadow-glow: 0 0 0 3px rgba(96,165,250,0.2);
  --sev-critical-bg: #2a1215;
  --sev-high-bg: #2a1a0e;
  --sev-medium-bg: #2a2510;
  --sev-low-bg: #0f2a1a;
  --accent-bg: #162032;
  --success-bg: #0f2a1f;
}


/* ════════════════════════════════════════════════════════════════ */
/* RESET & BASE                                                    */
/* ════════════════════════════════════════════════════════════════ */

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

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
}

.is-hidden { display: none !important; }
.is-block { display: block !important; }
.u-opacity-40 { opacity: 0.4; }
.u-opacity-50 { opacity: 0.5; }

.noscript-warning {
  padding: 1rem;
  background: #fef3c7;
  color: #92400e;
  border-bottom: 1px solid #f59e0b;
  text-align: center;
  font-family: system-ui, sans-serif;
}

h1, h2, h3 { line-height: var(--leading-tight); }
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 500; }

.data-lag-warning { color: var(--sev-high); }


/* ════════════════════════════════════════════════════════════════ */
/* TOP BAR                                                         */
/* ════════════════════════════════════════════════════════════════ */

.topbar {
  padding: 0 var(--view-shell-gutter);
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
}

.topbar-inner {
  width: 100%;
  max-width: var(--app-shell-max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.logo { font-size: 1.25rem; color: var(--accent); }
.logo-text { font-weight: 600; font-size: var(--text-sm); color: var(--text-secondary); letter-spacing: 0.02em; }

.topbar-nav {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { display: none; }

/* Mobile-only footer nav (hidden by default on desktop) */
.footer-nav { display: none; }
.nav-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border: none; border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative; /* For notification dot positioning */
}
.nav-tab:hover { background: var(--bg-inset); color: var(--text-primary); }
.nav-tab.active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.nav-icon { font-size: 0.75rem; }
.nav-label { font-weight: inherit; }
.nav-subtitle {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 1px;
  font-weight: 400;
}
.nav-notification-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 6px;
  height: 6px;
  background: var(--danger);
  border-radius: 50%;
  border: 1px solid var(--bg-card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.nav-notification-dot-footer {
  top: 6px;
  right: 10px;
}

.mysite-footer-tab {
  text-decoration: none;
  border-radius: 8px;
}

.mysite-footer-tab-auth {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.mysite-footer-tab-signup {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff;
}

.topbar-right {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  min-width: 0;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.icon-btn:hover { border-color: var(--border-focus); color: var(--accent); box-shadow: var(--shadow-glow); }

.icon-btn.mysite-btn-primary {
  background: linear-gradient(135deg, var(--accent), #8b5cf6);
  color: #fff;
  border-color: transparent;
}

/* ── Overflow menu ── */
.topbar-overflow { position: relative; }
.overflow-menu {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  min-width: 180px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  z-index: 200; padding: 4px 0;
}
.overflow-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 14px; background: none; border: none; color: var(--text-secondary);
  font-size: 0.85rem; cursor: pointer; text-decoration: none; font-family: var(--font);
  transition: background 0.15s, color 0.15s;
}
.overflow-item:hover { background: var(--bg-card-hover); color: var(--text-primary); }


/* ════════════════════════════════════════════════════════════════ */
/* VIEWS                                                           */
/* ════════════════════════════════════════════════════════════════ */

.view {
  display: none;
  max-width: none;
  margin: 0 auto;
  padding: var(--view-shell-y) var(--view-shell-gutter);
  animation: fadeIn 0.15s ease;
  animation-fill-mode: backwards;
}
.view.active { display: block; }

/* ── Lazy-view placeholder (shown while on-demand partial loads) ─── */
.lazy-view-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: var(--space-xl) var(--view-shell-gutter);
  animation: fadeIn 0.2s ease;
}
.lazy-view-placeholder .empty-state-card {
  max-width: 480px;
  width: 100%;
}
.lazy-view-placeholder h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}
.lazy-view-placeholder p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--leading-normal);
}

.view-shell {
  width: 100%;
  max-width: var(--view-shell-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.view-shell > :first-child {
  margin-top: 0;
}

/* ── Shared view header pattern ─────────────────────────────────── */
.view-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.view-header-title {
  font-size: var(--text-hero);
  font-weight: 700;
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}
.view-header-sub {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Touch targets on coarse pointer (mobile) ───────────────────── */
@media (pointer: coarse) {
  .icon-btn {
    min-height: 44px;
    min-width: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ── Topbar-nav overflow fade mask (desktop 900–1200px) ─────────── */
.topbar-nav {
  position: relative;
}
.topbar-nav::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg-topbar));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.topbar-nav.overflowing::after {
  opacity: 1;
}

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



/* ════════════════════════════════════════════════════════════════ */
/* PULSE VIEW                                                      */
/* ════════════════════════════════════════════════════════════════ */

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

.hero-greeting h1 {
  font-size: var(--text-hero);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.narrative-block {
  font-size: var(--text-xl);
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.narrative-line {
  margin-bottom: var(--space-xs);
}
.narrative-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
}
.trend-indicator {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-left: var(--space-sm);
}
.hero-sub {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Health ring */
.health-ring {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg {
  fill: none;
  stroke: var(--bg-inset);
  stroke-width: 8;
}
.ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 - (326.7 * var(--score) / 100));
  stroke: var(--ring-good);
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Ring color is now set via inline style from the renderer */

.ring-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}
.ring-number { display: block; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); }
.ring-grade { display: block; font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 500; margin-top: 2px; }


/* KPI strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.kpi-value { display: block; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.kpi-label { display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.kpi-sublabel { display: block; font-size: 0.65rem; color: var(--text-tertiary); margin-top: 1px; font-weight: 500; }
.kpi-delta { display: block; font-size: var(--text-xs); font-weight: 600; margin-top: 2px; }
.kpi-delta.positive { color: var(--success); }
.kpi-delta.negative { color: var(--sev-critical); }
.kpi-delta.neutral { color: var(--sev-medium-text); }

/* ── KPI Card Sparkline ────────────────────────────────────────── */
.kpi-sparkline { display: block; margin: 4px auto 2px; }

/* ── KPI Card Milestone ────────────────────────────────────────── */
.kpi-milestone {
  display: block;
  font-size: 0.6rem;
  color: var(--accent);
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.3;
}

/* ── KPI Card Action Link ──────────────────────────────────────── */
.kpi-action-link {
  display: block;
  font-size: 0.6rem;
  color: var(--accent);
  text-decoration: none;
  margin-top: 6px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s;
}
.kpi-card:hover .kpi-action-link { opacity: 1; }
.kpi-action-link:hover { text-decoration: underline; }

/* ── Unconverted Rankings (CTR) Card — Amber Treatment ─────────── */
.kpi-card-amber {
  border-left: 3px solid var(--sev-medium);
  background: color-mix(in srgb, var(--sev-medium) 4%, var(--bg-card));
}
.kpi-card-amber .kpi-value { color: var(--sev-medium-text); }
.kpi-card-amber .kpi-action-link { opacity: 1; color: var(--sev-medium-text); }

/* ── Untapped Potential — Elevated Anchor Card ─────────────────── */
.kpi-card-untapped {
  grid-column: span 2;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--bg-card)), var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  text-align: left;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi-value-hero { font-size: 2rem !important; font-weight: 800 !important; color: var(--accent) !important; }
.kpi-label-hero { font-size: var(--text-sm) !important; color: var(--text-secondary) !important; font-weight: 600 !important; }
.kpi-explanation {
  font-size: 0.7rem !important;
  color: var(--text-tertiary) !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}
.kpi-card-untapped .kpi-action-link {
  opacity: 1;
  font-size: 0.72rem;
  margin-top: 8px;
}
.kpi-card-untapped .kpi-delta { font-size: 0.72rem; }

/* ── Weekly Mission Card ───────────────────────────────────────── */
.weekly-mission {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: box-shadow 0.2s;
}
.weekly-mission:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.wm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}
.wm-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  padding: 3px 10px;
  border-radius: 12px;
}
.wm-badge-complete {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, var(--bg-card));
}
.wm-progress-dots { display: flex; gap: 6px; }
.wm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg-inset);
  transition: background 0.3s;
}
.wm-dot-done { background: var(--success); }
.wm-dot-active { background: var(--accent); }

.wm-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.wm-meta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.wm-meta-item {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.wm-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.wm-start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}

/* Weekly Mission — Expansion Panel */
.wm-expansion {
  border-top: 1px solid var(--border);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  animation: wm-expand 0.3s ease;
}
@keyframes wm-expand {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 800px; }
}
.wm-expansion-inner { padding: 0 var(--space-sm); }
.wm-why {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-md) 0;
}
.wm-pages {
  font-size: 0.8rem;
  margin-bottom: var(--space-sm);
}
.wm-page-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75rem;
  margin-right: 8px;
}
.wm-page-link:hover { text-decoration: underline; }
.wm-warning {
  font-size: 0.8rem;
  color: var(--sev-medium-text);
  background: color-mix(in srgb, var(--sev-medium) 8%, var(--bg-card));
  padding: 8px 12px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}
.wm-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  counter-reset: wm-step;
}
.wm-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.85rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--bg-inset);
}
.wm-step:last-child { border-bottom: none; }
.wm-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.wm-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}
.wm-complete-btn:hover { transform: translateY(-1px); }

/* Weekly Mission — Complete State */
.weekly-mission-complete {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success) 3%, var(--bg-card));
}
.wm-complete-message {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-sm) 0;
}
.wm-action-link {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.wm-action-link:hover { text-decoration: underline; }

/* ── KPI Section Headings ──────────────────────────────────────── */
.kpi-section { margin-bottom: var(--space-lg); }
.kpi-section .kpi-strip { margin-bottom: 0; }
.kpi-section-heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm) 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.kpi-section-period {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.kpi-section-secondary {
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border);
}
.kpi-section-explainer {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin: -4px 0 var(--space-sm) 0;
  line-height: 1.4;
}
.kpi-strip-compact {
  grid-template-columns: repeat(2, 1fr);
}

/* ── Traffic Breakdown Card ────────────────────────────────────── */
.traffic-breakdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.65rem;
  color: var(--text-tertiary);
}
.tb-segment { font-weight: 500; }
.tb-organic { color: var(--accent); }
.tb-direct { color: var(--text-secondary); }
.tb-sep { opacity: 0.5; }

/* ── Site Health Card ──────────────────────────────────────────── */
.site-health-card { text-align: left; position: relative; }
.site-health-bars { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sh-bar { display: flex; align-items: center; gap: 6px; }
.sh-bar-label { font-size: 0.6rem; font-weight: 600; color: var(--text-tertiary); width: 36px; flex-shrink: 0; }
.sh-bar-track { flex: 1; height: 4px; background: var(--bg-inset); border-radius: 2px; overflow: hidden; }
.sh-bar-fill { height: 100%; border-radius: 2px; transition: width 0.6s ease; }

/* ── Toolbar Button Labels ─────────────────────────────────────── */
.icon-btn .btn-label {
  font-size: 0.65rem;
  font-weight: 500;
  margin-left: 4px;
  color: inherit;
}
.icon-btn .btn-icon { flex-shrink: 0; }

/* ── Refresh Animation ─────────────────────────────────────────── */
.icon-btn.refreshing .btn-icon { animation: spin 1s linear infinite; }
.icon-btn.refresh-done { border-color: var(--success); color: var(--success); }
.icon-btn.refresh-done .btn-label { color: var(--success); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════ */
/* PERIOD TOGGLE                                                    */
/* ════════════════════════════════════════════════════════════════ */

.period-toggle-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-sm);
}
.period-toggle {
  display: inline-flex;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.period-btn {
  padding: 6px 16px;
  font-size: var(--text-xs);
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.period-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.period-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Explicit period-vs-period comparison strip (D2). */
.period-compare-strip {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pcs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.pcs-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pcs-window {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.pcs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
}
.pcs-metric {
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-inset);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: var(--radius-sm);
}
.pcs-metric-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.pcs-values {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}
.pcs-current {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}
.pcs-sep {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.pcs-previous {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.pcs-delta {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
}
.pcs-delta.positive { color: var(--success); }
.pcs-delta.negative { color: var(--sev-critical); }
.pcs-delta.neutral { color: var(--text-tertiary); }

/* ════════════════════════════════════════════════════════════════ */
/* PULSE LEDE — Headline + Diagnosis + Badge + Meta                */
/* ════════════════════════════════════════════════════════════════ */

.pulse-lede {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--success);
  transition: border-color 0.3s ease;
}
.pulse-lede[data-severity="needs_attention"] {
  border-left-color: var(--sev-critical);
}
.pulse-lede[data-severity="watch_this"] {
  border-left-color: var(--sev-medium);
}
.pulse-lede[data-severity="on_track"] {
  border-left-color: var(--success);
}

.lede-greeting {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-xs);
  font-weight: 500;
}

.lede-headline {
  font-size: var(--text-hero);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm) 0;
  line-height: 1.2;
  font-weight: 700;
}

.lede-diagnosis {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-sm) 0;
}

.lede-secondary {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-style: italic;
  margin-bottom: var(--space-sm);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--border);
}

.lede-context {
  margin-bottom: var(--space-sm);
}
.lede-numbers {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Status badge */
.lede-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 14px;
  border-radius: var(--radius-full, 99px);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.lede-badge-needs-attention {
  background: color-mix(in srgb, var(--sev-critical) 12%, var(--bg-card));
  color: var(--sev-critical);
  border: 1px solid color-mix(in srgb, var(--sev-critical) 30%, transparent);
}
.lede-badge-watch-this {
  background: color-mix(in srgb, var(--sev-medium) 12%, var(--bg-card));
  color: var(--sev-medium-text);
  border: 1px solid color-mix(in srgb, var(--sev-medium) 30%, transparent);
}
.lede-badge-on-track {
  background: color-mix(in srgb, var(--success) 12%, var(--bg-card));
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.badge-icon { font-size: 0.9rem; }
.badge-label { font-weight: 700; }
.badge-summary { font-weight: 400; opacity: 0.85; }
.badge-confidence {
  font-size: 0.65rem;
  opacity: 0.6;
  font-style: italic;
  margin-left: var(--space-xs);
}

/* Metadata line */
.lede-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.lede-period {
  font-weight: 600;
  color: var(--text-secondary);
}
.lede-sources {
  padding: 2px 8px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.lede-refresh { opacity: 0.7; }

/* ── Freshness Indicator (replaces .lede-refresh) ──────────────── */
.freshness-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.freshness-indicator .freshness-time { opacity: 0.7; }
.freshness-refresh-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: var(--text-xs);
  color: var(--accent);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s;
}
.freshness-refresh-btn:hover {
  opacity: 1;
  border-color: var(--accent);
}
.freshness-stale {
  color: var(--sev-medium-text);
  font-weight: 600;
  opacity: 1 !important;
}

/* ── GSC Delay Note ────────────────────────────────────────────── */
.gsc-delay-note {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}
.gsc-delay-icon { flex-shrink: 0; }

/* ── Stale Data Chip ──────────────────────────────────────────────── */
.stale-data-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
  background: color-mix(in srgb, var(--sev-high, #f97316) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sev-high, #f97316) 28%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}
.stale-data-chip .sdc-icon { flex-shrink: 0; }
.stale-data-chip .sdc-text strong { color: var(--sev-high, #f97316); }

/* ── First-Visit Banner ────────────────────────────────────────── */
.first-visit-banner {
  display: none; /* shown via JS after localStorage check */
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--bg-card)), color-mix(in srgb, var(--accent) 3%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.first-visit-banner .fvb-text { flex: 1; }
.first-visit-dismiss {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.first-visit-dismiss:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Sparkline for trend visualization */
.sparkline {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-xs);
}
.sparkline-placeholder {
  display: inline-block;
  width: 60px;
  height: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 20px;
}


/* ════════════════════════════════════════════════════════════════ */
/* MINI TREND CHART (Pulse Layer 1 — always visible)               */
/* ════════════════════════════════════════════════════════════════ */

.mini-trend-section {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.mini-trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}
.mini-trend-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.chart-range-selector {
  display: flex;
  gap: 2px;
  background: var(--bg-body);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.chart-controls {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}
.chart-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--bg-body);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.view-btn {
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.view-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-card);
}
.view-btn.active {
  background: var(--accent);
  color: #fff;
}
.chart-tooltip {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 0.72rem;
  color: var(--text-primary);
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  pointer-events: none;
  z-index: 100;
  max-width: 260px;
  white-space: nowrap;
}
#mini-trend-container {
  position: relative;
}
.range-btn {
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.range-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-card);
}
.range-btn.active {
  background: var(--accent);
  color: #fff;
}
.mini-trend-chart {
  margin-bottom: 2px;
}
.mini-trend-legend {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: center;
}
.mtl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: var(--text-tertiary);
}
.mtl-dot {
  width: 10px;
  height: 2px;
  border-radius: 1px;
}
.mtl-dot-accent { background: var(--accent); }
.mtl-dot-medium { background: var(--sev-medium); }
.mtl-period {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.skeleton-chart-compact {
  height: auto;
  border: none;
  padding: var(--space-sm) var(--space-md);
}



@media (max-width: 768px) {
  .pulse-lede {
    padding: var(--space-md);
  }
  .lede-headline {
    font-size: 1.25rem;
  }
  .lede-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .period-toggle-bar {
    justify-content: center;
  }
  .period-compare-strip {
    padding: var(--space-sm);
  }
  .pcs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pcs-window {
    width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════ */
/* AI OUTLOOK CARD (Pulse — from AI Engine forecasts)              */
/* ════════════════════════════════════════════════════════════════ */

.ai-outlook-section {
  margin-bottom: var(--space-lg);
}
.ai-outlook-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid #6366f1;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.ai-outlook-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.ai-outlook-icon {
  font-size: var(--text-lg);
  color: #6366f1;
}
.ai-outlook-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.ai-badge-sm {
  font-size: 0.6rem;
  font-weight: 600;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ai-outlook-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-sm);
}
.ai-outlook-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.ai-signal {
  font-size: var(--text-xs);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  line-height: 1.3;
}
.ai-signal-risk {
  color: var(--sev-high);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.ai-signal-opp {
  color: var(--success);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
}


/* ════════════════════════════════════════════════════════════════ */
/* AI FORECAST OUTLOOK & SIGNALS (in AI View)                      */
/* ════════════════════════════════════════════════════════════════ */

.ai-fc-outlook {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  border-left: 3px solid #6366f1;
}
.ai-fc-outlook-icon {
  font-size: var(--text-lg);
  color: #6366f1;
  flex-shrink: 0;
  margin-top: 1px;
}
.ai-fc-outlook p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
}
.ai-fc-signals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.ai-fc-signal-group {
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ai-fc-signal-heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}
.ai-fc-risks-heading {
  color: var(--sev-high);
}
.ai-fc-opps-heading {
  color: var(--success);
}
.ai-fc-signal-list {
  margin: 0;
  padding-left: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.6;
}
.ai-fc-signal-list li {
  margin-bottom: 2px;
}


/* Health breakdown */
.health-breakdown {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.hb-item { display: flex; align-items: center; gap: var(--space-sm); }
.hb-bar-track { flex: 1; height: 6px; background: var(--bg-inset); border-radius: 3px; overflow: hidden; }
.hb-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.8s ease; }
.hb-label { font-size: var(--text-xs); color: var(--text-secondary); min-width: 100px; }
.hb-score { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* Health diagnostic panel (Explore tab) */
.health-overall {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--bg-inset);
  border-radius: var(--radius-lg);
}
.health-score-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.health-score-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
}
.health-score-grade {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.health-path-to-c {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.4;
}

.health-breakdown-detailed {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.hb-detailed-item {
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.hb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.hb-detailed-item .hb-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.hb-detailed-item .hb-score {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.hb-detailed-item .hb-bar-track {
  height: 8px;
  background: var(--bg-inset);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-md);
}
.hb-detailed-item .hb-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease;
}
.hb-bar-critical { background: var(--sev-critical); }
.hb-bar-warn { background: var(--sev-high); }
.hb-bar-good { background: var(--success); }
.hb-meaning {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}
.hb-action {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  font-style: italic;
}
.health-task-link {
  font-size: var(--text-xs);
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.health-task-link:hover {
  text-decoration: underline;
}

/* Section headings */
.section-heading {
  font-size: var(--text-lg);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--space-sm);
  line-height: 1.35;
}
.section-heading .help-text {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-tertiary);
}
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-inset); color: var(--text-tertiary);
  font-size: var(--text-xs); font-weight: 600;
  min-width: 22px; height: 22px;
  border-radius: var(--radius-full);
  padding: 0 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.badge-time {
  font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary);
  margin-left: 6px;
}


/* ════════════════════════════════════════════════════════════════ */
/* AI BRIEFING COLLAPSIBLE SECTIONS                               */
/* ════════════════════════════════════════════════════════════════ */

.briefing-collapsible {
  margin-bottom: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}

.briefing-collapsible[open] {
  box-shadow: var(--shadow-sm);
}

.briefing-section-summary {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-inset);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  list-style: none;
}

.briefing-section-summary:hover {
  background: var(--bg-card-hover);
}

.briefing-section-summary::-webkit-details-marker {
  display: none;
}

.briefing-section-summary::before {
  content: "\25B6";
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-right: var(--space-sm);
  transition: transform 0.2s ease;
  width: 12px;
  flex-shrink: 0;
}

.briefing-collapsible[open] .briefing-section-summary::before {
  transform: rotate(90deg);
}

.briefing-section-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.briefing-priority .briefing-section-title {
  color: var(--accent);
}

.briefing-section-content {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--border);
}

.briefing-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-md) 0;
}

.briefing-task-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  transition: all 0.2s ease;
}

.briefing-task-link:hover {
  background: var(--accent);
  color: var(--text-inverse);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════ */
/* AI BRIEFING COMPACT                                            */
/* ════════════════════════════════════════════════════════════════ */

.ai-briefing-compact {
  margin-bottom: var(--space-lg);
}

.ai-briefing-card-compact {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ai-briefing-header-compact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}

.ai-briefing-title-compact {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.ai-briefing-content-compact {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.briefing-text-compact {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin: 0;
  flex: 1;
}

.briefing-expand-link {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.briefing-expand-link:hover {
  text-decoration: underline;
}

/* ── Pulse Layer 2: detail cards (collapsible, pulse-native) ── */
.pulse-detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin: var(--space-sm) 0;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.pulse-detail-card[open] {
  box-shadow: var(--shadow-sm);
}
.pulse-detail-card[open] .pdc-chevron {
  transform: rotate(90deg);
}
.pdc-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pdc-summary::-webkit-details-marker { display: none; }
.pdc-summary:hover { background: var(--bg-hover); }
.pdc-icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}
.pdc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdc-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.pdc-hook {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.pdc-chevron {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.pdc-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--border);
}

/* ── Outbound funnel bars (Pulse Layer 2) ── */
.ob-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.ob-stage {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
}
.ob-label {
  width: 80px;
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: 500;
}
.ob-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-body);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.ob-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.5s ease;
}
.ownership-stage .ob-bar-fill {
  background: var(--success);
}
.ob-count {
  width: 36px;
  text-align: right;
  color: var(--text-secondary);
}

.outbound-control-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.outbound-control-row-actions {
  margin-bottom: var(--space-xs);
}

.outbound-control-row-actions .btn-primary,
.outbound-control-row-actions .btn-secondary {
  white-space: normal;
}

.outbound-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  padding: 0.2rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid transparent;
}

.outbound-status-positive {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.outbound-status-warning {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.outbound-status-neutral {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-color: var(--border);
}

.outbound-meta-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.outbound-discovery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  width: 100%;
}

.outbound-discovery-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  padding: 0.4rem 0.5rem;
}

.outbound-discovery-opt input {
  margin: 0;
}

.outbound-pool-v2 {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.outbound-field-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 6px;
}

.outbound-pool-prompt {
  width: 100%;
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  padding: 0.55rem;
  resize: vertical;
  margin-bottom: var(--space-xs);
}

.outbound-cadence-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}

.outbound-cadence-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  padding: 0.25rem 0.65rem;
  cursor: pointer;
}

.outbound-cadence-chip--active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.outbound-inline-link {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.outbound-inline-link:hover {
  text-decoration: underline;
}

.outbound-approval-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

@media (max-width: 640px) {
  .outbound-discovery-grid {
    grid-template-columns: 1fr;
  }

  .outbound-control-row-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .outbound-control-row-actions .btn-primary,
  .outbound-control-row-actions .btn-secondary {
    width: 100%;
  }

  .outbound-meta-text {
    width: 100%;
  }
}

/* ═════════════════════════════════════════════════════════════ */
/* NARRATIVE STACK (Phase D1) — diagnosis + lede + health + streak */
/* ═════════════════════════════════════════════════════════════ */
.narrative-stack {
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--success);
  transition: border-color 0.2s ease;
}
.narrative-stack[data-severity="needs_attention"] { border-left-color: var(--sev-critical); }
.narrative-stack[data-severity="watch_this"] { border-left-color: var(--sev-medium); }
.narrative-stack[data-severity="on_track"] { border-left-color: var(--success); }

.narrative-stack .ns-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.narrative-stack .ns-summary-text { flex: 1 1 auto; min-width: 0; }
.narrative-stack .ns-headline {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-lg, 1.125rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.narrative-stack .ns-summary-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.narrative-stack .ns-severity,
.narrative-stack .ns-health,
.narrative-stack .ns-streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.narrative-stack .ns-severity-needs_attention { background: rgba(220, 38, 38, 0.08); color: var(--sev-critical); }
.narrative-stack .ns-severity-watch_this { background: rgba(234, 179, 8, 0.1); color: var(--sev-medium); }
.narrative-stack .ns-severity-on_track { background: rgba(34, 197, 94, 0.1); color: var(--success); }
.narrative-stack .ns-health-green { background: rgba(34, 197, 94, 0.1); color: var(--success); }
.narrative-stack .ns-health-amber { background: rgba(234, 179, 8, 0.1); color: var(--sev-medium); }
.narrative-stack .ns-health-red { background: rgba(220, 38, 38, 0.08); color: var(--sev-critical); }
.narrative-stack .ns-health-neutral { background: rgba(0,0,0,0.04); color: var(--text-secondary); }
.narrative-stack .ns-health-score { font-weight: 700; }
.narrative-stack .ns-streak { background: rgba(249, 115, 22, 0.1); color: #c2410c; }

.narrative-stack .ns-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs, 0.75rem);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.narrative-stack .ns-toggle:hover,
.narrative-stack .ns-toggle:focus-visible {
  background: rgba(0,0,0,0.04);
  color: var(--text-primary);
  outline: none;
}
.narrative-stack .ns-toggle-chevron { transition: transform 0.2s ease; display: inline-block; }
.narrative-stack[data-expanded="true"] .ns-toggle-chevron { transform: rotate(180deg); }

.narrative-stack .ns-body {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.narrative-stack .ns-body[hidden] { display: none; }

/* Soften nested cards so the stack doesn't read as "boxes inside a box". */
.narrative-stack .ns-body .pulse-lede {
  margin: 0;
  border: none;
  border-left: none;
  background: transparent;
  padding: 0;
}
.narrative-stack .ns-body .site-health-card { margin: 0; }

/* ════════════════════════════════════════════════════════════════ */
/* PRIORITY CARDS                                                  */
/* ════════════════════════════════════════════════════════════════ */

.priority-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-sm);
  transition: all 0.2s ease;
  border-left: 4px solid var(--border);
}
.priority-card:hover { box-shadow: var(--shadow-md); border-color: var(--border); }
.priority-card.sev-critical { border-left-color: var(--sev-critical); }
.priority-card.sev-high     { border-left-color: var(--sev-high); }
.priority-card.sev-medium   { border-left-color: var(--sev-medium); }
.priority-card.sev-low      { border-left-color: var(--sev-low); }

.pc-rank {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--text-tertiary);
  min-width: 28px;
  padding-top: 2px;
}

.pc-body { flex: 1; min-width: 0; }
.pc-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.pc-why {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-normal);
}

.pc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-badge {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 500;
}
.pc-impact { background: var(--accent-bg); color: var(--accent); }
.pc-effort { background: var(--bg-inset); color: var(--text-secondary); }
.pc-pages { background: var(--bg-inset); color: var(--text-tertiary); }
.pc-confidence { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.pc-source { background: var(--bg-inset); color: var(--text-tertiary); font-style: italic; }
.pc-reversibility {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
  padding-left: 2px;
}

.pc-start {
  flex-shrink: 0;
  padding: 8px 18px;
  border: none; border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  align-self: center;
}
.pc-start:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Compressed priority card for Pulse tab */
.priority-compressed {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
.priority-compressed:hover {
  background: var(--bg-card-hover);
  transform: translateX(2px);
}
.priority-compressed .pc-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}
.priority-compressed .pc-arrow {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: 500;
}

.show-all-btn {
  display: block;
  width: 100%;
  padding: var(--space-md);
  margin-top: var(--space-sm);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: var(--text-sm); font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.show-all-btn:hover { background: var(--accent-bg); border-color: var(--accent); }


/* ════════════════════════════════════════════════════════════════ */
/* QUICK WINS                                                      */
/* ════════════════════════════════════════════════════════════════ */

.quick-wins { margin-top: var(--space-2xl); }
.qw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.qw-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-xs);
  transition: all 0.2s ease;
}
.qw-card:hover { box-shadow: var(--shadow-md); }
.qw-path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); font-weight: 500; }
.qw-task { font-size: var(--text-sm); color: var(--text-secondary); flex: 1; line-height: var(--leading-normal); }
.qw-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-xs); }
.qw-time { font-size: var(--text-xs); color: var(--text-tertiary); }
.qw-go {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--accent); background: none; border: none;
  cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.qw-go:hover { background: var(--accent-bg); }
.qw-agent-copy {
  font-size: var(--text-xs); font-weight: 500;
  color: var(--text-tertiary); background: none; border: 1px solid var(--border);
  cursor: pointer; padding: 2px 8px; border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.qw-agent-copy:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.qw-agent-copy--primary {
  color: var(--accent); border-color: var(--accent-muted, var(--accent));
  font-weight: 600; padding: 3px 10px;
}
.qw-agent-copy--primary:hover { background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent); }
.qw-task-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

/* Agent brief strip in mission-header */
.agent-brief-strip { margin-top: var(--space-sm); }
.btn-agent-brief {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--accent-bg, rgba(99,102,241,0.08)); border: 1px solid var(--accent-muted, var(--accent));
  color: var(--accent); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-md);
  cursor: pointer; font-size: var(--text-sm); font-weight: 600; transition: all 0.15s;
}
.btn-agent-brief:hover { background: var(--accent); color: #fff; }
.abi-icon { font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.85; }
.abi-label { font-weight: 700; }
.abi-hint { font-size: var(--text-xs); color: inherit; opacity: 0.7; margin-left: var(--space-xs); }


/* ════════════════════════════════════════════════════════════════ */
/* PROGRESS                                                        */
/* ════════════════════════════════════════════════════════════════ */

.progress-ambient {
  margin-top: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}
.progress-ambient:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
.progress-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.progress-bar-mini {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}
.progress-bar-bg {
  width: 60px;
  height: 6px;
  background: var(--bg-inset);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-pct {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 28px;
}
.progress-numbers {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: 500;
}
@media (max-width: 768px) {
  .progress-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .progress-bar-mini {
    width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════ */
/* ACTION VIEW                                                     */
/* ════════════════════════════════════════════════════════════════ */

.action-empty {
  color: var(--text-secondary);
}
.action-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-md); opacity: 0.4; text-align: center; }
.action-empty h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); color: var(--text-primary); }
.action-empty p { font-size: var(--text-sm); margin-bottom: var(--space-lg); }

.action-header {
  display: flex; align-items: flex-start; gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.back-link {
  font-size: var(--text-sm); color: var(--accent);
  background: none; border: none; cursor: pointer;
  padding: 4px 0; white-space: nowrap;
  font-weight: 500;
}
.back-link:hover { text-decoration: underline; }
.action-title-area { flex: 1; }
.action-title-area h2 { font-size: var(--text-lg); margin-bottom: 2px; }
.action-meta { font-size: var(--text-xs); color: var(--text-tertiary); }

.action-progress-bar {
  height: 4px; background: var(--bg-inset);
  border-radius: 2px; overflow: hidden;
  margin-bottom: var(--space-xl);
}
.action-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Page card in action view */
.action-page-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  animation: fadeIn 0.3s ease;
}

.apc-url {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}
.apc-url a { color: inherit; text-decoration: none; }
.apc-url a:hover { text-decoration: underline; }
.apc-scope { color: var(--text-secondary); font-style: italic; }

.apc-problem {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
}

.apc-steps { margin-bottom: var(--space-lg); }
.apc-step {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}
.apc-step-check {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  transition: all 0.15s ease;
  background: var(--bg-card);
  font-size: 11px;
  color: transparent;
}
.apc-step-check:hover { border-color: var(--accent); }
.apc-step-check.checked {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.apc-step-text.checked { text-decoration: line-through; color: var(--text-tertiary); }

.apc-code-block {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--accent);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  overflow-x: auto;
}

.apc-note-area { margin-top: var(--space-md); }
.apc-note-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-card);
  resize: vertical;
  min-height: 42px;
  transition: border-color 0.2s;
}
.apc-note-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-glow); }
.apc-note-input::placeholder { color: var(--text-tertiary); }

.action-nav {
  display: flex; justify-content: flex-end; gap: var(--space-sm);
}


/* ════════════════════════════════════════════════════════════════ */
/* EXPLORE VIEW                                                    */
/* ════════════════════════════════════════════════════════════════ */

.explore-section {
  margin-bottom: var(--space-2xl);
}
.section-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}

.chart-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-height: 200px;
  overflow-x: auto;
}

.geo-table-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.geo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.geo-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.geo-table td {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
  color: var(--text-primary);
}
.geo-table tr:hover td { background: var(--bg-card-hover); }

/* Geo Opportunities */
.geo-opportunities {
  margin-top: var(--space-md);
}
.geo-opp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.geo-opp-card {
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: var(--radius-md);
}
.geo-opp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.geo-opp-gap {
  font-size: var(--text-xs);
  font-weight: 700;
}
.geo-opp-stats {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.geo-opp-rec {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.explore-filter-bar {
  display: flex; gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.filter-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-xs); font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

.explore-row {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.explore-row:hover { background: var(--bg-card-hover); }
.explore-row:last-child { border-bottom: none; }
.er-dot { font-size: var(--text-sm); flex-shrink: 0; }
.er-title { flex: 1; font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; }
.er-pages { font-size: var(--text-xs); color: var(--text-tertiary); min-width: 60px; text-align: right; }
.er-effort { font-size: var(--text-xs); color: var(--text-tertiary); min-width: 70px; text-align: right; }
.er-start {
  font-size: var(--text-xs); font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer;
  padding: 4px 10px; border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.er-start:hover { background: var(--accent-bg); }

/* Explore row — impact & confidence badges */
.er-impact { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--radius-sm); flex-shrink: 0; }
.er-impact-high { color: color-mix(in srgb, var(--sev-critical) 65%, #000000); background: var(--sev-critical-bg); }
.er-impact-med  { color: var(--sev-medium-text); background: var(--sev-medium-bg); }
.er-impact-low  { color: color-mix(in srgb, var(--success) 65%, #000000); background: var(--success-bg); }
.er-conf { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: var(--radius-sm); flex-shrink: 0; }
.er-conf-high        { color: color-mix(in srgb, var(--success) 60%, #000000); background: var(--success-bg); }
.er-conf-moderate    { color: var(--sev-medium-text); background: var(--sev-medium-bg); }
.er-conf-low         { color: var(--sev-medium-text); background: var(--sev-medium-bg); }
.er-conf-exploratory { color: var(--text-tertiary); background: var(--bg-inset); }
.er-status { font-size: var(--text-xs); flex-shrink: 0; min-width: 24px; text-align: center; }

/* Priority card — confidence levels */
.pc-conf-high        { color: color-mix(in srgb, var(--success) 60%, #000000); }
.pc-conf-moderate    { color: var(--sev-medium-text); }
.pc-conf-low         { color: var(--sev-medium-text); }
.pc-conf-exploratory { color: var(--text-tertiary); }

/* Weekly mission — confidence levels */
.wm-conf-high { color: color-mix(in srgb, var(--success) 60%, #000000); }
.wm-conf-mod  { color: var(--sev-medium-text); }
.wm-conf-low  { color: var(--sev-medium-text); }
.wm-conf-exp  { color: var(--text-tertiary); }

/* Weekly mission — evidence & diagnosis */
.wm-evidence { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0; font-size: var(--text-xs); color: var(--text-secondary); background: var(--bg-surface); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.wm-evidence-icon { flex-shrink: 0; }
.wm-evidence-text { line-height: 1.4; }
.wm-diagnosis { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0; font-size: var(--text-xs); color: var(--text-primary); background: var(--sev-medium-bg); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--sev-medium) 40%, var(--border)); }
.wm-diagnosis-icon { flex-shrink: 0; }
.wm-done-looks-like { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0; font-size: var(--text-xs); color: var(--text-secondary); }
.wm-done-icon { flex-shrink: 0; }

/* Mission card — evidence block */
.mc-evidence { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0; font-size: var(--text-xs); color: var(--text-secondary); }

.explore-insights {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════ */
/* BUTTONS                                                         */
/* ════════════════════════════════════════════════════════════════ */

.btn-primary {
  padding: 10px 22px;
  border: none; border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: var(--text-sm); font-weight: 600; font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }

.btn-secondary {
  padding: 10px 22px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: 500; font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-secondary:hover { border-color: var(--text-tertiary); color: var(--text-primary); }


/* ════════════════════════════════════════════════════════════════ */
/* MODAL                                                           */
/* ════════════════════════════════════════════════════════════════ */

.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.modal-overlay.open { display: flex; }

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  width: 90%; max-width: 420px;
  box-shadow: var(--shadow-lg);
}
.modal-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.modal-card textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-body);
  resize: vertical;
  margin-bottom: var(--space-md);
}
.modal-card textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-glow); }
.modal-btns { display: flex; justify-content: flex-end; gap: var(--space-sm); }


/* ════════════════════════════════════════════════════════════════ */
/* TOAST                                                           */
/* ════════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: var(--space-lg); left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: var(--space-sm) var(--space-lg);
  background: var(--text-primary);
  color: var(--bg-body);
  font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 300;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.toast-info { background: var(--text-primary); color: var(--bg-body); }
.toast.toast-success { background: color-mix(in srgb, var(--success) 85%, black); color: #fff; }
.toast.toast-warning { background: color-mix(in srgb, var(--sev-medium-text) 90%, black); color: #fff; }
.toast.toast-error { background: color-mix(in srgb, var(--sev-critical) 90%, black); color: #fff; }
@media (max-width: 640px) {
  .toast { bottom: calc(var(--space-lg) + 60px); max-width: 85vw; text-align: center; }
}


/* ════════════════════════════════════════════════════════════════ */
/* CELEBRATION                                                     */
/* ════════════════════════════════════════════════════════════════ */

.celebration {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 250;
  display: none;
}
.celebration.active { display: block; }
.confetti {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confettiFall 1.5s ease-out forwards;
}
.confetti-circle {
  border-radius: 50%;
  width: 6px; height: 6px;
}
.confetti-star {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid currentColor;
  background: none !important;
}
.celebration-flash {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,0.3) 0%, transparent 70%);
  animation: celebrationFlash 0.8s ease-out forwards;
}
.celebration-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  border: 3px solid var(--primary, #3b82f6);
  opacity: 0;
  animation: celebrationRing 1.2s ease-out 0.2s forwards;
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(500px) rotate(720deg) scale(0.2); }
}
@keyframes celebrationFlash {
  0%   { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%); }
  100% { width: 400px; height: 400px; opacity: 0; transform: translate(-50%, -50%); }
}
@keyframes celebrationRing {
  0%   { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%); }
  100% { width: 200px; height: 200px; opacity: 0; transform: translate(-50%, -50%); border-width: 1px; }
}


/* ════════════════════════════════════════════════════════════════ */
/* EMPTY STATE                                                     */
/* ════════════════════════════════════════════════════════════════ */

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* ════════════════════════════════════════════════════════════════ */
/* COPY BUTTON (for before/after in action view)                   */
/* ════════════════════════════════════════════════════════════════ */

.copy-btn {
  font-size: var(--text-xs);
  color: var(--accent);
  background: var(--accent-bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s;
  margin-left: var(--space-sm);
}
.copy-btn:hover { background: var(--accent); color: var(--text-inverse); }

.copy-btn-labeled {
  padding: var(--space-xs) var(--space-sm);
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  align-self: flex-end;
}

.copy-btn-labeled:hover {
  background: var(--accent);
  color: white;
}

.copy-btn-labeled:active {
  transform: scale(0.98);
}

/* Before/After boxes in action view */
.apc-compare {
  margin-bottom: var(--space-md);
}
.apc-compare-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.apc-compare-box {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.apc-compare-box.before {
  background: #fef2f2;
  border-left: 3px solid var(--sev-critical);
  color: #991b1b;
}
.apc-compare-box.after {
  background: #f0fdf4;
  border-left: 3px solid var(--success);
  color: #166534;
}
[data-theme="dark"] .apc-compare-box.before { background: #2a1215; color: #fca5a5; }
[data-theme="dark"] .apc-compare-box.after { background: #0f2a1f; color: #86efac; }


/* ════════════════════════════════════════════════════════════════ */
/* ENRICHMENT: SITE BADGE, KPI CONTEXT, KEYWORD TRENDS, ETC      */
/* ════════════════════════════════════════════════════════════════ */

.site-badge {
  padding: 2px 10px;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-badge {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  max-width: none;
}

.property-selector-wrap {
  position: relative;
  max-width: 220px;
}

.property-selector {
  appearance: none;
  max-width: 220px;
  width: 100%;
  padding: 5px 28px 5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-selector-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.68rem;
  pointer-events: none;
}

.property-selector:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin-top: var(--space-md);
}
.meta-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.trend-indicator-area {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
}
.trend-indicator {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: 600;
}
.trend-arrow {
  font-size: 1.4em;
  color: var(--text-secondary);
}
.trend-status {
  color: var(--text-primary);
}
.trend-explain {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  max-width: 220px;
  line-height: 1.45;
}

.kpi-context {
  display: block;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  margin-top: 2px;
  line-height: 1.35;
}

.subsection-heading {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.help-text {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-tertiary);
}

.hb-bar-warn {
  background: var(--sev-critical) !important;
}

/* Keyword Trends */
.keyword-trends {
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}
.kt-chips {
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.kt-chip {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}
.kt-improving { background: rgba(16,185,129,0.12); color: var(--success); }
.kt-stable { background: var(--bg-inset); color: var(--text-tertiary); }
.kt-declining { background: rgba(239,68,68,0.12); color: var(--sev-critical); }

.top-keywords {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: var(--space-sm);
}
.top-keywords.striking { margin-top: var(--space-sm); }
.tk-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.tk-kw {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: var(--text-primary);
  font-family: var(--font-mono, 'SFMono-Regular', Consolas, monospace);
}
.tk-kw small {
  color: var(--text-tertiary);
  font-size: 0.65rem;
}

/* Site Overview mini-stats */
.kpi-trend-section {
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}
.kpi-trend-chart {
  margin: var(--space-md) 0;
}
.kpi-trend-legend {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
}
.ktl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.ktl-dot {
  width: 10px;
  height: 3px;
  border-radius: 2px;
}

/* Site Overview mini-stats */
.site-overview {
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}
.so-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-md);
}
.so-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.so-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}
.so-label {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Pulse Footer */
.pulse-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border);
  margin-top: var(--space-lg);
}

/* Empty state card */
.empty-state-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.empty-icon { font-size: 2rem; margin-bottom: var(--space-sm); }

/* ── Section state cards (section-state-card.mjs) ─────────────────── */
.section-empty-state,
.section-locked-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--text-secondary);
}
.empty-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}
.empty-body,
.locked-body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 36ch;
  line-height: var(--leading-normal, 1.55);
}
.empty-cta {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 0.45rem 1.1rem;
  background: var(--accent);
  color: var(--text-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.empty-cta:hover { background: var(--accent-hover); }
.empty-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.upgrade-link {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 0.45rem 1.1rem;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.upgrade-link:hover {
  background: var(--accent-bg);
}
.upgrade-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.locked-icon,
.empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-xs);
  line-height: 1;
}

/* Action empty improvements */
.action-empty-content {
  max-width: 460px; margin: 0 auto; text-align: center;
}
.action-quick-picks {
  margin-top: var(--space-lg);
  text-align: left;
}
.aqp-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.aqp-btn {
  display: flex; align-items: center; gap: var(--space-md);
  width: 100%; padding: var(--space-md);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  margin-bottom: var(--space-sm);
}
.aqp-btn:hover { border-color: var(--accent); background: var(--accent-bg); }
.aqp-num { font-weight: 700; color: var(--accent); min-width: 24px; }
.aqp-text { flex: 1; }
.aqp-arrow { color: var(--text-tertiary); }

/* Pipeline checklist (Action tab first-run diagnostic) */
.pipeline-checklist { width: 100%; max-width: 400px; margin: var(--space-md) auto; text-align: left; }
.pipeline-progress-track { width: 100%; height: 4px; background: var(--border); border-radius: 2px; margin-bottom: var(--space-md); overflow: hidden; }
.pipeline-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success, #10b981)); border-radius: 2px; transition: width 0.6s ease; }
.pipeline-steps { display: grid; gap: 6px; }
.pipeline-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 0.82rem; color: var(--text-tertiary); }
.pipeline-step-done { color: var(--success, #10b981); }
.pipeline-step-icon { width: 20px; text-align: center; flex-shrink: 0; }
.pipeline-step-label { flex: 1; }
.pipeline-step-cta { padding: 4px 12px; border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--accent); font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.pipeline-step-cta:hover { background: var(--accent); color: #fff; }
.pipeline-next-hint { font-size: 0.75rem; color: var(--text-secondary); margin-top: var(--space-sm); text-align: center; }
.pipeline-next-btn { margin-top: 4px; padding: 8px 20px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.pipeline-next-btn:hover { opacity: 0.88; }

.section-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg) 0;
  line-height: 1.5;
}

.explore-header {
  margin-bottom: var(--space-lg);
}
.explore-header h2 {
  font-size: 1.25rem;
  margin-bottom: var(--space-xs);
}

/* Section jump-link navigation ribbon */
.explore-section-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 0;
  margin-bottom: var(--space-md);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-body);
  border-bottom: 1px solid var(--border);
}
.esn-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.esn-link:hover, .esn-link:focus-visible {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}
.esn-icon { font-size: 0.85rem; }
.esn-label { font-weight: 500; }

/* Action context */
.action-context-box {
  padding: var(--space-md);
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}
.action-context-box strong { color: var(--text-primary); }

/* ── Action context strips ─────────────────────────────────── */
.action-context-strip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}
.action-context-strip--diag {
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
}
.action-context-strip--lag {
  background: rgba(255, 177, 66, .10);
  border-left: 3px solid rgba(255, 177, 66, .5);
  color: #b87a00;
}
.action-context-strip--indexing {
  background: rgba(239, 68, 68, .08);
  border-left: 3px solid rgba(239, 68, 68, .4);
  color: var(--sev-critical, #ef4444);
}
.acs-label {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.acs-text { flex: 1; color: inherit; }
.acs-link {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.acs-link:hover { text-decoration: underline; }

/* ── Explore indexing coverage notice ───────────────────────── */
.explore-index-coverage-notice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: rgba(239, 68, 68, .07);
  border-left: 3px solid rgba(239, 68, 68, .35);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  line-height: 1.4;
}
.explore-icn-text { flex: 1; }
.explore-icn-link {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.explore-icn-link:hover { text-decoration: underline; }

/* ── AI live signal banner ──────────────────────────────────── */
.ai-live-signal {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  overflow: hidden;
}
.ai-live-signal--critical {
  border-color: rgba(239, 68, 68, .4);
  background: rgba(239, 68, 68, .06);
}
.ai-live-signal--warning {
  border-color: rgba(255, 177, 66, .4);
  background: rgba(255, 177, 66, .07);
}
.ai-live-signal-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ai-live-signal-summary::-webkit-details-marker { display: none; }
.ai-live-signal-icon { font-size: 0.85rem; flex-shrink: 0; }
.ai-live-signal-label {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-live-signal-headline {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-live-signal-body {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border);
}
.ai-live-signal-body p { margin: 0 0 var(--space-xs); color: var(--text-secondary); }
.ai-live-signal-link {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.ai-live-signal-link:hover { text-decoration: underline; }

/* ── AI staleness note ──────────────────────────────────────── */
.ai-staleness-note {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}
.ai-staleness-text { flex: 1; }
.ai-staleness-link {
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  padding: 0;
  white-space: nowrap;
}
.ai-staleness-link:hover { text-decoration: underline; }

/* Sparklines */
.sparkline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}
.spark-card {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.spark-card.spark-up { border-left: 3px solid var(--success); }
.spark-card.spark-down { border-left: 3px solid var(--sev-critical); }
.spark-card.spark-stable { border-left: 3px solid var(--text-tertiary); }
.spark-kw {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spark-middle { flex: 1; min-width: 50px; }
.spark-svg { width: 100%; height: 24px; }
.spark-pos {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.spark-dir { font-size: 0.65rem; }
.spark-up .spark-dir { color: var(--success); }
.spark-down .spark-dir { color: var(--sev-critical); }
.spark-stable .spark-dir { color: var(--text-tertiary); }

/* Backlink Sparkline */
.backlink-sparkline-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 120px;
}
.backlink-sparkline-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.backlink-sparkline {
  width: 100%;
  height: 32px;
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.backlink-sparkline-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
}
.backlink-current-count {
  font-weight: 700;
  color: var(--text-primary);
}
.backlink-trend-indicator {
  font-weight: 600;
}
.backlink-trend-up { color: var(--success); }
.backlink-trend-down { color: var(--sev-critical); }
.backlink-trend-stable { color: var(--text-tertiary); }

/* Chart legend */
.chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.legend-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: var(--bg-inset);
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.badge-time {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--success);
}

/* ════════════════════════════════════════════════════════════════ */
/* EXECUTIVE SUMMARY                                               */
/* ════════════════════════════════════════════════════════════════ */
.exec-summary-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.exec-summary-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}
.exec-verdict {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.exec-findings {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.exec-finding {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.exec-finding-icon {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
}
.exec-finding-detail {
  flex: 1;
}
.exec-finding-detail strong {
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════════ */
/* CONTENT AUDIT                                                   */
/* ════════════════════════════════════════════════════════════════ */
.content-audit-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.content-audit-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}
.ca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}
.ca-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.ca-score {
  font-size: 1.5rem;
  font-weight: 800;
  min-width: 48px;
  text-align: center;
}
.ca-path {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  word-break: break-all;
}
.ca-cta {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.ca-cta button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space-sm);
}
.ca-cta button:hover { opacity: 0.9; }

/* ════════════════════════════════════════════════════════════════ */
/* LIFECYCLE FUNNEL                                                */
/* ════════════════════════════════════════════════════════════════ */
.lifecycle-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.lifecycle-section h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}
.lifecycle-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.lf-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.lf-label {
  min-width: 90px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
}
.lf-bar-track {
  flex: 1;
  height: 22px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lf-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.4s ease;
}
.lf-count {
  min-width: 32px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}
.lf-kpis {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.lf-kpi {
  text-align: center;
}
.lf-kpi .lf-kpi-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
}
.lf-kpi .lf-kpi-label {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════ */
/* WINS & IMPACT ATTRIBUTION                                       */
/* ════════════════════════════════════════════════════════════════ */
.wins-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.badge-success {
  display: inline-block;
  background: var(--success);
  color: #fff;
  font-size: var(--text-xs);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
  vertical-align: middle;
  margin-left: var(--space-sm);
}
.impact-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.impact-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
}
.impact-kpi-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}
.impact-kpi-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.wins-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.win-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0.02));
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: var(--radius-md);
}
.win-card-fail {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.02));
  border: 1px solid rgba(245, 158, 11, 0.15);
}
.win-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.win-body {
  flex: 1;
  min-width: 0;
}
.win-narrative {
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: 1.5;
}
.win-meta {
  display: flex;
  gap: var(--space-md);
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.win-category {
  text-transform: capitalize;
  background: var(--bg-inset);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}
.impact-failures {
  margin-top: var(--space-md);
}
.impact-by-category {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.ibc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.ibc-card {
  padding: var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
}
.ibc-category {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: capitalize;
  color: var(--text-secondary);
}
.ibc-stats {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-top: 4px;
}
.ibc-rate {
  font-size: 1.25rem;
  font-weight: 800;
}
.ibc-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.ibc-metric {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}
.lf-effectiveness {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.lf-win {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

/* ── SERP PREVIEW ── */
.apc-serp-preview {
  margin-top: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.apc-serp-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}
.apc-serp-result {
  font-family: Arial, sans-serif;
}
.apc-serp-breadcrumb {
  font-size: 12px;
  color: #202124;
  line-height: 1.3;
}
.apc-serp-title {
  font-size: 18px;
  color: #1a0dab;
  line-height: 1.2;
  margin: 2px 0;
  text-decoration: none;
  cursor: pointer;
}
.apc-serp-title:hover { text-decoration: underline; }
.apc-serp-desc {
  font-size: 13px;
  color: #4d5156;
  line-height: 1.4;
}
.apc-serp-missing {
  font-weight: 700;
  color: #202124;
}
.apc-serp-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
  font-style: italic;
}

/* ── CTR BENCHMARK ── */
.apc-ctr-bench {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.apc-bench-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.apc-bench-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.apc-bench-impact {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.apc-bench-bar-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin: var(--space-xs) 0;
}
.apc-bench-bar-expected {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--text-tertiary);
  opacity: 0.35;
  border-radius: 4px;
}
.apc-bench-bar-actual {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--accent);
  border-radius: 4px;
}
.apc-bench-legend {
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

/* ── INSIGHT EMPTY / PAGE COUNTER ── */
.apc-insight-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.apc-page-counter {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-sm);
}

/* ── COMPLETION MODAL BUTTONS ── */
.completion-continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  transition: background 0.15s, border-color 0.15s;
}
.completion-continue-btn:hover {
  background: var(--bg);
  border-color: var(--text-tertiary);
}
.completion-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  border: none;
  background: var(--accent);
  color: #fff;
  transition: opacity 0.15s;
}
.completion-share-btn:hover { opacity: 0.88; }

/* Copilot Empty State */

.cp-empty-state {
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-card), color-mix(in srgb, var(--accent, #2563eb) 4%, var(--bg-card)));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.cp-empty-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cp-empty-message {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.5;
}

.cp-empty-steps {
  margin: 0;
  padding-left: 20px;
  list-style: decimal;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.cp-empty-steps li {
  margin: 6px 0;
}

.cp-empty-steps strong {
  color: var(--text-primary);
  font-weight: 600;
}

.cp-empty-hint {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--bg-inset));
  border-left: 3px solid var(--accent);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-style: italic;
}

/* ADOPTION LOOP VIEW */

.view-loop { display: none; }
.view-loop.active { display: block; }

.adoption-loop-shell {
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.al-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.al-eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.al-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-2xl);
  line-height: 1.1;
}
.al-subtitle {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.al-focus-chip {
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border));
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--bg-card));
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 700;
}
.al-status-pill {
  flex: 0 0 auto;
  min-width: 168px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.al-status-pill span,
.al-metric-label {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.al-status-pill strong {
  color: var(--text-primary);
  font-size: var(--text-base);
}
.al-metric-strip,
.al-outcome-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-sm);
}
.al-metric {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.al-metric--highlight {
  border-color: var(--success, #16a34a);
  background: color-mix(in srgb, var(--success, #16a34a) 10%, var(--bg-card));
}
.al-metric--attention {
  border-color: var(--warning, #d97706);
  background: color-mix(in srgb, var(--warning, #d97706) 10%, var(--bg-card));
}
.al-metric-value {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
}
.al-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
  gap: var(--space-lg);
  align-items: start;
}
.al-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.al-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: var(--space-lg);
}
.al-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.al-panel-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 700;
}
.al-panel-head span {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.al-telemetry-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-md);
}
.al-panel--telemetry,
.al-panel--event-flow {
  min-width: 0;
}
.al-telemetry-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  margin-bottom: var(--space-md);
}
.al-telemetry-score strong {
  color: var(--text-primary);
  font-size: var(--text-2xl);
  line-height: 1;
}
.al-telemetry-score span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
}
.al-telemetry-score--ready { border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border)); background: color-mix(in srgb, var(--success, #16a34a) 10%, var(--bg-card)); }
.al-telemetry-score--attention { border-color: color-mix(in srgb, var(--warning, #d97706) 45%, var(--border)); background: color-mix(in srgb, var(--warning, #d97706) 10%, var(--bg-card)); }
.al-telemetry-score--low { border-color: color-mix(in srgb, var(--critical, #b91c1c) 38%, var(--border)); background: color-mix(in srgb, var(--critical, #b91c1c) 8%, var(--bg-card)); }
.al-telemetry-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}
.al-telemetry-kpis .al-metric { padding: var(--space-sm); }
.al-telemetry-kpis .al-metric-value { font-size: var(--text-lg); }
.al-telemetry-caveats {
  margin: var(--space-md) 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.al-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.al-flow-step {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.al-flow-step--observed {
  border-color: color-mix(in srgb, var(--success, #16a34a) 42%, var(--border));
  background: color-mix(in srgb, var(--success, #16a34a) 8%, var(--bg-inset));
}
.al-flow-node {
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.al-flow-step--observed .al-flow-node {
  color: var(--success, #16a34a);
  border-color: color-mix(in srgb, var(--success, #16a34a) 42%, var(--border));
}
.al-flow-step strong {
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.al-flow-step span,
.al-flow-step em {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-style: normal;
}
.al-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-md);
}
.al-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}
.al-source-chip strong { color: var(--text-primary); }
.al-source-chip--empty { border-style: dashed; }
.al-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.al-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-md);
}
.al-step-index {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--bg-inset);
  font-size: var(--text-sm);
  font-weight: 800;
}
.al-step--ready .al-step-index,
.al-step--active .al-step-index {
  border-color: var(--success, #16a34a);
  color: var(--success, #16a34a);
  background: color-mix(in srgb, var(--success, #16a34a) 10%, var(--bg-card));
}
.al-step-body {
  min-width: 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle, var(--border));
}
.al-step:last-child .al-step-body { border-bottom: 0; padding-bottom: 0; }
.al-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 4px;
}
.al-step-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}
.al-step-head span {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 700;
}
.al-step-body p {
  margin: 0 0 var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.al-inline-stats,
.al-chip-row,
.al-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.al-inline-stats span,
.al-chip,
.al-control-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-inset);
  font-size: var(--text-xs);
  font-weight: 600;
}
.al-control-chip {
  cursor: pointer;
  justify-content: space-between;
  min-height: 34px;
  padding: 6px 10px;
  text-align: left;
}
.al-control-chip-label {
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 700;
}
.al-control-chip-meta {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
}
.al-control-chip--wired {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 42%, var(--border));
  color: var(--text-primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #2563eb) 10%, var(--bg-inset)), var(--bg-card));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent, #2563eb) 24%, transparent);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.al-control-chip--wired:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 60%, var(--border));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}
.al-control-chip--disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.al-chip strong {
  color: var(--text-tertiary);
  font-weight: 800;
}
.al-chip--ready {
  border-color: color-mix(in srgb, var(--success, #16a34a) 42%, var(--border));
}
.al-chip--ready strong { color: var(--success, #16a34a); }
.al-funnel {
  display: grid;
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  gap: 6px;
}
.al-funnel span {
  min-width: 0;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-align: center;
}
.al-funnel strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--text-base);
}
.al-next-move {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.al-next-move span {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.al-next-move strong {
  color: var(--text-primary);
  font-size: var(--text-lg);
  line-height: 1.2;
}
.al-win-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.al-win-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.al-win-list strong { color: var(--success, #16a34a); }
.al-empty-text {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.al-panel--outcomes { margin-bottom: var(--space-xl); }

@media (max-width: 920px) {
  .al-header { flex-direction: column; align-items: stretch; }
  .al-status-pill { width: 100%; }
  .al-layout { grid-template-columns: 1fr; }
  .al-telemetry-layout { grid-template-columns: 1fr; }
  .al-flow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-metric-strip,
  .al-outcome-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .adoption-loop-shell { gap: var(--space-md); }
  .al-header h2 { font-size: var(--text-xl); }
  .al-metric-strip,
  .al-outcome-strip,
  .al-funnel,
  .al-flow-list,
  .al-telemetry-kpis { grid-template-columns: 1fr; }
  .al-panel { padding: var(--space-md); }
  .al-step { grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); }
  .al-step-index { width: 28px; height: 28px; font-size: var(--text-xs); }
  .al-step-head { align-items: flex-start; flex-direction: column; }
}

/* COPILOT VIEW */

.view-copilot { display: none; }
.view-copilot.active { display: block; }

.copilot-shell {
  max-width: 1120px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.cp-header {
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, var(--border));
  background:
    radial-gradient(1100px 280px at 0% 0%, color-mix(in srgb, var(--accent, #2563eb) 12%, transparent), transparent),
    linear-gradient(135deg, var(--bg-card), color-mix(in srgb, var(--accent, #2563eb) 6%, var(--bg-card)));
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.cp-eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cp-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.cp-subtitle {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cp-ribbon {
  margin: 12px 0 0;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border));
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--bg-card));
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 700;
}

.cp-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  padding: var(--space-lg);
}

.cp-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cp-panel-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 700;
}

.cp-panel-sub {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.cp-anxiety-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cp-anxiety-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-anxiety-q {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.cp-anxiety-signal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-anxiety-unit {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.cp-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  border: 1px solid transparent;
}

.cp-badge--good {
  color: var(--success, #16a34a);
  border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border));
  background: color-mix(in srgb, var(--success, #16a34a) 12%, var(--bg-inset));
}

.cp-badge--warn {
  color: var(--warning, #d97706);
  border-color: color-mix(in srgb, var(--warning, #d97706) 45%, var(--border));
  background: color-mix(in srgb, var(--warning, #d97706) 12%, var(--bg-inset));
}

.cp-badge--low {
  color: var(--critical, #b91c1c);
  border-color: color-mix(in srgb, var(--critical, #b91c1c) 40%, var(--border));
  background: color-mix(in srgb, var(--critical, #b91c1c) 10%, var(--bg-inset));
}

.cp-trend { font-size: var(--text-sm); font-weight: 800; }
.cp-trend--up { color: var(--success, #16a34a); }
.cp-trend--down { color: var(--critical, #b91c1c); }
.cp-trend--flat { color: var(--text-tertiary); }

.cp-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-md);
}

.cp-journey-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-journey-col-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cp-journey-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  background: var(--bg-inset);
}

.cp-journey-row--active {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 52%, var(--border));
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--bg-inset));
}

.cp-journey-row--past { opacity: 0.92; }

.cp-journey-stage {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cp-stage-index {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.cp-stage-name {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.cp-journey-arrow {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.cp-journey-desc {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.cp-stage-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cp-context-dot { color: var(--accent); }

.cp-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.cp-control-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  padding: 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-control-card--wired {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--accent, #2563eb) 42%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #2563eb) 10%, var(--bg-inset)), var(--bg-card));
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.cp-control-card--wired:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent, #2563eb) 65%, var(--border));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent, #2563eb) 22%, transparent);
}

.cp-control-card--disabled {
  opacity: 0.72;
  border-style: dashed;
}

.cp-control-label {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.cp-control-context {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.cp-proof-narrative,
.cp-momentum-line {
  margin: 0 0 var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cp-proof-list,
.cp-wins-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-proof-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  background: var(--bg-inset);
}

.cp-proof-transition {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cp-proof-state {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
}

.cp-proof-state--to {
  border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border));
  background: color-mix(in srgb, var(--success, #16a34a) 12%, var(--bg-inset));
}

.cp-proof-arrow { color: var(--text-tertiary); }

.cp-proof-detail {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cp-proof-detail strong { color: var(--text-primary); }

.cp-wins-title {
  margin: var(--space-sm) 0 6px;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.cp-gauge-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cp-gauge {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  padding: 10px;
}

.cp-gauge-icon {
  color: var(--accent);
  font-size: var(--text-lg);
  margin-bottom: 6px;
}

.cp-gauge-bar-wrap {
  height: 8px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text-tertiary) 20%, transparent);
  overflow: hidden;
}

.cp-gauge-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.45s ease;
}

.cp-gauge-bar.cp-badge--good { background: var(--success, #16a34a); }
.cp-gauge-bar.cp-badge--warn { background: var(--warning, #d97706); }
.cp-gauge-bar.cp-badge--low { background: var(--critical, #b91c1c); }

.cp-gauge-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-gauge-label {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.cp-gauge-score {
  font-size: var(--text-xs);
  font-weight: 800;
}

.cp-gauge-desc {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.cp-empty {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

@media (max-width: 920px) {
  .cp-two-col,
  .cp-gauge-row,
  .cp-control-grid,
  .cp-anxiety-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .al-control-chip--wired,
  .cp-control-card--wired,
  .cp-gauge-bar { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════ */
/* OUTCOME DASHBOARD (Impact view)                                    */
/* ══════════════════════════════════════════════════════════════════ */

.view-impact { display: none; }
.view-impact.active { display: block; }

.oid-container {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}
.oid-header { margin-bottom: var(--space-lg); }
.oid-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}
.oid-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* KPI strip */
.oid-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.oid-kpi {
  flex: 1 1 120px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oid-kpi--highlight { border-color: var(--accent); background: var(--accent-bg); }
.oid-kpi-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.oid-kpi--highlight .oid-kpi-value { color: var(--accent); }
.oid-kpi-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Table */
.oid-table-wrap { margin-bottom: var(--space-lg); overflow-x: auto; }
.oid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.oid-th {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.oid-row td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: middle;
}
.oid-type { color: var(--text-primary); font-weight: 500; }
.oid-count { color: var(--text-secondary); text-align: right; }
.oid-rate { font-weight: 600; text-align: right; white-space: nowrap; }
.oid-rate--improved { color: var(--sev-low, #22c55e); }
.oid-pending { color: var(--text-tertiary); text-align: right; }
.oid-bar-cell { min-width: 120px; }

/* Outcome bar */
.oib-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-subtle, var(--border));
}
.oib-improved { background: var(--sev-low, #22c55e); }
.oib-flat     { background: var(--text-tertiary); }
.oib-declined { background: var(--sev-critical, #ef4444); }
.oib-pending  { background: var(--border); }

/* Legend */
.oid-legend {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.oid-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.oid-legend-dot--improved { background: var(--sev-low, #22c55e); }
.oid-legend-dot--flat     { background: var(--text-tertiary); }
.oid-legend-dot--declined { background: var(--sev-critical, #ef4444); }
.oid-legend-dot--pending  { background: var(--border); }

/* Empty state */
.oid-empty {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text-secondary);
}
.oid-empty-icon { font-size: 2.5rem; margin-bottom: var(--space-md); opacity: 0.4; }
.oid-empty-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}
.oid-empty-desc { font-size: var(--text-sm); max-width: 420px; margin: 0 auto; }

/* Footer note */
.oid-footer { margin-top: var(--space-lg); }
.oid-note {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
}

/* ══════════════════════════════════════════════════════════════════ */
/* FACTOR CARDS & DRILLDOWN INTERACTIVE UI                            */
/* ══════════════════════════════════════════════════════════════════ */

/* Grid container for factor cards */
.cp-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Interactive factor cards in Surface Reminder */
.cp-factor-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  text-align: center;
}

.cp-factor-card h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.cp-score-display {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.cp-score-earned {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
}

.cp-score-sep {
  opacity: 0.5;
}

.cp-score-max {
  font-size: var(--text-sm);
  opacity: 0.7;
}

.cp-score-label {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: 1.3;
}

.cp-factor-card:hover {
  background: var(--bg-card-hover, color-mix(in srgb, var(--accent, #2563eb) 8%, var(--bg-card)));
  border-color: var(--accent-muted, color-mix(in srgb, var(--accent, #2563eb) 42%, var(--border)));
  transform: translateY(-2px);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--accent, #2563eb) 16%, transparent);
}

.cp-factor-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cp-factor-card:active {
  transform: translateY(-1px);
}

.cp-factor-card--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Data Health Scoring Component Styles */

.cp-factors-grid--three-col {
  grid-template-columns: repeat(3, 1fr);
}

.cp-data-health-button {
  position: relative;
}

.cp-data-health-button:hover {
  background: var(--bg-card-hover, color-mix(in srgb, #3b82f6 8%, var(--bg-card)));
  border-color: #3b82f6;
}

.cp-data-health-container {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  animation: slideDown 0.3s ease;
}

.cp-data-health-container[hidden] {
  display: none;
}

.cp-data-health-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Portfolio Score Header */
.cp-dh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.cp-dh-score-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
  min-width: 120px;
}

.cp-dh-score-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.cp-dh-score-large {
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.cp-dh-score-of {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-weight: 400;
}

.cp-dh-preview-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: 4px;
}

.cp-dh-next-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs, 4px);
  text-align: right;
}

.cp-dh-next-title {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 600;
}

.cp-dh-next-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.cp-dh-next-button:hover {
  filter: brightness(1.1);
}

.cp-dh-score-bar {
  display: block;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

.cp-dh-score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #059669);
  transition: width 0.3s ease;
}

.cp-dh-score-bar[aria-valuenow="< 30"] .cp-dh-score-bar-fill {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.cp-dh-score-bar[aria-valuenow="< 60"] .cp-dh-score-bar-fill {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.cp-dh-status-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.cp-dh-status-label[data-status="healthy"] {
  color: #059669;
}

.cp-dh-status-label[data-status="mixed"] {
  color: #b45309;
}

.cp-dh-status-label[data-status="low"] {
  color: #991b1b;
}

/* Primary Constraint Chip */
.cp-dh-constraint-chip {
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
}

.cp-dh-constraint-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.cp-dh-constraint-name {
  text-transform: capitalize;
}

.cp-dh-constraint-weight {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-weight: 400;
}

.cp-dh-constraint-reason {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Source Brief — collapsed one-liner */
.cp-dh-source-brief {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.cp-dh-source-brief-text {
  flex: 1;
}

.cp-dh-source-dot {
  flex-shrink: 0;
}

/* Source Provenance */
.cp-dh-source-provenance {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
}

.cp-dh-source-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.cp-dh-source-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 700;
}

.cp-dh-source-title {
  margin: 2px 0 0;
  font-size: var(--text-base);
  color: var(--text-primary);
}

.cp-dh-source-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.cp-dh-source-copy {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

.cp-dh-source-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-dh-source-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.cp-dh-source-confidence {
  font-style: normal;
  text-transform: lowercase;
  color: var(--text-tertiary);
}

.cp-dh-source-line {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.cp-dh-now-card {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--bg-card)), var(--bg-card));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-dh-now-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cp-dh-now-kicker {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
}

.cp-dh-now-title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.cp-dh-now-copy {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.cp-dh-now-button {
  align-self: start;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   Data Health Scorer — Marketer-Facing Styles
   ========================================================================== */

.cp-dh-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  color: var(--text-primary);
}

/* 1. Header — three practical stats */
.cp-dh-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cp-dh-header-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cp-dh-stat {
  background: var(--bg-card);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-dh-stat-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.cp-dh-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

/* 2. Bucket List & Rows */
.cp-dh-bucket-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cp-dh-bucket-row {
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cp-dh-bucket-row:hover {
  background: var(--bg-hover);
}

.cp-dh-bucket-header {
  display: grid;
  grid-template-columns: 1.3fr 60px 120px 24px;
  align-items: center;
  padding: 14px var(--space-md);
  gap: var(--space-sm);
}

.cp-dh-bucket-header--free {
  grid-template-columns: 1fr 24px;
}

.cp-dh-bucket-header--no-count {
  grid-template-columns: 1fr 120px 24px;
}

.cp-dh-bucket-lead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-dh-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cp-dh-state--inactive { background: var(--text-tertiary); opacity: 0.4; }
.cp-dh-state--building { background: #f59e0b; }
.cp-dh-state--active { background: #10b981; }

.cp-dh-bucket-name {
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Pipeline count */
.cp-dh-bucket-count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.cp-dh-count-num {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* Available pool badge */
.cp-dh-pool-badge {
  font-size: 11px;
  font-weight: 700;
  color: #10b981;
  background: color-mix(in srgb, #10b981 12%, transparent);
  border: 1px solid color-mix(in srgb, #10b981 25%, transparent);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.cp-dh-pool-badge--spent {
  color: #0369a1;
  background: color-mix(in srgb, #38bdf8 16%, transparent);
  border-color: color-mix(in srgb, #38bdf8 28%, transparent);
}

.cp-dh-bucket-trigger {
  display: flex;
  justify-content: center;
  color: var(--text-tertiary);
  transition: transform 0.3s ease;
}

.cp-dh-bucket-row[aria-expanded="true"] .cp-dh-bucket-trigger {
  transform: rotate(180deg);
  color: var(--accent);
}

/* 3. Detail View */
.cp-dh-row-detail {
  padding: 0 var(--space-md) 18px;
}

.cp-dh-bucket-row[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 3%, var(--bg-card));
}

.cp-dh-inline-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border);
}

.cp-dh-spend-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.cp-dh-spend-summary strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* 3-col contact snapshot */
.cp-dh-snapshot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cp-dh-snap-col {
  background: var(--bg-inset);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-dh-snap-col--yours {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-inset));
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

.cp-dh-snap-num {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.cp-dh-snap-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.cp-dh-snap-note {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Narrative */
.cp-dh-detail-narrative {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Action wrap */
.cp-dh-detail-action-wrap {
  display: flex;
  justify-content: flex-end;
}

.cp-dh-detail-action {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}

.cp-dh-detail-action:hover {
  transform: translateY(-1px);
}

/* Quality signals — collapsed section */
.cp-dh-quality-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cp-dh-quality-details summary {
  padding: 8px var(--space-md);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  cursor: pointer;
  list-style: none;
  background: var(--bg-inset);
  user-select: none;
}

.cp-dh-quality-details summary::after {
  content: ' ▾';
  float: right;
}

.cp-dh-quality-details[open] summary::after { content: ' ▴'; }

.cp-dh-detail-dimensions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-xl);
  padding: var(--space-md);
  background: var(--bg-card);
}

.cp-dh-dim-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-dh-dim-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.cp-dh-dim-track {
  height: 4px;
  background: var(--bg-inset);
  border-radius: var(--radius-full);
}

.cp-dh-dim-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
}

/* 4. Nudge Card */
.cp-dh-nudge-card {
  padding: var(--space-lg);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
}

.cp-dh-nudge-content h4 {
  margin: 0 0 6px;
  font-size: var(--text-md);
  color: var(--text-primary);
}

.cp-dh-nudge-content p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.cp-dh-nudge-btn {
  white-space: nowrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cp-dh-nudge-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 768px) {
  .cp-dh-bucket-header {
    grid-template-columns: 1fr 56px 90px 24px;
  }
  .cp-dh-bucket-header--free {
    grid-template-columns: 1fr 24px;
  }
  .cp-dh-bucket-header--no-count {
    grid-template-columns: 1fr 90px 24px;
  }
  .cp-dh-bucket-pips { display: none; }
  .cp-dh-detail-dimensions { grid-template-columns: 1fr; }
  .cp-dh-nudge-card { flex-direction: column; align-items: stretch; gap: var(--space-md); }
}

/* 6. Surface hint */
.cp-surface-hint {


  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.cp-surface-hint--interactive {
  color: var(--accent);
  font-weight: 500;
  animation: subtle-pulse 2s ease-in-out infinite;
}

@keyframes subtle-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Drilldown panel container */
.cp-drilldown-panel {
  display: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  margin-top: var(--space-sm);
  overflow: hidden;
  animation: slideDown 0.3s ease;
}

.cp-drilldown-panel.open {
  display: block;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cp-drilldown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-inset), var(--bg-card));
}

.cp-drilldown-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}

.cp-drilldown-close {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  transition: all 0.2s ease;
}

.cp-drilldown-close:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.cp-drilldown-content {
  padding: var(--space-md);
  display: block;
}

.cp-drilldown-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}

.cp-drilldown-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: var(--space-sm);
}

.cp-drilldown-card h4 {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cp-drilldown-card--summary,
.cp-drilldown-card--details,
.cp-drilldown-card--checklist {
  grid-column: 1 / -1;
}

.cp-drilldown-card--checklist {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

.cp-drilldown-notice {
  grid-column: 1 / -1;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-inset));
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.3;
  padding: 6px 10px;
}

.cp-factor-score {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cp-focus-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-focus-line {
  margin: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
}

.cp-focus-key {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.cp-focus-value {
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.35;
}

.cp-focus-value--empty {
  color: var(--text-tertiary);
  font-weight: 500;
}

.cp-focus-impact {
  color: var(--success, #10b981);
  font-size: var(--text-xs);
  font-weight: 700;
}

.cp-score-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.cp-score-progress {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--success, #10b981)));
}

.cp-score-text {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.cp-score-text-sub {
  color: var(--text-tertiary);
  font-weight: 500;
}

.cp-drilldown-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-drilldown-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  padding: 3px 8px;
}

.cp-drilldown-chip--priority {
  border-color: color-mix(in srgb, var(--warning, #d97706) 40%, var(--border));
  background: color-mix(in srgb, var(--warning, #d97706) 12%, var(--bg-card));
  color: var(--text-primary);
}

.cp-drilldown-details {
  display: block;
}

.cp-drilldown-details > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  list-style: none;
}

.cp-drilldown-details > summary::-webkit-details-marker {
  display: none;
}

.cp-drilldown-details > summary::before {
  content: '+';
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
}

.cp-drilldown-details[open] > summary::before {
  content: '−';
}

.cp-drilldown-details-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-drilldown-card .cp-opportunities-section,
.cp-drilldown-card .cp-timeline-section,
.cp-drilldown-card .cp-presence-checklist {
  gap: var(--space-sm);
}

@media (max-width: 900px) {
  .cp-drilldown-layout {
    grid-template-columns: 1fr;
  }

  .cp-drilldown-card--summary,
  .cp-drilldown-card--details,
  .cp-drilldown-card--checklist {
    grid-column: auto;
  }

  .cp-focus-line {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .cp-focus-impact {
    grid-column: 2;
  }
}

/* Loading state */
.cp-drilldown-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cp-drilldown-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-tertiary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.cp-drilldown-error {
  padding: var(--space-lg);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.08);
  color: var(--sev-critical, #ef4444);
  font-size: var(--text-sm);
  text-align: center;
}

/* Opportunities section */
.cp-opportunities-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cp-opp-header {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.cp-opp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-opp-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: var(--space-sm);
  transition: all 0.2s ease;
}

.cp-opp-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.cp-opp-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 6px;
}

.cp-opp-title {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.cp-opp-description {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.cp-opp-impact {
  margin: 6px 0 0;
  color: var(--success, #10b981);
  font-size: var(--text-xs);
  font-weight: 700;
}

.cp-opp-meta-inline {
  margin: 6px 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.3;
}

.cp-opp-more {
  margin: 2px 0 0;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.cp-opp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.cp-opp-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cp-opp-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--warning, #d97706);
}

.cp-opp-empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Timeline section */
.cp-timeline-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cp-timeline-header {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.cp-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-inset);
  transition: background 0.2s ease;
}

.cp-timeline-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-inset));
}

.cp-timeline-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 5px;
}

.cp-timeline-content {
  flex: 1;
  min-width: 0;
}

.cp-timeline-date {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.cp-timeline-score {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.cp-timeline-score-value {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

.cp-timeline-ratio {
  color: var(--text-tertiary);
}

.cp-timeline-score-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.cp-timeline-score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--success, #10b981)));
  border-radius: 2px;
}

.cp-timeline-empty {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* Milestone indicator (if included) */
.cp-milestone-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--success, #10b981);
  background: color-mix(in srgb, var(--success, #10b981) 10%, var(--bg-inset));
  color: var(--success, #10b981);
  font-size: var(--text-xs);
  font-weight: 600;
}

.cp-presence-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-presence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cp-presence-item {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 12px;
  background: var(--bg-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 10%, transparent);
}

.cp-presence-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cp-presence-item-head h5 {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.cp-presence-item-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cp-proof-primary {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.cp-proof-primary-label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.cp-proof-primary-link,
.cp-proof-primary-value {
  display: inline-block;
  font-size: 11px;
  line-height: 1.3;
}

.cp-proof-primary-link {
  color: var(--text-secondary);
  text-decoration: none;
}

.cp-proof-primary-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.cp-proof-primary-link--verified {
  color: color-mix(in srgb, var(--success, #16a34a) 76%, var(--text-secondary));
}

.cp-proof-primary-value {
  color: var(--text-tertiary);
}

.cp-proof-primary-state {
  font-size: 10px;
  font-weight: 600;
}

.cp-proof-primary-extra {
  font-size: 10px;
  color: var(--text-tertiary);
}

.cp-proof-next-action {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.cp-proof-tone--verified {
  color: var(--success, #16a34a);
}

.cp-proof-tone--pending {
  color: var(--warn, #d97706);
}

.cp-proof-tone--failed {
  color: var(--sev-critical, #dc2626);
}

.cp-proof-tone--neutral {
  color: var(--text-tertiary);
}

.cp-proof-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.cp-proof-badge--verified {
  color: var(--success, #16a34a);
  background: color-mix(in srgb, var(--success, #16a34a) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border));
}

.cp-proof-badge--pending {
  color: var(--warn, #d97706);
  background: color-mix(in srgb, var(--warn, #d97706) 14%, var(--bg-card));
  border-color: color-mix(in srgb, var(--warn, #d97706) 45%, var(--border));
}

.cp-proof-badge--failed {
  color: var(--sev-critical, #dc2626);
  background: color-mix(in srgb, var(--sev-critical, #dc2626) 10%, var(--bg-card));
  border-color: color-mix(in srgb, var(--sev-critical, #dc2626) 45%, var(--border));
}

.cp-proof-badge--neutral {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-secondary) 10%, var(--bg-card));
  border-color: color-mix(in srgb, var(--text-secondary) 28%, var(--border));
}

.cp-proof-prefill {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cp-proof-prefill-title {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
}

.cp-proof-prefill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-proof-prefill-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-proof-suggest {
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  color: var(--text-primary);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.cp-proof-suggest:hover {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--border));
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-card));
}

.cp-proof-prefill-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 11px;
}

.cp-proof-prefill-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.cp-proof-prefill-source {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 25%, var(--border));
  color: var(--text-tertiary);
  font-size: 10px;
  text-transform: lowercase;
}

.cp-proof-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cp-proof-inputs--extra {
  margin-top: 6px;
}

.cp-proof-options-more {
  border-top: 1px dashed color-mix(in srgb, var(--accent) 26%, var(--border));
  padding-top: 6px;
}

.cp-proof-options-summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.cp-proof-options-summary:hover {
  color: var(--text-primary);
}

.cp-proof-entry {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.cp-proof-entry-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.cp-proof-url-input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: var(--bg-inset);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: var(--text-xs);
}

.cp-proof-url-input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  outline-offset: 1px;
}

.cp-proof-submit {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.cp-proof-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.cp-proof-add {
  align-self: flex-end;
  border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.cp-proof-add:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  color: var(--text-primary);
}

.cp-proof-feedback {
  margin: 0;
  min-height: 1rem;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.cp-proof-feedback--success {
  color: var(--success, #10b981);
}

.cp-proof-feedback--error {
  color: var(--sev-critical, #ef4444);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .cp-drilldown-header {
    padding: var(--space-md);
  }

  .cp-drilldown-content {
    padding: var(--space-md);
  }

  .cp-opp-card,
  .cp-timeline-item {
    padding: var(--space-sm);
  }

  .cp-proof-entry {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .cp-presence-item-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .cp-presence-item-badges {
    flex-wrap: wrap;
  }

  .cp-proof-primary,
  .cp-proof-prefill-item {
    align-items: flex-start;
  }

  .cp-proof-add {
    align-self: flex-start;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .cp-factor-card,
  .cp-drilldown-panel,
  .cp-opp-card,
  .cp-timeline-item,
  .cp-drilldown-spinner {
    animation: none;
    transition: none;
  }
}


/* ════════════════════════════════════════════════════════════════ */
/* EXPORT MENU                                                     */
/* ════════════════════════════════════════════════════════════════ */
.export-menu {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  min-width: 260px;
}
.export-menu h3 {
  margin: 0 0 var(--space-md) 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.export-menu button {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.export-menu button:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.export-menu button:last-child {
  margin-top: var(--space-sm);
  background: transparent;
  border-color: transparent;
  color: var(--text-tertiary);
  text-align: center;
  font-size: 0.72rem;
}

/* ════════════════════════════════════════════════════════════════ */
/* EXPLORE FILTERS & SEARCH                                        */
/* ════════════════════════════════════════════════════════════════ */
.explore-search {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  margin-bottom: var(--space-md);
  outline: none;
  transition: border-color 0.15s ease;
}
.explore-search:focus {
  border-color: var(--accent);
}
.explore-search::placeholder {
  color: var(--text-tertiary);
}
.filter-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--space-xs);
  display: inline-block;
  vertical-align: middle;
}
.er-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════ */
/* UTILITY: SMALL BUTTONS & PROGRESS ACTIONS                       */
/* ════════════════════════════════════════════════════════════════ */
.btn-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-small:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.btn-small-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-small-ghost:hover {
  color: var(--accent);
}
.ai-forecast-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.ai-forecast-sync {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.progress-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.summary-clickable { cursor: pointer; }
.text-sev-high { color: var(--sev-high); }
.text-sev-medium { color: var(--sev-medium-text); }
.text-success { color: var(--success); }
.subsection-top-gap { margin-top: var(--space-lg); }

.ec-detector-health {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.ec-detector-health-warning {
  background: color-mix(in srgb, var(--sev-medium) 8%, transparent);
  color: var(--sev-medium-text);
}
.ec-detector-health-success {
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: color-mix(in srgb, var(--success) 60%, #000000);
}
.ec-detector-health-caution {
  background: color-mix(in srgb, var(--sev-high) 8%, transparent);
  color: var(--sev-medium-text);
}

.brand-fill-accent { background: var(--accent, #3b82f6); }
.nonbrand-fill-success { background: var(--success, #22c55e); }

.insight-severity-up { color: var(--success, #22c55e); }
.insight-severity-down { color: var(--sev-high, #f97316); }
.dot-accent { background: var(--accent); }
.dot-success { background: var(--success); }
.dot-sev-medium { background: var(--sev-medium); }
.dot-sev-high { background: var(--sev-high); }
.dot-sev-critical { background: var(--sev-critical); }
.text-xxs { font-size: 0.6rem; }
.text-muted { color: var(--text-muted); }
.help-text-padded { padding: .5rem .75rem 0; }
.ai-upgrade-section { padding: 1.2rem; }
.ai-credits-exhausted-card { background: linear-gradient(135deg, #1e1e2e, #2a2a3e); border: 1px solid rgba(168,130,255,.3); border-radius: 12px; padding: 1.5rem; text-align: center; }
.ai-credits-exhausted-title { color: #a882ff; margin: 0 0 .5rem; }
.ai-credits-exhausted-body { color: rgba(255,255,255,0.7); font-size: .85rem; margin: 0 0 1rem; }
.ai-credits-exhausted-cta { display: inline-block; background: #a882ff; color: #ffffff; padding: .6rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; }
.ai-credit-indicator { text-align: right; padding: .25rem .75rem 0; font-size: .75rem; }
/* pulse-view */
.impact-hero-accent-border { border-color: color-mix(in srgb, var(--accent) 15%, var(--border)); }
.m-0 { margin: 0; }
.mt-space-md { margin-top: var(--space-md); }
.ts-ai-note { font-size: 0.82rem; color: var(--fg-muted); margin-bottom: var(--space-sm); }
/* explore-charts */
.text-accent { color: var(--accent); }
.kom-chart-svg { width: 100%; height: 500px; }
.chart-svg-fluid { width: 100%; height: auto; }
.chart-svg-crosshair { cursor: crosshair; }
.chart-empty-state { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--text-muted); font-size: 0.95rem; text-align: center; padding: 2rem; }
.chart-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.chart-empty-hint { font-size: 0.85rem; opacity: 0.7; }
/* generated-fix modal */
.gfm-card { max-width: 860px; margin: 32px auto; background: var(--bg-card); color: var(--text-primary); border-radius: 16px; box-shadow: 0 20px 60px rgba(15,23,42,.25); border: 1px solid var(--border); overflow: hidden; }
.gfm-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.gfm-title { font-size: 16px; font-weight: 700; }
.gfm-subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.gfm-close-btn { border: 0; background: transparent; font-size: 22px; cursor: pointer; line-height: 1; color: var(--text-tertiary); }
.gfm-content { padding: 16px 18px; }
.gfm-meta { margin-bottom: 12px; font-size: 12px; color: var(--text-secondary); }
.gfm-pre { white-space: pre-wrap; word-break: break-word; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 12px; padding: 14px; font-size: 12px; line-height: 1.55; max-height: 60vh; overflow: auto; }
.gfm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.gfm-copy-btn { border: 1px solid var(--border); background: var(--bg-card); padding: 8px 12px; border-radius: 10px; cursor: pointer; color: var(--text-primary); }
.gfm-confirm-btn { border: 0; background: var(--text-primary); color: var(--text-inverse); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
/* site-health-scorer */
.kpi-denominator { font-size: 0.55em; color: var(--text-tertiary); }
/* pagespeed */
.loading-placeholder { text-align: center; padding: var(--space-md); color: var(--text-tertiary); }
/* ai billing nudge */
.ai-billing-note { color: var(--text-muted); font-size: .85em; }
.ai-billing-btn { margin-top: .5rem; display: inline-block; background: linear-gradient(135deg, var(--cta-gradient-start, #3b82f6), var(--cta-gradient-end, #8b5cf6)); color: #fff; padding: .4rem 1rem; border-radius: 6px; text-decoration: none; font-size: .85em; font-weight: 600; }

/* upgrade nudge */
.upgrade-nudge-row { display: flex; align-items: flex-start; gap: 10px; }
.upgrade-nudge-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
.upgrade-nudge-body { flex: 1; }
.upgrade-nudge-title { font-weight: 600; margin-bottom: 4px; }
.upgrade-nudge-cta { display: inline-block; margin-top: 6px; padding: 6px 14px; background: var(--bg-card); color: var(--text-primary); border-radius: 8px; font-weight: 700; font-size: 0.82rem; text-decoration: none; transition: opacity 0.2s; }
.upgrade-nudge-close { background: rgba(255,255,255,0.2); border: none; color: #fff; cursor: pointer; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }

/* agent view — full header styles live in agent-view.mjs _buildAgentStyles() */

/* data health strip */
.data-health-strip { background: var(--dh-bg); border: 1px solid var(--dh-border); border-left: 3px solid var(--dh-accent); border-radius: 6px; padding: 10px 14px; margin: 8px 0; font-size: 13px; color: var(--text-secondary, #475569); }
.data-health-strip[data-severity="warn"] { --dh-accent: var(--warning, #f59e0b); --dh-bg: rgba(245,158,11,0.08); --dh-border: rgba(245,158,11,0.35); }
.data-health-strip[data-severity="info"] { --dh-accent: var(--info, #38bdf8); --dh-bg: rgba(56,189,248,0.08); --dh-border: rgba(56,189,248,0.35); }
.data-health-strip-title { font-weight: 600; color: var(--dh-accent); margin-bottom: 4px; }
.data-health-strip-list { margin: 0; padding-left: 18px; }
.data-health-strip-item { margin: 2px 0; }

/* ════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                      */
/* ════════════════════════════════════════════════════════════════ */

/* ── Tablet breakpoint ── */
@media (max-width: 1024px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi-card-untapped { grid-column: span 2; }
  .ai-forecast-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-rewrites-grid { grid-template-columns: 1fr; }
  .ca-grid { grid-template-columns: 1fr; }
  .ai-fc-signals { grid-template-columns: 1fr; }

  /* Full-list table responsive — hide low-value columns */
  .full-list-table { min-width: 0; overflow-x: auto; }
  .fl-header, .fl-row {
    grid-template-columns: 40px 30px 1fr 70px 80px;
  }
  .fl-time, .fl-pages { display: none; }

  /* Action page card responsive */
  .action-page-card { padding: var(--space-md); }
  .apc-keywords-list { gap: 3px; }
  .apc-metrics-row { flex-wrap: wrap; gap: var(--space-sm); }
}

.kom-mobile-summary { display: none; }
.mobile-more-opportunities { display: none; }

@media (max-width: 640px) {
  /* Nav + topbar + labels handled by 768px bottom-bar breakpoint */
  /* Only content layout overrides here */
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi-strip-compact { grid-template-columns: 1fr; }
  .kpi-card-untapped { grid-column: span 2; }
  .kpi-value-hero { font-size: 1.5rem !important; }
  .wm-meta { flex-direction: column; gap: 4px; }
  .health-breakdown { grid-template-columns: 1fr; }
  .pulse-hero { flex-direction: column-reverse; align-items: center; text-align: center; gap: var(--space-md); }
  .priority-card { flex-direction: column; }
  .pc-rank { display: none; }
  .pc-start { align-self: stretch; text-align: center; }

  /* Pulse mobile enhancements */
  .narrative-block {
    font-size: var(--text-2xl);
    line-height: 1.3;
    margin-bottom: var(--space-lg);
  }
  .narrative-line {
    margin-bottom: var(--space-sm);
    font-weight: 600;
  }
  .trend-indicator-area {
    margin-top: var(--space-md);
  }
  .progress-tracker {
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .progress-text { display: none; }

  .qw-grid { grid-template-columns: 1fr; }
  .explore-row { flex-wrap: wrap; }
  .er-pages, .er-effort { display: none; }
  .ca-grid { grid-template-columns: 1fr; }
  .lf-kpis { flex-wrap: wrap; gap: var(--space-md); }
  .lf-label { min-width: 60px; font-size: 0.68rem; }
  .exec-findings { gap: var(--space-xs); }
  .ai-forecast-grid { grid-template-columns: 1fr; }
  .ai-fc-signals { grid-template-columns: 1fr; }
  .ai-rewrites-grid { grid-template-columns: 1fr; }
  .ai-chat-suggestions { flex-wrap: wrap; }
  .ai-suggest-chip { font-size: var(--text-xs); }

  /* Action tab mobile styles */
  .mission-cards { gap: var(--space-sm); }
  .mission-card { width: 100%; }
  .action-nav {
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
  }
  .action-nav button {
    min-height: 44px;
    font-size: 16px;
    padding: var(--space-sm) var(--space-md);
  }
  .full-list-container { display: none !important; } /* Hide full list on mobile */
  .expand-control { display: none; } /* Hide expand control on mobile */
  .mobile-more-opportunities { display: block; }
  .mobile-more-opportunities-details {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .mobile-more-opportunities-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md);
    cursor: pointer;
  }
  .mobile-more-opportunities-summary::-webkit-details-marker { display: none; }
  .mobile-more-opportunities-summary::marker { display: none; content: ''; }
  .mobile-more-opportunities-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .mobile-more-opportunities-title {
    color: var(--text-primary);
    font-weight: 600;
  }
  .mobile-more-opportunities-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.4;
  }
  .mobile-more-opportunities-chevron {
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
  }
  .mobile-more-opportunities-details[open] .mobile-more-opportunities-chevron {
    transform: rotate(180deg);
  }
  .mobile-more-opportunities-list {
    display: grid;
    gap: var(--space-sm);
    padding: 0 var(--space-md) var(--space-md);
  }
  .mobile-more-opportunity-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
  }
  .mobile-more-opportunity-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 8px;
  }
  .mobile-more-opportunity-rank {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
    font-weight: 700;
  }
  .mobile-more-opportunity-severity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
  }
  .mobile-more-opportunity-severity-critical { background: rgba(239,68,68,0.12); color: var(--sev-critical); }
  .mobile-more-opportunity-severity-high { background: rgba(249,115,22,0.12); color: var(--sev-high); }
  .mobile-more-opportunity-severity-medium { background: rgba(245,158,11,0.12); color: var(--sev-medium-text); }
  .mobile-more-opportunity-severity-low { background: rgba(16,185,129,0.12); color: var(--success); }
  .mobile-more-opportunity-title {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
  }
  .mobile-more-opportunity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
  }
  .mobile-more-opportunity-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  .mobile-more-opportunity-share,
  .mobile-more-opportunity-start {
    flex: 1;
    min-height: 40px;
    border-radius: 10px;
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .mobile-more-opportunity-share {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
  }
  .mobile-more-opportunity-start {
    background: var(--accent);
    color: #fff;
    border: none;
  }

  /* Action page card mobile */
  .action-page-card { padding: var(--space-sm); }
  .apc-compare-box { font-size: var(--text-xs); padding: var(--space-xs) var(--space-sm); }
  .apc-code-block { font-size: 0.68rem; overflow-x: auto; }
  .apc-keywords-list { gap: 2px; }
  .apc-keyword-pill { font-size: 0.65rem; padding: 1px 5px; }
  .apc-metrics-row { flex-direction: column; gap: 2px; }

  /* Explore tab mobile styles */
  .keyword-opportunity-map .kom-chart-container { display: none; }
  .keyword-opportunity-map .kom-mobile-summary {
    display: block;
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  .kom-mobile-intro,
  .kom-mobile-note {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-secondary);
  }
  .kom-mobile-intro { margin: 0; }
  .kom-mobile-note { margin: var(--space-sm) 0 0; }
  .kom-mobile-list {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
  }
  .kom-mobile-card {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .kom-mobile-rank {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(59,130,246,0.14);
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 700;
  }
  .kom-mobile-copy {
    flex: 1;
    min-width: 0;
  }
  .kom-mobile-keyword {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
  }
  .kom-mobile-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
  }
  .explore-section { overflow-x: auto; } /* Allow horizontal scrolling for charts */

  /* AI tab mobile styles */
  .ai-chat-primary {
    min-height: 100vh;
    margin: 0;
  }
  .ai-chat-primary .ai-chat-container {
    min-height: 100vh;
  }
  .ai-chat-primary .ai-chat-messages {
    min-height: calc(100vh - 160px);
  }
  .ai-chat-input {
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 44px; /* Touch target minimum */
  }
  .ai-chat-send {
    min-height: 44px;
    min-width: 44px;
  }
  .ai-chat-suggestions {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ai-suggest-chip {
    flex-shrink: 0;
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
  }
}

@media print {
  .topbar, .action-nav, .pc-start, .qw-go, .er-start, .show-all-btn, .filter-btn { display: none !important; }
  .view { display: block !important; max-width: 100%; }
  .priority-card { break-inside: avoid; }
  .ai-chat-section, .ai-chat-container { display: none !important; }

  /* ── Share-specific print rules ──────────────────────────────── */
  .share-cta-bar { display: none !important; }
  .share-banner { break-inside: avoid; border: 1px solid #ccc; background: #fff !important; }
  .share-banner a { color: #000 !important; text-decoration: underline; }
  .export-menu, #export-menu { display: none !important; }
  body { font-size: 10pt; }
  .section, .metric-card { break-inside: avoid; page-break-inside: avoid; }
  .metric-card { box-shadow: none; border: 1px solid #ddd; }
  .er-table th, .er-table td { padding: 4px 8px; font-size: 9pt; }
}


/* ════════════════════════════════════════════════════════════════ */
/* AI ENGINE COMPONENTS                                             */
/* ════════════════════════════════════════════════════════════════ */

/* AI status dot in topbar */
.ai-status-dot {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-status-dot.ai-online {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}
.ai-status-dot.ai-offline {
  background: rgba(239, 68, 68, 0.1);
  color: var(--sev-critical);
}

/* AI badge */
.ai-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  margin-left: var(--space-xs);
}

/* AI Content Rewrites in Pulse view */
.ai-rewrites-section {
  margin-bottom: var(--space-xl);
}
.ai-rewrites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}
.ai-rewrite-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-left: 3px solid #6366f1;
}
.ai-rw-url {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-bottom: var(--space-sm);
}
.ai-rw-field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.ai-rw-field:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ai-rw-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.ai-rw-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.ai-rw-before {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  opacity: 0.7;
  padding: var(--space-sm);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
  min-height: 40px;
  display: flex;
  align-items: center;
}

.ai-rw-after {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
  padding: var(--space-sm);
  background: var(--bg-body);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
  min-height: 40px;
  display: flex;
  align-items: center;
}
.ai-rw-confidence {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}
.ai-confidence-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--bg-inset);
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}
.ai-confidence-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--confidence, 70%);
  background: #6366f1;
  border-radius: var(--radius-full);
}
.ai-rw-reasoning {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
}

/* AI Engine Status in Pulse */
.ai-status-section {
  margin-bottom: var(--space-xl);
}
.ai-status-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.ai-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ai-status-indicator.ai-online {
  background: var(--success);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}
.ai-status-indicator.ai-offline {
  background: var(--sev-critical);
}
.ai-status-info {
  flex: 1;
}
.ai-status-info strong {
  font-size: var(--text-base);
}

/* ── AI VIEW ─────────────────────────────────────────────────── */
.ai-header-section {
  margin-bottom: var(--space-xl);
}
.ai-header-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.ai-header-icon {
  font-size: 2rem;
  color: #6366f1;
}
.ai-header-info h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.ai-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ai-live-dot.ai-online {
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  animation: ai-pulse 2s ease-in-out infinite;
}
.ai-live-dot.ai-offline {
  background: var(--sev-critical);
}
@keyframes ai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.ai-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.ai-cap-chip {
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: var(--bg-inset);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

/* AI Chat */
.ai-chat-section {
  margin-bottom: var(--space-xl);
}
.ai-chat-container {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ai-chat-messages {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.ai-chat-msg {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.ai-msg-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
}
.ai-msg-system .ai-msg-icon {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}
.ai-msg-user .ai-msg-icon {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}
.ai-msg-body {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
}
.ai-msg-system .ai-msg-body {
  background: var(--bg-inset);
}
.ai-msg-user .ai-msg-body {
  background: rgba(59, 130, 246, 0.08);
}
.ai-msg-error .ai-msg-body {
  background: rgba(239, 68, 68, 0.08);
  color: var(--sev-critical);
}
.ai-typing {
  display: inline-block;
  animation: ai-blink 1s ease-in-out infinite;
  color: var(--text-tertiary);
}
@keyframes ai-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.ai-chat-input-area {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--border);
}
.ai-chat-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  background: var(--bg-body);
  color: var(--text-primary);
  outline: none;
}
.ai-chat-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.ai-chat-send {
  padding: var(--space-sm) var(--space-lg);
  background: #6366f1;
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ai-chat-send:hover:not(:disabled) {
  background: #4f46e5;
}
.ai-chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-chat-suggestions {
  display: flex;
  gap: var(--space-xs);
  padding: 0 var(--space-md) var(--space-md);
  flex-wrap: wrap;
}
.ai-suggest-chip {
  font-size: var(--text-xs);
  padding: 4px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.ai-suggest-chip:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: #6366f1;
  color: #6366f1;
}

/* AI Chat Primary (50% viewport height) */
.ai-chat-primary {
  margin: var(--space-xl) 0;
  flex: 1;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
}

.ai-chat-primary .ai-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 50vh;
}

.ai-chat-primary .ai-chat-messages {
  flex: 1;
  max-height: none;
  min-height: calc(50vh - 120px);
}

/* AI Status Minimal (bottom of tab) */
.ai-status-minimal {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.ai-status-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.ai-status-icon {
  font-size: var(--text-sm);
  color: #6366f1;
}

.ai-status-text {
  flex: 1;
}

/* AI Rewrites full list */
.ai-rewrites-full-section {
  margin-bottom: var(--space-xl);
}
.ai-rewrites-controls {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.ai-rewrite-card-full {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border: 1px solid var(--border);
  border-left: 3px solid #6366f1;
  margin-bottom: var(--space-md);
}
.ai-rw-url-full {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
}
.ai-rw-url-full a {
  color: #6366f1;
  text-decoration: none;
}
.ai-rw-url-full a:hover {
  text-decoration: underline;
}

.rw-accept-btn,
.rw-reject-btn {
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
}

.rw-accept-btn {
  background: var(--success);
  color: white;
}

.rw-accept-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.rw-reject-btn {
  background: var(--bg-inset);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.rw-reject-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-tertiary);
}

.ai-rw-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.ai-rw-note {
  font-size: var(--text-xs);
  color: var(--accent);
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.1);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
  font-style: italic;
  line-height: var(--leading-normal);
}

.ai-rewrite-card-full.accepted {
  opacity: 0.6;
  background: var(--success-bg);
  border-left-color: var(--success);
}

/* AI Forecasts */
.ai-forecast-section {
  margin-bottom: var(--space-xl);
}
.ai-forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}
.ai-forecast-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  text-align: center;
}
.ai-fc-metric {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}
.ai-fc-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.ai-fc-current {
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.ai-fc-arrow {
  color: var(--text-tertiary);
}
.ai-fc-predicted {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.ai-fc-change {
  font-size: var(--text-sm);
  font-weight: 600;
}
.ai-fc-change.positive {
  color: var(--success);
}
.ai-fc-change.negative {
  color: var(--sev-critical);
}
.ai-fc-reasoning {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-sm);
  line-height: var(--leading-normal);
}
.ai-forecast-summary {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* AI Summary */
.ai-summary-section {
  margin-bottom: var(--space-xl);
}
.ai-summary-content {
  padding: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  white-space: pre-line;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW SECTIONS — Full data surface
   ═══════════════════════════════════════════════════════════════════ */

/* Enhanced Content Audit */
.ca-grid-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}
.ca-card-enhanced {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.ca-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.ca-score-ring {
  font-size: 1.4rem;
  font-weight: 800;
  min-width: 42px;
  text-align: center;
}
.ca-card-path { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ca-title { font-size: var(--text-xs); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-card-meta { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.ca-meta-chip {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.ca-meta-chip.ca-issues { color: var(--sev-high); border-color: var(--sev-high); }
.ca-meta-chip.ca-ok { color: var(--success); border-color: var(--success); }
.ca-issues-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-xs); }
.ca-issue-item { font-size: var(--text-xs); color: var(--sev-high); }
.ca-issue-more { font-size: var(--text-xs); color: var(--text-tertiary); font-style: italic; }
.ca-suggestions { display: flex; flex-direction: column; gap: 2px; }
.ca-suggestion { font-size: var(--text-xs); color: var(--success); }

/* Striking Distance Table */
.striking-distance-table { margin-top: var(--space-sm); }
.sd-grid { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); }
.sd-row {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.sd-query { font-weight: 600; color: var(--text-primary); min-width: 120px; flex: 1; }
.sd-pos { color: var(--sev-medium-text); font-weight: 600; min-width: 60px; }
.sd-gap { color: var(--text-tertiary); font-size: var(--text-xs); min-width: 120px; }
.sd-impressions { color: var(--text-secondary); font-size: var(--text-xs); }
.sd-ctr { color: var(--text-secondary); font-size: var(--text-xs); }
.sd-projected { color: var(--success); font-size: var(--text-xs); font-weight: 600; }

/* High Impressions Low CTR */
.high-imp-low-ctr { margin-top: var(--space-sm); }
.tk-kw.tk-warn { border-color: var(--sev-high); color: var(--sev-high); }
.tk-kw.tk-warn small { color: var(--text-tertiary); }

/* Intent Distribution */
.intent-dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.intent-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.intent-icon { font-size: 1.5rem; margin-bottom: var(--space-xs); }
.intent-name { font-weight: 700; text-transform: capitalize; color: var(--text-primary); margin-bottom: var(--space-xs); }
.intent-count { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.intent-bar {
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.intent-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* High Value Queries */
.high-value-queries { margin-top: var(--space-lg); }
.hvq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.hvq-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.hvq-query { font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hvq-intent { font-size: var(--text-xs); color: var(--text-tertiary); text-transform: capitalize; }
.hvq-value { font-weight: 800; color: var(--success); }
.hvq-content-type { font-size: var(--text-xs); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 6px; border-radius: 8px; }

/* Device Breakdown */
.device-dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.device-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.device-icon { font-size: 2rem; margin-bottom: var(--space-xs); }
.device-name { font-weight: 700; text-transform: capitalize; color: var(--text-primary); margin-bottom: var(--space-sm); }
.device-stats { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--text-secondary); }
.device-page-details { margin-top: var(--space-md); }
.device-pages-grid { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.device-page-row {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.dp-path { font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-devices { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.dp-chip {
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Indexing Details */
.indexing-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.idx-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}
.idx-card.idx-ok { border-color: var(--success); }
.idx-card.idx-warn { border-color: var(--sev-high); }
.idx-card.idx-bad { border-color: var(--sev-critical); }
.idx-value { font-size: 1.5rem; font-weight: 800; display: block; color: var(--text-primary); }
.idx-label { font-size: var(--text-sm); color: var(--text-secondary); }
.idx-detail-row {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.idx-detail-label { color: var(--text-secondary); min-width: 180px; }
.idx-detail-value { color: var(--text-primary); font-weight: 600; }
.idx-pages-detail { margin-top: var(--space-md); }
.idx-pages-grid { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.idx-page-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.idx-page-path { color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idx-page-status { font-size: var(--text-xs); font-weight: 600; flex-shrink: 0; }

/* Competitor Leaderboard */
.competitor-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.competitor-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.comp-rank { font-weight: 800; color: var(--text-tertiary); min-width: 32px; }
.comp-domain { font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-stats { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.comp-stat { font-size: var(--text-xs); padding: 2px 8px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); }
.comp-stat.comp-threat { border-color: currentColor; font-weight: 600; }

/* Responsive adjustments for new sections */
@media (max-width: 640px) {
  .intent-dist-grid { grid-template-columns: repeat(2, 1fr); }
  .device-dist-grid { grid-template-columns: repeat(2, 1fr); }
  .hvq-grid { grid-template-columns: 1fr; }
  .ca-grid-enhanced { grid-template-columns: 1fr; }
  .indexing-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .sd-row { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESSIVE DISCLOSURE — Pulse Layer 2, Explore Cards,
   Mission Control (Action Dashboard)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Pulse Layer 2 Divider ─── */
.pulse-layer2 {
  margin-top: var(--space-xl);
}
.layer2-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.layer2-divider::before,
.layer2-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}
.layer2-label { white-space: nowrap; }

/* ─── Pulse Reveal (collapsible <details>) ─── */
.pulse-reveal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pulse-reveal:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.pulse-reveal[open] {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 6%, transparent);
}
.pulse-reveal-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s ease;
}
.pulse-reveal-summary::-webkit-details-marker { display: none; }
.pulse-reveal-summary::marker { display: none; content: ''; }
.pulse-reveal-summary:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.pr-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.pr-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-base);
}
.pr-hint {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-chevron {
  color: var(--text-tertiary);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  margin-left: auto;
}
.pulse-reveal[open] > .pulse-reveal-summary .pr-chevron {
  transform: rotate(90deg);
}
.pulse-reveal-body {
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--border);
  animation: revealSlide 0.25s ease;
}
@keyframes revealSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Explore Cards (collapsible <details>) ─── */
.explore-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.explore-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.explore-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.explore-card[open] {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 6%, transparent);
}
.ec-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s ease;
}
.ec-summary::-webkit-details-marker { display: none; }
.ec-summary::marker { display: none; content: ''; }
.ec-summary:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.ec-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.ec-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ec-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-base);
}
.ec-hook {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ec-chevron {
  color: var(--text-tertiary);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  margin-left: var(--space-sm);
}
.explore-card[open] > .ec-summary .ec-chevron {
  transform: rotate(90deg);
}
.ec-body {
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--border);
  animation: revealSlide 0.25s ease;
}
.ec-so-what {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.ec-sw-icon {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
}
.ec-action-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ec-action-btn:hover {
  color: var(--text-primary);
}

/* ─── Keyword Ranking Table ─── */
.kw-filter-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--text-xsm);
}
.kw-filter-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.kw-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-secondary));
}
.kw-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.kw-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.kw-ranking-table thead th {
  background: var(--bg-secondary);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xsm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Keyword column header: left-align for readability */
.kw-ranking-table thead th:nth-child(1) { text-align: left; }

.kw-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}
.kw-row:hover {
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.kw-row td {
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
}
.kw-row-declining {
  border-left: 3px solid var(--danger);
}
.kw-row-declining td:first-child {
  color: var(--danger);
  font-weight: 600;
}
.kw-row-improving {
  border-left: 3px solid var(--success);
}
.kw-row-improving td:first-child {
  color: var(--success);
  font-weight: 600;
}
.kw-col-keyword {
  min-width: 150px;
  font-weight: 500;
}
.kw-col-position {
  text-align: center;
  min-width: 80px;
}
.kw-col-change {
  text-align: center;
  min-width: 70px;
  font-family: var(--font-mono);
  font-weight: 600;
}
.kw-col-impressions {
  text-align: right;
  min-width: 90px;
  font-family: var(--font-mono);
}
.kw-col-clicks {
  text-align: right;
  min-width: 70px;
  font-family: var(--font-mono);
}
.kw-col-ctr {
  text-align: right;
  min-width: 70px;
  font-family: var(--font-mono);
}
.kw-col-intent {
  min-width: 100px;
  text-align: center;
}

/* Intent badges in keyword table */
.kw-intent-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: var(--text-xsm);
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}
.kw-intent-transactional {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}
.kw-intent-commercial {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.kw-intent-informational {
  background: color-mix(in srgb, var(--info, #60a5fa) 15%, transparent);
  color: var(--info, #60a5fa);
}
.kw-intent-navigational {
  background: color-mix(in srgb, var(--warning, #fbbf24) 15%, transparent);
  color: var(--warning, #fbbf24);
}

.kw-col-action {
  text-align: center;
  min-width: 120px;
}
.kw-optimize-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
.kw-optimize-btn:hover {
  color: var(--text-primary);
}
.kw-critical-view {
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 4%, var(--bg-card));
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.kw-critical-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-weight: 700;
  color: var(--danger);
  font-size: var(--text-sm);
}
.kw-critical-icon {
  font-size: 1.2em;
  line-height: 1;
}
.kw-critical-message {
  font-size: var(--text-xsm);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─── Pagination Controls ─── */
.kw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  font-size: var(--text-xsm);
}
.kw-page-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: var(--text-xsm);
}
.kw-page-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}
.kw-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kw-page-info {
  color: var(--text-secondary);
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

/* ─── Mobile Responsiveness ─── */
.kw-table-container {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}
.kw-ranking-table {
  min-width: 100%;
  width: 100%;
}
@media (max-width: 768px) {
  .kw-ranking-table {
    font-size: var(--text-xsm);
  }
  .kw-col-keyword {
    min-width: 120px;
  }
  .kw-col-position {
    min-width: 60px;
  }
  .kw-col-change {
    min-width: 50px;
  }
  .kw-col-impressions,
  .kw-col-clicks {
    min-width: 70px;
  }
  .kw-col-ctr {
    min-width: 50px;
  }
  .kw-col-intent {
    min-width: 70px;
  }
  .kw-col-action {
    min-width: 80px;
  }
  .kw-optimize-btn {
    font-size: var(--text-xsm);
    padding: 2px 4px;
  }
}
@media (max-width: 480px) {
  .kw-filter-tabs {
    flex-direction: column;
    gap: var(--space-xs);
  }
  .kw-filter-btn {
    width: 100%;
    text-align: center;
  }
  .kw-pagination {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .kw-page-btn {
    flex: 1;
    min-width: 60px;
  }
}

/* ─── Column Headers (Sortable) ─── */
.kw-col-header {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.kw-col-header:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
}
.kw-col-header::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.3;
}

/* ─── Empty State ─── */
.kw-empty-state {
  text-align: center;
  padding: var(--space-lg) !important;
  color: var(--text-secondary);
  font-style: italic;
}

/* ─── Tooltip Support ─── */
/* Browsers with title attribute auto-show tooltips; this adds styling */
td[title]::after,
th[title]::after {
  content: '';
}

/* ─── Explore Header ─── */
.explore-header {
  margin-bottom: var(--space-lg);
}
.explore-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

/* ─── Mission Control (Action Dashboard) ─── */
.action-dashboard {
  padding: 0;
  max-width: none;
}
.mission-header {
  margin-bottom: var(--space-lg);
}
.mission-header h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}
.mission-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.ms-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.ms-card.ms-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}
.ms-card.ms-done {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 6%, var(--bg-card));
}
.ms-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}
.ms-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* ─── Mission Sections & Items ─── */
.mission-section {
  margin-bottom: var(--space-xl);
}
.mission-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.mission-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mission-item:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 8%, transparent);
}
.mission-item.mission-active {
  border-left: 3px solid var(--accent);
}
.mi-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.mi-dot-active {
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.mi-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mi-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mi-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.mi-rank {
  font-weight: 800;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.mi-resume,
.mi-start {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.mi-resume {
  background: var(--accent);
  color: #fff;
}
.mi-resume:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
}
.mi-start {
  background: var(--bg-inset);
  color: var(--accent);
  border: 1px solid var(--border);
}
.mi-start:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-inset));
  border-color: var(--accent);
}
.mi-severity {
  padding: 1px 8px;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mi-sev-critical { background: color-mix(in srgb, var(--sev-critical) 15%, transparent); color: var(--sev-critical); }
.mi-sev-high { background: color-mix(in srgb, var(--sev-high) 15%, transparent); color: var(--sev-high); }
.mi-sev-medium { background: color-mix(in srgb, var(--sev-medium) 15%, transparent); color: var(--sev-medium-text); }
.mi-sev-low { background: color-mix(in srgb, var(--sev-low, var(--success)) 15%, transparent); color: var(--sev-low, var(--success)); }

/* ─── Mission Wins ─── */
.mission-wins {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.mission-win {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--success) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--success) 20%, var(--border));
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.mw-icon {
  flex-shrink: 0;
  font-size: 1rem;
}
.mw-text {
  flex: 1;
  line-height: 1.4;
}

/* ─── Mission More (<details>) ─── */
.mission-more {
  margin-top: var(--space-sm);
}
.mission-more > summary {
  cursor: pointer;
}

/* ─── Today's Mission Cards ─── */
.mission-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.mission-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mission-card:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 8%, transparent);
}
.mission-card.sev-critical {
  border-left: 4px solid var(--sev-critical);
}
.mission-card.sev-high {
  border-left: 4px solid var(--sev-high);
}
.mission-card.sev-medium {
  border-left: 4px solid var(--sev-medium);
}
.mission-card.sev-low {
  border-left: 4px solid var(--sev-low, var(--success));
}
.mc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.mc-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
  line-height: 1.3;
}
.mc-rank {
  font-weight: 800;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  background: var(--bg-inset);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.mc-why {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-md) 0;
  line-height: 1.4;
}
.mc-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.mc-detail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.mc-detail-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.mc-outcome {
  color: var(--text-primary);
  font-weight: 600;
}
.mc-start {
  flex: 1;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mc-start:hover {
  background: color-mix(in srgb, var(--accent) 15%, black);
}
.mc-auto-fix {
  padding: var(--space-sm) var(--space-md);
  background: var(--success, #22c55e);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.mc-auto-fix:hover {
  background: color-mix(in srgb, var(--success, #22c55e) 15%, black);
}

/* ─── Mission Card Summary Meta (always-visible compact strip) ─── */
.mc-summary-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.mc-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.mc-sev-pill {
  padding: 1px 8px;
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mc-sev-critical { background: color-mix(in srgb, var(--sev-critical) 15%, transparent); color: var(--sev-critical); }
.mc-sev-high { background: color-mix(in srgb, var(--sev-high) 15%, transparent); color: var(--sev-high); }
.mc-sev-medium { background: color-mix(in srgb, var(--sev-medium) 15%, transparent); color: var(--sev-medium-text); }
.mc-sev-low { background: color-mix(in srgb, var(--sev-low, var(--success)) 15%, transparent); color: var(--sev-low, var(--success)); }

/* Share Status Badge */
.share-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  margin: 4px 0;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ─── Mission Card Expand (collapsible <details>) ─── */
.mc-expand {
  margin-bottom: var(--space-md);
  border: none;
}
.mc-expand-toggle {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
  padding: var(--space-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  user-select: none;
}
.mc-expand-toggle::-webkit-details-marker { display: none; }
.mc-expand-toggle::marker { display: none; content: ''; }
.mc-expand-toggle:hover { color: color-mix(in srgb, var(--accent) 80%, #000); }
.mc-expand-chevron {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
}
.mc-expand[open] .mc-expand-chevron { transform: rotate(180deg); }
.mc-expand-body {
  padding: var(--space-sm) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  animation: mcExpandIn 0.15s ease;
}
@keyframes mcExpandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Action Flow: Keyword Collapse ─── */
.apc-kw-more {
  display: inline;
}
.apc-kw-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-inset));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  list-style: none;
  user-select: none;
  transition: all 0.15s ease;
}
.apc-kw-toggle::-webkit-details-marker { display: none; }
.apc-kw-toggle::marker { display: none; content: ''; }
.apc-kw-toggle:hover {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-inset));
  border-color: var(--accent);
}
.apc-kw-expanded {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  animation: mcExpandIn 0.15s ease;
}

/* ─── Action Flow: Steps Collapse ─── */
.apc-steps-more {
  border: none;
  margin-top: var(--space-xs);
}
.apc-steps-toggle {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  user-select: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  transition: all 0.15s ease;
}
.apc-steps-toggle::-webkit-details-marker { display: none; }
.apc-steps-toggle::marker { display: none; content: ''; }
.apc-steps-toggle:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.apc-steps-extra {
  animation: mcExpandIn 0.15s ease;
}

/* ─── Expand Control ─── */
.expand-control {
  text-align: center;
  margin: var(--space-lg) 0;
}
.expand-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.expand-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}

/* ─── Full List Table ─── */
.full-list-table {
  margin-top: var(--space-lg);
  min-width: 600px;
}
.fl-header {
  display: grid;
  grid-template-columns: 60px 40px 1fr 80px 80px 80px 100px;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.fl-row {
  display: grid;
  grid-template-columns: 60px 40px 1fr 80px 80px 80px 100px;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  align-items: center;
  transition: border-color 0.15s ease;
}
.fl-row:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.fl-rank {
  font-weight: 800;
  color: var(--text-tertiary);
  text-align: center;
}
.fl-title {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 200px;
}
.fl-impact {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-time {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-pages {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-start {
  text-align: center;
}
.fl-start button {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--accent);
  color: white;
  transition: background 0.15s ease;
}
.fl-start button:hover {
  background: color-mix(in srgb, var(--accent) 15%, black);
}

/* ─── Filter Tabs ─── */
.filter-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.filter-tab {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}
.filter-tab.active,
.filter-tab:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  color: var(--text-primary);
}

/* ─── Responsive — Mission Control ─── */
@media (max-width: 640px) {
  .mission-stats { grid-template-columns: repeat(2, 1fr); }
  .mission-item { flex-wrap: wrap; }
  .mi-resume, .mi-start { width: 100%; text-align: center; margin-top: var(--space-xs); }
  .action-dashboard { padding: 0; }
  .pulse-reveal-summary { padding: var(--space-sm) var(--space-md); }
  .ec-summary { padding: var(--space-sm) var(--space-md); }
  .pulse-reveal-body { padding: 0 var(--space-md) var(--space-md) var(--space-md); }
  .ec-body { padding: 0 var(--space-md) var(--space-md) var(--space-md); }
  .ec-hook { white-space: normal; }
  .pr-hint { white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════
   USER JOURNEY — Funnel, Intent Mismatches, Virtuous Cycle,
   Priority Card Enrichment
   ═══════════════════════════════════════════════════════════════ */

/* ─── Journey Funnel ─── */
.journey-lens {
  margin-bottom: var(--space-xl);
}
.journey-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}
.jf-stage {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease;
}
.jf-stage.jf-active {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.jf-bar {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--bg-inset);
  border-radius: 3px;
  overflow: hidden;
}
.jf-fill {
  height: 100%;
  width: var(--stage-pct);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.jf-awareness { background: var(--accent); }
.jf-consideration { background: var(--sev-medium); }
.jf-decision { background: var(--success); }
.jf-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.jf-label strong {
  font-size: var(--text-base);
  color: var(--text-primary);
}
.jf-count {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.jf-desc {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  grid-column: 1 / -1;
}

/* ─── Journey Narrative ─── */
.journey-narrative {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.jn-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.journey-narrative p { margin: 0; }
.journey-narrative strong { color: var(--text-primary); }

/* ─── Intent Mismatches ─── */
.intent-mismatches {
  margin-bottom: var(--space-xl);
}
.mismatch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.mismatch-card {
  background: var(--bg-card);
  border: 1px solid color-mix(in srgb, var(--sev-high) 20%, var(--border));
  border-left: 3px solid var(--sev-high);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.mm-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.mm-query {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-base);
}
.mm-type {
  font-size: var(--text-xs);
  padding: 1px 8px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: capitalize;
}
.mm-type-transactional { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.mm-type-commercial { background: color-mix(in srgb, var(--sev-medium) 15%, transparent); color: var(--sev-medium-text); }
.mm-type-informational { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.mm-type-navigational { background: color-mix(in srgb, var(--text-tertiary) 15%, transparent); color: var(--text-secondary); }
.mm-explanation {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.mm-fix {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--success);
  font-weight: 500;
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--success) 5%, transparent);
  border-radius: var(--radius-sm);
}
.mm-fix-icon { flex-shrink: 0; }
.mm-impact {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
}

/* ─── Virtuous Cycle Steps ─── */
.cycle-steps {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
}
.cycle-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 72px;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cycle-step.cs-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}
.cycle-step.cs-done {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 6%, var(--bg-card));
}
.cs-num {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-tertiary);
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background: var(--bg-inset);
}
.cs-active .cs-num { background: var(--accent); color: #fff; }
.cs-done .cs-num { background: var(--success); color: #fff; }
.cs-label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.cs-detail {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.cycle-arrow {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ─── Priority Card Enrichment ─── */
.pc-outcome {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: var(--space-xs) 0;
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--success) 5%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--success);
  line-height: 1.4;
}
.pc-outcome-icon { flex-shrink: 0; }
.pc-intent {
  font-size: var(--text-xs);
  font-weight: 600;
}
.pc-intent-transactional { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.pc-intent-commercial { background: color-mix(in srgb, var(--sev-medium) 12%, transparent); color: var(--sev-medium-text); }
.pc-intent-informational { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.pc-intent-navigational { background: color-mix(in srgb, var(--text-tertiary) 12%, transparent); color: var(--text-secondary); }
.pc-bv {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
  font-weight: 700;
}

/* ─── Responsive — Journey & Cycle ─── */
@media (max-width: 640px) {
  .journey-funnel { gap: var(--space-xs); }
  .jf-stage { padding: var(--space-xs) var(--space-sm); }
  .cycle-steps { gap: var(--space-xs); }
  .cycle-step { min-width: 56px; padding: var(--space-xs) var(--space-sm); }
  .mismatch-card { padding: var(--space-sm); }
  .mm-query { font-size: var(--text-sm); }
}

/* ─── Forecast Controls ─── */
.ai-forecast-controls {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

/* ─── Impact Hero Card ─── */
.impact-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 8%, var(--bg-card)), color-mix(in srgb, var(--accent) 5%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, var(--success) 20%, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.impact-hero-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.impact-hero-icon { font-size: 1.6rem; }
.impact-hero-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.impact-hero-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-left: auto;
}
.impact-hero-kpis {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.ih-kpi {
  flex: 1;
  min-width: 100px;
  text-align: center;
  padding: var(--space-sm);
  background: var(--bg-card);
  border-radius: var(--radius-md);
}
.ih-kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  display: block;
}
.ih-kpi-value.positive { color: var(--success); }
.ih-kpi-value.neutral { color: var(--text-secondary); }
.ih-kpi-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.impact-hero-wins {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.ih-win {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--success) 5%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.ih-win-icon { flex-shrink: 0; }
.ih-win-text { color: var(--text-primary); line-height: 1.4; }
.ih-win-date {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ─── Impact Ledger (Action View) ─── */
.impact-ledger {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-lg);
}
.impact-ledger-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.il-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-lg);
}
.il-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.il-entry:last-child { border-bottom: none; }
.il-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.il-body { flex: 1; }
.il-narrative { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.4; }
.il-meta {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.il-confidence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.il-confidence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.il-success .il-confidence-dot { background: var(--success); }
.il-failure .il-confidence-dot { background: var(--sev-medium); }
.il-category-badge {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* ─── Action Complete Impact Toast ─── */
.impact-pending-note {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.impact-pending-note .ipn-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ── Save indicator (fixed bottom-right) ── */
.save-indicator {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  z-index: 1000;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.si-saving {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-card));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.si-saved {
  background: color-mix(in srgb, var(--green, #22c55e) 15%, var(--bg-card));
  color: var(--green, #22c55e);
  border: 1px solid color-mix(in srgb, var(--green, #22c55e) 30%, var(--border));
}
.si-failed {
  background: color-mix(in srgb, var(--red, #ef4444) 15%, var(--bg-card));
  color: var(--red, #ef4444);
  border: 1px solid color-mix(in srgb, var(--red, #ef4444) 30%, var(--border));
}

/* ── AI Rewrite badge & inline suggestions ── */
.apc-ai-rewrite-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--bg-card)), color-mix(in srgb, var(--accent) 8%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}
.apc-ai-confidence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 500;
  margin-left: var(--space-sm);
}
.apc-ai-reasoning {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-style: italic;
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
  border-left: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-xs);
  line-height: 1.4;
}
.apc-ai-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s;
}
.apc-ai-copy-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.apc-rewrite-current {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-decoration: line-through;
  opacity: 0.7;
}
.apc-rewrite-suggested {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Pattern Propagation ── */
.pattern-propagation {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-md);
}
.pp-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.pp-icon { font-size: 1.1rem; }
.pp-desc {
  margin: var(--space-xs) 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.pp-pages {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-sm) 0;
}
.pp-page {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px var(--space-sm);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.pp-page-path {
  font-family: var(--font-mono, monospace);
  color: var(--accent);
}
.pp-page-problem {
  color: var(--text-tertiary);
  font-size: 0.65rem;
}
.pp-more {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding-left: var(--space-sm);
}
.pp-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.pp-apply {
  background: var(--accent) !important;
  color: #fff !important;
}
.pp-dismiss {
  background: transparent !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}

/* ── Toast enhancements ── */
.toast-container {
  position: fixed;
  bottom: calc(var(--space-md) + 30px);
  right: var(--space-md);
  z-index: 999;
}

/* ── Freshness Banner ── */
@keyframes slideUp {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.freshness-banner {
  position: fixed;
  bottom: var(--space-lg, 16px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--accent, #6366f1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 9999;
  font-size: 0.88rem;
  color: var(--fg, #e2e8f0);
  animation: slideUp 0.3s ease;
}
.freshness-banner-text { white-space: nowrap; }
.freshness-banner-btn {
  background: var(--accent, #6366f1);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm, 4px);
  padding: 4px 12px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
}
.freshness-banner-btn:hover { filter: brightness(1.15); }
.freshness-banner-dismiss {
  background: none;
  border: none;
  color: var(--fg-muted, #94a3b8);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.freshness-banner-dismiss:hover { color: var(--fg, #e2e8f0); }

/* ── Skip to content (a11y) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  background: var(--accent);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: 10000;
  font-size: var(--text-sm);
}
.skip-link:focus {
  top: var(--space-sm);
}

/* ── Trend chart hover dots ── */
.trend-hover-dot {
  cursor: pointer;
  transition: r 0.15s ease;
}
.trend-hover-dot:hover {
  r: 4;
  fill: var(--accent);
  opacity: 0.8;
}

/* ── Severity color contrast fix (WCAG AA) ── */
.sev-medium, .mm-type-commercial {
  color: #92400e; /* darker amber for AA contrast on light backgrounds */
}
[data-theme="dark"] .sev-medium,
[data-theme="dark"] .mm-type-commercial {
  color: #fbbf24; /* brighter amber on dark backgrounds */
}

/* ── Focus visible outlines (keyboard navigation) ── */
.nav-tab:focus-visible,
.icon-btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.5);
}

/* ── Tooltips for title attributes ── */
[title] {
  position: relative;
  cursor: help;
}

/* ── Live region for dynamic content ── */
.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;
}

@media (max-width: 640px) {
  .impact-hero-kpis { gap: var(--space-sm); }
  .ih-kpi { min-width: 80px; }
  .ih-kpi-value { font-size: var(--text-lg); }
  .il-entry { flex-direction: column; }
  .save-indicator { bottom: var(--space-sm); right: var(--space-sm); }
  .pattern-propagation { padding: var(--space-sm); }
  .pp-actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════
   CORE WEB VITALS
   ═══════════════════════════════════════════════════════════════════ */
.cwv-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.cwv-page-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); }
.cwv-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); }
.cwv-page-path { font-weight: 600; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 75%; }
.cwv-page-score { font-weight: 800; font-size: var(--text-lg); }
.cwv-metrics { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.cwv-metric { font-size: var(--text-xs); padding: 2px 8px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); }
.cwv-metric.cwv-good { color: var(--success); border-color: var(--success); }
.cwv-metric.cwv-needs-improvement { color: var(--sev-medium-text); border-color: var(--sev-medium); }
.cwv-metric.cwv-poor { color: var(--sev-critical); border-color: var(--sev-critical); }
.cwv-opportunities { margin-top: var(--space-md); }
.cwv-opp-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.cwv-opp-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--text-sm); }
.cwv-opp-title { flex: 1; font-weight: 500; }
.cwv-opp-pages { font-size: var(--text-xs); color: var(--text-tertiary); }
.cwv-opp-savings { font-size: var(--text-xs); color: var(--sev-medium-text); font-weight: 600; }

/* CWV Toolbar — retest, strategy toggle, custom URL */
.cwv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border); }
.cwv-toolbar-left { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.cwv-toolbar-right { display: flex; align-items: center; }
.cwv-strategy-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cwv-strat-btn { padding: 4px 10px; font-size: var(--text-xs); border: none; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.cwv-strat-btn.active { background: var(--accent); color: white; font-weight: 600; }
.cwv-strat-btn:hover:not(.active) { background: var(--bg-hover); }
.cwv-retest-btn, .cwv-trend-btn { padding: 4px 12px; font-size: var(--text-xs); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
.cwv-retest-btn:hover, .cwv-trend-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.cwv-retest-btn:disabled, .cwv-trend-btn:disabled { opacity: 0.5; cursor: wait; }
.cwv-url-form { display: flex; gap: 4px; }
.cwv-url-input { width: 200px; padding: 4px 8px; font-size: var(--text-xs); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); }
.cwv-url-input:focus { outline: none; border-color: var(--accent); }
.cwv-url-go { padding: 4px 10px; font-size: var(--text-xs); border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: white; cursor: pointer; font-weight: 600; }
.cwv-url-go:hover { opacity: 0.85; }
.cwv-freshness { color: var(--text-tertiary); font-size: var(--text-xs); }

/* CWV Custom result badge */
.cwv-custom-badge { display: inline-block; font-size: 9px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: white; vertical-align: middle; margin-left: 4px; font-weight: 600; text-transform: uppercase; }
.cwv-custom-result { border-width: 2px; }

/* CWV Trend area */
.cwv-trend-area { margin-bottom: var(--space-md); }
.cwv-trend-empty { text-align: center; padding: var(--space-md); color: var(--text-tertiary); font-size: var(--text-sm); }
.cwv-trend-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); flex-wrap: wrap; }
.cwv-trend-summary { font-size: var(--text-sm); color: var(--text-secondary); }
.cwv-trend-chart { position: relative; margin-bottom: var(--space-sm); }
.cwv-sparkline-svg { width: 100%; height: 80px; display: block; }
.cwv-trend-dates { display: flex; justify-content: space-between; position: relative; font-size: 10px; color: var(--text-tertiary); padding: 0 5px; }
.cwv-trend-dates span { position: absolute; transform: translateX(-50%); }
.cwv-trend-pages { overflow-x: auto; margin-top: var(--space-md); }
.cwv-trend-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.cwv-trend-table th, .cwv-trend-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.cwv-trend-table th { font-weight: 600; color: var(--text-secondary); background: var(--bg-card); position: sticky; top: 0; }
.cwv-trend-table th:first-child, .cwv-trend-table td:first-child { text-align: left; }
.cwv-trend-page-path { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cwv-trend-na { color: var(--text-tertiary); }

/* ═══════════════════════════════════════════════════════════════════
   DOMAIN AUTHORITY / BACKLINKS
   ═══════════════════════════════════════════════════════════════════ */
.authority-overview { display: flex; align-items: center; gap: var(--space-lg); margin-bottom: var(--space-md); }
.authority-score-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--border); background: var(--bg-card); }
.authority-score-value { font-size: var(--text-2xl); font-weight: 800; line-height: 1; }
.authority-score-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
.authority-mode-badge { font-size: var(--text-xs); padding: 4px 10px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); }
.authority-signals { margin-top: var(--space-md); }
.auth-signal-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.auth-signal-name { font-weight: 600; min-width: 140px; }
.auth-signal-value { font-weight: 500; min-width: 60px; }
.auth-signal-interp { color: var(--text-secondary); flex: 1; }
.authority-bottlenecks { margin-top: var(--space-md); }
.auth-bn-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); border-bottom: 1px solid var(--border); }
.auth-bn-path { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-bn-pos { color: var(--sev-medium-text); font-weight: 600; }
.auth-bn-imp { color: var(--text-tertiary); }
.auth-bn-reason { color: var(--sev-high); font-size: var(--text-xs); }
.authority-recs { margin-top: var(--space-md); }
.auth-rec-row { display: flex; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.auth-rec-priority { font-weight: 700; text-transform: uppercase; font-size: var(--text-xs); min-width: 60px; }
.auth-rec-action { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════
   CONTENT BRIEFS
   ═══════════════════════════════════════════════════════════════════ */
.content-briefs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); }
.cb-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.cb-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); }
.cb-title { font-weight: 700; font-size: var(--text-base); line-height: 1.3; flex: 1; }
.cb-intent { font-size: var(--text-xs); padding: 2px 8px; border-radius: 8px; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.cb-intent-informational { background: color-mix(in srgb, var(--accent) 15%, var(--bg-card)); color: var(--accent); }
.cb-intent-transactional { background: color-mix(in srgb, var(--success) 15%, var(--bg-card)); color: var(--success); }
.cb-intent-commercial { background: color-mix(in srgb, var(--sev-high) 15%, var(--bg-card)); color: var(--sev-high); }
.cb-intent-navigational { background: color-mix(in srgb, var(--sev-medium) 15%, var(--bg-card)); color: var(--sev-medium-text); }
.cb-keyword { font-size: var(--text-sm); color: var(--text-secondary); }
.cb-meta { display: flex; gap: var(--space-sm); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-tertiary); }
.cb-meta span { padding: 2px 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
.cb-traffic { color: var(--success) !important; font-weight: 600; }
.cb-outline { font-size: var(--text-sm); margin-top: var(--space-xs); }
.cb-outline-list { margin: var(--space-xs) 0 0; padding-left: 1.2em; }
.cb-outline-list li { margin-bottom: 2px; }
.cb-more { color: var(--text-tertiary); font-style: italic; }
.cb-related { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--text-xs); }
.cb-kw-chip { padding: 2px 8px; background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 999px; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════
   ACTION TAB CONTENT BRIEFS
   ═══════════════════════════════════════════════════════════════════ */
.content-briefs-container { display: flex; flex-direction: column; gap: var(--space-md); }
.content-brief-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cbc-summary { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md); cursor: pointer; background: var(--bg-card); border: none; width: 100%; text-align: left; }
.cbc-summary:hover { background: color-mix(in srgb, var(--bg-hover) 50%, var(--bg-card)); }
.cbc-header { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cbc-keyword { font-weight: 600; font-size: var(--text-base); color: var(--text-primary); line-height: 1.3; }
.cbc-volume { font-size: var(--text-sm); color: var(--text-secondary); }
.cbc-ceiling { font-size: var(--text-sm); color: var(--success); font-weight: 500; }
.cbc-chevron { font-size: var(--text-lg); color: var(--text-tertiary); transition: transform 0.2s ease; margin-left: var(--space-sm); }
.content-brief-card[open] .cbc-chevron { transform: rotate(180deg); }
.cbc-body { padding: var(--space-md); border-top: 1px solid var(--border); background: var(--bg-secondary); }
.cbc-section { margin-bottom: var(--space-lg); }
.cbc-section h4 { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-xs) 0; text-transform: uppercase; letter-spacing: 0.5px; }
.cbc-section p { margin: 0; color: var(--text-primary); line-height: 1.5; }
.cbc-section ul { margin: var(--space-xs) 0 0; padding-left: 1.2em; }
.cbc-section li { margin-bottom: 4px; color: var(--text-primary); line-height: 1.4; }
.cbc-section ol { margin: var(--space-xs) 0 0; padding-left: 1.2em; }
.traffic-ceiling { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.tc-item { display: flex; flex-direction: column; gap: 2px; }
.tc-label { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 500; }
.tc-value { font-size: var(--text-sm); color: var(--text-primary); font-weight: 600; }
.cbc-actions { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-light); }
.cbc-actions .btn-primary { width: 100%; }

/* ── Empty state cards ────────────────────────────────────────────── */
.empty-state-card { text-align: center; padding: var(--space-xl) var(--space-lg); }
.empty-state-icon { font-size: 3rem; margin-bottom: var(--space-md); opacity: 0.5; }
.empty-state-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-sm); }
.empty-state-desc { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; max-width: 520px; margin: 0 auto var(--space-md); }
.empty-state-hint { font-size: var(--text-xs); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); display: inline-block; max-width: 480px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════
   ACTION BUTTON LAYOUT — Primary + Secondary inline grouping
   ════════════════════════════════════════════════════════════════ */

/* Shared layout: all action containers use flex row */
.mc-actions, .pc-actions, .wm-actions, .mi-actions,
.pc-compressed-actions, .action-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Secondary actions group (share + JSON) */
.mc-secondary-actions, .pc-secondary-actions, .wm-secondary-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Ghost buttons (all share/JSON buttons) ────────────────── */
.mc-share, .mc-share-json,
.pc-share, .pc-share-json,
.wm-share-btn, .wm-share-json-btn,
.mi-share, .qw-share, .fl-share,
.action-share-btn, .action-share-json-btn,
.action-nav-share, .pc-share-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.2;
}

/* Hover: accent tint */
.mc-share:hover, .mc-share-json:hover,
.pc-share:hover, .pc-share-json:hover,
.wm-share-btn:hover, .wm-share-json-btn:hover,
.mi-share:hover, .qw-share:hover, .fl-share:hover,
.action-share-btn:hover, .action-share-json-btn:hover,
.action-nav-share:hover, .pc-share-mini:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Active/pressed */
.mc-share:active, .mc-share-json:active,
.pc-share:active, .pc-share-json:active,
.wm-share-btn:active, .wm-share-json-btn:active,
.mi-share:active, .qw-share:active, .fl-share:active,
.action-share-btn:active, .action-share-json-btn:active {
  transform: scale(0.96);
}

/* Compact variants: icon-only buttons */
.pc-share-mini, .mi-share, .qw-share, .fl-share,
.action-share-btn, .action-share-json-btn {
  padding: 5px 8px;
  font-size: 13px;
}

/* ── Quick win row actions ─────────────────────────────────── */
.qw-task-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ── Full list start cell layout ───────────────────────────── */
.fl-start {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Compressed priority card actions ──────────────────────── */
.pc-compressed-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}
.pc-arrow {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* ── Weekly mission actions ────────────────────────────────── */
.wm-actions {
  flex-wrap: wrap;
}
.wm-complete-btn {
  flex: 1;
  min-width: 120px;
}

/* ════════════════════════════════════════════════════════════════
   SHARE MENU POPOVER — Multi-channel sharing
   ════════════════════════════════════════════════════════════════ */
.share-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(2px);
}
.share-menu-overlay.share-menu-visible {
  opacity: 1;
}
.share-menu {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0,0,0,0.3));
  width: min(380px, 92vw);
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.share-menu-visible .share-menu {
  transform: scale(1) translateY(0);
}
.share-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
}
.share-menu-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-primary);
}
.share-menu-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: all 0.15s ease;
}
.share-menu-close:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.share-menu-task-preview {
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.share-menu-task-name {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.share-menu-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: var(--space-sm);
}
.share-channel-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.share-channel-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}
.share-channel-btn:active {
  transform: scale(0.97);
}
.share-channel-icon {
  font-size: 1.3rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.share-channel-label {
  white-space: nowrap;
}

/* Email input inside the share menu */
.share-menu-email-input {
  display: flex;
  gap: var(--space-xs);
  padding: 0 var(--space-lg) var(--space-md);
  animation: shareEmailSlide 0.2s ease;
}
@keyframes shareEmailSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.share-email-field {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-body);
  color: var(--text-primary);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.15s ease;
}
.share-email-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.share-email-send {
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.share-email-send:hover {
  background: color-mix(in srgb, var(--accent) 15%, black);
}
.share-email-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE: Action buttons
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .mc-actions, .pc-actions, .wm-actions {
    flex-direction: column;
    gap: var(--space-xs);
  }
  .mc-start { width: 100%; flex: none; }
  .mc-secondary-actions, .pc-secondary-actions, .wm-secondary-actions {
    width: 100%;
    justify-content: center;
  }
  .share-menu-channels {
    grid-template-columns: 1fr;
  }
  .mi-actions {
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  .cwv-summary-grid { grid-template-columns: 1fr; }
  .cwv-toolbar { flex-direction: column; align-items: stretch; }
  .cwv-toolbar-left { justify-content: center; }
  .cwv-toolbar-right { justify-content: center; }
  .cwv-url-input { width: 100%; min-width: 0; }
  .cwv-url-form { flex: 1; }
  .cwv-trend-table { font-size: 10px; }
  .cwv-trend-page-path { max-width: 100px; }
  .content-briefs-grid { grid-template-columns: 1fr; }
  .authority-overview { flex-direction: column; align-items: flex-start; }
  .auth-signal-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .auth-bn-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ─── Mission Tabs (Top 5 vs All Recommendations) ─── */
.mission-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.mission-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
}
.mission-tab:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-surface));
}
.mission-tab.active {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.mission-tab-icon {
  font-size: var(--text-lg);
}
.mission-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--bg-inset);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
}
.mission-tab.active .mission-tab-count {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.mission-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: white;
  font-size: var(--text-xs);
  font-weight: 700;
  margin-left: 4px;
}
.mission-tab-content {
  animation: fadeIn 0.3s ease;
}
.mission-tab-content[aria-hidden="true"] {
  display: none;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.skeleton-grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.skeleton-card {
  height: 120px;
  background: linear-gradient(90deg, var(--bg-inset) 0%, color-mix(in srgb, var(--bg-inset) 80%, white) 50%, var(--bg-inset) 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.load-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.load-error .error-icon {
  font-size: 48px;
}
.load-error p {
  color: var(--text-secondary);
  margin: 0;
}
.load-error button {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.load-error button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
}
.all-recommendations-wrapper {
  margin-top: var(--space-md);
}

/* ══════════════════════════════════════════════════════════════════ */
/* MCP CONFIG MODAL                                                   */
/* ══════════════════════════════════════════════════════════════════ */

.mcp-modal-content {
  max-width: 580px;
  width: 100%;
}

.mcp-modal-body { padding: var(--space-lg); }
.mcp-intro {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  line-height: var(--leading-relaxed);
}

.mcp-field-group { margin-bottom: var(--space-md); }
.mcp-field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}
.mcp-copy-row {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}
.mcp-field-input {
  flex: 1;
  font-size: var(--text-sm);
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  background: var(--bg-subtle, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  min-width: 0;
}
.mcp-key-input { letter-spacing: 0.1em; }
.mcp-copy-btn {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.mcp-copy-btn:hover { background: var(--accent-bg); }
.mcp-key-toggle-btn { font-size: var(--text-sm); }
.mcp-key-status {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 4px;
  min-height: 1.2em;
}
.mcp-rotate-btn {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.mcp-rotate-btn:hover { opacity: 0.75; }

.mcp-config-block-wrap {
  position: relative;
}
.mcp-config-pre {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  color: var(--text-primary);
  background: var(--bg-subtle, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.mcp-copy-config-btn {
  margin-top: var(--space-xs);
  display: block;
  width: 100%;
  text-align: center;
}

.mcp-docs-link {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-decoration: none;
  margin-right: auto;
}
.mcp-docs-link:hover { color: var(--accent); }

/* Connect agent button (agent view header) */
.mcp-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}
.mcp-connect-btn:hover { background: var(--accent); color: #fff; }
.mcp-connect-icon { font-size: var(--text-base); font-family: var(--font-mono, monospace); }


/* ═══════════════════════════════════════════════════════════════ */
/* ACTION VIEW - QUICK WINS                                      */
/* ═══════════════════════════════════════════════════════════════ */

.quick-wins-container {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.qw-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: border-color 0.15s ease;
}

.qw-card:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

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

.qw-path {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--text-sm);
  background: var(--bg-inset);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qw-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-inset);
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
}

.qw-task {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

.qw-go {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.qw-go:hover {
  background: var(--accent-hover);
}

/* ─── Grouped Quick Wins ─── */
.qw-page-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.qw-page-group:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.qw-page-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}
.qw-count {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 1px var(--space-sm);
  border-radius: var(--radius-sm);
}
.qw-task-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}
.qw-task-row + .qw-task-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.qw-task-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* ─── Impact KPI Banner ─── */
.impact-kpi-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}
.ikb-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}
.ikb-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}
.ikb-text strong {
  color: var(--accent);
  font-weight: 700;
  font-size: var(--text-base);
}

@media (max-width: 768px) {
  .quick-wins-container {
    grid-template-columns: 1fr;
  }
  
  .qw-task-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .qw-task-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .qw-path {
    max-width: none;
  }

  .impact-kpi-banner {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ════════════════════════════════════════════════════════════════ */
/* IMPACT CHECK-INS                                               */
/* ════════════════════════════════════════════════════════════════ */

.impact-checkins {
  margin: var(--space-lg) 0;
}

.impact-checkins .section-heading {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: 600;
}

.checkin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.checkin-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent-light);
}

.checkin-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.checkin-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.checkin-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.checkin-body {
  margin-bottom: var(--space-lg);
}

.checkin-message {
  margin: 0 0 var(--space-md) 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.checkin-metrics {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-light);
}

.metric-item:last-child {
  border-bottom: none;
}

.metric-label {
  font-weight: 500;
  color: var(--text-primary);
}

.metric-values {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.metric-before {
  color: var(--text-tertiary);
}

.metric-arrow {
  color: var(--text-muted);
}

.metric-after.improved {
  color: var(--green);
  font-weight: 600;
}

.metric-after.unchanged {
  color: var(--text-secondary);
}

.metric-change {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.checkin-recommendation {
  margin: var(--space-md) 0 0 0;
  padding: var(--space-md);
  background: color-mix(in srgb, var(--blue, #3b82f6) 5%, var(--bg-card));
  border-left: 3px solid var(--blue, #3b82f6);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-style: italic;
}

.checkin-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.checkin-actions .btn {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

.checkin-actions .btn-primary {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
}

.checkin-actions .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.checkin-actions .btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.checkin-actions .btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .checkin-card {
    padding: var(--space-md);
  }
  
  .checkin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  
  .checkin-actions {
    flex-direction: column;
  }
  
  .checkin-actions .btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   EXPLORE VIEW — Stats Bar, Traffic Trend, WoW Table,
   Health Diagnostic, Keyword Intelligence sub-sections
   ═══════════════════════════════════════════════════════════════ */

.explore-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.stats-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.stats-bar-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.stats-bar-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* Traffic Trend */
.explore-traffic-trend {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.explore-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.explore-trend-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}
.explore-trend-period {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.explore-trend-chart {
  min-height: 180px;
}
.explore-trend-legend {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

/* Health Diagnostic */
.health-diagnostic-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.hb-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-sm);
}
.hb-bar-track {
  height: 6px;
  background: var(--bg-inset);
  border-radius: 3px;
  overflow: hidden;
}
.hb-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.hb-bar-good { background: var(--success); }
.hb-bar-warn { background: var(--sev-medium); }
.hb-bar-critical { background: var(--sev-critical); }
.hb-label { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; }
.hb-score { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); min-width: 36px; text-align: right; }

/* Keyword Intelligence sub-sections */
.kw-intel-section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.top-kw-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.top-kw-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.top-kw-query { font-weight: 600; color: var(--text-primary); flex: 1; min-width: 120px; }
.top-kw-stat { font-size: var(--text-xs); color: var(--text-secondary); }

.hilc-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.hilc-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.hilc-query { font-weight: 600; color: var(--text-primary); flex: 1; min-width: 120px; }
.hilc-imp { font-size: var(--text-xs); color: var(--text-secondary); }
.hilc-ctr { font-size: var(--text-xs); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   KEYWORD OPPORTUNITY MAP — THE BIG INSIGHT
   ═══════════════════════════════════════════════════════════════ */

.keyword-opportunity-map {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.kom-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.kom-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.kom-narrative {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  font-style: italic;
}

.kom-chart-container {
  position: relative;
  margin-bottom: var(--space-md);
}

.kom-quadrants {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  pointer-events: none;
  z-index: 1;
}

.kom-quadrant {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.7;
}

.kom-quadrant-tl {
  top: 10px;
  left: 10px;
  width: calc(50% - 30px);
  height: calc(50% - 30px);
}

.kom-quadrant-tr {
  top: 10px;
  right: 10px;
  width: calc(50% - 30px);
  height: calc(50% - 30px);
}

.kom-quadrant-bl {
  bottom: 10px;
  left: 10px;
  width: calc(50% - 30px);
  height: calc(50% - 30px);
}

.kom-quadrant-br {
  bottom: 10px;
  right: 10px;
  width: calc(50% - 30px);
  height: calc(50% - 30px);
}

.kom-quadrant-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 600;
  line-height: 1.2;
}

.kom-quadrant-label small {
  font-weight: 400;
  font-size: 0.65rem;
}

.kom-callout {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.kom-callout::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--accent);
}

.kom-chart {
  width: 100%;
  height: 500px;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.kom-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.kom-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.kom-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Narrative Styles */
.kom-narrative {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
  border-left: 3px solid var(--accent);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.kom-narrative strong {
  color: var(--accent);
  font-weight: 600;
}

/* Modal Styles */
.kom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.kom-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  max-width: 400px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.kom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.kom-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.kom-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kom-modal-close:hover {
  color: var(--text-primary);
}

.kom-modal-body {
  padding: var(--space-md);
}

.kom-modal-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-light);
}

.kom-modal-stat:last-child {
  border-bottom: none;
}

.kom-modal-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.kom-modal-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.kom-modal-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  text-align: center;
}

.kom-modal-action {
  background: var(--accent);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.kom-modal-action:hover {
  background: color-mix(in srgb, var(--accent) 90%, black);
}

/* SVG Interaction Styles */
.kom-chart circle[data-keyword] {
  cursor: pointer;
  transition: r 0.2s ease, fill 0.2s ease;
}

.kom-chart circle[data-keyword]:hover {
  r: 6;
  fill: var(--accent-hover);
}

.kom-chart circle[data-keyword]:active {
  r: 7;
}

@media (max-width: 640px) {
  .explore-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar-value { font-size: 1.15rem; }
  .hb-item { grid-template-columns: 1fr 90px 36px; }
  
  .keyword-opportunity-map {
    padding: var(--space-md);
  }
  
  .kom-chart {
    height: 350px;
  }
  
  .kom-quadrants {
    height: 350px;
  }
  
  .kom-legend {
    gap: var(--space-md);
  }
  
  .kom-legend-item {
    font-size: 0.7rem;
  }
}

/* ════════════════════════════════════════════════════════════════ */
/* DATA ATTRIBUTION FOOTER                                        */
/* ════════════════════════════════════════════════════════════════ */

.data-attribution-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.data-attribution-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.data-attribution-btn:hover,
.data-attribution-btn:focus {
  background: var(--bg-inset);
  color: var(--text-secondary);
}

.data-attribution-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  max-width: 300px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
}

.data-attribution-footer:hover .data-attribution-tooltip,
.data-attribution-tooltip.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.data-attribution-content {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.data-sources,
.data-refresh {
  margin-bottom: var(--space-xs);
}

.data-note {
  color: var(--sev-medium-text);
  font-size: var(--text-xs);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.warning-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Mobile bottom sheet */
@media (max-width: 768px) {
  .data-attribution-tooltip {
    position: fixed;
    bottom: 58px; /* Clear the footer-nav bar height on mobile */
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom: none;
    margin-bottom: 0;
    max-width: none;
    max-height: 55vh;
    overflow-y: auto;
  }
  
  .data-attribution-footer:hover .data-attribution-tooltip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  .data-attribution-tooltip.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .data-attribution-footer {
  background: var(--bg-card);
  border-top-color: var(--border);
}

[data-theme="dark"] .data-attribution-tooltip {
  background: var(--bg-card);
  border-color: var(--border);
}

/* ════════════════════════════════════════════════════════════════ */
/* EMPTY STATE COMPONENT                                          */
/* ════════════════════════════════════════════════════════════════ */

.empty-state-card {
  text-align: center;
  padding: var(--space-xl);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  display: block;
}

.empty-state-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: var(--leading-tight);
}

.empty-state-body {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  line-height: var(--leading-normal);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-cta {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--text-sm);
  transition: background-color 0.2s ease;
  cursor: pointer;
  border: none;
}

.empty-state-cta:hover {
  background: var(--primary-hover);
}

[data-theme="dark"] .empty-state-card {
  background: var(--bg-card);
}

[data-theme="dark"] .empty-state-cta {
  background: var(--primary);
}

[data-theme="dark"] .empty-state-cta:hover {
  background: var(--primary-hover);
}

/* ════════════════════════════════════════════════════════════════ */
/* CROSS-TAB NAVIGATION STYLES                                    */
/* ════════════════════════════════════════════════════════════════ */

.nav-highlight {
  animation: nav-highlight-pulse 2s ease-in-out;
  border-left: 3px solid var(--accent);
  padding-left: var(--space-sm);
}

@keyframes nav-highlight-pulse {
  0% { background-color: rgba(59, 130, 246, 0.1); }
  50% { background-color: rgba(59, 130, 246, 0.2); }
  100% { background-color: transparent; }
}

.cross-tab-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

.cross-tab-link:hover {
  background: var(--accent-light);
  color: var(--accent-dark);
  text-decoration: underline;
}

.fix-link {
  background: var(--sev-high-bg);
  color: var(--sev-high);
  font-size: var(--text-sm);
  padding: 4px 8px;
  margin-left: var(--space-sm);
  border-radius: var(--radius-sm);
}

.fix-link:hover {
  background: var(--sev-high);
  color: white;
}

/* ════════════════════════════════════════════════════════════════ */
/* KPI EXPLORE LINKS                                              */
/* ════════════════════════════════════════════════════════════════ */

.kpi-explore-link {
  display: inline-block;
  margin-left: var(--space-xs);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8em;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.kpi-card:hover .kpi-explore-link {
  opacity: 1;
  color: var(--accent);
}

.kpi-explore-link:hover {
  color: var(--accent);
  transform: scale(1.1);
}

.trend-explore-link {
  display: inline-block;
  margin-left: var(--space-xs);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
  opacity: 0.7;
}

.trend-indicator:hover .trend-explore-link {
  opacity: 1;
  color: var(--accent);
}

.trend-explore-link:hover {
  color: var(--accent);
  transform: scale(1.1);
}

/* ════════════════════════════════════════════════════════════════ */
/* MISSION CARD EXPLORE LINKS                                    */
/* ════════════════════════════════════════════════════════════════ */

.mc-explore-link {
  display: block;
  margin: var(--space-sm) 0;
  color: var(--accent);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.1);
}

.mc-explore-link:hover {
  background: var(--accent);
  color: white;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════ */
/* KEYWORD FIX LINKS                                              */
/* ════════════════════════════════════════════════════════════════ */

.kw-fix-link {
  display: inline-block;
  margin-left: var(--space-sm);
  color: var(--sev-critical);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
}

.kw-fix-link:hover {
  background: var(--sev-critical);
  color: white;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════ */
/* MOBILE NAVIGATION (Bottom Tab Bar)                             */
/* ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Hide topbar nav on mobile — footer contains the mobile tabs */
  .topbar-nav { display: none; }
  .topbar { padding: 0 var(--space-sm); }
  .topbar-inner { gap: 4px; }

  /* Footer becomes primary mobile nav container */
  .data-attribution-footer { justify-content: space-between; padding: 8px 12px; gap: 8px; z-index: 1100; }

  .footer-nav { display: flex; gap: 4px; align-items: stretch; flex: 1; justify-content: space-between; }
  .footer-tablist { display: flex; gap: 4px; align-items: stretch; flex: 1; justify-content: space-between; }
  .footer-nav .nav-tab { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; border-radius: var(--radius-sm); background: transparent; border: none; min-width: 0; position: relative; text-align: center; }
  .footer-nav .nav-tab .nav-icon { font-size: 1rem; }
  .footer-nav .nav-tab .nav-label { font-size: 0.68rem; line-height: 1.05; color: var(--text-secondary); font-weight: 600; }
  .footer-nav .nav-tab .nav-subtitle { display: block; font-size: 0.54rem; line-height: 1.1; color: var(--text-muted); max-width: 72px; white-space: normal; }
  .footer-nav .nav-tab.active { background: transparent; color: var(--accent); }
  .footer-nav .nav-tab:active { transform: translateY(1px); }

  /* Keep attribution button compact on mobile */
  .data-attribution-btn { padding: 6px; margin-left: 6px; }

  /* Add safe bottom padding so content never hides behind footer */
  body { padding-bottom: 120px; }

  /* Ensure views don't get hidden behind footer */
  .view { padding-bottom: var(--space-xl); }


  .nav-tab {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-xs) var(--space-xs);
    min-height: 44px; /* Touch target minimum */
    font-size: 16px; /* Prevent iOS zoom */
    gap: 2px;
  }

  .nav-tab span.nav-icon { display: block; font-size: 1rem; }
  .nav-tab span.nav-label { display: block; font-size: 0.65rem; }
  .nav-tab span.nav-subtitle { display: none; }
  .footer-nav .nav-tab span.nav-subtitle { display: block; }

  /* Hide toolbar text labels at this breakpoint too */
  .icon-btn .btn-label { display: none; }
  .icon-btn { padding: 0; min-width: 44px; min-height: 44px; }

  /* Add padding to body to account for fixed nav (and bottom footer) */
  body { padding-bottom: 120px; }

  /* Ensure views don't get hidden behind nav */
  .view { padding-bottom: var(--space-xl); }

  /* Topbar: hide logo text, compact right section */
  .logo-text { display: none; }
  .topbar-right { gap: 2px; }
}

/* ════════════════════════════════════════════════════════════════ */
/* SKELETON LOADERS                                                */
/* ════════════════════════════════════════════════════════════════ */

@keyframes skeleton-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

.skeleton {
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-xs);
}

.skeleton-text:last-child {
  margin-bottom: 0;
  width: 60%;
}

.skeleton-text.wide {
  width: 100%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-text.narrow {
  width: 40%;
}

/* Card skeleton */
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.skeleton-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.skeleton-card-header .skeleton {
  height: 24px;
  width: 24px;
  border-radius: 50%;
}

.skeleton-card-header .skeleton-text {
  height: 20px;
  width: 120px;
}

.skeleton-card-body .skeleton-text {
  height: 16px;
  margin-bottom: var(--space-sm);
}

.skeleton-card-body .skeleton-text.wide {
  height: 16px;
  width: 100%;
}

.skeleton-card-body .skeleton-text.medium {
  height: 16px;
  width: 75%;
}

.skeleton-card-body .skeleton-text.narrow {
  height: 16px;
  width: 50%;
}

/* Chart skeleton */
.skeleton-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  height: 300px;
  display: flex;
  flex-direction: column;
}

.skeleton-chart-header {
  margin-bottom: var(--space-md);
}

.skeleton-chart-header .skeleton-text {
  height: 24px;
  width: 200px;
}

.skeleton-chart-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton-chart-placeholder {
  width: 100%;
  height: 200px;
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton-chart-placeholder .skeleton {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* Chart skeleton bars (mini trend chart) */
.skeleton-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
  padding: 0 var(--space-md);
}

.skeleton-bar {
  flex: 1;
  background: var(--bg-inset);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.skeleton-bar:nth-child(2) { height: 65%; animation-delay: 0.1s; }
.skeleton-bar:nth-child(3) { height: 45%; animation-delay: 0.2s; }
.skeleton-bar:nth-child(4) { height: 80%; animation-delay: 0.3s; }
.skeleton-bar:nth-child(5) { height: 55%; animation-delay: 0.4s; }
.skeleton-bar:nth-child(6) { height: 70%; animation-delay: 0.5s; }
.skeleton-bar:nth-child(7) { height: 50%; animation-delay: 0.6s; }

/* Smooth reveal for loaded content */
@keyframes fadeInChart {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#mini-trend-container[style*="display: block"],
#mini-trend-container[style*="display:block"] {
  animation: fadeInChart 0.3s ease-out;
}

/* Table skeleton */
.skeleton-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.skeleton-table-header {
  margin-bottom: var(--space-md);
}

.skeleton-table-header .skeleton-text {
  height: 20px;
  width: 150px;
}

.skeleton-table-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border);
}

.skeleton-table-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.skeleton-table-row .skeleton {
  height: 16px;
  flex: 1;
}

.skeleton-table-row .skeleton.narrow {
  flex: 0 0 80px;
}

.skeleton-table-row .skeleton.wide {
  flex: 2;
}

/* Priority card skeleton */
.skeleton-priority-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-sm);
  border-left: 4px solid var(--border);
}

.skeleton-priority-card .skeleton-rank {
  height: 20px;
  width: 28px;
  margin-bottom: var(--space-sm);
}

.skeleton-priority-card .skeleton-title {
  height: 20px;
  width: 100%;
  margin-bottom: var(--space-sm);
}

.skeleton-priority-card .skeleton-description {
  height: 16px;
  width: 100%;
  margin-bottom: var(--space-sm);
}

.skeleton-priority-card .skeleton-description.medium {
  width: 80%;
}

.skeleton-priority-card .skeleton-meta {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.skeleton-priority-card .skeleton-meta .skeleton {
  height: 20px;
  width: 60px;
  border-radius: var(--radius-full);
}

.skeleton-priority-card .skeleton-button {
  height: 36px;
  width: 80px;
  border-radius: var(--radius-sm);
}

/* AI chat skeleton */
.skeleton-ai-chat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.skeleton-ai-chat-messages {
  flex: 1;
  margin-bottom: var(--space-md);
}

.skeleton-ai-chat-message {
  margin-bottom: var(--space-md);
  display: flex;
  gap: var(--space-sm);
}

.skeleton-ai-chat-message.user {
  justify-content: flex-end;
}

.skeleton-ai-chat-message .skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-ai-chat-message .skeleton-bubble {
  max-width: 70%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--bg-inset);
}

.skeleton-ai-chat-message .skeleton-bubble .skeleton-text {
  height: 16px;
  margin-bottom: var(--space-xs);
}

.skeleton-ai-chat-input-area {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.skeleton-ai-chat-input {
  flex: 1;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-inset);
}

.skeleton-ai-chat-send {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-inset);
}

.skeleton-ai-suggestions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  overflow-x: auto;
}

.skeleton-ai-suggestions .skeleton {
  height: 36px;
  width: 120px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ALERT BANNER — Critical Change Alert
   ═══════════════════════════════════════════════════════════════ */
.alert-banner {
  margin: 0 0 var(--space-md) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.alert-banner-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
}
.alert-banner-critical {
  background: color-mix(in srgb, var(--sev-critical) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--sev-critical) 30%, var(--border));
}
.alert-banner-warning {
  background: color-mix(in srgb, var(--sev-medium) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--sev-medium) 30%, var(--border));
}
.alert-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.alert-detail {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.alert-action {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.alert-action:hover { text-decoration: underline; }
.alert-others {
  display: block;
  font-size: 0.65rem;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.alert-dismiss {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.alert-dismiss:hover {
  background: var(--bg-inset);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   NARRATIVE PARAGRAPH — Week-in-Review
   ═══════════════════════════════════════════════════════════════ */
.lede-narrative {
  margin: var(--space-sm) 0 var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
  border-left: 3px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.narrative-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   KPI CONTEXT — "Why This Matters" tooltip line
   ═══════════════════════════════════════════════════════════════ */
.kpi-card .kpi-context {
  display: block;
  font-size: 0.6rem;
  color: var(--text-tertiary);
  margin-top: 3px;
  line-height: 1.35;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.2s ease;
}
.kpi-card:hover .kpi-context,
.kpi-card:focus-within .kpi-context {
  max-height: 60px;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SEVERITY DOT in Full List
   ═══════════════════════════════════════════════════════════════ */
.fl-severity {
  text-align: center;
  font-size: 0.85rem;
}
.fl-sev-dot {
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   IMPACT RESULTS BANNER — Proactive impact narrative
   ═══════════════════════════════════════════════════════════════ */
.impact-results-banner {
  background: color-mix(in srgb, var(--success) 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.irb-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.irb-icon { font-size: 1.5rem; }
.irb-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.irb-wins {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.irb-win-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
}
.irb-win-days {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  min-width: 50px;
}
.irb-win-metric { color: var(--text-primary); }
.irb-positive {
  color: var(--success);
  font-weight: 700;
}
.irb-win-visitors {
  color: var(--success);
  font-size: var(--text-xs);
  font-weight: 600;
}
.irb-summary {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.irb-waiting {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.irb-waiting-icon { font-size: 1.1rem; }

/* ═══════════════════════════════════════════════════════════════
   KEYWORD TOPIC CLUSTERS
   ═══════════════════════════════════════════════════════════════ */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}
.cluster-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: border-color 0.15s ease;
}
.cluster-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.cluster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.cluster-topic {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-transform: capitalize;
}
.cluster-count {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-inset);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.cluster-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.cluster-metric {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--bg-inset);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.cluster-pos-good { color: var(--success); font-weight: 600; }
.cluster-pos-mid { color: var(--sev-medium-text); font-weight: 600; }
.cluster-pos-low { color: var(--sev-high); font-weight: 600; }
.cluster-intent {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.cluster-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cluster-kw {
  font-size: var(--text-xs);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: default;
}
.cluster-more {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: 2px 6px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* SCHEMA MARKUP GENERATOR                                           */
/* ═══════════════════════════════════════════════════════════════════ */
.ai-schema-section { margin: var(--space-lg) 0; }
.schema-gen-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: var(--space-lg);
}
.schema-page-selector { margin-bottom: var(--space-md); }
.schema-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.schema-selector-header h4 { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.schema-page-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
}
.schema-page-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.schema-page-option:hover { background: var(--bg-hover, rgba(99,102,241,0.06)); }
.schema-page-cb { flex-shrink: 0; }
.schema-page-path {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #6366f1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.schema-page-title {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schema-page-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--bg-input, rgba(99,102,241,0.08));
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.schema-type-prefs { margin-bottom: var(--space-md); }
.schema-type-prefs h4 { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.schema-type-prefs .help-text { font-weight: 400; font-size: var(--text-xs); color: var(--text-tertiary); }
.schema-type-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.schema-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
  background: var(--bg-card);
}
.schema-type-chip:hover { border-color: #6366f1; color: #6366f1; }
.schema-type-chip:has(input:checked) {
  background: rgba(99,102,241,0.1);
  border-color: #6366f1;
  color: #6366f1;
  font-weight: 600;
}
.schema-type-cb { width: 0; height: 0; opacity: 0; position: absolute; }
.schema-gen-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.schema-gen-btn {
  background: #6366f1 !important;
  color: #fff !important;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
}
.schema-gen-btn:hover { background: #4f46e5 !important; }
.schema-gen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.schema-gen-hint { font-size: var(--text-xs); color: var(--text-tertiary); }
.schema-manual-entry { padding: var(--space-sm); }
.schema-manual-row { display: flex; gap: var(--space-sm); margin-top: var(--space-xs); }
.schema-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input, var(--bg-card));
  color: var(--text-primary);
  font-size: var(--text-sm);
}

/* Schema results */
.schema-results { margin-top: var(--space-md); }
.schema-summary-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(99,102,241,0.06);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
}
.schema-summary-stat { color: var(--text-secondary); }
.schema-summary-types { display: flex; gap: 4px; margin-left: auto; }
.schema-type-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(99,102,241,0.1);
  color: #6366f1;
  border: 1px solid rgba(99,102,241,0.2);
}
.schema-type-primary { background: #6366f1; color: #fff; border-color: #6366f1; }
.schema-result-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 3px solid #6366f1;
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.schema-result-url {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-sm);
}
.schema-result-url a { color: #6366f1; text-decoration: none; }
.schema-result-url a:hover { text-decoration: underline; }
.schema-detected { display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-md); flex-wrap: wrap; }
.schema-detected-label { font-size: var(--text-xs); color: var(--text-tertiary); }
.schema-markup-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--bg-input, rgba(0,0,0,0.02));
}
.schema-markup-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.schema-priority {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.schema-priority-required { background: rgba(34,197,94,0.1); color: #16a34a; }
.schema-priority-recommended { background: rgba(234,179,8,0.1); color: #ca8a04; }
.schema-priority-optional { background: rgba(148,163,184,0.1); color: #64748b; }
.schema-copy-btn { margin-left: auto !important; }
.schema-copy-btn.copied { background: #22c55e !important; color: #fff !important; }
.schema-reason {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.5;
}
.schema-code-details summary {
  font-size: var(--text-xs);
  color: #6366f1;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.schema-code-block {
  background: var(--bg-code, #1e1e2e);
  color: var(--text-code, #cdd6f4);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: var(--space-xs);
  max-height: 300px;
  overflow-y: auto;
}

/* CMS paste guide */
.schema-paste-guide {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-md);
}
.schema-paste-guide h4 { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; }
.schema-cms-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.schema-cms-tab {
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 500;
  border: none;
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.schema-cms-tab:hover { color: var(--text-primary); }
.schema-cms-tab.active { color: #6366f1; border-bottom-color: #6366f1; font-weight: 600; }
.schema-cms-content {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}
.schema-cms-content ol { padding-left: 18px; margin: 0; }
.schema-cms-content li { margin-bottom: var(--space-xs); }
.schema-cms-content code { background: rgba(99,102,241,0.1); padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
.schema-cms-content a { color: #6366f1; }

/* Responsive tweaks */
@media (max-width: 640px) {
  .schema-page-path { max-width: 120px; }
  .schema-manual-row { flex-direction: column; }
  .schema-markup-header { flex-wrap: wrap; }
  .schema-summary-bar { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CONTENT DEPTH ANALYSIS                                            */
/* ═══════════════════════════════════════════════════════════════════ */
.ai-content-depth-section { margin: var(--space-lg) 0; }
.content-depth-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: var(--space-lg);
}
.cd-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.cd-score-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 4px solid var(--cd-score-color, var(--accent));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cd-score-value {
  font-size: var(--text-xl, 1.5rem);
  font-weight: 700;
  color: var(--cd-score-color, var(--accent));
  line-height: 1;
}
.cd-score-label {
  font-size: var(--text-xs, 0.7rem);
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.2;
  margin-top: 2px;
}
.content-depth-stats {
  display: flex; gap: var(--space-md); flex-wrap: wrap; flex: 1;
}
.cd-stat {
  display: flex; flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset, color-mix(in srgb, var(--bg-card) 90%, var(--border)));
  border-radius: var(--radius-md);
}
.cd-stat-value {
  font-size: var(--text-lg, 1.2rem);
  font-weight: 700;
  color: var(--text-primary);
}
.cd-stat-label {
  font-size: var(--text-xs, 0.7rem);
  color: var(--text-tertiary);
  text-align: center;
}
.content-depth-issues-summary {
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
  margin-top: var(--space-md);
}
.cd-issue-chip {
  font-size: var(--text-xs, 0.75rem);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.cd-issue-critical {
  background: color-mix(in srgb, var(--sev-critical, #ef4444) 15%, var(--bg-card));
  color: var(--sev-critical, #ef4444);
}
.cd-issue-warning {
  background: color-mix(in srgb, var(--sev-high, #eab308) 15%, var(--bg-card));
  color: var(--sev-high, #eab308);
}
.cd-all-good {
  margin-top: var(--space-md);
  color: var(--success, #22c55e);
  font-size: var(--text-sm, 0.85rem);
  font-weight: 600;
}
.cd-page-details {
  margin-top: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cd-page-details-summary {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: var(--text-sm, 0.85rem);
  color: var(--text-secondary);
  font-weight: 600;
}
.cd-page-table-wrap { overflow-x: auto; }
.cd-page-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs, 0.75rem);
}
.cd-page-table th {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cd-page-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  vertical-align: top;
}
.cd-page-path {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
}
.cd-issues-cell { display: flex; gap: 4px; flex-wrap: wrap; }
.cd-issue-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sev-critical, #ef4444) 10%, var(--bg-card));
  color: var(--sev-critical, #ef4444);
  white-space: nowrap;
}
.cd-recommendations {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
}
.cd-recs-heading {
  font-size: var(--text-sm, 0.85rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}
.cd-recs-list {
  margin: 0; padding-left: var(--space-md);
  list-style: disc;
}
.cd-recs-list li {
  font-size: var(--text-sm, 0.85rem);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PAGE-LEVEL DASHBOARD                                              */
/* ═══════════════════════════════════════════════════════════════════ */
.page-dashboard-section { margin: var(--space-lg) 0; }
.page-dashboard-controls {
  display: flex; gap: var(--space-sm); align-items: center;
  margin-bottom: var(--space-md); flex-wrap: wrap;
}
.page-search-input {
  flex: 1; min-width: 200px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm, 0.85rem);
}
.page-sort-select {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm, 0.85rem);
}
.page-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
}
.page-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: border-color 0.2s;
}
.page-card:hover { border-color: var(--accent); }
.page-card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-sm);
}
.page-card-url {
  font-size: var(--text-sm, 0.85rem);
  color: var(--accent);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}
.page-card-url:hover { text-decoration: underline; }
.page-health-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-health-dot.green { background: var(--success, #22c55e); }
.page-health-dot.yellow { background: var(--sev-high, #eab308); }
.page-health-dot.red { background: var(--sev-critical, #ef4444); }
.page-metrics-row {
  display: flex; gap: var(--space-sm); flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.page-metric {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
}
.page-metric strong {
  color: var(--text-primary);
  font-weight: 700;
}
.page-keywords-row {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.page-kw-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  color: var(--accent);
  white-space: nowrap;
}
.page-trend-indicator {
  font-size: var(--text-xs, 0.75rem);
  margin-top: var(--space-xs);
}
.page-trend-up { color: var(--success, #22c55e); }
.page-trend-down { color: var(--sev-critical, #ef4444); }
.page-trend-flat { color: var(--text-tertiary); }
.page-card-expand {
  font-size: var(--text-xs, 0.75rem);
  color: var(--accent);
  background: none; border: none; cursor: pointer;
  padding: var(--space-xs) 0;
  margin-top: var(--space-xs);
}
.page-card-expand:hover { text-decoration: underline; }
.page-card-details {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
}
.page-empty-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CLUSTER ENHANCEMENTS (pages, actions, trends)                     */
/* ═══════════════════════════════════════════════════════════════════ */
.cluster-pages {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: var(--space-xs);
  font-size: var(--text-xs, 0.75rem);
}
.cluster-pages-label {
  color: var(--text-tertiary);
  font-weight: 600;
  white-space: nowrap;
}
.cluster-page-link {
  color: var(--accent);
  text-decoration: none;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.cluster-page-link:hover { text-decoration: underline; }
.cluster-actions {
  display: flex; gap: var(--space-xs); margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.cluster-action-btn {
  font-size: var(--text-xs, 0.75rem);
  padding: 4px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.cluster-action-btn:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--bg-card));
}
.cluster-action-secondary {
  border-color: var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
}
.cluster-action-secondary:hover {
  background: color-mix(in srgb, var(--border) 30%, var(--bg-card));
}

/* ═══════════════════════════════════════════════════════════════════ */
/* PROGRESS STRIP (compact orientation bar at top of Action tab)     */
/* ═══════════════════════════════════════════════════════════════════ */
.progress-strip {
  margin-bottom: var(--space-lg);
}
.ps-bar-track {
  height: 6px;
  background: var(--bg-inset);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.ps-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  transition: width 0.5s ease;
  min-width: 2px;
}
.ps-stats {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.ps-stat {
  font-variant-numeric: tabular-nums;
}
.ps-stat strong,
.ps-stat:first-child {
  color: var(--text-secondary);
  font-weight: 700;
}
.ps-label {
  font-weight: 400;
}
.ps-divider {
  color: var(--border);
}
.ps-stat-highlight {
  color: var(--sev-critical, #ef4444);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* AI FEEDBACK HINT (1-line summary above tasks)                     */
/* ═══════════════════════════════════════════════════════════════════ */
.ai-feedback-hint {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.4;
}
.ai-feedback-hint .afh-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.ai-feedback-hint .afh-text {
  flex: 1;
}
.ai-feedback-hint .afh-cta {
  font-size: var(--text-xs, 0.75rem);
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.ai-feedback-hint .afh-cta:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* MISSION CARD — reversibility notice                               */
/* ═══════════════════════════════════════════════════════════════════ */
.mc-reversibility {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* EXTRACTED INLINE STYLES → CSS CLASSES (renderPageCard)            */
/* ═══════════════════════════════════════════════════════════════════ */
.apc-keywords {
  margin-bottom: var(--space-md);
}
.apc-keywords-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 600;
}
.apc-keywords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.apc-keyword-pill {
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: var(--bg-inset);
  border-radius: var(--radius-full, 9999px);
  color: var(--text-secondary);
}
.apc-keyword-detail {
  opacity: 0.7;
}
.apc-keywords-overflow {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.apc-metrics-row {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.apc-page-counter {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.apc-code-wrapper {
  flex: 1;
  position: relative;
}
.apc-code-copy {
  position: absolute;
  top: 4px;
  right: 4px;
}
.apc-insight-fallback {
  padding: var(--space-md);
}
.apc-insight-why {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}
.apc-insight-empty {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
}
.apc-insight-empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}
.apc-insight-empty-text {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* COMPLETION MODAL                                                  */
/* ═══════════════════════════════════════════════════════════════════ */

/* CTR BENCHMARK BAR */
.apc-metric { white-space: nowrap; }
.apc-metric strong { font-weight: 600; color: var(--text-primary); margin-right: 2px; }
.apc-ctr-bench { background: var(--bg-inset); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.apc-bench-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-xs); }
.apc-bench-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.apc-bench-impact { font-size: var(--text-xs); color: var(--sev-critical); font-weight: 600; }
.apc-bench-bar-track { position: relative; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: var(--space-xs); }
.apc-bench-bar-expected { position: absolute; top: 0; left: 0; height: 100%; background: var(--text-tertiary); border-radius: 4px; opacity: 0.3; }
.apc-bench-bar-actual { position: absolute; top: 0; left: 0; height: 100%; background: var(--sev-critical); border-radius: 4px; }
.apc-bench-legend { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-tertiary); }
.apc-bench-you { color: var(--sev-critical); font-weight: 600; }
.apc-bench-avg { color: var(--text-tertiary); }

/* SERP PREVIEW */
.apc-serp-preview { margin-bottom: var(--space-lg); }
.apc-serp-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-xs); }
.apc-serp-result { background: #fff; border: 1px solid #dadce0; border-radius: 8px; padding: var(--space-md); font-family: Arial, sans-serif; }
[data-theme="dark"] .apc-serp-result { background: #202124; border-color: #3c4043; }
.apc-serp-breadcrumb { font-size: 12px; color: #202124; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .apc-serp-breadcrumb { color: #bdc1c6; }
.apc-serp-title { font-size: 18px; color: #1a0dab; line-height: 1.3; margin-bottom: 4px; cursor: pointer; }
[data-theme="dark"] .apc-serp-title { color: #8ab4f8; }
.apc-serp-title:hover { text-decoration: underline; }
.apc-serp-desc { font-size: 13px; color: #4d5156; line-height: 1.4; }
[data-theme="dark"] .apc-serp-desc { color: #bdc1c6; }
.apc-serp-missing { font-style: italic; color: #ea4335; }
[data-theme="dark"] .apc-serp-missing { color: #f28b82; }
.apc-serp-note { font-size: var(--text-xs); color: var(--warning, #f59e0b); margin-top: var(--space-xs); }

/* MISSION CARD — Affected pages + projected clicks */
.mc-affected-pages { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--border); }
.mc-pages-label { font-size: var(--text-xs); color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 4px; }
.mc-pages-list { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-page-pill { font-size: 11px; padding: 2px 8px; background: var(--bg-inset); border-radius: 9999px; color: var(--text-secondary); font-family: var(--font-mono); white-space: nowrap; cursor: pointer; }
.mc-page-pill small { opacity: 0.7; font-family: var(--font-sans, inherit); }
.mc-projected { font-size: var(--text-xs); color: var(--success, #10b981); font-weight: 600; margin-top: var(--space-xs); }
.mc-projected-icon { margin-right: 2px; }

.completion-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.completion-modal-visible {
  opacity: 1;
}
.completion-modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 25px 80px rgba(0,0,0,0.35);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
}
.completion-modal-visible .completion-modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.completion-header { margin-bottom: var(--space-lg); }
.completion-icon-ring {
  width: 64px; height: 64px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: completionPulse 2s ease-in-out infinite;
}
.completion-icon-check {
  font-size: 1.8rem;
  color: #fff;
  font-weight: 700;
}
@keyframes completionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(16,185,129,0); }
}
.completion-header h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.completion-subtitle {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.completion-body {
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.completion-body p { margin: 0 0 var(--space-xs) 0; }
.completion-meta { color: var(--text-tertiary); font-size: var(--text-xs, 0.75rem); margin-top: var(--space-md); }
.completion-projected {
  background: color-mix(in srgb, var(--accent, #3b82f6) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 15%, var(--border));
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.completion-projected-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.completion-projected-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.completion-metric { color: var(--accent, #3b82f6); }
.completion-direction { color: #10b981; font-weight: 700; }
.completion-confidence { color: var(--text-tertiary); font-weight: 400; font-size: var(--text-xs, 0.75rem); }

/* Timeline steps */
.completion-timeline {
  margin: var(--space-md) 0;
  padding: var(--space-sm) 0;
}
.completion-timeline-title {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}
.completion-timeline-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.completion-timeline-steps::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--border);
}
.completion-step {
  position: relative;
  text-align: center;
  flex: 1;
}
.completion-step-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  margin: 0 auto var(--space-xs);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}
.completion-step-active .completion-step-dot {
  background: #10b981;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.2);
}
.completion-step-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-primary);
}
.completion-step-desc {
  font-size: 0.65rem;
  color: var(--text-tertiary);
}

/* Streak badge */
.completion-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: color-mix(in srgb, #f59e0b 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border));
  border-radius: 999px;
  padding: 4px 12px;
  margin: var(--space-sm) 0;
}
.completion-streak-emoji { font-size: 1rem; }
.completion-streak-text { font-size: var(--text-xs, 0.75rem); font-weight: 600; color: var(--text-primary); }

.completion-continue-btn {
  min-width: 120px;
  transition: transform 0.15s ease;
}
.completion-continue-btn:hover { transform: scale(1.03); }

.completion-actions {
  display: flex;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* OUTCOME CARD (projected impact in action flow)                    */
/* ═══════════════════════════════════════════════════════════════════ */
.action-outcome-preview {
  margin-bottom: var(--space-lg);
}
.outcome-card {
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.outcome-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.outcome-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.outcome-icon { font-size: 1.2rem; }
.outcome-content {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.outcome-metric {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.outcome-description {
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* STATUS BADGES (full-list rows + mission cards)                    */
/* ═══════════════════════════════════════════════════════════════════ */
.fl-row[data-status="completed"] {
  opacity: 0.5;
  border-left: 3px solid var(--success);
}
.fl-row[data-status="completed"] .fl-start button {
  background: var(--success);
  pointer-events: none;
}
.fl-row[data-status="acted"],
.fl-row[data-status="in-progress"] {
  border-left: 3px solid var(--accent);
}
.fl-status-badge {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full, 9999px);
  white-space: nowrap;
}
.fl-status-badge.status-completed {
  background: color-mix(in srgb, var(--success) 15%, var(--bg-card));
  color: var(--success);
}
.fl-status-badge.status-acted {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-card));
  color: var(--accent);
}
.mission-card[data-status="completed"] {
  opacity: 0.55;
  border-left-color: var(--success) !important;
}
.mission-card[data-status="completed"] .mc-start {
  background: var(--success);
  pointer-events: none;
}
.mission-card[data-status="completed"] .mc-start::after {
  content: ' ✓';
}
.mission-card[data-status="acted"] {
  border-left-color: var(--accent) !important;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* FILTER EMPTY STATE                                                */
/* ═══════════════════════════════════════════════════════════════════ */
.fl-empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* DEFINITION OF DONE (whatDoneLooksLike)                             */
/* ═══════════════════════════════════════════════════════════════════ */
.mc-done-looks-like {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--success) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--success) 20%, var(--border));
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}
.mc-done-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.mc-done-text { flex: 1; }
.outcome-done-looks-like {
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--success) 8%, var(--bg-card));
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}
.outcome-done-label {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--success);
  margin-bottom: 4px;
}
.outcome-done-looks-like p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* IMPACT AGGREGATION STRIP                                          */
/* ═══════════════════════════════════════════════════════════════════ */
.impact-aggregation {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
}
.ia-header { margin-bottom: var(--space-sm); }
.ia-stats {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.ia-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.ia-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
}
.ia-stat-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ADVANCED FILTERS (search + dropdowns)                             */
/* ═══════════════════════════════════════════════════════════════════ */
.advanced-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.af-search {
  flex: 1;
  min-width: 180px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}
.af-search:focus {
  border-color: var(--accent);
}
.af-search::placeholder {
  color: var(--text-tertiary);
}
.af-select {
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}
.af-select:focus { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════ */
/* IMPACT COLUMN SEVERITY COLORS                                     */
/* ═══════════════════════════════════════════════════════════════════ */
.fl-impact-critical { color: var(--sev-critical); font-weight: 700; }
.fl-impact-high { color: var(--sev-high); font-weight: 600; }
.fl-impact-medium { color: var(--sev-medium-text); font-weight: 500; }
.fl-impact-low { color: var(--success); }

/* ═══════════════════════════════════════════════════════════════════ */
/* AI LEARNING TRANSPARENCY + CATEGORY EFFECTIVENESS                 */
/* ═══════════════════════════════════════════════════════════════════ */
.ai-learning-section {
  margin-top: var(--space-lg);
}
.al-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.al-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.al-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.al-icon { font-size: 1.2rem; }
.al-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.al-top-insight {
  margin: 0 0 var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-style: italic;
}
.al-stat-row {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.al-stat {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.al-stat strong {
  color: var(--text-primary);
  font-size: 1.1rem;
}
.al-calibration {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
}
.al-cal-label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.al-cal-warn {
  display: block;
  color: var(--sev-high);
  font-size: var(--text-sm);
}
.al-cal-good {
  display: block;
  color: var(--success);
  font-size: var(--text-sm);
}
.al-adapt-notice {
  margin-top: var(--space-md);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── Category Effectiveness Bars ── */
.ce-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.ce-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px 50px;
  gap: var(--space-sm);
  align-items: center;
}
.ce-cat {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ce-bar-track {
  height: 8px;
  background: var(--bg-inset);
  border-radius: 4px;
  overflow: hidden;
}
.ce-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.ce-pct {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
}
.ce-n {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  text-align: right;
}

/* ── Impact Result Narratives ── */
.ir-section {
  margin-bottom: var(--space-md);
}
.ir-section:last-child { margin-bottom: 0; }
.ir-label {
  display: block;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-xs);
}
.ir-wins-label { color: var(--success); }
.ir-fail-label { color: var(--sev-high); }
.ir-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  font-size: var(--text-sm);
}
.ir-win {
  background: color-mix(in srgb, var(--success) 6%, var(--bg-card));
}
.ir-fail {
  background: color-mix(in srgb, var(--sev-high) 6%, var(--bg-card));
}
.ir-narrative { flex: 1; color: var(--text-secondary); }
.ir-date {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  margin-left: var(--space-sm);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ALERT DIAGNOSIS EXPANSION                                         */
/* ═══════════════════════════════════════════════════════════════════ */
.alert-diagnosis {
  margin-top: var(--space-xs);
}
.alert-diagnosis-toggle {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: inherit;
  opacity: 0.9;
}
.alert-diagnosis-toggle:hover { opacity: 1; }
.alert-diagnosis-list {
  margin: var(--space-xs) 0 0 var(--space-md);
  padding: 0;
  list-style: disc;
  font-size: var(--text-sm);
  line-height: 1.5;
  opacity: 0.9;
}
.alert-diagnosis-list li {
  margin-bottom: 2px;
}

/* ── Responsive: mobile ── */
@media (max-width: 768px) {
  .ia-stats { gap: var(--space-md); }
  .ia-stat { min-width: 60px; }
  .ia-stat-value { font-size: 1.2rem; }
  .advanced-filters { flex-direction: column; }
  .af-search { min-width: 100%; }
  .ce-row { grid-template-columns: 100px 1fr 40px 40px; }
  .al-stat-row { flex-direction: column; gap: var(--space-xs); }
}

/* ════════════════════════════════════════════════════════════════ */
/* TRAFFIC SOURCES DETAIL PANEL                                    */
/* ════════════════════════════════════════════════════════════════ */

.traffic-sources-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin-top: var(--space-md);
}
.traffic-sources-detail[open] {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 6%, transparent);
}
.traffic-sources-summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg);
  list-style: none;
}
.traffic-sources-summary::-webkit-details-marker { display: none; }
.traffic-sources-summary::marker { display: none; content: ''; }
.traffic-sources-toggle-icon {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 0.85em;
  color: var(--fg-muted);
}
.traffic-sources-detail[open] .traffic-sources-toggle-icon {
  transform: rotate(90deg);
}
.traffic-sources-content {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--border);
  animation: revealSlide 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ── Traffic Badges ── */
.traffic-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.traffic-badge-bot {
  background: color-mix(in srgb, var(--severity-watch) 15%, transparent);
  color: var(--severity-watch);
}
.traffic-badge-ai {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.traffic-badge-error {
  background: color-mix(in srgb, var(--severity-alert) 15%, transparent);
  color: var(--severity-alert);
}

/* ── Source Breakdown Bar ── */
.ts-bar-section {
  margin-bottom: var(--space-sm);
}
.ts-bar-section h4 {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
}
.ts-bar-container {
  display: flex;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-inset);
}
.ts-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  transition: flex-basis 0.4s ease;
}
.ts-bar-organic { background: var(--severity-good, #22c55e); }
.ts-bar-direct  { background: var(--accent, #6366f1); }
.ts-bar-bot     { background: var(--severity-watch, #f59e0b); }
.ts-bar-other   { background: var(--fg-muted, #94a3b8); }
.ts-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs);
  font-size: 0.72rem;
  color: var(--fg-muted);
}
.ts-bar-label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ts-bar-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── Referrer Categories Grid ── */
.ts-cat-section h4 {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
}
.ts-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
}
.ts-cat-card {
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
}
.ts-cat-icon {
  font-size: 1.2rem;
  margin-bottom: 2px;
}
.ts-cat-label {
  font-size: 0.72rem;
  color: var(--fg-muted);
  text-transform: capitalize;
}
.ts-cat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
}

/* ── AI Crawler List ── */
.ts-ai-section {
  padding: var(--space-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-inset));
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}
.ts-ai-section h4 {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}
.ts-ai-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.ts-ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Top Referrers List ── */
.ts-ref-section h4 {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
}
.ts-ref-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ts-ref-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--fg);
}
.ts-ref-item:nth-child(odd) {
  background: color-mix(in srgb, var(--bg-inset) 60%, transparent);
}
.ts-ref-domain {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-ref-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}
.ts-ref-cat {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-inset);
  color: var(--fg-muted);
  text-transform: capitalize;
}

/* ── HTTP Error Alerts ── */
.ts-error-section {
  padding: var(--space-md);
  background: color-mix(in srgb, var(--severity-alert) 5%, var(--bg-inset));
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--severity-alert) 15%, transparent);
}
.ts-error-section h4 {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--severity-alert);
}
.ts-error-bar {
  display: flex;
  gap: var(--space-md);
}
.ts-error-stat {
  text-align: center;
}
.ts-error-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fg);
}
.ts-error-stat-label {
  font-size: 0.72rem;
  color: var(--fg-muted);
}

/* ── Traffic Sources Responsive ── */
@media (max-width: 768px) {
  .traffic-sources-content { padding: 0 var(--space-md) var(--space-md); }
  .ts-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-error-bar { flex-direction: column; gap: var(--space-sm); }
}

/* ═══════════════════════════════════════════════════════════════
   Platform Analytics Card — Firebase/GA4, Vercel, Netlify
   ═══════════════════════════════════════════════════════════════ */

/* ── KPI Strip ── */
.platform-kpi-strip {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.platform-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.platform-kpi-icon { font-size: 1.1rem; margin-bottom: 2px; }
.platform-kpi-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.platform-kpi-label {
  font-size: 0.7rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── AI Agent Insight ── */
.platform-ai-insight {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-inset));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-md);
}
.platform-ai-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.platform-ai-badge {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
}
.platform-ai-total {
  font-size: 0.82rem;
  color: var(--fg-muted);
}
.platform-ai-explanation {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-sm);
}
.ai-source-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-sm);
}
.ai-source-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.ai-source-row:nth-child(odd) {
  background: color-mix(in srgb, var(--bg-inset) 70%, transparent);
}
.ai-source-name { font-weight: 500; color: var(--fg); }
.ai-source-count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}

/* ── Source Breakdown Bars ── */
.platform-source-breakdown {
  margin-bottom: var(--space-lg);
}
.platform-source-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: var(--space-sm);
}
.platform-source-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.source-bar-item {
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8rem;
}
.source-bar-label { color: var(--fg-muted); font-weight: 500; }
.source-bar-track {
  height: 8px;
  background: var(--bg-inset);
  border-radius: 4px;
  overflow: hidden;
}
.source-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.source-bar-organic { background: var(--severity-ok, #3ecf8e); }
.source-bar-direct { background: var(--accent, #6366f1); }
.source-bar-ai { background: #a855f7; }
.source-bar-social { background: #f59e0b; }
.source-bar-referral { background: #06b6d4; }
.source-bar-paid { background: #ef4444; }
.source-bar-pct {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  font-size: 0.78rem;
}

/* ── Vercel Web Vitals ── */
.platform-vitals {
  margin-bottom: var(--space-lg);
}
.platform-vitals-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: var(--space-sm);
}
.platform-vitals-grid {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.pv-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  min-width: 70px;
}
.pv-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pv-label {
  font-size: 0.7rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Platform Analytics Responsive ── */
@media (max-width: 768px) {
  .platform-kpi-strip { gap: var(--space-sm); }
  .platform-kpi { min-width: 70px; padding: var(--space-xs) var(--space-sm); }
  .platform-kpi-num { font-size: 1.1rem; }
  .source-bar-item { grid-template-columns: 70px 1fr 36px; }
  .platform-vitals-grid { gap: var(--space-sm); }
  .pv-metric { min-width: 60px; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* MULTI-SOURCE COMPARISON CARD                                  */
/* ═══════════════════════════════════════════════════════════════ */

.multi-source-compare {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.msc-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.msc-icon { font-size: 1.1rem; }
.msc-title { font-weight: 700; font-size: var(--text-sm); }
.msc-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-bg);
  color: var(--accent);
  letter-spacing: 0.3px;
}
.msc-bars { display: flex; flex-direction: column; gap: var(--space-sm); }
.msc-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--space-sm);
  align-items: center;
}
.msc-source {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.msc-source-icon { font-size: 0.9rem; }
.msc-bar-wrap {
  height: 20px;
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.msc-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 4px;
  transition: width 0.5s ease;
  opacity: 0.85;
}
.msc-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 70px;
}
.msc-primary {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.msc-label {
  font-size: 10px;
  color: var(--text-tertiary);
}
.msc-narrative {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.msc-narrative strong { color: var(--text-primary); font-weight: 700; }

@media (max-width: 640px) {
  .msc-row { grid-template-columns: 80px 1fr auto; }
  .msc-source-name { font-size: 10px; }
  .msc-values { min-width: 55px; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* INSIGHT ROW — base layout + confidence badges                      */
/* ═══════════════════════════════════════════════════════════════════ */

.insight-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  transition: background 0.15s;
}
.insight-row:hover { background: color-mix(in srgb, var(--border) 30%, transparent); }
.insight-row.critical { border-left: 3px solid var(--sev-critical, #ef4444); }
.insight-row.high    { border-left: 3px solid var(--sev-high, #f97316); }
.insight-row.medium  { border-left: 3px solid var(--sev-medium, #eab308); }
.insight-row.low     { border-left: 3px solid var(--sev-low, #22c55e); }
.insight-row.info    { border-left: 3px solid var(--border); }

.ir-icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.4;
}
.ir-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ir-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--leading-snug);
}
.ir-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.ir-impact {
  font-size: var(--text-xs);
  color: var(--success, #22c55e);
  font-weight: 600;
}
.ir-agent {
  flex-shrink: 0;
  font-size: 0.875rem;
  opacity: 0.7;
  margin-left: var(--space-xs);
}

/* Confidence hint badges */
.ir-confidence {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}
.ir-conf-low {
  background: color-mix(in srgb, var(--sev-high, #f97316) 10%, transparent);
  color: var(--sev-high, #f97316);
  border: 1px solid color-mix(in srgb, var(--sev-high, #f97316) 25%, transparent);
}
.ir-conf-medium {
  background: color-mix(in srgb, var(--sev-medium, #eab308) 10%, transparent);
  color: color-mix(in srgb, var(--sev-medium, #eab308) 80%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--sev-medium, #eab308) 25%, transparent);
}

/* ── Action Contract Form ──────────────────────────────────────────────── */
.action-contract-form {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 12px 0 16px;
}
.acf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.acf-header h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.acf-icon { font-size: 1rem; }
.acf-optional {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}
.acf-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.acf-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.acf-field-full { grid-column: 1 / -1; }
.acf-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.acf-input, .acf-select {
  width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
  color-scheme: light;
  font-size: 0.82rem;
  padding: 6px 10px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
[data-theme="dark"] .acf-input,
[data-theme="dark"] .acf-select {
  color-scheme: dark;
}
.acf-input::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}
.acf-select option {
  background: var(--surface-1);
  color: var(--text-primary);
}
.acf-input:focus, .acf-select:focus {
  outline: none;
  border-color: var(--accent, #6366f1);
}
.acf-input-narrow { max-width: 120px; }
.acf-note {
  font-size: 0.78rem;
  color: var(--sev-low, #22c55e);
  margin: 8px 0 0;
}

/* ── In-progress hypothesis badge ─────────────────────────────────────── */
.mi-hypothesis {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}
.mi-due {
  color: var(--sev-medium, #eab308);
  font-style: normal;
  font-weight: 600;
}

/* ── Contract outcome badges ───────────────────────────────────────────── */
.ir-contract-badge {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin: 4px 0;
}
.outcome-positive {
  background: color-mix(in srgb, #22c55e 12%, transparent);
  color: #22c55e;
  border: 1px solid color-mix(in srgb, #22c55e 30%, transparent);
}
.outcome-neutral {
  background: color-mix(in srgb, #eab308 12%, transparent);
  color: #eab308;
  border: 1px solid color-mix(in srgb, #eab308 30%, transparent);
}
.outcome-negative {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #ef4444;
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

/* ── Impact Proof Cards & Before/After Visualization ───────────── */
.impact-summary-strip {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-2, var(--bg-card));
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.impact-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}
.impact-stat-number {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.impact-stat--positive .impact-stat-number { color: var(--success, #22c55e); }
.impact-stat--clicks .impact-stat-number { color: var(--accent); }
.impact-stat-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
}
.proof-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.proof-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-md);
  transition: border-color 0.15s ease;
}
.proof-card--win {
  border-left: 3px solid var(--success, #22c55e);
}
.proof-card--agent {
  border-left: 3px solid var(--accent);
}
.proof-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xs);
}
.proof-card-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.proof-card-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}
.proof-card-narrative {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm);
  line-height: var(--leading-normal);
}
/* Timeline: action → window → result */
.proof-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin: var(--space-xs) 0 var(--space-sm);
  padding: 0 var(--space-sm);
}
.proof-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.proof-timeline-dot--action { background: var(--accent); }
.proof-timeline-dot--result { background: var(--text-tertiary); }
.proof-timeline-dot--positive { background: var(--success, #22c55e); }
.proof-timeline-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 20px;
}
.proof-timeline-window {
  padding: 1px 8px;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  background: var(--surface-2, var(--bg-body));
  border-radius: 10px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
/* Before/after metric bars */
.proof-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.proof-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.proof-metric-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-secondary);
}
.proof-bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.proof-bar-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.proof-bar-label {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  min-width: 38px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.proof-bar-track {
  flex: 1;
  height: 8px;
  background: color-mix(in srgb, var(--border) 40%, transparent);
  border-radius: 4px;
  overflow: hidden;
}
.proof-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.proof-bar--before {
  background: var(--text-tertiary);
}
.proof-bar--after {
  background: var(--accent);
}
.proof-bar--improved {
  background: var(--success, #22c55e);
}
.proof-bar-value {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-primary);
  min-width: 50px;
  white-space: nowrap;
}
.proof-bar-value .text-success { color: var(--success, #22c55e); }
.proof-bar-value .text-muted { color: var(--text-tertiary); }
.proof-recommendation {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
}
.proof-apply-hint {
  font-size: var(--text-xs, 0.75rem);
  color: var(--accent);
  margin-top: var(--space-xs);
}

/* ── Explore: sticky section nav ─────────────────────────────────── */
.explore-section-nav--sticky {
  position: sticky;
  top: 52px;
  z-index: 50;
  background: var(--bg-body);
  padding: var(--space-xs) var(--space-md);
  margin: 0 calc(-1 * var(--space-md));
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-color, #000) 6%, transparent);
}

/* ── Page Detail Panel ────────────────────────────────────────────── */
.page-detail-panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}
.pdp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
}
.pdp-content {
  position: relative;
  width: min(520px, 90vw);
  height: 100%;
  background: var(--bg-body, #fff);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pdp-slide-in 0.2s ease;
}
@keyframes pdp-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.pdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pdp-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  flex: 1;
}
.pdp-page-url {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-ext {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--accent);
  text-decoration: none;
}
.pdp-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px 8px;
  line-height: 1;
}
.pdp-close:hover { color: var(--text-primary); }
.pdp-health-strip {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  background: var(--surface-2, var(--bg-card));
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.pdp-health-badge {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
}
.pdp-health-green {
  background: color-mix(in srgb, #22c55e 12%, transparent);
  color: #22c55e;
}
.pdp-health-yellow {
  background: color-mix(in srgb, #eab308 12%, transparent);
  color: #eab308;
}
.pdp-health-red {
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #ef4444;
}
.pdp-health-stat {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
}
.pdp-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}
.pdp-section { margin-bottom: var(--space-lg); }
.pdp-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}
.pdp-empty {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.pdp-insight {
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border);
  background: var(--bg-card);
}
.pdp-insight.sev-critical { border-left-color: var(--sev-critical, #ef4444); }
.pdp-insight.sev-high { border-left-color: var(--sev-high, #f97316); }
.pdp-insight.sev-medium { border-left-color: var(--sev-medium, #eab308); }
.pdp-insight.sev-low { border-left-color: var(--sev-low, #22c55e); }
.pdp-insight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 4px;
}
.pdp-insight-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}
.pdp-insight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.pdp-cat {
  text-transform: capitalize;
}
.pdp-insight-why {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  margin: 4px 0;
  line-height: var(--leading-normal);
}
.pdp-steps {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  margin: 4px 0 0;
  padding-left: 1.2em;
  line-height: var(--leading-relaxed, 1.6);
}
.pdp-insight-actions {
  margin-top: var(--space-xs);
}
.pdp-agent-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
}
.pdp-kw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ── AI View: guided workflow step dividers ──────────────────────── */
.ai-workflow-step {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  margin: var(--space-lg) 0 var(--space-sm);
}
.ai-workflow-step::before,
.ai-workflow-step::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.ai-workflow-step-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ── Action tab: primary task hero card ──────────────────────────── */
.mission-card-primary {
  border: 2px solid var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
  box-shadow: var(--shadow-md);
  position: relative;
  padding-top: calc(var(--space-lg) + 12px);
}
.mission-card-primary::before {
  content: 'Top Priority';
  position: absolute;
  top: -11px;
  left: var(--space-md);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
}

/* ── AI capabilities collapse control ───────────────────────────── */
.ai-caps-details {
  margin-top: var(--space-sm);
}
.ai-caps-summary {
  font-size: var(--text-xs);
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  padding: var(--space-xs) 0;
  user-select: none;
}
.ai-caps-summary::-webkit-details-marker { display: none; }
.ai-caps-summary::marker { display: none; }

/* ══════════════════════════════════════════════════════════
   GROWTH VIEW
══════════════════════════════════════════════════════════ */
.view-growth {
  padding: var(--view-shell-y) var(--view-shell-gutter) calc(var(--view-shell-y) * 2);
}

/* ── Header row ───────────────────────────────────────────── */
.gr-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.gr-main-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 .2rem;
}
.gr-main-subtitle {
  font-size: .85rem;
  color: var(--text-secondary);
  margin: 0;
}
.gr-header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.gr-last-generated {
  font-size: .75rem;
  color: var(--text-secondary);
}
.gr-generate-btn {
  font-size: .82rem;
  padding: .4rem .9rem;
}

/* ── Loading state ────────────────────────────────────────── */
.gr-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-size: .85rem;
}
.gr-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: gr-spin .7s linear infinite;
}
@keyframes gr-spin { to { transform: rotate(360deg); } }

/* ── Data warning ─────────────────────────────────────────── */
.gr-data-warning {
  background: rgba(255, 177, 66, .12);
  border: 1px solid rgba(255, 177, 66, .3);
  border-radius: 8px;
  padding: .65rem .9rem;
  font-size: .82rem;
  color: #e8a030;
  margin-bottom: 1rem;
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* ── Data-lag confidence strip ─────────────────────────────── */
.gr-data-lag-strip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: .5rem .9rem;
  background: rgba(255, 177, 66, .10);
  border: 1px solid rgba(255, 177, 66, .25);
  border-radius: 8px;
  font-size: .82rem;
  color: #b87a00;
  margin-bottom: 1rem;
}
.gr-dls-text { flex: 1; }
.gr-dls-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .78rem;
  color: #b87a00;
  padding: 0;
  text-decoration: underline;
  white-space: nowrap;
}

/* ── Baseline card ────────────────────────────────────────── */
.gr-baseline-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.gr-baseline-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.gr-baseline-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.gr-baseline-note {
  font-size: .75rem;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: 4px;
  padding: .15rem .45rem;
}
.gr-baseline-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.gr-baseline-stat {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.gr-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}
.gr-stat-label {
  font-size: .72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gr-trend-up  { color: var(--success, #22c55e); }
.gr-trend-down { color: var(--danger, #ef4444); }

/* ── Paths section ────────────────────────────────────────── */
.gr-paths-section {
  margin-bottom: 1.5rem;
}
.gr-paths-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 .25rem;
}
.gr-paths-subtitle {
  font-size: .8rem;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

/* ── Path card ────────────────────────────────────────────── */
.gr-path-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: .85rem;
  transition: border-color .15s;
}
.gr-path-card:hover {
  border-color: var(--accent);
}
.gr-path-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .65rem;
  flex-wrap: wrap;
}
.gr-path-badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  padding: .15rem .45rem;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: .15rem;
}
.gr-path-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
  align-self: flex-start;
  margin-top: .05rem;
}
.gr-path-meta {
  flex: 1;
  min-width: 0;
}
.gr-path-label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 .15rem;
}
.gr-path-headline {
  font-size: .8rem;
  color: var(--text-secondary);
  margin: 0;
}
.gr-path-tags {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-self: flex-start;
  margin-top: .1rem;
}
.gr-path-description {
  font-size: .82rem;
  color: var(--text-secondary);
  margin: 0 0 .85rem;
  line-height: 1.5;
}

/* Effort badges */
.gr-effort-badge {
  font-size: .68rem;
  font-weight: 600;
  border-radius: 4px;
  padding: .1rem .4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gr-effort-low    { background: rgba(34,197,94,.15);  color: #16a34a; }
.gr-effort-medium { background: rgba(234,179,8,.15);  color: #ca8a04; }
.gr-effort-high   { background: rgba(239,68,68,.15);  color: #dc2626; }
.gr-time-badge {
  font-size: .68rem;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-radius: 4px;
  padding: .1rem .4rem;
}

/* ── Uplift row ───────────────────────────────────────────── */
.gr-path-uplift-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: .65rem;
}
.gr-uplift-stat {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.gr-uplift-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--success, #22c55e);
}
.gr-clicks-value { color: var(--accent); }
.gr-uplift-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.gr-signal-summary {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
}
.gr-conf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.gr-conf-high   { background: var(--success, #22c55e); }
.gr-conf-medium { background: #f59e0b; }
.gr-conf-low    { background: var(--text-secondary); }
.gr-conf-label {
  font-size: .72rem;
  color: var(--text-secondary);
}
.gr-signal-count {
  font-size: .72rem;
  color: var(--text-secondary);
  margin-left: .2rem;
}

/* ── Signal table toggle ──────────────────────────────────── */
.gr-toggle-signals {
  font-size: .75rem;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .2rem .55rem;
  cursor: pointer;
  margin-bottom: .5rem;
}
.gr-toggle-signals:hover { background: var(--bg-hover); color: var(--text-primary); }
.gr-signal-table-wrap {
  overflow-x: auto;
  margin-top: .25rem;
}
.gr-signal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.gr-signal-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gr-signal-table td {
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.gr-signal-table tr:last-child td { border-bottom: none; }
.gr-query-cell {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-ctr-actual  { color: var(--danger, #ef4444); }
.gr-ctr-expected { color: var(--success, #22c55e); }
.gr-target-pos  { color: var(--accent); font-weight: 600; }
.gr-uplift-cell { color: var(--success, #22c55e); font-weight: 600; }
.gr-action-type { color: var(--accent); font-size: .72rem; }

/* ── Combined best-case card ─────────────────────────────── */
.gr-combined-card {
  background: linear-gradient(135deg, var(--bg-card), rgba(99,102,241,.06));
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: .5rem;
}
.gr-combined-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.gr-combined-header h3 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.gr-combined-note {
  font-size: .72rem;
  color: var(--text-secondary);
}
.gr-combined-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.gr-combined-value {
  color: var(--accent) !important;
}

/* ── Empty state ──────────────────────────────────────────── */
.gr-empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
}
.gr-empty-icon {
  font-size: 2.5rem;
  margin-bottom: .75rem;
  opacity: .4;
}
.gr-empty-state h3 {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 .4rem;
}
.gr-empty-state p {
  font-size: .82rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

/* ── History sparkline ────────────────────────────────────── */
.gr-history-section {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.gr-history-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 .65rem;
}
.gr-sparkline-wrap {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.gr-sparkline { width: 100%; height: 50px; }
.gr-sparkline-up   polyline { stroke: var(--success, #22c55e); }
.gr-sparkline-down polyline { stroke: var(--danger, #ef4444); }
.gr-sparkline-labels {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--text-secondary);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .view-growth { padding: .85rem .75rem 2.5rem; }
  .gr-header-row { flex-direction: column; gap: .5rem; }
  .gr-baseline-stats { gap: 1rem; }
  .gr-path-header { gap: .5rem; }
  .gr-path-card { padding: .85rem 1rem; }
  .gr-signal-summary { margin-left: 0; }
}