/* ============================================================================
   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; }

  /* --- Mobile search/filter bar SHRINK (Mo): the search input was a fixed 44px
     and the filter fab was bumped to 40px - the two biggest offenders eating
     vertical space on phones. Tighten them plus the row that hosts them and
     the quick-filter subrow's Clear All button. Desktop untouched (all inside
     this <=768px block). */
  .search-input { height: 36px !important; padding-top: 0; padding-bottom: 0; font-size: 13px; }
  .search-clear { width: 22px !important; height: 22px !important; }
  .weapon-filter-title-row { padding: 6px 8px; gap: 6px; }
  .d2gl-fab { width: 32px !important; height: 32px !important; }
  .clear-all-top { padding: 4px 9px; font-size: 10px; min-height: 26px; }
  /* Keep the search icon vertically centred at the new 36px input height. */
  .search-icon { top: 50%; transform: translateY(-50%); }

  .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 removed — the Ask button lives in the top strip now) */

  /* --- 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 -------------------------------------------------------- */
  /* (Issue 5) Top padding was leaving a dark empty band between the 44px header
     and the content. Pull it in tight so content sits just under the header.
     !important covers the per-page padding-top overrides (guardian/vendors/
     compact-density) in 02-refinements-3 that otherwise reopened the gap. */
  .main { padding: 8px 8px 44px !important; }
  /* 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;
    /* Keep the inspect at least one viewport tall during the innerHTML swap so the
       document can't collapse shorter (which would clamp scrollTo to the top), and
       disable scroll-anchoring so mobile Chrome doesn't nudge scrollY when the
       above-viewport picker subtree is replaced. */
    min-height: 100vh;
    overflow-anchor: none;
  }
  .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 (owner, Wave 11): DROP the "D2 Gun Locker"
     wordmark + crumb — they got overlaid by the injected search handle — and show
     just the hexagon logo mark top-left. .logo stays in the DOM (only its inner
     text nodes are hidden) so the 12-patches '.logo' click target still matches →
     tapping the mark opens the landing page (Wave 14). */
  .logo-text, .logo-sub { display: none !important; }
  .logo {
    flex: 0 0 auto; width: 30px; height: 30px; min-width: 0;
    align-items: center; justify-content: center; cursor: pointer;
  }
  .logo::before {
    content: ""; display: block; width: 26px; height: 26px;
    background: no-repeat center / contain
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none"><rect x="2" y="2" width="36" height="36" rx="8" stroke="%238890a8" stroke-width="1.5"/><path d="M12 14L20 10L28 14V22L20 30L12 22V14Z" stroke="%23e8eaf0" stroke-width="1.5"/><circle cx="20" cy="19" r="4" stroke="%238890a8" stroke-width="1.2"/><line x1="20" y1="15" x2="20" y2="10" stroke="%235a6380" stroke-width="1"/><line x1="20" y1="23" x2="20" y2="30" stroke="%235a6380" stroke-width="1"/></svg>');
  }
  .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; }
  /* Quick-filter toggles: keep them compact on mobile (they were oversized and ate
     the screen). Small but still tappable. */
  .d2gl-qf-box { padding: 3px 6px !important; gap: 4px !important; }
  .d2gl-qf-label { font-size: 9px !important; }
  .d2gl-qf-opt { padding: 4px 7px !important; font-size: 10px !important; }
  .d2gl-qf-opt.d2gl-qf-icon { padding: 3px 6px !important; }
  .d2gl-qf-opt .weapon-name-elem-img { width: 15px !important; height: 15px !important; }
  .d2gl-qf-opt[data-qf-key="ammo"] .weapon-ammo-icon svg { width: 21px !important; height: 16px !important; }
  .d2gl-qf-select { padding: 4px 6px !important; font-size: 10px !important; max-width: 120px !important; }
  /* .d2gl-fab size lives in the SHRINK block above (32px) - this used to bump it to
     40px, which is exactly the oversized offender that block fixes. Do not re-add a
     conflicting size rule here. */
  .build-btn { min-height: 38px; }
  /* .clear-all-top min-height lives in the SHRINK block above (26px) - keep it out of
     this combined selector so it isn't bumped back up to 32px. */
  .clear-filter-btn { 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;
  }
}

