/* Service Scope: the lap bar as a route (group A restyle, 2026-10-14). Used by the Board (service-tracking.html, "Laps right now") and
   the Dashboard (service-dashboard.html, "Average lap"); the markup is TrackerShell.lapBarHtml's, unchanged:
     <div class="lap-bar"><div class="lap-seg [stopped] [narrow]" style="--w:n"><span class="n">Phase</span><span class="m">time, cars</span></div>…</div>

   The bold element of the Board: the shop's day drawn like the Service Scope mark, a line through stations. Each phase is a stretch of
   track as long as its average time, starting at a station; the phase's name and time sit above its stretch in ink (not white on a
   block). A phase that stops the shop's clock (waiting on parts or the customer) is a hatched amber stretch that starts at a
   rounded-square station, the same shapes as every car's rail. The line ends in a filled Petrol station.

      Checked In   Dispatch      Inspection           Waiting for Parts               Repair
      0:10, 4 cars …             0:40, 2 cars         2 h 20 min, 1 car               48 min, 2 cars
      ●━━━━━━━━━━━●━━━━━━━━━━━━━●━━━━━━━━━━━━━━━━━━━━■▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨●━━━━━━━━━━━━━━━━━━━━━━━━━━━●

   (servicescope.css section 6 draws the earlier blocks; these rules are one class stronger where needed and come after it.) */

.lap .lap-bar{position:relative;height:auto;min-height:56px;gap:0;align-items:stretch;padding-right:7px}
.lap .lap-seg,.lap .lap-seg:nth-child(even){background:none;color:var(--ink);border-radius:0;overflow:visible;
  justify-content:flex-start;gap:1px;padding:0 10px 22px 2px;min-width:12px}
/* the stretch of track */
.lap .lap-seg::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:8px;background:var(--lap-a)}
.lap .lap-seg:nth-child(even)::before{background:var(--lap-b)}
.lap .lap-seg:first-child::before{border-radius:4px 0 0 4px}
.lap .lap-seg:last-child::before{border-radius:0 4px 4px 0}
.lap .lap-seg.stopped::before{background:repeating-linear-gradient(135deg,var(--safety) 0 4px,color-mix(in srgb,var(--safety) 35%,var(--panel)) 4px 8px)}
/* the station the stretch starts at (a rounded square where the shop's clock stops) */
.lap .lap-seg::after,.lap .lap-seg.stopped::after{content:"";position:absolute;left:-1px;right:auto;bottom:3px;width:14px;height:14px;margin:0;
  border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 3px var(--rail-done);z-index:1}
.lap .lap-seg:first-child::after{left:0}
.lap .lap-seg.stopped::after{border-radius:4px;box-shadow:inset 0 0 0 3px var(--safety-ink)}
/* the end of the line */
.lap .lap-bar::after{content:"";position:absolute;right:0;bottom:3px;width:14px;height:14px;border-radius:50%;background:var(--rail-done)}
/* the words above the stretch: the phase in the display face, its time in text */
.lap .lap-seg .n,.lap .lap-seg .m{display:block;padding-left:0;color:inherit}
.lap .lap-seg .n{font:700 13.5px/1.2 var(--sf-font-display)}
.lap .lap-seg .m{font:500 12.5px/1.25 var(--sf-font-text);color:var(--muted)}
.lap .lap-seg.narrow .n,.lap .lap-seg.narrow .m{display:none}
.lap .lap-empty{height:auto;min-height:48px;border-radius:var(--sf-r-panel);background:transparent}
.lap .lap-head h2,.lap .lap-head h3{font:700 20px/1.15 var(--sf-font-display)}
/* the key under the bar (always shown on the Dashboard and on a phone): each entry led by a small station */
.lap .lap-key li{display:inline-flex;align-items:baseline;gap:5px}
.lap .lap-key b{font:700 13px var(--sf-font-display);color:var(--ink)}

@media (min-width:1800px){
  .lap .lap-bar{min-height:64px}
  .lap .lap-seg{padding-bottom:26px}
  .lap .lap-seg::before{height:10px}
  .lap .lap-seg::after,.lap .lap-bar::after{width:16px;height:16px}
  .lap .lap-seg .n{font-size:16px}
  .lap .lap-seg .m{font-size:14.5px}
  .lap .lap-head h2{font-size:24px}
}
/* a phone: the words go (the key under the bar says them), the line stays */
@media (max-width:640px){
  .lap .lap-bar{min-height:22px}
  .lap .lap-seg{padding-bottom:20px;min-width:10px}
  .lap .lap-seg .n,.lap .lap-seg .m{display:none}
}