/* ===========================
   GRAND NATIONAL STYLESHEET
   =========================== */

/* CSS variables inherited from base.css — all depth via var() tokens */

/* Body override */
.gn-body {
  background: #0a0f1c;
  color: #f5f0e8;
}

/* Header tweak */
.gn-header {
  background: rgba(10, 15, 28, 0.97);
  border-bottom: 1px solid rgba(212,175,55,0.25);
}

.gn-badge {
  background: var(--gn-red) !important;
  color: #fff !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

/* ===== HERO ===== */
.gn-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(26,107,60,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(192,57,43,0.18) 0%, transparent 50%),
    linear-gradient(160deg, #0a0f1c 0%, #0d1f3c 50%, #0a0f1c 100%);
}

.gn-hero-overlay {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8a951' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.7;
}

/* Animated fence strip at bottom of hero */
.gn-fence-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  overflow: hidden;
}

.fence-marker {
  flex: 1;
  border-left: 2px solid rgba(212,175,55,0.12);
  height: 100%;
}

.fence-marker:nth-child(4n) {
  border-left-color: rgba(212,175,55,0.35);
  background: linear-gradient(to top, rgba(212,175,55,0.08), transparent);
}

.gn-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 40px;
  width: 100%;
}

.gn-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gn-gold);
  text-transform: uppercase;
  animation: fadeUp 0.5s ease both;
}

.gn-year {
  background: var(--gn-gold);
  color: var(--gn-navy);
  padding: 3px 10px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
}

.gn-divider { opacity: 0.4; }

.gn-title {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
  margin-bottom: 18px;
  animation: fadeUp 0.5s 0.08s ease both;
}

.gn-title-line1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 700;
  font-style: italic;
  color: rgba(255,255,255,0.9);
}

.gn-title-line2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 900;
  color: var(--gn-gold);
  letter-spacing: -0.02em;
}

.gn-subtitle {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
  font-weight: 300;
  letter-spacing: 0.05em;
  animation: fadeUp 0.5s 0.16s ease both;
}

.gn-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 36px;
  animation: fadeUp 0.5s 0.24s ease both;
}

.gn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 28px;
  border-left: 1px solid rgba(212,175,55,0.2);
}

.gn-stat:first-child { border-left: none; padding-left: 0; }

.gn-stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--gn-gold);
  line-height: 1;
}

.gn-stat-label {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

.gn-verdict {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.25);
  border-left: 4px solid var(--gn-gold);
  border-radius: 6px;
  padding: 18px 22px;
  max-width: 760px;
  animation: fadeUp 0.5s 0.3s ease both;
}

.gn-verdict-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gn-gold);
  margin-bottom: 8px;
}

.gn-verdict p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}

/* ===== CONTAINER ===== */
.gn-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== SECTION TITLES ===== */
.gn-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--gn-gold);
  margin-bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.gn-section-icon {
  font-size: 20px;
}

.gn-section-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  margin-left: 4px;
}

/* ===== FANCIES / MARKET MOVERS ===== */
.gn-fancies-section {
  padding: 56px 0 48px;
  background: linear-gradient(to bottom, #0a0f1c, #0e1929);
}

.gn-fancies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.gn-fancy-card {
  background: var(--c-navy-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 20px;
  transition: all 0.2s;
}

.gn-fancy-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(212,175,55,0.3);
  transform: translateY(-2px);
}

.gn-fancy-card--fav {
  border-color: rgba(212,175,55,0.45);
  background: rgba(212,175,55,0.07);
  box-shadow: 0 0 24px rgba(212,175,55,0.12);
}

.gn-fancy-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.gn-fancy-silk {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.gn-fancy-info { flex: 1; }

.gn-fancy-name {
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gn-fancy-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}

.gn-fancy-odds {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--gn-gold);
  flex-shrink: 0;
}

.gn-fancy-connections {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.8;
  margin-bottom: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 10px;
}

.gn-conn-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(212,175,55,0.7);
  letter-spacing: 0.05em;
}

.gn-fancy-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.gn-rating {
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  padding: 2px 8px;
  border-radius: 100px;
}

.gn-form-str {
  font-family: monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin-left: auto;
}

.gn-fancy-comment {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.55;
  margin-top: 10px;
  border-top: 1px solid var(--c-navy-raised);
  padding-top: 10px;
}

/* Fav tag */
.gn-fav-tag {
  background: var(--gn-gold);
  color: var(--gn-navy);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 3px;
}

.gn-fav-tag--sm {
  font-size: 8px;
  padding: 1px 5px;
}

/* ===== FORECAST STRIP ===== */
.gn-forecast-strip {
  background: var(--gn-red);
  padding: 14px 0;
}

.gn-forecast-strip .gn-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.gn-forecast-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

.gn-forecast-text {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

/* ===== RACECARD TABLE ===== */
.gn-racecard-section {
  padding: 56px 0 48px;
  background: #0e1929;
}

/* Filter bar */
.gn-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.gn-filter-btn {
  background: var(--c-navy-raised);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.2s;
}

.gn-filter-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.gn-filter-btn.active {
  background: var(--gn-gold);
  border-color: var(--gn-gold);
  color: var(--gn-navy);
  font-weight: 600;
}

/* Table */
.gn-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}

.gn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: rgba(255,255,255,0.02);
}

.gn-table thead {
  background: rgba(212,175,55,0.1);
  border-bottom: 1px solid rgba(212,175,55,0.2);
}

.gn-table th {
  padding: 13px 14px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(212,175,55,0.7);
  font-weight: 600;
  white-space: nowrap;
}

.gn-table th.gc-odds { text-align: right; }

.gn-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}

.gn-row:hover { background: var(--c-navy-card); }

.gn-row--fav {
  background: rgba(212,175,55,0.06);
}

.gn-row.gn-row--hidden { display: none; }

.gn-table td {
  padding: 12px 14px;
  vertical-align: middle;
  color: rgba(255,255,255,0.85);
}

.gn-silk {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.gn-horse-name {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}

.gn-row-comment {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
  max-width: 300px;
  line-height: 1.5;
}

/* SR badge (replaces OR bar) */
.gn-sr-badge {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--c-gold);
}

/* OR bar (legacy, hidden) */
.gn-or-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}

.gn-or-fill {
  /* purely decorative; actual OR value shown as text */
  display: none;
}

.gn-form {
  font-family: monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
}

