/* Kod odczarowany — arkusz stylów, kierunek redakcyjny.

   Zasady: papier zamiast ekranu, szeryfowa antykwa w treści, ostre krawędzie
   zamiast zaokrągleń, hierarchia budowana liniami i typografią, nie cieniami.
   Kolor znaczy: terakota przy tym, co wymaga uwagi, granat przy kodzie. */

:root {
  --papier: #fbfaf7;
  --papier-glebszy: #f2efe8;
  --biel: #ffffff;

  --atrament: #16130f;
  --tekst: #16130f;
  --tekst-slaby: #6b6459;
  --linia: #e5e1d8;
  --linia-mocna: #cdc6b8;
  /* Obwódka elementu, który coś znaczy — pole diagramu, ramka z ostrzeżeniem —
     musi mieć wobec tła co najmniej 3:1. Jaśniejsza --linia-mocna nadaje się
     tylko na linie rozdzielające, które nie niosą treści. */
  --obwodka: #8f8676;

  --akcent: #c2410c;
  --akcent-slaby: #fdf0e8;
  --granat: #1e3a8a;
  --granat-slaby: #eef2fb;
  --zielen: #166534;

  --kod-tlo: #1c1917;
  --kod-tekst: #e7e5e4;

  --szeryf: "Iowan Old Style", Charter, "Bitstream Charter", Georgia,
            "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas,
          "Liberation Mono", monospace;

  --kolumna: 42rem;
  --szerokosc: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--szeryf);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* Kafle są klikalne całą powierzchnią, więc obrys przy nawigacji klawiaturą
   też musi obejmować całą powierzchnię, a nie sam tytuł. */
.karta:focus-within, .dzial:focus-within {
  outline: 2px solid var(--akcent);
  outline-offset: 4px;
}
.karta:focus-within .karta-tytul, .dzial:focus-within .dzial-tytul { color: var(--akcent); }

h1, h2, h3, h4 {
  font-family: var(--szeryf);
  font-weight: 700;
  /* cyfry majuskułowe: w "MQL4 na MQL5" cyfry tekstowe schodzą pod linię
     pisma i wyglądają jak usterka składu */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 2.6rem 0 0.9rem;
}
h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-top: 0; letter-spacing: -0.032em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.22rem; }

/* ============================================================ pasek i menu */

.pomin {
  position: absolute; left: -9999px; top: 0;
  background: var(--akcent); color: #fff;
  padding: 0.7rem 1.1rem; font-family: var(--mono); font-size: 0.85rem; z-index: 10;
}
.pomin:focus { left: 0; }

.pasek {
  background: var(--atrament);
  color: #f5f1ea;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 0;
}
.pasek-srodek {
  max-width: var(--szerokosc); margin: 0 auto; padding: 0 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap;
}
.pasek-srodek span + span { margin-left: 1rem; }

.gora { background: var(--papier); border-bottom: 2px solid var(--atrament); }
.gora-srodek {
  max-width: var(--szerokosc); margin: 0 auto; padding: 1.3rem 1.6rem 1.1rem;
  display: flex; align-items: baseline; flex-wrap: wrap;
}
.gora-srodek .menu { margin-left: auto; padding-left: 1.4rem; }
.znak {
  font-family: var(--szeryf); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -0.03em; color: var(--atrament); text-decoration: none;
}
.znak::before { content: "[0]"; color: var(--akcent); margin-right: 0.35em; }

.menu {
  margin-left: auto; display: flex; flex-wrap: wrap;
  font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.menu > a, .menu > .rozwijane {
  margin-left: 1.5rem; position: relative;
}
.menu > a:first-child, .menu > .rozwijane:first-child { margin-left: 0; }
.menu > a, .menu summary {
  color: var(--tekst-slaby); text-decoration: none; padding: 0.15rem 0;
  cursor: pointer; display: inline-block;
}
.menu > a:hover, .menu summary:hover { color: var(--akcent); }

/* Bieżący dział zaznaczony kreską pod spodem — po dwunastu podstronach
   czytelnik przestaje wiedzieć, gdzie właściwie jest. */
.menu .aktywny { color: var(--atrament); border-bottom: 2px solid var(--akcent); }

/* Rozwijana lista bez javascriptu: znacznik details działa z klawiatury
   i po dotknięciu, a bez skryptu nie ma czego zepsuć. */
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
  content: "▾"; font-size: 0.7em; margin-left: 0.35em; vertical-align: 0.1em;
}
.menu .podmenu {
  position: absolute; top: 100%; left: -0.9rem; z-index: 30;
  min-width: 17rem; background: var(--papier);
  border: 2px solid var(--atrament); padding: 0.4rem 0;
  box-shadow: 0 12px 28px -14px rgba(22, 19, 15, 0.5);
}
.menu .podmenu a {
  display: block; padding: 0.5rem 1rem; text-decoration: none;
  text-transform: none; letter-spacing: 0; color: var(--tekst);
}
.menu .podmenu a:hover { background: var(--papier-glebszy); color: var(--akcent); }
.menu .podmenu strong {
  display: block; font-family: var(--szeryf); font-size: 1rem; font-weight: 700;
}
.menu .podmenu span {
  display: block; font-family: var(--sans); font-size: 0.76rem;
  color: var(--tekst-slaby); text-transform: none; letter-spacing: 0;
}
.menu .podmenu .aktywny { border-bottom: 0; color: var(--akcent); }

