/* Asystent Zen — ta sama typografia co ekran telefonu: czysta czerń na
   papierze, jedna para pism, linie włoskowate, dużo powietrza. */

@font-face {
  font-family: 'Garamond Zen';
  src: url('/statyczne/fonty/cormorant_garamond.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Garamond Zen';
  src: url('/statyczne/fonty/cormorant_garamond_italic.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Zen';
  src: url('/statyczne/fonty/ibm_plex_mono.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Zen';
  src: url('/statyczne/fonty/ibm_plex_mono_medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  --tlo: #eceae4;
  --papier: #f5f3ee;
  --atrament: #141414;
  --szary: #8d8a83;
  --szary-ciemny: #75726b;
  --kreska: rgba(20, 20, 20, 0.14);
  --serif: 'Garamond Zen', Georgia, serif;
  --mono: 'Plex Zen', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--atrament);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--atrament); text-decoration: none; }
a:hover { color: var(--szary-ciemny); }

/* ── Nawigacja ─────────────────────────────────────────────────────────── */
.nawigacja {
  display: flex;
  align-items: baseline;
  gap: 32px;
  padding: 22px 40px;
  border-bottom: 1px solid var(--kreska);
  flex-wrap: wrap;
}
.marka { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: .01em; }
.marka span { color: var(--szary); margin-left: 6px; }
/* Nigdy nie zawijamy paska na drugi rząd — przy wąskim oknie przewija się
   w poziomie. Zawijanie zjadało pierwszy ekran, a skracanie listy pozycji
   ma granicę: sześć to już minimum sensownej nawigacji. */
.linki {
  display: flex;
  gap: 22px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.linki::-webkit-scrollbar { display: none; }
.linki a {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--szary);
  padding-bottom: 3px; border-bottom: 1px solid transparent; white-space: nowrap;
}
.linki a:hover { color: var(--atrament); }
.linki a.aktywny { color: var(--atrament); border-bottom-color: var(--atrament); }
.wyloguj button {
  background: none; border: none; cursor: pointer; padding: 0; color: var(--szary);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.wyloguj button:hover { color: var(--atrament); }

/* ── Układ ─────────────────────────────────────────────────────────────── */
.tresc { max-width: 1080px; margin: 0 auto; padding: 44px 40px 96px; }
.naglowek-strony { margin-bottom: 36px; }
.nadtytul {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--szary);
  margin-bottom: 12px;
}
h1 { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.2; margin: 0; }
h2 {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--szary);
  font-weight: 400; margin: 44px 0 16px;
}
h2:first-child { margin-top: 0; }
p { margin: 0 0 14px; }
.opis { color: var(--szary-ciemny); max-width: 62ch; }

.siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.dwie-kolumny { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; }


/* ── Karty i listy ─────────────────────────────────────────────────────── */
.karta {
  background: var(--papier);
  border: 1px solid var(--kreska);
  padding: 22px 24px;
}
.karta h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 0 0 6px; }

.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: 14px 0; border-bottom: 1px solid var(--kreska); }
.lista li:last-child { border-bottom: none; }
.lista .tytul { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.lista .meta { font-size: 11px; color: var(--szary); letter-spacing: .04em; margin-top: 2px; }
.lista .fragment { color: var(--szary-ciemny); font-size: 13px; margin-top: 4px; }
mark { background: rgba(20, 20, 20, .1); color: inherit; padding: 0 2px; }

.pusto { color: var(--szary); font-style: italic; font-family: var(--serif); font-size: 17px; }

/* ── Formularze ────────────────────────────────────────────────────────── */
label {
  display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--szary); margin-bottom: 7px;
}
input[type=text], input[type=password], input[type=search], input[type=number],
input[type=datetime-local], input[type=date], textarea, select {
  width: 100%; padding: 11px 13px; font-family: var(--mono); font-size: 14px;
  color: var(--atrament); background: var(--papier); border: 1px solid var(--kreska);
  border-radius: 0;
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--atrament); outline-offset: -1px; }
textarea { resize: vertical; min-height: 180px; line-height: 1.7; }
textarea.duza { min-height: 420px; }
.pole { margin-bottom: 22px; }
.pole .podpowiedz { font-size: 11px; color: var(--szary); margin-top: 6px; }
.rzad { display: flex; gap: 16px; flex-wrap: wrap; }
.rzad > * { flex: 1; min-width: 180px; }

button, .przycisk {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 11px 20px;
  border: 1px solid var(--atrament); background: transparent; color: var(--atrament);
  cursor: pointer; display: inline-block;
}
button:hover, .przycisk:hover { background: rgba(20, 20, 20, .05); }
button.mocny, .przycisk.mocny { background: var(--atrament); color: var(--tlo); font-weight: 500; }
button.mocny:hover { background: #000; }
button.groźny { border-color: #8a2020; color: #8a2020; }
button.groźny:hover { background: rgba(138, 32, 32, .07); }
.akcje { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }

/* ── Etykiety i znaczniki ──────────────────────────────────────────────── */
.tag {
  display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--kreska); padding: 3px 9px; margin: 0 5px 5px 0; color: var(--szary-ciemny);
}
.tag.aktywny { border-color: var(--atrament); color: var(--atrament); }

.stan { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--kreska); font-size: 13px; }
.stan:last-child { border-bottom: none; }
.stan .wartosc { color: var(--szary-ciemny); }
.stan .wartosc.ok { color: #2c6e35; }
.stan .wartosc.uwaga { color: #8a5a20; }

.duza-liczba { font-family: var(--serif); font-size: 52px; line-height: 1; }
.pod-liczba { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--szary); margin-top: 4px; }

/* ── Tabela ────────────────────────────────────────────────────────────── */
.przewijana { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; font-weight: 400; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--szary); padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--atrament); white-space: nowrap;
}
td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--kreska); vertical-align: top; }
td.nowrap { white-space: nowrap; color: var(--szary); }

/* ── Zakładki ──────────────────────────────────────────────────────────── */
.zakladki { display: flex; gap: 24px; border-bottom: 1px solid var(--kreska); margin-bottom: 28px; flex-wrap: wrap; }
.zakladki a {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--szary);
  padding-bottom: 11px; border-bottom: 1px solid transparent; margin-bottom: -1px;
}
.zakladki a.aktywna { color: var(--atrament); border-bottom-color: var(--atrament); }

/* ── Logowanie ─────────────────────────────────────────────────────────── */
.brama { max-width: 380px; margin: 14vh auto; padding: 0 24px; }
.brama h1 { font-size: 30px; margin-bottom: 10px; }
.brama .opis { font-size: 13px; margin-bottom: 30px; }
.blad {
  border-left: 2px solid #8a2020; padding: 10px 14px; margin-bottom: 22px;
  color: #8a2020; font-size: 13px; background: rgba(138, 32, 32, .05);
}

/* ── Rozmowa ───────────────────────────────────────────────────────────── */
.rozmowa { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; min-height: 200px; }
.wpis { max-width: 74ch; }
.wpis .kto { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--szary); margin-bottom: 5px; }
.wpis.ja .tekst { font-family: var(--mono); font-size: 14px; }
.wpis.on .tekst { font-family: var(--serif); font-size: 21px; line-height: 1.5; }
.wpis .narzedzia { font-size: 10px; letter-spacing: .1em; color: var(--szary); margin-top: 7px; }
.strona-ekranu {
  border: 1px solid var(--kreska); background: var(--papier); padding: 18px 20px; margin-top: 12px;
}
.strona-ekranu .sekcja { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--szary); }
.strona-ekranu .tytul-strony { font-family: var(--serif); font-size: 20px; margin-top: 8px; }
.strona-ekranu .tresc-strony { white-space: pre-wrap; margin-top: 8px; }
.strona-ekranu .dopisek { font-family: var(--serif); font-style: italic; color: var(--szary-ciemny); margin-top: 10px; }

.pisze { color: var(--szary); font-style: italic; font-family: var(--serif); font-size: 18px; }

/* Treść notatki renderowana jako zwykły tekst — bez HTML-a z bazy */
.tresc-notatki { white-space: pre-wrap; font-size: 14.5px; line-height: 1.8; max-width: 74ch; }

/* ── Klasy pomocnicze ───────────────────────────────────────────────────
   CSP celowo nie dopuszcza `unsafe-inline`, więc atrybuty style="…" są
   przez przeglądarkę po cichu ignorowane — wyglądają, jakby działały,
   ale nie działają. Wszystkie odstępy muszą więc żyć tutaj.

   Wartości znormalizowane do pięciostopniowej skali zamiast dwudziestu
   przypadkowych liczb: jeden rytm pionowy w całym panelu. */
:root {
  --odstep-xs: 12px;
  --odstep-s: 18px;
  --odstep-m: 26px;
  --odstep-l: 36px;
  --odstep-xl: 52px;
}

.gora-xs { margin-top: var(--odstep-xs); }
.gora-s  { margin-top: var(--odstep-s); }
.gora-m  { margin-top: var(--odstep-m); }
.gora-l  { margin-top: var(--odstep-l); }
.gora-xl { margin-top: var(--odstep-xl); }

