/* =====================================================================
   Mapa startu. Klasy z prefiksem .mapa-, kolory i odstępy ze zmiennych tokens.css.
   Zielony tylko dla "Gdy skończysz" i stanów ukończenia.
   ===================================================================== */
.mapa { display: grid; gap: var(--o-5); min-width: 0; }
.mapa > * { min-width: 0; }

/* ---------- hero ---------- */
.mapa-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: var(--o-6); align-items: center;
  padding: var(--o-6);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--akcent-tlo) 0%, transparent 55%),
    var(--karta);
}
.mapa-hero__tytul { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); margin-bottom: var(--o-3); outline: none; text-wrap: balance; }
.mapa-hero__opis { color: var(--tekst-2); max-width: 62ch; margin-bottom: var(--o-4); }
.mapa-hero__pierscien { display: grid; justify-items: center; gap: var(--o-2); text-align: center; }
.mapa-hero__podpis { display: grid; gap: 2px; font-size: var(--t-s); }
.mapa-hero__ile { color: var(--tekst-2); }

.mapa-pierscien { position: relative; width: 164px; height: 164px; display: grid; place-items: center; }
.mapa-pierscien svg { width: 100%; height: 100%; display: block; }
.mapa-pierscien__tlo { stroke: var(--ramka); }
.mapa-pierscien__wartosc { stroke: var(--akcent); transition: stroke-dashoffset 900ms cubic-bezier(.3, .7, .2, 1), stroke var(--ruch); }
.mapa-pierscien.is-gotowe .mapa-pierscien__wartosc { stroke: var(--ok); }
.mapa-pierscien__tekst { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.mapa-pierscien__tekst strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; }
.mapa-pierscien__tekst small { color: var(--tekst-2); font-weight: 600; font-size: var(--t-s); margin-top: 4px; }

