/* ---------- Pomoc i kontakt (/pomoc, /pomoc/status) ---------- */
/* Zrodlo: „Vistitio Pomoc.dc.html" (handoff 23).
   Kolejnosc sekcji z makiety: szukanie, najczestsze problemy z przewodnikiem, „jak dziala",
   pytania, a na koncu formularz do czlowieka z kolumna kontaktow obok. */

.pomoc {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-bottom: var(--v-s-8);
}

/* --- naglowek --- */

/* Naglowek to juz tylko tekst — akcje przeniosly sie do gornego rzedu. */
.pomoc__glowa { display: flex; flex-direction: column; gap: var(--v-s-3); }

.pomoc__gora .pomoc__glowa-akcje { margin-left: auto; order: -1; }

.pomoc__gora .pomoc__pasek { flex: 1 1 100%; min-width: 0; }

.pomoc__glowa-tekst {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  min-width: 0;
}

.pomoc__tytul {
  margin: 0;
  max-width: 30ch; /* makieta: naglowek lamie sie po dwoch linijkach */
  font: 600 38px/44px var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-display);
  color: var(--v-primary);
  text-wrap: pretty;
}

.pomoc__lead {
  margin: 0;
  max-width: 62ch; /* makieta */
  font-size: 15px;
  line-height: 24px;
  color: var(--v-n-700);
}

.pomoc__akapit {
  margin: 0;
  max-width: min(100%, 920px);
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-600);
}



.pomoc__wroc {
  align-self: flex-start;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: none;
}

.pomoc__wroc:hover { color: var(--v-primary); }

/* --- szukanie --- */

.pomoc__szukaj {
  display: flex;
  gap: var(--v-s-3);
  align-items: flex-start;
}

.pomoc__szukaj .v-field { flex: 1 1 auto; min-width: 0; }

/* Przycisk staje w jednej linii z polem, a nie z jego etykieta. */
.pomoc__szukaj .v-btn { margin-top: 26px; }

@media (max-width: 700px) {
  .pomoc__szukaj { flex-direction: column; }
  .pomoc__szukaj .v-btn { margin-top: 0; }
}

/* --- sekcje --- */

.pomoc__sekcja {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  min-width: 0;
}

.pomoc__naglowek {
  margin: 0;
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.pomoc__naglowek-rzad {
  display: flex;
  gap: var(--v-s-3);
  align-items: baseline;
  justify-content: space-between;
}

.pomoc__licznik {
  font: 600 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

.pomoc__nadtytul {
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-600);
}

.pomoc__tresc {
  margin: 0;
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

/* Odpowiedzi przychodza z panelu jako tekst z akapitami, wiec tylko TU zachowujemy
   lamanie z bazy. Gdziekolwiek indziej `pre-line` lamie zdanie tam, gdzie akurat
   skonczyla sie linia w szablonie. */
.pomoc__pytanie .pomoc__tresc { white-space: pre-line; }

/* --- najczestsze problemy --- */

.pomoc__kafle {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--v-s-3);
}

.pomoc__kafel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--v-s-4);
  border: 1.5px solid var(--v-n-200); /* makieta */
  border-radius: var(--v-r-card);
  background: var(--v-n-0);
  text-decoration: none;
}

.pomoc__kafel:hover { border-color: var(--v-primary); }

.pomoc__kafel--wybrany {
  background: var(--v-primary);
  border-color: var(--v-primary);
}

.pomoc__kafel-nazwa {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__kafel-podpis {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-700);
}

.pomoc__kafel--wybrany .pomoc__kafel-nazwa { color: var(--v-n-0); }
.pomoc__kafel--wybrany .pomoc__kafel-podpis { color: var(--v-n-200); }

/* --- przewodnik --- */

.pomoc__przewodnik {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
  align-items: flex-start;
}

.pomoc__plakietka {
  font: 600 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-secondary-text);
}

.pomoc__przewodnik-tytul {
  margin: 0;
  font: 600 26px/1.2 var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.pomoc__przewodnik-wstep {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--v-n-700);
}

.pomoc__kolumny {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--v-s-6);
  width: 100%;
  align-items: start;
}

@media (max-width: 900px) {
  .pomoc__kolumny { grid-template-columns: minmax(0, 1fr); gap: var(--v-s-5); }
}

.pomoc__kroki,
.pomoc__fakty {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  min-width: 0;
}

.pomoc__krok {
  display: flex;
  gap: var(--v-s-3);
  align-items: flex-start;
}

.pomoc__krok-nr {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v-n-100);
  font: 600 var(--v-t-note) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__krok-tytul {
  display: block;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__krok-opis {
  margin: 2px 0 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.pomoc__kontakt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--v-s-3) 0;
  border-top: 1px solid var(--v-n-100);
}

/* Fakt w przewodniku to WIERSZ: nazwa po lewej, wartosc po prawej i wytluszczona.
   Do 28.09 stalo jedno pod drugim, przez co tabela terminow czytala sie jak lista
   akapitow, a nie jak tabela — a to jest miejsce, w ktorym czyta sie po przekatnej. */
.pomoc__fakt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v-s-4);
  padding: var(--v-s-3) 0;
  border-top: 1px solid var(--v-n-100);
}

.pomoc__fakt-klucz {
  font: 400 13px/1.45 var(--v-font-body);
  color: var(--v-n-600);
}

