/* ==========================================================================
   BASE RESET
   Carried over from Tailwind v2.2.19's Preflight (modern-normalize + Tailwind's
   base layer) so the glow player no longer depends on tailwind.min.css for its
   baseline. Kept verbatim in behaviour, just expanded and grouped; do not
   "tidy" individual rules without testing the whole player.
   ========================================================================== */

/* --- Box model & borders --- */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--cmpl-reset-border);
}

/* --- Document --- */
html {
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-text-size-adjust: 100%;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.5;
}

body {
    margin: 0;
    font-family: inherit;
    line-height: inherit;
}

/* --- Text --- */
b, strong { font-weight: 600; } /* (the player's bold is 600 throughout, 2026-10-08) */
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
abbr[title] { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }
a { color: inherit; text-decoration: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; }
code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
}

/* --- Lists --- */
ol, ul { list-style: none; margin: 0; padding: 0; }

/* --- Tables --- */
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }

/* --- Forms --- */
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button, select { text-transform: none; }
button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; }
button { background-color: transparent; background-image: none; }
button, [role=button] { cursor: pointer; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
progress { vertical-align: baseline; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--cmpl-placeholder-text); }
::-moz-focus-inner { border-style: none; padding: 0; }
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

/* --- Misc --- */
hr { height: 0; color: inherit; border-top-width: 1px; }
summary { display: list-item; }
[hidden] { display: none; }

/* --- Media --- */
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
img { border-style: solid; }

/* ==========================================================================
   END BASE RESET
   ========================================================================== */

/* Font Awesome 7 makes every icon a fixed 1.25em wide by default; the icons in the player were laid out with automatic width
   (Font Awesome 5/6), so keep that. Remove this rule when the icons are redesigned. */
.fa, .fas, .far, .fa-solid, .fa-regular {
    --fa-width: auto;
}


:root {
    --primary-color: #177DA6;
    --light-mode-primary-light: #ffffff;
    --light-mode-primary-dark: #212121;
    --light-mode-secondary-dark: #3A3A3A;
    --light-mode-tertiary-dark: #6D6D6D;
    --light-mode-progress-bar-background-color: rgb(255, 255, 255, 0.4);
}


/* ==========================================================================
   DESIGN TOKENS (new design, started 2026-10-05)
   The new player design is built on these variables.  As each new component is built, its colors, radii and sizes are added here
   instead of being written into the component's rules, so the whole palette can be reviewed and changed in one place.
   (The --light-mode-* variables above and the --configuration_* variables written by the server are older and are not part of this set.)
   Values are sampled from the designer's mockups.
   ========================================================================== */
:root {
    /* palette */
    --cmpl-slate-900: #1e2938;                      /* the designer's dark slate (menus, off toggles) */
    --cmpl-white: #ffffff;

    /* controls on the video */
    --cmpl-control-text: var(--cmpl-white);
    --cmpl-title-font-size: clamp(0.875rem, calc(var(--cmpl-player-width) / 71), 1.125rem);  /* the title over the video: 14px in a small player, 18px from about 1280px wide */
    --cmpl-title-shadow: 0 1px 3px rgb(0 0 0 / 0.5);  /* keeps the title readable over a bright picture, with the scrim behind it */
    --cmpl-control-active-bg: var(--configuration_accent_color, #1371a3); /* the accent, for what is chosen in the menus (a ticked box, the speed playing) */
    /* the bar's buttons (2026-10-09, Victoria): a quiet light tint under the pointer or the keyboard, a little more while pressed; the colour is kept for a button whose menu
       is open, and is the configurator's Video focus colour (blank: the accent, Index_Glow.cshtml) */
    --cmpl-control-hover-bg: rgb(255 255 255 / 0.16);
    --cmpl-control-press-bg: rgb(255 255 255 / 0.24);
    --cmpl-control-open-bg: var(--configuration_video_focus_color, var(--cmpl-control-active-bg));
    --cmpl-control-motion: .15s;                    /* the tint and the colour coming and going */
    --cmpl-controls-fade-in: 0.2s;                  /* the bar and title coming up when the pointer arrives */
    --cmpl-controls-fade-out: 0.4s;                 /* ...and going away */
    --cmpl-controls-hide-delay: 0.8s;               /* how long they stay after the pointer leaves (or, while playing, after the 2 s without it moving) */

    /* popup menus (language, playback speed, accessibility, ...) */
    --cmpl-menu-bg: rgb(30 41 56 / 0.9);            /* the slate at 90%: over the video it reads dark navy, over white tabs it reads #333d49 */
    --cmpl-menu-bg-solid: #333d49;                  /* laid over the video (a tiny one): solid, what the 90% slate reads as over the picture, so nothing shows through */
    --cmpl-menu-blur: 10px;
    --cmpl-menu-check-edge: rgb(255 255 255 / 0.7);  /* a menu's checkbox: its outline (on the dark menu, ticked or not) ... */
    --cmpl-menu-check-bg: var(--cmpl-control-active-bg);  /* ... its fill when ticked (the accent) ... */
    --cmpl-menu-check-tick: var(--cmpl-white);      /* ... and its tick */
    --cmpl-menu-text: var(--cmpl-white);
    --cmpl-menu-text-muted: rgb(255 255 255 / 0.62);
    --cmpl-menu-divider: rgb(255 255 255 / 0.16);
    --cmpl-menu-row-hover-bg: rgb(255 255 255 / 0.08);
    --cmpl-menu-focus-ring: rgb(255 255 255 / 0.85);
    --cmpl-menu-radius: 10px;
    --cmpl-menu-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
    --cmpl-menu-width: 19.5rem;                     /* the wide layout: above the control bar, in line with the video's right edge; one width for every menu, the least that keeps Settings' "Playback speed  Normal" on one line (22rem before 2026-10-09) */
    --cmpl-menu-full-below-height: 240px;           /* over a video smaller than this (high) ... */
    --cmpl-menu-full-below-width: 320px;            /* ... or this (wide), a menu covers it edge to edge, solid (positionPopMenu: data-mode video) */
    --cmpl-menu-inset: 8px;                        /* over the video, in from its edges (the wide layout's menu lines up with the end of the progress bar instead: --cmpl-bar-inset; this only with no progress bar) */
    --cmpl-menu-gap: 8px;                           /* above the bar, the space between the menu and the progress bar */
    --cmpl-menu-top-clearance: 56px;                /* above the bar, how far below the top of the video the menu may reach (the title bar) */
    --cmpl-menu-float-min-room: 280px;              /* the menu floats above the bar short of the title while it could be this high there (every menu but Language unscrolled, Share the tallest at
                                                       268px; the room is the video's height less 136px, so with 16:9 video from about 740px wide); with less it may reach up over the title */
    --cmpl-menu-font-size: clamp(0.8125rem, calc(var(--cmpl-player-width) / 72), 1rem);  /* 13px in a small player, 16px from about 1150px wide */
    --cmpl-menu-tile-bg: rgb(255 255 255 / 0.1);
    --cmpl-menu-pop-scale: .96;                     /* the floating menu (data-mode above) opening: grows from this, out of its bottom right corner (where the buttons are) ... */
    --cmpl-menu-pop-rise: 4px;                      /* ... rising this far ... */
    --cmpl-menu-pop-duration: 150ms;                /* ... and fading in, this quickly (the edge-to-edge menu only fades, its rows rising) */
    --cmpl-menu-unpop-scale: .98;                   /* closing, it draws in to this, back into the same corner, not dropping ... */
    --cmpl-menu-unpop-duration: 100ms;              /* ... and fades out, quicker than it came */

    /* the tooltip over the video's buttons (initTooltips): white on a translucent dark, its keyboard shortcut in a key */
    --cmpl-tooltip-bg: rgb(17 24 39 / 0.88);
    --cmpl-tooltip-text: var(--cmpl-white);
    --cmpl-tooltip-radius: 3px;
    --cmpl-tooltip-key-edge: rgb(255 255 255 / 0.45);
    /* the preview over the progress bar: its frame's corners and thin light edge (its label is the tooltip's look) */
    --cmpl-scrub-radius: 8px;
    --cmpl-scrub-small-below: 300px;                /* under a video lower than this the frame is smaller (128x72, from 177x100) ... */
    --cmpl-scrub-none-below: 200px;                 /* ... and lower than this it goes: the time and chapter alone (updateBarMode) */
    --cmpl-scrub-edge: rgb(255 255 255 / 0.85);
    --cmpl-progress-end-radius: 2px;                /* the progress bar's two ends (its chapters' inner ends are square: .progress-bar-segment) */

    /* dialogs: laid over the player and its tabs */
    --cmpl-dialog-backdrop: rgb(10 18 28 / 0.55);
    --cmpl-dialog-bg: var(--cmpl-white);
    --cmpl-dialog-text: var(--cmpl-slate-900);
    --cmpl-dialog-text-muted: #5b6676;
    --cmpl-dialog-divider: var(--cmpl-line);
    --cmpl-dialog-radius: 12px;
    --cmpl-dialog-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
    --cmpl-dialog-width: 44rem;
    --cmpl-dialog-margin: clamp(10px, 4%, 48px);    /* the room left around the dialog */
    --cmpl-dialog-font-size: clamp(0.8125rem, calc(var(--cmpl-player-width) / 78), 0.9375rem);
    --cmpl-key-bg: #f3f5f8;
    --cmpl-key-border: var(--cmpl-line-strong);
    --cmpl-key-text: var(--cmpl-slate-900);

    /* the control bar: below this width of video it shows the compact set of buttons (the player sets html.cmpl-bar-compact; a media query cannot read this, so the player does) */
    --cmpl-bar-compact-below: 840px;
    /* ...and below these widths of video the bar loses, in turn: play and the skips (big buttons over the video take over), the time, the restart button.  Guesses: tune them. */
    --cmpl-bar-overlay-below: 700px;
    --cmpl-bar-minimal-below: 460px;
    --cmpl-bar-tiny-below: 320px;
    /* the bar's buttons (html.cmpl-bar-overlay / -minimal make them smaller) */
    --cmpl-control-size: 44px;
    /* ...and the highlight a button shows when pressed, hovered, focused or open: a rounded square inside it (the mockups: 40px with 6px corners in the 44px button) */
    --cmpl-control-highlight-inset: 2px;
    --cmpl-control-highlight-radius: 6px;
    /* ...and how far in from the video's left, right and bottom edges the bar is: its progress bar, and its buttons' highlights (their transparent border lies outside it).
       Grows with the video: 8px up to a 640px video, 12px from 960px, in proportion between (10px at 800px). */
    --cmpl-bar-inset: clamp(8px, calc(var(--cmpl-video-width, 100vw) / 80), 12px);
    /* the side panel's tab bar: pills (the active one in the accent color) */
    --cmpl-tab-pad: .75rem;
    --cmpl-tab-height: 2.125rem;                    /* the tab bar's buttons (34px; 36px before 2026-10-08); the AI assistant's is a square of it */
    --cmpl-tabbar-pad-y: calc(var(--cmpl-tab-pad) - 2px); /* the tab bar's room above and below its buttons */
    --cmpl-tabbar-height: calc(var(--cmpl-tab-height) + var(--cmpl-tabbar-pad-y) * 2);
    --cmpl-tab-text: var(--configuration_tabs_text_color);
    --cmpl-tab-scrollbar: color-mix(in srgb, var(--cmpl-tab-text) 50%, var(--cmpl-tab-bg));  /* the panel's thin scrollbar thumb (on no track): half the tab's text colour, 3.2:1 on the default white (25% was 1.7:1, too faint) */
    --cmpl-tab-muted: color-mix(in srgb, var(--cmpl-tab-text) 80%, var(--cmpl-tab-bg));  /* secondary text: the tab's text colour, softened, so it keeps its contrast on whatever colours a client chose (#6b7280 did not on a grey or a dark tab) */
    /* the player's two line colours (fixed: not the configurator's tab border colour, 2026-10-08): strong for the outline of anything pressed or typed in, and of a panel
       floating over others; the other for dividers and edges */
    --cmpl-line-strong: #C3CCD6;
    --cmpl-input-line: color-mix(in srgb, var(--cmpl-tab-text) 55%, var(--cmpl-tab-bg)); /* the outline of a text box: 3:1 against the panel (a box's edge is how it is found), whatever colours the client chose */
    --cmpl-line: #E5E7EB;
    --cmpl-tab-bg: var(--configuration_tabs_background_color);
    --cmpl-tab-active-bg: var(--configuration_accent_color);
    --cmpl-accent-text: color-mix(in srgb, var(--cmpl-tab-active-bg) 78%, var(--cmpl-tab-text)); /* the accent as small text on the tinted rows (the current chapter, paragraph, chat message), where the accent itself falls under 4.5:1 (4.2:1 on the 7.5% tint with the default accent): a little of the tab's text colour in it */
    --cmpl-tab-active-text: #fff;
    --cmpl-tab-radius: 999px;
    --cmpl-tabbar-radius: 6px;                      /* the tab bar's buttons: the tabs, the AI assistant and More (2026-10-08; the other pills keep --cmpl-tab-radius) */
    --cmpl-tabmore-radius: .75rem;
    /* the Contents tab */
    --cmpl-ch-time-col: 3.5rem;
    --cmpl-ch-time-gap: .5rem;                      /* between a chapter's or a paragraph's time and its title or text (one value, so the two line up) */
    --cmpl-current-tint: color-mix(in srgb, var(--cmpl-tab-active-bg) 7.5%, transparent);   /* the current chapter, paragraph, chat message ... */
    --cmpl-highlight-tint: color-mix(in srgb, var(--cmpl-tab-active-bg) 25%, transparent);  /* ... and the phrase being said in the transcript */
    --cmpl-row-hover: color-mix(in srgb, var(--cmpl-tab-text) 4%, transparent);              /* a row under the pointer (a chapter) */
    --cmpl-quiet-hover: color-mix(in srgb, var(--cmpl-tab-text) 8%, transparent);            /* a quiet button under the pointer (Expand all): its text, now the full colour, stays well clear of AA on it */
    --cmpl-tab-hover: color-mix(in srgb, var(--cmpl-tab-text) 4%, var(--cmpl-tab-bg));      /* a tab bar button under the pointer: half Expand all's tint, as it has its border too; solid, as the button is */
    --cmpl-current-hover-tint: color-mix(in srgb, var(--cmpl-tab-active-bg) 12%, transparent); /* ... the current one */
    --cmpl-note-bg: color-mix(in srgb, var(--cmpl-tab-text) 6%, var(--cmpl-tab-bg));         /* a soft grey box for text that is about the transcript, not part of it (a chapter's description at the top of its transcript); a little of the tab's text colour, so it is a soft grey on white and a lighter shade on a dark tab */
    --cmpl-lead-lines: 2;                           /* how many lines of that description show before See more */
    --cmpl-highlight-fade: .25s;                    /* the tint moving from one phrase to the next */
    --cmpl-chapter-motion: .2s;                     /* a chapter's transcript opening or closing (and its arrow turning) */
    --cmpl-volume-motion: .32s;                     /* the volume icon: a wave or the cross fading and growing in or out (.cmpl-volume-icon) ... */
    --cmpl-volume-ease: cubic-bezier(.33, 1, .68, 1);  /* ... quick to start and settling gently (an ease-out) ... */
    --cmpl-volume-stagger: .06s;                    /* ... and the wait between one wave and the next */
    --cmpl-pinned-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.14);  /* under a chapter heading pinned to the top of the panel, its transcript scrolling beneath */
    --cmpl-highlight-weight: .4px;                  /* how much heavier the phrase being said looks (a text shadow, no offset, this much blur: more than about .6px starts to look soft) */
    --cmpl-segment-pad: 3px;                       /* the room each phrase's tint has beyond its text, either side (given back by a negative margin: the text never moves) */
    --cmpl-tabmore-shadow: 0 10px 25px -5px rgb(0 0 0 / .2), 0 4px 10px -4px rgb(0 0 0 / .1);
    /* the Chat tab: message cards on a faint wash of the tab's text colour, all mixed from the tab's own colours so a client's dark or coloured tab keeps the look */
    --cmpl-chat-canvas: color-mix(in srgb, var(--cmpl-tab-text) 4%, var(--cmpl-tab-bg));
    --cmpl-chat-quote-bg: color-mix(in srgb, var(--cmpl-tab-text) 6%, var(--cmpl-tab-bg));        /* the line a reply quotes */
    --cmpl-chat-quote-hover: color-mix(in srgb, var(--cmpl-tab-text) 10%, var(--cmpl-tab-bg));
    --cmpl-chat-avatar-bg: color-mix(in srgb, var(--cmpl-tab-text) 10%, var(--cmpl-tab-bg));     /* initials, when there is no role badge */
    --cmpl-chat-flash: color-mix(in srgb, var(--cmpl-tab-active-bg) 14%, var(--cmpl-tab-bg));     /* the message a quote went to, for a moment */
    --cmpl-chat-card-shadow: 0 1px 2px rgb(0 0 0 / .10), 0 0 1px rgb(0 0 0 / .12);
    --cmpl-chat-card-hover-shadow: 0 2px 6px rgb(0 0 0 / .12), 0 0 1px rgb(0 0 0 / .14);
    /* the big transport buttons over the video in a narrow bar */
    --cmpl-center-background: rgb(0 0 0 / .45);
    --cmpl-center-text: #fff;
    --cmpl-center-main-size: clamp(2.75rem, calc(var(--cmpl-video-width) * .14), 4.5rem); /* grows with the video; the rest are proportions of it */
    --cmpl-center-side-size: calc(var(--cmpl-center-main-size) * .72);
    --cmpl-center-small-size: calc(var(--cmpl-center-main-size) * .55);
    --cmpl-center-gap: calc(var(--cmpl-center-main-size) * .28);
    --cmpl-center-fade: .25s;
    --cmpl-big-play-size: clamp(3.5rem, calc(var(--cmpl-video-width, 100vw) * .15), 8rem); /* the big play button before the first play: 8rem on a desktop-sized video (about 850px wide and up), smaller with a smaller video, never under 3.5rem */

    /* buttons and code in dialogs */
    --cmpl-button-bg: var(--configuration_accent_color, #1371a3);
    --cmpl-button-hover-bg: #0f5f8a;
    --cmpl-button-text: var(--cmpl-white);
    --cmpl-code-bg: #f3f5f8;
    --cmpl-code-text: var(--cmpl-slate-900);

    /* colours and shadows of the older rules: gathered here (2026-10-07) from the rules that wrote them in place; every value is the one the rule had */
    --cmpl-reset-border: var(--cmpl-line);          /* the reset's default border colour */
    --cmpl-placeholder-text: #9ca3af;
    /* The scrims behind the bar and the title (2026-10-09, Victoria: they were too big and too dark; the bar's ran the video's whole height): only as far as the bar and the
       title reach, then gone over --cmpl-scrim-fade in eased steps (no edge to see), and light: --cmpl-scrim-strength, below.  The holds follow the bar's size (inset,
       button size, the progress bar and its knob) and the title's. */
    --cmpl-scrim-strength: 0.45; /* (Victoria, 2026-10-09, for a subtler scrim: white over a pure white picture is then 3.8:1, above the 3:1 icons need but under the 4.5:1 of
                                    small text, the time and the title, on that worst case; 0.55 met it everywhere, and was found too heavy) */
    /* ... and, if wanted, a light veil on the whole picture under them, the bands lightened to match, so veil and band together are --cmpl-scrim-strength behind the
       controls and the title (two layers of black: 1 - (1 - veil)(1 - band)).  None (2026-10-09): 15% was tried, and blended the bands in, but darkened the whole picture
       every time the controls came up (every move of the mouse); the picture is left clear. */
    --cmpl-scrim-floor: 0;
    --cmpl-scrim-band: calc((var(--cmpl-scrim-strength) - var(--cmpl-scrim-floor)) / (1 - var(--cmpl-scrim-floor)));
    --cmpl-scrim-veil: rgb(0 0 0 / var(--cmpl-scrim-floor));
    --cmpl-control-text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);   /* the bar's words (the time, the speed, the language): crisp edges over a bright picture */
    /* the fade: short, so little of the picture is touched (subtle comes from less area, not a longer fade: 18% of the video's height, up to 110px, was tried and was
       heavier; 58px before that) */
    --cmpl-scrim-fade: 40px;
    --cmpl-scrim-controls-hold: calc(var(--cmpl-bar-inset) - var(--cmpl-control-highlight-inset) + var(--cmpl-control-size) + 22px); /* to just above the progress bar's knob */
    --cmpl-scrim-title-hold: calc(var(--cmpl-bar-inset) + var(--cmpl-title-font-size) * 1.15 + 4px);                               /* to just below the title's line */
    /* the fade's steps: easing off the dark gently, then on out to nothing (a share of the strength at a share of the fade) */
    --cmpl-scrim-controls: linear-gradient(to top,
        rgb(0 0 0 / var(--cmpl-scrim-band)) 0,
        rgb(0 0 0 / var(--cmpl-scrim-band)) var(--cmpl-scrim-controls-hold),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .92)) calc(var(--cmpl-scrim-controls-hold) + var(--cmpl-scrim-fade) * .15),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .74)) calc(var(--cmpl-scrim-controls-hold) + var(--cmpl-scrim-fade) * .32),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .5)) calc(var(--cmpl-scrim-controls-hold) + var(--cmpl-scrim-fade) * .5),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .26)) calc(var(--cmpl-scrim-controls-hold) + var(--cmpl-scrim-fade) * .68),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .09)) calc(var(--cmpl-scrim-controls-hold) + var(--cmpl-scrim-fade) * .85),
        rgb(0 0 0 / 0) calc(var(--cmpl-scrim-controls-hold) + var(--cmpl-scrim-fade)));  /* under the control bar */
    --cmpl-scrim-controls-mobile: #00000099;        /* ... in the narrowest player, where it is flat */
    --cmpl-scrim-title: linear-gradient(to bottom,
        rgb(0 0 0 / var(--cmpl-scrim-band)) 0,
        rgb(0 0 0 / var(--cmpl-scrim-band)) var(--cmpl-scrim-title-hold),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .92)) calc(var(--cmpl-scrim-title-hold) + var(--cmpl-scrim-fade) * .15),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .74)) calc(var(--cmpl-scrim-title-hold) + var(--cmpl-scrim-fade) * .32),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .5)) calc(var(--cmpl-scrim-title-hold) + var(--cmpl-scrim-fade) * .5),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .26)) calc(var(--cmpl-scrim-title-hold) + var(--cmpl-scrim-fade) * .68),
        rgb(0 0 0 / calc(var(--cmpl-scrim-band) * .09)) calc(var(--cmpl-scrim-title-hold) + var(--cmpl-scrim-fade) * .85),
        rgb(0 0 0 / 0) calc(var(--cmpl-scrim-title-hold) + var(--cmpl-scrim-fade)));  /* behind the title, from the top of the video (the mockups: no box) */
    --cmpl-scrim-dim: rgba(0, 0, 0, 0.4);           /* the big play buttons, the transcript editor's veil */
    --cmpl-scrim-loading: rgba(0, 0, 0, 0.7);
    --cmpl-scrim-shutdown: rgba(255, 255, 255, 0.75);
    --cmpl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --cmpl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* the time jump box: dark and see-through on the picture, like the bar's other controls (2026-10-12: was a white box, wider than the time) */
    --cmpl-time-jump-gap: 4px;                      /* from the volume, the time and its box alike */
    --cmpl-field-bg: rgb(0 0 0 / 0.35);
    --cmpl-field-border: rgb(255 255 255 / 0.45);
    --cmpl-field-ring: 0 0 0 2px rgb(255 255 255 / 0.18);
    --cmpl-field-focus-border: #ffffff;
    --cmpl-field-selection: rgb(255 255 255 / 0.35);
    --cmpl-field-invalid-border: #ff8a80;           /* not a time (yet) */
    --cmpl-field-invalid-ring: 0 0 0 2px rgb(255 99 71 / 0.3);
    --cmpl-spinner-track: #edf2f7;
    /* the video player's loader (LOADER): a faint white ring, an arc of the accent turning on it, after a moment */
    --cmpl-loader-track: rgb(255 255 255 / 0.3);
    --cmpl-loader-arc: var(--configuration_accent_color, var(--primary-color));
    --cmpl-loader-delay: .3s;
    --cmpl-stage-fade: .3s;                         /* the fades between the loading stages: the layout over the poster, the loader and skeleton going */
    --cmpl-skeleton: color-mix(in srgb, var(--cmpl-tab-text) 9%, var(--cmpl-tab-bg));  /* the faint shapes standing for the tabs while the player loads (and the assistant's answer while it thinks) */
    --cmpl-skeleton-shine: color-mix(in srgb, var(--cmpl-tab-text) 3%, var(--cmpl-tab-bg)); /* ... the lighter shine passing along the assistant's */
    --cmpl-hover-tint: rgb(0, 0, 0, 0.10);
    --cmpl-editor-border: var(--cmpl-line);         /* the transcript editor's start box */
    --cmpl-editor-button-bg: #00A7E1;
    --cmpl-alert-info-bg: #cff4fc;
    --cmpl-alert-info-border: #b6effb;
    --cmpl-interactive-bg: rgba(32, 32, 32, 0.8);   /* interactives_glow.css: the lower and left thirds */
    --cmpl-interactive-hotspot-hover: rgba(0, 0, 0, 0.1);

    /* related content: the grid of links over the video */
    --cmpl-related-bg: rgb(0 0 0 / 0.72);
    --cmpl-related-tile-bg: rgb(255 255 255 / 0.1);
    --cmpl-related-tile-hover-bg: rgb(255 255 255 / 0.18);
    --cmpl-related-text: var(--cmpl-white);
    --cmpl-related-scrim: linear-gradient(0deg, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0) 100%);
    --cmpl-related-radius: 6px;
    --cmpl-related-gap: 0.5rem;

    /* keyboard focus on the video, its controls and the menus laid over it: a ring that shows on dark and on light */
    --cmpl-focus-ring: #ffffff;
    --cmpl-focus-halo: rgb(0 0 0 / 0.6);
    --cmpl-overview-related-tile-bg: color-mix(in srgb, var(--cmpl-tab-text) 8%, transparent);  /* a picture-less item, and a picture while it loads, in the Overview tab */
    --cmpl-overview-avatar-bg: color-mix(in srgb, var(--cmpl-tab-active-bg) 10%, var(--cmpl-tab-bg));   /* a contributor card's initials */
    --cmpl-overview-term-bg: color-mix(in srgb, var(--cmpl-tab-active-bg) 8%, var(--cmpl-tab-bg));      /* a term list's chips */
    --cmpl-overview-term-border: color-mix(in srgb, var(--cmpl-tab-active-bg) 18%, var(--cmpl-tab-bg));
    --cmpl-overview-tag-fill-bg: color-mix(in srgb, var(--cmpl-tab-active-bg) 16%, var(--cmpl-tab-bg));   /* filled tags (a list's, a relationship's) */
    --cmpl-overview-panel-edge: color-mix(in srgb, var(--cmpl-tab-text) 18%, var(--cmpl-tab-bg));        /* a Bordered panel, a disclosure's rule */
    --cmpl-overview-highlight-bg: color-mix(in srgb, var(--cmpl-tab-active-bg) 7%, var(--cmpl-tab-bg));  /* a Highlighted panel and the Takeaways card: the pale card */
    --cmpl-overview-highlight-edge: color-mix(in srgb, var(--cmpl-tab-active-bg) 16%, var(--cmpl-tab-bg));

    /* captions: the three looks, the one in use (set by html.cmpl-caption-style-*), and the size */
    --cmpl-caption-boxed-bg: rgb(0 0 0 / 0.7);
    --cmpl-caption-boxed-text: var(--light-mode-primary-light);
    --cmpl-caption-boxed-shadow: none;
    --cmpl-caption-high-bg: #000000;
    --cmpl-caption-high-text: #ffffff;
    --cmpl-caption-high-shadow: none;
    --cmpl-caption-outline-bg: rgb(0 0 0 / 0.1);
    --cmpl-caption-outline-text: #ffffff;
    --cmpl-caption-outline-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 5px #000;
    --cmpl-caption-bg: var(--cmpl-caption-boxed-bg);
    --cmpl-caption-text: var(--cmpl-caption-boxed-text);
    --cmpl-caption-shadow: var(--cmpl-caption-boxed-shadow);
    --cmpl-caption-scale: 1;                        /* the visitor's size choice (html.cmpl-caption-size-*) */
    --cmpl-caption-font-size: calc(clamp(13px, var(--cmpl-video-width) / var(--cmpl-video-ratio) * 0.045, 48px) * var(--cmpl-caption-scale));  /* 4.5% of the video's height, never under 13px */
}

