/* ==========================================================================
   wynajmiesz.pl — arkusz stylów

   Kierunek: „rzut z wymiarowaniem”. Język współczesnej pracowni
   architektonicznej przeniesiony na pieniądze: chłodny gips zamiast ciepłego
   papieru, kreska włoskowata, łańcuchy wymiarowe, tabelka rysunkowa i jeden
   mocny akcent — cynober, którym na rysunkach oznacza się wymiar.

   Dyscyplina kreski jest tu całym efektem. Obowiązują wyłącznie grubości
   0,75 / 1 / 1,5 / 2 px i kąty 0°, 45°, 90°. Żadnych gradientów, poświat
   i cieni — głębia bierze się z kontrastu płaszczyzn, nie z rozmycia.
   Jedyny dopuszczony cień to włoskowata kreska pod przyklejoną belką.

   Kolejność: fonty → reset → tokeny → podstawa → typografia → belka → hero →
   spis → arkusz → komponenty → rysunki → stopka → drobiazgi →
   responsywność → druk.
   ========================================================================== */

/* --- Fonty (lokalne, latin + latin-ext) ----------------------------------- */
/* Pliki pobrane skryptem nie-wgrywac/narzedzia/fonts.js. Serwis nie pobiera
   żadnego zasobu z zewnątrz. Archivo i Instrument Sans mają oś szerokości
   (font-stretch) — na niej opiera się cała typografia nagłówków.           */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-normal-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700;
  font-stretch: 62% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-normal-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-stretch: 75% 100%; font-display: swap;
  src: url(/assets/fonts/instrument-sans-normal-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-stretch: 75% 100%; font-display: swap;
  src: url(/assets/fonts/instrument-sans-normal-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-normal-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-normal-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Jedyne miejsce, w którym kompensujemy przyklejoną belkę. Nie dokładamy
     scroll-margin-top na sekcjach — obie wartości by się zsumowały.        */
  scroll-padding-top: calc(var(--belka-h) + 28px);
  overflow-x: clip;
}
body { margin: 0; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
summary::-webkit-details-marker { display: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* --- Tokeny: motyw jasny -------------------------------------------------- */
:root {
  /* Płaszczyzny. Chłodny gips, świadomie NIE ciepły papier. */
  --tlo:            #E8EBEC;
  --tlo-karta:      #F6F8F8;
  --tlo-wglebienie: #DCE0E2;

  /* Kreska. Cztery grubości i nic pomiędzy. */
  --kreska:         #C3C9CC;
  --kreska-mocna:   #78838A;

  /* Tekst. */
  --tekst:          #14181B;
  --tekst-2:        #47525A;
  --tekst-3:        #58636A;

  /* Akcent: cynober wymiarowy. --akcent na wypełnienia i tekst ≥20px,
     --akcent-tekst wszędzie, gdzie akcent jest tekstem poniżej 20px.       */
  --akcent:         #C0331C;
  --akcent-tekst:   #A82D18;
  --akcent-tlo:     #F6E3DE;
  --na-akcencie:    #FFFFFF;

  /* Drugi, cichy kolor danych: błękit techniczny. Na rysunkach zawsze
     znaczy „to, co wpłacone / zaliczka”, nigdy nic innego.                 */
  --pomoc:          #1F5F86;
  --pomoc-tlo:      #DFEAF1;

  /* Panel odwrócony — grafit także w motywie jasnym. To on nadaje stronie
     rytm i nie pozwala jej spłaszczyć się w kartkę.                        */
  --p-tlo:          #171C20;
  --p-tlo-karta:    #1F262B;
  --p-kreska:       #2C343A;
  --p-kreska-mocna: #5F6B73;
  --p-tekst:        #F2F5F6;
  --p-tekst-2:      #A9B4BA;
  --p-akcent:       #FF6A4D;
  --p-akcent-tlo:   #2A1512;
  --p-pomoc:        #6FB7DE;

  --ramka: 1px solid var(--kreska);

  /* Wymiary. */
  /* Szerokości dobrane tak, żeby trójpodział arkusza domykał się co do piksela
     w kontenerze: 148 + 52 + 640 + 52 + 296 + 2×40 = 1268 = --maxw. Dzięki temu
     belka, hero, spis i arkusze mają dokładnie tę samą lewą krawędź, a po
     prawej nie zostaje martwe pole. */
  --belka-h: 58px;
  --maxw: 1268px;
  --szyna-w: 148px;
  --tresc-w: 640px;
  --noty-w: 296px;
  --rozstaw: 52px;
  --margines: 40px;
  --arkusz-y: clamp(72px, 9vw, 136px);

  /* Kroje. */
  --font:  'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-naglowek: 'Archivo', 'Instrument Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* Skala typograficzna — moduł 4 px, mnożnik ~1,26. */
  --t-mono: 12px;
  --t-xs:   13.5px;
  --t-s:    15px;
  --t-base: 17.5px;
  --t-lead: 20.5px;
}

/* --- Tokeny: motyw ciemny (systemowy) ------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="light"]) {
    --tlo:            #0E1215;
    --tlo-karta:      #161B20;
    --tlo-wglebienie: #090C0E;

    --kreska:         #242C32;
    --kreska-mocna:   #69757D;

    --tekst:          #E7ECEF;
    --tekst-2:        #A3AEB5;
    --tekst-3:        #8C99A1;

    --akcent:         #FF6A4D;
    --akcent-tekst:   #FF8A70;
    --akcent-tlo:     #2A1512;
    --na-akcencie:    #14181B;

    --pomoc:          #6FB7DE;
    --pomoc-tlo:      #102430;

    /* W ciemności panel nie może być ciemniejszy od tła — więc jest
       podniesiony, a rytm strony utrzymuje różnica jasności płaszczyzn.   */
    --p-tlo:          #1B2228;
    --p-tlo-karta:    #222A31;
    --p-kreska:       #2E383F;
    --p-kreska-mocna: #6B777F;
    --p-tekst:        #EDF1F3;
    --p-tekst-2:      #A9B4BA;
    --p-akcent:       #FF7D62;
    --p-akcent-tlo:   #341914;
    --p-pomoc:        #79BCE0;
  }
}

/* --- Tokeny: motyw ciemny (ręczny przełącznik) ---------------------------- */
:root[data-motyw="dark"] {
  --tlo:            #0E1215;
  --tlo-karta:      #161B20;
  --tlo-wglebienie: #090C0E;

  --kreska:         #242C32;
  --kreska-mocna:   #69757D;

  --tekst:          #E7ECEF;
  --tekst-2:        #A3AEB5;
  --tekst-3:        #8C99A1;

  --akcent:         #FF6A4D;
  --akcent-tekst:   #FF8A70;
  --akcent-tlo:     #2A1512;
  --na-akcencie:    #14181B;

  --pomoc:          #6FB7DE;
  --pomoc-tlo:      #102430;

  --p-tlo:          #1B2228;
  --p-tlo-karta:    #222A31;
  --p-kreska:       #2E383F;
  --p-kreska-mocna: #6B777F;
  --p-tekst:        #EDF1F3;
  --p-tekst-2:      #A9B4BA;
  --p-akcent:       #FF7D62;
  --p-akcent-tlo:   #341914;
  --p-pomoc:        #79BCE0;
}

/* --- Podstawa ------------------------------------------------------------- */
body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--tekst-2);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: proportional-nums;
}

