/**** AUDIO PLAYER ****/

/* The audio player is the glow player with a different top: where the video player has the video, it has a bar (the audio design, from what was the AAAS audio player), and under it the very
   same tabs.  video-player_glow.css and video-player_16x9_glow.css do the rest; this file is only what the audio player changes in them, and the bar.
   The page (Audio_Glow.cshtml) adds html.cmpl-ar-Audio when it loads, as it adds cmpl-ar-<ratio> for a video. */

/* ---- What makes the layout the audio player's ---- */

html.cmpl-ar-Audio {
    --cmpl-wide-breakpoint: 100000px;    /* never beside: the tabs are always under the bar */
    --cmpl-video-ratio: 1000;            /* (the hidden video's: with a ratio that wide the player is never narrowed to fit a short window) */
    /* The bar, with its padding (72px in every mode): the room the tabs' height leaves for it.  (updateTabsFeasibility measures the bar itself.) */
    --cmpl-audio-bar-height: calc(var(--cmpl-audio-bar-padding-top) + var(--cmpl-audio-play-size) + var(--cmpl-audio-bar-padding-bottom));
    --cmpl-tabs-min-height: 200px;       /* fewer pixels than this left for the tabs, and the player does not show them */
    --cmpl-audio-tabs-max-height: 25rem; /* the tabs are never taller than this */
    /* The tabs' height: what the window leaves under the bar, between the least that is readable and the most that is sensible. */
    --cmpl-audio-tabs-height: min(var(--cmpl-audio-tabs-max-height), max(var(--cmpl-tabs-min-height), calc(var(--cmpl-max-player-height) - var(--cmpl-audio-bar-height))));
    --cmpl-audio-text: #1b2f4e;
    --cmpl-audio-text-muted: #4a5a72;
    --cmpl-audio-fill: #ededed;
    --cmpl-audio-hairline: var(--cmpl-line);
    --cmpl-audio-surface: #fff;          /* the bar, the page behind it, the knobs */
    --cmpl-audio-on-accent: #fff;        /* the play button's icon while it is hovered or pressed */
    --cmpl-audio-track: #e3e3e3;         /* the progress and volume tracks */
    /* The tabs' tab bar: a faint gray made from the configurator's tab colors (their text in their background), so it suits a client's own colors as it does the default white. */
    --cmpl-audio-tabbar-bg: color-mix(in srgb, var(--cmpl-tab-text) 4%, var(--cmpl-tab-bg));
    /* Loading (BEFORE THE PLAYER): the skeleton is there from the start; the loader, and "Loading audio" for a screen reader, only when the load has taken a while; past the
       timeout, the bar says it could not load. */
    --cmpl-audio-loader-delay: 1s;
    --cmpl-audio-load-timeout: 10s;
    --cmpl-audio-handover: .15s;               /* the skeleton fading away as the bar's controls fade in */
    /* The bar's modes, from the bar's own width (the player sets html.cmpl-audio-bar-compact / -phone: updateBarMode; a media query cannot read these, so the player does).
       Each is on whenever the bar is narrower than its token; what each changes is at the end of this file. */
    --cmpl-audio-bar-compact-below: 900px;     /* (760px until 2026-10-19: a full bar at 760px left its progress track 78px; at 900 a compact one has 450px, and a full one gets 200px at about 900) */
    --cmpl-audio-bar-phone-below: 640px;       /* (500px until 2026-10-19: from 500 to 640 the inline progress track was only 54 to 200px wide; its own line under the bar, the phone mode, does better there) */
    /* The bar is the play button's height and its padding, the same in every mode (72px), so it never changes height (the row and the controls are held to these sizes). */
    --cmpl-audio-bar-padding-top: 12px;
    --cmpl-audio-bar-padding-bottom: 12px;
    --cmpl-audio-bar-padding-inline: 12px;     /* the bar's sides */
    --cmpl-audio-play-size: 48px;
    --cmpl-audio-button-size: 40px;            /* the other buttons in the bar */
    /* A phone's progress bar: a line along the bar's foot, inside its side padding, in the bottom padding (which is its height, and what a finger can press). */
    --cmpl-audio-strip-height: 16px;
    --cmpl-audio-strip-line: 4px;              /* the line's thickness */
    --cmpl-audio-strip-knob: 10px;             /* the knob on that line (the video's is 14px on its 6px bar: on this thin line that looked heavy; the whole strip is what a finger presses) */
    --cmpl-audio-strip-lift: 6px;              /* the line, up from the bar's bottom edge (so its knob is not cut off there) */
    /* The in-bar menu (IN-BAR MENU, the end of this file): light, not the video player's dark menus.  A tray in the bar's own gray (the play button's, --cmpl-audio-fill), lightened
       towards the bar's white, as tall as its buttons; white chips with a hairline border (--cmpl-audio-surface, --cmpl-audio-hairline), the chosen one the configurator's accent with
       white text (--cmpl-audio-chip-selected-text); it slides in a little as it opens. */
    --cmpl-audio-menu-bg: #f4f4f4;             /* the tray: the bar's gray, #ededed, lightened towards white */
    --cmpl-audio-menu-border: #e5e7eb;         /* the tray's edge, a hairline */
    --cmpl-audio-menu-hover: var(--cmpl-audio-fill); /* the X, back and arrow buttons under the pointer: the bar's gray itself */
    --cmpl-audio-menu-text: var(--cmpl-audio-text); /* the X, back and arrow icons (the bar's text) */
    --cmpl-audio-menu-text-muted: var(--cmpl-audio-text-muted); /* the title */
    --cmpl-audio-chip-bg: var(--cmpl-audio-surface);
    --cmpl-audio-chip-border: var(--cmpl-audio-menu-border); /* a hairline */
    --cmpl-audio-chip-border-hover: var(--cmpl-audio-text-muted);
    --cmpl-audio-chip-text: var(--cmpl-audio-text);
    --cmpl-audio-chip-text-muted: var(--cmpl-audio-text-muted); /* a chip's note or value ("WAV", "1.5×") and its chevron */
    --cmpl-audio-chip-selected-bg: var(--configuration_accent_color); /* the chosen chip */
    --cmpl-audio-chip-selected-text: var(--cmpl-audio-on-accent);
    --cmpl-audio-chip-box-border: var(--cmpl-audio-text-muted); /* a tick box chip's box ("Start at"), unticked */
    --cmpl-audio-chip-box-ticked: var(--configuration_accent_color); /* ... and ticked, with a white tick (--cmpl-audio-chip-selected-text) */
    --cmpl-audio-chip-box-size: 14px;
    --cmpl-audio-chip-divider: var(--cmpl-audio-menu-border); /* the hairline between a menu's groups of chips (Share: Start at / the ways to share / Embed, Cite) */
    --cmpl-audio-key-bg: var(--cmpl-audio-menu-bg); /* a key in a shortcut chip ("Space", "O"): the tray's gray, edged and lettered as the chip's text */
    --cmpl-audio-key-border: #cfd5de;
    --cmpl-audio-key-text: var(--cmpl-audio-text);
    /* The keyboard's focus ring, in the bar and in its menu: the bar's dark text color, which stands out from the white bar, the gray tray and the white chips; white inside the chosen
       chip, which is the accent.  (The bar's ring had been the accent at 60%, below the 3:1 a focus indicator needs against the bar, and it vanishes on an accent chip.) */
    --cmpl-audio-menu-focus: var(--cmpl-audio-text);
    --cmpl-audio-chip-selected-focus: var(--cmpl-audio-on-accent);
    /* The speed on the gear, when it is not 1×: a small badge at its top right corner ("1.5"), in the configurator's accent with white text. */
    --cmpl-audio-badge-bg: var(--configuration_accent_color);
    --cmpl-audio-badge-text: var(--cmpl-audio-on-accent);
    --cmpl-audio-badge-height: 16px;
    --cmpl-audio-badge-font-size: 10px;
    --cmpl-audio-badge-offset: -2px;          /* how far it stands past the button's top and right edges */
    --cmpl-audio-chip-gap: 6px;
    --cmpl-audio-chip-inner-gap: 6px;          /* between a chip's icon, label and note */
    --cmpl-audio-chip-padding: 12px;
    --cmpl-audio-chip-wrap-line: 13px;         /* a shortcut's words, when they take two lines (13px each: they fit in the tray at a phone's 36px too) */
    --cmpl-audio-menu-motion: .15s;            /* how long it takes to slide and fade in as it opens (none at all under prefers-reduced-motion) */
    --cmpl-audio-menu-rise: 16px;              /* how far it slides in from the right */
    --cmpl-audio-strip-min: 180px;             /* the least room for the choices, while a title beside them can still give way (a phone's menu has no title, and no least) */
    --cmpl-audio-strip-fade: 16px;             /* the fade at an end of the strip with more choices past it */
    --cmpl-audio-strip-arrow-size: 24px;       /* the arrow over that end (24px: the least a target may be, WCAG 2.5.8) */
    --cmpl-audio-strip-arrow-shadow: 0 1px 4px rgba(15, 23, 42, .16);
    --cmpl-audio-row-gap: 16px;                /* between the play button and the rest */
    --cmpl-audio-controls-gap: 16px;           /* between the rest */
    --cmpl-audio-controls-inset: 4px;          /* the rest's sides */
    --cmpl-audio-text-button-padding: 8px;     /* the speed and language buttons' sides */
    --cmpl-audio-button-radius: calc(var(--cmpl-audio-button-size) / 2); /* the bar's buttons' corners: round, and a pill when words make one wider (speed "1.75×") */
    --cmpl-audio-progress-inset: 0px;          /* more room either side of the progress bar, where the gaps are too small for its knob (half of it stands past each end) */
}

