/* ============================================================
   AoID READING PAGES  (aoid-video.css)
   /articles/video-NN/ — sticky player + the article itself, read
   along, + the /articles/ citation apparatus in a dock.

   Loaded AFTER chapter.css, articles-panel.css and creation.css.
   The structural composition (.creation-reading / .creation-stage-wrap
   / .creation-player / .creation-columns / .creation-dock /
   .creation-entry / .ct-resume / .ct-cite-toggle / .ct-hint) is reused
   from creation.css exactly as creation.css reuses articles-panel.css's
   .ap- classes. This file holds ONLY what a reading page adds or
   changes. /creation/ carries none of these selectors and is untouched.
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────────── */
.aoid-practice {
    max-width: 44rem;
    margin: 0.85rem auto 0;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--gold-light, #D4A84A);
}

/* ── Reading proportions ─────────────────────────────────────── */
/* /creation/ caps the film at 62vh, which is right for a film whose transcript
   is a companion. Here the article IS the page: at 62vh the reading band was
   ~260px and the dock ~220px, too short to study a citation without scrolling
   it. 52vh keeps the film dominant while the article and the dock stay
   readable. Only these pages carry .aoid-reading. */
.creation-reading.aoid-reading { --ct-film-max-h: 52vh; }
@media (max-width: 1199.98px) {
    .creation-reading.aoid-reading { --ct-film-max-h: 46vh; }
}

/* ── The article column ──────────────────────────────────────── */
/* The reading column is the article itself — the same include /articles/
   uses — so .article-body keeps its own /articles/ typography. Only the
   column geometry is set here. max-width applies when the column is alone
   (dock closed / narrow); in the open two-column state the grid governs. */
.aoid-article {
    max-width: 820px;
    margin: 1.5rem auto 0;
    padding: 0 clamp(0.25rem, 1.5vw, 1rem) 40vh;
}
.aoid-article .article-section,
.aoid-article .article-banner { margin: 0; }

/* The hero already names the article; a second copy of the title at the top
   of the column is noise. It stays in the DOM for search and assistive
   technology, and only this page hides it. */
.aoid-article .article-title { display: none; }

.aoid-lead { padding-top: 0; }

/* The reflection textarea belongs to the journal on /articles/; aoid-video.js
   swaps it for this link rather than leaving a box that loses what is typed. */
