/* Story 5 native controls and accessibility adaptations */

.story5-page .vid {
    position: relative;
}

/*
 * Media controls.
 *
 * Geometry and the artwork size only; appearance comes from the shared icon
 * button. The glyphs are drawn to fill their target, so they keep their own
 * size rather than the shared 1.5rem.
 */
.story5-page .story5-media-control.hra-button {
    /* The controls sit over full-bleed artwork, which stays dark in both
       appearances, so the focus ring is pinned rather than theme-reactive. */
    --hra-button-focus-ring: var(--story5-color-control-focus);

    padding: 0.15625rem;
}

.story5-page .story5-media-control img {
    width: 2.4375rem;
    height: 2.4375rem;
}

.story5-page .story5-media-control:focus-visible {
    outline-offset: 0.15rem;
    box-shadow: 0 0 0 0.4rem var(--story5-color-control-focus-outer);
}

.story5-page .story5-video-toggle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 101;
    max-width: calc(100% - 2rem);
}

@media (forced-colors: active) {
    .story5-page .story5-media-control {
        forced-color-adjust: auto;
    }

    .story5-page .story5-media-control:focus-visible {
        box-shadow: none;
    }
}