/*
 * quebecstudio/cookie-consent-kit — default styles
 *
 * Rules read `.qsc :where(.qsc-x)` (0-1-0): high enough to survive framework
 * resets, low enough that `.qsc .qsc-button { … }` (0-2-0) overrides them. No
 * @layer — an unlayered site rule would beat a layered one regardless.
 *
 * Variable defaults sit at 0-0-0, so any rule on `qs-consent` wins.
 *
 * Lengths are multiples of `--qsc-scale`, so a theme rewriting the root font
 * size cannot shrink the component.
 *
 * Focus rings carry `!important`, the only answer to a host suppressing
 * outlines. Restyle them through `--qsc-focus-ring`, not by redeclaring.
 *
 * See docs/styling.md.
 */

/* Hidden until defined, so a failed script leaves the page clean. */
qs-consent:not(:defined) {
    display: none;
}

/* `allow-discrete` animates the exit, `@starting-style` the entry. */
.qsc :where(.qsc-root),
.qsc :where(.qsc-reopen) {
    display: none;
    opacity: 0;
    translate: 0 100%;
    transition:
        opacity 0.25s ease-out,
        translate 0.25s ease-out,
        display 0.25s allow-discrete;
}

.qsc[data-state='banner'] .qsc-root {
    display: block;
    opacity: 1;
    translate: 0 0;
}

.qsc[data-state='idle'] .qsc-reopen {
    display: inline-flex;
    opacity: var(--qsc-reopen-opacity);
    translate: 0 0;
}

@starting-style {
    .qsc[data-state='banner'] .qsc-root {
        opacity: 0;
        translate: 0 100%;
    }

    .qsc[data-state='idle'] .qsc-reopen {
        opacity: 0;
        translate: 0 100%;
    }
}

/* On the host, never on a descendant: declaring them on `.qsc` would put site
   overrides out of reach. */