.aoid-rjw-link {
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--gold-primary, #C4943A);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.aoid-rjw-link:hover { color: var(--gold-light, #D4A84A); }

@media (min-width: 1200px) {
    .creation-columns .aoid-article {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    /* Dock closed: keep a readable measure instead of a 1200px-wide line. */
    .creation-reading.dock-hidden .aoid-article {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── The spoken line ─────────────────────────────────────────── */
/* Same token and opacity as [data-span]:hover in articles-panel.css and
   .ct-cue.ct-lit on /creation/, so the three pages read as one system.
   A tint, not a solid fill — the text stays legible. No padding, ever:
   lighting a line must not reflow it mid-follow. */
::highlight(aoid-lit) {
    background-color: rgba(212, 168, 74, 0.32);
    color: #F5EFE4;
}
::highlight(aoid-held) {
    background-color: rgba(196, 148, 58, 0.24);
    color: #F5EFE4;
    text-decoration: underline;
    text-decoration-color: rgba(212, 168, 74, 0.9);
}
/* Fallback for browsers without the CSS Custom Highlight API. aoid-video.js
   wraps sentences only in that case, and only on this page. */
.aoid-sent.aoid-lit {
    background-color: rgba(212, 168, 74, 0.32);
    color: var(--cream-soft, #F5EFE4);
    border-radius: 3px;
}
.aoid-sent.aoid-held {
    background-color: rgba(196, 148, 58, 0.24);
    color: var(--cream-soft, #F5EFE4);
    border-radius: 3px;
}

/* ── Citation dock ───────────────────────────────────────────
   Below 1200px .creation-dock is display:contents, so .ap-panel keeps the
   fixed bottom drawer it has on /articles/. At 1200px and up these rules
   take it out of the fixed right sidebar and seat it in the grid track.
   Specificity (0,3,0 / 0,4,0) beats .ap-panel and .ap-panel.ap-open, and
   every selector carries .ap-panel--aoid, so /articles/ and /creation/ are
   untouched. */
@media (min-width: 1200px) {
    .ap-panel.ap-panel--aoid.ct-docked {
        position: static;
        width: 100%;
        height: 100%;
        max-height: 100%;
        transform: none;
        border: 1px solid rgba(196, 148, 58, 0.22);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }
    .ap-panel.ap-panel--aoid.ct-docked.ap-open {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
    /* Held for study: deliberately different from the passing stream. */
    .ap-panel.ap-panel--aoid.ct-docked.ct-pinned {
        border-color: rgba(196, 148, 58, 0.55);
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 148, 58, 0.18);
    }
}

/* Calm fade as each new line streams in. */
@keyframes aoidFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.ap-panel--aoid .ap-body.ct-fade { animation: aoidFadeIn 0.32s ease both; }
.ap-panel--aoid .ap-body { overflow-y: auto; }

.ap-panel--aoid .ap-header { flex-wrap: wrap; gap: 0.4rem; }
.ap-panel--aoid .ap-header-left { flex-wrap: wrap; gap: 0.4rem; }

/* Hide control: labelled, not a bare X — the clean film is one click away. */
.ap-panel--aoid .ap-close.ct-hide-cites {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    width: auto;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(196, 148, 58, 0.45);
    border-radius: 20px;
    color: var(--gold-primary, #C4943A);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.ap-panel--aoid .ap-close.ct-hide-cites:hover {
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
}

/* "Play from here" — the deliberate seek control. */
.ap-panel--aoid .ap-seek,
.ap-panel--aoid .ct-resume-film {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    flex-shrink: 0;
    padding: 0.3rem 0.7rem;
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
    border: 1px solid #8a6722;
    border-radius: 20px;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.ap-panel--aoid .ap-seek svg,
.ap-panel--aoid .ct-resume-film svg { display: block; flex-shrink: 0; }
.ap-panel--aoid .ap-seek:hover,
.ap-panel--aoid .ct-resume-film:hover { background: var(--gold-light, #D4A84A); }
.ap-panel--aoid .ap-seek:active { transform: scale(0.97); }
.ap-panel--aoid .ap-seek:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}
.ap-panel--aoid .ct-resume-film[hidden] { display: none; }

/* Absence renders as absence: the quiet state for a line that carries no
   separate citation. Deliberately low-contrast — it reports a fact, it does
   not ask to be read. */
.aoid-dock-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border: 1px solid rgba(196, 148, 58, 0.22);
    border-radius: 20px;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.6;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.aoid-dock-empty {
    margin: 0.9rem 0 0;
    padding: 0.85rem 1rem;
    background: rgba(196, 148, 58, 0.04);
    border: 1px solid rgba(196, 148, 58, 0.12);
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.72;
}

/* ── Ended overlay: the discussion opener ────────────────────── */
/* The film ends muted and everyone is still; this is the first thing the room
   reads together, so the question gets the size. */
.aoid-ended { gap: 0.3rem; }
.aoid-ended-label {
    margin-top: 0.9rem;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(212, 168, 74, 0.75);
}
.aoid-ended-question {
    max-width: 40rem;
    margin: 0.3rem auto 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.05rem, 2.6vw, 1.85rem);
    line-height: 1.4;
    color: var(--cream-soft, #F5EFE4);
}
.aoid-ended-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.1rem;
}
.aoid-ended-actions .creation-replay { margin-top: 0; }
.aoid-ended-back {
    color: var(--gold-light, #D4A84A);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.aoid-ended-back:hover { color: var(--cream-soft, #F5EFE4); }
@media (max-height: 520px) {
    .aoid-ended-label { display: none; }
    .aoid-ended-question { font-size: 1rem; }
}

/* ── A2 · Compare, then ask ───────────────────────────────────
   The overlay now carries four things the room reads in order: compare with
   what you expected, the article's own question, what question it raises, and
   somewhere to write that question down. Everything is sized off the FILM, not
   the viewport, because that is the box this overlay has to live inside. */
.aoid-ended-compare {
    max-width: 38rem;
    margin: 0.15rem auto 0;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: clamp(0.9rem, 1.9vw, 1.12rem);
    line-height: 1.45;
    color: var(--gold-light, #D4A84A);
}
.aoid-ended-ask {
    max-width: 38rem;
    margin: 0.7rem auto 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(0.88rem, 1.8vw, 1.05rem);
    line-height: 1.45;
    color: var(--cream, #E8DCC4);
}
.aoid-ended-journal { margin-top: 0.25rem; }

/* The overlay is clipped by .creation-player's overflow:hidden, so on a small
   film the type comes down rather than the content coming out. Keyed to the
   film's own width through a container query — the same rules then hold at
   1024px, at 390px, and inside element fullscreen, where a viewport media
   query would read the wrong box. overflow-y is the backstop for an unusually
   long reflection question (and for engines without container queries):
   nothing is ever unreachable. */
.aoid-reading .creation-player {
    container-type: inline-size;
    container-name: aoidfilm;
}
.aoid-ended { overflow-y: auto; overscroll-behavior: contain; }

/* Three bands, keyed to the FILM's width and mutually exclusive, because the
   film is 16:9 — its width fixes the height of the box this overlay has to fit
   inside. Sizes are cqw (a share of that width) so each band scales smoothly
   rather than stepping. Measured at 1440x900, 1280x630, 1024x768 and 390x844;
   overflow-y above is the backstop for an unusually long reflection question. */

/* Comfortable: the film is 760px or wider. */
@container aoidfilm (min-width: 760px) {
    .aoid-ended .creation-ended-line { font-size: clamp(1rem, 2.4cqw, 1.45rem); }
    .aoid-ended .creation-ended-sub  { font-size: clamp(0.78rem, 1.5cqw, 0.95rem); }
    .aoid-ended-compare  { font-size: clamp(0.84rem, 1.7cqw, 1.05rem); }
    .aoid-ended-question { font-size: clamp(0.92rem, 2.5cqw, 1.5rem); line-height: 1.32; }
    .aoid-ended-ask      { font-size: clamp(0.8rem, 1.6cqw, 1rem); }
}

/* Medium: the 1280-wide reference screen (film 583px), tablets, 1024px. The
   box is only ~330px tall here, so the floors come right down. */
@container aoidfilm (min-width: 421px) and (max-width: 759.98px) {
    .aoid-ended { gap: 0.14rem; padding: 0.6rem; }
    .aoid-ended .creation-ended-line { font-size: clamp(0.72rem, 2.6cqw, 1.05rem); }
    .aoid-ended .creation-ended-sub  { font-size: clamp(0.58rem, 2cqw, 0.8rem); }
    .aoid-ended-label { margin-top: 0.3rem; font-size: 0.5rem; letter-spacing: 0.1em; }
    .aoid-ended-compare  { margin-top: 0.1rem; font-size: clamp(0.62rem, 2.15cqw, 0.88rem); line-height: 1.3; }
    .aoid-ended-question { margin-top: 0.1rem; font-size: clamp(0.68rem, 2.4cqw, 1rem); line-height: 1.28; }
    .aoid-ended-ask      { margin-top: 0.22rem; font-size: clamp(0.6rem, 2.1cqw, 0.85rem); line-height: 1.3; }
    .aoid-ended-journal  { margin-top: 0.06rem; font-size: clamp(0.56rem, 1.9cqw, 0.75rem); }
    .aoid-ended-actions  { gap: 0.35rem; margin-top: 0.4rem; }
    .aoid-ended-actions .creation-replay { padding: 0.26rem 0.62rem; font-size: 0.66rem; }
    .aoid-ended-back { font-size: 0.64rem; }
}

/* Small: a phone-width film, ~200px tall. The label goes — "To open the
   discussion" only announces what is already visibly a question — and
   everything else stays, smaller. Self-contained: it inherits nothing from
   the band above it. */
@container aoidfilm (max-width: 420px) {
    .aoid-ended { gap: 0.08rem; padding: 0.35rem; }
    .aoid-ended .creation-ended-line { font-size: clamp(0.6rem, 3.1cqw, 0.72rem); }
    .aoid-ended .creation-ended-sub  { font-size: clamp(0.5rem, 2.5cqw, 0.58rem); }
    .aoid-ended-label { display: none; }
    .aoid-ended-compare  { margin-top: 0.05rem; font-size: clamp(0.52rem, 2.6cqw, 0.6rem); line-height: 1.26; }
    .aoid-ended-question { margin-top: 0.05rem; font-size: clamp(0.58rem, 2.95cqw, 0.68rem); line-height: 1.24; }
    .aoid-ended-ask      { margin-top: 0.14rem; font-size: clamp(0.52rem, 2.6cqw, 0.6rem); line-height: 1.26; }
    .aoid-ended-journal  { margin-top: 0.04rem; font-size: clamp(0.48rem, 2.4cqw, 0.56rem); }
    .aoid-ended-actions  { gap: 0.28rem; margin-top: 0.22rem; }
    .aoid-ended-actions .creation-replay { padding: 0.18rem 0.5rem; font-size: 0.54rem; }
    .aoid-ended-back { font-size: 0.52rem; }
}

/* ── A3 · Correction channel ──────────────────────────────────
   Sits under the apparatus entry it belongs to, at the quietest weight on the
   card. It is an invitation, not a control: a reader who never doubts the
   entry should be able to read straight past it. */
.aoid-correction {
    margin: 0.9rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(196, 148, 58, 0.14);
}
.aoid-correction-link {
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.66;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.72rem;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(196, 148, 58, 0.4);
}
.aoid-correction-link:hover,
.aoid-correction-link:focus-visible {
    opacity: 1;
    color: var(--gold-light, #D4A84A);
}

/* ── Entry notice: the article's banner stands in for a thumbnail ── */
.aoid-entry-banner {
    margin: 0 auto 18px;
    max-width: 560px;
}
.aoid-entry-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(196, 148, 58, 0.5);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}
.aoid-entry-eyebrow {
    font-family: 'Cinzel', var(--font-serif, Georgia, serif) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-light, #D4A84A) !important;
    margin-bottom: 10px !important;
}

/* ── A1 · Propose before watching ─────────────────────────────
   A quiet prompt, deliberately not a form: no box, no field, no button of its
   own, nothing collected and nothing graded. Left-aligned inside the centred
   card and set against a single rule, so it reads as an aside the host can
   also ask aloud rather than as something the page wants filled in.
   Two classes, so it outranks .creation-entry p without !important. */
.aoid-entry .aoid-entry-propose {
    max-width: 33rem;
    margin: 0 auto 24px;
    padding-left: 0.95rem;
    border-left: 2px solid rgba(196, 148, 58, 0.4);
    text-align: left;
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--cream-dark, #D4C8B0);
}
@media (max-width: 480px) {
    .aoid-entry .aoid-entry-propose {
        margin-bottom: 20px;
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ap-panel--aoid.ct-docked { transition-duration: 0.01ms !important; }
    .ap-panel--aoid .ap-body.ct-fade { animation: none; }
}