/* ================================================================
   VISUAL POLISH LAYER — Phase 1 Overhaul
   Adds depth, motion, brand personality, and premium feel
   on top of existing app.css without breaking anything.
   ================================================================ */

/* ===== ENHANCED DESIGN TOKENS ===== */
:root, [data-theme="light"] {
  /* Upgraded shadow system — layered, more realistic */
  --shadow-xs: 0 1px 2px rgba(26, 43, 66, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 43, 66, 0.06), 0 1px 2px rgba(26, 43, 66, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(26, 43, 66, 0.07), 0 2px 4px -1px rgba(26, 43, 66, 0.04);
  --shadow-lg: 0 10px 25px -3px rgba(26, 43, 66, 0.08), 0 4px 10px -2px rgba(26, 43, 66, 0.04);
  --shadow-xl: 0 20px 40px -5px rgba(26, 43, 66, 0.10), 0 8px 16px -4px rgba(26, 43, 66, 0.04);
  --shadow-card-hover: 0 8px 24px -4px rgba(26, 43, 66, 0.12), 0 2px 8px -2px rgba(26, 43, 66, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(26, 43, 66, 0.06);

  /* Glass & gradient tokens */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.6);
  --gradient-primary: linear-gradient(135deg, #2c4a7c 0%, #3a6098 100%);
  --gradient-primary-soft: linear-gradient(135deg, #edf2f8 0%, #dce5f2 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  --gradient-welcome: linear-gradient(135deg, #2c4a7c 0%, #1e3a5f 50%, #2c4a7c 100%);

  /* KPI-specific accent colors */
  --kpi-blue: #2c4a7c;
  --kpi-blue-bg: #edf2f8;
  --kpi-green: #3d8a5e;
  --kpi-green-bg: #e8f5ee;
  --kpi-amber: #a07828;
  --kpi-amber-bg: #faf3e0;
  --kpi-red: #b84444;
  --kpi-red-bg: #fdf0f0;
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.3), 0 4px 10px -2px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 8px 24px -4px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.2);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.2);

  --glass-bg: rgba(22, 26, 34, 0.8);
  --glass-border: rgba(46, 52, 68, 0.5);
  --gradient-primary: linear-gradient(135deg, #6b9fd4 0%, #5a8ec4 100%);
  --gradient-primary-soft: linear-gradient(135deg, #172130 0%, #1e2a3c 100%);
  --gradient-surface: linear-gradient(180deg, #161a22 0%, #131720 100%);
  --gradient-welcome: linear-gradient(135deg, #1a2d4a 0%, #0f1a2d 50%, #1a2d4a 100%);

  --kpi-blue: #6b9fd4;
  --kpi-blue-bg: #172130;
  --kpi-green: #5aaa78;
  --kpi-green-bg: #1a2e22;
  --kpi-amber: #c8a04a;
  --kpi-amber-bg: #2e2818;
  --kpi-red: #d06060;
  --kpi-red-bg: #2e1a1e;
}


/* ===== GLOBAL TRANSITIONS ===== */
* { transition-property: background-color, color, border-color, box-shadow, opacity, transform; transition-duration: 0ms; }
a, button, .nav-item, .card, .kpi-card, .btn, .icon-btn, .chat-suggestion-btn,
.tool-card, .doc-row, .policy-row, .action-row, .alert-row, .family-card,
.badge, .chat-mode-pill, .nav-group-label {
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ===== SIDEBAR POLISH ===== */
.sidebar {
  background: var(--gradient-surface);
  border-right: 1px solid var(--color-divider);
  box-shadow: 1px 0 8px rgba(26, 43, 66, 0.03);
}

[data-theme="dark"] .sidebar {
  box-shadow: 1px 0 12px rgba(0, 0, 0, 0.15);
}

/* Logo enhancement */
.logo svg {
  filter: drop-shadow(0 1px 2px rgba(44, 74, 124, 0.2));
}

.logo-text {
  letter-spacing: -0.01em;
}

/* Nav group labels — refined */
.nav-group-label {
  letter-spacing: 0.06em;
  position: relative;
}

/* Nav items — better hover and active states */
.nav-item {
  border-radius: var(--radius-lg);
  padding: 8px var(--space-3);
  position: relative;
}

.nav-item:hover {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  transform: translateX(2px);
}

.nav-item.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.nav-item.active i {
  color: var(--color-text-inverse);
}

[data-theme="dark"] .nav-item.active {
  background: var(--color-primary);
  color: #ffffff;
}

[data-theme="dark"] .nav-item.active i {
  color: #ffffff;
}

/* Sidebar footer polish */
.sidebar-footer {
  background: var(--color-surface-offset);
  border-top: none;
  margin: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

/* Journey progress at bottom */
.sidebar-journey-bar {
  border-top: none;
}


/* ===== TOP BAR POLISH ===== */
.top-bar {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 1px 3px rgba(26, 43, 66, 0.03);
}

[data-theme="dark"] .top-bar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Search bar enhancement */
.search-bar {
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-full);
  transition: all 200ms ease;
}

.search-bar:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.1);
}

[data-theme="dark"] .search-bar:focus-within {
  box-shadow: 0 0 0 3px rgba(107, 159, 212, 0.15);
}

/* AI status pill — more polished */
.ai-status-pill {
  border: 1px solid rgba(61, 138, 94, 0.2);
  font-size: var(--text-xs);
  padding: 4px var(--space-3);
  box-shadow: var(--shadow-xs);
}

/* Language toggle — more tactile */
.lang-toggle {
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 4px var(--space-3);
}


/* ===== WELCOME BANNER — Premium Gradient ===== */
.welcome-banner {
  background: var(--gradient-welcome);
  border: none;
  color: #ffffff;
  padding: var(--space-8) var(--space-8);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay for texture */
.welcome-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 0%, transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.welcome-banner .welcome-text h1 {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.welcome-banner .welcome-text p {
  color: rgba(255, 255, 255, 0.8);
}

.welcome-banner .welcome-text p strong {
  color: #ffffff;
}

/* Milestone badges on dark banner */
.welcome-banner .badge-earned > i {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.welcome-banner .badge-locked > i {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Lucide replaces <i> with <svg> — grey out locked milestone icons */
.welcome-banner .badge-locked > svg {
  opacity: 0.35;
}

.welcome-banner .badge-earned > .badge-label {
  color: rgba(255, 255, 255, 0.8);
}

.welcome-banner .badge-locked > .badge-label {
  color: rgba(255, 255, 255, 0.35);
}

/* Progress ring on dark banner */
.welcome-banner .stat-ring .ring-bg {
  stroke: rgba(255, 255, 255, 0.15);
}

.welcome-banner .stat-ring .ring-fill {
  stroke: #ffffff;
}

.welcome-banner .stat-value {
  color: #ffffff;
}


/* ===== KPI CARDS — Color-coded, elevated ===== */
.kpi-card {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Top accent line on KPI cards */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.kpi-card:nth-child(1)::before { background: var(--kpi-blue); }
.kpi-card:nth-child(2)::before { background: var(--kpi-green); }
.kpi-card:nth-child(3)::before { background: var(--kpi-amber); }
.kpi-card:nth-child(4)::before { background: var(--kpi-red); }

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* KPI icons — colored backgrounds */
.kpi-card:nth-child(1) .kpi-icon { background: var(--kpi-blue-bg); color: var(--kpi-blue); }
.kpi-card:nth-child(2) .kpi-icon { background: var(--kpi-green-bg); color: var(--kpi-green); }
.kpi-card:nth-child(3) .kpi-icon { background: var(--kpi-amber-bg); color: var(--kpi-amber); }
.kpi-card:nth-child(4) .kpi-icon { background: var(--kpi-red-bg); color: var(--kpi-red); }

.kpi-icon {
  border-radius: var(--radius-lg);
}

/* KPI values — bigger, bolder */
.kpi-value {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  letter-spacing: -0.02em;
}


/* ===== CARDS — Elevated ===== */
.card {
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header h2 {
  letter-spacing: -0.01em;
}


/* ===== BUTTONS — More tactile ===== */
.btn-primary {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.1);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-primary:hover {
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.btn-secondary {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}


/* ===== SECTION TRANSITIONS ===== */
.section.section-active {
  animation: sectionFadeIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

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


/* ===== GETTING STARTED CHECKLIST — Premium ===== */
.getting-started-card {
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.getting-started-card .card-header h2 {
  color: var(--color-primary);
}


/* ===== SCORING ENGINE — More visual weight ===== */
.score-panel {
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}

.score-panel:hover {
  box-shadow: var(--shadow-md);
}

.score-num {
  letter-spacing: -0.02em;
}

/* Score breakdown bars — smoother */
.score-bar-fill {
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: var(--radius-full);
}

/* Timeline risk bar — gradient */
.timeline-risk-bar {
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: var(--shadow-inset);
}

/* Scenario simulator card */
.scenario-card {
  background: var(--gradient-primary-soft);
  border: 1px solid var(--color-primary-highlight);
}


/* ===== DOCUMENT SECTION — Refined rows ===== */
.doc-row {
  border-radius: var(--radius-md);
  transition: all 200ms ease;
}

.doc-row:hover {
  background: var(--color-primary-subtle);
  transform: translateX(2px);
}

/* Upload zone — dashed, inviting */
.upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  transition: all 200ms ease;
}

.upload-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}


/* ===== ROADMAP / JOURNEY TIMELINE — Enhanced ===== */
.roadmap-card {
  box-shadow: var(--shadow-sm);
}

/* Progress ring — larger, more prominent */
.roadmap-progress-ring.large {
  filter: drop-shadow(0 2px 4px rgba(44, 74, 124, 0.15));
}

/* Phase headers — bolder */
.phase-header {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Phase number circles — elevated */
.phase-num {
  box-shadow: var(--shadow-sm);
}

/* Step items — better hover */
.step-item {
  border-radius: var(--radius-md);
  transition: all 200ms ease;
}

.step-item:hover {
  background: var(--color-surface-offset);
}

/* Smart tool chips on roadmap — refined */
.smart-tool-chip {
  box-shadow: var(--shadow-xs);
  transition: all 200ms ease;
}

.smart-tool-chip:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Complete badge — more celebratory */
.phase-badge-complete {
  font-weight: 600;
}

/* In-progress badge — animated accent */
.phase-badge-progress {
  font-weight: 600;
  position: relative;
}


/* ===== SMART PROFILE / INTAKE WIZARD — Premium form ===== */
.intake-wizard .step-tabs {
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  padding: 3px;
}

.intake-wizard .step-tab {
  border-radius: var(--radius-full);
  transition: all 200ms ease;
}

.intake-wizard .step-tab.active {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* Form inputs — refined */
.intake-wizard input[type="text"],
.intake-wizard input[type="number"],
.intake-wizard input[type="email"],
.intake-wizard select,
.intake-wizard textarea {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: all 200ms ease;
  background: var(--color-surface);
}

.intake-wizard input:focus,
.intake-wizard select:focus,
.intake-wizard textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.1);
  outline: none;
}

[data-theme="dark"] .intake-wizard input:focus,
[data-theme="dark"] .intake-wizard select:focus,
[data-theme="dark"] .intake-wizard textarea:focus {
  box-shadow: 0 0 0 3px rgba(107, 159, 212, 0.15);
}

/* Hint text below fields */
.intake-hint {
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-2);
  margin-top: var(--space-1);
}


/* ===== AI CHAT — Premium messaging ===== */
.chat-container {
  background: var(--color-bg);
}

/* Chat mode pills — elevated active state */
.chat-mode-pill.active {
  box-shadow: var(--shadow-sm);
}

/* Chat bubbles — more depth */
.chat-bubble.bot {
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
  box-shadow: var(--shadow-xs);
}
/* Welcome bubble — no background, no shadow, centered */
.chat-welcome .chat-bubble.bot {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.chat-bubble.user {
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-sm);
}

/* Suggestion pills — better hover */
.chat-suggestion-btn {
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: all 200ms ease;
}

.chat-suggestion-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Chat input wrapper — now inside composer, no standalone border/shadow */
.chat-input-wrapper {
  border: none;
  box-shadow: none;
  border-radius: 0;
}
.chat-input-wrapper:focus-within {
  border: none;
  box-shadow: none;
}
[data-theme="dark"] .chat-input-wrapper:focus-within {
  border: none;
  box-shadow: none;
}

/* Send button — polished in app.css, no override needed */

/* Trust badges in chat */
.chat-trust-badge {
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ===== POLICY CENTER — Enhanced visualization ===== */
.policy-graph {
  box-shadow: var(--shadow-sm);
}

/* Policy node — interactive */
.policy-node {
  transition: all 200ms ease;
}

.policy-node:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.policy-node.highlighted {
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
}

/* Policy timeline rows */
.policy-row {
  transition: all 200ms ease;
}

.policy-row:hover {
  background: var(--color-primary-subtle);
}


/* ===== TOOLKIT — Card grid polish ===== */
.tool-card {
  border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-xs);
  transition: all 200ms ease;
}

.tool-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

.tool-card .tool-icon {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* Pathway filter pills */
.pathway-pill {
  transition: all 200ms ease;
}

.pathway-pill.active {
  box-shadow: var(--shadow-sm);
}

.pathway-pill:hover:not(.active) {
  transform: translateY(-1px);
}


/* ===== ONBOARDING OVERLAY — Premium ===== */
.onboarding-overlay .onboarding-card {
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-divider);
}

.onboarding-card .feature-pill {
  box-shadow: var(--shadow-xs);
  transition: all 200ms ease;
}

.onboarding-card .feature-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Onboarding step indicator */
.onboarding-steps .step-dot {
  transition: all 200ms ease;
}

.onboarding-steps .step-dot.active {
  box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.2);
}


/* ===== FAB — Floating Action Button ===== */
.ask-ai-fab {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
  transition: all 200ms ease;
}

.ask-ai-fab:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-xl);
}


/* ===== SETTLEMENT & FAMILY — Card polish ===== */
.family-card {
  box-shadow: var(--shadow-xs);
  transition: all 200ms ease;
}

.family-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.family-avatar {
  box-shadow: var(--shadow-xs);
}


/* ===== SCROLLBAR — Custom styled ===== */
.content-scroll::-webkit-scrollbar {
  width: 6px;
}

.content-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.content-scroll::-webkit-scrollbar-thumb {
  background: var(--color-surface-dynamic);
  border-radius: var(--radius-full);
}

.content-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-faint);
}

.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-dynamic) transparent;
}
.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-surface-dynamic);
  border-radius: var(--radius-full);
}

