/*
 * Nannovative experience polish layer (v1).
 *
 * This file is intentionally loaded LAST, after experience-layout-v4.css, and
 * is the single place for new presentation fixes. Earlier layout layers
 * (v2/v3/v4, visual-alignment-v1) are frozen contracts — do not edit them.
 *
 * Authority: https://nannovative.com SCSS source (variables/base/home) and the
 * canonical Nannovative tokens. Presentation only: the protected six-stage
 * flow, capture, upload, Gemini, delivery and persistence logic are untouched.
 *
 * Sections:
 *   A — Design tokens & button system (Phase 0)
 *   B — Header, logo & progress stepper (Phase 1)
 *   C — Capture & Explore composition (Phase 2)
 *   D — Profile & Advice composition (Phase 3)
 *   E — Delivery & Achievement composition (Phase 4)
 */

/* ============================================================= */
/* Section A — Design tokens & button system                     */
/* ============================================================= */

:root {
  /* Reference gradient primary from nannovative.com base.scss. */
  --np-primary-gradient: linear-gradient(135deg, #0abab5, #089f9a);
  --np-primary-gradient-hover: linear-gradient(135deg, #089f9a, #0abab5);
  --np-disabled-bg: #161d1f;
  --np-disabled-border: rgba(255, 255, 255, 0.14);
  --np-disabled-text: rgba(255, 255, 255, 0.38);
  --np-hairline: rgba(255, 255, 255, 0.14);
}

/* Primary CTA: gradient fill exactly like the main site. */
.nv-btn-primary,
.video-entry-button:not(.video-entry-button-secondary),
.lab-hero-action-primary,
.portrait-dialog .primary-button,
.portrait-dialog .nv-flow-button-primary {
  border: 2px solid #0abab5;
  background: var(--np-primary-gradient);
  color: #001012;
}

.nv-btn-primary:hover,
.video-entry-button:not(.video-entry-button-secondary):hover,
.lab-hero-action-primary:hover,
.portrait-dialog .primary-button:hover:not(:disabled),
.portrait-dialog .nv-flow-button-primary:hover:not(:disabled) {
  border-color: #0abab5;
  background: var(--np-primary-gradient-hover);
  color: #001012;
}

/* Disabled state must read as OFF, not as a darker primary. */
.portrait-dialog .primary-button:disabled,
.portrait-dialog .secondary-button:disabled,
.portrait-dialog .nv-flow-button:disabled {
  border-color: var(--np-disabled-border);
  background: var(--np-disabled-bg);
  color: var(--np-disabled-text);
  opacity: 1;
}

.portrait-dialog .primary-button:disabled svg,
.portrait-dialog .secondary-button:disabled svg {
  opacity: 0.55;
}

/* Programmatic heading focus (stage a11y) must not draw a focus box. */
.portrait-dialog :is(h1, h2, .flow-title):focus {
  outline: none;
}

.portrait-dialog :is(h1, h2, .flow-title):focus-visible {
  outline: none;
}

/* One logo size everywhere: landing, hero console and flow header all
   resolve from the same admin-managed token. */
.video-entry-logo,
.lab-hero-logo {
  width: var(--nanno-logo-size-desktop, 210px) !important;
  max-width: min(46vw, 300px) !important;
  height: auto;
}

@media (max-width: 760px) {
  .video-entry-logo,
  .lab-hero-logo {
    width: var(--nanno-logo-size-mobile, 180px) !important;
  }
}

/* Landing hero console: center the composition vertically so tall
   viewports do not leave a dead band under the content. */
.lab-hero-console.lab-hero-final {
  display: grid;
  align-content: center;
}

/* The TAP TO START chip used to hang off the phone's left edge, over the
   subject — center it on the phone screen instead. */
.lab-hero-phone-hotspot::before {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.lab-hero-phone-hotspot:hover::before,
.lab-hero-phone-hotspot:focus-visible::before {
  transform: translate(-50%, -50%) scale(1.035) !important;
}

@media (max-width: 899px) {
  .lab-hero-phone-hotspot::before {
    left: 50% !important;
  }
}

/* ============================================================= */
/* Section B — Header, logo & progress stepper                   */
/* ============================================================= */

/* Remove the stray short rule + gradient block behind the logo. */
body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  ) .modal-header {
  border-bottom: 0;
  background: transparent;
}

/* Track fix: the absolutely positioned <li> was resolving its containing
   block against a single auto-placed 6-column cell, wrapping into a phantom
   second row under step 1 and shrinking the progress fill to ~150px. Pin it
   across the whole stepper area instead. */
.experience-stepper {
  position: relative !important;
}

.experience-stepper-track {
  position: absolute !important;
  display: block !important;
  grid-area: 1 / 1 / 2 / -1;
  top: 15px !important;
  left: calc(100% / 12 + clamp(12px, 2vw, 26px)) !important;
  right: calc(100% / 12 + clamp(12px, 2vw, 26px)) !important;
  height: 2px;
  margin: 0 !important;
  background: var(--np-hairline);
}

.experience-stepper-track span {
  /* The mobile label-hiding rule (li span:last-child) must never hide
     the progress fill itself, and the fill is hard-anchored to the
     track's left edge. */
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto;
  background: var(--nv-accent);
  box-shadow: 0 0 12px rgba(10, 186, 181, 0.45);
}

@media (max-width: 760px) {
  .experience-stepper-track {
    top: 12px !important;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  .experience-stepper-track {
    top: 12px !important;
  }
}

/* Marker states: upcoming (muted ring) / active (filled) / complete (check). */
.experience-stepper-marker {
  position: relative;
  z-index: 1;
  font-weight: 600;
}

.experience-stepper li.is-complete .experience-stepper-marker {
  border-color: var(--nv-accent);
  background: var(--nv-bg-deep);
  color: transparent;
}

.experience-stepper li.is-complete .experience-stepper-marker::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--nv-accent);
  font-size: 12px;
  line-height: 1;
}

.experience-stepper li span:last-child {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================= */
/* Section C — Capture & Explore composition                     */
/* ============================================================= */

/* Capture (desktop split layout): the camera column spans every left-side
   row, so its extra height used to be distributed BETWEEN the copy rows,
   tearing the left column apart. Route that surplus into two empty flex
   rows instead so the copy reads as one group. */
@media (min-width: 761px) and (orientation: landscape) {
  html body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr) !important;
    grid-template-areas:
      ". camera"
      "title camera"
      "subtitle camera"
      "status camera"
      "actions camera" !important;
    align-content: stretch !important;
    align-items: start !important;
    row-gap: clamp(10px, 1.8dvh, 18px) !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
    grid-row: 1 / 7 !important;
    grid-column: 2 !important;
    align-self: center !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
    align-self: end !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .screen-actions {
    align-self: start !important;
    margin-top: clamp(4px, 1dvh, 10px) !important;
  }
}

/* The rule + padding above the buttons floated in space; the centered
   group no longer needs a divider. */
body[data-flow-state="capture"] .screen-actions {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep the privacy note quiet and aligned with the buttons. */
body[data-flow-state="capture"] .secure-processing-note {
  text-align: left;
}

/* Explore: the title had a doubled word gap (span margin + injected
   space) — keep exactly one non-collapsing space between the two parts. */
html body[data-flow-state="generating"] [data-screen="generating"] .flow-title span {
  margin-right: 0 !important;
}

html body[data-flow-state="generating"] [data-screen="generating"] .flow-title span::after {
  content: "\00a0" !important;
}

/* Explore hierarchy: the quiz is the visitor's task and reads as the hero
   panel; the fact card and generation status support it in a side rail.
   Fixed panel heights are replaced with a stage-filling grid. */
@media (min-width: 761px) and (orientation: landscape) {
  html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    justify-items: center !important;
    row-gap: clamp(6px, 1dvh, 12px) !important;
  }

  html body[data-flow-state="generating"] .generating-layout {
    grid-template-columns: minmax(0, 1.58fr) minmax(300px, .82fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "quiz fact"
      "quiz progress" !important;
    align-content: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    grid-area: quiz !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card {
    grid-area: fact !important;
    align-self: stretch !important;
    height: 100% !important;
    max-height: none !important;
    align-content: center !important;
  }

  /* Compact vertical checklist in the side rail. */
  html body[data-flow-state="generating"] .generation-status-panel {
    grid-area: progress !important;
    display: grid !important;
    grid-template-columns: clamp(52px, 4.6vw, 68px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    align-items: center !important;
    gap: 6px 14px !important;
    padding: clamp(10px, 1.4vw, 16px) !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  html body[data-flow-state="generating"] .generator-ring {
    width: clamp(48px, 4.4vw, 64px) !important;
    height: clamp(48px, 4.4vw, 64px) !important;
  }

  html body[data-flow-state="generating"] .generation-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }

  html body[data-flow-state="generating"] .generation-list::before,
  html body[data-flow-state="generating"] .generation-item::before,
  html body[data-flow-state="generating"] .generation-item::after {
    display: none !important;
  }

  html body[data-flow-state="generating"] .generation-item {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 22px !important;
    padding: 0 !important;
    font-size: clamp(10px, .85vw, 12px) !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel .privacy-note,
  html body[data-flow-state="generating"] .generation-ready-message {
    grid-column: 1 / -1 !important;
  }

  /* Quiz header reads as one stacked block, not three inline voices. */
  html body[data-flow-state="generating"] .quiz-panel-header {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 3px !important;
  }

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

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

/* One heading voice inside Explore: display face, uppercase, like every
   sibling panel headline. */
html body[data-flow-state="generating"] .quiz-title {
  font-family: var(--nv-font-display) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase;
}

html body[data-flow-state="generating"] .quiz-panel {
  border-color: var(--nv-accent-30) !important;
}

/* Kiosk portrait / mobile: fill the stage instead of floating mid-air. */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  html body[data-flow-state="generating"] [data-screen="generating"] .flow-subtitle {
    margin-bottom: clamp(6px, 1.2dvh, 14px) !important;
  }

  html body[data-flow-state="generating"] .generating-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(300px, min(46dvh, 560px)) auto !important;
    grid-template-areas:
      "fact"
      "quiz"
      "progress" !important;
    align-content: center !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(8px, 1.4dvh, 16px) !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: stretch !important;
  }

  html body[data-flow-state="generating"] .quiz-question-column {
    align-content: center !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card {
    max-height: none !important;
  }
}

/* The "portraits ready" prompt exists in the flow but was visually
   suppressed; restore it as the loudest signal on the stage. */
html body[data-flow-state="generating"] .generation-ready-message {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  clip: auto !important;
  border-left: 3px solid var(--nv-accent) !important;
  background: var(--nv-accent-10) !important;
  color: var(--nv-text) !important;
  font-size: clamp(11px, .95vw, 14px) !important;
  font-weight: 600;
  line-height: 1.4 !important;
  text-align: left !important;
}

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

@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] .generation-ready-message {
    display: block !important;
    grid-column: 1 / -1;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

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

/* ============================================================= */
/* Section D — Profile & Advice composition                      */
/* ============================================================= */

/* Portrait selection affordance: the radio mark must read as a control. */
[data-screen="portrait-discovery"] .selection-mark {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(5, 5, 5, .9);
  color: rgba(255, 255, 255, .3);
}

[data-screen="portrait-discovery"] .portrait-discovery-card:hover .selection-mark {
  border-color: var(--nv-accent);
  color: var(--nv-accent-30);
}

[data-screen="portrait-discovery"] .is-selected .selection-mark {
  border-color: var(--nv-accent);
  background: var(--nv-accent);
  color: var(--nv-bg-deep);
}

/* Profile summary panel: center the rows, no hollow band. */
body[data-flow-state="portrait-discovery"] .profile-report {
  align-content: center !important;
}

/* Action rows: one convention everywhere — secondary left, primary right,
   both on the same baseline; stack with primary first on narrow screens. */
@media (max-width: 480px) {
  body[data-flow-state="portrait-discovery"] .result-review-actions,
  body[data-flow-state="personalized-advice"] .advice-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-flow-state="portrait-discovery"] #openSendDetails,
  body[data-flow-state="personalized-advice"] #adviceContinue {
    grid-column: 1 !important;
    grid-row: 1;
  }

  body[data-flow-state="portrait-discovery"] #retakePhoto,
  body[data-flow-state="personalized-advice"] #backToPortraits {
    grid-column: 1 !important;
    grid-row: 2;
    justify-self: stretch !important;
  }
}

/* Advice: one full-height row — panels fill the stage, no dead band. */
@media (min-width: 761px) and (orientation: landscape) {
  body[data-flow-state="personalized-advice"] .advice-stage-layout {
    grid-template-rows: minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  body[data-flow-state="personalized-advice"] .advice-stage-main {
    height: 100% !important;
  }

  body[data-flow-state="personalized-advice"] :is(.advice-loading, .advice-error) {
    height: 100% !important;
    align-content: center !important;
  }

  body[data-flow-state="personalized-advice"] .advice-content {
    min-height: 100%;
  }
}

/* Never clip the generated reflection: readable sizes plus a quiet
   internal scroll only if content exceeds the stage. */
body[data-flow-state="personalized-advice"] .advice-content {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--nv-accent-30) transparent;
}

/* The focused next steps are core advice content — never drop them on
   portrait/mobile; the panel scrolls instead. */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="personalized-advice"] .advice-next-steps {
    display: grid !important;
  }

  /* Balance the portrait stack: slimmer image band, centered wait state,
     and one clear action column (primary first). */
  html body[data-flow-state="personalized-advice"] .advice-stage-layout {
    grid-template-rows: minmax(150px, 30%) minmax(0, 1fr) !important;
  }

  html body[data-flow-state="personalized-advice"] :is(.advice-loading, .advice-error) {
    height: 100% !important;
    align-content: center !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-actions,
  html body[data-flow-state="portrait-discovery"] .result-review-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body[data-flow-state="personalized-advice"] #adviceContinue,
  html body[data-flow-state="portrait-discovery"] #openSendDetails {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  html body[data-flow-state="personalized-advice"] #backToPortraits,
  html body[data-flow-state="portrait-discovery"] #retakePhoto {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
}

body[data-flow-state="personalized-advice"] .advice-content :is(p, li) {
  font-size: clamp(12px, 1vw, 15px) !important;
  line-height: 1.45 !important;
}

/* ============================================================= */
/* Section E — Delivery & Achievement composition                */
/* ============================================================= */

/* Delivery header follows the same centered pattern as every other stage. */
body[data-flow-state="delivery"] .delivery-stage-header {
  justify-items: center !important;
  max-width: 820px;
  margin-inline: auto !important;
  text-align: center !important;
}

body[data-flow-state="delivery"] .delivery-stage-header .flow-title {
  text-align: center !important;
}

/* Inputs accept RTL names gracefully. */
body[data-flow-state="delivery"] .field-group input {
  unicode-bidi: plaintext;
}

/* Consent rows are checkboxes, not buttons: strip the filled-panel look. */
body[data-flow-state="delivery"] .terms-row {
  border: 1px solid var(--nv-border) !important;
  background: transparent !important;
}

/* The kiosk flow moves forward; the stepper already handles returning. */
body[data-flow-state="delivery"] #closeSendDetails {
  display: none !important;
}

