/* Tryb hodowli. Korzysta z tokenow i klas z app.css (--surface, --accent, .card, .btn, .muted);
   tu sa tylko rzeczy, ktorych tam nie ma: obsada, garderoba, drabinka i pulpit artysty. */

.hod-hero { padding: 8px 0 20px; max-width: 62ch }
.hod-hero h1 { font-family: var(--display); font-size: clamp(30px, 6vw, 46px); line-height: 1.05; text-wrap: balance }
.hod-hero p { margin-top: 12px }

/* OBSADA: DWIE KOLUMNY, NIE auto-fit.
   auto-fit robil na szerokim ekranie cztery waskie kolumny, w ktorych portret schodzil do
   180 px i twarz -- jedyna rzecz, na podstawie ktorej ktos tu wybiera -- stawala sie znaczkiem.
   Dwie kolumny daja zdjecie przez cala szerokosc kafelka i tyle miejsca na opis, zeby dalo sie
   go przeczytac, a nie tylko zobaczyc. Na telefonie jedna kolumna. */
.hod-obsada { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px }
@media (max-width: 640px) { .hod-obsada { grid-template-columns: 1fr; gap: 14px } }

.hod-kafel { background: var(--bg); border: 1px solid var(--rule); border-radius: 18px;
  padding: 0 0 18px; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease }
.hod-kafel:hover { border-color: var(--accent); transform: translateY(-2px) }
@media (prefers-reduced-motion: reduce) { .hod-kafel, .hod-kafel:hover { transition: none; transform: none } }

/* Zdjecie siedzi w kafelku bez marginesu i bez zaokraglen od dolu -- ma byc sciana kafelka,
   a nie obrazkiem polozonym na karcie. Stad padding na kafelku zerowy i wrocony nizej. */
.hod-kafel img, .hod-kafel > .hod-monogram { width: 100%; max-width: none; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 0; align-self: stretch; margin: 0 }
.hod-kafel > * + * { margin-left: 18px; margin-right: 18px }
.hod-kafel h3 { font-family: var(--display); font-size: 24px; margin: 0; line-height: 1.1 }
.hod-kafel p { margin: 0 }
.hod-kafel audio { width: 100%; margin-top: 8px; height: 38px }
.hod-kafel .btn { margin-top: auto; width: auto }
.hod-gatunek { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 14px 0 0 }

/* Monogram zamiast portretu: strona musi dzialac PRZED przebiegiem seedera obrazow. */
.hod-monogram { display: grid; place-items: center; width: 100%; max-width: 180px; aspect-ratio: 1;
  align-self: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--display); font-size: 64px; font-weight: 800 }
.hod-kafel > .hod-monogram { font-size: 86px }
.hod-monogram.maly { max-width: 84px; font-size: 28px; border-radius: 10px }

/* GARDEROBA. Kazdy wybor to przycisk, nie pole -- jedyny input w calym trybie to nazwa. */
.hod-wybor { margin: 18px 0 }
.hod-label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px }
.hod-opcje { display: flex; flex-wrap: wrap; gap: 8px }
/* TEKST DO LEWEJ, mimo ze to przycisk. Domyslne wysrodkowanie przycisku dziala na slowo
   ("Piwnica", "Beton"), ale propozycje tematu to ZDANIA lamiace sie na dwa wiersze -- a zdanie
   wysrodkowane czyta sie jak haslo z plakatu, nie jak pozycja listy do przebiegniecia wzrokiem.
   Widoczne dopiero przy prawdziwych tematach z produkcji, bo szablonowe nazwy sa krotkie. */
.hod-opcja { background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 14px; font: 500 15px var(--body); cursor: pointer; min-height: 44px;
  text-align: left }
.hod-opcja:hover { border-color: var(--accent) }
.hod-opcja.wybrana { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink) }
.hod-twarz { padding: 6px; line-height: 0 }
.hod-twarz img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px }
/* Pola na wlasna nazwe i wlasna scene wygladaja tak samo, bo robia to samo: sa wyjsciem
   poza gotowe kafelki stojace nad nimi. Scena dostaje wiecej miejsca, bo to zdanie, nie slowo. */
#hodNazwa, #hodScena { margin-top: 10px; width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; font: 500 16px var(--body) }
#hodNazwa { max-width: 320px }
#hodScena { max-width: 460px }
#hodNazwa:focus, #hodScena:focus { outline: none; border-color: var(--accent) }
#hodBlad:empty { display: none }
.hod-blad { color: var(--warn) }

