@import url("./portfolio-palette.css");
:root{--site-header-height:56px}
/* Deliberately scoped: older apps have global rules for header, label and select. */
html body .site-header{box-sizing:border-box;position:sticky;inset:auto;top:0;z-index:1200;display:flex;align-items:center;gap:20px;width:100%;height:var(--site-header-height);min-height:var(--site-header-height);padding:0 20px;margin:0;border:0;border-bottom:1px solid var(--portfolio-line);background:var(--portfolio-elevated);color:var(--portfolio-text);font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:auto}
.site-header *{box-sizing:border-box}
html body .site-header a{color:inherit;text-decoration:none;cursor:pointer}
html body .site-header .site-home{display:flex;align-items:center;gap:9px;flex:none;white-space:nowrap;font-weight:650}
.site-header .site-monogram{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--portfolio-accent-border);border-radius:6px;background:var(--portfolio-accent-soft);color:var(--portfolio-accent);font:600 11px/1 ui-monospace,monospace}
.site-header .site-page{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--portfolio-muted);font-size:12px}
.site-header .site-links{margin-left:auto;display:flex;align-items:center;gap:20px;flex:none}
html body .site-header .site-links>a,html body .site-header summary{font-size:12px;color:var(--portfolio-muted)}
html body .site-header a:hover,html body .site-header summary:hover{color:var(--portfolio-accent)}
.site-projects{position:relative}.site-projects summary{list-style:none;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px}.site-projects summary::-webkit-details-marker{display:none}.site-projects summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:transform .16s ease}.site-projects[open] summary::after{transform:translateY(2px) rotate(225deg)}
.site-project-menu{position:absolute;right:0;top:calc(100% + 18px);width:230px;padding:7px;border:1px solid var(--portfolio-line-strong);border-radius:8px;background:var(--portfolio-panel);box-shadow:0 12px 32px #0003}
html body .site-project-menu a{display:block;padding:10px 12px;border-radius:5px;font-size:13px}
html body .site-project-menu a:hover{background:var(--portfolio-accent-soft)}
html body .site-theme-control{display:flex;align-items:center;gap:8px;flex:none;margin:0;padding:0;color:var(--portfolio-muted);font:12px/1.4 system-ui,sans-serif;cursor:auto}
html body .site-theme-control select{display:block;width:112px;min-width:112px;max-width:112px;min-height:32px;height:32px;margin:0;padding:4px 6px;border:1px solid var(--portfolio-line-strong);border-radius:6px;background:var(--portfolio-input);color:var(--portfolio-text);font:12px/1.4 system-ui,sans-serif;appearance:auto;cursor:pointer;outline-offset:3px}
.site-header :focus-visible,.site-theme-control select:focus-visible{outline:2px solid var(--portfolio-accent);outline-offset:3px}
html{scroll-padding-top:calc(var(--site-header-height) + 16px)}
@media(max-width:720px){html body .site-header{gap:12px;padding:0 12px}.site-header .site-home-name{display:none}.site-header .site-links{gap:12px}.site-theme-control>span{display:none}}
@media(max-width:440px){.site-header .site-page{display:none}.site-header .site-links{gap:10px}.site-project-menu{right:-75px}}
/* Full-height tools reserve space for the shared header. */
html body.site-legacy .site-legacy-workspace{position:relative;height:calc(100dvh - var(--site-header-height));overflow:hidden}
html body.site-legacy .site-legacy-workspace .content{position:absolute}
html body.site-legacy #loading-canvas{position:absolute!important}
html body.site-viewer .appbar{height:44px;gap:16px;position:relative;z-index:30}
html body.site-viewer #workspace{height:calc(100dvh - var(--site-header-height) - 44px)}
html body.site-asami .navbar{top:var(--site-header-height)}
html body.site-asami .wiki-sidebar{top:var(--site-header-height);height:calc(100dvh - var(--site-header-height))}
html body.site-asami .wiki-toc{top:calc(var(--site-header-height) + 24px);max-height:calc(100dvh - var(--site-header-height) - 48px)}
html body.site-asami .wiki-layout{min-height:calc(100dvh - var(--site-header-height))}
@media(max-width:900px){html body.site-asami .wiki-sidebar{height:auto}}