/*
 * Klasy specyficzne dla karty substancji, ktorych nie ma w styl.css.
 * Ukladowo i nazewniczo przeniesione z makiety (makieta/porownywarka-v1.html,
 * ekrany data-s="5" i data-s="substancja"): var(--apteka) w makiecie to ten
 * sam kolor co var(--lazur) w styl.css (#0F6497), wiec zmienne zamienione
 * na wspolna palete serwisu zamiast duplikowac :root.
 */

/* min-height z inline-flex, nie margines: cel dotykowy WCAG 2.5.8 (min. 24px)
   bez rozpychania odstepu nad linkiem. Ten sam wzorzec co w naglowek.js
   i stopka.js (commit 3753f7e). */
.wroc{display:inline-flex;align-items:center;min-height:24px;margin-bottom:14px;
  font-size:.86rem;font-weight:600;color:var(--lazur);text-decoration:none}
.wroc:hover{text-decoration:underline}

.head-substancja{margin-bottom:16px;display:flex;flex-direction:column;gap:7px;max-width:74ch}

/* pasek kotwic po sekcjach karty, zeby wejscie po cene nie wymagalo
   przewijania calej tresci merytorycznej */
.subst-nav{display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:24px;padding-bottom:16px;
  border-bottom:1px solid var(--kreska)}
.subst-nav a{font-size:.76rem;color:var(--cichy);text-decoration:none;padding:5px 9px;
  border:1px solid var(--kreska);border-radius:var(--r);background:var(--karta)}
.subst-nav a:hover{color:var(--atrament);border-color:var(--atrament)}

.src{font-family:var(--dane);font-size:.62rem;color:var(--lazur);vertical-align:super;
  border:1px solid var(--lazur);border-radius:var(--r);padding:0 3px;margin-left:5px;cursor:help;white-space:nowrap}

.card{background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:22px}
.stat{padding:16px 18px}
.stat .v{font-family:var(--dane);font-size:1.68rem;font-weight:600;line-height:1.05;letter-spacing:-.05em}
.stat .l{font-size:.78rem;color:var(--cichy);margin-top:6px;line-height:1.4}

.subst-foto{display:flex;gap:15px;align-items:center;margin:0 0 20px;padding:13px;
  border:1px solid var(--kreska);border-radius:var(--r);background:var(--karta);max-width:560px}
.subst-foto-obraz{flex:0 0 118px;width:118px;height:118px;border-radius:var(--r);
  background-size:cover;background-position:center;background-color:var(--papier-2)}
.subst-foto-tekst{font-size:.83rem;color:var(--atrament-2);line-height:1.5}
.subst-foto-tekst small{display:block;color:var(--cichy);font-size:.74rem;margin-top:7px}
/* Podpis licencyjny: mniejszy od reszty, ale nie ukryty. Licencje CC BY i
   CC BY-SA wymagaja, zeby autor byl podany widocznie, wiec nie wolno tego
   chowac pod najechaniem ani spychac do stopki. */
.subst-foto-zrodlo{font-size:.69rem;line-height:1.45}
.subst-foto-zrodlo a{color:var(--cichy);text-decoration:underline;text-underline-offset:2px}
.subst-foto-zrodlo a:hover{color:var(--lazur)}

.prose{max-width:66ch;display:flex;flex-direction:column;gap:15px;margin-bottom:22px}

.fill{display:flex;height:36px;border-radius:var(--r);overflow:hidden;border:1px solid var(--kreska);
  font-size:.71rem;font-weight:600;font-family:var(--dane)}
.fill .a{background:var(--lazur);color:var(--karta);display:grid;place-items:center;white-space:nowrap;padding:0 4px}
.fill .b{background:var(--papier-2);color:var(--cichy);display:grid;place-items:center;flex:1}

.sekcja-substancji{margin-bottom:28px}
.sekcja-substancji h2{font-size:.98rem;margin-bottom:12px}

/* pola redakcyjne: opis, wlasciwosci, wskazania... nie maja dzis tresci
   zrodlowej (CLAUDE.md, zasada 4), wiec zostaja jako jawny slot na tresc */