html.cmpl-caption-size-small { --cmpl-caption-scale: 0.8; }
html.cmpl-caption-size-large { --cmpl-caption-scale: 1.25; }
html.cmpl-caption-size-xlarge { --cmpl-caption-scale: 1.6; }
html.cmpl-caption-size-maximum { --cmpl-caption-scale: 2; }

html.cmpl-caption-style-high {
    --cmpl-caption-bg: var(--cmpl-caption-high-bg);
    --cmpl-caption-text: var(--cmpl-caption-high-text);
    --cmpl-caption-shadow: var(--cmpl-caption-high-shadow);
}

html.cmpl-caption-style-outline {
    --cmpl-caption-bg: var(--cmpl-caption-outline-bg);
    --cmpl-caption-text: var(--cmpl-caption-outline-text);
    --cmpl-caption-shadow: var(--cmpl-caption-outline-shadow);
}


/* Only in real fullscreen does the video fill the viewport; otherwise it stays 16:9 at the width of the iframe (video-js.css).
   Fullscreen is html.cmpl-fullscreen; the panels showing or not is html.videoonly (not showing), and wide or not is html.cmpl-wide.  One fullscreen button,
   and the panels button changes the rest, so there are no further fullscreen classes. */
html.cmpl-fullscreen.videoonly .video-js.vjs-fluid, html.cmpl-fullscreen.videoonly .video-js.vjs-16-9, html.cmpl-fullscreen.videoonly .video-js.vjs-4-3,
html.cmpl-fullscreen:where(.cmpl-wide:not(.videoonly)) .video-js.vjs-fluid, html.cmpl-fullscreen:where(.cmpl-wide:not(.videoonly)) .video-js.vjs-16-9, html.cmpl-fullscreen:where(.cmpl-wide:not(.videoonly)) .video-js.vjs-4-3 {
    padding-top: unset !important;
    height: 100vh !important;
}

html.cmpl-fullscreen #closed-captions > p {
    font-size: calc(4vmin * var(--cmpl-caption-scale)) !important;
}

.vjs-text-track-display {
    display: none;
}

/* the note above the transcript (a disclaimer) */
.cmpl-transcript-disclaimer {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--cmpl-alert-info-border);
    border-radius: 0.25rem;
    background-color: var(--cmpl-alert-info-bg);
}

/* with a title, a second scrim from the top of the video behind it */
.cmpl-control-overlay:has(.cmpl-title-container) {
    background: var(--cmpl-scrim-title), var(--cmpl-scrim-controls) var(--cmpl-scrim-veil);
}

/* (the narrowest player keeps its flat scrim, see "mobile" below) */
@media (max-width: 414px) {
    .cmpl-control-overlay,
    .cmpl-control-overlay:has(.cmpl-title-container) {
        background: var(--cmpl-scrim-controls-mobile);
    }
}


.vjs-big-play-button {
    display: none !important;
}

.video-js .c-big-play-button {
    font-size: 3em;
    line-height: 1.5em;
    height: 1.63332em;
    width: 3em;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    border-radius: 0.3em;
    transition: opacity 0.4s, background-color 0.4s; /* not its size: it follows the video's width at once, and a hidden tab would leave it stuck part way */
}

    .video-js:hover .c-big-play-button,
    .video-js .c-big-play-button:focus {
        transition: none;
    }

.c-big-play-button {
    position: absolute;
    top: calc(50% - var(--cmpl-big-play-size) / 2) !important;
    left: calc(50% - var(--cmpl-big-play-size) / 2) !important;
    height: var(--cmpl-big-play-size) !important;
    width: var(--cmpl-big-play-size) !important;
    background-color: var(--cmpl-scrim-dim) !important;
    border: none !important;
    border-radius: 50% !important;
    transition: background-color 0.2s;
    z-index: 100;
}

.cmpl-player-background {
    background-color: rgba(var(--configuration_player_background_color)) !important;
}

.cmpl-thumb-Wrapper {
    background-color: rgba(var(--configuration_player_background_color)) !important;
}

.c-big-play-button:hover {
    background-color: var(--configuration_accent_color) !important;
    transition: background-color 0.2s;
}

.c-big-play-button:focus {
    background-color: var(--configuration_accent_color) !important;
    transition: background-color 0.2s;
}

/* the play icon, in proportion to the button (the proportions of the 43.41x48px icon at 39px, 48px in the 128px button it was drawn for: a little right of centre, as a play triangle looks centred) */
.c-big-play-button:before {
    background-image: url(/content/img/ico-c-play.svg) !important;
    background-size: 100% 100%;
    display: inline-block;
    width: 33.9%;
    height: 37.5%;
    content: "";
    position: absolute;
    top: 30.5%;
    left: 37.5%;
}

.c-big-play-button .vjs-control-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


#video-container {
    background-color: rgba(var(--configuration_player_background_color)) !important;
}

    #video-container video:not(#ad-container video) {
        z-index: 0 !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the element (the <video> inside video.js's box, which is positioned absolutely: its box has a known size) */
    }

    /* video.js's own box (.video-js, position: relative) is NOT centred with top: 50% and a transform.  A percentage top is only honoured when the container's
       height is definite; when it comes from its content (the narrow layout) the percentage is ignored but the transform's -50% is not, and the video slides up
       by half its height, leaving the bottom half of the player black.  (That was the old player's "50% of the screen" bug, cured there by accident with position: fixed
       on some containers.)  Outside fullscreen the container is exactly the size of the video, so nothing needs centring; in fullscreen it can be taller, and it
       is centred with flex instead (below). */
    #video-container .video-js {
        z-index: 0 !important;
    }

    html.cmpl-fullscreen #video-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    html.cmpl-fullscreen #video-container .video-js {
        flex: none;
    }

    /* The bar and title: up while the pointer is over the video (mousehovered: while paused for as long as it stays, while playing until it has not moved for 2 s; see hoverControls
       in CMPL_Transcript_Glow.js), or a menu, focus, touch or the related content holds them.  They come up quickly and go away a moment later, so a pointer passing out and back in
       (or between the buttons) does not make them flicker. */
    #video-container .video-control-overlay {
        opacity: 0;
        transition: opacity var(--cmpl-controls-fade-out) ease-in var(--cmpl-controls-hide-delay);
    }

        #video-container .video-control-overlay.mousehovered,
        #video-container .video-control-overlay.hovered,
        #video-container .video-control-overlay.force_hovered,
        #video-container .video-control-overlay.touchpause,
        #video-container .video-control-overlay.focused {
            opacity: 1;
            transition: opacity var(--cmpl-controls-fade-in) ease-out;
        }

.progress-bar {
    background-color: var(--light-mode-progress-bar-background-color);
    height: 6px;
    cursor: pointer;
    position: relative;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 12px;
    position: relative;
}

.progress-bar-segments {
    background-color: unset;
    height: 6px;
    cursor: pointer;
    position: relative;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 12px;
    position: relative;
}


/* Square, but for the bar's two ends: the first chapter's start and the last one's end are rounded (one segment, for a media with no chapters, has both), so the bar reads as one
   line cut into chapters, not a row of separate pills. */
.progress-bar-segment {
    background-color: var(--light-mode-progress-bar-background-color);
    height: 6px;
    transform: scaleY(1);
    transition: transform 0.2s ease;
    position: relative;
    border-radius: 0;
    overflow: hidden; /* (its fill, .progress-bar-segment-fill, keeps to its shape) */
}

.progress-bar-segment:first-child {
    border-top-left-radius: var(--cmpl-progress-end-radius);
    border-bottom-left-radius: var(--cmpl-progress-end-radius);
}

.progress-bar-segment:last-child {
    border-top-right-radius: var(--cmpl-progress-end-radius);
    border-bottom-right-radius: var(--cmpl-progress-end-radius);
}

    .progress-bar-segment:hover {
        transform: scaleY(1.5);
        transition: transform 0.2s ease;
        position: relative;
    }

/* the gap between two chapters (1px in the audio bar: audio-player_glow.css) */
.progress-bar-segment-spacer {
    width: 2px;
}

/* While a menu is open (html.cmpl-menu-open, openPopMenu) the progress bar under the way to it stays still: no chapter growing, no preview over the menu (the script does not show
   one either: showScrubberImage), and a click on it only closes the menu.  Likewise while the volume slider is being dragged (html.cmpl-volume-dragging), as the pointer
   may pass over it. */
html.cmpl-menu-open .progress-bar-segment:hover,
html.cmpl-volume-dragging .progress-bar-segment:hover {
    transform: none;
}

html.cmpl-menu-open #scrubber-container,
html.cmpl-volume-dragging #scrubber-container {
    display: none !important;
}

/* What has played: each segment's own fill (paintPlayedSegments), so it keeps the gaps between the chapters and grows with its segment under the pointer.  The old single
   bar over them all is kept, unseen, as the knob is placed by its width. */
.progress-bar-segment-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    border-radius: 0; /* (square, as a segment's inner ends are; at the bar's two ends, its segment's rounding clips it) */
    background-color: var(--configuration_accent_color);
    pointer-events: none;
}

