/*
 * Review-cycle layout contract.
 *
 * This file is intentionally loaded after every historical experience layer.
 * It owns Capture, Explore, Portrait Discovery and Personalized Advice, using
 * the canonical six-stage state names from experience-flow.js. No page or nested
 * scrolling is allowed and every generated portrait remains uncropped at 16:9.
 */

:root {
  --review-content-max: 1360px;
  --review-card-border: rgba(48, 55, 57, .92);
  --review-surface: linear-gradient(135deg, rgba(3, 15, 17, .94), rgba(8, 8, 8, .9));
  --review-gap: clamp(16px, 2dvh, 22px);
}

html body:is(
  [data-flow-state="capture"],
  [data-flow-state="generating"],
  [data-flow-state="portrait-discovery"],
  [data-flow-state="personalized-advice"]
) :is(.portrait-dialog, .modal-shell, .flow-screen.is-active) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html body:is(
  [data-flow-state="capture"],
  [data-flow-state="generating"],
  [data-flow-state="portrait-discovery"],
  [data-flow-state="personalized-advice"]
) .flow-screen.is-active {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Capture: denser composition, larger camera and stronger type. */
html body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
  display: grid !important;
  grid-template-columns: minmax(420px, .92fr) minmax(430px, 1.08fr) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas:
    "title camera"
    "subtitle camera"
    "status camera"
    "actions camera" !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: clamp(64px, 6vw, 96px) !important;
  row-gap: clamp(8px, 1.3dvh, 14px) !important;
  width: min(100%, var(--review-content-max)) !important;
  margin: 0 auto !important;
  padding: clamp(12px, 2dvh, 24px) clamp(28px, 4vw, 60px)
    calc(clamp(12px, 2dvh, 24px) + env(safe-area-inset-bottom)) !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] :is(
  .flow-title,
  .flow-subtitle,
  .camera-status,
  .screen-actions
) {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 600px) !important;
  max-width: 600px !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
  display: flex !important;
  flex-direction: column !important;
  grid-area: title !important;
  align-self: end !important;
  gap: 0 !important;
  font-size: clamp(52px, 4.8vw, 76px) !important;
  line-height: .86 !important;
  white-space: normal !important;
  text-wrap: balance;
}

