/* ══════════════════════════════════════════════════════════════════════════
   BARRE — component classes (spec 01 §2)
   Every measurement is the prototype's. The prototype used inline styles;
   these are the same values expressed as classes so the two-tier renderer in
   spec 05 §2 can emit small HTML strings.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 2.40 Glyph set, drawn ─────────────────────────────────────────────── */
/* The marks the prototype set as text — ✓ ★ ☆ ▶ ▸ ♪ ↻ ⋮ — exist in neither
   Marcellus nor DM Sans, so each one used to fall through to whatever symbol
   font the OS happened to supply. They are SVG now (js/ui/icons.js).

   The icons carry no colour and no size of their own: they inherit
   `currentColor` from the rule that coloured the character, and their default
   width/height is in `em`, so the same `font:` shorthand that sized the
   character sizes the icon. Nothing below overrides that except the video
   ring, which changes size independently of its type.

   base.css sets `svg { display: block }` for figures and charts; a mark set
   inside a sentence has to sit on the text baseline instead, and the small
   negative vertical-align is the usual optical drop for a cap-height glyph.
   In the flex-centred chips and circles the property is simply ignored. */
.b-icon {
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
  overflow: visible;   /* round caps that reach the viewBox edge */
}
/* A mark that trails a word rather than standing alone. */
.b-icon--trail { margin-left: 0.35em; vertical-align: -0.08em; }

/* ── 2.2 Kicker / 2.3 ScreenTitle / 2.4 SectionHeading ─────────────────── */
.b-kicker {
  font: var(--font-kicker);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-kicker);
}
.b-screen-head { padding: 0 var(--gutter); }

.b-section {
  padding: var(--space-19) var(--gutter) var(--space-8);
  font: var(--font-display-section);
}
.b-section--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.b-section__meta {
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-kicker);
}

/* ── 2.5 Avatar ────────────────────────────────────────────────────────── */
.b-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface-avatar);
  border: 1px solid var(--border-muted);
  color: var(--accent-plum-text);
  font: var(--font-display-avatar);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.b-avatar--lg { width: 62px; height: 62px; font: var(--font-display-streak); }

/* ── 2.6 StreakStrip ───────────────────────────────────────────────────── */
.b-streak {
  margin: var(--space-16) var(--gutter) 0;
  display: flex;
  gap: var(--space-6);
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-10) var(--space-12);
}
.b-streak__count {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding-right: var(--space-12);
  border-right: 1px solid var(--border-hairline);
  flex: none;
}
.b-streak__num { font: var(--font-display-streak); color: var(--text-ink); }
.b-streak__cap {
  font: var(--font-daylabel);
  letter-spacing: var(--ls-narrow);
  text-transform: uppercase;
  color: var(--text-kicker);
  font-size: 9.5px;
}
.b-streak__days { display: flex; gap: var(--space-3); flex: 1; padding-left: var(--space-12); }
.b-streak__day  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

.b-daycell {
  width: 100%; height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-muted);
  background: var(--surface-card);
  color: var(--text-hint);
  font: var(--font-label-sm);
  display: flex; align-items: center; justify-content: center;
}
.b-daycell[data-state="done"]  { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--text-on-inverse); }
.b-daycell[data-state="rest"]  { background: var(--gold-bg); border-color: var(--gold-border); color: var(--gold-text); }
.b-daycell[data-state="today"] { background: var(--surface-card); border-color: var(--accent-blush-border); color: var(--text-mistake); }
.b-daylabel { font: var(--font-daylabel); color: var(--text-label); }

/* ── 2.7 DarkFocusPanel ────────────────────────────────────────────────── */
.b-focus {
  margin: var(--space-17) var(--gutter) 0;
  border-radius: var(--radius-panel);
  background: var(--surface-inverse);
  padding: var(--space-17);
  position: relative;
  overflow: hidden;
}
.b-focus::before {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px;
  border-radius: var(--radius-pill);
  background: var(--accent-glow);
}
.b-focus > * { position: relative; }
.b-focus__who { display: flex; align-items: center; gap: var(--space-6); }
.b-focus__chip {
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--accent-rose);
  color: #fff;
  font: 500 10px/1 var(--font-ui);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.b-focus__line {
  font: var(--font-kicker);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--accent-pink-soft);
}
.b-focus__title { font: var(--font-display-focus); color: var(--text-on-inverse); margin-top: var(--space-10); }
.b-focus__quote { font: var(--font-body); color: var(--text-on-inverse-72); margin-top: var(--space-6); }
.b-focus__actions { display: flex; gap: var(--space-7); margin-top: var(--space-14); flex-wrap: wrap; }

