/* ===========================================================================
   find.css — Find anything (#/find, find.js): one search over every binder
   and shelf, its filters, and a row per card or item that opens where it is.
   =========================================================================== */

.view-find {
  height: calc(100vh - 52px - var(--pfbar-h, 0px));
  height: calc(100dvh - 52px - var(--pfbar-h, 0px));
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(900px 320px at 50% -140px, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--bg);
}
/* Room under the last row (Show More) for the bar, its raised button and the phone's home
   bar, and a little more, so it is never half under them. */
body.has-bottomnav .view-find {
  padding-bottom: calc(var(--bottomnav-h, 0px) + env(safe-area-inset-bottom, 0px) + 28px);
  scroll-padding-bottom: calc(var(--bottomnav-h, 0px) + 28px);
}

.find {
  max-width: 900px; margin: 0 auto;
  padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 32px) 40px;
}
.find-wait { margin: 18vh 0 0; text-align: center; color: var(--ink-3); }

.find-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 calc(-1 * clamp(16px, 4vw, 32px)); padding: 10px clamp(16px, 4vw, 32px) 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft, var(--line));
}
.find-title { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; }
.find-q { position: relative; }
.find-q-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); display: flex; pointer-events: none; }
.find-input { width: 100%; height: 44px; padding-left: 40px; font-size: 16px; border-radius: var(--radius-pill); }
.find-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.find-chip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-fill, var(--accent)); border-color: transparent; }
.find-game { width: auto; max-width: 180px; }

.find-count { margin: 12px 2px 8px; font-size: 13px; color: var(--ink-3); }
.find-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.find-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px;
  color: inherit; text-decoration: none;
  background: var(--bg-2); border: 1px solid var(--line-soft, var(--line));
}
@media (hover: hover) { .find-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
.find-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.find-thumb {
  display: grid; place-items: center; overflow: hidden; flex: none;
  width: 40px; border-radius: 5px; background: var(--bg-3); color: var(--ink-3); font-weight: 700;
}
.find-thumb.is-card { aspect-ratio: var(--card-ratio, .714); }
.find-thumb.is-item { height: 40px; border-radius: 9px; }
.find-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.find-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.find-name, .find-line, .find-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-name { font-size: 14px; font-weight: 650; }
.find-line { font-size: 12px; color: var(--ink-2); }
.find-where { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.find-dot { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.find-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.find-value { font-size: 13.5px; font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.find-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.find-badge {
  padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--bg-3);
}
.find-badge.is-grade { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.find-badge.is-trade { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.find-badge.is-missing { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.find-badge.is-wanted { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.find-more { display: block; margin: 14px auto 0; }

@media (max-width: 480px) {
  .find-kind { flex: 1 1 100%; }
  .find-kind .seg-opt { flex: 1 1 0; justify-content: center; }
}

/* The top bar's magnifier: nowhere on a share link or a profile's page, which have nothing of the viewer's to find. */
body.is-shared #btn-find, body.is-landing #btn-find, body.is-signin #btn-find { display: none; }
#btn-find[aria-current="page"] { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---- Search (search-page.js): the whole catalog, yours marked; the collection; the watchlist */
.gs-scopes { align-self: flex-start; }
.gs-filters { margin-top: 12px; }
.gs-game, .gs-sort { width: auto; max-width: 220px; }
.gs-item { position: relative; display: flex; align-items: stretch; gap: 6px; }
.gs-row { flex: 1; min-width: 0; cursor: pointer; }
.gs-row.is-owned { box-shadow: inset 3px 0 0 color-mix(in srgb, #22b865 75%, transparent); }
.gs-acts { display: flex; flex-direction: column; gap: 6px; }
.gs-act {
  flex: 1; display: grid; place-items: center; width: 40px; min-height: 36px; padding: 0;
  border-radius: 10px; cursor: pointer; color: var(--ink-2);
  background: var(--bg-2); border: 1px solid var(--line-soft, var(--line));
}
@media (hover: hover) { .gs-act:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
.gs-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gs-eye.is-on { color: var(--accent-ink); background: var(--accent-fill); border-color: transparent; }
.gs-move { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.gs-move.is-up { color: #22b865; }
.gs-move.is-down { color: var(--danger); }
.find-badge.is-owned { color: #fff; background: color-mix(in srgb, #22b865 85%, #0b3d22); }
.find-badge.is-watch { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.find-badge.is-alert { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 14%, transparent); }
@media (max-width: 480px) {
  .gs-scopes { flex: 1 1 100%; }
  .gs-scopes .seg-opt { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .gs-kind { flex: 1 1 100%; }
  .gs-kind .seg-opt { flex: 1 1 0; justify-content: center; }
  .gs-game, .gs-sort { flex: 1 1 calc(50% - 4px); max-width: none; }
  .gs-act { width: 36px; }
}

/* ---- quick add (quick-add.js): which binder, which shelf */
.qa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.qa-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px;
  cursor: pointer; font: inherit; text-align: left; color: inherit; background: var(--bg); border: 1px solid var(--line);
}
@media (hover: hover) { .qa-pick:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
.qa-cover { flex: none; width: 22px; height: 30px; border-radius: 4px; box-shadow: inset -3px 0 0 rgba(0,0,0,.25); }
/* loose in a portfolio: a card on its own, in the portfolio's colour, not a binder */
.qa-cover.is-loose { width: 22px; height: 30px; border-radius: 3px; box-shadow: none; opacity: .85; outline: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: 2px; transform: rotate(-6deg) scale(.82); }
.qa-h { margin: 4px 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.qa-list + .qa-h { margin-top: 18px; }
.qa-text { display: flex; flex-direction: column; min-width: 0; }
.qa-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-text span { font-size: 12px; color: var(--ink-3); }

/* The card dialog's watchlist button (cardinfo.js). */
.card-watchlist, .card-want, .card-sell { gap: 6px; }
.card-want.is-on { color: #e2537a; border-color: color-mix(in srgb, #e2537a 45%, var(--line)); background: color-mix(in srgb, #e2537a 10%, transparent); }
.card-sell.is-on { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.card-watchlist.is-on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---- a watched row's bell (search-page.js alertButton): lit when the card has a price alert,
   and the card's Price Alerts block (alerts-form.js cardWatchSection) in a panel from it. */
.gs-alert.is-on { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 16%, var(--bg-2)); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.gs-item.is-watch .gs-acts { flex-direction: row; align-items: stretch; }
.gs-item.is-watch .gs-act { width: 40px; }
/* Every row on the Watchlist is watched: it need not say so. */
.gs-item.is-watch .find-badge.is-watch { display: none; }
/* A phone: the buttons two by two, so the row keeps its width, and a long name on two lines. */
@media (max-width: 640px) {
  .gs-item.is-watch .gs-acts { display: grid; grid-template-columns: repeat(2, 32px); grid-auto-rows: minmax(28px, 1fr); gap: 4px; align-content: center; }
  .gs-item.is-watch .gs-act { width: 32px; min-height: 28px; }
  .gs-item.is-watch .find-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.gs-want.is-on { color: #e2537a; border-color: color-mix(in srgb, #e2537a 45%, var(--line)); background: color-mix(in srgb, #e2537a 12%, var(--bg-2)); }
.find-badge.is-sell { color: var(--gold-text); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.find-badge.is-sell-hit { color: #1a1408; background: linear-gradient(160deg, #f6dfa4, #d8b160); }

/* The month's line beside the price, and the target. */
.gs-price-line { display: inline-flex; align-items: center; gap: 8px; }
/* the month's line (spark.js; its colours are in shell.css) */
.gs-spark { width: 64px; height: 22px; }
/* A phone: the line above the price rather than beside it, so the name keeps its room. */
@media (max-width: 480px) {
  .gs-price-line { flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
  .gs-spark { width: 52px; height: 14px; }
  /* the badges stack rather than widen the column */
  .gs-item.is-watch .find-side { max-width: 92px; }
}
.find-badge.is-target { color: #fff; background: color-mix(in srgb, var(--accent) 80%, #0b1220); }
.gs-target.is-on { color: var(--accent-ink); background: var(--accent-fill, var(--accent)); border-color: transparent; }
.gs-move.is-down { color: var(--danger); }
.popover.gs-alert-pop { width: min(400px, calc(100vw - 16px)); padding: 14px 16px 16px; }
.popover.gs-alert-pop.is-sheet { width: 100%; max-height: 86dvh; overflow-y: auto; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.gs-alerts .al-watch { margin: 0; }