/* OpenWorldEngineer: race replay of the graded timing (assets/art/race.js), shared by the six speed-task pages.
   Builds on styles.css (tokens, .card, .select, .btn, .note, .tip); adds only rc- classes. The two runners are told
   apart by lane and bib, never by colour: both athletes are drawn in ink. The accent marks only the selected heat. */

.rc {
  container-type: inline-size;
  --rc-far: #9AA0A8;          /* the far-side limbs */
  --rc-lane: #F2F3F5;
  --rc-bar: #9AA0A8;
  display: grid; gap: 16px; min-width: 0; color: var(--ink); font-size: var(--fs-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rc { --rc-far: #6B7078; --rc-lane: #1E2023; --rc-bar: #6B7078; }
}
:root[data-theme="dark"] .rc { --rc-far: #6B7078; --rc-lane: #1E2023; --rc-bar: #6B7078; }

.rc-head p { max-width: 78ch; }
.rc-quiet { margin: 0; padding: 18px 0; color: var(--muted); }
.rc-card { position: relative; padding: 16px; min-width: 0; }
.rc-h { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; }
.rc-s { margin: 4px 0 0; max-width: 80ch; }

/* controls */
.rc-ctl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: 10px 12px; align-items: end; }
.rc-f { display: grid; gap: 5px; min-width: 0; }
.rc-fl { font-size: var(--fs-small); color: var(--muted); }
.rc-sel { width: 100%; min-width: 0; text-overflow: ellipsis; }
.rc-sel:focus-visible, .rc-play:focus-visible, .rc-hr:focus-visible, .rc-rm a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rc-play { min-height: 40px; min-width: 104px; }
.rc-pi { width: 12px; height: 12px; }

/* stage */
.rc-stage { padding: 14px 0 6px; overflow: hidden; }
.rc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 0 16px 10px; flex-wrap: wrap; }
.rc-evt { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.rc-evn { font-weight: 650; letter-spacing: -0.015em; }
.rc-evg { font-size: var(--fs-small); color: var(--muted); }
.rc-cw { display: flex; align-items: baseline; gap: 10px; margin-left: auto; }
.rc-clock { font-family: var(--font-mono); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.rc-ff { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 650; color: var(--accent-ink); visibility: hidden; }
.rc-ff.on { visibility: visible; }
.rc-track { position: relative; min-width: 0; }
.rc-track::after { content: ""; position: absolute; inset: 0; background: var(--sheet); opacity: 0; pointer-events: none; transition: opacity 260ms ease-out; }
.rc-track.flash::after { opacity: 0.7; transition: none; }
.rc-svg { display: block; width: 100%; height: auto; }

.rc-lane { fill: var(--rc-lane); }
.rc-lline { stroke: var(--rule-strong); stroke-width: 1; shape-rendering: crispEdges; }
.rc-tick { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 4; shape-rendering: crispEdges; }
.rc-tick.mid { stroke-dasharray: none; opacity: 0.8; }
.rc-tl { fill: var(--muted); font-family: var(--font-mono); font-size: 10.5px; }
.rc-tl.b { fill: var(--ink-2); font-weight: 600; }
.rc-start { stroke: var(--ink-2); stroke-width: 2; }
.rc-finbg { fill: var(--sheet); }
.rc-fin rect { fill: var(--ink); }
.rc-ln { font-size: 12.5px; }
.rc-lbib { fill: var(--sheet); stroke: var(--ink); stroke-width: 1.5; }
.rc-lnum { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; fill: var(--ink); }
.rc-lname { font-weight: 600; fill: var(--ink-2); }
.rc-lt { font-family: var(--font-mono); font-weight: 650; fill: var(--ink); font-variant-numeric: tabular-nums; }
.rc-dnf { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: var(--accent-ink); }
.rc-lt.nt { fill: var(--muted); font-weight: 500; }
.rc-pline { stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 3 3; }
.rc-ptxt { fill: var(--ink-2); font-family: var(--font-mono); font-size: 10.5px; }

.rc-fig { stroke-linecap: round; stroke-linejoin: round; fill: none; }
.rc-thigh { stroke: var(--ink); stroke-width: 5.4; }
.rc-shin { stroke: var(--ink); stroke-width: 4.1; }
.rc-arm { stroke: var(--ink); stroke-width: 3.6; }
.rc-thigh.far, .rc-shin.far, .rc-arm.far { stroke: var(--rc-far); }
.rc-shorts { stroke: var(--ink); stroke-width: 7.4; stroke-linecap: butt; }
.rc-torso { stroke: var(--ink); stroke-width: 8.6; }
.rc-head { fill: var(--ink); stroke: none; }
.rc-bibr { fill: var(--sheet); stroke: none; }
.rc-bibt { fill: var(--ink); stroke: none; font-family: var(--font-mono); font-size: 7.6px; font-weight: 700; }
.rc-ghost { opacity: 0.26; }
.rc-fig.nt { opacity: 0.32; }   /* a valid grade with no time on this event: stays at the start */

/* results board */
.rc-board { display: grid; gap: 12px; }
.rc-verdict { margin: 0; font-size: 1.0625rem; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.rc-verdict b { font-weight: 650; }
.rc-ratio { font-family: var(--font-mono); letter-spacing: -0.02em; }
.rc-bib {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 1.5px solid var(--ink);
  border-radius: 0; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; line-height: 1; align-self: center;
}
.rc-res2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rc-res { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm); min-width: 0; }
.rc-rh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rc-rn { font-weight: 620; min-width: 0; overflow-wrap: anywhere; }
.rc-rt { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rc-rt.dnf { color: var(--accent-ink); }
.rc-rt.nt { color: var(--muted); }
.rc-rm { display: grid; gap: 3px; font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.rc-rm b { color: var(--ink); font-weight: 650; font-family: var(--font-mono); }
.rc-rm a { width: fit-content; }
.rc-why { color: var(--ink-2); }
.rc-rx { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 2px 0 0; font-size: var(--fs-small); }
.rc-rx dt { color: var(--muted); }
.rc-rx dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rc-bnote { margin: 0; max-width: 90ch; }

/* heat sheet */
.rc-hax, .rc-hr { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) 6.2rem; gap: 12px; align-items: center; }
.rc-hax { margin-top: 12px; padding: 0 8px; }
.rc-hax-t { position: relative; min-width: 0; }
.rc-hax-s { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.rc-hax-n { position: relative; height: 16px; }
.rc-hax-v { position: absolute; top: 2px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.rc-hrows { display: grid; gap: 1px; margin-top: 2px; }
.rc-hg { margin: 10px 8px 2px; font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); }
.rc-hr {
  width: 100%; min-height: 26px; padding: 3px 8px; margin: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer;
}
.rc-hr:hover { background: var(--hover); color: var(--ink); }
.rc-hr.on { background: var(--hover); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.rc-hr.all { font-weight: 650; color: var(--ink); }
.rc-hl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-hb { position: relative; height: 12px; }
.rc-hb .rc-h1 { position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 1px solid var(--rule-strong); }
.rc-hb b { position: absolute; top: 1px; height: 10px; background: var(--rc-bar); }
.rc-hb b.r { border-radius: 0; }
.rc-hb b.l { border-radius: 0; }
.rc-hr.on .rc-hb b { background: var(--accent); }
.rc-hdnf { position: absolute; top: 5px; height: 0; border-top: 1.5px dashed var(--rule-strong); }
.rc-hv { font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--ink-2); }

@container (max-width: 720px) {
  .rc-ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rc-ctl .rc-f:nth-child(3) { grid-column: 1 / 2; }
  .rc-pw { grid-column: 2 / 3; }
  .rc-play { width: 100%; }
  .rc-hax, .rc-hr { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 5.4rem; gap: 8px; }
}
@container (max-width: 520px) {
  .rc-ctl { grid-template-columns: minmax(0, 1fr); }
  .rc-ctl .rc-f:nth-child(3), .rc-pw { grid-column: auto; }
  .rc-res2 { gap: 8px; }
  .rc-res { padding: 10px; }
  .rc-rt { font-size: 1.0625rem; }
  .rc-rn { font-size: 0.875rem; }
  .rc-rx { gap: 2px 8px; }
  .rc-card { padding: 12px; }
  .rc-stage { padding: 10px 0 4px; }
  .rc-top { padding: 0 12px 8px; }
  .rc-clock { font-size: 1.125rem; }
  .rc-hr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; gap: 1px 8px; padding: 3px 6px 5px; min-height: 0; }
  .rc-hb { height: 9px; }
  .rc-hb b { top: 1px; height: 7px; }
  .rc-hl { grid-area: l; white-space: normal; } .rc-hv { grid-area: v; align-self: start; } .rc-hb { grid-area: b; }
  .rc-hax { grid-template-columns: minmax(0, 1fr); padding: 0 6px; }
  .rc-hax .rc-hax-0 { display: none; }
}
@container (max-width: 330px) {
  .rc-res2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rc-track::after { transition: none; }
}

/* A task page's frame (app.js oweEmbed): Play sits in the race's top row at its own width; on a phone the event wraps
   below Play and the clock */
.embed .rc-top { align-items: center; }
.embed .rc-top .rc-play { width: auto; }
@container (max-width: 520px) { .embed .rc-evt { order: 1; flex-basis: 100%; } }