.progress-indicator {
    visibility: hidden;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

/* ---- TOOLTIP: the video's buttons' names, and their keyboard shortcuts (initTooltips places it, kept inside the video) ---- */
.cmpl-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .3em .55em;
    border-radius: var(--cmpl-tooltip-radius);
    background-color: var(--cmpl-tooltip-bg);
    color: var(--cmpl-tooltip-text);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}

.cmpl-tooltip.is-shown {
    opacity: 1;
}

.cmpl-tooltip-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 .35em;
    border: 1px solid var(--cmpl-tooltip-key-edge);
    border-radius: var(--cmpl-tooltip-radius);
    font-family: inherit;
    font-size: .8em;
    font-weight: 600;
    line-height: 1;
}

.cmpl-tooltip-key[hidden] {
    display: none;
}

/* Where the mouse is over the part not yet played (as BBC iPlayer): a thin line in the accent, as tall as a segment under the pointer, under the knob.  Placed and shown by
   showProgressHoverLine; not with a menu open or the volume being dragged, as the preview is not. */
.cmpl-progress-hover-line {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 9px; /* (a segment's 6px, grown by half under the pointer: .progress-bar-segment:hover) */
    border-radius: 1px;
    background-color: var(--configuration_accent_color);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cmpl-progress-hover-line.is-shown {
    display: block;
}

html.cmpl-menu-open .cmpl-progress-hover-line,
html.cmpl-volume-dragging .cmpl-progress-hover-line {
    display: none;
}

/* the knob: the accent, centred on the playing point (its left is the point as a share of the bar, updatePlayBackPercentage) (16px and white, its left edge 4px before
   the point and a step behind it, before 2026-10-09) */
.progress-indicator-crosshair {
    height: 14px;
    width: 14px;
    background-color: var(--configuration_accent_color);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0;
}

/* ---- The preview over the progress bar (showScrubberImage places it, centred on the mouse within the bar's ends): the frame, rounded, with a thin light edge, and
   under it the time and its chapter in a label like the tooltip's (the time bolder). ---- */
.cmpl-scrub-preview {
    position: absolute;
    bottom: 16px;
    z-index: 260;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.cmpl-scrub-preview .scrubber-image {
    box-sizing: content-box;
    border: 1.5px solid var(--cmpl-scrub-edge);
    border-radius: var(--cmpl-scrub-radius);
    object-fit: cover;
}

.cmpl-scrub-label {
    max-width: 180px; /* (no wider than the frame, .scrubber-image's 177px and its edge: a long chapter ends in an ellipsis) */
    overflow: hidden;
    padding: .3em .55em;
    border-radius: var(--cmpl-tooltip-radius);
    background-color: var(--cmpl-tooltip-bg);
    color: var(--cmpl-tooltip-text);
    font-size: .8125rem;
    font-weight: 400; /* (500, the time 700, before Victoria lightened them, 2026-10-09) */
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* a lower video, less room above the bar: a smaller frame, the label no wider than it; lower still, the label alone (the script shows the frame inline: hence !important) */
html.cmpl-scrub-small .cmpl-scrub-preview .scrubber-image {
    width: 128px;
    height: 72px;
}

html.cmpl-scrub-small .cmpl-scrub-label {
    max-width: 131px;
}

html.cmpl-scrub-none .cmpl-scrub-preview .scrubber-image {
    display: none !important;
}

html.cmpl-scrub-none .cmpl-scrub-label {
    max-width: 180px;
}

.cmpl-scrub-time {
    font-weight: 600;
    font-variant-numeric: tabular-nums; /* (the digits keep still as the time changes under the mouse) */
}

.cmpl-scrub-chapter {
    margin-inline-start: .3em; /* (with the space before it: the time and the chapter apart, as the label is read) */
}

.vjs-control-bar {
    z-index: 50;
}

/* The volume slider opens above its button when the pointer is over the button's group (the video bar; the audio bar has its own, in audio-player_glow.css).
   (This used to be the .tooltip class, which also drew a tooltip of its own on every button: the buttons' title is the tooltip now.) */
.cmpl-volume-group {
    position: relative;
}

/* Hidden, it lets the pointer through (an invisible slider above the button would open itself, and catch clicks meant for the video); shown, it comes at once and goes a
   moment after the pointer leaves, so a pointer straying off its edge and back does not make it flicker.  It stays while it is being dragged (html.cmpl-volume-dragging, set
   by the drag in CMPL_Transcript_Glow.js), and while the keyboard is on its knob. */
.cmpl-volume-group .volume-container {
    --cmpl-volume-gap: 31px; /* between it and its button: the progress bar is in it */
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease .25s;
    padding: .75rem; /* (the knob, centred on the end of the fill, reaches half its 16px past either end of the bar, so it has 4px to spare at 0 and at full) */
    border-radius: var(--cmpl-control-highlight-radius); /* as the bar's buttons' highlight */
    /* the popup menus' look (.cmpl-popmenu): the translucent slate, blurring the video behind, and their shadow */
    background: var(--cmpl-menu-bg);
    -webkit-backdrop-filter: blur(var(--cmpl-menu-blur));
    backdrop-filter: blur(var(--cmpl-menu-blur));
    box-shadow: var(--cmpl-menu-shadow);
    position: absolute;
    z-index: 10; /* over the title, should the two meet on the smallest video */
    bottom: calc(var(--cmpl-control-size) + var(--cmpl-volume-gap));
    left: 50%;
    transform: translateX(-50%);
    touch-action: none; /* (a finger drags it, rather than scrolling the page) */
    cursor: pointer; /* all of it answers a press (the volume at that height), as the progress bar does */
}

/* the pointer's way between the button and the slider: an invisible bridge over the gap (and a little round the slider), part of it, so the pointer never leaves the group */
.cmpl-volume-group .volume-container::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8px;
    left: -12px;
    right: -12px;
    bottom: calc(var(--cmpl-volume-gap) * -1);
}

.volume-container > .volume-bar {
    /* 6rem, or less where the video is short: the slider stands on the bar's button and stops short of the title (2rem: its line and the space round it), so on a small video it is
       smaller, never off its top (its box is the bar's height, the container's padding, the gap and the button) */
    height: clamp(1.5rem, calc(var(--cmpl-video-width) / var(--cmpl-video-ratio) - var(--cmpl-control-size) - var(--cmpl-volume-gap) - 1.5rem - 2rem), 6rem);
    width: 8px; /* (6px before 2026-10-09) */
    background-color: var(--light-mode-progress-bar-background-color);
    position: relative;
}

.volume-bar > .volume-indicator {
    background-color: var(--configuration_accent_color);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

.volume-indicator > .volume-indicator-crosshair {
    height: 16px;
    width: 16px;
    background-color: var(--light-mode-primary-light);
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* centred on the end of the fill: where the volume is */
}

.cmpl-volume-group:hover .volume-container,
.cmpl-volume-group .volume-container:focus-within,
html.cmpl-volume-dragging .cmpl-volume-group .volume-container {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .2s ease;
}

/* the bar's words: a soft shadow under them, with the scrim (the icons need less contrast than words and have none: a mask's shadow would be masked away) */
.cmpl-controls-bar .cmpl-current-time,
.cmpl-controls-bar .cmpl-time-duration-text,
.cmpl-controls-bar .cmpl-text-trigger {
    text-shadow: var(--cmpl-control-text-shadow);
}

/* nothing in the bar is selected as text by a drag (the volume's, or a press that slides) */
.cmpl-controls-bar {
    -webkit-user-select: none;
    user-select: none;
}


.control-button {
    width: var(--cmpl-control-size);
    height: var(--cmpl-control-size);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center center;
    outline: 0;
    cursor: pointer;
    z-index: 170;
    transition: 0.2s;
}

    .control-button:hover,
    .control-button:focus,
    .control-button:active {
        background-color: var(--configuration_video_focus_color) !important;
        transition: 0.2s;
    }

/* The video bar's buttons keep their whole size to press (--cmpl-control-size), but their highlight is a smaller rounded square inside: a transparent border the background
   stops at (the padding box's corners are the border's radius less its width).  (The audio bar's buttons are round: audio-player_glow.css.) */
.cmpl-controls-bar .control-button {
    border: var(--cmpl-control-highlight-inset) solid transparent;
    border-radius: calc(var(--cmpl-control-highlight-radius) + var(--cmpl-control-highlight-inset));
    background-clip: padding-box;
    transition: background-color var(--cmpl-control-motion) ease;
}

/* ... and what the highlight shows (the time too, which is a text button like the speed): a light tint under a mouse (not after a tap: a touch screen's hover
   stays put) or the keyboard (its ring too: FOCUS RINGS), a little more while pressed, and the Video focus colour while the button's menu is open (whatever else is happening
   to it).  No colour for a mouse's focus after a click. */
.cmpl-controls-bar .control-button:hover,
.cmpl-controls-bar .control-button:focus {
    background-color: transparent !important;
}

@media (hover: hover) {
    .cmpl-controls-bar .control-button:hover {
        background-color: var(--cmpl-control-hover-bg) !important;
    }
}

.cmpl-controls-bar .control-button:focus-visible {
    background-color: var(--cmpl-control-hover-bg) !important;
}

.cmpl-controls-bar .control-button:active {
    background-color: var(--cmpl-control-press-bg) !important;
}

.cmpl-controls-bar .control-button[data-popmenu][aria-expanded="true"] { /* (as specific as the rules above, and more, so it wins over them all) */
    background-color: var(--cmpl-control-open-bg) !important;
}

/* The time when there is no time jump (the time jump controls are off): shown, not a control. */
.time-jump.is-static {
    pointer-events: none;
}

/* The time: a text button like the speed (its side padding, the bar's tint and ring), and clicked it becomes the time jump box in the same place (.cmpl-time-jump-input).
   The two share the margin so the box opens where the time was. */
.time-jump {
    margin-left: var(--cmpl-time-jump-gap);
    width: fit-content !important;
    min-width: var(--cmpl-control-size);
    padding: 0 0.5rem;
    color: var(--light-mode-primary-light);
    text-decoration: none;
}

/* The length beside the time: shown, not a control (the plain arrow, not a pointer or a text cursor: nothing here to click or select). */
.time-jump-duration {
    width: fit-content;
    height: var(--cmpl-control-size);
    cursor: default;
}

.video-controls-left > .control-button {
    margin-right: 1px;
}

.video-controls-left:last-child {
    margin-right: 0px;
}

.video-controls-right > .control-button {
    margin-left: 1px;
}


.video-controls-right:last-child {
    margin-left: 0px;
}

.vjs-icon-placeholder:before {
    top: 50%;
    transform: translateY(10%);
}

/* ---- ICONS: the designer's icons, drawn in the text colour ----
   An icon is its SVG file used as a mask over the text colour (currentColor), so it takes the colour of whatever it is in, and a hover or a client colour needs no second
   file.  Each says which file it is and the file's proportions; its height is set where it is used (16px in the bar, from the font size over the video).  The play triangle
   sits a little right of centre, as a play triangle looks centred (as the big play button's does: 13% of its width). */
.cmpl-icon {
    display: block;
    flex: none;
    height: 16px;
    aspect-ratio: var(--cmpl-icon-ratio);
    background-color: currentColor;
    -webkit-mask: var(--cmpl-icon-image) center / contain no-repeat;
    mask: var(--cmpl-icon-image) center / contain no-repeat;
}

.cmpl-icon-play {
    --cmpl-icon-image: url(/content/img/ico-c-play.svg);  /* the big play button's, smaller */
    --cmpl-icon-ratio: 43.481 / 48.083;
    transform: translateX(13%);
}

.cmpl-icon-pause {
    --cmpl-icon-image: url(/content/img/ico-pause-glow.svg);
    --cmpl-icon-ratio: 320 / 384;
}

.cmpl-icon-restart {
    --cmpl-icon-image: url(/content/img/ico-restart-glow.svg);
    --cmpl-icon-ratio: 16.25 / 16;
}

/* the right of the bar: a size larger than the left (Victoria, 2026-10-09: 18px, the share arrow 16px as it is drawn wider than high), apart from the fullscreen and
   panels toggles (16px, 18px); the accessibility circle is 18px. */
.cmpl-icon-cc-on {
    --cmpl-icon-image: url(/content/img/ico-closed-captions-on.svg);   /* captions on: solid */
    --cmpl-icon-ratio: 576 / 448;
    height: 18px;
}

.cmpl-icon-cc-off {
    --cmpl-icon-image: url(/content/img/ico-closed-captions-glow.svg);      /* captions off: outline */
    --cmpl-icon-ratio: 576 / 448;
    height: 18px;
}

.cmpl-icon-accessibility {
    --cmpl-icon-image: url(/content/img/ico-accessibility.svg);
    --cmpl-icon-ratio: 1;
    height: 18px;
}

.cmpl-icon-download {
    --cmpl-icon-image: url(/content/img/ico-download-glow.svg);
    --cmpl-icon-ratio: 180.83 / 225.57;
    height: 18px;
}

.cmpl-icon-share {
    --cmpl-icon-image: url(/content/img/ico-share-glow.svg);
    --cmpl-icon-ratio: 16 / 14.001;
    height: 16px;
}

/* the narrow bar's gear (Settings) and dots (More): as large to the eye as the 18px icons beside them, the gear being a dense shape that fills its height (as the Font
   Awesome ones they replace, 2026-10-09: the gear 17px, the dots column 15px) */
.cmpl-icon-settings {
    --cmpl-icon-image: url(/content/img/ico-settings-glow.svg);
    --cmpl-icon-ratio: 15.08 / 15.997;
    height: 17px;
}

.cmpl-icon-more {
    --cmpl-icon-image: url(/content/img/ico-more.svg);
    --cmpl-icon-ratio: 3.5 / 13.5;
    height: 15px;
}

/* the AI assistant's sparkle (the label over an answer: assistant answers in CMPL_Transcript_Glow.js) */
.cmpl-icon-ai-sparkle {
    --cmpl-icon-image: url(/content/img/ico-ai-sparkle.svg);
    --cmpl-icon-ratio: 15 / 12.613;
}

/* icons only in the popup menus (popMenuRow's svg / trailingSvg) */
.cmpl-icon-file {
    --cmpl-icon-image: url(/content/img/ico-file.svg);          /* the media alternative (a document) */
    --cmpl-icon-ratio: 12 / 16;
}

.cmpl-icon-keyboard {
    --cmpl-icon-image: url(/content/img/ico-keyboard-glow.svg);      /* keyboard shortcuts */
    --cmpl-icon-ratio: 18 / 12;
}

.cmpl-icon-open {
    --cmpl-icon-image: url(/content/img/ico-open.svg);          /* opens a dialog (keyboard shortcuts, cite, embed) */
    --cmpl-icon-ratio: 1;
}

/* fullscreen: the one to go in, or in fullscreen the one to come out (html.cmpl-fullscreen) */
.cmpl-icon-fullscreen {
    --cmpl-icon-image: url(/content/img/ico-fullscreen-glow.svg);
    --cmpl-icon-ratio: 1;
}

.cmpl-icon-fullscreen-exit {
    --cmpl-icon-image: url(/content/img/ico-exit-fullscreen-glow.svg);
    --cmpl-icon-ratio: 16.142 / 16.07;
}

html.cmpl-fullscreen .cmpl-icon-fullscreen,
html:not(.cmpl-fullscreen) .cmpl-icon-fullscreen-exit {
    display: none;
}

/* the panels: a panel at the side, its arrow pointing into it (a press puts it away).  With the panels closed (the button not pressed: updateTabsButton) it is flipped, the
   arrow pointing out (a press brings them back).  In the stacked layout, where the panel is underneath, it is turned a quarter and the other way about (Victoria,
   2026-10-09): open, the arrow points up; closed, down. */
.cmpl-icon-panel {
    --cmpl-icon-image: url(/content/img/ico-panel.svg);
    --cmpl-icon-ratio: 20.571 / 18;
    height: 18px;
    transition: transform .2s ease;
}

html:not(.cmpl-wide) .cmpl-icon-panel {
    transform: rotate(90deg) scaleX(-1);
}

[aria-pressed="false"] > .cmpl-icon-panel {
    transform: scaleX(-1);
}

html:not(.cmpl-wide) [aria-pressed="false"] > .cmpl-icon-panel {
    transform: rotate(90deg);
}

.cmpl-controls-bar .cmpl-icon {
    color: var(--cmpl-control-text);
}

.cmpl-center-button .cmpl-icon {
    height: 1em;
}

/* The volume icon (Index_Glow.cshtml): a speaker with up to three waves, or a cross for muted, as one drawing whose parts fade in and out with the volume (data-volume on the
   button, showVolumeLevel), so the speaker stays where it is and nothing jumps.  The box is as wide as the loudest icon whatever is showing.  A wave coming in also grows out
   from the speaker, and the cross from its middle, unless the visitor asks for less motion.  Waves coming in ripple outwards, one after another; going, they fold back in from
   the outermost (--cmpl-volume-stagger between them); the cross comes in once the waves have begun to go. */
.cmpl-volume-icon {
    display: block;
    flex: none;
    height: 16px;
    aspect-ratio: 640 / 450;
    overflow: visible;
    color: var(--cmpl-control-text);
    fill: currentColor;
}

.cmpl-volume-icon path {
    transform-box: fill-box;
    transition: opacity var(--cmpl-volume-motion) var(--cmpl-volume-ease), transform var(--cmpl-volume-motion) var(--cmpl-volume-ease);
}

.cmpl-volume-wave {
    transform-origin: left center;
}

.cmpl-volume-x {
    transform-origin: center;
}

/* coming in: from the speaker outwards (as specific as the transition above, which would otherwise reset the delay) */
.cmpl-volume-icon .cmpl-volume-wave-2 {
    transition-delay: var(--cmpl-volume-stagger);
}

.cmpl-volume-icon .cmpl-volume-wave-3 {
    transition-delay: calc(var(--cmpl-volume-stagger) * 2);
}

[data-volume="mute"] .cmpl-volume-x {
    opacity: 1;
    transition-delay: var(--cmpl-volume-stagger);
}

/* going: from the outermost in */
.cmpl-volume-x,
[data-volume="mute"] .cmpl-volume-wave,
[data-volume="low"] .cmpl-volume-wave-2,
[data-volume="low"] .cmpl-volume-wave-3,
[data-volume="medium"] .cmpl-volume-wave-3 {
    opacity: 0;
    transition-delay: 0s;
}

[data-volume="mute"] .cmpl-volume-wave-2,
[data-volume="low"] .cmpl-volume-wave-2 {
    transition-delay: var(--cmpl-volume-stagger);
}

[data-volume="mute"] .cmpl-volume-wave-1 {
    transition-delay: calc(var(--cmpl-volume-stagger) * 2);
}

@media (prefers-reduced-motion: no-preference) {
    .cmpl-volume-x {
        transform: scale(.5);
    }

    [data-volume="mute"] .cmpl-volume-x {
        transform: none;
    }

    [data-volume="mute"] .cmpl-volume-wave,
    [data-volume="low"] .cmpl-volume-wave-2,
    [data-volume="low"] .cmpl-volume-wave-3,
    [data-volume="medium"] .cmpl-volume-wave-3 {
        transform: scale(.7);
    }
}

/* Windows High Contrast (forced colours) replaces background colours, which would leave the mask icons blank: they take the button text's system colour instead.  (The
   volume icon is filled, not masked, and keeps its colour as it is.) */
@media (forced-colors: active) {
    .cmpl-icon,
    .cmpl-skip-arrow,
    .cmpl-ai-icon {
        forced-color-adjust: none;
        background-color: ButtonText;
    }
}


.title-container {
    height: 44px;
}

/* Style the tab */


    /* Style the buttons inside the tab */


        /* Change background color of buttons on hover */


/* Create an active/current tablink class */


/* Style the tab content */


/* Every line of the transcript (a segment) has the same room round it, given back by a negative margin, so a line's width never changes when the highlight (or the hover tint)
   moves onto it or off it: the text no longer re-wraps as it plays.  The tint fades between lines (off with reduced motion), and a line broken over two rows is rounded on both. */
.transcript-segment {
    /* (a font leaves more room above its capitals than below its baseline, about 5px against 4px at 14px: a little of the top padding goes to the bottom so the tint looks even) */
    padding: calc(2px - .035em) var(--cmpl-segment-pad) calc(2px + .035em);
    margin: 0 calc(var(--cmpl-segment-pad) * -1);
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-color var(--cmpl-highlight-fade) ease, color var(--cmpl-highlight-fade) ease, text-shadow var(--cmpl-highlight-fade) ease;
}

/* the playing phrase also looks a touch heavier: a slightly blurred shadow of its own colour, right behind it, thickens the letters without widening them (a bolder font would
   re-wrap the paragraph) */
.transcript-highlight {
    cursor: pointer;
    text-shadow: 0 0 var(--cmpl-highlight-weight) currentColor;
}

    .transcript-highlight::before,
    .transcript-highlight::after {
        content: " [highlight current position start] ";
        clip-path: inset(100%);
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    .transcript-highlight::after {
        content: " [highlight current position end] ";
    }

/* the phrase being said: a tint of the accent colour behind the transcript's own text (the mockups; 2026-10-08), on the paragraph's lighter tint (--cmpl-current-tint) */
.transcript-highlight {
    background-color: var(--cmpl-highlight-tint);
    color: var(--cmpl-tab-text);
}


.transcript-segment:hover {
    background-color: var(--cmpl-hover-tint);
    color: var(--configuration_tabs_text_hover);
    cursor: pointer !important;
}

.vjs-control-bar {
    display: none !important;
}


#closed-captions {
    position: absolute;
    bottom: 1rem;
    border-radius: 0px;
    width: 100%;
    max-width: 90%;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translate(-50%, 0%);
}

    #closed-captions > p {
        width: fit-content;
        background-color: var(--cmpl-caption-bg);
        padding: 0px 8px;
        font-size: var(--cmpl-caption-font-size);
        border-radius: 4px;
        color: var(--cmpl-caption-text);
        text-shadow: var(--cmpl-caption-shadow);
    }

/* This handles move the CC up above th4e progress bar when the controls overlay is showing.  Controls overlay can show in multiple instances so this handles them all.*/
#video-container.notouch:hover #closed-captions,
#video-container #closed-captions.hovered,
#video-container #closed-captions.touchpause {
    bottom: 4.5rem;
}


.spinner-cadmore {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--cmpl-spinner-track);
    border-radius: 9999px;
    border-width: 4px;
    border-top-width: 4px;
    height: 2.5rem;
    margin-bottom: 1rem;
    width: 2.5rem;
    transition-timing-function: linear;
    border-top-color: var(--primary-color);
    -webkit-animation: spinner 1.25s linear infinite;
    animation: spinner 1.25s linear infinite;
}


