/* Onboarding „fabuła" - finał (ekran 9): lejek z puentą, „Co Estify przygotowało", stan biura
   z zaproszeniem, osiągnięcie, wejście do panelu. Lejek: .onb-lejek (komponenty.css).
   Tylko aliasy --onb-*. */

.onb-fin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.onb-fin__karta { min-width: 0; padding: 1.125rem 1.25rem; border-radius: var(--onb-radius); border: 1px solid var(--onb-line); background: var(--onb-card); }
.onb-fin__karta--szeroka { grid-column: 1 / -1; }
.onb-fin__h { display: flex; align-items: center; gap: .625rem; margin: 0 0 .875rem; font-size: 1.0625rem; font-weight: 700; }
.onb-fin__h svg { flex: 0 0 auto; color: var(--onb-green-text); }
.onb-fin__licznik { margin-left: auto; font-size: .875rem; font-weight: 600; color: var(--onb-muted); white-space: nowrap; }
.onb-fin__nota { margin: 1rem 0 0; font-size: .9375rem; color: var(--onb-muted); }

/* puenta pod lejkiem: pojawia się, gdy „Finalizacja" zaświeci */
.onb-fin__puenta { margin: 1.125rem 0 .125rem; text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.onb-fin__puenta.is-in { opacity: 1; transform: none; }
.onb-fin__puenta b { display: block; font-size: clamp(1.0625rem, 2vw, 1.25rem); }
.onb-fin__puenta span { display: block; margin-top: .25rem; font-size: .9375rem; color: var(--onb-muted); }

/* co Estify przygotowało */
.onb-fin__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.onb-fin__lista li { display: flex; gap: .75rem; align-items: flex-start; }
.onb-fin__lista svg { flex: 0 0 auto; margin-top: .125rem; color: var(--onb-green-text); }
.onb-fin__lista b, .onb-fin__zadanie b { display: block; font-size: .9375rem; }
.onb-fin__lista small, .onb-fin__zadanie small { display: block; margin-top: .125rem; font-size: .875rem; color: var(--onb-muted); }

/* stan biura: zadanie albo wynik */
.onb-fin__zadania { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.onb-fin__zadanie { display: flex; gap: .75rem; align-items: center; }
.onb-fin__zadanie:not(.is-done) b { font-weight: 600; }
.onb-fin__znak { flex: 0 0 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--onb-muted); display: grid; place-items: center; }
.onb-fin__zadanie.is-done .onb-fin__znak { background: var(--onb-green-btn); border-color: var(--onb-green-btn); color: var(--onb-card); }

/* zaproszenie agenta */
.onb-fin__zapros { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--onb-line); }
.onb-fin__zapros fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.onb-fin__zapros legend { padding: 0; font-size: .9375rem; font-weight: 700; }
.onb-fin__zapros-d { margin: .25rem 0 .75rem; font-size: .875rem; color: var(--onb-muted); }
.onb-fin__pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; align-items: end; }
.onb-fin__pole-l { display: grid; gap: .25rem; min-width: 0; font-size: .8125rem; font-weight: 600; }
.onb-fin__pole { width: 100%; min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--onb-radius-sm); border: 1px solid var(--onb-line-strong); background: var(--onb-card); color: var(--onb-text); font: inherit; font-size: 1rem; font-weight: 400; }
.onb-fin__pole::placeholder { color: var(--onb-muted); opacity: 1; }
.onb-fin__pole:focus-visible { outline: 3px solid var(--onb-green-text); outline-offset: 1px; border-color: var(--onb-green-text); }
.onb-fin__zapros-btn { min-height: 2.75rem; }
.onb-fin__zapros-st { margin: .625rem 0 0; font-size: .875rem; color: var(--onb-text); }
.onb-fin__zapros-st:empty { display: none; }

/* osiągnięcie i wyjście */
.onb-fin__osiag { display: flex; align-items: center; gap: .875rem; }
.onb-fin__osiag svg { flex: 0 0 auto; color: var(--onb-green-text); }
.onb-fin__osiag b { display: block; font-size: 1rem; }
.onb-fin__osiag small { display: block; margin-top: .125rem; font-size: .875rem; color: var(--onb-muted); }
.onb-fin__koniec { display: grid; justify-items: center; gap: .75rem; margin-top: 1.625rem; text-align: center; }
.onb-fin__koniec p { margin: 0; font-size: 1rem; color: var(--onb-text); }

@media (max-width: 51.25rem) {
  .onb-fin { grid-template-columns: 1fr; }
  .onb-fin__karta { padding: 1rem; }
  .onb-fin__pola { grid-template-columns: 1fr; }
  .onb-fin__zapros-btn, .onb-fin__koniec .onb-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-fin__puenta { transition: none; }
}