/* ============================================================================
   D2 GUN LOCKER  -  04-mobile.css : mobile-only layout (<= 768px)
   ----------------------------------------------------------------------------
   Desktop is untouched - every rule is scoped to the breakpoint except the
   search filter-suggestion dropdown (used on all viewports by
   28-search-filters.js).

   - Shell: the desktop left rail collapses to a slim fixed BOTTOM bar
     (same buttons, same routing); the top strip stays as a one-line header.
   - Filter panel: roughly ONE full filter group per screen width; swipe
     horizontally between groups (the grid already scroll-snaps), and each
     group's option list scrolls vertically inside itself. The letter-square
     compact mode is suppressed at the source (01k) on mobile.
   - Reachability: the weapon/armor result lists are height-capped with their
     own scroll, so the right-side window (build/detail) sits just below
     instead of after the entire list.
   ============================================================================ */

/* (List-length drag handle removed with 30-list-resize.js — heights are fixed by CSS.) */

/* Armor Picker rank-row grip (31-ap-touch-drag.js): touch-action none is what
   lets a touch drag start from the grip instead of scrolling the page. The
   floating ghost is the dragged row's clone following the finger. */
.ap-grip { touch-action: none; }
.ap-touch-ghost {
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  border-radius: 8px;
  background: var(--bg-card-hover);
}

/* Search filter suggestions (28-search-filters.js) - all viewports. */
.search-filter-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 600;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.5);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 290px;
  overflow-y: auto;
}
.search-filter-suggest[hidden] { display: none; }
.sfs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-dim);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.sfs-row:hover { background: var(--bg-card-hover); border-color: var(--border-bright); }
.sfs-row.active { border-color: var(--border-bright); background: var(--bg-card-hover); }
.sfs-row.active .sfs-value::before { content: '\2713\00a0'; color: var(--text-secondary); }
.sfs-group {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sfs-head {
  padding: 4px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 768px) {
  /* --- Shell: rail becomes a slim fixed bottom bar ------------------------
     backdrop-filter: blur on a sticky header forces a blur repaint on every
     scroll frame - one of the biggest mobile jank sources. Solid background
     is visually near-identical over the dark app and costs nothing. */
  body {
    padding-left: 0;
    padding-bottom: calc(var(--rail-mobile-h) + env(safe-area-inset-bottom, 0px));
  }
  .header { padding: 4px 10px; min-height: 44px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-primary); }
  .header-inner { display: flex; align-items: center; gap: 8px; }
  .search-input { width: 100%; padding-top: 7px; padding-bottom: 7px; }
  .stats-bar { display: none; }
  .ui-scale-controls { display: none !important; }

  .rail {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: calc(var(--rail-mobile-h) + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    border-right: 0; border-top: 1px solid var(--hairline);
    background: var(--bg-primary);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .rail-logo { display: none; } /* the mark yields its space to the nav on phones */
  .rail .filters {
    flex-direction: row; align-items: stretch; justify-content: space-around;
    flex: 1 1 auto; gap: 0; padding: 0 2px;
  }
  .rail .page-nav-btn { flex: 1 1 0; height: auto; margin: 6px 2px; min-width: 0; }
  .rail .page-nav-btn[data-page-fixed="settings"] { margin-top: 6px; } /* cancel desktop bottom-pin */
  /* active marker moves to the bar's top edge */
  .rail .page-nav-btn.active::before {
    left: 25%; right: 25%; top: -7px; bottom: auto;
    width: auto; height: 2px;
  }
  /* no hover on touch - suppress the tooltip labels */
  .rail .page-nav-btn .nav-label { display: none; }
  /* (terminal overlay mobile offsets live in 05-terminal.css - it loads later) */

  /* assistant hub rides above the bottom bar */
  #d2aHub.d2a-hub { bottom: calc(var(--rail-mobile-h) + env(safe-area-inset-bottom, 0px) + 12px) !important; }

  /* --- Filter panel: one group per screen, lists intact ------------------ */
  .weapon-filter-grid { grid-auto-columns: min(86vw, 330px) !important; }
  /* The armor page panel is sized by an ID-specificity rule
     (#armorFilterPanel .weapon-filter-grid { grid-auto-columns: calc((100% - 32px)/5) !important })
     which beats any class-only override regardless of load order - this is why the
     armor filters stayed crushed while weapons were fixed. Match the selector. */
  #armorFilterPanel .weapon-filter-grid { grid-auto-columns: min(86vw, 330px) !important; }
  .weapon-filter-group { min-width: 0 !important; }
  .weapon-filter-options { max-height: 180px; }

  /* --- Reachable right side: cap result lists, scroll inside -------------
     ID variants included so no armor-side ID rule can ever out-rank the cap. */
  .weapon-grid,
  .armor-grid,
  #armorGrid {
    max-height: var(--mob-list-h, 58vh);
    overflow-y: auto;
    padding-right: 2px;
  }

  /* --- Armor page: stack like the weapons page ---------------------------
     A desktop rule (02-refinements-1) forces the armor layout to THREE
     side-by-side columns with !important, which silently overrides the
     existing <=840px "stack to one column" media rule (no !important) -
     so on phones the armor page stayed a squashed desktop split while
     weapons stacked. Re-assert the stack here (same specificity, later
     sheet wins), and hide the split-pane drag dividers, which are
     meaningless in a stacked layout. */
  .armor-db-layout { grid-template-columns: 1fr !important; }
  .armor-db-layout > .layout-resizer,
  .app-layout > .layout-resizer { display: none !important; }

  /* --- Weapon inspect / crafter fit -------------------------------------- */
  .dc-header { max-width: 100%; padding: 16px 14px 0; }
  .dc-title { font-size: 22px; }
  .dc-description { max-width: 100%; padding: 8px 14px 0; }
  .dc-left { width: 100%; max-width: none; }

  /* --- Armor Picker: thumb-sized grip for the touch drag ------------------ */
  .ap-applied-row .ap-grip { padding: 10px 8px; margin: -10px -4px -10px -8px; }

  /* --- General fit -------------------------------------------------------- */
  .main { padding: 10px 8px 44px; }
  /* Footer disclaimer is position:fixed bottom-right; on mobile its wrapped
     height was covering the bottom rows of the grid. Shrink it hard. */
  #siteDisclaimer {
    font-size: 7px !important;
    line-height: 1.12 !important;
    padding: 1px 6px !important;
    max-width: min(260px, 58vw) !important;
    /* sit above the fixed bottom nav bar */
    bottom: calc(var(--rail-mobile-h) + env(safe-area-inset-bottom, 0px) + 3px) !important;
    right: 5px !important;
    opacity: .45 !important;
  }
}

