/* ============================================================
   INTERACTIVE — 100% angielski system zmiennych
   ============================================================ */

/* — Layout treści z bocznym TOC (desktop) — */
/* Mobile-first: bez jawnego toru siatki kolumna implicytna dostawala max-content i .zx-prose
   (720px) rozpychalo ja poza ekran telefonu (audyt 2026-09-08: artykul 720px w oknie 375px). */
.zx-article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.zx-article-layout > * { min-width: 0; }
.zx-article-layout > .zx-aside { order: -1; }
@media (min-width: 1080px) {
  .zx-article-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .zx-article-layout > .zx-aside { order: 2; position: sticky; top: 90px; align-self: start; }
}

/* — Pasek postępu czytania — */
/* Pasek animowany przez transform: scaleX() (kompozytor), nie width (layout) — audyt 2026-09-08. */
.zx-progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 100%; z-index: 60;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform .1s linear; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .zx-progress { transition: none; } }

/* — Spis treści (TOC) — */
.zx-toc { font-size: .9rem; }
.zx-toc__title {
  font-family: var(--font-heading); font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: .6rem;
}
.zx-toc ol, .zx-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.zx-toc li a {
  display: block; padding: .35rem .8rem; color: var(--color-text-muted); text-decoration: none;
  border-left: 2px solid transparent; margin-left: -2px; line-height: 1.35; transition: all 0.2s ease;
}
.zx-toc li a:hover { color: var(--color-text-main); }
.zx-toc li a.is-active { color: var(--color-accent); border-left-color: var(--color-accent); font-weight: 700; }

/* Mobile TOC */
@media (max-width: 999px) {
  .zx-toc { position: static; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); margin-block: 1.5rem; }
  .zx-toc__title { display: none; }
  .zx-toc summary { cursor: pointer; list-style: none; padding: .9rem 1.1rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
  .zx-toc summary::-webkit-details-marker { display: none; }
  .zx-toc summary::after { content: "▾"; margin-left: auto; color: var(--color-accent); transition: transform .2s ease; }
  .zx-toc details[open] summary::after { transform: rotate(180deg); }
  .zx-toc ol, .zx-toc ul { border-left: 0; padding: 0 1.1rem 1rem; }
}
@media (min-width: 1080px) { .zx-toc summary { display: none; } .zx-toc ol, .zx-toc ul { display: block !important; } }

/* — Przycisk „do góry" — */
.zx-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 55; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-accent); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.zx-top[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .zx-top { transition: none; } }