/* The race page (artboard RacePage): a bracket race's header, the results table with gaps, badges and where each
   pilot goes next, and the "In the bracket" card with the labelled mini-map. Club themes come through the tokens. */

.rp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--text-2); }
.rp-crumbs a { color: var(--text-2); }
.rp-crumbs a:hover { color: var(--text); }
.rp-crumbs .rp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--brand); }
.rp-crumbs .rp-back:hover { color: color-mix(in oklab, var(--brand) 75%, var(--text)); }
.rp-crumbs .cur { color: var(--text); }
.rp-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding: 4px 0 8px; }
.rp-titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--brand); }
.rp-h1 { margin: 0; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.4rem); line-height: 1; }
.rp-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 14px; color: var(--text-2); }
.rp-status .st { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.rp-status .st i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.rp-status .st.done i { background: var(--ok, #4ade80); }
.rp-status .st.live i { background: var(--live); animation: rp-blink 1.2s ease-in-out infinite; }
.rp-status time { color: var(--text); }
@keyframes rp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.rp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rp-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill, 999px); background: var(--surface-2); border: 1px solid var(--line-strong, var(--line));
  color: var(--text); font-weight: 650; font-size: 14px; white-space: nowrap; text-decoration: none; transition: background 0.15s, transform 0.15s; }
.rp-btn:hover { background: var(--surface-3); color: var(--text); }
.rp-btn-primary { background: var(--brand); border-color: transparent; color: var(--brand-ink); font-weight: 750; box-shadow: var(--shadow-glow, none); }
.rp-btn-primary:hover { background: color-mix(in oklab, var(--brand) 88%, white); color: var(--brand-ink); }

.rp-body { display: flex; flex-direction: column; gap: 24px; }
.rp-media { flex: 999 1 560px; min-width: 0; }
.rp-player { max-width: 880px; }
.rp-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.rp-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.rp-side { flex: 1 1 340px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* The table: scrolls inside its card on narrow screens with the position and pilot pinned on the left. */
.rp-card { overflow: hidden; }
.rp-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.rp-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rp-table { min-width: 100%; }
.rp-table th, .rp-table td { white-space: nowrap; }
.rp-table tbody .rp-row td:first-child { box-shadow: inset 4px 0 0 var(--c, transparent); }
.rp-table .rp-row.is-p1 td { background: color-mix(in oklab, var(--brand) 5%, transparent); }
.rp-table .pilot { display: flex; align-items: center; gap: 8px; }
.rp-table .pilot a { font-weight: 650; color: var(--text); }
.rp-gap { color: var(--text-2); }
.rp-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 7px; font-weight: 750; }
.rp-tag small { font: 800 9.5px/1 var(--font-body); letter-spacing: 0.01em; text-transform: none; }
.rp-tag.hs { color: var(--brand); background: color-mix(in oklab, var(--brand) 16%, transparent); }
.rp-tag.pb { color: var(--pb); background: color-mix(in oklab, var(--pb) 18%, transparent); }
.rp-tag.fast { color: var(--fastest); background: color-mix(in oklab, var(--fastest) 18%, transparent); }
:root[data-mode="light"] .rp-tag.hs { color: var(--brand-on-light, var(--brand)); }
.rp-next { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; font-size: 13.5px; }
.rp-next.adv { color: var(--brand); }
.rp-next.drop { color: var(--text-2); }
.rp-next.out { color: var(--text-3); font-weight: 500; }
.rp-next.champ { color: var(--gold); font-weight: 750; }
:root[data-mode="light"] .rp-next.adv { color: var(--brand-on-light, var(--brand)); }
.rp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; font-size: 12.5px; color: var(--text-2); }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend .sw { width: 10px; height: 10px; border-radius: 3px; }
.rp-legend .sw.pb { background: var(--pb); }
.rp-legend .sw.fast { background: var(--fastest); }
.rp-legend .sw.hs { background: var(--brand); }

/* In the bracket */
.rp-mapcard { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.rp-maphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-maphead h2 { margin: 0; font-size: 20px; }
.rp-maphead a { font-size: 13px; font-weight: 650; min-height: 44px; display: inline-flex; align-items: center; }
.rp-mapsub { margin: -8px 0 0; font-size: 13px; color: var(--text-2); }
.rp-mapwrap { overflow-x: auto; }
.rp-mapwrap .lbmini { width: max-content; min-width: 100%; box-sizing: border-box; }
.rp-mapkey { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 12px; color: var(--text-2); }
.rp-mapkey span { display: inline-flex; align-items: center; gap: 6px; }
.rp-mapkey .m { display: inline-block; width: 16px; height: 9px; border-radius: 3px; }
.rp-mapkey .m.here { background: var(--brand); }
.rp-mapkey .m.to { background: color-mix(in oklab, var(--brand) 40%, transparent); box-shadow: 0 0 0 1px var(--brand); }
.rp-hops { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.rp-hop { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; min-height: 44px; justify-content: center; border-radius: 14px; text-decoration: none;
  background: color-mix(in oklab, var(--brand) 14%, var(--surface-2)); border: 1px solid color-mix(in oklab, var(--brand) 45%, transparent); color: var(--text); }
.rp-hop b { font-size: 14px; font-weight: 750; }
.rp-hop span { font-size: 12.5px; color: var(--text-2); }
.rp-hop.drop { background: var(--surface-2); border-color: var(--line); }
.rp-hop:hover { border-color: var(--brand); color: var(--text); }

/* The mini-map's race labels ("R1" … on each box; the race on this page lit). Shared with the watch page and the app home. */
.lbmini .m { display: grid; place-items: center; min-width: 34px; height: 18px; padding: 0 3px; box-sizing: border-box; }
.lbmini .m i { font: 700 9.5px/1 var(--font-mono); font-style: normal; color: var(--text-2); letter-spacing: 0.02em; }
.lbmini .m.done i { color: var(--text); }
.lbmini .m.racing i, .lbmini .m.here i { color: var(--brand-ink); }
.lbmini .m.racing i { color: #fff; }

@media (max-width: 720px) {
  .rp-acts { width: 100%; }
  .rp-acts .rp-btn { flex: 1 1 0; justify-content: center; }
  .rp-table .rp-opt { display: none; }
  .rp-table .quadchip, .rp-table .cm-quad { display: none; }
  .rp-table .rp-c-pos, .rp-table .rp-c-pilot { position: sticky; z-index: 1; background: var(--bg-raised, var(--bg)); }
  .rp-table .rp-c-pos { left: 0; }
  .rp-table .rp-c-pilot { left: 46px; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.45); }
  .rp-table th.rp-c-pos, .rp-table td.rp-c-pos { width: 46px; min-width: 46px; max-width: 46px; padding-left: 10px; padding-right: 6px; }
  .rp-table .pilot .chan { display: none; }
  .rp-mapcard { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-status .st.live i { animation: none; }
  .rp-btn { transition: none; }
}