/* public.css */
/* ============================================================
   MG.Web.Public — CSS roboczy E3 (tokeny z mockupów strony-pzhgp,
   wzorzec wiążący delta §3.2; pełny design system + skórki = E2).
   Fonty systemowe (Google Fonts dojdą w E2 decyzją design systemu).
   Senior-first: baza 15 px, dane ≥1 rem, cele ≥44 px, zero
   poziomego scrolla (test 375 px).
   ============================================================ */
:root {
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --disp: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --r-md: 12px;
    --r-lg: 16px;
}

/* Skórka robocza „Transmisja" (ciemna) — model motywów E2 podmieni wartości */
html {
    --bg: #0a0e15; --panel: #121826; --panel-2: #182034; --line: #26304a;
    --text: #f2f5fa; --dim: #a8b4c8;
    --acc: #f6b93b; --acc-deep: #d99a13; --acc-ink: #171204;
    --acc-tint: rgba(246, 185, 59, .12);
    --good: #3ddc84; --good-tint: rgba(61, 220, 132, .13);
    --info: #6ea8ff; --info-tint: rgba(110, 168, 255, .14);
    --live: #ff5d73;
    --mine: rgba(246, 185, 59, .14); --mine-edge: #f6b93b;
    --ad-bg: #0d1320; --shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --hero-a: rgba(246, 185, 59, .14); --hero-b: rgba(110, 168, 255, .10);
}

/* Skórka „Świt" (jasna) — 1:1 z mockupu mg.css; wiersz tbl_CMS_Motywy SzablonKod=transmisja */
html[data-skin="swit"] {
    --bg: #fdfbf7; --panel: #ffffff; --panel-2: #f4f1ea; --line: #e3ded2;
    --text: #1f2430; --dim: #5b6373;
    --acc: #b45309; --acc-deep: #92400e; --acc-ink: #ffffff;
    --acc-tint: rgba(180, 83, 9, .10);
    --good: #15803d; --good-tint: rgba(21, 128, 61, .10);
    --info: #075985; --info-tint: rgba(7, 89, 133, .10);
    --live: #dc2626;
    --mine: #fef3c7; --mine-edge: #b45309;
    --ad-bg: #f1ede4; --shadow: 0 10px 30px rgba(31, 36, 48, .10);
    --hero-a: rgba(180, 83, 9, .08); --hero-b: rgba(7, 89, 133, .07);
}

/* Skórka „Wieczór" (grafit+zieleń) — 1:1 z mockupu mg.css */
html[data-skin="wieczor"] {
    --bg: #0e1412; --panel: #16201c; --panel-2: #1c2823; --line: #2a3a33;
    --text: #eef5f1; --dim: #a3b6ac;
    --acc: #4ade80; --acc-deep: #22c55e; --acc-ink: #062012;
    --acc-tint: rgba(74, 222, 128, .12);
    --good: #4ade80; --good-tint: rgba(74, 222, 128, .13);
    --info: #7dd3fc; --info-tint: rgba(125, 211, 252, .13);
    --live: #fb7185;
    --mine: rgba(74, 222, 128, .13); --mine-edge: #4ade80;
    --ad-bg: #101915; --shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --hero-a: rgba(74, 222, 128, .10); --hero-b: rgba(125, 211, 252, .08);
}

/* Skórka „Stadion" (granat, ciemna) — paleta wariantu A „Sport-live" (brief motywy-transmisja) */
html[data-skin="stadion"] {
    --bg: #0b1626; --panel: #122036; --panel-2: #1b2f4b; --line: #2a3f5e;
    --text: #eef2f9; --dim: #a2b2ca;
    --acc: #6ea8ff; --acc-deep: #3b82f6; --acc-ink: #04122e;
    --acc-tint: rgba(110, 168, 255, .14);
    --good: #3ddc84; --good-tint: rgba(61, 220, 132, .13);
    --info: #7db3ff; --info-tint: rgba(125, 179, 255, .14);
    --live: #ff3b63;
    --mine: rgba(110, 168, 255, .15); --mine-edge: #6ea8ff;
    --ad-bg: #0d1930; --shadow: 0 14px 40px rgba(0, 0, 0, .5);
    --hero-a: rgba(110, 168, 255, .16); --hero-b: rgba(232, 0, 61, .10);
}

/* Skórka „Indygo" (jasna) — paleta wariantu B „Czysty premium" */
html[data-skin="indygo"] {
    --bg: #f7f7f5; --panel: #ffffff; --panel-2: #eef0f6; --line: #e5e5e0;
    --text: #1a1a1e; --dim: #565a66;
    --acc: #4f46e5; --acc-deep: #3730a3; --acc-ink: #ffffff;
    --acc-tint: rgba(79, 70, 229, .10);
    --good: #127a41; --good-tint: rgba(18, 122, 65, .10);
    --info: #075985; --info-tint: rgba(7, 89, 133, .10);
    --live: #dc2626;
    --mine: #f0eeff; --mine-edge: #4f46e5;
    --ad-bg: #eeeef2; --shadow: 0 10px 30px rgba(20, 20, 25, .08);
    --hero-a: rgba(79, 70, 229, .08); --hero-b: rgba(7, 89, 133, .06);
}

/* Skórka „Piasek" (jasna ciepła) — paleta wariantu C „Hodowlany premium" (zieleń+bursztyn) */
html[data-skin="piasek"] {
    --bg: #f6f1e7; --panel: #fffdf8; --panel-2: #f0e9da; --line: #e5dcc9;
    --text: #26221a; --dim: #625a4a;
    --acc: #2d5b48; --acc-deep: #224a3a; --acc-ink: #ffffff;
    --acc-tint: rgba(45, 91, 72, .10);
    --good: #2d6a4f; --good-tint: rgba(45, 106, 79, .10);
    --info: #8a5410; --info-tint: rgba(179, 112, 28, .12);
    --live: #c1121f;
    --mine: #fbeecd; --mine-edge: #b3701c;
    --ad-bg: #efe8d8; --shadow: 0 10px 30px rgba(48, 38, 15, .08);
    --hero-a: rgba(45, 91, 72, .10); --hero-b: rgba(179, 112, 28, .08);
}

