/* ── Lap-time grid + "still running" chart ────────────────────────────────
   Shared by index.html and admin.html. Colours are derived from the page's
   own variables: --red is the configurable theme colour (set from
   race_config.primaryColor in applyBranding / applyAdminBranding), so the
   lap-time tones follow the event's branding automatically. */

.lg-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 4px;
  --lg-name-w: 180px;
  --lg-gap: 2px;
  /* Cell width stretches so the yards fill the content column, between a
     phone-friendly minimum and a cap that keeps a 12-yard race from turning
     into a row of slabs. --lg-yards is set inline by renderGrid(); the 48px
     is room for the "Completed"/out-lap label after the last cell. */
  --lg-yards: 24;
  --lg-cell: clamp(11px, calc((100% - var(--lg-name-w) - var(--lg-tail)) / var(--lg-yards) - var(--lg-gap)), 96px);
  --lg-cell-h: 16px;
  --lg-tail: 48px;   /* room for the "Completed" / out-lap label */
  --lg-step: calc(var(--lg-cell) + var(--lg-gap));
  font-family: var(--mono);
}
.lg-row {
  display: flex;
  align-items: center;
  height: 22px;
  cursor: pointer;
  white-space: nowrap;
}
.lg-row:hover .lg-name { color: var(--red); }
.lg-row.lg-sep {
  cursor: default;
  height: 28px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.lg-row.lg-sep .lg-name { color: var(--grey); }
.lg-name {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: none;
  width: var(--lg-name-w);
  padding-right: 10px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  background: var(--surface);
  transition: color 0.15s;
}
.lg-name .lg-rank {
  display: inline-block;
  min-width: 28px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--grey);
}
.lg-row.lg-out .lg-name { color: var(--grey-dim, #bababa); }
/* Winner's name in the same gold as the table's winner row. */
.lg-row.lg-winner .lg-name { color: #fbbf24; }
.lg-row.lg-winner:hover .lg-name { color: #fde68a; }
.lg-cell {
  flex: none;
  width: var(--lg-cell);
  height: var(--lg-cell-h);
  margin-right: var(--lg-gap);
  border-radius: 2px;
  box-sizing: border-box;
  background: var(--surface2);
  border: 1px solid #343434;
}
/* Lap-time bands, lightest → strongest, all mixed from the theme colour. */
.lg-cell[data-b="0"] { background: color-mix(in srgb, var(--red) 20%, var(--surface2)); }
.lg-cell[data-b="1"] { background: color-mix(in srgb, var(--red) 38%, var(--surface2)); }
.lg-cell[data-b="2"] { background: color-mix(in srgb, var(--red) 56%, var(--surface2)); }
.lg-cell[data-b="3"] { background: color-mix(in srgb, var(--red) 76%, var(--surface2)); }
.lg-cell[data-b="4"] { background: var(--red); }
/* Out-of-race markers deliberately avoid colour altogether: any hue can
   clash with a theme-derived tone (orange/red did against a red theme), but
   a solid white block with an ✕ and a dashed hollow block never can. */
.lg-cell.lg-dnf,
.lg-cell.lg-dns,
.lg-cell.lg-done {
  position: relative;
  font-family: var(--mono);
  font-weight: 700;
  line-height: var(--lg-cell-h);
  text-align: center;
}
.lg-cell.lg-dnf {
  background: var(--white);
  color: var(--bg, #080808);
  font-size: 10px;
}
.lg-cell.lg-dnf::after { content: '✕'; }
/* Completed a fixed-lap race (or won): white block with a tick. */
.lg-cell.lg-done {
  background: var(--white);
  color: var(--bg, #080808);
  font-size: 10px;
}
.lg-cell.lg-done::after { content: '✓'; }
.lg-row .lg-outlap { color: var(--white); opacity: 0.85; }
.lg-cell.lg-dns {
  background: transparent;
  border: 1.5px dashed var(--grey);
  color: var(--grey);
  font-size: 9px;
  line-height: calc(var(--lg-cell-h) - 3px);
}
.lg-cell.lg-dns::after { content: '–'; }
.lg-cell.lg-now {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--red) 70%, var(--white)) !important;
  animation: lgPulse 1.6s ease-in-out infinite;
}
@keyframes lgPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.lg-outlap {
  flex: none;
  margin-left: 4px;
  font-size: 0.68rem;
  color: var(--grey);
}
.lg-axis {
  position: relative;
  height: 20px;
  margin-top: 6px;
  /* Padding rather than margin so that 100% inside --lg-cell's calc() means
     the same full row width here as it does in the cells. */
  padding-left: var(--lg-name-w);
  box-sizing: border-box;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.lg-axis span {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.lg-axis span:first-child { transform: translateX(calc(0px - var(--lg-cell) / 2)); }
.lg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--grey);
}
.lg-legend .lg-cell {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin: 0 5px 0 0;
}
.lg-legend .lg-cell.lg-now { animation: none; }
.lg-empty { padding: 32px; text-align: center; color: var(--grey); font-family: var(--mono); font-size: 0.8rem; }

@media (min-width: 768px) {
  .lg-wrap { --lg-name-w: 220px; --lg-cell-h: 22px; --lg-gap: 3px; --lg-tail: 96px; }
  .lg-row { height: 30px; }
  .lg-row.lg-sep { height: 34px; font-size: 0.74rem; }
  .lg-name { font-size: 1.08rem; }
  .lg-name .lg-rank { min-width: 34px; font-size: 0.74rem; }
  .lg-cell.lg-dnf, .lg-cell.lg-done { font-size: 13px; }
  .lg-cell.lg-dns { font-size: 11px; }
  .lg-outlap { font-size: 0.8rem; margin-left: 8px; }
  .lg-axis { font-size: 0.72rem; height: 22px; }
  .lg-legend { font-size: 0.76rem; gap: 10px 20px; padding-top: 14px; }
  .lg-legend .lg-cell { width: 14px; height: 14px; line-height: 14px; }
}

@media (max-width: 600px) {
  /* Cells keep the stretch formula so a short race fills the phone width;
     the 11px floor in --lg-cell is what makes a long race scroll instead. */
  .lg-wrap { --lg-name-w: 128px; --lg-tail: 24px; }
  /* No room for "Winner"/"Completed" labels on a phone — the gold name and
     the ✓ on the last yard carry that on their own. */
  .lg-status { display: none; }
  .lg-name { font-size: 0.82rem; }
  .lg-name .lg-rank { min-width: 22px; }
}

/* ── Survival chart ─────────────────────────────────────────────────────── */
.sv-wrap { font-family: var(--mono); }
.sv-head { padding: 0 0 12px; }
.sv-title { font-family: var(--head, var(--body)); font-size: 1.5rem; letter-spacing: 0.03em; color: var(--white); line-height: 1; }
.sv-sub   { margin-top: 6px; font-size: 0.72rem; color: var(--grey); }
.sv-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-chart .sv-grid  { stroke: var(--border); stroke-width: 1; }
.sv-chart .sv-night { fill: var(--white); opacity: 0.06; }
.sv-chart .sv-line  { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sv-chart .sv-dot   { fill: var(--red); }
.sv-chart .sv-tick  { fill: var(--grey); font-size: 11px; font-family: var(--mono); }
.sv-chart .sv-now   { stroke: var(--grey); stroke-dasharray: 3 3; stroke-width: 1; }
.sv-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding-top: 12px; font-size: 0.66rem; color: var(--grey);
}
.sv-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.sv-legend .sv-i-line  { width: 18px; height: 0; border-top: 2.5px solid var(--red); }
.sv-legend .sv-i-night { width: 12px; height: 12px; background: var(--white); opacity: 0.14; }
.sv-legend .sv-i-now   { width: 18px; height: 0; border-top: 1px dashed var(--grey); }