/* Zakres jako lista rozwijana – nasz standard (wariant 14 z labu new2-zakres-rozwijany, Adrian 2026-10-28; wspólny
   komponent new od 2026-10-29): numery 01–… i cienka oś z lewej, lista na tle sekcji (bez białej karty), jedna kolumna,
   otwarta jedna pozycja naraz (<details name>, bez JS), pierwsza otwarta. Bez ptaszków (bez odhaczania z elementy.js:
   .e031.zr jest z niego wyłączona). Znacznik: zr_items() w build.py. Strony: Wsparcie pracowników, Transformacja IT,
   specjalizacje. Kolory tylko var(--…); ruch tylko przy prefers-reduced-motion: no-preference. */
.e031.zr .e031__card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.e031.zr .e031__list { grid-template-columns: minmax(0, 1fr); align-items: start; }
@container e031card (min-width: 520px) {
  .e031.zr .e031__list { grid-template-columns: minmax(0, 1fr); }
  .e031.zr .zr-s .e031__txt strong { white-space: nowrap; }
}
.e031.zr .e031__list > li { display: block; padding: 0; border-top: 0; }

.e031.zr .zr-d { position: relative; padding-left: 16px; }
.e031.zr .zr-d::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line-light); }
.e031.zr .zr-d::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--grad-accent);
  transform: scaleY(0); transform-origin: top; }
.e031.zr .zr-d[open]::after { transform: scaleY(1); }

.e031.zr .zr-s { display: grid; grid-template-columns: 30px minmax(0, 1fr) 26px; gap: 14px; align-items: center; min-height: 44px;
  padding: 12px 0; cursor: pointer; list-style: none; }
.e031.zr .zr-s::-webkit-details-marker { display: none; }
.e031.zr .zr-s:hover strong { color: var(--blue); }
.e031.zr .zr-s .e031__txt strong { margin: 0; }
.e031.zr .zr-n { display: grid; place-items: center; width: 30px; height: 30px; font: 600 13px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.e031.zr .zr-d[open] .zr-n { color: var(--orange); }

.e031.zr .zr-ico { position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: var(--blue); }
.e031.zr .zr-ico::before { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.e031.zr .zr-d[open] > .zr-s .zr-ico::before { margin-top: 4px; transform: rotate(-135deg); }

.e031.zr .zr-body { padding: 0 0 16px 44px; }
.e031.zr .zr-body p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }


@media (prefers-reduced-motion: no-preference) {
  .e031.zr .zr-d::after { transition: transform .25s var(--ease); }
  .e031.zr .zr-ico::before { transition: transform .2s var(--ease), margin .2s var(--ease); }
}

/* Wersja bez rozwijania (Adrian 2026-10-29): numery i oś, same hasła – listy jednolinijkowych haseł, gdzie rozwinięcie nie
   miałoby czego pokazać (Akwadrat „Czego biuro potrzebowało”, Google Ads „Klienci z Google”). Znacznik: zr_plain() w build.py. */
.zr-plain { display: grid; margin: 0; padding: 0; list-style: none; }
.zr-plain li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 10px 0 10px 16px; font-size: 16.5px; line-height: 1.55; color: var(--navy); }
.zr-plain li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line-light); }
.zr-plain .zr-n { font: 600 13px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.rt-dark .zr-plain li { color: var(--on-dark); }
.rt-dark .zr-plain li::before { background: var(--line-dark-2); }
.rt-dark .zr-plain .zr-n { color: var(--on-dark-2); }