.gn-jockey {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

.gn-trainer {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

.gc-ts, .gc-rpr {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

.gc-odds { text-align: right; }

.gn-odds-pill {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.1);
}

.gn-odds-pill--fav {
  background: var(--gn-gold);
  color: var(--gn-navy);
  border-color: var(--gn-gold);
  box-shadow: 0 0 12px rgba(212,175,55,0.35);
}

.gn-odds-pill--long {
  background: rgba(192,57,43,0.15);
  color: rgba(255,180,180,0.85);
  border-color: rgba(192,57,43,0.2);
  font-size: 13px;
}

/* ===== COURSE SECTION ===== */
/* ══ The Course — v2 signal-forward cards ═════════════════════
   Each fact is individually recognisable at a glance: icon chip,
   big italic number, small-caps label, hover lift with top rim
   light. The Going field colour-codes by value (good/soft/heavy)
   and Confirmed Runners shows a subtle pulsing field-strength
   row so the section reads as "live" rather than static.       */

.gn-course-section {
  padding: 72px 0 80px;
  background: linear-gradient(to bottom, #0e1929, #0a0f1c);
}

.gn-course-facts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.gn-course-fact {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px 22px;
  border-radius: 14px;
  text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(212, 175, 55, 0.18);
  /* Scroll-reveal entrance — .is-revealed class added by
     IntersectionObserver in grand_national.js. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.gn-course-fact:nth-child(2) { transition-delay: 0.08s; }
.gn-course-fact:nth-child(3) { transition-delay: 0.16s; }
.gn-course-fact:nth-child(4) { transition-delay: 0.24s; }
.gn-course-fact:nth-child(5) { transition-delay: 0.32s; }
.gn-course-fact.is-revealed {
  opacity: 1;
  transform: none;
}

/* Top-edge rim light on hover */
.gn-course-fact::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gn-course-fact:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.36);
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 100%);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(212, 175, 55, 0.08);
}
.gn-course-fact:hover::before { opacity: 1; }
.gn-course-fact.is-revealed:hover { transform: translateY(-4px); }

.gcf-icon {
  width: 26px;
  height: 26px;
  color: var(--c-gold, #D4AF37);
  display: block;
}

.gcf-num {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 900;
  color: var(--c-gold, #D4AF37);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  word-break: break-word;
}

/* Going — pill-style number chip that colour-codes by value */
.gcf-num--going {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-style: normal;
  font-weight: 800;
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: 0.01em;
}
.gcf-num--going-good  { color: #4cdb78; background: rgba(76,  219, 120, 0.12); }
.gcf-num--going-soft  { color: #f5bf47; background: rgba(245, 191,  71, 0.12); }
.gcf-num--going-heavy { color: #e05a2a; background: rgba(224,  90,  42, 0.14); }

.gcf-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin-top: auto;
}

/* Confirmed-runners pulse — 5 dots that breathe in sequence */
.gcf-pulse-row {
  display: inline-flex;
  gap: 5px;
  margin-top: 2px;
}
.gcf-pulse-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold, #D4AF37);
  opacity: 0.4;
  animation: gcfPulse 2.4s ease-in-out infinite;
}
.gcf-pulse-dot:nth-child(2) { animation-delay: 0.2s; }
.gcf-pulse-dot:nth-child(3) { animation-delay: 0.4s; }
.gcf-pulse-dot:nth-child(4) { animation-delay: 0.6s; }
.gcf-pulse-dot:nth-child(5) { animation-delay: 0.8s; }
@keyframes gcfPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.25); }
}

/* Responsive — 5 → 3 → 2 → 1 columns */
@media (max-width: 1080px) {
  .gn-course-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .gn-course-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gn-course-facts { grid-template-columns: 1fr; gap: 10px; }
  .gn-course-fact  { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .gn-course-fact {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gn-course-fact.is-revealed:hover,
  .gn-course-fact:hover { transform: none; }
  .gcf-pulse-dot { animation: none; opacity: 0.55; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .gn-hero-content { padding: 40px 20px 60px; }
  .gn-container { padding: 0 20px; }
  .gn-title-line1 { font-size: 40px; }
  .gn-title-line2 { font-size: 56px; }
  .gn-stats-row { gap: 0; }
  .gn-stat { padding: 12px 16px; }
  .gn-stat-num { font-size: 20px; }
  .gn-fancies-grid { grid-template-columns: 1fr 1fr; }
  .gn-table th.gc-ts, .gn-table td.gc-ts { display: none; }
  .gn-row-comment { display: none; }
}

@media (max-width: 480px) {
  .gn-fancies-grid { grid-template-columns: 1fr; }
  .gn-title-line2 { font-size: 44px; }
  /* .gn-course-facts uses grid now; stacking handled in v2 block. */
}

/* Depth refresh — cards feel raised */
.gn-fancy-card {
  box-shadow: var(--shadow-card);
}
.gn-fancy-card:hover {
  box-shadow: var(--shadow-raised);
}
.gn-rating {
  background: rgba(212,175,55,0.09);
  border: 1px solid rgba(212,175,55,0.18);
  color: var(--c-gold);
}
/* Emerald for vote leaders */
.gn-row--vote-leader { background: rgba(26,92,64,0.07) !important; }
.gn-row--vote-leader .gn-odds-pill { box-shadow: 0 0 14px rgba(45,158,107,0.28); }
/* Live banner */
.gn-vote-banner { background: rgba(212,175,55,0.07); }
/* OR bar — gold */
.gn-or-fill { background: linear-gradient(90deg, var(--c-gold), var(--c-gold-lt)); }
/* Racecard table header */
.gc-header { background: rgba(212,175,55,0.08); }

/* ── GN depth refresh ── */
.gn-fancy-card {
  background: var(--c-navy-card) !important;
  border-color: var(--c-border-md) !important;
  box-shadow: var(--shadow-card);
}
.gn-fancy-card:hover {
  background: var(--c-navy-raised) !important;
  box-shadow: var(--shadow-raised);
  transform: translateY(-3px);
}
.gn-racecard-section table {
  background: var(--c-navy-card);
}
.gn-row { background: var(--c-navy-card); }
.gn-row:nth-child(even) { background: var(--c-navy-mid); }
.gn-row:hover { background: var(--c-navy-raised) !important; }
.gn-row--fav { background: rgba(212,175,55,0.07) !important; }

/* Emerald vote leader */
.gn-row--vote-leader {
  background: rgba(26,92,64,0.12) !important;
  border-left: 2px solid var(--c-emerald-lt);
}
/* Section backgrounds — alternate clearly */
.gn-fancies-section { background: var(--c-navy); }
.gn-racecard-section { background: var(--c-midnight); }
.gn-course-section   { background: var(--c-navy); }

/* Rating chips */
.gn-rating {
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.22);
  color: var(--c-gold);
  font-size: 11px; padding: 2px 8px; border-radius: 3px;
}
/* Green nodes on timeline */
.decl-node--done { background: var(--c-emerald) !important; border-color: var(--c-emerald-lt) !important; }

/* ── GN mobile readability ── */
@media (max-width: 640px) {
  /* Table text — bump up from 11-12px */
  .gn-horse-name    { font-size: 14px !important; }
  .gn-jockey        { font-size: 13px !important; }
  .gn-trainer       { font-size: 12px !important; opacity: 1 !important; }
  .gn-row-comment   { font-size: 13px !important; line-height: 1.65 !important; }
  .gn-fancy-comment { font-size: 14px !important; line-height: 1.72 !important; }
  .gn-fancy-name    { font-size: 16px !important; }
  /* Racecard hide less critical columns to give text room */
  .gc-ts, .gc-form { display: none; }
  /* Expand horse name column */
  .gc-horse { font-size: 14px !important; }
  /* Odds larger on mobile */
  .gn-odds-pill { font-size: 14px !important; padding: 5px 10px !important; }
}

/* ── Horse profile link ── */
.gn-horse-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(212,175,55,0.25);
  transition: color 0.18s, border-color 0.18s;
}
.gn-horse-link:hover {
  color: var(--c-gold);
  border-bottom-color: var(--c-gold);
}

/* ═══════════════════════════════════════════════════════════════
   RUNNER STATUS FLAGS
   scratched   - hidden (filtered in view, never reaches template)
   decs_7_days - shown with amber 7-day badge
   decs_48_hrs - normal display (default)
   non_runner  - red strikethrough, dimmed, NR badge
═══════════════════════════════════════════════════════════════ */

/* ── Status badges ────────────────────────────────────────────── */
.gn-status-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1.6;
}

.gn-status-badge--nr {
  background: rgba(192,57,43,0.18);
  color: #E05C4C;
  border: 1px solid rgba(192,57,43,0.3);
}

.gn-status-badge--7day {
  background: rgba(212,175,55,0.12);
  color: var(--c-gold);
  border: 1px solid rgba(212,175,55,0.25);
}

/* ── Non-runner horse name — red strikethrough ────────────────── */
a.gn-horse-name--nr,
a.gn-horse-link--nr,
.gn-horse-name--nr {
  text-decoration: line-through !important;
  text-decoration-color: #C0392B !important;
  text-decoration-thickness: 2px !important;
  color: var(--c-text-35) !important;
  pointer-events: none;
  cursor: default;
}

/* ── Non-runner racecard row ──────────────────────────────────── */
.gn-row--nr {
  opacity: 0.55;
  background: rgba(192,57,43,0.04) !important;
}
.gn-row--nr:hover {
  background: rgba(192,57,43,0.06) !important;
  transform: none !important;
}
.gn-row--nr .gn-odds-pill {
  background: rgba(255,255,255,0.04);
  color: var(--c-text-35);
  border-color: var(--c-border);
}
.gn-row--nr .gn-silk {
  opacity: 0.4;
  filter: grayscale(0.8);
}

/* ── 7-day entry row — subtle amber tint ─────────────────────── */
.gn-row--7day {
  opacity: 0.82;
}

/* ── Non-runner fancy card ────────────────────────────────────── */
.gn-fancy-card--nr {
  opacity: 0.5;
  filter: grayscale(0.4);
  border-color: rgba(192,57,43,0.2) !important;
}
.gn-fancy-card--nr .gn-fancy-silk {
  filter: grayscale(0.7);
}

/* ── Non-runner count label in section subtitle ───────────────── */
.gn-nr-count {
  color: #E05C4C;
  font-weight: 600;
}

/* ── 7-day fancy card ─────────────────────────────────────────── */
.gn-fancy-card--7day {
  border-color: rgba(212,175,55,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   AI STAR RATING
   Replaces RPR / TS pills on the racecard.
   Stars are gold (filled) and dimmed (empty).
   Hovering shows the LLM one-line reason as a tooltip.
═══════════════════════════════════════════════════════════════ */

.gn-ai-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 15px;
  line-height: 1;
  color: var(--c-gold);
  letter-spacing: -1px;
  cursor: help;
  /* Empty stars are dimmed gold */
  background: none;
  border: none;
  font-family: inherit;
}

/* Unfilled stars — same character, much lower opacity */
.gn-ai-stars {
  /* CSS trick: first colour filled, second colour empty star */
  /* We render both ★ and ☆ as distinct chars so colour is direct */
}

/* Any ☆ character inside the stars span */
.gn-ai-stars {
  /* Gold for ★, dimmed for ☆ — handled via character opacity below */
}

/* Small variant for racecard table rows */
.gn-ai-stars--sm {
  font-size: 13px;
  letter-spacing: -1.5px;
  cursor: help;
}

/* Colour: filled ★ = gold, empty ☆ = subdued */
/* Django template renders "★★★☆☆" — we target the cell */
.gc-stars .gn-ai-stars--sm,
.gn-fancy-ratings .gn-ai-stars {
  color: var(--c-gold);
  /* Empty stars inside appear as dim gold via opacity on the char itself */
  /* We use a CSS filter trick: the ☆ chars will be styled by JS below */
}

/* Pending — not yet rated */
.gn-ai-stars--pending {
  color: var(--c-text-35);
  font-size: 12px;
}

/* Vote pill update — now uses paw emoji */
.gn-votes-col .gn-vote-pill,
.gc-votes-col .gn-vote-pill {
  font-size: 12px;
  color: var(--c-text-55);
}

/* AI reason tooltip (native title attr — good enough for desktop) */
/* For a richer tooltip, JS could intercept hover */
[title].gn-ai-stars:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-navy-raised);
  border: 1px solid var(--c-border-gold);
  color: var(--c-text-75);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  max-width: 280px;
  white-space: normal;
  z-index: 100;
  pointer-events: none;
  box-shadow: var(--shadow-raised);
}
.gn-fancy-ratings { position: relative; }
.gc-stars          { position: relative; }

/* ═══════════════════════════════════════════════════════════════
   RACECARD SORT HEADERS
═══════════════════════════════════════════════════════════════ */

.gn-sort-th {
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.gn-sort-th:hover {
  color: var(--c-gold);
}
.gn-sort-th--active {
  color: var(--c-gold) !important;
}

.gn-sort-icon {
  display: inline-block;
  font-size: 10px;
  margin-left: 3px;
  opacity: 0.4;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.gn-sort-th:hover .gn-sort-icon {
  opacity: 0.7;
}
.gn-sort-icon--active {
  opacity: 1 !important;
  color: var(--c-gold);
}

/* ═══════════════════════════════════════════════════════════════
   CLAUDE'S PICK SECTION
═══════════════════════════════════════════════════════════════ */

.gn-claude-pick-section {
  padding: var(--space-7) 0;
}

.gn-claude-pick {
  background: linear-gradient(135deg,
    rgba(204,138,90,0.08) 0%,
    rgba(17,17,24,0.0) 60%);
  border: 1px solid rgba(204,138,90,0.25);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(204,138,90,0.06);
}

/* ── Header ─────────────────────────────────────────────────── */
.gn-claude-pick__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--c-border);
  background: rgba(0,0,0,0.2);
}

.gn-claude-pick__logo {
  flex-shrink: 0;
}

.gn-claude-pick__title-block { flex: 1; min-width: 0; }
.gn-claude-pick__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(204,138,90,0.9);
  margin-bottom: 3px;
}
.gn-claude-pick__subtitle {
  font-size: 12px;
  color: var(--c-text-35);
}

