/* ═══════════════════════════════════════════════════════════════════
   ATLAS ACADEMY — mobile.css
   Comprehensive mobile / phone responsive overrides.
   Loaded LAST so these win over earlier stylesheets.
   Touch nothing that already works — only patch gaps.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   0. GLOBAL SAFE DEFAULTS
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent horizontal overflow everywhere */
  html, body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
  }

  /* All inputs / textareas get 16px minimum to stop iOS zoom */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Allow text to break inside small containers */
  .modal,
  .group-modal-content,
  .report-modal {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ─────────────────────────────────────────────────────────────────
   1. TOAST — float above mobile bottom nav
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .toast {
    right: 10px !important;
    left: 10px !important;
    bottom: 72px !important; /* sits above 60px mobile nav */
    font-size: 10px;
  }
}

/* ─────────────────────────────────────────────────────────────────
   2. NAV — app top-bar fixes
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Show hamburger on all views */
  #hamburger-btn { display: block !important; }

  /* Clamp community/groups/challenges buttons */
  #nav-community-btn,
  #nav-groups-btn,
  #nav-challenges-btn {
    display: none !important;
  }

  /* Notification + search button — keep visible but reduce padding */
  #nav-notif-btn,
  #nav-search-btn {
    padding: 6px 8px !important;
    font-size: 13px !important;
  }

  /* Sign in button — compact */
  #nav-signin-btn {
    padding: 7px 12px !important;
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   3. AUTH MODAL — sign in / sign up / forgot password
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  /* Slide up from bottom on small phones */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Full-width sheet with rounded top corners */
  .modal-overlay .modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 24px 16px 32px !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateY(0) !important;
  }

  /* Keep title readable */
  .modal-title { font-size: 22px !important; }
  .modal-sub   { font-size: 12px !important; }

  /* Tab text */
  .modal-tab { font-size: 9px !important; letter-spacing: 1px !important; padding: 8px 10px !important; }
}

/* Wide enough for centred modal again above 540 */
@media (min-width: 541px) and (max-width: 768px) {
  .modal-overlay { padding: 12px !important; align-items: flex-start !important; padding-top: 24px !important; }
  .modal-overlay .modal { max-width: calc(100vw - 24px) !important; }
}

