/* Callouty treści — EBM / Wskazówka / Alert (parytet ze starą opieka.farm).
   Użycie: w edytorze wpisz w polu „Dodatkowe klasy CSS" bloku (akapit, grupa, lista…)
   jedną z klas: ebm | tip | alert. Label i ikona dorysują się same (CSS), redaktor
   wpisuje tylko treść. Renderuje się identycznie w edytorze Gutenberg
   (enqueue_block_assets → iframe editor-canvas) i na froncie — stąd podgląd w edytorze.
   Ikony 1:1 z artykułu Juvit (forest-plot / mózg / trójkąt), kolory marki opieka.farm
   (petrol / mięta / malina — bez pomarańczy 3PG). Wygląd zaakceptowany 15.07.2026.
   Klasy gołe (jak stara strona), więc selektory globalne. .ebm/.alert były wolne;
   .tip przemianowano w bramie na .gate-tip (brama-styles.css), by należało do calloutów.
   Samowystarczalny: własne tokeny + warianty dark, żeby działał też w iframe edytora. */

:root {
  --ebm-fg: #0d4b5c; --ebm-border: #1d738b; --ebm-bg: rgba(29,115,139,.10);
  --tip-fg: #0a6a55; --tip-border: #14a085; --tip-bg: rgba(20,160,133,.10);
  --alert-fg: #b02a58; --alert-border: #cc3266; --alert-bg: rgba(204,50,102,.09);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ebm-fg: #84bccf; --ebm-border: #2b8bab; --ebm-bg: rgba(29,115,139,.20);
    --tip-fg: #5cc4a8; --tip-border: #1bbd9c; --tip-bg: rgba(20,160,133,.18);
    --alert-fg: #ee94b0; --alert-border: #e04d78; --alert-bg: rgba(204,50,102,.20);
  }
}
:root[data-theme="light"] {
  --ebm-fg: #0d4b5c; --ebm-border: #1d738b; --ebm-bg: rgba(29,115,139,.10);
  --tip-fg: #0a6a55; --tip-border: #14a085; --tip-bg: rgba(20,160,133,.10);
  --alert-fg: #b02a58; --alert-border: #cc3266; --alert-bg: rgba(204,50,102,.09);
}
:root[data-theme="dark"] {
  --ebm-fg: #84bccf; --ebm-border: #2b8bab; --ebm-bg: rgba(29,115,139,.20);
  --tip-fg: #5cc4a8; --tip-border: #1bbd9c; --tip-bg: rgba(20,160,133,.18);
  --alert-fg: #ee94b0; --alert-border: #e04d78; --alert-bg: rgba(204,50,102,.20);
}