/* Confidence badge */
.gn-claude-pick__confidence {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid;
  flex-shrink: 0;
}
.gn-claude-conf--high {
  color: var(--c-emerald-lt);
  border-color: rgba(45,189,122,0.3);
  background: rgba(45,189,122,0.08);
}
.gn-claude-conf--medium {
  color: var(--c-gold);
  border-color: rgba(212,175,55,0.3);
  background: rgba(212,175,55,0.06);
}
.gn-claude-conf--speculative {
  color: var(--c-text-55);
  border-color: var(--c-border);
  background: transparent;
}

/* ── How Claude works ───────────────────────────────────────── */
.gn-claude-pick__method {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
}

.gn-claude-method-step {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  border-right: 1px solid var(--c-border);
}
.gn-claude-method-step:last-child { border-right: none; }

.gn-claude-method-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(204,138,90,0.15);
  border: 1px solid rgba(204,138,90,0.3);
  color: rgba(204,138,90,0.9);
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.gn-claude-method-step strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-100);
  margin-bottom: 5px;
}
.gn-claude-method-step p {
  font-size: 12px;
  color: var(--c-text-55);
  line-height: 1.6;
  margin: 0;
}

/* ── The pick ───────────────────────────────────────────────── */
.gn-claude-pick__selection {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-6) var(--space-6);
  border-bottom: 1px solid var(--c-border);
  background: rgba(204,138,90,0.04);
}

.gn-claude-pick__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-35);
  margin-bottom: 8px;
}

.gn-claude-pick__horse-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1;
}

.gn-claude-horse-link {
  color: var(--c-text-100);
  text-decoration: none;
  border-bottom: 2px solid rgba(204,138,90,0.4);
  transition: color 0.18s, border-color 0.18s;
}
.gn-claude-horse-link:hover {
  color: rgba(204,138,90,0.9);
  border-bottom-color: rgba(204,138,90,0.9);
}

.gn-claude-pick__shortlist {
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-text-35);
}

.gn-claude-pick__supporting {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gn-claude-supp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--c-navy-mid);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}
.gn-claude-supp--danger {
  border-color: rgba(192,57,43,0.2);
}
.gn-claude-supp__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-35);
  min-width: 80px;
}
.gn-claude-supp__horse {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text-100);
  text-decoration: none;
}
.gn-claude-supp__horse:hover { color: var(--c-gold); }
.gn-claude-supp--danger .gn-claude-supp__horse { color: #E05C4C; }
.gn-claude-supp--danger .gn-claude-supp__horse:hover { color: #ff7060; }

/* ── Reasoning ──────────────────────────────────────────────── */
.gn-claude-pick__reasoning {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--c-border);
}
.gn-claude-pick__reasoning-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-35);
  margin-bottom: var(--space-4);
}
.gn-claude-pick__reasoning p {
  font-size: 14px;
  color: var(--c-text-75);
  line-height: 1.8;
  margin-bottom: 10px;
}
.gn-claude-pick__reasoning p:last-child { margin-bottom: 0; }

/* ── Footer ─────────────────────────────────────────────────── */
.gn-claude-pick__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  font-size: 11px;
  color: var(--c-text-35);
  background: rgba(0,0,0,0.15);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.gn-claude-pick__disclaimer {
  font-style: italic;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gn-claude-pick__method {
    grid-template-columns: 1fr;
  }
  .gn-claude-method-step {
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }
  .gn-claude-method-step:last-child { border-bottom: none; }
  .gn-claude-pick__selection {
    flex-direction: column;
    align-items: flex-start;
  }
  .gn-claude-pick__supporting {
    width: 100%;
  }
}

/* ── Vote toast notifications ────────────────────────────────── */
.gn-vote-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.gn-vote-toast--in {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.gn-vote-toast--success {
  background: var(--c-emerald);
  border: 1px solid rgba(45,189,122,0.4);
}
.gn-vote-toast--error {
  background: #C0392B;
  border: 1px solid rgba(192,57,43,0.5);
}

/* ── User's vote row — gold left border ─────────────────────── */
.gn-row--my-vote {
  border-left: 3px solid var(--c-gold) !important;
}

/* ── Leader row — emerald tint ──────────────────────────────── */
.gn-row--vote-leader {
  background: rgba(26,92,64,0.08) !important;
}

/* ── Voting closed state on profile page ────────────────────── */
.vote-section__rule--closed {
  color: #E05C4C;
  font-weight: 600;
}
.vote-btn--disabled,
.vote-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════
   THE RACE ENGINE — page-level styles
   (Existing gn-* styles are preserved for runner table)
═════════════════════════════════════════════════════════════ */

/* ── HERO ── */
.re-hero {
  position: relative;
  background: var(--c-midnight);
  min-height: 0;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding-bottom: 0;
}

.re-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 80% at -5% 60%, rgba(10,30,60,0.9) 0%, transparent 55%),
    radial-gradient(ellipse 55% 70% at 108% 40%, rgba(100,15,50,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 40% 55% at 60% 70%, rgba(50,10,80,0.3) 0%, transparent 50%),
    #060812;
}

.re-fence-post {
  flex: 1;
  border-left: 1px solid rgba(212,175,55,0.07);
}

.re-hero__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6,8,18,0.3) 0%, transparent 30%, transparent 60%, rgba(6,8,18,0.9) 100%);
  z-index: 1;
  pointer-events: none;
}

.re-hero__inner {
  position: relative;
  z-index: 2;
  /* Top and bottom only. The hero sits on .gn-container, which owns the
     side gutter; a `padding: X 0 Y` shorthand here zeroed that gutter and
     put the title against the screen edge below 900px. */
  padding-top: var(--space-3);      /* PR1: tightened — was --space-5 0 28px (~80px savings) */
  padding-bottom: 18px;
}

/* ─── Race-stamp chip ──────────────────────────────────────────
   Bold gold-bordered marquee at the top of the hero. Three
   segments: course · time · state. The state segment is updated
   live by initRaceStamp() in race_picker.js so the chip reads
   "Off in 5 min" → "Live now" → "Resulted" as the clock ticks.

   Sits above the existing .re-eyebrow so it's the first thing the
   eye lands on — solves the "I can't tell which meeting / time
   this race is" problem on a single-race detail page.
─────────────────────────────────────────────────────────────────*/
.race-stamp {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 9px 18px;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(212, 175, 55, 0.16) 0%,
      rgba(212, 175, 55, 0.06) 100%);
  border: 1px solid rgba(212, 175, 55, 0.55);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.12) inset,
    0 6px 22px -12px rgba(212, 175, 55, 0.40);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
  animation: fadeUp 0.45s ease both;
}

.race-stamp__seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.race-stamp__icon {
  font-size: 14px;
  line-height: 1;
}
.race-stamp__text {
  font-variant-numeric: tabular-nums;
}

.race-stamp__seg--course .race-stamp__text { color: #f5e49a; }
.race-stamp__seg--time   .race-stamp__text {
  color: #f5d76e;
  font-size: 15px;        /* time visually bigger — anchors the eye */
  letter-spacing: 0.06em;
}

/* Divider — thin gold tick between segments. */
.race-stamp__divider {
  display: inline-block;
  width: 1px; height: 16px;
  background: rgba(212, 175, 55, 0.45);
}

/* ── State segment palettes — JS toggles these modifier classes ── */

/* Default: future race day (TODAY / TOMORROW / specific date) — gold. */
.race-stamp__seg--state .race-stamp__text { color: #f5e49a; }

/* Live state: animated red dot, urgent red text. */
.race-stamp--live {
  border-color: rgba(239, 68, 68, 0.7);
  background:
    linear-gradient(180deg,
      rgba(239, 68, 68, 0.18) 0%,
      rgba(239, 68, 68, 0.05) 100%);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.16) inset,
    0 6px 22px -12px rgba(239, 68, 68, 0.55);
}
.race-stamp--live .race-stamp__seg--state .race-stamp__text {
  color: #ff7676;
  animation: stampPulse 1.6s ease-in-out infinite;
}

/* Off-in-N-min state: bright urgent gold, slight glow. */
.race-stamp--imminent {
  border-color: rgba(245, 215, 110, 0.85);
  background:
    linear-gradient(180deg,
      rgba(245, 215, 110, 0.22) 0%,
      rgba(245, 215, 110, 0.06) 100%);
  box-shadow:
    0 0 0 1px rgba(245, 215, 110, 0.20) inset,
    0 8px 28px -10px rgba(245, 215, 110, 0.55);
}
.race-stamp--imminent .race-stamp__seg--state .race-stamp__text {
  color: #fff6c8;
  animation: stampPulse 1.6s ease-in-out infinite;
}

/* Resulted state: emerald green — "the story's done". */
.race-stamp--resulted {
  border-color: rgba(76, 175, 105, 0.6);
  background:
    linear-gradient(180deg,
      rgba(76, 175, 105, 0.16) 0%,
      rgba(76, 175, 105, 0.04) 100%);
  box-shadow:
    0 0 0 1px rgba(76, 175, 105, 0.14) inset,
    0 6px 22px -12px rgba(76, 175, 105, 0.45);
}
.race-stamp--resulted .race-stamp__seg--state .race-stamp__text {
  color: #79e0ad;
}

/* Abandoned state: greyed out, no glow. */
.race-stamp--abandoned {
  border-color: rgba(154, 161, 168, 0.5);
  background:
    linear-gradient(180deg,
      rgba(154, 161, 168, 0.12) 0%,
      rgba(154, 161, 168, 0.03) 100%);
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.4);
}
.race-stamp--abandoned .race-stamp__seg--state .race-stamp__text {
  color: #c4c8cc;
}

@keyframes stampPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Mobile — wrap to two lines, keep all info visible. */
@media (max-width: 520px) {
  .race-stamp {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
  .race-stamp__seg--time .race-stamp__text { font-size: 14px; }
}

/* Eyebrow */
.re-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.re-eyebrow__kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--c-red);
  text-transform: uppercase;
  background: rgba(192,57,43,0.1);
  border: 1px solid rgba(192,57,43,0.25);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

.re-eyebrow__sep { color: rgba(255,255,255,0.15); font-size: 12px; }

