/* ============================================================================
   mobile-compress.css  —  PIONEER mobile polish pass
   ----------------------------------------------------------------------------
   ONE @media (max-width: 768px) block only. Desktop (>=769px) is never touched.
   Loaded LAST (link wired in index.html separately) so these rules win the
   cascade over earlier mobile sheets without needing more !important than the
   sheets they override.

   Scope of this file:
     (a) AVATAR  — header avatar: fixed 34px square, cover, never a sliver.
     (b) COLOURS — neutralise off-brand category colours to dark chips; keep
                   gold for brand/active and red ONLY for errors.
     (c) COMPRESS — snap sparse vertical rhythm to the 8pt scale; kill voids.
     (d) CHARTS  — progress trend charts full-width 1-per-row, readable axis;
                   stat cards stay 2-up.
     (e) CLIPPING — bottom scroll clearance for the gold log-FAB; composer shows
                    the full placeholder; training tab strip gets a trailing peek.

   Brand: navy + gold #c8a03c. Red ONLY for errors/destructive. UK spelling.
   ========================================================================== */

@media (max-width: 768px) {

  /* ==========================================================================
     (a) AVATAR — header profile image / fallback initial
     The img has width/height but no shrink guard, so the flex header squeezes
     it to a tall sliver and object-fit crops the squeezed box. Lock a hard
     34px square that cannot shrink; centre it in a 44px tap target.
     ====================================================================== */
  .app-header-right .profile-nav,
  .app-nav-item.profile-nav {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .app-header-right .header-profile-img,
  .header-profile-img {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    aspect-ratio: 1 / 1;
    flex: 0 0 34px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 1.5px solid var(--gold, #c8a03c);
    display: block;
  }

  /* Fallback initial — same square footprint so layout never shifts. */
  .app-header-right .profile-avatar,
  .profile-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    aspect-ratio: 1 / 1;
    flex: 0 0 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold, #c8a03c);
    color: #0a1628;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    overflow: hidden;
  }

  /* ==========================================================================
     (b) COLOURS — neutralise off-brand category colours
     Legend dots, calendar dots and assessment category badges collapse to
     neutral dark chips. Gold stays for brand/active; red stays for errors only.
     ====================================================================== */

  /* Dashboard calendar legend dots — a DISTINCT colour per category. */
  .legend-dot.nutrition { background: #2ea043 !important; box-shadow: none !important; }
  .legend-dot.training  { background: var(--gold, #c8a03c) !important; box-shadow: none !important; }
  .legend-dot.rehab     { background: #e0762f !important; box-shadow: none !important; }
  .legend-dot.community,
  .legend-dot.events    { background: #3882dc !important; box-shadow: none !important; }
  .legend-dot.water     { background: #19c3e6 !important; box-shadow: none !important; }
  .legend-dot.photo,
  .legend-dot.note      { background: #9b6dff !important; box-shadow: none !important; }
  .legend-dot.weight    { background: #f5a800 !important; box-shadow: none !important; }

  /* Matching calendar cell dots — same per-category colours. */
  .cal-dot-nutrition { background: #2ea043 !important; box-shadow: none !important; }
  .cal-dot-training  { background: var(--gold, #c8a03c) !important; box-shadow: none !important; }
  .cal-dot-rehab     { background: #e0762f !important; box-shadow: none !important; }
  .cal-dot-community { background: #3882dc !important; box-shadow: none !important; }
  .cal-dot-water     { background: #19c3e6 !important; box-shadow: none !important; }
  .cal-dot-note      { background: #9b6dff !important; box-shadow: none !important; }
  .cal-dot-weight    { background: #f5a800 !important; box-shadow: none !important; }

  /* Assessment — its own pink so it's clearly distinct from the rest. */
  .legend-dot.assessment,
  .day-dot.assessment,
  .dot-assessment,
  .cal-dot-assessment {
    background: #e0518f !important;
    box-shadow: none !important;
  }

  /* Assessment category badges -> neutral dark chips matching .prog-card-meta.
     (military pink, aerobic teal, functional mustard, strength green all drop
     to one neutral chip; the live gold category chip is unaffected.) */
  .assessment-type-badge-military,
  .assessment-type-badge-aerobic,
  .assessment-type-badge-functional,
  .assessment-type-badge-strength,
  .assessment-type-badge-general,
  .assessment-type-badge.standard,
  .assessment-type-badge.functional,
  .assessment-type-badge.rehab {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  /* ==========================================================================
     (c) COMPRESS — snap sparse vertical rhythm to the 8pt scale; kill voids
     ====================================================================== */

  /* --- DASHBOARD: the month calendar stretches to fill the viewport, ballooning
     cells to ~95px. Let the page size to content and cap the cells. --- */
  .db-new {
    min-height: 0 !important;
  }
  .db-cal-panel {
    flex: 0 0 auto !important;
  }
  .cal-day {
    aspect-ratio: auto !important;
    min-height: 44px !important;
    max-height: 48px !important;
  }

  /* --- PROGRESS: tighten the tall, sparse stat cards. --- */
  .pg-stat-card {
    padding: var(--sp-3) !important;
  }
  .pg-stat-lbl {
    margin-top: var(--sp-2) !important;
  }
  .pg-stat-delta {
    margin-top: var(--sp-1) !important;
  }
  .pg-period-empty {
    padding: var(--sp-3) !important;
    margin: 0 0 var(--sp-4) !important;
  }

  /* --- ASSESSMENT: tighten prog-card grid cards + meta row. --- */
  .prog-card {
    padding: var(--sp-3) !important;
  }
  .prog-card-meta {
    padding-top: var(--sp-2) !important;
  }

  /* --- NUTRITION: tighten oversized hero/idea card paddings + gaps. --- */
  .nut-card,
  .nut-hero,
  .nut-idea-card,
  .nut-food-card {
    padding: var(--sp-4) !important;
  }
  .nut-benefits,
  .nut-chips {
    gap: var(--sp-2) !important;
  }

  /* --- COMMUNITY: compress over-tall message rows. --- */
  .post-card {
    padding: var(--sp-3) !important;
    margin-bottom: var(--sp-2) !important;
  }
  .pc-body {
    margin: var(--sp-2) 0 !important;
  }
  .pc-actions {
    padding-top: var(--sp-2) !important;
  }

  /* --- GLOBAL: snap big section gaps down to the 8pt scale. --- */
  .section-header {
    margin-bottom: var(--sp-3) !important;
  }
  .app-card,
  .card {
    padding: var(--sp-4) !important;
  }

  /* ==========================================================================
     (d) CHARTS — progress trend charts full-width 1-per-row; readable axis.
     Stat cards stay 2-up (do NOT touch .pg-stats-row).
     ====================================================================== */
  .pg-charts {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }
  /* Adherence chart no longer needs to span — it is already full-width. */
  .pg-charts > .pg-card:nth-child(3) {
    grid-column: auto !important;
  }
  /* Full-width chart cards — give the infographics real presence on mobile. */
  .pg-chart-svg {
    min-height: 280px !important;
  }
  /* Legible axis text (>=11px). */
  .pg-axis-label {
    font-size: 11px !important;
  }

  /* ==========================================================================
     (e) CLIPPING — FAB clearance, composer placeholder, training tab peek.
     ====================================================================== */

  /* The gold log-FAB floats over the dashboard's last section because the
     bottom padding sits on #page-content but the dashboard body fills the
     viewport. Add the same clearance to the dashboard page itself. The FAB is
     hidden on community, so exclude it from any extra bottom padding there. */
  body:not(:has(.page-community)) .dashboard-page,
  body:not(:has(.page-community)) .db-new {
    padding-bottom: var(--fab-clearance) !important;
  }
  /* Belt-and-braces: scroll-padding so anchored scroll never lands under FAB. */
  body:not(:has(.page-community)) #page-content {
    scroll-padding-bottom: var(--fab-clearance) !important;
  }

  /* Community composer: 40px min-height clips the 2-line placeholder. Raise to
     ~48px so both lines show. Keep font-size:16px to stop iOS zoom. */
  .dc-ic-textarea,
  #dc-post-input {
    min-height: var(--sp-12) !important; /* 48px */
  }

  /* Training tab strip scrolls but reads as truncated. Tighten padding so more
     tabs fit and add a trailing inset so the last tab peeks (scroll affordance). */
  .pathway-tab {
    padding: 0.6rem 0.75rem !important;
  }
  .pathway-tabs {
    padding-right: var(--sp-8) !important; /* trailing peek inset */
    scroll-padding-right: var(--sp-8) !important;
  }

  /* ==========================================================================
     (f) SUB-PAGES / MODALS — density layer for the member full-screen modals.
     mobile-shell.css already makes content modals full-screen flex columns with a
     sticky header, a scrolling .modal-body and a pinned footer (the "contract").
     This section only does the DENSITY pass INSIDE that contract: tight 8pt
     padding, full-width fields, a 44px control floor and no dead space. We do NOT
     re-declare position/inset/flex here so we never fight the shell contract.
     Covers: Edit Profile, Log Food, Goals, AI meal ideas/plan, prefs, session &
     assessment detail, injury/RPE — i.e. .modal-content + the bespoke variants.
     ====================================================================== */

  /* Header: tighter 8pt padding, keep it visually pinned (shell sets sticky). */
  .modal-content > .modal-header,
  .modal-header,
  .admin-modal-header,
  .meal-plan-builder-content .modal-header,
  .ai-meal-plan-content .modal-header,
  .meal-plan-detail-content .modal-header,
  .shopping-list-content .modal-header {
    padding: var(--sp-3) var(--edge-mobile) !important;   /* 12px / 16px */
  }
  /* Day-detail is a full-screen overlay that extends behind the status bar, so its header needs
     to clear the clock. env() reads ~0 for this overlay, so floor it with max(). */
  .ddp-header {
    padding: max(2.9rem, calc(env(safe-area-inset-top, 30px) + 0.5rem)) var(--edge-mobile) var(--sp-3) !important;   /* clear status bar */
  }
  .modal-header h2,
  .admin-modal-header h2,
  .ddp-title {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
  }

  /* Body: tight 8pt edge inset; no min/max-height (shell flexes it to fill). */
  .modal-content > .modal-body,
  .modal-body,
  .admin-modal-body,
  .ai-meal-plan-content .modal-body,
  .meal-plan-detail-content .modal-body,
  .shopping-list-content .modal-body,
  .ddp-body {
    padding: var(--sp-4) var(--edge-mobile) !important;   /* 16px all round */
  }
  /* Edit Profile reserved 2rem bottom pad (desktop) — the shell pins the submit
     button area anyway; trim the dead space on mobile. */
  #edit-profile-modal .modal-body { padding-bottom: var(--sp-4) !important; }

  /* Forms inside modals: stack tight, full-width controls, 44px tap floor. */
  .modal-body .form-group,
  .admin-modal-body .form-group,
  .ddp-body .form-group { margin-bottom: var(--sp-4) !important; }
  .modal-body .form-group label,
  .admin-modal-body .form-group label { margin-bottom: var(--sp-2) !important; }

  /* Every field spans the full sheet width — kills right-edge dead space. */
  .modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .modal-body select,
  .modal-body textarea,
  .admin-modal-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .admin-modal-body select,
  .admin-modal-body textarea,
  .ddp-body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .ddp-body select,
  .ddp-body textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    font-size: 16px !important;   /* stop iOS zoom-on-focus */
  }
  .modal-body textarea,
  .admin-modal-body textarea,
  .ddp-body textarea { min-height: 88px !important; }   /* 2x 44 — not a tall void */

  /* Paired fields (First/Last, Height/Weight) stay side-by-side, 8pt gap. */
  .modal-body .input-row,
  .admin-modal-body .input-row { gap: var(--sp-2) !important; }

  /* Buttons inside modals: 44px floor; primary/submit goes full-width, no float. */
  .modal-body .btn,
  .modal-footer .btn,
  .admin-modal-body .btn,
  .admin-modal-footer .btn,
  .ddp-body .btn,
  .modal-actions .btn { min-height: 44px !important; }
  .modal-body .btn.w-full,
  .modal-body form button[type="submit"],
  .modal-body .btn-primary,
  .admin-modal-body .btn-primary {
    width: 100% !important;
    margin-top: var(--sp-4) !important;
    margin-bottom: 0 !important;
  }

  /* Footers / action bars: tight 8pt, sit flush. Set top/side padding only so we
     do NOT clobber the shell's safe-area-aware padding-bottom on the pinned footer. */
  .modal-footer,
  .admin-modal-footer,
  .modal-actions {
    padding-top: var(--sp-3) !important;
    padding-left: var(--edge-mobile) !important;
    padding-right: var(--edge-mobile) !important;
    gap: var(--sp-2) !important;
  }

  /* AI meal ideas / plan + idea cards: snap padding + inter-card gaps to 8pt. */
  .ai-meal-plan-content .meal-plan-card,
  .ai-meal-plan-content .ai-meal-card,
  .meal-plan-detail-content .meal-block,
  .nut-idea-card {
    padding: var(--sp-3) !important;
    margin-bottom: var(--sp-2) !important;
  }

  /* Day-detail logger sections: trim the section paddings so the page reads dense. */
  .ddp-header { gap: var(--sp-3) !important; }
  .ddp-section,
  .ddp-log-group { margin-bottom: var(--sp-4) !important; }

  /* ==========================================================================
     (g) MEMBER FURTHER COMPRESSION — snap remaining sparse rows/cards to 8pt
     across dashboard / community / nutrition / progress / profile so nothing
     reads loose. These complement the (c) block above with the stragglers.
     ====================================================================== */

  /* PROFILE: stat rows + list rows were tall; pull to 8pt. */
  .profile-stat-card,
  .profile-section,
  .profile-list-item,
  .settings-row {
    padding: var(--sp-3) !important;
  }
  .profile-section { margin-bottom: var(--sp-4) !important; }
  .profile-stats-grid { gap: var(--sp-2) !important; }

  /* DASHBOARD: action cards + summary rows snap to 8pt. */
  .db-action-card,
  .db-summary-row,
  .db-stat-card { padding: var(--sp-3) !important; }
  .action-cards,
  .db-actions { gap: var(--sp-2) !important; }

  /* NUTRITION: food-log rows + macro summary tighten. */
  .nut-log-row,
  .nut-meal-row,
  .food-log-item { padding: var(--sp-2) var(--sp-3) !important; }
  .nut-summary,
  .nut-macro-summary { padding: var(--sp-3) !important; }

  /* COMMUNITY: channel rows + member rows tighten (chat density). */
  .dc-channel-item,
  .dc-member-row { padding: var(--sp-2) var(--sp-3) !important; }

  /* PROGRESS: list rows under the charts. */
  .pg-list-row,
  .pg-history-row { padding: var(--sp-2) var(--sp-3) !important; }

  /* ==========================================================================
     (h) VETERAN / STATUS BADGE — the renderer (militaryBadge) injects the full
     word ("Veteran" / "Serving" / "Reservist") into .mil-badge, but military.css
     sizes .mil-badge as an 18px circle anchored over the avatar (it was designed
     for a tiny SVG glyph). The text overflows the circle and overlaps the avatar.
     On mobile, demote it to a small inline gold tag that sits AFTER the avatar in
     the post header, clear of the image. Profile-header badge stays as-is.
     ====================================================================== */
  .pc-left .mil-badge,
  .post-card .mil-badge {
    position: static !important;     /* leave the avatar's bottom-right corner */
    right: auto !important;
    bottom: auto !important;
    width: auto !important;          /* size to the word, not an 18px circle */
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    margin: var(--sp-1) 0 0 !important;   /* sit just BELOW the avatar */
    padding: 0.05rem 0.35rem !important;
    border-radius: 999px !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.45 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
    background: rgba(200, 160, 60, 0.16) !important;   /* gold tint chip */
    color: var(--gold, #c8a03c) !important;
    border: 1px solid rgba(200, 160, 60, 0.45) !important;
  }
  /* .pc-left no longer needs to be the absolute anchor; let it size to the chip
     and column-stack the avatar + tag so they never overlap. */
  .post-card .pc-left {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ==========================================================================
     MODERATION REPORTS — single-column cards; action buttons stack full-width
     so each tap target is comfortable on a phone.
     ====================================================================== */
  .report-list {
    grid-template-columns: 1fr !important;
  }
  .report-actions {
    flex-direction: column !important;
  }
  .report-actions .report-action {
    width: 100% !important;
  }
  .report-label {
    min-width: 84px !important;
  }
}