/* ── 2.8 PillButton — 5 variants ───────────────────────────────────────── */
.b-pill {
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--font-label-pill);
  padding: 11px 18px;
  border: 1px solid transparent;
  background: transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.b-pill--on-dark        { border-color: var(--accent-rose); color: var(--accent-pink); }
.b-pill--on-dark:hover  { background: var(--accent-glow-hover); }
.b-pill--on-dark-ghost       { border-color: var(--border-on-inverse); color: var(--text-on-inverse-80); }
.b-pill--on-dark-ghost:hover { background: rgba(251,242,240,.08); }
.b-pill--outline        { border-color: var(--accent-rose); color: var(--accent-rose-deep); }
.b-pill--outline:hover  { background: var(--accent-blush); }
.b-pill--outline-sm     { padding: 10px 17px; }
.b-pill--outline-xs     { padding: 9px 15px; font: var(--font-label-chip); }
.b-pill--outline-lg     { padding: 13px 22px; font: var(--font-label-btn-sm); }
.b-pill--solid {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border: 0;
  padding: 15px;
  width: 100%;
  font: var(--font-label-btn);
  text-align: center;
}
.b-pill--solid:hover { background: var(--surface-inverse-hover); }
.b-link {
  font: var(--font-body-sm);
  color: var(--text-faint);
  background: none;
  border: 0;
}
.b-link--rose {
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-min);
  text-transform: uppercase;
  color: var(--accent-link);
}

/* ── 2.9 IconButton ────────────────────────────────────────────────────── */
.b-iconbtn {
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--surface-icon-button);
  color: var(--accent-plum-text);
  font: var(--font-glyph-md);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.b-iconbtn:hover { background: var(--surface-icon-button-hover); }

/* ── 2.10 / 2.11 ChallengeCard ─────────────────────────────────────────── */
.b-challenge {
  margin: 0 var(--gutter);
  border-radius: var(--radius-panel);
  background: var(--accent-rose);
  padding: var(--space-16) var(--space-16) var(--space-14);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.b-challenge::before {
  content: "";
  position: absolute; left: -30px; bottom: -50px;
  width: 120px; height: 120px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12);
}
.b-challenge > * { position: relative; }
.b-challenge__head { display: flex; align-items: baseline; justify-content: space-between; }
.b-challenge__title { font: var(--font-display-sub); }
.b-challenge__count { font: var(--font-display-screen-t); }
.b-challenge__count small { font: 400 14px/1 var(--font-ui); opacity: .7; }
.b-challenge__desc { font: var(--font-body-sm-3); color: rgba(255,255,255,.85); margin-top: var(--space-3); }
.b-challenge__days { display: flex; gap: var(--space-6); margin-top: var(--space-13); }
.b-challenge__tile {
  flex: 1; height: 56px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-on-rose);
  background: rgba(255,255,255,.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  color: #fff;
}
.b-challenge__tile[data-on="1"] { background: rgba(255,255,255,.9); color: var(--accent-link); }
.b-challenge__mark  { font: var(--font-display-num); }
.b-challenge__label { font: 400 9.5px/1 var(--font-ui); opacity: .8; }

.b-challenge--calm {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  padding: var(--space-16);
  color: var(--text-ink);
}
.b-challenge--calm::before { display: none; }
.b-challenge--calm .b-challenge__desc { color: var(--text-muted); }
.b-challenge--calm .b-challenge__days { gap: var(--space-5); }
.b-challenge--calm .b-challenge__tile {
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  border-color: var(--border-muted);
  color: var(--text-faint);
  font: var(--font-glyph-xxs);
}
.b-challenge--calm .b-challenge__tile[data-on="1"] {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}

/* ── 2.12 ProgressBar ──────────────────────────────────────────────────── */
.b-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}
.b-bar__fill {
  height: 100%;
  background: var(--accent-rose);
  transition: width var(--dur-bar) var(--ease);
}
.b-bar--quiz { height: 5px; flex: 1; }
.b-bar--quiz .b-bar__fill { transition: width var(--dur-quiz) var(--ease); }

.b-bar--stack {
  height: 10px;
  display: flex;
  margin-top: var(--space-7);
}
.b-bar--stack span { transition: width var(--dur-bar-slow) var(--ease); }
.b-bar__seg--performed { background: var(--surface-inverse); }
.b-bar__seg--ready     { background: var(--accent-rose); }
.b-bar__seg--learning  { background: var(--accent-pink); }

.b-pips { display: flex; gap: var(--space-3); margin-top: var(--space-12); }
.b-pip  { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--border-muted); }
.b-pip[data-on="1"] { background: var(--gold); }

/* ── 2.13 PracticeRow ──────────────────────────────────────────────────── */
.b-list { display: flex; flex-direction: column; gap: var(--space-7); padding: 0 var(--gutter); }

