Wiek ciąży — kalkulator

Pierwsza wersja narzędzia: kalkulator wieku ciąży wg ostatniej miesiączki, USG, transferu IVF, zapłodnienia/inseminacji oraz znanego terminu porodu.

Nowy styl graficzny narzędzia (ciepły papier, atrament, akcent szałwiowo-teal; Source Serif 4 + Inter + IBM Plex Mono), poszerzenie kontenera do 1100px, poprawka wyświetlania tabel na urządzeniach mobilnych, dodanie tej sekcji.

Poprawiono układ zakładki/sekcji „Historia wersji” na urządzeniach mobilnych — wąskie kolumny „Wersja”/„Data” łamały się litera po literze na małych ekranach; zastąpiono sztywną tabelę układem kartowym (numer wersji + data w nagłówku, opis pod spodem).

Poprawiono zawijanie etykiet w pasku zakładek na wąskich ekranach — przy 5+ zakładkach jednolita szerokość (`flex:1`) w połączeniu z `word-break:break-word` łamała długie słowa litera po literze; poniżej 560px pasek przechodzi na siatkę 2-kolumnową, co daje każdej zakładce więcej miejsca na czytelne zawinięcie tekstu. Usunięto też pole wyboru „Punkt odniesienia” (zapłodnienie / inseminacja IUI) w zakładce Zapłodnienie/Inseminacja — obie opcje liczyły się identycznie (nie wpływały na wynik, tylko na etykietę), a jego dwuwierszowy układ powodował przelewanie się tekstu poza ekran na telefonie. Zastąpiono krótką notatką informacyjną nad polem daty.

Korekta łamania tekstu w tabelach. Deklaracja overflow-wrap:anywhere w komórkach powodowała, że minimalna szerokość kolumny wyliczana przez przeglądarkę odpowiadała pojedynczemu znakowi — algorytm automatycznego układu tabeli zwężał wówczas kolumny o krótkich nagłówkach i łamał wyrazy w przypadkowym miejscu („Charakt / er”) nawet na szerokim ekranie. Zastąpiono ją wartością break-word, która nie wpływa na wyliczanie rozmiaru min-content, wraz z word-break:normal; kolumna nie może już być węższa niż najdłuższy wyraz nagłówka. Agresywne łamanie zachowano wyłącznie dla ciągów nierozdzielnych — odnośników, identyfikatorów DOI i tekstu monospace. Tabelom w kontenerze przewijanym nadano minimalną szerokość 640 px (560 px poniżej 520 px szerokości okna), dzięki czemu na wąskim ekranie tabela przewija się poziomo zamiast ulegać zgnieceniu. Zmiana wyłącznie prezentacyjna — nie modyfikuje treści merytorycznej ani logiki obliczeń.

Zestaw poprawek widoku mobilnego. Pasek zakładek poniżej 560 px zmieniono z siatki dwukolumnowej, której wysokość rosła liniowo z liczbą zakładek, na jednowierszowy pasek przewijany poziomo; kliknięcie zakładki dosuwa pasek tak, by aktywny przycisk był widoczny. Pola dotykowe zakładek zwiększono do 40 px wysokości. Na urządzeniach wskazujących pasek otrzymał widoczny wąski uchwyt przewijania, przeciąganie kursorem z progiem 4 px i tłumieniem kliknięcia po przeciągnięciu oraz przewijanie kółkiem myszy, przechwytywane wyłącznie wtedy, gdy pasek ma rezerwę przewijania. Pola formularza otrzymały poniżej 640 px rozmiar czcionki 16 px — Safari na iOS przybliża widok przy ustawieniu ostrości na polu o mniejszej czcionce, zmuszając do ręcznego oddalania po każdym wyborze. Tabele przewijane poziomo sygnalizują możliwość przesunięcia cieniem gradientowym przy prawej krawędzi, znikającym po dojściu do końca przewijania.

