/* Onboarding „fabuła" - ekran 1 „maja": karuzela telefonu, nagranie, zapis rozmowy, karta leada,
   oś czasu. Szablon: templates/v5/onboarding_fabula/_ekran_maja.html,
   przebieg: static/js/onboarding-fabula/maja.js.
   Kolory wyłącznie z aliasów --onb-* (baza.css). Status = kolorowy tekst + ikona, bez pastylek.
   Elementy przygaszone mają przygaszony kolor tekstu, nie przezroczystość (kontrast WCAG). */

/* ---------- karuzela: kontakt -> wyciszony telefon -> Maja odbiera ---------- */
.onb-karuzela {
  position: relative;
  overflow: hidden;
  padding: 1rem 0 .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--onb-text) 14%, var(--onb-text) 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--onb-text) 14%, var(--onb-text) 86%, transparent);
}
.onb-karuzela__tor { position: relative; display: flex; align-items: center; gap: 2.5rem; transition: transform 1s cubic-bezier(.45, .05, .2, 1); will-change: transform; }
.onb-karuzela__karta { flex: 0 0 auto; transform: scale(.88); filter: grayscale(1); transition: transform .8s ease, filter .8s ease; }
.onb-karuzela__karta.is-on { transform: none; filter: none; }
.onb-karuzela__kontakt,
.onb-karuzela__maja {
  width: 17.5rem;
  min-height: 18.75rem;
  padding: 1.625rem 1.375rem;
  border-radius: 1.5rem;
  border: 1px solid var(--onb-line);
  background: var(--onb-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  text-align: center;
}
.onb-karuzela__karta.is-on .onb-telefon,
.onb-karuzela__kontakt.is-on,
.onb-karuzela__maja.is-on { box-shadow: var(--onb-shadow); }
.onb-karuzela__ikona { width: 4rem; height: 4rem; margin-bottom: .5rem; border-radius: 50%; border: 2px solid var(--onb-green-text); color: var(--onb-green-text); display: grid; place-items: center; }
.onb-karuzela__kontakt.is-on .onb-karuzela__ikona { animation: onb-dzwoni 1.2s ease-in-out infinite; }
.onb-karuzela__imie { font-size: 1.375rem; }
.onb-karuzela__linia { font-size: .875rem; color: var(--onb-muted); }
.onb-karuzela__tag { margin-top: .375rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--onb-green-text); }
.onb-karuzela__fala { display: flex; gap: 3px; align-items: center; height: 2.125rem; margin: .375rem 0; }
.onb-karuzela__fala i { width: 3px; height: 1.875rem; border-radius: 2px; background: var(--onb-green-btn); transform: scaleY(.3); }
.onb-karuzela__maja.is-on .onb-karuzela__fala i { animation: onb-fala 1s ease-in-out infinite; }
.onb-karuzela__fala i:nth-child(3n) { animation-delay: .2s; }
.onb-karuzela__fala i:nth-child(3n + 1) { animation-delay: .45s; }
.onb-karuzela__fala i:nth-child(4n) { animation-delay: .7s; }
.onb-karuzela__licznik { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--onb-green-text); }

/* telefon: wyciszony, potem „Nieodebrane połączenie" */
.onb-telefon { width: 17.5rem; min-height: 18.75rem; padding: .875rem 1.125rem 1.25rem; border-radius: 2.25rem; border: 2px solid var(--onb-line-strong); background: var(--onb-card); display: flex; flex-direction: column; }
.onb-telefon::before { content: ""; align-self: center; width: 4.5rem; height: .375rem; margin-bottom: .5rem; border-radius: 999px; background: var(--onb-line-strong); }
.onb-telefon__pasek { display: flex; justify-content: space-between; padding: 0 .5rem; font-size: .8125rem; color: var(--onb-muted); font-variant-numeric: tabular-nums; }
.onb-telefon__polaczenie { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; text-align: center; }
.onb-telefon__ikona { width: 4rem; height: 4rem; margin-bottom: .5rem; border-radius: 50%; border: 2px solid var(--onb-green-text); color: var(--onb-green-text); display: grid; place-items: center; transition: border-color .3s, color .3s; }
.onb-karuzela__karta.is-on .onb-telefon__ikona.is-dzwoni { animation: onb-dzwoni 1.2s ease-in-out infinite; }
.onb-telefon__ikona.is-nieodebrane { border-color: var(--onb-danger); color: var(--onb-danger); }
.onb-telefon__imie { font-size: 1.5rem; font-weight: 700; }
.onb-telefon__numer { font-size: .875rem; color: var(--onb-muted); }
.onb-telefon__stan { min-height: 1.5em; margin-top: .625rem; font-size: .9375rem; font-weight: 700; color: var(--onb-green-text); }
.onb-telefon__stan.is-nieodebrane { color: var(--onb-danger); }

