/* Inline guidance follows the existing type and colour tokens. No overlay,
   automatic scrolling, timers or motion; it stays in the card's normal flow. */
.demo-guide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  padding-block: .8rem;
  border-block-start: 1px solid var(--demo-line, var(--line));
  color: var(--demo-muted, var(--fg-2));
  font-size: .875rem;
  line-height: 1.5;
}
.demo-guide__label { color: var(--demo-ink, var(--fg)); font-size: .8125rem; font-weight: 600; }
.demo-guide__steps { display: grid; min-width: 0; }
.demo-guide__step, .demo-guide__text { margin: 0; }
.demo-guide__step { grid-area: 1 / 1; visibility: hidden; }
.demo-guide__step.is-current { visibility: visible; }
.demo-guide__count { margin-inline-end: .5em; opacity: .8; font-variant-numeric: tabular-nums; }
.failover { --demo-line: rgba(255,255,255,.14); --demo-ink: #f5f5f7; --demo-muted: rgba(245,245,247,.75); }
.failover .demo-guide { margin-top: .6rem; }
.failover__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.failover__status { min-width: 0; align-items: center; }
.failover__label-stack { display: grid; min-width: 0; }
.failover__label-stack > span { grid-area: 1 / 1; }
.failover__sizer { visibility: hidden; pointer-events: none; }
.failover__actions { display: flex; justify-content: flex-start; min-width: 0; }
.failover__controls .btn, .failover__actions .btn { max-width: 100%; white-space: normal; }