/* Layout shared by large portrait touch screens and laptop demos. Uses one scale throughout. */
html[data-kiosk=true]{--layout-edge:clamp(16px,4.5*var(--u),64px);--layout-gap:clamp(8px,2*var(--u),28px);--layout-button:clamp(48px,12.5*var(--u),180px);--layout-row:clamp(54px,14.5*var(--u),210px);--settings-size:clamp(48px,8*var(--u),76px)}
[data-kiosk=true] .button{min-height:44px;min-width:0;padding:calc(2*var(--u)) calc(3*var(--u));gap:calc(2*var(--u));border-radius:calc(8*var(--u));line-height:1.2}
[data-kiosk=true] .button svg{width:clamp(22px,6.8*var(--u),76px);height:clamp(22px,6.8*var(--u),76px);flex-shrink:0}
:root[data-kiosk=true] #open-settings{top:clamp(12px,1.8dvh,40px);right:var(--layout-edge);width:var(--settings-size);height:var(--settings-size);min-height:44px;padding:calc(var(--settings-size)*.25);border-radius:calc(var(--settings-size)*.32)}
[data-kiosk=true] #open-settings svg{width:100%;height:100%}
/* The bottom stack takes its real height; it cannot intersect the selectors. */
:root[data-kiosk=true] .choose{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:var(--layout-gap);padding:3.8dvh var(--layout-edge) 2dvh}
:root[data-kiosk=true] .choose>h1{position:relative;inset:auto;grid-row:1;margin:0;padding:0 calc(var(--settings-size) + 8px) 0 0;z-index:1;font-size:calc(9.8*var(--u));text-align:left}
:root[data-kiosk=true] .choose .choose-hint{position:relative;inset:auto;grid-row:2;margin:0;font-size:clamp(14px,3.7*var(--u),48px);line-height:1.3}
:root[data-kiosk=true] .choose .look-selectors{position:relative;inset:auto;grid-row:4;gap:var(--layout-gap);min-width:0}
:root[data-kiosk=true] .choose .look-selector{height:var(--layout-row);min-height:44px;min-width:0;padding:calc(1.8*var(--u)) calc(3.2*var(--u));grid-template-columns:calc(10.5*var(--u)) minmax(0,.85fr) minmax(0,1fr) calc(5.6*var(--u));gap:calc(1.8*var(--u));border-radius:calc(5.2*var(--u));font-size:clamp(16px,4.65*var(--u),62px)}
[data-kiosk=true] .look-selector strong{font-size:clamp(16px,4.55*var(--u),61px);padding:calc(1.8*var(--u)) 0;min-width:0}
[data-kiosk=true] .look-selector strong{white-space:normal;line-height:1.15;padding:0;overflow-wrap:anywhere}
[data-kiosk=true] #choice-scene{position:absolute;inset:0;width:100%;height:100%}
:root[data-kiosk=true] .choose .selection-person,:root[data-kiosk=true] .choose .selection-backdrop{opacity:0;pointer-events:none}
:root[data-kiosk=true] .choose .selection-preview:after{display:none}
[data-kiosk=true] .chevron svg{width:calc(5.6*var(--u));height:calc(5.6*var(--u));display:block}
:root[data-kiosk=true] .choose .actions{position:relative;inset:auto;grid-row:5;grid-template-columns:1fr;gap:var(--layout-gap);margin:0}
:root[data-kiosk=true] .choose .actions .button{height:var(--layout-button);min-height:44px;padding:calc(2*var(--u));font-size:clamp(16px,4.7*var(--u),62px);gap:calc(2*var(--u));border-radius:calc(8*var(--u))}
[data-kiosk=true] #surprise svg{width:calc(6*var(--u));height:calc(6*var(--u))}
:root[data-kiosk=true] .choose .demo-detail{position:relative;inset:auto;grid-row:6;font-size:clamp(10px,2.35*var(--u),28px);line-height:1.2;margin:0;text-align:center;z-index:1}
[data-kiosk=true] #retake{right:var(--layout-edge);top:23%;min-height:44px;font-size:clamp(14px,3.5*var(--u),44px);padding:calc(2*var(--u)) calc(3*var(--u));border-radius:calc(5*var(--u));max-width:45%}
[data-kiosk=true] .welcome-copy p{margin-top:calc(3*var(--u))}
[data-kiosk=true] .welcome-actions .button{border-radius:calc(10*var(--u))}
[data-kiosk=true] .welcome-actions p{font-size:clamp(14px,3.9*var(--u),50px)}
:root[data-kiosk=true] .capture>h1,:root[data-kiosk=true] .processing>h1{right:calc(var(--layout-edge) + var(--settings-size) + 12px);left:var(--layout-edge)}
:root[data-kiosk=true] .capture .camera-instruction{font-size:clamp(14px,3.8*var(--u),44px);padding:calc(2*var(--u)) calc(3*var(--u));gap:calc(2*var(--u));border-radius:calc(5*var(--u))}
[data-kiosk=true] .camera-instruction svg{width:clamp(24px,6*var(--u),60px);height:clamp(24px,6*var(--u),60px)}
[data-kiosk=true] .capture .framing i{width:calc(9*var(--u));height:calc(9*var(--u))}
:root[data-kiosk=true] .capture .count-panel{gap:0 calc(3*var(--u));border-radius:calc(7*var(--u))}
[data-kiosk=true] .capture .count{border-width:calc(1.5*var(--u))}
[data-kiosk=true] #capture-status{font-size:clamp(14px,3.8*var(--u),46px)!important}
[data-kiosk=true] #camera-help{font-size:clamp(12px,3*var(--u),38px)!important;margin-top:calc(1*var(--u))}
:root[data-kiosk=true] .capture #cancel{font-size:clamp(16px,4.4*var(--u),56px);min-height:44px;border-radius:calc(8*var(--u))}
[data-kiosk=true] .camera-recovery{gap:var(--layout-gap);margin:0;width:100%}
[data-kiosk=true] .camera-recovery .button{font-size:clamp(14px,3.5*var(--u),44px);padding:calc(2*var(--u))}
[data-kiosk=true] .flow-mode{font-size:clamp(14px,3.4*var(--u),44px);left:var(--layout-edge);right:var(--layout-edge)}
[data-kiosk=true] .flow-card{left:var(--layout-edge);right:var(--layout-edge);padding:calc(4*var(--u));border-radius:calc(6*var(--u))}
[data-kiosk=true] .flow-summary{font-size:clamp(16px,4.6*var(--u),60px);margin-bottom:calc(2*var(--u))}
[data-kiosk=true] .flow-message{font-size:clamp(14px,3.5*var(--u),46px)}
[data-kiosk=true] .processing[data-job] .flow-orbit{width:clamp(32px,8*var(--u),80px);height:clamp(32px,8*var(--u),80px);margin-bottom:var(--layout-gap)}
[data-kiosk=true] .processing[data-job][data-state=ready] .flow-orbit:after{width:35%;height:20%;left:30%;top:33%}
[data-kiosk=true] #flow-retry{font-size:clamp(16px,3.5*var(--u),44px);padding:calc(2*var(--u)) calc(4*var(--u));margin-top:var(--layout-gap)}
[data-kiosk=true] .processing .flow-actions{left:var(--layout-edge);right:var(--layout-edge);gap:var(--layout-gap)}
[data-kiosk=true] .flow-actions .button{font-size:clamp(16px,4*var(--u),52px);padding:calc(3*var(--u)) calc(2*var(--u));border-radius:calc(8*var(--u));min-height:var(--layout-button)}
[data-kiosk=true] .result .actions{gap:var(--layout-gap);left:var(--layout-edge);right:var(--layout-edge);border-radius:calc(10*var(--u))}
[data-kiosk=true] .result .actions .button{font-size:clamp(16px,4.1*var(--u),54px);padding:calc(1.8*var(--u)) calc(2.4*var(--u));gap:calc(2.6*var(--u));border-radius:calc(9*var(--u))}
:root[data-kiosk=true] .result #finish{top:calc(clamp(12px,1.8dvh,40px) + var(--settings-size) + 12px);right:var(--layout-edge);min-height:44px;height:44px}
/* Landscape arithmetic: 58% photo + 42% controls, with the same outer gutters. */
@media (min-aspect-ratio:1/1){
 html[data-kiosk=true]{--u:min(.75vw,.65dvh);--layout-edge:clamp(16px,4*var(--u),56px);--layout-row:clamp(44px,14.5*var(--u),120px);--layout-button:clamp(44px,12.5*var(--u),104px);--settings-size:clamp(44px,8*var(--u),64px)}
 :root[data-kiosk=true] .choose{grid-template-columns:minmax(0,58fr) minmax(0,42fr);padding-top:5dvh;padding-bottom:3dvh}
 :root[data-kiosk=true] .choose>h1,:root[data-kiosk=true] .choose .choose-hint,:root[data-kiosk=true] .choose .look-selectors,:root[data-kiosk=true] .choose .actions,:root[data-kiosk=true] .choose .demo-detail{grid-column:2}
 :root[data-kiosk=true] .choose:before{display:block;position:absolute;inset:0 0 0 53%;z-index:0;content:'';background:linear-gradient(90deg,transparent,var(--stage-top) 32%,var(--stage-bottom));pointer-events:none}
 :root[data-kiosk=true] .choose .selection-person{top:0;left:0;width:58%;height:100%;object-fit:contain;object-position:center;mask-image:linear-gradient(90deg,#000 0%,#000 94%,transparent)}
 :root[data-kiosk=true] .choose .selection-preview:after{background:linear-gradient(90deg,transparent 40%,var(--stage-bottom) 68%)}
 [data-kiosk=true] #retake{top:auto;bottom:var(--layout-edge);left:var(--layout-edge);right:auto;max-width:48%}
 :root[data-kiosk=true] .choose>h1{font-size:calc(8.6*var(--u))}
 :root[data-kiosk=true] .capture>h1,:root[data-kiosk=true] .processing>h1{top:6%;left:61%;right:calc(var(--layout-edge) + var(--settings-size) + 8px);text-align:left;font-size:calc(8.6*var(--u))}
 :root[data-kiosk=true] .capture .camera-instruction{top:25%;left:61%;right:var(--layout-edge);min-height:48px}
 [data-kiosk=true] #camera-video{left:0;top:0;width:58%;height:100%;mask-image:linear-gradient(90deg,#000 0%,#000 94%,transparent)}
 :root[data-kiosk=true] .capture .camera-preview:after{background:linear-gradient(90deg,transparent 40%,var(--ground) 61%)!important}
 [data-kiosk=true] .capture .framing{inset:6% 45% 6% 3%}
 :root[data-kiosk=true] .capture .count-panel{top:auto;bottom:22%;left:61%;right:var(--layout-edge);height:auto;min-height:22%;padding:calc(3*var(--u))}
 :root[data-kiosk=true] .capture[data-state=error] .count-panel{top:auto;bottom:22%;height:auto;gap:var(--layout-gap)}
 :root[data-kiosk=true] .capture #cancel{left:61%;right:var(--layout-edge);bottom:6%;height:var(--layout-button)}
 [data-kiosk=true] .flow-mode{top:27%;left:61%;right:var(--layout-edge)}
 [data-kiosk=true] .flow-card{left:61%;right:var(--layout-edge);bottom:22%}
 [data-kiosk=true] .processing .flow-actions{left:61%;right:var(--layout-edge);bottom:6%}
 [data-kiosk=true] .result .actions{left:61%;right:var(--layout-edge);bottom:6%;height:var(--layout-button)}
 [data-kiosk=true] .welcome-copy{left:7%;right:47%;top:9%;margin-top:0}
 [data-kiosk=true] .welcome h1{font-size:calc(12*var(--u))}
 [data-kiosk=true] .welcome-copy p{font-size:calc(4.8*var(--u))}
 [data-kiosk=true] .welcome-actions{left:7%;right:51%;bottom:7%}
 [data-kiosk=true] .welcome-actions .button{height:calc(18*var(--u));font-size:calc(8*var(--u))}
 [data-kiosk=true] .welcome-actions .button [data-icon]{width:calc(12*var(--u));height:calc(12*var(--u))}
 [data-kiosk=true] .welcome-actions .button svg{width:calc(8*var(--u));height:calc(8*var(--u))}
 [data-kiosk=true] .welcome-actions p{margin-top:calc(3*var(--u))}
}
@media (min-aspect-ratio:1/1) and (max-height:500px){
 :root[data-kiosk=true] .choose{padding-top:12px;padding-bottom:10px;gap:6px}
 :root[data-kiosk=true] .choose>h1{font-size:22px;line-height:1.06;padding-right:48px}
 :root[data-kiosk=true] .choose .choose-hint{font-size:12px}
 :root[data-kiosk=true] .capture>h1,:root[data-kiosk=true] .processing>h1{top:5%;font-size:22px}
 [data-kiosk=true] .flow-mode{top:23%;font-size:12px}
 [data-kiosk=true] .flow-card{padding:12px;bottom:24%}
 [data-kiosk=true] .flow-summary{font-size:16px;margin-bottom:6px}
 [data-kiosk=true] .flow-message{font-size:12px}
 [data-kiosk=true] .processing[data-job] .flow-orbit{width:24px;height:24px;margin-bottom:8px}
 [data-kiosk=true] #flow-retry{min-height:44px;padding:6px 14px;margin-top:8px}
 :root[data-kiosk=true] .capture .count-panel{bottom:22%;padding:10px}
 [data-kiosk=true] #capture-status{font-size:14px!important}
 [data-kiosk=true] #camera-help{font-size:12px!important}
}