/*
 * Nad Przystanią · harmonogram zajęć · WERSJA 15.0.0 · 26 września 2026
 *
 * Wygląd odtworzony z dotychczasowej strony /harmonogram/ (wtyczka weekly-schedule),
 * po drugim odrzuceniu propozycji: czcionka systemowa, JEDNA CIĄGŁA TABELA z paskiem
 * nagłówka, kolumną „Pora dnia" i wierszami Rano / Popołudnie, karty na gradiencie,
 * na telefonie lista dni.
 *
 * Co zmieniła wersja 3.0 wobec 2.0, punkt po punkcie z uwag właściciela:
 *   - TABELA JEST CIĄGŁA. W 2.0 dzień był osobnym kafelkiem z własnym tłem, więc
 *     między kolumnami świeciły białe przerwy, a pasek nagłówka rozpadał się na
 *     siedem prostokątów. Teraz komórki stykają się bokami, a rozdzielają je linie
 *     1 px, dokładnie jak w oryginale.
 *   - ODDECH. Kafel ma 15 px wewnętrznego marginesu, komórka 12 px, nazwa zajęć
 *     ma interlinię 1,45 i odstęp pod spodem. Nic nie dotyka krawędzi.
 *   - KOLUMNY SĄ RÓWNE. Nagłówek dnia ma stałą wysokość (plakietka „dziś" stoi
 *     w tej samej wysokości, zamiast rozpychać wiersz), a numer kolumny bierze się
 *     z klasy `.nph-d1`…`.nph-d7`, nie z `nth-of-type` (Style.md 12.32).
 *   - LŻEJSZE KOLORYSTYKI. Cztery jasne (mgła, piasek, lawenda, mięta) i dwie
 *     nasycone (morski, fiolet). Domyślna: mgła.
 *
 * 3.1.0, trzecia tura uwag właściciela:
 *   - WIĘCEJ ODDECHU. Kafel ma 18 px marginesu wewnętrznego na telefonie i 16 px
 *     w kolumnie, nazwa zajęć jest lżejsza (waga 500) i ma interlinię 1,5.
 *   - PRZYCISK NIE NA CAŁĄ SZEROKOŚĆ. „Zobacz więcej" w kolumnie jest wąską plakietką,
 *     jak „Zobacz więcej" na dotychczasowej stronie, więc po jego prawej stronie widać
 *     tło kafla. Krawędzie przycisków przestają się zlewać z krawędzią kafla.
 *   - POWIĘKSZENIE POD KURSOREM. Kafel rośnie o 2,5 procent i dostaje mocniejszy cień.
 *     Tylko dla myszy (`hover: hover`) i tylko przy włączonych animacjach.
 *   - OKNO SZERSZE NA DUŻYM EKRANIE: 820 px zamiast 580, czyli mniej przewijania.
 *   - UDOSTĘPNIANIE ROZWINIĘTE OD RAZU, z podpisem nad polem linku.
 *
 * ⛔⛔ 8.0.0: KAŻDA REGUŁA MODUŁU JEST POPRZEDZONA `.nph`. To nie jest kosmetyka,
 * tylko naprawa błędu, przez który CZTERY TURY POPRAWEK GRAFICZNYCH NIE MIAŁY ŻADNEGO
 * SKUTKU na żywej stronie. Strona /harmonogram/ ma własny reset:
 *     .np-harm p, .np-harm ul, .np-harm ol, .np-harm li { margin:0; padding:0 }
 * Jego specyficzność to (0,1,1). Reguła `.nph-zajecia { padding: 26px }` ma (0,1,0),
 * czyli MNIEJ, więc reset strony wygrywał i kafel dostawał padding 0. Zmierzone
 * w przeglądarce: margines kafla 0 px, tekst i przyciski dokładnie na krawędzi.
 * Mój podgląd tego nie pokazywał, bo nie miał opakowania strony. Teraz każdy test
 * renderuje moduł także wewnątrz `.np-harm` z arkuszem strony.
 * `.nph .nph-zajecia` ma (0,2,0) i wygrywa z każdym resetem opartym na typie elementu.
 * ⚠️ Ta sama pułapka jest opisana w pliku strony i w Style.md 12.14. Przeoczyłem ją,
 * bo dotyczyła treści pisanych ręcznie, a nie modułu wtyczki.
 *
 * 7.0.0: margines wewnętrzny kafla równy makiecie okna, czyli 34 px na telefonie
 * i tablecie. W tabeli na komputerze 26 px, a brakujące 8 px daje komórka; razem
 * od krawędzi kolumny do tekstu wychodzi te same 34 px. ⛔ Więcej się nie da:
 * przy siedmiu kolumnach i 34 px w samym kaflu najdłuższe słowo z Facebooka
 * („SENSOPLASTYKA®", 128 px) przestaje się mieścić poniżej 1690 px szerokości okna.
 *
 * 6.0.0, szósta tura uwag: margines wewnętrzny kafla przenosi się z komórki DO KAFLA.
 * Zmierzone: od krawędzi kolumny do tekstu było 32 px, ale rozdzielone na 12 px marginesu
 * komórki i 20 px kafla. Oko czyta jako oddech tylko tę część, która leży W ŚRODKU obrysu
 * kafla, więc 20 px przy kafelku szerokim na 175 px wyglądało na za mało, mimo że łącznie
 * miejsca było tyle samo. Teraz komórka ma 10 px, a kafel 24 px: łącznie 34 px, dokładnie
 * tyle, ile w makiecie okna, którą właściciel uznał za dobrą. Kafel jest przy okazji
 * szerszy o 4 px, więc najdłuższe słowo nadal się mieści.
 *
 * 5.0.0, piąta tura uwag. Trzy rzeczy, każda z porównania z dotychczasową stroną:
 *   - ⛔ KAFEL BEZ OBRYSU. Cienka ramka 1 px biegła równolegle do tekstu i do przycisków,
 *     więc margines czytał się jak ramka w ramce, a tekst jak przyklejony do krawędzi.
 *     Dotychczasowa strona nie ma obrysu wcale, tylko cień. Tak jest teraz tutaj.
 *   - MARGINES KAFLA 20 px w kolumnie i 22 px na telefonie, razem z godziną i zegarkiem.
 *   - OBA PRZYCISKI TEJ SAMEJ WIELKOŚCI. „Zobacz więcej" był wąską plakietką i przy
 *     pełnej szerokości zapisu wyglądał jak pomyłka. Teraz mają tę samą szerokość,
 *     wysokość i wielkość pisma.
 *
 * 4.0.0, czwarta tura uwag:
 *   - KRÓJ. „Source Sans Pro", czyli krój, który motyw TheGem wczytuje na każdej
 *     podstronie. Jest lżejszy i bardziej otwarty niż systemowy. ⛔ NIE „Figtree":
 *     arkusze stron wołają ten krój, ale na produkcji nikt go nie wczytuje,
 *     więc wszędzie schodzi do kroju systemowego (sprawdzone 26 września w kodzie
 *     żywej strony i w uaf.css). Zapas systemowy zostaje na wypadek, gdyby motyw
 *     kiedyś przestał go ładować.
 *   - ⛔ NAZWY ZAJĘĆ NIE ŁAMIĄ SIĘ W ŚRODKU WYRAZU. `overflow-wrap: anywhere`
 *     rozcinało „SENSOPLASTYKA" na „SENSOPLAST / YKA", przez co tekst dobijał
 *     do krawędzi kafla i wyglądał na pozbawiony marginesu. To był prawdziwy powód
 *     zgłoszenia „tekst przylega do brzegów", a nie sam margines.
 *     `break-word` łamie wyraz dopiero wtedy, gdy naprawdę się nie mieści.
 *   - SZERSZA TABELA: do 1560 px. Przy siedmiu kolumnach daje to 198 px na dzień
 *     zamiast 175 px, czyli o jeden wyraz więcej w wierszu nazwy.
 *
 * ⛔ Kontrast liczony na OBU końcach każdego gradientu i po zmieszaniu przezroczystych
 * przycisków z tłem (Style.md 12.31). Produkcyjne końce #667eea, #f093fb i #00f2fe
 * dają z bielą 3,66, 2,04 i 1,39 przy wymaganych 4,5.
 *
 * ⛔ Zerowanie motywu (Claude.md 1.33): TheGem narzuca h3 uppercase, rozstrzelenie,
 * 28 px Montserrat i 31 px marginesu, a listom kropki. Każda z tych właściwości
 * jest tu ustawiona wprost, a na nazwach zajęć z `!important`.
 */

