/* Ramka autora — Onet Premium (prototyp) */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Zgodnie z embed-guide.md: body zawsze #ffffff — przykrywa tło pod iframe
   CMS-a i strony matki. Przezroczystość jest niezgodna z wytycznymi, mimo że
   ładniej wyglądałaby pod zaokrąglonymi rogami ramki. */
body {
  background: #ffffff;
  font-family: "Fira Sans", system-ui, sans-serif;
  color: #111111;
}

/* Wersja produkcyjna (index.html, #wrap): wysokość ustala iframe ze snippetu,
   a zawartość ramki wypełnia go w 100%. Jedno źródło prawdy zamiast dwóch —
   bez tego rozjazd o kilkadziesiąt pikseli daje albo biały pas pod treścią,
   albo pasek przewijania w środku.
   ekrany.html tego nie łapie (brak #wrap) i zachowuje stałe wysokości w px. */
html:has(#wrap), html:has(#wrap) body { height: 100%; }

#wrap { height: 100%; }
#wrap .bar { height: 100%; }

.embed-wrap {
  width: 100%;
  height: auto;                   /* prototyp: dwa warianty pod sobą */
  -webkit-tap-highlight-color: transparent;
}

/* --- przełączanie wariantów (index.html) --- */

.is-sub   [data-guest] { display: none !important; }
.is-guest [data-sub]   { display: none !important; }

/* Ramka renderuje się od razu w wariancie gościa; jeśli SDK potwierdzi dostęp,
   podmiana na wariant subskrybenta jest płynna. Nic nie chowamy na czas ładowania —
   pusta ramka przez kilka sekund wygląda jak zepsuty embed. */
.bar__text { transition: opacity .2s ease; }

/* widok czatu i ankiety zastępują belkę z tekstem w tym samym iframie */
.is-chat [data-view="bar"],
.is-poll [data-view="bar"] { display: none !important; }

/* pasek podglądu (ekrany.html) — nie idzie na produkcję */

.proto-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 8px 12px;
  background: #201E19;
  border-radius: 999px;
  width: fit-content;
}

.proto-bar__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A756A;
}

.proto-bar__select {
  padding: 6px 12px;
  background: #F3F1EC;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #14130F;
  cursor: pointer;
}

/* etykieta tylko na czas prototypu — nie idzie na produkcję */
.proto-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9A968C;
  margin: 0 0 8px;
}

.proto-label + .bar { margin-bottom: 32px; }

/* .bar__cta ma display: inline-flex, więc samo [hidden] z przeglądarki by nie zadziałało */
.bar__cta[hidden] { display: none; }

/* WSZYSTKIE trzy widoki to ten sam embed → jedna wysokość na breakpoint.
   Zmieniasz tu → zmień też w embed/ramka-autora-snippet.html */
.bar {
  position: relative;
  height: 300px;
  display: flex;
  align-items: stretch;
  gap: 0;                         /* zdjęcie to wycinka bez tła — odstęp niepotrzebny */
  background: #F6F4EF;            /* offwhite */
  border: 1px solid #E6E2D8;
  border-radius: 36px;
  overflow: hidden;
}

/* --- tekst --- */

.bar__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0 28px 40px;
  overflow: hidden;               /* nic nie wychodzi pod fotkę */
}

.bar__logo {
  display: block;
  width: 129px;
  height: auto;
  margin-bottom: 22px;
}

/* AUTOPROMOCJA — oznaczenie treści własnej, w rogu zaokrąglonej ramki.
   Pozycjonowane absolutnie, bo ramka ma sztywną wysokość zaszytą w snippetach
   opublikowanych artykułów: napis w normalnym przepływie wypchnąłby treść
   i w starych artykułach pojawiłby się pasek przewijania.
   Typografia jak w oznaczeniach reklamowych Onetu (.ad_adInfo). */
.bar__promo {
  position: absolute;
  top: 16px;
  right: 28px;                    /* w linii z prawą krawędzią zdjęcia */
  z-index: 2;
  color: #A9A49A;
  font: 8px Verdana, Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}