/* =================================================================== układ */

.tresc { max-width: var(--szerokosc); margin: 0 auto; padding: 2.6rem 1.6rem 3rem; }
.artykul { max-width: var(--kolumna); }
.artykul p, .artykul ul, .artykul ol { margin: 0 0 1.2rem; }
.artykul li { margin-bottom: 0.45rem; }

/* Treść leży wprost na papierze. Oddziela ją nie karta, lecz gruba linia
   u góry — chwyt rodem ze składu gazetowego. */
/* Bez własnej linii u góry: pasek nagłówka rysuje już kreskę na całą
   szerokość, a druga, węższa tuż pod nią wygląda jak usterka składu. */
.karta-tresci { padding: 0.6rem 0 0; margin-bottom: 2.5rem; }

.okruchy {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--akcent); margin: 0 0 1.1rem;
}
.okruchy a { color: var(--akcent); text-decoration: none; }
.okruchy a:hover { text-decoration: underline; }

.wprowadzenie {
  font-size: 1.24rem; line-height: 1.55; color: #3d372f;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  max-width: var(--kolumna); margin: 0 0 1.8rem;
}

.stempel {
  display: block; font-family: var(--mono); font-size: 0.74rem; line-height: 1.5;
  color: var(--tekst-slaby); border-top: 1px solid var(--linia);
  border-bottom: 1px solid var(--linia); padding: 0.6rem 0;
  margin: 0 0 2.2rem; max-width: var(--kolumna);
}

.spis {
  background: var(--papier-glebszy); border-left: 3px solid var(--atrament);
  padding: 1rem 1.3rem; margin: 0 0 2.4rem; max-width: var(--kolumna);
}
.spis-etykieta {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tekst-slaby); margin: 0 0 0.5rem;
}
.spis ol { list-style: none; margin: 0; padding: 0; counter-reset: spis;
  font-family: var(--sans); font-size: 0.94rem; }
.spis li { counter-increment: spis; margin-bottom: 0.2rem; }
.spis li::before {
  content: counter(spis, decimal-leading-zero);
  font-family: var(--mono); color: var(--akcent); margin-right: 0.7rem;
}
.spis a { color: var(--tekst); text-decoration: none; }
.spis a:hover { color: var(--akcent); text-decoration: underline; }

/* ==================================================================== kod */

