/* /compare (compare.js): track and condition, a tab per class, one table per class.
 * The table scrolls inside its box; the page never scrolls sideways. */
.cmp-page { min-width: 0; }
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); }
.cmp-track { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-small); color: var(--text-3); min-width: 0; max-width: 100%; }
.cmp-track select { min-height: 34px; min-width: 0; max-width: min(100%, 360px); }
.cmp-cond { flex-wrap: wrap; border-radius: var(--v2-r-lg, 10px); max-width: 100%; }
.cmp-cond button { font-size: var(--fs-small); padding: 6px 12px; }
.cmp-classes { margin-bottom: var(--s3); }
.cmp-classes[hidden] { display: none; }
.cmp-n { color: var(--text-3); font-weight: 400; margin-left: 4px; }

.cmp-wrap { max-width: 100%; }
.cmp-table { font-variant-numeric: tabular-nums; min-width: 640px; }
.cmp-table th, .cmp-table td { white-space: nowrap; vertical-align: top; }
.cmp-table thead th { padding: 0; }
.cmp-sort { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px; cursor: pointer;
    font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cmp-sort:hover, th[aria-sort] .cmp-sort { color: var(--text-hi, var(--text)); }
.cmp-sort:focus-visible { box-shadow: var(--v2-focus, 0 0 0 2px var(--accent)); }
/* Sortable headings in lb-table tables (/official, /bop): the button carries the padding. */
.lb-table thead th.cmp-th { padding: 0; }
.cmp-table tbody th { font-weight: 700; color: var(--text-hi, var(--text)); white-space: normal; min-width: 180px;
    text-transform: none; letter-spacing: normal; font-family: inherit; font-size: var(--fs-body); }
.cmp-car { display: block; }
.cmp-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-width: 0; max-width: 100%; }
.cmp-field[hidden] { display: none; }
.cmp-lbl { font-size: var(--fs-small); color: var(--text-3); cursor: help; }
.cmp-you { margin: 0 0 var(--s3); font-size: var(--fs-small); font-weight: 650; color: var(--text-hi, var(--text)); }
.cmp-sample { display: block; margin-top: 2px; font-size: var(--fs-micro); font-weight: 400; color: var(--text-3); }
.cmp-v { font-size: var(--fs-body); font-weight: 650; color: var(--text-hi, var(--text)); }
.cmp-rank { margin-left: 8px; font-size: var(--fs-micro); color: var(--text-3); }
.cmp-table td.is-best { background: var(--v2-wash, rgba(var(--accent-rgb), .13)); box-shadow: inset 3px 0 0 var(--accent); }
.cmp-table td.is-best .cmp-rank { color: var(--accent); font-weight: 700; }
.cmp-none { color: var(--text-4); }
.cmp-empty { margin: var(--s4) 0; padding: var(--s5) var(--s4); text-align: center; color: var(--text-3);
    border: 1px dashed var(--line); border-radius: var(--radius); }
.cmp-updated { margin: -8px 0 0; font-size: var(--fs-micro); color: var(--text-3); }
/* Phones: the car column stays put while the numbers scroll under it. */
@media (max-width: 640px) {
    .cmp-table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--v2-raise, var(--panel)); box-shadow: 1px 0 0 var(--v2-line-2, var(--line)); }
    .cmp-table tbody th { min-width: 132px; max-width: 150px; font-size: var(--fs-small); }
}

/* Pace group buttons: each % group in its own color (compare.js PACE_COLOR), fast purple to slow red. */
.cmp-group .cmp-pace { display: inline-flex; align-items: center; gap: 6px; }
.cmp-group .cmp-pace-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pg); flex: none; }
.cmp-group .cmp-pace[aria-pressed="true"] { background: color-mix(in srgb, var(--pg) 22%, transparent); border-color: var(--pg); box-shadow: inset 0 -2px 0 var(--pg); }
.cmp-group .cmp-pace:hover { border-color: var(--pg); }

/* Lap progression chart (compare.js paintChart): inline SVG, one line per car, fits the page width. */
.cmp-chart { margin: 0 0 var(--s4); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--v2-raise, var(--panel)); min-width: 0; }
.cmp-chart[hidden], .cmp-chart-head .seg-toggle[hidden] { display: none; }
.cmp-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.cmp-chart-title { margin: 0; font-size: var(--fs-body); }
.cmp-chart .cmp-empty { margin: var(--s2) 0; }
.cmp-plot { position: relative; min-width: 0; }
.cmp-svg { display: block; width: 100%; height: auto; overflow: hidden; touch-action: pan-y; }
.cmp-axis-y { margin: 0 0 4px; font-size: var(--fs-micro); color: var(--text-3); }
.cmp-grid { stroke: var(--line); stroke-width: 1; }
.cmp-tick, .cmp-axis { fill: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.cmp-line path { fill: none; stroke: var(--lc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cmp-line circle { fill: var(--lc); }
.cmp-line.is-mine path { stroke-width: 3.5; }
.cmp-line.is-ref path { stroke-dasharray: 6 5; stroke-width: 2; opacity: .85; }
.cmp-line.is-hl path { stroke-width: 4; }
.cmp-line.is-dim { opacity: .18; }
.cmp-guide { stroke: var(--text-3); stroke-dasharray: 2 3; }
.cmp-mark { fill: var(--v2-raise, var(--panel)); stroke-width: 2.5; pointer-events: none; }
.cmp-tip { position: absolute; z-index: 2; max-width: 100%; padding: 4px 8px; border-radius: 6px; pointer-events: none;
    background: var(--text-hi, var(--text)); color: var(--v2-raise, var(--panel)); font-size: var(--fs-micro); font-weight: 650; white-space: nowrap; }
.cmp-tip[hidden] { display: none; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: var(--s2); }
.cmp-key { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 6px;
    border-radius: 6px; font-size: var(--fs-small); color: var(--text-2, var(--text)); cursor: pointer; }
.cmp-key:hover, .cmp-key[aria-pressed="true"] { color: var(--text-hi, var(--text)); background: color-mix(in srgb, var(--lc) 18%, transparent); }
.cmp-key:focus-visible { box-shadow: var(--v2-focus, 0 0 0 2px var(--accent)); }
.cmp-key.is-note { cursor: default; color: var(--text-3); background: none; --lc: var(--text-3); }
.cmp-key-line { width: 18px; height: 0; border-top: 3px solid var(--lc); flex: none; }
.cmp-key-line.is-ref { border-top-style: dashed; border-top-width: 2px; }
.cmp-key-line.is-proj { border-top-style: dotted; border-top-width: 3px; }
.cmp-key-n { color: var(--text-3); font-size: var(--fs-micro); }
.cmp-line path.cmp-proj { stroke-dasharray: 1 6; stroke-width: 3; opacity: .8; }
.cmp-table tbody tr[data-car] { cursor: pointer; }
.cmp-table tbody tr.is-hl > * { background: var(--v2-wash, rgba(var(--accent-rgb), .13)); }
#cmpMetric { flex-wrap: nowrap; }
@media (max-width: 640px) {
    .cmp-tip { white-space: normal; }
    #cmpMetric button { padding: 6px 10px; }
    .cmp-legend { gap: 4px 8px; }
}