@charset "utf-8";
/* =============================================================================
   Trening – aplikacje do ćwiczeń (/trening/*).

   Kolory i zaokrąglenia biorą się ze zmiennych motywu lokatora (--violet-*,
   --pink-*, --grad-cta, --radius…), więc ta sama aplikacja wygląda spójnie
   na obu szkołach bez ani jednej reguły `.t-asy`.

   Układ jest projektowany na telefon: jedno pytanie na ekran, klawiatura
   numeryczna przy odpowiedziach otwartych.

   SKALA JEST PŁYNNA I ZALEŻY OD WYSOKOŚCI OKNA. Rozmiary tekstu, wysokości
   pól i odstępy są zapisane jako `clamp(min, N dvh, max)`, więc aplikacja
   *dopasowuje się* do ekranu, zamiast być wszędzie mała: wiersz odpowiedzi
   ma 44 px przy oknie 520 px, 61 px przy 730 px i 68 px na komputerze,
   a pytanie odpowiednio 26 / 36 / 45 px. Każda taka reguła ma przed sobą
   wartość statyczną – to zapas dla przeglądarek bez `dvh`.

   Nie zastępować tego sztywnymi rozmiarami w media queries: wtedy aplikacja
   robi się mała także na dużym ekranie. Przy zmianie współczynników sprawdź,
   czy ekran pytania (najwyższy) nadal mieści się bez przewijania –
   sumę składników łatwo policzyć z tych samych `clamp`ów.

   Strona jest pełnoekranowa: dokładnie wysokość okna, bez suwaka. Od góry
   menu, pasek z tytułem i aplikacja wypełniająca resztę; stopki nie ma
   (pomija ją `hideFooter` w `footer.ejs`). Ten arkusz wczytuje się wyłącznie
   pod /trening/*, więc reguły na `html`/`body` nie dotykają reszty serwisu.
   ============================================================================= */

/* układ pełnoekranowy ------------------------------------------------------- */
html {
  height: 100%;
  overflow: hidden;   /* także w poziomie – inaczej cokolwiek szerszego od
                         ekranu przesuwa widok i wyśrodkowany tytuł wygląda
                         na zsunięty w bok */
  /* Tło płótna. Tam, gdzie `interactive-widget=resizes-content` nie działa
     (dziś głównie Safari), klawiatura potrafi przesunąć widok poniżej dolnej
     krawędzi strony. Ten sam odcień co scena sprawia, że nie widać wtedy
     pustego, białego pasa – widok po prostu się przedłuża. */
  background: var(--grad-tint);
}
body.tr-page {
  /* Wysokość: `100%` jako podstawa, `100dvh` tam, gdzie jest obsługiwane –
     uwzględnia chowające się paski przeglądarki, a na Androidzie także
     klawiaturę ekranową. Świadomie bez korygowania wysokości z JS-a:
     próba przypinania jej do `visualViewport` (z `window.scrollTo(0,0)`
     przy każdym zdarzeniu) wchodziła w konflikt z własnym przewijaniem
     Safari – ekran wystrzeliwał w górę i powoli opadał. Nie wracać do tego. */
  height: 100%;
  height: 100dvh;
  overflow: hidden;              /* strona się nie przewija – przewija się scena */
  overscroll-behavior: none;     /* bez „gumowego” odbijania i pull-to-refresh */
  display: flex;
  flex-direction: column;
}
body.tr-page > main {
  flex: 1;
  min-height: 0;                 /* bez tego flex nie pozwoli dziecku się skurczyć */
  display: flex;
  flex-direction: column;
}
/* Maskotki tu nie ma – `hideMascot` nie wpina jej skryptów. Ta reguła to
   zabezpieczenie, gdyby kolejna aplikacja Treningu zapomniała o tej fladze:
   pływający widżet zasłaniałby przycisk „Dalej”. */
body.tr-page .owl-widget { display: none; }

/* Pasek z tytułem – sama nazwa aplikacji, możliwie niski. Tło jak w dawnym
   nagłówku strony (`.page-hero`), czyli ciemny gradient lokatora. */
.tr-titlebar {
  flex: none;
  padding: 14px 20px;
  padding: clamp(7px, 1.7dvh, 16px) 20px;
  text-align: center;
  background: var(--grad-dark);
  color: var(--white);
}
.tr-titlebar h1 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-size: clamp(1.15rem, 3dvh, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  max-width: 100%;
  margin-inline: auto;
}

/* Scena: cały pozostały ekran i JEDYNE miejsce, które się przewija.
   Reszta układu celowo nie ma `min-height: 0` ani własnego `overflow` –
   to one pozwalały skurczyć treść poniżej jej wysokości i ucinały dolne
   przyciski. Tutaj treść zawsze zajmuje tyle, ile potrzebuje, a gdy nie
   mieści się na ekranie, przewija się scena (nie cała strona). */
