/* ============================================================
   Таблиця співставлення — стилі поверх classifiers.css.
   Перемикач режимів, чипи кодів у дослівному тексті клітинки,
   розкривні ОДК, бейджі умов.
   Токени — зі styles.css (--ink, --accent, --surface, --line…).
   ============================================================ */

/* ── Режим: послуги / ОДК ──────────────────────────────────── */
.mp-modebar {
  display: inline-flex; background: var(--soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 2px; margin-bottom: 12px;
}
.mp-mode {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 14px; border-radius: 8px;
}
.mp-mode:hover { color: var(--accent-dark); }
.mp-mode.active { background: var(--accent-dark); color: #fff; }

/* ── Бейджі в рядку результату ─────────────────────────────── */
.pk-dot.cond { background: #b4762a; }
.pk-dot.note { background: var(--accent-dark); }
.pk-dot.hit { background: var(--teal-dark); }

/* ── Дослівний текст клітинки ──────────────────────────────── */
.mp-raw {
  font-size: .9rem; line-height: 1.85; color: var(--ink);
  background: var(--soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  max-height: 320px; overflow-y: auto; overflow-wrap: anywhere;
}

.code-chip {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; font-weight: 600; line-height: 1.3;
  border-radius: 6px; padding: 1px 6px; margin: 0 1px; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
}
.code-chip.code-icd { background: var(--accent-soft); color: var(--accent-dark); }
.code-chip.code-achi { background: var(--warm); color: var(--teal-dark); }
.code-chip.code-esoz { background: var(--soft); color: var(--accent-dark); border-color: var(--line); }
a.code-chip.code-esoz:hover { border-color: var(--accent); background: var(--accent-soft); }
.code-chip.code-loinc { background: var(--soft); color: var(--teal-dark); border-color: var(--teal); }
.code-chip.code-odk {
  background: var(--teal); color: #fff; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 700; border: 0;
}
/* Діапазон категорій: не окрема картка, а позначка — склад розкрито нижче */
.code-chip.code-odk-range { cursor: default; background: var(--teal-dark); }
a.code-chip:hover { border-color: currentColor; }

/* Код, за яким шукали: у переліку на тисячу чипів око саме його не знайде. */
.code-chip.code-hit {
  background: var(--accent-dark); color: #fff; border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: code-hit-pulse 1.1s ease-out 2;
}
@keyframes code-hit-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50% { box-shadow: 0 0 0 7px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) { .code-chip.code-hit { animation: none; } }

/* ── Підказка з назвою коду (наведення на чип у картці) ────── */
.code-tip {
  position: fixed; z-index: 10600; max-width: 340px;
  display: grid; gap: 2px; padding: 8px 11px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 42, 67, .18);
  font-size: .85rem; line-height: 1.45;
  pointer-events: none;   /* підказка не має перехоплювати курсор із коду */
}
.code-tip[hidden] { display: none; }
.tip-kind {
  font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.tip-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; font-weight: 700; color: var(--accent-dark);
}
.tip-name { overflow-wrap: anywhere; }
.tip-name em { font-style: normal; color: var(--muted); }
.tip-note { font-size: .72rem; color: #8a5a17; }
.tip-hint { margin-top: 2px; font-size: .7rem; color: var(--muted); }

:root.dark-theme .code-tip { box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
:root.dark-theme .tip-note { color: #f0c894; }

/* ── Умови ─────────────────────────────────────────────────── */
.cond-badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  background: #f6e5c3; color: #8a5a17; border-radius: 20px; padding: 3px 10px;
}

/* ── Діапазони ─────────────────────────────────────────────── */
.mp-ranges { margin-top: 8px; font-size: .78rem; color: var(--muted); }
.range-chip {
  display: inline-block; background: var(--soft); border: 1px solid var(--line);
  border-radius: 20px; padding: 2px 9px; margin: 2px 3px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.range-chip em { font-style: normal; font-weight: 700; color: var(--accent-dark); }

/* ── Розкривний склад ОДК ──────────────────────────────────── */
.mp-odk { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mp-odk summary {
  cursor: pointer; padding: 9px 12px; font-size: .86rem; font-weight: 600; color: var(--accent-dark);
}
.mp-odk summary::-webkit-details-marker { display: none; }
.mp-odk summary::before { content: "▸ "; color: var(--muted); }
.mp-odk[open] summary::before { content: "▾ "; }
.odk-count { float: right; font-size: .74rem; font-weight: 700; color: var(--muted); }
.odk-codes { max-height: 260px; overflow-y: auto; padding: 0 12px 12px; gap: 3px; }

/* ── Додаткова інформація ──────────────────────────────────── */
.mp-note {
  margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink);
  padding-left: 11px; border-left: 3px solid var(--teal);
}

:root.dark-theme .cond-badge { background: rgba(180, 118, 42, .25); color: #f0c894; }

/* ── Вагові коефіцієнти ДСГ ────────────────────────────────── */
.coef-list { display: grid; gap: 8px; }
.coef-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 10px;
  font-size: .87rem; line-height: 1.4;
  background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
}
.coef-row b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent-dark);
}
.coef-title { min-width: 0; color: var(--ink); }
.coef-values { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.coef-val {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: .72rem; color: var(--muted); white-space: nowrap;
}
.coef-val em {
  font-style: normal; font-size: .95rem; font-weight: 800; color: var(--teal-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.coef-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem; font-weight: 800; color: var(--teal-dark);
}
.coef-warn {
  font-size: .68rem; font-weight: 700; color: #8a5a17; background: #f6e5c3;
  border-radius: 20px; padding: 1px 8px; white-space: nowrap;
}
.coef-none { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.coef-link { font-size: .74rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.coef-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .coef-row { grid-template-columns: 1fr; gap: 5px; }
  .coef-values { justify-content: flex-start; }
}

:root.dark-theme .coef-row { background: var(--soft); }
:root.dark-theme .coef-warn { background: rgba(180, 118, 42, .25); color: #f0c894; }