/* tts.css — read-aloud bar, voice popover, mini player (window.ReadAloud, tts.js). Every class starts with "ra-". */
.ra-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 4px 0 14px; padding: 5px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border);
  font-family: var(--sans); font-size: 13px; color: var(--ink-2); position: relative; text-align: left; text-indent: 0; line-height: 1.3; width: fit-content; max-width: 100%; }
.ra-bar.ra-off { padding: 8px 12px; gap: 8px; color: var(--muted); }
.ra-bar .ra-ic { display: inline-flex; }
.ra-bar button, .ra-mini button { font: inherit; color: inherit; cursor: pointer; }
.ra-play { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--surface); color: var(--ink) !important; border-radius: 10px; padding: 6px 12px 6px 9px; font-weight: 650 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ra-bar.is-reading .ra-play { background: var(--rubric); color: var(--on-rubric) !important; }
.ra-b { width: 34px; height: 32px; border: 0; background: transparent; border-radius: 9px; display: inline-grid; place-items: center; padding: 0; }
.ra-b:hover, .ra-set summary:hover { background: var(--surface-3); }
.ra-rate { font: inherit; font-weight: 650; border: 0; background: transparent; color: inherit; padding: 6px 8px; border-radius: 9px; cursor: pointer; -webkit-appearance: none; appearance: none; text-align: center; min-width: 44px; }
.ra-rate:hover { background: var(--surface-3); }
.ra-set { position: relative; }
.ra-set summary { list-style: none; width: 34px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; }
.ra-set summary::-webkit-details-marker { display: none; }
.ra-set[open] summary { background: var(--surface); }
.ra-pop { position: absolute; z-index: 45; top: calc(100% + 6px); right: -6px; width: min(300px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--border-2);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px; display: grid; gap: 10px; }
@media (max-width: 520px) { .ra-pop { right: auto; left: -150px; } }
.ra-pop label, .ra-setgrp label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: var(--sans); }
.ra-pop select, .ra-sel { font: 500 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--surface); border: 1px solid var(--border-2); border-radius: 9px; padding: 7px 8px; width: 100%; min-width: 0; }
.ra-setgrp { display: grid; gap: 10px; }
.ra-pop p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ra-pop .ra-hint { color: var(--muted); }
.ra-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ra-seg:empty { display: none; }
.ra-seg button { border: 1px solid var(--border-2); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; }
.ra-seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ra-seg small { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.ra-msg { display: none; flex-basis: 100%; font-size: 12px; color: var(--ink-2); padding: 2px 8px 3px; }
.ra-msg.is-on { display: block; }
.ra-msg.is-quiet { color: var(--muted); }
.ra-now { background: color-mix(in srgb, var(--gold-2) 20%, transparent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-2) 20%, transparent); border-radius: 4px; transition: background .3s; }
.ra-mini { position: fixed; z-index: 58; left: calc(50% + 29px); bottom: calc(14px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s; display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 14px; width: min(440px, calc(100vw - 88px));
  border-radius: 16px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-lg); font-family: var(--sans); }
.ra-mini.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ra-mini .ra-mt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ra-mini .ra-mt b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-mini .ra-mt span { font-size: 11.5px; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-mini .ra-b { width: 40px; height: 40px; border-radius: 12px; }
.ra-mini .ra-b:hover { background: rgba(255, 255, 255, .12); }
.ra-mini .ra-pp { background: rgba(255, 255, 255, .14); }
body.ra-on .ui-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
body.ra-on .nx-seltool { margin-bottom: 64px; }
body.ra-on .ui-page { padding-bottom: 180px; }
@media print { .ra-bar, .ra-mini { display: none !important; } .ra-now { background: none !important; box-shadow: none !important; } }