/*
Theme Name: Motyw Panel Ucznia TAKE
Theme URI: https://example.com/take
Description: Minimalistyczny, responsywny motyw dla panelu szkoły szermierki (plugin Dojo Manager). Menu zależne od uprawnień, logo TAKE, hamburger na mobile. Paleta: biel, czerń, czerwień.
Author: Konrad Tuszyński
Version: 1.17.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: take-panel
*/

:root {
	--take-ink: #1a1a1a;
	--take-muted: #6b6b6b;
	--take-accent: #c0392b;
	--take-accent-deep: #9c2b20;
	--take-border: #e3e3e3;
	--take-bg: #ffffff;
	--take-surface: #ffffff;      /* pasek górny, karty, menu użytkownika */
	--take-soft: #f4f4f4;         /* podświetlenie pozycji menu */
	--take-accent-soft: #fbeae8;  /* tło aktywnej pozycji menu */
	--take-hairline: #f0f0f0;     /* linia rozdzielająca wiersze listy */
	--take-on-accent: #ffffff;    /* tekst na tle akcentu */
	--take-accent-line: #f3d4d0;  /* obwódka przycisków w odcieniu akcentu */
	--take-span-bg: #1f6f8b;      /* wydarzenie kilkudniowe w siatce kalendarza */
	--take-span-soft: #dcecf2;    /* tło dnia objętego wydarzeniem kilkudniowym */
	--take-login-veil: rgba(255, 255, 255, .97); /* karta na zdjęciu ekranu logowania */
	--take-boot-veil: rgba(255, 255, 255, .72);  /* półprzezroczysta zasłona wczytywania */
	--take-topbar-h: 62px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--take-bg);
	color: var(--take-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--take-accent); }

/* =========================================================
   Górny pasek
   ========================================================= */
.take-topbar {
	position: sticky;
	top: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 clamp(14px, 3vw, 36px);
	min-height: var(--take-topbar-h);
	background: var(--take-surface);
	border-bottom: 1px solid var(--take-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
/* nie chowaj się pod paskiem admina WP */
body.admin-bar .take-topbar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .take-topbar { top: 46px; }
}

.take-brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
/* Logo jest wstawiane INLINE, więc `currentColor` w napisie „TAKE" bierze kolor
   z tego miejsca — dzięki temu w trybie ciemnym napis jest jasny. `aspect-ratio`
   jest podane wprost, bo inline SVG bez atrybutów width/height nie ma wymiarów
   własnych i przy samej wysokości potrafi wyjść zerowej szerokości. */
.take-logo { height: 34px; width: auto; display: block; aspect-ratio: 601.95 / 203.18; color: var(--take-ink); }
.take-brand-text {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 700; font-size: 1.05rem; color: var(--take-ink);
}
.take-brand-text::before { content: ""; width: 14px; height: 14px; background: var(--take-accent); border-radius: 2px; transform: rotate(-6deg); }

/* Nawigacja */
.take-nav { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.take-nav a {
	padding: 8px 14px; border-radius: 8px; color: var(--take-muted);
	text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap;
}
.take-nav a:hover { color: var(--take-ink); background: var(--take-soft); }
.take-nav a.is-active { color: var(--take-accent); background: var(--take-accent-soft); font-weight: 600; }

/* Pozycje materiałów żyją w hamburgerze. Na szerokim ekranie ich nie ma:
   materiały mają tam własny pasek pod nagłówkiem, a pokazanie ich dwa razy
   byłoby duplikatem menu. (Podpisy grup „Panel"/„Materiały" zdjęte 19.08.2026,
   odstęp podziału zdjęty 29.08.2026 — obie decyzje klienta; podział grup
   pokazują ikony.) */
.take-nav a.take-nav__res,
.take-nav span.take-nav__res { display: none; }

/* Menu użytkownika (details/summary, bez JS) */
/* Prawą krawędź paska trzyma teraz przełącznik trybu (stoi przed ikoną konta),
   więc `margin-left:auto` przeniosło się na niego. Sama nawigacja ma `flex:1`,
   dlatego przy braku przełącznika ikona konta i tak zostaje po prawej. */
.take-usermenu { position: relative; flex: 0 0 auto; }

/* Przełącznik jasny/ciemny/auto (prośba klienta z 18.08.2026) */
.take-thememenu { position: relative; flex: 0 0 auto; margin-left: auto; }
.take-thememenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.take-thememenu > summary::-webkit-details-marker { display: none; }
.take-thememenu__icon {
	width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--take-muted); border: 1px solid var(--take-border); background: var(--take-surface);
}
.take-thememenu > summary:hover .take-thememenu__icon { color: var(--take-ink); background: var(--take-soft); }
.take-thememenu[open] > summary .take-thememenu__icon { color: var(--take-accent); border-color: var(--take-accent); }
.take-thememenu__pop { min-width: 230px; }
.take-thememenu__opt {
	display: flex; align-items: center; gap: 8px; width: 100%;
	padding: 9px 12px; border: 0; border-radius: 7px; background: transparent;
	color: var(--take-ink); font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
}
.take-thememenu__opt:hover { background: var(--take-soft); }
.take-thememenu__check { width: 14px; color: var(--take-accent); visibility: hidden; }
.take-thememenu__opt.is-current { font-weight: 600; }
.take-thememenu__opt.is-current .take-thememenu__check { visibility: visible; }
.take-thememenu__hint { display: block; font-size: .78rem; color: var(--take-muted); font-weight: 400; }
.take-usermenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.take-usermenu > summary::-webkit-details-marker { display: none; }
.take-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--take-accent); color: var(--take-on-accent);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .85rem; letter-spacing: .02em;
	border: 2px solid #fff; box-shadow: 0 0 0 1px var(--take-border);
}
.take-usermenu[open] > summary .take-avatar { box-shadow: 0 0 0 2px var(--take-accent); }
.take-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.take-avatar--photo { background: transparent; }
.take-usermenu__pop {
	position: absolute; right: 0; left: auto; top: calc(100% + 10px);
	min-width: 200px; max-width: calc(100vw - 28px); background: var(--take-surface);
	border: 1px solid var(--take-border); border-radius: 10px;
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25); padding: 6px; z-index: 1000;
}
.take-usermenu__name { padding: 8px 12px; font-weight: 600; border-bottom: 1px solid var(--take-border); margin-bottom: 4px; }
.take-usermenu__pop a { display: block; padding: 9px 12px; border-radius: 7px; color: var(--take-ink); text-decoration: none; font-size: .92rem; }
.take-usermenu__pop a:hover { background: var(--take-soft); }
.take-usermenu__pop a:last-child { color: var(--take-accent); }

