/*
 * UI alignment fixes requested in the 2026-09-15 review.
 *
 * This is the final presentation layer for the experience screens. It only
 * changes layout, sizing and visibility; capture, generation, delivery and
 * email behavior remain owned by the existing JS and backend.
 */

:root {
  --nv-review-cta-width: min(100%, 520px);
  --nv-review-cta-height: 60px;
  --nv-review-gap: clamp(12px, 1.2vw, 20px);
}

/* All stage headers use the same left edge as Explore's reference copy. */
html body .flow-screen.is-active .experience-stage-header,
html body .flow-screen.is-active .result-review-header {
  justify-self: start !important;
  align-self: start !important;
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* Capture: keep the copy and controls close together, and put failures under
   the camera with exactly the camera's width. */
@media (min-width: 901px) {
  html body [data-screen="capture"].flow-screen.is-active:has(#cameraStatus) {
    grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, auto) auto !important;
    grid-template-areas:
      "header camera"
      "header camera"
      "actions camera"
      ". camera-status" !important;
    align-content: start !important;
    row-gap: clamp(6px, 1dvh, 12px) !important;
  }

  html body [data-screen="capture"]:has(#cameraStatus) .screen-actions {
    align-self: start !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    margin-top: 0 !important;
    gap: 8px !important;
  }

  html body [data-screen="capture"]:has(#cameraStatus) .screen-actions > :is(.primary-button, .secondary-button) {
    width: 100% !important;
    height: var(--nv-review-cta-height) !important;
    min-height: var(--nv-review-cta-height) !important;
    max-height: var(--nv-review-cta-height) !important;
    box-sizing: border-box !important;
  }

  html body [data-screen="capture"]:has(#cameraStatus) .capture-secondary-actions {
    margin-top: 4px !important;
    gap: 6px !important;
  }

  html body [data-screen="capture"]:has(#cameraStatus) #cameraStatus {
    grid-area: auto !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* Profile: the selection hint belongs immediately above the CTA and follows
   the same left edge instead of being centered below it. */
html body [data-screen="portrait-discovery"] .result-review-stage:has(#resultGrid) {
  grid-template-areas:
    "profile-header"
    "portraits"
    "profile-report"
    "profile-status"
    "profile-actions" !important;
}
html body [data-screen="portrait-discovery"] #portraitDiscoveryStatus {
  justify-self: start !important;
  width: 100% !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}
html body [data-screen="portrait-discovery"]:has(#resultGrid) .result-review-actions {
  justify-content: start !important;
  justify-items: start !important;
}

/* Advice: the two signal cards share the exact outer edges of the wider
   next-steps card. The portrait recap fills the left row to the main panel's
   bottom edge. */
@media (min-width: 1100px) and (orientation: landscape) {
  html body [data-screen="personalized-advice"] .advice-stage-layout:has(#adviceRecap) {
    display: grid !important;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "portrait main" "recap main" !important;
    align-items: stretch !important;
    gap: var(--nv-review-gap) !important;
  }
  html body [data-screen="personalized-advice"] .advice-stage-layout:has(#adviceRecap) .advice-portrait-panel {
    grid-area: portrait !important;
    align-self: start !important;
    width: 100% !important;
  }
  html body [data-screen="personalized-advice"] .advice-stage-layout:has(#adviceRecap) .advice-stage-main {
    grid-area: main !important;
    align-self: stretch !important;
    min-height: 0 !important;
  }
  html body [data-screen="personalized-advice"] .advice-stage-layout:has(#adviceRecap) .advice-content {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body [data-screen="personalized-advice"] .advice-stage-layout:has(#adviceRecap) .advice-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: var(--nv-review-gap) !important;
  }
  html body [data-screen="personalized-advice"] .advice-stage-layout:has(#adviceRecap) .advice-next-steps {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-inline: 0 !important;
  }
  html body [data-screen="personalized-advice"] #adviceRecap {
    grid-area: recap !important;
    align-self: stretch !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Delivery keeps the portrait summary and form on the same top line. */
@media (min-width: 901px) and (orientation: landscape) {
  html body [data-screen="delivery"] #sendDetailsModal {
    align-items: start !important;
  }
  html body [data-screen="delivery"] #sendDetailsModal .delivery-summary,
  html body [data-screen="delivery"] #sendDetailsModal .send-details-panel {
    align-self: start !important;
    margin-top: 0 !important;
  }
}

/* Achievement: the direction cards sit below the portrait, and the right
   detail panel remains in its own stable column when sharing is revealed. */
@media (min-width: 901px) and (orientation: landscape) {
  html body #successToast .achievement-stage-layout {
    grid-template-areas:
      "portrait details"
      "signals details"
      "share details"
      "services details" !important;
    align-items: start !important;
  }
  html body #successToast .achievement-portrait-wrap { grid-area: portrait !important; }
  html body #successToast .achievement-success-signals {
    grid-area: signals !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html body #successToast .achievement-success-details {
    grid-area: details !important;
    align-self: start !important;
  }
  html body #successToast .achievement-stub { display: none !important; }
}

/* Main CTAs use one stable footprint. Text length no longer changes the
   button's location or dimensions. */
