/* ========================================
   Responsive — tablet / narrow-desktop (<=1024px) scale-down.

   Full mobile (<=640px) lives in mobile.css (loaded last). This tier keeps the
   desktop faceplate + grid layouts, just trimmed so the wide nav fits narrower
   screens. (The old pre-redesign flexbox catalog/perf rules that used to live
   here were removed — they targeted markup the Tube Glow redesign replaced.)
   ======================================== */

@media (max-width: 1024px) {
  /* Faceplate: drop the decorative knobs and tighten the selector row so the
     full nav fits without wrapping. */
  .site-nav { gap: 12px; padding: 0 16px; }
  .site-nav__knobs { display: none; }
  .site-nav__links { gap: 5px; }
  .site-nav__link { min-width: 0; padding: 9px 8px; }
  .site-nav__label { font-size: 8px; }
}

@media (max-width: 768px) {
  /* Desktop player still shows at this tier; the whole volume group goes first
     (hiding the group, not just the input, avoids an orphaned "Vol" label). */
  .persistent-player__volume-group { display: none; }

  .listeners { padding: 1.5rem 1rem; }
  .listeners__row { flex-wrap: wrap; gap: 0.25rem; }
  .listeners__row-since { margin-left: 0; width: 100%; }

  .profile { padding: 1.5rem 1rem; }
  .profile__row { flex-wrap: wrap; gap: 0.25rem; }
  .profile__row-time { margin-left: 0; }
}