/* A practice item is TWO buttons — the tick and the row — side by side, not
   one inside the other. (spec 09 §2.2: the tick used to be a
   `<span role="checkbox">` nested in the row button, which is invalid HTML and
   left the tick at tabIndex −1, so it could not be ticked by keyboard at all.)
   The card chrome therefore lives on the <li> that holds them both, not on
   `.b-row`, so the tick sits INSIDE the card exactly where it always looked
   like it was. The row keeps the hover, because the row is the thing you open.
   Same paint as before; the box that draws it moved up one level. */
.b-row-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-13);
  display: flex; align-items: center; gap: var(--space-11);
  transition: border-color .15s var(--ease);
}
.b-row-wrap:hover { border-color: var(--border-card-hover); }

/* The row is now a plain region of the card: no chrome of its own, and it
   takes the width the tick does not. `min-width: 0` keeps a long title
   ellipsising inside the flex line instead of pushing "5 min" off the card. */
.b-row {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex; align-items: center; gap: var(--space-11);
  flex: 1; min-width: 0;
  text-align: left;
}
.b-row__main { flex: 1; min-width: 0; }
.b-row__title { font: var(--font-label-row); color: var(--text-ink); }
.b-row__sub   { font: var(--font-meta); color: var(--text-faint); margin-top: 3px; }
.b-row__mins  { font: var(--font-label-sm); color: var(--text-hint); font-weight: 400; flex: none; }
.b-row[data-done="1"] .b-row__title { color: var(--text-faint); text-decoration: line-through; }

.b-tick {
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-control);
  background: transparent;
  color: #fff;
  font: 500 12px/1 var(--font-ui);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.b-tick[data-done="1"] { background: var(--surface-inverse); border-color: var(--surface-inverse); }

/* ── 2.14 DashedTeaser ─────────────────────────────────────────────────── */
.b-teaser {
  margin: var(--space-17) var(--gutter) 0;
  border-radius: var(--radius-card-lg);
  border: 1px dashed var(--border-dashed);
  padding: var(--space-14);
  display: flex; align-items: center; gap: var(--space-10);
  background: var(--surface-tint-dashed);
  width: calc(100% - 2 * var(--gutter));
}
.b-teaser:hover { background: var(--surface-tint-dashed-hover); }
.b-teaser__icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm-2);
  background: var(--accent-blush);
  color: var(--accent-plum-text);
  font: var(--font-display-avatar);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.b-teaser__main  { flex: 1; min-width: 0; }
.b-teaser__title { font: var(--font-label-md); }
.b-teaser__sub   { font: var(--font-meta); color: var(--text-faint); margin-top: var(--space-1); }
.b-teaser__arrow { font: var(--font-glyph); color: var(--text-hint); flex: none; }

/* ── 2.15 / 2.16 FilterChips ───────────────────────────────────────────── */
.b-chiprow {
  display: flex; gap: var(--space-5);
  padding: var(--space-16) var(--gutter) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.b-chiprow::-webkit-scrollbar { display: none; }
.b-chiprow--status { padding-top: var(--space-8); }

.b-chip {
  flex: none;
  border-radius: var(--radius-pill);
  padding: var(--space-7) var(--space-13);
  font: var(--font-label-chip);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  color: var(--text-muted);
}
.b-chip[aria-pressed="true"] {
  background: var(--surface-inverse);
  border-color: var(--surface-inverse);
  color: var(--text-on-inverse);
}
.b-chip--status {
  padding: var(--space-5) var(--space-10);
  font: var(--font-eyebrow);
  font-weight: 400;
  background: transparent;
  border-color: var(--border-muted);
  color: var(--text-faint);
  letter-spacing: normal;
  text-transform: none;
}
.b-chip--status[aria-pressed="true"] {
  background: var(--accent-blush);
  border-color: var(--accent-blush-border);
  color: var(--accent-plum-text);
}

/* ── 2.17 StatusChip ───────────────────────────────────────────────────── */
.b-status {
  font: var(--font-label-xs);
  letter-spacing: var(--ls-min);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: var(--space-5) var(--space-8);
  flex: none;
  background: var(--status-none-bg);
  color: var(--status-none-fg);
}
.b-status[data-stage="learning"]  { background: var(--status-learning-bg);  color: var(--status-learning-fg); }
.b-status[data-stage="ready"]     { background: var(--status-ready-bg);     color: var(--status-ready-fg); }
.b-status[data-stage="performed"] { background: var(--status-performed-bg); color: var(--status-performed-fg); }

/* ── 2.18 PrePointeBadge ───────────────────────────────────────────────── */
.b-badge-prepointe {
  font: var(--font-label-badge);
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-bg);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  flex: none;
}

