.sidebar li a{padding-block:7px;line-height:1.45}.sidebar li a .name{min-width:0}.sidebar li a .num{flex:none}.lesson-completion{margin-top:48px;display:flex;justify-content:flex-end}.lesson-completion button{font:500 14px var(--font);min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--surface);color:var(--gray-1200);box-shadow:var(--elevation-raised);cursor:pointer}.pager{margin-top:32px;padding-top:32px}.pager a{white-space:normal}.sidebar .completed .name::after{content:' ✓';font-size:12px;color:var(--gray-1000)}
.nav-lessons .group:first-of-type .section-label{margin-top:0}

/* wide screens: the "Snug" lesson list (Ben, 27 September 2026, picked from
   five versions): 22px rows 8px apart, 30px above a group, 8px from a group
   label to its first row. The list starts 44px down, below the lessons button
   (fixed top left), so the button doesn't sit over "Explore" once the page
   has scrolled. Each row's hit area reaches halfway into the gap either side,
   so rows are 30px to click and never overlap. The drawer below 1024px keeps
   its own sizes. */
@media (min-width: 1024px) {
  .sidebar { padding-top: 44px; }
  .sidebar ul { gap: 8px; }
  .sidebar li a { min-height: 22px; padding-block: 0; line-height: 20px; }
  .sidebar li a::before { inset: -4px 0; }
  .sidebar .section-label { margin: 30px 0 8px; }
  .nav-lessons .group:first-of-type .section-label { margin-top: 0; }
}