html.cmpl-ar-Audio.cmpl-audio-bar-compact {
    --cmpl-audio-row-gap: 12px;
    --cmpl-audio-controls-gap: 6px;
    --cmpl-audio-progress-inset: 8px;
}

/* (a phone's bar has to hold play, the skips, the time and the menu buttons in one line down to 320px) */
html.cmpl-ar-Audio.cmpl-audio-bar-phone {
    --cmpl-audio-bar-padding-bottom: var(--cmpl-audio-strip-height); /* (the progress line's room; with the smaller play button, the bar the same height) */
    --cmpl-audio-bar-padding-inline: 8px;
    --cmpl-audio-play-size: 44px;
    --cmpl-audio-button-size: 36px;
    --cmpl-audio-row-gap: 4px;
    --cmpl-audio-controls-gap: 2px;
    --cmpl-audio-controls-inset: 0px;
    --cmpl-audio-text-button-padding: 4px;
    --cmpl-audio-strip-min: 0px;
}

html.cmpl-ar-Audio body.cmpl-body,
html.cmpl-ar-Audio .cmpl-full-container {
    background-color: var(--cmpl-audio-surface);
}

html.cmpl-ar-Audio .cmpl-media-container {
    height: fit-content;
}

/* The tabs: under the bar, from edge to edge (the room a card's padding took is the tabs' own, which counts most on a phone), as high as the window leaves room for (and no higher
   than --cmpl-audio-tabs-max-height).  They are set apart from the bar by a hairline where the bar ends and by their tab bar's gray (--cmpl-audio-tabbar-bg): the white bar with
   the controls, a gray strip to move between the tabs (its white tabs on it, as the in-bar menu's white chips are on its gray tray), and the content in the tabs' own color.
   ForceFillContainer (html.cmpl-force-fill, which the AAAS configurators have, as every V1-forwarded one does) has its own rule in video-player_16x9_glow.css that makes the tabs as tall as the
   VIDEO; an audio player has none (its "video" is 1000:1, so that comes to half a pixel and the tabs collapse).  So the second selector has to be as specific as that rule. */
html.cmpl-ar-Audio .tabs-container,
html.cmpl-ar-Audio.cmpl-force-fill:not(.cmpl-wide):not(.cmpl-fullscreen) .tabs-container {
    --cmpl-tabs-height: var(--cmpl-audio-tabs-height);
    border-top: 1px solid var(--cmpl-audio-hairline);
    padding: 0;
    background-color: var(--cmpl-tab-bg);
}

html.cmpl-ar-Audio .cmpl-tabs-box {
    overflow: hidden;
    background-color: var(--cmpl-tab-bg);
}

html.cmpl-ar-Audio .cmpl-tabbar {
    background-color: var(--cmpl-audio-tabbar-bg);
}

/* With the tabs hidden, nothing but the bar. */
html.cmpl-ar-Audio.videoonly .tabs-container {
    display: none;
}

/* ---- BEFORE THE PLAYER ---- */

/* From the shell page's first paint (_Index_Glow.cshtml), in a frame that already has the player's height: the player, empty (#cmpl-audio-skeleton), over everything the page shows
   while it loads (the player's markup, then its loading layout: showLoadingLayout), until the player has loaded (loadComplete), when it fades away as the bar's controls fade in,
   each in its place.  The bar's white, never the video player's black: the play button's circle in its gray and the progress line in the track's, where they will be (a phone's
   line along the bar's foot), and, when the tabs start open, their card, drawn as the player draws its own tabs' skeleton (LOADER in video-player_glow.css).  The one loader is in
   the middle of the bar: the video player's (a ring turning in a disc, in the middle of the video), light, and the size of the play button.  Its arc is the bar's dark text, not the
   configurator's accent, which can be too light to see on white.  It comes only when the load has taken a while (html.cmpl-loader-due, --cmpl-audio-loader-delay: the skeleton
   says enough until then), as does "Loading audio" for a screen reader (#cmpl-load-status, the load's one announcement).  (Text to Speech shows its closed accordion instead:
   _TtsWrapper_Glow.cshtml.  Opened before the player has loaded, its panel has the player's markup's loader, .cmpl-audio-preloader.) */
