/* ============================================================
   RACE PAGE — shared layout
   ============================================================ */

.back-bar {
  position: sticky;
  top: 32px;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: stretch;
  height: 36px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.back-bar a {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  color: var(--txt-3);
  text-decoration: none;
  border-right: 1px solid var(--line);
  transition: color .15s, background .15s;
}
.back-bar a:hover { color: var(--red); background: var(--bg-1); }
.back-bar .crumb {
  display: flex; align-items: center;
  padding: 0 16px;
  color: var(--txt-2);
  border-right: 1px solid var(--line);
}
.back-bar .crumb strong { color: var(--txt); margin-left: 6px; font-weight: 600; }
.back-bar .spacer { flex: 1; border-right: 1px solid var(--line); }
.back-bar .right { padding: 0 16px; color: var(--txt-3); display: flex; align-items: center; }

/* HERO */
.race-hero {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.race-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: end;
}
.race-coord {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--txt-3);
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-bottom: 28px;
}
.race-coord span strong { color: var(--red); margin-right: 4px; font-weight: 600; }
.race-title {
  font-family: var(--sans);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
  color: var(--txt);
}
.race-title .accent { color: var(--red); }
.race-subtitle {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt-2);
  margin-top: 20px;
  letter-spacing: .05em;
}

/* Telemetry sidebar */
.telemetry {
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--mono);
  font-size: 11px;
}
.telemetry-head {
  background: var(--bg-2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--txt-3);
  text-transform: uppercase;
  display: flex; justify-content: space-between;
}
.telemetry-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.telemetry-row:last-child { border-bottom: none; }
.telemetry-key { font-size: 9px; letter-spacing: .15em; color: var(--txt-3); text-transform: uppercase; }
.telemetry-val { color: var(--txt); }
.telemetry-val.big { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.telemetry-meta { font-size: 9px; color: var(--txt-4); }

/* RESULTS GRID — top finishers */
.results-grid {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.result-cell {
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  position: relative;
}
.result-cell:last-child { border-right: none; }
.result-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 1px;
  background: var(--team, var(--txt-3));
}
.result-pos {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--txt-3);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.result-code {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--team, var(--txt));
  line-height: 1;
}
.result-gap {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  margin-top: 8px;
  letter-spacing: .05em;
}

/* SECTIONS */
.race-section {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 64px 24px 0;
}

/* TAKES — five things */
.takes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.take-card {
  background: var(--bg);
  padding: 28px 28px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.take-card.span2 { grid-column: span 2; }
.take-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--txt-4);
  text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
}
.take-num .id { color: var(--txt-3); }
.take-num .tag {
  background: var(--accent, var(--red));
  color: #fff;
  padding: 2px 8px;
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 9px;
}
.take-headline {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--txt);
}
.take-body {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt-2);
  line-height: 1.7;
}
.take-body strong { color: var(--txt); font-weight: 600; }

/* TIMELINE */
.timeline {
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.timeline-head strong { color: var(--txt); }
.timeline-rows { padding: 8px 0; }
.timeline-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  font-family: var(--mono);
  font-size: 12px;
}
.timeline-row:last-child { border-bottom: none; }
.timeline-lap {
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--txt-4);
  text-transform: uppercase;
  font-weight: 600;
}
.timeline-lap.flag-sc { color: var(--amber); }
.timeline-lap.flag-ret { color: var(--red); }
.timeline-event {
  color: var(--txt);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: 11px;
}
.timeline-detail { color: var(--txt-2); line-height: 1.6; font-size: 12px; }
.timeline-detail strong { color: var(--txt); }

/* CHART FRAME */
.chart-frame {
  border: 1px solid var(--line);
  background: var(--bg-1);
  margin-top: 16px;
}
.chart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-3);
  flex-wrap: wrap;
  gap: 12px;
}
.chart-head strong { color: var(--txt); }
.chart-body {
  padding: 24px 20px;
}
.chart-body svg { width: 100%; display: block; overflow: visible; }
.chart-foot {
  display: flex; justify-content: space-between;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--txt-4);
  text-transform: uppercase;
}
.chart-axis { font-family: var(--mono); font-size: 9px; fill: var(--txt-4); letter-spacing: .1em; }
.chart-grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }

/* LESSONS */
.lessons { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.lesson {
  background: var(--bg);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: baseline;
  transition: background .15s;
}
.lesson:hover { background: var(--bg-1); }
.lesson-num { font-family: var(--mono); font-size: 10px; color: var(--red); letter-spacing: .15em; font-weight: 700; }
.lesson-text { font-family: var(--mono); font-size: 12px; color: var(--txt-2); line-height: 1.7; }
.lesson-text strong { color: var(--txt); font-weight: 600; }

/* FORWARD */
.forward {
  border: 1px solid var(--red-dim);
  background: linear-gradient(180deg, rgba(225,6,0,.04), transparent);
  padding: 28px 28px 32px;
  position: relative;
}
.forward::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 60px; height: 1px;
  background: var(--red);
}
.forward-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.forward-title {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}
.forward-body { font-family: var(--mono); font-size: 12px; color: var(--txt-2); line-height: 1.7; }
.forward-body strong { color: var(--txt); }

/* ============================================================
   QUALIFYING / GRID TABLE
   ============================================================ */
.quali-frame, .grid-frame, .strat-frame, .stint-frame, .standings-frame {
  border: 1px solid var(--line);
  background: var(--bg-1);
  margin-top: 16px;
}
.quali-head, .grid-head, .strat-head, .stint-head, .standings-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--txt-3);
}
.quali-head strong, .grid-head strong, .strat-head strong, .stint-head strong, .standings-head strong { color: var(--txt); }

table.dt {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
table.dt th, table.dt td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
table.dt th {
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--txt-4);
  text-transform: uppercase;
  font-weight: 600;
  background: var(--bg-2);
}
table.dt td { color: var(--txt-2); }
table.dt td.code { color: var(--team, var(--txt)); font-weight: 700; font-size: 14px; }
table.dt td.pos { color: var(--txt-3); font-size: 10px; letter-spacing: .15em; width: 40px; }
table.dt td.purple { color: #c264ff; font-weight: 600; }
table.dt td.num { font-variant-numeric: tabular-nums; color: var(--txt); }
table.dt tr:hover td { background: rgba(255,255,255,.02); }
table.dt tr:last-child td { border-bottom: none; }
table.dt .team-bar {
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--team, var(--txt-3));
  margin-right: 8px;
  vertical-align: middle;
}