/* Baza (wspólna dla 3 wariantów) — działa na dowolnym bloku z klasą ebm/tip/alert */
.ebm, .tip, .alert {
  position: relative;
  border-left: 4px solid var(--ebm-border);
  background: var(--ebm-bg);
  border-radius: 0 12px 12px 0;
  padding: 20px 62px 20px 22px;
  margin: 28px 0;
  overflow: hidden;
  font-size: 14.5px; line-height: 1.65; color: var(--ink, #0a2530);
  max-width: none;
}
/* Etykieta typu (::before) */
.ebm::before, .tip::before, .alert::before {
  display: block;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 8px;
}
/* Treść zagnieżdżona (gdy klasa na Grupie z akapitami w środku) */
.ebm p, .tip p, .alert p {
  font-size: 14.5px; line-height: 1.65; margin: 0; color: var(--ink, #0a2530);
}
.ebm p + p, .tip p + p, .alert p + p { margin-top: 12px; }
/* Ikona (::after, maska SVG → kolor z tokenu = działa w trybie ciemnym) */
.ebm::after, .tip::after, .alert::after {
  content: ""; position: absolute; right: -9px; top: 50%;
  transform: translateY(-50%);
  width: 60px; height: 60px; opacity: .15; pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* EBM — petrol */
.ebm { border-left-color: var(--ebm-border); background: var(--ebm-bg); }
.ebm::before { content: "Evidence-based medicine (EBM):"; color: var(--ebm-fg); }
.ebm::after {
  background-color: var(--ebm-fg);
  -webkit-mask-image: url(../img/callouts/ebm.svg); mask-image: url(../img/callouts/ebm.svg);
}

/* Wskazówka — mięta */
.tip { border-left-color: var(--tip-border); background: var(--tip-bg); padding-right: 76px; }
.tip::before { content: "Wskazówka praktyczna:"; color: var(--tip-fg); }
.tip::after {
  right: -12px; width: 80px; height: 80px; opacity: .18;
  background-color: var(--tip-fg);
  -webkit-mask-image: url(../img/callouts/tip.svg); mask-image: url(../img/callouts/tip.svg);
}

/* Alert — malina */
.alert { border-left-color: var(--alert-border); background: var(--alert-bg); padding-right: 72px; }
.alert::before { content: "Uwaga:"; color: var(--alert-fg); }
.alert::after {
  right: -8px; width: 66px; height: 66px; opacity: .16;
  background-color: var(--alert-fg);
  -webkit-mask-image: url(../img/callouts/alert.svg); mask-image: url(../img/callouts/alert.svg);
}

/* ── Karta bazy (CHOR i in.): drabina kroków + rekomendacje ─────────────────
   Gołe klasy w treści (jak callouty). Markup z entries/_build.py.
   .kroki/.krok = „Postępowanie przy pierwszym stole"; .doradztwo z kolumnami
   .doradzaj/.odradzaj = „Zalecaj/Odradzaj". Kontener .doradztwo (nie .rec —
   .rec zajęte w article-styles.css). Dodane 15.07.2026. */
.kroki { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.krok { display: flex; gap: 14px; background: var(--card, #fff); border: 1px solid var(--line, #e3e8ec); border-radius: var(--rad-md, 12px); padding: 14px 16px; }
.krok-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-2, #14a085); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.krok-b { flex: 1; min-width: 0; }
.krok-t { font-weight: 700; color: var(--ink, #0a2530); margin: 2px 0 4px; font-size: 16px; }
.krok-b p { margin: 2px 0; color: var(--ink-2, #38505c); font-size: 14.5px; line-height: 1.6; }
.krok .badge { display: inline-block; font-size: 11px; letter-spacing: .05em; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(20,160,133,.12); color: var(--accent-2, #14a085); margin-left: 8px; vertical-align: middle; text-transform: uppercase; }

.doradztwo { display: flex; gap: 14px; margin: 18px 0; flex-wrap: wrap; }
.doradztwo .rec-col { flex: 1 1 260px; background: var(--card, #fff); border: 1px solid var(--line, #e3e8ec); border-radius: var(--rad-md, 12px); padding: 14px 16px; }
.doradztwo .rec-h { font-weight: 700; margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.doradztwo .doradzaj .rec-h { color: var(--accent-2, #14a085); }
.doradztwo .odradzaj .rec-h { color: var(--warn, #cc3266); }
.doradztwo ul { list-style: none; padding-left: 2px; margin: 4px 0; }
.doradztwo li { position: relative; padding-left: 20px; margin: 7px 0; color: var(--ink-2, #38505c); font-size: 14px; line-height: 1.55; }
.doradztwo .doradzaj li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent-2, #14a085); font-weight: 700; }
.doradztwo .odradzaj li::before { content: "+"; position: absolute; left: 0; color: var(--warn, #cc3266); font-weight: 700; }

/* ── Karta substancji: kropki częstości działań niepożądanych (SUBST) ──
   ●/○ z entries/_build.py → <span class="freq-dot on|off">. Nazwa „freq-dot"
   (nie „dot" — .dot w motywie jest scope'owane do innych komponentów). 15.07.2026. */
.freq-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid var(--ink, #16323F); margin: 0 1.5px; vertical-align: middle; box-sizing: border-box; }
.freq-dot.on { background: var(--ink, #16323F); }
td .freq-dot:first-child { margin-left: 0; }

/* ── Karta decyzji GIF (single-gif.php): boks „Szczegóły decyzji” ── 16.07.2026 */
.gif-facts { border: 1px solid var(--line, #e3e8ec); border-left: 4px solid var(--warn, #cc3266); border-radius: 0 12px 12px 0; background: rgba(204,50,102,.05); padding: 16px 20px; margin: 20px 0; }
.gif-facts-h { font-family: 'Onest', system-ui, sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--warn, #cc3266); margin-bottom: 10px; }
.gif-facts dl { margin: 0; }
.gif-facts .gif-row { display: flex; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line, #eceff1); font-size: 14px; }
.gif-facts .gif-row:first-child { border-top: 0; }
.gif-facts dt { flex: 0 0 190px; color: var(--ink-2, #5e6b73); font-weight: 600; margin: 0; }
.gif-facts dd { margin: 0; color: var(--ink, #16323F); }
.gif-facts .gif-pdf { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: var(--warn, #cc3266); color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.gif-facts .gif-pdf:hover { filter: brightness(1.05); }
@media (max-width: 640px) { .gif-facts .gif-row { flex-direction: column; gap: 2px; } .gif-facts dt { flex: none; } }