/* =====================================================================
   Sprawdź, czy pracujesz w trybie przeciążenia — style
   Mobile-first. Tła docelowo podmieniane na obrazy z assets/.
   ===================================================================== */

:root{
  --ink:            #101e24; /* granat, jak na humanpartner.pl */
  --ink-2:          #52514e;
  --ink-muted:      #6b6a63; /* pierwotne #898781 miało kontrast 3,2-3,5:1 — poniżej normy AA (4,5:1) */
  --surface:        #fcfcfb;
  --plane:          #f4f5f7;
  --line:           #e3e5e9;
  --line-strong:    #c9ced6;

  /* Bursztyn, jak na humanpartner.pl — w trzech odcieniach, żeby zostać czytelnym:
     --accent do wypełnień (przycisk), --accent-hover do stanu najechania,
     --accent-dark do tekstu i obramowań (czysty bursztyn na tym tle nie ma dość kontrastu). */
  --accent:         #ffc551;
  --accent-hover:   #e0a020;
  --accent-dark:    #9c6a0b;
  --accent-wash:    #fff6e3;

  --cool-1:         #eef1f5;
  --cool-2:         #dde3ea;
  --night:          #101e24;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --pad: clamp(20px, 5vw, 44px);
  --maxw: 780px;
  --maxw-narrow: 620px;

  --t-fast: 180ms cubic-bezier(.4,0,.2,1);
  --t-slow: 620ms cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
html{ scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--plane);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

:where(button,a,[tabindex]):focus-visible{
  outline:3px solid var(--accent-dark); /* czysty bursztyn ma za mało kontrastu na obwódkę */
  outline-offset:3px;
  border-radius:4px;
}

/* ---------------- pasek górny ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(252,252,251,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px var(--pad);
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
}
/* Zegar w pasku: godzina z bieżącej sytuacji jako element główny, licznik decyzji
   pod nią jako drugorzędny. */
.topbar__time{
  margin:0; display:flex; flex-direction:column; gap:1px; white-space:nowrap;
}
.topbar__hour{
  font-size:16px; font-weight:700; color:var(--ink);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.1;
}
.topbar__hour:empty{ display:none; }
.topbar__step{
  margin:0; font-size:12px; font-weight:600; color:var(--ink-muted);
  letter-spacing:.02em; white-space:nowrap;
}

/* ---------------- licznik kosztu ---------------- */
.meter{ flex:1 1 180px; min-width:150px; }
.meter__label{
  display:block; font-size:11.5px; color:var(--accent-dark);   /* WSAD 19.6 — bursztyn szerzej */
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:5px;
}
.meter__track{
  height:8px; border-radius:99px; background:var(--cool-2);
  overflow:hidden;
}
.meter__fill{
  height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,#ffe1a8,var(--accent) 60%,var(--accent-dark));
  border-radius:99px;
  transition:transform var(--t-slow);
}
.meter--big{ margin:14px 0 30px; }
.meter--big .meter__track{ height:14px; }

@media (prefers-reduced-motion: reduce){
  .meter__fill{ transition:none; }
}

/* Licznik nieprzeczytanych w tle (WSAD 18.2 C) — ambientowy, róg ekranu, bez
   interakcji i bez animacji wjazdu: ma być zauważony kątem oka, nie przeczytany. */
.licznik-nieprzeczytanych{
  position:fixed; bottom:16px; right:16px; z-index:5;
  margin:0; font-size:11.5px; color:var(--ink-muted); opacity:.75;
  pointer-events:none;
}

/* Ekran wyniku buduje się w czterech krokach (WSAD 18.2 F) zamiast pojawić się
   naraz: zdanie zapłaty widać od razu (bez .result__stage), pasek rusza z
   opóźnieniem i wolniej niż zwykle (#resultFill), „Twój tryb" i reszta dochodzą
   w dwóch falach. Jedyny moment w demo, w którym widać cały koszt naraz —
   dotąd rósł po kawałku i nikt nie pamięta, od czego zaczynał. */
.result__stage{
  opacity:0; transform:translateY(8px);
  transition:opacity var(--t-slow), transform var(--t-slow);
}
.result__stage.is-in{ opacity:1; transform:none; }

#resultFill{ transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce){
  .result__stage{ opacity:1; transform:none; transition:none; }
  #resultFill{ transition:none; }
}

/* ---------------- ekrany ---------------- */
.stage{ position:relative; }

.screen{
  display:none;
  min-height:100dvh;
  padding:calc(var(--pad) * 1.1) 0 calc(var(--pad) * 1.6);
  animation:fade var(--t-fast) both;
}
.screen.is-active{ display:block; }
.screen:focus{ outline:none; }

@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .screen{ animation:none; } }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.wrap--narrow{ max-width:var(--maxw-narrow); }

.eyebrow{
  margin:0 0 8px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted);
}

/* ---------------- przyciski ---------------- */
.btn{
  font:inherit; font-weight:600;
  border-radius:var(--r-sm);
  padding:14px 22px;
  min-height:48px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn--primary{ background:var(--accent); color:var(--ink); } /* granatowy tekst na bursztynie, jak u nich */
.btn--primary:hover{ background:var(--accent-hover); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--ink-2); }
.btn:active{ transform:translateY(1px); }

.row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }

/* ---------------- EKRAN 1: hook ---------------- */
.screen--hook{
  position:relative; overflow:hidden;
  background:var(--night); /* tło, zanim wideo się załaduje */
  color:#eef2f8;
  display:none;
}
.screen--hook.is-active{ display:flex; align-items:center; }

.hook__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform-origin:68.8% 57%; /* środek ekranu laptopa w kadrze hook.mp4 */
  z-index:0;
}
/* Jaśniej niż na pierwszy rzut oka wydaje się bezpieczne: .70/.80 na spodzie
   to zmierzony próg, przy którym jasny tekst hooka trzyma AA (>5:1) nawet na
   najjaśniejszej klatce wideo (światło zza żaluzji). Wędrująca plama tylko
   DOKŁADA przyciemnienia, nigdy go nie odejmuje — więc nie da się zejść
   poniżej tego progu w trakcie animacji. */