/* SECTOR CHIPS */
.sector-chip {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 4px;
}
.sector-chip.purple { background: #2a0d3d; color: #c264ff; }
.sector-chip.green  { background: #0d2a14; color: #4dd97f; }
.sector-chip.yellow { background: #2a220d; color: #ffce4d; }

/* STRATEGY ROWS — visual stints */
.strat-rows { padding: 8px 20px 16px; }
.strat-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
}
.strat-row:last-child { border-bottom: none; }
.strat-row .driver { color: var(--team, var(--txt)); font-weight: 700; font-size: 13px; }
.strat-row .total { font-size: 10px; color: var(--txt-3); text-align: right; letter-spacing: .12em; }
.strat-bar { display: flex; height: 16px; gap: 1px; background: var(--line); }
.strat-stint {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #000;
}
.strat-stint.M  { background: #ffce4d; }
.strat-stint.H  { background: #e8e8e8; }
.strat-stint.S  { background: #e8002d; color: #fff; }
.strat-stint.I  { background: #4dd97f; color: #000; }
.strat-stint.W  { background: #4d8fff; color: #fff; }

/* SECTOR ANALYSIS */
.sector-table { padding: 0; }
.sector-row {
  display: grid;
  grid-template-columns: 80px repeat(3, 1fr) 100px;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.sector-row:last-child { border-bottom: none; }
.sector-row.head {
  background: var(--bg-2);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--txt-4);
  text-transform: uppercase;
}
.sector-row .driver { color: var(--team, var(--txt)); font-weight: 700; font-size: 14px; }
.sector-row .sector-cell { display: flex; flex-direction: column; gap: 2px; }
.sector-cell .sector-time { color: var(--txt); }
.sector-cell .sector-delta { font-size: 10px; color: var(--txt-3); }
.sector-cell.best .sector-time { color: #c264ff; }
.sector-cell.best .sector-delta { color: #c264ff; }
.sector-row .total { color: var(--txt); font-weight: 600; text-align: right; }

/* DRIVER WRITE-UP CARDS */
.driver-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.driver-card {
  background: var(--bg);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.driver-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 30px; height: 1px;
  background: var(--team, var(--red));
}
.driver-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
}
.driver-card-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--team, var(--txt));
  letter-spacing: -.01em;
}
.driver-card-pos {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--txt-4);
  text-transform: uppercase;
}
.driver-card-stat {
  display: flex; gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--txt-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
  letter-spacing: .1em;
}
.driver-card-stat span strong { color: var(--txt); margin-left: 4px; font-weight: 600; font-size: 12px; }
.driver-card-body { font-family: var(--mono); font-size: 12px; color: var(--txt-2); line-height: 1.7; }
.driver-card-body strong { color: var(--txt); font-weight: 600; }
.driver-card-grade {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--txt-4);
  text-transform: uppercase;
  display: flex; justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.driver-card-grade strong { color: var(--team, var(--txt)); font-size: 14px; letter-spacing: 0; }

/* WEATHER STRIP */
.weather-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.weather-cell {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  font-family: var(--mono);
}
.weather-cell:last-child { border-right: none; }
.weather-key { font-size: 9px; letter-spacing: .22em; color: var(--txt-4); text-transform: uppercase; margin-bottom: 8px; }
.weather-val { font-size: 22px; font-weight: 700; color: var(--txt); letter-spacing: -.01em; }
.weather-meta { font-size: 10px; color: var(--txt-3); margin-top: 4px; letter-spacing: .08em; }

/* PU ANALYSIS — engineering deep dive */
.pu-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.pu-card {
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: 24px 26px;
}
.pu-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pu-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.pu-body {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--txt-2);
  line-height: 1.75;
}
.pu-body strong { color: var(--txt); }
.pu-stats {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
}
.pu-stats div { display: flex; justify-content: space-between; }
.pu-stats .k { color: var(--txt-4); letter-spacing: .12em; font-size: 9px; text-transform: uppercase; }
.pu-stats .v { color: var(--txt); font-weight: 600; }

/* CONSTRUCTOR DELTA TABLE */
.delta-row {
  display: grid;
  grid-template-columns: 30px 80px 1fr 90px 90px 90px;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.delta-row:last-child { border-bottom: none; }
.delta-row.head {
  background: var(--bg-2);
  font-size: 9px; letter-spacing: .22em;
  color: var(--txt-4);
  text-transform: uppercase;
}
.delta-row .pos { color: var(--txt-3); }
.delta-row .name { color: var(--team, var(--txt)); font-weight: 700; }
.delta-row .change.up   { color: #4dd97f; }
.delta-row .change.dn   { color: #ff5b75; }
.delta-row .change.flat { color: var(--txt-3); }
.delta-row .bar-cell { display: flex; align-items: center; gap: 8px; }
.delta-row .bar-cell .bar { height: 8px; background: var(--team, var(--txt-3)); }

/* DRS ANALYSIS */
.drs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.drs-cell {
  background: var(--bg-1);
  padding: 22px 24px;
  font-family: var(--mono);
}
.drs-num { font-size: 38px; font-weight: 800; color: var(--red); letter-spacing: -.02em; line-height: 1; }
.drs-label { font-size: 10px; letter-spacing: .22em; color: var(--txt-4); text-transform: uppercase; margin: 8px 0 12px; }
.drs-detail { font-size: 11px; color: var(--txt-2); line-height: 1.6; }
.drs-detail strong { color: var(--txt); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .race-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .results-grid { grid-template-columns: repeat(3, 1fr); }
  .result-cell:nth-child(3) { border-right: none; }
  .result-cell:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .takes { grid-template-columns: 1fr; }
  .take-card.span2 { grid-column: span 1; }
  .timeline-row { grid-template-columns: 60px 1fr; }
  .timeline-row .timeline-event { grid-column: span 2; }
  .driver-cards { grid-template-columns: 1fr; }
  .pu-grid { grid-template-columns: 1fr; }
  .weather-strip { grid-template-columns: repeat(3, 1fr); }
  .drs-grid { grid-template-columns: 1fr; }
  .sector-row { grid-template-columns: 60px 1fr; gap: 8px; }
  .delta-row { grid-template-columns: 24px 60px 1fr 60px; font-size: 10px; }
  .delta-row .bar-cell, .delta-row .change:nth-child(n+5) { display: none; }
}

/* PLACEHOLDER CARDS — for sections awaiting Colab data */
.placeholder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  border: 1px dashed var(--line-3);
  background: var(--bg-1);
  text-align: center;
  font-family: var(--mono);
}
.placeholder-icon { font-size: 24px; opacity: .5; }
.placeholder-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--txt-3);
}
.placeholder-body {
  font-size: 12px;
  color: var(--txt-3);
  max-width: 480px;
  line-height: 1.6;
}