html body [data-screen="portrait-discovery"] #openSendDetails#openSendDetails,
html body [data-screen="personalized-advice"] #adviceContinue#adviceContinue,
html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn#submitBtn,
html body [data-screen="achievement"] #restartExperience#restartExperience {
  width: var(--nv-review-cta-width) !important;
  /* 2026-09-20: min-height instead of a fixed height. At 1100-1300px the
     Advice column is ~380px wide, "CHOOSE WHERE TO SEND IT" wraps to two
     lines, and a fixed 60px box cut the second line off (22px lost). */
  height: auto !important;
  min-height: var(--nv-review-cta-height) !important;
  max-height: none !important;
  box-sizing: border-box !important;
  margin-inline: 0 !important;
}

html body [data-screen="achievement"] .achievement-share-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
html body [data-screen="achievement"] .achievement-share-actions > button {
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

/* The moved direction cards are hidden until achievement data is rendered. */
html body [data-screen="achievement"] .achievement-success-signals[hidden] { display: none !important; }

/* Phone and portrait-kiosk layouts retain one column and the same fixed CTA
   height, while allowing the content itself to use the available width. */
@media (max-width: 900px) {
  html body [data-screen="capture"]:has(#cameraStatus) .screen-actions {
    border-top: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  html body [data-screen="capture"]:has(#cameraStatus) #cameraStatus {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
  html body [data-screen="capture"]:has(#cameraStatus) #cameraStatus[style*="display: block"] {
    display: block !important;
  }
  html body [data-screen="capture"]:has(#cameraStatus) .screen-actions > :is(.primary-button, .secondary-button) {
    height: var(--nv-review-cta-height) !important;
    min-height: var(--nv-review-cta-height) !important;
  }
  html body [data-screen="portrait-discovery"] #portraitDiscoveryStatus {
    text-align: left !important;
  }
  html body #successToast .achievement-stage-layout {
    grid-template-areas: none !important;
  }
  html body #successToast .achievement-stage-layout > .achievement-success-signals {
    order: 2 !important;
  }
  html body #successToast .achievement-stage-layout > .achievement-success-details {
    order: 3 !important;
  }
  html body #successToast .achievement-stage-layout > .achievement-success-share {
    order: 4 !important;
  }
  html body #successToast .achievement-stage-layout > .achievement-services {
    order: 5 !important;
  }
  html body [data-screen="achievement"] .achievement-share-actions > button {
    height: 44px !important;
    min-height: 44px !important;
  }
  html body [data-screen="portrait-discovery"] #openSendDetails#openSendDetails,
  html body [data-screen="personalized-advice"] #adviceContinue#adviceContinue,
  html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn#submitBtn,
  html body [data-screen="achievement"] #restartExperience#restartExperience {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 767px) and (max-height: 760px) {
  html body [data-screen="portrait-discovery"] #portraitDiscoveryStatus {
    display: block !important;
    min-height: 16px !important;
    margin: 0 0 10px !important;
    text-align: left !important;
  }
}

/* Tablet and portrait kiosk Capture already use a two-column camera grid.
   Keep the failure message in that same camera column so its outer edges are
   identical at 1024px, 1080px and the larger portrait kiosk sizes. */
