/* Shared project viewer: one primary rail, secondary controls in a named dialog. */
/* Keep enlarged/wrapped controls reachable inside the viewport, including safe areas. */
#experience>header .identity{max-width:calc(100% - 360px)}
#viewer-controls{position:absolute;top:24px;inset-inline-end:34px;z-index:7;display:flex;align-items:flex-start;gap:8px;max-width:calc(100% - 68px);max-height:calc(100dvh - 24px - var(--viewer-credit-clearance));overflow:auto;overscroll-behavior:contain}
#viewer-primary{width:260px;min-width:0;display:flex;flex-direction:column;gap:8px}
#viewer-apartment-slot:empty,#viewer-panorama-primary:empty{display:none}
#viewer-controls #residence-explorer{position:relative;inset:auto;top:auto;width:100%;max-width:none;border-radius:10px;box-shadow:0 4px 20px #16372b18}
#viewer-controls #explorer-toggle{padding:13px 15px;min-height:48px;font-size:14px;gap:12px}
#viewer-controls #explorer-content{max-height:calc(100dvh - 205px);overscroll-behavior:contain}
#viewer-menu-toggle{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:48px;padding:11px 14px;border-radius:10px;background:#f8f5eef2;border:1px solid #fff9;font-size:14px;box-shadow:0 4px 20px #16372b18}
#viewer-menu-toggle [aria-hidden]{font-size:17px}
#viewer-panorama-primary .panorama-launch,#viewer-menu .panorama-launch{position:static;inset:auto;margin:0;box-shadow:none;min-height:44px;font-size:14px}
#viewer-panorama-primary .panorama-launch:not([hidden]){display:block}
#viewer-menu{position:fixed;inset:24px auto auto;inset-inline-end:34px;margin:0;width:328px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 24px - var(--viewer-credit-clearance));padding:16px;border-radius:14px;background:#f7fafbee;backdrop-filter:blur(18px);overflow:auto;overscroll-behavior:contain;text-align:start}
#viewer-menu::backdrop{background:#10262d26;backdrop-filter:none}
#viewer-menu .viewer-menu-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
#viewer-menu h2{font:600 16px/1.4 Heebo,Arial,sans-serif;margin:0;letter-spacing:0}
#viewer-menu-close{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:transparent;font-size:26px}
#viewer-menu .settings{position:static;inset:auto;width:auto;padding:0 0 14px;margin-bottom:10px;border:0;border-bottom:1px solid #d8e3e6;border-radius:0;box-shadow:none;background:none;backdrop-filter:none}
#viewer-menu .segmented{gap:6px}#viewer-menu .segmented button{flex:1;min-height:44px;font-size:14px;padding:9px}#viewer-menu .segmented button span{display:inline}
#viewer-menu .setting-bottom{display:flex;gap:6px;padding:8px 0 0}#viewer-menu .setting-bottom button{flex:1;min-height:44px;font-size:14px;padding:6px}
body[data-explorer=apartment] #viewer-menu .setting-bottom{display:none}
#viewer-menu .viewer-menu-actions{display:grid;gap:4px}
#viewer-menu .viewer-menu-action,#viewer-menu .viewer-language-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:0;border-radius:6px;background:none;font:400 14px/1.5 Heebo,Arial,sans-serif;text-align:start;white-space:normal}
#viewer-menu .viewer-menu-action:hover{background:#e5edf0}#viewer-menu .viewer-language-row{justify-content:space-between}
#viewer-menu #language-toggle{font:600 14px Heebo,Arial,sans-serif;width:52px;height:44px;border-radius:7px;background:#e5edf0;box-shadow:none}
#viewer-menu .gallery-button span{margin:0;font-size:14px}#viewer-menu .gallery-button span:last-child{display:none}
#viewer-menu #viewer-panorama-other:empty{display:none}#viewer-menu #viewer-panorama-other{margin-top:8px}
#viewer-menu .tour-tools{position:static;inset:auto;display:flex!important;flex-wrap:wrap;width:100%;max-width:none;margin-top:14px;padding-top:12px;border-top:1px solid #d8e3e6;gap:8px}
#viewer-menu .tour-tools a{flex:1;padding:9px 10px;font-size:14px}
#viewer-menu .viewer-menu-credits{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px}
#viewer-menu .client-links{display:flex;width:auto;max-width:100%;gap:6px}
#viewer-menu .architect-link{width:150px;height:44px;flex-basis:150px;box-shadow:none}
#viewer-menu .live-badge{display:flex;background:none;padding:0;font-size:11px;letter-spacing:0;gap:6px}
#viewer-menu a:focus-visible,#viewer-controls a:focus-visible{outline:3px solid #008caa;outline-offset:3px}
#viewer-menu .viewer-views{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid #d8e3e6}
#viewer-menu .viewer-views h3{font-size:14px;font-weight:600;margin:0 0 8px}
#viewer-menu .views{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible}
#viewer-menu .views button{min-height:44px;padding:9px 10px!important;font-size:14px;white-space:normal;text-align:start}
#experience>footer,#experience>.gesture-hint{display:none!important}
/* The selected unit card follows the compact rail instead of the former stack. */
#experience .residence-selection{top:142px;inset-inline-end:34px;max-height:calc(100dvh - 142px - var(--viewer-credit-clearance))}
html.net-ref-embed #viewer-controls,html.net-ref-embed #viewer-menu{display:none!important}
@media(max-width:900px){#viewer-controls{inset-inline-end:20px;max-width:calc(100% - 40px)}#viewer-primary{width:240px}#viewer-menu{inset-inline-end:20px}#experience .residence-selection{inset-inline-end:20px}}
@media(max-width:700px){
 #experience>header{display:flex;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;justify-content:flex-start}
 #experience>header .identity{min-height:0;max-width:100%;padding:8px 12px}
 #experience>header .identity .eyebrow{font-size:11px;line-height:1.3;margin:0}
 #experience>header .identity h1{font-size:25px;line-height:1.2;margin:3px 0;letter-spacing:-.025em}
 #experience>header .identity p{display:none}
 #viewer-controls{top:calc(var(--viewer-header-bottom,82px) + 10px);left:12px;right:12px;max-width:none;gap:8px;max-height:calc(100dvh - var(--viewer-header-bottom,82px) - 10px - var(--viewer-credit-clearance))}
 #viewer-primary{flex:1;width:auto}#viewer-menu-toggle{padding-inline:12px}
 #viewer-controls #explorer-content{max-height:calc(100dvh - var(--viewer-header-bottom,82px) - 150px)}
 #viewer-menu{inset: max(12px,env(safe-area-inset-top)) 12px auto;margin-inline-start:auto;width:328px;max-width:calc(100vw - 24px);max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - var(--viewer-credit-clearance));padding:12px}
 #experience .residence-selection{top:auto;bottom:max(12px,env(safe-area-inset-bottom));inset-inline:12px;width:auto;max-height:34dvh}
}
@media(max-height:560px) and (min-width:701px){
 #viewer-controls{top:12px;inset-inline-end:12px;max-height:calc(100dvh - 12px - var(--viewer-credit-clearance))}#viewer-primary{width:230px}#viewer-menu{top:12px;inset-inline-end:12px;max-height:calc(100dvh - 12px - var(--viewer-credit-clearance))}
 #viewer-controls #explorer-content{max-height:calc(100dvh - 126px)}#experience .residence-selection{top:132px;bottom:auto;inset-inline-end:12px;max-height:calc(100dvh - 132px - var(--viewer-credit-clearance))}
}

/* Asset recovery stays in the scrollable selector; the building remains usable. */
#residence-recovery{padding:12px;margin-bottom:12px;border:1px solid #cbd8d7;border-radius:8px;background:#edf3f1}
#residence-recovery[hidden]{display:none}
#residence-recovery p{margin:0 0 8px;font-size:13px;line-height:1.5}
#residence-recovery button{width:100%;min-height:44px;padding:9px 12px;border-radius:6px;background:#30493f;color:#fff;font-size:14px}

/* Margin-aligned loading text and credit; shared by all compact project viewers. */
#experience{--viewer-edge:14px;--viewer-credit-height:44px;--viewer-bottom-edge:max(var(--viewer-edge),env(safe-area-inset-bottom));--viewer-credit-clearance:calc(var(--viewer-bottom-edge) + var(--viewer-credit-height) + 8px)}
#experience #loading .loading-copy{top:auto;left:auto;right:auto;bottom:max(84px,calc(env(safe-area-inset-bottom) + 70px),var(--viewer-credit-clearance));inset-inline-start:max(var(--viewer-edge),env(safe-area-inset-left));max-width:min(560px,calc(100% - 28px));text-align:start}
[dir=rtl] #experience #loading .loading-copy{inset-inline-start:max(var(--viewer-edge),env(safe-area-inset-right))}
#experience>.natref-credit{left:max(var(--viewer-edge),env(safe-area-inset-left));right:auto;top:auto;bottom:var(--viewer-bottom-edge);min-height:44px;max-width:min(220px,calc(100% - max(var(--viewer-edge),env(safe-area-inset-left)) - max(var(--viewer-edge),env(safe-area-inset-right))));pointer-events:auto;text-decoration:none}
#experience>.natref-credit .natref-mark{flex-shrink:0}
#experience>.natref-credit .natref-copy{min-width:0;overflow-wrap:anywhere}
#experience>.natref-credit strong{font-size:11px}
#experience>.natref-credit small{font-size:9px;line-height:1.2}
#experience>.natref-credit:focus-visible{outline:3px solid #008caa;outline-offset:3px}
body:not([data-explorer]) #experience>.vertical-tools,body[data-explorer=building] #experience>.vertical-tools{top:auto;left:auto;right:max(var(--viewer-edge),env(safe-area-inset-right));bottom:max(var(--viewer-edge),env(safe-area-inset-bottom));flex-direction:row}
#experience>.vertical-tools>span{display:none}
@media(max-width:700px){
 #experience{--viewer-edge:12px}
 #experience #loading .loading-copy{max-width:calc(100% - 24px);bottom:max(90px,calc(env(safe-area-inset-bottom) + 78px),var(--viewer-credit-clearance))}
 #experience #loading .loading-copy h2{font-size:clamp(25px,7vw,33px);letter-spacing:-.025em;margin:10px 0 14px}
 #experience #loading .loading-copy p{font-size:14px;line-height:1.5}
}
/* Preserve the scrollable error card and embedded preview's compact spacing. */
body.viewer-unavailable #experience #loading .loading-copy{top:auto;bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px),var(--viewer-credit-clearance));max-height:calc(100dvh - 190px);overflow:auto}
@media(max-height:440px){#experience #loading .loading-copy{max-height:calc(100dvh - 160px);overflow:auto}#experience #loading .loading-copy h2{font-size:27px;margin:8px 0 12px}}

/* Persistent architectural authorship, separate from Nat Ref presentation credit. */
#experience>header .project-architecture-credit{display:flex;align-items:center;gap:8px;margin-top:9px;max-width:100%;pointer-events:auto}
#experience>header .project-architecture-credit>a{font:11px/1.35 Arial,sans-serif;color:#30493f;text-decoration:none;max-width:220px;white-space:normal}
#experience>header .project-architecture-credit>a:hover{text-decoration:underline}
#experience>header .project-architecture-credit .client-links{display:flex;width:64px;max-width:64px;flex:0 0 64px;margin:0}
#experience>header .project-architecture-credit .architect-link{width:64px;min-width:0;flex-basis:64px;height:30px;padding:4px}
@media(max-width:700px){#experience>header .project-architecture-credit{gap:6px;margin-top:6px}#experience>header .project-architecture-credit>a{font-size:10px;max-width:190px}#experience>header .project-architecture-credit .client-links{width:48px;max-width:48px;flex-basis:48px}#experience>header .project-architecture-credit .architect-link{width:48px;flex-basis:48px;height:26px}}

/* Two compact identity rows on phones; the measured header still positions the rail. */
@media(max-width:700px),(max-height:500px) and (hover:none) and (pointer:coarse){
 #experience>header{top:max(8px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
 #experience>header .identity{width:max-content;min-width:0;min-height:0;max-width:100%;padding:6px 10px}
 #experience>header .identity>.eyebrow,#experience>header .identity>p{display:none}
 #experience>header .identity h1{font-size:20px;line-height:1.2;margin:0;letter-spacing:-.025em;overflow-wrap:anywhere}
 #experience>header .project-architecture-credit{gap:6px;margin-top:2px;min-width:0}
 #experience>header .project-architecture-credit>a{display:flex;align-items:center;min-height:24px;min-width:0;max-width:none;font-size:11px;line-height:1.25;overflow-wrap:anywhere}
 #experience>header .project-architecture-credit .client-links{width:48px;max-width:48px;flex:0 0 48px}
 #experience>header .project-architecture-credit .architect-link{width:48px;flex-basis:48px;height:24px;padding:3px}
}
@media(max-width:700px){
 #viewer-controls{top:calc(var(--viewer-header-bottom,72px) + 8px);left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));max-height:calc(100dvh - var(--viewer-header-bottom,72px) - 8px - var(--viewer-credit-clearance))}
 #viewer-menu{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));max-width:calc(100vw - max(12px,env(safe-area-inset-left)) - max(12px,env(safe-area-inset-right)))}
}
/* Wide phone landscape keeps identity and navigation beside each other, clear of the notch. */
@media(min-width:701px) and (max-height:500px) and (hover:none) and (pointer:coarse){
 #experience>header .identity{max-width:calc(100% - 336px)}
 #viewer-controls,#viewer-menu{top:max(8px,env(safe-area-inset-top));inset-inline-end:max(12px,env(safe-area-inset-right));max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - var(--viewer-credit-clearance))}
 [dir=rtl] #viewer-controls,[dir=rtl] #viewer-menu{inset-inline-end:max(12px,env(safe-area-inset-left))}
}

/* A measured bottom strip keeps the home credit clear in every viewer mode. */
#experience #apartment-hud{bottom:var(--viewer-credit-clearance)}
@media(max-width:700px){
 #experience .residence-selection{bottom:var(--viewer-credit-clearance);max-height:min(34dvh,calc(100dvh - var(--viewer-header-bottom,72px) - 72px - var(--viewer-credit-clearance)))}
 body:not([data-explorer]) #experience>.vertical-tools,body[data-explorer=building] #experience>.vertical-tools{bottom:var(--viewer-credit-clearance)}
}

/* Graphics profiles are explicit and reversible; no permanent hidden quality tier. */
.graphics-quality{display:grid;gap:8px;padding:16px 0;border-top:1px solid #ccd3cd}
.graphics-quality label{font-weight:600}.graphics-quality select{width:100%;min-height:44px;padding:8px;border:1px solid #809489;border-radius:7px;background:#fff;color:#20392e;font:inherit}
.graphics-quality p,.graphics-recovery p{font-size:13px;line-height:1.5;margin:0}
.graphics-recovery{display:grid;gap:8px;max-width:360px;margin-top:12px}
#loading .graphics-recovery button{display:block;width:100%;min-height:44px;padding:10px 14px;border:1px solid #bccdc1;border-radius:7px;background:#f4f7f2;color:#1f3c2d;font:inherit;cursor:pointer}
#loading .graphics-recovery button:first-of-type{background:#244b3a;color:#fff}
#loading .graphics-recovery button:disabled{opacity:.65;cursor:wait}
body.viewer-unavailable #loading{overflow:auto}body.viewer-unavailable #loading .loading-copy{max-height:100%;overflow:auto;padding-block:18px}
.graphics-recovery details{font-size:12px;text-align:start}.graphics-recovery summary{cursor:pointer;padding:8px 0}.graphics-recovery pre{max-height:180px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left;background:#172a24;color:#eef6f0;padding:8px;border-radius:6px}

/* Keep the model unobscured; individual controls carry their own contrast. */
#experience>.vignette{display:none}

/* Shared model points stay below every control. Occluded/crowded points use 360 entry. */
.model-panorama-points{position:absolute;inset:0;pointer-events:none;z-index:5}
.model-panorama-points[hidden],.model-panorama-point[hidden],.panorama-launch[hidden]{display:none!important}
.model-panorama-point{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;width:44px;height:44px;min-height:44px;padding:0;border:2px solid #fff;border-radius:50%;background:#30493fdf;color:#fff;font:20px Arial,sans-serif;box-shadow:0 2px 12px #0003;cursor:pointer}
.model-panorama-point:focus-visible{outline:3px solid #d8ad60;outline-offset:3px}
.model-panorama-point:hover::after,.model-panorama-point:focus-visible::after{content:attr(data-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(calc(-50% + var(--point-label-shift,0px)));padding:6px 9px;background:#f8f5eef5;color:#263b36;border-radius:6px;max-width:min(180px,55vw);white-space:normal;font-size:12px;pointer-events:none}
#viewer-apartment-options{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #ccd3cd}
#viewer-apartment-options[hidden]{display:none}
#viewer-apartment-options h3{margin:0 0 8px;font-size:14px}
#viewer-apartment-options #apartment-levels{margin:0 0 8px;flex-wrap:wrap;justify-content:flex-start}
#viewer-apartment-options #apartment-levels button,#viewer-apartment-options #walk-home{min-height:44px;font:inherit;font-size:14px}
#viewer-apartment-options #walk-home{position:static;inset:auto;width:100%;margin:0 0 8px;border-radius:6px}
#viewer-apartment-options #walk-home[hidden]{display:none}
#viewer-apartment-options summary{min-height:44px;padding:10px 0;cursor:pointer;font-size:14px}
#viewer-apartment-options #walk-help{display:block;margin:0;padding:4px 0;font-size:13px;text-align:start;background:none}
@media(max-width:700px),(max-height:500px) and (hover:none) and (pointer:coarse){
 #viewer-primary{flex-direction:row;align-items:flex-start;gap:6px;flex:1;min-width:0}
 #viewer-apartment-slot{flex:1;min-width:0}
 #viewer-panorama-primary{flex:0 0 62px}
 #viewer-panorama-primary .panorama-launch{font-size:0;padding:10px 8px;min-height:48px;display:flex!important;align-items:center;justify-content:center;box-sizing:border-box}
 #viewer-panorama-primary .panorama-launch::after{content:'360°';font:600 14px Arial,sans-serif;direction:ltr}
 #viewer-controls{overflow:visible}
 #viewer-controls #explorer-toggle{padding:10px;min-height:48px;font-size:13px}
 #viewer-controls #explorer-title{min-width:0;overflow-wrap:anywhere}
 #viewer-controls #explorer-content{max-height:calc(100dvh - var(--viewer-header-bottom,72px) - 140px - var(--viewer-credit-clearance));overflow:auto}
 #viewer-menu-toggle{padding:10px;min-height:48px;font-size:13px;gap:5px}
 #experience #apartment-hud{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));transform:none;width:auto;max-width:none;bottom:var(--viewer-credit-clearance);pointer-events:none}
 #apartment-hud .apartment-modes{width:max-content;max-width:100%;margin-inline:auto;padding:4px;pointer-events:auto}
 #apartment-hud .apartment-modes button{min-height:44px;padding:8px 14px;font-size:13px;flex:1}
 body[data-explorer=apartment] #apt-overview,body[data-explorer=walk] #apt-walk{display:none}
 #apartment-hud #residence-identity{display:block;width:max-content;max-width:100%;margin:0 auto 5px;padding:3px 8px;font-size:12px;line-height:1.4;box-shadow:none;border:0;border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}
 #apartment-hud #residence-name{font:600 12px/1.4 Arial,sans-serif}
 #apartment-hud #residence-type{font-size:11px;padding-inline-start:6px;margin-inline-start:6px}
 #apartment-hud #walk-level{display:none}
 #apartment-hud #walk-controls{pointer-events:auto}
 #apartment-hud #move-pad{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(var(--viewer-credit-clearance) + 83px);width:88px;height:88px;min-height:88px;opacity:1;pointer-events:auto}
 #apartment-hud .balcony-context-label{max-width:100%;font-size:11px}
}
@media(min-width:701px) and (max-height:500px) and (hover:none) and (pointer:coarse){
 #viewer-primary{width:260px}#viewer-controls{max-width:350px}
 #experience #apartment-hud{left:auto;right:max(12px,env(safe-area-inset-right));max-width:calc(100% - 210px);bottom:max(12px,env(safe-area-inset-bottom))}
 #apartment-hud #move-pad{bottom:calc(var(--viewer-credit-clearance) + 8px)}
}

.model-panorama-point[data-label-below=true]:hover::after,.model-panorama-point[data-label-below=true]:focus-visible::after{bottom:auto;top:calc(100% + 6px)}
/* Hidden state must beat the compact primary entry's ID-qualified flex rule. */
#viewer-panorama-primary .panorama-launch[hidden]{display:none!important}

/* Never show scene navigation over initial loading, retry, or graphics recovery. */
body:not(.loaded) #experience .vertical-tools,
#experience[data-residence-loading="true"] .vertical-tools{display:none!important}