.kod {
  margin: 2rem 0; background: var(--kod-tlo); overflow: hidden;
  max-width: 48rem; border-radius: 2px;
}
.kod-tytul {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: #a8a29e; padding: 0.6rem 1.1rem; background: #292524;
  border-bottom: 1px solid #3a3532;
}
.kod pre {
  margin: 0; padding: 1.15rem; overflow-x: auto; font-family: var(--mono);
  font-size: 0.82rem; line-height: 1.65; color: var(--kod-tekst); tab-size: 3;
}
.kod code { font-family: inherit; }
.kod .komentarz { color: #a8a29e; font-style: italic; }
.kod .kluczowe  { color: #f0abfc; }
.kod .typ       { color: #5eead4; }
.kod .tekst     { color: #fcd34d; }
.kod .liczba    { color: #fcd34d; }
.kod .funkcja   { color: #93c5fd; }
.kod .stala     { color: #bef264; }
.kod .predef    { color: #bef264; font-style: italic; }
.kod .preproc   { color: #a8a29e; }
.kod .log-blad  { color: #fca5a5; }
.kod .log-uwaga { color: #fcd34d; }

p code, li code, td code {
  font-family: var(--mono); font-size: 0.84em;
  background: var(--granat-slaby); color: var(--granat);
  padding: 0.08em 0.3em; border-radius: 2px;
}

.sygnatura {
  font-family: var(--mono); font-size: 0.84rem; background: var(--kod-tlo);
  color: var(--kod-tekst); padding: 0.9rem 1.1rem; border-radius: 2px;
  overflow-x: auto; margin: 0 0 1.9rem; max-width: 48rem;
}
.plakietka {
  display: inline-block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 0.2rem 0.6rem;
  background: var(--akcent); color: #fff; margin-bottom: 1rem;
}

/* ================================================================= ramki */

.ramka {
  margin: 2rem 0; padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--obwodka); background: var(--papier-glebszy);
  max-width: var(--kolumna);
}
.ramka p:last-child { margin-bottom: 0; }
.ramka-etykieta {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 0.55rem; color: var(--tekst-slaby);
}
.ramka-pulapka { border-left-color: var(--akcent); background: var(--akcent-slaby); }
.ramka-pulapka .ramka-etykieta { color: var(--akcent); }
.ramka-info { border-left-color: var(--granat); background: var(--granat-slaby); }
.ramka-info .ramka-etykieta { color: var(--granat); }
.ramka-sprawdz { border-left-style: dashed; background: var(--biel); }

/* ================================================================ tabele */

.tabela { overflow-x: auto; margin: 2rem 0; }
.tabela table {
  border-collapse: collapse; width: 100%; font-size: 0.96rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.tabela th, .tabela td {
  text-align: left; padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--linia); vertical-align: top;
}
.tabela thead th { border-bottom: 2px solid var(--atrament); }
.tabela th {
  font-family: var(--sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-slaby);
}

/* ================================================== czoło strony głównej */

.czolo-domu {
  border-bottom: 1px solid var(--linia);
  padding: 3.4rem 0 3rem;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem;
}
.czolo-nadtytul {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--akcent); margin: 0 0 1.3rem;
}
.naglowek-domu {
  font-size: clamp(2.6rem, 5.4vw, 4.3rem); line-height: 1.02;
  letter-spacing: -0.035em; margin: 0 0 1.4rem;
}
.naglowek-domu u {
  text-decoration: none; box-shadow: inset 0 -0.26em 0 var(--akcent-slaby);
}
.czolo-domu .wprowadzenie { font-size: 1.3rem; max-width: 34ch; margin-bottom: 2rem; }

.przyciski { display: flex; flex-wrap: wrap; margin: 0; }
.przycisk + .przycisk { margin-left: 0.8rem; }
.przycisk {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  padding: 0.85rem 1.5rem; border-radius: 2px; text-decoration: none;
  background: transparent; color: var(--atrament);
  box-shadow: inset 0 0 0 2px var(--atrament); transition: 0.18s;
}
.przycisk:hover { background: var(--atrament); color: var(--papier); }
.przycisk-glowny { background: var(--atrament); color: var(--papier); }
.przycisk-glowny:hover { background: var(--akcent); box-shadow: inset 0 0 0 2px var(--akcent); }

.bok { border-left: 1px solid var(--linia); padding-left: 2.4rem; }
.bok-tytul {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--tekst-slaby); margin: 0 0 1.1rem;
  font-weight: 400;
}
.bok .karty { display: block; }
.bok .karta { border: 0; border-bottom: 1px solid var(--linia); padding: 0.9rem 0; }
.bok .karta:last-child { border-bottom: 0; }
.bok .karta-opis { display: none; }
.bok .karta-ikona { display: none; }

/* ================================================================ liczby */

.liczby {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia);
}
.liczby li { padding: 1.5rem 1.2rem 1.5rem 0; border-right: 1px solid var(--linia); }
.liczby li:last-child { border-right: 0; }
/* Zakres jest tu konieczny: klasy .liczba używa też kolorowanie składni
   dla liczb w kodzie. Bez zawężenia liczby w przykładach dziedziczyłyby
   rozmiar statystyki i rozsadzały blok kodu. */
.liczby .liczba {
  display: block; font-size: 2.6rem; line-height: 1;
  letter-spacing: -0.045em; color: var(--akcent); font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.liczby .liczba-opis {
  display: block; margin-top: 0.35rem; font-family: var(--sans);
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tekst-slaby);
}

/* ============================================================ czoło działu */

.czolo-dzialu { border-bottom: 1px solid var(--linia); padding: 2.4rem 0 2rem; margin-bottom: 2.4rem; }
.czolo-glowa { display: flex; align-items: flex-start; gap: 1.3rem; }
.czolo-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem; flex: 0 0 auto;
  color: var(--kolor, var(--akcent));
  border: 2px solid var(--kolor, var(--akcent));
}
.czolo-dzialu h1 { margin: 0 0 0.4rem; }
.czolo-dzialu .wprowadzenie { margin: 0; max-width: 46rem; font-size: 1.16rem; }
.czolo-licznik {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em;
  color: var(--tekst-slaby); margin: 1.3rem 0 0;
}
.czolo-licznik strong { color: var(--kolor, var(--akcent)); }

/* ================================================================= kafle */

.polecane { margin: 3.4rem 0 0; }
.naglowek-sekcji {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--szeryf); font-weight: 700; font-size: 1.75rem;
  letter-spacing: -0.025em; color: var(--atrament);
  margin: 0 0 1.6rem; text-transform: none;
}
.naglowek-sekcji::after {
  content: ""; flex: 1; border-top: 1px solid var(--linia);
  transform: translateY(-0.35em);
}

.karty {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 2.2rem;
}
.karta {
  position: relative; border-top: 3px solid var(--atrament); padding: 1.1rem 0 0;
  /* Element siatki domyślnie nie zwęża się poniżej najdłuższego słowa.
     Tytuły w rodzaju TRADE_RETCODE_INVALID_STOPS rozpychały wtedy kolumny
     poza szerokość strony. */
  min-width: 0;
}
.karta-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; color: var(--kolor, var(--akcent));
  margin-bottom: 0.6rem;
}
.karta-numer, .karta-kod, .karta-dzial {
  display: block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kolor, var(--akcent)); margin-bottom: 0.5rem;
}
.karta > a { text-decoration: none; }
.karta > a::after { content: ""; position: absolute; inset: 0; }
.karta-tytul {
  display: block; font-family: var(--szeryf); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  overflow-wrap: anywhere; hyphens: auto;
  font-size: 1.36rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--tekst);
}
.karta:hover .karta-tytul { color: var(--akcent); }
.karta-opis { margin: 0.5rem 0 0; color: var(--tekst-slaby); font-size: 1rem; }

/* ================================================================ działy */

.dzialy {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linia);
}
.dzial {
  position: relative; padding: 1.1rem 1.4rem 1.1rem 0;
  border-bottom: 1px solid var(--linia); border-right: 1px solid var(--linia);
}
.dzial:nth-child(3n) { border-right: 0; }
.dzial a { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.dzial a::after { content: ""; position: absolute; inset: 0; }
.dzial-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex: 0 0 auto; color: var(--kolor, var(--akcent));
}
.dzial-tytul {
  font-family: var(--szeryf); font-weight: 700; font-size: 1.28rem;
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  letter-spacing: -0.02em; color: var(--tekst);
}
.dzial-liczba {
  margin-left: auto; font-family: var(--mono); font-size: 0.86rem;
  color: var(--kolor, var(--akcent));
}
.dzial p { margin: 0.35rem 0 0; color: var(--tekst-slaby); font-size: 0.98rem; }
.dzial:hover .dzial-tytul { color: var(--akcent); }

/* ============================================================== manifest */

.manifest { background: var(--atrament); color: #f5f1ea; padding: 3.4rem 0; margin-top: 3.6rem; }
.manifest-srodek { max-width: var(--szerokosc); margin: 0 auto; padding: 0 1.6rem; }
.manifest p {
  font-size: clamp(1.5rem, 2.9vw, 2.15rem); line-height: 1.32;
  letter-spacing: -0.022em; margin: 0; max-width: 26ch; font-weight: 700;
}
.manifest span {
  display: block; margin-top: 1.2rem; font-family: var(--mono);
  font-size: 0.8rem; color: #a9a093;
}
.manifest a { color: #f5f1ea; }

/* ================================================================= kroki */

.kroki {
  display: flex; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid var(--linia); padding-top: 1.6rem; margin-top: 3rem;
  max-width: var(--kolumna);
}
.krok { flex: 1 1 12rem; font-family: var(--sans); font-size: 0.96rem;
  text-decoration: none; color: var(--tekst); }
.krok span {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tekst-slaby); margin-bottom: 0.25rem;
}
.krok:hover { color: var(--akcent); }
.krok-dalej { text-align: right; }

/* =============================================================== widżety */

.widzet { border: 1px solid var(--linia); background: var(--biel);
  padding: 1.4rem; margin: 2.2rem 0; max-width: 48rem; }
.widzet-etykieta {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--akcent); margin: 0 0 1.1rem;
}
.widzet label { font-family: var(--sans); font-size: 0.85rem; display: block; margin-bottom: 0.3rem; }
.widzet input[type="range"] { width: 100%; accent-color: var(--akcent); }
.widzet textarea {
  width: 100%; min-height: 12rem; font-family: var(--mono); font-size: 0.8rem;
  padding: 0.7rem; border: 1px solid var(--linia); background: var(--papier);
  color: var(--tekst);
}
.widzet button {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  padding: 0.6rem 1.2rem; background: var(--atrament); color: var(--papier);
  border: 0; cursor: pointer;
}
.widzet button:hover { background: var(--akcent); }
.pole { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.2rem; }
.pole > div { flex: 1 1 12rem; }

/* ============================================================== diagramy */

.diagram { margin: 2.4rem 0; padding: 0; max-width: 48rem; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .d-pole { fill: var(--papier-glebszy); stroke: var(--obwodka); stroke-width: 1; }
.diagram .d-pole-akcent { fill: var(--akcent-slaby); stroke: var(--akcent); }
.diagram .d-tytul { font-family: var(--mono); font-size: 12.5px; font-weight: 600; fill: var(--tekst); }
.diagram .d-opis { font-family: var(--szeryf); font-size: 11.5px; fill: var(--tekst-slaby); }
.diagram .d-boczny { font-family: var(--szeryf); font-size: 11.5px; fill: var(--akcent); }
.diagram .d-podpis { font-family: var(--szeryf); font-size: 11.5px; fill: var(--tekst-slaby); }
.diagram .d-etykieta { font-family: var(--mono); font-size: 10.5px; fill: var(--tekst-slaby); }
.diagram .d-kod { font-family: var(--mono); font-size: 11px; fill: var(--tekst-slaby); }
.diagram .d-kod-akcent { fill: var(--akcent); font-weight: 600; }
.diagram .d-kod-slaby { font-family: var(--mono); font-size: 11px; fill: #6b6459; }
.diagram .d-numer { font-family: var(--mono); font-size: 9px; fill: #fff; }
.diagram .d-strzalka, .diagram .d-os { stroke: var(--tekst-slaby); stroke-width: 1.2; fill: none; }
.diagram .d-kreska { stroke: var(--obwodka); stroke-width: 1; stroke-dasharray: 3 3; }
.diagram .d-grot { fill: var(--tekst-slaby); }
.diagram .d-punkt { fill: var(--tekst-slaby); }
.diagram .d-punkt-akcent { fill: var(--akcent); }
.diagram .d-swieca { fill: var(--papier-glebszy); stroke: var(--tekst); stroke-width: 1.5; }
.diagram .d-swieca-akcent { fill: var(--akcent-slaby); stroke: var(--akcent); }
.diagram .d-pytanie { font-family: var(--szeryf); font-size: 13px; fill: var(--tekst); }
.diagram .d-cel { font-family: var(--mono); font-size: 13.5px; font-weight: 600; fill: var(--akcent); }

/* ================================================================ stopka */

.dol { border-top: 2px solid var(--atrament); background: var(--papier);
  padding: 2.4rem 1.6rem 3.4rem; font-size: 0.95rem; color: var(--tekst-slaby); }
.dol-srodek { max-width: var(--szerokosc); margin: 0 auto; }
.dol p { max-width: 46rem; margin: 0 0 0.9rem; }
.dol-odnosniki { font-family: var(--sans); font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; }
.dol-odnosniki a { margin-right: 1.4rem; }

.autor {
  float: right; margin: 0 0 1.4rem 2rem; max-width: 13.5rem; text-align: center;
}
.autor img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linia); filter: grayscale(1) contrast(1.05);
}
.autor figcaption {
  font-family: var(--sans); font-size: 0.8rem; line-height: 1.45;
  color: var(--tekst-slaby); margin-top: 0.6rem;
}

@media (max-width: 40rem) {
  .autor { float: none; margin: 0 auto 1.6rem; max-width: 11rem; }
}

.ikona { display: block; }

/* ======================================================== responsywność */

@media (max-width: 62rem) {
  .dzialy { grid-template-columns: repeat(2, 1fr); }
  .dzial:nth-child(3n) { border-right: 1px solid var(--linia); }
  .dzial:nth-child(2n) { border-right: 0; }
}

@media (max-width: 48rem) {
  body { font-size: 17px; }
  .czolo-domu { grid-template-columns: 1fr; gap: 2.4rem; padding: 2.4rem 0 2.2rem; }
  .bok { border-left: 0; border-top: 1px solid var(--linia); padding: 1.6rem 0 0; }
  .liczby { grid-template-columns: repeat(2, 1fr); }
  .liczby li { border-right: 0; padding: 1.1rem 0; }
  .karty, .dzialy { grid-template-columns: 1fr; }
  .menu .podmenu { position: static; min-width: 0; border-width: 1px;
    margin: 0.4rem 0 0.6rem; box-shadow: none; }
  .dzial { border-right: 0 !important; }
  .czolo-ikona { width: 2.8rem; height: 2.8rem; }
  .czolo-ikona svg { width: 24px; height: 24px; }
}

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