@media (min-width: 901px) and (orientation: portrait) {
  html body [data-screen="capture"]:has(#cameraStatus) #cameraStatus {
    grid-area: status !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Desktop Profile uses the same two-column skeleton as Explore: the title,
   hint and fixed CTA form the left rail while the portrait cards occupy the
   right rail. */
@media (min-width: 1100px) and (orientation: landscape) {
  html body [data-screen="portrait-discovery"] .result-review-stage:has(#resultGrid) {
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.3fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "profile-header portraits"
      "profile-status portraits"
      "profile-actions portraits" !important;
    align-content: start !important;
    align-items: start !important;
    height: 100% !important;
    margin: 0 !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-header {
    grid-area: profile-header !important;
    margin: 0 !important;
    width: 100% !important;
  }
  html body [data-screen="portrait-discovery"] #resultGrid {
    grid-area: portraits !important;
    align-self: stretch !important;
  }
  html body [data-screen="portrait-discovery"] #portraitDiscoveryStatus {
    grid-area: profile-status !important;
    align-self: start !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions {
    grid-area: profile-actions !important;
    margin: 0 !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"].flow-screen {
    padding: var(--nv-stage-pad-top) var(--nv-stage-pad-right) var(--nv-stage-pad-bottom) var(--nv-stage-pad-left) !important;
  }
}

/* On desktop the generation failure keeps the camera's absolute geometry and
   reuses its exact width/right anchor; box-sizing removes the old padding
   difference that made the message wider than the camera. */
@media (min-width: 1100px) and (orientation: landscape) {
  html body [data-screen="capture"]:has(#cameraStatus) #cameraStatus {
    grid-area: auto !important;
    position: absolute !important;
    right: clamp(190px, 12vw, 230px) !important;
    left: auto !important;
    bottom: auto !important;
    top: calc(50% + min(25.33vw, 37.33dvh, 373px) + 10px) !important;
    width: min(38vw, 56dvh, 560px) !important;
    max-width: min(38vw, 56dvh, 560px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

@media (min-width: 1800px) and (min-height: 3000px) and (orientation: portrait) {
  html body [data-screen="achievement"] .achievement-stage-layout,
  html body [data-screen="personalized-advice"] .advice-stage-layout {
    gap: clamp(20px, 1.2vw, 36px) !important;
  }
}


/* Final specificity pass: the legacy stylesheet contains deliberately repeated
   class selectors. These rules keep the requested geometry deterministic while
   leaving stage behavior and media capture untouched. */
@media (min-width: 901px) {
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    display: grid !important;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.3fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "profile-header portraits" "profile-status portraits" "profile-actions portraits" !important;
    column-gap: clamp(28px, 4vw, 72px) !important;
    row-gap: 12px !important;
    align-content: start !important;
    align-items: start !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header {
    grid-area: profile-header !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] #resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid {
    grid-area: portraits !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] #portraitDiscoveryStatus#portraitDiscoveryStatus#portraitDiscoveryStatus {
    grid-area: profile-status !important;
    display: block !important;
    align-self: start !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    grid-area: profile-actions !important;
    display: flex !important;
    align-self: start !important;
    justify-self: start !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 900px) {
  html body #portraitDialog [data-screen="portrait-discovery"] #portraitDiscoveryStatus#portraitDiscoveryStatus#portraitDiscoveryStatus:not(:empty) {
    display: block !important;
    order: 2 !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    text-align: left !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    order: 3 !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: 0 !important;
  }
}

/* The portrait kiosk is a wide surface even when it is physically vertical. */
@media (min-width: 1100px) and (orientation: portrait) {
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-columns: minmax(420px, .85fr) minmax(0, 1.3fr) !important;
  }
}

/* Advice signal cards and the full-width next-step card share one content box. */
@media (min-width: 1100px) {
  html body #portraitDialog [data-screen="personalized-advice"] .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid {
    width: 100% !important;
    padding: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }
  html body #portraitDialog [data-screen="personalized-advice"] .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout .advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps.advice-next-steps {
    width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Fixed CTA footprints include their parent action rail, so text length cannot
   move a button or make the two achievement actions unequal. */
html body #portraitDialog [data-screen="personalized-advice"] #adviceContinue#adviceContinue#adviceContinue,
html body #portraitDialog [data-screen="delivery"] #submitBtn#submitBtn#submitBtn#submitBtn#submitBtn,
html body #portraitDialog [data-screen="achievement"] #restartExperience#restartExperience#restartExperience,
html body #portraitDialog [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
  width: 100% !important;
  max-width: 520px !important;
  justify-self: start !important;
  margin-inline: 0 !important;
}
html body #portraitDialog [data-screen="achievement"] #achievementShareSection#achievementShareSection#achievementShareSection .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 8px !important;
}
html body #portraitDialog [data-screen="achievement"] #achievementShareSection#achievementShareSection#achievementShareSection .achievement-share-actions > button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 48px !important;
  min-height: 48px !important;
}

/* Capture failure: use the same aspect-ratio-derived width as the camera. */
@media (min-width: 1100px) and (orientation: landscape) {
  html body #portraitDialog [data-screen="capture"] #cameraStatus#cameraStatus#cameraStatus {
    width: min(38vw, 56dvh, 560px) !important;
    max-width: min(38vw, 56dvh, 560px) !important;
    top: calc(50% + min(25.33vw, 37.33dvh, 373px) + 10px) !important;
    bottom: auto !important;
  }
}
@media (min-width: 1100px) and (max-height: 760px) and (orientation: landscape) {
  html body #portraitDialog [data-screen="capture"] #cameraStatus#cameraStatus#cameraStatus {
    width: min(34vw, 54dvh, 460px) !important;
    max-width: min(34vw, 54dvh, 460px) !important;
    top: calc(50% + min(22.67vw, 36dvh, 307px) + 10px) !important;
  }
}
@media (min-width: 901px) and (max-width: 1099px) {
  html body #portraitDialog [data-screen="capture"] #cameraStatus#cameraStatus#cameraStatus {
    grid-area: camera-status !important;
    width: 100% !important;
    max-width: none !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
  }
}
@media (max-width: 900px) {
  html body #portraitDialog [data-screen="capture"] #cameraStatus#cameraStatus#cameraStatus {
    width: min(100%, 84vw, 46dvh) !important;
    max-width: min(100%, 84vw, 46dvh) !important;
    margin-inline: auto !important;
  }
}
@media (max-width: 1099px) {
  html body #portraitDialog [data-screen="achievement"] #achievementShareSection#achievementShareSection#achievementShareSection .achievement-share-actions > button {
    height: 44px !important;
    min-height: 44px !important;
  }
}
@media (max-width: 1099px) {
  html body #successToast .achievement-stage-layout > .achievement-services { order: 5 !important; }
  html body #successToast .achievement-stage-layout > .achievement-success-signals { order: 2 !important; }
  html body #successToast .achievement-stage-layout > .achievement-success-details { order: 3 !important; }
  html body #successToast .achievement-stage-layout > .achievement-success-share { order: 4 !important; }
}