.tr-stage {
  flex: 1;
  min-height: 0;
  background: var(--grad-tint);
  padding: 16px 0;
  padding: clamp(6px, 1.9dvh, 18px) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
/* `flex: 1 0 auto` – karta wypełnia ekran, gdy treści jest mało, i rośnie
   ponad ekran, gdy jest jej dużo (wtedy przewija się scena). Świadomie nie
   `min-height: 100%`: procent musiałby się rozwiązać względem wysokości
   ustalonej flexem, a to działa gorzej niż samo `flex-grow`. */
.tr-stage-inner { flex: 1 0 auto; display: flex; }

/* karta aplikacji ---------------------------------------------------------- */
.tr-app {
  flex: 1;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--violet-100);
  padding: 24px 28px;
  padding: clamp(12px, 2.7dvh, 26px) 28px;
}
/* Widoczny ekran wypełnia kartę, ale nigdy nie kurczy się poniżej swojej
   treści (`flex-shrink: 0`) – inaczej dolne przyciski zostają ucięte. */
.tr-screen { flex: 1 0 auto; }
/* Start i treść pytania są wyśrodkowane pionowo, gdy jest zapas miejsca.
   `safe center` to nie ozdobnik: przy zwykłym `center` przeglądarka ucina
   górę treści, która nie mieści się w kontenerze (np. telefon w poziomie),
   i nie da się do niej doscrollować. Starsze silniki pominą drugą deklarację
   i zostaną przy zwykłym wyśrodkowaniu. */
.tr-start { display: flex; flex-direction: column; justify-content: center; }
.tr-start { justify-content: safe center; }
/* ekran pytania: pasek postępu przyklejony u góry, reszta na środku */
.tr-quiz { display: flex; flex-direction: column; }
.tr-quiz-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tr-quiz-body { justify-content: safe center; }
/* Atrybut `hidden` musi wygrać z display:grid/block ustawionym niżej –
   inaczej oba warianty odpowiedzi (A–D i pole tekstowe) widać naraz. */
.tr-app[hidden],
.tr-app [hidden] { display: none !important; }
.tr-h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-size: clamp(1.2rem, 3.2dvh, 1.7rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
}
.tr-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.94rem;
  font-size: clamp(0.84rem, 2.1dvh, 1rem);
  margin-bottom: 26px;
  margin-bottom: clamp(14px, 3dvh, 28px);
}

/* ekran startowy: wybór poziomu -------------------------------------------- */
.tr-levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  gap: clamp(8px, 1.7dvh, 15px);
  margin-bottom: 26px;
  margin-bottom: clamp(14px, 3dvh, 28px);
}
.tr-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 14px;
  padding: clamp(11px, 2.6dvh, 24px) 14px;
  border: 2px solid var(--violet-100);
  border-radius: var(--radius-sm);
  background: var(--violet-50);
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tr-level.on {
  border-color: var(--violet-500);
  background: var(--white);
  box-shadow: var(--shadow-glow);
}
.tr-level-ico { font-size: 1.8rem; font-size: clamp(1.35rem, 3.6dvh, 2rem); line-height: 1; }
.tr-level-name { font-weight: 800; font-size: 1.02rem; font-size: clamp(0.95rem, 2.3dvh, 1.1rem); }
.tr-level-desc { font-size: 0.85rem; font-size: clamp(0.78rem, 1.9dvh, 0.9rem); color: var(--muted); text-align: center; }
.tr-start-btn { display: block; width: 100%; }

/* Dłuższa lista trybów (kategorie słówek) – kompaktowe wiersze zamiast
   kafelków, w jednej kolumnie, żeby długie nazwy się mieściły. */
/* Dwie kolumny (dziedziczone z `.tr-levels`) – osiem kategorii w jednej
   kolumnie nie mieściło się na ekranie. Na telefonie blok `max-width: 560px`
   niżej i tak wraca do jednej kolumny. */
.tr-levels-many .tr-level {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: clamp(8px, 1.7dvh, 13px) 14px;
  text-align: left;
}
.tr-levels-many .tr-level-ico { font-size: clamp(1.1rem, 2.6dvh, 1.4rem); }
.tr-levels-many .tr-level-name { min-width: 0; overflow-wrap: anywhere; }
.tr-levels-many .tr-level-desc { text-align: right; margin-left: auto; }

/* Przyciski w karcie są szerokie na całą jej szerokość, więc `scale(1.03)`
   z `.btn-pink:hover` wypychał je poza obrys karty – w pionie budziło to suwak
   w `.tr-screen`, w poziomie przycisk wychodził poza padding. Zostaje samo
   uniesienie, które przy pełnej szerokości i tak czyta się lepiej. */