.re-eyebrow__item {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.re-eyebrow__item--gold { color: var(--c-gold); }

/* Date stamp in the slimmed eyebrow — pure identity, no navigation.
   Sits next to the kicker pill like a newspaper dateline. */
.re-eyebrow__date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-55);
}
/* Dot separator only renders when the kicker is alongside, so a
   solo date doesn't start with a stray leading bullet. */
.re-eyebrow__kicker ~ .re-eyebrow__date::before {
  content: '·';
  color: rgba(255,255,255,0.18);
  margin-right: 10px;
  font-size: 14px;
}

/* Title — sized down from the original "billboard" clamps so the
   hero stops eating the whole viewport. Numbers tuned so the title
   still feels marquee on desktop without dominating. */
.re-title {
  display: flex;
  flex-direction: column;
  line-height: 0.94;
  margin: 0 0 10px;
  animation: fadeUp 0.5s 0.08s ease both;
}

/* "This Saturday" — italic, lighter, same as original gn-title-line1 */
.re-title__eyeline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 700;
  font-style: italic;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.01em;
}

/* Race name — bold, gold, dominant, same as original gn-title-line2 */
.re-title__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 4.2vw, 52px);   /* PR1: was 38/5vw/72 — tightened max for the compact race-detail hero */
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: -0.02em;
  line-height: 0.94;
}

.re-subtitle {
  font-size: 14px;
  color: var(--c-text-55);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* Stats bar */
.re-stats-bar {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.re-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-right: 1px solid rgba(255,255,255,0.08);
  min-width: 72px;
}

.re-stat:first-child { padding-left: 0; }
.re-stat:last-child  { border-right: none; }

.re-stat__num {
  font-family: var(--font-display);
  font-size: 18px;                    /* PR1: was 22 — tighter stats bar */
  font-weight: 900;
  color: var(--c-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.re-stat__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-text-35);
  text-transform: uppercase;
  margin-top: 4px;
}

.re-tagline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-text-35);
  text-transform: uppercase;
  margin: 0;
}

/* ── PR1: Big live countdown — Bloomberg-style live state ─────
   Replaces the small "off in N min" text buried in the toolbar.
   Sits below the stats bar in the hero so the live race state
   is the LAST thing the eye lands on before the racecard. Ticks
   client-side via the existing race_picker.js rp-countdown
   handler (same data-off-at attribute, same setInterval). */
.re-hero__countdown {
  display: inline-flex;
  align-items: baseline;
  margin: 12px 0 0;
  padding: 5px 12px;
  font-family: var(--font-display, 'Inter', system-ui, sans-serif);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-gold);
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
/* When the race is imminent (race_picker.js writes "off now" to
   the text), the chip pulses in red to grab the eye. */
.re-hero__countdown.is-live {
  color: var(--c-red, #C0392B);
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.45);
  animation: re-hero-countdown-pulse 1.4s ease-in-out infinite;
}
@keyframes re-hero-countdown-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(192, 57, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .re-hero__countdown.is-live { animation: none; }
}

/* PR2 — editorial in the hero
   ────────────────────────────────────────────────────────────
   Two new surfaces in the race-detail hero:
     1. .re-hero__fox-pick   — inline gold chip below the meta,
                               shown when featured.fox_pick is set
                               AND no full verdict card renders
                               below. "Mr Fox tips Sea The Stars 4/1"
     2. .re-hero__llama-card — sage-tinted card on the right (≥900px)
                               that previews the LLaMa letter for
                               this race. Stacks below on mobile.
   Layout: .re-hero__inner becomes flex-row on desktop, with
   .re-hero__main taking flex:1 and the LLaMa card sitting at
   320px. Mobile stays block-flow so all the existing margin-
   collapsing inside .re-hero__main keeps working.
*/
.re-hero__main { min-width: 0; }

.re-hero__fox-pick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding: 8px 14px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 8px;
  color: var(--c-text, #FFF);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.re-hero__fox-pick:hover,
.re-hero__fox-pick:focus-visible {
  background: rgba(212, 175, 55, 0.14);
  border-color: rgba(212, 175, 55, 0.55);
  text-decoration: none;
}
.re-hero__fox-pick-icon  { font-size: 16px; line-height: 1; }
.re-hero__fox-pick-label {
  color: var(--c-text-55, rgba(255,255,255,0.55));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.re-hero__fox-pick-horse {
  color: var(--c-gold);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.re-hero__fox-pick-odds {
  font-variant-numeric: tabular-nums;
  color: var(--c-text, #FFF);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}
.re-hero__fox-pick-cta {
  color: var(--c-text-70, rgba(255,255,255,0.7));
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
}

.re-hero__cubs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 10px 0 0;
  padding: 8px 14px;
  background: rgba(96, 165, 250, 0.09);
  border: 1px solid rgba(96, 165, 250, 0.30);
  border-radius: 8px;
  color: var(--c-text, #FFF);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.re-hero__cubs:hover,
.re-hero__cubs:focus-visible {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.55);
  text-decoration: none;
}
.re-hero__cubs-icon { font-size: 16px; line-height: 1; }
.re-hero__cubs-label {
  color: rgba(180, 210, 250, 1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11.5px;
}
.re-hero__cubs-sep {
  color: var(--c-text-55, rgba(255,255,255,0.4));
}
.re-hero__cubs-meta {
  color: var(--c-text, #FFF);
  font-weight: 500;
  font-size: 13px;
}
.re-hero__cubs-meta strong {
  color: rgba(180, 210, 250, 1);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.re-hero__cubs-cta {
  color: var(--c-text-70, rgba(255,255,255,0.7));
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
}

.re-hero__llama-card {
  position: relative;
  margin: 24px 0 0;
  padding: 20px 20px 18px;
  background: linear-gradient(180deg,
              rgba(140, 175, 138, 0.14) 0%,
              rgba(140, 175, 138, 0.05) 100%);
  border: 1px solid rgba(140, 175, 138, 0.28);
  border-radius: 12px;
}
.re-hero__llama-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(140, 175, 138, 0.0),
              rgba(140, 175, 138, 0.65),
              rgba(140, 175, 138, 0.0));
  border-radius: 12px 12px 0 0;
}
.re-hero__llama-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.re-hero__llama-avatar { font-size: 28px; line-height: 1; }
.re-hero__llama-titles { display: flex; flex-direction: column; gap: 3px; }
.re-hero__llama-eyebrow {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 700;
  color: rgba(190, 215, 185, 1);
  line-height: 1;
}
.re-hero__llama-meta {
  font-size: 10.5px;
  color: var(--c-text-55, rgba(255,255,255,0.55));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.re-hero__llama-headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.28;
  margin: 0 0 10px;
  color: var(--c-text, #FFF);
}
.re-hero__llama-dek {
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-text-70, rgba(255,255,255,0.72));
  margin: 0 0 14px;
}
.re-hero__llama-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(190, 215, 185, 1);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: gap 0.18s ease, color 0.18s ease;
}
.re-hero__llama-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.re-hero__llama-card:hover .re-hero__llama-cta,
.re-hero__llama-card:focus-within .re-hero__llama-cta {
  gap: 10px;
  color: rgba(210, 230, 200, 1);
}
.re-hero__llama-card:hover,
.re-hero__llama-card:focus-within {
  border-color: rgba(140, 175, 138, 0.45);
}

@media (min-width: 900px) {
  /* Widen the hero container beyond the default 1280px so the LLaMa
     card can anchor near the right edge of the viewport instead of
     hugging the centre of a narrow centred container. Capped at 1600px
     on very wide screens so the title doesn't get unreadable. */
  .re-hero__inner.gn-container {
    max-width: min(1600px, 92vw);
    padding-left:  clamp(24px, 3vw, 48px);
    padding-right: clamp(24px, 3vw, 48px);
  }
  .re-hero__inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(28px, 3.5vw, 56px);
  }
  .re-hero__main       { flex: 0 1 72ch; min-width: 0; }
  .re-hero__llama-card {
    flex: 0 0 clamp(300px, 24vw, 400px);
    margin-top: 0;
    align-self: stretch;
  }
}
/* Beyond 1400px the card column scales up a little more so it stays
   visually anchored to the right of the title block. */
@media (min-width: 1400px) {
  .re-hero__llama-card { flex-basis: clamp(340px, 22vw, 420px); }
}

/* ── THREE SIGNALS ── */
.re-signals-section {
  background: #07080f;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 56px 0 48px;
}

.re-signals-header {
  text-align: center;
  margin-bottom: 36px;
}

.re-signals-intro {
  font-size: 15px;
  color: var(--c-text-55);
  font-style: italic;
  line-height: 1.6;
}

.re-signals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.re-signal {
  background: #0a0c14;
  padding: 32px 28px;
  position: relative;
  transition: background 0.2s;
}
.re-signal:hover { background: #0d1018; }

.re-signal__icon { font-size: 24px; margin-bottom: 10px; }

.re-signal__num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--c-gold);
  margin-bottom: 10px;
  line-height: 1;
}

.re-signal--ai .re-signal__num  { color: #4cdb78; }
.re-signal--votes .re-signal__num { color: var(--c-orange); }

.re-signal__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text-100);
  margin: 0 0 9px;
}

.re-signal__text {
  font-size: 13px;
  line-height: 1.75;
  color: var(--c-text-55);
  margin: 0 0 14px;
}

.re-signal__tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--c-text-35);
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 8px;
  border-radius: 3px;
}

/* Signal top accent bar */
.re-signal--sr::before    { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--c-gold); }
.re-signal--ai::before    { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #4cdb78; }
.re-signal--votes::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--c-orange); }

/* Insight bar */
.re-insight-bar {
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 6px;
  padding: 14px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.re-insight-bar__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--c-gold);
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

.re-insight-bar__text {
  font-size: 13px;
  color: var(--c-text-55);
  line-height: 1.65;
  font-style: italic;
}

/* ── FOX'S VERDICT — Immersive standout ── */
.re-verdict {
  position: relative;
  padding: 64px 0;
  overflow: hidden;
  background: #06080f;
  border-top: 1px solid rgba(212,175,55,0.12);
  border-bottom: 1px solid rgba(212,175,55,0.12);
}

/* Atmospheric gold-tinted background */
.re-verdict__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(200,169,81,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 0% 50%, rgba(200,169,81,0.04) 0%, transparent 50%);
}

