/* ═══════════════════════════════════════════════════════════════
   THE PIN — cinematic editorial race preview
   Mobile-first. Dark cinematic hero scenes; cream body for the
   reading sections. Scoped under .page-pin to avoid leaking into
   other pages.
   ─────────────────────────────────────────────────────────────── */

.page-pin {
  /* Palette mirrors the rest of the editorial surfaces (news,
     leaderboard) for visual continuity — cream paper for the
     body, deep navy for the hero treatments. */
  --pin-ink:          #11151F;
  --pin-ink-70:       #41474F;
  --pin-ink-40:       #9CA3AF;
  --pin-paper:        #FAFAF7;
  --pin-paper-warm:   #F7F5EE;
  --pin-rule:         #E7E5DD;
  --pin-rule-strong:  #D6D2C5;
  --pin-gold:         #D4AF37;
  --pin-gold-ink:     #6B4F0C;
  --pin-gold-wash:    #FAF1D7;
  --pin-emerald:      #1A7D4A;
  --pin-emerald-lt:   #2DBD7A;
  --pin-red:          #C0392B;
  --pin-navy:         #1E40AF;
  --pin-hero-bg:      #06080F;
  --pin-hero-ink:     #F5F2E9;
  --pin-hero-mute:    rgba(245, 242, 233, 0.55);

  background: var(--pin-paper);
  color: var(--pin-ink);
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
}

/* ── DRAFT BANNER (preview URL) ────────────────────────── */
.pin-draft-banner {
  background: var(--pin-red);
  color: #FFF;
  padding: 10px 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════
   SCENE 1 — COLD OPEN (cinematic dark hero)
   ═══════════════════════════════════════════════════════════ */
.pin-hero {
  position: relative;
  background: var(--pin-hero-bg);
  color: var(--pin-hero-ink);
  overflow: hidden;
  padding: 72px 24px 56px;
}
.pin-hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 60% at 15% 30%, rgba(192, 57, 43, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 70%, rgba(212, 175, 55, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 50% 110%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}
.pin-hero__lead-image {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) saturate(1.1);
}
.pin-hero__inner {
  position: relative; z-index: 1;
  max-width: 920px; margin: 0 auto;
}

.pin-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pin-gold);
  margin-bottom: 22px;
}
.pin-hero__eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pin-gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}
.pin-hero__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.98;
  margin: 0 0 18px;
  color: var(--pin-hero-ink);
  text-wrap: balance;
}
.pin-hero__title-icon {
  font-size: 0.6em;
  margin-right: 0.2em;
}
.pin-hero__deck {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.4;
  color: var(--pin-hero-mute);
  margin: 0 0 32px;
  max-width: 56ch;
  text-wrap: balance;
}

.pin-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0 0 36px;
}
@media (min-width: 540px) {
  .pin-hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 820px) {
  .pin-hero__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.pin-hero__stat {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
.pin-hero__stat-lbl {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pin-hero-mute);
  margin-bottom: 4px;
}
.pin-hero__stat-val {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px; font-weight: 700;
  color: var(--pin-hero-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.pin-hero__byline {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--pin-hero-mute);
  margin: 0;
}
.pin-hero__byline-avatar {
  font-size: 24px; line-height: 1;
}
.pin-hero__byline strong { color: var(--pin-hero-ink); font-weight: 700; }

/* Racecard deep-link pill — sits between byline and scroll-cue.
   Gold-on-dark to read cleanly against the cinematic hero;
   slides slightly + brightens on hover so the affordance is
   unambiguous without competing with the eyebrow + title. */
.pin-hero__racecard-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 10px 16px 10px 14px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  color: var(--pin-hero-ink);
  text-decoration: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.pin-hero__racecard-pill:hover,
.pin-hero__racecard-pill:focus-visible {
  background: rgba(212, 175, 55, 0.20);
  border-color: var(--pin-gold);
  transform: translateY(-1px);
  outline: none;
}
.pin-hero__racecard-pill-icon {
  width: 16px; height: 16px;
  fill: var(--pin-gold);
  flex-shrink: 0;
}
.pin-hero__racecard-pill-lbl {
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--pin-gold);
}
.pin-hero__racecard-pill-meta {
  color: var(--pin-hero-mute);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
  border-left: 1px solid rgba(212, 175, 55, 0.30);
}
.pin-hero__racecard-pill-arrow {
  margin-left: 4px;
  color: var(--pin-gold);
  font-weight: 800;
  transition: transform 0.18s ease;
}
.pin-hero__racecard-pill:hover .pin-hero__racecard-pill-arrow {
  transform: translateX(3px);
}
@media (max-width: 540px) {
  .pin-hero__racecard-pill {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 10px 14px;
  }
  .pin-hero__racecard-pill-meta {
    padding-left: 0;
    border-left: 0;
    flex-basis: 100%;
    font-size: 11px;
  }
}

.pin-hero__cue {
  display: block;
  margin-top: 36px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pin-hero-mute);
  text-align: center;
}
.pin-hero__cue-arrow {
  display: block;
  font-size: 18px; margin-top: 6px;
}

