/*
 * Supleo v16: dopelnienie supleo.css dla karty substancji (/substancja/{kod})
 * i katalogu substancji (/substancje). Reszta ukladu (naglowek, pg/pghead/
 * pgname/pgmeta/sechead/anchorrow/lawbox/faq-lista/subgrid/subcard/dm/bdg/
 * tag/ptable) juz istnieje w supleo.css (sekcja "v11: substance
 * encyclopedia") i ten plik jej nie powtarza, tylko dopisuje to, czego tam
 * brakuje: zdjecie w naglowku karty, kafle normy (RWS/UL/mediana) i siatke
 * katalogu z filtrem.
 */

/* ---- naglowek karty: zdjecie + nazwa + serce, nad anchorrow ---- */
.subst-head{display:flex;gap:16px;align-items:flex-start}
.subst-head-foto{width:84px;height:84px;border-radius:14px;flex:none;overflow:hidden;background:var(--sf2);border:1px solid var(--bd)}
.subst-head-foto img{width:100%;height:100%;object-fit:cover;display:block}
.subst-head-tresc{flex:1;min-width:0}
.subst-head-wiersz{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.subst-foto-zrodlo{display:block;font-size:9.5px;color:var(--t3);margin-top:4px;max-width:46ch}

/* ---- D2: ostrzezenie "mediana ponad UL" bursztynowe, nie czerwone (D22:
   czerwien tylko przekroczenie UL przez PRODUKT i wykluczenia; mediana
   rynkowa jest statystyka katalogu). Ten sam ksztalt co .warnbox z
   supleo.css, token koloru --warn zamiast zaszytego czerwonego. ---- */
.warnbox-amber{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);
  padding:8px 12px;border-radius:0 8px 8px 0;font-size:10.5px;line-height:1.55;margin-top:10px;max-width:72ch}

/* ---- kafle normy: RWS, UL, mediana rynkowa (SPEC.md "duza liczba") ---- */
.subst-normy{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}
.subst-norma{background:var(--sf2);border:1px solid var(--bd);border-radius:12px;padding:12px 16px;min-width:150px;flex:1 1 150px}
.subst-norma .v{font:700 22px/1.1 var(--fm);color:var(--ink)}
.subst-norma .l{font-size:10px;color:var(--t3);margin-top:4px;line-height:1.35}

/* ---- przelacznik sortowania listy produktow: cztery etykiety (wliczajac
   "zawartosc na porcje") sa szersze niz telefon, .seg z supleo.css zaklada
   jeden wiersz bez zawijania -- tutaj dopuszczamy zawiniecie zamiast
   przewijania calej strony w poziomie. ---- */
#sortSeg{flex-wrap:wrap;height:auto;row-gap:4px}
#sortSeg button{height:30px}

/* ---- formy chemiczne: tabela udzialu pierwiastka ---- */
.subst-formy .ptable td.n, .subst-formy .ptable th.n{text-align:right}

/* ---- ryzyka: lista z chipem warunku i zrodlem ---- */
.subst-ryzyka{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:min(78ch,100%);margin:0}
.subst-ryzyko{background:var(--sf2);border:1px solid var(--bd);border-radius:10px;padding:10px 12px;min-width:0}
.subst-ryzyko p{font-size:12px;color:var(--t2);line-height:1.5;margin:6px 0;overflow-wrap:break-word}
/* warunek_chip bywa dlugi ("leki immunosupresyjne (po przeszczepie)..."),
   .tag z supleo.css zaklada krotka etykiete bez zawijania - tutaj dopuszczamy
   zawiniecie, zeby dlugi warunek nie przesuwal reszty strony w poziomie. */
.subst-ryzyko .tag{white-space:normal;height:auto;line-height:1.3;padding:4px 10px;text-align:left}

/* ---- katalog substancji: siatka ze zdjeciami, grupy, filtr ---- */
.subst-grupa{margin:18px 0 6px}
.subst-grupa h2{font-size:13px;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);margin:0 0 8px}
.subst-filtr{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.subst-wiecej{margin-top:10px}
.subcard .st img{width:100%;height:100%;object-fit:cover;display:block}
.subcard .st.bg{display:flex;align-items:center;justify-content:center;background:color-mix(in oklch,var(--ac) 16%,var(--sf2));color:var(--ac);font-weight:800;font-size:16px}