/* Skórka „Heban" (czarno-czerwona, ciemna neutralna) — paleta wariantu A (live) na czerni */
html[data-skin="heban"] {
    --bg: #0b0b0e; --panel: #141419; --panel-2: #1d1d24; --line: #2e2e37;
    --text: #f4f4f6; --dim: #a9a9b3;
    --acc: #f87171; --acc-deep: #ef4444; --acc-ink: #1a0303;
    --acc-tint: rgba(248, 113, 113, .13);
    --good: #4ade80; --good-tint: rgba(74, 222, 128, .12);
    --info: #9ca3ff; --info-tint: rgba(156, 163, 255, .13);
    --live: #ff4d4d;
    --mine: rgba(248, 113, 113, .14); --mine-edge: #f87171;
    --ad-bg: #101015; --shadow: 0 14px 40px rgba(0, 0, 0, .55);
    --hero-a: rgba(248, 113, 113, .12); --hero-b: rgba(156, 163, 255, .08);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
/* Baza 15 px; regulacja A/A+/A++ = 15/17/19 (delta §3.2 — decyzja usera z v2);
   wartość nadpisuje cookie mg-font (SSR) + skrypt inline (kopie z cache CDN) */
html { font-size: 15px; }
html[data-font="17"] { font-size: 17px; }
html[data-font="19"] { font-size: 19px; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg); color: var(--text);
    line-height: 1.5; font-feature-settings: "tnum" 1;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { max-width: 100%; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 14px; }
.dim { color: var(--dim); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ PASEK GÓRNY (roboczy E3; pełna nawigacja = E2) ============ */
.appbar { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.appbar .wrap { display: flex; align-items: center; gap: 8px; min-height: 60px; flex-wrap: nowrap; padding-top: 4px; padding-bottom: 4px; }
.logo { display: flex; align-items: center; gap: 9px; min-width: 0; font-family: var(--disp); font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; min-height: 44px; }
.logo .sq { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; background: linear-gradient(135deg, var(--acc), var(--acc-deep)); display: flex; align-items: center; justify-content: center; color: var(--acc-ink); font-size: 1rem; }
.logo small { font-size: .8rem; font-weight: 600; color: var(--dim); }
.logo .herb { width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain; border-radius: 6px; }
/* Herby systemowe z rotacją (brief herby-logo-stopka D3) — bez JS/reduced-motion widać pierwszy */
.logo .herby { position: relative; width: 48px; height: 48px; flex: 0 0 auto; }
.logo .herby img { position: absolute; inset: 0; width: 48px; height: 48px; object-fit: contain; border-radius: 6px; opacity: 0; }
.logo .herby img:first-child { opacity: 1; }
.logo .herby.js-rotuje img { opacity: 0; transition: opacity .6s ease; }
.logo .herby.js-rotuje img.herb-akt { opacity: 1; }
/* Logo PZHGP przy nazwie (brief herby-logo-stopka D6) */
.logo .logo-pzhgp { height: 40px; width: auto; flex: 0 0 auto; }
.logo .logo-nazwa { min-width: 0; overflow-wrap: anywhere; }
/* Z137 E8: telefon — nagłówek w JEDNEJ linii (herb + nazwa + logo PZHGP + „Aa”), ~56 px; długa nazwa zawija się
   do 2 linii mniejszą czcionką (z wielokropkiem), bez rozpychania paska */
@media (max-width: 767px) {
    .appbar .wrap { min-height: 56px; padding-top: 2px; padding-bottom: 2px; gap: 6px; }
    .logo { flex: 1 1 auto; gap: 7px; min-height: 48px; }
    .logo .herby, .logo .herby img { width: 40px; height: 40px; }
    .logo .herb, .logo .sq { width: 36px; height: 36px; }
    .logo .logo-pzhgp { height: 32px; }
    .logo small { display: none; }
    .logo .logo-nazwa { font-size: .95rem; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
.grow { flex: 1; }
.mainnav { border-bottom: 1px solid var(--line); background: var(--panel); }
.mainnav .wrap { display: flex; gap: 2px; overflow-x: auto; }
.mainnav a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px; font-weight: 600; color: var(--dim); border-bottom: 3px solid transparent; white-space: nowrap; }
.mainnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--acc); }
.mainnav a:hover { color: var(--text); }
/* Z137 E8: dolny pasek (< 900 px) pokazuje te same pozycje + „Więcej” — górny pasek zakładek tylko dubluje i zjada ekran */
@media (max-width: 899px) { .mainnav { display: none; } }

/* ============ REGULACJA CZCIONKI A/A+/A++ (15/17/19 — delta §3.2) ============ */
.fs-group { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fs-btn { min-width: 44px; min-height: 44px; font-weight: 700; color: var(--dim); }
.fs-btn[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
/* Z137 E8: jeden przycisk „Aa” (<details>, działa bez JS) otwiera małe menu z rozmiarem tekstu i motywem */
.ust { position: relative; flex: 0 0 auto; }
.ust-btn { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--dim); border-radius: 10px; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: var(--text); background: var(--panel); cursor: pointer; user-select: none; }
.ust-btn::-webkit-details-marker { display: none; }
.ust-btn::marker { content: ""; }
.ust[open] > .ust-btn { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.ust-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: max-content; min-width: 220px; max-width: calc(100vw - 28px); display: grid; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.ust-et { margin: 0; font-size: .8rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.ust-menu .fs-group { background: var(--bg); }
.ust-menu .fs-group .fs-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.ust-menu .fs-group .fs-btn[aria-pressed="true"] { color: var(--acc-ink); }
.ust-motyw { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--bg); text-align: left; }
.ust-motyw[aria-pressed="true"] { color: var(--acc-ink); }

/* ============ DOLNY PASEK MOBILE 4+1 (delta §3.2) ============ */
body { padding-bottom: 76px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; background: var(--panel); border-top: 1px solid var(--line); }
.bottomnav a, .bottomnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 8px; min-height: 60px; font-size: .78rem; font-weight: 600; color: var(--dim); }
.bottomnav .ic { font-size: 1.25rem; line-height: 1; }
.bottomnav a[aria-current="page"] { color: var(--acc); box-shadow: inset 0 3px 0 var(--acc); }
@media (min-width: 900px) { .bottomnav { display: none; } }
/* Z137 R1: strona Z REKLAMAMI (klasa ma-reklamy na <html> — App.razor: wersja Standard/Premium + AdSense włączony albo
   podgląd ?reklamy=podglad) NIE ma na telefonie paska przyklejonego do dołu — tę krawędź zajmuje przyklejony pasek
   AdSense (ok. połowa przychodu stron oddziałów). Te same pozycje menu wracają na górę: pasek pod nagłówkiem,
   przewijany w poziomie jak górne zakładki na komputerze (.mainnav ma wszystkie pozycje i „Więcej” nie potrzebuje).
   Warunek body:has(.ad-slot) = na stronie faktycznie są okienka (widok pod hasłem ich nie ma → dolny pasek zostaje).
   Gold i strony bez reklam: bez zmian. Szablon Rozgrywki (własna belka .rzg-klub) — w rozgrywki.css. */
@media (max-width: 899px) {
    html.ma-reklamy body:has(.ad-slot) { padding-bottom: 0; }
    html.ma-reklamy body:has(.ad-slot) .bottomnav { display: none; }
    html.ma-reklamy body:has(.ad-slot) .mainnav { display: block; }
    html.ma-reklamy body:has(.ad-slot) .mainnav .wrap { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    html.ma-reklamy body:has(.ad-slot) .mainnav .wrap::-webkit-scrollbar { display: none; }
}
.wiecej-menu { position: fixed; inset: 0; z-index: 55; background: var(--bg); overflow-y: auto; padding: 14px; }
.wiecej-menu a { display: flex; align-items: center; min-height: 56px; padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 1.05rem; color: var(--text); }
.wiecej-menu .zamknij { min-height: 48px; margin-bottom: 8px; }

/* ============ PASEK-TICKER czołówki ostatniej listy (delta §3.2) ============ */
.ticker { display: block; max-width: 100%; background: var(--panel-2); border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.ticker .tor { display: inline-flex; gap: 0; padding: 13px 0; animation: ticker-przewin 45s linear infinite; will-change: transform; }
.ticker:hover .tor, .ticker:focus-within .tor { animation-play-state: paused; }
.ticker .poz { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; font-size: .92rem; color: var(--dim); }
.ticker .poz b { color: var(--text); font-weight: 700; }
.ticker .poz .tnum { color: var(--acc); font-family: var(--mono); }
.ticker .zrodlo { color: var(--acc); font-weight: 700; }
@keyframes ticker-przewin { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .ticker { overflow-x: auto; }
    .ticker .tor { animation: none; }
}

/* ============ AKTUALNOŚCI ============ */
.news { display: grid; gap: 14px; }
.news-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 8px; }
.news-item h3 { font-size: 1.15rem; line-height: 1.3; }
.news-item h3 a { display: block; padding: 12px 0; margin: -6px 0; } /* cel dotykowy ≥44 px */
.news-item h3 a:hover { color: var(--acc); }
.pin { color: var(--acc); font-weight: 700; font-size: .85rem; }
.tresc-html { overflow-wrap: break-word; }
.tresc-html img { max-width: 100%; height: auto; border-radius: 8px; }
.tresc-html a { color: var(--acc); text-decoration: underline; }
.tresc-html p { margin: .6em 0; }
.tresc-html table { max-width: 100%; overflow-x: auto; display: block; }

/* ============ MULTIMEDIA (galeria + filmy) ============ */
.galeria { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .galeria { grid-template-columns: repeat(4, 1fr); } }
.galeria a { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* lightbox galerii (J5) — <dialog> tworzony przez JS (progressive enhancement:
   bez JS linki otwierają zdjęcie w nowej karcie jak dotąd) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 82dvh; object-fit: contain; border-radius: 10px; }
.lightbox figcaption { color: #fff; font-size: .95rem; text-align: center; max-width: 90vw; }
.lightbox .lb-pasek { display: flex; align-items: center; gap: 14px; justify-content: center; }
.lightbox button { min-width: 48px; min-height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color: #fff; font-size: 1.35rem; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.18); }
.lightbox .lb-zamknij { position: fixed; top: 10px; right: 10px; }
.lightbox .lb-licznik { color: #fff; opacity: .85; font-variant-numeric: tabular-nums; }

.film-fasada { position: relative; display: block; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.film-fasada .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--text); background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); }
.film-fasada img { width: 100%; height: 100%; object-fit: cover; }
.film-fasada iframe { width: 100%; height: 100%; border: 0; }

/* ============ SLOT KAMPANII WŁASNEJ (ad-house — delta §3.2) ============ */
.ad-house { min-height: 120px; background: linear-gradient(135deg, var(--acc-tint), transparent); border-style: solid; }
.ad-house::before { content: "Reklama partnera"; }
.ad-house b { font-size: 1.05rem; color: var(--text); }

/* ============ ZARZĄD / DOKUMENTY (o-nas) ============ */
.zarzad-siatka { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .zarzad-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .zarzad-siatka { grid-template-columns: repeat(3, 1fr); } }
.zarzad-karta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.zarzad-karta b { display: block; }
.zarzad-karta span { color: var(--dim); font-size: .9rem; }
details.sekcja-onas { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); margin: 12px 0; }
details.sekcja-onas > summary { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; }
details.sekcja-onas > summary::-webkit-details-marker { display: none; }
details.sekcja-onas > summary::after { content: "▾"; margin-left: auto; color: var(--dim); }
details.sekcja-onas[open] > summary::after { content: "▴"; }
details.sekcja-onas .cialo { padding: 0 16px 16px; }

/* ============ HERO / NAGŁÓWKI ============ */
.hero { background: radial-gradient(1100px 420px at 75% -10%, var(--hero-a), transparent 60%), radial-gradient(900px 380px at 10% 0%, var(--hero-b), transparent 55%), var(--bg); }
.hero .wrap { padding-top: 22px; padding-bottom: 20px; }
.crumb { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); font-weight: 600; font-size: .95rem; }
.crumb:hover { color: var(--text); }
h1 { font-family: var(--disp); font-weight: 800; font-size: 1.9rem; line-height: 1.08; margin-top: 4px; overflow-wrap: break-word; }
h1 .thin { color: var(--acc); }
@media (min-width: 900px) { h1 { font-size: 2.6rem; } }
h2.sec { font-family: var(--disp); text-transform: uppercase; letter-spacing: .06em; font-size: 1.2rem; margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; }
h2.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lead { color: var(--dim); font-size: 1rem; max-width: 60ch; }

/* ============ BADGE / STATUS ============ */
.badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 3px 14px; border-radius: 999px; font-weight: 700; font-size: .95rem; border: 1px solid var(--line); }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge-live { background: var(--acc-tint); color: var(--acc); border-color: var(--acc); }
.badge-live .dot { animation: pulse 1.3s infinite; }
.badge-oficjalna { background: var(--good-tint); color: var(--good); border-color: var(--good); }
.badge-robocza { background: var(--info-tint); color: var(--info); border-color: var(--info); }
.badge-liczenie { background: var(--info-tint); color: var(--info); border-color: var(--info); border-style: dashed; }
.badge-plan { color: var(--dim); }
.badge-czekamy { background: var(--acc-tint); color: var(--acc); border-color: var(--acc); border-style: dashed; }
@keyframes pulse { 50% { opacity: .25; } }
.stamp { color: var(--dim); font-size: .88rem; }
/* Z137 E6: znacznik wpisu aktualności liczonego automatycznie z danych lotów */
.news-auto { display: inline-block; margin-left: .5rem; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-family: inherit; font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; vertical-align: middle; white-space: nowrap; }

/* ============ KARTY / STATY / SIATKI ============ */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.stat b { display: block; font-family: var(--mono); font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; }
.stat span { color: var(--dim); font-size: .92rem; }
.grid3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }

/* ============ PRZYCISKI / CHIPY ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 1rem; }
.btn-acc { background: linear-gradient(135deg, var(--acc), var(--acc-deep)); color: var(--acc-ink); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--acc); }
.chip-toggle { min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; color: var(--dim); display: inline-flex; align-items: center; gap: 8px; }
.chip-toggle[aria-pressed="true"] { background: var(--acc-tint); color: var(--acc); border-color: var(--acc); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chips a { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; color: var(--dim); display: inline-flex; align-items: center; }
.chips a[aria-current="true"] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }

/* ============ ZAKŁADKI LIST (linki GET — D5/S4-D18) ============ */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.tab { min-height: 48px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; color: var(--dim); display: inline-flex; align-items: center; gap: 8px; }
.tab small { font-weight: 600; color: var(--dim); font-size: .82rem; }
.tab[aria-current="true"] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.tab[aria-current="true"] small { color: var(--acc-ink); }

/* ============ SZUKAJKA / PASEK MOJE ============ */
.listbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.search input { flex: 1; min-height: 48px; background: none; border: 0; color: var(--text); font: inherit; font-size: 1rem; }
.search input::placeholder { color: var(--dim); }
.mine-note { background: var(--mine); border-left: 4px solid var(--mine-edge); border-radius: 8px; padding: 10px 14px; font-size: .98rem; margin: 10px 0; }
.mine-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mine-form input { min-height: 48px; width: 110px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; padding: 0 10px; }

/* ============ LISTA WYNIKÓW (karty mobile / tabela desktop) ============ */
.rlist { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); content-visibility: auto; }
.rhead { display: none; grid-template-columns: 56px 1fr 130px 110px 90px; gap: 8px; padding: 10px 14px; color: var(--dim); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .rhead { display: grid; } }
.rrow { border-bottom: 1px solid var(--line); }
.rrow:last-child { border-bottom: 0; }
.rrow.mine { background: var(--mine); box-shadow: inset 4px 0 0 var(--mine-edge); }
.rrow > summary { list-style: none; cursor: pointer; }
.rrow > summary::-webkit-details-marker { display: none; }
.rmain { display: grid; grid-template-columns: 44px 1fr auto; gap: 6px 10px; align-items: center; width: 100%; padding: 10px 14px; text-align: left; min-height: 72px; }
@media (min-width: 900px) { .rmain { grid-template-columns: 56px 1fr 130px 110px 90px; gap: 8px; } }
.rpos { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; }
.rwho b { display: block; font-size: 1rem; }
.rwho .obr { color: var(--dim); font-family: var(--mono); font-size: .95rem; }
.rwho .mine-tag { display: inline-block; margin-left: 6px; color: var(--mine-edge); font-weight: 700; font-size: .85rem; }
.rspeed { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; text-align: right; }
.rspeed span { display: block; color: var(--dim); font-size: .78rem; font-weight: 600; font-family: system-ui, sans-serif; }
.rtime, .rcoef { display: none; font-family: var(--mono); text-align: right; color: var(--dim); }
@media (min-width: 900px) { .rtime, .rcoef { display: block; } }
.rext { padding: 4px 14px 14px; }
.rext .gridx { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; padding: 10px 0; }
@media (min-width: 640px) { .rext .gridx { grid-template-columns: repeat(4, 1fr) ; } }
.rext .kv span { display: block; color: var(--dim); font-size: .85rem; }
.rext .kv b { font-family: var(--mono); font-size: 1rem; }

/* W-K-S w wierszu głównym (parytet z panelem — brief L D7) */
.rwho .rwks { display: block; margin-top: 2px; color: var(--dim); font-family: var(--mono); font-size: .9rem; letter-spacing: .02em; white-space: pre; }

/* Rozdzielacze końca konkursu (brief L D8) */
.rrow-sep { padding: 8px 14px; text-align: center; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); background: var(--acc-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ============ WIDOK KLASYCZNY LISTY (pełna tabela — brief lista-widok-klasyczny) ============ */
.widok-przelacznik { display: flex; gap: 8px; margin: 12px 0 10px; flex-wrap: wrap; }
.tabela-klasyczna-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); margin: 8px 0; }
.tabela-klasyczna { border-collapse: collapse; width: 100%; min-width: 920px; font-size: 1rem; }
.tabela-klasyczna thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); color: var(--dim); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.tabela-klasyczna thead th.lk-num { text-align: right; }
.tabela-klasyczna td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabela-klasyczna tbody tr:nth-child(even):not(.lk-sep) td { background: var(--panel-2); }
.tabela-klasyczna .lk-num { text-align: right; }
.tabela-klasyczna .tnum { font-family: var(--mono); }
.tabela-klasyczna .lk-wks { color: var(--dim); white-space: pre; }
.tabela-klasyczna tr.rrow.mine td { background: var(--mine); box-shadow: inset 4px 0 0 var(--mine-edge); }
.tabela-klasyczna tr.rrow.mine .mine-tag { color: var(--mine-edge); font-weight: 700; }
.tabela-klasyczna .lk-sep td { text-align: center; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); background: var(--acc-tint); }
/* sticky pierwsza kolumna (Nr kon.) — kotwica przy poziomym scrollu; tło z tokenów (bez prześwitu — pułapka §7) */
.tabela-klasyczna .lk-poz { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.tabela-klasyczna thead th.lk-poz { z-index: 3; }
.tabela-klasyczna tbody tr:nth-child(even):not(.lk-sep) td.lk-poz { background: var(--panel-2); }
.tabela-klasyczna tr.rrow.mine td.lk-poz { background: var(--mine); }

/* ============ NAGŁÓWEK LISTY DLA GOŚCI (parytet z panelem — brief L) ============ */
details.lista-naglowek { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); margin: 0 0 14px; }
details.lista-naglowek > summary { list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; cursor: pointer; text-align: center; }
details.lista-naglowek > summary::-webkit-details-marker { display: none; }
details.lista-naglowek > summary .ln-tytul { font-weight: 800; font-size: 1.05rem; }
details.lista-naglowek > summary .ln-hint { color: var(--dim); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
details.lista-naglowek[open] > summary .ln-hint { color: var(--acc); }
.lista-naglowek .ln-tresc { padding: 4px 14px 16px; }
.lista-naglowek .ln-naglowek-txt { text-align: center; color: var(--dim); margin: 6px 0 12px; }
.lista-naglowek .ln-naglowek-txt p { margin: 2px 0; font-size: .92rem; }
.lista-naglowek .ln-naglowek-txt h3 { color: var(--text); font-family: var(--disp); font-size: 1.2rem; font-weight: 800; margin-top: 6px; }
.lista-naglowek .tabela-scroll { max-width: 100%; overflow-x: auto; margin: 10px auto; }
.lista-naglowek .nag-tab { width: 100%; max-width: 620px; margin: 0 auto; border-collapse: collapse; font-size: .9rem; }
.lista-naglowek .nag-tab td, .lista-naglowek .nag-tab th { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lista-naglowek .nag-tab td:last-child, .lista-naglowek .nag-tab th:last-child { text-align: right; font-family: var(--mono); white-space: nowrap; }
.lista-naglowek .nag-tab td:first-child { color: var(--dim); }
.lista-naglowek .nag-tab-siatka { white-space: nowrap; }
.lista-naglowek .nag-tab-siatka th { color: var(--dim); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .03em; text-align: right; }
.lista-naglowek .nag-tab-siatka th:first-child, .lista-naglowek .nag-tab-siatka td:first-child { text-align: left; color: var(--text); }
.lista-naglowek .nag-tab-siatka td { text-align: right; font-family: var(--mono); }
.lista-naglowek .nag-tab .ln-razem td { font-weight: 800; color: var(--text); border-top: 2px solid var(--line); }
.lista-naglowek .ln-ok { color: var(--good, var(--acc)); font-weight: 800; margin-left: 6px; }

/* tryb „więcej kolumn" (przełącznik w localStorage — 6→16 kolumn na desktopie) */
@media (min-width: 900px) {
    .rlist[data-kolumny="16"] .rext { display: block; }
}

/* ============ OŚ CZASU LOTU ============ */
.timeline { display: grid; gap: 0; margin-top: 8px; }
.tl { display: grid; grid-template-columns: 26px 1fr; gap: 12px; position: relative; padding-bottom: 18px; }
.tl::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl .pt { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: .8rem; z-index: 1; }
.tl.done .pt { background: var(--good-tint); border-color: var(--good); color: var(--good); }
.tl.now .pt { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); animation: pulse 1.6s infinite; }
.tl b { display: block; font-size: 1rem; }
.tl .when { color: var(--dim); font-family: var(--mono); font-size: .9rem; }
.tl.todo { opacity: .55; }

/* ============ SLOTY REKLAM (kontenery D10; wysokość zarezerwowana → CLS 0) ============ */
.ad-slot { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: var(--ad-bg); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--dim); font-size: .85rem; margin: 16px 0; }
.ad-slot::before { content: "Reklama"; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.ad-s1, .ad-s2 { min-height: 280px; }
@media (min-width: 900px) { .ad-s1, .ad-s2 { min-height: 250px; } }
.ad-s3 { min-height: 120px; }
/* Z137 R2: okienko istniejące w HTML tylko dla jednego rodzaju urządzenia (telefon < 900 px / komputer ≥ 900 px) —
   drugie ukrywa CSS, a do AdSense zgłasza się wyłącznie widoczne (portal.js, data-ad-lazy) */
@media (min-width: 900px) { .ad-slot.ad-tylko-telefon { display: none; } }
@media (max-width: 899px) { .ad-slot.ad-tylko-komputer { display: none; } }
/* Z137 R2: okienko jako PEŁNY WIERSZ w liście wyników — wyraźnie oddzielone od wyników (własne tło, ramka, odstęp
   góra/dół ≥ 14 px, podpis „Reklama” z .ad-slot::before), żeby nie wyglądało jak wynik ani nie stało przy przyciskach */
.ad-slot.ad-w-liscie { margin: 18px 10px; min-height: 250px; border-style: dashed; }
/* AdSense mierzy szerokość jednostki przy zgłoszeniu — lista z okienkiem nie może mieć pomijanej zawartości poza ekranem */
.rlist:has(.ad-w-liscie, .pz-w-liscie) { content-visibility: visible; }

/* ============ BANER PARTNERA 468×60 (Z137 R3) ============ */
.pz-polecamy { margin: 16px auto; max-width: 468px; text-align: center; }
.pz-polecamy a { display: block; line-height: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.pz-polecamy img { display: block; width: 100%; max-width: 468px; height: auto; aspect-ratio: 468 / 60; object-fit: contain; background: var(--ad-bg); }
.pz-polecamy-podpis { display: block; margin-top: 3px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); opacity: .8; }
.pz-polecamy-pusty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 468 / 60; background: var(--ad-bg); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--dim); font-size: .8rem; padding: 4px 8px; }
.pz-polecamy-pusty .pz-polecamy-podpis { margin-top: 0; }
.pz-polecamy.pz-w-liscie { margin: 18px auto; padding: 0 10px; min-height: 0; }