/* Off-time bell toggle — sits subtly at the top-right of the
   hero. Click to enable; rings at countdown == 0. Persists per
   browser via localStorage so users opt in once. */
.pin-hero__bell {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--pin-hero-mute);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pin-hero__bell:hover,
.pin-hero__bell:focus-visible {
  background: rgba(255, 255, 255, 0.10);
  color: var(--pin-hero-ink);
  border-color: rgba(212, 175, 55, 0.45);
  outline: 0;
}
.pin-hero__bell[aria-pressed="true"] {
  background: rgba(212, 175, 55, 0.18);
  color: var(--pin-gold);
  border-color: rgba(212, 175, 55, 0.55);
}
.pin-hero__bell-icon { font-size: 14px; line-height: 1; }


/* ═══════════════════════════════════════════════════════════
   SCENE WRAPPER — cream paper sections below the dark hero
   ═══════════════════════════════════════════════════════════ */
.pin-scene {
  padding: 56px 20px;
  position: relative;
}
.pin-scene__inner {
  max-width: 1080px; margin: 0 auto;
}
.pin-scene__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pin-gold-ink);
  margin-bottom: 10px;
}
.pin-scene__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--pin-ink);
  text-wrap: balance;
}
.pin-scene__lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--pin-ink-70);
  max-width: 60ch;
  margin: 0 0 32px;
}
.pin-scene--paper-warm { background: var(--pin-paper-warm); }
.pin-scene--ink {
  background: var(--pin-hero-bg);
  color: var(--pin-hero-ink);
}
.pin-scene--ink .pin-scene__title { color: var(--pin-hero-ink); }
.pin-scene--ink .pin-scene__eyebrow { color: var(--pin-gold); }
.pin-scene--ink .pin-scene__lede { color: var(--pin-hero-mute); }


/* ═══════════════════════════════════════════════════════════
   SCENE 2 — FOX'S CALL (top 4)
   ═══════════════════════════════════════════════════════════ */