[data-theme="dark"] .sidebar {
  scrollbar-color: #283248 transparent;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
  background: #283248;
}
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover {
  background: #354060;
}


/* ===== APPLICATION SECTION — Refined ===== */
.application-form .form-group {
  transition: all 200ms ease;
}

.application-form input:focus,
.application-form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(44, 74, 124, 0.1);
}


/* ===== NOTIFICATION PANEL — Polished ===== */
.notif-item {
  transition: all 200ms ease;
  border-radius: var(--radius-md);
}

.notif-item:hover {
  background: var(--color-surface-offset);
}

.notif-item.unread {
  border-left: 3px solid var(--color-primary);
}


/* ===== PROGRESS BARS — Animated fill ===== */
.progress-fill,
.crs-bar-fill,
.score-bar-fill {
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ===== CONTEXTUAL TOOLTIP — Enhanced ===== */
.contextual-tooltip {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-sm);
}


/* ===== JARGON TOOLTIPS — Polished ===== */
.jargon-tooltip-popup {
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}


/* ===== FOCUS MODE — Overlay polish ===== */
.focus-mode-overlay {
  backdrop-filter: blur(4px);
}


/* ===== EMPTY STATES — More personality ===== */
.empty-icon {
  background: var(--gradient-primary-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}


/* ===== MICRO-ANIMATION: Staggered card entrance ===== */
@keyframes cardSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.section.section-active .kpi-card,
.section.section-active .card,
.section.section-active .score-panel,
.section.section-active .tool-card {
  animation: cardSlideUp 350ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.section.section-active .kpi-card:nth-child(1),
.section.section-active .card:nth-child(1),
.section.section-active .tool-card:nth-child(1) { animation-delay: 0ms; }
.section.section-active .kpi-card:nth-child(2),
.section.section-active .card:nth-child(2),
.section.section-active .tool-card:nth-child(2) { animation-delay: 50ms; }
.section.section-active .kpi-card:nth-child(3),
.section.section-active .card:nth-child(3),
.section.section-active .tool-card:nth-child(3) { animation-delay: 100ms; }
.section.section-active .kpi-card:nth-child(4),
.section.section-active .card:nth-child(4),
.section.section-active .tool-card:nth-child(4) { animation-delay: 150ms; }
.section.section-active .card:nth-child(5),
.section.section-active .tool-card:nth-child(5) { animation-delay: 200ms; }
.section.section-active .card:nth-child(6),
.section.section-active .tool-card:nth-child(6) { animation-delay: 250ms; }


/* ===== KPI BENCHMARK BAR ===== */
.kpi-benchmark {
  width: 100%;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}

.kpi-benchmark-bar {
  position: relative;
  height: 4px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: visible;
  margin-bottom: var(--space-1);
}

.kpi-benchmark-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kpi-benchmark-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 1px;
  transform: translateX(-50%);
}

.kpi-benchmark-marker::after {
  content: '490 cut-off';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--color-accent);
  white-space: nowrap;
  font-weight: 600;
}

.kpi-benchmark-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.kpi-benchmark-label strong {
  color: var(--color-text);
  font-weight: 600;
}


/* ===== ROADMAP ENHANCED TIMELINE ===== */
.journey-phase .phase-num {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
}

.journey-phase.completed .phase-num {
  background: var(--color-success);
  color: #ffffff;
}

.journey-phase.in-progress .phase-num {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(44, 74, 124, 0.15), var(--shadow-sm);
}

[data-theme="dark"] .journey-phase.in-progress .phase-num {
  box-shadow: 0 0 0 4px rgba(107, 159, 212, 0.2), var(--shadow-sm);
}

.journey-step .step-check {
  transition: all 200ms ease;
}

.journey-step.completed .step-check {
  color: var(--color-success);
}

.journey-step:hover {
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  margin: 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
}

/* Phase badge enhancements */
.journey-phase .phase-badge {
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-xs);
}


/* ===== ONBOARDING MODAL POLISH ===== */
.onboarding-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.onboarding-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  max-width: 480px;
}

.onboarding-card h2 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

.onboarding-card .btn-primary {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}


/* ===== GETTING STARTED CHECKLIST ===== */
.gs-checklist,
.card:has(.gs-title) {
  border-left: 3px solid var(--color-primary);
}

.gs-step {
  transition: all 200ms ease;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.gs-step:hover {
  background: var(--color-primary-subtle);
}


/* ===== SECTION TITLE ENHANCEMENT ===== */
.section-title-row h1 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

.section-title-row .badge {
  box-shadow: var(--shadow-xs);
}


/* ===== DOCUMENT SECTION — Upload zone enhancement ===== */
.upload-dropzone,
.doc-upload-zone {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  transition: all 250ms ease;
  cursor: pointer;
}

.upload-dropzone:hover,
.doc-upload-zone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  transform: scale(1.01);
}


