/* ==========================================================================
   paulinajanik.pl - wywiad żywieniowy, dokumenty po wizycie, zamówienie poradni (P4a)
   §19 elegant minimal: płaskie białe karty z hairline r16, kroki jako zwykła numerowana lista
   (małe cyfry sans, hairline, bez linii postępu), bez obrotów, pisma odręcznego, złota i kursywy.
   Tokeny i komponenty z main.css (F1). Ruch tylko transform/opacity, najechanie tylko dla
   precyzyjnego wskaźnika, bez ruchu przy pj-still / a11y-motion (reguła globalna F1).
   ========================================================================== */

/* ---------- 1. Nagłówek strony: tytuł + winietka ---------- */
.bf-hero { padding-top: clamp(2rem, 1rem + 4vw, 4.5rem); padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.bf-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: end; }
.bf-hero__text { display: grid; gap: 1rem; justify-items: start; max-width: 44rem; }
.bf-hero__title { max-width: 16ch; }
.bf-hero__lede { color: var(--ink-2); }
.bf-hero__until { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); color: var(--muted); }
.bf-hero__until .icon { width: 1.1rem; height: 1.1rem; color: var(--muted); }
@media (min-width: 900px) {
  .bf-hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Karta wizyty z imieniem pacjenta: płaska biała karta z hairline (bez obrotu, zagięcia i pisma odręcznego). */
.bf-place {
  position: relative; display: grid; align-content: start; gap: .375rem;
  width: min(19rem, 100%); padding: 1.25rem 1.375rem; border-radius: var(--r);
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
}
.bf-place__name { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.bf-place__when { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 500; color: var(--ink-2); }
.bf-place__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.bf-place__type { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 899px) {
  .bf-place { justify-self: start; width: min(19rem, 100%); padding: 1rem 1.125rem; }
}
@media (max-width: 359px) {
  .bf-courses { --plate: 1.5rem; }
  .bf-course__num { font-size: .75rem; }
}
@media (max-width: 639px) {
  .bf-hero { padding-bottom: 1.5rem; }
  .bf-hero__inner { gap: 1.5rem; }
}

/* ---------- 2. Układ formularza ---------- */
.bf-wrap { padding-bottom: var(--sec-y); }
.bf-form { position: relative; }
.bf-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) {
  .bf-layout { grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 3.5vw, 3.5rem); }
  .bf-courses { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

/* ---------- 3. Kroki: zwykła numerowana lista z hairline ---------- */
.bf-courses { --plate: 1.5rem; }
.bf-courses__card { padding: 0; }
.bf-courses__title { font-family: var(--font-text); font-size: .875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--muted); }
.bf-courses__progress { padding: .125rem 0 .875rem; font-size: var(--fs-small); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.bf-courses__list { list-style: none; position: relative; display: grid; }
.bf-course { position: relative; border-bottom: 1px solid var(--line); }
.bf-course__btn {
  position: relative; width: 100%; display: grid; grid-template-columns: var(--plate) minmax(auto, 1fr) auto; align-items: baseline; gap: .5rem;
  min-height: 2.75rem; padding: .7rem 0 .65rem; text-align: left; color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out);
}
.bf-course__plate {
  position: relative; display: inline-grid; place-items: center start; width: var(--plate); color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums; transition: color var(--t-ui) var(--ease-out);
}
.bf-course__num { font-size: .8125rem; font-weight: 600; line-height: 1; }
.bf-course__check { position: absolute; left: 0; width: .95rem; height: .95rem; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.bf-course__name { font-size: .9375rem; font-weight: 500; line-height: 1.3; min-width: 0; }
/* Nazwa kroku nie łamie się w środku słowa („Postęp-y"); przy braku miejsca zawija się stan („do / uzupełnienia"). */
.bf-course__state { font-size: var(--fs-xs); color: var(--muted); text-align: right; line-height: 1.25; }
/* stany */
.bf-course.is-current .bf-course__btn { color: var(--ink); }
.bf-course.is-current .bf-course__name { font-weight: 600; }
.bf-course.is-current .bf-course__plate { color: var(--brand); }
.bf-course.is-current .bf-course__state { color: var(--brand); font-weight: 600; }
.bf-course.is-done .bf-course__plate { color: var(--brand); }
.bf-course.is-done .bf-course__num { opacity: 0; }
.bf-course.is-done .bf-course__check { opacity: 1; }
.bf-course.is-missing .bf-course__plate, .bf-course.is-missing .bf-course__state { color: var(--warning); font-weight: 600; }
.bf-course.is-locked .bf-course__btn { opacity: .5; cursor: not-allowed; }
.bf-course__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-hair); }

