10-reading-states.css

/* Module: 10-reading-states.css */
/* Reader phrase grouping, pauses, and active word state styling. */

/* ── TPS Pronunciation guide (primary rehearsal text) ── */
.tps-pronunciation,
.tps-phonetic {
    border-bottom: 0;
    cursor: help;
}

/* ── Card-based layout: cards slide up one by one ──
   Balanced ease-in-out so the block moves at a consistent rate through the
   middle of the travel and arrives decisively on the focus line instead of
   stalling in the last 20 % of the animation. Same duration for transform
   and opacity keeps the two tracks locked — the card finishes fading at
   the same instant it lands, so the operator never sees a half-faded block
   lingering near the guide. */
.rd-card {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform .7s cubic-bezier(.4, 0, .6, 1),
        opacity .7s cubic-bezier(.4, 0, .6, 1);
    will-change: transform, opacity;
    overflow: visible;
}
.rd-card-static {
    transition: none;
}
.rd-card-active {
    transform: translate3d(0,0,0);
    opacity: 1;
    z-index: 2;
}
.rd-card-prev {
    transform: translate3d(0,-104%,0);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
.rd-card-next {
    transform: translate3d(0,104%,0);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

/* Active cluster — no visible border, text floats over gradient */
.rd-cluster-active {
    padding: 36px 0;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    position: relative;
    box-shadow: none;
}

.rd-cluster-emotion {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
    opacity: .55;
    transition: opacity .3s;
}
.rd-cluster-emotion:hover { opacity: .7; }
.rd-emo-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    font-size: 15px;
    line-height: 1;
}
.rd-emo-name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--t4);
}

.rd-attachments {
    position: fixed;
    top: 104px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: min(760px, calc(100vw - 160px));
    pointer-events: none;
}

.rd-attachment {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-width: 176px;
    max-width: 280px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(12,12,12,.68);
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
    color: rgba(246,244,239,.88);
    backdrop-filter: blur(10px);
}

.rd-attachment-thumb,
.rd-attachment-icon {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border-radius: 6px;
}

.rd-attachment-thumb {
    object-fit: cover;
}

.rd-attachment-icon {
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.09);
    color: rgba(246,244,239,.72);
    font-size: 16px;
}

