/* =====================================================================
   ArtOn 2026 – ui-public.css · STRONY PUBLICZNE (właściciel: T4, SPEC 6, 3.8, 9 nr 29–30)
   landing.php, rodzic_login.php, rodzic_reset.php, zapisy.html, wydarzenia-zapis.html, rodo.html, pay_return.php.
   Ładowany jako ostatni arkusz (po ui.css). Fundament (tokeny, przyciski, pola, .c-form-group, .c-check, .c-list,
   .c-row, klatki c-*) jest w ui.css – tu tylko układ i wygląd ekranów publicznych.

   Zasady (KONTRAKT-ZBIORCZY 4, kontrakt-publiczne 1):
   - id, name, value i klasy przełączane przez JS bez zmian; .hidden / [hidden] zawsze chowają (display tylko w stanach
     „pokazany”, na etykietach bez !important – #ev-birth chowa JS przez style.display),
   - nadpisania starych arkuszy z prefiksem :root i z ID tam, gdzie stary arkusz ma ID (motion.css: #step-*:not(.hidden),
     public.css: #new-hint, #signup-status, #signup-form label …). Zakres pól: :is(.c-auth, .c-pub, #signup-form) – ID
     w :is() podnosi specyficzność ponad #signup-form label (public.css:339),
   - #first-label / #last-label zaczynają się węzłem tekstowym (JS: childNodes[0].nodeValue) – styl wiersza nie wymaga span,
   - #wait-text (pay_return.php) bez własnych klas – przy błędzie JS nadpisuje className, stan rysuje :has(),
   - kolory wyłącznie z tokenów style.css i aliasów ui.css (kafelki: --tile-*),
   - brak transform na main, przewija się window, z-index < 50 (pasek kroków 20, przyklejony przycisk 10).
   ===================================================================== */

:root {
  --pub-pad: 16px;                 /* margines boczny kolumny (telefon) */
  --pub-col: 600px;                /* kolumna zapisów i wydarzeń */
  --push: 40px;                    /* przesunięcie kroku przy przejściu push (SPEC 6) */
  --onb-h: 52px;                   /* pasek kroków zapisów */
}
@media (min-width: 701px) {
  :root { --pub-pad: 24px; }
}
@supports not (overflow: clip) {
  :root { --push: 12px; }          /* bez overflow: clip krok nie może wyjść poza margines kolumny (poziome przewijanie) */
}

/* =====================================================================
   1. WSPÓLNE – tło, logo (View Transitions), tytuły, statusy, przyciski wysyłki, ✓ sukcesu
   ===================================================================== */
/* przejście między dokumentami: logo przelatuje między landingiem, zapisami, logowaniem i RODO (SPEC 3.8, ruch nr 30).
   Samo włączenie (@view-transition { navigation: auto }) stoi w inline <style> na początku <head> sześciu stron publicznych:
   z arkusza ładowanego na końcu <head> Chrome często nie widział go przed pierwszą klatką nowej strony („opt-in disabled”
   jako nieobsłużony błąd JS w harnessie). pay_return.php i portal go nie mają. Tu tylko wyłączenie przy redukcji ruchu
   (stoi później niż reguła inline, więc wygrywa) i czasy. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-group(arton-logo) { animation-duration: 460ms; animation-timing-function: var(--spring); }
::view-transition-old(root) { animation-duration: 200ms; }
::view-transition-new(root) { animation-duration: 300ms; }

:root body.auth-page, :root body.signup-page, :root body:has(.landing), :root body:has(.rodo-main) {
  background: radial-gradient(70% 46% at 50% -12%, rgba(169, 150, 207, .2), transparent 70%) no-repeat, var(--c-canvas);
}

/* kafelek logo – znak 1:1 (Playfair 700 + „studio” w Inter, proporcje z public.css), rozmiar z dziedziczonego --logo */
:root body .arton-logo[role] {
  view-transition-name: arton-logo;
  flex: 0 0 auto; width: var(--logo, 96px); height: var(--logo, 96px); margin: 0; border-radius: calc(var(--logo, 96px) * .235);
  background: linear-gradient(160deg, #b7a6da 0%, #a996cf 55%, #927dbf 100%); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .06);
}
:root body .arton-logo[role] .al-name { font-size: calc(var(--logo, 96px) * .29); line-height: 1; }
:root body .arton-logo[role] .al-sub { font-size: calc(var(--logo, 96px) * .088); letter-spacing: .447em; padding-left: .447em; margin-top: 0; }

/* nagłówek z logo nad treścią (zapisy, wydarzenia, RODO) – logo po lewej nad dużym tytułem */
.c-pub-head { --logo: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 18px; }

/* duży tytuł kroku, eyebrow, lead */
:root .c-step > .c-step-title {
  display: block; margin: 0; font: var(--t-large); letter-spacing: var(--tr-large); color: var(--c-title); text-wrap: balance;
}
:root .c-step > .c-step-title:focus { outline: none; box-shadow: none; }
.c-step-eyebrow { display: block; margin: 0 0 4px; font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-text); }
:root .c-step > .c-step-lead { margin: 6px 0 0; font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--c-text-2); }

/* komunikaty statusu (#signup-status, #ev-status, #reset-status, #np-status, błąd logowania) – karta z ikoną (JS podmienia treść) */
:root :is(body.auth-page, body.signup-page) .sms-status {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border: 0; border-radius: 14px;
  background: var(--lav-50); box-shadow: inset 0 0 0 1px var(--lav-100); color: var(--lav-700);
  font: 500 15px/20px var(--font-sans); letter-spacing: -0.006em; text-align: left;
}
:root :is(body.auth-page, body.signup-page) .sms-status::before { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 0; }
:root :is(body.auth-page, body.signup-page) .sms-status.error { background: var(--red-50); box-shadow: inset 0 0 0 1px var(--red-200); color: var(--red-700); animation: c-shake 320ms var(--ease-out) both; }
:root :is(body.auth-page, body.signup-page) .sms-status a { display: inline; margin: 0; padding: 0; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* przyciski wysyłki: filled L na całą szerokość; w trakcie wysyłki zostaje kolor (ui.css daje wyłączonym szare tło) */
:root :is(#signup-submit, #reset-req-btn, #reset-confirm-btn, #ev-submit, .c-auth-form button[type="submit"]) {
  flex: 1 1 100%; width: 100%; height: var(--ctl-l); min-height: var(--ctl-l); padding: 0 20px; border-radius: var(--r-btn-lg); font-size: 17px; letter-spacing: -0.016em;
}
:root :is(#signup-submit, #reset-req-btn, #reset-confirm-btn, #ev-submit, .c-auth-form button[type="submit"]).is-busy {
  background-color: var(--lav-500); box-shadow: none; opacity: 1;
}
/* filled link-przycisk L (reset, sukces zapisów, powrót z płatności) */
:root :is(.c-auth, #step-done, #ev-done) a.btn-link {
  display: flex; width: 100%; height: var(--ctl-l); padding: 0 20px; border-radius: var(--r-btn-lg);
  font: 600 17px/1 var(--font-sans); letter-spacing: -0.016em; color: #fff;
}
:root .c-auth .form-actions { margin: 0; }

/* kafelek ikony stanu (reset, powrót z płatności) */
:root .c-auth-ico { display: block; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 15px; box-shadow: var(--el-tile); }

/* ✓ sukcesu – zielone koło wskakuje (--spring-pop), ptaszek „rysuje się” od lewej (#reset-step-sent, #step-done, #ev-done, płatność) */
.c-done-ico, :root #step-done .done-ico {
  position: relative; display: block; flex: 0 0 auto; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--green-500); color: #fff; box-shadow: 0 12px 26px -12px rgba(63, 165, 111, .75);
  animation: c-pop-in var(--d-pop) var(--spring-pop) backwards;
}
.c-done-ico::after, :root #step-done .done-ico::after {
  content: ""; position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5 10 17l8.5-9.5'/%3E%3C/svg%3E") center / 36px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5 10 17l8.5-9.5'/%3E%3C/svg%3E") center / 36px no-repeat;
  clip-path: inset(0 100% 0 0); animation: c-pub-draw 380ms var(--ease-out) 200ms forwards;
}
:root #step-done .done-ico > svg { display: none; }
@keyframes c-pub-draw { to { clip-path: inset(0 0 0 0); } }

