/* YSP TEXT PLAYER — front-end styling
   Deliberately plain; adapt to your theme. The only structurally important
   rule is .is-playing, which the JS toggles on the live paragraph. */

.ysp-text-player {
    max-width: 46em;
    margin: 0 auto 2em;
    font-size: 1.05rem;
    line-height: 1.7;
}



/* ── whole-text bar ───────────────────────────────────────────────── */
.ysp-text-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 1.4em;
    background: #f4f4f6;
    border-radius: 8px;
    position: sticky;   /* stays reachable on a long read */
    top: 0;
    z-index: 5;
}

.ysp-text-play-all {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #2271b1;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.ysp-text-play-all:hover { background: #135e96; }

.ysp-text-seek { flex: 1 1 auto; accent-color: #2271b1; }

.ysp-text-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: #50575e;
}

/* ── paragraphs ───────────────────────────────────────────────────── */
.ysp-text-para {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 1.1em;
    padding: 6px 10px 6px 6px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background .25s ease, border-color .25s ease;
}

.ysp-text-para-play {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin-top: 4px;
    border: 1px solid #c3c4c7;
    border-radius: 50%;
    background: #fff;
    color: #2271b1;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity .2s ease;
}
.ysp-text-para:hover .ysp-text-para-play,
.ysp-text-para.is-playing .ysp-text-para-play { opacity: 1; }

.ysp-text-para-body { flex: 1 1 auto; }

/* the live paragraph */
.ysp-text-para.is-playing {
    background: #fff8e5;
    border-left-color: #dba617;
}


/* ═══════════════════════════════════════════════════════════════════════
   YSP DIALOGUE PLAYER
   Append to ysp-text-player.css.

   The block wears three wrapper classes at once — .ysp-text-player,
   .ysp-dialogue-player and .ysp-lc-section-dialogue — so it inherits both
   the player transport and the existing dialogue look. Everything here is
   scoped to .ysp-dialogue-player so nothing leaks into the plain text
   player or into dialogues that have no audio.
   ═══════════════════════════════════════════════════════════════════════ */

/* The dialogue heading and context sit above the transport bar; give the
   bar a little room so it does not crowd them. */
.ysp-dialogue-player .dialogue-title   { margin: 0 0 4px; }
.ysp-dialogue-player .dialogue-context { margin: 0 0 12px; color: #555; }
.ysp-dialogue-player .ysp-text-bar     { margin-bottom: 14px; }

/* Each turn is both a paragraph of the player and an exchange of the
   dialogue. Grid keeps the play button out of the text flow, so long
   turns wrap under themselves rather than under the button. */
.ysp-dialogue-player .exchange.ysp-text-para {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    margin: 0 0 8px;
}

.ysp-dialogue-player .ysp-text-para-body { display: block; }
.ysp-dialogue-player .speaker            { margin-right: 2px; }

/* Currently speaking. .is-playing is toggled by ysp-text-player.js. */
.ysp-dialogue-player .exchange.is-playing {
    background: #fff8e1;
    box-shadow: inset 3px 0 0 #f0a500;
}

/* Two-hander colouring that does not depend on the speaker's job title.
   ysp-spk-N is assigned in order of first appearance. */
.ysp-dialogue-player .ysp-spk-1 .speaker { color: #1b6ca8; }
.ysp-dialogue-player .ysp-spk-2 .speaker { color: #a83279; }
.ysp-dialogue-player .ysp-spk-3 .speaker { color: #2e7d32; }
.ysp-dialogue-player .ysp-spk-4 .speaker { color: #b35309; }

/* Dialogues sit inline with page sections, so they take the section's
   width rather than the reading measure a standalone text player wants. */
.ysp-dialogue-player {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   LOCKED STATE — replaces the existing rules at the foot of
   ysp-text-player.css (lines 132-137, the body.ysp-no-audio-access block)
 
   The old rules used display:none on the controls. That hides the very
   thing a locked-out reader needs to click in order to be told why it is
   locked. Dim them instead: visible, obviously inert, and still able to
   receive the click that triggers the prompt.
 
   The text itself is never touched — reading stays free, listening does not.
   ═══════════════════════════════════════════════════════════════════════ */
 
body.ysp-no-audio-access .ysp-text-player .ysp-text-play-all,
body.ysp-no-audio-access .ysp-text-player .ysp-text-para-play {
    opacity: .4;
    cursor: not-allowed;
    filter: grayscale(1);
}
 
/* Hover normally brings the paragraph button up to full opacity; hold it
   down so the control does not look live when it is not. */
body.ysp-no-audio-access .ysp-text-player .ysp-text-para:hover .ysp-text-para-play {
    opacity: .4;
}
 
/* The seek bar is disabled by the gate script. Match that visually and
   stop the drag cursor appearing. */
body.ysp-no-audio-access .ysp-text-player .ysp-text-seek {
    opacity: .4;
    cursor: not-allowed;
}
 
/* A quiet lock marker on the transport bar, so the reason is legible
   before anything is clicked. */
body.ysp-no-audio-access .ysp-text-player .ysp-text-time::after {
    content: " \1F512";
    opacity: .7;
}
 
/* Nothing should pulse or slide while locked. */
body.ysp-no-audio-access .ysp-text-player .ysp-text-para {
    transition: none;
}
 

@media (prefers-reduced-motion: reduce) {
    .ysp-dialogue-player .exchange.ysp-text-para { transition: none; }
}