/* Serwis: fonty u siebie i dodatki potrzebne aplikacji (formularze zamiast linków podglądu, <progress>).
   Projekt (styl.css, tor.css, strona.css) zostaje kopią z Claude Design; tu tylko to, czego podgląd nie miał. */

/* fonty: podzbiór łaciński z polskimi znakami i strzałkami U+2190-2193 (sailing/serwis/fonty.py), licencja OFL obok.
   Plex po podzbiorze nosi nazwę "DS" (OFL: wersja zmodyfikowana bez zastrzeżonej nazwy). */
@font-face{font-family:"Newsreader"; src:url("/statyczne/fonty/newsreader.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:optional}
@font-face{font-family:"Newsreader"; src:url("/statyczne/fonty/newsreader-kursywa.woff2") format("woff2"); font-weight:400 600; font-style:italic; font-display:optional}
@font-face{font-family:"DS Sans"; src:url("/statyczne/fonty/plex-sans.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:optional}
@font-face{font-family:"DS Mono"; src:url("/statyczne/fonty/plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:optional}
@font-face{font-family:"DS Mono"; src:url("/statyczne/fonty/plex-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:optional}
@font-face{font-family:"DS Mono"; src:url("/statyczne/fonty/plex-mono-600.woff2") format("woff2"); font-weight:600 700; font-style:normal; font-display:optional}
:root{
  --f-bez:"DS Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"DS Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* formularze zamiast linków podglądu */
.forma{display:contents}
button.btn{margin:0}
button.wejscie{width:100%; margin:0; font:inherit; text-align:left; cursor:pointer}
button.btn-cichy{font:600 var(--t-tresc)/1.3 var(--f-bez)}
.bok-tekst form{display:block}
form.akcje{margin:0}
/* nieaktywne "Dalej" (projekt: "Dalej" nieaktywne przy wpisie niezgodnym z rejestrem) to <button disabled> */
.btn:disabled{opacity:.45; cursor:not-allowed}

/* pasek postępu jako <progress> (CSP bez stylów w treści strony) */
progress.pasek-postepu{-webkit-appearance:none; appearance:none; display:block; width:100%; height:6px; border:0; border-radius:3px; background:var(--papier-2); color:var(--zielen); overflow:hidden}
progress.pasek-postepu::-webkit-progress-bar{background:var(--papier-2); border-radius:3px}
progress.pasek-postepu::-webkit-progress-value{background:var(--zielen); border-radius:3px}
progress.pasek-postepu::-moz-progress-bar{background:var(--zielen); border-radius:3px}

/* pytanie bez kart odpowiedzi (liczba, data, osoby, tekst) */
label.pytanie{display:block}
.pole-pytanie{gap:14px}
textarea.pole-wejscie{min-height:140px; line-height:1.4; resize:vertical}

/* krok "Firma": pomoc numeru KRS tylko przy wyborze KRS; funkcja tylko przy osobie wyznaczonej */
.pole-pomoc[hidden]{display:none}
.forma:not(:has(input[name="podpisuje"][value="wyznaczenie"]:checked)) .pole-funkcja{display:none}

/* tryb testowy (atrapy żyją tylko w testach jednostkowych) */
.pasek-tryb{padding:10px var(--bok); background:var(--cynober); color:var(--karta); font:600 14px/1.35 var(--f-mono); letter-spacing:.03em; text-align:center}

/* odpis z rejestru */
.odpis-dane .mono, .mono{font-family:var(--f-mono)}

/* plik w raporcie luk i analizie: rodzaj pliku */
.plik-chip.docx::before{content:"DOCX"; background:var(--zielen)}
.plik-chip.txt::before{content:"TXT"; background:var(--atrament-2)}

/* stopka: linki jako cele dotyku */
.stopka-linki a{display:inline-flex; align-items:center; min-height:44px}

/* Cele dotyku 44 x 44 px (E3c; weryfikator E3b zmierzył pola wyboru 24 x 24 px i link w zdaniu 22 px wysokości).
   Odstępstwo od projektu z Claude Design, zapisane w CLAUDE-DESIGN.md: pole wyboru ma 44 x 44 px, a widać dalej
   kółko albo kwadrat 24 px (przezroczysta ramka 10 px dookoła, obwódka rysowana cieniem w środku). Ujemny margines
   zostawia mu w układzie te same 24 px, więc karta i tekst stoją jak w projekcie. */
.opcja input, .zgoda input{box-sizing:border-box; width:44px; height:44px; margin:-10px; border:10px solid transparent; background-clip:padding-box; box-shadow:inset 0 0 0 2px var(--atrament)}
.opcja input{margin-top:-9px}
.opcja input[type="checkbox"], .zgoda input{border-radius:16px}
.zgoda input:focus-visible{outline-offset:-8px}
/* link w zdaniu zgody: wyższy obszar dotyku (padding w wierszu nie przesuwa linii tekstu) */
.zgoda a{padding-block:11px}

/* stopka z danymi sprzedawcy i flagami Przelewy24 (wymaganie weryfikacji P24: NIP i flagi na kazdej podstronie) */
.stopka-dane p{margin:0 0 4px}
.stopka-kontakt a{display:inline-flex; align-items:center; min-height:44px; margin-right:16px}
.stopka-flagi{margin:0}
.stopka-flagi img{display:block; width:100%; max-width:340px; height:auto; aspect-ratio:720/368; background:#F6F4EE; border-radius:6px; padding:6px 10px; box-sizing:border-box}
/* podglad dokumentu na stronie glownej (Przelewy24: produkt ze zdjeciem, opisem i cena) */
.dokument-przyklad{margin:24px 0 0}
.dokument-przyklad img{display:block; width:100%; max-width:520px; height:auto; aspect-ratio:720/529; border:1px solid rgba(24,63,49,.18); border-radius:4px; box-shadow:0 6px 24px rgba(24,63,49,.10); background:#fff}
.dokument-przyklad figcaption{margin-top:8px; font-size:var(--t-maly); color:inherit; opacity:.75}
/* platnosc: zgody i e-mail */
.zgody .zgoda input:disabled + span{opacity:.7}
.uspokojenie a{display:inline-flex; align-items:center; min-height:44px}