/* Delivery summary must never clip its last lines: slimmer image band and
   a quiet internal scroll as the safety valve. */
body[data-flow-state="delivery"] .delivery-summary {
  grid-template-rows: minmax(110px, 34%) minmax(0, 1fr) !important;
}

body[data-flow-state="delivery"] .delivery-summary-copy {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: var(--nv-accent-30) transparent;
}

/* Achievement: side-by-side composition on wide stages, portrait intact. */
@media (min-width: 761px) and (orientation: landscape) {
  body[data-flow-state="achievement"] .achievement-stage-layout {
    grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body[data-flow-state="achievement"] .achievement-portrait-wrap {
    align-self: start;
    height: auto !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 10 !important;
  }

  body[data-flow-state="achievement"] .achievement-success-details {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: clamp(8px, 1.4dvh, 14px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--nv-accent-30) transparent;
  }
}

/* Remove the floating caption bar that collided with the headline; the
   eyebrow already announces completion. */
body[data-flow-state="achievement"] .achievement-portrait-wrap::after {
  content: none !important;
}

/* One email status line is enough — the delivery-state block keeps the
   retry affordance, so the duplicate callout stays hidden. */
body[data-flow-state="achievement"] #achievementMessage {
  display: none !important;
}

/* The headline breathes across the full column. */
body[data-flow-state="achievement"] .achievement-success h1 {
  max-width: none !important;
  font-size: clamp(30px, 3.4vw, 48px) !important;
}

