/* Scroll-driven explainers are drawn on the page itself, like the sections of a
   product page: the frame spans the whole reading area in the reader's own
   background, with no border, panel or caption of its own. The page lays
   out its captions in the reader's column and type. */
.paragraph-explainer .paragraph-scroll {
    overflow: hidden;
}
.paragraph-explainer .carousel-card,
.carousel-variant .paragraph-explainer .carousel-card {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.paragraph-explainer .carousel-card > :not(.article-explainer) {
    width: min(660px, calc(100% - 64px));
    margin-inline: auto;
}
.article-explainer {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    /* Sideways drags play the explainer instead of turning the page. */
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
}
.carousel-variant .carousel-card .article-explainer {
    height: 100%;
}
.explainer-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    background: transparent;
    /* The frame only draws; gestures land on the figure. */
    pointer-events: none;
}
/* Gestures, trackpad scrolling included, land on this layer, not the frame. */
.explainer-shield {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* The caption stays for screen readers; the page shows its own captions. */
.article-explainer figcaption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (max-width: 700px) {
    .paragraph-explainer .carousel-card > :not(.article-explainer) {
        width: calc(100% - 56px);
    }
}

/* The frame and its gesture layer, above the reader's own controls. */
.article-explainer {
    display: flex;
    flex-direction: column;
}
.explainer-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}
/* Settings the page offers: native controls in the reader's column and type.
   Dimmed and inert until the beat they work from. */
.explainer-controls {
    flex: none;
    width: min(660px, calc(100% - 64px));
    margin: 0 auto;
    padding-block: 12px 16px;
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--line);
    opacity: 0.35;
    transition: opacity 0.3s ease;
    touch-action: manipulation;
}
.explainer-controls.is-open {
    opacity: 1;
}
.explainer-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 4px 12px;
    font: 400 16px/1.4 var(--font);
    color: var(--fg);
}
.explainer-control-value {
    font: 600 14px var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}
.explainer-control input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    height: 28px;
    margin: 0;
    accent-color: var(--accent);
}
.explainer-choice {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.explainer-choice button {
    font: 500 14px var(--font);
    color: var(--fg);
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    min-height: 36px;
    cursor: pointer;
}
.explainer-choice button[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
}
.explainer-choice button:focus-visible,
.explainer-control input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.explainer-note {
    margin: 0;
    font: 500 12px var(--mono);
    letter-spacing: 0.02em;
    color: var(--muted);
}
@media (max-width: 700px) {
    .explainer-controls {
        width: calc(100% - 56px);
        gap: 8px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .explainer-controls {
        transition: none;
    }
}