/* =========================================================
   OVERTAKERS F1 — Analysis detail components
   Loaded ALONGSIDE styles.css on analysis/* detail pages.
   Built entirely on the shared design tokens so every study
   matches the rest of the site. Chrome (nav/footer/buttons/
   headings) comes from styles.css; this file only adds the
   pieces unique to a data study (charts, stats, callouts).
   ========================================================= */

:root{
  /* Data-encoded reds — NOT theme colors. Reserved for data marks
     and "deficit/negative" emphasis across all analysis pages. */
  --data-red:    #dc2626;
  --data-red-hi: #ef4444;
}

/* ---------- Readable article column ---------- */
.a-wrap{ max-width: 880px; margin: 0 auto; padding: 0 22px; }

/* ---------- Header bits (sit on the shared .page-head) ---------- */
.a-backlink{ display:inline-block; color:var(--text-2); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin:26px 0 14px; }
.a-backlink:hover{ color:var(--accent-hi); }
.a-deck{ font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.5; color:var(--text-1);
  max-width:720px; margin:0 0 6px; text-transform:none; }
.a-byline{ color:var(--text-3); font-size:.78rem; letter-spacing:.04em; margin:14px 0 0;
  padding-top:14px; border-top:1px solid var(--border); }

/* ---------- Lede + body prose ---------- */
.a-lead{ font-size:1.24rem; line-height:1.62; color:var(--text-1); margin:30px 0 18px; }
.a-lead .dropcap{ font-family:'Anton','Impact',sans-serif; float:left; font-size:3.7rem;
  line-height:.72; color:var(--data-red-hi); margin:.08em .14em 0 0; }
.a-body{ font-size:1.05rem; line-height:1.75; color:var(--text-1); margin:0 0 18px; }
.a-lead strong, .a-body strong, .a-take p strong{ color:var(--text-0); }
.a-device{ color:var(--accent-hi); font-style:italic; font-size:1.16rem; line-height:1.5;
  border-left:3px solid var(--data-red-hi); padding-left:16px; margin:24px 0 8px; }

/* ---------- Numbered section heads (Anton h2 + accent number) ---------- */
.a-h2{ display:flex; align-items:baseline; gap:14px; margin:56px 0 14px;
  padding-bottom:12px; border-bottom:1px solid var(--border); }
.a-h2 .num{ color:var(--accent); font-size:.62em; }

/* ---------- Hero / inline figure ---------- */
.a-figure{ margin:30px 0 8px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 12px 4px; overflow:hidden; }
.a-figure svg{ width:100%; height:auto; display:block; }
.a-figure figcaption{ color:var(--text-2); font-size:.8rem; padding:10px 16px 8px; line-height:1.5; }

/* ---------- Stat row (4 hero numbers) ---------- */
.a-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:28px 0; }
.a-stat{ background:var(--bg-card); border:1px solid var(--border);
  border-left:3px solid var(--data-red-hi); border-radius:var(--radius-md); padding:18px; }
.a-stat .num{ font-family:'Anton','Impact',sans-serif; font-size:2rem; color:var(--data-red-hi); line-height:1; }
.a-stat .lbl{ color:var(--text-2); font-size:.78rem; margin-top:10px; line-height:1.45; }

/* ---------- Chart card (mirrors .analysis-card) ---------- */
.chart-card{ background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:22px 20px 14px; margin:26px 0; }
.chart-card h3{ font-size:1.05rem; letter-spacing:.04em; margin:0 0 4px; color:var(--text-0); }
.chart-card .sub{ font-size:.78rem; color:var(--text-2); margin:0 0 14px; }
.chart-host{ position:relative; width:100%; height:340px; }
.chart-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:.78rem; color:var(--text-2); }
.chart-legend .k{ display:flex; align-items:center; gap:5px; }
.chart-legend .k i{ width:11px; height:11px; border-radius:2px; display:inline-block; }

