/* ENTRANCE — site features layer
   Page transitions, the live-weekend pill, ⌘K search, add-to-calendar,
   the points race, the driver form strip and the ride-the-lap stage.
   Loaded on every page after the page's own stylesheets. */

/* --------------------------------------------------------------
   Page transitions (cross-document View Transitions)
   The header stays put; the page beneath it cross-fades and lifts a
   touch. Browsers without the feature navigate as before.
   -------------------------------------------------------------- */

@view-transition { navigation: auto; }

.site-header, .hx-header { view-transition-name: site-header; }

::view-transition-old(root) { animation: 160ms cubic-bezier(0.4, 0, 1, 1) both vt-fade-out; }
::view-transition-new(root) { animation: 260ms cubic-bezier(0.16, 1, 0.3, 1) both vt-fade-in; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation-duration: 200ms; }

@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --------------------------------------------------------------
   Header: the live pill and the search button
   -------------------------------------------------------------- */

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: var(--paper, #fcfcfc);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 200ms var(--ease-out, ease), background-color 200ms var(--ease-out, ease);
}

.live-pill:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06); }
.live-pill:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.live-pill-label { letter-spacing: .04em; text-transform: uppercase; font-size: .6875rem; }
.live-pill-detail { color: rgba(255, 255, 255, .72); font-weight: 600; }
.live-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }
.live-pill.is-live { border-color: rgba(225, 6, 0, .55); }
.live-pill.is-live .live-pill-dot { background: #e10600; box-shadow: 0 0 0 0 rgba(225, 6, 0, .6); animation: live-ping 1800ms ease-out infinite; }
.live-pill.is-live .live-pill-label { color: #ff5a55; }

@keyframes live-ping {
  0% { box-shadow: 0 0 0 0 rgba(225, 6, 0, .55); }
  70% { box-shadow: 0 0 0 9px rgba(225, 6, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0); }
}

.topbar .live-pill { margin-left: auto; }
.topbar .live-pill + .search-btn, .topbar .live-pill + .edition { margin-left: 0; }
.hx-header-bar .live-pill { margin-left: auto; }
.hx-header-bar .live-pill ~ .hx-menu-btn { margin-left: 0; }

.search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px 0 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out, ease), color 200ms var(--ease-out, ease), background-color 200ms var(--ease-out, ease);
}

