/* ──────────────────────────────────────────────────────────
   Horse Explorer — Phase 7
   ──────────────────────────────────────────────────────────
   Sits next to race_explorer.css. Reuses .rx-panel + .rx-panel__head
   primitives for visual continuity; hx-* classes own the layout +
   per-lens visuals specific to the career view.

   Layout:
     • Hero strip (full width)
     • Two-column grid: centre (1fr) + side rail (360px)
       • Centre top:    Career Trajectory (large SVG)
       • Centre bottom: Course Record | Connections History (50/50)
       • Side rail:     Going + Distance Distribution (stacked)
     • Wide bottom:     Recent Runs cards
   ────────────────────────────────────────────────────────── */

/* ── HERO ───────────────────────────────────────────────── */
.hx-hero {
  background: linear-gradient(180deg, #0c0f14 0%, #1a1f29 100%);
  color: #fafaf7;
  padding: 28px 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hx-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
}
.hx-hero__id {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
}
.hx-hero__silk {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--silk-a, #1a3a6b) 0%, var(--silk-a, #1a3a6b) 50%,
                                       var(--silk-b, #fff) 50%, var(--silk-b, #fff) 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.hx-hero__id-text { display: grid; gap: 4px; }
.hx-hero__name {
  margin: 0;
  font-size: 28px; font-weight: 700; letter-spacing: -0.01em;
  color: #fafaf7;
}
.hx-hero__tag {
  margin: 0;
  font-size: 13px; letter-spacing: 0.04em;
  color: rgba(212, 175, 55, 0.92);
}
.hx-hero__meta {
  margin: 0;
  font-size: 12px;
  color: rgba(250, 250, 247, 0.62);
}
.hx-hero__meta-lbl {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px;
  color: rgba(250, 250, 247, 0.42);
  margin-right: 6px;
}
.hx-hero__stats {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.hx-hero__stat {
  display: grid; justify-items: center; gap: 2px;
  padding: 8px 12px; min-width: 64px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.hx-hero__stat strong {
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fafaf7;
}
.hx-hero__stat span {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(250, 250, 247, 0.55);
}
.hx-hero__stat--win strong { color: #d4af37; }
.hx-hero__stat--days strong { color: #e59f31; }
.hx-hero__stat--trend-climbing strong { color: #1A7D4A; }
.hx-hero__stat--trend-fading strong   { color: #C0392B; }
.hx-hero__stat--trend-steady strong   { color: rgba(250, 250, 247, 0.7); }

.hx-hero__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #fafaf7;
  border-radius: 999px;
  font-size: 12px; letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.15s ease;
}
.hx-hero__back:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── PAGE GRID ──────────────────────────────────────────── */
.hx {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  gap: 18px;
}
.hx__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}
.hx__centre { display: grid; gap: 18px; }
.hx__centre-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.hx__side { display: grid; gap: 18px; }

/* ── CAREER TRAJECTORY (centre arena) ──────────────────── */
.hx-career__body { padding: 0 18px 18px; }
.hx-career__chart-wrap {
  position: relative;
  background: #fafaf3;
  border-radius: 10px;
  padding: 12px 16px 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hx-career__chart {
  width: 100%; height: 200px;
  display: block;
}
.hx-career__grid {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.hx-career__grid--mid {
  stroke: rgba(0, 0, 0, 0.16);
  stroke-dasharray: 1 3;
}
.hx-career__line {
  fill: none;
  stroke: #d4af37;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hx-career__or-line {
  fill: none;
  stroke: rgba(26, 125, 74, 0.7);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}
.hx-career__dot {
  stroke: #fff;
  stroke-width: 1.5;
}
.hx-career__dot--win   { fill: #d4af37; }
.hx-career__dot--place { fill: #1A7D4A; }
.hx-career__dot--mid   { fill: #888; }
.hx-career__dot--rear  { fill: #b0a098; }
.hx-career__dot--dnf   { fill: #C0392B; }

.hx-career__legend {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--paper-ink-50, #777);
}
.hx-career__legend li { display: inline-flex; align-items: center; gap: 4px; }
.hx-career__sw {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.hx-career__sw--win   { background: #d4af37; }
.hx-career__sw--place { background: #1A7D4A; }
.hx-career__sw--mid   { background: #888; }
.hx-career__sw--rear  { background: #b0a098; }
.hx-career__sw--dnf   { background: #C0392B; }
.hx-career__sw--or {
  background: transparent;
  border: 1.5px dashed rgba(26, 125, 74, 0.8);
  border-radius: 0;
  width: 12px;
  height: 2px;
}

.hx-career__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}
.hx-career__stat {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
}
.hx-career__stat dt {
  font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-ink-50, #777);
}
.hx-career__stat dd {
  margin: 4px 0 0;
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink-90, #1c1c1c);
}
.hx-career__stat--trend-climbing dd { color: #1A7D4A; }
.hx-career__stat--trend-fading dd   { color: #C0392B; }
.hx-career__stat--trend-steady dd   { color: var(--paper-ink-70, #444); }

.hx-career__empty {
  margin: 18px 0; padding: 20px;
  text-align: center;
  color: var(--paper-ink-50, #777);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}
.hx-career__empty span { font-size: 22px; display: block; margin-bottom: 8px; }

/* ── CONDITIONS LENSES (going + distance, identical shell) ─ */
.hx-conditions__body { padding: 0 14px 14px; }
.hx-conditions__verdict {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  border-left: 3px solid rgba(212, 175, 55, 0.7);
  font-size: 12.5px; line-height: 1.45;
  color: var(--paper-ink-70, #444);
}
.hx-conditions__verdict strong {
  display: block;
  color: var(--paper-ink-90, #1c1c1c);
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.hx-conditions__verdict--specialist,
.hx-conditions__verdict--firm-specialist,
.hx-conditions__verdict--soft-specialist {
  border-left-color: #d4af37;
}
.hx-conditions__verdict--leaning,
.hx-conditions__verdict--firm-leaning,
.hx-conditions__verdict--soft-leaning {
  border-left-color: #e59f31;
}
.hx-conditions__verdict--all-rounder { border-left-color: #1A7D4A; }
.hx-conditions__verdict--mixed,
.hx-conditions__verdict--untested {
  border-left-color: rgba(0, 0, 0, 0.18);
}

.hx-conditions__bars {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 6px;
}
.hx-conditions__bar {
  display: grid;
  grid-template-columns: 110px 1fr 44px 70px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.hx-conditions__bar--na { opacity: 0.5; }
.hx-conditions__bar-lbl {
  font-size: 12px; font-weight: 600;
  color: var(--paper-ink-90, #1c1c1c);
  display: flex; flex-direction: column; gap: 1px;
}
.hx-conditions__bar-detail {
  font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--paper-ink-50, #777);
  font-weight: 400;
}
.hx-conditions__bar-track {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.hx-conditions__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #d4af37;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.hx-conditions__bar--gold  .hx-conditions__bar-fill { background: #d4af37; }
.hx-conditions__bar--amber .hx-conditions__bar-fill { background: #e59f31; }
.hx-conditions__bar--rust  .hx-conditions__bar-fill { background: #C0392B; }
.hx-conditions__bar--na    .hx-conditions__bar-fill { background: rgba(0, 0, 0, 0.12); }
.hx-conditions__bar-num {
  text-align: right;
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink-90, #1c1c1c);
}
.hx-conditions__bar-runs {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink-50, #777);
  text-align: right;
  letter-spacing: 0.02em;
}
.hx-conditions__empty {
  margin: 0; padding: 16px 8px;
  text-align: center;
  color: var(--paper-ink-50, #777);
  font-size: 12.5px;
}

/* ── COURSE RECORD ─────────────────────────────────────── */
.hx-courses__body { padding: 0 16px 16px; }
.hx-courses__verdict {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 8px;
  border-left: 3px solid rgba(212, 175, 55, 0.7);
  font-size: 12.5px;
  color: var(--paper-ink-70, #444);
  line-height: 1.45;
}
.hx-courses__hl {
  background: rgba(212, 175, 55, 0.18);
  padding: 1px 6px;
  border-radius: 4px;
  color: #6b5310;
  font-weight: 600;
}
.hx-courses__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
  max-height: 360px; overflow-y: auto;
}
.hx-courses__row {
  display: grid;
  grid-template-columns: 1fr 80px 40px 64px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 12px;
}
.hx-courses__row--specialist {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.4);
}
.hx-courses__name {
  font-weight: 600;
  color: var(--paper-ink-90, #1c1c1c);
  display: inline-flex; align-items: center; gap: 6px;
}
.hx-courses__badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 6px;
  background: #d4af37;
  color: #1c1c1c;
  border-radius: 4px;
}
.hx-courses__track {
  position: relative; height: 7px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
}
.hx-courses__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #d4af37;
  border-radius: 999px;
}
.hx-courses__row--gold  .hx-courses__fill { background: #d4af37; }
.hx-courses__row--amber .hx-courses__fill { background: #e59f31; }
.hx-courses__row--rust  .hx-courses__fill { background: #C0392B; }
.hx-courses__num {
  text-align: right;
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hx-courses__runs {
  font-size: 10.5px;
  color: var(--paper-ink-50, #777);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hx-courses__empty {
  margin: 0; padding: 16px;
  text-align: center;
  color: var(--paper-ink-50, #777);
  font-size: 12.5px;
}

/* ── CONNECTIONS HISTORY ───────────────────────────────── */
.hx-connections__body {
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hx-connections__col { display: grid; gap: 6px; }
.hx-connections__sub {
  margin: 0;
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-ink-50, #777);
}
.hx-connections__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 4px;
  max-height: 320px; overflow-y: auto;
}
.hx-connections__row {
  display: grid;
  grid-template-columns: 1fr 60px 36px 60px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 11.5px;
}
.hx-connections__row--current {
  background: rgba(26, 125, 74, 0.06);
  border-color: rgba(26, 125, 74, 0.32);
}
.hx-connections__name {
  font-weight: 600;
  color: var(--paper-ink-90, #1c1c1c);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-connections__badge {
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em;
  padding: 1px 5px;
  background: #1A7D4A;
  color: #fff;
  border-radius: 4px;
}
.hx-connections__track {
  position: relative; height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
}
.hx-connections__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: #d4af37;
  border-radius: 999px;
}
.hx-connections__row--gold  .hx-connections__fill { background: #d4af37; }
.hx-connections__row--amber .hx-connections__fill { background: #e59f31; }
.hx-connections__row--rust  .hx-connections__fill { background: #C0392B; }
.hx-connections__num {
  text-align: right;
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hx-connections__runs {
  font-size: 10px;
  color: var(--paper-ink-50, #777);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hx-connections__empty {
  margin: 0; padding: 16px;
  text-align: center;
  color: var(--paper-ink-50, #777);
  font-size: 12.5px;
}

/* ── RECENT RUNS STRIP ─────────────────────────────────── */
.hx-runs__body { padding: 0 18px 18px; }
.hx-runs__list {
  list-style: none; margin: 0; padding: 4px 0 12px;
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.hx-runs__card {
  flex: 0 0 270px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  border-top: 3px solid #888;
  display: grid; gap: 6px;
}
.hx-runs__card--win   { border-top-color: #d4af37; }
.hx-runs__card--place { border-top-color: #1A7D4A; }
.hx-runs__card--mid   { border-top-color: #888; }
.hx-runs__card--rear  { border-top-color: #b0a098; }
.hx-runs__card--dnf   { border-top-color: #C0392B; }

.hx-runs__head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.hx-runs__pos {
  font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink-90, #1c1c1c);
}
.hx-runs__card--win .hx-runs__pos { color: #b48a14; }
.hx-runs__card--dnf .hx-runs__pos { color: #C0392B; }
.hx-runs__date { text-align: right; }
.hx-runs__date-main {
  display: block;
  font-size: 11px;
  color: var(--paper-ink-70, #444);
}
.hx-runs__date-sub {
  display: block;
  font-size: 9.5px;
  color: var(--paper-ink-50, #777);
  letter-spacing: 0.04em;
}
.hx-runs__course {
  margin: 0;
  font-size: 13px; font-weight: 600;
  color: var(--paper-ink-90, #1c1c1c);
}
.hx-runs__chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.hx-runs__chip {
  font-size: 10px; letter-spacing: 0.02em;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  color: var(--paper-ink-70, #444);
}
.hx-runs__chip--gear {
  background: rgba(192, 57, 43, 0.10);
  color: #8a2820;
}
.hx-runs__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.hx-runs__beaten {
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink-70, #444);
}
.hx-runs__or {
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink-90, #1c1c1c);
}
.hx-runs__or-delta {
  font-size: 10px; font-weight: 700;
  margin-left: 3px;
}
.hx-runs__or-delta--up   { color: #1A7D4A; }
.hx-runs__or-delta--down { color: #C0392B; }
.hx-runs__or-delta--flat { color: var(--paper-ink-50, #777); }
.hx-runs__jockey {
  margin: 0;
  font-size: 11px;
  color: var(--paper-ink-70, #444);
}
.hx-runs__comment {
  margin: 0;
  font-size: 11.5px; line-height: 1.4;
  color: var(--paper-ink-70, #444);
  font-style: italic;
}
.hx-runs__empty {
  margin: 0; padding: 24px;
  text-align: center;
  color: var(--paper-ink-50, #777);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hx__grid { grid-template-columns: 1fr; }
  .hx__centre-row { grid-template-columns: 1fr; }
  .hx-connections__body { grid-template-columns: 1fr; }
  .hx-hero__inner { grid-template-columns: 1fr; }
  .hx-hero__stats { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .hx { padding: 14px; gap: 14px; }
  .hx-career__stats { grid-template-columns: repeat(3, 1fr); }
  .hx-conditions__bar {
    grid-template-columns: 90px 1fr 40px;
    grid-template-rows: auto auto;
  }
  .hx-conditions__bar-runs {
    grid-column: 1 / -1;
    text-align: left;
  }
}