@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


#autoplay-message-container {
    display: none;
}


.temp-hidden-force {
    display: none !important;
}

.hidden-force {
    display: none !important;
}


.thumb-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
    background-position: center;
}


.cc-hiding {
    display: none !important;
}


.preLoading-spinner {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background-color: var(--cmpl-scrim-loading);
    top: 50%; /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

    .preLoading-spinner > div {
        display: block;
        color: white;
    }

/* ---- LOADER: the video player's (.cmpl-loader; Index_Glow.cshtml, and the black page before it, _Index_Glow.cshtml).  No box over the poster (the old one, by the rules
   above, was half the video's size and off its centre): a ring turning in a translucent disc the size and place of the big play button, which takes its place once the
   video is ready, so nothing jumps.  It comes in after a moment (a fast load shows none) and fades in.  Its words are for screen readers (role="status"). ---- */
.preLoading-spinner.cmpl-loader {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    background: none;
    pointer-events: none;
    opacity: 0;
    animation: cmpl-loader-in .25s ease var(--cmpl-loader-delay) forwards;
}

@keyframes cmpl-loader-in {
    to {
        opacity: 1;
    }
}

.cmpl-loader .cmpl-loader-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cmpl-big-play-size);
    height: var(--cmpl-big-play-size);
    border-radius: 50%;
    background-color: var(--cmpl-scrim-dim); /* (the big play button's) */
}

.cmpl-loader .spinner-cadmore {
    width: 42%;
    height: 42%;
    margin: 0;
    border-width: max(3px, calc(var(--cmpl-big-play-size) * .035));
    border-color: var(--cmpl-loader-track);
    border-top-color: var(--cmpl-loader-arc);
}

/* The player's own layout while it loads (#full-container.is-loading, showLoadingLayout): in the shape it will have, so the frame does not change shape when it has
   loaded.  The video's place shows the poster and the loader (.cmpl-loader-in-video, only now); nothing in it can be used yet (the controls, the big buttons, the
   captions are hidden); the tabs' place shows a skeleton of them (their panel's colour, faint shapes of the tab bar and of a few rows) over their contents. */
/* The changes between the stages are fades (--cmpl-stage-fade), none for a visitor who has asked for less motion (the global rule in FOCUS AND MOTION): the layout comes
   in over the shell page's poster (is-entering, showLoadingLayout; the poster goes once it has); when the player has loaded, the loader and the tabs' skeleton go and
   the big play button comes.  (A fade out keeps its visibility until the fade has run; none in keeps it at once.) */
.cmpl-full-container.is-loading {
    transition: opacity var(--cmpl-stage-fade) ease;
}

.cmpl-full-container.is-entering {
    opacity: 0;
}

.preLoading-spinner.cmpl-loader.cmpl-loader-in-video {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cmpl-stage-fade) ease, visibility 0s linear var(--cmpl-stage-fade);
}

.cmpl-full-container.is-loading .preLoading-spinner.cmpl-loader.cmpl-loader-in-video {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease var(--cmpl-loader-delay), visibility 0s;
}

.cmpl-full-container .c-big-play-button {
    transition: background-color 0.2s, opacity var(--cmpl-stage-fade) ease;
}

.cmpl-full-container.is-loading #video-control-overlay,
.cmpl-full-container.is-loading .c-big-play-button,
.cmpl-full-container.is-loading #center-controls,
.cmpl-full-container.is-loading #closed-captions,
.cmpl-full-container.is-loading .tabs-container > * {
    visibility: hidden;
}

.cmpl-full-container.is-loading .c-big-play-button {
    opacity: 0;
}

.cmpl-full-container.is-loading .tabs-container::after {
    opacity: 1;
    visibility: visible;
    transition: none;
}

/* (over the tabs panel, which is positioned already) */
.cmpl-full-container .tabs-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--cmpl-stage-fade) ease, visibility 0s linear var(--cmpl-stage-fade);
}

/* the skeleton's shapes (also the audio shell page's skeleton of its tabs' card: .cmpl-audio-skeleton-card, audio-player_glow.css) */
.cmpl-full-container .tabs-container::after,
.cmpl-audio-skeleton-card {
    background-color: var(--cmpl-tab-bg);
    background-repeat: no-repeat;
    /* the AI button and a tab; the chapter count; four rows of a title and a description */
    background-image:
        linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)), linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)),
        linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)),
        linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)), linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)),
        linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)), linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)),
        linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)), linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)),
        linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton)), linear-gradient(var(--cmpl-skeleton), var(--cmpl-skeleton));
    background-size:
        var(--cmpl-tab-height) var(--cmpl-tab-height), 6rem var(--cmpl-tab-height),
        7rem .6rem,
        55% .65rem, 80% .55rem,
        45% .65rem, 75% .55rem,
        60% .65rem, 70% .55rem,
        50% .65rem, 78% .55rem;
    background-position:
        var(--cmpl-tab-pad) var(--cmpl-tabbar-pad-y), calc(var(--cmpl-tab-pad) + var(--cmpl-tab-height) + .5rem) var(--cmpl-tabbar-pad-y),
        var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + .9rem),
        var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 2.6rem), var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 3.6rem),
        var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 5.4rem), var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 6.4rem),
        var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 8.2rem), var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 9.2rem),
        var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 11rem), var(--cmpl-tab-pad) calc(var(--cmpl-tabbar-height) + 12rem);
}

/* the poster's box (the video's shape, from its width: video-player_16x9_glow.css) holds the poster and the loader, so the disc is in the poster's middle (they
   were placed against the whole page, which can be much taller than the frame, putting the loader's middle below what shows) */
#preLoadingContainer {
    position: relative;
}

/* ... and its poster comes in after a moment, as its loader does: the player's own layout (showLoadingLayout) takes its place within a few hundredths of a second, and the
   poster at full width, in the wrong shape, flashed before it.  (Where the layout does not take over, audio and forced 16:9, or should the script fail, the poster still comes.) */
#preLoadingContainer .thumb-wrapper {
    opacity: 0;
    animation: cmpl-loader-in .25s ease var(--cmpl-loader-delay) forwards;
}

/* the black page before the player: the whole of it, the disc in its middle */
#prepreLoadingContainer {
    position: fixed;
    inset: 0;
    height: auto;
    padding: 0; /* (not the poster box's height, .preLoadingContainer's, which it shares the class of) */
}

.transcript-text-color {
    color: var(--configuration_tabs_text_color);
}



.transcriptEditorButtonWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--cmpl-scrim-dim);
    z-index: 10002;
    position: absolute;
    top: 0;
    left: 0;
}

.transcriptEditorOuterbox {
    display: block;
    background-color: white;
    border-radius: 5px;
    border: solid 1px var(--cmpl-editor-border);
    color: black;
    z-index: 10003;
}

.transcriptEditorTitleLine {
    color: black;
    font-family: 'proxima-nova', sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    border-bottom: solid 1px var(--cmpl-editor-border);
}

.transcriptEditorInstructionLine p {
    color: black;
    font-family: 'proxima-nova', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px var(--cmpl-editor-border);
    margin: 0;
}


.transcriptEditorClickButton {
    cursor: pointer;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: var(--cmpl-editor-button-bg);
    color: white;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    text-align: center;
}

.transcriptEditorClickButtons {
    display: block;
    padding: 10px;
}

.transcriptEditorClickButton:focus {
    border: solid black 2px;
}

.show-opacity {
    opacity: 1 !important;
    transition: 0.2s;
}

.end-of-media {
    position: fixed;
    background-color: var(--configuration_accent_color);
    color: white;
    width: 100%;
    bottom: 0;
    left: -999em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

    .end-of-media:focus {
        left: 0;
    }


/* This is for the pop up ads.*/

#ad-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99999;
}

    #ad-container.play {
        z-index: 99999;
    }

    #ad-container iframe {
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        position: absolute !important;
    }

    #ad-container div {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.tabs-container-shutdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 99999;
    pointer-events: none;
    cursor: none;
    background-color: var(--cmpl-scrim-shutdown);
    display: none;
}

#tabs-container-scroller.nomouse {
    pointer-events: none;
}

.tabs-container {
    position: relative;
}

#ad-container:focus {
    outline: solid black 2px;
}

.ad-big-play-button {
    position: absolute;
    top: calc(50% - 4rem) !important;
    left: calc(50% - 4rem) !important;
    height: 8rem !important;
    width: 8rem !important;
    background-color: var(--cmpl-scrim-dim) !important;
    border: none !important;
    border-radius: 50% !important;
    transition: 0.2s;
    z-index: 999999;
    display: none;
}


    .ad-big-play-button:hover {
        background-color: var(--configuration_accent_color) !important;
        transition: 0.2s;
    }

    .ad-big-play-button:focus {
        background-color: var(--configuration_accent_color) !important;
        transition: 0.2s;
    }

    .ad-big-play-button:before {
        background-image: url(/content/img/ico-c-play.svg) !important;
        background-size: 43.41px 48px;
        display: inline-block;
        width: 43.41px;
        height: 48px;
        content: "";
        position: absolute;
        top: 39px;
        left: 48px;
    }

    .ad-big-play-button .vjs-control-text {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

.fa-check:before {
    font-family: "Font Awesome 7 Free";
    font-weight: 600;
}

/**** Chat Tab *****/

/* The chat replay: the same pieces as the other tabs (the tab bar's colors and pill shapes, the Contents list's rows and hairlines, the accent color for what is current).
   #disp-Chat is the box that scrolls, because the chat scrolls itself to the newest message (autoScrollChatBox); the mode switch sticks to the top of it. */
#disp-Chat {
    /* (relative: the messages' screen-reader-only text, .sr-only, is positioned; without this it is placed against the tab area and stretches it, a second scroll bar) */
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--cmpl-chat-canvas);
    font-size: .875rem;
    line-height: 1.5;
    color: var(--cmpl-tab-text);
}

#chat-tab-content {
    padding-bottom: 1rem;
}

.cmpl-chat-modes {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .5rem var(--cmpl-tab-pad);
    background-color: var(--cmpl-tab-bg);
    border-bottom: 1px solid var(--cmpl-line);
}

.cmpl-chat-modes-track {
    display: flex;
    gap: .25rem;
    padding: .2rem;
    border: 1px solid var(--cmpl-line-strong);
    border-radius: var(--cmpl-tab-radius);
}

.chat_tab {
    flex: 1 1 0;
    height: 2rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: var(--cmpl-tab-radius);
    background-color: transparent;
    white-space: nowrap;
    color: var(--cmpl-tab-text);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.chat_tab:hover {
    background-color: var(--cmpl-current-tint);
}

.chat_tab.chat_active,
.chat_tab.chat_active:hover {
    background-color: var(--cmpl-tab-active-bg);
    color: var(--cmpl-tab-active-text);
}

.chat_tab:focus-visible,
.chat_time:focus-visible,
.chat_quote:focus-visible,
.chat_more:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
}

/* Pre-broadcast, Replay, During, Post-broadcast */
/* The chat's empty message (updateChatEmpty): no messages at all, or Live replay before the first one. */
.cmpl-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.5rem var(--cmpl-tab-pad) 1.5rem;
    text-align: center;
}

.cmpl-chat-empty[hidden] {
    display: none;
}

.cmpl-chat-empty-icon {
    margin-bottom: .25rem;
    color: var(--cmpl-line-strong);
    font-size: 1.75rem;
}

.cmpl-chat-empty-title {
    margin: 0;
    color: var(--cmpl-tab-text);
    font-size: .875rem;
    font-weight: 600;
}

.cmpl-chat-empty-text {
    max-width: 20rem;
    margin: 0 0 .5rem;
    color: var(--cmpl-tab-muted);
    font-size: .8125rem;
    line-height: 1.5;
}

.cmpl-chat-empty-text[hidden],
.cmpl-chat-empty .cmpl-pillbtn[hidden] {
    display: none;
}

/* Pre-broadcast, During, Post-broadcast: centred, a hairline either side, in the assistant's label type (.cmpl-ai-answer-label) */
.chat_section_header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .9rem var(--cmpl-tab-pad) .6rem;
    color: var(--cmpl-tab-muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.chat_section_header::before,
.chat_section_header::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--cmpl-line);
}

/* A message (buildChatTab).  Who and when sit above the card, once for a run of messages from one person; the later ones in the run show their time beside the card
   when it is pointed at or focused. */
.chat_message_bubble {
    margin-top: .2rem;
    padding: 0 var(--cmpl-tab-pad);
    word-break: break-word;
}

.chat_message_bubble:has(> .chat_who) {
    margin-top: .9rem;
}

.chat_section_header + .chat_message_bubble {
    margin-top: 0;
}

.chat_who {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0 .125rem .3rem;
    font-size: .8125rem;
}

.chat_name {
    min-width: 0;
    font-weight: 600;
}

/* the organisation after "Name | Org", in the assistant's label type */
.chat_org {
    color: var(--cmpl-tab-active-bg);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.chat_avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-right: .125rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--cmpl-chat-avatar-bg);
    color: var(--cmpl-tab-muted);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
}

.chat_avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.chat_avatar.is-small {
    width: .875rem;
    height: .875rem;
    margin-right: 0;
    font-size: .45rem;
}

