/* ─────────────────────────────────────────────────────────────
   CHAMBER VERDICT — inline section rendered on every racecard.
   Reuses tokens from grand_national.css (gn-container, gn-section-*)
   and the global colour vars. All chamber-specific class names use
   the .cv-* prefix for isolation; no risk of clashing with .sim-*
   on the standalone /simulation/chamber/ landing.
───────────────────────────────────────────────────────────── */

/* The Chamber sections sit between editorial sections (AI Intelligence,
   Decision Hub) so they need a distinct visual identity that reads as
   "computed output" rather than "editorial pick". The treatment below
   leans into instrument-panel cues: cool navy gradient base, faint
   scan-line texture, and a gold gradient top edge that fades at the
   sides — visually different from the warm gold tints of the editorial
   sections without going off-brand. */
.cv {
  padding: 36px 0 30px;
  margin: 28px 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.10), transparent 55%),
    linear-gradient(180deg, rgba(6,9,20,0.94) 0%, rgba(8,12,24,0.62) 100%);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg,
    transparent 4%,
    rgba(212,175,55,0.20) 14%,
    var(--c-gold) 50%,
    rgba(212,175,55,0.20) 86%,
    transparent 96%) 1;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  position: relative;
  overflow: hidden;
}

/* Scan-line texture — very low alpha so it reads as paper-grain
   rather than tech-decoration. Disable for users who'd find the
   pattern visually busy. */
.cv::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0,
      transparent 22px,
      rgba(212,175,55,0.018) 23px,
      transparent 24px);
  pointer-events: none;
  opacity: 0.85;
}
@media (prefers-contrast: more) {
  .cv::before { display: none; }
}

/* Adjacent Chamber sections (verdict + signals) collapse the gap
   between them so they read as one unit. The signals section gets
   a hairline separator instead of a fresh top edge. */
.cv--verdict + .cv--signals {
  margin-top: -28px;
  border-top: 1px dotted rgba(212,175,55,0.20);
  border-image: none;
  padding-top: 22px;
}

/* ── Header ─────────────────────────────────────────────── */
.cv__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.cv__title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Eyebrow chip — instrument-panel feel: tighter letter-spacing,
   slightly squarer shape, and a rotated-square sigil so it reads as
   a "computed output" badge rather than an editorial pull-quote. */
.cv__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 5px 13px 5px 11px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 4px;                      /* was 99px — squarer reads more "tech" */
  background: rgba(212, 175, 55, 0.07);
  width: fit-content;
}
.cv__eyebrow-dot {
  width: 7px; height: 7px;
  background: var(--c-gold);
  transform: rotate(45deg);                /* diamond — instrument tick mark */
  box-shadow: 0 0 8px rgba(212,175,55,0.55);
  animation: cvDotPulse 2.2s ease-in-out infinite;
}
@keyframes cvDotPulse {
  0%,100% { opacity: 1;   transform: rotate(45deg) scale(1);    }
  50%     { opacity: 0.55; transform: rotate(45deg) scale(1.25); }
}

.cv__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 700;
  color: var(--c-text-95, #fff);
  margin: 0;
  line-height: 1.15;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cv__data-thin {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  color: #E0AA3E;
  background: rgba(224,170,62,0.08);
  border: 1px solid rgba(224,170,62,0.30);
  cursor: help;
}

.cv-rerun {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 99px;
  background: rgba(212, 175, 55, 0.05);
  color: var(--c-gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  white-space: nowrap;
}
.cv-rerun:hover {
  background: rgba(212, 175, 55, 0.13);
  border-color: var(--c-gold);
}
.cv-rerun:active { transform: scale(0.97); }
.cv-rerun.is-loading .cv-rerun__icon {
  animation: cvSpin 0.8s linear infinite;
}
@keyframes cvSpin { to { transform: rotate(-360deg); } }

/* ── Tier 1: Hero ──────────────────────────────────────── */
.cv-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.32);
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  transition: opacity 0.25s;
}
.cv-hero.is-fading { opacity: 0.35; }