/* linki tekstowe (plain) z celem dotyku 44 px */
:root .c-auth-links, :root .c-pub-foot { margin: 18px 0 0; text-align: center; font: 400 15px/20px var(--font-sans); letter-spacing: -0.006em; color: var(--c-text-2); }
/* rodzic.css: body.portal .signup-hint { font-size: 13px } (0,2,1) zmniejszał akcje do rozmiaru przypisu – tu tylko font, marginesy
   zostają z reguł kontekstowych (.c-auth .c-auth-links, .c-auth-state .c-auth-links). Przypisy .c-auth-note i .c-cta-foot mają 13 px. */
:root body.portal :is(.c-auth-links, .c-pub-foot) { font: 400 15px/20px var(--font-sans); letter-spacing: -0.006em; }
:root :is(.c-auth-links, .c-pub-foot, .c-cta-foot, .c-auth-back) a {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 8px; border-radius: 10px;
  color: var(--c-accent-text); font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: opacity 140ms var(--ease-standard), background-color 140ms var(--ease-standard);
}
:root :is(.c-auth-links, .c-pub-foot, .c-cta-foot, .c-auth-back) a:active { opacity: .5; }
@media (hover: hover) { :root :is(.c-auth-links, .c-pub-foot, .c-cta-foot, .c-auth-back) a:hover { background: var(--lav-50); text-decoration: none; } }
:root :is(.c-auth-links, .c-pub-foot, .c-cta-foot, .c-auth-back) a:focus-visible { outline: none; box-shadow: var(--ring); }
:root .c-auth-links #reset-again-wait { display: block; font: var(--t-footnote); color: var(--c-text-2); }
:root .c-auth-links #reset-again-wait:empty { display: none; }

/* =====================================================================
   2. GRUPY PÓL (SPEC 2.3 – inset grouped) w formularzach publicznych
   ===================================================================== */
:root :is(.c-auth, .c-pub) .c-form-group { margin: 0; }
/* wiersz: etykieta 12,5 px nad wartością 17 px; etykieta bywa samym węzłem tekstowym (#first-label) */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row {
  display: block; gap: 0; min-height: 60px; padding: 9px 16px 8px; margin: 0;
  font: 500 12.5px/16px var(--font-sans); letter-spacing: 0; color: var(--c-text-2); cursor: text;
  transition: background-color 160ms var(--ease-standard), color 140ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row > .c-label { font: inherit; color: inherit; }
/* dopisek „(opcjonalnie)” to treść (jedyna informacja, że pole można pominąć) – --c-text-2 (5,6:1), nie --c-text-3 (3,47:1,
   tylko placeholdery). Lżejszy od etykiety wagą 400 (T7, audyt a11y r2) */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row .muted { color: var(--c-text-2); font-weight: 400; }
/* fokus wiersza jak w portalu i panelu: kolor etykiety + tło --c-press na całej szerokości, bez paska po lewej (pasek inset 3 px
   przycinał się na łuku karty – „sierp” w pierwszym i ostatnim wierszu, T7 r2). Wskaźnik dla klawiatury przy liście wyboru niżej */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row:focus-within { color: var(--c-accent-text); background-color: var(--c-press); }
/* linie między wierszami: tylko gdy nad wierszem jest widoczny wiersz (ukryty pierwszy wiersz nie zostawia linii na górze karty) */
:root .c-form-group .c-form-row::before { content: none; }
:root .c-form-group :not(.hidden) ~ .c-form-row::before,
:root .c-form-group :not(.hidden) ~ .c-rows > .c-form-row:first-child::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--c-sep); pointer-events: none;
}
@media (min-resolution: 2dppx) {
  :root .c-form-group :not(.hidden) ~ .c-form-row::before,
  :root .c-form-group :not(.hidden) ~ .c-rows > .c-form-row:first-child::before { transform: scaleY(.5); transform-origin: top; }
}
/* pole „gołe” w wierszu: 17 px, bez tła i obwódki (specyficzność ponad ui.css i style.css) */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row .c-bare:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]) {
  display: block; width: 100%; height: 28px; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0;
  background-color: transparent; box-shadow: none; outline: none; font: var(--t-body); letter-spacing: var(--tr-body); color: var(--c-text);
  -webkit-text-fill-color: currentColor; caret-color: var(--c-accent); animation: none;
}
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row textarea.c-bare:not([type=checkbox]):not([type=radio]) { height: auto; min-height: 44px; padding: 2px 0 4px; line-height: 22px; resize: vertical; }
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row select.c-bare:not([multiple]):not([type=checkbox]):not([type=radio]) {
  padding-right: 22px; cursor: pointer; text-overflow: ellipsis;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 1.5l3 3M3 7.5l3 3 3-3' fill='none' stroke='%238d86a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 0 center / 12px no-repeat;
}
/* lista wyboru bez wyboru („– wybierz –”, value "") wygląda jak podpowiedź, wybrana wartość jak wpisany tekst; opcje w rozwiniętej
   liście (Windows, Android) zostają w --c-text. Ten sam łańcuch :not() co reguła pola wyżej – inaczej przegrywa specyficznością */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row select.c-bare:required:invalid:not([multiple]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]) { color: var(--c-text-3); }
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row select.c-bare option { color: var(--c-text); }
/* fokus z klawiatury na liście wyboru (bez karetki) – pierścień wokół pola, jak przy kierunkowym #f-phoneCc */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row select.c-bare:focus-visible:not([multiple]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]) { border-radius: 6px; box-shadow: var(--ring); }
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row .c-bare::placeholder { color: var(--c-text-3); -webkit-text-fill-color: var(--c-text-3); opacity: 1; }
/* autouzupełnianie Chrome / Safari bez żółtego tła */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row .c-bare:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--c-text); }
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row:focus-within .c-bare:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--c-press) inset; }

/* błąd pola: po próbie wysyłki (:user-invalid) albo wskazany przez ui-public.js (.is-invalid) */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row:has(> .c-bare:user-invalid:not(:focus)),
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row:has(.phone-row > .c-bare:user-invalid:not(:focus)) { color: var(--red-600); }
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row.is-invalid { color: var(--red-600); background-color: var(--red-50); animation: c-shake 320ms var(--ease-out); }
/* ✓ zgodności „Powtórz…” (ui-public.js, SPEC 6) – zielone kółko 22 px z ui.css, wiersz robi mu miejsce po prawej */
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row.is-ok { padding-right: 48px; }

/* wiersz telefonu: kierunkowy | numer (#f-phoneCc bez name, #f-phoneCcEcho tylko do odczytu). Kierunkowy to wartość – --c-text
   (był --c-text-2 i wyglądał jak podpowiedź obok „600100200”), echo w powtórzeniu tylko do odczytu – --c-text-2 */
:root .c-pub .phone-row { display: flex; align-items: center; gap: 0; margin-top: 2px; min-width: 0; }
:root .c-pub .phone-row select#f-phoneCc {
  flex: 0 0 auto; width: 7rem; max-width: 55%; min-width: 0; height: 28px; min-height: 0; margin: 0; padding: 0 20px 0 0;
  border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 1.5l3 3M3 7.5l3 3 3-3' fill='none' stroke='%238d86a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 4px center / 11px no-repeat;
  box-shadow: none; font: var(--t-body); letter-spacing: var(--tr-body); color: var(--c-text); text-overflow: ellipsis; cursor: pointer;
}
:root .c-pub .phone-row select#f-phoneCc:focus { background-color: transparent; box-shadow: none; color: var(--c-accent-text); }
:root .c-pub .phone-row select#f-phoneCc:focus-visible { border-radius: 6px; box-shadow: var(--ring); }
:root .c-pub .phone-row .phone-cc-echo {
  flex: 0 0 auto; display: block; min-height: 0; height: 28px; padding: 0 12px 0 0; border: 0; border-radius: 0; background: none;
  font: var(--t-body); letter-spacing: var(--tr-body); line-height: 28px; color: var(--c-text-2); font-variant-numeric: tabular-nums;
}
:root :is(.c-auth, .c-pub, #signup-form) .c-form-row .phone-row > .c-bare:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]) {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 0 0 12px; border-left: 1px solid var(--c-sep-strong);
}