.pomoc__fakt-wartosc {
  flex: none;
  max-width: 55%;
  text-align: right;
  font: 600 13px/1.45 var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__kontakt .pomoc__fakt-klucz {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

/* Obietnica na koncu przewodnika: ZIELONY blok (makieta). Ochra znaczy u nas „uwaga,
   to kosztuje albo zaraz minie"; tu zdanie mowi „nie martw sie", wiec kolor jest zielony. */
.pomoc__obietnica {
  margin: var(--v-s-3) 0 0;
  width: 100%;
  background: var(--v-success-soft);
  border-radius: 12px; /* makieta */
  padding: 12px 16px; /* makieta */
  font-size: 14px;
  line-height: 21px;
  color: var(--v-success-text);
}

/* Wyjscie do czlowieka: granatowy przycisk na pelna szerokosc prawej kolumny (makieta). */
.pomoc__do-czlowieka { width: 100%; margin-top: var(--v-s-3); }

/* --- jak dziala Vistitio --- */

.pomoc__jak {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--v-s-3);
}

.pomoc__jak-karta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid var(--v-n-200); /* makieta */
}

.pomoc__jak-karta--zielony { border-top-color: var(--v-success); }
.pomoc__jak-karta--ochra { border-top-color: var(--v-secondary); }
.pomoc__jak-karta--niebieski { border-top-color: var(--v-info); }
.pomoc__jak-karta--zloty { border-top-color: var(--v-warning); }

.pomoc__jak-liczba {
  font: 600 var(--v-t-h2) var(--v-font-display);
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
  font-variant-numeric: tabular-nums;
}

.pomoc__jak-tytul {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__jak-opis {
  margin: 0;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.pomoc__o-serwisie {
  display: grid;
  /* Dwie kolumny, nie „tyle, ile wejdzie”: makieta ma po lewej zdanie o nas, po prawej
     wiersze faktów. `auto-fit` przy kontenerze 1240 px robił z tego trzy kolumny. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); /* makieta */
  gap: var(--v-s-8);
  /* Blok zaprojektowany jako CIEMNY: stoi na nim ochrowy nadtytul i bialy tekst.
     Dlatego granat staly, a nie `--v-primary` — ten w ciemnym motywie zamienia
     sie w jasny atrament i ochra na nim spadala do 1,8:1 (zmierzone). */
  background: var(--v-granat-staly);
  border-radius: 20px; /* makieta */
  padding: var(--v-s-8); /* makieta */
}

.pomoc__o-tresc { display: flex; flex-direction: column; gap: var(--v-s-3); min-width: 0; }

.pomoc__o-lead {
  margin: 0;
  font: 600 22px/30px var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-h3);
  /* Biel na granacie stalym — nie `--v-n-0`, bo ten w ciemnym motywie staje sie
     powierzchnia karty i tekst zniknalby w tle (1,1:1, zmierzone). */
  color: #FFFFFF; /* TODO token — biel na granacie */
}

.pomoc__o-akapit {
  margin: 0;
  font: 400 14px/22px var(--v-font-body);
  color: var(--v-na-granacie-cichy);
}

.pomoc__o-wiersze { display: flex; flex-direction: column; min-width: 0; }

.pomoc__o-wiersz {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--v-s-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14); /* makieta */
}

.pomoc__o-wiersz:last-child { border-bottom: 0; }

.pomoc__o-klucz {
  font: 700 11px/1.3 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-secondary);
}

.pomoc__o-wartosc { font: 400 14px/21px var(--v-font-body); color: var(--v-na-granacie); }

.pomoc__nadtytul--ciemny { color: var(--v-secondary); }

/* --- pytania --- */

/* Wszystkie pytania w jednej karcie, rozdzielone kreska (makieta). Znak + / − po prawej
   rysuje CSS z atrybutu `open`, wiec dziala bez JavaScriptu. */
.pomoc__pytania { padding: 0; }

.pomoc__pytanie { border-bottom: 1px solid var(--v-n-100); }
.pomoc__pytanie:last-child { border-bottom: 0; }

.pomoc__pytanie-guzik {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: var(--v-s-5) 52px var(--v-s-5) var(--v-s-6); /* makieta */
}

.pomoc__pytanie-guzik::-webkit-details-marker { display: none; }

.pomoc__pytanie-tytul {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

/* Znak stoi bezwzglednie, bo <summary> NIE MOZE dostac wlasnego `display` — z nim
   przestaje chowac zawartosc <details> (gotcha z 19.09, menu konta w naglowku). */
.pomoc__pytanie-znak {
  position: absolute;
  right: var(--v-s-6);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  text-align: center;
  font: 400 18px/1 var(--v-font-body);
  color: var(--v-n-500);
}

.pomoc__pytanie-znak::before { content: '+'; }
.pomoc__pytanie[open] .pomoc__pytanie-znak::before { content: '\2212'; }

.pomoc__pytanie > .pomoc__tresc {
  margin: 0;
  padding: 0 var(--v-s-6) var(--v-s-5);
}

.pomoc__pytanie .pomoc__tresc { white-space: pre-line; }

/* --- napisz do nas --- */

.pomoc__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: var(--v-s-6);
  align-items: start;
}