/* ─────────────────────────────────────────────────────────────────
   4. NOTIFICATION MODAL — header action buttons
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  /* The header row inside notification modal */
  #notif-modal .modal > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  /* Button cluster — let it wrap to second row */
  #notif-modal .modal > div:first-child > div:last-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Shrink button text */
  #notif-modal .modal > div:first-child button {
    font-size: 8px !important;
    padding: 5px 8px !important;
    letter-spacing: 0.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   5. SETTINGS MODAL — tab bar
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Settings tabs: squish letter-spacing to fit */
  #settings-modal [id^="stab-"] {
    font-size: 8px !important;
    letter-spacing: 0.5px !important;
    padding: 10px 4px !important;
  }

  /* Reduce inner content padding */
  #stab-content-invite,
  #stab-content-help,
  #stab-content-feedback,
  #stab-content-account {
    padding: 16px !important;
  }

  /* Invite share buttons 2-col */
  #stab-content-invite .grid,
  #stab-content-invite [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   6. PLANS MODAL
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #plans-modal .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 0 !important;
  }

  #plans-modal .modal > div:last-child {
    padding: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   7. SCHEDULE MODAL — streak / day grids
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 4-col streak target → 2-col */
  #streak-target-btns {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 4-col daily goal → 2-col */
  #daily-goal-btns {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Reminder time + button → stack */
  #schedule-modal [style*="display:flex;gap:10px;align-items:center"] {
    flex-direction: column !important;
  }
  #schedule-modal [style*="display:flex;gap:10px;align-items:center"] input,
  #schedule-modal [style*="display:flex;gap:10px;align-items:center"] button {
    width: 100% !important;
  }

  /* Schedule progress grid → stack */
  #schedule-modal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   8. JOURNAL MODAL — comfortable on phone
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #journal-modal .modal {
    max-height: 94dvh !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }

  /* Modal overlay — bottom sheet */
  #journal-modal.modal-overlay {
    align-items: flex-end !important;
  }

  /* Header + form padding */
  #journal-modal .modal > div:first-child {
    padding: 14px 16px !important;
  }

  #journal-form {
    padding: 14px 16px !important;
  }

  #journal-entries {
    padding: 12px 16px !important;
  }

  /* Buttons in header — keep NEW ENTRY + close on same row */
  #journal-modal [style*="display:flex;gap:8px;align-items:center"] {
    gap: 6px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   9. PROFILE MODAL — fix stats grid overflow
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #profile-modal .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 0 !important;
  }

  #profile-modal.modal-overlay {
    align-items: flex-end !important;
  }

  #profile-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Avatar + info row */
  #profile-modal [style*="display:flex;align-items:center;gap:16px"] {
    flex-wrap: wrap !important;
  }

  /* Account action buttons */
  #profile-modal [style*="display:flex;gap:10px;flex-wrap:wrap"] {
    flex-direction: column !important;
  }

  #profile-modal [style*="display:flex;gap:10px;flex-wrap:wrap"] button {
    width: 100% !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   10. USER DETAIL MODAL — full height sheet
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #user-detail-modal .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }

  #user-detail-modal.modal-overlay {
    align-items: flex-end !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   11. SEARCH MODAL — starts near top, full width on phones
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #search-modal {
    padding-top: 8px !important;
    align-items: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #search-modal .modal {
    max-width: 100% !important;
    border-radius: 0 0 16px 16px !important;
  }

  #search-input { font-size: 15px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   12. CROP MODAL — logo upload
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #crop-modal .modal {
    padding: 16px !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
  }

  #crop-modal.modal-overlay {
    align-items: flex-end !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   13. HOME VIEW — strategy cards section padding
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* The strat-cards container has hard-coded padding in HTML inline style */
  #strat-cards {
    padding: 32px 14px 0 !important;
  }

  /* Section labels */
  #strat-cards .section-label {
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }

  /* Strategy grid — single column */
  #strat-cards .strat-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Home footer grid → single col */
  #home-view footer > div > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Hero live ticker — horizontal scroll */
  .hero-live-ticker {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
    gap: 8px !important;
  }

  .hero-ticker-item {
    font-size: 9px !important;
    padding: 5px 10px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   14. STRATEGY DETAIL — hero + nav
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .detail-view { padding-top: 56px !important; }

  .sp-hero { padding: 72px 14px 24px !important; }

  .sp-hero-title { font-size: clamp(36px, 10vw, 56px) !important; }

  /* Stats bar — smaller gap */
  .sp-hero-stats { gap: 16px !important; flex-wrap: wrap !important; }

  .sp-stat-num { font-size: 28px !important; }

  /* Hero buttons — stack on small screens */
  .sp-hero-btns { flex-direction: column !important; gap: 8px !important; }
  .sp-btn-primary, .sp-btn-secondary {
    text-align: center !important;
    padding: 11px 16px !important;
    width: 100%;
    display: block;
  }

  /* Strategy content padding */
  .sp-content { padding: 0 14px 100px !important; }

  /* Lesson cards — single col */
  .sp-curriculum-grid { grid-template-columns: 1fr !important; }

  /* Concepts grid — single col */
  .sp-concepts-grid  { grid-template-columns: 1fr !important; }
  .concepts-grid     { grid-template-columns: 1fr !important; }
  .tools-grid        { grid-template-columns: 1fr !important; }
  .diagrams-grid     { grid-template-columns: 1fr !important; }

  /* Sticky nav — ensure it's below fixed app nav */
  .sp-nav { top: 56px !important; }

  /* Lesson item body — full padding reset */
  
}