.nph {
	--font: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ink: #2c3e50;
	--cichy: #5f6b75;
	--linia: #e6e9ec;
	--linia-mocna: #d9dee3;
	--tlo: #fff;
	--tlo-kom: #fff;
	--tlo-pora: #f8f9fa;
	--tlo-pora2: #eef1f4;
	--dzis-tlo: #fffaf0;
	--zloto: #FFC63B;
	--koral: #CF4A28;
	--koral-c: #A63821;
	--r: 12px;
	--r-k: 9px;
	--cien: 0 2px 12px rgba(0, 0, 0, .08);

	/* ---- kolorystyka domyślna: MGŁA (jasna) ---- */
	--g1: #BFE4F5; --g2: #9CCFE9;          /* pasek nagłówka */
	--napis: #0B3954;                       /* tekst na pasku nagłówka */
	--napis-cichy: #37556a;
	--k1a: #F2F9FD; --k1b: #E0EFFA;         /* karta 1 */
	--k2a: #FDF3F7; --k2b: #F7E3EC;         /* karta 2 */
	--k3a: #EEF8F2; --k3b: #DCEFE4;         /* karta 3 */
	--karta-napis: #0B3954;                 /* tekst na kartach */
	--karta-cichy: #3c5a6e;
	--karta-obrys: rgba(11, 57, 84, .12);
	--chip: rgba(11, 57, 84, .06);
	--chip-h: rgba(11, 57, 84, .13);
	--chip-obrys: rgba(11, 57, 84, .28);
	--etyk: #17739F;
	--nav: #17739F; --nav-h: #0F5C80;

	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	max-width: 1560px;
	margin: 0 auto;
	/* ⛔ Układ tabeli włącza ZAPYTANIE O KONTENER, nie o okno przeglądarki.
	   Moduł nigdy nie dostaje całej szerokości okna: strona zostawia marginesy,
	   więc przy oknie 1440 px grafik ma 1392 px. Próg liczony od okna wpuszczał
	   tabelę tam, gdzie naprawdę nie było dla niej miejsca, i wyrazy znów się cięły.
	   Zapytanie o kontener mierzy to, co grafik faktycznie dostał. */
	container-type: inline-size;
	container-name: nph;
	box-sizing: border-box;
}
.nph *, .nph *::before, .nph *::after { box-sizing: border-box; }
/* Opakowanie dla okien osadzanych w INNYCH modułach, na przykład w suwaku wydarzeń.
   Okno musi stać wewnątrz `.nph`, bo każda reguła arkusza ma ten przedrostek,
   a `display: contents` sprawia, że opakowanie nie zmienia układu gospodarza. */
.nph--tylko-okna { display: contents; }

/* ==================================================================
   KOLORYSTYKI. Nadpisują wyłącznie tokeny, nigdy układu (Style.md 12.28).
   Koral zapisu jest wspólny dla wszystkich: rodzic nie ma się uczyć
   szukania przycisku po kolorze.
   ================================================================== */

