/* HANDLING LAB panel (src/ui/lab-panel.js). Tokens from ui.css. */
#lab-panel {
  position: fixed; z-index: 30; left: var(--s4); top: calc(50% - 40px); transform: translateY(-50%);
  width: 300px; padding: var(--s3) var(--s4) var(--s3);
  display: grid; gap: var(--s2);
  background: var(--panel); border-radius: var(--r3); box-shadow: var(--edge), var(--hi), var(--lift);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 600 12px/1.35 var(--sans); color: var(--ink-2);
}
#lab-panel.hidden { display: none; }
body[data-state="paused"] #lab-panel { opacity: 0.35; pointer-events: none; }
#lab-panel kbd { font-size: 10px; }
.lp-head { display: flex; justify-content: space-between; align-items: baseline; }
.lp-head b { font: 800 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--accent); }
.lp-count { font: 700 11px/1 var(--mono); color: var(--dim); }
.lp-preset { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: var(--s1); }
.lp-nav { height: 32px; border: 0; border-radius: var(--r1); background: var(--panel-up); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: var(--edge); }
.lp-nav:hover { background: rgba(255, 255, 255, 0.1); }
.lp-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lp-name { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.lp-name h2 { margin: 0; font: 400 24px/1 var(--display); letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lp-key { min-width: 0; }
.lp-picked { font: 800 9px/1 var(--mono); letter-spacing: 0.12em; color: #1a1205; background: var(--gold); padding: 3px 6px; border-radius: 3px; font-style: normal; }
.lp-picked[hidden] { display: none; }
.lp-desc { margin: 0; min-height: 2.7em; color: var(--ink-2); text-align: center; text-wrap: balance; }
.lp-nums { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r1); overflow: hidden; }
.lp-nums > div { background: var(--panel-solid); padding: 5px 6px; display: grid; gap: 2px; }
.lp-nums dt { font: 700 8.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--dim); white-space: nowrap; }
.lp-nums dd { margin: 0; font: 800 12px/1.1 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-live { display: flex; justify-content: space-between; font: 700 10px/1 var(--mono); color: var(--dim); letter-spacing: 0.04em; padding: 2px 1px; }
.lp-live b { color: var(--cyan); font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-car { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--s1); }
.lp-car select { height: 30px; min-width: 0; border: 0; border-radius: var(--r1); padding: 0 var(--s2); background: var(--panel-up); color: var(--ink); box-shadow: var(--edge); font: 700 12px/1 var(--sans); letter-spacing: 0.03em; }
.lp-car select option { background: var(--panel-solid); }
.lp-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s1); }
.lp-actions .btn { --h: 38px; --fs: 13px; padding: 0 var(--s2); justify-content: space-between; }
.lp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s2); font: 600 10px/1.4 var(--sans); color: var(--dim); }
.lp-foot kbd { font-size: 9px; padding: 1px 4px; min-width: 0; height: auto; }
body:not([data-pad]) .lp-pad { display: none; }
body.touch #lab-panel kbd { display: none; }
/* The lab hides the run's economy: no fuel, body, score, stars or par to read. */
body.lab #hud :is(.hud-tr, .purse, .fuel, .glovebox, .rail, .combo) { visibility: hidden; }
body.lab :is(.coach, .coach-ring, #rule-chips) { display: none !important; }

@media (max-width: 720px) {
  #lab-panel { left: var(--s3); right: var(--s3); width: auto; top: auto; bottom: calc(var(--safe-b) + 196px); transform: none; padding: var(--s2) var(--s3); gap: 6px; }
  .lp-desc, .lp-foot, .lp-car { display: none; }
  .lp-nums { grid-template-columns: repeat(4, 1fr); }
  .lp-nums > div:nth-child(n + 5) { display: none; }
  .lp-name h2 { font-size: 20px; }
}