/* Animated glow behind the fox portrait */
.re-verdict__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,169,81,0.08), transparent 65%);
  filter: blur(60px);
  animation: verdictGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes verdictGlow {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

.re-verdict__inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}

/* Fox portrait */
.re-verdict__portrait {
  position: relative;
  flex-shrink: 0;
}

.re-verdict__fox-svg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: drop-shadow(0 0 24px rgba(200,169,81,0.5));
  animation: foxFloat 5s ease-in-out infinite;
}

@keyframes foxFloat {
  0%, 100% { transform: translateY(0);   filter: drop-shadow(0 0 24px rgba(200,169,81,0.5)); }
  50%       { transform: translateY(-5px); filter: drop-shadow(0 0 38px rgba(200,169,81,0.75)); }
}

/* Pulsing ring around portrait */
.re-verdict__fox-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(200,169,81,0.3);
  animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.06); }
}

/* Content side */
.re-verdict__content { flex: 1; }

.re-verdict__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Live badge */
.re-verdict__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(200,169,81,0.12);
  border: 1px solid rgba(212,175,55,0.35);
  color: var(--c-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 16px rgba(200,169,81,0.12);
}

.re-verdict__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

.re-verdict__race-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text-35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The quote — the centrepiece */
.re-verdict__quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.55;
  color: var(--c-text-100);
  margin: 0 0 20px;
  padding: 0;
  border: none;
  /* Gold text shadow for subtle glow */
  text-shadow: 0 0 40px rgba(200,169,81,0.15);
  /* Left accent line */
  padding-left: 24px;
  border-left: 3px solid var(--c-gold);
  position: relative;
}

.re-verdict__footer {
  display: flex;
  align-items: center;
  gap: 20px;
}

.re-verdict__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gold);
  border-bottom: 1px solid rgba(212,175,55,0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
  letter-spacing: 0.02em;
}
.re-verdict__cta:hover {
  color: var(--c-gold-lt);
  border-color: var(--c-gold);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .re-verdict { padding: 48px 0; }
  .re-verdict__inner { flex-direction: column; gap: 24px; align-items: center; text-align: center; }
  .re-verdict__header { justify-content: center; }
  .re-verdict__quote { padding-left: 0; border-left: none; border-top: 2px solid var(--c-gold); padding-top: 20px; font-size: clamp(16px, 4.5vw, 22px); }
  .re-verdict__footer { justify-content: center; }
}

/* ── AI SECTION ── */
.re-ai-section {
  padding: 56px 0;
  background: #060812;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.re-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.re-ai-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  transition: background 0.2s;
}
.re-ai-card:hover { background: rgba(255,255,255,0.05); }

.re-ai-card--claude::before  { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #cc8a5a; border-radius: 8px 8px 0 0; }
.re-ai-card--chatgpt::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #10a37f; border-radius: 8px 8px 0 0; }
.re-ai-card--gemini::before  { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #4285f4; border-radius: 8px 8px 0 0; }

.re-ai-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

a.re-ai-card__header-link {
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  margin: -6px;
  padding: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
a.re-ai-card__header-link:hover {
  background: rgba(255,255,255,0.06);
}
a.re-ai-card__header-link:hover .re-ai-card__name {
  color: var(--c-text-100);
}
a.re-ai-card__header-link:focus-visible {
  outline: 2px solid rgba(212,175,55,0.55);
  outline-offset: 2px;
}

.re-ai-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-75);
}

.re-ai-card__pick {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--c-text-100);
  margin-bottom: 10px;
  line-height: 1.15;
}

.re-ai-card__reason {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text-55);
  margin: 0;
}

/* Fox pick bar */
.re-fox-pick {
  background: rgba(200,169,81,0.07);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 6px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.re-fox-pick__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.re-fox-pick__horse {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--c-gold);
  flex: 1;
}

.re-fox-pick__link {
  font-size: 13px;
  color: var(--c-text-35);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.re-fox-pick__link:hover { color: var(--c-gold); border-color: var(--c-gold); }

/* Battleground line */
.re-battleground-line {
  font-size: 14px;
  font-style: italic;
  color: var(--c-text-35);
  text-align: center;
  margin: 0;
  line-height: 1.7;
}

/* ── RACE STATUS ── */
.re-race-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
}

.re-race-status--open {
  background: rgba(76,219,120,0.08);
  border: 1px solid rgba(76,219,120,0.2);
  color: #4cdb78;
}

.re-race-status--open a { color: var(--c-gold); text-decoration: underline; }

.re-race-status--closed {
  background: rgba(192,57,43,0.08);
  border: 1px solid rgba(192,57,43,0.2);
  color: rgba(255,130,130,0.85);
}

.re-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4cdb78;
  flex-shrink: 0;
  animation: pulseDot 2s ease-in-out infinite;
}

/* ── VOTE BUTTON IN TABLE ── */
.gc-vote-action { width: 70px; text-align: center; }

.re-vote-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--c-text-55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.re-vote-btn:hover {
  background: rgba(212,175,55,0.1);
  border-color: rgba(212,175,55,0.35);
  color: var(--c-gold);
}

.re-vote-btn--active {
  background: rgba(212,175,55,0.15);
  border-color: var(--c-gold);
  color: var(--c-gold);
}

/* Voted row highlight */
.gn-row--voted {
  background: rgba(212,175,55,0.04) !important;
}
.gn-row--voted td { border-left: none; }
.gn-row--voted td:first-child { border-left: 2px solid var(--c-gold); }

/* ── VOTE TOAST ── */
.re-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1f2e;
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--c-text-100);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.re-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .re-signals-grid { grid-template-columns: 1fr; }
  .re-ai-grid      { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Hero title — proportionally scaled to the new desktop sizes. */
  .re-title__eyeline { font-size: clamp(18px, 5vw, 28px); }
  .re-title__name    { font-size: clamp(28px, 8.5vw, 48px); }
  .re-hero__inner    { padding-top: var(--space-4); padding-bottom: 22px; }

  /* Stats bar — 2×2 grid on mobile */
  .re-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .re-stat {
    padding: 10px 14px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    align-items: flex-start;
  }
  .re-stat:first-child { padding-left: 14px; }
  .re-stat__num { font-size: 18px; }

  /* Signals — stack vertically */
  .re-signals-grid { grid-template-columns: 1fr; }
  .re-signal { padding: 24px 20px; }

  /* AI grid — stack */
  .re-ai-grid { grid-template-columns: 1fr; }

  /* Insight bar — stack label above text */
  .re-insight-bar { flex-direction: column; gap: 8px; }

  /* Fox pick — stack */
  .re-fox-pick { flex-direction: column; gap: 8px; }

  /* Hide vote action column on mobile — voting via profile */
  .gc-vote-action { display: none; }

  /* Table horizontal scroll */
  .gn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .re-title__name { font-size: clamp(24px, 8vw, 38px); }
  .re-eyebrow { gap: 6px; }
  .re-eyebrow__item { font-size: 10px; }
}

/* ===========================
   RACE ENGINE — DECISION HUB
   =========================== */
.re-decision-section {
  padding: 34px 0 18px;
  background: linear-gradient(to bottom, #0d1524, #0b1220);
  border-top: 1px solid rgba(212,175,55,0.08);
  border-bottom: 1px solid rgba(212,175,55,0.08);
}
.re-decision-head { margin-bottom: 18px; }
.re-decision-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 12px;
}
.re-decision-title { margin-bottom: 10px; }
.re-decision-sub {
  max-width: 760px;
  color: rgba(255,255,255,0.68);
  line-height: 1.7;
  margin: 0;
}
.re-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.re-decision-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.22);
}
.re-decision-card--you { border-color: rgba(212,175,55,0.28); }
.re-decision-card--fox { border-color: rgba(224,90,42,0.25); }
.re-decision-card--ai { border-color: rgba(16,163,127,0.25); }
.re-decision-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,0.54);
  margin-bottom: 12px;
}
.re-decision-card__horse {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 10px;
}
.re-decision-card__meta {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  margin-bottom: 14px;
}
.re-decision-card__copy {
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin: 0 0 14px;
}
.re-decision-card__link {
  color: var(--c-gold);
  text-decoration: none;
  font-weight: 700;
}
.re-decision-banner {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: rgba(255,255,255,0.76);
}
.re-decision-banner__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(212,175,55,0.12);
  color: var(--c-gold);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ===========================
   RACE ENGINE — MOBILE FIELD
   =========================== */
.re-mobile-field { display: none; }
.re-runner-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.re-runner-card--fav {
  border-color: rgba(212,175,55,0.32);
  background: rgba(212,175,55,0.06);
}
.re-runner-card--picked {
  border-color: rgba(212,175,55,0.42);
  box-shadow: 0 12px 32px rgba(212,175,55,0.08);
}
.re-runner-card--nr { opacity: 0.72; }
.re-runner-card__top {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: start;
}
.re-runner-card__silk {
  width: 44px; height: 44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700;
}
.re-runner-card__horse-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.re-runner-card__meta {
  margin-top: 4px;
  color: rgba(255,255,255,0.64);
  font-size: 12px;
}
.re-runner-card__signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.re-runner-signal {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px 12px;
}
.re-runner-signal--wide { grid-column: 1 / -1; }
.re-runner-signal__label {
  display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(255,255,255,0.45); margin-bottom:5px;
}
.re-runner-signal__value { color: rgba(255,255,255,0.84); font-size: 13px; }
.re-runner-card__copy {
  margin: 12px 0 0;
  color: rgba(255,255,255,0.74);
  line-height: 1.6;
  font-size: 14px;
}
.re-vote-btn--card {
  width: 100%;
  margin-top: 14px;
  min-height: 44px;
}
.gn-row--hidden, .re-runner-card--hidden { display: none; }

@media (max-width: 980px) {
  .re-decision-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .gn-table-wrap--desktop { display: none; }
  .re-mobile-field { display: block; }
  .re-decision-section { padding: 26px 0 14px; }
  .re-decision-card { padding: 18px; }
  .re-decision-card__horse { font-size: 28px; }
  .re-race-status { line-height: 1.5; }
  .gn-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .gn-filter-btn { white-space: nowrap; }
  .re-toast {
    left: 16px;
    right: 16px;
    width: auto;
    transform: translateY(20px);
    white-space: normal;
  }
  .re-toast.show { transform: translateY(0); }
}
@media (max-width: 480px) {
  .re-decision-sub { font-size: 14px; }
  .re-runner-card { padding: 14px; }
  .re-runner-card__top { grid-template-columns: 40px 1fr auto; gap: 10px; }
  .re-runner-card__silk { width: 40px; height: 40px; border-radius: 10px; }
  .re-runner-card__signals { gap: 8px; }
}


