/* Viewport-bounded shells: rotation only changes layout, never modal state. */
:root{--modal-top-gap:max(16px,env(safe-area-inset-top));--modal-bottom-gap:max(16px,env(safe-area-inset-bottom));--modal-available-height:calc(100dvh - var(--modal-top-gap) - var(--modal-bottom-gap));--modal-available-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))}
#panel,#panel.profile-sheet,#panel.share-sheet,#panel.brand-sheet,#panel.brand-sheet.expanded,#panel.verified-sheet,.property-dialog{max-height:var(--modal-available-height);max-width:min(520px,var(--modal-available-width));overflow:hidden}
#panel.verified-sheet{max-width:min(420px,var(--modal-available-width))}
#panel.brand-sheet.expanded{height:var(--modal-available-height)}
#panel .panel-header{min-width:0;flex-shrink:0}
#panel .panel-header #panel-title{overflow-wrap:anywhere}
#panel #panel-content{flex:0 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;overflow-wrap:anywhere}
#panel.brand-sheet .panel-header{position:relative;inset:auto;height:68px;min-height:68px;flex:0 0 68px;padding:0 64px;background:inherit}

#panel .close{top:14px;right:14px}
.property-dialog{padding:0}
.property-dialog[open]{display:flex;flex-direction:column}
.property-dialog header{position:relative;flex:none;min-height:80px;margin:0;padding:24px 68px 24px 24px;background:inherit;z-index:1}
.property-dialog header h2{padding:0;overflow-wrap:anywhere}
.property-dialog .property-close{top:14px;right:14px}
.property-body{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 24px max(24px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
.property-body:focus{outline:none}
.property-facts dt,.property-facts dd{min-width:0}
.property-facts dd{text-align:right}
/* Mobile sheets paint through the home-indicator area. Safe space belongs
   inside the scrolling body, never between the sheet and viewport edge. */
:root{--modal-small-height:100svh;--modal-safe-bottom:env(safe-area-inset-bottom);--modal-safe-left:env(safe-area-inset-left);--modal-safe-right:env(safe-area-inset-right)}
@media(max-width:639px), (hover:none) and (pointer:coarse) and (max-width:1023px){
 #panel,#panel.profile-sheet,#panel.share-sheet,#panel.brand-sheet,#panel.brand-sheet.expanded,#panel.verified-sheet,.property-dialog{
  position:fixed;inset:auto 0 0;margin:0 auto;width:100%;max-width:none;
  padding:0 var(--modal-safe-right) 0 var(--modal-safe-left);
  --modal-available-height:calc(min(var(--modal-small-height),100dvh) - var(--modal-top-gap));
  border-bottom-left-radius:0;border-bottom-right-radius:0;
 }
 #panel #panel-content,#panel.profile-sheet #panel-content,.property-body{padding-bottom:max(24px,var(--modal-safe-bottom))}
 #panel.verified-sheet #panel-content{padding-bottom:max(40px,var(--modal-safe-bottom))}
 #panel.share-sheet #panel-content{padding-bottom:var(--modal-safe-bottom)}
 #panel.share-sheet .share-join{padding-bottom:20px}
}
@media(orientation:landscape) and (max-height:500px){
 #panel .panel-header,#panel.brand-sheet .panel-header{height:60px;min-height:60px;flex-basis:60px}
 .property-dialog header{min-height:60px;padding-top:18px;padding-bottom:18px}
}
/* A single animation across breakpoints prevents a fresh slide-in on rotation. */
#panel[open],#panel.profile-sheet[open],#panel.share-sheet[open],#panel.brand-sheet[open],.property-dialog[open]{animation:modal-appear 160ms ease-out}
@keyframes modal-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#panel[open],#panel.profile-sheet[open],#panel.share-sheet[open],#panel.brand-sheet[open],.property-dialog[open]{animation:none}}

/* Use the visible viewport while mobile browser chrome changes height.
   No transitions or scroll writes: the same open dialog/content stay mounted. */
@media(max-width:639px), (hover:none) and (pointer:coarse) and (max-width:1023px){
 :root[data-modal-viewport] :is(#panel,.property-dialog){
  top:var(--modal-viewport-bottom);bottom:auto;transform:translateY(-100%);
  --modal-available-height:calc(min(var(--modal-small-height),var(--modal-viewport-height)) - var(--modal-top-gap));
 }
}

/* Compact identity dialogs share the same always-reachable close control. */
#panel.followers-sheet{max-width:min(420px,var(--modal-available-width));border-radius:24px}
#panel:is(.verified-sheet,.followers-sheet) .panel-header{position:absolute;inset:0 0 auto;height:0;min-height:0;flex-basis:0;padding:0;pointer-events:none}
#panel:is(.verified-sheet,.followers-sheet) .panel-header .close{pointer-events:auto}
#panel:is(.verified-sheet,.followers-sheet) #panel-content{padding:32px 24px max(40px,env(safe-area-inset-bottom))}
@media(max-width:639px), (hover:none) and (pointer:coarse) and (max-width:1023px){
 #panel.followers-sheet{max-width:none;border-radius:24px 24px 0 0}
}