/* ═══════════════════════════════════════════════════════════════════════
   Tutor LMS — warstwa strukturalna.

   Serwis stoi na dwóch silnikach: marketing w Next, kursy i sklep na
   WordPressie. Odwiedzający nie ma o tym pojęcia i nie powinien mieć.
   Wtyczka przychodzi jednak z kompletnym własnym projektem — swoją
   typografią, siatką odstępów, cieniami i zaokrągleniami — więc przejście
   z /uslugi/ na stronę kursu czuć natychmiast: to nadal ta sama strona,
   ale nagle w cudzej estetyce.

   PODZIAŁ PRACY NA DWA PLIKI
   `tutor-kolory.css`  — paleta. Generowana z arkuszy wtyczki skryptem
                         `gen-tutor-css.py`, 484 reguły. Kolorów było 146
                         i nie da się ich sensownie przepisać ręcznie.
   `tutor.css`         — ten plik. Typografia, rytm, kształt komponentów.
                         Pisany ręcznie, bo to decyzje projektowe, a nie
                         mechaniczne odwzorowanie.

   ⚠️ ODPORNOŚĆ NA AKTUALIZACJE
   Oba pliki leżą w motywie, nie we wtyczce — aktualizacja Tutora podmienia
   `plugins/tutor/` i nie ma jak ich dotknąć. `functions.php` doczepia je
   z tablicą zależności od uchwytów wtyczki, co wymusza kolejność ładowania.
   Gdyby Tutor zmienił nazwy uchwytów, zależność przestanie obowiązywać
   i arkusz pojedzie na końcu kolejki — czyli i tak po nich.

   ⚠️ ŚWIADOMIE BEZ `!important`
   Tam, gdzie Tutor wygrywa siłą selektora, powtarzamy jego ścieżkę
   (bywa, że wtyczka podwaja klasę: `.a.a`, żeby podbić sobie siłę reguły).
   Reguła o dorównanej sile daje się jeszcze nadpisać — `!important` zamyka
   temat na stałe i to właśnie przez nie wcześniejsze poprawki w tym
   projekcie blokowały się nawzajem.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. tokeny ────────────────────────────────────────────────────────── */

:root {
  /* Kolory znaczeniowe. Tutor ma je nasycone do granic (#f44337, #24a148) —
     na papierowym tle świeciły jak diody. Przyciemnione i lekko przygaszone
     czytają się jako część serwisu, a nie ostrzeżenie z innego systemu.
     Trzymamy je osobno od akcentu: komunikat o błędzie musi być czytelny
     jako błąd, nawet gdy akcent marki się zmieni. */
  --m-blad: #a8342a;
  --m-uwaga: #8a6209;
  --m-ok: #2f6a3f;

  /* Zmienne wtyczki przestawione u źródła — łapie to również miejsca,
     których nie wymieniamy nigdzie z nazwy. --tutor-color-primary był
     niebieski #3e64de, którego nie ma nigdzie w serwisie. */
  --tutor-color-primary: var(--atrament);
  --tutor-color-primary-rgb: 16, 16, 20;
  --tutor-color-primary-hover: var(--tekst);
  --tutor-color-secondary: var(--tekst);
  --tutor-color-black: var(--atrament);
  --tutor-color-white: var(--karta);
  --tutor-color-muted: var(--cichy);
  --tutor-color-hints: var(--cichy);
  --tutor-color-subdued: var(--tekst);
  --tutor-color-gray: var(--tekst);
  --tutor-body-color: var(--tekst);
  --tutor-border-color: var(--kreska);
  --tutor-color-success: var(--m-ok);
  --tutor-color-warning: var(--m-uwaga);
  --tutor-color-danger: var(--m-blad);
  --tutor-table-border-radius: 2px;
  --tutor-border-radius-6: 2px;
  --tutor-border-radius-10: 2px;

  /* Kolory bloków WooCommerce — nowa kasa i koszyk to nie stare szablony
     PHP, tylko bloki z osobną paletą. --wc-primary był fioletem #720eec. */
  --wc-primary: var(--atrament);
  --wc-primary-text: var(--papier);
  --wc-secondary: var(--wlos);
  --wc-highlight: var(--acc);
  --wc-blue: var(--acc);
  --wc-content-bg: var(--karta);
  --wc-form-border-color: var(--obrys-pola);
  --wc-form-border-radius: 2px;

  /* Rytm pionowy. Tutor upycha wszystko co 12-16 px; serwis oddycha
     znacznie szerzej i to jest jedna z dwóch rzeczy — obok kroju pisma —
     po których od razu widać, że treść pochodzi skądinąd. */
  --t-luz: clamp(28px, 3.4vw, 52px);
  --t-luz-s: clamp(18px, 2vw, 28px);
}

/* ── 2. typografia ───────────────────────────────────────────────────── */
/* Największy pojedynczy sygnał „to nasza strona". Tutor renderuje nagłówki
   grubym systemowym krojem; serwis prowadzi je lekkim Jostem z ujemnym
   światłem. Bez tego żadne poprawki kolorów nie pomogą. */

body .tutor-wrap,
body .tutor-course-single,
body .tutor-dashboard,
body .tutor-quiz-wrapper,
body .tutor-checkout-page,
body .tutor-course-spotlight-wrapper,
body .tutor-user-public-profile {
  font-family: var(--f-body), system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  color: var(--tekst);
}

body .tutor-wrap h1, body .tutor-wrap h2, body .tutor-wrap h3,
body .tutor-wrap h4, body .tutor-wrap h5, body .tutor-wrap h6,
body .tutor-dashboard h1, body .tutor-dashboard h2, body .tutor-dashboard h3,
body .tutor-dashboard h4, body .tutor-dashboard h5,
body .tutor-course-single h1, body .tutor-course-single h2,
body .tutor-course-single h3, body .tutor-course-single h4,
body .tutor-course-name,
body .tutor-course-card-title,
body .tutor-course-details-title,
body .tutor-course-topic-title,
body .tutor-quiz-question-title,
body .tutor-segment-title {
  font-family: var(--f-disp), sans-serif;
  font-weight: 300;
  letter-spacing: -.026em;
  color: var(--atrament);
  text-wrap: balance;
}

/* Skala nagłówków przepisana z części Next — te same wartości clamp,
   żeby tytuł kursu miał dokładnie tę wagę co tytuł usługi. */
body .tutor-course-single h1,
body .tutor-course-details-title,
body .tutor-page-title {
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 1.05;
  margin: 0 0 18px;
}
body .tutor-wrap h2,
body .tutor-dashboard h2,
body .tutor-course-single h2,
body .tutor-segment-title {
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.1;
  margin: 0 0 16px;
}
body .tutor-wrap h3,
body .tutor-dashboard h3,
body .tutor-course-topic-title {
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.2;
  margin: 0 0 12px;
}

/* Etykieta nadrzędna. W części Next każda sekcja zaczyna się od małego
   napisu wersalikami z rozstrzelonym światłem — to on porządkuje stronę
   wzrokowo. Tutor nie ma takiego elementu, więc podpinamy go pod nagłówki
   zakładek panelu, które pełnią tę samą rolę. */
body .tutor-dashboard-title,
body .tutor-dashboard-content .tutor-dashboard-title,
body .tutor-dashboard-header-title {
  font-family: var(--f-disp), sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.026em;
  color: var(--atrament);
  margin: 0 0 var(--t-luz-s);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--kreska);
}

body .tutor-fs-1 { font-size: clamp(30px, 3.6vw, 44px) }
body .tutor-fs-2 { font-size: clamp(26px, 3vw, 36px) }
body .tutor-fs-3 { font-size: clamp(22px, 2.4vw, 29px) }
body .tutor-fs-4 { font-size: 23px }
body .tutor-fs-5 { font-size: 20px }
body .tutor-fs-6 { font-size: 17px }
body .tutor-fs-7 { font-size: 15px }
body .tutor-fs-8 { font-size: 14px }

/* Tutor rozsypuje grubości od 400 do 800. Serwis używa dwóch: 400 w treści
   i 600 tam, gdzie coś trzeba wyróżnić. Trzecia grubość w tym samym kadrze
   czyta się jako niedopatrzenie, a nie jako hierarchia. */
body .tutor-fw-medium { font-weight: 500 }
body .tutor-fw-bold,
body .tutor-fw-semi-bold { font-weight: 600 }

/* ── 3. kształt: kreska, promień, cień ───────────────────────────────── */
/* Jedna grubość kreski, jeden promień, brak cieni. Rozjazd narożników
   w jednym kadrze (Tutor miał 3, 4, 5, 6, 10, 80 i 100 px) czyta się jako
   „to z innego systemu" wcześniej niż różnica kolorów. */

body .tutor-card,
body .tutor-sidebar-card,
body [class*='tutor-'][class*='-card'],
body .tutor-dashboard-content-inner .tutor-table,
body .tutor-course-topic,
body .tutor-accordion-item,
body .tutor-alert,
body .tutor-modal-content,
body .tutor-dropdown,
body .tutor-popup,
body .tutor-tab-content,
body .tutor-form-control,
body .tutor-btn,
body .tutor-badge,
body .tutor-tag,
body .tutor-round-box,
body .tutor-thumbnail,
body .tutor-ratio {
  border-radius: 2px;
}

body .tutor-card,
body .tutor-sidebar-card,
body .tutor-modal-content,
body .tutor-dropdown,
body .tutor-popup,
body .tutor-accordion-item,
body .tutor-course-topic {
  box-shadow: none;
  border: 1px solid var(--kreska);
  background: var(--karta);
}

/* Awatary i przyciski radiowe zostają okrągłe — to konwencja czytelna
   wszędzie, a nie niedopatrzenie w spójności. */
/* Awatar zostaje okrągły — razem ze zdjęciem w środku. Sama obudowa nie
   wystarcza: zdjęcie łapało promień 2 px z reguły dla obrazów i wystawało
   rogami poza koło. */
body .tutor-avatar,
body [class*='tutor-avatar'],
body .tutor-avatar img,
body [class*='tutor-avatar'] img,
body input[type='radio'],
body .tutor-form-check-input[type='radio'] {
  border-radius: 50%;
}
body .tutor-avatar img,
body [class*='tutor-avatar'] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 4. przyciski ────────────────────────────────────────────────────── */
/* ⚠️ Bez animacji ruchu — przyciski w tym serwisie nie podskakują ani nie
   przesuwają się na najechanie. Dozwolone jest wyłącznie przejście koloru
   i drobne wciśnięcie przy kliknięciu. */

body .tutor-btn {
  font-family: var(--f-body), sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 15px 26px;
  border-radius: 2px;
  border: 1px solid transparent;
  text-transform: none;
  text-decoration: none;
  transition: background-color .25s var(--e), color .25s var(--e),
              border-color .25s var(--e);
}
body .tutor-btn:active { transform: scale(.985) }

/* ⚠️ `text-transform: capitalize` to nawyk angielski — tam „enrolled courses”
   ma prawo stać się „Enrolled Courses”. Po polsku wielka litera w środku
   zdania jest błędem: „Kursy Na Które Się Zapisano”. Nasze napisy przychodzą
   już z właściwą wielkością liter, więc wyłączamy przekształcenie zamiast
   walczyć z nim w każdym miejscu z osobna. */
body .tutor-text-capitalize { text-transform: none }

body .tutor-btn.tutor-btn-primary,
body .tutor-btn-primary {
  background: var(--atrament);
  border-color: var(--atrament);
  color: var(--papier);
}
body .tutor-btn.tutor-btn-primary:hover,
body .tutor-btn-primary:hover {
  background: transparent;
  color: var(--atrament);
}

body .tutor-btn-outline-primary,
body .tutor-btn-secondary {
  background: transparent;
  border-color: var(--atrament);
  color: var(--atrament);
}
body .tutor-btn-outline-primary:hover,
body .tutor-btn-secondary:hover {
  background: var(--atrament);
  color: var(--papier);
}

/* ⚠️ Klasy `.tutor-btn` Tutor używa również dla zwykłych odnośników
   tekstowych („Nie pamiętasz hasła?"). Nadanie im tła przycisku zamienia
   odnośnik w czarny prostokąt w środku zdania — stąd osobne traktowanie.
   Podkreślenie zastępujemy kreską pod spodem, jak w odnośnikach serwisu. */
body a.tutor-btn-ghost,
body .tutor-btn.tutor-btn-ghost,
body .tutor-btn-link,
body a.tutor-btn-link {
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--atrament) 28%, transparent);
  border-radius: 0;
  color: var(--atrament);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: border-color .25s var(--e);
}
body a.tutor-btn-ghost:hover,
body .tutor-btn.tutor-btn-ghost:hover,
body .tutor-btn-link:hover,
body a.tutor-btn-link:hover {
  border-bottom-color: var(--atrament);
  background: transparent;
}

body .tutor-btn.tutor-btn-block { width: 100%; justify-content: center }

/* ── 5. pola formularza ──────────────────────────────────────────────── */
/* Jeden wygląd pola w całym serwisie: logowanie, panel, kasa, kontakt.
   Wcześniej te same pola miały trzy różne warianty krawędzi. */

body .tutor-form-control,
body input.tutor-form-control,
body textarea.tutor-form-control,
body select.tutor-form-control,
body .tutor-login-form-wrapper input:not([type='checkbox']):not([type='radio']):not([type='submit']),
body .tutor-form-group input:not([type='checkbox']):not([type='radio']),
body .tutor-dropdown-select .tutor-form-select {
  border: 1px solid var(--obrys-pola);
  border-radius: 2px;
  background: var(--karta);
  color: var(--atrament);
  font-family: var(--f-body), sans-serif;
  font-size: 16px;
  padding: 13px 15px;
  box-shadow: none;
  transition: border-color .2s var(--e), box-shadow .2s var(--e);
}
body .tutor-form-control::placeholder { color: var(--cichy); opacity: 1 }
body .tutor-form-control:focus,
body .tutor-login-form-wrapper input:focus {
  border-color: var(--atrament);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent);
}

body .tutor-form-label,
body .tutor-input-label {
  font-family: var(--f-body), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cichy);
  margin-bottom: 8px;
  display: block;
}

/* ⚠️ Pole wyboru miało 32×28 px zamiast kwadratu. Nie przez szerokość —
   przez `padding:13px 15px` z reguły dla pól tekstowych, która łapała każdy
   `input` w formularzu. Przy `box-sizing:border-box` przeglądarka nie zejdzie
   poniżej sumy paddingu i ramki, więc zadana szerokość była niewykonalna
   i po cichu ignorowana. Dlatego tu zerujemy padding, zanim ustawimy wymiar.

   Podwojona klasa w selektorze dorównuje sile reguły Tutora, który sam
   pisze `.tutor-form-check-input.tutor-form-check-input[type=checkbox]`. */
body .tutor-form-check input.tutor-form-check-input.tutor-form-check-input,
body input.tutor-form-check-input.tutor-form-check-input[type='checkbox'],
body input.tutor-form-check-input.tutor-form-check-input[type='radio'] {
  appearance: none;
  padding: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--atrament) 50%, var(--papier));
  border-radius: 2px;
  background-color: var(--karta);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .18s var(--e), border-color .18s var(--e);
}
body input.tutor-form-check-input.tutor-form-check-input[type='radio'] {
  border-radius: 50%;
}
body .tutor-form-check input.tutor-form-check-input.tutor-form-check-input:checked,
body input.tutor-form-check-input.tutor-form-check-input:checked {
  background-color: var(--atrament);
  border-color: var(--atrament);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fffefb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: 50%;
  background-repeat: no-repeat;
}
body .tutor-form-check {
  display: flex;
  align-items: center;
  gap: 9px;
}
body .tutor-form-check label {
  margin: 0;
  font-size: 15px;
  color: var(--tekst);
  cursor: pointer;
}

/* ── 6. logowanie i rejestracja ──────────────────────────────────────── */
/* Tutor rysuje ramkę i tło DWA razy: raz na `tutor-login-wrap`, raz na
   `tutor-login-form-wrapper` — stąd karta w karcie z podwójnym marginesem.
   Zostawiamy zewnętrzną, wewnętrzną rozbieramy. */

body .tutor-template-segment.tutor-login-wrap,
body .tutor-login-wrap {
  background: var(--karta);
  border: 1px solid var(--kreska);
  border-radius: 2px;
  box-shadow: none;
  padding: clamp(28px, 4vw, 46px);
  max-width: 460px;
  margin: var(--t-luz) auto;
}
body .tutor-login-wrap .tutor-login-form-wrapper {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  margin: 0;
}
body .tutor-login-wrap h2,
body .tutor-login-wrap .tutor-login-title {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0 0 26px;
}

/* ── 7. panel ucznia ─────────────────────────────────────────────────── */

/* ⚠️ Tylko od dołu. Wcięcie górne dokłada już `main.m366-tresc` (48 px na
   biurku, 28 na telefonie), a panel dorzucał drugie tyle — razem 97 px pustki
   pod paskiem nawigacji. Miało to sens, gdy nad panelem stał duży blok
   z tytułem strony; po jego usunięciu został sam odstęp po nieistniejącym
   nagłówku. */
body .tutor-dashboard {
  padding-top: 0;
  padding-bottom: var(--t-luz);
}
body .tutor-dashboard-content,
body .tutor-dashboard-content-inner {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0 0 0 clamp(20px, 3vw, 44px);
}
body .tutor-dashboard-left-menu {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-right: 1px solid var(--kreska);
  padding-right: 0;
}

/* Menu boczne jako lista pozycji rozdzielonych włosową kreską — ten sam
   zabieg co w spisie usług w części Next. Wcześniej były to zaokrąglone
   kafelki, czyli element, którego nie ma nigdzie indziej w serwisie.

   ⚠️ Tutor celuje w te pozycje selektorem o trzech klasach, więc reguła
   o jednej klasie przegrywa mimo późniejszego arkusza. */
body .tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link,
body .tutor-dashboard-menu-item-link {
  border-radius: 0;
  border-bottom: 1px solid var(--wlos);
  padding: 14px 16px 14px 0;
  font-family: var(--f-body), sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--tekst);
  background: transparent;
  transition: color .22s var(--e), padding-left .22s var(--e),
              background-color .22s var(--e);
}
body .tutor-dashboard-menu-item-link:hover {
  background: transparent;
  color: var(--atrament);
  padding-left: 8px;
}
/* ⚠️ Stan aktywny Tutor maluje selektorem o CZTERECH klasach i wypełnia
   pozycję kolorem podstawowym. Po przestawieniu `--tutor-color-primary`
   na atrament dało to czarny pasek z czarnym napisem — pozycja zniknęła.
   Powtarzamy pełną ścieżkę wtyczki i zamiast wypełnienia dajemy kreskę
   przy lewej krawędzi, jak w spisie treści w części Next. */
body .tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a,
body .tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link,
body .tutor-dashboard-menu .active > .tutor-dashboard-menu-item-link,
body .tutor-dashboard-menu-item.active a {
  background: transparent;
  background-color: transparent;
  color: var(--atrament);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--atrament);
  padding-left: 14px;
}
/* ⚠️ Ikona stanu aktywnego przychodzi biała, bo Tutor zakłada pod nią
   kolorowe wypełnienie. Wypełnienie zdjęliśmy, więc ikona znikała na
   jasnym tle. Selektor musi powtórzyć pełną ścieżkę wtyczki. */
body .tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a i,
body .tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active a span,
body .tutor-dashboard .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon,
body .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon {
  color: var(--atrament);
}
body .tutor-dashboard-menu-item-icon,
body .tutor-dashboard-menu-item-link i {
  color: var(--cichy);
}

/* Kafle liczników. Cyfra prowadzi kompozycję, jak w sekcjach z wynikami
   na stronach realizacji — stąd krój nagłówkowy i duży stopień. */
/* Rząd kafli: równe wysokości niezależnie od długości podpisu. Bez tego
   kafel z dłuższą etykietą był wyższy od sąsiadów i rząd się rozjeżdżał. */
body .tutor-dashboard-info-cards,
body .tutor-dashboard-info-card-wrapper,
body .tutor-dashboard-content-inner .tutor-row {
  align-items: stretch;
}
body .tutor-dashboard-info-card,
body .tutor-dashboard .tutor-card {
  height: 100%;
  border: 1px solid var(--kreska);
  /* Treść wyśrodkowana w pionie. Wysokość rzędu wyznacza kafel z najdłuższym
     podpisem, więc w pozostałych zostawał pusty pas u dołu. */
  display: flex;
  align-items: center;
  border-radius: 2px;
  background: var(--karta);
  box-shadow: none;
  padding: clamp(20px, 2.2vw, 30px);
}
body .tutor-dashboard .tutor-card .tutor-fs-3,
body .tutor-dashboard .tutor-card .tutor-fs-4,
body .tutor-dashboard-info-card .tutor-fs-3,
body .tutor-dashboard-info-card h3 {
  font-family: var(--f-disp), sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 3.4vw, 46px);
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--atrament);
}

/* Kółka pod ikonami były jedynym okrągłym elementem w kadrze poza awatarem. */
body .tutor-round-box {
  border-radius: 2px;
  background: var(--wlos);
  border: 1px solid var(--kreska);
}

/* ── 8. strona kursu ─────────────────────────────────────────────────── */

body .tutor-course-single {
  padding-block: var(--t-luz);
}
body .tutor-course-header,
body .tutor-course-details-header {
  border-bottom: 1px solid var(--kreska);
  padding-bottom: var(--t-luz-s);
  margin-bottom: var(--t-luz);
}
body .tutor-course-thumbnail img,
body .tutor-ratio > * {
  border-radius: 2px;
}

/* Spis treści kursu: lista rozdziałów rozdzielona kreską, bez zaokrąglonych
   kafelków i bez cieni. */
body .tutor-accordion-item,
body .tutor-course-topic {
  border: 0;
  border-top: 1px solid var(--kreska);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body .tutor-accordion-item:last-child,
body .tutor-course-topic:last-child {
  border-bottom: 1px solid var(--kreska);
}
body .tutor-accordion-item-header {
  background: transparent;
  padding: 18px 0;
  font-family: var(--f-body), sans-serif;
  font-weight: 600;
  color: var(--atrament);
  transition: color .22s var(--e);
}
/* ⚠️ Najechanie NIE może iść na akcent. `--acc` (#7d8b9c) na jasnym tle
   daje 2,9:1 — poniżej progu 4,5:1 dla tekstu. Tytuł rozdziału stawał się
   po najechaniu trudniejszy do przeczytania niż przed nim, czyli odwrotnie
   niż powinien. Akcent zostaje do wypełnień i wskaźników, nie do tekstu. */
body .tutor-accordion-item-header:hover { color: var(--atrament) }
body .tutor-accordion-item-body { padding: 0 0 18px }

/* Karta z ceną. Jedyny element na stronie kursu, który ma prawo odcinać się
   od tła — bo to on prowadzi do zakupu. */
body .tutor-course-sidebar .tutor-card,
body .tutor-course-details-widget {
  border: 1px solid var(--kreska);
  border-radius: 2px;
  background: var(--karta);
  box-shadow: var(--cien-1);
  padding: clamp(22px, 2.4vw, 32px);
}
body .tutor-course-price,
body .tutor-course-sidebar .tutor-fs-4 {
  font-family: var(--f-disp), sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 3vw, 40px);
  letter-spacing: -.03em;
  color: var(--atrament);
}

/* ── 9. odtwarzacz lekcji i quiz ─────────────────────────────────────── */

body .tutor-course-spotlight-wrapper,
body .tutor-quiz-wrapper {
  background: var(--papier);
  color: var(--tekst);
}
body .tutor-course-topic-sidebar,
body .tutor-course-single-sidebar-wrapper {
  background: var(--karta);
  border-right: 1px solid var(--kreska);
  box-shadow: none;
}
body .tutor-course-topic-item a,
body .tutor-course-topic-item-title {
  font-family: var(--f-body), sans-serif;
  font-size: 15px;
  color: var(--tekst);
  border-radius: 0;
  transition: color .2s var(--e), background-color .2s var(--e);
}
body .tutor-course-topic-item a:hover { background: var(--wlos); color: var(--atrament) }
body .tutor-course-topic-item.is-active a,
body .tutor-course-topic-item.active a {
  background: var(--wlos);
  color: var(--atrament);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--atrament);
}

body .tutor-quiz-question-title { font-size: clamp(20px, 2.2vw, 28px); margin-bottom: 20px }
body .tutor-quiz-answer-item,
body .tutor-quiz-wrap .tutor-form-check {
  border: 1px solid var(--kreska);
  border-radius: 2px;
  padding: 14px 16px;
  background: var(--karta);
  transition: border-color .2s var(--e), background-color .2s var(--e);
}
body .tutor-quiz-answer-item:hover { border-color: var(--obrys-pola) }

/* Pasek postępu — jedyne miejsce, gdzie akcent marki wypełnia większą
   powierzchnię, bo niesie informację, a nie dekorację. */
body .tutor-progress-bar,
body .tutor-progress-filled {
  border-radius: 2px;
  height: 6px;
  background: var(--wlos);
}
body .tutor-progress-value,
body .tutor-progress-bar .tutor-progress-value {
  background: var(--acc);
  border-radius: 2px;
}

/* ── 10. tabele, zakładki, komunikaty, strony wyników ────────────────── */

body .tutor-table {
  border: 1px solid var(--kreska);
  border-radius: 2px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--karta);
  font-size: 15px;
}
body .tutor-table th {
  font-family: var(--f-body), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cichy);
  background: var(--wlos);
  border-bottom: 1px solid var(--kreska);
  padding: 13px 16px;
  text-align: left;
}
body .tutor-table td {
  border-bottom: 1px solid var(--wlos);
  padding: 15px 16px;
  color: var(--tekst);
  vertical-align: middle;
}
body .tutor-table tr:last-child td { border-bottom: 0 }
/* Kwoty i liczby w kolumnach mają się ustawiać w pion. */
body .tutor-table td:has(.tutor-price),
body .tutor-table .tutor-price,
body .tutor-table .tutor-text-right { font-variant-numeric: tabular-nums }

body .tutor-nav {
  border-bottom: 1px solid var(--kreska);
  gap: 4px;
}
body .tutor-nav-link {
  font-family: var(--f-body), sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--cichy);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 4px;
  margin-right: 24px;
  transition: color .22s var(--e), border-color .22s var(--e);
}
body .tutor-nav-link:hover { color: var(--atrament) }
body .tutor-nav-link.is-active,
body .tutor-nav-link.active {
  color: var(--atrament);
  font-weight: 600;
  border-bottom-color: var(--atrament);
  background: transparent;
}

body .tutor-alert {
  border: 1px solid var(--kreska);
  border-left: 2px solid var(--cichy);
  border-radius: 2px;
  background: var(--karta);
  padding: 16px 18px;
  font-size: 15px;
  box-shadow: none;
}
body .tutor-alert.tutor-danger,
body .tutor-alert.tutor-alert-danger { border-left-color: var(--m-blad) }
body .tutor-alert.tutor-warning,
body .tutor-alert.tutor-alert-warning { border-left-color: var(--m-uwaga) }
body .tutor-alert.tutor-success,
body .tutor-alert.tutor-alert-success { border-left-color: var(--m-ok) }

body .tutor-badge,
body .tutor-tag,
body .tutor-badge-pill {
  border-radius: 2px;
  font-family: var(--f-body), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--kreska);
  background: var(--wlos);
  color: var(--tekst);
}

/* Puste stany — Tutor pokazuje tu duży rysunek i komunikat wyśrodkowany
   na białym prostokącie. Sprowadzamy do jednej linii tekstu na kresce. */
body .tutor-empty-state,
body .tutor-no-data {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--kreska);
  padding: var(--t-luz) 0;
  color: var(--cichy);
  font-size: 16px;
}

body .tutor-pagination-wrapper a,
body .tutor-pagination a,
body .tutor-pagination span {
  border-radius: 2px;
  border: 1px solid var(--kreska);
  color: var(--tekst);
  font-size: 15px;
  transition: border-color .2s var(--e), color .2s var(--e);
}
body .tutor-pagination .current,
body .tutor-pagination-wrapper .current {
  background: var(--atrament);
  border-color: var(--atrament);
  color: var(--papier);
}

/* ── 11. kasa i koszyk na blokach WooCommerce ────────────────────────── */
/* Nowa kasa to nie stare szablony PHP, tylko bloki `wc-block-*` z osobnym
   arkuszem. Reguły pisane pod klasy `.woocommerce` w ogóle ich nie dotykają.

   ⚠️ Bloki celują w pola selektorem o dwóch klasach i atrybucie, więc
   powtarzamy tę ścieżkę — inaczej reguła przegrywa mimo kolejności. */

body .wc-block-components-form .wc-block-components-text-input input[type='text'],
body .wc-block-components-form .wc-block-components-text-input input[type='email'],
body .wc-block-components-form .wc-block-components-text-input input[type='tel'],
body .wc-block-components-form .wc-block-components-text-input input[type='number'],
body .wc-block-components-text-input input[type='text'],
body .wc-block-components-text-input input[type='email'],
body .wc-block-components-text-input input[type='tel'],
body .wc-block-components-text-input input[type='number'],
body .wc-block-components-textarea {
  border: 1px solid var(--obrys-pola);
  border-radius: 2px;
  background: var(--karta);
  color: var(--atrament);
  font-family: var(--f-body), sans-serif;
  font-size: 16px;
}
body .wc-block-components-text-input input:focus,
body .wc-blocks-components-select__select:focus {
  border-color: var(--atrament);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent);
}

body .wc-blocks-components-select .wc-blocks-components-select__container,
body .wc-blocks-components-select .wc-blocks-components-select__select,
body div.wc-blocks-components-select__container,
body select.wc-blocks-components-select__select {
  border-radius: 2px;
  border-color: var(--obrys-pola);
  background-color: var(--karta);
}

body .wc-block-components-address-card,
body .wc-block-components-panel,
body .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option,
body .wc-block-components-order-summary,
body .wp-block-woocommerce-checkout-order-summary-block,
body .checkout-order-summary-block-fill,
body .wc-block-components-totals-wrapper,
body .wc-block-cart-items,
body .wc-block-components-order-summary-item__quantity.wc-block-components-order-summary-item__quantity {
  border-radius: 2px;
  border-color: var(--kreska);
}

body .wc-block-components-checkbox input.wc-block-components-checkbox__input[type='checkbox'],
body input.wc-block-components-checkbox__input[type='checkbox'] {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, var(--atrament) 50%, var(--papier));
  accent-color: var(--atrament);
}
body input.wc-block-components-radio-control__input {
  border-radius: 50%;
  accent-color: var(--atrament);
}

body .wc-block-components-button:not(.is-link) {
  border-radius: 2px;
  font-family: var(--f-body), sans-serif;
  font-weight: 600;
  transition: background-color .25s var(--e), color .25s var(--e);
}
body .wc-block-components-title,
body .wc-block-components-checkout-step__title {
  font-family: var(--f-disp), sans-serif;
  font-weight: 300;
  letter-spacing: -.026em;
  color: var(--atrament);
}

/* ── 12. efekt wejścia ───────────────────────────────────────────────── */
/* Klasy nadaje `tutor.js`. W części Next robi to komponent Ruch.jsx —
   sekcje wjeżdżają o 24 px w górę, jedna po drugiej. Bez tego przejście
   ze strony marketingowej na kursy czuć natychmiast: nie przez kolory,
   tylko przez to, że nagle nic się nie dzieje. */

body .m366-wjazd {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--e), transform .7s var(--e);
  will-change: opacity, transform;
}
body .m366-wjazd.m366-widac {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body .m366-wjazd,
  body .m366-wjazd.m366-widac {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 13. węższe ekrany ───────────────────────────────────────────────── */

@media (max-width: 900px) {
  body .tutor-dashboard-content,
  body .tutor-dashboard-content-inner { padding-left: 0 }
  body .tutor-dashboard-left-menu {
    border-right: 0;
    border-bottom: 1px solid var(--kreska);
    margin-bottom: var(--t-luz-s);
  }
  body .tutor-nav-link { margin-right: 16px; font-size: 14px }
}

/* Wnętrze kafla ma wypełnić wyśrodkowany kontener. */
body .tutor-dashboard .tutor-card > .tutor-d-flex {
  width: 100%;
  justify-content: center;
}

/* ── 14. strona kursu: usterki po przebudowie ────────────────────────── */

/* ⚠️ DWA `h1` NA STRONIE. Motyw dokłada własny nagłówek kursu
   (`header.m366-tytul-kursu`), bo szablon Tutora nie ma punktu zaczepienia
   przed miniaturą. Tytuł wtyczki jednak nie znikał — strona miała więc dwa
   tytuły jeden pod drugim, mniejszy nad większym, i dwa `h1` w kodzie.
   Ukrywamy ten od wtyczki: nagłówek motywu niesie tę samą treść i jest
   złożony w skali serwisu. */
body header.tutor-course-details-header h1.tutor-course-details-title {
  display: none;
}
/* Reszta nagłówka wtyczki (kategoria, oceny, przyciski) zostaje — dlatego
   ukrywamy sam tytuł, a nie cały blok. */
body .tutor-course-details-header {
  margin-bottom: var(--t-luz-s);
  padding-bottom: var(--t-luz-s);
  border-bottom: 1px solid var(--kreska);
}

/* Gwiazdki ocen szły na kolor ostrzeżenia, bo w arkuszu wtyczki są złote
   (#ed9700) i odwzorowanie po odcieniu zaliczyło je do pomarańczy.
   Ocena to nie ostrzeżenie — przenosimy je na akcent marki. */
/* ⚠️ Ocena niesie informację, więc podlega progowi 3:1 jak każdy element
   nietekstowy. Czysty akcent (#7d8b9c) na karcie daje 2,9:1 — ledwo poniżej.
   Przyciemnienie o jedną trzecią w stronę atramentu mieści się w progu
   i nadal czyta się jako ten sam kolor marki. */
body .tutor-ratings-stars,
body .tutor-ratings-stars i,
body .tutor-ratings-stars span,
body [class*='tutor-icon-star'] {
  color: color-mix(in srgb, var(--acc) 66%, var(--atrament));
}

/* Zwijana treść („Pokaż więcej") kończy się poświatą, która ma zlewać się
   z tłem. Tutor rysuje ją do bieli, a strona stoi na papierze — zostawał
   widoczny jasny pas w połowie akapitu. */
body .tutor-toggle-more-collapsed::before,
body .tutor-toggle-more-content::before,
body .tutor-toggle-more::before {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--papier) 0%, transparent),
    var(--papier));
}
body .tutor-toggle-more-button,
body .tutor-toggle-more a {
  color: var(--atrament);
  font-weight: 600;
}

/* Karta z ceną i karta autora: równy odstęp między nimi, jeden rytm. */
body .tutor-course-sidebar > * + * {
  margin-top: var(--t-luz-s);
}

/* Ostatnie elementy strony kursu z własnym promieniem. Karty widgetów
   i nagłówki rozdziałów Tutor zaokrągla osobnymi regułami, poza rodziną
   `.tutor-card`, którą objęła sekcja 3. */
body .tutor-course-details-widget.tutor-course-details-widget,
body .tutor-course-details-instructors.tutor-course-details-instructors,
body .tutor-accordion-item-header.tutor-accordion-item-header,
body .tutor-card .tutor-card-body,
body .tutor-card-body.tutor-card-body,
/* Tutor celuje w to wnętrze karty ścieżką o trzech klasach — musimy ją
   powtórzyć, żeby narożnik nie wracał do 6 px. */
body .tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body {
  border-radius: 2px;
}

/* ── 15. cel dotyku na ekranach dotykowych ───────────────────────────── */
/* ⚠️ Odnośniki pomocnicze („Nie pamiętasz hasła?") straciły wysokość, gdy
   przestały być przyciskami — zostało 19 px, czyli mniej niż połowa tego,
   w co da się pewnie trafić palcem. Na wskaźniku precyzyjnym to bez
   znaczenia, więc powiększamy tylko tam, gdzie jest to potrzebne.
   Powiększamy pole klikalne, nie sam napis: `padding` rozpycha obszar,
   a kreska pod spodem zostaje przy tekście dzięki `inline-block`. */
@media (pointer: coarse) {
  body a.tutor-btn-ghost,
  body .tutor-btn.tutor-btn-ghost,
  body .tutor-btn-link,
  body a.tutor-btn-link {
    display: inline-block;
    /* ⚠️ JEDYNE `!important` w tym pliku. Nie z wygody — Tutor pisze
       `.tutor-btn-ghost { padding: 0 !important }`, więc nie da się tego
       nadpisać niczym innym; przegrywa z tym nawet styl wpisany wprost
       w atrybut elementu. Wszystkie pozostałe konflikty w tym arkuszu
       rozwiązuje dorównanie siły selektora. */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* Pozycje menu panelu i spisu lekcji — ta sama zasada. */
  body .tutor-dashboard-menu-item-link { padding-block: 16px }
}

/* ── 16. odtwarzacz lekcji i quiz ────────────────────────────────────── */
/* Sprawdzone na żywo dopiero po zapisaniu konta testowego na kurs —
   bez zapisu Tutor przekierowuje na logowanie i tych ekranów nie widać. */

/* Rozwinięty rozdział w spisie treści zostawał w chłodnej szarości Tutora
   (#eff1f6). Warstwa generowana go nie złapała, bo wtyczka maluje ten stan
   regułą o wyższej sile. Na papierowym tle siny prostokąt rzucał się w oczy
   jako jedyny zimny element w kadrze. */
/* ⚠️ Tutor maluje te nagłówki z paska bocznego ścieżką o dwóch klasach,
   a kartę startu quizu — ścieżką z IDENTYFIKATOREM (`#tutor-single-entry-content`).
   Identyfikator jest silniejszy od dowolnej liczby klas, więc jedynym
   sposobem bez `!important` jest powtórzenie tej samej ścieżki. */
body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header,
body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active,
body .tutor-accordion-item-header.is-active {
  background-color: var(--wlos);
}

/* Przyciski ikon (zwijanie spisu, zamknięcie) były pigułkami o promieniu
   48 px — jedyne owalne elementy w całym odtwarzaczu. */
body .tutor-iconic-btn,
body .tutor-course-topics-sidebar-toggler,
body a.tutor-iconic-btn {
  border-radius: 2px;
}

/* Karta rozpoczęcia quizu miała własny promień 10 px. */
body .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-quiz-wrapper .tutor-start-quiz-wrapper,
body .tutor-start-quiz-wrapper {
  border-radius: 2px;
  border: 1px solid var(--kreska);
  background: var(--karta);
  box-shadow: none;
}

/* ── 17. panel jako strona, nie wklejony blok ────────────────────────── */
/* ⚠️ TO BYŁO GŁÓWNE ŹRÓDŁO WRAŻENIA „DOKLEJONEJ WTYCZKI”.
   Kolumna serwisu (`.m366-srodek`) ma 1320 px z wcięciem 40 px, więc treść
   zaczyna się na 100 px. Kontener Tutora ma to samo 1320 px, ale wcięcie
   12 px — treść zaczynała się na 72 px i kończyła na 1368. Panel był
   o 28 px szerszy z każdej strony niż tytuł strony nad nim i stopka pod nim.
   Takiego rozjazdu nie widać wprost, ale czyta się go natychmiast: blok
   nie trzyma linii, więc wygląda na wstawiony z zewnątrz.

   Wyrównujemy wcięcie do kolumny serwisu i zerujemy ujemne marginesy
   siatki Tutora, które ten rozjazd powodowały. */
body .tutor-dashboard .tutor-container,
body .tutor-course-single .tutor-container,
body .tutor-wrap > .tutor-container {
  /* ⚠️ 1920 px, tak samo jak `.m366-srodek` w marka.css i `.pelna` w Next.
     Stało tu 1320 i panel był węższy od tytułu strony nad nim oraz od stopki
     pod nim — czyli dokładnie ten rozjazd, który miał zniknąć. */
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 40px);
}
body .tutor-dashboard .tutor-row {
  margin-inline: 0;
}

/* Dwie kolumny panelu jako siatka o wyraźnym odstępie. Układ Tutora opiera
   się na wewnętrznym wcięciu kolumn (12 px), przez co odstęp między menu
   a treścią był ciaśniejszy niż jakikolwiek odstęp w reszcie serwisu. */
body .tutor-frontend-dashboard-maincontent {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: clamp(30px, 3.6vw, 60px);
  align-items: start;
}
body .tutor-frontend-dashboard-maincontent > [class*='tutor-col'] {
  width: auto;
  max-width: none;
  flex: none;
  padding-inline: 0;
}
body .tutor-dashboard-header,
body .tutor-header-left-side,
body .tutor-header-right-side {
  padding-inline: 0;
}
/* Treść nie potrzebuje już własnego wcięcia — odstęp daje siatka. */
body .tutor-dashboard-content,
body .tutor-dashboard-content-inner {
  padding-left: 0;
}
/* Kreska rozdzielająca biegnie przez całą wysokość wiersza, a nie tylko
   pod ostatnią pozycją menu. */
body .tutor-dashboard-left-menu {
  border-right: 1px solid var(--kreska);
  padding-right: clamp(16px, 1.6vw, 28px);
  height: 100%;
}

@media (max-width: 900px) {
  body .tutor-frontend-dashboard-maincontent {
    grid-template-columns: 1fr;
    gap: var(--t-luz-s);
  }
  body .tutor-dashboard-left-menu {
    border-right: 0;
    border-bottom: 1px solid var(--kreska);
    padding-right: 0;
    height: auto;
  }
}

/* ── 18. puste stany ─────────────────────────────────────────────────── */
/* ⚠️ Tutor wstawia tu rysunek `emptystate.svg` o szerokości ~750 px,
   utrzymany w bardzo jasnej szarości z niebieską chorągiewką. Na papierowym
   tle serwisu rysunek praktycznie znika — zostaje wrażenie, że coś się nie
   wczytało — a jedyny wyraźny element to niebieski akcent spoza palety.
   Występuje na czterech zakładkach: kursy, recenzje, zapisane, zamówienia.

   Zamiast przemalowywać cudzą ilustrację, zdejmujemy ją i zostawiamy sam
   komunikat złożony w typografii serwisu. Pusty stan ma powiedzieć, czego
   nie ma — rysunek nie dodaje tu nic poza szumem. */
body .tutor-empty-state img,
body .tutor-empty-state svg,
body [class*='tutor-'] img[src*='emptystate'],
body img[src*='emptystate'] {
  display: none;
}
body .tutor-empty-state,
body .tutor-no-data,
body .tutor-dashboard-content-inner .tutor-empty-state {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--kreska);
  border-radius: 0;
  padding: clamp(36px, 4.6vw, 68px) 0;
  margin: 0;
  text-align: left;
  color: var(--cichy);
  font-family: var(--f-body), sans-serif;
  font-size: 17px;
}
body .tutor-empty-state p,
body .tutor-empty-state h3,
body .tutor-empty-state .tutor-fs-6,
body .tutor-no-data p {
  margin: 0;
  color: var(--cichy);
  font-family: var(--f-body), sans-serif;
  font-weight: 400;
  font-size: 17px;
  text-align: left;
}

/* ── 19. odtwarzacz lekcji: kolumna i tryb ciemny ────────────────────── */

/* ⚠️ Odtwarzacz przychodzi jako pas przez całą szerokość okna: pasek boczny
   przyklejony do lewej krawędzi, treść do prawej. Reszta serwisu trzyma się
   kolumny 1920 px, więc przy szerokim ekranie spis lekcji stał 360 px na
   lewo od logo nad nim — blok wyglądał, jakby należał do innej strony.
   Sprowadzamy go do tej samej kolumny co wszystko inne. */
body .tutor-course-single-content-wrapper {
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 40px);
}

/* ⚠️ DWA TŁA WPISANE NA SZTYWNO, KTÓRE PRZEŻYŁY TRYB CIEMNY.
   Aktywna lekcja miała `#eff1f6`, a wnętrze rozdziału czystą biel — oba
   zostawały jasne, gdy reszta strony robiła się ciemna. Tekst szedł na
   `--atrament`, czyli w trybie ciemnym na prawie biały, i tytuł aktywnej
   lekcji znikał: kontrast 1,02:1. To był ten „ten sam kolor czcionki co
   tła”, którego nie wyłapał audyt — bo audyt chodził po trybie jasnym. */
body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-body,
body .tutor-lesson-sidebar .tutor-accordion-item-body {
  background-color: transparent;
}
body .tutor-course-single-sidebar-wrapper .tutor-course-topic-item a,
body .tutor-lesson-sidebar .tutor-course-topic-item a {
  background-color: transparent;
  color: var(--tekst);
  transition: background-color .2s var(--e), color .2s var(--e);
}
body .tutor-course-single-sidebar-wrapper .tutor-course-topic-item a:hover,
body .tutor-lesson-sidebar .tutor-course-topic-item a:hover {
  background-color: var(--wlos);
  color: var(--atrament);
}
/* Lekcja otwarta w tej chwili — wyróżniona kreską przy krawędzi i grubszym
   napisem, a nie wypełnieniem, które w trybie ciemnym trzeba by osobno
   dobierać. */
body .tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active a,
body .tutor-course-single-sidebar-wrapper .tutor-course-topic-item.active a,
body .tutor-lesson-sidebar .tutor-course-topic-item.is-active a {
  background-color: var(--wlos);
  color: var(--atrament);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--atrament);
}
body .tutor-course-single-sidebar-wrapper .tutor-course-topic-item-title,
body .tutor-lesson-sidebar .tutor-course-topic-item-title {
  color: inherit;
}

/* Pasek boczny i treść na wspólnej kresce, bez cienia. */
body .tutor-course-single-sidebar-wrapper {
  background: transparent;
  border-right: 1px solid var(--kreska);
  box-shadow: none;
}
body .tutor-course-single-sidebar-title {
  border-bottom: 1px solid var(--kreska);
  font-family: var(--f-body), sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cichy);
}

/* ── 20. pasek boczny i odtwarzacz w kolorach serwisu ────────────────── */

/* ⚠️ Pasek lekcji siedział na `--karta`, czyli o stopień jaśniej niż strona.
   W trybie jasnym różnica była ledwo widoczna, w ciemnym — wyraźna: pas
   #16161a na tle #0d0d10 czytał się jak osobne okno doklejone z boku.
   Odtwarzacz lekcji ma być stroną, nie panelem w stronie, więc pasek idzie
   na kolor tła, a rozdziela go sama kreska. */
body .tutor-course-single-sidebar-wrapper,
body .tutor-lesson-sidebar {
  background: var(--papier);
}
body .tutor-course-single-sidebar-title {
  background: var(--papier);
}
body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header,
body .tutor-lesson-sidebar .tutor-accordion-item-header {
  background-color: transparent;
  border-bottom: 1px solid var(--wlos);
}
body .tutor-course-single-sidebar-wrapper .tutor-accordion-item-header.is-active,
body .tutor-lesson-sidebar .tutor-accordion-item-header.is-active {
  background-color: transparent;
  color: var(--atrament);
  font-weight: 600;
}
body .tutor-course-single-sidebar-wrapper .tutor-course-topic,
body .tutor-lesson-sidebar .tutor-course-topic {
  background: transparent;
  border: 0;
}

/* ⚠️ Górna belka odtwarzacza była malowana `--atrament`. To działa w trybie
   jasnym (czarny pas), ale w ciemnym token się odwraca i pas robi się
   prawie biały — najjaśniejszy element na ciemnym ekranie, tuż nad filmem.
   Zamiast wypełnienia zostaje sama kreska, więc belka wygląda tak samo
   w obu trybach. */
/* ⚠️ Tutor celuje w tę belkę ścieżką z IDENTYFIKATOREM
   (`.tutor-course-single-content-wrapper #tutor-single-entry-content …`),
   a identyfikator bije dowolną liczbę klas. Powtarzamy tę samą ścieżkę —
   inaczej belka zostaje wypełniona kolorem podstawowym. */
body .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header,
body .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-single-page-top-bar,
body .tutor-course-topic-single-header,
body .tutor-single-page-top-bar,
body .tutor-course-single-header,
body [class*='topic-single-header'] {
  background: var(--papier);
  border-bottom: 1px solid var(--kreska);
  color: var(--atrament);
}
body .tutor-course-topic-single-header a,
body .tutor-course-topic-single-header button,
body [class*='topic-single-header'] a {
  color: var(--atrament);
}

/* ── odtwarzacz wideo ────────────────────────────────────────────────── */
/* ⚠️ Domyślna ramka YouTube przynosi czerwony pasek postępu, logo serwisu,
   podpowiedzi w trakcie i kafle „Więcej filmów" na końcu — czyli cudzą markę
   w środku płatnej lekcji. W ustawieniach Tutora włączony jest własny
   odtwarzacz (Plyr), a poniżej ubieramy go w kolory serwisu.
   Zmienne `--plyr-*` to interfejs samego Plyra — nie nadpisujemy jego reguł,
   tylko podajemy mu paletę. */
body .tutor-video-player,
body .plyr {
  /* ⚠️ Akcent, nie atrament: `--plyr-color-main` maluje pasek postępu
     i stany aktywne NA FILMIE. `--acc` (#7d8b9c) jest jedynym kolorem marki,
     który nie odwraca się razem z motywem, więc wygląda tak samo niezależnie
     od tego, czy strona jest jasna czy ciemna. */
  --plyr-color-main: var(--acc);
  --plyr-video-background: var(--noc);
  --plyr-video-control-color: #f4f3ef;
  --plyr-video-control-color-hover: #ffffff;
  --plyr-control-radius: 2px;
  --plyr-range-thumb-height: 12px;
  --plyr-range-track-height: 3px;
  --plyr-control-icon-size: 17px;
  --plyr-font-family: var(--f-body), sans-serif;
  --plyr-badge-background: var(--atrament);
  --plyr-badge-border-radius: 2px;
  --plyr-tooltip-radius: 2px;
  --plyr-menu-radius: 2px;
}
body .tutor-video-player,
body .plyr,
body .plyr__video-embed,
body .tutor-ratio {
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--kreska);
  background: var(--noc);
}
/* Pasek postępu na akcencie marki: to jedyny element sterowania, który niesie
   informację o położeniu — reszta może zostać neutralna. */
body .plyr--full-ui input[type='range'] {
  color: var(--acc);
}
/* ⚠️ KOLORY PRZYPIĘTE NA SZTYWNO, NIE PRZEZ TOKENY.
   Ten przycisk leży NA KLATCE FILMU, a nie na tle strony — a klatka nie
   zmienia się razem z motywem. Pierwsza wersja używała `--atrament`, który
   w trybie ciemnym jest prawie biały (#f4f3ef): zamiast przyciemnienia
   powstał biały kwadrat zasłaniający trójkąt odtwarzania.
   Ta sama pułapka jest już opisana w app/globals.css przy
   `.przycisk.obrys.na-ciemnym` — token odwraca się tam, gdzie tło nie.
   Kształt zostaje kołem: trójkąt w kole to znak odtwarzania czytelny bez
   tłumaczenia, a kwadrat na środku filmu wygląda jak błąd wczytywania. */
body .plyr__control--overlaid {
  background: rgba(13, 13, 16, .68);
  border-radius: 50%;
  border: 1px solid rgba(244, 243, 239, .34);
  color: #f4f3ef;
  padding: 18px;
  box-shadow: none;
  transition: background-color .25s var(--e), border-color .25s var(--e);
}
body .plyr__control--overlaid:hover,
body .plyr__control--overlaid:focus-visible {
  background: rgba(13, 13, 16, .88);
  border-color: rgba(244, 243, 239, .6);
}
body .plyr__control--overlaid svg {
  fill: #f4f3ef;
}

/* Plik wideo odtwarzany bez Plyra (źródło zewnętrzne) — sterowanie systemowe
   da się przynajmniej przestawić na kolor marki. */
body .tutor-video-player video,
body video.tutor-player {
  accent-color: var(--acc);
  border-radius: 2px;
  background: var(--noc);
}

/* ⚠️ „Oznacz jako ukończone" był napisem w kolorze `--karta` na czarnej belce.
   Po zdjęciu wypełnienia belki (sekcja 20) napis został na tle o tej samej
   jasności — kontrast 1,08:1, przycisk zniknął w OBU trybach. To regresja
   po tamtej zmianie, nie wada wtyczki.
   Robimy z niego przycisk obrysowy: widoczny na każdym tle, a przy najechaniu
   wypełnia się atramentem, jak pozostałe przyciski drugorzędne w serwisie. */
/* ⚠️ Pełna ścieżka wtyczki: identyfikator PLUS trzy klasy. Krótszy zapis
   z identyfikatorem i dwiema klasami wciąż przegrywał — przy równym
   identyfikatorze rozstrzyga liczba klas. */
body .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-topbar-mark-btn,
body .tutor-topbar-mark-btn.tutor-topbar-mark-btn,
body .tutor-single-page-top-bar .tutor-topbar-mark-btn {
  background: transparent;
  border: 1px solid var(--kreska);
  color: var(--atrament);
  border-radius: 2px;
  font-weight: 600;
  padding: 11px 18px;
  transition: background-color .25s var(--e), color .25s var(--e), border-color .25s var(--e);
}
body .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-topbar-mark-btn:hover,
body .tutor-topbar-mark-btn.tutor-topbar-mark-btn:hover,
body .tutor-single-page-top-bar .tutor-topbar-mark-btn:hover {
  background: var(--atrament);
  border-color: var(--atrament);
  color: var(--papier);
}
body .tutor-topbar-mark-btn.tutor-topbar-mark-btn i,
body .tutor-topbar-mark-btn.tutor-topbar-mark-btn span {
  color: inherit;
}


/* ── 21. tryb ciemny: kolory znaczeniowe i awatar ────────────────────── */

/* ⚠️ Kolory znaczeniowe były dobrane pod jasne tło i nie odwracały się
   razem z motywem. Zieleń #2f6a3f na papierze daje 6,4:1, ale na nocnym
   tle tylko 2,8:1 — data ukończenia robiła się nieczytelna. Ciemny motyw
   potrzebuje jaśniejszych wariantów tej samej barwy. */
@media (prefers-color-scheme: dark) {
  :root {
    --m-blad: #e08a80;
    --m-uwaga: #d8ac48;
    --m-ok: #74c48c;
  }
}
:root[data-theme='dark'] {
  --m-blad: #e08a80;
  --m-uwaga: #d8ac48;
  --m-ok: #74c48c;
}
:root[data-theme='light'] {
  --m-blad: #a8342a;
  --m-uwaga: #8a6209;
  --m-ok: #2f6a3f;
}

/* ⚠️ Awatar z inicjałami: tło idzie na `--atrament`, który odwraca się razem
   z motywem, a napis Tutor wpisuje na sztywno jako `rgba(255,255,255,.8)`.
   W trybie ciemnym dawało to biały napis na prawie białym kole — 1,11:1.
   Napis musi chodzić w parze z tłem, więc bierze `--papier`: przy ciemnym
   tle jest jasny, przy jasnym ciemny. */
body .tutor-avatar-text,
body [class*='tutor-avatar'] .tutor-avatar-text {
  color: var(--papier);
}

/* ── 22. podkreślenia w spisach ──────────────────────────────────────── */
/* ⚠️ To NIE jest reguła wtyczki — to domyślne zachowanie przeglądarki dla
   `<a>`. Motyw zeruje podkreślenie punktowo (menu, stopka, okruszki), ale
   spisy Tutora nigdy nie były na tej liście, więc każdy tytuł lekcji
   dostawał kreskę pod spodem.

   W spisie treści podkreślenie nic nie wnosi: cały wiersz jest klikalny,
   a kreska pod dwuwierszowym tytułem tnie go na pół i utrudnia czytanie.
   Zostawiamy je tam, gdzie niesie informację — przy odnośnikach wewnątrz
   zdania, gdzie trzeba odróżnić słowo klikalne od reszty tekstu. */
body .tutor-course-content-list-item a,
body .tutor-course-topic-item a,
body .tutor-course-single-sidebar-wrapper a,
body .tutor-lesson-sidebar a,
body .tutor-accordion-item a,
body .tutor-dashboard-menu-item-link,
body .tutor-course-topics-wrap a,
body .lesson-preview-title,
body .tutor-course-content-list-item-title,
body .tutor-course-content-list-item-title a {
  text-decoration: none;
}
/* Najechanie na wiersz podświetla całe pole, nie sam napis — tak samo jak
   pozycje menu w panelu. */
body .tutor-course-content-list-item {
  transition: background-color .2s var(--e);
}
body .tutor-course-content-list-item:hover a,
body .tutor-course-topic-item a:hover {
  text-decoration: none;
  color: var(--atrament);
}

/* ── 23. kalendarz w panelu ──────────────────────────────────────────── */
/* ⚠️ Kalendarz to skompilowana aplikacja React z paczki wtyczki — jego tła
   są wpisane na sztywno bielą i przeżywają tryb ciemny. Warstwa kolorów
   (`tutor-kolory.css`) ich nie obejmuje, bo generator czyta arkusze Tutora,
   a te style siedzą w osobnym pliku dodatku.

   To ten sam objaw, co wcześniej przy spisie lekcji: biały prostokąt na
   nocnym tle. Rozwiązanie też to samo — kolor karty zamiast bieli, kreska
   zamiast cienia. */
/* ⚠️ Dodatek celuje w te elementy przez IDENTYFIKATOR `#tutor_calendar_wrapper`,
   który bije dowolną liczbę klas. Trzeba powtórzyć tę samą ścieżkę. */
/* ⚠️ NIE ZAWĘŻAĆ tego kalendarza.
   To nie jest siatka miesiąca w siedmiu kolumnach, tylko ciągły PASEK dni
   z podpisem nad każdym z nich — dlatego nazwy dni powtarzają się wielokrotnie
   w jednym rzędzie. Próba ustawienia `max-width: 460px`, żeby wymusić układ
   siedmiokolumnowy, kończy się tym, że pasek wychodzi poza ramkę i jest
   ucinany: komponent nie zawija się, tylko przewija.
   Zostawiamy szerokość kolumny i pilnujemy tylko, żeby dało się przewinąć. */
body #tutor_calendar_wrapper .tutor-calendar-wrapper {
  overflow-x: auto;
}
body #tutor_calendar_wrapper .tutor-calendar-wrapper,
body #tutor_calendar_wrapper .tutor-calendar-events-wrapper,
body #tutor_calendar_wrapper .tutor-calendar-dropdown-list,
body #tutor_calendar_wrapper ul.tutor-calendar-dropdown-list,
body .tutor-calendar-wrapper,
body .tutor-calendar-events-wrapper,
body .tutor-calendar-dropdown-list {
  background: var(--karta);
  border: 1px solid var(--kreska);
  border-radius: 2px;
  box-shadow: none;
  color: var(--tekst);
}
body #tutor_calendar_wrapper li.tutor-calendar-dropdown-current-month,
body #tutor_calendar_wrapper li.tutor-calendar-dropdown-current-year,
body #tutor_calendar_wrapper .tutor-calendar-dropdown-list li:hover,
body .tutor-calendar-dropdown-current-month,
body .tutor-calendar-dropdown-current-year {
  background: var(--wlos);
  color: var(--atrament);
}
/* Nazwy dni w nagłówku siatki — drobne wersaliki, jak etykiety w serwisie. */
body .tutor-calendar-wrapper [class*='weekday'],
body .tutor-calendar-wrapper thead td,
body .tutor-calendar-wrapper thead th {
  color: var(--cichy);
  font-size: 12px;
  letter-spacing: .04em;
}
/* Dzień bieżący i dni z wydarzeniami. */
/* ⚠️ Dzisiejsza data. Tło brało się z reguły poniżej, ale KOLOR TEKSTU
   wygrywała warstwa kolorystyczna ścieżką z identyfikatorem
   (`#tutor_calendar_wrapper .tutor-custom-calendar …`) — wychodził ciemny
   napis na ciemnym wypełnieniu, 2,2:1. Powtarzamy pełną ścieżkę, żeby
   obie własności szły z jednego miejsca. */
body #tutor_calendar_wrapper .tutor-custom-calendar .tutor-calendar-date.today,
body #tutor_calendar_wrapper .tutor-calendar-date.today,
body .tutor-calendar-wrapper [class*='today'],
body .tutor-calendar-wrapper [class*='selected'] {
  background: var(--atrament);
  color: var(--papier);
  border-radius: 2px;
}
/* ⚠️ Sama cyfra siedzi w odnośniku WEWNĄTRZ komórki i ma własny kolor —
   ustawienie koloru na komórce jej nie dotyczy, bo `a` nie dziedziczy
   koloru, tylko dostaje swój. Bez tego wychodziła ciemna cyfra na ciemnym
   wypełnieniu: 2,2:1. */
body #tutor_calendar_wrapper .tutor-custom-calendar .tutor-calendar-date.today a,
body #tutor_calendar_wrapper .tutor-calendar-date.today a,
body .tutor-calendar-wrapper [class*='today'] a,
body .tutor-calendar-wrapper [class*='selected'] a {
  color: var(--papier);
  text-decoration: none;
}
body .tutor-calendar-wrapper [class*='has-event']::after,
body .tutor-calendar-wrapper [class*='event-dot'] {
  background: var(--acc);
}

/* Nagłówki wewnątrz kalendarza — dodatek maluje je własnym kolorem
   przez `#tutor_calendar_wrapper h3` i `h5`. */
body #tutor_calendar_wrapper h3,
body #tutor_calendar_wrapper h5 {
  color: var(--atrament);
  font-family: var(--f-body), sans-serif;
}
body #tutor_calendar_wrapper .select-wrapper select {
  background: var(--karta);
  color: var(--atrament);
  border: 1px solid var(--obrys-pola);
  border-radius: 2px;
}

/* ── 24. szuflada powiadomień rozpychała stronę ──────────────────────── */
/* ⚠️ Panel powiadomień jest `position: fixed` i schowany przez
   `transform: translateX(100%)` — czyli leży 360 px za prawą krawędzią okna.
   Mimo to dokument liczył jego szerokość i strona dawała się przewinąć
   w bok o te 360 px. `overflow-x: hidden` na `body` tego nie łapało, bo
   przewijał się element nadrzędny.

   Używamy `clip`, nie `hidden`: `hidden` zrobiłoby z korzenia kontener
   przewijania i rozbiłoby pozycjonowanie `fixed` — czyli sam pasek
   nawigacji, szuflada i baner zgody. `clip` przycina bez tego skutku
   ubocznego. */
html {
  overflow-x: clip;
}

/* ── 25. wiersz powitania na telefonie ───────────────────────────────── */
/* ⚠️ Wiersz ma dwie kolumny: po lewej awatar z powitaniem, po prawej dzwonek
   powiadomień. Na wąskim ekranie Tutor układa je JEDNA POD DRUGĄ, więc wiersz
   rósł ze 105 do 210 px — a druga połowa to sam dzwonek o boku 40 px stojący
   w pustce. Zostawiamy je obok siebie: dzwonek jest na tyle mały, że mieści
   się przy powitaniu nawet na 320 px. */
@media (max-width: 900px) {
  body .tutor-dashboard > .tutor-container > .tutor-row:first-child {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }
  body .tutor-dashboard .tutor-header-left-side {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
  body .tutor-dashboard .tutor-header-right-side {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    justify-content: flex-end;
  }
}