/* the time: the assistant's time (.cmpl-ai-time), a little smaller for a header */
.chat_time {
    flex: none;
    padding: 0 .3rem;
    border: 0;
    border-radius: .25rem;
    background-color: var(--cmpl-current-tint);
    color: var(--cmpl-accent-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.55;
}

button.chat_time {
    cursor: pointer;
}

button.chat_time:hover {
    background-color: var(--cmpl-tab-active-bg);
    color: var(--cmpl-tab-active-text);
}

/* the later messages in a run: the time at the card's bottom right, quieter than the header's, the header's chip when pointed at or focused */
.chat_time.is-end {
    float: right;
    margin: .15rem 0 0 .5rem;    /* (floated at the end of the last paragraph: on its last line when there is room, under it when not; nudged down to sit on the text's baseline) */
    background-color: transparent;
    color: var(--cmpl-tab-muted);
    font-size: .68rem;
    transition: background-color .15s, color .15s;
}

button.chat_time.is-end:hover,
button.chat_time.is-end:focus-visible {
    background-color: var(--cmpl-current-tint);
    color: var(--cmpl-tab-active-bg);
}

.chat_card {
    display: flow-root;          /* (holds the floated time, .chat_time.is-end) */
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    padding: .5rem .75rem;
    border-radius: 6px;
    background-color: var(--cmpl-tab-bg);
    box-shadow: var(--cmpl-chat-card-shadow);
    line-height: 1.55;
    transition: box-shadow .15s, background-color .3s;
}

.chat_card:hover {
    box-shadow: var(--cmpl-chat-card-hover-shadow);
}

.chat_card:has(.chat_quote) {
    min-width: 78%;
}

.chat_text {
    display: flow-root;
}

.chat_text > :first-child {
    margin-top: 0;
}

.chat_text > :last-child {
    margin-bottom: 0;
}

.chat_text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.chat_more {
    margin-top: .1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cmpl-tab-active-bg);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.chat_more:hover {
    text-decoration: underline;
}

.chat_message_bubble.prepost .chat_text {
    color: var(--cmpl-tab-muted);
}

/* the message a reply answers: one line at the top of the card (who, and the start of it); a button when it goes to that message */
.chat_quote {
    display: flex;
    align-items: center;
    gap: .3rem;
    width: 100%;
    min-width: 0;
    margin: 0 0 .4rem;
    padding: .2rem .5rem;
    border: 0;
    border-radius: 4px;
    background-color: var(--cmpl-chat-quote-bg);
    color: var(--cmpl-tab-muted);
    font-size: .75rem;
    line-height: 1.5;
    text-align: left;
}

button.chat_quote {
    cursor: pointer;
}

button.chat_quote:hover {
    background-color: var(--cmpl-chat-quote-hover);
}

.chat_quote b {
    color: var(--cmpl-tab-text);
    font-weight: 600;
    white-space: nowrap;
}

.chat_quote_text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* the message a quote went to, lit for a moment (chatGoToMessage) */
.chat_message_bubble.is-flash .chat_card {
    background-color: var(--cmpl-chat-flash);
}

@media (prefers-reduced-motion: reduce) {
    .chat_card,
    .chat_time.is-end {
        transition: none;
    }
}


/* ==========================================================================
   SEMANTIC CLASSES (what Tailwind utilities used to style; Tailwind is gone)
   Tailwind loaded after the rest of this stylesheet and so won equal-specificity ties, and these rules keep that precedence over the
   older rules above them: keep them below those.
   ========================================================================== */

/* ---- Section 1: page frame, autoplay notice, control overlay, progress bar ---- */

.cmpl-preloader {
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
}

.cmpl-full-container {
    margin: 0;
}

.cmpl-media-container {
    position: relative;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0;
}

html.cmpl-wide .cmpl-media-container {
    flex-direction: row;
}

.cmpl-video-container {
    position: relative;
    width: 100%;
}

.cmpl-autoplay-toast {
    position: absolute;
    top: .75rem;
    left: .75rem;
    margin-right: .75rem;
    flex-direction: column;
    border-radius: .375rem;
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    box-shadow: var(--cmpl-shadow-sm);
    z-index: 250;
    background-color: var(--light-mode-primary-dark);
    color: var(--light-mode-primary-light);
}

@media (min-width:640px) {
    .cmpl-autoplay-toast {
        flex-direction: row;
    }
}

.cmpl-autoplay-toast-message {
    margin-right: .5rem;
}

.cmpl-autoplay-toast-actions {
    margin-left: auto;
    display: flex;
    flex-direction: row;
}

.cmpl-autoplay-unmute-wrap {
    margin-right: 1rem;
    font-weight: 500;
    color: var(--primary-color);
}

.cmpl-autoplay-unmute {
    padding: 0.25rem 0.5rem;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    color: var(--light-mode-primary-light);
}
.cmpl-autoplay-unmute:hover {
    text-decoration: underline;
}

.cmpl-autoplay-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem;
    border: 0;
    background: none;
    transform: scale(.75);
    cursor: pointer;
}

.cmpl-control-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--cmpl-scrim-controls) var(--cmpl-scrim-veil); /* the bar's scrim, over the light veil on the whole picture (its colour) */
}

.cmpl-control-overlay-content {
    position: absolute;
    bottom: 0;
    margin-top: auto;
    height: 100%;
    width: 100%;
    align-content: flex-end;
}

.cmpl-controls-layer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: 100%;
    flex-direction: column;
}


/* The bar sits --cmpl-bar-inset in from the video's left, right and bottom edges: the progress bar exactly, and the buttons by their highlight (the rounded square a pressed or
   hovered button shows), so the padding leaves out the transparent border round it (.cmpl-controls-bar .control-button) and the progress bar gets it back as margin.  The
   first and last buttons' highlights then line up with the ends of the progress bar. */
.cmpl-controls-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--cmpl-bar-inset) - var(--cmpl-control-highlight-inset)) calc(var(--cmpl-bar-inset) - var(--cmpl-control-highlight-inset));
}

.cmpl-controls-bar .progress-bar-segments {
    margin: 0 var(--cmpl-control-highlight-inset) 12px;
}

.cmpl-progress-area {
    display: flex;
    flex-direction: column;
}

.cmpl-clip-mode {
    margin-right: .5rem;
    display: flex;
    justify-content: flex-start;
}

.cmpl-clip-mode-button {
    bottom: 0;
    flex: none;
}

.cmpl-clip-mode-text {
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--light-mode-primary-light);
}

.cmpl-progress-segments {
    display: flex;
    height: 100%;
    flex-direction: row;
}

/* ---- Section 2: bottom control bar (play/skip/time, speed & language menus, volume, fullscreen) ---- */

.cmpl-controls-row {
    display: flex;
    justify-content: space-between;
}

.cmpl-controls-left {
    display: flex;
    flex-direction: row;
}

.cmpl-control-bottom {
    bottom: 0;
}

/* The time, and the time jump box typed into in its place: the speed's type, with every digit the same width so the time doesn't wobble as it plays. */
.cmpl-current-time,
.cmpl-time-jump-input {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.25rem;
}

.cmpl-current-time {
    color: var(--light-mode-primary-light);
}

/* The time jump box: a quiet dark field on the picture, at least as wide as the time it replaces (the script sets that, and grows it to what is typed), so nothing in the
   bar moves when it opens.  Red edges while what is typed is not a time. */
.cmpl-time-jump-input {
    flex: none;
    box-sizing: border-box;
    height: calc(var(--cmpl-control-size) - 12px);
    margin: auto 0 auto var(--cmpl-time-jump-gap);
    padding: 0 0.5rem;
    border: 1px solid var(--cmpl-field-border);
    border-radius: var(--cmpl-control-highlight-radius);
    background-color: var(--cmpl-field-bg);
    color: var(--cmpl-control-text);
    caret-color: var(--cmpl-control-text);
    text-align: center;
    text-shadow: var(--cmpl-control-text-shadow);
    box-shadow: var(--cmpl-field-ring);
    outline: 0;
}

    .cmpl-time-jump-input::selection {
        background-color: var(--cmpl-field-selection);
    }

    .cmpl-time-jump-input:focus {
        border-color: var(--cmpl-field-focus-border);
    }

    .cmpl-time-jump-input.invalidTime {
        border-color: var(--cmpl-field-invalid-border);
        box-shadow: var(--cmpl-field-invalid-ring);
    }

.cmpl-time-duration {
    bottom: 0;
    display: flex;
    justify-content: center;
}

.cmpl-time-duration-text {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--light-mode-primary-light);
}

.cmpl-controls-right {
    position: relative;
    margin-left: auto;
    display: flex;
    flex-direction: row;
}


.cmpl-volume-container {
    font-size: .75rem;
    line-height: 1rem;
    box-shadow: var(--cmpl-shadow-lg);
}

/* ---- Section 3: top menu (the title) ---- */

/* The title is as far in from the video's top and left edges as the control bar is from its bottom and left (--cmpl-bar-inset): its left edge exactly, and the top of its
   letters' em box (the line box less the half-leading of its 1.3 line height: .cmpl-title-text). */
.cmpl-menu-container {
    position: absolute;
    top: calc(var(--cmpl-bar-inset) - var(--cmpl-title-font-size) * .15);
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding-left: var(--cmpl-bar-inset);
    padding-right: var(--cmpl-bar-inset);
}

/* (as tall as the title, not the 44px of .title-container, which would centre it lower; and none of the narrowest player's 8px either side of #title, from the old
   max-width: 414px rules, as the container's padding is the inset) */
.cmpl-menu-container .cmpl-title-container {
    height: auto;
}

.cmpl-title-text #title {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cmpl-info-title-menu {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.cmpl-info-title-group {
    display: flex;
}

.cmpl-info-title-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.cmpl-title-container {
    margin-right: .5rem;
    display: flex;
    justify-content: center;
}

/* The title: plain text over the top scrim (.cmpl-control-overlay below), in line with the progress bar's left edge. */
.cmpl-title-text {
    margin-top: auto;
    margin-bottom: auto;
    font-size: var(--cmpl-title-font-size);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: var(--cmpl-title-shadow);
    color: var(--light-mode-primary-light);
}

.cmpl-info-value {
    margin-bottom: 1rem;
    font-weight: 400;
    color: var(--light-mode-primary-dark);
}


/* ---- Section 5a: tabs panel (tab bar, search, transcript / chapters containers, empty state) ---- */

.cmpl-tabs-container {
    width: 100%;
    padding: 0;
}

html.cmpl-wide .cmpl-tabs-container {
    border-top-width: 0;
}

.cmpl-tabs-scroller {
    height: 100%;
    width: 100%;
    background-color: var(--cmpl-tab-bg);
}

.cmpl-tabs-box {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
}

/* The tab bar: search, the tabs (pills), More.  The tab engine (Tabs in CMPL_Transcript_Glow.js) hides, shows and moves the tabs. */
.cmpl-tabbar {
    position: relative;
    z-index: 50;
    display: flex;
    flex: none;
    align-items: center;
    gap: .5rem;
    padding: var(--cmpl-tabbar-pad-y) var(--cmpl-tab-pad);
    border-bottom: 1px solid var(--cmpl-line);
    background-color: var(--cmpl-tab-bg);
}

.cmpl-tabbar:not(.has-tabs) {
    display: none;
}

/* Text so large (a visitor who enlarged it) that not even one tab fits beside More: the bar wraps, and the tabs get a row of their own (layoutTabs sets this; at any other size the bar is one row). */
.cmpl-tabbar.is-wrapped {
    flex-wrap: wrap;
    row-gap: .5rem;
}

.cmpl-tabbar.is-wrapped .cmpl-tablist {
    order: 3;
    flex: 1 1 100%;
}

.cmpl-tabbar.is-wrapped .cmpl-tab-more {
    order: 2;
    margin-left: auto;
}

.cmpl-tabbar.is-wrapped .cmpl-tab {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmpl-tabbar-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--cmpl-tab-height);
    height: var(--cmpl-tab-height);
    padding: 0;
    border: 1px solid var(--cmpl-line-strong);
    border-radius: var(--cmpl-tabbar-radius);
    background-color: var(--cmpl-tab-bg);    /* the same as the tabs beside it (it is a tab: .is-current below) */
    color: var(--cmpl-tab-text);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.cmpl-tabbar-icon:disabled {
    color: var(--cmpl-tab-muted);
    opacity: .6;
    cursor: not-allowed;
}

.cmpl-tablist {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    gap: .5rem;
    overflow: hidden;
    padding: 4px; /* room for the focus ring (2px and its 2px offset), which the overflow would otherwise cut */
    margin: -4px;
}

.cmpl-tab {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .4rem;
    height: var(--cmpl-tab-height);
    padding: 0 .875rem;
    border: 1px solid var(--cmpl-line-strong);
    border-radius: var(--cmpl-tabbar-radius);
    background-color: var(--cmpl-tab-bg);
    color: var(--cmpl-tab-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.cmpl-tab[hidden] {
    display: none !important;
}

.cmpl-tab:hover,
.cmpl-tabbar-icon:not(:disabled):hover {
    border-color: var(--cmpl-tab-active-bg);
}

.cmpl-tab:not(.is-current):hover,
.cmpl-tabbar-icon:not(:disabled):not(.is-current):hover {
    background-color: var(--cmpl-tab-hover);
}

.cmpl-tab.is-current {
    border-color: var(--cmpl-tab-active-bg);
    background-color: var(--cmpl-tab-active-bg);
    color: var(--cmpl-tab-active-text);
}

.cmpl-tab:focus-visible,
.cmpl-tabbar-icon:focus-visible,
.cmpl-tabmore-item:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
}

/* (inside the More menu, whose edge cuts anything outside the item) */
.cmpl-tabmore-item:focus-visible {
    outline-offset: -2px;
}

.cmpl-tab-more i {
    font-size: .7rem;
    transition: transform .15s;
}

.cmpl-tab-more[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* More holds the tabs that did not fit: a drop-down under the bar, as wide as the panel */
.cmpl-tabmore {
    position: absolute;
    z-index: 60;
    left: var(--cmpl-tab-pad);
    right: var(--cmpl-tab-pad);
    top: calc(var(--cmpl-tabbar-height) - var(--cmpl-tab-pad) / 2);
    overflow: hidden;
    border: 1px solid var(--cmpl-line-strong);
    border-radius: var(--cmpl-tabmore-radius);
    background-color: var(--cmpl-tab-bg);
    box-shadow: var(--cmpl-tabmore-shadow);
}

.cmpl-tabmore[hidden] {
    display: none;
}

.cmpl-tabmore-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--cmpl-line);
    background: transparent;
    color: var(--cmpl-tab-text);
    font-size: .875rem;
    text-align: start;
    cursor: pointer;
}

.cmpl-tabmore-item:last-child {
    border-bottom: 0;
}

.cmpl-tabmore-item i {
    width: 1.25em;
    text-align: center;
    color: var(--cmpl-tab-muted);
}

.cmpl-tabmore-item:hover,
.cmpl-tabmore-item.is-current {
    background-color: color-mix(in srgb, var(--cmpl-tab-active-bg) 8%, transparent);
}

.cmpl-tabmore-item.is-current {
    font-weight: 600;
}

/* the panels */
.cmpl-tabpanel {
    width: 100%;
    min-width: 0;
}

.cmpl-tabpanel[hidden] {
    display: none;
}

.cmpl-tabpanel:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: -2px;
}

.cmpl-tab-stub {
    padding: 1.5rem var(--cmpl-tab-pad);
    color: var(--cmpl-tab-muted);
    font-size: .875rem;
}

/* under the panels, Contents only: follow playback */
.cmpl-tabfoot {
    display: flex; /* (not a line of text: a line box is taller than the checkbox's label and leaves its extra room below it) */
    align-items: center;
    flex: none;
    padding: .35rem var(--cmpl-tab-pad);
    border-top: 1px solid var(--cmpl-line);
    background-color: var(--cmpl-tab-bg);
}

.cmpl-tabfoot[hidden] {
    display: none;
}

.cmpl-check {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    color: var(--cmpl-tab-text);
    cursor: pointer;
}

.cmpl-check input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--cmpl-tab-active-bg);
}

/* what is left of the panel under the tab bar scrolls (position: relative: the transcript scrolls itself to the playing line from this box's coordinates) */
.cmpl-tab-area {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--cmpl-tab-scrollbar) transparent;
    scroll-padding-top: 4rem; /* what the keyboard brings into view is not left under an open chapter's pinned heading (.cmpl-ch.is-open > .cmpl-ch-head) */
}


.cmpl-tab-empty {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    padding: .75rem;
    text-align: center;
}

@media (min-width:640px) {
    .cmpl-tab-empty {
        padding: 1.5rem;
    }
}

.cmpl-tab-empty-block {
    margin-bottom: .75rem;
}

.cmpl-tab-empty-image {
    margin-left: auto;
    margin-right: auto;
    width: 15rem;
}

.cmpl-tab-empty-title {
    margin-bottom: .25rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--light-mode-tertiary-dark);
}

.cmpl-tab-empty-text {
    font-size: .875rem;
    line-height: 1.25rem;
    color: var(--light-mode-secondary-dark);
}

/* ---- the Contents tab: chapters (accordion sections) with the transcript under them ---- */

.cmpl-contents {
    padding-bottom: 1rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--cmpl-tab-text);
}

.cmpl-contents .cmpl-transcript-disclaimer {
    margin: 0 var(--cmpl-tab-pad) .75rem;
}

.cmpl-contents-head {
    display: flex;
    flex-wrap: wrap; /* (enlarged text: the button goes under the summary instead of squeezing it) */
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: calc(.5rem - 2px) var(--cmpl-tab-pad); /* (even above and below, under the tab bar's line) */
    color: var(--cmpl-tab-muted);
    font-size: .8125rem;
}

.cmpl-contents-head[hidden] {
    display: none;
}

/* a panel too narrow for the summary and the button on one row: the length goes, so the button keeps its place beside the chapter count (fitContentsHead) */
.cmpl-contents-head.is-tight .cmpl-contents-length {
    display: none;
}

.cmpl-pillbtn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    padding: 0 .9rem;
    border: 1px solid var(--cmpl-line-strong);
    border-radius: var(--cmpl-tab-radius);
    background-color: var(--cmpl-tab-bg);
    color: var(--cmpl-tab-text);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cmpl-pillbtn[hidden] {
    display: none;
}

.cmpl-pillbtn i {
    font-size: .7rem;
}

.cmpl-pillbtn[data-open="false"] i {
    transform: rotate(180deg); /* the chevron points down when pressing it opens things */
}

/* A utility button (Expand all / Collapse all): muted text alone at rest; under the pointer a soft grey behind it, and its text the full colour. */
.cmpl-pillbtn-quiet {
    padding: 0 .6rem;
    border-color: transparent;
    background-color: transparent;
    color: var(--cmpl-tab-muted);
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.cmpl-pillbtn-quiet:hover {
    background-color: var(--cmpl-quiet-hover);
    color: var(--cmpl-tab-text);
}

.cmpl-pillbtn:focus-visible,
.cmpl-ch-seek:focus-visible,
.cmpl-ch-toggle:focus-visible,
.cmpl-para-time:focus-visible,
.transcript-segment:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
}

.cmpl-ch {
    border-top: 1px solid var(--cmpl-line);
}

.cmpl-ch-plain {
    border-top: 0;
}

.cmpl-ch:last-child:not(.cmpl-ch-plain) {
    border-bottom: 1px solid var(--cmpl-line);
}

.cmpl-ch-head {
    display: flex;
    align-items: center; /* (the title in line with the middle of its 32px open/close button, however many lines it has) */
    gap: .75rem;
    padding: .5rem var(--cmpl-tab-pad); /* (48px for a one-line title: its 32px button and this) */
    border-left: 3px solid transparent;
}

.cmpl-ch.is-current > .cmpl-ch-head {
    border-left-color: var(--cmpl-tab-active-bg);
    background-color: var(--cmpl-current-tint);
}

/* A chapter's row tints while the pointer is on it, or the keyboard is on one of its buttons (rather than underlining its title); the current chapter's tint deepens. */
.cmpl-ch-head {
    transition: background-color .15s ease;
}

.cmpl-ch-head:hover,
.cmpl-ch-head:has(:focus-visible) {
    background-color: var(--cmpl-row-hover);
}

.cmpl-ch.is-current > .cmpl-ch-head:hover,
.cmpl-ch.is-current > .cmpl-ch-head:has(:focus-visible) {
    background-color: var(--cmpl-current-hover-tint);
}