.karta-pole{padding:22px 0;border-top:1px solid var(--kreska);max-width:70ch}
.karta-pole:first-of-type{border-top:0;padding-top:0}
.karta-pole h2{margin:4px 0 12px;font-size:1rem}
.karta-slot{border:1px dashed var(--kreska);border-radius:var(--r);padding:9px 11px;
  font-size:.83rem;color:var(--cichy);background:var(--papier-2);margin:0}
.karta-lista{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:10px;margin:0}
.karta-legenda{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.karta-legenda-nota{font-size:.79rem;color:var(--cichy)}
.karta-dawki{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:10px}
.karta-wideo-slot{max-width:260px;aspect-ratio:16/9;display:grid;place-items:center}

/* .tag (baza), .tag.warnt, tabela porownawcza (.legenda-koloru, .tabela-subst,
   .etykieta-naj) i kafle .cel-produkty przeniesione do styl.css: uzywa ich
   teraz tez cele.html (krok 4 wywiadu), ktory tego pliku nie laduje. .tag.ok
   i .tag.blok zostaja tutaj, bo dotycza wylacznie sekcji ryzyk ponizej. */
.tag.ok{background:var(--zielen-tlo);color:var(--zielen)}
.tag.blok{background:var(--stop-tlo);color:var(--stop)}

/* wlasciwosci: cytat doslowny oswiadczenia plus zrodlo, bez kursywy (zakaz
   projektowy), cudzyslow niesie wyroznienie zamiast stylu czcionki */
.oswiadczenie{padding:11px 13px;border:1px solid var(--kreska);border-radius:var(--r);
  background:var(--karta)}
.oswiadczenie p{margin:0 0 6px;font-size:.88rem}
.src-pelna{display:block;font-size:.72rem;color:var(--cichy);text-decoration:none}
a.src-pelna{color:var(--lazur)}
a.src-pelna:hover{text-decoration:underline}

/* wskazania: cele jako linki-chipy do strony wyboru celu */
.karta-chipy{display:flex;flex-wrap:wrap;gap:8px}
.chip-cel{font-size:.82rem;font-weight:600;color:var(--atrament);text-decoration:none;
  padding:6px 11px;border:1px solid var(--kreska);border-radius:var(--r);background:var(--karta)}
.chip-cel:hover{border-color:var(--lazur);color:var(--lazur)}

/* badania: uklad przygotowany, bez tresci, do pokazania wspolpracownikowi
   dziedzinowemu, gdzie wejdzie jego praca (BRIEF-ITERACJA-2, etap 5) */
.badania-wzor{margin-top:14px;padding:14px;border:1px dashed var(--kreska);border-radius:var(--r);
  background:var(--papier-2)}
.badania-wiersz{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:10px}
.b-pole{font-size:.78rem;color:var(--cichy);line-height:1.5}
.b-pole b{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cichy)}

/* ryzyka: reguly wykluczen dotyczace tej substancji */
.ryzyko{padding:12px 13px;border:1px solid var(--kreska);border-radius:var(--r);background:var(--karta);
  display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ryzyko p{margin:0;font-size:.88rem}
.p-doweryf{background:var(--uwaga-tlo);color:var(--uwaga)}

/* U38: filtr po marce i formie chemicznej nad tabela porownawcza. Kolor
   "wybrane" jest neutralny (atrament, ten sam co .seg button[aria-pressed]
   w styl.css), nie czerwony jak .filtr-chip na /produkty: ten kolor jest
   zarezerwowany dla WYKLUCZANIA skladnikow (D22), a to zwykly wybor. */
.subst-filtry{display:flex;flex-wrap:wrap;gap:16px 24px;margin-bottom:14px}
.subst-filtry-grupa{display:flex;flex-direction:column;gap:6px;max-width:100%}
.subst-filtry-chipy{display:flex;flex-wrap:wrap;gap:6px}
/* Marka bywa kilkadziesiat pozycji (magnez ma ich ponad szescdziesiat): pasek
   przewijany w pionie zamiast sciany chipow, ktora zepchnelaby tabele
   ekranami nizej. Zadna marka nie znika, jak przy LIMIT 12 w /api/produkty -
   to filtr, nie podpowiedz, wiec rzadka marka tez ma zostac klikalna. */
.subst-filtry-grupa:has(.subst-filtr-chip[data-filtr-marka]) .subst-filtry-chipy{
  max-height:112px;overflow-y:auto;padding-right:4px}
.subst-filtr-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;
  border-radius:var(--r);font:inherit;font-size:.79rem;border:1px solid var(--kreska);
  background:var(--papier);color:var(--atrament-2);cursor:pointer}
