/* ─── CardFinder — Dark Glassmorphic Theme ────────────────────────────────── */
/* Design tokens are direct from game-manager so the two apps feel cohesive. */

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.1);
  --border-glass-strong: rgba(255, 255, 255, 0.2);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
  /* Trading Floor accent — gold leaf against charcoal/ivory.  Reserved for
     the *single* moment per surface where the meaning is "act on this" or
     "this is hot": active tab, primary CTA, hot-tier rail + multiplier,
     focus ring.  Everywhere else uses ivory or muted ivory.  Gold has real
     heritage in card collecting (Topps Gold, gold-label slabs, premium
     parallels) so it carries category meaning, not just a UI choice. */
  --accent: #c8a85a;
  --accent-glow: rgba(200, 168, 90, 0.28);
  --accent-hover: #b89846;
  --accent-ink: #0a0a0f;
  --success: #22c55e;
  --success-glow: rgba(34, 197, 94, 0.3);
  --warning: #f59e0b;
  --warning-glow: rgba(245, 158, 11, 0.3);
  --error: #ef4444;
  --error-glow: rgba(239, 68, 68, 0.3);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-glow: 0 0 20px var(--accent-glow);
  --transition: all 0.2s ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; width: 100%; overflow-x: hidden; }
body {
  /* Trading Floor display family.  Inter Tight (loaded via Google Fonts in
     index.html) gives us editorial-financial body type; system stack is the
     fallback while the web font is in flight.  JetBrains Mono is used for
     numeric strips via the .num utility class and the Browse row mono cells. */
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'ss01' on, 'cv11' on;
  letter-spacing: -.005em;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tabular numerics utility — opt-in for prices, counts, timers. */
.num, .num * { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }

button, input, select, textarea {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
a:active { opacity: 0.8; }

/* ─── App shell ────────────────────────────────────────────────────────────── */
.app { display: flex; flex-direction: column; min-height: 100dvh; }

.app-version {
  position: fixed; bottom: 8px; right: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  color: rgba(255,255,255,.3); pointer-events: none; z-index: 9999;
}

/* ─── Page layout ──────────────────────────────────────────────────────────── */
.page { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* The tabs ARE the page identity — no separate "Targets / Searches / …"
   header above them.  This bar is the only sticky element at the top, with
   the iOS safe-area inset baked into its top padding. */
/* ─── Tabbar — app-level masthead + ticker-style nav ─────────────────────
   Replaces the prior rounded-capsule chrome with an editorial publication
   header: small wordmark with a tagline at the top, a hairline rule, then
   a row of underlined tabs.  Sticky so navigation stays available while
   you scroll, but visually it disappears into the page. */
.tabbar {
  position: sticky; top: 0; z-index: 100;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 0;
  background: rgba(10,10,15,.92);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--b-rule);
}

/* Wordmark line: a tiny gold square, the app name in editorial Inter
   Tight, and a categorical tagline tucked to the right.  Acts like the
   sub-nameplate on a financial paper. */
.masthead {
  display: flex; align-items: baseline;
  gap: 12px;
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--b-rule);
}
.masthead__wordmark {
  display: flex; align-items: baseline; gap: 10px;
  flex: 1; min-width: 0;
}
.masthead__mark {
  align-self: center;
  width: 8px; height: 8px;
  background: var(--b-accent);
  border-radius: 1px;
  flex-shrink: 0;
}
.masthead__name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px; font-weight: 800;
  letter-spacing: -.014em;
  color: var(--b-ivory);
  white-space: nowrap;
}
.masthead__tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 480px) {
  .masthead { padding: 0 0 10px; gap: 10px; }
  .masthead__name { font-size: 15px; }
  .masthead__tag { font-size: 9px; letter-spacing: .1em; }
}
@media (max-width: 360px) {
  /* On the smallest phones drop the tagline so the wordmark stays clean. */
  .masthead__tag { display: none; }
}

/* User chip — small "ap · sign out" cluster on the right of the masthead. */
.masthead__user {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.masthead__user-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--b-accent);
  padding: 3px 7px;
  border: 1px solid var(--b-accent-edge);
  border-radius: 2px;
}
.masthead__logout {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244, 241, 234, .55);
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  border-radius: 2px;
  padding: 4px 8px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.masthead__logout:hover {
  color: var(--b-accent);
  border-color: var(--b-accent-edge);
}
@media (max-width: 480px) {
  .masthead__logout { font-size: 9px; padding: 4px 6px; letter-spacing: .14em; }
}
@media (max-width: 360px) {
  .masthead__logout { display: none; }
}
.page-content {
  flex: 1; padding: 16px 14px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
@media (min-width: 640px) { .page-content { padding: 20px; } }

/* ─── Glass card ──────────────────────────────────────────────────────────── */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -16px rgba(0,0,0,0.5);
  transition: var(--transition);
  padding: 16px;
}
@media (min-width: 640px) { .glass-card { padding: 20px; } }
.glass-card.clickable:active { transform: scale(.98); }
.glass-card + .glass-card { margin-top: 12px; }

/* ─── Target card (compact, mobile-first, collapsible) ──────────────────────
   Default state shows verdict, multiple, all-in→net, set/player.  Tap the
   card to expand for full comp breakdown, sources, and edit/delete actions. */
.tcard { padding: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tcard:active { transform: scale(.99); }
.tcard__head { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.tcard__thumb {
  width: 48px; height: 64px; flex-shrink: 0;
  background: var(--bg-input); border-radius: 6px;
  background-size: cover; background-position: center;
  border: 1px solid var(--border-glass);
}
.tcard.is-open .tcard__thumb-large {
  display: block; margin-top: 12px;
  width: 100%; max-width: 320px; aspect-ratio: 3/4;
  background: var(--bg-input); border-radius: 8px;
  background-size: contain; background-position: center; background-repeat: no-repeat;
  border: 1px solid var(--border-glass);
  margin-left: auto; margin-right: auto;
}
.tcard__thumb-large { display: none; }
.tcard__id { flex: 1; min-width: 0; }
.tcard__title { font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__verdict { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.tcard__mult { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.3px; line-height: 1; }
.tcard__mult.go      { color: var(--success); }
.tcard__mult.marginal{ color: var(--warning); }
.tcard__mult.avoid   { color: var(--error); }
.tcard__mult.muted   { color: var(--text-muted); }
.tcard__money {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 8px 12px;
  background: var(--bg-input); border-radius: var(--radius-sm);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.tcard__money .arrow { color: var(--text-muted); font-size: 12px; }
.tcard__money b      { font-weight: 700; color: var(--text-primary); }
.tcard__attrib {
  margin-top: 8px; font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tcard__attrib .chev { transition: transform .2s ease; opacity: .6; }
.tcard.is-open .tcard__attrib .chev { transform: rotate(180deg); }

.tcard__detail { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-glass); }
.tcard.is-open .tcard__detail { display: block; }

.tcard__comps {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px;
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.tcard__comps .row { display: flex; justify-content: space-between; gap: 8px; }
.tcard__comps .row .label { color: var(--text-muted); font-size: 12px; }

.tcard__notes { margin-top: 10px; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.45; color: var(--text-secondary); }

.tcard__actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.tcard__actions .btn { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 10px 8px; font-size: 12px; }
.tcard__actions .btn.icon { flex: 0 0 auto; padding: 10px 12px; }

/* Stale source attribution (TOS staleness disclosure). */
.tcard__attrib.is-stale { color: var(--warning); }
.tcard__attrib.is-stale::before { content: '⚠ '; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 15px; font-weight: 500; letter-spacing: .1px;
  border: none; border-radius: var(--radius-md);
  min-height: 44px; min-width: 44px;
  transition: var(--transition);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 20px var(--accent-glow); font-weight: 700; }
.btn-primary:active { transform: scale(.98); background: var(--accent-hover); }
.btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-glass); }
.btn-secondary:active { background: var(--bg-card-hover); border-color: var(--border-glass-strong); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:active { background: var(--bg-card); color: var(--text-primary); }
.btn-danger { background: var(--error); color: #fff; box-shadow: 0 0 20px var(--error-glow); }
.btn-icon { padding: 10px; min-width: 44px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 9px 14px; font-size: 13px; min-height: 40px; }
.btn-block { width: 100%; }
.btn-primary-cta {
  width: 100%; padding: 14px 20px; min-height: 48px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: #fff; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-md);
  box-shadow: 0 0 24px var(--accent-glow), 0 4px 12px rgba(0,0,0,0.25);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary-cta:active { transform: scale(.985); }

/* ─── Toolbar (page-content top action area) ──────────────────────────────── */
.toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.toolbar-secondary {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  font-size: 13px;
}
.toolbar-secondary button {
  background: none; border: none; color: var(--accent); font-size: 13px;
  padding: 8px 12px; min-height: 36px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-weight: 500;
}
.toolbar-secondary .sep { color: var(--text-muted); padding: 8px 0; }

/* ─── Inputs ──────────────────────────────────────────────────────────────── */
.input, textarea.input, select.input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  outline: none;
  transition: var(--transition);
  min-height: 44px;
  -webkit-appearance: none;
}
.input:focus, textarea.input:focus, select.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.input::placeholder { color: var(--text-muted); }
textarea.input { min-height: 80px; resize: vertical; }
.input-group { margin-bottom: 16px; }
.input-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.input-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ─── Nav tabs (segmented control) ────────────────────────────────────────── */
/* Ticker-style nav — flat row of labels divided by hairlines.  Active
   tab gets a gold underline, no fill, no chip.  Reads as "section
   headers in a paper" rather than "buttons in an app." */
.nav-tabs {
  display: flex; gap: 0;
  margin: 0; padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-tab {
  flex: 1;
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px 12px;       /* 44px+ tap height */
  min-height: 46px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-tab + .nav-tab {
  /* Tiny vertical hairline between tabs — barely there, but it gives
     the row the ticker-divider feel without shouting. */
  box-shadow: inset 1px 0 0 var(--b-rule);
}
.nav-tab:hover,
.nav-tab:focus-visible {
  color: rgba(244, 241, 234, .75);
  outline: none;
}
@media (max-width: 480px) {
  .nav-tab { font-size: 10px; letter-spacing: .18em; padding: 14px 4px 12px; gap: 4px; }
}
@media (max-width: 360px) {
  .nav-tab { font-size: 9.5px; letter-spacing: .14em; }
}

/* Count chip — outlined hairline, mono numerics.  Drops the filled-pill
   look so it sits inside the editorial tab strip without competing. */
.nav-tab .tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0;
  color: rgba(244, 241, 234, .55);
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.nav-tab .tab-count.is-warning {
  color: var(--b-warm);
  background: transparent;
  border-color: rgba(251, 191, 36, .35);
}
.nav-tab.active .tab-count.is-warning {
  color: var(--b-warm);
  background: transparent;
  border-color: rgba(251, 191, 36, .5);
}
@media (max-width: 380px) {
  .nav-tab .tab-count { display: none; }
}
/* Active tab — gold underline only, no fill.  The underline sits flush
   with the tabbar's bottom border so it reads as a continuation of the
   hairline rule rather than a separate decoration. */
.nav-tab.active {
  color: var(--b-ivory);
  font-weight: 800;
  background: transparent;
  box-shadow: inset 1px 0 0 var(--b-rule);   /* preserve the divider */
}
.nav-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;            /* sit on the tabbar rule */
  height: 2px;
  background: var(--b-accent);
}
.nav-tab.active .tab-count {
  color: var(--b-accent);
  background: transparent;
  border: 1px solid var(--b-accent-edge);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
}

/* ─── Badges / pills ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 999px;
}
.badge-go      { background: var(--success-glow); color: var(--success); }
.badge-marginal{ background: var(--warning-glow); color: var(--warning); }
.badge-avoid   { background: var(--error-glow);   color: var(--error); }
.badge-info    { background: var(--accent-glow);  color: var(--accent); }
.badge-muted   { background: var(--bg-input);     color: var(--text-secondary); }

.pill { padding: 1px 8px; font-size: 11px; font-weight: 500; color: var(--text-secondary); background: var(--bg-input); border-radius: 999px; }

/* ─── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; gap: 10px; text-align: center;
  color: var(--text-secondary);
}
.empty-state-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: 50%;
  color: var(--accent); box-shadow: 0 0 30px var(--accent-glow);
  margin-bottom: 4px;
}
.empty-state h3 { font-size: 18px; color: var(--text-primary); }
.empty-state p { font-size: 14px; max-width: 280px; }

/* ─── Card list rows (targets / watchlist / sellers / searches) ───────────── */
.row-card {
  display: flex; flex-direction: column; gap: 8px;
}
.row-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.row-card-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.row-card-sub { font-size: 13px; color: var(--text-secondary); }
.row-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 13px; color: var(--text-secondary);
}
.row-card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.row-card-actions .btn { flex: 1 1 auto; }

.kvp { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.kvp b { font-weight: 600; color: var(--text-primary); }
.kvp .label { color: var(--text-muted); }

/* ─── Margin block (target card) ──────────────────────────────────────────── */
.margin-block {
  margin-top: 12px; padding: 12px 14px;
  background: var(--bg-input); border-radius: var(--radius-md);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.margin-block .stat { display: flex; flex-direction: column; gap: 2px; }
.margin-block .stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.margin-block .stat .val { font-size: 16px; font-weight: 700; }

/* ─── Vetting checklist ───────────────────────────────────────────────────── */
.vet-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 12px; background: var(--bg-input); border-radius: var(--radius-md);
  margin-top: 8px;
}
@media (max-width: 480px) { .vet-list { grid-template-columns: 1fr; } }
.vet-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary);
  cursor: pointer;
}
.vet-item input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
}
.vet-item.checked { color: var(--success); }

/* ─── Search builder ──────────────────────────────────────────────────────── */
.chip-input { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--bg-input); border: 1px solid var(--border-glass); border-radius: var(--radius-md); min-height: 44px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--accent-glow); color: var(--accent); border-radius: 999px; font-size: 13px; font-weight: 500; }
.chip button { background: none; border: none; color: var(--accent); font-size: 14px; cursor: pointer; padding: 0; line-height: 1; }
.chip-input input { flex: 1; min-width: 80px; background: none; border: none; outline: none; color: var(--text-primary); font-size: 14px; }

.preview-block { margin-top: 12px; padding: 12px 14px; background: var(--bg-input); border-radius: var(--radius-md); overflow: hidden; }
.preview-block .label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.preview-block code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; color: var(--text-primary); word-break: break-all; overflow-wrap: anywhere; line-height: 1.45; display: block; }
.preview-block.url code { font-size: 11px; color: var(--text-secondary); }
.preview-block.url code.truncate { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.preview-block .copy-btn { background: none; border: none; color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 4px; -webkit-tap-highlight-color: transparent; }

/* ─── Look-up result (Targets → "Look up card" modal) ────────────────────── */
/* Stacked vertically.  Hides empty sources rather than rendering blank
   columns at squeezed mobile widths. */
.lookup-result { display: flex; flex-direction: column; gap: 12px; }

.lookup-head {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border-glass);
}
.lookup-head__title { font-size: 17px; font-weight: 600; line-height: 1.2; }
.lookup-head__sub   { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

.lookup-section {
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 11px 14px;
}
.lookup-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
}
.lookup-section__meta {
  font-size: 11px; font-weight: 500; letter-spacing: .3px;
  text-transform: none; color: var(--text-secondary);
}
.lookup-section__body { display: flex; flex-direction: column; gap: 4px; }
.lookup-section__body .kvp { padding: 2px 0; font-size: 13px; }

.lookup-empty {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-muted);
}
.lookup-empty b { font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); font-size: 10px; }

