/* F1 */
.f1-flag { width: 28px; height: 16px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.f1-hero { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, #e10600 20%, var(--panel)), var(--panel) 70%); }
.f1-hero.static { cursor: default; }
.f1-hero:not(.static):hover { box-shadow: var(--shadow); }
.f1-hero h2 { margin: 6px 0 4px; font-size: 22px; }
.f1-hero-top { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.f1-circuit { width: 190px; max-height: 130px; object-fit: contain; }
/* F1's circuit maps are drawn in black; flip them on the dark theme. */
:root:not([data-theme="light"]) .f1-circuit { filter: invert(1) brightness(.9); }
.f1-countdown { margin-top: 14px; }
.f1-cd-label { font-size: 12px; color: var(--muted); }
.f1-cd { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.f1-sess { display: grid; grid-template-columns: 1fr 120px 60px 110px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.f1-sess:first-child { border-top: 0; }
.f1-sess > :last-child { text-align: right; }
.f1-sess.done { color: var(--muted); }
.f1-sess.live { background: color-mix(in srgb, var(--live) 10%, transparent); }
.f1-sess .t { font-weight: 700; }
.f1-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; cursor: pointer; }
.pod { text-align: center; display: grid; justify-items: center; gap: 2px; min-width: 0; }
.pod-photo { width: 84px; height: 84px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--panel-3); box-shadow: 0 0 0 3px var(--team); margin-bottom: 6px; }
.pod.p1 .pod-photo { width: 100px; height: 100px; }
.pod .pn { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pod .step { width: 100%; margin-top: 8px; border-radius: 10px 10px 0 0; font-weight: 800; font-size: 20px; color: #fff; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--team), color-mix(in srgb, var(--team) 55%, black)); }
.pod.p1 .step { height: 70px; } .pod.p2 .step { height: 52px; } .pod.p3 .step { height: 38px; }
.f1-row { display: grid; grid-template-columns: 44px 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.f1-row:first-child { border-top: 0; }
.f1-row:hover { background: var(--panel-2); }
.f1-row.team { cursor: default; }
.f1-photo { width: 44px; height: 44px; object-fit: cover; object-position: top; border-radius: 50%; background: var(--panel-3); box-shadow: 0 0 0 2px var(--team); }
.f1-stripe { width: 8px; height: 40px; border-radius: 4px; background: var(--team); justify-self: center; }
.f1-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1-team { font-size: 12px; color: var(--team); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1-link { cursor: pointer; }
.f1-link:hover { text-decoration: underline; }
.f1-pts { text-align: right; display: grid; }
.f1-pts b { font-size: 18px; font-variant-numeric: tabular-nums; }
.f1-cal { display: grid; grid-template-columns: 30px 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.f1-cal:first-child { border-top: 0; }
.f1-cal:hover { background: var(--panel-2); }
.f1-cal.done .f1-name { color: var(--muted); }
.f1-cal.next { box-shadow: inset 3px 0 0 #e10600; background: color-mix(in srgb, #e10600 6%, transparent); }
.f1-round { font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.f1-cal-right { text-align: right; display: grid; justify-items: end; gap: 2px; }
.f1-winner { font-size: 13px; font-weight: 600; padding-left: 8px; border-left: 3px solid var(--team); white-space: nowrap; }
.f1-table td.l, .f1-table th.l { text-align: left; }
.f1-table th { cursor: default; }
.f1-table tbody tr { cursor: pointer; }
.f1-table tbody tr:hover { background: var(--panel-2); }
.tc { display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--team); margin-right: 8px; vertical-align: -2px; }
.f1-fast { color: #a855f7; }
.f1-badge { display: inline-flex; align-items: center; }
.tyres { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 5px; }
.ty-row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; }
.ty-name { font-size: 12px; font-weight: 700; border-left: 3px solid var(--team); padding-left: 6px; cursor: pointer; }
.ty-track { position: relative; height: 16px; background: var(--panel-3); border-radius: 4px; overflow: hidden; }
.ty-track i { position: absolute; top: 0; bottom: 0; border-right: 2px solid var(--panel); display: grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal; color: #111; }
.ty-legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; margin-top: 6px; color: var(--muted); }
.ty-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ty-legend i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; font-style: normal; color: #111; }
.f1-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px 6px; }
.f1-bars .b { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; cursor: pointer; min-width: 0; }
.f1-bars .b i { width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--team); }
.f1-bars .b:hover i { filter: brightness(1.2); }
.f1-bars .b span { font-size: 10px; color: var(--muted); }