/* Video with chapters — an embeddable widget, see video-chapters.js.

   Every selector starts with .vc: the article styles of the theme (.yue ol, .yue li) number and indent lists, and
   two classes are needed to outweigh them. The accent is the white-label brand colour, substituted at build time
   like in custom.css, dark or light variant by html.dark; neutral shades come from the Shibuya variables, which
   follow the theme switch on their own. */

.vc {
    --vc-accent   : #236ac1;
    --vc-accent-bg: color-mix(in srgb, #2E8DE6 12%, transparent);

    margin   : 1.5rem 0;
    padding  : 0;
    max-width: 100%;
}

html.dark .vc {
    --vc-accent   : #4caaf6;
    --vc-accent-bg: color-mix(in srgb, #4caaf6 16%, transparent);
}

.vc .vc-caption {
    display      : flex;
    flex-wrap    : wrap;
    gap          : 0 .5rem;
    align-items  : baseline;
    margin-bottom: .5rem;
    font-size    : .875rem;
    color        : var(--sy-c-light);
}

.vc .vc-caption-title {
    font-weight: 600;
    color      : var(--sy-c-heading);
}

.vc .vc-caption-chapter:not(:empty)::before {
    content     : "·";
    margin-right: .5rem;
}

.vc .vc-video {
    display      : block;
    width        : 100%;
    height       : auto;
    aspect-ratio : 16 / 9;
    background   : #000;
    border-radius: 6px;
}

/* the chapter strip: one segment per chapter, as wide as the chapter is long */
.vc .vc-strip {
    display    : flex;
    gap        : 2px;
    align-items: center;
    height     : 14px;
    margin-top : 6px;
}

.vc .vc-strip[hidden] {
    display: none;
}

.vc .vc-segment {
    position     : relative;
    flex-basis   : 0;
    min-width    : 2px;
    height       : 6px;
    padding      : 0;
    border       : 0;
    border-radius: 2px;
    background   : var(--gray-a5);
    cursor       : pointer;
    overflow     : hidden;
    transition   : height .1s;
}

.vc .vc-segment:hover,
.vc .vc-segment:focus-visible {
    height: 10px;
}

.vc .vc-segment:focus-visible {
    outline       : 2px solid var(--vc-accent);
    outline-offset: 1px;
}

.vc .vc-segment-fill {
    position  : absolute;
    inset     : 0 auto 0 0;
    width     : 0;
    background: var(--vc-accent);
}

/* the chapter list: plain text without the script, buttons with it */
.vc .vc-chapters {
    margin    : .75rem 0 0;
    padding   : 0;
    list-style: none;
    font-size : .875rem;
}

.vc .vc-chapters > li {
    margin : 0;
    padding: 0;
}

.vc .vc-chapters-ready {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap                  : 2px 1rem;
}

@media (max-width: 720px) {
    .vc .vc-chapters-ready {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vc .vc-chapter {
    display      : flex;
    gap          : .75rem;
    width        : 100%;
    padding      : .3rem .5rem;
    border       : 0;
    border-radius: 4px;
    background   : transparent;
    color        : var(--sy-c-text);
    font         : inherit;
    text-align   : left;
    cursor       : pointer;
}

.vc .vc-chapter:hover {
    background: var(--gray-a3);
}

.vc .vc-chapter:focus-visible {
    outline       : 2px solid var(--vc-accent);
    outline-offset: -2px;
}

.vc .vc-chapter[aria-current="true"] {
    background: var(--vc-accent-bg);
}

.vc .vc-chapter-time {
    flex                : none;
    min-width           : 2.75em;
    color               : var(--vc-accent);
    font-variant-numeric: tabular-nums;
}

.vc .vc-chapter-title {
    min-width: 0;
}