/* Local account, device and server workflows around the supplied Vintage Moss layout. */
.local-app{width:min(100%,460px)}
.remote-shell{width:100%;min-height:min(880px,calc(100svh - 76px))}
.app-header{padding-left:15px;padding-right:15px}
.app-header .image-title{width:70%;max-width:245px;margin:0 auto 8px;padding:0;line-height:0;letter-spacing:normal;text-shadow:none}
.app-header .image-title img{display:block;width:100%;height:auto;object-fit:contain}
.device-meta{display:flex;justify-content:space-between;gap:10px;margin-top:7px;color:var(--muted);font-size:.66rem;line-height:1.4}
.app-tools{gap:clamp(12px,4vw,24px);margin:9px 10px 8px;padding-bottom:15px}
.footer-button{font-size:.74rem;min-width:48px}
.status-dot.is-connected{background:#a9d794;box-shadow:0 0 9px #a4d88c75}
.direction-button.is-cooldown-target .button-face{visibility:hidden}
.command-countdown{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;z-index:3;color:#ffe8a3;text-shadow:0 2px 2px #000}
.command-countdown strong{font:700 clamp(2.4rem,12vw,4rem)/1 Georgia,serif}
.command-countdown>span{font-size:.7rem;letter-spacing:.15em}
.direction-button.is-cooldown-target:disabled{opacity:.8;filter:grayscale(.45) brightness(.7)}
.command-status{font-size:.76rem;line-height:1.55;min-height:24px;margin:12px 4px 0;overflow-wrap:anywhere}
.door-position{font-size:.72rem;text-align:center;color:#e7c780;line-height:1.55;margin:6px 0}
.demo-note{font-size:.59rem;line-height:1.5;margin:16px 0 0}
.login-panel{position:relative;padding:36px 29px;border:2px solid #c3a764;border-radius:18px;background-color:var(--popup-tone);background-image:linear-gradient(#0001,#0005),var(--leather);background-size:auto,280px;background-blend-mode:normal,luminosity;box-shadow:0 24px 90px #000a,inset 0 0 0 5px #80602c60}
.login-panel h1{font-size:2rem;line-height:1.18;letter-spacing:.015em;padding:0;margin:18px 0;color:#f7e3b4}
.login-panel>p{font-size:.88rem;line-height:1.7;color:#c8c8b0}
.login-panel label{margin-top:17px}
.login-panel .primary{width:100%;margin-top:12px}
.check{display:flex;gap:10px;align-items:center;font-size:.8rem;line-height:1.5;cursor:pointer}
.check input{flex:none;width:19px;height:19px;accent-color:#b79c5b;margin:0}
.vintage-dialog{width:min(550px,calc(100% - 28px));max-height:calc(100svh - 32px);overflow:auto;overscroll-behavior:contain}
.dialog-heading h2{font-size:1.48rem;line-height:1.25;max-width:calc(100% - 52px)}
.dialog-heading>.icon-button{flex:none}
.dialog-body h3{font-size:.92rem;color:#ead7a6;margin:23px 0 12px}
.dialog-body>h3:first-child{margin-top:0}
.dialog-body label{margin-top:16px}
.dialog-body input,.dialog-body select{font-size:.84rem}
.primary,.ghost{min-height:43px;padding:10px 15px;border:1px solid #c7a968;border-radius:6px;font-weight:600;font-size:.8rem;background:linear-gradient(#d2b57b,#947338);color:#241e13;box-shadow:inset 0 1px #fae8b980,0 2px 4px #0005}
.ghost{background-color:var(--button-tone);background-image:linear-gradient(#0001,#0004),var(--leather);background-size:auto,420px;background-blend-mode:normal,luminosity;color:#ead9b0;border-color:#9c834f}
.primary:hover:not(:disabled),.ghost:hover:not(:disabled){filter:brightness(1.12)}
.primary:disabled,.ghost:disabled{opacity:.48;cursor:not-allowed}
.full{width:100%}
.hint,.note,.history-empty,.empty,.session-actions{font-size:.78rem;line-height:1.75;color:#c8c3ab}
.note{background:#07140d5c;border:1px solid #9b864539;border-radius:6px;padding:12px}
.note code{font-size:.71rem;overflow-wrap:anywhere}
.hint:empty,.error:empty,.feedback:empty{display:none}
.error,.form-error{color:#ffc0ac!important;font-size:.82rem;line-height:1.6}
.warning{padding:10px;background:#61471966;border:1px solid #b29144;color:#f3d391;font-size:.82rem}
.success{color:#bfd99f}
.feedback:not(.command-status){font-size:.79rem;line-height:1.7;overflow-wrap:anywhere}
.account-form{margin-top:24px;padding-top:6px;border-top:1px solid #ac92563d}
#accountForm>button{margin-top:20px}
.session-actions{margin-top:25px;padding-top:20px;border-top:1px solid #ac92563d}
.session-actions>button{width:100%}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.token-row,.delay-setting-row{display:flex;align-items:center;gap:8px}
.token-row input,.delay-setting-row input{flex:1;min-width:0}
.token-row .ghost{flex:none;padding:10px 9px;font-size:.71rem}
.delay-setting-row .primary{flex:none}
.siri-guide ol{padding-left:20px;margin-bottom:0}
.siri-guide li{margin:8px 0}
#firmwareUpload{margin:5px 0 12px;width:100%}
#firmwareProgress{width:100%;height:18px;accent-color:#c4aa66}
.stats{display:flex;gap:22px;padding:15px 0;font-size:.8rem;color:#c0bd9f}
.stats strong{color:#f0db9e}
.live{display:inline-flex;align-items:center;gap:8px;font-size:.83rem;color:#ebc394}
.live::before{content:'';width:7px;height:7px;border-radius:50%;background:#da9c7e}
.live.online{color:#c4dbad}.live.online::before{background:#afd397}
.history{padding:0;list-style:none;font-size:.77rem}
.history li{padding:12px 0;border-bottom:1px solid #ac95523d}
.event-top{display:flex;gap:15px;justify-content:space-between;line-height:1.5}
.event-top time{white-space:nowrap;color:#b4b39b;font-size:.7rem}
.event-detail{margin-top:6px;color:#aaa990;font-size:.69rem;overflow-wrap:anywhere}
#cameraSettingsButton{font-size:.78rem}
[data-camera-theme=moss]{--swatch:#244a38}[data-camera-theme=wine]{--swatch:#5c292a}[data-camera-theme=ocean]{--swatch:#244052}[data-camera-theme=amber]{--swatch:#644426}
@media(max-width:520px){.local-app{width:100%}.remote-shell{min-height:100svh}.login-panel{margin:24px 16px;min-height:min(560px,calc(100svh - 48px));padding:32px 24px;display:flex;flex-direction:column;justify-content:center}.app-header{padding-left:7px;padding-right:7px}}
@media(max-width:360px){.app-tools{gap:12px;margin-left:3px;margin-right:3px}.footer-button{font-size:.68rem}.round-icon{width:41px;height:41px}.device-meta{font-size:.61rem}.token-row{flex-wrap:wrap}.token-row input{flex-basis:100%}.token-row .ghost{flex:1}.vintage-dialog{padding:22px 17px}.demo-note{font-size:.54rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.clipboard-copy-field{position:fixed;left:-10000px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}

/* Routine command feedback stays hidden; command failures remain visible. */
#feedback:not(.error),#doorPosition{display:none}

.camera-frame:not(:fullscreen):not(.camera-expanded){padding:4px;border-width:1px;border-radius:8px;box-shadow:0 4px 10px #0006,inset 0 1px #fff3bd80,inset 0 -1px #4b3118,0 0 0 1px #3b2b17}

/* Fit the control dashboard to the current viewport, including browser chrome.
   Dialogs keep their own scrolling; fullscreen camera keeps its original layout. */
@media (max-width:600px), (orientation:landscape) and (max-height:600px) {
  body:has(#dashboard:not([hidden])){padding:0;min-height:0;height:100dvh;display:block}
  .local-app{width:100%;max-width:none}
  #dashboard{
    height:100dvh;min-height:0;width:100%;border:0;border-radius:0;
    padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:13% 12% 43% 32%;
  }
  #dashboard>*{min-width:0;min-height:0}
  #dashboard>.corner{width:clamp(85px,22dvh,148px);height:clamp(85px,22dvh,148px)}
  #dashboard .app-header{padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  #dashboard .image-title{flex:0 1 auto;min-height:0;height:calc(100% - 22px);max-height:82px;margin:0 auto 4px}
  #dashboard .image-title img{height:100%;object-fit:contain}
  #dashboard .connection{flex:none;max-width:100%;font-size:clamp(9px,1.6dvh,13px);line-height:1.25}
  #connectionText{min-width:0;overflow-wrap:anywhere}
  #dashboard .app-tools{align-items:center;justify-content:space-evenly;gap:8px;margin:0;padding:0 0 4px}
  #dashboard .footer-button{min-width:44px;min-height:44px;padding:0 3px;gap:5px;font-size:clamp(9px,1.5dvh,12px)}
  #dashboard .round-icon{width:clamp(26px,4.9dvh,44px);height:clamp(26px,4.9dvh,44px)}
  #dashboard .round-icon .icon{width:55%;height:55%}
  #dashboard .round-icon::after{inset:-5px}
  #dashboard .camera-section,#dashboard .control-section{display:flex;flex-direction:column;margin:0;padding:0;min-height:0}
  #dashboard .plaque{flex:none;width:min(100%,calc(clamp(45px,8dvh,64px) * 3));height:clamp(45px,8dvh,64px);aspect-ratio:3;margin:0 auto}
  #dashboard .plaque>.title-lettering{height:clamp(12px,2.3dvh,19px);max-width:68%}
  #dashboard .camera-frame:not(:fullscreen):not(.camera-expanded){flex:1;min-height:0;margin:0 0 4px}
  #dashboard .camera-frame:not(:fullscreen):not(.camera-expanded) .camera-media{height:100%;aspect-ratio:auto}
  #dashboard .camera-top{top:8px;left:8px;right:8px}
  #dashboard .camera-badge,#dashboard .camera-name{font-size:clamp(8px,1.4dvh,11px)}
  #dashboard .camera-toolbar{bottom:7px;left:8px;right:8px;gap:8px}
  #dashboard .camera-toolbar>span{font-size:clamp(9px,1.4dvh,12px);max-width:none}
  #dashboard .glass-button{width:clamp(28px,4.5dvh,38px);height:clamp(28px,4.5dvh,38px)}
  #dashboard .glass-button .icon{width:55%;height:55%}
  #dashboard .direction-controls{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 0 4px}
  #dashboard .direction-button{height:100%;width:auto;max-width:calc(50% - 6px);max-height:100%;aspect-ratio:1;flex:none}
  #dashboard .direction-icon{width:clamp(22px,5dvh,43px);height:clamp(22px,5dvh,43px);margin-bottom:2px}
  #dashboard .direction-label{font-size:clamp(14px,2.7dvh,23px)}
  #dashboard .button-face{gap:1px;padding:15%}
  #dashboard .command-countdown strong{font-size:clamp(22px,5dvh,48px)}
  #dashboard .command-countdown>span{font-size:clamp(9px,1.4dvh,12px)}
  #dashboard #feedback.error:not(:empty){position:absolute;bottom:100%;left:0;right:0;z-index:5;padding:8px;margin:0;min-height:0;border-radius:6px;background:var(--theme-popup);font-size:12px;line-height:1.4}
}
@media (orientation:landscape) and (max-height:600px) {
  #dashboard{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:24% 22% 54%;column-gap:20px}
  #dashboard .app-header{grid-column:1;grid-row:1}
  #dashboard .app-tools{grid-column:1;grid-row:2}
  #dashboard .camera-section{grid-column:2;grid-row:1 / 4}
  #dashboard .control-section{grid-column:1;grid-row:3}
  #dashboard .image-title{max-height:55px}
  #dashboard .plaque{width:min(100%,calc(clamp(42px,11dvh,54px) * 3));height:clamp(42px,11dvh,54px)}
  #dashboard .plaque>.title-lettering{height:clamp(12px,3dvh,17px)}
  #dashboard .direction-icon{width:clamp(22px,7dvh,34px);height:clamp(22px,7dvh,34px)}
  #dashboard .direction-label{font-size:clamp(14px,4dvh,21px)}
}
/* Loading is the only initial surface; pages are mounted from inert templates. */
.app-loading{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--theme-text,#ead9b0);font-size:14px}
.app-loading p{margin:0}
.app-loading a{color:inherit}
.loading-mark{width:28px;height:28px;border:2px solid #b79c5b55;border-top-color:#d8bb76;border-radius:50%;animation:loading-turn .8s linear infinite}
@keyframes loading-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.loading-mark{animation:none}}
/* These guards also cover delayed styles, responsive display overrides, and dialogs. */
#appRoot[hidden],#appLoading[hidden],#loginView[hidden],#dashboard[hidden],dialog:not([open]){display:none!important}
body:has(#appLoading:not([hidden])){padding:0}

/* Keep the decorative frame stationary; only the content pane scrolls. */
.vintage-dialog{max-height:calc(100dvh - 32px)}
.vintage-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.vintage-dialog>.dialog-heading{
  position:relative;z-index:2;min-width:0;margin:0;padding-bottom:16px;
  background:none; /* Share the popup surface; the separate scroll pane is paint-contained. */

}
.vintage-dialog>.dialog-body,.vintage-dialog>form{
  position:relative;z-index:0;min-width:0;min-height:0;max-width:100%;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;contain:paint;
  scrollbar-gutter:stable;padding:16px 8px 4px 4px;margin:0;
}
html[data-theme] .direction-button.is-cooldown-target::before{background-color:var(--theme-disabled);box-shadow:inset 0 3px 12px #0008}
.door-label{display:block;font:700 clamp(20px,5dvh,42px)/1 Georgia,serif;color:#e2ba57;text-shadow:0 2px 2px #17140b}

/* Press feedback is immediate; it never changes the relay request or cooldown. */
.direction-button.has-press-feedback .button-face{visibility:visible!important;animation:control-press-feedback .22s ease-out;filter:brightness(1.22)}
.direction-button.has-press-feedback .command-countdown{opacity:0}
.direction-button.has-press-feedback:disabled{filter:none!important}
.direction-button.has-press-feedback.press-feedback-static .button-face{animation:none}
@keyframes control-press-feedback{0%,100%{transform:translateX(0)}20%{transform:translateX(-2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}80%{transform:translateX(1px)}}
@media(prefers-reduced-motion:reduce){.direction-button.has-press-feedback .button-face{animation:none!important}}

/* Door state sits above the video, including fullscreen, without covering it. */
#cameraFrame{display:flex;flex-direction:column;align-items:stretch}
#cameraFrame>.camera-media{min-height:0;flex:1 1 auto}
.camera-section:has(.camera-door-monitor:not([hidden]))>.plaque{margin-bottom:0}
.camera-door-monitor{position:relative;z-index:4;flex:none;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px;margin-bottom:4px;border-radius:7px;background:var(--theme-panel,#203329);color:var(--theme-text,#fff);font-size:clamp(10px,1.5dvh,13px);line-height:1.3;border:1px solid var(--theme-border,#ad9360)}
.camera-door-monitor[hidden]{display:none}
.camera-door-monitor>span{min-width:0;overflow-wrap:anywhere}
.camera-door-monitor>button{flex-shrink:0;border:1px solid currentColor;border-radius:5px;background:transparent;color:inherit;padding:5px;font:inherit;cursor:pointer;max-width:40%}
.camera-door-monitor[data-fresh="false"]>span{opacity:.75}
@media(max-height:500px){.camera-door-monitor{padding:3px 5px;font-size:10px}}

/* Guest layout uses the actual panel dimensions, not stretched button heights. */
html[data-role=guest] #nav,html[data-role=guest] #dashboard .app-header,
html[data-role=guest] #dashboard .plaque,html[data-role=guest] .camera-toolbar,
html[data-role=guest] #cameraSetup,html[data-role=guest] #cameraVoice,
html[data-role=guest] .vintage-dialog{display:none!important}
html[data-role=guest] body:has(#dashboard:not([hidden])){padding:0;min-height:100dvh}
html[data-role=guest] .local-app{width:min(100%,720px);max-width:720px;margin-inline:auto}
html[data-role=guest] #dashboard{height:min(100dvh,820px);min-height:0;max-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;container-type:size;gap:12px;box-sizing:border-box;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
html[data-role=guest] #dashboard .camera-section{grid-column:1;grid-row:1;height:min(calc(100cqw * 9 / 16),calc((100cqh - 12px) * .6));container-type:size;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0}
html[data-role=guest] #dashboard .control-section{grid-column:1;grid-row:2;height:min(210px,calc((100cqw - 12px) / 2),calc((100cqh - 12px) * .4));min-height:0;min-width:0;display:flex;flex-direction:column;padding:0;margin:0}
html[data-role=guest] #dashboard .camera-frame:not(:fullscreen):not(.camera-expanded){flex:none;width:min(100cqw,calc(100cqh * 16 / 9));height:min(100cqh,calc(100cqw * 9 / 16));min-height:0;max-height:100%;margin:0}
html[data-role=guest] #dashboard .camera-media{height:100%;width:100%;aspect-ratio:auto}
html[data-role=guest] #dashboard .camera-media>img,html[data-role=guest] #dashboard .camera-media>video{object-fit:contain;object-position:center}
html[data-role=guest] #dashboard .direction-controls{container-type:size;display:flex;flex:1;min-height:0;min-width:0;width:100%;align-items:center;justify-content:center;gap:12px;padding:0}
html[data-role=guest] #dashboard .direction-button{--guest-control-size:min(210px,100cqh,calc((100cqw - 12px) / 2));width:var(--guest-control-size);height:var(--guest-control-size);min-width:0;min-height:0;max-width:none;max-height:none;aspect-ratio:1;flex:none}
@media(min-width:650px) and (max-height:500px){
 html[data-role=guest] .local-app{width:min(100%,1000px);max-width:1000px}
 html[data-role=guest] #dashboard{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-content:stretch}
 html[data-role=guest] #dashboard .camera-section{height:100%}
 html[data-role=guest] #dashboard .control-section{grid-column:2;grid-row:1;height:100%}
 html[data-role=guest] #dashboard .direction-controls{flex-direction:column}
 html[data-role=guest] #dashboard .direction-button{--guest-control-size:min(180px,100cqw,calc((100cqh - 12px) / 2))}
}