/* ============================================================================
   flow.css — dark-cinematic skin for the create-song flow.
   Loaded AFTER each page's own <style> + Tailwind.
   EVERY rule is scoped under [data-theme="dark"], so:
     • dark theme  -> the cinematic skin below re-themes the light wizard
     • light theme -> none of this applies -> the page's ORIGINAL cream design shows
   (theme.js sets data-theme="dark" by default, matching the landing.)
   ============================================================================ */

/* Never allow horizontal scroll on the flow (a stray absolute/overflowing child
   must not create a phantom sideways scroll on mobile). `clip` doesn't create a
   scroll container, so it leaves position:fixed/sticky intact. */
html, body { overflow-x: clip; max-width: 100%; }

/* The flow's legacy top bar(s) are replaced by the shared nav (js/topnav.js
   injects #nav). Hide ANY legacy <nav> (steps use #navbar; the lyrics page has
   its own) so only the shared nav shows. */
nav:not(#nav) { display: none !important; }
/* …but the account dropdown's inner <nav> lives inside the shared #nav and must stay
   visible (it holds the My Songs / Profile links). */
#nav #mzAcctMenu nav { display: block !important; }

/* Clean top header on the flow: the nav is SOLID here (no hero behind it), and
   the "Step X of 4" bar sits flush under it with an opaque background, so no
   content peeks through the gap while scrolling. */
#nav { background: var(--nav-solid) !important; backdrop-filter: blur(14px); box-shadow: var(--nav-shadow); }
.fixed.top-20 { top: 72px !important; background: var(--ink) !important; backdrop-filter: none; box-shadow: 0 1px 0 var(--line) !important; }

/* Progressive-disclosure sections fade/slide in (replays each time they're
   shown, since display:none resets the animation). Add class `fx-reveal`. */
.fx-reveal { animation: fxReveal .42s var(--ease) both; }
@keyframes fxReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   BRAND ALIGNMENT — applies in BOTH themes so the flow matches the landing
   identity (Schibsted display headings, orange pill CTAs, brand chips, nav).
   Colors use brand tokens so they adapt to light (cream) and dark (brown).
   ============================================================================ */

/* Headings → Schibsted Grotesk (font now loaded via brand.css), airy weight */
.create-song-flow h1, #navbar + * h1,
body h1, body h2, body h3 { font-family: var(--font-display) !important; letter-spacing: -0.022em; }

/* Primary / active step button → brand orange pill (matches landing CTA) */
.next-button-active, button.next-button-active {
  background: var(--brand) !important; color: #fff !important;
  border-radius: 9999px !important; opacity: 1 !important;
  box-shadow: 0 10px 30px rgba(251,119,37,0.32) !important;
  transition: background-color .2s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease);
}
.next-button-active:hover { background: var(--brand-2) !important; transform: translateY(-1px); }
.next-button-active:active { transform: scale(.98); }

/* Option + artist chips → consistent brand pills, selected = orange */
.option-button, .artist-chip { border-radius: 9999px !important; font-family: var(--font-body); transition: all .2s var(--ease); }
.option-button:hover, .artist-chip:hover { border-color: var(--brand) !important; box-shadow: 0 6px 16px rgba(251,119,37,0.14) !important; }
.option-button.selected, .artist-chip.selected { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(251,119,37,0.28) !important; }

/* Tier / song cards selected state → brand */
.tier-card.selected, .song-card.selected { border-color: var(--brand) !important; }

/* Nav links hover → brand orange (both themes) */
#navbar a:hover, .nav-link:hover { color: var(--brand) !important; }

/* Dark-theme chips: subtle brown surface instead of stark white, to match the
   cohesive dark identity (selected stays orange via the rule above). */
[data-theme="dark"] .option-button, [data-theme="dark"] .artist-chip { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--line) !important; }
[data-theme="dark"] .option-button.selected, [data-theme="dark"] .artist-chip.selected { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }

/* ============================================================================
   DARK CINEMATIC SKIN — re-themes the (light) wizard markup to brown/dark.
   ============================================================================ */
[data-theme="dark"] body { background: var(--ink) !important; color: var(--text) !important; }