.cmpl-audio-skeleton {
    position: fixed; /* (the whole frame: the shell page's body has no height of its own, as #prepreLoadingContainer's rule says) */
    inset: 0;
    z-index: 1; /* (over the player, which is under it already while it loads) */
    display: flex;
    flex-direction: column;
    background-color: var(--cmpl-audio-surface);
    pointer-events: none;
    transition: opacity var(--cmpl-audio-handover) ease;
}

.cmpl-audio-skeleton.is-gone {
    opacity: 0;
}

.cmpl-audio-skeleton-bar {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--cmpl-audio-row-gap);
    height: var(--cmpl-audio-bar-height);
    box-sizing: border-box;
    padding: var(--cmpl-audio-bar-padding-top) var(--cmpl-audio-bar-padding-inline) var(--cmpl-audio-bar-padding-bottom);
}

.cmpl-audio-skeleton-play {
    flex: none;
    width: var(--cmpl-audio-play-size);
    height: var(--cmpl-audio-play-size);
    border-radius: 50%;
    background-color: var(--cmpl-audio-fill);
}

.cmpl-audio-skeleton-line {
    flex: 1;
    height: 8px;
    border-radius: 2px;
    background-color: var(--cmpl-audio-track);
}

html.cmpl-audio-bar-phone .cmpl-audio-skeleton-line {
    position: absolute;
    left: var(--cmpl-audio-bar-padding-inline);
    right: var(--cmpl-audio-bar-padding-inline);
    bottom: var(--cmpl-audio-strip-lift);
    height: var(--cmpl-audio-strip-line);
    border-radius: 0;
}

/* (as the tabs are: edge to edge under the bar's hairline, their tab bar's gray with its hairline under it, then their color; the shapes, the card's, over them) */
.cmpl-audio-skeleton-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    border-top: 1px solid var(--cmpl-audio-hairline);
    background: linear-gradient(to bottom,
        var(--cmpl-audio-tabbar-bg) 0, var(--cmpl-audio-tabbar-bg) var(--cmpl-tabbar-height),
        var(--cmpl-line) var(--cmpl-tabbar-height), var(--cmpl-line) calc(var(--cmpl-tabbar-height) + 1px),
        var(--cmpl-tab-bg) calc(var(--cmpl-tabbar-height) + 1px));
}

.cmpl-audio-skeleton-card {
    flex: 1;
    background-color: transparent; /* (the shapes only: the colors are the tabs' above) */
}

/* the loader: the disc (.cmpl-loader-disc, LOADER in video-player_glow.css), in the bar's middle */
.cmpl-audio-skeleton-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

html.cmpl-loader-due .cmpl-audio-skeleton-loader {
    opacity: 1;
    transition: opacity .25s ease;
}

html.cmpl-ar-Audio .cmpl-loader-disc {
    width: var(--cmpl-audio-play-size);
    height: var(--cmpl-audio-play-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cmpl-audio-surface);
}

html.cmpl-ar-Audio .cmpl-loader-disc .spinner-cadmore {
    display: block;
    width: 42%;
    height: 42%;
    margin: 0;
    border-width: 3px;
    border-color: var(--cmpl-audio-track);
    border-top-color: var(--cmpl-audio-text);
}

/* Text to Speech's, opened before the player has loaded: the player's markup, the bar's height, the loader in its middle when the load has taken a while */
.cmpl-audio-preloader {
    position: relative;
    height: var(--cmpl-audio-bar-height);
}

html.cmpl-ar-Audio .cmpl-audio-preloader .cmpl-loader {
    animation: none;
    opacity: 0;
}

html.cmpl-ar-Audio.cmpl-loader-due .cmpl-audio-preloader .cmpl-loader {
    opacity: 1;
    transition: opacity .25s ease;
}

/* The bar's controls: not in the loading layout (under the skeleton); then fading in as the skeleton fades away. */
.cmpl-audio-row {
    transition: opacity var(--cmpl-audio-handover) ease;
}

.cmpl-full-container.is-loading .cmpl-audio-row {
    visibility: hidden;
    opacity: 0;
}

/* Should the player not load (cmplLoadFailed, _Index_Glow.cshtml): in the bar's place, what happened and a way to try again; nothing else.  Should it load after all, it shows. */
.cmpl-load-error {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: var(--cmpl-audio-bar-height);
    box-sizing: border-box;
    padding: 0 var(--cmpl-audio-bar-padding-inline);
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: var(--cmpl-audio-surface);
    color: var(--cmpl-audio-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
    font-size: 14px;
}

html.cmpl-load-failed:not(.cmpl-loaded) .cmpl-load-error {
    display: flex;
}

html.cmpl-load-failed:not(.cmpl-loaded) .cmpl-audio-skeleton,
html.cmpl-load-failed:not(.cmpl-loaded) #cmpl-main {
    visibility: hidden;
}

.cmpl-load-error-text {
    margin: 0;
}

/* (as a chip in the bar's menus: IN-BAR MENU) */
.cmpl-load-error-retry {
    flex: none;
    height: 34px;
    padding: 0 var(--cmpl-audio-chip-padding);
    border: 1px solid var(--cmpl-audio-chip-border);
    border-radius: 17px;
    background-color: var(--cmpl-audio-chip-bg);
    color: var(--cmpl-audio-chip-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cmpl-load-error-retry:hover {
    border-color: var(--cmpl-audio-chip-border-hover);
}

.cmpl-load-error-retry:focus-visible {
    outline: 2px solid var(--cmpl-audio-menu-focus);
    outline-offset: 2px;
}

/* ---- Forced 16:9 ("boxed": video-player_16x9_glow.css, FORCED 16:9) ---- */

/* The bar at the top of the frame, and the tabs filling what is under it.  When the frame is too small for the tabs they are hidden (html.videoonly), and where they were there is a caption
   region: the transcript's line for what is playing now (the player script fills #closed-captions-text as it does on the video player).  With no transcript (html.cmpl-no-captions) there is
   nothing to caption, and the bar is centered in the frame. */
html.cmpl-boxed.cmpl-ar-Audio:not(.cmpl-fullscreen) .tabs-container {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
}

html.cmpl-boxed.cmpl-ar-Audio.cmpl-no-captions.videoonly:not(.cmpl-fullscreen) .cmpl-media-container {
    justify-content: center;
}

.cmpl-audio-captions {
    display: none;
}

html.cmpl-boxed.cmpl-ar-Audio.videoonly:not(.cmpl-no-captions) .cmpl-audio-captions {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem 1rem 1.25rem;
    overflow: hidden;
    text-align: center;
}

/* (#closed-captions is the video player's overlay, placed at the bottom of the video: here it is just a line of text.) */
.cmpl-audio-captions #closed-captions {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
}

.cmpl-audio-captions #closed-captions > p {
    width: auto;
    max-width: 100%;
    padding: 0;
    background-color: transparent;
    color: var(--cmpl-audio-text);
    text-shadow: none;
    font-size: clamp(1rem, 4.5vmin, 2rem);
    line-height: 1.35;
}

