/* ==========================================================================
   Race Data page — CONTENT styling only. The header, footer and car lanes come
   from the real site CSS (style.css + mistyles.css). Everything here is scoped
   under .racedata so it can never affect the shared header/footer.
   ========================================================================== */
.racedata {
  --panel: #111c33; --panel-2: #16233f; --line: #24344f; --line-2: #172439;
  --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #8397b3;
  --red: #E4002B; --blue: #007AC2; --blue-br: #38a9e8; --white: #ffffff;
  --amber: #f5b53d; --good: #38d17a; --bad: #f2666f;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 120px;   /* bottom room clears the fixed sponsor footer */
}
.racedata .display { font-family: "Racing Sans One", ui-sans-serif, system-ui, sans-serif; letter-spacing: .3px; }
.racedata .num { font-variant-numeric: tabular-nums; }
.racedata h1, .racedata h2, .racedata h3 { text-wrap: balance; margin: 0; }
.racedata a { color: var(--blue-br); }

.racedata .titlebar { padding: 4px 0 0; }
.racedata .eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 11.5px; color: var(--muted); margin: 0 0 3px; }
.racedata .titlebar h1 { font-size: clamp(24px, 3.6vw, 34px); }
.racedata .lede { color: var(--ink-2); margin: 6px 0 0; max-width: 62ch; font-size: 14.5px; }
.racedata .gen { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.racedata .datanote {
  margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2);
  border-left: 3px solid var(--amber); background: rgba(245,181,61,.07);
  padding: 8px 12px; border-radius: 0 8px 8px 0; max-width: 66ch;
}

/* tabs */
.racedata nav.tabs {
  display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line);
  margin: 16px 0 0;
}
.racedata .tab {
  appearance: none; background: none; border: 0; color: var(--muted);
  font: inherit; font-size: 14px; padding: 11px 14px 12px; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; letter-spacing: .2px;
}
.racedata .tab:hover { color: var(--ink-2); }
.racedata .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.racedata .tab:focus-visible { outline: 2px solid var(--blue-br); outline-offset: -2px; border-radius: 4px; }

.racedata .panel { padding-top: 22px; }
.racedata .panel[hidden] { display: none; }
.racedata .sec-title { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.racedata .sec-title h2 { font-size: 22px; }
.racedata .sec-title .count { color: var(--muted); font-size: 13px; }
.racedata .note-lede { color: var(--ink-2); font-size: 14px; margin: 0 0 16px; max-width: 66ch; }
.racedata .subhead { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin: 4px 0 10px; }

/* stat tiles */
.racedata .tiles { display: grid; gap: 10px; grid-template-columns: repeat(4,1fr); }
.racedata .tile { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; position: relative; overflow: hidden; }
.racedata .tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--blue); }
.racedata .tile.r::before { background: var(--red); } .racedata .tile.a::before { background: var(--amber); } .racedata .tile.w::before { background: var(--white); }
.racedata .tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); }
.racedata .tile .v { font-size: 26px; margin-top: 3px; } .racedata .tile .v small { font-size: 13px; color: var(--muted); }
.racedata .tile .t { font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }

/* entry cards */
.racedata .cards { display: grid; gap: 12px; grid-template-columns: repeat(3,1fr); margin-top: 20px; }
.racedata .card { text-align: left; background: linear-gradient(150deg,var(--panel-2),var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 5px; transition: border-color .15s, transform .15s; }
.racedata .card:hover { border-color: #33507a; transform: translateY(-2px); }
.racedata .card:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 2px; }
.racedata .card .ct { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.racedata .card .cd { color: var(--muted); font-size: 13px; }
.racedata .card .cmeta { color: var(--blue-br); font-size: 12.5px; margin-top: 2px; }

/* boxes + tables */
.racedata .box { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 16px 18px; }
.racedata .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.racedata table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 620px; }
.racedata thead th { text-align: left; color: var(--muted); background: #0e1a30; padding: 11px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 600; }
.racedata tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.racedata tbody tr:last-child td { border-bottom: 0; }
.racedata tbody tr:hover td { background: #13203a; }
.racedata td.num, .racedata th.num { text-align: right; font-variant-numeric: tabular-nums; }
.racedata .rank { color: var(--muted); }
.racedata .mono-rank { font-family: "Racing Sans One", sans-serif; }
.racedata .strong { font-weight: 600; }
.racedata .dim { color: var(--ink-2); }

.racedata .disc { display: inline-flex; align-items: center; gap: 7px; }
.racedata .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.racedata .d-oval{background:var(--red)} .racedata .d-road{background:var(--blue)} .racedata .d-dirt{background:var(--white)}
.racedata .d-hcap{background:var(--amber)} .racedata .d-mix{background:#7c8aa5}
.racedata .trophy { color: var(--amber); }
.racedata .pos { color: var(--good) } .racedata .neg { color: var(--bad) }

.racedata .bar { position: relative; height: 8px; background: #0e1a30; border-radius: 999px; min-width: 90px; overflow: hidden; }
.racedata .bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg,#0a5f97,var(--blue-br)); }

.racedata .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.racedata .chip { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: #0e1a30; display: inline-flex; align-items: center; gap: 6px; }
.racedata .tag { font-size: 10.5px; padding: 2px 7px; border-radius: 5px; background: #14233d; color: var(--muted); border: 1px solid var(--line); }

.racedata .seasons { display: grid; gap: 11px; grid-template-columns: repeat(2,1fr); }
.racedata .scard { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 14px 15px; display: flex; gap: 12px; align-items: flex-start; }
.racedata .scard .n { font-family: "Racing Sans One", sans-serif; font-size: 20px; color: var(--ink-2); flex: none; width: 40px; }
.racedata .scard .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.racedata .scard .sname { font-size: 14.5px; font-weight: 600; }
.racedata .scard .smeta { font-size: 12px; color: var(--muted); }
.racedata .live { color: var(--good); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.racedata .live::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

.racedata .catbar { display: flex; height: 30px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.racedata .catbar > span { display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: #06101f; font-weight: 700; white-space: nowrap; }

.racedata .week { display: grid; gap: 8px; }
.racedata .day { display: grid; grid-template-columns: 116px 1fr auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 10px 14px; font-size: 13.5px; }
.racedata .day .dname { font-family: "Racing Sans One", sans-serif; color: var(--ink-2); }
.racedata .day .dtime { color: var(--muted); font-size: 12.5px; }
.racedata .next { border-color: #2b5a3d; box-shadow: inset 0 0 0 1px rgba(56,209,122,.25); }

/* roster search + driver select */
.racedata .rd-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.racedata .rd-label { color: var(--muted); font-size: 13px; }
.racedata .rd-tools input[type="search"],
.racedata .rd-tools select {
  background: #0e1a30; border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 9px 13px; font: inherit; font-size: 14px; min-width: 260px;
}
.racedata .rd-tools input[type="search"]:focus,
.racedata .rd-tools select:focus { outline: 2px solid var(--blue-br); outline-offset: 0; }
.racedata tr.rd-row { cursor: pointer; }
.racedata tr.rd-row:focus-visible { outline: 2px solid var(--blue-br); outline-offset: -2px; }

/* race page: session selector buttons + country label */
.racedata .sess-btn {
  appearance: none; background: #0e1a30; border: 1px solid var(--line); color: var(--ink-2);
  font: inherit; font-size: 13px; padding: 7px 15px; border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.racedata .sess-btn:hover { color: var(--ink); border-color: #33507a; }
.racedata .sess-btn.active { background: rgba(228,0,43,.15); border-color: var(--red); color: #fff; }
.racedata .sess-btn:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 2px; }
.racedata .cc { font-size: 10px; color: var(--muted); margin-left: 6px; letter-spacing: .5px; vertical-align: middle; }
.racedata td.fastest { color: #c084fc; font-weight: 600; }       /* fastest lap of the race (iRacing purple) */
.racedata td.fastest-avg { color: var(--good); font-weight: 600; } /* best average lap */

/* driver page: clickable stat tiles that toggle the race lists */
.racedata a.tile { text-decoration: none; }
.racedata .tile.tgt { cursor: pointer; }
.racedata .tile.tgt.active { box-shadow: inset 0 0 0 1.5px var(--blue-br); }

/* race page: winner screenshot thumbnail (small; click to open full size) */
.racedata .winshot { display: block; width: 64px; height: auto; border-radius: 6px;
  border: 1px solid var(--line); margin: 0 0 10px; }

/* sortable table headers (Driver Stats) */
.racedata th[data-sort] { cursor: pointer; -webkit-user-select: none; user-select: none; white-space: nowrap; }
.racedata th[data-sort]:hover { color: var(--ink); }
.racedata th[aria-sort="ascending"], .racedata th[aria-sort="descending"] { color: var(--ink); }
.racedata th .arw { color: var(--blue-br); font-size: 11px; }

/* ---- Awards page ---- */
.racedata .honors { display: flex; flex-direction: column; gap: 22px; margin: 20px 0 0; }
.racedata .honor {
  display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px 20px 26px;
  position: relative; overflow: hidden;
}
.racedata .honor::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.racedata .honor.gold::before { background: linear-gradient(180deg, #f5b53d, #b9852a); }
.racedata .honor.blue::before { background: linear-gradient(180deg, #38a9e8, #007AC2); }
.racedata .honor.red::before  { background: linear-gradient(180deg, #E4002B, #8a0f24); }

.racedata .honor-id { display: flex; gap: 13px; align-items: flex-start; }
.racedata .honor-ico { font-size: 30px; line-height: 1; }
.racedata .honor-id h2 { font-size: 20px; white-space: nowrap; }
.racedata .honor-sub { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; line-height: 1.4; }

.racedata .honor-body { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.racedata .honor-feature {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: 12px;
  background: rgba(255, 255, 255, .035); border: 1px solid var(--line);
}
.racedata .honor-feature a.dlink {
  font-family: "Racing Sans One", sans-serif; font-size: 20px; letter-spacing: .3px; color: var(--ink);
}
.racedata .honor-feature a.dlink:hover { color: var(--blue-br); }
.racedata .feat-tag {
  text-transform: uppercase; letter-spacing: 1.1px; font-size: 10.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; color: #06182b;
}
.racedata .honor.gold .feat-tag { background: var(--amber); }
.racedata .honor.blue .feat-tag { background: var(--blue-br); }
.racedata .honor.red  .feat-tag { background: var(--bad); }

.racedata .honor-roll { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.racedata .honor-roll li {
  display: inline-flex; align-items: baseline; gap: 8px; font-size: 13.5px;
  background: #0e1a30; border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px;
}
.racedata .honor-roll .ry { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; }
.racedata .honor.gold .honor-roll .ry { color: var(--amber); }
.racedata .honor.blue .honor-roll .ry { color: var(--blue-br); }
.racedata .honor.red  .honor-roll .ry { color: var(--bad); }

.racedata .hof-wall { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.racedata .hof-class { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start;
  border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; background: var(--panel); }
.racedata .hof-yr { font-family: "Racing Sans One", sans-serif; font-size: 22px; color: var(--amber); line-height: 1; }
.racedata .hof-names { display: flex; flex-wrap: wrap; gap: 8px; }
.racedata .hof-plaque {
  display: inline-block; text-decoration: none; color: var(--ink); font-size: 13.5px;
  background: #0e1a30; border: 1px solid var(--line); border-left: 3px solid #f5b53d;
  border-radius: 7px; padding: 6px 12px;
}
.racedata .hof-plaque:hover { border-color: #f5b53d; color: #fff; }
@media (max-width: 720px) { .racedata .honor { grid-template-columns: 1fr; gap: 14px; } }

/* clickable driver names (any name in the data -> that driver's stats) */
.racedata .dlink {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--blue-br);
  cursor: pointer; text-align: left;
}
.racedata .dlink:hover { text-decoration: underline; }
.racedata .dlink:focus-visible { outline: 2px solid var(--blue-br); outline-offset: 2px; border-radius: 3px; }

/* driver profile header */
.racedata .rd-prof {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(145deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px;
}
.racedata .rd-badge {
  width: 64px; height: 64px; flex: none; border-radius: 13px;
  background: linear-gradient(150deg, var(--red), #8a0f24);
  display: grid; place-items: center; font-size: 22px; color: #fff; text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
.racedata .rd-who { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.racedata .rd-name { font-size: clamp(20px, 3vw, 28px); }

.racedata .loading { color: var(--muted); padding: 40px 0; text-align: center; }
.racedata section.panel + .foot-note,
.racedata .foot-note { color: var(--muted); font-size: 12.5px; text-align: center; line-height: 1.7; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.racedata .foot-note code { color: var(--ink-2); }

@media (max-width: 820px) {
  .racedata .tiles { grid-template-columns: repeat(2,1fr); }
  .racedata .cards { grid-template-columns: 1fr; }
  .racedata .seasons { grid-template-columns: 1fr; }
  .racedata .day { grid-template-columns: 92px 1fr; }
  .racedata .day .dtime { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .racedata * { transition: none !important; } }