/* Widok 09 — Dla nerdów. Odwaga 3: spokój. Dokument specyfikacji: spis w kroju stałej szerokości
   jak drzewo katalogów (lewa, przyklejona), treść w wierszach „klucz → wartość" na włoskowych
   liniach, komentarze w stylu kodu. Tu krój mono jest kodem i danymi, nie kostiumem. */

.nerdzi {
  width: 100%; max-width: 74rem; margin-inline: auto;
  padding: calc(var(--logo-wys) + var(--o-6)) var(--margines) var(--o-8);
  display: grid; gap: var(--o-7);
}
.nd-glowa { display: grid; gap: var(--o-3); max-width: 44rem; }
.nd-glowa h1 { font-size: var(--r-6); font-weight: var(--w-rzezba); letter-spacing: -.035em; }
.nd-lead { margin: 0; color: var(--tekst-2); font-size: var(--r-lead); max-width: 48ch; }
.nd-powrot { display: inline-flex; align-items: center; gap: var(--o-1); width: fit-content; color: var(--tekst-2); text-decoration: none; font-size: var(--r-0-5); }
.nd-powrot:hover { color: var(--tekst); }

.nd-uklad { display: grid; gap: var(--o-6); }
@media (min-width: 960px) { .nd-uklad { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--o-8); } }
.nd-spis { align-self: start; }
@media (min-width: 960px) { .nd-spis { position: sticky; top: calc(var(--logo-wys) + var(--o-5)); } }
.nd-spis ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--o-1) var(--o-4); }
@media (min-width: 960px) { .nd-spis ol { display: grid; gap: 2px; padding-left: var(--o-3); border-left: 1px solid var(--linia); } }
.nd-spis a { display: inline-block; padding-block: 4px; color: var(--tekst-2); text-decoration: none; }
.nd-spis a:hover, .nd-spis a:focus-visible { color: var(--akcent); }

.nd-tresc { display: grid; gap: var(--o-8); min-width: 0; }
.nd-tresc > section { display: grid; gap: var(--o-4); scroll-margin-top: calc(var(--logo-wys) + var(--o-5)); }
.nd-tresc h2 { font-size: var(--r-4); font-weight: var(--w-naglowek); }
.nd-tresc > section > p { margin: 0; max-width: 64ch; color: var(--tekst-2); }

.nd-spec { margin: 0; display: grid; }
.nd-spec > div { display: grid; gap: var(--o-1) var(--o-6); padding: 11px 0; border-top: 1px solid var(--linia); }
.nd-spec > div:last-child { border-bottom: 1px solid var(--linia); }
@media (min-width: 700px) { .nd-spec > div { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.nd-spec dt { font-family: var(--kroj-mono); font-size: var(--r-0); color: var(--akcent); padding-top: 3px; }
.nd-spec dd { margin: 0; color: var(--tekst-2); font-size: var(--r-0-5); line-height: 1.6; }
.nerdzi code { font-family: var(--kroj-mono); font-size: .86em; color: var(--tekst); overflow-wrap: anywhere; }
.nd-komentarz { margin: 0; }
.nd-komentarz code { color: var(--tekst-3); font-size: var(--r-0); }

.nd-tabela { width: 100%; border-collapse: collapse; font-size: var(--r-0-5); }
.nd-tabela th, .nd-tabela td { padding: 11px 0; border-top: 1px solid var(--linia); text-align: left; vertical-align: top; }
.nd-tabela tr:last-child > * { border-bottom: 1px solid var(--linia); }
.nd-tabela th { font-weight: var(--w-tekst); color: var(--tekst-2); padding-right: var(--o-5); }
.nd-tabela td { font-family: var(--kroj-mono); font-size: var(--r-0); color: var(--tekst); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* zawijanie też przy 960–1023 px: obok spisu kolumna jest węższa niż tabela w jednej linii */
@media (max-width: 599px), (min-width: 960px) and (max-width: 1023px) { .nd-tabela td { white-space: normal; } }
.nd-przypis { margin: 0; font-size: var(--r-0); color: var(--tekst-3); }

.nd-90 { --tafla-szer: none; gap: var(--o-4) !important; }
.nd-90 p { margin: 0; max-width: 64ch; color: var(--tafla-tekst-2, var(--tekst-2)); }
.nd-90 h2 { color: var(--tafla-tekst, var(--tekst)); }