/* Przyciski */
.take-btn { display: inline-block; padding: 8px 15px; border-radius: 8px; background: var(--take-accent); color: var(--take-on-accent); text-decoration: none; font-size: .9rem; border: 1px solid var(--take-accent); }
.take-btn:hover { background: var(--take-accent-deep); color: var(--take-on-accent); }
.take-btn--ghost { background: transparent; color: var(--take-accent); }
.take-user { display: flex; align-items: center; margin-left: auto; }

/* Hamburger (mobile) */
.take-hamburger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 8px; margin-left: auto; }
/* ⛔ `pointer-events: none` NA KRESKACH JEST WARUNKIEM DZIAŁANIA PRZYCISKU, nie
   ozdobą: kliknięcie ma trafić w <label>, bo to ono przełącza ukryty checkbox.
   Dziecko przejmujące zdarzenie to ta sama klasa usterki, przez którą wersja
   0.20.0 (dwa <svg> w labelu) przestała otwierać menu na Androidzie. */
.take-hamburger span { width: 22px; height: 2px; background: var(--take-ink); border-radius: 2px; pointer-events: none; }

/* Drugi pasek — materiały (kalendarz, harmonogram, cennik…). Widzą go także
   uczniowie, dlatego jest wyraźnie oddzielony od paska roboczego: inne tło,
   mniejsze pozycje, przewijanie w poziomie na telefonie zamiast łamania. */