@media (max-width: 900px) {
  .pomoc__uklad { grid-template-columns: minmax(0, 1fr); }
}

.pomoc__bok {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

.pomoc__nowa,
.pomoc__moje,
.pomoc__kontakty,
.pomoc__zespol,
.pomoc__obietnice,
.pomoc__powiadomienia {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-4);
}

.pomoc__kontakt:first-of-type,
.pomoc__fakt:first-of-type { border-top: 0; }

.pomoc__kontakt-adres {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  word-break: break-word;
}

.pomoc__kontakt-nota {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

.pomoc__osoba {
  display: flex;
  gap: var(--v-s-3);
  align-items: center;
}

.pomoc__osoba-imie {
  display: block;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__osoba-rola {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
}

/* --- status serwisu --- */

.pomoc__status {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  text-decoration: none;
}

.pomoc__status-etykieta {
  display: flex;
  gap: var(--v-s-2);
  align-items: center;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__status-kropka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v-success);
}

.pomoc__status-kropka--uwaga { background: var(--v-warning); }

.pomoc__status-wiecej {
  font: 600 var(--v-t-note) var(--v-font-body);
  color: var(--v-secondary-text);
}

.pomoc__stan {
  display: flex;
  gap: var(--v-s-4);
  align-items: flex-start;
  background: var(--v-success-soft);
}

.pomoc__stan--uwaga { background: var(--v-warning-soft); }

.pomoc__stan-znak {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v-n-0);
  font: 600 18px/1 var(--v-font-display);
  color: var(--v-success);
}

.pomoc__stan--uwaga .pomoc__stan-znak { color: var(--v-warning); }