.lookup-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  font-size: 13px; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
}
.lookup-item:first-child { border-top: none; padding-top: 4px; }
.lookup-item:active { opacity: .7; }
.lookup-item__title {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--accent); font-size: 12px;
}
.lookup-item__price {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary); white-space: nowrap;
}
.lookup-item__ends {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ─── Discover row — captured eBay listing inside a search group ──────────
   6-zone layout: thumb · title · price+ends · [Track] [✕].  Track is the
   primary CTA (filled accent on tap); dismiss is a ghost icon button that
   warms red on hover.  Tabular numerics on price/time. */
.disco-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
}
.disco-row:first-child { border-top: none; padding-top: 4px; }

.disco-row__thumb {
  width: 36px; height: 48px;
  border-radius: 6px;
  background-color: rgba(255,255,255,0.03);
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.disco-row__thumb--empty {
  background-image: linear-gradient(135deg,
    rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
  border: 1px dashed rgba(255,255,255,.08);
}
.disco-row__thumb { position: relative; cursor: zoom-in; }
.disco-row__thumb--empty { cursor: default; }
.disco-row__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.disco-row__thumb-count {
  position: absolute;
  bottom: 2px; right: 2px;
  padding: 1px 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  color: #fff;
  background: rgba(0, 0, 0, .75);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ─── Lightbox: full-screen image carousel ───────────────────────────────
   Triggered by clicking a row thumb. Esc closes; ArrowLeft/Right cycle.
   Black backdrop covers the app; image displayed full-fit with caption +
   counter at bottom. */
.lightbox {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .92);
  animation: lightbox-fade .14s ease both;
}
@keyframes lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox__panel {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 60px 80px;
}
.lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .65);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease, transform .15s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .15); }
.lightbox__close:active, .lightbox__nav:active { transform: scale(.94); }
.lightbox__close {
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  font-size: 14px;
}
.lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  font-size: 28px; line-height: 1; font-weight: 600;
}
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__nav:active { transform: translateY(-50%) scale(.94); }
.lightbox__footer {
  position: absolute;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: 80%;
  pointer-events: none;
}
.lightbox__counter {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}
.lightbox__loading {
  font-size: 11px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .08);
  padding: 4px 10px;
  border-radius: 999px;
  animation: lightbox-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes lightbox-loading-pulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