Przeniesiono komplet dopracowanych poprawek widoku mobilnego, zweryfikowanych wcześniej na algorytmie endometriozy. Skrypt przy starcie przechodzi łańcuch przodków i w każdym, który ma overflow-x:hidden, zamienia tę wartość na overflow-x:clip, co przywraca przyklejanie po osadzeniu na stronie. Obsługa myszą: pasek zakładek otrzymał widoczny wąski uchwyt przewijania na urządzeniach wskazujących, przeciąganie kursorem z progiem 4 px i tłumieniem kliknięcia po przeciągnięciu oraz przewijanie kółkiem, przechwytywane wyłącznie przy istniejącej rezerwie przewijania. Strzałki nawigacyjne: w tabelach okrągłe wskaźniki o średnicy 21 px z grotem 12 px i tłem rgba(191,214,230,0.35), przy samych krawędziach ramki przewijanej, widoczne tylko po stronie, w którą można przesunąć; w pasku zakładek biały grot bez tła, umieszczony w pasie dopełnienia nad etykietami, bez zwiększania wysokości paska. Dodano także lewy cień gradientowy tabel, symetryczny do prawego.

Naprawa czarnego grotu strzałek. Reguła resetu obejmowała all:revert wszystkie elementy potomne, w tym elementy svg, co kasowało atrybuty prezentacyjne fill i stroke i powodowało renderowanie grotu jako czarnej wypełnionej figury zamiast jasnego zarysu. Reset doprowadzono do postaci kanonicznej *:not(svg):not(svg *) wraz z osobną regułą box-sizing dla SVG, a grotom nadano dodatkowo jawne fill:none i stroke:currentColor z priorytetem. Selektor przycisków zakładek w skrypcie uogólniono z [data-t] na :not(.tab-nav), ponieważ ten dokument oznacza zakładki innym atrybutem.

Przywrócono poprzedni układ paska zakładek. Poniżej 560 px zakładki wracają do siatki dwukolumnowej zamiast jednowierszowego paska przewijanego poziomo: przy pięciu zakładkach siatka mieści się w całości, więc przewijanie nie dawało żadnej korzyści, a wymagało dodatkowego gestu. Usunięto komplet reguł strzałek paska wraz z regułami przewijania na urządzeniach wskazujących; strzałki pozostają wyłączone deklaracją display:none. Mechanizmy tabel oraz naprawa przodków po osadzeniu pozostają bez zmian. Cofnięto zmianę reguły resetu wprowadzoną w poprzedniej wersji. Wykluczenie *:not(svg):not(svg *) miało chronić atrybuty prezentacyjne grafik wektorowych, ale podnosiło specyficzność selektora resetu z jednej klasy do jednej klasy i dwóch pseudoklas. W dokumencie, którego reguły pisano względem pierwotnej specyficzności, oznacza to, że część deklaracji bez !important zaczyna przegrywać z all:revert — a więc zmiana o charakterze porządkowym może przestawić wygląd w miejscach niezwiązanych z SVG. Reset wrócił do pierwotnej postaci. Ochronę grotów strzałek zapewnia teraz wyłącznie jawna deklaracja fill:none i stroke:currentColor z priorytetem, rozszerzona dodatkowo na elementy potomne svg, co nie wpływa na kaskadę reszty dokumentu.

