/* ==========================================================================
   AI Discovery -- Custom CSS
   Tailwind v4 loaded via CDN in base.html. This file holds effects that
   cannot be expressed as utility classes.

   Brand palette sourced from Nexrizen Brand_Guidelines.md:
     Purple  #502cff  |  Blue  #4cbdf5  |  Mint  #ccfffe
     Black   #000000  |  White #ffffff  |  Off-white #fbffff
   ========================================================================== */

/* ----- 0. DESIGN TOKENS ------------------------------------------------- */
:root {
  /* Brand core (from Brand_Guidelines.md) */
  --brand-purple: #502cff;
  --brand-blue: #4cbdf5;
  --brand-mint: #ccfffe;

  /* Surfaces (from marketing site design system) */
  --surface-dark: #0B0A1A;
  --surface-raised: #13121f;

  /* Brand opacity scale (derived from --brand-purple) */
  --brand-ring: rgba(80, 44, 255, 0.10);
  --brand-border-hover: rgba(80, 44, 255, 0.16);
  --brand-glow: rgba(80, 44, 255, 0.25);

  /* Brand gradient (canonical, single source of truth) */
  --gradient-brand: linear-gradient(135deg, #502cff, #4cbdf5, #ccfffe);
}

/* ----- 1. HERO GLOW ---------------------------------------------------- */
.hero-glow {
  position: relative;
  overflow: hidden;
}

.hero-glow::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(
    ellipse at center,
    rgba(80, 44, 255, 0.15) 0%,
    rgba(76, 189, 245, 0.08) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ----- 2. GRADIENT TEXT ------------------------------------------------- */
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ----- 3. ACCENT FONT -------------------------------------------------- */
.font-accent {
  font-family: 'Volkhov', Georgia, serif;
  font-style: italic;
}

/* ----- 4. GLASS CARD (form only) ---------------------------------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1.25rem;
}

@supports (backdrop-filter: blur(12px)) {
  .glass-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ----- 5. INPUT STYLING ------------------------------------------------- */
.input-field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus {
  border-color: var(--brand-glow);
  box-shadow: 0 0 0 3px var(--brand-ring);
  outline: none;
}

/* ----- 6. CUSTOM CHECKBOX ----------------------------------------------- */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.custom-checkbox:checked {
  border-color: var(--brand-purple);
  background: var(--brand-purple);
}

.custom-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--surface-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-ring);
  outline: none;
}

/* ----- 7. FADE-IN ANIMATION -------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
  opacity: 0;
}

.animate-on-scroll.visible {
  animation: fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-1.visible { animation-delay: 0.1s; }
.delay-2.visible { animation-delay: 0.2s; }
.delay-3.visible { animation-delay: 0.3s; }
.delay-4.visible { animation-delay: 0.4s; }

/* ----- 8. GRADIENT DIVIDER ---------------------------------------------- */
.gradient-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(80, 44, 255, 0.3),
    rgba(76, 189, 245, 0.3),
    transparent
  );
}

/* ----- 9. SUCCESS / ERROR ICONS ----------------------------------------- */
.icon-draw-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards;
}

.icon-draw-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: draw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;
}

.icon-draw-x {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.7s forwards;
}

