/* ==========================================================
   Głośnik — jeden guzik do odsłuchu na całą stronę.

   Ten plik jest wzorcem. Guzik ma wyglądać tak samo w bibliotece
   (ciemne tło) i w portalu (jasne tło), więc wszystkie kolory biorą się
   ze zmiennych motywu: --fire, --surface, --text, --muted, --line-strong.
   Nie wpisuj tu żadnego koloru na sztywno poza cieniami i przezroczystością.

   Warianty:
     .glosnik            pigułka z ikoną, podpisem i długością nagrania
     .glosnik--sam       sam krążek z ikoną, do ciasnych miejsc
     .glosnik--cichy     bez tła i ramki, do nagłówków i kart

   Stany ustawia skrypt w data-stan: cisza, ladowanie, gra, pauza.
   Postęp odtwarzania wchodzi zmienną --glosnik-postep (0–1).
   ========================================================== */

.glosnik {
  --glosnik-postep: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  /* W rzędzie zbudowanym flexem guzik nie ma się kurczyć do samej ikony. */
  flex: 0 0 auto;
  gap: 9px;
  padding: 8px 15px 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, background .2s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}

.glosnik:hover { border-color: var(--fire); }
.glosnik:active { transform: translateY(1px); }

/* Pasek postępu: cienka linia u dołu pigułki. Nie przesuwa treści. */
.glosnik::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: calc(var(--glosnik-postep) * 100%);
  background: var(--fire);
  transition: width .2s linear;
}
.glosnik[data-stan="cisza"]::after { opacity: 0; }

/* ---------- Ikona ---------- */
.glosnik__ikona {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--fire);
}
/* Wszystkie ikony leżą w tej samej komórce siatki, jedna na drugiej.
   Widoczną wybiera wyłącznie stan — nic tu nie pokazuje się samo. */
.glosnik__ikona > * { grid-area: 1 / 1; }
.glosnik__ikona svg { width: 18px; height: 18px; }
.glosnik__mowa,
.glosnik__graj,
.glosnik__pauza,
.glosnik__krecio,
.glosnik__fale { display: none; }

.glosnik__fale { gap: 2px; align-items: center; height: 14px; }
.glosnik__fale i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--fire);
  animation: glosnik-fala .9s ease-in-out infinite;
}
.glosnik__fale i:nth-child(1) { height: 7px; animation-delay: -.6s; }
.glosnik__fale i:nth-child(2) { height: 14px; animation-delay: -.3s; }
.glosnik__fale i:nth-child(3) { height: 9px; }

@keyframes glosnik-fala {
  0%, 100% { transform: scaleY(.45); }
  50% { transform: scaleY(1); }
}

/* Kręcący się łuk na czas pobierania nagrania. */
.glosnik__krecio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--fire);
  border-radius: 50%;
  animation: glosnik-obrot .7s linear infinite;
}
@keyframes glosnik-obrot { to { transform: rotate(360deg); } }

/* ---------- Podpis i długość ---------- */
.glosnik__tekst { white-space: nowrap; }
.glosnik__czas {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.glosnik__czas:empty { display: none; }

/* ---------- Stany ---------- */
.glosnik[data-stan="cisza"] .glosnik__mowa { display: block; }
.glosnik[data-stan="ladowanie"] .glosnik__krecio { display: block; }

.glosnik[data-stan="gra"] { border-color: var(--fire); background: color-mix(in srgb, var(--fire) 10%, var(--surface)); }
.glosnik[data-stan="gra"] .glosnik__fale { display: flex; }
/* Najazd myszą na grające nagranie zapowiada, co zrobi kliknięcie. */
.glosnik[data-stan="gra"]:hover .glosnik__fale { display: none; }
.glosnik[data-stan="gra"]:hover .glosnik__pauza { display: block; }

.glosnik[data-stan="pauza"] { border-color: var(--fire); }
.glosnik[data-stan="pauza"] .glosnik__graj { display: block; }

/* Nagrania jeszcze nie ma. Guzik mówi to sam, zamiast milczeć. */
.glosnik[data-stan="brak"] { border-style: dashed; color: var(--muted); }
.glosnik[data-stan="brak"] .glosnik__mowa { display: block; opacity: .55; }
.glosnik[data-stan="brak"] .glosnik__czas { display: none; }

/* ---------- Zaproszenie: guzik daje o sobie znać ----------
   Tylko dopóki nikt go nie użył, tylko gdy jest na ekranie i tylko
   kilka razy. Bez podskakiwania: jedna fala światła i ledwie widoczne
   uniesienie. Kto raz kliknął, nie zobaczy tego nigdy więcej. */
.glosnik--zaproszenie { animation: glosnik-zaproszenie 2.2s ease-out; }
.glosnik--zaproszenie::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--fire) 55%, transparent);
  animation: glosnik-fala-swiatla 2.2s ease-out;
}
@keyframes glosnik-zaproszenie {
  0%, 100% { transform: none; border-color: var(--line-strong); }
  22% { transform: translateY(-2px); border-color: var(--fire); }
  55% { transform: none; border-color: var(--fire); }
}
@keyframes glosnik-fala-swiatla {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fire) 55%, transparent); }
  70% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--fire) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fire) 0%, transparent); }
}

/* ---------- Wariant: sam krążek ---------- */
.glosnik--sam {
  padding: 0;
  width: 40px;
  height: 40px;
  justify-content: center;
  border-radius: 50%;
}
.glosnik--sam .glosnik__tekst,
.glosnik--sam .glosnik__czas { display: none; }
/* Krążek pokazuje postęp obwódką, bo linia u dołu koła wygląda jak usterka. */
.glosnik--sam::after {
  left: -3px;
  right: -3px;
  top: -3px;
  bottom: -3px;
  width: auto;
  height: auto;
  border-radius: 50%;
  background: conic-gradient(var(--fire) calc(var(--glosnik-postep) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  transition: none;
}

/* ---------- Wariant: bez tła ---------- */
.glosnik--cichy { background: none; border-color: transparent; padding-left: 4px; }
.glosnik--cichy:hover { background: var(--surface); border-color: var(--line-strong); }

/* ---------- Ruch ograniczony na życzenie układu ---------- */
@media (prefers-reduced-motion: reduce) {
  .glosnik,
  .glosnik::after,
  .glosnik--zaproszenie,
  .glosnik--zaproszenie::before,
  .glosnik__fale i,
  .glosnik__krecio { animation: none; transition: none; }
  /* Zaproszenie zostaje widoczne, ale nieruchome: sama obwódka. */
  .glosnik--zaproszenie { border-color: var(--fire); }
  .glosnik__fale i { transform: none; }
}

/* ---------- Rząd z głośnikiem ----------
   Podpis sekcji po lewej, guzik po prawej. Jeden układ dla wszystkich miejsc,
   w których głośnik stoi przy nagłówku — nie dorabiać osobnego na stronę. */
.glos-rzad { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.glos-rzad > p { margin: 0; }