/* ---------- pasek "Teraz" ---------- */
.mapa-teraz {
  display: flex; align-items: center; gap: var(--o-4); flex-wrap: wrap;
  background: var(--tekst); color: #fff; border-radius: var(--r-l); padding: var(--o-3) var(--o-3) var(--o-3) var(--o-4);
}
.mapa-teraz__znacznik {
  flex: none; background: var(--akcent); color: var(--na-akcencie); font-weight: 800; font-size: var(--t-xs);
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-pelny);
}
.mapa-teraz__tekst { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.mapa-teraz__tekst small { color: #cfc6b8; font-size: var(--t-xs); font-weight: 600; }
.mapa-teraz__tekst strong { font-size: var(--t-m); overflow-wrap: anywhere; }
.mapa-teraz__akcja { flex: none; }
.mapa-teraz .k-przycisk:focus-visible { outline-color: #fff; }
.mapa-teraz--gotowe { background: var(--ok-tlo); color: var(--ok); border: 1px solid #b9dcc7; }
.mapa-teraz--gotowe .mapa-teraz__znacznik { background: var(--ok); color: #fff; }
.mapa-teraz--gotowe .mapa-teraz__tekst small { color: var(--ok); }

/* ---------- wideo ---------- */
.mapa-wideo { padding: var(--o-4); }
.mapa-wideo__pusty {
  display: flex; align-items: center; justify-content: center; gap: var(--o-5); text-align: left; min-height: 150px;
  padding: var(--o-5); border: 2px dashed var(--ramka-mocna); border-radius: var(--r-m); background: var(--karta-2); color: var(--tekst-2);
}
.mapa-wideo__ikona { flex: none; color: var(--akcent-tekst); display: grid; }
.mapa-wideo__pusty strong { color: var(--tekst); font-size: var(--t-l); display: block; margin-bottom: 4px; }
.mapa-wideo__pusty p { margin: 0; }
.mapa-wideo__ramka { position: relative; max-width: 860px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: #000; }
.mapa-wideo__ramka iframe, .mapa-wideo__ramka video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- lejek ---------- */
.mapa-lejek h2 { margin-bottom: var(--o-4); }
.mapa-lejek__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--o-3); }
.mapa-kafel {
  position: relative; background: var(--karta-2); border: 1px solid var(--ramka); border-radius: var(--r-m); padding: var(--o-4) var(--o-3);
  display: grid; align-content: start; gap: var(--o-1);
}
.mapa-kafel:not(:last-child)::after {
  content: "›"; position: absolute; right: calc(var(--o-3) / -2 - 7px); top: 50%; transform: translateY(-50%);
  width: 14px; text-align: center; color: var(--akcent-tekst); font-weight: 800; font-size: 1.5rem; line-height: 1; z-index: 1;
}
.mapa-kafel__znak {
  width: 34px; height: 34px; border-radius: 50%; background: var(--akcent-tlo); color: var(--akcent-tekst);
  display: grid; place-items: center; font-weight: 800; font-size: var(--t-s); margin-bottom: var(--o-1);
}
.mapa-kafel__tytul { font-size: var(--t-m); margin: 0; }
.mapa-kafel__opis { margin: 0; font-size: var(--t-s); color: var(--tekst-2); }
.mapa-lejek__podsumowanie {
  margin: var(--o-4) 0 0; padding: var(--o-2) var(--o-4); border-left: 4px solid var(--akcent); color: var(--tekst-2); max-width: 80ch;
}

/* ---------- układ: oś i prawa kolumna ---------- */
.mapa-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--o-5); align-items: start; }
.mapa-os-kolumna { min-width: 0; }
.mapa-os__glowa { display: flex; align-items: center; justify-content: space-between; gap: var(--o-3); flex-wrap: wrap; margin-bottom: var(--o-3); }
.mapa-os__glowa h2 { margin: 0; }
.mapa-dodatki__tytul { margin-top: var(--o-6); margin-bottom: var(--o-1); }
.mapa-dodatki__opis { color: var(--tekst-2); font-size: var(--t-s); }

/* ---------- oś etapów ---------- */
.mapa-os { list-style: none; margin: 0; padding: 0; }
.mapa-etap { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--o-3); padding-bottom: var(--o-3); }
.mapa-etap:last-child { padding-bottom: 0; }
/* linia łącząca węzły (akcent: pełna za ukończonymi etapami, blada dalej) */
.mapa-etap::before {
  content: ""; position: absolute; left: 21px; top: 46px; bottom: -2px; width: 3px; border-radius: 2px;
  background: var(--akcent); opacity: 0.3;
}
.mapa-etap:last-child::before { display: none; }
.mapa-etap.is-ukonczony::before { opacity: 1; }
.mapa-wezel {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--karta); border: 2px solid var(--akcent); color: var(--akcent-tekst); font-weight: 800; font-size: var(--t-m);
  transition: background var(--ruch), color var(--ruch), border-color var(--ruch), box-shadow var(--ruch);
}
.mapa-etap.is-biezacy .mapa-wezel { background: var(--akcent); color: var(--na-akcencie); box-shadow: 0 0 0 6px var(--akcent-tlo); }
.mapa-etap.is-ukonczony .mapa-wezel { background: var(--ok); border-color: var(--ok); color: #fff; }

.mapa-etap__karta {
  background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-l); box-shadow: var(--cien-1); min-width: 0;
  transition: border-color var(--ruch), box-shadow var(--ruch);
}
.mapa-etap.is-biezacy .mapa-etap__karta { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent), var(--cien-2); }
.mapa-etap__h { margin: 0; font-size: inherit; }
.mapa-etap__przycisk {
  position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 28px; column-gap: var(--o-3); row-gap: 2px;
  text-align: left; background: none; border: 0; padding: var(--o-4) var(--o-4) var(--o-3); cursor: pointer; border-radius: var(--r-l);
  font-weight: 700; color: var(--tekst);
}
.mapa-etap__przycisk:hover { background: var(--karta-2); }
.mapa-etap__przycisk:focus-visible { outline-offset: -3px; }
.mapa-etap__gora { grid-column: 1; display: flex; align-items: center; gap: var(--o-2); flex-wrap: wrap; min-height: 24px; }
.mapa-etap__etykieta { font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akcent-tekst); }
.mapa-etap__tytul { grid-column: 1; font-size: var(--t-l); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.mapa-etap__dol { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--o-3); margin-top: var(--o-2); }
.mapa-licznik { font-size: var(--t-s); font-weight: 800; color: var(--tekst-2); font-variant-numeric: tabular-nums; min-width: 34px; }
.mapa-pasek { flex: 1; height: 8px; border-radius: var(--r-pelny); background: var(--ramka); overflow: hidden; }
.mapa-pasek__w { display: block; height: 100%; width: 0; background: var(--akcent); border-radius: inherit; transition: width 500ms ease, background var(--ruch); }
.mapa-etap.is-ukonczony .mapa-pasek__w { background: var(--ok); }
.mapa-etap__znak {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 28px; height: 28px; border-radius: 50%; background: var(--akcent-tlo);
  position: relative; transition: transform var(--ruch);
}
.mapa-etap__znak::before {
  content: ""; position: absolute; left: 9px; top: 8px; width: 7px; height: 7px; border: solid var(--akcent-tekst); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mapa-etap__przycisk[aria-expanded="true"] .mapa-etap__znak { transform: rotate(180deg); }

.mapa-etap__tresc { padding: 0 var(--o-4) var(--o-4); }
.mapa-etap__opis { color: var(--tekst-2); margin-bottom: var(--o-3); }

/* ---------- kroki i pola wyboru ---------- */
.mapa-kroki, .mapa-autod__lista { list-style: none; margin: 0 0 var(--o-4); padding: 0; display: grid; gap: var(--o-1); }
.mapa-krok {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--o-3);
  min-height: 48px; padding: 6px var(--o-3); border-radius: var(--r-m); background: var(--karta-2); border: 1px solid transparent;
  transition: background var(--ruch);
}
.mapa-krok:hover { background: var(--akcent-tlo); }
.mapa-krok__tytul { cursor: pointer; font-weight: 600; padding: 6px 0; overflow-wrap: anywhere; }
.mapa-krok__znacznik { margin-left: var(--o-2); vertical-align: 1px; font-weight: 600; }
.mapa-krok.is-zrobiony .mapa-krok__tytul { color: var(--tekst-2); text-decoration: line-through; text-decoration-color: var(--ramka-mocna); text-decoration-thickness: 2px; }
.mapa-krok__link {
  font-weight: 700; font-size: var(--t-s); white-space: nowrap; padding: 8px 4px; text-decoration: none;
}
.mapa-krok__link:hover { text-decoration: underline; }

