/* azan-voices.html — the factory's azan library (azan-voices.js). Builds on main.css + tools.css. */
.av-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.av-tab { font: 800 15px var(--font-head); border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.av-tab[aria-selected="true"] { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.av-n { font-size: 12px; background: rgba(255,255,255,.22); border-radius: 999px; padding: 1px 8px; min-width: 1.6em; text-align: center; }
.av-tab[aria-selected="false"] .av-n { background: var(--green-100); color: var(--green-900); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; min-height: 240px; }
.av-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--card); display: flex; flex-direction: column; gap: 9px;
  transition: border-color .2s, box-shadow .2s; }
.av-card.is-playing { border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(15,122,68,.12); }
.av-name { font-size: 16px; margin: 0; color: var(--green-900); }
.av-scr { min-height: 44px; }
.av-scr.hpx { max-width: none; }
.av-play { display: inline-flex; align-items: center; gap: 8px; justify-content: center; font: 800 14.5px var(--font-head); border: 0;
  border-radius: 10px; padding: 9px 12px; background: var(--green-700); color: #fff; cursor: pointer; }
.av-play:hover { background: var(--green-600); }
.av-card.is-playing .av-play { background: var(--gold-500); color: #1C1606; }
.av-ic { font-size: 13px; }
.av-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.av-bar i { display: block; height: 100%; width: 0; background: var(--green-600); transition: width .25s linear; }
.av-note ul { margin: 6px 0 14px; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 480px) { .av-grid { grid-template-columns: 1fr 1fr; } .av-card { padding: 9px; } .av-name { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .av-bar i { transition: none; } }
.av-look { display: flex; gap: 6px; margin: -6px 0 14px; }
.av-look button { font: 700 12.5px var(--font-head); border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.av-look button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }