/*
 * sidebar.css — left navigation. Stripe / Vercel-style:
 *   - Tight, uppercase, tracked-out group titles (the "section header"
 *     reads as different from the items below it, not just a heavier
 *     link)
 *   - Items sit on a left rail with a 2px accent strip when active
 *   - Group descriptions live on landing cards, not the sidebar — the
 *     rail stays scannable
 *   - Modest indent ties items to their group visually
 */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-2) var(--space-6) 0;
  font-size: var(--text-sm);
}

/* Group header — small uppercase section label. Drop description from
   the sidebar entirely (template still renders the .sidebar-group-
   description span; this rule hides it). */
.sidebar-group-header {
  margin-bottom: var(--space-1_5);
  padding: 0 var(--space-2);
}
.sidebar-group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  line-height: var(--leading-tight);
}
.sidebar-group-description {
  display: none;
}

/* Items live on a 1px left rail; active items gain a 2px accent strip
   that visually replaces the rail in that slot. */
.sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid hsl(var(--border));
  margin-left: var(--space-2);
}

.sidebar-item {
  display: block;
  padding: var(--space-1_5) var(--space-3);
  margin-left: -1px;                /* sit on top of the group rail */
  border-left: 2px solid transparent;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
  transition: color 150ms ease, border-color 150ms ease;
  line-height: var(--leading-snug);
}
.sidebar-item:hover {
  color: hsl(var(--foreground));
}
.sidebar-item.is-active {
  color: hsl(var(--foreground));
  font-weight: 500;
  border-left-color: hsl(var(--foreground));
  background: transparent;
}