/* ===== SMART PROFILE STEP INDICATOR ===== */
.intake-step-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.intake-step-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  transition: all 200ms ease;
}

.intake-step-dot.active {
  width: 24px;
  background: var(--color-primary);
}

.intake-step-dot.completed {
  background: var(--color-success);
}


/* ===== ACTION ITEMS — Better priority indicators ===== */
.action-priority {
  width: 4px;
  border-radius: var(--radius-full);
  align-self: stretch;
  flex-shrink: 0;
}

.action-priority.high { background: var(--color-error); }
.action-priority.medium { background: var(--color-warning); }
.action-priority.low { background: var(--color-success); }

.action-item {
  border-radius: var(--radius-md);
  transition: all 200ms ease;
  cursor: pointer;
}

.action-item:hover {
  background: var(--color-surface-offset);
  transform: translateX(2px);
}


/* ===== ALERT ITEMS ===== */
.alert-item {
  border-radius: var(--radius-md);
  transition: all 200ms ease;
}

.alert-item:hover {
  background: var(--color-surface-offset);
}

.alert-item .alert-badge {
  box-shadow: var(--shadow-xs);
}


/* ===== POLICY NODES — Enhanced tree ===== */
.policy-tree-node {
  border-radius: var(--radius-md);
  transition: all 200ms ease;
  cursor: pointer;
}

.policy-tree-node:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.policy-tree-node.matched {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}


/* ===== PRINT-FRIENDLY ===== */
@media print {
  .sidebar, .top-bar, .ask-ai-fab, .contextual-tooltip { display: none !important; }
  .main-content { grid-column: 1 / -1; }
  .app-shell { display: block; }
  .content-scroll { overflow: visible; }
}


/* ===== ACCESSIBILITY: Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}