::selection { background: var(--akcent); color: var(--na-akcencie); }

/* Podwójny pierścień: cynober plus obwódka w kolorze tła, żeby był widoczny
   także na ciemnym panelu i na wypełnieniu akcentem. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--akcent); color: var(--na-akcencie);
  padding: 10px 16px; font-size: var(--t-s); font-weight: 600;
  transition: top .15s ease;
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ik { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }

/* --- Typografia ----------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-naglowek);
  color: var(--tekst);
  text-wrap: balance;
}

h1 {
  font-size: clamp(40px, 4.4vw + 12px, 74px);
  line-height: 1.04;
  font-weight: 660;
  font-stretch: 122%;
  letter-spacing: -.030em;
}

h2 {
  font-size: clamp(30px, 2.4vw + 14px, 46px);
  line-height: 1.10;
  font-weight: 640;
  font-stretch: 118%;
  letter-spacing: -.022em;
}

h3 {
  font-size: clamp(21px, .6vw + 18px, 25px);
  line-height: 1.25;
  font-weight: 620;
  font-stretch: 100%;
  letter-spacing: -.010em;
}

p + p { margin-top: 1.15em; }

.prowadzenie {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--tekst);
  font-weight: 400;
}

/* Etykiety to jedyne miejsce z wersalikami — w polskim tekście z ogonkami
   wersaliki rozstrzeliwują się brzydko, więc nagłówki zostają normalne. */
.etykieta, .nadtytul {
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.3;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--tekst-3);
  font-weight: 500;
}

strong, b { font-weight: 600; color: var(--tekst); }

/* Przypis do źródła — mały, wyniesiony, zawsze w cynobrze. */
.przypis {
  font-family: var(--mono);
  font-size: .68em;
  font-weight: 600;
  color: var(--akcent-tekst);
  vertical-align: .38em;
  margin-left: .12em;
  padding: 0 .1em;
  border-bottom: 1px solid currentColor;
}
.przypis:hover { background: var(--akcent-tlo); }

/* --- Przyciski ------------------------------------------------------------ */
.guzik {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.guzik .ik { width: 16px; height: 16px; }
.guzik-akcent { background: var(--akcent); color: var(--na-akcencie); }
.guzik-akcent:hover { background: var(--akcent-tekst); }
.guzik-obrys { border-color: var(--kreska-mocna); color: var(--tekst); background: none; }
.guzik-obrys:hover { border-color: var(--akcent); color: var(--akcent-tekst); }
.guzik-maly { padding: 9px 14px; font-size: var(--t-mono); }

/* ==========================================================================
   Belka
   ========================================================================== */
.belka {
  position: sticky; top: 0; z-index: 50;
  background: var(--tlo);
  border-bottom: 1px solid var(--kreska);
}
@supports (backdrop-filter: blur(14px)) {
  .belka { background: color-mix(in srgb, var(--tlo) 90%, transparent); backdrop-filter: blur(14px); }
}

.belka-in {
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--margines);
  height: var(--belka-h);
  display: flex; align-items: center; gap: 24px;
}

.znak { display: flex; align-items: center; gap: 10px; flex: none; }
.znak-kwadrat { width: 28px; height: 28px; display: block; }
.znak-kwadrat svg { width: 100%; height: 100%; }
.zk-ramka  { fill: none; stroke: var(--kreska-mocna); stroke-width: 1.5; }
.zk-litera { fill: none; stroke: var(--tekst); stroke-width: 2.4; stroke-linejoin: miter; stroke-linecap: butt; }
.zk-wymiar { fill: none; stroke: var(--akcent); stroke-width: 1.2; }
.znak-nazwa {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .02em; color: var(--tekst);
}
.znak-tld { color: var(--akcent-tekst); }

