:root{--demo-toolbar-height:56px}
.demo-previewbar{position:sticky;top:0;z-index:1300;height:var(--demo-toolbar-height);display:flex;align-items:center;justify-content:center;gap:18px;padding:5px 18px;border-bottom:1px solid #dce2e5;background:#f9fafb;color:#61717c;font-family:Archivo,Arial,sans-serif;box-sizing:border-box}
.demo-preview-label{font-size:10px;font-weight:500;letter-spacing:.03em}
.demo-preview-switch{display:flex;gap:3px;padding:3px;border:1px solid #dfe5e8;background:white;border-radius:10px}
.demo-preview-switch button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:32px;min-width:100px;border:0;border-radius:7px;background:transparent;color:#7c8992;font:inherit;font-size:11px;font-weight:500;padding:7px 12px;cursor:pointer}
.demo-preview-switch button[aria-pressed=true]{background:#273943;color:white;box-shadow:0 2px 5px #17242d12}
.demo-preview-switch button:focus-visible{outline:2px solid #208096;outline-offset:3px}
.demo-preview-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.demo-preview-viewport{font-size:10px;color:#97a1a8;min-width:95px}
:root .workspace-header{top:var(--demo-toolbar-height)}
:root .device{min-height:calc(100dvh - var(--demo-toolbar-height))}
body.demo-mobile .device{width:390px;max-width:100%;overflow-wrap:break-word}
body.demo-mobile .modal-backdrop,body.demo-mobile .text-cleanup-overlay{left:50%;right:auto;top:var(--demo-toolbar-height);bottom:0;transform:translateX(-50%);width:min(390px,100vw);padding:12px;container-type:inline-size;container-name:app}
body.demo-mobile .modal.dialog-shell{width:100%!important;max-height:calc(100dvh - var(--demo-toolbar-height) - 24px);border-radius:16px}
body.demo-mobile .dialog-header{padding:18px}
body.demo-mobile .dialog-body{padding:16px 18px 20px;scrollbar-gutter:auto}
body.demo-mobile .dialog-footer{padding:12px 18px max(14px,env(safe-area-inset-bottom))}
body.demo-mobile .dialog-footer .form-actions .btn{min-height:44px;flex:1;min-width:100px}
body.demo-mobile .text-cleanup-dialog{padding:20px 17px;max-height:calc(100dvh - var(--demo-toolbar-height) - 24px)}
body.demo-mobile .text-cleanup-dialog footer{flex-wrap:wrap}
body.demo-mobile .text-cleanup-dialog footer .btn{flex:1;min-height:44px}
body.demo-mobile .toast{max-width:calc(min(390px,100vw) - 32px);white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
.harbour-public-host iframe{height:calc(100dvh - var(--demo-toolbar-height))!important}
@container app (max-width:760px){
 #device input,#device select,#device textarea,.modal input,.modal select,.modal textarea{font-size:16px}
 #device .btn,.modal .btn{min-height:44px}
 #tenantPortal input,#tenantPortal select,#tenantPortal textarea,.create-form input,.create-form select,.create-form textarea{font-size:16px}
 #tenantPortal .portal-service-card,#tenantPortal .portal-list-row,#tenantPortal .portal-navigation button{min-height:44px}
 #tenantPortal .portal-header .btn{min-height:44px}
 #tenantPortal .portal-estate-brand{min-width:0;flex:1}#tenantPortal .portal-estate-brand>span{min-width:0}#tenantPortal .portal-estate-brand b{overflow-wrap:normal}
 #tenantPortal .portal-header-account{flex:none}#tenantPortal .portal-welcome-copy{min-width:0}
 #tenantPortal .portal-balance-amount,#tenantPortal .portal-row-amount{font-variant-numeric:tabular-nums}
 #tenantPortal .portal-content .suite-card-grid{grid-template-columns:minmax(0,1fr)}
 #tenantPortal .portal-content .suite-location-row>.suite-actions{width:100%}
 #tenantPortal .portal-content .suite-actions .btn{min-height:44px}
 .mobile-nav{padding-bottom:max(9px,env(safe-area-inset-bottom));flex-wrap:wrap}
 .mobile-nav button{min-height:44px;flex:1;min-width:42px;padding:9px 6px}
}
@media(max-width:760px){
 .demo-previewbar{gap:10px;padding:5px 12px}.demo-preview-viewport{display:none}
 .demo-preview-switch button{min-width:95px;min-height:36px;font-size:11px}
 input,select,textarea{font-size:16px}
 .modal-backdrop,.text-cleanup-overlay{top:var(--demo-toolbar-height)}
 :root .modal.dialog-shell{max-height:calc(100dvh - var(--demo-toolbar-height) - 24px)}
 .toast{max-width:calc(100vw - 32px);white-space:normal;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){.device{transition:none}}

.workspace-preview-controls{display:none}

/* Dialogs sit above the preview toolbar so titles and close controls stay visible. */
.modal-backdrop,.text-cleanup-overlay{z-index:1500!important;top:0!important}
body.demo-mobile .modal.dialog-shell{max-height:calc(100dvh - 24px)}
@media(max-width:760px){:root .modal.dialog-shell{max-height:calc(100dvh - 24px)}}