.pomoc__stan-etykieta {
  display: block;
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.pomoc__stan-nota {
  margin: 4px 0 0;
  font: 400 var(--v-t-body) var(--v-font-body);
  color: var(--v-n-700);
}

.pomoc__czesc {
  display: flex;
  gap: var(--v-s-4);
  align-items: center;
  justify-content: space-between;
}

.pomoc__czesc-nazwa {
  display: block;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__awaria {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.pomoc__awaria-glowa {
  display: flex;
  gap: var(--v-s-3);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pomoc__awaria-tytul {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.pomoc__awaria-kiedy {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* ---------------------------------------------------------------------------
   Poprawki 1:1 z plansza „Vistitio Pomoc” (28.09, uwaga Huberta „ma byc jak w projekcie”).
   --------------------------------------------------------------------------- */

/* Cala strona pomocy stoi na szarym tle, karty sa biale — tak rysuje to plansza,
   a u nas do 28.09 wszystko bylo biale i karty gubily krawedzie. */
/* Tlo daje POWLOKA, nie <body>: powloka ma wlasne `background` z layoutu, wiec regula
   na <body> jest przez nia zasloniona (to samo, co gotcha „klasa z layoutu”). */
.powloka:has(.pomoc) { background: var(--v-n-50); }

.pomoc { padding-top: var(--v-s-2); }

/* Pasek tematow pod naglowkiem. Przewija sie w bok na waskim ekranie, zamiast lamac
   na trzy linijki — to nawigacja, nie tresc. */
.pomoc__pasek {
  display: flex;
  gap: var(--v-s-2);
  overflow-x: auto;
  padding-bottom: var(--v-s-1);
  scrollbar-width: none;
}

.pomoc__pasek::-webkit-scrollbar { display: none; }

.pomoc__pasek-poz {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 38px; /* makieta */
  padding: 0 var(--v-s-4);
  border: 1.5px solid var(--v-n-200);
  border-radius: 10px; /* makieta */
  background: var(--v-n-0);
  font: 600 13px/1 var(--v-font-body);
  color: var(--v-n-700);
  text-decoration: none;
  white-space: nowrap;
}

.pomoc__pasek-poz:hover { border-color: var(--v-primary); }

.pomoc__pasek-poz--wybrana {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
}

.pomoc__szukaj-pole { position: relative; flex: 1 1 420px; min-width: 0; }

.pomoc__szukaj-pole .v-field { margin: 0; }
.pomoc__szukaj-pole .v-field__wrap { margin-top: 0; }
.pomoc__szukaj-pole .v-input { height: 56px; padding-left: 46px; border-radius: 14px; } /* makieta */

.pomoc__szukaj-ikona {
  position: absolute;
  left: var(--v-s-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--v-n-500);
  pointer-events: none;
  z-index: 1;
}

.pomoc__szukaj .v-btn { margin-top: 0; height: 56px; }

.pomoc__szukaj-nota {
  flex: 1 0 100%;
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Karta statusu w kolumnie bocznej jest w makiecie ZIELONA, gdy wszystko dziala —
   kolor mowi to samo co napis, zanim ktos zdazy przeczytac. */
.pomoc__status { background: var(--v-success-soft); border-color: transparent; }
.pomoc__status .pomoc__nadtytul { color: var(--v-success-text); }
.pomoc__status .pomoc__status-etykieta { color: var(--v-success-text); }

@media (max-width: 760px) {
  .pomoc__tytul { font-size: 26px; line-height: 32px; max-width: none; }
  .pomoc__o-serwisie { grid-template-columns: 1fr; padding: var(--v-s-5); gap: var(--v-s-5); }
}

/* ---------------------------------------------------------------------------
   Formularz „Napisz do nas”: odstepy (uwaga Huberta 28.09 — „popracuj nad odstepami
   tych elementow po lewej stronie”).

   Formularz ustawien ma 16 px miedzy polami, bo tam pola stoja w gestej karcie ustawien.
   Tutaj kazde pole jest osobnym pytaniem do czlowieka, ktory wlasnie ma problem — wiec
   oddycha: 24 px miedzy polami, wiecej pod grupa chipow (to jest wybor, nie pole) i pod
   przyciskiem, zeby pasek „nie prosimy o haslo” nie sklejal sie z akcja.
   --------------------------------------------------------------------------- */

.pomoc__nowa .ustaw__form { gap: var(--v-s-6); }

.pomoc__nowa .ustaw__form .v-radio-chips { margin-bottom: var(--v-s-2); }

.pomoc__nowa .ustaw__form .v-btn { margin-top: var(--v-s-2); }

/* Napis przycisku wysylki zalezy od szerokosci, bo tak rysuja go dwie makiety:
   web — „Wyslij — odpowiadamy w 24 h roboczych”, telefon — „Wyslij zgloszenie”
   (52 px, pelna szerokosc). Dlugi na 390 px lamal sie na dwie linie. */
.pomoc__wyslij-krotko { display: none; }

@media (max-width: 759px) {
  .pomoc__wyslij-dlugo { display: none; }
  .pomoc__wyslij-krotko { display: inline; }
  .pomoc__nowa .ustaw__form .v-btn { width: 100%; height: 52px; /* makieta mobile: pelna szerokosc, 52 px */ }
}

.pomoc__nowa { gap: var(--v-s-5); }

.pomoc__nowa .v-safety { margin-top: var(--v-s-5); }

/* Podpis pod polem i licznik znakow maja swoj oddech od nastepnego pytania. */
.pomoc__nowa .v-field__hint { margin-top: 6px; }

/* ---------------------------------------------------------------------------
   PASEK POMOCY — 1:1 z plansza „Vistitio Pomoc" (pomiar na 1333 px):
   szukajka, potem „Pomoc" (szara pastylka), „Status serwisu" z kropka, „Regulamin"
   i granatowe „Napisz do nas". Kazda pozycja 44 px, w jednej linii z polem.
   --------------------------------------------------------------------------- */

.pomoc__bar {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  flex-wrap: wrap;
}

.pomoc__szukaj {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  flex: 1 1 520px;
  min-width: 0;
}

.pomoc__szukaj-pole { position: relative; flex: 1 1 auto; min-width: 0; }

.pomoc__szukaj-pole .v-field { margin: 0; }
.pomoc__szukaj-pole .v-field__wrap { margin-top: 0; }

/* Pole 44 px, nie 56 — tyle ma w planszy, razem z zakladkami obok. */
.pomoc__szukaj-pole .v-input {
  height: 44px; /* makieta */
  padding-left: 44px; /* lupa 20 px + dwa odstepy */
  border-radius: 12px; /* makieta */
}

.pomoc__szukaj-ikona {
  position: absolute;
  left: var(--v-s-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--v-n-500);
  pointer-events: none;
  z-index: 1;
}

.pomoc__szukaj-guzik { height: 44px; flex: none; }

.pomoc__zakladki {
  display: flex;
  align-items: center;
  gap: var(--v-s-1);
  flex: none;
}

.pomoc__zakladka {
  display: inline-flex;
  align-items: center;
  gap: var(--v-s-2);
  height: 44px; /* makieta */
  padding: 0 var(--v-s-4);
  border-radius: 12px; /* makieta */
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  text-decoration: none;
  white-space: nowrap;
}

a.pomoc__zakladka:hover { background: var(--v-n-50); }

/* Strona, na ktorej jestesmy: szara pastylka (#E9EDF2 z planszy). */
.pomoc__zakladka--teraz { background: var(--v-n-100); }

.pomoc__kropka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v-success);
  flex: none;
}

.pomoc__kropka--uwaga { background: var(--v-warning); }

.pomoc__zakladka-cta { height: 44px; flex: none; }

/* Nota pod leadem — w planszy stoi pod akapitem, nie przy szukajce. */
.pomoc__szukaj-nota {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

@media (max-width: 900px) {
  /* Na waskim ekranie szukajka bierze cala szerokosc, a zakladki schodza pod nia
     i przewijaja sie w bok razem z tematami — zamiast lamac sie na trzy linie. */
  .pomoc__szukaj { flex: 1 1 100%; }

  .pomoc__zakladki {
    flex: 1 1 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pomoc__zakladki::-webkit-scrollbar { display: none; }
}

/* Jak rozstrzygamy spory (pozycje 47 i 48 rejestru zabezpieczeń). Cztery sytuacje
   w jednej karcie, rozdzielone kreską — ta sama forma co pytania niżej, bo to jest
   lista reguł do przeczytania po kolei, nie cztery osobne rzeczy. */
.pomoc__wstep {
  margin: 0 0 var(--v-s-4);
  font: 400 15px/1.55 var(--v-font-body);
  color: var(--v-n-700);
  /* Ta sama miara co `.pomoc__akapit` wyżej. 720 px (token `--v-w-text`) zostawiało
     w kolumnie 1192 px pusty pas na 470 px i zdanie łamało się w połowie przy wolnym
     miejscu obok — ta sama usterka co w ustawieniach 25.09. */
  max-width: min(100%, 920px);
}

.pomoc__spory,
.pomoc__granice { display: flex; flex-direction: column; gap: 0; }
.pomoc__granice { margin-top: var(--v-s-4); gap: var(--v-s-4); }

.pomoc__spor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
  gap: var(--v-s-1) var(--v-s-4);
  padding: var(--v-s-4) 0;
  border-bottom: 1px solid var(--v-n-200);
}

.pomoc__spor:last-child { border-bottom: 0; padding-bottom: 0; }
.pomoc__spor:first-child { padding-top: 0; }

.pomoc__spor-sytuacja { font: 700 15px/1.4 var(--v-font-body); color: var(--v-n-900); }

.pomoc__spor-kto {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: start;
  font: 700 12px/1.4 var(--v-font-body);
  color: var(--v-primary);
  text-align: right;
}

.pomoc__spor-opis { grid-column: 1 / -1; font: 400 14px/1.55 var(--v-font-body); color: var(--v-n-700); }

.pomoc__granice-tytul { font: 700 15px/1.3 var(--v-font-body); color: var(--v-n-900); }
.pomoc__granica { display: flex; flex-direction: column; gap: var(--v-s-1); }
.pomoc__granica-tytul { font: 700 13px/1.4 var(--v-font-body); color: var(--v-n-900); }
.pomoc__granica-tresc { font: 400 14px/1.55 var(--v-font-body); color: var(--v-n-700); }

@media (max-width: 760px) {
  .pomoc__spor { grid-template-columns: minmax(0, 1fr); }
  .pomoc__spor-kto { grid-row: auto; grid-column: 1; justify-self: start; text-align: left; }
}


/* =====================================================================
   HANDOFF 28 — przebudowany pasek pomocy.
   Dopisane PO regułach bazowych, bo nadpisują wysokości i tła z handoffu 23.
   Rozmiary 13,5 px / 13 px / 11,5 px są wprost z makiety i nie mają tokenu.
   ===================================================================== */

/* Szukajka: 46 px zamiast 44, węższa, z miejscem na krzyżyk po prawej. */
.pomoc__szukaj-pole .v-input {
  height: 46px;
  border-radius: 12px;
  max-width: 560px;
}

.pomoc__szukaj-pole--x .v-input { padding-right: 44px; }

/* Krzyżyk czyszczący W POLU. Hover: --v-n-100 zamiast makietowego #E4E9F0,
   bo to najbliższy token, a różnica jest o jeden krok jasności. */
.pomoc__szukaj-x {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: var(--v-n-600);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  z-index: 2;
}

.pomoc__szukaj-x:hover,
.pomoc__szukaj-x:focus-visible {
  background: var(--v-n-100);
  color: var(--v-primary);
}

/* Pomoc + Status jako jeden przełącznik w szarej obudowie. */
.pomoc__zakladki { gap: 14px; }

.pomoc__segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--v-s-1);
  border-radius: 12px;
  background: var(--v-n-50);
  flex: none;
}

.pomoc__segment .pomoc__zakladka {
  height: 38px;
  padding: 0 15px; /* makieta */
  border-radius: 9px;
  background: transparent;
  color: var(--v-n-600);
  font: 700 13.5px/1 var(--v-font-body);
  box-shadow: none;
}

.pomoc__segment a.pomoc__zakladka:hover { background: transparent; color: var(--v-primary); }

.pomoc__segment .pomoc__zakladka--teraz {
  background: var(--v-n-0);
  color: var(--v-primary);
  box-shadow: 0 1px 3px rgba(20, 28, 46, .14);
}

/* Regulamin: zwykły odnośnik, nie pastylka. */
.pomoc__link {
  font: 600 13.5px/1 var(--v-font-body);
  color: var(--v-n-700);
  text-decoration: none;
  flex: none;
}

.pomoc__link:hover { color: var(--v-primary); text-decoration: underline; }

/* „Napisz do nas” równa się z szukajką. */
.pomoc__zakladka-cta { height: 46px; border-radius: 12px; }

/* „Czytasz o” — pasek tematów nad przewodnikiem. */
.pomoc__czytasz {
  display: flex;
  gap: var(--v-s-3);
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--v-s-4);
  border-bottom: 1px solid var(--v-n-100);
}

.pomoc__czytasz-etykieta {
  font: 700 11.5px/1.35 var(--v-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v-n-600);
  flex: none;
}

.pomoc__czytasz-chipy {
  display: flex;
  gap: var(--v-s-2);
  flex-wrap: wrap;
  min-width: 0;
}

.pomoc__czytasz .pomoc__pasek-poz {
  height: 34px;
  padding: 0 13px; /* makieta */
  border-width: 1px;
  border-radius: 9px;
}

@media (max-width: 760px) {
  /* Na telefonie chipy znów jadą w bok, bo w dwóch rzędach zjadałyby pół ekranu.
     Stała szerokość w rzędzie wypycha stronę, dlatego min-width: 0 wyżej. */
  .pomoc__czytasz-chipy {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1 100%;
  }

  .pomoc__czytasz-chipy::-webkit-scrollbar { display: none; }
  .pomoc__czytasz .pomoc__pasek-poz { flex: none; }
}


/* WLASNY NAGLOWEK POMOCY (handoff 31, uwaga Huberta 29.09). Zastepuje pasek serwisu
   na /pomoc i /pomoc/status. Wymiary z planszy: pas 1240, wysciolka 12/24, gap 16. */
.v-help-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--v-n-0);
  border-bottom: 1px solid var(--v-n-100);
}

.v-help-header__pas {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--v-s-3) var(--v-s-6);
  display: flex;
  align-items: center;
  gap: var(--v-s-4);
  flex-wrap: wrap;
}