/* ---------- rozmowa + karta leada ---------- */
.onb-rozmowa { display: grid; grid-template-columns: minmax(0, 1fr) 20.625rem; gap: 1rem; align-items: stretch; animation: onb-rozmowa-in .7s ease; }
.onb-rozmowa__polaczenie { min-width: 0; padding: 1rem; border-radius: var(--onb-radius); border: 1px solid var(--onb-line); background: var(--onb-card); display: flex; flex-direction: column; }
.onb-rozmowa__glowa { display: flex; align-items: center; gap: .75rem; padding-bottom: .8125rem; border-bottom: 1px solid var(--onb-line); }
.onb-rozmowa__awatar { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 50%; border: 2px solid var(--onb-green-text); color: var(--onb-green-text); display: grid; place-items: center; }
.onb-rozmowa__meta { flex: 1; min-width: 0; }
.onb-rozmowa__meta strong { display: block; font-size: .9375rem; }
.onb-rozmowa__meta small { font-size: .8125rem; color: var(--onb-muted); }

.onb-rozmowa__watek { position: relative; flex: 1 1 auto; height: 0; min-height: 13.75rem; padding: .875rem .125rem .25rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .5625rem; border-radius: var(--onb-radius-sm); }
.onb-rozmowa__watek:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 2px; }
.onb-rozmowa__tura { display: flex; flex-direction: column; max-width: 84%; animation: onb-wejscie .34s ease both; }
.onb-rozmowa__tura--maja { align-self: flex-start; align-items: flex-start; }
.onb-rozmowa__tura--klient { align-self: flex-end; align-items: flex-end; }
.onb-rozmowa__kto { margin: 0 .125rem .1875rem; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--onb-muted); }
.onb-rozmowa__tura--maja .onb-rozmowa__kto { color: var(--onb-green-text); }
.onb-rozmowa__dymek { margin: 0; padding: .5625rem .8125rem; border-radius: 14px; font-size: .875rem; font-weight: 500; line-height: 1.45; }
.onb-rozmowa__tura--maja .onb-rozmowa__dymek { background: var(--onb-green-soft); border: 1px solid var(--onb-line-strong); }
.onb-rozmowa__tura--klient .onb-rozmowa__dymek { background: var(--onb-card-2); border: 1px solid var(--onb-line); }
.onb-rozmowa__tura.is-teraz .onb-rozmowa__dymek { outline: 2px solid var(--onb-green-text); outline-offset: 1px; }

