/* Market page.
 *
 * The card and toolbar markup reuse the live page's Tailwind classes, all of which
 * the archived stylesheet already defines. Rules land here only for what it does not.
 */

/* Quick view motion, verbatim from the live modal (chunk 8729). */
@keyframes insp-fade-in { from { opacity: 0 } }
@keyframes insp-fade-out { to { opacity: 0 } }
@keyframes insp-pop-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.96) } to { opacity: 1; transform: translate(-50%,-50%) scale(1) } }
@keyframes insp-pop-out { from { opacity: 1; transform: translate(-50%,-50%) scale(1) } to { opacity: 0; transform: translate(-50%,-50%) scale(.97) } }
@keyframes insp-sheet-in { from { transform: translateY(100%) } }
@keyframes insp-sheet-out { to { transform: translateY(100%) } }
@keyframes insp-img-in { from { opacity: 0; transform: scale(.92) } }
/* Only a "from" keyframe: the marker slides from the track's left edge
   to its natural inline left (the real float position). */
@keyframes insp-marker-in { from { left: 0% } }
@keyframes insp-rise-in { from { opacity: 0; transform: translateY(7px) } }
.insp-overlay[data-state='open'] { animation: insp-fade-in .15s ease-out; }
.insp-overlay[data-state='closed'] { animation: insp-fade-out .15s ease-in forwards; }
.insp-card[data-state='open'] { animation: insp-pop-in .22s cubic-bezier(.22,1,.36,1); }
.insp-card[data-state='closed'] { animation: insp-pop-out .15s ease-in forwards; }
.insp-img { animation: insp-img-in .3s cubic-bezier(.22,1,.36,1) .08s backwards; }
.insp-marker { animation: insp-marker-in .4s cubic-bezier(.22,1,.36,1) .22s backwards; }
.insp-stk { animation: insp-rise-in .3s ease-out backwards; }
@media (max-width: 767px) {
  /* M4 bottom sheet: 260ms slide-up, 150ms slide-down. */
  .insp-card[data-state='open'] { animation: insp-sheet-in .26s cubic-bezier(.22,1,.36,1); }
  .insp-card[data-state='closed'] { animation: insp-sheet-out .15s ease-in forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .insp-card[data-state='open'] { animation: insp-fade-in .15s ease-out; }
  .insp-card[data-state='closed'] { animation: insp-fade-out .15s ease-in forwards; }
  .insp-img, .insp-marker, .insp-stk { animation: none !important; }
}

/* The remove button's enlarged hit area on phones (before:content-[''] is not in the archived sheet). */
[data-cart-remove]::before { content: ''; }

/* Inspect card: wider on desktop so five stickers with their integrity, the float, the
   pattern and the "Inspect in game" button fit on the image panel. */
@media (min-width: 768px) {
  .insp-card { width: 960px; }
}
@media (min-width: 768px) {
  .insp-card .qv-media { width: 54%; }
  .insp-card .qv-price-panel { margin-top: auto; }
}

/* A sticker of the inspect card: on hover a card above it with the name (copyable),
   the price and how intact it is. The bottom padding bridges the gap to the chip, so the
   pointer can travel up into the card without it closing. */
.qv-stk { position: relative; }
.qv-stk:hover .qv-stk-art { border-color: rgba(255, 255, 255, .3); }
.qv-stk-tip {
  position: absolute; bottom: 100%; z-index: 50; padding-bottom: 8px;
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.qv-stk:hover .qv-stk-tip, .qv-stk:focus-within .qv-stk-tip { opacity: 1; pointer-events: auto; transform: none; }
.qv-tip-left { left: 0; }
.qv-tip-right { right: 0; }
.qv-tip-center { left: 50%; transform: translate(-50%, 4px); }
.qv-stk:hover .qv-tip-center, .qv-stk:focus-within .qv-tip-center { transform: translate(-50%, 0); }
.qv-stk-tip .select-text { user-select: text; -webkit-user-select: text; }
.qv-tip-card {
  display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: 260px;
  padding: 10px 12px; border: 1px solid #2c2c34; border-radius: 10px; background: #16161b;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9);
}
.qv-tip-head { display: flex; align-items: flex-start; gap: 8px; }
.qv-tip-name {
  min-width: 0; flex: 1; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.35;
  white-space: normal; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; cursor: text;
}
.qv-tip-copy {
  display: flex; flex: none; width: 20px; height: 20px; margin-top: 1px; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; background: transparent; color: rgba(255, 255, 255, .5);
  cursor: pointer; transition: border-color .15s, color .15s;
}
.qv-tip-copy:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.qv-copy-swap {
  position: relative; display: inline-grid; width: 14px; height: 14px; place-items: center;
}
.qv-copy-original, .qv-copy-check {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity .2s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1);
}
.qv-copy-swap svg { width: 14px; height: 14px; }
.qv-copy-check { opacity: 0; transform: scale(.55) rotate(-35deg); color: #22d17e; }
[data-qv-copy].is-copied .qv-copy-original { opacity: 0; transform: scale(.62) rotate(35deg); }
[data-qv-copy].is-copied .qv-copy-check { opacity: 1; transform: scale(1) rotate(0); }
.qv-copy-feedback {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 60;
  width: max-content; padding: 5px 8px; border: 1px solid rgba(34,209,126,.32);
  border-radius: 7px; background: rgba(13,13,16,.96); box-shadow: 0 10px 24px -10px rgba(0,0,0,.9);
  color: #22d17e; font-family: var(--font-sans), sans-serif; font-size: 10px; font-weight: 700;
  line-height: 1; letter-spacing: .02em; pointer-events: none; opacity: 0;
  transform: translate(-50%, 4px) scale(.96);
  transition: opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1);
}
[data-qv-copy].is-copied .qv-copy-feedback { opacity: 1; transform: translate(-50%, 0) scale(1); }
.qv-tip-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  color: #8f8f93; font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px;
}
.qv-tip-row b { color: #ececf1; font-variant-numeric: tabular-nums; }
.qv-tip-row b.qv-tip-price { color: #22d17e; }

@media (prefers-reduced-motion: reduce) {
  .qv-copy-original, .qv-copy-check, .qv-copy-feedback { transition: none; }
}

/* Sidebar hints, tick labels and counts: the archive's 8.5-9.5px #5c5c66 sat at contrast 2.9. */
.skc-hint { font-size: 11px; line-height: 1.4; color: #9a9aa4; }
.skc-count { font-size: 11px; color: #9a9aa4; }
.skc-save { font-size: 11.5px; color: #c9c9d2; }
.skc-save-off { color: rgba(255, 255, 255, .45); }

/* Панель фильтров: в архиве подписи 9.5–10.5px — читались с трудом. Крупнее в той же ширине. */
div:has(> [data-sb-head]) [class*="tracking-[0.2em]"] { font-size: 11px !important; letter-spacing: .16em !important; }
div:has(> [data-sb-head]) [data-sb-delivery] { font-size: 11.5px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
div:has(> [data-sb-head]) [data-sb-exterior] { font-size: 11px !important; padding: 6px 4px !important; gap: 4px !important; min-width: 0; }
div:has(> [data-sb-head]) div:has(> [data-sb-exterior]) { gap: 4px !important; flex-wrap: nowrap !important; }
div:has(> [data-sb-head]) [data-sb-exterior] { flex: 1 1 0; justify-content: center; }
div:has(> [data-sb-head]) [data-sb-toggle="extras"] .skc-hint { font-size: 10px; }
div:has(> [data-sb-head]) :is([data-sb-rarity], [data-sb-extra]) .truncate { font-size: 12.5px !important; }
div:has(> [data-sb-head]) :is([data-sb-rarity], [data-sb-extra]) { padding-top: 6px !important; padding-bottom: 6px !important; }
div:has(> [data-sb-head]) [data-sb-only] { font-size: 9px !important; }
div:has(> [data-sb-head]) :is(input[data-sb-price], input[data-sb-float]) { font-size: 12px !important; height: 32px !important; }
div:has(> [data-sb-head]) input[data-sb-price] + span, div:has(> [data-sb-head]) .relative > span.font-mono { font-size: 12px !important; }
div:has(> [data-sb-head]) [data-sb-lock-label] { font-size: 11.5px !important; }
/* Подсказки, подпись блокировки, редкости и их счётчики — 500. Выбранная редкость остаётся жирной. */
div:has(> [data-sb-head]) .skc-hint:not(.font-semibold),
div:has(> [data-sb-head]) [data-sb-lock-label],
div:has(> [data-sb-head]) [data-sb-rarity] .truncate:not(.font-bold),
div:has(> [data-sb-head]) [data-sb-rarity] .skc-count { font-weight: 500; }

/* The sticker-size picker (?stickerSize=1), bottom-left. */
.skc-size-picker { position: fixed; left: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 320px; padding: 12px; border: 1px solid #26262c; border-radius: 12px; background: rgba(12, 12, 16, .94); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9); backdrop-filter: blur(8px); font: 700 10px/1.2 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #8f8f93; }
.skc-size-picker div { display: flex; flex-wrap: wrap; gap: 6px; }
.skc-size-picker button { height: 28px; padding: 0 9px; border: 1px solid #2c2c34; border-radius: 8px; background: #16161b; color: #c9c9d2; font: inherit; cursor: pointer; }
.skc-size-picker button:hover { border-color: #3a3a44; color: #fff; }
.skc-size-picker button.is-on { border-color: rgba(34, 209, 126, .6); background: rgba(34, 209, 126, .12); color: #22d17e; }