.rd-attachment-name {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-attachment-meta {
    color: rgba(246,244,239,.5);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.rd-cluster-text {
    font-size: var(--rd-font-size, 36px);
    width: 100%;
    max-width: min(100%, var(--rd-stage-content-width, 940px));
    box-sizing: border-box;
    /* relative positioning anchors the absolutely-placed `.rd-focus-lens`
       child — the lens glides between active words in the lens's local
       coordinate space so it scrolls up with the text automatically. */
    position: relative;
    font-weight: 700;
    line-height: 1.9;
    color: rgba(242,230,204,.22);
    letter-spacing: 0.01em;
    word-spacing: 0.08em;
    margin-inline: auto;
    overflow-wrap: break-word;
    hyphens: none;
    text-align: center;
    text-wrap: pretty;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* The cluster-text transform is the word-level scroll inside a block.
       A longer ease-out glide makes the line step feel like one smooth
       slide onto the focal guide instead of a hard 1-line snap. Color /
       text-shadow / opacity are NOT transitioned here — they snap
       instantly when the card class changes so there is no faster "flash"
       of the previous block's text brightening at the tail of the card
       transition. Per-word tone fades still happen via .rd-w's own
       transition block (fast, word-scoped). */
    transition: transform .52s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

.rd-card-prev .rd-cluster-text,
.rd-card-next .rd-cluster-text {
    color: rgba(232,213,176,.2);
    text-shadow: none;
}

.rd-card-prev .rd-cluster-emotion,
.rd-card-next .rd-cluster-emotion {
    opacity: .16;
}

.rd-card-prev .rd-g-emphasis,
.rd-card-next .rd-g-emphasis {
    text-decoration-color: rgba(232,213,176,.08);
}

/* ── Semantic word groups — prevent mid-phrase line breaks ──
   Research: eyes read in 2-5 word "thought groups"; breaking mid-phrase
   causes stumbling. white-space:nowrap keeps each group atomic so the
   browser wraps BETWEEN groups (at pause points), never inside them.
   If a single group exceeds container width, overflow-wrap on the parent
   (.rd-cluster-text) allows it to break as a last resort. */
.rd-g {
    display: inline;
    white-space: nowrap;
}

.rd-g-highlight {
    border-radius: .2em;
    display: inline-block;
    isolation: isolate;
    padding-inline: .08em;
    position: relative;
}

.rd-g-highlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: .12em -.06em .16em;
    border-radius: .18em;
    background:
        linear-gradient(180deg, rgba(255,232,148,.22), rgba(238,173,69,.2)),
        linear-gradient(90deg, rgba(255,235,180,.06), rgba(255,214,77,.18), rgba(255,235,180,.06));
    box-shadow:
        inset 0 0 0 1px rgba(255,224,102,.2),
        0 .08em .38em rgba(0,0,0,.14);
    pointer-events: none;
}

.rd-g-active.rd-g-highlight::before {
    background:
        linear-gradient(180deg, rgba(255,238,171,.28), rgba(238,173,69,.28)),
        linear-gradient(90deg, rgba(255,235,180,.08), rgba(255,214,77,.24), rgba(255,235,180,.08));
    box-shadow:
        inset 0 0 0 1px rgba(255,224,102,.28),
        0 .1em .42em rgba(0,0,0,.16);
}

.rd-g-highlight:not(.rd-g-active):not(:has(.rd-w:not(.rd-read)))::before {
    opacity: .2;
}

.rd-g-legato {
    display: inline-block;
    position: relative;
}

.rd-g-building {
    display: inline-block;
    position: relative;
}

/* Group crescendo hairpin — opening `<` shape below the phrase. Thin
   vector stroke so it reads as music notation, not a decorative blob. */
.rd-g-building::after {
    content: "";
    position: absolute;
    left: -.06em;
    right: -.06em;
    bottom: -.56em;
    height: .72em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M6 30 L394 6 M6 30 L394 54' stroke='%23F3DA9A' stroke-opacity='.78' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.rd-g-active.rd-g-building::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M6 30 L394 6 M6 30 L394 54' stroke='%23F6E0A8' stroke-opacity='.96' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Group-level legato slur — a single smooth SVG arc spanning the whole
   phrase. Vector stroke so it stays crisp at README screenshot scale. */
.rd-g-legato::after {
    content: "";
    position: absolute;
    left: -.04em;
    right: -.04em;
    bottom: -.16em;
    height: .28em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M4 6 Q 100 24 196 6' stroke='%238DD5E2' stroke-opacity='.74' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}

.rd-g-active.rd-g-legato::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M4 6 Q 100 24 196 6' stroke='%23A4E4F1' stroke-opacity='.96' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.rd-g-emphasis {
    text-decoration-line: none;
}

.rd-g-emphasis:not(.rd-g-active):not(:has(.rd-w:not(.rd-read))) {
    text-decoration-line: none;
}

/* ── Pause, breath, silence markers ──
   Every pause kind shows a readable symbol so the reader sees breathing
   points at a glance instead of an invisible gap. Markers inherit the
   word's line-height so baseline stays stable. */
.rd-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    vertical-align: baseline;
    color: rgba(238,219,150,.42);
    font-size: inherit;
    line-height: 1;
}

/* Short pause (/ → ~300ms): caesura-style double dot, inline */
.rd-pause[data-pause-kind="short"] {
    width: 0.68em;
    height: 0.9em;
    margin-inline: 0.28em;
}
.rd-pause[data-pause-kind="short"]::before {
    content: "··";
    font-size: 0.95em;
    letter-spacing: 0.08em;
    /* letter-spacing adds a trailing gap only after the last glyph, which
       would offset the "··" pair to the left inside the flex box. Balance
       it with an equal leading padding so the symbol sits optically centered
       with identical gaps to the neighbouring words. */
    padding-inline-start: 0.08em;
    line-height: 0.8;
    opacity: 0.6;
    text-shadow: 0 0 6px rgba(238,219,150,.18);
    animation: rd-pause-glow var(--tps-pause-duration, 0.45s) ease-in-out;
}

/* Breath mark: curved SVG breath comma — open arc facing upward */
.rd-pause-breath {
    width: 0.9em;
    height: 0.9em;
    margin-inline: 0.1em;
}
.rd-pause-breath::before {
    content: "";
    display: block;
    width: 0.72em;
    height: 0.56em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='none'%3E%3Cpath d='M5 22 Q 20 3 35 22' stroke='%23EEDB96' stroke-opacity='.62' stroke-width='2.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    animation: rd-pause-breath-inhale 0.9s ease-in-out;
}

/* Medium pause (// → ~600ms): block divider with fading lines.
   Block + text-align: center keeps the pair centered at every width. */
span.rd-pause.rd-pause-med {
    display: block;
    width: 100%;
    margin: 0.18em 0;
    text-align: center;
    line-height: 1;
    position: relative;
}
span.rd-pause.rd-pause-med::before,
span.rd-pause.rd-pause-med::after {
    content: "";
    display: inline-block;
    width: 2.4em;
    height: 2px;
    margin: 0 0.2em;
    vertical-align: middle;
    background: rgba(238,219,150,.28);
    border-radius: 1px;
    animation: rd-pause-divider var(--tps-pause-duration, 0.6s) ease-out;
}
span.rd-pause.rd-pause-med::before {
    mask-image: linear-gradient(90deg, transparent 0%, black 80%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 80%);
}
span.rd-pause.rd-pause-med::after {
    mask-image: linear-gradient(90deg, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, black 20%, transparent 100%);
}

/* Silence (≥1000ms): block-level readable pause pill.
   The previous whole-rest SVG glyph and tiny "1000MS" caption were
   unreadable at reader scale — the operator could not tell at a glance
   that the block was a pause. One centered pill with the pause glyph ⏸,
   the uppercase word PAUSE, and a readable duration makes the intent
   unmistakable in a single sweep. */
span.rd-pause.rd-pause-long {
    display: block;
    width: 100%;
    margin: 0.5em 0;
    padding: 0;
    text-align: center;
    line-height: 1;
}
span.rd-pause.rd-pause-long::before {
    content: "⏸ pause " attr(data-pause-ms) " ms";
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: rgba(238,219,150,.1);
    border: 1px solid rgba(238,219,150,.34);
    border-radius: 999px;
    padding: 0.4em 1.1em;
    color: rgba(248,236,210,.88);
    font-size: 0.42em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: rd-pause-silence var(--tps-pause-duration, 1.5s) ease-in-out;
}
span.rd-pause.rd-pause-long::after {
    content: none;
}

/* Previous / next card pauses — subtler */
.rd-card-prev .rd-pause,
.rd-card-next .rd-pause {
    opacity: 0.22;
}

/* ── Pause lifecycle ──
   Words live inside a .rd-g group wrapper so the active word's rd-now
   class is NOT a direct sibling of surrounding pauses. Every :has()
   selector therefore steps through the group wrapper to detect where the
   playhead is:
     * passed pause   — any pause with a later sibling group that holds
                        rd-now or rd-read;
     * active pause   — pause directly after the group that holds rd-now
                        (the reader is currently serving it);
     * upcoming pause — none of the above; stays idle.
   All three states are derived from DOM relationships so the renderer
   never has to emit a separate pause-state attribute. */

/* Passed pause — playhead has moved past this gap. Dim to the read tier. */
.rd-pause:has(~ .rd-g .rd-w.rd-now),
.rd-pause:has(~ .rd-g .rd-w.rd-read) {
    opacity: 0.3;
}
.rd-pause:has(~ .rd-g .rd-w.rd-now)::before,
.rd-pause:has(~ .rd-g .rd-w.rd-read)::before,
.rd-pause:has(~ .rd-g .rd-w.rd-now)::after,
.rd-pause:has(~ .rd-g .rd-w.rd-read)::after {
    animation: none;
    box-shadow: none;
}

/* ── Active pause beat ──
   The pause is its own "word" in the reading flow. The reader playback
   loop marks exactly one pause as `.rd-pause-active` during the pause's
   own wall-clock duration. Styling is split by pause kind so each
   marker brightens in its own visual language instead of getting a
   one-size-fits-all yellow pill:
     short pause (··)   — brighter dots, no box
     breath  (svg arc)  — brighter curve, no box
     medium (dividers)  — lit line fill, still line-shaped
     long   (pill)      — bright warm fill keeps the pill silhouette
   Shared parent glow + soft pulse tie them together so all four kinds
   read as "this beat is current" at a glance.
   .rd-pause carries a transition so the active state fades in instead
   of snapping on when the pause becomes the current beat. */
.rd-pause {
    transition:
        color .28s cubic-bezier(.25,.8,.25,1),
        opacity .28s cubic-bezier(.25,.8,.25,1),
        filter .28s cubic-bezier(.25,.8,.25,1);
}

.rd-pause.rd-pause-active {
    opacity: 1;
    color: rgba(255,232,164,.98);
    animation: rd-pause-active-pulse 2.8s ease-in-out infinite;
}

/* Short pause (··) — lit dots, no background box. */
.rd-pause.rd-pause-active[data-pause-kind="short"]::before {
    opacity: 1;
    color: rgba(255,232,164,.98);
    text-shadow: 0 0 14px rgba(255,214,120,.6);
}

/* Breath curve — brighten stroke via filter, no box. */
.rd-pause.rd-pause-active.rd-pause-breath::before {
    opacity: 1;
    filter: brightness(1.55) drop-shadow(0 0 6px rgba(255,214,120,.45));
}

/* Medium pause dividers — lit line fill, keep the line silhouette. */
span.rd-pause.rd-pause-active.rd-pause-med::before,
span.rd-pause.rd-pause-active.rd-pause-med::after {
    background: rgba(255,214,120,.92);
    opacity: 1;
}

/* Long pause pill — bright warm fill, pill shape preserved. */
span.rd-pause.rd-pause-active.rd-pause-long::before {
    background: rgba(255,214,120,.96);
    border-color: rgba(255,214,120,.7);
    color: rgba(30,20,8,.92);
    opacity: 1;
}
@keyframes rd-pause-active-pulse {
    0%, 100% { filter: brightness(1)    drop-shadow(0 0 8px rgba(255,214,120,.35));  }
    50%      { filter: brightness(1.2)  drop-shadow(0 0 16px rgba(255,214,120,.7)); }
}

@keyframes rd-pause-glow {
    0%   { opacity: 0.32; }
    40%  { opacity: 0.9; }
    100% { opacity: 0.6; }
}
@keyframes rd-pause-divider {
    0%   { opacity: 0.2; }
    60%  { opacity: 0.9; }
    100% { opacity: 1; }
}
@keyframes rd-pause-breath-inhale {
    0%   { opacity: 0.28; }
    45%  { opacity: 1; }
    100% { opacity: 0.7; }
}
@keyframes rd-pause-silence {
    0%   { opacity: 0.22; }
    30%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0.78; }
}

/* ── Reading flashlight sweep ──
   A soft warm circle that sweeps left → right inside the active word.
   Implemented as a pseudo-element positioned ABSOLUTELY over the
   word, sized 2 em × 2 em with a soft radial gradient inside it.
   The pseudo is centred horizontally on its `left` percentage via
   `transform: translateX(-50%)`, and the `left` property is animated
   from 0 % to 100 % of the parent word's width. Because the pseudo
   floats above the word and can extend beyond its bounding box (no
   overflow clipping), there is no hard edge — the gradient ring
   fades smoothly no matter how close the centre is to a word edge.
   Cue classes that already use `::before` for their own glyph
   (staccato dot, sarcasm quotes, aside parens, stress accent,
   highlight yellow rect, building hairpin, legato arc) are
   excluded from this rule so the beam never overrides cue chrome;
   those cues communicate through their own visual character. */
/* Beam is scoped to `.rd-stage.rd-reading-active` so it only fires
   DURING actual playback — at the start of a segment (new card just
   appeared, or playback stopped) there is no beam, only the word's
   own colour + text-shadow. The `.rd-reading-active` class is added
   to `.rd-stage` only while `_isReaderPlaying` is true in C#. */
.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active:not(.tps-staccato):not(.tps-sarcasm):not(.tps-aside):not(.tps-stress):not(.tps-highlight):not(.tps-building):not(.tps-legato):not(.tps-pronunciation):not(.tps-phonetic)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* The beam is intentionally subtle: slightly wider than the cue
       word, very soft, and animated with transform instead of `left`
       so the sweep glides without the old ticky feel. */
    width: calc(100% + 1.1em);
    height: 2.15em;
    transform: translate3d(-68%, -50%, 0) scale(.92);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 230, 150, 0.08) 0%,
        rgba(255, 230, 150, 0.04) 38%,
        rgba(255, 230, 150, 0.015) 64%,
        transparent 86%
    );
    filter: blur(1.5px);
    opacity: 0;
    animation: rd-flashlight-sweep var(--rd-beam-duration, 420ms) var(--rd-beam-easing, cubic-bezier(.28, .12, .22, 1)) forwards;
    pointer-events: none;
    z-index: -1;
}
@keyframes rd-flashlight-sweep {
    0% {
        transform: translate3d(-68%, -50%, 0) scale(.92);
        opacity: .16;
    }
    38% {
        opacity: .24;
    }
    100% {
        transform: translate3d(-32%, -50%, 0) scale(1.01);
        opacity: 0;
    }
}