.mapa-kratka {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--ramka-mocna); background: var(--karta); cursor: pointer; display: grid; place-content: center;
  transition: background var(--ruch), border-color var(--ruch);
}
.mapa-kratka::after {
  content: ""; width: 7px; height: 12px; border: solid var(--na-akcencie); border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0); margin-top: -2px; transition: transform var(--ruch);
}
.mapa-kratka:hover { border-color: var(--akcent); }
.mapa-kratka:checked { background: var(--akcent); border-color: var(--akcent); }
.mapa-kratka:checked::after { transform: rotate(45deg) scale(1); }

/* ---------- "Gdy skończysz" ---------- */
.mapa-gdy {
  margin: 0; padding: var(--o-3) var(--o-4); border-radius: var(--r-m); background: var(--ok-tlo); border: 1px solid #b9dcc7; color: #1f5636;
}
.mapa-gdy strong { color: var(--ok); }

/* ---------- ukończenie mapy ---------- */
.mapa-komplet {
  margin-top: var(--o-5); padding: var(--o-4) var(--o-5); border-radius: var(--r-l); background: var(--ok-tlo); border: 1px solid #b9dcc7; color: #1f5636;
}
.mapa-komplet strong { display: block; font-size: var(--t-l); color: var(--ok); margin-bottom: 4px; }
.mapa-komplet p { margin: 0; }
.mapa-reset { margin-top: var(--o-4); text-align: right; }