.pin-verdict-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .pin-verdict-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.pin-verdict-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 18px 18px 18px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border-left: 4px solid var(--pin-gold);
}
.pin-verdict-card--1 { border-left-color: var(--pin-gold); }
.pin-verdict-card--2 { border-left-color: #94A3B8; }
.pin-verdict-card--3 { border-left-color: #A0522D; }
.pin-verdict-card--4 { border-left-color: rgba(255, 255, 255, 0.30); }
.pin-verdict-card__rank {
  font-family: var(--font-display, Georgia, serif);
  font-size: 36px; font-weight: 900;
  color: var(--pin-gold);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.pin-verdict-card__body { min-width: 0; }
.pin-verdict-card__silk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 10px; font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  vertical-align: -4px;
  margin-right: 8px;
}
.pin-verdict-card__name {
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px; font-weight: 800;
  color: var(--pin-hero-ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  display: inline;
}
.pin-verdict-card__pedigree {
  display: block;
  font-style: italic;
  font-size: 13px;
  color: var(--pin-hero-mute);
  margin-bottom: 8px;
}
.pin-verdict-card__note {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(245, 242, 233, 0.85);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   SCENE 3 — THE FIELD (runner cards)
   ═══════════════════════════════════════════════════════════ */
.pin-runners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .pin-runners { gap: 20px; }
}

.pin-runner-card {
  background: #FFFFFF;
  /* Gold border on every card — visual continuity with the
     hero's gold-pill + the Fox's Verdict box. Slightly translucent
     so fox-pick cards (full-opacity gold) still register as a
     deeper, more conviction-heavy treatment. */
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 1px 3px rgba(212, 175, 55, 0.08);
}
.pin-runner-card:hover {
  border-color: var(--pin-gold);
  box-shadow: 0 8px 24px -10px rgba(212, 175, 55, 0.25);
  transform: translateY(-1px);
}
.pin-runner-card--fox {
  border-width: 2px;
  border-color: var(--pin-gold);
  background:
    linear-gradient(180deg, var(--pin-gold-wash) 0%, transparent 30%),
    #FFFFFF;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.18);
}
.pin-runner-card--lurker  { border-left: 4px solid var(--pin-navy); }
.pin-runner-card--swerve  { border-left: 4px solid var(--pin-red); }

/* Header row: number + silk + horse name + ribbons */
.pin-runner-card__head {
  display: flex; align-items: flex-start; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pin-runner-card__silk {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px; font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.06);
}
.pin-runner-card__id { flex: 1; min-width: 0; }
.pin-runner-card__num {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  margin-bottom: 2px;
}
.pin-runner-card__name {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--pin-ink);
}
.pin-runner-card__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.pin-runner-card__name a:hover {
  border-bottom-color: var(--pin-gold-ink);
}
.pin-runner-card__chips {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.pin-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pin-chip--fox {
  background: var(--pin-gold);
  color: #1A2233;
  box-shadow: 0 1px 3px rgba(212, 175, 55, 0.35);
}
.pin-chip--lurker { background: var(--pin-navy); color: #FFF; }
.pin-chip--swerve { background: var(--pin-red);  color: #FFF; }
.pin-chip--draw,
.pin-chip--headgear {
  background: var(--pin-paper-warm);
  color: var(--pin-ink-70);
  border: 1px solid var(--pin-rule);
}
/* Saturday Rating chip — emerald to signal 'our proprietary metric'. */
.pin-chip--sr {
  background: var(--pin-emerald);
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
/* Live SP chip — bright accent so a punter sees the current price
   immediately. Tabular nums so 5/2 and 10/1 align cleanly. */
.pin-chip--sp {
  background: var(--pin-ink);
  color: var(--pin-gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* ── Editorial star rating row ─────────────────────────
   Editor's 1-5 conviction in the horse. Sits between the head
   row + the pedigree line so the reader's eye lands on it
   alongside the horse's name. ★★★★☆ visual, gold filled, muted
   empty, with a small lowercase label so we don't repeat the
   word 'stars'. */
.pin-runner-card__stars {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  font-family: var(--font-display, Georgia, serif);
  line-height: 1;
}
.pin-runner-card__stars-filled {
  color: var(--pin-gold);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(212, 175, 55, 0.10);
}
.pin-runner-card__stars-empty {
  color: var(--pin-ink-40);
  font-size: 20px;
  letter-spacing: 0.02em;
}
.pin-runner-card__stars-lbl {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
}
.pin-runner-card--fox .pin-runner-card__stars-filled {
  filter: brightness(1.05);
}

/* Pedigree line */
.pin-runner-card__pedigree {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 14px;
  color: var(--pin-gold-ink);
  margin: 0 0 14px;
}

/* Ratings strip (OFR / RPR / TS with stat bars) */
.pin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  background: var(--pin-paper-warm);
  border-radius: 10px;
}
.pin-stat {
  position: relative;
}
.pin-stat__lbl {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  margin-bottom: 4px;
}
.pin-stat__val {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px; font-weight: 800;
  line-height: 1;
  color: var(--pin-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.pin-stat--top .pin-stat__val { color: var(--pin-gold-ink); }
.pin-stat__bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.pin-stat__bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--pin-ink-40);
  border-radius: 2px;
  /* width is set inline via style="--w: NN%" */
  width: var(--w, 0%);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-stat--top .pin-stat__bar-fill {
  background: linear-gradient(90deg, var(--pin-gold), var(--pin-gold-ink));
}

/* Connections row (jockey · trainer · form · last run) */
.pin-runner-card__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 13px;
  color: var(--pin-ink-70);
  margin: 0 0 14px;
}
.pin-runner-card__meta strong {
  color: var(--pin-ink);
  font-weight: 700;
}
.pin-runner-card__meta-sep {
  color: var(--pin-rule-strong);
}

/* Editorial / spotlight note */
.pin-runner-card__note {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pin-ink);
  margin: 0 0 12px;
  border-left: 3px solid var(--pin-rule-strong);
  padding-left: 14px;
}
.pin-runner-card--fox .pin-runner-card__note {
  border-left-color: var(--pin-gold);
}

/* Stable tour / quote (italic side-note) */
.pin-runner-card__quote {
  font-style: italic;
  font-size: 13px;
  color: var(--pin-ink-70);
  margin: 0;
  padding: 8px 12px;
  background: var(--pin-paper-warm);
  border-radius: 6px;
  border-left: 2px solid var(--pin-gold);
}


/* ═══════════════════════════════════════════════════════════
   SCENE 4 — COMPARISON MATRIX (top picks side-by-side)
   ═══════════════════════════════════════════════════════════ */
.pin-compare {
  background: #FFFFFF;
  border: 1px solid var(--pin-rule);
  border-radius: 14px;
  padding: 20px;
  overflow-x: auto;
}
.pin-compare__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.pin-compare__th,
.pin-compare__td {
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}
.pin-compare__th {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  border-bottom: 1px solid var(--pin-rule);
  padding-bottom: 8px;
}
.pin-compare__td {
  border-top: 1px solid var(--pin-rule);
}
.pin-compare__horse {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 800;
  font-size: 15px;
  color: var(--pin-ink);
}
.pin-compare__horse-num {
  font-size: 11px;
  color: var(--pin-ink-40);
  margin-right: 6px;
  font-weight: 700;
}
.pin-compare__value {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 800;
  font-size: 17px;
  color: var(--pin-ink);
  font-variant-numeric: tabular-nums;
}
.pin-compare__value--leader {
  color: var(--pin-gold-ink);
  background: var(--pin-gold-wash);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════════
   SCENE 5 — DRAW + GOING
   ═══════════════════════════════════════════════════════════ */
.pin-draw {
  background: var(--pin-paper-warm);
  border-radius: 14px;
  padding: 20px;
}
.pin-draw__chip-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 18px;
}
.pin-draw__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #FFFFFF;
  border: 1px solid var(--pin-rule);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.pin-draw__chip strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px;
  color: var(--pin-ink);
}
.pin-draw__stalls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}
.pin-draw__stall {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px;
  background: #FFFFFF;
  border: 1px solid var(--pin-rule);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--pin-ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pin-draw__stall:hover {
  border-color: var(--pin-gold);
  transform: translateY(-1px);
}
.pin-draw__stall--fox {
  border-color: var(--pin-gold);
  background: var(--pin-gold-wash);
}
.pin-draw__stall-num {
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px; font-weight: 800;
  color: var(--pin-gold-ink);
  letter-spacing: -0.01em;
}
.pin-draw__stall-horse {
  display: block;
  font-size: 10px;
  color: var(--pin-ink-70);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════
   SCENE 6 — HONEST RECORD
   ═══════════════════════════════════════════════════════════ */
.pin-honest {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .pin-honest { grid-template-columns: 1fr 1fr; }
}
.pin-honest__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 22px;
}
.pin-honest__lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pin-gold);
  margin: 0 0 8px;
}
.pin-honest__val {
  font-family: var(--font-display, Georgia, serif);
  font-size: 32px; font-weight: 800;
  color: var(--pin-hero-ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.pin-honest__note {
  font-size: 14px;
  color: var(--pin-hero-mute);
  margin: 0;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   SCENE 7 — VERDICT + BET CARD (closing scene)
   ═══════════════════════════════════════════════════════════ */
.pin-verdict-quote {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.35;
  color: var(--pin-ink);
  margin: 0 0 32px;
  padding: 12px 0 12px 24px;
  border-left: 5px solid var(--pin-gold);
  max-width: 50ch;
  position: relative;
}
.pin-verdict-quote::before {
  content: '\201C';
  font-family: var(--font-display, Georgia, serif);
  font-style: normal;
  font-size: 1.8em;
  font-weight: 900;
  color: var(--pin-gold-ink);
  line-height: 0;
  vertical-align: -0.22em;
  margin-right: 0.06em;
}
.pin-verdict-quote::after {
  content: '\201D';
  font-family: var(--font-display, Georgia, serif);
  font-style: normal;
  font-size: 1.8em;
  font-weight: 900;
  color: var(--pin-gold-ink);
  line-height: 0;
  vertical-align: -0.22em;
  margin-left: 0.06em;
}

.pin-ticket {
  background: #FFFFFF;
  border: 1px dashed var(--pin-gold-ink);
  border-radius: 14px;
  padding: 24px;
  max-width: 520px;
}
.pin-ticket__lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pin-gold-ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--pin-rule-strong);
}
.pin-ticket__list {
  list-style: none;
  padding: 0; margin: 0;
}
.pin-ticket__line {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 15px;
  padding: 8px 0;
  color: var(--pin-ink);
  border-top: 1px dashed var(--pin-rule);
  letter-spacing: 0;
}
.pin-ticket__line:first-child { border-top: 0; }
.pin-ticket__foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--pin-rule-strong);
  font-size: 11px;
  color: var(--pin-ink-40);
}


/* ═══════════════════════════════════════════════════════════
   FOOT — back link + meta
   ═══════════════════════════════════════════════════════════ */
.pin-foot {
  padding: 36px 20px 56px;
  border-top: 1px solid var(--pin-rule);
}
.pin-foot__inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.pin-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: #FFFFFF;
  border: 1px solid var(--pin-rule);
  border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pin-ink);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pin-back:hover {
  background: var(--pin-gold-wash);
  border-color: var(--pin-gold-ink);
  color: var(--pin-gold-ink);
}
.pin-foot__meta {
  font-size: 11px;
  color: var(--pin-ink-40);
}


/* ═══════════════════════════════════════════════════════════
   GALLERY (pin_list page)
   ═══════════════════════════════════════════════════════════ */
.pin-gallery {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 20px;
}
.pin-gallery__header {
  text-align: center;
  margin-bottom: 36px;
}
.pin-gallery__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--pin-gold-ink);
  margin-bottom: 10px;
}
.pin-gallery__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 900;
  margin: 0 0 12px;
  letter-spacing: -0.025em;
  line-height: 1;
}
.pin-gallery__lede {
  font-size: 16px;
  color: var(--pin-ink-70);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}
