/* ============================================================
   CREATION FILM PAGE  (creation.css)
   /creation/ — sticky player (YouTube nocookie) + following
   transcript + comprehensive citation apparatus (reuses
   articles-panel.css .ap- classes; adds a two-column
   Biblical/Restoration body and a widened panel via
   .ap-panel--creation).
   Tokens inherited from styles.css (--gold-primary, --cream, etc.)
   ============================================================ */

/* Restore viewport scrolling so the player's position:sticky works.
   chapter.css sets html,body{overflow-x:hidden}, which forces overflow-y:auto
   and makes the root a scroll container; clip prevents horizontal scroll
   without establishing one. creation.css loads after chapter.css, so this wins. */
html, body { overflow-x: clip; overflow-y: visible; }

/* ── Hero “About” button ─────────────────────────────────────── */
.creation-about-btn {
    margin-top: 0.75rem;
    background: none;
    border: 1px solid rgba(196, 148, 58, 0.5);
    color: var(--gold-primary, #C4943A);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.creation-about-btn:hover {
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
}

/* ── Reading container ───────────────────────────────────────── */
/* The single centred container. The film, the transcript and the dock all
   align to THIS width, which is what stops the film overlapping the columns:
   previously the film was centred independently at 960px while the columns
   were centred at a different width, so its right edge cut across them.

   TUNABLE:
     --ct-container   width of the whole reading region; the film spans it
     --ct-film-max-h  ceiling on film height, so a full-width film cannot eat
                      a short viewport and leave the dock no room
     --ct-dock-w      width of the citation column */
.creation-reading {
    --ct-container: 1200px;
    --ct-film-max-h: 62vh;
    --ct-dock-w: 400px;
    --ct-gutter: clamp(1rem, 2.2vw, 2rem);
    --ct-pad: clamp(0.75rem, 3vw, 1.5rem);

    --ct-film-w: min(var(--ct-container), calc(100vw - 2 * var(--ct-pad)));
    --ct-film-h: min(calc(var(--ct-film-w) * 9 / 16), var(--ct-film-max-h));
    --ct-dock-top: calc(84px + var(--ct-film-h) + 1rem);

    max-width: var(--ct-container);
    margin: 0 auto;
    padding: 0 var(--ct-pad);
}

/* ── Sticky player ───────────────────────────────────────────── */
/* Normal-flow child of .creation-reading (not a grid item), so its sticky
   containing block is the tall reading container and it travels the whole
   region. Spans the container; nothing sits beside or behind it. */
.creation-stage-wrap {
    position: sticky;
    top: 84px;                 /* clears the fixed site header */
    z-index: 5;
    background: var(--brown-rich, #1F1012);
}
.creation-player {
    position: relative;
    /* Cap the height so a container-width film still leaves the dock room on
       short viewports; width follows from the cap to preserve 16:9. */
    width: min(100%, calc(var(--ct-film-max-h, 62vh) * 16 / 9));
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    background: #000;
}
.creation-player iframe,
.creation-player #creationVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ENDED overlay — covers YouTube's end-screen suggestion grid */
.creation-ended {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    padding: 1rem;
    background: rgba(10, 7, 6, 0.94);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.creation-ended.creation-ended--show { opacity: 1; pointer-events: auto; }
.creation-ended-line {
    font-family: var(--font-serif, Georgia, serif);
    color: var(--cream-soft, #F5EFE4);
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
}
.creation-ended-sub {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    color: var(--gold-light, #D4A84A);
    font-size: 0.95rem;
}
.creation-replay {
    margin-top: 0.75rem;
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1.3rem;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}
.creation-replay:hover { background: var(--gold-light, #D4A84A); }
@media (max-width: 700px) {
    .creation-stage-wrap { top: 64px; }
}

/* ── Transcript ──────────────────────────────────────────────── */
/* max-width applies only when the transcript is alone (panel closed / narrow);
   in the open two-column state the grid track governs. */
.creation-transcript {
    max-width: 760px;
    margin: 1.5rem auto 0;
    padding: 0 clamp(0.25rem, 1.5vw, 1rem) 40vh;
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.05rem, 2.05vw, 1.28rem);
    line-height: 1.95;
    color: var(--cream, #E8DCC4);
}
.ct-lead {
    font-style: italic;
    text-align: center;
    color: var(--cream-dark, #D4C8B0);
    font-size: 0.98rem;
    line-height: 1.6;
    padding: 0.5rem 5% 1.5rem;
    border-bottom: 1px solid rgba(196, 148, 58, 0.16);
    margin-bottom: 1.25rem;
}
.ct-p { margin: 0 0 1.35em; }

/* interactive citation span (mirrors [data-span] in articles-panel.css) */
.ct-span {
    border-radius: 3px;
    transition: background-color 0.15s ease;
}
.ct-span[data-has-cite] {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(196, 148, 58, 0.5);
    text-underline-offset: 3px;
}
.ct-span[data-status="draft"] {
    text-decoration-color: rgba(196, 148, 58, 0.85);
}
/* The sentence containing the lit cue — a calm band at well under half the
   cue's opacity, so the sentence reads as context and the active words inside
   it stay the brightest thing on screen. Deliberately placed BEFORE the hover
   and .ct-open rules: all three are single-class specificity, so source order
   is what lets hover feedback and the opened-citation state still win. */
.ct-span.ct-active-span { background-color: rgba(212, 168, 74, 0.10); }

.ct-span[data-has-cite]:hover { background-color: rgba(196, 148, 58, 0.14); }
.ct-span.ct-open {
    background-color: rgba(196, 148, 58, 0.22);
    outline: 1px solid rgba(196, 148, 58, 0.4);
    outline-offset: 1px;
}

/* active-cue highlight (karaoke follow) */
.ct-cue {
    color: var(--cream-dark, #D4C8B0);
    border-radius: 3px;
    transition: color 0.25s, text-shadow 0.25s, background-color 0.25s;
}

/* Matches the /articles/ active-sentence highlight exactly: --gold-light
   #D4A84A at 0.32, the same token and opacity as [data-span]:hover in
   articles-panel.css, so the two pages read as one system. A tint, not a solid
   fill — the text stays legible. The existing glow is kept; it complements the
   tint rather than competing with it. No padding on purpose: lighting a word
   must never reflow the line mid-follow. */
.ct-cue.ct-lit {
    color: var(--cream-soft, #F5EFE4);
    background-color: rgba(212, 168, 74, 0.32);
    text-shadow: 0 0 18px rgba(196, 148, 58, 0.35);
}

.ct-closing {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(196, 148, 58, 0.25);
    text-align: center;
    font-style: italic;
    color: var(--gold-light, #D4A84A);
    font-size: 1.02rem;
}

/* ── Resume-follow pill ──────────────────────────────────────── */
.ct-resume {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 30;
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
    border: none;
    border-radius: 22px;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.ct-resume.ct-show { opacity: 1; pointer-events: auto; }

/* ── Reopen affordance + streaming hint ──────────────────────── */
/* Bottom-right, clear of the centred resume pill. */
.ct-cite-toggle {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 30;
    background: rgba(31, 16, 18, 0.92);
    color: var(--gold-primary, #C4943A);
    border: 1px solid rgba(196, 148, 58, 0.5);
    border-radius: 22px;
    padding: 0.5rem 0.95rem;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, background 0.18s, color 0.18s;
}
.ct-cite-toggle.ct-show { opacity: 1; pointer-events: auto; }
.ct-cite-toggle:hover { background: var(--gold-primary, #C4943A); color: var(--brown-rich, #1F1012); }

/* Sits ABOVE the resume pill (pill: bottom 22px, ~34px tall -> top edge 56px),
   so the two never collide when both are showing. */
.ct-hint {
    position: fixed;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%);
    z-index: 29;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(92vw, 27rem);
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    background: rgba(31, 16, 18, 0.86);
    border: 1px solid rgba(196, 148, 58, 0.28);
    border-radius: 20px;
    color: var(--cream-dark, #D4C8B0);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.ct-hint.ct-show { opacity: 1; pointer-events: auto; }
.ct-hint-x {
    flex-shrink: 0;
    display: inline-flex;
    padding: 0.25rem;
    background: none;
    border: none;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.65;
    cursor: pointer;
}
.ct-hint-x:hover { opacity: 1; color: var(--gold-primary, #C4943A); }

/* ── Columns beneath the film: transcript + citation dock ────── */
/* Below 1200px the dock is display:contents — no box of its own, so the panel
   inside it still renders as the fixed overlay drawer from articles-panel.css
   instead of being hidden. Never display:none, which would hide the panel. */
.creation-dock { display: contents; }

@media (min-width: 1200px) {
    .creation-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--ct-dock-w);
        column-gap: var(--ct-gutter);
        /* align-items:start is load-bearing: it leaves the dock's grid area at
           the row's full height so position:sticky has somewhere to travel. */
        align-items: start;
    }

    .creation-columns .creation-transcript {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .creation-dock {
        display: block;
        position: sticky;
        top: var(--ct-dock-top);
        height: calc(100vh - var(--ct-dock-top) - 1.5rem);
        min-height: 220px;
    }

    /* Panel closed — hidden, remembered 'off', or never opened: drop the dock
       track entirely and let the transcript reflow to the full container width
       rather than leaving dead space beside it. Toggled by showBox/hideBox. */
    .creation-reading.dock-hidden .creation-columns {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .creation-reading.dock-hidden .creation-dock { display: none; }

    /* Alone again: keep a readable measure instead of a 1200px-wide line. */
    .creation-reading.dock-hidden .creation-transcript {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Citation panel: widen + two columns (extends .ap-panel) ─── */
@media (min-width: 1200px) {
    .ap-panel.ap-panel--creation { width: min(640px, 46vw); }

    /* Docked stream: cancel the fixed right-sidebar treatment .ap-panel gets
       from articles-panel.css and sit in the grid track instead. Specificity
       (0,3,0 / 0,4,0) beats .ap-panel and .ap-panel.ap-open; creation.css also
       loads last. /articles/ is untouched — every selector here carries
       .ap-panel--creation. */
    .ap-panel.ap-panel--creation.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--creation.ct-docked.ap-open {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    /* Study state: the held passage reads as deliberately different from the
       passing stream. */
    .ap-panel.ap-panel--creation.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 passage streams in. */
@keyframes ctFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.ap-panel--creation .ap-body.ct-fade { animation: ctFadeIn 0.32s ease both; }

/* Hide control: labelled, not a bare X — the clean film is one click away. */
.ap-panel--creation .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--creation .ap-close.ct-hide-cites:hover {
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
}

/* Resume film: shown only while a passage is pinned. */
.ap-panel--creation .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;
    cursor: pointer;
}
.ap-panel--creation .ct-resume-film[hidden] { display: none; }
.ap-panel--creation .ct-resume-film:hover { background: var(--gold-light, #D4A84A); }
.ap-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 620px) {
    .ap-cols { grid-template-columns: 1fr; gap: 0.5rem; }
}
.ap-col-empty {
    font-style: italic;
    font-size: 0.82rem;
    color: var(--cream, #E8DCC4);
    opacity: 0.4;
    padding: 0.5rem 0;
    margin: 0;
}
.ap-pending {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--cream-dark, #D4C8B0);
    background: rgba(196, 148, 58, 0.06);
    border: 1px solid rgba(196, 148, 58, 0.15);
    border-radius: var(--radius-sm, 4px);
    padding: 0.85rem 1rem;
}
.ap-anchor-ref a { color: inherit; text-decoration: none; }
.ap-anchor-ref a:hover { text-decoration: underline; }

/* ── Entry / About worship notice ────────────────────────────── */
.creation-entry {
    position: fixed;
    inset: 0;
    z-index: 2100;
    background: rgba(10, 7, 6, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    transition: opacity 0.4s ease;
}
.creation-entry.creation-hide { opacity: 0; pointer-events: none; }
.creation-entry-card { max-width: 620px; text-align: center; margin: auto; }
.creation-entry-thumb {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(196, 148, 58, 0.5);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    margin: 0 auto 22px;
}
.creation-entry h2 {
    font-family: var(--font-serif, Georgia, serif);
    color: var(--cream-soft, #F5EFE4);
    font-size: 1.5rem;
    margin-bottom: 16px;
}
.creation-entry p {
    font-family: var(--font-serif, Georgia, serif);
    color: var(--cream, #E8DCC4);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 14px;
}
.creation-entry-nop {
    color: var(--gold-light, #D4A84A);
    font-size: 0.95rem;
    margin: 18px 0 26px !important;
}
.creation-entry button {
    background: var(--gold-primary, #C4943A);
    color: var(--brown-rich, #1F1012);
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-family: var(--font-sans, sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.creation-entry button:hover { background: var(--gold-light, #D4A84A); }

@media (prefers-reduced-motion: reduce) {
    .ct-cue, .ct-span, .ct-resume, .creation-entry,
    .ct-cite-toggle, .ct-hint, .ap-panel--creation.ct-docked { transition-duration: 0.01ms !important; }
    .ap-panel--creation .ap-body.ct-fade { animation: none; }
}

/* ── "Play from here": deliberate seek control in the creation citation
   panel header. Scoped to .ap-panel--creation so the shared /articles/
   apparatus is untouched. Seeks to the span's data-start + plays + closes
   (wired in creation.js). ── */
.ap-panel--creation .ap-seek {
    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.06em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.ap-panel--creation .ap-seek svg { display: block; flex-shrink: 0; }
.ap-panel--creation .ap-seek:hover { background: var(--gold-light, #D4A84A); }
.ap-panel--creation .ap-seek:active { transform: scale(0.97); }
.ap-panel--creation .ap-seek:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .ap-panel--creation .ap-seek { transition-duration: 0.01ms !important; }
}