.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  background: var(--accent);
  color: var(--accent-text);
}
.app-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

/* The full lockup is a wide 3:1 image whose tagline renders about 5px tall in a
   header - illegible noise. The header gets the roundel alone, and the name is
   set as text rather than baked-in white pixels. Text inherits --accent-text,
   so it stays legible on every theme; the white wordmark in the image is
   invisible against Graphite's mid-grey header. */
.app-header .brand-mark {
  height: calc(var(--header-height) - var(--space-4));
  width: auto;
  display: block;
}

.app-header .brand-word {
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: 0.16em;
}
.app-header .brand-group { display: flex; align-items: center; }
.app-header .who { font-size: var(--text-sm); display: flex; gap: var(--space-4); align-items: center; }

.app-sidebar {
  background: var(--surface-alt);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.app-sidebar nav { flex: 1 1 auto; overflow-y: auto; }
.nav-list { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
}
.nav-list a:hover { background: var(--surface); color: var(--text); }
.nav-list a[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.nav-empty { padding: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }

.nav-list-top { margin-bottom: var(--space-4); }

.nav-group + .nav-group { margin-top: var(--space-4); }

/* The group itself is a <details> so it collapses - see nav.js for the
   localStorage persistence, needed because each nav click is a full page
   load, not an SPA route change, and a <details> forgets its state on
   reload otherwise. */
.nav-group summary.nav-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}
.nav-group summary.nav-group-label:hover { background: var(--surface); color: var(--text); }
.nav-group summary.nav-group-label::-webkit-details-marker { display: none; }
.nav-group summary.nav-group-label::before {
  content: "\25B8";
  display: inline-block;
  width: 0.7em;
  transition: transform 120ms ease-out;
}
.nav-group[open] summary.nav-group-label::before { transform: rotate(90deg); }

/* Indented further than the group label, so a module clearly reads as
   belonging to the group above it rather than sitting alongside it. */
.nav-group .nav-list { padding-left: var(--space-4); }

/* A submenu is a <details> nested one level inside a top-level group (e.g.
   "Data Tables" inside "Admin") - same collapse mechanism, styled one size
   down so it doesn't compete with the group header above it. Its <details>
   also carries the .nav-group class so nav.js's single selector persists
   both levels without needing to know about submenus specifically. */
.nav-subgroup-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 600;
}
.nav-subgroup-label:hover { background: var(--surface); color: var(--text); }
.nav-subgroup-label::-webkit-details-marker { display: none; }
.nav-subgroup-label::before {
  content: "\25B8";
  display: inline-block;
  width: 0.7em;
  transition: transform 120ms ease-out;
}
.nav-subgroup[open] .nav-subgroup-label::before { transform: rotate(90deg); }
.nav-sublist { margin-top: var(--space-1); }

.nav-separator {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--border);
  list-style: none;
}

/* Pinned to the bottom of the sidebar via the flex column above, not via
   position:fixed - so it scrolls off with the rest of the sidebar on short
   viewports instead of ever overlapping nav items. */
.sidebar-footer {
  flex: 0 0 auto;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.sidebar-footer-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.sidebar-footer-link:hover { background: var(--surface); color: var(--text); }
.sidebar-footer-link[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.sidebar-version {
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}