/* ============ KAFELKI LOTÓW (hub/plan) ============ */
.race-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; min-height: 44px; }
.race-card:hover { border-color: var(--acc); }
/* O3/H3: jednolita pozycja plakietki statusu na kartach lotów (z flex-wrap długi
   tytuł spychał ją pod tytuł: raz prawa, raz lewa-pod = niespójnie).
   Mobile: plakietka ZAWSZE pod tytułem (osobny wiersz); ≥600px: ZAWSZE prawy
   górny róg, bez spadania — tytuł zawija się obok. */
.race-card .top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (min-width: 600px) {
    .race-card .top { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 10px; }
    .race-card .top .badge { flex: 0 0 auto; }
    .race-card .top h3 { min-width: 0; }
}
.race-card h3 { font-family: var(--disp); font-size: 1.25rem; font-weight: 800; }
.race-card .meta { color: var(--dim); font-size: .95rem; margin-top: 4px; }
.race-card .lists { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.race-card .lists span, .race-card .lists a { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 700; color: var(--dim); }
.race-card .lists a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.race-card .lists a:hover { color: var(--text); border-color: var(--acc); }
.race-card.odwolany { opacity: .65; }
.race-card.odwolany h3 { text-decoration: line-through; }
.race-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .race-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .race-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============ PLIKI / ZAŁĄCZNIKI ============ */
.att { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--dim); }
.att:hover { color: var(--text); border-color: var(--acc); }
.att-zablokowany { border-style: dashed; opacity: .75; cursor: not-allowed; }
.att-zablokowany:hover { color: var(--dim); border-color: var(--line); }

/* ============ LEGENDA / SZCZEGÓŁY ============ */
details.legenda { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); margin: 14px 0; }
details.legenda summary { min-height: 48px; display: flex; align-items: center; padding: 0 14px; font-weight: 700; cursor: pointer; color: var(--dim); }
details.legenda[open] summary { color: var(--text); }
details.legenda .tresc { padding: 0 14px 14px; color: var(--dim); }
details.legenda .tresc dt { font-weight: 700; color: var(--text); margin-top: 8px; }

/* ============ STANY WIDOKÓW ============ */
.stan { border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 22px 16px; text-align: center; margin: 16px 0; background: var(--panel); }
.stan h2, .stan h3 { font-size: 1.15rem; margin-bottom: 6px; }
.stan p { color: var(--dim); }
.stan .btn { margin-top: 12px; }