/* piasek: ciepła, jasna */
.nph--kpiasek {
	--g1: #FFE3B8; --g2: #FBCE8C; --napis: #4A3410; --napis-cichy: #6a4f21;
	--k1a: #FFF8EC; --k1b: #FCEDD6; --k2a: #FFF3EE; --k2b: #FAE2D6; --k3a: #F8F4E9; --k3b: #EEE7D4;
	--karta-napis: #4A3410; --karta-cichy: #6a5124; --karta-obrys: rgba(74, 52, 16, .12);
	--chip: rgba(74, 52, 16, .06); --chip-h: rgba(74, 52, 16, .13); --chip-obrys: rgba(74, 52, 16, .28);
	--etyk: #8A5A12; --nav: #8A5A12; --nav-h: #6E480C; --dzis-tlo: #fffaf0;
}
/* lawenda: jasna wersja dotychczasowego fioletu */
.nph--klawenda {
	--g1: #DCD9F5; --g2: #C0B9EC; --napis: #2E2A5A; --napis-cichy: #4b4680;
	--k1a: #F5F3FD; --k1b: #E6E2F8; --k2a: #FDF1F7; --k2b: #F6E1ED; --k3a: #F0F4FD; --k3b: #DFE8FA;
	--karta-napis: #2E2A5A; --karta-cichy: #4b4680; --karta-obrys: rgba(46, 42, 90, .12);
	--chip: rgba(46, 42, 90, .06); --chip-h: rgba(46, 42, 90, .13); --chip-obrys: rgba(46, 42, 90, .28);
	--etyk: #514BA8; --nav: #514BA8; --nav-h: #3E3989; --dzis-tlo: #fbf7ff;
}
/* mięta: jasna, chłodna */
.nph--kmieta {
	--g1: #C7EDE3; --g2: #A2DCCD; --napis: #0B4740; --napis-cichy: #226158;
	--k1a: #F1FBF8; --k1b: #DEF3EC; --k2a: #F2F8FF; --k2b: #E0EDFB; --k3a: #FFF7F0; --k3b: #FBE9DB;
	--karta-napis: #0B4740; --karta-cichy: #256159; --karta-obrys: rgba(11, 71, 64, .12);
	--chip: rgba(11, 71, 64, .06); --chip-h: rgba(11, 71, 64, .13); --chip-obrys: rgba(11, 71, 64, .28);
	--etyk: #0D7568; --nav: #0D7568; --nav-h: #0A5B51; --dzis-tlo: #f5fffb;
}
/* morski: kolory marki, nasycony */
.nph--kmorski {
	--g1: #17739F; --g2: #0B3954; --napis: #fff; --napis-cichy: rgba(255, 255, 255, .88);
	--k1a: #1A7AB1; --k1b: #0B3954; --k2a: #0D817C; --k2b: #0B5351; --k3a: #5B57C9; --k3b: #2E2A7A;
	--karta-napis: #fff; --karta-cichy: rgba(255, 255, 255, .88); --karta-obrys: transparent;
	--chip: rgba(0, 0, 0, .18); --chip-h: rgba(0, 0, 0, .3); --chip-obrys: rgba(255, 255, 255, .42);
	--etyk: #0B3954; --nav: #17739F; --nav-h: #0F5C80;
}
/* fiolet: jak dotychczasowa strona, z przyciemnionymi końcami gradientów */
.nph--kfiolet {
	--g1: #4F6BE8; --g2: #764BA2; --napis: #fff; --napis-cichy: rgba(255, 255, 255, .88);
	--k1a: #4F6BE8; --k1b: #764BA2; --k2a: #CB2E80; --k2b: #C81E4A; --k3a: #1C72C9; --k3b: #0B5FAE;
	--karta-napis: #fff; --karta-cichy: rgba(255, 255, 255, .88); --karta-obrys: transparent;
	--chip: rgba(0, 0, 0, .18); --chip-h: rgba(0, 0, 0, .3); --chip-obrys: rgba(255, 255, 255, .42);
	--etyk: #764BA2; --nav: #4F6BE8; --nav-h: #3856cf;
}

/* ---------- zerowanie motywu ---------- */
:where(.nph) p, :where(.nph) ul, :where(.nph) li, :where(.nph) h2, :where(.nph) h3,
:where(.nph) time, :where(.nph) summary, :where(.nph) details, :where(.nph) figure {
	margin: 0; padding: 0; list-style: none; text-transform: none; letter-spacing: 0; font-family: var(--font);
}
.nph ul, .nph li { list-style: none !important; }
.nph a { text-decoration: none; }
.nph button { font-family: var(--font); }
.nph svg { flex: none; }
.nph img { max-width: 100%; height: auto; }

