html { scroll-padding-top: calc(var(--header-h) + var(--space-2)); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-h);
    padding: 0 var(--space-5);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.bar-end { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

.theme-picker[hidden] { display: none; }
.theme-button { min-height: 2rem; width: 2rem; padding: 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-muted); anchor-name: --theme-button; }
.theme-button:hover { color: var(--text); background: var(--surface-2); }

.theme-menu, .user-menu, .admin-menu {
    position: fixed;
    inset: calc(var(--header-h) + var(--space-1)) var(--space-4) auto auto;
    margin: 0;
    max-width: calc(100vw - 2 * var(--space-4));
    padding: var(--space-1);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.admin-menu { inset: calc(var(--header-h) + var(--space-1)) auto auto var(--space-4); }
@supports (anchor-name: --a) {
    .theme-menu { position-anchor: --theme-button; inset: auto; top: calc(anchor(bottom) + var(--space-1)); right: anchor(right); }
    .admin-menu { position-anchor: --admin-button; inset: auto; top: calc(anchor(bottom) + var(--space-1)); left: anchor(left); }
}
.theme-menu button { display: flex; width: 100%; gap: var(--space-2); justify-content: flex-start; padding: var(--space-2) var(--space-3); border: 0; background: none; color: var(--text); }
.theme-menu button:hover { background: var(--surface-2); }
.theme-menu button[aria-checked="true"] { font-weight: 600; }
.theme-menu button::after { content: "\2713"; margin-left: auto; padding-left: var(--space-3); visibility: hidden; }
.theme-menu button[aria-checked="true"]::after { visibility: visible; }

.avatar-button { gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-1); border: 0; border-radius: var(--radius-full); background: none; }
.avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; background: var(--accent); color: var(--on-accent); }
.user-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-menu { width: max-content; padding: var(--space-4); }
.user-menu p { margin: 0; overflow-wrap: anywhere; }
.user-menu-name { font-weight: 600; }
.user-menu-email { color: var(--text-muted); font-size: var(--text-sm); }
.user-menu form { margin-top: var(--space-3); }

@media (width < 64rem) {
    .site-header { gap: var(--space-2); padding: 0 var(--space-4); }
    .user-name { display: none; }
}
@media (width < 30rem) {
    .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-height: 30rem) {
    html { scroll-padding-top: var(--space-2); }
    .site-header { position: static; }
}
@media print {
    .site-header { display: none; }
}