/* Shared site header. Loaded after each page's own CSS so every page gets the same bar. */
.top{display:block;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px)}
.top-in{max-width:none;margin-inline:auto;display:flex;align-items:center;gap:1rem;padding-block:0.6rem;min-height:3.4rem}
.top .brand{display:flex;align-items:center;gap:0.7rem;text-decoration:none;flex:none;color:inherit}
.top .brand-logo{width:40px;height:auto;display:block;flex:none}
.top .brand-name{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap}
.top .brand-name b{color:var(--accent);font-weight:800}
.top nav{margin-left:auto;display:flex;gap:0.25rem;overflow-x:auto;min-width:0;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{font-family:var(--font-mono);font-size:0.8rem;text-decoration:none;padding:0.45rem 0.5rem;border-radius:4px;color:var(--muted);white-space:nowrap}
.top nav a:hover{color:var(--fg);background:var(--surface)}
.top nav a[aria-current="page"]{color:var(--fg)}
.top-r{display:flex;align-items:center;gap:0.6rem;min-width:0;justify-content:flex-end}
.top .who{display:flex;align-items:center;gap:0.5rem;flex:none;min-width:0;font-size:0.85rem}
.top .who img{width:28px;height:28px;border-radius:50%;display:block;background:var(--surface-2)}
.top .who .nm{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .who .nm a{color:inherit;text-decoration:none}
.top .who .nm a:hover{color:var(--accent);text-decoration:underline}
.top .linkbtn{background:none;border:0;padding:0;font:500 0.8rem var(--font-mono);color:var(--muted);text-decoration:underline;cursor:pointer}
.top .linkbtn:hover{color:var(--red)}
.top .who a.linkbtn{display:inline}
.top .tag{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.08em;text-transform:uppercase;padding:0.15rem 0.4rem;border:1px solid var(--line);border-radius:3px;color:var(--muted);white-space:nowrap}
.top .tag.staff{color:var(--accent);border-color:var(--accent)}
.top .tag.role{color:var(--fg);border-color:var(--rc,var(--steel));display:inline-flex;align-items:center;gap:0.3rem;max-width:9rem}
.top .tag.role::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rc,var(--steel));flex:none}
.top .tag.role span{overflow:hidden;text-overflow:ellipsis}
.top .admin-cp{position:static;transform:none;margin:0;flex:none;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;text-decoration:none;padding:0.4rem 0.7rem;border:1px solid var(--accent);color:var(--accent);border-radius:4px;white-space:nowrap}
.top .admin-cp:hover{background:var(--accent);color:var(--bg)}
.top .admin-cp[hidden]{display:none}
.top .menu-btn{display:none;font:500 0.8rem var(--font-mono);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0.4rem 0.7rem;cursor:pointer;flex:none}
@media (min-width:1400px){.top-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.top-in nav{margin:0}}
@media (max-width:1399px){
.top .menu-btn{display:inline-block}
.top-r{margin-left:auto}
.top .who .tag{display:none}
.top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:0.4rem clamp(16px,4vw,32px) 0.7rem;background:var(--bg);border-bottom:1px solid var(--line);overflow:visible}
.top.open nav{display:flex}
.top nav a{padding:0.7rem 0.5rem;font-size:0.9rem}
}
@media (max-width:560px){
.top .who .nm{display:none}
.top-in{gap:0.6rem;padding-inline:0}
.top .brand-name{display:none}
.top .admin-cp{padding:0.35rem 0.5rem}
.top .admin-cp .l{display:none}
}