/* Pole formularza — arkusz partu `template-parts/pole-formularza.php` (0.11). * * Wartości pochodzą z dwóch klatek `canvas:Kontakt Makieta Finalna`: * **1F** (ton ciemny, sekcja na Smoked Tencie) i **2E** (ton jasny, sekcja * na Pergaminie). Pole hasła — z `canvas:Logowanie Wrota Finalny`. * * Ton jest zestawem lokalnych zmiennych, nie drugim kompletem reguł: między * 1F a 2E różnią się WYŁĄCZNIE kolory i jeden stopień etykiety, a geometria * (52 px wysokości, róg 2 px, padding 14 px) jest wspólna. Gdyby ton robił * własne reguły, każda przyszła poprawka geometrii musiałaby trafić w dwa * miejsca — i po którejś trafiłaby w jedno. * * Krycia idą przez `color-mix()` na tokenie, nie przez `rgba()` z rozpisanymi * składowymi: `rgba(245,233,211,0.06)` z canvasu to surowy Parchment * w przebraniu, a surowych kolorów w tym motywie nie ma (CLAUDE.md, reguła 3). * * ─── PRZEMIAR TYPOGRAFICZNY — 20.08.2026 (`/domknij-otwarte W6b`) ──── * * Arkusz **nie należał do żadnego z siedmiu pakietów naprawy typografii** — * rozpiska `docs/TYPOGRAFIA.md` §5 dzieli pracę arkuszami, a ten stoi na kilku * powierzchniach naraz, więc nie miał właściciela. Przemierzony osobno, po * zamknięciu pakietów 1–6. Ekwiwalent liczy się wzorem * `font-size × wysokość x / 0,50`: Source Serif 4 ma x 49,5, Literata 51. * * reguła było ekw. rola szczebel jest * __etykieta 12 SS 12,2 mikroetykieta mikro 12 12 ✓ * __licznik 12 SS 12,2 plakietka mikro 12 12 ✓ * __kontrolka 15 SSF 14,85 wpisana wartość — 15 ✓ * __tresc 14 SSF 13,86 etykieta zgody pomoc. 14 14 ✓ * __pomoc 13 SSF 12,87 nota pomoc. 14 14 ← * __blad 13 SSF 12,87 komunikat błędu pomoc. 14 14 ← * __caps 13 SSF 12,87 ostrzeżenie pomoc. 14 14 ← * * (SS = Literata przez `--font-ui`, SSF = Source Serif 4 przez `--font-body`.) * * ⚠︎ **`__kontrolka` NIE ROSNIE do 16 px i to jest wynik pomiaru, nie * przeoczenie.** Ekwiwalent 14,85 leży między szczeblami — powyżej * `pomocniczy`, poniżej `czytelny` — więc żadnej podłogi nie łamie, a podniesienie * ma zmierzoną cenę po drugiej stronie: przy 390 px adres 46-znakowy nie mieści * się w polu bramy konta **już dziś** (`scrollWidth` 406 px wobec `clientWidth` * 340 px). Rosnący krój pogłębia dokładnie ten jeden zmierzony problem. * * ⚠︎ **`__tresc` też zostaje, choć niesie DWIE role naraz** — i to jest jedyna * rzecz w arkuszu, której pomiar nie rozstrzyga. Ta sama klasa wypisuje krótką * etykietę kontrolki („Zapamiętaj mnie na tym urządzeniu", „Tylko dostępne" * w panelu filtrów) **i zdanie zgody prawnej** (regulamin w bramie konta, * zgoda RODO w kasie). Pierwsza rola to `pomocniczy` 14, druga według definicji * skali to `czytelny` 16 („każda informacja, którą trzeba zrozumieć"). Rozdzielić * je da się wyłącznie modyfikatorem w parcie, czyli zmianą API — pozycja stoi * w `docs/PO-PORCIE.md` §D. **Nie podnoś tego bez modyfikatora**: 16 px zrobiłoby * z „Tylko dostępne" największy napis panelu filtrów. * * ⚠︎ **Ton jasny `.szewko-pole--jasny` (klatka 2E) nie renderuje się dziś * NIGDZIE** — żaden wywołujący nie podaje `'ton' => 'jasny'` (zmierzone na * pięciu powierzchniach: wszystkie etykiety mają 12 px, nigdy 13). Zostaje jako * zapisana klatka canvasu i działające API partu, ale **jego liczb nie traktuj * jak stanu witryny**. */ .szewko-pole { /* ─── TON CIEMNY (klatka 1F) — domyślny ────────────────── */ --pole-tlo: color-mix(in srgb, var(--color-parchment) 6%, transparent); --pole-obrys: color-mix(in srgb, var(--color-sand-gold) 30%, transparent); --pole-tekst: var(--color-parchment); --pole-podpowiedz: color-mix(in srgb, var(--color-bleached-linen) 58%, transparent); --pole-etykieta: color-mix(in srgb, var(--color-parchment) 85%, transparent); --pole-pomoc: color-mix(in srgb, var(--color-parchment) 62%, transparent); --pole-dopisek: color-mix(in srgb, var(--color-parchment) 55%, transparent); /* Odstępstwo 3 od canvasu: komunikat błędu NIE idzie w `--color-terracotta` (1,8:1 na Smoked Tencie), tylko w rozjaśniony wariant tokenu (5,2:1). Obrys pola zostaje w Terracocie, bo tak rysuje go klatka 1F — i dlatego znaczenia nie niesie sam kolor obrysu, tylko ikona i tekst obok niego. */ --pole-blad: var(--color-terracotta-light); --pole-obrys-blad: var(--color-terracotta); --pole-uwaga: var(--color-sand-gold); /* Ikony sterujące w polu — strzałka listy i oko przy haśle. Jedna zmienna, bo obie są elementami nietekstowymi na tym samym tle i muszą trzymać ten sam próg. Na Pergaminie Sand Gold daje 1,77:1, więc ton jasny podmienia je na Camel Brown; bez tego oko przy haśle znikałoby na płótnie. */ --pole-ikona: var(--color-sand-gold); --pole-ikona-hover: var(--color-brass-lantern); /* Podkład licznika ma kolor TŁA SEKCJI, nie pola — inaczej przy przewiniętym polu wiersz tekstu prześwituje spod liczby. */ --pole-licznik-tlo: color-mix(in srgb, var(--color-smoked-tent) 70%, transparent); /* Tło ROZWINIĘTEJ listy pola wyboru. Osobna zmienna, nie `--pole-tlo`: tamto jest półprzezroczyste (6 % Parchmentu), bo leży na płycie sekcji, a panel listy rysuje system nad wszystkim i musi być KRYJĄCY. */ --pole-lista-tlo: var(--color-dark-mahogany); /* Podkład pozycji ZAZNACZONEJ w rozwiniętej liście. Nie jest to `--pole-lista-tlo`, bo wtedy nie widać, co jest wybrane; i nie jest to podkład systemowy, bo ten jest jasnoszary i zabija jasny tekst (patrz reguła `option:checked`). */ --pole-lista-zazn: color-mix(in srgb, var(--color-sand-gold) 18%, var(--color-dark-mahogany)); /* Schemat kolorów kontrolki. Nie ma wpływu na zamknięte pole (tło, obrys i tekst są tu autorskie), ma za to wpływ na te części ROZWINIĘTEJ listy, których nie da się dosięgnąć arkuszem: podświetlenie pozycji wybranej, pasek przewijania panelu i jego obwódkę. Domyślnie przeglądarka rysuje je w schemacie jasnym, czyli jasnoszarym po jasnoszarym. */ --pole-schemat: dark; /* Poświata skupienia: 1F daje rozmytą aureolę, 2E — twardy pierścień. Obie są tu jedną zmienną, bo różnią się wartością, nie mechanizmem. */ --pole-poswiata: 0 0 14px color-mix(in srgb, var(--color-sand-gold) 22%, transparent); --pole-obrys-focus: -2px; display: block; & .szewko-pole__etykieta { /* Etykieta ZAWSZE widoczna nad polem. Sam placeholder odpada — znika przy pisaniu i zabiera kontekst temu, kto wrócił do formularza po minucie. */ display: block; margin: 0 0 var(--space-sm); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pole-etykieta); } /* Design znakuje pola OPCJONALNE, nie wymagane — gwiazdki nie ma nigdzie w projekcie. Dopisek wypada z wersalików, żeby czytał się jak nawias. */ & .szewko-pole__dopisek { text-transform: none; letter-spacing: 0.04em; color: var(--pole-dopisek); } /* Węższe pole dla krótkich wartości — numer zamówienia stoi na 260 px. Wartość przychodzi z wywołania jako zmienna, nie jako `max-width` wprost: tylko wtedy media query poniżej ma czym ją zdjąć (styl w znaczniku wygrywa z arkuszem, więc `max-width` wpisane wprost dałoby się cofnąć wyłącznie przez `!important`). */ & .szewko-pole__ramka { position: relative; max-width: var(--pole-maks-szerokosc, none); } & .szewko-pole__kontrolka { box-sizing: border-box; width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--pole-obrys); border-radius: var(--radius-sm); background: var(--pole-tlo); font-family: var(--font-body); font-size: 15px; color: var(--pole-tekst); outline: none; transition: box-shadow var(--duration-mid) var(--ease-sand), border-color var(--duration-mid) var(--ease-sand); &::placeholder { color: var(--pole-podpowiedz); opacity: 1; /* Firefox przygasza placeholder z urzędu. */ } /* Obrys skupienia jest Sand Gold i wchodzi DO ŚRODKA pola (offset ujemny), żeby nie podnosił wysokości wiersza w gęstym formularzu kasy. ⚠︎ **To jedyne miejsce, które ŚWIADOMIE zostaje bez dwuwarstwowego pierścienia z K6** — i nie jest to przeoczenie. Powody są dwa: obwódka 5 px na zewnątrz robi dokładnie to, czemu ujemny offset ma zapobiegać, a pola tego motywu stoją na ciemnych płytkach, gdzie sam Sand Gold daje **8,31:1** (zmierzone na `/kontakt/` i w panelu filtrów). Własna poświata niżej i tak nadpisałaby obwódkę z `base.css`, więc decyzja jest tu zapisana, a nie domyślna. ⚠︎ Gdyby pole trafiło kiedyś na jasną płytkę, ta reguła przestaje wystarczać — wtedy trzeba dołożyć `var(--pierscien-ogniskowej)` przed poświatą, tak jak w `cart-empty.css`. */ &:focus-visible { border-color: var(--color-sand-gold); outline: 2px solid var(--color-sand-gold); outline-offset: var(--pole-obrys-focus); box-shadow: var(--pole-poswiata); } /* Krycie należy do POLA, nie do sekcji. Na canvasie przygaszała je sekcja formularza, więc pole wyjęte z niej wyglądało na aktywne mimo `disabled`. Kursor „wait", bo w tym projekcie blokada znaczy „trwa wysyłka". */ &:disabled { opacity: 0.55; cursor: wait; } /* Stanu „tylko do odczytu" nie ma na żadnej klatce. Rozwiązany najmniejszym możliwym gestem: wartość zostaje pełną czcionką i pełnym kolorem (to nadal treść, nie ozdoba), znika sama płytka — pole przestaje wyglądać jak studnia, do której można coś wpisać. Do zawetowania jedną regułą. */ &[readonly] { background: transparent; cursor: default; /* ⚠︎ `none` kasowało tu poświatę pola RAZEM z obwódką ogniskowej z `base.css` — a pole tylko do odczytu nadal łapie ogniskową i musi ją pokazać (WCAG 2.4.7). Znika sama poświata, pierścień zostaje. */ &:focus-visible { box-shadow: var(--pierscien-ogniskowej); } } } & .szewko-pole__kontrolka--wybor { appearance: none; padding-right: 44px; cursor: pointer; /* ⚠︎ To jest DRUGA POŁOWA poprawki podświetlenia (pierwsza — `option:checked` niżej) i ta połowa nie jest obejściem, tylko mechanizmem przewidzianym do tego celu. Panel listy rysuje przeglądarka i część jego warstw nie przychodzi z tego arkusza w ogóle; `color-scheme` jest jedynym wejściem, jakie do nich mamy. Bez niego panel zostaje w schemacie jasnym nawet wtedy, gdy wszystkie `option` mają ciemne tło od autora — i stąd brał się jasnoszary pas pod wybraną pozycją. */ color-scheme: var(--pole-schemat); &:disabled { cursor: wait; } /* ⚠︎ ROZWINIĘTA LISTA TO OSOBNY ŚWIAT i bez tej reguły jest NIECZYTELNA. Zgłoszone ze zrzutu 04.08.2026 z `/kontakt`. Zamknięte pole stylujemy my — jasny tekst na ciemnej płytce. Ale panel, który rozwija się po kliknięciu, rysuje system, a nie ten arkusz: bierze z niego wyłącznie kolory `option`. `color` dziedziczy się z `` schowany * wizualnie zamiast ``. Input leży NA * kwadracie, ma zerowe krycie i pełny rozmiar rysunku — nie `display: none` * i nie `visibility: hidden`, bo wtedy wypada z nawigacji klawiaturą. */ .szewko-pole--zgoda { & .szewko-pole__zgoda { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; /* Cały wiersz jest celem dotykowym. Kwadrat ma 20 px, więc sam nie dobija do progu 44 px — `min-height` pilnuje progu także wtedy, gdy treść zgody mieści się w jednej linii. */ min-height: 44px; cursor: pointer; } & .szewko-pole__pudelko-slot { position: relative; display: flex; flex: 0 0 auto; margin-top: 2px; /* Wzorzec „rysunek 20 px, pole trafienia 44 px" — pseudoelement z ujemnym `inset`, czysty CSS, zero JS. Wiersz etykiety jest klikalny i tak, ale przy krótkiej treści zgody to ten prostokąt trzyma próg wokół samego kwadratu. Siedzi na slocie, nie na ``: pseudoelementy elementów zastąpionych się nie renderują. */ &::before { content: ""; position: absolute; inset: -12px; } } & .szewko-pole__pudelko-input { position: absolute; inset: 0; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: inherit; &:checked + .szewko-pole__pudelko { background: var(--color-sand-gold); & svg { opacity: 1; } } &:focus-visible + .szewko-pole__pudelko { outline: 2px solid var(--color-sand-gold); outline-offset: 2px; } } & .szewko-pole__pudelko { display: flex; box-sizing: border-box; width: 20px; height: 20px; align-items: center; justify-content: center; border: 1px solid var(--color-sand-gold); border-radius: var(--radius-sm); background: transparent; color: var(--color-smoked-tent); transition: background var(--duration-fast) var(--ease-sand); /* Kwadrat jest rysunkiem, nie kontrolką: leży NA schowanym ``, więc bez tego przechwytuje kliknięcie w samego siebie. Etykieta i tak by je przekazała dalej, ale wtedy trafienie w pole zależy od tego, że rodzicem jest `