/* The same section range drives live speed, delta and completed-lap overlays. */
.speed-section-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-width: 0; margin-bottom: 9px; }
.speed-section-choice { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--muted); font-size: 11px; }
.speed-section-choice > span { white-space: nowrap; }
.speed-section-choice select { width: 203px; max-width: 100%; min-height: 36px; padding: 7px 28px 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-weight: 550; }
.speed-section-choice select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.speed-section-context { color: var(--muted); font-size: 10px; line-height: 1.4; }
.track-section-band { fill: currentColor; opacity: .013; }
.track-section-band--named { fill: var(--accent); opacity: .035; }
.track-section-band--selected { fill: var(--accent); opacity: .075; }
.track-section-guide { stroke: var(--muted); stroke-width: .8; stroke-dasharray: 2 5; opacity: .28; }
.track-section-guide--selected { stroke: var(--accent); stroke-width: 1; opacity: .65; }
.track-section-label { fill: var(--muted); font-size: 10px; font-weight: 550; }
.track-section-label--selected { fill: var(--accent); font-weight: 700; }
.track-section-finish { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
.live-legend-location { color: var(--muted); }
.live-chart-legend .live-legend-location::before { content: '·'; margin-right: 5px; opacity: .7; }
.live-chart-panel > .live-delta-note [data-lc="section-note"] { display: block; margin-top: 2px; }
.chart-scrubber #trace-distance-label { color: var(--text); font-weight: 550; }
.chart-scrubber > label { white-space: normal; }
.trace-readout small { margin-left: 4px; color: var(--muted); font-size: inherit; }
body[data-configuring="true"] .speed-section-bar { margin-bottom: 18px; padding: 0 1px; }
@media (max-width: 600px) {
  .speed-section-bar { gap: 7px; padding: 0 10px; margin-bottom: 7px; }
  .speed-section-choice { gap: 7px; font-size: 10px; }
  .speed-section-choice select { width: 185px; min-height: 34px; padding: 7px 24px 7px 8px; }
  .speed-section-context { max-width: 84px; font-size: 9px; text-align: right; }
  .track-section-label { font-size: 9px; }
}
@media (max-width: 350px) {
  .speed-section-context { display: none; }
  .speed-section-choice { width: 100%; }
  .speed-section-choice select { flex: 1; width: auto; }
}