/* ═══════════════════════════════════════════════════════════════
   EP Classroom — Mobile / tablet layer
   Linked LAST in every page so it can refine the page's own CSS.
   Only applies on small screens or touch devices; desktop is untouched.
═══════════════════════════════════════════════════════════════ */

/* ── All touch devices ── */
@media (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  button, a, input, select, textarea, summary, [role="button"] { touch-action: manipulation; }
  button, select, input[type="button"], input[type="submit"] { min-height: 38px; }
  .toolbar button, .toolbar select, .icon-btn, .note-section-btn { min-height: 0; }
  * { -webkit-tap-highlight-color: rgba(125, 211, 252, .18); }
}

/* ── Tablets and phones ── */
@media (max-width: 820px) {
  html, body { max-width: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }
  /* 16px inputs stop iOS from zooming the page when a field gets focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* Tables inside activity / reference pages scroll sideways instead of overflowing */
  .container table, .wrap table, .content table, main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Generic modals / overlays ── */
  .modal-overlay, .gm-overlay, .ob-overlay { padding: 10px; align-items: flex-start; overflow-y: auto; }
  .modal, .gm-card, .settings-modal, .tm-modal, .ob-card { width: 100% !important; max-width: 100% !important; max-height: none; margin: 0 auto; }
  .modal { padding: 18px 14px; }
  .gm-card { padding: 22px 16px; }
  .gm-card-full { width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0; }

  /* ── Getting-started tour & Teachers panel ── */
  .ob-card { padding: 24px 18px 18px; }
  .ob-title { font-size: 18px; }
  .ob-body p { font-size: 14.5px; }
  .ob-nav { flex-wrap: wrap; }
  .ob-nav .ob-btn { flex: 1 1 100%; min-height: 44px; }
  .ob-nav #obBack { order: 3; }
  .tm-mini { flex: 1 1 auto; min-height: 38px; }
  /* Teachers table is wider than the screen on mobile — scroll it
     horizontally instead of squeezing columns (.tm-table-wrap already
     sets overflow-x:auto); just give it a sane minimum width. */
  .tm-table { min-width: 560px; }

  /* ── Games: waiting room, layout and leaderboard ── */
  .wr-overlay { padding: 12px; align-items: flex-start; }
  .wr-card { padding: 26px 18px; border-radius: 18px; }
  .wr-title { font-size: 24px; }
  .wr-icon { font-size: 48px; }
  .wr-start-btn { width: 100%; padding: 14px 20px; }
  .game-layout { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .game-layout .sidebar, .game-layout .leaderboard-panel,
  .sidebar, .leaderboard-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; max-height: 42vh; overflow-y: auto; border-left: 0 !important; border-right: 0 !important; }
  .board-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Activities: comfortable reading width ── */
  .container { padding-left: 14px !important; padding-right: 14px !important; max-width: 100% !important; }
  .teacher-bar { right: 8px; top: 8px; }
  .questions-list li, .reading p { font-size: 1rem; }

  /* ── Planner ── */
  .topbar { padding: 0 8px; }
  .topbar-brand { padding-right: 10px; margin-right: 4px; }
  .tab { padding: 0 12px; }
  .scroll-area { padding: 14px 12px; }
  .agenda-week { grid-template-columns: 1fr 1fr; }

  /* ── Reference indexes ── */
  .search-bar, .filters { flex-wrap: wrap; }
}

/* ── Small phones ── */
@media (max-width: 480px) {
  .gm-title { font-size: 20px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1 1 100%; min-height: 42px; }
  .agenda-week { grid-template-columns: 1fr; }
  .tab-icon { display: none; }
}

/* ── Landscape phones: keep the notes toolbar reachable ── */
@media (max-height: 480px) and (orientation: landscape) {
  .ob-card, .modal { max-height: 96vh; overflow-y: auto; }
  .wr-card { padding: 16px 20px; }
  .wr-icon { display: none; }
}