/* zgoda – karta z kwadratem 24 px (c-check z ui.css), tekst zgody i data-version bez zmian */
:root .c-pub .consent {
  display: flex; flex-direction: row; align-items: flex-start; gap: 14px; margin: 14px 0 0; padding: 14px 16px; border: 0; border-radius: var(--r-card);
  background: var(--c-surface); box-shadow: var(--el-1); font: 400 13px/18px var(--font-sans); letter-spacing: 0; color: var(--c-text-2); cursor: pointer;
  transition: box-shadow 160ms var(--ease-standard), background-color 160ms var(--ease-standard);
}
:root .c-pub .consent:hover, :root .c-pub .consent:has(input:checked) { border-color: transparent; background: var(--c-surface); box-shadow: var(--el-1); }
:root .c-pub .consent:has(input:focus-visible) { box-shadow: var(--el-1), var(--ring); }
:root .c-pub .consent input.c-check { margin: -3px 0 0; }
:root .c-pub .consent input.c-check:focus { box-shadow: none; }
:root .c-pub .consent span > .ico { display: none; }
:root .c-pub .consent a { display: inline; padding: 0; margin: 0; font-weight: 600; color: var(--c-accent-text); }
:root .c-pub .consent.is-invalid { box-shadow: var(--el-1), inset 0 0 0 1.5px var(--red-500); animation: c-shake 320ms var(--ease-out); }

