/* Siłownia — plan rekompozycji.
   Aplikacja jest obsługiwana spoconymi palcami między seriami, w sali,
   która bywa słabo oświetlona. Stąd trzy twarde wymagania w tym pliku:
   cele dotykowe >= 44x44 px, tryb ciemny z prefers-color-scheme
   i zakładki przyklejone do dołu, żeby kciuk sięgał bez przechwytu telefonu. */

:root {
  --tlo: #f7f8fa;
  --tlo-karta: #ffffff;
  --tekst: #14181d;
  --tekst-slaby: #5a636e;
  --linia: #d8dde4;
  --akcent: #1f6feb;
  --akcent-tekst: #ffffff;
  --ostrzezenie-tlo: #fff4e0;
  --ostrzezenie-linia: #d99400;
  --alarm-tlo: #ffe9e6;
  --alarm-linia: #d03a2c;
  --ok-tlo: #e6f6ec;
  --ok-linia: #1f8a4c;
  --dotyk: 44px;
  --promien: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #0e1114;
    --tlo-karta: #171c22;
    --tekst: #e8edf3;
    --tekst-slaby: #9aa5b1;
    --linia: #2a323b;
    --akcent: #4d8ef7;
    --akcent-tekst: #0e1114;
    --ostrzezenie-tlo: #33280d;
    --ostrzezenie-linia: #d99400;
    --alarm-tlo: #3a1a16;
    --alarm-linia: #f0655a;
    --ok-tlo: #12301f;
    --ok-linia: #46b473;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Zakładki są sticky, ale w Safari pasek adresu potrafi je przykryć —
     stąd zapas na dole równy wysokości zakładek + safe-area. */
  padding-bottom: calc(var(--dotyk) + 1.5rem + env(safe-area-inset-bottom, 0px));
}

/* ---------- pasek górny ---------- */

#pasek {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--tlo-karta);
  border-bottom: 1px solid var(--linia);
}

#pasek h1 { margin: 0; font-size: 1.15rem; }

#stan-sync {
  font-size: 0.8rem;
  color: var(--tekst-slaby);
  text-align: right;
  max-width: 55%;
}

#stan-sync.blad { color: var(--alarm-linia); }
#stan-sync.polaczono { color: var(--ok-linia); }

/* ---------- układ ---------- */

main { padding: 1rem; }

.widok[hidden] { display: none; }

.karta {
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 1rem;
  margin: 0 0 1rem;
}

.karta > h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.karta > h3 { margin: 1rem 0 0.5rem; font-size: 0.95rem; }

/* Jedna kolumna do 600 px, dwie powyżej. */
.siatka { display: grid; grid-template-columns: 1fr; gap: 1rem; }

@media (min-width: 601px) {
  .siatka { grid-template-columns: 1fr 1fr; }
  main { max-width: 1000px; margin: 0 auto; }
  .pelna-szerokosc { grid-column: 1 / -1; }
}

.slaby { color: var(--tekst-slaby); font-size: 0.875rem; }
.brak { color: var(--tekst-slaby); font-style: italic; margin: 0.5rem 0; }

/* ---------- formularze ---------- */

label { display: block; font-size: 0.875rem; color: var(--tekst-slaby); margin-bottom: 0.25rem; }

.pole { margin-bottom: 0.75rem; }

input, select, textarea, button {
  font: inherit;
  color: var(--tekst);
}

input[type="text"], input[type="number"], input[type="date"], input[type="password"],
input[type="url"], select, textarea {
  width: 100%;
  min-height: var(--dotyk);
  padding: 0.5rem 0.65rem;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
}

textarea { min-height: 8rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85rem; }

input[type="range"] { width: 100%; min-height: var(--dotyk); }

