/* SHARED·PROGRESSBAR (1151) · status: todo — the step progress bar (the segment strip that
 * fills as onboarding steps complete). Single consumer today: views/onboarding.js renders
 * the bar at line 167 and the segments at line 168 with `i <= step ? ' on'`. The Progress
 * screen does NOT use this rule — it carries its own segment UI.
 *
 * ─── STATUS KEPT AS `todo` ───
 * This card is REGISTERED, not carded (1003 convention). card-mirror check 16 does NOT iterate
 * `todo` rows; the row exists so the eventual card builder knows the owner is here.
 * Never through a design pass; never declared the blessed source for any other card.
 *
 * ─── SELF-CONTAINMENT ───
 * Every element this card renders gets its style explicitly under the .progress-bar root,
 * with zero reliance on page or user-agent defaults. Tokens are role tokens (var(--rule),
 * var(--accent)) — no raw hex, no hardcoded px outside the one declared off-grid value.
 *
 * ─── TOKEN-EXCEPTION MARKERS ───
 * 1 grid: `.progress-bar .seg` declares `border-radius: 2px;` — off the 4px grid (D-511).
 * Bypass per scripts/git-hooks/checks/_grid-snap.js:117 — the marker must read
 * `token-exception` exactly, no suffix. The shipped design's own number, kept verbatim
 * from app.css.
 *
 * ─── BOUNDARY — NOT THIS ROW ───
 * `.progress-tabs` (+ scrollbar rule) was historically DECLARED in app.css but emitted by
 * NOTHING on master — the 50-.md refusal shape (declared CSS, no renderer, cannot be carded).
 * Re-verified 2026-09-25 against `git rev-parse origin/master = dfbb2fd2`: the rule does
 * not exist in app.css anywhere (no `.progress-tabs` selector at all on master today).
 * Out of scope here — surface as a follow-up DELETE candidate in REPORT-585, separate brief.
 *
 * ─── REVERSE-PORT ───
 * If this card ever moves status to `draft`, this file MUST be linked from web/index.html
 * (see line N of the index — between existing SHARED card CSS links) and the 3 app.css
 * rules MUST stay deleted (not restored, not commented out). The card-mirror single-source
 * rule (check 16) is the reason: declaring CSS in two places is the original drift shape.
 */

.progress-bar {
  display: flex;
  gap: 4px;
  margin: 12px 0 20px;
}
.progress-bar .seg {
  flex: 1;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;                          /* token-exception */
  transition: background 0.2s ease;
}
.progress-bar .seg.on {
  background: var(--accent);
}