:where(qs-consent) {
    --qsc-bg: #ffffff;
    --qsc-fg: #000000;
    --qsc-accent: #000000;
    --qsc-accent-fg: #ffffff;
    --qsc-rule: rgb(0 0 0 / 0.15);
    --qsc-hover: rgb(0 0 0 / 0.06);

    /* The anchor. Floor and ceiling survive a theme rewriting the root font size. */
    --qsc-scale: clamp(14px, 1rem, 1.5rem);

    --qsc-font: system-ui, sans-serif;
    --qsc-size: calc(var(--qsc-scale) * 0.9375);
    --qsc-radius: 0;
    --qsc-border: 1px solid var(--qsc-accent);
    --qsc-focus-ring: 2px solid var(--qsc-accent);
    --qsc-max-width: calc(var(--qsc-scale) * 72);
    --qsc-gap: var(--qsc-scale);
    --qsc-max-height: 85dvh;
    --qsc-shadow: 0 -4px 24px rgb(0 0 0 / 0.18);
    --qsc-z: 2147483000;

    /* Everything below derives from the six above. See docs/styling.md. */

    --qsc-link-color: var(--qsc-accent);
    --qsc-link-hover-color: var(--qsc-link-color);

    --qsc-button-bg: var(--qsc-accent);
    --qsc-button-fg: var(--qsc-accent-fg);
    --qsc-button-border: var(--qsc-border);
    --qsc-button-radius: var(--qsc-radius);
    --qsc-button-hover-bg: var(--qsc-bg);
    --qsc-button-hover-fg: var(--qsc-accent);
    --qsc-button-hover-border: var(--qsc-button-border);

    --qsc-choice-bg: var(--qsc-button-bg);
    --qsc-choice-fg: var(--qsc-button-fg);
    --qsc-choice-border: var(--qsc-button-border);
    --qsc-choice-radius: var(--qsc-button-radius);
    --qsc-choice-hover-bg: var(--qsc-button-hover-bg);
    --qsc-choice-hover-fg: var(--qsc-button-hover-fg);
    --qsc-choice-hover-border: var(--qsc-button-hover-border);

    --qsc-button-manage-bg: transparent;
    --qsc-button-manage-fg: var(--qsc-accent);
    --qsc-button-manage-hover-bg: var(--qsc-hover);
    --qsc-button-manage-hover-fg: var(--qsc-button-manage-fg);

    --qsc-checkbox-color: var(--qsc-accent);
    --qsc-checkbox-size: calc(var(--qsc-scale) * 1.125);

    --qsc-banner-bg: var(--qsc-bg);
    --qsc-dialog-bg: var(--qsc-bg);

    --qsc-body-size: inherit;
    --qsc-button-size: inherit;
    --qsc-button-weight: 600;

    --qsc-title-color: var(--qsc-fg);
    --qsc-title-weight: 700;

    --qsc-banner-title-size: var(--qsc-title-size, calc(var(--qsc-scale) * 1.0625));
    --qsc-banner-title-color: var(--qsc-title-color);
    --qsc-banner-title-weight: var(--qsc-title-weight);

    --qsc-dialog-title-size: var(--qsc-title-size, calc(var(--qsc-scale) * 1.125));
    --qsc-dialog-title-color: var(--qsc-title-color);
    --qsc-dialog-title-weight: var(--qsc-title-weight);

    --qsc-banner-padding: calc(var(--qsc-gap) * 1.25);
    --qsc-categories-padding: calc(var(--qsc-gap) * 1.25);
    --qsc-categories-gap: calc(var(--qsc-gap) * 1.5);
    --qsc-dialog-actions-padding: calc(var(--qsc-gap) * 1.25);
    --qsc-button-padding: calc(var(--qsc-scale) * 0.5) calc(var(--qsc-scale) * 1.5);
    --qsc-actions-gap: calc(var(--qsc-gap) * 0.5);

    --qsc-reopen-bg: var(--qsc-bg);
    --qsc-reopen-fg: var(--qsc-fg);
    --qsc-reopen-size: calc(var(--qsc-scale) * 0.75);
    --qsc-reopen-padding: calc(var(--qsc-scale) * 0.3125) calc(var(--qsc-scale) * 0.75);
    --qsc-reopen-opacity: 0.55;
    --qsc-always-size: calc(var(--qsc-scale) * 0.75);
    --qsc-details-size: calc(var(--qsc-scale) * 0.8125);
    --qsc-table-size: calc(var(--qsc-scale) * 0.8125);
    --qsc-table-code-size: calc(var(--qsc-scale) * 0.75);

    --qsc-video-title-size: calc(var(--qsc-scale) * 1);
    --qsc-video-cta-size: calc(var(--qsc-scale) * 0.9375);
    --qsc-video-notice-size: calc(var(--qsc-scale) * 0.75);

    --qsc-head-align: center;
    --qsc-head-padding-block: calc(var(--qsc-gap) * 0.625);
    --qsc-head-padding-inline: var(--qsc-categories-padding);
    --qsc-head-padding: var(--qsc-head-padding-block) var(--qsc-head-padding-inline);

    --qsc-close-bg: transparent;
    --qsc-close-fg: var(--qsc-fg);
    --qsc-close-radius: var(--qsc-radius);
    --qsc-close-hover-bg: var(--qsc-hover);
    --qsc-close-hover-fg: var(--qsc-close-fg);

    /* Cross drawn instead of the glyph when given a size; see docs/styling.md. */
    --qsc-close-glyph-size: 0;
    --qsc-close-cross-size: calc(var(--qsc-scale) * 0.875);
    --qsc-close-cross-thickness: 2px;

    --qsc-transition: 0s;

    /* Neither end is pure: white on black haloes. Contrast 16.12:1. */
    --qsc-dark-bg: #18181b;
    --qsc-dark-fg: #f4f4f5;
    --qsc-dark-accent: #f4f4f5;
    --qsc-dark-accent-fg: #18181b;
    --qsc-dark-rule: rgb(244 244 245 / 0.15);
    --qsc-dark-hover: rgb(244 244 245 / 0.12);
    --qsc-dark-shadow: 0 -4px 24px rgb(0 0 0 / 0.4);

    color-scheme: light;
}

/* `color-scheme` too: without it the native checkbox stays light on dark. */
:where(qs-consent[data-scheme='dark']) {
    --qsc-bg: var(--qsc-dark-bg);
    --qsc-fg: var(--qsc-dark-fg);
    --qsc-accent: var(--qsc-dark-accent);
    --qsc-accent-fg: var(--qsc-dark-accent-fg);
    --qsc-rule: var(--qsc-dark-rule);
    --qsc-hover: var(--qsc-dark-hover);
    --qsc-shadow: var(--qsc-dark-shadow);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :where(qs-consent[data-scheme='auto']) {
        --qsc-bg: var(--qsc-dark-bg);
        --qsc-fg: var(--qsc-dark-fg);
        --qsc-accent: var(--qsc-dark-accent);
        --qsc-accent-fg: var(--qsc-dark-accent-fg);
        --qsc-rule: var(--qsc-dark-rule);
        --qsc-hover: var(--qsc-dark-hover);
        --qsc-shadow: var(--qsc-dark-shadow);

        color-scheme: dark;
    }
}

