/* Left menu: 56px dark violet rail, 44x44 items, count badges, More flyout. */
.nav {
  grid-row: 1 / 4; background: var(--nav-bg);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: 0 0 var(--sp-4); z-index: 3;
}
.nav-logo {
  width: var(--nav-w); height: var(--nav-w); display: grid; place-items: center; flex: none;
  color: var(--gold); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.5px;
}
.nav-item {
  position: relative; flex: none;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-md); padding: 0;
  display: grid; place-items: center; background: none; cursor: pointer;
  color: var(--nav-icon); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover { background: var(--nav-hover); color: var(--text-inverse); text-decoration: none; }
.nav-item:focus-visible { outline: 2px solid var(--text-inverse); outline-offset: -2px; }
.nav-item.active, .nav-item.is-open { background: var(--nav-active); color: var(--text-inverse); }
.nav-item svg { width: 24px; height: 24px; }
.nav-spacer { flex: 1; }

/* Count badge, top-right of the icon. Blue = plain count, red = needs action. */
.nav-badge {
  position: absolute; top: 2px; right: 0; transform: translateX(25%);
  min-width: 16px; height: 16px; padding: 0 var(--sp-2); border-radius: var(--r-pill);
  background: var(--badge-blue); color: var(--text-inverse); box-shadow: 0 0 0 2px var(--nav-bg);
  font-size: 10px; line-height: 16px; font-weight: var(--fw-semibold); text-align: center;
  pointer-events: none;
}
.nav-badge.is-red { background: var(--badge-red); }