/* nagłówki sekcji (legend) – Caption 2 wersalikami z glifem 14 px (ikony przez --li, JS zmienia textContent legendy) */
:root .c-pub fieldset.fs { margin: 0; padding: 0; border: 0; min-width: 0; background: none; }
:root .c-pub fieldset.fs + fieldset.fs, :root #signup-form fieldset.fs + fieldset.fs { margin-top: 0; padding-top: 0; border-top: 0; }
:root .c-pub fieldset.fs legend {
  float: left; width: 100%; display: flex; align-items: center; gap: 6px; margin: 26px 0 7px; padding: 0 16px;
  font: var(--t-caption2); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-text-2);
}
:root .c-pub fieldset.fs legend + * { clear: both; }
:root .c-pub fieldset.fs legend::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin: 0; background: var(--c-accent);
  -webkit-mask: var(--li, none) center / contain no-repeat; mask: var(--li, none) center / contain no-repeat;
}
/* ikony legend wydarzeń (dziś pełne fioletowe kwadraty – kontrakt-publiczne 6.1); zapisy mają --li z public.css:333–335 */
:root .c-fs-b2b > legend { --li: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.5' width='16' height='17' rx='2'/%3E%3Cpath d='M9.5 20.5v-4h5v4M8.5 7.5h1M14.5 7.5h1M8.5 11.5h1M14.5 11.5h1'/%3E%3C/svg%3E"); }
:root .c-fs-person > legend { --li: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
:root .c-fs-level > legend { --li: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.25 4.1 1 5.8L12 16.9l-5.25 2.7 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E"); }
:root .c-fs-stay > legend { --li: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V19a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19z'/%3E%3Cpath d='M9.5 20.5v-6h5v6'/%3E%3C/svg%3E"); }
:root .c-fs-msg > legend { --li: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.2A8 8 0 1 1 20 12z'/%3E%3C/svg%3E"); }
/* legenda bez ikony (np. nowa sekcja bez --li) – bez pustego kwadratu (SPEC 6: ::before { display: none }) */
:root .c-pub fieldset.fs:not(#who-section, #parent-section, #acct-section, .c-fs-b2b, .c-fs-person, .c-fs-level, .c-fs-stay, .c-fs-msg) > legend::before { display: none; }

/* stopka grupy (iOS: przypis pod kartą) */
:root .c-pub #acct-hint { margin: 7px 16px 0; padding: 0; font: var(--t-footnote); letter-spacing: 0; color: var(--c-text-2); }

/* notka informacyjna (#new-hint, #existing-hint) */
:root .c-pub :is(#new-hint, #existing-hint) {
  display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border: 0; border-radius: 16px;
  background: var(--lav-50); box-shadow: inset 0 0 0 1px var(--lav-100); color: var(--lav-700); font: 400 13.5px/19px var(--font-sans); letter-spacing: 0;
}
:root .c-pub :is(#new-hint, #existing-hint) > .ico { flex: 0 0 auto; width: 28px; height: 28px; margin: -4px 0 0; border-radius: 7px; }
:root .c-pub #existing-hint { margin-top: 16px; }

/* =====================================================================
   3. PRZEJŚCIA KROKÓW (push iOS: dalej z prawej, wstecz z lewej – kierunek z ui-public.js, ruch nr 29)
   ===================================================================== */
@keyframes c-pub-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
/* push: ruch (470 ms --spring) osobno od krycia (180 ms od .35) – poprzedni krok znika od razu (.hidden), więc nowy nie może
   startować od opacity 0 (pusto pod paskiem przez 4–5 klatek, ekran mrugał); iOS przy push w ogóle nie przygasa */
@keyframes c-push-in { from { transform: translate3d(var(--push), 0, 0); } to { transform: none; } }
@keyframes c-push-back { from { transform: translate3d(calc(-1 * var(--push)), 0, 0); } to { transform: none; } }
@keyframes c-push-fade { from { opacity: .35; } to { opacity: 1; } }
/* #reset-step-ask celowo poza listą: pokazuje się tylko razem z wejściem #pane-reset (klik #link-forgot) – własne c-pub-in
   mnożyło krycie z c-push-fade panelu (pierwsze ok. 40 ms pusto, ruch po skosie). #reset-step-sent i #reset-confirm pojawiają się
   w już widocznym panelu, więc wchodzą same (T7 r2) */
:root :is(#step-mode, #step-city, #step-form, #ev-panel, #reset-step-sent, #reset-confirm):not(.hidden),
:root .c-auth .auth-pane:not(.hidden) { animation: c-pub-in 320ms var(--ease-out) backwards; }
:root[data-ui-dir="fwd"] :is(#step-mode, #step-city, #step-form, #pane-login, #pane-reset):not(.hidden) { animation: c-push-fade 180ms var(--ease-out) backwards, c-push-in var(--d-soft) var(--spring) backwards; }
:root[data-ui-dir="back"] :is(#step-mode, #step-city, #step-form, #pane-login, #pane-reset):not(.hidden) { animation: c-push-fade 180ms var(--ease-out) backwards, c-push-back var(--d-soft) var(--spring) backwards; }
:root #step-done:not(.hidden) { animation: c-pub-in 360ms var(--ease-out) backwards; }

/* =====================================================================
   4. LANDING (landing.php) – logo 120 px, jedno zdanie, jeden główny przycisk (SPEC 6)
   ===================================================================== */
:root main.landing {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--sa-t) + 32px) 24px calc(var(--sa-b) + 32px); background: none;
}
:root .landing-card { --logo: 120px; width: 100%; max-width: 380px; text-align: center; }
:root .landing .arton-logo.arton-logo-lg { margin: 0 auto 26px; animation: c-pub-logo 560ms var(--spring) backwards; }
@keyframes c-pub-logo { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.9); } to { opacity: 1; transform: none; } }
:root .landing .landing-sub {
  margin: 0 auto; max-width: 30ch; font: 400 17px/24px var(--font-sans); letter-spacing: var(--tr-body); color: var(--c-text-2); text-wrap: balance;
  animation: c-pub-in 420ms var(--ease-out) 90ms backwards;
}
:root .landing-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
:root .landing-actions a {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--ctl-l); padding: 0 20px;
  border: 0; border-radius: var(--r-btn-lg); font: 600 17px/1 var(--font-sans); letter-spacing: -0.016em; text-decoration: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  transition: transform var(--d-press) var(--ease-out), background-color 140ms var(--ease-standard), box-shadow 160ms var(--ease-standard), opacity 140ms var(--ease-standard);
  animation: c-pub-in var(--d-soft) var(--spring) backwards;
}
:root .landing-actions a:nth-child(1) { animation-delay: 140ms; }
:root .landing-actions a:nth-child(2) { animation-delay: 220ms; }
:root .landing-actions a:nth-child(3) { animation-delay: 300ms; }
:root .landing-actions a.landing-primary { background: var(--c-accent); color: #fff; box-shadow: var(--sh-accent); }
/* drugi przycisk: na tle --c-canvas tinted (--lav-100) zlewał się z tłem (1,04:1) – biała karta z --el-1 (jak .rodo-back, .btn-white).
   Odejście od SPEC 6 (tinted = --lav-100) – decyzja T7 */
:root .landing-actions a.landing-tinted { background: var(--c-surface); color: var(--c-accent-text); box-shadow: var(--el-1); }
:root .landing-actions a.landing-plain { height: 44px; margin-top: 2px; background: transparent; color: var(--c-accent-text); box-shadow: none; }
@media (hover: hover) {
  :root .landing-actions a.landing-primary:hover { background: var(--lav-700); box-shadow: var(--sh-accent-hover); transform: none; text-decoration: none; }
  :root .landing-actions a.landing-tinted:hover { background: var(--lav-50); transform: none; text-decoration: none; }
  :root .landing-actions a.landing-plain:hover { background: var(--lav-50); transform: none; text-decoration: none; }
}
:root .landing-actions a:active, :root .landing-actions a.is-pressed { transform: scale(.97); transition-duration: var(--d-press); }
:root .landing-actions a.landing-primary:active, :root .landing-actions a.landing-primary.is-pressed { background: var(--lav-700); box-shadow: var(--sh-accent); }
:root .landing-actions a.landing-tinted:active, :root .landing-actions a.landing-tinted.is-pressed { background: var(--lav-200); }
:root .landing-actions a.landing-plain:active, :root .landing-actions a.landing-plain.is-pressed { transform: none; opacity: .5; }
:root .landing-actions a:focus-visible { outline: none; box-shadow: var(--ring); }
:root .landing-actions a.landing-tinted:focus-visible { box-shadow: var(--el-1), var(--ring); }
/* wejście przez przejście (wstecz z zapisów lub logowania): logo dolatuje z poprzedniej strony, zdanie i przyciski są od razu.
   Bez tego pod przelotem szło drugi raz całe wejście (logo od opacity 0 i scale .9, przyciski po 140–300 ms). Klasę ustawia
   pagereveal z e.viewTransition (landing.php <head>, ui-public.js 0); przy zwykłym wczytaniu wejście ze stagger zostaje. */
:root.c-vt-arrived .landing .arton-logo.arton-logo-lg, :root.c-vt-arrived .landing .landing-sub, :root.c-vt-arrived .landing-actions a { animation: none; }
@media (min-width: 701px) {
  :root .landing-card { --logo: 136px; }
}

/* =====================================================================
   5. LOGOWANIE, RESET HASŁA, POWRÓT Z PŁATNOŚCI (rodzic_login.php, rodzic_reset.php, pay_return.php)
   ===================================================================== */
:root body.auth-page main.c-auth {
  flex: 1 0 auto; width: 100%; max-width: calc(400px + 2 * var(--pub-pad)); margin: 0 auto;
  padding: calc(var(--sa-t) + clamp(28px, 7vh, 72px)) var(--pub-pad) calc(var(--sa-b) + 40px);
}
:root body.auth-page main.c-auth > .panel { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; overflow: visible; }
.c-auth-brand { --logo: 96px; display: flex; flex-direction: column; align-items: center; margin: 0 0 22px; }
:root .c-auth .auth-pane { display: flex; flex-direction: column; gap: 16px; }
:root .c-auth .auth-head { margin: 0; text-align: center; }
:root .c-auth .auth-title, :root .c-auth .c-pay-msg, :root .c-auth #wait-text {
  margin: 0; font: var(--t-title1); letter-spacing: var(--tr-title1); color: var(--c-title); text-align: center; text-wrap: balance;
}
:root .c-auth #pay-status :is(.c-pay-msg, #wait-text) { max-width: 26ch; }   /* Title 1 jak „Sprawdź skrzynkę” i „Konto założone” (T7 r2) */
:root .c-auth .auth-sub { margin: 8px auto 0; max-width: 34ch; font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--c-text-2); text-align: center; text-wrap: pretty; }
:root .c-auth .auth-sub strong { color: var(--c-text); font-weight: 600; overflow-wrap: anywhere; }
:root .c-auth .c-auth-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
:root .c-auth .c-auth-links { margin: 0; }
:root .c-auth p.c-auth-note { margin: -4px 12px 0; font: var(--t-footnote); letter-spacing: 0; color: var(--c-text-2); text-align: center; text-wrap: pretty; }
:root #pane-login > .sms-status { margin: 0; }
/* błąd logowania z serwera – karta pól wstrząsa się razem z komunikatem (SPEC 6) */
:root #pane-login:has(> .sms-status.error) .c-form-group { animation: c-shake 320ms var(--ease-out); }
/* wejście z linku do wydarzenia (rodzic_login.php?wydarzenie=…) – karta wydarzenia nad formularzem */
:root .c-auth .c-auth-event { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; background: var(--c-surface); box-shadow: var(--el-1); }
:root .c-auth .c-auth-event img { flex: 0 0 auto; width: 56px; height: 78px; border-radius: 9px; object-fit: cover; }
:root .c-auth .c-auth-event p { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; font: var(--t-footnote); color: var(--c-text-2); }
:root .c-auth .c-auth-event .c-auth-event-k { font: var(--t-caption2); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--lav-600); }
:root .c-auth .c-auth-event strong { font: 600 17px/22px var(--font-sans); letter-spacing: -0.012em; color: var(--c-text); }
:root .c-auth .c-auth-event .c-auth-event-hint { margin-top: 4px; color: var(--c-text); }
/* „Pierwszy raz w ArtOn?” – lista z dwoma wierszami do zapisów */
:root .c-auth h2.c-section-h { margin: 18px 16px -9px; font: var(--t-caption2); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--c-text-2); }
:root .c-auth .c-auth-first .c-row > img.ico { width: 32px; height: 32px; margin: 0; border-radius: 8px; }
:root .c-auth .c-auth-first .c-row .c-row-title { font-size: 16px; line-height: 21px; }
:root .c-auth .c-auth-first .c-chev { transition: transform 200ms var(--ease-out); }
@media (hover: hover) { :root .c-auth .c-auth-first .c-row:hover .c-chev { transform: translateX(2px); } }
/* reset: logo tylko na ekranie logowania, w resecie „‹ Wróć do logowania” u góry (jak pasek nawigacji iOS) */
:root body.auth-page:has(#pane-reset:not(.hidden)) .c-auth-brand { display: none; }
:root .c-auth .c-auth-back { margin: -10px 0 0 -8px; font: 400 17px/22px var(--font-sans); }
:root .c-auth .c-auth-back a#link-back-login { gap: 2px; padding: 0 10px 0 2px; font-weight: 400; letter-spacing: -0.012em; }
:root .c-auth .c-auth-back a#link-back-login > svg.ui { width: 24px; height: 24px; font-size: 24px; margin: 0; stroke-width: 2.3; }
@media (hover: hover) { :root .c-auth .c-auth-back a#link-back-login:hover > svg.ui { transform: translateX(-2px); } }
:root .c-auth :is(#reset-step-ask, #reset-step-sent) { display: flex; flex-direction: column; gap: 16px; }
:root #reset-sent-to { color: var(--c-text); font-weight: 600; overflow-wrap: anywhere; }
:root #reset-step-sent .auth-sub { max-width: 36ch; }
/* przycisk pod treścią (ekran sukcesu jak w zapisach) – biała karta jak drugi przycisk landingu (tinted zlewa się z tłem) */
:root .c-auth .c-btn-card { --btn-bg: var(--c-surface); --btn-fg: var(--c-accent-text); --btn-bg-h: var(--lav-50); --btn-bg-a: var(--lav-200); --btn-sh: var(--el-1); }
:root .c-auth .c-btn-card:focus-visible { box-shadow: var(--el-1), var(--ring); }
/* kod z SMS-a – cyfry rozstrzelone, w wierszu grupy */
:root .c-auth .c-form-row #reset-code.c-bare { font: 500 20px/28px var(--font-sans); letter-spacing: .3em; text-align: left; padding: 0; font-variant-numeric: tabular-nums lining-nums; }
:root .c-auth .c-form-row #reset-code.c-bare::placeholder { font: var(--t-body); letter-spacing: var(--tr-body); }
/* stany bez formularza (link wygasł, link w innej przeglądarce) */
:root .c-auth-state .auth-head { margin-bottom: 8px; }
:root .c-auth-state .c-auth-links { margin-top: -4px; }

/* powrót z płatności – pięć stanów jako ekran z kafelkiem 64 px nad tekstem (login, notfound, waiting, paid, failed) */
:root .c-payret .c-auth-brand { --logo: 52px; margin-bottom: 36px; }
:root .c-auth h1.c-auth-caption { margin: 10px 0 0; font: 600 13px/18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); }
:root #pay-status.c-pay-state { display: flex; flex-direction: column; align-items: center; text-align: center; animation: c-pub-in 360ms var(--ease-out) backwards; }
:root #pay-status .c-auth-ico, :root #pay-status .c-done-ico { margin: 0 auto 18px; }
:root #pay-status p { margin: 0; }
:root #pay-status .c-pay-msg.is-bad { color: var(--red-600); }
:root #pay-status p.c-pay-meta { margin-top: 8px; max-width: 32ch; font: var(--t-subhead); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
/* kwota (zaksięgowana, oczekiwanie) jako największy element – jak „Do zapłaty teraz” w portalu (ui-portal.css, SPEC 1.2 kwota-hero):
   miesiąc jako etykieta nad kwotą, kwota 48 px tabular, „zł” mniejsze. Przy błędzie z JS (#wait-text.error) wraca do przypisu */
:root #pay-status p.c-pay-amount { display: flex; flex-direction: column; align-items: center; margin-top: 18px; }
:root #pay-status .c-pay-month { font: 600 14px/18px var(--font-sans); letter-spacing: -0.006em; color: var(--c-text-2); }
:root #pay-status .c-pay-sum { margin-top: 2px; font: 700 48px/54px var(--font-display); font-size: min(48px, 12.5vw); letter-spacing: -0.03em; color: var(--c-title); font-variant-numeric: tabular-nums; white-space: nowrap; }   /* 12,5vw: „12 345,00 zł” mieści się przy 320 px */
:root #pay-status .c-pay-sum small { font: 600 26px/1 var(--font-display); letter-spacing: -0.01em; color: var(--lav-600); }
:root #pay-status:has(#wait-text.error) p.c-pay-amount { flex-direction: row; justify-content: center; gap: 0 .3em; margin-top: 8px; }
:root #pay-status:has(#wait-text.error) :is(.c-pay-month, .c-pay-sum, .c-pay-sum small) { margin: 0; font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--c-text-2); }
:root #pay-status:has(#wait-text.error) .c-pay-month::after { content: "\00a0·" / ""; }   /* separator tylko dla oka (czytnik ma „: ” z .c-sr) */
:root #pay-status a.btn-link { margin-top: 28px; }
/* oczekiwanie: pierścień kręci się ok. 34 s (tyle trwa 10 zapytań skryptu strony), potem zegar; wynik z JS przełącza kafelek przez :has().
   72 px jak ✓ zaksięgowanej płatności i inne ekrany sukcesu (.c-done-ico) */
.c-pay-wait { position: relative; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: var(--c-tint-bg); }
.c-pay-wait::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 3px solid var(--lav-200); border-top-color: var(--c-accent); animation: c-spin .9s linear 38, c-fade-out 240ms var(--ease-out) 34s forwards; }
.c-pay-wait::after {
  content: ""; position: absolute; inset: 0; background: var(--c-accent); opacity: 0; animation: c-fade-in 240ms var(--ease-out) 34.1s forwards;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / 30px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / 30px no-repeat;
}
:root #pay-status:has(#wait-text[style*="font-weight"]) .c-pay-wait { background: var(--green-500); box-shadow: 0 12px 26px -12px rgba(63, 165, 111, .75); animation: c-pop-in var(--d-pop) var(--spring-pop); }
:root #pay-status:has(#wait-text.error) .c-pay-wait { background: var(--tile-red); animation: c-pop-in var(--d-pop) var(--spring-pop); }
:root #pay-status:has(#wait-text[style*="font-weight"], #wait-text.error) .c-pay-wait::before { display: none; }
:root #pay-status:has(#wait-text[style*="font-weight"], #wait-text.error) .c-pay-wait::after { background: #fff; opacity: 1; animation: none; }
:root #pay-status:has(#wait-text[style*="font-weight"]) .c-pay-wait::after {
  -webkit-mask-size: 36px; mask-size: 36px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5 10 17l8.5-9.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5 10 17l8.5-9.5'/%3E%3C/svg%3E");
}
:root #pay-status:has(#wait-text.error) .c-pay-wait::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5h.01'/%3E%3C/svg%3E");
}
/* #wait-text po błędzie dostaje z JS className „sms-status error” – zostaje tytułem w kolorze błędu (bez karty) */
:root #pay-status #wait-text.sms-status { display: block; padding: 0; border: 0; background: none; box-shadow: none; color: var(--red-600); animation: none; }
:root #pay-status #wait-text.sms-status::before { content: none; }

/* =====================================================================
   6. ZAPISY (zapisy.html) i ZAPIS NA WYDARZENIE (wydarzenia-zapis.html)
   ===================================================================== */
:root body.signup-page main.c-pub {
  flex: 1 0 auto; width: 100%; max-width: calc(var(--pub-col) + 2 * var(--pub-pad)); margin: 0 auto;
  padding: 10px var(--pub-pad) calc(var(--sa-b) + 32px); overflow-x: clip;
}
:root body.signup-page:not(:has(.c-onb-bar)) main.c-pub { padding-top: calc(var(--sa-t) + 28px); }
/* kroki bez kart – treść na tle, karty mają tylko grupy i listy (iOS) */
:root body.signup-page main.c-pub > .panel {
  position: relative; overflow: visible; margin: 0; padding: 0 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none;
}
:root :is(#step-city, #step-form, #step-done)::before { content: none; display: none; }
/* informacja o zalogowanym rodzicu (JS: innerHTML z imieniem i linkiem do portalu) */
:root .c-pub-head #logged-info {
  margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--c-surface); box-shadow: var(--el-1);
  font: 400 14px/19px var(--font-sans); letter-spacing: 0; color: var(--c-text-2);
}
:root .c-pub-head #logged-info strong { color: var(--c-text); }
:root .c-pub-head #logged-info a { display: inline; margin: 0; padding: 0; font-weight: 600; color: var(--c-accent-text); }

