/* WARSZTAT HVMBAK-ZAWARTOSC (05.10.2026): warianty przełączania części kursu na telefonie. Obowiązuje tylko, kiedy src/zawartosc.js
   ustawi <html data-uklad> (warianty 1–7, okno do 820 px). Bez tego atrybutu strona wygląda jak produkcja.
   Wspólne dla wszystkich wariantów: sekcja NIE jest już przyklejonym ekranem z drogą scrolla (było: 100 % + 3 × 70 % ekranu),
   tylko zwykłym kawałkiem strony o wysokości treści. Płyta stoi w tym samym miejscu i ma tę samą wielkość co na produkcji. */
@media(max-width:820px){
  html[data-uklad] .zaw{height:auto}
  html[data-uklad] .zaw-box{position:relative;height:auto;overflow:visible}
  /* płyta: ta sama pozycja co w przyklejonym ekranie (tam: środek pasa 47 % pod odstępem 9,5 %) */
  html[data-uklad] .zaw-lewa{height:auto;padding-top:max(calc(var(--vh,1svh)*8.25),calc(var(--vh,1svh)*28.25 - 36vw));touch-action:pan-y pinch-zoom}
  html[data-uklad] .zaw-prawa{height:auto}
  html[data-uklad] .zestaw{position:relative;inset:auto}
  html[data-uklad] .pokaz-stop{display:none}

  /* UPDATES pod przełączanymi częściami (1–5) i części w stosie (6–7): napis stoi od razu, teczki wypadają, kiedy część wejdzie w kadr */
  html[data-uklad] .zestaw.jeden,html[data-uklad=stos] .zestaw{opacity:1;transform:none;pointer-events:auto}
  html[data-uklad] .zestaw.jeden{padding-top:calc(var(--vh,1svh)*9.5);padding-bottom:calc(var(--vh,1svh)*13)}

  /* ── SCENA (1–5): trzy części w jednej komórce siatki, więc scena ma wysokość najwyższej (część 02 ma tytuł w dwóch liniach) i ster pod nią nie skacze */
  .pokaz{position:relative}
  .pokaz-scena{display:grid;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
  .pokaz-scena>.zestaw{grid-area:1/1}

  .pokaz-scena>.zestaw{justify-content:flex-end}       /* teczki wszystkich części na tej samej wysokości; tytuł w dwóch liniach rośnie w górę, w stronę płyty */

  /* strzałki jak w galerii (kwadrat szkła, grot włosowy bordo): po bokach teczek, na wysokości pierwszego rzędu (--strz-y z src/zawartosc.js),
     gdzie przy krawędziach ekranu jest pusto. Środek siatki odpada: lewa strzałka wchodziła tam na podpis „Promptowanie + Kanony”. Nie dokładają wysokości. */
  .pokaz-strz{position:absolute;z-index:6;top:calc(var(--strz-y,50%) - 19px);width:38px;height:38px;padding:0;
    border:1px solid rgba(13,13,13,.10);border-radius:0;background:rgba(255,255,255,.42);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 2px rgba(20,28,36,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:var(--bordo);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .5s ease,color .3s}
  .pokaz-strz.l{left:8px} .pokaz-strz.p{right:8px}
  .pokaz.wszedl .pokaz-strz{opacity:1;transition-delay:.5s,0s}
  .pokaz.wszedl .pokaz-strz:disabled{opacity:.4;color:rgba(13,13,13,.34);cursor:default;transition-delay:0s}
  .pokaz-strz svg{width:16px;height:16px;overflow:visible}
  .pokaz-strz path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
  .pokaz-strz:focus-visible,.pokaz-lista button:focus-visible{outline:1px solid var(--bordo);outline-offset:2px}
  /* podpowiedź bez automatu: grot prawej strzałki dwa razy drgnie po wejściu sekcji w kadr, dopóki nikt nie ruszył części ręką */
  html[data-w="1"] .pokaz.wszedl:not(.ruszony) .pokaz-strz.p svg,html[data-w="3"] .pokaz.wszedl:not(.ruszony) .pokaz-strz.p svg{animation:pokazTyk 1.5s cubic-bezier(.3,0,.3,1) 1.6s 2}
  @keyframes pokazTyk{0%,55%,100%{translate:0 0}28%{translate:4px 0}}

  /* licznik u góry (01 / 03 + kreski): kreski minionych części pełne, kreska bieżącej pełna albo, przy automacie, wypełnia się przez --t (5 s);
     zatrzymana klasą .stoi na sekcji (części nie widać, karta w tle, palec na teczkach) */
  html[data-uklad=miejsce] .zaw-licznik .kreski i,html[data-uklad=tor] .zaw-licznik .kreski i,html[data-uklad=lista] .zaw-licznik .kreski i{position:relative;overflow:hidden}
  .zaw-licznik .kreski i::after,.pokaz-lista i::after{content:'';position:absolute;inset:0;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .35s}
  .zaw-licznik .kreski i.byl::after,.zaw-licznik .kreski i.teraz::after{transform:scaleX(1)}
  .zaw.gra .zaw-licznik .kreski i.teraz::after,.zaw.gra .pokaz-lista .akt i::after{transform:scaleX(0);transition:none}
  .zaw.gra .zaw-licznik .kreski i.teraz.leci::after,.zaw.gra .pokaz-lista .akt.leci i::after{animation:pokazPasek var(--t,5s) linear forwards}
  .zaw.gra.stoi .leci::after,.zaw.gra.stoi .leci i::after{animation-play-state:paused}
  @keyframes pokazPasek{to{transform:scaleX(1)}}

  /* ── 3 / 4 NA BOKI: części stoją obok siebie (--k = odległość od aktywnej), cała scena idzie za palcem (--dx) */
  html[data-uklad=tor] .pokaz-scena{overflow:hidden}
  html[data-uklad=tor] .pokaz-scena>.zestaw{opacity:1;transform:none;pointer-events:auto;translate:calc(var(--k,0)*100% + var(--dx,0px)) 0;
    transition:translate .65s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
  html[data-uklad=tor] .pokaz.ciag .pokaz-scena>.zestaw{transition:none}
  html[data-uklad=tor] .pokaz:not(.wszedl) .pokaz-scena>.zestaw{opacity:0}
  html[data-uklad=tor] .pokaz.wszedl .zestaw .folder{opacity:1;transform:none}

  /* ── 5 LISTA: trzy tytuły naraz zamiast jednego dużego; aktywny czarny, pod nim włosowa kreska postępu */
  html[data-uklad=lista] .pokaz{padding-top:clamp(26px,calc(var(--vh,1svh)*10 - 22px),46px)}
  .pokaz-nr{margin:0 0 6px;text-align:center;font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;
    font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(13,13,13,.5)}
  .pokaz-nr b{font-weight:600}
  .pokaz-lista{display:flex;flex-direction:column;align-items:center}
  .pokaz-lista button{position:relative;padding:9px 2px 10px;border:0;border-radius:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
    font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;font-size:calc((100vw - 44px)/23.4);line-height:1;letter-spacing:0;
    white-space:nowrap;color:rgba(13,13,13,.22);transition:color .4s}
  .pokaz-lista button.akt{color:var(--black)}
  .pokaz-lista i{position:absolute;left:2px;right:2px;bottom:3px;height:1.5px;overflow:hidden;background:transparent;transition:background .4s}
  .pokaz-lista .akt i{background:rgba(13,13,13,.14)}
  .pokaz-lista .akt i::after{transform:scaleX(1)}
  html[data-uklad=lista] .pokaz-scena>.zestaw{padding-top:calc(var(--vh,1svh)*3.6)}
  html[data-uklad=lista] .pokaz-scena>.zestaw .nr,html[data-uklad=lista] .pokaz-scena>.zestaw h3{display:none}

  /* ── 6 / 7 STOS: cztery części jedna pod drugą */
  html[data-uklad=stos] .zestaw+.zestaw{padding-top:calc(var(--vh,1svh)*11)}
  /* 7 PŁYTA STOI: pas z płytą przyklejony, pod spodem to samo tło co na stronie (gradient .tlo) wygaszone u dołu, żeby części znikały miękko */
  html[data-plyta=stoi] .zaw-lewa{position:sticky;top:0;z-index:2;padding-bottom:18px;margin-bottom:var(--upd,0px)}
  html[data-plyta=stoi] .zaw-prawa{margin-top:calc(var(--upd,0px)*-1);z-index:1}   /* własna warstwa: bez niej przody teczek (z-index 5) wychodziły nad płytę */
  html[data-plyta=stoi] .zaw-lewa::before{content:'';position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 40%,#f7f8f9 0%,#eceef0 60%,#e2e5e8 100%) 0 0/100vw 100vh no-repeat;background-size:100vw 100dvh;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 52px),transparent);mask-image:linear-gradient(#000 calc(100% - 52px),transparent)}
}
@media(prefers-reduced-motion:reduce){ .pokaz-scena>.zestaw,.pokaz-strz{transition-duration:.01s!important;transition-delay:0s!important} .zaw-licznik .kreski i::after,.pokaz-lista i::after,.pokaz-strz svg{animation:none!important} }

/* ── PRZEŁĄCZNIK WARIANTÓW (tylko warsztat; src/przelacznik.js): pasek u dołu ekranu + rozwijana lista */
.wsz{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:9999;display:flex;align-items:stretch;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-stretch:normal;background:rgba(13,13,13,.92);color:#fff;
  box-shadow:0 6px 24px -8px rgba(13,13,13,.5);-webkit-user-select:none;user-select:none}
.wsz button{appearance:none;border:0;border-radius:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wsz .wsz-str{width:38px;height:34px;font-size:16px;line-height:1;color:rgba(255,255,255,.75)}
.wsz .wsz-nazwa{min-width:158px;padding:0 6px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  border-inline:1px solid rgba(255,255,255,.16)}
.wsz .wsz-nazwa b{font-weight:600;color:rgba(255,255,255,.5);margin-right:7px}
.wsz-lista{position:fixed;left:10px;right:10px;bottom:calc(52px + env(safe-area-inset-bottom,0px));z-index:9999;max-width:460px;margin-inline:auto;
  max-height:72vh;overflow:auto;background:rgba(13,13,13,.96);color:#fff;font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-stretch:normal;
  box-shadow:0 10px 40px -10px rgba(13,13,13,.6)}
.wsz-lista[hidden]{display:none}
.wsz-lista a{display:grid;grid-template-columns:26px 1fr;gap:2px 6px;padding:12px 14px;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.1)}
.wsz-lista a:first-child{border-top:0}
.wsz-lista a b{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:rgba(255,255,255,.45);padding-top:1px}
.wsz-lista a strong{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.wsz-lista a span{grid-column:2;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.66)}
.wsz-lista a.akt{background:rgba(255,255,255,.09)}