/* ============================================================================
   MOBILE PASS 4 — sticky-panel scroll-under, denser cards, forced grid. <=768px
   ============================================================================ */
@media (max-width: 768px) {
  /* --- (Issue 1) SCROLL-UNDER: the sticky filter panel's title row was
     effectively transparent (rgba white .015), so weapon/armor cards showed
     THROUGH the search bar / Clear All / funnel as the list scrolled beneath
     it. Give the whole sticky panel — and the title row specifically — an
     OPAQUE background so nothing is ever visible behind the search bar. The
     title row also hosts the wrapped quick-filter row (Issue 2), so the opaque
     fill covers that too. Both the weapons and armor panels. */
  #weaponFilterPanel,
  #armorFilterPanel {
    background: var(--bg-primary) !important;
  }
  #weaponFilterPanel .weapon-filter-panel,
  #armorFilterPanel .weapon-filter-panel,
  #armorFilterPanel .armor-filter-panel {
    background: var(--bg-primary) !important;
  }
  #weaponFilterPanel .weapon-filter-title-row,
  #armorFilterPanel .weapon-filter-title-row,
  #armorFilterPanel .armor-filter-title-row {
    background: var(--bg-primary) !important;
  }

  /* --- STICKY SEARCH/FILTERS: pin cleanly under the header, no float/jump ----
     The desktop pinned-pane path (@min-width:841px) does not run on phones, so
     the panel rides the DOCUMENT scroll. It must stick flush at the header's
     bottom edge and STAY there. Two things caused the "float over cards then
     jump":
       1) top offset — the CSS fallback (--strip-h + 12 = 64px) overshot the
          ~52px mobile header, so cards peeked through the ~12px gap above the
          bar. Pin top to the live header edge (JS keeps --sticky-filter-top in
          sync with the real header height; 52px is the pre-JS fallback).
       2) stacking — give the sticky panel its OWN stacking context + a solid
          z-index so a scrolling card can never repaint on top of it. */
  #weaponFilterPanel,
  #armorFilterPanel {
    position: sticky !important;
    top: var(--sticky-filter-top, 52px) !important;
    z-index: 90 !important;
    isolation: isolate !important;
    margin-top: 0 !important;
  }
  /* Kill the fab expand/collapse scale animation on phones: a transform on a
     sticky element re-establishes its containing block and reads as a "float"
     off the top edge for the animation's duration. */
  #weaponFilterPanel.d2gl-anim .weapon-filter-panel,
  #armorFilterPanel.d2gl-anim .weapon-filter-panel,
  #armorFilterPanel.d2gl-anim .armor-filter-panel,
  #weaponFilterPanel.d2gl-closing .weapon-filter-panel,
  #armorFilterPanel.d2gl-closing .weapon-filter-panel,
  #armorFilterPanel.d2gl-closing .armor-filter-panel {
    animation: none !important;
    transform: none !important;
  }

  /* --- (Issue 4) FORCE GRID: the list-view CSS (keyed on
     [data-weapon-view="list"]) must never apply on a phone. 49-quick-filters
     also re-asserts the grid attribute in JS, but neutralise the list rules in
     CSS too so there's no flash of the flat .wlr row before JS runs: re-show
     the normal card body and hide the list row. */
  .app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card {
    display: block !important;
  }
  .app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .card-top,
  .app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .card-action-btns,
  .app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .weapon-season {
    display: flex !important;
  }
  .app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card > .weapon-season {
    display: block !important;
  }
  .app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-card .wlr {
    display: none !important;
  }

  /* --- (Issue 3) DENSER CARDS: mobile cards were ~150px tall with oversized
     text — only a few fit per screen. Shrink the icon (~46px), tighten padding
     and the type scale so ~1.5-2x more cards fit. Applies in grid view (the
     only mobile view now). The save/compare buttons keep their >=30px targets
     (unchanged), so both stay tappable. WEAPON CARDS: */
  .app-layout .weapon-card .card-top {
    padding: 7px 9px !important;
    gap: 9px !important;
  }
  .app-layout .weapon-card .weapon-icon {
    width: 46px !important;
    height: 46px !important;
  }
  .app-layout .weapon-card .weapon-name {
    font-size: var(--fs-sm) !important;
  }
  .app-layout .weapon-card .weapon-type {
    font-size: var(--fs-xs) !important;
  }
  .app-layout .weapon-card .weapon-badges {
    gap: 3px !important;
  }
  .app-layout .weapon-card .weapon-archetype-badge,
  .app-layout .weapon-card .weapon-source,
  .app-layout .weapon-card .weapon-season {
    font-size: 9px !important;
  }
  /* keep the action buttons a comfortable touch size but not oversized */
  .app-layout .weapon-card .d2gl-save-btn,
  .app-layout .weapon-card .card-compare-btn {
    width: 30px !important;
    height: 30px !important;
  }

  /* ARMOR CARDS: same density pass — smaller icon + tighter meta. */
  #armorGrid .armor-card-top {
    padding: 7px 9px !important;
    gap: 9px !important;
  }
  #armorGrid .armor-card { min-height: 0 !important; }
  #armorGrid .armor-db-icon {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
  }
  #armorGrid .armor-db-name {
    font-size: var(--fs-sm) !important;
  }
  #armorGrid .armor-db-meta {
    font-size: 10px !important;
  }
  #armorGrid .armor-card .d2gl-save-btn {
    width: 30px !important;
    height: 30px !important;
  }
}