/* ============================================================================
   (Issue 1) <=750px INSPECT: remove the two dark backgrounds behind the inspect
   (the build-window panel fill + the bar behind the top buttons) and let the
   document scroll instead of a trapped inner box, so the whole inspect scrolls
   (not just along the edges).
   ============================================================================ */
@media (max-width: 750px) {
  #buildWindowPanel.build-window {
    background: transparent !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  #buildWindowPanel.build-window::before { display: none !important; }
  #buildContent,
  #buildWindowPanel .build-content {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  /* The inspect container itself carries a dark gradient + border + shadow
     (.destiny-crafter @ 01-core-4:643) - that semi-transparent gradient is the
     "background behind the stats". Strip it (and the graph cards) so nothing is
     layered over the page's own background. */
  .destiny-crafter {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .destiny-crafter .stats-card,
  .destiny-crafter .dc-range-graph,
  .destiny-crafter .dc-time-graph,
  .destiny-crafter .dc-mode-cones {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* (The old <=1100px hamburger-collapse block is gone: the fixed left rail
   never wraps, so the strip stays one row at every desktop width.) */

/* (scrl3) 751-840px inspect/detail SCROLL GAP fix.
   >=841px the page is pinned and the build/detail window gets its OWN definite-height
   scroller (.build-content / .armor-detail-content via flex:1 + overflow:auto).
   <=750px the window flows into the document (and its bg is stripped transparent).
   BETWEEN those two bands, 02-refinements-3 set the window to height:auto but the inner
   content stayed flex:1 / overflow:auto / min-height:0 - and a flex:1 child has NO
   definite height to scroll inside an auto-height column, so it collapsed to ~0 and the
   panel clipped its content with no usable scrollbar (you couldn't scroll at all).
   Here the window keeps its card background, so we can't let content spill (it would sit
   outside the card like <=750 does) - instead make the content FLOW (flex:0 0 auto +
   height:auto) so the card grows to contain it and the whole thing rides the document
   scroll (body is overflow-y:scroll). Covers the weapon Inspect and the armor detail. */
@media (min-width: 751px) and (max-width: 840px) {
  #buildWindowPanel.build-window,
  .build-window#buildWindowPanel,
  #armorDetailPanel.armor-detail-window,
  .armor-detail-window#armorDetailPanel {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
  #buildContent,
  #buildWindowPanel .build-content,
  #armorDetailPanel .armor-detail-content {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ============================================================================
   MOBILE PASS 2 (audit fixes) — <=768px
   ============================================================================ */
@media (max-width: 768px) {
  /* --- ARMOR detail on a phone: the desktop 3-track split (min 529px) was
     kept by a higher-priority refinements rule; stack it and give the detail
     the full width. The list hides while a piece is open (same pattern as
     weapons; close X returns to the list). */
  .armor-db-layout[data-detail="open"] { grid-template-columns: 1fr !important; }
  .armor-db-layout[data-detail="open"] > .armor-list-panel { display: none !important; }
  /* Armor detail must FLOW (no trapped inner scroller) — same fix the 751-840
     band already had ('scrl3'), extended to phones. */
  #armorDetailPanel.armor-detail-window,
  .armor-detail-window#armorDetailPanel {
    position: relative !important; top: auto !important;
    overflow: visible !important; height: auto !important; max-height: none !important;
  }
  #armorDetailPanel .armor-detail-content {
    flex: 0 0 auto !important; min-height: 0 !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
  }

  /* --- The inspect close X: the only way back to the list — give it a real
     touch target. */
  .build-close-x { width: 42px !important; height: 42px !important; font-size: 22px !important; }

  /* --- Top strip on small phones: let the wordmark shrink instead of pushing
     the search off-screen. */
  .logo { flex-shrink: 1; min-width: 0; }
  .logo-text { white-space: nowrap; }
  .logo-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .search-container { min-width: 120px; }

  /* --- Touch targets: lift the smallest interactive elements toward 40px. */
  .weapon-filter-chip { min-height: 34px; padding-top: 7px !important; padding-bottom: 7px !important; }
  .d2gl-qf-opt { padding: 8px 10px !important; }
  .d2gl-qf-select { padding: 8px 8px !important; }
  .d2gl-fab { width: 40px !important; height: 40px !important; }
  .build-btn { min-height: 38px; }
  .clear-filter-btn, .clear-all-top { min-height: 32px; }

  /* --- Weapons/armor filter panel: cap it and scroll inside so an expanded
     panel can't pin over the entire page. */
  #weaponFilterPanel .weapon-filter-panel,
  #armorFilterPanel .weapon-filter-panel,
  #armorFilterPanel .armor-filter-panel { max-height: 68vh; overflow-y: auto !important; }

  /* --- Armor Picker: kill the nested per-section scroll traps; the page is
     the one scroller on touch. */
  .ap-main-top section { max-height: none !important; overflow: visible !important; }

  /* --- Legalese: 7px was illegible; keep it small but readable. */
  #siteDisclaimer { font-size: 9px !important; opacity: .6 !important; }
}

/* ============================================================================
   MOBILE PASS 3 — list height (Mo): while BROWSING, the page itself is the
   scroller — no artificial 58vh cap, so a tall phone screen is fully used and
   there is never dead space under the list. The cap only returns while a
   weapon is open in the 601-768 stacked band (list + inspect share the screen,
   so the list must stay short). Armor never needs it: opening a piece hides
   the armor list entirely on phones.
   ============================================================================ */
@media (max-width: 768px) {
  .app-layout:not([data-detail="open"]) .weapon-grid,
  .armor-db-layout:not([data-detail="open"]) .armor-grid,
  .armor-db-layout:not([data-detail="open"]) #armorGrid,
  .armor-db-layout .armor-grid,
  .armor-db-layout #armorGrid {
    max-height: none;
    overflow-y: visible;
  }
}