.nawigacja { margin-left: auto; }
.nawigacja-lista { display: flex; align-items: center; gap: 2px; }
.nawigacja-lista a {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 10px;
  font-size: var(--t-xs); color: var(--tekst-2);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nl-nr { font-family: var(--mono); font-size: 10.5px; color: var(--tekst-3); letter-spacing: .04em; }
.nawigacja-lista a:hover { color: var(--tekst); }
.nawigacja-lista a.jest-tu { color: var(--tekst); border-bottom-color: var(--akcent); }
.nawigacja-lista a.jest-tu .nl-nr { color: var(--akcent-tekst); }

.belka-narzedzia { display: flex; align-items: center; gap: 12px; flex: none; }
/* Strona błędu nie ma nawigacji, więc narzędzia same odpychają się w prawo. */
.belka-narzedzia.na-prawo { margin-left: auto; }

/* Przełącznik motywu obsługuje skrypt — bez niego działa samo
   prefers-color-scheme, a trzy nieczynne guziki byłyby myleniem czytelnika. */
.motyw { display: none; border: 1px solid var(--kreska); }
.js .motyw { display: flex; }
.motyw-opcja {
  display: grid; place-items: center;
  width: 32px; height: 30px;
  background: none; border: 0; cursor: pointer;
  color: var(--tekst-3);
  transition: background .15s ease, color .15s ease;
}
.motyw-opcja + .motyw-opcja { border-left: 1px solid var(--kreska); }
.motyw-opcja .ik { width: 15px; height: 15px; }
.motyw-opcja:hover { color: var(--tekst); }
.motyw-opcja[aria-pressed="true"] { background: var(--tekst); color: var(--tlo); }

.menu-przycisk { display: none; }

.postep { height: 2px; background: none; }
.postep-pasek {
  display: block; height: 100%; width: 100%;
  background: var(--akcent);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ==========================================================================
   Pasy i hero
   ========================================================================== */
.pas { position: relative; }
.pas-karta { background: var(--tlo-karta); }
.pas-wglebienie { background: var(--tlo-wglebienie); }

/* Panel odwrócony podmienia tokeny lokalnie — dzięki temu każdy komponent
   w środku dostaje właściwe barwy bez ani jednej dodatkowej reguły.      */
.pas-ciemny {
  --tlo: var(--p-tlo);
  --tlo-karta: var(--p-tlo-karta);
  --tlo-wglebienie: var(--p-tlo);
  --kreska: var(--p-kreska);
  --kreska-mocna: var(--p-kreska-mocna);
  --tekst: var(--p-tekst);
  --tekst-2: var(--p-tekst-2);
  --tekst-3: var(--p-tekst-2);
  --akcent: var(--p-akcent);
  --akcent-tekst: var(--p-akcent);
  --akcent-tlo: var(--p-akcent-tlo);
  --na-akcencie: #14181B;
  --pomoc: var(--p-pomoc);
  --pomoc-tlo: var(--p-tlo-karta);
  background: var(--p-tlo);
  color: var(--p-tekst-2);
}

.hero { border-bottom: 1px solid var(--kreska); }
.hero-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(56px, 7vw, 100px) var(--margines) clamp(48px, 6vw, 88px);
  display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.hero h1 { margin: 18px 0 26px; }
.hero .prowadzenie { max-width: 34em; }
.hero p + p { margin-top: 1.15em; }
.hero-tekst > p:not(.nadtytul):not(.prowadzenie) { max-width: 36em; font-size: var(--t-s); }

.hero-akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px !important; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 40px; border-top: 1px solid var(--kreska);
}
.hero-meta li {
  flex: 1 1 130px; padding: 18px 20px 0 0;
  border-right: 1px solid var(--kreska);
  margin-right: 20px;
}
.hero-meta li:last-child { border-right: 0; margin-right: 0; }
.hm-liczba {
  display: block; font-family: var(--mono); font-size: 30px; font-weight: 500;
  color: var(--tekst); line-height: 1; font-variant-numeric: tabular-nums;
}
.hm-opis { display: block; margin-top: 8px; font-size: var(--t-xs); color: var(--tekst-2); }

.hero-rys > svg { width: 100%; height: auto; }
.hero-rys-etykieta { margin-bottom: 6px; }

/* Legenda rysunku otwierającego. Jest zwykłym tekstem, nie częścią SVG —
   w rysunku skalowałaby się razem z nim i na telefonie spadała do 8 px. */
.legenda { margin-top: 18px; border-top: 1px solid var(--kreska); }
.lg {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
  column-gap: 14px; align-items: start;
  padding: 13px 0 14px; border-bottom: 1px solid var(--kreska);
}
.lg-probka { width: 14px; height: 14px; margin-top: 3px; }
.lg-tekst { min-width: 0; }
.lg-nazwa { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.45; color: var(--tekst); }
.lg-opis { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; color: var(--tekst-2); }
.lg-kwota {
  font-family: var(--mono); font-size: 14px; font-weight: 600; line-height: 1.45;
  color: var(--tekst); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lg-kwota-pomoc { color: var(--pomoc); }
/* Kaucja stoi poza sumą — oddziela ją kreska przerywana zamiast ciągłej. */
.lg-poza { border-bottom: 0; border-top: 1px dashed var(--kreska-mocna); }
/* Wiersz nad kaucją traci własną kreskę — inaczej ciągła prześwitywałaby
   przez przerywaną i obie wyglądałyby na jedną ciągłą. */
.lg:nth-last-child(2) { border-bottom: 0; }
.hero-rys-podpis { margin-top: 12px; font-size: var(--t-xs); color: var(--tekst-2); }

/* ==========================================================================
   Spis arkuszy
   ========================================================================== */
.spis { border-bottom: 1px solid var(--kreska); }
.spis-in { max-width: var(--maxw); margin-inline: auto; padding: clamp(56px, 6vw, 88px) var(--margines); }
.spis-glowa { max-width: 34ch; margin-bottom: clamp(32px, 4vw, 48px); }
.spis-glowa h2 { margin-top: 14px; }

.spis-siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--kreska); border: 1px solid var(--kreska); }
.kafel { background: var(--tlo); }
.kafel a {
  display: block; height: 100%; padding: 22px 20px 24px;
  background: var(--tlo);
  transition: background .15s ease;
}
.kafel a:hover { background: var(--tlo-karta); }
.kafel-nr {
  display: block; font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; color: var(--tekst-3);
}
.kafel-rys { display: block; margin: 16px 0 18px; height: 48px; }
.kafel-rys svg { width: 64px; height: 48px; }
.kafel-tytul { display: block; font-size: var(--t-s); color: var(--tekst); line-height: 1.45; }
.kafel a:hover .kafel-tytul { color: var(--akcent-tekst); }

/* ==========================================================================
   Arkusz: szyna, tabelka rysunkowa, kolumna treści, kolumna not
   ========================================================================== */
.arkusz { border-bottom: 1px solid var(--kreska); }
.arkusz-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--arkusz-y) var(--margines);
  display: flex; gap: var(--rozstaw); align-items: stretch;
}

.szyna { flex: 0 0 var(--szyna-w); }
.szyna-in { position: sticky; top: calc(var(--belka-h) + 32px); }

/* Tabelka rysunkowa — znak rozpoznawczy serwisu. Wraca przy każdym arkuszu,
   w rogu każdego rysunku i raz w dużej wersji na dole strony. */
.tabelka {
  position: relative;
  border: 1.5px solid var(--kreska-mocna);
  width: 100%;
}
.tabelka::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 8px; height: 8px; background: var(--akcent);
}
.tb-nr {
  font-family: var(--mono); font-size: 26px; font-weight: 500; line-height: 1;
  color: var(--tekst); padding: 12px 10px 10px; font-variant-numeric: tabular-nums;
}
.tb-z { color: var(--tekst-3); font-size: 14px; }
.tb-nazwa {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst-2);
  padding: 7px 10px; border-top: 1px solid var(--kreska-mocna);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-meta {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tekst-3);
  padding: 6px 10px 7px 16px; border-top: 1px solid var(--kreska-mocna);
}

.tabelka-duza { max-width: 344px; }
.tabelka-duza .tb-nr { font-size: 40px; padding: 18px 16px 14px; }
.tabelka-duza .tb-z { font-size: 18px; }
.tabelka-duza .tb-nazwa { font-size: 12px; padding: 11px 16px; white-space: normal; }
.tabelka-duza .tb-meta { font-size: 10px; padding: 9px 16px 10px 22px; }

/* Podziałka położenia w szynie — dla czytelnika, który wszedł z wyszukiwarki
   w środek strony i nie widział ani hero, ani spisu arkuszy. */
.podzialka { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.podzialka li { height: 3px; background: var(--kreska); }
.podzialka li.jest-tu { background: var(--akcent); }
.szyna-gdzie {
  margin-top: 12px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3);
}

