/* Crowd Editor full-screen player. */

.ce-player-shell {
    position: fixed;
    inset: 0;
    background: #000;
    color: #f3eee0;
    overflow: hidden;
    z-index: 1000;
}

.ce-player-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ce-player-hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.ce-player-now {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
    font-size: 0.95rem;
    opacity: 0.85;
}

.ce-player-chapter { font-weight: 600; letter-spacing: 0.04em; }
.ce-player-scene { opacity: 0.8; }

.ce-player-subtitle {
    align-self: center;
    max-width: 720px;
    margin: auto auto 80px auto;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.5;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    padding: 16px 24px;
    border-radius: 12px;
}

/* The HUD is pointer-events: none so the canvas stays draggable underneath. The controls have to
   opt back in explicitly or the buttons render and do nothing when clicked. */
.ce-player-controls {
    align-self: center;
    display: flex;
    gap: 16px;
    pointer-events: auto;
    margin-bottom: 12px;
}

.ce-player-btn {
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;      /* the 44px touch target — these are the only way to pause on a phone */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: background 120ms ease, border-color 120ms ease;
}
.ce-player-btn:hover { background: rgba(0, 0, 0, 0.65); border-color: rgba(255, 255, 255, 0.6); }

/* A visible focus ring, in white so it reads against the artwork rather than the page. Over a
   full-screen canvas the browser default is frequently invisible, and a keyboard user who cannot
   see which control they are on has buttons in name only. */
.ce-player-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Keyboard hints. These were the whole of the old "controls" — kept, because they are useful, and
   demoted, because they were never operable. */
.ce-player-shortcuts {
    align-self: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.55;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* now-playing became a <p> for its live region; strip the UA margin. The subtitle is also a <p> now
   but sets its own `margin: auto auto 80px auto` to centre itself, so resetting it here would
   quietly undo that — this rule comes later in the file and would win. */
.ce-player-now { margin-block: 0; }

/* The transcript panel. Scrolls over the artwork rather than replacing the player, so a reader can
   follow along while it plays — the point is a text equivalent, not a separate mode. */
.ce-player-transcript {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
    overflow-y: auto;
    padding: 48px max(24px, 8vw) 96px;
    background: rgba(12, 10, 8, 0.94);
    backdrop-filter: blur(6px);
    color: #f2ece2;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    line-height: 1.7;
}
.ce-player-transcript[hidden] { display: none; }
.ce-player-transcript:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.ce-player-transcript h2 { font-size: 1.5rem; margin: 0 0 28px; }
.ce-transcript-chapter h3 { font-size: 1.15rem; margin: 32px 0 12px; opacity: 0.85; }
.ce-transcript-scene { margin-bottom: 24px; }

.ce-transcript-location {
    margin: 0 0 8px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
}

.ce-transcript-line { margin: 0 0 10px; max-width: 68ch; }

/* CAST-PLAN 14e's loop-of-truth indicator: where the reading has got to.
   A left rule and a wash rather than a background colour alone, so the mark survives a
   high-contrast mode that drops backgrounds — the reader most likely to be following the
   transcript is the one most likely to be running one. */
.ce-transcript-line.ce-now-reading {
    border-left: 3px solid var(--ce-accent, #c9a227);
    padding-left: 9px;
    margin-left: -12px;
    background: rgba(201, 162, 39, 0.10);
}

@media (prefers-reduced-motion: no-preference) {
    .ce-transcript-line { transition: background-color 160ms ease-out; }
}

/* The speaker is a label, not prose — distinguishing it visually is the text equivalent of hearing
   a different voice. */
.ce-transcript-speaker {
    display: inline-block;
    min-width: 8ch;
    margin-right: 10px;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* The transport row does not wrap, and it must not: reflowing to a second row would move the pause
   button under a thumb resting where it used to be, mid-playback. Six 44px controls with a 16px gap
   need 344px, which is wider than a 320px viewport — an iPhone SE, and what a 640px window reports
   at 200% zoom, which WCAG 1.4.4 requires to keep working.

   The gap gives way rather than the buttons: 44px is the touch-target minimum (WCAG 2.5.5) and the
   note beside `.ce-player-btn` is right that these are the only way to pause on a phone. Comfort is
   the thing there is room to lose. `PlayerTransportFitTests` does the arithmetic, so a seventh
   transport action fails there rather than off the side of somebody's screen. */
@media (max-width: 360px) {
    .ce-player-controls { gap: 8px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   "You'll hear the earlier version of that chapter."

   A role="status" banner telling a listener the audio predates the manuscript.
   It had no rule at all, so on a black full-screen player it rendered in the
   body ink — the same colour and size as the transcript beside it, which is
   the one thing it must not be mistaken for.

   Styled here rather than in editor.css because the surface is dark: the
   form messages there use a light wash that would be invisible on #000.

   Amber rather than red. The playback is not broken and does not stop; the
   reader is hearing something real, just older, and a red banner over a book
   somebody is listening to says an emergency that is not happening.
   ────────────────────────────────────────────────────────────────────────── */
.ce-stale-banner {
    max-width: 60ch;
    margin: 0.75rem auto;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid #c9a227;
    border-radius: 3px;
    background: rgba(201, 162, 39, 0.14);
    color: #f0e2b8;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* One chapter's block in the transcript. `.ce-transcript-chapter h3` styles the
   heading and the container had no rule, so consecutive chapters ran together
   with only the heading's own margin between them — in a panel a listener
   scrolls to find their place. */
.ce-transcript-chapter {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ce-transcript-chapter:last-child { border-bottom: none; margin-bottom: 0; }