.take-subbar {
	position: sticky; top: var(--take-topbar-h); z-index: 890;
	background: var(--take-soft); border-bottom: 1px solid var(--take-border);
}
body.admin-bar .take-subbar { top: calc(var(--take-topbar-h) + 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .take-subbar { top: calc(var(--take-topbar-h) + 46px); }
}
.take-subbar__inner {
	display: flex; gap: 2px; align-items: center;
	padding: 6px clamp(14px, 3vw, 36px);
	overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.take-subbar__inner::-webkit-scrollbar { display: none; }
.take-subbar a {
	padding: 6px 12px; border-radius: 7px; white-space: nowrap;
	color: var(--take-muted); text-decoration: none; font-size: .88rem; font-weight: 500;
}
.take-subbar a:hover { color: var(--take-ink); background: var(--take-surface); }
.take-subbar a.is-active { color: var(--take-accent); background: var(--take-surface); font-weight: 600; }

/* =========================================================
   Treść / stopka
   ========================================================= */
.take-main { width: 100%; padding: clamp(18px, 3vw, 40px) clamp(12px, 3vw, 36px) 60px; }
.take-page-title { max-width: 1600px; margin: 0 auto 18px; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.wp-block-group.alignfull, .alignfull { width: 100%; }
.take-content { max-width: 820px; margin: 0 auto; }
.take-content img { max-width: 100%; height: auto; }
.take-footer { border-top: 1px solid var(--take-border); padding: 20px clamp(14px, 3vw, 36px); color: var(--take-muted); font-size: .82rem; text-align: center; }

/* Pulpit (strona główna, zalogowany) */
.take-dash {
	max-width: 1600px; margin: 0 auto;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.take-dash-card {
	background: var(--take-surface); border: 1px solid var(--take-border); border-radius: 12px;
	padding: 18px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.take-dash-card h2 {
	margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--take-accent);
	font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em;
}
.take-dash-card ul { list-style: none; margin: 0; padding: 0; }
.take-dash-card li { padding: 9px 0; border-bottom: 1px solid var(--take-hairline); display: flex; flex-direction: column; }
.take-dash-card li:last-child { border-bottom: none; }
.take-dash-sub { color: var(--take-muted); font-size: .82rem; }
.take-dash-empty { color: var(--take-muted); }
/* instruktor z avatarem */
.take-dash-card li.take-dash-person { flex-direction: row; align-items: center; gap: 12px; }
.take-dash-person__txt { display: flex; flex-direction: column; min-width: 0; }
.take-dash-ava {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
	object-fit: cover; background: var(--take-accent); color: var(--take-on-accent);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .82rem;
}

/* Lokalizacja z przyciskiem „Kieruj" (Google Maps) */
.take-dash-card li.take-dash-loc { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.take-dash-map {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 8px;
	background: var(--take-accent-soft); color: var(--take-accent);
	font-size: .82rem; font-weight: 600; text-decoration: none;
	border: 1px solid var(--take-accent-line); white-space: nowrap;
}
.take-dash-map:hover { background: var(--take-accent); color: var(--take-on-accent); border-color: var(--take-accent); }
.take-dash-map svg { display: block; }

/* Zajęcia (pulpit): badge dnia + zakres godzin + akcja „Nawiguj" przy krawędzi */
.take-dash-card li.take-dash-slot { flex-direction: row; align-items: center; gap: 12px; }
.take-dash-slot .take-dash-map { margin-left: auto; }
.take-dash-slot__day {
	flex: 0 0 auto; min-width: 40px; height: 30px; padding: 0 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--take-accent-soft); color: var(--take-accent);
	border-radius: 8px; font-weight: 700; font-size: .82rem;
}

/* Kalendarz na pulpicie (dane z kanału iCalendar kalendarza dojo).
   Wygląd własny, bo klient poprosił o treść ze strony w naszym układzie —
   wszystkie kolory ze zmiennych, żeby tryb ciemny działał bez drugiej wersji. */
.take-dash--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Pulpit ma od 19.08.2026 JEDNĄ kartę (klient: „usuń prawą stronę”). Bez limitu
   szerokości siatka rozciągnęłaby kalendarz na całe 1600 px kontenera, a wtedy
   komórki dni są ogromne i puste. Karta zostaje po lewej, nie wyśrodkowana —
   pod nią mają się kiedyś zmieścić kolejne bloki bez przeskoku układu. */
.take-dash--solo { grid-template-columns: minmax(0, 820px); }
.take-dash-note { margin: -4px 0 12px; color: var(--take-muted); font-size: .84rem; }
.take-dash-note--warn { color: var(--take-accent); }
.take-dash-sub-h {
	margin: 18px 0 8px; font-size: .84rem; text-transform: uppercase;
	letter-spacing: .05em; color: var(--take-muted);
}
.take-cal__month { font-weight: 700; margin-bottom: 10px; text-transform: capitalize; }
.take-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.take-cal__wd { text-align: center; font-size: .72rem; color: var(--take-muted); padding-bottom: 4px; }
.take-cal__day {
	position: relative; min-height: 38px; border-radius: 8px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	background: var(--take-soft); font-size: .82rem; color: var(--take-ink);
}
.take-cal__day--pad { background: transparent; }
.take-cal__day.has-events { background: var(--take-accent-soft); color: var(--take-accent); font-weight: 700; cursor: default; }
.take-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--take-accent); }
.take-cal__num { line-height: 1; }
.take-cal__dots { font-size: .6rem; line-height: 1; letter-spacing: 1px; }
.take-cal__next { list-style: none; margin: 0; padding: 0; }
/* `flex-direction: row` jawnie: reguła ogólna `.take-dash-card li` ustawia
   kolumnę, więc bez tego data i tytuł stawały jedno pod drugim, wyśrodkowane. */
.take-cal__next li { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--take-hairline); text-align: left; }
.take-cal__next li:last-child { border-bottom: none; }
/* Akcja „Nawiguj” przy krawędzi, tekst wydarzenia zajmuje resztę wiersza.
   `min-width: 0` na opisie jest konieczne — bez niego długi adres rozpycha
   wiersz i wypycha przycisk poza kartę. */
.take-cal__next .take-dash-person__txt { flex: 1 1 auto; min-width: 0; }
.take-cal__next .take-dash-map { margin-left: auto; }
.take-cal__next-date {
	flex: 0 0 auto; min-width: 52px; text-align: center;
	background: var(--take-accent-soft); color: var(--take-accent);
	border-radius: 8px; padding: 4px 6px; font-weight: 700; font-size: .78rem;
}
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* =========================================================
   Zasłona wczytywania — TYLKO W APLIKACJI (PWA)

   Klient 19.08.2026: „dodaj ładny, prosty loader tylko do PWA". W przeglądarce
   nie ma jej wcale: `display: none` jest domyślne, a pokazuje ją wyłącznie
   złożenie `display-mode: standalone` z klasą `take-booting`, którą ustawia
   skrypt w <head> (patrz `take_pwa_head()` w functions.php).

   Kolory ze zmiennych semantycznych, więc zasłona jest ciemna w trybie ciemnym.
   Hardkodowane `#fff` dałoby białe mignięcie przy ciemnym motywie i złamałoby
   niezmiennik „dwa wejścia trybu ciemnego" pilnowany testem 0.9.4.
   ========================================================= */
.take-boot { display: none; }
@media (display-mode: standalone) {
	:root.take-booting .take-boot {
		display: flex; position: fixed; inset: 0; z-index: 2000;
		flex-direction: column; align-items: center; justify-content: center;
		/* Klient 21.08.2026: „niech będzie na pół-przezroczystym ekranie, a nie
		   że cały czarny jest". Przez zasłonę widać już wyrenderowaną stronę,
		   więc wczytywanie wygląda na krótsze, niż gdy ekran jest pełny. */
		background: var(--take-boot-veil);
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
	:root.take-booting body { overflow: hidden; }
}
/* „zrob go większego" — tsuba 116 px zamiast logo 46 px z pierścieniem 26 px. */
.take-boot__tsuba {
	width: clamp(96px, 30vw, 140px); height: auto;
	animation: take-spin 1.6s linear infinite;
	transform-origin: 50% 50%;
}
@keyframes take-spin { to { transform: rotate(360deg); } }
/* Ruch bywa dolegliwy — przy wyłączonych animacjach zostaje nieruchoma tsuba. */
@media (prefers-reduced-motion: reduce) {
	.take-boot__tsuba { animation: none; }
}

/* =========================================================
   BANERY (instalacja PWA, przypomnienie o opłacie)

   Klient 21.08.2026: „Dodaj dark mod do banerów, tak żeby banery też były
   albo jasne, ciemne, albo auto w zależności jaki jest wybrany tryb".

   Dlatego wygląd stoi WYŁĄCZNIE na zmiennych semantycznych — te przełączają
   się same w obu wejściach trybu ciemnego (ustawienie urządzenia i przełącznik
   w pasku), więc nie ma tu ani jednego zapisanego na sztywno koloru i nie ma
   drugiej kopii tych reguł dla trybu ciemnego.
   ========================================================= */
.take-banner {
	position: relative;
	box-sizing: border-box;
	background: var(--take-surface);
	color: var(--take-ink);
	border: 1px solid var(--take-accent-line);
	border-radius: 14px;
	padding: 14px 40px 14px 16px;
	font-size: .92rem;
	line-height: 1.5;
}
.take-banner__x {
	position: absolute; top: 6px; right: 9px;
	border: 0; background: none; padding: 4px 6px;
	font-size: 22px; line-height: 1;
	color: var(--take-muted); cursor: pointer;
}
.take-banner__x:hover { color: var(--take-ink); }
.take-banner__row { display: flex; gap: 13px; align-items: flex-start; }
.take-banner__icon { border-radius: 11px; flex: 0 0 auto; }
.take-banner__txt { min-width: 0; }
.take-banner__lead { color: var(--take-accent); }
.take-banner__glyph { color: var(--take-accent); vertical-align: -2px; }

/* Baner instalacji na iPhone — przyklejony nad dolną krawędzią ekranu. */
.take-banner--install {
	position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 99999;
	max-width: 460px; margin: 0 auto;
	box-shadow: 0 20px 55px -20px rgba(0, 0, 0, .45);
}

/* Baner przypomnienia o opłacie — nad treścią, na telefonie i na komputerze. */
.take-banner--pay {
	display: flex; gap: 12px; align-items: flex-start;
	margin: 0 0 18px;
	background: var(--take-accent-soft);
	border-color: var(--take-accent);
}
.take-banner--pay .take-banner__lead { display: block; margin-bottom: 2px; }
.take-banner__mark {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--take-accent); color: var(--take-on-accent);
	font-weight: 700; font-size: .95rem;
}

/* ⛔ TA REGUŁA JEST WARUNKIEM DZIAŁANIA KRZYŻYKA, NIE OZDOBĄ.
   Atrybut `hidden` chowa element wyłącznie przez regułę przeglądarki
   `[hidden] { display: none }`, a ta należy do arkusza user-agent — więc
   PRZEGRYWA z każdą regułą autorską, niezależnie od specyficzności.
   `.take-banner--pay { display: flex }` wyżej jest właśnie taką regułą, więc
   bez tego wiersza kliknięcie krzyżyka ustawiało atrybut i NIC SIĘ NIE
   DZIAŁO (zmierzone: `display` zostawał `flex`, wysokość 187 px).
   Musi stać PO `.take-banner--pay` — przy równej specyficzności rozstrzyga
   kolejność. */
.take-banner[hidden] { display: none; }

/* Ekran powitalny (niezalogowany) */
.take-hero { max-width: 540px; margin: 8vh auto; text-align: center; padding: 0 16px; }
.take-hero__logo { height: 84px; width: auto; margin-bottom: 18px; }
.take-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 8px; }
.take-hero p { color: var(--take-muted); margin: 0 0 24px; }
.take-hero__cta { font-size: 1rem; padding: 11px 26px; }