/* ── Speed cues ──
   Speed is communicated through letter-spacing only. No font-stretch,
   no font-variation-settings, no padding — every one of those shifts the
   word's layout metrics between cards or between idle/active states.
   A single letter-spacing value per speed is static, stable, and reads
   clearly: tight=fast, wide=slow. No streaks or chips either. */
.rd-w.tps-xslow { letter-spacing: 0.075em; }
.rd-w.tps-slow  { letter-spacing: 0.035em; }
.rd-w.tps-fast  { letter-spacing: -0.025em; }
.rd-w.tps-xfast { letter-spacing: -0.05em; }
.rd-w.tps-normal { letter-spacing: 0; }

/* ── WPM badge in emotion header ── */
.rd-emo-wpm {
    font-size: 10px;
    font-weight: 600;
    color: var(--t5);
    margin-left: auto;
    letter-spacing: 0.5px;
    opacity: .5;
}
.rd-emo-wpm small {
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 1px;
}

/* ── Phrase-group highlighting ──
   Research: single-word highlighting suppresses parafoveal preview and
   hurts comprehension. Elevating the entire thought-group lets the eye
   preview upcoming words within the phrase while the speaker reads.
   4-level hierarchy: read (15%) → upcoming (40%) → active group (75%) → current word (100%) */
.rd-g-active > .rd-w:not(.rd-now):not(.rd-read) {
    color: rgba(242,230,204,.42);
}
/* ── Cue colour in preview ──
   Cue words show a muted tint of their hue AS SOON AS the card is
   active — scope is `.rd-card-active` (not `.rd-g-active`) so the
   operator doesn't see cue colours appear only after the first word
   activates. Otherwise the new card looks "plain" for a moment and
   the cue colours pop in later ("коли заліте єкстаре — слова всі в
   активні ап отм стають приглушені"). 0.45 keeps the tint gentle.
   The `.rd-g-active > .rd-w ...` rule further below applies a slight
   brightness boost to the CURRENT group's plain words — cue words
   keep their hue constant and rely on the focus lens + rd-now rules
   to show which word is the current beat. */
.rd-card-active .rd-w.tps-warm:not(.rd-now):not(.rd-read) { color: rgba(255,184,99,.45); }
.rd-card-active .rd-w.tps-concerned:not(.rd-now):not(.rd-read) { color: rgba(242,139,184,.45); }
.rd-card-active .rd-w.tps-focused:not(.rd-now):not(.rd-read) { color: rgba(124,255,178,.45); }
.rd-card-active .rd-w.tps-motivational:not(.rd-now):not(.rd-read) { color: rgba(191,164,255,.45); }
.rd-card-active .rd-w.tps-neutral:not(.rd-now):not(.rd-read) { color: rgba(237,242,247,.45); }
.rd-card-active .rd-w.tps-urgent:not(.rd-now):not(.rd-read) { color: rgba(255,120,120,.45); }
.rd-card-active .rd-w.tps-happy:not(.rd-now):not(.rd-read) { color: rgba(255,230,109,.45); }
.rd-card-active .rd-w.tps-excited:not(.rd-now):not(.rd-read) { color: rgba(255,144,220,.45); }
.rd-card-active .rd-w.tps-sad:not(.rd-now):not(.rd-read) { color: rgba(157,182,255,.45); }
.rd-card-active .rd-w.tps-calm:not(.rd-now):not(.rd-read) { color: rgba(118,228,197,.45); }
.rd-card-active .rd-w.tps-energetic:not(.rd-now):not(.rd-read) { color: rgba(255,150,110,.45); }
.rd-card-active .rd-w.tps-professional:not(.rd-now):not(.rd-read) { color: rgba(125,182,255,.45); }
.rd-card-active .rd-w.tps-loud:not(.rd-now):not(.rd-read) { color: rgba(242,193,139,.45); }
.rd-card-active .rd-w.tps-soft:not(.rd-now):not(.rd-read) { color: rgba(199,221,245,.45); }
.rd-card-active .rd-w.tps-whisper:not(.rd-now):not(.rd-read) { color: rgba(207,203,215,.45); }
.rd-card-active .rd-w.tps-aside:not(.rd-now):not(.rd-read) { color: rgba(183,199,205,.45); }
.rd-card-active .rd-w.tps-rhetorical:not(.rd-now):not(.rd-read) { color: rgba(205,179,233,.45); }
.rd-card-active .rd-w.tps-sarcasm:not(.rd-now):not(.rd-read) { color: rgba(255,138,163,.45); }
.rd-card-active .rd-w.tps-building:not(.rd-now):not(.rd-read) { color: rgba(240,212,141,.45); }
.rd-card-active .rd-w.tps-legato:not(.rd-now):not(.rd-read) { color: rgba(141,213,226,.45); }
.rd-card-active .rd-w.tps-staccato:not(.rd-now):not(.rd-read) { color: rgba(236,181,216,.45); }
.rd-card-active .rd-w.tps-energy:not(.rd-now):not(.rd-read) {
    color: hsl(calc(72 + (12 * var(--tps-energy, 0))) 100% calc(76% - (10% * var(--tps-energy, 0))) / calc(.34 + (.24 * var(--tps-energy, 0))));
}
.rd-card-active .rd-w.tps-melody:not(.rd-now):not(.rd-read) {
    color: hsl(calc(202 + (10 * var(--tps-melody, 0))) 100% calc(82% - (10% * var(--tps-melody, 0))) / calc(.34 + (.24 * var(--tps-melody, 0))));
}
.rd-card-active .rd-w.tps-stress:not(.rd-now):not(.rd-read) {
    text-decoration-color: rgba(255,208,96,.2);
    color: rgba(242,230,204,.45);
}
.rd-g-active.rd-g-emphasis { text-decoration-line: none; }
.rd-card-active .rd-w.tps-highlight:not(.rd-now):not(.rd-read) { color: rgba(255,235,184,.45); }