.lightbox__caption {
  font-size: 12.5px; color: rgba(255, 255, 255, .85);
  text-align: center;
  text-overflow: ellipsis; overflow: hidden;
  white-space: nowrap; max-width: 100%;
}
@media (max-width: 480px) {
  .lightbox__panel { padding: 32px 8px 80px; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 22px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
}

.disco-row__title {
  min-width: 0;
  font-size: 13px; font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.disco-row__title:hover { text-decoration: underline; text-underline-offset: 3px; }

.disco-row__meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.disco-row__price {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.disco-row__ends {
  font-size: 10.5px; font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .2px;
}

.disco-row__actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

.disco-action {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .2px;
  background: transparent;
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: var(--transition);
}
.disco-action--track {
  padding: 0 14px;
  color: var(--accent);
  border-color: rgba(59, 130, 246, .35);
  background: rgba(59, 130, 246, .08);
}
.disco-action--track:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
.disco-action--track:active { transform: scale(.96); }

.disco-action--dismiss {
  width: 30px; padding: 0;
  font-size: 12px; line-height: 1;
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}
.disco-action--dismiss:hover {
  color: var(--error);
  border-color: rgba(239, 68, 68, .25);
  background: rgba(239, 68, 68, .08);
}
.disco-action--dismiss:active { transform: scale(.92); }
.disco-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* On very tight widths (≤380px) the time-left can feel crowded; let the
   meta column collapse to price-only by hiding the time-left line. */
@media (max-width: 380px) {
  .disco-row { grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 8px; }
  .disco-row__thumb { width: 32px; height: 42px; }
  .disco-action--track { padding: 0 12px; }
}

/* ─── Triage rows — heuristic-ranked Discover view ────────────────────────
   Verdict-led layout: badge | thumb | title+reason | bid+ends | actions.
   The badge color tells you in one glance whether to look at the row at
   all; reason tells you *why* the scorer landed there (spread, ROI,
   reject pattern). Tabular numerics on bids, no decoration drift. */
.triage-card { padding: 4px 6px !important; }

.triage-row {
  display: grid;
  grid-template-columns: auto 36px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.triage-row:first-child { border-top: none; }
.triage-row[data-verdict="reject"] { opacity: .55; }
.triage-row[data-verdict="pass"]   { opacity: .7; }

.triage-row__verdict {
  font-size: 9.5px; font-weight: 700; letter-spacing: .8px;
  padding: 4px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.triage-row__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.triage-row__title {
  font-size: 13px; font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.triage-row__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.triage-row__reason {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.triage-row[data-verdict="chase"]    .triage-row__reason { color: var(--success); }
.triage-row[data-verdict="marginal"] .triage-row__reason { color: var(--warning); }

.triage-row__money {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.triage-row__bid {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.triage-row__ends {
  font-size: 10.5px; color: var(--text-muted); letter-spacing: .2px;
}

/* Disclosure groups (unknown / filtered-out). */
.triage-details {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
}
.triage-details > summary {
  cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-muted);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.triage-details > summary::-webkit-details-marker { display: none; }
.triage-details > summary::before {
  content: '▸'; display: inline-block;
  margin-right: 8px; transition: transform .15s ease;
  font-size: 10px; color: var(--text-muted);
}
.triage-details[open] > summary::before { transform: rotate(90deg); }
.triage-details > summary:hover { color: var(--text-secondary); }

.triage-empty {
  margin: 8px 0 16px;
  padding: 18px 16px;
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border-glass);
  border-radius: var(--radius-md);
}
.triage-empty__hd {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 6px;
}
.triage-empty__body {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  max-width: 36ch; margin: 0 auto;
}

@media (max-width: 480px) {
  .triage-row {
    grid-template-columns: auto 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 6px;
  }
  .triage-row__money { display: none; }
  .triage-row__reason { white-space: normal; }
  .triage-row__verdict { font-size: 9px; padding: 3px 6px; }
}

/* ─── Browse tab — Hot Cards from the local PriceCharting catalog ────────
   Reuses the .pc-row scanner primitive shipped on Targets, with a few
   Browse-specific surfaces for filters and the empty/onboarding state. */
.b-search {
  position: relative;
  display: flex; align-items: center;
  margin: 0 0 10px;
}
.b-search__icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.b-search__input {
  flex: 1; min-width: 0;
  width: 100%;
  padding: 12px 40px 12px 42px;
  font-size: 14px; color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.b-search__input::placeholder { color: var(--text-muted); }
.b-search__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
.b-search__clear {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: none;
  align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  color: var(--text-muted);
  background: transparent; border: none;
  cursor: pointer; border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.b-search__clear.is-shown { display: inline-flex; }
.b-search__clear:hover { color: var(--text-primary); background: var(--bg-card-hover); }

.b-results { transition: opacity .12s ease; }
.b-results.is-loading { opacity: .55; }

/* Row-level save feedback. The "saving" state pulses the accent rail to
   show the click landed; "saved" replaces row content with a centered
   confirmation banner before the tab switches to Targets. */
@keyframes b-row-saving-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 16px 2px var(--accent-glow); }
}
.b-row.is-saving {
  cursor: progress;
  animation: b-row-saving-pulse 1.1s ease-in-out infinite;
  border-color: var(--accent) !important;
}
.b-row.is-saved {
  position: relative;
  pointer-events: none;
}
.b-row.is-saved > *:not(.b-row__saved-overlay) { opacity: .15; transition: opacity .15s ease; }
.b-row__saved-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  color: var(--success);
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .35);
  border-radius: var(--radius-md);
  animation: b-row-saved-in .18s ease both;
}
.b-row__saved-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 13px; font-weight: 700;
  color: var(--success);
  background: var(--success-glow);
  border-radius: 50%;
}
@keyframes b-row-saved-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Filter disclosure — flush hairline strip, no glass.  Matches the legend
   above and the eyebrow below. */
.b-filters-disclosure {
  margin: 0 2px 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--b-rule);
  border-radius: 0;
}
.b-filters-disclosure > summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  font-size: 10.5px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .55);
}
.b-filters-disclosure > summary::-webkit-details-marker { display: none; }
.b-filters-disclosure > summary::before {
  content: '+'; display: inline-block;
  width: 16px; height: 16px;
  margin-right: 8px;
  font-size: 14px; font-weight: 400; line-height: 14px;
  text-align: center;
  color: var(--b-accent);
  border: 1px solid var(--b-rule-strong);
  border-radius: 999px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.b-filters-disclosure[open] > summary::before {
  content: '−';
  transform: rotate(180deg);
  border-color: var(--b-accent-edge);
  background: var(--b-accent-soft);
}
.b-filters-disclosure__hint {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 500; letter-spacing: .04em;
  text-transform: none; font-size: 10.5px;
  color: rgba(244, 241, 234, .42);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.b-filters {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin: 0;
  padding: 14px 0 18px;
}
@media (max-width: 480px) { .b-filters { grid-template-columns: 1fr; gap: 12px; } }

.b-filter { display: flex; flex-direction: column; gap: 6px; }
.b-filter__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px;
}
.b-filter__label {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244, 241, 234, .55);
}
.b-filter__val {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; font-weight: 500;
  color: var(--b-ivory);
  font-variant-numeric: tabular-nums;
}
.b-filter input[type="range"] { accent-color: var(--b-accent); }

.b-empty {
  padding: 24px 18px;
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border-glass);
  border-radius: var(--radius-md);
}
.b-empty--bootstrap { text-align: left; padding: 20px; }
.b-empty__hd {
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 8px;
}
.b-empty__body {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.55;
  max-width: 56ch; margin: 0 auto;
}
.b-empty--bootstrap .b-empty__body { margin: 0 0 14px 0; max-width: none; }
.b-empty__steps {
  margin: 0 0 0 22px;
  padding: 0;
  font-size: 13px; color: var(--text-primary);
  line-height: 1.7;
}
.b-empty__steps li { padding: 2px 0; }

/* ─── Discover status banner — human-readable refresh state ──────────────
   Replaces the leaky "APIFY · push off" admin string. Top line answers
   "is what I'm looking at fresh?", sub line answers "what's the cadence?".
   Action button is the dominant CTA. */
.discover-status {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
}
.discover-status__lines { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.discover-status__primary {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.discover-status__sub {
  font-size: 11px; color: var(--text-muted);
  letter-spacing: .2px;
}
.discover-status__btn { flex-shrink: 0; padding: 9px 16px; }

/* Quota line — hidden under 50% of daily eBay budget; muted/amber/red as
   usage climbs.  Leading indicator so users see the headroom shrinking
   before a 429 actually lands. */
.discover-status__quota {
  margin-top: 4px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.discover-status__quota--muted   { color: var(--text-muted); }
.discover-status__quota--warning { color: var(--warning); }
.discover-status__quota--danger  { color: var(--error); font-weight: 600; }

@media (max-width: 480px) {
  .discover-status { padding: 11px 12px; gap: 10px; }
  .discover-status__btn { padding: 8px 12px; font-size: 12.5px; }
}

/* ─── Inline Match flow on Triage rows ────────────────────────────────────
   "Match" action variant + the inline picker that drops below the row when
   tapped. Reuses the .pc-row primitive shipped on Targets so the picker
   visually matches what the user already knows. */
.disco-action--lookup {
  padding: 0 13px;
  color: var(--accent);
  border-color: rgba(59, 130, 246, .35);
  background: rgba(59, 130, 246, .12);
}
.disco-action--lookup:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
.disco-action--lookup:active { transform: scale(.96); }

@keyframes triage-match-pulse {
  0%, 100% { box-shadow: 0 0 0 var(--accent-glow); }
  50%      { box-shadow: 0 0 22px var(--accent-glow); }
}
.triage-row.is-matching {
  position: relative;
}
.triage-row.is-matching::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  animation: triage-match-pulse 1s ease-in-out infinite;
  pointer-events: none;
}

.triage-row__picker {
  margin: -2px 8px 10px 56px;
  padding: 10px 12px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 6px;
  animation: triage-picker-in .18s ease both;
}
@keyframes triage-picker-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.triage-row__picker-header {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 2px 4px;
}
.triage-row__picker-error {
  font-size: 12px;
  color: var(--error);
  padding: 6px 4px 0;
}
@media (max-width: 480px) {
  .triage-row__picker { margin-left: 12px; margin-right: 4px; padding: 8px; }
}

/* Bulk auto-match bar inside the unknown disclosure. */
.triage-bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
}
.triage-bulk-bar__hint {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: 1; min-width: 0;
}
.triage-bulk-bar .btn { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 480px) {
  .triage-bulk-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .triage-bulk-bar__hint { text-align: center; }
}

/* Lightweight in-app toast.  Used when an action result needs to surface
   but isn't worth disrupting the page (e.g. bulk auto-match summary). */
.app-toast {
  position: fixed;
  left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(20px);
  z-index: 1100;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  background: rgba(18, 18, 26, .96);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.app-toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.app-toast--error {
  border-color: rgba(239, 68, 68, .35);
  color: var(--error);
}

/* ─── PriceCharting result picker — trader-scanner row ─────────────────────
   Used in the "Look up card" modal. Each row is a tappable card-comp result;
   left zone = set/parallel/card#, right zone = PSA10 headline + raw→10 spread.
   Stacked tight; tabular numerics; a single accent rail on the left edge that
   appears on hover/focus to mark the active row without a heavy fill. */
.pc-pick {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 4px;
}
/* Legacy intro — kept for any other surface that uses it. The picker now
   uses `.pc-pick__header` instead, which actually answers the user's
   "did it find my player?" question. */
.pc-pick__intro {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 0 4px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-muted);
}

/* Search-result confirmation header. Tells the user up front: "this many
   matches, for this player" — so they never wonder whether the algorithm
   understood them. The hint underneath is the call to action. */
.pc-pick__header {
  padding: 4px 4px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-glass);
}
.pc-pick__header-line {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}
.pc-pick__count-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  color: var(--accent);
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .25);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pc-pick__for {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--text-primary);
}
.pc-pick__for-prefix {
  font-size: 12px; color: var(--text-muted);
  text-transform: lowercase;
}
.pc-pick__for-player {
  font-size: 14.5px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.pc-pick__for--multi {
  font-size: 12px; color: var(--text-muted);
  font-style: italic;
}
.pc-pick__hint {
  margin-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-muted);
}

/* Unmatched-token banner. Quiet amber tone — disclosure, not error.
   The diagnostic that tells you "you typed '1st auto' but PriceCharting
   doesn't have a row matching that"; lets you reformulate or accept. */
.pc-pick__unmatched {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, .07);
  border: 1px solid rgba(245, 158, 11, .25);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.pc-pick__unmatched-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--warning);
  flex-shrink: 0;
  padding-top: 2px;
}
.pc-pick__unmatched-token {
  display: inline-block;
  padding: 1px 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 600;
  color: var(--warning);
  background: rgba(245, 158, 11, .12);
  border-radius: 4px;
}
.pc-pick__unmatched-sep { color: var(--text-muted); }

/* Product-family section header. Used when results span multiple kinds
   of cards (Prospects vs. Autograph vs. Auto Relic) — a thin labeled
   divider tells the user the list isn't homogeneous. */
.pc-family {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px 4px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc-family:first-of-type { padding-top: 6px; }
.pc-family::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: var(--border-glass);
  margin-left: 4px;
}
.pc-family__name { color: var(--text-secondary); }
.pc-family__count {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: .4px;
}

/* Legacy player group selector — kept for compatibility but unused now
   that the picker groups by product family instead. */
.pc-group {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 4px 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-primary);
}
.pc-group::before {
  content: ''; flex: 0 0 8px; height: 1px;
  background: var(--border-glass);
}
.pc-group::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: var(--border-glass);
}
.pc-group:first-child { padding-top: 4px; }

.pc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px 11px 14px;
  width: 100%;
  text-align: left;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.pc-row + .pc-row { margin-top: 6px; }
.pc-row::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px; background: transparent;
  transition: background .15s ease, transform .15s ease;
  transform: scaleY(0.6); transform-origin: center;
}
.pc-row:hover, .pc-row:focus-visible {
  background: var(--bg-card-hover);
  border-color: var(--border-glass);
  outline: none;
}
.pc-row:hover::before, .pc-row:focus-visible::before {
  background: var(--accent); transform: scaleY(1);
}
.pc-row:active { transform: scale(0.99); }

/* Left zone: set name (primary), parallel chip + card # underneath. */
.pc-row__left { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-row__set {
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-row__set .pc-row__year {
  display: inline-block; margin-right: 6px;
  color: var(--text-muted); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.pc-row__sub {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pc-row__num { letter-spacing: .3px; }
.pc-row__parallel {
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: .4px;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 999px;
}
.pc-row__player {
  /* Only shown when multiple players in result set — already sectioned above,
     so this class is hidden by default. JS adds a player line conditionally. */
  font-size: 11px; color: var(--text-muted);
}

/* Right zone: headline price + spread + confidence. */
.pc-row__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.pc-row__price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 16px; font-weight: 700; line-height: 1;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.pc-row__price .pc-row__price-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  color: var(--text-muted); text-transform: uppercase;
  margin-right: 2px;
}
.pc-row__price--missing { color: var(--text-muted); font-weight: 600; }

.pc-row__spread {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 500;
  color: var(--text-muted);
}
.pc-row__spread .pc-row__arrow {
  display: inline-block; opacity: .55; font-size: 9px; letter-spacing: -1px;
}
.pc-row__mult {
  display: inline-flex; align-items: center;
  margin-left: 2px;
  padding: 1px 6px;
  font-size: 10px; font-weight: 700;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.pc-row__mult--hot {
  color: var(--success);
  background: var(--success-glow);
}
.pc-row__mult--warm {
  color: var(--warning);
  background: var(--warning-glow);
}
.pc-row__mult--mild {
  color: var(--text-muted);
  background: rgba(255,255,255,.06);
}

/* Confidence indicator for sales-volume signal — lives inline in the meta
   line of the left column. Dot color = tier; trailing number = lifetime
   sales count from PriceCharting. The whole element gets a tooltip
   spelling out the meaning so newcomers don't have to decode the dot. */
.pc-row__conf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px 1px 6px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
  cursor: help;
}
.pc-row__conf-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-muted); opacity: .6;
  flex-shrink: 0;
}
.pc-row__conf-num { line-height: 1; }
.pc-row__conf--high .pc-row__conf-dot { background: var(--success); opacity: 1; }
.pc-row__conf--mid  .pc-row__conf-dot { background: var(--warning); opacity: 1; }
.pc-row__conf--low  .pc-row__conf-dot { background: var(--text-muted); opacity: .6; }

@media (max-width: 380px) {
  .pc-row { padding-right: 14px; }
}

/* Labeled legs for the raw → PSA 10 spread.  The tag is a small uppercase
   eyebrow above the number so a first-time user reads "Raw $11.50" instead
   of an unlabeled price. */
.pc-row__spread-leg {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.pc-row__spread-tag {
  font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); opacity: .75;
}

/* "low confidence" pill — sample size below 30.  Quiet amber so it warns
   without dominating the row. */
.pc-row__lowconf {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--warning);
  background: var(--warning-glow);
  border-radius: 999px;
  cursor: help;
}

