/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  html, body { overflow: auto; height: auto; }
  #app       { flex-direction: column; height: auto; overflow: visible; }
  .header-title { display: none; }
  .sort-toggle { margin-left: auto; margin-right: 8px; }

  #sidebar {
    width: 100%; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .nav-top-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
  .nav-top-list .nav-item a { padding: 6px 12px; border-radius: 20px; border-left: none; font-size: 13px; }
  .nav-top-list .nav-item.active a { border-left: none; }

  /* Compact pill list for stations on mobile */
  .nav-stations {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    overflow: visible;
    padding: 0 8px 8px;
  }
  .nav-stations .nav-item a { border-radius: 12px; border-left: none; padding: 3px 8px; }
  .nav-stations .nav-item.active a { border-left: none; }

  #valcontent { overflow: visible; padding: 10px; }
  .feed-grid  { grid-template-columns: 1fr; }
  .cand-grid  { grid-template-columns: 1fr 1fr; }
  .detail-bars { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .detail-bars-hdr, .detail-party-row { min-width: 600px; }
  .detail-party-name { flex: 0 0 120px; font-size: 13px; }
  .detail-title { font-size: 17px; }
}

@media (max-width: 400px) {
  .site-header { padding: 0 8px; gap: 8px; }
  .sort-opt span { font-size: 10px; padding: 3px 6px; }
  .header-progress { min-width: 0; }
  .recount-badge { font-size: 11px; padding: 3px 8px; }
}