/* ── Driver profile · Grandstand ── */

/* Quiet search on inner pages (signature offset shadow reserved for home). The
   box is named so moving between driver pages lifts it out of the expand and
   holds it in place rather than transitioning it; freezing its group keeps it
   from morphing. The breadcrumb row above it is gone, so it carries the top gap.
   KNOWN, ACCEPTED side effect (iPad only): because this is a held shared element,
   iOS Safari anchors the scroll to it, so tapping a teammate from a scrolled-down
   driver page lands the next driver on the search bar instead of the top header.
   Dropping the name fixes that but makes the box fade/scale in with the rest of the
   page; tried (commit e9d2302) and reverted, judged not worth losing the pinned
   box, so the snap is lived with. */
:where(.v-driver) .search-wrap { margin:22px 0 6px; max-width:560px; view-transition-name:driver-search; }
::view-transition-group(driver-search) { animation: none; }
:where(.v-driver) .search-box { box-shadow:none; border:1px solid var(--line); padding:11px 14px 11px 40px; font-size:14px; }
:where(.v-driver) .search-box:focus { box-shadow:none; border-color:var(--ink); }
:where(.v-driver) .search-icon { top:50%; transform:translateY(-50%); left:14px; }

/* Masthead */
:where(.v-driver) .driver-hero { margin:18px 0 0; border-bottom:2px solid var(--ink); padding-bottom:22px; }
:where(.v-driver) .driver-mast { display:flex; align-items:center; gap:20px; }
:where(.v-driver) .driver-name { font-family:var(--font-display); font-weight:800; font-size:36px; letter-spacing:-0.015em; line-height:1.04; color:var(--ink); }
:where(.v-driver) .driver-meta { font-size:13px; color:var(--sub); margin-top:6px; font-variant-numeric:tabular-nums; }
:where(.v-driver) .driver-meta .fl { margin-right:6px; }
@media (max-width:719.9px) {
  :where(.v-driver) .driver-name { font-size:24px; }
  :where(.v-driver) .driver-meta { font-size:11.5px; margin-top:4px; }
  :where(.v-driver) .driver-hero { padding-bottom:16px; }
}

/* Career stat strip — pattern source for the race.html car panel */
:where(.v-driver) .stat-row { margin:0 0 32px; border-top:none; }
:where(.v-driver) .stat-card { padding-top:16px; padding-bottom:0; }
:where(.v-driver) .stat-icon { display:none; }
@media (max-width:719.9px) { :where(.v-driver) .stat-row { margin-bottom:24px; } }

/* Section heads */
:where(.v-driver) .section-title {
  display:flex; align-items:center; gap:16px;
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:14px; padding:0; border:none;
}
:where(.v-driver) .section-title::after { content:''; flex:1; height:1px; background:var(--line); }
:where(.v-driver) .awards-section { margin-bottom:34px; }
/* The history section closes the page; 48px matches the race pages' bottom gap
   before the footer (home's last section carries 56px). */
:where(.v-driver) .history-section { margin-bottom:48px; }

/* Award chips — outline chips, emoji kept (they are the award identity) */
:where(.v-driver) .awards-grid { display:flex; flex-wrap:wrap; gap:8px; }
:where(.v-driver) .award-chip {
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
  background:none; border:1px solid var(--line); border-radius:4px;
  font-size:13px; box-shadow:none; cursor:default; position:relative;
  transition:border-color .12s;
}
:where(.v-driver) .award-chip:hover { border-color:var(--faint); }
:where(.v-driver) .award-emoji { font-size:14px; }
:where(.v-driver) .award-name { color:var(--sub); font-weight:600; }
:where(.v-driver) .award-count { font-size:11px; font-weight:800; color:var(--red); background:none; padding:0; border-radius:0; font-variant-numeric:tabular-nums; }
:where(.v-driver) .award-chip[data-tip]:hover::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:230px; background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-size:11.5px; font-weight:500; line-height:1.45; text-align:center; white-space:normal;
  padding:7px 10px; border-radius:4px; box-shadow:0 4px 14px rgba(27,24,18,.22); pointer-events:none; z-index:40;
}
:where(.v-driver) .award-chip[data-tip]:hover::before {
  content:''; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink); pointer-events:none; z-index:40;
}

