/* Keep the scene open and the QR accessible on short presentation displays. */
@media(max-height:800px) and (min-width:801px){
  .screen-header{top:16px}
  .screen-header .brand img{width:174px}
  .screen-copy{top:26px}
  .screen-copy h1{font-size:clamp(54px,9.6vh,78px)}
  .live-panel{top:32%}
  .live-panel h1{font-size:44px}
  .stage-note{bottom:5%;padding:20px}
}
@media(max-width:800px){
  .screen-header{inset:18px 5% auto}
  .screen-header .brand img{width:160px}
  .screen-copy{top:27px;max-width:60%}
  .screen-copy h1{font-size:clamp(40px,8.5vw,68px)}
  .live-panel{top:28%;width:250px}
  .live-panel h1{font-size:40px}
  .live-options span{font-size:13px}
  .stage-note{width:300px;padding:20px;bottom:5%}
  .screen-alert{top:auto;bottom:24px;right:5%;padding:13px 18px}
  .screen-alert .idle-seconds{font-size:36px}
  .screen-alert>span{font-size:13px}
}
@media(max-width:520px){
  .kiosk{--qr-size:clamp(210px,35.6vh,280px)}
  .screen-copy{top:29px;max-width:56%}
  .screen-copy h1{font-size:clamp(32px,8.5vw,44px)}
  .screen-header .brand img{width:134px}
  .live-panel{top:26%;width:90%}
  .live-panel h1{font-size:38px;max-width:none}
  .live-options{max-width:none}
  .stage-note{left:5%;width:90%;bottom:5%}
  .screen-alert{bottom:20px;left:5%;right:5%;justify-content:center}
  .reveal-caption{left:5%;right:5%;bottom:6%}
  .draw-surface{height:clamp(230px,36dvh,300px)}
}
@media(max-width:370px){
  .kiosk{--qr-size:clamp(210px,35.6vh,260px)}
  .screen-header .brand img{width:112px}
  .mobile{padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
  .mobile-header{height:67px}
  .mobile-header .brand img{width:102px}
  .page-heading h1{font-size:30px}
  .choice{font-size:12px;padding:11px 3px}
  .finish-grid .choice{gap:5px}
  .material-dot{width:19px;height:19px}
  .color-picker{grid-template-columns:68px minmax(0,1fr);gap:17px}
  .color-preview{width:68px;height:68px}
  .mobile-warning{gap:7px;padding:12px}
  .mobile-warning .idle-seconds{font-size:32px;min-width:59px}
  .mobile-warning>span{font-size:12px}
  .mobile-warning button{padding:11px;font-size:12px}
  .result-card{margin-left:-16px;margin-right:-16px}
  .result-recap{padding-left:16px;padding-right:16px;font-size:12px}
  .generation-steps{gap:5px}
  .generation-steps li{font-size:11px}
}

/* Density follows the visible viewport after the iOS safe areas are removed. */
html[data-mobile-density="compact"]{--mobile-pad:10px;--mobile-pad-x:16px;--mobile-head:44px;--mobile-gap:8px;--mobile-small-gap:4px;--mobile-control:40px;--mobile-range:32px;--mobile-font:12px;--mobile-preview:64px;--mobile-button:44px;--mobile-caption:36px;--mobile-title:28px;--mobile-step-font:11px}
html[data-mobile-density="tight"]{--mobile-pad:8px;--mobile-pad-x:16px;--mobile-head:40px;--mobile-gap:6px;--mobile-small-gap:4px;--mobile-control:36px;--mobile-range:28px;--mobile-font:11.5px;--mobile-preview:60px;--mobile-button:44px;--mobile-caption:36px;--mobile-title:26px;--mobile-step-font:11px}
html[data-mobile-density="micro"]{--mobile-pad:4px;--mobile-pad-x:12px;--mobile-head:26px;--mobile-gap:3px;--mobile-small-gap:2px;--mobile-control:34px;--mobile-range:24px;--mobile-font:11px;--mobile-preview:52px;--mobile-button:40px;--mobile-caption:30px;--mobile-title:24px;--mobile-step-font:10px}
html[data-mobile-density="micro"] .mobile-header .connection{padding:4px 8px;font-size:11px}
html[data-mobile-density="micro"] .mobile-flow .secondary{font-size:12px}

/* A wide drawing surface, with every action in the same lower toolbar. */
html[data-mobile-layout="landscape"] .mobile-draw{max-width:none;display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,1fr);grid-template-rows:28px minmax(0,1fr) 44px;gap:6px 8px;padding:8px 12px}
html[data-mobile-layout="landscape"] .mobile-draw .mobile-header{grid-row:1;grid-column:1;height:28px;margin:0}
html[data-mobile-layout="landscape"] .mobile-draw .mobile-header .brand img{width:62px;height:28px}
html[data-mobile-layout="landscape"] .mobile-draw .connection{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:5;padding:5px 9px;font-size:11px}
html[data-mobile-layout="landscape"] .mobile-draw .stepper{display:none}
html[data-mobile-layout="landscape"] .mobile-draw .summary-pills{grid-row:1;grid-column:2/-1;align-items:center;margin:0;gap:5px}
html[data-mobile-layout="landscape"] .mobile-draw .pill{padding:4px 7px;font-size:11px}
html[data-mobile-layout="landscape"] .mobile-draw .draw-surface{grid-row:2;grid-column:1/-1;min-height:0;height:100%}
html[data-mobile-layout="landscape"] .mobile-draw .draw-caption{grid-row:3;grid-column:1;justify-content:stretch}
html[data-mobile-layout="landscape"] .mobile-draw .draw-caption .text{width:100%;min-height:44px;padding:6px;font-size:12px}
html[data-mobile-layout="landscape"] .mobile-draw .mobile-bottom{grid-row:3;grid-column:2/-1;display:flex;flex-direction:row-reverse;gap:8px;min-width:0}
html[data-mobile-layout="landscape"] .mobile-draw .mobile-bottom>.primary,html[data-mobile-layout="landscape"] .mobile-draw .secondary-actions{flex:1;min-width:0}
html[data-mobile-layout="landscape"] .mobile-draw .primary,html[data-mobile-layout="landscape"] .mobile-draw .secondary{min-height:44px;padding:7px 10px;font-size:13px}
html[data-mobile-layout="landscape"] .mobile-error{grid-template-rows:28px auto minmax(0,1fr) 44px}
html[data-mobile-layout="landscape"] .mobile-error .error-banner{grid-row:2;grid-column:1/-1;max-height:72px;padding:8px 10px;margin:0;font-size:12px}
html[data-mobile-layout="landscape"] .mobile-error .draw-surface{grid-row:3}
html[data-mobile-layout="landscape"] .mobile-error .draw-caption,html[data-mobile-layout="landscape"] .mobile-error .mobile-bottom{grid-row:4}

html[data-mobile-layout="landscape"] .mobile-config{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:28px minmax(0,1fr) minmax(0,1fr) 44px;gap:5px 16px;padding:6px 12px}
html[data-mobile-layout="landscape"] .mobile-config .mobile-header{height:28px;margin:0}
html[data-mobile-layout="landscape"] .mobile-config .mobile-header .brand img{height:28px}
html[data-mobile-layout="landscape"] .mobile-config .stepper{margin:0;align-self:center}
html[data-mobile-layout="landscape"] .mobile-config fieldset{margin:0;min-height:0}
html[data-mobile-layout="landscape"] .mobile-config legend{margin-bottom:3px;font-size:11px}
html[data-mobile-layout="landscape"] .mobile-config .choice-grid{gap:3px}
html[data-mobile-layout="landscape"] .mobile-config .choice{min-height:34px;font-size:11px;padding:3px}
html[data-mobile-layout="landscape"] .mobile-config .color-picker{grid-template-columns:48px minmax(0,1fr);gap:12px}
html[data-mobile-layout="landscape"] .mobile-config .color-preview{width:48px;height:48px}
html[data-mobile-layout="landscape"] .mobile-config .color-range{height:24px}
html[data-mobile-layout="landscape"] .mobile-config .mobile-bottom{grid-column:1/-1}
html[data-mobile-layout="landscape"] .mobile-config .primary{min-height:44px}
html[data-mobile-layout="landscape"][data-mobile-short="true"] .mobile-config{grid-template-rows:20px minmax(0,1fr) minmax(0,1fr) 40px;gap:3px 12px;padding:4px 10px}
html[data-mobile-layout="landscape"][data-mobile-short="true"] .mobile-config .mobile-header,html[data-mobile-layout="landscape"][data-mobile-short="true"] .mobile-config .mobile-header .brand img{height:20px}
html[data-mobile-layout="landscape"][data-mobile-short="true"] .mobile-config .choice{min-height:30px}
html[data-mobile-layout="landscape"][data-mobile-short="true"] .mobile-config .color-range{height:20px}
html[data-mobile-layout="landscape"][data-mobile-short="true"] .mobile-config .primary{min-height:40px}

html[data-mobile-layout="landscape"] .mobile-generating,html[data-mobile-layout="landscape"] .mobile-result{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:28px minmax(0,1fr);gap:8px 16px;padding:8px 12px}
html[data-mobile-layout="landscape"] .mobile-generating .mobile-header,html[data-mobile-layout="landscape"] .mobile-result .mobile-header{height:28px;margin:0}
html[data-mobile-layout="landscape"] .mobile-generating .mobile-header .brand img,html[data-mobile-layout="landscape"] .mobile-result .mobile-header .brand img{height:28px}
html[data-mobile-layout="landscape"] .mobile-generating .stepper,html[data-mobile-layout="landscape"] .mobile-result .stepper{display:none}
html[data-mobile-layout="landscape"] .mobile-generating .summary-pills{grid-row:1;grid-column:1;margin:0;align-items:center}
html[data-mobile-layout="landscape"] .mobile-generating .mobile-header{grid-row:1;grid-column:2}
html[data-mobile-layout="landscape"] .mobile-generating .mobile-wip{grid-row:2;grid-column:1;min-height:0;margin:0;padding:12px 16px}
html[data-mobile-layout="landscape"] .mobile-generating .wip-mark{width:28px;height:28px;margin-bottom:14px}
html[data-mobile-layout="landscape"] .mobile-generating .generation-progress h2{font-size:21px;min-height:50px}
html[data-mobile-layout="landscape"] .mobile-generating .generation-steps{margin-top:16px}
html[data-mobile-layout="landscape"] .mobile-generating>.action-stack{grid-column:2;grid-row:2;align-self:end}
html[data-mobile-layout="landscape"] .mobile-result .page-heading{grid-column:2;grid-row:1;margin:0;align-self:center}
html[data-mobile-layout="landscape"] .mobile-result .page-heading h1{font-size:25px}
html[data-mobile-layout="landscape"] .mobile-result .result-card{grid-column:1;grid-row:2;min-height:0;margin:0;height:100%}
html[data-mobile-layout="landscape"] .mobile-result .result-card img{min-height:0;max-height:none}
html[data-mobile-layout="landscape"] .mobile-result .result-recap{padding:6px 0;font-size:11px}
html[data-mobile-layout="landscape"] .mobile-result .result-actions{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:4px;align-self:end}
html[data-mobile-layout="landscape"] .mobile-result .result-actions .primary,html[data-mobile-layout="landscape"] .mobile-result .result-actions .secondary{min-height:40px}