.icon-draw-x-2 {
  animation-delay: 0.85s;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* ----- 10. SPINNER (HTMX) ---------------------------------------------- */
.spinner {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

.htmx-request .btn-text { display: none; }
.htmx-request .spinner  { display: inline-block; }
.htmx-request button[type="submit"] { opacity: 0.6; pointer-events: none; }

/* ----- 11. STEP ROW + MICRO-INTERACTION --------------------------------- */
.step-row {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-row:hover {
  transform: translateX(4px);
}

.step-row:hover .step-num {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  color: var(--surface-dark);
}

.step-row:hover .step-title {
  color: #fff;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease;
}

/* Vertical connector between steps */
.step-list {
  position: relative;
}

.step-list::before {
  content: "";
  position: absolute;
  left: calc(1rem - 0.5px);
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(80, 44, 255, 0.2),
    rgba(76, 189, 245, 0.2),
    rgba(80, 44, 255, 0.2)
  );
}

/* ----- 12. REDUCED MOTION ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .step-row {
    opacity: 1;
    animation: none !important;
    transition: none !important;
  }
  .icon-draw-circle,
  .icon-draw-check,
  .icon-draw-x,
  .spinner {
    animation: none !important;
  }
  .icon-draw-circle { stroke-dashoffset: 0; }
  .icon-draw-check  { stroke-dashoffset: 0; }
  .icon-draw-x      { stroke-dashoffset: 0; }
}

/* ----- 13. REPORT PROSE (rendered markdown) ---------------------------- */
.nx-prose > :first-child { margin-top: 0; }
.nx-prose > :last-child { margin-bottom: 0; }
.nx-prose p { margin: 0 0 0.75rem; }
.nx-prose ul,
.nx-prose ol { margin: 0.5rem 0 0.85rem; padding-left: 1.25rem; }
.nx-prose ul { list-style: disc; }
.nx-prose ol { list-style: decimal; }
.nx-prose li { margin: 0.3rem 0; padding-left: 0.15rem; }
.nx-prose li::marker { color: rgba(124, 92, 255, 0.7); }
.nx-prose strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.nx-prose code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.85em;
}
.nx-prose a { color: #4cbdf5; text-decoration: underline; }

/* Hide the horizontal scrollbar on the report tab strip (still scrollable). */
.nx-tabscroll { scrollbar-width: none; }
.nx-tabscroll::-webkit-scrollbar { display: none; }

/* ===========================================================================
   14. REPORT RE-SKIN -- adapted from the approved Claude-Design mock.
   Reuses existing tokens; adds the design's component classes. Only effects
   that cannot be expressed as Tailwind utilities live here.
   ========================================================================== */
:root {
  --brand: linear-gradient(135deg, #502cff, #4cbdf5, #ccfffe);
  --txt: rgba(255, 255, 255, 0.86);
  --meta: rgba(255, 255, 255, 0.60);
  --hair: rgba(255, 255, 255, 0.08);
  --raised: #13121f;
}

/* reading column + gradient text + Volkhov accent phrase */
.reading { max-width: 660px; margin-left: auto; margin-right: auto; }
.grad-text {
  background: var(--brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.accent-name {
  font-family: 'Volkhov', serif; font-style: italic; font-weight: 400;
  background: var(--brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.glass {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* outlined credibility pills */
.pill-out {
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--meta); border-radius: 999px;
  font-size: 12px; letter-spacing: 0.02em; padding: 0.34rem 0.8rem; white-space: nowrap;
}

/* sticky tab bar */
.tabbar { background: rgba(11, 10, 26, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tab {
  color: var(--meta); border-radius: 999px; white-space: nowrap;
  padding: 0.55rem 1.15rem; font-size: 14px; font-weight: 500;
  transition: color 0.18s ease, background 0.18s ease;
}
.tab:hover { color: rgba(255, 255, 255, 0.92); }
.tab.active { background: #fff; color: #0b0a1a; font-weight: 600; }
.tabscroll {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* fixed impact / effort badges */
.badge {
  display: inline-flex; align-items: center; gap: 0.36rem; border-radius: 999px;
  padding: 0.22rem 0.6rem; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap; flex: 0 0 auto;
}
.badge .dot { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; }
.b-high { background: rgba(124, 92, 255, 0.14); color: #c9bcff; border: 1px solid rgba(124, 92, 255, 0.30); }
.b-high .dot { background: #8f6bff; }
.b-med { background: rgba(76, 189, 245, 0.12); color: #aee3fb; border: 1px solid rgba(76, 189, 245, 0.28); }
.b-med .dot { background: #4cbdf5; }
.b-low { background: rgba(255, 255, 255, 0.05); color: var(--meta); border: 1px solid rgba(255, 255, 255, 0.12); }
.b-low .dot { background: rgba(255, 255, 255, 0.4); }
.effort { font-size: 11px; color: var(--meta); letter-spacing: 0.02em; white-space: nowrap; }

/* readiness scale + peer-benchmark tick */
.seg { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.seg.fill { background: var(--brand); }
.scale-wrap { position: relative; padding-top: 22px; }
.bench { position: absolute; top: 16px; bottom: -6px; width: 2px; background: rgba(255, 255, 255, 0.5); border-radius: 2px; }
.bench-label {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}

/* number badge + gradient left edge */
.numbadge {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #0b0a1a; background: var(--brand);
}
.left-grad { position: relative; }
.left-grad::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2.5px;
  border-radius: 999px; background: var(--brand);
}

/* expander toggle */
.how-toggle { color: var(--meta); font-size: 12.5px; font-weight: 500; }
.how-toggle:hover { color: rgba(255, 255, 255, 0.9); }
.chev { transition: transform 0.2s ease; display: inline-block; }
.chev.open { transform: rotate(90deg); }

/* where-the-hours-go stacked bar */
.stack { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; }
.stack > span { display: block; height: 100%; }
.s-delivery { background: linear-gradient(135deg, #3f5fe6, #4cbdf5); }
.s-growth { background: linear-gradient(135deg, #502cff, #6a4dff); }
.s-ops { background: linear-gradient(135deg, #4cbdf5, #ccfffe); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* next-steps stepper (scoped so it never clobbers landing's .step-num) */
.stepper { position: relative; }
.stepper::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
}
.stepper .step-num {
  width: 32px; height: 32px; border-radius: 999px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 13px; font-weight: 600; background: var(--raised); border: 1px solid var(--hair);
  color: rgba(255, 255, 255, 0.9); position: relative; z-index: 1;
}

/* quick-win gradient frame + CTA */
.quickwin { position: relative; border-radius: 1rem; }
.quickwin::before {
  content: ""; position: absolute; inset: 0; border-radius: 1rem; padding: 1px; background: var(--brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.cta { background: #fff; color: #0b0a1a; transition: transform 0.15s ease, box-shadow 0.2s ease; }
.cta:hover { transform: translateY(-1px); box-shadow: 0 12px 40px rgba(124, 92, 255, 0.30); }

/* clickable overview opportunity + group jump link */
.opp-link { cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; }
.opp-link:hover { border-color: rgba(124, 92, 255, 0.38); background: rgba(124, 92, 255, 0.05); }
.jump { color: var(--meta); font-size: 12px; font-weight: 500; }
.opp-link:hover .jump { color: #c9bcff; }

/* tab panel entrance */
.fade-in { animation: fade 0.4s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }