/* Samsung QM55B-T 55-inch 4K portrait kiosk (2160x3840 native pixels).
 * Use CSS viewport sizing: the built-in Tizen browser may expose a different
 * logical resolution from the physical panel. One 9:16 shell for every route.
 * Mobile-phone sessions remain independently responsive.
 */
html {height:100%}
body{
  min-height:0!important;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  overscroll-behavior:none;
}
.shell{
  flex:none;
  width:min(100vw,56.25vh);
  width:min(100vw,56.25dvh);
  height:min(100vh,177.77778vw);
  height:min(100dvh,177.77778vw);
  max-width:none!important;
  min-height:0!important;
  overflow:hidden;
  grid-template-rows:auto minmax(0,1fr) auto;
  position:relative;
  isolation:isolate;
}
.shell main{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;
  padding-bottom:36px;
}
.shell .topbar{position:relative;z-index:15}
.shell .top-actions{align-items:center}
.shell footer{position:relative;z-index:15}
.shell .actions>button,
.shell button.primary,
.shell button.secondary,
.shell button.ghost,
.shell .tab{min-height:48px}
.shell input,.shell select,.shell textarea{font-size:max(16px,1em)}
@media(min-width:701px) and (max-aspect-ratio:3/4){
  .shell main{padding:clamp(20px,4.2vw,54px)}
  .shell .topbar{padding:clamp(12px,1.7vw,24px)}
  .shell h1{font-size:clamp(36px,5.4vw,67px)}
  .shell h2{font-size:clamp(30px,4.2vw,52px)}
  .shell p,.shell li{line-height:1.55}
}
@media(max-width:700px){
  body{display:block;overflow:hidden}
  .shell{width:100%;height:100vh;height:100dvh;min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .shell *, .shell *::before, .shell *::after{
    animation:none!important;transition:none!important;scroll-behavior:auto!important
  }
}


/* 2026-10-27 portrait QA hardening.
 * The shell is narrower than the browser window on desktop previews.
 * Never size typography or header controls against the full viewport width.
 * vh fallback intentionally supports older Samsung Tizen/Chromium builds.
 */
.shell { min-width:0; box-sizing:border-box; }
.shell *, .shell *::before, .shell *::after { box-sizing:border-box; }
.shell .topbar {
  display:flex; flex-wrap:nowrap; justify-content:space-between;
  align-items:center; gap:clamp(8px,1vh,16px);
  padding:clamp(10px,1.45vh,20px) clamp(12px,1.8vh,26px);
  min-width:0; flex-shrink:0; position:relative;
}
.shell .brand { display:block; flex:0 1 42%; min-width:0; }
.shell .brand img { display:block; width:100%; max-width:210px; height:auto; max-height:clamp(70px,13vh,170px); object-fit:contain; object-position:left center; }
.shell .top-actions { display:flex; flex:1 1 55%; min-width:0; align-items:center; justify-content:flex-end; gap:clamp(6px,.8vh,12px); }
.shell .top-actions button, .shell .top-actions a {
  flex:0 1 auto; min-width:0; max-width:48%; white-space:normal;
  overflow-wrap:break-word; text-align:center; line-height:1.2;
  font-size:clamp(12px,1.35vh,17px);
  padding:clamp(9px,1.1vh,14px) clamp(8px,1.3vh,15px);
  min-height:48px; border-radius:20px;
}
.shell main {
  min-width:0; max-width:100%; padding:clamp(16px,2.1vh,32px);
  font-size:clamp(15px,1.5vh,19px);
}
.shell main h1 {font-size:clamp(30px,3.6vh,48px); line-height:1.1; overflow-wrap:break-word; letter-spacing:-.028em}
.shell main h2 {font-size:clamp(25px,2.85vh,39px); line-height:1.13; overflow-wrap:break-word}
.shell main h3 {font-size:clamp(19px,2vh,25px); line-height:1.18; overflow-wrap:break-word}
.shell main .lede {font-size:clamp(16px,1.7vh,21px); line-height:1.48; max-width:100%}
.shell main .lede.small {font-size:clamp(15px,1.55vh,19px)}
.shell .eyebrow,.shell .kicker {font-size:clamp(11px,1.1vh,14px)}
.shell .demo-tabs {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(6px,.8vh,12px); margin:clamp(14px,1.6vh,22px) 0}
.shell .tab {min-width:0; overflow-wrap:break-word; font-size:clamp(13px,1.3vh,17px); line-height:1.3; padding:clamp(10px,1vh,14px)}
.shell .demo-card {min-width:0; min-height:0; padding:clamp(16px,1.8vh,24px)}
.shell .actions {display:flex; flex-wrap:wrap; gap:10px}
.shell .actions > *, .shell .keep-grid > * {white-space:normal; overflow-wrap:break-word}
.shell .keep-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.shell .next-card {min-width:0; flex-wrap:wrap}
.shell .step-head {min-width:0; flex-wrap:wrap}
.shell .step-head > * {min-width:0}
.shell .choices {grid-template-columns:repeat(2,minmax(0,1fr))}
.shell .two,.shell .bonus-grid,.shell .details-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.shell .choice-card,.shell .choice,.shell .consent,.shell .warning,.shell .prompt,.shell .plan-section,.shell .result-card {min-width:0; overflow-wrap:anywhere}
.shell .prompt {white-space:pre-wrap; word-break:break-word; font-size:clamp(13px,1.35vh,17px)}
.shell .qr-wrap {max-width:100%}
.shell footer {min-width:0; gap:8px; flex-wrap:wrap; font-size:clamp(10px,1vh,13px); line-height:1.3; padding:clamp(10px,1.2vh,16px); }
.shell footer > * {min-width:0; max-width:100%; overflow-wrap:anywhere}
@media (max-width:700px) {
  .shell .topbar {gap:8px; align-items:center}
  .shell .brand {flex-basis:40%}
  .shell .top-actions {flex-basis:58%; flex-direction:row; gap:5px}
  .shell .top-actions button,.shell .top-actions a {min-height:44px; padding:8px 6px; font-size:clamp(11px,1.25vh,14px)}
  .shell main {padding:clamp(14px,1.9vh,24px)}
  .shell main h1 {font-size:clamp(27px,3.35vh,42px)}
  .shell main h2 {font-size:clamp(23px,2.8vh,34px)}
  .shell .keep-grid,.shell .choices,.shell .two,.shell .bonus-grid,.shell .details-grid {grid-template-columns:1fr}
  .shell .demo-tabs {grid-template-columns:repeat(3,minmax(0,1fr))}
}