/* subst-styles.css – opieka.farm · indeks i karty substancji czynnych.
   Builds on home-styles.css (tokens, chrome) and reuses the index + detail
   scaffolding from calc-styles.css (.calc-head, .cat-filter, .calc-group-h,
   .calc-grid, .calc-card, .calc-wrap, .calc-prose, .calc-warn, .interp, .calc-rail)
   plus detail blocks from chor-styles.css (.chor-note, .chor-facts, .counsel,
   .sym-chips). This file only adds substance-
   specific bits: the ATC code + pregnancy badge on the card, the class line,
   and the detail blocks (interactions, działania niepożądane, ciąża/laktacja).
   Loaded last. */

/* Per-class icon colour variants on the shared card */
.calc-card.s-pain   .ic { background: rgba(204,50,102,0.12);  color: var(--warn); }
.calc-card.s-gi     .ic { background: rgba(20,160,133,0.12); color: var(--accent-2); }
.calc-card.s-resp   .ic { background: rgba(29,115,139,0.10); color: var(--primary-2); }
.calc-card.s-cardio .ic { background: rgba(204,50,102,0.12);  color: var(--warn); }
.calc-card.s-metab  .ic { background: rgba(13,75,92,0.08);   color: var(--primary); }
.calc-card.s-infect .ic { background: rgba(20,160,133,0.12); color: var(--accent-2); }
.calc-card.s-vit    .ic { background: rgba(13,75,92,0.08);   color: var(--primary); }

/* OTC / Rp availability flag – same visual language as the disease index */
.calc-card .flag {
  margin-left: auto; flex-shrink: 0;
  padding: 3px 9px; border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.calc-card .flag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.calc-card .flag.otc { background: rgba(20,160,133,0.12); color: var(--accent-2); }
.calc-card .flag.rx  { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.calc-card .flag.mix { background: rgba(13,75,92,0.08);   color: var(--primary); }

/* Class / mechanism line under the substance name */
.calc-card .subst-grp {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.35;
  margin: -2px 0 2px;
}

/* ATC code in the card foot */
.calc-card .atc {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--ink-3);
  padding: 2px 7px; border-radius: 5px; background: var(--bg);
}

/* Pregnancy-category mini badge (foot + facts strip) */
.subst-preg {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.03em; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.subst-preg.p-a  { background: rgba(20,160,133,0.12); color: var(--accent-2); }
.subst-preg.p-b  { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.subst-preg.p-c  { background: rgba(204,50,102,0.12);  color: var(--warn); }
.subst-preg.p-d  { background: oklch(0.55 0.17 28 / 0.14); color: oklch(0.52 0.18 28); }
.subst-preg.p-x  { background: oklch(0.52 0.2 25 / 0.16);  color: oklch(0.48 0.21 25); }
.subst-preg.p-na { background: var(--bg); color: var(--ink-3); }

/* Pregnancy key in the legend row */
.subst-preg-key { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.subst-preg-key b { color: var(--ink-2); font-family: 'IBM Plex Mono', monospace; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   DETAIL – substance entry. Reuses .calc-wrap / .calc-main / .calc-rail /
   .calc-detail-h / .calc-prose / .calc-warn / .interp + chor-* blocks.
   ───────────────────────────────────────────────────────────────────────── */

/* Kicker icon tint on the substance detail header (green = substancje) */
.calc-detail-h .kicker.subst .ic { background: rgba(20,160,133,0.12); color: var(--accent-2); }
.calc-detail-h .kicker.subst { color: var(--accent-2); }

/* Pregnancy / availability pills inside the facts strip */
.chor-facts .fact .v .preg-a  { color: var(--accent-2); }
.chor-facts .fact .v .preg-b  { color: var(--primary-2); }
.chor-facts .fact .v .preg-c  { color: var(--warn); }
.chor-facts .fact .v .preg-d  { color: oklch(0.52 0.18 28); }
.chor-facts .fact .v .preg-x  { color: oklch(0.48 0.21 25); }

/* Neutral indication chips (built on the disease sym-chips) */
.sym-chips .chip.neutral .d { background: var(--accent-2); }

/* Interactions list – severity-coded rows */
.subst-inter { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 2px; }
.subst-inter .row {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px 16px; align-items: start;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--rad-md);
}
.subst-inter .row .sev {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px; align-self: start; white-space: nowrap;
}
.subst-inter .row .sev::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.subst-inter .row.high .sev { background: oklch(0.52 0.2 25 / 0.14); color: oklch(0.48 0.2 25); }
.subst-inter .row.mod  .sev { background: rgba(204,50,102,0.13); color: var(--warn); }
.subst-inter .row.low  .sev { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.subst-inter .row .tx { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; min-width: 0; }
.subst-inter .row .tx .w { font-weight: 600; color: var(--ink); }

/* Działania niepożądane – frequency columns */
.subst-adverse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 2px; }
.subst-adverse .freq {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-md);
  padding: 15px 17px;
}
.subst-adverse .freq .h {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 11px;
  display: flex; align-items: center; gap: 8px;
}
.subst-adverse .freq .h .d { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.subst-adverse .freq.common .h   { color: var(--warn); }
.subst-adverse .freq.common .h .d { background: var(--warn); }
.subst-adverse .freq.uncommon .h   { color: var(--primary-2); }
.subst-adverse .freq.uncommon .h .d { background: var(--primary-2); }
.subst-adverse .freq.rare .h   { color: var(--ink-3); }
.subst-adverse .freq.rare .h .d { background: var(--ink-4); }
.subst-adverse .freq .pct {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
  color: var(--ink-4); letter-spacing: 0.02em; margin-left: auto; text-transform: none;
}
.subst-adverse .freq ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.subst-adverse .freq li {
  list-style: none; font-size: 13px; color: var(--ink-2); line-height: 1.45;
  padding-left: 15px; position: relative;
}
.subst-adverse .freq li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--ink-4);
}

/* Ciąża & laktacja – two cards */
.subst-preglac { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 2px; }
.subst-preglac .cell {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-md);
  padding: 16px 18px;
}
.subst-preglac .cell .cap {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.subst-preglac .cell .cap .cat {
  margin-left: auto; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 6px;
}
.subst-preglac .cell .cap .cat.a { background: rgba(20,160,133,0.12); color: var(--accent-2); }
.subst-preglac .cell .cap .cat.b { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.subst-preglac .cell .cap .cat.c { background: rgba(204,50,102,0.13);  color: var(--warn); }
.subst-preglac .cell .cap .cat.d { background: oklch(0.55 0.17 28 / 0.14); color: oklch(0.52 0.18 28); }
.subst-preglac .cell .cap .cat.x { background: oklch(0.52 0.2 25 / 0.16);  color: oklch(0.48 0.21 25); }
.subst-preglac .cell p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.subst-preglac .cell p b { color: var(--ink); font-weight: 600; }

/* Rail: ATC tree / quick identity card */
.calc-rail .atc-card .row {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 7px 0;
  font-size: 13px; color: var(--ink); align-items: baseline;
}
.calc-rail .atc-card .row + .row { border-top: 1px solid var(--line); }
.calc-rail .atc-card .row .lab {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.calc-rail .atc-card .row .val { font-weight: 600; }
.calc-rail .atc-card .row .val small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }

@media (max-width: 860px) {
  .subst-adverse { grid-template-columns: 1fr; }
  .subst-preglac { grid-template-columns: 1fr; }
  .subst-preg-key { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .subst-inter .row { grid-template-columns: 1fr; }
}