/* ─── Browse masthead ──────────────────────────────────────────────────
   Editorial header above the search bar.  Two large numerical headlines
   with their categorical labels underneath, separated by a vertical rule.
   Dateline strip at the bottom reads like a price-guide edition stamp. */
.b-masthead {
  margin: 4px 2px 14px;
  padding: 0;
}
.b-masthead__row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 0 14px;
}
.b-masthead__metric { min-width: 0; }
.b-masthead__num {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--b-ivory);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' on;
}
/* Both masthead numbers stay ivory now — the accent is reserved for action,
   not informational metrics.  The "hot candidates" emphasis comes from the
   label underneath, not from coloring the digits. */
.b-masthead__num--accent { color: var(--b-ivory); }
.b-masthead__lbl {
  margin-top: 6px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
}
.b-masthead__rule {
  align-self: stretch;
  background: var(--b-rule-strong);
  width: 1px;
}
.b-masthead__dateline {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--b-rule);
  border-bottom: 1px solid var(--b-rule);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(244, 241, 234, .42);
}
.b-masthead__edition {
  padding: 2px 6px;
  font-weight: 700;
  letter-spacing: .26em;
  color: rgba(244, 241, 234, .72);
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  border-radius: 2px;
}
.b-masthead__when { font-variant-numeric: tabular-nums; }
.b-masthead--empty { padding: 18px 0 8px; }
.b-masthead--empty .b-masthead__title {
  font-size: 22px; font-weight: 700; letter-spacing: -.015em;
  color: var(--b-ivory);
}
.b-masthead--empty .b-masthead__sub {
  margin-top: 6px;
  font-size: 13px; color: rgba(244, 241, 234, .55);
}

/* ─── Footnote-style legend strip ──────────────────────────────────────
   Replaces the prior blue glass card.  Reads like a price-guide footnote
   key: hairlines top and bottom, definition list inline, tiny × dismiss
   anchored right.  Dismissal persists in localStorage. */
.b-legend {
  display: flex; align-items: flex-start;
  gap: 14px;
  margin: 4px 2px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--b-rule);
  border-bottom: 1px solid var(--b-rule);
  background: transparent;
  font-size: 12px; line-height: 1.5;
  color: rgba(244, 241, 234, .55);
}
.b-legend__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.b-legend__line {
  display: flex; gap: 10px;
  align-items: baseline;
}
.b-legend__term {
  flex-shrink: 0;
  min-width: 86px;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .85);
}
.b-legend__def { color: rgba(244, 241, 234, .65); }
.b-legend__dismiss {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; font-weight: 400;
  color: rgba(244, 241, 234, .55);
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.b-legend__dismiss:hover,
.b-legend__dismiss:active {
  color: var(--b-accent);
  border-color: var(--b-accent-edge);
}
@media (max-width: 480px) {
  .b-legend__line { flex-direction: column; gap: 2px; }
  .b-legend__term { min-width: 0; }
}

/* ─── "About this card" detail sheet ──────────────────────────────────
   Trading Floor edition.  Eyebrow / heroic title / hairline numeric
   strip / quiet warning rule / outlined-vs-filled CTA pair.  Same
   vocabulary as the Browse rows so the modal reads as a magnified
   version of the row you tapped. */
.b-sheet { display: flex; flex-direction: column; gap: 18px; }

/* Identity stack — small-caps eyebrow above a heroic editorial title. */
.b-sheet__id {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--b-rule);
}
.b-sheet__id .b-sheet__set {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
  margin-bottom: 8px;
}
.b-sheet__id .b-sheet__name {
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: -.014em;
  color: var(--b-ivory);
  line-height: 1.2;
}

/* Math block — no card chrome, hairline rules, mono numerics. */
.b-sheet__math {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.b-sheet__math-line {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 500;
  letter-spacing: -.005em;
  color: var(--b-ivory);
}
.b-sheet__leg {
  display: inline-flex; flex-direction: column; gap: 4px;
  align-items: flex-start;
}
.b-sheet__leg-tag {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
}
.b-sheet__arrow {
  font-family: 'Inter Tight', sans-serif;
  color: rgba(244, 241, 234, .35);
  font-size: 14px;
  align-self: flex-end;
  padding-bottom: 2px;
}
/* Multiplier pill — solid gold, dark ink.  Matches .b-row__mult--hot. */
.b-sheet__mult {
  margin-left: auto;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: -.005em;
  color: var(--accent-ink);
  background: var(--b-accent);
  border-radius: 4px;
  white-space: nowrap;
}
.b-sheet__sales {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--b-rule-strong);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color: rgba(244, 241, 234, .5);
  font-variant-numeric: tabular-nums;
}

/* Low-confidence warning — quiet hairline rule, no fill, warm accent. */
.b-sheet__warn {
  position: relative;
  padding: 12px 0 12px 14px;
  border: none;
  border-top: 1px solid var(--b-rule);
  border-bottom: 1px solid var(--b-rule);
  border-radius: 0;
  background: transparent;
  font-size: 12.5px; line-height: 1.5;
  color: var(--b-warm);
}
.b-sheet__warn::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--b-warm);
}

.b-sheet__hint {
  font-size: 12px; line-height: 1.55;
  color: rgba(244, 241, 234, .55);
}

/* CTAs — outlined "Save" + filled gold "Find listings".  Order on mobile
   puts the primary action on top so the thumb-to-button distance is
   shorter; on >=480 they sit side-by-side, primary on the right. */
.b-sheet__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 6px;
}
.b-sheet__cta {
  width: 100%; justify-content: center;
  border-radius: 4px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 16px;
  min-height: 48px;
}
.b-sheet .btn-secondary.b-sheet__cta {
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  color: var(--b-ivory);
}
.b-sheet .btn-secondary.b-sheet__cta:hover,
.b-sheet .btn-secondary.b-sheet__cta:active {
  border-color: var(--b-accent-edge);
  color: var(--b-accent);
  background: var(--b-accent-soft);
}
.b-sheet .btn-primary-cta.b-sheet__cta {
  background: var(--b-accent);
  color: var(--accent-ink);
  border: none;
  box-shadow: none;
}
.b-sheet .btn-primary-cta.b-sheet__cta:hover,
.b-sheet .btn-primary-cta.b-sheet__cta:active {
  background: var(--accent-hover);
}
.b-sheet .btn-primary-cta.b-sheet__cta:disabled,
.b-sheet .btn-secondary.b-sheet__cta:disabled {
  opacity: .55;
}
@media (max-width: 480px) {
  .b-sheet__actions { grid-template-columns: 1fr; }
  .b-sheet__cta:first-child { order: 2; }
}

/* ─── Hunting tab — card-centric collapsed view ──────────────────────── */
.h-newpill {
  margin-left: auto; margin-right: 6px;
  padding: 1px 8px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--warning);
  background: var(--warning-glow);
  border-radius: 999px;
}

.h-listings {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.h-listings__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted);
}
.h-listings__meta { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; }
.h-listings__list { display: flex; flex-direction: column; gap: 8px; }
.h-listings__empty { padding: 8px 0; font-size: 12px; color: var(--text-muted); }

.h-listing {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}
.h-listing--new {
  background: rgba(60, 130, 246, .07);
  border-color: rgba(60, 130, 246, .25);
}
.h-listing__thumb {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.04);
  border-radius: 6px;
}
.h-listing__thumb--empty {
  background-image: linear-gradient(135deg, rgba(255,255,255,.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.05) 75%, transparent 75%);
  background-size: 8px 8px;
}
.h-listing__body { flex: 1; min-width: 0; }
.h-listing__title {
  font-size: 12.5px; font-weight: 500;
  color: var(--text-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-listing__meta {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
  font-size: 11px; color: var(--text-muted);
}
.h-listing__price { font-weight: 700; color: var(--text-strong); }
.h-listing__ends { color: var(--warning); }
.h-listing__new {
  padding: 0 6px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--success); background: var(--success-glow);
  border-radius: 999px;
}
.h-listing__actions {
  flex-shrink: 0;
  display: flex; gap: 4px;
}
@media (max-width: 480px) {
  .h-listing__title { font-size: 12px; white-space: normal; }
}

/* Focused listing — already moved to watchlist.  Left-edge stripe and
   slightly elevated background so users see "this is what I'm acting
   on" at a glance. */
.h-listing--focused {
  position: relative;
  padding-left: 14px;
  background: rgba(60, 130, 246, .08);
  border-color: rgba(60, 130, 246, .35);
}
.h-listing--focused::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, #3c82f6);
  border-radius: 2px 0 0 2px;
}
.h-listing__status {
  font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-strong);
  font-size: 10px;
}
.h-listing__maxbid { color: var(--accent, #3c82f6); font-weight: 600; }
.h-listing__vet { color: var(--text-muted); font-style: italic; }

.h-edit__title {
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  font-size: 13px; color: var(--text-default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Listing wrapper — holds the row + the inline-expanded detail panel */
.h-listing-wrap { display: flex; flex-direction: column; gap: 6px; }
.h-listing--clickable { cursor: pointer; user-select: none; }
.h-listing--clickable:hover { background: rgba(255,255,255,.05); }
.h-listing__thumb--btn {
  cursor: zoom-in;
  border: 0; padding: 0;
  background-color: rgba(255,255,255,.04);
  background-size: cover; background-position: center;
}
/* Inline detail panel under a listing row */
.h-detail {
  display: grid; gap: 12px;
  padding: 12px 14px;
  margin-left: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}
@media (min-width: 720px) {
  .h-detail { grid-template-columns: minmax(160px, 240px) 1fr; align-items: start; }
}
.h-detail__photos {
  display: flex; flex-wrap: wrap; gap: 6px;
  /* Reserve room for two rows of 64px thumbs + 6px gap so the panel
     doesn't grow when async-fetched photos arrive. */
  min-height: 134px;
  align-content: flex-start;
}
.h-detail__thumb {
  width: 64px; height: 64px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.04);
  cursor: zoom-in;
  padding: 0;
}
.h-detail__thumb:hover { border-color: var(--accent, #3c82f6); }
/* Skeleton placeholder — keeps the strip's footprint stable while the
   eBay item-detail call is in flight. */
.h-detail__thumb--skeleton {
  cursor: default;
  background-color: rgba(255,255,255,.025);
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,.025) 0%,
    rgba(255,255,255,.06) 50%,
    rgba(255,255,255,.025) 100%
  );
  background-size: 200% 100%;
  animation: h-detail-shimmer 1.4s ease-in-out infinite;
}
.h-detail__thumb--ghost {
  /* No shimmer — these are the trailing skeletons after real thumbs.
     Quiet so the user doesn't keep tracking them as 'still loading'. */
  animation: none;
  opacity: .35;
  background: rgba(255,255,255,.025);
}
@keyframes h-detail-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.h-detail__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h-detail__row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; font-size: 12.5px; }
.h-detail__label {
  text-transform: uppercase; letter-spacing: .4px;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-muted); padding-top: 2px;
}
.h-detail__value {
  color: var(--text-default);
  word-break: break-word; min-width: 0;
}
.h-detail__open { align-self: flex-start; margin-top: 4px; }

/* Lightbox — full-screen image viewer */
.lightbox {
  position: fixed; inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: lightbox-in .12s ease;
}
.lightbox.is-leaving { animation: lightbox-out .12s ease forwards; }
@keyframes lightbox-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lightbox-out { to { opacity: 0; } }
.lightbox__stage {
  position: relative;
  max-width: 96vw; max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__img {
  max-width: 96vw; max-height: 88vh;
  object-fit: contain;
  background: #111;
  border-radius: 6px;
  user-select: none;
}
.lightbox__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__nav:hover { background: rgba(0, 0, 0, .8); }
.lightbox__nav:disabled { opacity: .35; cursor: not-allowed; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__close {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px;
  font-size: 18px; color: #fff;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__counter {
  margin-top: 12px;
  padding: 4px 10px;
  font-size: 12px; color: rgba(255,255,255,.7);
  background: rgba(0, 0, 0, .5);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ─── Chosen card surface (post-pick view) ───────────────────────────────
   Replaces the old flat price table.  Leads with the buy-case math —
   raw → PSA 10 spread + grading-fee EV — because that's the actual
   "why am I saving this" answer.  Reference grade table is demoted to
   a collapsible disclosure. */
.pc-chosen { display: flex; flex-direction: column; gap: 14px; }

.pc-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.pc-back:hover { color: var(--accent); border-color: var(--border-glass); }
.pc-back__arrow { font-size: 14px; line-height: 1; }

/* 1. Identity card — what you picked. Strong, but not louder than the buy case.
   Two-column layout: card photo (when available) | text identity. */
.pc-chosen__identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
}
.pc-chosen__identity-text { min-width: 0; }

/* Card photo — sits left of the identity text. eBay listing aspect ratio
   (roughly 3:4 for a vertical card) so the image doesn't squash. */
.pc-chosen__photo {
  width: 64px; height: 86px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-glass);
}
.pc-chosen__photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Empty placeholder — quiet, not broken-looking. The icon is generic
   "image", and the hint copy explains the next step the user can take. */
.pc-chosen__photo--empty,
.pc-chosen__photo--broken {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.01) 100%);
  border: 1px dashed rgba(255,255,255,.12);
  color: var(--text-muted);
  cursor: help;
}
.pc-chosen__photo-placeholder { opacity: .55; }
.pc-chosen__photo-empty-hint {
  font-size: 9px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .7;
}