/* ---- Nav (light wizard nav -> dark) ---- */
[data-theme="dark"] #navbar { background: rgba(23,17,12,0.82) !important; backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.06) !important; }
[data-theme="dark"] #navbar #logo, [data-theme="dark"] nav #logo { filter: brightness(0) invert(1); }   /* black logo -> white */
[data-theme="dark"] #navbar a, [data-theme="dark"] .nav-link { color: var(--text) !important; }
[data-theme="dark"] #navbar a:hover, [data-theme="dark"] .nav-link:hover { color: var(--brand) !important; }
[data-theme="dark"] .burger-menu span { background: #fff !important; }
[data-theme="dark"] .mobile-menu { background: rgba(19,18,17,0.97) !important; border-top-color: var(--line) !important; }
[data-theme="dark"] .mobile-menu a { color: var(--text) !important; border-bottom-color: var(--line) !important; }

/* ---- Surfaces ---- */
[data-theme="dark"] .bg-custom-beige, [data-theme="dark"] [class*="bg-custom-beige"] { background: var(--ink) !important; }
[data-theme="dark"] .bg-white { background: var(--surface) !important; }
/* The account dropdown is a light popover (gray text on white) in both themes.
   Exempt it from the dark-theme remaps (bg-white -> surface, text-custom-dark -> light,
   nav link colors) so its background stays white and every item stays legible. */
[data-theme="dark"] #mzAcctMenu { background: #ffffff !important; }
[data-theme="dark"] #mzAcctMenu .text-custom-dark { color: #15120f !important; }
[data-theme="dark"] #mzAcctMenu a,
[data-theme="dark"] #mzAcctMenu button { color: #374151 !important; }
[data-theme="dark"] #mzAcctMenu .text-gray-500 { color: #6b7280 !important; }
[data-theme="dark"] .fixed.top-20 { background: rgba(23,17,12,0.66) !important; backdrop-filter: blur(10px); }

/* ---- Text ---- */
[data-theme="dark"] .text-custom-dark { color: var(--text) !important; }
[data-theme="dark"] .text-custom-gray { color: var(--text-muted) !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text); font-weight: 600; }
[data-theme="dark"] h3, [data-theme="dark"] h4 { font-weight: 500; }
[data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-gray-500 { color: var(--text-faint) !important; }

/* ---- Borders / dividers ---- */
[data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300, [data-theme="dark"] .border-t, [data-theme="dark"] .border-b { border-color: var(--line) !important; }

/* ---- Progress pill (Step X of 4) ---- */
[data-theme="dark"] .fixed.top-20 .bg-white { background: var(--surface-2) !important; }
[data-theme="dark"] .fixed.top-20 .border { border-color: var(--line) !important; }
[data-theme="dark"] .fixed.top-20 img { filter: brightness(0) invert(1); opacity: .8; }   /* back/close arrows -> white */

/* ---- Inputs ---- */
[data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea,
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea, [data-theme="dark"] select {
  background: var(--surface-2) !important; border: 1px solid var(--line) !important; color: var(--text) !important;
}
[data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] textarea:focus, [data-theme="dark"] input:focus, [data-theme="dark"] select:focus {
  border-color: var(--brand) !important; box-shadow: 0 0 0 2px var(--brand-line) !important; outline: none;
}
[data-theme="dark"] .form-input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-faint) !important; }
[data-theme="dark"] .form-input.bg-gray-50 { background: var(--surface) !important; }   /* locked email field */
/* native dropdown menu stays readable (OS-rendered) */
[data-theme="dark"] select option { color: #111 !important; background: #fff !important; }

/* ---- Cards / modals ---- */
[data-theme="dark"] .song-card, [data-theme="dark"] .tier-card { background: var(--surface) !important; border-color: var(--line) !important; }
[data-theme="dark"] .tier-card.selected { background: rgba(251, 119, 37,0.12) !important; border-color: var(--brand) !important; }
[data-theme="dark"] .modal-content { background: var(--surface) !important; color: var(--text) !important; }

/* ---- Buttons (preserve brand orange selection language) ---- */
[data-theme="dark"] .next-button-active, [data-theme="dark"] button.next-button-active { background: var(--brand) !important; color: #fff !important; box-shadow: 0 8px 30px rgba(251, 119, 37,0.3); }
[data-theme="dark"] .next-button-inactive, [data-theme="dark"] button.next-button-inactive { background: rgba(255,255,255,0.08) !important; color: var(--text-faint) !important; opacity: 1 !important; }
/* white CTA buttons on light pages -> ghost on dark */
[data-theme="dark"] .bg-white.text-custom-dark { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; }

/* ---- Logged-in card (step 3) ---- */
[data-theme="dark"] #loggedInCard .bg-white, [data-theme="dark"] #loggedInCard > div { background: var(--surface-2) !important; }

/* ---- Info callouts (step 4: testing-mode / non-refundable) -> dark tints ---- */
[data-theme="dark"] .bg-blue-50 { background: rgba(96,165,250,0.10) !important; }
[data-theme="dark"] .border-blue-200 { border-color: rgba(96,165,250,0.28) !important; }
[data-theme="dark"] .bg-blue-50 .text-blue-700, [data-theme="dark"] .bg-blue-50 .text-blue-800, [data-theme="dark"] .bg-blue-50 p, [data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800 { color: #9cc5ff !important; }
[data-theme="dark"] .bg-yellow-50 { background: rgba(251, 119, 37,0.10) !important; }
[data-theme="dark"] .border-yellow-200 { border-color: rgba(251, 119, 37,0.30) !important; }
[data-theme="dark"] .bg-yellow-50 .text-yellow-700, [data-theme="dark"] .bg-yellow-50 .text-yellow-800, [data-theme="dark"] .bg-yellow-50 p, [data-theme="dark"] .text-yellow-700, [data-theme="dark"] .text-yellow-800 { color: #f3b483 !important; }
[data-theme="dark"] .bg-green-50 { background: rgba(52,211,153,0.10) !important; }
[data-theme="dark"] .border-green-200 { border-color: rgba(52,211,153,0.28) !important; }
[data-theme="dark"] .bg-green-50 .text-green-700, [data-theme="dark"] .bg-green-50 .text-green-800, [data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800 { color: #7fe0b6 !important; }
[data-theme="dark"] .bg-red-50 { background: rgba(248,113,113,0.10) !important; }
[data-theme="dark"] .border-red-200 { border-color: rgba(248,113,113,0.30) !important; }
[data-theme="dark"] .bg-red-50 .text-red-700, [data-theme="dark"] .bg-red-50 .text-red-800, [data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-700 { color: #f6a6a6 !important; }

/* ---- Theme toggle button on the cream (light) wizard nav ---- */
.nav-theme-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9999px; background:transparent; border:1px solid rgba(43,33,26,0.18); color:#2b211a; cursor:pointer; opacity:.8; transition:opacity .2s, border-color .2s, transform .15s; }
.nav-theme-btn:hover { opacity:1; border-color: var(--brand); }
.nav-theme-btn:active { transform: scale(.92); }
.nav-theme-btn .hidden { display:none; }
[data-theme="dark"] .nav-theme-btn { border-color: rgba(255,255,255,0.18); color: var(--text); }

/* ---- Account / success pages: extra Tailwind surface mappings ---- */
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 { background: var(--surface-2) !important; }
[data-theme="dark"] .hover\:bg-gray-50:hover { background: var(--surface) !important; }
[data-theme="dark"] .text-custom-orange { color: var(--brand) !important; }
[data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-xl, [data-theme="dark"] .shadow-2xl { box-shadow: 0 24px 60px rgba(0,0,0,.5) !important; }

/* ============================================================================
   MOBILE SPACING — the flow wraps content in `.max-w-2xl ... px-8` (2rem) AND an
   inner `.p-8` card (2rem), so on phones ~4rem of side padding squeezes the card
   thin. Tighten both under 640px so the card uses the full screen width.
   ============================================================================ */
@media (max-width: 639px) {
  body .max-w-2xl.px-8, body .max-w-4xl.px-8, body .max-w-2xl.px-6 {
    padding-left: 1rem !important; padding-right: 1rem !important;
  }
  body .flow-reveal .p-8, body .flow-reveal .p-10 { padding: 1.25rem !important; }
  body .flow-reveal .p-6 { padding: 1.1rem !important; }
}

/* ============================================================================
   Load fade-in for the flow's main content — same easing/feel as the landing.
   Pure-CSS (always completes), gated by reduced-motion so content never hides
   when motion is off.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .flow-reveal > * { opacity: 0; transform: translateY(1.25rem); filter: blur(4px); animation: flowReveal .7s var(--ease) forwards; }
  .flow-reveal > *:nth-child(1) { animation-delay: .05s; }
  .flow-reveal > *:nth-child(2) { animation-delay: .14s; }
  .flow-reveal > *:nth-child(3) { animation-delay: .23s; }
  .flow-reveal > *:nth-child(4) { animation-delay: .32s; }
  .flow-reveal > *:nth-child(5) { animation-delay: .41s; }
  .flow-reveal > *:nth-child(6) { animation-delay: .50s; }
  .flow-reveal > *:nth-child(n+7) { animation-delay: .58s; }
}
@keyframes flowReveal { to { opacity: 1; transform: none; filter: none; } }