/* =========================================================
   Pełnoekranowy ekran logowania (ze zdjęciem dojo w tle)
   ========================================================= */
.take-screen-login .take-topbar,
.take-screen-login .take-footer { display: none; }
.take-screen-login .take-main { padding: 0; }

.take-login {
	min-height: 100vh; min-height: 100dvh;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	background-color: #161212;
	background-image: linear-gradient(rgba(18, 16, 16, .55), rgba(18, 16, 16, .78)), var(--take-login-bg);
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
.take-login__card {
	width: 100%; max-width: 380px;
	background: var(--take-login-veil);
	border-radius: 16px;
	padding: 34px 30px 26px;
	box-shadow: 0 30px 80px -28px rgba(0, 0, 0, .7);
	text-align: center;
	backdrop-filter: saturate(1.1);
}
.take-login__logo { height: 60px; width: auto; margin: 0 auto 14px; display: block; color: var(--take-ink); }
.take-login__title { font-size: 1.5rem; margin: 0 0 4px; }
.take-login__sub { color: var(--take-muted); font-size: .92rem; margin: 0 0 22px; }

/* Formularz wp_login_form */
.take-login #loginform { text-align: left; }
.take-login #loginform p { margin: 0 0 14px; }
.take-login #loginform label { display: block; font-size: .85rem; font-weight: 600; color: var(--take-ink); margin-bottom: 5px; }
.take-login #loginform input[type="text"],
.take-login #loginform input[type="password"] {
	width: 100%; box-sizing: border-box;
	padding: 11px 13px; font-size: 1rem;
	border: 1px solid var(--take-border); border-radius: 9px;
	background: var(--take-surface); color: var(--take-ink);
}
.take-login #loginform input:focus {
	outline: none; border-color: var(--take-accent);
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .15);
}
.take-login .login-remember { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.take-login .login-remember label { display: inline; font-weight: 500; margin: 0; color: var(--take-muted); }
.take-login .login-remember input { margin: 0; }
.take-login #wp-submit {
	width: 100%; padding: 12px 16px; cursor: pointer;
	background: var(--take-accent); color: var(--take-on-accent);
	border: 1px solid var(--take-accent); border-radius: 9px;
	font-size: 1rem; font-weight: 600;
}
.take-login #wp-submit:hover { background: var(--take-accent-deep); border-color: var(--take-accent-deep); }
.take-login__lost { display: inline-block; margin-top: 16px; font-size: .85rem; color: var(--take-muted); text-decoration: none; }
.take-login__lost:hover { color: var(--take-accent); text-decoration: underline; }

/* Ekran wymuszonej zmiany hasła (wtyczka, 0.15.0). Formularz nie jest formularzem
   WordPressa, więc nie ma `#loginform` — reguły pól są wspólne dla obu, żeby oba
   ekrany wyglądały tak samo. Wyłącznie zmienne semantyczne, więc tryb ciemny
   działa bez drugiego bloku. */
