/* „W praktyce”: sześć sposobów pracy jako filmy w pełnym oknie Inskryptora AI (część ai-praktycy.html, skrypt-ai-praktycy.js).
   Bez kina (bez skryptu, ograniczony ruch, wąskie albo niskie okno) kroki stoją jeden pod drugim: opis, pod nim plansza z oknem. */
.aip{padding-bottom:var(--sek)}
.aip-zakl{display:none}
.aip-krok{scroll-margin-top:calc(var(--gora) + 24px)}
.aip-krok + .aip-krok{margin-top:clamp(72px, 9vw, 128px)}
.aip-opis{max-width:calc(1280px + 2 * var(--pad));margin:0 auto;padding:0 var(--pad);display:grid;gap:14px 56px}
.aip-opis .op-h{margin-bottom:0}
.aip-tx .tekst{font-size:17px;line-height:1.6;max-width:62ch}
.aip-tx .op-przyklad{margin-top:14px}
@media (min-width:900px){
  .aip-opis{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .aip-gl .op-h{margin-top:12px}
}

/* okno: szersze niż 16:9, bo kroki to jedna kolumna treści; rozmowy po lewej jak w programie */
.aip-okno{aspect-ratio:2 / 1}
.aip-tresc{grid-template-columns:16em minmax(0,1fr)}
.aip-folder svg{width:1.05em;height:1.05em;color:var(--zielen)}
.aip-okno .o-odp-tresc{padding:1.3em 2.4em 0}
.aip-okno .o-narz > span{transition:background-color .3s, border-color .3s}
.aip-okno .o-narz > span.f-klik{border-color:var(--zielen);background:var(--zielen-jasna)}

/* treść kroku w oknie: te same klasy co dawne karty .pv, w jednostkach okna (1em = 1 % jego szerokości) */
.aip-w{font-size:1.3em;line-height:1.5;max-width:56em}
.aip-w mark{color:inherit;background:var(--zielen-jasna);box-shadow:0 .12em 0 var(--zielen)}
.aip-w > * + *{margin-top:.6em}
.aip-w .o-pyt{font-size:.9em;margin-bottom:.4em}
.aip-zal{display:inline-flex;align-items:center;gap:.45em;font-weight:500}
.aip-zal svg{color:var(--popiel)}
.aip-w .pv-et{font-size:.68em;margin:1.3em 0 .35em}
.aip-w .pv-zd{font-size:1em}
.aip-w .pv-art{font-size:.72em;padding:0 .45em;border-radius:.35em;transition:background-color .35s, color .35s}
.aip-w .pv-dymek{font-size:.94em;padding:.8em 1em;border-radius:.65em;margin-top:.7em;max-width:46em;background:#fff;border:1px solid var(--linia);
  box-shadow:0 .9em 2.2em -.8em rgba(21,23,26,.28)}
.aip-w .pv-dymek-nr{font-size:.75em;margin-bottom:.25em}
.aip-w .pv-akt li{grid-template-columns:1.3em minmax(0,1fr) auto;gap:.7em;padding:.7em 0}
.aip-w .pv-akt li:first-child{padding-top:.2em}
.aip-w .pv-ok{width:1.3em;height:1.3em;transition:stroke-dashoffset .5s ease-out .2s}
.film-gra .pv-akt li:not(.f-jest) .pv-ok{stroke-dashoffset:24;transition:none}
.aip-w .pv-kropka{width:.65em;height:.65em;margin:.35em}
.aip-w .pv-w{grid-template-columns:2.4em minmax(0,1fr) auto;gap:.7em;padding:.7em 0}
.aip-w .pv-w .mono{font-size:.85em}
.aip-w .pv-wyr{margin:0 -1.2em;padding:.75em 1.2em}
.aip-w .pv-prop{font-size:.85em;margin-top:.3em}
.aip-w .pv-ryz{font-size:.75em;padding:.15em .65em}
.aip-w .pv-tabela{margin-top:1em}
.aip-w .pv-os{margin:.4em 0 0 .4em}
.aip-w .pv-os li{padding:0 0 .9em 1.2em}
.aip-w .pv-os li::before{left:-.45em;top:.3em;width:.8em;height:.8em}
.aip-w .pv-os span{font-size:.75em}
.aip-w .pv-filtry{gap:.5em;margin-bottom:.4em}
.aip-w .pv-orz{gap:.8em;padding:.75em 0}
.aip-w .pv-stare{margin:0 -1.2em;padding:.75em 1.2em}
.aip-w .pv-pliki{gap:.5em}
.aip-w .pv-pliki .o-btn svg{width:1.1em;height:1.1em;color:var(--popiel)}
.aip-w .pv-rozm li{padding:.5em 0}
.aip-w .o-btn{font-size:.8em}
/* projekt pisma: kartka na kamiennym tle, jak strona w podglądzie */
.aip-kartka{font-size:.95em;max-width:40em;margin:0 auto;padding:1.4em 2em 1.2em;background:#fff;border:1px solid var(--linia);border-radius:.3em;
  box-shadow:0 .6em 1.6em -.6em rgba(21,23,26,.18)}
.aip-w:has(.aip-kartka){background:var(--kamien);max-width:none;padding-bottom:1em}
.aip-kartka p + p{margin-top:.55em}
.aip-kartka .pv-tyt{font-size:1.2em}
.aip-kartka .pv-luka, .aip-kartka sup, .aip-kartka .pv-przyp{font-size:.75em}
.aip-kartka .pv-przyp{margin-top:1em !important;padding-top:.5em}
.aip-kartka .pv-dol{gap:.5em;margin-top:1em !important}

/* wąskie okno (telefon): bez szyny i rozmów, wyższe pismo; okno ma stałą wysokość 2:3, żeby wysuwane brzmienie nie przesuwało strony */
@container (max-width:720px){
  .aip-okno{font-size:2.7cqw;aspect-ratio:2 / 3;grid-template-columns:minmax(0,1fr)}
  .aip-okno .o-szyna, .aip-okno .o-rozm, .aip-okno .o-okr, .aip-okno .o-pr{display:none}
  .aip-okno .o-tytul{overflow:hidden;text-overflow:ellipsis}
  .aip-tresc{grid-template-columns:minmax(0,1fr)}
  .aip-okno .o-odp-tresc{padding:1em 1.1em 0}
  .aip-w{font-size:1.2em}
  .aip-w .pv-akt li{grid-template-columns:1.3em minmax(0,1fr)}
  .aip-w .pv-akt .pv-art{grid-column:2}
  .aip-okno .o-narz{flex-wrap:wrap}
  .aip-okno .o-narz > b{display:none}
  .aip-kartka{padding:1em 1.1em}
}

/* kino: zakładki, opis kroku i plansza z oknem wypełniają ekran pod belką; opisy i plansze leżą w tych samych polach */
.aip.kino .aip-kadr{--bok:clamp(12px, 2vw, 40px);height:calc(100vh - var(--gora));height:calc(100svh - var(--gora));
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"zakl" "opis" "scena";padding:0 var(--bok)}
.aip.kino .aip-krok{display:contents}
.aip.kino .aip-opis{grid-area:opis;max-width:none;margin:0;padding:6px 4px 14px;gap:6px 48px;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;
  opacity:0;visibility:hidden;transition:opacity .2s, visibility 0s .2s}
.aip.kino .aip-krok.akt > .aip-opis{opacity:1;visibility:visible;transition:opacity .4s .15s}
.aip.kino .op-nr{display:none}
.aip.kino .aip-gl .op-h{margin:0;font-size:clamp(24px, 2.1vw, 34px)}
.aip.kino .aip-tx .tekst{font-size:15px;line-height:1.5}
.aip.kino .aip-tx .op-przyklad{margin-top:8px;font-size:15px;line-height:1.45}
/* nowa plansza odsłania się kurtyną od prawej nad starą; stara stoi pod nią w stanie końcowym, więc okno nie bywa puste */
.aip.kino .scena{grid-area:scena;margin:0 0 16px;padding:0;display:grid;place-items:center;container-type:size;
  --widok:min(1440px, 88cqw, calc((100cqh - 40px) * 2));
  opacity:0;visibility:hidden;clip-path:inset(0 0 0 100%);transition:opacity 0s .7s, visibility 0s .7s, clip-path 0s .7s}
.aip.kino .aip-krok.akt > .scena{opacity:1;visibility:visible;clip-path:inset(0);z-index:1;transition:clip-path .7s cubic-bezier(.65,0,.2,1)}
.aip.kino .scena > .widok-rama{animation:none;opacity:1;transform:none;transition:none}
.aip.kino .aip-zakl{grid-area:zakl;display:flex;align-items:center;gap:2px;flex-wrap:nowrap;overflow:hidden}
.aip-zakl a{position:relative;display:flex;align-items:center;gap:8px;min-width:44px;padding:11px 8px 13px;text-decoration:none;font-size:13px;line-height:1.3;color:var(--popiel);white-space:nowrap}
.aip-zakl b{font-family:var(--mono);font-weight:500;font-size:12px}
.aip-zakl span{font-weight:500}
.aip-zakl i{position:absolute;left:8px;right:8px;bottom:5px;height:2px;border-radius:2px;background:var(--linia-ciemna);overflow:hidden}
.aip-zakl i::after{content:"";position:absolute;inset:0;background:var(--zielen);transform-origin:left;transform:scaleX(var(--p, 0));transition:transform var(--pt, 0ms) linear}
.aip-zakl a:hover, .aip-zakl a[aria-current]{color:var(--grafit)}
.aip-zakl a[aria-current] b{color:var(--zielen)}
.aip-zakl a:focus-visible, .aip-ster:focus-visible{outline:2px solid var(--zielen);outline-offset:2px;border-radius:6px}
.aip-ster{margin-left:auto;flex:none;height:34px;padding:0 16px;border:1px solid var(--linia-ciemna);border-radius:999px;background:var(--plotno);
  color:var(--grafit);font:500 14px/1 var(--sans);cursor:pointer}
@media (max-width:1279px){
  .aip-zakl span{display:none}
  .aip-zakl a[aria-current] span{display:inline}
}

/* ściągawka: panel programu z progami, które liczą się na oczach, i listą „Do ustalenia” */
.sc-panel{background:var(--panel);border:1px solid var(--linia);border-radius:14px;box-shadow:var(--cien);padding:18px 26px 22px}
.sc-panel .o-przel2{font-size:13px;max-width:260px;margin-bottom:18px}
.sc-panel .progi-t div{padding:16px 0}
.sc-panel .ustalic{margin-top:26px}
.narzedzia.czeka li{opacity:0;transform:translateY(24px)}
.narzedzia.czeka.widac li{opacity:1;transform:none;transition:opacity .6s ease, transform .8s cubic-bezier(.23,1,.32,1);transition-delay:calc(.1s + var(--i) * 110ms)}
@media (max-width:640px){.sc-panel{padding:14px 16px 16px}}
@media (prefers-reduced-motion: reduce){
  .aip.kino .aip-opis, .aip.kino .scena, .aip-w .pv-ok{transition:none}
}