/* An open chapter: a line between its heading and its transcript, and the heading pinned to the top of the panel while its transcript scrolls under it (the next chapter's heading
   pushes it off).  Pinned, it has to be solid, so its tints are laid over the panel's colour instead of being see-through.  (The auto-scroll leaves room for it:
   autoScrollDownToElement; and so does the keyboard: scroll-padding-top on .cmpl-tab-area.) */
.cmpl-ch.is-open > .cmpl-ch-head {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--cmpl-line);
    background-color: var(--cmpl-tab-bg);
}

.cmpl-ch.is-open.is-current > .cmpl-ch-head {
    background-color: var(--cmpl-tab-bg);
    background-image: linear-gradient(var(--cmpl-current-tint), var(--cmpl-current-tint));
}

.cmpl-ch.is-open > .cmpl-ch-head:hover,
.cmpl-ch.is-open > .cmpl-ch-head:has(:focus-visible) {
    background-color: var(--cmpl-tab-bg);
    background-image: linear-gradient(var(--cmpl-row-hover), var(--cmpl-row-hover));
}

.cmpl-ch.is-open.is-current > .cmpl-ch-head:hover,
.cmpl-ch.is-open.is-current > .cmpl-ch-head:has(:focus-visible) {
    background-color: var(--cmpl-tab-bg);
    background-image: linear-gradient(var(--cmpl-current-hover-tint), var(--cmpl-current-hover-tint));
}

/* ... and a soft shadow under it while it is pinned, its transcript scrolling beneath (markPinnedChapter) */
.cmpl-ch.is-open > .cmpl-ch-head {
    transition: background-color .15s ease, box-shadow .15s ease;
}

.cmpl-ch.is-open > .cmpl-ch-head.is-pinned {
    box-shadow: var(--cmpl-pinned-shadow);
}

.cmpl-ch-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cmpl-ch-heading {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
}

.cmpl-ch-seek {
    display: flex;
    align-items: baseline;
    gap: var(--cmpl-ch-time-gap);
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.cmpl-ch-time,
.cmpl-para-time {
    flex: none;
    min-width: var(--cmpl-ch-time-col);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cmpl-accent-text);
}

/* the playing chapter's mark: in front of its title's first word, inside the title (buildContents), so the title starts where every other title (and the speakers under it) does */
.cmpl-ch .cmpl-ch-now {
    display: none;
    margin-right: .3rem;
    font-size: .625rem;
    color: var(--cmpl-tab-active-bg);
}

.cmpl-ch.is-current .cmpl-ch-now {
    display: inline;
}

.cmpl-ch-title {
    min-width: 0;
    font-size: .8125rem;
}

/* the description: two lines with an ellipsis under a closed chapter's title; an open chapter shows it in full at the top of its transcript instead (.cmpl-ch-lead), keeping its
   pinned heading short.  A chapter with no transcript to open shows it in full here (is-full). */
.cmpl-ch-desc,
.cmpl-ch-lead {
    color: var(--cmpl-tab-muted);
    font-size: .8125rem;
    line-height: 1.4;
}

.cmpl-ch-desc {
    display: -webkit-box;
    margin: .15rem 0 0 calc(var(--cmpl-ch-time-col) + var(--cmpl-ch-time-gap));
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cmpl-ch-desc.is-full {
    display: block;
}

.cmpl-ch.is-open > .cmpl-ch-head .cmpl-ch-desc {
    display: none;
}

.cmpl-ch-lead {
    /* a soft grey box, so it is plain that this is not the transcript.  Its left edge is in line with the transcript's text, past the paragraph times (3px for the paragraphs' left border). */
    margin: .5rem var(--cmpl-tab-pad) .25rem calc(var(--cmpl-tab-pad) + 3px + var(--cmpl-ch-time-col) + var(--cmpl-ch-time-gap));
    padding: .5rem .625rem;
    border-radius: var(--cmpl-tabbar-radius);
    background: var(--cmpl-note-bg);
}

/* the description is cut off at a couple of lines (See more opens it: .cmpl-ch-lead-more, fitChapterLeads) */
.cmpl-ch-lead-text.is-clamped {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--cmpl-lead-lines);
    line-clamp: var(--cmpl-lead-lines);
}

.cmpl-ch-lead-more {
    margin-top: .1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cmpl-accent-text);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.cmpl-ch-lead-more:hover {
    text-decoration: underline;
}

.cmpl-ch-lead-more:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
}

/* The chapter's open/close button: just its arrow at rest; a square like the tab bar's buttons once its row is hovered (or has the keyboard); the accent when it is itself hovered. */
.cmpl-ch-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--cmpl-tabbar-radius);
    background: transparent;
    color: var(--cmpl-tab-muted);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cmpl-ch-head:hover .cmpl-ch-toggle,
.cmpl-ch-head:has(:focus-visible) .cmpl-ch-toggle {
    border-color: var(--cmpl-line-strong);
    background-color: var(--cmpl-tab-bg);
}

.cmpl-ch-head .cmpl-ch-toggle:hover {
    border-color: var(--cmpl-tab-active-bg);
    color: var(--cmpl-tab-active-bg);
}

.cmpl-ch-toggle i {
    font-size: .8rem;
    transition: transform var(--cmpl-chapter-motion) ease; /* (in step with the transcript opening: .cmpl-ch-body.is-animating) */
}

.cmpl-ch.is-open > .cmpl-ch-head .cmpl-ch-toggle i {
    transform: rotate(90deg);
}

.cmpl-ch-body[hidden] {
    display: none;
}

/* a chapter's transcript growing open or shrinking closed (animateChapterBody sets the heights; the arrow turns in the same time) */
.cmpl-ch-body.is-animating {
    overflow: hidden;
    transition: height var(--cmpl-chapter-motion) ease, opacity var(--cmpl-chapter-motion) ease;
}

.cmpl-ch-body {
    padding-bottom: .5rem;
}

.cmpl-para {
    display: flex;
    align-items: flex-start;
    gap: var(--cmpl-ch-time-gap);
    padding: .5rem var(--cmpl-tab-pad); /* (no less: the playing paragraph's tint would hug its text) */
    border-left: 3px solid transparent;
}

.cmpl-para.is-current {
    border-left-color: var(--cmpl-tab-active-bg);
    background-color: var(--cmpl-current-tint);
}

.cmpl-para-time {
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
    cursor: pointer;
}

.cmpl-para-time:hover {
    text-decoration: underline;
}

.cmpl-para-main {
    flex: 1 1 auto;
    min-width: 0;
}

.cmpl-transcript-speaker {
    margin-bottom: .1rem;
    color: var(--cmpl-accent-text);
    font-size: .75rem;
    font-weight: 500;
}

.cmpl-transcript-paragraph {
    margin: 0;
    line-height: 1.6;
}

/* The time column: room for "00:00" in a video under an hour, for "00:00:00" in a longer one (buildContents sets has-hours), so the rows always line up. */
.cmpl-contents-list {
    --cmpl-ch-time-col: 2.45rem;  /* five monospace characters at 13px ("00:00": a digit is about .6em, a little more in some fonts), so the gap after a time is the gap, not spare column */
    container: cmpl-transcript / inline-size;
}

.cmpl-contents-list.has-hours {
    --cmpl-ch-time-col: 3.9rem;   /* eight ("00:00:00") */
}

/* A narrow panel: a paragraph's time goes up beside its speaker, and the transcript has the whole width under them (rather than a narrow column beside the times). */
@container cmpl-transcript (max-width: 360px) {
    .cmpl-para {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr); /* (the time keeps the time column's width, so the speaker starts where the chapter's title does) */
        gap: 0 .5rem; /* (none between the speaker's line and the text: the flex layout's gap would otherwise come between them) */
        align-items: baseline;
    }

    .cmpl-para-main {
        display: contents;
    }

    .cmpl-transcript-speaker {
        margin-bottom: 0;
        line-height: 1.3;
    }

    .cmpl-transcript-paragraph {
        grid-column: 1 / -1;
        margin-top: .15rem;
    }

    /* ... and the chapter's description at the top of its transcript too, starting where the text does (the panel's padding and the paragraphs' 3px border) */
    .cmpl-ch-lead {
        margin-left: calc(var(--cmpl-tab-pad) + 3px);
    }

    /* ... and a closed chapter's description in its heading, from under the time rather than the title (its right stays clear of the open/close button beside it) */
    .cmpl-ch-desc {
        margin-left: 0;
    }
}

/* ---- the AI assistant: the search button, and its panel (a history of questions and answers, the question box under it) ---- */

.cmpl-tabbar-icon.is-current {
    border-color: var(--cmpl-tab-active-bg);
    background-color: var(--cmpl-tab-active-bg);
    color: var(--cmpl-tab-active-text);
}

/* the designer's AI search icon (a magnifying glass with sparks: content/img/ico-ai-search.svg, 2026-10-08), drawn in the button's text colour */
.cmpl-ai-icon {
    display: block;
    width: calc(1.125em * 16.809 / 18.001);  /* the drawing's own proportions, 18px tall at the bar's 1rem */
    height: 1.125em;
    background-color: currentColor;
    -webkit-mask: url(/content/img/ico-ai-search.svg) center / contain no-repeat;
    mask: url(/content/img/ico-ai-search.svg) center / contain no-repeat;
}

.cmpl-assistant {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--cmpl-tab-text);
    font-size: .875rem;
    line-height: 1.5;
}

.cmpl-ai-log {
    display: flex;              /* (a column, so the suggested questions can sit at its foot: .cmpl-ai-suggest) */
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--cmpl-tab-pad) .5rem;
}

.cmpl-ai-log > * {
    flex: none;
}

/* The note on the assistant's panel when the player was loaded to preview unpublished changes: what the assistant reads is what is published. */
.cmpl-ai-unpub {
    margin-top: .75rem;
    padding: .6rem .75rem;
    border-left: 3px solid var(--cmpl-tab-active-bg);
    border-radius: .3rem;
    background-color: var(--cmpl-current-tint);
    font-size: .8125rem;
    line-height: 1.4;
}

.cmpl-ai-heading {
    margin: .25rem 0 .25rem;
    font-size: .95rem;
    font-weight: 600;
}

.cmpl-ai-intro p {
    margin: 0 0 .75rem;
    color: var(--cmpl-tab-muted);
}

.cmpl-ai-entry {
    padding: .75rem 0 1rem;
    border-top: 1px solid var(--cmpl-line);
}

.cmpl-ai-question {
    margin-left: auto;
    max-width: 90%;
    width: fit-content;
    padding: .55rem .9rem;
    border-radius: .9rem .9rem .25rem .9rem;
    background-color: var(--cmpl-current-tint);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cmpl-ai-answer {
    margin-top: .85rem;
    line-height: 1.6;
}

.cmpl-ai-answer-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
    color: var(--cmpl-tab-active-bg);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* its sparkle (the designer's, ico-ai-sparkle.svg), in the label's accent, about the height of the label's capitals and a little more */
.cmpl-ai-answer-label .cmpl-icon {
    height: 1.15em;
}

.cmpl-ai-message {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--cmpl-tab-muted);
}

/* While the assistant thinks: the sparkle the answer's label will have (.cmpl-ai-answer-label), in the accent, twinkling, and beside it, level with its middle, two lines of
   skeleton, a soft shine passing along them, where the answer's first words will be (no word on screen; "Thinking…" for screen readers).  Still for a visitor who has
   asked for less motion (FOCUS AND MOTION). */
.cmpl-ai-thinking {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}

.cmpl-ai-thinking .cmpl-ai-skeleton {
    flex: 1 1 auto;
    min-width: 0;
}

/* (the sparkle drawn in the page: the big sparkle still, the mark the answer's label has, and the two little ones twinkling, each now and then dimming and drawing in a
   little about its own middle and coming back, out of step with each other so they never fall into a beat) */
.cmpl-ai-sparkles {
    flex: none;
    height: 1rem; /* (about the height of the two lines beside it) */
    aspect-ratio: 15 / 12.613;
    overflow: visible;
    color: var(--cmpl-tab-active-bg);
    fill: currentColor;
}

.cmpl-ai-sparkles .cmpl-ai-sparkle-2,
.cmpl-ai-sparkles .cmpl-ai-sparkle-3 {
    transform-box: fill-box;
    transform-origin: center;
    animation: cmpl-ai-twinkle 2.4s ease-in-out infinite;
}

.cmpl-ai-sparkles .cmpl-ai-sparkle-3 {
    animation-delay: -1.5s; /* (.9s behind the other) */
}

/* (each little sparkle is bright most of the cycle; then a twinkle, dimming to 30% and drawing in to 70% and back, in the last 40% of it, about a second) */
@keyframes cmpl-ai-twinkle {
    0%, 60%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: .3;
        transform: scale(.7);
    }
}

.cmpl-ai-skeleton {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.cmpl-ai-skeleton span {
    display: block;
    height: .55rem;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--cmpl-skeleton) 0%, var(--cmpl-skeleton-shine) 50%, var(--cmpl-skeleton) 100%) 0 0 / 200% 100%;
    animation: cmpl-ai-shimmer 1.6s ease-in-out infinite;
}

.cmpl-ai-skeleton span:first-child {
    width: 92%;
}

.cmpl-ai-skeleton span:last-child {
    width: 64%;
}

@keyframes cmpl-ai-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

.cmpl-ai-title,
.cmpl-ai-heading-text {
    margin: .5rem 0 .25rem;
    font-size: .875rem;
    font-weight: 600;
}

.cmpl-ai-summary,
.cmpl-ai-paragraph,
.cmpl-ai-tip {
    margin: 0 0 .6rem;
}

.cmpl-ai-tip {
    padding: .5rem .75rem;
    border-left: 3px solid var(--cmpl-tab-active-bg);
    background-color: var(--cmpl-current-tint);
}

.cmpl-ai-list {
    margin: 0 0 .6rem;
    padding-left: 1.25rem;
}

.cmpl-ai-list li {
    margin-bottom: .25rem;
}

/* the answer's lists have their markers back (the reset at the top takes every list's away), in the accent colour */
ul.cmpl-ai-list {
    list-style: disc;
}

ol.cmpl-ai-list {
    list-style: decimal;
}

.cmpl-ai-list li::marker {
    color: var(--cmpl-tab-active-bg);
}

ol.cmpl-ai-list li::marker {
    font-weight: 600;
}

.cmpl-ai-quote {
    margin: 0 0 .6rem;
    padding-left: .75rem;
    border-left: 3px solid var(--cmpl-line);
    color: var(--cmpl-tab-muted);
}

.cmpl-ai-code {
    margin: 0 0 .6rem;
    padding: .6rem .75rem;
    overflow-x: auto;
    border-radius: .5rem;
    background-color: var(--cmpl-current-tint);
    font-size: .8125rem;
}

.cmpl-ai-divider {
    margin: .75rem 0;
    border: 0;
    border-top: 1px solid var(--cmpl-line);
}

/* a cited moment of the video: a button that jumps there and plays */
.cmpl-ai-time {
    display: inline-block;
    margin: 0 .1rem;
    padding: 0 .4rem;
    border: 0;
    border-radius: .3rem;
    background-color: var(--cmpl-current-tint);
    color: var(--cmpl-accent-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}

.cmpl-ai-time:hover {
    background-color: var(--cmpl-tab-active-bg);
    color: var(--cmpl-tab-active-text);
}

.cmpl-ai-time:focus-visible,
.cmpl-ai-input:focus-visible,
.cmpl-ai-send:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
}

/* Suggested questions (assistantSuggest), after YouTube's: a line of invitation, then each question an outlined pill on a line of its own at the right, where the question will
   sit once asked.  Straight after the introduction, in the history, so in a short panel the one thing scrolls. */
.cmpl-ai-suggest {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    padding: 0 0 .25rem;            /* (the introduction's last line leaves .75rem above) */
}

.cmpl-ai-suggest[hidden] {
    display: none;
}

.cmpl-ai-suggest-label {
    align-self: stretch;
    margin: 0 0 .25rem;
    color: var(--cmpl-tab-muted);   /* (like the introduction's sentence above it: the two read as one) */
    font-size: .875rem;
}

.cmpl-ai-chip {
    max-width: 100%;
    padding: .45rem .9rem;
    border: 1px solid var(--cmpl-line-strong);
    border-radius: 1.2rem;      /* a pill on one line; a rounded box, not an oval, when a long question wraps */
    background-color: var(--cmpl-tab-bg);
    color: var(--cmpl-tab-text);
    font: inherit;
    font-size: .8125rem;
    line-height: 1.35;
    text-align: right;
    text-wrap: balance;         /* a long question wraps into lines of about the same length; assistantFitChips then makes the pill no wider than its widest line */
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.cmpl-ai-chip:hover {
    border-color: var(--cmpl-tab-active-bg);
    background-color: var(--cmpl-current-tint);
}

.cmpl-ai-chip:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
}

.cmpl-ai-form {
    display: flex;
    flex: none;
    gap: .5rem;
    padding: .5rem var(--cmpl-tab-pad);
    border-top: 1px solid var(--cmpl-line);
    background-color: var(--cmpl-tab-bg);
}

.cmpl-ai-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.5rem;
    padding: 0 .9rem;
    border: 1px solid var(--cmpl-input-line);
    border-radius: .6rem;
    background-color: var(--cmpl-tab-bg);
    color: var(--cmpl-tab-text);
    font-size: .875rem;
}

.cmpl-ai-input::placeholder {
    color: var(--cmpl-tab-muted);
}

.cmpl-ai-send {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: .6rem;
    background-color: var(--cmpl-tab-active-bg);
    color: var(--cmpl-tab-active-text);
    cursor: pointer;
}

.cmpl-ai-send i {
    width: auto;
}

.cmpl-ai-send:disabled {
    opacity: .5;
    cursor: default;
}

.cmpl-ai-disclaimer {
    flex: none;
    margin: 0;
    padding: 0 var(--cmpl-tab-pad) .75rem;
    background-color: var(--cmpl-tab-bg);
    color: var(--cmpl-tab-muted);
    font-size: .75rem;
    line-height: 1.4;
}

/* ---- Section 5b: the Overview tab (the object's view: OverviewModel, drawn by the _Info*_Glow partials) ---- */

.cmpl-tab-overview {
    padding: 0 var(--cmpl-tab-pad) 1.25rem;
    color: var(--cmpl-tab-text);
    font-size: .875rem;
    line-height: 1.5;
}

/* each block (prose, cards, terms, details ...): the panel's full width, a rule between them */
.cmpl-ov-view > .cmpl-info-section {
    margin: 0 calc(-1 * var(--cmpl-tab-pad));
    padding: 1rem var(--cmpl-tab-pad);
}

.cmpl-ov-view > .cmpl-info-section + .cmpl-info-section {
    border-top: 1px solid var(--cmpl-line);
}