/* Przejście do sąsiednich arkuszy na końcu treści. */
.sasiedzi {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 3em; padding-top: 20px; border-top: 1px solid var(--kreska);
}
.sasiad { display: block; max-width: 48%; }
.sasiad-dalej { margin-left: auto; text-align: right; }
.sas-kierunek {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3);
}
.sas-nazwa {
  display: block; margin-top: 6px; font-family: var(--font-naglowek);
  font-weight: 620; font-stretch: 100%; font-size: var(--t-s); color: var(--tekst);
}
.sas-nr { font-family: var(--mono); font-weight: 500; color: var(--akcent-tekst); }
.sasiad:hover .sas-nazwa { color: var(--akcent-tekst); }

.kolumny {
  flex: 1 1 auto; min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--tresc-w)) var(--noty-w);
  column-gap: var(--rozstaw);
  align-content: start;
}
.kolumny > * { grid-column: 1; }
.kolumny > .szeroko { grid-column: 1 / -1; }

.glowa { margin-bottom: 36px; }
.glowa h2 { margin: 14px 0 0; }
.glowa .prowadzenie { margin-top: 22px; }

.kolumny > p,
.kolumny > ul,
.kolumny > ol,
.kolumny > dl,
.kolumny > .z-nota,
.kolumny > figure,
.kolumny > div { margin-top: 1.15em; }
.kolumny > h3 { margin-top: 2.4em; margin-bottom: .7em; }
.kolumny > .glowa { margin-top: 0; }
.kolumny > .glowa + h3 { margin-top: .5em; }
/* Nagłówek ma trzymać się treści, którą otwiera — odstęp pod nim musi być
   wyraźnie mniejszy niż nad nim, inaczej H3 „wisi” między akapitami. */
.kolumny > h3 + * { margin-top: .45em; }

/* Akapit z notą na marginesie. Ta sama siatka co kolumna nadrzędna, więc
   nota stoi dokładnie obok swojego akapitu, a nie „gdzieś obok”. */
.z-nota {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, var(--tresc-w)) var(--noty-w);
  column-gap: var(--rozstaw);
  align-items: start;
}
.nota {
  font-size: var(--t-xs); line-height: 1.6; color: var(--tekst-2);
  border-top: 1.5px solid var(--kreska-mocna);
  padding-top: 10px;
}
.nota a { color: var(--tekst); border-bottom: 1px solid var(--kreska-mocna); }
.nota a:hover { color: var(--akcent-tekst); border-color: var(--akcent); }
.nota-etykieta {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--akcent-tekst); margin-bottom: 6px;
}

/* ==========================================================================
   Komponenty treści
   ========================================================================== */

/* Listy: zamiast kropek — kreska wymiarowa. */
.lista-kreska li, .lista-num li {
  position: relative; padding-left: 28px; margin-top: .6em;
}
.lista-kreska li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 14px; height: 1.5px; background: var(--kreska-mocna);
}
.lista-num { counter-reset: poz; }
.lista-num li { padding-left: 36px; counter-increment: poz; }
.lista-num li::before {
  content: counter(poz, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--mono); font-size: var(--t-mono); color: var(--akcent-tekst);
  letter-spacing: .06em;
}

/* Dziesięć pól ewidencji — nazwy przeniesione co do znaku z treści. */
.pola-ewidencji {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--kreska); border: 1px solid var(--kreska);
}
.pe { background: var(--tlo); padding: 12px 14px 15px; }
.pas-karta .pe { background: var(--tlo-karta); }
.pe-nr { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--tekst-3); }
.pe-nazwa { display: block; margin-top: 7px; font-size: var(--t-xs); color: var(--tekst); line-height: 1.35; }
.pe-akcent .pe-nr { color: var(--akcent-tekst); }
.pe-akcent { box-shadow: inset 3px 0 0 var(--akcent); }
/* Na stronie 404 te same pola są odnośnikami do arkuszy. */
.pe > a { display: block; margin: -12px -14px -15px; padding: 12px 14px 15px; }
.pe > a:hover .pe-nazwa { color: var(--akcent-tekst); }
.pe > a:hover .pe-nr { color: var(--akcent-tekst); }

.wprowadzenie-listy { color: var(--tekst); font-weight: 600; }

.kopiuj-pasek { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px !important; }
.kopiuj-komunikat { font-size: var(--t-xs); color: var(--tekst-2); }

/* Definicje rodzajów opłat. */
.definicje { display: grid; gap: 1px; background: var(--kreska); border: 1px solid var(--kreska); }
.df { background: var(--tlo); padding: 18px 20px 20px 24px; position: relative; }
.pas-karta .df { background: var(--tlo-karta); }
.df::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kreska-mocna); }
.df-czynsz::before { background: var(--tekst); }
.df-admin::before  { background: var(--kreska-mocna); }
.df-media::before  { background: var(--pomoc); }
.df-kaucja::before { background: var(--akcent); }
.df dt { font-family: var(--font-naglowek); font-weight: 620; font-stretch: 100%; color: var(--tekst); font-size: var(--t-s); }
.df dd { margin-top: 5px; font-size: var(--t-s); }

/* Zastrzeżenie — ilustracyjność kwot, zakres zasad. */
.zastrzezenie {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--t-s); line-height: 1.55;
  background: var(--akcent-tlo);
  border-left: 2px solid var(--akcent);
  padding: 14px 18px;
  color: var(--tekst);
}
.zastrzezenie .ik { width: 18px; height: 18px; color: var(--akcent-tekst); margin-top: 2px; }

/* Wyliczenie z przykładu. */
.wyliczenie {
  border: 1px solid var(--kreska); border-left: 2px solid var(--kreska-mocna);
  background: var(--tlo-wglebienie);
  padding: 18px 22px;
}
.wyliczenie p { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; font-size: var(--t-s); }
.wyliczenie p + p { margin-top: .5em; padding-top: .5em; border-top: 1px solid var(--kreska); }
.wy-opis { color: var(--tekst-2); }
.wy-kwota { font-family: var(--mono); color: var(--tekst); font-variant-numeric: tabular-nums; }
.wy-wynik .wy-opis { color: var(--tekst); font-weight: 600; }
.wy-wynik .wy-kwota { color: var(--akcent-tekst); font-weight: 600; }

/* Porównanie zapisu protokołu. */
.zestaw-porownanie {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch;
}
.zp-karta { border: 1px solid var(--kreska); padding: 18px 20px; background: var(--tlo-karta); }
.pas-karta .zp-karta { background: var(--tlo); }
.zp-zle { border-left: 2px solid var(--kreska-mocna); }
.zp-dobre { border-left: 2px solid var(--akcent); }
.zp-etykieta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); }
.zp-tresc { margin-top: 10px; font-size: var(--t-s); color: var(--tekst); font-weight: 600; }
.zp-zle .zp-tresc { color: var(--tekst-2); text-decoration: line-through; text-decoration-color: var(--kreska-mocna); }
.zp-uwaga { margin-top: 10px; font-size: var(--t-xs); color: var(--tekst-2); }
.zp-strzalka { display: grid; place-items: center; color: var(--kreska-mocna); }
.zp-strzalka .ik { width: 22px; height: 22px; }

