/* Server-rendered, crawlable card & set pages (`web/pages.py`).
 *
 * A search engine's own copy of `theme.css`'s tokens - these pages carry no
 * JavaScript state and share no DOM with the SPA, so they load `theme.css`
 * for the palette and this file for layout, rather than `app.css`/
 * `views.css`, which assume a client-side router and framework-driven
 * classes neither page has.
 *
 * `.pageviz` re-points the custom properties `research/charts.py`'s inline
 * SVG expects (`--surface-1`, `--series-1`, `--axis`, `--muted`) at this
 * product's own tokens, so a chart built for the printable report reads as
 * this site's palette instead of its own. `--grid`, `--pos` and `--neg`
 * already share both the name and the role in `theme.css`, so they need no
 * alias.
 */

.pageviz {
  --surface-1: var(--bg-elevated);
  --series-1: var(--accent);
  --axis: var(--border);
  --muted: var(--fg-muted);
}

* { box-sizing: border-box; }
html, body { background: var(--bg-app); }
body {
  margin: 0;
  color: var(--fg);
  background: var(--bg-app);
  font-family: var(--sans);
  font-size: var(--fs-prose);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 860px; margin: 0 auto; padding: var(--s5) var(--s4) 96px; }
/* The card page reads wider (direction A, 2026-09-26): its forecast sets a
   rail of figures beside the chart, and at 860 the chart shrank to half. */
.wrap:has(> .pv-cardpage) { max-width: 1100px; }
h1, h2 { text-wrap: balance; letter-spacing: -0.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* The site header, the account and its panel, `.pv-visually-hidden`: `site.css`,
   shared with the app. */

/* ---------------------------------------------------------- breadcrumb --- */
.pv-crumb {
  font-size: var(--fs-small); color: var(--fg-muted); display: flex;
  gap: var(--s1); flex-wrap: wrap; margin-bottom: var(--s4);
}
.pv-crumb a { color: var(--fg-muted); }
.pv-crumb a:hover { color: var(--accent); }
.pv-crumb span:not(.pv-sep) { color: var(--fg-dim); }
.pv-sep { color: var(--fg-faint); }

/* The homepage/hub variant (`shell(..., home=True)`): a wider measure with
   the same gutters, for pages that lay out their own sections. */
.pv-home { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s4) 96px; }

/* --------------------------------------------------------------- hero ---- */
.pv-hero { margin-bottom: var(--s6); }
.pv-hero h1 { font-size: var(--fs-lead); margin: 0 0 var(--s1); font-weight: 600; }
.pv-sub { color: var(--fg-muted); font-size: var(--fs-body); margin: 0 0 var(--s3); }
.pv-lead { font-size: var(--fs-prose); color: var(--fg-dim); max-width: 68ch; }
.pv-badges { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.pv-pill {
  display: inline-block; font-size: var(--fs-caption); letter-spacing: .04em;
  text-transform: uppercase; font-weight: 600; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--bg-panel);
  border: 1px solid var(--border);
}
.pv-note { color: var(--fg-muted); font-size: var(--fs-body); margin-top: var(--s3); }
.pv-facts { color: var(--fg-dim); font-size: var(--fs-body); margin: 0 0 var(--s3); }

/* The card hero: artwork beside what a search visitor came for - the name,
   the price line, the market verdict and where to buy. */
.pv-card-hero {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5);
  align-items: start; margin-bottom: var(--s4);
}
.pv-art {
  display: block; width: 100%; max-width: 200px; height: auto; aspect-ratio: 200 / 278;
  border-radius: 10px; background: var(--bg-panel);
}
.pv-art-none {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--s3); border: 1px solid var(--border); color: var(--fg-muted);
  font-size: var(--fs-small);
}
.pv-verdict-box {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-left: 3px solid var(--fg-faint); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); margin: var(--s3) 0 var(--s4);
}
.pv-verdict-beating { border-left-color: var(--pos); }
.pv-verdict-lagging { border-left-color: var(--neg); }
.pv-verdict-with { border-left-color: var(--fg-dim); }
.pv-verdict-q {
  margin: 0; font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: .05em; color: var(--fg-muted);
}
.pv-verdict-label { margin: 2px 0 4px; font-size: var(--fs-title); font-weight: 600; line-height: 1.25; }
.pv-verdict-s { margin: 0; color: var(--fg-dim); font-size: var(--fs-body); }
.pv-verdict-box .pv-caveat { margin-top: var(--s2); }
.pv-buy { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pv-btn {
  display: inline-block; padding: 9px 16px; border-radius: var(--r-md);
  font-size: var(--fs-body); font-weight: 600; color: var(--fg);
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.pv-btn:hover { background: var(--bg-hover); text-decoration: none; }
.pv-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg-app); }
.pv-btn-primary:hover { background: var(--pos-strong); border-color: var(--pos-strong); }
.pv-disclose { margin: var(--s2) 0 0; font-size: var(--fs-caption); color: var(--fg-muted); }
/* The outbound listing link, told apart from a site link only by the small
   external arrow - the one thing a reader needs to know before tapping it. */
.pv-ext { margin-left: 6px; font-weight: 500; opacity: .8; }
.pv-buy { align-items: center; }
.pv-buy-note { font-size: var(--fs-small); color: var(--fg-muted); }
/* The same small "eBay ↗" on every card in every list: quiet ink, the accent
   only on hover, so it reads as a feature of the list, not an advert. */
.pv-ebay {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: var(--fs-small); font-weight: 600; color: var(--fg-dim);
  padding: 4px 8px; border-radius: var(--r-sm);
}
.pv-ebay:hover { color: var(--accent); background: var(--bg-panel); text-decoration: none; }
.pv-row-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 4px; min-width: 0;
}
.pv-tile-wrap { display: flex; flex-direction: column; min-width: 0; }
.pv-tile-wrap .pv-ebay { align-self: flex-start; margin: 4px 0 0 -8px; }
.pv-results .pv-row-wrap { border-bottom: 1px solid var(--hairline); }
.pv-results .pv-row-wrap .pv-row { border-bottom: 0; }
.pv-set-table .pv-out { text-align: right; white-space: nowrap; }