/* Race history — rows, not cards */
:where(.v-driver) .history-table-wrap { border:none; border-radius:0; box-shadow:none; overflow:visible; }
:where(.v-driver) .history-header {
  display:grid; grid-template-columns:52px 12px 1fr 56px 56px 1fr 52px 20px; gap:10px;
  padding:0 14px 8px; background:none; border-bottom:1px solid var(--ink); align-items:center;
}
:where(.v-driver) .history-header span { font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); }
:where(.v-driver) .race-row {
  display:grid; grid-template-columns:52px 12px 1fr 56px 56px 1fr 52px 20px;
  align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid var(--line-soft); background:none;
  text-decoration:none; color:inherit; transition:background .1s;
}
:where(.v-driver) .race-row:last-of-type { border-bottom:1px solid var(--line); }
:where(.v-driver) .race-row:hover { background:var(--surface); }
:where(.v-driver) .race-row:hover .row-arrow { color:var(--red); transform:translateX(0); }
:where(.v-driver) .series-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
:where(.v-driver) .row-date { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; font-variant-numeric:tabular-nums; }
:where(.v-driver) .row-date .rd-dm { font-size:12px; color:var(--sub); font-weight:600; white-space:nowrap; }
:where(.v-driver) .row-date .rd-yr { font-size:11px; color:var(--faint); }
:where(.v-driver) .row-info { min-width:0; }
:where(.v-driver) .row-name { font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.v-driver) .row-sub { font-size:12px; color:var(--faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.v-driver) .row-pos { text-align:center; }
:where(.v-driver) .pos-badge { display:inline-block; font-size:13px; font-weight:700; padding:0; border-radius:0; background:none !important; border:none !important; font-variant-numeric:tabular-nums; }
:where(.v-driver) .pos-p1 { color:var(--red); font-weight:800; }
:where(.v-driver) .pos-p2,
:where(.v-driver) .pos-p3 { color:var(--ink); }
:where(.v-driver) .pos-oth { color:var(--faint); font-size:13px; text-align:center; font-variant-numeric:tabular-nums; }
:where(.v-driver) .row-winner { font-size:13px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.v-driver) .row-winner strong { color:var(--sub); font-weight:700; }
:where(.v-driver) .row-score { display:flex; justify-content:center; }
:where(.v-driver) .row-arrow { font-size:13px; color:var(--faint); transition:transform .12s,color .12s; text-align:right; transform:translateX(-4px); }
:where(.v-driver) .hist-footnote { font-size:10.5px; color:var(--faint); margin-top:10px; text-align:right; }

/* ── SimRecap Score — ring gauge (shared by the history rows and the summary) ── */
:where(.v-driver) .score-ring { position:relative; display:inline-block; width:34px; height:34px; flex:none; }
:where(.v-driver) .score-ring svg { display:block; width:100%; height:100%; }
:where(.v-driver) .score-ring-num {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:11px; color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
:where(.v-driver) .score-ring-num.unscored { color:var(--faint); font-weight:700; }

/* ── PERFORMANCE · SCORE career summary ── */
:where(.v-driver) .perf-section { margin:0 0 34px; }
:where(.v-driver) .perf-head {
  display:flex; align-items:baseline; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:10px;
}
:where(.v-driver) .perf-wordmark {
  font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:0.02em; color:var(--ink);
}
:where(.v-driver) .perf-wordmark em { font-style:normal; color:var(--red); }
:where(.v-driver) .perf-mark { display:inline-block; width:4.5px; height:4.5px; background:var(--red); transform:skewX(-12deg); margin-left:5px; }
:where(.v-driver) .perf-count { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
:where(.v-driver) .perf-band { display:flex; align-items:center; gap:36px; margin-top:24px; padding-bottom:6px; }
:where(.v-driver) .perf-headline { display:flex; align-items:center; gap:18px; flex:none; }
:where(.v-driver) .score-ring.perf-ring-big { width:104px; height:104px; }
:where(.v-driver) .perf-ring-big .score-ring-num { font-size:31px; }
:where(.v-driver) .score-ring.perf-ring-sparse { width:84px; height:84px; }
:where(.v-driver) .perf-ring-sparse .score-ring-num { font-size:25px; }
:where(.v-driver) .perf-over { font-size:9.5px; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--faint); }
:where(.v-driver) .perf-cap { font-size:11px; color:var(--faint); margin-top:5px; line-height:1.45; }
:where(.v-driver) .perf-div { width:1px; align-self:stretch; background:var(--line); flex:none; }
:where(.v-driver) .perf-pillars { display:flex; gap:36px; flex:none; }
:where(.v-driver) .perf-pnum {
  font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--ink);
  margin-top:6px; line-height:1; font-variant-numeric:tabular-nums;
}
:where(.v-driver) .perf-pbar { width:64px; height:3px; background:var(--line-soft); margin-top:8px; }
:where(.v-driver) .perf-pbar i { display:block; height:100%; background:var(--ink); }
:where(.v-driver) .perf-spread { flex:1; min-width:0; padding-top:10px; }
:where(.v-driver) .perf-spread .perf-cap { margin-top:8px; }
:where(.v-driver) .perf-bins-plot { position:relative; height:44px; }
:where(.v-driver) .perf-bins.sparse .perf-bins-plot { height:30px; }
:where(.v-driver) .perf-bins-plot i { position:absolute; bottom:0; background:var(--ink); opacity:0.75; min-height:3px; transform-origin:bottom; }
:where(.v-driver) .perf-avgline { position:absolute; top:-14px; bottom:0; width:1.5px; background:var(--red); }
:where(.v-driver) .perf-avglbl {
  position:absolute; top:-3px; left:5px;
  font-size:9px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--red); white-space:nowrap; font-variant-numeric:tabular-nums;
}
:where(.v-driver) .perf-avglbl.flip { left:auto; right:5px; }
:where(.v-driver) .perf-bins-axis {
  position:relative; border-top:1px solid var(--line); height:16px; margin-top:4px;
  font-family:var(--font-display); font-weight:700; font-size:10.5px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
:where(.v-driver) .perf-bins-axis span { position:absolute; top:4px; }
:where(.v-driver) .perf-bins-axis span:nth-child(1) { left:0; }
:where(.v-driver) .perf-bins-axis span:nth-child(2) { left:50%; transform:translateX(-50%); }
:where(.v-driver) .perf-bins-axis span:nth-child(3) { right:0; }

/* Tablet: the histogram takes its own full-width row under headline + pillars. */
@media (max-width:899.9px) {
  :where(.v-driver) .perf-band { flex-wrap:wrap; gap:32px; }
  :where(.v-driver) .perf-div-2 { display:none; }
  :where(.v-driver) .perf-spread { flex-basis:100%; padding-top:12px; }
  :where(.v-driver) .score-ring.perf-ring-big { width:92px; height:92px; }
  :where(.v-driver) .perf-ring-big .score-ring-num { font-size:28px; }
  :where(.v-driver) .perf-pillars { gap:32px; }
  :where(.v-driver) .perf-pnum { font-size:24px; }
  :where(.v-driver) .perf-pbar { width:58px; }
}

@media (max-width:719.9px) {
  :where(.v-driver) .history-header,
:where(.v-driver) .race-row { grid-template-columns:48px 10px 1fr 40px 40px 36px; gap:8px; }
  :where(.v-driver) .race-row { padding:12px 10px; }
  :where(.v-driver) .history-header { padding:0 10px 8px; }
  :where(.v-driver) .history-header>:nth-child(6),
:where(.v-driver) .race-row>:nth-child(6),
  :where(.v-driver) .history-header>:nth-child(8),
:where(.v-driver) .race-row>:nth-child(8) { display:none; }
  :where(.v-driver) .row-name { font-size:13px; }
  :where(.v-driver) .score-ring.row-ring { width:32px; height:32px; }
  :where(.v-driver) .row-ring .score-ring-num { font-size:10px; }

  /* Summary stacks: headline, then the pillars over a soft rule, then the plot. */
  :where(.v-driver) .perf-band { display:block; margin-top:20px; }
  :where(.v-driver) .perf-div { display:none; }
  :where(.v-driver) .perf-headline { gap:16px; }
  :where(.v-driver) .score-ring.perf-ring-big { width:84px; height:84px; }
  :where(.v-driver) .perf-ring-big .score-ring-num { font-size:25px; }
  :where(.v-driver) .perf-pillars { gap:26px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
  :where(.v-driver) .perf-pnum { font-size:21px; }
  :where(.v-driver) .perf-pbar { width:52px; }
  :where(.v-driver) .perf-spread { padding-top:0; margin-top:24px; }
  :where(.v-driver) .perf-bins-plot { height:36px; }
}