/* nagranie: fala z suwakiem pod spodem (klik w falę = przewinięcie), sterowanie */
.onb-nagranie { margin-top: .75rem; padding: .625rem .75rem .5rem; border-radius: 14px; border: 1px solid var(--onb-line); background: var(--onb-card-2); }
.onb-nagranie__t { margin-bottom: .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--onb-muted); }
.onb-nagranie__fala { position: relative; height: 2.75rem; border-radius: 8px; }
.onb-nagranie__fala:has(.onb-nagranie__suwak:focus-visible) { outline: 3px solid var(--onb-green-text); outline-offset: 3px; }
.onb-nagranie__slupki { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; pointer-events: none; }
.onb-nagranie__slupki i { flex: 1; min-height: 15%; border-radius: 2px; background: var(--onb-line-strong); }
.onb-nagranie__slupki i.is-grane { background: var(--onb-green-btn); }
.onb-nagranie__suwak { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.onb-nagranie__sterowanie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.onb-btn.onb-nagranie__play { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 50%; }
.onb-nagranie__ico-pauza { display: none; }
.onb-nagranie__play.is-gra .onb-nagranie__ico-play { display: none; }
.onb-nagranie__play.is-gra .onb-nagranie__ico-pauza { display: block; }
.onb-nagranie__czas { margin-left: auto; font-size: .8125rem; color: var(--onb-muted); font-variant-numeric: tabular-nums; }

/* karta leada */
.onb-karta-leada { min-width: 0; padding: 1.125rem; border-radius: var(--onb-radius); border: 1px solid var(--onb-line); background: var(--onb-card); display: flex; flex-direction: column; }
.onb-karta-leada__gora { display: flex; align-items: center; gap: .6875rem; }
.onb-karta-leada__awatar { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 50%; border: 2px solid var(--onb-green-text); color: var(--onb-green-text); display: grid; place-items: center; font-size: .9375rem; font-weight: 700; }
.onb-karta-leada__kto { display: flex; flex-direction: column; min-width: 0; }
.onb-karta-leada__tag { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--onb-muted); }
.onb-karta-leada__imie { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.onb-karta-leada__pola { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0 0; }
.onb-karta-leada__pole { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.onb-karta-leada__pole dt { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--onb-muted); }
.onb-karta-leada__pole dd { margin: 0; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.onb-karta-leada__brak { color: var(--onb-muted); }
.onb-karta-leada__pole:not(.is-filled) .onb-karta-leada__wartosc,
.onb-karta-leada__pole.is-filled .onb-karta-leada__brak { display: none; }
.onb-karta-leada__pole.is-filled dd { animation: onb-wejscie .4s ease both; }

/* score: kolor = znaczenie (gorący = --onb-danger), bez wypełnionych pastylek */
.onb-wynik { margin-top: 1.125rem; padding-top: .875rem; border-top: 1px solid var(--onb-line); }
.onb-wynik__wiersz { display: flex; align-items: center; gap: .5625rem; color: var(--onb-muted); }
.onb-wynik__liczba { font-size: 1.875rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.onb-wynik__etykieta { font-size: .8125rem; font-weight: 700; }
.onb-wynik.is-goracy .onb-wynik__wiersz { color: var(--onb-danger); }
.onb-wynik__pkt { font-weight: 700; color: var(--onb-green-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* pasujący kupujący (po score) */
.onb-kupujacy { margin-top: .875rem; padding-top: .75rem; border-top: 1px solid var(--onb-line); }
.onb-kupujacy__h { margin: 0 0 .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--onb-muted); }
.onb-kupujacy__lista { list-style: none; margin: 0; padding: 0; }
.onb-kupujacy__wiersz { display: flex; flex-direction: column; padding: .4375rem 0; border-bottom: 1px solid var(--onb-line); }
.onb-kupujacy__wiersz:last-child { border-bottom: 0; padding-bottom: 0; }
.onb-kupujacy__wiersz:not(.is-in) { visibility: hidden; }
.onb-kupujacy__wiersz.is-in { animation: onb-wejscie .3s ease both; }
.onb-kupujacy__gora { display: flex; justify-content: space-between; align-items: baseline; gap: .625rem; }
.onb-kupujacy__imie { min-width: 0; font-size: .8125rem; font-weight: 600; }
.onb-kupujacy__fit { font-size: .75rem; font-weight: 700; color: var(--onb-green-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.onb-kupujacy__tel { font-size: .75rem; color: var(--onb-muted); font-variant-numeric: tabular-nums; }

/* ---------- „Następny krok" i wybór ---------- */
.onb-maja__dalej { display: flex; justify-content: center; margin: 1.375rem 0 .25rem; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.onb-maja__dalej.is-in { opacity: 1; transform: none; }
.onb-maja.is-wybor .onb-rozmowa,
.onb-maja.is-wybor .onb-os { display: none; }
.onb-maja.is-wybor .onb-wybor { margin-top: .5rem; }

/* ---------- oś czasu: 4 kroki z paskiem postępu (--onb-os-p 0..1 ustawia maja.js) ---------- */
.onb-os {
  --onb-os-gora: calc(1.75rem + 1.625rem + .375rem + 1.75rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  max-width: 61.25rem;
  margin: 1.375rem auto 0;
  padding: 1.75rem 1.25rem 1.875rem;
  list-style: none;
  border-radius: 1.5rem;
  border: 1px solid var(--onb-line);
  background: var(--onb-card);
}
.onb-os::before,
.onb-os::after { content: ""; position: absolute; top: var(--onb-os-gora); left: 12.5%; height: 3px; border-radius: 2px; transform: translateY(-50%); }
.onb-os::before { right: 12.5%; background: var(--onb-line); }
.onb-os::after { width: calc(75% * var(--onb-os-p, 0)); background: var(--onb-green-btn); transition: width var(--onb-os-czas, 0ms) linear, height var(--onb-os-czas, 0ms) linear; }
.onb-os li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.onb-os__czas { height: 1.625rem; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--onb-muted); }
.onb-os li:last-child .onb-os__czas { color: var(--onb-green-text); }
.onb-os__ikona { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 2px solid var(--onb-line); background: var(--onb-card-2); color: var(--onb-muted); display: grid; place-items: center; transition: border-color .4s, color .4s, box-shadow .4s; }
.onb-os li.is-on .onb-os__ikona { border-color: var(--onb-green-text); color: var(--onb-green-text); }
.onb-os li.is-now .onb-os__ikona { box-shadow: 0 0 0 6px var(--onb-green-soft); }
.onb-os__t { font-size: 1.0625rem; line-height: 1.3; color: var(--onb-muted); transition: color .4s; }
.onb-os li.is-on .onb-os__t { color: var(--onb-text); }
.onb-os__czas .onb-os__dlugosc { margin-top: 0; }
.onb-os__dlugosc { display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: .9375rem; font-weight: 700; color: var(--onb-green-text); }

/* ---------- ruch ---------- */
@keyframes onb-dzwoni { 0%, 55%, 100% { transform: rotate(0); } 8% { transform: rotate(-13deg); } 16% { transform: rotate(11deg); } 24% { transform: rotate(-9deg); } 32% { transform: rotate(7deg); } 40% { transform: rotate(-4deg); } 48% { transform: rotate(2deg); } }
@keyframes onb-fala { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes onb-wejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes onb-rozmowa-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- telefon (do 820 px): jedna kolumna, oś pionowa ---------- */
@media (max-width: 51.25rem) {
  .onb-karuzela__tor { gap: 1.125rem; }
  .onb-karuzela__kontakt, .onb-karuzela__maja, .onb-telefon { width: 15.625rem; min-height: 17.5rem; }
  .onb-rozmowa { grid-template-columns: 1fr; }
  .onb-os { grid-template-columns: 1fr; gap: 1.125rem; padding: 1.25rem 1.125rem; }
  .onb-os::before,
  .onb-os::after { top: 3rem; left: calc(1.125rem + 1.75rem); right: auto; width: 3px; transform: translateX(-50%); }
  .onb-os::before { bottom: 3rem; height: auto; }
  .onb-os::after { height: calc((100% - 6rem) * var(--onb-os-p, 0)); }
  .onb-os li { display: grid; grid-template-columns: 3.5rem 1fr; grid-template-areas: "ico czas" "ico t" "ico s" "ico dl"; column-gap: .875rem; row-gap: .125rem; align-items: start; text-align: left; }
  .onb-os__ikona { grid-area: ico; }
  .onb-os__czas { grid-area: czas; height: auto; font-size: .9375rem; }
  .onb-os__czas:empty { display: none; }
  .onb-os__t { grid-area: t; font-size: 1rem; }
  .onb-os__t br { display: none; }
  .onb-os__dlugosc { grid-area: dl; }
}

@media (prefers-reduced-motion: reduce) {
  .onb-karuzela__tor, .onb-karuzela__karta, .onb-telefon__ikona, .onb-maja__dalej,
  .onb-os::after, .onb-os__ikona, .onb-os__t { transition: none; }
  .onb-karuzela__ikona, .onb-telefon__ikona, .onb-karuzela__fala i, .onb-rozmowa, .onb-rozmowa__tura,
  .onb-karta-leada__pole dd, .onb-kupujacy__wiersz { animation: none !important; }
}