/* Results page additions. Uses only tokens from style.css; to recolor, change the tokens there:
   --c-orange (fills: race tag, P1 plate, chip-on edge), --c-orange-hover, --c-orange-press, --c-orange-text (orange text/icons on black), --c-white.
   Purple (--c-purple) = fastest lap / records. Red (--c-error) = errors and DNF only. */

.filters { display: grid; gap: var(--sp-4); padding: var(--sp-4); }
.filters__row { display: grid; gap: var(--sp-3); }
.filters__search { position: relative; }
.filters__search .icon { position: absolute; left: var(--sp-4); top: 50%; translate: 0 -50%; color: var(--c-text-3); pointer-events: none; }
.filters__search input, .filters select {
  width: 100%; min-height: 52px; background: var(--c-black); color: var(--c-white);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 1rem; padding: 0 var(--sp-4);
}
.filters__search input { padding-left: calc(var(--sp-4) + 34px); }
.filters input:hover, .filters select:hover { border-color: var(--c-text-3); }
.filters input:focus-visible, .filters select:focus-visible { border-color: var(--c-white); }
.filters__group { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filters__label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--fs-xs); color: var(--c-text-3); min-width: 3.6rem; }
.chip {
  min-height: 44px; padding: 0 var(--sp-4); background: var(--c-surface-3); color: var(--c-text);
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-sm);
}
.chip:hover { background: var(--c-line-strong); }
.chip[aria-pressed="true"] { background: var(--c-white); color: var(--c-black); box-shadow: inset 0 -4px 0 var(--c-orange); }
.chip:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }
@media (min-width: 768px) {
  .filters { padding: var(--sp-5); }
  .filters__row--top { grid-template-columns: minmax(0, 1fr) 260px; }
}
.filters__count { font-size: var(--fs-sm); color: var(--c-text-3); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-height: 44px; }
.filters__reset { background: none; border: 0; color: var(--c-white); text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; cursor: pointer; font: inherit; min-height: 44px; padding: 0 var(--sp-2); }

.day-head { margin: var(--sp-6) 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-lg); letter-spacing: var(--ls-caps); color: var(--c-white); }
.day-head::after { content: ""; flex: 1; height: 1px; background: var(--c-line-strong); }
.day[hidden], .sess[hidden], .rec-row[hidden] { display: none; }

.sess { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.sess[open] { border-color: var(--c-line-strong); }
.sess__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); min-height: 64px; list-style: none; cursor: pointer; }
.sess__head::-webkit-details-marker { display: none; }
summary.sess__head:hover { background: var(--c-surface-2); }
summary.sess__head:focus-visible { outline: 2px solid var(--c-white); outline-offset: -2px; }
.sess__track { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-lg); color: var(--c-white); line-height: 1.1; }
.sess__layout { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--c-text-3); margin-top: 2px; }
.sess__meta { grid-column: 2; font-size: var(--fs-sm); color: var(--c-text-2); }
.sess__meta b { color: var(--c-white); font-weight: 600; }
.sess__time { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--c-text-3); text-align: right; white-space: nowrap; }
.sess__chev { grid-column: 3; grid-row: 2; justify-self: end; width: 12px; height: 12px; border-right: 2px solid var(--c-text-2); border-bottom: 2px solid var(--c-text-2); rotate: 45deg; transition: rotate .15s; }
.sess[open] .sess__chev { rotate: -135deg; }
.sess--static .sess__head { cursor: default; }
.sess__body { border-top: 1px solid var(--c-line); padding-top: var(--sp-2); }

.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border-top: 1px solid var(--c-line); }
.summary > div { background: var(--c-surface); padding: var(--sp-3) var(--sp-4); }
.summary dt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--fs-xs); color: var(--c-text-3); }
.summary dd { margin: 2px 0 0; font-family: var(--font-num); font-weight: 700; font-size: var(--fs-xl); color: var(--c-white); font-variant-numeric: tabular-nums; }
.summary dd.is-text { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-caps); }