/* ── Focus lens (slide flow) ──
   A single translucent warm ellipse that glides between active words.
   The lens is the SOLE source of "slide flow" motion through the text:
     · Preview words keep their stable cluster dimming.
     · The focus word's own color change is crisp (.22s transition).
     · The lens carries the visual sense of motion by smoothly sliding
       from the previous word's position to the new word's position
       over .55s (a bit longer than a typical word at 140 WPM so the
       glide always feels gentler than the word rhythm).
   Pure transform + width transitions — no layout side-effects, no
   baseline shift, no impact on neighbouring words. */
.rd-focus-lens {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(255,220,160,.09) 0%,
            rgba(255,214,120,.045) 44%,
            rgba(255,214,120,.015) 74%,
            transparent 92%);
    border-radius: 28px;
    filter: blur(10px);
    transform: translate3d(0, 0, 0);
    /* Dynamic transition — JS sets `--rd-lens-duration` and
       `--rd-lens-easing` per move based on the target word's cue so the
       glide matches cue psychology:
         staccato / xfast  → snap (0.15s / 0.22s)
         loud / stress / default → 0.42s ease-out
         soft / calm / slow / sad → 0.55s ease-out (gentler)
         legato             → 0.6s linear (smoothest glide)
       The lens is the only visible "motion" between words, so its
       timing carries the whole feel of the reading rhythm. */
    transition:
        transform var(--rd-lens-duration, .42s) var(--rd-lens-easing, cubic-bezier(.22, 1, .36, 1)),
        width var(--rd-lens-duration, .42s) var(--rd-lens-easing, cubic-bezier(.22, 1, .36, 1)),
        height var(--rd-lens-duration, .42s) var(--rd-lens-easing, cubic-bezier(.22, 1, .36, 1)),
        opacity .34s ease-out;
    will-change: transform, width, height, opacity;
    /* z-index 0 leaves the lens behind in-flow (statically-positioned)
       children like `.rd-w`, so the word glyphs render on top of the
       soft glow. */
    z-index: 0;
}
.rd-focus-lens-active {
    opacity: 1;
}

/* Word states — layout-stable visual transitions only.
   0.32s transition keeps up with reader pace (typical word 350-500ms) so
   consecutive words don't overlap in fade. `filter` is in the transition
   list so per-emotion animations don't snap when the word leaves rd-now.
   `display: inline-block` is required for the kinetic transform on
   `.rd-w.rd-now` to apply — inline boxes ignore transform. Words still
   wrap at whitespace between siblings the same way they did as inline. */
.rd-w {
    display: inline-block;
    position: relative;
    /* Scale growth anchors at the text baseline (line-box bottom) so
       a bigger/smaller word grows upward or shrinks upward — the
       baseline stays pinned and neighbouring words never shift. */
    transform-origin: center bottom;
    /* Short, crisp transitions so words do NOT leave bright trails
       behind the focus. The sense of "slide-flow" is carried by the
       separate `.rd-focus-lens` element which glides between active
       words, not by stretching per-word color fades. */
    transition:
        color .22s cubic-bezier(.25,.8,.25,1),
        background-color .22s cubic-bezier(.25,.8,.25,1),
        opacity .22s cubic-bezier(.25,.8,.25,1),
        text-decoration-color .22s cubic-bezier(.25,.8,.25,1),
        text-shadow .22s cubic-bezier(.25,.8,.25,1),
        transform .28s cubic-bezier(.25,.8,.25,1),
        filter .22s cubic-bezier(.25,.8,.25,1);
}

.rd-emotion-marker {
    position: absolute;
    left: -.9em;
    top: .18em;
    width: 0;
    height: 0;
    line-height: 1;
    pointer-events: none;
}

.rd-emotion-marker::before {
    content: attr(data-reader-emotion-marker);
    display: block;
    font-size: .52em;
    line-height: 1;
    opacity: .82;
}

.rd-w[data-tps-volume],
.rd-w[data-tps-delivery],
.rd-w[data-tps-articulation],
.rd-w[data-tps-energy],
.rd-w[data-tps-melody],
.rd-w[data-tps-speed],
.rd-w[data-tps-emphasis],
.rd-w.tps-pronunciation,
.rd-w.tps-phonetic,
.rd-w[data-tps-stress="true"] {
    --tps-cue-opacity: 1;
    display: inline-block;
    font-weight: var(--tps-cue-weight, inherit);
    opacity: var(--tps-cue-opacity);
    vertical-align: baseline;
}
.rd-speed-cue-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: .22em .08em;
    padding: .12em .38em;
    border: 1px solid rgba(238,219,177,.2);
    border-radius: 6px;
    background: rgba(16,15,13,.42);
    color: rgba(244,226,184,.78);
    font-family: var(--mono);
    font-size: .28em;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-.46em);
    vertical-align: baseline;
    white-space: nowrap;
}
.rd-w.rd-now + .rd-speed-cue-label {
    border-color: rgba(246,225,174,.42);
    background: rgba(246,225,174,.16);
    color: rgba(255,242,208,.96);
}
/* ── Volume ──
   Volume cues encode loudness through font-weight, letter-spacing, opacity,
   and text-shadow ONLY. They MUST NOT change font-size, line-height, margin,
   or any transform that could shift the word's baseline or visual height —
   the active focus word must never hop up or down when it becomes rd-now.
   Layout-affecting properties (font-weight, font-style, letter-spacing)
   are applied on the BASE cue class (preview + active both) so a word's
   width never changes when it becomes rd-now. Otherwise the neighbouring
   words visibly slide as each cue word activates — the user's complaint:
   "ці віперали лауди не мають змінювати позицію інших слів". Only
   colour, glow, filter, opacity — properties that stay inside the word's
   box — differ between preview and active. */
.rd-w.tps-loud {
    font-weight: var(--tps-cue-weight, 820);
    letter-spacing: .018em;
}
.rd-w.rd-now.tps-loud {
    text-shadow:
        0 1px 0 rgba(0,0,0,.24),
        0 0 22px rgba(245,200,139,.38),
        0 0 12px rgba(255,214,146,.2);
}
.rd-w.tps-soft {
    font-weight: var(--tps-cue-weight, 520);
    opacity: var(--tps-cue-opacity, 1);
}
.rd-w.rd-now.tps-soft {
    opacity: .92;
    text-shadow: 0 0 14px rgba(199,221,245,.2);
}
/* Whisper carries its full layout signature (italic, light weight,
   dotted underline, soft mask) in EVERY state so width stays stable.
   rd-now adds the kinetic opacity shimmer only. */
