/* ===========================================================
   IV Consulting · "BA" theme skin for the QUIZ page (index.html)
   Same neo-brutalist system as landing-ba.css / case-study-ba.css.
   Linked AFTER the page's inline <style>; scoped to body.theme-ba.
   =========================================================== */

body.theme-ba {
  --ink: #fffdf7;
  --surface: #ffffff;
  --surface-2: #fff5e6;
  --line: rgba(13, 20, 33, 0.12);
  --fg: #0d1421;
  --muted: #5b6473;
  --accent: #ffd93d;
  --accent-2: #0d1421;
  --on-accent: #0d1421;
  --grid-line: rgba(13, 20, 33, 0.05);
  --glow: rgba(108, 92, 231, 0.16);
  color-scheme: light;

  --c-ink: #0d1421;
  --c-purple: #6c5ce7;
  --c-pink: #ff6b9d;
  --c-yellow: #ffd93d;
  --c-sky: #4fc3f7;
  --c-mint: #00d9a3;

  --b: 2px solid var(--c-ink);
  --sh: 6px 6px 0 var(--c-ink);
  --sh-sm: 4px 4px 0 var(--c-ink);

  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
[data-theme="dark"] body.theme-ba {
  --ink: #0a0f18; --surface: #131a26; --surface-2: #1b2330;
  --line: rgba(255, 253, 247, 0.12); --fg: #fffdf7; --muted: #98a1b0;
  --accent: #ffd93d; --accent-2: #ffd93d; --on-accent: #0d1421; --c-ink: #fffdf7;
  --glow: rgba(108, 92, 231, 0.24); color-scheme: dark;
}

/* ---------- type ---------- */
.theme-ba h1, .theme-ba h2, .theme-ba h3, .theme-ba .display,
.theme-ba .cost-number, .theme-ba .stage-badge, .theme-ba .slider-row .label .val {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.03em;
}
.theme-ba ::selection { background: var(--c-yellow); color: #0d1421; }
.theme-ba .nb { white-space: nowrap; }
/* forced headline breaks on desktop; wrap naturally on small screens */
@media (max-width: 640px) { .theme-ba h1 .hb { display: none; } }

/* marker highlights for the intro headline */
.theme-ba .hl {
  font-style: normal; font-weight: 800; color: #0d1421; background: var(--c-yellow);
  padding: 0.02em 0.2em; margin: 0 0.03em; border-radius: 0.3em; display: inline-block;
  transform: rotate(-2deg);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.theme-ba .hl.pink { background: var(--c-pink); color: #fff; transform: rotate(1.5deg); }

/* ---------- decorative ---------- */
.theme-ba .grid-bg {
  background-image: radial-gradient(rgba(13, 20, 33, 0.05) 1.4px, transparent 1.4px);
  background-size: 24px 24px;
}
.theme-ba .glow { background: radial-gradient(circle, rgba(108, 92, 231, 0.18), transparent 70%); filter: blur(120px); }
/* retint the intro aurora to the BA palette */
.theme-ba .aurora {
  --au-c1: #6c5ce7; --au-c2: #ff6b9d; --au-c3: #ffd93d; --au-c4: #4fc3f7; --au-c5: #00d9a3;
}
[data-theme="light"] .theme-ba .aurora { --au-streak: #fffdf7; }
/* in dark mode the aurora's difference-blend muddies content — dim it */
[data-theme="dark"] body.no-scroll.theme-ba .aurora { opacity: 0.3; }
[data-theme="dark"] .theme-ba .aurora::after { mix-blend-mode: screen; }

/* ---------- header ---------- */
.theme-ba .toggle { border: var(--b); box-shadow: var(--sh-sm); color: var(--c-ink); }

/* ---------- eyebrow ---------- */
.theme-ba .eyebrow {
  font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface); border: var(--b); color: var(--c-ink);
  box-shadow: var(--sh-sm); font-weight: 500; padding: 0.45rem 0.9rem; font-size: 0.72rem;
}
.theme-ba .eyebrow .dot { background: var(--c-mint); border: 1.5px solid var(--c-ink); box-shadow: none; height: 9px; width: 9px; }

/* ---------- buttons ---------- */
.theme-ba .btn {
  background: var(--c-ink); color: #fffdf7; border: var(--b); font-weight: 700;
  box-shadow: var(--sh-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.theme-ba .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink); background: var(--c-yellow); color: #0d1421; }
.theme-ba .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--c-ink); }
.theme-ba .btn-ghost { background: var(--surface); color: var(--c-ink); border: var(--b); }
.theme-ba .btn-ghost:hover { background: var(--c-yellow); color: #0d1421; }
/* the get-started chevron box */
.theme-ba .btn-start .chev { background: rgba(255, 253, 247, 0.18); color: #fffdf7; }
.theme-ba .btn-start:hover { transform: none; }
.theme-ba .btn-start:hover .chev { color: #0d1421; }
.theme-ba .link { color: var(--muted); border-bottom: 1.5px solid var(--c-ink); }
.theme-ba .link:hover { color: var(--c-ink); }

/* ---------- progress ---------- */
.theme-ba .progress { background: var(--surface-2); border: 1.5px solid var(--c-ink); height: 10px; padding: 0; }
.theme-ba .progress .fill { background: linear-gradient(90deg, var(--c-purple), var(--c-pink) 60%, var(--c-yellow)); }

/* ---------- options ---------- */
.theme-ba .option {
  border: var(--b); background: var(--surface); border-radius: 0.9rem; box-shadow: var(--sh-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.theme-ba .option:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink); border-color: var(--c-ink); }
.theme-ba .option .pip { border: 2px solid var(--c-ink); }
.theme-ba .option.selected { border-color: var(--c-ink); background: var(--c-yellow); }
.theme-ba .option.selected .pip { border-color: var(--c-ink); background: var(--c-ink); box-shadow: inset 0 0 0 3px var(--c-yellow); }

/* ---------- sliders ---------- */
.theme-ba .slider-row .label .val { color: var(--c-purple); }
.theme-ba input[type="range"] { background: var(--surface-2); border: 1.5px solid var(--c-ink); height: 10px; }
.theme-ba input[type="range"]::-webkit-slider-thumb { background: var(--c-yellow); border: 2px solid var(--c-ink); height: 22px; width: 22px; }
.theme-ba input[type="range"]::-moz-range-thumb { background: var(--c-yellow); border: 2px solid var(--c-ink); height: 22px; width: 22px; }

/* ---------- result ---------- */
.theme-ba .stage-badge { border: var(--b); background: var(--c-yellow); color: #0d1421; box-shadow: var(--sh-sm); }
.theme-ba .secondary-note { color: var(--c-purple); font-weight: 600; }
.theme-ba .card { border: var(--b); background: var(--surface); border-radius: 1.1rem; box-shadow: var(--sh); }
.theme-ba .cost-label { font-family: "JetBrains Mono", monospace; }
.theme-ba .recover b { color: var(--c-purple); }
.theme-ba details.assumptions summary { color: var(--c-purple); }
.theme-ba .service-link { color: var(--c-purple); border-bottom: 1.5px solid var(--c-ink); }
.theme-ba .steps .num {
  border: var(--b); color: #0d1421; background: var(--c-yellow);
  font-family: "Plus Jakarta Sans", sans-serif; box-shadow: 2px 2px 0 var(--c-ink);
}

/* ---------- email capture ---------- */
.theme-ba .capture { background: var(--surface-2); border: var(--b); }
.theme-ba input[type="email"], .theme-ba input[type="text"] {
  background: var(--surface); border: var(--b); color: var(--c-ink);
}
.theme-ba input[type="email"]:focus, .theme-ba input[type="text"]:focus { border-color: var(--c-purple); }
.theme-ba .form-note { color: var(--muted); }

/* ---------- dark-mode button fix (cream/ink flip made it invisible) ---------- */
[data-theme="dark"] body.theme-ba .btn { background: var(--c-yellow); color: #0d1421; border-color: var(--c-ink); }
[data-theme="dark"] body.theme-ba .btn:hover { background: #fffdf7; color: #0d1421; }
[data-theme="dark"] body.theme-ba .btn-start .chev { background: rgba(13, 20, 33, 0.18); color: #0d1421; }
[data-theme="dark"] body.theme-ba .btn-start:hover .chev { color: #0d1421; }

/* dark mode removed — hide the theme toggle */
#themeToggle { display: none !important; }