/* ============================================================================
   MOBILE SPACING SYSTEM — authoritative 8pt-grid layer. Loads LAST so it wins.
   Normalises the mobile layout to a single spacing scale + touch-ergonomics:
     - 8pt grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 px  (tokens in styles.css :root)
     - Screen edge margin: 16px, consistent across every screen + tier
     - Distinct card/block gap: 16px ; label-to-field: 8px ; section: 24-32px
     - Touch target floor: 48px (nav/primary), 44px (dense inline controls)
     - Min 8px gap between adjacent tappables
   EVERYTHING is inside @media (max-width: 768px). Desktop is NOT touched.
   Applies to ALL tiers: member, org-admin and super-admin screens.
   ============================================================================ */

@media (max-width: 768px) {

  /* ========================================================================
     1. EDGE MARGINS — one consistent 16px content inset across every screen.
        Overrides the ad-hoc 8/12/13.6px insets the legacy patches set.
     ===================================================================== */
  .page,
  .page-content,
  .main-content,
  .dashboard-page,
  .nutrition-page,
  .training-page,
  .rehab-page,
  .assessment-page,
  .timetable-page,
  .profile-page,
  .coach-page {
    padding-left: var(--edge-mobile) !important;   /* 16px */
    padding-right: var(--edge-mobile) !important;
  }

  /* Per-screen content wrappers that set their own (off) horizontal inset. */
  .nut-content,
  .workout-content,
  .admin-page-container,
  .super-admin-content {
    padding-left: var(--edge-mobile) !important;
    padding-right: var(--edge-mobile) !important;
  }

  /* Community: sidebar/feed/composer were 12px — bring to 16px. */
  .dc-feed { padding-left: var(--edge-mobile) !important; padding-right: var(--edge-mobile) !important; }
  .dc-inline-composer { padding: var(--sp-4) !important; }

  /* Chrome edge margins. */
  .pathway-tabs { padding-left: var(--edge-mobile) !important; padding-right: var(--edge-mobile) !important; }

  /* ── Header (app bar) ────────────────────────────────────────────────────
     The app is full-bleed, but `body` carried a ~12px safe-area side inset that
     pushed the WHOLE header in (the page escapes it, so only the header looked
     gapped). Kill that inset, then give the header ONE clean symmetric 12px
     native-app-bar inset: logo at 12px on the left, the icon buttons trimmed so
     their glyphs land ~12px from the right edge too. */
  body { padding-left: 0 !important; padding-right: 0 !important; }
  /* The real culprit: .app-container carried a max(0.75rem, safe-area) = 12px side
     inset (pwa-mobile-enhancements), which pushed the header in while #page-content
     (a sibling) stayed flush. Zero it so the header bar spans the full width. */
  .app-container { padding-left: 0 !important; padding-right: 0 !important; }
  .app-header { padding-left: 12px !important; padding-right: 4px !important; }
  .app-header .notif-bell-btn,
  .app-header .mobile-hamburger,
  .app-header .profile-nav {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ========================================================================
     2. TOUCH TARGETS — enforce the 44/48px floor on tappables the audit
        flagged below minimum (icon buttons, nav rows, tabs, action buttons).
        Keep existing centring; just guarantee the hit area.
     ===================================================================== */

  /* Icon / circular buttons -> 44x44 (iOS HIG floor; less disruptive than 48
     inside dense rows but still comfortably tappable). */
  .db-add-btn,
  .nut-add-btn,
  .cal-nav-btn,
  .calendar-nav-btn,
  .set-tick-btn,
  .remove-set-btn,
  .dc-ic-tool-btn,
  .avatar-edit-btn,
  .prog-collapse-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Header / nav / hamburger -> 48x48 (standalone primary controls). */
  .mobile-hamburger,
  .page-header-btn {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* Text action buttons & tabs -> 44px min height (vertical hit area). */
  .btn-attend,
  .btn-book-class,
  .booking-cancel-btn,
  .add-set-btn,
  .table-action-btn,
  .btn-sm,
  .action-btn,
  .pending-action-btn,
  .demo-action-btn,
  .challenge-tab,
  .challenge-daily-tab,
  .btn-challenge-submit,
  .btn-challenge-create,
  .prog-select-btn,
  .prog-start-btn,
  .pathway-tab {
    min-height: 44px !important;
  }

  /* Nav rows -> 48px (drawer + admin/super-admin nav, settings rows). */
  .md-item,
  .super-admin-nav-item,
  .setting-item,
  .settings-item {
    min-height: 48px !important;
  }

  /* ========================================================================
     3. OFF-GRID SPACING — snap the worst micro-gaps/paddings to the scale.
        (Tiny 2-6px gaps read as "cramped"; 17.6px paddings read as "uneven".)
     ===================================================================== */

  /* Cramped gaps that should breathe at 8px. */
  .md-nav { gap: var(--sp-2) !important; }                 /* 2px -> 8px */
  .challenge-leaderboard { gap: var(--sp-2) !important; }  /* 2.4px -> 8px */
  .today-events-list { gap: var(--sp-2) !important; }      /* 5.6px -> 8px */
  .db-macro-bars { gap: var(--sp-2) !important; }          /* 7.2px -> 8px */
  .nut-macro-bars { gap: var(--sp-2) !important; }         /* 9px -> 8px */
  .pc-header { gap: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
  .pc-meta { gap: var(--sp-2) !important; }
  .pc-actions { gap: var(--sp-2) !important; }
  .like-btn { gap: var(--sp-2) !important; }

  /* Forms: label-to-field 8px, field-to-field 16px. */
  .form-group { margin-bottom: var(--sp-4) !important; }
  .form-group label { margin-bottom: var(--sp-2) !important; }
  .checkbox-group { margin-bottom: var(--sp-2) !important; }
  .checkbox-label { gap: var(--sp-2) !important; }
  .referral-admin-form { gap: var(--sp-4) !important; }
  .referral-admin-form label { margin-bottom: var(--sp-2) !important; }

  /* Set rows + inputs to the grid. */
  .set-row { padding: var(--sp-2) 0 !important; gap: var(--sp-2) !important; }
  .set-reps-input,
  .set-weight-input { padding: var(--sp-2) var(--sp-3) !important; }
  .ex-notes-input { padding: var(--sp-2) var(--sp-3) !important; }

  /* Uneven paddings -> symmetric 16px. */
  .challenge-card { padding: var(--sp-4) !important; }     /* 17.6/18.4 -> 16 */
  .md-userbar { padding: var(--sp-4) !important; }         /* 17.6 -> 16 */
  .log-actionbar { padding: var(--sp-4) !important; }      /* 14.4/17.6 -> 16 */
  .log-body { padding: var(--sp-6) var(--sp-4) !important; } /* -> 24/16 */

  /* ========================================================================
     4. NARROW-VIEWPORT GRIDS — minmax(260-280px) overflows ~320px phones.
        Stack to a single column on the smallest screens.
     ===================================================================== */
  .assessment-results-grid,
  .rehab-referrals-grid {
    grid-template-columns: 1fr !important;
  }

  /* ========================================================================
     5. PROGRAMME CARDS — compact 2-up grid that taps to open the detail modal
        (handler already exists at app.js .prog-card click). The long
        description + inline Start button live in the detail modal, so hide
        them on the tile: ~4-6 programmes per screen instead of ~1.5, killing
        the dead space the tall cards created.
     ===================================================================== */
  .prog-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-3) !important;
  }
  .prog-card {
    padding: var(--sp-3) !important;
    min-height: 0 !important;
    cursor: pointer !important;
  }
  .prog-card .prog-card-desc,
  .prog-card .prog-card-sub { display: none !important; }
  .prog-card .prog-select-btn { display: none !important; }
  .prog-card .prog-card-name {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin: 0.1rem 0 var(--sp-2) 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .prog-card .prog-card-meta {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    font-size: 0.7rem !important;
    margin: 0 !important;
  }
  .prog-card .prog-card-cta-active {
    font-size: 0.7rem !important;
    margin-top: var(--sp-2) !important;
  }
}

/* Smallest phones: keep the 16px edge margin (do NOT shrink it) and ensure
   any remaining 2-up grids collapse. */
@media (max-width: 480px) {
  .nut-content,
  .page,
  .page-content,
  .dashboard-page,
  .nutrition-page,
  .profile-page {
    padding-left: var(--edge-mobile) !important;
    padding-right: var(--edge-mobile) !important;
  }
  .assessment-results-grid,
  .rehab-referrals-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   UX/UI POLISH PASS — named mobile bugs (FAB clearance, left-edge bleed, tab
   scroll affordance, profile edit badge, vertical rhythm, gold glow, images).
   All @media (max-width: 768px). Desktop untouched.
   ============================================================================ */
@media (max-width: 768px) {

  /* ---- 1. FAB clearance: content must scroll clear of the fixed .log-fab.
     The FAB is hidden on community (composer owns the bottom), so exclude it. */
  body:not(:has(.page-community)) #page-content {
    padding-bottom: var(--fab-clearance) !important;
  }

  /* ---- 2. Left-edge bleed: give the community sidebar a real 16px inset.
     Pad the container; zero the inner label/list insets so nothing double-pads
     (channel items keep their own slight indent, category-style). */
  .dc-sidebar {
    padding-left: var(--edge-mobile) !important;
    padding-right: var(--edge-mobile) !important;
  }
  .dc-channel-list,
  .dc-channel-section-label,
  .dc-sidebar-header,
  .dc-server-name {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- 3. Tab strips: add a right-edge fade so it's clear they scroll.
     (Active-tab scroll-into-view is handled in app.js.) */
  .pathway-tabs { position: relative !important; }
  .pathway-tabs::after {
    content: '' !important;
    position: absolute !important;
    top: 0; right: 0; bottom: 0;
    width: 28px !important;
    pointer-events: none !important;
    background: linear-gradient(to right, rgba(10,22,40,0), var(--navy, #0a1628)) !important;
    z-index: 2 !important;
  }

  /* ---- 4. Profile edit button: sit as a bottom-right corner badge, not over
     the face. Offset outward from the avatar circle. */
  .avatar-edit-btn {
    bottom: -2px !important;
    right: -2px !important;
    box-shadow: 0 0 0 3px var(--navy, #0a1628) !important; /* ring separates it from the avatar */
  }

  /* ---- 5. Vertical rhythm: tighten over-spaced chat messages; un-cramp the
     progress banner + date-range pills (snap to 8pt). */
  .post-card { margin-bottom: var(--sp-2) !important; }     /* 12px -> 8px between messages */
  .mrt-progress-banner {
    padding: var(--sp-4) !important;
    margin-bottom: var(--sp-6) !important;                  /* 24px below banner */
  }
  .pg-period {
    gap: var(--sp-2) !important;
    margin: 0 0 var(--sp-6) !important;                     /* 24px below the pills */
  }
  .pg-period-btn { padding: var(--sp-2) var(--sp-4) !important; }

  /* ---- 6. Gold glow: ONE consistent glow on primary actions only (not every
     gold element). Reset stray glows, apply a single restrained shadow. */
  .btn-primary,
  .btn-gold,
  .log-fab,
  button.primary {
    box-shadow: 0 2px 12px rgba(200, 160, 60, 0.28) !important;
  }

  /* ---- 7. Images never squashed: preserve aspect ratio in media tiles. */
  .pc-media-thumb img,
  .pc-media-full-img,
  .meal-idea-img,
  .gallery-item img {
    object-fit: cover !important;
  }

  /* ---- 8. Dashboard greeting: clear gap between the header bar and the first
     card so they don't touch/blend; and a denser stat row (was a touch large). */
  .dashboard-page .db-topbar {
    margin-top: var(--sp-4) !important;
    padding-top: var(--sp-3) !important;
  }
  .dashboard-page .db-greeting-line { margin-top: 0 !important; }
  .dashboard-page .db-name { font-size: 1.02rem !important; }
  .dashboard-page .db-kpi { padding: 0.3rem 0.5rem !important; }
  .dashboard-page .db-kpi strong { font-size: 0.95rem !important; }
  .dashboard-page .db-kpi span { font-size: 0.52rem !important; letter-spacing: 0.02em !important; }
  /* Today's Nutrition / My Classes sit flush under the calendar — give them air. */
  .dashboard-page .db-sidebar { margin-top: var(--sp-4) !important; }
  .dashboard-page .db-sidebar .db-side-card + .db-side-card { margin-top: var(--sp-3) !important; }

  /* ---- 9. 'View All' (My Classes) — smaller so it stops bleeding into the
     section above. */
  .db-view-all-btn {
    font-size: 0.68rem !important;
    padding: 0.2rem 0.55rem !important;
    line-height: 1.2 !important;
  }

  /* ---- 10. Note editor: the attached picture is a small thumbnail (tap to view
     full-screen) so the editor stays scrollable instead of being dominated by a
     huge image. */
  .ce-attached-img-wrap { display: inline-block !important; }
  .ce-attached-img {
    max-height: 84px !important;
    max-width: 120px !important;
    width: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }

  /* ---- 11. Dashboard quick-log: Log Food / Workout / Water side by side and
     compact (icon above label), instead of three big stacked bars. */
  .dashboard-page .db-log-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--sp-2) !important;
  }
  .dashboard-page .db-log-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.12rem !important;
    padding: 0.4rem 0.2rem !important;
    font-size: 0.68rem !important;
    min-height: 0 !important;
    text-align: center !important;
    line-height: 1.1 !important;
  }
  .dashboard-page .db-log-btn svg { width: 13px !important; height: 13px !important; }

  /* Today/Album: subtle outlined buttons (gold = primary only), not solid gold
     blocks crammed into the month-nav row. Let the row wrap cleanly. */
  .dashboard-page .db-cal-nav { flex-wrap: wrap !important; row-gap: 0.4rem !important; }
  .dashboard-page .cal-today-btn {
    padding: 0.28rem 0.7rem !important;
    font-size: 0.7rem !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid rgba(200, 160, 60, 0.45) !important;
    color: var(--gold, #c8a03c) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
  }
  .dashboard-page .cal-today-btn:active { background: rgba(200, 160, 60, 0.12) !important; }
  .dashboard-page .db-cal-month { font-size: 1rem !important; line-height: 1.15 !important; }
  .dashboard-page .db-cal-nav > button:not(.cal-today-btn) {
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
  }

  /* ---- 12. Sign-in / register form: smaller, tidier inputs + buttons (was
     oversized and edge-tight). */
  .auth-page {
    padding: var(--sp-6) var(--edge-mobile) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
  }
  .auth-page .auth-form {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .auth-page .form-group input,
  .auth-page .pw-field input {
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    min-height: 48px !important;
    height: auto !important;
    width: 100% !important;
  }
  .auth-page .form-group { margin-bottom: var(--sp-4) !important; }
  .auth-page .form-group label {
    font-size: 0.85rem !important;
    margin-bottom: var(--sp-2) !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
    display: block !important;
  }
  .auth-page .auth-form .btn-primary,
  .auth-page .auth-form .btn,
  .auth-page .btn-secondary {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    letter-spacing: 1.2px !important;
    min-height: 48px !important;
    height: auto !important;
    width: 100% !important;
    margin-top: var(--sp-2) !important;
  }

  /* Registration specific fixes */
  .auth-page .input-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .auth-page .input-row .form-group {
    width: 100% !important;
  }

  .auth-page .checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--sp-3) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: var(--pi-text-2) !important;
    opacity: 1 !important;
    margin-top: var(--sp-2) !important;
  }
  .auth-page .checkbox-label input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }
  .auth-page .checkbox-label span {
    flex: 1 !important;
  }
  .auth-page .checkbox-label a {
    color: var(--pi-gold) !important;
    text-decoration: underline !important;
  }

  /* ---- 13. Meal Plans: two actions side-by-side + tighter empty state (was a
     poor use of space — two big stacked buttons over a near-empty card). */
  .meal-plans-actions {
    display: flex !important;
    gap: 0.6rem !important;
    margin: 0.75rem 0 1rem !important;
  }
  .meal-plans-actions .btn {
    flex: 1 1 0 !important;
    margin: 0 !important;
    justify-content: center !important;
    padding: 0.6rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
  .meal-plans-container .empty-state { padding: 1.5rem 1rem !important; }
  .meal-plans-container .empty-state p {
    font-size: 0.82rem !important;
    color: rgba(255,255,255,0.5) !important;
  }
}

/* ── 14. Add Food: present as a full-screen PAGE on mobile, not a popup modal.
   Same DOM + handlers as the desktop modal (untouched on desktop) — only the
   mobile presentation changes: solid page background (no dimmed backdrop),
   edge-to-edge, sticky header with a gold BACK ARROW instead of a floating ×,
   and a scrolling body. ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #food-modal.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--navy, #0a0e1a) !important;   /* page bg, not a dim backdrop */
    align-items: stretch !important;
    justify-content: stretch !important;
    z-index: 1300 !important;
  }
  #food-modal .food-modal-content {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--navy, #0a0e1a) !important;
  }
  /* Header → page header: back arrow (left) + title, sticky. */
  #food-modal .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;   /* title sits NEXT to the back arrow */
    gap: 0.5rem !important;
    flex: 0 0 auto !important;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: var(--navy, #0a0e1a) !important;
  }
  #food-modal .modal-header h2 { font-size: 1.1rem !important; margin: 0 !important; }
  #food-modal .modal-close {
    order: -1 !important;            /* move the trigger to the LEFT (back position) */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    width: auto !important;
    height: auto !important;
    color: var(--gold, #c8a03c) !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #food-modal .fmt-x-ico { display: none !important; }     /* hide × on mobile */
  #food-modal .fmt-back-ico { display: inline-flex !important; }
  /* Meal selector + tabs stay pinned under the header; only the body scrolls. */
  #food-modal .fmt-meal-selector,
  #food-modal .food-modal-tabs { flex: 0 0 auto !important; }
  #food-modal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* The 4 main tabs SHRINK to fit the width (was clipping 'Scan Barcode'); let
     labels wrap to 2 lines rather than run off-screen. */
  #food-modal .food-modal-tabs { flex-wrap: nowrap !important; overflow: visible !important; }
  #food-modal .food-modal-tabs .fmt-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.45rem 0.15rem !important;
    font-size: 0.62rem !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  /* The 6 category chips are too many to fit — scroll them sideways cleanly. */
  #food-modal .food-categories {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  #food-modal .food-categories::-webkit-scrollbar { display: none !important; }
  #food-modal .food-categories .food-category-btn { flex: 0 0 auto !important; }
}

/* ── 15. Dashboard calendar dead-space + global FAB clearance ─────────────── */
@media (max-width: 768px) {
  /* The dashboard column forces min-height:calc(100vh-52px); a flex child then
     grows into that, opening ~1000px of empty navy below the calendar that
     buried Nutrition/Activity/Classes. On mobile the page scrolls, so drop the
     forced height and let the calendar be content-height. */
  .db-new { min-height: 0 !important; }
  .gc-cal { flex: 0 0 auto !important; }

  /* The floating + FAB was overlapping the last rows (My Classes 'View',
     Garmin 'Connect'). Give scrollable pages bottom clearance so nothing sits
     under the FAB. */
  .dashboard-page,
  .nutrition-page,
  .progress-page,
  .challenges-page,
  .profile-page,
  .workout-page,
  .rehab-page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ── 16. Audit + user-requested polish batch ─────────────────────────────── */
@media (max-width: 768px) {
  /* Album: Remove/Delete are small and SIDE-BY-SIDE under the full-width Share
     (were three big stacked buttons). */
  .igal-detail-actions { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; }
  .igal-detail-actions .igal-share-btn { flex: 1 1 100% !important; }
  .igal-detail-actions .igal-remove-album-btn,
  .igal-detail-actions .igal-delete-photo-btn {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.72rem !important;
    gap: 5px !important;
  }
  .igal-detail-actions .igal-remove-album-btn svg,
  .igal-detail-actions .igal-delete-photo-btn svg { width: 13px !important; height: 13px !important; }

  /* Bottom safe-area buffer so the last content (notes, lists) isn't hidden
     behind the Android gesture line / nav bar. */
  .timetable-page, .track-page, .achievements-page, .analytics-page,
  .coach-page, .admin-page, .onboarding-page, #exercise-library-container {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Rehab "Best For": the <li>s now carry .pathway-for-chip so they read as
     compact chips instead of huge full-width bullets. */
  .pathway-for-list { list-style: none !important; padding-left: 0 !important; margin: 0 0 0.85rem !important; }

  /* HYROX bands: centre the label + time in each box. */
  .hyrox-band-row { align-items: center !important; text-align: center !important; }
  .hyrox-band-label, .hyrox-band-val { text-align: center !important; width: 100% !important; }

  /* HYROX challenge tile: pull content in from the border so text doesn't touch
     the lines. */
  .challenge-tile { padding: 16px 16px 18px !important; }
  .challenge-tile .challenge-tile-head { margin-bottom: 8px !important; }

  /* Community composer: smaller media buttons so the text input stays prominent
     and the row never crowds the input. */
  .page-community .dc-ic-tool-btn {
    min-width: 30px !important; width: 30px !important; height: 30px !important;
    padding: 5px !important;
  }
  .page-community .dc-ic-tool-btn svg { width: 15px !important; height: 15px !important; }
}

/* Desktop keeps the × (the back arrow is mobile-only). */
@media (min-width: 769px) {
  #food-modal .fmt-back-ico { display: none; }
  #food-modal .fmt-x-ico { display: inline; }
}

/* ── 17. Day-log panel: edge gap + breathing room between metric rows.
   Content was edge-to-edge (LOG button clipped) and the rows were one
   condensed bordered list. Inset the body + turn rows into gapped cards. */
@media (max-width: 768px) {
  .day-detail-panel .ddp-body { padding-left: 16px !important; padding-right: 16px !important; }
  .day-detail-panel .ddl-stats {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .day-detail-panel .ddl-stat-row {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 12px !important;
  }
  /* Breathing room between the date header and the Add Photo / Add Note row. */
  .day-detail-panel .ddl-media-actions { margin-top: 10px !important; }
  /* Icons removed per design rules -> the badge box is always empty now. Hide it so the
     rows read as clean label/value cards, consistent with the rest of the app. */
  .day-detail-panel .ddl-stat-icon { display: none !important; }
}

/* ── 18. Note editor = a full-screen PAGE (opaque, not a floating card over the
   dashboard), with an obvious bordered writing box and uniform toolbar buttons. */
@media (max-width: 768px) {
  .ce-modern-overlay {
    display: block !important;
    background: var(--navy, #0a0e1a) !important;   /* opaque -> reads as a page, not an overlay */
    padding: 0 !important;
    backdrop-filter: none !important;
  }
  .ce-modern-journal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;   /* keep padding-top inside 100dvh so the Save footer isn't pushed off-screen */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  /* Uniform square toolbar buttons so B/I/U/colour/lists all line up. */
  .ce-modern-toolbar {
    display: flex !important;
    align-items: center !important;   /* kill the baseline offset that put A/■ 4px high */
    gap: 6px !important;
    padding: 0.5rem 1rem !important;
  }
  .ce-modern-toolbar .ce-format-btn,
  .ce-modern-toolbar .ce-color-label {
    width: 38px !important; height: 38px !important;
    min-width: 38px !important; min-height: 38px !important;
    padding: 0 !important; border-radius: 8px !important;
    flex: 0 0 auto !important; align-self: center !important;
    margin: 0 !important; vertical-align: middle !important;
  }
  /* Block 18b: centre every toolbar glyph inside the 38x38 boxes. Block 18 set
     the size but not the centering, so glyphs rode top-left by text-baseline.
     Re-assert flex centering + neutralise line-height/baseline. */
  .ce-modern-toolbar .ce-format-btn,
  .ce-modern-toolbar .ce-color-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  .ce-modern-toolbar .ce-format-btn > b,
  .ce-modern-toolbar .ce-format-btn > i,
  .ce-modern-toolbar .ce-format-btn > u {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ce-modern-toolbar .ce-color-label > input[type="color"],
  .ce-modern-toolbar .ce-color-label .ce-color-picker {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
  }
  .ce-modern-toolbar .ce-color-label.ce-page-bg-label {
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }
  /* Make the writing area an obvious bordered text box. */
  .ce-modern-editor {
    margin: 12px 14px !important;
    min-height: 0 !important;            /* allow the flex:1 editor to shrink so the footer stays in view */
    border: 1px solid rgba(200, 160, 60, 0.35) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 14px !important;
  }
  /* Media row sits just above the Save footer (which handles the home-indicator
     safe-area), so keep its bottom padding tight - no extra gap before the footer. */
  .ce-media-row {
    padding-bottom: 0.6rem !important;
  }
  /* Footer: give it horizontal padding so Save isn't flush to the edge, keep it
     compact, and carry the home-indicator safe-area on the bottom. */
  .ce-modern-footer {
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px !important;
  }
  /* Smaller Save button. */
  .ce-modern-footer .ce-btn-save {
    padding: 8px 18px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
}

/* ── 19. Nutrition page: widen the Search foods box (mobile-ui-fixes.css caps it
   at max-width:140px), align every section to the same left edge, and add a
   little breathing room above the title and the meal-idea name. */
@media (max-width: 768px) {
  .nutrition-page .page-header .nut-header-search {
    max-width: none !important;
    flex: 1 1 auto !important;
  }
  /* The header (title + search) was indented further (34px) than the tabs (18px)
     and cards (24px). Zero the header + content inner padding so EVERYTHING lines
     up on the same left edge, and the cards use the full width. */
  .nutrition-page .page-header {
    padding-top: 4px !important;
    margin-bottom: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .nutrition-page .nut-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 21. Meal Idea card: clamp the photo so it never bleeds past its frame, and
   tidy the typography. The image was rendering at natural aspect (height:auto),
   so different meals overflowed by different amounts -> subtabs looked different. */
@media (max-width: 768px) {
  .nut-feat-img-wrap {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    overflow: hidden !important;        /* clip any bleed */
  }
  .nut-feat-img {
    width: 100% !important;
    height: 100% !important;            /* fill the frame instead of natural height */
    object-fit: cover !important;
    display: block !important;
  }
  /* Typography + rhythm */
  .nut-feat-info {
    padding: 16px 14px 14px !important;
    gap: 10px !important;
  }
  .nut-feat-name {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
  }
  .nut-feat-desc {
    font-size: 0.85rem !important;
    color: #b4bcc8 !important;
    line-height: 1.5 !important;
  }
  /* Ingredients & Method: a global `ul li, ol li { padding:0.75rem 0; border-bottom }`
     mobile rule spread these way out with divider lines. Make them compact. */
  .nut-ingredients-list li {
    padding: 1px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
  }
  .nut-steps-list li {
    padding: 2px 0 2px 24px !important;   /* keep room for the step number */
    margin: 0 0 2px !important;
    border-bottom: none !important;
  }
}

/* ── 20. Add Food (Quick Picks): gaps between the filter box, the category tabs
   and the food list, which were stacked tight together. */
@media (max-width: 768px) {
  #food-modal .fmt-panel .search-box {
    margin-bottom: 14px !important;
  }
  #food-modal .fmt-panel .food-categories {
    margin-bottom: 14px !important;
  }
}

/* ── 22. Create/Edit Meal Plan builder: compress the layout (was very tall — a
   120px textarea, 20px card padding, and the "2x2 grid" collapsing to a single
   column). Restore the intended 2x2 meal grid and tighten spacing. */
@media (max-width: 768px) {
  .meal-plan-builder-content .modal-body { padding: 14px !important; }
  .meal-plan-builder-content .meal-plan-form { gap: 12px !important; }
  .meal-plan-builder-content .form-group { margin-bottom: 12px !important; }
  .meal-plan-builder-content label { font-size: 12px !important; margin-bottom: 4px !important; }
  .meal-plan-builder-content #meal-plan-name { padding: 9px 12px !important; }
  .meal-plan-builder-content #meal-plan-description {
    height: 56px !important; min-height: 56px !important; padding: 8px 12px !important;
  }
  /* Day selector: all 7 in one compact row. */
  .meal-plan-builder-content .day-tabs {
    gap: 4px !important; flex-wrap: nowrap !important; margin-bottom: 10px !important;
  }
  .meal-plan-builder-content .day-tab {
    flex: 1 1 0 !important; min-width: 0 !important;
    padding: 7px 2px !important; font-size: 11px !important;
  }
  .meal-plan-builder-content .day-panel-title { font-size: 14px !important; margin: 0 0 8px !important; }
  /* The intended 2x2 meal grid (was collapsing to a single tall column). */
  .meal-plan-builder-content .meal-grid {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  .meal-plan-builder-content .meal-card { padding: 12px !important; margin-bottom: 0 !important; }
  .meal-plan-builder-content .meal-card-header h4 { font-size: 13px !important; margin: 0 !important; }
  .meal-plan-builder-content .meal-count { font-size: 10px !important; }
  .meal-plan-builder-content .add-food-compact-btn { padding: 8px !important; font-size: 12px !important; }
  .meal-plan-builder-content #save-meal-plan-btn { padding: 12px !important; }
}

/* ── 23. Training (workout) page: programme tiles weren't reaching the edges —
   workout-content (16px) + pathway-panel (16px) stacked a double side inset
   (cards started at 40px). Drop the redundant panel padding + trim the content
   padding so the 2-col grid uses the full width. */
@media (max-width: 768px) {
  .workout-page .workout-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .workout-page .pathway-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Remove the "who it's for" bubbles across all training tabs (per request). */
  .workout-page .pathway-for-list {
    display: none !important;
  }
  /* Minimise the spacing around the intro paragraph: trim its own margins AND the
     32px top margin on the first goal section label (STRENGTH), which was the big gap. */
  /* Gap above the intro paragraph was 48px (tabs margin 16 + panels margin 24 +
     panels padding 8 + panel padding 16). Collapse it. */
  .workout-page .pathway-tabs { margin-bottom: 6px !important; }
  .workout-page .workout-content .pathway-panels {
    margin-top: 0 !important;
    padding-top: 2px !important;
  }
  .workout-page .pathway-panel { padding-top: 0 !important; }
  .workout-page .pathway-desc {
    margin: 0 0 4px !important;
  }
  .workout-page .pw-section-label {
    margin-top: 14px !important;
  }
  /* Programme detail: breathing room between the "Programme Breakdown" title
     and the week rows (they were touching). */
  .prog-detail-weeks h3 {
    margin-bottom: 12px !important;
  }
}

/* Loader: gold brand "P" (was white) to match the login screen. Applies on all
   viewports (the loader shows on every page load). */
.loading-page .pioneer-mark,
.loader .pioneer-mark {
  color: var(--gold, #c8a03c) !important;
}

/* Calendar: 'assessment' event dot — a distinct rose so saved assessments stand
   out from training (gold) / rehab (orange) / weight (amber). Covers every dot
   class variant used across the dashboard + nutrition calendars. */
.legend-dot.assessment,
.day-dot.assessment,
.dot-assessment,
.cal-dot-assessment { background: #d6336c !important; }
.cal-dot-challenge { background: #ff7849 !important; }

/* ── 24. Tab consistency. Goal tabs were flush (gap:0) with full 1px borders, so
   adjacent borders doubled into a heavy vertical "line" between tabs. Add a gap +
   rounded corners and drop the underline bar; make the Exercises filter tabs use
   the same colours so every tab on the Training screen matches. */
@media (max-width: 768px) {
  .workout-page .pathway-tabs {
    gap: 6px !important;
    border-bottom: none !important;
    padding-bottom: 2px !important;
  }
  .workout-page .pathway-tab { border-radius: 8px !important; }
  #exercise-library-container .ex-lib-filter-btn {
    border-radius: 8px !important;
    background: rgba(10, 22, 40, 0.6) !important;
    border: 1px solid rgba(200, 160, 60, 0.3) !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  #exercise-library-container .ex-lib-filter-btn.active {
    background: rgba(200, 160, 60, 0.2) !important;
    border-color: rgba(200, 160, 60, 0.6) !important;
    color: #c8a03c !important;
  }
}

/* ── 25. Exercise library: gap above the search bar; de-box the grid/list view
   toggle (just two icons on the right); and lay the tiles out two-up like the
   programmes grid (was a single wasteful column). */
@media (max-width: 768px) {
  .ex-lib-search-row {
    margin-top: 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .ex-lib-search-row .ex-lib-search-input {
    flex: 1 1 100% !important;   /* search full-width on its own line */
    width: 100% !important;
    min-width: 0 !important;
  }
  .ex-lib-view-toggle {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;   /* push the two icons to the right */
  }
  .ex-view-btn { width: 34px !important; height: 34px !important; }
  .ex-lib-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .ex-card { padding: 12px !important; }
  /* Video icon removed from tiles (the detail page has "Watch video"). */
  .ex-card-header { display: block !important; margin-bottom: 6px !important; }
  .ex-card-title {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
  }
  .ex-card-meta { margin-bottom: 6px !important; }

  /* Exercise detail modal: tight section spacing, but a clear gap ABOVE each
     heading so the headings stand out. */
  .ex-detail-modal .ex-detail-section {
    margin-bottom: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }
  .ex-detail-modal .ex-detail-section h3 {
    margin: 0.5rem 0 5px !important;
  }
  .ex-detail-modal .modal-header { margin-bottom: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .ex-detail-modal .ex-detail-meta { margin-top: 0.5rem !important; }
}

/* ── 26. Programme + assessment detail: a mobile rule collapsed the 3 stat bubbles
   (Category/Time/Components, or Duration/Frequency/Difficulty) to a single stacked
   column. Keep them side by side, and tighten the detail spacing. */
@media (max-width: 768px) {
  .prog-detail-meta {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .prog-detail-stat { padding: 8px 6px !important; }
  .prog-detail-stat-label { font-size: 0.58rem !important; letter-spacing: 0.02em !important; }
  .prog-detail-overview { margin-bottom: 0.9rem !important; }
  .prog-detail-desc { margin-bottom: 0.8rem !important; }
  /* Space above the Begin Assessment / Start Programme button. */
  .prog-detail-actions { margin-top: 16px !important; }

  /* Assessment detail: a global mobile reset (*{margin:0!important}) collapsed the
     section spacing, so headers sat flush. Restore consistent gaps + space above
     each heading, and keep the dividers. */
  .assess-detail-section {
    margin-top: 0.9rem !important;
    padding-top: 0.9rem !important;
  }
  .assess-detail-section:first-of-type { margin-top: 0.5rem !important; }
  .assess-detail-section h3 { margin: 0 0 8px !important; }
}