/* ══════════════════════════════════════════════════════════════════
   RDZEŃ WYGLĄDU — serenanieruchomosci.pl 2026
   ══════════════════════════════════════════════════════════════════
   Tokeny, warstwa bazowa i belka górna. Wspólne dla KAŻDEJ podstrony:
   strony głównej, formularza, kalkulatorów, poradników.

   Wyjęte 23.09.2026 z `PLANY/NOWA WWW/index.html` (linie 74-431)
   BEZ ŻADNEJ ZMIANY WARTOŚCI. To jest jedyne źródło tokenów — jeśli
   kolor albo odstęp ma się zmienić, zmienia się TUTAJ, nie w pliku
   podstrony. Powielanie tokenów w podstronach jest zakazane, bo po
   pierwszej rozbieżności nie da się już powiedzieć, która wartość
   jest prawdziwa.

   Kolejność warstw dla podstrony deklaruje SAMA PODSTRONA, dopisując
   swoje warstwy za tymi trzema, np.:
       @layer tokens, base, shell, krok, ruch;
   Pierwsze napotkane `@layer` ustala kolejność, a ten plik wczytuje
   się przed arkuszem podstrony, więc rdzeń zawsze jest na spodzie.
   ══════════════════════════════════════════════════════════════════ */

@layer tokens, base, shell;

/* ─────────────────────────────  TOKENY  ───────────────────────────── */
@layer tokens {
  :root {
    /* Las — od najgłębszego do rozjaśnionego */
    --forest-900: #0B1105;
    --forest-800: #121A07;
    --forest-700: #202E0D;
    --forest-600: #24330F;
    --forest-500: #36491A;
    --moss:       #56741D;
    --leaf:       #81A824;

    /* Złoto / biszkopt */
    --gold-700:   #AB8115;
    --gold-500:   #E6C274;
    --gold-300:   #F2D488;
    --gold-200:   #F9DA84;

    /* Papier */
    --cream:      #F4E2CF;
    --paper:      #FBF5EC;
    --paper-2:    #FFFFFF;

    --ink:        #17190F;
    --muted:      #5C5349;
    --line:       #D9C9B4;
    --accent:     #C41E3A;

    --forest-rgb: 36, 51, 15;
    --gold-rgb:   230, 194, 116;

    /* Głębia — dokładnie trzy poziomy. Aktywna karta nie dostaje
       czwartego cienia, tylko najwyższy z tych trzech plus skala;
       gdyby wszystko było uniesione, nic nie byłoby uniesione. */
    --e1: 0 1px 2px rgba(var(--forest-rgb), .08), 0 2px 8px rgba(var(--forest-rgb), .06);
    --e2: 0 4px 10px rgba(var(--forest-rgb), .10), 0 14px 32px rgba(var(--forest-rgb), .12);
    --e3: 0 12px 28px rgba(var(--forest-rgb), .16), 0 36px 76px rgba(var(--forest-rgb), .22);

    /* Rytm — jedna skala, bez wartości „z palca" w komponentach */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

    --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 28px;

    --wrap: min(1280px, 100% - 2 * var(--s4));
    --wrap-wide: min(1560px, 100% - 2 * var(--s4));

    --ease: cubic-bezier(.22, .8, .28, 1);

    /* Ziarno — dodaje fizyczności zamiast płaskich gradientów */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  }
}

