/* Gillish Cairnstone — Audio block.
 *
 * Two looks, from the two shapes the references share (vault:
 * Research/Mobbin sessions/2026-10-05 Audio player ...): a CARD (picture,
 * show name, title, player) and a slim BAR. Every colour comes from the
 * theme through currentColor, so the block reads on a light and a dark theme
 * alike; the card's edge is a hairline border, which carries the boundary
 * against the page whatever the theme's background (block.md §4).
 *
 * Plyr's own look ships in gc-plyr.css; the rules that hold its buttons off
 * a theme that paints every button live once in gc-base.css (shared with
 * Video). Logical properties throughout, so the layout mirrors in RTL.
 */

.gc-audio-embed {
    container: gc-audio / inline-size;
    margin-inline: 0;
    /* A colour picked in the block designer (render + editor write these). */
    color: var(--gc-audio-text, inherit);
    /* A gradient from the block designer lands on the figure, which is not the
     * surface; it is drawn at no size here and taken up by the card below. */
    background-size: 0 0;
    background-repeat: no-repeat;
}

/* ─── The card ─────────────────────────────────────────────────────── */

.gc-audio-embed__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 0.75rem;
    background-color: var(--gc-audio-bg, color-mix(in srgb, currentColor 5%, transparent));
    background-image: inherit;
}

.gc-audio-embed.has-art .gc-audio-embed__card {
    grid-template-columns: auto minmax(0, 1fr);
}

.gc-audio-embed__art {
    display: block;
    inline-size: 7.5rem;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.5rem;
}

.gc-audio-embed__body {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
}

.gc-audio-embed__meta {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
}

.gc-audio-embed__show {
    font-size: 0.8125em;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.gc-audio-embed__title {
    font-size: 1.125em;
    font-weight: 600;
    line-height: 1.3;
}

/* ─── The bar ──────────────────────────────────────────────────────── */

.gc-audio-embed--look-bar .gc-audio-embed__card {
    gap: 0.75rem;
    /* Room enough that the title clears the pill's rounded end (2.4.72: at
     * 0.75rem it sat against the curve). */
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
}

.gc-audio-embed--look-bar.has-art .gc-audio-embed__card {
    padding-inline-start: 0.5rem;
}

.gc-audio-embed--look-bar .gc-audio-embed__art {
    inline-size: 2.75rem;
    border-radius: 999px;
}

.gc-audio-embed--look-bar .gc-audio-embed__body {
    gap: 0;
}

.gc-audio-embed--look-bar .gc-audio-embed__meta {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875em;
}

.gc-audio-embed--look-bar .gc-audio-embed__show::after {
    content: " · ";
}

.gc-audio-embed--look-bar .gc-audio-embed__title {
    font-size: 1em;
}

/* ─── The player inside it ─────────────────────────────────────────── */

/* Before the script runs (and with scripting off) the browser's own player
 * fills the row. */
.gc-audio-embed__audio {
    display: block;
    inline-size: 100%;
}

.gc-audio-embed .plyr--audio {
    --plyr-audio-controls-background: transparent;
    --plyr-audio-control-color: currentColor;
    --plyr-audio-control-color-hover: currentColor;
    --plyr-audio-control-background-hover: color-mix(in srgb, currentColor 14%, transparent);
    --plyr-color-main: currentColor;
    --plyr-range-thumb-background: currentColor;
    --plyr-audio-range-track-background: color-mix(in srgb, currentColor 25%, transparent);
    --plyr-audio-progress-buffered-background: color-mix(in srgb, currentColor 35%, transparent);
    --plyr-progress-marker-background: currentColor;
    --plyr-focus-visible-color: currentColor;
    --plyr-font-family: inherit;
    min-inline-size: 0;
    color: inherit;
}

.gc-audio-embed .plyr--audio .plyr__controls {
    padding: 0;
    color: inherit;
}

/* The speed menu opens downwards. Plyr opens it above the button, which suits
 * a video frame; an audio player is a short strip often near the top of a page,
 * and the menu ran off the top of the window so the faster speeds could not be
 * reached (owner, 2026-10-05). The arrow turns to point up at the button. Near
 * the bottom of the window the view-script sets `is-menu-up` and it opens
 * upwards again, as Plyr draws it (the card's buttons are its last row, and a
 * downward list ran off the bottom there). */
.gc-audio-embed .plyr__menu__container {
    top: 100%;
    bottom: auto;
    margin-block: 10px 0;
}

.gc-audio-embed .plyr__menu__container::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
}