/* ---- The bar ---- */

/* (nothing in it is selected as text by a drag, the volume's or the progress bar's: as the video bar's, .cmpl-controls-bar) */
.cmpl-audio-bar {
    -webkit-user-select: none;
    user-select: none;
    padding: var(--cmpl-audio-bar-padding-top) var(--cmpl-audio-bar-padding-inline) var(--cmpl-audio-bar-padding-bottom);
    background-color: var(--cmpl-audio-surface);
    color: var(--cmpl-audio-text);
}

/* The bar is #video-container, which video-player_glow.css paints with the configurator's player background (black unless a client chose another), for a video to sit on.
   The audio design is white, with dark controls on it, so this is not that color; it needs the !important the other rule has. */
html.cmpl-ar-Audio #video-container.cmpl-audio-bar {
    background-color: var(--cmpl-audio-surface) !important;
}

.cmpl-audio-row {
    display: flex;
    align-items: center;
    gap: var(--cmpl-audio-row-gap);
    width: 100%;
    height: var(--cmpl-audio-play-size);
    position: relative;
}

/* every control in the bar: one shape, round (--cmpl-audio-button-radius), and never narrower than it is high (the speed and language buttons, which show words, grow wider
   for longer ones, into a pill); play is the larger round one (below) */
.cmpl-audio-bar .control-button {
    flex-shrink: 0;
    width: var(--cmpl-audio-button-size);
    height: var(--cmpl-audio-button-size);
    border: 0;
    border-radius: var(--cmpl-audio-button-radius);
    background-color: transparent;
    color: var(--cmpl-audio-text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .5s ease-in-out, color .5s ease-in-out;
}

.cmpl-audio-bar .control-button:hover,
.cmpl-audio-bar .control-button:focus,
.cmpl-audio-bar .control-button:active {
    background-color: var(--cmpl-audio-fill) !important;
    transition: background-color .5s ease-in-out, color .5s ease-in-out;
}

/* One ring for everything keyboard-focusable in the bar: the buttons and the two knobs have their own, white with a dark halo, in video-player_glow.css (FOCUS AND MOTION), made for a
   dark video and invisible on this white bar, so their selectors are repeated here to take their place, halo and all. */
.cmpl-audio-bar :focus-visible,
.cmpl-audio-bar .control-button:focus-visible,
.cmpl-audio-bar .progress-indicator-crosshair:focus-visible,
.cmpl-audio-bar .cmpl-audio-volume-knob:focus-visible {
    outline: 2px solid var(--cmpl-audio-menu-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* play and pause: the big round button */
.cmpl-audio-bar .cmpl-audio-play {
    width: var(--cmpl-audio-play-size);
    height: var(--cmpl-audio-play-size);
    border-radius: 50%;
    background-color: var(--cmpl-audio-fill);
    color: var(--cmpl-audio-text);
    font-size: 16px;
}

.cmpl-audio-bar .cmpl-audio-play:hover,
.cmpl-audio-bar .cmpl-audio-play:focus,
.cmpl-audio-bar .cmpl-audio-play:active {
    background-color: var(--configuration_accent_color) !important;
    color: var(--cmpl-audio-on-accent);
}

/* the skip buttons: the circular arrow with the number of seconds inside it */
.cmpl-audio-bar .control-button .cmpl-skip-icon {
    font-size: 22px;
    color: var(--cmpl-audio-text-muted);
}

.cmpl-audio-bar .cmpl-skip-number {
    font-size: .45em;
}

.cmpl-audio-bar .cmpl-skip-number-wide {
    font-size: .34em;
}

/* the buttons that show words, not an icon */
.cmpl-audio-bar #playback-speed-button,
.cmpl-audio-bar #audio-languages-button {
    width: auto;
    min-width: var(--cmpl-audio-button-size);
    padding: 0 var(--cmpl-audio-text-button-padding);
    font-weight: 700; /* (a step bolder and a size larger than the bar's other words, as heavy to the eye as the icons beside them) */
    font-size: 14px;
}

.current-time,
.duration,
.cmpl-audio-time-separator {
    font-size: 12px;
    color: var(--cmpl-audio-text-muted);
    flex-shrink: 0;
}

/* The time, the progress and the length (Audio_Glow.cshtml): in a full or compact bar, as if the wrapper were not there; on a phone, one "4:12 / 15:43" (at the end of this file). */
.cmpl-audio-time {
    display: contents;
}

.cmpl-audio-time-separator {
    display: none;
}

/* ---- Progress ---- */

.cmpl-audio-progress {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline: var(--cmpl-audio-progress-inset);
}

/* (it can be dragged, with a finger too: the player script, which seeks as it moves; so no scrolling the page or selecting text from it) */
.cmpl-audio-bar .progress-bar-segments {
    margin: 0;
    height: 8px; /* (a segment's height, so the knob, at its middle, is at the line's middle) */
    cursor: pointer;
    position: relative;
    touch-action: none;
    user-select: none;
}

/* The time and chapter over the progress bar where the pointer is (showAudioScrubLabel), the video's label (.cmpl-scrub-label) without its frame.  Under the bar in a full or compact bar,
   which is at the top of the player with no room above it; above the line on a phone (below). */
.cmpl-audio-scrub {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 260;
    max-width: 260px;
    pointer-events: none;
}

.cmpl-audio-scrub.is-shown {
    display: block;
}

/* A phone's progress line is along the bar's foot, with the tabs (or nothing) under it: the label goes above it, over the controls. */
html.cmpl-audio-bar-phone .cmpl-audio-scrub {
    top: auto;
    bottom: calc(100% + 10px);
}

html.cmpl-menu-open .cmpl-audio-scrub,
html.cmpl-volume-dragging .cmpl-audio-scrub {
    display: none;
}

/* (square but for the bar's two ends, as the video player's: .progress-bar-segment, video-player_glow.css) */
.cmpl-audio-bar .progress-bar-segment {
    height: 8px;
    background-color: var(--cmpl-audio-track);
}

.cmpl-audio-bar .progress-indicator {
    height: 8px;
    border-radius: 2px 0 0 2px;
    background-color: var(--configuration_accent_color);
}

.cmpl-audio-bar .progress-bar-segment-spacer {
    width: 1px;
}

/* (the knob is the video player's: the accent, 14px, video-player_glow.css) */

/* ---- Volume: a short track that opens when the pointer or focus is on the button ---- */

.cmpl-audio-volume {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* The panels button's icon: the video player's (.cmpl-icon-panel, turned and flipped the same way: arrow up while the tabs show, down while they are put away), with its panel strip
   filled in. */
.cmpl-audio-bar .cmpl-icon-panel {
    --cmpl-icon-image: url(/content/img/ico-panel-filled.svg);
}

/* The download button's icon: the video player's (.cmpl-icon-download), drawn a little bolder, to sit beside the panels button's arrow. */
.cmpl-audio-bar .cmpl-icon-download {
    --cmpl-icon-image: url(/content/img/ico-download-bold.svg);
    --cmpl-icon-ratio: 16 / 20;
}

/* The volume icon: the video player's, its waves coming and going with the volume (.cmpl-volume-icon, video-player_glow.css), in the bar's color and at its icons' size. */
.cmpl-audio-volume .cmpl-volume-icon {
    height: 14px;
    color: inherit;
}

.cmpl-audio-volume-track {
    width: 0;
    height: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: var(--cmpl-audio-track);
    cursor: pointer;
    touch-action: none; /* (dragged, with a finger too, it moves the volume, not the page: the player script) */
    transition: width .3s ease-in-out;
}

/* (open too while it is being dragged, wherever the pointer has gone: html.cmpl-volume-dragging, as the video bar's slider) */
.cmpl-audio-volume:hover .cmpl-audio-volume-track,
.cmpl-audio-volume:focus-within .cmpl-audio-volume-track,
html.cmpl-volume-dragging .cmpl-audio-volume-track {
    width: 48px;
    overflow: visible;
}

/* A touch screen's compact bar: the button is a mute button, and nothing opens on a tap (or the sticky hover a tap leaves).  The slider is still there for a keyboard (V, then the
   arrows), and opens while its knob has the keyboard's focus.  (A phone's bar has no volume at all: the phone has its own buttons.  Below, THE BAR'S MODES.) */
@media (pointer: coarse) {
    html.cmpl-audio-bar-compact .cmpl-audio-volume:hover .cmpl-audio-volume-track,
    html.cmpl-audio-bar-compact .cmpl-audio-volume:focus-within .cmpl-audio-volume-track {
        width: 0;
        overflow: hidden;
    }

    html.cmpl-audio-bar-compact .cmpl-audio-volume:has(.cmpl-audio-volume-knob:focus-visible) .cmpl-audio-volume-track {
        width: 48px;
        overflow: visible;
    }
}

.cmpl-audio-volume-fill {
    position: relative;
    width: 100%; /* the player script sets this from the volume */
    height: 100%;
    border-radius: 4px;
    background-color: var(--configuration_accent_color);
}

.cmpl-audio-volume-knob {
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    border: 1px solid var(--cmpl-audio-text-muted);
    border-radius: 50%;
    background-color: var(--cmpl-audio-surface);
}

/* ---- The controls beside play: a row, and the in-bar menu at its right when one is open (IN-BAR MENU, the end of this file) ---- */

.cmpl-audio-menus {
    position: relative; /* (a phone's progress line is placed from here: below) */
    flex: 1 1 auto;
    min-width: 0;
    height: var(--cmpl-audio-button-size);
}

#audio_main_menu {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    gap: var(--cmpl-audio-controls-gap);
    padding-inline: var(--cmpl-audio-controls-inset);
}

/* ---- The bar's modes (html.cmpl-audio-bar-compact / -phone, from the bar's width: the tokens at the top) ----
   Full: everything.  Compact: closer together (the gaps, in the tokens), and the gear (Settings: speed, language, accessibility) and the dots (More: download, share) in place
   of their own buttons (cmpl-audio-full-only / -compact-only, below).  Phone: closer still, smaller buttons, no volume on a touch screen (the phone has its own), the time
   and the length as one text, and the progress bar out of the line, as a line along the bar's foot (below), so it all keeps one line down to 320px. */

/* A phone's bar has no volume where there is a touch screen, which has its own buttons.  A mouse or keyboard has no others (V and the mute button are in the shortcuts list), so
   it keeps its volume in a narrow bar too, as the mute button (the track opens beside it on hover or focus); only where the buttons cannot fit, which is below about 420px
   (play, the skips, the time, volume, the gear, the dots and the panels button, with the track open), does it go.  (A media query cannot read the bar's own width, so it is the window's:
   the bar is as wide as the player's frame.) */
@media (pointer: coarse), (max-width: 419px) {
    html.cmpl-audio-bar-phone .cmpl-audio-volume {
        display: none;
    }
}

/* "4:12 / 15:43", as the video player's bar has it: the slash only on a phone (a screen reader has the length from #duration-SR, and neither the slash nor the times) */
html.cmpl-audio-bar-phone .cmpl-audio-time {
    display: flex;
    align-items: center;
    gap: .25em;
    flex-shrink: 0;
    white-space: nowrap;
}

html.cmpl-audio-bar-phone .cmpl-audio-time-separator {
    display: inline;
}

/* ... and the time alone when that does not fit beside the bar's buttons (the player measures it: fitAudioTime; html.cmpl-audio-time-short) */
html.cmpl-audio-bar-phone.cmpl-audio-time-short .cmpl-audio-time-separator,
html.cmpl-audio-bar-phone.cmpl-audio-time-short .cmpl-audio-bar #duration {
    display: none;
}

/* The menu buttons: one each in a full bar; the gear and the dots in a compact or phone one (Audio_Glow.cshtml). */
html:not(.cmpl-audio-bar-compact) .cmpl-audio-compact-only,
html.cmpl-audio-bar-compact .cmpl-audio-full-only {
    display: none;
}

/* A phone's progress bar: the same #progress-bar-area, taken out of the controls and laid along the bar's bottom padding, inside the bar's side padding (so the knob, centered on the
   line's ends at the start and the end, is never cut by the bar's edge).  It is still inside the controls (in .cmpl-audio-menus), so it is placed from there: left past the play
   button and the gap, and down past the half of the play button's height the controls do not take, and the bottom padding.  It stays while a menu is open (IN-BAR MENU). */
html.cmpl-audio-bar-phone .cmpl-audio-progress {
    position: absolute;
    left: calc(-1 * (var(--cmpl-audio-play-size) + var(--cmpl-audio-row-gap)));
    right: 0;
    bottom: calc(-1 * ((var(--cmpl-audio-play-size) - var(--cmpl-audio-button-size)) / 2 + var(--cmpl-audio-bar-padding-bottom)));
    height: var(--cmpl-audio-strip-height);
    margin: 0;
}

/* (the whole strip is what a press lands on; the line is drawn at its foot) */
html.cmpl-audio-bar-phone .cmpl-audio-bar .progress-bar-segments {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding-bottom: var(--cmpl-audio-strip-lift);
}

html.cmpl-audio-bar-phone .cmpl-audio-bar .progress-bar-segment-container {
    width: 100%;
    height: var(--cmpl-audio-strip-line);
}

html.cmpl-audio-bar-phone .cmpl-audio-bar .progress-bar-segment,
html.cmpl-audio-bar-phone .cmpl-audio-bar .progress-indicator {
    height: var(--cmpl-audio-strip-line);
}

html.cmpl-audio-bar-phone .cmpl-audio-bar .progress-bar-segment-fill {
    height: 100%;
}

html.cmpl-audio-bar-phone .cmpl-audio-bar .progress-indicator {
    top: auto;
    bottom: var(--cmpl-audio-strip-lift);
}

/* (the knob is the slider the keyboard and screen readers use, so it always shows, small: the line is thin) */
html.cmpl-audio-bar-phone .cmpl-audio-bar .progress-indicator-crosshair {
    display: block;
    width: var(--cmpl-audio-strip-knob);
    height: var(--cmpl-audio-strip-knob);
    top: calc(100% - var(--cmpl-audio-strip-lift) - var(--cmpl-audio-strip-line) / 2);
}

/* ---- The speed on the gear: a badge when it is not 1× (#audio-settings-speed-badge in Audio_Glow.cshtml, kept current by updateSpeedButton; hidden at 1×) ---- */
#audio-settings-button {
    position: relative;
}