@media (max-width: 380px) {
  .pc-chosen__photo { width: 56px; height: 76px; }
}
.pc-chosen__eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.pc-chosen__title {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 16px; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.pc-chosen__parallel {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 999px;
}
.pc-chosen__sub {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 4px;
  font-size: 12.5px; color: var(--text-secondary);
}
.pc-chosen__num {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* 2. Buy case — the headline math. This is the visual centerpiece. */
.pc-chosen__buycase {
  padding: 16px;
  background: linear-gradient(135deg,
    rgba(34, 197, 94, .04) 0%,
    rgba(255, 255, 255, .03) 60%,
    rgba(255, 255, 255, .02) 100%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
}
.pc-chosen__buycase-head {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 12px;
}
.pc-chosen__spread {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.pc-chosen__spread-leg { display: flex; flex-direction: column; gap: 2px; }
.pc-chosen__spread-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-muted);
}
.pc-chosen__spread-num {
  font-size: 20px; font-weight: 700; line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.pc-chosen__spread-num--big {
  font-size: 26px;
  background: linear-gradient(135deg, var(--success) 0%, #4ade80 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.pc-chosen__spread-arrow {
  font-size: 22px; color: var(--text-muted);
  line-height: 1;
}
.pc-chosen__mult {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.pc-chosen__mult--hot  { color: var(--success); background: var(--success-glow); }
.pc-chosen__mult--warm { color: var(--warning); background: var(--warning-glow); }
.pc-chosen__mult--mild { color: var(--text-muted); background: rgba(255,255,255,.05); }

/* Math breakdown — explicit grading-fee + net calculation. */
.pc-chosen__math {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-glass);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pc-chosen__math-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.pc-chosen__math-label { color: var(--text-secondary); }
.pc-chosen__math-value {
  color: var(--text-primary);
  font-weight: 600;
}
.pc-chosen__math-value--win  { color: var(--success); font-weight: 700; }
.pc-chosen__math-value--lose { color: var(--error);   font-weight: 700; }
.pc-chosen__math-caveat {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 11.5px; line-height: 1.45;
  color: var(--text-muted);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius-sm);
  border-left: 2px solid rgba(255, 255, 255, .12);
  font-style: italic;
}

/* 3. Reference grade table — collapsed disclosure, demoted from headline. */
.pc-chosen__grades {
  background: var(--bg-input);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pc-chosen__grades > summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-muted);
  list-style: none;
}
.pc-chosen__grades > summary::-webkit-details-marker { display: none; }
.pc-chosen__grades > summary::before {
  content: '▸'; display: inline-block;
  margin-right: 10px;
  font-size: 10px;
  transition: transform .15s ease;
  color: var(--text-muted);
}
.pc-chosen__grades[open] > summary::before { transform: rotate(90deg); }
.pc-chosen__grades-count {
  font-weight: 600; letter-spacing: .4px;
  font-variant-numeric: tabular-nums;
}
.pc-chosen__grade-table {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  padding: 4px 14px 12px;
  border-top: 1px solid var(--border-glass);
}
.pc-chosen__grade-table .kvp {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 0;
  font-size: 12.5px;
}
@media (max-width: 480px) {
  .pc-chosen__grade-table { grid-template-columns: 1fr; }
}

/* 4. Save CTA — full-width, dominant. */
.pc-chosen__save { width: 100%; padding: 14px 16px; font-size: 14px; }

/* Saved state — replaces the panel content with a clear confirmation. */
.pc-chosen__saved {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 28px 16px 24px;
  text-align: center;
}
.pc-chosen__saved-mark {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  color: var(--success);
  background: var(--success-glow);
  border-radius: 50%;
  margin-bottom: 4px;
}
.pc-chosen__saved-title {
  font-size: 16px; font-weight: 700;
  color: var(--text-primary);
}
.pc-chosen__saved-sub {
  font-size: 13px; color: var(--text-secondary);
  max-width: 38ch;
}

/* Result-picker empty state. */
.pc-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 36px 12px 28px;
  text-align: center;
  color: var(--text-muted);
}
.pc-empty__hd {
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.pc-empty__body { font-size: 13px; color: var(--text-secondary); max-width: 28ch; }

/* ─── Section eyebrow (tiny all-caps section header, used on every tab) ──── */
.section-eyebrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 18px 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.section-eyebrow:first-child { margin-top: 4px; }
.section-eyebrow .lead { color: var(--text-secondary); }
.section-eyebrow .meta {
  font-weight: 500; letter-spacing: .4px; text-transform: none;
  font-size: 11px; color: var(--text-muted);
}
.section-eyebrow .accent { color: var(--accent); letter-spacing: 1.6px; }

/* ─── Empty state (shared across every tab) ───────────────────────────────── */
/* (already defined above; just ensure all tabs follow the same DOM shape)    */

/* ─── Disclosure (collapsible section header) ─────────────────────────────── */
.disclosure { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); overflow: hidden; }
.disclosure + .disclosure { margin-top: 12px; }
.disclosure__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; min-height: 48px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: none; border: none; width: 100%;
  color: var(--text-primary); text-align: left;
}
.disclosure__head:active { background: var(--bg-card-hover); }
.disclosure__title { flex: 1; font-size: 15px; font-weight: 600; }
.disclosure__chev { transition: transform .2s ease; opacity: .6; }
.disclosure.is-open .disclosure__chev { transform: rotate(180deg); }
.disclosure__body { display: none; padding: 0 16px 16px; }
.disclosure.is-open .disclosure__body { display: block; }

/* ─── Snipe bar (compact stats + actions) ─────────────────────────────────── */
.snipe-bar { /* override the existing definition lower in the file */ }

/* ─── Modal ───────────────────────────────────────────────────────────────── */
@keyframes modal-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise-in   { from { opacity: 0; transform: translateY(16px) scale(.98); }
                             to   { opacity: 1; transform: translateY(0)   scale(1); } }
@keyframes modal-fade-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-fall-out  { from { opacity: 1; transform: translateY(0) scale(1); }
                             to   { opacity: 0; transform: translateY(8px) scale(.985); } }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: modal-fade-in .18s ease both;
}
.modal-backdrop.is-leaving { animation: modal-fade-out .14s ease both; }

.modal {
  position: relative;
  width: 100%; max-width: 520px;
  /* Slightly lifted off pure black so the rounded top edge reads.  No
     glass blur — this is editorial, not iOS Notification Center. */
  background: #14141a;
  border-top: 1px solid var(--b-rule-strong);
  border-radius: 14px 14px 0 0;
  padding: 22px 20px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  max-height: 90dvh; overflow-y: auto;
  animation: modal-rise-in .22s cubic-bezier(.2,.7,.2,1) both;
  /* Hairline gold cap across the very top — restrained signature, not a
     glow.  Replaces the prior radius-pill chrome. */
  box-shadow: inset 0 1px 0 var(--b-accent-edge);
}
.is-leaving .modal { animation: modal-fall-out .14s ease both; }

@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 8px; border: 1px solid var(--b-rule-strong); }
}

/* Compact size — used for confirms.  Tighter padding, shorter max width. */
.modal--compact { max-width: 400px; padding: 18px 20px 16px; }
.modal--compact .modal-actions { margin-top: 18px; }

/* Danger tone — destructive confirmations.  A red glow rail across the top
   edge replaces the usual chrome.  Eyebrow above the title sets the stakes. */
.modal--danger { padding-top: 24px; }
.modal__rail {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--error) 30%,
    var(--error) 70%,
    transparent 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 0 18px var(--error-glow), 0 0 6px var(--error-glow);
}

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: -2px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--b-rule);
}
.modal-head__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modal-head__eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .55);
  text-shadow: none;
}
.modal-head h2 {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .65);
  line-height: 1.25;
}
.modal--danger .modal-head__eyebrow { color: var(--error); text-shadow: none; }
.modal--danger .modal-head h2 {
  font-size: 19px; letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 700;
  color: var(--b-ivory);
}
.modal-head__close {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; font-weight: 400;
  color: rgba(244, 241, 234, .55);
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease;
}
.modal-head__close:hover,
.modal-head__close:active {
  color: var(--b-accent);
  border-color: var(--b-accent-edge);
  background: transparent;
}