.gc-audio-embed .is-menu-up .plyr__menu__container,
.gc-audio-embed.is-menu-up .plyr__menu__container {
    top: auto;
    bottom: 100%;
    margin-block: 0 10px;
}

.gc-audio-embed .is-menu-up .plyr__menu__container::after,
.gc-audio-embed.is-menu-up .plyr__menu__container::after {
    top: 100%;
    bottom: auto;
    border-top-color: var(--plyr-menu-background, rgba(255, 255, 255, 0.9));
    border-bottom-color: transparent;
}

/* The focus ring follows the text, which is the colour with contrast on
 * whatever the theme puts behind the block. */
.gc-audio-embed .plyr :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* In the card the timeline takes the whole row above the buttons, at every
 * width (the Kajabi card in the references). Beside the buttons, with volume
 * in the default since 2.4.72, it measured 97px of a 645px block. The bar keeps
 * one row until the column is narrow (below). */
.gc-audio-embed--look-card .plyr--audio .plyr__controls {
    flex-wrap: wrap;
}

/* The view-script moves the timeline first in the bar's DOM in the card, so
 * the focus order follows what is seen (a CSS `order` alone put it above Play
 * on screen and after Play for the keyboard: the 2.4.72 re-walk). */
.gc-audio-embed--look-card .plyr__controls .plyr__progress__container {
    flex: 1 0 100%;
    margin-block-end: 0.25rem;
}

/* On the row of buttons: play and the skips together at the start, the time,
 * volume and speed at the end. Plyr pushes everything after its first item
 * away, which left play on its own with the skips beside the time. */
.gc-audio-embed--look-card .plyr__controls > .plyr__controls__item:first-child {
    margin-inline-end: 0;
}

.gc-audio-embed--look-card .plyr__controls > .plyr__time--current {
    margin-inline-start: auto;
}

/* A narrow column keeps play, progress and time; the skips go first. Pixels,
 * never rem: a threshold must not move with the theme's root font size
 * (ResponsiveThresholdUnitTest). */
@container gc-audio (max-width: 352px) {
    .gc-audio-embed .plyr__controls [data-plyr="rewind"],
    .gc-audio-embed .plyr__controls [data-plyr="fast-forward"],
    .gc-audio-embed .plyr__controls .plyr__volume input[data-plyr="volume"] {
        display: none;
    }
    .gc-audio-embed .gc-audio-embed__art {
        inline-size: 4.5rem;
    }
    /* The player takes a row of its own under the picture and the title, so
     * the timeline keeps a usable width: beside a 72px picture in a 246px
     * column it measured 13px wide (2.4.71 walk, 320 frame). Arrow keys still
     * skip with the skip buttons hidden, and the volume slider gives way to
     * the mute button. */
    .gc-audio-embed.has-art .gc-audio-embed__body {
        display: contents;
    }
    .gc-audio-embed.has-art .gc-audio-embed__player {
        grid-column: 1 / -1;
    }
    /* The timeline takes a whole row. With the volume button in the default
     * (2.4.72) the buttons beside it squeezed it back to 59px. In the card it
     * is already first (above); in the bar it stays where it is in the DOM, so
     * the rows read play, timeline, the rest, in focus order as on screen. */
    .gc-audio-embed .plyr--audio .plyr__controls {
        flex-wrap: wrap;
    }
    .gc-audio-embed .plyr__controls .plyr__progress__container {
        flex: 1 0 100%;
        margin-block: 0.25rem;
    }
    /* With the playlist's buttons the time split over two rows ("00:00" and
     * "/ 00:00", measured at 288px); the length stays in the list. */
    .gc-audio-embed .plyr__controls:has(.gc-audio-embed__ctl) .plyr__time--duration {
        display: none;
    }
    /* Two rows no longer fit a pill. */
    .gc-audio-embed--look-bar .gc-audio-embed__card {
        border-radius: 1rem;
    }
}

/* ─── A player from another site, before the press ─────────────────── */

/* An outlined button in the text colour: legible on any theme, and the
 * same weight as the text around it. A link on the page and a button in the
 * editor canvas, so the rules name neither element (2.4.71: written for the
 * link only, the canvas showed a grey browser button). !important against a
 * theme's link and button rules (Signify's link rule stacks nine :not()
 * classes, its button rule paints a red fill); a styled part still wins,
 * because the part engine re-emits under repeated hooks. */