.cmpl-audio-speed-badge {
    position: absolute;
    top: var(--cmpl-audio-badge-offset);
    right: var(--cmpl-audio-badge-offset);
    min-width: var(--cmpl-audio-badge-height);
    height: var(--cmpl-audio-badge-height);
    padding: 0 4px;
    border-radius: calc(var(--cmpl-audio-badge-height) / 2);
    background-color: var(--cmpl-audio-badge-bg);
    color: var(--cmpl-audio-badge-text);
    font-size: var(--cmpl-audio-badge-font-size);
    font-weight: 700;
    line-height: var(--cmpl-audio-badge-height);
    font-variant-numeric: tabular-nums;
    text-align: center;
    pointer-events: none; /* (a press on it is a press on the gear) */
}

/* ---- IN-BAR MENU (#audio-inbar-menu in Audio_Glow.cshtml; opened and filled by openInbarMenu there) ----
   While a menu is open the bar has .cmpl-audio-menu-open.  The menu takes the bar's right-hand side, only as wide as it needs (its strip of choices scrolls when they do not fit),
   as tall as the bar's buttons, so the bar never changes height; on the left stay play, the skips and the time as one "4:12 / 15:43" (on a phone, play and the progress line along
   the bar's foot).  The other controls (volume, the menu buttons, the panels button) are put away: the menu is the bar's and has nothing to do with the panels. */
