/* "Your own voice" and "Community voices" (web_voice_pages.py). Mobile first (390 px iPhone
   Safari), brand tokens only (brand/brand.css), accessible fills (--accent-fill + --accent-text),
   motion only under prefers-reduced-motion: no-preference. */

.voice-app { max-width: 720px; margin: 0 auto; }
.voice-app h1 { margin-bottom: 4px; }
.voice-loading { margin: 16px 0; }

/* step dots */
.voice-steps { list-style: none; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 4px;
  counter-reset: vstep; font-size: .8rem; color: var(--muted); }
.voice-steps li { counter-increment: vstep; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.voice-steps li::before { content: counter(vstep); display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--bg); color: var(--text); font-weight: 600; }
.voice-steps li.done::before { content: "✓"; background: var(--success-bg, var(--bg)); color: var(--ok); }
.voice-steps li[aria-current="step"] { color: var(--text); border-color: var(--accent); font-weight: 600; }
.voice-steps li[aria-current="step"]::before { background: var(--accent-fill); color: var(--accent-text); }

.voice-step h2:focus, .voice-step h2:focus-visible { outline: none; }   /* focused by script (tabindex=-1), not a control */
.voice-how, .voice-privacy, .voice-tips { padding-left: 1.2em; }
.voice-how li, .voice-privacy li, .voice-tips li { margin: 6px 0; }
.voice-app select, .voice-app input[type="text"], .voice-app textarea { font-size: 16px; max-width: 100%; }
.voice-app textarea { width: 100%; box-sizing: border-box; }

/* checkboxes and radio cards: whole row is the target */
.voice-checks { border: 0; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.voice-checks label, .voice-langs label, .voice-tags label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
.voice-checks input, .voice-langs input, .voice-tags input, .voice-option input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--accent-fill); }
.voice-choice { border: 0; padding: 0; margin: 12px 0; min-width: 0; }
.voice-choice legend { font-weight: 600; margin-bottom: 6px; }
.voice-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin: 8px 0; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); cursor: pointer; }
.voice-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.voice-langs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 6px 0; }
.voice-langs li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; }
.voice-langs li.ok { color: var(--text); }
.voice-langs li.no { color: var(--muted); border-style: dashed; }
.voice-langs li.soon { color: var(--muted); background: var(--bg); }
.voice-optional { margin-top: 4px; }
.voice-optional legend { color: var(--muted); margin-bottom: 4px; }
.voice-training { margin: 12px 0; }
.voice-training p { margin: 0 0 6px; }
.voice-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* the text to read */
.voice-kind { font-weight: 600; color: var(--accent-ink); margin: 12px 0 4px; }
.voice-sentence { margin: 8px 0 12px; padding: 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line);
  font-size: 1.45rem; line-height: 1.45; font-family: var(--font-display, inherit); overflow-wrap: anywhere; }
.voice-sentence:empty { display: none; }
.voice-consent-text { border-left: 4px solid var(--accent); }
@media (min-width: 640px) { .voice-sentence { font-size: 1.7rem; padding: 20px 24px; } }

/* recorder */
.voice-rec { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; margin: 8px 0; }
.voice-rec-btn { min-height: 64px; min-width: 132px; padding: 0 22px; border-radius: 999px; font-size: 1.1rem; font-weight: 600;
  background: var(--accent-fill); color: var(--accent-text); border: 0; gap: 10px; }
.voice-rec-btn:hover { background: var(--accent-fill-hover, var(--accent-fill)); }
.voice-rec-dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; flex: none; }
.voice-rec-btn.recording { background: var(--error); color: var(--on-error, #fff); }
.voice-rec-btn.recording .voice-rec-dot { border-radius: 3px; }
.voice-rec-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; }
.voice-rec.pass .voice-rec-status { color: var(--ok); font-weight: 600; }
.voice-rec.fail .voice-rec-status { color: var(--error); background: var(--error-bg); border-radius: 8px; padding: 8px 10px; }
.voice-rec.busy .voice-rec-status { color: var(--muted); }
.voice-rec-after { grid-column: 1 / -1; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .voice-rec-btn.recording .voice-rec-dot { animation: voice-pulse 1.2s var(--ease-breathe, ease-in-out) infinite; }
  @keyframes voice-pulse { 50% { opacity: .35; } }
}

/* level meter: AnalyserNode -> transform (no layout); the band marks a good level */
.voice-meter { position: relative; height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; min-width: 0; }
.voice-meter-mini { height: 10px; }
.voice-meter-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--accent); }
.voice-meter.low .voice-meter-fill { background: var(--muted); }
.voice-meter.high .voice-meter-fill { background: var(--error); }
.voice-meter-target { position: absolute; top: 0; bottom: 0; left: 42%; width: 45%; border-left: 2px solid var(--text);
  border-right: 2px solid var(--text); opacity: .35; }