/* -------------------------------------------------------------- stats ---- */
.pv-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
}
.pv-stat {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
}
.pv-stat-k {
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-muted);
}
.pv-stat-v {
  font-size: var(--fs-title); margin-top: 4px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.pv-stat-n { font-size: var(--fs-small); color: var(--fg-muted); margin-top: 3px; }

/* -------------------------------------------------------------- blocks --- */
.pv-block { margin-top: var(--s6); }
.pv-block h2 {
  font-size: var(--fs-heading); font-weight: 600; margin: 0 0 var(--s3);
}
.pv-prose { color: var(--fg-dim); max-width: 68ch; margin: var(--s2) 0; }
.pv-prose b { color: var(--fg); }
.pv-caveat {
  color: var(--fg-faint); font-size: var(--fs-small); max-width: 68ch;
  margin-top: var(--s3);
}

/* -------------------------------------------------------------- answers -- */
.pv-answers { display: flex; flex-direction: column; gap: var(--s4); }
.pv-answer {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s4);
}
.pv-q {
  margin: 0 0 4px; font-size: var(--fs-small); color: var(--fg-muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.pv-verdict { margin: 0 0 6px; font-size: var(--fs-heading); font-weight: 600; }
.pv-detail { margin: 0; color: var(--fg-dim); font-size: var(--fs-body); }
.pv-evrow { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s3); }
.pv-ev {
  display: flex; flex-direction: column; font-size: var(--fs-small);
  color: var(--fg-muted);
}
.pv-ev b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tables - */
.tablewrap {
  overflow-x: auto; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-top: var(--s2);
}
table { border-collapse: collapse; width: 100%; font-size: var(--fs-body); min-width: 460px; }
th, td { padding: 9px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
th {
  font-weight: 600; color: var(--fg-muted); font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: .04em; background: var(--bg-elevated);
}
td.l, th.l { text-align: left; white-space: normal; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-hover); }
.pv-metric-note { color: var(--fg-muted); font-size: var(--fs-small); }
.pv-muted { color: var(--fg-muted); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- related  */
.pv-related-grid { display: flex; flex-direction: column; gap: 1px; }
.pv-related {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s3); background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--fg-dim);
}
.pv-related:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.pv-rel-name { min-width: 0; }
.pv-rel-price { color: var(--fg-muted); font-size: var(--fs-small); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pv-set-steps { display: flex; gap: var(--s2); }
.pv-set-steps .pv-related { flex: 1; }

/* ------------------------------------------------------------- set table -- */
.pv-set-table td { vertical-align: middle; }
.pv-set-table tr[hidden], .pv-set-more[hidden], .pv-set-more-button[hidden] { display: none; }
.pv-set-more {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s3); margin-top: var(--s3); overflow-anchor: none;
}
.pv-set-more-button {
  min-height: 44px; padding: 9px 24px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--bg-elevated); color: var(--fg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.pv-set-more-button:hover { background: var(--bg-hover); border-color: var(--gilt); }
.pv-set-more-button:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }
.pv-rank { color: var(--fg-muted); font-variant-numeric: tabular-nums; width: 1%; }
.pv-num { color: var(--fg-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-cardcell { display: flex; align-items: center; gap: var(--s3); }
.pv-thumb { width: 36px; height: auto; aspect-ratio: 60 / 84; border-radius: 4px;
  background: var(--bg-elevated); flex: none; }
/* Cards without artwork keep their names aligned with the pictured rows. */
.pv-set-table:has(.pv-thumb) td:nth-child(2):not(:has(.pv-thumb)) {
  padding-left: calc(14px + 36px + var(--s3));
}
.pv-mnum { display: none; }

/* ----------------------------------------------------------------- charts  */
.chart {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); margin: var(--s2) 0 0; padding: 14px 16px 10px;
  position: relative;
}
.chart figcaption { font-size: var(--fs-small); color: var(--fg-muted); margin-bottom: 6px; }
.tick { fill: var(--fg-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-label { fill: var(--fg-muted); font-size: 12px; }
.bar-value { fill: var(--fg-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tooltip {
  position: absolute; transform: translate(-50%, -100%); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px;
  pointer-events: none; font-size: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
.tooltip b { font-variant-numeric: tabular-nums; }
.tooltip span { color: var(--fg-muted); margin-left: 7px; }
.empty { color: var(--fg-muted); font-style: italic; }

/* ----------------------------------------------------------------- footer  */
/* The footer itself is `site.css`'s (the app wears it too). */
.pv-cta {
  display: inline-block; background: var(--accent); color: var(--bg-app);
  font-weight: 600; padding: 10px 18px; border-radius: var(--r-md);
  font-size: var(--fs-body);
}
.pv-cta:hover { background: var(--pos-strong); text-decoration: none; }

/* ------------------------------------------------------------- legal ------ */
.pv-legal h2 { margin-top: var(--s5); }
.pv-legal h2:first-child { margin-top: 0; }
.pv-legal ul { padding-left: 1.2em; }
.pv-legal li { margin: var(--s1) 0; }
.pv-legal code {
  font-family: var(--mono); font-size: 0.92em;
  background: var(--bg-panel); padding: 1px 5px; border-radius: 4px;
}

/* ------------------------------------------------------------ contact form  */
.pv-form {
  display: flex; flex-direction: column; gap: var(--s4); max-width: 520px;
}
.pv-field { display: flex; flex-direction: column; gap: 5px; }
.pv-field span { font-size: var(--fs-small); color: var(--fg-muted); }
.pv-field input, .pv-field textarea {
  width: 100%; padding: 9px 11px; font-size: var(--fs-body); color: var(--fg);
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); font-family: var(--sans);
}
.pv-field textarea { resize: vertical; line-height: 1.5; }
.pv-field input:focus, .pv-field textarea:focus {
  outline: none; border-color: var(--accent);
}
/* The honeypot: present in the DOM for a script that fills in every field it
   finds, but off-screen and unreachable by keyboard for an actual person -
   see `web/contact.py`'s module docstring. `display: none` would make some
   spam scripts skip it entirely, which defeats the point. */
.pv-honeypot {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}
.pv-submit {
  align-self: flex-start; background: var(--accent); color: var(--bg-app);
  font-weight: 600; padding: 10px 20px; border: none; border-radius: var(--r-md);
  font-size: var(--fs-body); cursor: pointer;
}
.pv-submit:hover { background: var(--pos-strong); }
.pv-submit:disabled { opacity: 0.6; cursor: default; }
.pv-form-note { font-size: var(--fs-small); min-height: 1.4em; }
.pv-form-note.tone-good { color: var(--good); }
.pv-form-note.tone-critical { color: var(--crit); }

/* ============================================================ front door ==
 * The homepage (`web/home.py`) and the hubs (`web/hubs.py`: /search, /sets,
 * /movers, /method). Same tokens, same restraint: warm charcoal surfaces,
 * card art as the only colour that is not data, the diverging blue/red pair
 * for moves and verdicts, and `--invest` for the one thing it is reserved
 * for - a card priced in the reader's own budget.
 */

/* ------------------------------------------------------------ the hero --- */
.pv-hero-home {
  display: grid; grid-template-columns: minmax(0, 1fr) 418px; gap: var(--s6);
  align-items: center; padding: var(--s5) 0 var(--s5);
}
.pv-eyebrow {
  margin: 0 0 var(--s3); font-size: var(--fs-small); color: var(--fg-muted);
  letter-spacing: .02em; display: flex; align-items: center; gap: var(--s2);
}
.pv-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 0 3px rgba(12, 163, 12, .18);
}
.pv-hero-home h1 {
  font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -0.025em;
  font-weight: 700; margin: 0 0 var(--s4); max-width: 22ch;
}
.pv-hero-home h1 span {
  display: block; margin-top: .22em; font-weight: 500; color: var(--fg-dim);
  font-size: .6em; line-height: 1.2; letter-spacing: -0.015em; max-width: 30ch;
}
.pv-hero-sub {
  margin: 0 0 var(--s5); color: var(--fg-muted); font-size: 15.5px;
  line-height: 1.55; max-width: 58ch;
}
.pv-bigsearch {
  display: flex; max-width: 620px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 5px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.pv-bigsearch:focus-within { border-color: var(--accent); }
.pv-bigsearch input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg);
  font: inherit; font-size: 17px; padding: 12px 14px; outline: none;
}
.pv-bigsearch input::placeholder { color: var(--fg-faint); }
.pv-bigsearch button {
  flex: none; border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  font-size: 15px; padding: 0 22px;
}
.pv-bigsearch button:hover { background: var(--pos-strong); }
.pv-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin: var(--s4) 0 0; max-width: 640px;
}
.pv-chips-label {
  font-size: var(--fs-small); color: var(--fg-faint); margin-right: 2px;
}
.pv-qchip {
  font-size: var(--fs-body); color: var(--fg-dim); padding: 5px 12px;
  border-radius: var(--r-pill); background: var(--bg-page);
  border: 1px solid var(--border); white-space: nowrap;
}
.pv-qchip:hover { color: var(--fg); background: var(--bg-hover); text-decoration: none; }

/* Three cards fanned beside the headline, each with its price. */
.pv-fan { position: relative; height: 330px; margin-right: 18px; }
.pv-fan-card {
  position: absolute; top: 18px; width: 172px; display: block;
  transition: transform var(--dur-base) var(--ease);
}
.pv-fan-card:hover { text-decoration: none; z-index: 3; }
.pv-fan-art {
  display: block; width: 100%; height: auto; aspect-ratio: 200 / 278;
  border-radius: 9px; background: var(--bg-panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(246, 242, 236, .06);
}
.pv-fan-0 { left: 0; transform: rotate(-9deg) translateY(22px); }
.pv-fan-1 { left: 114px; top: 0; z-index: 2; }
.pv-fan-2 { left: 228px; transform: rotate(9deg) translateY(22px); }
.pv-fan-0:hover { transform: rotate(-9deg) translateY(10px); }
.pv-fan-1:hover { transform: translateY(-8px); }
.pv-fan-2:hover { transform: rotate(9deg) translateY(10px); }
/* The price rides on the card like a sticker on a sleeve - it turns with
   the card, so the fan never needs a row of labels under it. */
.pv-fan-tag {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s2); font-size: var(--fs-micro); color: var(--fg-dim);
  background: rgba(12, 10, 9, .84); backdrop-filter: blur(4px);
  border: 1px solid rgba(246, 242, 236, .1); border-radius: 7px; padding: 4px 8px;
}
.pv-fan-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-fan-tag b { color: var(--fg); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------- section heads ---- */
.pv-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}
.pv-section-head > div { flex: 1; min-width: 0; }
.pv-section-head h2 {
  margin: 0; font-size: var(--fs-title); font-weight: 650; letter-spacing: -0.015em;
}
.pv-section-sub { margin: 4px 0 0; color: var(--fg-muted); font-size: var(--fs-body); max-width: 70ch; }
.pv-more { font-size: var(--fs-body); white-space: nowrap; color: var(--accent); }
.pv-more-row { margin: var(--s3) 0 0; }
.pv-empty { color: var(--fg-muted); font-size: var(--fs-body); margin: var(--s2) 0; }

/* ---------------------------------------------------------- the tiles ---- */
.pv-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
}
.pv-tile {
  display: flex; flex-direction: column; min-width: 0; color: var(--fg);
}
.pv-tile:hover { text-decoration: none; }
.pv-tile-art {
  display: block; width: 100%; height: auto; aspect-ratio: 200 / 278;
  border-radius: 8px; background: var(--bg-panel); margin-bottom: 10px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  box-shadow: 0 0 0 1px rgba(246, 242, 236, .05);
}
.pv-tile:hover .pv-tile-art {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(246, 242, 236, .1);
}
.pv-tile-name {
  font-size: var(--fs-body); font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pv-tile:hover .pv-tile-name { color: var(--accent); }
.pv-tile-set {
  font-size: var(--fs-micro); color: var(--fg-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-tile-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  margin-top: 6px; font-size: 16px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.pv-tile-move { font-size: var(--fs-micro); font-weight: 500; }
.pv-tile .pv-chip { align-self: flex-start; margin-top: 7px; }
.pv-art-blank {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 200 / 278; border-radius: 8px; background: var(--bg-panel);
  border: 1px dashed var(--border); color: var(--fg-muted);
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em;
  text-align: center;
}

/* The market verdict as a chip: an arrow and the short label, in the
   diverging pair (neutral for "with the market"). */
.pv-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .01em;
  padding: 2px 8px 2px 7px; border-radius: var(--r-pill);
  background: var(--bg-elevated); color: var(--fg-dim);
}
.pv-chip::before { font-size: 8px; line-height: 1; }
.pv-chip-beating { color: var(--pos-strong); background: rgba(57, 135, 229, .14); }
.pv-chip-beating::before { content: "▲"; }
.pv-chip-lagging { color: var(--neg-strong); background: rgba(230, 103, 103, .13); }
.pv-chip-lagging::before { content: "▼"; }
.pv-chip-with::before { content: "●"; font-size: 6px; color: var(--fg-muted); }

/* -------------------------------------------------- market + movers ----- */
.pv-duo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s4); margin-top: var(--s6);
}
.pv-panel {
  background: var(--bg-page); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s5);
}
.pv-panel .pv-section-head h2 { font-size: var(--fs-heading); }
.pv-panel .pv-section-head { margin-bottom: var(--s3); }
.pv-market-s { margin: 0 0 var(--s4); color: var(--fg-dim); font-size: 15px; line-height: 1.55; }
.pv-mchart { margin: 0; }
.pv-mchart svg { display: block; width: 100%; height: 132px; }
.pv-mchart-area { fill: var(--accent-wash); }
.pv-mchart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.pv-mchart-axis {
  display: flex; justify-content: space-between; font-size: var(--fs-caption);
  color: var(--fg-faint); margin-top: 4px;
}
.pv-mchart figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--fg-muted); }

.pv-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.pv-list h3 {
  margin: 0 0 var(--s2); font-size: var(--fs-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted);
}

/* ------------------------------------------------------------- rows ----- */
.pv-rows { display: flex; flex-direction: column; gap: 2px; }
.pv-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s3); padding: 7px 10px; min-width: 0;
  border-radius: var(--r-md); color: var(--fg);
}
.pv-row:hover { background: var(--bg-panel); text-decoration: none; }
.pv-row-art, .pv-row .pv-art-blank {
  width: 44px; height: auto; aspect-ratio: 60 / 84; border-radius: 4px;
  background: var(--bg-panel);
}
.pv-row-main { display: flex; flex-direction: column; min-width: 0; }
.pv-row-name {
  font-size: var(--fs-body); font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-row:hover .pv-row-name { color: var(--accent); }
.pv-row-meta, .pv-row-sub {
  font-size: var(--fs-micro); color: var(--fg-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pv-row-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  text-align: right;
}
.pv-row-price { font-size: var(--fs-heading); font-weight: 650; font-variant-numeric: tabular-nums; }
.pv-move { font-size: var(--fs-heading); font-weight: 650; font-variant-numeric: tabular-nums; }
.pv-rows-compact .pv-row { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 5px 8px; gap: 10px; }
.pv-rows-compact .pv-row-art, .pv-rows-compact .pv-art-blank { width: 32px; }
.pv-results { gap: 0; }
.pv-results .pv-row {
  grid-template-columns: 60px minmax(0, 1fr) auto; padding: 10px 12px;
  border-bottom: 1px solid var(--hairline); border-radius: 0;
}
.pv-results .pv-row:hover { border-radius: var(--r-md); }
.pv-row-noprice { font-size: var(--fs-small); font-weight: 500; color: var(--fg-muted); }
.pv-results .pv-row-art, .pv-results .pv-art-blank { width: 60px; }
.pv-results .pv-row-name { font-size: var(--fs-heading); white-space: normal; }
.pv-results .pv-row-meta { font-size: var(--fs-small); white-space: normal; }

/* -------------------------------------------------------------- sets ---- */
.pv-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.pv-set {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3);
  align-items: center; padding: var(--s3); border-radius: var(--r-lg);
  background: var(--bg-page); border: 1px solid var(--hairline); color: var(--fg);
}
.pv-set:hover { background: var(--bg-panel); text-decoration: none; }
.pv-set-art { width: 64px; height: auto; aspect-ratio: 200 / 278; border-radius: 5px; }
.pv-set-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pv-set-name { font-weight: 650; font-size: var(--fs-heading); }
.pv-set:hover .pv-set-name { color: var(--accent); }
.pv-set-when { font-size: var(--fs-small); color: var(--fg-muted); }
.pv-set-top {
  font-size: var(--fs-small); color: var(--fg-dim); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-set-top b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ budget ---- */
.pv-budget {
  margin-top: var(--s6); padding: var(--s5); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--invest-wash), transparent 140%);
  border: 1px solid rgba(201, 152, 90, .22);
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5);
  align-items: center;
}
.pv-budget h2 { margin: 0; font-size: var(--fs-title); font-weight: 650; letter-spacing: -0.015em; }
.pv-budget-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pv-budget-chip {
  font-size: var(--fs-heading); font-weight: 650; color: var(--invest);
  padding: 7px 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(201, 152, 90, .45); background: rgba(12, 10, 9, .35);
  font-variant-numeric: tabular-nums;
}
.pv-budget-chip:hover { background: var(--invest-wash-strong); text-decoration: none; }
.pv-budget .pv-section-sub { grid-column: 1 / -1; margin: 0; }

/* ------------------------------------------------------------- proof ---- */
.pv-proof {
  margin-top: var(--s6); padding: var(--s1) 0 var(--s1) var(--s4);
  border-left: 2px solid var(--border);
}
.pv-proof p { margin: 0; color: var(--fg-muted); font-size: var(--fs-body); max-width: 92ch; }

/* ------------------------------------------------------------- hubs ----- */
.pv-page-h1 {
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -0.02em;
  font-weight: 700; margin: 0 0 var(--s2);
}
.pv-page-head { margin-bottom: var(--s5); }
.pv-page-head .pv-lead { color: var(--fg-muted); margin: 0; }
.pv-jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.pv-jump a {
  font-size: var(--fs-small); color: var(--fg-dim); padding: 4px 11px;
  border-radius: var(--r-pill); background: var(--bg-page); border: 1px solid var(--border);
}
.pv-jump a:hover { color: var(--fg); background: var(--bg-hover); text-decoration: none; }
.pv-sets-table .pv-set-link { font-weight: 600; color: var(--fg); }
.pv-sets-table .pv-set-link:hover { color: var(--accent); }
.pv-sets-table td.l a:not(.pv-set-link) { color: var(--fg-dim); }
.pv-sets-table td.l a:not(.pv-set-link):hover { color: var(--accent); }
.pv-sets-table td { vertical-align: middle; }
.pv-sets-table .pv-mnum { display: none; }
.pv-method h3 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-heading); }
.pv-method p, .pv-method li { color: var(--fg-dim); }
.pv-method b:not([class]) { color: var(--fg); }
.pv-method .muted { color: var(--fg-muted); }
.pv-method .pv-verdict-box { margin: var(--s4) 0; }
.pv-method .pv-verdict-q a { color: var(--fg-dim); text-transform: none; letter-spacing: 0; }

@media (max-width: 1060px) {
  .pv-hero-home { grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s5); }
  .pv-fan-card { width: 146px; }
  .pv-fan-1 { left: 92px; }
  .pv-fan-2 { left: 184px; }
  .pv-fan { height: 290px; }
  .pv-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .pv-hero-home { grid-template-columns: minmax(0, 1fr); padding-top: var(--s2); }
  .pv-fan { display: none; }
  .pv-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pv-hero-home { padding: 0 0 var(--s5); }
  .pv-hero-home h1 { font-size: 31px; margin-bottom: var(--s3); }
  .pv-hero-home h1 span { font-size: 19px; }
  .pv-hero-sub { font-size: var(--fs-body); margin-bottom: var(--s4); }
  .pv-bigsearch input { font-size: 16px; padding: 10px 10px; }
  .pv-bigsearch button { padding: 0 16px; }
  .pv-chips { gap: 6px; margin-top: var(--s3); }
  .pv-qchip { font-size: var(--fs-small); padding: 4px 10px; }
  .pv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .pv-tile-price { font-size: 14px; }
  .pv-section-head h2 { font-size: var(--fs-heading); }
  .pv-panel { padding: var(--s4); }
  .pv-split { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .pv-sets { grid-template-columns: minmax(0, 1fr); }
  .pv-budget { grid-template-columns: minmax(0, 1fr); padding: var(--s4); }
  .pv-results .pv-row { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 8px 6px; }
  .pv-results .pv-row-art, .pv-results .pv-art-blank { width: 48px; }
  .pv-results .pv-row-name { font-size: var(--fs-body); }
  .pv-sets-table .pv-col-when, .pv-sets-table .pv-col-count { display: none; }
  .pv-sets-table .pv-mnum { display: block; font-size: var(--fs-micro); color: var(--fg-muted); }
}

/* --------------------------------------------------------------- tones --- */
/* `.tone-*` for good/warning/serious/critical/neutral/muted/accent/positive/
   negative already come from theme.css; nothing here overrides them, so a
   verdict on this page and the same verdict in the interactive app always
   read as the same colour. */

@media (max-width: 640px) {
  .wrap, .pv-home { padding: var(--s4) var(--s4) 72px; }
  table { min-width: 100%; }
  /* Charts on a phone. The price chart's SVG is drawn 900 units wide and
     shown about 340px wide, so its labels are set in user units big enough
     to read at that scale (~11px), the price labels move inside the plot
     (with a halo so the line never hides them), and every other date goes.
     The driver bars switch to the version laid out for a narrow screen
     (`research.charts._bars_narrow`), drawn at the size it is shown. */
  .chart { padding: 10px 10px 8px; }
  .chart .tick { font-size: 30px; }
  .chart svg { overflow: visible; }
  .chart .tick-y {
    text-anchor: start; transform: translate(-46px, -11px);
    paint-order: stroke; stroke: var(--bg-panel); stroke-width: 8px; stroke-linejoin: round;
  }
  .chart .ticks-x text:nth-child(even) { display: none; }
  .chart .bars-wide { display: none; }
  .chart .bars-narrow { display: block; }
  .chart .bars-narrow .bar-label, .chart .bars-narrow .bar-value { font-size: 13px; }
  .pv-card-hero { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s3); }
  .pv-hero-body { display: contents; }
  .pv-card-hero h1 { grid-column: 2; grid-row: 1; align-self: center; }
  .pv-art-col { grid-column: 1; grid-row: 1; }
  .pv-card-hero .pv-facts, .pv-card-hero .pv-note, .pv-verdict-box, .pv-buy,
  .pv-disclose { grid-column: 1 / -1; }
  .pv-card-hero .pv-facts { margin-bottom: 0; }
  .pv-verdict-box { margin: 0; }
  .pv-buy .pv-btn { flex: 1; text-align: center; }
  th, td { padding: 8px 10px; }
  /* A phone keeps rank, card, price and the verdict: the interest score
     goes, and the number moves under the name (`.pv-mnum`). */
  .pv-set-table th:nth-child(3), .pv-set-table td:nth-child(3),
  .pv-set-table th:nth-child(6), .pv-set-table td:nth-child(6) { display: none; }
  .pv-mnum { display: inline; }
  /* Tight enough that the Listings column fits a 360px phone, not behind a
     sideways scroll: "No reliable price" may wrap, the cells pad less. */
  .pv-set-table td.num { white-space: normal; }
  .pv-set-table th, .pv-set-table td { padding: 8px 4px; }
  .pv-ebay { min-height: 44px; padding: 0 8px; }
  .pv-set-table .pv-ebay { padding: 0 4px; }
  .pv-set-table th:first-child, .pv-set-table td:first-child { padding-left: 8px; }
  .pv-set-table .pv-cardcell { gap: var(--s2); }
  .pv-set-table .pv-thumb { width: 30px; }
  .pv-set-table:has(.pv-thumb) td:nth-child(2):not(:has(.pv-thumb)) {
    padding-left: calc(4px + 30px + var(--s2));
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* ===================================================== the site's look ===
   (2026-09-26) One look for every public page, a little of a polished game
   client and no more: a display face for headings, warm parchment headlines,
   framed panels with a gilt hairline, uppercase section heads with a fading
   rule. Gilt and parchment are chrome only; every data colour (--pos, --neg,
   the tones) keeps its job. */
.pageviz h1 { font-family: var(--display); font-weight: 700; color: var(--parchment);
  letter-spacing: -.01em; }
.pv-block h2 {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .14em;
  color: color-mix(in srgb, var(--gilt) 88%, var(--parchment));
  margin: 0 0 var(--s4);
}
/* The rule after a section head: a whisper, not a line (owner, 2026-09-26:
   the sharper gilt rule took the calm out of the page). */
.pv-block h2::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(200, 170, 110, .16), transparent 65%);
}
.pv-block h3 {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-muted); margin: var(--s5) 0 var(--s2);
}
/* The framed panel every block sits in. */
.pv-panel, .pv-cardpage .chart, .pv-ans, .pv-answer, .pv-mini,
.pv-cardpage .tablewrap, .pv-fullread details {
  background: var(--panel-grad), var(--bg-panel);
  border: 1px solid var(--gilt-line); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -30px #000;
}
.pv-trust {
  --tone: var(--fg-dim);
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  font-size: var(--fs-small); font-weight: 600; color: var(--tone);
  background: color-mix(in srgb, var(--tone) 9%, var(--bg-panel));
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
}
.pv-trust.tone-good { --tone: var(--good); }
.pv-trust.tone-warning { --tone: var(--warn); }
.pv-trust.tone-serious { --tone: var(--serious); }
.pv-trust.tone-critical { --tone: var(--crit); }

/* ------------------------------------------------------ the card page -- */
.pv-cardpage .pv-block { margin-top: var(--s6); }

/* The trophy: the card centred on its stage, then who it is, what it costs
   and the one action. */
.pv-trophy {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin: 0 auto var(--s5);
}
.pv-trophy .stage-column { width: 100%; max-width: none; flex: none; }
.pv-trophy .card-stage { --cw: 300px; }
/* The light spreads past the text column, but never past the screen: the
   side inset is the room between the stage and the viewport, at most 150px. */
.pv-trophy .stage-back, .pv-trophy .stage-fx {
  inset: -72px calc(-1 * min(150px, max(0px, (100vw - 100%) / 2 - 12px))) -34px;
}
.pv-trophy-id { max-width: 680px; margin-top: 2px; }
.pv-rarity {
  --sa: #d7e0ee; --sb: #8e9fc6; --sc: #f6ecd6;
  display: inline-flex; margin: 0; padding: 5px 15px; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .14em;
  color: color-mix(in srgb, var(--sc) 80%, #fff);
  background: color-mix(in srgb, var(--sa) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa) 45%, transparent);
  box-shadow: 0 0 22px -8px var(--sa);
}
.pv-rarity[data-tier="0"] { box-shadow: none; color: var(--fg-dim);
  border-color: var(--border); background: transparent; }
.pv-trophy h1 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; margin: 12px 0 0; }
.pv-h1-more {             /* the set (and printing) under the name, in the same H1 */
  display: block; margin-top: 8px; font-family: var(--sans); font-weight: 500;
  font-size: var(--fs-prose); letter-spacing: 0; color: var(--fg-muted);
}
.pv-trophy-price {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: var(--s4);
}
.pv-price {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 46px); line-height: 1; color: var(--parchment);
  font-variant-numeric: lining-nums tabular-nums;
}
.pv-price-none { font-size: 22px; color: var(--fg-dim); }
.pv-price-cap { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); }
.pv-trophy-price { width: 100%; max-width: 600px; }
/* One quiet line below the sale reference; depth belongs to a disclosure,
   without a separate panel, price tiles or competing headline. */
.pv-listing-context { width: 100%; max-width: 540px; margin-top: 4px; }
.pv-listing-context > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 3px 10px; padding: 6px 4px; cursor: pointer; list-style: none;
  font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.5;
}
.pv-listing-context > summary::-webkit-details-marker { display: none; }
.pv-listing-context > summary::after { content: '+'; color: var(--gilt); font-size: 15px; }
.pv-listing-context[open] > summary::after { content: '−'; }
.pv-listing-context > summary b { color: var(--fg-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-listing-gap { color: var(--fg-muted); }
.pv-listing-context > summary:hover, .pv-listing-recent > summary:hover { color: var(--fg); }
.pv-listing-context summary:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; border-radius: 4px; }
.pv-listing-depth {
  margin: 8px 0 0; padding: 16px 0 12px; text-align: left;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: var(--fs-small); line-height: 1.6; color: var(--fg-dim);
}
.pv-listing-depth p { margin: 0 0 12px; }
.pv-listing-depth .pv-listing-source { color: var(--fg-muted); font-size: var(--fs-caption); }
.pv-listing-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 16px 0; }
.pv-listing-values dt { color: var(--fg-muted); font-size: var(--fs-caption); }
.pv-listing-values dd { margin: 3px 0; color: var(--fg-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-listing-values p, .pv-listing-depth .pv-listing-footnote { font-size: var(--fs-caption); font-weight: 400; color: var(--fg-muted); }
.pv-listing-history { margin: 20px 0 12px; }
.pv-listing-history figcaption { color: var(--fg-dim); font-weight: 600; margin-bottom: 8px; }
.pv-listing-history svg { display: block; width: 100%; height: auto; overflow: visible; }
.pv-listing-history svg text { fill: var(--fg-muted); font-family: var(--sans); font-size: 12px; }
.pv-listing-grid { stroke: var(--border); stroke-width: 1; }
.pv-listing-median, .pv-listing-reference { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pv-listing-median { stroke: var(--gilt); }
.pv-listing-reference { stroke: var(--fg-muted); stroke-dasharray: 5 4; }
.pv-listing-dot-median { fill: var(--gilt); }
.pv-listing-dot-reference { fill: var(--fg-muted); }
.pv-listing-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--fs-caption); margin: 8px 0; }
.pv-listing-legend span::before { content: ''; display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--gilt); }
.pv-listing-legend .pv-listing-key-reference::before { border-color: var(--fg-muted); border-top-style: dashed; }
.pv-listing-recent > summary { cursor: pointer; color: var(--fg-muted); padding: 6px 0; }
.pv-listing-recent table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.pv-listing-recent th, .pv-listing-recent td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--border); }
.pv-listing-recent th:first-child { text-align: left; }
.pv-listing-recent th { font-weight: 500; color: var(--fg-muted); }
@media (max-width: 480px) {
  .pv-listing-history svg text { font-size: 15px; }
  .pv-listing-context > summary { column-gap: 8px; }
}
.pv-trophy .pv-buy { margin-top: var(--s4); }
.pv-trophy .pv-disclose { max-width: 440px; margin-top: 4px; }