.v-help-header__logo {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  flex-shrink: 0;
  text-decoration: none;
  color: var(--v-primary);
}

/* Szukajka rozpycha sie miedzy logo a zakladkami, tak jak w planszy. */
.v-help-header .pomoc__szukaj { flex: 1 1 240px; min-width: 0; max-width: 560px; }

@media (max-width: 760px) {
  /* Na telefonie szukajka schodzi pod logo, inaczej wszystkie trzy elementy
     nie miesza sie w rzedzie i pas urasta do trzech linii. */
  .v-help-header__pas { gap: var(--v-s-3); }
  .v-help-header .pomoc__szukaj { flex: 1 1 100%; max-width: none; order: 3; }
  .v-help-header .pomoc__zakladki { margin-left: auto; }
}


/* Pasek Pomocy ma miec DOKLADNIE te sama wysokosc co glowny naglowek: 72 px
   (uwaga Huberta 29.09 — „niech bedzie na taka sama szerokosc jak glowny”;
   szerokosc byla zgodna co do piksela, rozjechala sie wysokosc).
   Winowajca: `x-input` trzyma 6 px nad polem na etykiete, ktorej tu nie ma. */
.v-help-header .pomoc__szukaj .v-field,
.v-help-header .pomoc__szukaj .v-field__wrap { margin-top: 0; }