/* the video's title, heading the panel when the configurator keeps it off the video (_Tabs_Glow) */
.cmpl-ov-title {
    margin: 0;
    padding: 1rem 0 .25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

/* a block's title: a small caps label */
.cmpl-info-section-title {
    margin: 0 0 .6rem;
    color: var(--cmpl-tab-muted);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* prose (5 lines), and a card's biography or a term's definition (4): clamped, until Read more / Full biography (the script beside #disp-Overview in _Tabs_Glow) */
.cmpl-ov-text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.cmpl-ov-text.is-short.is-clamped {
    -webkit-line-clamp: 4;
}

.cmpl-ov-para + .cmpl-ov-para,
.cmpl-ov-text p + p {
    margin-top: .5rem;
}

.cmpl-ov-text p {
    margin: 0;
}

.cmpl-ov-more {
    margin-top: .4rem;
    padding: .125rem 0;
    border: 0;
    background: none;
    color: var(--cmpl-tab-active-bg);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

.cmpl-ov-more:hover {
    text-decoration: underline;
}

.cmpl-ov-more:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
    border-radius: 2px;
}

/* contributor cards: a round picture (or initials), the name, attributes, a biography */
.cmpl-ov-cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmpl-ov-card {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
}

.cmpl-ov-card + .cmpl-ov-card {
    margin-top: .875rem;
    padding-top: .875rem;
    border-top: 1px solid var(--cmpl-line);
}

.cmpl-ov-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--cmpl-overview-avatar-bg);
    color: var(--cmpl-accent-text);
    font-size: 1.125rem;
    font-weight: 600;
}

.cmpl-ov-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cmpl-ov-card-body {
    min-width: 0;
}

.cmpl-ov-name {
    margin: 0;
    font-weight: 600;
}

/* a term list or a set of tags: chips, the ones after the first eight behind "+n more".  Outlined is the line only, Filled the tint only; with neither (related objects that are only names)
   both, as a term list always was. */
.cmpl-ov-terms {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmpl-ov-term {
    padding: .2rem .7rem;
    border: 1px solid var(--cmpl-overview-term-border);
    border-radius: 999px;
    background-color: var(--cmpl-overview-term-bg);
    font-size: .8125rem;
}

.cmpl-ov-terms--outline .cmpl-ov-term {
    border-color: var(--cmpl-overview-panel-edge);
    background-color: transparent;
}

.cmpl-ov-terms--filled .cmpl-ov-term {
    border-color: transparent;
    background-color: var(--cmpl-overview-tag-fill-bg);
}

.cmpl-ov-term[hidden] {
    display: none;
}

/* the short values that are pairs with their label: key / value pairs */
.cmpl-ov-facts {
    display: grid;
    grid-template-columns: minmax(5.5rem, max-content) 1fr;
    gap: .3rem 1rem;
    margin: 0;
    font-size: .8125rem;
}

.cmpl-ov-fact {
    display: contents;
}

.cmpl-ov-fact dt {
    color: var(--cmpl-tab-muted);
}

.cmpl-ov-fact dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* any other row (a text, a list, a picture ...): its label above it */
.cmpl-ov-row + .cmpl-ov-row,
.cmpl-ov-facts + .cmpl-ov-row,
.cmpl-ov-row + .cmpl-ov-facts {
    margin-top: .875rem;
}

.cmpl-tab-overview .cmpl-info-label {
    display: block;
    margin: 0 0 .25rem;
    color: var(--cmpl-tab-muted);
    font-size: .75rem;
}

/* lists: bulleted, or a line of short entries */
.cmpl-ov-bullets {
    margin: 0;
    padding-left: 1.1rem;
}

.cmpl-ov-bullets li + li {
    margin-top: .25rem;
}

.cmpl-ov-bullets li[hidden] {
    display: none;
}

.cmpl-ov-inline {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* a picture or a file that is an image */
.cmpl-ov-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: .25rem;
}

/* a link under a card (the card with a link to the related object's website) */
.cmpl-ov-link {
    margin: .4rem 0 0;
    font-weight: 600;
}

.cmpl-ov-link a {
    color: var(--cmpl-tab-active-bg);
}

/* the Takeaways card: the pale card with a title, the first few entries, the rest behind "+n more" */
.cmpl-ov-takeaways {
    padding: .875rem 1rem;
    border: 1px solid var(--cmpl-overview-highlight-edge);
    border-radius: .75rem;
    background-color: var(--cmpl-overview-highlight-bg);
}

/* in a panel that is already a card (Bordered, Highlighted) the Takeaways are not a second card inside it */
.cmpl-ov-takeaways--flat {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.cmpl-ov-takeaways-title {
    margin: 0 0 .4rem;
    font-weight: 600;
}

/* sections: the columns (one, or two that stack in a narrow panel), the panels in them */
.cmpl-ov-columns {
    display: grid;
    gap: 1rem 1.5rem;
}

.cmpl-ov-columns--two {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.cmpl-ov-column {
    min-width: 0;
}

.cmpl-ov-panel + .cmpl-ov-panel {
    margin-top: 1rem;
}

.cmpl-ov-panel-title {
    margin: 0 0 .5rem;
    font-size: .875rem;
    font-weight: 600;
}

/* panel styles: Bordered a line round it, Highlighted the pale card, Minimal no spacing of its own (None is a plain panel) */
.cmpl-ov-panel--bordered {
    padding: .875rem 1rem;
    border: 1px solid var(--cmpl-overview-panel-edge);
    border-radius: .75rem;
}

.cmpl-ov-panel--highlighted {
    padding: .875rem 1rem;
    border: 1px solid var(--cmpl-overview-highlight-edge);
    border-radius: .75rem;
    background-color: var(--cmpl-overview-highlight-bg);
}

.cmpl-ov-panel--minimal + .cmpl-ov-panel {
    margin-top: .5rem;
}

/* something that closes behind its title (a collapsible section, an expandable panel, an Expandable item) */
.cmpl-ov-disclosure > summary {
    cursor: pointer;
    font-weight: 600;
    list-style-position: inside;
}

.cmpl-ov-disclosure > summary:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 2px;
    border-radius: 2px;
}

.cmpl-ov-disclosure-body {
    margin-top: .5rem;
}

.cmpl-ov-row.cmpl-ov-disclosure {
    padding: .5rem 0;
    border-top: 1px solid var(--cmpl-overview-panel-edge);
    border-bottom: 1px solid var(--cmpl-overview-panel-edge);
}

/* related objects inside a panel (an Original view's relationship item) and in the relationship area */
.cmpl-ov-related .cmpl-ov-cards + .cmpl-ov-cards {
    margin-top: .875rem;
}

/* a related object's own view, inside its card: plainer than the tab's sections */
.cmpl-ov-section--nested + .cmpl-ov-section--nested {
    margin-top: .75rem;
}

.cmpl-ov-section--nested {
    margin-top: .5rem;
}

.cmpl-ov-card-body > .cmpl-ov-text {
    margin-top: .2rem;
}

.cmpl-ov-section--nested .cmpl-info-section-title {
    margin-bottom: .35rem;
}

/* ---- Section 5c: loading shell (body) ---- */

.cmpl-body {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
}

/* ---- Section 6: classes built by CMPL_Transcript_Glow.js (language / segment-share / chapters) ---- */


/* ---- Client-restricted video size (was an inline <style> in Index_Glow.cshtml) ---- */

/* When the configurator restricts the video size, the two player containers (#preLoadingContainer and #full-container) carry
   .cmpl-restrict-video-size and Index_Glow.cshtml sets --configuration_video_max_width / --configuration_video_max_height.
   These rules used to be an inline <style> in the view. :where() adds no specificity, so each selector keeps the exact specificity
   of the plain "video" / ".thumb-wrapper" selector it replaced. In the fullscreen modes the restriction is lifted. */
:where(.cmpl-restrict-video-size) video {
    max-height: var(--configuration_video_max_height) !important;
    max-width: var(--configuration_video_max_width) !important;
}

html.cmpl-fullscreen :where(.cmpl-restrict-video-size) video {
    max-height: unset !important;
    max-width: unset !important;
}

:where(.cmpl-restrict-video-size) .thumb-wrapper {
    background-size: contain !important;
    max-height: var(--configuration_video_max_height) !important;
    max-width: var(--configuration_video_max_width) !important;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

html.cmpl-fullscreen :where(.cmpl-restrict-video-size) .thumb-wrapper {
    background-size: contain !important;
    max-height: unset !important;
    max-width: unset !important;
}

/* ---- Client font override (was an inline <style> in Index_Glow.cshtml) ---- */

/* When a client has configured a Google font, Index_Glow.cshtml emits <span hidden id="cmpl-font-override"> and sets
   --configuration_font_family; the font is then forced onto these elements page-wide (the modals live outside the player
   containers, so this keys off the document, not a container). These rules used to be an inline <style>. :where() adds no
   specificity, so each rule keeps the specificity of the plain selector it replaced (element / .fa class). Icons get their font back. */
:where(:root:has(#cmpl-font-override)) :is(h1, h2, h3, h4, h5, h6, p, div, blockquote, pre, span, button) {
    font-family: var(--configuration_font_family), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

:where(:root:has(#cmpl-font-override)) :is(.fa, .far, .fas, .fa-solid, .fa-regular) {
    font-family: "Font Awesome 7 Free" !important;
}

/* ==========================================================================
   POPUP MENUS and DIALOGS (new design).  Both are children of #media-container, which the player's script (positionPopMenu) positions them in.
   One popup menu element (#popmenu) serves every menu: the player fills it from a menu definition, and a row can open a sub-menu (the
   header then becomes a back button).  Where the open menu goes (data-mode):
     above   every layout, tabs open or closed: above the control bar, in line with the video's right edge (floating over the progress bar), as high as the room allows (short of the
             title while there is room enough, --cmpl-menu-float-min-room; with less, over it), scrolling when there are more rows
     video   a tiny video: covering it edge to edge, solid, scrolling
   A dialog (.cmpl-dialog-overlay) is laid over the whole player, tabs included, centered, with room around it; with no tabs that is just the video, and the
   dialog scrolls.  Colors, radii and sizes come from the DESIGN TOKENS near the top of this file.
   ========================================================================== */

.cmpl-popmenu {
    position: absolute;
    z-index: 240;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1.1em 1.25em 0.6em;
    font-size: var(--cmpl-menu-font-size);
    line-height: 1.3;
    color: var(--cmpl-menu-text);
    background: var(--cmpl-menu-bg);
    -webkit-backdrop-filter: blur(var(--cmpl-menu-blur));
    backdrop-filter: blur(var(--cmpl-menu-blur));
    border-radius: var(--cmpl-menu-radius);
    box-shadow: var(--cmpl-menu-shadow);
}

.cmpl-popmenu[data-mode="above"] {
    right: var(--cmpl-menu-right);
    bottom: var(--cmpl-menu-bottom);
    width: min(var(--cmpl-menu-width), var(--cmpl-menu-max-width));
    max-height: var(--cmpl-menu-max-height);
}

/* Opening, the floating menu pops up: from a touch smaller, out of its bottom right corner, a little lower, and faded, quickly easing out (is-opening, put on by openPopMenu
   and taken off when it has played).  Closing, it draws in a little, back into that corner, and fades out, quicker still, ignoring clicks meanwhile (is-closing, put on by
   closePopMenu, which hides it when it has played); but going from one menu straight to another, the old one goes at once (every menu is the one element) and the new one
   pops up.  Not the menu laid edge to edge over the video: there a growing edge looks wrong.  Still for a visitor who has asked for less motion (FOCUS AND MOTION). */
.cmpl-popmenu[data-mode="above"].is-opening {
    transform-origin: bottom right;
    animation: cmpl-menu-pop var(--cmpl-menu-pop-duration) cubic-bezier(.2, .8, .3, 1);
}

@keyframes cmpl-menu-pop {
    from {
        opacity: 0;
        transform: translateY(var(--cmpl-menu-pop-rise)) scale(var(--cmpl-menu-pop-scale));
    }
}

.cmpl-popmenu[data-mode="above"].is-closing {
    transform-origin: bottom right;
    pointer-events: none;
    animation: cmpl-menu-unpop var(--cmpl-menu-unpop-duration) ease-in forwards;
}

@keyframes cmpl-menu-unpop {
    to {
        opacity: 0;
        transform: scale(var(--cmpl-menu-unpop-scale));
    }
}

/* Over a tiny video, the whole of it: edge to edge, square, solid, and a little closer round its content, so as many rows show as can */
.cmpl-popmenu[data-mode="video"] {
    left: 0;
    right: 0;
    top: var(--cmpl-menu-top);
    height: var(--cmpl-menu-height);
    padding: 0.8em 1em 0.4em;
    border-radius: 0;
    background: var(--cmpl-menu-bg-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

@keyframes cmpl-menu-fade-out {
    to {
        opacity: 0;
    }
}

/* ... opening, it fades in where it is, its rows rising a little into place (its edges are the video's: growing or sliding, the picture would show round it); closing, it fades
   out, quicker.  The floating menu's timings.  Still for less motion. */
.cmpl-popmenu[data-mode="video"].is-opening {
    animation: cmpl-menu-fade-in var(--cmpl-menu-pop-duration) ease-out;
}

.cmpl-popmenu[data-mode="video"].is-opening > * {
    animation: cmpl-menu-lift var(--cmpl-menu-pop-duration) cubic-bezier(.2, .8, .3, 1);
}

.cmpl-popmenu[data-mode="video"].is-closing {
    pointer-events: none;
    animation: cmpl-menu-fade-out var(--cmpl-menu-unpop-duration) ease-in forwards;
}

@keyframes cmpl-menu-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes cmpl-menu-lift {
    from {
        transform: translateY(var(--cmpl-menu-pop-rise));
    }
}

.cmpl-popmenu-header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.7em;
    border-bottom: 1px solid var(--cmpl-menu-divider);
}

.cmpl-popmenu-headleft {
    flex: 1 1 auto;
    min-width: 0;
}

.cmpl-popmenu-title {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

.cmpl-popmenu-back {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.cmpl-popmenu-back i {
    font-size: 0.9em;
}

.cmpl-popmenu-close {
    display: none; /* only where the menu is laid over the video: above the control bar a click anywhere else closes it */
    margin: -0.4em -0.5em -0.4em 0;
    padding: 0.4em 0.5em;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
}

.cmpl-popmenu:not([data-mode="above"]) .cmpl-popmenu-close {
    display: block;
}

.cmpl-popmenu-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: 0.4em;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cmpl-menu-divider) transparent;
}

.cmpl-popmenu-group-label {
    margin: 0.9em 0 0.2em;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmpl-menu-text-muted);
}

.cmpl-popmenu-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.4em 0.35em; /* (0.55em before 2026-10-09: the rows tightened in every menu) */
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.cmpl-popmenu-row:hover {
    background: var(--cmpl-menu-row-hover-bg);
}

.cmpl-popmenu-row[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
}

.cmpl-popmenu-row:focus-visible,
.cmpl-popmenu-close:focus-visible,
.cmpl-popmenu-back:focus-visible,
.cmpl-dialog-close:focus-visible,
.cmpl-text-trigger:focus-visible,
.cmpl-icon-trigger:focus-visible {
    outline: 2px solid var(--cmpl-menu-focus-ring);
    outline-offset: -2px;
}

.cmpl-popmenu-icon {
    display: flex;
    flex: none;
    align-items: center;
    width: 2.6em;
    font-size: 1.05em;
}

.cmpl-popmenu-icon.is-code {
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cmpl-menu-text-muted);
}

.cmpl-popmenu-label {
    flex: 1 1 auto;
    min-width: 0;
}

.cmpl-popmenu-note {
    margin-inline-start: 0.6em;
    font-size: 0.75em;
    color: var(--cmpl-menu-text-muted);
}

/* the rest of a label, muted while it is not in use (the time of "Start at", unticked) */
.cmpl-popmenu-tail.is-muted {
    color: var(--cmpl-menu-text-muted);
}

.cmpl-popmenu-value {
    flex: none;
    margin-inline-start: 0.8em;
    color: var(--cmpl-menu-text-muted);
}

.cmpl-popmenu-trailing {
    flex: none;
    margin-inline-start: 0.6em;
    padding-inline-start: 0.2em;
    font-size: 0.85em;
}

.cmpl-popmenu-check {
    visibility: hidden;
}

.cmpl-popmenu-row[aria-checked="true"] .cmpl-popmenu-check {
    visibility: visible;
}

/* A section of tiles (a definition's section.grid, the playback speeds): so many to a row, each a choice, the one chosen filled with the accent; a note (Normal) under its
   label.  Every tile is as tall, whether or not it has a note. */
.cmpl-popmenu-section.is-grid {
    display: grid;
    grid-template-columns: repeat(var(--cmpl-popmenu-columns, 3), 1fr);
    gap: .4em;
    padding-top: .2em;
}

.cmpl-popmenu-tile {
    flex-direction: column;
    justify-content: center;
    min-height: 3.2em;
    padding: .4em .25em;
    background: var(--cmpl-menu-tile-bg);
    text-align: center;
}

.cmpl-popmenu-tile .cmpl-popmenu-label {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: .1em;
    font-weight: 600;
}

.cmpl-popmenu-tile .cmpl-popmenu-note {
    margin: 0;
    font-size: .7em;
    font-weight: 400;
}

.cmpl-popmenu-tile[aria-checked="true"] {
    background: var(--cmpl-control-active-bg);
}

.cmpl-popmenu-tile[aria-checked="true"] .cmpl-popmenu-note {
    color: inherit;
}

/* the "Aa" tiles of the caption menus */
.cmpl-aa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    height: 1.9em;
    padding: 0 0.2em;
    border-radius: 6px;
    font-weight: 600;
    line-height: 1;
}

.cmpl-aa[data-style="boxed"] {
    background: var(--cmpl-caption-boxed-bg);
    color: var(--cmpl-white);
}

.cmpl-aa[data-style="high"] {
    background: var(--cmpl-caption-high-bg);
    color: var(--cmpl-caption-high-text);
}

.cmpl-aa[data-style="outline"] {
    color: var(--cmpl-caption-outline-text);
    text-shadow: var(--cmpl-caption-outline-shadow);
}

/* The buttons of the control bar that open menus: text (speed, language, quality) or an icon (accessibility), lit while their menu is open. */
.cmpl-text-trigger {
    width: auto;
    min-width: 44px;
    padding: 0 0.5rem;
    border: 0;
    color: var(--cmpl-control-text);
    font-family: inherit;
    font-size: 0.9375rem; /* (13px before 2026-10-09) */
    font-weight: 600;
    letter-spacing: 0.04em;
}

.cmpl-icon-trigger {
    border: 0;
    color: var(--cmpl-control-text);
}

.cmpl-icon-trigger i {
    font-size: 1.3rem; /* (1.15rem before 2026-10-09) */
}

/* Dialogs */
.cmpl-dialog-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 245;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--cmpl-dialog-margin);
    background: var(--cmpl-dialog-backdrop);
}

.cmpl-dialog {
    box-sizing: border-box;
    width: min(100%, var(--cmpl-dialog-width));
    max-height: 100%;
    overflow-y: auto;
    padding: 1.4em 1.6em 1.6em;
    font-size: var(--cmpl-dialog-font-size);
    line-height: 1.35;
    color: var(--cmpl-dialog-text);
    background: var(--cmpl-dialog-bg);
    border-radius: var(--cmpl-dialog-radius);
    box-shadow: var(--cmpl-dialog-shadow);
}

.cmpl-dialog:focus {
    outline: none;
}

.cmpl-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
}

.cmpl-dialog-title {
    margin: 0;
    font-size: 1.08em;
    font-weight: 600;
}

.cmpl-dialog-sub {
    margin: 0.35em 0 0;
    color: var(--cmpl-dialog-text-muted);
    font-size: 0.9em;
}

.cmpl-dialog-close {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.6em;
    height: 2.6em;
    border: 1px solid var(--cmpl-dialog-divider);
    border-radius: 8px;
    background: var(--cmpl-dialog-bg);
    color: inherit;
    font-size: 1em;
    cursor: pointer;
}

.cmpl-dialog-close:focus-visible {
    outline-color: var(--cmpl-dialog-text);
}

.cmpl-dialog-block {
    margin-top: 1.2em;
    padding-top: 1em;
    border-top: 1px solid var(--cmpl-dialog-divider);
}

.cmpl-dialog-block h3 {
    margin: 0 0 0.4em;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmpl-dialog-text-muted);
}

.cmpl-dialog-block p {
    margin: 0;
}

.cmpl-kbd-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17em, 100%), 1fr));
    column-gap: 2.5em;
    margin-top: 0.4em;
}