/* Porównanie trzech dróg pracy. */
.porownanie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--kreska); border: 1px solid var(--kreska); }
.po-kol { background: var(--tlo-karta); padding: 20px; }
.pas-karta .po-kol { background: var(--tlo); }
.po-glowa {
  font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tekst); padding-bottom: 12px;
  border-bottom: 1.5px solid var(--kreska-mocna);
}
.po-kiedy { margin-top: 14px; font-size: var(--t-xs); color: var(--tekst-2); }

/* Pasy rozdziału 06. */
.pasy { display: grid; gap: 1px; background: var(--kreska); border-top: 1px solid var(--kreska); border-bottom: 1px solid var(--kreska); }
.pas-poz {
  background: var(--tlo);
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 260px;
  gap: 24px; align-items: start; padding: 30px 0;
}
.pas-karta .pas-poz { background: var(--tlo-karta); }
.pas-poz-odwr { direction: rtl; }
.pas-poz-odwr > * { direction: ltr; }
.pp-nr { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--akcent-tekst); padding-top: 6px; }
.pp-tresc h3 { margin-bottom: .6em; }
.pp-tresc p + p { margin-top: 1em; }
.pp-tresc p { font-size: var(--t-s); }
.pp-rys svg { width: 100%; height: auto; }

/* Zakończenie — trzeci panel odwrócony, domyka klamrę z hero. */
.zakonczenie { border-bottom: 1px solid var(--kreska); }
.zak-in { max-width: var(--maxw); margin-inline: auto; padding: clamp(56px, 7vw, 100px) var(--margines); }
.zak-glowa { max-width: 30ch; }
.zak-glowa h2 { margin-top: 14px; }
.zak-domkniecie { margin-top: 36px; max-width: 72ch; font-size: var(--t-lead); line-height: 1.6; color: var(--tekst); }

/* Kroki na zakończenie. */
.kroki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--kreska); border: 1px solid var(--kreska); margin-top: 40px; }
.kroki li { background: var(--tlo); padding: 22px 20px 26px; }
.kr-nr { display: block; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; color: var(--akcent); }
.kr-tekst { display: block; margin-top: 14px; font-size: var(--t-s); color: var(--tekst); line-height: 1.5; }

/* Lista kontrolna. */
.kontrolna li + li { margin-top: 2px; }
.kontrolna label {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 10px 9px 0; cursor: pointer;
  font-size: var(--t-s); line-height: 1.5;
  transition: color .15s ease;
}
.kontrolna label:hover { color: var(--tekst); }
.kontrolna input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin: 2px 0 0;
  border: 1.5px solid var(--kreska-mocna); background: none;
  cursor: pointer; position: relative;
}
.kontrolna input[type="checkbox"]::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--akcent);
  clip-path: polygon(0 55%, 35% 100%, 100% 12%, 100% 40%, 35% 100%, 0 78%);
  opacity: 0; transform: scale(.7); transition: opacity .12s ease, transform .12s ease;
}
.kontrolna input[type="checkbox"]:checked { border-color: var(--akcent); }
.kontrolna input[type="checkbox"]:checked::after { opacity: 1; transform: scale(1); }
.kontrolna input[type="checkbox"]:checked ~ span { color: var(--tekst-3); text-decoration: line-through; text-decoration-color: var(--kreska); }
.kontrolna-lekka { border-top: 1px solid var(--kreska); border-bottom: 1px solid var(--kreska); padding: 6px 0; }

.kontrolne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--kreska); border: 1px solid var(--kreska); }
.kt-blok { background: var(--tlo); padding: 22px 20px 24px; }
.pas-karta .kt-blok { background: var(--tlo-karta); }
.kt-glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kt-glowa h3 { font-size: 18px; letter-spacing: -.005em; }
.kt-licznik { font-family: var(--mono); font-size: var(--t-mono); color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.kt-postep { height: 3px; background: var(--kreska); margin: 14px 0 12px; }
.kt-postep span { display: block; height: 100%; width: 0; background: var(--akcent); transition: width .2s ease; }
.kt-akcje { margin-top: 24px; }
/* Nagłówek na adres lokalu i datę — tylko na wydruku (reguła w @media print
   na końcu arkusza). Ta deklaracja musi stać PRZED blokiem druku, inaczej
   przy równej swoistości wygra i lista wydrukuje się bez nagłówka. */
.druk-naglowek { display: none; }

/* Pytania i odpowiedzi. */
.faq { border-top: 1px solid var(--kreska); }
.faq details { border-bottom: 1px solid var(--kreska); }
.faq summary { display: flex; gap: 16px; align-items: baseline; cursor: pointer; padding: 22px 0; list-style: none; }
.faq summary h3 { font-size: clamp(18px, .5vw + 16px, 22px); flex: 1 1 auto; }
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px;
  border-right: 1.5px solid var(--kreska-mocna); border-bottom: 1.5px solid var(--kreska-mocna);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover h3 { color: var(--akcent-tekst); }
.faq-tresc { padding: 0 0 26px; max-width: 68ch; }
.faq-tresc p { font-size: var(--t-s); }

/* Źródła. */
.zr-data { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin-top: 1.8em; }
.zrodla-lista { margin-top: 20px; border-top: 1px solid var(--kreska); }
.zrodla-lista li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--kreska); }
.zr-nr { font-family: var(--mono); font-size: var(--t-s); font-weight: 600; color: var(--akcent-tekst); }
.zr-tresc { min-width: 0; }
.zr-tytul { font-family: var(--font-naglowek); font-weight: 620; font-stretch: 100%; color: var(--tekst); font-size: var(--t-s); line-height: 1.4; }
.zr-opis { margin-top: 8px; font-size: var(--t-xs); }
.zr-gdzie { margin-top: 10px; font-size: var(--t-xs); color: var(--tekst-3); }
.zr-gdzie a { border-bottom: 1px solid var(--kreska-mocna); }
.zr-gdzie a:hover { color: var(--akcent-tekst); border-color: var(--akcent); }

/* Kalkulatory. Liczą wyłącznie to, co podaje czytelnik, i wyłącznie na
   zasadach opisanych w treści — nie dokładają żadnych stawek z zewnątrz. */