/* Result-reveal pill + dialog — replaces the old .re-race-result-card. */
.re-result-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.20);
  transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
  text-decoration: none;
  max-width: 100%;
}
.re-result-pill:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.30), rgba(212,175,55,0.16));
  border-color: var(--c-gold, #D4AF37);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(212, 175, 55, 0.32);
}
.re-result-pill:focus-visible {
  outline: 2px solid var(--c-gold, #D4AF37);
  outline-offset: 3px;
}
.re-result-pill__locked,
.re-result-pill__revealed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The explicit display: inline-flex above out-specifies the UA
   default `[hidden] { display: none }`, which was leaking the
   revealed-state winner name in plain text. Force [hidden] back
   to the right behaviour with !important — scoped to .re-result-pill
   so it can't bleed elsewhere. */
.re-result-pill [hidden] { display: none !important; }
.re-result-pill__icon {
  font-size: 14px;
  line-height: 1;
}
.re-result-pill__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold, #D4AF37);
}
.re-result-pill__winner {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.005em;
}
.re-result-pill__sp {
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.92);
}
.re-result-pill__cta {
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Dialog ────────────────────────────────────────────────── */
.re-result-dialog {
  /* Reset native <dialog> chrome; rebuild from scratch. */
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  max-width: min(92vw, 540px);
  max-height: 92vh;
  margin: auto;
}
.re-result-dialog::backdrop {
  background: rgba(6, 8, 18, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.re-result-dialog[open] {
  animation: reResultDialogIn 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes reResultDialogIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.re-result-dialog__panel {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212, 175, 55, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #16223a 0%, #0a121e 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 16px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.re-result-dialog__head {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.re-result-dialog__kicker {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--c-gold, #D4AF37);
  margin-bottom: 6px;
}
.re-result-dialog__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.re-result-dialog__close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
}
.re-result-dialog__close:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}
.re-result-dialog__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px;
  background: rgba(26, 125, 74, 0.18);
  border: 1px solid rgba(26, 125, 74, 0.55);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4ade80;
}
.re-result-dialog__badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
}

/* Podium */
.re-result-dialog__places {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.re-result-dialog__place {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.re-result-dialog__place--1 {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.04));
  border-color: rgba(212, 175, 55, 0.55);
}
.re-result-dialog__pos {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--c-gold, #D4AF37);
  text-align: center;
  line-height: 1;
}
.re-result-dialog__pos-suffix {
  font-size: 12px;
  vertical-align: super;
  margin-left: 1px;
  letter-spacing: 0;
}
.re-result-dialog__body {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.re-result-dialog__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.re-result-dialog__horse {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.re-result-dialog__horse.horse-link,
.re-result-dialog__horse a {
  color: #fff;
  text-decoration: none;
}
.re-result-dialog__horse a:hover { text-decoration: underline; }
.re-result-dialog__meta {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin-top: 1px;
}
.re-result-dialog__silks {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, var(--re-silk-a, #1a3a6b) 50%, var(--re-silk-b, #ffffff) 50%);
  border: 1px solid rgba(255,255,255,0.18);
}
.re-result-dialog__sp {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  padding: 4px 10px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
}

/* Mobile dialog — drop padding, full-width sheet at the bottom. */
@media (max-width: 640px) {
  .re-result-dialog {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    margin: 0;
    align-self: end;
  }
  .re-result-dialog__panel {
    border-radius: 16px 16px 0 0;
    padding: 20px 16px 16px;
  }
  .re-result-pill {
    font-size: 12px;
    padding: 7px 12px;
  }
  .re-result-pill__winner { font-size: 14px; }
}


/* ── Big Race mobile hero compression / verdict polish ───────────────── */
@media (max-width: 640px) {
  .re-hero {
    min-height: 0;
    align-items: flex-start;
  }

  .re-hero__inner {
    padding-top: var(--space-4);
    padding-bottom: 14px;
  }

  .re-eyebrow {
    gap: 8px;
    margin-bottom: 10px;
  }

  .re-eyebrow__kicker {
    padding: 3px 9px;
    font-size: 8px;
    letter-spacing: 0.24em;
  }

  .re-eyebrow__item,
  .re-eyebrow__sep {
    font-size: 11px;
  }

  .re-title {
    margin-bottom: 10px;
  }

  .re-title__eyeline {
    font-size: clamp(22px, 6.8vw, 34px);
    line-height: 0.98;
  }

  .re-title__name {
    font-size: clamp(34px, 11.8vw, 56px);
    line-height: 0.88;
  }

  .re-subtitle {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 16px;
  }

  .re-stats-bar {
    margin-bottom: 12px;
  }

  .re-stat {
    min-width: 0;
    padding: 9px 12px;
  }

  .re-stat:first-child {
    padding-left: 12px;
  }

  .re-stat__num {
    font-size: 16px;
  }

  .re-stat__label {
    font-size: 8px;
    margin-top: 3px;
  }

  .re-tagline {
    font-size: 11px;
    letter-spacing: 0.11em;
    margin-bottom: 10px;
  }

  .re-hero__verdict {
    max-width: none;
    margin-top: 0;
  }

  .gn-verdict.re-hero__verdict {
    padding: 16px 16px 18px;
    border-left-width: 3px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(212,175,55,0.08) 100%);
    box-shadow: 0 10px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .gn-verdict.re-hero__verdict .gn-verdict-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
  }

  .gn-verdict.re-hero__verdict p {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 500;
    color: rgba(255,255,255,0.92);
    text-wrap: pretty;
  }
}

@media (max-width: 480px) {
  .re-hero__inner {
    padding-top: var(--space-3);
    padding-bottom: 12px;
  }

  .re-eyebrow {
    margin-bottom: 8px;
  }

  .re-title__eyeline {
    font-size: clamp(20px, 6.3vw, 30px);
  }

  .re-title__name {
    font-size: clamp(32px, 10.6vw, 50px);
  }

  .re-subtitle {
    margin-bottom: 14px;
  }

  .re-stats-bar {
    grid-template-columns: 1fr 1fr;
  }

  .gn-verdict.re-hero__verdict {
    padding: 14px 14px 16px;
  }

  .gn-verdict.re-hero__verdict p {
    font-size: 15px;
    line-height: 1.68;
  }
}


/* ═══════════════════════════════════════════════════════
   FOX VERDICT CARD — Hero section, bold Fox-branded
═══════════════════════════════════════════════════════ */

.fox-verdict-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 28px 28px 22px;
  margin-top: 28px;
  max-width: 760px;

  /* Deep dark card with strong gold border */
  background: #07090f;
  border: 1px solid rgba(212,175,55,0.35);
  border-top: 2px solid var(--c-gold);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.08),
    0 20px 60px rgba(0,0,0,0.6),
    0 4px 20px rgba(212,175,55,0.08),
    inset 0 1px 0 rgba(212,175,55,0.1);

  animation: fadeUp 0.5s 0.35s ease both;
}

/* Verdict + official result — desktop side-by-side when both exist */
.re-hero__feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
  margin-top: 28px;
}

.re-hero__feature-row--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.re-hero__feature-row .fox-verdict-card {
  margin-top: 0;
  max-width: 760px;
}

.re-hero__feature-row--split .fox-verdict-card {
  max-width: none;
  min-width: 0;
}

.re-hero__feature-row:not(.re-hero__feature-row--split) .re-race-result-card {
  max-width: 420px;
  /* When the result card is alone (no Fox-verdict alongside), pin it to
     the right of the hero so the title area to the left breathes. */
  justify-self: end;
  width: 100%;
}

/* Abandoned — neutral slate card, no podium, just a clear "this didn't run" */
.re-race-abandoned-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 22px 20px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;

  background: #0c0e15;
  border: 1px solid rgba(108,117,125,0.35);
  border-top: 2px solid #6c757d;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.04);

  animation: fadeUp 0.5s 0.38s ease both;
}
.re-race-abandoned-card__bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0, transparent 24px,
      rgba(108,117,125,0.05) 24px, rgba(108,117,125,0.05) 48px
    );
  pointer-events: none;
}
.re-race-abandoned-card__icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
  z-index: 1;
}
.re-race-abandoned-card__body {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  z-index: 1;
}
.re-race-abandoned-card__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #adb5bd;
}
.re-race-abandoned-card__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  color: #e9ecef;
  margin: 0;
  line-height: 1.15;
}
.re-race-abandoned-card__copy {
  font-size: 13px;
  line-height: 1.55;
  color: #adb5bd;
  margin: 0;
}
.re-hero__feature-row:not(.re-hero__feature-row--split) .re-race-abandoned-card {
  max-width: 480px;
}

/* Official result — mirrors Fox verdict card chrome */
.re-race-result-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 22px 22px 18px;
  min-width: 0;

  background: #07090f;
  border: 1px solid rgba(212,175,55,0.35);
  border-top: 2px solid var(--c-gold);
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.08),
    0 20px 60px rgba(0,0,0,0.6),
    0 4px 20px rgba(212,175,55,0.08),
    inset 0 1px 0 rgba(212,175,55,0.1);

  animation: fadeUp 0.5s 0.38s ease both;
}

.re-race-result-card__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 92% 12%, rgba(212,175,55,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 8% 80%, rgba(26,107,60,0.06) 0%, transparent 50%);
  pointer-events: none;
}

.re-race-result-card__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.re-race-result-card__head-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.re-race-result-card__kicker {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.55);
}

.re-race-result-card__race-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  line-height: 1.35;
}

.re-race-result-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(110, 200, 140, 0.95);
  border: 1px solid rgba(110, 200, 140, 0.35);
  background: rgba(40, 90, 55, 0.2);
}

.re-race-result-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(110, 200, 140, 0.95);
  box-shadow: 0 0 8px rgba(110, 200, 140, 0.65);
}