.rec-title { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.empty[hidden] { display: none; }

@media (min-width: 768px) {
  .sess__head { grid-template-columns: auto minmax(0, 1fr) auto 24px; padding: var(--sp-3) var(--sp-5); }
  .sess__meta { grid-column: 2; grid-row: 2; }
  .sess__chev { grid-column: 4; grid-row: 1 / span 2; }
  .sess__time { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .summary dd { font-size: var(--fs-2xl); }
}

/* ---- v2: events with session tabs ---- */
/* tabs padding + tab padding = table cell padding (16px phone, 24px from 768), so tab text lines up with the P column */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--c-line-strong); padding: 0 var(--sp-1); overflow-x: auto; }
.tab {
  min-height: 48px; padding: 0 var(--sp-3); background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -1px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-md); color: var(--c-text-3); white-space: nowrap;
}
.tab:hover { color: var(--c-white); }
.tab[aria-selected="true"] { color: var(--c-white); border-bottom-color: var(--c-orange); }
.tab:focus-visible { outline: 2px solid var(--c-white); outline-offset: -2px; }
.tab__n { font-family: var(--font-num); font-weight: 400; color: var(--c-text-3); margin-left: .4em; font-size: var(--fs-sm); letter-spacing: 0; }
.panel__title { padding: var(--sp-3) var(--sp-4) 0; font-size: var(--fs-md); letter-spacing: var(--ls-caps); color: var(--c-text-2); }
.panel__note { padding: var(--sp-2) var(--sp-4) var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-3); }
.tabpanel[hidden] { display: none; }
.sess__incl { color: var(--c-text-3); }
@media (min-width: 768px) { .tabs { padding: 0 var(--sp-2); } .tab { padding-inline: var(--sp-4); } .panel__title, .panel__note { padding-inline: var(--sp-5); } }

/* ---- brand: official Rush of Central Texas logo (rush-white.svg, viewBox 91x32) + site title ---- */
.brand { gap: var(--sp-3); }
.brand__logo { display: block; height: 30px; width: auto; aspect-ratio: 91 / 32; flex: none; }
.brand__name { padding-left: var(--sp-3); border-left: 1px solid var(--c-line-strong); line-height: 1.05; }
@media (min-width: 768px) { .brand__logo { height: 40px; } .brand__name { padding-left: var(--sp-4); } }
@media (max-width: 400px) { .brand__logo { height: 26px; } .brand { gap: var(--sp-2); } .brand__name { padding-left: var(--sp-2); font-size: var(--fs-lg); } }
/* 360px Android phones: logo + title + status pill would otherwise collide; title truncates rather than overlaps */
.brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) { .site-header__inner { gap: var(--sp-2); } .brand__name { font-size: var(--fs-md); } }
.site-footer__logo { display: block; height: 36px; width: auto; aspect-ratio: 91 / 32; flex: none; }
.site-footer__credit { grid-column: 1 / -1; margin-top: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-text-3); }
.site-footer__credit a { color: var(--c-text-2); text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
.site-footer__credit a:hover { color: var(--c-white); }

/* ---- v3: one row per event, single drop-down with tabs (iRacing style) ---- */
.ev { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-sm); margin-bottom: var(--sp-2); }
.ev[hidden] { display: none; }
.ev[open] { border-color: var(--c-line-strong); }
/* phone + tablet: type tag + driver count on top; track/layout (2 lines) sits level with date/time (2 lines);
   winner gets the full width below so "Fastest J. Alvarez 1:17.000" stays on one line at 390px.
   The chevron owns the right edge for the full height of the row. */
.ev__head {
  display: grid; align-items: center; gap: var(--sp-1) var(--sp-3); list-style: none; cursor: pointer; min-height: 64px; padding: var(--sp-3) var(--sp-4);
  grid-template-columns: minmax(0, 1fr) auto 20px;
  grid-template-areas: "badge n chev" "track date chev" "who who chev";
}
.ev__head::-webkit-details-marker { display: none; }
.ev__head:hover, .ev[open] > .ev__head { background: var(--c-surface-2); }
.ev__head:focus-visible { outline: 2px solid var(--c-white); outline-offset: -2px; }
.ev__head > .tag { grid-area: badge; justify-self: start; }
.ev__track { grid-area: track; min-width: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: var(--fs-lg); color: var(--c-white); line-height: 1.1; }
.ev__date { grid-area: date; justify-self: end; text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--c-text-3); white-space: nowrap; }
.ev__time { display: block; }
.ev__who { grid-area: who; font-size: var(--fs-sm); color: var(--c-text-2); min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-6); padding-right: var(--sp-2); }
.ev__w, .ev__f { white-space: nowrap; }
.ev__who .laptime { margin-left: .85em; }   /* air between the driver and the lap time */
.sess__fast { margin: 0; padding: var(--sp-3) var(--sp-4) 0; font-size: var(--fs-sm); color: var(--c-text-2); }
.sess__fast b { color: var(--c-white); font-weight: 600; }
.sess__fast .laptime { margin-left: .85em; }
@media (min-width: 768px) { .sess__fast { padding-inline: var(--sp-5); } }
.ev__who b { color: var(--c-white); font-weight: 600; }
.ev__k { display: inline-block; margin-right: .5em; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--fs-xs); color: var(--c-text-3); }
.ev__n { grid-area: n; justify-self: end; font-size: var(--fs-sm); color: var(--c-text-2); white-space: nowrap; }
.ev__head .sess__chev { grid-area: chev; align-self: center; justify-self: end; }
.ev__head:hover .sess__chev, .ev[open] .sess__chev { border-color: var(--c-white); }
.ev[open] .sess__chev { rotate: -135deg; }
.ev__drop { border-top: 1px solid var(--c-line); padding-bottom: var(--sp-2); }
.ev__drop > .table-wrap { padding-top: var(--sp-2); }
@media (min-width: 768px) {
  .ev__head { padding: var(--sp-3) var(--sp-5); }
}
/* one line per event only once the columns have room (at 768 the track and winner columns were ~110px and wrapped) */
@media (min-width: 960px) {
  .ev__head { grid-template-columns: 108px minmax(0, 1.1fr) 130px minmax(0, 2.6fr) 92px 20px; grid-template-areas: "badge track date who n chev"; gap: var(--sp-4); }
  .ev__date { justify-self: start; text-align: left; }
  .ev__n { justify-self: start; }
}