.hook__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(16,30,36,.28) 100%),
    linear-gradient(180deg, rgba(16,30,36,.70), rgba(16,30,36,.80));
  background-size:220% 220%, 100% 100%;
  background-position:30% 40%, 0 0;
  animation:mgla 34s ease-in-out infinite alternate;
  z-index:1;
}
@keyframes mgla{
  from{ background-position:15% 20%, 0 0; }
  to{ background-position:82% 72%, 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .hook__bg{ display:none; }
  .hook__scrim{ animation:none; background-position:50% 50%, 0 0; }
  .screen--hook{ background:url("assets/hook-poster.jpg") center/cover no-repeat, var(--night); }
  .hook__kafel{ opacity:1; transform:none; animation:none; }
}

.hook{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  display:grid; gap:30px; width:100%;
}
@media (min-width:820px){
  .hook{ grid-template-columns:1fr; }
  .hook__copy{ max-width:42ch; }
}

/* Tytuł dwupoziomowy (WSAD 14.1): SZTUKA ODEJMOWANIA jest największym elementem
   ekranu — ma wybrzmieć — „wersja demo" siedzi bezpośrednio pod nim, wyszarzona. */
.hook__seria{
  margin:0 0 3px; font-size:clamp(26px,4.6vw,38px); font-weight:800;
  letter-spacing:.03em; line-height:1.05; color:#fff;
}
.hook__dopisek{
  margin:0 0 24px; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#8fa0b6;
}

/* Poziom 2 (WSAD 17.2): temat odcinka, pod tytułem serii. */
.hook__temat{ margin:0 0 22px; font-weight:700; font-size:19px; color:#eef2f8; max-width:44ch; }

/* Poziom 3 — trzy kafle zamiast dawnego bloku „Co Cię czeka"; skanowalne,
   każdy ma wytłuszczony fragment widoczny przy pierwszym spojrzeniu. Wchodzą
   kaskadą po 80 ms przy pierwszym wyświetleniu ekranu (WSAD 17.2). */
.hook__kafle{ display:grid; gap:10px; margin:0 0 26px; max-width:46ch; }
.hook__kafel{
  margin:0; padding:12px 16px; font-size:14.5px; line-height:1.5; color:#c6d1df;
  border:1px solid #24344a; border-radius:var(--r-md); background:#ffffff08;
  opacity:0; transform:translateY(8px);
  animation:kafelWjazd var(--t-slow) forwards;
}
.hook__kafel b{ color:var(--accent); }   /* WSAD 19.6 — bursztyn szerzej, na wartości z :root */
.hook__kafel:nth-child(1){ animation-delay:0ms; }
.hook__kafel:nth-child(2){ animation-delay:80ms; }
.hook__kafel:nth-child(3){ animation-delay:160ms; }
@keyframes kafelWjazd{ to{ opacity:1; transform:translateY(0); } }

/* Poziom 4, ciąg dalszy — jedna linia pod przyciskiem: zdjęcie obaw, nie
   przekonywanie, więc blisko akcji i cicho. */
.hook__zastrzezenie{ margin:14px 0 0; font-size:12.5px; color:#8fa0b6; max-width:44ch; }

/* ---------------- EKRAN WPROWADZAJĄCY: film ----------------
   Ta sama zasada co przy warstwie ruchu: gdy filmu nie ma, app.js w ogóle nie
   pokazuje tego ekranu. „Pomiń" jest widoczny od pierwszej klatki. */
.screen--intro{
  position:relative; overflow:hidden;
  background:var(--night); color:#eef2f8;
  display:none;
}
.screen--intro.is-active{ display:block; }

/* Pudełko sztywno 16:9 — wideo dostaje object-fit:contain, więc procenty
   geometrii z INTRO_NAKLADKI (zmierzone na klatkach filmu) trafiają dokładnie
   tam, gdzie trzeba, niezależnie od proporcji okna. Poza pudełkiem zostaje
   ciemne tło ekranu (listwy jak w kinie, nie usterka). `container-type` daje
   jednostki `cqw` nakładce niżej, żeby jej typografia skalowała się z kadrem
   wideo, a nie z oknem przeglądarki (WSAD 14.2). */
.intro__frame{
  position:absolute; inset:0; margin:auto;
  aspect-ratio:16/9;
  width:100%; height:100%;
  max-width:calc(100dvh * 16 / 9);
  max-height:calc(100dvw * 9 / 16);
  container-type:inline-size;
}
.intro__bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  z-index:0;
}
.intro__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(16,30,36,.30) 0%, rgba(16,30,36,.45) 55%, rgba(16,30,36,.82) 100%);
}
.intro__skip{
  position:absolute; top:16px; right:16px; z-index:3;
  background:rgba(16,30,36,.55); color:#eef2f8; border-color:#33465f;
  backdrop-filter:blur(4px);
}
.intro__skip:hover{ border-color:var(--accent); background:rgba(16,30,36,.72); }
.intro__panel{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) calc(var(--pad) * 1.4);
}
.intro__panel .lektor{ margin:0; }

/* Uwaga: przy prefers-reduced-motion app.js w ogóle nie pokazuje tego ekranu
   (odtworzIntro() wychodzi od razu do diagnozy), więc nie ma tu reguły ruchu —
   gdyby ekran kiedyś się pokazał, statyczna klatka postera jest dokładnie tym,
   czego to ustawienie oczekuje. */

/* ---- nakładki na ekranie w filmie (WSAD 14.2 / 14.5 / 14.6) ----
   Pusty, biały, świecący ekran laptopa w kadrze — cały interfejs jest rysowany
   tu, w granacie na przezroczystym tle (biel na bieli by zniknęła). Pozycja
   i rozmiar (.intro__ekran) ustawia app.js inline ze współrzędnych procentowych
   w INTRO_NAKLADKI.ekran. Żadnych przejść przy zmianie pozycji/zawartości —
   tylko show/hide — poza jednym wyjątkiem: łagodne pojawienie się całości. */
.intro__ekran{
  position:absolute; z-index:1;
  color:#101e24; overflow:hidden;
  /* clamp, nie samo cqw: na wąskim telefonie kadr 16:9 jest wąski w pikselach
     mimo pełnej szerokości ekranu (letterbox u góry i dołu), więc czyste %
     kadru zjeżdżałoby do nieczytelnych kilku pikseli. */
  font-size:clamp(11px, 1.5cqw, 20px); line-height:1.3;
  opacity:0;
}
.intro__ekran.is-on{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .intro__ekran{ transition:opacity 250ms ease; }
}

.intro__poczta{ position:absolute; inset:0 42% 0 0; }
.intro__poczta-head{
  display:flex; align-items:center; justify-content:space-between; gap:1cqw;
  padding-bottom:0.8cqw; margin-bottom:1.1cqw;
  border-bottom:1px solid rgba(16,30,36,.35);
  font-weight:700;
}
.intro__licznik{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.6cqw; padding:0.25cqw 0.7cqw;
  border-radius:99px; background:var(--accent-dark); color:#fff;
  font-size:clamp(10px, 1.3cqw, 17px); font-weight:700; font-variant-numeric:tabular-nums;
}
.intro__linia{ height:0.6cqw; margin-bottom:0.9cqw; border-radius:2px; background:rgba(16,30,36,.18); }
.intro__linia--krotka{ width:60%; }

.intro__kalendarz{
  position:absolute; right:0; top:0; width:40%; height:55%;
  display:flex; flex-direction:column; gap:0.8cqw;
}
.intro__blok{
  padding:0.7cqw 0.9cqw; font-size:clamp(9.5px, 1.25cqw, 16px);
  border:1px solid rgba(16,30,36,.35); border-radius:4px;
}
.intro__blok-godz{ display:block; font-weight:700; font-size:clamp(9.5px, 1.2cqw, 15px); margin-bottom:0.2cqw; }
.intro__blok--konflikt{ border-style:dashed; border-color:var(--accent-dark); color:var(--accent-dark); }

/* Zostaje w bezpiecznej strefie: dolne 45% ekranu jest czyste tylko na lewych
   60% szerokości (ramię z pierwszego planu zasłania resztę). */
.intro__czat{
  position:absolute; left:0; bottom:2%; width:56%; margin:0;
  padding:0.7cqw 1cqw; text-align:center;
  background:rgba(16,30,36,.05); border:1px solid rgba(16,30,36,.35);
  border-radius:99px; font-size:clamp(9px, 1.15cqw, 14px); font-weight:600;
}

/* Plansza tytułowa (14.6) — wyśrodkowana w całym KADRZE WIDEO, nie w prostokącie
   ekranu; granatowe litery, bez przesłony (świecący biały monitor sam nią jest). */