.qsc {
    display: block;
}

/* Themes ship `section { background: #fff }`, which lands over the banner: our
   containers claim no background, so there is nothing to outrank. Hence this
   reset. Controls are excluded — their own rules set what they need. */
.qsc :where(section, article, aside, div, header, footer,
    p, h1, h2, h3, h4, h5, h6,
    ul, ol, li, dl, dt, dd,
    label, span, fieldset, legend,
    table, thead, tbody, tr, th, td) {
    background: transparent;
}

.qsc :where(.qsc-root) {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--qsc-z);
    background: var(--qsc-banner-bg);
    color: var(--qsc-fg);
    font-family: var(--qsc-font);
    font-size: var(--qsc-size);
    box-shadow: var(--qsc-shadow);
}

/*
 * Safe areas. A gesture bar swallows taps along the bottom edge, and the lowest
 * button is the one that loses part of its target — on a component whose
 * compliance rests on declining being as easy as accepting.
 *
 * `env()` is `0px` without a safe area, and on any site whose viewport meta
 * omits `viewport-fit=cover`, so `max()` changes nothing elsewhere. Hence also
 * why `--qsc-banner-padding` has to stay a single length. See docs/styling.md.
 */
.qsc :where(.qsc-banner) {
    box-sizing: border-box;
    max-width: var(--qsc-max-width);
    margin: 0 auto;
    padding: var(--qsc-banner-padding);
    padding-bottom: max(var(--qsc-banner-padding), env(safe-area-inset-bottom));
    padding-left: max(var(--qsc-banner-padding), env(safe-area-inset-left));
    padding-right: max(var(--qsc-banner-padding), env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    gap: var(--qsc-gap);
}

.qsc :where(.qsc-banner:focus) {
    outline: none;
}

/* Every property a global `h2` rule might set is reset explicitly. */
.qsc :where(.qsc-title) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--qsc-banner-title-size);
    font-weight: var(--qsc-banner-title-weight);
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qsc-banner-title-color);
}

.qsc :where(.qsc-body) {
    margin: 0;
    padding: 0;
    max-width: 68ch;
    font-size: var(--qsc-body-size);
    line-height: 1.5;
    color: var(--qsc-fg);
}

.qsc :where(.qsc-link) {
    color: var(--qsc-link-color);
    text-decoration: underline;
    transition: color var(--qsc-transition);
}

.qsc :where(.qsc-link:hover) {
    color: var(--qsc-link-hover-color);
}

/* Stacked, so accept and decline get exactly the same width. */
.qsc :where(.qsc-actions) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--qsc-actions-gap);
    min-width: calc(var(--qsc-scale) * 14);
}

/* Accept and decline share this rule: equal weight by construction. */
.qsc :where(.qsc-button) {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: max(44px, calc(var(--qsc-scale) * 2.75));
    margin: 0;
    padding: var(--qsc-button-padding);
    border: var(--qsc-button-border);
    border-radius: var(--qsc-button-radius);
    background: var(--qsc-button-bg);
    color: var(--qsc-button-fg);
    font-family: inherit;
    font-size: var(--qsc-button-size);
    font-weight: var(--qsc-button-weight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: color var(--qsc-transition), background-color var(--qsc-transition),
        border-color var(--qsc-transition);
}

.qsc :where(.qsc-button:hover) {
    border: var(--qsc-button-hover-border);
    background: var(--qsc-button-hover-bg);
    color: var(--qsc-button-hover-fg);
}

.qsc :where(.qsc-button:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: 2px;
}

/* Accept and decline only: one rule, so their weight stays equal. */
.qsc :where(.qsc-button--choice) {
    border: var(--qsc-choice-border);
    border-radius: var(--qsc-choice-radius);
    background: var(--qsc-choice-bg);
    color: var(--qsc-choice-fg);
}

.qsc :where(.qsc-button--choice:hover) {
    border: var(--qsc-choice-hover-border);
    background: var(--qsc-choice-hover-bg);
    color: var(--qsc-choice-hover-fg);
}

/* Visually secondary, but still a full button: same hit area, same focus ring. */
.qsc :where(.qsc-button--manage) {
    border-color: transparent;
    padding-inline: calc(var(--qsc-scale) * 0.75);
    background: var(--qsc-button-manage-bg);
    color: var(--qsc-button-manage-fg);
    font-weight: 400;
    text-decoration: underline;
}

.qsc :where(.qsc-button--manage:hover) {
    border-color: transparent;
    background: var(--qsc-button-manage-hover-bg);
    color: var(--qsc-button-manage-hover-fg);
}

.qsc :where(.qsc-panel[hidden]) {
    display: none;
}

/* Screen-reader announcements: `display: none` would silence them. */
.qsc :where(.qsc-status) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 56rem) {
    .qsc :where(.qsc-banner) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--qsc-gap) * 2);
    }

    .qsc .qsc-text {
        flex: 1;
    }

    .qsc :where(.qsc-actions) {
        flex-shrink: 0;
    }
}