.dol-xs { margin-bottom: var(--odstep-xs); }
.dol-s  { margin-bottom: var(--odstep-s); }
.dol-m  { margin-bottom: var(--odstep-m); }
.dol-l  { margin-bottom: var(--odstep-l); }

/* Element w rzędzie flex, który ma objąć treść zamiast się rozciągać */
.zwarty { flex: 0 0 auto; }
/* `flex-wrap` jest tu konieczne, a nie kosmetyczne: pozycje mają `flex: 0 0 auto`
   (klasa .zwarty), więc bez zawijania rząd czterech–pięciu przycisków nie mieści
   się w wąskim oknie i rozpycha CAŁĄ stronę w poziomie. Pasek nawigacji celowo
   nie zawija i przewija się zamiast tego, ale tam pozycji jest stała liczba —
   tutaj przybywają z każdą nową funkcją. */
.rzad-ciasny { display: flex; gap: 8px; flex-wrap: wrap; }

/* Przycisk w komórce tabeli */
.maly { padding: 4px 12px; font-size: 11px; }

.waskie { max-width: 200px; }
.pole-niskie { min-height: 90px; }
.pole-srednie { min-height: 120px; }

.przygaszone { opacity: .45; }
.drobne { font-size: 12px; color: var(--szary); }

/* Podpowiedź doklejona pod pole formularza */
.podpowiedz-pola { margin-top: -8px; }

/* Podpowiedź stojąca obok przycisku, nie pod nim */
.obok { margin-left: var(--odstep-xs); }

/* Treść briefingu — czytana jak cytat, z zachowaniem łamań wierszy */
.cytat {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  margin-top: var(--odstep-xs);
  white-space: pre-wrap;
}

/* ── Podgląd zdjęcia ───────────────────────────────────────────────────── */
.podglad-zdjecia {
  max-width: 100%;
  max-height: 340px;
  border: 1px solid rgba(20, 20, 20, .14);
  filter: grayscale(1) contrast(1.15);
}

/* ── Kalendarz miesięczny ──────────────────────────────────────────────── */
table.miesiac { table-layout: fixed; min-width: 720px; }
table.miesiac th { text-align: center; padding-bottom: 8px; }
table.miesiac td {
  /* Wysokość dobrana tak, by trzy wydarzenia po dwie linie plus „+N"
     zmieściły się BEZ rozpychania wiersza — inaczej jeden zajęty dzień
     rozjeżdża całą siatkę miesiąca. */
  height: 144px; width: 14.28%; vertical-align: top; padding: 6px 6px 4px;
  border: 1px solid var(--kreska);
  /* Druga linia obrony przed rozlaniem długiego tytułu na sąsiednie dni.
     Sama komórka też musi ciąć — samo `overflow` na wydarzeniu wystarcza
     dopóki nikt nie zmieni mu typu wyświetlania. */
  overflow: hidden;
}
table.miesiac td.poza { background: rgba(20, 20, 20, .02); }
table.miesiac td.poza .numer-dnia { color: var(--szary); }
table.miesiac td.dzis { outline: 1px solid var(--atrament); outline-offset: -1px; }
.numer-dnia {
  display: inline-block; font-family: var(--serif); font-size: 17px;
  font-weight: 500; margin-bottom: 4px;
  line-height: 1.2;          /* bez tego dziedziczy 1.65 z body i zjada 28 px */
}
/* Kluczowe: element liniowy IGNORUJE overflow i text-overflow. Gdy wydarzenie
   stało się odnośnikiem (<a> jest domyślnie liniowy), przycinanie po cichu
   przestało działać i długi tytuł rozlewał się z piątku na sobotę i niedzielę.
   Stąd jawny tryb wyświetlania — to warunek działania, nie kosmetyka.

   Dwie linie zamiast jednej, bo w kolumnie szerokiej na ~1/7 ekranu jedna
   mieści około czternastu znaków: „Wyjazd do Grą…" nie mówi nic. Dwie mieszczą
   dość, żeby rozpoznać wydarzenie bez otwierania go. */
.kropka-wydarzenia {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10.5px; line-height: 1.35;
  overflow-wrap: anywhere;              /* żeby długie słowo też się złamało */
  border-left: 2px solid var(--atrament);
  padding-left: 5px; margin-bottom: 2px;
}
.kropka-wydarzenia .godz { color: var(--szary-ciemny); }
a.kropka-wydarzenia { color: inherit; cursor: pointer; }
a.kropka-wydarzenia:hover { border-left-color: var(--szary-ciemny); background: rgba(20,20,20,.04); }
.wiecej-dnia { font-size: 10px; color: var(--szary); margin-top: 2px; }