.cmpl-kbd-title {
    margin: 1.4em 0 0.4em;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cmpl-dialog-text-muted);
}

.cmpl-kbd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.5em 0;
    border-top: 1px solid var(--cmpl-dialog-divider);
}

.cmpl-kbd-keys {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.35em;
}

.cmpl-kbd-or {
    font-size: 0.85em;
    color: var(--cmpl-dialog-text-muted);
}

.cmpl-dialog kbd {
    min-width: 1.9em;
    padding: 0.2em 0.5em;
    border: 1px solid var(--cmpl-key-border);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--cmpl-key-bg);
    color: var(--cmpl-key-text);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
}


/* The control bar's two sets of menu buttons: the full set (speed, language, accessibility, download, share) in a wide bar, the compact set (gear, dots) in a narrow one. */
html:not(.cmpl-bar-compact) .cmpl-bar-compact-only,
html.cmpl-bar-compact .cmpl-bar-full-only {
    display: none !important;
}

/* ---- CONTROL BAR: modes ----
   html.cmpl-bar-compact / -overlay / -minimal / -tiny are set by the player (updateBarMode) from the video's width and the --cmpl-bar-*-below tokens; from narrow to wide each class
   is on whenever the video is narrower than its token.  What each takes off the bar:
     compact  the full set of menu buttons (above)         overlay  play, the skips (.cmpl-bar-transport): the big buttons over the video take over
     minimal  the time (.cmpl-bar-time)                    tiny     the restart button (.cmpl-bar-restart)  */
html.cmpl-bar-overlay {
    --cmpl-control-size: 40px;
}

html.cmpl-bar-minimal {
    --cmpl-control-size: 36px;
}

html.cmpl-bar-overlay .cmpl-bar-transport,
html.cmpl-bar-minimal .cmpl-bar-time,
html.cmpl-bar-tiny .cmpl-bar-restart {
    display: none !important;
}

/* ---- CONTROL BAR: the big transport buttons over the video (#center-controls; only in html.cmpl-bar-overlay) ----
   Shown: whenever the video is paused (once it has played: before that the big play button is up); while it plays, on hover/touch/focus like the bar, fading after the
   same couple of seconds.  Pressing play makes them go away at once (the player adds .cmpl-center-quiet to the video container, and takes it off when the pointer really
   moves or the video pauses).  .cmpl-paused / .cmpl-played / .cmpl-center-quiet are on #video-container (syncCenterControls). */
html:not(.cmpl-bar-overlay) .cmpl-center-controls {
    display: none;
}

.cmpl-center-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 120;
    display: flex;
    align-items: center;
    gap: var(--cmpl-center-gap);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cmpl-center-fade) ease-in var(--cmpl-controls-hide-delay); /* going away a moment after the bar's pointer leaves, with the bar */
}

/* pressing play: at once, no delay */
#video-container.cmpl-center-quiet .cmpl-center-controls {
    transition-delay: 0s;
}

/* before it has played once the big play button is up instead (and these must not be reachable by Tab) */
#video-container:not(.cmpl-played) .cmpl-center-controls {
    visibility: hidden;
}

#video-container.cmpl-played.cmpl-paused .cmpl-center-controls,
#video-container.cmpl-played:not(.cmpl-center-quiet) .video-control-overlay.mousehovered ~ .cmpl-center-controls,
#video-container.cmpl-played .video-control-overlay.focused ~ .cmpl-center-controls {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--cmpl-controls-fade-in) ease-out;
}

.cmpl-center-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--cmpl-center-background);
    color: var(--cmpl-center-text);
    cursor: pointer;
    transition: background-color 0.2s;
}

.cmpl-center-button:hover,
.cmpl-center-button:focus-visible {
    background-color: var(--configuration_accent_color);
}

.cmpl-center-main {
    width: var(--cmpl-center-main-size);
    height: var(--cmpl-center-main-size);
    font-size: calc(var(--cmpl-center-main-size) * .38);
}

.cmpl-center-side {
    width: var(--cmpl-center-side-size);
    height: var(--cmpl-center-side-size);
    font-size: calc(var(--cmpl-center-main-size) * .25);
}

.cmpl-center-small {
    width: var(--cmpl-center-small-size);
    height: var(--cmpl-center-small-size);
    font-size: calc(var(--cmpl-center-main-size) * .2);
}

/* The skip buttons' icon: the designer's circular arrow (content/img/ico-skip-back.svg, -forward.svg; 2026-10-08), drawn in the button's text colour, with the number of
   seconds (configurable, so it is text rather than part of the picture) where the design puts it.  Sized from the font size like the icon it replaced. */
.cmpl-bar-transport .cmpl-skip-icon {
    color: var(--light-mode-primary-light); /* (drawn in its text colour, which a button's own would make dark) */
}

.cmpl-skip-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cmpl-skip-arrow {
    display: block;
    width: calc(1.2em * 19.997 / 22.253);  /* the drawing's own proportions */
    height: 1.2em;
    background-color: currentColor;
    -webkit-mask: var(--cmpl-skip-arrow) center / contain no-repeat;
    mask: var(--cmpl-skip-arrow) center / contain no-repeat;
}

.cmpl-skip-back {
    --cmpl-skip-arrow: url(/content/img/ico-skip-back.svg);
}

.cmpl-skip-forward {
    --cmpl-skip-arrow: url(/content/img/ico-skip-forward.svg);
}

/* in the bar: a little taller than its neighbours' 16px icons, as a ring with a number in it looks smaller than a solid shape of the same height (17px before 2026-10-09) */
.control-button .cmpl-skip-icon {
    font-size: 19px;
}

/* the number: placed by the centre of its digits' weight, not of its box, as that is what the eye centres.  The weight sits a little right of the box's middle (a heavy 0 or 3
   beside a light 1: about .05em in 10 and 30, .01em in 5 and 60) and .06em below it (digits have no descenders), hence the translate's extra.  It goes at 59% down the
   drawing: between the ring's centre (55%) and the middle of the space inside the ring (60.5%, lower as the arrow's head dips into the top), chosen by eye (2026-10-09). */
.cmpl-skip-number {
    position: absolute;
    top: 59%;
    left: 50%;
    transform: translate(calc(-50% - .04em), calc(-50% - .06em));
    font-size: .5em;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; /* every digit as wide as the others and centred in it, so a narrow 1 (a number of seconds is configurable) does not throw the number off centre */
}

.cmpl-skip-number-wide {
    font-size: .38em; /* three digits */
}

/* The boxed download icon at the end of a download row. */
.cmpl-popmenu-trailing.is-boxed {
    padding: 0.35em 0.4em;
    border: 1px solid var(--cmpl-menu-text-muted);
    border-radius: 6px;
    font-size: 0.8em;
    line-height: 1;
}

/* Sections of a menu (a divider between them), rows that are links, icons that are lit. */
.cmpl-popmenu-section.is-separated {
    margin-top: 0.4em;
    padding-top: 0.4em;
    border-top: 1px solid var(--cmpl-menu-divider);
}

a.cmpl-popmenu-row {
    text-decoration: none;
}

.cmpl-popmenu-icon i {
    width: 1.2em;
    text-align: center;
}

/* A row's icon that is one of the designer's (popMenuRow's svg), in the same 1.2em column as the Font Awesome ones and as large as the glyph it replaced: Font Awesome draws
   captions .875em high, a keyboard .75em, a document the whole 1em.  So too a trailing icon (trailingSvg): the open-a-dialog box .875em, the download arrow 1em. */
.cmpl-popmenu-svg {
    display: flex;
    justify-content: center;
    width: 1.2em;
}

.cmpl-popmenu-svg .cmpl-icon,
.cmpl-popmenu-trailing.is-svg .cmpl-icon {
    height: 1em;
}

.cmpl-popmenu-svg .cmpl-icon-cc-on,
.cmpl-popmenu-svg .cmpl-icon-cc-off,
.cmpl-popmenu-trailing.is-svg .cmpl-icon-open {
    height: .875em;
}

.cmpl-popmenu-svg .cmpl-icon-keyboard {
    height: .75em;
}

.cmpl-popmenu-trailing.is-svg {
    display: inline-flex;
    align-items: center;
}

/* A checkbox row's box (kind: 'check'), drawn rather than an icon so the box and its tick can be different colours: a light outline when it is not ticked; ticked, filled with
   the accent and a white tick, the light edge keeping the box clear of the dark menu whatever the accent. */
.cmpl-menu-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--cmpl-menu-check-edge);
    border-radius: 4px;
    vertical-align: middle;
}

.cmpl-menu-checkbox i {
    display: none;
    color: var(--cmpl-menu-check-tick);
    font-size: 10px;
}

.cmpl-menu-checkbox.is-checked {
    border-color: var(--cmpl-menu-check-edge);
    background-color: var(--cmpl-menu-check-bg);
}

.cmpl-menu-checkbox.is-checked i {
    display: block;
}

/* Smaller dialogs (cite, embed), and what they hold */
.cmpl-dialog-narrow {
    width: min(100%, 40rem);
}

/* ---- RELATED CONTENT: the grid of links laid over the video when it ends, or when asked for (executeSearchRelatedContent; markup in _RelatedContentSearchResults_Glow.cshtml) ---- */

/* It sits in the controls layer, over the video and under the control bar: room above for the title, below for the bar. */
.cmpl-related-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 3.5rem 1rem 5.5rem;
    background: var(--cmpl-related-bg);
}

@media (max-width: 414px) {
    .cmpl-related-overlay {
        padding: 2.5rem 0.75rem 4rem;
    }
}

.cmpl-related {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    grid-auto-rows: max-content; /* each row is as tall as its cells (they are 16:9 of their width), however short the grid's box */
    gap: var(--cmpl-related-gap);
    align-content: start;
    align-items: start;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--configuration_accent_color) var(--light-mode-progress-bar-background-color);
}

.cmpl-related-cell {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--cmpl-related-radius);
    background: var(--cmpl-related-tile-bg);
    color: var(--cmpl-related-text);
    text-decoration: none;
}

.cmpl-related-cell:hover {
    background: var(--cmpl-related-tile-hover-bg);
}

.cmpl-related-cell:focus-visible {
    outline: 2px solid var(--cmpl-related-text);
    outline-offset: -2px; /* (inside the tile: the grid scrolls, and its edge would cut a ring outside it) */
}

.cmpl-related-thumb {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-size: cover;
}

/* The title is always there (touch has no hover); the description joins it on hover and focus. */
.cmpl-related-text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    padding: 1.5em 0.6em 0.5em;
    background: var(--cmpl-related-scrim);
    font-size: 0.8125rem;
    line-height: 1.25;
}

.cmpl-related-title,
.cmpl-related-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cmpl-related-title {
    font-weight: 600;
}

.cmpl-related-desc {
    display: none;
    font-size: 0.75rem;
    opacity: 0.9;
}

.cmpl-related-cell:hover .cmpl-related-desc,
.cmpl-related-cell:focus-visible .cmpl-related-desc {
    display: -webkit-box;
}

/* An item with no thumbnail: its icon and words on the tile. */
.cmpl-related-cell.is-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
}

.cmpl-related-cell.is-text .cmpl-related-text {
    position: static;
    padding: 0;
    background: none;
}

.cmpl-related-cell.is-text .cmpl-related-desc {
    display: -webkit-box;
}

.cmpl-related-icon {
    flex: none;
    font-size: 1.5rem;
}

/* In the Overview tab the same links are cards: the picture, and the title under it.  (The description is not shown there.) */
.cmpl-overview-related .cmpl-related {
    grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
    gap: 1rem 0.75rem;
    height: auto;
    overflow: visible;
}

.cmpl-overview-related .cmpl-related-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
    color: var(--cmpl-tab-text);
}

.cmpl-overview-related .cmpl-related-cell:hover {
    background: none;
}

.cmpl-overview-related .cmpl-related-cell:focus-visible {
    outline: 2px solid var(--cmpl-tab-active-bg);
    outline-offset: 3px;
}

.cmpl-overview-related .cmpl-related-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background-color: var(--cmpl-overview-related-tile-bg);
}

.cmpl-overview-related .cmpl-related-text {
    position: static;
    padding: 0;
    background: none;
    font-size: 0.8125rem;
}

.cmpl-overview-related .cmpl-related-cell:hover .cmpl-related-title,
.cmpl-overview-related .cmpl-related-cell:focus-visible .cmpl-related-title {
    text-decoration: underline;
}

.cmpl-overview-related .cmpl-related-cell .cmpl-related-desc,
.cmpl-overview-related .cmpl-related-cell:hover .cmpl-related-desc,
.cmpl-overview-related .cmpl-related-cell:focus-visible .cmpl-related-desc {
    display: none;
}

/* with no picture: the icon on a tile the shape of a picture */
.cmpl-overview-related .cmpl-related-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background-color: var(--cmpl-overview-related-tile-bg);
    color: var(--cmpl-tab-muted);
}

.cmpl-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 1.1em 0 0;
    padding: 0.7em 1.2em;
    border: 0;
    border-radius: 8px;
    background: var(--cmpl-button-bg);
    color: var(--cmpl-button-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cmpl-button:hover {
    background: var(--cmpl-button-hover-bg);
}

.cmpl-button:focus-visible {
    outline: 2px solid var(--cmpl-dialog-text);
    outline-offset: 2px;
}

.cmpl-code,
.cmpl-cite-text {
    margin: 1.1em 0 0;
    padding: 1em 1.1em;
    background: var(--cmpl-code-bg);
    color: var(--cmpl-code-text);
    border-radius: 8px;
    user-select: all;
}

.cmpl-code {
    max-height: 16em;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.82em;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere; /* wraps at spaces first; only an address too long for the box is broken */
}

.cmpl-cite-text {
    line-height: 1.5;
}

/* ==========================================================================
   FOCUS AND MOTION (accessibility)
   Every control shows where the keyboard is.  The bar's buttons also take a light tint on keyboard focus (--cmpl-control-hover-bg, as under the pointer), but a tint alone is not
   a reliable indicator, so they get a ring as well; the dark halo keeps the white ring visible over a bright picture.
   ========================================================================== */

.control-button:focus-visible,
.c-big-play-button:focus-visible,
.ad-big-play-button:focus-visible,
.cmpl-center-button:focus-visible,
.cmpl-autoplay-unmute:focus-visible,
.cmpl-autoplay-close:focus-visible {
    outline: 2px solid var(--cmpl-focus-ring);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px var(--cmpl-focus-halo);
}

/* The video bar's buttons: the ring goes round their rounded highlight (in the transparent border it leaves: .cmpl-controls-bar .control-button) instead of over it, so the
   highlight keeps its size and corners; the halo is just outside. */
.cmpl-controls-bar .control-button:focus-visible {
    outline: var(--cmpl-control-highlight-inset) solid var(--cmpl-focus-ring);
    outline-offset: calc(var(--cmpl-control-highlight-inset) * -1);
    box-shadow: 0 0 0 2px var(--cmpl-focus-halo);
}

/* the time field in the bar */
.cmpl-time-jump-input:focus-visible {
    outline: 2px solid var(--cmpl-focus-ring);
    outline-offset: 1px;
}

/* the two sliders' knobs */
.progress-indicator-crosshair:focus-visible,
.volume-indicator-crosshair:focus-visible {
    outline: 3px solid var(--cmpl-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--cmpl-focus-halo);
}

/* Windows High Contrast (forced colors) replaces every background color, so what only a color said (how far it has played, the knob, the volume, the current tab, chapter and line)
   is given in system colors, which it keeps.  (The icons have their own rule, above.) */
@media (forced-colors: active) {
    .progress-bar-segment-fill,
    .progress-indicator-crosshair,
    .volume-indicator-crosshair,
    .cmpl-tab.is-current,
    .cmpl-tabbar-icon.is-current,
    .transcript-highlight {
        forced-color-adjust: none;
        background-color: Highlight;
        color: HighlightText;
    }

    .cmpl-ch.is-current > .cmpl-ch-head,
    .cmpl-para.is-current {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

/* A visitor who has asked their system for less motion gets no animated transitions or movement; the loading spinner keeps turning (it is the only sign that something is happening). */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .spinner-cadmore {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }

    /* The controls still wait a moment before going (a wait is not motion): they just go without fading. */
    #video-container .video-control-overlay,
    #video-container:not(.cmpl-center-quiet) .cmpl-center-controls {
        transition-delay: var(--cmpl-controls-hide-delay) !important;
    }

    #video-container .video-control-overlay.mousehovered,
    #video-container .video-control-overlay.hovered,
    #video-container .video-control-overlay.force_hovered,
    #video-container .video-control-overlay.touchpause,
    #video-container .video-control-overlay.focused,
    #video-container.cmpl-played.cmpl-paused .cmpl-center-controls,
    #video-container.cmpl-played:not(.cmpl-center-quiet) .video-control-overlay.mousehovered ~ .cmpl-center-controls,
    #video-container.cmpl-played .video-control-overlay.focused ~ .cmpl-center-controls {
        transition-delay: 0s !important;
    }
}

/* ==========================================================================
   STATE HELPERS (toggled by JavaScript - must stay last, after the semantic classes above)
   ========================================================================== */

.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;   /* "border: 0" (not just width): the original relied on Font Awesome 5's own .sr-only rule for border-style: none */
}