.gc-audio-embed .gc-audio-embed__load {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    min-block-size: 2.75rem;
    padding: 0.5rem 1.125rem 0.5rem 0.875rem !important;
    border: 2px solid currentColor !important;
    border-radius: 999px;
    color: inherit !important;
    background: var(--gc-audio-load-fill, transparent) !important;
    box-shadow: none !important;
    appearance: none;
    font: inherit;
    font-weight: 600;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer;
}

.gc-audio-embed .gc-audio-embed__load:hover {
    --gc-audio-load-fill: color-mix(in srgb, currentColor 10%, transparent);
}

.gc-audio-embed .gc-audio-embed__load:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.gc-audio-embed .gc-audio-embed__load:active {
    --gc-audio-load-fill: color-mix(in srgb, currentColor 18%, transparent);
}

/* The play triangle, drawn with borders so it needs no icon file. */
.gc-audio-embed__load-icon {
    inline-size: 0;
    block-size: 0;
    border-block: 0.4375rem solid transparent;
    border-inline-start: 0.6875rem solid currentColor;
}

/* The triangle points the way play goes, which is the same in every
 * language: it must not mirror. */
[dir="rtl"] .gc-audio-embed__load-icon {
    border-inline-start: 0;
    border-inline-end: 0.6875rem solid currentColor;
}

.gc-audio-embed__frame {
    display: block;
    inline-size: 100%;
    border: 0;
    border-radius: 0.75rem;
}

/* ─── The waveform ─────────────────────────────────────────────────── */

/* The bars replace the progress line; Plyr's seek slider lies over them,
 * transparent, so a press, a drag, the arrow keys and a screen reader seek
 * as before. The muted bars are half the text colour: 3.5:1 against a white
 * page, and 5:1 against the played bars beside them (WCAG 1.4.11). */
.gc-audio-embed .has-wave .plyr__progress,
.gc-audio-embed.has-wave .plyr__progress {
    position: relative;
    block-size: 2.75rem;
    margin-inline: 0;
}

.gc-audio-embed--look-bar .has-wave .plyr__progress,
.gc-audio-embed--look-bar.has-wave .plyr__progress {
    block-size: 2rem;
}

.gc-audio-embed__wave,
.gc-audio-embed__wave svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
}

.gc-audio-embed__wave-base {
    fill: color-mix(in srgb, currentColor 50%, transparent);
}

.gc-audio-embed__wave-played {
    fill: currentColor;
}

.gc-audio-embed .has-wave .plyr__progress input[type="range"],
.gc-audio-embed.has-wave .plyr__progress input[type="range"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.gc-audio-embed .has-wave .plyr__progress__buffer,
.gc-audio-embed.has-wave .plyr__progress__buffer {
    display: none;
}

/* The slider is unseen, so its focus shows on the bars around it. */
.gc-audio-embed .has-wave .plyr__progress:has(input:focus-visible),
.gc-audio-embed.has-wave .plyr__progress:has(input:focus-visible) {
    border-radius: 2px;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ─── Listen on, and Share ─────────────────────────────────────────── */

/* The row under the player (AudioLinks): the services that also carry the
 * recording as outlined pills with their icon and name, as the references'
 * podcast pages show them (Aboard, FARFETCH, Maze), and Share at the end of
 * the row (Kajabi's card, YouTube Music). A pill is a second-rank action, so
 * its edge is a 1px line where the load button's is 2px. The line is the
 * full text colour: a lighter mix fell to 2.19:1 against the page on
 * csdevdark (grey text on black), and in the text colour it holds whatever
 * the text holds. Two class names on each rule, and !important on the
 * few properties themes paint on every link and button (Twenty Sixteen's
 * link underline is a box-shadow; Signify paints buttons red), as the load
 * button does; a styled part still wins through the part engine. */
.gc-audio-embed__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-block-start: 0.75rem;
}

.gc-audio-embed__listen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
}

.gc-audio-embed__listen-label {
    font-size: 0.875em;
}

.gc-audio-embed .gc-audio-embed__services,
.gc-audio-embed .gc-audio-embed__share-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gc-audio-embed .gc-audio-embed__services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gc-audio-embed .gc-audio-embed__services > li,
.gc-audio-embed .gc-audio-embed__share-list > li {
    margin: 0;
}

