/* The navigation panel on the left, in full and in its short form (icons only). */
.nav { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); height: calc(100vh - 2 * var(--grid-gap)); position: sticky; top: var(--grid-gap); }
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-4); font-weight: 600; font-size: var(--fs-lg); }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 600; }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); height: var(--row-h); padding: 0 var(--sp-3); border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--muted); text-align: left; text-decoration: none; transition: background var(--motion), color var(--motion); }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item[aria-current="page"] { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.nav-spacer { flex: 1; }
.nav-toggle { margin-left: auto; }
.nav.compact { width: 64px; padding: var(--sp-2); }
.nav.compact .label { display: none; }
.nav.compact .brand { padding: var(--sp-2) 0 var(--sp-3); flex-direction: column; gap: var(--sp-2); justify-content: center; }
.nav.compact .nav-toggle { margin: 0; }
.nav.compact .nav-item { justify-content: center; padding: 0; }
.shell:has(.nav.compact) { grid-template-columns: 64px minmax(0, 1fr); }