/* TOOLS·WEANING-STAGEBAR (1023) — the weaning stages walkthrough's step bar.
 * ═══════════════════════════════════════════════════════════════════════════════
 * EXTRACTION, never a redesign (workbench/RULES.md §8): the rules below are MOVED,
 * not rewritten, out of web/css/weaning.css (the "stages" block, lines 261–271 at
 * seed 20792485) — the chosen design is the code that ships today. REPORT-131's
 * spine row (`renderStagebar`, web/js/views/weaning.js:591) is what this file is the
 * fix for. The class stem is renamed wn-stagebar/wn-st/wn-stdot/wn-stlbl →
 * wsb/wsb-st/wsb-dot/wsb-label: check 16 gives a class prefix exactly ONE owner and
 * `wn` is 901 WEANING·STAGES's (whose css field is all of weaning.css), so these
 * rules could not move into their own file under 901's name. Same anatomy, same
 * declarations; identity is proven by the computed-style + pixel probes in
 * REPORT-238, not asserted.
 *
 * ── THE HOST TOKENS ARE CARRIED, NOT ASSUMED (D-470/D-475 self-containment) ──
 * The shipped bar resolves --card-soft / --rule / --accent / --accent-soft from the
 * LOCAL theme block on .wn-overlay (web/css/weaning.css) — the intro/stages overlay
 * declares its own pre-token-system palette (#F1E4A8 ground, #2E5C5C deep teal). A
 * card that pointed at those names bare would render unstyled the moment it mounted
 * outside that overlay (the mirror page cannot load weaning.css — check 56), so the
 * four values are declared here, on the card root, at exactly the shipped values.
 * Inside the overlay the card's own declarations win with the SAME values, so the
 * app's computed colours are unchanged — probed, not assumed (REPORT-238 §3).
 * ⚠️ THE DRIFT SURFACE THIS BUYS: if the overlay re-themes, this block must follow.
 * That is the cost of a self-contained card, and it is stated here rather than hidden.
 *
 * ── CARRIED INHERITS ──
 * font-family: the overlay's own stack (-apple-system, …), which every glyph in the
 * bar inherited in the app. line-height: nothing carried — the bar inherits the UA's
 * `normal` in the app (no rule between body and the bar sets one), and the mirror
 * page deliberately sets none either, so both sides inherit the same thing.
 *
 * ── THE VALUES THAT ARE NOT ON A TOKEN LADDER, EACH OWED TO ANDREW, NOT TAKEN ──
 * Every bypass marker below is a shipped value this extraction will not move:
 *   · 18px container bottom gap · 26px dot · 2px dot border · 6px dot→label gap ·
 *     2px label side padding · 9.5px label size · 2px connector line · the 4px halo.
 * None has an exact-equal role (--dim-26 / --space-18 / --space-6 do not exist; the
 * type ladder stops at 10px --text-micro). Snapping any of them is a DESIGN ruling
 * (the 1021 17px precedent) — flagged in REPORT-238, not taken here. The two swaps
 * that DID have exact-equal roles are taken: --text-meta (12px, the dot numeral) ·
 * --white (#ffffff, the filled dot's numeral) · --radius-round (50%, the dot).
 * ═══════════════════════════════════════════════════════════════════════════════ */

.wsb {
  /* the shipped .wn-overlay theme, carried — see the header. The hexes are the host's own,
   * verbatim; the marker is the linter's exact literal, the reason rides beside it. */
  --card-soft:#F5EFDD; --rule:#e6ddc4; --accent:#2E5C5C; --accent-soft:rgba(46,92,92,0.10); /* token-exception */ /* the host theme's own values */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; align-items:flex-start; margin-bottom:18px; /* token-exception */ /* 18px shipped — no --space-18; snapping is a design ruling owed */
}

/* align-exception: .wsb — the steps' labels wrap to unequal line counts ("Premiers goûts" is
   one line, "Presque comme à table" two), so the SHIPPED flex-start row's children diverge
   5.695px in vertical centre; measured IDENTICAL at seed 20792485 (pixel + computed probes,
   REPORT-238). Centring the row would move a shipped component's pixels — an extraction does
   not get to do that. This marker reports loudly on every run it fires. */
.wsb .wsb-st { flex:1; text-align:center; position:relative; cursor:pointer; }

.wsb .wsb-st .wsb-dot { width:26px; height:26px; border-radius:var(--radius-round); background:var(--card-soft); border:2px solid var(--rule); color: var(--ink-600); display:grid; place-items:center; font-weight:700; font-size:var(--text-meta); margin:0 auto 6px; position:relative; z-index:2; } /* token-exception */ /* 26px dot · 2px border · 6px gap — shipped, no exact tokens (--dim-26 / --space-6 do not exist) */

.wsb .wsb-st.done .wsb-dot { background: var(--accent); border-color: var(--accent); color:var(--white); }

.wsb .wsb-st.now .wsb-dot { background: var(--accent); border-color: var(--accent); color:var(--white); box-shadow: 0 0 0 4px var(--accent-soft); } /* token-exception */ /* the 4px halo — grid-legal, but the box-shadow px needs the marker */

.wsb .wsb-st .wsb-label { font-size:9.5px; line-height:1.2; color: var(--ink-600); font-weight:600; padding:0 2px; } /* token-exception */ /* 9.5px label + 2px side pad — shipped; the ladder stops at --text-micro 10px, so this is a ruling owed, not taken (the 1021 17px precedent) */

.wsb .wsb-st.now .wsb-label { color: var(--accent); font-weight:700; }

.wsb .wsb-st.done .wsb-label { color: var(--ink-600); }

.wsb .wsb-st::before { content:''; position:absolute; top:13px; left:-50%; width:100%; height:2px; background: var(--rule); z-index:1; } /* token-exception */ /* 2px connector, half the 26px dot — shipped */

.wsb .wsb-st:first-child::before { display:none; }

.wsb .wsb-st.done::before, .wsb .wsb-st.now::before { background: var(--accent); }

/* ── INTERACTIVE FLOOR (D-422) — every step is a control (onPick); the bar must give back
     on press AND on focus. :focus-visible gives keyboard users the ring without giving it to
     mouse users; :active is the same tap-feedback a button carries. The halo on .now grows
     by 1px under focus so the affordance strengthens rather than disappears. */
.wsb .wsb-st:focus { outline: none; }
.wsb .wsb-st:focus-visible .wsb-dot { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--accent); }
.wsb .wsb-st.now:focus-visible .wsb-dot { box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--accent), 0 0 0 9px var(--accent-soft); }
.wsb .wsb-st:active .wsb-dot { transform: scale(0.96); transition: transform 80ms var(--ease-standard, ease-out); }