/* ─────────────────────────────  BAZA  ───────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  /* clip, nie hidden. `overflow-x: hidden` tworzy KONTENER PRZEWIJANIA,
     przez co Safari rozjeżdża się z `animation-timeline: scroll(root)`
     (pasek postępu zamiera) i potrafi doliczyć fantomową wysokość na dole
     strony. `clip` przycina tak samo, ale kontenera nie tworzy. */
  html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

  /* Smooth scroll tylko dla osób, które nie proszą o ograniczenie ruchu */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(15px, .4vw + 14px, 17px);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0;
    text-wrap: balance;          /* ignorowane tam, gdzie brak wsparcia */
  }
  p { margin: 0; text-wrap: pretty; }
  ul { margin: 0; padding: 0; list-style: none; }

  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }

  a { color: inherit; }

  /* Pierścień fokusa — inny niż podświetlenie aktywnej karty, żeby
     użytkownik klawiatury nigdy ich nie mylił.
     Złoto na kremowym tle dawało kontrast 1,26:1 przy wymaganych 3:1,
     czyli praktycznie niewidoczny fokus na połowie strony. Dlatego
     pierścień jest ciemny na jasnych sekcjach (12,5:1) i złoty tylko
     tam, gdzie tło jest ciemne. */
  :focus-visible {
    outline: 3px solid var(--forest-600);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .shell :focus-visible,
  .shortcuts :focus-visible,
  .marks :focus-visible,
  .wins :focus-visible,
  .foot :focus-visible,
  .hero :focus-visible,
  .sheet__head :focus-visible {
    outline-color: var(--gold-200);
  }

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

  .wrap { width: var(--wrap); margin-inline: auto; }
  .wrap-wide { width: var(--wrap-wide); margin-inline: auto; }

  /* Kotwice (#oferty, #sukcesy) nie mogą chować się pod belką */
  :target, section[id] { scroll-margin-top: 70px; }  /* belka ma 57 px + oddech */

  /* ── Nagłówek sekcji: numer nie jest licznikiem sekcji, tylko kotwicą
     wizualną złotej linii. Tekst zawsze po lewej — nie centrujemy wszystkiego. */
  /* Jedna oś tekstu na całej stronie. Nagłówek hero, zdanie pod nim,
     pasmo wiarygodności i nagłówki sekcji zaczynają się w TYM SAMYM
     miejscu. Wcześniej były trzy różne krawędzie (16, 35 i 80 px przy
     oknie 1440) i żadna z nich nie była decyzją — wynikały z dwóch
     różnych kontenerów i z kreski stojącej w przepływie tekstu. */
  .rail {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    margin-bottom: var(--s6);
  }
  /* Kreska stoi POZA kolumną tekstu, w marginesie. Gdyby została
     w siatce, spychałaby nagłówek o swoją szerokość plus odstęp
     i sekcje nigdy nie trafiłyby w oś hero. */
  .rail__mark {
    position: absolute;
    left: calc(-1 * (3px + var(--s4)));
    bottom: 0;
    width: 3px;
    height: clamp(40px, 6vw, 68px);
    background: linear-gradient(to bottom, var(--gold-200), transparent);
    border-radius: 2px;
  }
  /* Na wąskim ekranie margines ma tylko 16 px, więc kreska wysuwa się
     o 11 px (własna szerokość plus mniejszy odstęp) i zostaje jej
     5 px od krawędzi ekranu. Oś tekstu jest dzięki temu ta sama na
     każdej szerokości, a kreska nie znika. */
  @media (max-width: 860px) {
    .rail__mark {
      left: calc(-1 * (3px + var(--s2)));
      height: clamp(30px, 9vw, 44px);
    }
  }
  /* h1 ORAZ h2: na stronie głównej pasmo jest sekcją (h2), a na
     podstronie bywa głównym nagłówkiem (h1, jak pierwszy krok
     formularza). Stopień pisma ma być ten sam w obu wypadkach —
     inaczej ta sama rola dostaje dwie różne wielkości. */
  .rail h1, .rail h2 {
    font-size: clamp(28px, 4.4vw, 52px);
  }
  .rail__sub {
    margin-top: var(--s2);
    color: var(--muted);
    font-size: clamp(15px, 1.2vw, 18px);
    /* To jedno zdanie prowadzące, nie akapit. Na szerokim ekranie ma
       stać w jednym wierszu — miara 62ch łamała je bez powodu, przy
       wolnym miejscu obok. Potem limit 86ch (954 px) okazał się za
       mały dla dłuższego podpisu pasma zleceń, który w jednej linii
       potrzebuje 1065 px. Limitu nie ma: ogranicznikiem jest szerokość
       kolumny (--wrap-wide, najwyżej 1560 px). Na wąskim ekranie tekst
       zawija się sam. */
    text-wrap: pretty;
  }
  /* Instrukcji gestu nie ma. Scroll-craft wymienia je wprost na liście
     odmów: „scroll", „przesuń", animowane ikonki myszy — odwiedzający
     patrzy na ekran i wie. Zamiast napisu pracuje podgląd następnej
     karty: skoro coś wystaje zza krawędzi, ręka sama sięga. */
  @media (max-width: 860px) {
    .rail { margin-bottom: var(--s3); gap: var(--s2) var(--s3); }
    .rail h1, .rail h2 { font-size: clamp(24px, 6.2vw, 32px); }
    .rail__sub { font-size: 14px; margin-top: 5px; line-height: 1.5; }
    /* Ekrany 320 px (iPhone SE 1. gen): przy 14 px zdanie wchodzi
       na trzeci wiersz, bo brakuje 3 px. Stopień niżej mieści je
       w dwóch z zapasem 22 px, a próg kontrastu się nie zmienia. */
    @media (max-width: 340px) {
      .rail__sub { font-size: 13px; }
    }
  }

  /* Przyciski */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s var(--ease), background-color .16s, border-color .16s, box-shadow .16s, color .16s;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-2px); }
  }
  .btn:active { transform: translateY(1px) scale(.985); }

  .btn--gold {
    background: linear-gradient(160deg, var(--gold-300), var(--gold-500));
    color: var(--forest-800);
    box-shadow: var(--e2);
  }
  .btn--gold:hover { box-shadow: var(--e3); }

  .btn--ghost {
    background: color-mix(in srgb, #fff 16%, transparent);
    border-color: color-mix(in srgb, #fff 42%, transparent);
    color: #fff;
  }
  .btn--ghost:hover { background: color-mix(in srgb, #fff 28%, transparent); }

  .btn--ink {
    background: var(--forest-600);
    color: #fff;
    box-shadow: var(--e2);
  }
  .btn--ink:hover { background: var(--forest-500); }

  /* Szkło: rozmycie tylko tam, gdzie naprawdę zmienia czytelność.
     Bez wsparcia backdrop-filter (np. wyłączone w Firefoksie) tło
     robi się po prostu bardziej kryjące — nic nie ginie. */
  .glass {
    background: color-mix(in srgb, var(--forest-800) 82%, transparent);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
      background: color-mix(in srgb, var(--forest-800) 55%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(1.3);
      backdrop-filter: blur(16px) saturate(1.3);
    }
  }
}

/* ─────────────────────────  BELKA GÓRNA  ───────────────────────── */
@layer shell {
  .shell {
    position: fixed;
    inset: 0 0 auto;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: 8px max(var(--s4), env(safe-area-inset-left)) 8px max(var(--s4), env(safe-area-inset-right));
    border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 28%, transparent);
    /* Belka musi zostać ciemna także nad jasnymi sekcjami — inaczej
       białe logo i linki przestają być czytelne przy przewijaniu. */
    background: color-mix(in srgb, var(--forest-800) 92%, transparent);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .shell { background: color-mix(in srgb, var(--forest-800) 84%, transparent); }
  }
  /* Logo używa przyciętego SVG (…-kadr.svg), nie oryginału.
     Powód: w oryginalnym pliku grafika zajmuje tylko 37% wysokości
     viewBoksa — reszta to pusty margines (32% u góry, 31% u dołu).
     Przy elemencie 52 px realnie widać było 19 px logo, dlatego
     powiększanie pudełka nic nie dawało. Po przycięciu viewBoksa
     wysokość elementu = wysokość rysunku, więc 40 px to 40 px
     i logo zrównuje się optycznie z przyciskiem „Zgłoś potrzebę".
     Oryginał zostaje nietknięty obok. */
  /* flex: none — bez tego przy 320 px flex ściskał <img> w poziomie
     (proporcja 3,70 zamiast 4,41), a SVG wpasowywał się w mniejsze
     pudełko, czyli logo znów robiło się małe z pustym marginesem. */
  /* min-height 44 px dotyczy OBSZARU DOTYKU, nie logotypu. Przy progu
     mobilnym rysunek schodzi do 34 px i sam link miał tyle samo,
     czyli poniżej progu 40 px ze standardu. Logo zostaje w swoim
     rozmiarze, powiększa się tylko pole, w które da się trafić. */
  .shell__brand { display: flex; align-items: center; flex: none; min-height: 44px; }
  .shell__brand img { height: 40px; width: auto; flex: none; }

  .shell__nav {
    display: flex;
    align-items: center;
    gap: var(--s1);
  }
  .shell__nav a {
    padding: 8px 12px;
    border-radius: 999px;
    color: color-mix(in srgb, #fff 86%, transparent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s, color .2s;
  }
  .shell__nav a:hover { background: color-mix(in srgb, #fff 14%, transparent); color: #fff; }
  .shell__nav a.is-cta {
    background: var(--gold-300);
    color: var(--forest-800);
    font-weight: 600;
    white-space: nowrap;   /* zawinięty przycisk to zepsuty przycisk */
    flex: none;
  }
  .shell__nav a.is-cta:hover { background: var(--gold-200); }

  /* Jedna ikona telefonu, nie osiem kółek. Na stronie pośredniczki
     telefon pod ręką z każdego ekranu ma realną wartość, a pojedyncza
     ikona obok CTA zachowuje hierarchię: najpierw złoty przycisk,
     potem obrys telefonu. */
  .shell__tel {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--gold-500) 55%, transparent);
    color: var(--gold-200);
    flex: none;
    transition: background-color .16s, border-color .16s, transform .12s var(--ease);
  }
  .shell__tel svg { width: 19px; height: 19px; fill: currentColor; }
  @media (hover: hover) and (pointer: fine) {
    .shell__tel:hover { background: color-mix(in srgb, var(--gold-500) 18%, transparent); border-color: var(--gold-300); }
  }
  .shell__tel:active { transform: scale(.92); }

  @media (max-width: 720px) {
    .shell__nav a:not(.is-cta):not(.shell__tel) { display: none; }
    .shell__brand img { height: 34px; }
  }

  /* Bardzo wąskie ekrany (stare iPhone SE, 320 px): logo schodzi
     o stopień, a CTA dostaje ciaśniejszy padding. Telefon zostaje —
     to o niego chodziło. Nic się nie zawija, nic nie wypada. */
  @media (max-width: 380px) {
    .shell__brand img { height: 30px; }
    .shell__nav a.is-cta { padding: 8px 12px; font-size: 13.5px; }
    .shell__tel { width: 38px; height: 38px; }
    .shell { gap: var(--s2); padding-inline: var(--s3); }
  }

  /* ═══════════════════════════════════════════════════════════════
     STOPKA — wspólna dla wszystkich podstron
     ═══════════════════════════════════════════════════════════════
     Przeniesiona tutaj 24.09.2026 z pliku strony głównej, BEZ ZMIANY
     wartości. Siedziała w warstwie `close` jednej podstrony, więc
     formularz jej nie widział i dostał własną, uboższą. To był błąd
     architektury, nie decyzja projektowa: stopka to element ramy
     strony, dokładnie jak belka górna, i ma jedno źródło.
     ═══════════════════════════════════════════════════════════════ */

  .foot {
    background: var(--forest-900);
    /* Jasny tekst na ciemnym tle wymaga wyrównania na trzech osiach:
       odrobinę więcej interlinii, odrobinę więcej świateł i stopień
       wyżej. Pismo złożone metrykami z jasnego tła wygląda tu cienko. */
    color: color-mix(in srgb, #fff 74%, transparent);
    padding: var(--s5) 0 max(var(--s5), calc(env(safe-area-inset-bottom) + var(--s4)));
    font-size: 14.5px;
    line-height: 1.6;
  }
  /* Profile społecznościowe: jedna nazwana grupa, nie osiem równych
     kropek. Osiem ikon tej samej wagi nie przechodzi testu zmrużonych
     oczu — nic w nich nie jest pierwsze. Etykieta „Na bieżąco" nadaje
     grupie sens, a ikony przestają konkurować z linkami do dokumentów. */
  .foot__social {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding-bottom: var(--s3);
    margin-bottom: var(--s3);
    border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
  }
  .foot__social-lab {
    font-size: 13px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--gold-500);
    margin-right: var(--s2);
  }
  /* `flex: none` i `aspect-ratio` są tu OBOWIĄZKOWE, nie ozdobne.
     Bez nich ikona jest elementem elastycznym i przy ciasnym wierszu
     kurczy się w POZIOMIE, podczas gdy wysokość zostaje — z koła robi
     się owal. Widać to dopiero przy powiększonym piśmie, kiedy napis
     „NA BIEŻĄCO" jest szerszy i wypycha ikony. */
  .foot__social a {
    flex: none;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    /* 55%, nie 30%: przy 30% obwódka miała 2,02:1, a próg dla obrysu
       kontrolki to 3:1. Sama ikona ma 12,3:1, więc przycisk był
       rozpoznawalny, ale ramka nie niosła swojej roli. */
    border: 1px solid color-mix(in srgb, var(--gold-500) 55%, transparent);
    color: color-mix(in srgb, #fff 80%, transparent);
    transition: background-color .16s, border-color .16s, color .16s, transform .12s var(--ease);
  }
  .foot__social svg { width: 19px; height: 19px; fill: currentColor; }
  @media (hover: hover) and (pointer: fine) {
    .foot__social a:hover {
      background: color-mix(in srgb, var(--gold-500) 16%, transparent);
      border-color: var(--gold-300);
      color: var(--gold-200);
    }
  }
  .foot__social a:active { transform: scale(.92); }

  /* E-mail w zamknięciu: cicha trzecia droga, nie czwarty przycisk.
     Telefon i WhatsApp to akcja, adres to alternatywa dla piszących. */
  /* Zdanie zdejmujące obawę stoi TUŻ pod przyciskami, bo tam zapada
     decyzja. Dalej od nich przestaje pracować. */
  .close__bezpiecznie {
    margin-top: var(--s4);
    font-size: 15px;
    color: var(--forest-600);
    font-weight: 500;
  }

  .foot__links {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--s5);
    row-gap: 10px;
    padding-bottom: var(--s4);
    margin-bottom: var(--s3);
    border-bottom: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
  }
  /* Obszar dotyku, nie stopień pisma: napis ma 23 px wysokości, czyli
     poniżej progu 40 px ze standardu. Odnośnik staje się elementem
     wierszowo-elastycznym i dostaje 44 px wysokości, a litery zostają
     tam, gdzie były. Dotyczy obu podstron, bo stopka jest wspólna. */
  /* Obszar dotyku powiększany WARSTWĄ NAKŁADANĄ, nie wysokością.
     Poprzednio odnośnik miał `min-height: 40px` i był elementem
     wierszowo-elastycznym, przez co pudełko 40 px siedziało w wierszu
     tekstu o interlinii 23 px i rozpychało całą listę. Teraz odnośnik
     jest zwykłym tekstem, a pole dotyku daje `::after` pozycjonowany
     absolutnie — nie zajmuje miejsca w układzie, więc rytm listy
     ustala wyłącznie interlinia i odstęp wiersza. */
  .foot__links a {
    position: relative;
    text-decoration: none;
    color: color-mix(in srgb, #fff 78%, transparent);
  }
  .foot__links a::after {
    content: "";
    position: absolute;
    inset: -5px -4px;
  }
  .foot__links a:hover { color: var(--gold-200); }
  /* Te dane służą partnerom do wystawienia faktury, a nie do czytania
     na co dzień. Mają być kompletne i zwarte, nie rozstrzelone. */
  .foot__legal {
    font-size: 14px;
    line-height: 1.45;
  }
  /* To samo co wyżej: telefon jest częścią zdania, a nie osobnym
     klockiem. Pudełko 40 px robiło z jego wiersza pustą linię. */
  .foot__legal a {
    position: relative;
    color: var(--gold-200);
  }
  .foot__legal a::after {
    content: "";
    position: absolute;
    inset: -10px -6px;
  }
  /* Etykieta i numer to jedna informacja, wiec lamia sie razem albo
     wcale. Sam niełamliwy odstep po „NIP" nie wystarcza: numer ma
     wlasne spacje w srodku (536 168 37 67) i lamal sie rownie chetnie
     miedzy grupami cyfr. `white-space: nowrap` na calej frazie zamyka
     oba przypadki naraz. */
  .nierozdzielne { white-space: nowrap; }

  /* ── Rachunek do faktur ────────────────────────────────────────
     Osobny blok na samym dole, bo to jedyna informacja w stopce,
     którą ktoś faktycznie PRZEPISUJE. Przycisk kopiowania zdejmuje
     z niego całą tę robotę. */
  .foot__konto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s3);
    margin-top: var(--s3);
    padding-top: var(--s3);
    border-top: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
    font-size: 14px;
    line-height: 1.45;
  }
  .foot__konto-lab {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-500);
    flex-basis: 100%;
  }
  .foot__konto-nr {
    color: color-mix(in srgb, #fff 88%, transparent);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }
  /* Dyskretna ikona, nie przycisk. Numer rachunku jest tu treścią,
     a kopiowanie tylko udogodnieniem — żółta pigułka przeciągała na
     siebie uwagę w miejscu, które ma być ciche. Kółko 40 px zostaje
     jako obszar dotyku, ale jest niewidoczne: widać samą ikonę 17 px. */
  .foot__kopiuj {
    display: inline-grid;
    place-items: center;
    /* Pudełko przycisku ma rozmiar SAMEJ IKONY, nie obszaru dotyku.
       Przy 40 x 40 przycisk wyznaczał wysokość całego wiersza, numer
       rachunku był w nim wyśrodkowany i nad numerem robiło się 10 px
       pustki — stąd odstęp 11,9 px zamiast takiego jak w nocie prawnej.
       Pole dotyku daje teraz `::after` pozycjonowany absolutnie, więc
       nie zajmuje miejsca w układzie. Ta sama metoda co przy
       odnośnikach stopki. */
    position: relative;
    width: 17px; height: 17px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: color-mix(in srgb, #fff 62%, transparent);
    cursor: pointer;
    transition: color .16s, background-color .16s, transform .12s var(--ease);
  }
  /* Obie ikony leżą w tej samej komórce siatki, więc podmiana jednej
     na drugą nie przesuwa niczego o piksel. */
  .foot__kopiuj svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: currentColor; }
  /* 17 px ikony + 2 x 12 px naddatku = 41 px pola dotyku. */
  .foot__kopiuj::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
  .foot__kopiuj-ptaszek { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .foot__kopiuj:hover { color: var(--gold-200); }
    .foot__kopiuj:hover::after { background: color-mix(in srgb, #fff 8%, transparent); }
  }
  .foot__kopiuj:active { transform: scale(.92); }
  .foot__kopiuj[data-stan="ok"] { color: var(--leaf); }
  .foot__kopiuj[data-stan="ok"] .foot__kopiuj-ikona { display: none; }
  .foot__kopiuj[data-stan="ok"] .foot__kopiuj-ptaszek { display: block; }

  /* Włos postępu — pokazuje, ile strony zostało. W Firefoksie napędza
     go krótki skrypt (patrz „progres" niżej), więc działa wszędzie. */
  .shell__progress {
    position: absolute;
    inset: auto 0 -1px 0;
    height: 2px;
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--gold-700), var(--gold-200));
  }
}