/* Read along: word/sentence highlighting synced to the article narration.
   Doc: design-system/ds/components/ds-read-along.md.
   Local --dsra-* vars point at the DS spine, with the literal as fallback. */
:root{
	--dsra-accent:var(--ds-tw-teal-400,#2DD4BF);
	--dsra-accent-hi:var(--ds-tw-teal-300,#5EEAD4);
	--dsra-ink:var(--ds-tw-teal-950,#042F2E);
	--dsra-card:var(--ds-card,#23262D);
	--dsra-t1:var(--ds-text-1,#F2F2F2);
	--dsra-t2:var(--ds-text-2,#E0E0E0);
	--dsra-t3:var(--ds-text-3,#A0A0A0);
	--dsra-border:var(--ds-border,rgba(255,255,255,.11));
	--dsra-border-emph:var(--ds-border-emph,rgba(255,255,255,.16));
	--dsra-ui-font:var(--ds-ui-font,'neue-haas-grotesk-text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
	--dsra-radius:var(--ds-radius,8px);
	--dsra-radius-card:var(--ds-radius-card,16px);
	/* Washes of the accent. Text color never changes, so nothing flips
	   light/dark; the word also gets an underline (a shape, not just color). */
	--dsra-sentence:color-mix(in srgb,var(--dsra-accent) 9%,transparent);
	--dsra-word:color-mix(in srgb,var(--dsra-accent) 26%,transparent);
}

/* ---- highlighting in the article ---- */
/* Words and the spaces between them are flush, so the sentence band is one
   continuous strip (no rounded corners or shadows to overlap into seams). */
.dsra-w,.dsra-sp{transition:background-color .15s ease,box-shadow .15s ease}
.dsra-w.dsra-w-on{border-radius:4px}
body.dsra-live.dsra-m-sentence .dsra-s-on,
body.dsra-live.dsra-m-both .dsra-s-on{background:var(--dsra-sentence)}
body.dsra-live.dsra-m-word .dsra-w.dsra-w-on,
body.dsra-live.dsra-m-both .dsra-w.dsra-w-on{
	background:var(--dsra-word);box-shadow:0 0 0 2px var(--dsra-word);
	text-decoration:underline 2px var(--dsra-accent-hi);text-underline-offset:5px;
	-webkit-text-decoration:underline 2px var(--dsra-accent-hi);
}
body.dsra-live:not(.dsra-m-off) .dsra-w{cursor:pointer}
/* Focus: fade the other paragraphs while one is read. */
body.dsra-focus.dsra-live .dsra-block{transition:opacity .4s ease}
body.dsra-focus.dsra-live .dsra-block:not(.dsra-b-on){opacity:.35}

/* ---- the button in the player bar ---- */
.dsra-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:var(--dsra-radius);border:1px solid var(--dsra-border);background:transparent;color:var(--dsra-t2);font-family:var(--dsra-ui-font);font-size:13px;cursor:pointer;white-space:nowrap}
.dsra-btn:hover{background:rgba(255,255,255,.06);border-color:var(--dsra-border-emph);color:var(--dsra-t1)}
.dsra-btn svg{width:17px;height:17px;display:block;flex:0 0 auto}
.dsra-btn.is-on{color:var(--dsra-accent-hi);border-color:color-mix(in srgb,var(--dsra-accent) 45%,transparent)}
.dsra-btn[aria-expanded="true"]{background:rgba(255,255,255,.08)}

/* ---- its settings panel, above the bar on the right ---- */
.dsra-pop{position:absolute;right:16px;bottom:calc(100% + 10px);width:min(320px,calc(100vw - 24px));background:var(--dsra-card);border:1px solid var(--dsra-border-emph);border-radius:var(--dsra-radius-card);padding:8px 8px 6px;box-shadow:0 18px 50px rgba(0,0,0,.55);font-family:var(--dsra-ui-font);color:var(--dsra-t2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.dsra-pop.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.dsra-pop-head{padding:10px 10px 8px;color:var(--dsra-t3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.dsra-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 2px 8px;padding:4px;background:rgba(255,255,255,.04);border:1px solid var(--dsra-border);border-radius:var(--dsra-radius)}
.dsra-seg button{border:none;background:transparent;color:var(--dsra-t2);font:inherit;font-size:13px;padding:8px 2px;border-radius:6px;cursor:pointer}
.dsra-seg button:hover{background:rgba(255,255,255,.06)}
.dsra-seg button[aria-checked="true"]{background:var(--dsra-accent);color:var(--dsra-ink);font-weight:600}
.dsra-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:none;background:transparent;border-radius:var(--dsra-radius);color:var(--dsra-t2);font:inherit;text-align:left;cursor:pointer}
.dsra-row:hover{background:rgba(255,255,255,.05)}
.dsra-row .txt{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.dsra-row .ttl{font-size:14.5px;color:var(--dsra-t1)}
.dsra-row .sub{font-size:12.5px;color:var(--dsra-t3)}
/* Switch: the knob's side and the On/Off word carry the state, not color. */
.dsra-sw{flex:0 0 auto;position:relative;width:60px;height:28px;border-radius:14px;border:1px solid var(--dsra-border-emph);background:rgba(255,255,255,.06);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dsra-t3)}
.dsra-sw::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--dsra-t3);transition:transform .18s ease}
.dsra-sw::after{content:"Off";position:absolute;top:50%;right:9px;line-height:1;transform:translateY(-50%)}
.dsra-row[aria-checked="true"] .dsra-sw{background:var(--dsra-accent);border-color:var(--dsra-accent);color:var(--dsra-ink)}
.dsra-row[aria-checked="true"] .dsra-sw::before{transform:translateX(32px);background:var(--dsra-ink)}
.dsra-row[aria-checked="true"] .dsra-sw::after{content:"On";right:auto;left:10px}

@media (max-width:768px){
	.dsra-btn{padding:0 9px}
	.dsra-btn .lbl{display:none}
	.dsra-pop{right:12px}
}
@media (prefers-reduced-motion:reduce){
	.dsra-w,.dsra-sp,.dsra-pop,.dsra-sw::before,body.dsra-focus.dsra-live .dsra-block{transition:none}
}