button {
  min-height: var(--dotyk);
  min-width: var(--dotyk);
  padding: 0.5rem 1rem;
  background: var(--tlo-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  cursor: pointer;
}

button.glowny {
  background: var(--akcent);
  color: var(--akcent-tekst);
  border-color: var(--akcent);
  font-weight: 600;
}

button:disabled { opacity: 0.5; cursor: default; }

.rzad-przyciskow { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.rzad-pol { display: flex; gap: 0.5rem; align-items: flex-end; }
.rzad-pol .pole { flex: 1; margin-bottom: 0; }

/* ---------- serie treningowe ---------- */

.cwiczenie { border-top: 1px solid var(--linia); padding-top: 0.85rem; margin-top: 0.85rem; }
.cwiczenie:first-of-type { border-top: 0; margin-top: 0; }
.cwiczenie h3 { margin: 0 0 0.25rem; font-size: 1rem; }

.seria {
  display: grid;
  grid-template-columns: 2.2rem 1fr 1fr 1fr;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.seria .nr { color: var(--tekst-slaby); font-size: 0.85rem; text-align: center; }
.seria input { min-height: var(--dotyk); text-align: center; padding: 0.4rem; }

.naglowki-serii {
  display: grid;
  grid-template-columns: 2.2rem 1fr 1fr 1fr;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--tekst-slaby);
  margin-bottom: 0.25rem;
}
.naglowki-serii span { text-align: center; }

.historia { font-size: 0.85rem; color: var(--tekst-slaby); margin: 0.25rem 0; }
.podpowiedz {
  font-size: 0.85rem;
  background: var(--ok-tlo);
  border-left: 3px solid var(--ok-linia);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  margin: 0.35rem 0;
}

details { margin: 0.35rem 0; }
details summary { min-height: var(--dotyk); min-width: var(--dotyk); display: flex; align-items: center; cursor: pointer; color: var(--akcent); font-size: 0.875rem; }

/* ---------- panel techniki (widok Trening) ----------
   Domyślnie zwinięty <details>; treść dochodzi z plan/08-technika.md przez
   app/js/technika.js. Rysunki rysowane stroke="currentColor" w rysunki.js,
   więc dziedziczą kolor tekstu i działają w trybie ciemnym bez osobnego kodu. */

details.technika summary { font-weight: 600; }

.technika-tresc { padding-top: 0.35rem; }
.technika-tresc p { margin: 0.5rem 0; font-size: 0.9rem; }

.technika-wskazowki { margin: 0.5rem 0; padding-left: 1.25rem; font-size: 0.9rem; }
.technika-wskazowki li { margin-bottom: 0.3rem; }

/* Uwaga o powrocie po rocznej przerwie — najwyższa waga w tygodniach 1-3,
   stoi na górze panelu, wyróżniona jak baner ostrzegawczy. */
.technika-po-roku {
  padding: 0.6rem 0.75rem;
  border-left: 4px solid var(--ostrzezenie-linia);
  background: var(--ostrzezenie-tlo);
  border-radius: var(--promien);
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.technika-przerwij { border-left: 3px solid var(--alarm-linia); padding-left: 0.6rem; }

.technika-rysunki { margin-top: 0.6rem; }
.technika-rysunki svg { width: 100%; height: auto; max-width: 320px; color: var(--tekst); display: block; margin: 0 auto; }

/* ---------- banery i rekomendacje ---------- */

.baner {
  padding: 0.75rem 1rem;
  border-radius: var(--promien);
  border-left: 4px solid var(--ostrzezenie-linia);
  background: var(--ostrzezenie-tlo);
  margin-bottom: 1rem;
}

/* ---------- kolejka sesji: stan dnia, ostrzeżenia, wybór dni ----------
   Ostrzeżenie o odstępie ma wyglądać jak informacja, nie jak blokada — stąd
   ta sama paleta co baner (żółta), a nie alarmowa czerwień rekomendacji
   blokujących. Użytkownik ma zdecydować, a nie poczuć się złapany. */

.stan-dnia { margin: 0 0 0.5rem; font-weight: 600; }
.stan-dnia.stan-wolny, .stan-dnia.stan-zalegla { font-weight: 400; color: var(--tekst-slaby); }
.nastepna-sesja { margin: 0.25rem 0; font-size: 1.05rem; }

.ostrzezenie-odstepu {
  padding: 0.6rem 0.8rem;
  margin: 0.6rem 0;
  border-radius: var(--promien);
  border-left: 4px solid var(--ostrzezenie-linia);
  background: var(--ostrzezenie-tlo);
  font-size: 0.875rem;
}

.dni-tygodnia { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.dzien-pole {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1 1 2.5rem;
  min-height: var(--dotyk);
  padding: 0.35rem 0.2rem;
  margin: 0;
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  background: var(--tlo);
  color: var(--tekst);
  font-size: 0.85rem;
  cursor: pointer;
}

.dzien-pole:has(input:checked) { border-color: var(--akcent); background: var(--ok-tlo); font-weight: 700; }
.dzien-pole input { min-height: 22px; min-width: 22px; margin: 0; accent-color: var(--akcent); }

.rekomendacja {
  border: 1px solid var(--linia);
  border-left: 4px solid var(--tekst-slaby);
  border-radius: var(--promien);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--tlo);
}

.rekomendacja h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.rekomendacja p { margin: 0; font-size: 0.9rem; }

.rekomendacja.blokujaca { border-left-color: var(--alarm-linia); background: var(--alarm-tlo); }
.rekomendacja.p1 { border-left-color: var(--ok-linia); background: var(--ok-tlo); }
.rekomendacja.p2, .rekomendacja.p3 { border-left-color: var(--ostrzezenie-linia); background: var(--ostrzezenie-tlo); }

/* ---------- liczby, tabele, wykresy ---------- */

.liczby { display: flex; flex-wrap: wrap; gap: 1rem; }
.liczba { min-width: 5rem; }
.liczba .wartosc { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1.2; }
.liczba .etykieta { font-size: 0.75rem; color: var(--tekst-slaby); }

.przewijana { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
th, td { text-align: right; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--linia); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--tekst-slaby); font-weight: 600; }

/* stroke="currentColor" w SVG: wykresy dziedziczą kolor tekstu,
   więc tryb ciemny działa bez osobnego kodu. */
.wykres svg { width: 100%; height: auto; color: var(--akcent); display: block; }
.wykres h3 { margin: 0 0 0.25rem; font-size: 0.9rem; }

/* ---------- zakładki ---------- */

#zakladki {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: var(--tlo-karta);
  border-top: 1px solid var(--linia);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Sześć zakładek zamiast pięciu. Na 360 px szerokości daje to kolumny po 60 px,
   w których najdłuższy napis — „Ustawienia” — musi się zmieścić bez ucinania.
   Stąd font 0.7rem i zwężony odstęp między literami; poniżej 0.68rem tekst
   robi się nieczytelny w słabo oświetlonej sali, więc to jest granica — siódma
   zakładka wymagałaby już innego układu, nie mniejszego kroju.
   Wysokość celu dotykowego zostaje 44 px (var(--dotyk)), szerokość 60 px. */
#zakladki button {
  min-height: var(--dotyk);
  min-width: 0;
  padding: 0.6rem 0.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--tekst-slaby);
  font-size: 0.7rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#zakladki button[aria-current="page"] {
  color: var(--akcent);
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--akcent);
}