/* A portrait kiosk has enough width for the cards, but its height is the
   limiting dimension. Keep its review flow vertical so no implicit grid tracks
   push the heading thousands of pixels down the panel. */
@media (min-width: 1100px) and (orientation: portrait) {
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas: "profile-header" "portraits" "profile-status" "profile-actions" !important;
    height: auto !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    align-content: start !important;
    row-gap: 18px !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header {
    grid-area: profile-header !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] #resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid {
    grid-area: portraits !important;
    align-self: start !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] #portraitDiscoveryStatus#portraitDiscoveryStatus#portraitDiscoveryStatus#portraitDiscoveryStatus {
    grid-area: profile-status !important;
  }
  html body #portraitDialog [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    grid-area: profile-actions !important;
  }
}

/* Status has to follow the camera width when the mobile failure state adds its
   extra grid row. The camera column is two-thirds of the content rail at this
   breakpoint; keeping this row the same width prevents a wider status bar from
   changing the camera's aspect-ratio row. */
@media (max-width: 767px) {
  html body #portraitDialog [data-screen="capture"] #cameraStatus#cameraStatus#cameraStatus#cameraStatus {
    width: 67.5% !important;
    max-width: 67.5% !important;
    justify-self: center !important;
    margin-inline: auto !important;
    font-size: 12px !important;
    padding-inline: 8px !important;
    /* 2026-09-20: was nowrap, which cut any admin-configured error message
       longer than the camera column to one clipped line. */
    white-space: normal !important;
  }
}

/* Portrait kiosks use the same absolute camera rail as wide landscape screens;
   this keeps a generated error directly under that camera instead of in the
   old left-hand grid status cell. */
@media (min-width: 1100px) and (orientation: portrait) {
  html body #portraitDialog [data-screen="capture"] #cameraStatus#cameraStatus#cameraStatus#cameraStatus {
    grid-area: auto !important;
    position: absolute !important;
    right: clamp(190px, 12vw, 230px) !important;
    left: auto !important;
    bottom: auto !important;
    top: calc(50% + min(25.33vw, 37.33dvh, 373px) + 10px) !important;
    width: min(38vw, 56dvh, 560px) !important;
    max-width: min(38vw, 56dvh, 560px) !important;
    margin: 0 !important;
  }
}

@media (min-width: 901px) and (orientation: landscape) {
  html body #portraitDialog [data-screen="portrait-discovery"] #portraitDiscoveryStatus#portraitDiscoveryStatus#portraitDiscoveryStatus#portraitDiscoveryStatus#portraitDiscoveryStatus {
    align-self: end !important;
  }
}

@media (min-width: 1100px) and (orientation: landscape) {
  /* At short laptop heights the privacy note must clear the last subtitle line;
     keeping the action group anchored 10px above the stage edge preserves both
     the CTA footprint and the camera rail without overlap. */
  html body #portraitDialog [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    bottom: 10px !important;
  }
}

/* ============================================================================
   WEB INTERFACE GUIDELINES PASS — 2026-09-21 (Nahira; audit with Vercel's
   web-design-guidelines skill). Touch targets, reduced motion, focus rings,
   inline form errors, a visible close for the privacy dialog. Frozen layers
   (modal-flow.css, responsive.css, landing.css) are overridden from here.
   ============================================================================ */

/* Double-tap-to-zoom delay off on every control (touch kiosk). */
html body button,
html body a,
html body label,
html body input,
html body select,
html body textarea,
html body [role="button"],
html body .quiz-option {
  touch-action: manipulation;
}

/* Icon-only preview trigger keeps its glyph but gets a ≥44px hit area; the
   lightbox Close grows to the touch minimum. */
html body #portraitDialog#portraitDialog#portraitDialog .portrait-preview-trigger {
  position: absolute;
}
html body #portraitDialog#portraitDialog#portraitDialog .portrait-preview-trigger::after {
  content: "";
  position: absolute;
  inset: -8px;
}
html body #portraitLightbox#portraitLightbox#portraitLightbox #portraitLightboxClose {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Keyboard focus on the consent checkboxes was invisible: the native input is
   opacity:0 and the drawn box had no focus rule. ≥2px rings everywhere. */
html body #portraitDialog#portraitDialog#portraitDialog .terms-row input:focus-visible + .custom-checkbox {
  outline: 2px solid var(--nv-brand-accent, #0abab5);
  outline-offset: 2px;
  box-shadow: var(--nv-brand-focus, 0 0 0 3px rgba(10, 186, 181, .2));
}
html body .primary-button:focus-visible,
html body .secondary-button:focus-visible,
html body .nv-flow-button:focus-visible,
html body .video-entry-button:focus-visible,
html body .quiz-option:focus-visible,
html body .field-group input:focus-visible {
  outline-width: 2px;
}

