/* One portrait shell for attendance and claims; tokens match the ticket page. */
html,body{min-width:0;min-height:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;text-align:left}
body{display:flex;flex-direction:column;min-height:100svh;text-align:center;background:#0b0b0b;color:#f5f2e9}
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.065;background:url('/assets/retro-grain.png') repeat;z-index:-1}
.topbar{width:100%;max-width:620px;margin:0 auto;flex:none;justify-content:center;position:relative;padding:6px 12px;border-bottom:2px solid #ff4937;min-height:70px;gap:10px}
.brand{justify-content:center;gap:10px}.brand-logo{width:104px;height:54px;object-fit:contain}.brand-label{text-align:left;font-size:10px;white-space:normal;max-width:125px}.brand-label b{font-size:9px}
.topbar>.link-btn{position:absolute;right:8px;bottom:6px;font-size:11px;padding:4px;min-height:30px}.topbar:has(>.link-btn:not([hidden])) .brand{padding-right:48px}
main,main#app{width:100%;max-width:620px;min-width:0;margin:auto;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center;flex:1}
.view,#workspace{width:100%;min-width:0}.scanner-intro{margin:0 0 12px;min-height:105px;padding:16px;text-align:center;border-left:0;border-bottom:3px solid #ff4937;background:linear-gradient(90deg,#0b0b0bdd,#0b0b0b80),url('/assets/DOpo7TEEeoj.webp') center 40%/cover}
.scanner-intro p{font-size:clamp(30px,7vw,42px);margin:8px 0 0}.scanner-intro .eyebrow{font-size:9px}
h1{font-size:clamp(28px,6vw,40px);margin:0 0 10px}h2{font:800 24px/1.1 var(--display);margin:0 0 8px}
.card{margin-bottom:10px;padding:14px}.muted.small,.hint{font-size:12px;line-height:1.35}.session-option summary{padding:4px;min-height:32px;font-size:12px}.session-option p{font-size:12px}
.event-bar{justify-content:center;position:relative;min-height:40px;margin:0 0 4px;padding-inline:45px}.event-bar>.link-btn{position:absolute;right:0;font-size:12px;padding:6px}.event-name{font-size:24px}.event-bar .eyebrow{font-size:9px}
.totals{font-size:11px;min-height:0;margin-bottom:8px}.tabs{gap:4px;margin:0 0 10px}.tab{min-width:0;min-height:40px;font-size:12px;padding:7px 4px}.pane{min-width:0}
.scanner-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;align-items:end}.scanner-fields .field,.scanner-fields label{min-width:0;display:block;margin:0}.scanner-fields .field>span,.scanner-fields label>span{display:block;font-size:11px;font-weight:700;line-height:1.2;margin:0 0 4px;text-align:center}
.scanner-fields .wide{grid-column:1/-1}.scanner-fields input{font-size:16px;min-height:40px;height:40px;padding:8px 10px;width:100%;min-width:0}
.lookup-card{padding:12px;margin:0}.lookup-card>p{margin:6px 0;font-size:11px;line-height:1.3}.lookup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.lookup-actions .btn{margin:0;min-height:42px;padding:8px;font-size:13px}.lookup-clear{grid-column:1/-1;background:none;border:0;color:var(--muted);font:inherit;font-size:11px;min-height:28px;cursor:pointer}
.parameter-status{--signal:#ff7870;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--signal);font-size:11px;font-weight:700;line-height:1.3;min-height:30px;margin:0 0 7px}
.parameter-status:before{content:'';width:8px;height:8px;flex:none;border-radius:50%;background:var(--signal);box-shadow:0 0 12px color-mix(in srgb,var(--signal),transparent 50%)}
.parameter-status[data-level=partial]{--signal:#ffb460}.parameter-status[data-level=ready]{--signal:#a6ddb7}
.viewfinder{width:100%;max-height:min(43svh,330px);aspect-ratio:4/3;margin-bottom:8px}.cam-idle{padding:16px}.cam-idle .btn{min-height:48px;font-size:15px}.cam-controls{justify-content:center;flex-wrap:wrap}.cam-controls .btn{min-width:80px;min-height:40px;font-size:12px;padding:8px}
.msg{font-size:12px;line-height:1.35;padding:8px;margin:8px 0 0;overflow-wrap:anywhere}.btn{min-height:44px;font-size:14px;padding:10px 12px}.field input{font-size:16px}.booking-head{justify-content:center;flex-wrap:wrap}.stats{margin:12px 0}.stats dd{font-size:32px}.stats dt{font-size:10px}.sheet,dialog{max-width:590px;max-height:calc(100dvh - 24px);overflow:auto;text-align:center;overscroll-behavior:contain}
dialog{background:#1a1a1a;color:#f5f2e9;border:1px solid #6b665e;border-radius:8px;width:calc(100vw - 24px);padding:20px;font:14px/1.45 var(--font)}dialog::backdrop{background:#000c}.dialog-close{float:right;border:0;background:transparent;color:var(--ink);font-size:25px;min-width:36px;min-height:36px;cursor:pointer}.search-result{text-align:center;margin-top:10px}.search-result span{font-size:11px;overflow-wrap:anywhere}
.checking-status{display:none;position:fixed;inset:0;background:#0b0b0bd9;z-index:100;align-items:center;justify-content:center;flex-direction:column;gap:16px;pointer-events:auto;color:#f5f2e9;font:800 24px var(--display);letter-spacing:.06em}.is-checking .checking-status{display:flex}.checking-orbit{width:58px;height:58px;border:3px solid #f5f2e933;border-top-color:#ff4937;border-right-color:#ff4937;border-radius:50%;animation:scanner-check .8s linear infinite}@keyframes scanner-check{to{transform:rotate(360deg)}}
.install-prompt{position:fixed;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:35;max-width:calc(100vw - 20px);width:380px;padding:9px 12px;display:flex;align-items:center;gap:10px;background:#f5f2e9;color:#0b0b0b;border:1px solid #ff4937;border-radius:8px;box-shadow:0 6px 28px #0008;font-size:11px;text-align:left}.install-prompt strong{display:block}.install-prompt button{background:#ff4937;color:#0b0b0b;border:0;border-radius:4px;min-height:36px;padding:6px 12px;font:700 12px var(--font);cursor:pointer}.install-prompt .dismiss-install{background:none;font-size:20px;padding:4px}.install-prompt>div{flex:1}
.portrait-tip{display:none;font-size:11px;color:#c9c5be;margin:0;padding:4px 12px}
@media(max-height:700px){main,main#app{padding-top:8px;padding-bottom:8px}.scanner-intro{min-height:78px;padding:10px;margin-bottom:8px}.scanner-intro p{font-size:28px}.scanner-intro .eyebrow{font-size:8px}h1{font-size:27px;margin-bottom:8px}.topbar{min-height:60px}.brand-logo{height:46px;width:92px}.lookup-card{padding:10px}.scanner-fields{gap:6px 8px}.scanner-fields input{height:38px;min-height:38px}.parameter-status{min-height:26px}.tabs{margin-bottom:7px}.tab{min-height:36px}.event-name{font-size:22px}.totals{margin-bottom:5px}}
@media(max-height:580px){.scanner-intro{display:none}.scanner-fields input{height:36px;min-height:36px}.scanner-fields .field>span{font-size:10px}.lookup-card>p{font-size:10px}.lookup-actions{margin-top:7px}.parameter-status{font-size:10px}.install-prompt{padding:5px 10px}.viewfinder{max-height:36svh}}
@media(orientation:landscape) and (max-height:600px){.portrait-tip{display:block}main,main#app{flex:none}.viewfinder{max-height:35svh}}
@media(prefers-reduced-motion:reduce){.checking-orbit{animation:none;border-color:#ff4937}.view,.sheet{animation:none}}
/* Compact portrait mode keeps verification fields and actions in one screen. */
body{background:linear-gradient(#0b0b0bf5,#0b0b0bf5),url('/assets/DOpo7TEEeoj.webp') center/cover fixed}
@media(orientation:portrait) and (max-height:620px){
 .topbar{min-height:52px;padding-block:3px}.brand-logo{height:42px;width:86px}.brand-label{font-size:9px}.brand-label b{font-size:8px}
 main,main#app{padding-block:6px}.event-bar{min-height:32px;padding-inline:34px}.event-bar .eyebrow{font-size:8px}.event-bar .link-btn{padding:3px;font-size:10px}.event-name{font-size:20px}.totals{font-size:10px;margin-bottom:4px}
 .tabs{padding:3px;margin-bottom:6px}.tab{font-size:11px;min-height:34px;white-space:nowrap;padding:5px 3px}.lookup-card{padding:8px}.scanner-fields{gap:5px 8px}.scanner-fields .field>span{font-size:10px;margin-bottom:3px}.scanner-fields input{height:34px;min-height:34px;padding:6px 8px}
 .parameter-status{min-height:25px;font-size:10px;margin-bottom:5px}.lookup-card>p{font-size:10px;line-height:1.25;margin:5px 0}.lookup-actions{gap:6px;margin-top:6px}.lookup-actions .btn{min-height:38px;font-size:12px;padding:6px}.lookup-clear{min-height:24px;font-size:10px}.msg{font-size:10px;line-height:1.25;margin-top:5px;padding:6px}
 .claim-scanner #offer{min-height:28px;font-size:18px;padding-block:2px}
}

/* Use the whole device viewport; the active panel owns the remaining space. */
body{min-height:100dvh}
.topbar{max-width:none;margin:0;min-height:64px}
main,main#app{max-width:none;margin:0;justify-content:flex-start;flex:1 0 auto;padding:clamp(8px,1.6vmin,24px) max(clamp(12px,2vw,32px),env(safe-area-inset-right)) max(clamp(8px,1.6vmin,24px),env(safe-area-inset-bottom)) max(clamp(12px,2vw,32px),env(safe-area-inset-left))}
.view,#workspace,#scan,.pane{display:flex;flex-direction:column;flex:1;min-width:0}
.event-bar,.totals,.tabs,.msg,#workspaceMenu{flex-shrink:0}
#view-scan>.pane,#scan>.pane{flex:1}
.lookup-card{display:flex;flex-direction:column;flex:1;gap:0}
.scanner-fields{flex:1;grid-template-rows:repeat(3,minmax(54px,1fr));align-items:stretch;gap:clamp(6px,1.5vmin,18px) clamp(10px,2vw,28px)}
.scanner-fields .field{display:flex;flex-direction:column;justify-content:flex-start}
.scanner-fields .field>span{flex:none;font-size:clamp(11px,1.5vmin,16px);margin-bottom:6px}
.scanner-fields input{flex:1;width:100%;height:auto;min-height:36px;font-size:clamp(16px,2vmin,22px);padding:clamp(8px,1.6vmin,18px)}
.parameter-status{flex:none;margin-bottom:clamp(6px,1.6vmin,18px)}
.lookup-actions{flex:none;margin-top:clamp(8px,1.5vmin,18px)}
.lookup-actions .btn{min-height:clamp(40px,6dvh,64px);font-size:clamp(13px,1.8vmin,20px)}
.viewfinder{flex:1;aspect-ratio:auto;max-height:none;min-height:150px;width:100%;margin:0 0 8px}
.cam-controls{flex:none}.pane>.card{width:100%;margin-bottom:0}
#pane-paste>.card,#claim-paste-pane>.card{display:flex;flex:1;flex-direction:column}
#pane-paste .field,#claim-paste-pane .field{display:flex;flex:1;flex-direction:column}
#pane-paste textarea,#claim-paste-pane textarea{flex:1;min-height:100px}
#view-events>.event-list{flex:1;grid-auto-rows:minmax(70px,1fr)}
.event-item{display:flex;flex-direction:column;justify-content:center}
#view-signin>.scanner-intro,#login>.scanner-intro{flex:1;max-height:30dvh;display:flex;flex-direction:column;justify-content:center}
#staff-form,#loginForm{display:flex;flex:2;flex-direction:column}
#staff-form>.field,#loginForm>.field{display:flex;flex:1;flex-direction:column}
#staff-form>.field>input,#loginForm>.field>input{flex:1;min-height:44px}
#view-booking>.booking,.claim-scanner #result{flex:1;display:flex;flex-direction:column}
#view-booking .stats,.claim-scanner #result .stats{flex:1;align-items:stretch}
#view-booking .stats>div,.claim-scanner #result .stats>div{display:flex;flex-direction:column;justify-content:center}
#view-booking .admit-block,.claim-scanner #result .admit-block{margin-top:auto}
@media(min-width:900px),(orientation:landscape) and (max-height:600px){
 .scanner-fields{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(54px,1fr))}
 .scanner-fields .wide{grid-column:span 2}
}
@media(max-height:620px){
 .topbar{min-height:52px}.scanner-fields{gap:5px 8px}.scanner-fields .field>span{font-size:10px;margin-bottom:3px}.scanner-fields input{font-size:16px;padding:6px 8px;min-height:34px}
 .lookup-card{padding:8px}.parameter-status{min-height:24px;margin-bottom:5px}.lookup-actions{margin-top:6px}.lookup-actions .btn{min-height:36px;font-size:12px}.viewfinder{min-height:100px}
}
/* Reserve room for installation instead of covering the scanner actions. */
.install-prompt{position:relative;inset:auto;transform:none;align-self:stretch;width:auto;max-width:none;margin:0 max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));flex:none}
@media(max-height:620px){.scanner-fields{grid-template-rows:repeat(3,minmax(48px,1fr))}}
@media(orientation:landscape) and (max-height:600px){.scanner-fields{grid-template-rows:repeat(2,minmax(48px,1fr))}}
#login{display:flex;flex-direction:column;flex:1}
.claim-scanner #history,.claim-scanner #staff{flex:1}
