/* =========================================================================
   WARSZTAT PLUS — warstwa graficzna układu (tylko dla wyglądu „Glina”)
   -------------------------------------------------------------------------
   Wczytywana PO uklad-warsztat.css, więc nadpisuje jego surowy szkielet.
   Sam układ zostaje ten sam, który wybrałeś — zmienia się to, jak wygląda:

     • panel warsztatu to osobna, zaokrąglona wyspa, a nie przyklejona
       do krawędzi kolumna z kreską;
     • zakładki siedzą we wklęsłym torze, a pod aktywną jeździ miękki
       znacznik (pozycję liczy warsztat-plus.js);
     • skrót w toku lekcji jest klockiem z barwną kostką i strzałką,
       którą widać, że się klika;
     • na telefonie szuflada ma zaokrąglony wierzch, gruby uchwyt
       i zakładki jako pastylki pod kciukiem.

   Wszystko selektorami z dwoma atrybutami (wyglad + uklad), żeby żadna
   z pozostałych wersji barwnych tego nie złapała.
   ========================================================================= */

/* =============================================== PASEK POSTĘPU CZYTANIA = */
/* Cienka wstążka na górze kolumny wykładu — pokazuje, ile lekcji za tobą.
   Szerokość ustawia skrypt w zmiennej --czytanie. */

