/* tts.css - read-aloud buttons and controls (owner: TTS). Only :root tokens from style.css. */
html[data-tts="off"] .tts-btn, html[data-tts="off"] .tts-only { display: none !important; }
/* Speaker chip: 34px visible circle, 44px hit area via ::before */
.tts-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; vertical-align: middle; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%; background: var(--accent-soft); color: var(--accent); cursor: pointer; font: inherit; flex: none; -webkit-tap-highlight-color: transparent; }
.tts-btn::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.tts-btn svg { display: block; }
.tts-btn .ti-play { margin-left: -1px; }
.tts-btn .ti-stop { display: none; }
.tts-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tts-btn.on .ti-play { display: none; }
.tts-btn.on .ti-stop { display: block; }
.tts-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .tts-btn:not(.on):hover { background: var(--accent); color: var(--accent-ink); } }
html[data-fx="on"] .tts-btn { transition: background var(--d-fast) linear, color var(--d-fast) linear, transform var(--d-fast) var(--e-out); }
html[data-fx="on"] .tts-btn:active { transform: scale(.92); }
html[data-fx="on"] .tts-btn.on .ti-stop { animation: tts-pulse 1.2s ease-in-out infinite; }
@keyframes tts-pulse { 50% { opacity: .55; } }

/* Headword reading: text stays centered, chip sits just right of it */
.say-anchor { position: relative; display: inline-block; }
.tts-btn.tts-float { position: absolute; right: 100%; top: 50%; margin-right: 10px; transform: translateY(-50%); }
html[data-fx="on"] .tts-btn.tts-float:active { transform: translateY(-50%) scale(.92); }

/* Examples: chip LEADS the Japanese line (col 1, centred on its first line); text (+ kana, Vietnamese) in col 2 */
:root { --say-ln: calc(1.15rem * 1.55); }
html:not([data-tts="off"]) .examples li.has-say { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
html:not([data-tts="off"]) .examples li.has-say > :not(.tts-btn) { grid-column: 2; min-width: 0; }
html:not([data-tts="off"]) .examples li.has-say > .tts-btn { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: calc((var(--say-ln) - 34px) / 2); }

/* Grammar pattern line: chip follows the pattern text inline */
/* Grammar pattern: label on its own row, chip leading the pattern text (same as examples) */
html:not([data-tts="off"]) .gform.has-say { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; }
html:not([data-tts="off"]) .gform.has-say > .lbl { grid-column: 1 / -1; justify-self: start; margin-bottom: .25rem; }
.gform.has-say > .tts-btn { grid-column: 1; }
.gform.has-say > .jp { grid-column: 2; }
.examples .w { overflow-wrap: anywhere; }

.rd-tts { gap: .6rem; }
.rd-tts .btn { min-height: 44px; }
.tts-speed { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.tts-speed button { min-height: 44px; padding: 0 .9rem; border: 0; background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.tts-speed button + button { border-left: 1px solid var(--line); }
.tts-speed button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tts-speed button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rtext .tk.say { background: var(--accent-soft); box-shadow: 0 2px 0 var(--accent); border-radius: 3px; }
.wb-left { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.wb-left .btn { min-height: 44px; }
.wordbar .pw { display: flex; align-items: center; gap: 8px; }
.wordbar .pw > .tts-btn { margin: -4px 0; }