/* Answer tiles (a question page's brief): calm - no lit edge, no coloured
   headline; the words carry it. */
.pv-ans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pv-ans {
  --tone: var(--fg-faint);
  position: relative; overflow: hidden; margin: 0; padding: 16px 16px 15px;
  text-align: left; color: var(--fg);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.pv-ans:hover { transform: translateY(-2px); border-color: var(--gilt-soft); }
.pv-ans.tone-good { --tone: var(--good); }
.pv-ans.tone-warning { --tone: var(--warn); }
.pv-ans.tone-serious { --tone: var(--serious); }
.pv-ans.tone-critical { --tone: var(--crit); }
.pv-ans.tone-positive { --tone: var(--pos); }
.pv-ans.tone-negative { --tone: var(--neg); }
.pv-ans.tone-accent { --tone: var(--accent); }
.pv-ans-q {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-muted);
}
.pv-ans-v { margin: 0 0 6px; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--parchment); }
.pv-ans-d { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--fg-dim); }
.pv-ans-c { margin: 10px 0 0; font-size: var(--fs-caption); color: var(--fg-faint); }
.pv-ans-fig { margin: 10px 0 0; font-size: var(--fs-small); color: var(--fg-muted); }
.pv-ans-fig b { font-size: 20px; color: var(--tone); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* The full read: folded depth. */
.pv-fullread details { padding: 4px 18px 18px; }
.pv-fullread summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 0 10px;
}
.pv-fullread summary::-webkit-details-marker { display: none; }
.pv-fullread summary h2 { margin: 0; }
.pv-fullread summary h2::before {
  content: "+"; font-family: var(--sans); font-size: 18px; color: var(--gilt); width: 14px;
}
.pv-fullread details[open] summary h2::before { content: "−"; }
.pv-summary-sub { color: var(--fg-muted); font-size: var(--fs-small); padding-left: 28px; }
.pv-fullread .pv-answer { background: rgba(255, 255, 255, .02); box-shadow: none; }