.qsc :where(.qsc-text) {
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-gap) * 0.4);
}

/* Reopen tab: discreet, but always reachable and keyboard focusable. Glued to
   the bottom edge, growing downwards so its label clears the gesture bar. */
.qsc :where(.qsc-reopen) {
    position: fixed;
    left: calc(var(--qsc-reopen-offset, calc(var(--qsc-scale) * 1.5)) + env(safe-area-inset-left));
    bottom: 0;
    z-index: var(--qsc-z);
    box-sizing: border-box;
    align-items: center;
    margin: 0;
    padding: var(--qsc-reopen-padding);
    padding-bottom: max(calc(var(--qsc-scale) * 0.3125), env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--qsc-radius) var(--qsc-radius) 0 0;
    background: var(--qsc-reopen-bg);
    color: var(--qsc-reopen-fg);
    font-family: var(--qsc-font);
    font-size: var(--qsc-reopen-size);
    line-height: 1.4;
    letter-spacing: 0.01em;
    box-shadow: 0 -1px 8px rgb(0 0 0 / 0.15);
    cursor: pointer;
}

.qsc :where(.qsc-reopen:hover) {
    opacity: 1;
}

.qsc :where(.qsc-reopen:focus-visible) {
    opacity: 1;
    outline: var(--qsc-focus-ring) !important;
    outline-offset: -2px;
}

/* Manage panel. A native <dialog> renders in the top layer, so no z-index
   has to be negotiated with the site. */
.qsc :where(.qsc-dialog) {
    box-sizing: border-box;
    width: min(calc(var(--qsc-scale) * 46), 100%);
    max-width: 100%;
    max-height: var(--qsc-max-height);
    margin: auto auto 0 auto;
    padding: 0;

    /* Full width here, so a notch in landscape would cut into the close
       button. The background still reaches the edge; only the content moves. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    border: 0;
    border-radius: var(--qsc-radius) var(--qsc-radius) 0 0;
    background: var(--qsc-dialog-bg);
    color: var(--qsc-fg);
    font-family: var(--qsc-font);
    font-size: var(--qsc-size);
    overflow: hidden;
}

.qsc :where(.qsc-dialog)::backdrop {
    background: rgb(0 0 0 / 0.35);
}

.qsc :where(.qsc-dialog[data-backdrop='blur'])::backdrop {
    background: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(6px);
}

.qsc :where(.qsc-dialog[data-backdrop='dim'])::backdrop {
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: none;
}

.qsc :where(.qsc-dialog[data-backdrop='none'])::backdrop {
    background: transparent;
    backdrop-filter: none;
}

.qsc :where(.qsc-dialog-inner) {
    display: flex;
    flex-direction: column;
    max-height: var(--qsc-max-height);
}

.qsc :where(.qsc-dialog-head) {
    display: flex;
    align-items: var(--qsc-head-align);
    justify-content: space-between;
    gap: var(--qsc-gap);
    padding: var(--qsc-head-padding);
    border-bottom: 1px solid var(--qsc-rule);
}

.qsc :where(.qsc-dialog-title) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--qsc-dialog-title-size);
    font-weight: var(--qsc-dialog-title-weight);
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qsc-dialog-title-color);
}

.qsc :where(.qsc-dialog-title:focus) {
    outline: none;
}

.qsc :where(.qsc-close) {
    appearance: none;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max(44px, calc(var(--qsc-scale) * 2.75));
    height: max(44px, calc(var(--qsc-scale) * 2.75));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--qsc-close-radius);
    background: var(--qsc-close-bg);
    color: var(--qsc-close-fg);
    font-family: inherit;
    font-size: var(--qsc-close-glyph-size);
    line-height: 1;
    cursor: pointer;
    transition: color var(--qsc-transition), background-color var(--qsc-transition);
}

/* Zero-width strokes are invisible: the glyph stands alone until asked. */
.qsc :where(.qsc-close)::before,
.qsc :where(.qsc-close)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--qsc-close-cross-size);
    height: var(--qsc-close-cross-thickness);
    border-radius: calc(var(--qsc-close-cross-thickness) / 2);
    background: currentColor;
}