.cmpl-audio-inbar {
    display: none;
}

.cmpl-audio-menu-open .cmpl-audio-inbar {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    height: var(--cmpl-audio-button-size);
    margin-left: auto;
    padding: 0 4px;
    border: 1px solid var(--cmpl-audio-menu-border);
    border-radius: calc(var(--cmpl-audio-button-size) / 2);
    background-color: var(--cmpl-audio-menu-bg);
    animation: cmpl-audio-inbar-in var(--cmpl-audio-menu-motion) ease-out;
}

@keyframes cmpl-audio-inbar-in {
    from {
        opacity: 0;
        transform: translateX(var(--cmpl-audio-menu-rise));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmpl-audio-menu-open .cmpl-audio-inbar {
        animation: none;
    }
}

/* the controls it stands in for, put away; the rest pulled to the left */
.cmpl-audio-menu-open #audio_main_menu {
    justify-content: flex-start;
}

.cmpl-audio-menu-open #audio_main_menu > .control-button:not(#rewind-button, #forward-button),
.cmpl-audio-menu-open .cmpl-audio-volume {
    display: none;
}

/* the time as one "4:12 / 15:43", as a phone's bar has it (its progress bar put away: on a phone, it is the line along the bar's foot, and stays) */
.cmpl-audio-menu-open .cmpl-audio-time {
    display: flex;
    align-items: center;
    gap: .25em;
    flex-shrink: 0;
    white-space: nowrap;
}

.cmpl-audio-menu-open .cmpl-audio-time-separator {
    display: inline;
}

html:not(.cmpl-audio-bar-phone) .cmpl-audio-menu-open .cmpl-audio-progress {
    display: none;
}

/* a phone keeps play and the progress line only (the screen reader's length stays) */
html.cmpl-audio-bar-phone .cmpl-audio-menu-open #rewind-button,
html.cmpl-audio-bar-phone .cmpl-audio-menu-open #forward-button,
html.cmpl-audio-bar-phone .cmpl-audio-menu-open .cmpl-audio-time > :not(.cmpl-audio-progress, .sr-only),
html.cmpl-audio-bar-phone .cmpl-audio-inbar-title {
    display: none;
}

/* (the choices give way first, down to --cmpl-audio-strip-min; past that, in a narrow compact bar, the title does, to an ellipsis or nothing: the menu's name is still the screen
   reader's, from its aria-label) */
