/* Sounds of the past: the word-by-word alignment and the playable cues. */
.compare mark[data-pair] { cursor: help; border-radius: 3px; transition: background-color var(--motion) var(--ease); }
.compare mark.on { background: var(--orange-light); text-decoration-style: solid; box-shadow: 0 0 0 2px var(--orange-light); }
.compare mark[tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.now-playing { position: sticky; top: 76px; z-index: 3; display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 12px 5px 6px; box-shadow: var(--elevation-1); justify-self: start; max-width: 100%; }
.now-playing .btn { flex: none; }
/* the bar's one-line text must not widen the transcript's column */
.compare > * { min-width: 0; }
.compare .srt { grid-template-columns: minmax(0, 1fr); }
.now-playing { min-width: 0; }
/* one line, whatever it says, so the bar never grows and moves the transcript */
.now-playing .where { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cue-time { font: inherit; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-pill); padding: 2px 9px; cursor: pointer; min-height: 30px; transition: background-color var(--motion) var(--ease), border-color var(--motion) var(--ease); }
.cue-time time { color: var(--orange-text); }
.cue-time::before { content: "▶ "; font-size: .7em; color: var(--orange-text); }
.cue-time:hover { background: var(--orange-light); border-color: #e2b49c; }
.cue { border-radius: var(--radius-row); padding: 6px 8px; margin: -6px -8px; transition: background-color var(--motion) var(--ease); }
.cue.playing { background: var(--orange-light); box-shadow: inset 3px 0 0 var(--orange); }
.cue-time { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cue-time::before { line-height: 1; }
.compare .cue { grid-template-columns: 6.6rem 1fr; }
@media (max-width: 560px) { .compare .cue { grid-template-columns: 1fr; } .cue-time { justify-self: start; } }