/* Driver roster: one panel per team, the car's numbers and both drivers' ratings. */
.roster-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.roster-team { transition: box-shadow 300ms var(--motion), transform 300ms var(--motion); display: grid; gap: 18px; padding: 22px; border-radius: var(--radius-xl); background: linear-gradient(160deg, color-mix(in srgb, var(--team) 14%, transparent), #ffffff02 55%), var(--surface); box-shadow: inset 0 0 0 1px var(--rim); }
.roster-team:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--team) 55%, transparent), 0 24px 60px color-mix(in srgb, var(--team) 14%, transparent); }
.roster-team-head { display: flex; align-items: center; gap: 14px; }
.roster-team-head h2 { font-size: 26px; letter-spacing: -.03em; }
.roster-code { display: grid; place-items: center; height: 32px; padding: 0 10px; border-radius: 9px; background: var(--team); color: var(--on-team); font: 800 13px/1 Jakarta; letter-spacing: .08em; }
.roster-livery { display: flex; margin-left: auto; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rim); }
.roster-livery { position: relative; }
.roster-livery::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffff70 50%, transparent 70%); transform: translateX(-120%); }
.roster-team:hover .roster-livery::after { animation: sheen 900ms var(--motion); }
@keyframes sheen { to { transform: translateX(120%); } }
.roster-livery i { width: 22px; height: 14px; background: var(--team); }
.roster-livery i:nth-child(2) { background: var(--team-2); }
.roster-livery i:nth-child(3) { background: var(--team-3); }
.roster-car { padding: 14px 16px; border-radius: 16px; background: #ffffff05; }
.roster-car > p { margin-bottom: 10px; font: 700 11px/1 Jakarta; letter-spacing: .14em; text-transform: uppercase; color: var(--subtle); }
.roster-drivers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.roster-driver { transition: background 250ms, transform 250ms var(--motion); padding: 16px; border-radius: 16px; background: rgb(8 11 13 / .45); box-shadow: inset 0 0 0 1px var(--rim); }
.roster-driver:hover { background: color-mix(in srgb, var(--team) 10%, rgb(8 11 13 / .45)); transform: translateY(-2px); }
.roster-driver:hover .roster-number { transform: scale(1.08) rotate(-4deg); }
.roster-driver:hover .roster-bars b::before { filter: brightness(1.15); }
.roster-driver-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.roster-driver-head h3 { font-size: 17px; }
.roster-driver-head p { margin-top: 3px; font: 600 13px/1.3 Jakarta; color: var(--coral); }
.roster-number { transition: transform 300ms var(--motion); display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--team); color: var(--on-team); font: 800 18px/1 Jakarta; font-variant-numeric: tabular-nums; }
.roster-bars { display: grid; gap: 7px; padding: 0; list-style: none; }
.roster-car .roster-bars { grid-template-columns: 1fr 1fr; gap: 7px 24px; }
.roster-bars li { display: grid; grid-template-columns: 92px 1fr 26px; align-items: center; gap: 10px; font: 600 12px/1 Jakarta; color: var(--muted); }
.roster-bars b { position: relative; height: 6px; border-radius: 999px; background: #ffffff10; overflow: hidden; }
.roster-bars b::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, var(--coral), var(--ember)); transform-origin: left;
  transition: transform 1s var(--motion) calc(var(--d, 0) * 70ms + 200ms), filter 200ms; }
.roster-team.enter:not(.is-in) .roster-bars b::before { transform: scaleX(0); }
.roster-car .roster-bars b::before { background: linear-gradient(90deg, var(--team), color-mix(in srgb, var(--team) 60%, white)); }
.roster-bars em { font-style: normal; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

.roster-note { max-width: 760px; padding: 36px; }
.roster-note h2 { margin-bottom: 16px; }
.roster-note > p:not(.kicker) { font-size: 18px; color: #c9d0d3; }
.finale-action { margin-top: 28px; }

@media (max-width: 1080px) {
  .roster-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .roster-drivers, .roster-car .roster-bars { grid-template-columns: 1fr; }
}