.cv-hero__silk {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--silk-bg, #1b3f92);
  border: 3px solid var(--silk-border, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  box-shadow: 0 0 22px rgba(212,175,55,0.18);
  flex-shrink: 0;
}

.cv-hero__body {
  min-width: 0;
}
.cv-hero__horse {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--c-text-100, #fff);
  margin: 0 0 8px;
  line-height: 1.05;
}

.cv-band {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 99px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  color: var(--c-gold);
  margin-bottom: 10px;
}
.cv-band--lg { font-size: 11px; padding: 5px 14px; }

.cv-hero__summary {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 8px 0 12px;
  max-width: 60ch;
}

.cv-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cv-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
}
.cv-pill--quiet {
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

/* Confidence ring */
.cv-ring {
  position: relative;
  width: 96px; height: 96px;
  flex-shrink: 0;
}
.cv-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.cv-ring__track {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 6;
  fill: none;
}
.cv-ring__fill {
  stroke: url(#cvRingGradient);
  stroke: var(--c-gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 264;
  fill: none;
  transition: stroke-dashoffset 0.8s ease;
}
.cv-ring__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.cv-ring__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-gold);
  letter-spacing: -0.02em;
}
.cv-ring__label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* ── Tier 2: Triple cards ──────────────────────────────── */
.cv-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.cv-side {
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-side--danger { border-top-color: #E05C4C; }
.cv-side--value  { border-top-color: #2DBD7A; }
.cv-side--lens   { border-top-color: var(--c-gold); }

.cv-side__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.cv-side--danger .cv-side__label { color: #E05C4C; }
.cv-side--value  .cv-side__label { color: #2DBD7A; }
.cv-side--lens   .cv-side__label { color: var(--c-gold); }

.cv-side__horse {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text-100, #fff);
  margin: 0;
  line-height: 1.15;
}
.cv-side__copy {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
  margin: 0;
}
.cv-side__meta {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gold);
  margin-top: 4px;
}
.cv-side__link {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gold);
  text-decoration: none;
  margin-top: 4px;
}
.cv-side__link:hover { text-decoration: underline; }

/* ── Tier 3 & 4: Collapsibles ──────────────────────────── */
.cv-fold {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.cv-fold + .cv-fold { margin-top: 10px; }

.cv-fold__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.18s;
}
.cv-fold__summary::-webkit-details-marker { display: none; }
.cv-fold__summary:hover { background: rgba(255,255,255,0.025); }

.cv-fold__icon {
  font-size: 16px;
  line-height: 1;
}
.cv-fold__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text-100, #fff);
}
.cv-fold__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  grid-column: 2;
  grid-row: 2;
  margin-top: 2px;
}
.cv-fold__chev {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  transition: transform 0.2s;
}
details[open] > .cv-fold__summary > .cv-fold__chev {
  transform: rotate(180deg);
}

.cv-fold__body {
  padding: 4px 18px 22px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 18px;
}

/* ── Explainer cards (formula breakdown) ──────────────── */
.cv-explainers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cv-explainer {
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(212,175,55,0.30);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv-explainer__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cv-explainer__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
}
.cv-explainer__band {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(212,175,55,0.10);
  color: var(--c-gold);
  border: 1px solid rgba(212,175,55,0.22);
  white-space: nowrap;
}
.cv-explainer[data-band="Dominant"] .cv-explainer__band       { background: rgba(45,189,122,0.12); color: #2DBD7A; border-color: rgba(45,189,122,0.30); }
.cv-explainer[data-band="High conviction"] .cv-explainer__band{ background: rgba(212,175,55,0.12); color: var(--c-gold); border-color: rgba(212,175,55,0.30); }
.cv-explainer[data-band="Live signal"] .cv-explainer__band    { background: rgba(80,140,255,0.10); color: #6FA4FF; border-color: rgba(80,140,255,0.30); }
.cv-explainer[data-band="Speculative"] .cv-explainer__band    { background: rgba(224,170,62,0.10); color: #E0AA3E; border-color: rgba(224,170,62,0.30); }
.cv-explainer[data-band="Low conviction"] .cv-explainer__band { background: rgba(224,92,76,0.10); color: #E05C4C; border-color: rgba(224,92,76,0.30); }
.cv-explainer[data-band="No data"] .cv-explainer__band        { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.10); }

.cv-explainer__value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-text-100, #fff);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cv-explainer__bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.cv-explainer__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(212,175,55,0.6), var(--c-gold));
  border-radius: 99px;
}
.cv-explainer__bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.04em;
}
.cv-explainer p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

/* ── Telemetry sidebar ────────────────────────────────── */
.cv-telemetry {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(0,0,0,0.22);
}
.cv-telemetry__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 12px;
}
.cv-telemetry__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.cv-telem {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid var(--c-gold);
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
}
.cv-telem__label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 4px;
}
.cv-telem__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-gold);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}
.cv-telem p {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.cv-telemetry__link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gold);
  text-decoration: none;
}
.cv-telemetry__link:hover { text-decoration: underline; }

