/* MapEngine - nowy wygląd: "arkusz techniczny". CZĘŚĆ WSPÓLNA dla wszystkich stron (tokeny, nagłówek, pasek komend, stopka, układ z szyną, przyciski).
   Zasady: ostre krawędzie (zero zaokrągleń), linie 1 px zamiast cieni i gradientów, układ tabelaryczny i asymetryczny, prawdziwe dane zamiast ozdób,
   jedna barwa danych (cyjan z logo) w pięciu stopniach jasności + bursztyn tylko na uwagę i interakcję. Żadnych zasobów zewnętrznych, żadnych stylów inline (CSP). */
:root {
  color-scheme: dark;
  --bg: #090c0f; --bg1: #0c1014; --bg2: #10151a;
  --line: #18202a; --line2: #242f3a; --line3: #34424f;
  --ink: #e9eef3; --ink2: #aab7c3; --ink3: #7f8d9b;
  --cyan: #43c6ee; --amber: #ffb454;
  /* skala pokrycia: jedna barwa, 5 stopni jasności; sprawdzona walidatorem porządkowym (monotoniczna L, odstępy >= 0,06, kontrast końca >= 2:1) */
  --r1: #1a677e; --r2: #088eaf; --r3: #29b5dd; --r4: #7bd9fa; --r5: #d3f5ff;
  --fd: "Bahnschrift", "DIN Alternate", "DIN 1451 Mittelschrift", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;   /* przemysłowy, drogowy krój (DIN) do nagłówków i etykiet */
  --ft: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fm: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --gut: 40px; --cols: 44;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--ft); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
main { flex: 1 0 auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3, li { overflow-wrap: anywhere; hyphens: auto; }   /* długie niemieckie złożenia w nagłówkach i listach łamią się zamiast wychodzić poza ekran */
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.wrap { width: min(100% - 2 * var(--gut), 1320px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--amber); color: #111; padding: 10px 16px; font: 600 14px/1 var(--fd); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- linijka z markerem przewijania (jak oś w edytorze map) ---------- */
.ruler { position: fixed; left: 0; top: 0; bottom: 0; width: 28px; z-index: 30; border-right: 1px solid var(--line2); pointer-events: none; display: none;
  background:
    repeating-linear-gradient(to bottom, var(--line3) 0 1px, transparent 1px 8px) left / 7px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ink3) 0 1px, transparent 1px 64px) left / 13px 100% no-repeat; }
.ruler-mark { position: absolute; left: 0; top: 0; width: 28px; height: 0; border-top: 2px solid var(--amber); transition: transform .08s linear; }
.ruler-mark b { position: absolute; left: 2px; top: 3px; font: 500 9px/1 var(--fm); color: var(--amber); letter-spacing: .04em; }
@media (min-width: 1380px) { .ruler { display: block; } }

