/* ============================================================================
   /humanoid-race, Clearer draft: the tracker counts itself. Rules of the
   expression layer apply (expression.css). Driven by /js/ex-race.js. Added
   2026-10-05 at the founder's request to carry the /manufacturing style.
   The markup is generated by scripts/humanoid-race/build_race.py.

   WHAT MOVES AND WHY
   - The ladder: each rung shows how many models in the table sit on it, as a
     number and a row of squares drawn from the same count, counted rung by
     rung on first view. In step: number and squares move together.
   - The As-of date lands once on load, like a stamp: the board is a dated
     snapshot, and the date is the first thing to trust or doubt.
   - Each company card's availability gets a five-rung track with a marker on
     the maker's rung, landing once. It never climbs: the ladder is ordinal.
   - The robot rows cascade once on first view; rows off screen take their
     final state at once. Sorting and filtering are untouched.
   Nothing here counts up or rewrites a price, a customer or a unit figure:
   those are text with their own bases, not numbers to animate.

   SCOPE. Rules on shared markup are scoped html:not([data-variant="current"]).
   ============================================================================ */

/* ---- The ladder: tallies and squares (Clearer-only markup) */
.ed .ex-rung__tally { margin: .6rem 0 .35rem; font-family: var(--font-mono); font-size: var(--ed-small, 13px); color: var(--ed-quiet); }
.ed .ex-rung__n { color: var(--ed-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.ed .ex-rung__grid { display: flex; flex-wrap: wrap; gap: 3px; min-height: 8px; }
.ed .ex-rung__grid i { width: 8px; height: 8px; background: var(--ed-accent); }
.ed .ex-rung__out { margin-top: var(--space-4); }
html:not([data-variant="current"]) .ed .ex-rungs-armed .ex-rung__grid i:not(.is-on) { background: transparent; box-shadow: inset 0 0 0 1px var(--ed-rule-strong); }
html:not([data-variant="current"]) .ed .race-legend .block.is-counting { border-color: var(--ed-accent); }
html:not([data-variant="current"]) .ed .race-legend .block { transition: border-color var(--ex-quick, 240ms) var(--ex-ease); }

/* ---- The As-of stamp: the delay is not cut by editorial.css section 16 */
@media (prefers-reduced-motion: reduce) { .ed .tool-note .ex-anim-stamp { animation-delay: 0s; } }

/* ---- Company cards: a five-rung track and the maker's marker */
html:not([data-variant="current"]) .ed .company-card[data-stage="0"] { --ex-st: 0; }
html:not([data-variant="current"]) .ed .company-card[data-stage="1"] { --ex-st: 1; }
html:not([data-variant="current"]) .ed .company-card[data-stage="2"] { --ex-st: 2; }
html:not([data-variant="current"]) .ed .company-card[data-stage="3"] { --ex-st: 3; }
html:not([data-variant="current"]) .ed .company-card[data-stage="4"] { --ex-st: 4; }
html:not([data-variant="current"]) .ed .company-card .cc-kpi:has(.avail-pill) { position: relative; padding-bottom: 14px; }
html:not([data-variant="current"]) .ed .company-card .cc-kpi:has(.avail-pill)::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 7.5rem; height: 4px;
  background: repeating-linear-gradient(90deg, var(--ed-rule-strong) 0 calc(1.5rem - 2px), transparent calc(1.5rem - 2px) 1.5rem);
}
html:not([data-variant="current"]) .ed .company-card .cc-kpi:has(.avail-pill)::after {
  content: ""; position: absolute; bottom: 0; width: calc(1.5rem - 2px); height: 4px;
  left: calc(var(--ex-st, 0) * 1.5rem); background: var(--ed-accent);
}
html:not([data-variant="current"]) .ed .ex-marks-armed .company-card:not(.ex-in) .cc-kpi:has(.avail-pill)::after { opacity: 0; transform: scaleX(2.2); }
html:not([data-variant="current"]) .ed .ex-marks-armed .company-card.ex-in .cc-kpi:has(.avail-pill)::after { opacity: 1; transform: none; transition: opacity var(--ex-quick, 240ms) var(--ex-ease), transform var(--ex-base, 520ms) var(--ex-ease-out); }

/* ---- Robot rows: one cascade on first view. translate, not transform. */
html:not([data-variant="current"]) .ed .ex-rows-armed #robot-tbody tr { opacity: 0; translate: -12px 0; }
html:not([data-variant="current"]) .ed .ex-rows-armed #robot-tbody tr.ex-in { opacity: 1; translate: 0 0; transition: opacity var(--ex-base, 520ms) var(--ex-ease-out), translate var(--ex-base, 520ms) var(--ex-ease-out); transition-delay: calc(var(--ex-i, 0) * var(--ex-stagger, 40ms)); }
html:not([data-variant="current"]) .ed .ex-rows-armed #robot-tbody tr.ex-now { opacity: 1; translate: 0 0; transition: none; }