/* Next-step line (race-steps.js; tab badges are in flow.css) and the guide
   video dialog (onboarding.js). Theme tokens only. */

.race-steps-wrap > :not([hidden]) { margin-bottom: var(--s3); }
.race-steps-wrap[hidden], body.is-embed .race-steps-wrap { display: none; }

/* ---------- guide video dialog ---------- */
.vid-dlg {
    width: min(960px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
}
.vid-dlg::backdrop { background: rgba(0, 0, 0, .7); }
.vid-dlg-head { display: flex; align-items: center; padding: var(--s2) var(--s3); }
.vid-dlg-head h2 { margin: 0; padding: 0; border: 0; font-size: var(--fs-body); }
.vid-dlg-x {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--text-3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    min-height: 0;
}
.vid-dlg-body video { display: block; width: 100%; max-height: 75vh; background: var(--bg-2); }
.vid-dlg-missing { padding: var(--s4); margin: 0; color: var(--text-3); }
.vid-dlg-more { display: block; padding: var(--s2) var(--s3); font-size: var(--fs-small); color: var(--accent); }

/* On the Race tab the live view is the status. */
body.on-race-tab .race-steps-wrap { display: none; }