.qsc :where(.qsc-close)::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.qsc :where(.qsc-close)::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.qsc :where(.qsc-close:hover) {
    background: var(--qsc-close-hover-bg);
    color: var(--qsc-close-hover-fg);
}

.qsc :where(.qsc-close:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: -2px;
}

.qsc :where(.qsc-categories) {
    flex: 1;
    overflow-y: auto;
    padding: var(--qsc-categories-padding);
    display: flex;
    flex-direction: column;
    gap: var(--qsc-categories-gap);
}

.qsc :where(.qsc-category) {
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-gap) * 0.4);
}

.qsc :where(.qsc-switch) {
    display: flex;
    align-items: center;
    gap: calc(var(--qsc-scale) * 0.625);
}

.qsc :where(.qsc-checkbox) {
    flex-shrink: 0;
    width: var(--qsc-checkbox-size);
    height: var(--qsc-checkbox-size);
    margin: 0;
    accent-color: var(--qsc-checkbox-color);
    cursor: pointer;
}

.qsc :where(.qsc-checkbox:disabled) {
    cursor: default;
    opacity: 0.6;
}

.qsc :where(.qsc-checkbox:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: 2px;
}

.qsc :where(.qsc-switch-label) {
    font-weight: 600;
    cursor: pointer;
}

.qsc :where(.qsc-checkbox:disabled + .qsc-switch-label) {
    cursor: default;
}

.qsc :where(.qsc-always) {
    font-size: var(--qsc-always-size);
    opacity: 0.7;
}

.qsc :where(.qsc-category-desc) {
    margin: 0;
    padding: 0;
    max-width: 68ch;
    line-height: 1.5;
    opacity: 0.85;
}

.qsc :where(.qsc-details-toggle) {
    appearance: none;
    align-self: flex-start;
    min-height: 32px;
    margin: 0;
    padding: calc(var(--qsc-scale) * 0.25) 0;
    border: 0;
    background: transparent;
    color: var(--qsc-accent);
    font-family: inherit;
    font-size: var(--qsc-details-size);
    text-decoration: underline;
    cursor: pointer;
}

.qsc :where(.qsc-details-toggle:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: 2px;
}

.qsc :where(.qsc-table) {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--qsc-table-size);
    text-align: left;
}

.qsc :where(.qsc-table th),
.qsc :where(.qsc-table td) {
    padding: calc(var(--qsc-scale) * 0.5) calc(var(--qsc-scale) * 0.75) calc(var(--qsc-scale) * 0.5) 0;
    border-bottom: 1px solid var(--qsc-rule);
    vertical-align: top;
}

.qsc :where(.qsc-table th) {
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.7;
}

.qsc :where(.qsc-table code) {
    font-family: ui-monospace, monospace;
    font-size: var(--qsc-table-code-size);
    word-break: break-all;
}

/* Bottom-anchored here, so the save button meets the gesture bar. */
.qsc :where(.qsc-dialog-actions) {
    padding: var(--qsc-dialog-actions-padding);
    padding-bottom: max(var(--qsc-dialog-actions-padding), env(safe-area-inset-bottom));
    border-top: 1px solid var(--qsc-rule);
}

.qsc :where(.qsc-button--save) {
    width: 100%;
}

@media (min-width: 40rem) {
    .qsc :where(.qsc-dialog) {
        margin: auto;
        border-radius: var(--qsc-radius);
        padding-left: 0;
        padding-right: 0;
    }

    /* Centred from here on: nothing touches an edge, so the inset would only
       throw the padding off balance. */
    .qsc .qsc-dialog-actions {
        padding-bottom: calc(var(--qsc-gap) * 1.25);
    }
}

/* A 0fr → 1fr grid is the reliable way to animate an unknown height:
   `height: auto` does not animate, and `interpolate-size` is still too new. */
.qsc :where(.qsc-details) {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
}

.qsc :where(.qsc-details > *) {
    overflow: hidden;
    min-height: 0;
}

