/* AdaptiveVideo (Video-Demos-v1 §9.5). Every visual value is a custom property with a
   neutral fallback; the host sets them from its own design tokens. */

.av {
    margin: 0;
}

.av__frame {
    position: relative;
    /* The bar's narrow layout follows the player's width, not the window's (VCB-R15). */
    container-type: inline-size;
    /* No double-tap zoom: a double-tap skips (VCB-R08). */
    touch-action: manipulation;
}

.av video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--av-border, transparent);
    border-radius: var(--av-radius, 0);
    background-color: var(--av-letterbox, #000);
}

.av__caption {
    margin-top: var(--av-caption-gap, 0.5rem);
    color: var(--av-caption-color, inherit);
}

/* The loop's Pause / Play button: a real button, drawn with CSS so the library ships no
   images. data-state is set by the script. */
.av__toggle {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--av-radius, 0);
    background-color: var(--av-button-surface, rgba(0, 0, 0, 0.6));
    color: var(--av-button-text, #fff);
    cursor: pointer;
}

.av__toggle:focus-visible {
    outline: var(--av-focus, 2px solid currentColor);
    outline-offset: 2px;
}

.av__toggle::before,
.av__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
}

/* Playing: two bars (pause). */
.av__toggle[data-state="playing"]::before,
.av__toggle[data-state="playing"]::after {
    width: 0.25rem;
    height: 0.875rem;
    margin-top: -0.4375rem;
    background-color: currentColor;
}

.av__toggle[data-state="playing"]::before {
    margin-left: -0.375rem;
}

.av__toggle[data-state="playing"]::after {
    margin-left: 0.125rem;
}

/* Paused: a triangle (play). */
.av__toggle[data-state="paused"]::before {
    margin-top: -0.5rem;
    margin-left: -0.25rem;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-left: 0.75rem solid currentColor;
}

/* ------------------------------------------------------------ control bar ---
   A demo's control bar (Video-Control-Bar-Proposal-v1). The markup renders it hidden; the
   script reveals it, takes the native controls away and sets data-started on the figure at
   the first play. Until then only the large Play button shows, so the poster stays clean. */

.av [hidden] {
    display: none !important;
}

.av__frame:fullscreen {
    display: grid;
    place-items: center;
    background-color: var(--av-letterbox, #000);
}

.av__frame:fullscreen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
}

.av__bigplay {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 5.25rem;
    height: 5.25rem;
    margin: -2.625rem 0 0 -2.625rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--av-big-play-surface, rgba(0, 0, 0, 0.6));
    color: var(--av-bar-text, #fff);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.av__bigplay .av__icon {
    width: 2.5rem;
    height: 2.5rem;
}