.pin-gallery__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .pin-gallery__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .pin-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
.pin-gallery__card {
  display: block;
  padding: 24px;
  background: #FFFFFF;
  border: 1px solid var(--pin-rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--pin-ink);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.pin-gallery__card:hover {
  border-color: var(--pin-gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.12);
}
.pin-gallery__card-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.pin-gallery__card-deck {
  font-style: italic;
  color: var(--pin-ink-70);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.pin-gallery__card-meta {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pin-gold-ink);
}
.pin-gallery__empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--pin-ink-40);
  font-size: 15px;
  font-style: italic;
}


/* Wrapper for the featured-tip billboard on the Pin DETAIL
   page. /pin/ index already provides .pin-gallery padding,
   but the cinematic 7-scene detail flows full-bleed, so the
   billboard needs its own page-width gutter when it sits as
   a cross-promo beat between the close scene and the footer. */
.pin-feature-bay {
  background: var(--pin-paper);
  padding: 8px 24px 32px;
}
.pin-feature-bay__inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   FEATURED-TIP BILLBOARD — Fox's Race of the Week
   Cinematic gold-on-dark banner on /pin/ between the page
   header and the gallery grid. Drives traffic into the editor-
   curated /races/big-race/featured-tip/ page.
   ─────────────────────────────────────────────────────────── */