.take-login__form { text-align: left; }
.take-login__form p { margin: 0 0 14px; }
.take-login__form label { display: block; font-size: .85rem; font-weight: 600; color: var(--take-ink); margin-bottom: 5px; }
.take-login__form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--take-border);
	border-radius: 8px;
	background: var(--take-surface);
	color: var(--take-ink);
	font: inherit;
}
.take-login__form input:focus { outline: 2px solid var(--take-accent); outline-offset: 1px; }
.take-login__form button[type="submit"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--take-accent);
	border-radius: 8px;
	background: var(--take-accent);
	color: var(--take-on-accent);
	font-weight: 700;
	cursor: pointer;
}
.take-login__form button[type="submit"]:hover { background: var(--take-accent-deep); border-color: var(--take-accent-deep); }
.take-login__rules {
	margin: 0 0 16px;
	padding-left: 18px;
	text-align: left;
	font-size: .82rem;
	color: var(--take-muted);
}
.take-login__rules li { margin: 2px 0; }
.take-login__error {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 3px solid var(--take-accent);
	background: var(--take-accent-soft);
	color: var(--take-ink);
	font-size: .88rem;
	text-align: left;
}

/* =========================================================
   Uwagi i życzenia — formularz na pulpicie (0.11.5)
   Klient 20.08.2026: dwa pola pod kalendarzem. Styl stoi na zmiennych motywu,
   więc tryb ciemny działa bez drugiego zestawu reguł.
   ⚠️ To MOTYW, nie panel: na pulpicie arkusz wtyczki nie jest wczytywany.
   ========================================================= */
.take-feedback__lead { margin: 0 0 14px; color: var(--take-muted); font-size: .92rem; }
.take-feedback__form { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.take-feedback__field { display: flex; flex-direction: column; gap: 6px; }
.take-feedback__field > span { font-size: .82rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--take-muted); }
.take-feedback__form textarea {
	width: 100%; padding: 10px 12px; font: inherit; font-size: .95rem;
	color: var(--take-ink); background: var(--take-surface);
	border: 1px solid var(--take-border); border-radius: 9px; resize: vertical;
	/* 16 px minimum, inaczej iOS przy tapnięciu w pole przybliża całą stronę. */
	font-size: max(16px, .95rem);
}
.take-feedback__form textarea:focus {
	outline: none; border-color: var(--take-accent);
	box-shadow: 0 0 0 3px var(--take-accent-soft);
}
/* Przycisk nie rozciąga się na całą szerokość karty — wysyłka to jedna akcja,
   a nie główna treść pulpitu. */
.take-feedback__form .take-btn { align-self: flex-start; cursor: pointer; }
.take-feedback__msg {
	margin: 0 0 14px; padding: 10px 14px; border-radius: 9px; font-size: .92rem;
	border: 1px solid var(--take-border); background: var(--take-soft);
}
.take-feedback__msg.is-ok { border-color: var(--take-accent-line); background: var(--take-accent-soft); color: var(--take-ink); }

/* =========================================================
   Responsywność — hamburger < 900px
   ========================================================= */
@media (max-width: 900px) {
	/* Pasek: logo po lewej, a avatar + hamburger dopchnięte do prawej. */
	.take-brand { margin-right: auto; }
	.take-usermenu { order: 2; position: static; margin-left: 0; }
	.take-thememenu { order: 2; position: static; margin-left: 0; }
	/* HAMBURGER JAKO FAB (klient 19.08.2026: „na mobilu ustaw hamburger jako FAB
	   (prawy dolny róg). tak aby menu było pod kciukiem").

	   ⚠️ `env(safe-area-inset-bottom)` jest konieczne, nie kosmetyczne: w trybie
	   PWA (standalone) dolna krawędź ekranu to pasek gestów iPhone'a, a przycisk
	   bez tego marginesu wchodzi pod niego i staje się nietrafialny.
	   ⚠️ `.take-main` ma pod spodem `padding-bottom` — bez tego FAB zasłania
	   ostatni wiersz treści. */
	.take-hamburger {
		display: flex; order: 3;
		position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
		width: 56px; height: 56px; margin: 0; padding: 0;
		align-items: center; justify-content: center; gap: 5px; flex-direction: column;
		border-radius: 50%;
		background: var(--take-accent); color: var(--take-on-accent);
		box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45);
		z-index: 1000;
	}
	/* ANIMACJA WYŁĄCZNIE PO TRANSFORMACJACH — `opacity` na środkowej kresce
	   zostawiało na iOS jej zaokrąglone końce jako „dwie kropki” obok znaku X
	   (klient 28.08.2026). `scaleX(0)` zwija kreskę do zerowej szerokości, więc
	   nie ma czego domalować, a `backface-visibility` wymusza czystą warstwę
	   kompozycji w Safari. NIE wracać tu do `opacity` ani do przełączania
	   `display` — to drugie zabrało działanie przycisku na Androidzie. */
	.take-hamburger span {
		width: 22px; height: 2px; background: var(--take-on-accent);
		transition: transform .2s ease;
		-webkit-backface-visibility: hidden; backface-visibility: hidden;
	}
	.take-nav-toggle:checked ~ .take-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.take-nav-toggle:checked ~ .take-hamburger span:nth-child(2) { transform: scaleX(0); }
	.take-nav-toggle:checked ~ .take-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Treść nie może kończyć się pod przyciskiem. 72px = dokładnie górna
	   krawędź FAB (16 od dołu + 56 średnicy) — mniej byłoby wjazdem treści pod
	   przycisk. Było 88 px; zmniejszone 28.08.2026 (klient: „Na mobilu mniejszy
	   odstep na koncu sekcji”), razem z ciaśniejszą stopką niżej. */
	.take-main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	.take-footer { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

	/* Menu konta — zakotwiczone do paska, wyrównane do prawej, nieucinane. */
	.take-usermenu__pop {
		top: 100%; right: clamp(14px, 3vw, 36px); left: auto; margin-top: 6px;
	}

	/* Nawigacja rozwija się POD paskiem jako pełnoszerokościowy panel (overlay),
	   a nie w obrębie paska. */
	.take-nav {
		order: 4;
		/* Panel wychodzi OD DOŁU, nad przyciskiem — inaczej menu otwierane
		   kciukiem w dolnym narożniku pojawiałoby się na drugim końcu ekranu.
		   `fixed`, nie `absolute`: pozycja liczy się od okna, a nie od paska. */
		position: fixed;
		bottom: calc(84px + env(safe-area-inset-bottom));
		left: 10px; right: 10px;
		border-radius: 14px;
		flex: none;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--take-surface);
		max-height: 0; overflow: hidden;
		transition: max-height .25s ease;
		padding: 0 16px;
		z-index: 999;

		/* ⛔ ZWINIĘTY PANEL NIE MOŻE MIEĆ OBRAMOWANIA ANI CIENIA — to była
		   „kreska nad menu" zgłoszona przez klienta 20.08.2026. Przy
		   `max-height: 0` i zerowym paddingu box ma wysokość 0, ale obramowanie
		   1 px z góry i z dołu rysuje się dalej, więc nad przyciskiem FAB
		   zostawała pozioma linia na całą szerokość ekranu (10 px od krawędzi),
		   a pod nią jeszcze smuga z `box-shadow`. Oba są tu ZGASZONE i wracają
		   dopiero na rozwiniętym panelu; `visibility: hidden` domyka sprawę na
		   wypadek dołożenia w przyszłości innego tła albo obramowania. */
		border: 0; box-shadow: none; visibility: hidden;

		/* ⛔ `flex-wrap: nowrap` JEST KONIECZNE, a nie kosmetyczne. Reguła bazowa
		   paska ma `flex-wrap: wrap`; przy `flex-direction: column` i wysokości
		   ograniczonej do 80vh pozycje, które się nie mieszczą, łamią się do
		   DRUGIEJ KOLUMNY, a ta wychodzi poza ekran i jest ucięta. Przy menu
		   kadry (15 pozycji po dołożeniu materiałów) tak właśnie było — złapane
		   zrzutem ekranu, którego sam pomiar wysokości nie wychwycił. */
		flex-wrap: nowrap;
	}
	.take-nav-toggle:checked ~ .take-nav {
		/* 70vh, nie 80vh: panel stoi teraz 84 px nad dolną krawędzią, więc przy
		   80vh górna krawędź wchodziłaby pod pasek nagłówka. */
		max-height: 70vh; padding-top: 6px; padding-bottom: 12px;
		/* Menu dłuższe niż ekran przewija się w pionie — nie łamie się i nie ucina. */
		overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
		/* Ramka i cień wracają dopiero tutaj — patrz komentarz przy `.take-nav`. */
		border: 1px solid var(--take-border);
		box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .45);
		visibility: visible;
	}
	.take-nav a {
		padding: 14px 6px; border-radius: 0;
		border-bottom: 1px solid var(--take-hairline); font-size: 1rem;
		/* Bez tego pozycje kurczyłyby się, gdy lista jest wyższa niż panel. */
		flex: 0 0 auto;
	}
	.take-nav a:last-child { border-bottom: none; }

	/* Menu mobilne = JEDNO menu w hamburgerze (prośba klienta z 18.08.2026:
	   „wtedy nie bedzie puste a nie bedzie 2 menu"). Kolejność w panelu:
	   najpierw pozycje robocze (u kadry), pod nimi materiały. */
	.take-nav a.take-nav__res { display: block; }
	/* Podpis grupy WRACA na telefonie, ale tylko dla czytnika ekranu: klasa
	   `screen-reader-text` zabiera go z widoku, a nie z drzewa dostępności. */
	.take-nav span.take-nav__res.screen-reader-text { display: block; }

	/* Odstępu podziału praca/materiały JUŻ NIE MA (klient 29.08.2026: „w wersji
	   mobilnej - odstęp między menu może zniknąć całkowicie (widać różnicę ze
	   względu na ikony)”). Historia: kreska (19.08) → sam odstęp (20.08) →
	   odstęp tylko u kadry (28.08) → nic (29.08). Element separatora zniknął
	   z header.php razem z jego regułami — podział pokazują ikony. */

	/* Ikona domu przy Pulpicie widoczna TYLKO w hamburgerze (klient 29.08.2026:
	   „dodaj ikonę domu do »panel« - też monokolorystyczną (w hamburgerze)”).
	   Reguła bazowa ukrywa ją poza tym blokiem — na komputerze pozycje robocze
	   zostają czysto tekstowe, jak dotąd.
	   ⚠️ SELEKTOR MA CZŁON `a` CELOWO: reguła bazowa `display: none` stoi
	   W PLIKU PÓŹNIEJ niż ten blok @media, a media query nie podnosi
	   specyficzności — przy równych selektorach wygrywałaby zawsze ona
	   i ikona nie pokazałaby się nigdzie. (0,2,1) > (0,2,0). */
	.take-nav a .take-nav__ico--work { display: inline-flex; }

	/* Drugi pasek zniknął z telefonu, bo jego pozycje są teraz w hamburgerze.
	   ⚠️ Ten sam próg (900px), pod którym pojawia się hamburger — przy dwóch
	   różnych progach powstałoby okno szerokości, w którym menu jest podwójne
	   albo nie ma go wcale. */
	.take-subbar { display: none; }
}