.rd-w.tps-whisper {
    font-style: italic;
    font-weight: var(--tps-cue-weight, 480);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(207,203,215,.22);
    text-decoration-thickness: 1px;
    text-underline-offset: .32em;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.94) 0%, #000 20%, #000 80%, rgba(0,0,0,.94) 100%);
            mask-image: linear-gradient(90deg, rgba(0,0,0,.94) 0%, #000 20%, #000 80%, rgba(0,0,0,.94) 100%);
}
.rd-w.rd-now.tps-whisper {
    opacity: .82;
}

/* ── Editorial marks — each must be obviously distinct from the others ──
   emphasis = warm amber glow (soft shimmer around the word)
   strong (**bold**)   = heavy weight + bright warm white, drop shadow
   italic (*word*)     = real italic glyph + violet tint
   highlight           = yellow rectangle behind (see .tps-highlight)
   Layout properties (font-weight, font-style, letter-spacing) live on
   the BASE cue class so width stays stable across preview/active —
   changing weight between states would shift neighbouring words. Only
   colour, glow, and text-shadow differ between preview and rd-now. */
.rd-w.tps-emphasis {
    font-weight: var(--tps-cue-weight, 720);
    letter-spacing: .01em;
    text-decoration-line: none;
}
.rd-w.rd-now.tps-emphasis {
    color: rgba(255,228,162,.94);
    text-shadow: 0 0 14px rgba(255,210,128,.22), 0 0 22px rgba(232,170,80,.14);
}
.rd-w.tps-strong {
    font-weight: var(--tps-cue-weight, 880);
    letter-spacing: .014em;
    text-decoration-line: none;
}
.rd-w.rd-now.tps-strong {
    color: rgba(255,240,196,.96);
    text-shadow: 0 1px 0 rgba(0,0,0,.26), 0 0 18px rgba(255,230,184,.22);
}
.rd-w.tps-italic {
    font-style: italic;
    font-synthesis-style: auto;
    font-weight: var(--tps-cue-weight, 600);
    letter-spacing: .012em;
    text-decoration-line: none;
}
.rd-w.rd-now.tps-italic {
    color: rgba(218,210,255,.92);
    text-shadow: 0 0 12px rgba(198,210,255,.14);
}
.rd-w.tps-highlight {
    background: none;
    border-radius: .18em;
    display: inline-block;
    isolation: isolate;
    padding-inline: .04em;
    position: relative;
    vertical-align: baseline;
}
.rd-w.tps-highlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: .1em -.06em .14em;
    border-radius: .16em;
    background:
        linear-gradient(180deg, rgba(255,232,148,.2), rgba(238,173,69,.18)),
        linear-gradient(90deg, rgba(255,235,180,.06), rgba(255,214,77,.18), rgba(255,235,180,.06));
    box-shadow:
        inset 0 0 0 1px rgba(255,224,102,.18),
        0 .08em .34em rgba(0,0,0,.12);
    pointer-events: none;
}
.rd-g-highlight > .rd-w.tps-highlight::before {
    background: none;
    box-shadow: none;
    content: none;
}
/* Per-word building — text glow grows with crescendo progress. Hairpin
   comes from the group (.rd-g-building); single-word fallback is a mini
   opening `<` under the word. */
