/* SZN Quiz — SHARED page-flow SHELL (card 103; layout extracted from card 101).
 *
 * ONE JOB: the page-flow app shell that is now shared by BOTH the standalone quiz
 * (quiz.sznpouches.com) AND the popup embed (body[data-embed="1"]). Card 103 unifies
 * the in-popup quiz with the standalone design: content flows (the page/iframe scrolls),
 * a FIXED bottom nav bar (quiet centered Back/Next) drives navigation, the intro text is
 * centered, and the spacing is breathable. Every selector here is BARE (unscoped) on
 * purpose — it must apply in both modes.
 *
 * The ONE piece that stays standalone-only is the fixed OPAQUE background layer
 * (body:not([data-embed]) ::before), which lives in quiz-standalone.css so it never
 * paints over the popup's own floating-cans image (bare-chrome transparency, Preserve #1).
 * Popup-specific deltas (transparency, mobile full-bleed, full-height frame, a stronger
 * bar tint over the transparent iframe) live in embed.css. No new fonts/colors.
 */

/* ---- page flow: main is a flex column that FILLS the frame; the content column is
 * centered with margin:auto so a short step sits centered with NO scrollbar, while a step
 * that genuinely overflows (the result) stays scrollable FROM THE TOP — the page scrolls
 * (standalone) / the iframe scrolls (popup), nothing clipped. justify-content is
 * flex-start (NOT center): margin:auto centers when there is room and collapses to 0 when
 * the card overflows, so flex-start keeps the tall result's top reachable. Top padding
 * clears the fixed #progress; bottom padding clears the fixed #navbar. ---- */
main {
  display: flex; flex-direction: column; flex: 1 0 auto;
  justify-content: flex-start; align-items: stretch;
  padding: 72px 24px calc(96px + var(--s3));
}
/* #app is the render root quiz.js appends each step's .card into. It sits BETWEEN main
 * and .card, so main's flex layout alone can't center .card — make #app the centering
 * flex column: it grows to fill main, and its child .card centers vertically +
 * horizontally via margin:auto when it fits, collapsing (top reachable, scroll-from-top)
 * when a tall step (6-option question, the result) overflows the frame. Both modes. */
#app {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%;
}
.card {
  width: 100%; max-width: 600px; margin: auto;
}

/* ---- breathable spacing rhythm (systematic, via the --s* tokens) ---- */
.options { gap: 12px; margin-top: var(--s4); }
.question .h2 { margin-bottom: var(--s2); }
.gate-form { margin-top: var(--s4); gap: 14px; }
/* Marketing opt-in checkbox under the email field (card 794). Resets the
 * `.gate-form input` field styling (index.html) for the checkbox itself. */
.gate-form .gate-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: left; cursor: pointer; }
.gate-form .gate-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; border-radius: 4px; box-shadow: none; background: none; accent-color: var(--ink, #000); }

/* ---- interstitial: a centered "message from the brand" bubble ---- */
.interstitial {
  text-align: center;
  background: var(--paper-2);
  border-radius: 24px;
  padding: 34px 32px;
  max-width: 500px; margin-left: auto; margin-right: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  position: relative;
}
/* chat-bubble tail, bottom-left (received-message style) */
.interstitial::after {
  content: ""; position: absolute; left: 26px; bottom: -6px;
  width: 22px; height: 22px; background: var(--paper-2);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-bottom-left-radius: 6px;
}
.interstitial .eyebrow { margin-bottom: var(--s1); }
.interstitial .lede { margin-left: auto; margin-right: auto; max-width: 40ch; }

/* ---- intro: centered text + centered column ---- */
.intro { text-align: center; }
.intro .lede { margin-left: auto; margin-right: auto; }
.intro-hero { justify-content: center; }

/* ---- in-content step primary buttons are REPLACED by the fixed bottom bar: hide them.
 * The question .nav row and the intro/interstitial/gate primary CTA all route through
 * #navbar's Next. The result buy CTA (.bb-cta) is NOT hidden — it stays in the report
 * content. The gate "Skip for now" (.gate > .btn-back) stays visible. ---- */
.intro > .btn-primary,
.interstitial > .btn-primary,
.gate-form > .btn-primary,
.question > .nav { display: none; }

/* ---- fixed bottom nav bar. Transparent + subtle backdrop blur over a faint tint so
 * labels stay legible over scrolling content; NO border line (over the popup's background
 * image a border read as an odd out-of-palette color — the translucent tint + blur, and
 * embed.css's stronger tint, already separate the bar from content); Back/Next centered as
 * a group. NEITHER is highlighted — both are quiet ghost/text controls of matching weight
 * (no filled Apex/ink CTA). Popup embed layers a stronger tint on top (embed.css). ---- */
#navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 245, 240, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#navbar.is-hidden { display: none; }
#navbar button {
  font-family: var(--sans); font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; border-radius: var(--btn-radius);
  padding: 12px 26px; background: transparent; color: var(--ink);
  border: 1px solid var(--line); transition: border-color .15s ease, opacity .15s ease;
}
#navbar button:hover { border-color: #fff; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1); }
#navbar button:disabled { opacity: .4; cursor: not-allowed; }
#navbar .nav-back { border-color: transparent; color: var(--muted); }
#navbar .nav-back:hover { color: var(--ink); }
#navbar .nav-back.is-hidden { display: none; }
#navbar .nav-next.is-hidden { display: none; }
body[data-theme="dark"] #navbar { background: rgba(17, 17, 18, .72); }
body[data-theme="dark"] #navbar button { color: var(--paper); }