html[data-display-mode="kiosk"] {
  --kiosk-content-width: min(90vw, 1120px);
  --kiosk-safe-bottom: max(16px, env(safe-area-inset-bottom), var(--kiosk-vv-bottom, 0px));
  --kiosk-control-height: 68px;
  --kiosk-standing-bottom-gap: 120px;
  font-size: clamp(17px, 1.45vw, 22px);
  overflow-x: hidden;
}

html[data-display-mode="kiosk"],
html[data-display-mode="kiosk"] body {
  width: 100%;
  min-height: var(--kiosk-vvh, 100dvh);
  overflow-x: hidden;
}

html[data-display-mode="kiosk"] body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-display-mode="kiosk"] :where(.page, .stage, .app, .social-page, main) {
  width: var(--kiosk-content-width) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

html[data-display-mode="kiosk"] :where(.frame, .viewport, .card, .report-top, .report-body) {
  width: 100% !important;
  max-width: 1120px !important;
}

html[data-display-mode="kiosk"] :where(button, [role="button"], .btn, .primary, .cta, .dock-btn, .choice-arrow) {
  min-height: var(--kiosk-control-height);
  touch-action: manipulation;
}

html[data-display-mode="kiosk"] :where(button, .btn, .primary, .cta, .dock-btn) {
  font-size: clamp(17px, 1.7vw, 24px);
}

html[data-display-mode="kiosk"] :where(h1, .hero h1, .persona-name) {
  font-size: clamp(38px, 5.2vw, 70px);
}

html[data-display-mode="kiosk"] :where(h2, .section-head h2, .report-title) {
  font-size: clamp(29px, 3.4vw, 48px);
}

html[data-display-mode="kiosk"] :where(.hero, .section, .panel, .entry-card, .result-section, .report-section) {
  padding-inline: clamp(24px, 4vw, 58px);
}

html[data-display-mode="kiosk"] img {
  max-width: 100%;
  height: auto;
}

/* Keep the two floor-adjacent primary actions inside the standing reach zone. */
html[data-display-mode="kiosk"] .multi-footer {
  bottom: calc(var(--kiosk-standing-bottom-gap) + var(--kiosk-vv-bottom, 0px)) !important;
}

html[data-display-mode="kiosk"] .question-screen.footer-visible {
  padding-bottom: calc(126px + var(--kiosk-standing-bottom-gap) + env(safe-area-inset-bottom)) !important;
}

html[data-display-mode="kiosk"] .ui .bot {
  bottom: calc(var(--kiosk-standing-bottom-gap) + var(--kiosk-vv-bottom, 0px)) !important;
}

/* The landing chooser stays in the standing reach zone on the kiosk display. */
html[data-display-mode="kiosk"] :is(.modal, .chooser) {
  top: var(--kiosk-vv-top, 0px) !important;
  bottom: auto !important;
  height: var(--kiosk-vvh, 100dvh) !important;
  align-items: center !important;
  justify-content: center !important;
  padding-bottom: var(--kiosk-safe-bottom);
  overflow: hidden !important;
}

html[data-display-mode="kiosk"] :is(.modal, .chooser) > .sheet {
  width: min(86vw, var(--kiosk-content-width)) !important;
  max-width: 960px !important;
  height: auto !important;
  max-height: min(80dvh, calc(var(--kiosk-vvh, 100dvh) - max(32px, var(--kiosk-vv-top, 0px)) - var(--kiosk-safe-bottom))) !important;
  padding: clamp(28px, 3vh, 46px) clamp(30px, 4vw, 54px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: clamp(28px, 3vw, 42px) !important;
  box-shadow: 0 28px 90px rgba(4, 24, 17, .24) !important;
  animation: none !important;
}

html[data-display-mode="kiosk"] :is(.modal, .chooser) .handle {
  display: none !important;
}

html[data-display-mode="kiosk"] :is(.modal, .chooser) .close {
  top: 22px !important;
  right: 22px !important;
  width: var(--kiosk-control-height) !important;
  height: var(--kiosk-control-height) !important;
  min-height: var(--kiosk-control-height) !important;
  font-size: 34px !important;
}

html[data-display-mode="kiosk"] :is(.modal, .chooser) .choices {
  gap: clamp(14px, 1.5vh, 22px);
  margin-top: clamp(18px, 2vh, 30px) !important;
}

html[data-display-mode="kiosk"] :is(.modal, .chooser) .choice {
  min-height: clamp(150px, 14vh, 205px);
}

/* Shared fixed overlays and bottom sheets follow the real Chrome viewport. */
html[data-display-mode="kiosk"] :where(.hotfix-layer, .sheet-mask, .ask-mask, .exit-layer, .save-preview) {
  top: var(--kiosk-vv-top, 0px) !important;
  bottom: auto !important;
  height: var(--kiosk-vvh, 100dvh) !important;
  max-height: var(--kiosk-vvh, 100dvh) !important;
  overflow: hidden !important;
}

html[data-display-mode="kiosk"] :where(.hotfix-sheet, .sheet-mask > .sheet, .ask-sheet, .exit-dialog) {
  width: var(--kiosk-content-width) !important;
  max-width: 960px !important;
  max-height: min(80dvh, calc(var(--kiosk-vvh, 100dvh) - max(32px, var(--kiosk-vv-top, 0px)) - var(--kiosk-safe-bottom))) !important;
  padding-bottom: var(--kiosk-safe-bottom) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-display-mode="kiosk"] :where(.sheet-actions, .dialog-actions, .ask-actions) {
  position: sticky;
  z-index: 4;
  bottom: 0;
  padding-bottom: var(--kiosk-safe-bottom);
  background: inherit;
}

html[data-display-mode="kiosk"] .report {
  height: var(--kiosk-vvh, 100dvh) !important;
  padding-top: var(--kiosk-vv-top, 0px);
  padding-bottom: var(--kiosk-safe-bottom);
}

html[data-display-mode="kiosk"] .report-body {
  padding-inline: clamp(24px, 4vw, 58px) !important;
}

html[data-display-mode="kiosk"] .hotfix-sheet textarea {
  min-height: 190px;
}

html[data-display-mode="kiosk"] .exit-dialog {
  padding: clamp(28px, 4vw, 48px) !important;
}

/* City and team result controls keep their full width without clipping. */
html[data-display-mode="kiosk"] :where(.dock) {
  width: var(--kiosk-content-width) !important;
  max-width: 1120px !important;
  padding-bottom: var(--kiosk-safe-bottom) !important;
}

html[data-display-mode="kiosk"] :where(.sheet-mask > .sheet) {
  left: 50% !important;
}

html[data-display-mode="kiosk"] :where(.ask-sheet) {
  margin-inline: auto;
}

/* Keep content balanced on large portrait screens without changing phone layout. */
@media (min-width: 720px) {
  html[data-display-mode="kiosk"] .pain-list {
    max-width: 820px;
  }

  html[data-display-mode="kiosk"] :where(.upload-intro, .waiting-box, .ratelimit-box, .safety-box, .allbad-box, .moments-error, .post-commit-guide) {
    max-width: 860px;
  }

  html[data-display-mode="kiosk"] :where(.slots, .result-grid, .badge-grid, .city-grid) {
    gap: clamp(18px, 2.5vw, 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-display-mode="kiosk"] *,
  html[data-display-mode="kiosk"] *::before,
  html[data-display-mode="kiosk"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}