/* ── 2.19 MoveRow ──────────────────────────────────────────────────────── */
.b-move-row {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-13);
  display: flex; gap: var(--space-11); align-items: center;
  width: 100%;
  transition: border-color .15s var(--ease);
  content-visibility: auto;
  contain-intrinsic-size: 0 76px;
}
.b-move-row:hover { border-color: var(--border-card-hover); }
.b-move-accent {
  width: 4px;
  align-self: stretch;
  border-radius: var(--radius-pill);
  background: var(--status-none-accent);
  flex: none;
}
.b-move-row[data-stage="learning"]  .b-move-accent { background: var(--status-learning-accent); }
.b-move-row[data-stage="ready"]     .b-move-accent { background: var(--status-ready-accent); }
.b-move-row[data-stage="performed"] .b-move-accent { background: var(--status-performed-accent); }
.b-move-main { flex: 1; min-width: 0; }
.b-move-titlerow { display: flex; gap: var(--space-5); align-items: center; }
.b-move-name { font: var(--font-label-lg); }
.b-move-meta { font: var(--font-meta); color: var(--text-faint); margin-top: var(--space-2); }

/* ── 2.20 EmptyState ───────────────────────────────────────────────────── */
.b-empty {
  margin: var(--space-17) var(--gutter);
  border-radius: var(--radius-card);
  border: 1px dashed var(--border-dashed);
  padding: var(--space-19);
  text-align: center;
  font: var(--font-body-tight);
  color: var(--text-faint);
}