/* ---- v3.1: 4-item nav, Join button, Records page, responsive fixes ---- */
.nav__list { grid-template-columns: repeat(6, 1fr); }
.header-join { display: none; flex: none; white-space: nowrap; }
@media (min-width: 1168px) { .brand__name { flex: none; } .brand { flex: none; } }
/* six nav items: below 1600px the header only has room for logo + nav + status (Join stays in the footer, on Status and on Setup) */
@media (min-width: 1100px) and (max-width: 1599px) { .brand__name { display: none; } .nav__link { padding-inline: var(--sp-3); } }
@media (min-width: 1600px) { .header-join { display: inline-flex; } .site-header__inner.container { --container: 1440px; } }
/* Status page already has the big Join card: one primary per view (DESIGN.md), so no second orange Join in the header there */
body:has(.join-btn) .header-join { display: none; }
/* Desktop status: Join card leads the side column so it sits beside the pit board, above the fold.
   Phones keep DOM order (drivers first): Join needs a Windows PC, so it matters less there. */
@media (min-width: 960px) { .layout-status__side > .card:has(.join-btn) { order: -1; } }
/* tablet: brand + status on row 1, nav on its own full-width row 2 (no overlap) */
@media (min-width: 768px) and (max-width: 1099px) {
  .site-header__inner { flex-wrap: wrap; gap: 0 var(--sp-3); padding-top: var(--sp-2); }
  .brand { order: 1; margin-right: auto; }
  .status-pill { order: 2; }
  .nav { order: 3; flex-basis: 100%; margin: var(--sp-2) 0 0; border-top: 1px solid var(--c-line); }
  .nav__list { width: 100%; }
  .nav__list li { flex: 1; }
  .nav__link { justify-content: center; height: 52px; padding: 0 var(--sp-2); }
  .nav__link[aria-current="page"]::before { bottom: 0; left: 20%; right: 20%; }
}
.btn--lg { min-height: 64px; font-size: var(--fs-xl); }
.join-btn { margin-bottom: var(--sp-3); }
/* info edge (white, as .alert--info): amber means "starting" or EXAMPLE DATA, so it must not mark a help note */
.join-note { margin: 0; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--c-white); background: var(--c-surface-2); color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.45; }
.join-note[hidden] { display: none; }
.join-note[hidden] + .join-btn { margin-top: 0; }
.join-fallback { margin: 0 0 var(--sp-4); color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.5; }
.join-fallback strong { color: var(--c-white); }
.site-footer__join { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.site-footer__join .btn { min-height: 44px; }
.site-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__credit { display: flex; align-items: center; gap: .4em; }
/* records */
.rec-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rec-card[hidden] { display: none; }
/* Whole row opens the session. The driver name is the real link (keyboard, screen readers, long-press);
   a few lines of JS forward clicks anywhere else in the row. No ::after overlay on the <tr>:
   position:relative on table rows is unreliable in older WebKit, which would let one overlay cover the page. */
.rec-row { cursor: pointer; }
.rec-row:hover td, .rec-row:focus-within td { background: var(--c-surface-2); }
.rec-row td { height: 56px; }
.rowlink { color: inherit; text-decoration: none; }
.rec-row:hover .rowlink { text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 3px; }
.rec-row .driver__note { white-space: normal; }
.rec-go { width: 28px; text-align: right; }
.rec-chev { display: inline-block; rotate: -45deg; width: 10px; height: 10px; }
.rec-row:hover .rec-chev, .rec-row:focus-within .rec-chev { border-color: var(--c-white); }
/* deep-link target */
.ev.is-target { border-color: var(--c-orange); box-shadow: 0 0 0 1px var(--c-orange); scroll-margin-top: var(--sp-4); }
/* tables never push the page sideways; they scroll inside their own box */
.table-wrap:focus-visible { outline: 2px solid var(--c-white); outline-offset: -2px; }
.brand { min-height: 44px; }
.header-join { min-height: 44px; }
/* six bottom-nav items on phones: tighter labels so Results/Records/Telemetry do not collide */
@media (max-width: 767px) { .nav__link { font-size: 11px; letter-spacing: 0.02em; gap: 4px; } .nav__link .icon { width: 20px; height: 20px; } }