Ujednolicenie stylu graficznego z portalem edukacyjnym, przeprowadzone wcześniej na algorytmie CMV. Typografia: usunięto krój szeryfowy Source Serif 4, którego portal nie używa — nagłówki korzystają z kroju Inter, odróżnianego od tekstu wagą 600 i ujemnym odstępem międzyliterowym −0,01 em; krój zniknął też z wykazu pobieranego z Google Fonts. Zakładki: aktywna zakładka w błękicie #3A6D9A zamiast turkusu, przez nową zmienną --tab-active. Stopka: jasne tło --bg, kreska oddzielająca u góry, zaokrąglone dolne narożniki, wyrównanie do prawej, krój IBM Plex Mono 0,64 rem; klauzula prawna zachowuje krój tekstowy i wyrównanie do lewej, ponieważ monospace czyta się dobrze w jednej linijce, ale nie w kilkuzdaniowym akapicie. Dodano linię zamykającą „Materiały edukacyjne | © 2026 Antoni Sierant" w brzmieniu portalu, oddzieloną cienką kreską. Znak wodny nagłówka: element ::before z grafiką osadzoną jako dane base64, szerokość 210 px, krycie 15%, wysunięty poza prawą krawędź, zwężany do 140 px poniżej 640 px szerokości okna; nagłówek otrzymał position:relative, a jego zawartość z-index, bo element pozycjonowany maluje się nad treścią w normalnym przepływie. Margines zewnętrzny: poniżej 820 px szerokości okna ramka odsuwa się od krawędzi ekranu o 6 px. Zastosowano margines, nie dopełnienie jak w portalu — tam korzeń jest przezroczysty, a tło niesie wewnętrzny .shell, tutaj tło leży na samym korzeniu, więc dopełnienie wcięłoby jedynie treść.

Dwie korekty spójności po ujednoliceniu z portalem edukacyjnym. Barwa nagłówków sekcji. Paski .subsection-header oraz nagłówki trzeciego stopnia w kartach zachowały turkus --accent, podczas gdy aktywna zakładka przeszła na błękit — w jednym dokumencie występowały więc dwie barwy wyróżnienia. Oba elementy korzystają teraz ze zmiennej --tab-active, czyli błękitu #3A6D9A, tego samego, którym portal oznacza sekcję ginekologiczną. Turkus pozostaje barwą odnośników i elementów pomocniczych. Tekst stopki. Ujednolicenie objęło stopkę krojem monospace i wyrównaniem do prawej, co jest właściwe dla jednowierszowej stopki portalu, ale nie dla kilkuzdaniowego tekstu informacyjnego. Tekst stopki wraca do kroju Inter i wyrównania obustronnego; krój monospace i wyrównanie do prawej zachowuje wyłącznie linia zamykająca z notą o prawach autorskich.

Usunięto z nagłówka blok informacji licencyjnej: zapis o licencji Creative Commons do użytku niekomercyjnego wraz z notą „© 2026 Antoni Sierant | wer. 1.3". Licencja ta zarezerwowana jest dla formularzy zgód, natomiast narzędzia kliniczne udostępniane są na zasadzie zastrzeżenia wszystkich praw, ze statusem wersji testowej — pozostawienie takiego oznaczenia w nagłówku wprowadzało w błąd co do warunków korzystania. Nota o prawach autorskich pozostaje w pasku wersji testowej u góry oraz w linii zamykającej stopkę, a numer wersji w zakładce z historią wersji, więc żadna informacja nie ginie. Usunięto również osierocony kontener .header-meta wraz z obiema regułami stylu, które go dotyczyły.

Klauzula prawna w stopce jest justowana i rozciąga się na całą szerokość, tak jak w algorytmach CMV, FGR i GTN. Dokument nie zawiera elementu klauzuli w treści, zmiana dotyczy więc wyłącznie reguły stylu i zadziała, gdyby klauzula została dodana. Ujednolicono również barwy odziedziczone po granatowej stopce — tekst i kreskę oddzielającą sprowadzono do zmiennych --muted i --border, ponieważ jasne wartości sprzed zmiany stopki były na nowym tle nieczytelne albo niewidoczne.

Uproszczenie warstwy tekstowej formularza. Usunięto powtarzający się nagłówek „Dane wejściowe" ze wszystkich pięciu zakładek — w każdej z nich formularz jest pierwszym i jedynym elementem przed wynikiem, więc nagłówek nie niósł informacji. Usunięto pięć podpisów „Domyślnie dzisiaj — możesz zmienić." pod polami daty docelowej oraz akapit wyjaśniający, że zapłodnienie pozaustrojowe i inseminacja domaciczna liczone są identycznie. Nad blokiem historii wersji dodano odstęp 88 px, oddzielający go od treści narzędzia.

