/* learn-speech.css - Read aloud and Voice answers in the Learn player (learn-speech.js). Tokens from brainlag.css,
   so light and dark follow the site. Every control is at least 44 px square. */
.ls-read,.ls-mic,.ls-opt{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:none;color:var(--ink-3);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ls-read:hover,.ls-mic:hover,.ls-opt:hover{color:var(--ink);background:var(--sunk)}
.ls-read.is-on,.ls-mic.is-on,.ls-opt.is-on{color:var(--study-ink);background:var(--study-tint)}
.ls-read svg,.ls-mic svg,.ls-opt svg{display:block}

/* the speaker on a lesson or question screen sits to the right of its heading */
.ls-read{float:right;margin:-4px -6px 4px 10px}
/* while reading, the head's sound arcs pulse outward in turn (static with reduced motion) */
.ls-read.is-on .ls-w1,.ls-read.is-on .ls-w2{animation:lsWave 1.2s ease-in-out infinite}
.ls-read.is-on .ls-w2{animation-delay:.3s}
@keyframes lsWave{0%,100%{opacity:1}50%{opacity:.25}}
html.ls-noread .ls-read{display:none}

/* the sentence being read */
::highlight(ls-read){background-color:var(--study-tint);color:var(--ink)}
.ls-on{background:var(--study-tint);border-radius:6px;box-shadow:0 0 0 4px var(--study-tint)}

/* the microphone by an answer box */
.ls-mic{border:1px solid var(--rule-2);background:var(--surface)}
.ls-mic:hover{border-color:var(--study-ink)}
.ls-mic.is-on{border-color:var(--study-ink);animation:lsListen 1.4s ease-in-out infinite}
html.ls-novoice .ls-mic,html.ls-novoice .ls-said{display:none}
@keyframes lsListen{50%{box-shadow:0 0 0 5px var(--study-tint)}}
.ls-said{margin:8px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.4}
.ls-said:empty{display:none}

/* the one-time note before the first voice answer */
.ls-note{margin:12px 0 0;padding:14px 16px;border:1px solid var(--rule-2);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:15px;line-height:1.5;max-width:560px}
.ls-note p{margin:0}
.ls-note a,.ls-panel a{color:var(--study-ink);font-weight:700}
.ls-note-b{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ls-note-b button{min-height:44px;padding:0 18px;border-radius:12px;font:700 15.5px var(--f-body,inherit);cursor:pointer}
.ls-go{background:var(--study);color:#fff;border:0}
.ls-quiet{background:none;color:var(--ink);border:1px solid var(--rule-2)}
:root[data-theme="dark"] .ls-go{color:#04161c}

/* the top bar control and its panel */
.ls-panel{position:absolute;top:calc(100% - 4px);right:max(16px,env(safe-area-inset-right));z-index:30;width:min(320px,calc(100vw - 32px));box-sizing:border-box;
  padding:8px 14px 12px;border:1px solid var(--rule-2);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 10px 28px rgba(var(--ink-rgb),.16)}
.ls-panel[hidden]{display:none}
/* while the panel is open the bar sits above the action bar and Noodle (.lp-foot is z-index 30) */
.lp-top:has(> .ls-panel:not([hidden])){z-index:40}
.ls-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0;border:0;background:none;color:var(--ink);font:600 16px var(--f-body,inherit);text-align:left;cursor:pointer}
.ls-sw{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:var(--rule-2);transition:background .18s}
.ls-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s}
.ls-tog[aria-pressed="true"] .ls-sw{background:var(--study)}
.ls-tog[aria-pressed="true"] .ls-sw::after{transform:translateX(16px)}
.ls-rate{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.ls-rate[hidden]{display:none}
.ls-rate .t{flex:1;color:var(--ink-2);font-size:15px}
.ls-rate button{min-width:56px;min-height:44px;padding:0 8px;border:1px solid var(--rule-2);border-radius:10px;background:none;color:var(--ink-2);font:600 15px var(--f-body,inherit);cursor:pointer}
.ls-rate button[aria-pressed="true"]{border-color:var(--study-ink);background:var(--study-tint);color:var(--study-ink)}
.ls-fine{margin:2px 0 8px;color:var(--ink-3);font-size:13.5px;line-height:1.4}
.ls-fine:last-child{margin-bottom:0}
.ls-notes{margin-top:6px;padding-top:8px;border-top:1px solid var(--rule)}
/* vibration is a row in Lesson settings, not its own bar button (no duplicate controls) */
.lp-top #lpVib{display:none}

@media (max-width:440px){.ls-opt{width:40px;height:40px}.ls-panel{right:10px}}
@media (prefers-reduced-motion:reduce){.ls-read.is-on .ls-w1,.ls-read.is-on .ls-w2{animation:none}.ls-mic.is-on{animation:none;box-shadow:0 0 0 3px var(--study-tint)}.ls-sw,.ls-sw::after{transition:none}}
:root[data-motion="off"] .ls-read.is-on .ls-w1,:root[data-motion="off"] .ls-read.is-on .ls-w2{animation:none}
:root[data-motion="off"] .ls-mic.is-on{animation:none;box-shadow:0 0 0 3px var(--study-tint)}
@media (forced-colors:active){::highlight(ls-read){background-color:Highlight;color:HighlightText}}