/* ══════════════════════════════════════════════════════════════════════════
   Public product datasheet — the landing page's "everything we track" table.

   The dense-table language is ported from /admin/products (table.ds); the
   PUBLIC precedent for it is the player page's table.plc-ds
   (static/css/player_cards.css), which is where the sticky-column and
   hover-restatement rules below come from. Prefix is `.pt-` so nothing here
   can collide with either.

   Everything is scoped under `.cardstock` so it inherits the paper palette
   (--paper / --ink-* / --accent / --rule) from product_detail.css, which the
   landing already links. This file only adds the table + its two overlays.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── section shell ───────────────────────────────────────────────────────── */

.cardstock .pt-sheet { padding: 1.1em 1.2em 1.2em; }

.cardstock .pt-sub {
  margin: 0 0 1.1em;
  font-size: 0.92em; line-height: 1.5;
  color: var(--ink-2, #55524d);
  max-width: 62ch;
}

/* Count + "showing N of M" live here so the header line never reflows the
   table when a filter changes. */
.cardstock .pt-meta {
  display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap;
  margin: 0 0 0.7em;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 0.72em; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3, #8a857e);
}
.cardstock .pt-meta .pt-count { font-weight: 700; color: var(--ink-2, #55524d); }

/* ── filter bar ──────────────────────────────────────────────────────────── */

.cardstock .pt-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.55em 0.8em;
  margin: 0 0 0.85em; padding-bottom: 0.85em;
  border-bottom: 1px solid var(--rule-soft, #e8e3da);
  position: relative; z-index: 20;   /* dropdowns hit-test above the table */
}
.cardstock .pt-ctl { display: flex; flex-direction: column; gap: 3px; position: relative; }
.cardstock .pt-ctl > .cap {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3, #8a857e);
}
/* A control that is narrowing the view gets a dot + ring — lifted from the
   admin datasheet, where it is the fastest way to see why a table looks
   short. `:not()` guard so the dot lands on the control, never on each
   option label inside a popover. */
.cardstock .pt-ctl.narrowed > .cap::after {
  content: "\25CF"; margin-left: 4px; color: #0757ba; font-size: 8px;
  vertical-align: middle;
}
.cardstock .pt-ctl.narrowed input,
.cardstock .pt-ctl.narrowed select,
.cardstock .pt-ctl.narrowed .pt-yearbtn { box-shadow: 0 0 0 1px #0757ba inset; }

.cardstock .pt-filters input[type="search"],
.cardstock .pt-filters select,
.cardstock .pt-yearbtn {
  font: inherit; font-size: 12px; line-height: 1.3;
  padding: 4px 7px; height: 27px; box-sizing: border-box;
  border: 1px solid #d6d1c8; border-radius: 5px;
  background: #fff; color: #24292e;
}
.cardstock .pt-filters input[type="search"] { min-width: 210px; }
.cardstock .pt-filters select { min-width: 120px; }
.cardstock .pt-filters select:disabled { background: #f4f2ee; color: #a9a49c; }

.cardstock .pt-yearbtn { cursor: pointer; text-align: left; min-width: 116px; }
.cardstock .pt-yearpanel {
  position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 3px;
  max-height: 250px; overflow-y: auto;
  min-width: 132px; padding: 5px;
  background: #fff; border: 1px solid #d6d1c8; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(27, 31, 36, 0.16);
}
.cardstock .pt-yearpanel[hidden] { display: none; }
.cardstock .pt-yearpanel label {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px; font-size: 11.5px; white-space: nowrap;
  border-radius: 3px; cursor: pointer;
}
.cardstock .pt-yearpanel label:hover { background: #f2f7fd; }

/* Segmented control (Stock) — one shape, three states. */
.cardstock .pt-seg { display: inline-flex; border: 1px solid #d6d1c8; border-radius: 5px; overflow: hidden; height: 27px; }
.cardstock .pt-seg button {
  font: inherit; font-size: 11.5px; line-height: 1;
  padding: 0 9px; border: 0; border-left: 1px solid #e6e2da;
  background: #fff; color: #57606a; cursor: pointer;
}
.cardstock .pt-seg button:first-child { border-left: 0; }
.cardstock .pt-seg button.on { background: #0757ba; color: #fff; }

.cardstock .pt-reset {
  font: inherit; font-size: 11.5px; height: 27px; padding: 0 10px;
  border: 1px solid #d6d1c8; border-radius: 5px; background: #fff;
  color: #57606a; cursor: pointer;
}
.cardstock .pt-reset:hover { background: #f4f2ee; }

/* ── the datasheet ───────────────────────────────────────────────────────── */

.cardstock .pt-scroll {
  overflow: auto; max-height: 70vh;
  border: 1px solid #e1e4e8; border-radius: 8px; background: #fff;
  /* Sticky headers need a positioned scroll parent to measure against. */
  position: relative;
}
.cardstock table.pt-ds {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: #24292e;
}
.cardstock table.pt-ds th,
.cardstock table.pt-ds td {
  padding: 0.14em 0.55em; border-bottom: 1px solid #f0f1f3; white-space: nowrap;
  text-align: left; vertical-align: middle; background: #fff; line-height: 1.55;
}
/* Two sticky header rows: the market band, then the column names. The band's
   height is a variable because the second row has to stick exactly below it —
   change one and the other follows. */
.cardstock table.pt-ds { --pt-bandh: 21px; }
.cardstock table.pt-ds thead th {
  position: sticky; z-index: 3;
  background: #f0f2f5; color: #3a4149;
  font-weight: 600; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.02em; border-bottom: 1px solid #d1d5da;
  padding-top: 0.4em; padding-bottom: 0.4em;
  cursor: pointer; user-select: none;
}
.cardstock table.pt-ds thead tr.pt-colhead th { top: var(--pt-bandh); }
.cardstock table.pt-ds thead th.no-sort { cursor: default; }

/* Market band — says CANADIAN / AMERICAN once per column pair, with the flag,
   instead of stamping a flag on all ~3,700 price cells. */
.cardstock table.pt-ds thead tr.pt-grouphead th {
  top: 0; height: var(--pt-bandh);
  padding-top: 2px; padding-bottom: 2px;
  font-size: 9.5px; letter-spacing: 0.07em; line-height: 1.4;
  color: #6a737d; background: #e7eaee;
  border-bottom: 1px solid #dcdfe3;
}
.cardstock table.pt-ds thead tr.pt-grouphead th.mkt {
  text-align: center; color: #3a4149; font-weight: 700;
}
.cardstock table.pt-ds thead tr.pt-grouphead .pp-flag {
  width: 13px; height: 10px; vertical-align: -1px; margin-right: 4px;
}
.cardstock table.pt-ds thead th .arrow { color: #0366d6; margin-left: 0.15em; }
.cardstock table.pt-ds tbody tr.pt-row:hover td { background: #f2f7fd; }
.cardstock table.pt-ds td.num,
.cardstock table.pt-ds th.num {
  text-align: right; font-family: "Roboto Mono", ui-monospace, monospace;
}
.cardstock table.pt-ds td.mut { color: #9aa1a9; }
/* 2px rule marks the CA→US market boundary, so the eye doesn't have to read
   the header to know which pair it's in. */
.cardstock table.pt-ds th.grp,
.cardstock table.pt-ds td.grp { border-left: 2px solid #c4cbd3; }

/* Sticky identity: Year, then Product. Opaque #fff so scrolled columns can't
   ghost through, and the hover/expanded backgrounds must be RESTATED here —
   a sticky cell paints above the row's own background. */
.cardstock table.pt-ds th.c-year,
.cardstock table.pt-ds td.c-year {
  position: sticky; left: 0; z-index: 2; width: 62px; min-width: 62px;
  font-family: "Roboto Mono", ui-monospace, monospace; color: #57606a;
}
.cardstock table.pt-ds th.c-name,
.cardstock table.pt-ds td.c-name {
  position: sticky; left: 62px; z-index: 2;
  min-width: 190px; max-width: 320px;
  border-right: 1px solid #e1e4e8;
  overflow: hidden; text-overflow: ellipsis;
}
.cardstock table.pt-ds thead th.c-year,
.cardstock table.pt-ds thead th.c-name { z-index: 4; }
/* The band's leading cell spans the identity columns, so it can't be
   sticky-left itself — it scrolls with them, which is what you want: the
   market labels stay glued to the columns they name. It still needs an opaque
   background so body rows can't ghost through as they scroll under it. */
.cardstock table.pt-ds thead tr.pt-grouphead th { background: #e7eaee; }
.cardstock table.pt-ds tbody tr.pt-row:hover td.c-year,
.cardstock table.pt-ds tbody tr.pt-row:hover td.c-name { background: #f2f7fd; }
.cardstock table.pt-ds tbody tr.pt-row.is-open td,
.cardstock table.pt-ds tbody tr.pt-row.is-open td.c-year,
.cardstock table.pt-ds tbody tr.pt-row.is-open td.c-name { background: #eef5ff; }

/* Plain-text identity links: no link chrome at rest, underline on hover. */
.cardstock table.pt-ds .pt-link { color: inherit; text-decoration: none; }
.cardstock table.pt-ds .pt-link:hover { text-decoration: underline; color: #0757ba; }
.cardstock table.pt-ds tr.pt-row:hover .c-name .pt-link { color: #0757ba; }

.cardstock table.pt-ds td.c-price {
  font-family: "Roboto Mono", ui-monospace, monospace; text-align: right;
  color: #1b1f23;
}
.cardstock table.pt-ds .pt-oos { color: #b9b4ac; }

/* Checklist: card count + a button into it. The count is right-aligned mono
   (it sorts as a number) and the button is pushed to the cell's right edge, so
   at 1,856 rows the two read as two aligned sub-columns rather than a ragged
   pair. Rows with no checklist show a single em-dash — most of the catalog. */
.cardstock table.pt-ds td.c-chk {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
}
.cardstock table.pt-ds .pt-chk-n {
  font-family: "Roboto Mono", ui-monospace, monospace; color: #57606a;
}
.cardstock table.pt-ds .pt-chk-btn {
  flex: none;
  display: inline-block; padding: 0 6px;
  font-size: 9.5px; font-weight: 700; line-height: 15px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #0757ba; text-decoration: none;
  background: #eef4fc; border: 1px solid #cfe0f5; border-radius: 3px;
}
.cardstock table.pt-ds .pt-chk-btn:hover {
  background: #0757ba; border-color: #0757ba; color: #fff;
}

/* Freshness tint: quiet by default, louder only as it ages — success recedes,
   staleness carries the colour (same rule as the console's scrape heatmap). */
.cardstock table.pt-ds .pt-fresh { color: #9aa1a9; }
.cardstock table.pt-ds .pt-fresh.warn { color: #9a6700; }
.cardstock table.pt-ds .pt-fresh.bad  { color: #cf222e; }

/* ── expand caret + eBay detail row ──────────────────────────────────────── */

.cardstock table.pt-ds th.c-exp,
.cardstock table.pt-ds td.c-exp {
  width: 18px; min-width: 18px; padding-left: 6px; padding-right: 0;
  color: #b0b6bd; text-align: center;
}
.cardstock table.pt-ds td.c-exp .pt-caret {
  display: inline-block; border: 0; background: none; padding: 0;
  font: inherit; font-size: 9px; line-height: 1; color: inherit; cursor: pointer;
  transition: transform 0.12s ease;
}
.cardstock table.pt-ds tr.pt-row.is-open .pt-caret { transform: rotate(90deg); color: #0757ba; }

/* 14px side padding, not 10: the carousel's prev/next arrows are absolutely
   positioned at left/right: -12px, so anything tighter lets them poke past the
   scroll box and give the table a 2px horizontal scrollbar it doesn't need. */
.cardstock table.pt-ds tr.pt-ebay-row > td {
  background: #f7f8fa; padding: 10px 14px 12px; white-space: normal;
  border-bottom: 1px solid #e3e9f1;
}
.cardstock .pt-ebay-note {
  margin: 0; font-size: 11.5px; color: #6a737d;
}
.cardstock .pt-ebay-note a { color: #0757ba; }
/* The carousel is a full-width product-page component whose scroll strip is
   intrinsically far wider than this table. `min-width: 0` lets it shrink
   inside flex/grid descendants; the structural fix is product_table.js's
   column freeze + table-layout: fixed, without which the browser widens the
   whole table to fit the strip and opening one row re-flows every other. */
.cardstock .pt-ebay-slot { min-width: 0; max-width: 100%; }

/* ── hover quick view ────────────────────────────────────────────────────── */

.cardstock .pt-qv {
  position: fixed; z-index: 90; display: none;
  max-width: min(820px, 94vw); max-height: 78vh; overflow: auto;
  /* Same light-grey tray as the expanded row — the panel renders the identical
     partial, so it would be odd for one mount to be paper and the other not. */
  background: #f7f8fa;
  border: 1px solid #d0d5da; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(27, 31, 36, 0.26);
  padding: 12px 14px 14px;
}
.cardstock .pt-qv.is-open { display: block; }
/* Deliberately pointer-INTERACTIVE: the panel carries live /out price links,
   so it has to be reachable. It is positioned BESIDE the row rather than over
   it, and hovering it cancels the close timer, so it never steals the pointer
   from the table underneath. */

.cardstock .pt-qv-loading {
  font-size: 12px; color: var(--ink-3, #8a857e);
  font-family: "Roboto Mono", ui-monospace, monospace;
}
/* ── condensed product page (expanded row + hover panel share this) ──────── */

.cardstock .pqv-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1em; flex-wrap: wrap; margin-bottom: 0.7em;
}
.cardstock .pqv-title {
  font-weight: 700; font-size: 14px; color: var(--ink, #1a1a1a);
  text-decoration: none;
}
.cardstock .pqv-title:hover { text-decoration: underline; }
.cardstock .pqv-links {
  display: inline-flex; align-items: baseline; gap: 1em;
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap;
}
.cardstock .pqv-link { color: #0757ba; text-decoration: none; }
.cardstock .pqv-link:hover { text-decoration: underline; }
.cardstock .pqv-link-main { font-weight: 700; }

/* Image · what's in the box · what it costs.
   Flex, not grid: the number of columns varies per product (a product with no
   priced format or no box editorial renders fewer), and `auto-fit` tracks size
   to the CONTAINER — at ~950px it lays out four 230px tracks and the three
   real columns leave a visible empty one on the right. Flex distributes the
   leftover space among the columns that actually exist, and wraps to a stack
   on a narrow screen without a media query. */
.cardstock .pqv-grid {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
}
.cardstock .pqv-col { flex: 1 1 240px; min-width: 0; }
/* The box shot is the identity anchor — it doesn't grow, so the two data
   cards beside it stay the point of the panel. */
.cardstock .pqv-col-image { flex: 0 1 210px; }
.cardstock .pqv-shot {
  display: block; background: #fff; border: 1px solid #e1e4e8;
  border-radius: 8px; padding: 8px; text-decoration: none;
}
.cardstock .pqv-shot img {
  display: block; width: 100%; height: auto; max-height: 220px;
  object-fit: contain;
}
/* ── strip the collector-card treatment inside the panel ─────────────────────
   On the product page these cards are physical objects on a desk: `.panel`
   paints the paper tone and a deep drop shadow, `.panel::before` multiplies a
   paper-fibre bitmap over it, and `::after` draws a double keyline frame with
   a nameplate tab straddling the top rule. That reads as one card per page.

   Here they sit INSIDE a dense white datasheet, several at a time, in a row
   that is itself a tray — so the texture fights the table rather than framing
   anything, and three stacked drop shadows inside a table row read as clutter.
   Plain white cards on a light-grey tray instead; the nameplate survives as a
   quiet label because it is how these cards are identified everywhere else.

   Every override is scoped under `.pqv`, so the product page, the power
   checklist rail and every other mount keep the paper treatment untouched. */
.cardstock .pqv .panel {
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  box-shadow: none;
}
.cardstock .pqv .panel::before { display: none; }   /* paper-fibre bitmap */
.cardstock .pqv .panel::after  { display: none; }   /* double keyline frame */
/* With the frame gone the plate has no rule to straddle, so it moves to the
   card's own top border — and the card loses the 30px of top padding that
   existed only to clear the frame. */
.cardstock .pqv .card-nameplate {
  top: 0;
  background: #fff;
  border-color: #dfe3e7;
  color: #6a737d;
}
.cardstock .pqv .lowest-prices-card { padding: 17px 12px 12px; }
/* The box-hits block carries its own cream wash + `mix-blend-mode: multiply`,
   which only reads as a tint against paper — on white it turns muddy grey.
   Neutral fill, and multiply off so it doesn't darken the card under it. */
.cardstock .pqv .this-box {
  background: #f7f8fa;
  border-color: #e5e8eb;
  mix-blend-mode: normal;
}

/* The price card is a rail component on the product page; here it is one of
   three equal columns, so drop the width cap it carries there. */
.cardstock .pqv-col .lowest-prices-card { margin: 0; max-width: none; }
.cardstock .pqv-boxcard .this-box { margin-top: 0.2em; }

/* eBay strip spans the full width under the three cards — it is a horizontal
   scroller and would be unusable in a third of the row. */
.cardstock .pqv-ebay { margin-top: 12px; }
.cardstock .pqv-ebay[hidden] { display: none; }

@media (max-width: 640px) {
  .cardstock .pt-qv { max-width: 94vw; }
  .cardstock .pt-filters input[type="search"] { min-width: 150px; }
  .cardstock table.pt-ds th.c-year,
  .cardstock table.pt-ds td.c-year { width: 48px; min-width: 48px; font-size: 9.5px; }
  .cardstock table.pt-ds th.c-name,
  .cardstock table.pt-ds td.c-name { left: 48px; min-width: 130px; max-width: 170px; font-size: 10.5px; }
  /* Series is the Pokemon-only axis — the first thing to go when space is
     tight, since every sports row leaves it empty anyway. */
  .cardstock table.pt-ds .c-series { display: none; }
}