/* Mobile pages use the document scroller so Safari can paint real content
   behind its floating toolbar. Desktop keeps the existing application frame. */
/* Navigation uses its surface color, with no frame outlines. */
:root{--header-surface:#000}
:root[data-theme=dark]{--header-surface:#121212}
.site-header,body::before{background:var(--header-surface)}
.site-header .menu-toggle{background:transparent}
.content-shell,:root[data-theme=dark] .content-shell{border-color:transparent}
.content-shell::before{content:none}
/* Both themes use a filled keyboard focus state, with no close-button ring. */
#nav-drawer .drawer-close,
#nav-drawer .drawer-close:focus,
#nav-drawer .drawer-close:focus-visible{border:0;outline:none;box-shadow:none}
#nav-drawer .drawer-close:focus-visible{background:#dedede}
:root[data-theme=dark] #nav-drawer .drawer-close:focus-visible{background:#242424}
@media(max-width:1023px){
 :root{--header-corner-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='black' d='M0 0H26A26 26 0 0 0 0 26Z'/%3E%3C/svg%3E");--header-corner-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='black' d='M0 0H26V26A26 26 0 0 0 0 0Z'/%3E%3C/svg%3E")}
 :root[data-theme=dark]{--header-corner-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23121212' d='M0 0H26A26 26 0 0 0 0 26Z'/%3E%3C/svg%3E");--header-corner-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23121212' d='M0 0H26V26A26 26 0 0 0 0 0Z'/%3E%3C/svg%3E")}
 html{height:auto;min-height:100%;overflow-x:clip;overflow-y:auto;overscroll-behavior-y:auto;scroll-padding-top:calc(var(--header-height) + env(safe-area-inset-top) + 24px)}
 body{height:auto;min-height:100vh;min-height:100lvh;padding-top:calc(var(--header-height) + env(safe-area-inset-top));overflow:visible;overscroll-behavior-y:auto}
 body::before{position:fixed;inset:0 0 auto}
 .site-header{padding-top:env(safe-area-inset-top);padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
 /* Paint only the two corner cutouts at the fixed header edge. The document
    keeps scrolling freely behind them and behind the browser's bottom bar. */
 .site-header::after{content:"";position:absolute;top:100%;left:0;right:0;height:var(--surface-radius);background-image:var(--header-corner-left),var(--header-corner-right);background-position:left top,right top;background-size:var(--surface-radius) var(--surface-radius);background-repeat:no-repeat;pointer-events:none}
 .site-header::before{content:none}
 :root[data-theme=dark] .content-shell::before{content:none}
 body .content-shell{position:relative;top:auto;left:auto;right:auto;height:auto;min-height:calc(100vh - var(--header-height) - env(safe-area-inset-top));min-height:calc(100lvh - var(--header-height) - env(safe-area-inset-top));max-width:none;margin:0;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);overflow:visible;isolation:auto}
 body .content-shell #content-scroll{height:auto;min-height:calc(100vh - var(--header-height) - env(safe-area-inset-top) - 2px);min-height:calc(100lvh - var(--header-height) - env(safe-area-inset-top) - 2px);overflow:visible;overscroll-behavior-y:auto;-webkit-overflow-scrolling:auto}
 body .content-shell main{max-width:none;background:transparent}
 /* Explicit large-viewport painting avoids Safari's bottom:0 drawer cutoff.
    Reserve the part under browser controls as scrollable bottom padding so
    the last navigation links can still move into the visible viewport. */
 #nav-drawer{position:absolute;inset:var(--drawer-document-top,0px) 0 auto;height:100vh;height:100lvh;max-height:none;overflow:visible;isolation:isolate}
 /* Paint the dimming in the document-sized dialog instead of Safari's
    viewport-clipped native backdrop. Native modality/focus trapping stays. */
 #nav-drawer::backdrop{background:transparent;animation:none}
 #nav-drawer::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.58);animation:backdrop-in .28s ease both}
 #nav-drawer.is-closing::before{animation:backdrop-out .22s ease-in both}
 #nav-drawer .drawer-panel{height:100%;box-sizing:border-box;padding-bottom:calc(max(24px,env(safe-area-inset-bottom)) + max(0px,100lvh - 100dvh))}
 html:has(body.menu-open){overflow:hidden}
 body.search-open #content-scroll{display:none}
 body.search-open .global-search{position:relative;inset:auto;min-height:calc(100vh - var(--header-height) - env(safe-area-inset-top) - 2px);min-height:calc(100lvh - var(--header-height) - env(safe-area-inset-top) - 2px);overflow:visible;background:transparent}
 body.search-open .global-search-inner{height:auto;min-height:inherit}
 body.search-open .global-search-results-area{overflow:visible;flex:none}
 /* The canvas remains a bounded work area, painted in document flow. Its
    zoom controls stay above the browser toolbar instead of below the canvas. */
 body.workspace-page .content-shell #content-scroll{height:calc(100vh - var(--header-height) - env(safe-area-inset-top) - 2px);height:calc(100lvh - var(--header-height) - env(safe-area-inset-top) - 2px);min-height:400px;padding-bottom:0;overflow:hidden}
 body.workspace-page .content-shell{overflow:hidden}
 body.workspace-page .ws-canvas-bottom{position:fixed;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
}

@media(min-width:1024px){:root[data-theme=dark] body::before{height:calc(var(--header-height) + env(safe-area-inset-top))}}

@media(prefers-reduced-motion:reduce){#nav-drawer::before,#nav-drawer.is-closing::before{animation:none}}