/* Theme 3 - baza CSS: fonty, tokeny, reset, layout, komponenty (Zadanie 2) */

/* ===== FONTY (self-hosted, latin-ext) ===== */
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/theme/3/fonts/ibm-plex-sans-v23-latin_latin-ext-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(/theme/3/fonts/barlow-semi-condensed-v16-latin_latin-ext-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url(/theme/3/fonts/barlow-semi-condensed-v16-latin_latin-ext-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ===== TOKENS ===== */
:root{--brand:#d43e49;--brand-h:#AA3A43;--brand-l:#ff6b76;--brand-bg:#fbeced;--ok:#2fa26b;
 /* --bg biale (decyzja D1): tlo jak w interii/onecie, separacje przejmuja kreski i pasy.
    --band to juz nie "tlo o oczko ciemniejsze od strony", tylko delikatny pas rozdzielajacy.
    UWAGA: --band przestaje nadawac sie na KRESKE (1,09:1 wobec bieli) - patrz Krok 8 */
 --dark:#1b1e24;--darker:#0d0f13;--bg:#ffffff;--band:#f4f5f8;--line:#e2e5eb;--hair:#d9dce3;
 --txt:#1d222b;--txt-h:#14171d;--txt-2:#626b79;--txt-3:#8b93a1;--container:1320px;
 /* --card-sh:none - na bialym tle cien jest brudem, nie separacja. Karty stojace na tle
    strony maja border:1px solid var(--line) (wypisane nizej, jedna po drugiej).
    --card-sh-h zostaje: uzywany WYLACZNIE na :hover jako sygnal interakcji */
 --card-sh:none;--card-sh-h:0 6px 18px rgba(16,20,28,.13);
 --f-ui:'IBM Plex Sans',system-ui,sans-serif;--f-lab:'Barlow Semi Condensed',var(--f-ui);
 /* kolory sekcji: --sec-* to wartosci ustawiane dzis inline jako --ac w indexPolska.tpl /
    indexMiasta.tpl (zebrane tu, zeby byly jednym zrodlem prawdy). To kolory "jasne",
    uzywane na kreske belki .tm-shead i chip .tm-kat - NIE pod bialy tekst na duzej plamie. */
 --sec-biznes:#226697;
 --sec-sport:#3f9142;
 --sec-kultura:#c78a1e;
 --sec-zdrowie:#b0578d;
 --sec-moto:#54637a;
 --sec-turystyka:#12aab5;
 /* warianty kolorow sekcji dla kafla typograficznego .tm-nofoto (warstwa B).
    Biel na plaskim kolorze sekcji: #3f9142 daje 3,93:1, #c78a1e 2,97:1 - ponizej AA.
    Tekstura kafla dodatkowo rozjasnia tlo, wiec budzet bieli tekstury ograniczono do 0,06
    (--nofoto-tex) i przy takim budzecie ponizsze warianty daja min. 4,50:1.
    UWAGA: --ac-dark BEZ SUFIKSU celowo NIE jest tu zdefiniowany i NIE WOLNO go tu dopisac.
    Regula .tm-nofoto ma lancuch fallbacku var(--ac-dark,var(--ac,var(--brand))) - gdyby
    token istnial globalnie, lancuch bylby martwy i KAZDY kafel wyszedlby czerwony.
    Wartosc ustawia sekcja inline na <section> (warstwa C). */
 --ac-dark-fakty:#d23440;   /* z #d43e49 - plasko 4,88:1, pod tekstura 4,50:1 */
 --ac-dark-biznes:#226697;  /* bez zmian  - plasko 6,15:1, pod tekstura 5,41:1 */
 --ac-dark-sport:#367c39;   /* z #3f9142 - plasko 5,12:1, pod tekstura 4,55:1 */
 --ac-dark-kultura:#936616; /* z #c78a1e - plasko 5,06:1, pod tekstura 4,51:1 */
 --ac-dark-zdrowie:#a95086; /* z #b0578d - plasko 5,03:1, pod tekstura 4,52:1 */
 --ac-dark-moto:#54637a;    /* bez zmian  - plasko 6,10:1, pod tekstura 5,33:1 */
 /* z #12aab5 - Turystyka miala do 2026-09-05 ten sam kolor co Sport (--ac-dark-sport),
    co kasowalo kodowanie kolorem miedzy dzialami; turkus to nowa, samodzielna barwa
    (odcien 184st, w polowie drogi miedzy zielenia sportu a granatem biznesu, ale
    odlegly od obu o >20st) - plasko 5,23:1, pod tekstura 4,67:1 */
 --ac-dark-turystyka:#0d7880;
 /* maksymalne laczne krycie bieli dekoracji .tm-nofoto - NIE podnosic bez ponownego pomiaru */
 --nofoto-tex:.06;
 /* metryczka na kaflu .tm-oc: .66 z makiety daje 3,55:1 na bialym zdjeciu (ponizej AA),
    .85 daje 4,69:1 w tym samym najgorszym punkcie */
 --oc-meta:rgba(255,255,255,.85);
 /* tlo pasa pelnej szerokosci sekcji Kultura (warstwa C) */
 --tint-kultura:#fdf7ec;
 /* przyciemnienie kafla .tm-oc - stopa .90 daje 16:1, punkt 32% (gorna krawedz tekstu)
    5,75:1 na skrajnie bialym zdjeciu; ponizej 32% tekst nie siega */
 --ov:linear-gradient(to top,rgba(6,8,12,.90) 0%,rgba(6,8,12,.62) 32%,rgba(6,8,12,.10) 62%,rgba(6,8,12,0) 100%);
 /* pas lokalny "Twoje miasto" (indexMiasta.tpl, wariant V3) - chlodny granat odroznia
    tresc miejska od czerwieni marki, ktora zostaje kolorem sekcji krajowych */
 --loc:#15588c;--loc-bg:#eef4fa;--loc-line:#dbe4ee}

/* ===== KONSEKWENCJE BIALEGO TLA (decyzja D1) - inwentarz swiadomych decyzji =====
   Karty stojace SAMODZIELNIE na tle strony dostaly border:1px solid var(--line):
     .tm-card .tm-latest .tm-top5 .tm-mini .tm-skrot .tm-band2 .tm-w .tm-mbar
     .tm-art-card .tm-art-rc .tm-art-com .tm-art-sad .tm-art-wid .tm-adm-side
     .tm-icobtn .tm-ucard oraz mobilny wariant .tm-li
   (.tm-artcard i .tm-pagecard dziedzicza ramke po .tm-card - nie wymagaja wlasnej reguly.)

   BEZ ZMIAN - mialy juz wlasne obramowanie, wiec zdjecie cienia niczego nie psuje:
     .tm-wt, .tm-mtcta, .tm-side30, .tm-search, .tm-chip, .tm-cchip, .tm-art-tag,
     .tm-art-cf, .card (compat.css), .img-thumbnail (compat.css), .tm-pv-* (wlasne ramki),
     .tm-top - pasek gorny stoi bezposrednio na tle strony (regula najwyzszego poziomu,
     nie element wewnatrz karty), ale ma wlasna kreske border-bottom:1px solid var(--line),
     wiec na bieli nadal odcina sie od tresci mimo tla --band

   BEZ ZMIAN - to placeholdery/plamy z wlasnym tlem, czytelne na bieli:
     .tm-ad (#dfe2e8 + dashed), .tm-art-ad (#f0f1f5 + dashed),
     .tm-art-pap (#f2f3f6), .tm-art-sadi (gradient),
     .tm-hbig / .tm-cimg / .tm-mimg / .tm-lth (ciemne gradienty)

   BEZ ZMIAN - var(--band) w roli TLA wewnatrz obramowanej karty (nie stoi na tle strony):
     .tm-mtd, .tm-mtgrid li, .tm-mth1, .tm-mtmin, .tm-mtch, .tm-mtday, .tm-aqnow,
     .tm-aqbar, .tm-wtlegend, .tm-wtrow:hover, .tm-pgchip, .tm-pgw path
   Zmiana --band z #eef0f4 na #f4f5f8 to roznica jednego oczka - te elementy pozostaja
   czytelne, bo maja wokol siebie ramke karty rodzica.

   .tm-art-ca (awatar komentarza) NIE dostal ramki, tylko zmiane tla var(--bg) -> var(--band):
   to kolko, nie karta; na bialym --bg zniknelo by na bialej karcie .tm-art-com. */

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}

/* ===== LAYOUT ===== */
.tm-in{max-width:var(--container);margin:0 auto;padding:0 16px}
.tm-cols{display:flex;gap:24px;align-items:flex-start}
.tm-mainc{flex:1;min-width:0}
.tm-side{width:300px;flex:none;display:flex;flex-direction:column;gap:18px}
@media(max-width:880px){.tm-cols{flex-direction:column}.tm-mainc{width:100%}.tm-side{width:100%}}

/* ===== KOMPONENTY ===== */
.tm-card{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh)}
a.tm-card{display:block;transition:box-shadow .15s,transform .15s,border-color .15s}
a.tm-card:hover{box-shadow:var(--card-sh-h);transform:translateY(-2px);border-color:#cfd4de}
.tm-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #dfe2e9;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:500}
.tm-btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13.5px;padding:10px 17px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(212,62,73,.55)}
.tm-btn:hover{background:var(--brand-h)}
/* chip kategorii bierze --ac-dark (zmierzony na AA dla bialego tekstu, np. sport #367c39=5,12:1),
   a nie surowe --ac: bialy na jasniejszym --ac (np. #3f9142) dawal 3,93:1, ponizej AA 4,5:1.
   Lancuch fallbacku jest monotoniczny - gdzie --ac-dark nie ustawiono (hero), schodzi na --ac,
   a w ostatecznosci --brand (4,6:1), wiec nigdzie nie pogarsza kontrastu. Chip NA zdjeciu ma
   ciemne tlo z reguly .tm-oc .tm-kat (wyzsza specyficznosc), wiec ta zmiana go nie dotyczy. */
.tm-kat{display:inline-block;background:var(--ac-dark,var(--ac,var(--brand)));color:#fff;font:600 10.5px/1 var(--f-lab);letter-spacing:.16em;text-transform:uppercase;padding:5px 8px 4px}
/* belka sekcji: kreska 3 px w kolorze sekcji (--ac) biegnie przez cala szerokosc kolumny -
   to ona niesie kolor dzialu, dlatego .tm-stit::before (pasek 5x22) zostal usuniety.
   align-items:flex-end wyrownuje baseline tytulu, kursow NBP (TMnbp w belce Biznesu -
   po usunieciu boxu z sidebara jedyne miejsce z kursami) i linku "wiecej" do kreski */
.tm-shead{display:flex;align-items:flex-end;gap:13px;margin:34px 0 18px;padding-bottom:6px;border-bottom:3px solid var(--ac,var(--brand))}
.tm-stit{display:flex;align-items:center;gap:10px;font:500 30px/1 var(--f-lab);letter-spacing:.02em;text-transform:uppercase;color:var(--dark);white-space:nowrap}
/* .tm-stit::before (pasek 5x22 px w --ac) usuniety w warstwie A - kolor sekcji niesie teraz
   kreska border-bottom na .tm-shead; dwa akcenty naraz czytaly sie jako szum */
/* .tm-sline zostaje w szablonach jako rozpychacz flex (odsuwa "wiecej" w prawo), ale nie
   rysuje juz kreski - kreske przejal border-bottom .tm-shead. Zero zmian w .tpl
   (indexPolska.tpl:18,42,55,61,73,85,99,115,127 oraz indexMiasta.tpl - 9 wystapien) */
.tm-sline{flex:1;height:0}
.tm-morel{margin-left:auto;font:600 12.5px/1 var(--f-lab);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-2);padding-bottom:3px}
.tm-morel:hover{color:var(--ac,var(--brand))}

/* ===== NAGŁÓWEK SERWISU ===== */
/* pasek górny: miasto, pogoda, jakość powietrza, data - źródło: naglowek-final.html */
.tm-top{background:var(--band);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--txt-2)}
.tm-toprow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:6px;padding-bottom:6px}
.tm-top svg{flex:none}
.tm-city{display:flex;align-items:center;gap:6px;background:none;border:0;font:inherit;color:var(--txt);font-weight:600;font-size:13px;cursor:pointer}
.tm-city svg{color:var(--brand)}
.tm-city:hover span{color:var(--brand-h)}
/* pozycja pogoda/powietrze w pasku górnym - nadpisuje generyczny .tm-chip (pigułkę) w tym kontekście, bo tu to zwykły rządek ikona+tekst */
.tm-top .tm-chip{display:flex;gap:6px;white-space:nowrap;border:0;padding:0;border-radius:0;font-size:inherit;font-weight:400}
.tm-chip b{color:var(--txt);font-weight:600}
.tm-ok{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px rgba(47,162,107,.55);flex:none}
.tm-date{margin-left:auto;letter-spacing:.02em}
.tm-wz{white-space:nowrap}
/* pasek z logo, wyszukiwarką i logowaniem */
.tm-band{background:linear-gradient(180deg,#ffffff,#fafbfc)}
.tm-main{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:11px}
.tm-logo img{display:block;width:clamp(170px,21vw,215px);height:auto}
.tm-search{flex:1;min-width:150px;max-width:360px;margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--band);border:1px solid #dfe2e9;border-radius:999px;padding:8px 15px;color:#7c8595;transition:border-color .2s,box-shadow .2s,background .2s}
.tm-search:hover,.tm-search:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 4px 16px -6px rgba(212,62,73,.35)}
.tm-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--txt);font:inherit;font-size:16px}
.tm-search input::placeholder{color:#7c8595;font-size:13px}
/* margin-left:auto przeniesiony z .tm-search - po zdjeciu wyszukiwarki (brak modulu
   w silniku, 2026-07-21) nic nie dopychalo przycisku logowania do prawej krawedzi */
.tm-login{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(212,62,73,.55);transition:background .2s}
.tm-login:hover{background:var(--brand-h)}
/* Rozkłady jazdy w pasku z logo (2026-09-06, tymczasowe ukrycie menu działów na miastach -
   patrz komentarz przy $tmDzialyWMenu w default.tpl). Obrys zamiast pełnego gradientu jak
   .tm-login: dwa jednakowo mocne przyciski obok siebie zacierają hierarchię, a Rozkłady to
   nawigacja, nie akcja konta. Tekst --brand-h na bieli daje 6,2:1 (samo --brand to 4,6:1 -
   przechodzi AA, ale bez zapasu). Hover odwraca układ na pełny --brand z białym tekstem. */
.tm-rozklnav{flex:none;margin-left:auto;display:inline-flex}
.tm-rozkl{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--brand-h);font-weight:600;font-size:13px;padding:8px 15px;border:1px solid var(--brand);border-radius:999px;white-space:nowrap;transition:background .2s,color .2s}
.tm-rozkl:hover{background:var(--brand);color:#fff}
/* margin-left:auto może w tym pasku należeć tylko do JEDNEGO elementu - dwa rozdzieliłyby
   wolne miejsce po równo i zawiesiły Rozkłady w pół drogi od logo. Auto przejmuje .tm-rozklnav
   (stoi wcześniej), a .tm-login je oddaje - dotąd był jedynym, który dopychał pasek do prawej
   (patrz komentarz przy .tm-login wyżej). Gdy przycisku nie ma, .tm-login działa jak dotąd.
   Selektor celuje w OPAKOWANIE, bo to ono jest dzieckiem .tm-main i sąsiadem .tm-login -
   sam .tm-rozkl siedzi piętro niżej i sąsiadem już nie jest. */
.tm-rozklnav+.tm-login{margin-left:0}
/* pasek nawigacji głównej */
.tm-navband{background:#fff;border-top:1px solid #e8eaef}
.tm-nav{display:flex;flex-wrap:wrap;align-items:stretch;font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.tm-nav a{position:relative;display:flex;align-items:center;padding:11px 13px;color:#3a4250;transition:color .15s}
.tm-nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand-l));transform:scaleX(0);transform-origin:left;transition:transform .22s}
.tm-nav a:hover,.tm-nav a.tm-act{color:var(--brand)}
.tm-nav a:hover::after,.tm-nav a.tm-act::after{transform:scaleX(1)}
.tm-more{margin-left:auto;gap:5px;color:#7c8595}
/* ticker FLASH */
.tm-ticker{background:var(--dark);border-top:2px solid var(--brand);border-bottom:3px solid var(--brand)}
.tm-tickrow{display:flex;align-items:stretch;overflow:hidden}
.tm-flash{flex:none;display:flex;align-items:center;gap:9px;background:var(--darker);color:#fff;font-family:var(--f-lab);font-weight:600;font-size:13px;letter-spacing:.16em;padding:8px 20px 8px 18px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);text-transform:uppercase}
.tm-flash i{font-style:normal;color:#ff8f97;font-weight:500;letter-spacing:.05em}
.tm-pulse{width:9px;height:9px;border-radius:50%;background:#ff5560;box-shadow:0 0 0 0 rgba(255,85,96,.75);animation:tmPul 1.4s ease-out infinite;flex:none}
@keyframes tmPul{70%{box-shadow:0 0 0 9px rgba(255,85,96,0)}100%{box-shadow:0 0 0 0 rgba(255,85,96,0)}}
/* pasek przewijanych nagłówków (tm-tick-belt); animowany wrapper .tm-belt-run objęty regułą prefers-reduced-motion na końcu pliku */
.tm-tick-belt{flex:1;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
/* animacja na wspólnym wrapperze dwóch list (.tm-belt-run); druga lista to duplikat dla płynnej pętli
   (w default.tpl oznaczona aria-hidden="true", żeby czytniki ekranu nie czytały tytułów podwójnie) */
.tm-belt-run{display:flex;width:max-content;animation:tmRun 32s linear infinite}
.tm-tick-belt ul{display:flex;width:max-content;list-style:none;margin:0;padding:0}
/* pauza ruchu tickera: :hover (mysz) + :focus-within (klawiatura - tab na link tickera
   zatrzymuje przewijanie, WCAG 2.2.2 poziom A) + :active (dotyk - przytrzymanie palcem).
   Bez :focus-within/:active auto-ruch >5s obok tresci nie mial zadnej pauzy dla klawiatury
   ani dotyku, a ruchome linki trudno bylo trafic palcem. */
.tm-tickrow:hover .tm-belt-run,.tm-tickrow:focus-within .tm-belt-run,.tm-tickrow:active .tm-belt-run{animation-play-state:paused}
@keyframes tmRun{to{transform:translateX(-50%)}}
.tm-tick-belt li{white-space:nowrap;font-size:13px;font-weight:500;color:#f2e9ea}
.tm-sep{margin:0 20px;color:var(--brand);font-weight:600;letter-spacing:2px}
/* kursy walut w pasku FLASH (idea #285), tylko przy zmianie dziennej nad progiem (TMkursyTicker).
   .tm-nbp .up/.dn (wyzej w pliku, sekcja Strefy Biznesu) sa dobrane pod BIALE tlo - tu tlo jest
   ciemne (var(--dark)), wiec osobne odcienie: #4ade80 na #1b1e24 to ~9,6:1, #ff8f97 (juz uzywany
   w .tm-flash i) to ~7,7:1 - oba mocno powyzej progu AA (4,5:1) dla tekstu 13px */
.tm-nbp-tick .up{color:#4ade80}
.tm-nbp-tick .dn{color:#ff8f97}

/* ===== KARTY I SEKCJE SG ===== */
/* źródło: modernizacja-sg-polska.html - hero, top5, minisy, karty, pasy sekcji, sidebar SG */
.tm-shead:first-child{margin-top:0}
.tm-morel{white-space:nowrap}
.tm-ad{background:#dfe2e8;border:1px dashed #c3c8d2;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#98a0ad;font:600 12px var(--f-lab);letter-spacing:.28em;text-transform:uppercase;gap:3px}
.tm-ad small{letter-spacing:.1em;font-size:10px}
/* kursy walut w nagłówku sekcji Strefa Biznesu */
.tm-nbp{display:flex;gap:14px;font-size:12.5px;color:var(--txt-2);white-space:nowrap}
.tm-nbp b{color:var(--txt)}
/* zieleni --ok (#2fa26b) na bieli daje ~3,2:1 - ponizej AA dla tekstu 12,5 px; osobny,
   ciemniejszy odcien #1c7c43 (~5,3:1) tylko dla kursow w naglowku Strefy Biznesu */
.tm-nbp .up{color:#1c7c43}
.tm-nbp .dn{color:var(--brand)}
/* atrybucja zrodla surowcow (pomysl #314, EIA - dane rzadu USA, atrybucja zalecana a nie
   prawnie wymagana, ale dobra praktyka redakcyjna); mala, wtopiona w tlo, nie konkuruje z liczbami */
.tm-nbp-zrodlo{font-size:10px;color:var(--txt-2);opacity:.75}
/* hero + najnowsze */
.tm-hero{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.tm-hbig{position:relative;display:flex;align-items:flex-end;height:400px;border-radius:8px;overflow:hidden;background:linear-gradient(128deg,#39465b,#75839b 58%,#a9b5c6)}
.tm-hshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,19,0) 42%,rgba(13,15,19,.9))}
.tm-hbody{position:relative;padding:22px 24px}
.tm-htit{display:block;margin:11px 0 8px;font-size:27px;font-weight:600;line-height:1.18;color:#fff}
.tm-hlead{display:block;color:#d7dce4;font-size:14px;line-height:1.5}
.tm-hmeta{display:block;margin-top:9px;font-size:12px;color:#9aa3b1}
.tm-latest{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:14px 16px 8px}
.tm-lhead{display:flex;align-items:center;gap:9px;font:600 14px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;padding-bottom:9px;border-bottom:2px solid var(--dark)}
.tm-ldot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.tm-li{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.tm-li:last-child{border-bottom:0}
.tm-lth{flex:none;width:62px;height:46px;border-radius:6px}
/* margin/display jawnie - element jest <h3> w wierszu "Najnowsze" (warstwa B4), bez tego
   margines 1em z arkusza przegladarki rozpycha wiersz */
.tm-lt{display:block;margin:0;font-size:13px;font-weight:500;line-height:1.3;color:#242a34}
.tm-ltime{display:block;font:600 10.5px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
/* sidebar "Warto przeczytać" - kompaktowa lista z miniaturą (wypełnia pustą przestrzeń sidebara na HD); własne klasy, bo .tm-li ma mobilny override na kafle */
.tm-sart{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.tm-sart:last-child{border-bottom:0;padding-bottom:2px}
.tm-sart-th{flex:none;width:70px;height:52px;border-radius:6px;overflow:hidden;background:linear-gradient(128deg,#39465b,#75839b 58%,#a9b5c6)}
.tm-sart-th img{display:block;width:100%;height:100%;object-fit:cover}
.tm-sart-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-sart-k{font:600 10.5px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.tm-sart-t{font-size:13px;font-weight:500;line-height:1.3;color:#242a34}
.tm-sart:hover .tm-sart-t{color:var(--brand)}
/* siatka: hero-karta + top5 */
.tm-sgrid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:16px}
/* .tm-card - dodatkowe właściwości dla kart z obrazkiem (bazowy wygląd w sekcji KOMPONENTY) */
.tm-card{overflow:hidden;display:flex;flex-direction:column}
/* .tm-cimg nie ma od 2026-09-07 ANI JEDNEGO użycia w markupie: kafle "Przeczytaj jeszcze"
   (tpl/artykuly.tpl) dokleiły ją sobie dla overflow i tła, a dostawały razem z tym tę sztywną
   wysokość - 250px zamiast ~128px z aspect-ratio:16/9, czyli zdjęcie 320x180 mocno przycięte
   w pionie na KAŻDEJ stronie artykułu. Nie nadawaj tej klasy elementowi, który ma własną
   wysokość; wspólne przycinanie i tło bierz z reguły .tm-cimg,.tm-mimg,.tm-lth,.tm-art-rci */
.tm-cimg{height:250px}
.tm-cb{padding:13px 15px 15px}
.tm-ct{display:block;margin:6px 0 7px;font-size:16.5px;font-weight:600;line-height:1.32}
.tm-cl{font-size:12.5px;color:var(--txt-2);line-height:1.45}
.tm-meta{display:block;margin-top:8px;font-size:11.5px;color:var(--txt-3)}
/* flex-kolumna z wierszami flex:1 - lista zawsze wypełnia wysokość karty obok (bez pustki na dole) */
.tm-top5{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:6px 16px;display:flex;flex-direction:column}
.tm-top5 .tm-t5{flex:1;align-items:center}
.tm-t5{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tm-t5:last-child{border-bottom:0}
.tm-t5 b{font:600 17px var(--f-lab);color:var(--ac,var(--brand));flex:none;width:18px}
.tm-t5 span{font-size:13px;font-weight:500;line-height:1.35;color:#242a34}
/* minisy (4 w rzędzie) */
.tm-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tm-mini{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--card-sh)}
.tm-mimg{height:96px}
.tm-mb{padding:9px 11px 11px}
.tm-mk{font:600 10px var(--f-lab);letter-spacing:.12em;text-transform:uppercase;color:var(--ac,var(--brand))}
/* margin skrotowo zamiast margin-top - po warstwie B .tm-mt zostaje juz TYLKO w kafelku
   sponsora GoWork (.tm-madv), gdzie element jest <span>; zapis jest tam rownowazny
   poprzedniemu, a skrot chroni przed marginesem UA, gdyby klasa wrocila na naglowek */
.tm-mt{display:block;margin:4px 0 0;font-size:12.5px;font-weight:500;line-height:1.3;color:#242a34}
/* kiosk Fakty (wariant 4): modifier siatki minisów - obrazy 16:9, 2 pełne rzędy po 4.
   Strojenie .tm-mimg/.tm-mb/.tm-mt usuniete: po warstwie B1 szablon NT3mini renderuje
   w tej siatce wylacznie kafle .tm-oc-m, a proporcje kiosku niesie .tm-kiosk .tm-oc-m. */
.tm-kiosk{margin-top:16px}
/* skrót wydarzeń - box z nagłówkiem i tekstowymi pozycjami w 4 kolumnach (pod kioskiem Fakty na SG) */
.tm-skrot{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:16px 20px 10px;margin-top:14px}
.tm-skroth{display:flex;align-items:center;gap:9px;font:600 12px var(--f-lab);letter-spacing:.14em;text-transform:uppercase;color:var(--dark);padding-bottom:10px;border-bottom:2px solid var(--dark)}
.tm-skroth::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.tm-lcols{columns:4;column-gap:26px;padding-top:4px}
.tm-sitem{display:block;break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--hair);font-size:12.5px;font-weight:500;line-height:1.45;color:#242a34}
.tm-sitem b{display:block;font:600 9.5px var(--f-lab);letter-spacing:.11em;text-transform:uppercase;color:var(--txt-2);margin-bottom:2px}
/* pasy zapowiedzi kolejnych sekcji */
.tm-band2{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:13px 16px;margin-top:10px;color:var(--txt-2);font-size:12.5px}
.tm-band2 b{font:600 15px var(--f-lab);letter-spacing:.05em;text-transform:uppercase;color:var(--dark);display:flex;align-items:center;gap:9px}
.tm-band2 b::before{content:"";width:5px;height:16px;background:var(--ac,var(--brand));border-radius:2px}
/* sidebar SG (strona główna) */
.tm-w{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:14px 16px}
.tm-wh{display:flex;align-items:center;gap:9px;font:600 13.5px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--dark);margin-bottom:10px}
.tm-wh::before{content:"";width:8px;height:8px;background:var(--brand)}
.tm-cities{display:flex;flex-wrap:wrap;gap:7px}
.tm-cchip{border:1px solid #dfe2e9;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:500;color:#3a4250}
.tm-cchip.tm-hot{background:var(--brand);border-color:var(--brand);color:#fff}
/* box pogody dla Polski (widget TMpogodaPolska / szablon NT3pogodaPolska) */
/* pas mapy na tincie, rozciągnięty na pełną szerokość boxu (ujemne marginesy kasują
   padding .tm-w 14px 16px): mapa zyskuje 32px szerokości w sidebarze 300px, a tinta
   "nieba" odcina ją od bieli karty - kontur państwa jest biały i dostaje miękki cień,
   przez co czyta się jak mapa serwisu meteo, nie jak szara plama */
.tm-pgmapw{margin:-4px -16px 0;padding:2px 4px 4px;background:linear-gradient(180deg,#e7eff7,#f6f9fc)}
/* mapa Polski z markerami miast (NT3pogodaMapaPL.tpl): Warszawa + największe miasta kraju */
.tm-pgmap{display:block;width:100%;height:auto}
.tm-pgw{filter:drop-shadow(0 2px 5px rgba(27,45,78,.16))}
.tm-pgw path,.tm-pgw polyline{fill:#fff;stroke:#ccd6e2;stroke-width:1;stroke-miterlimit:10}
.tm-pgmd{fill:var(--brand);stroke:#fff;stroke-width:2}
.tm-pgmc{fill:var(--brand-h)}
/* fill klasy to fallback - temperatury dostają inline fill z palety meteo widgetu (pole .kolor) */
.tm-pgmt{font:600 33px var(--f-lab);fill:var(--dark)}
.tm-pgmn{font:500 25px var(--f-lab);fill:#4d5665;text-anchor:middle}
.tm-pgmap a:hover .tm-pgmn{fill:var(--brand);text-decoration:underline}
/* wschód/zachód słońca w martwym rogu mapy (morze na NW od Polski) */
.tm-pgsun{font:500 24px var(--f-lab);fill:#4d5665}
.tm-pgsunr{fill:#dd9b2f}
.tm-pgsuns{fill:#56617a}
/* markery ekstremów na mapie: kropka i temperatura w kolorze (max czerwony, min niebieski);
   temperatura ekstremum świadomie BEZ palety meteo (komentarz w NT3pogodaMapaPL.tpl),
   a wokół kropki pierścień - "naj-" ma być widoczne na pierwszy rzut oka */
.tm-pgmxh{fill:var(--brand)}
.tm-pgmxl{fill:#3b6fc9}
.tm-pgmr{fill:none;stroke-width:2.4}
.tm-pgmrh{stroke:var(--brand)}
.tm-pgmrl{stroke:#3b6fc9}
/* forma MINI ekstremum (kolizja pełnych etykiet dwóch ekstremów - widget pole .mini):
   temperatura obok kropki, odrobinę mniejsza niż nad markerami pełnej formy */
.tm-pgmts{font-size:29px}
/* kropla opadów przy markerze miasta z deszczem (pole .rain > 0 z tabeli pogoda) */
.tm-pgrain{fill:#2f7bbf;stroke:#fff;stroke-width:1.2}
/* pasek prognozy 3-dniowej miasta głównego: dzień / ikona / temp. max (kolor palety meteo)
   i min; całość jednym linkiem, etykieta z nazwą miasta pionowo-poziomo po lewej */
.tm-pgdays{display:flex;align-items:stretch;gap:2px;margin-top:9px;text-decoration:none}
/* etykieta miasta pionowo wzdłuż lewej krawędzi paska (rotate 180 = czytana od dołu ku górze,
   jak grzbiet książki) - poziomo "WARSZAWA" gniotła trzy kolumny dni */
.tm-pgdcap{flex:none;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font:600 10px/1 var(--f-lab);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);border-left:2px solid var(--line);padding-left:3px}
.tm-pgday{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:3px 0;border-radius:6px}
.tm-pgdd{font:600 11px var(--f-lab);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.tm-pgday img{width:34px;height:34px;margin:-1px 0}
.tm-pgdt{font-size:12.5px;color:var(--txt-2)}
.tm-pgdt b{font-weight:600;color:var(--dark)}
.tm-pgdays:hover .tm-pgday{background:var(--band)}
.tm-pgdays:hover .tm-pgdcap{color:var(--brand)}
/* pasek ekstremów pod mapą: termometr (czerwony max / niebieski min) + temperatura + miasto;
   jedna linia (wrap tylko awaryjnie, przy długich odmianach nazw miast) */
.tm-pgext{display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.tm-pgext a{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--txt-2);text-decoration:none}
.tm-pgext a:hover{color:var(--brand)}
.tm-pgext b{font-weight:600}
.tm-pgexi{flex:none}
.tm-pgexh{color:var(--brand)}
.tm-pgexl{color:#3b6fc9}
.tm-pglink{display:block;text-align:right;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--brand)}
.tm-pgwz{vertical-align:-2px}
/* sidebar na 100% szerokości (<=880px): mapa z ogranicznikiem, inaczej rosłaby do ~800px
   wysokości na tablecie; tinta pasa zostaje pełnej szerokości, mapa centruje się w nim */
@media(max-width:880px){.tm-pgmap{max-width:430px;margin:0 auto}}
.tm-r{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tm-r:last-child{border-bottom:0}
.tm-r b{font:600 16px var(--f-lab);color:var(--brand);flex:none}
.tm-r span{font-size:12.5px;font-weight:500;line-height:1.3;color:#242a34}
.tm-sticky{position:relative}
/* slot reklamy w prawym sidebarze (B0/B1) - wydzielony blok, szerokość 300px (= szer. sidebara
   i kreacji), wysokość DYNAMICZNA: startowa rezerwacja 250px (anty-CLS = najmniejsza kreacja
   300x250), a kreacja GPT rozpycha blok do własnej wysokości (300x250 / 300x600 / 300x1050).
   JS w tpl/inc/ads.tpl (slotRenderEnded) dopasowuje min-height do faktycznej kreacji i przelicza
   sticky B1. Brak bocznego paddingu/ramki - kreacja 300px musi zmieścić się w sidebarze 300px.
   Poprawka 2026-09-05: zdjęto szare tło (#eef0f4) i zaokrąglenie - slot stoi teraz
   bezpośrednio na tle strony, oddzielenie realizuje sam odstęp i etykieta "reklama". */
.reklamaB{width:300px;min-height:250px;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;padding:9px 0 11px}
.reklamaB>div{max-width:100%}
/* etykieta "reklama" nad kreacją (czytelniejsza niż domyślne #ddd z .reklamaTXT na białym tle) */
.reklamaB>div:first-child{margin-bottom:7px;color:var(--txt-3)}
/* .reklamaTXT to JEDYNA klasa z compat.css uzywana na stronach glownych (zmierzone: 1 z 231).
   Przeniesiona tutaj, zeby strona glowna nie musiala ladowac calego compat.css - patrz warunek
   przy <link> w default.tpl. Wartosci 1:1 z compat.css:221, zeby nic sie nie rozjechalo. */
.reklamaTXT{padding-top:5px;text-align:center;font-size:9px;color:#ddd;text-transform:uppercase}
/* gradienty placeholder pod miniatury (tm-g6 pochodzi z tła hero artykułu - sekcja ARTYKUŁ) */
.tm-g1{background:linear-gradient(135deg,#425063,#8593a8)}
.tm-g2{background:linear-gradient(160deg,#5a6b82,#9fb0c2)}
.tm-g3{background:linear-gradient(115deg,#6e7f94,#b9c4d2)}
.tm-g4{background:linear-gradient(205deg,#4c5a70,#93a1b4)}
.tm-g5{background:linear-gradient(145deg,#61718a,#aab6c6)}
.tm-g6{background:linear-gradient(135deg,#93a3b8 0%,#5f7089 55%,#3c4a5f 100%)}

/* ===== ARTYKUŁ ===== */
/* źródło: artykul-final-v3.html → klasy z przedrostkiem tm-art */
.tm-art-card{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:28px 36px 30px;margin:0 0 30px}
.tm-art-bc{font-size:12.5px;color:#8a93a2;margin:0 0 14px}
.tm-art-bca{color:#8a93a2;text-decoration:none}
.tm-art-bcx{color:#3a4250;font-weight:500}
.tm-art-bcs{color:#9aa2b1;margin:0 7px;font-weight:600}
.tm-art-h1{font-size:40px;line-height:1.14;font-weight:700;letter-spacing:-.015em;color:var(--txt-h);margin:0 0 18px;border-left:5px solid var(--brand);padding-left:18px;margin-left:-23px}
.tm-art-lead{font-size:19.5px;line-height:1.55;font-weight:600;color:#2a303b;margin:0 0 18px}
.tm-art-meta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;padding:12px 0;border-top:1px solid #dfe2e9;border-bottom:1px solid #dfe2e9;font-size:13px;color:var(--txt-2);margin:0 0 14px}
.tm-art-ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#e04b56,#a92f3a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12.5px;flex:none}
.tm-art-metb{color:var(--txt);font-weight:600}
.tm-art-upd{color:var(--ok);font-weight:500}
.tm-art-dot{width:3px;height:3px;border-radius:50%;background:#c3c9d4;flex:none}
.tm-art-cat{font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--brand);background:var(--brand-bg);border-radius:4px;padding:4px 9px}
.tm-art-mi{width:14px;height:14px;fill:#9aa2b1;flex:none;vertical-align:-2px}
.tm-art-mit{display:inline-flex;align-items:center;gap:5px}
/* przyciski udostępniania */
.tm-art-shrow{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.tm-art-shb{display:inline-flex;align-items:center;gap:7px;border:1px solid #dfe2e9;background:#fff;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:#3a4250}
.tm-art-shi{width:14px;height:14px}
/* zdjęcie główne + galeria + podpis */
.tm-art-hero{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,#93a3b8 0%,#5f7089 55%,#3c4a5f 100%);display:flex;align-items:center;justify-content:center}
.tm-art-heroi{width:66px;height:66px;opacity:.4;fill:#fff}
.tm-art-gnav{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px}
.tm-art-gbtn{width:34px;height:34px;border-radius:50%;background:rgba(13,15,19,.72);display:flex;align-items:center;justify-content:center}
.tm-art-gch{width:16px;height:16px;fill:#fff}
.tm-art-gcnt{background:rgba(13,15,19,.72);color:#fff;font-family:var(--f-lab);font-weight:600;font-size:13px;padding:8px 13px;border-radius:999px;letter-spacing:.1em}
.tm-art-cap{display:flex;gap:10px;font-size:13px;color:#7c8595;line-height:1.5;padding:10px 2px 0;margin:0 0 26px}
.tm-art-capsrc{color:#a3abba;white-space:nowrap;margin-left:auto;padding-left:20px}
/* treść artykułu */
.tm-art-body{max-width:none}
.tm-art-p{font-size:17.5px;line-height:1.75;color:#2c333f;margin:0 0 26px}
.tm-art-lede::first-letter{font-family:var(--f-lab);font-weight:600;font-size:54px;line-height:.85;float:left;padding:7px 11px 0 0;color:var(--brand)}
.tm-art-h2{font-size:24px;font-weight:700;letter-spacing:-.3px;margin:34px 0 16px;color:var(--dark)}
.tm-art-q{margin:32px 0;padding:4px 0 4px 24px;border-left:4px solid var(--brand)}
.tm-art-qt{font-size:21px;line-height:1.5;font-weight:600;color:var(--dark);margin:0 0 10px}
.tm-art-qa{font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;color:#7c8595}
.tm-art-ad{margin:32px 0;background:#f0f1f5;border:1px dashed #cfd4dd;border-radius:8px;padding:36px 0;text-align:center}
.tm-art-adl{font-family:var(--f-lab);font-weight:600;font-size:11px;letter-spacing:.24em;color:#9aa2b1;display:block;margin:0 0 6px}
.tm-art-adt{font-size:13px;color:#aab1bf}
.tm-art-yt{aspect-ratio:16/9;border-radius:8px;background:linear-gradient(135deg,#2a3140,#141922);display:flex;align-items:center;justify-content:center;margin:4px 0 10px}
.tm-art-play{width:70px;height:48px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(212,62,73,.45)}
.tm-art-ptr{width:20px;height:20px;fill:#fff}
.tm-art-ytc{font-size:12.5px;color:#8a93a2;margin:0 0 4px}
.tm-art-pap{display:flex;align-items:center;gap:13px;background:#f2f3f6;border-radius:8px;padding:13px 16px;margin:30px 0 26px;font-size:12.5px;color:#7c8595;line-height:1.55}
.tm-art-papb{font-family:var(--f-lab);background:var(--dark);color:#fff;font-weight:600;letter-spacing:.16em;font-size:12px;padding:5px 11px;border-radius:4px;flex:none}
.tm-art-tags{display:flex;flex-wrap:wrap;gap:9px;margin:0}
.tm-art-tag{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;color:#3a4250}
.tm-art-th{color:#9aa2b1;font-weight:600}
/* nagłówek sekcji "przeczytaj jeszcze" + kafle powiązanych */
.tm-art-sec{display:flex;align-items:center;gap:13px;margin:0 0 18px;font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:17px;color:var(--dark)}
.tm-art-secb{width:5px;height:20px;background:var(--brand);border-radius:2px;flex:none}
.tm-art-secl{flex:1;height:1px;background:#dfe2e9}
.tm-art-rel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 42px}
.tm-art-rc{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);overflow:hidden}
.tm-art-rci{aspect-ratio:16/9}
.tm-art-rcb{padding:12px 14px 14px}
.tm-art-rck{font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--brand);display:block;margin:0 0 5px}
.tm-art-rct{font-size:14.5px;font-weight:600;line-height:1.38;color:var(--txt);margin:0 0 8px}
.tm-art-rcm{font-size:12px;color:#9aa2b1}
/* komentarze */
.tm-art-com{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:20px 22px}
.tm-art-comh{font-size:18px;font-weight:700;margin:0 0 16px}
.tm-art-c1{display:flex;gap:12px;padding:0 0 16px;border-bottom:1px solid var(--line);margin:0 0 16px}
/* --bg jest teraz biale, a awatar stoi na bialej karcie .tm-art-com - kolko zniknieloby.
   To nie jest karta do obramowania (spec traktuje ja jako karte), tylko kolko o tle --bg;
   przechodzi na --band (delikatny szary krazek) */
.tm-art-ca{width:36px;height:36px;border-radius:50%;background:var(--band);color:var(--txt-2);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
.tm-art-cn{font-size:13.5px;font-weight:600}
.tm-art-ct{font-size:12px;color:#9aa2b1;margin-left:7px}
.tm-art-cx{font-size:14px;line-height:1.6;color:#3a4250;margin:5px 0 7px}
.tm-art-cr{font-size:12.5px;font-weight:600;color:var(--brand)}
.tm-art-cin{display:flex;gap:10px}
.tm-art-cf{flex:1;background:#f2f3f6;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-size:13.5px;color:#9aa2b1}
.tm-art-cbtn{background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13.5px;padding:11px 20px;border-radius:999px}

/* ===== SIDEBAR (WIDGETY ARTYKUŁU) ===== */
.tm-art-sad{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:12px 14px 14px}
.tm-art-sadl{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-lab);font-weight:600;font-size:10.5px;letter-spacing:.22em;color:#a3abba;margin:0 0 10px}
.tm-art-stb{background:var(--dark);color:#fff;padding:3px 8px;border-radius:4px;letter-spacing:.18em}
.tm-art-sadi{background:linear-gradient(135deg,var(--band),#e3e6ec);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#9aa2b1;font-size:13px}
.tm-art-wid{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:17px 18px 8px}
/* nagłówek widgetu - używany razem z .tm-art-sec (klasy łączone: class="tm-art-sec tm-art-widh") */
.tm-art-widh{font-size:15px;margin:0 0 6px}
.tm-art-wl{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tm-art-wl:last-child{border-bottom:0}
.tm-art-wn{font-family:var(--f-lab);font-weight:600;font-size:23px;color:#8a93a2;flex:none;width:22px;line-height:1}
.tm-art-wl:first-child .tm-art-wn{color:var(--brand)}
.tm-art-wt{font-size:13.5px;font-weight:500;line-height:1.4;color:#2a303b}
.tm-art-stick{position:sticky;top:14px}

/* ===== STICKY BAR ===== */
/* źródło: zachowania-mobile.html, sekcja sticky - kompaktowa belka po przewinięciu strony */
.tm-stick{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:2px solid var(--brand);box-shadow:0 6px 18px rgba(16,20,28,.14);padding:8px 18px;border-radius:8px 8px 0 0;transform:translateY(-100%);transition:transform .25s ease}
/* klasę tm-stick-show dodaje JS (Zadanie 4) po przewinięciu poniżej nagłówka */
.tm-stick.tm-stick-show{transform:translateY(0)}
.tm-stick img{height:34px;width:auto}
.tm-sticknav{display:flex;gap:2px;font-family:var(--f-lab);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:13.5px}
.tm-sticknav a{padding:8px 10px;color:#3a4250}
.tm-sticknav a.tm-act{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
/* na portalu miejskim .tm-sticknav ma dziś jedną pozycję (Rozkłady) - bez lekkiego odsunięcia
   od logo czytałaby się jak część nazwy serwisu, a nie jak osobny link (2026-09-06) */
.tm-sticknav a:only-child{margin-left:6px}
.tm-stickic{margin-left:auto;display:flex;gap:8px;align-items:center}
/* chip w belce sticky - nadpisuje generyczny .tm-chip (mniejszy padding/font, pogrubiony) */
.tm-stick .tm-chip{gap:5px;padding:5px 11px;font-size:12px;font-weight:600;color:#3a4250}
.tm-chip.tm-red{background:var(--brand);border-color:var(--brand);color:#fff}

/* ===== MOBILE (max-width:880px) ===== */
/* źródło: zachowania-mobile.html, sekcja telefonu - przystosowanie istniejących komponentów nagłówka/tickera/kart, nie nowy zestaw klas */
.tm-icobtn{display:none;width:38px;height:38px;border-radius:10px;background:var(--band);border:1px solid var(--line);align-items:center;justify-content:center}
.tm-icobtn svg{width:17px;height:17px;stroke:#3a4250;fill:none;stroke-width:2;stroke-linecap:round}
.tm-icobtn.tm-burger{background:var(--brand)}
.tm-icobtn.tm-burger svg{stroke:#fff}
@media(max-width:880px){
 /* pasek górny skrócony.
    Cele dotykowe (WCAG 2.5.8 wymaga 24x24 px, praktyka mobilna 44 px): pole klikalne
    chipow i przycisku zmiany miasta powiekszamy paddingiem, a odbieramy go z paddingu
    wiersza - pasek nie rosnie, a rytm wizualny zostaje bez zmian. */
 .tm-toprow{gap:4px 12px;padding-top:0;padding-bottom:0}
 .tm-top{font-size:11px}
 .tm-top .tm-chip{padding:6px 2px}
 .tm-city{padding:6px 2px}
 /* kursy NBP inline: po usunięciu boxu z sidebara pasek w belce to JEDYNE miejsce z kursami,
    więc na wąskim ekranie nie znika (jak dawniej), tylko schodzi do własnego wiersza belki
    (order:9 = za tytułem i "więcej"); flex-wrap łamie 4 waluty na 2 wiersze przy <380px */
 .tm-shead .tm-nbp{order:9;width:100%;flex-wrap:wrap;gap:4px 12px;font-size:12px}
 /* nav sticky bara zbyt szeroki na wąski ekran */
 .tm-sticknav{display:none}
 /* belki sekcji: pozwól łamać długie tytuły (desktop ma nowrap). Tytuł 22 px zamiast
    desktopowych 30 px; przy zawinięciu link "więcej" schodzi do drugiego wiersza, więc
    padding-bottom jest mniejszy, żeby kreska --ac nie odkleiła się od tekstu */
 /* align-items:center zamiast flex-end: link "wiecej" ma teraz padding pionowy
    (cel dotykowy), a przy flex-end ten padding odklejalby kreske --ac od tekstu */
 .tm-shead{flex-wrap:wrap;align-items:center;gap:4px 13px;margin:26px 0 14px;padding-bottom:5px}
 .tm-stit{white-space:normal;font-size:22px}
 /* "więcej" na wąskim ekranie: mniejszy i ciaśniejszy, żeby zmieścił się obok tytułu.
    Padding pionowy podnosi cel dotykowy z 12 px do 28 px - to jedyne przejscie
    z sekcji na listing dzialu, wiec chybione dotkniecie kosztuje odslone. */
 .tm-morel{font-size:11.5px;letter-spacing:.1em;padding:8px 0 8px 12px}
 /* logo + ikony zamiast pełnej wyszukiwarki i loginu - pełne menu chowa się do hamburgera (details/anchor, Zadanie 4).
    Ikony 44x44 (praktyka mobilna) - o 6 px wieksze pole odbieramy z paddingu wiersza,
    zeby pasek z logo mial te sama wysokosc co dotad */
 .tm-main{gap:10px;padding-top:6px;padding-bottom:6px}
 .tm-icobtn{width:44px;height:44px}
 .tm-logo img{width:auto;height:30px}
 .tm-search,.tm-login,.tm-navband{display:none}
 .tm-icobtn{display:flex}
 /* na mobile .tm-login jest ukryty, wiec to hamburger musi dopchnac sie do prawej
    (po zdjeciu wyszukiwarki nie ma juz innego elementu rozpychajacego pasek) */
 .tm-burger{margin-left:auto}
 /* .tm-rozkl NIE dołącza do ukrywanych wyżej .tm-login/.tm-navband: tam, gdzie się pokazuje,
    jest jedynym linkiem do podstrony widocznym w pasku na telefonie poza logo. Konfliktu marginesów
    z hamburgerem tu nie ma i być nie może: przycisk wychodzi przy $tmMaRozklady, a hamburger
    przy $tmDzialyWMenu, czyli pod warunkiem dokładnie przeciwnym - w pasku stoi zawsze
    najwyżej jeden z nich i to on dostaje margin-left:auto (2026-09-06) */
 .tm-rozkl{padding:8px 13px}
 /* ticker cieńszy */
 .tm-ticker{border-bottom-width:2px}
 .tm-flash{gap:6px;font-size:10.5px;letter-spacing:.14em;padding:6px 12px 6px 10px;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
 .tm-pulse{width:7px;height:7px}
 .tm-tick-belt li{font-size:11px}
 /* treść jednokolumnowa: hero niższy, karty listy stają się poziomymi kartami */
 .tm-hero{grid-template-columns:1fr}
 .tm-hbig{height:200px}
 .tm-hbody{padding:12px 14px}
 .tm-kat{font-size:9px;letter-spacing:.11em;padding:3px 7px}
 .tm-htit{font-size:16.5px;margin:7px 0 0}
 .tm-li{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:10px;margin-top:10px}
 .tm-lth{width:92px;height:66px}
 .tm-sgrid{grid-template-columns:1fr}
 .tm-minis{grid-template-columns:repeat(2,1fr)}
 .tm-lcols{columns:1}
 .tm-art-rel{grid-template-columns:repeat(2,1fr)}
}

/* ===== POWŁOKA LAYOUTU (Zadanie 4) ===== */
/* style przeniesione z inline <style> w default.tpl - jedno źródło prawdy (review Zadania 4) */
.tm-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.tm-skip:focus{left:0}
.tm-logo{margin:0}
.tm-adtop{text-align:center;margin:14px auto;min-height:0}
/* stopka */
.tm-footer{background:var(--dark);color:#c7ccd6;margin-top:40px;padding:26px 0 30px;font-size:13px}
.tm-footer a{color:#e3e6ec}
.tm-footer a:hover{color:#fff}
.tm-footcols{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between}
.tm-footh{font:600 13px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.tm-footc{color:#9aa3b1;font-size:12px;margin-top:14px}
/* menu mobilne CSS-only (progressive enhancement, bez JS):
   checkbox #tmMenuToggle jest rodzeństwem .tm-navband w <header> (przed .tm-band),
   hamburger to <label for="tmMenuToggle"> - JS tylko wzbogaca (aria-expanded, ESC) */
.tm-menucb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
#tmMenuToggle:focus-visible ~ .tm-band .tm-burger{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:880px){
 #tmMenuToggle:checked ~ .tm-navband{display:block}
 #tmMenuToggle:checked ~ .tm-navband .tm-nav{flex-direction:column}
 #tmMenuToggle:checked ~ .tm-navband .tm-nav a{padding:12px 16px;border-bottom:1px solid #eef0f4}
 #tmMenuToggle:checked ~ .tm-navband .tm-more{margin-left:0}
}
/* modal wyboru miasta (bez Bootstrapa) */
.tm-modal{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;background:rgba(13,15,19,.55);padding:40px 16px;overflow:auto}
.tm-modal.tm-modal-open{display:flex}
.tm-modal-box{background:#fff;border-radius:10px;width:100%;max-width:680px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
.tm-modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font:600 18px var(--f-lab);letter-spacing:.04em;text-transform:uppercase}
.tm-modal-x{background:none;border:0;font-size:26px;line-height:1;color:#8b93a1;cursor:pointer}
.tm-modal-b{padding:16px 20px}
.tm-modal-b input[type=search]{width:100%;padding:11px 15px;border:1px solid #dfe2e9;border-radius:999px;font:inherit;font-size:15px;margin-bottom:12px}
#cityList{max-height:56vh;overflow:auto}
#cityList a{display:block;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--txt)}
#cityList a:hover{background:var(--brand-bg);color:var(--brand)}
/* Lightbox zdjęcia artykułu ([data-lity], obsługa w js.js - patrz komentarz tam).
   Ta sama mechanika co modal miast: display:none -> flex przez klasę -open, żeby nie
   mnożyć wzorców. Wyższy z-index niż .tm-modal (120), bo overlay ma przykryć wszystko.
   Cała rodzina .tm-lb* jest zarezerwowana dla tego overlaya - display:none z reguły niżej
   wygasza KAŻDY element, który dostanie tę klasę w markupie. Tak w dniach 2026-09-05 do
   2026-09-07 zniknęły daty i tytuły z wierszy listy "Najnowsze" (kolumna tekstu nazywa się
   dziś .tm-lbody, patrz komentarz przy tej regule). Nie nadawaj .tm-lb elementom treści. */
.tm-lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(13,15,19,.92);padding:24px}
.tm-lb.tm-lb-open{display:flex}
.tm-lb img{max-width:100%;max-height:calc(100vh - 100px);display:block;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.tm-lb-cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#c9cfd9;font-size:13px;padding:0 24px}
.tm-lb-x{position:absolute;top:10px;right:16px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.75}
.tm-lb-x:hover{opacity:1}
/* sygnał, że zdjęcie artykułu da się powiększyć */
.tm-artcard .position-relative a[data-lity]{display:block;cursor:zoom-in}
/* belka sticky - ukryta ma być też poza tab-order: visibility:hidden usuwa z fokusa
   (JS dodatkowo przełącza atrybut inert); visibility animowana dyskretnie z opóźnieniem przy chowaniu */
.tm-stick{visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.tm-stick.tm-stick-show{visibility:visible;transition:transform .25s ease,visibility 0s}

/* ===== PREFERS-REDUCED-MOTION ===== */
/* animacje dekoracyjne (ticker, pulsujaca kropka) oraz zoom zdjecia na hoverze kafla .tm-oc:
   transform:scale na duzym obrazie to ruch calego kadru - dla uzytkownikow z ustawieniem
   "ogranicz animacje" wylaczamy i transition, i sam transform (samo animation:none nie
   wystarczy, bo scale jest realizowane przez transition, nie przez @keyframes) */
@media (prefers-reduced-motion:reduce){
 .tm-belt-run,.tm-pulse{animation:none}
 .tm-oc img,a.tm-card,.tm-mbar-cta,.tm-mbar-cta span{transition:none}
 .tm-oc:hover img,.tm-oc:focus-within img{transform:none}
 a.tm-card:hover{transform:none}
 .tm-mbar-cta:hover span{transform:none}
}

/* ===== TELEFON: pas uslugowy odchudzony (max 600 px) ===== */
/* Data z imieninami i godziny wschodu/zachodu zawijaly sie w gornym pasie na 3-4 wiersze
   przed logo, zjadajac budzet pierwszego ekranu na telefonie. Chowamy je ponizej 600 px;
   przy 880 px cala zawartosc pasa miesci sie w jednym wierszu, wiec tablety zostaja z pelna
   trescia. Dane "tu i teraz" (chip pogody i powietrza) zostaja - znika tylko data i wschod/zachod. */
@media(max-width:600px){.tm-date,.tm-wz{display:none}}
/* Poniżej 600 px przycisk zwija się z "Rozkłady jazdy" do samego "Rozkłady" - drugie słowo
   znika, ikona autobusu zostaje i dalej niesie znaczenie. Skrót musi bronić się sam:
   atrybut title nie jest tu zapasem dla NAZWY, bo na dotyku się nie pokazuje, a że element
   ma własną treść tekstową, nie wchodzi do nazwy dostępnej - ta brzmi po prostu "Rozkłady".
   Jako opis dostępny title zostaje i czytniki (NVDA, JAWS) domyślnie go zapowiadają po
   nazwie i roli, więc trzymaj w nim treść prawdziwą, a nie zamiennik etykiety (2026-09-06). */
@media(max-width:600px){.tm-rozkl-l{display:none}}

/* ===== STRONA GŁÓWNA - obrazy w kontenerach + drobne uzupełnienia (Zadanie 5) ===== */
/* odstęp treści SG pod reklamą A (odpowiednik .mp-body z makiety) */
.tm-body{padding-top:22px}
/* hero (.tm-hbig): zdjęcie wypełnia kartę pod przyciemnieniem i treścią */
.tm-hbig>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* przyciemnienie hero MUSI zostac absolutne (inset:0 z reguly .tm-hshade wyzej) - wczesniejsza
   wersja tej reguly nadawala mu position:relative, przez co pusty <span> byl elementem flex 0x0
   i gradient nie renderowal sie wcale (bialy tytul lezal wprost na zdjeciu). Tresc nad
   przyciemnieniem przez z-index:2 - dzieki temu dekoracja ::after kafla typograficznego
   (cudzyslow) wchodzi pomiedzy przyciemnienie a tekst, a nie na tekst. */
.tm-hbig .tm-hshade{position:absolute;inset:0}
.tm-hbig .tm-hbody{position:relative;z-index:2}
/* karta/mini/miniatura "najnowsze"/kafel "Przeczytaj jeszcze": kontener przycina, zdjęcie
   skalowane cover. .tm-art-rci jest tu wymieniona jawnie, bo markup strony artykułu nie
   dokleja już .tm-cimg - tamta klasa niesie height:250px (linia ~254) i rozpychała kafle
   "Przeczytaj jeszcze" do dwukrotności ich wysokości z aspect-ratio (2026-09-07) */
.tm-cimg,.tm-mimg,.tm-lth,.tm-art-rci{overflow:hidden;background:linear-gradient(128deg,#39465b,#75839b 58%,#a9b5c6)}
.tm-cimg img,.tm-mimg img,.tm-lth img,.tm-art-rci img{display:block;width:100%;height:100%;object-fit:cover}
/* h2 jako tytuł sekcji (SEO §8) - zdejmij domyślny margines UA, layout bez zmian */
.tm-stit{margin:0}

/* ===== STRONA ARTYKUŁU (Zadanie 6) =====
   źródło: makieta artykul-final-v3.html. Karta ".tm-card.tm-artcard" zawiera treść
   współdzielonego site/Artykuly/View.tpl (klasy Bootstrap/legacy) - stylujemy ją
   selektorami POTOMNYMI (View.tpl nie jest modyfikowany). Klasy tm-art-* elementów
   dokładanych przez wrapper (breadcrumb/share/pap/tagi/rel/com) są już w sekcji wyżej. */

/* kontener strony artykułu: odstępy jak w makiecie (.ara-wrap: gap 28, padding 24/46);
   ledger: .tm-side ma domyślnie gap 18px, makieta artykułu 22px - dociągamy tutaj */
.tm-artwrap{padding-top:24px;padding-bottom:46px}
.tm-artwrap .tm-cols{gap:28px}
.tm-artwrap .tm-side{gap:22px}

/* karta artykułu: padding jak .ara-card; blokowy przepływ (nadpisuje flex/overflow z .tm-card,
   by pływające elementy View.tpl i inicjał float działały poprawnie) */
.tm-artcard{display:block;overflow:visible;padding:28px 36px 30px;margin:0 0 24px}
@media(max-width:600px){.tm-artcard{padding:20px 18px 22px}}

/* --- H1 tytułu (View.tpl: <h1> w <div.py-2>) z czerwoną kreską wystającą w lewo --- */
.tm-artcard h1{font-size:40px;line-height:1.14;font-weight:700;letter-spacing:-.015em;color:var(--txt-h);margin:0 0 16px;border-left:5px solid var(--brand);padding-left:18px;margin-left:-23px}
@media(max-width:600px){.tm-artcard h1{font-size:28px;margin-left:0;padding-left:13px}}
/* patronat medialny (View.tpl float .fR) - zachowaj oblewanie */
.tm-artcard .fR{float:right}
.tm-artcard .fL{float:left}

/* --- pasek meta u góry (View.tpl: <div.fsmall.pt-2> z .fL/.fR) ---
   Układ na flex, nie na floatach. Floaty stawiały każdy slot na własnej linii bazowej
   (pomiar: kategoria 673,2 / autor 679,2 / data 681,2 - rozjazd 8 px), bo puste spany
   .iconify z View.tpl wnosiły line-box 18/20 px bez treści: theme/3 NIE ładuje biblioteki
   Iconify (jest tylko w theme/1/default.tpl:547) i ładować jej nie powinien. Markup
   View.tpl dostał zamiast nich inline SVG, a align-items:center trzyma ikonę i tekst
   w jednej osi niezależnie od ich wysokości.
   Drugi powód: pasek nie miał żadnej reguły @media, więc przy szerokości poniżej ~400 px
   data odpadała na osobną linię (57% artykułów przy oknie 390 px). Teraz cały nagłówek to
   JEDEN wiersz - okruszki, źródło i data razem - a przy ciasnocie kurczą się pojedyncze
   napisy (patrz reguły niżej), zamiast łamać pasek w przypadkowym miejscu.
   overflow:hidden zostaje - domyka floaty liczników redakcyjnych (ACL 194, View.tpl:18-20),
   które nadal są elementami .fR. */
.tm-artcard>.fsmall.pt-2{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;column-gap:12px;row-gap:6px;border-bottom:1px solid #dfe2e9;padding:0 0 11px;margin:0 0 18px;overflow:hidden;font-size:13px;color:var(--txt-2)}
/* Jeden wiersz zamiast łamania: przy ciasnocie kurczą się po kolei okruszki i nazwa źródła
   (wielokropek), a nie cały pasek. Data ma flex:none - nigdy się nie skraca.
   Dwa wyjątki, w których zawijanie jest lepsze niż cztery wielokropki obok siebie:
   widok redakcyjny (ACL 194 dokłada dwa liczniki .pr-3, razem 5 slotów) oraz telefon. */
.tm-artcard>.fsmall.pt-2:has(.pr-3){flex-wrap:wrap}
@media(max-width:560px){
	.tm-artcard>.fsmall.pt-2{flex-wrap:wrap}
	/* podział na dwa czytelne wiersze: okruszki u góry, pod nimi źródło i data.
	   Bez tego łamanie wypada przypadkowo (okruszki + źródło, a data sama niżej),
	   a kropka rozdzielająca zostaje wisieć na początku drugiego wiersza. */
	.tm-artcard>.fsmall.pt-2>nav{flex-basis:100%}
	.tm-artcard>.fsmall.pt-2>[title="autor"]::before{display:none}
}
.tm-artcard>.fsmall.pt-2>div,.tm-artcard>.fsmall.pt-2>nav{float:none;display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0}
/* Okruszki wewnątrz paska (View.tpl) - ten sam wygląd co samodzielne .tm-art-bc na listach.
   Nadpisanie jest konieczne: reguła ".tm-artcard>.fsmall.pt-2 a" niżej ma wyższą
   specyficzność (0,3,1) niż .tm-art-bca (0,1,0) i pomalowałaby okruszki na kolor autora. */
.tm-artcard>.fsmall.pt-2 .tm-art-bca{color:#8a93a2;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-artcard>.fsmall.pt-2 .tm-art-bcx{color:#3a4250;font-weight:500}
.tm-artcard>.fsmall.pt-2 .tm-art-bcs{margin:0 5px;flex:none}
/* kropka rozdzielająca okruszki od nazwy źródła (wzorzec .tm-art-dot z makiety) */
.tm-artcard>.fsmall.pt-2>[title="autor"]::before{content:"";width:3px;height:3px;border-radius:50%;background:#c3c9d4;flex:none}
/* Nazwa źródła bywa bardzo długa (rekord w próbce: "Bank Spółdzielczy w Szczytnie Jurand
   Cup 2026", 45 znaków). Bez limitu spycha datę do drugiej linii już na zwykłym laptopie,
   więc skracamy ją wielokropkiem zamiast łamać cały wiersz. */
.tm-artcard>.fsmall.pt-2>[title="autor"] span{max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Data odpycha się od lewej i siada przy prawej krawędzi; kolejne .fR (liczniki redakcyjne,
   ACL 194) idą już za nią. justify-content:flex-end na rodzicu nie rusza pierwszej linii
   (margin-left:auto zjada tam całą wolną przestrzeń), ale gdy liczniki zawiną się do drugiej
   linii, dosuwa je do prawej zamiast zostawiać przyklejone do lewej krawędzi.
   Slot daty jest w View.tpl bezwarunkowy, więc zawsze istnieje co najmniej jeden .fR. */
.tm-artcard>.fsmall.pt-2>.fR{margin-left:auto;flex:none}
.tm-artcard>.fsmall.pt-2>.fR~.fR{margin-left:0}
/* ikony paska w konwencji theme/3: kontur 24x24, stroke currentColor - jak .tm-icobtn svg */
.tm-artcard>.fsmall.pt-2 svg{width:14px;height:14px;flex:none;fill:none;stroke:#9aa2b1;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tm-artcard>.fsmall.pt-2 a{color:var(--txt);font-weight:600}
/* nazwa źródła nie jest już linkiem (View.tpl miał martwe href="#"), ale ma zostać wyróżniona */
.tm-artcard>.fsmall.pt-2>[title="autor"] span{color:var(--txt);font-weight:600}
.tm-artcard>.fsmall.pt-2 .cSzary{color:var(--txt-2)}

/* --- zdjęcie główne + nawigator galerii (View.tpl: .position-relative > a > img.img-fluid) --- */
.tm-artcard .position-relative{border-radius:8px;overflow:hidden;margin:0 0 2px}
.tm-artcard .position-relative img.img-fluid{display:block;width:100%;height:auto}
/* nawigator galerii (.ArtViewGal L/R) - kołowe przyciski jak w makiecie (.ara-gbtn) */
.tm-artcard .ArtViewGal{width:64px;background:transparent;display:flex;align-items:center;justify-content:center}
.tm-artcard .ArtViewGal.L{justify-content:flex-start;padding-left:14px}
.tm-artcard .ArtViewGal.R{justify-content:flex-end;padding-right:14px}
.tm-artcard .ArtViewGal i{position:static;color:#fff;filter:drop-shadow(0 2px 6px rgba(13,15,19,.6))}
.tm-artcard .ArtViewGal:hover i{color:#fff;opacity:.85}
/* podpis zdjęcia (View.tpl: <div.fsmall.alL.cSzary>) - "fot. ..." */
.tm-artcard>.fsmall.cSzary{color:#7c8595;padding:10px 2px 0;margin:0 0 18px;line-height:1.5}

/* --- miniatury galerii pod zdjęciem (View.tpl: .container .row .img-thumbnail .artGal1) --- */
.tm-artcard .artGal1{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:linear-gradient(128deg,#39465b,#75839b 58%,#a9b5c6)}
.tm-artcard .artGal1 img{width:100%;height:100%;object-fit:cover}
.tm-artcard .artGal1 .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(13,15,19,.55);color:#fff;padding:0}

/* --- lead / zajawka (View.tpl: <div.bb.alJ.py-3.lh150>) --- */
.tm-artcard .bb{font-size:19.5px;line-height:1.55;font-weight:600;color:#2a303b;margin:14px 0 16px;padding:0}
/* ukryj legacy mobilny przycisk FB z View.tpl (wrapper daje własny pasek udostępniania) */
.tm-artcard .fb-share-button{display:none}

/* --- pasek udostępniania na <button> kopiuj (reset UA dla .tm-art-shb jako button) --- */
button.tm-art-shb{cursor:pointer;font-family:inherit}

/* --- treść (body) artykułu (View.tpl->wrapper: <div.txt232>, surowy HTML redakcyjny) --- */
.tm-artcard .txt232{font-size:17.5px;line-height:1.75;color:#2c333f}
.tm-artcard .txt232 p{margin:0 0 26px}
.tm-artcard .txt232 h2{font-size:24px;font-weight:700;letter-spacing:-.3px;margin:34px 0 16px;color:var(--dark)}
.tm-artcard .txt232 h3{font-size:20px;font-weight:700;margin:28px 0 12px;color:var(--dark)}
.tm-artcard .txt232 img{max-width:100%;height:auto;border-radius:8px;margin:6px 0}
.tm-artcard .txt232 a{color:var(--brand);text-decoration:underline}
.tm-artcard .txt232 ul,.tm-artcard .txt232 ol{margin:0 0 26px;padding-left:22px}
.tm-artcard .txt232 li{margin:0 0 8px}
.tm-artcard .txt232 blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:4px solid var(--brand);font-size:21px;line-height:1.5;font-weight:600;color:var(--dark)}
.tm-artcard .txt232 blockquote p{margin:0 0 10px}
.tm-artcard .txt232 iframe{max-width:100%}
/* reklama in-article (modifier TMArtykulyReklamaInsert: <div.mt-2.mb-2><ins.adsbygoogle>) */
.tm-artcard .txt232 .adsbygoogle{display:block;margin:0 auto;text-align:center}
/* inicjał (drop cap) na pierwszym akapicie treści - Barlow SC, czerwień, float */
.tm-artcard .txt232>p:first-child::first-letter{font-family:var(--f-lab);font-weight:600;font-size:54px;line-height:.85;float:left;padding:7px 11px 0 0;color:var(--brand)}

/* --- PRZECZYTAJ JESZCZE: karty jako linki (.tm-art-rc na <a>) --- */
a.tm-art-rc{display:block;color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
a.tm-art-rc:hover{box-shadow:var(--card-sh-h);transform:translateY(-2px)}
.tm-art-rc .tm-art-rci{display:block}

/* ===== PODSTRONY - wspólny wzorzec inc/page.tpl (Zadanie 7) =====
   breadcrumb (.tm-bc) + karta z tytułem "z kreską" (.tm-card.tm-pagecard/.tm-h1k) dla
   wrapperów other/pogoda/praca/noclegi/bok/reklama/redakcja/polityka/otm/user/profil/
   wirtualnyspacer. Styl kreski spójny z .tm-artcard h1 (sekcja ARTYKUŁ - Zadanie 6),
   pod nowymi nazwami klas z kontraktu inc/page.tpl. */
.tm-bc{font-size:12.5px;color:#8a93a2;margin:0 0 14px}
.tm-bc a{color:#8a93a2;text-decoration:none;font-weight:500}
.tm-bc a:hover{color:var(--brand)}
.tm-pagecard{display:block;overflow:visible;padding:28px 36px 30px}
.tm-h1k{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--txt-h);margin:0 0 18px;border-left:5px solid var(--brand);padding-left:18px;margin-left:-23px}
@media(max-width:600px){.tm-pagecard{padding:20px 18px 22px}.tm-h1k{font-size:23px;margin-left:0;padding-left:13px}}

/* blok "miasto" (inc/miasto.tpl, Zadanie 7) - pogoda (widget legacy SGPogodaMiasta,
   stylowany przez compat.css) + liczba mieszkańców; wywoływany zwrotnie ze
   współdzielonego S/Artykuly/SGartFaktyMiasta*.tpl niezależnie od aktywnego motywu */
.tm-mw-pog{padding:0 6px}
.tm-mw-pop{text-align:center;padding:12px 6px 14px;margin:8px 0 0;background:var(--dark);color:#fff;border-radius:8px}
.tm-mw-popn{font:600 22px var(--f-lab)}
.tm-mw-popn .fas{margin-right:6px}
.tm-mw-popl{color:#fff;font-size:12.5px;text-decoration:underline;opacity:.85}

/* --- WAIT ("w przygotowaniu") i ADM/ADMINRN (bez sidebara reklamowego - Zadanie 7) --- */
.tm-wait{max-width:900px;margin:40px auto;text-align:center;padding:0 16px}
.tm-wait h1{font-size:30px;margin:18px 0 14px;color:var(--txt-h)}
.tm-wait img{max-width:100%;height:auto;border-radius:8px;margin-top:20px}
.tm-cd{display:flex;gap:14px;justify-content:center;margin:10px 0}
.tm-cd-u{background:var(--dark);color:#fff;border-radius:8px;padding:12px 16px;min-width:64px}
.tm-cd-n{font:700 30px var(--f-lab)}
.tm-cd-l{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#aab0bb}
.tm-adm-side{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh);padding:18px}
.tm-adm-side h2{font-size:17px;margin:0 0 10px;color:var(--txt-h)}
.tm-adm-side ul{margin:0;padding-left:18px}
.tm-adm-side li{margin:0 0 8px}

/* ===== POGODA METEOSOURCE - pilot Warszawa (idea #284) =====
   strona /pogoda "polska" (NT3meteoPage przez ext/pogoda/polska.tpl) i pas pogodowy SG
   miast (NT3meteoPas); pigułka paska górnego "polska" (NT3meteoChip) zdjęta 2026-07-23.
   Ikony PNG z oficjalnego zestawu Meteosource: /theme/3/images/pogoda/{1-36}.png
   (numer walidowany w PHP). */
/* nagłówek: ikona + duża temperatura + opis (box i hero strony) */
.tm-mthead{display:flex;align-items:center;gap:11px}
.tm-mthead img{flex:none}
.tm-mttmp{font:600 32px var(--f-lab);color:var(--dark);line-height:1;flex:none}
.tm-mtsum{font-size:12.5px;color:var(--txt-2);line-height:1.35;min-width:0}
.tm-mtsum small{display:block;font-size:11.5px;color:var(--txt-3)}
a.tm-mthead:hover .tm-mtsum{color:var(--brand)}
/* rządek parametrów pod nagłówkiem boxu */
.tm-mtrow{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--txt-2)}
.tm-mtrow b{color:var(--txt);font-weight:600}
/* nowcasting w boxie: komunikat o opadach w najbliższej godzinie */
.tm-mtnc{margin-top:8px;background:#eef3fb;border-left:3px solid #3b6fc9;border-radius:4px;padding:6px 10px;font-size:12px;color:#2c4a7c}
/* pasek 4 dni prognozy w boxie */
.tm-mtdays{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.tm-mtd{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--band);border-radius:6px;padding:7px 2px;font-size:12.5px}
.tm-mtd b{font:600 11px var(--f-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.tm-mtd i{font-style:normal;font-weight:600;color:var(--txt)}
.tm-mtd em{font-style:normal;color:var(--txt-3)}
.tm-mtwk b{color:var(--brand)}
/* linki pełnej prognozy pod boxem: etykieta + dwa chipy (7 dni / 30 dni) czytelnie klikalne;
   obwódka + kolor marki, hover = wypełnienie tłem marki (silny sygnał, że to link) */
.tm-pgchips{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:11px}
.tm-pgchl{font-size:12px;color:var(--txt-2);margin-right:1px}
.tm-pgchip{display:inline-flex;align-items:center;padding:5px 12px;font:600 12.5px var(--f-lab);letter-spacing:.02em;color:var(--brand);background:var(--band);border:1px solid var(--line);border-radius:999px;transition:background .18s,color .18s,border-color .18s}
.tm-pgchip:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
/* strona /pogoda: hero + siatka parametrów + astro */
.tm-mthero{margin-top:4px}
.tm-mtbig{font-size:44px}
.tm-mthero .tm-mtsum{font-size:14px}
.tm-mtgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;margin:16px 0 0;padding:0}
.tm-mtgrid li{background:var(--band);border-radius:8px;padding:10px 12px}
.tm-mtgrid b{display:block;font:600 16px var(--f-lab);color:var(--dark)}
.tm-mtgrid span{font-size:11.5px;color:var(--txt-2)}
.tm-mtastro{margin-top:10px;font-size:12.5px;color:var(--txt-2)}
.tm-mtastro b{color:var(--txt);font-weight:600}
/* ostrzeżenia meteo (teksty z API escapowane w szablonie) */
.tm-mtalert{background:var(--brand-bg);border-left:4px solid var(--brand);border-radius:6px;padding:10px 14px;margin:0 0 14px;font-size:13.5px}
.tm-mtalert b{display:block;color:var(--brand-h)}
.tm-mtalert-t{font-size:12px;color:var(--txt-2)}
.tm-mtalert p{margin:6px 0 0;line-height:1.5}
/* stopnie ostrzezen IMGW (1=zolte, 2=pomaranczowe, 3=czerwone): kolor ramki i tytulu
   wg stopnia - stopien z dopasowania IMGW w cronie albo z koloru naglowka Meteosource */
.tm-mtalert-s1{border-left-color:#e5a100}
.tm-mtalert-s1 b{color:#8a6100}
.tm-mtalert-s2{border-left-color:#e58100}
.tm-mtalert-s2 b{color:#8f5000}
.tm-mtalert-s3{border-left-color:#e50000}
.tm-mtalert-s3 b{color:#a30000}
/* nagłówki sekcji strony pogody */
.tm-mth2{font-size:21px;font-weight:700;letter-spacing:-.2px;margin:30px 0 12px;color:var(--dark)}
/* nagłówek sekcji z kontekstowym linkiem po prawej (np. "Najbliższe dni  prognoza na 30 dni ->") */
.tm-mth2row{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.tm-mth2more{font:600 13.5px var(--f-lab);letter-spacing:0;color:var(--brand);white-space:nowrap}
.tm-mth2more:hover{color:var(--brand-h)}
.tm-mtncsum{margin:0 0 10px;font-size:13.5px;color:var(--txt-2)}
.tm-mterr{font-size:15px;color:var(--txt-2)}
/* pasek jakości powietrza w boxie (NT3meteoBox): kategoria + kolor stanu + PM10/PM2.5 */
.tm-aq{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.tm-aqhd{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2)}
.tm-aqhd b{font-weight:600}
.tm-aqdot{width:10px;height:10px;border-radius:50%;flex:none}
.tm-aqbar{height:7px;margin:6px 0;border-radius:4px;background:var(--band);overflow:hidden}
.tm-aqbar span{display:block;height:100%;border-radius:4px;min-width:3px}
.tm-aqval{font-size:12px;color:var(--txt-2)}
.tm-aqval b{color:var(--txt);font-weight:600}
.tm-aqval small{color:var(--txt-3)}
/* jakość powietrza WPLECIONA w pogodę na stronie /pogoda (NT3meteoPage): bieżąca jako
   kompaktowy pasek przy warunkach bieżących, prognoza dobowa jako wskaźnik w wierszach dni.
   .tm-aqndot - wspólna kropka koloru kategorii (pasek bieżący + wiersze dni) */
.tm-aqnow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:12px;padding:10px 12px;background:var(--band);border-radius:8px;font-size:13px;color:var(--txt-2)}
.tm-aqndot{width:11px;height:11px;border-radius:50%;flex:none}
.tm-aqnst{font-weight:500}
.tm-aqnst b{font-weight:700}
.tm-aqnp{font-size:12.5px;color:var(--txt)}
.tm-aqnp b{color:var(--txt-3);font-weight:600;font-size:11px}
.tm-aqnu{font-size:11px;color:var(--txt-3)}
/* wykres opadów minutowych: 60 słupków, wysokość z inline --h (CSS-only, bez JS) */
.tm-mtmin{display:flex;align-items:flex-end;gap:1px;height:64px;background:var(--band);border-radius:6px;padding:4px 6px}
.tm-mtminb{flex:1;min-width:0;height:var(--h,0%);min-height:1px;background:#3b6fc9;border-radius:2px 2px 0 0}
.tm-mtminlab{display:flex;justify-content:space-between;font-size:11px;color:var(--txt-3);margin-top:3px}
/* pasek prognozy godzinowej (przewijany poziomo): na PC drag-to-scroll (js.js) +
   zawsze widoczny cienki scrollbar (systemowy overlay bywa ukryty) */
.tm-mthours{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.tm-mthours.tm-drag{cursor:grabbing}
.tm-mthours::-webkit-scrollbar{height:8px}
.tm-mthours::-webkit-scrollbar-thumb{background:var(--hair);border-radius:4px}
.tm-mthours::-webkit-scrollbar-thumb:hover{background:var(--txt-3)}
.tm-mthours::-webkit-scrollbar-track{background:transparent}
.tm-mth1{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--band);border-radius:8px;padding:8px 9px;font-size:12.5px;min-width:56px}
.tm-mth1 b{font:600 11.5px var(--f-lab);color:var(--txt-2)}
.tm-mth1 i{font-style:normal;font-weight:600;color:var(--txt)}
.tm-mth1 em{font-style:normal;font-size:11px;color:var(--txt-3)}
.tm-mthsep{flex:none;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;font-size:11px;color:var(--txt-2);border-left:2px solid var(--hair);padding:0 8px;white-space:nowrap}
.tm-mthsep b{font:600 12px var(--f-lab);text-transform:uppercase;letter-spacing:.05em;color:var(--brand)}
.tm-mtwet{color:#3b6fc9;font-weight:600}
/* wykres temperatury i opadów 48 h (SVG server-side, bez JS): pasmo temperatury
   u góry (linia + pole), pasmo opadów przy podstawie (słupki) - wspólna oś czasu,
   bez drugiej osi Y; paleta zwalidowana pod CVD (#e0662a temp / #3b6fc9 opady) */
.tm-mtchleg{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:0 0 8px;font-size:12px;color:var(--txt-2)}
/* pozycja legendy (znacznik + opis) nierozrywalna przy zawijaniu */
.tm-mtchli{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tm-mtchlt{display:inline-block;width:14px;height:4px;border-radius:2px;background:#e0662a}
.tm-mtchlo{display:inline-block;width:9px;height:9px;border-radius:2px;background:#3b6fc9}
/* kontener wykresu przewijany poziomo (drag-to-scroll w js.js, kursor grab); stała
   szerokość na punkt ustawiana inline (min-width na .tm-mtchin) - gdy treść mieści
   się w kolumnie, przewijanie po prostu nie występuje. Etykiety wartości i podpisy
   osi czasu są WEWNĄTRZ .tm-mtchin - przewijają się razem z wykresem */
.tm-mtch{position:relative;height:196px;margin:0 0 18px;background:var(--band);border-radius:8px;overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.tm-mtch.tm-drag{cursor:grabbing}
.tm-mtch::-webkit-scrollbar{height:8px}
.tm-mtch::-webkit-scrollbar-thumb{background:var(--hair);border-radius:4px}
.tm-mtch::-webkit-scrollbar-thumb:hover{background:var(--txt-3)}
.tm-mtch::-webkit-scrollbar-track{background:transparent}
.tm-mtchin{position:relative;height:100%}
.tm-mtchplot{position:relative;height:calc(100% - 20px)}
.tm-mtchplot svg{display:block;width:100%;height:100%}
.tm-mtchline{fill:none;stroke:#e0662a;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tm-mtcharea{fill:rgba(224,102,42,.12)}
.tm-mtchrain{fill:#3b6fc9}
.tm-mtchsep{stroke:var(--hair);stroke-width:1;stroke-dasharray:3 3}
.tm-mtchbase{stroke:var(--hair);stroke-width:1}
.tm-mtchhit{fill:#fff;fill-opacity:0;pointer-events:all}
.tm-mtchval{position:absolute;transform:translate(-50%,-135%);font:600 11.5px var(--f-lab);color:var(--txt);pointer-events:none}
/* wykres 30 dni: pasmo min-maks temperatury (jedna seria) - krawędź maksimów to
   .tm-mtchline, minimów kreskowana (rozróżnialna też w druku/CVD), wypełnienie między nimi */
.tm-mtchband{fill:rgba(224,102,42,.14)}
.tm-mtchmin{fill:none;stroke:#e0662a;stroke-width:1.5;stroke-dasharray:5 4;stroke-linejoin:round;stroke-linecap:round}
.tm-mtchlm{display:inline-block;width:14px;height:0;border-top:2px dashed #e0662a}
/* etykiety minimów pod dolną krawędzią pasma, stonowane */
.tm-mtchvmin{transform:translate(-50%,40%);color:var(--txt-2)}
/* pierwsza etykieta wyrównana do lewej - centrowanie ucinałoby ją na krawędzi wykresu;
   w wykresie 30 dni (przeplot maks/min) span nr 2 to pierwsza etykieta minimum */
.tm-mtchval:first-of-type{transform:translate(0,-135%)}
.tm-mtch30 .tm-mtchval:nth-of-type(2){transform:translate(0,40%)}
.tm-mtchlab span:first-child{transform:none}
.tm-mtchday{position:absolute;top:5px;transform:translateX(4px);font:600 10.5px var(--f-lab);letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2);pointer-events:none;white-space:nowrap}
/* tabliczka dnia przy prawej krawędzi (separator >90% szerokości) wyrównana do prawej -
   inaczej overflow:hidden kontenera obcinałby ją przy nocnych renderach */
.tm-mtchdayR{transform:translateX(calc(-100% - 4px))}
.tm-mtchlab{position:relative;height:16px;margin-top:2px;font-size:11px;color:var(--txt-3)}
.tm-mtchlab span{position:absolute;transform:translateX(-50%);white-space:nowrap}
/* "termometr tygodnia" - sekcja Najbliższe dni ze wspólną skalą temperatur (paski zakresu
   min-maks na jednej osi, geometria server-side z MeteosourceTM::tydzienTermometr) + kolumna
   jakości powietrza. Siatka 7 kolumn; kolory temperatur/powietrza inline z modelu (walidowane).
   Tor: .tm-wtscale wsunięta 8 px z boków - podziałki nagłówka i paski dni w jednym układzie */
.tm-wt{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--card-sh)}
.tm-wtscroll{overflow:visible}
.tm-wtlist{min-width:0}
.tm-wtgrid{display:grid;grid-template-columns:54px 34px 56px 30px minmax(0,1fr) 34px 46px;gap:12px;align-items:center;padding:9px 16px}
.tm-wthead{padding:7px 16px;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.tm-wth{font:600 10.5px/1 var(--f-lab);text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3)}
.tm-wth-r{text-align:right}
.tm-wth-c{text-align:center}
.tm-wtrow{position:relative;transition:background .12s}
.tm-wtrow+.tm-wtrow{border-top:1px solid var(--line)}
.tm-wtrow:hover{background:var(--band)}
.tm-wtday{display:flex;flex-direction:column;line-height:1.05;gap:1px}
.tm-wtday b{font:700 13.5px/1 var(--f-lab);text-transform:uppercase;letter-spacing:.03em;color:var(--txt)}
.tm-wtday small{font-size:11px;color:var(--txt-3);font-variant-numeric:tabular-nums}
.tm-wtnow{margin-top:2px;align-self:flex-start;font:700 9px/1 var(--f-lab);text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--brand);padding:2px 4px;border-radius:4px;font-style:normal}
.tm-wtwk .tm-wtday b{color:var(--brand)}
.tm-wtico{display:flex;justify-content:center}
.tm-wtico img{width:32px;height:32px;display:block}
.tm-wtprecip{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--txt-2);font-variant-numeric:tabular-nums}
.tm-wtdrop{width:13px;height:13px;flex:none;fill:#3b6fc9}
.tm-wtprecip.tm-wtwet{color:#3b6fc9;font-weight:600}
.tm-wtlo{text-align:right;font:500 13px/1 var(--f-ui);color:var(--txt-3);font-variant-numeric:tabular-nums}
.tm-wthi{text-align:left;font:700 14px/1 var(--f-ui);color:var(--txt);font-variant-numeric:tabular-nums}
.tm-wttrack{position:relative;height:30px}
.tm-wtaxis{height:20px}
.tm-wtscale{position:absolute;inset:0 8px}
.tm-wtrow .tm-wtscale::after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:var(--hair);border-radius:3px}
.tm-wtbar{position:absolute;top:50%;height:6px;transform:translateY(-50%);border-radius:4px;box-shadow:0 1px 2px rgba(16,20,28,.22);z-index:2}
.tm-wtknob{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 1px 2px rgba(16,20,28,.3);z-index:3}
.tm-wttick{position:absolute;top:50%;transform:translate(-50%,-50%);font:600 10px/1 var(--f-lab);color:var(--txt-3);background:#fff;padding:0 3px;font-variant-numeric:tabular-nums}
.tm-wtaq{display:flex;justify-content:center}
.tm-wtchip{min-width:22px;text-align:center;font:700 12px/1.35 var(--f-ui);font-variant-numeric:tabular-nums;padding:3px 7px;border-radius:6px}
.tm-wtlegend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 16px;border-top:1px solid var(--line);background:var(--band);border-radius:0 0 8px 8px}
.tm-wtlg-t{font:600 10.5px/1 var(--f-lab);text-transform:uppercase;letter-spacing:.06em;color:var(--txt-3)}
.tm-wtlg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--txt-2)}
.tm-wtlg i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
/* siatka prognozy 30-dniowej: stałe 5 kolumn (30 dni = 6 równych wierszy po 5),
   niezależnie od szerokości okna; na wąskim ekranie fallback auto-fill w @media */
.tm-mtcal{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tm-mtday{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--band);border-radius:8px;padding:9px 6px;font-size:12.5px;text-align:center}
.tm-mtday b{font:600 11px var(--f-lab);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2)}
.tm-mtday i{font-style:normal;font-weight:600;color:var(--txt)}
.tm-mtday em{font-style:normal;color:var(--txt-3)}
.tm-mtday small{font-size:10.5px}
/* stopka źródła danych + CTA wyboru miasta pod prognozą na stronie pogody "polska" */
.tm-mtsrc{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:18px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--txt-3)}
.tm-mtsrc a{color:var(--txt-2);text-decoration:underline}
.tm-mtcity{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;font-size:14px;color:var(--txt-2)}
.tm-mtcity .tm-btn{border:0;cursor:pointer;font-family:inherit}
/* CTA na /pogoda: kafelek do wydzielonej podstrony prognozy 30-dniowej (/pogoda/prognoza-30-dni) */
.tm-mtcta{display:flex;align-items:center;gap:16px;margin:6px 0 4px;padding:15px 18px;background:linear-gradient(180deg,#fff,var(--band));border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-sh);transition:box-shadow .2s,transform .2s,border-color .2s}
.tm-mtcta:hover{box-shadow:var(--card-sh-h);transform:translateY(-2px);border-color:var(--brand)}
.tm-mtcta-ic{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font:800 20px/1 var(--f-lab);box-shadow:0 6px 16px -6px rgba(212,62,73,.55)}
.tm-mtcta-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tm-mtcta-t{font-size:16px;font-weight:700;color:var(--txt-h)}
.tm-mtcta-d{font-size:13px;color:var(--txt-2);line-height:1.4}
.tm-mtcta-b{flex:none;display:inline-flex;align-items:center;gap:6px;font:600 13px var(--f-lab);color:#fff;background:linear-gradient(180deg,#e04b56,var(--brand));padding:9px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(212,62,73,.55);transition:background .2s}
.tm-mtcta:hover .tm-mtcta-b{background:var(--brand-h);color:#fff}
/* box "Prognoza 30 dni" w sidebarze strony /pogoda (link do podstrony długoterminowej) */
.tm-side30{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:12px 14px;background:linear-gradient(180deg,#fff,var(--band));border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-sh);transition:box-shadow .2s,transform .2s,border-color .2s}
.tm-side30:hover{box-shadow:var(--card-sh-h);transform:translateY(-2px);border-color:var(--brand)}
.tm-side30-ic{flex:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font:800 17px/1 var(--f-lab);box-shadow:0 5px 14px -6px rgba(212,62,73,.55)}
.tm-side30-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tm-side30-tx b{font-size:14.5px;font-weight:700;color:var(--txt-h)}
.tm-side30-tx small{font-size:12px;color:var(--txt-2);line-height:1.35}
.tm-side30-ar{flex:none;font-size:18px;color:var(--brand);font-weight:700}
.tm-side30:hover .tm-side30-ar{color:var(--brand-h)}
/* podstrona 30 dni: pasek podsumowania bieżącego u góry + powrót do /pogoda */
.tm-mt30now{margin:0 0 8px;font-size:14.5px;color:var(--txt)}
.tm-mt30now a,.tm-mt30back a{color:var(--brand);font-weight:600}
.tm-mt30now a:hover,.tm-mt30back a:hover{color:var(--brand-h)}
.tm-mt30back{margin:16px 0 0;font-size:14px}
@media(max-width:600px){
 .tm-mtgrid{grid-template-columns:repeat(2,1fr)}
 /* CTA 30 dni: na wąskim ekranie przycisk pod treścią (pełna szerokość, wyśrodkowany) */
 .tm-mtcta{flex-wrap:wrap;gap:12px}
 .tm-mtcta-b{width:100%;justify-content:center}
 /* termometr tygodnia: na wąskim ekranie przewijany poziomo (siatka 7 kolumn nie zmieści się) */
 .tm-wtscroll{overflow-x:auto}
 .tm-wtlist{min-width:360px}
 .tm-wtgrid{grid-template-columns:42px 28px 46px 26px minmax(0,1fr) 28px 40px;gap:8px;padding:8px 12px}
 .tm-wtico img{width:28px;height:28px}
 /* wykresy na wąskim ekranie: tylko niższe - etykiet NIE przerzedzamy, bo odstępy
    są stałe w px (przewijana treść o szerokości min-width na .tm-mtchin) */
 .tm-mtch{height:166px}
 /* 5 kolumn siatki 30 dni nie mieści się na wąskim ekranie - wracamy do auto-fill */
 .tm-mtcal{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}

/* ==== FOTOWOLTAIKA (/fotowoltaika, idea #286) ==== */
.tm-pv-msg{padding:10px 14px;border-radius:8px;margin:0 0 14px;font-weight:600}
.tm-pv-msg-ok{background:#e7f6ec;color:#1a7a3c}
.tm-pv-msg-err{background:#fdeaea;color:#b42318}
.tm-pv-form{margin:0 0 18px;border:1px solid #e3e6ea;border-radius:10px;padding:0 14px}
.tm-pv-form summary{cursor:pointer;font-weight:700;padding:12px 0}
.tm-pv-edit{margin:0 0 12px;font-size:.85rem}
.tm-pv-edit summary{padding:8px 0}
.tm-pv-frow{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px;align-items:flex-end}
.tm-pv-frow label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;flex:1 1 150px}
.tm-pv-frow input,.tm-pv-frow select{padding:8px;border:1px solid #cfd4da;border-radius:6px;font:inherit}
.tm-pv-btn{display:inline-block;background:#f5a300;color:#1c1c1c;border:0;border-radius:8px;
	padding:10px 22px;font-weight:700;cursor:pointer;text-decoration:none}
.tm-pv-btn:hover{background:#dd9300}
.tm-pv-card{border:1px solid #e3e6ea;border-radius:10px;padding:14px;margin:0 0 18px}
.tm-pv-prices{margin-top:24px}
.tm-pv-suma{border-color:#f5a300}
.tm-pv-suma>h2{margin:0 0 10px;font-size:1.15rem}
.tm-pv-inst>summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;
	align-items:flex-start;list-style:none}
.tm-pv-inst>summary::-webkit-details-marker{display:none}
.tm-pv-inst>summary::after{content:"▾";color:#68707a;font-size:.95rem;line-height:1.4}
.tm-pv-inst[open]>summary::after{content:"▴"}
.tm-pv-inst>summary h2{margin:0;font-size:1.15rem;flex:1}
.tm-pv-inst[open]>summary{margin-bottom:10px}
.tm-pv-iq{white-space:nowrap;font-weight:800;color:#1c1c1c;font-size:.95rem}
.tm-pv-irow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.tm-pv-irow .tm-pv-edit{flex:1}
.tm-pv-sub{display:block;font-size:.8rem;font-weight:400;color:#68707a;margin-top:2px}
.tm-pv-del{margin-top:6px}
.tm-pv-del button{background:none;border:1px solid #cfd4da;border-radius:6px;padding:4px 10px;
	color:#b42318;cursor:pointer;font-size:.8rem}
.tm-pv-keybox{margin:0 0 12px;font-size:.85rem}
.tm-pv-keybox summary{padding:8px 0}
.tm-pv-keyrow{display:flex;gap:8px;align-items:center;margin:0 0 8px}
.tm-pv-keyfld{flex:1;min-width:0;padding:8px;border:1px solid #cfd4da;border-radius:6px;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8rem;
	background:#f7f8fa;color:#1c1c1c}
.tm-pv-copy{padding:8px 16px;white-space:nowrap}
.tm-pv-keygen{margin:0 0 8px}
.tm-pv-live{border:1px solid #d9edda;background:#f6fbf7;border-radius:10px;padding:12px 14px;margin:0 0 14px}
.tm-pv-live-stale{border-color:#e3e6ea;background:#f7f8fa}
.tm-pv-livehdr{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.tm-pv-livehdr b{font-size:.95rem}
.tm-pv-livedot{width:10px;height:10px;border-radius:50%;background:#2e9e4f;flex:none;
	box-shadow:0 0 0 0 rgba(46,158,79,.5);animation:tmPvPulse 2s infinite}
.tm-pv-live-stale .tm-pv-livedot{background:#9aa0a6;animation:none}
@keyframes tmPvPulse{0%{box-shadow:0 0 0 0 rgba(46,158,79,.5)}70%{box-shadow:0 0 0 8px rgba(46,158,79,0)}100%{box-shadow:0 0 0 0 rgba(46,158,79,0)}}
@media (prefers-reduced-motion:reduce){.tm-pv-livedot{animation:none}}
.tm-pv-livetiles{margin:0}
.tm-pv-live-imp .tm-pv-big{color:#b42318}
.tm-pv-live-exp .tm-pv-big{color:#2e9e4f}
.tm-pv-livemore{margin-top:6px;font-size:.85rem}
.tm-pv-livemore summary{cursor:pointer;font-weight:700;padding:6px 0;color:#1c6b34}
.tm-pv-faztab{width:100%;border-collapse:collapse;margin:6px 0;font-size:.85rem}
.tm-pv-faztab th,.tm-pv-faztab td{text-align:left;padding:4px 8px;border-bottom:1px solid #e3e6ea}
.tm-pv-faztab thead th{color:#68707a;font-weight:600}
.tm-pv-faz-imp{color:#b42318}
.tm-pv-faz-exp{color:#2e9e4f}
/* Panel "na zywo" na gorze - agregat grupy (idea #286) */
.tm-pv-livetop-wrap{margin:0 0 16px}
.tm-pv-live-top{border-color:#d9edda;background:#f6fbf7}
.tm-pv-live-top.tm-pv-live-stale{border-color:#e3e6ea;background:#f7f8fa}
.tm-pv-grptiles{gap:22px}
.tm-pv-stat-progn .tm-pv-big{color:#0a6ebd}
.tm-pv-ekon{margin:2px 0 4px;font-size:.9rem;color:#68707a}
.tm-pv-ekon b{font-size:1.05rem}
.tm-pv-ekon-zysk b{color:#1a7a3c}
.tm-pv-ekon-koszt b{color:#b42318}
.tm-pv-ekon .tm-pv-sub{font-weight:400}
/* Macierz zysku (skladnik x okres) w panelu Na zywo - kolory z .tm-pv-ekon-zysk/koszt b */
.tm-pv-zysk-wrap{overflow-x:auto;margin:4px 0}
.tm-pv-zysk{border-collapse:collapse;font-size:.9rem;color:#68707a}
.tm-pv-zysk th,.tm-pv-zysk td{padding:2px 10px;text-align:right;white-space:nowrap}
.tm-pv-zysk thead th{font-weight:600;color:#68707a;font-size:.8rem;line-height:1.15}
.tm-pv-zysk thead th span{display:block;font-weight:400;font-size:.72rem;opacity:.7}
.tm-pv-zysk tbody th{text-align:left;font-weight:400;color:#3c4149}
.tm-pv-zysk-lbl{text-align:left!important;font-weight:700;color:#3c4149}
.tm-pv-zysk td b{font-size:1.02rem;font-variant-numeric:tabular-nums;font-weight:600}
.tm-pv-zysk-sum th,.tm-pv-zysk-sum td{border-top:1px solid #e4e7ec;padding-top:4px;font-weight:700}
.tm-pv-zysk-sum th{color:#3c4149}
.tm-pv-zysk-sum td b{font-weight:800}
/* Oznaczenie nieswiezych danych - zeby stary nocny odczyt (0 kW) nie wygladal jak live */
.tm-pv-stale-badge{display:none}
.tm-pv-live-stale .tm-pv-stale-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:7px;background:#b42318;color:#fff;font-size:.72rem;font-weight:700}
.tm-pv-live-stale .tm-pv-today{opacity:.45}
.tm-pv-rozbicie{margin-top:4px;font-size:.85rem}
.tm-pv-rozbicie summary{cursor:pointer;font-weight:700;padding:6px 0;color:#1c6b34}
.tm-pv-srclist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tm-pv-srclist li{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
	padding:6px 10px;border:1px solid #eef0f3;border-radius:8px;background:#fff}
.tm-pv-srcname{font-weight:700;color:#1c1c1c;min-width:8em}
.tm-pv-srcval{color:#68707a}
.tm-pv-srcval b{color:#1c1c1c;font-weight:800}
.tm-pv-srcprogn b{color:#0a6ebd}
.tm-pv-wait,.tm-pv-empty,.tm-pv-note{color:#68707a;font-size:.85rem}
.tm-pv-today{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 12px}
.tm-pv-stat{display:flex;flex-direction:column;gap:2px;font-size:.8rem;color:#68707a}
.tm-pv-big{font-size:1.35rem;font-weight:800;color:#1c1c1c}
.tm-pv-chart{position:relative;margin:0 0 12px}
.tm-pv-dview[hidden]{display:none}
.tm-pv-chart svg{width:100%;height:170px;display:block}
.tm-pv-area{fill:#ffe9bd;fill-opacity:.7}
.tm-pv-line{fill:none;stroke:#f5a300;stroke-width:2.5}
.tm-pv-gx,.tm-pv-gy{stroke:#eef0f3;stroke-width:1}
.tm-pv-gx3,.tm-pv-gy{stroke:#dfe3e8}
.tm-pv-xlab{font-size:12px;fill:#68707a}
.tm-pv-ylab{font-size:10px;fill:#68707a;text-anchor:end}
.tm-pv-ymax{position:absolute;top:2px;right:6px;font-size:.75rem;color:#68707a}
.tm-pv-days{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
	gap:8px;margin:0;padding:0}
.tm-pv-days li{border:1px solid #eef0f3;border-radius:8px;padding:8px;display:flex;
	flex-direction:column;gap:3px;font-size:.78rem;color:#68707a}
.tm-pv-dbtn{cursor:pointer}
.tm-pv-dbtn:hover{border-color:#f5a300}
.tm-pv-days li.tm-pv-akt{border-color:#f5a300;background:#fff8ea}
.tm-pv-dlab{font-weight:700;color:#1c1c1c}
.tm-pv-dkwh{font-size:.95rem;font-weight:800;color:#1c1c1c}
.tm-pv-dval{color:#1a7a3c;font-weight:700}
.tm-pv-dpeak{font-size:.72rem;color:#68707a}
.tm-pv-priceday h3{margin:10px 0 6px;font-size:.95rem}
.tm-pv-bars{display:flex;gap:2px;align-items:flex-end;height:110px}
.tm-pv-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
	text-align:center}
.tm-pv-bar i{display:block;background:#9db6d8;border-radius:3px 3px 0 0;min-height:2px}
.tm-pv-bar.max i{background:#b42318}
.tm-pv-bar.min i{background:#1a7a3c}
.tm-pv-bar b{font-size:.62rem;color:#68707a;font-weight:600;margin-top:2px}
.tm-pv-fhint{font-size:.8rem;color:#68707a;margin:0 0 8px}
.tm-pv-zgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
	gap:8px;margin:0 0 12px}
.tm-pv-zak{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#68707a}
.tm-pv-zak input{width:64px;padding:6px;border:1px solid #cfd4da;border-radius:6px;font:inherit}
.tm-pv-bilans{border:1px solid #eef0f3;border-radius:8px;padding:10px 12px;
	margin:0 0 12px;font-size:.85rem}
.tm-pv-bilans h3{margin:0 0 8px;font-size:.95rem}
.tm-pv-bstats{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;
	margin:0 0 8px;padding:0;color:#68707a}
.tm-pv-bstats b{color:#1c1c1c}
.tm-pv-bgodz{margin:0 0 6px;color:#68707a}
.tm-pv-bgodz b{color:#1c1c1c}
.tm-pv-bosz{margin:0;font-weight:700}
.tm-pv-bosz b{color:#1a7a3c;font-size:1.05rem}
.tm-pv-bosz span{font-weight:400;color:#68707a;font-size:.78rem}
.tm-pv-landing p{margin:0 0 12px}
.tm-pv-cta{margin:18px 0}
@media (max-width:760px){.tm-pv-bars{height:80px}.tm-pv-bar b{font-size:.55rem}}

/* Zamknieta sekcja PRO (konto FREE) - klodka + CTA */
.tm-pv-lock{border:1px solid #e2e6ea;border-radius:10px;background:#f7f9fb;padding:16px 18px;margin:14px 0;text-align:center}
.tm-pv-lock-hd{font-size:16px;color:#334}
.tm-pv-lock-ico{margin-right:6px}
.tm-pv-lock-tag{display:inline-block;background:#1a7a3c;color:#fff;font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;vertical-align:middle;margin-left:4px}
.tm-pv-lock-op{color:#667;margin:8px 0 12px}
.tm-pv-probox,.tm-pv-prolist{max-width:640px;margin:0 auto}
.tm-pv-prolist{text-align:left;line-height:1.7}
.tm-pv-pro-ok{color:#1a7a3c;font-weight:700}
.tm-pv-probadge{margin:6px 0 10px;color:#1a7a3c;font-size:13px}
.tm-pv-admin{border-top:2px solid #e2e6ea}
.tm-pv-adminform label{display:inline-block;margin-right:14px}
.tm-pv-admintab{width:100%;border-collapse:collapse;margin-top:10px}
.tm-pv-admintab th,.tm-pv-admintab td{border-bottom:1px solid #eef1f4;padding:6px 8px;text-align:left}
.tm-pv-btn-del{background:#b42318}

/* ===== RYTM STRONY GŁÓWNEJ /polska - wariant V1 "gęsty portal" (warstwa C1) =====
   Rusztowanie układów sekcji SG. Wywołania widgetów są nietknięte - zmienia się wyłącznie
   siatka, w którą trafia ich wyjście (.tm-hbig / .tm-latest / .tm-mini / .tm-card / .tm-top5
   / .tm-sitem). Klasy przeniesione z makiety V1 pod prefiks tm-.
   UWAGA: reguły strojące kafle muszą stać PRZED sekcją "KAFELEK SPONSORA" (.tm-madv),
   bo .tm-madv dzieli z nimi specyficzność 0,2,0 i o pierwszeństwie decyduje kolejność. */

/* sekcja jako <section>: nagłówek jest jej pierwszym dzieckiem, więc istniejąca reguła
   .tm-shead:first-child zeruje górny margines - odstęp między sekcjami niesie .tm-sec */
.tm-sec{margin:0 0 34px}
.tm-sec:last-child{margin-bottom:0}

/* --- FAKTY POLSKA: "wydarzenia dnia" --- */
/* wysokość rzędu w zmiennej: jeden punkt regulacji dla hero, kafli i listy naraz */
.tm-dnia{--tm-dnia-h:442px;display:grid;grid-template-columns:1.6fr 1fr 272px;
 grid-auto-rows:var(--tm-dnia-h);gap:14px;align-items:stretch}
.tm-dnia>*{min-width:0;min-height:0}
/* NT3najnowsze oddaje wrapper .tm-hero z hero i listą w środku - display:contents wpuszcza
   oba elementy wprost do siatki .tm-dnia jako osobne kolumny (bez zmian w szablonie NT3*) */
.tm-dnia .tm-hero{display:contents}
.tm-dnia .tm-hbig{grid-area:1/1;height:100%;min-width:0}
.tm-dniamid{grid-area:1/2;display:grid;grid-template-rows:1fr 1fr;gap:14px;min-width:0;min-height:0}
/* kafle środkowej kolumny wypełniają wysokość: zdjęcie rośnie, pasek tytułu zostaje stały */
.tm-dniamid .tm-mini{display:flex;flex-direction:column;min-height:0}
.tm-dniamid .tm-mimg{flex:1;height:auto;min-height:0}
.tm-dniamid .tm-mt{font-size:14px}
/* warstwa B1 oddaje kafle jako .tm-oc (tytul na zdjeciu) ze stala proporcja - w siatce
   o zadanej wysokosci rzedu proporcja musi ustapic wysokosci komorki */
.tm-dniamid .tm-oc{height:100%;aspect-ratio:auto;min-height:0}
/* wąska kolumna: lista "Najnowsze" bez białej karty, oddzielona kreską, miniatury 88x62 */
.tm-dnia .tm-latest{grid-area:1/3;background:none;box-shadow:none;border-radius:0;
 /* border:0 kasuje tez bok gorny/prawy/dolny, ktore przeciekaly z bazowego .tm-latest
    (border:1px na wszystkich bokach - styl karty strony miasta). Separacje od srodkowej
    kolumny trzyma juz sam padding-left 14px, bez pionowej kreski. Uklady tablet/mobile
    (@media nizej) dokladaja border-top do wariantu stosu - tego nie ruszamy. */
 border:0;padding:0 0 0 14px;overflow:hidden}
.tm-dnia .tm-lhead{border-bottom:1px solid var(--line);color:var(--ac,var(--brand))}
.tm-dnia .tm-li{flex:1;align-items:center;border-bottom:1px solid var(--hair)}
/* ostatni wiersz TRZYMA kreske (jawne nadpisanie bazowego .tm-li:last-child{border-bottom:0}) -
   po zdjeciu ramki kolumny (border:0 wyzej) linia pod ostatnim wpisem domyka "Najnowsze" od dolu */
.tm-dnia .tm-li:last-child{border-bottom:1px solid var(--hair)}
.tm-dnia .tm-lth{width:88px;height:62px;border-radius:4px}
.tm-dnia .tm-lt{font-size:13px}

/* rząd uzupełniający Faktów: 6 kafli w jednym pasie (964/6 = ~152px, derywat s=320 schodzi
   do 0,48 - żadnego skalowania w górę).
   Strojenie typografii siedzi przy kaflu .tm-oc-m (sekcja "gesta siatka" nizej) -
   .tm-mt/.tm-mb w tej siatce juz nie istnieja. */
.tm-minis6{grid-template-columns:repeat(6,1fr)}

/* --- SKRÓT WYDARZEŃ: pas między kreskami, etykieta w kolumnie 78px --- */
.tm-skrot{background:none;box-shadow:none;border-radius:0;
 border-top:1px solid var(--line);border-bottom:1px solid var(--line);
 padding:14px 0 12px;margin-top:16px;display:grid;grid-template-columns:78px 1fr;gap:0 22px;align-items:start}
.tm-skroth{border-bottom:0;padding:2px 0 0;color:var(--ac,var(--brand));font-size:13px;
 line-height:1.15;letter-spacing:.17em;align-items:flex-start;flex-wrap:wrap}
.tm-skroth::before{display:none}
.tm-lcols{padding-top:0;column-gap:22px}
.tm-skrot .tm-sitem{border-bottom:0;padding:4px 0 4px 14px;position:relative}
.tm-skrot .tm-sitem::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
 background:var(--ac,var(--brand));opacity:.55}
/* kategoria zostaje, ale inline przed tytułem - w gęstym pasie nie ma miejsca na osobny wiersz */
.tm-skrot .tm-sitem b{display:inline;margin:0 6px 0 0;color:var(--ac,var(--brand))}

/* --- STREFA BIZNESU: poziomy pas kafli + rządek notek --- */
/* 964px / 5 kolumn = ~185px na kafel; rząd 236px daje kadr zdjęcia ~174px, czyli derywat
   s skaluje się w DÓŁ. Przy 258px z makiety byłoby +9% w górę.
   Poprawka 2026-09-05: derywat s ma 400x209 px, nie 320x180 - zmierzone na 25 z 25 plików
   {id}s w www/img/art/2026/09 i zgodne z conf/art.php ($Sconf['artykuly']['sW']=400).
   Zapas jest więc większy, niż mówił ten komentarz: kadr 174 px wysokości przy obrazie
   209 px to skala 0,83, a nie 0,97. */
.tm-strip{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:236px;gap:10px}
.tm-strip>*{min-width:0;min-height:0}
.tm-strip .tm-card{grid-column:span 2;height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-strip .tm-cimg{flex:1;height:auto;min-height:0}
.tm-strip .tm-cb{padding:10px 12px 12px}
.tm-strip .tm-ct{font-size:17px;margin:5px 0}
.tm-strip .tm-cl{display:none}   /* lead nie mieści się w kaflu pasa */
.tm-strip .tm-mini{height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-strip .tm-mimg{flex:1;height:auto;min-height:0}
.tm-strip .tm-mb{padding:9px 10px 11px}
/* warianty .tm-oc z warstwy B1: karta wiodaca to .tm-oc-c, kafle to .tm-oc-m */
.tm-strip .tm-oc{height:100%;aspect-ratio:auto;min-height:0}
.tm-strip .tm-oc-c{grid-column:span 2}
.tm-strip .tm-oc-c .tm-oct{font-size:19px}
/* notki: ranking 6 pozycji jako trzy kolumny tekstu pod pasem, bez numeracji (kreska w --ac) */
.tm-noty{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
.tm-noty .tm-top5{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;
 background:none;box-shadow:none;border-radius:0;padding:0}
.tm-noty .tm-t5{flex:none;display:block;position:relative;padding:6px 0 6px 13px;border-bottom:0}
.tm-noty .tm-t5 b{display:none}
.tm-noty .tm-t5::before{content:"";position:absolute;left:0;top:13px;width:6px;height:2px;
 background:var(--ac,var(--brand))}
.tm-noty .tm-t5 span{font-size:13.5px;line-height:1.3}

/* kafelek notowan surowcow (pomysl #314, czwarta wersja 2026-09-04): klasy .tm-oc/.tm-oc-m
   (te same co fotograficzne kafle artykulow) daja mu DOKLADNIE takie same wymiary co
   sasiednie zdjecia w kazdej siatce (w .tm-strip narzuca je grid-auto-rows, w .tm-hcards -
   aspect-ratio:16/9 z .tm-hcards .tm-oc-m, samodzielnie w .tm-surstand - aspect-ratio:3/2
   z bazowej .tm-oc-m) - zero osobnych regul rozmiaru tutaj. Tlo to gradient w odcieniach
   akcentu Biznesu zamiast zdjecia (brak realnego zdjecia dla danych rynkowych); ciemne tlo
   => te same odcienie zmiany co pasek FLASH (.tm-nbp-tick), NIE .tm-nbp (kalibrowane pod
   biale tlo). */
.tm-surtile{background:linear-gradient(150deg,#132437 0%,#1c4666 42%,#2f7aab 100%)}
.tm-surico{position:absolute;top:14px;right:14px;width:28px;height:28px;color:rgba(255,255,255,.3);z-index:2}
.tm-surl2{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.tm-suriTop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tm-suriL{font-size:12px;color:#fff;font-weight:600}
.tm-suriV{display:block;font-size:11px;color:rgba(255,255,255,.68);margin-top:1px}
.tm-surz{font-size:11px;font-weight:600;white-space:nowrap}
.tm-surz.up{color:#4ade80}
.tm-surz.dn{color:#ff8f97}
.tm-surtile .tm-nbp-zrodlo{display:block;margin-top:8px;color:rgba(255,255,255,.5)}
/* uzycie poza siatka (miasta z umowa GoWork, .tm-minis-adv - grida tego nie ruszamy, patrz
   BOK #315656): kafelek stoi samodzielnie pod pasem, wiec szerokosc trzeba ograniczyc recznie
   do wielkosci jednego artykulu zamiast pelnej szerokosci kolumny tresci */
.tm-surstand{max-width:230px}

/* podstrona /notowania (pomysl #314): kursy walut NBP i ceny surowcow jako karty - kafelek
   "Surowce" na SG prowadzi tutaj zamiast do listy artykulow (brak sensownego artykulu dla
   samych liczb). Karty .tm-qcard sa wspolne dla NT3nbpStrona.tpl i NT3surowceStrona.tpl. */
.tm-not{padding:26px 0 50px}
.tm-notTit{font-size:32px;margin:0 0 8px}
.tm-notLead{color:var(--txt-2);font-size:14.5px;margin:0 0 30px;max-width:640px}
.tm-notH2{font-size:19px;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--dark)}
.tm-qgrid{display:grid;gap:14px;margin:0 0 10px}
.tm-qgrid4{grid-template-columns:repeat(4,1fr)}
.tm-qgrid3{grid-template-columns:repeat(3,1fr)}
.tm-qcard{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-sh);padding:18px 20px;color:inherit;text-decoration:none}
/* karty sa linkami do /notowania/{slug} - hover jak na kartach artykulow (.tm-card:hover) */
a.tm-qcard:hover{border-color:var(--brand);box-shadow:var(--card-sh-h);transform:translateY(-2px)}
a.tm-qcard{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.tm-qlabel{font:600 12px var(--f-lab);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.tm-qvalue{font-size:26px;font-weight:700;color:var(--txt);margin:8px 0 4px}
.tm-qunit{font-size:13px;font-weight:400;color:var(--txt-2)}
.tm-qchange{font-size:13.5px;font-weight:600}
.tm-qchange.up{color:#1c7c43}
.tm-qchange.dn{color:var(--brand)}
.tm-notSrc{margin:6px 0 40px}
/* mikro-wykres 30 dni w karcie (SVG budowany w PHP - tmSparkSvg w function.TMnbp.php) */
.tm-sparkbox{margin-top:10px;line-height:0}
.tm-spark{display:block;width:100%;height:22px}
/* widok szczegolowy /notowania/{slug}: naglowek z biezaca wartoscia, duzy wykres, tabela */
.tm-notBack{margin:0 0 10px;font-size:13px}
.tm-qbig{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
/* przelacznik zakresu wykresu - zwykle odnosniki (kazdy zakres ma wlasny adres), bez JS */
.tm-zakres{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 16px}
.tm-zakresL{margin-right:2px;font:600 11px var(--f-lab);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.tm-zakresB{display:inline-block;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 12.5px var(--f-lab);color:var(--txt-2);text-decoration:none;transition:border-color .2s,color .2s,background .2s}
a.tm-zakresB:hover{border-color:var(--brand);color:var(--brand)}
.tm-zakresB.is-on{background:var(--dark);border-color:var(--dark);color:#fff}
.tm-qvalueBig{font-size:34px;margin:4px 0 0}
.tm-qchangeBig{font-size:17px}
.tm-chartbox{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-sh);padding:14px 16px 10px;margin-bottom:34px}
.tm-chart{display:block;width:100%;height:100%}
/* Opisy osi wykresu. Kwoty (os pionowa) i daty (os pozioma) to HTML pozycjonowany procentowo,
   a nie <text> w SVG - wykres ma preserveAspectRatio="none" i rozciaga sie na cala szerokosc
   kolumny, wiec tekst w srodku bylby scisniety w poziomie i skalowalby sie razem z rysunkiem.
   Procenty wylicza widget TMnotowanieDetal z tego samego marginesu, ktorym rysuje siatke. */
.tm-chartgrid{display:grid;grid-template-columns:auto 1fr;column-gap:10px}
.tm-chartY{position:relative;height:190px}
.tm-chartY span{position:absolute;right:0;transform:translateY(-50%);font:600 11.5px/1 var(--f-lab);color:var(--txt-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tm-chartPlot{position:relative;height:190px}
.tm-chartX{grid-column:2;position:relative;height:15px;margin-top:7px}
.tm-chartX span{position:absolute;transform:translateX(-50%);font:600 11.5px/1 var(--f-lab);color:var(--txt-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.tm-chartX span.s{transform:none}
.tm-chartX span.e{transform:translateX(-100%)}
.tm-chartlab{display:flex;justify-content:space-between;gap:12px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--txt-2)}
.tm-tbl{width:100%;border-collapse:collapse;margin-bottom:40px;font-size:13.5px}
.tm-tbl th{text-align:left;font:600 11px var(--f-lab);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2);padding:8px 10px;border-bottom:2px solid var(--dark)}
.tm-tbl td{padding:9px 10px;border-bottom:1px solid var(--line)}
.tm-tbl td.up{color:#1c7c43;font-weight:600}
.tm-tbl td.dn{color:var(--brand);font-weight:600}
@media(max-width:880px){.tm-qgrid4{grid-template-columns:repeat(2,1fr)}.tm-qgrid3{grid-template-columns:1fr}}
@media(max-width:600px){
 .tm-chartbox{padding:12px 12px 8px}
 .tm-chartgrid{column-gap:7px}
 .tm-chartY,.tm-chartPlot{height:158px}
 .tm-chartY span,.tm-chartX span{font-size:10.5px}
 /* na waskim ekranie piec dat zlewa sie w jedna plame - zostawiamy skrajne i srodkowa */
 .tm-chartX span.m:nth-of-type(2),.tm-chartX span.m:nth-of-type(4){display:none}
 .tm-chartlab{flex-direction:column;gap:3px}
}

/* --- SPORT: lista wyników (bez numeracji) + mozaika kafli --- */
/* bez align-items:start - obie kolumny mają być tej samej wysokości, bo to z niej bierze się
   wyrównanie ostatniej pozycji rankingu do dolnej krawędzi kafli po prawej.
   Wysokość wiersza wyznacza wyższa kolumna, w praktyce siatka kafli (210+10+158 = 378px) */
.tm-mozaika{display:grid;grid-template-columns:296px 1fr;gap:22px}
.tm-mozaika>*{min-width:0}
/* Ranking siedzi w panelu w kolorze sekcji - ten sam mechanizm co kafel typograficzny
   .tm-nofoto (warstwa B2): tło bierze --ac-dark, token warstwy A ZMIERZONY pod biały tekst
   (sport #367c39 = 5,12:1). NIE podstawiać tu --ac (#3f9142) - płasko daje ~3,9:1, czyli
   poniżej AA dla tekstu tej wielkości. Panel zastępuje górną kreskę: na zielonym tle nie
   miałaby czego oddzielać, a dublowała kreskę nagłówka sekcji ~25px wyżej.
   flex + flex:1 dają .tm-top5 pełną wysokość kolumny (samo z siebie ma wysokość treści),
   a space-between rozkłada zapas równo w odstępy zamiast zostawiać dziurę pod ostatnią
   pozycją. Zawężone do .tm-mozaika, bo na stronach miast (.tm-gC) kolumna jest wysokości
   treści i nie ma czego rozkładać */
/* zaokrąglony wyłącznie lewy dolny róg (kolejność: TL TR BR BL), promieniem 8px - tym samym,
   którym operują kafle obok i reszta arkusza. Pozostałe trzy rogi zostają ostre celowo */
.tm-mozaika .tm-rank{display:flex;flex-direction:column;padding:13px 15px;border-radius:0 0 0 8px;
 background:var(--ac-dark,var(--ac,var(--brand)))}
.tm-mozaika .tm-rank .tm-top5{flex:1;justify-content:space-between;border-top:0}
/* 6 pozycji mieści się w 378px tylko przy tytułach ciętych do dwóch linii: trzy linie to
   ~77px na pozycję (6 x 77 = 462px), czyli kolumna urosłaby ponad kafle i zabrała ze sobą
   wyrównanie dołu. Stąd line-clamp i 13,5px zamiast 14,5px - przy 254px na tekst to ~68
   znaków, a szablon i tak tnie tytuł na 90 znakach */
.tm-mozaika .tm-rank .tm-t5 span{color:#fff;font-size:13.5px;
 display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* znacznik na zielonym tle musi być jasny - w kolorze sekcji byłby niewidoczny */
.tm-mozaika .tm-rank .tm-t5::before{background:rgba(255,255,255,.6);top:16px}
/* ostatnia pozycja bez dolnego paddingu - inaczej równo z dolną krawędzią panelu kończy się
   jej pudełko, a sam tekst wisi 9px wyżej; zapas wraca do odstępów między pozycjami */
.tm-mozaika .tm-rank .tm-t5:last-child{padding-bottom:0}
/* border:0 przed border-top jest konieczne: bazowa .tm-top5 rysuje ramkę z czterech stron
   (border:1px solid var(--line)) i samo nadpisanie border-top zostawiłoby szare boki i spód */
.tm-rank .tm-top5{background:none;box-shadow:none;border-radius:0;padding:0;
 border:0;border-top:2px solid var(--ac,var(--brand))}
.tm-rank .tm-t5{flex:none;align-items:baseline;padding:9px 0 9px 14px;position:relative;border-bottom:0}
/* bez numeracji - kreska w kolorze sekcji jak w notkach Biznesu (.tm-noty), numer nie niósł żadnej realnej rangi w kilkuelementowej sekcji tematycznej */
.tm-rank .tm-t5 b{display:none}
.tm-rank .tm-t5::before{content:"";position:absolute;left:0;top:17px;width:6px;height:2px;background:var(--ac,var(--brand))}
.tm-rank .tm-t5 span{font-size:14.5px}
/* prawa strona: 646px / 3 kolumny = ~209px; karta na 2 kolumnach = ~427px */
.tm-mgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:210px 158px;gap:10px}
.tm-mgrid>*{min-width:0;min-height:0}
.tm-mgrid .tm-card{grid-column:span 2;height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-mgrid .tm-cimg{flex:1;height:auto;min-height:0}
.tm-mgrid .tm-cl{display:none}
.tm-mgrid .tm-ct{font-size:19px}
.tm-mgrid .tm-mini{height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-mgrid .tm-mimg{flex:1;height:auto;min-height:0}
.tm-mgrid .tm-mb{padding:8px 10px 10px}
/* warianty .tm-oc z warstwy B1 */
.tm-mgrid .tm-oc{height:100%;aspect-ratio:auto;min-height:0}
.tm-mgrid .tm-oc-c{grid-column:span 2}
.tm-mgrid .tm-oc-c .tm-oct{font-size:20px}

/* --- NIERUCHOMOŚCI: rząd równych kafli + lista tekstowa w 2 kolumnach --- */
/* 5 pól po ~185px, rząd 214px -> kadr zdjęcia ~152px, derywat s schodzi do 0,84 */
.tm-eqstrip{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:214px;gap:10px}
.tm-eqstrip>*{min-width:0;min-height:0}
.tm-eqstrip .tm-card,.tm-eqstrip .tm-mini{height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-eqstrip .tm-cimg,.tm-eqstrip .tm-mimg{flex:1;height:auto;min-height:0}
.tm-eqstrip .tm-cb{padding:9px 10px 11px}
.tm-eqstrip .tm-ct{font-size:14px;margin:4px 0 0}
.tm-eqstrip .tm-cl,.tm-eqstrip .tm-meta{display:none}
/* warianty .tm-oc z warstwy B1: karta wiodąca jest tu równym kaflem (bez span) */
.tm-eqstrip .tm-oc{height:100%;aspect-ratio:auto;min-height:0}
.tm-eqstrip .tm-oc-c .tm-oct{font-size:15px;line-height:1.25}
.tm-eqstrip .tm-oc-c .tm-ocl{display:none}
.tm-tlist{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.tm-tlist .tm-top5{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;
 background:none;box-shadow:none;border-radius:0;padding:0}
.tm-tlist .tm-t5{flex:none;padding:9px 0 9px 14px;position:relative;border-bottom:1px solid var(--hair)}
/* bez numeracji - kreska w kolorze sekcji jak w notkach Biznesu (.tm-noty), numer nie niósł żadnej realnej rangi w kilkuelementowej sekcji tematycznej */
.tm-tlist .tm-t5 b{display:none}
.tm-tlist .tm-t5::before{content:"";position:absolute;left:0;top:17px;width:6px;height:2px;background:var(--ac,var(--brand))}
.tm-tlist .tm-t5 span{font-size:13.5px}

/* --- KULTURA: pas pełnej szerokości na tincie (sekcja POZA .tm-cols) --- */
/* token --tint-kultura dodaje warstwa A; fallback trzyma kolor nawet bez niej */
.tm-tint{background:var(--tint-kultura,#fdf7ec);padding:26px 0 30px;margin:0 0 34px}
.tm-tint .tm-shead{margin-top:0}
.tm-kult{display:grid;grid-template-columns:1fr 262px;gap:14px;align-items:stretch}
.tm-kult>*{min-width:0}
/* 1288 - 262 - 14 = 1012px na 5 kolumn = ~193px na kafel; karta wiodąca ~398px */
.tm-kultg{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:216px;gap:12px}
.tm-kultg>*{min-width:0;min-height:0}
.tm-kultg .tm-card{grid-column:span 2;height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-kultg .tm-cimg{flex:1;height:auto;min-height:0}
.tm-kultg .tm-cl{display:none}
.tm-kultg .tm-ct{font-size:17px}
.tm-kultg .tm-cb{padding:10px 12px 12px}
.tm-kultg .tm-mini{height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-kultg .tm-mimg{flex:1;height:auto;min-height:0}
.tm-kultg .tm-mb{padding:8px 10px 10px}
/* warianty .tm-oc z warstwy B1 */
.tm-kultg .tm-oc{height:100%;aspect-ratio:auto;min-height:0}
.tm-kultg .tm-oc-c{grid-column:span 2}
.tm-kultg .tm-oc-c .tm-oct{font-size:19px}
/* kolumna kalendarza: biały box z kreską w kolorze sekcji, wysokość całej siatki obok */
.tm-kal .tm-top5{height:100%;background:#fff;box-shadow:none;border-radius:0;
 border-top:3px solid var(--ac,var(--brand));padding:4px 15px 6px}
.tm-kal .tm-t5{align-items:baseline;padding-left:14px;position:relative;border-bottom:1px solid var(--hair)}
.tm-kal .tm-t5:last-child{border-bottom:0}
/* bez numeracji - kreska w kolorze sekcji jak w notkach Biznesu (.tm-noty), numer nie niósł żadnej realnej rangi w kilkuelementowej sekcji tematycznej */
.tm-kal .tm-t5 b{display:none}
.tm-kal .tm-t5::before{content:"";position:absolute;left:0;top:19px;width:6px;height:2px;background:var(--ac,var(--brand))}
.tm-kal .tm-t5 span{font-size:13.5px}
/* --- MOTO / TECH: gęsta siatka 4 kolumn (kolumna treści, obok sidebar z reklamą) --- */
/* Sekcja wróciła do .tm-cols, więc siatka liczy się z 964px, nie z 1288px:
   964px / 4 kolumny (gap 9) = ~234px na kafel; karta 2x2 = ~477x381px - to wymaga
   derywatu g w NT3karta (warstwa B, punkt B3).
   SZEŚCIU kolumn tu NIE przywracać: przy 964px kafel schodzi do ~153px i tytuł
   przestaje być czytelny (raz już naprawiane - commit 8a1db19). */
.tm-dense{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:186px;gap:9px}
.tm-dense>*{min-width:0;min-height:0}
.tm-dense .tm-card{grid-column:span 2;grid-row:span 2;height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-dense .tm-cimg{flex:1;height:auto;min-height:0}
.tm-dense .tm-ct{font-size:20px}
.tm-dense .tm-cb{padding:11px 13px 13px}
.tm-dense .tm-mini{height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-dense .tm-mimg{flex:1;height:auto;min-height:0}
.tm-dense .tm-mb{padding:8px 10px 10px}
.tm-dense .tm-mt{font-size:13px}
/* warianty .tm-oc z warstwy B1 */
.tm-dense .tm-oc{height:100%;aspect-ratio:auto;min-height:0}
.tm-dense .tm-oc-c{grid-column:span 2;grid-row:span 2}
.tm-dense .tm-oc-c .tm-oct{font-size:21px}
/* dwie kolumny zapowiedzi tekstowych pod siatką */
.tm-two{margin-top:14px}
.tm-two .tm-top5{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;
 background:none;box-shadow:none;border-radius:0;padding:0}
.tm-two .tm-t5{flex:none;padding:8px 0 8px 14px;position:relative;border-bottom:1px solid var(--hair)}
/* bez numeracji - kreska w kolorze sekcji jak w notkach Biznesu (.tm-noty), numer nie niósł żadnej realnej rangi w kilkuelementowej sekcji tematycznej */
.tm-two .tm-t5 b{display:none}
.tm-two .tm-t5::before{content:"";position:absolute;left:0;top:16px;width:6px;height:2px;background:var(--ac,var(--brand))}
.tm-two .tm-t5 span{font-size:14px}

/* --- TURYSTYKA: karta wiodąca + wyróżnione zdjęcie w kolumnie 380px --- */
/* Sekcja stoi w kolumnie treści (964px): karta ~570px + zdjęcie 380px. Derywat m
   (420px szerokości) skaluje się w DÓŁ (0,90) zamiast w górę jak przy 440px. */
.tm-tur{display:grid;grid-template-columns:1fr 380px;grid-auto-rows:264px;gap:14px;margin-bottom:14px}
.tm-tur>*{min-width:0;min-height:0}
.tm-tur .tm-card{height:100%;display:flex;flex-direction:column;border-radius:6px}
.tm-tur .tm-cimg{flex:1;height:auto;min-height:0}
.tm-tur .tm-hbig{height:100%;border-radius:6px}
/* wariant .tm-oc z warstwy B1 */
.tm-tur .tm-oc{height:100%;aspect-ratio:auto;min-height:0}

/* --- EDUKACJA: zwarty blok 8 kafli 4 x 2 (kolumna tresci, 964px) ---
   Osiem kafli w jednym rzedzie dawaloby przy 964px ~112px na kafel, wiec blok ma cztery
   kolumny (~230px) w dwoch rzedach i ciasniejszy odstep niz lekki rzad .tm-minis (Zdrowie);
   proporcja kadru 16:10 (nizej w pliku) domyka to rozroznienie.
   Reguly .tm-mimg/.tm-mb/.tm-mt usuniete jako martwe (siatka renderuje .tm-oc-m).
   Strojenie tytulu MUSI miec trzy klasy: .tm-oc-m .tm-oct nizej w pliku ma te sama
   specyficznosc (0,2,0) i wygrywalo kolejnoscia - patrz sekcja "gesta siatka". */
.tm-minis8{grid-template-columns:repeat(4,1fr);gap:10px}

/* --- RWD warstwy C1 (punkty jak w makiecie V1; dolny zgodny z .tm-cols = 880px) --- */
@media(max-width:1200px){
 /* wąska lista "Najnowsze" schodzi pod hero i kafle */
 .tm-dnia{grid-template-columns:1.5fr 1fr;grid-template-rows:var(--tm-dnia-h) auto;grid-auto-rows:auto;--tm-dnia-h:380px}
 .tm-dnia .tm-latest{grid-area:2/1/3/3;border-left:0;border-top:1px solid var(--line);padding:10px 0 0}
 .tm-dnia .tm-latest .tm-li{flex:none}
 .tm-minis6{grid-template-columns:repeat(4,1fr)}
 /* .tm-dense i .tm-minis8 maja juz 4 kolumny w regule bazowej (sekcje wrocily do kolumny tresci) */
 .tm-strip,.tm-eqstrip{grid-template-columns:repeat(4,1fr)}
 .tm-kultg{grid-template-columns:repeat(3,1fr)}
 .tm-tur{grid-template-columns:1fr 300px}
}
@media(max-width:880px){
 /* jedna kolumna: kafle wracają do stałych wysokości zdjęć (flex:1 nie ma czego wypełniać) */
 .tm-dnia{grid-template-columns:1fr;grid-template-rows:initial;grid-auto-rows:auto}
 .tm-dnia .tm-hbig{grid-area:auto;height:200px}
 .tm-dniamid{grid-area:auto;grid-template-rows:auto auto}
 .tm-dniamid .tm-mimg{flex:none;height:96px}
 .tm-dniamid .tm-oc{height:auto;aspect-ratio:3/2}
 .tm-dnia .tm-latest{grid-area:auto;border-top:0;padding:0}
 .tm-skrot{grid-template-columns:1fr}
 .tm-minis6,.tm-minis8{grid-template-columns:repeat(2,1fr)}
 .tm-strip,.tm-eqstrip,.tm-dense{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
 .tm-dense .tm-card,.tm-dense .tm-oc-c{grid-row:span 2}
 .tm-mozaika{grid-template-columns:1fr}
 .tm-mgrid{grid-template-columns:1fr 1fr;grid-template-rows:initial;grid-auto-rows:180px}
 .tm-mgrid .tm-card,.tm-mgrid .tm-oc-c{grid-column:span 2}
 .tm-kult{grid-template-columns:1fr}
 .tm-tur{grid-template-columns:1fr;grid-auto-rows:230px}
 .tm-noty .tm-top5,.tm-tlist .tm-top5,.tm-two .tm-top5{grid-template-columns:1fr}
}

/* ===== KAFELEK SPONSORA W SIATCE .tm-minis (GoWork - BOK #315656) ===== */
/* .tm-madv - wariant .tm-mini z kreacją banerową zamiast miniatury artykułu.
   Blok stoi na końcu pliku i tak ma zostać: z innymi regułami o dwóch klasach dzieli
   specyficzność (0,2,0), więc o pierwszeństwie decyduje wyłącznie kolejność w pliku.
   Nad .tm-mimg (~140) i .tm-cimg,.tm-mimg,.tm-lth img (~410) wygrywa już samą
   specyficznością, niezależnie od pozycji.

   Dlaczego kafelek zajmuje 2 kolumny (grid-column:span 2):
   komórka .tm-minis jest zaprojektowana pod miniaturę artykułu (~230px w HD), a kreacja
   ma natywne 400x209. W jednej komórce baner schodził do 58% szerokości natywnej w HD
   i do 31% przy oknie 900px - logo i CTA stawały się nieczytelne. Stary theme/1 trzymał
   podłogę 300px (klasa .min300). Na 2 kolumnach komórka ma ~475px w HD, więc baner
   mieści się w natywnych 400x209 (max-width niżej), a na telefonie dostaje ~358px (~90%).

   Dlaczego własna proporcja zamiast height:96px z .tm-mimg: przy sztywnych 96px baner
   byłby kadrowany przez object-fit:cover (~410) - w HD o ~20% wysokości, poniżej 880px
   o ~56%. Kreacja o innym formacie: nadpisz --tm-adv-ar.

   Chip "Reklama" stonowany względem koloru sekcji, ale przez --txt-2 (5.39:1 na bieli),
   NIE --txt-3 (3.09:1) - etykieta ujawniająca treść płatną ma 10px i musi spełniać WCAG AA.

   Dlaczego kafelek zajmuje też 2 WIERSZE (grid-row:span 2):
   po warstwie B kafle artykułów to .tm-oc-m z aspect-ratio:3/2, czyli wiersz siatki ma
   wysokość WYNIKAJĄCĄ Z SZEROKOŚCI KOMÓRKI (230,5 px w HD -> 153,7 px), a kafelek sponsora
   ma wysokość z treści (baner 400x209 + belka tekstu ~52 px + ramki = ~263 px).
   Wiersz siatki jest sizowany do najwyższego elementu, więc reklama na 1 wierszu robiła
   wiersz 1. na ~263 px, a wiersz 2. zostawał na 153,7 px - stąd rozjazd rzędu.
   Policzone warianty (HD: komórka 230,5 px, gap 14 px, kolumna główna 964 px):
   - align-items:start -> kafle przestają się rozciągać (153,7 px), ale WIERSZ dalej ma
     263 px, więc pod pierwszym rzędem kafli zostaje ~110 px dziury. Odpada.
   - grid-auto-rows:1fr -> wiersze wyrównane, ale OBA do 263 px, czyli kafel 230x263
     (proporcja ~0,88). Derywat "s" ma 230x153, więc object-fit:cover skalowałby go
     w górę o 72% i obcinał ~42% szerokości kadru. Odpada.
   - grid-row:span 2 -> kafelek dostaje 2*153,7+14 = 321,4 px na swoje ~263 px treści
     (zapas 58 px, rozłożony po równo przez justify-content:center), a WIERSZE zostają
     na 153,7 px liczonych z proporcji kafli artykułów: rząd równy, kreacja w natywnych
     400x209. Wkład wysokości reklamy rozkłada się na 2 wiersze ((263-14)/2 = 124,5 px)
     i jest mniejszy niż 153,7 px, więc nie podbija wierszy. To wybrane wyjście.
   Rachunek komórek: kafelek zajmuje 2x2 = 4 komórki, więc do dwóch pełnych rzędów
   po 4 kolumny potrzeba 8 artykułów (8+4 = 12 = 3 wiersze) - patrz ilosc="8" w
   indexMiasta.tpl.
   Zmierzone (Chrome, kolumna główna = szerokość okna - 324 px sidebara i paddingów):
   okno 1400 px -> kafel 153,7 px, wiersze 154/153 px (równo), baner 400x209;
   okno 1200 px -> kafel 133,7, wiersze 134/133 (równo);
   okno 1000 px -> kafel 100,3, wiersze 115/116, czyli wiersze 1-2 są o ~15 px wyższe
   od wiersza 3. Poniżej ~1150 px belka tekstu kafelka (stała ~52 px, niezależna od
   szerokości) nie mieści się już w budżecie 2 wierszy. Świadomie NIE domykamy tej reszty
   przez zmniejszanie kreacji: zeszłaby poniżej podłogi 300 px z theme/1 (czytelność logo
   i CTA to przedmiot umowy), a 15 px na tle gap 14 px jest wizualnie nieodróżnialne
   od 110 px dziury, którą zostawiał wariant sprzed poprawki. */
.tm-madv{--ac:var(--txt-2);grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
/* max-width trzyma kreację w natywnych 400px (nie rozciągamy jej w górę), margin auto
   centruje ją w szerszej komórce; brak max-height - wysokość wynika z proporcji */
.tm-madv .tm-mimg{height:auto;aspect-ratio:var(--tm-adv-ar,400/209);max-width:400px;margin:0 auto;background:#fff}
/* contain - cała kreacja widoczna; białe tło zastępuje ciemny gradient-placeholder (~409),
   więc letterbox przy skrajnych szerokościach zlewa się z kartą */
.tm-madv .tm-mimg img{width:100%;height:100%;object-fit:contain;object-position:center}
/* tekst sponsora stonowany - kafelek nie udaje nagłówka redakcyjnego; wyróżniony sam anchor */
.tm-madv .tm-mt{color:var(--txt-2);font-weight:400}
.tm-madv .tm-mt a{color:var(--brand);font-weight:600}
/* dense tylko w siatce z reklamą: kafelek na 2 kolumnach nie mieści się obok pierwszego
   artykułu w układzie 2-kolumnowym i zostawiłby dziurę - dense wpuszcza w nią kolejny
   artykuł, a reklama dostaje pełny rząd. W układzie 4-kolumnowym bez efektu (brak dziur). */
.tm-minis-adv{grid-auto-flow:dense}
/* poniżej 880 px siatka ma 2 kolumny, więc kafelek zajmuje CAŁĄ szerokość rzędu i nie dzieli
   wiersza z żadnym kaflem artykułu - span 2 wierszy nie ma tam czego wyrównywać, a tylko
   rozciągałby reklamę na dwa puste wiersze. Wracamy do wysokości z treści. */
@media(max-width:880px){.tm-madv{grid-row:auto}}

/* ===== WIZYTÓWKA MIASTA W SIDEBARZE (TMmiastoInfo) ===== */
.tm-mwi{font-size:14px}
.tm-mwrow{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line)}
/* :last-of-type dopasowuje po znaczniku (div), a ostatnim div w .tm-mwi jest zawsze
   stopka .tm-mwf, nigdy .tm-mwrow - dlatego celujemy w przedostatnie dziecko rodzica,
   które przy dowolnej liczbie opcjonalnych wierszy (płeć/województwo) zawsze wypada
   na ostatnim .tm-mwrow tuż przed stopką */
.tm-mwi .tm-mwrow:nth-last-child(2){border-bottom:0}
.tm-mwl{color:var(--txt-2)}
.tm-mwv{font-weight:600;text-align:right}
/* stopka: drobny podpis źródła + wyraźny przycisk CTA do pełnych statystyk na samym dole */
.tm-mwf{margin-top:11px;display:flex;flex-direction:column;gap:9px}
.tm-mwsrc{font-size:12px;color:var(--txt-3)}
.tm-mwbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13px;padding:10px 14px;border-radius:8px;box-shadow:0 6px 16px -8px rgba(212,62,73,.55);transition:background .2s}
.tm-mwbtn:hover{background:var(--brand-h)}
.tm-mwbtn span{transition:transform .2s}
.tm-mwbtn:hover span{transform:translateX(3px)}
/* poziomy pasek "miasto w liczbach" - wariant do głównej kolumny (między sekcjami) */
.tm-mbar{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:8px;box-shadow:var(--card-sh);padding:14px 18px;margin:26px 0}
.tm-mbar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tm-mbar-tit{display:flex;align-items:center;gap:9px;font:600 13.5px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--dark)}
.tm-mbar-tit::before{content:"";width:8px;height:8px;background:var(--brand)}
.tm-mbar-src{font-size:12px;color:var(--txt-3);white-space:nowrap}
.tm-mbar-body{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.tm-mbar-stats{display:flex;flex-wrap:wrap;gap:12px 34px;flex:1 1 auto}
.tm-mbar-stat{display:flex;flex-direction:column;gap:2px;min-width:84px}
.tm-mbar-v{font-weight:700;font-size:22px;line-height:1.1;color:var(--dark)}
.tm-mbar-vt{font-size:16px;font-weight:600}
.tm-mbar-l{font-size:12px;color:var(--txt-2)}
.tm-mbar-cta{flex:none;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font-weight:600;font-size:13px;padding:10px 16px;border-radius:8px;box-shadow:0 6px 16px -8px rgba(212,62,73,.55);transition:background .2s}
.tm-mbar-cta:hover{background:var(--brand-h)}
.tm-mbar-cta span{transition:transform .2s}
.tm-mbar-cta:hover span{transform:translateX(3px)}
@media(max-width:560px){.tm-mbar-body{gap:12px}.tm-mbar-cta{width:100%;justify-content:center}}

/* ===== KAFEL Z TYTULEM NA ZDJECIU (.tm-oc) - warstwa B1 =====
   Uogolnienie mechanizmu .tm-hbig (sekcja "STRONA GLOWNA" wyzej): zdjecie jest position:absolute
   pod przyciemnieniem, wiec wysokosc kafla wyznacza WYLACZNIE siatka albo aspect-ratio - nigdy
   intrynsyczna wysokosc zdjecia. Dzieki temu jeden szablon (NT3karta / NT3mini) dziala w kazdym
   rozmiarze pola: karta wiodaca 575px, mini-kafel 230px, kiosk Faktow.
   Klasy .tm-card/.tm-ct oraz .tm-mini/.tm-mimg/.tm-mb ZOSTAJA w pliku, bo sa uzywane w
   markupie (.tm-mini* przez kafelek GoWork). Sama .tm-cimg od 2026-09-07 nie ma juz zadnego
   uzycia: strona artykulu (tpl/artykuly.tpl) przestala ja doklejac do .tm-art-rci, bo razem
   z przycinaniem brala stamtad height:250px - patrz komentarz przy .tm-cimg. */
.tm-oc{position:relative;display:block;overflow:hidden;min-width:0;min-height:0;border-radius:8px;background:#0d0f13;isolation:isolate}
.tm-oc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.tm-oc:hover>img{transform:scale(1.035)}
/* przyciemnienie z tokenu --ov (warstwa A) - bialy tekst ma powyzej AA nawet na jasnym zdjeciu */
.tm-oc::after{content:"";position:absolute;inset:0;z-index:1;background:var(--ov)}
.tm-ocb{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 13px;color:#fff}
/* tytul jest <h3> (w hero <h2>) - zdejmij margines i wage z arkusza przegladarki; przytnij do
   kilku wierszy, zeby dlugi tytul nie wypchnal chipu i daty poza kafel */
.tm-oct{margin:0;font-weight:600;color:#fff;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tm-oc:hover .tm-oct{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.tm-ocl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-top:9px;font-size:14px;line-height:1.45;color:var(--oc-meta)}
.tm-ocm{display:block;margin-top:8px;font:500 11.5px/1 var(--f-lab);letter-spacing:.13em;text-transform:uppercase;color:var(--oc-meta)}
/* chip kategorii na zdjeciu - PRZYCIEMNIONY, nie rozjasniony. Poprzednie rgba(255,255,255,.18)
   dawalo biel na bieli: na jasnym kadrze chip mial 2,50:1, czyli gleboko ponizej AA i po prostu
   znikal. Ciemne tlo daje 7,74:1 w najgorszym punkcie i czyta sie jak plakietka prasowa. */
.tm-oc .tm-kat{background:rgba(6,8,12,.55);backdrop-filter:blur(2px);margin-bottom:8px}

/* ===== OCHRONA TEKSTU NA ZDJECIU =====
   Sam gradient nie wystarcza. Pomiar na 40 realnych zdjeciach z serwisu (najjasniejszy fragment
   pasa tekstu, nie srednia): najgorszy przypadek to 5,76:1, a 38% zdjec nie osiaga AAA. Formalnie
   AA przechodzi, ale nad jasnym niebem albo bialym murem tytul czyta sie zle.
   Obrys pod litera uniezaleznia kontrast od kadru: krawedz litery styka sie z obrysem, nie ze
   zdjeciem, wiec wynik jest staly - 12,80:1 przy kryciu .55 nawet na kadrze calkowicie bialym.
   paint-order:stroke fill maluje obrys POD wypelnieniem, wiec ksztalt liter zostaje nietkniety;
   samo -webkit-text-stroke rysuje obrys NA literach i wyzera je przy 14 px. Dlatego obrys wchodzi
   wylacznie w @supports, a cien jest warstwa bazowa dla przegladarek bez paint-order. */
.tm-oct,.tm-ocl,.tm-ocm,.tm-htit,.tm-hlead,.tm-hmeta{
	text-shadow:0 1px 2px rgba(6,8,12,.6),0 2px 10px rgba(6,8,12,.4)}
@supports (paint-order:stroke){
	.tm-oct,.tm-htit{paint-order:stroke fill;-webkit-text-stroke:3px rgba(6,8,12,.55);text-shadow:0 1px 3px rgba(6,8,12,.45)}
	.tm-ocl,.tm-ocm,.tm-hlead,.tm-hmeta{paint-order:stroke fill;-webkit-text-stroke:2px rgba(6,8,12,.5);text-shadow:none}
	/* kafel typograficzny ma pelne, kontrolowane tlo (--ac-dark) - obrys tylko brudzilby litery */
	.tm-nofoto .tm-oct,.tm-nofoto .tm-ocl,.tm-nofoto .tm-ocm,
	.tm-nofoto-h .tm-htit,.tm-nofoto-h .tm-hlead,.tm-nofoto-h .tm-hmeta{-webkit-text-stroke:0;text-shadow:none}
}
/* to samo dla kafla typograficznego w gałęzi bez paint-order */
.tm-nofoto .tm-oct,.tm-nofoto .tm-ocl,.tm-nofoto .tm-ocm,
.tm-nofoto-h .tm-htit,.tm-nofoto-h .tm-hlead,.tm-nofoto-h .tm-hmeta{text-shadow:none}
.tm-nofoto .tm-kat,.tm-nofoto-h .tm-kat{background:rgba(0,0,0,.28);backdrop-filter:none}
/* wariant: karta wiodaca sekcji (.tm-sgrid, kolumna 575px w HD) */
.tm-oc-c{aspect-ratio:16/9}
.tm-oc-c .tm-oct{font-size:23px;line-height:1.17;-webkit-line-clamp:3}
/* wariant: mini-kafel w rzedzie czterech (.tm-minis, komorka 230px w HD) */
.tm-oc-m{aspect-ratio:3/2}
.tm-oc-m .tm-ocb{padding:11px 12px 11px}
.tm-oc-m .tm-oct{font-size:14px;line-height:1.25;-webkit-line-clamp:3}
.tm-oc-m .tm-kat{font-size:9.5px;letter-spacing:.14em;padding:3px 6px;margin-bottom:6px}
/* Strefy jednotematyczne (klasa .tm-nokat na sekcji): nazwa kategorii na kaflu (.tm-kat) oraz
   etykieta pozycji listy (.tm-sitem b) dubluja naglowek sekcji (h2 "Sport", "Strefa Biznesu",
   "Zdrowie i Rodzina"...), wiec w tych strefach je chowamy. Strefy mieszane (Fakty Polska,
   Na sygnale gdzie chip = nazwa miasta) NIE dostaja tej klasy - tam kategoria niesie realna
   informacje. Chowamy CSS-em, bo szablony kafli sa wspoldzielone ze strefami mieszanymi
   i z theme/1.
   Pas lokalny "Twoje miasto" stal na tej liscie do 2026-09-05 jako strefa mieszana z chipem.
   Dzis chipu nie ma w nim WCALE - zdjety z markupu w NT3ocMiasto.tpl, bo ten szablon nie jest
   z nikim wspoldzielony (pelne uzasadnienie w jego naglowku), wiec .tm-nokat jest tam zbedna. */
.tm-nokat .tm-kat,.tm-nokat .tm-sitem b{display:none}
/* kiosk Faktow - kafle nieco nizsze, zeby dwa pelne rzedy miescily sie wyzej na stronie */
.tm-kiosk .tm-oc-m{aspect-ratio:16/10}
/* UWAGA: .tm-oc-m .tm-oct wyzej ma specyficznosc 0,2,0, a lezy w pliku pozniej niz
   sekcje ukladow SG - strojenie tytulu per-siatka MUSI wiec miec trzy klasy
   (.tm-minis8 .tm-oc-m .tm-oct) albo stac ponizej tej linii. */
/* gesta siatka 8 kolumn (Edukacja): przeniesione z sekcji .tm-minis8, gdzie regula
   .tm-minis8 .tm-oct byla martwa - przegrywala kolejnoscia z .tm-oc-m .tm-oct */
.tm-minis8 .tm-oc-m{aspect-ratio:16/10}
.tm-minis8 .tm-oc-m .tm-oct{font-size:13.5px;line-height:1.24}
/* Gesta siatka: 6 kolumn (Fakty) i 8 kolumn (Edukacja) istnieja tylko powyzej 1200 px -
   nizej obie schodza do 4 i 2 kolumn, gdzie komorka ma 227 px i nic sie nie ucina.
   W komorce 147 px podpis .tm-ocb potrzebowal 99-101 px przy kaflu 92 px, czyli 108-110%
   jego wysokosci: gradient zjadal cale zdjecie, gorna krawedz podpisu byla przycieta,
   a tytul urywal sie w polowie zdania w 13 kaflach na 14. Kafel dostaje wiec proporcje
   4/3 (110 px zamiast 92) i wlasna typografie. Selektory MUSZA miec trzy klasy -
   .tm-oc-m .tm-oct wyzej ma te sama specyficznosc. */
@media(min-width:1201px){
 .tm-minis6 .tm-oc-m,.tm-minis8 .tm-oc-m{aspect-ratio:4/3}
 .tm-minis6 .tm-oc-m .tm-ocb,.tm-minis8 .tm-oc-m .tm-ocb{padding:7px 8px}
 .tm-minis6 .tm-oc-m .tm-kat,.tm-minis8 .tm-oc-m .tm-kat{font-size:8.5px;letter-spacing:.1em;padding:2px 5px;margin-bottom:3px}
 .tm-minis6 .tm-oc-m .tm-oct,.tm-minis8 .tm-oc-m .tm-oct{font-size:12px;line-height:1.18;-webkit-line-clamp:4}
}

/* ===== KAFEL TYPOGRAFICZNY (.tm-nofoto) - artykul bez zdjecia - warstwa B2 =====
   Modyfikator .tm-oc: te same warianty rozmiarowe (.tm-oc-c / .tm-oc-m) i ten sam blok tresci,
   inne tlo. Warunkiem w szablonach jest $art.width, NIE $art.foto - pole foto jest niepuste
   w 100% archiwum od 2024, wiec test po foto nigdy by tej galezi nie uruchomil.
   Kolor bierzemy z tokenow warstwy A: --ac-dark ustawia sekcja inline (warstwa C), lancuch
   fallbacku schodzi na --ac, a w ostatecznosci na --brand. Wartosci --ac-dark-* sa zmierzone
   pod bialy tekst z tekstura o budzecie --nofoto-tex (min. 4,50:1). */
.tm-nofoto{background:var(--ac-dark,var(--ac,var(--brand)))}
/* tekstura plus rozjasnienie w prawym gornym rogu - zastepuje zdjecie, kafel nie jest plaska plama.
   Krycie bieli obu warstw ograniczone tokenem --nofoto-tex - NIE podnosic bez pomiaru kontrastu */
.tm-nofoto::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(135deg,rgba(255,255,255,var(--nofoto-tex)) 0 2px,transparent 2px 9px),radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,var(--nofoto-tex)),transparent 60%)}
/* ::after przejmuje role dekoracji (w .tm-oc jest gradientem) - inset z .tm-oc trzeba wyzerowac
   JAWNIE przez inset:auto, dopiero potem dzialaja top/right */
.tm-nofoto::after{content:"\201D";inset:auto;top:-46px;right:-10px;z-index:1;background:none;font:600 150px/1 var(--f-lab);color:rgba(255,255,255,.15);pointer-events:none}
.tm-nofoto .tm-oct{font-family:var(--f-lab);letter-spacing:.005em;text-transform:uppercase}
.tm-nofoto .tm-kat{background:rgba(0,0,0,.24)}
.tm-nofoto.tm-oc-c .tm-oct{font-size:30px;line-height:1.05;-webkit-line-clamp:5}
.tm-nofoto.tm-oc-m .tm-oct{font-size:17px;line-height:1.06;-webkit-line-clamp:5}
/* wyciszenie dekoracji dla malych pol: w komorce 230px cudzyslow 150px zjada caly kafel,
   a gesta tekstura zaczyna migotac - stad slabszy kontrast paska i mniejszy znak */
.tm-nofoto.tm-oc-m::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,var(--nofoto-tex)) 0 2px,transparent 2px 9px)}
.tm-nofoto.tm-oc-m::after{font-size:92px;top:-26px;right:-6px;color:rgba(255,255,255,.11)}
/* dwa kafle w tym samym kolorze obok siebie czytaja sie jak blad renderowania - co drugi
   dostaje ciemniejszy odcien tego samego akcentu (kontrast z biela rosnie, wiec AA zachowane) */
.tm-minis>.tm-nofoto:nth-child(even){background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))}

/* wariant hero kafla typograficznego - .tm-hbig bez zdjecia (NT3najnowsze, NT3hero) */
.tm-hbig.tm-nofoto-h{background:var(--ac-dark,var(--ac,var(--brand)))}
/* kafel typograficzny nie ma zdjecia - przyciemnienie tylko zamazaloby kolor sekcji
   (dolna polowa kafla schodzilaby do rgba(13,15,19,.9), a wlasnie tam siedzi tytul);
   szablon renderuje <span class="tm-hshade"> bezwarunkowo, wiec gasimy go tutaj */
.tm-hbig.tm-nofoto-h .tm-hshade{display:none}
.tm-hbig.tm-nofoto-h::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,var(--nofoto-tex)) 0 2px,transparent 2px 9px),radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,var(--nofoto-tex)),transparent 60%)}
.tm-hbig.tm-nofoto-h::after{content:"\201D";position:absolute;top:-34px;right:-14px;font:600 190px/1 var(--f-lab);color:rgba(255,255,255,.15);pointer-events:none}
.tm-hbig.tm-nofoto-h .tm-htit{font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.005em;font-size:38px;line-height:1.03}
.tm-hbig.tm-nofoto-h .tm-kat{background:rgba(0,0,0,.24)}
.tm-hbig.tm-nofoto-h .tm-hlead,.tm-hbig.tm-nofoto-h .tm-hmeta{color:var(--oc-meta)}
/* wyroznione zdjecie sekcji (.tm-sgrid, kolumna 371px) - mniejsza skala tytulu i dekoracji */
.tm-sgrid .tm-hbig.tm-nofoto-h .tm-htit{font-size:26px}
.tm-sgrid .tm-hbig.tm-nofoto-h::after{font-size:130px;top:-22px}
/* miniatura wiersza "Najnowsze" dla artykulu bez zdjecia (NT3najnowsze) */
.tm-lth-nf{background:var(--ac-dark,var(--ac,var(--brand)))}
/* wiersz "Najnowsze": kolumna tekstu jest <div> (musi pomiescic <h3>), nie <span>.
   Klasa .tm-lbody, NIE .tm-lb - ta druga nalezy do overlaya lightboxa (linia ~601) i niesie
   display:none oraz position:fixed. Od 2026-09-05 do 2026-09-07 obie warstwy dzielily nazwe
   .tm-lb, wiec regula lightboxa gasila date i tytul we wszystkich 4 wierszach listy: w HTML
   byly, na ekranie nie. Nie da sie tego naprawic dopisaniem tu display - reszta deklaracji
   lightboxa (position:fixed, inset:0, z-index:200, ciemne tlo) zrobilaby z kazdego wiersza
   pelnoekranowa nakladke. Nazwy tych dwoch komponentow musza pozostac rozlaczne. */
.tm-lbody{min-width:0}
/* tytul pozycji skrotu wydarzen jako <h3> wewnatrz .tm-sitem (warstwa B4) */
.tm-sit{margin:0;font:inherit;color:inherit}

/* ===== WARSTWA B - RESPONSYWNOSC I RUCH ===== */
@media(max-width:880px){
 .tm-oc-c .tm-oct{font-size:18px;line-height:1.2}
 .tm-oc-m .tm-oct{font-size:13.5px}
 .tm-nofoto.tm-oc-c .tm-oct{font-size:22px}
 .tm-hbig.tm-nofoto-h .tm-htit,.tm-sgrid .tm-hbig.tm-nofoto-h .tm-htit{font-size:20px}
 .tm-hbig.tm-nofoto-h::after{font-size:110px;top:-18px}
}
@media (prefers-reduced-motion:reduce){
 .tm-oc>img{transition:none}
 .tm-oc:hover>img{transform:none}
}

/* ==========================================================================
   PAS LOKALNY "TWOJE MIASTO" (indexMiasta.tpl, wariant V3 "Lokalny-first")
   Pas pelnej szerokosci nad trescia krajowa. Stoi POZA .tm-in/.tm-cols, wiec tlo
   ciagnie sie od krawedzi do krawedzi okna. Swiadomie nie ma tu zadnego slotu
   reklamowego - kreacje IN0/IN1/B0/B1 sa robione pod biale tlo (spec par. 3).
   Moduly sa flexem, nie gridem: modul, ktory zniknal (miasto bez wydarzen,
   bez danych GUS), nie zostawia pustej kolumny - reszta rozklada sie sama.
   ========================================================================== */
.tm-loc{background:var(--loc-bg);border-bottom:1px solid var(--loc-line);padding-bottom:20px}
.tm-lochead{display:flex;align-items:center;flex-wrap:wrap;gap:13px;padding:16px 0 13px}
.tm-locbadge{flex:none;background:var(--brand);color:#fff;font:600 11px var(--f-lab);letter-spacing:.2em;text-transform:uppercase;padding:6px 10px}
.tm-loch1{margin:0;font:600 30px var(--f-lab);letter-spacing:.03em;text-transform:uppercase;color:var(--loc)}
.tm-loch1 em{font-style:normal;color:var(--dark)}
.tm-locline{flex:1;min-width:20px;height:2px;background:#d3e0ec}
.tm-locmore{flex:none;white-space:nowrap;font-size:13px;font-weight:600;color:var(--loc)}
.tm-locmore:hover{color:var(--brand)}
.tm-locmods{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-bottom:14px}
.tm-locmod{flex:1 1 240px;min-width:0;background:#fff;border:1px solid var(--loc-line);border-radius:10px;padding:11px 13px}
/* modul wydarzen jest lista tytulow - dostaje dwa razy wiecej miejsca niz liczby */
.tm-locmod-ev{flex:2 1 330px}
.tm-locmh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;font:600 11.5px var(--f-lab);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.tm-locmh a{color:var(--loc);letter-spacing:.06em}
.tm-locmh a:hover{color:var(--brand)}

/* --- modul pogody (NT3meteoPas + fallback OWM NT3pogoda) --- */
.tm-wxp{display:flex;align-items:center;gap:11px}
.tm-wxp img{flex:none}
.tm-wxpt{flex:none;font:600 40px var(--f-lab);line-height:1;color:var(--dark)}
.tm-wxpt sup{font-size:19px;vertical-align:super;color:var(--txt-2)}
.tm-wxpd{min-width:0;font-size:12.5px;line-height:1.4;color:var(--txt-2)}
.tm-wxpd b{display:block;font-size:14px;color:var(--txt)}
a.tm-wxp:hover .tm-wxpd b{color:var(--brand)}
.tm-wxprow{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--txt-2)}
.tm-wxprow b{color:var(--txt);font-weight:600}

/* --- jakosc powietrza WPLECIONA w modul pogody pasa (NT3meteoPas, 2026-07-23) ---
   kompaktowa linia-link na /powietrze pod mini-prognoza zamiast osobnego modulu
   .tm-locmod (zwolniony slot pasa zajmuje inny modul; podstrony /pogoda i /powietrze
   zostaja osobne - osobne odslony). Kolor indeksu niesie kropka (.tm-airpdot),
   etykieta slowna w --txt: jasne stany (zielony, zolty) mialy na bieli kontrast
   ponizej WCAG AA. Stare reguly osobnego modulu (.tm-airp/.tm-airpv/.tm-airpl/
   .tm-airpbar/.tm-airpm) usuniete razem z nim. */
.tm-airpdot{flex:none;width:10px;height:10px;border-radius:50%}
a.tm-wxpaq{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--txt-2)}
.tm-wxpaq b{color:var(--txt);font-weight:600}
.tm-wxpaqm{color:var(--txt-3);font-size:12px}
.tm-wxpaqa{margin-left:auto;font:600 12px var(--f-lab);color:var(--loc);white-space:nowrap}
a.tm-wxpaq:hover .tm-wxpaqa{text-decoration:underline}

/* --- odznaki pogodowe + zalecenie dnia (MeteosourceTM::porady, NT3meteoPas, 2026-07-23) ---
   chipy: ikona SVG w kolorze odznaki + ciemny tekst na jasnym tincie tego koloru
   (tlo liczone server-side w porady() - bez zaleznosci od color-mix() w przegladarce);
   maks. 3 chipy, pod nimi jedno zalecenie z najwazniejszej odznaki.
   .tm-wxaccent = 3px pasek gradientu w kolorze biezacej temperatury (tempKolor)
   na gorze modulu pogody - subtelny akcent bez zmiany tla (decyzja D4). */
.tm-wxaccent{display:block;height:3px;border-radius:2px;margin-bottom:8px;opacity:.75}
.tm-wxbdgs{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tm-wxbdg{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:20px;font:600 11.5px var(--f-lab);color:var(--txt);white-space:nowrap}
.tm-wxbdg i{display:flex}
.tm-wxadv{margin:7px 0 0;font-size:12.5px;line-height:1.4;color:var(--txt-2)}
.tm-wxadv:before{content:"\25B8";margin-right:5px;color:var(--loc)}

/* --- modul "Sonda dnia" w pasie (NT3sondaPas) + strona /sonda ---
   Odpowiedzi jako klikalne wiersze-pigulki: hover i stan zaznaczenia (CSS-only przez :has -
   progresywnie: bez wsparcia :has zostaje natywne radio + hover, nic sie nie psuje).
   Akcent --loc (granat pasa "Twoje miasto") spina sonde wizualnie z lokalna tozsamoscia.
   Formularz bez JS POSTuje na /sonda (strona bez cache ViewMain - tam zapis glosu, PRG,
   stan "juz glosowales"). Slupki wynikow wspolne: strona /sonda + archiwum. */
.tm-sondaq{margin:0 0 9px;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--txt)}
.tm-sondaopts{display:flex;flex-direction:column;gap:6px}
.tm-sondao{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--loc-line);border-radius:8px;background:#fff;font-size:12.5px;line-height:1.3;color:var(--txt);cursor:pointer;transition:border-color .15s,background .15s}
.tm-sondao input{accent-color:var(--loc);width:15px;height:15px;flex:none;margin:0;cursor:pointer}
.tm-sondao span{flex:1;min-width:0}
.tm-sondao:hover{border-color:var(--loc);background:var(--loc-bg)}
.tm-sondao:has(input:checked){border-color:var(--loc);background:var(--loc-bg);font-weight:600}
.tm-sondaf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;margin-top:11px}
.tm-sondab{padding:8px 20px;font:600 12.5px var(--f-lab);letter-spacing:.04em;color:#fff;background:var(--loc);border:0;border-radius:999px;cursor:pointer;transition:background .18s,transform .05s}
.tm-sondab:hover{background:#104063}
.tm-sondab:active{transform:translateY(1px)}
.tm-sondamore{font-size:11.5px;font-weight:600;color:var(--loc)}
.tm-sondamore:hover{text-decoration:underline}
/* strona /sonda: wieksze pytanie i odpowiedzi, wyniki, archiwum */
.tm-sondapg{margin:0 0 10px}
.tm-sondaqpg{font-size:18px;line-height:1.3;margin-bottom:12px}
.tm-sondaopg{font-size:14px;padding:11px 14px}
.tm-sondaskip{font-size:12.5px;font-weight:600;color:var(--loc)}
.tm-sondaskip:hover{text-decoration:underline}
.tm-sondaw{margin-top:6px}
.tm-sondar{margin:0 0 11px;transition:background .15s}
/* wiersz z odpowiedzia uzytkownika (".tm-sondamy" w srodku) dostaje delikatne tlo akcentu */
.tm-sondar:has(.tm-sondamy){background:var(--loc-bg);border-radius:8px;padding:9px 11px;margin:0 -11px 8px}
.tm-sondarl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--txt)}
.tm-sondarl b{font:600 14px var(--f-lab);color:var(--loc);flex:none}
.tm-sondamy{font-style:normal;font-size:11px;font-weight:700;color:var(--loc);text-transform:uppercase;letter-spacing:.04em}
.tm-sondarb{height:9px;margin-top:4px;border-radius:5px;background:var(--band);overflow:hidden}
.tm-sondarb span{display:block;height:100%;min-width:4px;border-radius:5px;background:var(--loc)}
.tm-sondam{margin:4px 0 0;font-size:12.5px;color:var(--txt-2)}
.tm-sondam a{color:var(--loc);font-weight:600}
.tm-sondah2{font-size:21px;font-weight:700;letter-spacing:-.2px;margin:26px 0 12px;color:var(--dark)}
.tm-sondarch{padding:14px 0 4px;border-top:1px solid var(--line)}

/* --- modul najblizszych wydarzen (NT3eventsPas) --- */
.tm-evs{display:flex;flex-direction:column;gap:6px}
.tm-ev{display:flex;align-items:flex-start;gap:10px;padding-bottom:6px;border-bottom:1px dashed var(--line)}
.tm-ev:last-child{padding-bottom:0;border-bottom:0}
/* wydarzenia w pasie: 2 kolumny po 3 (razem ilosc=6). Modul jest szeroki (.tm-locmod-ev
   flex:2), wiec miesci dwie kolumny. Separacja gapem siatki zamiast dashed-kreski - kreska
   w dwoch kolumnach dawalaby nierowne linie miedzy wierszami. Mobile wraca do 1 kolumny. */
.tm-locmod-ev .tm-evs{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.tm-locmod-ev .tm-ev{padding-bottom:0;border-bottom:0}
.tm-evd{flex:none;width:44px;padding:4px 0;text-align:center;background:var(--loc);color:#fff;border-radius:6px}
.tm-evd b{display:block;font:600 17px var(--f-lab)}
.tm-evd i{font-style:normal;font:600 9.5px var(--f-lab);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.tm-evb{min-width:0}
.tm-evt{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--txt)}
.tm-ev:hover .tm-evt{color:var(--loc)}
.tm-evm{display:block;margin-top:2px;font-size:12px;color:var(--txt-2)}

/* Modul "miasto w liczbach" (NT3miastoInfoBar) ZSZEDL z pasa lokalnego do glownej kolumny
   (2026-07-23, po sekcji Prawo) - renderuje sie tam w pelnej, poziomej postaci .tm-mbar
   (styl full-width wyzej), wiec dawny override .tm-locmods .tm-mbar (kompaktowa karta pasa)
   zostal usuniety jako martwy. Zwolniony slot pasa dostaly dodatkowe wydarzenia. */

/* --- rzad lokalnych newsow: kafel wiodacy (2 rzedy) + 6 mniejszych (3 kolumny x 2 rzedy) ---
   Pas stoi POZA .tm-cols (szablon wstawia go wprost do .tm-loc>.tm-in), wiec tor to
   1320 - 2x16 = 1288 px, a NIE 964 px kolumny glownej - ten komentarz podawal wymiary
   kolumny glownej do 2026-09-05 i mylil kazdego, kto tu zagladal.
   Wymiary w HD po zmianie na 4 kolumny (gap 3x12 = 36): 1fr = (1288-36)/4,6 = 272,2 px
   => wiodacy 435,5x300 px, male 272,2x144 px. Przed zmiana (3 kolumny): 561,8 i 351,1 px.
   Wysokosc rzedu to (300-12)/2 = 144 px i NIE zalezy od liczby kolumn.
   Wiodacy bierze derywat g (950x496), male derywat m (623x325 - conf/art.php:8-13, liczba
   420 px z dawnego komentarza pochodzila z innego toru). Zaden nie jest skalowany w gore,
   a male po zwezeniu pokrywaja wreszcie DPR2 (623/276 = 2,26 px obrazu na px CSS; przy
   351 px kafla bylo 1,78, czyli niedomiar).
   Cena zwezenia: tytul ma 248 px zamiast 327 px, wiec clamp ucina 5,7% tytulow zamiast
   0,1% (pomiar w Chromium na 3491 tytulach z ostatnich 30 dni). Trzy wiersze tytulu maja
   104,8 px w kaflu 144 px, wiec podpis nadal miesci sie z zapasem.
   Wysokosc 300 px trzyma pas w ryzach: przy 1440x900 kafle startuja ok. 420 px od gory,
   wiec sa nad zgieciem (ryzyko 11 ze spec) - dlatego NIE podnosic.
   UWAGA: siatka wypelnia sie bez dziur WYLACZNIE przy 7 pozycjach (wiodacy na dwa rzedy
   + szesc malych = 8 komorek). Liczbe daje ilosc="7" w indexMiasta.tpl:69 - zmiana tam
   wymaga zmiany tutaj, i odwrotnie. */
.tm-locnews{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;grid-auto-rows:1fr;gap:12px;height:300px}
.tm-locnews>a{height:100%;min-height:0}
.tm-locnews>a:first-child{grid-row:span 2}
/* nazwa elementu wnetrza kafla jest ta z warstwy B1: .tm-oct (tytul); metryczki .tm-ocm
   ani chipu .tm-kat pas od 2026-09-05 nie renderuje - uzasadnienie w NT3ocMiasto.tpl */
.tm-oc-lead .tm-oct{font-size:22px;line-height:1.18;-webkit-line-clamp:3}
.tm-oc-s .tm-ocb{padding:11px 12px}
.tm-oc-s .tm-oct{font-size:14.5px;line-height:1.25;-webkit-line-clamp:3}
@media(max-width:1100px){
 .tm-locnews{height:auto;grid-template-columns:1fr 1fr}
 /* height:100% z reguly wyzej razem z aspect-ratio kazalo przegladarce liczyc
    SZEROKOSC z wysokosci wiersza - kafel wychodzil na 381 px w torze 343 px
    i robil poziomy scroll calego dokumentu. Wysokosc liczymy z szerokosci. */
 .tm-locnews>a{height:auto;width:100%}
 .tm-locnews>a:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:16/9}
 .tm-locnews>a{aspect-ratio:16/10}
}
@media(max-width:560px){
 /* Siatka ZOSTAJE dwukolumnowa (regula z bloku 1100 px), a kafel wiodacy zostaje na calej
    szerokosci - do 2026-09-05 bylo tu przejscie na jedna kolumne i wiodacy tracil span.
    Powod zmiany: po dolozeniu dwoch kafli (5 -> 7) jedna kolumna dalaby przy 390x844 pas
    dlugi na 1459 px, czyli o 427 px wiecej niz przed zmiana. W dwoch kolumnach szesc
    malych kafli zajmuje trzy rzedy zamiast szesciu i pas jest KROTSZY niz byl przy pieciu
    kaflach - tresc krajowa wchodzi wyzej, a zaden artykul nie znika z DOM.
    Nad zgieciem nic sie przez to nie zmienia: siatka ma order:3 (blok 700 px nizej),
    wiec kafle i tak zaczynaja sie ponizej naglowka pasa i modulow danych. */
 .tm-loch1{font-size:22px}
}

/* --- PAS LOKALNY NA TELEFONIE (ponizej 700 px) ---------------------------
   Pas mial dawac sygnal lokalnosci, a na waskim ekranie zjadal caly pierwszy
   ekran: cztery moduly ustawialy sie jeden pod drugim (727 px), przez co
   pierwszy tytul artykulu wypadal na 1153 px, czyli 1,4 ekranu od gory -
   czytelnik z telefonu nie widzial ZADNEJ wiadomosci nad zgieciem.
   Nic nie znika: pogoda i powietrze schodza do jednego kompaktowego wiersza,
   wydarzenia do dwoch najblizszych pozycji (reszta pod linkiem "kalendarz"),
   a dane GUS do jednego przewijanego rzedu liczb. Na desktopie pas zostaje
   w pelnej postaci - to wybor wlasciciela produktu. */
@media(max-width:700px){
 /* --- KOLEJNOSC PASA NA TELEFONIE: kafle newsow przed wydarzeniami i GUS ---
    Pomiar przed zmiana, 390x844, slot reklamowy A pusty (czyli po zwinieciu
    rezerwacji przez slotRenderEnded z ads.tpl): naglowek serwisu konczy sie
    na 161 px, pas startuje na 190 px, jego wlasny naglowek zajmuje 69,5 px,
    a rzad modulow danych 380,9 px. Pierwszy kafel newsa wypadal dopiero na
    648 px, jego tytul na 763 px - nad zgieciem byl JEDEN tytul artykulu,
    a przy 375x667 ani jeden. Na /polska w tym samym viewporcie bylo ich piec,
    a strona miasta jest wazniejsza: to na nia trafia ruch lokalny z Google.

    .tm-locmods dostaje display:contents, wiec jego dzieci staja sie pozycjami
    tego samego flexa co .tm-lochead i .tm-locnews - i daja sie przestawic
    wlasnoscia order BEZ dotykania HTML. Kolejnosc na telefonie:
      1. naglowek pasa (badge "Twoje miasto" + h1 z nazwa miasta),
      2. pogoda i jakosc powietrza - dwie polowki jednego wiersza,
      3. kafle lokalnych newsow,
      4. najblizsze wydarzenia,
      5. miasto w liczbach.
    Zaden modul nie znika i zadna tresc nie chowa sie za gestem przewijania
    poziomego - wydarzenia i dane GUS schodza tylko nizej w tym samym pasie.
    Sygnal "to jest TWOJE miasto" zostaje nad zgieciem w calosci: h1 z nazwa
    miasta, temperatura i jakosc powietrza, czyli trzy rzeczy, ktorych
    czytelnik szuka na portalu miejskim od razu.
    Dlaczego pogoda i powietrze zostaja NAD kaflami, a nie schodza z reszta:
    zajmuja razem jeden wiersz 119 px i mieszcza sie w budzecie pierwszego
    ekranu, a jako jedyne moduly pasa niosa stan "tu i teraz".
    Powyzej 700 px pas zostaje w pelnej postaci - to wybor wlasciciela
    produktu (na desktopie 1440x900 pas ma 224,5 px i piec tytulow
    nad zgieciem, wiec nie ma czego naprawiac). */
 .tm-loc>.tm-in{display:flex;flex-wrap:wrap;align-items:stretch;gap:7px}
 .tm-locmods{display:contents}
 .tm-locnews{flex:1 1 100%;order:3}

 /* naglowek pasa: badge i tytul w jednym wierszu, link pod spodem */
 .tm-lochead{gap:8px;padding:9px 0 7px;flex:1 1 100%;order:1}
 .tm-locbadge{font-size:10px;padding:5px 8px}
 .tm-locmh{margin-bottom:5px;font-size:10.5px;letter-spacing:.1em}

 /* male moduly pasa (nie-wydarzenia): dwie polowki jednego paska zamiast dwoch kart
    (od 2026-07-23 to pogoda z powietrzem + kolejny modul pasa).
    Naglowki modulow nie moga sie lamac na dwa wiersze w torze 168 px,
    stad nowrap z wielokropkiem. */
 /* flex-grow:1 przy bazie 50% - miasto, ktore ma tylko jeden maly modul,
    dostaje caly wiersz, dokladnie jak przed zmiana kolejnosci */
 .tm-locmods>.tm-locmod:not(.tm-locmod-ev){flex:1 1 calc(50% - 4px);min-width:0;padding:7px 10px;order:2}
 .tm-locmods>.tm-locmod:not(.tm-locmod-ev) .tm-locmh{flex-wrap:nowrap;font-size:9.5px;letter-spacing:.06em}
 .tm-locmods>.tm-locmod:not(.tm-locmod-ev) .tm-locmh>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tm-locmods>.tm-locmod:not(.tm-locmod-ev) .tm-locmh>a{flex:none;white-space:nowrap}
 /* opis pogody schodzi pod ikone i temperature - w torze 148 px obok nich
    lamalby sie na cztery wiersze */
 .tm-wxp{gap:6px;flex-wrap:wrap}
 .tm-wxp img{width:36px;height:36px}
 .tm-wxpt{font-size:26px}
 .tm-wxpt sup{font-size:12px}
 .tm-wxpd{flex:1 0 100%;font-size:11px;line-height:1.3}
 .tm-wxpd b{font-size:12px}
 /* mini-prognoza noc/jutro/opad zostaje na /pogoda - link jest w naglowku modulu */
 .tm-wxprow{display:none}
 /* linia powietrza w module pogody: zostaje kropka + stan (dane PM schodza na /powietrze,
    "szczegoly" tez - w waskim torze linia nie moze sie lamac na trzy wiersze).
    Selektor a.tm-wxpaq (nie .tm-wxpaq): regula bazowa to a.tm-wxpaq (specyficznosc 0,1,1),
    @media nie podnosi specyficznosci - golby .tm-wxpaq (0,1,0) przegralby i nie zadzialal */
 a.tm-wxpaq{font-size:11px;padding-top:6px;margin-top:6px}
 .tm-wxpaqm,.tm-wxpaqa{display:none}
 /* odznaki + zalecenie w polowce toru: mniejsze chipy, zalecenie zostaje (to
    najcenniejsza tresc modulu, a mobile nie ma tooltipow) */
 .tm-wxaccent{margin-bottom:6px}
 .tm-wxbdgs{gap:4px;margin-top:7px}
 .tm-wxbdg{font-size:10px;padding:2px 7px 2px 5px}
 .tm-wxadv{font-size:11px;margin-top:5px}
 /* sonda w polowce toru: mniejsze pytanie i odpowiedzi. Zawezone do .tm-locmod - bez tego
    mobilne reguly zbijalyby te same klasy .tm-sonda* na stronie /sonda (tam pytanie/odpowiedzi
    maja byc wieksze: .tm-sondaqpg/.tm-sondaopg) */
 .tm-locmod .tm-sondaq{font-size:12px}
 .tm-locmod .tm-sondao{font-size:11.5px;padding:6px 9px}
 .tm-locmod .tm-sondab{padding:6px 15px;font-size:11.5px}
 .tm-locmod .tm-sondamore{font-size:11px}

 /* wydarzenia: dwie najblizsze pozycje, reszta pod linkiem w naglowku modulu */
 .tm-locmod-ev{flex:1 1 100%;padding:7px 10px;order:4}
 /* mobile: siatka wydarzen wraca do 1 kolumny; pokazujemy 4 (reszta pod "kalendarz") */
 .tm-locmod-ev .tm-evs{grid-template-columns:1fr;gap:6px}
 .tm-ev:nth-child(n+5){display:none}
 .tm-evd{width:38px;padding:2px 0}
 .tm-evd b{font-size:15px}
 .tm-evt{font-size:12.5px}
 .tm-evm{font-size:11px}

 /* miasto w liczbach: jeden przewijany rzad liczb + waski przycisk */
 .tm-locmods .tm-mbar{flex:1 1 100%;padding:7px 10px;order:5}
 .tm-locmods .tm-mbar-head{margin-bottom:5px}
 .tm-locmods .tm-mbar-body{gap:7px}
 .tm-locmods .tm-mbar-stats{flex-wrap:nowrap;overflow-x:auto;gap:14px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
 .tm-locmods .tm-mbar-stat{flex:none;min-width:0;white-space:nowrap}
 .tm-locmods .tm-mbar-v{font-size:15px}
 .tm-locmods .tm-mbar-vt{font-size:12.5px}
 .tm-locmods .tm-mbar-cta{padding:6px 12px;font-size:11.5px}

 /* kafel wiodacy: kadr 2/1 zamiast 16/9 - tytul wchodzi wyzej o ok. 20 px.
    Kafle dalsze: 16/9 zamiast 16/10 (w torze 358 px to 201 px zamiast 224 px).
    Bez tego tytul DRUGIEGO kafla konczyl sie na 841 px przy zgieciu 844 px,
    czyli miescil sie z zapasem 3 px - dosc, zeby wypasc poza ekran po dolozeniu
    jednej linii tytulu. Po zmianie tytul konczy sie na 796 px (zapas 48 px),
    a przy 360x800 drugi tytul w ogole wchodzi nad zgiecie. Kadr 16/9 jest juz
    uzywany dla kafli mobilnych w innych sekcjach (.tm-gAm, .tm-gD), wiec nie
    wprowadza nowej proporcji - i nadal jest wezszy niz derywat 3/2, wiec
    zadne zdjecie nie jest skalowane w gore. */
 .tm-locnews>a:first-child{aspect-ratio:2/1}
 .tm-locnews>a{aspect-ratio:16/9}
}

/* Male kafle pasa na waskim ekranie: kadr kwadratowy zamiast 16/9.
   Ponizej 560 px szesc malych kafli stoi w DWOCH kolumnach (patrz komentarz przy
   .tm-locnews), wiec komorka ma 173 px zamiast 358 px - pomiar dla 390x844, tor 358 px.
   Kadr 16/9 dalby jej 97 px wysokosci, a sam podpis (chip kategorii, trzy wiersze tytulu
   i padding .tm-ocb) potrzebuje 104 px. Tekst wyszedlby poza kafel i zostalby przyciety
   OD GORY przez overflow:hidden z .tm-oc, czyli urwanym pierwszym wierszem tytulu.
   Dlaczego 1/1, a nie 4/3: przy 4/3 kafel ma 130 px, wiec podpis zajmuje 80% jego
   wysokosci i ze zdjecia zostaje pasek 26 px - kafel przestaje byc kaflem ze zdjeciem.
   Do tego grid-auto-rows:1fr zrownuje wiersze do 179 px (tyle ma kafel wiodacy w kadrze
   2/1 na calej szerokosci), wiec pod kazdym kaflem 4/3 zostawaloby 49 px pustego wiersza.
   Kadr 1/1 daje 173 px: podpis to 60% wysokosci, zdjecie jest widoczne, a wiersz jest
   wypelniony prawie dokladnie (179 px). Siatka NIE rosnie od tej zmiany, bo wysokosc
   wiersza i tak wyznacza kafel wiodacy.
   Blok MUSI stac PO @media(max-width:700px): obie reguly maja te sama specyficznosc
   (0,1,1), wiec o wyniku decyduje kolejnosc w pliku. Kafla wiodacego nie ruszamy -
   jego :first-child (0,2,1) wygrywa niezaleznie od kolejnosci i zostaje przy 2/1. */
@media(max-width:560px){
 .tm-locnews>a{aspect-ratio:1/1}
}

/* naglowek dostepny tylko dla czytnikow - awaryjny h1, gdy pas lokalny w calosci
   zniknie (miasto bez pogody, wydarzen, danych GUS i bez artykulow) */
.tm-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   UKLADY SEKCJI STRONY MIASTA (indexMiasta.tpl, wariant V3)
   Kazda sekcja dostaje inny uklad przy NIEZMIENIONYCH wywolaniach widgetow -
   zmienia sie wylacznie rozlozenie wynikow w siatce (spec, warstwa C).
   Wymiary liczone dla kolumny glownej 964 px (kontener 1320 - 2x16 padding
   - 300 sidebar - 24 gap).
   UWAGA: po warstwie B1 szablony NT3karta/NT3mini renderuja kafle .tm-oc-c/.tm-oc-m
   (tytul na zdjeciu), a nie biale karty .tm-card/.tm-mini z .tm-mimg - selektory
   ponizej celuja wiec w klasy .tm-oc*. Kafel .tm-oc-m ma wlasne aspect-ratio 3/2,
   ktore w siatkach o narzuconej wysokosci trzeba wygasic (aspect-ratio:auto).
   ========================================================================== */

/* --- A. FAKTY POLSKA: dwa kafle wiodace 2/3 + box "Najnowsze" 1/3 --- */
.tm-gA{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:stretch}
.tm-gAm{display:grid;grid-template-rows:1.4fr 1fr;gap:12px;min-height:430px}
.tm-gAm>a{height:100%;min-height:0;aspect-ratio:auto}
.tm-gAm>a:first-child .tm-oct{font-size:20px;line-height:1.2}
.tm-lat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tm-lath{background:var(--ac,var(--brand));color:#fff;font:600 13px var(--f-lab);letter-spacing:.2em;text-transform:uppercase;padding:11px 14px}
.tm-latb{flex:1;padding:2px 13px 8px}
@media(max-width:880px){.tm-gA{grid-template-columns:1fr}.tm-gAm{min-height:0;grid-template-rows:auto}.tm-gAm>a{aspect-ratio:16/9}}

/* --- B. NA SYGNALE: rzad kafli o stalej proporcji, 3 kolumny ---
   Widget daje 6 pozycji, wiec 3 kolumny to dokladnie 2 pelne rzedy (w siatce
   4-kolumnowej ostatni rzad mial dwie puste komorki). */
.tm-sig{grid-template-columns:repeat(3,1fr)}
.tm-sig .tm-oc-m{aspect-ratio:16/9}
.tm-sig .tm-oc-m .tm-oct{font-size:15px}
@media(max-width:880px){.tm-sig{grid-template-columns:repeat(2,1fr)}}

/* --- C. REGION: wielokolumnowa lista tekstowa "wiecej z okolicy" --- */
.tm-rcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 26px}
.tm-ritem{display:block;padding:9px 0;border-bottom:1px solid var(--line)}
.tm-ritem b{display:block;margin-bottom:3px;font:600 10.5px var(--f-lab);letter-spacing:.14em;text-transform:uppercase;color:var(--ac,var(--brand))}
.tm-ritem h3{margin:0;font-size:14px;font-weight:500;line-height:1.32;color:var(--txt)}
.tm-ritem:hover h3{color:var(--ac,var(--brand))}

/* --- D. KULTURA: pas na tincie WEWNATRZ kolumny glownej ---
   Makieta V3 trzyma pas jako zaokraglona karte w kolumnie tresci, a nie jako pas
   pelnej szerokosci okna - dzieki temu nie trzeba rozcinac .tm-cols i sidebar oraz
   sticky B0/B1 zachowuja sie dokladnie jak dotad. Kafle: proporcja 4:3 (pozioma).
   Wnetrze pasa = 964 - 2x18 padding = 926 px; przy 4 kolumnach i gap 12 px kafel ma
   222,5 px.
   Poprawka 2026-09-05 - liczby derywatow byly falszywe. Realnie (conf/art.php:8-13,
   potwierdzone getimagesize na 280 plikach z www/img/art/2026/09): s = 400x209,
   m = 623x325, g = 950x496. W komentarzu stalo 320x180 i 420x236, czyli proporcja 16:9,
   ktorej zaden derywat nie ma - wszystkie maja 1,915.
   Po przeliczeniu przy object-fit:cover (obraz jest szerszy od kafla 4:3, wiec wiaze
   WYSOKOSC): s pokrywa 4:3 do 278 px szerokosci, m do 433 px - nadal zaden kafel
   nie jest skalowany w gore, wiec sam uklad zostaje bez zmian.
   UPADA natomiast argument o kaflach portretowych: przy 4:5 derywat m siega 260 px
   (325 px wysokosci x 0,8), a kafel potrzebuje 222,5 px - czyli 4:5 z makiety BYLOBY
   wykonalne, wbrew temu, co mowil ten komentarz (wyliczal 189 px z falszywego 420x236).
   Kafle zostaja 4:3, ale juz jako decyzja wizualna, nie jako ograniczenie plikow. */
.tm-cband{background:var(--tint-kultura,#fdf7ec);border:1px solid #f0e0c0;border-radius:12px;padding:18px 18px 20px;margin-bottom:16px}
.tm-cbandh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tm-cbandh h3{margin:0;font:600 15px var(--f-lab);letter-spacing:.18em;text-transform:uppercase;color:#8a6215}
.tm-cbandh span{flex:1;height:1px;background:#eadcbe}
.tm-gD{display:grid;grid-template-columns:1.5fr 1fr 1fr 290px;gap:12px;align-items:start}
.tm-gD>.tm-oc-c{grid-column:1;grid-row:1/span 2;height:100%;aspect-ratio:auto;min-height:300px}
.tm-gD>.tm-top5{grid-column:4;grid-row:1/span 2;background:transparent;box-shadow:none;border:1px solid #eadcbe;border-radius:10px}
.tm-gD .tm-oc-m{aspect-ratio:4/3}
/* bez numeracji - kreska w kolorze sekcji jak w notkach Biznesu (.tm-noty), numer nie niósł żadnej realnej rangi w kilkuelementowej sekcji tematycznej */
.tm-gD .tm-t5{position:relative;padding-left:14px}
.tm-gD .tm-t5 b{display:none}
.tm-gD .tm-t5::before{content:"";position:absolute;left:0;top:17px;width:6px;height:2px;background:var(--ac,var(--brand))}
@media(max-width:1100px){.tm-gD{grid-template-columns:1fr 1fr}.tm-gD>.tm-oc-c,.tm-gD>.tm-top5{grid-column:auto;grid-row:auto;min-height:0}.tm-gD>.tm-oc-c{aspect-ratio:16/9}}
@media(max-width:560px){.tm-gD{grid-template-columns:1fr}.tm-cband{padding:14px}}

/* --- E. STREFA BIZNESU: karta wiodaca + ranking, pod spodem rzad kafli --- */
.tm-gB{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:14px;align-items:start}
/* rzad kafli sekcji - wariant dla miast BEZ kafelka sponsora GoWork.
   W miastach z umowa zostaje siatka 4-kolumnowa .tm-minis/.tm-minis-adv, bo kafelek
   .tm-madv zajmuje 2 komorki i tylko przy 4 kolumnach 6 artykulow + reklama daja
   rowne 2 rzedy (8 komorek). Patrz komentarz przy .tm-madv i BOK #315656. */
.tm-hcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* dodatkowy rzad 3 artykulow domykajacy sekcje Strefa Biznesu na SG - sama .tm-hcards nie ma
   marginesu gornego (w swoim macierzystym miejscu stoi tuz pod belka sekcji), a tu przykleja
   sie do rzadka notek/rankingu nad soba */
.tm-hcards-dol{margin-top:20px}
.tm-hcards .tm-oc-m{aspect-ratio:16/9}
.tm-hcards .tm-oct{font-size:14px}
/* bez numeracji - kreska w kolorze sekcji jak .tm-noty, numer nie niósł żadnej realnej rangi w kilkuelementowej sekcji tematycznej */
.tm-gB .tm-t5{position:relative;padding-left:14px}
.tm-gB .tm-t5 b{display:none}
.tm-gB .tm-t5::before{content:"";position:absolute;left:0;top:17px;width:6px;height:2px;background:var(--ac,var(--brand))}
@media(max-width:880px){.tm-gB{grid-template-columns:1fr}.tm-hcards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tm-hcards{grid-template-columns:1fr}}

/* --- F. SPORT (SG miasta): karta + kafle po lewej, po prawej ranking i boks "Biegi" ---
   Reguly .tm-rank .tm-top5 / .tm-rank .tm-t5 sa juz w arkuszu (warstwa C1, sekcja
   Sportu na /polska) i celowo NIE sa tu powtarzane. Szara ramka wokol rankingu
   (dawne .tm-gC .tm-rank{border:1px solid var(--line);...;background:#fff}) zdjeta
   2026-09-05 na zyczenie: lista tytulow bez zdjec stoi teraz bez opakowania, z sama
   kreska w kolorze sekcji od gory (.tm-rank .tm-top5) - jak notki w Strefie Biznesu. */
.tm-gC{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
/* prawa kolumna: ranking, a pod nim boks Biegi. min-width:0, zeby dluga nazwa zawodow
   nie rozpychala kolumny 300px (dziecko grida ma domyslnie min-width:auto) */
.tm-gCr{display:flex;flex-direction:column;gap:20px;min-width:0}
.tm-gCm{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm-gCm>.tm-oc-c{grid-column:span 2}
@media(max-width:880px){.tm-gC{grid-template-columns:1fr}}

/* boks "Biegi" (modul Zapisy, idea #310; widget ext/S/function.TMzapisyBiegi.php +
   NT3zapisyBiegi.tpl). Zacheta dla organizatorow w panelu w kolorze sekcji - ten sam
   mechanizm i budzet tekstury co kafel typograficzny .tm-nofoto (--ac-dark zmierzony pod
   bialy tekst, --nofoto-tex), wiec caly tekst panelu MUSI byc czysto bialy: kazde
   przyciemnienie (opacity/rgba) zjada zapas kontrastu, ktorego pod tekstura jest 4,55:1. */
.tm-biegi{display:flex;flex-direction:column;gap:14px}
.tm-biegi-cta{position:relative;overflow:hidden;isolation:isolate;padding:16px 16px 15px;border-radius:8px;background:var(--ac-dark,var(--ac,var(--brand)));color:#fff}
.tm-biegi-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(135deg,rgba(255,255,255,var(--nofoto-tex)) 0 2px,transparent 2px 9px),radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,var(--nofoto-tex)),transparent 60%)}
.tm-biegi-lab{display:block;font:600 10.5px var(--f-lab);letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.tm-biegi-h{display:block;font:600 23px/1.08 var(--f-lab);letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}
.tm-biegi-p{margin:9px 0 13px;font-size:13px;line-height:1.45}
/* przycisk odwrocony (bialy na zieleni): czerwony .tm-btn marki bilby sie w zielonym
   panelu z kolorem sekcji; napis w --ac-dark na bieli to 5,12:1 */
.tm-biegi-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--ac-dark,var(--ac,var(--brand)));font:600 13px var(--f-ui);padding:9px 15px;border-radius:999px;text-decoration:none;box-shadow:0 6px 16px -8px rgba(0,0,0,.45);transition:background .2s}
.tm-biegi-btn span{transition:transform .2s}
.tm-biegi-btn:hover{background:var(--band)}
.tm-biegi-btn:hover span{transform:translateX(3px)}
/* lista najblizszych biegow - wiersz jak "Warto przeczytac" w sidebarze (.tm-sart), tylko
   z kwadratowa miniatura 64px (plik s/{id}.jpg ma 100x100, wiec bez rozmycia) i data
   w kolorze sekcji nad nazwa - data jest tu informacja pierwszego rzedu, nie meta */
.tm-biegi-lh{margin:0;font:600 12px var(--f-lab);letter-spacing:.14em;text-transform:uppercase;color:var(--dark);padding-bottom:6px;border-bottom:2px solid var(--ac,var(--brand))}
.tm-biegi-i{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none}
.tm-biegi-i:last-child{border-bottom:0;padding-bottom:2px}
.tm-biegi-th{flex:none;width:64px;height:64px;border-radius:6px;overflow:hidden;background:var(--band)}
.tm-biegi-th img{display:block;width:100%;height:100%;object-fit:cover}
.tm-biegi-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.tm-biegi-d{font:600 11px var(--f-lab);letter-spacing:.1em;text-transform:uppercase;color:var(--ac-dark,var(--ac,var(--brand)))}
.tm-biegi-t{font-size:13.5px;font-weight:500;line-height:1.3;color:#242a34}
.tm-biegi-i:hover .tm-biegi-t{color:var(--ac-dark,var(--ac,var(--brand)))}
.tm-biegi-m{font-size:12px;line-height:1.35;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* etykieta stanu zapisow - pigulka; wariant "otwarte" w tincie sekcji, reszta neutralna */
.tm-biegi-s{align-self:flex-start;margin-top:2px;font:600 9.5px/1 var(--f-lab);letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--band);color:var(--txt-2)}
.tm-biegi-sOn{background:rgba(63,145,66,.14);color:var(--ac-dark,var(--ac,var(--brand)))}
.tm-biegi-pusto{margin:0;font-size:13px;line-height:1.45;color:var(--txt-2)}

/* --- G. MOTO / TECH: dwa rzedy kafli + gesta 3-kolumnowa lista tekstowa --- */
.tm-gE{display:grid;grid-template-columns:1.3fr 1.7fr;gap:16px;align-items:start}
.tm-gEm{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm-txtcols{columns:3;column-gap:26px;margin-top:14px;padding-top:12px;border-top:2px solid var(--ac,var(--brand))}
.tm-txtcols .tm-sitem{break-inside:avoid}
@media(max-width:1100px){.tm-txtcols{columns:2}}
@media(max-width:880px){.tm-gE{grid-template-columns:1fr}.tm-txtcols{columns:1}}

/* ===== WARSTWA D - SEO I DOSTEPNOSC =====
   Blok celowo na koncu pliku: warstwy A/B/C edytuja gorne partie arkusza, wiec trzymanie
   regul dostepnosciowych osobno ogranicza konflikty przy rownoleglej pracy na main.
   UWAGA: .tm-sec, .tm-nofoto i .tm-nofoto::before sa juz w arkuszu (warstwy C1 i B2)
   i celowo NIE sa tu powtarzane - powtorzenie nadpisaloby dzialajace reguly. */

/* naglowek boxu "Skrot wydarzen" zamieniony z <div> na <h2> - zdejmij margines UA */
.tm-skroth{margin:0}

/* metryczka na kaflu z tytulem na zdjeciu - token zamiast rgba(255,255,255,.66) z makiety
   (.66 daje 3,55:1 nad bialym zdjeciem, czyli ponizej AA; --oc-meta ma .85 = 4,69:1) */
.tm-oc .tm-meta{color:var(--oc-meta)}

/* fokus klawiaturowy na kaflach - widoczny obrys takze na ciemnym/kolorowym tle */
.tm-oc:focus-visible,.tm-nofoto:focus-visible{outline:3px solid #fff;outline-offset:-3px;
  box-shadow:0 0 0 5px rgba(6,8,12,.55)}

/* ==========================================================================
   CELE DOTYKOWE (WCAG 2.5.8 Target Size Minimum - 24x24 px)
   Pomiar wyjsciowy przy 390x844 (getBoundingClientRect, bez elementow inert
   i ukrytych): /polska 22 elementy ponizej progu, Grudziadz 24. Najgorsze
   grupy: ticker 14 px, stopka 17 px, chipy sidebara 18,8 px, pas lokalny
   12-19,5 px. Na desktopie 1440x900 dochodzi 8-11 linkow "wiecej" (15,5 px)
   i pasek gorny (18,8-21,5 px) - tam blok max-width:880px nie dziala.

   Uzyte sa DWIE techniki i obie sa neutralne dla ukladu:
   1. Element INLINE (linki tickera i stopki): sam padding pionowy. Padding
      elementu inline powieksza jego prostokat trafienia, ale nie wchodzi do
      line-boxa, wiec ani pasek tickera, ani stopka nie robia sie wyzsze.
   2. Element blokowy / pozycja flexa (chipy, "wiecej", naglowki modulow):
      padding pionowy + UJEMNY margines tej samej wartosci. Prostokat rosnie,
      a wklad elementu w wysokosc rodzica zostaje dokladnie taki jak byl.

   Swiadomie pominiety: input.tm-menucb (1x1 px). To ukryty checkbox sterujacy
   menu CSS-only - nie jest celem dotykowym, dotyka sie <label class="tm-burger">
   o wymiarach 44x44 px. Powiekszenie samego checkboxa wysunelo by go na ekran.
   ========================================================================== */

/* --- ticker: 14 px (telefon) / 17 px (desktop) -> 26 / 29 px.
   Wnetrze paska ma 28 px na telefonie i 36 px na desktopie, wiec powiekszone
   pole miesci sie w .tm-tick-belt i nie jest przycinane przez overflow:hidden. */
.tm-tick-belt a{padding-top:6px;padding-bottom:6px}

/* --- stopka: 17 px -> 25 px. Linki stoja w zdaniu rozdzielone znakiem "|",
   wiec padding pionowy jest jedyna technika, ktora nie rozbija tego wiersza. */
.tm-footer a{padding-top:4px;padding-bottom:4px}

/* --- sidebar pogodowy /polska: ekstrema temperatur i link do prognozy.
   .tm-pglink ma wlasny margin-top:9px, wiec gorny margines jest pomniejszony
   o padding zamiast wyzerowany - odstep od boxu zostaje taki sam. */
.tm-pgext a{padding-top:3px;padding-bottom:3px;margin-top:-3px;margin-bottom:-3px}
.tm-pglink{padding-top:3px;padding-bottom:3px;margin-top:6px;margin-bottom:-3px}

/* --- pas lokalny: "wszystkie wiadomosci" w naglowku pasa (19,5 -> 25,5 px)
   i linki w naglowkach modulow pogoda/powietrze/wydarzenia (12-15 -> 24-27 px).
   .tm-locmh jest flexem z align-items:baseline - ujemne marginesy nie ruszaja
   linii bazowej, wiec tekst zostaje dokladnie tam, gdzie byl. */
.tm-locmore{padding-top:3px;padding-bottom:3px;margin-top:-3px;margin-bottom:-3px}
.tm-locmh a{padding-top:6px;padding-bottom:6px;margin-top:-6px;margin-bottom:-6px}

@media(min-width:881px){
 /* Ponizej 881 px te trzy elementy sa juz spadowane w bloku max-width:880px
    (linie 434-451), wiec regula celuje wylacznie w desktop.
    .tm-morel stoi w .tm-shead z align-items:flex-end - dlatego padding dolny
    jest o 3 px wiekszy od gornego: to odtwarza dotychczasowe padding-bottom:3px
    i kreska sekcji zostaje przyklejona do tekstu tak jak przed zmiana. */
 .tm-morel{padding-top:6px;padding-bottom:9px;margin-top:-6px;margin-bottom:-6px}
 .tm-top .tm-chip{padding-top:3px;padding-bottom:3px;margin-top:-3px;margin-bottom:-3px}
 /* .tm-city to <button> - ma domyslny padding UA 1px/6px, wiec ujemny margines
    jest o 1 px mniejszy z kazdej strony; inaczej przycisk oddawal te 2 px
    i pasek gorny robil sie o 2 px nizszy (pomiar: 215,4 -> 213,4 px). */
 .tm-city{padding-top:5px;padding-bottom:5px;margin-top:-4px;margin-bottom:-4px}
}

@media(max-width:700px){
 /* Stopka na telefonie: powiekszone pola trafienia sasiednich WIERSZY tego
    samego akapitu nachodzilyby na siebie (linia ma 19,5 px, pole 25 px).
    Interlinia 2,0 daje 26 px odstepu, czyli pola stykaja sie, ale nie zachodza.
    Koszt: stopka rosnie z 274 na 300 px - stoi na samym koncu dokumentu,
    wiec nie zabiera miejsca zadnej tresci. */
 .tm-footcols{line-height:2}
}

/* ===== PANEL UZYTKOWNIKA (/user, pomysl #322) =====
   Kafelki uslug dostepnych po zalogowaniu. Panel wygladal wczesniej jak z 2013 roku: pas
   320 px z tlem /usr/bgProfil.jpg, awatar 200x200 pozycjonowany inline stylami i sekcja
   statystyk artykulow bez zrodla danych - ani jednej klasy theme/3 w srodku karty, calosc
   na warstwie zgodnosci compat.css.
   Karty liczbowe u gory to gotowe .tm-qcard z /notowania (te same tokeny, ten sam hover),
   wiec tutaj sa tylko kafelki opisowe: tytul, zdanie wyjasnienia i wezwanie na dole. */
.tm-ulead{color:var(--txt-2);font-size:14.5px;margin:0 0 22px;max-width:680px}
.tm-udot{color:var(--txt-3);margin:0 4px}
.tm-ugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 10px}
.tm-ugrid2{grid-template-columns:repeat(2,1fr)}
/* wysokosc rowna w rzedzie: wezwanie ("Otworz") ma stac na dole kazdego kafelka niezaleznie
   od dlugosci opisu, stad flex + margin-top:auto na .tm-ucm zamiast stalej wysokosci */
.tm-ucard{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--card-sh);padding:17px 19px 15px;color:inherit;text-decoration:none;transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
a.tm-ucard:hover{border-color:var(--brand);box-shadow:var(--card-sh-h);transform:translateY(-2px)}
.tm-uct{font:600 16px var(--f-ui);color:var(--txt);line-height:1.25}
.tm-ucd{font-size:13.5px;color:var(--txt-2);line-height:1.5}
.tm-ucm{margin-top:auto;padding-top:9px;font:600 12px var(--f-lab);letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.tm-ucm::after{content:" \2192"}
/* kafelek uslugi dla firm - dwa w rzedzie, wiec opis jest dluzszy i moze oddychac */
.tm-ucbig{padding:20px 22px 18px}
.tm-ucbig .tm-uct{font-size:18px}
@media(max-width:1000px){.tm-ugrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tm-ugrid,.tm-ugrid2{grid-template-columns:1fr}}

/* ===== STRONY DZIALOW (/biznes, /sport, ..., pomysl #321) =====
   Dzial przestal byc lista tytulow z naglowkiem "Artykuly: X", a stal sie podstrona zbudowana
   z tych samych klockow co sekcje strony glownej: material otwierajacy .tm-oc-c, dwa kafle
   obok i siatka .tm-minis pod spodem. Kolor dzialu wchodzi jako --ac/--ac-dark na wrapperze
   .tm-dz (ustawiane inline przez szablon) i splywa do .tm-kat, .tm-nofoto oraz kreski przy h1
   - dokladnie tak, jak w sekcjach indexPolska.tpl. Zadna z regul ponizej nie ustawia --ac-dark
   globalnie: lancuch var(--ac-dark,var(--ac,var(--brand))) w .tm-nofoto musi zachowac fallback. */
.tm-dzbc{margin:0 0 10px}
.tm-dzbcs{margin:0 5px;color:var(--txt-3)}
.tm-dzh{margin:0 0 20px}
/* h1 dzialu: ten sam wzor co .tm-h1k (kreska z lewej), tylko w kolorze dzialu zamiast --brand */
.tm-dzt{font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.015em;color:var(--txt-h);margin:0 0 9px;border-left:5px solid var(--ac,var(--brand));padding-left:18px;margin-left:-23px}
.tm-dzl{color:var(--txt-2);font-size:15px;line-height:1.5;margin:0;max-width:720px}
/* pasek kursow walut pod leadem dzialu Biznes - ten sam widget co w naglowku sekcji na SG.
   Odsylacz do /notowania na koncu paska: po zdjeciu sekcji "Rynek w liczbach" pasek zostal
   jedynym miejscem z kursami w kolumnie tresci i bez linku byl slepa uliczka. */
.tm-dznot{margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
/* Bazowe .tm-nbp ma white-space:nowrap i nie zawija sie - w belce SG stoi w jednym rzedzie
   i tak ma byc. Tutaj w pasku sa dwie grupy (4 waluty + 3 surowce z jednostkami), wiec na
   waskim ekranie musza miec prawo zlamac sie na kolejne wiersze, inaczej wyjda poza ekran. */
.tm-dznot .tm-nbp{flex-wrap:wrap;gap:6px 14px}
/* jednostka przy cenie surowca - wyciszona, bo niesie mniej niz sama liczba i kierunek zmiany */
.tm-nbpj{color:var(--txt-3);font-size:11px}
.tm-dznotL{font:600 11.5px var(--f-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--ac,var(--brand));text-decoration:none;white-space:nowrap}
.tm-dznotL:hover{text-decoration:underline}

/* material otwierajacy: duza karta 16/9 + kolumna dwoch kafli. Szerokosc prawej kolumny (272px)
   dobrana tak, zeby dwa kafle z odstepem mialy wysokosc zblizona do karty - stad tez zdjecie
   aspect-ratio:auto na kaflach w tej kolumnie: maja wypelnic wysokosc karty, a nie narzucac wlasna. */
.tm-dzlead{display:grid;grid-template-columns:1fr 272px;gap:14px;margin:0 0 14px}
.tm-dzside2{display:grid;grid-template-rows:1fr 1fr;gap:14px;min-width:0}
.tm-dzside2 .tm-oc-m{aspect-ratio:auto}
.tm-dzbig .tm-oct{font-size:25px}
.tm-dzgrid{margin:0 0 8px}
/* .tm-dzgridP: trzy kafle w rzedzie zamiast czterech (kafel ma wiecej oddechu na liscie bez
   hierarchii). Dwa uzycia w start.tpl: siatka "Najnowsze w dziale" na stronie 1 (decyzja
   2026-09-05) oraz strony 2+, gdzie do tego dochodzi wiecej pozycji naraz (ext/dzial.php,
   ILOSC_KOLEJNE) - tam to czysta chronologia bez materialu otwierajacego. Bezpieczne wobec
   pulapki specyficznosci z .tm-dzsecW/.tm-minis (patrz komentarz przy .tm-dzminis5): to
   POJEDYNCZA klasa, wiec o kolejnosci decyduje sama pozycja w arkuszu - stoi po bazowej
   .tm-minis, wiec wygrywa. */
.tm-dzgridP{grid-template-columns:repeat(3,1fr)}

/* Reguly chipow tematow (.tm-dzchips/.tm-dzchip/.tm-dzchipn) usuniete razem z paskiem pigulek
   pod naglowkiem - decyzja z 2026-09-04. Te same kategorie stoja nizej pelnymi sekcjami
   z kaflami, wiec pasek dublowal strukture strony, nic nie wnoszac. Razem z nim zdjete
   scroll-behavior:smooth (bylo wylacznie dla skokow z chipow). */

/* sekcja tematyczna dzialu - naglowek .tm-shead jest ten sam co w sekcjach strony glownej.
   scroll-margin-top zostaje mimo zdjecia chipow: sekcje maja id, wiec mozna do nich trafic
   linkiem z zewnatrz, a bez zapasu belka sticky (#tmStick) zaslonilaby naglowek. */
.tm-dzsec{margin:26px 0 0;scroll-margin-top:86px}
.tm-dzsh{margin-bottom:14px}
/* siatka sekcji tematycznej: pelna szerokosc kontenera, wiec piec kafli zamiast czterech
   (.tm-minis ma repeat(4,1fr) pod kolumne tresci 964 px) */
.tm-dzminis5{grid-template-columns:repeat(5,1fr)}
.tm-dzile{font:600 11.5px var(--f-lab);letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}

/* DRUGI blok dwukolumnowy: od trzeciej sekcji tematycznej w dol tresc wraca do weszej kolumny,
   a obok staje kolumna z reklama B1, ktora jedzie z czytelnikiem az do konca bloku. Pierwsza
   sekcja w tej kolumnie nie dokłada juz swojego marginesu - odstep daje sam blok, inaczej
   przerwa przed "Rynkiem pracy" bylaby dwa razy wieksza niz miedzy pozostalymi sekcjami.
   Ta sama klasa (.tm-dzcols2) sluzy tez stronom 2+ dzialu (start.tpl): tam drugi blok nie
   powstaje z grup, tylko z drugiej polowy siatki .tm-dzgridP - B1 w sidebarze "od pewnego
   miejsca" zamiast poziomego bloku w srodku listy (decyzja z 2026-09-04). */
.tm-dzcols2{margin-top:26px}
.tm-dzcols2 .tm-dzsec:first-child{margin-top:0}
/* Sekcje w tej kolumnie NIE dostaja .tm-dzminis5 - zostaja przy bazowej .tm-minis, ktora ma
   cztery kolumny i wlasny prog 880 px (dwie kolumny na telefonie). Wlasna regula na czworke
   bylaby tu bledem: ".tm-dzsecW .tm-minis" ma wyzsza specyficznosc niz ".tm-minis" w media
   query, wiec wygralaby takze na telefonie i kafle mialyby po 75 px szerokosci.
   Szablon wysyla do tych sekcji osiem kafli (dwa pelne rzedy po cztery) zamiast dziesieciu
   pobranych (ext/dzial.php, ILOSC_GRUPA) - decyzja 2026-09-05. */

/* Na stronie dzialu nie ma juz ani sekcji "Rynek w liczbach" (.tm-qcta*, .tm-dzsrc), ani boksu
   surowcow w sidebarze (.tm-dzsur) - komplet notowan stoi w pasku pod leadem, w jednej linii
   z walutami, a pelne wykresy na /notowania (decyzja z 2026-09-04). Usuniete stad reguly
   dotyczyly wylacznie tych dwoch. .tm-qgrid4 i .tm-surtile ZOSTAJA nietkniete - korzystaja
   z nich /notowania, modul mojeArtykuly i kafelek surowcow na stronie glownej. */

/* Reklama B1 przeniesiona z sidebara miedzy sekcje tematyczne. Rezerwacja wysokosci (min-height
   pod najnizsza realna kreacje) jest tu wazniejsza niz w kolumnie bocznej: blok stoi w srodku
   strumienia tresci, wiec kreacja doladowana asynchronicznie przesuwalaby cala reszte strony. */
.tm-dzrek{display:flex;justify-content:center;align-items:center;min-height:106px;margin:26px 0 0}
.tm-dzrek:empty{display:none}

/* paginacja - pigulki jak przelacznik zakresu w /notowania (.tm-zakresB), zeby portal nie mial
   dwoch roznych jezykow dla tego samego gestu */
.tm-dzpag{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:22px 0 8px}
.tm-dzpa{display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font:600 13px var(--f-lab);color:var(--txt-2);text-decoration:none;transition:border-color .2s,color .2s,background .2s}
a.tm-dzpa:hover{border-color:var(--ac,var(--brand));color:var(--ac,var(--brand))}
.tm-dzpaOn{background:var(--ac,var(--brand));border-color:var(--ac,var(--brand));color:#fff}
.tm-dzpaP,.tm-dzpaN{font-family:var(--f-ui);font-size:12.5px}
.tm-dzinfo{font-size:12.5px;color:var(--txt-3);margin:0 0 26px}
.tm-dzpusto{padding:34px;text-align:center;color:var(--txt-2)}

/* Wlasne progi dla .tm-dzminis5: regula bazowa stoi na koncu arkusza, wiec wygralaby
   z breakpointami .tm-minis z linii ~1443 (ta sama specyficznosc, decyduje kolejnosc)
   i piec kolumn zostaloby az do telefonu. */
@media(max-width:1200px){.tm-dzminis5{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.tm-dzminis5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:880px){.tm-dzminis5{grid-template-columns:repeat(2,1fr)}}
/* .tm-dzgridP schodzi do dwoch kolumn razem z bazowa .tm-minis (telefon, sidebar juz pod
   trescia) - trzy waskie kafle w rzedzie na 390 px bylyby nieczytelne */
@media(max-width:880px){.tm-dzgridP{grid-template-columns:repeat(2,1fr)}}

@media(max-width:880px){
 /* Na waskim ekranie material otwierajacy idzie sam, a dwa kafle spod niego ustawiaja sie
    w dwie kolumny - tak samo jak .tm-minis nizej. Gdyby zostaly jedna kolumna, mielibysmy
    trzy kafle pelnej szerokosci z rzedu, a potem nagle siatke 2x - schodek bez uzasadnienia. */
 .tm-dzlead{grid-template-columns:1fr}
 .tm-dzside2{grid-template-rows:auto;grid-template-columns:repeat(2,1fr)}
 .tm-dzside2 .tm-oc-m{aspect-ratio:3/2}
 .tm-dzt{font-size:26px;margin-left:0;padding-left:14px}
 /* tytul na materiale otwierajacym: 25 px zajmowalo na telefonie polowe zdjecia i i tak
    bylo ucinane wielokropkiem */
 .tm-dzbig .tm-oct{font-size:19px}
 /* .tm-nbp jest flexem bez zawijania (pasek w belce sekcji na SG) - tutaj stoi samodzielnie
    pod leadem, wiec czwarta waluta musi miec gdzie zejsc zamiast wyjechac poza ekran */
 .tm-dznot .tm-nbp{flex-wrap:wrap;gap:9px 14px}
}

/* =====================================================================================
   MODUŁ ZAPISY (pomysł #310) - lista na /zapisy i karta biegu /zapisy/bieg/{id}-{slug}
   =====================================================================================
   Blok stoi na KOŃCU arkusza świadomie: reguły .tm-zap* przyszły tu 2026-09-05 z
   <style> wewnątrz smarty/templates/ext/zapisy/info.tpl, gdzie siedziały tymczasowo
   ("do przeniesienia do css.css przy najbliższej okazji" - nagłówek tego szablonu).
   Okazją była przebudowa karty biegu: karta MUSI mówić tym samym językiem co kafel, z
   którego się na nią wchodzi, a nie mogła, dopóki klasy były zamknięte w innym szablonie.

   AKCENT KARTY TO --brand (czerwień marki), nie zieleń Sportu. Powód: kafel na /zapisy
   (.tm-zap-d w infoKarta.tpl) jest czerwony, a karta jest jego celem - jedno i drugie
   musi się zgadzać. Przełączenie CAŁEGO modułu na kolor sekcji Sport (--sec-sport /
   --ac-dark-sport) jest osobną decyzją projektową: wtedy trzeba zmienić kafel, boks
   "Biegi", kreskę .tm-h1k i tę sekcję razem, a nie samą kartę.

   Kontrast: etykiety i teksty pomocnicze idą na var(--txt-2) (#626b79 = 5,9:1 na bieli).
   Zabroniony jest tu #aaa z klas legacy (.cSzary w compat.css) - 2,32:1, poniżej AA.
   ===================================================================================== */

/* --- A. LISTA ZAWODÓW na /zapisy (przeniesione z info.tpl, bez zmian wizualnych) --- */
.tm-zap-list{display:grid;gap:12px;margin:0 0 26px}
.tm-zap{display:grid;grid-template-columns:120px 1fr;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--card-sh);padding:14px}
.tm-zap-ph{display:block;width:120px;height:120px;border-radius:10px;overflow:hidden;background:var(--band)}
.tm-zap-ph img{width:100%;height:100%;object-fit:cover;display:block}
.tm-zap-nofoto{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--brand);font:600 13px/1 var(--f-lab);letter-spacing:.08em;text-transform:uppercase}
.tm-zap-nofoto b{display:block;font:700 40px/1 var(--f-ui);letter-spacing:-.02em;margin-bottom:4px}
.tm-zap-b{display:flex;flex-direction:column;gap:6px;min-width:0}
.tm-zap-d{font:600 12px var(--f-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.tm-zap-t{margin:0;font:700 18px/1.25 var(--f-ui)}
.tm-zap-t a{color:var(--txt-h)}
.tm-zap-m{font-size:13.5px;color:var(--txt-2);line-height:1.45}
.tm-zap-city{display:block;font-size:12.5px}
.tm-zap-act{margin-top:auto;padding-top:6px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tm-zap-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px}
.tm-zap-step{padding:14px 16px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:var(--txt-2);line-height:1.5}
.tm-zap-step b{display:block;color:var(--txt);font-size:15px;margin-bottom:4px}
.tm-zap-org{margin-top:8px;padding:18px 20px;border-radius:12px;background:var(--band)}
.tm-zap-org h2{margin:0 0 8px;font-size:18px}
.tm-zap-org p{margin:0 0 12px;font-size:14px;color:var(--txt-2);line-height:1.5}

/* --- B. PIGUŁKI STANU ZAPISÓW - wspólne dla listy i karty ---
   Jedno słownictwo w całym module: "zapisy otwarte" zielono, "brak wolnych miejsc"
   czerwono, każdy inny stan neutralnie. Teksty daje ZapisyZawodyRepo::etykietaStatusu(),
   więc szablon nigdy nie wymyśla własnych. Kolor NIE jest jedynym nośnikiem informacji -
   treść pigułki mówi to samo słowami (WCAG 1.4.1). */
.tm-zap-s{display:inline-block;padding:3px 10px;border-radius:999px;font:600 12px var(--f-lab);background:var(--band);color:var(--txt-2)}
.tm-zap-sOn{background:#e6f4ea;color:#1e7b34}
.tm-zap-sFull{background:#fdecec;color:#b3261e}

/* --- C. KARTA BIEGU (bieg.tpl) --- */
/* hero: plakat po lewej, wszystko, po co użytkownik przyszedł, po prawej. Do 2026-09-05
   zdjęcie 280x280 wisiało samo nad metryczką, a obok niego stało pół kolumny pustki. */
.tm-zapk-hero{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start;margin:0 0 22px}
.tm-zapk-foto{display:block;width:280px;border-radius:10px;overflow:hidden;background:var(--band)}
.tm-zapk-foto img{display:block;width:100%;height:auto}
.tm-zapk-hb{display:flex;flex-direction:column;gap:10px;min-width:0}
/* data jest tu informacją pierwszego rzędu, nie metryczką - ten sam wygląd co .tm-zap-d
   na kaflu listy, żeby przejście z listy na kartę nie wyglądało jak zmiana serwisu */
.tm-zapk-data{font:600 12.5px var(--f-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
/* własny h1 karty zamiast .tm-h1k: kreska z lewej i ujemny margines .tm-h1k są zrobione
   pod nagłówek stojący bezpośrednio w .tm-pagecard, a tutaj h1 siedzi w prawej kolumnie
   siatki hero - kreska wjeżdżałaby na zdjęcie */
.tm-zapk-h1{margin:0;font:700 30px/1.16 var(--f-ui);letter-spacing:-.01em;color:var(--txt-h);text-wrap:balance}
.tm-zapk-meta{font-size:14.5px;color:var(--txt-2);line-height:1.45}
.tm-zapk-meta b{color:var(--txt);font-weight:600}
.tm-zapk-stan{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* "start bezpłatny" - argument sprzedażowy usługi, którego karta dotąd nie wypowiadała */
.tm-zapk-free{display:inline-block;padding:3px 10px;border-radius:999px;font:600 12px var(--f-lab);background:#eef4fa;color:#15588c}
/* pasek akcji: przycisk zapisu MUSI być tutaj, w pierwszym ekranie. Wcześniej stał pod
   tabelą dystansów, około 2,5 ekranu telefonu od nagłówka */
.tm-zapk-cta{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:4px}
.tm-zapk-btn{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,#e04b56,var(--brand));color:#fff;font:600 14px var(--f-ui);padding:11px 20px;border-radius:999px;border:0;box-shadow:0 6px 16px -6px rgba(212,62,73,.55);cursor:pointer}
.tm-zapk-btn:hover{background:var(--brand-h)}
/* wariant nieaktywny: SZARY, nie niebieski. Wyłączony .btn-primary z compat.css wyglądał
   jak aktywny przycisk w kolorze sekcji Biznes i zapraszał do klikania */
.tm-zapk-btn[disabled]{background:var(--band);color:var(--txt-3);box-shadow:none;cursor:not-allowed}
/* wyjaśnienie stoi obok przycisku, dopóki się mieści, i schodzi pod niego przy węższej
   kolumnie (flex-wrap na .tm-zapk-cta). max-width trzyma wiersz w czytelnej mierze */
.tm-zapk-why{font-size:13.5px;color:var(--txt-2);line-height:1.4;max-width:56ch}
.tm-zapk-lnk{font-size:13.5px;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.tm-zapk-lnk:hover{color:var(--brand-h)}

/* zakładki podstron biegu - karta / lista startowa / wyniki. Dotąd te przejścia siedziały
   drobnym drukiem w OSTATNIEJ kolumnie tabeli dystansów, gdzie nikt ich nie szukał */
.tm-zapk-tabs{display:flex;flex-wrap:wrap;gap:0 22px;margin:0 0 22px;border-bottom:2px solid var(--line)}
.tm-zapk-tabs a,.tm-zapk-tabs span{display:inline-block;padding:9px 2px;font:600 13.5px var(--f-ui);color:var(--txt-2);border-bottom:2px solid transparent;margin-bottom:-2px}
.tm-zapk-tabs a:hover{color:var(--brand)}
.tm-zapk-tabs [aria-current]{color:var(--txt-h);border-bottom-color:var(--brand)}

/* fakty jako lista definicyjna: etykieta ma swoją kolumnę, więc wartości są wyrównane -
   w szarej ramce legacy etykieta i wartość leciały jednym ciągiem w wierszu */
.tm-zapk-f{display:grid;grid-template-columns:160px 1fr;gap:0;margin:0 0 22px;font-size:14.5px}
.tm-zapk-f dt{padding:9px 0;color:var(--txt-2);border-top:1px solid var(--line)}
.tm-zapk-f dd{margin:0;padding:9px 0;color:var(--txt);border-top:1px solid var(--line);min-width:0;overflow-wrap:break-word}
/* pierwszy wiersz bez kreski: stoi tuz pod kreska naglowka .tm-notH2 i dawal podwojna linie */
.tm-zapk-f dt:first-of-type,.tm-zapk-f dd:first-of-type{border-top:0}
.tm-zapk-f dd a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}

/* opis organizatora - 68ch, bo na pełnej szerokości karty wiersz miał ponad 120 znaków */
.tm-zapk-opis{font-size:15px;line-height:1.62;color:var(--txt);max-width:68ch;margin:0 0 22px}

/* dystanse jako kafle, nie tabela: tabela z pięcioma kolumnami na telefonie uciekała
   poza ekran razem z akcjami, a wiersz i tak opisuje JEDEN obiekt - to karta, nie dane */
.tm-zapk-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,380px));justify-content:start;gap:14px;margin:0 0 22px}
.tm-zapk-d{display:flex;flex-direction:column;gap:8px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.tm-zapk-dh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tm-zapk-dn{font:600 15.5px/1.25 var(--f-ui);color:var(--txt-h);min-width:0}
.tm-zapk-dkm{flex:none;font:600 13px var(--f-lab);letter-spacing:.04em;color:var(--brand)}
.tm-zapk-dm{font-size:13px;color:var(--txt-2);line-height:1.45}
/* pasek obsadzenia limitu - sam nigdy nie niesie informacji, liczby stoją obok słowami */
.tm-zapk-bar{height:6px;border-radius:999px;background:var(--band);overflow:hidden}
.tm-zapk-bar span{display:block;height:100%;background:var(--ok);border-radius:999px}
.tm-zapk-barFull span{background:#b3261e}
.tm-zapk-do{margin:0;font-size:13.5px;line-height:1.5;color:var(--txt-2)}
.tm-zapk-dk{margin:0;font-size:12.5px;line-height:1.45;color:var(--txt-3)}
.tm-zapk-dk b{color:var(--txt-2);font-weight:600}
.tm-zapk-da{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px}
.tm-zapk-da a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.tm-zapk-dbtn{display:inline-flex;align-items:center;background:var(--brand);color:#fff!important;font:600 12.5px var(--f-ui);padding:7px 14px;border-radius:999px;text-decoration:none!important}
.tm-zapk-dbtn:hover{background:var(--brand-h)}

/* podpis tabeli - NIE .cSzary z compat.css (#aaa, 2,32:1, poniżej AA) */
.tm-zapk-cap{caption-side:top;text-align:left;padding:0 0 8px;font-size:13px;color:var(--txt-2)}

/* komunikat błędu karty w języku motywu - .alert-warning z compat.css to obcy wtręt */
.tm-zapk-alert{background:#f7ecd3;border-left:4px solid #e5a100;border-radius:6px;padding:12px 16px;margin:0 0 16px;font-size:14px;color:#6b4d10}
.tm-zapk-back{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px}
.tm-zapk-back a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}

@media(max-width:760px){
 .tm-zapk-hero{grid-template-columns:1fr;gap:16px}
 /* plakat na telefonie: 200 px zamiast 280 px i wyśrodkowany - pełna szerokość ekranu
    zjadałaby pierwszy ekran, na którym ma być data, nazwa i przycisk zapisu */
 .tm-zapk-foto{width:200px;margin:0 auto}
 .tm-zapk-h1{font-size:23px}
 .tm-zapk-f{grid-template-columns:1fr;gap:0}
 .tm-zapk-f dt{padding:9px 0 0;border-top:1px solid var(--line);font-size:12.5px}
 .tm-zapk-f dd{padding:2px 0 9px;border-top:0}
 .tm-zapk-dl{grid-template-columns:1fr}
 .tm-zap-steps{grid-template-columns:1fr}
 .tm-zap{grid-template-columns:88px 1fr;gap:12px}
 .tm-zap-ph{width:88px;height:88px}
 .tm-zap-nofoto b{font-size:30px}
}

/* --- D. GOŁE <a> W TREŚCI PODSTRONY ---
   Reset arkusza (a{color:inherit;text-decoration:none}, początek pliku) sprawia, że
   odnośnik bez klasy jest nieodróżnialny od tekstu. Na kartach podstron to komplet
   nawigacji krzyżowej, więc przywracamy wygląd odnośnika jak w treści artykułu
   (.tm-artcard .txt232 a). :has(img) wyłącza linki opakowujące SAMĄ grafikę - miniatura
   plakatu, awatary na /profil, oferta na /reklama - bo podkreślenie rysowałoby się
   kreską pod obrazkiem. Przeglądarka bez :has() pomija całą regułę, czyli zostaje
   dzisiejszy stan; :has() jest już w tym arkuszu używane wyżej.

   ZAKRES zawężony do TEKSTU BIEŻĄCEGO (p, li, dd, td), a nie do całej karty: nagłówki
   kart mają własny, celowo ciemny kolor odnośnika (.tm-zap-t a na liście /zapisy),
   a reguła obejmująca całą kartę ma wyższą specyficzność i zamieniała tytuł kafla na
   czerwony podkreślony. Akcent w tym module należy do daty, nie do tytułu. */
.tm-pagecard :is(p,li,dd,td) a:not([class]):not(:has(img)){color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.tm-pagecard :is(p,li,dd,td) a:not([class]):not(:has(img)):hover{color:var(--brand-h)}


/* --- E. BOKS MODUŁU W SIDEBARZE PODSTRON /zapisy (NT3zapisyBiegiSide.tpl) ---
   Wariant boksu "Biegi" ze strony głównej miasta: te same klasy .tm-biegi*, ta sama
   szerokość kolumny (300 px - .tm-side i .tm-gC mają tu identyczny wymiar), więc panel
   zachęty i wiersze listy nie potrzebują ani jednej własnej reguły. Różnice są dwie
   i obie wynikają z tego, że w sidebarze /zapisy akcentem jest CZERWIEŃ MARKI, a nie
   zieleń sekcji Sport, którą boks dostaje inline na stronie głównej. */

/* Łańcuch var(--ac-dark,var(--ac,var(--brand))) w regułach .tm-biegi-* sięgnąłby po samo
   --brand (#d43e49), a biel na nim ma pod teksturą mniej niż wariant przygotowany do tego
   celu. --ac-dark-fakty to ten sam czerwony zmierzony pod biały tekst z teksturą: 4,88:1
   na płaskim tle i 4,50:1 pod JEDNĄ warstwą tekstury (tak liczy cała tabela --ac-dark-*
   w tym arkuszu, css.css:40-50). W prawym górnym narożniku panelu warstwy .tm-biegi-cta
   ::before nakładają się (paski + poświata, łączna alfa 1-(1-.06)^2 = .1164) i biel ma tam
   4,18:1 na 5,5% powierzchni - pomiar pikselowy 2026-09-05. Nie jest to skutek tej zmiany:
   zieleń już wdrożonego boksu na SG wypada w tym samym punkcie na 4,10:1. Domknięcie AA
   wymagałoby zejścia z --nofoto-tex do .03 dla całego wzorca, czyli osobnej decyzji
   o wyglądzie kafli typograficznych, nie łatki w tym bloku.
   Napis przycisku i data na bieli: 4,88:1. */
.tm-biegiSide{--ac-dark:var(--ac-dark-fakty)}
/* Miara wiersza. W kolumnie 300 px zbędna, ale poniżej 881 px .tm-side dostaje width:100%
   (css.css:103) i akapit zachęty szedłby przez całą szerokość treści - zmierzone 124 znaki
   w wierszu przy oknie 880 px. Blok C tego samego modułu trzyma prozę na 56-68ch, a boks
   stoi teraz na podstronie obok tak ograniczonej treści. */
.tm-biegiSide .tm-biegi-p{max-width:68ch}
/* Nazwa biegu jest treścią wpisaną przez organizatora: jeden ciąg bez spacji dłuższy niż
   kolumna rozpycha .tm-side (width:300px, flex:none) i daje poziomy pasek przewijania
   CAŁEJ strony. Skracanie w PHP (truncate:64) ogranicza długość, nie łamliwość. */
.tm-biegiSide .tm-biegi-t{overflow-wrap:anywhere}
/* Hover przycisku. Wariant z SG zmienia tło na --band (#f4f5f8), na którym czerwony napis
   ma 4,47:1, czyli tuż pod AA - w zielonym wariancie sekcji tego problemu nie ma (5,12:1).
   Czerwień dostaje więc jaśniejsze tło marki (--brand-bg) i ciemniejszy napis (--brand-h):
   zmierzone 5,40:1. */
.tm-biegiSide .tm-biegi-btn:hover{background:var(--brand-bg);color:var(--brand-h)}
/* Pigułka "zapisy otwarte" na SG jest tintem koloru sekcji (zielone tło + tekst w --ac-dark).
   Tutaj --ac-dark jest czerwone, więc bez tej reguły wyszedłby czerwony napis na zielonym
   tle. Kolory bierzemy z .tm-zap-sOn, czyli z tych samych pigułek, jakie moduł pokazuje
   w treści strony - jedno słownictwo i jeden kolor stanu w całym module. */
.tm-biegiSide .tm-biegi-sOn{background:#e6f4ea;color:#1e7b34}
/* Drugie wyjście z panelu zachęty: lista swoich zawodów u organizatora, status wniosku
   u pozostałych. Czysta biel bez przezroczystości - każde przyciemnienie zjada zapas
   kontrastu panelu (powód w komentarzu przy .tm-biegi-cta). */
.tm-biegiSide .tm-biegi-org{display:inline-block;margin-left:14px;color:#fff;font:600 12.5px var(--f-ui);text-decoration:underline;text-underline-offset:2px}
.tm-biegiSide .tm-biegi-org:hover{text-decoration:none}
/* "wszystkie" w nagłówku listy - tylko na karcie biegu, gdzie lista jest listą POZOSTAŁYCH
   zawodów; pojawia się dopiero przy dwóch aktywnych biegach, bo przy jednym lista jest po
   odsianiu pusta i cały boks .tm-w nie powstaje. .tm-wh jest flexem, więc margin-left:auto
   dosuwa odnośnik do prawej krawędzi; wielkie litery dziedziczy z nagłówka.
   Pełny łańcuch fallbacku (--ac-dark -> --ac -> --brand), a nie skrót do --brand: skrót
   działałby wbrew regule opisanej przy tabeli --ac-dark-* (css.css:32-38). */
.tm-biegiSide .tm-biegi-all{margin-left:auto;font:600 10.5px var(--f-lab);letter-spacing:.1em;color:var(--ac-dark,var(--ac,var(--brand)))}
.tm-biegiSide .tm-biegi-all:hover{text-decoration:underline}

/* --- F. FORMULARZ ZAPISU (/zapisy/bieg/{id}-{slug}/zapisz, biegZapisz.tpl) ---
   Przebudowa 2026-09-05. Formularz stał na klasach z compat.css (.form-control, .mb-3,
   .ramka, .padAA), czyli na warstwie zgodności z theme/1: 11 pól, każde w osobnym
   wierszu - imię, nazwisko, telefon, e-mail, dystans, klub i uwagi na pełną szerokość
   kolumny (835 px przy oknie 1280 px), a rocznik, płeć i koszulkę zwężały style inline
   wpisane w szablon. Granice między zawodnikami ginęły w rytmie pól - z odstępu nie było
   widać, gdzie kończy się jeden, a zaczyna drugi. Zmierzone w tej samej kolumnie i na tym
   samym arkuszu (stary układ odtworzony z jego własnych klas): wysokość formularza
   1504 -> 1053 px (-30%), blok jednego zawodnika 693 -> 271 px, wiersz pola 69 -> 60 px.

   Trzy decyzje układu, wszystkie na "mniej miejsca":
   1. pola parami w jednym wierszu (.tm-zapf-r) - sekcja zgłaszającego z 4 wierszy na 2
   2. pole ma rozmiar swojej treści, nie kolumny (.tm-zapf-rn: 130 px na rocznik)
   3. karta zawodnika ma pasek nagłówka z numerem (.tm-zapf-osh) - podział jest
      widoczny, a nie domyślany z odstępu

   AKCENT: --brand, jak cały moduł (powód w nagłówku tej sekcji). Kółka z numerami
   biorą --ac-dark-fakty, a nie samo --brand: biel na #d43e49 daje 4,29:1, a na #d23440
   4,88:1 (tabela --ac-dark-* w czubku arkusza) - w kółku 21 px tekst jest mały, więc
   AA obowiązuje w pełnej wysokości 4,5:1, nie w ulgowym progu dla dużego tekstu.
   Etykiety pól idą na --txt-2 (5,9:1), nigdy na .cSzary z compat.css (2,32:1). */
.tm-zapf{max-width:760px}
/* jedna linia "co się zapisuje" - termin, dystanse i "start bezpłatny" tym samym
   słownictwem co karta biegu, żeby po dystans nie trzeba było wracać na kartę */
.tm-zapf-what{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 10px;font-size:13.5px;color:var(--txt-2)}
.tm-zapf-what time{font:600 12.5px var(--f-lab);letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.tm-zapf-what b{color:var(--txt);font-weight:600}
.tm-zapf-lead{margin:0 0 18px;max-width:68ch;font-size:14px;line-height:1.5;color:var(--txt-2)}
.tm-zapf-lead b{color:var(--txt);font-weight:600}

.tm-zapf-sec{margin:0 0 24px}
/* nagłówek sekcji z numerem kroku: formularz ma trzy etapy (kto zgłasza, kogo zapisuje,
   na co się zgadza), a do 2026-09-05 były to gołe <h2> bez żadnej hierarchii */
.tm-zapf-sh{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);font:600 17px/1.25 var(--f-ui);color:var(--txt-h)}
.tm-zapf-nrs{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:999px;background:var(--ac-dark-fakty);color:#fff;font:700 13px/1 var(--f-ui)}

/* WIERSZ PÓL. Domyślnie dwie równe kolumny - imię|nazwisko, telefon|e-mail, klub|uwagi.
   minmax(0,1fr) zamiast 1fr, bo pole z długą wartością rozpycha domyślną kolumnę grida
   (min-content inputa to jego atrybut size, nie zero). */
.tm-zapf-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0 0 10px}
.tm-zapf-r1{grid-template-columns:minmax(0,1fr)}
/* rocznik + płeć. KOLEJNOŚĆ REGUŁ MA ZNACZENIE: .tm-zapf-rn stoi na elemencie razem
   z .tm-zapf-r i ma tę samą specyficzność, więc wygrywa tylko dlatego, że jest niżej
   w pliku. Przy przenoszeniu bloku nie rozdzielać tych dwóch reguł. */
.tm-zapf-rn{grid-template-columns:130px 200px}

.tm-zapf-fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.tm-zapf-lab{font:600 12.5px var(--f-lab);letter-spacing:.04em;color:var(--txt-2)}
/* dopiski "(opcjonalnie)", "(tu wyślemy link)" - <i> bez kursywy, słabszym kolorem */
.tm-zapf-lab i,.tm-zapf-zg i{font-style:normal;font-weight:400;color:var(--txt-3)}
/* POLE. Własny wygląd zamiast .form-control z compat.css (promień 4 px, obramowanie
   --line 1,3:1 wobec bieli - pola zlewały się z kartą). Obramowanie --hair, promień 9 px,
   wysokość 38 px. appearance:none zdejmuje też natywną strzałkę <select>, dlatego niżej
   jest własna (data URI) - bez niej select nie miałby żadnego sygnału rozwijania. */
.tm-zapf-in{display:block;width:100%;min-width:0;padding:9px 12px;font:400 15px/1.35 var(--f-ui);color:var(--txt);background:#fff;border:1px solid var(--hair);border-radius:9px;appearance:none;-webkit-appearance:none}
.tm-zapf-in:hover{border-color:var(--txt-3)}
/* :user-invalid, a NIE :invalid - to drugie maluje pole na czerwono od chwili wejścia
   na stronę (pole wymagane i puste jest nieprawidłowe od startu), czyli wita zawodnika
   formularzem w błędach, których jeszcze nie popełnił. Wariant z :placeholder-shown nie
   ratuje sprawy: bez atrybutu placeholder pseudoklasa nie dopasowuje się nigdy.
   Przeglądarka bez :user-invalid po prostu nie pokazuje tego stanu. */
/* fokus: obramowanie marki + poświata --brand-bg. Nie usuwać outline bez tego zamiennika -
   pierścień jest jedynym sygnałem fokusu dla nawigacji klawiaturą (WCAG 2.4.7). */
.tm-zapf-in:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
:user-invalid.tm-zapf-in{border-color:#c9756f}
select.tm-zapf-in{padding-right:32px;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23626b79' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
/* strzałki przewijania w polu rocznika są tu bezużyteczne (rok wpisuje się z klawiatury),
   a zabierają szerokość i zachęcają do klikania 110 razy */
.tm-zapf-in[type=number]{-moz-appearance:textfield}
.tm-zapf-in::-webkit-outer-spin-button,.tm-zapf-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* KARTA ZAWODNIKA. <fieldset> z paskiem nagłówka. Ukryta karta ma [hidden][disabled] -
   wyłączony fieldset nie wysyła swoich pól ani nie sprawdza na nich required (powód
   w nagłówku biegZapisz.tpl), więc [hidden] wystarczy tu na sam wygląd. */
.tm-zapf-os{position:relative;min-width:0;margin:0 0 12px;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
/* float:left + width:100% to jedyny pewny sposób, żeby <legend> zachował się jak zwykły
   blok wewnątrz fieldsetu we WSZYSTKICH przeglądarkach (samo display:flex na legendzie
   było w Chrome ignorowane latami). Pasek jest dlatego <span> w środku legendy, a nie
   samą legendą. Treść po legendzie płynie pod nią, bo float ma pełną szerokość. */
.tm-zapf-osl{float:left;width:100%;margin:0;padding:0}
.tm-zapf-osh{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--band);border-bottom:1px solid var(--line);font:600 12.5px var(--f-lab);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.tm-zapf-nr{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:999px;background:var(--ac-dark-fakty);color:#fff;font:700 12px/1 var(--f-ui);letter-spacing:0}
/* clear:both jest tu WARUNKIEM POPRAWNEGO UKŁADU, nie kosmetyką: floatowana legenda
   jest wyjęta z flow, więc pierwszy wiersz pól startuje na wysokości paska nagłówka
   i znika pod jego tłem. Zmierzone bez tej reguły: imię i nazwisko zawodnika stały
   pod paskiem "ZAWODNIK 1", a na ich miejscu było 40 px pustki. */
.tm-zapf-osb{clear:both;padding:14px 14px 4px}
/* "Usuń" stoi NAD paskiem nagłówka (position:absolute), a nie w legendzie: czytniki
   ekranu ogłaszają treść legendy przy KAŻDYM polu fieldsetu, więc słowo "Usuń"
   powtarzałoby się przy imieniu, nazwisku, roczniku i płci. */
.tm-zapf-del{position:absolute;top:6px;right:8px;padding:4px 10px;background:0 0;border:0;border-radius:8px;font:600 12px var(--f-ui);color:var(--txt-2);cursor:pointer}
.tm-zapf-del:hover{background:var(--brand-bg);color:var(--brand-h)}
.tm-zapf-del:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* DODAWANIE. Kreskowane obramowanie mówi "tu jeszcze nic nie ma" - przycisk nie jest
   akcją formularza (tą jest "Zapisz się" w kolorze marki), tylko rozwinięciem treści. */
.tm-zapf-more{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0}
/* [hidden] MUSI stać przy tej klasie: własne display:inline-flex bije regułę
   przeglądarki dla atrybutu hidden, więc bez tego przycisk "Dodaj zawodnika" zostawał
   widoczny przy komplecie zawodników i klikanie w niego nic nie dawało. */
.tm-zapf-add[hidden]{display:none}
.tm-zapf-add{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;background:#fff;border:1px dashed var(--hair);border-radius:999px;font:600 13.5px var(--f-ui);color:var(--brand);cursor:pointer}
.tm-zapf-add:hover{border-color:var(--brand);background:var(--brand-bg)}
.tm-zapf-cnt{font-size:12.5px;color:var(--txt-3)}
.tm-zapf-nojs{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--txt-2)}

/* ZGODY. Cztery oświadczenia w zwartej liście; siatka 18px/1fr trzyma drugą i dalszą
   linię tekstu w jednej kolumnie, a nie pod kwadratem checkboxa. */
.tm-zapf-zg{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tm-zapf-zg label{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;font-size:13.5px;line-height:1.45;color:var(--txt-2);cursor:pointer}
.tm-zapf-zg input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--brand)}

.tm-zapf-cap{margin:16px 0 0}
.tm-zapf-act{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
/* komunikat po PRG-redirekcie. Zamiast .alert-* z compat.css (obcy wtręt w motywie) -
   ten sam język co .tm-zapk-alert na karcie: kreska z lewej, własne tło, bez ramki. */
.tm-zapf-msg{margin:0 0 16px;padding:12px 16px;border-radius:6px;border-left:4px solid #1e7b34;background:#e6f4ea;font-size:14px;line-height:1.45;color:#1e5c2c}
.tm-zapf-msgErr{border-left-color:#b3261e;background:#fdecec;color:#8e1f18}

/* WALIDACJA - lista braków nad przyciskiem "Zapisz się" (skrypt w biegZapisz.tpl).
   Ton NEUTRALNY, nie alarmowy: na świeżym formularzu brakuje wszystkiego, a czerwone
   pudło na wejściu czytałoby się jak błąd, którego użytkownik jeszcze nie popełnił.
   Czerwień zostaje dla :user-invalid na polu, które ktoś już ruszył, i dla komunikatu
   z serwera (.tm-zapf-msgErr). Dwie kolumny, bo lista ma po pierwszym wpisie kilkanaście
   krótkich pozycji i w jednej kolumnie odsuwałaby przycisk o pół ekranu. */
.tm-zapf-req{margin:20px 0 0;padding:11px 15px;border:1px solid var(--line);border-left:4px solid var(--txt-3);border-radius:6px;background:var(--band)}
.tm-zapf-reqh{margin:0;font:600 13.5px var(--f-ui);line-height:1.45;color:var(--txt-2)}
.tm-zapf-reql{list-style:none;margin:9px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.tm-zapf-reql:empty{display:none}
/* Kropka jest POZYCJONOWANA, nie elementem flexa: przy pozycji dłuższej niż kolumna
   ("Oświadczenie o braku przeciwwskazań zdrowotnych") flex przenosił cały przycisk pod
   kropkę, a powód lądował bez wcięcia. Wcięcie 13 px daje wiszący akapit - druga linia
   pozycji stoi pod pierwszą, a nie pod znacznikiem. */
.tm-zapf-reql li{position:relative;padding-left:13px;font-size:13px;line-height:1.45;color:var(--txt-2)}
.tm-zapf-reql li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:999px;background:var(--txt-3)}
/* Pozycja listy jest PRZYCISKIEM, nie odnośnikiem: prowadzi do pola na tej samej stronie,
   a nie pod adres - wygląda jak link, ale nie kłamie w drzewie dostępności. */
.tm-zapf-reqb{display:inline;padding:0;background:0 0;border:0;font:600 13px/1.45 var(--f-ui);color:var(--brand);text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tm-zapf-reqb:hover{color:var(--brand-h)}
.tm-zapf-reqb:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.tm-zapf-reqp{font-style:normal;color:var(--txt-3)}

@media(max-width:760px){
 /* pary imię|nazwisko i klub|uwagi schodzą do jednej kolumny - dwa pola tekstowe po
    ~170 px na telefonie to pola, w które nie widać, co się wpisuje */
 .tm-zapf-r{grid-template-columns:minmax(0,1fr)}
 /* ale rocznik i płeć ZOSTAJĄ w linii: to cztery cyfry i dwie wartości, a cały sens
    tej przebudowy jest w pionie. Reguła musi stać PO .tm-zapf-r (ta sama specyficzność). */
 .tm-zapf-rn{grid-template-columns:104px minmax(0,1fr)}
 /* 16 px w polach: iOS Safari POWIĘKSZA całą stronę przy fokusie pola o czcionce
    mniejszej niż 16 px i nie oddala jej po wyjściu z pola */
 .tm-zapf-in{font-size:16px}
 .tm-zapf-sh{font-size:16px}
 .tm-zapf-osb{padding:12px 12px 2px}
 /* lista braków w jednej kolumnie - dwie po ~170 px łamią każdą pozycję na dwa wiersze */
 .tm-zapf-reql{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   MODUŁ ZAPISY - blok K: KLAUZULA INFORMACYJNA RODO dla zawodnika
   Strona /zapisy/bieg/{id}-{slug}/klauzula (ext/zapisy/biegKlauzula.tpl) oraz ten sam
   tekst jako Załącznik nr 2 regulaminu usługi (site/Strony/zapisy-regulamin.tpl).
   Dokument prawny czyta się inaczej niż interfejs: liczy się długość wiersza (65-75
   znaków), wyraźny numer punktu do cytowania w korespondencji i pogrubione wprowadzenie,
   po którym da się skakać wzrokiem. Dlatego własny licznik punktów, a nie domyślne
   znaczniki <ol> - te w tekście o tej długości gubią się przy zawinięciu wiersza.
   ========================================================================== */
.tm-zapkl-strona{max-width:800px}
.tm-zapkl-impreza{margin:-6px 0 14px;font:600 14.5px var(--f-ui);color:var(--txt-2)}
.tm-zapkl{counter-reset:kl;list-style:none;margin:18px 0 0;padding:0}
.tm-zapkl>li{counter-increment:kl;position:relative;margin:0 0 16px;padding:0 0 0 34px;font-size:14.5px;line-height:1.6;color:var(--txt-1,#222)}
.tm-zapkl>li::before{content:counter(kl) ".";position:absolute;left:0;top:0;width:26px;text-align:right;font:700 13.5px var(--f-ui);color:var(--brand)}
.tm-zapkl>li>strong:first-child{color:var(--txt-1,#222)}
.tm-zapkl ul{margin:8px 0 0;padding:0 0 0 18px;list-style:disc}
.tm-zapkl ul li{margin:0 0 6px;line-height:1.55}
.tm-zapkl a{color:var(--brand);text-decoration:underline}
/* Brak danych administratora to nie ozdoba, a wada klauzuli - musi być widoczna dla
   zawodnika I dla organizatora, który zajrzy na własną stronę zapisu. */
.tm-zapkl-brak{display:block;margin:8px 0 0;padding:9px 12px;border-radius:6px;border-left:4px solid #b3261e;background:#fdecec;font-size:13.5px;line-height:1.45;color:#8e1f18}
.tm-zapkl-wersja{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--txt-3)}
.tm-zapkl-linki{margin:20px 0 0;font-size:13.5px;line-height:1.7;color:var(--txt-3)}
.tm-zapkl-linki a{color:var(--brand)}

/* Dopisek przy wartości w liście faktów karty biegu (dziś: odnośnik do klauzuli przy
   nazwie organizatora). Mniejszy stopień i szary kolor - to przypis, nie fakt równy
   terminowi i miejscu. */
.tm-zapk-fdop{display:inline-block;margin-left:8px;font-size:12.5px;color:var(--txt-3)}
.tm-zapk-fdop a{color:var(--txt-3);text-decoration:underline}
.tm-zapk-fdop a:hover{color:var(--brand)}

/* Kto jest administratorem - zdanie NAD listą zgód w formularzu zapisu. Stoi w ramce
   z kreską koloru marki, bo to jedyna informacja z art. 13 RODO widoczna bez klikania. */
.tm-zapf-adm{margin:0 0 14px;padding:10px 14px;border-radius:6px;border-left:4px solid var(--brand);background:var(--brand-bg);font-size:13.5px;line-height:1.5;color:var(--txt-2)}
.tm-zapf-adm a{color:var(--brand-h,var(--brand))}

@media(max-width:760px){
 .tm-zapkl>li{padding-left:28px;font-size:14px}
 .tm-zapkl>li::before{width:21px}
}

/* ==========================================================================
   MODUŁ ZAPISY - generator kodu na stronę organizatora
   Strona /user/zapisy/kod (ext/zapisy/panelKod.tpl, pomysł #310): opcje, kod do
   wklejenia i dwa podglądy widgetu obok siebie.

   Reguły dotyczą WYŁĄCZNIE otoczki na naszej stronie. Sam widget przynosi własny,
   kompletny arkusz w Shadow DOM (ext/class/ZapisyWidget.php::css) - na stronie
   organizatora nie ma zmiennych motywu, więc żadna reguła stąd tam nie dociera
   i nie wolno jej tam zakładać.
   ========================================================================== */
.tm-h2k{margin:28px 0 6px;font:700 20px/1.25 var(--f-ui);color:var(--txt-h)}
.tm-kodOpcje{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 14px}
.tm-kodOpcje label{display:flex;flex-direction:column;gap:4px;font:600 13px var(--f-ui);color:var(--txt-2)}
.tm-kodOpcje select,.tm-kodOpcje input{min-width:200px}
/* Podgląd stoi na szachownicy, żeby dało się ocenić motyw ciemny na jasnej stronie
   i odwrotnie - widget ma własne tło, więc na jednolitym szarym tle nie było widać,
   gdzie się kończy. */
.tm-kodPodglad{margin:6px 0 4px;padding:16px;border:1px dashed var(--line);border-radius:10px;
 background:repeating-conic-gradient(#f4f4f4 0% 25%,#fbfbfb 0% 50%) 50%/18px 18px}
/* Podgląd zajmuje CAŁĄ szerokość kolumny panelu, a nie sztuczne 420 px: widget przełącza
   układ zapytaniem @container, więc wąski podgląd pokazywałby zawsze wariant mobilny
   i przeczył podpisowi obok. Organizator ma zobaczyć to, co dostanie w szerokim miejscu. */
.tm-kodJak{margin:8px 0 0;padding:0 0 0 20px;font-size:14.5px;line-height:1.65;color:var(--txt-2)}
.tm-kodJak li{margin:0 0 7px}
.tm-kodJak code{padding:1px 5px;border-radius:4px;background:var(--brand-bg);font-size:13px;color:var(--txt-1,#222)}
#tm-kodGen{display:none}

/* ==========================================================================
   MODUŁ ZAPISY - panel organizatora: zgłoszenia
   Strona /user/zapisy/zawody/zgloszenia/{id} (ext/zapisy/panelZgloszenia.tpl).
   Jedyne miejsce w Serwisie z telefonem, e-mailem i uwagami zawodników - stąd
   układ kart, a nie jednej szerokiej tabeli: każde zgłoszenie to zamknięta
   całość (zgłaszający + jego zawodnicy + zgody), którą organizator czyta
   w komplecie, zwykle szukając JEDNEJ osoby.
   ========================================================================== */
.tm-zapzg-szukaj{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 6px}
.tm-zapzg-szukaj label{font:600 13px var(--f-ui);color:var(--txt-2)}
.tm-zapzg-szukaj input[type=search]{min-width:280px;flex:1 1 280px}
.tm-zapzg-licz{margin:0 0 14px}
.tm-zapzg{margin:0 0 14px}
/* Zgłoszenie anulowane zostaje na liście (organizator musi wiedzieć, że ktoś się
   wypisał), ale przygaszone - nie liczy się do listy startowej. */
.tm-zapzg-anul{opacity:.62}
.tm-zapzg-glowa{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:0 0 8px}
.tm-zapzg-data{text-align:right;white-space:nowrap}
.tm-zapzg-osoby{margin:0 0 6px}
.tm-zapzg-osoby th{white-space:nowrap;font-weight:600}
.tm-zapzg-uwagi{margin:0 0 6px}
.tm-zapzg-zgody{margin:0}
/* Brak oświadczenia albo brak wersji klauzuli to stan do wyjaśnienia przed startem,
   nie ozdoba - dlatego kolor ostrzegawczy, a nie szary jak reszta wiersza zgód. */
.tm-zapzg-brak{color:var(--err,#b3261e);font-weight:600}
.tm-zapzg-nota{margin:18px 0 0;padding:10px 14px;border-radius:6px;border-left:4px solid var(--brand);
 background:var(--brand-bg);line-height:1.55}

@media(max-width:760px){
 .tm-zapzg-glowa{flex-direction:column}
 .tm-zapzg-data{text-align:left}
 .tm-zapzg-osoby{display:block;overflow-x:auto}
}

/* Formularz danych administratora (/user/zapisy/dane, ext/zapisy/panelDane.tpl).
   Etykiety dzielą klasę z formularzem zapisu (.tm-zapf-lab), ale ten formularz stoi
   w panelu, a nie w lejku zgłoszenia - stąd własny, prostszy układ jednokolumnowy. */
.tm-zapdane{max-width:560px}
.tm-zapdane label{display:block;margin:14px 0 4px}
.tm-zapdane input{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:6px;
 font:15px var(--f-ui);background:var(--bg-1,#fff);color:var(--txt-1,#222)}
.tm-zapdane input:focus{outline:2px solid var(--brand);outline-offset:1px}
.tm-zapdane h2{margin:26px 0 4px}