/* Inline field errors (results-flow.js writes them on submit). */
html body #portraitDialog#portraitDialog#portraitDialog .field-group input[aria-invalid="true"] {
  border-color: #ff7a6b !important;
  box-shadow: 0 0 0 3px rgba(255, 122, 107, .18) !important;
}
html body #portraitDialog#portraitDialog#portraitDialog .field-error {
  margin: 4px 0 0;
  font-family: var(--nanno-font-body, "Space Grotesk", sans-serif);
  font-size: 12px;
  line-height: 1.35;
  color: #ffb3aa;
}
html body #portraitDialog#portraitDialog#portraitDialog .field-error[hidden] {
  display: none !important;
}
html body #portraitDialog#portraitDialog#portraitDialog .terms-row.is-invalid .custom-checkbox {
  border-color: #ff7a6b !important;
  box-shadow: 0 0 0 3px rgba(255, 122, 107, .18) !important;
}

/* The Privacy & Terms opener performs an action, so it is a <button> now;
   it keeps reading as an inline link inside the consent sentence. */
html body #portraitDialog#portraitDialog#portraitDialog button.inline-privacy-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--cyan, #0abab5);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 0;
  width: auto;
  text-align: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
html body #portraitDialog#portraitDialog#portraitDialog button.inline-privacy-link:focus-visible {
  outline: 2px solid var(--nv-brand-accent, #0abab5);
  outline-offset: 2px;
}

/* Privacy dialog: a visible, touch-sized Close (the frozen layer hides the
   retired .privacy-close-btn, so this control has a new class). */
html body #privacyModal#privacyModal#privacyModal .privacy-dialog-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--nv-brand-accent, #0abab5);
  border-radius: 0;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font: 700 22px/1 var(--nanno-font-body, "Space Grotesk", sans-serif);
  cursor: pointer;
}
html body #privacyModal#privacyModal#privacyModal .privacy-dialog-close:focus-visible {
  outline: 2px solid var(--nv-brand-accent, #0abab5);
  outline-offset: 2px;
}

/* Reduced motion: the hero hotspot's pulse/scan/shimmer are `animation:
   … !important` in layers that outrank the global reset, and the modal's
   ambient loop is decorative. */
@media (prefers-reduced-motion: reduce) {
  html body #heroLayer#heroLayer#heroLayer .lab-hero-phone-hotspot,
  html body #heroLayer#heroLayer#heroLayer .lab-hero-phone-hotspot::before,
  html body #heroLayer#heroLayer#heroLayer .lab-hero-phone-hotspot::after {
    animation: none !important;
    transition: none !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog .modal-ambient-video {
    display: none !important;
  }
}

/* Continue on Profile shows the same spinner as Delivery's submit while the
   discovery/advice request runs (10-25s); the spinner is sized in px here
   for the same reason as #submitBtn (modal-flow.css sizes it in cqw). */
html body #portraitDialog#portraitDialog#portraitDialog #openSendDetails .button-spinner {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  border-width: 2px !important;
  margin-right: 10px !important;
  animation: spin 0.8s linear infinite;
}
html body #portraitDialog#portraitDialog#portraitDialog #openSendDetails[aria-busy="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   FULL-SIZE PORTRAIT PREVIEW (restored)
   ---------------------------------------------------------------------
   portrait-preview.js builds <dialog class="portrait-preview"> on first
   use. Its styling lived in experience-polish-v1.css, which the template
   stopped loading in phase 7 (ac5d54b), so since then the preview has
   opened as a bare user-agent dialog: a small box pinned top-left, an
   18x31 close glyph and a near-transparent backdrop. The rules below are
   the originals, moved here so the preview is full-screen again on every
   stage (Profile cards, the Advice/Delivery thumb, Achieved). The dialog
   sits in the top layer outside #portraitDialog, so no id chain is needed.
   ===================================================================== */