@media (max-width: 480px) {
	.take-logo { height: 28px; }
	.take-main { padding-left: 10px; padding-right: 10px; }
}

/* =========================================================================
   TRYB CIEMNY (prośba klienta z 18.08.2026, przełącznik dołożony 18.08.2026).

   Motyw i panel muszą przełączać się RAZEM — ciemna treść w jasnej ramce
   nagłówka wygląda jak usterka. Wartości odpowiadają tym z dojo.css, żeby
   pasek górny i karta panelu miały ten sam odcień.

   DWA WEJŚCIA do tych samych wartości, bo tryb ma dwa źródła:
     • ustawienie urządzenia — działa, dopóki nikt nie wybrał trybu jasnego
       ręcznie (stąd `:not([data-take-theme="light"])`; „auto" = brak atrybutu);
     • wybór z przełącznika w pasku — atrybut `data-take-theme="dark"` na <html>.
   Wartości MUSZĄ być w obu blokach identyczne. Pilnuje tego asercja w teście
   0.9.4 („oba wejścia trybu ciemnego mają ten sam zestaw zmiennych"), bo
   rozjazd byłby widoczny tylko w jednym z dwóch sposobów włączenia trybu.
   ========================================================================= */
@media (prefers-color-scheme: dark) {
	:root:not([data-take-theme="light"]) {
		--take-ink: #ececec;
		--take-muted: #a0a0a0;
		--take-accent: #ef6a5a;
		--take-accent-deep: #f58575;
		--take-border: #383c41;
		--take-bg: #16181a;
		--take-surface: #1e2124;
		--take-soft: #24272b;
		--take-accent-soft: #3a2320;
		--take-hairline: #2b2f33;
		--take-on-accent: #141618;
		--take-accent-line: #5a352f;
		--take-span-bg: #6fb6cf;
		--take-span-soft: #1d3b45;
		--take-login-veil: rgba(24, 26, 28, .95);
		--take-boot-veil: rgba(18, 20, 22, .66);
	}

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	textarea,
	select {
		background: var(--take-soft);
		color: var(--take-ink);
		border-color: var(--take-border);
	}
}

:root[data-take-theme="dark"] {
		--take-ink: #ececec;
		--take-muted: #a0a0a0;
		--take-accent: #ef6a5a;
		--take-accent-deep: #f58575;
		--take-border: #383c41;
		--take-bg: #16181a;
		--take-surface: #1e2124;
		--take-soft: #24272b;
		--take-accent-soft: #3a2320;
		--take-hairline: #2b2f33;
		--take-on-accent: #141618;
		--take-accent-line: #5a352f;
		--take-span-bg: #6fb6cf;
		--take-span-soft: #1d3b45;
		--take-login-veil: rgba(24, 26, 28, .95);
		--take-boot-veil: rgba(18, 20, 22, .66);
}

:root[data-take-theme="dark"] input[type="text"],
:root[data-take-theme="dark"] input[type="email"],
:root[data-take-theme="dark"] input[type="password"],
:root[data-take-theme="dark"] input[type="search"],
:root[data-take-theme="dark"] textarea,
:root[data-take-theme="dark"] select {
	background: var(--take-soft);
	color: var(--take-ink);
	border-color: var(--take-border);
}

/* Ramka avatara: w jasnym trybie biała obwódka odcina go od paska, w ciemnym
   biała kreska rzuca się w oczy mocniej niż sam avatar. Kolor z powierzchni
   paska działa w obu trybach, więc reguła jest jedna, bez duplikatu. */
.take-avatar { border-color: var(--take-surface); }

/* Podglądanie hasła na ekranie logowania (polecenie klienta z 26.08.2026).
   Przycisk siedzi WEWNĄTRZ pola, więc pole nie zmienia szerokości i układ
   karty logowania zostaje ten sam. Kolory wyłącznie ze zmiennych palety —
   bez tego przycisk byłby niewidoczny w trybie ciemnym. */
.take-pw { position: relative; display: block; }
/* ⛔ MIEJSCE NA PRZYCISK MUSI BYĆ WYMUSZONE SELEKTOREM Z ID.
   `.take-login #loginform input[type="password"]` (wyżej w tym pliku) ma
   specyficzność (1,1,1) i ustawia `padding: 11px 13px`, więc samo
   `.take-pw input` (0,1,1) przegrywa BEZWZGLĘDNIE — nie da się tego naprawić
   kolejnością reguł. Bez tej pary selektorów przycisk oka nakłada się na
   wpisywane hasło. Ta sama pułapka co checkboxy w 0.7.3 i pola daty w 0.13.0:
   reguła ogólna bije szczegółową. Ogólny selektor zostaje dla ewentualnych
   innych miejsc, wersja z ID obsługuje ekran logowania. */
.take-pw input { padding-right: 44px; }
.take-login #loginform .take-pw input { padding-right: 44px; }
.take-pw__btn {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0;
	background: transparent; border: 0; border-radius: 6px;
	color: var(--take-muted); cursor: pointer;
}
.take-pw__btn:hover { color: var(--take-ink); background: var(--take-soft); }
.take-pw__btn:focus-visible { outline: 2px solid var(--take-accent); outline-offset: 1px; }
.take-pw__btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Siatka kalendarza: dzień z wydarzeniami jest przyciskiem (kliknięcie otwiera
   okno szczegółów — polecenie klienta z 26.08.2026). Musi wyglądać dokładnie
   jak dotychczasowy `<span>`, więc zerujemy własny wygląd przycisku. */
