/* Wersja robocza new2: karta zakresu (.e031.obs-scope) jako lista rozwijana – wariant 14 z labu new2-zakres-rozwijany
   (Adrian 2026-10-28). Numery i cienka oś z lewej, lista na tle sekcji (bez białej karty), jedna kolumna, otwarta jedna pozycja
   naraz (<details name>, sandbox_zakres.py). Kolory tylko tokenami; ruch tylko transform, 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); }
}