/* ---------- "What it means" take cards ---------- */
.a-takes{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:24px 0; }
.a-take{ background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:20px 22px; }
.a-take h4{ font-size:1.02rem; margin:0 0 8px; }

/* ---------- Callouts (methodology / caveats) ---------- */
.a-callout{ background:linear-gradient(135deg, rgba(206,212,218,.06), rgba(206,212,218,.02));
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-md); padding:18px 22px; margin:24px 0;
  font-size:.95rem; line-height:1.6; color:var(--text-1); }
.a-callout.warn{ border-left-color:var(--data-red-hi); }
.a-callout strong{ color:var(--accent-hi); }
.a-callout ul{ margin:10px 0 0 18px; } .a-callout li{ margin-bottom:7px; }

/* ---------- Sub-nav (Summary / Methodology) — uses shared .btn ---------- */
.a-subnav{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 4px; }
.a-subnav .btn{ padding:9px 18px; font-size:.78rem; }

/* ---------- CTA cards (link blocks: eyebrow + title + desc) ---------- */
.a-cta-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:26px 0 8px; }
.a-cta{ display:block; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:18px 22px; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease; }
.a-cta:hover{ border-color:var(--accent-dim); transform:translateY(-2px); color:inherit; }
.a-cta .eyebrow{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.a-cta .title{ font-family:'Anton','Impact',sans-serif; font-size:1.2rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-0); margin:6px 0 4px; }
.a-cta .desc{ color:var(--text-1); font-size:.88rem; line-height:1.55; }

/* ---------- Sources ---------- */
.a-src{ font-size:.85rem; color:var(--text-2); line-height:1.85; }

/* ---------- Downforce-study specifics (race tabs + corner-bin grid) ---------- */
.race-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px; }
.race-tabs button{ background:var(--bg-elev); border:1px solid var(--border); color:var(--text-2);
  font-family:'Inter',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; padding:7px 13px; border-radius:999px; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s; }
.race-tabs button:hover{ color:var(--accent-hi); border-color:var(--accent-dim); }
.race-tabs button.on{ color:#11110c; background:var(--accent-hi); border-color:var(--accent-hi); }
.bin-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin:18px 0; }
.bin-grid figure{ margin:0; }
.bin-grid svg{ width:100%; height:auto; display:block; }

/* ---------- Methodology components (equations, tables, diagrams, steps) ----------
   Shared by every analysis methodology page so the deep-dive pages match too. */
.intro{ background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-md); padding:16px 20px; margin:22px 0 30px; }
.intro p{ margin:0; font-size:.95rem; line-height:1.6; }

.eq{ background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius-md); padding:14px 20px; margin:14px 0; }
.eq .label{ color:var(--text-2); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; margin-bottom:6px; }

table.kv{ width:100%; border-collapse:collapse; margin:12px 0; font-size:.875rem; }
table.kv th, table.kv td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
table.kv thead th{ color:var(--text-2); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; background:var(--bg-card); }
table.kv tbody td{ color:var(--text-1); }
table.kv tbody tr:hover td{ background:var(--bg-elev); }
table.kv code{ font-size:.75rem; }

.diagram{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px; margin:18px 0; }
.diagram svg{ width:100%; height:auto; display:block; }
.diagram .caption{ color:var(--text-2); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; margin-top:10px; text-align:center; }

.bullets{ padding-left:20px; }
.bullets li{ margin:8px 0; font-size:.95rem; line-height:1.6; color:var(--text-1); }
.bullets li strong{ color:var(--text-0); }

.step{ display:flex; align-items:flex-start; gap:14px; margin:12px 0; }
.step .num{ background:var(--accent); color:#0a0a0a; font-weight:800; border-radius:999px;
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 28px; font-size:.8rem; }
.step .body{ flex:1; } .step .body p{ margin:0; }

/* ---------- Responsive ---------- */
@media (max-width:680px){
  .a-stats{ grid-template-columns:1fr 1fr; }
  .a-takes{ grid-template-columns:1fr; }
  .a-cta-row{ grid-template-columns:1fr; }
}