/* ── Tier 4: Outcome matrix ───────────────────────────── */
.cv-matrix {
  padding: 6px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cv-matrix__row {
  display: grid;
  grid-template-columns: 36px 1fr 2fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
}
.cv-matrix__row:first-child {
  border-color: rgba(212,175,55,0.25);
  background: rgba(212,175,55,0.05);
}
.cv-matrix__rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.cv-matrix__row:first-child .cv-matrix__rank {
  background: var(--c-gold);
  color: #11151f;
}
.cv-matrix__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-100, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-matrix__bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.cv-matrix__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(212,175,55,0.45), var(--c-gold));
  border-radius: 99px;
}
.cv-matrix__score {
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.25);
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cv-matrix__odds {
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.60);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Footer ───────────────────────────────────────────── */
.cv-footer {
  margin: 18px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cv-footer__icon { color: var(--c-gold); font-size: 14px; }
.cv-footer a {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.30);
}
.cv-footer a:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 920px) {
  .cv-trio { grid-template-columns: 1fr; }
  .cv-fold__body { grid-template-columns: 1fr; }
  .cv-explainers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .cv-hero {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    padding: 18px;
  }
  .cv-hero__silk { width: 56px; height: 56px; font-size: 20px; }
  .cv-ring {
    grid-column: 1 / -1;
    width: 84px; height: 84px;
    margin-top: 4px;
  }
  .cv-explainers { grid-template-columns: 1fr; }
  .cv-matrix__row {
    grid-template-columns: 28px 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px;
  }
  .cv-matrix__bar { grid-column: 1 / -1; }
  .cv-matrix__odds { display: none; }
}


/* ════════════════════════════════════════════════════════════════
 *  PAPER-CREAM THEME OVERRIDE
 *  ─────────────────────────
 *  Transforms the chamber verdict from "dark instrument panel" into
 *  a premium editorial card with a quotable lens-analysis hero.
 *
 *  Same DOM, same class names, same JS hooks — only the visual
 *  treatment changes. Override block at the end of the file wins via
 *  cascade order; the dark-theme rules above are preserved for
 *  historical context but unused at runtime.
 *
 *  Inspired by the Mr Fox verdict card on /big-race/:
 *    - Avatar (silk) + name + chip composition at the top
 *    - Big gold quote marks around the analysis body
 *    - Subtle confidence ring + meta strip at the foot
 *  But on a LIGHT surface, so the lens analysis breathes and reads
 *  as editorial rather than technical.
 * ══════════════════════════════════════════════════════════════ */

/* ── Section shell ─────────────────────────────────────────────
 * Paper-cream surface with a soft radial gold wash at the top —
 * gives the section gravity without going dark. */
.cv {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 60%),
    #FAFAF7;
  border-image: none;
  border-top:    1px solid #E7E5DD;
  border-bottom: 1px solid #E7E5DD;
}
.cv::before { display: none; }       /* drop the dark-theme scanline texture */