/* ---------- komunikat ---------- */

#komunikat {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--dotyk) + 1rem + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  margin: 0;
  padding: 0.6rem 1rem;
  border-radius: var(--promien);
  background: var(--tekst);
  color: var(--tlo);
  font-size: 0.875rem;
  max-width: 90vw;
}

#komunikat[hidden] { display: none; }
#komunikat.blad { background: var(--alarm-linia); color: #fff; }

/* ---------- widok: Jedzenie ----------
   Przepis i notatka o smaku są treścią, nie metadanymi — stoją w widoku wprost,
   nie w <details>. Zwijane są wyłącznie tabele makr, sosy i sekcje referencyjne. */

.wybor-dnia button { flex: 1 1 3.5rem; padding: 0.5rem 0.25rem; font-size: 0.9rem; }
.wybor-dnia button[data-dzis] { font-weight: 700; }

.posilek h2 { line-height: 1.35; }
.posilek .przepis { margin: 0.5rem 0; }
.posilek .smak {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--akcent);
  background: var(--tlo);
  border-radius: 4px;
  font-size: 0.95rem;
}

ul.skladniki { list-style: none; margin: 0.5rem 0; padding: 0; }

ul.skladniki li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linia);
  font-size: 0.9rem;
}

ul.skladniki li .gramatura { color: var(--tekst-slaby); white-space: nowrap; }

