/* Recordings sit on the page itself: no frame and no shadow; the video's own backdrop is the page colour. */
.recording { position: relative; margin: 28px 0 8px; padding: 0; }
.recording video { display: block; width: 100%; height: auto; cursor: pointer; background: transparent; }
/* The frame never ends on a hard edge: its last 28px fade into the page, where a tall card can reach it. */
.recording video { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.recording-toggle { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface, #fff); box-shadow: 0 2px 8px rgb(20 26 34 / .08); cursor: pointer; opacity: 0; transition: opacity 160ms ease; }
.recording-toggle[hidden] { display: none; }
.recording:hover .recording-toggle, .recording-toggle:focus-visible, .recording-toggle[data-state="paused"] { opacity: 1; }
.recording-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.recording-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.recording-toggle[data-state="playing"] .recording-play,
.recording-toggle[data-state="paused"] .recording-pause { display: none; }
@media (hover: none) { .recording-toggle { opacity: 1; } }

/* The step the recording is showing. */
.recording-steps li { transition: color 200ms ease; }
.recording-steps li.is-now { color: var(--ink); font-weight: 600; }
.recording-steps li.is-now::marker { color: var(--orange-dark, #b5663a); }
@media (prefers-reduced-motion: reduce) { .recording-toggle, .recording-steps li { transition: none; } }

/* Help: a recording spans the whole article column; the words keep their reading width. */
html:root body[data-page="help"] .help-article { max-width: none; }
html:root body[data-page="help"] .help-article > :not(.recording) { max-width: 68ch; }
html:root body[data-page="help"] .help-article .recording { max-width: 860px; }

/* Feature pages: the recording at its own size, centred under the heading. */
html:root body.feature-page .feature-recording { max-width: 1048px; margin: 0 auto; }