/* Device safe areas are layout space, not overlays. Values can be injected by tests. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--site-header-height:92px;--visual-height:100vh}
@supports(height:100dvh){:root{--visual-height:100dvh}}
html{scroll-padding-top:calc(var(--site-header-height) + var(--safe-top) + 16px);-webkit-text-size-adjust:100%}
body{padding-left:var(--safe-left);padding-right:var(--safe-right);padding-bottom:var(--safe-bottom);min-width:0}
body>header{height:calc(var(--site-header-height) + var(--safe-top));padding-top:var(--safe-top)}
.reading-progress{top:var(--safe-top);left:var(--safe-left);width:calc(100% - var(--safe-left) - var(--safe-right))}
.workspace-nav{top:calc(var(--site-header-height) + var(--safe-top) + 22px)}
#bookingPanel{top:calc(var(--site-header-height) + var(--safe-top) + 24px)}
.toast{bottom:calc(20px + var(--safe-bottom));max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 28px);overflow-wrap:anywhere}
dialog{max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 24px)!important;max-height:calc(var(--visual-height) - var(--safe-top) - var(--safe-bottom) - 24px)!important;overflow-y:auto;overscroll-behavior:contain;margin:auto}
#chatPhotoDialog img{max-width:100%;max-height:calc(var(--visual-height) - var(--safe-top) - var(--safe-bottom) - 100px)}
footer{flex-wrap:wrap;gap:16px}.wrap,#content,.panel,.service>div{min-width:0}.device-page,.workspace-title,.account-head{overflow-wrap:anywhere}
@media(max-width:800px){:root{--site-header-height:76px}.wrap{padding-left:18px;padding-right:18px}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}button.btn,a.btn,.slot,.pwa-footer-link{min-height:44px}.btn:active{transform:translateY(1px)}#bookingPanel{position:static}.close{min-width:44px;min-height:44px}.device-card .btn{white-space:normal}.device-heading .eyebrow{overflow-wrap:anywhere}}
@media(max-width:360px){body>header{padding-left:14px;padding-right:14px}.logo{font-size:19px;letter-spacing:1.3px}.brand-mark{width:22px;height:30px}.brand-stack small{font-size:5px;letter-spacing:1.5px}header .logo{gap:6px}.wrap{padding-left:14px;padding-right:14px}header nav{gap:5px}.hero-copy{padding-left:21px;padding-right:21px}.hero h1{font-size:52px}.btn.small{padding-left:11px;padding-right:11px}}
@media(max-width:760px){.chat-mobile-open .chat-page-heading{display:none}.chat-mobile-open .chat-page{padding-top:12px}.chat-workspace.room-open{height:var(--chat-height,calc(var(--visual-height) - var(--site-header-height) - var(--safe-top) - var(--safe-bottom) - 90px));min-height:220px;max-height:none}.chat-composer textarea{font-size:16px!important}.chat-mobile-open .chat-composer{margin-bottom:10px}.chat-mobile-open .chat-footnote{margin-bottom:14px}.chat-room-header{padding-top:12px!important;padding-bottom:12px!important}.chat-room-header .chat-back{min-width:36px;min-height:40px}.chat-send{width:44px;height:44px;flex-basis:44px}.chat-composer-hint{flex-wrap:wrap}.chat-file-preview{flex-wrap:wrap}.chat-composer .media-crop-open{font-size:9px;max-width:100%}}
@media(max-height:500px) and (orientation:landscape){.install-brand{margin-bottom:12px}.install-brand img{width:52px;height:52px;border-radius:14px}.install-guide h2{font-size:32px}.install-steps{margin:16px 0}.install-steps li{margin:12px 0}.device-heading{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* Recovery must remain readable and keyboard/touch operable on short viewports. */
.media-recovery{color:#51414b;font-size:14px;line-height:1.65;overflow-wrap:anywhere;margin-top:16px}
.media-recovery b{display:block;font-size:16px}.media-recovery .text-action{display:inline-flex;align-items:center;min-height:44px;margin:4px 12px 4px 0;white-space:normal}
:where(button,a,input,textarea,select):focus-visible{outline:2px solid #70495f;outline-offset:3px}
@media(max-width:800px){[data-review-clear],.media-crop-open,.portfolio-tile button,.chat-back{min-height:44px;min-width:44px}.review-file-picker{min-height:44px}#review{scroll-padding-block:18px}#review textarea{min-height:120px}.media-recovery{padding:16px}}

#review>.close{position:sticky;top:0;right:auto;float:right;z-index:3;background:#faf7f2;border-radius:50%;min-width:44px;min-height:44px}

/* v0.34: bounded histories, long labels and short-screen dialogs. */
.history-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:24px 0;padding:18px 0;border-top:1px solid var(--line)}
.history-pagination span{font-size:13px;color:var(--muted);text-align:center;overflow-wrap:anywhere}.history-pagination button,.owner-booking-pagination button{min-height:44px}
#ownerBookingResults[aria-busy=true]{opacity:.55;transition:opacity .16s}.owner-booking>div{min-width:0;overflow-wrap:anywhere}.owner-booking small,.booking small{overflow-wrap:anywhere}
.account-session-notice{margin:30px auto;padding:24px;max-width:760px}.account-session-notice h2{font-size:30px}.account-session-notice p{font-size:14px}
.calendar-page-note{margin-bottom:18px}.calendar-page-note .history-pagination{margin:10px 0}.calendar-page-note p{max-width:800px}
#ownerBookingResults{scroll-margin-top:calc(var(--site-header-height) + var(--safe-top) + 16px)}
@media(max-width:600px){.history-pagination{gap:10px}.history-pagination span{order:-1;flex:1 0 100%}.history-pagination button{flex:1}.owner-booking-pagination{flex-wrap:wrap;gap:10px}.owner-booking-pagination>span{order:-1;flex:1 0 100%;text-align:center}.owner-booking-pagination button{flex:1}.calendar-toolbar{flex-wrap:wrap}.calendar-toolbar label{min-width:0;flex:1 1 140px}.owner-booking>div:last-of-type{display:flex;flex-wrap:wrap;gap:8px}.owner-booking .btn{min-height:44px}.chat-older,.chat-list-pages button{min-height:44px;min-width:44px}.chat-room-header .chat-back{min-height:44px;min-width:44px}}
@media(max-height:540px){dialog{padding:18px}dialog>.close{position:sticky;top:0;z-index:4;background:var(--bg);border-radius:50%}dialog h2{font-size:28px}dialog .btn{white-space:normal}}
@media(prefers-reduced-motion:reduce){#ownerBookingResults[aria-busy=true]{transition:none}}