/* Telefon i tablet: rząd cyfr nad krokiem, pod każdą cienki odcinek (bieżący i zrobione w kolorze marki) */
@media (max-width: 1023px) {
  .bf-courses__title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .bf-courses__progress { padding: 0 0 .75rem; border: 0; font-weight: 600; color: var(--ink-2); }
  .bf-courses__list { display: flex; gap: .25rem; }
  .bf-course { flex: 1 1 0; display: flex; justify-content: center; border: 0; }
  .bf-course__btn { display: grid; place-items: center; width: 100%; min-height: 2.75rem; padding: 0 0 .5rem; grid-template-columns: none; }
  .bf-course__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--r-hair); background: var(--line-strong); }
  .bf-course.is-done .bf-course__btn::after { background: rgba(39, 70, 41, .45); }
  .bf-course.is-current .bf-course__btn::after { background: var(--brand); }
  .bf-course.is-missing .bf-course__btn::after { background: var(--warning); }
  .bf-course__plate { place-items: center; }
  .bf-course__check { left: 50%; margin-left: -.475rem; }
  .bf-course__name { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bf-course__state { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 4. Talerz z krokiem ---------- */
.bf-sheet { min-width: 0; }
.bf-sheet__core { container-type: inline-size; container-name: bfsheet; min-width: 0; }
/* ELEGANT MINIMAL (SPEC §19): krok leży płasko na tle strony - bez zewnętrznej karty, żeby zgody i pola nie były kartą w karcie. */
.bf-notices:empty { display: none; }
.bf-notices { display: grid; gap: .75rem; margin-bottom: 1.75rem; }
.bf-notice__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.bf-step__fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.bf-step__head { display: grid; gap: .625rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.bf-step__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.bf-step__title:focus { outline: none; }
.bf-step__intro { color: var(--muted); max-width: 40em; text-wrap: pretty; line-height: 1.55; }
.bf-step__parts { display: flex; align-items: center; gap: .375rem; margin-top: .25rem; }
.bf-step__dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--line-strong); transition: background-color var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.bf-step__dot.is-done { background: rgba(39, 70, 41, .45); }
.bf-step__dot.is-current { background: var(--brand); }

/* Grupy pytań: na szerokim ekranie oddzielone hairline'em, na telefonie po jednej na ekran (JS). */
.bf-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.875rem; }
.bf-group + .bf-group { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.bf-form.is-paged .bf-group:not(.is-active) { display: none; }
.bf-form.is-paged .bf-group.is-active { margin-top: 0; padding-top: 0; border-top: 0; }
/* Grupa, której wszystkie pytania są wyłączone warunkiem (np. opiekun, gdy wizyta nie jest dla dziecka), znika
   razem z kreską i odstępem - bez pustego pasa. Z JS: stan .is-off; bez JS: data-gcond + reguły :has ze strony.
   Gdy ukryta jest pierwsza grupa kroku, następna nie dostaje kreski u góry. */
html.bf-js .bf-group:not(:has(.bf-q:not(.is-off))) { display: none; }
html:not(.bf-js) .bf-group[data-gcond] { display: none; }
html.bf-js .bf-group:first-child:not(:has(.bf-q:not(.is-off))) + .bf-group { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- 5. Pytanie ---------- */
.bf-q { display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; min-width: 0; }
.bf-q__fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .625rem; }
.bf-q__fs > legend:not(.visually-hidden) { float: left; width: 100%; padding: 0; margin: 0 0 .625rem; }
.bf-q__fs > legend:not(.visually-hidden) + * { clear: both; }
.bf-q__label { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.bf-q__opt { display: inline-block; margin-left: .5rem; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); letter-spacing: .01em; }
.bf-q__help { font-size: .9375rem; line-height: 1.5; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.bf-q__fs > .bf-q__help { margin-top: -.25rem; }
.bf-q__count { justify-self: end; margin-top: -.25rem; font-size: var(--fs-xs); color: var(--muted); }
.bf-q__error { margin-top: -.125rem; }

/* Warunki show_if: stan z serwera/JS (is-off); bez JS same-krokowe warunki robi CSS :has (reguły w <style> strony). */
.bf-cond.is-off { display: none; }
html:not(.bf-js) .bf-cond[data-cond] { display: none; }

/* Pola tekstowe z jednostką */
.bf-input { position: relative; max-width: 32rem; }
.bf-input--number { max-width: 12rem; }
.bf-input--date { max-width: 15rem; }
.bf-input--time { max-width: 10rem; }
.bf-input--unit .bf-input__control { padding-right: 3.5rem; font-variant-numeric: tabular-nums lining-nums; }
.bf-input__unit { position: absolute; right: 1.125rem; top: 50%; transform: translateY(-50%); font-size: .9375rem; color: var(--muted); pointer-events: none; }
.bf-q textarea.field__input { max-width: none; min-height: 7.5rem; }
.bf-q--textarea .field__input { width: 100%; }

/* Opcje: pigułki (krótkie), wiersze (dłuższe), dwie kolumny (długie listy) */
.bf-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.bf-opts--inline { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (min-width: 640px) {
  .bf-opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-opts--grid .bf-opt--exclusive { grid-column: 1 / -1; }
}
.bf-opt {
  position: relative; display: flex; align-items: flex-start; gap: .75rem; min-height: 3rem;
  padding: .75rem 1rem; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--white);
  cursor: pointer; color: var(--ink-2); font-size: .96875rem; line-height: 1.45;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.bf-opts--inline .bf-opt { border-radius: var(--r-pill); align-items: center; padding: .625rem 1.25rem .625rem .875rem; }
.bf-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bf-opt__mark {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-top: .1rem;
  border-radius: 50%; border: 1.5px solid var(--line-control); background: var(--white); color: transparent;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.bf-opts--inline .bf-opt__mark { margin-top: 0; }
.bf-opt__mark::after {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--porcelain); transform: scale(0);
  transition: transform var(--t-fast) var(--ease-out);
}
.bf-opts--multi .bf-opt__mark { border-radius: var(--r-xs); }
.bf-opts--multi .bf-opt__mark::after { display: none; }
.bf-opt__mark .icon { width: .8rem; height: .8rem; transform: scale(.6); opacity: 0; transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.bf-opt__text { min-width: 0; text-wrap: pretty; }
.bf-opt:has(.bf-opt__input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--ink); }
.bf-opt:has(.bf-opt__input:checked) .bf-opt__mark { background: var(--brand); border-color: var(--brand); color: var(--porcelain); }
.bf-opt:has(.bf-opt__input:checked) .bf-opt__mark::after { transform: scale(1); }
.bf-opt:has(.bf-opt__input:checked) .bf-opt__mark .icon { transform: none; opacity: 1; }
.bf-opt:has(.bf-opt__input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bf-opt:has(.bf-opt__input:disabled) { cursor: default; }
.bf-opt:active { transform: scale(.985); }
.bf-q.is-invalid .bf-opt { border-color: rgba(163, 51, 43, .45); }
/* Długie listy (choroby, alergeny, cele): lekka lista do odhaczania - hairline zamiast ramek. */
.bf-opts--grid { gap: 0 1.25rem; }
.bf-opts--grid .bf-opt {
  border-color: transparent; border-radius: 0; background: transparent; min-height: 2.875rem; padding: .625rem .75rem;
  box-shadow: inset 0 -1px 0 var(--line);
}
.bf-opts--grid .bf-opt:has(.bf-opt__input:checked) { background: transparent; border-color: transparent; box-shadow: inset 0 -1px 0 var(--line); }
.bf-opts--grid .bf-opt--exclusive { box-shadow: inset 0 -1px 0 var(--line-strong); margin-bottom: .375rem; }
.bf-q.is-invalid .bf-opts--grid .bf-opt { border-color: transparent; box-shadow: inset 0 -1px 0 rgba(163, 51, 43, .4); }
.bf-step__note { margin-bottom: 1.75rem; }

/* Skala 1-5 / 1-10: rząd okrągłych pól wyboru */
.bf-scale { display: grid; gap: .5rem; max-width: 30rem; }
.bf-scale__row { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: .5rem; }
.bf-scale__item { position: relative; display: grid; place-items: center; cursor: pointer; }
.bf-scale__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bf-scale__plate {
  display: inline-grid; place-items: center; width: 2.875rem; height: 2.875rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink-2); font-weight: 600; font-size: 1rem;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.bf-scale__item:has(.bf-scale__input:checked) .bf-scale__plate { background: var(--brand); border-color: var(--brand); color: var(--porcelain); }
.bf-scale__item:has(.bf-scale__input:focus-visible) .bf-scale__plate { outline: 2px solid var(--focus-ring); outline-offset: 5px; }
.bf-scale__item:active .bf-scale__plate { transform: scale(.95); }
.bf-scale__ends { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-small); color: var(--muted); }
.bf-q--scale:has([style*="--n:10"]) .bf-scale { max-width: 38rem; }
@media (max-width: 479px) {
  .bf-scale:has(.bf-scale__item:nth-child(6)) .bf-scale__row { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: .75rem; }
}

/* Macierz częstotliwości (FFQ): tabela na szerokim talerzu, pigułki na wąskim */
.bf-matrix { display: grid; gap: 0; }
.bf-matrix__intro { font-size: .9375rem; color: var(--muted); line-height: 1.5; max-width: 62ch; margin-bottom: 1.25rem; text-wrap: pretty; }
.bf-matrix__head { display: none; }
.bf-q--matrix { padding: 1.125rem 0; border-top: 1px solid var(--line); gap: .5rem; }
.bf-q--matrix:last-child { border-bottom: 1px solid var(--line); }
.bf-matrix__row { gap: .75rem; }
.bf-matrix__q { font-size: 1rem; display: block; }
.bf-matrix__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 480px) { .bf-matrix__cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bf-matrix__cell {
  position: relative; display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .5rem .75rem;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--white); cursor: pointer;
  font-size: .875rem; line-height: 1.3; color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.bf-matrix__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bf-matrix__dot { flex: none; position: relative; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 1.5px solid var(--line-control); background: var(--white); transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.bf-matrix__dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: .45rem; height: .45rem; border-radius: 50%; background: var(--porcelain); transform: scale(0); transition: transform var(--t-fast) var(--ease-out); }
.bf-matrix__cell:has(.bf-matrix__input:checked) { border-color: var(--brand); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brand); }
.bf-matrix__cell:has(.bf-matrix__input:checked) .bf-matrix__dot { background: var(--brand); border-color: var(--brand); }
.bf-matrix__cell:has(.bf-matrix__input:checked) .bf-matrix__dot::after { transform: scale(1); }
.bf-matrix__cell:has(.bf-matrix__input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@container bfsheet (min-width: 44rem) {
  /* Nagłówek i każdy wiersz mają JEDNĄ definicję kolumn (kolumna pytania minmax(13rem, 3fr) + sześć równych kolumn odpowiedzi; minima stałe, więc szerokości nie zależą od treści),
     a komórki wiersza są bezpośrednio w siatce wiersza (display: contents) - kropka leży dokładnie pod etykietą. */
  .bf-matrix { --q: minmax(13rem, 3fr); }
  .bf-matrix__head, .bf-matrix__row { display: grid; grid-template-columns: var(--q) repeat(var(--cols, 6), minmax(0, 1fr)); column-gap: .25rem; }
  .bf-matrix__head {
    align-items: end; padding-bottom: .75rem; position: sticky; top: var(--header-h); z-index: 2; background: var(--white);
  }
  .bf-matrix__col { font-size: .75rem; line-height: 1.3; color: var(--muted); text-align: center; text-wrap: balance; padding: 0 .125rem; }
  .bf-q--matrix { padding: .375rem 0; }
  .bf-matrix__row { align-items: center; row-gap: 0; }
  .bf-matrix__q { grid-column: 1; padding: .5rem .75rem .5rem 0; font-weight: 500; font-size: .9375rem; line-height: 1.4; }
  .bf-matrix__cells { display: contents; }
  .bf-matrix__cell { justify-content: center; min-height: 2.75rem; padding: 0; border-color: transparent; background: transparent; border-radius: var(--r-sm); }
  .bf-matrix__cell:has(.bf-matrix__input:checked) { background: transparent; box-shadow: none; border-color: transparent; }
  .bf-matrix__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bf-matrix__dot { width: 1.25rem; height: 1.25rem; }
  .bf-q--matrix .bf-q__error { padding-left: 0; }
}

/* Zgoda (art. 9 i pozostałe) */
.bf-consent {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .875rem; row-gap: .5rem; align-items: start;
  padding: 1.125rem 1.25rem; border-radius: var(--r); background: var(--white); border: 1px solid var(--line-strong);
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.bf-consent__input { margin-top: .15rem; }
.bf-consent__label { display: grid; gap: .35rem; cursor: pointer; }
.bf-consent__title { font-weight: 600; color: var(--ink); line-height: 1.4; }
.bf-consent__text { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.bf-consent__text a { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.bf-consent .bf-q__help, .bf-consent .bf-q__error { grid-column: 2; }
.bf-consent:has(.bf-consent__input:checked) { border-color: rgba(39, 70, 41, .45); }
.bf-q--consent.is-invalid .bf-consent { border-color: rgba(163, 51, 43, .45); background: var(--danger-soft); }

/* Pliki z wynikami badań */
.bf-files { list-style: none; display: grid; gap: .5rem; }
.bf-files[data-empty] { display: none; }
.bf-file {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem;
  min-height: 3.25rem; padding: .5rem .5rem .5rem .625rem; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--white);
}
.bf-file.is-uploading { opacity: .55; }
.bf-file__icon {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); border: 1px solid var(--line);
  color: var(--brand); font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
}
.bf-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; color: var(--ink); }
.bf-file__size { font-size: var(--fs-xs); color: var(--muted); }
.bf-file__remove { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--ink-2); transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.bf-file__remove .icon { width: 1.1rem; height: 1.1rem; }
.bf-files__add { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.bf-files__btn .icon { width: 1.15rem; height: 1.15rem; }
.bf-files__nojs { font-size: var(--fs-small); color: var(--muted); }
.bf-files__status { font-size: var(--fs-small); color: var(--muted); min-height: 0; }
.bf-files__status:empty { display: none; }
html.bf-js .bf-files__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
html.bf-js .bf-files__nojs { display: none; }
html:not(.bf-js) .bf-files__btn { display: none; }
.bf-files__input:focus-visible + .bf-files__btn { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ---------- 6. Pasek akcji i status zapisu ---------- */
.bf-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  margin-top: clamp(2rem, 3vw, 2.75rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.bf-actions__spacer { flex: 0 0 auto; }
.bf-actions__prev .btn__icon { width: 1.1rem; height: 1.1rem; }
.bf-actions__prev[hidden] { display: none; }
.bf-actions__next { margin-left: auto; }
.bf-save { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-small); color: var(--muted); }
.bf-save__icon { width: 1.05rem; height: 1.05rem; color: var(--line-control); transition: color var(--t-ui) var(--ease-out); }
.bf-save.is-saved .bf-save__icon { color: var(--success); }
.bf-save.is-saving .bf-save__icon { animation: bf-pulse 1s ease-in-out infinite; }
.bf-save.is-error, .bf-save.is-offline { color: var(--warning); }
/* Bez JS: „zapiszę po przejściu do kolejnego kroku"; z JS (klasa pj-js z <head>): „zapisują się same". */
.pj-js .bf-save__nojs, html:not(.pj-js) .bf-save__auto { display: none; }
/* Fokus przeniesiony na pytanie po przejściu do kolejnej części kroku (telefon) - element nieinteraktywny, bez obwódki. */
[data-group-focus]:focus { outline: none; }
.bf-withdraw-note__keep { margin-top: .5rem; color: var(--ink-2); }
.bf-withdraw__text { color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
.bf-withdraw .dialog__foot .btn { white-space: normal; text-align: center; }
@media (max-width: 479px) {
  /* Telefon: przyciski na całą szerokość, bezpieczny wybór („Zostawiam zgodę") na górze, pod kciukiem. */
  .bf-withdraw .dialog__foot { flex-direction: column-reverse; align-items: stretch; }
}
.bf-save.is-error .bf-save__icon, .bf-save.is-offline .bf-save__icon { color: var(--warning); }
@keyframes bf-pulse { 50% { opacity: .35; } }
@media (max-width: 639px) {
  /* Fokus i przewijanie do pola nie chowają się pod przyklejonym paskiem akcji (WCAG 2.4.11). */
  html:has(.bf-form .bf-actions) { scroll-padding-bottom: 8.5rem; }
  .bf-actions {
    position: sticky; bottom: 0; z-index: 5; margin-inline: calc(var(--gutter) * -1); margin-top: 2rem;
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    background: var(--porcelain); border-top: 1px solid var(--line-strong);
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem;
  }
  .bf-save { grid-column: 1 / -1; justify-content: center; font-size: var(--fs-xs); order: -1; }
  /* Etykieta może się zawinąć (powiększony tekst 130 %, 320 px) - talerzyk ze strzałką zostaje w przycisku (WCAG 1.4.4, 1.4.10). */
  .bf-actions__next { margin-left: 0; width: 100%; justify-content: space-between; padding-left: 1.25rem; white-space: normal; text-align: left; padding-block: .3125rem; }
  .bf-actions__next .btn__label { flex: 1 1 auto; min-width: 0; text-wrap: balance; }
  .bf-actions.is-first .bf-actions__next, .bf-actions:has(.bf-actions__spacer) .bf-actions__next { grid-column: 1 / -1; }
  .bf-actions__prev { padding: 0 1rem; }
  .bf-actions__prev .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bf-actions__spacer { display: none; }
}
@media (max-width: 359px) {
  /* Najwęższe ekrany (i tekst powiększony do 130 %): bez talerzyka ze strzałką - całe miejsce dla etykiety,
     żadne słowo („poprawiony", „podsumowania") nie łamie się w środku. */
  .bf-actions__next { justify-content: center; text-align: center; padding-inline: 1rem; }
  .bf-actions__next .btn__disc { display: none; }
}

/* ---------- 7. Podsumowanie odpowiedzi ---------- */
.bf-review { display: grid; gap: 1.25rem; }
.bf-review__course { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.bf-review__course:first-child { border-top: 0; padding-top: 0; }
.bf-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.bf-review__title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.bf-review__edit, .bf-review__fix {
  display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; font-size: .9375rem; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}
.bf-review__fix { min-height: 0; margin-left: .25rem; }
.bf-review__list { display: grid; }
.bf-review__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .125rem .75rem; padding: .625rem 0; border-bottom: 1px solid var(--line); }
.bf-review__row:last-child { border-bottom: 0; }
.bf-review__row dt { font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.bf-review__row dd { margin: 0; font-size: .96875rem; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.bf-review__row.is-missing dd { color: var(--danger); }
.bf-review__missing { display: inline-flex; align-items: center; gap: .35rem; font-size: .9375rem; }
.bf-review__missing .icon { width: 1rem; height: 1rem; }
.bf-review__empty { font-size: var(--fs-small); color: var(--muted); }
@container bfsheet (min-width: 36rem) {
  .bf-review__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; }
}
.bf-step__final { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }

/* ---------- 8. Po wysłaniu / tylko do odczytu ---------- */
.bf-wrap--summary { padding-bottom: var(--sec-y); }
.bf-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.bf-summary__side:empty { display: none; }
.bf-summary__title { margin-bottom: 1.5rem; font-size: var(--fs-h2); font-weight: 500; }
.bf-summary .bf-review { container-type: inline-size; container-name: bfsheet; }
@media (min-width: 1024px) {
  .bf-summary { grid-template-columns: 19rem minmax(0, 1fr); }
  .bf-summary__side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .bf-summary:has(.bf-summary__side:empty) { grid-template-columns: minmax(0, 46rem); }
}
.bf-sign, .bf-doc__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.bf-sign__core { display: grid; gap: .75rem; justify-items: start; padding: 1.75rem 1.5rem 1.5rem; }
.bf-sign__when { font-size: var(--fs-small); color: var(--muted); }
.bf-sign__actions { display: grid; gap: .875rem; justify-items: start; margin-top: .5rem; }

/* ---------- 9. Link wygasły / nieprawidłowy / dokument ---------- */
.bf-gone { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--sec-y); }
.bf-gone__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .bf-gone__inner { grid-template-columns: minmax(0, 46rem); } }
.bf-gone__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; justify-items: start; }
.bf-gone__title { max-width: 14ch; }
.bf-gone__form { margin-top: .5rem; }
.bf-gone__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.bf-gone__contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; font-size: .9375rem; color: var(--muted); margin-top: .5rem; }
.bf-gone__contact a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.bf-gone .alert { width: 100%; max-width: 38rem; }
.bf-doc__card { width: 100%; max-width: 40rem; margin-top: .5rem; }
.bf-doc__core { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem 1.25rem; padding: 1.25rem; }
.bf-doc__core .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) { .bf-doc__core { grid-template-columns: auto minmax(0, 1fr) auto; } .bf-doc__core .btn { grid-column: auto; } }
.bf-doc__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--brand); }
.bf-doc__icon .icon { width: 1.6rem; height: 1.6rem; }
.bf-doc__meta { min-width: 0; display: grid; gap: .15rem; }
.bf-doc__name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.bf-doc__sub { font-size: var(--fs-small); color: var(--muted); }
.bf-gone__note { max-width: 40rem; }

/* ---------- 10. Skrócony brief w formularzu rezerwacji (P3) ---------- */
.bf-short { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.bf-short .bf-opts--grid .bf-opt { min-height: 2.75rem; padding: .625rem .875rem; font-size: .9375rem; }

/* ---------- 11. Zamówienie poradni internetowej ---------- */
.bf-order { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); }
.bf-order__section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-top: clamp(1.75rem, 3vw, 2.25rem); border-top: 1px solid var(--line); border-left: 0; border-right: 0; border-bottom: 0; margin: 0; padding-inline: 0; padding-bottom: 0; min-width: 0; }
.bf-order__section:first-of-type { border-top: 0; padding-top: 0; }
.bf-order__legend { float: left; width: 100%; padding: 0; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.bf-order__legend + * { clear: both; }
.bf-order__lead { color: var(--muted); max-width: 40em; text-wrap: pretty; }
.bf-order__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 640px) {
  .bf-order__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-order__grid--addr { grid-template-columns: 10rem minmax(0, 1fr); }
  .bf-order__grid .span-all { grid-column: 1 / -1; }
}
.bf-order__grid .bf-input { max-width: none; }
.bf-pkgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 640px) { .bf-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bf-pkg {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: .5rem 1rem;
  padding: 1.25rem 1.375rem; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--white); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.bf-pkg__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bf-pkg__name { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.bf-pkg__price { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.bf-pkg__meta { grid-column: 1 / -1; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.bf-pkg__desc { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.bf-pkg__mark {
  position: absolute; right: 1.125rem; bottom: 1.125rem; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1.5px solid var(--line-control); background: var(--white); color: transparent;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.bf-pkg__mark .icon { width: .85rem; height: .85rem; }
.bf-pkg:has(.bf-pkg__input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.bf-pkg:has(.bf-pkg__input:checked) .bf-pkg__mark { background: var(--brand); border-color: var(--brand); color: var(--porcelain); }
.bf-pkg:has(.bf-pkg__input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bf-pkg:active { transform: scale(.99); }
.bf-q.is-invalid .bf-pkg { border-color: rgba(163, 51, 43, .45); }
.bf-order__total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem;
  padding: 1.125rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.bf-order__total-label { font-weight: 600; color: var(--ink); }
.bf-order__total-sum { font-size: 1.5rem; font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.bf-order__total-sum span[hidden] { display: none; }
.bf-order__total-none { font-family: var(--font-text); font-size: var(--fs-small); color: var(--muted); }
.bf-order__pay { flex-basis: 100%; font-size: var(--fs-small); color: var(--muted); text-wrap: pretty; }
.bf-order__consents { display: grid; gap: .75rem; }
.bf-order__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
/* Przycisk wysyłki mieści się w kolumnie (prośba P2b): napis się zawija, na telefonie pełna szerokość z tarczą przy prawej krawędzi. */
.bf-order__actions .btn { max-width: 100%; white-space: normal; text-align: left; padding-block: .4rem; }
.bf-order__actions .btn__label { min-width: 0; text-wrap: balance; }
@media (max-width: 479px) {
  .bf-order__actions .btn { width: 100%; justify-content: space-between; padding-left: 1.25rem; padding-right: calc((var(--btn-h) - var(--disc)) / 2 - 1px); font-size: 1rem; }
}
.bf-order__message[hidden] { display: none; }
.bf-order-success { display: grid; gap: 1.25rem; justify-items: start; }
.bf-order-success[hidden] { display: none; }
.bf-order-success__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.bf-order-success__title em { font-style: normal; }
.bf-order-success__title:focus { outline: none; }
.bf-order-success__num { font-weight: 600; color: var(--ink); }
.bf-order-success__num[hidden], .bf-order-success__text[hidden] { display: none; }
.bf-order-success__text { display: grid; gap: .5rem; }
.bf-order-success__email { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.bf-order-success__hint { font-size: var(--fs-small); color: var(--muted); }
.bf-order-success__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* ---------- 12. Najechanie - tylko precyzyjny wskaźnik ---------- */
@media (hover: hover) and (pointer: fine) {
  .bf-course:not(.is-current):not(.is-locked) .bf-course__btn:hover { color: var(--brand); }
  .bf-course:not(.is-current):not(.is-locked):not(.is-done) .bf-course__btn:hover .bf-course__plate { color: var(--brand); }
  .bf-opt:hover { border-color: rgba(39, 70, 41, .45); }
  .bf-scale__item:hover .bf-scale__plate { border-color: var(--brand); color: var(--brand); }
  .bf-scale__item:hover:has(.bf-scale__input:checked) .bf-scale__plate { color: var(--porcelain); }
  .bf-matrix__cell:hover { border-color: rgba(39, 70, 41, .45); }
  .bf-matrix__cell:hover .bf-matrix__dot { border-color: var(--brand); }
  .bf-file__remove:hover { background: var(--danger-soft); color: var(--danger); }
  .bf-review__edit:hover, .bf-review__fix:hover { color: var(--brand); text-decoration-color: currentColor; }
  .bf-pkg:hover { border-color: rgba(39, 70, 41, .45); }
  .bf-gone__contact a:hover { text-decoration-color: currentColor; color: var(--brand); }
}
@container bfsheet (min-width: 44rem) {
  @media (hover: hover) and (pointer: fine) {
    .bf-matrix__cell:hover { background: transparent; border-color: transparent; }
  }
}

/* ---------- 13. Tryby dostępności ---------- */
html.a11y-contrast .bf-opt, html.a11y-contrast .bf-matrix__cell, html.a11y-contrast .bf-file, html.a11y-contrast .bf-pkg, html.a11y-contrast .bf-scale__plate { border-color: var(--line-control); }
html.a11y-contrast .bf-course { border-color: var(--line-control); }
html.a11y-links .bf-review__edit, html.a11y-links .bf-review__fix { text-decoration-color: currentColor; }

/* ---------- 14. Druk (podsumowanie wywiadu) ---------- */
@media print {
  .bf-courses, .bf-actions, .bf-notices, .bf-sign__actions, .bf-hero__until { display: none !important; }
  .bf-sheet, .bf-sheet__core { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
  .bf-review__row { break-inside: avoid; }
}