/* 07 · Mesmo pedido, duas corridas (tom escuro desde 17/10).
   Corrida do v7.1 (CSS L479-502, markup L1128-1140), com os tokens da base no lugar
   das cores fixas de lá, para acompanhar o tom. */

#corrida .cr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 24px; }
#corrida .cr-head h2 { max-width: 16ch; }

#corrida .cr-replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer;
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  transition: color .2s, border-color .2s;
}
#corrida .cr-replay:hover { color: var(--ink); border-color: var(--ink-3); }
#corrida .cr-replay[hidden] { display: none; }
#corrida .cr-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#corrida .cr-race {
  margin-top: clamp(32px, 4.4vw, 56px);
  padding: clamp(10px, 1.6vw, 22px) clamp(22px, 3vw, 40px);
  border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
}
#corrida .cr-lane { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 0; }
#corrida .cr-lane + .cr-lane { border-top: 1px dashed var(--line); }
#corrida .cr-lane-h { font: 500 .76rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
#corrida .cr-in .cr-lane-h { color: var(--accent); }

#corrida .cr-trk { position: relative; }
#corrida .cr-bar { position: absolute; left: 0; right: 0; top: 15px; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
#corrida .cr-bar i { position: absolute; inset: 0; background: var(--ink-3); transform-origin: left; transform: scaleX(var(--to)); }
#corrida .cr-in .cr-bar i { background: var(--accent); }
#corrida .cr-trk ol { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#corrida .cr-trk li { display: flex; flex-direction: column; gap: 10px; font-size: clamp(.92rem, 1.1vw, 1.05rem); line-height: 1.25; color: var(--ink); }
#corrida .cr-trk li::before {
  content: ""; width: 14px; height: 14px; margin-top: 9px; border-radius: 4px;
  background: var(--surface); border: 2px solid var(--ink-3);
  transition: background-color .3s, border-color .3s;
}
#corrida .cr-in .cr-trk li::before { border-color: var(--accent); background: var(--accent); }
#corrida .cr-trk li.cr-stop { color: var(--ink-2); font-style: italic; }
#corrida .cr-trk li.cr-stop::before { border-style: dashed; background: transparent; }

/* corrida: "armed" zera, "run" anima (só com JS e sem reduced motion) */
#corrida .cr-race.armed .cr-bar i { transform: scaleX(0); }
#corrida .cr-race.armed .cr-trk li { color: var(--ink-3); }
#corrida .cr-race.armed .cr-in .cr-trk li::before { background: var(--surface); }
#corrida .cr-race.run .cr-bar i { transform: scaleX(var(--to)); transition: transform calc(var(--dur) * 1s) linear; }
#corrida .cr-race.run .cr-trk li { color: var(--ink); transition: color .3s calc(var(--i) * .5s); }
#corrida .cr-race.run .cr-trk li.cr-stop { color: var(--ink-2); }
#corrida .cr-race.run .cr-in .cr-trk li::before { background: var(--accent); transition: background-color .3s calc(var(--i) * .5s); }

#corrida .cr-close {
  margin-top: clamp(40px, 6vw, 80px);
  font: 500 clamp(1.7rem, 3.6vw, 3rem)/1.08 var(--sans); letter-spacing: -.03em; color: var(--ink-2);
  text-wrap: balance;
}
#corrida .cr-close strong { display: block; font-weight: 500; color: var(--ink); }

@media (max-width: 720px) {
  #corrida .cr-lane { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
  #corrida .cr-trk li { font-size: .76rem; padding-right: 4px; overflow-wrap: anywhere; }
}