/* =====================================================================
   Brainflood Score (BQ) — page-specific styles.
   Layers on top of /personality/personality.css (shared panel/hero/quiz/
   save-card/action-btn classes). Only the BQ-unique pieces live here.
   Accent system: cyan → magenta neon.
   ===================================================================== */

:root {
  --bq-cyan: #22d3ee;
  --bq-magenta: #a855f7;
  --bq-pink: #f472b6;
}

/* Intro "powered by" chips */
.type-grid-bq {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 520px;
}
.type-grid-bq span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: center;
  font-weight: 600;
}

/* ── Signature badge (develops with depth: Spark → Signature → Constellation) ── */
.bq-result { width: 100%; }
.sig-badge {
  position: relative;
  text-align: center;
  margin: 0 auto;
  max-width: 540px;
  padding: 2.2rem 1.4rem 2rem;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--sig-accent, #a855f7) 30%, transparent);
  background:
    radial-gradient(130% 90% at 50% 0%, color-mix(in srgb, var(--sig-accent, #a855f7) 14%, transparent), transparent 62%),
    rgba(21, 19, 43, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
.sig-inner { position: relative; z-index: 1; }
.sig-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--sig-accent, #a855f7) 75%, #fff);
  margin: 0 0 0.8rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.sig-pips { letter-spacing: 0.15em; font-size: 0.6rem; opacity: 0.9; }
.sig-emblem {
  font-size: clamp(3rem, 11vw, 4.6rem);
  line-height: 1;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--sig-accent, #a855f7) 55%, transparent));
  animation: sig-pulse 3.4s ease-in-out infinite;
}
@keyframes sig-pulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--sig-accent,#a855f7) 45%, transparent)); }
  50%      { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 0 34px color-mix(in srgb, var(--sig-accent,#a855f7) 65%, transparent)); }
}
.sig-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  line-height: 1.1;
  color: #fff;
  margin: 0.5rem 0 0.5rem;
  text-wrap: balance;
}
.sig-code {
  font-family: 'Space Grotesk', monospace;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--sig-accent, #a855f7) 80%, #fff);
  margin: 0 0 0.5rem;
}
.sig-cosmic { color: #c4b5fd; font-weight: 600; letter-spacing: 0.02em; margin: 0; font-size: 0.9rem; }
.sig-trait {
  display: inline-block;
  margin: 0.7rem 0 0;
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e7e5f0;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.sig-rarity { margin: 0.8rem 0 0; font-size: 0.78rem; color: rgba(226, 232, 240, 0.55); }

/* Tier intensity — the badge visibly "levels up" as more is answered. */
.sig-tier-spark { box-shadow: none; }
.sig-tier-signature { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sig-accent,#a855f7) 35%, transparent), 0 14px 40px -22px var(--sig-accent, #a855f7); }
.sig-tier-constellation {
  border-width: 1.5px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sig-accent,#a855f7) 50%, transparent), 0 18px 60px -20px var(--sig-accent, #a855f7);
}
.sig-tier-constellation .sig-emblem { font-size: clamp(3.4rem, 12vw, 5.2rem); }

/* Locked-slot teaser (pulls people deeper). */
.sig-locked { text-align: center; margin: 1rem auto 0; max-width: 540px; }
.sig-locked-chip {
  display: inline-block;
  margin: 0.25rem;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
  border: 1px dashed rgba(196, 181, 253, 0.4);
  color: rgba(196, 181, 253, 0.85);
  font-size: 0.8rem;
}
.sig-locked-cta { margin: 0.6rem 0 0; color: var(--bq-cyan); font-weight: 600; font-size: 0.9rem; }

/* ── Stat sheet (RPG character-sheet feel) ───────────────────────────── */
.bq-stats {
  display: grid;
  gap: 0.9rem;
  max-width: 560px;
  margin: 0 auto;
}
.bq-stat {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: "name track" "name desc";
  align-items: center;
  gap: 0.2rem 0.9rem;
}
.bq-stat-name {
  grid-area: name;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bq-magenta);
}
.bq-stat-track {
  grid-area: track;
  height: 9px;
  border-radius: 99px;
  background: rgba(36, 31, 67, 0.9);
  overflow: hidden;
}
.bq-stat-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--bq-cyan), var(--bq-magenta));
  transition: width 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bq-stat-desc {
  grid-area: desc;
  font-size: 0.74rem;
  color: rgba(226, 232, 240, 0.6);
}

/* ── Reading ─────────────────────────────────────────────────────────── */
.bq-reading {
  white-space: pre-line;
  line-height: 1.8;
  font-size: 1.05rem;
  color: #d7d3e8;
  max-width: 620px;
  margin: 0 auto;
}

/* ── Code decoder (what each letter means) ───────────────────────────── */
.bq-letters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 0.7rem;
  max-width: 620px;
  margin: 0 auto;
}
.bq-letter {
  text-align: center;
  background: rgba(21, 19, 43, 0.8);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 14px;
  padding: 0.9rem 0.5rem;
}
.bq-letter-big {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--bq-cyan), var(--bq-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bq-letter-name { display: block; font-weight: 600; color: #fff; font-size: 0.85rem; margin-top: 0.2rem; }
.bq-letter-desc { display: block; font-size: 0.72rem; color: rgba(226, 232, 240, 0.55); margin-top: 0.15rem; }

/* ── Deep-path upsell ────────────────────────────────────────────────── */
.deep-card {
  text-align: center;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 20px;
  padding: 2rem 1.4rem;
  background: radial-gradient(120% 120% at 50% 0%, rgba(34, 211, 238, 0.1), transparent 60%);
}
.deep-title { font-size: 1.4rem; color: #fff; margin: 0.4rem 0; }
.deep-body { color: #c4b5fd; max-width: 520px; margin: 0 auto 1.2rem; }

/* ── Birthdate step ──────────────────────────────────────────────────── */
.bd-help { color: rgba(226, 232, 240, 0.6); font-size: 0.85rem; }
.bd-row { display: flex; gap: 0.7rem; margin: 1rem 0; }
.bd-select, .bd-input {
  flex: 1;
  background: rgba(13, 12, 30, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  color: #fff;
  font-size: 1rem;
}
.bd-input { width: 100%; margin-top: 0.6rem; }
.bd-invalid { border-color: var(--bq-pink) !important; }
.bd-deeper { margin: 0.5rem 0 1rem; }
.bd-deeper summary { cursor: pointer; color: var(--bq-cyan); font-weight: 600; font-size: 0.9rem; }
.bd-check { display: flex; align-items: center; gap: 0.5rem; color: rgba(226,232,240,0.7); font-size: 0.85rem; margin: 0.6rem 0; }
.bd-actions { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 0.5rem; }

/* ── Save modal: email branch ────────────────────────────────────────── */
.save-divider {
  display: flex; align-items: center; gap: 0.8rem;
  color: rgba(226, 232, 240, 0.5); font-size: 0.8rem; margin: 1.2rem 0 0.9rem;
}
.save-divider::before, .save-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(124, 58, 237, 0.25);
}
.bqemail-form { display: flex; gap: 0.5rem; }
.bqemail-input {
  flex: 1; background: rgba(13, 12, 30, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.3); border-radius: 12px;
  padding: 0.8rem 1rem; color: #fff; font-size: 1rem;
}
.bqemail-submit {
  border: 0; border-radius: 12px; padding: 0.8rem 1.2rem; font-weight: 700; cursor: pointer;
  color: #0b0a1a; background: linear-gradient(135deg, var(--bq-cyan), var(--bq-magenta));
}
.bqemail-success { padding: 0.6rem 0; }

/* Result vibe accent override (page uses data-vibe="cyan") */
#panel-result[data-vibe="cyan"] .hero-orb {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.5), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .bq-number { animation: none; }
  .bq-stat-fill { transition: none; }
}

@media (max-width: 600px) {
  .bd-row { flex-direction: column; }
  .bqemail-form { flex-direction: column; }
}

/* ── The Dossier (full tier) ─────────────────────────────────────────── */
.dossier-section { border-top: 1px solid rgba(168, 85, 247, 0.25); padding-top: 2rem; }
.dossier-tagline { color: #c4b5fd; font-style: italic; margin-top: 0.5rem; }
.dossier-h { font-weight: 700; color: #fff; font-size: 1.05rem; margin: 1.6rem 0 0.7rem; font-family: 'Space Grotesk', sans-serif; }
.dossier-grid { display: grid; gap: 0.8rem; }
@media (min-width: 720px) { .dossier-grid { grid-template-columns: repeat(3, 1fr); } }
.dossier-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 0.9rem 1rem; }
.dossier-item strong { color: #22d3ee; display: block; margin-bottom: 0.3rem; font-size: 0.92rem; }
.dossier-item p { color: #94a3b8; font-size: 0.86rem; line-height: 1.55; margin: 0; }
.dossier-growth strong { color: #f59e0b; }
.dossier-matches { display: grid; gap: 0.8rem; }
@media (min-width: 720px) { .dossier-matches { grid-template-columns: repeat(3, 1fr); } }
.dossier-match { background: rgba(168, 85, 247, 0.07); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 14px; padding: 0.9rem 1rem; }
.dossier-match-code { color: #e9d5ff; font-weight: 700; font-size: 0.92rem; display: block; margin-bottom: 0.3rem; }
.dossier-match p { color: #94a3b8; font-size: 0.86rem; line-height: 1.55; margin: 0; }
.dossier-weekly-line { border-left: 3px solid rgba(34, 211, 238, 0.4); padding-left: 1rem; text-align: left; }