/* pasek postępu i licznik --------------------------------------------------- */
.tr-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.86rem;
  font-size: clamp(0.76rem, 1.8dvh, 0.9rem);
  color: var(--muted);
  margin-bottom: 10px;
  margin-bottom: clamp(4px, 1.1dvh, 10px);
}
.tr-bar b { color: var(--ink); }
.tr-bar-level {
  font-weight: 700;
  color: var(--violet-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
}
.tr-progress {
  flex: none;
  height: 6px;
  border-radius: 999px;
  background: var(--violet-100);
  overflow: hidden;
  margin-bottom: 20px;
  margin-bottom: clamp(7px, 2dvh, 20px);
}
.tr-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--grad-cta);
  transition: width 0.35s ease;
}

/* pytanie ------------------------------------------------------------------ */
.tr-question {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-size: clamp(1.45rem, 5dvh, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
  margin-bottom: clamp(9px, 2dvh, 22px);
  font-variant-numeric: tabular-nums;
}

/* odpowiedzi A–D ----------------------------------------------------------- */
.tr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-choices { gap: clamp(6px, 1.35dvh, 12px); }
.tr-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  min-height: clamp(44px, 8.4dvh, 68px);
  padding: 0 16px;
  border: 2px solid var(--violet-100);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.tr-choice:disabled { cursor: default; }
.tr-choice-key {
  flex: none;
  width: 30px;
  height: 30px;
  width: clamp(26px, 4dvh, 32px);
  height: clamp(26px, 4dvh, 32px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--violet-100);
  color: var(--violet-600);
  font-size: 0.82rem;
  font-weight: 800;
}
.tr-choice-val {
  font-size: 1.4rem;
  font-size: clamp(1.15rem, 2.8dvh, 1.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Warianty słowne (słówka) są dłuższe od liczb: jedna kolumna, tekst do lewej
   i możliwość zawinięcia. Bez tego długie tłumaczenia wychodziłyby poza pole. */
.tr-choices-text { grid-template-columns: 1fr; }
.tr-choices-text .tr-choice { align-items: center; padding: 8px 14px; }
.tr-choices-text .tr-choice-val {
  font-size: clamp(1rem, 2.3dvh, 1.25rem);
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}

.tr-choice.good { border-color: #16A34A; background: #F0FDF4; }
.tr-choice.good .tr-choice-key { background: #16A34A; color: var(--white); }
.tr-choice.bad { border-color: #DC2626; background: #FEF2F2; }
.tr-choice.bad .tr-choice-key { background: #DC2626; color: var(--white); }
/* wyszarzamy tylko odpowiedzi nietrafione i niepoprawne */
.tr-choice:disabled:not(.good):not(.bad) { opacity: 0.45; }

/* odpowiedź otwarta -------------------------------------------------------- */
.tr-open { display: grid; gap: 12px; justify-items: center; }
.tr-open { gap: clamp(7px, 1.5dvh, 13px); }
.tr-open-label {
  font-size: 0.86rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.tr-input {
  width: 100%;
  max-width: 220px;
  height: 64px;
  height: clamp(46px, 8.4dvh, 68px);
  border: 2px solid var(--violet-100);
  border-radius: var(--radius-sm);
  background: var(--violet-50);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-size: clamp(1.45rem, 3.8dvh, 2.1rem);
  font-weight: 800;
  text-align: center;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tr-input:focus { outline: none; border-color: var(--violet-500); background: var(--white); }
.tr-input.good { border-color: #16A34A; background: #F0FDF4; }
.tr-input.bad { border-color: #DC2626; background: #FEF2F2; }
.tr-input:disabled { opacity: 1; }         /* Safari sam przygasza wyłączone pola */
.tr-check { min-width: 180px; }
.tr-check:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }

/* informacja zwrotna i „Dalej” --------------------------------------------- */
.tr-feedback {
  margin-top: 20px;
  margin-top: clamp(6px, 1.7dvh, 18px);
  padding: 12px 16px;
  padding: clamp(5px, 1.4dvh, 12px) 16px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  font-size: clamp(0.88rem, 2dvh, 1.05rem);
  font-variant-numeric: tabular-nums;
}
.tr-feedback.good { background: #F0FDF4; color: #15803D; }
.tr-feedback.bad { background: #FEF2F2; color: #B91C1C; }
.tr-feedback.hint { background: var(--violet-50); color: var(--muted); }
.tr-next { display: block; width: 100%; margin-top: 16px; position: relative; overflow: hidden; }
.tr-next { margin-top: clamp(6px, 1.5dvh, 15px); }
/* Duże przyciski w karcie skalują się razem z resztą – `.btn-lg` ze style.css
   ma sztywne 17 px góra/dół, co na niskim ekranie zjadałoby cały zapas. */
.tr-app .btn-lg { padding: 15px 30px; }
.tr-app .btn-lg { padding: clamp(9px, 2dvh, 16px) 30px; font-size: clamp(0.96rem, 2.1dvh, 1.08rem); }
/* Po dobrej odpowiedzi kurczący się pasek pokazuje, ile zostało do przeskoku –
   inaczej strona zmieniałaby się „sama z siebie”. Świadomie działa też przy
   prefers-reduced-motion: to nie ozdobnik, tylko informacja o odliczaniu. */
.tr-next.auto::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: left center;
  animation: tr-autonext 2s linear forwards;
}
@keyframes tr-autonext {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* wynik końcowy ------------------------------------------------------------ */
.tr-result { text-align: center; }
.tr-result-ico { font-size: 2.6rem; font-size: clamp(1.9rem, 5dvh, 3rem); line-height: 1; }
.tr-percent {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-size: clamp(2.4rem, 7.5dvh, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 6px 0 2px;
  background: var(--grad-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tr-result-count { font-weight: 700; font-size: clamp(0.9rem, 2.2dvh, 1.05rem); margin-bottom: 6px; }
.tr-result-msg {
  color: var(--muted);
  font-size: clamp(0.85rem, 2dvh, 1rem);
  margin-bottom: 24px;
  margin-bottom: clamp(13px, 2.8dvh, 26px);
}

.tr-review {
  list-style: none;
  display: grid;
  gap: 6px;
  gap: clamp(4px, 0.9dvh, 7px);
  text-align: left;
  margin-bottom: 26px;
  margin-bottom: clamp(13px, 2.8dvh, 28px);
}
.tr-review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  padding: clamp(5px, 1.2dvh, 10px) 14px;
  border-radius: var(--radius-sm);
  font-size: 0.94rem;
  font-size: clamp(0.83rem, 1.9dvh, 0.96rem);
  font-variant-numeric: tabular-nums;
}
.tr-review-item.good { background: #F0FDF4; color: #15803D; }
.tr-review-item.bad { background: #FEF2F2; color: #B91C1C; }
.tr-review-q { font-weight: 700; }
.tr-review-mark { font-size: 0.85rem; opacity: 0.85; }

.tr-result-actions { display: grid; gap: 10px; }

/* Na ekranie dotykowym `:hover` zostaje PRZYKLEJONY po stuknięciu. Bez tego
   podświetlenie klikniętej odpowiedzi było widoczne jeszcze w następnym
   pytaniu – nowy przycisk pojawia się dokładnie pod palcem i od razu dostaje
   zaległy stan. Efekty najechania włączamy więc tylko tam, gdzie najechanie
   w ogóle istnieje. */
@media (hover: hover) {
  .tr-level:hover { transform: translateY(-2px); border-color: var(--violet-500); }
  .tr-choice:hover:not(:disabled) { border-color: var(--violet-500); transform: translateY(-2px); }
  .tr-app .btn:hover { transform: translateY(-2px); }
}
/* Dotyk: trzeba jeszcze zneutralizować globalny `.btn-pink:hover` ze
   `style.css`, który powiększa przycisk – po stuknięciu zostawałby powiększony. */
@media (hover: none) {
  .tr-app .btn:hover { transform: none; filter: none; }
}

/* ---------------------------------------------------------------- telefon
   Tu są WYŁĄCZNIE zmiany układu. Rozmiary tekstu, wysokości pól i odstępy
   skalują się płynnie z wysokością okna (`clamp(..., Ndvh, ...)` przy każdej
   regule bazowej), więc na wysokim telefonie wszystko jest duże, a kurczy się
   dopiero tam, gdzie brakuje miejsca. Nie wpisywać tutaj sztywnych rozmiarów –
   to psuje dopasowanie: aplikacja robi się mała także na dużym ekranie. */
@media (max-width: 560px) {
  .tr-stage-inner { padding: 0 10px; }
  .tr-app { padding-left: 16px; padding-right: 16px; border-radius: var(--radius-sm); }
  .tr-levels { grid-template-columns: 1fr; }
  .tr-level { flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; }
  .tr-level-desc { text-align: left; }
  .tr-choices { grid-template-columns: 1fr; }
  .tr-review-item { flex-direction: column; align-items: flex-start; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-level, .tr-choice, .tr-progress-fill { transition: none; }
  .tr-level:hover, .tr-choice:hover:not(:disabled), .tr-app .btn:hover { transform: none; }
}