/* ═══════════════════════════════════════════════════════════════
   PHONE TAP TARGETS (2026-09-30)
   Every tap target on a phone is at least 44x44 px, at least 8 px from
   its neighbour, and never hidden behind the bottom bar or off the edge.
   Measured by scripts/tap-audit.mjs (390x664, 360x640, 414x896 touch).
   Loaded LAST in index.html. `html body` prefixes beat the <style> blocks
   that scripts inject at runtime; !important only where a script writes
   an inline style.
   ═══════════════════════════════════════════════════════════════ */

/* ── Bottom bar: every tab on screen, in two rows of five ─────────
   The single row scrolled sideways and hid Israel, Escape, Ranks,
   Advisor and Profile past the right edge on every phone. */
@media (max-width: 620px) {
  :root {
    --jsu-nav-row: 52px;
    --jsu-nav-h: calc(var(--jsu-nav-row) * 2 + 24px + env(safe-area-inset-bottom, 0px));
  }
  html body #bottomNav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: var(--jsu-nav-row);
    gap: 8px;
    align-items: stretch;
    height: var(--jsu-nav-h);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
    box-sizing: border-box;
  }
  html body #bottomNav .nav-btn {
    min-width: 0;
    min-height: var(--jsu-nav-row);
    height: var(--jsu-nav-row);
    padding: 3px 2px 2px;
    gap: 2px;
    justify-content: center;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0;
    border-radius: 12px;
  }
  html body #bottomNav .nav-btn .nav-icon {
    width: 32px;
    height: 32px;
    font-size: 18px;
    flex: 0 0 auto;
  }
  html body #bottomNav .nav-btn.active .nav-icon { transform: scale(1.06); }
  html body #bottomNav .nav-btn.active::after { bottom: 0; }

  /* Everything that floats above the bar moves up with it. */
  html body #buildMenu { bottom: calc(var(--jsu-nav-h) + 8px); max-height: calc(100vh - var(--jsu-nav-h) - 150px); max-height: calc(100dvh - var(--jsu-nav-h) - 150px); }
  html body #tileInfo { bottom: calc(var(--jsu-nav-h) + 8px); max-height: calc(100dvh - var(--jsu-nav-h) - 120px); overflow-y: auto; }
  html body #placementHelper { bottom: calc(var(--jsu-nav-h) + 10px); }
  html body #advisorFab { bottom: calc(var(--jsu-nav-h) + 12px); }
  html body .pfx-badge-toast { bottom: calc(var(--jsu-nav-h) + 12px); }
  html body #advisorPracticeBadge { bottom: calc(var(--jsu-nav-h) + 8px); }
  html body .ldb-container, html body .adv-container { padding-bottom: calc(var(--jsu-nav-h) + 12px); }
}

/* ── Small buttons and links that were under 44 px ──────────────── */
@media (max-width: 620px), (pointer: coarse) {
  /* Learn: "Video not loading? Watch on YouTube" (an inline-styled link). */
  html body #learnContent .player-wrap a[target="_blank"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px !important;
  }

  /* Escape rooms: the close X was squeezed to 24 px; Play buttons 40 px tall. */
  html body .er-close { min-width: 44px; flex: 0 0 44px; }
  html body .er-play { min-height: 48px; font-size: 14px; }

  /* Leaderboard tabs: 8 px apart. */
  html body .ldb-tabs { gap: 8px; }

  /* Profile: event register button, RSVP checkbox row, picture captions, Level 2 link. */
  html body .profile-event-register,
  html body .profile-event-check { min-height: 48px; font-size: 13px; cursor: pointer; }
  html body .profile-event-check input { width: 22px; height: 22px; }
  html body .profile-event-flyer,
  html body .swag-image-link .swag-image-hint { font-size: 12px; }
  html body a[href="/level-2"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 4px !important;
    font-size: 13px !important;
  }
  html body #profRenameBtn { min-height: 44px; padding-left: 14px; padding-right: 14px; font-size: 13px; }

  /* Aleph Bais path: the lesson number under each letter stone was 10 px. */
  html body .acv-stone .acv-stone-num { font-size: 12px; bottom: -17px; }

  /* Shabbat location setup: one page that scrolls (the city list was a small scroll box inside a scrolling
     page, and the centred layout cut off the top on short phones). */
  html body #shabbatLocationSetup { justify-content: flex-start; }
  html body #shabbatLocationSetup .shabbat-setup-content { margin: auto 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  html body .shabbat-city-grid { max-height: none; overflow: visible; }
  html body .shabbat-city-btn { min-height: 48px; }

  /* Tip card buttons (Got it / Learn More). */
  html body .tip-dismiss, html body .tip-learn { min-height: 48px; font-size: 14px; }

  /* Sign-in page: staff links. */
  html body #authBackBtn { min-height: 48px; }
  html body .auth-staff-links a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── Learn: "Up next" shortcut (js/app-links.js) ───────────────── */
.learn-next-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 72px; margin: 0 0 16px; padding: 12px 16px;
  border: 2px solid rgba(255, 213, 79, 0.55); border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 213, 79, 0.22), rgba(255, 159, 67, 0.12));
  color: #fff; text-align: left; cursor: pointer; font-family: Nunito, sans-serif;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}
.learn-next-btn:active { transform: scale(0.98); }
.learn-next-play {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffd54f, #ff9f43); color: #1d1206; font-size: 20px;
}
.learn-next-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.learn-next-label { font-size: 13px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd54f; }
.learn-next-title { font-size: 17px; font-weight: 900; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.learn-next-meta { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.65); }