.kalk {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 210px;
  border: 1px solid var(--kreska);
  background: var(--tlo-karta);
}
.pas-karta .kalk { background: var(--tlo); }
.kalk-pola { padding: 20px 22px 24px; border-right: 1px solid var(--kreska); }
.kalk-rysunek { padding: 16px 12px; align-self: center; }
.kalk-wynik { padding: 20px 22px; border-left: 1px solid var(--kreska); }
.kalk > .rys-podpis { grid-column: 1 / -1; border-top: 1px solid var(--kreska); margin: 0; padding: 14px 22px; }

.pole { margin-top: 16px; }
.pole label { display: block; font-size: var(--t-xs); color: var(--tekst-2); margin-bottom: 6px; }
.pole-wejscie {
  display: flex; align-items: stretch;
  border: 1px solid var(--kreska-mocna); background: var(--tlo);
}
.pas-karta .pole-wejscie { background: var(--tlo-karta); }
.pole-wejscie:focus-within { outline: 2px solid var(--akcent); outline-offset: 1px; }
.pole-wejscie input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: none; padding: 9px 10px;
  font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums;
  color: var(--tekst);
}
.pole-wejscie input:focus-visible { outline: none; }
.pole-jedn {
  display: flex; align-items: center; padding: 0 10px;
  font-family: var(--mono); font-size: 11px; color: var(--tekst-3);
  border-left: 1px solid var(--kreska);
}
.kalk-suma {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--kreska);
  font-size: var(--t-xs); color: var(--tekst-2);
}
.kalk-suma span { font-family: var(--mono); color: var(--tekst); }

.kw-slowo {
  margin-top: 16px; font-family: var(--font-naglowek); font-stretch: 112%;
  font-weight: 640; font-size: 22px; color: var(--akcent-tekst); line-height: 1.1;
}
.kw-kwota {
  margin-top: 6px; font-family: var(--mono); font-size: 30px; font-weight: 600;
  color: var(--tekst); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kw-opis { margin-top: 14px; font-size: var(--t-xs); color: var(--tekst-2); }
.kalk[data-stan="nadplata"] .kw-slowo { color: var(--pomoc); }
.kalk[data-stan="rowno"] .kw-slowo { color: var(--tekst-2); }

/* Kalkulator ryczałtu: suwak i dwa pasma progu. */
.ryczalt { border: 1px solid var(--kreska); background: var(--tlo-karta); }
.ryczalt > .rys-podpis { border-top: 1px solid var(--kreska); margin: 0; padding: 14px 22px; max-width: none; }
.ryczalt-rysunek { padding: 20px 22px 8px; }
.ryczalt-sterowanie { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: end; padding: 20px 22px; border-bottom: 1px solid var(--kreska); }
.ryczalt-suwak-pole .przelacznik { margin-top: 14px; align-items: flex-start; }
.ryczalt-suwak-pole .przelacznik span { line-height: 1.5; color: var(--tekst-2); }
.ryczalt-suwak { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; cursor: pointer; }
.ryczalt-suwak::-webkit-slider-runnable-track { height: 3px; background: var(--kreska-mocna); }
.ryczalt-suwak::-moz-range-track { height: 3px; background: var(--kreska-mocna); }
.ryczalt-suwak::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 18px; background: var(--akcent); margin-top: -8px; border: 0; }
.ryczalt-suwak::-moz-range-thumb { width: 14px; height: 18px; background: var(--akcent); border: 0; border-radius: 0; }
.przelacznik { display: flex; align-items: center; gap: 10px; font-size: var(--t-xs); cursor: pointer; }
.przelacznik input { width: 18px; height: 18px; accent-color: var(--akcent); flex: none; }
.ryczalt-wyniki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--kreska); border-top: 1px solid var(--kreska); }
.rw { background: var(--tlo-karta); padding: 18px 20px 20px; }
.pas-ciemny .rw { background: var(--tlo-karta); }
.rw-etykieta { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-3); }
.rw-podstawa { margin-top: 10px; font-size: var(--t-xs); color: var(--tekst-2); }
.rw-podstawa span { font-family: var(--mono); color: var(--tekst); }
.rw-kwota { margin-top: 8px; font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--tekst); font-variant-numeric: tabular-nums; }
.rw-razem .rw-kwota { color: var(--akcent-tekst); }

/* Rysunki. */
.rys { margin-top: 2.4em; }
.rys svg { width: 100%; height: auto; }
.rys-podpis {
  margin-top: 14px; font-size: var(--t-xs); line-height: 1.55; color: var(--tekst-2);
  max-width: 76ch;
}
.rp-nr { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--akcent-tekst); margin-right: 8px; }

/* Obszar przewijany w poziomie — rysunek nigdy nie rozpycha strony.
   Minimalne szerokości są dobrane osobno dla każdego rysunku: rysunek
   zmniejszony poniżej nich ma napisy mniejsze niż 6 px i staje się ozdobnikiem.
   Lepiej, żeby czytelnik przewinął go w bok i mógł go przeczytać. */
.rys-przewij { overflow-x: auto; overscroll-behavior-x: contain; }
.rys-przewij > svg { min-width: 560px; }
#rys-ewidencja .rys-przewij > svg { min-width: 920px; }
#rys-zmiana .rys-przewij > svg { min-width: 860px; }
#rys-kaucja .rys-przewij > svg { min-width: 800px; }
#rys-rzut .rys-przewij > svg { min-width: 640px; }
.rys-wskazowka { margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }

/* ==========================================================================
   Kolory wewnątrz rysunków — jedno znaczenie na całej stronie
   ========================================================================== */