/* Signals and steps stay readable instead of collapsing to hairlines. */
body[data-flow-state="achievement"] .achievement-success-signals article {
  min-height: 58px;
  align-content: center;
}

body[data-flow-state="achievement"] .achievement-success .success-close-button {
  width: min(100%, 420px) !important;
  justify-self: start;
}

@media (max-width: 760px), (orientation: portrait) {
  body[data-flow-state="achievement"] .achievement-success .success-close-button {
    width: 100% !important;
  }

  /* Portrait stages read as one centered composition instead of a small
     block pinned to the top of a tall stage. */
  html body[data-flow-state="delivery"] .delivery-stage-layout {
    grid-template-rows: auto auto !important;
    align-content: center !important;
    height: 100% !important;
    gap: clamp(10px, 1.6dvh, 18px) !important;
  }

  html body[data-flow-state="delivery"] .delivery-summary {
    grid-template-rows: auto !important;
    height: auto !important;
  }

  html body[data-flow-state="delivery"] .delivery-summary > img {
    max-height: clamp(150px, 24dvh, 300px) !important;
  }

  html body[data-flow-state="delivery"] .send-details-panel {
    height: auto !important;
  }

  html body[data-flow-state="delivery"] .terms-copy {
    font-size: clamp(10px, 1vw, 12px) !important;
    line-height: 1.3 !important;
  }

  html body[data-flow-state="achievement"] [data-screen="achievement"].flow-screen.is-active {
    align-content: center !important;
  }

  html body[data-flow-state="achievement"] .achievement-stage-layout {
    grid-template-rows: auto auto !important;
    align-content: center !important;
    height: auto !important;
    gap: clamp(10px, 1.6dvh, 18px) !important;
  }

  html body[data-flow-state="achievement"] .achievement-portrait-wrap {
    height: auto !important;
    max-height: clamp(190px, 30dvh, 420px) !important;
    justify-self: center !important;
    width: 100% !important;
  }
}