/* PULPIT */
.hod-kto { display: flex; gap: 18px; align-items: center; flex-wrap: wrap }
.hod-kto h1 { font-family: var(--display); font-size: clamp(26px, 5vw, 38px); margin: 2px 0 }
.hod-portret { width: 128px; height: 128px; object-fit: cover; border-radius: 14px; flex: none }
.hod-portret.hod-monogram { max-width: 128px; font-size: 48px }
.hod-etap-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin: 0 }
.hod-glos { color: var(--ok) }
/* Glos w budowie: ton ostrzezenia, nie bledu -- nic sie nie zepsulo, tylko jeszcze nie ma. */
.hod-glos-czeka { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-ink) }
.hod-przerwa { margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink) }

.hod-propozycja { font-family: var(--display); font-size: clamp(20px, 3.6vw, 26px); line-height: 1.25;
  text-wrap: balance; margin: 6px 0 10px }
.hod-dzien .btn { margin-top: 14px }

/* TEMAT JAKO POLE, nie napis -- i MUSI TO BYC WIDAC.
   O tym, o czym jest numer, decyduje wlasciciel artysty, a nie my, wiec propozycja stoi
   w polu, a nie w naglowku.

   SELEKTOR MA DWIE KLASY, I TO JEST CALA POPRAWKA. Pierwsza wersja miala samo `.hod-temat`
   (0-1-0), a `app.css` ma `input[type="text"], ... { border: 1px solid var(--rule);
   background: var(--bg); padding: 12px 14px; border-radius: 10px; font: inherit }` --
   czyli 0-1-1, wyzej. Przegrywalismy wiec NA KAZDEJ wlasnosci naraz: tle, ramce, paddingu
   i kroju. Pole renderowalo sie jak zwykly input serwisu, identyczny z kafelkami propozycji
   stojacymi tuz pod nim (zmierzone 15.10.2026: oba 304 px szerokosci, to samo tlo
   rgb(11,15,22), ta sama ramka rgba(255,255,255,.12)) -- i nic nie mowilo, ze w gornym
   prostokacie wolno pisac. Styl byl napisany i nigdy nie dzialal.

   Ciemniejsze tlo niz kafelki i akcentowana dolna krawedz oddzielaja POLE od WYBORU. */
.hod-dzien .hod-temat { width: 100%; background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-bottom: 2px solid var(--accent); border-radius: 10px;
  padding: 12px 14px; margin: 2px 0 10px; cursor: text;
  font-family: var(--display); font-size: clamp(19px, 3.2vw, 24px); line-height: 1.3 }
.hod-dzien .hod-temat:hover { border-color: var(--accent) }
.hod-dzien .hod-temat:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft) }

/* Przełącznik własnego tekstu wygląda jak odnośnik, nie jak drugi przycisk obok "Nagraj to" --
   dwa przyciski o podobnej wadze kazałyby wybierać, a tu jest jedna akcja i jedna opcja do niej.

   BLOK, nie inline-block: przy inline-block odnośnik i "Nagraj to" stawały w JEDNYM wierszu
   trzy piksele od siebie (zmierzone na 360, 390, 640, 800 i 1280 px -- nakładki nie było,
   wbrew temu, co sugerował zrzut, ale 3 px to nie jest odstęp). Podkreślony odnośnik dociśnięty
   do wypełnionego przycisku czyta się jak jedna zbita para kontrolek. */
.hod-link { display: block; width: fit-content; margin-top: 16px; padding: 0; background: none;
  border: 0; color: var(--accent-ink); font: 500 15px var(--body); text-decoration: underline;
  cursor: pointer }

/* Licznik dlugosci pod polem tekstu. Suno robi 7-12 znakow na sekunde -- zmierzone na dwunastu
   ostatnich zleceniach (366 znakow -> 32 s, 1941 -> 167 s). Bez tej informacji ktos wkleja
   osiem wersow, dostaje pol minuty i dowiaduje sie o tym po fakcie. */
.hod-dlugosc { margin: 6px 0 0; font: 400 13px var(--body); color: var(--muted) }
.hod-dlugosc.krotko { color: var(--warn) }
.hod-tekst { display: block; width: 100%; margin-top: 10px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px;
  font: 400 15px/1.5 var(--body); resize: vertical }
.hod-tekst:focus { outline: none; border-color: var(--accent) }
.hod-tekst[hidden] { display: none }

