/* Device policy is independent of viewport width or orientation. */
html[data-auth-keypad=true] .auth-stage>.auth-panel #keypad{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));}
html[data-auth-keypad=false] .auth-stage>.auth-panel #keypad{display:none!important}
html[data-auth-keypad=true] #access-code{cursor:default}
html[data-playback-device=projector] .auth-stage>.auth-panel[data-step=login]{width:min(620px,calc(100vw - 28px))!important;min-height:0!important;height:auto!important;max-height:calc(var(--projector-viewport-height,100vh) - 24px)!important;overflow-y:auto!important;padding:16px 26px!important;display:flex!important;flex-direction:column!important;gap:8px!important}
html[data-playback-device=projector] .auth-panel[data-step=login] .auth-brand{margin:0 auto 6px!important;position:static!important}
html[data-playback-device=projector] .auth-panel[data-step=login] .auth-brand img{width:160px!important;height:auto!important}
html[data-playback-device=projector] .auth-panel[data-step=login] .auth-brand p{margin:6px 0 0!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #login-view{display:block!important;min-height:0!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #login-form{display:flex!important;flex-direction:column!important;height:auto!important;gap:8px!important}
html[data-playback-device=projector] .auth-panel[data-step=login] h1{font-size:20px!important;margin:0 0 8px!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #access-hint{margin:0!important;min-height:20px!important;font-size:13px!important}
html[data-playback-device=projector] .auth-panel[data-step=login] .code-entry{height:44px!important;min-height:44px!important;margin:0!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #keypad{position:static!important;width:100%!important;margin:0!important;padding:0!important;gap:6px!important;border:0!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #keypad button{height:clamp(40px,8vh,70px)!important;min-height:40px!important;clip-path:none!important;border-radius:4px!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #keypad button b{font-size:25px!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #keypad button:focus{outline:2px solid #baffff!important;outline-offset:-3px!important;background:#075064!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #new-account{position:static!important;margin:8px auto 0!important;padding:6px!important}
html[data-playback-device=projector] .auth-panel[data-step=login] #auth-message{min-height:0!important;margin:0!important}