/* Lap replay page (web/car/lap_page.js). Setup 1 / setup 2 colours validated (dataviz validator) on both themes:
   dark #ea580c / #0ea5c6, light #c2410c / #0891b2. Setup 2 = cyan, the colour of the 3D ghost. */
:root { --s1: #ea580c; --s2: #0ea5c6; --meas: #a0a0b0; }
.light-theme { --s1: #c2410c; --s2: #0891b2; --meas: #686874; }
/* lap segments (straight / entry / mid-corner / exit): gray, rose (slowing), violet (mid), green (driving off) */
:root { --seg0: #7c8190; --seg1: #e0516a; --seg2: #9b6cf2; --seg3: #2fb67a; }
.light-theme { --seg0: #9aa0ad; --seg1: #c8324f; --seg2: #7c4ddb; --seg3: #18915c; }

.lap-page { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; }
.lap-page > .page-header { order: -3; }
.lap-page.has-res > #lp_view { order: -2; margin-bottom: 12px; }   /* results first; the lap + setup cards move below */
.lap-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lap-card { margin-bottom: 12px; }
.lap-card .card-header-static { gap: 8px; flex-wrap: wrap; }
.lap-card .card-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lap-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.lap-sum { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.lap-road { font-size: 13px; color: var(--text-secondary); margin: 8px 0; line-height: 1.6; }
.pill { display: inline-block; font: 600 11px var(--font-body); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-accent); color: var(--text-secondary); margin-right: 4px; }
.pill.ok { border-color: var(--success); color: var(--success); }
.pill.warn { border-color: var(--warning); color: var(--warning-text); }
.lap-exp { margin: 6px 0; font-size: 12px; }
.lap-exp summary { cursor: pointer; color: var(--text-muted); font-weight: 600; padding: 4px 0; }
.lap-exp[open] { border-left: 3px solid var(--warning); padding-left: 10px; }
.lap-prog { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; font-size: 12px; color: var(--text-secondary); }
.lap-prog .bar { flex: 1 1 200px; height: 8px; border-radius: 4px; background: var(--bg-input); overflow: hidden; }
.lap-prog .bar i { display: block; height: 100%; width: 0; background: var(--accent-primary); transition: width .25s; }
.lap-map-t select.form-input { min-width: 150px; max-width: 260px; padding: 5px 8px; }
.lap-map-t .lap-num { width: 90px; padding: 5px 8px; }
.lap-map-t td { vertical-align: middle; }
.lap-map-t td:last-child { text-align: left; font-family: var(--font-body); }
.lap-map-t .req { color: var(--accent-primary); }
.lap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.lap-page .chip { background: var(--bg-tertiary); border: 1px solid var(--border-primary); color: var(--text-primary); }
.lap-page .chip.green { border-color: color-mix(in srgb, var(--success) 70%, transparent); }
.lap-page .chip.on { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
.lap-page .chip.on .muted { color: rgba(255,255,255,.8); }
.lap-opts { margin: 6px 0; }
.lap-setups { display: flex; flex-wrap: wrap; gap: 16px; }
.lap-s { display: flex; gap: 10px; flex: 1 1 260px; align-items: flex-start; }
.lap-s select { max-width: 100%; width: 100%; margin: 4px 0; }
.lap-s > span.sw { flex: 0 0 auto; margin-top: 4px; }
.sw { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.sw.s1 { background: var(--s1); }
.sw.s2 { background: repeating-linear-gradient(90deg, var(--s2) 0 5px, transparent 5px 8px); }
.lap-page .callout { margin: 8px 0; font-size: 12px; }
.lap-restored { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; font-size: 12px; color: var(--text-muted); }

/* viewer: 3D + transport + readouts on the left (sticky on wide screens), plots + stats on the right */
.lap-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* .main-content is overflow:auto but never scrolls (the document does), which made it the sticky container: the left
   column scrolled away. clip (not a scroll container) keeps the sideways clipping and lets sticky follow the window. */
.main-content:has(> .lap-page) { overflow: visible; overflow-x: clip; }
@media (min-width: 1100px) {
  .lap-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .lap-left { position: sticky; top: 64px; max-height: calc(100vh - 72px); overflow: auto; }   /* below the 56 px sticky header */
}
.lap-3d { position: relative; height: 46vh; min-height: 260px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-primary);
  background: radial-gradient(120% 90% at 50% 35%, #34343f 0%, #1d1d24 55%, #121218 100%); }
.light-theme .lap-3d { background: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #e6e6ec 60%, #cfcfd8 100%); }
@media (min-width: 1100px) { .lap-3d { height: 50vh; } }
.lap-trackmap { position: absolute; left: 8px; top: 8px; background: rgba(18,18,24,.62); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 2px; pointer-events: none; }
.light-theme .lap-trackmap { background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.12); }
.lap-trackmap svg { display: block; }
.tm-warm { fill: none; stroke: var(--meas); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: .7; }
.tm-lap { fill: none; stroke: var(--text-secondary); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.tm-start { fill: var(--success); }
.tm-car { fill: var(--accent-primary); stroke: var(--bg-primary); stroke-width: 2; }
.lap-key { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; font: 600 11px var(--font-body); color: #fff;
  background: rgba(18,18,24,.62); border-radius: 8px; padding: 6px 9px; max-width: 46%; pointer-events: none; }
.light-theme .lap-key { background: rgba(255,255,255,.8); color: var(--text-primary); }
.lap-key span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lap-flag { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(239,68,68,.85); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 6px; }
.lap-flag[hidden] { display: none; }
.lap-load { color: var(--text-secondary); font-size: 12px; }
.lap-flegend { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 3px; font: 600 11px var(--font-body); color: #fff;
  background: rgba(18,18,24,.68); border-radius: 8px; padding: 6px 9px; pointer-events: none; max-width: calc(100% - 16px); }
.light-theme .lap-flegend { background: rgba(255,255,255,.85); color: var(--text-primary); }
.lap-flegend[hidden] { display: none; }
.lap-flegend .fl-h { display: flex; gap: 10px; flex-wrap: wrap; }
.lap-flegend .fl-r { font: 500 11px var(--font-mono); opacity: .9; }
.lap-flegend span { display: inline-flex; align-items: center; gap: 5px; }
.lap-flegend i { display: inline-block; width: 12px; height: 5px; border-radius: 2px; }
.lap-flegend i.fa { background: #ffd23f; width: 5px; height: 12px; }
.lap-flegend i.ft { background: #38bdf8; } .lap-flegend i.fc { background: #f43f5e; }
.lap-flag:not([hidden]) ~ .lap-flegend { bottom: 44px; }

.lap-transport { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.lap-transport input[type=range] { flex: 1 1 160px; min-width: 120px; accent-color: var(--accent-primary); height: 28px; }
.lap-play { min-width: 48px; font-size: 14px; }
.lap-time { font: 600 13px var(--font-mono); min-width: 120px; color: var(--text-primary); }
.lap-t2 { gap: 6px; }
.lap-page .seg { background: var(--bg-tertiary); border-color: var(--border-primary); backdrop-filter: none; }
.lap-page .seg button { color: var(--text-secondary); padding: 7px 10px; }
.lap-page .seg button:hover { color: var(--text-primary); background: var(--bg-hover); }
.lap-page .seg button.on { color: #fff; background: var(--accent-primary); }
/* phone: play bar fixed to the bottom while the plots scroll (shown by an IntersectionObserver) */
.lap-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
  border-top: 1px solid var(--border-primary); box-shadow: 0 -6px 18px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.lap-sticky[hidden] { display: none; }
.lap-sticky input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent-primary); height: 32px; }
.lap-sticky .lap-time { min-width: 0; font-size: 12px; white-space: nowrap; }
.lap-page.sticky-on { padding-bottom: 64px; }
.lap-inputs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 2px; font: 12px var(--font-mono); color: var(--text-secondary); }
.lap-inputs b { color: var(--text-primary); }
.lap-left .lap-card { margin-top: 8px; }
.lp-rt th.s1, .lp-st .s1 { color: var(--s1); } .lp-rt th.s2 { color: var(--s2); }
.lp-rt td:not(.label), .lp-rt th { text-align: right; }
.lap-hbtns { display: flex; gap: 6px; }
.lap-page .btn.on { border-color: var(--s2); color: var(--s2); }
.lap-note { margin-top: 0 !important; }

/* plots */
.lp-plot { margin-bottom: 6px; }
.lp-ph { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--text-primary); flex-wrap: wrap; }
.lp-ph b { font-weight: 600; }
.lp-pv { margin-left: auto; font: 600 12px var(--font-mono); color: var(--text-secondary); }
.lp-x { background: none; border: 0; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.lp-x:hover { color: var(--danger); }
.lp-svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; user-select: none; }
.lp-warm { fill: var(--text-muted); opacity: .08; }
.lp-grid { stroke: var(--border-primary); stroke-width: 1; opacity: .6; }
.lp-zero { stroke: var(--text-muted); stroke-width: 1; }
.lp-ax { fill: var(--text-muted); font: 10px var(--font-mono); }
.lp-s { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lp-s.s1 { stroke: var(--s1); }
.lp-s.s2 { stroke: var(--s2); stroke-dasharray: 6 4; }
.lp-s.meas { stroke: var(--meas); stroke-width: 1.5; stroke-dasharray: 1.5 3; }
.lp-s.d { stroke: var(--text-secondary); stroke-width: 1.5; }
.lp-fail { stroke: var(--danger); stroke-width: 2; }
.lp-cur { stroke: var(--text-primary); stroke-width: 1; opacity: .75; }
.lp-dh { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lp-xl { text-align: center; margin-top: 2px; }
.lp-pick { border: 1px solid var(--border-primary); border-radius: 8px; padding: 10px; margin-bottom: 12px; background: var(--bg-secondary); }
.lp-pick input[type=search] { width: 100%; max-width: none; margin-bottom: 8px; }
.lp-groups { max-height: 46vh; overflow: auto; }
.lp-groups details { border-bottom: 1px solid var(--border-primary); padding: 4px 0; }
.lp-groups summary { cursor: pointer; font: 600 12px var(--font-cond); text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); padding: 6px 2px; }
.lp-chs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 2px 12px; padding: 2px 4px 8px; }
.lp-ch { font-size: 12px; color: var(--text-primary); display: flex; gap: 6px; align-items: center; padding: 4px 0; cursor: pointer; }
.lp-ch input { accent-color: var(--accent-primary); width: 16px; height: 16px; }

/* segments: band under the plots, chips, track map */
.lp-band { margin-top: 2px; }
.lp-band rect.sg { opacity: .9; }
.lp-band text { font: 600 10px var(--font-body); fill: #fff; pointer-events: none; }
.lp-band text.lp-ax { fill: var(--text-muted); font: 10px var(--font-mono); }
.sg0 { fill: var(--seg0); } .sg1 { fill: var(--seg1); } .sg2 { fill: var(--seg2); } .sg3 { fill: var(--seg3); }
.lp-dim { fill: var(--bg-primary); opacity: .55; pointer-events: none; }
.lp-band rect.lp-off { fill: var(--bg-primary); opacity: .6; }
.lap-segbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 12px; color: var(--text-secondary); }
.lap-segbar .lbl { font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.lap-segbar .chip { display: inline-flex; align-items: center; gap: 6px; }
.lap-segbar .chip i, .lap-segnow i, .lp-why i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lap-segbar details { flex: 1 1 100%; }
.lap-segbar summary { cursor: pointer; color: var(--text-muted); font-size: 11px; }
.lap-segbar details p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.i0 { background: var(--seg0); } .i1 { background: var(--seg1); } .i2 { background: var(--seg2); } .i3 { background: var(--seg3); }
.lap-page .seg[hidden] { display: none; }
.lap-segnow { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--font-body); color: var(--text-secondary); }
.tm-seg { fill: none; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.tm-seg.sg0 { stroke: var(--seg0); fill: none; } .tm-seg.sg1 { stroke: var(--seg1); fill: none; } .tm-seg.sg2 { stroke: var(--seg2); fill: none; } .tm-seg.sg3 { stroke: var(--seg3); fill: none; }
.tm-seg.off { opacity: .4; stroke-width: 2.2; }

/* what changed */
.lp-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-why button { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 7px 6px;
  font: 13px/1.45 var(--font-body); color: var(--text-primary); cursor: pointer; }
.lp-why button:hover, .lp-why button:focus-visible { background: var(--bg-hover); }
.lp-why i { flex: 0 0 auto; transform: translateY(1px); }
.lp-why i.all { background: linear-gradient(90deg, var(--seg0) 0 25%, var(--seg1) 25% 50%, var(--seg2) 50% 75%, var(--seg3) 75%); }
.lp-why b { font-weight: 600; }

/* sweep one change */
.lap-swd > summary { list-style: none; cursor: pointer; }
.lap-swd > summary::-webkit-details-marker { display: none; }
.lap-swd > summary .card-title::before { content: '▸ '; color: var(--text-muted); }
.lap-swd[open] > summary .card-title::before { content: '▾ '; }
.lap-swf { margin: 4px 0; }
.lap-swch { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; margin: 4px 0 6px; }
.lap-swch .form-label { margin: 0 4px 0 0; }
.sw-head { font-size: 13px; margin: 10px 0 4px; }
.sw-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.sw-key span { display: inline-flex; align-items: center; gap: 5px; }
.sw-key i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.sw-key i.all { background: var(--text-primary); } .sw-key i.now { background: none; border-top: 1px dashed var(--text-muted); height: 0; }
.sw-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 6px 16px; }
.sw-chart svg { display: block; width: 100%; height: auto; }
.sw-all { fill: none; stroke: var(--text-primary); stroke-width: 2; } circle.sw-all { fill: var(--text-primary); }
polyline.sw-seg { fill: none; stroke-width: 1.8; } polyline.sw-seg.sg0 { stroke: var(--seg0); } polyline.sw-seg.sg1 { stroke: var(--seg1); } polyline.sw-seg.sg2 { stroke: var(--seg2); } polyline.sw-seg.sg3 { stroke: var(--seg3); }
.sw-now { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.sw-segs { margin-top: 10px; }
.sw-t tr.sw-base td { background: var(--bg-tertiary); font-weight: 600; }
.sw-t td.label { white-space: nowrap; }

/* lap-to-lap compare: mode switch, lap B picker, align switch, segment times, lap B lines */
.lap-cmp { flex: 0 0 auto; }
.lap-b { min-width: 0; flex: 1 1 auto; }
.lap-b .lap-chips { margin: 4px 0; }
.lap-b .lap-btns { margin: 6px 0 2px; }
.note.warn-t { color: var(--warning-text); }
.lap-align { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lap-align .form-label { margin: 0; }
.lap-page .seg button:disabled { opacity: .45; cursor: not-allowed; }
.lp-segt td.label i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.lp-segt td.slower { color: var(--danger); } .lp-segt td.faster { color: var(--success); }
.lp-segt { margin-bottom: 4px; }
.lp-segt tr.lp-tot td { background: var(--bg-tertiary); font-weight: 600; }
.lap-gap { font: 600 12px var(--font-mono); padding: 1px 6px; border-radius: 6px; background: var(--bg-tertiary); }
.lap-gap.slower { color: var(--danger); } .lap-gap.faster { color: var(--success); }
.lap-sticky .lap-time { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .lap-sticky .lap-segnow { font-size: 0; gap: 0; } .lap-sticky .lap-gap { font-size: 11px; padding: 1px 4px; } }
.lp-s.meas2 { stroke: var(--s2); stroke-width: 1.3; stroke-dasharray: 1.5 3; opacity: .8; }
.lp-s.gap { stroke: var(--text-primary); stroke-width: 1.8; }
.tm-b { fill: none; stroke: var(--s2); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .9; }
.tm-car2 { fill: var(--s2); stroke: var(--bg-primary); stroke-width: 1.5; }

/* report button + overlay (the report itself is a standalone page in an iframe: web/car/lap_report.js) */
.lap-rtop { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.lap-rtop .lap-note { flex: 1 1 auto; margin: 0 !important; }
.lap-rtop #lp_report { flex: 0 0 auto; }
.lap-rep { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: rgba(10,10,14,.72); }
.lap-rep-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-primary); color: var(--text-primary); }
.lap-rep-bar > span { flex: 1 1 auto; }
.lap-rep-f { flex: 1 1 auto; width: min(900px, 100%); margin: 0 auto; border: 0; background: #fff; }
html.lap-rep-open, html.lap-rep-open body { overflow: hidden; }
@media (max-width: 600px) { .lap-rep-bar > span { display: none; } .lap-rep-bar { padding-left: 10px; padding-right: 10px; } .lap-rtop { flex-wrap: wrap; } }

/* stats */
.lp-st td:not(.label), .lp-st th:not(:first-child) { text-align: right; }
.lp-st tr.lp-sh td { background: var(--bg-tertiary); font-family: var(--font-body); padding-top: 7px; text-align: left; }
.lp-st tr.lp-diff td { color: var(--text-primary); font-weight: 600; }
.lp-st td.label { white-space: nowrap; }

@media (max-width: 600px) {
  /* mapping: one block per input (label, then column / scale / flip on one line) */
  .lap-map-t thead { display: none; }
  .lap-map-t tr { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; gap: 4px 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-primary); }
  .lap-map-t td { border: 0 !important; padding: 0 !important; }
  .lap-map-t td.label { grid-column: 1 / -1; }
  .lap-map-t td:last-child { grid-column: 1 / -1; }
  .lap-map-t td:last-child:empty { display: none; }
  .lap-map-t select.form-input { min-width: 0; max-width: none; width: 100%; }
  .lap-map-t .lap-num { width: 100%; }
  .lap-map-t td:nth-child(4)::before { content: 'flip '; font-size: 11px; color: var(--text-muted); }
  .lap-3d { height: 42vh; min-height: 230px; }
  .lap-time { min-width: 0; }
  .lap-t2 .seg button { padding: 7px 8px; font-size: 11px; }
  .lap-map-t select.form-input { min-width: 120px; }
  .lap-key { font-size: 10px; }
}