ul.skladniki li.zmieniony { background: var(--ok-tlo); border-left: 3px solid var(--ok-linia); padding-left: 0.5rem; }
ul.skladniki li.zmieniony .gramatura { color: var(--ok-linia); font-weight: 600; }
ul.skladniki li.usuniety { opacity: 0.7; text-decoration: line-through; }

.suma-posilku { margin: 0.5rem 0 0; font-weight: 600; font-size: 0.9rem; }

details.sos summary { color: var(--akcent); }
details.makra summary { color: var(--tekst-slaby); }

tr.razem td { border-top: 2px solid var(--linia); }

/* ---------- lista zakupów ---------- */

.grupa-zakupow h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }

ul.zakupy { list-style: none; margin: 0; padding: 0; }

ul.zakupy li { border-bottom: 1px solid var(--linia); }

ul.zakupy label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--dotyk);
  margin: 0;
  color: var(--tekst);
  font-size: 0.9rem;
  cursor: pointer;
}

ul.zakupy label .nazwa { flex: 1; }
ul.zakupy label .gramatura { color: var(--tekst-slaby); font-size: 0.85rem; text-align: right; }

ul.zakupy input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; accent-color: var(--akcent); }

ul.zakupy li.odhaczone label .nazwa { text-decoration: line-through; color: var(--tekst-slaby); }

/* ---------- nagrania demonstracyjne (panel techniki) ----------
   Odtwarzacz ma preload="none" (app/js/ui.js), więc do momentu dotknięcia
   „odtwórz" nie ma czego rysować — stała proporcja trzyma miejsce, żeby panel
   nie podskakiwał pod palcem w chwili załadowania pierwszej klatki. */

figure.wideo { margin: 0.75rem 0 0; }

figure.wideo video {
  display: block;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border-radius: var(--promien);
}

/* Atrybucja jest warunkiem licencji CC BY 3.0, nie przypisem — stąd kolor
   tekstu słabego, ale bez ukrywania, zwijania i wygaszania. */
.atrybucja {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--tekst-slaby);
  line-height: 1.4;
}

.atrybucja a { color: var(--tekst-slaby); }

figure.wideo figcaption { font-size: 0.85rem; margin-bottom: 0.4rem; }

/* Ilustracja wzorca ruchowego — wyraźnie oddzielona od nagrania samego
   ćwiczenia, bo pokazuje inny ruch (patrz app/js/wideo.js). */
figure.wideo-wzorca {
  margin-top: 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px dashed var(--linia);
  border-radius: var(--promien);
  background: var(--tlo);
}

.wideo-roznica {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  border-left: 3px solid var(--ostrzezenie-linia);
  padding-left: 0.6rem;
}

/* Ćwiczenia bez nagrania na wolnej licencji. Nie udaje filmu lokalnego:
   inne tło, jawne ostrzeżenie o internecie. */
.wideo-zapas {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--linia);
  border-radius: var(--promien);
  font-size: 0.85rem;
}

/* Cel dotykowy 44 px bez rozjeżdżania się na dwa 44-pikselowe wiersze przy
   zawinięciu długiej nazwy ćwiczenia: blok o minimalnej wysokości, tekst
   wyśrodkowany w pionie. */
.wideo-zapas a {
  display: flex;
  align-items: center;
  min-height: var(--dotyk);
  margin-top: 0.15rem;
  line-height: 1.4;
}

.wymaga-internetu {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--tekst-slaby);
}

.wymaga-internetu::before { content: "⚠︎ "; }

/* ---------- widok: Plan ----------
   Treść to gotowy HTML z app/js/plan.js. Reguly niżej dotyczą wyłącznie tego,
   co wychodzi z generatora, więc są zamknięte w .dokument-planu — poza tym
   zakresem naglówki i tabele aplikacji zostają nietknięte. */

ol.lista-dokumentow { list-style: none; margin: 0; padding: 0; }

ol.lista-dokumentow li { border-bottom: 1px solid var(--linia); }
ol.lista-dokumentow li:last-child { border-bottom: 0; }

a.pozycja-dokumentu {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: var(--dotyk);
  padding: 0.7rem 0.25rem;
  color: var(--tekst);
  text-decoration: none;
}

a.pozycja-dokumentu .numer {
  flex: 0 0 1.6rem;
  text-align: center;
  color: var(--akcent);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
}

