/*
 * Strona /pogoda (theme/3, szablon S/TM/NT3meteoPage.tpl): karta pogody bieżącej w kolorach pory dnia
 * i temperatury, kafle parametrów z ikonami i miernikami, jakość powietrza, łuk słońca, kolorowa prognoza
 * godzinowa. Wszystko pod korzeniem .tm-pgx - boks pogody na SG bez zmian.
 * Także podstrona /pogoda/prognoza-30-dni (NT3meteo30). Ładuje default.tpl po css.css (przy zmianie podbij ?v=). Odcienie z color-mix() tylko w bloku
 * @supports na końcu - wyżej zwykłe kolory jako zapas dla iOS < 16.2 i Chrome < 111.
 *
 * @author Marcin Koźliński
 * @version 2026-10-11
 */
/* cień ledwie zaznaczony - motyw rozdziela karty ramką (--card-sh:none w css.css) */
.tm-pgx{--pgx-r:16px;--pgx-sh:0 1px 2px rgba(16,24,40,.05)}
.tm-pgx-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* ikony liniowe ze sprite'a - bez SVG wykresów (.tm-mtchplot) i kropli termometru tygodnia */
.tm-pgx svg:not(.tm-mtchplot svg):not(.tm-wtdrop){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --- ostrzeżenia: karta z ikoną trójkąta, kolor ramki i tła wg stopnia IMGW --- */
.tm-pgx .tm-pgx-alert{display:flex;gap:12px;align-items:flex-start;border:1px solid #f0c9cc;border-radius:12px;padding:12px 16px;background:var(--brand-bg)}
.tm-pgx .tm-pgx-alert.tm-mtalert-s1{background:#fff8e1;border-color:#f3d98a}
.tm-pgx .tm-pgx-alert.tm-mtalert-s2{background:#fff0e0;border-color:#f6c48e}
.tm-pgx .tm-pgx-alert.tm-mtalert-s3{background:#ffe9e9;border-color:#f3a5a5}
.tm-pgx-alic{flex:none;width:24px;height:24px;margin-top:1px;color:var(--brand)}
.tm-mtalert-s1 .tm-pgx-alic{color:#d99a00}
.tm-mtalert-s2 .tm-pgx-alic{color:#e58100}
.tm-mtalert-s3 .tm-pgx-alic{color:#e50000}

/* --- karta pogody bieżącej --- */
.tm-pgx-hero{position:relative;overflow:hidden;isolation:isolate;margin:6px 0 0;padding:22px 24px 18px;border-radius:var(--pgx-r);color:#fff;box-shadow:0 14px 34px -18px rgba(20,60,140,.6)}
.tm-pgx-dzien{background:linear-gradient(135deg,#1650a8 0%,#1d66c0 55%,#2a7cc8 100%)}
.tm-pgx-noc{background:linear-gradient(135deg,#0d1838 0%,#22306b 55%,#4a3d8f 100%);box-shadow:0 14px 34px -18px rgba(20,20,70,.75)}
/* poświata w kolorze temperatury (tempKolor) w prawym górnym rogu + miękkie koło dekoracyjne */
.tm-pgx-hero::before{content:"";position:absolute;z-index:-1;right:-90px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--pgx-t,#ffb347) 0%,transparent 68%);opacity:.6}
.tm-pgx-hero::after{content:"";position:absolute;z-index:-1;left:-60px;bottom:-140px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08)}
/* gwiazdy na karcie nocnej */
.tm-pgx-noc::after{left:0;top:0;bottom:auto;width:100%;height:100%;border-radius:0;background:radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 68%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 46% 14%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 42%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 81% 78%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 30%,#fff 50%,transparent 51%);opacity:.55}
.tm-pgx-hmain{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.tm-pgx-hico{flex:none;width:104px;height:104px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.22))}
.tm-pgx-htemp{flex:none;font:700 76px/0.9 var(--f-lab);letter-spacing:-2px;text-shadow:0 4px 18px rgba(0,0,0,.18)}
.tm-pgx-htemp sup{font-size:28px;font-weight:600;letter-spacing:0;vertical-align:top;position:relative;top:8px;margin-left:2px}
.tm-pgx-hdesc{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:14px;color:rgba(255,255,255,.92)}
.tm-pgx-hdesc b{font-size:21px;font-weight:700;color:#fff;line-height:1.2}
.tm-pgx-hnow{font:600 11px/1 var(--f-lab);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.tm-pgx-hmm{display:flex;gap:10px;align-items:center;margin-top:2px}
.tm-pgx-hmm i{font-style:normal;font-weight:700;color:#fff;background:rgba(255,255,255,.16);padding:2px 9px;border-radius:999px;font-size:13px}
.tm-pgx-up{box-shadow:inset 0 -2px 0 #ffb25b}
.tm-pgx-dn{box-shadow:inset 0 -2px 0 #9fd4ff}
.tm-pgx-hchips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.22)}
.tm-pgx-hchips li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px;background:rgba(255,255,255,.17);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:13px;font-weight:600;color:#fff}
.tm-pgx-dzien .tm-pgx-hchips li{background:rgba(10,40,100,.24)}
.tm-pgx-hchips svg{width:16px;height:16px}
.tm-pgx-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.75)}

/* --- kafle parametrów: akcent --c (ikona, pasek, miernik), tekst w kolorach motywu (kontrast AA) --- */
.tm-pgx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:16px 0 0;padding:0}
.tm-pgx-tiles li{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 14px 13px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--pgx-sh);overflow:hidden}
.tm-pgx-tiles li::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--c)}
.tm-pgx-ti{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:6px;border-radius:10px;color:var(--c);background:var(--band)}
.tm-pgx-ti svg{width:19px;height:19px}
.tm-pgx-tl{font:600 11px/1.2 var(--f-lab);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.tm-pgx-tv{font:700 24px/1.15 var(--f-lab);color:var(--txt-h);font-variant-numeric:tabular-nums}
.tm-pgx-tv small{font-size:14px;font-weight:600;color:var(--txt-2)}
.tm-pgx-ts{font-size:12.5px;color:var(--txt-2);font-weight:600;line-height:1.3}
.tm-pgx-meter{position:relative;display:block;height:6px;margin-top:9px;border-radius:6px;background:#eef0f4;overflow:hidden}
.tm-pgx-meter::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:6px;background:var(--c)}
/* UV: tęczowa skala WHO, wskaźnik w miejscu odczytu */
.tm-pgx .tm-pgx-uvm{background:linear-gradient(90deg,#3a9d23 0 27%,#d6a400 27% 54%,#e8710a 54% 72%,#d8001d 72% 99%,#7b3fa0 99%);overflow:visible}
.tm-pgx .tm-pgx-uvm::after{left:var(--p,0%);width:12px;height:12px;top:-3px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--c),0 2px 4px rgba(0,0,0,.25)}
/* róża wiatrów: strzałka w kierunku, w którym wieje wiatr */
.tm-pgx-compass{position:absolute;right:12px;top:12px;width:40px;height:40px}
.tm-pgx .tm-pgx-compass circle{fill:#f4f8f7;stroke:#cfe3df;stroke-width:1}
.tm-pgx .tm-pgx-needle{fill:var(--c);stroke:none}

/* tendencja 1 h w kaflu (MeteosourceTM::tendencja1h): strzałka w kolorze akcentu, godzina prognozy obok */
.tm-pgx-tr{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 5px;margin-top:9px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;font-weight:600;color:var(--txt)}
.tm-pgx-tr svg{flex:none;width:15px;height:15px;color:var(--c,var(--txt-2));stroke-width:2.5}
.tm-pgx-tr small{font-size:11px;font-weight:500;color:var(--txt-2)}
.tm-pgx-tr-stabilnie{font-weight:500;color:var(--txt-2)}
.tm-pgx-tr-stabilnie svg{color:var(--txt-3)}
/* w kaflach tendencja przy dolnej krawędzi - równa linia w rzędzie kafli o różnej treści */
.tm-pgx-tiles .tm-pgx-tr{margin-top:auto}
.tm-pgx-tiles li>:nth-last-child(2){margin-bottom:9px}
/* w karcie "Teraz": biały tekst, bez linii */
.tm-pgx-htr .tm-pgx-tr{margin-top:1px;padding:0;border:0;color:#fff;font-size:13px}
.tm-pgx-htr .tm-pgx-tr svg,.tm-pgx-htr .tm-pgx-tr small{color:rgba(255,255,255,.85)}

/* --- jakość powietrza + słońce --- */
.tm-pgx-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px}
.tm-pgx-card{position:relative;display:flex;flex-direction:column;padding:15px 18px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--pgx-sh)}
.tm-pgx-ch{display:flex;align-items:center;gap:9px;margin:0 0 10px;font:700 16px/1.2 var(--f-ui);color:var(--txt-h)}
.tm-pgx-hi{--c:#d43e49;flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;color:#fff;background:var(--c)}
.tm-pgx-hi svg{width:18px;height:18px}
.tm-pgx-air .tm-pgx-hi{--c:inherit}
.tm-pgx-airst{margin:0 0 12px}
.tm-pgx-airb{display:inline-block;padding:5px 14px;border-radius:999px;font:700 19px/1.2 var(--f-ui)}
.tm-pgx-airp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tm-pgx-airp span{display:flex;flex-direction:column;padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.75);border:1px solid var(--line);font:700 15px/1.2 var(--f-ui);color:var(--txt-h);font-variant-numeric:tabular-nums}
.tm-pgx-airp b{font:600 10.5px/1.2 var(--f-lab);letter-spacing:.06em;color:var(--txt-2)}
.tm-pgx-unit{display:block;margin-top:auto;padding-top:8px;font-size:11.5px;color:var(--txt-2)}
.tm-pgx-sun{background:linear-gradient(180deg,#fff8e8,#fff 70%)}
.tm-pgx-sunnoc{background:linear-gradient(180deg,#eef0fb,#fff 70%)}
.tm-pgx-arc{display:block;width:100%;max-width:300px;height:auto;margin:0 auto -4px}
.tm-pgx .tm-pgx-arcb{stroke:#f2c76b;stroke-width:2;stroke-dasharray:3 5}
.tm-pgx .tm-pgx-arch{stroke:#d9dce3;stroke-width:1.5}
.tm-pgx .tm-pgx-arcp{stroke:#f2a007;stroke-width:4}
.tm-pgx .tm-pgx-arcs{fill:#ffc531;stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 6px rgba(255,170,0,.8))}
.tm-pgx .tm-pgx-sunnoc .tm-pgx-arcb{stroke:#b7bfdc}
.tm-pgx .tm-pgx-arcm{color:#5b6bb8;fill:#e4e8fb}
.tm-pgx .tm-pgx-arct{font:600 9px var(--f-ui);fill:#4b5794;stroke:none}
.tm-pgx-sunrow{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.tm-pgx-sunrow>span{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px;font-size:11.5px;color:var(--txt-2)}
.tm-pgx-sunrow>span svg{grid-row:span 2;width:22px;height:22px;color:#e09400}
.tm-pgx-sunrow>span:last-child svg{color:#e0662a}
.tm-pgx-sunrow b{font:700 18px/1.1 var(--f-lab);color:var(--txt-h)}
.tm-pgx-sunrow .tm-pgx-sunmid{display:flex;flex-direction:column;align-items:center;text-align:center}
.tm-pgx-sunmid b{font-size:15px}
.tm-pgx-moon{display:flex;align-items:center;gap:7px;margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;color:var(--txt-2)}
.tm-pgx-moon svg{width:18px;height:18px;color:#5b6bb8}
.tm-pgx-moon b{color:var(--txt-h)}

/* --- nagłówki sekcji z ikoną --- */
.tm-pgx-h2{display:flex;align-items:center;gap:10px}
.tm-pgx-h2.tm-mth2row{align-items:center}
.tm-pgx-h2t{display:inline-flex;align-items:center;gap:10px}

/* --- prognoza opisowa AI i notka opadów --- */
.tm-pgx-ai{position:relative;margin:0;padding:16px 18px 16px 20px;border-radius:14px;background:linear-gradient(135deg,#f6efff,#eef5ff);border:1px solid #e4dcf7;font-size:15px;line-height:1.65;color:var(--txt)}
.tm-pgx-ai::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#8e44c9,#3a7be0)}
.tm-pgx-note{margin:0 0 10px;padding:11px 14px;border-radius:12px;background:#eef8f1;border:1px solid #d3ecdb;color:#256b3e;font-size:14px}
.tm-pgx-notewet{background:#edf4ff;border-color:#d3e2fa;color:#204f99}
.tm-pgx .tm-mtmin{background:linear-gradient(180deg,#f4f8ff,#e8f0fd);border-radius:12px;height:72px}
.tm-pgx .tm-mtminb{background:linear-gradient(180deg,#5aa2ff,#1f5fc9)}

/* --- prognoza godzinowa: karta z paskiem w kolorze temperatury --- */
.tm-pgx .tm-pgx-hours{gap:8px;padding:4px 2px 10px}
.tm-pgx .tm-mth1{position:relative;gap:4px;min-width:62px;padding:10px 8px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--c);overflow:hidden}
.tm-pgx .tm-mth1::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);background:#3b7be0;border-radius:0 3px 0 0}
.tm-pgx .tm-mth1 i{font:700 17px/1 var(--f-lab);color:var(--txt-h)}
.tm-pgx .tm-mth1 em{display:inline-flex;align-items:center;gap:2px;color:var(--txt-2)}
.tm-pgx .tm-mth1 em.tm-mtwet{color:#2a5fb8}
.tm-pgx .tm-mth1 em svg{width:10px;height:10px;stroke-width:2.5}
.tm-pgx .tm-mth1.tm-pgx-now{background:linear-gradient(180deg,#1a5fc0,#2a7fd6);border-color:#1a5fc0}
.tm-pgx .tm-mth1.tm-pgx-now b,.tm-pgx .tm-mth1.tm-pgx-now i,.tm-pgx .tm-mth1.tm-pgx-now em{color:#fff}
.tm-pgx .tm-pgx-now b{text-transform:uppercase;letter-spacing:.06em}
.tm-pgx .tm-mthsep{border-left:2px dashed var(--hair)}

/* --- wykres i termometr tygodnia: karty --- */
.tm-pgx .tm-pgx-chart{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--pgx-sh)}
.tm-pgx .tm-mtchline{stroke:#f06a28;stroke-width:2.5}
.tm-pgx .tm-mtcharea{fill:url(#pgxTempGrad)}
.tm-pgx .tm-mtchrain{fill:#3b7be0;fill-opacity:.85}
.tm-pgx .tm-wt{border-radius:14px;box-shadow:var(--pgx-sh);overflow:hidden}
.tm-pgx .tm-wttoday{background:linear-gradient(90deg,#eef5ff,#fff 60%)}
.tm-pgx .tm-wtrow:hover{background:#f6f9ff}
.tm-pgx .tm-wtlegend{border-radius:0}
.tm-pgx .tm-pgx-cta{margin-top:18px;border-radius:14px;background:linear-gradient(120deg,#fff,#fff4f4)}

/* --- podstrona /pogoda/prognoza-30-dni (NT3meteo30) --- */
/* kompaktowa karta "Teraz" z przyciskiem do pełnej prognozy */
.tm-pgx-mini{padding:16px 20px}
.tm-pgx-mini .tm-pgx-hico{width:72px;height:72px}
.tm-pgx-mini .tm-pgx-htemp{font-size:54px}
.tm-pgx-mini .tm-pgx-htemp sup{font-size:22px;top:5px}
.tm-pgx-mini .tm-pgx-hdesc b{font-size:18px}
.tm-pgx-mbtn{margin-left:auto;padding:9px 16px;border-radius:999px;background:#fff;color:#1650a8;font:600 13.5px var(--f-ui);white-space:nowrap;box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.tm-pgx-noc .tm-pgx-mbtn{color:#22306b}
.tm-pgx-mbtn:hover{background:#eef4ff;color:#0d1838}
.tm-pgx .tm-pgx-intro{margin:14px 0 0}
.tm-pgx-tvs{font-size:20px;line-height:1.25;padding:2px 0 1px}
/* wykres 30 dni: pasmo w gradiencie ciepło-zimno, minima na niebiesko */
.tm-pgx .tm-mtchband{fill:url(#pgxBandGrad)}
.tm-pgx .tm-mtchmin{stroke:#3b7be0}
.tm-pgx .tm-mtchlm{border-top-color:#3b7be0}
/* kalendarz tygodniowy */
.tm-pgx-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.tm-pgx-cwd{padding:2px 0 0;text-align:center;font:600 11px/1 var(--f-lab);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.tm-pgx-cwk{color:var(--brand-h)}
.tm-pgx-cd{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 4px 12px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:12px;text-align:center;overflow:hidden}
.tm-pgx-cd::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);background:#3b7be0;border-radius:0 3px 0 0}
.tm-pgx-cd.tm-pgx-cdwk{background:#fff6f6}
.tm-pgx-cdnow{box-shadow:0 0 0 2px #1d66c0}
.tm-pgx-cdd{font:600 12px/1.2 var(--f-lab);color:var(--txt-h);font-variant-numeric:tabular-nums}
/* dzień tygodnia w karcie: na PC ukryty wizualnie (jest nagłówek kolumny), czytnik go odczytuje */
.tm-pgx-cdw{text-transform:uppercase;letter-spacing:.04em}
.tm-pgx-cdwk .tm-pgx-cdw{color:var(--brand-h)}
.tm-pgx-sr,.tm-pgx-cdw{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tm-pgx-cdd em{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:#1d66c0;padding:1px 4px;border-radius:4px;vertical-align:1px}
.tm-pgx-cd img{width:40px;height:40px}
.tm-pgx-cdt i{font:700 16px/1 var(--f-lab);font-style:normal;color:var(--txt-h)}
.tm-pgx-cdt em{font:500 13px/1 var(--f-lab);font-style:normal;color:var(--txt-2)}
.tm-pgx-cdr{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--txt-2);font-variant-numeric:tabular-nums}
.tm-pgx-cdr svg{width:10px;height:10px}
.tm-pgx-cdwet{color:#2a5fb8;font-weight:700}
.tm-pgx-cdp{display:inline-flex;gap:2px;margin-top:2px}
.tm-pgx-cdp i{width:5px;height:5px;border-radius:50%;background:#dfe3ea}
.tm-pgx-cdp i.tm-pgx-on{background:#7b5cd6}
.tm-pgx-calleg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:10px 0 0;font-size:12px;color:var(--txt-2)}
.tm-pgx-calleg>span{display:inline-flex;align-items:center;gap:7px}
.tm-pgx-calleg .tm-pgx-cdp{margin:0}
.tm-pgx-cinfo{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 18px;border:1px dashed #cdd5e3;border-radius:12px;background:linear-gradient(135deg,#f7f9fd,#fff);font-size:12.5px;color:var(--txt-2)}
.tm-pgx-cinfo b{font-size:14px;color:var(--txt-h)}
.tm-pgx-cinfo>span{display:flex;align-items:center;gap:8px}
.tm-pgx-cinfo .tm-pgx-cdp{margin:0}
.tm-pgx-lgt,.tm-pgx-lgr{flex:none;width:22px;height:4px;border-radius:2px;background:linear-gradient(90deg,#3f83c6,#6bbb52,#ebb43a,#d9453f)}
.tm-pgx-lgr{background:#3b7be0}
/* legenda pod kalendarzem zbędna, gdy jest w ramce pierwszego tygodnia (poza telefonem) */
.tm-pgx-callegm{display:none}
/* powrót do pełnej prognozy */
.tm-pgx-back{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:13px 16px;background:linear-gradient(120deg,#fff,#eef4ff);border:1px solid #d6e2f6;border-radius:14px;color:var(--txt)}
.tm-pgx-back b{display:block;font-size:15px;color:var(--txt-h)}
.tm-pgx-back small{font-size:12.5px;color:var(--txt-2)}
.tm-pgx-back:hover b{color:#1d66c0}

/* --- odcienie akcentu przez color-mix (iOS 16.2+, Chrome 111+); bez wsparcia zostają kolory wyżej --- */
@supports (color:color-mix(in srgb,red,red)){
	.tm-pgx-ti{background:color-mix(in srgb,var(--c) 14%,#fff)}
	.tm-pgx-ts{color:color-mix(in srgb,var(--c) 62%,#14171d)}
	.tm-pgx-meter{background:color-mix(in srgb,var(--c) 14%,#eef0f4)}
	.tm-pgx-meter::after{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#fff),var(--c))}
	.tm-pgx .tm-pgx-compass circle{fill:color-mix(in srgb,var(--c) 8%,#fff);stroke:color-mix(in srgb,var(--c) 35%,#fff)}
	.tm-pgx-hi{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:0 6px 14px -8px var(--c)}
	.tm-pgx-air{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 10%,#fff),#fff 60%)}
	.tm-pgx .tm-mth1{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,#fff),#fff 75%);border-color:color-mix(in srgb,var(--c) 22%,var(--line));border-top-color:var(--c)}
	.tm-pgx .tm-mth1 i{color:color-mix(in srgb,var(--c) 50%,#14171d)}
	.tm-pgx-cd{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 13%,#fff),#fff 70%)}
	.tm-pgx-cd.tm-pgx-cdwk{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 13%,#fff),#fff4f4 70%)}
	.tm-pgx-cdt i{color:color-mix(in srgb,var(--c) 50%,#14171d)}
}

/* --- telefon / tablet --- */
@media (max-width:991px){
	.tm-pgx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* kalendarz na wąskim ekranie: bez nagłówka dni i pustych pól, dzień tygodnia w karcie */
@media (max-width:767px){
	.tm-pgx-cal{grid-template-columns:repeat(3,minmax(0,1fr))}
	.tm-pgx-cwd,.tm-pgx-cempty,.tm-pgx-cinfo{display:none}
	.tm-pgx-callegm{display:flex}
	.tm-pgx-cdw{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
}
@media (max-width:575px){
	.tm-pgx-hero{padding:18px 16px 14px;border-radius:14px}
	.tm-pgx-hero::before{right:-170px;top:-190px;opacity:.45}
	.tm-pgx-hico{width:80px;height:80px}
	.tm-pgx-htemp{font-size:62px}
	.tm-pgx-hdesc{flex-basis:100%}
	.tm-pgx-hdesc b{font-size:18px}
	.tm-pgx-hchips li{font-size:12.5px;padding:5px 10px 5px 8px}
	.tm-pgx-tiles{gap:9px}
	.tm-pgx-tiles li{padding:12px 11px 11px}
	.tm-pgx-tv{font-size:21px}
	.tm-pgx-compass{width:32px;height:32px;right:9px;top:9px}
	.tm-pgx-airp{grid-template-columns:repeat(2,minmax(0,1fr))}
	.tm-pgx-mbtn{margin-left:0}
	/* wykres 30 dni szerszy od ekranu (przewijany jak godzinowy) - podpisy dat się nie nakładają */
	.tm-pgx .tm-mtch30 .tm-mtchin{min-width:600px!important}
}