/* Demo interaktywne DAPLO Crew „Komplet na wyjazd” (04.10.2026). Wzór: demo.css na daplo.agency (okno na cały ekran, plansza startowa,
   przyciemnienie z podświetlonym elementem i pulsującym punktem, dymek z jednym zdaniem, plansza z rozmową). Tylko tokeny --cr-*.
   Treść: narzedzia/gen_demo.py, zachowanie: assets/js/demo.js. Prefiksy: .tour (okno), .dm- (zajawka i elementy ekranów). */

/* ---------- zajawka na stronie: podgląd + „Zobaczcie demo” ---------- */
.dm-tz { align-items: center; row-gap: 28px; }
.dm-tz__t .sek-nagl { margin-bottom: 24px; }
.dm-podglad { position: relative; display: block; border-radius: var(--cr-r-m); color: inherit; text-decoration: none; cursor: pointer; }
.dm-podglad__mk { height: 360px; box-shadow: var(--cr-cien-duzy), 0 0 0 1px var(--cr-linia-2); pointer-events: none; }
.dm-podglad__mk .mk__ekran { gap: 12px; }
@media (max-width: 767px) { .dm-podglad__mk { height: 280px; } .dm-podglad__mk .mk__app { grid-template-columns: minmax(0, 1fr); } .dm-podglad__mk .mk__bok { display: none; } }
.dm-podglad__graj { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; border-radius: var(--cr-r-m); background: rgba(14, 26, 43, .30); transition: background-color var(--cr-ruch-szybki); }
.dm-podglad__kolo { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: var(--cr-sygnal-ciemne); color: var(--cr-glebia); box-shadow: var(--cr-cien); transition: transform var(--cr-ruch-szybki) var(--cr-krzywa); }
.dm-podglad__kolo .i { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.dm-podglad__napis { padding: 6px 14px; border-radius: 999px; background: var(--cr-tlo); font-size: .9375rem; font-weight: 600; color: var(--cr-marka); }
@media (hover: hover) and (pointer: fine) { .dm-podglad:hover .dm-podglad__graj { background: rgba(14, 26, 43, .40); } .dm-podglad:hover .dm-podglad__kolo { transform: scale(1.06); } }
.dm-podglad:focus-visible { outline: 3px solid var(--cr-fokus); outline-offset: 3px; }
.btn .i[href], .dm-tz__t .btn .i { width: 18px; height: 18px; }

/* ---------- okno ---------- */
html.tour-otwarty { overflow: hidden; }
.tour {
  width: min(1280px, calc(100vw - 32px)); height: min(860px, calc(100dvh - 32px)); max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: var(--cr-r-m); background: var(--cr-papier); color: var(--cr-tekst); overflow: clip;
}
.tour[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.tour::backdrop { background: rgba(8, 14, 26, .72); }
.tour__gora { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 24px; background: var(--cr-tlo); border-bottom: 1px solid var(--cr-linia); }
.tour__tytul { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--cr-marka); }
.tour__nazwa { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--cr-f-nagl); font-size: 1.125rem; }
.tour__et { flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-tekst-2); }
.tour__licznik { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--cr-tekst-2); white-space: nowrap; }
.tour__cta { flex: none; min-height: 40px; }
.tour__x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--cr-r-s); background: transparent; color: var(--cr-marka); cursor: pointer; }
.tour__x .i { width: 22px; height: 22px; }
.tour__x:hover { background: var(--cr-papier-2); }
.tour__postep { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.tour__postep i { display: block; width: 0; height: 100%; background: var(--cr-sygnal-ciemne); transition: width 300ms var(--cr-krzywa); }
.tour__cialo { position: relative; min-height: 0; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; }
.tour__scena { position: relative; width: 100%; max-width: 1100px; min-height: 0; height: min(100%, 620px); margin: 0 auto; align-self: center; }
.tour__mk { height: 100%; box-shadow: var(--cr-cien-duzy); }
.tour__mk .mk__app { grid-template-columns: 52px minmax(0, 1fr); }
.tour__stany { position: relative; min-width: 0; container-type: inline-size; }
.tour__stan { position: absolute; inset: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; overflow: clip; visibility: hidden; opacity: 0; transition: opacity 220ms var(--cr-krzywa), visibility 0s linear 220ms; }
.tour__stan.jest { visibility: visible; opacity: 1; transition: opacity 220ms var(--cr-krzywa); }
.tour__stan.jest .zn { --zn-t: 1; transition-delay: 350ms; }
.tour__stan.jest .nowe { animation: dm-wjazd 380ms var(--cr-krzywa) 120ms both; }

/* podświetlenie: przyciemnienie makiety wokół elementu, obramowanie w bursztynie */
.tour .tour-cel { position: relative; z-index: 2; border-radius: 8px; box-shadow: 0 0 0 4px var(--cr-tlo), 0 0 0 7px var(--cr-sygnal-ciemne), 0 0 0 200vmax rgba(14, 26, 43, .42); transition: box-shadow 200ms var(--cr-krzywa); }
.tour .tour-cel--klik { cursor: pointer; }
.tour .mk__tab:has(.tour-cel), .tour .mk__karta:has(.tour-cel) { overflow: visible; }
.tour__punkt { position: absolute; z-index: 6; display: none; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--cr-sygnal-ciemne); border: 3px solid var(--cr-tlo); pointer-events: none; animation: tour-puls 1.6s ease-out infinite; }
.tour__punkt.jest { display: block; }
@keyframes tour-puls { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .6); } 70% { box-shadow: 0 0 0 18px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }

/* dymek z opisem kroku: granat */
.tour__dymek { position: absolute; z-index: 7; display: none; gap: 10px; width: min(340px, calc(100% - 32px)); padding: 18px 18px 12px; border-radius: var(--cr-r-m); background: var(--cr-marka); color: var(--cr-biel); box-shadow: 0 18px 40px -12px rgba(8, 14, 26, .55); }
.tour__dymek.jest { display: grid; }
.tour__nr { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-na-glebi-2); }
.tour__tekst { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.tour__akcje { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour__wstecz { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: transparent; color: var(--cr-na-glebi-2); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.tour__wstecz .i { width: 16px; height: 16px; }
.tour__wstecz:hover { color: var(--cr-biel); }
.tour__wstecz:disabled { visibility: hidden; }
.tour__dalej { --btn-tlo: var(--cr-sygnal-ciemne); --btn-obrys: var(--cr-sygnal-ciemne); --btn-tekst: var(--cr-glebia); min-height: 44px; }

/* plansze: start i koniec */
.tour__plansza { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; padding: 24px; background: rgba(243, 246, 250, .95); }
.tour__plansza[hidden] { display: none; }
.tour__plansza > * { max-width: 620px; }
.tour__plansza h2 { margin: 8px 0 12px; font-size: var(--cr-t-h2); line-height: 1.1; color: var(--cr-marka); }
.tour__plansza .lead { margin: 0 0 24px; }
.tour__plansza > .btn { justify-self: start; }
.tour__plansza .btn .i { width: 18px; height: 18px; }
.tour__znowu { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--cr-marka); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tour__znowu .i { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .tour { width: 100vw; height: 100dvh; border-radius: 0; }
  .tour__gora { gap: 8px; padding: 8px 8px 8px 16px; }
  .tour__et, .tour__cta { display: none; }
  .tour__cialo { padding: 12px 12px 0; }
  .tour__scena { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100%; align-self: stretch; }
  .tour__mk .mk__app { grid-template-columns: minmax(0, 1fr); }
  .tour__mk .mk__bok { display: none; }
  .tour__stan { padding: 14px; gap: 10px; }
  .tour__dymek { position: relative; width: auto; margin: 12px -12px 0; border-radius: var(--cr-r-m) var(--cr-r-m) 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ---------- elementy ekranów ---------- */
.dm-osoba { display: grid; gap: 6px; }
.dm-tr { grid-template-columns: 30px minmax(0, 1fr) auto; }
.dm-tr > span:last-child { color: var(--cr-tekst-2); }
.dm-et { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cr-tekst-2); }
.dm-et .i { width: 14px; height: 14px; }
.dm-et .flaga { width: 20px; height: 13px; }
.dm-pola { display: grid; gap: 10px 16px; }
.dm-pole { display: grid; gap: 3px; font-size: 13.5px; min-width: 0; }
.dm-pole > span:first-child { font-size: 12.5px; color: var(--cr-tekst-2); }
.dm-pole b { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (min-width: 520px) { .dm-pola { grid-template-columns: 1fr 1fr; } .dm-pola--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dm-puste { display: block; width: min(70%, 220px); height: 14px; margin-top: 3px; border-radius: 4px; background: var(--cr-papier-2); border: 1px dashed var(--cr-szkielet); }
.dm-kraj { background: var(--cr-papier); }
.dm-tekst { margin: 0; font-size: 13.5px; line-height: 1.55; }
.dm-tekst--maly { font-size: 13px; color: var(--cr-tekst-2); }
.dm-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dm-spolki { display: grid; gap: 8px; }
.dm-spolka { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--cr-linia); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--cr-tekst-2); }
.dm-spolka .i { width: 16px; height: 16px; }
.dm-spolka--jest { border: 2px solid var(--cr-marka); color: var(--cr-marka); }
.dm-ok { background: var(--cr-st-zatw-tlo); color: var(--cr-st-zatw); }
.dm-ok::before { background: var(--cr-st-zatw); }
.dm-lista { display: grid; gap: 6px; }
.dm-dok { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--cr-linia-2); border-radius: 8px; font-size: 13.5px; }
.dm-dok .i { width: 17px; height: 17px; color: var(--cr-marka); }
.dm-dok em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: var(--cr-st-zatw-tlo); font-size: 12px; font-weight: 700; color: var(--cr-st-zatw); }
.dm-dok--skan em { background: var(--cr-st-czeka-tlo); color: var(--cr-st-czeka); }
.tour__stan.jest .dm-dok[style] { animation: dm-wjazd 320ms var(--cr-krzywa) both; animation-delay: calc(300ms + var(--i, 0) * 120ms); }
.dm-plik { display: flex; align-items: center; gap: 12px; }
.dm-plik__ik { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 8px; background: var(--cr-papier-2); color: var(--cr-marka); }
.dm-plik__ik .i { width: 20px; height: 20px; }
.dm-plik div { display: grid; }
.dm-plik b { font-size: 14px; font-weight: 600; }
.dm-plik div span { font-size: 13px; color: var(--cr-tekst-2); }
.dm-zakl { display: flex; gap: 18px; border-bottom: 1px solid var(--cr-linia-2); font-size: 13.5px; font-weight: 600; color: var(--cr-tekst-2); }
.dm-zakl span { padding-bottom: 8px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dm-zakl span.jest { color: var(--cr-marka); border-color: var(--cr-sygnal-ciemne); }
@keyframes dm-wjazd { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .tour__punkt { animation: none; box-shadow: 0 0 0 6px rgba(245, 158, 11, .35); }
  .tour__stan, .tour__stan.jest { transition: none; }
  .tour__stan.jest .nowe, .tour__stan.jest .dm-dok[style] { animation: none; }
}

/* (04.10 poprawka) wąskie okno, np. telefon: pola w dwóch kolumnach i ciaśniej, żeby cały ekran stanu mieścił się bez przewijania */
@container (max-width: 519px) {
  .dm-pola, .dm-pola--3 { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .dm-pole { font-size: 13px; }
  .dm-pole > span:first-child { font-size: 12px; }
  .dm-kraj { padding: 8px 10px; gap: 6px; }
  .tour__stan { gap: 10px; }
}
/* zabezpieczenie: stan da się przewinąć programowo (demo.js przewija do podświetlonego elementu, gdy ten wypada poza okno) */
.tour__stan { overflow: hidden; }
.tour__plansza h2 + .btn { margin-top: 16px; }
/* (04.10 poprawka) „Dalej” w dymku zawsze bursztynowy: ogólny styl najechania .btn przemalowywał go na granat (kolor dymka) */
.tour .tour__dalej, .tour .tour__dalej:focus-visible { --btn-tlo: var(--cr-sygnal-ciemne); --btn-obrys: var(--cr-sygnal-ciemne); --btn-tekst: var(--cr-glebia); background: var(--cr-sygnal-ciemne); border-color: var(--cr-sygnal-ciemne); color: var(--cr-glebia); }
.tour .tour__dalej:hover { --btn-tlo: var(--cr-sygnal-ciemne-hov); --btn-obrys: var(--cr-sygnal-ciemne-hov); background: var(--cr-sygnal-ciemne-hov); border-color: var(--cr-sygnal-ciemne-hov); color: var(--cr-glebia); }
.tour .tour__dalej:focus-visible { outline: 2px solid var(--cr-biel); outline-offset: 2px; }