Usunięto ze stopki zapis o licencji Creative Commons do użytku niekomercyjnego wraz z towarzyszącą notą o prawach autorskich. Licencja ta zarezerwowana jest dla formularzy zgód; narzędzia kliniczne udostępniane są na zasadzie zastrzeżenia wszystkich praw, ze statusem wersji testowej, więc oznaczenie wprowadzało w błąd co do warunków korzystania. Był to ostatni ślad tego zapisu w dokumencie — analogiczny blok w nagłówku usunięto w wersji 1.11. Nota o prawach autorskich pozostaje w pasku wersji testowej u góry oraz w linii zamykającej stopkę.

Skrócono etykiety dwóch zakładek: „Transfer IVF" na „IVF" oraz „Zapłodnienie / Inseminacja" na „Zapłodnienie". Konsekwentnie skrócono także etykietę pola daty w drugiej z nich oraz opis punktu odniesienia pojawiający się w wyniku, dotąd brzmiący „data zapłodnienia/inseminacji". Logika obliczeń pozostaje bez zmian — inseminacja domaciczna nadal liczona jest tą samą ścieżką, ponieważ oba zdarzenia wypadają w okolicy owulacji; informuje o tym komentarz w kodzie oraz opis metody.

Ujednolicenie z kanonem rodziny po audycie porównawczym z plikiem wzorcowym FGR. Pasek zakładek na telefonie. Poniżej 560 px pasek przechodził w siatkę dwukolumnową (display:grid), co świadomie wyłączało mechanizm przewijania — a wraz z nim strzałki krańcowe, przeciąganie kursorem i przewijanie kółkiem, obecne we wszystkich pozostałych narzędziach rodziny. Decyzja była uzasadniona przy pięciu zakładkach, ale kosztem odrębności: pasek zajmował dwa wiersze i reagował inaczej niż w sąsiednich materiałach. Przywrócono warstwę kanoniczną — jednowierszowy pasek przewijany poziomo ze strzałkami pojawiającymi się wyłącznie wtedy, gdy jest co przewijać; przy pięciu krótkich etykietach na typowym ekranie telefonu pasek mieści się w całości i strzałki pozostają ukryte. Metryka paska. Odstęp 8 px, dopełnienie 10×20 px, kafelki rozciągane przez flex:1 na tle rgba(255,255,255,0.08) i etykieta 0,82 rem zastąpione metryką kanoniczną (5 px, 9×14 px, kafelki bez tła, 0,76 rem wagi 500). Usunięto też nadpisania paska w regule 600 px. Wprowadzono brakującą warstwę .shell zgodnie z kanonem rodziny narzędzi. Dotąd promień narożników leżał na samym korzeniu i obejmował wyłącznie górną krawędź, a cienia rzucanego nie było wcale — narzędzie odcinało się od tła strony inaczej niż pozostałe. Obudowa przejmuje promień 16 px i cień 0 4px 18px rgba(29,58,86,0.10); korzeń niesie odtąd wyłącznie tło, szerokość i margines zewnętrzny. Obudowa świadomie nie dostaje właściwości overflow — każda wartość inna niż visible czyni ją kontenerem przewijania i unieważnia przyklejanie paska zakładek. Dodano kanoniczny blok @media print, którego narzędzie dotąd nie miało: wydruk gubił pasek zakładek i drukował wyłącznie panel otwarty na ekranie, a granatowy nagłówek ze znakiem wodnym zużywał toner bez potrzeby. Reguła ukrywa pasek zakładek i elementy sterujące, rozwija wszystkie panele (każdy od nowej strony), odwraca nagłówek na biel z granatową kreską, wygasza znak wodny, zdejmuje ograniczenie min-width i otoczki przewijania z tabel oraz zabezpiecza karty i tabele przed łamaniem między stronami.