details.gora-xs[open] { outline: 1px solid var(--kreska); outline-offset: 4px; }

/* ── Oś godzinowa dnia ─────────────────────────────────────────────────── */
table.os-dnia { width: 100%; border-collapse: collapse; }
table.os-dnia td { border-bottom: 1px solid var(--kreska); padding: 6px 10px 6px 0; }
.godzina-osi {
  width: 56px; white-space: nowrap; color: var(--szary);
  font-size: 11px; letter-spacing: .08em; vertical-align: top; padding-top: 9px;
}
/* Puste godziny mają być ciche — to tło dnia, nie jego treść. */
table.os-dnia tr:not(.zajeta) td { height: 26px; }
table.os-dnia tr.zajeta .godzina-osi { color: var(--atrament); }
table.os-dnia tr.teraz .godzina-osi { font-weight: 500; }
table.os-dnia tr.teraz td { border-bottom-color: var(--atrament); }
.blok-osi {
  display: block; border-left: 2px solid var(--atrament);
  padding: 3px 0 3px 10px; margin: 2px 0; color: inherit;
}
a.blok-osi:hover { background: rgba(20, 20, 20, .04); color: inherit; }
.tytul-osi { font-family: var(--serif); font-size: 17px; font-weight: 500; display: block; }
.blok-osi .meta { font-size: 11px; color: var(--szary); letter-spacing: .04em; }
.ciag-osi { font-size: 11px; color: var(--szary); padding-left: 12px; }

/* ── Odliczanie do egzaminów ───────────────────────────────────────────── */
.odliczanie { display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline; }
.odliczanie .pozycja { min-width: 96px; }
.odliczanie .ile { font-family: var(--serif); font-size: 38px; line-height: 1; }
.odliczanie .co {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--szary); margin-top: 4px;
}
.odliczanie .kiedy { font-size: 11px; color: var(--szary-ciemny); margin-top: 2px; }

/* ── Pole wyboru ───────────────────────────────────────────────────────────
   Domyślny `label` w tym arkuszu jest blokowy, wersalikowy i szary — obok
   kwadracika wygląda jak nagłówek sekcji, nie jak jego podpis. Stąd wariant
   „obok". */
.pole-wybor { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
/* `flex: none` jest tu konieczne: bez niego długa etykieta ściska kwadracik
   (domyślne flex-shrink: 1) i pole wyboru robi się mniejsze od standardowego. */
.pole-wybor input[type=checkbox] {
  flex: none; width: 15px; height: 15px; accent-color: var(--atrament); margin: 0;
}
label.obok {
  display: inline; font-size: 13px; letter-spacing: 0; text-transform: none;
  color: var(--atrament); margin: 0; cursor: pointer;
}

/* ── Warianty responsywne ──────────────────────────────────────────────
   Na końcu pliku celowo: przy równej specyficzności wygrywa reguła
   późniejsza, więc blok @media umieszczony wyżej byłby nadpisywany przez
   zwykłe reguły poniżej. Tak właśnie ginęło powiększenie czcionki pól
   na telefonie.

   UWAGA przy dopisywaniu reguł: wstawiaj je PRZED tym komentarzem, nigdy
   szukając w pliku napisu „@media" — on występuje też w tym zdaniu, przez
   co automatyczna wstawka rozcięła kiedyś komentarz na pół i po cichu
   unieważniła i regułę podglądu zdjęcia, i cały blok 860 px. */
@media (max-width: 860px) {
  .dwie-kolumny { grid-template-columns: 1fr; }
  .tresc, .nawigacja { padding-left: 20px; padding-right: 20px; }
}

/* Poniżej 700 px pasek nawigacji przewija się w poziomie zamiast zawijać
   na trzy rzędy i zjadać pierwszy ekran. Marka i wylogowanie zostają
   nieruchome, przewijają się tylko linki. */
@media (max-width: 700px) {
  .nawigacja { gap: 14px 18px; padding-top: 16px; padding-bottom: 16px; }
  .marka { font-size: 18px; }
  .linki { gap: 18px; -webkit-overflow-scrolling: touch; }
  .tresc { padding-top: 28px; }
  h1 { font-size: 27px; }
  .naglowek-strony { margin-bottom: 26px; }
  /* Pola formularzy: 16 px to próg, poniżej którego iOS sam przybliża stronę */
  input[type=text], input[type=password], input[type=search],
  input[type=number], textarea, select { font-size: 16px; }
}