.av__bigplay:hover {
    transform: scale(1.06);
    box-shadow: 0 0 0 2px var(--av-accent, #fff);
}

.av[data-started] .av__bigplay {
    display: none;
}

.av__bar {
    position: absolute;
    right: 1px;
    bottom: 1px;
    left: 1px;
    padding: 2.25rem 0.5rem 0.25rem;
    border-radius: 0 0 var(--av-radius, 0) var(--av-radius, 0);
    background: var(--av-bar-surface, linear-gradient(transparent, rgba(0, 0, 0, 0.7)));
    color: var(--av-bar-text, #fff);
    transition: opacity 0.2s ease, visibility 0.2s;
}

.av:not([data-started]) .av__bar {
    visibility: hidden;
    opacity: 0;
}

.av__frame:fullscreen .av__bar {
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
}

/* The seek bar: a tall, invisible hit area around a thin track. */
.av__seek {
    position: relative;
    height: 1rem;
    margin: 0 0.5rem;
    cursor: pointer;
    touch-action: none;
}

.av__seek:focus-visible {
    outline: var(--av-focus, 2px solid currentColor);
    outline-offset: 2px;
}

.av__track {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 0.25rem;
    margin-top: -0.125rem;
    border-radius: 0.125rem;
    background-color: var(--av-track, rgba(255, 255, 255, 0.25));
    overflow: hidden;
    transition: height 0.1s ease, margin-top 0.1s ease;
}

.av__seek:hover .av__track,
.av__seek[data-dragging] .av__track {
    height: 0.375rem;
    margin-top: -0.1875rem;
}

.av__buffered,
.av__played {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.av__buffered {
    right: 0;
}

.av__buffered span {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: var(--av-buffered, rgba(255, 255, 255, 0.45));
}

.av__played {
    width: 0;
    background-color: var(--av-accent, #fff);
}

.av__thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.75rem;
    height: 0.75rem;
    margin: -0.375rem 0 0 -0.375rem;
    border-radius: 50%;
    background-color: var(--av-accent, #fff);
    transform: scale(0);
    transition: transform 0.1s ease;
}

.av__seek:hover .av__thumb,
.av__seek:focus-visible .av__thumb,
.av__seek[data-dragging] .av__thumb {
    transform: scale(1);
}

.av__tip {
    position: absolute;
    bottom: calc(100% + 0.375rem);
    left: 0;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.25rem;
    background-color: var(--av-menu-surface, rgba(20, 20, 20, 0.95));
    color: var(--av-menu-text, #fff);
    font-family: var(--av-time-font, inherit);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

.av__row {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.av__ctl {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: inherit;
    cursor: pointer;
}

.av__ctl:hover {
    background-color: color-mix(in srgb, currentColor 14%, transparent);
}

.av__ctl:focus-visible {
    outline: var(--av-focus, 2px solid currentColor);
    outline-offset: -2px;
}

.av__icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

/* One button, two icons: data-state picks the one that shows. */
.av__ctl[data-state="paused"] .av__icon--pause,
.av__ctl[data-state="playing"] .av__icon--play,
.av__ctl[data-state="off"] .av__icon--exitfullscreen,
.av__ctl[data-state="on"] .av__icon--fullscreen {
    display: none;
}

.av__time {
    margin: 0 0.5rem;
    font-family: var(--av-time-font, inherit);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.av__duration {
    opacity: 0.7;
}

.av__spacer {
    flex: 1;
}

/* Volume: the mute button and a short slider beside it. */
.av__volume {
    display: flex;
    align-items: center;
}

.av__slider {
    position: relative;
    width: 4.5rem;
    height: 1rem;
    margin: 0 0.5rem 0 0.25rem;
    cursor: pointer;
    touch-action: none;
}

.av__slider:focus-visible {
    outline: var(--av-focus, 2px solid currentColor);
    outline-offset: 2px;
}

.av__slider .av__thumb {
    transform: scale(1);
}

.av__ctl[data-state="high"] .av__icon--volumelow,
.av__ctl[data-state="high"] .av__icon--muted,
.av__ctl[data-state="low"] .av__icon--volume,
.av__ctl[data-state="low"] .av__icon--muted,
.av__ctl[data-state="muted"] .av__icon--volume,
.av__ctl[data-state="muted"] .av__icon--volumelow {
    display: none;
}

/* A toggle that is on (captions, picture in picture) carries a short accent line under it. */
.av__ctl[aria-pressed] {
    position: relative;
}

.av__ctl[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    bottom: 0.125rem;
    left: 0.75rem;
    height: 0.125rem;
    border-radius: 0.0625rem;
    background-color: var(--av-accent, #fff);
}

/* A control that shows its value as text ("1×", "Auto"). */
.av__ctl--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 2.5rem;
    padding: 0 0.5rem;
    font: inherit;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Menus open upward from their button and close on a choice, Escape or a click outside. */
.av__menuwrap {
    position: relative;
}

.av__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 1;
    min-width: 7.5rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    background-color: var(--av-menu-surface, rgba(20, 20, 20, 0.95));
    color: var(--av-menu-text, #fff);
    font-size: 0.8125rem;
    /* The script caps the height to the picture above the button; a long list scrolls. */
    overflow-y: auto;
}

.av__menu-title {
    padding: 0.375rem 0.75rem 0.25rem;
    font-weight: 600;
    opacity: 0.7;
}

.av__item {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.4375rem 0.75rem 0.4375rem 1.875rem;
    border: 0;
    border-radius: 0.3125rem;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.av__item:hover,
.av__item:focus-visible {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    outline: none;
}

.av__item[aria-checked="true"] {
    color: var(--av-accent, #fff);
}

/* The check mark, drawn with two borders. */
.av__item[aria-checked="true"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.8125rem;
    width: 0.3125rem;
    height: 0.625rem;
    margin-top: -0.375rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* A small downward caret after a menu button's text, drawn with borders. */
.av__ctl--caret::after {
    content: "";
    margin: 0.125rem 0 0 0.375rem;
    border: 0.25rem solid transparent;
    border-bottom: 0;
    border-top-color: currentColor;
}

/* "Auto" names the quality it is playing, dimmer. */
.av__item-note {
    margin-left: 0.375rem;
    opacity: 0.7;
}

/* Read by screen readers, never seen. */
.av__live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.av__frame:focus {
    outline: none;
}

.av__frame:focus-visible {
    outline: var(--av-focus, 2px solid currentColor);
    outline-offset: 2px;
}

/* ---------------------------------------------------- hiding, touch, phone ---
   While playing, the bar fades 3 s after the last pointer movement, tap or key (VCB-R07). It
   stays focusable, so Tab brings it back; it takes no pointer while faded, so the first tap
   reaches the picture. */

.av[data-idle] .av__frame {
    cursor: none;
}

.av[data-idle] .av__bar {
    opacity: 0;
}

/* Above every rule that lets a control take the pointer, the touch layout's included. */
.av[data-idle] .av__bar,
.av[data-idle] .av__bar * {
    pointer-events: none !important;
}

.av__narrow {
    display: none;
}

.av__mark {
    position: absolute;
    top: 50%;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    background-color: var(--av-big-play-surface, rgba(0, 0, 0, 0.6));
    color: var(--av-bar-text, #fff);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.av__mark[data-side="back"] {
    left: 25%;
}

.av__mark[data-side="forward"] {
    left: 75%;
}

/* A narrow player: the row wraps, the volume slider, Speed, Quality and picture in picture give
   way to Settings. */
@container (max-width: 479.98px) {
    .av__wide {
        display: none !important;
    }

    .av__narrow {
        display: block;
    }

    .av__row {
        flex-wrap: wrap;
    }
}

/* Touch: back, play and forward move to the middle of the picture as large buttons, and every
   control is at least 44 px. The bar covers the picture but lets taps through to it. */
@media (pointer: coarse) {
    .av__bar {
        top: 1px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        pointer-events: none;
    }

    .av__bar > * {
        pointer-events: auto;
    }

    .av__frame:fullscreen .av__bar {
        top: 0;
    }

    .av__ctl {
        min-width: 2.75rem;
        height: 2.75rem;
    }

    /* Centred in the picture above the seek bar and the row (1.5rem + 2.75rem + 0.25rem below),
       so no centre button's tap area reaches the seek bar's. */
    .av__row > [data-av="back"],
    .av__row > [data-av="play"],
    .av__row > [data-av="forward"] {
        position: absolute;
        top: calc((100% - 4.5rem) / 2);
        left: 50%;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        background-color: var(--av-big-play-surface, rgba(0, 0, 0, 0.6));
        pointer-events: auto;
    }

    .av__row > [data-av="back"] {
        margin: -1.75rem 0 0 -7.25rem;
    }

    .av__row > [data-av="forward"] {
        margin: -1.75rem 0 0 3.75rem;
    }

    .av__row > [data-av="play"] {
        width: 4.25rem;
        height: 4.25rem;
        margin: -2.125rem 0 0 -2.125rem;
    }

    .av__row > [data-av="back"] .av__icon,
    .av__row > [data-av="play"] .av__icon,
    .av__row > [data-av="forward"] .av__icon {
        width: 2rem;
        height: 2rem;
    }

    .av__seek {
        height: 1.5rem;
    }

    .av__thumb {
        transform: scale(1);
    }
}

/* Settings' two levels: a row that opens a list shows its value and a chevron; the list's first
   row leads back. Chevrons are drawn with borders. */
.av__item--sub {
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
}

.av__item-value {
    margin-left: auto;
    padding-left: 1rem;
    opacity: 0.7;
}

.av__item--sub::after,
.av__item--back::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.av__item--sub::after {
    margin-left: 0.625rem;
    transform: rotate(45deg);
}

.av__item--back {
    font-weight: 600;
}

.av__item--back::before {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    margin-top: -0.1875rem;
    transform: rotate(-135deg);
}