/* Lektor: odtwarzacz nagrań boksów, ładowany tylko przez inc/lektor.php. */

.lektor-miejsce { margin: 22px 0 0; }

.lektor {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--granat-08);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(27, 40, 69, 0.05);
  color: var(--granat);
}

.lektor button {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--granat);
}
.lektor .lektor-gra { background: var(--granat); color: var(--krem-jasniejszy); }
.lektor .lektor-dalej { display: none; }
.lektor--zaczety .lektor-dalej { display: flex; }
.lektor .lektor-dalej:hover, .lektor .lektor-rozwin:hover, .lektor .lektor-rozwin[aria-expanded="true"], .lektor-wiersz button:hover { background: var(--szalwia-18); }
.lektor .lektor-dalej:disabled { opacity: 0.35; cursor: default; background: transparent; }
.lektor .lektor-gra:disabled { opacity: 0.35; cursor: default; }
.lektor button:focus-visible { outline: 2px solid var(--szalwia-tekst, #5C6E54); outline-offset: 2px; }

.lektor-ikona-pauza { display: none; }
.lektor--gra .lektor-gra .lektor-ikona-pauza { display: block; }
.lektor--gra .lektor-gra .lektor-ikona-gra { display: none; }

.lektor-opis { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.lektor-etykieta { font-size: 15px; font-weight: 600; }
.lektor-tytul {
  font-size: 14px; color: var(--granat-75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lektor-tytul:empty { display: none; }
/* Ścieżka bez obramowania: odsłuchana część w szałwii, reszta w jej jasnym odcieniu.
   Pole 24 px ułatwia trafienie palcem, widoczna linia ma 4 px. */
.lektor-postep {
  --postep: 0%;
  --sciezka: linear-gradient(to right, var(--szalwia-tekst, #5C6E54) var(--postep), var(--szalwia-18) var(--postep));
  display: none; width: 100%; height: 24px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; cursor: pointer;
}
.lektor--zaczety .lektor-postep { display: block; }
.lektor-postep::-webkit-slider-runnable-track { height: 4px; border: 0; border-radius: 2px; background: var(--sciezka); }
.lektor-postep::-moz-range-track { height: 4px; border: 0; border-radius: 2px; background: var(--sciezka); }
.lektor-postep::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px;
  border: 0; border-radius: 50%; background: var(--szalwia-tekst, #5C6E54);
}
.lektor-postep::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--szalwia-tekst, #5C6E54); }
.lektor-postep:focus-visible { outline: 2px solid var(--szalwia-tekst, #5C6E54); outline-offset: 1px; }

/* Lista nagrań leży nad treścią, więc jej otwarcie niczego nie przesuwa.
   Pod playerem u góry strony, nad paskiem przyklejonym do dołu okna. */
.lektor-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 6px 12px; list-style: none;
  background: #fff;
  border: 1px solid var(--granat-08);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(27, 40, 69, 0.18);
}
.lektor-lista[hidden] { display: none; }
.lektor--pasek .lektor-lista { top: auto; bottom: calc(100% + 6px); }
.lektor-wiersz { display: flex; align-items: center; gap: 8px; }
.lektor-wiersz + .lektor-wiersz { border-top: 1px solid var(--granat-08); }
.lektor-wiersz label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; line-height: 1.35; cursor: pointer; }
.lektor-wiersz input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--szalwia-tekst, #5C6E54); }
.lektor-wiersz--obecny label { font-weight: 600; }
.lektor-wiersz .lektor-ikona-pauza { display: none; }
.lektor-wiersz--gra .lektor-ikona-pauza { display: block; }
.lektor-wiersz--gra .lektor-ikona-gra { display: none; }

/* Start od wybranego boksu: pod tytułem, w wyglądzie linku. */
.lektor-boks {
  display: block; margin-top: 10px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--szalwia-tekst, #5C6E54);
  text-decoration: underline; text-underline-offset: 3px;
}
.lektor-boks:focus-visible { outline: 2px solid var(--szalwia-tekst, #5C6E54); outline-offset: 2px; }

/* Przyklejony do dołu okna. Ponad pigułką spisu treści (z-index 20),
   pod oknami powiększenia. Na komputerze zajmuje prawy róg. */
.lektor--pasek {
  position: fixed; z-index: 30;
  right: 24px; bottom: 24px;
  width: 380px; max-width: calc(100vw - 32px);
  box-shadow: 0 8px 28px rgba(27, 40, 69, 0.18);
}
.lektor--pasek { gap: 8px; }
.lektor--pasek.lektor--zamkniety { display: none; }
.lektor .lektor-zamknij { display: none; }
.lektor--pasek .lektor-zamknij { display: flex; }
.lektor .lektor-zamknij:hover { background: var(--szalwia-18); }
.lektor--pasek .lektor-etykieta { font-size: 14px; }
.lektor--pasek.lektor--zaczety .lektor-etykieta { display: none; }

.lektor-czytany { box-shadow: 0 0 0 2px var(--szalwia); }
h2.lektor-czytany { box-shadow: none; color: var(--szalwia-tekst, #5C6E54); }

.lektor-pasek-jest .footer { padding-bottom: 96px; }

@media (max-width: 700px) {
  .lektor { padding: 8px 10px; gap: 10px; }
  .lektor--pasek { gap: 4px; padding: 8px; }
  .lektor--pasek .lektor-dalej, .lektor--pasek .lektor-rozwin, .lektor--pasek .lektor-zamknij { width: 38px; height: 44px; }
  .lektor--pasek { left: 16px; right: 16px; bottom: 12px; width: auto; }
  .lektor-pasek-jest .b-wroc { bottom: 88px; }
}

/* Przywitanie na /kontakt: jedno nagranie spoza boksów, przycisk zamiast playera. */
.lektor-przywitanie {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 22px 7px 7px;
  background: #fff; color: var(--granat);
  border: 1px solid var(--granat-08);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(27, 40, 69, 0.05);
  font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer;
}
.lektor-przywitanie:hover { background: var(--szalwia-18); }
.lektor-przywitanie:focus-visible { outline: 2px solid var(--szalwia-tekst, #5C6E54); outline-offset: 2px; }
.lektor-przywitanie-kolo {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--granat); color: var(--krem-jasniejszy);
}
.lektor-przywitanie--gra .lektor-ikona-pauza { display: block; }
.lektor-przywitanie--gra .lektor-ikona-gra { display: none; }
.lektor-przywitanie-postep {
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 3px; background: var(--szalwia-tekst, #5C6E54);
}
/* Po pierwszym starcie kapsuła rozszerza się i odsłania pasek do przewijania. */
.lektor-kapsula {
  display: inline-flex; align-items: center; vertical-align: middle; max-width: 100%;
  background: #fff; border: 1px solid var(--granat-08); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(27, 40, 69, 0.05);
}
.lektor-kapsula .lektor-przywitanie { background: none; border: 0; box-shadow: none; }
.lektor-kapsula .lektor-przywitanie:hover { background: none; }
.lektor-kapsula .lektor-przywitanie-postep { display: none; }
.lektor-przywitanie-miejsce {
  display: block; width: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: width 0.4s ease, opacity 0.3s ease 0.1s;
}
.lektor-kapsula--otwarta .lektor-przywitanie-miejsce { width: 236px; opacity: 1; visibility: visible; }
.lektor-przywitanie-miejsce input {
  --p: 0%;
  display: block; width: 200px; height: 20px; margin: 0 22px 0 6px; padding: 0;
  background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.lektor-przywitanie-miejsce input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--szalwia-tekst, #5C6E54) var(--p), var(--granat-08) var(--p));
}
.lektor-przywitanie-miejsce input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--granat-08); }
.lektor-przywitanie-miejsce input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--szalwia-tekst, #5C6E54); }
.lektor-przywitanie-miejsce input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -4px;
  background: var(--granat); border: 0; border-radius: 50%;
}
.lektor-przywitanie-miejsce input::-moz-range-thumb { width: 14px; height: 14px; background: var(--granat); border: 0; border-radius: 50%; }
.lektor-przywitanie-miejsce input:focus-visible { outline: 2px solid var(--szalwia-tekst, #5C6E54); outline-offset: 2px; }
@media (max-width: 640px) {
  .lektor-kapsula--otwarta .lektor-przywitanie-miejsce { width: 136px; }
  .lektor-przywitanie-miejsce input { width: 100px; margin-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lektor-przywitanie-miejsce { transition: none; }
}