.modal__body-text {
  font-size: 14px; line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Structured lists inside a modal — used by Snipe failure summary and
   "Seller items" overlay. Replaces what used to be alert() walls of text. */
.modal__failure-list,
.modal__seller-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 50vh; overflow-y: auto;
}
.modal__failure-list li {
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
}
.modal__failure-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.modal__failure-reason { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.modal__seller-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}
.modal__seller-price {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 60px;
}
.modal__seller-title {
  font-size: 12.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

/* Inline error banner inside a modal — replaces native alert() for failed
   primary actions. Rendered above the action row so it's contextually clear
   the buttons can still be retried. */
.modal__error {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.4;
  color: var(--error);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-left: 3px solid var(--error);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.modal__error[hidden] { display: none; }

.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 1; }
.modal--compact .modal-actions { gap: 10px; }
.modal--compact .modal-actions .btn { padding: 11px 14px; font-size: 14px; font-weight: 600; }

/* Destructive primary button — used for the confirmation primary action. */
.btn-danger {
  background: var(--error);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 0 22px var(--error-glow), inset 0 1px 0 rgba(255,255,255,.12);
  font-weight: 600;
  letter-spacing: .1px;
  transition: var(--transition);
}
.btn-danger:hover {
  background: #dc2626;
  box-shadow: 0 0 28px var(--error-glow), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-danger:active { transform: scale(.98); background: #b91c1c; }
.btn-danger:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* ─── Snipe table ─────────────────────────────────────────────────────────── */
.snipe-bar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; background: var(--bg-input);
  border-radius: var(--radius-md); margin-bottom: 14px;
  font-size: 13px; color: var(--text-secondary);
}
.snipe-bar b { color: var(--text-primary); }
.snipe-bar .btn-sm { flex: 1 1 auto; min-width: 0; }
.snipe-bar .stat { padding: 4px 10px 4px 4px; flex: 1 1 100%; }
@media (min-width: 640px) { .snipe-bar .stat { flex: 0 1 auto; } }

/* ─── Utilities ───────────────────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--text-muted); }
.danger { color: var(--error); }
.warning { color: var(--warning); }
.success { color: var(--success); }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.hidden { display: none !important; }
.spacer { flex: 1; }

/* ════════════════════════════════════════════════════════════════════════
   Browse — Trading Floor redesign (mobile-first, iOS Safari primary target)
   ────────────────────────────────────────────────────────────────────────
   Aesthetic: editorial-financial.  Bloomberg-terminal density meets
   Beckett-price-guide typography.  One bright accent (chartreuse) for hot
   multipliers; everything else lives in charcoal/ivory.  Numbers are set
   in JetBrains Mono on a tabular baseline so prices align column-wise.
   The display family is Inter Tight — humanist enough for a player name
   to feel like a name, technical enough for the numeric strip.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --b-accent: #c8a85a;             /* gold leaf — "hot" signal, refined */
  --b-accent-soft: rgba(200, 168, 90, .12);
  --b-accent-edge: rgba(200, 168, 90, .32);
  --b-warm: #fbbf24;
  --b-warm-soft: rgba(251, 191, 36, .14);
  --b-ivory: #f4f1ea;
  --b-rule: rgba(255, 255, 255, .06);
  --b-rule-strong: rgba(255, 255, 255, .12);
  --b-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --b-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Body already inherits --b-display via the global rule.  Mono numerics
   are opt-in per element below. */
.b-row__strip,
.b-row__mult,
.b-row__leg-num {
  font-family: var(--b-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Sticky search header ─────────────────────────────────────────────
   Stays fixed at the top of the scroll region while typing — primary fix
   for iOS Safari where losing the input mid-scroll was the #1 frustration.
   Backdrop blur keeps the result list readable behind it.  Input is 17px
   so iOS Safari does not zoom on focus (the 16px threshold is unreliable
   on certain iPhone models, 17px is the safe floor). */
.b-search {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: -16px -14px 0;     /* full-bleed against page-content padding */
  padding: 14px 14px 12px;
  background: rgba(10, 10, 15, .82);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--b-rule);
}
.b-search__icon {
  left: 26px;
  color: var(--b-ivory);
  opacity: .55;
}
.b-search__input {
  height: 48px;                              /* meets WCAG tap target */
  padding: 0 44px 0 50px;
  font-size: 17px;                           /* iOS no-zoom floor */
  font-family: var(--b-display);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--b-ivory);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--b-rule-strong);
  border-radius: 14px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.b-search__input::placeholder {
  color: rgba(244, 241, 234, .35);
  font-weight: 400;
}
.b-search__input:focus {
  background: rgba(255, 255, 255, .07);
  border-color: var(--b-accent-edge);
  box-shadow: 0 0 0 4px rgba(202, 255, 51, .08);
}
.b-search__clear {
  right: 22px;
  width: 32px; height: 32px;
  font-size: 13px;
  color: var(--b-ivory); opacity: .6;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
}
.b-search__clear:hover,
.b-search__clear:active { opacity: 1; background: rgba(255, 255, 255, .14); }

/* ─── Results eyebrow ─────────────────────────────────────────────────
   Newspaper-style section label.  Lead is small-caps display, meta is mono
   so the count aligns visually with the numbers in the rows below. */
.b-eyebrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  padding: 0 2px;
}
.b-eyebrow__lead {
  font-family: var(--b-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--b-ivory);
}
.b-eyebrow__lead::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 9px;
  background: var(--b-accent);
  border-radius: 1px;
  vertical-align: 0;
  /* No glow — single small mark, not a beacon. */
}
.b-eyebrow__meta {
  font-family: var(--b-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .04em;
  color: rgba(244, 241, 234, .5);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ─── Result list (the big change) ─────────────────────────────────────
   Replaces the old card-grid look with a hairline-divided full-bleed list.
   Recovers ~28px of horizontal space per row vs. the previous padded card
   chrome, which is exactly what was getting eaten on iPhone widths. */
.b-list {
  margin: 0 -14px;                /* full-bleed on mobile */
  border-top: 1px solid var(--b-rule);
}
@media (min-width: 640px) {
  .b-list { margin: 0; border-top: none; }
}

.b-row {
  position: relative;
  display: flex; align-items: stretch;
  width: 100%;
  padding: 0;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--b-rule);
  border-radius: 0;
  color: var(--b-ivory);
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
  .b-row {
    border-radius: 12px;
    border: 1px solid var(--b-rule);
    margin-bottom: 4px;
  }
}
.b-row:active {
  background: rgba(255, 255, 255, .045);
  transform: scale(.997);
}
.b-row:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 2px var(--b-accent-edge);
}

/* Left rail — color encodes spread tier.  Hot rows light up chartreuse. */
.b-row__rail {
  flex-shrink: 0;
  width: 3px;
  background: transparent;
  transition: background .18s ease, box-shadow .18s ease;
}
.b-row--hot   .b-row__rail {
  background: var(--b-accent);
}
.b-row--warm  .b-row__rail { background: var(--b-warm); }
.b-row--mild  .b-row__rail { background: rgba(255,255,255,.08); }
.b-row--untrusted .b-row__rail { background: rgba(255,255,255,.04); }

/* ─── Thumbnail slot ──────────────────────────────────────────────────
   Lives between the tier rail and the body.  Real eBay images get
   surfaced once the user has hunted that card; everything else gets
   the SVG card-back placeholder. */
.b-row__thumb {
  flex-shrink: 0;
  width: 48px; height: 64px;
  margin: 10px 0 10px 10px;
  border: 1px solid var(--b-rule-strong);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .025);
  display: flex; align-items: stretch; justify-content: stretch;
}
@media (min-width: 640px) {
  .b-row__thumb { width: 56px; height: 80px; margin-left: 12px; }
}
.b-row__thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.b-row__thumb-ph,
.b-row__thumb-ph svg {
  width: 100%; height: 100%; display: block;
}
.b-row__thumb--placeholder { background: transparent; }
.b-row__thumb--broken { background: rgba(255,255,255,.025); }

.b-row__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 10px 14px 10px 12px;
}

/* Eyebrow strip — confidence dot + set name + sales count.
   Single line, never wraps; the dot is what was the ●●● glyph. */
.b-row__eyebrow {
  display: flex; align-items: center;
  gap: 8px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  min-height: 14px;
}
.b-row__conf-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(244, 241, 234, .25);
  /* Use a tooltip so the hover/long-press still surfaces the sales count. */
  cursor: help;
}
.b-row__conf-dot--high { background: var(--b-accent); }
.b-row__conf-dot--mid  { background: rgba(244, 241, 234, .55); }
.b-row__conf-dot--low  { background: rgba(244, 241, 234, .22); }
.b-row__set {
  flex: 1; min-width: 0;
  font-weight: 700;
  color: rgba(244, 241, 234, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.b-row__sales {
  flex-shrink: 0;
  font-family: var(--b-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: rgba(244, 241, 234, .35);
  font-variant-numeric: tabular-nums;
}

/* Title row — heroic player name on the left, gold multiplier pill on the
   right.  Both sit at the same eye-stop so the verdict is always within
   thumb-reach next to the name. */
.b-row__head {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.b-row__hero {
  flex: 1; min-width: 0;
  font-family: var(--b-display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -.014em;
  line-height: 1.2;
  color: var(--b-ivory);
  /* clamp to one line on mobile; expands at >=640 if it doesn't fit */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .b-row__hero { font-size: 21px; }
}

/* Compact numeric strip — single line, mono, mid-dot separated. */
.b-row__strip {
  display: flex; align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--b-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--b-ivory);
  white-space: nowrap;
  overflow: hidden;
}
.b-row__leg {
  display: inline-flex; align-items: baseline; gap: 5px;
  min-width: 0;
}
.b-row__leg-tag {
  font-family: var(--b-display);
  font-size: 9px; font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
}
.b-row__leg-num {
  font-weight: 500;
  letter-spacing: -.01em;
}
.b-row__sep {
  color: rgba(244, 241, 234, .25);
  font-family: var(--b-display);
}

/* Multiplier pill — moves into .b-row__head, anchored right, smaller
   than the prior end-of-strip placement so it doesn't dominate the row. */
.b-row__mult {
  flex-shrink: 0;
  padding: 4px 8px 3px;
  font-family: var(--b-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: -.01em;
  border-radius: 4px;
  white-space: nowrap;
}
.b-row__mult--hot {
  color: var(--accent-ink);
  background: var(--b-accent);
}
.b-row__mult--warm {
  color: var(--b-warm);
  background: var(--b-warm-soft);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35);
}
.b-row__mult--mild,
.b-row__mult--muted {
  color: rgba(244, 241, 234, .5);
  background: rgba(255, 255, 255, .04);
}

/* Low-confidence footer.  Quiet amber strip, full-width under the strip. */
.b-row__warn {
  margin-top: 6px;
  padding: 6px 9px;
  font-family: var(--b-mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--b-warm);
  background: var(--b-warm-soft);
  border-radius: 4px;
}

/* ─── Skeleton rows during fetch ─────────────────────────────────────── */
@keyframes b-shimmer {
  0%   { background-position: -160% 0; }
  100% { background-position:  260% 0; }
}
.b-row--skeleton { pointer-events: none; }
.b-row--skeleton .b-row__rail { background: var(--b-rule); }
.sk {
  display: inline-block;
  height: 12px;
  border-radius: 4px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.10) 50%,
      rgba(255,255,255,.04) 100%);
  background-size: 200% 100%;
  animation: b-shimmer 1.4s ease-in-out infinite;
}
.sk--eyebrow { width: 60%; height: 9px; }
.sk--glyph   { width: 32px; height: 9px; }
.sk--hero    { flex: 1; height: 16px; max-width: 70%; }
.sk--leg     { width: 30%; height: 12px; }
.sk--mult    { width: 38px; height: 18px; border-radius: 4px; }
.sk--thumb   { width: 100%; height: 100%; border-radius: 0; }
.sk--lead    { width: 110px; height: 11px; }
.sk--meta    { width: 90px;  height: 11px; }
.b-eyebrow--skel { opacity: .8; }

/* ─── Saved-state overlay (preserve existing behavior, restyled) ──────── */
.b-row.is-saved > *:not(.b-row__saved-overlay) { opacity: .12; }
.b-row__saved-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--b-display);
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--b-accent);
  background: rgba(202, 255, 51, .06);
  border: 1px solid var(--b-accent-edge);
  border-radius: inherit;
}
.b-row__saved-mark {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: #0a0a0f;
  background: var(--b-accent);
  border-radius: 50%;
}

