/* Items (inventory/gallery.html): the filter bar (search, game, in stock, sort), the count line, the grid of item
   cards and the pager. Compact, so hundreds of items read at a glance: a card is a square picture box (fixed aspect
   ratio, so nothing shifts while pictures load) with the variant badges on it, then the name, the rarity and the
   stock count. Badges and rarity
   tags are app.css's .vmark and .rarity; tokens come from app.css. Nothing moves under the pointer: the hover only
   lifts the border and the surface. */

/* ── the filter bar ── */
.galbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-grad); box-shadow: var(--shadow); min-width: 0; }
.galbar__search { display: flex; align-items: center; gap: 8px; height: 36px; flex: 1 1 240px; max-width: 380px; min-width: 0; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); color: var(--ink-3); transition: border-color .12s, box-shadow .12s; }
.galbar__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.galbar__search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--ink); font-size: 13px; }
.galbar__search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .6; }
.galbar > .selchips { flex: none; }
.galbar__strip { display: flex; min-width: 0; }

/* ── the count line under it ── */
.galmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 0 4px; font-size: 12px; color: var(--ink-3); }
.page > .galmeta { margin-top: 12px; }
.galmeta strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.galmeta__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); flex: none; }
.galmeta__clear { margin-left: auto; font-weight: 500; }

/* ── the grid ── */
.galgrid { --card-min: 118px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 8px; }
.page > .galgrid { margin-top: 12px; }
.galgrid__cell { min-width: 0; display: flex; }

/* ── a card ── */
.icard { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-grad); box-shadow: var(--shadow); color: var(--ink); overflow: hidden; transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
.icard:hover { text-decoration: none; border-color: var(--line-2); background: var(--panel-2); box-shadow: var(--shadow), 0 6px 18px rgb(0 0 0 / .28); }
.icard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-theme="light"] .icard:hover { box-shadow: var(--shadow), 0 8px 22px rgb(20 22 26 / .08); }

/* the picture box: square, the picture fitted inside on a soft spotlight; the placeholder shows only without a
   picture, or once the picture has failed to load (app.js marks it .is-missing) */
.icard__media { position: relative; display: block; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--line); background: radial-gradient(75% 75% at 50% 42%, color-mix(in oklab, var(--ink) 6%, transparent), transparent 70%), var(--sunk); overflow: hidden; }
.icard__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); opacity: .55; }
.icard__ph > .icon { padding: 8px; box-sizing: content-box; border: 1px dashed var(--line-2); border-radius: 10px; }
.icard__img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10%; object-fit: contain; background: transparent; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); transition: filter .14s ease, opacity .14s ease; }
.icard__img.is-missing { display: none; }
.icard__img:not(.is-missing) ~ .icard__ph { display: none; }
.icard__img::before { content: ""; position: absolute; inset: 0; background: var(--sunk); } /* a picture that does not load shows the placeholder's box, never a broken icon */

/* on the picture: the variant badges bottom left (where the game prints them) */
.icard__marks { position: absolute; left: 6px; bottom: 6px; display: flex; line-height: 0; }
.icard__marks .vmark { box-shadow: 0 1px 3px rgb(0 0 0 / .45); }

/* the text: the name on one line, then the rarity (or type) and the stock on one baseline */
.icard__body { display: flex; flex-direction: column; gap: 5px; padding: 7px 8px 8px; min-width: 0; }
.icard__name { display: block; min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: 16px; }
.icard__meta .rarity { font-size: 10px; padding: 1px 5px; }
.icard__meta .rarity { margin-left: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.icard__type { min-width: 0; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard__stock { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: auto; font-size: 11px; font-weight: 500; line-height: 1; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.icard__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ok) 18%, transparent); }
.icard--low .icard__stock { color: var(--warn); }
.icard--low .icard__dot { background: var(--warn); box-shadow: 0 0 0 2px color-mix(in oklab, var(--warn) 18%, transparent); }

/* out of stock: the picture rests in grey, the stock line says so quietly; the hover brings the picture back */
.icard--out .icard__img { filter: grayscale(1); opacity: .42; }
.icard--out:hover .icard__img { opacity: .62; }
.icard--out .icard__marks { opacity: .6; }
.icard--out .icard__name { color: var(--ink-2); }
.icard--out .icard__stock { color: var(--ink-3); }
.icard--out .icard__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ── the pager ── */
.galfoot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.page > .galfoot { margin-top: 18px; }
.galfoot__range { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.galpager { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.galpager__btn { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); color: var(--ink); font: 500 12px/1 var(--mono); }
.galpager__btn:hover { background: var(--panel-2); text-decoration: none; }
.galpager__btn.is-active { border-color: var(--btn); background: var(--accent-bg); color: var(--accent); }
.galpager__btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.galpager__gap { color: var(--ink-3); padding: 0 2px; }

.gallery-page > .empty { margin-top: 12px; padding: 48px 18px; }

/* ── a phone: three cards across, the search on its own line, the chips under it ── */
@media (max-width: 760px) {
  .galbar { padding: 8px; gap: 6px; }
  .galbar__search { flex-basis: 100%; max-width: none; }
  /* each chip strip stays one line and slides sideways instead of wrapping */
  .galbar > .selchips { flex: 0 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .galbar > .selchips::-webkit-scrollbar, .galbar__strip::-webkit-scrollbar { display: none; }
  /* the game strip fades out at the right edge while more chips wait there */
  .galbar__strip { flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .galbar__strip > .selchips { flex-wrap: nowrap; max-width: none; margin-right: 22px; }
  .galbar .selchips__label { display: none; }
  .galgrid { --card-min: 100px; gap: 6px; }
  .icard__body { padding: 6px 7px 7px; gap: 4px; }
  .icard__name { font-size: 11.5px; }
  .galmeta__clear { margin-left: 0; }
  .galpager { margin-left: 0; }
}
@media (max-width: 380px) {
  .galgrid { --card-min: 92px; }
}