.v-help-header .pomoc__szukaj { margin: 0; }

/* Pas ma 72 px razem z kreska u dolu, dokladnie jak glowny naglowek:
   12 + 46 + 13 + 1 = 72. Brakujacy piksel dokladamy WYSCIOLKA, nie `box-sizing`
   ani `min-height` — `content-box` wypchnal pas z 1240 na 1288 (zlapane pomiarem). */
.v-help-header__pas { padding-bottom: 13px; } /* makieta */


/* TYPOGRAFIA POMOCY 1:1 Z PLANSZA (uwaga Huberta 29.09: „kolory fontow sa inne”).
   Zmierzone w „Vistitio Pomoc.dc.html” z handoffu 31, znacznik po znaczniku.
   Dopisane PO regulach bazowych, bo je nadpisuja. */

/* Nadtytul: byl szary 11/600, a w planszy jest OCHROWY 12/700.
   --v-secondary-text to ochra do TEKSTU (#8A5F12) — sama --v-secondary nie ma
   kontrastu na bieli (regula z design_handoff_vistitio/CLAUDE.md). */
.pomoc .pomoc__nadtytul {
  font: 700 12px/1.35 var(--v-font-body);
  letter-spacing: .08em; /* makieta */
  text-transform: uppercase;
  color: var(--v-secondary-text);
}

/* Nadtytul na ciemnym bloku „O serwisie” zostaje jasny — tam ochra na granacie
   czyta sie inaczej i plansza ma tam wlasny kolor. */
.pomoc .pomoc__nadtytul--ciemny { color: var(--v-secondary); }

/* H1: 38 -> 42 px, interlinia i swiatlo z planszy. */
.pomoc .pomoc__tytul {
  font: 600 42px/1.08 var(--v-font-display);
  letter-spacing: -.04em; /* makieta */
  max-width: 780px; /* makieta */
}

/* Lead: 15 -> 17 px, interlinia 1.6. */
.pomoc .pomoc__lead {
  font: 400 17px/1.6 var(--v-font-body);
  color: var(--v-n-700);
  max-width: 700px; /* makieta */
}

/* Naglowki sekcji: 18 -> 26 px. To byla najwieksza roznica na tej stronie. */
.pomoc .pomoc__naglowek {
  font: 600 26px/1.2 var(--v-font-display);
  letter-spacing: -.03em; /* makieta */
}

@media (max-width: 760px) {
  /* Na telefonie 42 px lamie tytul na cztery linijki — plansza mobilna ma go mniejszy. */
  .pomoc .pomoc__tytul { font: 600 30px/1.12 var(--v-font-display); }
  .pomoc .pomoc__naglowek { font: 600 22px/1.2 var(--v-font-display); }
}


/* Nawigacja Pomocy konczyla sie 84 px przed prawa krawedzia paska (uwaga Huberta
   29.09, zmierzone przy 1440/1675/1920/2560 — kontenery byly zgodne co do piksela,
   rozjezdzal sie OSTATNI element). Powod: `.pomoc__zakladki` ma `flex: none`, a od
   czasu przeniesienia paska do naglowka szukajka nie rozpycha sie juz do konca,
   wiec nie bylo czego docisnac. */
.v-help-header .pomoc__zakladki { margin-left: auto; }


/* CELE DOTYKU NA TELEFONIE (audyt 30.09). Plansza mowi to wprost: `chipH` to 44 px
   ponizej 760 px i 36 px wyzej — czyli chipy na telefonie SA wieksze, a my mielismy
   34 px wszedzie. Reguly styleguide'u: cel dotyku minimum 44 px. */