/* Related cards as small cards, artwork first. */
.pv-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.pv-mini {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px;
  color: var(--fg); transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.pv-mini:hover { transform: translateY(-3px); border-color: var(--gilt-soft); text-decoration: none; }
.pv-mini img, .pv-mini-blank {
  width: 100%; height: auto; aspect-ratio: 200 / 278; border-radius: 6px;
  background: var(--bg-sunken); display: block;
}
.pv-mini-name { font-size: var(--fs-small); line-height: 1.35; min-height: 2.7em; }
.pv-mini-price { font-size: var(--fs-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .pv-ans-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pv-trophy .card-stage { --cw: 236px; }
  .pv-trophy .stage-back, .pv-trophy .stage-fx { inset: -48px 0 -24px; }
  .pv-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------- /cards: the questions -- */
.pv-explore-budget {
  display: grid; gap: 36px; align-items: center; padding: 28px 32px;
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
  border-radius: var(--r-lg);
}
.pv-explore-budget.has-examples { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
.pv-budget-title { font: 700 24px/1.2 var(--display); color: var(--parchment); }
.pv-budget-rule { margin: 12px 0 0; max-width: 36ch; color: var(--fg-dim); font-size: var(--fs-small); line-height: 1.6; }
.pv-budget-preview { padding-left: 32px; border-left: 1px solid var(--gilt-line); min-width: 0; }
.pv-budget-preview .pv-eyebrow { margin: 0 0 18px; }
.pv-budget-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pv-budget-example { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; color: var(--fg); }
.pv-budget-example:hover { text-decoration: none; }
.pv-budget-art { width: min(100%, 120px); height: auto; aspect-ratio: 200 / 278; display: block; border-radius: 6px; box-shadow: 0 14px 24px -14px #000; transition: transform 200ms var(--ease); }
.pv-budget-example:hover .pv-budget-art { transform: translateY(-3px); }
.pv-budget-name { margin-top: 12px; font-size: 14px; line-height: 1.35; color: var(--parchment); }
.pv-budget-meta { margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--fg-muted); }
.pv-budget-price { margin-top: auto; padding-top: 8px; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--gilt); }
.pv-budget-note { margin: 16px 0 0; font-size: 11px; line-height: 1.5; color: var(--fg-muted); }
.pv-explore-budget .pv-budget-input:focus-within { border-color: var(--gilt); outline: 2px solid var(--gilt-soft); outline-offset: 2px; }
.pv-price-jump { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-top: 16px; border: 1px solid var(--gilt-soft); border-radius: var(--r-md); font-size: var(--fs-small); color: var(--gilt); }
.pv-price-jump:hover { background: var(--bg-hover); text-decoration: none; }
#price-list { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .pv-budget-example:hover .pv-budget-art { transform: none; }
}
@media (max-width: 760px) {
  .pv-explore-budget, .pv-explore-budget.has-examples { grid-template-columns: 1fr; padding: 22px 20px; gap: 24px; }
  .pv-budget-preview { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--gilt-line); }
  .pv-budget-examples { gap: 12px; }
  .pv-budget-name { font-size: 12px; }
  .pv-budget-meta { font-size: 10px; }
}
.pv-qcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pv-qcard {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; color: var(--fg);
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
  border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -30px #000;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.pv-qcard:hover { transform: translateY(-3px); border-color: var(--gilt-soft); text-decoration: none; }
.pv-qcard-arts { display: flex; justify-content: center; margin: 2px 0 8px; min-height: 96px; }
.pv-qcard-art {
  width: 66px; height: auto; aspect-ratio: 200 / 278; border-radius: 5px; display: block;
  box-shadow: 0 8px 18px -8px #000; background: var(--bg-sunken);
}
.pv-qcard-art + .pv-qcard-art { margin-left: -22px; }
.pv-qcard-arts .pv-qcard-art:nth-child(1) { rotate: -7deg; translate: 0 4px; }
.pv-qcard-arts .pv-qcard-art:nth-child(3) { rotate: 7deg; translate: 0 4px; }
.pv-qcard-arts .pv-qcard-art:nth-child(2) { position: relative; z-index: 1; }
.pv-qcard:hover .pv-qcard-arts .pv-qcard-art:nth-child(1) { rotate: -11deg; translate: -6px 4px; }
.pv-qcard:hover .pv-qcard-arts .pv-qcard-art:nth-child(3) { rotate: 11deg; translate: 6px 4px; }
.pv-qcard-arts .pv-qcard-art { transition: rotate 220ms var(--ease), translate 220ms var(--ease); }
.pv-qcard-title { font-family: var(--display); font-weight: 700; font-size: 16.5px; color: var(--parchment); }
.pv-qcard-rule { font-size: var(--fs-small); color: var(--fg-dim); line-height: 1.5; }
.pv-qcard-count { margin-top: auto; padding-top: 6px; font-size: var(--fs-small); color: var(--gilt); font-weight: 600; }

/* ----------------------------------- /cards/<question>: one question -- */
.pv-q-head .pv-eyebrow { margin-bottom: 6px; }
.pv-q-total { margin: var(--s4) 0 var(--s2); color: var(--fg-muted); font-size: var(--fs-small); }
.pv-q-ev { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.pv-q-fig { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--fg); }
.pv-q-lab { font-size: var(--fs-caption); color: var(--fg-muted); white-space: nowrap; }
.pv-results .pv-row-side { display: flex; flex-direction: row; align-items: center; gap: 22px; }
.pv-results .pv-row-price { min-width: 64px; text-align: right; }
.pv-q-fig.tone-positive { color: var(--pos-strong); }
.pv-q-fig.tone-negative { color: var(--neg-strong); }
.pv-pager {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: var(--s4) 0; font-size: var(--fs-small); color: var(--fg-muted);
}
.pv-ans-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-research-cards .pv-ans {
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 27.5px;
}
.pv-research-cards h3 { margin-top: 0; }
.pv-budget-form {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: var(--s3) 0 var(--s2);
}
.pv-budget-form label { display: flex; flex-direction: column; gap: 5px; }
.pv-budget-form label > span:first-child { font-size: var(--fs-small); color: var(--fg-muted); }
.pv-budget-input {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 44px;
  background: var(--bg-panel); border: 1px solid var(--gilt-line); border-radius: var(--r-md);
}
.pv-budget-input b { color: var(--gilt); font-family: var(--display); }
.pv-budget-input input {
  width: 110px; background: none; border: 0; color: var(--fg); font: inherit;
  font-size: 16px; font-variant-numeric: tabular-nums; outline: none;
}
.pv-budget-form button {
  min-height: 44px; padding: 0 20px; border-radius: var(--r-md); border: 0; cursor: pointer;
  background: var(--accent); color: var(--bg-app); font-weight: 600; font-size: var(--fs-body);
}
.pv-budget-form button:hover { background: var(--pos-strong); }
.pv-budget-form + .pv-budget-chips { margin-bottom: var(--s3); }
@media (max-width: 760px) {
  .pv-ans-grid-2 { grid-template-columns: 1fr; }
  .pv-results .pv-row-side { gap: 10px; }
}

/* The homepage's card tiles in the same frame as every other card on the
   site (the card page's related cards, the question previews). */
.pv-tile {
  padding: 10px 10px 12px; border-radius: 14px;
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -30px #000;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease);
}
.pv-tile:hover { transform: translateY(-3px); border-color: var(--gilt-soft); }
.pv-tile-wrap .pv-ebay { margin-left: 2px; }

/* ----------------------------------------------------------------- Find -- */
/* The card finder (`web/find.py`): one GET form - the search bar, a filter
   column in a framed panel, the results beside it. On a phone the column
   folds behind a "Filters" button (a CSS-only checkbox toggle, so it needs
   no script). */
.pv-find .pv-page-h1 { margin-bottom: var(--s2); }
.pv-find-lead { margin: 0 0 var(--s4); }
.pv-fsearch {
  display: flex; max-width: 720px; margin: var(--s3) 0 var(--s5); padding: 5px;
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
  border-radius: var(--r-lg); box-shadow: 0 10px 30px -18px #000;
}
.pv-fsearch:focus-within { border-color: var(--gilt-soft); }
.pv-fsearch input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg);
  font: inherit; font-size: 16px; padding: 11px 14px; outline: none;
}
.pv-fsearch input::placeholder { color: var(--fg-faint); }
.pv-fsearch button, .pv-fapply {
  flex: none; border: 0; border-radius: var(--r-md); cursor: pointer; font: inherit;
  font-weight: 600; font-size: 15px; padding: 0 22px; min-height: 44px;
  background: var(--accent); color: #fff;
}
.pv-fsearch button:hover, .pv-fapply:hover { background: var(--pos-strong); }
.pv-find-grid {
  display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start;
}
.pv-find-filters {
  position: sticky; top: 16px; padding: 18px 16px 16px; max-height: calc(100vh - 32px);
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
  border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.pv-fgroup { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.pv-fgroup legend, .pv-ffield > span {
  display: block; padding: 0; margin: 0 0 8px; font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gilt);
}
.pv-ffield { display: block; margin: 0 0 14px; }
.pv-ffield input, .pv-ffield select, .pv-frange input, .pv-ftools select {
  width: 100%; min-height: 38px; padding: 7px 10px; font: inherit; font-size: 14px;
  color: var(--fg); background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.pv-ffield input:focus, .pv-ffield select:focus, .pv-frange input:focus,
.pv-ftools select:focus { outline: none; border-color: var(--gilt-soft); }
.pv-fwarn { margin: -6px 0 0; font-size: var(--fs-small); color: var(--warn); }
.pv-fbands { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pv-fband, .pv-fopts .pv-fopt > span {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  font-size: var(--fs-small); color: var(--fg-dim); background: var(--bg-page);
  border: 1px solid var(--border); border-radius: var(--r-pill); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pv-fband:hover, .pv-fopts .pv-fopt:hover > span {
  color: var(--fg); border-color: var(--gilt-soft); text-decoration: none;
}
.pv-fband.on, .pv-fopts .pv-fopt input:checked + span {
  color: var(--parchment); border-color: var(--gilt); background: rgba(200, 170, 110, .12);
}
.pv-frange { display: flex; align-items: center; gap: 8px; color: var(--fg-faint); }
.pv-frange label { flex: 1; }
.pv-fopts { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-fopt { position: relative; display: inline-flex; cursor: pointer; }
.pv-fopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pv-fopt input:focus-visible + span { outline: 2px solid var(--gilt); outline-offset: 2px; }
.pv-fcount { margin-left: 1px; color: var(--fg-faint); font-variant-numeric: tabular-nums; font-size: 11px; }
/* A rarity carries its Card Stage colour as a small gem. */
.pv-frarity .pv-fopt > span::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
  background: var(--gem, var(--fg-faint)); flex: none;
}
.pv-frarity [data-tier="1"] { --gem: #b8a88a; }
.pv-frarity [data-tier="2"] { --gem: #8fb3d9; }
.pv-frarity [data-tier="3"] { --gem: #9d8cf0; }
.pv-frarity [data-tier="4"] { --gem: #e6a2d2; }
.pv-frarity [data-tier="5"] { --gem: var(--gilt); }
/* A checkbox that is a sentence ("Include unreliable prices"), not a chip. */
.pv-fgroup > .pv-fopt { display: flex; margin: 0 0 6px; }
.pv-fgroup > .pv-fopt > span {
  position: relative; padding: 4px 0 4px 26px; font-size: var(--fs-small); color: var(--fg-dim);
}
.pv-fgroup > .pv-fopt > span::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px;
  margin-top: -8px; border: 1px solid var(--gilt-soft); border-radius: 4px;
  background: var(--bg-sunken);
}
.pv-fgroup > .pv-fopt input:checked + span { color: var(--fg); }
.pv-fgroup > .pv-fopt input:checked + span::before {
  background: var(--gilt); border-color: var(--gilt); box-shadow: inset 0 0 0 3px var(--bg-panel);
}
.pv-fnote { margin: 6px 0 0; font-size: var(--fs-micro); line-height: 1.45; color: var(--fg-faint); }
.pv-fmore { margin: 0 0 16px; border-top: 1px solid var(--gilt-line); padding-top: 12px; }
.pv-fmore summary {
  cursor: pointer; font-size: var(--fs-small); color: var(--fg-dim); list-style: none;
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.pv-fmore summary::-webkit-details-marker { display: none; }
.pv-fmore summary::after { content: "▾"; color: var(--gilt); font-size: 11px; }
.pv-fmore[open] summary::after { content: "▴"; }
.pv-fapply { width: 100%; }
.pv-fhead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 12px;
}
.pv-fhead .pv-facts { margin: 0; }
.pv-fhead .pv-facts b { font-family: var(--display); color: var(--parchment); font-weight: 600; }
.pv-fhidden { display: block; font-size: var(--fs-small); color: var(--fg-muted); margin-top: 2px; }
.pv-ftools { display: flex; align-items: center; gap: 10px; }
.pv-ftools .pv-ffield { display: flex; align-items: center; gap: 8px; margin: 0; }
.pv-ftools .pv-ffield > span { margin: 0; }
.pv-ftools select { width: auto; min-height: 36px; }
.pv-fviews {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md);
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.pv-fview { padding: 5px 12px; border-radius: var(--r-sm); font-size: var(--fs-small); color: var(--fg-muted); }
.pv-fview:hover { color: var(--fg); text-decoration: none; }
.pv-fview.on { color: var(--parchment); background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--gilt-line); }
.pv-factive { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.pv-fchip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px 4px 12px;
  font-size: var(--fs-small); color: var(--parchment); border-radius: var(--r-pill);
  background: rgba(200, 170, 110, .1); border: 1px solid var(--gilt-soft);
}
.pv-fchip span { color: var(--gilt); font-size: 14px; line-height: 1; }
.pv-fchip:hover { text-decoration: none; border-color: var(--gilt); }
.pv-fclear { font-size: var(--fs-small); color: var(--fg-muted); margin-left: 4px; }
.pv-find-tiles { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: var(--s4) var(--s3); }
.pv-find-results .pv-results { margin-top: 0; }
.pv-fempty { padding: var(--s5) 0; }
.pv-ftoggle-box { position: absolute; opacity: 0; pointer-events: none; }
.pv-ftoggle { display: none; }
@media (max-width: 860px) {
  .pv-find-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pv-ftoggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    margin: 0 0 12px; border-radius: var(--r-md); cursor: pointer; font-weight: 600;
    color: var(--parchment); background: var(--bg-panel); border: 1px solid var(--gilt-soft);
  }
  .pv-ftoggle::before { content: "☰"; color: var(--gilt); }
  .pv-find-filters { display: none; position: static; max-height: none; }
  .pv-ftoggle-box:checked ~ .pv-find-grid .pv-find-filters { display: block; }
  .pv-ftoggle-box:focus-visible + .pv-ftoggle { outline: 2px solid var(--gilt); outline-offset: 2px; }
}
@media (max-width: 640px) {
  .pv-fsearch { margin-bottom: var(--s4); }
  .pv-fsearch button { padding: 0 16px; }
  .pv-find-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-fhead { align-items: flex-start; }
  .pv-ftools { width: 100%; justify-content: space-between; }
  .pv-ftools .pv-ffield { flex: 1; min-width: 0; }
  .pv-ftools select { width: 100%; min-width: 0; }
}

/* ================================= the card page, second pass (2026-09-26) ==
   After the owner's review: calmer, and every element placed on purpose.
   Colour appears only inside a small picture that carries a direction, in
   the data colours; headlines are parchment, labels muted, lines soft. The
   rows of the fact grid line up across cards (subgrid), so a label, headline,
   picture and line sit on the same baseline in every card of a row. */
.pv-cardpage .pv-block { margin-top: 64px; }
.pv-cardpage .pv-block h3 { margin: 36px 0 12px; font-size: 10.5px; letter-spacing: .14em; }

/* --- Before you buy: one spec sheet (2026-09-26, direction A) ----------
   The owner chose "one instrument" for the card page: every section built
   from the same few parts (the score's track and knob, its diverging bars,
   the ring, parchment for what has no direction), and the card's own colour
   meaning one thing only - "this card, now": the knob on the price slider,
   on the rank, today's dot in the chart. The six facts are one panel with
   hairlines between them rather than six boxes. No gold, no glow, no idle
   motion but the knob's ping. */
.pv-bb-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto;
  overflow: hidden; border-radius: 16px;
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -30px #000;
}
.pv-bb {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  padding: 22px 24px 24px;
  border-right: 1px solid rgba(246, 242, 236, .06); border-bottom: 1px solid rgba(246, 242, 236, .06);
  transition: background-color 220ms var(--ease);
}
.pv-bb:nth-child(3n) { border-right: 0; }
.pv-bb:nth-last-child(-n+3) { border-bottom: 0; }
.pv-bb:hover { background-color: rgba(246, 242, 236, .018); }
.pv-bb-top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.pv-bb-ico { flex: none; display: grid; place-items: center; color: var(--fg-muted); }
.pv-bb-ico svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.pv-bb-label {
  margin: 0; font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}
.pv-bb-head {
  margin: 0 0 14px; font-family: var(--display); font-size: 17px; font-weight: 600;
  line-height: 1.28; letter-spacing: -.01em; color: var(--parchment); text-wrap: balance;
}
.pv-bb-vis { display: flex; align-items: center; min-height: 54px; margin: 0 0 14px; }
.pv-bb-vis-none { min-height: 0; margin: 0; }.pv-bb-vis-none { min-height: 0; margin: 0; }
.pv-bb-line { margin: 0; align-self: start; font-size: 13.5px; line-height: 1.55; color: var(--fg-dim); }
.pv-bb-link { white-space: nowrap; font-size: 12.5px; color: var(--fg-muted); }
.pv-bb-link:hover { color: var(--parchment); text-decoration: none; }
.pv-bb-cap { font-size: 11.5px; color: var(--fg-muted); }
.pv-bb-cap b { font-weight: 600; color: var(--parchment); font-variant-numeric: tabular-nums; }
/* where today's price sits in its own year */
.pv-bb-range { width: 100%; }
.pv-bb-track {
  position: relative; display: block; height: 8px; border-radius: 4px;
  background: rgba(246, 242, 236, .06);
}
.pv-bb-range .pv-bb-track {          /* a track like the score's own */
  background: linear-gradient(90deg, rgba(246, 242, 236, .05), rgba(246, 242, 236, .14));
}
.pv-bb-range .pv-bb-track i, .pv-bb-rank .pv-bb-track i {
  position: absolute; top: 50%; left: calc(var(--pos) * 100%); width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%; background: var(--parchment);
  box-shadow: 0 0 0 3px var(--bg-panel), 0 0 0 4.5px var(--sa);
}
.pv-bb-ends {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 9px;
  font-size: 11.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.pv-bb-ends .pv-bb-cap { color: var(--fg-faint); }
/* the card's two months against the typical card's */
.pv-bb-vs {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px;
  align-items: center; width: 100%; font-size: 12px;
}
.pv-bb-vs-l { color: var(--fg-muted); }
.pv-bb-vs-v { min-width: 50px; text-align: right; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.pv-bb-vs-bar { position: relative; height: 8px; border-radius: 4px; background: rgba(246, 242, 236, .04); }
.pv-bb-vs-bar::before {
  content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px;
  background: rgba(246, 242, 236, .16);
}
.pv-bb-vs-bar i { position: absolute; top: 0; bottom: 0; width: max(4px, calc(var(--w) * 50%)); border-radius: 4px; }
.pv-bb-vs-bar.pos i { left: 50%; background: color-mix(in srgb, var(--pos) 88%, transparent); }
.pv-bb-vs-bar.neg i { right: 50%; background: color-mix(in srgb, var(--neg) 82%, transparent); }
/* a chance, as a ring */
.pv-ring {
  --ring: var(--fg-muted);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--size); height: var(--size);
}
.pv-ring svg { position: absolute; inset: 0; }
.pv-ring-track { fill: none; stroke: rgba(246, 242, 236, .08); stroke-width: 5; }
.pv-ring-arc { fill: none; stroke: var(--ring); stroke-width: 5; stroke-linecap: round; }
.pv-ring b {
  position: relative; font-family: var(--display); font-weight: 700;
  font-size: calc(var(--size) * .27); color: var(--parchment); font-variant-numeric: tabular-nums;
}
.pv-ring.tone-positive { --ring: var(--pos); }
.pv-ring.tone-negative { --ring: var(--neg); }
.pv-bb-ringrow { display: flex; align-items: center; gap: 14px; }
.pv-ring-cap { max-width: 18ch; font-size: 12px; line-height: 1.35; color: var(--fg-muted); }
/* how often it trades, in twenty steps */
.pv-bb-meter { width: 100%; }
.pv-bb-segs { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-bottom: 10px; }
.pv-bb-segs i { height: 10px; border-radius: 2px; background: rgba(246, 242, 236, .06); }
.pv-bb-segs i.on { background: color-mix(in srgb, var(--parchment) 72%, transparent); }
/* its place in its set */
.pv-bb-rank {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px;
  align-items: center; width: 100%;
}
.pv-bb-rank b { grid-row: span 2; }
.pv-bb-rank .pv-bb-track {
  height: 4px; margin-top: 4px;
  background: linear-gradient(90deg, rgba(246, 242, 236, .04), rgba(246, 242, 236, .16));
}
.pv-bb-rank .pv-bb-track i { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.pv-bb-rank b {
  font-family: var(--display); font-size: 36px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--parchment); font-variant-numeric: tabular-nums;
}
/* the grading fee against the price */
.pv-bb-share { width: 100%; }
.pv-bb-share .pv-bb-track { margin-bottom: 10px; }
.pv-bb-share .pv-bb-track i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px;
  width: max(6px, calc(var(--w) * 100%));
  background: color-mix(in srgb, var(--parchment) 72%, transparent);
}

/* The card's colour (its rarity motif, the Card Stage's pigment --sa, set by
   `data-motif` on the section through card-stage.css; pearl when there is
   none) marks "this card, now" and nothing else: the knobs here and today's
   dot in the chart below, each with a slow ping (motion only). */
:where(.pv-buyer, .pv-nx) { --sa: #d7e0ee; --sb: #8e9fc6; --sc: #f6ecd6; --sd: #b9c7e6; }
.pv-bb-range .pv-bb-track i::after, .pv-bb-rank .pv-bb-track i::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--sa); opacity: 0;
}
@keyframes pv-ping { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.pv-motion :is(.pv-bb-range, .pv-bb-rank) .pv-bb-track i::after {
  animation: pv-ping 2.8s cubic-bezier(.2, .6, .3, 1) 1.2s infinite;
}

/* --- The next 60 days: the showpiece ----------------------------------- */
/* The head each analysis section opens with (Before you buy, the next 60
   days, the score): its figure as a ring where it has one, its verdict, one
   sentence - the same in all three, so the page reads as one instrument. */
.pv-sec-head { display: flex; align-items: center; gap: 22px; margin: 2px 0 22px; }
.pv-sec-ring { flex: none; display: flex; }
.pv-sec-headline {
  margin: 0 0 8px; font-family: var(--display); font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--parchment);
}
.pv-sec-line { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--fg-dim); }
.pv-ring.tone-score { --ring: var(--accent); }
.pv-nx-warn { margin: 10px 0 0; font-size: 13px; color: var(--warn); }
.pv-nx-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: 18px;
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
}
.pv-nx-panel.pv-nx-has-rail { grid-template-columns: minmax(0, 1fr) 236px; }
.pv-nx-main { min-width: 0; align-self: center; padding: 16px 12px 10px 18px; }
.pv-nx-has-rail .pv-nx-main { align-self: stretch; padding: 0; }
.pv-nx-bleed .pv-nx-tabs { top: 12px; left: 12px; }
/* the next 60 days as one quiet zone, its label centred over it */
.pv-nx-zone { fill: rgba(246, 242, 236, .028); }
.pv-nx-bleed .pv-nx-zone-label { fill: var(--fg-muted); }
/* the figures the fan stands for, each with its band's swatch */
.pv-nx-rail {
  display: flex; flex-direction: column; justify-content: center; padding: 20px 22px;
  border-left: 1px solid rgba(246, 242, 236, .06);
}
.pv-nx-rs { display: grid; gap: 3px; padding: 13px 0; }
.pv-nx-rs:first-child { padding-top: 0; }
.pv-nx-rs:last-child { padding-bottom: 0; }
.pv-nx-rs + .pv-nx-rs { border-top: 1px solid rgba(246, 242, 236, .05); }
.pv-nx-rk {
  display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 10px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted);
}
.pv-nx-rs b {
  font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; color: var(--parchment); font-variant-numeric: tabular-nums;
}
.pv-nx-rn { font-size: 12px; line-height: 1.4; color: var(--fg-faint); }
.pv-nx-sw { flex: none; width: 14px; height: 9px; border-radius: 2px; }
.pv-nx-sw80 { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.pv-nx-sw50 { background: color-mix(in srgb, var(--accent) 46%, transparent); }
.pv-nx-swmid { height: 0; border-top: 2px dashed var(--pos-strong); border-radius: 0; }
.pv-nx-track {
  position: relative; display: block; height: 4px; margin: 5px 0 2px; border-radius: 2px;
  background: rgba(246, 242, 236, .07);
}
.pv-nx-track i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px;
  width: calc(var(--w) * 100%); background: color-mix(in srgb, var(--parchment) 72%, transparent);
}
.pv-nx-chart { position: relative; margin: 0; }
.pv-nx-r { position: absolute; opacity: 0; pointer-events: none; }
.pv-nx-tabs {
  position: absolute; top: 0; left: 0; z-index: 1; display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 10px; background: var(--bg-sunken); border: 1px solid rgba(246, 242, 236, .06);
}
.pv-nx-tabs label { padding: 4px 12px; border-radius: 7px; font-size: 12px; color: var(--fg-muted); cursor: pointer; }
.pv-nx-tabs label:hover { color: var(--fg); }
.pv-nx-r1:checked ~ .pv-nx-tabs label[for$="-r1"],
.pv-nx-r2:checked ~ .pv-nx-tabs label[for$="-r2"] { background: var(--bg-elevated); color: var(--parchment); }
.pv-nx-r1:checked ~ .pv-nx-f2, .pv-nx-r2:checked ~ .pv-nx-f1 { display: none; }
.pv-nx-r:focus-visible ~ .pv-nx-tabs { outline: 2px solid var(--gilt); outline-offset: 2px; }
.pv-nx-fig { position: relative; }
.pv-nx-fig svg { display: block; overflow: visible; }
.pv-nx-grid { stroke: rgba(246, 242, 236, .05); stroke-width: 1; }
.pv-nx-tick { fill: var(--fg-faint); font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.pv-nx-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pv-nx-g0 { stop-color: var(--accent); stop-opacity: .16; }
.pv-nx-g1 { stop-color: var(--accent); stop-opacity: 0; }
.pv-nx-b80 { fill: var(--accent); fill-opacity: .12; }
.pv-nx-b50 { fill: var(--accent); fill-opacity: .2; }
.pv-nx-mid { fill: none; stroke: var(--pos-strong); stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; }
.pv-nx-mark { stroke: rgba(246, 242, 236, .16); stroke-width: 1; stroke-dasharray: 2 4; }
.pv-nx-label {
  fill: var(--fg-muted); font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.pv-nx-dot { fill: var(--parchment); stroke: var(--bg-panel); stroke-width: 2; }
.pv-nx .pv-nx-dot { stroke: var(--sa); stroke-width: 2.2; }       /* this card, now */
.pv-nx-ping { fill: none; stroke: var(--sa, var(--parchment)); stroke-width: 1.5; opacity: 0; }
.pv-motion .pv-nx-ping {
  transform-box: fill-box; transform-origin: center;
  animation: pv-ping 2.8s cubic-bezier(.2, .6, .3, 1) 3s infinite;
}
.pv-nx-end { fill: var(--fg-muted); font-family: var(--sans); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pv-nx-end-mid { fill: var(--pos-strong); font-weight: 600; }
.pv-nx-cross { stroke: rgba(246, 242, 236, .22); stroke-width: 1; stroke-dasharray: 3 3; }
.pv-nx-tip {
  position: absolute; z-index: 2; transform: translate(-50%, -100%); pointer-events: none;
  padding: 6px 10px; border-radius: 9px; white-space: nowrap; font-size: 12px;
  background: var(--bg-floating); border: 1px solid var(--gilt-line);
  box-shadow: 0 12px 30px -12px #000;
}
.pv-nx-tip b { margin-right: 8px; color: var(--parchment); font-variant-numeric: tabular-nums; }
.pv-nx-tip span { color: var(--fg-muted); }
.pv-nx-legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px;
  font-size: 12px; color: var(--fg-muted);
}
.pv-nx-k { display: inline-flex; align-items: center; gap: 8px; }
.pv-nx-k::before { content: ""; width: 18px; height: 8px; border-radius: 2px; }
.pv-nx-k-line::before { height: 2px; background: var(--accent); }
.pv-nx-k-mid::before { height: 0; border-top: 2px dashed var(--pos-strong); border-radius: 0; }
.pv-nx-k-50::before { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.pv-nx-k-80::before { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pv-nx-how { margin-top: 12px; }
.pv-nx-how summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--fg-muted);
}
.pv-nx-how summary::-webkit-details-marker { display: none; }
.pv-nx-how summary::before { content: "+"; width: 10px; font-size: 15px; color: var(--gilt); }
.pv-nx-how[open] summary::before { content: "\2212"; }
.pv-nx-how summary:hover { color: var(--fg); }
.pv-nx-how p { margin: 10px 0 0; max-width: 72ch; font-size: 13px; line-height: 1.6; color: var(--fg-muted); }

/* --- Why it scores where it does: the score in words -------------------- */
.pv-sw-panel {
  padding: 6px 26px 14px; border-radius: 18px;
  background: var(--panel-grad), var(--bg-panel); border: 1px solid var(--gilt-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -30px #000;
}
/* the tug of war: what holds it back pulls left, what lifts it pulls right */
.pv-sw-tug {
  display: grid; grid-template-columns: 116px minmax(0, 1fr) 116px; gap: 14px; align-items: center;
  padding: 18px 0 18px; border-bottom: 1px solid rgba(246, 242, 236, .06);
}
.pv-sw-tl { font-size: 12px; color: var(--fg-muted); text-align: right; }
.pv-sw-tl::before { content: "\2190  "; }
.pv-sw-tr { font-size: 12px; color: var(--fg-muted); }
.pv-sw-tr::after { content: "  \2192"; }
.pv-sw-tb { position: relative; display: block; height: 14px; }
.pv-sw-tb::before {
  content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px;
  background: rgba(246, 242, 236, .3);
}
.pv-sw-pull { position: absolute; top: 0; bottom: 0; display: flex; gap: 2px; width: var(--w); }
.pv-sw-pull i { display: block; min-width: 3px; height: 100%; }
.pv-sw-down { right: 50%; flex-direction: row-reverse; transform-origin: 100% 50%; }
.pv-sw-up { left: 50%; transform-origin: 0 50%; }
.pv-sw-down i { background: rgba(230, 103, 103, var(--o)); }
.pv-sw-up i { background: rgba(57, 135, 229, var(--o)); }
.pv-sw-down i:first-child { border-radius: 0 3px 3px 0; }
.pv-sw-down i:last-child { border-radius: 3px 0 0 3px; }
.pv-sw-up i:first-child { border-radius: 3px 0 0 3px; }
.pv-sw-up i:last-child { border-radius: 0 3px 3px 0; }
/* the ingredients, two columns, each with its segment's swatch */
.pv-sw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.pv-sw-f {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) 150px; gap: 12px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid rgba(246, 242, 236, .05);
}
.pv-sw-f:nth-last-child(-n+2) { border-bottom: 0; }
.pv-sw-sw { width: 10px; height: 10px; border-radius: 3px; }
.pv-sw-sw.down { background: rgba(230, 103, 103, var(--o)); }
.pv-sw-sw.up { background: rgba(57, 135, 229, var(--o)); }
.pv-sw-fn b { display: block; font-size: 14px; font-weight: 600; color: var(--fg); }
.pv-sw-fn span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-muted); }
.pv-sw-bar { position: relative; height: 6px; border-radius: 3px; background: rgba(246, 242, 236, .04); }
.pv-sw-bar::before {
  content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px;
  background: rgba(246, 242, 236, .16);
}
.pv-sw-bar i { position: absolute; top: 0; bottom: 0; width: max(4px, calc(var(--w) * 50%)); border-radius: 3px; }
.pv-sw-bar.down i { right: 50%; background: color-mix(in srgb, var(--neg) 82%, transparent); }
.pv-sw-bar.up i { left: 50%; background: color-mix(in srgb, var(--pos) 88%, transparent); }
.pv-sw-empty { margin: 4px 0 12px; font-size: 13px; color: var(--fg-muted); }
.pv-sw-reason { font-size: 14.5px; line-height: 1.6; color: var(--fg-dim); }