.pin-feature-billboard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 0 0 32px;
  padding: 22px 26px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 80% at 12% 50%, rgba(212, 175, 55, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 40% 90% at 85% 100%, rgba(192, 57, 43, 0.16) 0%, transparent 60%),
    linear-gradient(135deg, #0E1320 0%, #1A2233 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  color: var(--pin-hero-ink);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.pin-feature-billboard::before {
  /* Subtle diagonal grain so the dark surface doesn't read flat. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.015) 0%, rgba(255, 255, 255, 0.015) 2px,
    transparent 2px, transparent 6px
  );
  pointer-events: none;
}
.pin-feature-billboard:hover,
.pin-feature-billboard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pin-gold);
  box-shadow: 0 14px 36px -16px rgba(212, 175, 55, 0.45);
  outline: none;
}

.pin-feature-billboard__emblem {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px;
}
.pin-feature-billboard__rosette {
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.30));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-feature-billboard:hover .pin-feature-billboard__rosette {
  transform: rotate(8deg) scale(1.04);
}

.pin-feature-billboard__body {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.pin-feature-billboard__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pin-gold);
}
.pin-feature-billboard__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pin-gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
}
.pin-feature-billboard__title {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--pin-hero-ink);
}
.pin-feature-billboard__meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--pin-hero-mute);
  font-weight: 500;
}
.pin-feature-billboard__meta strong {
  color: var(--pin-gold);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pin-feature-billboard__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 999px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0.10em;
  color: var(--pin-gold);
  white-space: nowrap;
  transition: background 0.2s ease;
}
.pin-feature-billboard:hover .pin-feature-billboard__cta {
  background: rgba(212, 175, 55, 0.22);
}
.pin-feature-billboard__cta-arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.22s ease;
}
.pin-feature-billboard:hover .pin-feature-billboard__cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .pin-feature-billboard {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "emblem body"
      "cta    cta";
    gap: 16px;
    padding: 18px 18px 16px;
  }
  .pin-feature-billboard__emblem { grid-area: emblem; width: 60px; height: 60px; }
  .pin-feature-billboard__body   { grid-area: body; }
  .pin-feature-billboard__cta    {
    grid-area: cta;
    justify-self: stretch;
    justify-content: center;
  }
}


/* ═══════════════════════════════════════════════════════════
   RUNNER CARD V2 — tabbed AI-first layout
   Sits ON TOP of (and replaces in-place) the legacy
   .pin-runner-card__* rules above. The legacy header/stats
   rules are kept so older Pins still render if templates
   are mixed during deploys.
   ─────────────────────────────────────────────────────────── */

/* Card header cluster: saddle-cloth block + identity + badges. */
.pin-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 14px;
}
.pin-card-head__num {
  display: flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 10px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 26px; font-weight: 900;
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(0, 0, 0, 0.10);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.10);
}
.pin-card-head__id { min-width: 0; }
.pin-card-head__meta {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  margin: 0 0 4px;
}
.pin-card-head__meta abbr { text-decoration: none; }
.pin-card-head__name {
  margin: 0 0 8px;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 900;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--pin-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pin-card-head__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.pin-card-head__name a:hover { border-bottom-color: var(--pin-gold-ink); }

/* Silk badge sitting flush before the horse name.
   Two render paths mirror the racecard silk atom: a real API
   silk image when silk_url is populated, otherwise a stylised
   colour-block fallback driven by silk_color + silk_secondary.
   Sized to read against a clamp(22..30) Playfair name. */
.pin-card-head__silk {
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 36px;
  border-radius: 4px 4px 6px 6px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  vertical-align: middle;
  object-fit: cover;
  background-color: #FFFFFF;
}
.pin-card-head__silk--fallback {
  position: relative;
  overflow: hidden;
}
/* Diagonal accent band so the fallback silk feels racing-shirt-y
   without the SVG-pattern variety of the full racecard atom.
   Inline custom property --silk-accent comes from silk_secondary. */
.pin-card-head__silk--fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 0%,
    transparent 38%,
    var(--silk-accent, #FFFFFF) 38%,
    var(--silk-accent, #FFFFFF) 62%,
    transparent 62%,
    transparent 100%);
  opacity: 0.85;
}

/* Fox's conviction strip — gold stars + numeric + label. */
.pin-card-conviction {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'DM Sans', system-ui, sans-serif;
}
.pin-card-conviction__stars {
  font-family: var(--font-display, Georgia, serif);
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.pin-card-conviction__filled { color: var(--pin-gold); }
.pin-card-conviction__empty  { color: var(--pin-ink-40); }
.pin-card-conviction__num {
  font-size: 13px; font-weight: 800;
  color: var(--pin-ink);
  font-variant-numeric: tabular-nums;
}
.pin-card-conviction__lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
}

/* Top-right badge cluster — SR (emerald) + SP (ink/gold). */
.pin-card-head__badges {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
}
.pin-card-badge {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  min-width: 64px;
}
.pin-card-badge__val {
  font-family: var(--font-display, Georgia, serif);
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}
.pin-card-badge__lbl {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.85;
}
.pin-card-badge--sr {
  background: var(--pin-emerald);
  color: #FFFFFF;
}
.pin-card-badge--sp {
  background: var(--pin-ink);
  color: var(--pin-gold);
}

/* Price movement band — steamer (in) vs drifter (out). */
.pin-card-trail {
  margin: -4px 0 14px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.pin-card-trail--in {
  background: rgba(26, 125, 74, 0.10);
  color: var(--pin-emerald);
  border-left: 3px solid var(--pin-emerald);
}
.pin-card-trail--out {
  background: rgba(192, 57, 43, 0.10);
  color: var(--pin-red);
  border-left: 3px solid var(--pin-red);
}

/* Connections grid — Jockey | Trainer | Pedigree.
   Mirrors the rhythm of .pin-card-stats below it: same 3-column
   grid, same uppercase mini-label + primary value pattern. Each
   cell gets equal weight so a punter's eye lands on the people
   names with the same priority as the ratings. Pedigree sits
   last (and widest) — it's editorial colour, not the booking
   the punter clicks. */
.pin-card-conns {
  list-style: none;
  margin: 0 0 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 10px 18px;
  background: rgba(247, 245, 238, 0.5);
  border-radius: 10px;
  border: 1px solid var(--pin-rule);
}
.pin-card-conns__item {
  min-width: 0;
}
.pin-card-conns__lbl {
  display: block;
  margin: 0 0 3px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
}
.pin-card-conns__val {
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pin-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pin-card-conns__val--pedigree {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-weight: 600;
  color: var(--pin-gold-ink);
  white-space: normal;
  line-height: 1.3;
  display: block;
}
/* Inline SVG icon sitting flush with the connection name.
   Sized to read against the 15px DM-Sans value; tinted gold-ink
   so it shares the editorial accent palette without competing
   with the name itself. */
.pin-card-conns__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: var(--pin-gold-ink);
  opacity: 0.7;
}
/* Jockey / trainer profile link — uses the site-wide .connection-link
   class emitted by the {% jockey_link %} / {% trainer_link %} tags,
   but the racecard CSS that styles it isn't loaded on /pin/. Solid
   underline (not dashed) so the link reads as a clear affordance,
   gold-on-hover for the editorial palette. */
.pin-card-conns .connection-link {
  color: var(--pin-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pin-rule-strong);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pin-card-conns .connection-link:hover,
.pin-card-conns .connection-link:focus-visible {
  color: var(--pin-gold-ink);
  border-bottom-color: var(--pin-gold);
}

@media (max-width: 540px) {
  .pin-card-conns {
    grid-template-columns: 1fr;
  }
  .pin-card-conns__val--pedigree {
    white-space: normal;
  }
}

/* Stats grid — TS / RPR / FORM. */
.pin-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px;
  background: var(--pin-paper-warm);
  border-radius: 10px;
}
.pin-card-stat { position: relative; min-width: 0; }
.pin-card-stat__lbl {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  margin: 0 0 4px;
}
.pin-card-stat__val {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 22px; font-weight: 800;
  line-height: 1;
  color: var(--pin-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.pin-card-stat__val--form {
  font-size: 18px;
  letter-spacing: 0.04em;
}
.pin-card-stat--top .pin-card-stat__val { color: var(--pin-gold-ink); }
.pin-card-stat__bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  margin: 0 0 4px;
}
.pin-card-stat__bar-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--pin-ink-40);
  border-radius: 2px;
  width: var(--w, 0%);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pin-card-stat--top .pin-card-stat__bar-fill {
  background: linear-gradient(90deg, var(--pin-gold), var(--pin-gold-ink));
}
.pin-card-stat__bar-fill--form {
  background: linear-gradient(90deg, var(--pin-emerald), var(--pin-emerald-lt));
}
.pin-card-stat__band {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pin-card-stat--top .pin-card-stat__band {
  color: var(--pin-gold-ink);
}

/* Tab strip. */
.pin-card-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 0;
  padding: 0;
  border-bottom: 1px solid var(--pin-rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.pin-card-tabs::-webkit-scrollbar { display: none; }
.pin-card-tab {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.pin-card-tab:hover { color: var(--pin-ink-70); }
.pin-card-tab--active {
  color: var(--pin-gold-ink);
  border-bottom-color: var(--pin-gold);
}
.pin-card-tab:focus-visible {
  outline: 2px solid var(--pin-gold);
  outline-offset: 2px;
  border-radius: 4px 4px 0 0;
}

/* Panels. */
.pin-card-panel {
  padding: 16px 0 4px;
}
.pin-card-panel[hidden] { display: none; }
.pin-card-panel__empty {
  margin: 0;
  padding: 18px 12px;
  font-size: 13px;
  font-style: italic;
  color: var(--pin-ink-40);
  text-align: center;
  background: var(--pin-paper-warm);
  border-radius: 8px;
}

/* Fox's Verdict box — cream-and-gold editorial pull-out. */
.pin-verdict-box {
  background: linear-gradient(180deg, var(--pin-gold-wash) 0%, var(--pin-paper-warm) 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  padding: 16px 18px;
}
.pin-verdict-box__head {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px dashed rgba(212, 175, 55, 0.5);
}
.pin-verdict-box__brand {
  font-family: var(--font-display, Georgia, serif);
  font-size: 13px; font-weight: 900; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pin-gold-ink);
}
.pin-verdict-box__stars {
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px;
  color: var(--pin-gold);
  letter-spacing: 0.02em;
  line-height: 1;
}
.pin-verdict-box__confidence {
  margin-left: auto;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pin-ink-70);
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
}
.pin-verdict-box__confidence strong {
  color: var(--pin-emerald);
  font-weight: 900;
}
.pin-verdict-box__body {
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--pin-ink);
  margin: 0 0 14px;
}
.pin-verdict-box__body:last-child { margin-bottom: 0; }
.pin-verdict-box__metrics {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pin-verdict-box__metrics > li {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pin-verdict-box__metric-lbl {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
  display: inline-flex; align-items: center; gap: 4px;
}
.pin-verdict-box__metric-val {
  font-family: var(--font-display, Georgia, serif);
  font-size: 14px; font-weight: 800;
  color: var(--pin-ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pin-verdict-box__metric-val--imp-high   { color: var(--pin-emerald); }
.pin-verdict-box__metric-val--imp-med    { color: var(--pin-gold-ink); }
.pin-verdict-box__metric-val--imp-low    { color: var(--pin-ink-70); }
.pin-verdict-box__metric-val--imp-none   { color: var(--pin-red); }
.pin-verdict-box__metric-val--ts-likely   { color: var(--pin-emerald); }
.pin-verdict-box__metric-val--ts-unclear  { color: var(--pin-gold-ink); }
.pin-verdict-box__metric-val--ts-doubtful { color: var(--pin-red); }

/* Career Form panel. */
.pin-career-stats {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
}
.pin-career-stats > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--pin-paper-warm);
  border-radius: 6px;
}
.pin-career-stats__lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
}
.pin-career-stats__val {
  font-family: var(--font-display, Georgia, serif);
  font-size: 16px; font-weight: 800;
  color: var(--pin-ink);
  font-variant-numeric: tabular-nums;
}
.pin-career-stats__sub {
  margin: 14px 0 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pin-ink-40);
}
.pin-career-stats__notable {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--pin-ink);
}

/* Recent Runs panel. */
.pin-recent-form {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--pin-ink);
  line-height: 1.55;
}
.pin-recent-form strong {
  font-weight: 800;
  color: var(--pin-ink-70);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-right: 6px;
}
.pin-recent-comment {
  margin: 0;
  padding: 12px 14px;
  font-family: 'Iowan Old Style', 'Charter', Georgia, serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pin-ink);
  background: var(--pin-paper-warm);
  border-left: 3px solid var(--pin-rule-strong);
  border-radius: 0 6px 6px 0;
}

/* ── Card V2 responsive collapse ─────────────────────── */
@media (max-width: 540px) {
  .pin-card-head {
    grid-template-columns: auto 1fr;
  }
  .pin-card-head__badges {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
  }
  .pin-verdict-box__metrics {
    grid-template-columns: 1fr;
  }
  .pin-career-stats {
    grid-template-columns: 1fr;
  }
}