.re-race-result-card__places {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.re-race-result-card__place {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 12px 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.re-race-result-card__place:first-of-type {
  border-top: none;
  padding-top: 0;
}

.re-race-result-card__pos {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 22px;
  font-weight: 900;
  color: var(--c-gold);
  line-height: 1;
  text-align: center;
}

.re-race-result-card__pos-suffix {
  font-size: 11px;
  font-weight: 700;
  vertical-align: super;
  margin-left: 1px;
  opacity: 0.75;
}

.re-race-result-card__place--2 .re-race-result-card__pos,
.re-race-result-card__place--3 .re-race-result-card__pos {
  font-size: 18px;
  color: rgba(212,175,55,0.72);
}

.re-race-result-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.re-race-result-card__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}

.re-race-result-card__horse {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 800;
  color: rgba(255,255,255,0.96);
  line-height: 1.25;
}

.re-race-result-card__horse a,
a.re-race-result-card__horse {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.re-race-result-card__horse a:hover,
a.re-race-result-card__horse:hover {
  color: var(--c-gold);
  border-bottom-color: rgba(212,175,55,0.45);
}

.re-race-result-card__meta {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  line-height: 1.35;
}

.re-race-result-card__silks {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(212,175,55,0.35);
  background: linear-gradient(
    135deg,
    var(--re-silk-a, #1a3a6b) 0%,
    var(--re-silk-a, #1a3a6b) 50%,
    var(--re-silk-b, #ffffff) 50%,
    var(--re-silk-b, #ffffff) 100%
  );
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.re-race-result-card__sp {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 15px;
  font-weight: 800;
  color: var(--c-gold);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 3.2em;
  text-align: right;
}

/* ── Reveal/hide toggle ─────────────────────────────────────
   The result card has TWO faces:
     · "locked" — a single CTA button asking the user to reveal
     · revealed — the existing podium + a small "Hide" button

   aria-pressed on the card drives which face is visible. The
   button(s) are wired via inline JS at the bottom of
   _big_race_hero.html — same localStorage key as the meetings-
   browse spoilers, so the choice persists across pages. */
.re-race-result-card__locked,
.re-race-result-card__hide {
  position: relative;
  z-index: 1;
}

.re-race-result-card__locked {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 36px 22px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  color: inherit;
  text-align: center;
  font: inherit;
  transition: background 0.2s ease;
}
.re-race-result-card__locked:hover {
  background: rgba(212,175,55,0.05);
}
.re-race-result-card__locked-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.re-race-result-card__locked-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  color: var(--c-text-100, #fff);
  letter-spacing: -0.01em;
}
.re-race-result-card__locked-copy {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  max-width: 36ch;
}
.re-race-result-card__locked-cta {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  border-radius: 99px;
  background: linear-gradient(135deg, #f5d76e 0%, #c8a951 100%);
  color: #11151F;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(212,175,55,0.30);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.re-race-result-card__locked:hover .re-race-result-card__locked-cta {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212,175,55,0.45);
}

.re-race-result-card__hide {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 99px;
  color: rgba(255,255,255,0.65);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.re-race-result-card__hide:hover {
  background: rgba(255,255,255,0.10);
  color: var(--c-text-100, #fff);
}

/* aria-pressed="false" (default — locked): show the locked CTA, hide
   the podium content + the small "Hide" button. */
.re-race-result-card[aria-pressed="false"] .re-race-result-card__head,
.re-race-result-card[aria-pressed="false"] .re-race-result-card__places,
.re-race-result-card[aria-pressed="false"] .re-race-result-card__hide {
  display: none;
}

/* aria-pressed="true" (revealed): show the podium, hide the locked CTA. */
.re-race-result-card[aria-pressed="true"] .re-race-result-card__locked {
  display: none;
}

@media (max-width: 900px) {
  .re-hero__feature-row--split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .re-race-result-card {
    padding: 18px 16px 14px;
  }

  .re-race-result-card__place {
    grid-template-columns: 38px minmax(0, 1fr) 24px auto;
    gap: 8px 10px;
  }

  .re-race-result-card__pos {
    font-size: 18px;
  }

  .re-race-result-card__sp {
    font-size: 13px;
  }
}

/* Atmospheric gold radial glow behind content */
.fox-verdict-card__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 10% 50%, rgba(212,175,55,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 95% 20%, rgba(192,57,43,0.04) 0%, transparent 55%);
  pointer-events: none;
}

/* ── Identity row ─────────────────────────────────── */
.fox-verdict-card__identity {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.fox-verdict-card__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.fox-verdict-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 0 12px rgba(200,169,81,0.4));
  animation: foxFloat 5s ease-in-out infinite;
}

@keyframes foxFloat {
  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 0 12px rgba(200,169,81,0.4)); }
  50%       { transform: translateY(-3px); filter: drop-shadow(0 0 20px rgba(200,169,81,0.65)); }
}

.fox-verdict-card__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(200,169,81,0.35);
  animation: foxRing 3s ease-in-out infinite;
}

@keyframes foxRing {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 0.8;  transform: scale(1.07); }
}

.fox-verdict-card__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.fox-verdict-card__name {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 17px;
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: 0.01em;
  line-height: 1;
}

.fox-verdict-card__title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.45);
}

.fox-verdict-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--c-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.fox-verdict-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  animation: pulseDot 2s ease-in-out infinite;
}

/* ── Tip-posted timestamp (verification) ──────────── */
.fox-verdict-card__timestamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-text-55);
  white-space: nowrap;
  flex-shrink: 0;
}
.fox-verdict-card__timestamp-icon { opacity: 0.7; }
.fox-verdict-card__timestamp-abs  { color: var(--c-text-35); }

@media (max-width: 640px) {
  .fox-verdict-card__timestamp { font-size: 9px; gap: 4px; }
  /* Hide the absolute date on small screens — relative is enough. */
  .fox-verdict-card__timestamp-abs { display: none; }
}

/* ── The verdict quote ────────────────────────────── */
.fox-verdict-card__quote {
  position: relative;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255,255,255,0.96);
  margin: 0 0 20px;
  padding: 0 0 0 20px;
  border: none;
  border-left: 3px solid var(--c-gold);
  text-shadow: 0 0 30px rgba(200,169,81,0.12);
  letter-spacing: 0.01em;
}

/* Subtle opening quote mark */
.fox-verdict-card__quote::before {
  content: '\201C';
  position: absolute;
  left: -8px;
  top: -8px;
  font-size: 60px;
  line-height: 1;
  color: rgba(212,175,55,0.12);
  font-family: Georgia, serif;
  pointer-events: none;
}