.voice-meter-wrap { margin: 12px 0; }
.voice-level { margin: 8px 0 0; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .voice-meter-fill { transition: transform 60ms linear; } }

/* progress */
.voice-progress { position: relative; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0 4px; }
.voice-progress > span { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--accent-fill); }
@media (prefers-reduced-motion: no-preference) { .voice-progress > span { transition: transform .4s var(--ease-settle, ease); } }
.voice-build-step { font-weight: 600; min-height: 1.4em; }

/* per-clip status */
.voice-clips { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.voice-clip { min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); font-weight: 600; }
.voice-clip.pass { background: var(--success-bg, var(--bg)); color: var(--ok); border-color: var(--ok); }
.voice-clip.fail { background: var(--error-bg); color: var(--error); border-color: var(--error); }
.voice-clip.checking { border-style: dashed; }
.voice-clip[aria-current="true"] { box-shadow: 0 0 0 3px var(--accent); }

/* preview lines */
.voice-lines { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.voice-lines li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.voice-lines li:last-child { border-bottom: 0; }
.voice-play { flex: none; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
.voice-play[aria-pressed="true"] { background: var(--accent-fill); color: var(--accent-text); border-color: var(--accent-fill); }
.voice-line-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.voice-upsell p:last-child { margin-bottom: 0; }
.voice-danger-text, button.ghost.voice-danger-text { color: var(--error); }   /* beats button.ghost (style.css) */
.voice-confirm { margin: 8px 0; padding: 12px; border: 1px solid var(--error); border-radius: 10px; background: var(--error-bg); }
.voice-confirm p { margin: 0 0 8px; }
.voice-reasons { padding-left: 1.2em; }

/* publish */
.voice-pub-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 600; background: var(--bg); border: 1px solid var(--line); }
.voice-pub-badge[data-state="approved"] { color: var(--ok); border-color: var(--ok); background: var(--success-bg, var(--bg)); }
.voice-pub-badge[data-state="rejected"], .voice-pub-badge[data-state="hidden"] { color: var(--error); border-color: var(--error); background: var(--error-bg); }
.voice-pub-badge[data-state="pending_review"] { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.voice-pub-facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 12px; margin: 12px 0; }
.voice-pub-facts dt { color: var(--muted); }
.voice-pub-facts dd { margin: 0; overflow-wrap: anywhere; }
.voice-pub-form h2 { margin-top: 12px; }
.voice-pub-form .stack button, .voice-pub-form > .actions button { align-self: flex-start; }

/* pickers: tabs, "My voice" card, community list */
.voice-tabs { display: flex; gap: 4px; margin: 12px 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.voice-tab { background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  padding: 8px 12px; min-height: 44px; font-weight: 600; white-space: nowrap; }
.voice-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.voice-tab:hover { color: var(--text); background: transparent; }
.voice-pick { text-decoration: none; }
.voice-avatar { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem; background: var(--accent-soft, var(--bg)); }
.voice-lock { margin-top: 4px; background: var(--warn-bg); color: var(--warn); }
.voice-community { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .voice-community { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voice-cv { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); min-width: 0; }
.voice-cv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.voice-cv-name { overflow-wrap: anywhere; }
.voice-cv-rating { color: var(--muted); white-space: nowrap; }
.voice-cv-desc { margin: 6px 0; overflow-wrap: anywhere; }
.voice-cv-langs { margin: 4px 0 8px; }
.voice-cv-actions { gap: 6px; }
.voice-mini-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.voice-mini-form select, .voice-mini-form textarea { font-size: 16px; width: 100%; box-sizing: border-box; }
.voice-mini-form button { align-self: flex-start; }
.voice-stars { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.voice-stars legend { margin-bottom: 4px; }
.voice-stars label { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; color: var(--warn); }
.voice-stars input { accent-color: var(--accent-fill); }
.voice-mode { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 12px 0 0; }
.voice-mode label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.voice-live-note { margin: 10px 0 0; }
.voice-account [data-voice-status] { font-weight: 600; }

/* ---- voice dataset reading session (voice-dataset.js; backend agent) ---- */
.ds-app .ds-sentence { font-size: 1.45rem; line-height: 1.45; margin: 1rem 0; padding: 1rem 1.1rem; border-left: 4px solid var(--accent); background: var(--surface); color: var(--text); border-radius: 6px; }
.ds-app .ds-meter { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: .4rem 0 .8rem; }
.ds-app .ds-meter span { display: block; height: 100%; width: 0; background: var(--accent-fill); transition: width 60ms linear; }
.ds-app .ds-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ds-app .ds-actions button { min-height: 44px; }
.ds-app progress { width: 100%; height: .6rem; }
.ds-app .ds-nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }
@media (max-width: 600px) { .ds-app .ds-sentence { font-size: 1.25rem; } .ds-app .ds-keys { display: none; } .ds-app .ds-actions button { flex: 1 1 40%; } }

/* ---- creator avatars (voice-picker.js avatarEl, voice-avatar.js; backend agent) ---- */
.voice-avatar { overflow: hidden; flex: none; }
.voice-avatar img, .voice-avatar svg { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.voice-cv-head { align-items: center; }
.voice-cv-avatar { width: 40px; height: 40px; font-size: 1.2rem; }
.voice-cv-head .voice-cv-name { flex: 1 1 auto; min-width: 0; }
.va-current { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.va-current .voice-avatar { width: 88px; height: 88px; }
.va-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 8px 0; }
.va-presets button { padding: 2px; border-radius: 50%; border: 2px solid transparent; background: none; width: 56px; height: 56px; min-height: 44px; cursor: pointer; }
.va-presets button[aria-pressed="true"] { border-color: var(--accent-fill); }
.va-presets img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.va-crop { max-width: 360px; }
.va-crop canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; touch-action: none; cursor: grab; background: var(--surface-2); display: block; }
.va-crop input[type="range"] { width: 100%; }
.va-status { margin: 4px 0; }
.ds-app .ds-pace { margin: .8rem 0 0; font-size: var(--text-sm, .9rem); }
.ds-app .ds-pace span { display: block; }

/* ---- voice review / proof-listening (voice-review.js) ---- */
.vr-app .vr-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.vr-app .vr-big { min-width: 6rem; min-height: 3.2rem; font-size: 1.15rem; }
.vr-app .vr-choice { min-width: 3.2rem; min-height: 3.2rem; font-size: 1.15rem;
  background: var(--surface); color: var(--text); border: 2px solid var(--line-strong, var(--line)); }
/* Unpressed choices are outlined; the pressed one is filled + ringed so the pick is unmistakable
   (the default button is already accent-filled, so filled-on-filled showed no change: Gergo, 13 Oct). */
.vr-app .vr-choice[aria-pressed="true"], .vr-app .vr-word[aria-pressed="true"] {
  background: var(--accent-fill, var(--accent)); color: var(--accent-text, #fff); border-color: var(--accent-fill, var(--accent));
  box-shadow: 0 0 0 3px var(--focus, var(--accent)); font-weight: 700; }
.vr-app .vr-choice:disabled { opacity: .45; }
.vr-app .vr-text { font-size: 1.35rem; line-height: 1.9; }
.vr-app .vr-word { font: inherit; padding: .1rem .35rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.vr-app fieldset { border: 0; padding: 0; margin: .8rem 0; }
.vr-home .vr-cards { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.vr-home .vr-card { margin: 0; }
.vr-home .vr-card h3 { margin: 0; }
.vr-home .vr-card-off { opacity: .6; }
.vr-app .vr-meter { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: .3rem 0 .6rem; }
.vr-app .vr-meter span { display: block; height: 100%; background: var(--accent); }
.vr-app .vr-howto li { margin: .35rem 0; }
.vr-app .vr-howto .small { display: block; }
.vr-app .vr-summary { width: 100%; border-collapse: collapse; }
.vr-app .vr-summary td, .vr-app .vr-summary th { text-align: left; padding: .25rem .4rem; border-bottom: 1px solid var(--line); }
.vr-app .vr-played { color: var(--accent); align-self: center; }
.vr-app button:disabled { opacity: .45; cursor: not-allowed; }
.vr-app .vr-toast { font-weight: 600; border-left: 4px solid var(--accent); }
.vr-app .vr-ok { color: var(--accent); }
.vr-app .vr-choice-wide { min-width: auto; padding: 0 .8rem; font-size: 1rem; }

/* "Try your own words" + "Also works in" (preview and manage) */
.voice-say { margin: 16px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.voice-say-title { margin: 0 0 8px; font-size: 1rem; }
.voice-say textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; }
.voice-say-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0; }
.voice-say-row [data-say-count] { margin-right: auto; }
.voice-say-row select { max-width: 100%; min-height: 44px; }
.voice-also { margin: 12px 0; }
.voice-also summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voice-lang-results { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.voice-lang-results li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }

/* language states (ready / beta / didn't pass yet / not checked yet), "Hear it anyway (beta)", "Re-check" */
.voice-own-lang { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.voice-own-lang p { margin: 0 0 6px; }
.voice-state { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; }
.voice-state-ready { color: var(--ok); border-color: var(--ok); }
.voice-state-beta { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.voice-state-failed { color: var(--error); background: var(--error-bg); border-color: transparent; }
.voice-state-unchecked { color: var(--muted); }