.app-main { max-width: 72rem; margin: 0 auto; padding: 2rem; }

.bar-nav { display: flex; align-items: center; gap: var(--space-1); }
.bar-nav a, .admin-button, .admin-menu a, .nav-sheet a, .menu-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    font: 600 var(--text-sm)/1.2 var(--body);
    text-decoration: none;
    white-space: nowrap;
}
:is(.bar-nav a, .admin-button, .admin-menu a, .nav-sheet a, .menu-button):hover { background: var(--surface-2); color: var(--text); }
:is(.bar-nav, .admin-menu, .nav-sheet) a.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); }
:is(.bar-nav, .admin-menu, .nav-sheet) a svg { width: 1.125rem; height: 1.125rem; flex: none; }
.admin-button { anchor-name: --admin-button; }

.menu-button { display: none; color: var(--text); min-width: 0; overflow: hidden; justify-content: flex-start; white-space: normal; text-align: start; }
.nav-sheet {
    position: fixed;
    inset: var(--header-h) 0 auto;
    width: auto;
    max-height: calc(100dvh - var(--header-h));
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    overflow-y: auto;
    background: var(--surface);
    color: var(--text);
    border: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.nav-sheet nav, .nav-sheet [role="group"] { display: grid; gap: var(--space-1); }
.nav-sheet [role="group"] { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.nav-sheet a { min-height: 2.75rem; }

@media (width < 64rem) {
    .bar-nav { display: none; }
    .menu-button { display: flex; }
    .app-main { padding: var(--space-4); }
}
@media (width >= 64rem) {
    .nav-sheet { display: none; }
}