/* Cards Worth Chasing — additions for the data-driven tool and the printing-run pages (2026-10-12).
 * Loaded after /stylesheet.css; leans on its variables only. Nothing here restyles the chrome.
 * ⚠️ The row block itself is NOT restyled above 760px — the locked template is unchanged on desktop.
 */

/* ---- the run index: server-rendered links to every printing-run page ---- */
.run-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             gap: 0.5rem 0.9rem; margin: 0.9rem 0 0; }
.run-index a { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
               text-decoration: none; color: #262320; background: #faf7f2;
               border: 1px solid var(--card-border); border-radius: var(--radius-sm);
               padding: 0.5rem 0.7rem; }
.run-index a:hover { border-color: var(--gold-border); background: var(--gold-soft); }
.run-index .n { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-faint); }
.run-set { margin-top: 1.1rem; }
.run-set-h { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem;
             color: #262320; margin: 0 0 0.4rem; }

/* ---- the ranked-lists block on set pages and the sets hub ---- */
/* 5 chips must sit on one row at desktop width (measured: the default 250px minmax wrapped the fifth
   chip onto its own line and left a hole), and the counts need more contrast than --text-faint. */
.ranked-callout .run-index { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ranked-callout .run-index .n { color: var(--text-muted); }
.ranked-callout { background: var(--gold-soft); border: 1px solid var(--gold-border);
                  border-radius: var(--radius-md); padding: 1.15rem 1.35rem; margin: 1.6rem 0; }
.ranked-callout-h { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.02rem;
                    color: #171513; }
.ranked-callout-p { font-size: 0.92rem; color: var(--text-muted); margin: 0.35rem 0 0.2rem; line-height: 1.6; }
.ranked-callout-p a { color: #8d6c1e; font-weight: 700; }

.ranked-callout-go { margin: 0.75rem 0 0; }
.ranked-go { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--gold-primary);
             color: #fff; text-decoration: none; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
             font-size: 0.92rem; padding: 0.55rem 1rem; border-radius: var(--radius-sm); }
.ranked-go:hover { background: #8d6c1e; }

/* ---- printing-run pages: the switcher between a set's printings ---- */
.run-sibs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0.4rem; }
.run-sibs-l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
              color: var(--text-faint); font-weight: 700; margin-right: 0.2rem; }
.run-chip { text-decoration: none; color: #262320; background: #faf7f2; border: 1px solid var(--card-border);
            border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.82rem; }
.run-chip:hover { border-color: var(--gold-border); background: var(--gold-soft); }
.run-chip.is-current { background: var(--gold-primary); border-color: var(--gold-primary); color: #fff;
                       font-weight: 700; }
.run-tool { font-size: 0.85rem; margin: 0 0 2rem; }
.run-tool a { color: var(--gold-primary); }

/* ---- mobile: a compact row that expands on tap ---- */
.rc-mini { display: none; }
.rc-toggle { display: none; }

@media (max-width: 760px) {
  .rc { grid-template-columns: 76px 1fr; gap: 0.8rem; padding: 0.95rem 1rem 1rem; }
  .rc-media img { width: 76px; }
  .rc-name { font-size: 1.12rem; margin-bottom: 0.4rem; }
  .rc-meta { font-size: 0.68rem; }

  .rc-mini { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem;
             margin: 0 0 0.6rem; }
  /* sized so "$1,306.52 raw → $425,165.93 PSA 10" stays on ONE line at 390px */
  .rc-mini-p { font-family: 'JetBrains Mono', monospace; font-size: 0.71rem; color: #262320; }
  .rc-mini-h { font-family: 'JetBrains Mono', monospace; font-size: 0.71rem; font-weight: 700;
               color: var(--accent-green); }

  .rc-toggle { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
               background: #faf7f2; border: 1px solid var(--card-border); border-radius: 999px;
               padding: 0.32rem 0.8rem; margin: 0 0 0.7rem; font-family: 'Space Grotesk', sans-serif;
               font-size: 0.78rem; font-weight: 700; color: #262320; }
  .rc-toggle::after { content: "\25BE"; font-size: 0.7rem; color: var(--text-faint); }
  .rc.open .rc-toggle::after { content: "\25B4"; }

  /* collapsed on a phone until asked; the name, meta, scan and price line always show */
  .rc:not(.open) .rc-ladder,
  .rc:not(.open) .rc-pv,
  .rc:not(.open) .gr-head,
  .rc:not(.open) .grtable,
  .rc:not(.open) .rc-dist,
  .rc:not(.open) .rc-why,
  .rc:not(.open) .rc-link { display: none; }

  /* the page's own <=640px block centers a 190px image above a 1fr body; a scan-first card is a heavy
     scroll for 3,618 rows, so on a phone the row becomes: thumb, name, one price line, Details. */
  .rc-media { max-width: none; margin: 0; }

  /* ---- the toolbar: MEASURED, the budget fields overflowed a 390px screen by 205px, which put the
     tool's primary control off the side of the phone. Cause: number inputs keep their intrinsic width
     unless `min-width:0` is set. ---- */
  .rfilter { flex: 1 1 100%; gap: 0.55rem; padding: 0.8rem 0.85rem; }
  .rfilter input[type=search] { flex: 1 1 100%; min-width: 0; }
  .rctl { flex: 1 1 100%; min-width: 0; white-space: normal; }
  .rctl input[type=number] { flex: 1 1 3.5rem; width: auto; min-width: 0; }
  .rctl select { flex: 1 1 auto; min-width: 0; }
  .rbar-count { white-space: normal; }

  .rc-ladder { grid-template-columns: repeat(3, 1fr); }

  /* grade rows stack: grade + odds on the left, the money right-aligned beside both */
  .gr { grid-template-columns: 1fr auto; grid-template-areas: "g money" "o money"; gap: 0.15rem 0.6rem; }
  .gr-g { grid-area: g; }
  .gr-o { grid-area: o; }
  .gr-p { grid-area: money; align-self: center; }
}

/* ---- the buy link (2026-10-13). The highest-intent action on a row, so it is deliberately NOT
   covered by the mobile rule above that hides `.rc-link` on a collapsed row: a phone visitor
   scrolling the ranked list can tap "See copies on eBay" without opening Details. The label says
   `copies` because it is a LIVE SEARCH for that exact card, not a listing — saying "Buy" would
   overstate it. EPN-tracked, per-card customid, `rel="sponsored noopener"`. */
.rc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.4rem; }
.rc-buy {
  display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--gold-primary);
  border-radius: 6px; color: var(--gold-primary); font-size: 0.8rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.rc-buy:hover { background: rgba(212, 169, 65, 0.12); }
@media (max-width: 640px) { .rc-buy { padding: 0.28rem 0.6rem; font-size: 0.76rem; } }