/* ─────────────────────────────────────────────────────────────────
   15. ROADMAP VIEW — padding fix
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #roadmap-view { padding-top: 56px !important; padding-bottom: 100px !important; }

  .rm-header { padding-top: 16px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   16. COMMUNITY PAGE — search input, layout
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Community view top padding */
  #community-view { padding-top: 56px !important; }

  /* Header — user search full width below title */
  .community-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px 14px !important;
  }

  /* Make search input full width */
  #community-user-search {
    width: 100% !important;
  }

  /* Search results dropdown — full width */
  #user-search-results {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
  }

  /* Community layout — single col, bottom padding for nav */
  .community-layout {
    padding: 16px 14px 100px !important;
    grid-template-columns: 1fr !important;
  }

  /* Feed tabs — smaller text */
  .feed-tab { font-size: 9px !important; letter-spacing: 1px !important; padding: 10px 12px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   17. POST COMPOSER — show tags as horizontal scroll
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Override the `display:none` from social.css — show them scrollable */
  .post-composer-tags {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    gap: 6px !important;
    scrollbar-width: none;
  }

  .post-composer-tags::-webkit-scrollbar { display: none; }

  .post-tag-btn {
    flex-shrink: 0;
    font-size: 8px !important;
    padding: 4px 8px !important;
  }

  /* Composer bottom — stack on small screens */
  .post-composer-bottom {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .post-composer-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .post-char-count { font-size: 9px !important; }

  .post-submit-btn { font-size: 9px !important; padding: 7px 14px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   18. GROUPS PAGE — layout + chat panel
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #groups-view { padding-top: 56px !important; }

  .groups-layout {
    grid-template-columns: 1fr !important;
    padding: 14px 14px 100px !important;
  }

  /* Group chat panel — full width slide-up from right */
  .group-chat-panel {
    width: 100% !important;
    max-width: 100vw !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }

  /* Discover groups grid → single col */
  .discover-groups-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Group search input */
  #groups-search { font-size: 14px !important; }

  /* Group modal */
  .group-modal-content {
    width: calc(100vw - 20px) !important;
    max-width: 100% !important;
    max-height: 90dvh !important;
    padding: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   19. CHALLENGES PAGE — panel full width
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #challenges-view { padding-top: 56px !important; }

  .challenges-layout {
    padding: 14px 14px 100px !important;
  }

  /* Challenge panel overrides inline width:520px */
  #challenge-panel {
    width: 100% !important;
    max-width: 100vw !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }

  /* Challenge card */
  .ch-card { padding: 14px !important; }
  .ch-card-title { font-size: 18px !important; }
  .ch-card-meta { flex-wrap: wrap !important; gap: 6px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   20. LEADERBOARD PAGE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #leaderboard-view { padding-top: 56px !important; }

  .lb-layout { padding: 14px 14px 100px !important; }

  /* Category tabs — wrap nicely */
  .lb-cat-tabs { gap: 6px !important; }
  .lb-cat-btn  { font-size: 9px !important; padding: 7px 10px !important; letter-spacing: 0.5px !important; }

  /* Period tabs — smaller */
  .lb-period-btn { font-size: 9px !important; padding: 9px 10px !important; letter-spacing: 1px !important; }

  /* Rank row */
  .lb-row { padding: 10px 12px !important; gap: 10px !important; }
  .lb-rank { font-size: 18px !important; width: 28px !important; }
  .lb-name { font-size: 11px !important; }
  .lb-score { font-size: 9px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   21. PROFILE PANEL (social) — full width on mobile
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-panel {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .profile-panel-body { padding: 40px 16px 100px !important; }

  .profile-banner { height: 100px !important; }

  .profile-panel-stats { gap: 16px !important; flex-wrap: wrap !important; }

  .profile-panel-tags { gap: 5px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   22. ADMIN PANEL — responsive
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .admin-panel { padding-top: 56px !important; }

  .admin-header { padding: 20px 14px !important; }

  .admin-content { padding: 20px 14px 100px !important; }

  /* Stats grid → 2 col */
  .admin-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  .admin-stat { padding: 14px !important; }
  .admin-stat-num { font-size: 28px !important; }

  /* Video rows → single col */
  .admin-video-row { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Analytics bar label */
  .analytics-bar-label { width: 80px !important; font-size: 9px !important; }

  /* Tab buttons */
  .admin-tab-btn { font-size: 9px !important; padding: 6px 10px !important; }

  /* Strategy select buttons */
  .admin-strat-btn { font-size: 9px !important; padding: 6px 10px !important; }

  /* User cards */
  .admin-user-card { flex-wrap: wrap !important; }
  .admin-user-info { min-width: 0 !important; flex: 1 1 0 !important; }
}

@media (max-width: 480px) {
  /* 4-col stats → 1 col on tiny phones */
  .admin-stats-grid { grid-template-columns: 1fr !important; }
  .admin-title { font-size: 28px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   23. SIDEBAR — adjust for mobile
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  #sidebar { width: 280px !important; }

  .sb-item { padding: 11px 14px !important; }
  .sb-item-label { font-size: 13px !important; }
  .sb-item-sub { font-size: 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   24. MOBILE BOTTOM NAV — safe area + font
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #mobile-bottom-nav {
    /* padding-bottom fills the home-indicator dead zone.
       The nav sits flush at bottom:0 so there is no gap below it.
       Height auto-expands to 56px of button area + safe inset. */
    height: auto !important;
    min-height: 56px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    margin-bottom: 0 !important;
    align-items: flex-start !important;
  }

  .mob-nav-btn {
    flex: 1 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: none !important;
    background: none !important;
    cursor: pointer !important;
  }

  /* Children must not intercept the tap — let it reach the button */
  .mob-nav-icon,
  .mob-nav-label {
    pointer-events: none !important;
    display: block !important;
  }

  .mob-nav-icon  { font-size: 20px !important; line-height: 1 !important; }
  .mob-nav-label { font-size: 8px  !important; line-height: 1 !important; }
}

/* ─────────────────────────────────────────────────────────────────
   25. LANDING PAGE — terminal card + miscellaneous fixes
   ───────────────────────────────────────────────────────────────── */

/* On very small phones the landing page proof countries overflow */
@media (max-width: 480px) {
  .proof-countries {
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    justify-content: center !important;
  }

  /* FAQ question text */
  .faq-q {
    font-size: 13px !important;
    padding: 14px 0 !important;
  }

  /* Section h2 heading clamp */
  .section-h2 {
    font-size: clamp(26px, 8vw, 40px) !important;
  }

  /* CTA heading */
  .cta-h2 {
    font-size: clamp(28px, 9vw, 44px) !important;
  }

  /* Strat header */
  .strat-header {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* Landing-page hero stats row — no overflow on tiny phones */
@media (max-width: 380px) {
  #landing-view .hero-stats {
    gap: 0 !important;
  }

  #landing-view .hstat-num  { font-size: 22px !important; }
  #landing-view .hstat-label { font-size: 7px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   26. STRATEGY DETAIL — lesson body overflow
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Written content doesn't overflow */
  .lesson-written,
  .sp-concept-desc,
  .hiw-desc {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Quiz options — wrap text properly */
  .quiz-opt { flex-wrap: wrap !important; align-items: flex-start !important; }

  /* SP hero title even smaller on tiny phones */
  .sp-hero-title { font-size: clamp(28px, 11vw, 48px) !important; }
}

/* ─────────────────────────────────────────────────────────────────
   27. HOME-VIEW — How It Works section
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hiw-section { padding: 40px 14px !important; }

  .hiw-inner { max-width: 100% !important; }

  /* Steps — grid 2×2 on portrait phone */
  .hiw-steps { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  .hiw-step { padding: 0 8px !important; }

  .hiw-num {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
  }

  .hiw-title { font-size: 15px !important; }
  .hiw-desc  { font-size: 11px !important; }
}

/* Single column on very small phones */
@media (max-width: 380px) {
  .hiw-steps { grid-template-columns: 1fr !important; }
}

/* ─────────────────────────────────────────────────────────────────
   28. HOME-VIEW — Path / Learning roadmap grid
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .path-section { padding: 40px 14px !important; }

  /* Show as horizontal scroll on mobile */
  .path-grid {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-bottom: 12px;
    /* remove the ::before connector line on mobile via opacity */
  }

  .path-grid::before { display: none !important; }

  .path-col { flex: 0 0 150px !important; min-width: 150px !important; padding: 0 !important; }

  .path-level-badge { font-size: 8px !important; padding: 5px 8px !important; white-space: nowrap !important; }

  .path-strat-name { font-size: 13px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   29. LEADERBOARD SECTION (on home page, inside #home-view)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lb-section { padding: 40px 14px !important; }

  .lb-row { grid-template-columns: 36px 1fr auto !important; gap: 10px !important; padding: 10px 14px !important; }

  .lb-rank { font-size: 18px !important; }

  .lb-pct  { font-size: 18px !important; }

  .lb-badge { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   30. TESTIMONIALS — home page
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .testimonials-section { padding: 40px 14px !important; }

  .testi-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

  .testi-card { padding: 20px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   31. FAQ SECTION — home page
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-section { padding: 40px 14px !important; max-width: 100% !important; }

  .faq-question { font-size: 14px !important; padding: 16px 0 !important; gap: 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   32. REPORT MODAL — full width on phone
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .report-modal { width: calc(100vw - 24px) !important; padding: 18px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   33. IMAGE LIGHTBOX — touch-friendly
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .image-lightbox img {
    max-width: 96vw !important;
    max-height: 86dvh !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   34. EREBUS — keep on screen and above bottom nav
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #erebus-wrap {
    bottom: 72px !important; /* above mobile nav */
    left: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   35. MISC INLINE-STYLE OVERRIDES — things hardcoded in HTML
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Community view: the padding on #community-view inline */
  #community-view {
    padding-bottom: 80px;
  }

  /* Groups view */
  #groups-view {
    padding-bottom: 80px;
  }

  /* Challenges view */
  #challenges-view {
    padding-bottom: 80px;
  }

  /* Leaderboard view */
  #leaderboard-view {
    padding-bottom: 80px;
  }

  /* The home-view footer inline padding */
  #home-view footer {
    padding: 32px 14px !important;
  }

  /* Anchor buttons in hero section — full width on mobile */
  #home-view .hero-btns a {
    padding: 12px 20px !important;
    font-size: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   36. LOCK / LANDING SCREEN — full screen safe
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  

  

  

  
  
}

/* ─────────────────────────────────────────────────────────────────
   37. SCORE / CERT SECTION ON STRATEGY PAGE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .cert-section { padding: 24px 14px !important; }
  .cert-title   { font-size: 24px !important; }
}

/* ─────────────────────────────────────────────────────────────────
   38. COMMUNITY WIDGET BUTTONS — groups / leaderboard shortcuts
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar quick-nav buttons for groups/leaderboard on community page
     Still hidden on mobile per the grid collapse, but shown if needed */
  .community-sidebar-left,
  .community-sidebar-right {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   39. FOCUS / ACTIVE STATES — prevent iOS highlight flash
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  button, a, [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 201, 255, 0.12);
    outline: none;
  }

  /* Prevent form elements from getting blue outline on iOS */
  input:focus, textarea:focus {
    outline: none !important;
    -webkit-appearance: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   40. SMALL PHONE SAFETY NET ≤ 360px
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  /* Modal tabs — even tighter */
  .modal-tab { padding: 8px 6px !important; font-size: 8px !important; letter-spacing: 0 !important; }

  /* Logo text */
  .logo-text { font-size: 16px !important; }

  /* Section headings */
  .section-heading { font-size: 24px !important; }

  /* Nav btn */
  #nav-signin-btn { padding: 6px 10px !important; font-size: 8px !important; }

  /* Bottom nav label hidden on very small */
  .mob-nav-label { display: none !important; }
  #mobile-bottom-nav { height: auto !important; min-height: 50px !important; }
  .mob-nav-icon { font-size: 22px !important; }
  .mob-nav-btn { height: 50px !important; min-height: 50px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PATCH v2 — Landing nav, HIW, theme toggle, post-login sections,
               Erebus Android fix, Progress modal
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   P1. LANDING NAV — cleaner on mobile
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Force nav to stay in one clean row */
  #landing-view .nav {
    padding: 0 16px !important;
    height: 56px !important;
    gap: 0 !important;
  }

  /* Hide the desktop nav links from the top bar on mobile */
  #landing-view .nav-links {
    display: none !important;
  }

  /* Hide desktop CTA buttons from the top bar on mobile */
  #landing-view .nav-desktop-cta {
    display: none !important;
  }

  /* Hide theme toggle from top bar on mobile — it lives next to the hamburger */
  #landing-view .theme-toggle {
    display: flex !important;
    padding: 8px !important;
    font-size: 18px !important;
    border: none !important;
    background: none !important;
    line-height: 1 !important;
  }

  /* Logo — don't let it shrink too much */
  #landing-view .nav-logo {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px !important;
  }

  #landing-view .nav-logo-mark {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    flex-shrink: 0;
  }

  #landing-view .nav-logo-name {
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Nav-right: hamburger only on mobile */
  #landing-view .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0;
  }

  /* Hamburger — no flex-shrink */
  #landing-view .nav-hamburger {
    flex-shrink: 0;
  }

  /* Mobile menu — starts below the 56px nav */
  .landing-mob-menu {
    top: 56px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   P2. HOW IT WORKS — 2×2 grid on mobile, not single column
   ───────────────────────────────────────────────────────────────── */

/* Home-view HIW steps: override the 4-col → 1-col drop */
@media (max-width: 768px) {
  .hiw-steps {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .hiw-step {
    padding: 20px 16px !important;
  }

  .hiw-num {
    font-size: 40px !important;
    margin-bottom: 10px !important;
  }

  .hiw-title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .hiw-desc {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
}

/* Landing-view HIW grid: keep 2×2 on mobile */
@media (max-width: 768px) {
  #landing-view .hiw-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  #landing-view .hiw-card {
    padding: 20px 16px !important;
  }

  #landing-view .hiw-num-bg {
    font-size: 44px !important;
  }

  #landing-view .hiw-title {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }

  #landing-view .hiw-desc {
    font-size: 11px !important;
    line-height: 1.7 !important;
  }
}

/* Still single col on very small phones if 2-col is too tight */
@media (max-width: 360px) {
  #landing-view .hiw-grid,
  .hiw-steps {
    grid-template-columns: 1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   P3. THEME TOGGLE — fix Android rendering (no emoji button)
   ───────────────────────────────────────────────────────────────── */
/* Prevent emoji from being rendered as colour glyphs on Android */
#theme-toggle,
#theme-toggle-btn,
#mob-theme-icon {
  font-family: 'DM Mono', monospace, sans-serif !important;
  font-variant-emoji: text !important;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────
   P4. POST-LOGIN SECTION HIDING
   Testimonials, FAQ, Top Learners are marketing content —
   hide them once the user is logged in (body.user-logged-in).
   ───────────────────────────────────────────────────────────────── */
body.user-logged-in .testimonials-section,
body.user-logged-in .faq-section,
body.user-logged-in .lb-section {
  display: none !important;
}

/* Also hide the HIW and How it Works sections for logged-in users
   (they already know how the app works) */
body.user-logged-in .hiw-section {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   P5. PROGRESS MODAL
   ───────────────────────────────────────────────────────────────── */
#progress-modal .modal {
  border-radius: 14px;
}

#prog-modal-list > div:last-child {
  border-bottom: none !important;
}

@media (max-width: 540px) {
  #progress-modal.modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #progress-modal .modal {
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #prog-modal-list {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
  }

  #prog-modal-list > div {
    padding: 12px 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   P6. EREBUS — Android / mobile fix
   Override the now-non-!important inline position
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #erebus-wrap {
    bottom: 74px !important; /* above 60px mobile nav + buffer */
    left: 14px !important;
    /* Ensure it stays on top of content */
    z-index: 99990 !important;
  }
}

/* On very small screens, shrink Erebus slightly so it doesn't crowd UI */
@media (max-width: 360px) {
  #erebus-wrap {
    width: 60px !important;
    height: 60px !important;
  }

  #erebus-container {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   P7. LANDING MOBILE MENU — full-width CTA buttons
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .landing-mob-menu {
    padding: 16px 20px 24px !important;
    gap: 16px !important;
  }

  .landing-mob-ctas {
    gap: 8px !important;
  }

  .btn-mob-full {
    padding: 13px 20px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    display: flex !important;
    justify-content: center !important;
  }
}