/* DRABINKA. Pionowa lista, bo to historia postaci, a nie pasek postepu: szczeble przebyte
   zostaja widoczne i podpisane tym, co w nich bylo slychac. */
.hod-szczeble { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 2px }
.hod-szczeble li { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 4px 14px;
  padding: 11px 14px; border-left: 3px solid var(--rule); align-items: baseline }
.hod-szczeble li b { font-family: var(--display) }
.hod-szczeble li span { font-size: 14px }
.hod-szczeble li.zrobiony { border-left-color: var(--ok); opacity: .62 }
.hod-szczeble li.teraz { border-left-color: var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0 }
.hod-szczeble li.teraz b { color: var(--accent-ink) }
@media (max-width: 520px) { .hod-szczeble li { grid-template-columns: 1fr } }

.hod-awans { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule) }
.hod-awans p { margin: 0 0 10px }

.hod-utwory { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 12px }
.hod-utwory li { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--rule) }
.hod-utwory li:last-child { border-bottom: 0; padding-bottom: 0 }
.hod-utwory audio { width: 100%; max-width: 420px }

/* ZAKLADANIE OD ZERA. Formularz stoi POD obsada i ma wygladac na alternatywe, nie na glowna
   droge: wezsza kolumna i zwykle pola zamiast kafelkow. Kto wszedl z rolki, ma najpierw klikac
   i sluchac -- formularz nad obsada zamienilby dziesiec sekund do pierwszego dzwieku w dwie
   minuty wgrywania plikow. */
.hod-odzera form { max-width: 560px }
.hod-odzera input[type=text],
.hod-odzera select { width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; font: 500 16px var(--body) }
.hod-odzera input[type=file] { width: 100%; color: var(--muted); font: 400 14px var(--body) }
.hod-odzera input:focus, .hod-odzera select:focus { outline: none; border-color: var(--accent) }

/* Zgoda na glos: pole wyboru obok tekstu, nie pod nim. Oswiadczenie rozjechane na dwa wiersze
   czyta sie jak zdanie informacyjne, a to jest warunek -- ma wygladac na decyzje. */
.hod-zgoda { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0;
  font: 400 15px/1.45 var(--body); color: var(--ink) }
.hod-zgoda input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--accent) }

/* ============ WIELU ARTYSTOW I SKROCONA DRABINKA (20.10.2026) ============ */

/* Przelacznik artystow. Przewijany w bok, a nie zawijany: przy trzech nazwach drugi rzad
   podnioslby cala reszte pulpitu, a to jest pasek nawigacyjny, nie tresc. */
.hod-przelacz { display: flex; gap: 6px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; -webkit-overflow-scrolling: touch }
.hod-zakladka { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule);
  color: var(--muted); text-decoration: none; font-size: 14px; white-space: nowrap }
.hod-zakladka.teraz { border-color: var(--accent); color: var(--accent-ink) }

/* PASEK POSTEPU zastepuje osiem opisow. Osiem kresek czyta sie jednym spojrzeniem,
   osiem akapitow trzeba przeczytac — a zrobionych szczebli nie czyta sie drugi raz. */
.hod-pasek { display: flex; gap: 4px; margin: 2px 0 12px }
.hod-pasek i { height: 5px; flex: 1; border-radius: 3px; background: var(--rule) }
.hod-pasek i.zrobiony { background: var(--accent) }
.hod-pasek i.teraz { background: var(--accent-ink) }

/* Pelna lista pod rozwinieciem. `<details>` bez JS-a; strzalke chowamy, bo tekst
   podsumowania sam mowi, co sie stanie. */
.hod-cala { margin-top: 12px }
.hod-cala > summary { cursor: pointer; color: var(--accent-ink); font-size: 14px; list-style: none }
.hod-cala > summary::-webkit-details-marker { display: none }
.hod-cala > summary::after { content: ' ▾' }
.hod-cala[open] > summary::after { content: ' ▴' }
.hod-cala .hod-szczeble { margin-top: 10px }

/* Zalozenie kolejnego artysty jedzie na `.btn-ghost` z app.css, nie na pelnym akcencie:
   „Awansuj" jest tym, po co sie tu wchodzi, a to jest wyjsciem na bok. Dwa guziki
   w kolorze akcentu na jednym ekranie konkurowalyby ze soba. */
.hod-kolejny { margin-top: 14px }
.hod-kolejny .btn { margin-top: 8px }
.hod-wroc { margin: 0 0 8px }
.hod-wroc a { color: var(--muted); text-decoration: none; font-size: 14px }