/* Made by build.mjs from apps/web/src/app/track.css: don't edit. */
/* The track (apps/www/DESIGN.md, Layout; DESIGN.md, First run): one line of stations that fills
   as you go, the last one an open ring. The public site's home and the portal's setup draw it
   from this one file: globals.css imports it, and apps/www's build copies it under the site's
   token names (build.mjs, TOKENS), so the two can't drift. Only the portal's tokens that TOKENS
   maps may appear here; the build fails on any other.

   The margin track, in a margin beside the page:
   - `.track` holds the stations and draws the line (::before) and its fill (::after). Its holder
     sets `--flow-top` (the first dot's centre), `--flow-len` (to the last's) and `--flow-fill`
     (how far it's filled) from where the stations are, and places it: `--line-x`, the line's
     left from the track's; `--dot-x` and `--dot-y`, a dot's top left from its station's. A dot
     is 18px across (14px inside a 2px border, content-box as the site has always drawn it), the
     end ring 26px, so `--line-x` at `--dot-x` + 8px runs the line through the dots' centres.
   - `.track-station` is one station, its dot its ::before: `.passed` once reached (filled),
     `.current` where you are, and `.track-end` the last, an open ring.
   - `.track-name` inside a station names it, beside its dot: the current one's shows, in ink.
     Under `.track.pills` the current name is the ink pill (`.track-pill`, Selection F).
   - `.track-hit`, a button inside a station, covers its dot where stations open something.
   The edge track, a line along an edge where there's no margin: `.edge-track` holds `.fill`
   (`--f`, how far) then one `.s` per station (`--x`, its share of the way; `.passed` once
   reached), the last an open ring. Its dots are 8px across, border included (12px the ring).
   Each holder decides from what width each shows. Nothing moves under reduced motion. */

.track { position: relative; }
.track::before, .track::after { content: ""; position: absolute; left: var(--line-x, -30px); width: 2px; top: var(--flow-top, 0px); border-radius: 2px; }
.track::before { height: var(--flow-len, 0px); background: var(--track); }
.track::after { height: var(--flow-fill, 0px); background: var(--ink); }

.track-station { position: relative; }
.track-station::before { content: ""; box-sizing: content-box; position: absolute; z-index: 1; left: var(--dot-x, -36px); top: var(--dot-y, 10px); width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--track); }
.track-station.passed::before { background: var(--ink); border-color: var(--ink); }
.track-station.track-end::before { left: calc(var(--dot-x, -36px) - 3px); top: calc(var(--dot-y, 10px) - 4px); width: 20px; height: 20px; border-width: 3px; background: var(--surface); }
.track-station.track-end.passed::before { border-color: var(--ink); }

.track-name { position: absolute; right: calc(100% - var(--dot-x, -36px) + 6px); top: calc(var(--dot-y, 10px) - 2px); width: 76px; text-align: right; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--muted); opacity: 0; }
.track-station.current > .track-name { opacity: 1; color: var(--ink); }
.track.pills .track-name { right: calc(100% - var(--dot-x, -36px) + 10px); top: calc(var(--dot-y, 10px) - 2px); width: max-content; max-width: 168px; }
.track.pills .track-station.current > .track-name, .track-pill { padding: 3px 10px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font-size: 12px; font-weight: 600; line-height: 1.3; }

.track-hit { position: absolute; z-index: 2; left: calc(var(--dot-x, -36px) - 3px); top: calc(var(--dot-y, 10px) - 3px); width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.track-hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }

.edge-track { position: relative; height: 2px; background: var(--track); pointer-events: none; }
.edge-track .fill { position: absolute; left: 0; top: 0; height: 2px; width: var(--f, 0%); background: var(--ink); }
.edge-track .s { box-sizing: border-box; position: absolute; top: 1px; left: calc(8px + (100% - 16px) * var(--x, 0)); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--surface); border: 2px solid var(--track); }
.edge-track .s.passed { background: var(--ink); border-color: var(--ink); }
.edge-track .s:last-child { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2.5px; }
.edge-track .s:last-child.passed { background: var(--surface); border-color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .track::after { transition: height .25s linear; }
  .track-station::before { transition: background .3s, border-color .3s; }
  .track-name { transition: opacity .3s; }
  .edge-track .fill { transition: width .25s linear; }
  .edge-track .s { transition: background .3s, border-color .3s; }
}