html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-czytanie {
  position: fixed; left: 0; right: 0; top: 0;
  height: 4px; z-index: 80;
  pointer-events: none;
  background: transparent;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-czytanie > i {
  display: block; height: 100%;
  width: var(--czytanie, 0%);
  background: linear-gradient(90deg, var(--zielen), var(--blekit) 55%, var(--pomarancz));
  box-shadow: 0 0 14px rgba(15,163,127,.7);
  border-radius: 0 999px 999px 0;
  transition: width .12s linear;
}

/* ====================================================== PANEL — WYSPA == */

@media (min-width: 1100px) {
  html[data-wyglad="glina"][data-uklad="warsztat"] .uklad-lekcji.warsztat {
    gap: 0 18px !important;
    /* przy prawej krawędzi stoi pionowy pasek narzędzi kursu —
       wyspa panelu musi się przed nim zatrzymać, a nie wjechać pod spód */
    padding-right: 62px;
  }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-panel {
    top: calc(var(--gora-h) + 16px);
    height: calc(100dvh - var(--gora-h) - 32px);
    margin: 16px 0;
    padding: 12px;
    border-left: none;
    border-radius: var(--r-xl);
    /* panel to taca w barwie tła, a karty w środku zostają białe —
       inaczej biały dialog leżałby na białym panelu i wszystko się zlewa */
    background: var(--arkusz-2);
    box-shadow: var(--glina-l);
  }
  /* delikatna poświata za wyspą — panel „odrywa się” od tła */
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-panel::before {
    content: "";
    position: absolute; inset: 8% -6% -6% -6%;
    z-index: -1;
    border-radius: var(--r-xl);
    background: radial-gradient(60% 50% at 50% 100%, rgba(15,163,127,.30), transparent 70%);
    filter: blur(22px);
    pointer-events: none;
  }
}

/* =========================================================== ZAKŁADKI == */

html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladki {
  position: relative;
  flex: none;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: var(--arkusz-3);
  box-shadow: var(--glina-wklesle);
  overflow: visible;
}
/* miękki znacznik jeżdżący pod aktywną zakładką */
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-wskaznik {
  position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.40),
    inset 0 -8px 14px -8px rgba(0,0,0,.30),
    0 10px 20px -10px rgba(15,163,127,.95);
  transition: transform .34s cubic-bezier(.22,.9,.28,1), width .34s cubic-bezier(.22,.9,.28,1);
  pointer-events: none;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladka {
  position: relative; z-index: 1;
  min-height: 46px;
  padding: 8px 14px;
  border: none; border-bottom: none;
  border-radius: 999px;
  background: none;
  color: var(--tekst-2);
  font-family: var(--f-tekst);
  font-size: .82rem; font-weight: 800;
  letter-spacing: 0; text-transform: none;
  transition: color .18s, transform .12s;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladka:hover {
  background: none; color: var(--tekst); transform: translateY(-1px);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladka.tu {
  background: none; border-bottom-color: transparent;
  color: #fff;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-znak {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: currentColor;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-znak svg {
  width: 100%; height: 100%; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-ile {
  min-width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--lekcja-tlo);
  color: var(--zielen);
  font-size: .68rem; font-weight: 900;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladka.tu .wsz-ile {
  background: rgba(255,255,255,.28); color: #fff;
}

/* ====================================================== TREŚĆ PANELU === */

html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-tresc {
  padding: 16px 6px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--arkusz-3) transparent;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-tresc::-webkit-scrollbar { width: 10px; }
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-tresc::-webkit-scrollbar-thumb {
  border: 3px solid transparent; background-clip: content-box;
  border-radius: 999px; background-color: var(--arkusz-3);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-tresc::-webkit-scrollbar-thumb:hover { background-color: var(--linia-2); }

/* wejście sekcji po zmianie zakładki — krótkie, bez podskakiwania */
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-sekcja.widoczna {
  animation: glina-wejscie .26s cubic-bezier(.22,.9,.28,1);
}
@keyframes glina-wejscie {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-blysk {
  outline: none;
  animation: glina-blysk 1.2s ease;
}
@keyframes glina-blysk {
  0%, 100% { box-shadow: var(--glina-l); }
  30%      { box-shadow: var(--glina-l), 0 0 0 5px rgba(255,178,63,.75); }
}

/* ========================================== SKRÓT W TOKU WYKŁADU ======= */
/* Klocek, nie kreska: barwna kostka z ikoną, podpis i okrągła strzałka.
   Po najechaniu unosi się, po kliknięciu zapada — jak każdy element gliny. */

html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot {
  gap: 16px;
  margin: 30px 0;
  padding: 16px 18px;
  border: none;
  border-radius: var(--r-l);
  background: var(--arkusz);
  box-shadow: var(--glina);
  transition: transform .14s ease, box-shadow .14s ease;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot:hover {
  background: var(--arkusz);
  transform: translateY(-3px);
  box-shadow: var(--glina-l);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot:active {
  transform: translateY(1px);
  box-shadow: inset 0 3px 10px rgba(13,59,68,.22);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot-znak {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 16px;
  /* domyślnie Dialog — błękit, jak wszystko po szwedzku */
  background: linear-gradient(140deg, var(--blekit-2), var(--blekit));
  color: #fff;
  box-shadow: var(--glina-barwna);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot-znak svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
/* każda zakładka ma własny kolor kostki — Dialog fiolet, Czytanka mięta… */
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot[data-rodzaj="czytanka"] .wsz-skrot-znak {
  background: linear-gradient(140deg, #3ddca8, var(--zielen));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), 0 4px 10px -4px rgba(47,199,155,.6), 0 22px 40px -20px rgba(47,199,155,.7);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot[data-rodzaj="cwicz"] .wsz-skrot-znak {
  background: linear-gradient(140deg, #ffb23f, var(--pomarancz));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), 0 4px 10px -4px rgba(255,138,48,.6), 0 22px 40px -20px rgba(255,138,48,.7);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot[data-rodzaj="slowka"] .wsz-skrot-znak {
  background: linear-gradient(140deg, #ff7d6d, var(--czerwien));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), 0 4px 10px -4px rgba(232,72,60,.6), 0 22px 40px -20px rgba(232,72,60,.7);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot b {
  font-family: var(--f-tytul); font-weight: 900;
  font-size: 1rem; letter-spacing: -.01em; text-transform: none;
  color: var(--tekst);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot span span {
  font-size: .86rem; color: var(--tekst-3);
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot-strzalka {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-left: auto; flex: none;
  border-radius: 50%;
  background: var(--arkusz-3);
  color: var(--zielen);
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .16s ease, background .16s, color .16s;
}
html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot:hover .wsz-skrot-strzalka {
  background: linear-gradient(140deg, var(--blekit), var(--zielen));
  color: #fff;
  transform: translateX(4px);
}

/* ============================================= TELEFON — SZUFLADA ===== */

@media (max-width: 1099px) {
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-panel {
    border-top: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 0 10px calc(10px + env(safe-area-inset-bottom));
    background: var(--arkusz-2);
    box-shadow: 0 -10px 40px -12px rgba(13,59,68,.55), inset 0 2px 0 rgba(255,255,255,.9);
    /* szpara podglądu: uchwyt (26) + pasek zakładek (58) + oddech */
    transform: translateY(calc(100% - 100px - env(safe-area-inset-bottom)));
  }
  /* MUSI tu być: uklad-warsztat.css ma regułę o tej samej wadze, a że ten
     arkusz wczytuje się później, bez tego wygrywał mój stan zamknięty
     i szuflada nie wyjeżdżała — wjeżdżało samo przyciemnienie tła. */
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-panel.otwarty {
    transform: translateY(0);
  }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-uchwyt {
    height: 26px;
    background: none;
  }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-uchwyt::after {
    top: 10px; width: 52px; height: 6px; margin-left: -26px;
    background: var(--arkusz-3);
    box-shadow: inset 0 1px 2px rgba(13,59,68,.25);
  }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladki { margin-bottom: 4px; }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladka {
    min-height: 48px; flex: 1 1 0; font-size: .76rem;
  }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-tresc {
    max-height: calc(88dvh - 110px);
    padding: 12px 4px 20px;
  }
  /* przyciemnienie tła, gdy szuflada jest rozsunięta */
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zaslona {
    position: fixed; inset: 0; z-index: 59;
    background: rgba(8,35,42,.42);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s;
  }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-panel.otwarty ~ .wsz-zaslona,
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zaslona.widoczna {
    opacity: 1; pointer-events: auto;
  }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot { margin: 22px 0; padding: 14px; }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-skrot-znak { width: 40px; height: 40px; border-radius: 14px; }
}

@media (max-width: 420px) {
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-zakladka { padding: 8px 6px; }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-znak { width: 24px; height: 24px; }
}

/* ================================================= SZYNA — ZAOKRĄGLONA = */

@media (min-width: 900px) {
  html[data-wyglad="glina"][data-uklad="warsztat"] .szyna:hover,
  html[data-wyglad="glina"][data-uklad="warsztat"] .szyna:focus-within {
    box-shadow: 22px 0 50px -18px rgba(7,32,39,.85);
  }
}

/* ============================================ RUCH TYLKO NA ŻYCZENIE === */

@media (prefers-reduced-motion: reduce) {
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-wskaznik { transition: none; }
  html[data-wyglad="glina"][data-uklad="warsztat"] .wsz-sekcja.widoczna { animation: none; }
}