.r-wglebienie    { fill: var(--tlo-wglebienie); }
.r-siatka        { fill: none; stroke: var(--kreska); stroke-width: .75; }
.r-kreska        { fill: none; stroke: var(--kreska-mocna); stroke-width: 1; }
.r-akcent        { fill: none; stroke: var(--akcent); stroke-width: 1.5; }
.r-akcent-wyp    { fill: var(--akcent); }
.r-pomoc         { fill: none; stroke: var(--pomoc); stroke-width: 1.5; }
.r-pomoc-wyp     { fill: var(--pomoc); }
.r-tekst-wyp     { fill: var(--tekst); }
.r-kreska-wyp    { fill: var(--kreska-mocna); }
.r-etykieta      { fill: var(--tekst-3); font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
/* Podpis zdaniowy w rysunku. Wersaliki są zastrzeżone dla krótkich etykiet —
   całe zdanie złożone wersalikami z polskimi ogonkami czyta się fatalnie. */
.r-opis          { fill: var(--tekst-2); font-family: var(--mono); font-size: 9.5px; }
.r-napis         { fill: var(--tekst-2); font-family: var(--mono); font-size: 11px; }
.r-liczba        { fill: var(--tekst); font-family: var(--mono); font-size: 12px; font-weight: 500; }
/* Napisy na płaszczyźnie wypełnionej kolorem tekstu — odwracamy je na tło. */
.r-napis-odwr    { fill: var(--tlo); font-family: var(--mono); font-size: 11px; }
.r-liczba-odwr   { fill: var(--tlo); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.r-liczba-akcent { fill: var(--akcent-tekst); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.r-liczba-pomoc  { fill: var(--pomoc); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.r-przerywana    { stroke-dasharray: 4 3; }
.r-sciana        { fill: none; stroke: var(--tekst); stroke-width: 3.5; stroke-linecap: butt; }
.r-drzwi         { fill: none; stroke: var(--kreska-mocna); stroke-width: 1; }
.r-mala          { font-size: 8.5px; }

/* Przełączniki warstw rysunku — jak warstwy w programie do rysowania. */
.warstwy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.warstwa-guzik {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 12px; background: none; cursor: pointer;
  border: 1px solid var(--kreska); color: var(--tekst-3);
}
.warstwa-guzik::before {
  content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; background: none;
}
.warstwa-guzik[aria-pressed="true"] { color: var(--tekst); border-color: var(--kreska-mocna); }
.warstwa-guzik[aria-pressed="true"]::before { background: var(--akcent); border-color: var(--akcent); }
.warstwa-guzik:hover { color: var(--tekst); }

/* ==========================================================================
   Stopka
   ========================================================================== */
.stopka {
  --tlo: var(--p-tlo);
  --tlo-karta: var(--p-tlo-karta);
  --kreska: var(--p-kreska);
  --kreska-mocna: var(--p-kreska-mocna);
  --tekst: var(--p-tekst);
  --tekst-2: var(--p-tekst-2);
  --tekst-3: var(--p-tekst-2);
  --akcent: var(--p-akcent);
  --akcent-tekst: var(--p-akcent);
  background: var(--p-tlo); color: var(--p-tekst-2);
}
.stopka-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(48px, 6vw, 80px) var(--margines) 40px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
.st-znak .znak-kwadrat { width: 34px; height: 34px; }
.st-nazwa { margin-top: 16px; font-family: var(--mono); font-size: var(--t-s); font-weight: 600; color: var(--tekst); }
.st-opis { margin-top: 10px; font-size: var(--t-xs); max-width: 30em; }
.st-kontakt address { margin-top: 14px; font-size: var(--t-xs); line-height: 1.8; }
.st-firma { display: block; font-family: var(--font-naglowek); font-weight: 620; font-stretch: 100%; font-size: var(--t-s); color: var(--tekst); margin-bottom: 4px; }
.st-kontakt a { border-bottom: 1px solid var(--kreska-mocna); }
.st-kontakt a:hover { color: var(--akcent); border-color: var(--akcent); }
.st-spis ul { margin-top: 14px; columns: 2; column-gap: 20px; }
.st-spis li { break-inside: avoid; }
.st-spis a { display: block; padding: 4px 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }
.st-spis a:hover { color: var(--akcent); }

.stopka-dol {
  max-width: var(--maxw); margin-inline: auto;
  padding: 32px var(--margines) 44px;
  border-top: 1px solid var(--kreska);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px; align-items: end;
}
.st-nota { font-size: var(--t-xs); color: var(--tekst-2); max-width: 46em; }
.st-prawa { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--tekst-2); white-space: nowrap; }

/* Strona błędu: jedna sekcja, więc trzymamy stopkę przy dole ekranu. */
.blad { min-height: 58vh; }

/* ==========================================================================
   Drobiazgi
   ========================================================================== */
.do-gory {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--tlo-karta); color: var(--tekst);
  border: 1.5px solid var(--kreska-mocna); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.do-gory.jest-widoczny { opacity: 1; visibility: visible; transform: none; }
.do-gory:hover { border-color: var(--akcent); color: var(--akcent-tekst); }
.do-gory .ik { width: 18px; height: 18px; }

/* Pojawianie się elementów. Ukrywamy WYŁĄCZNIE gdy działa JavaScript —
   bez skryptu cała treść musi być widoczna. */
.js .odslon { opacity: 0; transform: translateY(10px); }
.js .odslon.jest-w { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .odslon { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsywność
   ========================================================================== */

/* Kolumna not wchodzi pod akapit jako blok z kreską. */
@media (max-width: 1180px) {
  :root { --szyna-w: 84px; --noty-w: 232px; --rozstaw: 36px; --margines: 28px; }
  .pola-ewidencji { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tb-nr { font-size: 20px; padding: 9px 8px 8px; }
  .tb-nazwa { font-size: 9px; padding: 6px 8px; }
  .tb-meta { display: none; }
}

@media (max-width: 1080px) {
  .nawigacja-lista a { padding: 8px 7px; font-size: 12.5px; }
  .nl-nr { display: none; }
}

@media (max-width: 980px) {
  :root { --noty-w: 0px; }
  .kolumny { grid-template-columns: minmax(0, 1fr); }
  .kolumny > .szeroko { grid-column: 1; }
  .z-nota { grid-template-columns: minmax(0, 1fr); grid-column: 1; }
  .nota {
    margin-top: 18px; border-top: 0; border-left: 2px solid var(--akcent);
    padding: 2px 0 2px 16px;
  }
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-rys { order: -1; max-width: 560px; }
  .spis-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kontrolne { grid-template-columns: minmax(0, 1fr); }
  .pas-poz { grid-template-columns: 40px minmax(0, 1fr); }
  .pp-rys { grid-column: 1 / -1; max-width: 420px; }
  .pas-poz-odwr { direction: ltr; }
  .stopka-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-znak { grid-column: 1 / -1; }

  /* Kalkulator: trzy kolumny obok siebie mają twarde szerokości (250 + 210),
     więc poniżej tej szerokości muszą się rozłożyć w pion, razem z kreskami. */
  .kalk { grid-template-columns: minmax(0, 1fr); }
  .kalk-pola { border-right: 0; border-bottom: 1px solid var(--kreska); }
  .kalk-wynik { border-left: 0; border-top: 1px solid var(--kreska); }
  .kalk-rysunek { padding: 20px 22px; }
}

/* Menu zwijane. Punkt musi być zgodny z PUNKT_MENU w app.js. */
@media (max-width: 960px) {
  /* Bez JavaScriptu przełącznik menu nie miałby czego rozwinąć, więc się
     nie pokazuje. Nawigację przejmuje wtedy spis arkuszy tuż pod hero
     i lista arkuszy w stopce — obie są zwykłymi odnośnikami. */
  .menu-przycisk { display: none; }
  .js .menu-przycisk {
    display: flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--kreska); cursor: pointer;
    padding: 7px 12px; color: var(--tekst);
    font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  }
  .menu-przycisk .ik { width: 15px; height: 15px; }
  .menu-napis { letter-spacing: .1em; }
  .menu-przycisk .ik-zamknij { display: none; }
  .menu-przycisk[aria-expanded="true"] .ik-menu { display: none; }
  .menu-przycisk[aria-expanded="true"] .ik-zamknij { display: block; }

  .nawigacja {
    position: fixed; inset: var(--belka-h) 0 auto;
    background: var(--tlo); border-bottom: 1px solid var(--kreska);
    max-height: calc(100dvh - var(--belka-h)); overflow-y: auto;
    display: none; margin-left: 0;
  }
  .nawigacja.jest-otwarte { display: block; }
  .nawigacja-lista { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--margines) 20px; }
  .nawigacja-lista a { padding: 13px 0; border-bottom: 1px solid var(--kreska); font-size: var(--t-s); }
  .nl-nr { display: inline; }
  .nawigacja-lista a.jest-tu { border-bottom-color: var(--akcent); }
  body.menu-otwarte { overflow: hidden; }
}

@media (max-width: 860px) {
  :root { --szyna-w: 0px; --rozstaw: 0px; }
  .arkusz-in { display: block; }
  .szyna { margin-bottom: 26px; }
  .szyna-in { position: static; }
  .tabelka { display: flex; align-items: stretch; width: max-content; max-width: 100%; }
  .tabelka .tb-nr { border-right: 1px solid var(--kreska-mocna); display: flex; align-items: center; }
  .tabelka .tb-nazwa { border-top: 0; display: flex; align-items: center; }
  .tabelka .tb-meta { display: none; }
  .zestaw-porownanie { grid-template-columns: minmax(0, 1fr); }
  .zp-strzalka { transform: rotate(90deg); padding: 4px 0; }
  .porownanie { grid-template-columns: minmax(0, 1fr); }
  .kroki { grid-template-columns: minmax(0, 1fr); }
  .stopka-dol { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ryczalt-sterowanie { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .ryczalt-wyniki { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root { --margines: 16px; --arkusz-y: clamp(52px, 11vw, 80px); --t-base: 17px; }
  .hero-in { padding-block: 44px 40px; }
  .spis-siatka { grid-template-columns: minmax(0, 1fr); }
  .kroki { grid-template-columns: minmax(0, 1fr); }
  .stopka-in { grid-template-columns: minmax(0, 1fr); }
  .st-spis ul { columns: 2; }
  .hero-meta li { flex-basis: 100%; border-right: 0; margin-right: 0; padding-right: 0; }
  .hero-meta li + li { border-top: 1px solid var(--kreska); }
  .do-gory { right: 14px; bottom: 14px; }
  .pola-ewidencji { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kalk-pola, .kalk-wynik, .kalk-rysunek, .ryczalt-sterowanie, .rw { padding-inline: 16px; }
  .kalk > .rys-podpis, .ryczalt > .rys-podpis { padding-inline: 16px; }
  .sasiedzi { flex-direction: column; gap: 22px; }
  .sasiad { max-width: none; }
  .sasiad-dalej { margin-left: 0; text-align: left; }

  /* Rysunki, które NIE przewijają się w poziomie, kurczą się razem z ekranem
     (na 390 px mniej więcej do 0,6–0,78 skali), więc ich napisy trzeba
     powiększyć w jednostkach rysunku. Zmierzone w przeglądarce: bez tego
     najmniejsze napisy miały 6–8 px. Rozstaw elementów jest pod te rozmiary
     przygotowany — słupki kalkulatora rozsunięte, podziałka ryczałtu
     wyrównana do krawędzi. */
  .hero-rys .hr-suma { font-size: 19px; }
  .kalk-rysunek .r-etykieta.r-mala { font-size: 12px; letter-spacing: 0; }
  .kalk-rysunek .r-liczba,
  .kalk-rysunek .r-liczba-pomoc,
  .kalk-rysunek .r-liczba-akcent { font-size: 15px; }
  .ryczalt-rysunek .r-etykieta.r-mala,
  .ryczalt-rysunek .r-liczba-akcent.r-mala { font-size: 16px; letter-spacing: 0; }
  /* Opisy stawek nad paskiem — te same informacje stoją w kartach wyników
     tuż pod rysunkiem, a powiększone zderzyłyby się z opisem progu. */
  .ryczalt-rysunek .r-szeroki { display: none; }
}

/* ==========================================================================
   Druk — lista kontrolna ma się dać wydrukować i wypełnić długopisem
   ========================================================================== */
@media print {
  :root {
    --tlo: #fff; --tlo-karta: #fff; --tlo-wglebienie: #fff;
    --tekst: #000; --tekst-2: #222; --tekst-3: #444;
    --kreska: #bbb; --kreska-mocna: #444;
    --akcent: #000; --akcent-tekst: #000; --akcent-tlo: #fff;
    --szyna-w: 0px; --noty-w: 0px; --rozstaw: 0px; --margines: 0px;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .belka, .do-gory, .menu-przycisk, .motyw, .hero-akcje, .kt-akcje, .postep { display: none !important; }
  .pas-ciemny, .stopka { background: #fff !important; color: #000 !important; }
  .pas-ciemny { --tlo: #fff; --tekst: #000; --tekst-2: #222; --kreska: #bbb; }
  .arkusz-in { display: block; padding: 18pt 0; }
  .kolumny, .z-nota { display: block; }
  .nota { border-left: 2px solid #666; padding-left: 10pt; margin-top: 8pt; }
  .arkusz, .pas { break-inside: auto; }
  h2, h3 { break-after: avoid; }
  figure, .kt-blok, .wyliczenie, .zestaw-porownanie { break-inside: avoid; }
  .faq details { break-inside: avoid; }
  .faq-tresc { display: block !important; }
  a { text-decoration: none; }
  .kontrolne { grid-template-columns: minmax(0, 1fr); }
  /* Podziałka położenia niesie informację tylko na ekranie — na papierze
     jest stosem szarych kresek bez znaczenia. */
  .podzialka, .sasiedzi { display: none; }
  /* Wydrukowana lista kontrolna ma być dokumentem: z nagłówkiem na adres
     lokalu i datę, i z polami do zaznaczenia długopisem. */
  .druk-naglowek { display: block; margin: 0 0 14pt; font-size: 10pt; }
  .druk-linia { display: inline-block; width: 46%; border-bottom: 1px solid #666; }
  .druk-linia-krotka { width: 22%; }
  .kontrolna input[type="checkbox"] { border-color: #444; }
  .kt-licznik, .kt-postep { display: none; }
}