.gc-audio-embed .gc-audio-embed__share-list > li[hidden] {
    display: none !important;
}

.gc-audio-embed .gc-audio-embed__service,
.gc-audio-embed .gc-audio-embed__share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    box-sizing: border-box;
    min-block-size: 2.75rem;
    padding: 0.375rem 0.875rem 0.375rem 0.625rem !important;
    border: 1px solid currentColor !important;
    border-radius: 999px;
    color: inherit !important;
    background: var(--gc-audio-pill-fill, transparent) !important;
    box-shadow: none !important;
    font-size: 0.875em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background-color 120ms ease-out;
}

.gc-audio-embed .gc-audio-embed__service:hover,
.gc-audio-embed .gc-audio-embed__share-button:hover,
.gc-audio-embed .gc-audio-embed__share[open] > .gc-audio-embed__share-button {
    --gc-audio-pill-fill: color-mix(in srgb, currentColor 10%, transparent);
}

.gc-audio-embed .gc-audio-embed__service:active,
.gc-audio-embed .gc-audio-embed__share-button:active {
    --gc-audio-pill-fill: color-mix(in srgb, currentColor 18%, transparent);
}

.gc-audio-embed .gc-audio-embed__service:focus-visible,
.gc-audio-embed .gc-audio-embed__share-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.gc-audio-embed__icon {
    display: inline-flex;
    flex: none;
}

.gc-audio-embed__icon svg {
    display: block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: currentColor;
}

/* Share: a <details>, its marker hidden; at the end of the row when links
 * come first, at the start when it stands alone. */
.gc-audio-embed__share {
    position: relative;
}

.gc-audio-embed__listen + .gc-audio-embed__share {
    margin-inline-start: auto;
}

.gc-audio-embed .gc-audio-embed__share-button {
    list-style: none;
}

.gc-audio-embed .gc-audio-embed__share-button::-webkit-details-marker {
    display: none;
}

/* The menu opens under the button over what follows, on a solid surface of
 * its own like the bar that stays on screen: the block designer's colour,
 * else the theme's base colours, else the browser's. It lines up with the
 * button's edge nearest the middle of the block, so it never runs off it. */
.gc-audio-embed__share-panel {
    position: absolute;
    z-index: 30;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 0;
    box-sizing: border-box;
    inline-size: max-content;
    min-inline-size: 12rem;
    max-inline-size: min(18rem, calc(100vw - 2rem));
    padding: 0.375rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 0.75rem;
    color: var(--gc-audio-text, var(--wp--preset--color--contrast, CanvasText));
    background-color: var(--gc-audio-bg, var(--wp--preset--color--base, Canvas));
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}

.gc-audio-embed__listen + .gc-audio-embed__share .gc-audio-embed__share-panel {
    inset-inline: auto 0;
}

.gc-audio-embed__share.is-up .gc-audio-embed__share-panel {
    inset-block: auto calc(100% + 0.5rem);
}

.gc-audio-embed .gc-audio-embed__share-list {
    display: grid;
    gap: 0.125rem;
}

.gc-audio-embed .gc-audio-embed__share-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 2.75rem;
    margin: 0;
    padding: 0.5rem 0.75rem !important;
    border: 0 !important;
    border-radius: 0.5rem;
    color: inherit !important;
    background: var(--gc-audio-item-fill, transparent) !important;
    box-shadow: none !important;
    appearance: none;
    font: inherit;
    font-size: 0.9375em;
    letter-spacing: normal !important;
    text-align: start;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer;
}

.gc-audio-embed .gc-audio-embed__share-item:hover {
    --gc-audio-item-fill: color-mix(in srgb, currentColor 8%, transparent);
}

.gc-audio-embed .gc-audio-embed__share-item:active {
    --gc-audio-item-fill: color-mix(in srgb, currentColor 14%, transparent);
}

.gc-audio-embed .gc-audio-embed__share-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Where copying is blocked, the address shown selected for copying by hand. */
.gc-audio-embed__share-field {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 2.75rem;
    margin-block-start: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 0.375rem;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: 0.875em;
}

.gc-audio-embed__share-field:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ─── The playlist ─────────────────────────────────────────────────── */

/* The references' list (Apple Music, Spotify, Magnific): number, title over
 * the artist in a smaller line, length at the end in even figures, the row
 * playing marked by weight and a bar, not by colour alone. */