.bar__title {
  font-family: "Grape Nuts", "Fira Sans", cursive;
  font-size: 34px;
  line-height: 0.95;
  font-weight: 400;
  color: #4A7FBE;
  margin-bottom: 12px;
  text-wrap: balance;             /* równe długości linii */
  max-width: 22ch;                /* fallback dla starszych przeglądarek */
}

.bar__desc {
  font-size: 15px;
  line-height: 1.5;
  color: #33312C;
  margin-bottom: 18px;
  max-width: 46ch;
  text-wrap: balance;             /* równe długości wersów, jak w nagłówku */
}

.bar__actions {
  display: flex;
  flex-wrap: wrap;                /* brak miejsca → drugi przycisk spada niżej, nie pod fotkę */
  align-items: center;
  min-width: 0;
  gap: 10px;
}

/* Część CTA to <a>, część <button> — a przyciski nie dziedziczą kroju po body,
   więc bez font-family wpadłyby w systemowy font przeglądarki. */
.bar__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  background: #111111;
  color: #ffffff;
  border: none;
  font-family: "Fira Sans", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color .15s ease;
}

.bar__cta:hover { background: #3a3a3a; }

/* outline */
.bar__cta--ghost {
  background: transparent;
  color: #111111;
  border: 1px solid #111111;
  padding: 10px 19px;             /* +1px obrysu = ta sama wysokość co pełne CTA (11px) */
}

.bar__cta--ghost:hover { background: rgba(17, 17, 17, .06); }

.bar__cta--ghost svg { flex: none; }

/* wyszarzony — funkcja tylko dla subskrybentów.
   Kursor zostaje „pointer”: przycisk jest klikalny, tylko prowadzi do oferty,
   a nie do głosowania. `not-allowed` sugerowałby, że klik nic nie robi. */
.bar__cta--ghost.is-disabled {
  color: #ADA99F;
  border-color: #D9D5CB;
}

.bar__cta--ghost.is-disabled:hover { background: transparent; }

/* Podmiana etykiety zamiast dymka przeglądarki. Oba napisy siedzą w jednej
   komórce siatki, więc przycisk trzyma szerokość dłuższego z nich i nic nie
   skacze — ani przy zamianie, ani względem sąsiednich CTA. */
.bar__cta-swap {
  display: grid;
  align-items: center;
}

.bar__cta-label {
  grid-area: 1 / 1;
  /* Obie etykiety zawsze w jednej linii. Na mobile .bar__cta przechodzi na
     white-space: normal i dłuższy napis łamał się na dwa wiersze, przez co
     przycisk robił się wyższy od sąsiedniego CTA. */
  white-space: nowrap;
  transition: opacity .18s ease;
}

.bar__cta-label--alt { opacity: 0; }

.is-swapped .bar__cta-label { opacity: 0; }
.is-swapped .bar__cta-label--alt { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bar__cta-label { transition: none; }
}

.bar__author {
  /* 20, nie 18: nad przyciskiem interlinia akapitu (15/1.5) dokłada ~2px pustego
     miejsca pod ostatnią linią, a nazwisko idzie bez interlinii. Równe liczby
     dałyby nierówne przerwy — te dwie wartości wyrównują je optycznie. */
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
}

/* szara i cieńsza jest tylko funkcja; imię i nazwisko zostaje pogrubione,
   także gdy siedzi we własnym spanie (przełącznik dziennikarza w ekrany.html) */
.bar__author span { font-weight: 400; color: #6B675E; }
.bar__author [data-author-name] { font-weight: 700; color: #111111; }

/* Przecinek dokłada CSS, a nie markup: spany startują puste (wypełnia je bar.js),
   więc przecinek wpisany w HTML wisiałby sam, gdyby skrypt nie wystartował.
   Siedzi przy nazwisku, nie przy funkcji — inaczej zostawałby na końcu wiersza sam.

   Oba człony są nierozrywalne, a jedyne miejsce złamania to spacja MIĘDZY spanami
   (w markupie, poza nimi). Dzięki temu podpis albo mieści się w jednej linii,
   albo dzieli się na „Imię Nazwisko,” + „dziennikarz Onetu” — nigdy tak,
   żeby samo „Onetu” spadło do drugiego wiersza. */
.bar__author [data-author-name],
.bar__author [data-author-role] { white-space: nowrap; }

.bar__author [data-author-name]:not(:empty)::after { content: ','; }

/* --- zdjęcie po prawej --- */

.bar__media {
  flex: 0 0 300px;
  position: relative;
  margin-right: 28px;             /* zdjęcie nie dotyka prawej krawędzi ramki */
}

.bar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 27% top;       /* kadr przesunięty w lewo */
  display: block;
}

/* =========================================================
   WARIANT C — czat z autorem
   ========================================================= */

/* czat zajmuje całą ramkę — bez kolumny ze zdjęciem, tożsamość niesie avatar w nagłówku */
.chat[hidden] { display: none; }

.chat {
  animation: chatIn .35s cubic-bezier(.16, 1, .3, 1);
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 24px;
}

/* --- nagłówek czatu --- */

.chat__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E6E2D8;
  flex-shrink: 0;
}

.chat__avatar {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: #E9E5DB;
}

.chat__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 8%;
  display: block;
}

