/* Keep one small action row available while the setup cards stay in Customize. */
#compare-pickers { display: block; }
.comparison-manage-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.comparison-selection-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; min-width: 0; }
.comparison-selection-count strong { color: var(--text); font-size: 12px; font-weight: 550; }
.comparison-selection-count span { color: var(--muted); font-size: 10px; }
.comparison-manage-bar .btn { flex: 0 0 auto; min-height: 35px; padding: 7px 11px; font-size: 11px; white-space: nowrap; }
.comparison-manage-bar .btn:disabled { cursor: default; opacity: .5; }
.comparison-pickers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; }
.comparison-pickers-grid .compare-slot { min-width: 0; }
.comparison-pickers-grid .slot-remove { width: 30px; height: 30px; min-height: 30px; }
.comparison-pickers-grid .slot-actions { gap: 8px; }
.comparison-pickers-grid .slot-actions .text-button { min-height: 30px; }
body[data-configuring="false"] #historical-comparison-view #compare-pickers { display: block !important; margin: 0; }
body[data-configuring="false"] #compare-pickers .comparison-pickers-grid { display: none; }
body[data-configuring="false"] .comparison-manage-bar { margin: 0 0 10px; padding: 0 2px; }
#comparison-summary { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#speed-legend .comparison-legend-label { font-variant-numeric: tabular-nums; }
.comparison-legend-line { display: inline-block; width: 23px; height: 10px; overflow: visible; flex: 0 0 auto; vertical-align: middle; }

/* The completed-lap comparison always shows speed and time slip together. */
.completed-lap-chart #speed-chart,
.completed-lap-chart #comparison-delta-chart { width: 100%; min-width: 0; padding: 0 6px; overflow: hidden; }
.completed-lap-chart #speed-chart { height: clamp(195px, 29dvh, 280px); }
.comparison-delta-chart { height: clamp(155px, 21dvh, 205px); }
.comparison-delta-chart svg { display: block; width: 100%; height: 100%; }
.comparison-delta-zero { stroke-width: 1.35; opacity: .85; }
.comparison-delta-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 2px; border-top: 1px solid var(--line-soft); }
.comparison-delta-header h4 { margin: 0; font-size: 11px; line-height: 1.4; font-weight: 600; }
.comparison-delta-header h4 > span { color: var(--muted); font-size: 10px; font-weight: 450; }
.comparison-delta-header > span { display: flex; gap: 10px; font-size: 10px; }
.comparison-delta-header b { font-weight: 550; }
.completed-lap-chart #speed-legend { gap: 6px 18px; }
#speed-legend .comparison-legend-label { gap: 5px; flex-wrap: wrap; }
.comparison-total-slip { font-size: 10px; font-weight: 550; }
.comparison-total-slip::before { content: '·'; color: var(--muted); padding-right: 5px; }
.completed-lap-chart .trace-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; flex-basis: 100%; margin-left: 0; }
.trace-readout > .comparison-readout { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line-soft); border-radius: 6px; white-space: normal; }
.comparison-readout-car { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 10px; }
.comparison-readout-car > b { color: var(--muted); font-weight: 550; }
.comparison-readout-car > strong { margin-left: auto; font-size: 10px; font-weight: 550; }
.comparison-readout-slip { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trace-readout .comparison-readout > small { margin-left: 0; font-size: 9px; color: var(--subtle); }
body[data-configuring="false"] .completed-lap-chart > .panel-header { padding-bottom: 8px; }
body[data-configuring="false"] .completed-lap-chart > .panel-header p { display: none; }

@media (max-width: 760px) {
  .comparison-pickers-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .comparison-selection-count { display: block; }
  .comparison-selection-count strong { display: block; font-size: 10px; }
  .comparison-selection-count span { display: block; font-size: 9px; margin-top: 3px; }
  .comparison-manage-bar { gap: 8px; }
  .comparison-manage-bar .btn { min-height: 38px; padding: 8px 9px; font-size: 10px; }
  body[data-configuring="false"] .comparison-manage-bar { padding: 0 10px; margin-bottom: 9px; }
  #comparison-summary { grid-template-columns: minmax(0, 1fr); }
  .completed-lap-chart #speed-chart { height: clamp(185px, 26dvh, 225px); }
  .completed-lap-chart #comparison-delta-chart { height: 155px; }
  .comparison-delta-header { padding: 7px 11px 2px; }
  .comparison-delta-header h4 { font-size: 10px; }
  .comparison-delta-header h4 > span, .comparison-delta-header > span { font-size: 9px; }
  .completed-lap-chart #speed-legend { gap: 5px 12px; padding-bottom: 7px; }
  .completed-lap-chart .comparison-team { display: none; }
  .completed-lap-chart .comparison-legend-label { font-size: 9px; }
  .comparison-total-slip { font-size: 9px; }
  .completed-lap-chart .chart-scrubber { padding: 10px 11px; }
  .completed-lap-chart .trace-readout { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
  .trace-readout > .comparison-readout { padding: 7px; }
  .comparison-readout-car, .comparison-readout-car > strong { font-size: 9px; }
  .comparison-readout-car > strong { flex-basis: 100%; margin-left: 0; }
  .comparison-readout-slip { font-size: 10px; }
}

@media (max-width: 350px) {
  .comparison-readout-slip { font-size: 9px; }
  .comparison-delta-header > span { gap: 6px; font-size: 8px; }
}