.subst-filtr-chip:hover{border-color:var(--atrament)}
.subst-filtr-chip .num{font-family:var(--dane);font-size:.68rem;color:var(--cichy)}
.subst-filtr-chip[aria-pressed="true"]{background:var(--atrament);border-color:var(--atrament);color:var(--karta)}
.subst-filtr-chip[aria-pressed="true"] .num{color:var(--karta)}

/* dwie kolumny na desktopie: przy jednej waskiej kolumnie tekstu (max 70ch)
   polowa ekranu stala pusta, a tabela produktow spadala kilka ekranow nizej
   (zlecenie wlasciciela 23.09). column-count zamiast grid z rekami
   przypisanymi sekcjami, bo balansuje wysokosc kolumn sam - dlugosc
   poszczegolnych .karta-pole rozni sie zbyt mocno (od jednego zdania do
   tabeli formy), zeby staly podzial "polowa sekcji na lewo" nie zostawial
   dziury przy krotszej stronie. break-inside:avoid-column na kazdej
   podsekcji (nie na calej sekcji "O tej substancji"), zeby przegladarka
   mogla lamac KOLUMNE miedzy .karta-pole, ale nigdy w jej srodku - kolejnosc
   DOM (i wiec kolejnosc czytnika ekranu) zostaje bez zmian, columns tylko
   je ukladaja wizualnie. */
@media (min-width:1000px){
  .subst-opis-kolumny{column-count:2;column-gap:40px}
  .subst-opis-kolumny .karta-pole,
  .subst-opis-kolumny .subst-foto,
  .subst-opis-kolumny #formy{break-inside:avoid-column}
  /* naglowek "O tej substancji" ma zostac przy pierwszej podsekcji pod nim,
     zeby kolumna nie mogla sie urwac zaraz po nim */
  .subst-opis-kolumny > .sekcja-substancji:first-child > h2:first-child{break-after:avoid-column}
  /* Wyjatek od reguly wyzej: sekcja ryzyk jest jedynym polem, ktore potrafi
     urosnac na cala wysokosc obu kolumn (milorzab japonski: 901 px przy
     978 px calego bloku), bo kazde ryzyko niesie pelny cytat ze zrodla. Jako
     blok atomowy spychala sama siebie do prawej kolumny i zostawiala 231 px
     pustki na dole lewej - zmierzone 24.09 po przeniesieniu dawkowania w
     gore, ktore samo tej dziury nie domknelo. Lamiemy wiec MIEDZY pozycjami
     listy: pojedyncze ryzyko razem z cytatem zostaje w calosci (avoid na li),
     a naglowek nie moze zostac sam na koncu kolumny (break-after). */
  .subst-opis-kolumny #ryzyka{break-inside:auto}
  .subst-opis-kolumny #ryzyka > h2,
  .subst-opis-kolumny #ryzyka > .eyebrow{break-after:avoid-column}
  .subst-opis-kolumny #ryzyka .ryzyko{break-inside:avoid-column}
}

@media (max-width:560px){
  /* align-items:stretch (nie flex-start): w kolumnie flex-start nie rozciaga
     dziecka do szerokosci rodzica, wiec dlugi tekst probuje zmiescic sie w
     jednej linii i wychodzi poza ekran zamiast sie zawinac. */
  .subst-foto{flex-direction:column;align-items:stretch;max-width:none}
  .subst-foto-obraz{width:100%;height:160px}
}