.intro__tytul{
  position:absolute; left:25%; width:50%; top:50%; transform:translateY(-50%);   /* nadpisywane z app.js: prostokąt ekranTytul (ujęcie 4) */
  z-index:1; text-align:center; color:#101e24;
  opacity:0;
}
.intro__tytul:not([hidden]){ display:flex; flex-direction:column; justify-content:center; transform:none; }
.intro__tytul.is-on{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .intro__tytul{ transition:opacity 400ms ease; }
}
.intro__tytul-seria{ margin:0 0 0.4cqw; font-size:clamp(15px, 3.4cqw, 34px); font-weight:800; letter-spacing:.02em; line-height:1.05; }
.intro__tytul-temat{ margin:0 0 0.5cqw; font-size:clamp(10px, 1.7cqw, 18px); font-weight:600; line-height:1.25; }
.intro__tytul-dopisek{ margin:0; font-size:clamp(8px, 1.15cqw, 12px); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#52514e; }

/* ---------------- EKRAN 2: diagnoza ---------------- */
.screen--quiz{
  background:
    linear-gradient(rgba(238,241,245,.55), rgba(238,241,245,.55)),
    url("assets/pytania.webp") center/cover no-repeat,
    var(--cool-1);
}
.q__title{
  font-size:clamp(21px,4.4vw,28px); line-height:1.3;
  margin:0 0 10px; letter-spacing:-.01em;
}
.q__lead{ margin:0 0 26px; color:var(--ink-2); text-shadow:0 1px 12px rgba(252,252,251,.6); }

/* Lekki, tekstowy przycisk cofania — pokazuje się tylko od drugiego pytania/sytuacji.
   Celowo nie wygląda jak .btn, żeby nie konkurował z główną decyzją na ekranie. */
.link-back{
  display:inline-flex; align-items:center; margin:0 0 14px;
  background:none; border:0; padding:4px 2px; min-height:auto;
  font:inherit; font-size:14px; font-weight:600; color:var(--ink-2);
  cursor:pointer;
}
.link-back:hover{ color:var(--ink); text-decoration:underline; }

.answers{ display:grid; gap:10px; }

.answer{
  text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:15px 17px;
  cursor:pointer; font:inherit;
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  min-height:48px;
}
.answer:hover{ border-color:var(--accent-dark); background:var(--accent-wash); }
.answer__label{ display:block; font-weight:650; margin-bottom:2px; }
.answer__desc{ display:block; font-size:14px; color:var(--ink-2); }

.q__progress{ margin:24px 0 0; font-size:13.5px; color:var(--ink-muted); }

/* WSAD 20.6 A / 21.1 — „Twoja liczba", piąte pytanie diagnozy. Pole liczbowe
   zamiast przycisków; „Dalej" jest tu właściwym odpowiednikiem kliknięcia
   odpowiedzi, bo liczby nie da się kliknąć. */
.diag-liczba__podpowiedz{ margin:0 0 14px; font-size:14px; color:var(--ink-2); }
.diag-liczba__input{
  display:block; width:100%; max-width:160px; font:inherit; font-size:22px;
  font-variant-numeric:tabular-nums; text-align:center;
  padding:13px 15px; margin:0 0 18px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
}
.diag-liczba__input:focus{ outline:2px solid var(--accent-dark); outline-offset:1px; }

/* WSAD 16.3 (13.09): treść pytań ma się mieścić w jasnym prostokącie ekranu
   laptopa z assets/quiz.mp4. Zmierzony środek tego prostokąta wypada na ~55%
   wysokości okna, nie na 50% — stąd padding-top:10dvh na .wrap: centrowanie
   flexem przesuwa środek treści o połowę siebie, czyli o 5% w dół, w sumie
   dokładnie tyle, ile trzeba.

   Wyłącznie pod body.has-bg: bez wideo (telefon, prefers-reduced-motion, brak
   pliku) tłem jest pytania.webp — ściana, nie monitor — i wtedy centrowanie
   byłoby regresem, nie poprawką; zostaje dotychczasowy układ od góry. */
body.has-bg .screen--quiz.is-active{
  display:flex; align-items:center;
}
body.has-bg .screen--quiz .wrap{
  padding-top:10dvh;
}

/* Dociśnięty rytm pionowy — tylko na tym ekranie, tylko pod wideo — żeby
   treść zmieściła się w monitorze z zapasem nawet przy najciaśniejszym
   typowym oknie (rachunek w docs/WSAD.md, 16.3). Sytuacji nie ruszamy. */
body.has-bg .screen--quiz .q__lead{ margin-bottom:18px; }
body.has-bg .screen--quiz .answers{ gap:8px; }
body.has-bg .screen--quiz .answer{ padding:12px 17px; }
body.has-bg .screen--quiz .q__progress{ margin-top:14px; }

/* ---------------- EKRAN: KALENDARZ (WSAD 20.6 B / 21.1) ----------------
   Między diagnozą a pierwszą sytuacją. Bez własnego tła wideo (jak s-wiedza) —
   app.js gasi warstwę ruchu przy wejściu, więc zawsze to samo statyczne tło. */
.screen--kalendarz{
  background:
    linear-gradient(rgba(238,241,245,.55), rgba(238,241,245,.55)),
    url("assets/pytania.webp") center/cover no-repeat,
    var(--cool-1);
}
.kalendarz{
  display:grid; gap:8px; margin:22px 0 18px;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
}
.kalendarz__blok{
  text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:13px 14px;
  cursor:pointer; font:inherit;
  transition:border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.kalendarz__blok:hover{ border-color:var(--accent-dark); background:var(--accent-wash); }
.kalendarz__blok[aria-pressed="true"]{
  border-color:var(--accent-dark); background:var(--accent-wash);
  box-shadow:inset 0 0 0 1px var(--accent-dark);
}
.kalendarz__blok.is-dimmed{ opacity:.35; }
.kalendarz__blok:disabled{ cursor:default; }
.kalendarz__czas{ display:block; font-size:12px; color:var(--ink-muted); margin-bottom:3px; }
.kalendarz__etykieta{ display:block; font-weight:650; font-size:14.5px; }
.kalendarz__zapowiedz{ margin:0 0 22px; font-size:14.5px; color:var(--ink-2); max-width:56ch; }   /* WSAD 22.2 */
.kalendarz__komentarz{
  margin:0 0 22px; padding:14px 16px;
  background:var(--accent-wash); border-left:3px solid var(--accent-dark);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15px; color:var(--ink);
}
@media (prefers-reduced-motion: reduce){
  .kalendarz__blok{ transition:none; }
}

/* ---------------- EKRANY 3–8: sytuacje ---------------- */
.screen--case{
  background:
    linear-gradient(rgba(244,245,247,.55), rgba(244,245,247,.55)),
    url("assets/pytania.webp") center/cover no-repeat,
    var(--plane);
}
.case__title{
  font-size:clamp(21px,4.4vw,28px); line-height:1.28;
  margin:0 0 10px; letter-spacing:-.01em;
}
.case__scene{ margin:0 0 22px; color:var(--ink-2); max-width:60ch; text-shadow:0 1px 12px rgba(252,252,251,.6); }

/* rekwizyty — makiety poczty i komunikatora firmowego. Więcej dzieje się tu (wpisy
   wpadają, powiadomienie wjeżdża, trzeba kliknąć) niż w opisie sceny. */
.prop{ margin:0 0 14px; }

.mock{
  position:relative;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 6px 24px rgba(16,30,36,.10);
}
.okno__pasek{
  display:flex; align-items:center; gap:12px;
  padding:9px 14px; background:#eef1f5; border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--ink-2); font-weight:600;
}
.okno__kropki{ display:inline-flex; gap:5px; }
.okno__kropki i{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); }
.okno__tytul{ flex:1; }

/* ---- poczta ---- */
.poczta__licznik{
  padding:2px 9px; border-radius:99px; background:var(--accent); color:var(--ink);
  font-size:11.5px; font-weight:700;
}
.poczta__cialo{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); min-height:230px; }
.poczta__lista{ list-style:none; margin:0; padding:0; border-right:1px solid var(--line); }
.poczta__lista li{ border-bottom:1px solid var(--line); }
.poczta__lista li[hidden]{ display:none; }
.poczta__wiersz{
  display:block; width:100%; text-align:left; font:inherit;
  background:none; border:0; border-left:3px solid transparent;
  padding:10px 12px; min-height:auto; cursor:pointer; color:var(--ink-2);
}
.poczta__od{ display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:650; }
.poczta__czas{ font-size:11.5px; font-weight:400; color:var(--ink-muted); }
.poczta__temat{
  display:block; margin-top:1px; font-size:12.5px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* wiadomość ze sceny: bursztynowy pasek + etykieta „Nowa" przez cały czas (WSAD 25.4);
   starsze po najechaniu/otwarciu — wyłącznie neutralna szarość, bursztyn jest zarezerwowany. */
.poczta__wiersz:hover{ background:#eef1f5; }
.poczta__wiersz.is-wybrana{ background:#e6e9ee; border-left-color:var(--ink-muted); color:var(--ink); }
.poczta__wiersz.is-scena{ border-left-color:var(--accent-dark); color:var(--ink); }
.poczta__wiersz.is-scena .poczta__temat{ font-weight:700; }
.poczta__wiersz.is-scena.is-nowa{ background:var(--accent-wash); animation:pocztaWpada 520ms cubic-bezier(.22,.61,.36,1) both; }
.poczta__wiersz.is-scena:not(.is-nowa){ background:#fff; }
.poczta__wiersz.is-scena:hover{ background:var(--accent-wash); }
.poczta__etykieta{
  display:inline-block; margin-top:4px; padding:1px 8px; border-radius:99px;
  background:var(--accent); color:var(--ink); font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.poczta__powrot{
  display:block; width:100%; text-align:left; margin:0 0 12px; padding:8px 12px; min-height:auto;
  font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer;
  background:var(--accent-wash); border:0; border-left:3px solid var(--accent-dark); border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.poczta__powrot:hover{ text-decoration:underline; }
.poczta__powrot strong{ color:var(--ink); }
@keyframes pocztaWpada{
  from{ opacity:0; transform:translateY(-14px); }
  to{ opacity:1; transform:none; }
}

.poczta__czytnik{ padding:14px 16px; }
.mock.ma-powiadomienie .poczta__czytnik{ padding-bottom:104px; }   /* WSAD 25.4: miejsce pod powiadomieniem */
.poczta__pusto{ margin:0; padding-top:56px; text-align:center; font-size:13.5px; color:var(--ink-muted); }
.poczta__wiadomosc{ animation:feedbackKarta var(--t-slow) both; }
.poczta__w-temat{ margin:0 0 4px; font-size:16px; line-height:1.3; }
.poczta__w-meta{ margin:0 0 12px; font-size:12.5px; color:var(--ink-muted); }
.poczta__w-meta strong{ color:var(--ink-2); }
.poczta__w-tresc{ margin:0 0 12px; font-size:14.5px; line-height:1.5; }
.poczta__zaproszenie{
  display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0;
  padding:12px 14px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:#fff; font-size:13.5px;
}
.poczta__zaproszenie dt{ color:var(--ink-muted); }
.poczta__zaproszenie dd{ margin:0; font-weight:600; }
.poczta__zaproszenie dd.is-pusty{ font-weight:400; color:var(--ink-muted); font-style:italic; }
.poczta__zalacznik{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:#fff;
}

/* powiadomienie „Nowa wiadomość" — wjeżdża w rogu okna poczty, klik otwiera wiadomość */
.poczta__powiadomienie{
  position:absolute; bottom:12px; right:12px; z-index:3;   /* WSAD 25.4: u dołu, żeby nie zasłaniać paska powrotu i nagłówka starszej wiadomości */
  display:grid; gap:2px; max-width:min(300px,calc(100% - 24px)); text-align:left;
  padding:11px 14px 12px; min-height:auto; cursor:pointer; font:inherit;
  background:var(--ink); color:#fff; border:0; border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(16,30,36,.38);
  animation:powiadomienieWjazd 520ms cubic-bezier(.22,.61,.36,1) both;
}
.poczta__powiadomienie[hidden]{ display:none; }
.poczta__powiadomienie:hover{ background:#1a2f38; }
.poczta__pow-etykieta{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.poczta__pow-od{ font-size:13.5px; font-weight:600; line-height:1.3; }
.poczta__pow-podpowiedz{ margin-top:3px; font-size:12px; color:#c6d1df; }
.poczta__pow-podpowiedz::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%;
  background:var(--accent); animation:pulsuj 1.3s ease-in-out infinite;
}
@keyframes powiadomienieWjazd{
  from{ opacity:0; transform:translateX(34px); }
  to{ opacity:1; transform:none; }
}
@keyframes pulsuj{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }

/* ---- komunikator firmowy ---- */
.kom__cialo{ display:grid; grid-template-columns:150px minmax(0,1fr); min-height:230px; }
.kom__boczny{
  list-style:none; margin:0; padding:10px 8px; background:#1d2f38; color:#aebfca;
  font-size:13px;
}
.kom__boczny li{ padding:6px 10px; border-radius:6px; }
.kom__boczny li.is-aktywny{ background:#2f4856; color:#fff; font-weight:650; }
.kom__okno{ display:flex; flex-direction:column; min-width:0; }
.kom__naglowek{ margin:0; padding:9px 14px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; }
.kom__lista{ padding:10px 14px 14px; display:grid; gap:10px; align-content:start; }
.kom__pisze{
  margin:0; font-size:12.5px; color:var(--ink-muted); font-style:italic;
  opacity:0; transition:opacity var(--t-fast);
}
.kom__pisze.is-widoczne{ opacity:1; }
.kom__wpis{ animation:pocztaWpada 480ms cubic-bezier(.22,.61,.36,1) both; }
.kom__meta{ margin:0 0 2px; font-size:12px; color:var(--ink-muted); }
.kom__meta strong{ color:var(--ink); font-size:13px; }
.kom__znacznik{
  margin-left:8px; padding:1px 7px; border-radius:99px; background:var(--accent);
  color:var(--ink); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.kom__tresc{
  margin:0; padding:9px 12px; display:inline-block; max-width:100%;
  background:#eef1f5; border-radius:2px 12px 12px 12px; font-size:14.5px; line-height:1.45;
}
.kom__wpis.is-nowa .kom__tresc{ background:var(--accent-wash); box-shadow:inset 0 0 0 1px var(--accent); }
.kom__liczby{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; max-width:360px;
  opacity:0; transform:translateY(6px); transition:opacity var(--t-slow), transform var(--t-slow);
}
.kom__liczby.is-widoczne{ opacity:1; transform:none; }
.kom__liczba{ padding:9px 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:#fff; text-align:center; }
.kom__liczba-nazwa{ display:block; font-size:12px; color:var(--ink-muted); }
.kom__liczba-wart{ display:block; font-size:28px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

@media (max-width:620px){
  .poczta__cialo{ grid-template-columns:1fr; }
  .poczta__lista{ border-right:0; border-bottom:1px solid var(--line); }
  .poczta__pusto{ padding-top:14px; }
  .poczta__powiadomienie{ bottom:10px; }
  .kom__cialo{ grid-template-columns:1fr; }
  .kom__boczny{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .poczta__wiersz.is-scena.is-nowa, .poczta__powiadomienie, .poczta__wiadomosc, .kom__wpis{ animation:none; }
  .poczta__pow-podpowiedz::after{ animation:none; }
  .kom__liczby{ opacity:1; transform:none; transition:none; }
  .kom__pisze{ transition:none; }
}

.doc__icon{
  width:44px; height:56px; border-radius:4px; background:#eef1f5;
  border:1px solid var(--line-strong); flex:none; position:relative;
}
.doc__icon::after{
  content:""; position:absolute; inset:10px 8px auto 8px; height:3px;
  background:var(--line-strong); box-shadow:0 8px 0 var(--line-strong), 0 16px 0 var(--line-strong);
}
.doc__name{ margin:0 0 3px; font-weight:650; }
.doc__meta{ margin:0; font-size:14px; color:var(--ink-2); }

.apps{ margin-top:6px; }
.apps__etykieta{ margin:0 0 6px; font-size:12px; color:var(--ink-muted); }
.apps__rzad{ display:flex; flex-wrap:wrap; gap:7px; }
.app{
  font-size:12px; padding:5px 10px; border-radius:99px;
  background:#eef1f5; border:1px solid var(--line); color:var(--ink-2);
}
.app--new{ background:var(--accent-wash); border-color:var(--accent-dark); color:var(--accent-dark); font-weight:650; }

/* Zwinięty opis sceny pod makietą — tak samo jak „Źródło" w informacji zwrotnej. */
.case__scena-btn{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 6px; padding:6px 2px; min-height:auto;
  background:none; border:0; font:inherit; font-size:13px; font-weight:600; color:var(--accent-dark); cursor:pointer;
}
.case__scena-btn:hover{ text-decoration:underline; }
.case__scena-btn::after{ content:"▾"; font-size:10px; transition:transform var(--t-fast); }
.case__scena-btn[aria-expanded="true"]::after{ transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce){ .case__scena-btn::after{ transition:none; } }
.case__scene[hidden]{ display:none; }
.case__scene{ white-space:pre-line; }   /* kwestia lektorki ma akapity (WSAD 24.2) */
.case__opis{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:0 0 6px; }
.case__opis .lektor[hidden]{ display:none; }
.case__opis .case__scena-btn{ margin:0; }
.lektor__tresc, .lektor-glos__tekst{ white-space:pre-line; }   /* akapity w kwestiach (WSAD 24.3) */

/* Etap 1: sama sytuacja, bez opcji — decyzja czeka za przyciskiem. */
.decyzja{ margin:26px 0 0; }
.decyzja__prompt{
  margin:0 0 14px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted);
}

/* Etap 2: opcje w pop-upie, zamykalnym bez wyboru — ten sam wzorzec
   co .feedback (tło+karta na środku), tylko z krzyżykiem zamiast
   jedynego wyjścia przez „Dalej". */
.opcje-modal[hidden]{ display:none; }
.opcje-modal{
  position:fixed; inset:0; z-index:54;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(16,30,36,.55);
  backdrop-filter:blur(2px);
  animation:feedbackTlo 220ms ease both;
}
.opcje-modal__card{
  position:relative;
  width:100%; max-width:560px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(16,30,36,.35);
  animation:feedbackKarta var(--t-slow) both;
  overflow:visible;   /* WSAD 13.2 — przycisk zamknięcia wystaje poza ramkę */
}
.opcje-modal__card:focus{ outline:none; }

/* Scroll żyje tu, nie na karcie — inaczej overflow:visible potrzebne dla
   wystającego przycisku obcinałoby też jego własną zawartość. */
.opcje-modal__scroll{
  max-height:min(600px,86vh); overflow-y:auto;
  padding:28px 24px 24px;
}

/* Poza ramką pop-upu, zaczepiony w prawym górnym rogu i wysunięty na zewnątrz
   o połowę własnej średnicy — żadną częścią nie nachodzi na obszar z opcjami,
   więc nie da się w niego trafić przypadkiem wybierając odpowiedź (WSAD 13.2).
   Bursztynowe koło, krzyżyk w granacie rysowany dwiema belkami — ten sam akcent
   co „Zaczynam", więc czyta się jako element interfejsu, nie jako ostrzeżenie. */
.opcje-modal__close{
  position:absolute; top:0; right:0;
  transform:translate(50%,-50%);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); border:0; border-radius:50%;
  min-height:auto; padding:0;
  box-shadow:0 8px 20px rgba(16,30,36,.3);
  cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast);
}
.opcje-modal__close:hover{ background:var(--accent-hover); }
.opcje-modal__close:active{ transform:translate(50%,-50%) translateY(1px); }
.opcje-modal__close::before,
.opcje-modal__close::after{
  content:''; position:absolute;
  width:16px; height:2.5px; border-radius:2px; background:var(--ink);
}
.opcje-modal__close::before{ transform:rotate(45deg); }
.opcje-modal__close::after{ transform:rotate(-45deg); }

@media (prefers-reduced-motion: reduce){
  .opcje-modal, .opcje-modal__card{ animation:none; }
}

/* WSAD 25.5 — powiadomienia przy czytaniu informacji zwrotnej. Trzy kształty, bo to trzy kanały:
   kalendarz i komunikator jak powiadomienie systemowe na komputerze (jasna karta, cień), SMS jak
   baner z telefonu (ciemniejszy, mocniej zaokrąglony; zielony — jedyne miejsce bez bursztynu,
   bo ma wyglądać jak telefon, nie jak demo). Stoi nad oknem informacji zwrotnej (z-index 60). */
.powiadomienie-kont{ position:fixed; z-index:60; pointer-events:none; }
.powiadomienie{
  pointer-events:auto; display:flex; align-items:flex-start; gap:12px;
  padding:13px 14px; background:#fff; border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:0 16px 40px rgba(16,30,36,.30);
  animation:powiadomienieWsuw 250ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes powiadomienieWsuw{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:none; } }
.powiadomienie__ikona{ flex:none; width:36px; height:36px; }
.powiadomienie__ikona--komunikator{
  position:relative; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#6b5be6; color:#fff; font-weight:700; font-size:16px;
}
.powiadomienie__ikona--komunikator i{
  position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid #6b5be6; box-sizing:border-box;
}
.powiadomienie__tekst{ flex:1; min-width:0; }
.powiadomienie__naglowek{ display:block; margin:0 0 2px; font-size:12px; letter-spacing:.02em; color:var(--ink-muted); }
.powiadomienie__tresc{ margin:0; font-size:14.5px; line-height:1.4; color:var(--ink); font-weight:600; }
.powiadomienie__zamknij{
  flex:none; position:relative; width:26px; height:26px; min-height:auto; padding:0;
  border:0; border-radius:50%; background:#eef1f5; cursor:pointer;
}
.powiadomienie__zamknij:hover{ background:var(--line-strong); }
.powiadomienie__zamknij::before, .powiadomienie__zamknij::after{
  content:''; position:absolute; left:6px; top:12px; width:14px; height:2px; border-radius:2px; background:var(--ink);
}
.powiadomienie__zamknij::before{ transform:rotate(45deg); }
.powiadomienie__zamknij::after{ transform:rotate(-45deg); }
.powiadomienie--sms{ background:#1d2227; border-color:#2c343b; border-radius:24px; padding:14px 16px; }
.powiadomienie--sms .powiadomienie__naglowek{ color:#aab4bd; }
.powiadomienie--sms .powiadomienie__tresc{ color:#fff; font-weight:500; }
.powiadomienie--sms .powiadomienie__zamknij{ background:#2f383f; }
.powiadomienie--sms .powiadomienie__zamknij:hover{ background:#3b464e; }
.powiadomienie--sms .powiadomienie__zamknij::before, .powiadomienie--sms .powiadomienie__zamknij::after{ background:#fff; }
/* karta powrotu — ta sama pozycja, ciszej: informacja, że przerwa i powrót kosztują */
.powiadomienie--powrot{
  background:var(--accent-wash); border:0; border-left:4px solid var(--accent-dark);
  border-radius:0 14px 14px 0; align-items:center;
}
.powiadomienie__powrot-tekst{ flex:1; margin:0; font-size:14px; line-height:1.45; color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .powiadomienie{ animation:none; }
}

/* opcje */
.options{ display:grid; gap:10px; margin-top:8px; }
.option{
  text-align:left; width:100%; font:inherit; color:var(--ink);
  -webkit-text-fill-color:currentColor;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px 18px; cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast);
  min-height:48px;
}
.option:hover{ border-color:var(--accent-dark); background:var(--accent-wash); }
.option[disabled]{
  cursor:default; color:var(--ink-2);
  background:var(--plane); border-color:var(--line);
}
.option.is-chosen{
  border-color:var(--accent-dark); background:var(--accent-wash);
  color:var(--ink); font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent-dark);
}

/* informacja zwrotna — pop-up na środku ekranu, zakrywa opcje pod spodem.
   Same opcje są już wtedy [disabled], więc nie da się ich dosięgnąć Tabem —
   to wystarcza jako lekka pułapka fokusu bez pełnego blokowania reszty strony. */
.feedback[hidden]{ display:none; } /* [hidden] w CSS bije zwykłą .feedback po specyficzności — bez tego atrybut hidden nic by nie znaczył, skoro .feedback sama ustawia display:flex */
/* WSAD 14.3: zakotwiczone górą, nie wyśrodkowane w pionie. Wyśrodkowany pop-up
   przesuwał całe okno w górę, gdy rozwinięcie źródła dokładało wysokość —
   tekst uciekał spod wzroku dokładnie wtedy, gdy ktoś zaczynał go czytać.
   Górna krawędź karty teraz stoi w miejscu; rozwinięcie rośnie w dół, a po
   przekroczeniu wysokości okna karta przewija się sama (patrz .feedback__card). */
/* Okno informacji zwrotnej stoi dokładnie tam, gdzie okno wyboru (.opcje-modal): ten sam
   środek w poziomie, ta sama szerokość (560) i ten sam środek w pionie. Pionowy środek
   ustawia app.js (ustawPozycjeFeedbacku) na starcie, a potem karta rośnie w dół — dzięki
   temu rozwinięcie źródła nie przesuwa „Dalej" (WSAD 23.3). */
.feedback{
  position:fixed; inset:0; z-index:55;
  display:flex; align-items:flex-start; justify-content:center;
  padding:20px;
  background:rgba(16,30,36,.55);
  backdrop-filter:blur(2px);
  animation:feedbackTlo 220ms ease both;
}
@keyframes feedbackTlo{ from{ opacity:0; } to{ opacity:1; } }

.feedback__card{
  width:100%; max-width:560px; max-height:min(560px,86vh); overflow-y:auto;
  padding:26px 24px;
  background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--accent-dark);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  box-shadow:0 24px 60px rgba(16,30,36,.35);
  animation:feedbackKarta var(--t-slow) both;
}
@keyframes feedbackKarta{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.feedback__card:focus{ outline:none; }

.feedback__text{ margin:0 0 14px; }

/* WSAD 20.1: źródło z powrotem jako rozwijane (odwraca 16.4) — panel urósł
   o kartę wiedzy i lektora, więc pełny opis od razu odpychał „Dalej" poza
   ekran. .feedback__src zostaje przy marginesie "jedna linia niżej" (dobry
   pomysł z 16.4), tylko teraz chowany, dopóki ktoś nie kliknie przycisku. */
.feedback__src-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin:12px 0 0; padding:6px 2px; min-height:auto;   /* WSAD 23.3: pod „Dalej", drugorzędny */
  background:none; border:0; font:inherit;
  font-size:13px; font-weight:600; color:var(--accent-dark);
  cursor:pointer;
}
.feedback__src-btn:hover{ text-decoration:underline; }
.feedback__src-btn::after{
  content:"▾"; font-size:10px; transition:transform var(--t-fast);
}
.feedback__src-btn[aria-expanded="true"]::after{ transform:rotate(180deg); }
.feedback__src{ margin:6px 0 0; font-size:13px; color:var(--ink-muted); white-space:pre-line; }

@media (prefers-reduced-motion: reduce){
  .feedback, .feedback__card{ animation:none; }
  .feedback__src-btn::after{ transition:none; }
}

/* ---------------- KARTA MERYTORYCZNA ----------------
   „Wychodzimy ze scenki": ciepłe tło zamiast chłodnego, nazwa mechanizmu jako
   nagłówek, źródło mniejszym stopniem na dole. Ma się odróżniać i od rekwizytu,
   i od pop-upu z informacją zwrotną — stąd pełne tło, bez chrome karty. */
.screen--wiedza{ background:var(--accent-wash); }
.wiedza__kicker{
  margin:0 0 10px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark);
}
.wiedza__title{
  font-size:clamp(23px,4.8vw,31px); line-height:1.2;
  margin:0 0 20px; letter-spacing:-.02em; color:var(--ink);
}
.wiedza__p{
  margin:0 0 16px; font-size:clamp(16px,2.4vw,18px);
  line-height:1.6; color:var(--ink); max-width:56ch;
}

/* „Do zabrania" (WSAD 13.1) — jedyny konkret do zastosowania jeszcze tego samego
   dnia, stąd wyróżnienie: karta jaśniejsza niż ciepłe tło wokół, mocna kreska
   z lewej w tym samym akcencie co reszta interfejsu. */
.wiedza__zabranie{
  margin:22px 0 4px; padding:16px 18px;
  background:var(--surface); border-left:4px solid var(--accent-dark);
  border-radius:0 var(--r-md) var(--r-md) 0;
  box-shadow:0 2px 10px rgba(11,11,11,.05);
  max-width:56ch;
}
.wiedza__zabranie-label{
  margin:0 0 6px; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark);
}
.wiedza__zabranie-tekst{ margin:0; font-size:15.5px; line-height:1.55; color:var(--ink); }

/* WSAD 22.2 — karta „Trzy tryby pracy": trzy kafle obok siebie, na telefonie jeden pod
   drugim; kafel pierwszego wyboru podświetlony bursztynem z etykietą. */
.wrap--szeroki{ max-width:var(--maxw); }
.tryby{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr); margin:4px 0 22px; }
@media (max-width:640px){ .tryby{ grid-template-columns:1fr; } }
.tryby__kafel{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-md); padding:16px 16px 14px;
}
.tryby__kafel.is-pierwszy{
  border-color:var(--accent-dark); background:#fff;
  box-shadow:inset 0 0 0 2px var(--accent), 0 6px 18px rgba(156,106,11,.18);
}
.tryby__etykieta{
  margin:0 0 6px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark);
}
.tryby__nazwa{ margin:0 0 6px; font-size:18px; font-weight:700; }
.tryby__opis{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.tryby__puenta{ font-weight:650; }
.tryby__druk{ margin:18px 0 0; font-size:13px; color:var(--ink-muted); max-width:60ch; }

.wiedza__src{ margin:20px 0 26px; font-size:13px; color:var(--ink-muted); max-width:56ch; }

/* ---------------- EKRAN CISZY (WSAD 18.2 E) ----------------
   Po sześciu minutach gęstości nagła cisza jest najmocniejszym bodźcem, choć
   nic się nie rusza — stąd sam ten jeden kontrast, bez ozdobników. */
.screen--cisza{
  background:var(--night); color:#eef2f8;
  display:none; align-items:center; justify-content:center; text-align:center;
}
.screen--cisza.is-active{ display:flex; }
.cisza__text{
  margin:0; padding:0 var(--pad); font-size:clamp(20px,4vw,28px); font-weight:700;
  opacity:0; animation:ciszaPojaw 900ms ease 200ms forwards;
}
@keyframes ciszaPojaw{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .cisza__text{ opacity:1; animation:none; }
}

/* ---------------- EKRAN 9: wynik ---------------- */
.screen--result{ background:var(--cool-1); }

/* Zapłata za strzelbę ze sceny 1 — nad paskiem kosztu, przed „Twój tryb".
   Mocniejsza typograficznie niż podpis paska pod nią: to jest puenta dnia. */
.result__payoff{
  margin:0 0 18px; padding-left:16px;
  border-left:3px solid var(--accent-dark);
  font-size:clamp(16px,2.6vw,18px); line-height:1.55; color:var(--ink);
  max-width:54ch;
}
.result__over{ margin:0; font-size:15px; color:var(--ink-2); }
.result__liczba{ margin:10px 0 0; font-size:15px; color:var(--ink-2); }   /* WSAD 20.6 A */
.result__title{ font-size:clamp(24px,5vw,32px); margin:0 0 10px; letter-spacing:-.02em; }

/* WSAD 20.4 — trzy poziomy zamiast siedmiu równorzędnych bloków. Poziom 1 (zapłata,
   pasek, tryb, lektor) zostaje pełną wagą, bez zmian. Nic nie znika — zmienia się
   tylko waga: poziom 2 nieco mniejszy z wyraźnym odstępem, poziom 3 to „drobny druk". */
.result__sub{ font-size:15px; margin:32px 0 10px; }
.recs{ margin:0; padding-left:20px; }
.recs li{ margin-bottom:8px; }

.result__level3{ margin-top:24px; }
.result__note{ margin:10px 0 0; font-size:13px; color:var(--ink-2); }

.cond{
  margin:0 0 8px; padding:10px 14px;
  background:var(--accent-wash); border-left:3px solid var(--accent-dark);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13px; color:var(--ink-2);
}
.cond:last-child{ margin-bottom:0; }

/* ---------------- EKRAN 10: karta ---------------- */
.screen--card{ background:var(--plane); }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,5vw,34px);
  box-shadow:0 10px 40px rgba(11,11,11,.07);
}
.card__kicker{
  margin:0 0 6px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark);
}
.card__title{ margin:0 0 6px; font-size:clamp(22px,4.6vw,28px); letter-spacing:-.02em; }
.card__sub{ margin:0 0 20px; color:var(--ink-2); font-size:15px; }
.card__list{ margin:0 0 20px; padding-left:22px; }
.card__list li{ margin-bottom:12px; }
.card__etykieta{
  margin:18px 0 4px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dark);
}
.card__tryb{ margin:0 0 6px; font-size:clamp(24px,5vw,30px); letter-spacing:-.02em; }
.card__przestane{ margin:0 0 20px; min-height:1.6em; border-bottom:1px solid var(--line-strong); }
.card__przestane.is-pusta{ color:var(--ink-muted); }

/* WSAD 20.6 D / 21.1 — jedno zdanie, które zabiera użytkownik; drukuje się na
   kartę (pobierzKarte() w app.js). Poza kartą, między nią a przyciskami. */
.card-zdanie{ margin:20px 0 0; }
.card-zdanie__etykieta{ display:block; margin:0 0 4px; font-weight:650; }
.card-zdanie__podpowiedz{ margin:0 0 10px; font-size:13.5px; color:var(--ink-muted); }
.card-zdanie__input{
  width:100%; font:inherit; font-size:16px;
  padding:13px 15px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
}
.card-zdanie__input:focus{ outline:2px solid var(--accent-dark); outline-offset:1px; }

/* ---------------- EKRAN 11: zamknięcie ---------------- */
.screen--end{
  background:linear-gradient(180deg,#e9edf2,#dfe5ec);
  /* docelowo: url("assets/end.webp") center/cover */
  display:none;
}
.screen--end.is-active{ display:flex; align-items:center; }
/* Blok modelu wydłużył ten ekran — na niższych oknach centrowanie w pionie
   chowałoby górę treści poza kadr, więc wtedy trzymamy się góry. */
@media (max-height:860px){
  .screen--end.is-active{ align-items:flex-start; }
}
/* Część 2 zamknięcia: model sześciu kroków prowadzi ekran, więc bez kreski i cichego stopnia. */
#s-end2 .end__model{ margin:0 0 26px; padding-top:0; border-top:0; }
#s-end2 .end__bridge{
  margin:0 0 16px; font-size:clamp(19px,4vw,25px); line-height:1.4;
  letter-spacing:-.01em; font-weight:650; color:var(--ink); max-width:30ch;
}
.end__lines p{
  font-size:clamp(19px,4vw,25px); line-height:1.4;
  margin:0 0 16px; letter-spacing:-.01em;
}
.end__lines p:last-child{ font-weight:650; }

/* WSAD 14.4: tekst lektorki prowadzi ekran, więc te trzy linie (i źródło pod
   nimi) schodzą do roli kontekstu — mniejszy stopień. Ostatnia linia (puenta)
   zostaje wyróżniona względem sąsiadek dzięki regule wyżej, tylko w mniejszej skali. */
.end__lines--kontekst p{
  font-size:15px; line-height:1.5;
  margin:0 0 10px; letter-spacing:normal;
  color:var(--ink-muted);
}
.end__lines--kontekst p:last-child{ color:var(--ink-2); }

.end__src{ margin:6px 0 22px; font-size:12.5px; color:var(--ink-muted); }
.end__brand{ margin:26px 0 0; font-size:12.5px; color:var(--ink-muted); }

/* Domknięcie modelem — most między puentą a przyciskami. Wizualnie ciszej:
   mniejszy stopień, wyszarzone, cienka kreska nad. Trzecia linia zamknięcia
   zostaje ostatnim mocnym zdaniem — ten blok jej nie przykrywa. */
.end__model{
  margin:24px 0 2px; padding-top:18px;
  border-top:1px solid var(--line-strong);
}
.end__bridge{
  margin:0 0 12px; font-size:15px; line-height:1.5;
  color:var(--ink-2); max-width:52ch;
}
/* Ten sam gest co „Przeczytaj" na pasku lektorki: pigułka z obwódką i strzałką. */
.end__toggle{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:14px; font-weight:600;
  min-height:44px; padding:9px 16px;
  border-radius:99px; cursor:pointer;
  background:transparent; border:1px solid var(--line-strong); color:var(--ink);
  transition:border-color var(--t-fast), background var(--t-fast);
}
.end__toggle:hover{ border-color:var(--accent-dark); background:var(--accent-wash); }
.end__toggle::after{
  content:"▾"; font-size:10px; transition:transform var(--t-fast);
}
.end__toggle[aria-expanded="true"]::after{ transform:rotate(180deg); }

.end__steps{
  margin:16px 0 0; padding-left:14px;
  border-left:2px solid var(--line);
}
.end__steps[hidden]{ display:none; }
.end__step{
  margin:0 0 12px; font-size:14.5px; line-height:1.55;
  color:var(--ink-2); max-width:58ch;
}
.end__step strong{ color:var(--ink); font-weight:650; }
.end__step em{ color:var(--accent-dark); font-style:italic; }

/* ---------------- toast ---------------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:12px 20px;
  border-radius:99px; font-size:14.5px; z-index:60;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}

/* =====================================================================
   RUCH — dodane po wpięciu materiałów z generatora.

   Trzy rzeczy, wszystkie opcjonalne i wszystkie wyłączane naraz przy
   prefers-reduced-motion oraz poniżej 820 px:

   1. warstwa .fx — ruchome tło pod pytaniami i sytuacjami
   2. .fx__notes  — dryfujące powiadomienia, gęstnieją razem z licznikiem
   3. wlot w skrzynkę po kliknięciu START

   Brak pliku wideo nie jest awarią: app.js nie zapala wtedy body.has-bg,
   więc zostaje tło z pytania.webp ustawione wyżej w tym pliku.
   ===================================================================== */

.fx{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; opacity:0;
  transition:opacity var(--t-slow);
}
.fx.is-on{ opacity:1; }

.fx__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 520ms ease;
}
.fx__video.is-ready{ opacity:1; }
.fx__video.is-fading{ opacity:0; }

/* .80 to zmierzony próg: niżej --ink-2 (opis sceny, lead pytania) spada pod
   4,5:1 na najciemniejszej klatce wideo. Ruch trzymamy delikatny — to
   ekrany do czytania, nie hero, więc mgła tylko ledwo dostrzegalnie dryfuje. */
.fx__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(244,245,247,.08) 100%),
    linear-gradient(180deg,
      rgba(244,245,247,.80) 0%,
      rgba(244,245,247,.82) 45%,
      rgba(244,245,247,.85) 100%);
  background-size:230% 230%, 100% 100%;
  background-position:35% 30%, 0 0;
  animation:mgla 40s ease-in-out infinite alternate;
}
body.has-bg .fx__scrim{ backdrop-filter:blur(2px); }
@media (prefers-reduced-motion: reduce){
  .fx__scrim{ animation:none; background-position:50% 50%, 0 0; }
}

/* Gdy wideo faktycznie gra, zdejmujemy statyczne tło z ekranów treściowych —
   inaczej pytania.webp przykryłoby film. */
body.has-bg .screen--quiz,
body.has-bg .screen--case{ background:transparent; }

/* ---- dryfujące powiadomienia ----
   Własna warstwa, nie część .fx: wideo musi zostać POD ekranami (żeby przesłona
   i tekst były na wierzchu), a kartki mają być NAD tłem ekranu, bo inaczej
   przykryłoby je nieprzezroczyste tło. Pasek postępu ma z-index 20 i zostaje wyżej. */
.fx__notes{
  position:fixed; inset:0; z-index:3;
  overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity var(--t-slow);
}
.fx__notes.is-on{ opacity:1; }

/* Kartka powiadomienia. Musi być czytelna jako kształt na jasnym tle, ale nigdy
   nie może konkurować z treścią — stąd rozmycie i wąski margines, w którym płynie. */
.note{
  position:absolute;
  width:clamp(130px,13vw,190px);
  padding:10px 12px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(16,30,36,.14);
  border-left:3px solid var(--accent);
  border-radius:var(--r-sm);
  box-shadow:0 10px 26px rgba(16,30,36,.13);
  filter:blur(1.1px);
  opacity:0;
  animation:dryf linear forwards;
}
.note__line{ height:6px; border-radius:3px; background:rgba(16,30,36,.20); margin-bottom:7px; }
.note__line:last-child{ width:58%; margin-bottom:0; }

@keyframes dryf{
  0%   { opacity:0;   transform:translateY(28px) scale(.98); }
  14%  { opacity:.85; }
  86%  { opacity:.7;  }
  100% { opacity:0;   transform:translateY(-120px) scale(1); }
}

/* ---- lekki najazd po kliknięciu START ----
   Celowo delikatny: wideo zostaje widoczne i ruchome przez całe przejście,
   kamera tylko trochę „podchodzi" do laptopa. Makieta skrzynki, która kiedyś
   rosła razem z nim (.hook__prop), skasowana w WSAD 16.1 — sam .hook__bg
   wystarcza do efektu. Zamiast twardego białego rozbłysku scena pod koniec
   płynnie znika, co maskuje podmianę ekranu bez ostrego cięcia. */
.screen--hook.is-diving{
  /* .screen ma animation:fade ... both, a wypełnienie „both" trzyma transform:none
     z ostatniej klatki na zawsze. Animacje CSS wygrywają w kaskadzie nawet ze stylem
     inline, więc bez tej linii wlot w ogóle się nie odpala. */
  animation:none;
  transition:opacity 400ms ease 550ms;
  opacity:0;
}
.screen--hook.is-diving .hook__bg{
  transition:transform 950ms cubic-bezier(.22,.61,.36,1);
  transform:scale(1.14);
}
.screen--hook.is-diving .hook__scrim{
  transition:opacity 950ms ease;
  opacity:.6; /* jaśniej niż w spoczynku — wideo ma być bardziej widoczne w trakcie najazdu */
}
.screen--hook.is-diving .hook__copy{
  transition:opacity 380ms ease, transform 380ms ease;
  opacity:0; transform:translateY(-26px);
}
body.is-diving{ overflow:hidden; }

/* ---- tło ekranu zamknięcia ---- */
.screen--end.has-photo{
  background-image:
    linear-gradient(180deg, rgba(233,237,242,.86), rgba(223,229,236,.92)),
    var(--end-img);
  background-size:cover;
  background-position:center;
}

/* ---- kiedy tego wszystkiego nie ma ----
   Telefon: wideo w tle kosztuje transfer i baterię, a ruch na małym ekranie
   i tak jest nieczytelny. Zostaje statyczne tło. */
@media (max-width:1100px){
  /* Poniżej tej szerokości nie ma marginesu, w którym kartki mogłyby płynąć
     bez wchodzenia pod tekst — więc ich nie ma wcale. */
  .fx__notes{ display:none; }
}
@media (max-width:820px){
  .fx__video{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .fx{ display:none; }
  .note{ animation:none; display:none; }
  .screen--hook.is-diving,
  .screen--hook.is-diving .hook__bg,
  .screen--hook.is-diving .hook__scrim{ transition:none; opacity:1; transform:none; }
  .screen--hook.is-diving .hook__copy{ transition:none; opacity:1; transform:none; }
}

/* =====================================================================
   LEKTORKA — kontrolka odtwarzania na ekranach 9 i 11 (ekran 1 stracił
   własną narrację w WSAD 12.1 — mówi ją film wprowadzający).

   Od WSAD 14.4 tekst kwestii NIE jest już schowany pod „Przeczytaj": to
   główna treść ekranu, widoczna od razu (.lektor-glos__tekst, osobno w HTML).
   `.lektor` tutaj to już tylko przycisk odtwarzania/zatrzymania — dyskretny,
   bo to wciąż zaproszenie do słuchania, nie odtwarzacz multimedialny.
   ===================================================================== */
.lektor-glos{ margin:18px 0 26px; }
.lektor-glos .lektor{ margin:0 0 12px; }
.lektor-glos__tekst{
  margin:0; font-size:17px; line-height:1.6;
  color:var(--ink); max-width:60ch;
}

.lektor{ margin:18px 0 26px; }
.lektor--ciemny{ margin-bottom:0; }

.lektor__rzad{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.lektor__graj,
.lektor__tekst{
  font:inherit; font-size:14px; font-weight:600;
  min-height:44px; padding:9px 16px 9px 14px;
  border-radius:99px; cursor:pointer;
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.lektor__graj:hover,
.lektor__tekst:hover{ border-color:var(--accent-dark); background:var(--accent-wash); }

/* Trójkącik odtwarzania rysowany w CSS — bez ikony, bez dodatkowego pliku. */
.lektor__graj::before{
  content:''; width:0; height:0;
  border-left:9px solid var(--accent-dark);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.lektor.is-playing .lektor__graj::before{
  /* w trakcie odtwarzania trójkąt zamienia się w pauzę */
  width:9px; height:12px; border:0;
  background:linear-gradient(90deg,
    var(--accent-dark) 0 3px, transparent 3px 6px, var(--accent-dark) 6px 9px);
}
.lektor.is-playing .lektor__graj{ border-color:var(--accent-dark); background:var(--accent-wash); }

.lektor__tresc{
  margin:12px 0 0;
  font-size:15px; line-height:1.6;
  color:var(--ink-2);
  max-width:60ch;
  padding-left:14px;
  border-left:2px solid var(--line);
}

/* Wariant na ciemnym ekranie startowym. */
.lektor--ciemny .lektor__graj,
.lektor--ciemny .lektor__tekst{ border-color:#33465f; color:#dbe4ef; }
.lektor--ciemny .lektor__graj:hover,
.lektor--ciemny .lektor__tekst:hover{ border-color:var(--accent); background:#ffffff12; }
.lektor--ciemny .lektor__graj::before{ border-left-color:var(--accent); }
.lektor--ciemny.is-playing .lektor__graj{ border-color:var(--accent); background:#ffffff12; }
.lektor--ciemny.is-playing .lektor__graj::before{
  background:linear-gradient(90deg,
    var(--accent) 0 3px, transparent 3px 6px, var(--accent) 6px 9px);
}
.lektor--ciemny .lektor__tresc{ color:#c6d1df; border-left-color:#33465f; }