/* The Rebalance -- the stage, session 48 (beats).

   Every rule here is scoped to `.card.rebalance` (rule 14) and every class
   is prefixed `rb-` (pipeline/selftest/renderer.mjs's FORM_SECTIONS). What
   this file borrows and only positions: `.xg-*` (css/crossing.css -- the
   crossing field and the timeline, shared with The Index Change), `.rp-tp-*`
   (the transport, css/replay.css), `.hooktick` (shell.css).

   ONE INDEX AT A TIME. The beats are stacked in one grid cell; only the live
   one is visible, and it fades in over its own first tenth on the same
   `--xg-p` the crossing moves on, so a seek paints the frame a real tick
   would. The stage reserves the tallest beat's height (`--rb-max-rows-h`,
   written by the JS) so the timeline under it does not jump between beats.

   No `--up`/`--down` anywhere: membership is chrome, not direction.

   TYPE IS DESIGN PX, VIA TOKENS (rule 8, amended session 34). */

/* width:100%: `.stage` is a centring flex ROW (shell.css), so a child with
   only absolutely positioned content measures 185px of 399 without it. */
/* padding-bottom:40px is the skip button's reserve (30px button, 4px past
   the edge, 6px clear), since the button is absolute and takes no space. */
.card.rebalance .rb{position:relative;display:flex;flex-direction:column;height:100%;min-height:0;
  width:100%;padding:0 2px 36px;--rb-max-rows-h:13}

.card.rebalance .rb-empty{color:var(--muted);font-size:var(--fs-13)}

/* The beat dots, level with the transport row: the live one in ink, the
   done ones muted, the rest edge. */
.card.rebalance .rb-dots{display:flex;gap:6px;align-items:center;height:0;margin-top:-16px;position:relative;z-index:2}
.card.rebalance .rb-dot{width:6px;height:6px;border-radius:50%;background:var(--edge)}
.card.rebalance .rb-dot--done{background:var(--muted)}
.card.rebalance .rb-dot--live{background:var(--ink)}

/* One cell, every beat in it; the tallest beat's field sets the cell's
   height (30px heads + rows + 34px state word, css/crossing.css's own sum)
   and the cell takes the stage's slack, so the timeline stays put between
   beats. A shorter beat is CENTRED in the cell: the slack splits above and
   below it rather than pooling underneath ("we now have a big grey space",
   the reviewer, on the sibling). */
.card.rebalance .rb-beats{display:grid;flex:1 1 auto;margin-top:12px;align-items:center;
  min-height:calc(30px + var(--rb-max-rows-h) * 1px + 34px)}
.card.rebalance .rb-beat{grid-area:1/1;visibility:hidden}
.card.rebalance .rb-beat--live{visibility:visible}
/* The live beat fades in over its first tenth, on the crossing's own clock. */
.card.rebalance .rb-beat--live .xg-field{opacity:clamp(0, var(--xg-p) * 10, 1)}

.card.rebalance .rb-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;
  font-size:var(--fs-11);color:var(--dim);letter-spacing:var(--ls-005)}
.card.rebalance .rb-totals{font-variant-numeric:tabular-nums}

/* The skip button's corner: bottom-right, pushed into the rail, the same
   place the Index Change puts it; `.rb`'s bottom padding keeps the timeline
   labels clear of it. */
.card.rebalance .xg-timeline{margin-top:12px}
.card.rebalance .rb-ctl{position:absolute;z-index:3;width:30px;height:30px}
.card.rebalance .rb-ctl--skip{bottom:-4px;right:-10px}