/* Двойная кнопка произношения US | UK (accent-dual.js).
   Токены тем из themes.css: работает во всех восьми темах, свои цвета
   не заводим. Флажки маленькие, потому что это спутник фразы, а не герой. */

.accd{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}

.accd-flags{display:inline-flex; gap:2px; padding:2px; border-radius:99px; background:var(--shell-line)}
.accd-f{
  display:inline-flex; align-items:center; gap:4px;
  min-height:34px; padding:0 10px; border:0; border-radius:99px; cursor:pointer;
  font-family:var(--font-t); font-size:.75rem; font-weight:700; letter-spacing:.03em;
  color:var(--ink-dim); background:transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.accd-f:hover:not(:disabled){color:var(--ink)}
.accd-f:active:not(:disabled){transform:scale(.96)}
.accd-f[aria-pressed="true"]{color:var(--gold); background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--gold) 30%, transparent)}
.accd-f:disabled{opacity:.4; cursor:not-allowed}
.accd-f:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.accd-cc{font-size:.6875rem}

/* узкий режим: одна кнопка, длинный тап переключает акцент */
.accd-one .accd-f{background:var(--gold-soft); color:var(--gold);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--gold) 30%, transparent);
  min-width:38px; justify-content:center}

.accd-slow{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; min-width:38px; border:0; border-radius:99px; cursor:pointer;
  font-size:.9375rem; color:var(--ink-dim); background:var(--shell-line);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.accd-slow:hover{background:var(--gold-soft)}
.accd-slow:active{transform:scale(.96)}
.accd-slow:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* подпись честности: синтез не притворяется носителем */
.accd-tts{font-size:.6563rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-dim); opacity:.75; cursor:help}

/* кнопка, звучащая прямо сейчас */
.accd-f.playing, .accd-slow.playing{color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold)}
