/* ── PHONES & NARROW WINDOWS ──
   The desktop layout assumes a wide screen; below 700px the top bar wraps
   (otherwise it makes every page wider than the phone, which pushes pop-ups
   off-screen), pop-ups take the full width, two-column lists stack, and long
   button rows scroll sideways instead of filling the screen. */
@media (max-width: 700px) {
  /* One row: logo, search, switch, you, sync. Words give way to icons. */
  #header { flex-wrap: nowrap; height: 52px; padding: 8px; gap: 8px; }
  #header-switch .ico + .hs-label, #header-switch .ico + .hs-label + .ico { display: none; }
  #header-switch .btn { padding-left: 8px; padding-right: 8px; }
  #header-user-pill { flex-shrink: 0; }
  .user-pill { padding-right: 4px; }
  #toast-container { top: 12px; }
  #header .breadcrumb { display: none; }
  #header-search-wrap { margin-left: 0 !important; flex: 1 1 60px; min-width: 0; }
  #global-search { width: 100% !important; }
  #header-switch .btn { max-width: 46vw !important; }
  .user-pill > span:not(.avatar):not(.role-badge) { display: none; }
  #main-content { padding: 10px; }
  .modal, .modal-lg, .modal-xl { width: 96vw !important; max-width: 96vw; }
  .modal-header, .modal-body, .modal-footer { padding-left: 14px; padding-right: 14px; }
  .grid-cols-2 { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; gap: 12px; }
  .att-item .badge { display: none; }
  .att-item .btn-xs { min-width: 48px; min-height: 48px; }
  #page-class-view header { padding: 10px; }
  #page-class-view .class-tools { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  #page-class-view .class-tools .btn { flex-shrink: 0; }
  .grades-table .name-cell { min-width: 110px; }
  .section-head { flex-wrap: wrap; }
  .ge-row { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 8px 12px; row-gap: 8px; }
  .ge-row .ge-n { display: none; }
  .ge-row .ge-status { grid-column: 2; justify-self: start; }
}
/* Tap-to-move (touch screens): the learner picked up, waiting for a seat or group. */
.student-box.picked, .group-student-card.picked { outline: 3px solid var(--accent); outline-offset: 2px; }