/* ---------- prawa kolumna ---------- */
.mapa-bok { display: grid; gap: var(--o-4); min-width: 0; }
.mapa-karta-bok { padding: var(--o-4) var(--o-5); }
.mapa-karta-bok h2 { font-size: var(--t-l); }
.mapa-gdzie, .mapa-punkty { list-style: none; margin: 0; padding: 0; }
.mapa-gdzie { display: grid; gap: 2px; margin: 0 calc(var(--o-2) * -1); }
.mapa-gdzie__link {
  display: grid; gap: 1px; padding: 8px var(--o-2); border-radius: var(--r-s); text-decoration: none; color: var(--tekst);
}
.mapa-gdzie__link strong { font-size: var(--t-s); }
.mapa-gdzie__link span { font-size: var(--t-xs); color: var(--tekst-2); }
.mapa-gdzie__link:hover { background: var(--akcent-tlo); color: var(--tekst); }
.mapa-punkty { display: grid; gap: var(--o-2); margin-bottom: var(--o-3); }
.mapa-punkty li { position: relative; padding-left: 22px; font-size: var(--t-s); }
.mapa-punkty li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
.mapa-podpowiedz { font-size: var(--t-s); background: var(--info-tlo); color: var(--info); border-radius: var(--r-m); padding: var(--o-3); }
.mapa-autod__opis { font-size: var(--t-s); color: var(--tekst-2); }
.mapa-krok--autod { grid-template-columns: auto minmax(0, 1fr); }
.mapa-autod__lista { margin-bottom: var(--o-3); }
.mapa-autod__podsumowanie { display: grid; gap: var(--o-2); }
.mapa-autod__wynik { margin: 0; font-weight: 800; }
.mapa-autod__komunikat { margin: 0; font-size: var(--t-s); color: var(--tekst-2); }
.mapa-autod__poprawy { display: grid; gap: var(--o-1); }
.mapa-autod__etykieta { margin: 0; font-size: var(--t-xs); font-weight: 700; color: var(--tekst-2); }
.mapa-autod__przyciski { display: flex; flex-wrap: wrap; gap: var(--o-2); }
.mapa-autod__etap { min-height: 32px; font: inherit; font-size: var(--t-xs); font-weight: 700; }

/* ---------- responsywność ---------- */
@media (max-width: 1060px) {
  .mapa-lejek__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mapa-kafel:not(:last-child)::after { display: none; }
}
@media (max-width: 960px) {
  .mapa-uklad { grid-template-columns: minmax(0, 1fr); }
  .mapa-bok { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .mapa-hero { grid-template-columns: minmax(0, 1fr); padding: var(--o-5); gap: var(--o-4); }
  .mapa-hero__pierscien { grid-row: 1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: var(--o-4); align-items: center; }
  .mapa-pierscien { width: 108px; height: 108px; }
  .mapa-pierscien__tekst strong { font-size: 1.45rem; }
  .mapa-pierscien__tekst small { font-size: var(--t-xs); }
}
@media (max-width: 600px) {
  .mapa { gap: var(--o-4); }
  .mapa-lejek__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa-wideo__pusty { flex-direction: column; text-align: center; gap: var(--o-3); }
  .mapa-etap { grid-template-columns: 32px minmax(0, 1fr); gap: var(--o-2); }
  .mapa-etap::before { left: 14px; top: 34px; }
  .mapa-wezel { width: 32px; height: 32px; font-size: var(--t-s); }
  .mapa-etap.is-biezacy .mapa-wezel { box-shadow: 0 0 0 4px var(--akcent-tlo); }
  .mapa-etap__przycisk { padding: var(--o-3) var(--o-3) var(--o-3); }
  .mapa-etap__tresc { padding: 0 var(--o-3) var(--o-3); }
  .mapa-krok { grid-template-columns: auto minmax(0, 1fr); row-gap: 0; padding: 6px var(--o-2); }
  .mapa-krok__link { grid-column: 2; justify-self: start; padding-top: 0; }
  .mapa-teraz { padding: var(--o-3); }
  .mapa-teraz__akcja { width: 100%; }
  .mapa-karta-bok { padding: var(--o-4); }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-pierscien__wartosc, .mapa-pasek__w, .mapa-kratka::after, .mapa-etap__znak, .mapa-wezel { transition: none !important; }
}