html body dialog.portrait-preview:not([open]) {
  display: none !important;
}
html body dialog.portrait-preview {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: clamp(16px, 3vh, 40px);
  border: 0;
  border-radius: 0;
  background: rgba(2, 6, 8, 0.94);
  color: inherit;
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html body dialog.portrait-preview::backdrop {
  background: rgba(2, 6, 8, 0.72);
}
html body .portrait-preview-figure {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.4vh, 16px);
  margin: 0;
  max-width: 100%;
  max-height: 100%;
}
html body .portrait-preview-image {
  display: block;
  max-width: min(100%, 1800px);
  max-height: calc(100dvh - clamp(88px, 12vh, 150px));
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(10, 186, 181, 0.42);
}
html body .portrait-preview-caption {
  max-width: min(100%, 900px);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
html body .portrait-preview-caption[hidden] {
  display: none;
}
html body .portrait-preview-close {
  position: absolute;
  top: clamp(12px, 2vh, 24px);
  right: clamp(12px, 2vw, 24px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  background: rgba(5, 5, 5, 0.7);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
html body .portrait-preview-close:hover,
html body .portrait-preview-close:focus-visible {
  border-color: var(--nv-accent, #0ABAB5);
  background: rgba(5, 5, 5, 0.9);
}
html body .portrait-preview-close:focus-visible {
  outline: 2px solid var(--nv-accent, #0ABAB5);
  outline-offset: 2px;
}
/* The stage behind the preview must not scroll while it is open. */
html body.is-portrait-preview-open {
  overflow: hidden !important;
}

/* =====================================================================
   LAYOUT AUDIT 2026-09-23 — PHASE 1: blockers and overlaps
   ---------------------------------------------------------------------
   Found by rendering all eight pages at 37 viewport sizes. The band
   (short landscape) keeps its own rules in kiosk-landscape-v1.css; the
   rules here target the non-band sizes unless stated otherwise.
   ===================================================================== */

/* Hero, 1440px wide and up (taller than 840): the 120px step starts at
   exactly 1440, where the copy column is only ~530px, so "FUTURE SELF"
   broke onto a line of its own — five lines at 1440x900 — and both CTAs
   were pushed 10px out of the shell (overflow hidden). The title now
   scales with the column (7.6vw ~ 109px at 1440, 120px from 1580). */
@media (min-width: 1440px) and (min-height: 841px) {
  html body #heroLayer .lab-hero-title { font-size: min(120px, 7.6vw) !important; }
}

/* Primary actions never hide inside a bounded panel. When the Delivery
   form or the Achieved column is taller than its panel (768x1024,
   834x1112, 1512x864, short phones), the submit / Mission Done button
   used to scroll away with the content — 0% visible at 768x1024. It now
   sticks to the bottom edge of the panel that scrolls; when the panel
   fits, sticky has no effect. */
html body #portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #submitBtn#submitBtn#submitBtn#submitBtn#submitBtn,
html body #portraitDialog#portraitDialog#portraitDialog #successToast #missionDone#missionDone#missionDone#missionDone {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
}
/* While the panel has more below, the pinned button carries a dark lip so
   the text passing under it fades instead of being cut by a hard edge
   (experience-flow.js marks the panel with [data-scroll-more]). */
html body #portraitDialog#portraitDialog#portraitDialog .send-details-panel[data-scroll-more] #submitBtn#submitBtn#submitBtn#submitBtn#submitBtn,
html body #portraitDialog#portraitDialog#portraitDialog .achievement-stage-layout[data-scroll-more] #missionDone#missionDone#missionDone#missionDone {
  box-shadow: 0 -22px 18px -6px rgba(5, 10, 11, .92), 0 4px 15px rgba(10, 186, 181, .3) !important;
}
/* Tablet portrait: the Achieved column (.achievement-stage-layout) is the
   element that scrolls, but #achievementDetails was its own (non-scrolling)
   overflow box, which would have trapped the sticky button inside it. */
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 801px) {
  html body #portraitDialog#portraitDialog #successToast#successToast#successToast#successToast #achievementDetails#achievementDetails { overflow: visible !important; max-height: none !important; }
}

/* Stage titles may wrap when a line is wider than its column. modal-flow.css
   sets .flow-title { white-space: nowrap }, so at 2160x3840 "IDENTITY IS
   READY." (85px) ran 107px under the Achieved portrait. The band keeps
   its deliberate one-line titles (kiosk-landscape-v1.css). */
@media (min-height: 801px), (max-width: 639px), (orientation: portrait) {
  html body #portraitDialog .flow-title { white-space: normal !important; text-wrap: wrap !important; }
}
/* The two Bayon title lines sat 2-4px apart on desktop (line-height 1) —
   they read as touching. A little air between them. */
@media (min-width: 1100px) and (min-height: 801px) {
  /* the four 28-40px titles only; Capture's 85px title is sized in phase 4 */
  html body #portraitDialog .flow-screen:is([data-screen="portrait-discovery"], [data-screen="personalized-advice"], [data-screen="delivery"], [data-screen="achievement"]) .flow-title > strong { margin-top: .1em !important; }
  /* Delivery's second line is inline after a <br>; margin needs a box */
  html body #portraitDialog #sendDetailsTitle > strong { display: inline-block !important; }
  html body #portraitDialog .flow-screen:is([data-screen="portrait-discovery"], [data-screen="personalized-advice"], [data-screen="delivery"], [data-screen="achievement"]) .experience-stage-eyebrow { margin-bottom: 4px !important; }
}

/* Profile cards on phones: the portrait is ~114x64px, and the selection
   mark (top-right, 30px) and the full-size preview button (bottom-right,
   32px) landed on top of each other. The preview button moves to the
   bottom-left corner of the portrait. */
@media (max-width: 767px) {
  html body #portraitDialog #resultGrid .portrait-preview-trigger {
    left: 4px !important;
    right: auto !important;
    top: auto !important;
    bottom: 4px !important;
  }
}

/* Tablet portrait and the portrait kiosk (768-1099 wide, taller than 800):
   the preview button sat exactly under the selection mark (both 26px in the
   top-right corner). It moves to the bottom-right corner of the portrait. */
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 801px) {
  html body #portraitDialog #resultGrid .portrait-preview-trigger {
    left: auto !important;
    right: 6px !important;
    top: auto !important;
    bottom: 6px !important;
  }
}

/* Scroll cue: a panel whose text continues below its edge fades out at the
   bottom (experience-flow.js sets [data-scroll-more] while there is more
   to scroll). On phones the Advice reflection ended flush against the
   "Choose where to send it" button with a half-visible heading and nothing
   said the panel scrolls. */
html body #portraitDialog .advice-stage-main[data-scroll-more],
html body #portraitDialog #adviceRecap[data-scroll-more] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), rgba(0, 0, 0, .12) 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), rgba(0, 0, 0, .12) 100%);
}