a.pozycja-dokumentu .tresc { display: block; flex: 1; min-width: 0; }
a.pozycja-dokumentu strong { display: block; font-size: 0.95rem; }
a.pozycja-dokumentu .opis { display: block; font-size: 0.85rem; color: var(--tekst-slaby); margin-top: 0.1rem; }
a.pozycja-dokumentu .meta { display: block; font-size: 0.75rem; color: var(--tekst-slaby); margin-top: 0.2rem; }

button.powrot-do-listy { font-size: 0.9rem; }

details.spis-sekcji { margin-top: 0.5rem; }
details.spis-sekcji > summary { font-weight: 600; }
details.spis-sekcji ol { list-style: none; margin: 0.35rem 0 0; padding: 0; }
details.spis-sekcji li { border-bottom: 1px solid var(--linia); }
details.spis-sekcji li:last-child { border-bottom: 0; }
details.spis-sekcji li.poziom-3 { padding-left: 1rem; }
details.spis-sekcji li a {
  display: flex;
  align-items: center;
  min-height: var(--dotyk);
  font-size: 0.875rem;
  color: var(--akcent);
  text-decoration: none;
}
details.spis-sekcji li.poziom-3 a { color: var(--tekst); font-size: 0.85rem; }

/* Nagłówek strony jest sticky — bez tego zapasu skok do sekcji z spisu
   ustawiałby tytuł dokładnie pod paskiem i wyglądał na nietrafiony. */
.dokument-planu :is(h2, h3, h4, h5, h6) { scroll-margin-top: 4rem; }

.dokument-planu > :first-child { margin-top: 0; }
.dokument-planu > :last-child { margin-bottom: 0; }

.dokument-planu h2 { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--linia); }
.dokument-planu h3 { font-size: 0.98rem; margin: 1.2rem 0 0.4rem; }
.dokument-planu h4 { font-size: 0.92rem; margin: 1rem 0 0.35rem; color: var(--tekst-slaby); }

.dokument-planu p, .dokument-planu li { font-size: 0.92rem; }
.dokument-planu ul, .dokument-planu ol { padding-left: 1.25rem; }
.dokument-planu li { margin-bottom: 0.25rem; }

.dokument-planu blockquote {
  margin: 0.75rem 0;
  padding: 0.5rem 0.85rem;
  border-left: 4px solid var(--akcent);
  background: var(--tlo);
  border-radius: 4px;
}
.dokument-planu blockquote p { margin: 0.35rem 0; }

.dokument-planu code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.85em;
  background: var(--tlo);
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
}

.dokument-planu pre { overflow-x: auto; background: var(--tlo); padding: 0.6rem; border-radius: var(--promien); }
.dokument-planu pre code { background: none; padding: 0; }

.dokument-planu hr { border: 0; border-top: 1px solid var(--linia); margin: 1.25rem 0; }

.dokument-planu input[type="checkbox"] { width: 1rem; height: 1rem; margin-right: 0.35rem; }

/* Odsyłacz między rozdziałami — w źródle to `04-pomiary-reguly.md`, tutaj
   klikalny cel przenoszący do innego dokumentu bez opuszczania aplikacji. */
a.odsylacz-planu { color: var(--akcent); text-decoration: none; border-bottom: 1px dotted currentColor; }
a.odsylacz-planu code { background: none; padding: 0; color: inherit; }

.dokument-planu a.zewnetrzny::after { content: " ↗"; font-size: 0.85em; }

/* TABELE. Bez własnego kontenera szeroka tabela rozpycha <body> i przewija się
   CAŁA strona — na telefonie znaczy to, że nagłówek i zakładki uciekają w bok.
   Kontener łapie przewijanie u siebie, a strona stoi. */
.tabela-przewijana {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 0.75rem 0;
  border: 1px solid var(--linia);
  border-radius: var(--promien);
}

.tabela-przewijana table { width: auto; min-width: 100%; margin: 0; font-size: 0.85rem; }
.tabela-przewijana th, .tabela-przewijana td { text-align: left; vertical-align: top; white-space: normal; min-width: 6rem; }
.tabela-przewijana tr:last-child td { border-bottom: 0; }