/* The Catalog control (Ian, 2026-09-09). Theme tokens only, like every other redesign sheet,
   so dark / light / sakura all keep working.

   #searchScope is not deleted and not display:none. Three things need it in the document: the
   search pipeline reads STATE.searchScope, games.js injects and removes its own button inside
   this container on a lifecycle that re-runs on resize and on every feature-flag change, and
   the Inventory help tour rings this id on a step that is not optional. So the SEGMENT BUTTONS
   are what hide, and the container itself becomes the Catalog control's slot: same place in the
   toolbar, same id under the tour's ring, one visible control instead of two.

   This supersedes the [data-scope="games"] rule in redesign-inventory.css. Same declaration,
   wider selector, so leaving that one in place changes nothing either way. */

#searchScope {
  background: transparent; border: 0; border-radius: 0;
  overflow: visible;                 /* .seg clips, and the menu has to hang below the row */
  position: relative;                /* the menu anchors here, not at body level */
  gap: 8px; align-items: center;
}
#searchScope [data-scope] { display: none !important; }

/* Ids, not .btn: .seg button is (0,1,1) and would strip a .btn of its border and shrink it. */
#searchScope #btnCatalog,
#searchScope #exitCat {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--txt);
  padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 13px;
  transition: .15s;
}
#searchScope #btnCatalog:hover,
#searchScope #exitCat:hover { border-color: var(--accent); color: var(--accent); }
/* Open, or a catalog applied: either way the button is not resting. */
#searchScope #btnCatalog.on,
body.cat-on #searchScope #btnCatalog { border-color: var(--accent); color: var(--accent); }

/* The way back only exists while there is somewhere to come back from. */
#searchScope #exitCat { display: none; }
#searchScope #exitCat.on { display: inline-flex; }

#catMenu {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 210px; max-width: calc(100vw - 28px);
  background: var(--panel); border: 1px solid var(--line2); border-radius: 11px;
  box-shadow: 0 12px 30px #0006; overflow: hidden;
}
#catMenu.on { display: block; }
#catMenu .cat-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; background: transparent; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--txt);
}
#catMenu .cat-row + .cat-row { border-top: 1px solid var(--line); }
#catMenu .cat-row:hover { background: var(--panel2); color: var(--accent); }
#catMenu .cat-row .t { flex: 1; min-width: 0; }
#catMenu .cat-row .tick { color: var(--accent); visibility: hidden; }
#catMenu .cat-row.on .tick { visibility: visible; }

/* Catalog view (spec 5): the grid, the sort controls and no inventory actions. Adding a card by
   hand into a catalog you do not own is not a thing, so the button steps out while one is open.
   One line, and dropping it is how you get it back. */
body.cat-on #btnManual { display: none !important; }

/* Phone. The search box takes the whole first row at 390px, so Catalog opens from the left edge
   of the second one and left:0 cannot put the menu off screen. 44px is the touch target .seg
   button already asks for at this width. */
@media (max-width: 767px) {
  #searchScope { gap: 6px; }
  #searchScope #btnCatalog,
  #searchScope #exitCat { min-height: 44px; padding: 9px 12px; }
  #catMenu { min-width: min(230px, calc(100vw - 32px)); }
}

/* ---- Ledger Glass catalog tile (Ian 2026-09-22), markup in search/results/05-lgCatTileHTML.js ----
   The photo and its glass caption are the inventory tile's own classes; the only new parts are the
   wrapper the caption anchors to (so it sits on the photo, not over the buttons) and the button row
   under it, which keeps the standard tile's .acts look. */
.pcard.lg-card.lg-cat { display: flex; flex-direction: column; }
.lg-cat .lg-catph { position: relative; }
.lg-cat .lg-ph { aspect-ratio: 63 / 88; height: auto; background: #10141e; }
.lg-cat .lg-ph img { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.lg-cat .lg-ph img.fit-contain { object-fit: contain; }
.lg-cat .lg-cattag { font-size: 10px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.lg-cat .stock-line { font-size: 11px; color: #aab2c5; margin-top: 1px; }
.lg-cat .acts { padding: 8px; margin-top: 0; }