/* ── 2.21 VideoTile ────────────────────────────────────────────────────── */
.b-video {
  margin: var(--space-16) var(--gutter) 0;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--surface-inverse);
  height: 186px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.b-video::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--pattern-video);
}
.b-video__ring {
  width: 54px; height: 54px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-play-ring);
  color: var(--accent-pink);
  font: var(--font-glyph-sm);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: pulseRing var(--dur-pulse) infinite;
}
.b-video__cap {
  position: absolute; left: var(--space-14); bottom: var(--space-12);
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-narrow);
  text-transform: uppercase;
  color: var(--text-on-inverse-55);
  z-index: 3;
  max-width: calc(100% - 120px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b-video::before { z-index: 0; }

/* ── 2.21b Reference clip player ───────────────────────────────────────── */
/* The tile, the transport under it, the credit line, and the cue-capture
   panel. All of it is mounted by js/components/videoplayer.js. */

.b-videoblock { display: block; }

/* The <iframe> the YouTube API writes in. Sits above the diagonal pattern
   and below the controls. */
.b-video__frame { position: absolute; inset: 0; z-index: 1; }
/* Before there is an iframe, a tap anywhere on the tile should start it. */
.b-video:not([data-video="playing"]):not([data-video="paused"]) .b-video__frame {
  pointer-events: none;
}
.b-video[data-video="poster"] { cursor: pointer; }
.b-video__frame iframe,
.b-video__frame > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.b-video__ring { z-index: 3; }

/* The one mark whose size is not driven by the type around it. The ring is
   54px and its `font:` is 15px (spec 01 §2.21); a 15px triangle is lost in
   that much circle, and 22px reads as the third of the ring the eye expects.
   The triangle is already shifted right inside its own viewBox, so it lands
   optically centred in a box that is itself centred by flex. */
.b-video__ring .b-icon { width: 22px; height: 22px; }

/* Once it is playing the ring must not sit over the dancer's feet. */
.b-video[data-video="playing"] .b-video__ring,
.b-video[data-video="paused"] .b-video__ring {
  position: absolute; left: var(--space-8); top: var(--space-8);
  width: 36px; height: 36px;
  animation: none;
  background: rgba(42, 15, 38, .55);
}
.b-video[data-video="playing"] .b-video__ring .b-icon,
.b-video[data-video="paused"] .b-video__ring .b-icon { width: 16px; height: 16px; }
.b-video[data-video="playing"] .b-video__cap { display: none; }
.b-video[data-video="dead"] .b-video__ring { display: none; }

.b-video__paging {
  position: absolute; right: var(--space-8); bottom: var(--space-8);
  z-index: 3;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(42, 15, 38, .55);
  border: 1px solid var(--border-on-inverse);
}
.b-video__page {
  width: 26px; height: 26px;
  border: 0; background: none;
  border-radius: var(--radius-pill);
  color: var(--accent-pink);
  font: var(--font-label-sm);
  display: flex; align-items: center; justify-content: center;
}
.b-video__page:hover { background: rgba(251, 242, 240, .1); }
.b-video__count {
  font: var(--font-label-sm);
  color: var(--text-on-inverse-72);
  padding: 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.b-video__spinner {
  position: absolute; z-index: 3;
  font: var(--font-meta);
  color: var(--text-on-inverse-55);
}

/* Scrubber ------------------------------------------------------------- */
.b-videoscrub { padding: var(--space-6) var(--gutter) 0; }
.b-videoscrub__track {
  position: relative;
  height: 18px;
  display: flex; align-items: center;
  cursor: pointer;
}
.b-videoscrub__track::before {
  content: "";
  position: absolute; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
}
.b-videoscrub__band {
  position: absolute; height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent-pink-soft);
  pointer-events: none;
}
.b-videoscrub__head {
  position: absolute; width: 9px; height: 9px;
  margin-left: -4px;
  border-radius: var(--radius-pill);
  background: var(--accent-rose);
  pointer-events: none;
}
.b-videoscrub__times {
  display: flex; justify-content: space-between;
  font: var(--font-meta-plain);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Transport ------------------------------------------------------------ */
.b-videoctl { padding: var(--space-6) var(--gutter) 0; }
.b-videoctl__row {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}
.b-videoctl__lab {
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-narrow);
  text-transform: uppercase;
  color: var(--text-kicker);
  min-width: 42px;
}
.b-videoctl__seg {
  display: flex; gap: var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
}
.b-videoctl__btn {
  border: 0;
  background: none;
  border-radius: var(--radius-sm-2);
  padding: 7px 11px;
  font: var(--font-label-seg);
  color: var(--text-faint);
}
.b-videoctl__btn:hover { color: var(--accent-rose-deep); }
.b-videoctl__btn[aria-pressed="true"] {
  background: var(--surface-card);
  color: var(--text-ink);
  box-shadow: var(--shadow-seg, 0 1px 2px rgba(51, 32, 47, .08));
}
.b-videoctl__loopinfo {
  font: var(--font-meta-plain);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Credit and messages -------------------------------------------------- */
.b-videometa { padding: var(--space-6) var(--gutter) 0; }
.b-videometa__title { font: var(--font-label-md); color: var(--text-ink); }
.b-videometa__credit { font: var(--font-meta); color: var(--text-faint); margin-top: 2px; }
.b-videometa__note {
  font: var(--font-body-xxs);
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.b-videometa__links {
  display: flex; align-items: center; gap: var(--space-10);
  margin-top: var(--space-4);
}
.b-videometa__msg {
  font: var(--font-body-xxs);
  color: var(--accent-plum-text);
  background: var(--accent-blush);
  border: 1px solid var(--accent-blush-border);
  border-radius: var(--radius-sm-2);
  padding: var(--space-5) var(--space-8);
  margin-top: var(--space-6);
}
.b-link--quiet { color: var(--text-hint); }
.b-link--quiet:hover { color: var(--accent-link); }

/* "Show me ▸" — only rendered when the clip carries a cue for that
   mistake. Today no cue exists anywhere, so this never paints. */
.b-cuechip {
  display: inline-flex; align-items: center;
  margin: 0 var(--space-14) var(--space-12) 52px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-blush-border);
  background: var(--accent-blush);
  color: var(--accent-link);
  font: var(--font-label-chip);
}
.b-cuechip:hover { border-color: var(--accent-rose); }

/* Cue capture — the affordance that turns "watch it with a stopwatch" into
   a tap. (spec 07 §4.2) */
.b-cuetools {
  margin: var(--space-8) var(--gutter) 0;
  padding: var(--space-14);
  border-radius: var(--radius-card);
  background: var(--surface-tint);
  border: 1px solid var(--border-card);
}
.b-cuetools__intro {
  font: var(--font-body-xxs);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}
.b-cuetools__intro code {
  font-size: .95em;
  background: var(--surface-card);
  border-radius: 4px;
  padding: 1px 4px;
}
.b-cuetools__row {
  display: flex; align-items: center; gap: var(--space-6);
  margin-bottom: var(--space-5);
}
.b-cuetools__lab {
  font: var(--font-eyebrow);
  letter-spacing: var(--ls-narrow);
  text-transform: uppercase;
  color: var(--text-kicker);
  min-width: 54px;
}
.b-cuetools__sel,
.b-cuetools__in {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--font-body-sm);
  color: var(--text-ink);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm-2);
  padding: 8px 9px;
}
.b-cuetools__actions {
  display: flex; align-items: center; gap: var(--space-10);
  margin-top: var(--space-8);
}
.b-cuetools__out {
  width: 100%;
  margin-top: var(--space-8);
  font: var(--font-body-xxs);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-sm-2);
  padding: var(--space-6);
  resize: vertical;
}