button.take-cal__day {
	font: inherit; color: inherit; background: none;
	border: 0; padding: 0; margin: 0;
	cursor: pointer; text-align: center;
}
/* ⛔ KURSOR MUSI BIĆ `.take-cal__day.has-events` (0,2,0), które ustawia
   `cursor: default` — a KAŻDY przycisk dnia ma tę klasę, bo przycisk powstaje
   tylko dla dni z wydarzeniami. Bez tej reguły kursor nigdy nie pokazywał, że
   w dzień da się kliknąć (zmierzone: `cursor=default` na wyrenderowanej
   siatce). Trzecia odsłona tej samej pułapki co checkboxy 0.7.3, pola daty
   0.13.0 i padding pola hasła w tym samym wydaniu. */
button.take-cal__day.has-events { cursor: pointer; }
button.take-cal__day:hover { background: var(--take-soft); }
button.take-cal__day:focus-visible { outline: 2px solid var(--take-accent); outline-offset: 1px; }

/* Wydarzenie kilkudniowe (obóz, tydzień iaijutsu) — inny kolor niż zwykły
   trening, na polecenie klienta („najlepiej w innym kolorze”). Pasek u dołu
   komórki ciągnie się przez wszystkie dni zakresu, bo klasę ma każdy z nich. */
.take-cal__day.has-span { background: var(--take-span-soft); }
.take-cal__day.has-span::after {
	content: ""; display: block;
	height: 3px; border-radius: 2px;
	margin: 2px 2px 0;
	background: var(--take-span-bg);
}
.take-cal__day.has-span .take-cal__dots { color: var(--take-span-bg); }

/* Okno szczegółów dnia. */
.take-daypop {
	max-width: min(420px, calc(100vw - 32px));
	width: 100%;
	border: 1px solid var(--take-border);
	border-radius: 12px;
	padding: 0;
	background: var(--take-surface);
	color: var(--take-ink);
}
.take-daypop::backdrop { background: rgba(0, 0, 0, .45); }
.take-daypop__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 16px; border-bottom: 1px solid var(--take-hairline);
}
.take-daypop__title { margin: 0; font-size: 1rem; }
.take-daypop__x {
	background: none; border: 0; padding: 4px 8px; border-radius: 6px;
	font-size: 1.4rem; line-height: 1; color: var(--take-muted); cursor: pointer;
}
.take-daypop__x:hover { color: var(--take-ink); background: var(--take-soft); }
/* Selektor z rodzicem `.take-daypop` (0,2,0) celowo: reguły ogólne kart pulpitu
   w rodzaju `.take-dash-card ul { padding: 0 }` mają (0,1,1) i przy krótszym
   selektorze zerowały ten padding, gdy okno stało wewnątrz karty — tekst
   wydarzenia dotykał ramki (zgłoszenie klienta, 26.08.2026). Okno jest dziś
   renderowane POZA kartą, ale zapas specyficzności zostaje, żeby przesunięcie
   go w drzewie nie zepsuło odstępów po raz drugi. */
.take-daypop .take-daypop__list { list-style: none; margin: 0; padding: 8px 16px 16px; }
.take-daypop .take-daypop__list li {
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px 0; border-bottom: 1px solid var(--take-hairline);
}
.take-daypop .take-daypop__list li:last-child { border-bottom: 0; }
.take-daypop__list span { color: var(--take-muted); font-size: .9rem; }
.take-daypop__nav {
	align-self: flex-start; margin-top: 6px;
	padding: 5px 10px; border-radius: 8px;
	border: 1px solid var(--take-accent-line);
	color: var(--take-accent); text-decoration: none; font-size: .9rem;
}
.take-daypop__nav:hover { background: var(--take-accent-soft); }

/* =========================================================================
   1.16.0 — ikony menu ogólnodostępnego (klient 28.08.2026: „Do ogólnodostępnego
   menu dodaj ikony. Wzoruj się na ikonach z naszej strony internetowej. […]
   To mają być ikony z czcionek”).

   Font Awesome 6 Free (solid) — ten sam krój co na katorishintoryu.pl. Plik
   fontu leży w motywie (assets/fonts), nie na CDN: aplikacja jest PWA i ma
   działać bez zewnętrznych zależności. Licencja fontu: SIL OFL 1.1.
   Ikony widać wyłącznie w hamburgerze (`.take-nav__res` na komputerze jest
   ukryte, więc font na komputerze w ogóle się nie pobiera — przeglądarka
   ściąga font dopiero przy wyrenderowanym tekście). */
@font-face {
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("assets/fonts/fa-solid-900.woff2") format("woff2");
}
.take-nav__ico {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-style: normal;
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; margin-right: 10px;
	font-size: .95em; color: var(--take-muted);
	-webkit-font-smoothing: antialiased;
}
/* (Klasa `--emoji` zniknęła 29.08.2026 razem z emoji flagi Japonii — klient:
   „zrób ją monokolorystyczną jak pozostałe”; Wizyta w Dojo Sugino ma teraz
   glif torii z FA, jak reszta pozycji.) */
/* Dom przy Pulpicie: poza hamburgerem ukryty — pozycje robocze na komputerze
   są tekstowe. Odwrotność `.take-nav__res` (tam ukrywa się całe pozycje,
   tu tylko ikonę); blok @media 900px robi z tego `inline-flex`. */
.take-nav .take-nav__ico--work { display: none; }
.take-nav a.is-active .take-nav__ico { color: var(--take-accent); }

/* Wpis w oknie dnia z pionową kreską w kolorze wydarzenia z siatki (klient
   28.08.2026: „dodaj kolor tla/ pionowa kreskę jak kolor na kalendarzu tego
   wydarzenia”). Czerwień = trening, turkus = wydarzenie kilkudniowe. */
.take-daypop .take-daypop__list li { border-left: 3px solid var(--take-accent); padding-left: 10px; }
.take-daypop .take-daypop__list li.is-span { border-left-color: var(--take-span-bg); }