/* ============================================================= */
/* Section F — Progress rail (replaces the circular stepper)     */
/* ============================================================= */
/*
 * Design rationale
 * ----------------
 * The circular stepper was the only rounded element in a design system whose
 * first rule is "sharp corners, dark technical panels". It is replaced by a
 * segmented instrument rail:
 *
 *      [01]      [02]       03         04         05         06
 *      ▬▬▬▬      ▬▬▬▬      ────       ────       ────       ────
 *    CAPTURE   EXPLORE   PROFILE    ADVICE    DELIVERY   ACHIEVED
 *
 * - square markers (same geometry language as the achievement seal, the
 *   consent checkbox and the delivery indicator)
 * - one filled segment per completed/active stage, so progress is legible
 *   as a bar rather than as a line threaded through circles
 * - stage names in the brand kicker style (uppercase, letterspaced), and the
 *   numbering matches the "DIRECTION 01" pattern already used on portraits
 */

/* The continuous track is superseded by the per-stage segments. */
.experience-stepper-track {
  display: none !important;
}

.experience-stepper-button {
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  width: 100% !important;
}

/* Marker (row 1) — sharp square, never a circle. */
.experience-stepper-marker {
  order: 1;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-family: var(--nv-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  transition: border-color var(--nv-transition), background var(--nv-transition),
    color var(--nv-transition);
}

.experience-stepper li.is-complete .experience-stepper-marker {
  border-color: var(--nv-accent) !important;
  background: rgba(10, 186, 181, 0.1) !important;
  color: transparent !important;
}

.experience-stepper li.is-active .experience-stepper-marker {
  border-color: var(--nv-accent) !important;
  background: var(--nv-accent) !important;
  color: #001012 !important;
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.16) !important;
}

/* Segment rule (row 2) — the actual progress bar. */
.experience-stepper-button::after {
  order: 2;
  content: "";
  display: block;
  width: calc(100% - 14px);
  height: 2px;
  background: rgba(255, 255, 255, 0.13);
  transition: background var(--nv-transition);
}

.experience-stepper li.is-complete .experience-stepper-button::after {
  background: rgba(10, 186, 181, 0.55);
}

.experience-stepper li.is-active .experience-stepper-button::after {
  background: var(--nv-accent);
  box-shadow: 0 0 10px rgba(10, 186, 181, 0.5);
}

