/* Jasny dokument raportu. Kolory i skala pochodzą wyłącznie z tokenów Planu 4. */
body.dokument {
  min-width: 0;
  margin: 0;
  color: var(--dok-tekst);
  background: var(--dok-tlo);
  font-family: "Onest", sans-serif;
  font-size: var(--lede);
  font-weight: 400;
  line-height: 1.65;
}

.dokument a {
  color: var(--dok-ember);
  text-underline-offset: var(--s1);
}

.dokument button,
.dokument input {
  font: inherit;
}

.dokument h1,
.dokument h2,
.dokument h3,
.dok-marka {
  font-family: "Unbounded", sans-serif;
}

/* Nazwa spolki to najdluzsze nierozdzielne slowo na stronie: "ODPOWIEDZIALNOSCIA" ma 418,5 px
   przy kroju 28 px, a kolumna na telefonie 358 px — `overflow-wrap: anywhere` lamalo je w polowie
   ("ODPOWIEDZIALNOS/CIA") w praktycznie kazdej sp. z o.o. `min()` zbija naglowek dopiero ponizej
   ~467 px szerokosci okna (1440 i 768 px bez zmian), a 6vw wystarcza takze na 360 px.
   Decyzja Mateusza 27.07.2026 (wariant: zmniejszyc naglowek na waskich ekranach). */
.dokument h1 {
  max-width: 24ch;
  margin: var(--s3) 0;
  font-size: min(var(--t1), 6vw);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.dokument h2 {
  margin: 0 0 var(--s6);
  font-size: var(--t2);
  line-height: 1.3;
}

.dokument h3 {
  margin: 0 0 var(--s2);
  font-size: var(--t3);
  line-height: 1.35;
}

.dokument [id] {
  scroll-margin-top: calc(var(--s16) + var(--s12));
}

.pominięcie {
  position: fixed;
  z-index: 20;
  top: var(--s2);
  left: var(--s2);
  padding: var(--s3) var(--s4);
  color: var(--kosc);
  background: var(--grafit);
  transform: translateY(-160%);
}

.pominięcie:focus {
  transform: translateY(0);
}

.dok-chrome {
  position: sticky;
  z-index: 10;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--s16);
  padding: var(--s3) max(var(--s4), calc((100vw - 1280px) / 2));
  color: var(--tekst2);
  background: var(--grafit);
  border-bottom: 1px solid var(--bd);
  font-size: var(--ui);
}

.dok-chrome form {
  display: inline-flex;
  margin-left: auto;
}

.dok-marka {
  color: var(--kosc);
  font-weight: 700;
  text-decoration: none;
}

.dok-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--s12);
  padding: var(--s2) var(--s4);
  color: var(--grafit);
  background: var(--ember);
  border: 1px solid var(--ember);
  border-radius: var(--r2);
  font-size: var(--small);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.dok-przycisk--wtorny {
  color: var(--kosc);
  background: transparent;
  border-color: var(--bd2);
}

.dok-przycisk:hover,
.dok-przycisk:focus-visible {
  background: var(--ember2);
}

.dok-przycisk--wtorny:hover,
.dok-przycisk--wtorny:focus-visible {
  color: var(--kosc);
  background: var(--karta2);
}

/* Kolor linku tresci (`.dokument a`, 0-1-1) WYGRYWA z klasami komponentow (0-1-0) —
   niezaleznie od kolejnosci w pliku. Bez tych regul chrom i przyciski, ktore sa
   znacznikiem <a>, dostaja --dok-ember (#9c3f00): 2,35:1 na emberze i 2,94:1 na grafcie,
   przy wymaganych 4,5:1 (WCAG AA). Ten sam przycisk jako <button> renderowal sie
   poprawnie — stad rozjazd byl niewidoczny w testach kontraktowych.
   Dowod pomiarowy: petla wizualna 27.07.2026 (390 i 1440 px). */
.dokument a.dok-przycisk {
  color: var(--grafit);
}

.dokument a.dok-przycisk--wtorny,
.dokument a.dok-marka,
.dokument a.pominięcie {
  color: var(--kosc);
}

.dok-uklad {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 820px);
  gap: var(--s12);
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s12) var(--s6) var(--s16);
}

.dok-toc {
  position: sticky;
  top: calc(var(--s16) + var(--s6));
  align-self: start;
  max-height: calc(100vh - var(--s16) - var(--s12));
  padding: var(--s4);
  overflow-y: auto;
  background: var(--dok-tlo2);
  border: 1px solid var(--dok-bd);
  border-radius: var(--r2);
}

