/*
 * Responsive layout for the interactive experience.
 *
 * This layer intentionally comes after app.css and is scoped to
 * body.experience-body so regular public pages keep their existing layout.
 */

.kiosk-fullscreen-button {
  align-items: center;
  background: rgba(255, 253, 247, .86);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--green);
  cursor: pointer;
  display: flex;
  font-size: 1.4rem;
  height: 42px;
  justify-content: center;
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  top: max(10px, env(safe-area-inset-top));
  width: 42px;
  z-index: 50;
}
.kiosk-fullscreen-hint {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  color: var(--ink);
  font-size: .82rem;
  left: 50%;
  line-height: 1.4;
  margin: 0;
  max-width: calc(100vw - 28px);
  padding: 12px 16px;
  position: fixed;
  text-align: center;
  top: max(60px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: 380px;
  z-index: 60;
}
.experience-body .photo-preferences-link {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.3;
  margin: 2px auto 0;
  text-underline-offset: 2px;
}
.photo-preferences { margin-inline: auto; }
.photo-preferences h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.photo-preferences [data-preferences-status] { color: var(--green); font-size: .9rem; }

.experience-body .photo-preferences-shell .public-content {
  align-items: center;
  justify-content: center;
}
.experience-body .photo-preferences {
  font-size: clamp(.83rem, 1.85dvh, 1rem);
  line-height: 1.4;
  margin: 0;
  padding: clamp(12px, 2.2dvh, 24px);
  text-align: center;
  width: min(100%, 600px);
}
.experience-body .photo-preferences h1 {
  font-size: clamp(1.4rem, 3.8dvh, 2.25rem);
  line-height: 1.06;
  margin: 5px 0 10px;
}
.experience-body .photo-preferences > p:not(.eyebrow) { margin: 8px 0 12px; }
.experience-body .photo-preferences .gallery {
  font-size: inherit;
  margin: 8px 0 0;
  text-align: left;
}
.experience-body .photo-preferences .primary-button,
.experience-body .photo-preferences .secondary-button {
  font-size: .87rem;
  margin: 10px auto 0;
  min-height: 40px;
  padding: 10px 18px;
}
.experience-body .photo-preferences [data-preferences-status] {
  font-size: .8rem;
  line-height: 1.3;
  margin: 8px 0 0;
  min-height: 2.6em;
}

@media (orientation: landscape) and (max-height: 520px) and (min-width: 550px) {
  .experience-body .photo-preferences {
    column-gap: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 900px;
  }
  .experience-body .photo-preferences > .eyebrow,
  .experience-body .photo-preferences > h1,
  .experience-body .photo-preferences > p,
  .experience-body .photo-preferences > a { grid-column: 1; }
  .experience-body .photo-preferences form {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 4;
  }
}

html:has(> body.experience-body) {
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.experience-body .photo-deletion-shell .public-content {
  align-items: center;
  justify-content: center;
}
.experience-body .photo-deletion-card {
  max-width: 580px;
  text-align: center;
}
.experience-body .photo-deletion-card h1 {
  font-size: clamp(1.5rem, 5dvh, 2.5rem);
  line-height: 1.05;
}
.experience-body .photo-deletion-card p {
  font-size: clamp(.8rem, 2.5dvh, 1rem);
  line-height: 1.4;
  margin: clamp(8px, 2dvh, 16px) 0;
}
.experience-body .photo-deletion-card form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.experience-body .photo-deletion-card .primary-button,
.experience-body .photo-deletion-card .secondary-button {
  font-size: .85rem;
  margin: 0;
  min-height: 44px;
  padding: 10px 16px;
}

body.experience-body {
  --experience-header-height: clamp(58px, 10dvh, 78px);
  --experience-footer-height: clamp(28px, 5dvh, 38px);
  --experience-page-max: 1500px;
  --experience-content-max: 1040px;
  background: radial-gradient(circle at 92% 0%, #dcefae 0 10%, transparent 31%), var(--cream);
  height: 100svh;
  height: var(--experience-viewport-height, 100dvh);
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  width: 100%;
}

.experience-body .shell {
  display: grid;
  grid-template-rows: var(--experience-header-height) minmax(0, 1fr) var(--experience-footer-height);
  height: 100svh;
  height: var(--experience-viewport-height, 100dvh);
  margin-inline: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top), var(--experience-viewport-offset-top, 0px)) max(14px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  width: min(100%, var(--experience-page-max));
}

@media (orientation: portrait) {
  .is-ios-device body.experience-body .shell {
    padding-top: max(38px, env(safe-area-inset-top), var(--experience-viewport-offset-top, 0px));
  }
}

.experience-body .public-header {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
  min-height: 0;
  padding: 0;
}

.experience-body .brand {
  justify-content: center;
  max-width: none;
}

.experience-body .brand-system,
.experience-body .kiosk-landing-shell .brand-system {
  display: block;
  flex: none;
  height: min(64px, calc(var(--experience-header-height) - 8px));
  object-fit: contain;
  object-position: center;
  width: clamp(118px, 18dvh, 144px);
}

.experience-body .brand-system-white {
  display: none;
}

.experience-body .kiosk-landing-shell .brand-system-white {
  display: none;
}

.experience-body .brand-divider,
.experience-body .brand-experience {
  display: none;
}

.experience-body .public-content {
  display: flex;
  flex: none;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.experience-body .public-footer {
  align-items: center;
  align-self: stretch;
  border-top: 1px solid rgba(17, 51, 38, .12);
  display: flex;
  font-size: .6rem;
  gap: 8px;
  height: auto;
  justify-content: center;
  letter-spacing: .04em;
  margin: 0;
  min-height: 0;
  padding: 5px 0 0;
  text-align: center;
}

.experience-body .public-footer img {
  max-height: 20px;
  width: 62px;
}

.experience-body .hero,
.experience-body .capture-heading,
.experience-body .result-heading {
  flex: 0 0 auto;
  margin: clamp(4px, 1.2dvh, 10px) auto clamp(8px, 1.8dvh, 14px);
  text-align: center;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.experience-body .eyebrow {
  font-size: clamp(.63rem, 1.35dvh, .74rem);
  line-height: 1.2;
  margin: 0 0 clamp(5px, .9dvh, 8px);
}

.experience-body h1 {
  font-size: clamp(2rem, 4.5vw, 3.9rem);
  line-height: .96;
  max-width: 100%;
  overflow-wrap: break-word;
}

.experience-body .lede,
.experience-body .capture-heading > p:not(.eyebrow),
.experience-body .result-heading > p:not(.eyebrow) {
  font-size: clamp(.82rem, 2dvh, 1.05rem);
  line-height: 1.35;
  margin: clamp(6px, 1.2dvh, 10px) auto 0;
}

.experience-body .primary-button,
.experience-body .secondary-button {
  flex: 0 0 auto;
  font-size: clamp(.78rem, 1.9dvh, .96rem);
  gap: 10px;
  margin-top: 0;
  min-height: clamp(44px, 6.6dvh, 52px);
  padding-inline: clamp(16px, 2.4vw, 24px);
  white-space: nowrap;
}

.experience-body .primary-button:focus-visible,
.experience-body .secondary-button:focus-visible,
.experience-body .scene-pagination button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.experience-body .form-error {
  bottom: calc(var(--experience-viewport-bottom, 0px) + var(--experience-footer-height) + max(8px, env(safe-area-inset-bottom)));
  left: 50%;
  margin: 0;
  max-width: min(560px, calc(100vw - 28px));
  position: fixed;
  transform: translateX(-50%);
  width: max-content;
  z-index: 30;
}

/* Landing and scenario selection. */
.experience-body .experience-landing-shell .public-content {
  align-items: stretch;
}

.experience-body .experience-landing-shell .hero {
  max-width: 780px;
}

.experience-body .experience-landing-shell .hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  margin-inline: auto;
  max-width: 760px;
}

.experience-body .experience-landing-shell .hero .lede {
  max-width: 680px;
}

.experience-body .experience-landing-shell .scene-form,
.experience-body .experience-landing-shell .experience-step {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.experience-body .experience-landing-shell .scene-grid {
  align-content: center;
  align-self: center;
  flex: 1 1 auto;
  gap: clamp(10px, 1.5vw, 18px);
  justify-content: center;
  max-width: var(--experience-content-max);
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.experience-body .kiosk-landing-shell .scene-grid[data-swipe-pagination="true"] {
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.experience-body .experience-landing-shell .scene-card {
  border-radius: clamp(16px, 2.4vmin, 24px);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: clamp(9px, 1.5vmin, 17px);
}

.experience-body .experience-landing-shell .scene-card:hover,
.experience-body .experience-landing-shell .scene-card:focus-visible {
  transform: none;
}

.experience-body .experience-landing-shell .scene-card.selected {
  box-shadow: inset 0 0 0 3px var(--lime), inset 0 0 0 7px rgba(201, 239, 100, .28);
}

.experience-body .experience-landing-shell .scene-content {
  gap: clamp(2px, .6vmin, 6px);
  min-width: 0;
}

.experience-body .experience-landing-shell .scene-content strong,
.experience-body .experience-landing-shell .scene-content small {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.experience-body .experience-landing-shell .scene-content strong {
  overflow-wrap: normal;
  word-break: normal;
}

.experience-body .experience-landing-shell .scene-pagination {
  align-items: center;
  display: none;
  flex: 0 0 clamp(34px, 5.4dvh, 40px);
  gap: 10px;
  justify-content: center;
  min-height: 0;
  visibility: hidden;
}

.experience-body .experience-landing-shell .scene-pagination.has-multiple-pages {
  display: flex;
  visibility: visible;
}

.experience-body .experience-landing-shell .scene-pagination button {
  border-radius: 12px;
  font-size: 1.1rem;
  height: clamp(30px, 4.8dvh, 36px);
  width: 46px;
}

.experience-body .experience-landing-shell #scene-next {
  align-self: center;
  margin: clamp(6px, 1.3dvh, 10px) auto 0;
  width: min(100%, 760px);
}

.experience-body .kiosk-landing-shell #scene-next {
  border-radius: 20px;
  height: clamp(58px, 9dvh, 72px);
  margin: clamp(5px, 1dvh, 9px) auto;
  min-height: 0;
  padding: 0;
  width: clamp(72px, 11dvh, 88px);
}

.experience-body .kiosk-landing-shell #scene-next .button-icon {
  font-size: 2rem;
}

/* Authorization is kept as a balanced two-column decision on every viewport. */
.experience-body .experience-landing-shell:has(.authorization-step.is-active) .hero {
  display: none;
}

.experience-body .experience-landing-shell .authorization-step {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  margin: 0 auto;
  max-width: 820px;
  min-height: 0;
  text-align: center;
  width: 100%;
}

.experience-body .authorization-step > h2 {
  font-size: clamp(1.75rem, min(6dvh, 11vw), 3.35rem);
  line-height: .96;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.experience-body .authorization-step > p:not(.eyebrow) {
  font-size: clamp(.78rem, 1.9dvh, 1rem);
  line-height: 1.35;
  margin: clamp(6px, 1.2dvh, 10px) auto 0;
  max-width: 630px;
}

.experience-body .authorization-options {
  display: grid;
  gap: clamp(10px, 4vw, 44px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  margin-top: clamp(10px, 2dvh, 18px);
  max-width: 680px;
  width: 100%;
}

.experience-body .authorization-option {
  display: flex;
  flex-direction: column;
  justify-self: center;
  margin: 0;
  min-width: 0;
  width: min(100%, clamp(140px, 30dvh, 280px));
}

.experience-body .authorization-tile {
  aspect-ratio: 1;
  border-radius: clamp(18px, 3vmin, 25px);
  min-height: 0;
  padding: clamp(12px, 2.4dvh, 20px);
  width: 100%;
}

.experience-body .authorization-tile:hover,
.experience-body .authorization-tile:focus-visible {
  transform: none;
}

.experience-body .authorization-check {
  height: clamp(21px, 3.3dvh, 26px);
  left: clamp(11px, 2dvh, 17px);
  top: clamp(11px, 2dvh, 17px);
  width: clamp(21px, 3.3dvh, 26px);
}

.experience-body .authorization-tile strong {
  font-size: clamp(1.35rem, 4dvh, 1.95rem);
  line-height: .9;
}

.experience-body .authorization-tile small {
  font-size: clamp(.58rem, 1.35dvh, .7rem);
  margin-top: clamp(7px, 1.5dvh, 12px);
}

.experience-body .authorization-option > p {
  color: #52655b;
  font-size: clamp(.65rem, 1.55dvh, .8rem);
  line-height: 1.3;
  margin: clamp(7px, 1.2dvh, 11px) 0 0;
  overflow-wrap: anywhere;
  text-align: center;
}

.experience-body .authorization-step .step-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: clamp(7px, 1.2vw, 11px);
  justify-content: center;
  margin-top: clamp(8px, 1.6dvh, 14px);
  max-width: 480px;
  width: 100%;
}

.experience-body .authorization-step .step-actions .primary-button,
.experience-body .authorization-step .step-actions .secondary-button {
  margin: 0;
}

.experience-body .authorization-step .step-actions .primary-button {
  flex: 1 1 auto;
}

/* Capture uses the same portrait crop shown in the generated result. */
body.experience-body:has(> .capture-shell) {
  background: #082b20;
}

.experience-body .capture-shell {
  --capture-reserve: 302px;
  background: transparent;
  color: #fff;
}

.experience-body .capture-shell .brand-system-color {
  display: none;
}

.experience-body .capture-shell .brand-system-white {
  display: block;
  filter: brightness(0) invert(1);
}

.experience-body .capture-shell .public-footer {
  border-top-color: rgba(255, 255, 255, .16);
}

.experience-body .capture-shell .public-content {
  align-items: center;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
}

.experience-body .capture-shell .capture-heading {
  margin: 2px auto clamp(7px, 1.3dvh, 11px);
  max-width: 760px;
}

.experience-body .capture-shell .capture-heading h1 {
  font-size: clamp(1.8rem, 5.2dvh, 3rem);
  line-height: .96;
}

.experience-body .capture-shell .capture-heading > p:not(.eyebrow) {
  color: #c7d8ce;
}

.experience-body .capture-shell .camera-stage {
  align-self: center;
  aspect-ratio: 4 / 5;
  border-radius: clamp(18px, 2.8vmin, 26px);
  height: 100%;
  margin: 0;
  max-height: 100%;
  min-height: 0;
  width: auto;
}

.experience-body .capture-shell .camera-stage video,
.experience-body .capture-shell .camera-stage img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.experience-body .capture-shell .camera-stage::after {
  height: min(68%, 370px);
  top: 14%;
  width: min(66%, 290px);
}

.experience-body .capture-shell .camera-stage.is-reviewing::after {
  display: none;
}

.experience-body .capture-shell .camera-stage.is-capturing::before {
  animation-fill-mode: forwards;
}

.experience-body .capture-shell .camera-status {
  font-size: clamp(.72rem, 1.7dvh, .88rem);
  padding: clamp(9px, 1.6dvh, 14px);
}

.experience-body .capture-shell .camera-stage.is-aligned .camera-status {
  /* The visible countdown already gives the instruction; keep the face clear. */
  visibility: hidden;
}

.experience-body .capture-shell .auto-countdown {
  border-radius: 17px;
  max-width: calc(100% - 24px);
  min-width: 0;
  padding: 9px 16px;
  text-align: center;
  top: 14px;
  width: max-content;
}

.experience-body .capture-shell .auto-countdown strong {
  font-size: clamp(2.3rem, 6dvh, 3rem);
}

.experience-body .capture-shell .capture-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: center;
  margin-top: clamp(6px, 1.2dvh, 10px);
}

.experience-body .capture-shell .capture-actions .primary-button,
.experience-body .capture-shell .capture-actions .secondary-button {
  margin: 0;
}

/* Processing and final result: the 4:5 image is always the primary element. */
.experience-body .experience-result-shell .public-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.experience-body .experience-result-shell .result-heading {
  margin: 2px auto clamp(7px, 1.3dvh, 11px);
  max-width: 760px;
}

.experience-body .experience-result-shell .result-heading h1 {
  font-size: clamp(1.8rem, 5.4dvh, 3rem);
  line-height: .97;
}

.experience-body .experience-result-shell .result-layout {
  align-items: stretch;
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 620px);
  height: 100%;
  justify-content: center;
  margin: 0 auto;
  max-width: 1020px;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.experience-body .result-layout:has(> .result-support-row > :not([hidden])) {
  gap: clamp(16px, 2.6vw, 30px);
  grid-template-columns: minmax(300px, 620px) minmax(240px, 300px);
}

.experience-body .result-primary-column {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.experience-body .experience-result-shell .result-stage {
  aspect-ratio: 4 / 5;
  background: #e2e9dc;
  border-radius: clamp(18px, 2.8vmin, 26px);
  flex: 1 1 auto;
  height: 100%;
  margin: 0 auto;
  max-height: none;
  max-width: 100%;
  min-height: 0;
  width: auto;
}

.experience-body .result-layout.is-ready .result-stage {
  width: auto;
}

.experience-body .experience-result-shell .result-stage img {
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: contain;
  width: 100%;
}

.experience-body .preview-notice,
.experience-body .final-notice {
  align-items: center;
  border-radius: 999px;
  bottom: 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 22px);
  padding: 8px 13px;
  text-wrap: balance;
  white-space: normal;
}

.experience-body .preview-notice strong,
.experience-body .preview-notice span,
.experience-body .final-notice strong,
.experience-body .final-notice span {
  display: block;
  font-size: clamp(.61rem, 1.35dvh, .72rem);
}

.experience-body .preview-notice span::before,
.experience-body .final-notice span::before {
  content: "";
}

.experience-body .generation-progress {
  flex: 0 0 auto;
  margin: clamp(7px, 1.2dvh, 11px) auto 0;
  max-width: 400px;
  width: min(100%, 400px);
}

.experience-body .generation-progress p {
  font-size: clamp(.67rem, 1.35dvh, .77rem);
  margin-top: 6px;
}

.experience-body .progress-copy {
  align-items: flex-start;
  font-size: clamp(.7rem, 1.45dvh, .8rem);
  gap: 10px;
  margin-bottom: 6px;
}

.experience-body .progress-copy strong {
  min-width: 0;
}

.experience-body .progress-copy span {
  flex: 0 0 auto;
}

.experience-body .progress-track {
  height: 8px;
}

.experience-body .result-support-row {
  align-content: center;
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  justify-content: stretch;
  margin: 0;
  max-width: none;
  min-height: 0;
  width: 100%;
}

.experience-body .result-support-row:has(> [hidden]:only-child) {
  display: none;
}

.experience-body .result-actions,
.experience-body .kiosk-handoff {
  align-self: center;
  background: rgba(255, 253, 247, .94);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(17, 51, 38, .1);
  height: auto;
  margin: 0;
  padding: clamp(13px, 2dvh, 18px);
  position: static;
  text-align: center;
  width: 100%;
}

.experience-body .result-actions {
  display: grid;
  gap: 10px;
}

.experience-body .result-actions .primary-button {
  margin: 0;
  width: 100%;
}

/* Only the result actions use the locally compiled Bootstrap button component.
 * Keep the photograph dominant and the native sharing flow unchanged. */
.experience-body .result-support-row-single .result-actions {
  background: transparent;
  border: 0;
  box-shadow: none;
  gap: 8px;
  padding: 0;
}

.experience-body .photo-transfer-buttons {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 4px;
}

.experience-body .photo-transfer-buttons .photo-action-button {
  --bs-btn-padding-x: 16px;
  --bs-btn-padding-y: 10px;
  --bs-btn-font-family: inherit;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: 12px;
  --bs-btn-focus-box-shadow: 0 0 0 4px rgba(15, 71, 53, .14);
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: flex-start;
  margin: 0;
  min-height: 52px;
  min-width: 0;
  text-align: left;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  white-space: normal;
  width: 100%;
}

.experience-body .photo-transfer-buttons .photo-action-button.btn-primary {
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: #0b3b2b;
  --bs-btn-hover-border-color: #0b3b2b;
  --bs-btn-active-bg: #092f23;
  --bs-btn-active-border-color: #092f23;
  box-shadow: 0 3px 9px rgba(17, 51, 38, .12);
}

.experience-body .photo-transfer-buttons .photo-action-button.btn-outline-primary {
  --bs-btn-color: var(--green);
  --bs-btn-bg: #edf3e8;
  --bs-btn-border-color: #b2c5b5;
  --bs-btn-hover-color: var(--green);
  --bs-btn-hover-bg: #dce8d6;
  --bs-btn-hover-border-color: #8fa68e;
  --bs-btn-active-color: var(--green);
  --bs-btn-active-bg: #d4e2cd;
  --bs-btn-active-border-color: #718d73;
}

.experience-body .photo-transfer-buttons .photo-action-button.btn-outline-secondary {
  --bs-btn-color: #52635a;
  --bs-btn-bg: rgba(255, 253, 247, .6);
  --bs-btn-border-color: #cad3c9;
  --bs-btn-hover-color: var(--green);
  --bs-btn-hover-bg: #e9eee5;
  --bs-btn-hover-border-color: #a4b2a5;
  --bs-btn-active-color: var(--green);
  --bs-btn-active-bg: #e0e8dc;
  --bs-btn-active-border-color: #91a293;
}

.experience-body .photo-transfer-buttons .photo-action-button:hover {
  transform: none;
}

.experience-body .photo-transfer-buttons .photo-action-button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.experience-body .photo-transfer-buttons .photo-action-button:disabled {
  box-shadow: none;
}

.experience-body .photo-transfer-buttons .photo-action-icon {
  color: inherit;
  flex: 0 0 auto;
  height: 22px;
  width: 22px;
}

.experience-body .photo-transfer-buttons .btn-primary .photo-action-icon {
  color: var(--lime);
}

.experience-body .photo-transfer-buttons .photo-action-label {
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: normal;
  white-space: normal;
}

.experience-body .photo-share-status {
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .experience-body .photo-transfer-buttons .photo-action-button {
    transition: none;
  }
}

/* Fit the photo column to the image itself. A fixed, wide grid track would
 * leave an invisible gap and push the visible photo + actions off center. */
@media (orientation: landscape) {
  .experience-body .result-layout.is-ready:has(> .result-support-row-single > :not([hidden])) {
    --result-action-width: clamp(228px, 24vw, 288px);
    --result-action-gap: clamp(18px, 3vw, 40px);
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--result-action-gap);
    justify-content: center;
  }

  .experience-body .result-layout.is-ready:has(> .result-support-row-single > :not([hidden])) > .result-primary-column {
    aspect-ratio: 4 / 5;
    flex: 0 1 auto;
    height: 100%;
    max-width: min(620px, calc(100% - var(--result-action-width) - var(--result-action-gap)));
    width: auto;
  }

  .experience-body .result-layout.is-ready:has(> .result-support-row-single > :not([hidden])) .result-stage {
    flex: 0 1 auto;
    height: auto;
    max-height: 100%;
    width: 100%;
  }

  .experience-body .result-layout.is-ready > .result-support-row-single {
    flex: 0 0 var(--result-action-width, 288px);
    height: auto;
    width: var(--result-action-width, 288px);
  }
}

@media (orientation: portrait) {
  .experience-body .photo-transfer-buttons {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experience-body .photo-transfer-buttons:has(#share-photo-button:not([hidden])) {
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr));
  }

  .experience-body .photo-transfer-buttons .photo-action-button {
    --bs-btn-padding-x: 10px;
    --bs-btn-font-size: .8125rem;
    gap: 7px;
    justify-content: center;
    text-align: center;
  }

  .experience-body .experience-result-shell:not(.kiosk-result-shell) .result-layout:has(> .result-support-row > :not([hidden])) {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .experience-body .result-support-row-single {
    height: auto;
    justify-self: center;
    width: min(100%, 420px);
  }
}

@media (max-width: 380px) and (orientation: portrait) {
  .experience-body .photo-transfer-buttons {
    gap: 6px;
  }

  .experience-body .photo-transfer-buttons:has(#share-photo-button:not([hidden])) {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  }

  .experience-body .photo-transfer-buttons .photo-action-button {
    --bs-btn-padding-x: 6px;
    --bs-btn-padding-y: 8px;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: 10px;
    gap: 5px;
    min-height: 48px;
  }

  .experience-body .photo-transfer-buttons .photo-action-icon {
    height: 20px;
    width: 20px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .experience-body .photo-transfer-buttons {
    gap: 6px;
  }

  .experience-body .photo-transfer-buttons .photo-action-button {
    --bs-btn-padding-y: 8px;
    --bs-btn-font-size: .8125rem;
    min-height: 48px;
  }

  .experience-body .experience-result-shell:not(.kiosk-result-shell) .final-notice {
    display: none;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .experience-body .experience-result-shell:not(.kiosk-result-shell) .result-heading h1 {
    font-size: clamp(1.4rem, 6.8vw, 2rem);
    line-height: 1.04;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  .experience-body .result-support-row-single .result-actions {
    gap: 6px;
  }

  .experience-body .photo-share-status {
    font-size: .68rem;
  }

  .experience-body .experience-result-shell:not(.kiosk-result-shell) .final-notice {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 440px) {
  /* Leave room for a two-line live status without reducing touch targets or
   * letting actions and keyboard focus run into the heading/footer. */
  .experience-body .result-support-row-single .result-actions {
    gap: 4px;
  }
}

@media (orientation: landscape) and (max-height: 400px) {
  /* Small phones in landscape need two action rows, not smaller touch targets.
   * The photograph and its action panel still sit side by side. */
  .experience-body .photo-transfer-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .experience-body .photo-transfer-buttons #share-photo-button {
    grid-column: 1 / -1;
  }

  .experience-body .photo-transfer-buttons .photo-action-button {
    --bs-btn-padding-x: 10px;
    gap: 7px;
    justify-content: center;
    text-align: center;
  }
}

@media (orientation: landscape) and (max-height: 300px) {
  /* Account for the browser chrome on short phones. Keep the photo, all actions
   * and live feedback visible; only the redundant ready subtitle is omitted. */
  .experience-body .experience-result-shell:not(.kiosk-result-shell):has(.result-layout.is-ready) {
    --experience-header-height: 40px;
  }
}

@media (orientation: landscape) and (max-height: 340px) {
  .experience-body .experience-result-shell:not(.kiosk-result-shell):has(.result-layout.is-ready) #result-copy {
    display: none;
  }
}

@media (max-width: 360px) and (max-height: 700px) {
  .experience-body .experience-result-shell:not(.kiosk-result-shell) .result-heading .eyebrow {
    display: none;
  }
}

.experience-body .kiosk-result-shell {
  padding-right: max(14px, env(safe-area-inset-right));
  position: relative;
}

.experience-body .kiosk-handoff .eyebrow {
  margin-bottom: 5px;
}

.experience-body .kiosk-handoff h2 {
  font-size: clamp(1.25rem, 3dvh, 1.55rem);
  margin: 0;
}

.experience-body .kiosk-handoff p:not(.eyebrow) {
  font-size: clamp(.72rem, 1.5dvh, .82rem);
  line-height: 1.35;
  margin: 6px 0 9px;
}

.experience-body .kiosk-handoff .qr {
  border-width: 6px;
  margin: 0 auto 7px;
  width: clamp(120px, 18dvh, 160px);
}

.experience-body .kiosk-handoff small {
  font-size: clamp(.62rem, 1.25dvh, .7rem);
  line-height: 1.3;
}

.experience-body .kiosk-handoff .primary-button {
  margin-top: 9px;
  min-height: clamp(42px, 6dvh, 48px);
  width: 100%;
}

/* Compact phones and portrait tablets keep the same hierarchy without scrolling. */
@media (max-width: 760px) {
  .experience-body .shell {
    padding-left: max(13px, env(safe-area-inset-left));
    padding-right: max(13px, env(safe-area-inset-right));
  }

  .experience-body h1,
  .experience-body .experience-landing-shell .hero h1 {
    font-size: clamp(1.72rem, 8.1vw, 2.4rem);
  }

  .experience-body .experience-landing-shell .hero .lede {
    font-size: clamp(.8rem, 4.2vw, .96rem);
    line-height: 1.3;
    max-width: 34rem;
  }

  .experience-body .experience-landing-shell .hero {
    margin-bottom: 7px;
  }

  .experience-body .experience-landing-shell .scene-grid {
    gap: 10px;
  }

  .experience-body .experience-landing-shell #scene-next {
    width: min(100%, 520px);
  }

  .experience-body .authorization-options {
    gap: clamp(9px, 3.5vw, 16px);
  }

  .experience-body .authorization-option > p {
    text-align: center;
  }

  .experience-body .authorization-step .step-actions .secondary-button {
    padding-inline: 13px;
  }

  .experience-body .authorization-step .step-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .experience-body .authorization-step .step-actions .primary-button {
    line-height: 1.12;
    min-width: 0;
    padding-block: 8px;
    white-space: normal;
  }

  .experience-body .capture-shell {
    --capture-reserve: 286px;
  }

  .experience-body .result-layout:has(> .result-support-row > :not([hidden])) {
    gap: 9px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .experience-body .result-support-row {
    height: auto;
  }

  .experience-body .result-actions,
  .experience-body .kiosk-handoff {
    border-radius: 16px;
    padding: 11px;
  }

  .experience-body .kiosk-handoff {
    align-items: center;
    column-gap: 11px;
    display: grid;
    grid-template-columns: clamp(78px, 23vw, 108px) minmax(0, 1fr);
    text-align: left;
  }

  .experience-body .kiosk-handoff .qr {
    grid-column: 1;
    grid-row: 1 / 4;
    margin: 0;
    width: 100%;
  }

  .experience-body .kiosk-handoff .eyebrow {
    grid-column: 2;
    grid-row: 1;
  }

  .experience-body .kiosk-handoff h2 {
    grid-column: 2;
    grid-row: 2;
  }

  .experience-body .kiosk-handoff > p:not(.eyebrow),
  .experience-body .kiosk-handoff small {
    display: none;
  }

  .experience-body .kiosk-handoff .primary-button {
    grid-column: 2;
    grid-row: 3;
    margin-top: 6px;
  }
}

@media (max-width: 360px) {
  .experience-body .shell {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }

  .experience-body .authorization-options {
    gap: 8px;
  }

  .experience-body .authorization-tile strong {
    font-size: clamp(1.1rem, 6.2vw, 1.45rem);
  }

  .experience-body .authorization-option > p {
    font-size: .63rem;
  }
}

/* A viewer of a shared public link cannot delete its owner's photo. */
.experience-body .photo-transfer-buttons:not(:has(#delete-photo-link)) {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 760px), (orientation: portrait) {
  .experience-body .photo-transfer-buttons:not(:has(#delete-photo-link)):has(#share-photo-button:not([hidden])) {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}

/* Vertical totens stack the portrait photo and QR instead of shrinking both
 * into desktop columns. The camera also starts closer to its instruction. */
@media (orientation: portrait) and (min-width: 761px) {
  .experience-body .kiosk-landing-shell .authorization-step {
    justify-content: flex-start;
    padding-top: clamp(72px, 8dvh, 140px);
  }

  .experience-body .kiosk-capture-shell .camera-stage {
    align-self: start;
    height: auto;
    margin-top: clamp(28px, 4dvh, 70px);
    max-height: 100%;
    width: 100%;
  }

  .experience-body .kiosk-result-shell .result-layout:has(> .result-support-row > :not([hidden])) {
    align-content: start;
    gap: clamp(14px, 2dvh, 24px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    max-width: 760px;
    padding-top: clamp(16px, 2dvh, 32px);
  }

  .experience-body .kiosk-result-shell .result-layout:has(> .result-support-row > :not([hidden])) .result-primary-column {
    height: auto;
    justify-content: flex-start;
  }

  .experience-body .kiosk-result-shell .result-layout .result-stage {
    height: auto;
    max-height: none;
    width: 100%;
  }

  .experience-body .kiosk-result-shell .result-support-row {
    height: auto;
    justify-self: center;
    width: min(100%, 360px);
  }

  .experience-body .kiosk-result-shell .kiosk-handoff .qr {
    width: 170px;
  }
}

/* Regular portrait tablets stack the action area below the photograph. */
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1024px) {
  .experience-body .experience-result-shell:not(.kiosk-result-shell) .result-layout:has(> .result-support-row > :not([hidden])) {
    gap: 14px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .experience-body .experience-result-shell:not(.kiosk-result-shell) .result-support-row {
    height: auto;
    justify-self: center;
    width: min(100%, 360px);
  }
}

/* Short displays trade decoration for usable controls, never the core flow. */
@media (max-height: 700px) {
  body.experience-body {
    --experience-header-height: clamp(52px, 10dvh, 64px);
    --experience-footer-height: 28px;
  }

  .experience-body .shell {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    padding-top: max(5px, env(safe-area-inset-top));
  }

  .experience-body .hero,
  .experience-body .capture-heading,
  .experience-body .result-heading {
    margin-bottom: 6px;
    margin-top: 0;
  }

  .experience-body .experience-landing-shell .hero h1 {
    font-size: clamp(1.65rem, min(7.8dvh, 8.1vw), 2.4rem);
  }

  .experience-body .experience-landing-shell .hero .lede {
    font-size: clamp(.72rem, 2.3dvh, .9rem);
    margin-top: 5px;
  }

  .experience-body .experience-landing-shell .scene-pagination {
    flex-basis: 32px;
  }

  .experience-body .experience-landing-shell #scene-next {
    margin-top: 4px;
    min-height: 44px;
  }

  .experience-body .authorization-step > h2 {
    font-size: clamp(1.65rem, 6.5dvh, 2.35rem);
  }

  .experience-body .authorization-options {
    margin-top: 7px;
  }

  .experience-body .authorization-option {
    width: min(100%, clamp(102px, 22dvh, 148px));
  }

  .experience-body .authorization-option > p {
    font-size: clamp(.6rem, 1.75dvh, .72rem);
    line-height: 1.22;
    margin-top: 5px;
  }

  .experience-body .authorization-step .step-actions {
    margin-top: 6px;
  }

  .experience-body .capture-shell {
    --capture-reserve: 250px;
  }

  .experience-body .capture-shell .capture-heading h1,
  .experience-body .experience-result-shell .result-heading h1 {
    font-size: clamp(1.55rem, 6dvh, 2.25rem);
  }

  .experience-body .capture-shell .capture-heading > p:not(.eyebrow),
  .experience-body .experience-result-shell .result-heading > p:not(.eyebrow) {
    font-size: clamp(.7rem, 2dvh, .82rem);
    margin-top: 4px;
  }

  .experience-body .result-actions,
  .experience-body .kiosk-handoff {
    padding: 9px;
  }

  .experience-body .kiosk-handoff > p:not(.eyebrow),
  .experience-body .kiosk-handoff small {
    display: none;
  }

  .experience-body .kiosk-handoff .qr {
    width: clamp(72px, 14dvh, 96px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .experience-body .capture-shell {
    --capture-reserve: 210px;
  }

  .experience-body .experience-landing-shell .hero .eyebrow,
  .experience-body .capture-shell .capture-heading .eyebrow,
  .experience-body .experience-result-shell .result-heading .eyebrow {
    display: none;
  }

  .experience-body .experience-landing-shell .hero h1 {
    font-size: clamp(1.45rem, 8dvh, 2.1rem);
  }

  .experience-body .authorization-option {
    width: min(100%, clamp(76px, 20dvh, 104px));
  }

  .experience-body .authorization-tile strong {
    font-size: clamp(1rem, 4.8dvh, 1.35rem);
  }

  .experience-body .experience-result-shell .result-heading h1 {
    font-size: clamp(1.4rem, 6.5dvh, 1.9rem);
  }

  .experience-body .result-layout:has(> .result-support-row > :not([hidden])) {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
    grid-template-rows: minmax(0, 1fr);
  }

  .experience-body .result-support-row {
    height: 100%;
  }
}

/* Sideways phones keep each consent square and its explanation together,
 * using the available width instead of squeezing the copy into a tiny tile. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 480px) {
  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-step > h2 {
    font-size: clamp(1.35rem, 6dvh, 1.8rem);
    line-height: 1;
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-step > p:not(.eyebrow) {
    font-size: .72rem;
    margin-top: 4px;
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-options {
    gap: clamp(16px, 3vw, 24px);
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-step .authorization-option {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: clamp(106px, 30dvh, 128px) minmax(0, 1fr);
    width: 100%;
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-step .authorization-tile {
    border-radius: 18px;
    padding: 28px 6px 10px;
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-step .authorization-check {
    font-size: .8rem;
    height: 18px;
    left: 8px;
    top: 7px;
    width: 18px;
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-tile strong {
    font-size: 1.05rem;
    line-height: 1;
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-tile small {
    font-size: .54rem;
    margin-top: 5px;
  }

  .experience-body .experience-landing-shell:not(.kiosk-landing-shell) .authorization-option > p {
    font-size: .69rem;
    line-height: 1.3;
    margin: 0;
    text-align: left;
  }
}

/* On a sideways phone the camera gets the full available height, with its
 * instructions and manual/confirmation buttons centered alongside it. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 480px) {
  .experience-body .capture-shell:not(.kiosk-capture-shell) .public-content {
    column-gap: clamp(16px, 4vw, 32px);
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    margin-inline: auto;
    max-width: 800px;
  }

  .experience-body .capture-shell:not(.kiosk-capture-shell) .camera-stage {
    grid-column: 1;
    grid-row: 1 / -1;
    max-width: 100%;
  }

  .experience-body .capture-shell:not(.kiosk-capture-shell) .capture-heading {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 12px;
  }

  .experience-body .capture-shell:not(.kiosk-capture-shell) .capture-actions {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
    max-width: 100%;
  }

  .experience-body .capture-shell:not(.kiosk-capture-shell) .capture-actions button {
    font-size: .8rem;
    padding-inline: 14px;
  }

  .experience-body .capture-shell:not(.kiosk-capture-shell) #capture-error {
    grid-column: 2;
    grid-row: 4;
    margin-block: 8px 0;
  }
}

@media (orientation: landscape) and (max-height: 440px) and (min-width: 480px) and (min-aspect-ratio: 7 / 4) {
  .experience-body .capture-shell:not(.kiosk-capture-shell) .public-content {
    /* Wide phones need more room for the instructions than for a 4:5 frame. */
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }
}

/*
 * The standalone screensaver shares this file, but has its own explicit scope.
 * Generated photos are 4:5, so landscape displays preserve the complete image
 * instead of cropping faces to fill a wide screen.
 */
.screensaver-page .screensaver-ui,
.experience-body .screensaver .screensaver-ui {
  padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.screensaver-page .screensaver-touch,
.experience-body .screensaver .screensaver-touch {
  align-items: center;
  bottom: max(58px, calc(env(safe-area-inset-bottom) + 48px));
  left: 50%;
  margin: 0;
  min-height: 48px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.screensaver-page .screensaver-scenario,
.experience-body .screensaver .screensaver-scenario {
  bottom: clamp(150px, 21dvh, 188px);
}

.screensaver-page .screensaver-credit,
.experience-body .screensaver .screensaver-credit {
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  white-space: nowrap;
}

@media (orientation: landscape) {
  .screensaver-page .screensaver-slide,
  .experience-body .screensaver .screensaver-slide {
    display: grid;
    place-items: center;
  }

  .screensaver-page .screensaver-slide img,
  .experience-body .screensaver .screensaver-slide img {
    animation: none;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .screensaver-page .screensaver-shade,
  .experience-body .screensaver .screensaver-shade {
    background: linear-gradient(180deg, rgba(2, 20, 13, .54) 0, transparent 24%, transparent 62%, rgba(2, 20, 13, .72) 100%), linear-gradient(90deg, rgba(2, 20, 13, .28), transparent 34%, transparent 66%, rgba(2, 20, 13, .28));
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .screensaver-page .screensaver-touch,
  .experience-body .screensaver .screensaver-touch {
    bottom: max(14px, env(safe-area-inset-bottom));
    left: auto;
    right: max(18px, env(safe-area-inset-right));
    transform: none;
  }

  .screensaver-page .screensaver-touch-ring,
  .experience-body .screensaver .screensaver-touch-ring {
    height: 50px;
    width: 50px;
  }

  .screensaver-page .screensaver-scenario,
  .experience-body .screensaver .screensaver-scenario {
    bottom: 76px;
  }

  .screensaver-page .screensaver-credit,
  .experience-body .screensaver .screensaver-credit {
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(18px, env(safe-area-inset-left));
    right: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-body .scene-card,
  .experience-body .primary-button,
  .experience-body .secondary-button {
    transition: none;
  }
}