/* interakcje-styles.css — Analizator interakcji na bazie lekzlekiem.pl (07.11.2026).
   Wygląd zbudowany od nowa pod dane lekzlekiem (5 klas oceny, część dla farmaceuty, alkohol,
   powtórzenia, sumowanie działań). Tokeny i kroje opieka.farm z home.css. Przestrzeń nazw .lx-*.
   Nazwa leku = <b>główna</b> + <span class="lx-sub">(marka albo substancja)</span> wszędzie, gdzie pada nazwa,
   dlatego selektory na „span” wewnątrz chipów i komórek są zawężone do dziecka bezpośredniego. */

/* Kicker nagłówka strony */
.calc-detail-h .kicker.inter .ic { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.calc-detail-h .kicker.inter    { color: var(--primary-2); }

.lx {
	--lx-zakaz: oklch(0.55 0.2 25);
	--lx-zakaz-t: oklch(0.97 0.02 25);
	--lx-uwaga: var(--warn);
	--lx-uwaga-t: #fbf1f4;
	--lx-niej: #8a6a10;
	--lx-niej-t: #fbf6e8;
	--lx-ok: var(--accent-2);
	--lx-ok-t: var(--accent-soft);
	--lx-plus: var(--primary-2);
	--lx-plus-t: rgba(29,115,139,0.08);
	font-family: "Source Sans 3", system-ui, sans-serif;
	color: var(--ink-2);
	margin: 8px 0 34px;
}
.lx [hidden] { display: none !important; } /* .lx-wklej, .lx-podp i .lx-przyk mają display – bez tego atrybut hidden nie działa */
.lx .k-przeciwwskazane { --k: var(--lx-zakaz); --kt: var(--lx-zakaz-t); }
.lx .k-niekorzystna    { --k: var(--lx-uwaga); --kt: var(--lx-uwaga-t); }
.lx .k-niejasna        { --k: var(--lx-niej);  --kt: var(--lx-niej-t); }
.lx .k-nieistotna      { --k: var(--lx-ok);    --kt: var(--lx-ok-t); }
.lx .k-korzystna       { --k: var(--lx-plus);  --kt: var(--lx-plus-t); }
.lx-sub { color: var(--ink-3); font-weight: 400; font-size: .9em; font-family: "Source Sans 3", system-ui, sans-serif; }
.lx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── panel wpisywania ── */
.lx-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.lx-glowa { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.lx-lab { font: 600 15px/1.3 "Onest", system-ui, sans-serif; color: var(--ink); }
.lx-glowa-a { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.lx-szukaj { position: relative; display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--rad-md); background: #fff; padding-left: 14px; color: var(--ink-3); }
.lx-szukaj:focus-within { border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(29,115,139,0.14); }
.lx-pole { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 12px 14px 12px 10px; font: 400 16px/1.3 "Source Sans 3", system-ui, sans-serif; color: var(--ink); }
.lx-pole::-webkit-search-cancel-button { display: none; }
.lx-podp { position: absolute; z-index: 20; left: -1.5px; right: -1.5px; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line-2); border-radius: var(--rad-md); box-shadow: var(--shadow-lg); max-height: 340px; overflow-y: auto; }
.lx-op { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.lx-op.on, .lx-op:hover { background: var(--bg-2); }
.lx-op .n { font-weight: 600; color: var(--ink); }
.lx-op .s { font-size: 13px; color: var(--ink-3); text-align: right; }

/* chip leku: przycisk z nazwą (filtr „tylko pary z tym lekiem”) + liczniki par do działania + usuń */
.lx-chipy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lx-chip { display: inline-flex; align-items: stretch; max-width: 100%; border-radius: 999px; background: var(--bg-2); color: var(--ink); }
.lx-chip-n { border: 0; background: none; color: inherit; font: 600 14px/1.25 "Onest", system-ui, sans-serif; text-align: left; padding: 6px 2px 6px 14px; border-radius: 999px 0 0 999px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.lx-chip-n b { font-weight: 600; }
.lx-chip-n .lx-sub { font-size: 13px; }
button.lx-chip-n { cursor: pointer; }
button.lx-chip-n:hover { color: var(--primary); }
.lx-chip.on { background: var(--primary); color: #fff; }
.lx-chip.on .lx-sub { color: rgba(255,255,255,0.78); }
.lx-chip.on button.lx-chip-n:hover { color: #fff; }
.lx-chip.alk { background: var(--lx-niej-t); }
.lx-chip.alk.on { background: var(--lx-niej); }
.lx-chip.zle { background: #fff; box-shadow: inset 0 0 0 1.5px var(--warn); color: var(--warn); }
.lx-chip.zle small { font: 500 11.5px "Source Sans 3", sans-serif; }
.lx-ll { display: inline-flex; gap: 4px; }
.lx-l { font: 700 11.5px/18px "Onest", sans-serif; min-width: 18px; padding: 0 5px; border-radius: 9px; color: #fff; text-align: center; box-sizing: border-box; }
.lx-l.k-przeciwwskazane { background: var(--lx-zakaz); }
.lx-l.k-niekorzystna { background: var(--lx-uwaga); }
.lx-chip-x { border: 0; background: none; color: inherit; width: 34px; border-radius: 0 999px 999px 0; display: grid; place-items: center; cursor: pointer; opacity: .6; flex: none; }
.lx-chip-x:hover { opacity: 1; background: rgba(13,75,92,0.08); }
.lx-link { border: 0; background: none; padding: 4px 2px; font: 600 13.5px "Onest", system-ui, sans-serif; color: var(--primary-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(29,115,139,0.35); }
.lx-link:hover { text-decoration-color: currentColor; }

.lx-przyk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.lx-pst { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 12px; font: 500 13px "Source Sans 3", sans-serif; color: var(--ink-2); cursor: pointer; }
.lx-pst:hover { border-color: var(--primary-2); color: var(--primary); }
.lx-wklej { display: flex; flex-direction: column; gap: 10px; }
.lx-wklej textarea { width: 100%; box-sizing: border-box; resize: vertical; border: 1.5px solid var(--line-2); border-radius: var(--rad-md); padding: 11px 14px; font: 400 15px/1.45 "Source Sans 3", sans-serif; color: var(--ink); }
.lx-wklej-d { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lx-btn { border: 0; background: var(--primary); color: #fff; border-radius: 10px; padding: 10px 16px; font: 600 14px "Onest", sans-serif; cursor: pointer; min-height: 40px; }
.lx-pom { font-size: 13px; color: var(--ink-3); }

/* ── wynik ── */
.lx-wynik { margin-top: 20px; transition: opacity .15s; }
.lx-wynik.is-laduje { opacity: .55; }
.lx-pusto, .lx-laduje, .lx-blad { border: 1.5px dashed var(--line-2); border-radius: var(--rad-lg); padding: 26px 24px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-3); }
.lx-pusto b { font: 600 16px "Onest", sans-serif; color: var(--ink); }
.lx-blad { border-style: solid; border-color: var(--warn); color: var(--warn); }

.lx-pas { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 0 10px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.lx-licz { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.lx-licz b { font: 700 15px "Onest", sans-serif; color: var(--ink); }
.lx-licz.k-przeciwwskazane svg, .lx-licz.k-przeciwwskazane b { color: var(--lx-zakaz); }
.lx-licz.k-niekorzystna svg, .lx-licz.k-niekorzystna b { color: var(--lx-uwaga); }
.lx-licz.k-niejasna svg { color: var(--lx-niej); }
.lx-licz.k-nieistotna svg, .lx-licz.k-korzystna svg { color: var(--lx-ok); }

.lx-filtr { margin: 12px 0 0; padding: 10px 14px; background: var(--bg-2); border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14.5px; color: var(--ink-2); }
.lx-filtr b { color: var(--ink); font-family: "Onest", sans-serif; font-weight: 600; }

.lx-sek { margin-top: 26px; }
.lx-sek > h2 { font: 700 21px/1.25 "Onest", sans-serif; color: var(--ink); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.lx-n { font: 700 12px "Onest", sans-serif; background: var(--primary); color: #fff; border-radius: 6px; padding: 2px 7px; }
.lx-pod { font-size: 14px; color: var(--ink-3); margin: 6px 0 12px; }
.lx-gr { font: 600 14px "Onest", sans-serif; color: var(--k); margin: 18px 0 8px; display: flex; gap: 8px; align-items: baseline; }
.lx-gr > span { font-weight: 500; color: var(--ink-3); font-size: 12.5px; }

/* karta pary: zwinięta = ikona klasy, nazwy, werdykt + pierwsze zdanie postępowania */
.lx-para { border: 1.5px solid var(--k); border-radius: var(--rad-md); background: #fff; margin-bottom: 10px; overflow: hidden; }
.lx-para > summary { list-style: none; display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 12px; align-items: start; padding: 12px 14px 12px 16px; cursor: pointer; background: var(--kt); }
.lx-para > summary::-webkit-details-marker { display: none; }
.lx-para[open] > summary { border-bottom: 1px solid var(--line); }
.lx-ik { color: var(--k); display: grid; place-items: center; margin-top: 1px; }
.lx-tr { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lx-nz { font-size: 16px; line-height: 1.3; color: var(--ink); }
.lx-nz b { font-family: "Onest", sans-serif; font-weight: 600; }
.lx-plus { color: var(--ink-3); font-weight: 400; }
.lx-wd { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-werdykt { font-family: "Onest", sans-serif; font-weight: 600; color: var(--k); }
.lx-para[open] .lx-sk { display: none; }
.lx-ch { width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); justify-self: center; margin-top: 5px; transition: transform .15s; }
.lx-para[open] > summary .lx-ch { transform: rotate(-135deg); margin-top: 11px; }

.lx-cialo { padding: 16px 20px 18px 54px; display: flex; flex-direction: column; gap: 14px; }
.lx-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lx-meta dt { font: 600 11.5px "Onest", sans-serif; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.lx-meta dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.lx-klasa { margin: 0; font-size: 14px; color: var(--ink-3); font-style: italic; }
.lx-blok h4 { font: 600 13px "Onest", sans-serif; color: var(--primary-2); margin: 0 0 4px; }
.lx-blok p, .lx-blok li { font-size: 15.5px; line-height: 1.55; margin: 0; color: var(--ink-2); }
.lx-blok ul { margin: 0; padding-left: 18px; }
.lx-blok.gl { background: var(--bg); border-left: 3px solid var(--k); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.lx-blok.gl p { color: var(--ink); }
.lx-dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.lx-alt { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-alt span { border: 1.5px solid var(--accent); color: var(--accent-2); border-radius: 999px; padding: 3px 11px; font-weight: 600; font-size: 14px; }
.lx-tabw { overflow-x: auto; }

/* kiedy ocena się zmienia: wiersze warunek / skutek / opis (na telefonie opis schodzi pod spód) */
.lx-war { display: flex; flex-direction: column; font-size: 14px; }
.lx-war-r { display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(0, 2.3fr); gap: 4px 14px; padding: 8px 0; border-top: 1px solid var(--line); align-items: start; }
.lx-war-r .w { display: flex; flex-direction: column; gap: 1px; }
.lx-war-r .w b { font-weight: 600; color: var(--ink); }
.lx-war-r .w small { font-size: 12.5px; color: var(--ink-3); }
.lx-war-r .sk { font-weight: 600; white-space: nowrap; }
.lx-war-r .sk.podnosi, .lx-war-r .sk.zmienia_zalecenie { color: var(--warn); }
.lx-war-r .sk.obniza, .lx-war-r .sk.wyklucza { color: var(--accent-2); }
.lx-war-r .o { line-height: 1.5; }
.lx-wiecej { margin: 2px 0 0; text-align: right; font-size: 14px; }
.lx-wiecej a, .lx-zrodlo a { color: var(--primary-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* pary bez opisu */
.lx-bez { border: 1.5px dashed var(--line-2); border-radius: var(--rad-md); margin-top: 12px; }
.lx-bez > summary { list-style: none; display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 12px 14px 12px 16px; cursor: pointer; font-size: 14.5px; }
.lx-bez > summary::-webkit-details-marker { display: none; }
.lx-bez > summary .lx-ch { margin-top: -4px; }
.lx-bez[open] > summary .lx-ch { transform: rotate(-135deg); margin-top: 4px; }
.lx-bez-ic { width: 26px; height: 26px; border: 1.5px dashed var(--ink-3); border-radius: 6px; display: grid; place-items: center; font: 700 13px "Onest", sans-serif; color: var(--ink-3); }
.lx-bez ul { margin: 0; padding: 0 16px 14px 54px; font-size: 15px; columns: 2; list-style: none; }
.lx-bez li { padding: 3px 0; break-inside: avoid; }
.lx-bez li b { font-family: "Onest", sans-serif; font-weight: 600; color: var(--ink); }

/* powtórzenia */
.lx-dup { border-left: 3px solid var(--warn); background: var(--lx-uwaga-t); border-radius: 0 8px 8px 0; padding: 10px 14px; margin-top: 10px; font-size: 15px; line-height: 1.5; }
.lx-dup.info { border-left-color: var(--ink-4); background: var(--bg); }

/* sumowanie */
.lx-acb { margin: 10px 0 18px; }
.lx-acb-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; font-size: 14.5px; }
.lx-acb-h b { color: var(--ink); font-family: "Onest", sans-serif; }
.lx-acb-pas { position: relative; display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.lx-acb-pas > span { min-width: 0; }
.lx-acb .s0 { background: var(--primary); } .lx-acb .s1 { background: var(--primary-2); } .lx-acb .s2 { background: var(--accent-2); }
.lx-acb-pas .r { background: transparent; }
.lx-acb-pas .prog { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--warn); }
.lx-acb-os { position: relative; height: 18px; font-size: 12px; color: var(--ink-3); }
.lx-acb-os span { position: absolute; top: 2px; transform: translateX(-50%); }
.lx-acb-os span:first-child { transform: none; }
.lx-acb-os span:last-child { transform: translateX(-100%); }
.lx-acb-leg { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14.5px; }
.lx-acb-leg li { display: inline-flex; align-items: center; gap: 7px; }
.lx-acb-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lx-acb-leg b { font-family: "Onest", sans-serif; font-weight: 700; color: var(--ink); }
.lx-cechy { list-style: none; margin: 0; padding: 0; }
.lx-cechy li { padding: 10px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 4px 18px; font-size: 15px; }
.lx-cechy li > b { color: var(--ink); font-family: "Onest", sans-serif; font-weight: 600; }
.lx-cl { display: flex; flex-wrap: wrap; gap: 6px; }
.lx-cl > span { border-radius: 6px; padding: 2px 8px; background: var(--bg-2); font-size: 14px; }
.lx-cl > span.p3 { background: var(--lx-uwaga-t); color: var(--warn); }
.lx-cl > span.p3 b { color: var(--warn); }
.lx-cl b { font-weight: 600; color: var(--ink); }
.lx-cl i { font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.lx-cechy small { grid-column: 2; color: var(--ink-3); font-size: 13px; }
.lx-wsp { margin-top: 18px; border-top: 1px solid var(--line); }
.lx-wsp > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px 12px 0; cursor: pointer; font: 600 14.5px "Onest", sans-serif; color: var(--ink); }
.lx-wsp > summary::-webkit-details-marker { display: none; }
.lx-wsp > summary .lx-ch { margin: -4px 6px 0 0; }
.lx-wsp[open] > summary .lx-ch { transform: rotate(-135deg); margin-top: 4px; }
.lx-gr-n { font-weight: 500; color: var(--ink-3); font-size: 12.5px; margin-left: 4px; }
.lx-tab { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-bottom: 6px; }
.lx-tab th, .lx-tab td { text-align: left; padding: 8px 12px 8px 0; border-top: 1px solid var(--line); vertical-align: top; }
.lx-tab th { font: 600 12px "Onest", sans-serif; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.lx-tab td:first-child { width: 28%; }
.lx-wl { display: inline-block; margin: 1px 10px 1px 0; }
.lx-wl b { font-weight: 600; color: var(--ink); }
.lx-wl i { font-style: normal; color: var(--ink-3); font-size: 13px; }

.lx-zrodlo { margin: 24px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; }

@media (max-width: 860px) {
	.lx-panel { padding: 14px 14px 16px; gap: 10px; }
	.lx-glowa .lx-link, .lx-wyczysc { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
	/* lista leków jako wyrównane wiersze: chip z marką nie mieści się po dwa w rzędzie, a poszarpane pigułki czyta się gorzej niż listę */
	.lx-chipy { gap: 4px; }
	.lx-chip { width: 100%; border-radius: 10px; }
	.lx-chip-n { flex: 1; min-height: 44px; padding: 4px 2px 4px 12px; }
	.lx-ll { margin-left: auto; }
	.lx-chip-x { width: 44px; min-height: 44px; border-radius: 0 10px 10px 0; }
	.lx-wsp > summary { min-height: 44px; }
	.lx-wiecej a { display: inline-block; padding: 12px 0; }
	.lx-pst { min-height: 44px; flex: none; }
	.lx-przyk { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
	.lx-przyk::-webkit-scrollbar { display: none; }
	.lx-przyk > span { flex: none; }
	.lx-pas { font-size: 14px; gap: 6px 14px; }
	.lx-filtr .lx-link { min-height: 44px; display: inline-flex; align-items: center; }
	.lx-sek > h2 { font-size: 19px; }
	.lx-para > summary { grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 10px; padding: 12px 12px 12px 12px; }
	.lx-ik svg { width: 20px; height: 20px; }
	.lx-nz { font-size: 15.5px; }
	.lx-wd { font-size: 14px; -webkit-line-clamp: 3; }
	.lx-cialo { padding: 14px 14px 16px; gap: 12px; }
	.lx-meta { gap: 8px 20px; }
	.lx-dwie { grid-template-columns: 1fr; }
	.lx-war-r { grid-template-columns: minmax(0, 1fr) auto; }
	.lx-war-r .o { grid-column: 1 / -1; }
	.lx-cechy li { grid-template-columns: 1fr; }
	.lx-cechy small { grid-column: 1; }
	.lx-bez > summary { grid-template-columns: 24px minmax(0, 1fr) 18px; padding: 12px; }
	.lx-bez ul { columns: 1; padding: 0 12px 12px 46px; }
	.lx-tab td:first-child { width: 32%; }
}

/* Długa nazwa bez spacji (wklejony ciąg) nie może rozpychać strony na telefonie (test obciążeniowy 07.11.2026). */
.lx-chip, .lx-chip-n { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* Komunikat o nazwie zablokowanej przez zaporę (07.11.2026). */
.lx-uwaga { margin: 0; font-size: 14px; color: var(--warn); background: var(--lx-uwaga-t, #fbf1f4); border-radius: 8px; padding: 8px 12px; }