/* ---------- tytuł i pasek wyboru kolorystyki ---------- */
.nph .nph-tytul{ font-size: 24px; font-weight: 700; color: var(--ink); margin: 0 0 14px; line-height: 1.2; }
.nph .nph-kolory { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px 14px; background: #fffdf5; border: 1px dashed #e0c25a; border-radius: var(--r); font-size: 13px; color: var(--ink); }
.nph .nph-kolory-etyk { font-weight: 700; margin-right: 2px; }
.nph .nph-kolor-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px; border: 1.5px solid var(--linia-mocna); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.nph .nph-kolor-btn i { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, var(--p1), var(--p2)); border: 1px solid rgba(0, 0, 0, .14); }
.nph .nph-kolor-btn:hover,
.nph .nph-kolor-btn:focus-visible { border-color: var(--nav); color: var(--nav); }
.nph .nph-kolor-btn.is-on { background: #17324a; border-color: #17324a; color: #fff; }
.nph .nph-kolory-uwaga { flex-basis: 100%; font-size: 12.5px; color: var(--cichy); margin: 2px 0 0; line-height: 1.5; }
.nph .nph-kolory code { font-size: 12px; background: rgba(11, 57, 84, .07); padding: 1px 5px; border-radius: 4px; }

/* ---------- nawigacja ---------- */
/* telefon: zakres na górze, dwa przyciski po połowie. Jeden rząd z trzema napisami
   nie mieści się w 390 px (zmierzone: 4 elementy za prawą krawędzią). */
.nph .nph-nawigacja{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 18px; padding: 14px; background: var(--tlo); border-radius: var(--r); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.nph .nph-nav-btn { display: inline-flex; flex: 1 1 calc(50% - 5px); min-width: 0; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; background: var(--nav); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s; }
.nph .nph-nav-btn:hover,
.nph .nph-nav-btn:focus-visible { background: var(--nav-h); color: #fff; transform: translateY(-1px); }
.nph .nph-nav-btn span { white-space: normal; min-width: 0; }
.nph .nph-nav-btn--nieczynny,
.nph .nph-nav-btn--nieczynny:hover { background: #c9ced3; color: #fff; cursor: not-allowed; transform: none; }
.nph .nph-zakres { order: -1; flex: 1 1 100%; text-align: center; min-width: 0; }
.nph .nph-zakres strong { display: block; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.nph .nph-zakres span { display: block; font-size: 13px; color: var(--cichy); }/* ---------- komunikaty ---------- */
.nph .nph-pusto,
.nph .nph-blad,
.nph .nph-brak { background: var(--tlo); border: 1px dashed #ccc; border-radius: var(--r); padding: 18px; font-size: 15px; color: var(--cichy); }
.nph .nph-blad a,
.nph .nph-brak a,
.nph .nph-pusto a { color: var(--nav); font-weight: 700; text-decoration: underline; }
.nph .nph-admin { margin-top: 10px; font-size: 13px; }

/* ==================================================================
   TELEFON (domyślnie): lista dni, jak dotychczasowa strona na telefonie
   ================================================================== */
.nph .nph-tydzien{ display: block; background: var(--tlo); border-radius: var(--r); box-shadow: var(--cien); overflow: hidden; }
.nph .nph-rail { display: none; }
.nph .nph-dzien { border-bottom: 1px solid var(--linia); }
.nph .nph-dzien:last-child { border-bottom: none; }
.nph .nph-dzien--pusty { display: none; }                       /* jak dotychczas: dzień bez zajęć znika z listy */
.nph .nph-dzien-glowa{ display: flex; align-items: center; gap: 10px; padding: 15px 18px; background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%); color: var(--napis); }
.nph .nph-dzien-nazwa { font-size: 16px; font-weight: 700; }
.nph .nph-dzien-data { font-size: 14px; color: var(--napis-cichy); }
.nph .nph-dzis { margin-left: auto; background: var(--zloto); color: #3a2d05; padding: 4px 11px; border-radius: 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.nph .nph-dzien-pusto { display: none; }
.nph .nph-pasmo { background: #fafbfc; }
.nph .nph-pasmo--pusto { display: none; }
.nph .nph-pasmo-etyk { display: none; }
.nph .nph-lista { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 14px; padding: 12px; }
.nph .nph-pasmo + .nph-pasmo .nph-lista { padding-top: 0; }

/* ---------- kafel zajęć ---------- */
.nph .nph-zajecia{
	position: relative; border-radius: var(--r-k); padding: 34px; margin: 0;
	color: var(--karta-napis); background: linear-gradient(135deg, var(--k1a) 0%, var(--k1b) 100%);
	/* ⛔ Żadnego obrysu. Linia 1 px biegnie równolegle do tekstu i do przycisków, więc
	   margines przestaje być widoczny jako oddech, a robi się ramką w ramce. Dotychczasowa
	   strona też nie ma obrysu, tylko cień. Zgłaszane trzy razy, zanim znalazłem przyczynę. */
	border: none; box-shadow: 0 1px 2px rgba(11, 57, 84, .08), 0 6px 16px -6px rgba(11, 57, 84, .22);
}
/* Powiększenie pod kursorem. Tylko dla myszy: na telefonie `:hover` zostaje po dotknięciu
   i kafel zostałby powiększony aż do następnego dotknięcia gdzie indziej.
   Skala 1,025 mieści się w marginesie komórki (12 px), więc nic nie wychodzi poza tabelę. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.nph .nph-zajecia { transition: transform .18s ease, box-shadow .18s ease; }
.nph .nph-zajecia:hover { transform: scale(1.025); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); z-index: 5; }
}
@media (hover: hover) {
	.nph .nph-zajecia:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .2); z-index: 5; }
.nph .nph-zajecia:focus-within { box-shadow: 0 10px 26px rgba(0, 0, 0, .2); z-index: 5; }
}
.nph .nph-lista .nph-zajecia:nth-child(3n+2) { background: linear-gradient(135deg, var(--k2a) 0%, var(--k2b) 100%); }
.nph .nph-lista .nph-zajecia:nth-child(3n+3) { background: linear-gradient(135deg, var(--k3a) 0%, var(--k3b) 100%); }
.nph .nph-godzina { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--karta-napis); margin: 0 0 10px; }
.nph .nph-godzina::before {
	content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.nph .nph-godzina time { font-size: 14px; }
.nph .nph-do { font-weight: 600; color: var(--karta-cichy); font-size: 12px; }
/* ⛔ Waga 500, nie 600. Przy 600 nazwa zajęć czytała się jak drugi nagłówek i cały
   kafel robił się ciężki; właściciel poprosił o lżejszą czcionkę 26 września.
   Interlinia 1,55 daje odstęp między wierszami długich nazw z Facebooka.

   ⛔ `overflow-wrap: break-word`, NIGDY `anywhere`. Przy `anywhere` przeglądarka
   rozcina wyraz w dowolnym miejscu, więc „SENSOPLASTYKA" łamało się na
   „SENSOPLAST / YKA" i tekst dobijał do prawej krawędzi kafla. Wyglądało to
   na brak marginesu, choć margines był. `break-word` łamie wyraz dopiero wtedy,
   gdy naprawdę nie mieści się w kolumnie. */
.nph .nph-nazwa {
	font-family: var(--font) !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.55 !important;
	color: var(--karta-napis) !important; margin: 0 0 14px !important; padding: 0 !important;
	text-transform: none !important; letter-spacing: 0 !important;
	overflow-wrap: break-word; word-break: normal; hyphens: manual; text-wrap: pretty;
}
/* ⛔ Adres NIE na kaflu. Jest ten sam dla wszystkich zajęć, więc na telefonie dawał
   czternaście identycznych wierszy i wydłużał listę o jedną trzecią. Zostaje w oknie
   zajęć i w danych strukturalnych, gdzie czyta go wyszukiwarka. */
.nph .nph-miejsce{ display: none; }

/* ---------- przyciski na kaflu ---------- */
/* Na kaflu są DWA: zapis i „Zobacz więcej". Kalendarz zszedł do okna,
   bo rodzic dodaje termin dopiero wtedy, gdy przeczyta, co to za zajęcia.
   ⛔ Oba mają tę samą szerokość, wysokość i wielkość pisma. Różne rozmiary
   czytały się jak niedokończony układ, nie jak hierarchia. Hierarchię niesie
   kolor: zapis jest koralowy, „Zobacz więcej" przezroczysty. */
.nph .nph-akcje{ display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.nph .nph-btn,
.nph .nph-akcje .np-zap-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 44px; padding: 10px 14px;
	border-radius: 8px; font-family: var(--font); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: center;
	text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s;
	white-space: normal; overflow: visible; text-overflow: clip; box-shadow: none; margin: 0;
}
.nph .nph-btn { background: var(--chip); color: var(--karta-napis); border: 1.5px solid var(--chip-obrys); }
.nph .nph-btn:hover,
.nph .nph-btn:focus-visible { background: var(--chip-h); color: var(--karta-napis); }
.nph .nph-btn span { min-width: 0; white-space: normal; }
.nph .nph-akcje .np-zap-btn { background: var(--koral); color: #fff; border: 1.5px solid var(--koral); font-weight: 700; }
.nph .nph-akcje .np-zap-btn:hover,
.nph .nph-akcje .np-zap-btn:focus-visible { background: #BE4526; border-color: #BE4526; color: #fff; transform: none; }
.nph .nph-akcje .np-zap-btn::before {
	content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3.5H5.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M8 12.5l3 3 7-9'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3.5H5.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M8 12.5l3 3 7-9'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Na nasyconych kolorystykach koral potrzebuje jasnej obwódki, żeby mieć wobec tła kafla
   granicę 3:1 (WCAG 1.4.11).
   ⛔ Obwódka idzie CIENIEM WEWNĘTRZNYM, nie grubszą ramką. Ramka 2 px zamiast 1,5 px
   zabierała przyciskowi 1 px na treść, a tyle właśnie brakowało etykiecie „Zapisz dziecko",
   więc łamała się na dwie linie i przycisk rósł o 14 px wobec sąsiada. Cień wewnętrzny
   rysuje tę samą obwódkę i nie dotyka szerokości treści. */
.nph--kmorski .nph-akcje .np-zap-btn, .nph--kfiolet .nph-akcje .np-zap-btn { border-color: var(--koral); box-shadow: inset 0 0 0 2px #fff; }

/* ==================================================================
   OKNO „Zobacz więcej"
   <dialog>: skrypt otwiera je jako modalne i wpisuje adres zajęć w pasek
   przeglądarki, a bez skryptu ?zajecia=ID wczytuje stronę z atrybutem open.
   ================================================================== */
.nph .nph-okno{ border: none; padding: 0; margin: auto; width: min(580px, calc(100% - 24px)); max-height: min(90vh, 1000px); border-radius: 16px; background: #fff; color: #33424d; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); font-family: var(--font); overflow: hidden; }
.nph .nph-okno:not([open]) { display: none; }
.nph .nph-okno::backdrop { background: rgba(0, 0, 0, .62); }
html.nph-okno-otwarte { overflow: hidden; }
.nph .nph-okno-srodek { max-height: min(90vh, 1000px); overflow-y: auto; padding: 0 0 24px; }
.nph .nph-okno-glowa { position: absolute; top: 0; right: 0; z-index: 6; display: flex; justify-content: flex-end; padding: 14px 14px 0; margin: 0; }
.nph .nph-okno-zamknij { width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #3d4b56; font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); }
.nph .nph-okno-zamknij:hover,
.nph .nph-okno-zamknij:focus-visible { background: #dde1e5; color: #16222b; }
/* ==================================================================
   OKNO W WARIANCIE B, wybranym przez właściciela 26 września:
   nazwa zajęć, termin i trzy przyciski leżą NA OKŁADCE, opis pod zdjęciem.
   Na telefonie treść schodzi POD zdjęcie i wraca do ciemnego tekstu na jasnym tle:
   trzy przyciski na zdjęciu wysokim na 190 px nie mieszczą się czytelnie.
   Bez okładki układ też schodzi do pionu, bo nie ma czego przyciemniać.
   ================================================================== */
.nph .nph-okno-hero { position: relative; }
.nph .nph-okno-hero-tresc { padding: 20px 24px 4px; }
.nph .nph-okno-okladka { display: block; width: 100%; height: 190px; object-fit: cover; margin: 0; background: #e6eaee; }
.nph .nph-okno-tresc { padding: 18px 24px 0; }
.nph .nph-okno-tytul { font-family: var(--font) !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.32 !important; color: #1d2a33 !important; margin: 0 0 10px !important; padding: 0 !important; text-transform: none !important; letter-spacing: 0 !important; }
.nph .nph-okno-kiedy { font-size: 14px; color: #55636d; margin: 0 0 16px; }
.nph .nph-okno-kiedy time { font-weight: 700; color: #2c3e50; }
/* ⛔ Opis MUSI zaczynać się przy lewej krawędzi, zawsze.
   Zgłoszenie z 26 września: pierwsze zdanie zaczynało się w połowie szerokości okna,
   a drugie już przy krawędzi. Pomiar wykluczył dane: opis w cache Facebooka zaczyna
   się od litery, bez ani jednego znaku odstępu. Zostaje CSS, więc zerujemy tu wprost
   każdą właściwość, która potrafi przesunąć PIERWSZY wiersz, niezależnie od tego,
   co narzuca motyw albo arkusz strony. Ta sama zasada, co przy `h3` i listach.
   ⚠️ `pre-line` zamiast `pre-wrap`: akapity z Facebooka zostają, ale odstęp na
   początku wiersza przestaje cokolwiek znaczyć. To jedyne ustawienie, przy którym
   żadna treść z Facebooka nie jest w stanie wciąć pierwszego wiersza. */
.nph .nph-okno-opis {
	font-size: 15px;
	line-height: 1.7;
	color: #3f4c56;
	white-space: pre-line;
	overflow-wrap: break-word;
	margin: 0 0 20px;
	padding: 18px 0 0;
	border-top: 2px solid #eef0f2;
	text-indent: 0;
	text-align: left;
	list-style: none;
}
.nph .nph-okno-opis::first-line { text-indent: 0; }
.nph .nph-okno-opis::first-letter { float: none; font-size: inherit; margin: 0; padding: 0; }
.nph .nph-okno-opis a { color: var(--nav); text-decoration: underline; }
.nph .nph-okno-opis-brak { color: #6b7780; font-style: italic; }
.nph .nph-okno-akcje { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 9px; margin: 0 0 14px; }
.nph .nph-okno-akcje .nph-btn { background: #fff; color: #2c3e50; border: 2px solid #d9dde3; min-height: 48px; font-size: 14.5px; }
.nph .nph-okno-akcje .nph-btn:hover,
.nph .nph-okno-akcje .nph-btn:focus-visible { background: #f2f5f8; border-color: var(--nav); color: #2c3e50; }
.nph .nph-okno-akcje .np-zap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 11px 16px; border-radius: 8px; background: var(--koral); color: #fff; border: 2px solid var(--koral); font-family: var(--font); font-size: 15px; font-weight: 700; cursor: pointer; margin: 0; box-shadow: none; }
.nph .nph-okno-akcje .np-zap-btn:hover,
.nph .nph-okno-akcje .np-zap-btn:focus-visible { background: #BE4526; border-color: #BE4526; color: #fff; transform: none; }

/* ---------- udostępnianie ---------- */
/* Panel udostępniania jest ROZWINIĘTY od razu (atrybut `open` w HTML): rodzic ma
   zobaczyć, że da się to wysłać koleżance, bez klikania w zwijkę.
   Pole z linkiem stoi w osobnej ramce z podpisem, bo wcześniej zlewało się
   z rzędem przycisków nad nim. */
.nph .nph-udostepnij{ border-top: 1px solid #eef0f2; margin-top: 18px; padding-top: 6px; }
.nph .nph-udostepnij summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 0; border-radius: 8px; font-size: 14px; font-weight: 700; color: #2c3e50; cursor: pointer; list-style: none; user-select: none; }
.nph .nph-udostepnij summary::-webkit-details-marker { display: none; }
.nph .nph-udostepnij summary:hover,
.nph .nph-udostepnij summary:focus-visible { color: var(--nav); }
.nph .nph-udostepnij-lista { display: flex; flex-wrap: wrap; gap: 9px; margin: 4px 0 0; }
.nph .nph-udostepnij-lista a,
.nph .nph-udostepnij-lista button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 9px 17px; border-radius: 999px; border: 1.5px solid #d9dde3; background: #fff; color: #2c3e50; font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.nph .nph-udostepnij-lista a:hover,
.nph .nph-udostepnij-lista button:hover,
.nph .nph-udostepnij-lista a:focus-visible,
.nph .nph-udostepnij-lista button:focus-visible { border-color: var(--nav); color: var(--nav); background: #f7fafc; }
.nph .nph-udostepnij-pole { margin: 16px 0 0; padding: 14px 16px; background: #f6f8fa; border: 1px solid #e4e8ec; border-radius: 10px; }
.nph .nph-udostepnij-pole label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5b6a75; margin: 0 0 8px; }
.nph .nph-udostepnij-link { display: flex; gap: 10px; align-items: center; margin: 0; }
.nph .nph-udostepnij-link input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1.5px solid #d3d9df; border-radius: 8px; font-family: var(--font); font-size: 13px; color: #33424d; background: #fff; }
.nph .nph-udostepnij-link input:focus { outline: 2px solid var(--nav); outline-offset: 1px; border-color: var(--nav); }
.nph .nph-kopiuj-ok { font-size: 13px; color: #1f7a3f; font-weight: 700; margin: 10px 0 0; min-height: 18px; }

/* ---------- wariant B od 700 px: treść wchodzi na okładkę ---------- */
@media (min-width: 700px) {
	.nph .nph-okno--zdjecie .nph-okno-okladka { height: 400px; }
	.nph .nph-okno--zdjecie .nph-okno-hero::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(to top, rgba(8, 26, 38, .93) 0%, rgba(8, 26, 38, .80) 45%, rgba(8, 26, 38, .50) 100%);
	}
	.nph .nph-okno--zdjecie .nph-okno-hero-tresc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 30px 24px; color: #fff; }
	.nph .nph-okno--zdjecie .nph-okno-tytul { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
	.nph .nph-okno--zdjecie .nph-okno-kiedy { color: #dbe7ef; }
	.nph .nph-okno--zdjecie .nph-okno-kiedy time { color: #fff; }
	/* Przyciski na zdjęciu mają pełne krycie: przez półprzezroczyste prześwituje fotografia. */
	.nph .nph-okno--zdjecie .nph-okno-akcje .nph-btn { background: rgba(255, 255, 255, .95); border-color: rgba(255, 255, 255, .95); color: #1d2a33; }
	.nph .nph-okno--zdjecie .nph-okno-akcje .np-zap-btn { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
	.nph .nph-okno--zdjecie .nph-okno-tresc { padding-top: 22px; }
	.nph .nph-okno--zdjecie .nph-okno-opis { border-top: none; padding-top: 0; }
}

/* ==================================================================
   TABLET 700-1099: dwie kolumny kafli dni
   ================================================================== */
@media (min-width: 700px) {
	.nph .nph-nawigacja { flex-wrap: nowrap; gap: 12px; padding: 14px 18px; }
.nph .nph-nav-btn { flex: none; padding: 11px 20px; font-size: 15px; }
.nph .nph-nav-btn span { white-space: nowrap; }
.nph .nph-zakres { order: 0; flex: 0 1 auto; }
.nph .nph-tydzien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; background: transparent; box-shadow: none; overflow: visible; }
.nph .nph-dzien { border: none; border-radius: var(--r); background: var(--tlo); box-shadow: var(--cien); overflow: hidden; }
.nph .nph-dzien--pusty { display: block; }
.nph .nph-dzien-pusto { display: block; padding: 16px 18px 20px; font-size: 14px; color: var(--cichy); }
.nph .nph-pasmo-etyk { display: block; padding: 14px 15px 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--etyk); }
.nph .nph-pasmo-etyk small { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cichy); margin-left: 6px; font-size: 11.5px; }
.nph .nph-pasmo + .nph-pasmo:not(.nph-pasmo--pusto) { border-top: 1px solid var(--linia); }
}

/* ==================================================================
   KOMPUTER ≥1100: jedna ciągła tabela, jak na dotychczasowej stronie
   Kolumna „Pora dnia" + siedem dni, wiersze Rano / Popołudnie.
   Dzień ma display:contents, a numer kolumny bierze z klasy .nph-d1…7,
   NIE z nth-of-type: przed dniami stoją trzy szyny i licznik by się przesunął
   (Style.md 12.32).
   ================================================================== */
/* Okno zajęć szersze już od 1100 px, niezależnie od tego, czy grafik jest tabelą. */
@media (min-width: 1100px) {
	.nph .nph-okno { width: min(820px, calc(100% - 48px)); }
.nph .nph-okno-tresc { padding: 22px 34px 0; }
.nph .nph-okno-hero-tresc { padding: 20px 34px 4px; }
	.nph .nph-okno--zdjecie .nph-okno-hero-tresc { padding: 0 34px 26px; }
	.nph .nph-okno--zdjecie .nph-okno-okladka { height: 440px; }
.nph .nph-okno-opis { font-size: 15.5px; }
.nph .nph-okno-akcje { flex-direction: row; flex-wrap: wrap; }
.nph .nph-okno-akcje .np-zap-btn { flex: 1 1 100%; }
.nph .nph-okno-akcje .nph-btn { flex: 1 1 calc(50% - 5px); width: auto; }
}

/* ==================================================================
   TABELA OD 1460 px SZEROKOŚCI SAMEGO GRAFIKU (zapytanie o kontener, nie o okno).
   ⛔ Próg jest wynikiem POMIARU, nie wyczucia. Przy grafiku szerokim na 1232 px
   kolumna dnia daje 96 px na wiersz tekstu, a najdłuższe słowa z tytułów na Facebooku
   mają 115 i 128 px. Tabela w takiej szerokości musi rozcinać wyrazy albo odebrać
   kaflom margines. Zamiast ściskać, poniżej progu pokazujemy dwie kolumny kafli dni,
   gdzie na wiersz przypada ponad 400 px.

   ⚠️ Dlaczego kontener, a nie okno: strona zostawia grafikowi po 24 px marginesu,
   więc przy oknie 1440 px grafik ma 1392 px. Próg liczony od okna wpuszczał tabelę
   tam, gdzie miejsca nie było. Zapytanie o kontener mierzy to, co grafik dostał.

   ⛔ `hyphens: auto` WYŁĄCZONE, mimo że kusi. Chromium dzieli polskie wyrazy słabo:
   zmierzone 26 września „Ad-aptacyjne", „DO-MIŚKĄ", „Bąbel-kowa". Dzieliło przy tym
   nie tylko wyrazy za długie, ale każdy, który poprawiał wypełnienie wiersza, więc
   kolumna robiła się gęsta od łączników. Zamiast tego kolumna dostaje te kilka
   pikseli, których brakowało: szyna „Pora dnia" ma 130 px zamiast 150, a kafel
   16 px marginesu zamiast 18. Najdłuższe słowo z tytułów, „SENSOPLASTYKA®" (128 px),
   mieści się wtedy w wierszu. Harness wypisuje każde słowo szersze niż kolumna.
   ================================================================== */
@container nph (min-width: 1460px) {
	.nph .nph-tydzien {
		display: grid; grid-template-columns: 120px repeat(7, minmax(0, 1fr)); grid-template-rows: auto auto auto;
		gap: 0; background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--r); box-shadow: var(--cien); overflow: hidden;
		/* ⛔ `align-items: stretch` MUSI tu być, mimo że to wartość domyślna siatki.
		   Układ tabletowy powyżej ustawia `align-items: start`, a ta reguła obowiązuje
		   dalej na komputerze. Skutek: każda komórka kończy się na swojej treści,
		   pod krótszymi zostaje biała dziura, linie nie schodzą do dołu i cała tabela
		   wygląda na rozsypaną. Dokładnie to zgłosił właściciel 26 września. */
		align-items: stretch;
	}
.nph .nph-rail { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; grid-column: 1; }
.nph .nph-rail--glowa { grid-row: 1; padding: 18px 10px; font-size: 15px; background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%); color: var(--napis); font-size: 14px; font-weight: 700; border-right: 2px solid rgba(255, 255, 255, .45); }
.nph .nph-rail--rano,
.nph .nph-rail--popo { padding: 20px 10px; background: linear-gradient(135deg, var(--tlo-pora) 0%, var(--tlo-pora2) 100%); border-right: 2px solid var(--linia-mocna); }
.nph .nph-rail--rano { grid-row: 2; border-bottom: 1px solid var(--linia-mocna); }
.nph .nph-rail--popo { grid-row: 3; }
.nph .nph-rail b { display: block; font-size: 12px; font-weight: 800; color: var(--etyk); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.nph .nph-rail small { display: block; font-size: 12px; font-weight: 500; color: var(--cichy); }
.nph .nph-dzien,
.nph .nph-dzien--pusty { display: contents; }
.nph .nph-d1 > * { grid-column: 2; }
.nph .nph-d2 > * { grid-column: 3; }
.nph .nph-d3 > * { grid-column: 4; }
.nph .nph-d4 > * { grid-column: 5; }
.nph .nph-d5 > * { grid-column: 6; }
.nph .nph-d6 > * { grid-column: 7; }
.nph .nph-d7 > * { grid-column: 8; }

	/* stała wysokość nagłówka: plakietka „dziś" nie rozpycha wiersza,
	   więc wszystkie siedem kolumn kończy się na tej samej linii */
	/* ⛔ Plakietka „dziś" stoi POZA przepływem, a dolny margines rezerwuje jej miejsce
	   w każdej kolumnie. Inaczej kolumna z dzisiejszym dniem jest o 4 px wyższa
	   od pozostałych i cały pasek dni wygląda na krzywy (zmierzone 26 września). */
	.nph .nph-dzien-glowa{
		grid-row: 1; position: relative; flex-direction: column; justify-content: center; gap: 4px;
		min-height: 96px; padding: 14px 10px 30px; text-align: center;
		border-right: 1px solid rgba(255, 255, 255, .45);
	}
.nph .nph-d7 .nph-dzien-glowa { border-right: none; }
.nph .nph-dzien-nazwa { font-size: 15px; font-weight: 700; line-height: 1.2; }
.nph .nph-dzien-data { font-size: 12.5px; font-weight: 500; }
.nph .nph-dzien--dzis .nph-dzien-glowa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--zloto); }
.nph .nph-dzis { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); margin: 0; padding: 3px 9px; font-size: 10px; }
.nph .nph-dzien-pusto { display: none; }
.nph .nph-pasmo,
.nph .nph-pasmo--pusto { display: block; background: var(--tlo-kom); border-right: 1px solid var(--linia); padding: 8px; min-height: 150px; }
.nph .nph-pasmo--rano { grid-row: 2; border-bottom: 1px solid var(--linia-mocna); }
.nph .nph-pasmo--popo { grid-row: 3; }
.nph .nph-d7 .nph-pasmo { border-right: none; }
.nph .nph-dzien--dzis .nph-pasmo { background: var(--dzis-tlo); }
.nph .nph-pasmo + .nph-pasmo { border-top: none; }
.nph .nph-pasmo-etyk { display: none; }
.nph .nph-lista { padding: 0; gap: 10px; }
.nph .nph-pasmo + .nph-pasmo .nph-lista { padding-top: 0; }
.nph .nph-zajecia { padding: 26px; }
.nph .nph-godzina { font-size: 12px; margin-bottom: 9px; }
.nph .nph-godzina time { font-size: 13px; }
.nph .nph-nazwa { font-size: 14px !important; margin-bottom: 15px !important; }
	/* w kolumnie przyciski są niższe: to już mysz, a nie palec.
	   WCAG 2.2 AA wymaga 24 px, mamy 38. Etykieta łamie się, nic nie jest ucinane. */
	.nph .nph-akcje{ gap: 8px; align-items: stretch; }
.nph .nph-btn,
.nph .nph-akcje .np-zap-btn { min-height: 42px; padding: 9px 12px; font-size: 13px; gap: 6px; }
	/* ⛔ W WĄSKIEJ KOLUMNIE ZAPIS TRACI IKONĘ. Napis „Zapisz dziecko" ma 96 px,
	   a przycisk w kolumnie 200 px daje na treść 104 px. Ikona zabierała 18 px razem
	   z odstępem, więc etykieta łamała się na dwie linie i przycisk rósł o 12 px
	   wobec sąsiada. Znaczenie niesie kolor: koral to jedyny przycisk akcji w module.
	   Na telefonie i tablecie ikona zostaje, bo tam miejsca jest dosyć. */
	.nph .nph-akcje .np-zap-btn::before{ display: none; }

}

/* ---------- ruch, druk ---------- */
@media (prefers-reduced-motion: reduce) { .nph * { transition: none !important; animation: none !important; } }
@media print {
	.nph .nph-nawigacja, .nph .nph-kolory, .nph .nph-akcje, .nph .nph-okno { display: none !important; }
.nph .nph-zajecia { break-inside: avoid; box-shadow: none; } }