/* ── 2.22 SegmentedControl ─────────────────────────────────────────────── */
.b-seg {
  display: flex; gap: var(--space-4);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.b-seg__opt {
  flex: 1;
  text-align: center;
  border-radius: var(--radius-sm-2);
  padding: 11px var(--space-2);
  font: var(--font-label-seg);
  color: var(--text-faint);
  background: transparent;
}
.b-seg__opt[aria-pressed="true"] {
  background: var(--surface-card);
  color: var(--text-ink);
  box-shadow: var(--shadow-seg);
}
.b-seg--view .b-seg__opt { padding: var(--space-8) var(--space-2); font: var(--font-label-seg-2); }

/* ── 2.23 MistakeAccordionCard ─────────────────────────────────────────── */
.b-mistakes { display: flex; flex-direction: column; gap: var(--space-9); padding: 0 var(--gutter); }
.b-mistake {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  animation: riseIn var(--dur-rise) var(--ease) both;
}
.b-mistake__head {
  padding: var(--space-13) var(--space-14);
  display: flex; gap: var(--space-10); align-items: flex-start;
  width: 100%;
}
.b-mistake__idx {
  width: 24px; height: 24px;
  border-radius: var(--radius-xs);
  background: var(--status-learning-bg);
  color: var(--status-learning-fg);
  font: var(--font-label-sm);
  display: flex; align-items: center; justify-content: center;
  flex: none; margin-top: 1px;
}
.b-mistake__main { flex: 1; min-width: 0; }
.b-mistake__micro {
  font: var(--font-microlabel);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-mistake);
}
.b-mistake__title { font: var(--font-label); margin-top: var(--space-4); }
.b-mistake__chev  { font: var(--font-glyph-xs); color: var(--text-hint); flex: none; margin-top: var(--space-2); }
.b-mistake__body  { padding: 0 var(--space-14) var(--space-14) 52px; }
.b-mistake__rule  { height: 1px; background: var(--border-divider); margin-bottom: var(--space-11); }
.b-mistake__fixlabel {
  font: var(--font-microlabel);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--success-soft);
}
.b-mistake__fix { font: var(--font-body); color: var(--text-body); margin-top: var(--space-5); }
.b-cue {
  margin-top: var(--space-10);
  border-left: 2px solid var(--accent-pink-soft);
  padding: var(--space-1) 0 var(--space-1) var(--space-10);
  font: var(--font-display-cue);
  color: var(--accent-plum-text);
}

/* ── 2.24 StepsTimeline ────────────────────────────────────────────────── */
.b-steps { padding: var(--space-10) var(--gutter) 0; display: flex; flex-direction: column; }
.b-step  { display: flex; gap: var(--space-12); align-items: stretch; }
.b-step__rail { width: 26px; flex: none; display: flex; flex-direction: column; align-items: center; }
.b-step__num {
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  font: var(--font-label-sm);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.b-step__line { flex: 1; width: 1px; background: var(--border-hairline); }
.b-step:last-child .b-step__line { background: transparent; }
.b-step__body   { flex: 1; padding-bottom: var(--space-16); }
.b-step__text   { font: var(--font-label-step); color: var(--text-ink); }
.b-step__detail { font: var(--font-meta-3); color: var(--text-faint); margin-top: var(--space-2); }

/* ── 2.25 DrillCard ────────────────────────────────────────────────────── */
.b-drill {
  margin: var(--space-16) var(--gutter) 0;
  border-radius: var(--radius-panel);
  background: var(--surface-tint);
  border: 1px solid var(--border-card);
  padding: var(--space-16);
}
.b-drill__kicker {
  font: var(--font-kicker);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--text-kicker);
}
.b-drill__name   { font: var(--font-display-card); margin-top: var(--space-7); }
.b-drill__detail { font: var(--font-body-sm); color: var(--text-muted); margin-top: var(--space-5); }
.b-drill .b-pill { margin-top: var(--space-12); }

/* ── 2.26 SkillBarRow / 2.27 Legend ────────────────────────────────────── */
.b-bars { padding: var(--space-17) var(--gutter) 0; display: flex; flex-direction: column; gap: var(--space-14); }
.b-barrow__label { display: flex; align-items: baseline; justify-content: space-between; }
.b-barrow__cat   { font: var(--font-label-bar); }
.b-barrow__count { font: var(--font-meta-plain); color: var(--text-faint); }
.b-legend { display: flex; gap: var(--space-12); padding-top: var(--space-1); }
.b-legend__item { display: flex; align-items: center; gap: var(--space-4); font: var(--font-eyebrow); color: var(--text-faint); letter-spacing: normal; text-transform: none; }
.b-legend__dot  { width: 9px; height: 9px; border-radius: var(--radius-pill); }

/* ── 2.30 DetailCard ───────────────────────────────────────────────────── */
.b-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card-lg);
  padding: var(--space-15);
  margin: 0 var(--gutter);
}
.b-card__title { font: var(--font-display-card); margin-top: var(--space-6); }
.b-card__note  { font: var(--font-body-sm); color: var(--text-muted); margin-top: var(--space-5); }

