/* ── SIDEBAR FIXES ──
   The nav is a fixed-height flex column. Its children could shrink (flex-shrink:1 and overflow:hidden
   make their min-height 0), so on shorter screens the section headings were clipped to a few pixels and
   the 60px rows were squashed, putting the hover/active highlight off the row. Children now keep their
   size; the rows get a bit shorter on short screens, and the nav scrolls if it still doesn't fit. */
.nav > .nav-section,
.nav > .nav-btn {
  flex-shrink: 0;
}

.nav-section {
  line-height: 16px;
  min-height: 16px;
}

/* Hover is a lighter tint than the active item, so only the current page reads as selected. */
.nav-btn:not(.active):hover {
  background: rgba(37, 99, 235, 0.10);
}

@media (min-width: 761px) and (max-height: 960px) {
  .nav-btn { height: 48px; }
}

@media (min-width: 761px) and (max-height: 800px) {
  .nav { gap: 6px; }
  .nav-btn { height: 40px; }
}