/* ─── Tighten the existing chrome to match ─────────────────────────────── */
.discover-status {
  background: transparent;
  border: none;
  padding: 8px 2px 2px;
}
.discover-status__primary {
  font-family: var(--b-display);
  font-size: 13px; font-weight: 600; color: var(--b-ivory);
}
.discover-status__sub {
  font-family: var(--b-mono);
  font-size: 10.5px; letter-spacing: .04em;
  color: rgba(244, 241, 234, .42);
}
.b-filters-disclosure {
  background: transparent;
  border: 1px solid var(--b-rule);
  border-radius: 10px;
}
.b-filters-disclosure > summary {
  font-family: var(--b-display);
  font-size: 10.5px; letter-spacing: .22em;
  color: rgba(244, 241, 234, .55);
}

/* ════════════════════════════════════════════════════════════════════════
   Page — generic design-system primitives
   ────────────────────────────────────────────────────────────────────────
   These class names are emitted by /js/page.js composers (Page.masthead,
   Page.eyebrow, Page.toolbar, Page.search, Page.empty, Page.list, etc).
   Most are aliases for the existing .b-* selectors so the same CSS
   already drives them; the ones below add the primitives that didn't
   exist before (page-level identity stack, toolbar wrapper, action
   cluster, empty-state icon).

   Future pages should never declare bespoke chrome — call the composers,
   the styles below take care of the look. */

/* Masthead identity stack — eyebrow + heroic title + kicker.  Sits above
   any optional metric grid the masthead may also include. */
.page__masthead-id {
  padding: 8px 0 14px;
}
.page__masthead-eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
  margin-bottom: 8px;
}
.page__masthead-title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 26px; font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.05;
  color: var(--b-ivory);
}
@media (max-width: 480px) {
  .page__masthead-title { font-size: 22px; }
}
.page__masthead-kicker {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(244, 241, 234, .55);
  line-height: 1.5;
}
.page__masthead-id + .b-masthead__row,
.page__masthead-id + .page__masthead-metrics {
  border-top: 1px solid var(--b-rule);
  padding-top: 14px;
}

/* Page-level toolbar — sticky action row that survives scroll.  Uses the
   same blur language as the search bar so the two stack cleanly. */
.page__toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  margin: 0 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--b-rule);
  background: transparent;
}
.page__toolbar--sticky {
  position: sticky;
  top: 0;     /* tabbar is its own sticky context above the panel scroll */
  z-index: 4;
  margin: -16px -14px 12px;
  padding: 12px 14px;
  background: rgba(10, 10, 15, .82);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
}
.page__toolbar > .btn,
.page__toolbar > .btn-sm,
.page__toolbar > button:not(.b-search__clear) {
  border-radius: 4px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 14px;
  min-height: 40px;
}

/* Action button cluster — bottom-of-card row of equal-width buttons. */
.page__actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 4px;
}
.page__actions > .btn,
.page__actions > .btn-sm,
.page__actions > a.btn,
.page__actions > button {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  min-height: 40px;
}

/* Empty-state icon slot — sits above the title. */
.page__empty-icon {
  display: flex; justify-content: center;
  margin-bottom: 10px;
  color: rgba(244, 241, 234, .35);
}
.page__empty-icon svg { width: 32px; height: 32px; }

/* Disclosure body wrapper — gives any composer-rendered children
   consistent inner padding regardless of what they are. */
.page__disclosure-body {
  /* No padding here — children own their own spacing.  This wrapper
     exists purely so composers don't have to know about <details>'s
     direct-child quirks. */
}

/* Empty-list shell — keeps vertical rhythm when a list resolves to zero
   items but no empty-state is supplied.  Reserves a tiny strip so the
   layout doesn't collapse to nothing. */
.page__list--empty {
  min-height: 1px;
}

/* ─── Reduced motion: kill shimmers and transforms ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .b-row { transition: none; }
  .b-row:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Hunting — Trading Floor overlay
   ────────────────────────────────────────────────────────────────────────
   Re-skins .tcard.h-card, .h-listing, .h-detail, the verdict badges and
   the focus stripe through the Trading Floor token system so Hunting
   speaks the same visual language as Browse.  No JS surgery — these are
   pure overrides keyed off classes already emitted by hunting.js.
   The shape is the same as Browse rows: small-caps eyebrow, heroic
   title, mono numeric strip, hairline dividers, single gold accent for
   actionable signals (verdict pill, focus stripe, max-bid value).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Card row (the target row that expands) ──────────────────────────
   Strips glass-card chrome and adopts the same hairline-list shape as
   .b-row on the Browse panel.  Full-bleed on mobile, padded card
   treatment at >=640px to match. */
.h-card.tcard {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-bottom: 1px solid var(--b-rule);
  border-radius: 0;
  margin: 0 -14px;            /* full-bleed against page-content padding */
  padding: 16px 14px;
  box-shadow: none;
}
.h-card.tcard + .h-card.tcard { margin-top: 0; }
@media (min-width: 640px) {
  .h-card.tcard {
    margin: 0 0 4px;
    border: 1px solid var(--b-rule);
    border-radius: 12px;
  }
}
.h-card.tcard.is-open {
  background: rgba(255, 255, 255, .015);
}

/* Header row inside the card — thumbnail | identity | verdict.  The
   identity stack rebuilds the eyebrow + heroic-title rhythm without
   changing the JS markup. */
.h-card .tcard__head { gap: 14px; align-items: flex-start; min-height: 0; }
.h-card .tcard__thumb {
  width: 44px; height: 60px;
  border-radius: 4px;
  border: 1px solid var(--b-rule-strong);
  background-color: rgba(255,255,255,.025);
}
.h-card .tcard__title {
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 19px; font-weight: 700;
  letter-spacing: -.014em;
  line-height: 1.2;
  color: var(--b-ivory);
  white-space: normal;
}
@media (min-width: 640px) {
  .h-card .tcard__title { font-size: 21px; }
}
/* Promote .tcard__sub to a small-caps eyebrow — same vocabulary as
   .b-row__set on the Browse rows. */
.h-card .tcard__sub {
  margin-top: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* place it visually above the title via flex-direction reverse on parent */
}
.h-card .tcard__id {
  display: flex; flex-direction: column-reverse;
  /* eyebrow rendered first via reverse order, hero (title) below it */
}

/* Verdict cluster — multiplier + badge stack.  Multiplier becomes the
   gold "hot pill" treatment; badges become outlined chips, no glow. */
.h-card .tcard__verdict { gap: 6px; align-items: flex-end; }
.h-card .tcard__mult {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  padding: 4px 10px;
  border-radius: 4px;
  line-height: 1;
}
.h-card .tcard__mult.go {
  color: var(--accent-ink);
  background: var(--b-accent);
}
.h-card .tcard__mult.marginal {
  color: var(--b-warm);
  background: var(--b-warm-soft);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .3);
}
.h-card .tcard__mult.avoid {
  color: rgba(244, 241, 234, .5);
  background: rgba(255, 255, 255, .04);
}
.h-card .tcard__mult.muted {
  color: rgba(244, 241, 234, .35);
  background: transparent;
}
/* Verdict text badge — outlined chip, no fill */
.h-card .badge {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  color: rgba(244, 241, 234, .55);
}
.h-card .badge-go       { color: var(--b-accent); border-color: var(--b-accent-edge); }
.h-card .badge-marginal { color: var(--b-warm);   border-color: rgba(251, 191, 36, .3); }
.h-card .badge-avoid    { color: rgba(244, 241, 234, .35); }
.h-card .badge-muted    { color: rgba(244, 241, 234, .42); }

/* Money / spread strip — convert to mono tabular numerics like the
   Browse numeric strip.  Same baseline so the two lists feel related. */
.h-card .tcard__money {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--b-rule-strong);
  color: var(--b-ivory);
}
.h-card .tcard__money b { font-weight: 600; color: var(--b-ivory); }
.h-card .tcard__money .arrow { color: rgba(244, 241, 234, .35); }

/* Attribution / chevron line beneath the strip — quiet teletype. */
.h-card .tcard__attrib {
  margin-top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .04em;
  color: rgba(244, 241, 234, .42);
}
.h-card .tcard__attrib .chev { color: rgba(244, 241, 234, .55); }

/* "NEW" pill above the listings group — outlined gold chip, no fill. */
.h-newpill {
  background: transparent;
  border: 1px solid var(--b-accent-edge);
  color: var(--b-accent);
  letter-spacing: .22em;
  font-size: 9px; font-weight: 800;
  padding: 2px 7px;
}

/* ─── Expanded detail body ──────────────────────────────────────────── */
.h-card .tcard__detail {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--b-rule);
}
.h-card .tcard__comps {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding-bottom: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.h-card .tcard__comps .row .label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
}
.h-card .tcard__comps .row b {
  color: var(--b-ivory);
  font-size: 14px; font-weight: 500;
}
.h-card .tcard__notes {
  background: transparent;
  border: 1px solid var(--b-rule);
  border-radius: 6px;
  font-size: 12px; line-height: 1.55;
  color: rgba(244, 241, 234, .65);
}

/* ─── Listings group inside an expanded card ─────────────────────────── */
.h-listings {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--b-rule);
}
.h-listings__head {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .55);
  margin-bottom: 10px;
}
.h-listings__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .04em;
  color: rgba(244, 241, 234, .42);
  text-transform: none; opacity: 1;
}
.h-listings__list { gap: 0; }
.h-listings__empty {
  padding: 14px 0;
  font-size: 12px;
  color: rgba(244, 241, 234, .42);
  font-style: normal;
  border-top: 1px solid var(--b-rule);
  border-bottom: 1px solid var(--b-rule);
}

/* ─── Listing row — full-bleed hairline list (same as .b-row anatomy) ─ */
.h-listing {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--b-rule);
  border-radius: 0;
  transition: background .15s ease;
}
.h-listing--clickable:hover,
.h-listing--clickable:active {
  background: rgba(255, 255, 255, .025);
}
.h-listing__thumb {
  width: 44px; height: 44px;
  border: 1px solid var(--b-rule-strong);
  border-radius: 4px;
  background-color: rgba(255,255,255,.025);
}
.h-listing__thumb--btn:hover { border-color: var(--b-accent-edge); }
.h-listing__title {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: -.005em;
  color: var(--b-ivory);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h-listing__meta {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: rgba(244, 241, 234, .42);
  font-variant-numeric: tabular-nums;
  gap: 10px;
}
.h-listing__price {
  color: var(--b-ivory);
  font-weight: 500;
}
.h-listing__ends { color: var(--b-warm); }
.h-listing__seller { color: rgba(244, 241, 234, .42); }
.h-listing__new {
  color: var(--b-accent);
  background: transparent;
  border: 1px solid var(--b-accent-edge);
  letter-spacing: .22em;
  padding: 1px 6px;
  font-size: 9px;
}
.h-listing__status {
  color: var(--b-ivory);
  letter-spacing: .22em;
}
.h-listing__maxbid {
  color: var(--b-accent);
  font-weight: 600;
}
.h-listing__vet {
  color: rgba(244, 241, 234, .42);
  font-style: normal;
}

/* "NEW" listing — quiet gold-tinted background, gold left edge stripe. */
.h-listing--new {
  background: rgba(200, 168, 90, .04);
  border-color: var(--b-rule);
}
.h-listing--new::after {
  content: '';
  position: absolute; left: -14px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--b-accent-edge);
}
@media (min-width: 640px) {
  .h-listing--new::after { left: 0; }
}

