/* MaliWikis F1 (2026-10-21): the racing theme for the F1 section (the hub and
   its articles; build.rb marks their <body data-wsec="f1"> and loads this
   after space.css). Formula 1's own palette: red #FF1E00 on carbon black
   #15151E (brandcolorcode.com/formula-one). The page is plain black #000 in
   both themes, with neutral grey boxes and no carbon weave (2026-10-24, the
   user's call).
   The site header, tab bar and footer keep their own look: space.css block 2
   sets their tokens on the elements themselves, so the page tokens below
   never reach them. */

/* ---------- tokens ---------- */
:root:root:root:has(body[data-wsec="f1"]) {
  color-scheme: dark;
  --bg: #000000;
  --surface: #121212;
  --surface-soft: #1C1C1C;
  --fill: #1C1C1C;
  --text: #FFFFFF;
  --muted: #A3A3A3;
  --edge: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #FF1E00;
  --accent-hover: #FF4A33;
  --accent-2: #FF1E00;
  --accent-soft: rgba(255, 30, 0, 0.14);
  --accent-line: rgba(255, 30, 0, 0.55);
  --sp-glow: rgba(255, 30, 0, 0.16);
  --f1-row: rgba(255, 255, 255, 0.03);
}
/* no stars and no texture on the track: plain black */
body[data-wsec="f1"]::before, body[data-wsec="f1"]::after { display: none !important; }