/* LAYOUT AUDIT 2026-09-23 — PHASE 2: phones in portrait (< 640px wide), smallest first.
   Nothing scrolls on a phone except the Advice reflection. Button labels stay on one line.
   Six chained ids: the rules these replace go up to four ids. */
@media (max-width: 639px) {
  /* Hero: Start and Visit stacked full width, like the landing page */
  html body #heroLayer#heroLayer#heroLayer#heroLayer .lab-hero-actions {
    display: grid !important; grid-template-columns: 1fr !important; grid-auto-flow: row !important; gap: 8px !important;
    width: 100% !important; max-width: 100% !important; justify-content: stretch !important;
  }
  html body #heroLayer#heroLayer#heroLayer#heroLayer .lab-hero-actions > .lab-hero-action {
    width: 100% !important; min-height: 48px !important; height: 48px !important; padding: 0 16px !important;
    font-size: 16px !important; white-space: nowrap !important;
  }

  /* the "TAP TO START" tag on the hero phone keeps its text inside its border when the picture gets small */
  html body #heroLayer#heroLayer#heroLayer#heroLayer #openExperience#openExperience::before {
    width: max-content !important; min-width: 0 !important; max-width: none !important; padding-left: 7px !important; padding-right: 7px !important;
  }

  /* Capture: the two actions stacked full width (Generate Portraits / Replace Photo after an upload are longer still) */
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions {
    grid-template-columns: 1fr !important; gap: 8px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions > :is(.primary-button, .secondary-button) {
    height: 46px !important; min-height: 46px !important; padding: 0 14px !important; gap: 8px !important;
    font-size: 14px !important; white-space: nowrap !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions > :is(.primary-button, .secondary-button) svg {
    width: 18px !important; height: 18px !important; flex: 0 0 18px !important;
  }

  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .secure-processing-note {
    font-size: 11px !important; line-height: 1.35 !important; padding: 6px 8px !important;
  }

  /* Explore: every answer shows in full, the progress line stays one line */
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-option .quiz-option-text {
    display: block !important; -webkit-line-clamp: unset !important; line-clamp: none !important; overflow: visible !important; max-height: none !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] :is(#quizProgressText, #quizAnsweredText) {
    font-size: 13px !important; line-height: 1.3 !important; white-space: nowrap !important;
  }
  /* "Did you know?" card between questions: one column, the source line under the text instead of squeezing the kicker to zero width */
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #quizFactStep {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "fact-category" "fact-title" "fact-body" "fact-source" "fact-continue" !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #quizFactStep > * {
    min-width: 0 !important; max-width: 100% !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #quizFactStep > :is(#quizFactTitle, #quizFactBody, #quizFactCategory) {
    width: auto !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #quizFactStep > #quizFactSource {
    width: auto !important; justify-self: start !important; white-space: normal !important; text-align: left !important;
  }

  /* questions with four or five answers (the bank allows up to five): tighter answers so all of them fit */
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-options:has(> .quiz-option:nth-child(4)) {
    gap: 5px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-options:has(> .quiz-option:nth-child(4)) > .quiz-option {
    min-height: 36px !important; padding: 4px 10px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-options:has(> .quiz-option:nth-child(4)) .quiz-option-text {
    font-size: 13px !important; line-height: 1.22 !important;
  }

  /* Profile: label + full title beside a 16:9 picture; the three bullet lists do not fit a phone and were cut to "…" */
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 8px !important; align-content: stretch !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card {
    min-height: 0 !important; height: auto !important; align-items: center !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card-img-wrapper {
    flex: 0 0 46% !important; width: 46% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    aspect-ratio: 16 / 9 !important; align-self: center !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-caption {
    align-self: center !important; justify-content: center !important; align-items: flex-start !important; text-align: left !important;
    height: auto !important; min-height: 0 !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-direction-label {
    align-self: flex-start !important; text-align: left !important; margin-left: 0 !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-direction-points {
    display: none !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-caption > strong {
    display: block !important; -webkit-line-clamp: unset !important; line-clamp: none !important; overflow: visible !important;
    max-height: none !important; white-space: normal !important; font-size: 14px !important; line-height: 1.2 !important;
    overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important;
  }

  /* Advice and Delivery: the stage button on one line */
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog :is(#adviceContinue, #submitBtn) {
    height: 50px !important; min-height: 50px !important; padding: 0 12px !important; gap: 10px !important;
    font-size: 14px !important; white-space: nowrap !important;
  }
}

/* taller phones: each card turns into picture-over-title so the 16:9 picture takes the height the card has
   (the card is a size container; the picture is as wide as the card allows, or as tall as it allows after the title) */
@media (max-width: 639px) and (min-height: 760px) {
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card {
    container-type: size !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 6px !important; padding: 8px !important; overflow: hidden !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card-img-wrapper {
    flex: 0 0 auto !important; width: min(100cqw, calc((100cqh - 62px) * 16 / 9)) !important; align-self: center !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-caption {
    flex: 0 0 auto !important; width: 100% !important; align-self: stretch !important; align-items: center !important; text-align: center !important;
    padding: 0 4px !important; gap: 2px !important; background: none !important; border: 0 !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-direction-label {
    align-self: center !important; text-align: center !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-caption > strong {
    text-align: center !important;
  }
}

/* phones up to 820px tall keep the capture instructions but at 14px so the camera keeps its room */
@media (max-width: 639px) and (min-height: 721px) and (max-height: 820px) {
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #captureSubtitle {
    font-size: 14px !important; line-height: 1.4 !important;
  }
}

/* taller phones: the achievement card has room for its one-line description again */
@media (max-width: 639px) and (min-height: 760px) {
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #achievementDescription {
    display: block !important; font-size: 13px !important; line-height: 1.45 !important; margin: 2px 0 4px !important;
  }
}

/* short phones (360×640, iPhone SE 375×667): drop the capture instructions (the camera guide repeats them),
   compact the privacy note and the delivery form so nothing needs to scroll */
@media (max-width: 639px) and (max-height: 720px) {
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #captureSubtitle { display: none !important; }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog :is([data-screen="capture"], [data-screen="generating"]) .flow-title,
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog :is([data-screen="capture"], [data-screen="generating"]) .flow-title > * {
    font-size: 22px !important; line-height: 1.08 !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion,
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion > * {
    font-size: 18px !important; line-height: 1.12 !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #exploreLoadingBar {
    padding: 6px 12px !important; gap: 2px 12px !important;
  }
  /* the 01–05 tags are decoration; on a short phone the answer text gets their width */
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-option .quiz-option-index {
    display: none !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel {
    padding: 10px 11px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #generationReadyMessage {
    font-size: 11.5px !important; line-height: 1.3 !important; padding: 5px 9px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #generationPortraitCount {
    font-size: 15px !important; line-height: 1.2 !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #loadingRingProgress {
    width: 24px !important; height: 24px !important; flex-basis: 24px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] { row-gap: 8px !important; }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generating-layout { row-gap: 6px !important; }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel { row-gap: 5px !important; }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel:has(.quiz-option:nth-child(4)) #quizQuestion,
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel:has(.quiz-option:nth-child(4)) #quizQuestion > * {
    font-size: 16px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-options:has(> .quiz-option:nth-child(4)) > .quiz-option {
    min-height: 34px !important; padding-top: 3px !important; padding-bottom: 3px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .send-details-header { display: none !important; }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultForm input:is(#fullName, #email, #company) {
    height: 44px !important; min-height: 44px !important;
  }
  html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultForm .terms-copy {
    font-size: 11px !important; line-height: 1.35 !important;
  }
}

/* IDLE RESET — "Still there?" (js/kiosk-idle.js). Its own <dialog>, shown over the
   experience after a stage's idle limit; the chains beat the canonical button layer. */
html body dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: transparent;
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  color: #fff; overflow: visible;
}
html body dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog::backdrop {
  background: rgba(3, 7, 8, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-card {
  display: grid; gap: 14px; padding: clamp(22px, 4vw, 34px);
  background: linear-gradient(180deg, rgba(14, 24, 26, .96), rgba(6, 12, 13, .96));
  border: 1px solid rgba(10, 186, 181, .45); box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--nv-accent, #0ABAB5);
}
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-eyebrow .nv-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--nv-accent, #0ABAB5); flex: 0 0 8px;
}
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-title {
  margin: 0; font-family: var(--nv-font-display, "Bayon", sans-serif); font-weight: 400; font-synthesis: none;
  font-size: clamp(34px, 6vw, 48px); line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-text {
  margin: 0; font-size: clamp(16px, 2.4vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .86);
}
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-count {
  display: inline-block; min-width: 1.6em; text-align: center; font-weight: 700; color: var(--nv-accent, #0ABAB5);
  font-variant-numeric: tabular-nums;
}
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px;
}
/* Nine dialog classes: the canonical short-screen button rule is eight classes deep
   (max-height:1100px) and made the primary 18px/42px next to a 15px/54px secondary. */
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog :is(.nv-idle-stay, .nv-idle-restart).primary-button,
html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog :is(.nv-idle-stay, .nv-idle-restart).secondary-button {
  width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 54px !important; height: 54px !important;
  padding: 10px 14px !important; font-size: 15px !important; line-height: 1.2 !important; letter-spacing: .04em !important;
  text-transform: uppercase !important; white-space: nowrap !important; justify-content: center !important;
}
@media (max-width: 479px) {
  html body .nv-idle-dialog.nv-idle-dialog.nv-idle-dialog.nv-idle-dialog .nv-idle-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Rating dialog: "Not now" / "Send feedback" were the only sentence-case buttons in the
   flow (its own CLOSE and every stage action are uppercase). Same depth as the
   experience-layout rule, later file. */
html body .feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog .feedback-form-actions > button {
  text-transform: uppercase !important; white-space: nowrap !important;
}
@media (max-width: 400px) {
  html body .feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog .feedback-form-actions > button {
    padding-left: 10px !important; padding-right: 10px !important;
  }
}

/* Load sentinel: js/css-guard.js reloads this file when this last rule is missing (a truncated download). Keep it last. */
html { --nv-css-end-bugfixes: 1; }