.dok-toc p {
  margin: 0 0 var(--s3);
  color: var(--dok-mut);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dok-toc ol {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dok-dostawa {
  margin: 0 0 var(--s6);
  padding: var(--s4);
  color: var(--dok-tekst);
  background: var(--dok-tlo2);
  border: 1px solid var(--dok-bd);
  border-left: var(--s1) solid var(--teal);
  border-radius: var(--r2);
  font-size: var(--small);
}

.dok-toc a {
  display: block;
  padding: var(--s2) var(--s3);
  color: var(--dok-mut);
  border-left: var(--r1) solid transparent;
  border-radius: var(--r1);
  font-size: var(--small);
  text-decoration: none;
}

.dok-toc a[aria-current="location"] {
  color: var(--dok-tekst);
  background: var(--dok-karta);
  border-left-color: var(--dok-ember);
  font-weight: 700;
}

.dok-main {
  min-width: 0;
}

.dok-tozsamosc {
  padding-bottom: var(--s8);
}

.dok-tagi,
.dok-identyfikatory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.dok-tag {
  display: inline-flex;
  align-items: center;
  min-height: var(--s6);
  padding: var(--s1) var(--s2);
  border: 1px solid currentcolor;
  border-radius: var(--r3);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dok-tag--ok {
  color: var(--dok-ok);
}

.dok-tag--sygnal,
.dok-tag--czesciowo {
  color: var(--dok-sygnal);
}

.dok-tag--brak {
  color: var(--dok-brak);
  border-style: dashed;
}

.dok-tag--nd {
  color: var(--dok-mut);
  border-style: dotted;
}

.dok-tag--przeszly {
  color: var(--dok-tekst);
}

.dok-tag--demo {
  color: var(--dok-info);
}

.dok-stan,
.dok-adres {
  color: var(--dok-mut);
  font-size: var(--small);
}

.dok-identyfikatory {
  color: var(--dok-mut);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--mono);
  font-variant-numeric: tabular-nums;
}

.dok-identyfikatory span {
  padding-right: var(--s3);
  border-right: 1px solid var(--dok-bd);
}

.dok-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  margin: 0 0 var(--s8);
  padding: var(--s4);
  color: var(--dok-mut);
  background: var(--dok-tlo2);
  border: 1px solid var(--dok-bd);
  border-radius: var(--r2);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--mono);
  font-variant-numeric: tabular-nums;
}

.dok-sekcja {
  padding: var(--s12) 0;
  border-top: 1px solid var(--dok-bd);
}

.dok-sekcja--pierwsza {
  padding-top: 0;
  border-top: 0;
}

.dok-liczba {
  margin: 0;
  color: var(--dok-sygnal);
  font-family: "Unbounded", sans-serif;
  font-size: var(--t3);
  font-weight: 700;
}

.dok-rozklad,
.dok-wyjasnienie,
.dok-licznik-osob {
  color: var(--dok-mut);
  font-size: var(--small);
}

/* Legenda koszykow rozkladu: same liczby sie nie tlumacza (M1 fali napraw). */
.dok-legenda {
  max-width: 68ch;
  color: var(--dok-mut);
  font-size: var(--small);
  line-height: 1.5;
}

.dok-legenda em {
  color: var(--dok-tekst);
  font-style: normal;
  font-weight: 600;
}

.dok-faktograficzny,
.dok-brak-danych {
  padding: var(--s4);
  background: var(--dok-tlo2);
  border: 1px solid var(--dok-bd);
  border-radius: var(--r2);
}

.dok-faktograficzny p {
  margin-bottom: 0;
}

.dok-sygnaly,
.dok-osoby,
.dok-zrodla {
  display: grid;
  gap: var(--s3);
}

.dok-sygnal {
  display: grid;
  grid-template-columns: var(--s8) minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s4);
  background: var(--dok-karta);
  border: 1px solid var(--dok-bd);
  border-left: var(--r1) solid var(--dok-sygnal);
  border-radius: var(--r2);
}

.dok-sygnal--ok {
  border-left-color: var(--dok-ok);
}

.dok-sygnal--brak {
  border-left-color: var(--dok-brak);
  border-left-style: dashed;
}

.dok-sygnal__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s8);
  height: var(--s8);
  color: var(--dok-tekst);
  border: 1px solid currentcolor;
  border-radius: var(--r1);
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
}

.dok-sygnal p {
  margin: 0 0 var(--s2);
}

.dok-klucz-wartosc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s8);
  margin: 0;
}

.dok-klucz-wartosc div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--dok-bd);
}

.dok-klucz-wartosc dt {
  color: var(--dok-mut);
  font-size: var(--small);
}