/* --- related cards: six, so every row is full -------------------------- */
.pv-cardpage .pv-minis { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .pv-bb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-bb:nth-child(3n) { border-right: 1px solid rgba(246, 242, 236, .06); }
  .pv-bb:nth-child(2n) { border-right: 0; }
  .pv-bb:nth-last-child(-n+3) { border-bottom: 1px solid rgba(246, 242, 236, .06); }
  .pv-bb:nth-last-child(-n+2) { border-bottom: 0; }
  .pv-nx-panel.pv-nx-has-rail { grid-template-columns: minmax(0, 1fr); }
  .pv-nx-rail {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px;
    border-left: 0; border-top: 1px solid rgba(246, 242, 236, .06);
  }
  .pv-nx-rs, .pv-nx-rs:first-child, .pv-nx-rs:last-child { padding: 0; }
  .pv-nx-rs + .pv-nx-rs { border-top: 0; }
  .pv-sw-grid { grid-template-columns: minmax(0, 1fr); }
  .pv-sw-f:nth-last-child(2) { border-bottom: 1px solid rgba(246, 242, 236, .05); }
  .pv-cardpage .pv-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pv-cardpage .pv-block { margin-top: 48px; }
  .pv-bb-grid { grid-template-columns: minmax(0, 1fr); }
  .pv-bb, .pv-bb:nth-child(3n) { border-right: 0; }
  .pv-bb:nth-last-child(-n+3), .pv-bb:nth-last-child(-n+2) { border-bottom: 1px solid rgba(246, 242, 236, .06); }
  .pv-bb:last-child { border-bottom: 0; }
  .pv-sec-head { gap: 16px; }
  .pv-nx-main { padding: 14px 10px 8px 12px; }
  .pv-nx-has-rail .pv-nx-main { padding: 0; }
  .pv-nx-tabs { position: static; margin-bottom: 8px; }
  .pv-nx-tick, .pv-nx-end { font-size: 26px; }
  .pv-nx-label { font-size: 22px; }
  .pv-nx-xt text:nth-child(even) { display: none; }
  .pv-nx-label-end { display: none; }      /* too close to "Today" at this width */
  .pv-nx-rail { padding: 16px 16px 18px; gap: 14px 16px; }
  .pv-nx-rs b { font-size: 16px; white-space: nowrap; }
  .pv-nx-rs:nth-child(-n+2) { grid-column: 1 / -1; }   /* the two ranges, whole */
  .pv-sw-panel { padding: 4px 16px 10px; }
  .pv-sw-tug { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .pv-sw-tb { grid-column: 1 / -1; grid-row: 2; }
  .pv-sw-tl { text-align: left; }
  .pv-sw-tr { text-align: right; }
  .pv-sw-f { grid-template-columns: 10px minmax(0, 1fr) 110px; }
  .pv-cardpage .pv-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------- the card of the day --
   (`web/showcase.py`) A spotlight, presented the way a game presents its
   featured skin: the card on its Card Stage - its reveal held until the
   panel scrolls into view - over the card's own art, blurred into the
   panel's atmosphere; beside it who it is, what it costs and the way in,
   the 60-day chart in a well, and three stat plates. A gilt frame with two
   corner marks and a slow sheen along its top edge. The stage's light fades
   out before the frame, never against it. The same block is the card of the
   week on `/this-week`. */
.pv-cotd[data-placement="home"] { margin-top: 8px; }   /* right under the hero */
.pv-cotd-sub { margin: -6px 0 16px; }
.pv-cotd-in {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 8px 36px; align-items: center;
  padding: 32px 44px 36px 26px; border-radius: 22px;
  border: 1px solid rgba(200, 170, 110, .24);
  background: radial-gradient(70% 120% at 100% 0%, rgba(200, 170, 110, .07), transparent 60%),
              linear-gradient(180deg, #221d19, #171310);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 90px -50px #000;
}
/* the card's own art, blown up and blurred: each day its own colour */
.pv-cotd-splash {
  position: absolute; z-index: -1; left: -8%; top: -35%; width: 66%; height: 170%;
  object-fit: cover; pointer-events: none; opacity: .7;
  filter: blur(48px) saturate(1.6) brightness(.6);
  -webkit-mask-image: linear-gradient(90deg, #000 25%, transparent 90%);
          mask-image: linear-gradient(90deg, #000 25%, transparent 90%);
}
/* two gilt corner marks */
.pv-cotd-in::before, .pv-cotd-in::after {
  content: ""; position: absolute; z-index: 3; width: 32px; height: 32px;
  pointer-events: none; border: 0 solid rgba(214, 189, 136, .7);
}
.pv-cotd-in::before { left: 10px; top: 10px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 13px; }
.pv-cotd-in::after { right: 10px; bottom: 10px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 13px; }
/* a thin light that runs along the top edge now and then (motion only) */
.pv-cotd-sheen {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(248, 236, 208, .95), transparent) no-repeat;
  background-size: 34% 100%; background-position: -60% 0; opacity: 0;
}
@keyframes pv-sheen {
  0% { background-position: -60% 0; opacity: 0; }
  8% { opacity: 1; }
  34% { background-position: 160% 0; opacity: 0; }
  100% { background-position: 160% 0; opacity: 0; }
}
.pv-motion .pv-cotd-sheen { animation: pv-sheen 9s ease-in-out 2.5s infinite; }

/* the stage: bigger, and its light masked to a soft round edge */
.pv-cotd-stage { display: block; position: relative; text-decoration: none; }
.pv-cotd-stage:hover { text-decoration: none; }
.pv-cotd .card-stage { --cw: 252px; margin: 0 auto; }
.pv-cotd .stage-back, .pv-cotd .stage-fx {
  inset: -50px -30px -30px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
          mask-image: radial-gradient(closest-side, #000 55%, transparent);
}

.pv-cotd-body { min-width: 0; display: grid; gap: 18px; }
.pv-cotd-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 18px 32px;
}
.pv-cotd-id { min-width: 0; }
.pv-cotd .pv-rarity { margin: 0 0 12px; }
.pv-cotd .pv-cotd-name {
  margin: 0; font-family: var(--display); font-size: clamp(28px, 2.9vw, 38px);
  font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-transform: none;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}
.pv-cotd-name a { color: var(--parchment); }
.pv-cotd-name a:hover { color: #fff; text-decoration: none; }
.pv-cotd-set { margin: 7px 0 0; font-size: 14px; color: var(--fg-muted); }
/* margin-left: auto keeps it on the right when a long name pushes it onto a
   line of its own - otherwise it lands left with its button pushed right */
.pv-cotd-buy { display: grid; justify-items: end; gap: 12px; margin-left: auto; }
.pv-cotd-price { display: flex; align-items: center; gap: 12px; }
.pv-cotd-price b {
  font-family: var(--display); font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--parchment); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.pv-cotd-actions { display: flex; align-items: center; gap: 10px; }
/* the way in: the one gold button on the page */
.pv-cotd-go {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  min-height: 42px; padding: 0 20px; border-radius: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .01em; color: #1d160d;
  background: linear-gradient(180deg, #e8d19b 0%, #c8aa6e 58%, #a98b53 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .18),
              0 12px 28px -14px rgba(200, 170, 110, .8);
  transition: transform 160ms var(--ease), filter 160ms var(--ease);
}
.pv-cotd-go::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 140% 0;
}
.pv-cotd-go:hover { color: #1d160d; text-decoration: none; transform: translateY(-1px); filter: brightness(1.06); }
.pv-motion .pv-cotd-go:hover::after { background-position: -40% 0; transition: background-position .9s ease; }
.pv-cotd .pv-ebay { font-size: 13px; }

/* the chart, in a well */
.pv-cotd-chart {
  margin: 0; padding: 10px 12px 2px; border-radius: 14px;
  background: rgba(10, 8, 7, .42); border: 1px solid rgba(246, 242, 236, .05);
  box-shadow: inset 0 1px 12px rgba(0, 0, 0, .25);
}
.pv-cotd-chart .pv-nx-chart { margin: 0; }

/* three stat plates */
.pv-cotd-plates { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; }
.pv-cotd-plate {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
  border-radius: 12px; border: 1px solid rgba(200, 170, 110, .15);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
}
.pv-cotd-plate > span { display: grid; gap: 3px; min-width: 0; }
.pv-cotd-plate small { font-size: 11.5px; line-height: 1.35; color: var(--fg-muted); }
.pv-cotd-plate .pv-cotd-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.pv-cotd-plate b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.pv-cotd-plate b.pv-cotd-v {
  font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.15;
  color: var(--parchment); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pv-cotd-plate b.pv-cotd-v.tone-positive { color: var(--pos-strong); }
.pv-cotd-plate b.pv-cotd-v.tone-negative { color: var(--neg-strong); }

@media (max-width: 1120px) {
  .pv-cotd-in { grid-template-columns: 250px minmax(0, 1fr); gap: 8px 28px; }
  .pv-cotd .card-stage { --cw: 206px; }
}
@media (max-width: 900px) {
  .pv-cotd-in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 22px 24px; }
  .pv-cotd-splash {
    left: -10%; top: -10%; width: 120%; height: 62%;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
            mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  }
  .pv-cotd .card-stage { --cw: 196px; }
  .pv-cotd-buy { justify-items: start; margin-left: 0; }
}
@media (max-width: 640px) {
  .pv-cotd .pv-nx-tick, .pv-cotd .pv-nx-end { font-size: 18px; }
  .pv-cotd .pv-nx-label { font-size: 16px; }
  .pv-cotd-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pv-cotd-plate:first-child { grid-column: 1 / -1; }
  .pv-cotd-plate { padding: 11px 12px; }
  .pv-cotd-plate b.pv-cotd-v { font-size: 17px; }
  .pv-cotd-in::before, .pv-cotd-in::after { width: 28px; height: 28px; }
}

/* ------------------------------------------------ the week in numbers --
   (`web/weekly.py`, `/this-week`) Three calm figures: a caption, the number,
   one line on what it counts. */
.pv-wk-pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pv-wk-fig { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px 20px; min-width: 0; }
.pv-wk-k {
  margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-muted);
}
.pv-wk-fig b {
  font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.1;
  color: var(--parchment); font-variant-numeric: tabular-nums;
}
.pv-wk-fig b.tone-positive { color: var(--pos-strong); }
.pv-wk-fig b.tone-negative { color: var(--neg-strong); }
.pv-wk-n { font-size: 13.5px; line-height: 1.45; color: var(--fg-muted); }
a.pv-wk-n { color: var(--fg); }
a.pv-wk-n:hover { color: var(--parchment); }
@media (max-width: 760px) {
  .pv-wk-pulse { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pv-wk-fig {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    gap: 2px 14px; padding: 14px 16px;
  }
  .pv-wk-fig b { grid-row: span 2; font-size: 26px; align-self: center; }
  .pv-wk-k { grid-column: 1; }
  .pv-wk-n { grid-column: 1; }
}

/* ----------------------------------------------------------------- motion --
   (2026-09-26) Slow and deliberate, and only where it says something: a
   chart draws its price line, then opens its fan; a ring and a bar fill to
   their value; a section that starts below the fold rises into place; a
   card tile catches the light; the homepage's fan breathes and leans toward
   the pointer. All of it hangs off `html.pv-motion` (`page_shell.MOTION`,
   never set under prefers-reduced-motion) and `site.js`, which adds `.is-in`
   as a piece scrolls into view - until then its animation waits on its first
   frame. Without the class every figure is simply drawn complete. The card
   page's trophy has no motion here: it is the Card Stage's. */
@keyframes pv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pv-fade { from { opacity: 0; } }
@keyframes pv-open { from { transform: scaleX(0); opacity: 0; } }
@keyframes pv-fill { from { stroke-dasharray: 0 999; } }
@keyframes pv-grow { from { transform: scaleX(0); } }
@keyframes pv-slide { from { left: 0; opacity: 0; } }
@keyframes pv-pop { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.4); opacity: 1; } }
@keyframes pv-float { from { translate: 0 0; } to { translate: 0 -7px; } }
@keyframes pv-breathe { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }

.pv-motion :is(.pv-nx-chart, .pv-ring, .pv-bb-vis, .pv-sw-tug, .pv-sw-bar, .pv-ruler, .pv-dots):not(.is-in) :is(*, *::after) { animation-play-state: paused !important; }

/* the chart: the line draws, the area settles in under it, "today" lands,
   the fan opens out of it, and its three ends are read last */
.pv-motion .pv-nx-line { stroke-dasharray: 1; animation: pv-draw 1.7s cubic-bezier(.45, .05, .25, 1) both; }
.pv-motion .pv-nx-area { animation: pv-fade .9s ease .7s both; }
.pv-motion .pv-nx-chart svg > .pv-nx-mark,
.pv-motion .pv-nx-chart svg > .pv-nx-label { animation: pv-fade .6s ease 1.4s both; }
.pv-motion .pv-nx-chart svg > .pv-nx-dot {
  transform-box: fill-box; transform-origin: center; animation: pv-pop .55s ease-out 1.6s both;
}
.pv-motion :is(.pv-nx-b80, .pv-nx-b50, .pv-nx-mid) {
  transform-box: fill-box; transform-origin: 0 50%;
  animation: pv-open 1.2s cubic-bezier(.2, .7, .2, 1) 1.75s both;
}
.pv-motion .pv-nx-b50 { animation-delay: 1.85s; }
.pv-motion .pv-nx-mid { animation-delay: 1.95s; }
.pv-motion .pv-nx-end { animation: pv-fade .7s ease 2.6s both; }
.pv-motion .pv-nx-zone, .pv-motion .pv-nx-zone-label { animation: pv-fade .8s ease 1.5s both; }

/* rings fill to their share; the facts' bars grow, the marker slides, the
   meter lights segment by segment */
.pv-motion .pv-ring-arc { animation: pv-fill 1.5s cubic-bezier(.3, .7, .2, 1) .25s both; }
.pv-motion .pv-bb-vs-bar i { transform-origin: 0 50%; animation: pv-grow 1.1s cubic-bezier(.3, .7, .2, 1) .3s both; }
.pv-motion .pv-bb-vs-bar.neg i { transform-origin: 100% 50%; }
.pv-motion .pv-bb-share .pv-bb-track i { transform-origin: 0 50%; animation: pv-grow 1.1s cubic-bezier(.3, .7, .2, 1) .3s both; }
.pv-motion :is(.pv-bb-range, .pv-bb-rank) .pv-bb-track i { animation: pv-slide .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
.pv-motion .pv-bb-segs i.on { animation: pv-fade .3s ease-out both; animation-delay: calc(.25s + var(--i) * 55ms); }
@keyframes pv-tile-in { from { opacity: 0; transform: translateY(12px); } }
.pv-motion .pv-buyer.pv-risen .pv-bb {
  animation: pv-tile-in .6s cubic-bezier(.2, .7, .2, 1) backwards;
  animation-delay: calc(.05s + var(--i) * 60ms);
}
/* the score: the tug of war pulls out from the centre; each bar grows */
.pv-motion .pv-sw-pull { animation: pv-grow 1s cubic-bezier(.3, .7, .2, 1) .25s both; }
.pv-motion .pv-sw-bar i { animation: pv-grow .9s cubic-bezier(.3, .7, .2, 1) .45s both; }
.pv-motion .pv-sw-bar.down i { transform-origin: 100% 50%; }
.pv-motion .pv-sw-bar.up i { transform-origin: 0 50%; }

/* a section that starts below the fold rises into place */
.pv-motion .pv-pre { opacity: 0; transform: translateY(22px); }
.pv-motion .pv-risen {
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}

/* a card tile catches the light when the pointer finds it */
.pv-tile { position: relative; }
.pv-tile::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 10px; aspect-ratio: 200 / 278;
  border-radius: 8px; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 246, 228, .0) 40%,
              rgba(255, 246, 228, .26) 50%, rgba(214, 226, 255, .12) 56%, transparent 66%);
  background-size: 260% 100%; background-position: 130% 0; mix-blend-mode: screen;
}
.pv-motion .pv-tile:hover::after {
  opacity: 1; background-position: -30% 0; translate: 0 -3px;
  transition: background-position 1.1s cubic-bezier(.3, .6, .2, 1), opacity .2s ease;
}

/* the homepage's fan: a slow breath of light behind it, each card floating
   on its own beat, and the whole fan leaning a few degrees toward the
   pointer (`--px`/`--py`, set by site.js) */
.pv-motion .pv-fan { transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  transform: perspective(1100px) rotateY(calc(var(--px, 0) * 7deg)) rotateX(calc(var(--py, 0) * -5deg)); }
.pv-motion .pv-fan::before {
  content: ""; position: absolute; inset: -12% -8% -4%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(157, 184, 240, .16), rgba(201, 165, 232, .07) 55%, transparent);
  animation: pv-breathe 6s ease-in-out infinite alternate;
}
.pv-motion .pv-fan-card { animation: pv-float 5.5s ease-in-out infinite alternate; }
.pv-motion .pv-fan-1 { animation-delay: -1.8s; animation-duration: 6.2s; }
.pv-motion .pv-fan-2 { animation-delay: -3.4s; animation-duration: 5s; }

/* ---- A list row's figure with its picture (`hubs.row_vis`) ----------------
   The card page's instrument language at row size: a ring for a chance or a
   score, a bar out from the middle for a signed figure (blue ahead, red
   behind), always to the left of the figure it draws. */
.pv-q-ev-wrap, .pv-q-move { display: inline-flex; align-items: center; gap: 12px; }
.pv-q-vis { flex: none; }
.pv-q-bar {
  position: relative; display: block; width: 56px; height: 6px;
  background: var(--bg-sunken); border-radius: var(--r-pill);
}
.pv-q-bar::after {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px;
  background: var(--fg-faint);
}
.pv-q-bar i { position: absolute; top: 0; bottom: 0; width: calc(var(--f) * 50%); }
.pv-q-bar.is-pos i { left: 50%; background: var(--pos); border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.pv-q-bar.is-neg i { right: 50%; background: var(--neg); border-radius: var(--r-pill) 0 0 var(--r-pill); }
.pv-q-ring circle { fill: none; stroke: var(--bg-sunken); stroke-width: 3.5; }
.pv-q-ring .arc { stroke-linecap: round; }
.pv-q-ring.is-pos .arc { stroke: var(--pos); }
.pv-q-ring.is-neg .arc { stroke: var(--neg); }
.pv-q-ring.is-flat .arc { stroke: var(--fg-dim); }
@media (max-width: 520px) {
  .pv-q-bar { width: 36px; }
  .pv-q-ev-wrap, .pv-q-move { gap: 8px; }
}

/* Tiles in a row share one height (the grid stretches each wrap; the tile
   fills its wrap), the verdict chip sits on the tile's floor, and the eBay
   link under every tile lands on one line - a card without a verdict no
   longer leaves its row ragged (audit, 2026-09-27). */
.pv-tile-wrap > .pv-tile { flex: 1 1 auto; }
.pv-tile .pv-tile-price + .pv-chip { margin-top: auto; }
.pv-tile .pv-tile-price { margin-bottom: 7px; }

/* ---- /method's pictures (`hubs._verdict_ruler`, `hubs._record_dots`) ------ */
.pv-ruler { margin: 40px 0 var(--s5); }
.pv-ruler-track {
  position: relative; height: 46px; border-radius: var(--r-md);
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.pv-ruler-z {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 6px; font-size: var(--fs-small); font-weight: 600; text-align: center; line-height: 1.2;
}
.pv-ruler-z.is-lagging { background: rgba(230, 103, 103, .16); color: var(--neg-strong); border-radius: var(--r-md) 0 0 var(--r-md); }
.pv-ruler-z.is-with { background: rgba(246, 242, 236, .04); color: var(--fg-dim); }
.pv-ruler-z.is-beating { background: rgba(57, 135, 229, .16); color: var(--pos-strong); border-radius: 0 var(--r-md) var(--r-md) 0; }
.pv-ruler-z + .pv-ruler-z { border-left: 1px dashed rgba(246, 242, 236, .18); }
.pv-ruler-m { position: absolute; top: -8px; bottom: -8px; left: var(--x); width: 0; }
.pv-ruler-m i {
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 2px;
  background: var(--parchment); box-shadow: 0 0 10px rgba(242, 232, 213, .5);
}
.pv-ruler-m b {
  position: absolute; bottom: calc(100% + 4px); left: 0; transform: translateX(-50%);
  white-space: nowrap; font-size: var(--fs-micro); font-weight: 600; color: var(--parchment);
}
.pv-ruler-ticks { position: relative; height: 20px; margin-top: 6px; }
.pv-ruler-t {
  position: absolute; transform: translateX(-50%); font-size: var(--fs-micro);
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.pv-ruler figcaption, .pv-dots figcaption { margin-top: 4px; font-size: var(--fs-small); color: var(--fg-muted); }
.pv-dots { margin: var(--s3) 0 var(--s4); }
.pv-dots-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-dots-row i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--border); }
.pv-dots-row i.on {
  border-color: var(--gilt); background: radial-gradient(circle at 35% 35%, #f3dfae, var(--gilt));
  box-shadow: 0 0 8px rgba(200, 170, 110, .35);
}
.pv-motion .pv-ruler-z { animation: pv-fade .6s ease both; }
.pv-motion .pv-ruler-z.is-with { animation-delay: .15s; }
.pv-motion .pv-ruler-z.is-beating { animation-delay: .3s; }
.pv-motion .pv-ruler-m { animation: pv-slide-x 1s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes pv-slide-x { from { left: 50%; opacity: 0; } }
.pv-motion .pv-dots-row i { animation: pv-pop .45s ease-out both; animation-delay: calc(.1s + var(--i) * 40ms); }
@media (max-width: 640px) {
  .pv-ruler-z { font-size: var(--fs-micro); }
  .pv-ruler-track { height: 54px; }
}

/* ---- The card of the day, in the order the eye reads it -------------------
   Owner, 2026-09-27: the card reveals first; the chart starts as it lands
   and draws slower; then the fan opens out of today. Everything else is
   simply there. The card is the show here, the chart only follows it.
   site.js marks the section `is-go` when the card's reveal starts and sets
   `--lead` to that reveal's length (per rarity tier, quicker here than on
   the card page). */
/* the reveal about 40% quicker than on the card page, whose trophy keeps
   its own (owner, 2026-09-27: "the whole takes too long") */
.pv-cotd .card-stage[data-tier="1"] { --reveal: .3s; --arrive: .8s; }
.pv-cotd .card-stage[data-tier="2"] { --reveal: .5s; --arrive: .9s; }
.pv-cotd .card-stage[data-tier="3"] { --reveal: .75s; --arrive: 1s; }
.pv-cotd .card-stage[data-tier="4"] { --reveal: 1s; --arrive: 1.1s; }
.pv-cotd .card-stage[data-tier="5"] { --reveal: 1.3s; --arrive: 1.2s; }
.pv-motion .pv-cotd:not(.is-go) .pv-cotd-chart :is(*, *::after) { animation-play-state: paused !important; }
.pv-motion .pv-cotd .pv-nx-line { animation: pv-draw 1.9s cubic-bezier(.45, .05, .25, 1) calc(var(--lead, 1s) + .15s) both; }
.pv-motion .pv-cotd .pv-nx-area { animation: pv-fade .8s ease calc(var(--lead, 1s) + .8s) both; }
.pv-motion .pv-cotd .pv-nx-chart svg > :is(.pv-nx-mark, .pv-nx-label) { animation: pv-fade .5s ease calc(var(--lead, 1s) + 1.3s) both; }
.pv-motion .pv-cotd .pv-nx-chart svg > .pv-nx-dot { animation: pv-pop .5s ease-out calc(var(--lead, 1s) + 1.95s) both; }
.pv-motion .pv-cotd .pv-nx-ping { animation-delay: calc(var(--lead, 1s) + 3.2s); }
.pv-motion .pv-cotd :is(.pv-nx-b80, .pv-nx-b50, .pv-nx-mid) { animation-delay: calc(var(--lead, 1s) + 2.1s); }
.pv-motion .pv-cotd .pv-nx-b50 { animation-delay: calc(var(--lead, 1s) + 2.2s); }
.pv-motion .pv-cotd .pv-nx-mid { animation-delay: calc(var(--lead, 1s) + 2.3s); }
.pv-motion .pv-cotd .pv-nx-end { animation: pv-fade .6s ease calc(var(--lead, 1s) + 2.95s) both; }
.pv-motion .pv-cotd-plates .pv-ring-arc { animation: none; }