/* One original 1080 × 1920 portrait presentation at every viewport size. */
html, body, #root { max-width: 100%; overflow: hidden; }
#kiosk-viewport { position: fixed; inset: 0; overflow: auto; contain: size layout paint; background: #eef3fa; overscroll-behavior: contain; }
.flowcontent { display: contents; }
#stage[data-ribbon="true"] > .screen { bottom: 60px; }
#stage[data-layout="portrait"] .kiosk-demo-ribbon { bottom: 0; min-height: 60px; display: flex; align-items: center; justify-content: center; }

/* This native-size control occupies only the unused desktop side margin. */
.kiosk-view-toggle { position: fixed; z-index: 100; top: 50%; right: 12px; transform: translateY(-50%); width: 120px; min-height: 44px; padding: 10px 12px; border: 1px solid #b9c9df; border-radius: 12px; color: #193550; background: #fffffff2; font: 600 14px/1.3 system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 8px #19355012; }
.kiosk-view-toggle[hidden] { display: none; }
.kiosk-view-toggle:hover { background: #fff; border-color: #193550; }
.kiosk-view-toggle:focus-visible { outline: 3px solid #193550; outline-offset: 3px; }

/* All main application views share the established phone's outer dimensions.
   Only the whole portrait stage scales; long screen content scrolls inside.
   The smaller QR-scanning handset is an illustration, not a main view. */
#stage :is(.phone, .terminal, .gx, .kiosk-bank-check, .qes-explanation, .dyou-card) {
  box-sizing: border-box;
  width: 560px;
  min-width: 560px;
  max-width: 560px;
  height: 1000px;
  min-height: 1000px;
  max-height: 1000px;
  flex: none;
}

/* Portal variants keep their own colors inside the same black phone shell. */
#stage .terminal {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 0;
  border-radius: 70px;
  background: #0b0f1c;
}
#stage .terminal .term-screen {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  border-radius: 52px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  overflow-wrap: anywhere;
}
#stage .terminal .term-screen > * { flex-shrink: 0; }
#stage .terminal .term-screen > .ph-app { margin: -28px -28px 16px; padding: 22px 28px; border-radius: 52px 52px 0 0; }
#stage .terminal .term-foot { display: none; }
#stage .terminal .term-qr { flex-direction: column; align-items: stretch; gap: 22px; }
#stage .terminal .term-qr > .iphone-qr-scan { flex: none; width: 100%; height: 388px; }
#stage .terminal .ph-row { flex-direction: column; gap: 6px; }
#stage .terminal .ph-row span:last-child { min-width: 0; white-space: normal; text-align: left; overflow-wrap: anywhere; }
#stage .terminal .field-box { height: auto; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }

/* Gateway and standalone portal cards already own their content directly.
   A border supplies the same bezel without inserting or remounting children. */
#stage :is(.gx, .kiosk-bank-check, .qes-explanation, .dyou-card) {
  border: 22px solid #0b0f1c;
  border-radius: 70px;
  padding: 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  overflow-wrap: anywhere;
  background-clip: padding-box;
  box-shadow: 0 40px 100px #0b163047;
}
#stage .gx { padding-top: 0; padding-bottom: 0; }
#stage .gx > * { flex-shrink: 0; }
#stage :is(.gx-badge, .gx-foot) { margin-right: -28px; margin-left: -28px; padding: 22px; text-align: center; }
#stage .gx-route { flex-wrap: wrap; gap: 10px; }
#stage .gx-node { min-width: 0; max-width: 100%; }
#stage .gx-node > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#stage .gx-result { flex-wrap: wrap; padding: 24px; }
#stage .gx-result > span { min-width: 0; overflow-wrap: anywhere; }
#stage .kiosk-bank-check dl > div { flex-direction: column; gap: 6px; }
#stage .kiosk-bank-check dd { text-align: left; }
#stage .qes-explanation-actions { flex-direction: column; align-items: stretch; }

/* The merchant's existing phone also keeps long choices inside its body. */
#stage .phone .ph-body { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
#stage .phone .ph-body > * { flex-shrink: 0; }

/* Login start, request, success and failure use the same outer screen size as
   its wallet. Its phase navigation and demo footer remain outside the frame. */
#stage .dyou-card { align-self: center; }
#stage .dyou-card .dyou-device-options { grid-template-columns: 1fr; }
#stage .dyou-card .dyou-portal-top > div { min-width: 0; }
#stage .dyou-card .dyou-request-meta { flex-wrap: wrap; }
#stage .dyou-card .dyou-session > div { flex-direction: column; gap: 6px; }
#stage .dyou-card .dyou-session dd { text-align: left; }
#stage .dyou-content > :is(.dyou-consent-layout, .dyou-verification) { flex: none; }