.cv--verdict + .cv--signals {
  border-top: 1px dotted rgba(212, 175, 55, 0.30);
}

/* ── Header ─────────────────────────────────────────────── */
.cv__eyebrow {
  color: #9C7B12;
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.30);
}
.cv__eyebrow-dot { box-shadow: 0 0 6px rgba(212, 175, 55, 0.45); }
.cv__title { color: #11151F; }
.cv__data-thin {
  background: rgba(212, 175, 55, 0.10);
  color: #9C7B12;
  border-color: rgba(212, 175, 55, 0.35);
}
.cv-rerun {
  color: #9C7B12;
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.08);
}
.cv-rerun:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: #D4AF37;
}

/* ── Hero card ──────────────────────────────────────────────
 * White surface, soft shadow, gold accent bar across the top so the
 * card lifts off the cream section as the focal object. */
.cv-hero {
  background: #FFFFFF;
  border: 1px solid #E7E5DD;
  box-shadow: 0 6px 22px rgba(17, 21, 31, 0.06);
  position: relative;
  overflow: hidden;
}
.cv-hero::before {
  /* 2px gold-fade accent bar across the top of the card. */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D4AF37 50%, transparent);
  border-radius: 1px;
}

.cv-hero__silk {
  border-color: rgba(17, 21, 31, 0.10);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.20);
}
.cv-hero__horse { color: #11151F; }

.cv-band {
  color: #9C7B12;
  background: rgba(212, 175, 55, 0.10);
  border-color: rgba(212, 175, 55, 0.35);
}

/* The verdict body becomes the quotable centerpiece —
 * italic Playfair, gold opening + closing quote marks, restrained
 * line-length so the eye reads it as a statement. */
.cv-hero__summary {
  position: relative;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: #11151F;
  max-width: 64ch;
  padding: 4px 28px 6px;
  margin: 14px 0 12px;
}
.cv-hero__summary::before,
.cv-hero__summary::after {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-style: normal;
  color: rgba(212, 175, 55, 0.85);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  position: absolute;
}
.cv-hero__summary::before {
  content: '\201C';                  /* left double-quote */
  left: -4px;
  top: -6px;
}
.cv-hero__summary::after {
  content: '\201D';                  /* right double-quote */
  right: -4px;
  bottom: -14px;
}

.cv-hero__meta {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed #E7E5DD;
}
.cv-pill {
  background: #F7F5EE;
  border-color: #E7E5DD;
  color: #11151F;
}
.cv-pill--quiet {
  background: transparent;
  color: #41474F;
}

/* ── Confidence ring — emerald success colour on light track ── */
.cv-ring__track { stroke: #E7E5DD; }
.cv-ring__fill  { stroke: #1A7D4A; }
.cv-ring__value { color: #1A7D4A; }
.cv-ring__label { color: #41474F; }

/* ── Trio cards — white surface + 3px coloured top-bar ──── */
.cv-side {
  background: #FFFFFF;
  border-color: #E7E5DD;
  border-top-width: 3px;
  box-shadow: 0 3px 10px rgba(17, 21, 31, 0.04);
  transition: transform 0.18s, box-shadow 0.18s;
}
.cv-side:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(17, 21, 31, 0.06);
}
.cv-side--danger { border-top-color: #C0392B; }
.cv-side--value  { border-top-color: #1A7D4A; }
.cv-side--lens   { border-top-color: #D4AF37; }
.cv-side--danger .cv-side__label { color: #C0392B; }
.cv-side--value  .cv-side__label { color: #1A7D4A; }
.cv-side--lens   .cv-side__label { color: #9C7B12; }
.cv-side__horse { color: #11151F; }
.cv-side__copy  { color: #41474F; }
.cv-side__meta  { color: #9C7B12; }
.cv-side__link  {
  color: #9C7B12;
  font-weight: 700;
}
.cv-side__link:hover { color: #D4AF37; }

/* ── Collapsibles (signals fold) ────────────────────────── */
.cv-fold {
  background: #FFFFFF;
  border-color: #E7E5DD;
  box-shadow: 0 2px 6px rgba(17, 21, 31, 0.03);
}
.cv-fold__summary:hover { background: rgba(212, 175, 55, 0.04); }
.cv-fold__icon  { color: #9C7B12; }
.cv-fold__title { color: #11151F; }
.cv-fold__sub   { color: #41474F; }
.cv-fold__chev  { color: #9CA3AF; }

/* ── Explainer cards (formula breakdown) ────────────────── */
.cv-explainer {
  background: #F7F5EE;
  border-color: #E7E5DD;
  border-top-color: rgba(212, 175, 55, 0.35);
}
.cv-explainer__label { color: #41474F; }
.cv-explainer__band {
  background: rgba(212, 175, 55, 0.12);
  color: #9C7B12;
  border-color: rgba(212, 175, 55, 0.30);
}
.cv-explainer[data-band="Dominant"]        .cv-explainer__band { background: rgba(26, 125, 74, 0.12); color: #1A7D4A; border-color: rgba(26, 125, 74, 0.30); }
.cv-explainer[data-band="High conviction"] .cv-explainer__band { background: rgba(212, 175, 55, 0.14); color: #9C7B12; border-color: rgba(212, 175, 55, 0.30); }
.cv-explainer[data-band="Live signal"]     .cv-explainer__band { background: rgba(30, 79, 190, 0.10); color: #1E4FBE; border-color: rgba(30, 79, 190, 0.30); }
.cv-explainer[data-band="Speculative"]     .cv-explainer__band { background: rgba(184, 134, 11, 0.10); color: #B8860B; border-color: rgba(184, 134, 11, 0.30); }
.cv-explainer[data-band="Low conviction"]  .cv-explainer__band { background: rgba(192, 57, 43, 0.10); color: #C0392B; border-color: rgba(192, 57, 43, 0.30); }
.cv-explainer[data-band="No data"]         .cv-explainer__band { background: #F7F5EE; color: #9CA3AF; border-color: #E7E5DD; }
.cv-explainer__value { color: #11151F; }
.cv-explainer__bar   { background: #E7E5DD; }
.cv-explainer__bar > span {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.7), #9C7B12);
}
.cv-explainer__bar-meta { color: #41474F; }
.cv-explainer p         { color: #41474F; }

/* ── Telemetry sidebar ──────────────────────────────────── */
.cv-telemetry {
  background: #F7F5EE;
  border-color: #E7E5DD;
}
.cv-telemetry__title { color: #9C7B12; }
.cv-telem {
  background: #FFFFFF;
  border-color: #E7E5DD;
  border-left-color: #D4AF37;
}
.cv-telem__label { color: #41474F; }
.cv-telem__value { color: #9C7B12; }
.cv-telem p      { color: #41474F; }
.cv-telemetry__link { color: #9C7B12; }

/* ── Outcome matrix ─────────────────────────────────────── */
.cv-matrix__row {
  background: #FFFFFF;
  border-color: #E7E5DD;
}
.cv-matrix__row:first-child {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.32);
}
.cv-matrix__rank {
  background: #F7F5EE;
  color: #41474F;
}
.cv-matrix__row:first-child .cv-matrix__rank {
  background: #D4AF37;
  color: #11151F;
}
.cv-matrix__name { color: #11151F; }
.cv-matrix__bar  { background: #E7E5DD; }
.cv-matrix__bar > span {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), #9C7B12);
}
.cv-matrix__score {
  color: #9C7B12;
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.30);
}
.cv-matrix__odds {
  background: #F7F5EE;
  color: #41474F;
}

/* ── Footer ─────────────────────────────────────────────── */
.cv-footer { color: #9CA3AF; }
.cv-footer__icon { color: #9C7B12; }
.cv-footer a {
  color: #41474F;
  border-bottom-color: rgba(17, 21, 31, 0.20);
}
.cv-footer a:hover {
  color: #9C7B12;
  border-bottom-color: #9C7B12;
}

/* ── Mobile pull-back for the quote marks ───────────────── */
@media (max-width: 600px) {
  .cv-hero__summary {
    padding: 4px 22px 6px;
    font-size: 14.5px;
  }
  .cv-hero__summary::before,
  .cv-hero__summary::after {
    font-size: 32px;
  }
  .cv-hero__summary::after { bottom: -10px; }
}


/* ════════════════════════════════════════════════════════════════
 *  EDITORIAL DEPTH LAYER
 *  ────────────────────
 *  Drop cap + left rule + roman numerals + byline + diamond
 *  dividers. Builds on top of the paper-cream override above so
 *  the chamber verdict reads as a long-form magazine spread, not
 *  a data widget.
 *
 *  Inspiration: Sunday Times features + The Economist briefings —
 *  authored, layered, with deliberate typographic punctuation.
 * ══════════════════════════════════════════════════════════════ */

/* ── Subtle paper grain on the section ─────────────────────
 * Tiny stippling via SVG noise, low opacity so it reads as
 * "this surface has weight" without becoming visual texture noise. */
.cv {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.12 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212, 175, 55, 0.10) 0%, transparent 60%),
    #FAFAF7;
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 120px 120px, auto, auto;
}

/* ── Diamond section dividers above + below the hero ─────
 * Hairline rules pinched in the middle by a centered diamond —
 * classic magazine section break, not a thumping border line. */
.cv-hero {
  margin-top: 30px;
  margin-bottom: 30px;
}
.cv-hero::after {
  /* Lower diamond divider — sits between the verdict and the trio. */
  content: '◆';
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  color: rgba(212, 175, 55, 0.65);
  background: #FAFAF7;
  border-radius: 50%;
  z-index: 2;
}
/* Hairline rule across the section, pinched by the diamond. */
.cv-hero {
  position: relative;
}
.cv-trio {
  position: relative;
  padding-top: 30px;
}
.cv-trio::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45) 30%, rgba(212, 175, 55, 0.45) 70%, transparent);
}

/* ── Hero card — magazine spread typography ─────────────── */
.cv-hero {
  padding: 28px 30px 26px;
  background: #FFFFFF;
  border: 1px solid #E7E5DD;
  box-shadow: 0 8px 28px rgba(17, 21, 31, 0.05),
              0 1px 2px rgba(17, 21, 31, 0.04);
}

.cv-hero__silk {
  width: 80px;
  height: 80px;
  font-size: 28px;
  box-shadow:
    0 0 0 4px #FFFFFF,
    0 0 0 5px rgba(212, 175, 55, 0.30),
    0 6px 18px rgba(17, 21, 31, 0.10);
}

/* Horse name — feature headline weight, tighter tracking. */
.cv-hero__horse {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 700;
  color: #11151F;
  letter-spacing: -0.018em;
  line-height: 1.02;
  margin: 0 0 10px;
}

.cv-band {
  font-size: 9.5px;
  letter-spacing: 0.20em;
  padding: 4px 11px;
}

/* ── Verdict body — drop cap + thick gold rule ──────────
 * Drop cap on the first letter (3.5em float-left) gives the
 * paragraph an essay opening; the thick gold rule on the left
 * structures it as a pulled quote. The decorative corner quote
 * marks (defined in the override above) get pulled in tighter
 * and shrunk so they support rather than dominate. */
.cv-hero__summary {
  border-left: 3px solid rgba(212, 175, 55, 0.70);
  padding: 8px 22px 8px 24px;
  margin: 18px 0 14px;
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.65;
  color: #11151F;
  max-width: 64ch;
}
.cv-hero__summary::first-letter {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 3.8em;
  font-weight: 700;
  font-style: normal;
  float: left;
  line-height: 0.86;
  margin: 6px 8px 0 -2px;
  color: #9C7B12;
}
/* Shrink + reposition the corner quote marks so they're decorative
   accents, not structural punctuation. The drop cap + left rule
   carry the structure now. */
.cv-hero__summary::before {
  font-size: 26px;
  left: -8px;
  top: -2px;
  opacity: 0.55;
}
.cv-hero__summary::after {
  font-size: 26px;
  right: -8px;
  bottom: -6px;
  opacity: 0.55;
}

/* ── Meta strip → editorial byline ──────────────────────
 * Pills become a credit line: "FILED UNDER · NAME (ROLE) · NAME (ROLE)"
 * Small caps, letter-spaced, hairline rule above. */
.cv-hero__meta {
  border-top: 1px dashed #E7E5DD;
  padding-top: 14px;
  margin-top: 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #41474F;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cv-hero__meta::before {
  content: 'Filed under';
  color: #9CA3AF;
  letter-spacing: 0.20em;
  margin-right: 4px;
}
/* Pills inside the meta lose their chip chrome and become inline byline items. */
.cv-hero__meta .cv-pill {
  background: transparent;
  border: none;
  padding: 0;
  color: #11151F;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-transform: inherit;
  position: relative;
}
.cv-hero__meta .cv-pill + .cv-pill::before {
  content: '·';
  position: absolute;
  left: -8px;
  color: rgba(212, 175, 55, 0.60);
}
.cv-hero__meta .cv-pill--quiet { color: #41474F; }

/* ── Confidence ring — slightly more presence ────────── */
.cv-ring {
  width: 110px;
  height: 110px;
}
.cv-ring__value {
  font-size: 26px;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
}

/* ── Trio cards — numbered editorial blocks ─────────────
 * Roman numerals as ::before glyphs, display-serif names,
 * italic trainer footers. Borders soften, top-bar accent stays. */
.cv-trio { gap: 18px; }

.cv-side {
  position: relative;
  padding: 22px 22px 18px 22px;
  background: #FFFFFF;
  border: 1px solid #E7E5DD;
  border-top-width: 2px;            /* slim top-bar for the editorial feel */
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(17, 21, 31, 0.04);
}
.cv-side::after {
  /* Roman numeral sits as a watermark in the top-right corner. */
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  font-style: italic;
  color: rgba(17, 21, 31, 0.08);
  line-height: 1;
}
.cv-side--danger::after { content: 'I.'; }
.cv-side--value::after  { content: 'II.'; }
.cv-side--lens::after   { content: 'III.'; }

.cv-side__label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  font-weight: 800;
}
.cv-side__horse {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: #11151F;
  letter-spacing: -0.012em;
  margin: 4px 0 6px;
  line-height: 1.1;
}
.cv-side__copy {
  font-size: 13px;
  line-height: 1.55;
  color: #41474F;
}
.cv-side__meta {
  /* Italic byline-feel for the price + trainer credit. */
  margin-top: 10px;
  font-style: italic;
  font-size: 12.5px;
  font-weight: 600;
  color: #9C7B12;
  padding-top: 8px;
  border-top: 1px dashed #E7E5DD;
}
.cv-side__link {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #E7E5DD;
  font-style: normal;
  font-size: 12.5px;
}

/* ── Eyebrow + Rerun button — tighter, more typewriter ── */
.cv__eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  padding: 5px 14px 5px 12px;
  font-weight: 800;
}
.cv__title {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.018em;
}
.cv-rerun {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 8px 16px;
}

/* ── Mobile keep-up ─────────────────────────────────── */
@media (max-width: 600px) {
  .cv-hero { padding: 22px 20px; }
  .cv-hero__silk { width: 64px; height: 64px; }
  .cv-hero__horse { font-size: 24px; }
  .cv-hero__summary {
    padding: 6px 16px 6px 18px;
    font-size: 14.5px;
  }
  .cv-hero__summary::first-letter { font-size: 3em; }
  .cv-ring { width: 84px; height: 84px; }
  .cv-side { padding: 18px 18px 14px; }
  .cv-side__horse { font-size: 19px; }
  .cv-side::after { font-size: 18px; right: 14px; top: 10px; }
}