.cmpl-audio-inbar-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 0 2px 0 8px;
    color: var(--cmpl-audio-menu-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* the X, and the way back out of a sub-menu (hidden until there are sub-menus) */
.cmpl-audio-inbar-button {
    flex: none;
    display: grid;
    place-items: center;
    width: calc(var(--cmpl-audio-button-size) - 8px);
    height: calc(var(--cmpl-audio-button-size) - 8px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--cmpl-audio-menu-text);
    cursor: pointer;
}

.cmpl-audio-inbar-button[hidden] {
    display: none;
}

.cmpl-audio-inbar-button:hover {
    background-color: var(--cmpl-audio-menu-hover);
}

/* The strip of choices, and the arrows over its ends (.cmpl-audio-inbar-scroller holds them).  It scrolls sideways when they do not fit, with no scrollbar (the arrows, the arrow keys,
   a swipe or a wheel move it; the choice in use is brought into the middle as it opens), snapping onto a chip, and fades, and shows an arrow, at an end with more past it
   (data-more-start / data-more-end, set by syncInbarHints).  (The mask's black and transparent are how much shows, not colors.) */
.cmpl-audio-inbar-scroller {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1000 auto; /* (it gives way long before the title does: see the title) */
    min-width: var(--cmpl-audio-strip-min);
    height: 100%;
}

.cmpl-audio-inbar-strip {
    --cmpl-audio-strip-start: #000;
    --cmpl-audio-strip-end: #000;
    position: relative; /* (the chips' offsetLeft is measured from here, to scroll the one in focus into the middle) */
    display: flex;
    align-items: center;
    gap: var(--cmpl-audio-chip-gap);
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
    margin-left: auto; /* (fewer choices than the least room: they sit at its end, by the X) */
    padding: 0 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain; /* (a swipe that reaches the end does not go on to scroll the page) */
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, var(--cmpl-audio-strip-start), #000 var(--cmpl-audio-strip-fade), #000 calc(100% - var(--cmpl-audio-strip-fade)), var(--cmpl-audio-strip-end));
    mask-image: linear-gradient(to right, var(--cmpl-audio-strip-start), #000 var(--cmpl-audio-strip-fade), #000 calc(100% - var(--cmpl-audio-strip-fade)), var(--cmpl-audio-strip-end));
}

.cmpl-audio-inbar-strip::-webkit-scrollbar {
    display: none;
}

/* the arrows: hidden until there is more that way */
.cmpl-audio-inbar-more {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: none;
    place-items: center;
    width: var(--cmpl-audio-strip-arrow-size);
    height: var(--cmpl-audio-strip-arrow-size);
    margin-top: calc(var(--cmpl-audio-strip-arrow-size) / -2);
    padding: 0;
    border: 1px solid var(--cmpl-audio-menu-border);
    border-radius: 50%;
    background-color: var(--cmpl-audio-chip-bg);
    box-shadow: var(--cmpl-audio-strip-arrow-shadow);
    color: var(--cmpl-audio-menu-text);
    font-size: 10px;
    cursor: pointer;
}

.cmpl-audio-inbar-more:hover {
    background-color: var(--cmpl-audio-menu-hover);
}

.cmpl-audio-inbar-more.is-start {
    left: 0;
}

.cmpl-audio-inbar-more.is-end {
    right: 0;
}

.cmpl-audio-inbar-strip[data-more-start] ~ .cmpl-audio-inbar-more.is-start,
.cmpl-audio-inbar-strip[data-more-end] ~ .cmpl-audio-inbar-more.is-end {
    display: grid;
}

.cmpl-audio-inbar-strip[data-more-start] {
    --cmpl-audio-strip-start: transparent;
}

.cmpl-audio-inbar-strip[data-more-end] {
    --cmpl-audio-strip-end: transparent;
}

/* A chip: a choice, a row that opens another menu, or a link (a download, a share): an icon, its label and, muted, a note ("WAV", "PDF") or the value now ("1.5×", "English"),
   and a chevron on a row that opens a menu. */
.cmpl-audio-chip {
    flex: none;
    scroll-snap-align: center;
    display: inline-flex;
    align-items: center;
    gap: var(--cmpl-audio-chip-inner-gap);
    text-decoration: none;
    max-width: 100%; /* (no chip is wider than the strip, so every one can be scrolled fully into view) */
    height: calc(var(--cmpl-audio-button-size) - 12px);
    padding: 0 var(--cmpl-audio-chip-padding);
    border: 1px solid var(--cmpl-audio-chip-border);
    border-radius: calc(var(--cmpl-audio-button-size) / 2);
    background-color: var(--cmpl-audio-chip-bg);
    color: var(--cmpl-audio-chip-text);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
}

.cmpl-audio-chip:hover {
    border-color: var(--cmpl-audio-chip-border-hover);
}

.cmpl-audio-chip > i {
    font-size: 13px;
}

/* A chip's icons are lined (inbarLineIcon in Audio_Glow.cshtml): drawn in the chip's color, 2 wide on their 24 grid. */
.cmpl-audio-line-icon {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cmpl-audio-chip-note,
.cmpl-audio-chip-value {
    color: var(--cmpl-audio-chip-text-muted);
    font-weight: 400;
}

/* A section's heading in the strip ("Translated from English"): a small muted caption before its chips, as the title is beside the strip. */
.cmpl-audio-strip-caption {
    flex: none;
    align-self: center;
    padding: 0 2px;
    color: var(--cmpl-audio-menu-text-muted);
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
}

/* A tick box chip ("Start at" 9:02): its box before the label, ticked in the accent; the rest of the label muted while it is unticked. */
.cmpl-audio-chip-box {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--cmpl-audio-chip-box-size);
    height: var(--cmpl-audio-chip-box-size);
    border: 1.5px solid var(--cmpl-audio-chip-box-border);
    border-radius: 3px;
    color: var(--cmpl-audio-chip-selected-text);
    font-size: 9px;
}

.cmpl-audio-chip[aria-checked="true"] > .cmpl-audio-chip-box {
    border-color: var(--cmpl-audio-chip-box-ticked);
    background-color: var(--cmpl-audio-chip-box-ticked);
}

.cmpl-audio-chip-tail {
    font-variant-numeric: tabular-nums;
}

.cmpl-audio-chip-tail.is-muted {
    color: var(--cmpl-audio-chip-text-muted);
}

/* the icon at a chip's end, as on the video player's menu row: the open-a-dialog box after Embed and Cite, the download arrow after a download */
.cmpl-audio-chip > .cmpl-audio-chip-trailing {
    width: 11px;
    height: 11px;
    color: var(--cmpl-audio-chip-text-muted);
}

/* the hairline between a menu's groups of chips */
.cmpl-audio-chip-divider {
    flex: none;
    align-self: center;
    width: 1px;
    height: 50%;
    background-color: var(--cmpl-audio-chip-divider);
}

/* A shortcut chip (Keyboard shortcuts, All keyboard shortcuts): its keys, then what they do.  Most are information, not buttons (.is-info): they can be reached and read, but there is
   nothing to press, so no pointer or hover. */
.cmpl-audio-chip-keys {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
}

.cmpl-audio-chip-keys kbd {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--cmpl-audio-key-border);
    border-radius: 4px;
    background-color: var(--cmpl-audio-key-bg);
    color: var(--cmpl-audio-key-text);
    font: 600 11px/16px ui-monospace, Consolas, monospace;
    text-align: center;
}

.cmpl-audio-chip-keys .cmpl-kbd-or {
    color: var(--cmpl-audio-chip-text-muted);
    font-size: 11px;
    font-weight: 400;
}

.cmpl-audio-chip.is-info {
    font-weight: 400;
    cursor: default;
}

/* A shortcut's words that do not fit beside its keys go onto a second line: the chip grows into the tray's height for them (two lines at --cmpl-audio-chip-wrap-line), and one that
   fits stays one line, as tall as the others. */
.cmpl-audio-chip.is-info {
    height: auto;
    min-height: calc(var(--cmpl-audio-button-size) - 12px);
    max-height: calc(var(--cmpl-audio-button-size) - 4px);
}

.cmpl-audio-chip.is-info .cmpl-audio-chip-label {
    min-width: 0;
    white-space: normal;
    line-height: var(--cmpl-audio-chip-wrap-line);
}

.cmpl-audio-chip.is-info:hover {
    border-color: var(--cmpl-audio-chip-border);
}

/* A touch screen has no keyboard: an Accessibility button, or a gear, that would hold only the keyboard shortcuts is put away there (cmpl-audio-keyboard-only, Audio_Glow.cshtml). */
@media (pointer: coarse) {
    .cmpl-audio-bar .cmpl-audio-keyboard-only {
        display: none;
    }
}

/* a phone's chips: closer, and a row with a value ("Speed 1.5×") as its icon and value alone (its aria-label keeps the word) */
html.cmpl-audio-bar-phone {
    --cmpl-audio-chip-padding: 10px;
    --cmpl-audio-chip-inner-gap: 5px;
}

html.cmpl-audio-bar-phone .cmpl-audio-chip.has-value .cmpl-audio-chip-label {
    display: none;
}

.cmpl-audio-chip > .cmpl-audio-chip-chevron {
    width: 12px;
    height: 12px;
    margin-right: -4px;
    color: var(--cmpl-audio-chip-text-muted);
}

.cmpl-audio-chip[aria-checked="true"] {
    border-color: var(--cmpl-audio-chip-selected-bg);
    background-color: var(--cmpl-audio-chip-selected-bg);
    color: var(--cmpl-audio-chip-selected-text);
}

/* (a note on the chosen chip, "as spoken" on the original language, is in its text color: the muted one is not readable on the accent) */
.cmpl-audio-chip[aria-checked="true"] .cmpl-audio-chip-note {
    color: var(--cmpl-audio-chip-selected-text);
}

/* The focus ring on a chip is drawn inside it, as the strip clips what stands outside it; on the chosen chip, which is the accent, it is white. */
.cmpl-audio-bar .cmpl-audio-chip:focus-visible {
    outline-offset: -4px;
}

.cmpl-audio-bar .cmpl-audio-chip[aria-checked="true"]:focus-visible {
    outline-color: var(--cmpl-audio-chip-selected-focus);
}

/* ---- Windows High Contrast (forced colors) ----
   The system swaps the colors the author chose for its own palette, and with them goes what told things apart here: the chosen chip's accent, the accent of the progress and volume
   fills, and the hairlines.  A system color keyword written here is kept as it is, so these give each its meaning back in the palette's own colors.  (The icons are the video's:
   video-player_glow.css has its own block for them.) */
@media (forced-colors: active) {
    /* progress: the track outlined, what has played in Highlight (each chapter's own fill), and the knob in Highlight with a ring of the page's color to cut it from the fill */
    .cmpl-audio-bar .progress-bar-segment {
        outline: 1px solid CanvasText;
    }

    .cmpl-audio-bar .progress-bar-segment-fill {
        background-color: Highlight;
    }

    .cmpl-audio-bar .progress-indicator-crosshair:not(:focus-visible) {
        background-color: Highlight;
        outline: 2px solid Canvas;
    }

    /* volume: the fill in Highlight; its track outlined while it is open (at no width an outline would still show as a dash); the knob keeps its own border over the fill */
    .cmpl-audio-volume-fill {
        background-color: Highlight;
    }

    .cmpl-audio-volume:hover .cmpl-audio-volume-track,
    .cmpl-audio-volume:focus-within .cmpl-audio-volume-track,
    html.cmpl-volume-dragging .cmpl-audio-volume-track {
        outline: 1px solid CanvasText;
    }

    /* the speed badge's accent is gone: an outline keeps it a badge */
    .cmpl-audio-speed-badge {
        outline: 1px solid CanvasText;
    }

    /* the focus ring is Highlight on the bar, the text color on the tray, and the text color of Highlight on the chosen chip, which is Highlight itself */
    .cmpl-audio-bar :focus-visible,
    .cmpl-audio-bar .control-button:focus-visible,
    .cmpl-audio-bar .progress-indicator-crosshair:focus-visible,
    .cmpl-audio-bar .cmpl-audio-volume-knob:focus-visible {
        outline-color: Highlight;
    }

    .cmpl-audio-bar .cmpl-audio-inbar :focus-visible {
        outline-color: CanvasText;
    }

    .cmpl-audio-bar .cmpl-audio-chip[aria-checked="true"]:focus-visible {
        outline-color: HighlightText;
    }

    /* the chosen chip: Highlight, its words and marks in HighlightText (the muted ones the chips had would be forced to the page's text color, dark on Highlight); the choice in a
       list is also underlined, as the accent is not the only sign of it there; a ticked box is the chip's colors turned about, its tick in Highlight */
    .cmpl-audio-chip[aria-checked="true"] {
        border-color: Highlight;
        background-color: Highlight;
        color: HighlightText;
    }

    .cmpl-audio-chip[aria-checked="true"] * {
        color: HighlightText;
    }

    .cmpl-audio-chip[role="radio"][aria-checked="true"] .cmpl-audio-chip-label {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .cmpl-audio-chip[aria-checked="true"] > .cmpl-audio-chip-box {
        border-color: HighlightText;
        background-color: HighlightText;
    }

    .cmpl-audio-chip[aria-checked="true"] > .cmpl-audio-chip-box > i {
        color: Highlight;
    }

    /* the hairline between a menu's groups of chips is a background */
    .cmpl-audio-chip-divider {
        background-color: CanvasText;
    }
}

/* (a touch screen's compact bar closes the volume track as above, so its outline goes too, and comes back with the keyboard's focus) */
@media (forced-colors: active) and (pointer: coarse) {
    html.cmpl-audio-bar-compact .cmpl-audio-volume:hover .cmpl-audio-volume-track,
    html.cmpl-audio-bar-compact .cmpl-audio-volume:focus-within .cmpl-audio-volume-track {
        outline: 0;
    }

    html.cmpl-audio-bar-compact .cmpl-audio-volume:has(.cmpl-audio-volume-knob:focus-visible) .cmpl-audio-volume-track {
        outline: 1px solid CanvasText;
    }
}