/* The pit-wall board: dense, monospace, every channel on screen. It is a
   section of the main page now (under the graphs), not a window of its own. */
/* the pit-wall pieces: the headline bar, the alert chips and the streams table */
.pw-panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-width:0;overflow:hidden}
.pw-panel h3{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.pw-panel h3 small{letter-spacing:0;text-transform:none;font-weight:400;color:var(--dim)}
.pw-panel h3 .flag{margin-left:auto;font-family:var(--mono);color:var(--warn);font-weight:600}
.pw-panel h3 .chk{text-transform:none;letter-spacing:0;font-weight:400;display:flex;gap:4px;align-items:center;margin:0}

/* headline numbers */
.hero{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.hero .big{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;min-width:0}
.hero .big small{font-size:9px;letter-spacing:.14em;color:var(--dim)}
.hero .big b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden}
.hero .big em{font-style:normal;font-size:10px;color:var(--dim);font-family:var(--mono);white-space:nowrap}
.hero .gear b{font-size:34px;color:var(--ac)}
.hero .bal b{font-size:18px;letter-spacing:.04em;padding-top:4px}
.hero .bal b.us{color:var(--accent)}.hero .bal b.os{color:var(--warn)}.hero .bal b.nt{color:var(--good)}

/* cross-lap comparison: lat/long g and balance at the same distance-into-lap
   on every comparison lap, alongside the alerts */
/* fixed slot so the number of comparison laps loaded (0 to many) never
   changes the pit wall's own height and shoves the graphs below it */
.pw-cmp{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;margin-top:4px;
  max-height:52px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.pw-cmp span{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);white-space:nowrap}
.pw-cmp span i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.pw-state.open .pw-cmp{max-height:104px}

/* compact live sector-times summary: this lap's own times plus the delta to
   the best-combined (theoretical) time per sector. Same fixed-slot treatment
   as .pw-cmp above, so a lap with more or fewer sectors never reflows the wall. */
.pw-sec{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;margin-top:4px;
  max-height:40px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.pw-sec span{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);white-space:nowrap}
.pw-sec span.best{color:var(--good);border-color:#2f6b4f}
.pw-sec span.behind{color:var(--dim)}
.pw-state.open .pw-sec{max-height:80px}

/* alerts */
.alerts{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;align-content:flex-start}
.alerts span{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);white-space:nowrap}
.alerts span.ok{color:var(--good);border-color:#1f4b35}
.alerts span.warn{color:var(--ac);border-color:#5a4520}
.alerts span.crit{color:#fff;background:#5a1f1f;border-color:var(--warn)}
.alerts span::before{content:"⚠ ";opacity:.8}.alerts span.ok::before{content:"✓ "}.alerts span.crit::before{content:"✖ "}

/* strips: label · graph · value (one row each, graphs tall enough to read) */
.strips{display:flex;flex-direction:column;gap:5px}
.strip{display:grid;grid-template-columns:104px minmax(0,1fr) 9ch;align-items:center;gap:10px;padding:2px 0}
.strip .k{font-size:11px;color:var(--dim);white-space:nowrap;letter-spacing:.02em}
.strip .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;text-align:right;white-space:nowrap;grid-column:3}
.strip .v small{font-weight:400;color:var(--dim);font-size:10px;margin-left:3px}
.strip .v .md{color:var(--model);font-weight:500;font-size:12px}
.strip .v .md::before{content:" / ";color:var(--dim)}
.strip canvas{width:100%;height:40px;display:block;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.05);border-radius:6px;grid-column:2}
.strip.pedal canvas,.strip.sym canvas{height:30px}
.strip.hot .v{color:var(--warn)}.strip.cold .v{color:var(--accent)}.strip.lift .v{color:var(--warn)}
#pw-inputs .strips,#pw-chassis .strips{gap:7px}
#pitwall .corner .strip{grid-template-columns:58px minmax(0,1fr) 8.5ch;gap:6px}
#pitwall .corner .strip .v{font-size:13px}
#pitwall .corner .strip canvas{height:30px}

/* raw channel table */
.raw-head,.raw-row{display:grid;grid-template-columns:minmax(220px,1.4fr) 10ch 9ch 9ch minmax(120px,2fr);gap:0 10px;align-items:center;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px}
.raw-head{color:var(--dim);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-bottom:1px solid var(--line)}
.raw-rows{display:flex;flex-direction:column;max-height:520px;overflow:auto}
.raw-group>summary{cursor:pointer;color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 6px 2px}
.raw-row.nr .v{color:var(--dim);font-weight:400}
.raw-row{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.03)}
.raw-row:hover{background:rgba(78,161,255,.06)}
.raw-row .k{color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.raw-row .k i{font-style:normal;color:var(--dim)}
.raw-row .v{text-align:right;font-weight:600}
.raw-row .mn,.raw-row .mx{text-align:right;color:var(--dim)}
.raw-row canvas{width:100%;height:24px;display:block}
.raw-row.changed .v{color:var(--ac)}