/* ── 2.31 PrePointeTrackCard ───────────────────────────────────────────── */
.b-prepointe {
  margin: var(--space-16) var(--gutter) 0;
  border-radius: var(--radius-panel);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  padding: var(--space-15);
}
.b-prepointe__kicker {
  font: var(--font-kicker-sm);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--gold-text);
}
.b-prepointe__title { font: var(--font-display-card); color: var(--gold-heading); margin-top: var(--space-7); }
.b-prepointe__body  { font: var(--font-body-sm); color: var(--gold-body); margin-top: var(--space-4); }

/* ── 2.32 RoutineCard ──────────────────────────────────────────────────── */
.b-routines { padding: var(--space-18) var(--gutter) 0; display: flex; flex-direction: column; gap: var(--space-8); }
.b-routine {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card-lg);
  padding: var(--space-14);
  display: flex; gap: var(--space-12); align-items: center;
  width: 100%;
  transition: border-color .15s var(--ease);
}
.b-routine:hover { border-color: var(--border-card-hover); }
.b-routine__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  font: var(--font-glyph-xs);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  background: var(--accent-blush);
  color: var(--accent-rose-deep);
}
.b-routine__icon[data-tone="gold"] { background: var(--gold-bg); color: var(--gold-text); }
.b-routine__main { flex: 1; min-width: 0; }
.b-routine__name { font: var(--font-label-lg); }
.b-routine__sub  { font: var(--font-meta-2); color: var(--text-faint); margin-top: var(--space-2); }
.b-routine__mins { text-align: right; flex: none; }
.b-routine__num  { font: var(--font-display-num); }
.b-routine__unit {
  font: 400 9.5px/1 var(--font-ui);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--text-label);
  margin-top: var(--space-2);
}

/* ── 2.33 StatTile ─────────────────────────────────────────────────────── */
.b-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7);
  padding: var(--space-18) var(--gutter) 0;
}
.b-stat {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-13);
}
.b-stat__value { font: var(--font-display-stat); }
.b-stat__label { font: var(--font-meta-sm); color: var(--text-faint); margin-top: var(--space-4); }

/* ── 2.34 FreezeDot ────────────────────────────────────────────────────── */
.b-freezes { display: flex; gap: var(--space-6); margin-top: var(--space-12); align-items: center; }
.b-freeze {
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-muted);
  background: transparent;
  color: var(--text-disabled);
  font: var(--font-glyph-xs);
  display: flex; align-items: center; justify-content: center;
}
.b-freeze[data-on="1"] { background: var(--gold-bg); border-color: var(--gold-border); color: var(--gold-text); }
.b-freezes .b-pill { margin-left: auto; }

/* ── 2.35 RecentRow ────────────────────────────────────────────────────── */
.b-recent {
  display: flex; gap: var(--space-11); align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-13);
}
.b-recent__icon {
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  font: var(--font-glyph-xs);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  background: var(--status-none-bg);
  color: var(--status-none-fg);
}
.b-recent__icon[data-tone="done"] { background: var(--status-performed-bg); color: var(--status-performed-fg); }
.b-recent__icon[data-tone="rest"] { background: var(--gold-bg);             color: var(--gold-text); }
.b-recent__icon[data-tone="note"] { background: var(--accent-blush);        color: var(--accent-rose-deep); }
.b-recent__title { font: var(--font-label-md); }
.b-recent__date  { font: var(--font-meta-sm); color: var(--text-faint); margin-top: 3px; }

/* ── 2.36 QuizOption / 2.37 QuizExplainer ──────────────────────────────── */
.b-quizopt {
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-13) var(--space-14);
  display: flex; gap: var(--space-10); align-items: center;
  background: var(--surface-card);
  width: 100%;
}
.b-quizopt:hover { border-color: var(--border-card-hover); }
.b-quizopt__dot {
  width: 24px; height: 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-control);
  background: transparent;
  color: #fff;
  font: var(--font-label-sm);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.b-quizopt__label { font: var(--font-display-cue); font-family: var(--font-ui); }
.b-quizopt[data-verdict="right"] { background: var(--answer-right-bg); border-color: var(--answer-right-bd); }
.b-quizopt[data-verdict="right"] .b-quizopt__dot { background: var(--success); border-color: var(--success); }
.b-quizopt[data-verdict="wrong"] { background: var(--answer-wrong-bg); border-color: var(--answer-wrong-bd); }
.b-quizopt[data-verdict="wrong"] .b-quizopt__dot { background: var(--accent-link); border-color: var(--accent-link); }