html body[data-flow-state="capture"] [data-screen="capture"] .flow-title :is(span, strong) {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: .86 !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .flow-title br {
  display: none !important;
  content: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .flow-title strong {
  max-width: none !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
  grid-area: subtitle !important;
  max-width: 590px !important;
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.45 !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .camera-status {
  grid-area: status !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .screen-actions {
  grid-area: actions !important;
  align-self: start !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  gap: 10px !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
  position: relative !important;
  inset: auto !important;
  grid-area: camera !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(37vw, 570px, calc((100dvh - var(--experience-header-height) - 42px) * .75)) !important;
  min-width: 390px !important;
  max-width: 570px !important;
  height: auto !important;
  max-height: calc(100dvh - var(--experience-header-height) - 42px) !important;
  margin: 0 !important;
  padding: clamp(14px, 1.4vw, 20px) !important;
  aspect-ratio: 3 / 4 !important;
  transform: none !important;
  overflow: hidden !important;
}

/* Restore the guide geometry after the v3 full-frame reset. */
html body[data-flow-state="capture"] [data-screen="capture"] .camera-framing-assistant {
  position: absolute !important;
  inset: clamp(10px, 2.4vw, 18px) !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .camera-guide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Portrait/mobile guide: head-to-above-waist outline filling the camera. */
html body[data-flow-state="capture"] [data-screen="capture"] .camera-guide-silhouette-window {
  position: absolute !important;
  inset: auto !important;
  top: 44% !important;
  left: 50% !important;
  width: 92% !important;
  height: 86% !important;
  transform: translate(-50%, -50%) !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .camera-guide-silhouette {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 50% !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  transform: translateX(-50%) !important;
}

/* Landscape/desktop guide: wider, taller crop for head-to-lower-chest. */
html body[data-flow-state="capture"] [data-screen="capture"] .camera-guide-desktop .camera-guide-silhouette-window {
  top: 48% !important;
  width: 132% !important;
  height: 92% !important;
}

html body[data-flow-state="capture"] [data-screen="capture"] .camera-guide-desktop .camera-guide-silhouette {
  top: -2% !important;
  height: 200% !important;
}

html body[data-flow-state="capture"] .camera-guide-instruction {
  right: 4% !important;
  bottom: 3.5% !important;
  left: 4% !important;
  width: auto !important;
  max-width: 92% !important;
  max-height: 23% !important;
  gap: 4px !important;
  padding: 11px 13px !important;
  overflow: hidden !important;
}

html body[data-flow-state="capture"] .camera-guide-instruction :is(
  .camera-guide-kicker,
  .camera-guide-helper,
  .camera-guide-crop-label
) {
  display: none !important;
}

html body[data-flow-state="capture"] .camera-guide-title {
  font-size: clamp(14px, 1.15vw, 17px) !important;
}

html body[data-flow-state="capture"] .camera-guide-hint {
  font-size: clamp(11px, .92vw, 14px) !important;
  line-height: 1.25 !important;
}

/* Explore: fact, question and generation progress are three horizontal bands. */
html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  padding: clamp(12px, 1.6dvh, 20px) clamp(24px, 3vw, 48px)
    calc(clamp(24px, 3dvh, 32px) + env(safe-area-inset-bottom)) !important;
}

html body[data-flow-state="generating"] [data-screen="generating"] .flow-title {
  width: min(100%, var(--review-content-max)) !important;
  font-size: clamp(34px, 3.5vw, 54px) !important;
  line-height: .94 !important;
  text-align: center !important;
  white-space: normal !important;
}

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

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

html body[data-flow-state="generating"] [data-screen="generating"] .flow-subtitle {
  width: min(100%, var(--review-content-max)) !important;
  margin: 8px 0 clamp(20px, 2.4dvh, 24px) !important;
  font-size: clamp(13px, 1.1vw, 17px) !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

html body[data-flow-state="generating"] .generating-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows:
    clamp(150px, 18dvh, 170px)
    clamp(270px, 32dvh, 300px)
    clamp(115px, 15dvh, 130px) !important;
  grid-template-areas:
    "fact"
    "quiz"
    "progress" !important;
  align-content: center !important;
  gap: clamp(18px, 2.2dvh, 22px) !important;
  width: min(100%, var(--review-content-max)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

html body[data-flow-state="generating"] :is(
  .generation-fact-card,
  .quiz-panel,
  .generation-status-panel
) {
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--review-card-border) !important;
  border-left: 3px solid var(--cyan) !important;
  border-radius: 0 !important;
  background: var(--review-surface) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body[data-flow-state="generating"] .generation-fact-card {
  position: relative !important;
  inset: auto !important;
  grid-area: fact !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "fact-category fact-source"
    "fact-title fact-title"
    "fact-body fact-body" !important;
  align-content: center !important;
  gap: 6px 18px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 150px !important;
  max-height: 170px !important;
  padding: clamp(16px, 2dvh, 22px) clamp(20px, 2.2vw, 32px) !important;
  margin: 0 !important;
}

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

html body[data-flow-state="generating"] .generation-fact-card :is(span, strong, p, a) {
  min-width: 0 !important;
  margin: 0 !important;
}

html body[data-flow-state="generating"] .generation-fact-card .quiz-idle-fact-category {
  grid-area: fact-category !important;
  font-size: clamp(11px, .9vw, 13px) !important;
}

html body[data-flow-state="generating"] .generation-fact-card strong {
  grid-area: fact-title !important;
  font: 700 clamp(28px, 2.4vw, 38px)/1.08 var(--nanno-font-body) !important;
}

html body[data-flow-state="generating"] .generation-fact-card p {
  grid-area: fact-body !important;
  display: -webkit-box !important;
  color: rgba(232, 240, 241, .78) !important;
  font-size: clamp(16px, 1.3vw, 21px) !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

html body[data-flow-state="generating"] .generation-fact-card a {
  grid-area: fact-source !important;
  justify-self: end !important;
  align-self: start !important;
  color: var(--cyan) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

html body[data-flow-state="generating"] .quiz-panel {
  grid-area: quiz !important;
  display: grid !important;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%) !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  grid-template-areas:
    "quiz-header quiz-header"
    "quiz-status quiz-status"
    "question answers" !important;
  align-content: stretch !important;
  gap: clamp(6px, .9dvh, 10px) clamp(16px, 2vw, 28px) !important;
  width: 100% !important;
  align-self: center !important;
  height: clamp(270px, 32dvh, 300px) !important;
  min-height: 270px !important;
  max-height: 300px !important;
  padding: clamp(12px, 1.3vw, 18px) clamp(14px, 1.5vw, 20px) !important;
  z-index: 2 !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: auto auto minmax(0, 1fr) !important;
  align-items: baseline !important;
  gap: 8px 18px !important;
  min-width: 0 !important;
}

html body[data-flow-state="generating"] .quiz-panel-header :is(p, h2) {
  margin: 0 !important;
}

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

html body[data-flow-state="generating"] .quiz-subtitle {
  align-self: center !important;
  font-size: clamp(10px, .82vw, 13px) !important;
}

html body[data-flow-state="generating"] .quiz-status {
  grid-area: quiz-status !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
}

html body[data-flow-state="generating"] .quiz-question-column {
  grid-area: question !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(68px, 1fr) auto !important;
  align-content: stretch !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding-right: clamp(12px, 1.4vw, 22px) !important;
  border-right: 1px solid rgba(255, 255, 255, .13) !important;
}

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

html body[data-flow-state="generating"] .quiz-question strong {
  font-size: clamp(20px, 1.85vw, 30px) !important;
  line-height: 1.14 !important;
}

html body[data-flow-state="generating"] .quiz-privacy-note {
  font-size: clamp(9px, .72vw, 11px) !important;
  line-height: 1.2 !important;
}

html body[data-flow-state="generating"] .quiz-options {
  grid-area: answers !important;
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(58px, 64px)) !important;
  align-content: center !important;
  align-self: center !important;
  gap: clamp(8px, 1dvh, 12px) !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body[data-flow-state="generating"] .quiz-option {
  display: flex !important;
  position: relative !important;
  z-index: 6 !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  height: auto !important;
  max-height: 64px !important;
  padding: clamp(8px, .9vw, 12px) 14px !important;
  font-size: clamp(12px, 1vw, 16px) !important;
  line-height: 1.25 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transform: none !important;
}

html body[data-flow-state="generating"] .quiz-option:is(:hover, :focus-visible) {
  transform: none !important;
  outline: 2px solid var(--cyan) !important;
  outline-offset: 1px !important;
}

html body[data-flow-state="generating"] .quiz-option.is-pending {
  border-color: var(--cyan) !important;
  background: linear-gradient(90deg, rgba(10, 186, 181, .25), rgba(10, 186, 181, .08)) !important;
  box-shadow: inset 3px 0 0 var(--cyan) !important;
}

html body[data-flow-state="generating"] .quiz-option:disabled:not(.is-pending) {
  opacity: .58 !important;
  cursor: wait !important;
}

html body[data-flow-state="generating"] .quiz-controls,
html body[data-flow-state="generating"] .quiz-controls:has(#quizSkip[hidden]) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-flow-state="generating"] .generation-status-panel {
  grid-area: progress !important;
  display: grid !important;
  grid-template-columns: clamp(96px, 9vw, 128px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "ring stages"
    "privacy privacy" !important;
  align-items: center !important;
  gap: 6px clamp(18px, 2vw, 30px) !important;
  width: 100% !important;
  min-height: 115px !important;
  height: clamp(115px, 15dvh, 130px) !important;
  max-height: 130px !important;
  padding: clamp(10px, 1.2dvh, 14px) clamp(16px, 2vw, 28px) !important;
}

html body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
  position: relative !important;
  inset: auto !important;
  grid-area: ring !important;
  justify-self: center !important;
  width: clamp(88px, 10dvh, 112px) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  transform: none !important;
}

html body[data-flow-state="generating"] .generation-status-panel .generator-ring {
  width: 100% !important;
  height: 100% !important;
}

html body[data-flow-state="generating"] .generation-list {
  position: relative !important;
  inset: auto !important;
  grid-area: stages !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 32px) !important;
  width: 100% !important;
  transform: none !important;
}

html body[data-flow-state="generating"] .generation-list::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 20px !important;
  height: 2px !important;
  background: rgba(255, 255, 255, .12) !important;
  pointer-events: none !important;
}

html body[data-flow-state="generating"] .generation-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 6px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: clamp(11px, .9vw, 14px) !important;
  line-height: 1.2 !important;
}

html body[data-flow-state="generating"] .generation-item:not(:last-child)::after,
html body[data-flow-state="generating"] .generation-item::before,
html body[data-flow-state="generating"] .generation-item .task-icon::before {
  content: none !important;
  display: none !important;
}

html body[data-flow-state="generating"] .generation-item .task-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 26px !important;
  height: 26px !important;
  flex-basis: 26px !important;
}

html body[data-flow-state="generating"] .generation-ready-message {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

html body[data-flow-state="generating"] .generation-status-panel .privacy-note {
  position: relative !important;
  inset: auto !important;
  grid-area: privacy !important;
  justify-self: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 7px !important;
  color: rgba(232, 240, 241, .68) !important;
  font-size: clamp(9px, .72vw, 11px) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  transform: none !important;
}

html body[data-flow-state="generating"] .generation-status-panel .privacy-note svg {
  width: 16px !important;
  height: 16px !important;
  flex-basis: 16px !important;
}

/* Profile + Portrait Discovery: one clear vertical composition. */
html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"].flow-screen.is-active {
  display: grid !important;
  place-items: stretch !important;
  width: 100% !important;
  padding: clamp(24px, 2.8dvh, 28px) clamp(24px, 3vw, 48px)
    calc(clamp(24px, 3dvh, 32px) + env(safe-area-inset-bottom)) !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto auto !important;
  grid-template-areas:
    "profile-header"
    "portraits"
    "profile-report"
    "profile-status"
    "profile-actions" !important;
  align-content: center !important;
  justify-items: stretch !important;
  gap: 0 !important;
  width: min(100%, var(--review-content-max)) !important;
  max-width: var(--review-content-max) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header {
  grid-area: profile-header !important;
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 clamp(16px, 2dvh, 20px) !important;
  text-align: center !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header > * {
  position: relative !important;
  inset: auto !important;
  grid-area: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .flow-title {
  width: 100% !important;
  font-size: clamp(36px, 3.6vw, 56px) !important;
  line-height: .9 !important;
  text-align: center !important;
  white-space: normal !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .flow-title br {
  display: none !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .flow-title span::after {
  content: " ";
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .flow-subtitle {
  width: min(100%, 760px) !important;
  font-size: clamp(11px, .92vw, 14px) !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-grid {
  position: relative !important;
  inset: auto !important;
  grid-area: portraits !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: clamp(12px, 1.4vw, 16px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 0 clamp(16px, 2dvh, 22px) !important;
  overflow: hidden !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-card {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--review-card-border) !important;
  border-radius: 0 !important;
  background: #050707 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-card:is(:hover, :focus-within, .is-selected) {
  border-color: var(--cyan) !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-card.is-selected {
  box-shadow: inset 0 0 0 1px var(--cyan), 0 0 24px rgba(10, 186, 181, .14) !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-card-img-wrapper {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background: #071012 !important;
  overflow: hidden !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-card-img-wrapper.has-error {
  display: grid !important;
  place-items: center !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-image-status {
  padding: 12px !important;
  color: rgba(232, 240, 241, .72) !important;
  font-size: 12px !important;
  text-align: center !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-card-img-wrapper img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .selection-mark {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 50% !important;
  background: rgba(5, 5, 5, .28) !important;
  color: transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  z-index: 4 !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-card.is-selected .selection-mark {
  border-color: var(--cyan) !important;
  background: var(--cyan) !important;
  color: #001012 !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: auto !important;
  padding: 8px 12px 10px !important;
  border-top: 1px solid rgba(10, 186, 181, .42) !important;
  background: rgba(5, 5, 5, .96) !important;
  text-align: left !important;
  overflow: hidden !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption :is(strong, p, span) {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption strong {
  display: -webkit-box !important;
  font-size: clamp(15px, 1.25vw, 20px) !important;
  line-height: 1.05 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption p {
  display: -webkit-box !important;
  font-size: clamp(9px, .7vw, 11px) !important;
  line-height: 1.22 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .profile-report {
  grid-area: profile-report !important;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr) minmax(0, 1.2fr) !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "report-intro report-primary report-relative"
    "report-flow report-flow report-flow"
    "report-disclaimer report-disclaimer report-disclaimer" !important;
  align-items: start !important;
  gap: 8px clamp(16px, 2vw, 28px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 190px !important;
  height: auto !important;
  max-height: 220px !important;
  margin: 0 0 10px !important;
  padding: clamp(14px, 1.4dvh, 18px) clamp(16px, 1.8vw, 26px) !important;
  border: 1px solid var(--review-card-border) !important;
  border-left: 3px solid var(--cyan) !important;
  border-radius: 0 !important;
  background: var(--review-surface) !important;
  overflow: hidden !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

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

html body[data-flow-state="portrait-discovery"] .profile-report-intro {
  grid-area: report-intro !important;
  display: grid !important;
  gap: 4px !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-intro :is(span, strong) {
  margin: 0 !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-intro span,
html body[data-flow-state="portrait-discovery"] .profile-report-primary > span,
html body[data-flow-state="portrait-discovery"] .quiz-relative-heading span {
  color: var(--cyan) !important;
  font-size: clamp(9px, .7vw, 11px) !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-intro strong {
  color: #fff !important;
  font: 400 clamp(24px, 2.1vw, 34px)/.92 var(--nanno-font-display) !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-intro p {
  margin: 0 !important;
  color: rgba(232, 240, 241, .72) !important;
  font-size: clamp(11px, .85vw, 13px) !important;
  line-height: 1.35 !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-primary {
  grid-area: report-primary !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 clamp(12px, 1.4vw, 22px) !important;
  border: 0 !important;
  border-inline: 1px solid rgba(255, 255, 255, .13) !important;
}

html body[data-flow-state="portrait-discovery"] .profile-report-primary strong {
  display: -webkit-box !important;
  color: #fff !important;
  font-size: clamp(17px, 1.5vw, 24px) !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body[data-flow-state="portrait-discovery"] .profile-report-primary :is(p, small) {
  display: -webkit-box !important;
  margin: 0 !important;
  color: rgba(232, 240, 241, .72) !important;
  font-size: clamp(11px, .82vw, 13px) !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

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

html body[data-flow-state="portrait-discovery"] .profile-report-signals span {
  padding: 2px 8px !important;
  border: 1px solid rgba(10, 186, 181, .45) !important;
  color: var(--cyan) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-relative-profile {
  grid-area: report-relative !important;
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-relative-heading {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-relative-heading strong {
  color: rgba(232, 240, 241, .74) !important;
  font-size: 10px !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-relative-summary {
  display: -webkit-box !important;
  margin: 0 !important;
  color: #eef7f7 !important;
  font-size: clamp(12px, .9vw, 14px) !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

html body[data-flow-state="portrait-discovery"] .profile-report-flow {
  grid-area: report-flow !important;
  margin: 2px 0 0 !important;
  color: rgba(232, 240, 241, .7) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-align: center !important;
}

html body[data-flow-state="portrait-discovery"] .quiz-report-disclaimer {
  grid-area: report-disclaimer !important;
  margin: 0 !important;
  color: rgba(232, 240, 241, .5) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-status {
  grid-area: profile-status !important;
  min-height: 16px !important;
  margin: 0 0 clamp(12px, 1.5dvh, 16px) !important;
  color: rgba(232, 240, 241, .72) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions {
  grid-area: profile-actions !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 240px) minmax(280px, 390px) !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
}

html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions :is(.primary-button, .back-button) {
  position: relative !important;
  inset: auto !important;
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 56px !important;
  margin: 0 !important;
  transform: none !important;
}

/* Tablet and mobile: vertical composition without introducing scroll. */
@media (max-width: 900px), (orientation: portrait) {
  html body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title"
      "subtitle"
      "camera"
      "actions" !important;
    align-content: stretch !important;
    justify-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] :is(.flow-title, .flow-subtitle, .screen-actions) {
    width: min(100%, 560px) !important;
    text-align: center !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
    font-size: clamp(30px, 8.2vw, 42px) !important;
    line-height: .92 !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .flow-title strong {
    max-width: none !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
    display: -webkit-box !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
    justify-self: center !important;
    width: min(100%, 330px, calc((100dvh - var(--experience-header-height) - 190px) * .75)) !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .camera-status {
    display: none !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .screen-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .capture-secondary-actions {
    grid-column: 1 / -1 !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .secure-processing-note {
    display: none !important;
  }

  html body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
    gap: 3px !important;
    padding: 6px 9px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-flow-state="generating"] [data-screen="generating"] .flow-title {
    font-size: clamp(23px, 6.5vw, 31px) !important;
  }

  html body[data-flow-state="generating"] [data-screen="generating"] .flow-subtitle {
    font-size: 10px !important;
  }

  html body[data-flow-state="generating"] .generating-layout {
    grid-template-rows: clamp(88px, 13dvh, 112px) minmax(0, 1fr) 96px !important;
    gap: 5px !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "fact-category fact-title"
      "fact-body fact-body" !important;
    gap: 3px 9px !important;
    min-height: 88px !important;
    padding: 9px 11px !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card .quiz-idle-fact-category {
    grid-area: fact-category !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card strong {
    grid-area: fact-title !important;
    font-size: 17px !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card p {
    grid-area: fact-body !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3;
  }

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

  html body[data-flow-state="generating"] .quiz-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    grid-template-areas:
      "quiz-header"
      "quiz-status"
      "question"
      "answers" !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 9px !important;
  }

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

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

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

  html body[data-flow-state="generating"] .quiz-question-column {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 3px 8px !important;
    padding: 0 0 5px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
  }

  html body[data-flow-state="generating"] .quiz-progress-meta {
    grid-column: 1 / -1 !important;
    font-size: 9px !important;
  }

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

  html body[data-flow-state="generating"] .quiz-question {
    grid-column: 1 / -1 !important;
  }

  html body[data-flow-state="generating"] .quiz-question strong {
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 1.08 !important;
  }

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

  html body[data-flow-state="generating"] .quiz-option {
    min-height: 44px !important;
    max-height: 52px !important;
    padding: 6px 8px !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    line-height: 1.15 !important;
  }

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

  html body[data-flow-state="generating"] .generation-status-panel {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "ring stages"
      "privacy privacy" !important;
    min-height: 96px !important;
    max-height: 118px !important;
    gap: 4px 8px !important;
    padding: 6px 8px !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
    width: 56px !important;
  }

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

  html body[data-flow-state="generating"] .generation-item {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 20px !important;
    padding: 1px 0 !important;
    font-size: 9px !important;
  }

  html body[data-flow-state="generating"] .generation-item:not(:last-child)::after,
  html body[data-flow-state="generating"] .generation-ready-message {
    display: none !important;
  }

  html body[data-flow-state="generating"] .generation-item .task-icon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel .privacy-note {
    font-size: 8px !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"].flow-screen.is-active {
    padding: 6px 9px calc(6px + env(safe-area-inset-bottom)) !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-stage {
    gap: 4px !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .experience-stage-eyebrow,
  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .flow-subtitle {
    display: none !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .flow-title {
    font-size: clamp(22px, 6.1vw, 29px) !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: min(100%, 620px) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    justify-self: center !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;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-card-img-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 5px 7px !important;
    border: 0 !important;
    border-left: 1px solid rgba(10, 186, 181, .42) !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption strong {
    font-size: clamp(11px, 3vw, 15px) !important;
    line-height: 1 !important;
    -webkit-line-clamp: 3;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption p {
    display: none !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .profile-report {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "report-intro"
      "report-primary"
      "report-relative"
      "report-flow"
      "report-disclaimer" !important;
    gap: 8px !important;
    width: min(100%, 620px) !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    justify-self: center !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-intro strong {
    font-size: clamp(17px, 4.8vw, 23px) !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-intro p,
  html body[data-flow-state="portrait-discovery"] .profile-report-primary p,
  html body[data-flow-state="portrait-discovery"] .profile-report-primary small,
  html body[data-flow-state="portrait-discovery"] .quiz-relative-summary,
  html body[data-flow-state="portrait-discovery"] .quiz-report-disclaimer,
  html body[data-flow-state="portrait-discovery"] .profile-report-flow {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary {
    padding: 8px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .13) !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary strong {
    font-size: clamp(14px, 3.6vw, 18px) !important;
    -webkit-line-clamp: 2;
  }

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

  html body[data-flow-state="portrait-discovery"] .quiz-relative-summary {
    font-size: 12px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 4;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 620px) !important;
    justify-self: center !important;
    gap: 11px !important;
    padding: 0 16px !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions #openSendDetails {
    order: 1 !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions #retakePhoto {
    order: 2 !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions :is(.primary-button, .back-button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 52px !important;
    max-height: 56px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}

/* Short landscape devices need an extra compact pass. */
@media (orientation: landscape) and (max-height: 620px) {
  html body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
    grid-template-columns: minmax(300px, .9fr) minmax(280px, 1.1fr) !important;
    column-gap: 28px !important;
    padding-block: 5px !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
    font-size: clamp(38px, 5.5vw, 52px) !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
    font-size: 12px !important;
  }

  html body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
    width: min(34vw, calc((100dvh - var(--experience-header-height) - 14px) * .75)) !important;
    min-width: 0 !important;
  }

  html body[data-flow-state="capture"] .secure-processing-note {
    display: none !important;
  }

  html body[data-flow-state="generating"] [data-screen="generating"] .flow-subtitle,
  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header :is(.experience-stage-eyebrow, .flow-subtitle) {
    display: none !important;
  }

  html body[data-flow-state="generating"] .generation-fact-card {
    min-height: 48px !important;
    padding-block: 6px !important;
  }

  html body[data-flow-state="generating"] .quiz-panel {
    min-height: 108px !important;
    padding: 7px 10px !important;
  }

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

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

  html body[data-flow-state="generating"] .quiz-option {
    min-height: 44px !important;
    max-height: 52px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel {
    min-height: 74px !important;
    max-height: 82px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-areas: "ring stages" !important;
    padding: 5px 8px !important;
  }

  html body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
    width: 50px !important;
  }

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

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-header .flow-title {
    font-size: 27px !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-grid {
    height: min(28dvh, 128px) !important;
    min-height: 92px !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption {
    min-height: 42px !important;
    padding: 4px 7px !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption p {
    display: none !important;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .profile-report {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 6px 8px !important;
  }

  html body[data-flow-state="portrait-discovery"] .profile-report-primary p,
  html body[data-flow-state="portrait-discovery"] .quiz-relative-summary {
    -webkit-line-clamp: 2;
  }

  html body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .result-review-actions :is(.primary-button, .back-button) {
    height: 48px !important;
    min-height: 44px !important;
    max-height: 52px !important;
  }
}

/* Advice: centered heading, 35/65 landscape composition, stable states. */
html body[data-flow-state="personalized-advice"] [data-screen="personalized-advice"].flow-screen.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  justify-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: clamp(12px, 1.6dvh, 20px) clamp(24px, 3vw, 48px)
    calc(clamp(24px, 3dvh, 32px) + env(safe-area-inset-bottom)) !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-header {
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
  width: min(100%, var(--review-content-max)) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-header .experience-stage-eyebrow,
html body[data-flow-state="personalized-advice"] .advice-stage-header .flow-title,
html body[data-flow-state="personalized-advice"] .advice-stage-header .flow-subtitle {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-header .experience-stage-eyebrow {
  justify-content: center !important;
  font-size: clamp(12px, 1vw, 14px) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-header .flow-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  font-size: clamp(34px, 3.6vw, 54px) !important;
  line-height: .9 !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-header .flow-title :is(span, strong) {
  display: block !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-header .flow-title br {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 35%) minmax(0, 65%) !important;
  align-items: stretch !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  width: min(100%, var(--review-content-max)) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

html body[data-flow-state="personalized-advice"] .advice-portrait-panel {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

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

html body[data-flow-state="personalized-advice"] .advice-portrait-panel > div {
  padding: 12px 14px !important;
  border-top: 1px solid rgba(10, 186, 181, .35) !important;
}

html body[data-flow-state="personalized-advice"] .advice-stage-main,
html body[data-flow-state="personalized-advice"] :is(.advice-loading, .advice-error, .advice-content) {
  min-width: 0 !important;
  min-height: 280px !important;
  height: 100% !important;
  overflow: hidden !important;
}

html body[data-flow-state="personalized-advice"] :is(.advice-loading, .advice-error, .advice-content) {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 280px !important;
  max-height: 100% !important;
  padding: clamp(14px, 1.6vw, 22px) !important;
}

html body[data-flow-state="personalized-advice"] :is(.advice-loading, .advice-error, .advice-content)[hidden] {
  display: none !important;
}

html body[data-flow-state="personalized-advice"] .advice-content {
  grid-template-columns: 1fr 1fr !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(26px, 2.6vw, 40px) !important;
  line-height: 1 !important;
}

html body[data-flow-state="personalized-advice"] .advice-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 30%) minmax(0, 70%) !important;
  gap: 14px !important;
  width: min(100%, var(--review-content-max)) !important;
  margin: 0 auto !important;
}

html body[data-flow-state="personalized-advice"] .advice-actions :is(.primary-button, .nv-flow-button) {
  width: 100% !important;
  min-height: 52px !important;
  max-height: 56px !important;
}

html body[data-flow-state="personalized-advice"] #adviceContinue:disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

html body[data-flow-state="personalized-advice"] #adviceContinue[aria-busy="true"] {
  opacity: .7 !important;
}

@media (max-width: 900px), (orientation: portrait) {
  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;
  }

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

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

  html body[data-flow-state="personalized-advice"] .advice-actions #adviceContinue {
    order: 1 !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-actions #backToPortraits {
    order: 2 !important;
  }

  html body[data-flow-state="personalized-advice"] .advice-actions :is(.primary-button, .nv-flow-button) {
    height: 54px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-flow-state="generating"] .quiz-option,
  html body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
    transition: none !important;
  }
}