/* ═══════════════════════════════════════════════════════════════
   Prices tab — multi-bookmaker comparison grid.

   Scoped under `.racecard__prices` so nothing here can leak into
   the existing runner grid. Default state: hidden. The parent
   `.racecard--prices-active` (toggled by racecard.js when the
   "Prices" filter chip is clicked) flips visibility:

       .racecard--prices-active .racecard__grid       { display: none }
       .racecard--prices-active .racecard__prices     { display: block }

   Movement convention (standard punter colours):
       green  ▼  IN    — price shortened (steamer)
       blue   =  FLAT  — unchanged
       red    ▲  OUT   — drifted
       gold   ·  NEW   — first observation
═══════════════════════════════════════════════════════════════ */

.racecard__prices { display: none; padding: 0 8px 8px; }
.racecard--prices-active .racecard__grid { display: none; }
.racecard--prices-active .racecard__prices { display: block; }

.racecard__prices-tablewrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--hp-rule, #E7E5DD);
  background: var(--hp-card, #FFFFFF);
}

.racecard__prices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--hp-ink, #11151F);
  min-width: 760px;   /* horizontal scroll on narrow screens */
}

.racecard__prices-th {
  padding: 10px 12px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-ink-40, #9CA3AF);
  background: var(--hp-card-warm, #F7F5EE);
  border-bottom: 1px solid var(--hp-rule, #E7E5DD);
  white-space: nowrap;
}
.racecard__prices-th--horse {
  text-align: left;
  width: 26%;
  padding-left: 16px;
}
.racecard__prices-th--best {
  width: 14%;
  color: var(--hp-gold-ink, #9C7B12);
}

.racecard__prices-row { transition: background 0.12s ease; }
.racecard__prices-row:hover { background: var(--hp-card-warm, #F7F5EE); }
.racecard__prices-row + .racecard__prices-row {
  border-top: 1px solid var(--hp-rule, #E7E5DD);
}

.racecard__prices-horse {
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
}
.racecard__prices-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--hp-card-warm, #F7F5EE);
  border: 1px solid var(--hp-rule, #E7E5DD);
  font-size: 12px;
  color: var(--hp-ink-70, #41474F);
}
.racecard__prices-name {
  color: var(--hp-ink, #11151F);
  text-decoration: none;
}
.racecard__prices-name:hover { text-decoration: underline; }

.racecard__prices-cell {
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.racecard__prices-frac {
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--hp-ink, #11151F);
}
.racecard__prices-frac--nil { color: var(--hp-ink-40, #9CA3AF); font-weight: 500; }

/* ── Movement chip ─────────────────────────────────────────── */
.movement-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}
.movement-chip--in {
  background: rgba(26, 125, 74, 0.12);
  color: #1A7D4A;
}
.movement-chip--out {
  background: rgba(192, 57, 43, 0.10);
  color: #C0392B;
}
.movement-chip--flat {
  background: rgba(59, 110, 155, 0.10);
  color: #3B6E9B;
}
.movement-chip--new {
  background: rgba(156, 123, 18, 0.10);
  color: #9C7B12;
}
.movement-chip--nil {
  color: var(--hp-ink-40, #9CA3AF);
  background: transparent;
  font-weight: 500;
}

/* ── Best-price column highlight ────────────────────────────── */
.racecard__prices-cell--best {
  background: rgba(212, 175, 55, 0.06);
  border-left: 1px solid rgba(212, 175, 55, 0.20);
}
.best-price {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--hp-gold-ink, #9C7B12);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.best-price strong { color: var(--hp-ink, #11151F); }
.best-price__book {
  font-size: 11px;
  font-weight: 600;
  color: var(--hp-ink-70, #41474F);
  letter-spacing: 0.02em;
}
.best-price--nil {
  background: transparent; border: 0;
  color: var(--hp-ink-40, #9CA3AF);
}

/* ── Footnote + empty state ────────────────────────────────── */
.racecard__prices-footnote {
  margin: 12px 4px 0;
  font-size: 12px;
  color: var(--hp-ink-70, #41474F);
  line-height: 1.5;
}
.racecard__prices-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--hp-ink-70, #41474F);
  background: var(--hp-card, #FFFFFF);
  border: 1px dashed var(--hp-rule, #E7E5DD);
  border-radius: 10px;
}

/* ── Since-open indicator (small tertiary line under each price cell)
   Renders only when current != opening — silent when stable. */
.since-open {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: lowercase;
  font-variant-numeric: tabular-nums;
}
.since-open--in  { color: rgba(26, 125, 74, 0.85); }
.since-open--out { color: rgba(192, 57, 43, 0.85); }

/* ── Runner-row market-movement chip ─────────────────────────
   Tiny coloured chip rendered next to the odds cell in the
   default "All Runners" view. Aggregates across all tracked
   bookmakers; only shows when the signal is decisive (strict
   majority moved one way, none contradicted). */
.runner-market-chip {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  width: 18px; height: 18px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  vertical-align: middle;
}
.runner-market-chip--in {
  background: rgba(26, 125, 74, 0.16);
  color: #1A7D4A;
}
.runner-market-chip--out {
  background: rgba(192, 57, 43, 0.14);
  color: #C0392B;
}

/* ── Mobile: keep horizontal scroll, tighten cells ──────────── */
@media (max-width: 760px) {
  .racecard__prices-table { font-size: 12px; }
  .racecard__prices-cell  { padding: 6px 8px; }
  .racecard__prices-frac  { font-size: 13px; }
  .racecard__prices-th    { padding: 8px; font-size: 9px; }
  .best-price             { font-size: 11px; padding: 3px 8px; }
  .best-price__book       { display: none; }   /* fall back to fractional only */
}