/* ---------- nagłówek ---------- */
.top { border-bottom: 1px solid var(--line2); background: var(--bg); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { width: 34px; height: 34px; flex: none; }
.mark .m1 { fill: #14446c; } .mark .m2 { fill: #1a72a0; } .mark .m3 { fill: #1f9ecb; } .mark .m4 { fill: #43c6ee; } .mark .m5 { fill: #f0c27a; } .mark .m6 { fill: #ffb454; }
.mark rect { animation: mark-heat 5.4s ease-in-out infinite; }
.mark rect:nth-child(1) { animation-delay: -5.4s; }
.mark rect:nth-child(2), .mark rect:nth-child(4) { animation-delay: -4.9s; }
.mark rect:nth-child(3), .mark rect:nth-child(5), .mark rect:nth-child(7) { animation-delay: -4.4s; }
.mark rect:nth-child(6), .mark rect:nth-child(8) { animation-delay: -3.9s; }
.mark rect:nth-child(9) { animation-delay: -3.4s; }
.brand:hover .mark rect { animation-duration: 2.4s; }
@keyframes mark-heat { 0%, 100% { fill: #14446c; } 18% { fill: #1a72a0; } 36% { fill: #1f9ecb; } 54% { fill: #43c6ee; } 70% { fill: #f0c27a; } 82% { fill: #ffb454; } }
.brand-name { font: 700 21px/1 var(--fd); font-stretch: 85%; letter-spacing: .16em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 68px; padding: 0 14px; font: 600 13px/1 var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--amber); }
.nav a.main { font-weight: 700; color: var(--ink); }
.nav a.hot { align-self: center; min-height: 40px; margin-right: 6px; padding: 0 16px; border: 1px solid var(--cyan); background: rgba(67, 198, 238, .1); color: var(--cyan); gap: 9px; }
.nav a.hot::before { content: ""; width: 7px; height: 7px; background: var(--cyan); }
.nav a.hot:hover { background: rgba(67, 198, 238, .2); color: var(--ink); }
.nav a.hot[aria-current]::after { left: -1px; right: -1px; bottom: -14px; }
.nav a.login { min-height: 36px; margin-left: 10px; padding: 0 16px; border: 1px solid var(--line3); color: var(--ink); }
.nav a.login:hover { border-color: var(--cyan); color: var(--cyan); }
.lang { display: flex; }
.lang a { padding: 9px 10px; border-left: 1px solid var(--line2); font: 500 12px/1 var(--fm); color: var(--ink3); text-decoration: none; }
.lang li:first-child a { border-left: 0; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--cyan); }
.state { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.state::before { content: ""; width: 7px; height: 7px; background: var(--amber); animation: blink 1.6s step-end infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- pasek komend "Sprawdź sterownik": lepki, na każdej stronie ---------- */
.cmd { position: sticky; top: 0; z-index: 40; background: #0a0e12; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line3); }
.cmd:focus-within { box-shadow: inset 0 -2px 0 var(--amber); }
.cmd-in { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.cmd-l { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--fd); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.cmd-l::before { content: ""; width: 9px; height: 16px; background: var(--amber); animation: blink 1.1s step-end infinite; }
.cmd-p { font: 500 18px/1 var(--fm); color: var(--ink3); }
.cmd input { flex: 1; min-width: 0; padding: 15px 0; background: transparent; border: 0; outline: 0; font: 500 17px/1 var(--fm); letter-spacing: .02em; color: var(--ink); caret-color: var(--amber); }
.cmd input::placeholder { color: var(--ink3); opacity: 1; }
.cmd input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin: 0 4px 0 12px; cursor: pointer; opacity: .8;
  background: linear-gradient(45deg, transparent 43%, var(--ink2) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--ink2) 43% 57%, transparent 57%); }
.cmd input::-webkit-search-cancel-button:hover { opacity: 1; }
.cmd-n { font: 500 12px/1 var(--fm); color: var(--ink2); white-space: nowrap; }
.cmd-n b { color: var(--amber); font-weight: 500; }
/* odpowiedź na wpisaną nazwę: jedna rodzina = jej opis, zero = brak w bazie + droga do zgłoszenia */
.cmd-v { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--fm); white-space: nowrap; color: var(--ink2); }
.cmd-v[hidden] { display: none; }
.cmd-v::before { content: ""; flex: none; width: 9px; height: 9px; }
.cmd-v.yes::before { background: var(--cyan); }
.cmd-v.no { color: var(--amber); }
.cmd-v.no::before { border: 1px solid var(--amber); }
.cmd-v b { font: 700 15px/1 var(--fd); letter-spacing: .05em; color: var(--amber); }
.cmd-v a { margin-left: 6px; color: var(--cyan); text-underline-offset: 3px; }
.cmd-v a:hover { color: var(--ink); }
kbd { font: 500 11px/1 var(--fm); border: 1px solid var(--line3); padding: 4px 7px; color: var(--ink2); }
.cmd-h { display: inline-flex; align-items: center; gap: 10px; font: 500 11px/1 var(--fm); color: var(--ink3); white-space: nowrap; }
.cmd-key { display: inline-flex; align-items: center; gap: 8px; }
.cmd-enter { display: none; color: var(--amber); border-color: var(--amber); }
.cmd:has(.cmd-input:not(:placeholder-shown)) .cmd-enter { display: inline-block; }
.p-capabilities .cmd-enter { display: none !important; }
/* bez JavaScriptu pasek jest zwykłym łączem do strony baz danych (na samej stronie baz danych nie ma czego pokazywać) */
.cmd-fb { display: none; margin-left: auto; font: 600 12px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
html:not(.js) .cmd-fb { display: inline-flex; gap: 8px; }
html:not(.js) .cmd-input, html:not(.js) .cmd-p, html:not(.js) .cmd-n, html:not(.js) .cmd-h { display: none; }
html:not(.js) .p-capabilities .cmd { display: none; }

/* ---------- arkusz: nagłówek strony (wspólne elementy) ---------- */
.hero { position: relative; padding: 40px 0 34px; border-bottom: 1px solid var(--line2); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(110, 150, 175, .075) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(to bottom, rgba(110, 150, 175, .075) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 95%); mask-image: linear-gradient(to bottom, #000, transparent 95%); }
.eyebrow { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12px/1 var(--fm); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.eyebrow b { color: var(--amber); font-weight: 500; }
.h1 { display: flex; align-items: flex-end; gap: 30px; margin-top: 18px; }
/* licznik cyfr (jak w liczniku mechanicznym): każda cyfra to pionowy pasek 0-9-0-9, przewinięty do właściwej wartości; treść paska rysuje CSS, więc DOM nie ma śmieciowego tekstu */
.big { display: flex; font: 700 clamp(120px, min(18.5vw, 23vh), 252px) / .86 var(--fd); font-stretch: 75%; letter-spacing: -.025em; color: var(--ink); }
.od { display: block; height: .86em; overflow: hidden; clip-path: inset(0 0 .07em 0); }   /* clip-path obcina od dołu o 0,07 em: bez tego przy 1x po zaokrągleniu krawędzi okna w górę widać 1 px sąsiedniej cyfry */
.od::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; transform: translateY(calc(var(--s, 10) * -.86em)); }
.ch { display: block; height: .86em; overflow: hidden; white-space: pre; }
.n0 { --s: 10; } .n1 { --s: 11; } .n2 { --s: 12; } .n3 { --s: 13; } .n4 { --s: 14; } .n5 { --s: 15; } .n6 { --s: 16; } .n7 { --s: 17; } .n8 { --s: 18; } .n9 { --s: 19; }
.j0 { --j: 0; } .j1 { --j: 1; } .j2 { --j: 2; } .j3 { --j: 3; } .j4 { --j: 4; } .j5 { --j: 5; } .j6 { --j: 6; } .j7 { --j: 7; }
.lead { max-width: 76ch; margin-top: 16px; font-size: 17px; color: var(--ink2); }

/* ---------- przyciski: ostre, bez cieni ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid transparent; font: 700 14px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color .12s, border-color .12s, color .12s; }
.btn-primary { background: var(--cyan); color: #06121a; }
.btn-primary:hover { background: #7bd9fa; }
.btn-ghost { border-color: var(--line3); color: var(--ink); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 16px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- układ: szyna po lewej + treść ---------- */
.body { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 56px; padding: 30px 0 16px; }
.rail { position: sticky; top: 80px; align-self: start; }
.rail-l { margin-bottom: 12px; font: 500 10.5px/1 var(--fm); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.rail a { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 500 12px/1.2 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); text-decoration: none; }
.rail a:hover { color: var(--ink); }
.rail a[aria-current] { color: var(--ink); box-shadow: inset 2px 0 0 var(--cyan); padding-left: 10px; }
.rail a[aria-current] b { color: var(--amber); }
.rail b { font-weight: 500; }
.sec { margin-bottom: 96px; scroll-margin-top: 72px; }
.sec-h { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; margin-bottom: 20px; padding-top: 16px; border-top: 1px solid var(--line3); }
.sec-h::before { content: ""; position: absolute; left: 0; top: -2px; width: 44px; height: 3px; background: var(--cyan); transition: width .7s cubic-bezier(.2, .7, .2, 1); }
.js .sec:not(.in) .sec-h::before { width: 0; }
.failsafe .sec-h::before { width: 44px !important; }
.sec-n { font: 500 13px/1 var(--fm); color: var(--amber); }
.sec-h h2 { font: 700 25px / 1.1 var(--fd); font-stretch: 88%; letter-spacing: .05em; text-transform: uppercase; }
.sec-m { font: 500 12px/1 var(--fm); letter-spacing: .08em; color: var(--ink3); }
.sec-p { max-width: 72ch; margin-bottom: 26px; color: var(--ink2); }
.link { font: 600 12px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ramka z narożnikami jak znaczniki w wizjerze: panel mapy, rysunki, filmy */
.panel, .fig-frame, .vframe { position: relative; border: 1px solid var(--line3); background: var(--bg1); }
.panel::before, .fig-frame::before, .vframe::before { content: ""; position: absolute; inset: -1px; z-index: 7; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 18px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top left / 2px 18px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top right / 18px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) top right / 2px 18px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 18px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 18px 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) bottom right / 2px 18px no-repeat; }

.tip { position: fixed; z-index: 60; display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; background: #05080a; border: 1px solid var(--amber); font: 500 12px/1 var(--fm); color: var(--ink2); white-space: nowrap; pointer-events: none; }
.tip[hidden] { display: none; }
.tip b { font: 700 15px/1 var(--fd); letter-spacing: .05em; color: var(--amber); }

/* ---------- stopka: indeks arkuszy dokumentu ---------- */
.foot { margin-top: 24px; border-top: 1px solid var(--line3); }
.foot-in { display: grid; grid-template-columns: 1fr auto auto; gap: 18px 40px; align-items: center; padding: 28px 0 38px; }
.foot p, .foot a { font: 500 12px/1.7 var(--fm); letter-spacing: .06em; color: var(--ink3); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.sheets { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.sheets b { font: 500 10.5px/1 var(--fm); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.sheets a { display: inline-flex; gap: 8px; }
.sheets a i { font-style: normal; color: var(--amber); }
.sheets a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--cyan); }
.foot-r { text-align: right; }

/* ---------- animacje wejścia wspólne ---------- */
@media (prefers-reduced-motion: no-preference) {
  .od::before { animation: roll 1.3s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(120ms + var(--j, 0) * 130ms); }
  .lead, .eyebrow { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
  .lead { animation-delay: .9s; }
}
@keyframes roll { from { transform: translateY(0); } }
@keyframes draw { from { clip-path: inset(0 100% 0 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes tb-in { from { opacity: 0; transform: translateX(12px); } }

/* ---------- szerokości (część wspólna) ---------- */
@media (max-width: 1280px) { :root { --cols: 40; } }
@media (max-width: 1180px) {
  :root { --cols: 36; }
  .body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { display: none; }
  /* nagłówek: poniżej tej szerokości pełne menu + język + stan nie mieszczą się w jednym wierszu, więc menu schodzi pod logo */
  .top-in { flex-wrap: wrap; gap: 6px 18px; padding: 12px 0 0; }
  .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .nav a { min-height: 46px; padding: 0 12px; }
  .nav a[aria-current]::after { left: 12px; right: 12px; }
  .nav a.login { margin-left: auto; }
  .lang { margin-left: auto; }
  .state { display: none; }
}
@media (max-width: 960px) {
  :root { --gut: 24px; --cols: 28; }
  .cmd-h, .cmd-n .full { display: none; }
  .cmd-in { flex-wrap: wrap; gap: 0 12px; }
  .cmd input { order: 2; flex: 1 1 0; }
  .cmd-n { order: 3; }
  .cmd-v { order: 4; flex: 1 1 100%; padding: 0 0 12px; white-space: normal; flex-wrap: wrap; row-gap: 6px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  .foot-r { text-align: left; }
}
@media (max-width: 700px) {
  :root { --cols: 20; }
  .hero { padding: 48px 0 44px; }
  .h1 { flex-direction: column; align-items: flex-start; gap: 14px; }
  .big { font-size: clamp(112px, 38vw, 190px); }
  .sec { margin-bottom: 72px; }
  .sec-h { grid-template-columns: 44px minmax(0, 1fr); }
  .sec-m { display: none; }
  .btn { width: 100%; }
}
@media (max-width: 460px) { .cmd-l { font-size: 11px; } .cmd-l span { display: none; } .sec-h h2 { font-size: 21px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Arkusz 02: Możliwości baz danych: licznik z linią wymiarową i tabliczką, mapa, legenda, odczyt, indeks, procedura, tydzień głosowania, DTC. */

/* ---------- nagłówek arkusza ---------- */
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 64px; align-items: end; }
.unit { font: 600 clamp(22px, 2.7vw, 36px) / 1.04 var(--fd); font-stretch: 85%; letter-spacing: .03em; text-transform: uppercase; padding-bottom: .14em; }
/* linia wymiarowa jak na rysunku technicznym: długość = liczba rodzin, podzielona w skali ECU | TCU (szerokości z danych) */
.dl { display: flex; height: 40px; margin-top: 20px; }
.dl-s { position: relative; flex: 1 1 0; min-width: 0; padding: 0 0 0 8px; border-left: 1px solid var(--ink3); font: 500 11px/1 var(--fm); letter-spacing: .14em; color: var(--ink2); white-space: nowrap; }
.dl-s b { font-weight: 600; color: var(--ink); }
.dl-s::before { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 9px; background: var(--ink3);
  clip-path: polygon(0 50%, 8px 0, 8px 44%, calc(100% - 8px) 44%, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, calc(100% - 8px) 56%, 8px 56%, 8px 100%); }
.dl-t { display: flex; justify-content: flex-end; padding: 0 8px 0 0; border-right: 1px solid var(--ink3); }
.tb { border: 1px solid var(--line3); background: var(--bg1); }
.tb-h { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--cyan); color: #04141b; font: 700 13px/1 var(--fd); letter-spacing: .16em; text-transform: uppercase; }
.tb dl { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.tb dt, .tb dd { padding: 10px 14px; border-top: 1px solid var(--line2); }
.tb dt:first-of-type, .tb dd:first-of-type { border-top: 0; }
.tb dt { border-right: 1px solid var(--line2); font: 500 10.5px/1.5 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.tb dd { font: 600 15px/1.3 var(--fd); letter-spacing: .05em; text-transform: uppercase; text-align: right; }
.tb dd.hot { color: var(--amber); }

/* ---------- mapa bazy ---------- */
.cap { padding: 11px 16px 10px; border-bottom: 1px solid var(--line); font: 500 11.5px/1.5 var(--fm); letter-spacing: .04em; color: var(--ink3); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.tools-l { font: 500 10.5px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); margin-right: 2px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line3); font: 600 12px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.chip i { font: 500 12px/1 var(--fm); letter-spacing: 0; font-style: normal; color: var(--ink3); }
.chip:hover { border-color: var(--ink3); color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--cyan); color: var(--ink); box-shadow: inset 0 0 0 1px var(--cyan); }
.chip.ghost { border-style: dashed; color: var(--amber); }
.chip[hidden] { display: none; }
.tools-n { margin-left: auto; font: 500 12px/1 var(--fm); color: var(--ink2); }
.grid { padding: 6px 16px 14px; }
.div-h { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; padding: 10px 0 8px; font: 700 12px/1 var(--fd); letter-spacing: .16em; text-transform: uppercase; color: var(--ink2); }
.div-h b { color: var(--amber); font: 500 12px/1 var(--fm); }
.div-h i { margin-left: auto; font: 500 12px/1 var(--fm); font-style: normal; color: var(--ink3); letter-spacing: .06em; }
.mrow { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.mlab b { display: block; font: 700 14px/1.15 var(--fd); letter-spacing: .06em; text-transform: uppercase; }
.mlab .mc { display: block; margin-top: 3px; font: 500 12px/1 var(--fm); color: var(--ink3); }
.mlab .mc i { margin-left: 10px; font-style: normal; letter-spacing: .04em; color: var(--ink2); }
.mdist { display: flex; gap: 1px; height: 4px; margin-top: 9px; max-width: 150px; }
.mdist i { flex: 1 1 0; height: 4px; margin: 0; background: var(--c); }
.mcw { position: relative; }
.mcells { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; }
.c { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--c); cursor: crosshair; transition: opacity .14s, transform .08s; }
/* wiersz pod kursorem wychodzi na pierwszy plan, reszta mapy cofa się (ostrość + kontekst) */
.mrow .mlab, .mrow .mcells { transition: opacity .16s; }
.grid:has(.mrow:hover) .mrow:not(:hover) .mlab, .grid:has(.mrow:hover) .mrow:not(:hover) .mcells { opacity: .42; }
.mrow:hover .mlab b { color: var(--amber); }
.c:hover, .c.sel { z-index: 3; transform: scale(1.35); outline: 2px solid var(--amber); outline-offset: 0; }
.c.off { opacity: .09; }
.c.m { outline: 2px solid var(--amber); outline-offset: 0; z-index: 2; }
.l1 { --c: var(--r1); } .l2 { --c: var(--r2); } .l3 { --c: var(--r3); } .l4 { --c: var(--r4); } .l5 { --c: var(--r5); }
.d1 { --c: var(--r1); } .d2 { --c: var(--r2); } .d3 { --c: var(--r3); } .d4 { --c: var(--r4); } .d5 { --c: var(--r5); }
/* najechanie na poziom w legendzie podświetla go na mapie, reszta przygasa (bez klikania) */
.panel:has(.hl-1:hover) .c:not(.l1), .panel:has(.hl-2:hover) .c:not(.l2), .panel:has(.hl-3:hover) .c:not(.l3), .panel:has(.hl-4:hover) .c:not(.l4), .panel:has(.hl-5:hover) .c:not(.l5) { opacity: .13; }
.legend { display: flex; gap: 2px; padding: 16px 16px 14px; border-top: 1px solid var(--line2); }
.hl { display: flex; flex: 1 1 0; flex-direction: column; gap: 8px; min-width: 0; padding: 0 0 4px; }
.hl .hb { display: block; height: 10px; background: var(--c); }
.hl b { font: 700 18px/1 var(--fd); letter-spacing: .02em; }
.hl span.hn { overflow: hidden; font: 500 11px/1.2 var(--fm); color: var(--ink2); text-overflow: ellipsis; white-space: nowrap; }
.hl:hover .hb { outline: 1px solid var(--ink3); outline-offset: 2px; }
.hl[aria-pressed="true"] .hb { outline: 2px solid var(--amber); outline-offset: 2px; }
.legend.on-filter .hl[aria-pressed="false"] { opacity: .42; }
.note-l { padding: 0 16px 14px; max-width: 110ch; font-size: 13px; line-height: 1.55; color: var(--ink2); }
.read { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .5fr) minmax(0, 1.6fr) auto; min-height: 62px; border-top: 1px solid var(--line3); background: var(--bg2); }
.read.pin { position: sticky; bottom: 0; z-index: 6; border-top-color: var(--cyan); }   /* przypięty do dołu okna, gdy użytkownik jest "w" mapie albo coś odczytuje */
.read > div { padding: 11px 16px; border-left: 1px solid var(--line2); min-width: 0; }
.read > div:first-child { border-left: 0; }
.read dt { margin-bottom: 7px; font: 500 10px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.read dd { overflow: hidden; font: 600 16px/1.2 var(--fm); color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.read dd.fam-v { font-size: 19px; color: var(--amber); }
.read-idle { display: none; align-items: center; grid-column: 1 / -1; padding: 0 16px; font: 500 13px/1.4 var(--fm); color: var(--ink3); }
.read.idle > div:not(.read-idle) { display: none; }
.read.idle > .read-idle { display: flex; }
.read .go { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; }
.read .go dd { font-size: 13px; color: var(--ink2); }
.go button { margin-top: 6px; padding: 7px 10px; border: 1px solid var(--amber); font: 600 12px/1 var(--fd); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); text-decoration: none; white-space: nowrap; }
.go button:hover { background: var(--amber); color: #1a1100; }
.sigl { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- indeks rodzin ---------- */
.idx-d { display: flex; align-items: baseline; gap: 14px; margin: 28px 0 8px; font: 700 15px/1 var(--fd); letter-spacing: .1em; text-transform: uppercase; }
.idx-d:first-of-type { margin-top: 0; }
.idx-d b { font: 500 13px/1 var(--fm); color: var(--amber); }
.idx-d i { margin-left: auto; font: 500 12px/1 var(--fm); font-style: normal; color: var(--ink3); }
.idx-bar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.grp { border-top: 1px solid var(--line2); }
.grp:last-child { border-bottom: 1px solid var(--line2); }
.grp[hidden], .fam li[hidden] { display: none; }
.grp > summary { display: grid; grid-template-columns: 22px minmax(190px, 360px) 56px 64px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 52px; padding: 0 8px; list-style: none; cursor: pointer; }
.sec-dev .grp > summary { grid-template-columns: 22px minmax(0, 1fr) 56px; }
.sec-dev .g-avg, .sec-dev .g-dist { display: none; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary:hover { background: rgba(67, 198, 238, .05); }
.caret { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--ink3); transition: transform .12s; }
.grp[open] .caret { transform: rotate(90deg); border-left-color: var(--amber); }
.g-name { font: 700 17px/1.1 var(--fd); letter-spacing: .06em; text-transform: uppercase; }
.g-count { font: 500 13px/1 var(--fm); text-align: right; color: var(--ink2); }
.g-avg { font: 500 12px/1 var(--fm); text-align: right; letter-spacing: .04em; color: var(--ink3); }
.g-dist { display: flex; gap: 1px; height: 6px; }
.g-dist i { flex: 1 1 0; background: var(--c); }
.fam { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); column-gap: 30px; padding: 4px 8px 24px 44px; }
.fam li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 34px; border-bottom: 1px solid var(--line); }
.fam li:hover { background: rgba(67, 198, 238, .06); }
.fam li.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 35% { background: rgba(255, 180, 84, .3); box-shadow: inset 3px 0 0 var(--amber); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
.fn { font: 500 14px/1.2 var(--fm); color: var(--ink); overflow-wrap: anywhere; }
.sig { display: inline-flex; flex: none; align-items: flex-end; gap: 2px; height: 14px; }
.sig i { display: block; width: 4px; background: var(--line3); }
.sig i:nth-child(1) { height: 5px; } .sig i:nth-child(2) { height: 7px; } .sig i:nth-child(3) { height: 9px; } .sig i:nth-child(4) { height: 12px; } .sig i:nth-child(5) { height: 14px; }
.sig.l1 i:nth-child(-n+1), .sig.l2 i:nth-child(-n+2), .sig.l3 i:nth-child(-n+3), .sig.l4 i:nth-child(-n+4), .sig.l5 i { background: var(--c); }
.fam.plain li::before { content: ""; flex: none; width: 8px; height: 8px; border: 1px solid var(--amber); }
.none { padding: 28px 8px; font: 500 14px/1.4 var(--fm); color: var(--ink3); }
.none[hidden] { display: none; }

/* ---------- rozwój: procedura jako tabela, tydzień głosowania ---------- */
/* numer | nazwa | opis | znacznik; ostatni wiersz (równolegle) to osobny tor, stąd przerywana linia i bursztynowy znacznik */
.proc { border-top: 1px solid var(--line3); }
.proc li { display: grid; grid-template-columns: 44px minmax(150px, 250px) minmax(0, 1fr) auto; column-gap: 22px; align-items: baseline; padding: 17px 8px 17px 0; border-bottom: 1px solid var(--line2); }
.proc li:hover { background: rgba(67, 198, 238, .04); }
.pn { font: 500 13px/1 var(--fm); color: var(--ink3); }
.proc li:hover .pn { color: var(--amber); }
.proc h3 { font: 700 15px/1.25 var(--fd); letter-spacing: .08em; text-transform: uppercase; }
.proc p { max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--ink2); }
.ptag { padding: 4px 8px; border: 1px solid var(--line3); font: 500 11px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.proc li.par { border-bottom: 1px dashed var(--amber); }
.proc li.par .pn, .proc li.par .ptag { color: var(--amber); }
.proc li.par .ptag { border-color: var(--amber); }
.week { margin-top: 36px; }
.week figcaption { margin-bottom: 14px; font: 500 11px/1 var(--fm); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.wk { position: relative; padding-top: 26px; }
.wk-bar { height: 4px; background: var(--cyan); }
.wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line3); }
.wk-days li { height: 58px; padding: 30px 0 0 10px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); font: 500 11px/1 var(--fm); letter-spacing: .14em; color: var(--ink2); }
.wk-days li:nth-child(n+6) { color: var(--ink); }
.wk-now { position: absolute; top: 0; height: 44px; width: 0; border-left: 2px solid var(--amber); z-index: 2; }   /* szpilka od flagi do tuż pod paskiem: nie przecina nazw dni */
.wk-now[hidden] { display: none; }
.wk-now span { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 5px 8px; background: var(--amber); color: #1a1100; font: 700 10.5px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; }
.wk-now.flip span { left: auto; right: -2px; }
.wk-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font: 500 11px/1.4 var(--fm); letter-spacing: .06em; color: var(--ink3); }
.wk-cap span:last-child { text-align: right; }
.wk-rel { margin-top: 14px; font: 600 12px/1 var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.outro { max-width: 80ch; margin-top: 26px; font-size: 17px; color: var(--ink); }

/* ---------- kody usterek (DTC): moduł w rozwoju ---------- */
.sec-dev .sec-h::before { background: var(--amber); }
.tag-dev { display: inline-block; margin-left: 16px; padding: 6px 10px; border: 1px solid var(--amber); background: repeating-linear-gradient(135deg, rgba(255, 180, 84, .2) 0 6px, transparent 6px 12px); font: 600 11px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); vertical-align: 4px; }
.dtc-g { margin-top: 8px; }

/* ---------- animacja odczytu mapy: linia skanu biegnie przez wiersz, a każda komórka, którą mija, błyska bursztynem i opada do swojego koloru ---------- */
/* --k (kolejność wiersza w partii) i --x (kolumna komórki) ustawia JS; czas biegu linii = liczba kolumn x 11 ms, więc linia i błyski są zgodne co do klatki */
.c::after { content: ""; position: absolute; inset: 0; background: var(--amber); opacity: 0; pointer-events: none; }
.js .mrow:not(.on) .c { opacity: 0; }
.js .mrow.on .c { animation: cell-in .46s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--k, 0) * 70ms + var(--x, 0) * 11ms); }
.js .mrow.on .c::after { animation: cell-flash .66s ease-out backwards; animation-delay: calc(var(--k, 0) * 70ms + var(--x, 0) * 11ms); }
.js .mrow.on .mcw::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 0; width: 2px; background: var(--amber); opacity: 0; pointer-events: none; animation: scanline calc(var(--cols) * 11ms) linear backwards; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes cell-in { from { opacity: 0; transform: scale(.35); } 40% { opacity: 1; transform: scale(1.14); } }
@keyframes cell-flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes scanline { from { left: 0; opacity: 1; } 92% { opacity: 1; } to { left: 100%; opacity: 0; } }
.failsafe .mrow .c { opacity: 1 !important; animation: none !important; }
.failsafe .mrow .c::after, .failsafe .mrow .mcw::after { display: none; }

/* ---------- wejście strony: tabliczka drukuje się wiersz po wierszu, linia wymiarowa się rysuje ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dl { animation: draw 1.1s cubic-bezier(.2, .7, .2, 1) .5s backwards; }
  .tb dt, .tb dd { animation: tb-in .5s cubic-bezier(.2, .8, .2, 1) backwards; }
  .tb dt:nth-of-type(1), .tb dd:nth-of-type(1) { animation-delay: .35s; } .tb dt:nth-of-type(2), .tb dd:nth-of-type(2) { animation-delay: .42s; }
  .tb dt:nth-of-type(3), .tb dd:nth-of-type(3) { animation-delay: .49s; } .tb dt:nth-of-type(4), .tb dd:nth-of-type(4) { animation-delay: .56s; }
}

/* ---------- szerokości ---------- */
@media (max-width: 1180px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tb { max-width: 460px; }
}
/* tablet: tabliczka rysunkowa jako pasek (etykieta nad wartością), zamiast wąskiej kolumny */
@media (min-width: 701px) and (max-width: 1180px) {
  .tb { max-width: none; }
  .tb dl { grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tb dt, .tb dd { border-top: 0; border-right: 0; border-left: 1px solid var(--line2); text-align: left; }
  .tb dt { padding: 12px 14px 0; white-space: normal; }
  .tb dd { padding: 6px 14px 14px; }
  .tb dt:first-of-type, .tb dd:first-of-type { border-left: 0; }
}
@media (max-width: 960px) {
  .proc li { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 6px; }
  .proc li p { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 700px) {
  .unit { padding-bottom: 0; }
  .mrow { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mlab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .mlab .mc { margin-top: 0; }
  .mdist { flex: 0 0 100%; max-width: none; margin-top: 4px; }
  .legend { flex-direction: column; gap: 10px; }
  .hl { flex: none; display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; }
  .hl .hb { grid-row: 1 / span 2; height: 22px; width: calc(var(--share, 20) * 1%); min-width: 10px; align-self: center; grid-column: 2; }
  .hl b { grid-column: 1; grid-row: 1; font-size: 17px; }
  .hl span.hn { grid-column: 1; grid-row: 2; }
  .read { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .read > div { border-top: 1px solid var(--line2); }
  .read > div:nth-child(-n+2) { border-top: 0; }
  .read > div:nth-child(odd) { border-left: 0; }
  .grp > summary { grid-template-columns: 22px minmax(0, 1fr) 40px 54px; gap: 10px; }
  .sec-dev .grp > summary { grid-template-columns: 22px minmax(0, 1fr) 40px; }
  .grp > summary .g-dist { display: none; }
  .fam { padding-left: 8px; grid-template-columns: minmax(0, 1fr); }
  .proc li { grid-template-columns: 30px minmax(0, 1fr); }
  .proc li .ptag { grid-column: 2; grid-row: 3; justify-self: start; }
  .proc li p { grid-row: 2; }
  .wk-days li { padding-left: 4px; letter-spacing: .04em; font-size: 10px; }
  .wk-cap { flex-direction: column; }
  .wk-cap span:last-child { text-align: left; }
}
@media (max-width: 460px) { .tag-dev { margin: 10px 0 0; display: block; width: fit-content; } }

/* grupowanie wariantów w indeksie: rodzic ma znacznik +N, dziecko znak ↳ */
.idx-sub { margin: 4px 0 14px; max-width: 78ch; }
.fn + .sub { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--line3); font: 500 11px/1.3 var(--fm); color: var(--cyan); cursor: help; }
li.kid .fn::before { content: "↳ "; color: var(--ink3); }

/* Arkusz 01: strona główna: wordmark z logo, rysunki (zrzuty z programu) z oznaczeniami, galeria i filmy, lista możliwości, fakty, o programie,
   indeks tabel, kwartał premiery z markerem "teraz", kontakt, podgląd zrzutów (lightbox). */

/* ---------- hero ---------- */
.hero-home { padding: 44px 0 44px; }
.home-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.h1-home { display: block; margin-top: 24px; }
.lockup { display: flex; align-items: center; gap: 22px; }
.mark-xl { width: clamp(64px, 7vw, 96px); height: auto; aspect-ratio: 1; }
.wm { font: 700 clamp(54px, 7.2vw, 104px) / .9 var(--fd); font-stretch: 75%; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.h1-sub { display: block; margin-top: 18px; font: 600 clamp(15px, 1.6vw, 22px) / 1.25 var(--fd); font-stretch: 88%; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.home-l .lead { margin-top: 22px; }
.spec { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 34px; border-top: 1px solid var(--line3); }
.spec > div { padding: 14px 26px 2px 0; margin-right: 26px; border-right: 1px solid var(--line2); }
.spec > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.spec dt { font: 500 10.5px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.spec dd { margin-top: 14px; }
.num { display: inline-flex; font: 700 clamp(38px, 4.4vw, 62px) / .86 var(--fd); font-stretch: 75%; letter-spacing: -.02em; color: var(--ink); }
.num-t { display: inline-block; }

/* ---------- rysunki: zrzuty z programu w ramce z narożnikami + oznaczenia ---------- */
.fig { margin: 0; }
.fig-frame { display: block; padding: 0; text-decoration: none; }
.fig-frame img { display: block; width: 100%; height: auto; }
.fig-frame:hover { border-color: var(--ink3); }
/* rysunek "odczytuje się" jak mapa: obraz odsłania się od lewej za bursztynową linią skanu, gdy wchodzi w widok (bez JS i przy ograniczonym ruchu: od razu cały) */
.js .fig:not(.in) .fig-frame img { clip-path: inset(0 100% 0 0); }
.js .fig.in .fig-frame img { animation: unveil 1.2s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.js .fig.in .fig-frame::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--amber); opacity: 0; pointer-events: none; z-index: 4; animation: scan-x 1.2s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
@keyframes unveil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes scan-x { from { left: 0; opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }
.failsafe .fig-frame img { clip-path: none !important; animation: none !important; }
.failsafe .fig-frame::after { display: none; }
.fig figcaption { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; font: 500 12px/1.55 var(--fm); letter-spacing: .02em; color: var(--ink2); }
.fig figcaption b { flex: none; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.co { position: absolute; z-index: 3; border: 1.5px solid var(--amber); pointer-events: none; transition: opacity .4s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.co b { position: absolute; left: -1.5px; top: -1.5px; transform: translateY(-100%); min-width: 20px; padding: 3px 6px; background: var(--amber); color: #1a1100; font: 700 11px/1 var(--fm); text-align: center; }
.js .fig:not(.in) .co { opacity: 0; transform: translateY(6px); }
.co:nth-child(3) { transition-delay: .12s; } .co:nth-child(4) { transition-delay: .24s; } .co:nth-child(5) { transition-delay: .36s; }
.failsafe .co { opacity: 1 !important; transform: none !important; }
.key { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line2); font: 500 12px/1.3 var(--fm); color: var(--ink2); }
.key li { display: inline-flex; align-items: center; gap: 9px; }
.key b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: var(--amber); color: #1a1100; font: 700 11px/1 var(--fm); }
/* galeria: pokaz slajdów (wszystkie slajdy w jednej komórce siatki, więc wysokość = najwyższy slajd i nic nie skacze), pasek miniatur z postępem, pauza */
.js .gal-stage { display: grid; }
.js .gal .slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.js .gal .slide.on { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .3s; }
html:not(.js) .gal .slide + .slide, .failsafe .gal .slide + .slide { margin-top: 44px; }
.failsafe .gal .slide { grid-area: auto; visibility: visible; opacity: 1; pointer-events: auto; }
.failsafe .gal-stage { display: block; }
.gal-ui { display: none; }
.js .gal-ui { display: block; margin-top: 18px; }
.failsafe .gal-ui { display: none; }
.gal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gb { min-height: 40px; padding: 0 16px; border: 1px solid var(--line3); font: 600 12px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.gb:hover { border-color: var(--cyan); color: var(--cyan); }
.gal-cnt { margin-left: auto; font: 500 12px/1 var(--fm); letter-spacing: .14em; color: var(--ink2); }
.gal-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.gt { position: relative; display: block; min-width: 0; padding: 0; border: 1px solid var(--line2); background: var(--bg1); opacity: .5; transition: opacity .15s, border-color .15s; }
.gt img { display: block; width: 100%; height: auto; }
.gt b { position: absolute; left: 0; top: 0; padding: 3px 6px; background: rgba(9, 12, 15, .88); font: 500 10.5px/1 var(--fm); color: var(--ink2); }
.gt:hover { opacity: 1; border-color: var(--ink3); }
.gt.on { opacity: 1; border-color: var(--cyan); }
.gt.on b { background: var(--amber); color: #1a1100; }
.gt-p { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--amber); }
.gt.on .gt-p { animation: gprog 6.5s linear forwards; }
.gal.paused .gt.on .gt-p { animation: none; width: 100%; opacity: .4; }
@keyframes gprog { from { width: 0; } to { width: 100%; } }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; align-items: start; }
.fig-wide { grid-column: 1 / -1; }
/* film z YouTube: ramka 16:9; odtwarzacz ładuje się dopiero po kliknięciu (youtube-nocookie.com), bez JS to zwykłe łącze */
.vframe { aspect-ratio: 16 / 9; overflow: hidden; }
.vframe::before { z-index: 8; }
.vplay { position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none; }
.vplay img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vph { position: absolute; inset: 0; background: linear-gradient(to right, rgba(110, 150, 175, .08) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(to bottom, rgba(110, 150, 175, .08) 1px, transparent 1px) 0 0 / 48px 48px, var(--bg1); }
.vico { position: relative; width: 84px; height: 84px; border: 2px solid var(--amber); background: rgba(9, 12, 15, .72); transition: background-color .15s; }
.vico::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-36%, -50%); border-left: 26px solid var(--amber); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.vplay:hover .vico { background: var(--amber); }
.vplay:hover .vico::after { border-left-color: #1a1100; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vnote { display: block; margin-top: 4px; font-style: normal; color: var(--ink3); }

/* ---------- 01 możliwości: typograficzna lista pięciu haseł ---------- */
.featlist { border-top: 1px solid var(--line3); }
.featlist li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; padding: 22px 0 20px; border-bottom: 1px solid var(--line2); transition: background-color .15s; }
.fno { font: 500 13px/1 var(--fm); color: var(--ink3); transition: color .15s; }
.ft { max-width: 62ch; font: 500 19px / 1.5 var(--ft); color: var(--ink); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }   /* dłuższe zdania: czytelny krój tekstowy, stały rozmiar */
.featlist li:hover { background: rgba(67, 198, 238, .04); }
.featlist li:hover .fno { color: var(--amber); }
.featlist li:hover .ft { transform: translateX(10px); }

/* ---------- 03 w skrócie: tabela faktów ---------- */
.facts { border-top: 1px solid var(--line3); }
.facts li { display: grid; grid-template-columns: minmax(150px, 270px) minmax(0, 300px) minmax(0, 1fr); gap: 0 30px; align-items: baseline; padding: 24px 0 22px; border-bottom: 1px solid var(--line2); }
.ffig { font: 700 clamp(38px, 4.4vw, 62px) / .9 var(--fd); font-stretch: 75%; letter-spacing: -.01em; color: var(--ink); }
.facts h3 { font: 700 15px/1.25 var(--fd); letter-spacing: .08em; text-transform: uppercase; }
.facts p { max-width: 62ch; color: var(--ink2); }

/* ---------- 05 biblioteka tabel: indeks rodzajów tabel ---------- */
.tabidx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line3); border-left: 1px solid var(--line2); }
.tabidx li { display: flex; align-items: baseline; gap: 14px; min-width: 0; min-height: 66px; padding: 16px 18px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); transition: background-color .15s; }
.tabidx span { min-width: 0; }
.tabidx i { flex: none; font: 500 11px/1 var(--fm); font-style: normal; letter-spacing: .1em; color: var(--ink3); transition: color .15s; }
.tabidx span { font: 600 16px/1.25 var(--fd); letter-spacing: .04em; text-transform: uppercase; }
.tabidx li:hover { background: rgba(67, 198, 238, .05); }
.tabidx li:hover i { color: var(--amber); }

/* ---------- 06 premiera: kwartał z markerem "teraz" ---------- */
.qtr figcaption { margin-bottom: 14px; font: 500 11px/1 var(--fm); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.qtr-wrap { position: relative; padding-top: 26px; }
.qtr-bar { height: 4px; background: var(--cyan); }
.qtr-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line3); }
.qtr-m li { height: 66px; padding: 34px 0 0 12px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); font: 600 14px/1 var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2);
  background: linear-gradient(to right, var(--line3) 1px, transparent 1px) 0 100% / 25% 9px repeat-x; }
.qtr-now { position: absolute; top: 0; height: 44px; width: 0; border-left: 2px solid var(--amber); z-index: 2; }   /* szpilka od flagi do tuż pod paskiem: nie przecina nazw miesięcy */
.qtr-now[hidden] { display: none; }
.qtr-now span { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 5px 8px; background: var(--amber); color: #1a1100; font: 700 10.5px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; }
.qtr-now.flip span { left: auto; right: -2px; }
.qtr-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font: 500 11px/1.4 var(--fm); letter-spacing: .06em; color: var(--ink3); }
.qtr-rel { margin-top: 14px; font: 600 12px/1.3 var(--fd); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.timeline { border-top: 1px solid var(--line3); }
.timeline li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.t-label { font: 500 12px/1.4 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.timeline .is-now .t-label { color: var(--cyan); }

/* ---------- 07 kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding: 34px 0; border-top: 1px solid var(--line3); border-bottom: 1px solid var(--line3); }
.contact-text { max-width: 32em; font-size: 21px; line-height: 1.5; color: var(--ink); }

/* ---------- podgląd zrzutów w pełnym rozmiarze (lightbox na <dialog>) ---------- */
.lb { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #05080a; color: var(--ink); }
.lb::backdrop { background: rgba(5, 8, 10, .9); }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-bar { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 18px; border-bottom: 1px solid var(--line3); font: 500 12px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.lb-bar b { font-weight: 500; color: var(--amber); }
.lb-sp { flex: 1; }
.lb-btn { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--line3); font: 600 12px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.lb-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.lb-btn[disabled] { opacity: .3; pointer-events: none; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 18px; overflow: auto; }
.lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border: 1px solid var(--line3); cursor: zoom-in; }
.lb.z .lb-stage { place-items: start center; }
.lb.z .lb-img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-cap { padding: 12px 18px 16px; border-top: 1px solid var(--line3); font: 400 14px/1.5 var(--ft); color: var(--ink2); }

/* ---------- szerokości ---------- */
@media (max-width: 1180px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fig-hero { max-width: 760px; }
}
@media (max-width: 960px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .facts li { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 8px 24px; }
  .facts p { grid-column: 2; }
  .tabidx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 700px) {
  .hero-home { padding: 34px 0 36px; }
  .lockup { gap: 14px; }
  .mark-xl { width: clamp(44px, 14vw, 64px); }
  .wm { font-size: clamp(34px, 13vw, 62px); white-space: nowrap; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; margin: 0; padding: 14px 0 12px; border-right: 0; border-bottom: 1px solid var(--line2); }
  .spec dt { min-width: 0; overflow-wrap: anywhere; }
  .spec dd { margin-top: 0; }
  .num { font-size: 40px; }
  .facts li { grid-template-columns: minmax(0, 1fr); }
  .facts p { grid-column: 1; }
  .tabidx { grid-template-columns: minmax(0, 1fr); }
  .featlist li { grid-template-columns: 40px minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lb-bar { padding: 0 10px; gap: 8px; }
  .lb-stage { padding: 8px; }
}

/* pasek "program lokalny" pod hero */
.own { border-top: 1px solid var(--line3); border-bottom: 1px solid var(--line2); background: var(--bg1); }
.own-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; padding-block: 36px 34px; align-items: start; }
.own-k { font: 500 11px/1 var(--fm); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 14px; }
.own-h { font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--fd); letter-spacing: .04em; text-transform: uppercase; }
.own-p { max-width: 64ch; color: var(--ink2); }
.own-pts { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line2); }
.own-pts li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line2); font: 600 13px/1.3 var(--fd); letter-spacing: .08em; text-transform: uppercase; }
.own-pts li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--cyan); }
.own-n { margin-top: 14px; font: 12px/1.5 var(--fm); letter-spacing: .02em; color: var(--ink3); max-width: 70ch; }
@media (max-width: 860px) { .own-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 28px; } }

/* Arkusz 03 (polityka prywatności) i strona 404. */

/* ---------- dokument: numerowane klauzule ---------- */
.hero-doc { padding: 44px 0 36px; }
.h1-doc { display: block; margin-top: 18px; font: 700 clamp(40px, 5.6vw, 80px) / .98 var(--fd); font-stretch: 78%; letter-spacing: .02em; text-transform: uppercase; }
.hero-doc .lead { max-width: 72ch; }
.doc { min-width: 0; max-width: 78ch; }
.clause { margin-bottom: 46px; scroll-margin-top: 72px; }
.cl-h { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; margin-bottom: 14px; padding-top: 14px; border-top: 1px solid var(--line3); }
.cl-h::before { content: ""; position: absolute; left: 0; top: -2px; width: 28px; height: 3px; background: var(--cyan); }
.cl-n { font: 500 13px/1 var(--fm); color: var(--amber); }
.cl-h h2 { font: 700 20px / 1.2 var(--fd); font-stretch: 90%; letter-spacing: .05em; text-transform: uppercase; }
.cl-b { padding-left: 56px; }
.cl-b p, .cl-b li { color: var(--ink2); line-height: 1.7; }
.cl-b p + p, .cl-b p + ul, .cl-b ul + p { margin-top: 12px; }
.cl-b li { position: relative; padding-left: 24px; margin-top: 9px; }
.cl-b li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; border: 1px solid var(--amber); }
.cl-b a { color: var(--cyan); text-underline-offset: 3px; }
.cl-b a:hover { color: var(--ink); }
.doc-back { padding-top: 6px; }

/* ---------- 404 ---------- */
.hero-404 { padding: 56px 0 60px; }
.p-notfound .foot { margin-top: 0; }
.hero-404-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: end; }
.lead-404 { max-width: 40ch; margin-top: 26px; font-size: 19px; }
/* fragment prawdziwej mapy z jedną brakującą komórką */
.mm-grid { display: grid; grid-template-columns: repeat(12, 22px); gap: 3px; padding-bottom: 6px; }
.mm-grid i { display: block; width: 22px; height: 22px; background: var(--c); }
.mm-grid i.mm { background: transparent; outline: 1px dashed var(--amber); outline-offset: -1px; animation: blink 1.4s step-end infinite; }

@media (max-width: 1180px) { .hero-404-in { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 960px) { .cl-b { padding-left: 0; } .cl-h { grid-template-columns: 44px minmax(0, 1fr); } }
@media (max-width: 700px) { .mm-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .mm-grid i { width: auto; aspect-ratio: 1; } }

/* open points of the legal texts (draft) and the draft flag */
.todo { background: rgba(240, 180, 40, .22); color: var(--amber); padding: 0 3px; }
.draft-flag { margin-top: 18px; padding: 10px 14px; border: 1px solid var(--amber); color: var(--amber); font: 500 13px/1.5 var(--fm); max-width: 78ch; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12px/1.4 var(--fm); }
.legal-links a { color: var(--ink2); text-decoration: none; }
.legal-links a:hover, .legal-links a[aria-current] { color: var(--cyan); }
.doc-note { margin-top: 14px; color: var(--ink2); font: 500 13px/1.5 var(--fm); max-width: 78ch; }

/* Purchase and continuation: separate offers, with explicit net prices. */
.commercial-offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; list-style:none; padding:0; margin:28px 0; }
.commercial-offers > li { border:1px solid var(--line,#27313a); padding:24px; background:rgba(10,17,21,.65); }
.commercial-price { display:block; font-size:clamp(2.2rem,4vw,3.5rem); font-weight:800; line-height:1.15; margin-bottom:18px; }
.commercial-offers h2,.commercial-offers h3 { font-size:1.25rem; line-height:1.4; margin:0 0 12px; }
.commercial-offers p { margin:10px 0 0; font-size:1rem; line-height:1.6; }
@media (max-width:640px) { .commercial-offers { grid-template-columns:1fr; gap:16px; } }

/* Clearly separate map and DTC allowances; tables remain readable on phones. */
.quota-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; }
.quota-card { min-width:0; padding:20px; border:1px solid var(--line3); background:rgba(0,190,220,.035); }
.quota-card h3 { font:700 19px/1.4 var(--fd); margin-bottom:20px; color:var(--ink); }
.quota-table { width:100%; border-collapse:collapse; font-size:14px; }
.quota-table th,.quota-table td { padding:12px 8px; border-bottom:1px solid var(--line3); text-align:left; vertical-align:top; }
.quota-table td { font:700 26px/1.2 var(--fm); color:var(--cyan); }
.quota-table thead th { font-weight:500; color:var(--ink2); }
.quota-card p { margin-top:18px; }
.quota-dtc { border-color:var(--amber); }
.quota-card .quota-number { font:800 64px/1 var(--fd); color:var(--amber); margin:0; }
.quota-card .quota-unit { font-weight:700; color:var(--ink); margin:10px 0 22px; }
.quota-reset { padding:16px; margin-top:20px; border-left:3px solid var(--cyan); background:rgba(0,190,220,.05); }
.quota-requirements { margin-top:28px; }
.p-pricing .cl-h { display:block; }
@media (max-width:700px) { .quota-grid { grid-template-columns:1fr; } .quota-card { padding:16px; } .quota-table th,.quota-table td { padding:10px 4px; } }

/* ===== generated from the data (build-v2.mjs) ===== */
.g0 .d1 { flex-grow: 15; }
.g0 .d2 { flex-grow: 60; }
.g0 .d3 { flex-grow: 45; }
.g0 .d4 { flex-grow: 43; }
.g0 .d5 { flex-grow: 29; }
.g1 .d1 { flex-grow: 6; }
.g1 .d2 { flex-grow: 31; }
.g1 .d3 { flex-grow: 19; }
.g1 .d4 { flex-grow: 10; }
.g1 .d5 { flex-grow: 3; }
.g2 .d1 { flex-grow: 2; }
.g2 .d2 { flex-grow: 4; }
.g2 .d3 { flex-grow: 5; }
.g2 .d4 { flex-grow: 11; }
.g2 .d5 { flex-grow: 3; }
.g3 .d1 { flex-grow: 2; }
.g3 .d2 { flex-grow: 5; }
.g3 .d3 { flex-grow: 2; }
.g4 .d1 { flex-grow: 5; }
.g4 .d2 { flex-grow: 3; }
.g4 .d3 { flex-grow: 2; }
.g4 .d4 { flex-grow: 3; }
.g5 .d2 { flex-grow: 1; }
.g6 .d1 { flex-grow: 3; }
.g6 .d2 { flex-grow: 1; }
.g6 .d3 { flex-grow: 1; }
.g7 .d3 { flex-grow: 1; }
.g8 .d1 { flex-grow: 1; }
.g9 .d2 { flex-grow: 1; }
.g10 .d1 { flex-grow: 7; }
.g10 .d3 { flex-grow: 1; }
.g11 .d2 { flex-grow: 1; }
.g11 .d3 { flex-grow: 3; }
.g11 .d4 { flex-grow: 2; }
.g12 .d2 { flex-grow: 5; }
.g12 .d3 { flex-grow: 1; }
.g12 .d4 { flex-grow: 4; }
.g12 .d5 { flex-grow: 5; }
.g13 .d2 { flex-grow: 1; }
.hl-1 { flex-grow: 41; --share: 11.8; }
.hl-2 { flex-grow: 113; --share: 32.6; }
.hl-3 { flex-grow: 80; --share: 23.1; }
.hl-4 { flex-grow: 73; --share: 21.0; }
.hl-5 { flex-grow: 40; --share: 11.5; }
.dl-e { flex-grow: 325; }
.dl-t { flex-grow: 22; }