/* pasek kroków: „‹ Wstecz” (backToMode / backToCity) + „Krok N z 2” z segmentami postępu (SPEC 6) */
:root .c-onb-bar {
  position: sticky; top: 0; z-index: 20; flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(var(--onb-h) + var(--sa-t)); padding: var(--sa-t) max(4px, calc((100% - var(--pub-col)) / 2 - 8px)) 0;
  background: var(--glass-canvas); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  visibility: hidden;
}
:root body:has(#step-city:not(.hidden)) .c-onb-bar, :root body:has(#step-form:not(.hidden)) .c-onb-bar { visibility: visible; }
@supports (animation-timeline: scroll()) {
  /* jak pasek nawigacji iOS: przezroczysty nad tytułem, szkło i linia dopiero, gdy treść wjeżdża pod pasek */
  :root .c-onb-bar {
    background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;   /* strona bez przewijania = oś nieaktywna = pasek przezroczysty */
    animation: c-pub-bar-glass linear both; animation-timeline: scroll(root); animation-range: 0 32px;
  }
}
@keyframes c-pub-bar-glass {
  from { background-color: rgba(243, 239, 250, 0); -webkit-backdrop-filter: blur(0px) saturate(100%); backdrop-filter: blur(0px) saturate(100%); box-shadow: 0 .5px 0 rgba(43, 38, 55, 0); }
  to { background-color: var(--glass-canvas); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 .5px 0 var(--c-sep-strong); }
}
:root .c-onb-bar .c-onb-back {
  grid-column: 1; grid-row: 1; justify-self: start; display: none; align-items: center; gap: 1px; height: 44px; min-height: 0; padding: 0 12px 0 4px;
  border: 0; border-radius: 10px; background: none; box-shadow: none; font: 400 17px/1 var(--font-sans); letter-spacing: -0.012em; color: var(--c-accent-text);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 140ms var(--ease-standard), background-color 140ms;
}
:root .c-onb-bar .c-onb-back svg.ui { width: 24px; height: 24px; font-size: 24px; margin: 0; stroke-width: 2.3; transition: transform 200ms var(--ease-out); }
:root .c-onb-bar .c-onb-back:hover { background: none; border: 0; }
@media (hover: hover) {
  :root .c-onb-bar .c-onb-back:hover { background: var(--lav-50); }
  :root .c-onb-bar .c-onb-back:hover svg.ui { transform: translateX(-2px); }
}
:root .c-onb-bar .c-onb-back:active, :root .c-onb-bar .c-onb-back.is-pressed { transform: none; opacity: .45; background: none; }
:root .c-onb-bar .c-onb-back:focus-visible { outline: none; box-shadow: var(--ring); }
:root body:has(#step-city:not(.hidden)) .c-onb-bar .c-back-mode, :root body:has(#step-form:not(.hidden)) .c-onb-bar .c-back-city { display: inline-flex; }
.c-steps { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c-steps-label { font: 600 12px/14px var(--font-sans); letter-spacing: 0; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.c-steps-label > span { display: none; }
:root body:has(#step-city:not(.hidden)) .c-step-1, :root body:has(#step-form:not(.hidden)) .c-step-2 { display: inline; }
.c-steps-bar { display: flex; gap: 4px; }
.c-steps-bar i { position: relative; width: 28px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--lav-200); }
.c-steps-bar i::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--spring); }
:root body:has(#step-city:not(.hidden)) .c-steps-bar i:first-child::before,
:root body:has(#step-form:not(.hidden)) .c-steps-bar i::before { transform: scaleX(1); }
:root body:has(#step-form:not(.hidden)) .c-steps-bar i:last-child::before { transition-delay: 80ms; }
@supports not selector(:has(*)) {
  :root .c-onb-bar { display: none; }
}

/* eyebrow trybu na krokach miasta i formularza – samym CSS z #mode-input[value] (SPEC 6, wariant A) */
.c-step-eyebrow > [class^="c-mode-"] { display: none; }
:root body:has(#mode-input[value="new"]) .c-mode-new,
:root body:has(#mode-input[value="adult"]) .c-mode-adult,
:root body:has(#mode-input[value="existing"]) .c-mode-existing { display: inline; }

/* tytuł formularza: JS wpisuje „2. …”, numer kroku jest już w pasku – „2.” bez szerokości (tekst dla czytnika zostaje),
   spację po nim zjada wcięcie pierwszego wiersza */
:root #step-form > #form-title { text-indent: -.19em; }
:root #step-form > #form-title::first-letter { font-size: 0; line-height: 0; letter-spacing: 0; }

/* lista wyboru (tryb, miasto) – inset grouped: kafelek 44 px, tytuł, podpis, chevron (SPEC 6) */
:root #step-mode .city-choice, :root #step-city .city-choice {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 22px 0 0; padding: 0;
  background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--el-1); overflow: hidden;
}
:root #step-mode .city-btn, :root #step-city .city-btn {
  position: relative; flex: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 10px; grid-template-areas: "ico title chev" "ico sub chev";
  align-items: center; column-gap: 14px; row-gap: 1px; width: 100%; height: auto; min-height: 72px; margin: 0; padding: 12px 18px 12px 16px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--c-text); text-align: left; white-space: normal; transform: none;
  font: var(--t-body); letter-spacing: var(--tr-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms var(--ease-standard);
}
:root #step-city .city-btn { grid-template-areas: "ico title chev"; min-height: 64px; }
:root #step-mode .city-btn + .city-btn::before, :root #step-city .city-btn + .city-btn::before {
  content: ""; position: absolute; top: 0; left: 74px; right: 0; height: 1px; background: var(--c-sep);
}
@media (min-resolution: 2dppx) {
  :root #step-mode .city-btn + .city-btn::before, :root #step-city .city-btn + .city-btn::before { transform: scaleY(.5); transform-origin: top; }
}
:root #step-mode .city-btn > .ico, :root #step-city .city-btn > .ico { grid-area: ico; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 11px; background: none; box-shadow: var(--el-tile); }
:root #step-mode .city-btn > strong, :root #step-city .city-btn > strong { grid-area: title; align-self: end; font: var(--t-headline); letter-spacing: var(--tr-headline); color: var(--c-text); }
:root #step-city .city-btn > strong { align-self: center; }
:root #step-mode .city-btn > small { grid-area: sub; align-self: start; font: var(--t-footnote); letter-spacing: 0; color: var(--c-text-2); }
:root #step-mode .city-btn::after, :root #step-city .city-btn::after {
  content: ""; grid-area: chev; justify-self: end; width: 9px; height: 9px; margin: 0 2px 0 0; background: none; border-right: 2px solid var(--n-400); border-bottom: 2px solid var(--n-400);
  border-radius: 1px; transform: rotate(-45deg); -webkit-mask: none; mask: none; transition: transform 200ms var(--ease-out), border-color 140ms;
}
@media (hover: hover) {
  :root #step-mode .city-btn:hover, :root #step-city .city-btn:hover { background: var(--n-50); border: 0; transform: none; box-shadow: none; }
  :root #step-mode .city-btn:hover::after, :root #step-city .city-btn:hover::after { transform: translateX(2px) rotate(-45deg); border-color: var(--c-accent); }
}
:root #step-mode .city-btn:active, :root #step-city .city-btn:active,
:root #step-mode .city-btn.is-pressed, :root #step-city .city-btn.is-pressed { background: var(--c-press); transform: none; box-shadow: none; transition-duration: 0ms; }
:root #step-mode .city-btn:focus-visible, :root #step-city .city-btn:focus-visible { outline: none; border-radius: 0; box-shadow: var(--ring-inset); }
:root #step-mode .c-step-lead + .city-choice { margin-top: 18px; }
:root #step-mode .c-pub-foot { margin-top: 20px; }

/* formularz: pigułka miejsca zajęć z „Zmień” */
:root #step-form > p.c-place {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 6px; max-width: 100%; height: 34px; margin: 14px 0 0; padding: 0 4px 0 11px;
  border-radius: 17px; background: var(--c-tint-bg); color: var(--c-accent-text); font: 600 14px/1 var(--font-sans); letter-spacing: -0.006em;
}
:root #step-form > p.c-place > svg.ui { flex: 0 0 auto; width: 16px; height: 16px; font-size: 16px; margin: 0; stroke-width: 2.2; }
:root #step-form > p.c-place strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-accent-text); font-weight: 600; }
:root #step-form > p.c-place a.c-place-change {
  position: relative; display: inline-flex; align-items: center; height: 26px; margin: 0 0 0 4px; padding: 0 10px; border-radius: 13px;
  background: #fff; color: var(--c-accent-text); font: 600 13px/1 var(--font-sans); text-decoration: none;
  box-shadow: 0 1px 2px rgba(var(--ink), .08), 0 0 0 .5px rgba(var(--ink), .05); transition: transform var(--d-press) var(--ease-out), background-color 140ms;
}
:root #step-form > p.c-place a.c-place-change::after { content: ""; position: absolute; inset: -9px -6px; }
:root #step-form > p.c-place a.c-place-change:active, :root #step-form > p.c-place a.c-place-change.is-pressed { transform: scale(.94); background: var(--lav-50); }
:root #step-form > p.c-place a.c-place-change:focus-visible { outline: none; box-shadow: var(--ring); }
@media (hover: hover) { :root #step-form > p.c-place a.c-place-change:hover { background: var(--lav-50); text-decoration: none; } }

/* przyklejony przycisk wysyłki ze statusem nad nim (błąd walidacji widać przy przycisku – SPEC 6, .c-sticky-cta) */
:root .c-sticky-cta {
  position: sticky; bottom: 0; z-index: 10; display: flex; flex-direction: column; gap: 10px;
  margin: 22px calc(-1 * var(--pub-pad)) 0; padding: 12px var(--pub-pad) calc(12px + var(--sa-b));
  background: var(--glass-canvas); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 -.5px 0 var(--c-sep);
}
:root .c-sticky-cta > :is(#signup-status, #ev-status) { margin: 0; }
:root :is(#signup-form, #ev-form) .c-sticky-cta .form-actions { margin: 0; }
/* szerzej niż kolumna (main.c-pub ma max. 600 px + marginesy i overflow-x: clip, pasek nie sięga krawędzi okna): zamiast szkła
   z linią – miękkie wygaszenie bez krawędzi, treść płynnie znika pod przyciskiem (linia urywała się w powietrzu 24 px za kartą,
   a na końcu formularza zostawała samotna kreska). Odstęp nad przyciskiem bez zmian (22 + 12 = 6 + 28 px), T7 r2 */
@media (min-width: 633px) {
  :root .c-sticky-cta {
    margin-top: 6px; padding-top: 28px;
    background: linear-gradient(to top, var(--c-canvas) 62%, rgba(243, 239, 250, 0));
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
}
/* „Masz już konto? Zaloguj się” – przypis pod notką, nad paskiem: w pasku sam przycisk (74 px jak w wydarzeniach, było 100),
   a chybione stuknięcie pod przyciskiem nie trafia w link (wcześniej pole dotyku linku zaczynało się 1 px pod przyciskiem) */
:root #signup-form p.c-cta-foot { margin: 16px 0 0; padding: 0; text-align: center; font: var(--t-footnote); letter-spacing: 0; color: var(--c-text-2); }
:root body:has(#logged-info:not(.hidden)) .c-cta-foot { display: none; }

/* ekran sukcesu zapisów (renderDone: h2 > span.done-ico, p.signup-hint, .form-actions > a.primary.btn-link) */
:root #step-done { padding-top: 12px; text-align: center; }
:root #step-done h2 { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 0 10px; font: var(--t-title1); letter-spacing: var(--tr-title1); color: var(--c-title); }
:root #step-done h2:focus { outline: none; box-shadow: none; }   /* fokus z ui-public.js 5 (tabindex -1) – bez pierścienia jak .c-step-title */
:root #step-done .signup-hint { max-width: 34ch; margin: 0 auto 10px; color: var(--c-text-2); line-height: 1.45; }
:root #step-done .form-actions { margin: 26px 0 0; }
@media (min-width: 701px) { :root #step-done .form-actions > a.btn-link { max-width: 360px; margin: 0 auto; } }
/* logo nad ekranem sukcesu na osi treści (ptaszek, tytuł i przycisk są wyśrodkowane) – dojeżdża z lewej razem z wejściem ekranu.
   Warunek :has(#step-done .done-ico), nie samo :has(#step-done): renderDone() tylko zmienia id kroku (#step-form → #step-done),
   a WebKit (Safari) nie przelicza :has() po zmianie id – logo zostawało przy lewej krawędzi. Wstawienie .done-ico (innerHTML
   w renderDone) Safari przelicza od razu, w Chrome bez różnicy. */
:root .c-pub-head > .arton-logo[role] { transition: margin-left 480ms var(--spring); }
:root body:has(#step-done .done-ico) .c-pub-head > .arton-logo[role] { margin-left: calc(50% - var(--logo, 64px) / 2); }
:root body:has(#step-done .done-ico) .c-pub-head > #logged-info { align-self: center; text-align: center; }
/* to samo dla wydarzeń: sukces (#ev-done) i stan błędu (#ev-loading bez pierścienia – JS podmienił tekst, sekcja niżej) */
:root body:has(#ev-done:not([hidden])) .c-pub-head > .arton-logo[role],
:root body:has(#ev-loading:not([hidden])):not(:has(#ev-loading > .c-ev-spin)) .c-pub-head > .arton-logo[role] { margin-left: calc(50% - var(--logo, 64px) / 2); }
:root #ev-panel:has(> #ev-done:not([hidden])) > .c-step-title,
:root #ev-panel:has(> #ev-loading:not([hidden])):not(:has(> #ev-loading > .c-ev-spin)) > .c-step-title { text-align: center; }
/* sukces: tytuł zgłoszenia zmienia się w podpis nad ✓ („ZGŁOSZENIE: CAMP”) – jedyny duży tytuł to „Dziękujemy!” jak w zapisach.
   h2 zostaje w drzewie dostępności z pełną treścią (dwukropek z .c-sr widać w podpisie), T7 r2 */
:root #ev-panel:has(> #ev-done:not([hidden])) > .c-step-title {
  font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-text);
  animation: c-pub-in 360ms var(--ease-out) backwards;
}
:root #ev-panel:has(> #ev-done:not([hidden])) > .c-step-title :is(.c-step-eyebrow, #ev-label) { display: inline; margin: 0; }
:root #ev-panel:has(> #ev-done:not([hidden])) > .c-step-title .c-sr {
  position: static !important; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal;
}

/* --- wydarzenia: tytuł, pytania, wybór z ✓, umiejętności jako lista z kółkami, sukces --- */
:root #ev-panel > .c-step-title .c-step-eyebrow { margin-bottom: 4px; }
:root #ev-panel > .c-step-title #ev-label { display: block; }
:root #ev-panel > .c-step-title #ev-label::first-letter { text-transform: uppercase; }
/* wczytywanie: pierścień + „Wczytuję formularz…”, cały wiersz dopiero po 300 ms (lokalnie formularz jest po ok. 150 ms – bez mignięcia).
   Błąd: load() wpisuje komunikat przez textContent, co usuwa span.c-ev-spin – stan błędu rysuje :has() bez zmiany JS strony:
   kafelek 56 px, tekst Headline, pod spodem .c-ev-exit z wyjściem (wzór stanu pustego, SPEC 2.18). Link stoi obok #ev-loading, nie w nim. */
:root .c-pub #ev-loading {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 0;
  font: var(--t-subhead); letter-spacing: var(--tr-subhead); color: var(--c-text-2);
}
:root .c-pub #ev-loading:has(> .c-ev-spin) { animation: c-fade-in 200ms var(--ease-out) 300ms backwards; }
.c-ev-spin { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--lav-200); border-top-color: var(--c-accent); animation: c-spin .8s linear infinite; }
:root .c-pub #ev-loading:not(:has(> .c-ev-spin)) {
  flex-direction: column; gap: 0; max-width: 30ch; margin: 32px auto 0; text-align: center; text-wrap: balance;
  font: var(--t-headline); letter-spacing: var(--tr-headline); color: var(--c-text); animation: c-pub-in 360ms var(--ease-out) backwards;
}
:root .c-pub #ev-loading:not(:has(> .c-ev-spin))::before {
  content: ""; flex: 0 0 auto; width: 56px; height: 56px; margin: 0 0 14px; border-radius: 13px;
  background: url("icons/warning.svg") center / 100% 100% no-repeat; box-shadow: var(--el-tile);
}
:root .c-pub .c-ev-exit { display: none; margin: 20px 0 0; padding: 0; }
:root .c-pub #ev-loading:not([hidden]):not(:has(> .c-ev-spin)) + .c-ev-exit { display: flex; justify-content: center; animation: c-pub-in 360ms var(--ease-out) 80ms backwards; }
:root .c-pub .c-ev-exit a {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--c-surface); box-shadow: var(--el-1); color: var(--c-accent-text); font: 600 15px/1 var(--font-sans); letter-spacing: -0.008em;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-press) var(--ease-out), background-color 140ms var(--ease-standard);
}
@media (hover: hover) { :root .c-pub .c-ev-exit a:hover { background: var(--lav-50); text-decoration: none; } }
:root .c-pub .c-ev-exit a:active { transform: scale(.97); background: var(--lav-50); }
:root .c-pub .c-ev-exit a:focus-visible { outline: none; box-shadow: var(--el-1), var(--ring); }
:root .c-pub .ev-q { display: block; margin: 18px 16px 8px; font: 600 15px/20px var(--font-sans); letter-spacing: -0.006em; color: var(--c-text); text-wrap: pretty; }
:root .c-pub .ev-q:has(+ .is-invalid) { color: var(--red-600); }
:root .c-pub .ev-choices + .c-form-group { margin-top: 18px; }
/* wybór jednej odpowiedzi (rodzaj zapytania, poziom, wysokości) – lista inset grouped z ✓ po prawej (jak wybór w Ustawieniach iOS);
   lista zamiast pigułek: długie odpowiedzi i brak przeskoku wierszy, gdy ✓ pojawia się po zaznaczeniu (SPEC 6: „chipy z ✓”) */
:root .c-pub .ev-choices { display: block; margin: 0; padding: 0; background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--el-1); overflow: hidden; }
:root .c-pub .ev-choices:empty { display: none; }
:root .c-pub .ev-choices.is-invalid { box-shadow: var(--el-1), inset 0 0 0 1.5px var(--red-500); animation: c-shake 320ms var(--ease-out); }
:root .c-pub .ev-chip {
  position: relative; display: flex; flex-direction: row; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 12px 50px 12px 16px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
  font: 400 16px/21px var(--font-sans); letter-spacing: -0.01em; color: var(--c-text); -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms var(--ease-standard), color 140ms var(--ease-standard);
}
:root .c-pub .ev-chip + .ev-chip::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--c-sep); pointer-events: none; }
@media (min-resolution: 2dppx) { :root .c-pub .ev-chip + .ev-chip::before { transform: scaleY(.5); transform-origin: top; } }
:root .c-pub .ev-chip > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
:root .c-pub .ev-chip::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  opacity: 0; transform: scale(.4); transition: opacity 120ms var(--ease-standard), transform var(--d-pop) var(--spring-pop);
}
:root .c-pub .ev-chip:has(input:checked) { color: var(--c-accent-text); font-weight: 500; }
:root .c-pub .ev-chip:has(input:checked)::after { opacity: 1; transform: none; }
:root .c-pub .ev-chip:active { background: var(--c-press); transition-duration: 0ms; }
:root .c-pub .ev-chip:has(input:focus-visible) { box-shadow: var(--ring-inset); }
@media (hover: hover) { :root .c-pub .ev-chip:hover { background: var(--n-50); } }
/* rozmiar XS–XL – pięć równych pól jak segment (mieści się w 358 px) */
:root .c-pub #ev-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
:root .c-pub #ev-sizes .ev-chip {
  justify-content: center; min-height: 44px; padding: 0 4px; border-radius: 12px; background: var(--c-surface); box-shadow: var(--el-1);
  font: 600 15px/20px var(--font-sans); letter-spacing: 0; transition: background-color 160ms var(--ease-standard), color 160ms, box-shadow 160ms, transform var(--d-press) var(--ease-out);
}
:root .c-pub #ev-sizes .ev-chip::before, :root .c-pub #ev-sizes .ev-chip::after { content: none; }
:root .c-pub #ev-sizes .ev-chip:has(input:checked) { background: var(--c-accent); color: #fff; box-shadow: var(--sh-accent); }
:root .c-pub #ev-sizes .ev-chip:active { transform: scale(.94); background: var(--c-surface); }
:root .c-pub #ev-sizes .ev-chip:has(input:checked):active { background: var(--lav-700); }
:root .c-pub #ev-sizes .ev-chip:has(input:focus-visible) { box-shadow: var(--el-1), var(--ring); }
@media (hover: hover) { :root .c-pub #ev-sizes .ev-chip:hover:not(:has(input:checked)) { background: var(--n-50); } }
/* umiejętności – lista inset grouped z kółkiem wyboru 22 px */
:root .c-pub .ev-skills {
  display: block; margin: 0; padding: 0; background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--el-1); overflow: hidden;
}
:root .c-pub .ev-skill {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 48px; margin: 0; padding: 11px 16px;
  border: 0; border-radius: 0; background: transparent; cursor: pointer; font: 400 15px/20px var(--font-sans); letter-spacing: -0.006em; color: var(--c-text);
  -webkit-tap-highlight-color: transparent; transition: background-color 140ms var(--ease-standard);
}
:root .c-pub .ev-skill + .ev-skill::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--c-sep); }
@media (min-resolution: 2dppx) { :root .c-pub .ev-skill + .ev-skill::before { transform: scaleY(.5); transform-origin: top; } }
:root .c-pub .ev-skill:active { background: var(--c-press); }
@media (hover: hover) { :root .c-pub .ev-skill:hover { background: var(--n-50); } }
:root .c-pub .ev-skill > input {
  appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0;
  border: 1.5px solid var(--n-500); border-radius: 50%; background: #fff; cursor: pointer; accent-color: auto;
  transition: background-color 140ms, border-color 140ms, transform var(--d-press) var(--ease-out);
}
:root .c-pub .ev-skill > input::after {
  content: ""; width: 10px; height: 5.5px; border: 2.3px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform var(--d-pop) var(--spring-pop);
}
:root .c-pub .ev-skill > input:checked { background: var(--c-accent); border-color: var(--c-accent); }
:root .c-pub .ev-skill > input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
:root .c-pub .ev-skill > input:focus-visible { outline: none; box-shadow: var(--ring); }
:root .c-pub .ev-skill > input:active { transform: scale(.9); }
/* sukces zgłoszenia */
:root .c-pub #ev-done { padding: 24px 8px 8px; text-align: center; animation: c-pub-in 360ms var(--ease-out) backwards; }
:root .c-pub #ev-done h3 { margin: 0 0 8px; font: var(--t-title1); letter-spacing: var(--tr-title1); color: var(--c-title); }
:root .c-pub #ev-done h3:focus { outline: none; box-shadow: none; }   /* fokus z ui-public.js 5b – dla czytnika ekranu, bez obwódki (style.css:213 [tabindex]) */
:root .c-pub #ev-done .signup-hint { max-width: 32ch; margin: 0 auto; font: var(--t-subhead); color: var(--c-text-2); }
:root .c-pub #ev-done .form-actions { margin: 28px 0 0; }
@media (min-width: 701px) { :root .c-pub #ev-done .form-actions > a.btn-link { max-width: 360px; margin: 0 auto; } }

/* =====================================================================
   7. RODO (rodo.html) – duży tytuł, treść w karcie 680 px, dwie równe pigułki (SPEC 6)
   ===================================================================== */
:root main.rodo-main { max-width: calc(680px + 2 * var(--pub-pad)); margin: 0 auto; padding: calc(var(--sa-t) + 28px) var(--pub-pad) calc(var(--sa-b) + 48px); }
:root .rodo-main .c-pub-head { margin-bottom: 16px; }
:root .rodo-main .rodo-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; }
:root .rodo-main .rodo-back {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 0; border-radius: var(--r-pill); background: var(--c-surface); box-shadow: var(--el-1); color: var(--c-accent-text);
  font: 600 15px/1 var(--font-sans); letter-spacing: -0.008em; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-press) var(--ease-out), background-color 140ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