.qsc :where(.qsc-details[data-open]) {
    grid-template-rows: 1fr;
}

/* Collapsed content stays rendered so it can animate; `inert` takes it out
   of the keyboard and screen-reader flow. */
.qsc :where(.qsc-details[inert]) {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .qsc :where(.qsc-details) {
        transition: none;
    }
}

/* The single child carries the clipping during the animation. */
.qsc :where(.qsc-details-inner) {
    overflow: hidden auto;
    min-height: 0;
}

.qsc :where(.qsc-details[data-open] .qsc-details-inner) {
    overflow-x: auto;
}

/* Animating a <dialog> needs `allow-discrete`: `display` and `overlay` are
   discrete properties. A browser ignoring these rules just shows the panel. */
.qsc :where(.qsc-dialog) {
    opacity: 0;
    translate: 0 calc(var(--qsc-scale) * 1.5);
    transition:
        opacity 0.2s ease-out,
        translate 0.2s ease-out,
        overlay 0.2s allow-discrete,
        display 0.2s allow-discrete;
}

.qsc :where(.qsc-dialog[open]) {
    opacity: 1;
    translate: 0 0;
}

@starting-style {
    .qsc :where(.qsc-dialog[open]) {
        opacity: 0;
        translate: 0 calc(var(--qsc-scale) * 1.5);
    }
}

.qsc :where(.qsc-dialog)::backdrop {
    opacity: 0;
    transition:
        opacity 0.2s ease-out,
        overlay 0.2s allow-discrete,
        display 0.2s allow-discrete;
}

.qsc :where(.qsc-dialog[open])::backdrop {
    opacity: 1;
}

@starting-style {
    .qsc :where(.qsc-dialog[open])::backdrop {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsc :where(.qsc-dialog),
    .qsc :where(.qsc-dialog)::backdrop {
        transition: none;
        translate: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsc :where(.qsc-root),
    .qsc :where(.qsc-reopen) {
        transition: none;
        translate: none;
    }
}

/* Video facade. In the site content, hence no `.qsc` prefix. The poster is a
   local gradient: the official thumbnail would leak the IP before consent. */
.qsc-video {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: #14161a;
}

.qsc-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.qsc-video-button {
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--qsc-scale) * 0.75);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: calc(var(--qsc-scale) * 1.5);
    border: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.qsc-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qsc-video-poster--empty {
    background: radial-gradient(120% 90% at 50% 0%, #2c3138 0%, #14161a 70%);
}

/* Only with a poster: the label needs its own contrast, denser at the centre. */
.qsc-video-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(100% 80% at 50% 50%, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.28) 100%);
    transition: background 0.15s ease-out;
}

.qsc-video-button:hover .qsc-video-scrim,
.qsc-video-button:focus-visible .qsc-video-scrim {
    background: radial-gradient(100% 80% at 50% 50%, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0.16) 100%);
}

.qsc-video-play {
    position: relative;
    display: block;
    opacity: 0.9;
    transition: opacity 0.15s ease-out, scale 0.15s ease-out;
}

.qsc-video-button:hover .qsc-video-play,
.qsc-video-button:focus-visible .qsc-video-play {
    opacity: 1;
    scale: 1.06;
}

.qsc-video-play-bg {
    fill: #212121;
    fill-opacity: 0.8;
}

.qsc-video-play-arrow {
    fill: #ffffff;
}

.qsc-video-button:hover .qsc-video-play-bg {
    fill: #cc0000;
    fill-opacity: 1;
}

.qsc-video-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-scale) * 0.25);
    max-width: 42ch;
    /* A thumbnail often carries its own titles. The shadow separates our label
       from whatever sits behind it, and buys back the contrast that lets the
       scrim stay light enough to show the image. */
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.85);
}

.qsc-video-title {
    font-size: var(--qsc-video-title-size);
    font-weight: 700;
    line-height: 1.3;
}

.qsc-video-cta {
    font-size: var(--qsc-video-cta-size);
    font-weight: 600;
}

.qsc-video-notice {
    font-size: var(--qsc-video-notice-size);
    line-height: 1.4;
    opacity: 0.8;
}

.qsc-video-button:focus-visible {
    outline: var(--qsc-video-focus-ring, 2px solid #ffffff) !important;
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .qsc-video-play {
        transition: none;
    }

    .qsc-video-button:hover .qsc-video-play,
    .qsc-video-button:focus-visible .qsc-video-play {
        scale: none;
    }
}