/* =====================================================================
   Straight race, side by side (index.html). 1 to 6 lanes.
   Header and footer use the page-frame classes in screens.css.

   straight-screen.js draws the lanes and sets on .d-course:
     data-mode   "wide" (1–2 lanes) or "compact" (3–6 lanes)
     --bar-h     bar height
     --arrow-w   arrowhead length
     --arrow-h   arrowhead height
   ===================================================================== */

.s-course { position: relative; margin: 0 48px; }
.s-course > * { position: absolute; }

.s-track { left: 0; right: 0; background: var(--track); }

/* Distance tag riding above each boat */
.s-tag {
  transform: translateX(-50%);
  padding: 2px 8px;
  background: var(--white);
  border: 1px solid var(--lane);
  border-radius: var(--radius);
  color: var(--lane-text);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* km ticks (drawn by straight-screen.js) */
.s-ticks { left: 0; right: 0; height: 32px; }
.s-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.s-tick span { width: 1px; height: 8px; background: var(--muted); }
.s-tick p { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- Lane colours: --lane fills, --lane-text for text on white ---------- */

.lane-c0 { --lane: var(--team1); --lane-text: var(--black); }
.lane-c1 { --lane: var(--team2); --lane-text: var(--team2); }
.lane-c2 { --lane: var(--team3); --lane-text: var(--team3); }
.lane-c3 { --lane: var(--team4); --lane-text: var(--team4); }
.lane-c4 { --lane: var(--team5); --lane-text: var(--team5); }
.lane-c5 { --lane: var(--team6); --lane-text: var(--team6); }

/* ---------- Course ---------- */

.d-course { height: 276px; --bar-h: 40px; --arrow-w: 28px; --arrow-h: 60px; }
.d-start-line { left: 0; top: 44px; width: 2px; height: 190px; margin-left: -1px; background: var(--black); }
.d-finish-line { left: 100%; top: 44px; width: 4px; height: 190px; margin-left: -2px; background: var(--black); }
.d-ticks { top: 240px; }

/* Lanes: each .d-lane is one bar's height, placed by straight-screen.js */
.d-lanes { left: 0; right: 0; top: 0; }
.d-lane { position: absolute; left: 0; right: 0; height: var(--bar-h); }
.d-lane > * { position: absolute; }

/* Track and bar start at the start line's right edge, and the track stops at the finish
   line's left edge, so neither line is half covered */
.d-track { top: 0; left: 1px; right: 2px; height: var(--bar-h); }

/*
 * Bars end where the arrowhead begins: a transparent border the arrowhead's length at the
 * leading edge with the background kept off it, so the arrow's nose sits exactly on the distance.
 */
.d-fill {
  left: 1px;
  top: 0;
  height: var(--bar-h);
  box-sizing: border-box;
  background-clip: padding-box;
  background-color: var(--lane);
  border-right: var(--arrow-w) solid transparent;
}
.d-arrow {
  top: calc((var(--bar-h) - var(--arrow-h)) / 2);
  width: 0; height: 0;
  margin-left: calc(-1 * var(--arrow-w));
  border-top: calc(var(--arrow-h) / 2) solid transparent;
  border-bottom: calc(var(--arrow-h) / 2) solid transparent;
  border-left: var(--arrow-w) solid var(--lane);
}

/* Finished lane (its track is hidden): the tip crosses the 4 px finish line to its far
   edge, so the point shows over the line instead of disappearing into it */
.d-track[hidden] ~ .d-arrow { margin-left: calc(2px - var(--arrow-w)); }
.d-track[hidden] ~ .d-fill { min-width: calc(100% + 2px); }

/* Wide: tag above the bar, name below it */
.d-tag { top: -38px; }
.d-name { left: 10px; top: calc(var(--bar-h) + 6px); font-size: 13px; font-weight: 700; color: var(--lane-text); }
.d-label { display: none; }

/* Compact: name and distance in a column left of the start line, clear of the
   arrowheads, which wait behind the line at the start */
.d-course[data-mode="compact"] { margin-left: calc(48px + 220px); }
.d-course[data-mode="compact"] .d-start-line,
.d-course[data-mode="compact"] .d-finish-line { top: 22px; height: 212px; }
.d-course[data-mode="compact"] .d-tag,
.d-course[data-mode="compact"] .d-name { display: none; }
.d-course[data-mode="compact"] .d-label {
  display: flex;
  align-items: center;
  gap: 8px;
  right: calc(100% + 16px + var(--arrow-w));
  top: 50%;
  width: calc(204px - var(--arrow-w));
  transform: translateY(-50%);
}
.d-swatch { flex: none; width: 10px; height: 10px; background: var(--lane); }
.d-label-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}
.d-label-km { flex: none; font-size: 15px; font-weight: 700; color: var(--lane-text); }

/* The gap from the trailing boat to the leader, shown while everyone is racing and it's
   wide enough to read (gapShown). straight-screen.js sets its top and height to span the lanes. */
.d-gap {
  box-sizing: border-box;
  border-left: 1px dashed var(--muted);
  border-right: 1px dashed var(--muted);
  background: rgba(0, 0, 0, 0.03);
}
.d-gap[hidden] { display: none; }
.stage.is-live .d-gap { transition: left var(--motion), width var(--motion); }

/* ---------- Footer ---------- */

/* 1–2 lanes: lanes 1 and 2 either side of the lead. Hide the second column in a one-lane race. */
.stage[data-lanes="1"] .r-col-right { visibility: hidden; }

/* 3–6 lanes (compact): the lead as a headline on the left, the field on the right */
.r-field { display: none; }
.stage[data-mode="compact"] .r-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage[data-mode="compact"] .r-foot > .r-col:not(.r-col-mid) { display: none; }
.stage[data-mode="compact"] .r-col-mid { align-items: flex-start; text-align: left; }
.stage[data-mode="compact"] .r-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-self: end;
  width: 400px;
}

.r-field-label { align-self: flex-end; font-size: 13px; color: var(--muted); }
.r-field-rows { display: flex; flex-direction: column; gap: 2px; }
.r-field-row {
  display: grid;
  grid-template-columns: 36px 10px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  line-height: 20px;
}
.r-field-row[hidden] { display: none; }
.r-field-place { font-size: 14px; font-weight: 600; color: var(--muted); }
.r-field-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
}
.r-field-gap { font-size: 15px; font-weight: 700; color: var(--lane-text); }