@media (max-width: 759px) {
  .pomoc__czytasz .pomoc__pasek-poz { height: 44px; /* makieta */ padding: 0 var(--v-s-4); }

  .pomoc__segment .pomoc__zakladka { height: 44px; }

  /* „Regulamin” byl zwyklym napisem wysokim na 14 px — nie do trafienia palcem. */
  .pomoc__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--v-s-1);
  }
}


/* Znak Vistitio przy osobach z zespolu (30.09) — na miejscu awatara, w tym samym
   rozmiarze co „sm”, zeby wiersz nie zmienil wysokosci. */
.pomoc__osoba-znak {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--v-n-50);
}

.pomoc__osoba-znak svg { width: 22px; height: 22px; display: block; }


/* ===========================================================================
   POMOC NA TELEFONIE — dwa ekrany, nie jedna strona na 9103 px.

   Zrodlo: „Vistitio Pomoc Mobile.dc.html" (handoff 35), ekrany „Pomoc",
   „Poradnik" i „Status serwisu". Makieta mobilna uklada to INACZEJ niz web:
   na jednym ekranie stoi szukajka, ciemna karta „Zanim napiszesz", LISTA
   tematow (wiersze, nie kafle), pytania i wyjscie do czlowieka; przewodnik
   jest OSOBNYM ekranem, na ktory wchodzi sie z listy.

   U nas oba ekrany to ten sam adres: bez `?temat=` widac liste, z tematem —
   poradnik. Dzieki temu obie drogi dzialaja bez JavaScriptu i kazda da sie
   wyslac dalej, a na web nic sie nie zmienia (tam lista i przewodnik stoja
   obok siebie i to jest zgodne z plansza webowa).
   =========================================================================== */

@media (max-width: 759px) {

  /* --- ekran LISTY: przewodnika i sekcji spoza makiety mobilnej tu nie ma --- */
  .pomoc--centrum:not(.pomoc--poradnik) .pomoc__czytasz,
  .pomoc--centrum:not(.pomoc--poradnik) .pomoc__przewodnik,
  .pomoc--centrum:not(.pomoc--poradnik) .pomoc__sekcja--jak,
  .pomoc--centrum:not(.pomoc--poradnik) #spory {
    display: none;
  }

  /* --- ekran PORADNIKA: zostaje sam przewodnik i droga do czlowieka --- */
  .pomoc--poradnik .pomoc__glowa,
  .pomoc--poradnik #problemy,
  .pomoc--poradnik .pomoc__czytasz,
  .pomoc--poradnik .pomoc__sekcja--jak,
  .pomoc--poradnik #spory,
  .pomoc--poradnik #pytania,
  .pomoc--poradnik .pomoc__zacheta {
    display: none;
  }

  /* Powrot na liste tematow. Na web go nie ma — tam lista stoi nad przewodnikiem.
     UWAGA: to NIE jest `pomoc__wroc` ze strony statusu — tamten ma byc widoczny
     zawsze i na kazdej szerokosci. */
  .pomoc__wroc-temat {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 600 var(--v-t-ui) var(--v-font-body);
    color: var(--v-n-600);
    text-decoration: none;
  }

  /* --- glowa jako CIEMNA karta (makieta: granat, promien 18, wysciolka 18) --- */
  /* Ciemna karta nalezy WYLACZNIE do centrum pomocy. Bez tego zawezenia wchodzila
     tez na `/pomoc/status`, gdzie w glowie stoi sam powrot i tytul w granacie —
     czyli granat na granacie i pusty ciemny prostokat (uwaga Huberta 30.09). */
  .pomoc--centrum .pomoc__glowa {
    background: var(--v-primary);
    border-radius: 18px; /* makieta */
    padding: 18px; /* makieta */
  }

  .pomoc--centrum .pomoc__glowa .pomoc__nadtytul { color: var(--v-secondary-dark); }

  .pomoc--centrum .pomoc__glowa .pomoc__tytul {
    font: 600 19px/1.25 var(--v-font-display); /* makieta */
    color: var(--v-n-0);
  }

  .pomoc--centrum .pomoc__glowa .pomoc__lead {
    font: 400 13px/1.55 var(--v-font-body); /* makieta */
    color: var(--v-n-300);
  }

  /* --- tematy jako WIERSZE, nie kafle --- */
  /* Makieta stawia tu wiersz: nazwa, pod nia zdanie, szewron po prawej. Kwadratu
     z ikona swiadomie nie ma — w makiecie ma kolor per temat (`t.iconBg`), a my
     nie mamy w danych ani ikony, ani barwy i nie wymyslamy ich. */
  .pomoc__kafle { grid-template-columns: 1fr; gap: var(--v-s-2); }

  .pomoc__kafel {
    position: relative;
    padding: 14px 40px 14px 16px; /* makieta, miejsce po prawej na szewron */
    border-width: 1px;
    border-color: var(--v-n-100);
    border-radius: 16px; /* makieta */
    gap: 2px; /* makieta */
  }

  .pomoc__kafel::after {
    content: "›";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px; /* makieta */
    color: var(--v-n-500);
  }

  .pomoc__kafel-nazwa { font: 700 14.5px/1.3 var(--v-font-body); } /* makieta */
  .pomoc__kafel-podpis { font: 400 12.5px/1.45 var(--v-font-body); } /* makieta */

  /* --- zacheta do czlowieka (ochra, tylko telefon) --- */
  .pomoc__zacheta {
    display: flex;
    flex-direction: column;
    gap: 5px; /* makieta */
    padding: 16px; /* makieta */
    border-radius: 16px; /* makieta */
    background: var(--v-secondary-soft);
    text-decoration: none;
  }

  .pomoc__zacheta-tytul {
    font: 700 14.5px/1.3 var(--v-font-body); /* makieta */
    color: #3A2A08; /* TODO token — ochra jako TEKST na ochrowym tle, tego odcienia nie ma w tokenach */
  }

  .pomoc__zacheta-tresc {
    font: 400 13px/1.55 var(--v-font-body); /* makieta */
    color: var(--v-secondary-text);
  }
}