.chat__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.chat__name { font-size: 14px; font-weight: 600; }

.chat__status {
  font-size: 11.5px;
  color: #6B675E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__logo { width: 96px; height: auto; flex: none; }

/* X zamykający dodatek — ten sam w czacie i w ankiecie */
.chat__close,
.poll__close {
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6B675E;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}

.chat__close svg,
.poll__close svg { width: 18px; height: 18px; }

.chat__close:hover,
.poll__close:hover { background: #EDEAE1; color: #111111; }

/* --- lista wiadomości --- */

.chat__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 8px 2px 0;
  scroll-behavior: smooth;
}

.chat__messages::-webkit-scrollbar { width: 9px; height: 9px; display: block; }
.chat__messages::-webkit-scrollbar-track { background-color: #EDEAE1; border-radius: 5px; }
.chat__messages::-webkit-scrollbar-thumb { background-color: #C9C4B7; border-radius: 5px; }
.chat__messages { scrollbar-width: thin; scrollbar-color: #C9C4B7 #EDEAE1; }

.msg {
  max-width: 84%;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  transform-origin: left bottom;
  animation: msgPop .42s cubic-bezier(.34, 1.56, .64, 1);   /* lekkie „przestrzelenie” = pop */
}

.msg--user { transform-origin: right bottom; }

.msg--author {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid #E6E2D8;
  border-radius: 4px 16px 16px 16px;
}

.msg--user {
  align-self: flex-end;
  background: #111111;
  color: #ffffff;
  border-radius: 16px 4px 16px 16px;
}

/* „Czytaj więcej” w dymku autora */

.msg__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  background: transparent;
  border: 1.5px solid #111111;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #111111;
  cursor: pointer;
  transition: background-color .2s ease;
  animation: fadeInUp .3s ease;
}

.msg__more:hover { background: rgba(17, 17, 17, .07); }

/* --- pole do napisania wiadomości --- */

.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 6px 6px 16px;
  background: #ffffff;
  border: 1px solid #DCD7CA;
  border-radius: 999px;
  flex-shrink: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.composer:focus-within {
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(74, 127, 190, .15);
}

.composer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: #111111;
  padding: 8px 0;
}

.composer__input::placeholder { color: #A5A093; }

.composer__send {
  flex: none;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}

.composer__send svg { width: 15px; height: 15px; fill: currentColor; }
.composer__send:hover { background: #3a3a3a; }
.composer__send:disabled { background: #C9C4B7; cursor: default; }

@keyframes msgPop {
  0%   { opacity: 0; transform: scale(.82) translateY(8px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes chatIn   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .msg, .msg__more { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   WARIANT D — ankieta tematyczna
   ========================================================= */

/* ankieta zajmuje całą ramkę — bez kolumny ze zdjęciem, żeby zmieściły się
   cztery opcje bez scrolla */
.poll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 28px;
  position: relative;             /* układ odniesienia dla podziękowania */
}

.poll__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* .poll ma display: flex, więc samo [hidden] z przeglądarki by nie zadziałało */
.poll[hidden] { display: none; }

.poll__logo { width: 110px; height: auto; }

.poll__close { margin-left: auto; }

.poll__kicker {
  padding: 3px 10px;
  background: #111111;
  color: #ffffff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.poll__title {
  font-family: "Grape Nuts", "Fira Sans", cursive;
  font-size: 30px;
  line-height: .95;
  font-weight: 400;
  color: #4A7FBE;
  margin: auto 0 14px;            /* auto u góry — patrz centrowanie przy .poll__form */
  text-wrap: balance;             /* jedna linia, dopóki się mieści; potem równe wersy */
  flex-shrink: 0;
}

/* Nagłówek, odpowiedzi i przycisk tworzą jeden blok wyśrodkowany w pionie:
   `margin-top: auto` na nagłówku i `margin-bottom: auto` na formularzu dzielą
   wolną przestrzeń po równo nad i pod blokiem. */
.poll__form {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin-bottom: auto;
}

/* --- opcje --- */

/* Cztery opcje w siatce 2×2 — wszystkie widoczne naraz, bez scrolla. */
.poll__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  flex: 0 0 auto;
}

.choice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  background: #ffffff;
  border: 1px solid #DCD7CA;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.35;
  color: #33312C;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color .18s ease, background-color .18s ease;
  min-width: 0;                   /* długi tekst łamie się w komórce, nie rozpycha siatki */
}

.choice:hover { border-color: #B4AFA2; }

/* natywny input tylko dla klawiatury i czytników — widoczne kółko rysujemy sami */
.choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice__radio {
  flex: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid #C9C4B7;
  border-radius: 50%;
  position: relative;
  transition: border-color .18s ease;
}

.choice__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #111111;
  transform: scale(0);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.choice:has(input:checked) { border-color: #111111; background: #FBFAF7; }
.choice:has(input:checked) .choice__radio { border-color: #111111; }
.choice:has(input:checked) .choice__radio::after { transform: scale(1); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(74, 127, 190, .18); }

.poll__choices.is-invalid .choice { border-color: #E3B4B4; }

/* własny temat — pole tekstowe wpisane w pigułkę opcji */
.choice--own { padding-right: 8px; }

/* wszystkie własności pisma jawnie takie same jak w .choice — pole ma wyglądać
   jak zwykły tekst opcji, a input nie dziedziczy fontu z rodzica sam z siebie */
.choice__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Fira Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: inherit;
  color: #33312C;
  padding: 2px 0;
}

.choice__input::placeholder { color: #A5A093; }

/* --- stopka --- */

.poll__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-shrink: 0;
}

.poll__error { font-size: 11.5px; color: #D42A2A; }

.poll__send {
  margin-left: auto;
  flex: none;
  padding: 10px 24px;
  background: #111111;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease;
}

.poll__send:hover { background: #3a3a3a; }
.poll__send:disabled { background: #C9C4B7; cursor: default; }

/* --- podziękowanie --- */

/* Po wysłaniu nagłówek i formularz najpierw gasną w miejscu (klasa .is-sending),
   a dopiero po animacji znikają z układu — inaczej podziękowanie przeskoczyłoby
   w górę w połowie przejścia. */
.poll__title,
.poll__form {
  transition: opacity .26s ease, transform .26s ease;
}

.poll.is-sending .poll__title,
.poll.is-sending .poll__form {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Podziękowanie mówi tym samym „odręcznym” głosem co nagłówek ankiety i stoi
   dokładnie na środku ramki w pionie. Dlatego leży w warstwie absolutnej —
   w normalnym przepływie plakietka „Ankieta” u góry spychałaby je niżej. */
.poll__thanks {
  position: absolute;
  inset: 0;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  pointer-events: none;           /* warstwa przykrywa całą ankietę — X musi zostać klikalny */
  font-family: "Grape Nuts", "Fira Sans", cursive;
  font-size: 30px;
  line-height: .95;
  font-weight: 400;
  color: #4A7FBE;
  text-wrap: balance;
  animation: pollThanksIn .4s ease both;
}

.poll__thanks[hidden] { display: none; }

@keyframes pollThanksIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .poll__title,
  .poll__form { transition: none; }
  .poll.is-sending .poll__title,
  .poll.is-sending .poll__form { transform: none; }
  .poll__thanks { animation: none; }
}

/* --- wąski desktop/tablet: przyciski łamią się do drugiej linii --- */

@media (max-width: 860px) and (min-width: 641px) {
  .bar { height: 340px; }
  .bar__desc { font-size: 14px; }
}

/* --- mobile --- */

@media (max-width: 640px) {
  .bar {
    height: 360px;                /* zdjęcie nadal po prawej, tylko węższe */
    gap: 0;
    border-radius: 28px;
  }

  .bar__logo { width: 92px; margin-bottom: 14px; }
  .bar__promo { top: 12px; right: auto; left: 22px; }

  /* na mobile zdjęcie przy krawędzi, na ciemniejszym tle niż reszta ramki —
     wycinka ma przezroczyste tło, więc kadr wyraźniej się wtedy odcina */
  .bar__media {
    flex: 0 0 36%;
    margin-right: 0;
    background: #E9E5DB;          /* ten sam odcień co tło avatara w czacie */
  }
  .bar__media img { object-position: 42% top; }

  .bar__text { padding: 22px 16px 22px 22px; }   /* na mobile bufor do zdjęcia zostaje */

  .bar__title { font-size: 26px; margin-bottom: 8px; }
  .bar__desc { font-size: 12px; line-height: 1.45; margin-bottom: 12px; }

  .bar__actions {
    flex-direction: column;       /* przyciski pod sobą */
    align-items: stretch;
    gap: 8px;
  }

  .bar__cta {
    justify-content: center;
    font-size: 11.5px;
    padding: 9px 12px;
    max-width: 100%;
    white-space: normal;          /* wąska kolumna → tekst się łamie zamiast wychodzić */
  }
  .bar__cta--ghost { padding: 7.5px 10px; }
  .bar__cta svg { width: 14px; height: 14px; }

  .bar__author { margin-top: 10px; font-size: 11px; }

  .chat { padding: 16px 16px 18px; }
  .chat__logo { display: none; }
  .chat__avatar { width: 32px; height: 32px; }
  .chat__name { font-size: 13px; }
  .chat__status { font-size: 10.5px; }
  .msg { max-width: 90%; font-size: 12.5px; padding: 9px 12px; }

  .composer { padding-left: 14px; }
  .composer__input { font-size: 16px; }   /* 16px = iOS nie zoomuje przy focusie */
  .composer__send { width: 32px; height: 32px; }

  /* --- ankieta --- */
  .poll { padding: 18px 16px; }
  .poll__logo { width: 92px; }
  .poll__kicker { font-size: 9px; padding: 2px 8px; }
  .poll__title { font-size: 24px; margin: auto 0 10px; max-width: none; }

  /* na wąskim ekranie 2×2 zrobiłoby się nieczytelne — wracamy do kolumny */
  .poll__choices { grid-template-columns: 1fr; gap: 6px; }

  .choice { padding: 9px 12px; font-size: 11.5px; gap: 9px; }
  .choice__radio { width: 15px; height: 15px; }
  .choice__input { font-size: 11.5px; }   /* równo z tekstem pozostałych opcji */

  .poll__foot { margin-top: 10px; }
  .poll__error { font-size: 10.5px; }
  .poll__send { padding: 9px 16px; font-size: 12px; }

  .poll__thanks { font-size: 24px; padding: 18px 16px; }   /* stopień i padding jak w .poll */
}