/* ============================================================================
   MOBILE PASS 5 — collapsible search/filter bar (Mo, folded into
   05-ui-panels.js). A small always-visible magnifier handle in the header
   toggles the ENTIRE search+filter block (title row + quick-filter subrow)
   out of view on phones; state persists via the 'd2glSearchbarCollapsed'
   localStorage key (05-ui-panels.js). Desktop is untouched — the handle only
   shows, and the collapsed class only hides anything, inside this <=768px
   block.
   ============================================================================ */
/* JS creates the handle unconditionally (it's cheap + idempotent, same as the
   other .header-inner injections in this codebase) - keep it hidden outside
   the mobile breakpoint by default so desktop never sees it. */
.d2gl-searchbar-handle { display: none; }
@media (max-width: 768px) {
  .d2gl-searchbar-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-dim, #2a2f3a);
    border-radius: 8px;
    background: var(--bg-card, #161a22);
    color: var(--text-secondary, #c2c7d6);
    cursor: pointer;
  }
  .d2gl-searchbar-handle:hover { color: var(--text-primary, #e8eaf0); border-color: var(--border-bright, #3a4250); }
  .d2gl-searchbar-handle.d2gl-searchbar-handle-active {
    color: var(--text-primary, #e8eaf0);
    border-color: rgba(var(--accent-rgb, 104, 227, 148), .75);
    background: rgba(var(--accent-rgb, 104, 227, 148), .14);
  }

  /* Collapsed: hide the title row (search box + fab + Clear All) and the
     quick-filter subrow, on both the weapon and armor panels. Only the
     sticky panel container itself (and its opaque background from PASS 4)
     stays, so the list beneath doesn't jump. The live .search-container node
     is never destroyed — it just sits inside a display:none row. */
  #weaponFilterPanel.d2gl-searchbar-collapsed .weapon-filter-title-row,
  #weaponFilterPanel.d2gl-searchbar-collapsed #d2glQuickBar,
  #armorFilterPanel.d2gl-searchbar-collapsed .weapon-filter-title-row,
  #armorFilterPanel.d2gl-searchbar-collapsed .armor-filter-title-row {
    display: none !important;
  }
}