/* Na web zachety nie ma — tam „Napisz do nas” stoi w pasku nagłowka przez caly czas. */
@media (min-width: 760px) {
  .pomoc__zacheta { display: none; }
  .pomoc__wroc-temat { display: none; }
}


/* ===========================================================================
   PASEK POMOCY NA TELEFONIE — 1:1 z „Vistitio Pomoc Mobile.dc.html".
   Makieta mobilna ma tu DWIE rzeczy, nie szesc: slowo „Pomoc" z pastylka stanu
   po prawej i pod nimi pole szukania na pelna szerokosc. Zakladki, „Regulamin"
   i „Napisz do nas" wyjezdzaly poza ekran na 390 px (zmierzone: przycisk ucinany
   w polowie), a w makiecie mobilnej ich tam nie ma — Status jest pastylka,
   a droga do czlowieka stoi w tresci jako ochrowa zacheta.
   =========================================================================== */

.v-help-header__mobil { display: none; }

@media (max-width: 759px) {
  .v-help-header__pas {
    display: flex;
    flex-direction: column;
    /* Regula bazowa paska ma `align-items: center` (tam wszystko stoi w jednej
       linii). W kolumnie to samo znaczy juz „wysrodkuj w poziomie" — i tytul,
       pastylka oraz pole zbiegly sie na srodek zamiast dojsc do krawedzi. */
    align-items: stretch;
    gap: 12px; /* makieta */
    padding: 6px 20px 14px; /* makieta */
  }

  .v-help-header__mobil {
    display: flex;
    align-items: center;
    gap: var(--v-s-2);
  }

  .v-help-header__tytul {
    font: 600 22px/1.2 var(--v-font-display); /* makieta */
    letter-spacing: -.03em; /* makieta */
    color: var(--v-primary);
  }

  /* Pastylka stanu: zielona obwodka i tlo z makiety, napis 12/700. */
  .v-help-header__stan {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--v-s-2);
    height: 32px; /* makieta */
    padding: 0 10px; /* makieta */
    border: 1px solid #BEDCC9; /* TODO token — obwodka pastylki stanu z makiety */
    border-radius: 9px; /* makieta */
    background: var(--v-success-soft);
    font: 700 12px/1 var(--v-font-body); /* makieta */
    color: var(--v-success-text);
    text-decoration: none;
  }

  .v-help-header__stan--uwaga {
    border-color: var(--v-secondary);
    background: var(--v-secondary-soft);
    color: var(--v-secondary-text);
  }

  .v-help-header__stan .pomoc__kropka { width: 7px; height: 7px; /* makieta */ }

  /* Na telefonie z paska zostaje samo pole — reszta nie ma sie gdzie zmiescic. */
  .v-help-header__logo,
  .v-help-header .pomoc__zakladki { display: none; }

  .v-help-header .pomoc__szukaj { flex: 1 1 auto; }

  /* Pole musi dojsc do obu krawedzi. Samo `flex: 1` nie wystarczylo: `<input>` ma
     wlasna szerokosc wewnetrzna (~236 px przy naszej wysciolce) i to ona wygrywala
     — pole stalo wysrodkowane, z 57 px pustki z kazdej strony (zmierzone). */
  .v-help-header .pomoc__szukaj-pole { width: 100%; }

  .v-help-header .pomoc__szukaj-pole .v-input {
    height: 48px; /* makieta */
    border-radius: 14px; /* makieta */
    border-width: 1.5px; /* makieta */
  }
}


/* Na ekranie LISTY nic nie jest jeszcze wybrane, wiec pierwszy temat nie moze
   wygladac na zaznaczony. Na web zaznaczenie ma sens (lista stoi nad otwartym
   przewodnikiem i mowi, ktory to), na telefonie to dwa osobne ekrany i granatowy
   kafel obiecywal wybor, ktorego nikt nie zrobil. */
@media (max-width: 759px) {
  .pomoc--centrum:not(.pomoc--poradnik) .pomoc__kafel--wybrany {
    background: var(--v-n-0);
    border-color: var(--v-n-100);
  }

  .pomoc--centrum:not(.pomoc--poradnik) .pomoc__kafel--wybrany .pomoc__kafel-nazwa { color: var(--v-primary); }
  .pomoc--centrum:not(.pomoc--poradnik) .pomoc__kafel--wybrany .pomoc__kafel-podpis { color: var(--v-n-600); }
}