/* Focused listing — was blue.  Now gold left rail + slightly tinted bg. */
.h-listing--focused {
  padding-left: 12px;
  background: rgba(200, 168, 90, .045);
  border-color: var(--b-rule);
}
.h-listing--focused::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--b-accent);
  border-radius: 0;
}

/* Action button cluster — tighten and tone down to fit the language. */
.h-listing__actions { gap: 6px; }
.h-listing__actions .btn-sm {
  padding: 7px 10px;
  font-size: 11px;
  letter-spacing: .04em;
  min-height: 34px;
  border-radius: 4px;
}

@media (max-width: 480px) {
  .h-listing { gap: 10px; }
  .h-listing__thumb { width: 40px; height: 40px; }
  .h-listing__title { font-size: 12.5px; }
}

/* ─── Inline detail panel (when a listing is expanded) ───────────────── */
.h-detail {
  margin: 0 0 8px;
  padding: 14px 14px 16px;
  background: rgba(255, 255, 255, .015);
  border: none;
  border-top: 1px solid var(--b-rule);
  border-bottom: 1px solid var(--b-rule);
  border-radius: 0;
}
.h-detail__row { font-family: 'Inter Tight', sans-serif; }
.h-detail__label {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .22em;
  color: rgba(244, 241, 234, .42);
}
.h-detail__value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--b-ivory);
  font-variant-numeric: tabular-nums;
}
.h-detail__thumb { border-radius: 4px; border-color: var(--b-rule-strong); }
.h-detail__thumb:hover { border-color: var(--b-accent-edge); }

/* "Tighten query" / "Refresh listings" / "Open on eBay" action row at
   the bottom of an expanded card — outlined chips that read consistent. */
.h-card .tcard__actions { gap: 6px; padding-top: 4px; }
.h-card .tcard__actions .btn-secondary {
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  color: rgba(244, 241, 234, .85);
  font-size: 11px;
  letter-spacing: .04em;
  border-radius: 4px;
}
.h-card .tcard__actions .btn-secondary:hover,
.h-card .tcard__actions .btn-secondary:active {
  border-color: var(--b-accent-edge);
  color: var(--b-accent);
  background: var(--b-accent-soft);
}
.h-card .tcard__actions .btn-primary {
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .04em;
}


/* ════════════════════════════════════════════════════════════════════════
   Search mode — chrome collapse for mobile PWA usability.
   ────────────────────────────────────────────────────────────────────────
   When body.is-search-active is set (search input has a non-empty query),
   we hide everything that's not search itself: masthead, dateline,
   legend, filters disclosure, and the section eyebrow.  This recovers
   ~290px of vertical space — on iPhone with the keyboard up, that's
   the difference between "1 row visible" and "5–6 rows visible."

   Triggered ON: input focus + non-empty trimmed value, or value typed.
   Triggered OFF: input cleared, or a row tapped (modal opens).
   ════════════════════════════════════════════════════════════════════════ */
body.is-search-active .masthead,
body.is-search-active .b-masthead,
body.is-search-active .b-legend,
body.is-search-active .b-filters-disclosure,
body.is-search-active .b-eyebrow {
  display: none !important;
}
/* When chrome collapses, give the sticky search bar a quiet gold rule
   underneath so the disappearance of dividers above doesn't read as a
   broken-looking floating bar. */
body.is-search-active .b-search {
  border-bottom: 1px solid var(--b-accent-edge);
  margin-bottom: 0;
}
/* Tighten the result list spacing in search mode — the surrounding
   chrome is gone so we can pull the rows up against the search bar. */
body.is-search-active .b-results { margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   Hunting — keyboard focus rings.
   Subtle gold inset on the focused card / listing so keyboard users see
   their selection.  :focus-visible (not :focus) so mouse clicks don't
   leave a ring on the row after the click lands.
   ════════════════════════════════════════════════════════════════════════ */
.h-card.tcard:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--b-accent-edge),
              inset 3px 0 0 var(--b-accent);
}
.h-card.tcard.is-open:focus-visible {
  /* When a card is expanded and still keyboard-focused, dim the ring so
     the user knows the focus has logically moved past the header. */
  box-shadow: inset 0 0 0 1px var(--b-rule),
              inset 3px 0 0 var(--b-accent-edge);
}
.h-listing:focus-visible {
  outline: none;
  background: rgba(200, 168, 90, .06);
  box-shadow: inset 2px 0 0 var(--b-accent);
}

/* ════════════════════════════════════════════════════════════════════════
   Lightbox — magnifier loupe + bottom info banner + boundary bump.
   Layered over the existing lightbox styles (defined earlier).
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Bottom info banner ──────────────────────────────────────────────
   Slick semi-opaque strip pinned to the lightbox's bottom edge.
   Backdrop-blurred so the photo behind it stays visible.  Title +
   meta on the left, action chips on the right.  On narrow viewports
   the actions wrap below.  Counter (top-right of the stage) keeps the
   image position; this banner is for *listing* identity. */
.lightbox__banner {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(86vw, 880px);
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(10, 10, 15, .68);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid var(--b-rule-strong);
  border-radius: 8px;
  box-shadow: 0 12px 36px -16px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .04);
  font-family: 'Inter Tight', sans-serif;
  color: var(--b-ivory);
  pointer-events: auto;
  z-index: 2;
}
.lightbox__banner-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.lightbox__banner-title {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--b-ivory);
}
.lightbox__banner-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color: rgba(244, 241, 234, .65);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ─── Three-cell price strip in the lightbox banner ───────────────────
   CURRENT BID / RAW / PSA 10.  All three carry the same scale so the
   eye flicks across them on a single horizontal line.  Color carries
   the role:
     • Bid is GOLD — the actionable number you're deciding on
     • PSA 10 is IVORY-bold — the upside you'd realize after grading
     • Raw is muted ivory — the floor / sanity-check
   Vertical hairlines separate them from the title cell on the left
   and the action chip on the right. */
.lightbox__banner-bid {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  padding: 0 14px;
  border-left: 1px solid var(--b-rule-strong);
  min-width: 0;
}
.lightbox__banner-actions {
  border-left: 1px solid var(--b-rule-strong);
  padding-left: 14px;
}
.lightbox__banner-bid-lbl {
  font-family: 'Inter Tight', sans-serif;
  font-size: 9px; font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, .42);
  white-space: nowrap;
}
.lightbox__banner-bid-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 22px; font-weight: 700;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.lightbox__banner-bid--current .lightbox__banner-bid-val { color: var(--b-accent); }
.lightbox__banner-bid--raw     .lightbox__banner-bid-val { color: rgba(244, 241, 234, .55); font-weight: 500; }
.lightbox__banner-bid--psa10   .lightbox__banner-bid-val { color: var(--b-ivory); }
.lightbox__banner-bid--empty   .lightbox__banner-bid-val { color: rgba(244, 241, 234, .25); font-weight: 500; }

/* On narrow viewports the price strip needs to wrap.  Drop the title
   to its own row above and let the three cells sit on a row beneath
   without left-borders (becomes a strip rather than columns). */
@media (max-width: 760px) {
  .lightbox__banner { flex-wrap: wrap; gap: 10px; }
  .lightbox__banner-text { flex: 1 0 100%; }
  .lightbox__banner-bid {
    flex: 1 1 0; min-width: 0;
    align-items: flex-start;
    padding: 0 12px;
    border-left: none;
    border-right: 1px solid var(--b-rule-strong);
  }
  .lightbox__banner-bid:nth-of-type(3) { border-right: 1px solid var(--b-rule-strong); }
  .lightbox__banner-bid:last-of-type   { border-right: none; padding-right: 0; }
  .lightbox__banner-bid-val { font-size: 19px; }
  .lightbox__banner-actions { border-left: none; padding-left: 0; flex: 1 0 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
  .lightbox__banner-bid-val { font-size: 17px; }
  .lightbox__banner-bid-lbl { font-size: 8.5px; letter-spacing: .22em; }
}

.lightbox__banner-actions {
  flex-shrink: 0;
  display: flex; gap: 8px;
}
.lightbox__banner-btn {
  font-family: 'Inter Tight', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 8px 12px;
  color: var(--b-ivory);
  background: transparent;
  border: 1px solid var(--b-rule-strong);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lightbox__banner-btn:hover,
.lightbox__banner-btn:focus-visible {
  color: var(--b-accent);
  border-color: var(--b-accent-edge);
  background: var(--b-accent-soft);
  outline: none;
}
@media (max-width: 600px) {
  .lightbox__banner {
    width: calc(100vw - 24px);
    bottom: 12px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .lightbox__banner-title { font-size: 12.5px; white-space: normal; }
  .lightbox__banner-meta  { white-space: normal; }
  .lightbox__banner-actions { width: 100%; justify-content: flex-end; }
}

/* ─── Magnifier loupe (eBay-style) ────────────────────────────────────
   A circular div positioned absolutely inside the stage.  JS sets
   background-image to the photo URL, background-size to LOUPE_ZOOM ×
   the displayed image dimensions, and background-position to pan the
   zoomed image so the cursor's hover point lands at the loupe center.
   Hidden by default; .is-active when the pointer is over the image. */
.lightbox__loupe {
  position: absolute;
  width: 220px; height: 220px;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid var(--b-accent-edge);
  background-color: #000;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .5),
              0 12px 36px -8px rgba(0, 0, 0, .8),
              inset 0 0 0 1px rgba(255, 255, 255, .08);
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 3;
}
.lightbox__loupe.is-active { opacity: 1; }
/* Hide the loupe entirely on touch-only devices that don't support hover —
   we only show it on long-press (handled in JS).  The default mousemove
   handler still works on hybrid devices. */
@media (hover: none) {
  .lightbox__loupe { width: 180px; height: 180px; }
}

/* ─── Boundary bump animation ────────────────────────────────────────
   When the user arrows past the very first or very last photo of the
   first/last listing, the entire lightbox stage shakes slightly so the
   user knows they hit a wall.  Subtler than wrapping; clearer than
   silent ignore. */
@keyframes lightbox-bump-prev {
  0% { transform: translateX(0); }
  40% { transform: translateX(12px); }
  100% { transform: translateX(0); }
}
@keyframes lightbox-bump-next {
  0% { transform: translateX(0); }
  40% { transform: translateX(-12px); }
  100% { transform: translateX(0); }
}
.lightbox--bump-prev .lightbox__stage { animation: lightbox-bump-prev .18s ease both; }
.lightbox--bump-next .lightbox__stage { animation: lightbox-bump-next .18s ease both; }

/* The image is interactive (loupe), so hide the system text-cursor on
   hover and use crosshair to signal "you can magnify here." */
.lightbox__img { cursor: crosshair; }

/* The counter sits above the stage now (banner takes the bottom).  Pin
   it with position:absolute so the prior margin-top placement falls away. */
.lightbox__counter {
  position: absolute;
  margin: 0;
  bottom: auto;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--b-ivory);
  padding: 6px 12px;
  background: rgba(10, 10, 15, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--b-rule-strong);
  border-radius: 999px;
  z-index: 2;
}