/* ---------- type: italic, like the broadcast graphics ---------- */
:root:root:root body[data-wsec="f1"] .wk :is(h1, h2) { font-style: italic; }
body[data-wsec="f1"] .wk h1 { text-transform: uppercase; }
body[data-wsec="f1"] .wk-kicker { color: var(--accent); }
body[data-wsec="f1"] .wk-body h2::before {
  content: ""; display: inline-block; width: 22px; height: 8px; margin-right: 10px; vertical-align: .22em;
  background: repeating-linear-gradient(90deg, var(--accent) 0 5.5px, #fff 5.5px 11px); border-radius: 1px;
  transform: skewX(-20deg);
}
body[data-wsec="f1"] :is(.wk-title-ic, .wk-card-ic) { background: #121212; border-color: rgba(255, 255, 255, .1); }

/* ---------- hero (black in both themes) ---------- */
.f1-hero {
  --text: #FFFFFF; --muted: #B5B5C6; --accent: #FF1E00; --edge: rgba(255, 255, 255, .14); --line: rgba(255, 255, 255, .08);
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 32px 40px; border-radius: 22px;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255, 30, 0, .22), transparent 55%), #000;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .08);
}
/* speed stripes on the right, a chequered flag along the bottom */
.f1-hero::before {
  content: ""; position: absolute; z-index: -1; top: -40px; right: -60px; width: 46%; height: 140%;
  background: repeating-linear-gradient(115deg, transparent 0 26px, rgba(255, 30, 0, .85) 26px 34px, transparent 34px 52px, rgba(255, 255, 255, .06) 52px 56px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%);
  opacity: .55;
}
.f1-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: conic-gradient(#fff 25%, #15151E 0 50%, #fff 0 75%, #15151E 0) 0 0 / 14px 14px;
  opacity: .9;
}
.f1-hero .wk-crumbs a, .f1-hero .wk-crumbs ol { color: var(--muted); }
.f1-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 12px/1.3 var(--sp-display, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.f1-flag { width: 26px; height: 6px; background: var(--accent); transform: skewX(-24deg); border-radius: 1px; box-shadow: 8px 0 0 -1px #fff; }
.f1-hero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 64px); }
.f1-hero .f1-sum { color: #D6D6E2; max-width: 60ch; }

/* the next race */
.f1-next { margin-top: 26px; max-width: 760px; }
.f1-nx { padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-left: 4px solid var(--accent); }
.f1-nx-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 700 12px/1.3 var(--sp-display, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.f1-nx-k.is-live { color: #fff; }
.f1-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.f1-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: f1Pulse 1.6s ease-out infinite; }
@keyframes f1Pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.f1-nx-name { margin: 6px 0 2px; font: italic 700 clamp(22px, 3vw, 30px)/1.2 var(--sp-display, inherit); color: #fff; }
.f1-nx-where { margin: 0; font-size: 14px; color: var(--muted); }
.f1-chip { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; letter-spacing: .04em; font-size: 11px; }
.f1-cd { margin-top: 16px; }
.f1-cd-k { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.f1-cd-n { display: flex; gap: 8px; }
.f1-cd-n span { display: grid; justify-items: center; min-width: 74px; padding: 8px 10px 7px; border-radius: 10px; background: #0B0B11; border: 1px solid rgba(255, 255, 255, .1); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.f1-cd-n b { font: italic 700 30px/1.05 var(--sp-display, inherit); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.f1-hero .f1-sess { margin-top: 16px; }

.f1-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.f1-jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-decoration: none; font: 600 13px/1.2 var(--sp-display, inherit); transition: background-color .2s, border-color .2s; }
.f1-jump a:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- sections ---------- */
.f1-sec { margin-top: 60px; padding: 0 !important; scroll-margin-top: 90px; } /* style.css pads every <section> */
.f1-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 18px; }
.f1-sec-h h2 { position: relative; margin: 0; padding-left: 20px; font: italic 700 clamp(24px, 3vw, 32px)/1.2 var(--sp-display, inherit); }
.f1-sec-h h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 7px; background: var(--accent); transform: skewX(-14deg); border-radius: 1px; }
.f1-sec-h p { margin: 0; font-size: 14px; color: var(--muted); }
.f1-wait, .f1-err { margin: 0; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); font-size: 15px; }
.f1-err { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.f1-err p { margin: 0; }
.f1-retry { padding: 9px 16px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font: 600 14px/1 var(--sp-display, inherit); cursor: pointer; }

/* tabs */
.f1-tabs { position: relative; display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--edge); }
.f1-tabs button { padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 14px/1.2 var(--sp-display, inherit); cursor: pointer; transition: background-color .2s, color .2s; }
.f1-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.f1-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* standings tables */
.f1-table { overflow-x: auto; border: 1px solid var(--edge); border-radius: 16px; background: var(--surface); }
.f1-tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.f1-tbl th { padding: 11px 14px; text-align: left; font: 600 11.5px/1.2 var(--sp-display, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.f1-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.f1-tbl tbody tr:nth-child(even) { background: var(--f1-row); }
.f1-tbl tr:last-child td { border-bottom: 0; }
.f1-tbl .f1-c-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f1-pos { width: 1%; font: italic 700 18px/1 var(--sp-display, inherit); text-align: center; }
.f1-tbl tbody tr:first-child .f1-pos { color: var(--accent); }
/* a table cell stays a table cell (display: flex on a <td> pulled it out of the row); its parts sit inline */
.f1-who { white-space: nowrap; }
.f1-who > * { vertical-align: middle; white-space: normal; }
.f1-who > .f1-bar, .f1-who > .f1-logo { display: inline-block; margin-right: 12px; }
.f1-who > .f1-logo { display: inline-grid; }
.f1-who > span:last-child { display: inline-grid; gap: 2px; min-width: 0; }
.f1-who b { font-weight: 700; }
.f1-who small { font-size: 12.5px; color: var(--muted); letter-spacing: .03em; }
.f1-bar { flex: none; width: 5px; height: 26px; border-radius: 2px; background: var(--tc); transform: skewX(-12deg); }
.f1-c-team-sm { display: none; }
.f1-pts b { font: italic 700 17px/1 var(--sp-display, inherit); }
.f1-pts small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
/* points bar: the team's points as a share of the leader's. Every track is the
   same length (it used to follow the name's width, so bars couldn't be compared) */
.f1-meter { display: block; width: 180px; max-width: 42vw; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.f1-meter i { display: block; transform-origin: left; height: 100%; background: var(--tc); border-radius: 3px; }
.f1-thai { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 2px 8px 2px 4px; border-radius: 999px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); font-size: 11px; font-weight: 700; vertical-align: .1em; white-space: nowrap; }
.f1-thai::before { content: ""; flex: none; width: 15px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, #A51931 0 16.6%, #F4F5F8 16.6% 33.3%, #2D2A4A 33.3% 66.6%, #F4F5F8 66.6% 83.3%, #A51931 83.3%); }
.f1-drv-who .f1-thai { margin: 4px 0 0; justify-self: start; }

/* session lists (the next race and the calendar) */
.f1-sess { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.f1-sess li { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px 64px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 9px; font-size: 14px; }
.f1-sess li:nth-child(odd) { background: color-mix(in srgb, var(--text) 4%, transparent); }
.f1-sess .is-race .f1-s-n { font-weight: 700; color: var(--accent); }
.f1-sess .is-done { opacity: .55; }
.f1-s-d { color: var(--muted); white-space: nowrap; }
.f1-s-t { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.f1-tag { justify-self: end; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line-strong); white-space: nowrap; }
.f1-tag.is-live { color: #fff; background: var(--accent); border-color: var(--accent); }
.f1-tag.is-next { color: var(--accent); border-color: var(--accent-line); }

/* calendar */
.f1-cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f1-r details { border: 1px solid var(--edge); border-radius: 14px; background: var(--surface); overflow: hidden; }
.f1-r.is-done details { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.f1-r.is-next details { border-color: var(--accent-line); box-shadow: inset 4px 0 0 var(--accent); }
.f1-r summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px 120px; align-items: center; gap: 12px; padding: 12px 16px; }
.f1-r summary::-webkit-details-marker { display: none; }
.f1-r summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 14px; }
.f1-r-n { font: italic 700 17px/1 var(--sp-display, inherit); color: var(--muted); }
.f1-r.is-next .f1-r-n { color: var(--accent); }
.f1-r-main { display: grid; gap: 2px; min-width: 0; }
.f1-r-main b { font: 700 15.5px/1.3 var(--sp-display, inherit); }
.f1-r-main small { font-size: 12.5px; color: var(--muted); }
.f1-spr { color: var(--accent); font-weight: 700; }
.f1-r-date { font-size: 14px; font-weight: 600; white-space: nowrap; }
.f1-r-res { justify-self: end; }
.f1-win { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.f1-win b { color: var(--text); font-style: italic; letter-spacing: .03em; }
.f1-win .f1-bar { height: 16px; width: 4px; }
.f1-r-more { padding: 0 16px 14px 80px; }
.f1-r-circ { margin: 0 0 8px; font-size: 13px; color: var(--muted); }

/* team cards */
.f1-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.f1-team { position: relative; padding: 18px 18px 16px; border: 1px solid var(--edge); border-radius: 16px; background: var(--surface); overflow: hidden; }
.f1-team::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--tc); }
.f1-team::after { content: ""; position: absolute; top: -30px; right: -30px; width: 140px; height: 140px; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 22%, transparent), transparent); pointer-events: none; }
.f1-team-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; }
.f1-team-pos { font: italic 700 15px/1 var(--sp-display, inherit); color: var(--muted); }
.f1-team h3 { margin: 0; font: italic 700 21px/1.2 var(--sp-display, inherit); }
.f1-team-pts { font-size: 13px; color: var(--muted); white-space: nowrap; }
.f1-team-pts b { font: italic 700 18px/1 var(--sp-display, inherit); color: var(--text); }
.f1-team-blurb { margin: 10px 0 12px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.f1-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; margin: 0 0 14px; padding: 12px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.f1-facts div { min-width: 0; }
.f1-facts dt { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.f1-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.f1-drivers { display: grid; gap: 8px; }
.f1-drv-who { display: grid; gap: 2px; min-width: 0; }
.f1-drv-who b { font-size: 15px; }
.f1-drv-who small { font-size: 12.5px; color: var(--muted); }
.f1-drv-st { display: grid; justify-items: end; gap: 2px; }
.f1-drv-st b { font: italic 700 16px/1 var(--sp-display, inherit); }
.f1-drv-st small { font-size: 12px; color: var(--muted); white-space: nowrap; }

.f1-src { margin: 40px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.f1-src a { color: var(--accent); }

/* "New to F1" cards sit right under their heading */
.f1 #new .wk-cards { margin-top: 0; }

/* ---------- tablet and phone ---------- */
@media (max-width: 900px) {
  .f1-r summary { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .f1-r-date { grid-column: 2; grid-row: 2; font-size: 13px; color: var(--muted); font-weight: 500; }
  .f1-r-res { grid-column: 3; grid-row: 1 / span 2; }
  .f1-r-more { padding-left: 16px; }
}
@media (max-width: 700px) {
  .f1-hero { margin: 0 -4px; padding: 18px 18px 34px; border-radius: 18px; }
  .f1-hero::before { width: 70%; opacity: .35; }
  .f1-nx { padding: 16px; }
  .f1-cd-n span { min-width: 0; flex: 1; }
  .f1-cd-n b { font-size: 26px; }
  .f1-sess li { grid-template-columns: minmax(0, 1fr) auto 46px; gap: 8px; padding: 7px 10px; font-size: 13.5px; }
  .f1-sess .f1-tag { grid-column: 1 / -1; justify-self: start; margin-top: -2px; }
  .f1-sec { margin-top: 44px; }
  .f1-c-team { display: none; }
  .f1-c-team-sm { display: inline; }
  .f1-tbl td, .f1-tbl th { padding: 9px 10px; }
  .f1-tbl { font-size: 14px; }
  .f1-teams { grid-template-columns: minmax(0, 1fr); }
  .f1-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .f1-r summary { padding: 11px 12px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .f1-dot::after { animation: none; }
  .f1-jump a, .f1-tabs button { transition: none; }
}

/* light mode: pale team colours (Haas, Cadillac) need more ink as text */

/* =====================================================================
   Real photos, logos, the podium, the driver card and motion (2026-10-21)
   ===================================================================== */

/* ---------- portraits (Wikipedia photos; initials until they load) ---------- */
.f1-face { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc, var(--accent)) 55%, #fff), color-mix(in srgb, var(--tc, var(--accent)) 80%, #000)); color: #fff; }
.f1-face b { font: italic 700 15px/1 var(--sp-display, inherit); letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.f1-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: 0; transform: scale(1.08); transition: opacity .45s, transform .6s cubic-bezier(.22, 1, .36, 1); }
.f1-face img.is-ok { opacity: 1; transform: none; }

/* ---------- team logos on a white plate ---------- */
.f1-logo { position: relative; display: inline-grid; place-items: center; flex: none; box-sizing: border-box; background: #fff; border-radius: 10px; box-shadow: 0 0 0 1px rgba(21, 21, 30, .08); }
/* the image fills the plate inside its padding (a % height on a grid item would not resolve) */
.f1-logo img { position: absolute; inset: 0; box-sizing: border-box; padding: inherit; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s; }
.f1-logo img.is-ok { opacity: 1; }
.f1-logo b { font: italic 700 14px/1.1 var(--sp-display, inherit); color: #15151E; text-align: center; }
.f1-logo-sm { width: 46px; height: 30px; padding: 4px 5px; border-radius: 7px; }
.f1-logo-team { width: 74px; height: 50px; padding: 6px 8px; }
.f1-logo-pod { width: 132px; height: 92px; padding: 12px 14px; border-radius: 16px; }
.f1-logo-dc { position: absolute; right: 14px; bottom: 14px; width: 84px; height: 54px; padding: 7px 9px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }

/* ---------- standings panels: the podium above each table ---------- */
.f1-panel > .f1-table { margin-top: 18px; }
.f1-podium { list-style: none; margin: 4px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; max-width: 860px; }
.f1-pod { display: flex; flex-direction: column; min-width: 0; }
.f1-pod-b { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 12px 14px; border: 1px solid var(--edge); border-bottom: 0; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, var(--surface)), var(--surface) 70%); color: var(--text); font: inherit; text-align: center; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.f1-pod-b::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--tc); }
.f1-pod-b:hover { transform: translateY(-4px); }
.f1-pod-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.f1-pod-pic { position: relative; margin-bottom: 6px; }
.f1-face-pod { width: 104px; height: 104px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--tc); }
.is-p1 .f1-face-pod { width: 128px; height: 128px; }
.f1-pod-b:hover .f1-face img.is-ok { transform: scale(1.06); }
.f1-pod-no { position: absolute; right: -6px; bottom: -2px; min-width: 30px; padding: 3px 6px; border-radius: 8px; background: var(--tc); color: #fff; font: italic 700 14px/1 var(--sp-display, inherit); text-shadow: 0 1px 1px rgba(0, 0, 0, .3); box-shadow: 0 0 0 2px var(--surface); }
.f1-pod-name { font: 600 14px/1.15 var(--sp-display, inherit); }
.f1-pod-name span { display: inline-block; margin-top: 2px; font: italic 700 19px/1.1 var(--sp-display, inherit); text-transform: uppercase; letter-spacing: .01em; }
.is-p1 .f1-pod-name span { font-size: 23px; }
.f1-podium .f1-logo-pod + * { margin-top: 2px; }
#f1Teams .f1-pod-name { font: italic 700 18px/1.15 var(--sp-display, inherit); }
.f1-pod-sub { font-size: 12.5px; color: var(--muted); }
.f1-pod-pts { margin-top: 2px; font-size: 13px; color: var(--muted); }
.f1-pod-pts b { font: italic 700 24px/1 var(--sp-display, inherit); color: var(--text); font-variant-numeric: tabular-nums; }
.f1-pod-step { position: relative; display: grid; place-items: center; height: 54px; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 85%, #000), color-mix(in srgb, var(--tc) 55%, #000)); overflow: hidden; }
.is-p1 .f1-pod-step { height: 92px; }
.is-p3 .f1-pod-step { height: 36px; }
.f1-pod-step b { font: italic 700 32px/1 var(--sp-display, inherit); color: rgba(255, 255, 255, .92); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.is-p3 .f1-pod-step b { font-size: 24px; }
/* a light sheen runs over the winner's step */
.is-p1 .f1-pod-step::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: f1Sheen 4.5s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
@keyframes f1Sheen { 0%, 70% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }

/* clickable names in the tables */
.f1-dlink { padding: 0; border: 0; background: none; color: inherit; font: 700 inherit/1.3 inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; background-image: linear-gradient(var(--tc, var(--accent)), var(--tc, var(--accent))); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s cubic-bezier(.22, 1, .36, 1); }
.f1-dlink:hover, .f1-dlink:focus-visible { background-size: 100% 2px; outline: none; }
.f1-tbl tbody tr { transition: background-color .2s; }
.f1-tbl tbody tr:hover { background: color-mix(in srgb, var(--tc) 9%, transparent); }


/* the sliding tab pill */
.f1-tabs.has-pill button[aria-selected="true"] { background: transparent; }
.f1-tabs button { position: relative; z-index: 1; }
.f1-tab-pill { position: absolute; left: 4px; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 6px 16px -6px var(--accent); transition: transform .42s cubic-bezier(.22, 1, .36, 1), width .42s cubic-bezier(.22, 1, .36, 1); }

/* ---------- team cards ---------- */
.f1-team { transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .25s, box-shadow .3s; scroll-margin-top: 100px; }
.f1-team:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tc) 50%, var(--edge)); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--tc) 70%, #000); }
.f1-team::before { transform-origin: left; transition: height .3s; }
.f1-team:hover::before { height: 7px; }
.f1-team-h { grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; }
.f1-team.is-flash { animation: f1Flash 1.4s cubic-bezier(.22, 1, .36, 1); }
@keyframes f1Flash { 0%, 40% { box-shadow: 0 0 0 3px var(--tc), 0 18px 40px -16px var(--tc); } 100% { box-shadow: 0 0 0 0 transparent; } }
.f1-drv { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; width: 100%; padding: 9px 12px 9px 9px; border: 1px solid transparent; border-radius: 14px; background: var(--surface-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.f1-drv:hover { border-color: color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 8%, var(--surface-soft)); transform: translateX(3px); }
.f1-drv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f1-drv-pic { position: relative; }
.f1-drv-pic .f1-face { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--tc); }
.f1-drv:hover .f1-face img.is-ok { transform: scale(1.08); }
.f1-drv-no { position: absolute; right: -7px; bottom: -4px; min-width: 22px; padding: 2px 4px; border-radius: 6px; background: var(--tc); color: #fff; font: italic 700 12px/1 var(--sp-display, inherit); text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); box-shadow: 0 0 0 2px var(--surface-soft); }
.f1-drv-go { font-size: 20px; color: var(--muted); transition: transform .25s; }
.f1-drv:hover .f1-drv-go { transform: translateX(3px); color: var(--tc); }

/* ---------- the driver card ---------- */
html.f1-lock { overflow: hidden; }
.f1-dlg { width: min(860px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--text); overflow: visible; }
.f1-dlg::backdrop { background: rgba(8, 8, 14, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: f1Fade .3s ease both; }
.f1-dlg[open] .f1-dc { animation: f1Pop .46s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes f1Fade { from { opacity: 0; } }
@keyframes f1Pop { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.f1-dc { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-height: calc(100dvh - 40px); overflow: auto; border-radius: 22px; background: var(--surface); border: 1px solid var(--edge); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.f1-dc-x { position: absolute; z-index: 3; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font: 400 26px/1 sans-serif; cursor: pointer; transition: background-color .2s, transform .3s cubic-bezier(.22, 1, .36, 1); }
.f1-dc-x:hover { background: var(--accent); color: #fff; transform: rotate(90deg); }
.f1-dc-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f1-dc-pic { position: relative; min-height: 360px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--tc) 70%, #fff 0%), color-mix(in srgb, var(--tc) 55%, #000)); }
.f1-dc-pic::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(0, 0, 0, .45)); pointer-events: none; }
.f1-dc-no { position: absolute; left: -6px; bottom: -22px; font: italic 700 210px/1 var(--sp-display, inherit); color: rgba(255, 255, 255, .16); letter-spacing: -.04em; animation: f1NoIn .9s cubic-bezier(.22, 1, .36, 1) .1s both; }
@keyframes f1NoIn { from { opacity: 0; transform: translateX(-40px); } }
.f1-face-xl { position: absolute; inset: 0; border-radius: 0; background: transparent; }
.f1-face-xl b { font-size: 64px; opacity: .85; }
.f1-face-xl img { object-position: 50% 20%; }
.f1-dlg[open] .f1-face-xl img.is-ok { animation: f1PicIn .8s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes f1PicIn { from { opacity: 0; transform: scale(1.12) translateX(-12px); } }
.f1-dlg .f1-logo-dc { z-index: 2; }
.f1-dc-main { padding: 26px 28px 24px; display: grid; align-content: start; gap: 10px; }
.f1-dc-main > * { animation: f1Up .5s cubic-bezier(.22, 1, .36, 1) both; }
.f1-dc-main > :nth-child(2) { animation-delay: .05s; } .f1-dc-main > :nth-child(3) { animation-delay: .1s; } .f1-dc-main > :nth-child(4) { animation-delay: .15s; }
.f1-dc-main > :nth-child(5) { animation-delay: .2s; } .f1-dc-main > :nth-child(6) { animation-delay: .25s; } .f1-dc-main > :nth-child(n+7) { animation-delay: .3s; }
@keyframes f1Up { from { opacity: 0; transform: translateY(14px); } }
.f1-dc-k { display: flex; align-items: center; gap: 8px; margin: 0; padding-right: 44px; font: 700 12px/1.3 var(--sp-display, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.f1-dc-k .f1-bar { height: 16px; }
.f1-dc h2 { margin: 0; font: italic 700 clamp(26px, 3.4vw, 36px)/1.15 var(--sp-display, inherit); text-transform: uppercase; }
.f1-dc-latin { margin: -4px 0 0; font-size: 14px; color: var(--muted); }
.f1-dc .f1-thai { justify-self: start; margin: 0; }
.f1-dc-facts { margin: 4px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 14px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.f1-dc-facts div { min-width: 0; }
.f1-dc-facts dt { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.f1-dc-facts dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; }
.f1-dc-bio { margin: 2px 0 0; font-size: 15px; line-height: 1.75; color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.f1-wait-sm { color: var(--muted); font-size: 14px; }
.f1-dc-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: 13.5px; }
.f1-dc-links a { color: var(--accent); text-underline-offset: 3px; }
.f1-dc-mate { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 6px; padding: 8px 12px 8px 8px; border: 1px solid var(--edge); border-radius: 14px; background: var(--surface-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.f1-dc-mate:hover { border-color: var(--tc); transform: translateX(3px); }
.f1-dc-mate .f1-face { width: 44px; height: 44px; }
.f1-dc-mate small { display: block; font-size: 11.5px; color: var(--muted); }
.f1-dc-mate b { font-size: 15px; }
.f1-dc-mate i { font-style: normal; font-size: 20px; color: var(--muted); }
.f1-face-sm b { font-size: 13px; }

/* ---------- hero: start lights and speed streaks ---------- */
/* five red lights come on one by one, then all go out together: "lights out and away we go" */
.f1-lights { display: inline-flex; gap: 5px; margin-left: 4px; padding: 4px 6px; border-radius: 7px; background: #0B0B11; border: 1px solid rgba(255, 255, 255, .1); }
.f1-lights i { width: 9px; height: 9px; border-radius: 50%; background: #2a1414; animation: f1Light calc(2.4s - var(--n) * .3s) linear calc(.5s + var(--n) * .3s) both; }
.f1-lights i:nth-child(1) { --n: 0; } .f1-lights i:nth-child(2) { --n: 1; } .f1-lights i:nth-child(3) { --n: 2; } .f1-lights i:nth-child(4) { --n: 3; } .f1-lights i:nth-child(5) { --n: 4; }
@keyframes f1Light { 0% { background: #2a1414; box-shadow: none; } 0.5%, 99.5% { background: #FF1E00; box-shadow: 0 0 8px 1px rgba(255, 30, 0, .8); } 100% { background: #2a1414; box-shadow: none; } }
/* after the lights, streaks of light race across the hero */
.f1-streaks { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.f1-streaks i { position: absolute; left: 0; width: 34%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 70%, #fff); opacity: 0; transform: translateX(-110%); animation: f1Streak var(--du) cubic-bezier(.5, 0, .3, 1) var(--dl) infinite; }
.f1-streaks i:nth-child(1) { top: 18%; --du: 2.6s; --dl: 3s; }
.f1-streaks i:nth-child(2) { top: 34%; --du: 3.4s; --dl: 3.4s; width: 22%; }
.f1-streaks i:nth-child(3) { top: 52%; --du: 2.2s; --dl: 3.1s; background: linear-gradient(90deg, transparent, rgba(255, 30, 0, .7) 70%, #FF4A33); }
.f1-streaks i:nth-child(4) { top: 66%; --du: 3.9s; --dl: 4.2s; width: 26%; }
.f1-streaks i:nth-child(5) { top: 78%; --du: 2.9s; --dl: 3.7s; background: linear-gradient(90deg, transparent, rgba(255, 30, 0, .6) 70%, #FF4A33); }
.f1-streaks i:nth-child(6) { top: 9%; --du: 4.6s; --dl: 5s; width: 18%; }
@keyframes f1Streak { 0% { opacity: 0; transform: translateX(-110%); } 10% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: 0; transform: translateX(400%); } }
/* the stripes on the right drift a little */
.f1-hero::before { animation: f1Drift 9s ease-in-out infinite alternate; }
@keyframes f1Drift { to { transform: translateX(-28px); } }
/* the next race card: a sheen passes when it appears, and its edge glows on a live session */
.f1-nx { position: relative; overflow: hidden; }
.f1-nx::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .08), transparent); transform: skewX(-18deg); animation: f1NxSheen 1.6s cubic-bezier(.4, 0, .2, 1) .7s both; pointer-events: none; }
@keyframes f1NxSheen { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(560%) skewX(-18deg); } }
.f1-nx:has(.is-live) { animation: f1Glow 2s ease-in-out infinite; }
@keyframes f1Glow { 50% { box-shadow: 0 0 0 1px rgba(255, 30, 0, .5), 0 0 28px -6px rgba(255, 30, 0, .6); } }
.f1-cd-n b { display: inline-block; }
.f1-jump a { transition: background-color .2s, border-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.f1-jump a:hover { transform: translateY(-2px); }

/* ---------- calendar: an opened race unfolds ---------- */
.f1-r details[open] .f1-r-more { animation: f1Up .38s cubic-bezier(.22, 1, .36, 1); }
.f1-r summary { transition: background-color .2s; }
.f1-r summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.f1-r.is-next details { animation: f1NextEdge 2.4s ease-in-out infinite; }
@keyframes f1NextEdge { 50% { box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px var(--accent-line), 0 10px 26px -18px var(--accent); } }

/* waiting to scroll into view (only when motion is on; f1.js adds and removes it) */
.f1-pre { opacity: 0; }

/* ---------- phone ---------- */
@media (max-width: 700px) {
  .f1-podium { gap: 7px; }
  .f1-pod-b { padding: 12px 4px 10px; border-radius: 14px 14px 0 0; }
  .f1-face-pod { width: 68px; height: 68px; }
  .is-p1 .f1-face-pod { width: 84px; height: 84px; }
  .f1-pod-no { font-size: 11px; min-width: 22px; padding: 2px 4px; }
  .f1-pod-name { font-size: 11.5px; }
  .f1-pod-name span, .is-p1 .f1-pod-name span { font-size: 14.5px; }
  .f1-pod-sub { display: none; }
  .f1-pod-pts { font-size: 11px; }
  .f1-pod-pts b { font-size: 18px; }
  .f1-pod-step { height: 38px; } .is-p1 .f1-pod-step { height: 62px; } .is-p3 .f1-pod-step { height: 26px; }
  .f1-pod-step b { font-size: 22px; } .is-p3 .f1-pod-step b { font-size: 17px; }
  .f1-logo-pod { width: 88px; height: 62px; padding: 8px; }
  #f1Teams .f1-pod-name { font-size: 13.5px; }
  .f1-who > .f1-logo-sm { display: none; }
  .f1-logo-team { width: 58px; height: 40px; padding: 5px 6px; }
  .f1-drv { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .f1-drv-go { display: none; }
  .f1-drv-pic .f1-face { width: 48px; height: 48px; }
  .f1-dlg { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .f1-dc { grid-template-columns: minmax(0, 1fr); max-height: 92dvh; border-radius: 22px 22px 0 0; }
  .f1-dlg[open] .f1-dc { animation-name: f1Sheet; }
  @keyframes f1Sheet { from { transform: translateY(60%); opacity: .4; } }
  .f1-dc-pic { min-height: 0; height: 300px; }
  .f1-dc-no { font-size: 150px; }
  .f1-dc-main { padding: 20px 18px 28px; }
  .f1-dc-facts { grid-template-columns: minmax(0, 1fr); }
  .f1-lights { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .f1-streaks, .f1-nx::after { display: none; }
  .f1-lights i, .f1-hero::before, .is-p1 .f1-pod-step::after, .f1-nx:has(.is-live), .f1-r.is-next details,
  .f1-dlg::backdrop, .f1-dlg[open] .f1-dc, .f1-dc-main > *, .f1-dc-no, .f1-dlg[open] .f1-face-xl img.is-ok, .f1-r details[open] .f1-r-more, .f1-team.is-flash { animation: none; }
  .f1-face img, .f1-logo img, .f1-tab-pill, .f1-team, .f1-drv, .f1-pod-b, .f1-dlink, .f1-dc-x, .f1-dc-mate { transition: none; }
}

/* ---------- session results (2026-10-24) ----------
   A weekend picker and one chip per session, then P1, P2 and P3 as cards
   (no photos: the team colour and the three-letter code) in gold, silver
   and bronze, then every driver's time. */
.f1-res { --gold: #E8B23A; --silver: #B9BEC9; --bronze: #C9824E; }
.f1-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.f1-rbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.f1-rwk select { max-width: 100%; padding: 10px 38px 10px 16px; border-radius: 999px; border: 1px solid var(--edge); color: var(--text); font: 600 14px/1.2 var(--sp-display, inherit); cursor: pointer;
  -webkit-appearance: none; appearance: none; background: var(--surface-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FF1E00' stroke-width='2'/%3E%3C/svg%3E") right 15px center / 12px 8px no-repeat; }
.f1-rwk select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f1-rses { display: flex; flex-wrap: wrap; gap: 6px; }
.f1-rses button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 600 13.5px/1.2 var(--sp-display, inherit); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.f1-rses button.is-soon { color: var(--muted); border-style: dashed; }
.f1-rses button:hover { border-color: var(--accent); }
.f1-rses button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.f1-rses button[aria-pressed="true"] .f1-dot, .f1-rses button[aria-pressed="true"] .f1-dot::after { background: #fff; }
.f1-rses button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f1-rhead { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.f1-rhead b { color: var(--text); font: italic 700 17px/1.2 var(--sp-display, inherit); }

.f1-rtop { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; }
.f1-rtbl tbody tr:first-child .f1-pos { color: inherit; }   /* the table starts at P4: no leader red */
.f1-rtop li { --m: var(--gold); position: relative; display: grid; align-content: start; gap: 2px; padding: 16px 16px 14px 22px; border: 1px solid var(--edge); border-radius: 16px; background: var(--surface); overflow: hidden; }
.f1-rtop li.is-p2 { --m: var(--silver); } .f1-rtop li.is-p3 { --m: var(--bronze); }
.f1-rtop li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tc); }
.f1-rtop li::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--m); }
.f1-rtop-p { justify-self: start; margin-bottom: 6px; padding: 3px 10px; border-radius: 6px; background: var(--m); color: #15151E; font: italic 700 14px/1.2 var(--sp-display, inherit); transform: skewX(-10deg); }
.f1-rtop-code { font: italic 700 30px/1.05 var(--sp-display, inherit); letter-spacing: .02em; }
.f1-rtop-n { font-size: 14px; line-height: 1.35; }
.f1-rtop-n b, .f1-rtop-n .f1-dlink { font-weight: 600; }
.f1-rtop-tm { font-size: 12.5px; color: var(--muted); }
.f1-rtop-t { display: grid; gap: 2px; margin-top: 10px; font: italic 700 22px/1.1 var(--sp-display, inherit); font-variant-numeric: tabular-nums; }
.f1-rtop-t small { font: 600 13px/1.2 var(--sp-display, inherit); color: var(--muted); font-style: normal; }
.f1-rtop-pt { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); }

.f1-rname b, .f1-rname .f1-dlink { font-weight: 700; }
.f1-rt { font-weight: 700; }
.f1-rt small, .f1-tbl .f1-c-n small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.f1-c-q { color: var(--muted); }
.f1-c-q.is-best { color: var(--text); font-weight: 700; }
.f1-c-best { display: none; }
.f1-tbl .f1-c-laps { color: var(--muted); }
.f1-x { display: inline-block; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }

@media (max-width: 700px) {
  .f1-rbar { gap: 10px; }
  .f1-rwk, .f1-rwk select { width: 100%; }
  /* the chips wrap onto a second line instead of scrolling, so none is cut off */
  .f1-rses button { padding: 8px 13px; }
  /* the top three as rows: the place, the driver, the time */
  .f1-rtop { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .f1-rtop li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 0; padding: 12px 14px 12px 18px; }
  .f1-rtop-p { grid-row: 1 / span 2; margin: 0; }
  .f1-rtop-code { grid-column: 2; font-size: 22px; }
  .f1-rtop-n { grid-column: 2; font-size: 13px; }
  .f1-rtop-tm, .f1-rtop-pt { display: none; }
  .f1-rtop-t { grid-column: 3; grid-row: 1 / span 2; margin: 0; justify-items: end; font-size: 17px; }
  .f1-c-q { display: none; }
  .f1-c-best { display: table-cell; }
  .f1-rtbl.is-r .f1-c-laps { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f1-rses button { transition: none; }
}