.dok-klucz-wartosc dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.dok-osoby,
.dok-zrodla {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dok-osoba,
.dok-zrodlo {
  min-width: 0;
  padding: var(--s4);
  background: var(--dok-karta);
  border: 1px solid var(--dok-bd);
  border-radius: var(--r2);
}

/* Nagłówek karty niesie tekst Z REJESTRU, więc jego długość jest nieprzewidywalna: nazwa
   wspólnika bywa pełną firmą spółki ("READY2GO SPÓŁKA Z OGRANICZONĄ ODPOWIEDZIALNOŚCIĄ"),
   a "ODPOWIEDZIALNOŚCIĄ" jednym słowem ma 299 px przy komórce 254 px na ekranie 320 px.
   Bez żadnej reguły łamania karta rozpychała grid i CAŁY dokument przewijał się w poziomie
   o 12 px (pomiar bisekcją, 28.07.2026). `anywhere` dla spójności z resztą arkusza (tak samo
   `.dok-klucz-wartosc dd`); zmierzono, że `break-word` daje tu ten sam wynik 0 px, bo karta
   ma `min-width: 0` i grid i tak nie respektuje jej min-content. Istotna jest OBECNOŚĆ
   reguły, nie wybór wariantu. */
.dok-osoba h3,
.dok-zrodlo h3 {
  overflow-wrap: anywhere;
}

.dok-osoba p,
.dok-zrodlo p {
  margin: 0 0 var(--s2);
}

.dok-osoba small,
.dok-zrodlo time {
  color: var(--dok-mut);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--mono);
}

.dok-os {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kolumna typu musi zmiescic najdluzsza etykiete jednym slowem — "SPRAWOZDANIE" ma 103 px
   przy 90 px minimum i wychodzila poza swoja komorke (pomiar: scrollWidth 103 vs clientWidth 99,
   petla wizualna 27.07.2026, 1440 px). Etykiety wielowyrazowe zawijaja sie same. */
.dok-os li {
  display: grid;
  grid-template-columns: minmax(100px, 0.4fr) minmax(112px, 0.35fr) minmax(0, 2fr);
  gap: var(--s3);
  padding-left: var(--s4);
  border-left: var(--r1) solid var(--dok-bd2);
}

.dok-os time,
.dok-os small {
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--mono);
  font-variant-numeric: tabular-nums;
}

.dok-os p {
  margin: 0;
}

.dok-typ {
  color: var(--dok-mut);
  font-size: var(--ui);
  text-transform: uppercase;
}

.dok-dalsze-wpisy {
  margin-top: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--dok-bd);
  border-radius: var(--r2);
}

.dok-dalsze-wpisy summary {
  cursor: pointer;
  font-weight: 700;
}

.dok-lata {
  display: grid;
  gap: var(--s2);
  padding-left: var(--s6);
}

.dok-zrodlo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: start;
}

.dok-zrodlo h3 {
  overflow-wrap: anywhere;
}

.dok-zrodlo time,
.dok-zrodlo p,
.dok-zrodlo a,
.dok-zrodlo form {
  grid-column: 1 / -1;
}

.dok-link-przycisk {
  padding: 0;
  color: var(--dok-ember);
  background: transparent;
  border: 0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: var(--s1);
  cursor: pointer;
}

.dok-proweniencja {
  margin: var(--s6) 0 0;
  padding-top: var(--s3);
  color: var(--dok-mut);
  border-top: 1px solid var(--dok-bd);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--mono);
  overflow-wrap: anywhere;
}

.dok-nota {
  display: grid;
  gap: var(--s3);
  padding-left: var(--s6);
}

.dok-most {
  margin-top: var(--s8);
  padding: var(--s8);
  background: var(--dok-tlo2);
  border: 1px solid var(--dok-bd2);
  border-radius: var(--r3);
}

.dok-most .dok-link {
  display: inline-flex;
  margin-left: var(--s4);
  font-size: var(--small);
}

.dok-stopka {
  padding: var(--s6);
  color: var(--tekst2);
  background: var(--grafit);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--mono);
  text-align: center;
}

.dokument a:focus-visible,
.dokument button:focus-visible,
.dokument summary:focus-visible {
  outline: var(--r1) solid var(--dok-info);
  outline-offset: var(--s1);
}

@media (max-width: 900px) {
  .dok-chrome {
    position: static;
    flex-wrap: wrap;
  }

  .dok-chrome form {
    margin-left: 0;
  }

  .dok-uklad {
    display: block;
    padding: var(--s6) var(--s4) var(--s12);
  }

  .dok-toc {
    position: sticky;
    z-index: 5;
    top: 0;
    max-height: none;
    margin: 0 calc(var(--s4) * -1) var(--s8);
    padding: var(--s3) var(--s4);
    overflow: hidden;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .dok-toc ol {
    display: flex;
    gap: var(--s2);
    padding-right: var(--s8);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .dok-toc li {
    flex: 0 0 auto;
  }

  .dok-toc a {
    border: 1px solid var(--dok-bd);
    border-radius: var(--r3);
  }

  .dok-toc a[aria-current="location"] {
    border-color: var(--dok-ember);
  }

  .dokument [id] {
    scroll-margin-top: calc(var(--s12) + var(--s8));
  }
}

@media (max-width: 600px) {
  .dok-przycisk {
    min-height: var(--s12);
  }

  .dok-klucz-wartosc,
  .dok-osoby,
  .dok-zrodla {
    grid-template-columns: minmax(0, 1fr);
  }

  .dok-klucz-wartosc div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }

  .dok-os li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s1);
  }

  .dok-most {
    padding: var(--s6);
  }

  .dok-most .dok-link {
    display: block;
    margin: var(--s4) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pominięcie {
    transition: none;
  }
}