:root .rodo-main .rodo-back > .ico { width: 24px; height: 24px; margin: 0; border-radius: 6px; }
@media (hover: hover) { :root .rodo-main .rodo-back:hover { background: var(--lav-50); border: 0; box-shadow: var(--el-1); text-decoration: none; } }
:root .rodo-main .rodo-back:active, :root .rodo-main .rodo-back.is-pressed { transform: scale(.97); background: var(--lav-50); }
:root .rodo-main .rodo-back:focus-visible { outline: none; box-shadow: var(--el-1), var(--ring); }
:root .rodo-main h1.rodo-title { margin: 0; font: var(--t-title1); letter-spacing: var(--tr-title1); color: var(--c-title); text-wrap: balance; }
:root .rodo-main p.rodo-meta { margin: 6px 0 18px; font: var(--t-footnote); letter-spacing: 0; color: var(--c-text-2); }
:root .rodo-main > .panel { margin: 0; padding: 4px 20px 22px; border: 0; border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--el-1); }
:root .rodo-main > .panel h2 {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; padding: 16px 0 0; border: 0;
  font: var(--t-headline); letter-spacing: var(--tr-headline); text-transform: none; color: var(--c-text);
}
:root .rodo-main > .panel h2::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--c-sep); }
:root .rodo-main > .panel > h2:first-child { margin-top: 0; padding-top: 18px; }
:root .rodo-main > .panel > h2:first-child::before { content: none; }
:root .rodo-main > .panel h2 > .ico { flex: 0 0 auto; width: 30px; height: 30px; margin: 0; border-radius: 7px; }
:root .rodo-main > .panel :is(p, li) { font: 400 16px/24px var(--font-sans); letter-spacing: -0.01em; color: var(--c-text-2); }
:root .rodo-main > .panel p { margin: 0; }
:root .rodo-main > .panel p + p { margin-top: 10px; }
:root .rodo-main > .panel ul { margin: 0; padding-left: 20px; }
:root .rodo-main > .panel li { margin: 0 0 6px; }
:root .rodo-main > .panel li::marker { color: var(--lav-400); }
:root .rodo-main strong { font-weight: 600; color: var(--c-text); }
@media (min-width: 701px) {
  :root .rodo-main h1.rodo-title { font: var(--t-large); letter-spacing: var(--tr-large); }
  :root .rodo-main > .panel { padding: 8px 32px 30px; }
  :root .rodo-main .rodo-nav { display: flex; }
  :root .rodo-main .rodo-back { min-width: 200px; }
}

