/* price-movers.css — /price-movers/ and its monthly pages only. Page-scoped,
 * like precon-hub.css and pod-season.css: these rules style rows no other page
 * has, so they stay out of the site-wide styles.css (and out of its token bump).
 * Generated pages: scripts/price-movers-page.mjs. Loaded AFTER styles.css. */

/* The art header, the written guides' (#436). With no art: the plain dark box, as tall as its words. */
.pm-hero:not(:has(> .rf-art-hero-img, > .rf-set-art)) { min-height: 0; }
.pm-hero .lede a { color: #E7B877; }
.pm-hero .lede a:hover, .pm-hero .lede a:focus-visible { color: #F3D3A4; }
.pm-jump { font-size: 0.95rem; margin: 4px 0 8px; }

/* A row is the card itself, readable at about 300px (owner, 2026-10-24),
   beside its move. A grid list, not a <table>: the site's table wrapper
   carries a 640px min-width (DESIGN.md → Reference index list). Two rows
   side by side only where each still gives the card its 300px. */
.pm-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 18px; }
@media (min-width: 1360px) { .pm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pm-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--rf-lift);
  padding: 18px;
  margin: 0;
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.pm-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 488 / 680;
  border-radius: 4.75% / 3.4%;   /* a printed card's corner */
  background: #E4DCCB;
}
.pm-card--none {
  display: grid;
  place-items: center;
  aspect-ratio: 488 / 680;
  padding: 16px;
  border: 1px dashed var(--card-border);
  border-radius: 4.75% / 3.4%;
  background: var(--parchment);
  color: var(--text-muted);
  text-align: center;
}
.pm-body { min-width: 0; }
.pm-head { display: flex; align-items: center; gap: 12px; }
.pm-rank {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--rf-ground);
  color: var(--parchment);
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.pm-name { min-width: 0; font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.pm-set { display: block; margin-top: 2px; font-weight: 400; font-size: 0.88rem; color: var(--text-muted); }
.pm-move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 16px 0 0; font-variant-numeric: tabular-nums; }
.pm-pct { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.pm-list--up .pm-pct { color: var(--mana-g); }
.pm-list--down .pm-pct { color: var(--mana-r); }
.pm-prices { font-size: 1.02rem; color: var(--text-muted); white-space: nowrap; }
.pm-chart { margin: 12px 0 0; }
.pm-spark { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.pm-spark:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
.pm-spark .pm-grid { stroke: var(--card-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pm-spark .pm-axis { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.pm-spark .pm-cross { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pm-spark .pm-hot { fill: var(--link); stroke: var(--card); stroke-width: 2; }
.pm-read { display: block; min-height: 1.2em; font-size: 0.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.pm-why { margin: 10px 0 0; }
.pm-srcs { font-size: 0.9rem; color: var(--text-muted); }
.pm-facts { margin: 6px 0 0; padding-left: 1.2em; font-size: 0.92rem; color: var(--text-muted); }
.pm-facts li { margin: 2px 0; }
.pm-links { margin: 6px 0 0; font-size: 0.92rem; }

.pm-events { padding-left: 1.2em; }
.pm-events li { margin: 4px 0; }
.pm-months { padding-left: 1.2em; }
.pm-months li { margin: 6px 0; }
.pm-monthnav { margin: 20px 0; }

/* Phones: the card on top, full width up to 300px, then the move. */
@media (max-width: 719px) {
  .pm-row { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .pm-card { width: min(100%, 300px); margin: 0 auto 16px; }
}