.rd-w.tps-building {
    font-weight: var(--tps-cue-weight, 700);
    position: relative;
    text-shadow:
        0 0 calc(5px + (12px * var(--tps-build-progress, 0))) rgba(240,212,141, calc(.08 + (.16 * var(--tps-build-progress, 0))));
}
.rd-g:not(.rd-g-building) > .rd-w.tps-building::before {
    content: "";
    position: absolute;
    left: -.04em;
    right: -.04em;
    bottom: -.38em;
    height: .38em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M4 20 L116 4 M4 20 L116 36' stroke='%23F3DA9A' stroke-opacity='.82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.rd-g-building > .rd-w.tps-building::before {
    content: none;
}
.rd-w.tps-melody {
    position: relative;
    text-decoration-line: none;
    text-shadow: 0 0 calc(4px + (10px * var(--tps-melody, 0))) rgba(125,219,255, calc(.06 + (.12 * var(--tps-melody, 0))));
}
/* Per-word legato — the visual slur is drawn at the group level
   (.rd-g-legato::after). Single-word legato gets a mini arc so it's
   still visible outside a group context. */
.rd-w.tps-legato {
    letter-spacing: 0;
    position: relative;
    text-decoration-line: none;
}
.rd-g:not(.rd-g-legato) > .rd-w.tps-legato::before {
    content: "";
    position: absolute;
    left: -.04em;
    right: -.04em;
    bottom: -.16em;
    height: .22em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M4 5 Q 50 18 96 5' stroke='%238DD5E2' stroke-opacity='.72' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    pointer-events: none;
}
.rd-g-legato > .rd-w.tps-legato::before {
    content: none;
}

/* Staccato — musical staccato notation places a DOT ABOVE each word.
   Slight tightened tracking reinforces the "separate, punchy" feel. */
.rd-w.tps-staccato {
    font-weight: var(--tps-cue-weight, 720);
    letter-spacing: .01em;
    position: relative;
    text-decoration-line: none;
}
.rd-w.tps-staccato::before {
    content: "";
    position: absolute;
    left: 50%;
    /* Staccato dot sits just above the cap-height of the word, NOT
       above the whole line-box. The previous `-0.58em` offset put the
       dot more than a line-gap away from the glyph — it read as a
       disconnected floating pixel rather than a musical staccato mark
       attached to the note. `0.18em` above the word's own box keeps
       the dot visually tied to the letter tops. */
    top: -0.18em;
    width: 0.2em;
    height: 0.2em;
    min-width: 6px;
    min-height: 6px;
    transform: translateX(-50%);
    /* currentColor so the dot follows the word's state (idle dim, active
       bright, read muted, previous/next-card dim) instead of staying a
       fixed pink spot when the word itself has already faded. */
    background: currentColor;
    opacity: .74;
    border-radius: 50%;
    pointer-events: none;
}
.rd-w.rd-now.tps-staccato::before {
    opacity: 1;
    box-shadow: 0 0 12px rgba(242,193,225,.42);
}
.rd-w.rd-now.tps-staccato {
    text-shadow: 0 0 12px rgba(236,181,216,.22);
}
.rd-w.tps-energy {
    color: hsl(calc(74 + (12 * var(--tps-energy, 0))) 100% calc(78% - (10% * var(--tps-energy, 0))));
    text-shadow:
        0 0 calc(8px + (18px * var(--tps-energy, 0))) rgba(216,255,114, calc(.12 + (.24 * var(--tps-energy, 0)))),
        0 0 calc(12px + (22px * var(--tps-energy, 0))) rgba(255,214,82, calc(.04 + (.12 * var(--tps-energy, 0))));
    filter: saturate(calc(1.04 + (.24 * var(--tps-energy, 0)))) brightness(calc(.98 + (.12 * var(--tps-energy, 0))));
}
.rd-w.tps-melody {
    color: hsl(calc(202 + (8 * var(--tps-melody, 0))) 100% calc(84% - (10% * var(--tps-melody, 0))));
}
.rd-w.tps-melody::after {
    content: "";
    position: absolute;
    left: -.04em;
    right: -.04em;
    bottom: calc(-0.12em - (.08em * var(--tps-melody, 0)));
    height: calc(.14em + (.16em * var(--tps-melody, 0)));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M2 14 C10 6 18 22 26 14 S42 6 50 14 S66 22 74 14 S90 6 98 14 S114 22 122 14 S138 6 146 14 S154 22 158 14' stroke='%2391D2FF' stroke-opacity='.92' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: calc(.38 + (.42 * var(--tps-melody, 0)));
    pointer-events: none;
}
/* Pronunciation / phonetic — the IPA or simplified guide IS the
   primary rehearsal text (AGENTS rule: "when a guide exists, it must
   be large enough to read as primary rehearsal text"). So the guide
   reads as clean colored glyphs — NO bordered box, NO input-field
   look. The original spelling appears as a compact caption label
   above so the operator keeps the connection between guide and word
   without the heavy "form input" chrome. */
.rd-w.tps-pronunciation,
.rd-w.tps-phonetic {
    color: rgba(239,232,255,.98);
    font-weight: var(--tps-cue-weight, 820);
    letter-spacing: .025em;
    text-decoration-line: none;
    text-shadow: 0 0 16px rgba(194,169,255,.22);
}
.rd-w.tps-phonetic {
    color: rgba(226,247,255,.98);
    text-shadow: 0 0 16px rgba(127,219,255,.22);
}
.rd-w.tps-pronunciation::after,
.rd-w.tps-phonetic::after {
    content: attr(data-original-text);
    position: absolute;
    bottom: calc(100% + .05em);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(234,224,255,.55);
    font-size: .34em;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: lowercase;
    text-shadow: none;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.rd-w.tps-phonetic::after {
    color: rgba(226,247,255,.55);
}
/* Stress — music-style single tick above the word plus faint underline;
   no double-bar bracket (which read as "weird chrome" in earlier iterations). */
.rd-w.tps-stress {
    padding-inline: .04em;
    position: relative;
    text-decoration-line: none;
}
/* Stress accent — the musical sforzando ">" mark above the word. A
   horizontal wedge is much easier to read than a thin vertical tick,
   matches the sheet-music convention operators recognise, and stays
   tall enough to survive README-scale screenshots. */
.rd-w.tps-stress::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.5em;
    width: 0.5em;
    height: 0.28em;
    transform: translateX(-50%);
    background: currentColor;
    opacity: .78;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M4 3 L34 11 L4 19' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M4 3 L34 11 L4 19' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}
.rd-w.rd-now.tps-stress::before {
    opacity: 1;
    width: 0.56em;
    height: 0.32em;
    top: -0.56em;
    filter: drop-shadow(0 0 6px rgba(255,208,96,.5));
}
.rd-w.tps-aside {
    font-style: italic;
    opacity: var(--tps-cue-opacity, .88);
}
.rd-w.tps-aside::before,
.rd-w.tps-aside::after {
    /* Same inheritance as sarcasm quotes: the parenthesis marks follow
       the parent word's state instead of staying bright while the word
       dims. */
    color: inherit;
    opacity: .7;
    font-style: normal;
    font-weight: 520;
    pointer-events: none;
}
.rd-w.tps-aside::before {
    content: "(";
    margin-inline-end: .04em;
}
.rd-w.tps-aside::after {
    content: ")";
    margin-inline-start: .04em;
}
.rd-w.tps-rhetorical {
    color: rgba(201,232,255,.84);
    font-style: italic;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: rgba(116,206,255,.34);
    text-decoration-thickness: 1.5px;
    text-underline-offset: .26em;
}
/* Sarcasm — pink color + curly quotes only. No strikethrough, no
   dashed underline, no italic. The quotation marks alone say "don't take
   this at face value". Simpler = calmer to read. */
.rd-w.tps-sarcasm {
    color: rgba(255,138,163,.94);
    position: relative;
    padding-inline: 0.12em;
    text-decoration-line: none;
}
.rd-w.tps-sarcasm::before,
.rd-w.tps-sarcasm::after {
    /* Inherit color from the word so the quotes track the word's current
       state (idle / active / read / previous-card / next-card) instead of
       staying bright while the word itself dims. Opacity keeps them a
       touch softer than the glyph. */
    color: inherit;
    opacity: .78;
    font-style: normal;
    font-weight: 600;
    pointer-events: none;
}
.rd-w.tps-sarcasm::before {
    content: "\201C";
    margin-inline-end: 0.04em;
    font-size: 0.76em;
}
.rd-w.tps-sarcasm::after {
    content: "\201D";
    margin-inline-start: 0.04em;
    font-size: 0.76em;
}
/* Edit point — a full-width cut-bar that breaks the line so the operator
   immediately sees it's an editorial cut. One shape, three severities.
   Severities only override tokens (--edit-color, --edit-label,
   --edit-weight); the layout, border, padding and dimming lifecycle are
   defined once on .rd-edit-point and inherited by every variant. */
.rd-edit-point {
    --edit-color: 255,214,120;
    --edit-label: "cut";
    --edit-weight: 700;
    display: block;
    width: 100%;
    margin: 0.4em 0;
    padding: 0;
    text-align: center;
    line-height: 1;
    color: rgba(var(--edit-color),.72);
    pointer-events: none;
}
.rd-edit-point::before {
    content: var(--edit-label);
    display: inline-block;
    font-size: 0.42em;
    font-weight: var(--edit-weight);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: inherit;
    border: 1px solid rgba(var(--edit-color),.44);
    border-radius: 999px;
    padding: 0.3em 1.1em;
    background: rgba(var(--edit-color),.1);
    white-space: nowrap;
    pointer-events: none;
}
.rd-edit-point::after { content: none; }
.rd-edit-point-medium {
    --edit-color: 255,150,86;
    --edit-label: "cut · review";
}
.rd-edit-point-high {
    --edit-color: 255,92,92;
    --edit-label: "hard cut";
    --edit-weight: 800;
}
/* (old gradient fast/xfast treatment replaced by motion streaks above) */

.rd-card-prev .rd-w,
.rd-card-next .rd-w {
    color: rgba(232,213,176,.22) !important;
    text-decoration-color: currentColor !important;
    text-shadow: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Read words — dim but KEEP every cue's visual signature (italic, weight,
   underline style, etc.). The word must look identical to its upcoming
   state except for brightness — the reader sees a consistent document,
   not a "style-strip" on every already-read word.
   CRITICAL: do NOT reset letter-spacing, font-style, font-weight, font-
   size, or any property that could change the computed width/height of
   the word. Only color/shadow/decoration-color get dimmed. */
.rd-w.rd-read {
    color: rgba(242,230,204,.22) !important;
    text-decoration-color: currentColor !important;
    text-shadow: none !important;
    background: none !important;
    box-shadow: none !important;
    /* font-style, font-weight, text-decoration-line, letter-spacing —
       intentionally preserved from the cue rule. */
}

/* ── Decoration dim lifecycle ──
   ONE rule for every cue's decorative pseudo-elements so each tps-* cue
   has identical behaviour across idle / active / read / previous-card /
   next-card states. No more per-cue content:none or opacity:0 hacks —
   the decoration stays on screen as a dim ghost so the reader recognises
   the cue shape even on already-read text, and matches the word colour
   instead of clinging to its original bright hue. */
.rd-card-prev .rd-w::before,
.rd-card-prev .rd-w::after,
.rd-card-next .rd-w::before,
.rd-card-next .rd-w::after {
    opacity: .22 !important;
    box-shadow: none !important;
    animation: none !important;
}
.rd-w.rd-read::before,
.rd-w.rd-read::after {
    opacity: .3 !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Phonetic / pronunciation boxes must dim like the rest of the read text
   instead of staying bright after the word has passed. The base cue rule
   paints the glyph through -webkit-text-fill-color and wraps it in a
   bordered gradient box, so the generic .rd-w.rd-read color/background
   overrides don't reach those properties on their own. */
.rd-w.rd-read.tps-pronunciation,
.rd-w.rd-read.tps-phonetic,
.rd-card-prev .rd-w.tps-pronunciation,
.rd-card-prev .rd-w.tps-phonetic,
.rd-card-next .rd-w.tps-pronunciation,
.rd-card-next .rd-w.tps-phonetic {
    -webkit-text-fill-color: rgba(242,230,204,.22) !important;
    border-color: rgba(242,230,204,.14) !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ── Active word — kinetic driven ──
   Fixed-duration infinite CSS keyframes have been replaced by per-word
   envelopes dispatched from the reader's ActivateReaderWordAsync hook
   (see wwwroot/teleprompter/kinetic-reader.js). Each envelope animates
   a single numeric CSS variable over the EXACT wall-clock duration the
   word will occupy before the next word becomes active — so the glow
   and brightness breathe at the pace the word is actually being spoken,
   not on a fixed 1.4-second robot loop.

   The CSS here only declares how those variables feed filter and
   text-shadow; WAAPI owns the timing. */
.rd-w.rd-now {
    color: rgba(248,236,210,.96);
    /* Base active-word glow — applied statically. Per-cue kinetic
       motion is driven by CSS @keyframes animations defined below
       (rd-cue-loud, rd-cue-urgent, rd-cue-stress, …), NOT by WAAPI
       + `@property` custom-property interpolation. CSS @keyframes
       fire deterministically on every engine the moment a class
       matches — no browser quirks, no repaint issues. */
    text-shadow:
        0 0 18px rgba(248,236,210,.36),
        0 0 34px rgba(232,130,92,.18);
}

/* ── Per-cue kinetic animations (pure CSS @keyframes) ──
   Each cue class owns its own `animation` shorthand. When a word
   gets `.rd-now` + `.tps-X`, the matching animation fires once from
   0 %. Duration + easing pick the cue's character: sforzando hits
   fast, legato/calm glide slowly, staccato snaps briefly, urgent
   shakes rapidly. `forwards` keeps the word at its settled state
   until `.rd-now` is removed; the `.rd-w` base transition then fades
   color/shadow back to the preview. */

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-loud {
    animation: rd-cue-loud var(--rd-kinetic-duration, 560ms) cubic-bezier(.2, 0, .3, 1) forwards;
}
@keyframes rd-cue-loud {
    0%   { transform: scale(1);     text-shadow: 0 0 14px rgba(245,200,139,.2); }
    15%  { transform: scale(1.07);  text-shadow: 0 0 40px rgba(245,200,139,.7), 0 0 18px rgba(255,214,146,.34); }
    55%  { transform: scale(1.05);  text-shadow: 0 0 30px rgba(245,200,139,.5), 0 0 14px rgba(255,214,146,.24); }
    100% { transform: scale(1.03);  text-shadow: 0 0 22px rgba(245,200,139,.38), 0 0 12px rgba(255,214,146,.2); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-soft {
    animation: rd-cue-soft var(--rd-kinetic-duration, 560ms) ease-out forwards;
}
@keyframes rd-cue-soft {
    0%   { transform: scale(1);    opacity: 1;    text-shadow: 0 0 10px rgba(199,221,245,.16); }
    50%  { transform: scale(.975); opacity: .86;  text-shadow: 0 0 18px rgba(199,221,245,.24); }
    100% { transform: scale(.985); opacity: .92;  text-shadow: 0 0 14px rgba(199,221,245,.2); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-whisper {
    animation: rd-cue-whisper var(--rd-kinetic-duration, 680ms) ease-out forwards;
}
@keyframes rd-cue-whisper {
    0%   { transform: scale(1) translateX(0);         opacity: 1;  filter: blur(0); }
    60%  { transform: scale(.97) translateX(-1.5px);  opacity: .76; filter: blur(.8px); }
    100% { transform: scale(.98) translateX(-2px);    opacity: .82; filter: blur(1px); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-urgent {
    animation: rd-cue-urgent var(--rd-kinetic-duration, 620ms) linear forwards;
}
@keyframes rd-cue-urgent {
    0%   { transform: translateX(0)    scale(1);    filter: brightness(1)    saturate(1); }
    7%   { transform: translateX(-5px) scale(1.018); filter: brightness(1.24) saturate(1.42); }
    17%  { transform: translateX(5px)  scale(1.018); filter: brightness(1.2)  saturate(1.36); }
    30%  { transform: translateX(-4px) scale(1.012); filter: brightness(1.16) saturate(1.28); }
    44%  { transform: translateX(3px)  scale(1.008); filter: brightness(1.12) saturate(1.22); }
    60%  { transform: translateX(-2px) scale(1);     filter: brightness(1.08) saturate(1.14); }
    78%  { transform: translateX(1px)  scale(1);     filter: brightness(1.04) saturate(1.08); }
    100% { transform: translateX(0)    scale(1);    filter: brightness(1)    saturate(1); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-stress {
    animation: rd-cue-stress var(--rd-kinetic-duration, 420ms) ease-out forwards;
}
@keyframes rd-cue-stress {
    0%   { transform: scale(1)    translateX(0); }
    10%  { transform: scale(1.06) translateX(3px); }
    25%  { transform: scale(1.045) translateX(-2px); }
    50%  { transform: scale(1.02) translateX(1px); }
    100% { transform: scale(1.02) translateX(0); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-staccato {
    animation: rd-cue-staccato var(--rd-kinetic-duration, 320ms) ease-out forwards;
}
@keyframes rd-cue-staccato {
    0%   { transform: scale(1);    filter: brightness(1); }
    12%  { transform: scale(1.05); filter: brightness(1.22); }
    30%  { transform: scale(1.02); filter: brightness(1.12); }
    100% { transform: scale(1.01); filter: brightness(1); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-energetic,
.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-excited {
    animation: rd-cue-energetic var(--rd-kinetic-duration, 620ms) ease-in-out forwards;
}
@keyframes rd-cue-energetic {
    0%   { transform: scale(1)    translateX(0); }
    22%  { transform: scale(1.03) translateX(3px); }
    50%  { transform: scale(1.02) translateX(-3px); }
    78%  { transform: scale(1.025) translateX(2px); }
    100% { transform: scale(1.01) translateX(0); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-building {
    animation: rd-cue-building var(--rd-kinetic-duration, 700ms) linear forwards;
}
@keyframes rd-cue-building {
    0%   { transform: scale(1);    text-shadow: 0 0 10px rgba(240,212,141,.12); }
    100% { transform: scale(1.03); text-shadow: 0 0 22px rgba(240,212,141,.36); }
}

.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-calm,
.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-legato,
.rd-stage.rd-reading-active .rd-w.rd-now.rd-kinetic-active.tps-aside {
    animation: rd-cue-calm var(--rd-kinetic-duration, 700ms) ease-in-out forwards;
}
@keyframes rd-cue-calm {
    0%   { text-shadow: 0 0 12px rgba(118,228,197,.14); }
    50%  { text-shadow: 0 0 24px rgba(118,228,197,.32); }
    100% { text-shadow: 0 0 16px rgba(118,228,197,.22); }
}

/* @property registrations removed — cue kinetics are now CSS
   @keyframes on `.rd-w.rd-now.tps-*` directly. No custom-property
   interpolation involved. */

/* Ambient `rd-cluster-breath` animation removed: a 2.4s infinite
   background pulse added a metronomic feel to every active word and
   fought the "pure legato flow" the reader must deliver by default.
   Per-word WAAPI envelopes already carry the active word's "alive"
   character — no cluster-wide oscillator needed. */

/* Active word with TPS color — keep contrast but avoid neon glow */
.rd-w.rd-now.tps-warm { color: #FFB863; text-shadow: 0 0 18px rgba(255,184,99,.24); }
.rd-w.rd-now.tps-concerned { color: #F28BB8; text-shadow: 0 0 18px rgba(242,139,184,.24); }
.rd-w.rd-now.tps-focused { color: #7CFFB2; text-shadow: 0 0 10px rgba(242,230,204,.16), 0 0 18px rgba(124,255,178,.2); }
.rd-w.rd-now.tps-motivational { color: #BFA4FF; text-shadow: 0 0 18px rgba(191,164,255,.22); }
.rd-w.rd-now.tps-neutral { color: #F3F0E8; text-decoration-color: rgba(243,240,232,.48); text-shadow: 0 0 16px rgba(237,242,247,.18); }
.rd-w.rd-now.tps-urgent { color: #FF4140; text-decoration-color: rgba(255,65,64,.58); text-shadow: 0 0 20px rgba(255,65,64,.34); }
.rd-w.rd-now.tps-happy { color: #FFE66D; text-shadow: 0 0 18px rgba(255,230,109,.24); }
.rd-w.rd-now.tps-excited { color: #FF4FD8; text-decoration-color: rgba(54,244,255,.52); text-shadow: 0 0 16px rgba(255,79,216,.32), 0 0 24px rgba(54,244,255,.12); }
.rd-w.rd-now.tps-sad { color: #9DB6FF; text-shadow: 0 0 18px rgba(157,182,255,.24); }
.rd-w.rd-now.tps-calm { color: #76E4C5; text-shadow: 0 0 20px rgba(118,228,197,.22); }
.rd-w.rd-now.tps-energetic { color: #FF6640; text-shadow: 0 0 18px rgba(255,102,64,.28); }
.rd-w.rd-now.tps-professional { color: #7DB6FF; text-shadow: 0 0 16px rgba(125,182,255,.22); }
.rd-w.rd-now.tps-loud { color: #F5C895; text-shadow: 0 1px 0 rgba(0,0,0,.24), 0 0 18px rgba(242,193,139,.2); }
.rd-w.rd-now.tps-soft { color: #D1E3F7; text-shadow: 0 0 14px rgba(199,221,245,.12); }
.rd-w.rd-now.tps-whisper { color: #DDD9E4; text-decoration-style: dotted; text-decoration-color: rgba(207,203,215,.32); text-shadow: 0 0 12px rgba(207,203,215,.1); }
/* rd-now rules for emphasis/strong/italic live in the earlier block
   at ~line 725 — they carry the richer two-layer warm/cream/violet
   shadow design. Duplicates here were overriding with flatter
   single-shadow colours and have been removed. */
.rd-w.rd-now.tps-aside { color: #B7C7CD; text-shadow: 0 0 14px rgba(183,199,205,.1); }
.rd-w.rd-now.tps-rhetorical { color: #BDEBFF; text-shadow: 0 0 14px rgba(116,206,255,.16); }
.rd-w.rd-now.tps-sarcasm { color: #FF8AA3; text-shadow: 0 0 14px rgba(255,138,163,.14); }
/* Building crescendo keeps its phrase-level progression from
   `--tps-build-progress`; the runtime kinetic envelope now comes from
   the CSS keyframe above instead of a second custom-property track. */
.rd-w.rd-now.tps-building {
    color: #F3DA9A;
    text-decoration-line: none;
    text-shadow: 0 0 calc(14px + 14px * var(--tps-build-progress, 0))
                 rgba(240,212,141, calc(.14 + .16 * var(--tps-build-progress, 0)));
}
.rd-w.rd-now.tps-legato { color: #A4E4F1; text-decoration-line: none; text-shadow: 0 0 14px rgba(141,213,226,.12); }
.rd-w.rd-now.tps-staccato { color: #F2C1E1; text-shadow: 0 0 14px rgba(236,181,216,.12); }
.rd-w.rd-now.tps-energy {
    color: hsl(calc(74 + (12 * var(--tps-energy, 0))) 100% calc(76% - (12% * var(--tps-energy, 0))));
    text-shadow:
        0 0 calc(12px + (22px * var(--tps-energy, 0))) rgba(216,255,114, calc(.16 + (.28 * var(--tps-energy, 0)))),
        0 0 calc(18px + (26px * var(--tps-energy, 0))) rgba(255,214,82, calc(.06 + (.16 * var(--tps-energy, 0))));
    filter: saturate(calc(1.08 + (.36 * var(--tps-energy, 0)))) brightness(calc(1 + (.16 * var(--tps-energy, 0))));
}
.rd-w.rd-now.tps-melody {
    color: hsl(calc(202 + (8 * var(--tps-melody, 0))) 100% calc(80% - (10% * var(--tps-melody, 0))));
    text-shadow: 0 0 calc(6px + (12px * var(--tps-melody, 0))) rgba(145,210,255, calc(.1 + (.14 * var(--tps-melody, 0))));
}
.rd-w.rd-now.tps-melody::after {
    opacity: calc(.62 + (.28 * var(--tps-melody, 0)));
    filter: drop-shadow(0 0 calc(3px + (6px * var(--tps-melody, 0))) rgba(145,210,255,.28));
}
.rd-w.rd-now.tps-pronunciation,
.rd-w.rd-now.tps-phonetic {
    color: #EFE8FF;
    text-decoration-line: none;
    text-shadow: 0 0 18px rgba(194,169,255,.2);
}
.rd-w.rd-now.tps-phonetic {
    color: #E2F7FF;
    text-shadow: 0 0 18px rgba(127,219,255,.2);
}
.rd-w.rd-now.tps-stress {
    color: #FFE080;
    text-decoration-line: none;
    text-shadow: 0 0 16px rgba(255,208,96,.16);
}

/* focused / professional / motivational / happy / sad / neutral — only color,
   no extra per-word motion. Their identity is in the hue; animation would
   just add noise to the read. */

/* NOTE: the legacy `@media (prefers-reduced-motion: reduce)` override
   that killed CSS animations on active words was removed — cue
   kinetics are carried entirely by WAAPI + transitions + composite
   transform, NOT by CSS `@keyframes animation`, so that rule was
   dead. Cue animations now fire regardless of the OS motion pref so
   loud grows, urgent shakes, whisper drifts on every rig. */

/* Active word with strong emphasis */
.rd-g-emphasis .rd-w.rd-now {
    text-decoration: none;
}

.rd-g-emphasis .rd-w.rd-now.tps-emphasis,
.rd-g-emphasis .rd-w.rd-now.tps-strong,
.rd-g-emphasis .rd-w.rd-now.tps-italic {
    text-decoration-line: none;
}

.rd-w.rd-now.tps-strong {
    text-shadow: 0 0 14px rgba(255,230,184,.16);
}