/**
 * LifeOS — Mobile-only overrides
 *
 * All rules here are gated to ≤900px so desktop is untouched. Imported once
 * from app.html, AFTER css/app.css so these rules win the cascade.
 *
 * Sections (matches the 2026-04-27 mobile UI plan):
 *   1. Bottom tab bar gap fix
 *   2. Page width consistency (per-module card audit)
 *   3. Modal horizontal-scroll lock
 *   4. Tasks tab — hide cycle banner
 *   5. Communications — hide AI search row
 *   6. Task tile 3-row layout (chips need row-* classes from JS)
 *   7. Tab variants (the .tabs-mobile-* selectors are populated by js/mobile-tabs.js)
 */

@media (max-width: 900px) {

  /* ───── 1. Bottom tab bar gap fix ──────────────────────────────────────
     Two problems on iPhone X+ devices:
     (a) Pacific theme's gradient fades from --surface → --bg, blending the
         bar's bottom into the page bg — reads as "a strip of empty space
         under the bar". Force solid surface.
     (b) Buttons centered in a 60+safe-area=94px bar with full safe-area
         padding-bottom sit ~50px above the screen edge — Michael perceives
         the bar as elevated. Push buttons to the bottom of the content
         area and shrink the safe-area padding so they hug the device edge. */
  .bottom-tab-bar {
    background: var(--surface) !important;
    /* Flush to device bottom. Background extends THROUGH the safe-area
       zone so no page-bg strip shows. Padding-bottom is HALF the safe-area
       (instead of full) so buttons sit lower in the bar — closer to the
       home-indicator zone — while still leaving a small clearance so the
       indicator doesn't visually collide with button labels. */
    bottom: 0 !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) / 2) 0 !important;
    align-items: flex-end !important;
  }
  .bottom-tab {
    padding: 4px 0 !important;
    min-height: 0 !important;
    height: 56px !important;
    justify-content: center !important;
  }
  /* Reserve scroll-room above the bar (60pt) AND under the bar (safe-area)
     so the last tile clears the bar with a tiny gap. */
  .content-area { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ───── 2. Page width — force tiles edge-to-edge to match dashboard ────
     Pin .page-layout horizontal padding to 8px (was 16px) AND override every
     module's tile/card padding so the gutter you see between the device
     edge and the tile content is consistent across pages. !important is
     necessary because Pacific theme + module-specific selectors stack
     several padding declarations. */
  .page-layout {
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: hidden;
  }
  .page-layout > *,
  .page-layout .project-row,
  .page-layout .projects-list,
  .page-layout .task-item,
  .page-layout .list-row,
  .page-layout .fin-budget-card,
  .page-layout .fin-account-row,
  .page-layout .fin-plaid-item,
  .page-layout .txn-row,
  .page-layout .goal-card,
  .page-layout .knowledge-card,
  .page-layout .orbit-card,
  .page-layout .checkin-card,
  .page-layout #tasks-list,
  .page-layout #goals-list,
  .page-layout #knowledge-list,
  .page-layout .comm-row,
  .page-layout .relationship-card,
  .page-layout .habit-row {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ───── 3. Modals: lock to vertical scrolling ──────────────────────────
     .modal-body had no overflow-x, so wide form-rows or unbreakable strings
     could create horizontal scroll on mobile. Also collapse 2-col form-rows
     inside modals (the global form-row collapse rule only applies outside
     modal context). */
  .modal-body { overflow-x: hidden; }
  .modal-body .form-row { grid-template-columns: 1fr; }

  /* ───── 4. Tasks tab — hide top tile + filter row + quick-add ──────────
     The "top tile" Michael flagged is the entire filter cluster above the
     task list — project filter chips, 80/20 toggle, Charging/Draining,
     Any-context dropdown, Save view button — plus the Quick-add input row
     and the next-action banner. Hide all of them on mobile. .cycle-banner
     is also hidden (older banner that occasionally appears at the top). */
  .cycle-banner,
  .tasks-toolbar,
  .quick-add-row,
  .next-action-bar { display: none !important; }

  /* Suppress horizontal overflow on every page wrapper so a too-wide
     descendant can never push the viewport off-axis. */
  .page-layout { overflow-x: hidden; }

  /* ───── 5. Communications hide-AI-search-row migrated to
     css/communications.mobile.css on 2026-05-09 per
     docs/ui-platform-convention.md (per-area migration). The dead
     `#comm-ai-search-row` id selector was dropped during migration — no
     such element exists; the input id is `#comm-ai-search`. ───── */

  /* ───── 6. Density-v2 mobile card layout (UI redesign 2026-05-07) ──────
     Replaces the prior fragile `display:contents` chain (deleted) and the
     12-col `row-*` grid that depended on JS-sprinkled grid-cell classes.

     New layout per iteration-2 mockup (spec source: research task
     7_Fwgy2mTLfsLZFqVJj0h, ui_reviewer iteration-3):

       Task card:                            Project card:
       ┌──────────────────────────────┐    ┌──────────────────────────────┐
       │ ○  Task title             P1·L9│    │ Project title                 │
       │       (compact line) due, etc.│    │   → gold next-action          │
       │ [▶ Focus][📅 Sched][⋯ More] │    │ [chip] [chip]                  │
       └──────────────────────────────┘    │ ───── review-due band ─────── │
                                            └──────────────────────────────┘

     Tap-to-complete check restored at 32px (was hidden as display:none — bug).
     All other chips (project, status, context, estimate, blocked, waiting,
     deferred) move to the detail modal — handled by JS, see productivity_specialist. */

  /* Hide ONLY the round colored .list-row-icon (decorative). The .task-check
     visibility is governed by productivity_specialist JS — do NOT hide it
     in CSS. Restoring tap-to-complete is the explicit goal of this rebuild. */
  .task-item.list-row .list-row-icon { display: none !important; }

  /* Density-v2 task card. Targets the new grid class emitted by
     renderTaskItemV2 (.list-row-grid-tasks). Falls back gracefully on
     pre-redesign rows that lack the class — they keep flex layout. */
  .task-item.list-row.list-row-grid-tasks {
    display: block !important;
    grid-template-columns: none !important;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    min-height: 0;
    /* Energy stripe ::before stays anchored to the rounded card edge. */
    position: relative;
    overflow: hidden;
  }
  .task-item.list-row.list-row-grid-tasks .list-row-main {
    display: block !important;
    width: 100%;
  }
  .task-item.list-row.list-row-grid-tasks .list-row-value {
    display: block !important;
    text-align: left;
    margin-top: var(--sp-2);
  }
  /* 32px tap target for the check — standard accessibility minimum. */
  .task-item.list-row.list-row-grid-tasks .task-check {
    display: inline-flex !important;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin-right: var(--sp-2);
    flex-shrink: 0;
  }
  .task-item.list-row.list-row-grid-tasks .list-row-title {
    display: inline;
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: normal;
  }
  /* Compact line under the title — P1·L9 + due. */
  .task-item.list-row.list-row-grid-tasks .task-pl-badge,
  .task-item.list-row.list-row-grid-tasks .row-due,
  .task-item.list-row.list-row-grid-tasks .list-row-meta-right {
    display: inline-flex !important;
  }
  /* Full-width 3-button action strip. productivity_specialist emits
     .task-item-actions with three buttons (Focus / Schedule / More). */
  .task-item.list-row.list-row-grid-tasks .task-item-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    width: 100%;
  }
  .task-item.list-row.list-row-grid-tasks .task-item-actions > button,
  .task-item.list-row.list-row-grid-tasks .task-item-actions > .btn,
  .task-item.list-row.list-row-grid-tasks .task-item-actions > .btn-icon {
    width: 100%;
    min-height: 40px;
    padding: var(--sp-2) var(--sp-3);
    justify-content: center;
  }
  /* Reveal the top-level Schedule button (hidden by default on desktop). */
  .task-item.list-row.list-row-grid-tasks .task-item-actions .task-action-schedule {
    display: inline-flex;
  }
  /* Hide chips that the spec says move to the detail modal on mobile.
     Keep only: title, P1·L9 badge, due text, action buttons, check. */
  .task-item.list-row.list-row-grid-tasks .list-row-meta-chips,
  .task-item.list-row.list-row-grid-tasks .list-row-overflow-chips,
  .task-item.list-row.list-row-grid-tasks .status-pill,
  .task-item.list-row.list-row-grid-tasks [class*="status-pill-"],
  .task-item.list-row.list-row-grid-tasks .energy-badge,
  .task-item.list-row.list-row-grid-tasks .leverage-badge {
    display: none !important;
  }

  /* Density-v2 project card. */
  .project-row.list-row.list-row-grid-projects {
    display: block !important;
    grid-template-columns: none !important;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    min-height: 0;
    position: relative;
  }
  .project-row.list-row.list-row-grid-projects .list-row-icon {
    /* Project icon is informational — keep it inline at card top. */
    display: inline-flex !important;
    width: 28px;
    height: 28px;
    margin-right: var(--sp-2);
    vertical-align: middle;
  }
  .project-row.list-row.list-row-grid-projects .list-row-main {
    display: block !important;
    width: 100%;
  }
  /* Right-meta becomes a horizontal strip below the chips on mobile. */
  .project-row.list-row.list-row-grid-projects .project-row-right-meta {
    display: flex !important;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    flex-wrap: wrap;
  }
  /* Review-due band — full-width on mobile so it reads as a section divider. */
  .project-row.list-row.list-row-grid-projects .project-row-review-due-tag {
    display: block;
    width: 100%;
    margin-top: var(--sp-2);
    text-align: center;
    clip-path: none;            /* drop the triangle on mobile — full band */
    border-radius: 6px;
    padding: var(--sp-2) var(--sp-3);
  }

  /* Dashboard side-by-side pairs collapse to single column on mobile.
     The Household Summary uses an auto-fit grid that already responds. */
  .fin-trend-pair, .fin-bottom-pair { grid-template-columns: 1fr !important; }

  /* ───── 7. Tab variants (Phase 5 — switcher in Settings → Mobile UI Lab) */
  /* grid: wrap to 2 rows when overflow */
  .tabs.tabs-mobile-grid {
    flex-wrap: wrap;
    overflow: visible !important;
    gap: var(--sp-2);
  }
  .tabs.tabs-mobile-grid .tab {
    flex: 0 1 auto;
    min-width: calc(33.333% - var(--sp-2));
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }
  /* dropdown: replaces tab buttons with a single select */
  .tabs.tabs-mobile-dropdown { padding: 0; overflow: visible !important; }
  .tabs.tabs-mobile-dropdown .tab { display: none !important; }
  .tabs-mobile-dropdown-select {
    display: block;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 8px);
    color: var(--text);
    font-size: var(--fs-base);
    min-height: 44px;
  }
  /* top3-more: first 3 visible, rest hidden behind a "More" button */
  .tabs.tabs-mobile-top3 { flex-wrap: nowrap; overflow: visible !important; }
  .tabs.tabs-mobile-top3 .tab.tab-overflow-hidden { display: none !important; }
  .tabs-mobile-more-btn {
    flex: 0 0 auto;
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    min-height: 44px;
  }
  .tabs-mobile-more-menu {
    position: absolute;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md, 8px);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    padding: var(--sp-2);
    z-index: 200;
    min-width: 160px;
  }
  .tabs-mobile-more-menu .tab {
    display: block !important;
    width: 100%;
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--text);
  }
  .tabs-mobile-more-menu .tab.active {
    background: var(--accent-dim);
    color: var(--accent);
  }
}