/* Simulation page styles — extracted from simulation.html inline <style> */

:root { --brand: #2563eb; --brand-dark: #1e3a8a; }

/* Page canvas — soft blues to match marketing / landing hero */
.demo-sim-body {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 18%, #e0e7ff 42%, #e8e4f0 72%, #e7e5e4 100%);
  min-height: 100vh;
}
/* z-[100] is not in Tailwind v2 CDN — without this, #root covers the fixed nav and links feel "dead" */
.sim-page-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.94) !important;
}

/* Fallback if Tailwind misses a utility — same light strip treatment as live dashboard */
.ca-connect-files-strip {
  background-color: #f5f5f4;
  color: #44403c;
  border-color: #e7e5e4;
}
.ca-connect-files-strip a {
  text-decoration: none;
}
html { scroll-behavior: smooth; }

/* Fixed site nav (56px) + safe buffer so React content never slides under it */
.sim-root {
  padding-top: 4.5rem;
  min-height: 100vh;
  position: relative;
  z-index: 0;
  isolation: isolate; /* keep app z-10/50 layers from competing with the site nav */
}

/* Hero — same family as landing.html gradient-hero, compact for demo flow */
.demo-hero-landing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 38%, #2563eb 72%, #6d28d9 100%);
  color: #f8fafc;
  border-bottom: 1px solid rgba(30, 58, 138, 0.5);
}
.demo-hero-landing::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(96, 165, 250, 0.35), transparent 50%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(167, 139, 250, 0.25), transparent 45%);
  pointer-events: none;
}
.demo-hero-landing .demo-hero-inner {
  position: relative;
  z-index: 1;
}

/* Legacy class kept for any stray references */
.demo-hero-prod {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 38%, #2563eb 72%, #6d28d9 100%);
  border-bottom: 1px solid rgba(30, 58, 138, 0.5);
  color: #f8fafc;
}
.gradient-hero { background: linear-gradient(180deg, #fafaf9 0%, #f5f5f4 45%, #e7e5e4 100%); border-bottom: 1px solid #d6d3d1; color: #1c1917; }
.gradient-cta { background: #2563eb; }
.gradient-cta:hover { background: #1d4ed8; }
.card-glow { box-shadow: 0 1px 3px 0 rgb(28 25 23 / 0.06); }

/* Main demo wizard card — slight lift + blue rim */
.sim-wizard-card {
  box-shadow:
    0 4px 6px -1px rgba(30, 58, 138, 0.08),
    0 10px 24px -4px rgba(37, 99, 235, 0.12);
  border-color: rgba(147, 197, 253, 0.65) !important;
}
.sim-wizard-card-top-accent {
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
}

/* Light stepper — active step ring (Tailwind v2 has limited ring utilities) */
.sim-step-ring {
  box-shadow: 0 0 0 1px #bfdbfe, 0 2px 8px rgba(37, 99, 235, 0.12);
}

/* Scanning — linear progress (no orbital spinner) */
@keyframes sim-bar-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.sim-scan-progress-track {
  height: 6px;
  border-radius: 9999px;
  background: rgba(37, 99, 235, 0.15);
  overflow: hidden;
}
.sim-scan-progress-fill {
  height: 100%;
  width: 45%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
  animation: sim-bar-sweep 1.4s ease-in-out infinite;
}
.sim-scan-icon-pulse {
  animation: sim-icon-breathe 1.8s ease-in-out infinite;
}
@keyframes sim-icon-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); }
  50% { transform: scale(1.03); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45); }
}


#demo-cc-export-details > summary.demo-cc-export-summary {
  list-style: none;
}
#demo-cc-export-details > summary.demo-cc-export-summary::-webkit-details-marker {
  display: none;
}

/* Match production Command Center triad hover */
.reg-card { transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; }
.reg-card:hover { transform: translateY(-1px); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.pulse { animation: pulse 1.5s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .45s ease forwards; }

.score-ring { transition: stroke-dashoffset 1.5s ease-in-out; }
.bar-fill { transition: width 1s ease-in-out; }

.slider-track { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 9999px; background: #e5e7eb; outline: none; }
.slider-track::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.slider-track::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #2563eb; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

.finding-detail { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.finding-detail.open { max-height: 2000px; }

/* ── Mobile polish ── */
@media (max-width: 639px) {
    /* Tighter padding on small screens */
    .max-w-4xl { padding-left: 12px; padding-right: 12px; }
    /* Stat cards: ensure text doesn't overflow */
    .grid-cols-2 > div { min-width: 0; }
    /* Proposal tables scroll horizontally */
    table { font-size: 11px; }
    /* Score ring: slightly smaller on mobile */
    .w-40.h-40 { width: 8rem; height: 8rem; }
    .w-40.h-40 svg { width: 8rem; height: 8rem; }
    /* Prevent horizontal overflow */
    body { overflow-x: hidden; }
}

@media print {
    nav, .gradient-hero, .demo-hero-prod, .demo-hero-landing, #cookieBanner, .no-print { display: none !important; }
    body { background: white !important; font-size: 11px !important; }
    .card-glow { box-shadow: none !important; }
    .fade-up { animation: none !important; }
    .score-ring { transition: none !important; }
    .bar-fill { transition: none !important; }
    .rounded-2xl, .rounded-xl { break-inside: avoid; }
    /* Show print-only elements, hide editable inputs */
    .print-only { display: block !important; }
    input.no-print { display: none !important; }
}

/* Hide print-only elements on screen */
.print-only { display: none; }

/* Proposal-specific print: clean page breaks, no nav/hero, forced colors */
body.proposal-print * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
@media print {
    body.proposal-print nav,
    body.proposal-print .gradient-hero,
    body.proposal-print #cookieBanner,
    body.proposal-print .no-print { display: none !important; }
    body.proposal-print .proposal-cover { break-after: page; }
    body.proposal-print .proposal-content table { font-size: 11px !important; }
    body.proposal-print .proposal-content { max-width: 100% !important; padding: 0 !important; }
}