/* ══════════════════════════════════════════════════════════════
   Mobile polish — loaded LAST so it wins. Fixes found by rendering
   the app at 390px: hero overflow, stray reticle, bottom-tab labels
   cut off, CourseSniper grids/touch-targets, ScheduleSniper buttons.
   ══════════════════════════════════════════════════════════════ */

/* stray sniper reticle must never show in the app */
.reticle, #reticle { display: none !important; }

/* The subscribe ("Lock onto") modal must be a TRUE full-screen overlay above
   everything — the bottom tab bar is z-1000. app-skin pins .modal to z-2, which
   left it below the tab bar (sheet clipped, footer bleeding through, and tabs
   still tappable). Make it a fixed overlay so the backdrop dims + blocks every
   tap (incl. tab switching) until the user submits or closes it. */
.modal { position: fixed !important; inset: 0 !important; z-index: 5000 !important; }
/* Anchor the dimming backdrop to the viewport (not the modal box) so it always
   covers the full screen — including the strip under the sheet that iOS reveals
   when the keyboard pushes a fixed bottom-sheet up. */
.modal-backdrop { position: fixed !important; inset: 0 !important; background: rgba(4,3,4,0.82) !important; }

@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  /* ── Hero: keep the brand + tagline inside the viewport ── */
  .hero .container, .hero-content { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .brand { font-size: clamp(26px, 7.5vw, 36px) !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; }
  .tagline { white-space: normal !important; max-width: 92vw; font-size: 13px !important; line-height: 1.4; }
  .search-bar, .cs-search-wrap, .hero-search { max-width: 100% !important; }

  /* ── CourseSniper: collapse grids + readable padding ── */
  #page-coursesniper .container { max-width: 100% !important; padding: 0 14px; }
  .cs-stats { grid-template-columns: 1fr 1fr !important; }
  .cs-card { padding: 16px !important; }
  .cs-code { font-size: 1.5rem !important; }
  .cs-prof-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .cs-reviews-head { flex-wrap: wrap; }
  .cs-browse-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)) !important; }

  /* ── Touch targets ≥44px (CourseSniper) ── */
  .cs-like-btn, .cs-report-btn, .cs-btn, .cs-review-sort, .cs-review-filter,
  .cs-browse-filters select, .cs-back { min-height: 44px; }
  .cs-instr-link { width: 32px !important; height: 32px !important; }

  /* ── Touch targets ≥44px (ScheduleSniper) ── */
  .ss-day-btn, .ss-rmp-btn, .ss-clear-all-btn { min-height: 44px; }
  .ss-section-card-prof { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* ── Schedule result card header: stack it. In the 3-column desktop
     layout the rating label squeezes the middle column to ~96px, so the
     title wraps to 3 lines and the meta wraps word-by-word. Stacking gives
     the title a full line and lays the rating out as one tidy inline row. ── */
  .ss-card-head { flex-direction: column; align-items: flex-start !important; gap: 8px !important; padding: 16px !important; }
  .ss-card-headinfo { width: 100%; }
  .ss-card-title { font-size: 17px !important; }
  .ss-card-meta { font-size: 12px !important; }
  .ss-score { flex-direction: row !important; align-items: center !important; align-self: stretch; gap: 8px !important; }
  .ss-score-val b { font-size: 20px !important; }

  /* Pin toasts to the TOP on mobile so they never collide with the bottom tab
     bar or an open subscribe/paywall bottom-sheet (they were stacking unreadably
     over the sheet at the bottom). */
  .toast-container {
    top: calc(env(safe-area-inset-top) + 10px) !important;
    bottom: auto !important; left: 10px !important; right: 10px !important;
    z-index: 6000 !important;   /* above the subscribe modal (5000) */
  }
}

/* ── Bottom tab bar: make all three tabs fit (CourseSniper was clipped) ── */
@media (max-width: 700px) {
  /* The bottom bar only switches in-app tabs, so mobile needs a way back to the
     marketing landing page. The top-left brand links to "/" (the landing page).
     2026 mobile nav = minimal / "invisible": a low-frequency action like this
     belongs at the top as a quiet, borderless, *labeled* control (a lone icon
     reads as ambiguous), so: small logo + "Home", no box, low contrast. */
  .navbar-inner { justify-content: flex-start !important; padding: 6px 14px !important; }
  .navbar-brand {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 8px 6px 8px 2px; min-height: 44px;            /* tap target, no box */
    background: none !important; border: none !important;
    color: var(--ember) !important; opacity: 0.85;
  }
  .navbar-brand:active { opacity: 1; }
  .navbar-brand .navbar-logo { width: 17px !important; height: 17px !important; }
  .navbar-brand::after {
    content: "Home"; font-family: var(--app-display, 'General Sans', sans-serif);
    font-weight: 600; font-size: 13px; color: var(--text-muted); letter-spacing: -0.01em;
  }
  .navbar-links { padding-left: 4px !important; padding-right: 4px !important; }
  .navbar-link {
    flex: 1 1 0 !important; min-width: 0 !important;
    font-size: 10px !important; padding: 6px 2px !important; gap: 3px !important;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .navbar-link svg { width: 20px !important; height: 20px !important; }
  /* active tab: subtle highlight, not a wide pill that steals space */
  .navbar-link.active { background: rgba(224,86,79,0.16) !important; }
}