.b-explainer {
  margin-top: var(--space-16);
  border-radius: var(--radius-card);
  background: var(--surface-tint);
  border: 1px solid var(--border-card);
  padding: var(--space-14);
  animation: riseIn .3s var(--ease) both;
}
.b-explainer__verdict {
  font: var(--font-microlabel);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--success);
}
.b-explainer[data-verdict="wrong"] .b-explainer__verdict { color: var(--accent-link); }
.b-explainer__body { font: var(--font-body); color: var(--text-body); margin-top: var(--space-6); }

/* ── 2.39 TabBar ───────────────────────────────────────────────────────── */
.b-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  color: var(--text-tab-inactive);
}
.b-tab__label {
  font: var(--font-label-tab);
  letter-spacing: var(--ls-tab);
}
.b-tab svg { stroke: currentColor; stroke-width: 1.5; }
.b-tab[aria-current="page"] { color: var(--surface-inverse); }
.b-tab[aria-current="page"] svg { stroke-width: 2; }

/* ── 2.41 Relationship links — "How this connects" ─────────────────────────
   MOVE DETAIL's map of where a step sits: its counterpart in another style,
   the rungs either side of it, and the lateral links worth reading. Every one
   of them is navigation, and the copy in js/screens/move.js is written to keep
   it that way — some of these lead to techniques that are browsable but never
   plannable (derive.plannable()), so nothing here may look like a call to
   action. Hence: no filled buttons, no accent ground on a row, no chevron
   urgency. Same white card and hairline as .b-move-row, one size quieter.
   ────────────────────────────────────────────────────────────────────── */

/* The caption under the section heading. Sits on the paper ground, so
   --text-muted (5.86) rather than --text-faint. */
.b-relnote {
  font: var(--font-body-sm);
  color: var(--text-muted);
  padding: 0 var(--gutter);
}

.b-relgroup { padding: var(--space-12) var(--gutter) 0; }
/* Pairs with .t-eyebrow, which carries the font, tracking and colour. */
.b-relgroup__label { margin-bottom: var(--space-6); }

.b-rellist { display: flex; flex-direction: column; gap: var(--space-5); }

.b-relrow {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-8) var(--space-11);
  /* A whole row is the target, so it clears 44px on its own — no ::after
     expander needed in css/a11y.css §3. */
  min-height: var(--a11y-tap, 44px);
  display: flex; gap: var(--space-10); align-items: center;
  width: 100%;
  text-align: left;
  transition: border-color .15s var(--ease);
}
.b-relrow:hover { border-color: var(--border-card-hover); }
.b-relrow__main { flex: 1; min-width: 0; }
.b-relrow__titlerow { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.b-relrow__name { font: var(--font-label-md); color: var(--text-ink); }
.b-relrow__meta { font: var(--font-meta); color: var(--text-faint); margin-top: var(--space-1); }
.b-relrow__arrow { font: var(--font-glyph-md); color: var(--text-hint); flex: none; }

/* The cross-style card. Blush rather than the gold of .b-prepointe or the
   tint of .b-drill: this is the app noticing something for her, not a caution
   and not a task. --accent-plum-text on --accent-blush is the pairing already
   used by .b-videometa__msg (5.25:1). */
.b-crossstyle {
  margin: var(--space-12) var(--gutter) 0;
  border-radius: var(--radius-panel);
  background: var(--accent-blush);
  border: 1px solid var(--accent-blush-border);
  padding: var(--space-15);
}
.b-crossstyle__kicker {
  font: var(--font-kicker-sm);
  letter-spacing: var(--ls-mid);
  text-transform: uppercase;
  color: var(--accent-plum-text);
}
.b-crossstyle__title {
  font: var(--font-display-card);
  color: var(--text-ink);
  margin-top: var(--space-7);
}
.b-crossstyle__body {
  font: var(--font-body-sm);
  color: var(--text-body);
  margin-top: var(--space-4);
}
.b-crossstyle .b-rellist { margin-top: var(--space-11); }
/* On blush, the card hairline disappears; the row needs its own edge. */
.b-crossstyle .b-relrow { border-color: var(--accent-blush-border); }
.b-crossstyle .b-relrow:hover { border-color: var(--accent-rose); }

/* ── Quiet secondary note and step list ────────────────────────────────────
   What is left of the old stub panel. The panel itself (.b-stub, __kicker,
   __title) went when components/empty.js stopped exporting stubPanel — every
   screen is built. These two are still in use on their own: __note for the
   level disclaimer on MOVE DETAIL, __list for the install steps in app.js. */
.b-stub__note  { font: var(--font-body-sm); color: var(--text-muted); margin-top: var(--space-5); }
.b-stub__list  { font: var(--font-body-sm); color: var(--text-faint); margin-top: var(--space-8); }
.b-stub__list li { margin-top: var(--space-2); padding-left: var(--space-10); position: relative; }
.b-stub__list li::before { content: "·"; position: absolute; left: 0; color: var(--text-hint); }