.search-btn:hover { border-color: rgba(255, 255, 255, .4); color: var(--paper, #fcfcfc); background: rgba(255, 255, 255, .06); }
.search-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.search-btn-key {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  color: rgba(255, 255, 255, .6);
  font: inherit;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.topbar .search-btn { margin-left: auto; }
.topbar .search-btn + .edition { margin-left: 0; }
.hx-header-bar .search-btn { margin-left: auto; z-index: 1010; position: relative; }
.hx-header-bar .search-btn ~ .hx-menu-btn { margin-left: 0; }
.hx-header-bar .hx-nav { margin-left: 0; }

/* the homepage header already carries the full nav, so its pill is the word
   and the dot, and its search button gives up its copy first */
.hx-header-bar .live-pill-detail { display: none; }

@media (max-width: 1600px) {
  .hx-header-bar .search-btn-key { display: none; }
}

@media (max-width: 1400px) {
  .hx-header-bar .search-btn-copy { display: none; }
  .hx-header-bar .search-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
}

/* the tablet bar: nine links plus the pill and the button fit once the bar
   and the list close up a little */
@media (min-width: 1024px) and (max-width: 1180px) {
  .hx-header-bar { gap: 14px; padding-inline: 16px; }
  .hx-header-bar .hx-nav-list { gap: 4px; }
  .hx-header-bar .hx-nav-list a { font-size: .8125rem; }
  .hx-header-bar .hx-brand-mark { width: 124px; }
}

@media (max-width: 860px) {
  .search-btn-copy, .search-btn-key { display: none; }
  .search-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .live-pill-detail { display: none; }
  .live-pill { padding-inline: 10px; }
}

/* the header buttons never squash: the brand gives way first */
.live-pill, .search-btn { flex: 0 0 auto; }
.hx-nav-search { display: none; }

@media (max-width: 1023px) {
  .hx-nav-search { display: block; }
  .hx-header-bar { gap: 14px; }
}

@media (max-width: 620px) {
  .topbar .live-pill { order: 2; }
  .topbar .search-btn { order: 3; }
  .topbar .nav-toggle { order: 5; }
  .hx-header-bar .search-btn { display: none; }
  .hx-header-bar .hx-brand-mark { width: clamp(120px, 34vw, 150px); }
}

/* --------------------------------------------------------------
   ⌘K search dialog
   -------------------------------------------------------------- */

.ss-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: min(72vh, 640px);
  margin: clamp(24px, 10vh, 120px) auto auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.ss-dialog::backdrop { background: rgba(20, 20, 20, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ss-dialog[open] { animation: ss-in 220ms var(--ease-out, ease) both; }
.ss-dialog[open]::backdrop { animation: ss-backdrop 220ms ease both; }
@keyframes ss-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@keyframes ss-backdrop { from { opacity: 0; } }

.ss-box { display: flex; flex-direction: column; max-height: inherit; }
.ss-field { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--line); }
.ss-icon { display: inline-flex; color: var(--muted); }
.ss-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  outline: none;
}
.ss-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ss-input::placeholder { color: var(--muted); font-weight: 500; }
.ss-esc {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.ss-esc:hover { color: var(--ink); }
.ss-esc:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.ss-results { flex: 1 1 auto; margin: 0; padding: 8px; overflow: auto; list-style: none; scrollbar-width: thin; }
.ss-heading { padding: 10px 12px 4px; color: var(--muted); font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ss-row { border-radius: 8px; }
.ss-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms var(--ease-out, ease);
}
.ss-row.is-active .ss-link { background: var(--surface); }
.ss-row.is-active .ss-title { color: var(--orange-dark); }
.ss-swatch { display: block; flex: 0 0 auto; width: 4px; height: 26px; border-radius: 2px; background: var(--team-colour, var(--tc-unknown, #c7c7c7)); }
.ss-copy { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ss-title { font-weight: 700; line-height: 1.3; }
.ss-sub { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-type { flex: 0 0 auto; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ss-row.is-active .ss-type { color: var(--ink); }
.ss-status { margin: 0; padding: 4px 20px 10px; color: var(--muted); font-size: var(--text-sm); min-height: 1.5em; }
.ss-status:empty { display: none; }
.ss-foot { display: flex; gap: 18px; margin: 0; padding: 10px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .6875rem; font-weight: 700; }
.ss-foot kbd { display: inline-block; min-width: 18px; margin-right: 4px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font: inherit; text-align: center; }

@media (max-width: 620px) {
  .ss-dialog { width: calc(100vw - 16px); margin-top: 8px; max-height: calc(100vh - 16px); }
  .ss-foot { display: none; }
  .ss-type { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-dialog[open], .ss-dialog[open]::backdrop { animation: none; }
}

/* --------------------------------------------------------------
   Add to calendar
   -------------------------------------------------------------- */

.ics-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 4px);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out, ease), color 180ms var(--ease-out, ease), background-color 180ms var(--ease-out, ease);
}
.ics-btn:hover { border-color: var(--ink); }
.ics-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.ics-icon { display: inline-flex; color: var(--orange-dark); }
.ics-status { margin: .75rem 0 0; color: var(--muted); font-size: var(--text-sm); min-height: 1.4em; }
.ics-status:empty { display: none; }

/* the chooser sheet */
.ics-sheet {
  width: min(520px, calc(100vw - 24px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.ics-sheet::backdrop { background: rgba(20, 20, 20, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ics-sheet[open] { animation: ss-in 220ms var(--ease-out, ease) both; }
.ics-sheet-box { padding: 20px 20px 18px; }
.ics-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ics-sheet-kicker { margin: 0 0 4px; color: var(--orange-dark); font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ics-sheet-title { margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
.ics-sheet-detail { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); }
.ics-sheet-close { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm, 4px); background: var(--paper); color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.ics-sheet-close:focus-visible, .ics-option:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
/* Remind me: one row of choices above the ways in */
.ics-remind { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 6px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); background: var(--surface); }
.ics-remind-label { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ics-remind-choices { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ics-remind-choice { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; transition: background-color 160ms var(--ease-out, ease), border-color 160ms var(--ease-out, ease), color 160ms var(--ease-out, ease); }
.ics-remind-choice:hover { border-color: var(--ink); }
.ics-remind-choice[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ics-remind-choice:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.ics-remind-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
@media (max-width: 420px) {
  .ics-remind { grid-template-columns: 1fr; }
  .ics-remind-choices { justify-content: flex-start; }
  .ics-remind-choice { flex: 1 1 auto; text-align: center; }
}
.ics-options { display: grid; gap: 8px; }
.ics-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 6px);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out, ease), background-color 160ms var(--ease-out, ease), transform 160ms var(--ease-out, ease);
}
.ics-option:hover { border-color: var(--ink); background: var(--surface); }
.ics-option .ics-icon { flex: 0 0 auto; }
.ics-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ics-option-copy strong { font-size: .9375rem; }
.ics-option-copy span { color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }
.ics-option-arrow { color: var(--orange-dark); font-weight: 700; }
.ics-sheet-note { margin: 14px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
@media (max-width: 620px) {
  .ics-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .ics-sheet-box { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .ics-sheet[open] { animation: none; } }

/* race weekend: one small button in the schedule head; on a phone it sits
   beside the title and the time toggle takes the next line */
.rw-schedule-head .ics-btn-weekend { order: 3; min-height: 40px; padding: 0 12px; }
@media (max-width: 760px) {
  .rw-schedule-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rw-schedule-head h2 { grid-column: 1; grid-row: 1; }
  .rw-schedule-head .ics-btn-weekend { grid-column: 2; grid-row: 1; order: 0; }
  .rw-schedule-head .rw-time-toggle { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* calendar page: the season button under the title, a chip on each card above the overlay link */
.calendar-header-copy .ics-btn-season { margin-top: .9rem; }
.calendar-race-card { position: relative; }
.calendar-race-card .ics-btn-race {
  position: relative;
  z-index: 4;
  align-self: start;
  margin-top: .5rem;
  min-height: 32px;
  padding: 0 9px;
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}
.calendar-race-card .ics-btn-race:hover { color: var(--ink); border-color: var(--line); background: var(--paper); }
@media (hover: hover) {
  .calendar-race-card .ics-btn-race { opacity: 0; transition: opacity 160ms var(--ease-out, ease), border-color 180ms, color 180ms, background-color 180ms; }
  .calendar-race-card:hover .ics-btn-race, .calendar-race-card:focus-within .ics-btn-race { opacity: 1; }
}


/* --------------------------------------------------------------
   Homepage: live now
   -------------------------------------------------------------- */

.hx-next.is-live .hx-countdown { display: none; }
.hx-live-now {
  display: grid;
  gap: 6px;
  margin: 18px 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(225, 6, 0, .35);
  border-left: 4px solid #e10600;
  border-radius: var(--radius, 6px);
  background: color-mix(in srgb, #e10600 5%, var(--paper));
}
.hx-live-now p { margin: 0; }
.hx-live-now-kicker { display: inline-flex; align-items: center; gap: 8px; color: #c40500; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hx-live-now-kicker .live-pill-dot { background: #e10600; animation: live-ping 1800ms ease-out infinite; }
.hx-live-now-session { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.15; }
.hx-live-now-next { color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.hx-session.is-live { box-shadow: inset 3px 0 0 #e10600; }
.hx-session.is-live .hx-session-name::after { content: " · live"; color: #c40500; font-weight: 800; }
.hx-home .hx-session.is-live time::after { content: none; }

/* --------------------------------------------------------------
   Standings: the points race
   -------------------------------------------------------------- */

.points-race { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.points-race-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.25rem; }
.points-race-head h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.02em; }
.points-race-caption { margin: .35rem 0 0; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.points-race-controls { display: grid; gap: 6px; min-width: min(100%, 300px); }
.points-race-scrub-label { color: var(--muted); font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.points-race-scrub { width: 100%; accent-color: var(--orange); cursor: pointer; }
.points-race-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 1.5rem; align-items: start; }
.points-race-chart { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.points-race-grid line { stroke: var(--line); stroke-width: 1; }
.points-race-grid text { fill: var(--muted); font-size: 11px; font-weight: 700; }
.points-race-cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.points-race-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; transition: opacity 220ms var(--ease-out, ease), stroke-width 220ms var(--ease-out, ease); }
.points-race-line.is-dashed { stroke-dasharray: 6 5; }
.points-race.is-pending .points-race-line { opacity: 0; }
.points-race-end { transition: transform 420ms var(--ease-out, ease), opacity 220ms var(--ease-out, ease); }
.points-race-end text { fill: var(--ink); font-size: 11.5px; font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.points-race-line.is-minor { opacity: .38; }
.points-race-end.is-minor text { display: none; }
.points-race.has-highlight .points-race-line:not(.is-on) { opacity: .14; }
.points-race.has-highlight .points-race-end:not(.is-on) { opacity: .25; }
.points-race.has-highlight .points-race-line.is-on { stroke-width: 3.4; }
.points-race-rank { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.points-race-rank-row {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 6px 0 0;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--team-colour, var(--tc-unknown, #c7c7c7));
  transition: background-color 160ms var(--ease-out, ease);
}
.points-race-rank-row.is-on { background: var(--surface); }
.points-race-pos { padding-left: 10px; color: var(--muted); font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.points-race-name { min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--text-sm); font-weight: 700; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points-race-name:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.points-race-pts { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.points-race-note { margin: 1rem 0 0; color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 860px) {
  .points-race-body { grid-template-columns: 1fr; }
  .points-race-rank { columns: 2; column-gap: 1.5rem; border-top: 0; }
  .points-race-rank-row { break-inside: avoid; }
}

/* on a phone the chart keeps its size and scrolls sideways, and the rank
   list runs in one column so no name is cut */
@media (max-width: 620px) {
  .points-race-chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-inline: calc(-1 * var(--gutter, 1rem)); padding-inline: var(--gutter, 1rem); }
  .points-race-chart { min-width: 680px; }
  .points-race-rank { columns: 1; }
}

/* --------------------------------------------------------------
   Driver profile: the form strip
   -------------------------------------------------------------- */

.form-strip { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.form-strip-head h3 { margin: 0; font-size: clamp(1.125rem, 1.8vw, 1.4rem); letter-spacing: -.02em; }
.form-strip-caption { margin: .35rem 0 1.25rem; color: var(--muted); font-size: var(--text-sm); }
.form-strip-track {
  display: grid;
  grid-template-columns: repeat(var(--rounds, 24), minmax(0, 1fr));
  gap: 4px;
  height: 160px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
.form-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.form-col:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 3px; }
.form-stem {
  position: relative;
  display: block;
  height: var(--h, 6%);
  min-height: 6px;
  border-radius: 2px 2px 0 0;
  background: var(--ink);
  transform-origin: bottom;
  transition: transform 640ms var(--ease-out, ease), background-color 200ms;
}
.form-strip.is-pending .form-stem { transform: scaleY(0); }
.form-col.is-podium .form-stem { background: var(--team-colour, var(--orange)); }
.form-col.is-win .form-stem::after { content: ""; position: absolute; top: -8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--team-colour, var(--orange)); }
.form-col.is-dnf .form-stem, .form-col.is-dns .form-stem { background: repeating-linear-gradient(135deg, var(--muted) 0 3px, transparent 3px 6px); border: 1px solid var(--muted); }
.form-col.is-absent .form-stem { background: transparent; border-bottom: 2px dotted var(--line); min-height: 2px; }
.form-pos { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); color: var(--ink); font-size: .625rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; opacity: 0; transition: opacity 160ms; }
.form-col.is-tall .form-pos { top: 5px; color: var(--paper); }
.form-col.is-podium.is-tall .form-pos { color: #141414; }
.form-col.is-podium .form-pos, .form-col:hover .form-pos, .form-col:focus-visible .form-pos { opacity: 1; }
.form-col.is-dnf .form-pos, .form-col.is-dns .form-pos { color: var(--muted); }
.form-round { position: absolute; left: 0; right: 0; bottom: -20px; color: var(--muted); font-size: .625rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.form-mate { position: absolute; left: -2px; right: -2px; bottom: var(--h, 6%); height: 0; border-top: 2px solid var(--paper); box-shadow: 0 -1px 0 var(--ink), 0 1px 0 var(--ink); pointer-events: none; z-index: 1; }
.form-key-mate { border-top: 2px solid var(--paper); box-shadow: 0 -1px 0 var(--ink), 0 1px 0 var(--ink); }
.form-sprint { position: absolute; top: 2px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; }
.form-sprint.is-points { background: var(--ink); }
.form-sprint.is-podium { background: var(--team-colour, var(--orange)); border-color: var(--team-colour, var(--orange)); }
.form-readout { margin: 1.4rem 0 0; min-height: 1.6em; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.form-h2h-intro { margin: 1.25rem 0 .5rem; color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.form-h2h { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.form-h2h-cell { display: grid; gap: 4px; min-width: 190px; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius, 6px); }
.form-h2h-cell dt { color: var(--muted); font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.form-h2h-cell dd { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.form-h2h-cell dd span { color: var(--muted); font-size: 1rem; font-weight: 600; }
.form-h2h-cell dd strong:last-child { color: var(--muted); }
.form-h2h-cell.is-ahead dd strong:first-child { color: var(--team-colour-ink, var(--ink)); }
.form-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.25rem 0 0; color: var(--muted); font-size: .75rem; font-weight: 600; }
.form-legend span { display: inline-flex; align-items: center; gap: 6px; }
.form-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
.form-key-mate { height: 0; background: none; }
.form-key-sprint { border-radius: 50%; }
.form-key-dnf { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 4px); border: 1px solid var(--muted); }

@media (max-width: 620px) {
  .form-strip-track { height: 130px; gap: 2px; }
  .form-round { font-size: .5625rem; }
  .form-pos { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .form-stem, .points-race-line, .points-race-end { transition: none; }
}

/* --------------------------------------------------------------
   Race weekend: ride the lap
   -------------------------------------------------------------- */

.fly { padding: 2.5rem 0 0; background: var(--paper); }
.fly-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; }
.fly-head .kicker { color: var(--orange-dark); text-transform: uppercase; letter-spacing: .08em; }
.fly-head h2 { margin: .4rem 0 .6rem; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.15; letter-spacing: -.035em; }
.fly-intro { max-width: 62ch; margin: 0; color: var(--muted); }
.fly-scroll { position: relative; height: 380vh; }
.fly-stage {
  position: sticky;
  top: var(--sx-sticky-offset, 64px);
  height: calc(100vh - var(--sx-sticky-offset, 64px));
  min-height: 420px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: #1c1b18;
  color: #f7f4ed;
  overflow: hidden;
}
.fly-map { display: block; width: 100%; height: 100%; max-height: 100%; }
.fly-camera { transition: none; }
.fly-sector { opacity: .95; }
.fly-marker circle { fill: #1c1b18; stroke: #f7f4ed; stroke-width: 1.5; }
.fly-marker text { fill: #f7f4ed; font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #1c1b18; stroke-width: 3px; }
.fly-marker.is-trap circle { fill: #f7f4ed; }
.fly-marker.is-activation circle, .fly-marker.is-detection circle { stroke: #ff6b00; }
.fly-turn circle { fill: #1c1b18; stroke: rgba(247, 244, 237, .55); stroke-width: 1.2; transition: fill 200ms, stroke 200ms, transform 200ms; }
.fly-turn text { fill: #f7f4ed; font-size: 10.5px; font-weight: 800; }
.fly-turn.is-next circle { stroke: #f7f4ed; }
.fly-turn.is-current circle { fill: #ff6b00; stroke: #ff6b00; }
.fly-turn.is-current text { fill: #1c1b18; }
.fly-trail { opacity: .55; }
.fly-car-halo { fill: rgba(255, 107, 0, .22); }
.fly-car-dot { fill: #ff6b00; stroke: #f7f4ed; stroke-width: 2; }
.fly-hud { display: grid; gap: 10px; padding: 14px clamp(16px, 3vw, 28px) 16px; background: linear-gradient(180deg, rgba(28, 27, 24, 0) 0%, rgba(28, 27, 24, .92) 30%); }
.fly-hud-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.fly-sector-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 4px; background: var(--sector-colour, #b8475e); color: #f7f4ed; font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transition: background-color 240ms; }
.fly-distance { color: rgba(247, 244, 237, .78); }
.fly-turn-label { color: #f7f4ed; }
.fly-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.fly-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid rgba(247, 244, 237, .3); border-radius: 999px; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; animation: fly-chip-in 240ms var(--ease-out, ease) both; }
.fly-chip.is-mode { border-color: #ff6b00; color: #ffb27a; }
.fly-chip.is-trap { color: #f7f4ed; background: rgba(247, 244, 237, .12); }
.fly-chip.is-gate { color: rgba(247, 244, 237, .8); }
@keyframes fly-chip-in { from { opacity: 0; transform: translateY(6px); } }
.fly-bar { display: flex; gap: 3px; height: 4px; }
.fly-bar-seg { position: relative; display: block; height: 100%; border-radius: 2px; background: rgba(247, 244, 237, .16); overflow: hidden; }
.fly-bar-seg b { position: absolute; left: 0; top: 8px; font-size: .5625rem; font-weight: 800; letter-spacing: .06em; color: rgba(247, 244, 237, .6); }
.fly-bar-fill { position: absolute; inset: 0; background: var(--sector-colour); transform: scaleX(0); transform-origin: left; }
.fly-scrub-wrap { display: block; margin-top: 12px; }
.fly-scrub { width: 100%; accent-color: #ff6b00; cursor: pointer; }
.fly.is-ready .fly-stage { box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .06); }

@media (max-width: 760px) {
  .fly-scroll { height: 300vh; }
  .fly-stage { min-height: 360px; }
  .fly-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .fly-marker text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fly-chip { animation: none; }
  .fly-turn circle { transition: none; }
}

/* the shared reveal layer should leave the new surfaces alone */
.sx-ready .points-race, .sx-ready .form-strip, .sx-ready .fly { overflow-anchor: none; }