.gc-audio-embed__playlist {
    margin-block-start: 0.75rem;
}

.gc-audio-embed__tracks-meta {
    margin: 0 0 0.25rem;
    padding-inline: 0.75rem;
    font-size: 0.8125em;
}

.gc-audio-embed__tracks {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gc-audio-embed__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

/* A podcast episode's notes, folded under its row and lined up with the
 * title (past the number column and the row's padding). */
.gc-audio-embed__notes {
    /* border-box: the indent sits inside the full row, not beside it (it
     * pushed the notes 59px past the block, measured on csdev). */
    box-sizing: border-box;
    flex: 1 0 100%;
    margin: 0 0 0.375rem;
    padding-inline-start: calc(0.75rem + 3px + 2rem + 0.75rem);
    font-size: 0.875em;
}

.gc-audio-embed__notes summary {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.gc-audio-embed__notes summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gc-audio-embed__notes p {
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}

.gc-audio-embed a.gc-audio-embed__track {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding: 0.375rem 0.75rem;
    border-inline-start: 3px solid transparent;
    border-radius: 0.25rem;
    color: inherit;
    /* !important against a theme that underlines every link (Signify). */
    text-decoration: none !important;
}

.gc-audio-embed a.gc-audio-embed__track:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.gc-audio-embed a.gc-audio-embed__track:focus-visible,
.gc-audio-embed .gc-audio-embed__track-download:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.gc-audio-embed a.gc-audio-embed__track.is-current {
    border-inline-start-color: currentColor;
    background: color-mix(in srgb, currentColor 6%, transparent);
    font-weight: 600;
}

.gc-audio-embed__track-no {
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* The row playing shows the play mark in place of its number. */
.gc-audio-embed__track.is-current .gc-audio-embed__track-no {
    font-size: 0;
}

.gc-audio-embed__track.is-current .gc-audio-embed__track-no::before {
    content: "";
    display: inline-block;
    border-block: 0.375rem solid transparent;
    border-inline-start: 0.5625rem solid currentColor;
}

[dir="rtl"] .gc-audio-embed__track.is-current .gc-audio-embed__track-no::before {
    border-inline-start: 0;
    border-inline-end: 0.5625rem solid currentColor;
}

.gc-audio-embed__track-main {
    display: grid;
    min-inline-size: 0;
}

/* Titles wrap rather than cut off: at a 288px column "Episode 12: Frost" lost
 * its last word to an ellipsis. */
.gc-audio-embed__track-title,
.gc-audio-embed__track-artist {
    overflow-wrap: anywhere;
}

.gc-audio-embed__track-artist {
    font-size: 0.8125em;
    font-weight: 400;
}

.gc-audio-embed__track-length {
    font-size: 0.875em;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.gc-audio-embed .gc-audio-embed__track-download {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 0.25rem;
    color: inherit;
}

.gc-audio-embed .gc-audio-embed__track-download:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Shuffle and repeat show when they are on with a dot under the icon, so the
 * state is not carried by colour; repeat-one adds a small 1. */
.gc-audio-embed .gc-audio-embed__ctl {
    position: relative;
}

/* Plyr fills every control icon; these are drawn with lines. */
.gc-audio-embed .gc-audio-embed__ctl svg {
    fill: none;
}

.gc-audio-embed .gc-audio-embed__ctl[aria-pressed="true"]::after,
.gc-audio-embed .gc-audio-embed__ctl--repeat:not([data-repeat="off"])::after {
    content: "";
    position: absolute;
    inset-block-end: 1px;
    inset-inline-start: 50%;
    inline-size: 4px;
    block-size: 4px;
    margin-inline-start: -2px;
    border-radius: 50%;
    background: currentColor;
}

.gc-audio-embed .gc-audio-embed__ctl--repeat[data-repeat="one"]::before {
    content: "1";
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: 2px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

.gc-audio-embed .gc-audio-embed__ctl[aria-pressed="false"] svg,
.gc-audio-embed .gc-audio-embed__ctl--repeat[data-repeat="off"] svg {
    opacity: 0.7;
}

/* ─── A long list: search and "show more" ──────────────────────────── */

.gc-audio-embed__search {
    display: block;
    margin-block-end: 0.5rem;
}

.gc-audio-embed__search input {
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 0.375rem;
    color: inherit;
    background: transparent;
    font: inherit;
}

.gc-audio-embed__search input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* An outlined button in the text colour, like the load button, against a
 * theme that paints every button. */
.gc-audio-embed .gc-audio-embed__more {
    display: block;
    min-block-size: 2.75rem;
    margin: 0.5rem auto 0;
    padding: 0.5rem 1.25rem !important;
    border: 2px solid currentColor !important;
    border-radius: 999px;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    font: inherit;
    font-weight: 600;
    text-transform: none !important;
    cursor: pointer;
}

.gc-audio-embed .gc-audio-embed__more:hover {
    background: color-mix(in srgb, currentColor 10%, transparent) !important;
}

.gc-audio-embed .gc-audio-embed__more:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.gc-audio-embed .gc-audio-embed__more[hidden],
.gc-audio-embed__row[hidden] {
    display: none !important;
}

/* ─── Staying on screen while it plays ─────────────────────────────── */

/* The card or bar keeps to the bottom of the window. It needs a solid
 * surface of its own over the page: the block designer's colour, else the
 * theme's base colours, else the browser's. */
.gc-audio-embed__card.is-stuck {
    position: fixed;
    z-index: 99990;
    inset-block-end: 0.75rem;
    inset-inline: max(0.75rem, calc((100vw - 48rem) / 2));
    max-block-size: 50vh;
    overflow: auto;
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    color: var(--gc-audio-text, var(--wp--preset--color--contrast, CanvasText));
    background-color: var(--gc-audio-bg, var(--wp--preset--color--base, Canvas));
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}

/* A size container is a containing block for fixed elements, which would pin
 * the bar inside the block instead of the window. */
.gc-audio-embed.has-stuck {
    container-type: normal;
}

.gc-audio-embed__card.is-stuck .gc-audio-embed__art {
    inline-size: 3.5rem;
}

.gc-audio-embed__mark {
    block-size: 0;
}

.gc-audio-embed .gc-audio-embed__unstick {
    display: none;
}

.gc-audio-embed .gc-audio-embed__card.is-stuck .gc-audio-embed__unstick {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

.gc-audio-embed .gc-audio-embed__card.is-stuck .gc-audio-embed__unstick:hover {
    background: color-mix(in srgb, currentColor 12%, transparent) !important;
}

.gc-audio-embed .gc-audio-embed__card.is-stuck .gc-audio-embed__unstick:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.gc-audio-embed__card.is-stuck .gc-audio-embed__body {
    padding-inline-end: 1.5rem;
}

/* ─── Chapters ─────────────────────────────────────────────────────── */

.gc-audio-embed__chapters ol {
    display: grid;
    gap: 0.125rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.gc-audio-embed a.gc-audio-embed__chapter {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-inline-start: 3px solid transparent;
    border-radius: 0.25rem;
    color: inherit;
    /* !important against a theme that underlines every link: the line was
     * drawn under the time and its trailing space as well as a second time
     * under the name (measured on csdevdark, Signify, 2.4.71). The name
     * carries its own underline below; the colour stays the theme's. */
    text-decoration: none !important;
}

.gc-audio-embed a.gc-audio-embed__chapter:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.gc-audio-embed a.gc-audio-embed__chapter:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* The one playing: a bar and weight, not colour alone. */
.gc-audio-embed a.gc-audio-embed__chapter.is-current {
    border-inline-start-color: currentColor;
    font-weight: 600;
}

.gc-audio-embed__chapter-time {
    font-variant-numeric: tabular-nums;
}

/* A word boundary between the time and the chapter name. The link is a grid,
 * and whitespace between grid items is never rendered, so a screen reader
 * would read "0:00Welcome" (found on the Video block by NVDA, 2026-10-01).
 * Generated content inside the element survives; `pre` keeps it from being
 * collapsed at the end of the box. */
.gc-audio-embed__chapter-time::after {
    content: " ";
    white-space: pre;
}

/* A chapter looks like a link at rest, not only on hover (the Video walk's
 * visible-affordance finding). */
.gc-audio-embed__chapter-label {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.gc-audio-embed__caption {
    margin-block-start: 0.5rem;
    font-size: 0.875em;
}

/* A visitor who asks for less motion gets the hover fill at once. Last in
 * the sheet, so it follows every rule it gates. */
@media (prefers-reduced-motion: reduce) {
    .gc-audio-embed .gc-audio-embed__service,
    .gc-audio-embed .gc-audio-embed__share-button {
        transition: none;
    }
}