/* ============ PAGINACJA ============ */
.paginacja { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.paginacja a, .paginacja span.biezaca { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; color: var(--dim); }
.paginacja span.biezaca { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.paginacja a:hover { color: var(--text); border-color: var(--acc); }

/* ============ TABELE PROSTE (katalog okręgu, pliki) ============ */
.tabela { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.tabela thead th { border-top: 0; color: var(--dim); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }

/* ============ FORMULARZ HASŁA (DostepListy=1/3 — D13) ============ */
.haslo-form { max-width: 420px; margin: 20px auto; display: grid; gap: 10px; }
.haslo-form input { min-height: 48px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; padding: 0 12px; }

/* ============ STOPKA ============ */
.help-footer { margin-top: 34px; border-top: 1px solid var(--line); background: var(--panel); }
.help-footer .wrap { display: grid; gap: 14px; padding: 22px 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .help-footer .wrap { grid-template-columns: repeat(3, 1fr); } }
.help-footer b { display: block; margin-bottom: 4px; flex-basis: 100%; }
/* S4 (2026-09-06): linki stopki zlewały się („Listy konkursowePlan lotów") — kolumna stopki jako
   flex z odstępem między linkami; nagłówek <b> zawsze w osobnym wierszu */
.help-footer .wrap > div { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; column-gap: 18px; row-gap: 2px; }
.help-footer a { display: inline-flex; min-height: 44px; align-items: center; color: var(--acc); font-weight: 600; }
.foot-note { border-top: 1px solid var(--line); color: var(--dim); font-size: .85rem; }
/* Z137 E8: dolny wiersz stopki — elementy jako osobne bloki: na telefonie jeden pod drugim, wyśrodkowane
   (bez wiszących kropek); od 700 px jedna równa linia z kropką między elementami */
.foot-note .wrap { padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 0 1.4em; }
.foot-note .wrap > * { flex: 0 0 100%; }
.foot-note a { color: var(--acc); font-weight: 600; min-height: 0; }
@media (max-width: 699px) { .foot-note a { justify-content: center; min-height: 44px; } }
@media (min-width: 700px) {
    .foot-note .wrap > * { flex: 0 0 auto; position: relative; }
    .foot-note .wrap > * + *::before { content: "·"; position: absolute; left: -.85em; color: var(--dim); }
}

/* ============ SYMULATOR LOTU (E3b — wzór mockup lot.html) ============ */
.sim { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.sim-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sim-top h2 { font-family: var(--disp); text-transform: uppercase; letter-spacing: .06em; font-size: 1.15rem; color: var(--dim); }
.live-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--live); }
.live-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--live); animation: pulse 1.3s infinite; }
.clock { font-family: var(--mono); font-weight: 700; font-size: 2.4rem; letter-spacing: -.02em; }
.sim-kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 640px) { .sim-kv { grid-template-columns: repeat(4, 1fr); } }
.sim-kv .kv { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sim-kv .kv span { display: block; color: var(--dim); font-size: .85rem; }
.sim-kv .kv b { font-family: var(--mono); font-size: 1.15rem; }
.sim-map { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.sim-map svg { display: block; width: 100%; height: auto; }
.sim-slider { margin-top: 14px; }
.sim-slider label { display: flex; justify-content: space-between; color: var(--dim); font-size: .92rem; font-weight: 600; }
.sim-slider label b { color: var(--text); font-family: var(--mono); }
.sim-slider input[type=range] { width: 100%; min-height: 44px; accent-color: var(--acc); }
.sim-note { margin-top: 10px; color: var(--dim); font-size: .88rem; border-left: 3px solid var(--line); padding-left: 10px; }
.sim-eta { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sim-eta select { min-height: 48px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font: inherit; max-width: 100%; }
.sim-eta .eta-big { font-family: var(--mono); font-weight: 700; font-size: 1.5rem; color: var(--acc); }
.weather-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; border-radius: 999px; background: var(--info-tint); color: var(--info); font-weight: 600; font-size: .92rem; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 60; background: var(--panel-2); border: 1px solid var(--acc); color: var(--text); border-radius: 10px; padding: 12px 18px; font-weight: 600; box-shadow: var(--shadow); max-width: 92vw; }

/* pomocnicze */
.mt0 { margin-top: 0; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spread { justify-content: space-between; }
main.tresc { min-height: 40vh; }
main.tresc > .wrap { padding-top: 10px; padding-bottom: 30px; }

/* ============ Higiena E1 (diagnostyka, offline, 404 — bez zmian kontraktu) ============ */
.karta { max-width: 52rem; margin: 1.5rem auto; padding: 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.5rem; }
.opis { margin: 0.5rem 0; color: var(--dim); }
.diagnostyka { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.diagnostyka caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; }
.diagnostyka th, .diagnostyka td { text-align: left; padding: 0.4rem 0.6rem; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.diagnostyka th { width: 40%; font-weight: 600; }
.slot-reklamy { margin-top: 1.25rem; padding: 0.75rem; border: 1px dashed var(--line); border-radius: 0.375rem; text-align: center; }
.slot-reklamy-etykieta { color: var(--dim); }
@media (max-width: 480px) {
    .karta { margin: 0.75rem; padding: 1rem; }
    .diagnostyka th { width: 45%; }
}

/* ===== E5: pogoda publiczna, mapa trasy, TOP sezonu ===== */
:root { --uwaga: #d97706; --uwaga-tint: rgba(217, 119, 6, .14); --zle: #dc2626; --zle-tint: rgba(220, 38, 38, .12); }
html[data-skin="swit"] { --uwaga: #b45309; --uwaga-tint: rgba(180, 83, 9, .12); --zle: #b91c1c; --zle-tint: rgba(185, 28, 28, .10); }
html[data-skin="wieczor"] { --uwaga: #fbbf24; --uwaga-tint: rgba(251, 191, 36, .14); --zle: #f87171; --zle-tint: rgba(248, 113, 113, .13); }

/* chip trudności (D14: tint tła + tekst + kropka; znaczenie nigdy samym kolorem) */
.chip-pogoda { display: inline-flex; align-items: center; gap: 8px; min-height: 28px;
    padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line);
    font-size: .95em; font-weight: 700; }
.chip-pogoda .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.chip-dobry  { background: var(--good-tint);  color: var(--good);  border-color: var(--good); }
.chip-uwaga  { background: var(--uwaga-tint); color: var(--uwaga); border-color: var(--uwaga); }
.chip-trudny { background: var(--zle-tint);   color: var(--zle);   border-color: var(--zle); }
.race-card .chip-pogoda { font-size: .82em; min-height: 24px; padding: 1px 10px; }

/* profil trasy: mini-wykres wiatru + pasek punktów */
.profil-wiatr { width: 100%; height: 84px; display: block; }
.profil-wiatr .linia-zero { stroke: var(--line); stroke-width: 1; }
.profil-wiatr .linia-wiatr { stroke: var(--info); stroke-width: 3; }
.profil-pasek { position: relative; display: flex; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.profil-punkt { display: flex; flex-direction: column; gap: 2px; min-width: 96px;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel-2); font-size: .9em; position: static; }
.profil-punkt .ikona { font-size: 1.3em; }
.profil-details summary { cursor: pointer; min-height: 44px; display: flex;
    align-items: center; font-weight: 700; }
@media (min-width: 768px) { .profil-details summary { pointer-events: none; }
    .profil-details summary::marker, .profil-details summary::-webkit-details-marker { content: ""; display: none; } }
.link-panel { font-weight: 700; }

/* mapa trasy SVG (D5: tylko start + trasa + promień) */
.mapa-trasy { margin: 0; }
.mapa-trasy svg { width: 100%; height: auto; max-height: 460px; display: block;
    background: var(--panel-2); border-radius: 12px; }
.mapa-kontur { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.mapa-trasa { stroke: var(--acc); stroke-width: 3.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.mapa-strzalka { fill: var(--acc); }
.mapa-start { fill: var(--acc); stroke: var(--panel); stroke-width: 2.5; }
.mapa-promien-max { fill: var(--info-tint); stroke: var(--info); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mapa-promien-min { fill: none; stroke: var(--info); stroke-width: 1; opacity: .55; }
.mapa-etykieta { fill: var(--text); font-size: 20px; font-weight: 700;
    paint-order: stroke; stroke: var(--panel-2); stroke-width: 5px; stroke-linejoin: round; }
.mapa-trasy figcaption { margin-top: 8px; }
/* szkic trasy jest przełącznikiem mapy interaktywnej (sesja #4) */
.mapa-trasy[data-mapa-przelacznik] { cursor: pointer; }
.mapa-trasy[data-mapa-przelacznik]:hover svg { filter: brightness(1.04); }
.mapa-trasy[data-mapa-przelacznik]:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 12px; }

/* mapa interaktywna (Leaflet lazy) */
.mapa-przycisk { min-height: 48px; }
.mapa-kontener { height: 420px; border-radius: 12px; margin-top: 10px; }

/* mapa gołębników (M-1): większy kontener + legenda sekcji */
.mapa-kontener-duza { height: 520px; }
@media (max-width: 640px) { .mapa-kontener-duza { height: 420px; } }
.mapa-legenda { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.legenda-poz { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.legenda-kolor { width: 14px; height: 14px; border-radius: 50%; flex: none;
    border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); background: var(--dim); }

/* pętla #4 it.2: pozycje legendy jako przyciski filtrujące markery po sekcji */
.legenda-filtr { background: var(--panel); color: var(--text); border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 14px; cursor: pointer; font: inherit; font-weight: 600; }
.legenda-filtr:hover { border-color: var(--acc); }
.legenda-filtr:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.legenda-filtr.aktywna { border-color: var(--acc); background: var(--panel-2);
    box-shadow: inset 0 0 0 1px var(--acc); }
.sekcja-tabela h3 { margin-bottom: 8px; }
.sekcja-hodowcy { margin: 0; padding-left: 22px; columns: 3; column-gap: 28px; }
.sekcja-hodowcy li { break-inside: avoid; padding: 3px 0; }
@media (max-width: 640px) { .sekcja-hodowcy { columns: 2; } }
@media (max-width: 420px) { .sekcja-hodowcy { columns: 1; } }

/* TOP sezonu */
.top-sezonu .obraczka { font-weight: 800; letter-spacing: .02em; }
.top-golab-roku .obraczka { font-size: 1.35em; }
.top-lista { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.top-lista li { display: list-item; }
.top-lista li > * { margin-right: 8px; }
.chip-neutralny { background: var(--panel-2); color: var(--text); border-color: var(--line); }

/* ── E pakiet 2: pasek postępu nawigacji + spinner zakładek ── */
.nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
    background: linear-gradient(90deg, var(--acc), var(--acc-deep)); opacity: 0;
    transition: width .2s ease; pointer-events: none; }
.nav-progress.aktywny { opacity: 1; }
.nav-progress.konczenie { transition: width .18s ease, opacity .26s ease .12s; opacity: 0; }
.tab.tab-loading { position: relative; }
.tab.tab-loading::after { content: ""; width: 14px; height: 14px; margin-left: 2px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    display: inline-block; animation: nav-spin .7s linear infinite; }
@keyframes nav-spin { to { transform: rotate(360deg); } }

/* ── E pakiet 3: zapowiedź + Centrum lotu (powtórka finiszu) ── */
.zapowiedz .badge-plan { font-weight: 700; }
.odliczanie { margin-top: 8px; font-size: 1.05rem; }
.odliczanie b { font-family: var(--mono); color: var(--acc); }
.powtorka { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.powtorka-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chip-powtorka { color: var(--acc); }
.chip-powtorka .dot { background: var(--acc); }
.speed-now { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; }
.speed-now .dim { font-family: inherit; font-weight: 600; font-size: .85rem; }
.pw-progress { margin-top: 12px; }
.pw-lbl { display: flex; justify-content: space-between; font-size: .9rem; color: var(--dim); margin-bottom: 6px; }
.pw-lbl b { font-family: var(--mono); color: var(--text); }
.pw-bar { height: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc-deep)); transition: width .25s ease; }
.pw-runway { position: relative; height: 74px; margin-top: 12px; border-radius: 12px;
    border: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 38px, var(--line) 38px 39px); overflow: hidden; }
.pw-lane { position: absolute; inset: 0; }
.pw-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--acc);
    box-shadow: 0 0 8px var(--acc); transition: left .4s ease; }
.powtorka-akcje { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.powtorka-note { margin-top: 10px; font-size: .9rem; }

/* ── E pakiet 4: mapa+ (kierunek, pełny ekran, markery) ── */
.mapa-kierunek { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-weight: 700;
    color: var(--acc); text-shadow: 0 1px 3px rgba(0,0,0,.55); white-space: nowrap; }
.mapa-kierunek .strzalka { display: inline-block; font-size: 1.1rem; }
.mapa-kierunek .km { font-size: .85rem; }
.mapa-pelny-ekran { width: 34px; height: 34px; background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; cursor: pointer; box-shadow: var(--shadow); }
.mapa-pelny-ekran:hover { border-color: var(--acc); }
.mapa-kontener.mapa-fs-fallback { position: fixed; inset: 0; z-index: 200; height: 100vh; border-radius: 0; margin: 0; }

/* ── pętla #4 it.3: chipy pogody w punktach trasy na mapie lotu ── */
.mapa-pogoda-punkt { display: flex; align-items: center; justify-content: center; gap: 4px;
    background: rgba(255,255,255,.92); color: #1f2937; border: 1px solid rgba(0,0,0,.18);
    border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: .82rem;
    width: auto !important; padding: 2px 8px; white-space: nowrap; }
.mapa-pogoda-punkt .ikona { font-size: 1rem; line-height: 1; }
.mapa-pogoda-punkt .temp { font-family: var(--mono); }
.mapa-pogoda-punkt .wiatr { display: inline-block; color: #2563eb; font-size: .9rem; line-height: 1; }
.mapa-pogoda-nota { margin: 8px 0 0; font-size: .88rem; }

/* ── pętla #4 it.5: suwak powtórki lotu pod mapą ── */
.mapa-powtorka { margin-top: 10px; }
.mapa-powtorka label { display: block; font-weight: 600; margin-bottom: 4px; }
.mapa-powtorka b { color: var(--acc); }
.mapa-powtorka input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--acc); }

/* ── pętla #4 it.1: mini-legenda kolorów markerów gołębników pod mapą lotu ── */
.mapa-mini-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .88rem; }
.mapa-mini-legenda .poz { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.mapa-mini-legenda .poz i { width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: reduce) {
    .nav-progress, .pw-bar i, .pw-dot { transition: none; }
    .tab.tab-loading::after { animation: none; }
}

/* ── H: sekcja współzawodnictw na stronie lotu ── */
.wsp-lotu { display: flex; flex-direction: column; gap: 10px; }
.wsp-grupa { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.wsp-grupa-tytul { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 1.05rem; min-height: 48px; display: flex; align-items: center; gap: 8px; }
.wsp-grupa[open] .wsp-grupa-tytul { border-bottom: 1px solid var(--line); }
.wsp-jedno { padding: 12px 16px; }
.wsp-jedno + .wsp-jedno { border-top: 1px dashed var(--line); }
.wsp-nazwa { margin: 4px 0 10px; font-size: 1rem; }
.wsp-demo { font-size: .85rem; margin-bottom: 8px; }
.wsp-tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.wsp-tabela { border-collapse: collapse; width: 100%; font-size: .92rem; white-space: nowrap; }
.wsp-tabela th, .wsp-tabela td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.wsp-tabela thead th { background: var(--panel-2); color: var(--dim); font-weight: 700; position: sticky; top: 0; }
.wsp-tabela tbody tr:last-child td { border-bottom: 0; }
.wsp-wiersz-demo { opacity: .6; font-style: italic; }
.wsp-zmiana { font-family: var(--mono); font-weight: 700; text-align: center; }
.zmiana-gora { color: var(--good); }
.zmiana-dol { color: var(--live); }
.zmiana-rowna { color: var(--dim); }

/* Herb i logo PZHGP (user 2026-09-06): większe, czytelne — 48 px w pasku, 40 px na wąskim telefonie;
   legacy upload (img.herb) tak samo; obrazy 98 px ze starego portalu nie tracą ostrości. */
.logo img.herb { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; }
.logo .sq { width: 48px; height: 48px; }

/* Z137 E8 (W120–W124): subtelna wzmianka o produkcie — jedna linia pod treścią (bez okien) */
.wzmianka { margin: 12px 0 4px; font-size: .85rem; color: var(--dim, inherit); line-height: 1.4; overflow-wrap: anywhere; }
.wzmianka a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wzmianka a:hover { color: var(--text, inherit); }

/* ============================================================================
   Z137 E12 (W150, W160, W162, W163) — nowa rama strony wg makiet docs/obsidian/08-Wiedza/mockupy/strony-pzhgp/e12.
   Dotyczy WSZYSTKICH szablonów: Transmisja (brak data-szablon), Przewodnik, Horyzont (fala B) oraz Relacja, Przestworza,
   Mozaika i Rozgrywki (E12-C1 — ich arkusze nadpisują tylko to, co psuje ich charakter). Selektor html:is(…) zachowuje
   dotychczasową specyficzność, więc reguły arkuszy szablonów (html[data-szablon="…"] …) mają pierwszeństwo.
   ============================================================================ */

/* ---- W150: treść do 1240 px, mniejsze odstępy pionowe ---- */
html:is(:not([data-szablon]), [data-szablon]) .wrap { max-width: 1240px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 900px) {
    html:is(:not([data-szablon]), [data-szablon]) .wrap { padding-left: 24px; padding-right: 24px; }
}
html:is(:not([data-szablon]), [data-szablon]) .hero .wrap { padding-top: 14px; padding-bottom: 12px; }
html:is(:not([data-szablon]), [data-szablon]) h1 { font-size: 1.75rem; }
@media (min-width: 900px) {
    html:is(:not([data-szablon]), [data-szablon]) h1 { font-size: 2rem; }
}
html:is(:not([data-szablon]), [data-szablon]) h2.sec { margin: 18px 0 8px; }
html:is(:not([data-szablon]), [data-szablon]) main.tresc > .wrap { padding-top: 8px; padding-bottom: 22px; }
html:is(:not([data-szablon]), [data-szablon]) .card { padding: 12px 14px; }
html:is(:not([data-szablon]), [data-szablon]) .grid3 { gap: 12px; }

/* Etykiety statusów (np. „Wyniki opublikowane”) — mały tekst z kropką zamiast dużego przycisku */
html:is(:not([data-szablon]), [data-szablon]) .badge {
    min-height: 0; padding: 0; gap: 6px; border: 0; border-radius: 0; background: none;
    font-size: .875rem; font-weight: 650; line-height: 1.3;
}
html:is(:not([data-szablon]), [data-szablon]) .badge-live,
html:is(:not([data-szablon]), [data-szablon]) .badge-oficjalna,
html:is(:not([data-szablon]), [data-szablon]) .badge-robocza,
html:is(:not([data-szablon]), [data-szablon]) .badge-liczenie,
html:is(:not([data-szablon]), [data-szablon]) .badge-czekamy { background: none; }

/* ---- W162: kafelki liczb — zwykła czcionka, cyfry tabelaryczne, podpis zwykłymi literami, jeden rząd ---- */
/* jeden pasek o szerokości treści (makieta E12: .stat), na telefonie 4 kolumny w jednym rzędzie */
html:is(:not([data-szablon]), [data-szablon]) .stats {
    display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin-top: 10px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); width: max-content; max-width: 100%; overflow: hidden;
}
html:is(:not([data-szablon]), [data-szablon]) .stat {
    padding: 6px 16px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none;
}
html:is(:not([data-szablon]), [data-szablon]) .stat:last-child { border-right: 0; }
@media (max-width: 899px) {
    html:is(:not([data-szablon]), [data-szablon]) .stats { width: 100%; grid-template-columns: repeat(4, 1fr); }
    html:is(:not([data-szablon]), [data-szablon]) .stat { padding: 5px 8px; }
    html:is(:not([data-szablon]), [data-szablon]) .stat b { font-size: 1.05rem; }
}
html:is(:not([data-szablon]), [data-szablon]) .stat b {
    font-family: inherit; font-size: 1.25rem; font-weight: 700; letter-spacing: 0; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
html:is(:not([data-szablon]), [data-szablon]) .stat span {
    font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim);
}

/* ---- W160: nagłówek jednostki (NaglowekJednostki.razor) ---- */
@media (max-width: 420px) { .jh-okreg { display: none; } }
.jh .wrap { min-height: 76px; gap: 14px; }
.jh .logo { flex: 0 1 auto; gap: 14px; min-height: 0; font-weight: 400; letter-spacing: 0; color: var(--text); }
.jh .logo .herby, .jh .logo .herby img, .jh .logo img.herb, .jh .logo .sq { width: 46px; height: 46px; }
.jh .logo .sq { border-radius: 10px; font-size: 1.3rem; font-weight: 800; }
.jh-nazwa { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.jh-duza {
    font-family: var(--disp); font-size: 1.733rem; font-weight: 850; letter-spacing: -.015em; line-height: 1.05;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jh-pz { color: var(--acc); }
.jh-mala { margin-top: 3px; font-size: .867rem; font-weight: 500; letter-spacing: 0; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jh-pzhgp { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--dim); font-size: .8rem; line-height: 1.2; text-align: right; }
.jh-pzhgp-logo { width: 56px; height: 56px; flex: none; object-fit: contain; }
.jh .ust-btn { width: 40px; height: 40px; }
/* Szablony Przewodnik i Horyzont: od samej góry przykleja się pasek menu — nagłówek (76 px) na komputerze przewija się ze stroną */
@media (min-width: 900px) {
    .jh.pz-appbar, .jh.hz-appbar { position: static; }
}
@media (max-width: 899px) {
    .jh .wrap { min-height: 58px; gap: 10px; padding-top: 4px; padding-bottom: 4px; }
    .jh .logo { flex: 1 1 0; min-width: 0; gap: 9px; }
    .jh .logo .herby, .jh .logo .herby img, .jh .logo img.herb, .jh .logo .sq { width: 32px; height: 32px; }
    .jh .logo .sq { font-size: 1rem; border-radius: 8px; }
    .jh-duza { font-size: 1.267rem; }
    .jh-mala { margin-top: 1px; font-size: .8rem; }
    .jh-pzhgp-podpis { display: none; }
    .jh-pzhgp-logo { width: 38px; height: 38px; }
    .jh .grow { display: none; }
}
@media (max-width: 389px) {
    .jh .wrap { gap: 8px; }
    .jh-mala { font-size: .75rem; }
}

/* ---- W163: stopka jednostki (StopkaJednostki.razor) — jeden rząd + linia praw ---- */
.jf { margin-top: 26px; border-top: 1px solid var(--line); background: var(--panel); font-size: .9rem; }
.jf-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 36px; align-items: center; padding: 14px 0 10px; }
.jf-kto { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jf-herb, .jf-sq { width: 30px; height: 30px; flex: none; object-fit: contain; }
.jf-sq { display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; color: var(--acc-ink); background: linear-gradient(135deg, var(--acc), var(--acc-deep)); }
.jf-kto b { display: block; font-size: 1rem; }
.jf-dim { color: var(--dim); }
.jf-dim a, .jf-linki a { color: var(--acc); font-weight: 600; }
.jf-linki { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.jf-linki a { display: inline-flex; align-items: center; min-height: 32px; }
.jf .foot-note .wrap { padding-top: 8px; padding-bottom: 12px; }
@media (min-width: 700px) {
    .jf .foot-note .wrap { justify-content: flex-start; text-align: left; }
}
@media (max-width: 899px) {
    .jf-row { grid-template-columns: 1fr; padding: 12px 0 6px; }
    .jf-linki { gap: 0 18px; }
    .jf-linki a { min-height: 44px; }
}

/* ============ LOGOWANIE HODOWCÓW (Z137 W35) ============ */
.hod-panel label { font-weight: 600; font-size: .9rem; }
.hod-panel .btn { min-height: 48px; }
.hod-linki { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.hod-linki a { display: inline-flex; align-items: center; min-height: 44px; color: var(--acc); font-weight: 600; }
.hod-linia { margin: 0; }
.hod-info { max-width: 520px; margin: 14px auto; }
/* „Zaloguj się (hodowcy)” / „Zalogowany: … · Wyloguj” w niskiej stopce */
.hod-stopka { color: var(--dim); }
.hod-wyl { display: inline; margin: 0; }
.hod-wyl button { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--acc); cursor: pointer; text-decoration: underline; min-height: 0; }
.hod-panel .hod-wyl button { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; text-decoration: none; color: var(--text); }
@media (max-width: 699px) { .hod-wyl button { min-height: 44px; } .hod-stopka { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4em; } }

/* ============ PASEK „PODGLĄD” (Z137 W191) — tylko host podglądu {sub}-podglad.pzhgp.net ============
   Wysoki kontrast NIEZALEŻNY od skórki (stałe kolory, nie tokeny): #111 na #facc15 ≈ 12:1. Telefon i średnie okna: pasek w
   normalnym przepływie (przewija się ze stroną, bez wpływu na przyklejone menu, dolny pasek i menu „Więcej” — z-index niżej
   niż one). ≥ 1000 px: pasek przyklejony do góry (wysokość stała --pp-h), a przyklejone nagłówki szablonów dostają
   przesunięcie o tę wysokość (html[data-podglad]), żeby nie chowały się pod paskiem. */
.pasek-podgladu {
    position: relative; z-index: 45; box-sizing: border-box;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px;
    padding: 4px 16px; background: #facc15; color: #111; border-bottom: 2px solid #111;
    font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0;
}
.pasek-podgladu b { font-weight: 800; }
.pasek-podgladu .pp-znak { flex: 0 0 auto; text-transform: uppercase; letter-spacing: .02em; }
.pasek-podgladu .pp-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasek-podgladu .pp-linki { margin-left: auto; display: flex; flex: 0 0 auto; gap: 4px 10px; align-items: center; }
.pasek-podgladu a {
    color: #111; text-decoration: underline; text-underline-offset: 2px; font-weight: 700;
    min-height: 32px; display: inline-flex; align-items: center; padding: 0 2px;
}
.pasek-podgladu a:hover { text-decoration-thickness: 2px; }
.pasek-podgladu a:focus-visible { outline: 3px solid #111; outline-offset: 1px; }
.pasek-podgladu .pp-k { display: none; }
@media (max-width: 699px) {
    /* telefon: wiersz 1 = napis PODGLĄD, wiersz 2 = „Oglądasz: …” (skracane) + link do panelu; reszta w tytule/stronie właściwej */
    .pasek-podgladu { padding: 2px 16px; gap: 0 10px; }
    .pasek-podgladu .pp-znak { flex: 1 0 100%; }
    .pasek-podgladu .pp-ogladasz { flex: 1 1 0; }
    .pasek-podgladu .pp-teraz, .pasek-podgladu .pp-wlasciwa { display: none; }
    .pasek-podgladu .pp-linki { margin-left: 0; }
    .pasek-podgladu .pp-d { display: none; }
    .pasek-podgladu .pp-k { display: inline; }
}
@media (min-width: 700px) and (max-width: 999px) {
    .pasek-podgladu .pp-teraz { display: none; }
}
@media (min-width: 1000px) {
    html[data-podglad] { --pp-h: 40px; }
    .pasek-podgladu { position: sticky; top: 0; height: var(--pp-h); flex-wrap: nowrap; overflow: hidden; padding-top: 0; padding-bottom: 0; }
    html[data-podglad] .appbar { top: var(--pp-h); }
    html[data-podglad][data-szablon] .pz-mainnav, html[data-podglad][data-szablon] .hz-mainnav { top: var(--pp-h); }
    html[data-podglad][data-szablon="rozgrywki"] .rzg-sezon { top: var(--pp-h); }
    html[data-podglad][data-szablon="relacja"] .rel-chapters { top: calc(var(--mg-appbar-h, 60px) + var(--pp-h)); }
}
/* W191b: podgląd osadzony w ramce panelu - bez paska, przyklejone nagłówki wracają na top:0 */
.w-ramce .pasek-podgladu { display: none; }
html.w-ramce[data-podglad] { --pp-h: 0px; }

/* mistrzostwa.css */
/* ============================================================================
   mistrzostwa.css — elementy WSPÓLNE wszystkich szablonów (2026-09-06): hub „Mistrzostwa"
   (/oddzial/mistrzostwa), leniwy skrót „Ten lot w mistrzostwach", przycisk „Pobierz plik z listą".
   Same tokeny public.css (--panel/--line/--acc…) → wygląd dopasowuje się do skórki każdego szablonu.
   Reguły wyniesione 1:1 z przewodnik.css (tam zostają tylko rzeczy ramy Przewodnika).
   ============================================================================ */
.eyebrow { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 700; margin: 0 0 4px; }
.sec-link { font-size: .9rem; font-weight: 600; color: var(--acc); text-transform: none; letter-spacing: 0; }
.pz-nota { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; color: var(--dim); font-size: .92rem; margin: 10px 0; }
.pz-nota a { color: var(--acc); font-weight: 600; }
.seg { display: inline-flex; background: var(--panel-2); border-radius: 12px; padding: 3px; margin-top: 10px; gap: 2px; }
.seg-btn { min-height: 42px; min-width: 110px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 700; color: var(--dim); }
.seg-btn[aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .10); }
.pz-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 10px 0; padding-bottom: 4px; scrollbar-width: thin; }
.pz-tabs .tab { flex: 0 0 auto; min-height: 42px; padding: 0 14px; border-radius: 999px; }
.pz-tabs .tab[aria-current="true"] { background: var(--text); color: var(--panel); border-color: var(--text); }
.pz-tabs .tab small { font-weight: 500; }
.pz-btn-szeroki { display: flex; justify-content: center; width: 100%; min-height: 50px; margin: 10px 0 4px; }
.pz-karta { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0 0 8px; }
.pz-karta-link { color: inherit; }
.pz-karta-link:hover { border-color: var(--acc); }
.pz-skrot-tresc { display: grid; gap: 2px; min-width: 0; }
.pz-skrot-dalej { color: var(--acc); font-weight: 700; white-space: nowrap; }
.pz-skrot-moj { color: var(--text); font-weight: 700; }
.pz-skrot-moj::before { content: " · "; font-weight: 400; color: var(--dim); }
.pz-po-locie { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pz-po-locie label { font-weight: 600; color: var(--dim); }
.pz-select { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--panel); color: var(--text); font: inherit; font-weight: 700; max-width: 100%; }
.pz-klas { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin: 0 0 8px; }
.pz-klas summary { list-style: none; cursor: pointer; padding: 12px 14px; }
.pz-klas summary::-webkit-details-marker { display: none; }
.pz-klas[open] summary { border-bottom: 1px solid var(--line); }
.pz-klas-nazwa { font-size: 1.05rem; }
.pz-klas-lead { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: .95rem; }
.pz-klas-lead .tnum { color: var(--acc); font-weight: 800; }
.pz-klas-moj { background: var(--mine); border-radius: 6px; padding: 0 8px; font-weight: 700; }
.pz-klas-tresc { padding: 8px 10px 12px; }
.pz-klas.mine-otwarte summary { background: var(--acc-tint); border-radius: 14px 14px 0 0; }
.pz-tabela tr.mine td { background: var(--mine); }
.pz-tabela tr.mine td:first-child { box-shadow: inset 4px 0 var(--mine-edge); }
.wsp-tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pz-liczymy { display: flex; align-items: center; gap: 10px; }
.pz-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--acc); animation: pz-obrot 1s linear infinite; flex: 0 0 auto; }
.pz-tabela th { white-space: normal; max-width: 7.5rem; line-height: 1.15; vertical-align: bottom; }
.pz-tabela td { white-space: nowrap; }
.pz-pdf { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--acc); color: var(--acc); font-weight: 700; }
.pz-th-info { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.pz-legenda-mini { font-size: .82rem; margin: 8px 0 0; }
.wsp-tabela-scroll { position: relative; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.wsp-tabela-scroll.pz-koniec { -webkit-mask-image: none; mask-image: none; }
.pz-sekcje { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pz-sekcja-btn { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--dim); font: inherit; font-weight: 700; cursor: pointer; }
.pz-sekcja-btn[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.pz-tabela { width: auto; min-width: min(100%, 22rem); }
.pz-tabela td, .pz-tabela th { padding-right: 18px; }
.pz-tabela td:last-child, .pz-tabela th:last-child { padding-right: 12px; }
@media (max-width: 767px) { .pz-klas-tresc::before { content: "⟷ Przesuń tabelę w bok, żeby zobaczyć więcej kolumn"; display: block; font-size: .8rem; color: var(--dim); margin: 0 0 6px; } }
.pz-skroty-lazy h2.sec { margin-top: 26px; }

/* ============================================================================
   Z137 E12-B1 — hub „Mistrzostwa” wg makiety E12: przełącznik wieku z liczbą tabel, zakładki grup (jedna naraz),
   kafelki klasyfikacji (nazwa + liczba, pod kreską lider), tabela „ser” (wąskie kolumny lotów, przyklejone Lp i
   Hodowca), komunikat „tabele nie są jeszcze udostępnione”, pasek postępu skrótu na stronie lotu.
   Tylko tokeny public.css (--panel/--line/--acc…) → każdy szablon/skórka ma to we własnych barwach.
   Bez JS (klasa .mz-js dodaje mistrzostwa.js) wszystko jest widoczne jedno pod drugim.
   ============================================================================ */
.mz-wiek-seg .seg-btn { min-width: 0; padding: 0 14px; gap: 6px; white-space: nowrap; }
.mz-wiek-seg .seg-btn .cnt { font-weight: 500; font-size: .8rem; opacity: .75; }
.mz-js .mz-wiek:not(.on) { display: none; }
.mz-js .mz-pane:not(.on) { display: none; }
.mz-hub .mz-pane + .mz-pane, .mz-hub .mz-pane + .mz-lazy { margin-top: 16px; }
.mz-lot { margin: 10px 0 0; }

.mz-hub .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: none; }
.mz-hub .chip:hover { border-color: var(--acc); }
.mz-hub .chip.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.mz-hub .chip .cnt { font-weight: 500; opacity: .8; font-size: .82rem; }
.mz-grupy { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 10px; }

.mz-info { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; background: var(--info-tint, var(--panel-2)); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0 0; }
.mz-info-i { font-size: 1.25rem; line-height: 1.3; }
.mz-info h2 { font-size: 1.05rem; margin: 0 0 4px; font-family: inherit; text-transform: none; letter-spacing: 0; }
.mz-info p { margin: 4px 0; }

.mz-klasy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.mz-kl { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; gap: 1px 8px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.mz-kl[hidden] { display: none; }
.mz-kl:hover { border-color: var(--acc); text-decoration: none; }
.mz-kl.on { border-color: var(--acc); box-shadow: inset 4px 0 0 var(--acc); background: var(--acc-tint); }
.mz-kl .nz { font-weight: 600; font-size: .92rem; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.mz-kl .ile { font-size: .82rem; color: var(--dim); white-space: nowrap; }
.mz-kl .lid { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line);
    font-size: .88rem; font-weight: 700; color: var(--acc-deep); letter-spacing: .01em; overflow-wrap: anywhere; }
.mz-kl .lid::before { content: "1"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
    background: linear-gradient(160deg, #f9e08b, #d9a400); color: #4a3200; font-size: 11px; font-weight: 800; box-shadow: 0 0 0 1px #c99500 inset; }
.mz-kl .lid.bez { color: var(--dim); font-weight: 500; }
.mz-kl .lid.bez::before { display: none; }
.mz-kl .mz-moj { grid-column: 1 / -1; justify-self: start; margin-top: 4px; background: var(--mine); border-radius: 6px; padding: 0 8px; font-size: .85rem; font-weight: 700; }
.mz-kl .mz-moj[hidden] { display: none; }
.mz-wszystkie { display: none !important; margin-top: 6px; }

.mz-js .mz-tabela { display: none; }
.mz-js .mz-tabela.otwarta, .mz-tabela.otwarta { display: block; }
.mz-tabela { margin-top: 12px; padding: 0; scroll-margin-top: 72px; }
.mz-tabela .hd { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 12px 14px 8px; }
.mz-tabela .hd h2 { font-size: 1.05rem; margin: 0; font-family: inherit; text-transform: none; letter-spacing: 0; }
.mz-tabela .hd .small { font-size: .85rem; }
.mz-tabela .mz-demo { margin: 0 14px 8px; }
.mz-tabela .bd { padding: 0 0 12px; }
.mz-tabela .mz-ramka { border: 0; border-top: 1px solid var(--line); border-radius: 0; -webkit-mask-image: none; mask-image: none; }
.mz-tabela .mz-stan { margin: 8px 14px 0; font-size: .85rem; }
.mz-stronic { display: flex; gap: 12px; align-items: center; margin: 8px 14px 0; font-size: .92rem; color: var(--dim); flex-wrap: wrap; }

/* tabela „ser”: szerokość kolumn tylko na treść, kolumny lotów wąskie, zwykła czcionka z cyframi tabelarycznymi */
table.ser { width: auto; min-width: 0; font-size: .9rem; font-variant-numeric: tabular-nums; border-collapse: collapse; }
table.ser th, table.ser td { padding: 4px 6px; white-space: nowrap; text-align: left; border-bottom: 1px solid var(--line); }
table.ser th { white-space: normal; max-width: 5.5rem; line-height: 1.2; vertical-align: bottom; font-size: .8rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--dim); background: var(--panel-2); }
table.ser th.n, table.ser td.n { text-align: right; }
table.ser th.c, table.ser td.c { text-align: center; }
table.ser th.l, table.ser td.l { padding-left: 3px; padding-right: 3px; text-align: center; min-width: 20px; max-width: none; white-space: nowrap; }
table.ser td.l { color: var(--dim); }
table.ser tbody tr:last-child td { border-bottom: 0; }
table.ser tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--panel-2) 45%, var(--panel)); }
table.ser .lp, table.ser .hod { position: sticky; z-index: 2; background: var(--panel); }
table.ser .lp { left: 0; min-width: 2.6rem; width: 2.6rem; }
table.ser .hod { left: 2.6rem; font-weight: 650; }
table.ser td.lp, table.ser td.hod { background: var(--panel); }
table.ser tbody tr:nth-child(even) td.lp, table.ser tbody tr:nth-child(even) td.hod { background: color-mix(in srgb, var(--panel-2) 45%, var(--panel)); }
table.ser th.lp, table.ser th.hod { z-index: 3; background: var(--panel-2); }
table.ser th.lp, table.ser th.hod, table.ser td.lp, table.ser td.hod { padding-right: 8px; }
table.ser tr.mine td, table.ser tbody tr.mine td.lp, table.ser tbody tr.mine td.hod { background: var(--mine); }
table.ser tr.mine td:first-child { box-shadow: inset 4px 0 var(--mine-edge); }
table.ser .wsp-zmiana { font-family: inherit; font-size: .8rem; }

.mz-pliki { margin: 16px 0 4px; color: var(--dim); font-size: .95rem; }
.mz-pliki a { color: var(--acc); font-weight: 600; }

/* postęp liczenia skrótu na stronie lotu (X-Postep: „41/58”) */
.pz-postep { flex: 0 0 96px; height: 6px; margin-left: auto; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.pz-postep i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc-deep)); transition: width .3s ease; }

@media (max-width: 1199px) { .mz-klasy { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 999px) { .mz-klasy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
    .mz-klasy { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .mz-kl { padding: 6px 10px; }
    .mz-kl .nz { font-size: .88rem; }
    .mz-klasy:not(.wszystkie) .mz-kl.mz-dalej { display: none; }
    .mz-wszystkie:not([hidden]) { display: inline-flex !important; }
    .mz-grupy { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
    .mz-grupy .chip { white-space: nowrap; flex: 0 0 auto; }
    .mz-wiek-seg { display: flex; width: 100%; }
    .mz-wiek-seg .seg-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; flex-wrap: wrap; line-height: 1.15; }
    .mz-tabela .bd::before { content: "⟷ Przesuń tabelę w bok, żeby zobaczyć więcej kolumn"; display: block; font-size: .8rem; color: var(--dim); margin: 0 14px 6px; }
    .mz-tabela .hd { padding: 10px 12px 6px; }
    table.ser td.hod { white-space: normal; min-width: 7.5rem; max-width: 9rem; }
    .mz-stronic { margin-left: 12px; margin-right: 12px; }
}

/* E12 (architekt): tabela klasyfikacji na pełną szerokość karty — padding karty (2×14 px) i prawy padding komórek
   wypychały tabelę z kolumnami L1–L12 poza ramkę (1196 px w 1162 px); makieta mieści ją w 1190 px bez przewijania. */
.mz-tabela > .bd { margin: 0 -14px; }
.mz-tabela .mz-ramka { border-left: 0; border-right: 0; border-radius: 0; }
.mz-tabela table.ser :is(td, th):not(.l) { padding-right: 6px; }
.mz-tabela table.ser :is(td, th).l { padding-left: 3px; padding-right: 3px; }
.mz-tabela .bd > :not(.mz-ramka) { padding-inline: 14px; }

/* E12: nagłówek mistrzostw w jednym rzędzie (komputer) */
.mz-ster { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
@media (min-width: 900px) {
    .mz-ster { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; }
    .mz-ster > * { margin: 0; }
}

/* dokumenty.css */
/* dokumenty.css — strona Dokumenty (Z137 E12-B2, makieta e12/dokumenty.html):
   kategorie po lewej (telefon: poziomy pasek), pliki jako kafelki w kilku kolumnach. */
.dok-uk { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.dok-uk > * { min-width: 0; }
.dok-kat { position: sticky; top: 12px; display: grid; gap: 2px; }
.dok-kat a { display: flex; gap: 8px; justify-content: space-between; padding: 8px 12px; border-radius: 8px; color: var(--text); font-weight: 600; font-size: .92rem; }
.dok-kat a span { color: var(--dim); font-weight: 500; }
.dok-kat a:hover { background: var(--panel-2); text-decoration: none; }
.dok-sek { margin-bottom: 20px; scroll-margin-top: 12px; }
.dok-sek > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 1.15rem; }
.dok-sek > h2 span { font-size: .82rem; color: var(--dim); font-weight: 500; }
.dok-sek > p { margin: 0 0 8px; color: var(--dim); font-size: .88rem; }
.dok-rok { font-size: .82rem; font-weight: 700; color: var(--dim); letter-spacing: .04em; margin: 10px 0 6px; text-transform: uppercase; }
.dok-pliki { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.dok-pl { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: .9rem; min-width: 0; }
.dok-pl:hover { border-color: var(--acc); text-decoration: none; }
.dok-pl .ik { flex: none; font-size: 1rem; }
.dok-pl .nz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dok-pl .zm { margin-left: auto; font-size: .72rem; color: var(--acc); background: var(--acc-tint); border-radius: 5px; padding: 1px 6px; flex: none; }
.dok-wiecej { margin-top: 6px; }
.dok-wiecej > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; padding: 6px 14px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; font-size: .88rem; }
.dok-wiecej > summary::-webkit-details-marker { display: none; }
.dok-wiecej > summary:hover { border-color: var(--acc); }
.dok-wiecej > summary .mniej { display: none; }
.dok-wiecej[open] > summary .wiecej { display: none; }
.dok-wiecej[open] > summary .mniej { display: inline; }
.dok-wiecej[open] > summary { margin-bottom: 6px; }
@media (max-width: 899px) {
    .dok-uk { grid-template-columns: 1fr; gap: 12px; }
    .dok-kat { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
    .dok-kat a { white-space: nowrap; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 12px; flex: none; }
    .dok-pliki { grid-template-columns: 1fr 1fr; }
}

/* tablica-sezonu.css */
/* tablica-sezonu.css — „Tablica sezonu" (TablicaSezonu.razor) i tabela „Czołówka lotu" (CzolowkaLotu.razor)
   na stronie głównej; Z137 E12-B3, wzór: makieta start.html (wariant B). Wspólne dla szablonów.
   Kolory tablicy: ze skórki jednostki (12.10); szablon może je nadpisać zmiennymi --tablica-* (Horyzont — barwy panoramy). */

.ts {
    /* 12.10 (uwaga usera: granat „gryzł się” z jasnymi skórkami): barwy ZE SKÓRKI — tło --panel-2, tekst --text/--dim,
       akcent i kropki --acc, młode --mine-edge; jasna skórka = jasny pasek, ciemna = ciemny. Kontrast policzony dla
       wszystkich 21 skórek (tekst >= 12:1, --dim >= 5,4:1, --acc >= 4,5:1 na --panel-2). Szablon może nadpisać --tablica-*. */
    --ts-tlo: var(--tablica-tlo, var(--panel-2, #eaf0f7));
    --ts-tekst: var(--tablica-tekst, var(--text, #132238));
    --ts-jasny: var(--tablica-jasny, var(--text, #132238));
    --ts-przygaszony: var(--tablica-przygaszony, var(--dim, #4f5f75));
    --ts-etykieta: var(--tablica-etykieta, var(--dim, #4f5f75));
    --ts-akcent: var(--tablica-akcent, var(--acc, #1f5fa8));
    --ts-dorosle: var(--tablica-kropka, var(--acc, #1f5fa8));
    --ts-mlode: var(--tablica-kropka-mlode, var(--mine-edge, #d9a400));
    --ts-obrys: var(--tablica-obrys, var(--line, #d6dfe9));
    background: var(--ts-tlo); color: var(--ts-tekst);
    border-top: 1px solid var(--ts-obrys); border-bottom: 1px solid var(--ts-obrys);
}
.ts-siatka { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 26px; padding-top: 16px; padding-bottom: 16px; align-items: center; }
.ts-lab { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ts-etykieta); font-weight: 700; margin-bottom: 6px; }
.ts-lab a { color: inherit; text-decoration: none; }
.ts-lab a:hover, .ts-lab a:focus-visible { text-decoration: underline; }

/* oś lotów: kropka = lot */
.ts-os { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 4px; }
.ts-os li { display: flex; }
.ts-przerwa { width: 10px; }
.ts-k { position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; background: var(--ts-dorosle); }
.ts-k::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* większe pole dotyku */
.ts-k.mlode { background: var(--ts-mlode); }
.ts-k.bez { background: transparent; border: 2px dashed var(--ts-dorosle); }
.ts-k.mlode.bez { border-color: var(--ts-mlode); }
.ts-k.ostatni { box-shadow: 0 0 0 3px var(--ts-tlo), 0 0 0 5px var(--ts-akcent); margin: 0 3px; }
.ts-k:hover, .ts-k:focus-visible { outline: 2px solid var(--ts-jasny); outline-offset: 2px; }
.ts-op { font-size: .8rem; color: var(--ts-przygaszony); margin-top: 8px; }

/* lider mistrzostwa */
.ts-lider { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .9rem; }
.ts-lider li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; }
.ts-poz { color: var(--ts-akcent); font-weight: 800; }
.ts-naz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-pierwszy { color: var(--ts-jasny); font-weight: 700; }
.ts-wynik { color: var(--ts-przygaszony); font-variant-numeric: tabular-nums; }

/* rekordy sezonu (tylko komputer) */
.ts-rek { font-size: .9rem; line-height: 1.55; }
.ts-rek b { color: var(--ts-jasny); }
.ts-akcent { color: var(--ts-akcent); font-weight: 700; }

@media (max-width: 899px) {
    /* telefon: wersja skrócona — kropki lotów + lider; rekordy dopiero od 900 px */
    .ts-siatka { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 12px; padding-bottom: 12px; }
    .ts-rek-blok { display: none; }
    .ts-k { width: 13px; height: 13px; }
}

/* ---------- tabela „Czołówka lotu" (D16: najlepszy gołąb każdego z 5 najlepszych hodowców) ---------- */
.cz-ramka { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-lg, 14px); background: var(--panel); margin: 8px 0; }
.cz-tab { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.cz-tab th, .cz-tab td { padding: 7px 10px; white-space: nowrap; border-bottom: 1px solid var(--line); text-align: left; }
.cz-tab thead th { background: var(--panel-2); color: var(--dim); font-size: .78rem; font-weight: 700; line-height: 1.2; vertical-align: bottom; }
.cz-tab tbody tr:last-child td { border-bottom: 0; }
.cz-tab .cz-n { text-align: right; }
.cz-tab .cz-c { text-align: center; }
.cz-tab .cz-hod { font-weight: 650; }
.cz-tab .cz-wks { white-space: pre; color: var(--dim); font-size: .9em; }
.cz-tab tr.mine td { background: var(--mine); }
.cz-tab tr.mine td:first-child { box-shadow: inset 4px 0 var(--mine-edge); }
.cz-nota { color: var(--dim); font-size: .85rem; margin: 0 0 4px; }
@media (max-width: 899px) {
    /* telefon: Nr | Hodowca | Prędkość | Coef. */
    .cz-tab .cz-opc { display: none; }
    .cz-tab th, .cz-tab td { padding: 7px 8px; }
    .cz-tab .cz-hod { white-space: normal; }
}

/* przestworza.css */
/* ============================================================================
   przestworza.css — szablon 4 „Przestworza" (mockup docs/mockups/
   pzhgp-szablon-przestworza.html). Ładowany TYLKO gdy data-szablon="przestworza"
   (App.razor). DNA: żywe niebo nad danymi — hero z shaderem WebGL (przestworza.js;
   bez JS/WebGL zostaje gradient CSS), podium czołówki, scroll-driven animations
   (czysty CSS, @supports), cross-document View Transitions, glass-rama.
   Trzy warstwy (wzorzec rozgrywki.css):
   (1) tokeny: dzień (baza jasna, wszystkie data-skin) + zmierzch (tryb ciemny
       gościa 🌓 — wzorzec F-B: przełącznik usuwa data-skin → blok :not([data-skin])),
   (2) PRZESTWORZA: hero + własne klasy prz-* (Components/Przestworza/*),
   (3) rama wspólna (appbar/ticker/mainnav) przestylowana selektorami po data-szablon.
   Transmisja, Relacja i Rozgrywki NIETKNIĘTE. Fonty systemowe (wzorzec W-1).
   ============================================================================ */

/* ---- (1) Tokeny — te same nazwy co public.css → komponenty danych działają ---- */

/* przestworza-domyslny „Dzień" (jasny błękit nieba) — także pod data-skin="swit"
   (F-B: fallback bazy null→swit; źródło przestworza.css wygrywa kolejnością) */
html[data-szablon="przestworza"] {
    --bg: #f2f6fc; --panel: #ffffff; --panel-2: #f6f9fe; --line: #dbe4f0;
    --text: #1b2637; --dim: #54647a;
    --acc: #2364ab; --acc-deep: #1a4d87; --acc-ink: #ffffff;
    --acc-tint: rgba(35, 100, 171, .10);
    --good: #15803d; --good-tint: rgba(21, 128, 61, .10);
    --info: #075985; --info-tint: rgba(7, 89, 133, .10);
    --live: #d5273c;
    --mine: #fdf1d7; --mine-edge: #b47a09;
    --ad-bg: #eaf0f8; --shadow: 0 10px 30px rgba(27, 38, 55, .10);
    --hero-a: rgba(35, 100, 171, .10); --hero-b: rgba(240, 171, 60, .08);
    /* niebo (fallback CSS pod shaderem; te same tokeny czyta przestworza.js do
       uniformów WebGL — hexy #rrggbb, jedno źródło prawdy palety) + medale podium */
    --prz-niebo-gora: #2e6cb5; --prz-niebo-dol: #b9d4ef;
    --prz-slonce: #fff4d6; --prz-chmury: #ffffff; --prz-stado: #ffffff;
    --prz-zloto: #b47a09; --prz-srebro: #6f7c8e; --prz-braz: #96562a;
}

/* --- skórka „Brzask" (różowy świt, JASNA — kod w Jasne/portal.js/App.razor) --- */
html[data-szablon="przestworza"][data-skin="brzask"] {
    --bg: #faf4f2; --panel: #ffffff; --panel-2: #fbf1ec; --line: #ecdcd4;
    --text: #2b2028; --dim: #6d5a62;
    --acc: #a8446e; --acc-deep: #8a3459; --acc-ink: #ffffff;
    --acc-tint: rgba(168, 68, 110, .10);
    --mine: #fdeee6; --mine-edge: #b0641c;
    --ad-bg: #f3e9e4; --shadow: 0 10px 30px rgba(43, 32, 40, .10);
    --hero-a: rgba(168, 68, 110, .09); --hero-b: rgba(240, 171, 60, .09);
    --prz-niebo-gora: #5b5a8f; --prz-niebo-dol: #f2b98d;
    --prz-slonce: #ffd9b0; --prz-chmury: #f6d8ce; --prz-stado: #ffffff;
}

/* --- skórka „Burza" (ciemna — burzowe niebo, bursztynowy akcent) --- */
html[data-szablon="przestworza"][data-skin="burza"] {
    --bg: #171a20; --panel: #1f242c; --panel-2: #262c36; --line: #343c48;
    --text: #eef1f5; --dim: #a3adbb;
    --acc: #f0b23c; --acc-deep: #d29a26; --acc-ink: #241a05;
    --acc-tint: rgba(240, 178, 60, .13);
    --good: #3ddc84; --good-tint: rgba(61, 220, 132, .13);
    --info: #7db3ff; --info-tint: rgba(125, 179, 255, .14);
    --live: #ff5d73;
    --mine: rgba(240, 178, 60, .15); --mine-edge: #f0b23c;
    --ad-bg: #1b1f26; --shadow: 0 14px 40px rgba(0, 0, 0, .5);
    --hero-a: rgba(240, 178, 60, .10); --hero-b: rgba(125, 179, 255, .08);
    --prz-niebo-gora: #232936; --prz-niebo-dol: #5a6678;
    --prz-slonce: #d8dee8; --prz-chmury: #161a22; --prz-stado: #e8ecf2;
    --prz-zloto: #e2b04a; --prz-srebro: #9aa6b6; --prz-braz: #c98a54;
}

/* --- skórka „Zorza" (ciemna — nocne niebo z łuną zorzy) --- */
html[data-szablon="przestworza"][data-skin="zorza"] {
    --bg: #0d1220; --panel: #151b2e; --panel-2: #1a2138; --line: #2a3452;
    --text: #ecf1fb; --dim: #9fabc9;
    --acc: #43d6a0; --acc-deep: #2fb586; --acc-ink: #05261a;
    --acc-tint: rgba(67, 214, 160, .13);
    --good: #43d6a0; --good-tint: rgba(67, 214, 160, .13);
    --info: #7db3ff; --info-tint: rgba(125, 179, 255, .14);
    --live: #ff5d8f;
    --mine: rgba(67, 214, 160, .14); --mine-edge: #43d6a0;
    --ad-bg: #111730; --shadow: 0 14px 40px rgba(0, 0, 0, .55);
    --hero-a: rgba(67, 214, 160, .12); --hero-b: rgba(125, 179, 255, .09);
    --prz-niebo-gora: #090e22; --prz-niebo-dol: #274b6b;
    --prz-slonce: #7fe8c0; --prz-chmury: #3c6b8f; --prz-stado: #d9fff0;
    --prz-zloto: #e2b04a; --prz-srebro: #9aa6b6; --prz-braz: #c98a54;
}

/* Tryb CIEMNY gościa (🌓, wzorzec F-B/J8): „Zmierzch" — przełącznik usuwa data-skin */
html[data-szablon="przestworza"]:not([data-skin]) {
    --bg: #131824; --panel: #1b2231; --panel-2: #212a3d; --line: #2e3a54;
    --text: #edf1f9; --dim: #a4afc4;
    --acc: #82a9e6; --acc-deep: #5d8ad3; --acc-ink: #0a1120;
    --acc-tint: rgba(130, 169, 230, .14);
    --good: #3ddc84; --good-tint: rgba(61, 220, 132, .13);
    --info: #7db3ff; --info-tint: rgba(125, 179, 255, .14);
    --live: #ff5d73;
    --mine: rgba(240, 171, 60, .16); --mine-edge: #f0ab3c;
    --ad-bg: #171d2b; --shadow: 0 14px 40px rgba(0, 0, 0, .5);
    --hero-a: rgba(130, 169, 230, .12); --hero-b: rgba(240, 120, 80, .10);
    --prz-niebo-gora: #171d33; --prz-niebo-dol: #6d4a44;
    --prz-slonce: #ffb27a; --prz-chmury: #c79ba0; --prz-stado: #ffffff;
    --prz-zloto: #e2b04a; --prz-srebro: #9aa6b6; --prz-braz: #c98a54;
}

/* ---- Cross-document View Transitions (2026): płynne przejścia między stronami.
   Progressive enhancement — przeglądarki bez wsparcia po prostu ignorują. ---- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    html[data-szablon="przestworza"]::view-transition-old(root) {
        animation: prz-vt-znikaj .18s ease both;
    }
    html[data-szablon="przestworza"]::view-transition-new(root) {
        animation: prz-vt-pojaw .26s ease both;
    }
}
@keyframes prz-vt-znikaj { to { opacity: 0; } }
@keyframes prz-vt-pojaw { from { opacity: 0; transform: translateY(10px); } }

/* ============================================================================
   (2) PRZESTWORZA — hero i własny markup (Components/Przestworza/*, klasy prz-*)
   ============================================================================ */

/* --- hero pod żywym niebem --- */
html[data-szablon="przestworza"] .prz-hero {
    position: relative; isolation: isolate; overflow: clip; color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(300px, 42svh, 440px); /* Z137 E12-C1/W150: niższe niebo, treść bez pustego ekranu */
    /* fallback bez JS/WebGL: gradient nieba + słońce (radial) */
    background:
        radial-gradient(560px 420px at 76% 18%, var(--prz-slonce), transparent 60%),
        linear-gradient(180deg, var(--prz-niebo-gora), var(--prz-niebo-dol));
}
html[data-szablon="przestworza"] .prz-hero-lot { min-height: clamp(280px, 36svh, 400px); }
html[data-szablon="przestworza"] .prz-niebo,
html[data-szablon="przestworza"] .prz-stado {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
html[data-szablon="przestworza"] .prz-niebo { z-index: -2; }
html[data-szablon="przestworza"] .prz-stado { z-index: -1; }
html[data-szablon="przestworza"] .prz-hero-tresc {
    padding-top: 24px; padding-bottom: 22px;
    text-shadow: 0 2px 16px rgba(10, 18, 34, .55);
}
html[data-szablon="przestworza"] .prz-hero h1 {
    margin: 4px 0 6px; font-size: clamp(1.75rem, 4.4vw, 2.7rem);
    font-weight: 800; letter-spacing: -.015em; line-height: 1.08; text-wrap: balance;
}
html[data-szablon="przestworza"] .prz-h1-data { font-weight: 550; opacity: .92; }
html[data-szablon="przestworza"] .prz-lead {
    max-width: 52ch; margin: 0 0 6px; font-size: clamp(.95rem, 1.6vw, 1.12rem); opacity: .95;
}
html[data-szablon="przestworza"] .prz-crumb {
    color: #fff; opacity: .85; font-size: .88rem; text-decoration: none;
}
html[data-szablon="przestworza"] .prz-crumb:hover { opacity: 1; text-decoration: underline; }
html[data-szablon="przestworza"] .prz-hero-rzad {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
html[data-szablon="przestworza"] .prz-stamp { font-size: .88rem; opacity: .92; }

/* pigułka „na żywo" + zwykły tag hero */
html[data-szablon="przestworza"] .prz-zywo,
html[data-szablon="przestworza"] .prz-tag {
    display: inline-flex; align-items: center; gap: 7px; width: fit-content;
    padding: 5px 13px; border-radius: 999px;
    font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
html[data-szablon="przestworza"] .prz-zywo { background: var(--live); color: #fff; }
html[data-szablon="przestworza"] .prz-zywo::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
    animation: prz-puls 1.6s ease-in-out infinite;
}
@keyframes prz-puls { 50% { opacity: .25; transform: scale(.7); } }
html[data-szablon="przestworza"] .prz-hero .prz-tag {
    background: rgba(255, 255, 255, .16); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* KPI lotu na hero */
html[data-szablon="przestworza"] .prz-kpi {
    display: flex; gap: clamp(14px, 3vw, 30px); flex-wrap: wrap; margin: 10px 0 2px;
}
/* Z137 E12-C1/W162: liczby zwykłą czcionką z cyframi tabelarycznymi, podpis zwykłymi literami */
html[data-szablon="przestworza"] .prz-kpi b {
    display: block; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 700; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
html[data-szablon="przestworza"] .prz-kpi span {
    font-size: .85rem; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .88;
}
html[data-szablon="przestworza"] .prz-cta {
    display: inline-block; margin-top: 10px; padding: 10px 20px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); color: #1b2637; font-weight: 750; text-decoration: none;
    box-shadow: 0 6px 20px rgba(10, 18, 34, .3); text-shadow: none;
}
html[data-szablon="przestworza"] .prz-cta:hover { background: #fff; }
html[data-szablon="przestworza"] .prz-strzalka {
    position: absolute; left: 50%; bottom: 8px; translate: -50%; color: #fff; opacity: .75;
    animation: prz-skok 2.2s ease-in-out infinite;
}
@keyframes prz-skok { 50% { translate: -50% 7px; } }

/* --- sekcje treści + nagłówki --- */
html[data-szablon="przestworza"] .prz-sekcja { margin: 22px 0 6px; min-width: 0; }
html[data-szablon="przestworza"] .prz-nadtytul {
    display: block; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--acc); margin-bottom: 2px;
}
html[data-szablon="przestworza"] .prz-h2 {
    margin: 0 0 10px; font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    font-weight: 750; letter-spacing: -.01em; text-wrap: balance;
}

/* karta bazowa prz-* */
html[data-szablon="przestworza"] .prz-karta {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow); min-width: 0;
}

/* --- podium czołówki --- */
html[data-szablon="przestworza"] .prz-podium {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px;
}
html[data-szablon="przestworza"] .prz-podium .prz-karta {
    position: relative; padding: 16px; overflow: clip;
    transition: translate .22s ease, box-shadow .22s ease;
}
@media (hover: hover) {
    html[data-szablon="przestworza"] .prz-podium .prz-karta:hover { translate: 0 -4px; }
}
html[data-szablon="przestworza"] .prz-podium .prz-karta::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
    background: var(--prz-medal, var(--acc));
}
html[data-szablon="przestworza"] .prz-m1 { --prz-medal: var(--prz-zloto); }
html[data-szablon="przestworza"] .prz-m2 { --prz-medal: var(--prz-srebro); }
html[data-szablon="przestworza"] .prz-m3 { --prz-medal: var(--prz-braz); }
html[data-szablon="przestworza"] .prz-miejsce {
    font-size: 2rem; font-weight: 800; line-height: 1; color: var(--prz-medal, var(--acc));
}
html[data-szablon="przestworza"] .prz-podium h3 { margin: 5px 0 4px; font-size: 1.08rem; }
html[data-szablon="przestworza"] .prz-obraczka {
    display: inline-block; padding: 2px 8px; border-radius: 6px;
    background: var(--acc-tint); font-family: var(--mono); font-size: .85rem;
}
html[data-szablon="przestworza"] .prz-dane { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
html[data-szablon="przestworza"] .prz-dane b { display: block; font-size: 1.02rem; }
html[data-szablon="przestworza"] .prz-dane span {
    font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dim);
}
html[data-szablon="przestworza"] .prz-dane b { font-variant-numeric: tabular-nums; }

/* --- „następny lot planu" --- */
html[data-szablon="przestworza"] .prz-nastepny {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px;
    border-left: 4px solid var(--acc); margin-top: 14px;
}
html[data-szablon="przestworza"] .prz-nastepny .prz-tag { background: var(--acc-tint); color: var(--acc); }
html[data-szablon="przestworza"] .prz-nast-tresc { display: grid; min-width: 0; }
html[data-szablon="przestworza"] .prz-nast-tresc b { font-size: 1.1rem; }
html[data-szablon="przestworza"] .prz-nast-tresc span { color: var(--dim); font-size: .92rem; }
html[data-szablon="przestworza"] .prz-nastepny .btn { margin-left: auto; }

/* --- aktualności --- */
html[data-szablon="przestworza"] .prz-news {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px; margin-bottom: 12px;
}
html[data-szablon="przestworza"] .prz-news .prz-karta {
    padding: 15px; display: grid; gap: 5px; align-content: start;
    transition: translate .22s ease;
}
@media (hover: hover) {
    html[data-szablon="przestworza"] .prz-news .prz-karta:hover { translate: 0 -4px; }
}
html[data-szablon="przestworza"] .prz-news time {
    font-size: .76rem; color: var(--dim); letter-spacing: .06em; text-transform: uppercase;
}
html[data-szablon="przestworza"] .prz-news h3 { margin: 0; font-size: 1.02rem; }
html[data-szablon="przestworza"] .prz-news h3 a { color: var(--text); text-decoration: none; }
html[data-szablon="przestworza"] .prz-news h3 a:hover { color: var(--acc); }
html[data-szablon="przestworza"] .prz-news p { margin: 0; font-size: .9rem; color: var(--dim); }

/* --- scroll-driven wejścia sekcji (czysty CSS; bez wsparcia = widoczne od razu) --- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        html[data-szablon="przestworza"] .prz-sekcja {
            animation: prz-wjazd linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 50%;
        }
    }
}
@keyframes prz-wjazd { from { opacity: 0; translate: 0 36px; } }

/* ============================================================================
   (3) Rama wspólna (appbar / ticker / mainnav / stopka) — tylko szata
   ============================================================================ */

html[data-szablon="przestworza"] .appbar {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
}
@supports not (backdrop-filter: blur(1px)) {
    html[data-szablon="przestworza"] .appbar { background: var(--bg); }
}

html[data-szablon="przestworza"] .mainnav { background: transparent; }
html[data-szablon="przestworza"] .mainnav a {
    border-bottom: none; border-radius: 999px; min-height: 40px;
    margin: 7px 1px; padding: 0 15px;
}
html[data-szablon="przestworza"] .mainnav a[aria-current="page"] {
    background: var(--acc); color: var(--acc-ink);
}
html[data-szablon="przestworza"] .mainnav a:hover:not([aria-current="page"]) {
    background: var(--acc-tint); color: var(--text);
}

html[data-szablon="przestworza"] .ticker { background: var(--text); border-bottom: none; }
html[data-szablon="przestworza"] .ticker .poz { color: color-mix(in srgb, var(--bg) 78%, var(--dim)); }
html[data-szablon="przestworza"] .ticker .poz b { color: var(--bg); }
html[data-szablon="przestworza"] .ticker .poz .tnum,
html[data-szablon="przestworza"] .ticker .zrodlo { color: #f0ab3c; }

/* stary generyczny hero (podstrony wspólne) w tonie Przestworzy */
html[data-szablon="przestworza"] .hero {
    background:
        radial-gradient(900px 340px at 80% -20%, var(--hero-a), transparent 60%),
        radial-gradient(700px 300px at 8% -10%, var(--hero-b), transparent 55%),
        var(--bg);
}

/* ============================================================================
   Mobile (test 375 px) + dostępność
   ============================================================================ */

@media (max-width: 760px) {
    html[data-szablon="przestworza"] .prz-hero { min-height: clamp(320px, 52svh, 460px); }
    html[data-szablon="przestworza"] .prz-podium { grid-template-columns: 1fr; }
    html[data-szablon="przestworza"] .prz-nastepny .btn { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-szablon="przestworza"] .prz-zywo::before,
    html[data-szablon="przestworza"] .prz-strzalka { animation: none; }
}

/* lot.css */
/* ============================================================================
   lot.css — Z137 E12-B5: strona LOTU wg zaakceptowanej makiety (docs/obsidian/08-Wiedza/mockupy/strony-pzhgp/e12/lot.html).
   Ładowany w KAŻDYM szablonie (App.razor, po arkuszach szablonu), bo fragment „Ten lot w mistrzostwach”
   (.pz-skroty) jest wspólny dla wszystkich szablonów (dociąga go mistrzostwa.js z endpointu). Reszta klas (.lot-*)
   dotyczy strony lotu Przewodnika (LotPrzewodnik.razor) i kafelków list (ListyLotuKarty z Kafelki=true).
   Układ: komputer = 2 kolumny (lewa: lista oddziałowa + pozostałe listy; prawa 360 px: mistrzostwa, pliki, szczegóły),
   telefon (≤ 899 px) = 1 kolumna. Kolory z tokenów skórki (zero stałych kolorów).
   ============================================================================ */

/* ---------- siatka strony lotu ---------- */
.lot-siatka { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin: 8px 0 6px; }
.lot-kol, .lot-bok { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; align-content: start; }
.lot-karta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg, 14px); min-width: 0; }
.lot-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 12px 16px 8px; }
.lot-hd h2 { margin: 0; font-size: 1.05rem; font-weight: 750; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.lot-hd a { font-size: .88rem; font-weight: 600; }
.lot-sp { flex: 1; }
.lot-bd { padding: 0 16px 14px; min-width: 0; }
.lot-wiecej { display: inline-block; margin-top: 10px; font-weight: 600; }

/* ---------- lista oddziałowa: pierwsze 10 pozycji (wiersze li = „tabela” siatką; .pz-czolowka li zostaje dla „Twojego wyniku” w JS) ---------- */
html[data-szablon] ol.pz-czolowka.lot-top { margin: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
html[data-szablon] ol.pz-czolowka.lot-top > li {
    display: grid; grid-template-columns: 2.6rem minmax(0, 1.5fr) 8.2rem 5.8rem minmax(5.2rem, .9fr) 3.4rem;
    gap: 0 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: .92rem;
}
html[data-szablon] ol.pz-czolowka.lot-top.z-wks > li { grid-template-columns: 2.6rem minmax(0, 1.5fr) 8.2rem 5.6rem 5.8rem minmax(5.2rem, .9fr) 3.4rem; }
html[data-szablon] ol.pz-czolowka.lot-top > li:last-child { border-bottom: 0; }
html[data-szablon] ol.pz-czolowka.lot-top > li:not(.lot-th):nth-child(odd) { background: var(--panel-2); }
html[data-szablon] ol.pz-czolowka.lot-top > li:not(.lot-th):hover { background: var(--acc-tint); }
html[data-szablon] ol.pz-czolowka.lot-top > li.mine { background: var(--mine); box-shadow: inset 4px 0 var(--mine-edge); }
html[data-szablon] ol.pz-czolowka.lot-top > li.lot-th { background: var(--panel-2); color: var(--dim); font-size: .78rem; font-weight: 700; line-height: 1.2; align-items: end; padding-top: 7px; padding-bottom: 6px; }
.lot-top .lot-th small { display: block; font-weight: 600; }
.lot-top .pz-poz, .lot-top .k-v, .lot-top .k-coef { text-align: right; }
.lot-top .lot-th span:first-child { text-align: right; }
.lot-top .k-hod { font-weight: 650; overflow-wrap: anywhere; line-height: 1.25; }
.lot-top .k-obr, .lot-top .k-czas, .lot-top .k-v, .lot-top .k-coef { white-space: nowrap; }
.lot-top .k-wks { white-space: pre; font-variant-numeric: tabular-nums; overflow: hidden; }
.lot-top .k-v { font-weight: 700; }

/* ---------- „Pozostałe listy lotu”: zwarte kafelki 3 w rzędzie (klik = lista) ---------- */
.lot-listy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lot-listy a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: .92rem; min-width: 0; }
.lot-listy a:hover { border-color: var(--acc); background: var(--acc-tint); text-decoration: none; }
.lot-listy a b { font-weight: 650; color: var(--acc); overflow-wrap: anywhere; line-height: 1.25; }
.lot-listy a span { font-size: .8rem; color: var(--dim); }
/* dawne rozwijane karty z czołówką 10 miejsc — zostają jako mniej widoczny dodatek */
.lot-czolowki { margin-top: 12px; }
.lot-czolowki > summary { cursor: pointer; color: var(--dim); font-size: .85rem; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.lot-czolowki[open] > summary { margin-bottom: 8px; }

/* ---------- prawa kolumna: szczegóły lotu (linki) ---------- */
.lot-lnk a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 7px 0; border-top: 1px solid var(--line); color: var(--text); font-size: .95rem; }
.lot-lnk a:first-child { border-top: 0; }
.lot-lnk a:hover { color: var(--acc); text-decoration: none; }

/* ---------- „Ten lot w mistrzostwach” (wspólny fragment .pz-skroty — wszystkie szablony) ---------- */
.pz-skroty { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 2px 14px 6px; margin: 0 0 8px; }
.pz-skroty .eyebrow { margin: 12px 0 2px; }
.pz-skrot { display: block; padding: 9px 0; border-top: 1px solid var(--line); color: var(--text); font-size: .92rem; min-width: 0; }
.pz-skroty > .pz-skrot:first-child, .pz-skroty > .eyebrow + .pz-skrot { border-top: 0; }
.pz-skrot:hover { background: var(--panel-2); text-decoration: none; }
.pz-skrot-nazwa { display: block; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
/* siatka: etykieta po lewej, nazwisko po prawej, każde w OSOBNYM wierszu; prowadzący pogrubiony w kolorze akcentu */
.pz-skrot-ro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; margin-top: 3px; font-size: .88rem; align-items: baseline; }
.pz-skrot-ro .et { color: var(--dim); font-size: .8rem; white-space: nowrap; }
.pz-skrot-ro .et.aw { color: var(--good); font-weight: 700; }
.pz-skrot-ro b { color: var(--acc-deep, var(--acc)); font-weight: 700; overflow-wrap: anywhere; }
.pz-skrot-ro span:not(.et) { overflow-wrap: anywhere; }
.pz-skrot-moj::before { content: none; }
.pz-skrot-moj:not([hidden]) { display: inline-block; margin-top: 5px; padding: 0 8px; border-radius: 6px; background: var(--mine); font-weight: 700; font-size: .85rem; }
.pz-skrot-chipy { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }
.pz-skroty > .pz-skrot-chipy:first-child { border-top: 0; margin-top: 0; }
.pz-skrot-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-weight: 600; font-size: .9rem; }
.pz-skrot-chip:hover { border-color: var(--acc); text-decoration: none; }
.pz-skrot-chip .tnum { font-weight: 500; opacity: .75; }
/* w karcie prawej kolumny sam pasek bez własnej ramki */
.lot-wm .pz-skroty { background: none; border: 0; padding: 0; margin: 0; }
.lot-wm .pz-skrot { padding-left: 0; padding-right: 0; }
.lot-wm-lazy > .lot-bd { padding-top: 12px; }
.lot-wm-lazy:not(:has(.pz-skroty-lazy)) { display: none; }
/* nagłówek wstrzykiwany przez mistrzostwa.js (h2.sec) w karcie wygląda jak nagłówek karty */
html[data-szablon] .lot-wm h2.sec { font-family: inherit; font-size: 1.05rem; font-weight: 750; text-transform: none; letter-spacing: 0; margin: 0 0 6px; }
html[data-szablon] .lot-wm h2.sec::after { display: none; }
.lot-wm h2.sec .sec-link { font-size: .88rem; font-weight: 600; }
html[data-szablon] .lot-wm .pz-skroty-lazy h2.sec { margin-top: 0; }

/* ---------- „‹ Lot 10 · Lohne / Lot 12 · Helmstedt ›” — małe linki u góry po prawej (długie nazwy miejscowości nie rozpychają strony) ---------- */
html[data-szablon] .pz-sasiedzi-lotow { flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }
html[data-szablon] .pz-sasiedzi-lotow .pz-sasiad { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- telefon ---------- */
@media (max-width: 899px) {
    .lot-siatka { grid-template-columns: minmax(0, 1fr); }
    .lot-hd { padding: 10px 12px 6px; }
    .lot-bd { padding: 0 12px 12px; }
    .lot-listy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-szablon] ol.pz-czolowka.lot-top > li,
    html[data-szablon] ol.pz-czolowka.lot-top.z-wks > li { grid-template-columns: 2.4rem minmax(0, 1fr) 5.6rem 3.2rem; padding: 6px 8px; }
    .lot-top .k-obr, .lot-top .k-wks, .lot-top .k-czas { display: none; }
}

/* E12: link „+N więcej” pod skróconą grupą klasyfikacji */
.pz-skrot-wiecej { display: block; padding: 6px 0 2px; font-size: .9rem; font-weight: 600; }