/* ==========================================================================
   quiz-bank-v1.css — answers-only Explore stage and portrait bullets
   --------------------------------------------------------------------------
   Loaded after experience-polish-v1.css. This layer restyles the Explore
   (generating) stage for the drawn question sequence: one centered quiz
   column with vertically stacked options, fact interludes between question
   groups, and a compact square progress chip in the top-right corner in
   place of the old status panel. It also renders the per-direction bullet
   lists under the Profile stage portraits.
   Section A — Explore stage frame and progress chip
   Section B — Quiz panel: single-column bank layout
   Section C — Stacked options
   Section D — Fact interlude step
   Section E — Ready message and privacy footnote
   Section F — Portrait direction bullets (Profile stage)
   ========================================================================== */

/* --- Section A: Explore stage frame and progress chip --- */

html body[data-flow-state="generating"] [data-screen="generating"].flow-screen {
  position: relative !important;
}

html body[data-flow-state="generating"] .generation-status-chip {
  position: absolute;
  top: clamp(2px, 0.8dvh, 12px);
  right: clamp(2px, 0.8vw, 12px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: clamp(48px, 5.4dvh, 64px);
  aspect-ratio: 1;
  border: 1px solid rgba(10, 186, 181, 0.4);
  border-radius: var(--radius, 0);
  background: rgba(6, 20, 21, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 6px 18px rgba(0, 0, 0, 0.35);
}

html body[data-flow-state="generating"] .generation-status-chip .generator-ring {
  width: calc(100% - 12px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
}

html body[data-flow-state="generating"] .generation-status-chip .generator-ring::before {
  inset: 3px !important;
}

html body[data-flow-state="generating"] .generation-status-chip .generator-ring::after {
  display: none !important;
}

html body[data-flow-state="generating"] .generation-status-chip .generator-core {
  width: 72%;
  height: 72%;
  display: grid;
  place-items: center;
}

html body[data-flow-state="generating"] .generation-status-chip .generator-core svg {
  width: 100%;
  height: 100%;
}

/* --- Section B: quiz panel becomes a single centered bank column --- */

html body[data-flow-state="generating"] .generating-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, auto) auto auto !important;
  grid-template-areas:
    "quiz"
    "ready"
    "privacy" !important;
  align-content: start !important;
  gap: clamp(10px, 1.4dvh, 16px) !important;
  width: min(100%, 760px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

html body[data-flow-state="generating"] .quiz-panel {
  grid-area: quiz !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto auto !important;
  grid-template-areas:
    "quiz-header"
    "quiz-status"
    "question"
    "fact"
    "answers" !important;
  align-content: start !important;
  gap: clamp(8px, 1.1dvh, 14px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(14px, 1.8dvh, 22px) clamp(16px, 2vw, 26px) !important;
}

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

html body[data-flow-state="generating"] .quiz-panel-header {
  grid-area: quiz-header !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 2px !important;
  text-align: left !important;
}

html body[data-flow-state="generating"] .quiz-title {
  white-space: normal !important;
  font-size: clamp(20px, 2vw, 30px) !important;
}

html body[data-flow-state="generating"] .quiz-subtitle {
  align-self: start !important;
  font-size: clamp(11px, 0.92vw, 14px) !important;
}

html body[data-flow-state="generating"] .quiz-question-column {
  grid-area: question !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  align-content: start !important;
  gap: 8px !important;
  padding-right: 0 !important;
  border-right: 0 !important;
}

html body[data-flow-state="generating"] .quiz-question {
  display: grid !important;
  align-content: start !important;
  min-height: 0 !important;
}

html body[data-flow-state="generating"] .quiz-question:empty {
  display: none !important;
}

html body[data-flow-state="generating"] .quiz-question strong {
  font-size: clamp(19px, 1.9vw, 28px) !important;
  line-height: 1.16 !important;
}

html body[data-flow-state="generating"] .quiz-panel.is-fact-step .quiz-privacy-note {
  display: none !important;
}

/* --- Section C: options are stacked, full width, three to five rows --- */

html body[data-flow-state="generating"] .quiz-options {
  grid-area: answers !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: start !important;
  align-self: start !important;
  gap: clamp(8px, 1dvh, 12px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html body[data-flow-state="generating"] .quiz-options .quiz-option {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1.1vw, 16px) !important;
  width: 100% !important;
  min-height: clamp(48px, 5.6dvh, 60px) !important;
  padding: clamp(10px, 1.2dvh, 14px) clamp(12px, 1.4vw, 18px) !important;
  text-align: left !important;
}

html body[data-flow-state="generating"] .quiz-options .quiz-option .quiz-option-index {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 26px;
  padding: 2px 4px;
  border: 1px solid rgba(10, 186, 181, 0.45);
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

html body[data-flow-state="generating"] .quiz-options .quiz-option.is-selected .quiz-option-index,
html body[data-flow-state="generating"] .quiz-options .quiz-option.is-pending .quiz-option-index {
  background: var(--cyan);
  color: #001012;
}

html body[data-flow-state="generating"] .quiz-options .quiz-option .quiz-option-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(14px, 1.2vw, 17px) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

/* --- Section D: fact interlude between question groups --- */

html body[data-flow-state="generating"] .quiz-fact-step {
  grid-area: fact !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "fact-category fact-source"
    "fact-title fact-title"
    "fact-body fact-body"
    "fact-continue fact-continue";
  gap: clamp(6px, 0.9dvh, 10px) clamp(10px, 1.2vw, 16px);
  padding: clamp(14px, 1.8dvh, 22px) clamp(14px, 1.6vw, 22px);
  border: 1px solid rgba(10, 186, 181, 0.4);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius, 0);
  background: linear-gradient(150deg, rgba(10, 186, 181, 0.14), rgba(5, 12, 13, 0.72));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html body[data-flow-state="generating"] .quiz-fact-step[hidden] {
  display: none !important;
}

html body[data-flow-state="generating"] .quiz-fact-step-category {
  grid-area: fact-category;
  align-self: center;
  color: var(--cyan);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html body[data-flow-state="generating"] .quiz-fact-step-title {
  grid-area: fact-title;
  font: 700 clamp(22px, 2.1vw, 32px)/1.1 var(--nanno-font-body, "Space Grotesk", sans-serif);
  color: #f2f7f7;
}

html body[data-flow-state="generating"] .quiz-fact-step-body {
  grid-area: fact-body;
  margin: 0;
  color: rgba(232, 240, 241, 0.82);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.45;
}

html body[data-flow-state="generating"] .quiz-fact-step-source {
  grid-area: fact-source;
  justify-self: end;
  align-self: center;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

html body[data-flow-state="generating"] .quiz-fact-continue {
  grid-area: fact-continue;
  justify-self: end;
  min-height: 44px !important;
  padding: 10px clamp(18px, 2vw, 28px) !important;
}

/* --- Section E: ready message and privacy footnote under the quiz --- */

/* The v4 layer visually hid the ready message (absolute 1px clip) and the
   modal-flow base absolutely positions .privacy-note far below the fold for
   the retired status panel. Both live inside .generating-layout now, as
   normal grid rows. */
html body[data-flow-state="generating"] .generation-ready-message {
  grid-area: ready !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  margin: 0 !important;
  padding: clamp(10px, 1.2dvh, 14px) clamp(12px, 1.4vw, 18px) !important;
  border: 1px solid rgba(10, 186, 181, 0.45) !important;
  border-left: 3px solid var(--cyan) !important;
  background: rgba(10, 186, 181, 0.1) !important;
  color: #eafffc !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  text-align: center !important;
}

html body[data-flow-state="generating"] .generation-ready-message[hidden] {
  display: none !important;
}

html body[data-flow-state="generating"] .generating-layout .privacy-note {
  grid-area: privacy !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: rgba(217, 226, 227, 0.62) !important;
  font-size: clamp(10px, 0.85vw, 12px) !important;
  text-align: center !important;
}

html body[data-flow-state="generating"] .generating-layout .privacy-note svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* Short viewports (landscape phones): everything compacts so the drawn
   question, its stacked options, and a fact interlude stay inside the
   stage; as a last resort the panel scrolls internally, never the stage. */
@media (max-height: 560px) {
  html body[data-flow-state="generating"] .quiz-panel {
    max-height: 100% !important;
    overflow-y: auto !important;
    gap: 5px !important;
    padding: 8px 12px !important;
  }

  html body[data-flow-state="generating"] .quiz-title {
    font-size: 17px !important;
  }

  html body[data-flow-state="generating"] .quiz-question strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  html body[data-flow-state="generating"] .quiz-options {
    gap: 5px !important;
  }

  html body[data-flow-state="generating"] .quiz-options .quiz-option {
    min-height: 32px !important;
    padding: 5px 10px !important;
  }

  html body[data-flow-state="generating"] .quiz-options .quiz-option .quiz-option-text {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html body[data-flow-state="generating"] .quiz-options .quiz-option .quiz-option-index {
    min-width: 20px;
    font-size: 9px;
  }

  html body[data-flow-state="generating"] .quiz-fact-step {
    gap: 4px 10px;
    padding: 8px 12px;
  }

  html body[data-flow-state="generating"] .quiz-fact-step-title {
    font-size: 17px;
  }

  html body[data-flow-state="generating"] .quiz-fact-step-body {
    font-size: 12px;
    line-height: 1.3;
  }

  html body[data-flow-state="generating"] .quiz-fact-continue {
    min-height: 34px !important;
    padding: 5px 16px !important;
  }

  html body[data-flow-state="generating"] .generating-layout {
    gap: 5px !important;
  }

  html body[data-flow-state="generating"] .generation-ready-message {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  html body[data-flow-state="generating"] .generating-layout .privacy-note {
    display: none !important;
  }
}

/* Kiosk portrait and phones: the single column already fits; keep the quiz
   from stretching row heights it no longer needs. */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] .generating-layout {
    grid-template-rows: minmax(0, auto) auto auto !important;
    align-content: start !important;
    height: auto !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start !important;
    height: auto !important;
  }

  html body[data-flow-state="generating"] .generation-status-chip {
    top: max(2px, env(safe-area-inset-top, 0px));
    right: max(2px, env(safe-area-inset-right, 0px));
    width: 48px;
  }
}

/* --- Section F: portrait direction bullets on the Profile stage --- */

html body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
  grid-template-rows: minmax(0, 1fr) clamp(108px, 14.5dvh, 152px) !important;
}

/* The card itself is laid out by earlier layers (flex column), so the caption
   band is equalized directly: every card reserves the same height whether its
   title wraps to one line or two. */
html body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  .portrait-discovery-caption {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  min-height: clamp(108px, 14.5dvh, 152px) !important;
}

.portrait-discovery-caption .portrait-direction-points {
  display: grid;
  gap: 3px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.portrait-discovery-caption .portrait-direction-points li {
  position: relative;
  padding-left: 14px;
  color: rgba(230, 240, 241, 0.8);
  font-size: clamp(10px, 0.92vw, 13px);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portrait-discovery-caption .portrait-direction-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 6px;
  height: 6px;
  background: var(--cyan);
}

/* --- Section G: the handoff card once every question is answered ---------
   2026-08-23. experience-polish-v1.css already collapses the panel here, but
   it loads before this file and it never hides the answered-progress bar, so
   a filled teal line survived on a card that says the quiz is finished. This
   section is the final word on the state: the panel becomes exactly as tall
   as its message, and the message carries what the visitor is actually
   waiting on rather than a sentence over an empty box.
   ---------------------------------------------------------------------- */

html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete {
  height: auto !important;
  min-height: 0 !important;
  align-self: center !important;
  align-content: center !important;
  width: min(100%, 460px) !important;
  margin-inline: auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "quiz-header"
    "question" !important;
  row-gap: clamp(10px, 1.4dvh, 16px) !important;
}

/* The answered bar, its caption row and the empty option grid all describe a
   quiz that is still running. None of them belong on the handoff. */
html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-progress-bar,
html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-progress-meta,
html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-options,
html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-controls,
html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-privacy-note,
html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-skip {
  display: none !important;
}

html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-question-column {
  height: auto !important;
  min-height: 0 !important;
  gap: 0 !important;
}

html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-question {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  gap: clamp(6px, 0.9dvh, 10px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding-block: clamp(4px, 0.8dvh, 10px) !important;
}

html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-question strong {
  font-size: clamp(17px, 2vw, 26px) !important;
  line-height: 1.18 !important;
  max-width: 24ch;
}

/* Answers saved reads as reassurance, so it stays quiet. */
html body[data-flow-state="generating"] .quiz-complete-saved {
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: 0.04em;
  color: rgba(232, 240, 241, 0.55);
}

/* The live count is the one thing on this card that changes, so it is the one
   thing that gets the accent. */
html body[data-flow-state="generating"] .quiz-complete-progress {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: clamp(2px, 0.6dvh, 6px);
  padding: 5px 12px;
  border: 1px solid rgba(10, 186, 181, 0.38);
  background: rgba(10, 186, 181, 0.09);
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nv-accent, #0abab5);
  font-variant-numeric: tabular-nums;
}

html body[data-flow-state="generating"] .quiz-complete-progress::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: nv-quiz-handoff-pulse 1.6s ease-in-out infinite;
}

html body[data-flow-state="generating"] .quiz-complete-progress.is-ready {
  border-color: rgba(10, 186, 181, 0.75);
  background: rgba(10, 186, 181, 0.16);
}

html body[data-flow-state="generating"] .quiz-complete-progress.is-ready::before {
  animation: none;
}

@keyframes nv-quiz-handoff-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-flow-state="generating"] .quiz-complete-progress::before {
    animation: none !important;
  }
}

/* Landscape phone: the card is already the whole stage, so it only needs to
   stop reserving the width it would take on a desktop. */
@media (orientation: landscape) and (max-height: 430px) {
  html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete {
    width: min(100%, 380px) !important;
    row-gap: 6px !important;
  }

  html body[data-flow-state="generating"] .quiz-panel.is-quiz-complete .quiz-question strong {
    font-size: 15px !important;
  }
}