/* =====================================================================
   8. KOMPUTER (≥ 701 px) i wąskie telefony
   ===================================================================== */
@media (min-width: 701px) {
  :root body.signup-page main.c-pub { padding-top: 16px; }
  .c-pub-head { --logo: 72px; margin-bottom: 22px; }
  .c-auth-brand { --logo: 104px; }
  :root body.auth-page main.c-auth { padding-top: calc(var(--sa-t) + clamp(40px, 11vh, 120px)); }
}
@media (max-width: 380px) {
  :root .c-step > .c-step-title { font-size: 30px; line-height: 36px; }
  :root #step-mode .city-btn, :root #step-city .city-btn { column-gap: 12px; padding-right: 14px; }
}

/* =====================================================================
   9. REDUKCJA RUCHU, PRZEZROCZYSTOŚCI, DRUK
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root .landing .arton-logo.arton-logo-lg, :root .landing-actions a, :root .landing .landing-sub { animation: c-fade-in 150ms linear backwards !important; }
  .c-done-ico::after, :root #step-done .done-ico::after { clip-path: none; }
  .c-pay-wait::before, .c-ev-spin { animation: none !important; }
  :root .c-pub-head > .arton-logo[role] { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .c-onb-bar, :root .c-sticky-cta { background: var(--c-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  :root .c-onb-bar { display: none; }
  :root .c-sticky-cta { position: static; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}