/* Keep every structural template inside the live-preview viewport. */
.preview-panel,.preview-stage,.clinic-preview,.clinic-preview .clinic-hero,.clinic-preview .preview-copy,.clinic-preview .preview-portrait{min-width:0;max-width:100%}
.preview-stage{overflow:hidden;place-items:start stretch}
.clinic-preview{position:relative;contain:paint;width:100%;max-width:100%;min-width:0;isolation:isolate}
.clinic-preview .clinic-nav{max-width:100%}.clinic-preview .clinic-logo{min-width:0}.clinic-preview .clinic-logo>div{min-width:0}.clinic-preview .fake-links{min-width:0;flex-shrink:1}.clinic-preview .preview-copy h2,.clinic-preview .preview-copy p{max-width:100%;overflow-wrap:anywhere}.clinic-preview .preview-portrait{overflow:hidden}.clinic-preview .portrait-halo{max-width:88%;max-height:88%}.clinic-preview .portrait-shape{max-width:82%}.clinic-preview .doctor-chip{max-width:min(190px,72%)}
/* Royal Sidebar and Graphite Lab: anchor the rail to the preview itself. */
.clinic-preview.nav-side{position:relative;padding-right:106px}.clinic-preview.nav-side .clinic-nav{right:0;left:auto;top:28px;bottom:0;max-width:106px;overflow:hidden}.clinic-preview.nav-side .clinic-hero,.clinic-preview.nav-side .clinic-footer,.clinic-preview.nav-side .private-notice{width:100%;max-width:100%}.clinic-preview.nav-side .clinic-logo b,.clinic-preview.nav-side .clinic-logo small{overflow-wrap:anywhere;white-space:normal}.clinic-preview.nav-side .fake-links{width:100%}
/* Wide/rotated concepts are clipped and scaled before reaching the frame edge. */
.clinic-preview.layout-cinematic .preview-portrait,.clinic-preview.template-theme-19 .preview-portrait{overflow:hidden}.clinic-preview.layout-diagonal .portrait-shape,.clinic-preview.portrait-diamond .portrait-shape,.clinic-preview.template-theme-20 .portrait-shape{max-width:68%;max-height:68%}.clinic-preview.layout-frame .clinic-hero,.clinic-preview.layout-capsule .clinic-hero,.clinic-preview.template-theme-23 .clinic-hero,.clinic-preview.template-theme-26 .clinic-hero{max-width:calc(100% - 28px);margin-left:auto;margin-right:auto}.clinic-preview.template-theme-24 .preview-portrait{max-width:92%;margin-inline:auto}
@media(min-width:901px) and (max-width:1280px){.builder-shell{grid-template-columns:minmax(380px,430px) minmax(0,1fr)}.preview-panel{padding:28px 14px}.preview-stage{padding:12px}.clinic-preview{width:100%;min-width:0}.clinic-preview .clinic-nav{padding-inline:16px}.clinic-preview .fake-links{gap:11px;font-size:7px}.clinic-preview .clinic-logo b{max-width:120px}.clinic-preview .clinic-hero{padding-inline:4%}.clinic-preview .preview-copy h2{font-size:clamp(27px,3.2vw,41px)}.clinic-preview .preview-copy p{font-size:9px}.clinic-preview .preview-actions{gap:10px}.clinic-preview .preview-trust{gap:8px}.clinic-preview .portrait-shape{width:165px;height:275px}.clinic-preview.layout-sidebar .preview-copy{padding:28px}.clinic-preview.layout-sidebar .portrait-shape{width:125px}.clinic-preview.layout-magazine .preview-copy h2{font-size:42px}.clinic-preview.layout-bento .preview-copy,.clinic-preview.layout-bento .preview-portrait{padding:22px}.clinic-preview.layout-columns .preview-copy,.clinic-preview.layout-columns .preview-portrait{padding:28px}.clinic-preview.nav-side{padding-right:92px}.clinic-preview.nav-side .clinic-nav{max-width:92px}.clinic-preview.nav-side .clinic-logo>span{width:30px;height:30px}.clinic-preview.nav-side .clinic-logo b{font-size:8px}.clinic-preview.nav-side .fake-links{font-size:7px}}
@media(max-width:900px){.preview-stage{justify-content:center;overflow:hidden}.clinic-preview{width:min(390px,100%);min-width:0}.clinic-preview.nav-side{padding-right:0}.clinic-preview.nav-side .clinic-nav{position:relative;right:auto;top:auto;bottom:auto;max-width:100%;overflow:visible}.clinic-preview .clinic-hero{max-width:100%}.clinic-preview.layout-frame .clinic-hero,.clinic-preview.layout-capsule .clinic-hero,.clinic-preview.template-theme-23 .clinic-hero,.clinic-preview.template-theme-26 .clinic-hero{max-width:calc(100% - 20px)}.clinic-preview .portrait-shape{max-width:78%}}
@media(max-width:390px){.preview-stage{padding:8px}.clinic-preview{width:100%;border-radius:18px}.clinic-preview .clinic-nav{padding-inline:12px}.clinic-preview .clinic-logo b{max-width:105px}.clinic-preview .preview-copy h2{font-size:29px}.clinic-preview .preview-actions{flex-wrap:wrap}.clinic-preview .preview-trust{flex-wrap:wrap}}

/* Desktop builder: keep the live design locked in view and scroll only the controls rail. */
@media(min-width:901px){
 html,body{height:100%;overflow:hidden}
 .builder-header{height:82px;min-height:82px}
 .builder-shell{height:calc(100vh - 82px);height:calc(100dvh - 82px);min-height:0;overflow:hidden}
 .form-panel{height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9eb1a8 transparent}
 .form-panel::-webkit-scrollbar{width:8px}.form-panel::-webkit-scrollbar-track{background:transparent}.form-panel::-webkit-scrollbar-thumb{border:2px solid #fff;border-radius:99px;background:#9eb1a8}
 .preview-panel{height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column}
 .preview-toolbar{width:100%;flex:0 0 48px}
 .preview-stage{width:100%;min-height:0;flex:1;overflow:hidden}
 .preview-note{flex:0 0 auto;margin:12px 0 0}
}

@media(min-width:901px) and (max-height:820px){
 .preview-panel{padding-top:18px;padding-bottom:14px}
 .preview-toolbar{height:42px;flex-basis:42px}
 .preview-stage{padding:10px}
 .preview-note{margin-top:7px;font-size:9px}
}