/* «Слушать суру» на странице суры (с 1.22.0, /js/surah-listen.js). Цвета — переменные seo.css. */
.surah-head .surah-listen { margin: 18px 0 0; text-align: start; }
.surah-listen h2 { margin: 0 0 6px; }
.surah-listen p { margin: 6px 0 0; }
.listen-reciters { color: var(--muted); font-size: 14px; }
.listen-dock { margin-top: 12px; }
.listen-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.listen-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.listen-bar .listen-play { padding: 0 18px; border-color: transparent; background: var(--accent); color: #fff; }
.listen-bar button:disabled { opacity: .4; cursor: default; }
.listen-bar svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.listen-play .i-pause, .listen-play[aria-pressed="true"] .i-play { display: none; }
.listen-play[aria-pressed="true"] .i-pause { display: block; }
.listen-status { flex: 1 1 150px; color: var(--accent); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.listen-reciter { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 14px; }
.listen-reciter[hidden] { display: none; }
.listen-reciter select {
  flex: 0 1 280px;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
/* Место панели ушло с экрана во время чтения: панель прижата к низу окна. */
.listen-bar.floating {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: var(--page);
  box-shadow: 0 -6px 18px var(--shadow);
}
body.listen-floating { padding-bottom: 84px; }
.surah-note { margin: 14px auto 0; max-width: 640px; font-size: 15px; }
.surah-note p { margin: 4px 0 0; }
.listen-range { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.surah-note a, .listen-range { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ayah.playing, .basmala.playing { border-radius: 12px; background: rgba(22, 106, 79, .12); }

@media (prefers-color-scheme: dark) {
  .ayah.playing, .basmala.playing { background: rgba(77, 170, 138, .2); }
}