/* ==========================================================================
   explore-stage-v1.css — Explore stage: centred question card + bottom
   loading bar — rebuilt 2026-08-26
   --------------------------------------------------------------------------
   The two-column rail layout was replaced by the earlier centred design the
   question reads better in. The stage now has three parts:

     1. the stage header (eyebrow, title, subtitle), centred at the top;
     2. one glass question card, centred in the space that remains, holding
        the quiz identity, the question, the fact interlude and the options;
     3. a slim loading bar fixed to the bottom of the viewport, carrying the
        generation ring, the portrait count, the answer progress and the
        privacy line — so the wait is always visible without stealing the
        centre of the screen.

   Loaded last (after nannovative-unify-v1.css and quiz-bank-v1.css), and each
   selector repeats a class or is scoped under
   html body[data-flow-state="generating"], so these rules outrank the
   !important layout rules in modal-flow.css, experience-layout-v*, and
   quiz-bank-v1.css without reaching for an id.

   Section A — Stage frame and header
   Section B — Centred question card
   Section C — Card contents: identity, question, fact, options
   Section D — Fixed bottom loading bar
   Section E — Handoff (quiz complete)
   Section F — Narrow screens (<= 720px)
   Section G — Short landscape
   Section H — Reduced motion
   ========================================================================== */

/* --- Section A: stage frame — a fixed three-row grid, no scrolling --- */

/* The whole stage is header / card / loading-bar inside exactly one viewport.
   Nothing scrolls: the card row gets minmax(0,1fr) and its contents are
   scaled (Sections B/C and the height tiers below) to always fit. */
html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
  --explore-stage-max: 680px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  justify-items: center !important;
  row-gap: clamp(8px, 1.4dvh, 16px) !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  padding: clamp(64px, 9dvh, 96px) clamp(16px, 4vw, 44px) 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* The Explore header used to be centred, narrower than the others and set in
   its own smaller type, with the rule under it doubling as a generation
   progress bar. All six stages now share one header block (Section F of
   stage-rails-v1.css) and the generation progress reads off the loading bar at
   the foot of the stage, which is where it belongs. Those overrides are gone
   rather than left to lose a specificity contest silently.

   The stage still caps its card at --explore-stage-max; only the header is
   full width now, like every other stage. */