/* ── Footer ───────────────────────────────────────── */
.fox-verdict-card__footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.fox-verdict-card__race {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

.fox-verdict-card__pick-label {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

.fox-verdict-card__pick-horse {
  color: var(--c-gold);
  font-weight: 800;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  margin-left: 4px;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
  .fox-verdict-card {
    padding: 20px 18px 18px;
    margin-top: 20px;
    border-radius: 12px;
  }
  .fox-verdict-card__identity { gap: 10px; margin-bottom: 16px; }
  .fox-verdict-card__avatar { width: 42px; height: 42px; }
  .fox-verdict-card__name { font-size: 15px; }
  .fox-verdict-card__badge { font-size: 9px; padding: 4px 10px; }
  .fox-verdict-card__quote {
    font-size: clamp(15px, 4.5vw, 19px);
    padding-left: 16px;
    border-left-width: 2px;
  }
  .fox-verdict-card__quote::before { font-size: 44px; }
  .fox-verdict-card__footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (max-width: 400px) {
  .fox-verdict-card__badge { display: none; }
  .fox-verdict-card__quote { font-size: clamp(14px, 4.2vw, 17px); }
}

/* ═══════════════════════════════════════════════════════════════
   GUEST PICK SYSTEM
   - re-vote-btn--guest   : pick button for logged-out users
   - gn-row--guest-pick   : selected row highlight (desktop)
   - re-runner-card--guest-pick : selected card highlight (mobile)
   - guest-pick-bar       : sticky bottom confirmation bar
═══════════════════════════════════════════════════════════════ */

/* Guest pick button — visually matches the logged-in pick btn
   but with a dashed border to signal "provisional" state       */
.re-vote-btn--guest {
  background: rgba(212,175,55,0.06);
  border: 1px dashed rgba(212,175,55,0.35);
  color: var(--c-gold, #d4af37);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.re-vote-btn--guest:hover,
.re-vote-btn--guest:focus-visible {
  background: rgba(212,175,55,0.14);
  border-color: var(--c-gold, #d4af37);
  border-style: solid;
  outline: none;
}
.re-vote-btn--guest.is-selected {
  background: rgba(212,175,55,0.18);
  border-style: solid;
  border-color: var(--c-gold, #d4af37);
  color: var(--c-gold, #d4af37);
}
/* "Picked" label when selected */
.re-vote-btn--guest.is-selected::before {
  content: "✓ ";
}

/* Selected row — desktop table */
.gn-row--guest-pick td:first-child {
  border-left: 2px solid rgba(212,175,55,0.55);
}
.gn-row--guest-pick {
  background: rgba(212,175,55,0.04) !important;
}

/* Selected card — mobile */
.re-runner-card--guest-pick {
  border-color: rgba(212,175,55,0.55) !important;
  background: rgba(212,175,55,0.05) !important;
}

/* ── Sticky guest pick confirmation bar ──────────────────────── */
.guest-pick-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #0f1520;
  border-top: 1px solid rgba(212,175,55,0.35);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  /* Respect safe area inset (iOS notch / home bar) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.guest-pick-bar.is-visible {
  transform: translateY(0);
}

.guest-pick-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.guest-pick-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.guest-pick-bar__silk {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(212,175,55,0.4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.guest-pick-bar__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.guest-pick-bar__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-gold, #d4af37);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
}
.guest-pick-bar__horse {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guest-pick-bar__odds {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-gold, #d4af37);
  flex-shrink: 0;
}

.guest-pick-bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-gold, #d4af37);
  color: #0a0e1a;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.guest-pick-bar__cta:hover,
.guest-pick-bar__cta:focus-visible {
  background: #f5e49a;
  outline: none;
  transform: translateY(-1px);
}

.guest-pick-bar__clear {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.15s;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.guest-pick-bar__clear:hover { color: rgba(255,255,255,0.7); }

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 600px) {
  .guest-pick-bar__inner {
    padding: 10px 14px;
    gap: 8px;
  }
  .guest-pick-bar__cta {
    font-size: 12px;
    padding: 10px 14px;
  }
  .guest-pick-bar__horse {
    font-size: 14px;
  }
  /* On very small screens collapse the odds to save space */
  .guest-pick-bar__odds {
    display: none;
  }
}

/* Push page content up when bar is visible so it doesn't hide under it */
body.guest-pick-bar-open {
  padding-bottom: 72px;
}


/* ── Fox verdict card — Full Verdict >> link ──────────────── */
.fox-verdict-card__footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fox-verdict-card__more-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-gold);
  background: var(--c-gold-subtle);
  border: 1px solid var(--c-border-gold);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  white-space: nowrap;
}
.fox-verdict-card__more-link:hover {
  background: rgba(212,175,55,0.18);
  box-shadow: 0 4px 16px rgba(212,175,55,0.22);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .fox-verdict-card__footer-right { flex-direction: column; align-items: flex-start; gap: 8px; }
  .fox-verdict-card__more-link    { font-size: 12px; }
}


/* ═════════════════════════════════════════════════════════════
   BIG RACE — v2 polish pass
   ═════════════════════════════════════════════════════════════
   Shipped on top of existing rules. Adds:
     • Silks driven by CSS custom properties (no more raw inline
       background rules from templates)
     • Focus-visible ring on Pick buttons (keyboard nav)
     • Mobile Pick cell >= 44px tap target
     • Hero uses dvh fallback for mobile chrome
     • Auto silk-number contrast (dark-text when silk is light)
     ═════════════════════════════════════════════════════════════ */

/* Silks — background/border driven by custom properties set via
   `style="--silk-bg: ...; --silk-border: ..."` on the template.
   Fallbacks keep the silk visible even if both values are empty.   */
.gn-silk,
.gn-fancy-silk,
.re-runner-card__silk {
  background: var(--silk-bg, #1a3a6b);
  border-color: var(--silk-border, #ffffff);
}
.gn-silk            { border: 2px solid var(--silk-border, #ffffff); }
.gn-fancy-silk      { border: 3px solid var(--silk-border, #ffffff); }
.re-runner-card__silk { border: 2px solid var(--silk-border, #ffffff); }

/* Guest-bar mini silk reads the same custom property. */
.guest-pick-bar__silk {
  background: var(--silk-bg, #1a3a6b);
}

/* Focus-visible ring on Pick buttons — meets 3:1 on the darker card bg. */
.re-vote-btn:focus-visible {
  outline: 2px solid var(--c-gold, #D4AF37);
  outline-offset: 2px;
  background: rgba(212, 175, 55, 0.12);
  color: var(--c-gold, #D4AF37);
}
.re-vote-btn--active:focus-visible {
  outline-color: var(--c-gold-lt, #F5D76E);
}

/* ── Mobile tap targets + vote cell height ─────────────────── */
@media (max-width: 768px) {
  /* Keyboard-navigable desktop table row cell — not visible below
     768 via an existing rule, but the rule below bumps it for the
     narrow desktop range where the table still shows. */
  .gc-vote-action { min-height: 44px; }
  .re-vote-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* Mobile card CTA: comfortable thumb target. */
@media (max-width: 480px) {
  .re-vote-btn--card {
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
    width: 100%;
  }
}

/* ── Hero: dvh fallback so mobile chrome doesn't reflow layout ── */
.gn-hero {
  /* Existing rule keeps the 520px floor; dvh scales up on bigger
     screens while tracking mobile browser-chrome collapse. */
  min-height: 520px;
  min-height: max(520px, calc(100dvh - var(--nav-h, 60px) - 80px));
}

/* ── Auto silk-number colour ───────────────────────────────────
   When a silk has the `silk--light` modifier (added server-side or
   via JS when the background is a light colour), the number text
   flips to dark so it stays readable. Drop-shadow adjusted for the
   reverse contrast. */
.gn-silk.silk--light,
.gn-fancy-silk.silk--light,
.re-runner-card__silk.silk--light {
  color: #0B0B0F;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
}

/* ─────────────────────────────────────────────────────────────
   GENERIC RACECARD VARIANTS
   /races/<id>/ reuses the same partials as /races/big-race/.
   These rules adapt the layout for races without the editorial
   overlay (no Mr Fox card, single-engine AI block).
───────────────────────────────────────────────────────────── */

/* Decision Hub: 2-up grid when there's no Fox card. */
.re-decision-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .re-decision-grid--two { grid-template-columns: 1fr; }
}

/* AI Intelligence: single-card variant for race-level AI fallback.
   Centres a single card and caps its width so it doesn't sprawl
   across a desktop grid. */
.re-ai-grid--single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

/* Saturday Racing AI card — sibling to claude/chatgpt/gemini. */
.re-ai-card--saturday::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #c8a951, #f5d76e, #c8a951);
  border-radius: 8px 8px 0 0;
}
.re-ai-card__confidence {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(212, 175, 55, 0.10);
  color: #c8a951;
  border: 1px solid rgba(212, 175, 55, 0.25);
}
.re-ai-card__confidence--high   { background: rgba(45, 189, 122, 0.10);  color: #2DBD7A; border-color: rgba(45,189,122,0.30); }
.re-ai-card__confidence--medium { background: rgba(212, 175, 55, 0.10);  color: #c8a951; border-color: rgba(212,175,55,0.25); }
.re-ai-card__confidence--speculative,
.re-ai-card__confidence--low    { background: rgba(224, 92, 76, 0.08);   color: #E05C4C; border-color: rgba(224,92,76,0.25); }

.re-ai-card__shortlist {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.68);
}
.re-ai-card__shortlist-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-right: 6px;
}

.re-ai-card__extras {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}
.re-ai-card__extra strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════
   PW-DEVIL-3 · "Case against" collapsible.

   Sits under the reasoning inside .re-ai-card--saturday.  Uses the
   native <details>/<summary> so it works with no JS; the summary
   reads as a chip strip, the open state reveals a bullet list.

   Colour language: warm-amber (not error-red).  We want scepticism,
   not alarm — the pick is still Saturday Racing's recommendation.
   ═════════════════════════════════════════════════════════════ */
.re-ai-card__devil {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.re-ai-card__devil-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.20);
  color: rgba(212, 175, 55, 0.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;              /* hide default disclosure triangle */
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.re-ai-card__devil-summary::-webkit-details-marker { display: none; }
.re-ai-card__devil-summary:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.35);
}
.re-ai-card__devil-summary:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.55);
  outline-offset: 2px;
}
.re-ai-card__devil-icon { font-size: 13px; line-height: 1; }
.re-ai-card__devil-label { text-transform: uppercase; }
.re-ai-card__devil-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: rgba(212, 175, 55, 0.18);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.re-ai-card__devil-clamp {
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(224, 92, 76, 0.14);
  color: #E05C4C;
  border: 1px solid rgba(224, 92, 76, 0.30);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.re-ai-card__devil-toggle {
  margin-left: 2px;
  font-size: 10px;
  transition: transform 0.15s ease;
  opacity: 0.75;
}
.re-ai-card__devil[open] .re-ai-card__devil-toggle {
  transform: rotate(180deg);
}

.re-ai-card__devil-list {
  margin: 12px 0 0;
  padding-left: 20px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.55;
}
.re-ai-card__devil-list li {
  margin-bottom: 6px;
}
.re-ai-card__devil-list li:last-child { margin-bottom: 0; }

/* When the devil actually moved the confidence needle, tint the
   whole panel border warmer to earn the extra visual weight. */
.re-ai-card__devil--clamped .re-ai-card__devil-summary {
  background: rgba(224, 92, 76, 0.08);
  border-color: rgba(224, 92, 76, 0.30);
  color: #E05C4C;
}
.re-ai-card__devil--clamped .re-ai-card__devil-count {
  background: rgba(224, 92, 76, 0.20);
  color: #ffffff;
}

/* ═════════════════════════════════════════════════════════════
   Race-detail hero scaling.

   The big-race landing (page-race-engine) wants the marquee type —
   it's the front door for the festival headliner. The per-race
   detail page (page-race-engine + page-race-detail) reuses the same
   _big_race_hero.html partial but is one of many races, so the
   marquee scale (clamp 48-112px on the title) was eating ~⅔ of the
   viewport for every routine card.

   Scope the shrink to .page-race-detail so the dedicated landing is
   untouched. We do NOT cap the hero with max-height + overflow
   because the Fox-verdict / official-result cards live INSIDE
   .re-hero and would get clipped; we just bring the type and
   padding down so the natural height settles around a third of the
   viewport.
═════════════════════════════════════════════════════════════ */
/* Centre the hero + toolbar in the viewport on the per-race detail
   page. Earlier iteration of this rule left-pinned both blocks; the
   refreshed hero with the LLaMa card on the right needs proper
   centring so the title + card pair sits in the middle of the page
   instead of hugging the left edge. */
.page-race-detail .re-hero__inner,
.page-race-detail .race-toolbar__inner {
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
}
.page-race-detail .re-hero__inner       { padding-top: 26px; padding-bottom: 24px; }
.page-race-detail .re-eyebrow           { margin-bottom: 12px; }
.page-race-detail .re-title             { margin-bottom: 10px; }
.page-race-detail .re-title__eyeline    {
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 1.1;
}
.page-race-detail .re-title__name       {
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.05;
}
.page-race-detail .re-subtitle          {
  font-size: 13px;
  margin-bottom: 16px;
}
.page-race-detail .re-stats-bar         { margin-bottom: 14px; }
.page-race-detail .re-stat              { padding: 8px 16px; min-width: 70px; }
.page-race-detail .re-stat__num         { font-size: 18px; }
.page-race-detail .re-tagline           { display: none; }

/* Tablet/mobile: the underlying responsive blocks already bring the
   numbers down further; we just tighten the padding once more so
   the feature-row sits closer to the title on small screens. */
@media (max-width: 768px) {
  .page-race-detail .re-hero__inner    { padding-top: 18px; padding-bottom: 16px; }
  .page-race-detail .re-title__name    { font-size: clamp(24px, 6vw, 40px); }
  .page-race-detail .re-title__eyeline { font-size: clamp(16px, 4vw, 24px); }
}