/* Stage name (row 3). */
.experience-stepper li span:last-child {
  order: 3;
  color: rgba(255, 255, 255, 0.34);
  font-size: clamp(9px, 0.75vw, 11px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.experience-stepper li.is-complete span:last-child {
  color: rgba(255, 255, 255, 0.7);
}

.experience-stepper li.is-active span:last-child {
  color: var(--nv-accent);
}

@media (max-width: 760px), (orientation: portrait) {
  .experience-stepper-marker {
    width: 26px !important;
    height: 26px !important;
    font-size: 10px !important;
  }

  .experience-stepper-button::after {
    width: calc(100% - 8px);
  }

  /* Only the current stage keeps its name on narrow screens. */
  .experience-stepper li.is-active span:last-child {
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}

/* ============================================================= */
/* Section G — Explore: quiz as the full-width task              */
/* ============================================================= */
/*
 * Previous problem: every panel was stretched to the full stage height, so
 * short content floated inside tall boxes. Now the quiz owns a full-width
 * hero panel, the fact and generation panels form a supporting footer row,
 * every panel is sized by its own content, and the block is centred. On tall
 * kiosk screens the internal rhythm scales with dvh so the stage fills.
 */

@media (min-width: 761px) and (orientation: landscape) {
  html body[data-flow-state="generating"] .generating-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "quiz quiz"
      "fact progress" !important;
    align-content: center !important;
    align-items: stretch !important;
    height: 100% !important;
    gap: clamp(12px, 1.6dvh, 18px) clamp(14px, 1.6vw, 22px) !important;
  }

  /* Quiz: single readable column, no internal voids. */
  html body[data-flow-state="generating"] .quiz-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "quiz-header"
      "quiz-status"
      "question"
      "answers" !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: clamp(10px, 1.4dvh, 18px) !important;
    padding: clamp(18px, 2.2dvh, 30px) clamp(22px, 2.4vw, 36px) !important;
  }

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

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

  html body[data-flow-state="generating"] .quiz-subtitle {
    font-size: clamp(12px, 0.95vw, 15px) !important;
  }

  /* Question column: meta row, hairline progress, question. */
  html body[data-flow-state="generating"] .quiz-question-column {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    gap: 8px !important;
    padding: clamp(10px, 1.4dvh, 16px) 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

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

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

  html body[data-flow-state="generating"] .quiz-privacy-note {
    font-size: clamp(10px, 0.75vw, 12px) !important;
  }

  html body[data-flow-state="generating"] .quiz-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    grid-auto-rows: 1fr !important;
    align-content: start !important;
    align-self: start !important;
    gap: clamp(8px, 1.1dvh, 14px) !important;
  }

  html body[data-flow-state="generating"] .quiz-option {
    min-height: clamp(52px, 6.2dvh, 76px) !important;
    max-height: none !important;
    height: 100% !important;
    padding: 10px clamp(12px, 1.1vw, 18px) !important;
    font-size: clamp(13px, 1.02vw, 17px) !important;
    line-height: 1.25 !important;
  }

  /* Supporting rail. */
  html body[data-flow-state="generating"] .generation-fact-card {
    grid-area: fact !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-content: center !important;
    height: 100% !important;
    min-height: clamp(112px, 14dvh, 168px) !important;
    max-height: none !important;
    gap: 5px 16px !important;
    padding: clamp(14px, 1.8dvh, 22px) clamp(18px, 2vw, 28px) !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card strong {
    font-size: clamp(20px, 1.7vw, 28px) !important;
    line-height: 1.1 !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card p {
    font-size: clamp(13px, 1vw, 16px) !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 3;
  }

  html body[data-flow-state="generating"] .generation-status-panel {
    grid-area: progress !important;
    height: 100% !important;
    min-height: clamp(112px, 14dvh, 168px) !important;
    max-height: none !important;
  }
}

/* Kiosk portrait and mobile: same order, rhythm scaled to the tall stage. */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] .generating-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "quiz"
      "progress"
      "fact" !important;
    align-content: center !important;
    height: 100% !important;
    gap: clamp(8px, 1.2dvh, 20px) !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    grid-area: quiz !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "quiz-header"
      "quiz-status"
      "question"
      "answers" !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: clamp(6px, 1dvh, 16px) !important;
    padding: clamp(12px, 1.6dvh, 26px) clamp(12px, 3.4vw, 28px) !important;
  }

  html body[data-flow-state="generating"] .quiz-title {
    font-size: clamp(17px, 2.2dvh, 30px) !important;
  }

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

  html body[data-flow-state="generating"] .quiz-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    gap: clamp(6px, 0.9dvh, 12px) !important;
  }

  html body[data-flow-state="generating"] .quiz-option {
    min-height: clamp(44px, 5dvh, 78px) !important;
    max-height: none !important;
    height: 100% !important;
    font-size: clamp(11px, 1.5dvh, 16px) !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel {
    grid-area: progress !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card {
    grid-area: fact !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: center !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card strong {
    font-size: clamp(15px, 1.9dvh, 26px) !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card p {
    font-size: clamp(11px, 1.4dvh, 16px) !important;
  }
}

/* ============================================================= */
/* Section H — Profile: one calm two-part summary band           */
/* ============================================================= */
/*
 * The band carried five labels, five paragraphs, a chip row, a
 * "Quiz answers -> Weighted profile -> AI-assisted interpretation" flow line
 * and a disclaimer, all at 9-12px. The duplicate intro block and the flow line
 * are gone from the markup; what remains is two readable columns:
 *
 *   YOUR CLEANROOM PROFILE        │ AI-ASSISTED INTERPRETATION  [chips]
 *   Future Deep-Tech Founder      │ one grounded sentence about the answers
 *   one sentence of summary       │
 *   Secondary strength: … · …     │
 *   ───────────────── disclaimer ─────────────────
 */

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .profile-report {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "report-primary report-relative"
    "report-disclaimer report-disclaimer" !important;
  align-items: stretch !important;
  gap: clamp(8px, 1.1dvh, 12px) clamp(20px, 2.4vw, 40px) !important;
  min-height: 0 !important;
  max-height: clamp(150px, 21dvh, 230px) !important;
  padding: clamp(14px, 1.7dvh, 22px) clamp(18px, 2vw, 30px) !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-primary {
  grid-area: report-primary !important;
  align-content: start !important;
  gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-relative-profile {
  grid-area: report-relative !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 0 0 0 clamp(20px, 2.4vw, 40px) !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: none !important;
}

/* Kickers share one voice. */
html body[data-flow-state="portrait-discovery"] .profile-report-primary > span,
html body[data-flow-state="portrait-discovery"] .quiz-relative-heading span {
  font-size: clamp(10px, 0.78vw, 12px) !important;
  letter-spacing: 0.12em !important;
}

/* The profile name is the answer — it gets the display face and the size. */
html body[data-flow-state="portrait-discovery"] .profile-report-primary strong {
  font: 400 clamp(26px, 2.4vw, 40px) / 0.94 var(--nanno-font-display) !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-primary p {
  color: rgba(232, 240, 241, 0.82) !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  line-height: 1.45 !important;
}

/* Secondary strength and strengths collapse into one quiet line. */
html body[data-flow-state="portrait-discovery"] .profile-report-primary small,
html body[data-flow-state="portrait-discovery"] .quiz-report-secondary {
  display: block !important;
  margin-top: 2px !important;
  color: rgba(232, 240, 241, 0.5) !important;
  font-size: clamp(10px, 0.82vw, 12px) !important;
  line-height: 1.35 !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-relative-heading {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-relative-summary {
  color: rgba(232, 240, 241, 0.82) !important;
  font-size: clamp(12px, 1vw, 15px) !important;
  line-height: 1.5 !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-signals {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-signals span {
  padding: 3px 8px !important;
  border: 1px solid rgba(10, 186, 181, 0.4) !important;
  border-radius: 0 !important;
  background: rgba(10, 186, 181, 0.08) !important;
  color: var(--nv-accent) !important;
  font-size: clamp(9px, 0.7vw, 11px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-report-disclaimer {
  grid-area: report-disclaimer !important;
  margin: 0 !important;
  padding-top: clamp(6px, 0.9dvh, 10px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(232, 240, 241, 0.42) !important;
  font-size: clamp(10px, 0.75vw, 11px) !important;
  line-height: 1.35 !important;
}

/* Portrait captions are part of the same reading rhythm. */
html body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  .portrait-discovery-caption strong {
  font-size: clamp(17px, 1.6vw, 26px) !important;
}

html body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  .portrait-discovery-caption p {
  font-size: clamp(11px, 0.85vw, 13px) !important;
  line-height: 1.4 !important;
}

@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .profile-report {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "report-primary"
      "report-relative"
      "report-disclaimer" !important;
    max-height: clamp(150px, 26dvh, 380px) !important;
    gap: clamp(6px, 1dvh, 12px) !important;
  }

  html body[data-flow-state="portrait-discovery"] .quiz-relative-profile {
    padding: clamp(6px, 1dvh, 12px) 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary strong {
    font-size: clamp(20px, 2.4dvh, 32px) !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary p,
  html body[data-flow-state="portrait-discovery"] .quiz-relative-summary {
    font-size: clamp(11px, 1.4dvh, 15px) !important;
  }
}

/* ============================================================= */
/* Section I — Advice: landscape portrait on top, reflection below */
/* ============================================================= */
/*
 * Generated portraits are always 16:9. Presenting them inside a tall,
 * near-square column left a large void under the image and squeezed the
 * reflection into a narrow measure. The stage now stacks:
 *
 *   [ 16:9 portrait with the direction as a lower-third caption ]
 *   [ full-width reflection panel                              ]
 *
 * The media panel derives its width from a height budget, so the frame always
 * matches the asset ratio exactly — no letterboxing, no crop.
 */

html body[data-flow-state="personalized-advice"] {
  --np-advice-media-h: clamp(150px, 27dvh, 340px);
}

html body[data-flow-state="personalized-advice"] .advice-stage-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(10px, 1.4dvh, 18px) !important;
}

html body[data-flow-state="personalized-advice"] .advice-portrait-panel {
  position: relative !important;
  display: block !important;
  width: min(100%, calc(var(--np-advice-media-h) * 16 / 9)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: var(--np-advice-media-h) !important;
  aspect-ratio: 16 / 9 !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

html body[data-flow-state="personalized-advice"] .advice-portrait-panel img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Direction caption becomes a lower-third instead of a separate strip. */
html body[data-flow-state="personalized-advice"] .advice-portrait-panel > div {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: grid !important;
  gap: 2px !important;
  padding: clamp(18px, 3vh, 30px) clamp(12px, 1.4vw, 20px) clamp(10px, 1.4vh, 14px) !important;
  border: 0 !important;
  border-left: 3px solid var(--nv-accent) !important;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0) 0%, rgba(5, 5, 5, 0.92) 62%) !important;
}

html body[data-flow-state="personalized-advice"] .advice-portrait-panel strong {
  font-size: clamp(17px, 1.8vw, 28px) !important;
  line-height: 1 !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-main {
  min-height: 0 !important;
  height: 100% !important;
}

html body[data-flow-state="personalized-advice"] .advice-content {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start !important;
  gap: clamp(8px, 1.2dvh, 14px) clamp(10px, 1.2vw, 18px) !important;
  padding: clamp(14px, 1.8dvh, 24px) clamp(16px, 1.8vw, 28px) !important;
  height: 100% !important;
}

html body[data-flow-state="personalized-advice"] .advice-content > header,
html body[data-flow-state="personalized-advice"] .advice-next-steps,
html body[data-flow-state="personalized-advice"] .advice-disclaimer {
  grid-column: 1 / -1 !important;
}

html body[data-flow-state="personalized-advice"] .advice-content h2 {
  font-size: clamp(22px, 2.3vw, 38px) !important;
  line-height: 0.98 !important;
}

html body[data-flow-state="personalized-advice"] .advice-content :is(p, li) {
  font-size: clamp(12px, 1vw, 15px) !important;
  line-height: 1.45 !important;
}

html body[data-flow-state="personalized-advice"] .advice-disclaimer {
  font-size: clamp(10px, 0.75vw, 12px) !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="personalized-advice"] {
    --np-advice-media-h: clamp(140px, 24dvh, 420px);
  }

  html body[data-flow-state="personalized-advice"] .advice-stage-layout {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-content > * {
    grid-column: 1 !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-content h2 {
    font-size: clamp(18px, 2.4dvh, 30px) !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-content :is(p, li) {
    font-size: clamp(11px, 1.4dvh, 15px) !important;
  }
}

/* --- Section G refinements: rail alignment and vertical balance --- */

@media (min-width: 761px) and (orientation: landscape) {
  /* The supporting rail reads left-aligned, like the quiz beside it. */
  html body[data-flow-state="generating"] .generation-fact-card,
  html body[data-flow-state="generating"] .generation-fact-card :is(span, strong, p) {
    text-align: left !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
    width: clamp(48px, 4.4vw, 64px) !important;
  }

  /* Tighten the space the stage header leaves before the quiz. */
  html body[data-flow-state="generating"] [data-screen="generating"] .flow-subtitle {
    margin: 6px 0 clamp(8px, 1.2dvh, 14px) !important;
  }

  /* The privacy footnote belongs to the question block, not between the
     question and its answers — keep it quiet and clearly subordinate. */
  html body[data-flow-state="generating"] .quiz-privacy-note {
    margin-top: 2px !important;
    color: rgba(232, 240, 241, 0.42) !important;
  }
}

/* --- Section G/H refinements: one centred group, equal portrait cards --- */

/* Explore: title, subtitle and panels are one centred composition instead of
   a top-anchored header with a separately centred body. */
html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  row-gap: clamp(10px, 1.6dvh, 20px) !important;
}

html body[data-flow-state="generating"] .generating-layout {
  height: auto !important;
}

/* Profile: a fixed caption band keeps all three portrait frames identical,
   whatever the length of each direction title. */
html body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
  grid-template-rows: minmax(0, 1fr) clamp(78px, 9.5dvh, 116px) !important;
}

html body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  .portrait-discovery-caption {
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
}

/* --- Section I refinement: fit the full reflection on short laptops --- */
/*
 * On a 900px-tall laptop the stage header plus a 27dvh media band left the
 * reflection panel short enough to clip its final step. The media band and
 * the header give up height first — the generated advice never should.
 */
@media (orientation: landscape) and (max-height: 950px) {
  html body[data-flow-state="personalized-advice"] {
    --np-advice-media-h: clamp(140px, 21dvh, 250px);
  }

  html body[data-flow-state="personalized-advice"] .experience-stage-header .flow-subtitle {
    display: none !important;
  }

  html body[data-flow-state="personalized-advice"] .experience-stage-header .flow-title {
    font-size: clamp(26px, 3vw, 40px) !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-content {
    gap: 8px 12px !important;
    padding: 14px 18px !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-content h2 {
    font-size: clamp(20px, 2vw, 30px) !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-disclaimer {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Lower-third caption scales with the media band so a long direction name
   never covers the portrait. */
html body[data-flow-state="personalized-advice"] .advice-portrait-panel strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(14px, 1.5vw, 26px) !important;
  line-height: 1.06 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body[data-flow-state="personalized-advice"] .advice-portrait-panel span {
  font-size: clamp(8px, 0.62vw, 10px) !important;
}

@media (orientation: landscape) and (max-height: 950px) {
  html body[data-flow-state="personalized-advice"] {
    --np-advice-media-h: clamp(150px, 23dvh, 260px);
  }

  html body[data-flow-state="personalized-advice"] .advice-portrait-panel > div {
    padding: clamp(14px, 2.4vh, 22px) 12px 9px !important;
  }
}

/* --- Kiosk portrait: let the Explore stage grow into the tall canvas --- */
/*
 * Type clamps alone cannot fill a 1920px-tall kiosk: the maxima cap out and
 * the block floats in the middle. On portrait the quiz row takes the free
 * space and its answer buttons stretch with it, which is also the right touch
 * ergonomics for a kiosk.
 */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] .generating-layout {
    grid-template-rows: minmax(0, 1fr) auto auto !important;
    align-content: stretch !important;
    height: 100% !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
    height: 100% !important;
  }

  html body[data-flow-state="generating"] .quiz-title {
    font-size: clamp(17px, 2.1dvh, 44px) !important;
  }

  html body[data-flow-state="generating"] .quiz-question strong {
    font-size: clamp(15px, 1.9dvh, 38px) !important;
  }

  html body[data-flow-state="generating"] .quiz-options {
    align-content: stretch !important;
    align-self: stretch !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    height: 100% !important;
  }

  html body[data-flow-state="generating"] .quiz-option {
    min-height: 44px !important;
    max-height: none !important;
    height: 100% !important;
    font-size: clamp(11px, 1.4dvh, 22px) !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel,
  html body[data-flow-state="generating"] .generation-fact-card {
    min-height: clamp(84px, 8dvh, 210px) !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card strong {
    font-size: clamp(15px, 1.8dvh, 34px) !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card p {
    font-size: clamp(11px, 1.3dvh, 22px) !important;
  }

  html body[data-flow-state="generating"] .generation-item {
    font-size: clamp(9px, 1.05dvh, 18px) !important;
  }
}

/* --- Portrait cards: fixed caption band only where cards stack vertically --- */
html body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
  grid-template-rows: auto !important;
}

@media (min-width: 761px) and (orientation: landscape) {
  html body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
    grid-template-rows: minmax(0, 1fr) clamp(78px, 9.5dvh, 116px) !important;
  }
}

@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
    grid-template-columns: minmax(0, 58%) minmax(0, 42%) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"]
    .portrait-discovery-caption strong {
    font-size: clamp(12px, 1.6dvh, 20px) !important;
    -webkit-line-clamp: 3;
  }

  /* The summary band keeps its two headline facts; supporting detail is
     dropped rather than half-clipped. */
  html body[data-flow-state="portrait-discovery"] .quiz-report-secondary,
  html body[data-flow-state="portrait-discovery"] .profile-report-signals {
    display: none !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary p,
  html body[data-flow-state="portrait-discovery"] .quiz-relative-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  html body[data-flow-state="portrait-discovery"] .quiz-report-disclaimer {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Portrait/kiosk: the stage itself must hand the free height to the layout,
   otherwise the centred group floats in the middle of a 1920px canvas. */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  html body[data-flow-state="generating"] .generating-layout {
    height: 100% !important;
  }
}

/* Kiosk portrait has room for the AI interpretation; only true phones drop it. */
@media (orientation: portrait) and (min-width: 761px) {
  html body[data-flow-state="portrait-discovery"] .profile-report .quiz-relative-profile {
    display: grid !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report .quiz-report-secondary {
    display: block !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-signals {
    display: flex !important;
  }
}

/* --- Deterministic single-column sub-blocks in the summary band --- */
/*
 * In portrait the band's inner blocks were sprouting an implicit second
 * column, so the profile name landed beside its own kicker and was clipped.
 * Both blocks are pinned to one column and every child to column 1.
 */
html body[data-flow-state="portrait-discovery"] .profile-report-primary,
html body[data-flow-state="portrait-discovery"] .quiz-relative-profile {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-primary > *,
html body[data-flow-state="portrait-discovery"] .quiz-relative-profile > * {
  grid-column: 1 !important;
  grid-area: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-primary strong {
  overflow-wrap: anywhere;
}

@media (max-width: 760px), (orientation: portrait) {
  /* Explore answers fill the tall quiz panel instead of staying 52px tall. */
  html body[data-flow-state="generating"] .quiz-options {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Profile: the portraits take the free height on a kiosk canvas. */
  html body[data-flow-state="portrait-discovery"] .result-review-stage {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    align-content: stretch !important;
  }

  html body[data-flow-state="portrait-discovery"] .result-grid {
    height: 100% !important;
  }
}

/* --- Kiosk portrait: final balance ---------------------------------- */
/*
 * Stretching the quiz panel to the full canvas produced 600px answer
 * buttons. Instead the panels keep natural heights with kiosk-scale
 * internals and the group is centred, while the portrait grid — which was
 * shrink-wrapping to 620px inside a 1062px stage — is stretched so the
 * generated portraits actually use the canvas.
 */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] .generating-layout {
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    height: auto !important;
    padding-block: clamp(12px, 2.4dvh, 44px) !important;
  }

  html body[data-flow-state="generating"] .quiz-options {
    grid-template-rows: repeat(2, clamp(48px, 8dvh, 148px)) !important;
    align-content: start !important;
    align-self: start !important;
    height: auto !important;
  }

  html body[data-flow-state="generating"] .quiz-option {
    height: 100% !important;
    max-height: none !important;
  }

  html body[data-flow-state="portrait-discovery"] :is(
    .result-review-header,
    .result-grid,
    .profile-report,
    .portrait-discovery-status,
    .result-review-actions
  ) {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }
}

/* The review stage declared its areas without an explicit column, so the
   single auto track sized to content and capped the portraits at 620px
   inside a 1062px kiosk stage. */
html body[data-flow-state="portrait-discovery"] .result-review-stage {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 760px), (orientation: portrait) {
  /* Kiosk-scale internals so the composition fills a 1920px canvas. */
  html body[data-flow-state="generating"] .quiz-options {
    grid-template-rows: repeat(2, clamp(48px, 10dvh, 190px)) !important;
    gap: clamp(6px, 1.4dvh, 20px) !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    padding-block: clamp(12px, 3dvh, 58px) !important;
    padding-inline: clamp(12px, 3.4vw, 44px) !important;
    gap: clamp(6px, 1.6dvh, 26px) !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel,
  html body[data-flow-state="generating"] .generation-fact-card {
    min-height: clamp(84px, 13dvh, 280px) !important;
  }

  html body[data-flow-state="generating"] .generating-layout {
    gap: clamp(8px, 1.8dvh, 26px) !important;
  }
}

/* The 620px portrait cap is right for a phone and wasteful on a 1080px
   kiosk, where it left half the canvas empty. Widen it above phone width. */
@media (orientation: portrait) and (min-width: 761px) {
  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-grid,
  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .profile-report,
  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions,
  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header {
    width: min(100%, 940px) !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-card {
    grid-template-columns: minmax(0, 62%) minmax(0, 38%) !important;
  }

  html body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"]
    .portrait-discovery-caption strong {
    font-size: clamp(14px, 1.9dvh, 30px) !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary strong {
    font-size: clamp(22px, 2.6dvh, 40px) !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary p,
  html body[data-flow-state="portrait-discovery"] .quiz-relative-summary {
    font-size: clamp(12px, 1.4dvh, 19px) !important;
  }
}

/* The repository's browser contract caps every control at 68px, so kiosk
   height is absorbed by panel rhythm rather than by giant answer buttons. */
@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] .quiz-options {
    grid-template-rows: repeat(2, clamp(46px, 6dvh, 66px)) !important;
    gap: clamp(6px, 1.6dvh, 22px) !important;
  }

  html body[data-flow-state="generating"] .quiz-option {
    max-height: 66px !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    padding-block: clamp(12px, 3.6dvh, 76px) !important;
    gap: clamp(6px, 2dvh, 34px) !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel,
  html body[data-flow-state="generating"] .generation-fact-card {
    min-height: clamp(84px, 15dvh, 330px) !important;
  }

  html body[data-flow-state="generating"] .generating-layout {
    gap: clamp(8px, 2.2dvh, 36px) !important;
  }
}

/* ============================================================= */
/* Section J — Generation indicator                              */
/* ============================================================= */
/*
 * The ring carried a repeating-conic "radiating lines" texture behind a
 * cartoon flask, which read as noise at any size. What remains is a quiet
 * progress ring: a thin teal arc on a faint track, with the flask reduced to
 * a single clean glyph.
 */

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

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

html body[data-flow-state="generating"] .generator-core {
  width: 54% !important;
}

html body[data-flow-state="generating"] .generator-core svg {
  stroke: rgba(231, 239, 240, 0.88) !important;
  stroke-width: 2.2 !important;
}

/* The two dots read as eyes and made the mark look like a mascot. */
html body[data-flow-state="generating"] .generator-core svg circle {
  display: none !important;
}

@media (min-width: 761px) and (orientation: landscape) {
  html body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
    width: clamp(40px, 3.2vw, 52px) !important;
  }
}

@media (max-width: 760px), (orientation: portrait) {
  html body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
    width: clamp(38px, 4.4dvh, 76px) !important;
  }
}