/* --- Section B: the centred question card --- */

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-centered-layout.explore-centered-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: none !important;
  place-content: center !important;
  justify-items: center !important;
  gap: clamp(10px, 1.6dvh, 18px) !important;
  width: min(100%, var(--explore-stage-max)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-centered-layout .quiz-panel.explore-main.explore-main {
  grid-area: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
  align-content: start !important;
  justify-items: stretch !important;
  gap: clamp(8px, 1.4dvh, 16px) !important;
  width: 100% !important;
  max-width: var(--explore-stage-max) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: clamp(14px, 2.2dvh, 26px) clamp(18px, 4vw, 32px) !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--review-card-border, rgba(255, 255, 255, .12)) !important;
  border-radius: var(--radius, 0) !important;
  background: var(--review-surface, rgba(10, 16, 17, .72)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03), 0 28px 60px rgba(0, 0, 0, .34) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.explore-main[hidden] {
  display: none !important;
}

/* quiz-bank-v1.css pins every child to a named area (quiz-header, question,
   fact, answers) with !important. Those names do not exist in this single-
   column card; leaving any of them would drop children into implicit
   overlapping tracks — exactly the collapsed header seen on 2026-08-26.
   Every direct child is therefore reset to normal flow in DOM order. */
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.explore-main > * {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

/* The same defense one level up. quiz-bank pins the layout's own children too
   (the ready message carries grid-area: ready !important), and the moment
   "Your portraits are ready" unhides, that undefined area spawned implicit
   tracks and collapsed the card to a sliver — reproduced live on 35fe1ab4 and
   fixed by exactly this reset, verified in the browser. */
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-centered-layout.explore-centered-layout > * {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

/* --- Section C: card contents --- */

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-panel-header.quiz-panel-header {
  grid-area: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  text-align: left !important;
}

/* The Nannovative signature divider: a gradient rule under the heading,
   as on the "Innovative At Nanoscale" card of the parent site. */
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-panel-header::after {
  content: "" !important;
  display: block !important;
  height: 3px !important;
  margin-top: clamp(8px, 1.2dvh, 14px) !important;
  background: linear-gradient(90deg, var(--nv-accent, #0abab5), rgba(10, 186, 181, 0)) !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-kicker.quiz-kicker {
  margin: 0 !important;
  color: var(--nv-accent, #0abab5) !important;
  font-family: var(--nv-font-body, "Space Grotesk", sans-serif) !important;
  font-size: clamp(10px, 1.5vw, 12px) !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-title.quiz-title {
  margin: 2px 0 0 !important;
  color: #fff !important;
  font-family: var(--nv-font-display, "Bayon", "Arial Narrow", sans-serif) !important;
  font-size: clamp(20px, 4.4vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-subtitle.quiz-subtitle {
  display: block !important;
  margin: 3px 0 0 !important;
  color: rgba(232, 240, 241, .62) !important;
  font-family: var(--nv-font-body, "Space Grotesk", sans-serif) !important;
  font-size: clamp(11px, 2.4vw, 13px) !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-status {
  margin: 0 !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-question-column {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-question {
  display: block !important;
  min-height: 0 !important;
  text-align: left !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-question strong {
  display: block !important;
  color: #fff !important;
  font-family: var(--nv-font-display, "Bayon", "Arial Narrow", sans-serif) !important;
  font-size: clamp(20px, 3.8dvh, 34px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-question > span {
  display: block !important;
  margin-top: 6px !important;
  color: rgba(232, 240, 241, .6) !important;
  font-family: var(--nv-font-body, "Space Grotesk", sans-serif) !important;
  font-size: clamp(12px, 2.6vw, 15px) !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-options.quiz-options {
  grid-area: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  /* The options own the card's flexible row and divide it between themselves.
     Sized by content instead, a four-option question needed 215px in a 159px
     row and the fourth answer was simply cut off below the card - the exact
     thing the questions stage must never do. Dividing the row means the
     answers get tighter on a short screen and never disappear. */
  /* quiz-bank-v1.css declares grid-template-rows on this container, which left
     the first two answers content-sized and squeezed the rest to nothing. The
     template is cleared so every answer is an equal auto row. */
  grid-template-rows: none !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(5px, 1.1dvh, 11px) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-options .quiz-option {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-height: 0 !important;
  padding: clamp(4px, 1.1dvh, 12px) clamp(12px, 1.6vw, 16px) !important;
  font-size: clamp(13px, 1.9dvh, 16px) !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
}

/* A long answer wraps to two lines and stops there, so one wordy option cannot
   squeeze the other three. */
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-options .quiz-option .quiz-option-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* The card no longer repeats the stage. Since the band above it gained the
   eyebrow, heading and explanatory line that all six stages now carry, the
   card's own subtitle said the same thing twice and cost the answers a row of
   height. The card keeps its kicker and heading; the sentence goes. */
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-subtitle.quiz-subtitle {
  display: none !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main .quiz-controls {
  display: flex !important;
  justify-content: flex-end !important;
}

/* --- Section D: the loading bar — the stage grid's last row, ID-locked --- */

/* Earlier layers pin #generationStatusChip to a viewport corner with
   !important class selectors. Every rule here is scoped by ID, which outranks
   any class chain those layers can produce, so the bar cannot be hijacked. */
html body[data-flow-state="generating"] #exploreLoadingBar {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(12px, 3vw, 28px) !important;
  width: auto !important;
  justify-self: stretch !important;
  /* The bar bleeds to the stage edges. --stage-gutter is the single gutter
     every stage now pads with, so pulling back exactly that lands the bar
     flush with the frame instead of a few pixels past it. */
  margin-block: 0 !important;
  margin-inline: calc(-1 * var(--stage-gutter, 4vw)) !important;
  padding:
    clamp(8px, 1.2dvh, 13px)
    calc(var(--stage-gutter, 4vw) + clamp(0px, 1vw, 10px))
    calc(clamp(8px, 1.2dvh, 13px) + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(10, 186, 181, .28) !important;
  background: linear-gradient(180deg, rgba(4, 12, 13, .92), rgba(3, 6, 6, .97)) !important;
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .38) !important;
  box-sizing: border-box !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: -1px !important;
  height: 2px !important;
  width: var(--explore-generation-fill, 0%) !important;
  background: linear-gradient(90deg, #0abab5, #089f9a) !important;
  transition: width .5s ease !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar #generationStatusChip {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 10px !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar #loadingRingProgress {
  position: relative !important;
  width: clamp(28px, 4.4dvh, 40px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar #loadingRingProgress::before {
  inset: 4px !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar #generationPortraitCount {
  position: static !important;
  display: block !important;
  color: rgba(232, 240, 241, .82) !important;
  font-family: var(--nv-font-body, "Space Grotesk", sans-serif) !important;
  font-size: clamp(10px, 1.6dvh, 12px) !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar .explore-rail-progress {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 440px !important;
  margin-inline: auto !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar .quiz-progress-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(232, 240, 241, .62) !important;
  font-family: var(--nv-font-body, "Space Grotesk", sans-serif) !important;
  font-size: clamp(10px, 1.6dvh, 12px) !important;
  letter-spacing: .04em !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar .quiz-progress-bar {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 3px !important;
  margin: 0 !important;
  background: rgba(10, 186, 181, .16) !important;
  overflow: hidden !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar .quiz-progress-bar > span {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #0abab5, #089f9a) !important;
  transition: width .35s ease !important;
}

html body[data-flow-state="generating"] #exploreLoadingBar #quizPrivacyNote {
  position: static !important;
  display: block !important;
  justify-self: end !important;
  max-width: 26ch !important;
  margin: 0 !important;
  color: rgba(217, 226, 227, .5) !important;
  font-family: var(--nv-font-body, "Space Grotesk", sans-serif) !important;
  font-size: clamp(9px, 1.4dvh, 11px) !important;
  line-height: 1.4 !important;
  text-align: right !important;
}

/* --- Section E: handoff (quiz complete) --- */

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.explore-main.is-quiz-complete {
  grid-template-rows: none !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.is-quiz-complete .quiz-question {
  display: grid !important;
  justify-items: center !important;
  gap: clamp(8px, 1.1dvh, 14px) !important;
  text-align: center !important;
  padding-block: clamp(6px, 1.2dvh, 16px) !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.explore-main.is-quiz-complete .quiz-panel-header,
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.explore-main.is-quiz-complete .quiz-options.quiz-options,
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.explore-main.is-quiz-complete .quiz-controls,
html body[data-flow-state="generating"]
  [data-screen="generating"]
  .explore-main.explore-main.is-quiz-complete .quiz-fact-step {
  display: none !important;
}

html body[data-flow-state="generating"]
  [data-screen="generating"]
  .generation-ready-message.generation-ready-message {
  width: 100% !important;
  max-width: var(--explore-stage-max) !important;
  margin: 0 auto !important;
  padding: 10px 14px !important;
  border-left: 3px solid var(--cyan, #0abab5) !important;
  background: rgba(10, 186, 181, .1) !important;
  color: #e9ffff !important;
  font: 700 clamp(12px, 2.4vw, 14px)/1.35 var(--nv-font-body, "Space Grotesk", sans-serif) !important;
  text-align: left !important;
}

/* --- Section F: narrow screens --- */

@media (max-width: 720px) {
  html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
    padding-top: clamp(56px, 9dvh, 84px) !important;
    padding-inline: clamp(12px, 4vw, 20px) !important;
  }

  html body[data-flow-state="generating"] #exploreLoadingBar {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-inline: clamp(12px, 5vw, 20px) !important;
  }

  /* The privacy line repeats the stage's promise; a handset bar has no room. */
  html body[data-flow-state="generating"] #exploreLoadingBar #quizPrivacyNote {
    display: none !important;
  }

  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-main .quiz-question strong {
    font-size: clamp(19px, 5.6vw, 26px) !important;
  }
}

/* --- Section G: height tiers — the card must always fit, so short screens
   trade decoration for room instead of scrolling --- */

@media (max-height: 860px) {
  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-stage-header p.flow-subtitle.flow-subtitle {
    display: none !important;
  }

  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-centered-layout .quiz-panel.explore-main.explore-main {
    gap: clamp(8px, 1.2dvh, 14px) !important;
    padding: clamp(12px, 1.8dvh, 22px) clamp(16px, 3vw, 28px) !important;
  }
}

@media (max-height: 760px) {
  html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
    padding-top: clamp(48px, 7dvh, 64px) !important;
    row-gap: 8px !important;
  }

  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-main .quiz-subtitle.quiz-subtitle {
    display: none !important;
  }

  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-main .quiz-question strong {
    font-size: clamp(18px, 3.4dvh, 28px) !important;
  }
}

@media (max-height: 620px) {
  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-main .quiz-panel-header.quiz-panel-header {
    display: none !important;
  }
}

/* --- Section H: reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-stage-header h1.flow-title.flow-title::after,
  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-loading-bar::before,
  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-loading-bar .quiz-progress-bar > span {
    transition: none !important;
  }
}

/* On a landscape phone the stage has about 310px between the band and the
   loading bar, so the answers give up the last of their padding rather than
   losing a line. */
@media (max-height: 480px) {
  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-main .quiz-options.quiz-options {
    gap: 4px !important;
  }

  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-main .quiz-options .quiz-option {
    padding-block: 2px !important;
    font-size: clamp(11px, 3.2dvh, 14px) !important;
  }

  html body[data-flow-state="generating"]
    [data-screen="generating"]
    .explore-main .quiz-options .quiz-option .quiz-option-text {
    -webkit-line-clamp: 1 !important;
  }
}