/* Оформление прототипа psyaiassistant
   Редакция 3 от 24.08.2026

   Две темы на одних и тех же токенах: тёмная по умолчанию, светлая по выбору.
   Правило: цвет в правилах ниже задаётся ТОЛЬКО переменной. Захардкоженный
   #fff в одном месте ломает вторую тему молча — сбой видно лишь глазами
   и лишь в той теме, которую в этот момент не смотрят.

   Тему ставит shell.js атрибутом data-theme на <html>; выбор запоминается.
   Без выбора берётся системная (prefers-color-scheme). */

:root,
:root[data-theme="dark"] {
  --bg:        #0c0e0d;
  --rail:      #0a0c0b;
  --rail-on:   #171d1a;
  --panel:     #111513;
  --panel-2:   #151a18;
  --field:     #121614;
  --line:      #1b201e;
  --line-2:    #232a27;
  --ink:       #e6e8e6;
  --ink-2:     #c3cac6;
  --muted:     #8d9791;
  --dim:       #78837d;
  --accent:    #7ee3b0;
  --on-accent: #06110c;
  --accent-soft: rgba(126, 227, 176, .11);
  --accent-line: #1f302a;
  --ref:       #79b8f0;
  --warn:      #f0b384;
  --warn-soft: rgba(240, 179, 132, .10);
  --warn-line: #3a2c22;
  --shadow:    0 18px 44px rgba(0, 0, 0, .45);
  --scrim:     rgba(4, 6, 5, .6);
  /* Печать идёт на белом независимо от темы — это решение, а не упущение,
     но и оно живёт переменной: захардкоженный цвет в правиле печати нашли
     проверкой и он ничем не лучше остальных. */
  --paper:      #ffffff;
  --paper-ink:  #000000;
  --paper-line: #999999;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #f2f4f2;
  --rail:      #e9edeb;
  --rail-on:   #dde4e0;
  --panel:     #ffffff;
  --panel-2:   #f7f9f8;
  --field:     #ffffff;
  --line:      #dde3e0;
  --line-2:    #cbd4cf;
  --ink:       #121614;
  --ink-2:     #2c3733;
  --muted:     #59635e;
  --dim:       #656f69;
  --accent:    #12735a;
  --on-accent: #ffffff;
  --accent-soft: #e4f2ec;
  --accent-line: #bfe0d2;
  --ref:       #1a5fb4;
  --warn:      #8a4b2a;
  --warn-soft: #f7ece4;
  --warn-line: #e6d5c6;
  --shadow:    0 10px 30px rgba(16, 24, 20, .10);
  --scrim:     rgba(16, 24, 20, .45);
  --paper:      #ffffff;
  --paper-ink:  #000000;
  --paper-line: #999999;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f4f2; --rail: #e9edeb; --rail-on: #dde4e0; --panel: #ffffff;
    --panel-2: #f7f9f8; --field: #ffffff; --line: #dde3e0; --line-2: #cbd4cf;
    --ink: #121614; --ink-2: #2c3733; --muted: #59635e; --dim: #656f69;
    --accent: #12735a; --on-accent: #ffffff; --accent-soft: #e4f2ec; --accent-line: #bfe0d2;
    --ref: #1a5fb4;
    --warn: #8a4b2a; --warn-soft: #f7ece4; --warn-line: #e6d5c6;
    --shadow: 0 10px 30px rgba(16, 24, 20, .10);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

/* Атрибут hidden обязан побеждать любой display из классов: у .actions, .modal
   и .dx-list он есть, и без этой строки скрытый блок остаётся на экране. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14.5px/1.55 Onest, "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── каркас: боковой рельс и рабочая область ── */
.app { display: flex; min-height: 100vh; }

.rail {
  position: sticky; top: 0; align-self: flex-start;
  flex: 0 0 58px; height: 100vh;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 0;
  background: var(--rail);
  border-right: 1px solid var(--line);
}
.rail .mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600;
}
.rail .spacer { flex-grow: 1; }
.rail-btn {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: none; border-radius: 10px; background: none; color: var(--dim);
  cursor: pointer;
}
.rail-btn:hover { background: var(--rail-on); color: var(--ink-2); }
.rail-btn.on { background: var(--rail-on); color: var(--accent); }
.rail-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.theme-switch { display: flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 12px; background: var(--rail-on); }
.theme-switch button { width: 30px; height: 30px; padding: 0; border: none; border-radius: 9px; background: none; color: var(--dim); cursor: pointer; display: grid; place-items: center; }
.theme-switch button.on { background: var(--panel); color: var(--accent); }
.theme-switch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.stage { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

/* ── верхняя полоса рабочей области ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 26px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar .t1 { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.topbar .t2 { color: var(--dim); font-size: 12px; }
.topbar .spacer { flex-grow: 1; }

button {
  font: inherit; cursor: pointer;
  border-radius: 9px; padding: 8px 14px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink);
}
button:hover { border-color: var(--dim); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
button.primary:hover { filter: brightness(1.08); }
button.link { border: none; background: none; color: var(--muted); text-decoration: underline; padding: 0; }
.actions { display: flex; gap: 8px; }

/* ── полоса об ответственности ── */
.pdstrip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 26px;
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  color: var(--warn);
  font-size: 12.5px;
}
.pdstrip .link { color: var(--warn); }

main { max-width: 1180px; width: 100%; margin: 0 auto; padding: 20px 26px 60px; }

/* ── форма протокола ── */
fieldset {
  margin: 0 0 14px;
  padding: 14px 18px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
legend { padding: 0 8px; font-weight: 600; font-size: 14px; }
legend .soap {
  margin-left: 8px; padding: 1px 7px;
  border-radius: 20px; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
fieldset .note { margin: 2px 0 10px; color: var(--muted); font-size: 12.5px; }

.field { margin-top: 12px; }
.field:first-child { margin-top: 4px; }
label { display: block; font-size: 13.5px; margin-bottom: 4px; }

fieldset.grid { display: block; }
fieldset.grid .field { display: inline-block; width: calc(50% - 8px); vertical-align: top; margin-right: 12px; }
fieldset.grid .field:nth-child(2n) { margin-right: 0; }

.section-area {
  min-height: 120px;
  /* Потолок высоты: раздел 5 при развёрнутом заполнении давал полотно
     в несколько экранов, и ориентироваться в форме становилось нечем.
     На печати потолок снимается — там режет страница, а не поле. */
  max-height: 60vh;
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 12.5px; line-height: 1.75; tab-size: 2;
  overflow: auto;
}

.guide {
  margin: 10px 0 0; padding: 14px 16px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
  font: 12.5px/1.6 inherit;
  white-space: pre-wrap; word-wrap: break-word;
  color: var(--ink-2);
}

/* ── бланк шкалы ── */
.scale-host {
  margin-top: 10px; padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 10px;
}
.scale-hint, .scale-lead { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.scale-title { font-weight: 600; margin-bottom: 4px; }
button.scale-pick { display: block; width: 100%; text-align: left; margin-bottom: 6px; font-size: 13px; }

.scale-item { padding: 9px 0; border-top: 1px solid var(--line); }
.scale-item:first-of-type { border-top: none; }
.scale-q { font-size: 13.5px; margin-bottom: 5px; }
.scale-d { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 2px 0 7px; }
.scale-opts { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.scale-opts label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 0; cursor: pointer; }
.scale-opts input { width: auto; accent-color: var(--accent); }
.scale-opts.col { flex-direction: column; gap: 4px; }
.scale-opts.col label { align-items: flex-start; line-height: 1.4; }
.scale-item.wide { padding: 13px 0; }
.scale-item.answered .scale-q { color: var(--muted); }

.scale-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.scale-out { margin: 10px 0 0; padding: 9px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 13px; white-space: pre-wrap; }
.scale-out.warn { background: var(--warn-soft); color: var(--warn); }

.row-actions { margin-top: 10px; text-align: right; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
button.tiny { padding: 4px 10px; font-size: 12px; color: var(--muted); background: none; }
button.tiny:hover { color: var(--ink); }

input, textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 9px 11px;
  background: var(--field);
  border: 1px solid var(--line-2); border-radius: 9px;
  resize: vertical;
}
input::placeholder { color: var(--dim); }
/* ── фокус ──
   Прежде правило было ровно одно, и оно ухудшало исходное: обводка цветом
   --accent-soft в тёмной теме почти невидима, а системную она перебивала.
   У кнопок фокуса не было вовсе, то есть клавиатурой пользоваться было нельзя. */
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
textarea { min-height: 58px; }
input[type="date"] { max-width: 220px; }

/* ── документ ── */
.result { margin-top: 8px; }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.result-bar h2 { margin: 0; font-size: 17px; }
.result-bar div { display: flex; gap: 8px; flex-wrap: wrap; }

#resultText {
  margin: 0; padding: 26px 30px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
  font: 14px/1.7 Literata, Georgia, "Times New Roman", serif;
  color: var(--ink-2);
  white-space: pre-wrap; word-wrap: break-word;
}

.bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 26px 30px;
  color: var(--dim); font-size: 12.5px;
}

/* ── модальное окно ── */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--scrim);
  padding: 24px;
}
.modal-box {
  max-width: 640px; max-height: 88vh; overflow: auto;
  padding: 26px 30px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
}
.modal-box h2 { margin: 0 0 14px; font-size: 19px; }
.modal-box p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.modal-box .ack { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; }
.modal-box .ack input { width: auto; accent-color: var(--accent); }

/* ── диагностика ── */
.dx-search { margin-bottom: 14px; }
.dx-search input[type="search"] { padding: 12px 15px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip { padding: 6px 12px; font-size: 12.5px; border-radius: 20px; color: var(--muted); background: none; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }

.dx-body { display: grid; grid-template-columns: 258px 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .dx-body { grid-template-columns: 1fr; } }
/* Открыта шкала: слева вместо фасетов липкое оглавление карточки (toc.js).
   Ширина — как у оглавления в «Заболеваниях»; на узком экране меню встаёт
   над карточкой и не липнет — порог тот же, что у .db-toc. */
.dx-body.scale-open { grid-template-columns: 216px minmax(0, 1fr); }
@media (max-width: 980px) { .dx-body.scale-open { grid-template-columns: 1fr; } }

/* ── узкий экран ──
   Рельс не адаптировался вовсе: 58 px рельса плюс поля отнимали у каталога
   столько, что при minmax(300px, …) появлялась горизонтальная прокрутка.
   Поле поиска меньше 16 px заставляет iOS зумить страницу при фокусе. */
@media (max-width: 640px) {
  .app { flex-direction: column; }
  .rail {
    flex: 0 0 auto; height: auto; width: 100%;
    flex-direction: row; align-items: center; gap: 6px;
    padding: 6px 10px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .rail .mark { margin: 0 6px 0 0; }
  .rail .spacer { flex-grow: 1; }
  .rail #tabs { display: flex; flex-direction: row; gap: 6px; }
  .theme-switch { flex-direction: row; }
  main { padding: 14px 12px; }
  .bottom { padding: 0 12px 20px; flex-wrap: wrap; }
  .dx-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .dx-search input[type="search"] { font-size: 16px; }
  .facet-list { max-height: 34vh; }
  .toc, .sy-toc { position: static; }
  .sy-block { scroll-margin-top: 12px; }
  .sy-list { grid-template-columns: 1fr; }
}

.seg { display: flex; margin-bottom: 10px; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.seg button { flex: 1; border: none; border-radius: 0; padding: 8px 4px; font-size: 12px; color: var(--muted); background: var(--panel); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.on { background: var(--rail-on); color: var(--accent); font-weight: 600; }

.facet-list { display: flex; flex-direction: column; gap: 2px; max-height: 64vh; overflow: auto; }
.facet {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border: none; background: none; text-align: left;
  padding: 7px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.35; color: var(--muted);
}
.facet:hover { background: var(--rail-on); color: var(--ink); }
.facet.on { background: var(--rail-on); color: var(--ink); font-weight: 600; }
.facet i { font-style: normal; color: var(--dim); font-size: 11.5px; }

.dx-crumb { margin-bottom: 10px; color: var(--dim); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.dx-lead { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.dx-empty { color: var(--muted); }

.dx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.dx-card {
  display: block; text-align: left; padding: 13px 15px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.dx-card:hover { border-color: var(--dim); }
.dx-card.kr { border-color: var(--accent-line); }
.dx-card.translated { border-color: var(--warn-line); }
.dx-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dx-card-h b { font-size: 15px; letter-spacing: -.01em; }
.tag-kr { font-size: 10.5px; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 20px; white-space: nowrap; font-weight: 600; }
.tag-ready { font-size: 10.5px; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.tag-tr { font-size: 10.5px; color: var(--warn); background: var(--warn-soft); padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.tag-cat { font-size: 10.5px; color: var(--dim); white-space: nowrap; }
.dx-card-f { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.dx-card-w { margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.dx-card-b { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px; }
.dx-card-b i { font-style: normal; font-size: 10.5px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 5px; }

.dx-scale { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px 22px; }
.dx-scale h2 { margin: 6px 0 2px; font-size: 22px; letter-spacing: -.02em; }
.dx-sub { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.dx-what { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
.dx-src { margin-bottom: 16px; padding: 11px 15px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.dx-src-t { font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.dx-src ul { margin: 6px 0 0; padding-left: 18px; }
.dx-src li { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.dx-official {
  margin: 0 0 14px; padding: 12px 15px;
  background: var(--accent-soft); color: var(--ink-2);
  border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  font-size: 13px; line-height: 1.55;
}
.dx-note { font-size: 13px; line-height: 1.6; padding: 12px 15px; background: var(--warn-soft); color: var(--warn); border-radius: 10px; }
.dx-blank { margin-bottom: 8px; }
.dx-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.dx-opts label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 0; }
.dx-opts input { width: auto; accent-color: var(--accent); }
.dx-out {
  margin: 12px 0 0; padding: 20px 22px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  font: 13.5px/1.65 Literata, Georgia, serif; color: var(--ink-2);
  white-space: pre-wrap; word-wrap: break-word;
}
.dx-manual { margin-top: 16px; padding: 15px 17px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; }
.dx-manual-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.dx-manual-f { flex: 1 1 120px; }
.dx-manual-f label, .dx-manual .field label { font-size: 12.5px; color: var(--muted); }
.dx-manual .field { margin-top: 12px; }

/* ── проверка на идентификацию ── */
.check-box {
  margin-bottom: 12px; padding: 13px 17px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: 0 10px 10px 0; font-size: 13px;
}
.check-box p { margin: 0 0 6px; }
.check-box p.ok { color: var(--accent); }
.check-box p.warn { color: var(--warn); font-weight: 600; }
.check-box p.note { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.check-box ul { margin: 6px 0; padding-left: 20px; }
.check-box li { line-height: 1.5; }
.check-box li.high { color: var(--warn); }
.check-box li.soft { color: var(--muted); }

.dx-date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.dx-date input { width: 150px; }

/* Выбор раздела протокола для результата шкалы. */
.dx-picker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); font-size: 12.5px;
}

/* ── оглавление формы ──
   Три правила, и каждое исправляет свою поломку.
   1. Липнет не к нулю, а к нижнему краю шапки: шапка тоже липкая и выше
      по слою, поэтому оглавление уезжало под неё и была видна только
      последняя строка — попасть в первый раздел становилось нельзя.
   2. Одна строка вместо переноса: восемнадцать названий переносились на три
      строки и занимали пятую часть экрана. Не помещающееся прокручивается
      по горизонтали, а текущий раздел подтягивается в видимую часть сам.
   3. Слой выше содержимого, но ниже шапки. */
.toc {
  position: sticky; top: var(--topbar-h, 58px); z-index: 9;
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  margin: 0 0 14px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  scrollbar-width: thin;
}
.toc button {
  font-size: 11.5px; padding: 3px 9px; min-height: 26px;
  white-space: nowrap; flex: 0 0 auto;
}
.toc button.filled { color: var(--accent); border-color: var(--accent-line); }
/* Где врач сейчас: заливка, а не только цвет текста, — заполненный раздел
   тоже зелёный, и одним цветом эти два состояния не различить. */
.toc button.here {
  background: var(--accent-soft); border-color: var(--accent); color: var(--ink);
}

/* Незавершённый бланк: предложение продолжить в начале каталога. */
.dx-resume {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--accent-line); border-radius: 10px;
  color: var(--ink-2); font-size: 13px;
}

/* ── ход заполнения бланка ── */
.dx-progress {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 9px 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted); font-size: 12.5px;
}
.dx-progress.done { color: var(--accent); border-color: var(--accent-line); }
.dx-progress span { font-variant-numeric: tabular-nums; }

/* Кнопка снятия ответа — рядом с вариантами, неброская до наведения. */
.scale-clear {
  margin-left: 4px; padding: 0 7px; min-height: 24px;
  background: none; border: 1px solid transparent; border-radius: 6px;
  color: var(--dim); font-size: 15px; line-height: 1; cursor: pointer;
}
.scale-clear:hover { color: var(--warn); border-color: var(--warn-line); }

/* Подсветка пункта, к которому перешли по кнопке «к первому неотмеченному». */
.scale-item.spot { background: var(--accent-soft); border-radius: 8px; }

/* Свободный текст в «Симптом-чеке»: авторастущее поле и кандидаты под ним.
   Кандидат — не отметка: строка повторяет вид ck-found, но несёт цитату-предложение
   и, где найдено отрицание, предупреждение. */
.ck-text { margin: 0 0 12px; }
.ck-text textarea {
  width: 100%; box-sizing: border-box; resize: none; overflow: hidden;
  min-height: 58px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); color: var(--ink);
  font: inherit; font-size: 13.5px; line-height: 1.5;
}
.ck-text textarea:focus { outline: none; border-color: var(--accent-line); }
.ck-cands { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 6px 0; }
.ck-cands-t { margin: 4px 14px 6px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ck-cand-q { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ck-cand-neg { display: inline-block; margin-left: 6px; color: var(--accent); font-size: 11.5px; font-style: italic; }

/* Раздел «Кодирование» карточки заболевания: перечень подрубрик МКБ-10.
   Код моноширинно-табличный, страница приглушена; раздел стоит последним. */
.db-sub-code { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.db-sub-page { color: var(--dim); font-size: 12px; }
.db-sub-note { margin: 4px 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ── раздел «Симптомы и синдромы» ── */
/* Классификатор по группам слева, список справа. Рельс липкий, как .ck-side:
   при полусотне записей группа держится на виду на всей длине списка.
   На узком экране рельс встаёт над списком и не липнет — порог тот же,
   что у остальных боковых панелей. */
.sy-body { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
/* Без min-width колонка списка распирается строками с nowrap и уезжает
   за правый край: у грид-ребёнка min-width по умолчанию auto. */
.sy-main { min-width: 0; }
.sy-groups {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); padding: 10px 8px 10px;
  position: sticky; top: calc(var(--topbar-h, 64px) + 12px);
  max-height: calc(100vh - var(--topbar-h, 64px) - 28px);
  overflow-y: auto; overscroll-behavior: contain;
}
.sy-groups-t {
  margin: 0 6px 7px; font-size: 12px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.sy-g {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; padding: 6px 8px; text-align: left;
  border: none; border-radius: 8px; background: none; color: var(--ink);
  font-size: 13px; line-height: 1.3;
}
.sy-g span:first-child { flex: 1 1 auto; min-width: 0; }
.sy-g:hover { background: var(--panel-2); }
.sy-g.on { background: var(--panel-2); color: var(--accent); font-weight: 500; }
.sy-g-n { flex: 0 0 auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sy-g.on .sy-g-n { color: var(--accent); }
@media (max-width: 820px) {
  .sy-body { grid-template-columns: 1fr; gap: 10px; }
  /* На узком экране рельс стоит В ПОТОКЕ, и своего скролла у него нет.
     overflow-y: auto с overscroll-behavior: contain здесь НЕЛЬЗЯ оставлять:
     скроллбокс, которому нечего крутить, с contain съедает палец — свайп,
     начатый на рельсе (а он занимает верх экрана), не прокручивал страницу
     на телефоне вовсе (дефект нашёл заказчик 14.09.2026). */
  .sy-groups { position: static; max-height: none; overflow-y: visible;
               overscroll-behavior: auto; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .sy-groups-t { flex: 1 1 100%; margin-bottom: 2px; }
  .sy-g { width: auto; }
}
/* Каталог — список строк, а не плитки. При полусотне записей плитки занимают
   несколько экранов, и результат отбора перестаёт быть виден целиком; строка
   держит название, англоязычное имя и начало описания в одну линию. */
.sy-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sy-row {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; padding: 9px 14px; min-height: 0;
  text-align: left; border: none; border-radius: 0;
  background: var(--panel); color: var(--ink);
}
.sy-row + .sy-row { border-top: 1px solid var(--line); }
.sy-row:hover { background: var(--panel-2); }
.sy-row b { flex: 0 0 auto; font-size: 13px; font-weight: 500; }
.sy-row .sy-tm { color: var(--muted); }
.sy-badge.tm { color: var(--muted); }
.sy-badge { flex: 0 0 auto; font-size: 12px; }
.sy-row .sy-en { flex: 0 0 auto; }
/* Описание занимает остаток строки и обрезается многоточием: перенос на вторую
   строку сбил бы ровный шаг списка, по которому глаз и идёт при отборе. */
.sy-row .sy-what { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sy-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-2); font: inherit; cursor: pointer;
}
.sy-what { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.sy-tags { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* Карточка симптома: не кнопка, поэтому курсор и выравнивание обычные. */
.sy-card { margin-top: 0; cursor: default; gap: 0; }
.sy-card h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.sy-lead { margin: 0 0 10px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.sy-syn { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.sy-block { margin-bottom: 14px; padding: 10px 14px; background: var(--panel-2); border-radius: 10px; }
.sy-block-t { margin-bottom: 6px; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.sy-block ul { margin: 0; padding-left: 18px; }
.sy-block li { margin-bottom: 5px; font-size: 13px; line-height: 1.55; }
/* «Зачем» — довод под пунктом: он объясняет, почему вопрос стоит времени приёма. */
.sy-why { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.sy-block.pairs { border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.sy-block.diff li { color: var(--accent); }
.sy-block.not li { color: var(--muted); }
/* ─── Симптом на весь экран ─── */

/* Возврат в список. Стоит первой строкой карточки: при полноэкранном виде это
   единственный выход, и искать его врач не должен. */
.sy-back-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sy-back { font-size: 12.5px; padding: 5px 12px; }
.sy-back-hint { color: var(--dim); font-size: 11.5px; }

/* Оглавление карточки. Липнет под шапку, высота которой замеряется в app.js:
   заданное числом значение уводит полосу ПОД шапку на узком экране. */
.sy-toc {
  position: sticky; top: var(--topbar-h, 58px); z-index: 9;
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  margin: 0 0 14px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  scrollbar-width: thin;
}
.sy-toc button { font-size: 11.5px; padding: 3px 9px; min-height: 26px; white-space: nowrap; flex: 0 0 auto; }

/* Переход по оглавлению не должен ставить заголовок блока под липкую полосу:
   отступ — высота шапки плюс высота самой полосы. */
.sy-block { scroll-margin-top: calc(var(--topbar-h, 58px) + 58px); }

/* Определение: тот же блок, что и остальные, чтобы оглавление вело и на него. */
.sy-block.lead .sy-lead { margin: 0; }
.sy-block.lead .sy-syn { margin: 8px 0 0; }

/* Определения по источникам. Их может быть несколько, и они не обязаны
   совпадать: расхождение показывается отдельной строкой, а не сглаживается. */
.sy-block.defs { border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.sy-def + .sy-def { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Свёрнутый блок: три строки и затухание к низу. Затухание красится тем же
   токеном, что фон блока, — иначе во второй теме внизу появляется светлая
   полоса, и увидит её только тот, кто в этот момент смотрит именно эту тему. */
/* Рубрика МКБ-10 в карточке синдрома: код и название одной строкой, под ними
   страница и основание отнесения. */
/* Состав синдрома. Роль стоит перед названием: она отвечает на вопрос
   «без чего синдрома нет», а название на вопрос «что именно». */
/* Жалобы сгруппированы по областям жизни: имя области — не заголовок раздела,
   а метка строки, поэтому набрана мельче и в разрядку. */
.sy-block.cmp { border-left: 3px solid var(--line-2); border-radius: 0 10px 10px 0; }
.sy-area + .sy-area { margin-top: 8px; }
.sy-area-t { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.sy-block.cmp ul { margin: 3px 0 0; padding-left: 18px; }
.sy-block.cmp li { margin-bottom: 4px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.sy-who { margin-left: 8px; color: var(--dim); font-size: 11px; }
.sy-also { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }

.sy-block.parts { border-left: 3px solid var(--accent-line); border-radius: 0 10px 10px 0; }
.sy-block.parts li { margin-bottom: 10px; }
.sy-role {
  display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 6px;
  background: var(--panel); color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .03em; vertical-align: 2px;
}
.sy-role.main { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sy-link {
  border: none; background: none; padding: 0; min-height: 0;
  color: var(--accent); font-size: 13px; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
.sy-part-name { color: var(--ink); font-size: 13px; }
.sy-part-none { margin-left: 8px; color: var(--dim); font-size: 11px; }

.sy-block.dx li { margin-bottom: 10px; }
.sy-dx-h { display: block; color: var(--ink); font-size: 13px; line-height: 1.45; }

/* Сворачивание длинных блоков снято по указанию заказчика 12.09.2026: карточка
   печатается целиком, кнопок «Раскрыть» больше нет. Вместо этого между разделами
   карточки симптома — разделительная линия: она рисуется в зазоре между блоками
   (::before у каждого блока, кроме первого), чтобы не выглядеть рамкой панели. */
#syCard .sy-block + .sy-block { position: relative; margin-top: 26px; }
#syCard .sy-block + .sy-block::before {
  content: ''; position: absolute; left: 0; right: 0; top: -14px;
  border-top: 1px solid var(--line);
}

.sy-def-l { margin: 0 0 3px; color: var(--accent); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.sy-def-t { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.6; }
.sy-def-s { margin: 4px 0 0; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sy-def-none { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sy-def-none ul { margin: 6px 0 0; padding-left: 18px; }
.sy-def-none li { margin-bottom: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.sy-def-diff {
  margin: 12px 0 0; padding: 8px 12px;
  background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0;
  color: var(--ink-2); font-size: 12.5px; line-height: 1.55;
}

/* Англоязычное название: в списке — строкой под русским, в карточке — под
   заголовком. Оно нужно не для красоты, а для поиска первоисточника: русское
   название симптома в англоязычной литературе не ищется. */
/* Синдром в общем списке. Пометка двойная — цвет названия и слово рядом:
   один значок читается как украшение, а разница здесь клиническая. */
.sy-sd { color: var(--accent); }
.sy-badge { color: var(--accent); font-size: 11px; letter-spacing: .02em; }
.sy-badge-h { margin: -4px 0 10px; color: var(--muted); font-size: 12px; }
.sy-badge-h.sd { color: var(--accent); }

.sy-en { color: var(--dim); font-size: 11.5px; font-style: italic; }
.sy-en-h { margin: -4px 0 10px; color: var(--muted); font-size: 13px; font-style: italic; }

/* Ссылка на источник печатается целиком: файл, раздел, страница и дословная
   цитата. Цитата даёт проверяемость — по ней место в документе на две сотни
   страниц находится за минуту, и ссылка перестаёт быть словом на веру. */
.sy-block.src { border-left: 3px solid var(--accent-line); border-radius: 0 10px 10px 0; }
.sy-block.src li { margin-bottom: 10px; }
.sy-src-f { display: block; color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.sy-src-p { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sy-src-q { display: block; margin-top: 3px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; font-style: italic; }
.sy-block.none li { color: var(--dim); font-size: 12px; }

.sy-note { margin: 0 0 10px; padding: 10px 14px; background: var(--warn-soft); border-left: 3px solid var(--warn); border-radius: 0 9px 9px 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }

/* ── предыдущий визит: загруженный файлом протокол рядом с формой ── */
.prev-box {
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; font-size: 13px;
}
.prev-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prev-head b { color: var(--ink); }
.prev-body { margin-top: 10px; }
.prev-sec { margin-bottom: 12px; }
.prev-sec b { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.prev-sec pre {
  margin: 0; padding: 8px 10px; white-space: pre-wrap; overflow-x: auto;
  background: var(--field); border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); font-size: 12.5px; line-height: 1.5;
}
.prev-box .note { margin: 0; color: var(--muted); font-size: 12px; }

/* Действия подвала: файл протокола и очистка. */
.bottom-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Кнопка, сообщающая о неудаче, — например, о несостоявшемся копировании. */
button.tiny.warn, button.warn { color: var(--warn); border-color: var(--warn-line); }

/* ── печать: документ печатается на белом независимо от темы ── */
@media print {
  .no-print { display: none !important; }
  html, body { background: var(--paper); color: var(--paper-ink); }
  .app { display: block; }
  main { max-width: none; padding: 0; }
  #resultText { border: none; padding: 0; font-size: 12pt; background: none; color: var(--paper-ink); }
  /* Раздел «Диагностика» печатался тёмными фонами на белом листе: правила
     печати были написаны под протокол и до карточки шкалы не доходили. */
  .dx-scale, .dx-out, .dx-blank, .scale-item, .prev-box, .prev-sec pre {
    background: none !important; border-color: var(--paper-line) !important; color: var(--paper-ink) !important;
  }
  .dx-out { border: none; padding: 0; font-size: 12pt; }
  /* Разрывы страниц: пункт бланка и раздел документа не рвутся посередине. */
  .scale-item, .prev-sec, .dx-src { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  @page { margin: 20mm; }
}

/* Почему шкалу нельзя заполнить: разбор по конкретной записи */
.dx-why { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ─────────────── Симптом-чек ───────────────
   Цвет здесь только из переменных: захардкоженный #fff ломает вторую тему молча.
   Ни одно правило не красит вывод «в пользу диагноза»: акцент отдан тому, чего
   не хватает, а не тому, что совпало. */

.ck-found {
  margin-top: 10px; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--panel);
}
.ck-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; min-height: 38px;
}
.ck-row + .ck-row { border-top: 1px solid var(--line); }
.ck-row:hover { background: var(--panel-2); }
.ck-row b { flex: 0 0 auto; font-size: 13px; font-weight: 500; }
.ck-row-what {
  flex: 1 1 auto; min-width: 0; color: var(--dim); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Кружки, а не залитые плашки. По умолчанию ничего не выбрано: заливка
   на невыбранной кнопке читалась как уже сделанный выбор. Цвет появляется
   при наведении и остаётся после выбора. */
.ck-yes, .ck-no {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  font-size: 14px; line-height: 1; cursor: pointer;
  border: 1.5px solid var(--line-2); background: transparent; color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-yes:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ck-no:hover { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }

/* ── две колонки: слева отмеченное, справа рубрики ──
   Отмеченное держится на виду постоянно: дробь «закрыто 7 из 21» без него
   не читается, потому что непонятно, из чего она сложилась. */
/* Треть ширины на отмеченное, две трети на гипотезы. Прежде колонка была
   258 пикселей: под симптомом с уточнениями там не помещалось ничего. */
.ck-body { display: grid; grid-template-columns: 33fr 67fr; gap: 20px; align-items: start; margin-top: 4px; }
@media (max-width: 820px) { .ck-body { grid-template-columns: 1fr; } }

.ck-side {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); padding: 12px 12px 14px;
  position: sticky; top: calc(var(--topbar-h, 64px) + 12px);
  /* Панель прокручивается сама. Прежде раскрытый список уточнений уходил
     за нижний край, и колесо мыши листало не его, а перечень заболеваний
     справа: часть вопросов была недостижима. */
  max-height: calc(100vh - var(--topbar-h, 64px) - 28px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* max-height и overscroll снимаются по той же причине, что у .sy-groups:
   скроллбокс в потоке с contain блокирует прокрутку страницы пальцем. */
@media (max-width: 820px) { .ck-side { position: static; max-height: none;
  overflow-y: visible; overscroll-behavior: auto; } }
.ck-side-t {
  margin-bottom: 9px; font-size: 12px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}

.ck-picked { display: flex; flex-direction: column; gap: 5px; }
.ck-pick {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 6px 5px 8px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid var(--line-2); background: var(--field);
}
.ck-pick.yes { border-color: var(--accent-line); background: var(--accent-soft); }
.ck-pick b { flex: 1 1 auto; font-weight: 400; line-height: 1.35; }
.ck-mark {
  flex: 0 0 auto; width: 15px; text-align: center;
  font-style: normal; font-weight: 600; font-size: 13px; color: var(--dim);
}
.ck-pick.yes .ck-mark { color: var(--accent); }
.ck-x {
  border: 0; background: none; color: var(--dim); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 5px;
}
.ck-x:hover { color: var(--ink); }

/* ── шапка случая: две даты ──
   Всё, что меряется календарём, врач уже знает; спрашивать после этого
   «держится ли шесть месяцев» значит заставлять считать в уме. Полоса стоит
   над списком гипотез, а не в боковой панели: она относится ко всему случаю,
   а не к отдельному симптому. */
.ck-case {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.ck-case-f { display: flex; flex-direction: column; gap: 4px; }
.ck-case-f label { color: var(--dim); font-size: 11.5px; letter-spacing: .02em; }
.ck-case-f input {
  padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 13px;
}
.ck-case-f input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ck-case-n {
  flex: 1 1 260px; min-width: 220px; margin: 0;
  color: var(--dim); font-size: 11.5px; line-height: 1.5;
}
.ck-case-n.on { color: var(--muted); }

/* «О случае»: вопрос, разводящий уже поднявшиеся гипотезы. Стоит первым
   в панели отмеченного — это единственный вопрос, который сейчас что-то решает. */
.ck-case-q {
  margin: 0 0 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--panel-2);
}
.ck-case-q-t {
  color: var(--ink-2); font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2px;
}

/* Вычисленный по датам ответ помечен пунктиром: он не спрошен, а выведен,
   и разница должна быть видна, а не подразумеваться. */
.ck-qb.calc { border-style: dashed; }
.ck-qb.on-yes.calc, .ck-qb.on-no.calc { border-style: dashed; opacity: .82; }

.ck-caveat {
  margin: 12px 0 16px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font-size: 12.5px; line-height: 1.55;
}
.ck-empty { color: var(--dim); font-size: 13px; padding: 10px 2px; line-height: 1.6; }

/* ── рубрики карточками ──
   На широком экране в ряд встаёт столько карточек, сколько помещается
   при ширине не меньше 320 px; на планшете и телефоне — одна.
   Раскрытая карточка занимает всю строку: текста в ней много,
   и читать его в половинной колонке нечем. */
/* Карточки в один столбец на всю ширину. Две в ряд читались хуже: строка
   выходила короткой, а текст рубрики длинный, и глаз всё время возвращался. */
.ck-out { display: flex; flex-direction: column; gap: 14px; }
.ck-rub {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); padding: 14px 16px;
  display: flex; flex-direction: column;
}
.ck-rub.open { padding-bottom: 4px; }

/* Свёрнутая сводка: ровно три строки, дальше многоточие. */
.ck-sum {
  margin: 8px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ck-rub.open .ck-sum { -webkit-line-clamp: unset; overflow: visible; }

.ck-against-mini {
  margin: 8px 0 0; padding: 6px 9px; border-radius: 8px;
  border: 1px solid var(--warn-line); background: var(--warn-soft);
  color: var(--warn); font-size: 12px; line-height: 1.45;
}

.ck-more {
  align-self: flex-start; margin-top: 10px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line-2); background: var(--field);
  color: var(--ink-2); cursor: pointer;
}
.ck-more:hover { border-color: var(--accent-line); color: var(--accent); }
.ck-full { margin-top: 2px; }
.ck-rub-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ck-rub-h b { font-size: 14.5px; font-weight: 600; }
.ck-score { color: var(--accent); font-size: 12.5px; }
.ck-honest { margin: 6px 0 0; color: var(--dim); font-size: 12px; line-height: 1.55; }

.ck-block { margin: 14px 0; }
.ck-block h4 {
  margin: 0 0 7px; font-size: 12px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ck-crits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ck-crit { display: flex; flex-direction: column; gap: 2px; }
.ck-crit b { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.ck-crit-t { color: var(--dim); font-size: 12px; line-height: 1.5; }
.ck-src { font-style: normal; color: var(--dim); opacity: .8; white-space: nowrap; }

.ck-against {
  margin: 12px 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--warn-line); background: var(--warn-soft);
}
.ck-against h4 { margin: 0 0 7px; font-size: 12px; font-weight: 500; color: var(--warn);
  text-transform: uppercase; letter-spacing: .04em; }

.ck-rule {
  margin: 12px 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); font-size: 12.5px; line-height: 1.55;
}
.ck-rule b { color: var(--ink-2); font-weight: 500; }

.ck-excl { border-top: 1px solid var(--line); padding-top: 12px; }

/* ─────────────── Короткая ссылка на источник ───────────────
   Подпись «[Шамрей, 2019, с. 77]» вместо строки в две строки; полная
   всплывает при наведении и при фокусе с клавиатуры. Рядом лежит полная,
   скрытая на экране и раскрываемая печатью: навести курсор на бумагу нельзя. */

.sy-ref {
  display: inline; padding: 0; margin: 0;
  border: 0; background: none; white-space: nowrap;
  color: var(--ref); font: inherit; font-size: 12px; line-height: inherit;
  cursor: help;
}
.sy-ref:hover, .sy-ref:focus-visible { text-decoration: underline; }
.sy-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.sy-ref-full { display: none; }

/* Учётный номер документа (KLR/CLG/REF) в списке литературы — ссылка
   на карточку раздела «Клинические рекомендации и руководства». */
.sy-lit-num {
  display: inline; padding: 0; margin: 0 0 0 8px;
  border: 0; background: none; white-space: nowrap;
  color: var(--ref); font: inherit; font-size: 12px; line-height: inherit;
  cursor: pointer;
}
.sy-lit-num:hover, .sy-lit-num:focus-visible { text-decoration: underline; }
.sy-lit-num:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.sy-pop {
  position: fixed; z-index: 80; max-width: min(460px, calc(100vw - 16px));
  padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--panel);
  box-shadow: var(--shadow);
  color: var(--ink-2); font-size: 12.5px; line-height: 1.5;
}

@media print {
  .sy-ref { display: none; }
  .sy-ref-full { display: inline; }
}

/* Список литературы — затекстовый список по ГОСТ Р 7.0.5–2008: к его номерам
   отсылают ссылки в тексте. Без него номер ничего не значит. */
.sy-lit-list {
  margin: 0; padding-left: 22px;
  color: var(--ink-2); font-size: 12.5px; line-height: 1.55;
}
.sy-lit-list li { margin-bottom: 6px; }
.sy-lit-list li::marker { color: var(--ref); }

/* Оговорка о характере сведений в шапке справочных разделов.
   Курсив и приглушённый цвет: видно сразу, но интерфейс не забивает.
   Контраст проверен расчётом в обеих темах. */
.t3 {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
  max-width: 72ch;
}
@media (max-width: 720px) { .t3 { font-size: 11px; } }

/* ── «Дополнительно»: расхождения источников пунктами ──
   Прежде это был сплошной абзац в полторы тысячи знаков в хвосте блока
   определений. Список читается выборочно, абзац — только целиком. */
.sy-extra-lead {
  margin: 0 0 8px; color: var(--ink-2); font-size: 13px; line-height: 1.6;
}
.sy-extra-list {
  margin: 0; padding-left: 20px;
  color: var(--ink-2); font-size: 13px; line-height: 1.6;
}
.sy-extra-list li { margin-bottom: 8px; }
.sy-extra-list li::marker { color: var(--accent); }

/* ── «В жалобах» в две колонки ──
   Жалобы короткие, а список длинный: на широком экране он вдвое ниже.
   break-inside не даёт разорвать группу «область» между колонками —
   разорванная посередине группа читается как две разные. */
.sy-cmp-cols { column-gap: 26px; }
@media (min-width: 900px) { .sy-cmp-cols { column-count: 2; } }
.sy-cmp-cols .sy-area {
  break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%;
}
@media print { .sy-cmp-cols { column-count: 2; } }

/* ── дифференциальная диагностика ──
   Пара состояний — заголовком, под ней вопрос и довод. Прежде здесь стоял
   голый перечень пар, по которому нельзя было понять ни разницы, ни что
   спросить, чтобы её увидеть. */
.sy-diff-list { list-style: none; margin: 0; padding: 0; }
.sy-diff-list li {
  padding: 10px 0; border-top: 1px solid var(--line);
}
.sy-diff-list li:first-child { border-top: 0; padding-top: 2px; }
.sy-diff-h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: 13px; line-height: 1.45;
}
.sy-diff-h b { font-weight: 500; color: var(--ink); }
.sy-diff-vs { color: var(--accent); font-weight: 600; }
.sy-diff-ask, .sy-diff-why {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.55;
}
.sy-diff-ask { color: var(--ink-2); }
.sy-diff-why { color: var(--dim); }

.sy-diff-sub {
  margin: 12px 0 6px; font-size: 12px; font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.sy-diff-sub:first-of-type { margin-top: 2px; }
.sy-diff-not {
  margin: 0; padding-left: 20px;
  color: var(--ink-2); font-size: 12.5px; line-height: 1.55;
}
.sy-diff-not li { margin-bottom: 6px; }
.sy-diff-not li::marker { color: var(--dim); }

/* ── таблица источников ──
   Три столбца: что сказано, где сказано, ссылка. Широкая таблица прокручивается
   внутри своей обёртки — страница по горизонтали не едет. */
.sy-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sy-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.5; }
.sy-tbl th {
  text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-2);
  color: var(--muted); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.sy-tbl td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sy-tbl tr:last-child td { border-bottom: 0; }
.sy-tbl-group td {
  padding-top: 12px; color: var(--accent); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 0;
}
.sy-tbl-q { color: var(--ink-2); min-width: 260px; }
.sy-tbl-s { color: var(--ink); white-space: normal; min-width: 150px; }
.sy-tbl-s b { display: block; font-weight: 500; }
.sy-tbl-part { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; }
.sy-tbl-r { white-space: nowrap; }

/* Три состояния признака в шапке карточки рубрики. Цветом разведены только
   подтверждённое и опровергнутое — то, что меняет вес гипотезы; «не спрошено»
   нейтрально, потому что ни о чём не говорит. */
.ck-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12.5px; }
.ck-c-yes { color: var(--accent); }
.ck-c-no { color: var(--warn); }
.ck-c-ask { color: var(--dim); }
.ck-c-all { color: var(--dim); opacity: .85; }

/* Симптомы рубрики одной строкой: перечисление, а не список — так оно
   занимает три строки вместо тридцати и читается на одном дыхании. */
.ck-syms { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.ck-syms b { font-weight: 500; }
.ck-syms.yes b { color: var(--accent); }
.ck-syms.no b { color: var(--warn); }
.ck-syms.ask b { color: var(--muted); }
/* Список литературы раздела — последним блоком, отделён от карточек. */
.ck-lit { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 16px; }

/* ─────────────── Протокол: компактная шапка и панель действий ───────────────
   Шапка приёма заполняется каждый раз одинаково и экран занимать не должна:
   восемь полей встают в две строки, а не в столбец. */
.head-compact .grid, .head-compact { }
.head-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 8px; }
.head-row .field { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.head-row .field label { color: var(--muted); font-size: 11.5px; }
.head-row .field input, .head-row .field select {
  padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--field); color: var(--ink); font: inherit; font-size: 13px;
}
.head-row .w-xs input, .head-row .w-xs select { width: 82px; }
.head-row .w-sm input, .head-row .w-sm select { width: 140px; }
.head-row .w-md input, .head-row .w-md select { width: 250px; }
.head-row .w-grow { flex: 1 1 220px; }
.head-row .w-grow input { width: 100%; }
.field-suffix { color: var(--dim); font-size: 11.5px; }

/* Поле, которого врач не касался, показывается приглушённо: «40 лет» и «М»
   по умолчанию не должны читаться как записанный факт. Метка снимается
   при первом вводе. */
.head-row .field.по-умолчанию input,
.head-row .field.по-умолчанию select { color: var(--dim); border-style: dashed; }

/* Форма слева, действия справа. */
.pr-body { display: grid; grid-template-columns: 1fr 232px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .pr-body { grid-template-columns: 1fr; } }
.pr-main { min-width: 0; }
.pr-side {
  position: sticky; top: calc(var(--topbar-h, 64px) + 12px);
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); padding: 12px;
}
@media (max-width: 980px) { .pr-side { position: static; } }
.pr-side-t {
  margin-top: 4px; color: var(--muted); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.pr-side-t:first-child { margin-top: 0; }
.pr-side button { width: 100%; }
.side-btn {
  padding: 7px 10px; border-radius: 9px; text-align: left;
  border: 1px solid var(--line-2); background: var(--field);
  color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer;
}
.side-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.side-btn.danger:hover { border-color: var(--warn-line); color: var(--warn); }
.pr-side-note { margin: 6px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.4; }

/* Подпись раздела «Протокол» — напоминание об обезличивании. */
.t3.pd { color: var(--warn); font-style: normal; }
.t3.pd .link { font-size: 11.5px; }
.field-inline { display: flex; align-items: center; gap: 5px; }

/* ─────────────── Заболевания ───────────────
   Список сгруппирован по блокам МКБ-10: клиническая классификация и есть
   порядок раздела. Код печатается приглушённо и после названия — он шифр,
   а не имя болезни. */
.db-group {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}
.db-group:first-child { margin-top: 4px; }
.db-group b { color: var(--accent); font-size: 12px; letter-spacing: .04em; }
.db-group span { color: var(--muted); font-size: 12px; }
.db-row { align-items: baseline; }
.db-code { color: var(--dim); font-size: 12.5px; white-space: nowrap; }
.db-code-h { color: var(--muted); font-weight: 400; }
.db-empty {
  margin-left: auto; color: var(--dim); font-size: 11.5px; white-space: nowrap;
}
.db-blank {
  margin: 0; color: var(--dim); font-size: 13px; line-height: 1.5;
  border-left: 2px dashed var(--line-2); padding-left: 10px;
}
.db-from {
  margin: 6px 0 2px; color: var(--dim); font-size: 12px; line-height: 1.45;
}
.db-layer { margin: 4px 0 0; color: var(--warn); font-size: 11.5px; line-height: 1.4; }
/* Признаки — таблицами по роли: слева симптом по классификатору проекта,
   справа то, что о нём сказано в источнике. Сворачивания здесь нет: перечень
   признаков — то, ради чего карточку открывают. */
.db-tbl { margin: 4px 0 14px; }
.db-tbl .sy-tbl-q { width: 34%; min-width: 200px; }
.db-tbl .sy-tbl-q b { display: block; color: var(--ink); font-weight: 600; }
.db-tbl .sy-tbl-q .sy-badge { margin-right: 5px; }
.db-tbl .sy-tbl-s { width: 66%; }
.db-tbl td { padding: 9px 12px 9px 0; }
.db-why { margin: 0 0 5px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.db-why:last-child { margin-bottom: 0; }
.db-against {
  display: inline-block; margin-top: 4px;
  color: var(--warn); font-size: 11px; border: 1px solid var(--warn-line);
  border-radius: 999px; padding: 0 7px;
}
.db-norec { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; }
.db-tbl .sy-diff-est { display: block; margin-top: 4px; }

/* Развёрнутая дифференциальная диагностика: стороны пары идут столбиком,
   у каждой особенность симптома и основание с цитатой. */
.sy-diff-side { margin: 7px 0 0; padding-left: 11px; border-left: 2px solid var(--line-2); }
.sy-diff-state { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.sy-diff-mark { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.sy-diff-est { margin: 3px 0 0; color: var(--warn); font-size: 11.5px; line-height: 1.45; }
.sy-diff-pnote {
  margin: 8px 0 0; padding-left: 11px; color: var(--muted);
  font-size: 12.5px; line-height: 1.5; border-left: 2px dashed var(--line-2);
}
/* ─────────────── Психотерапия ───────────────
   Переключатель видов — чипами над списком: пять видов плюс «не психотерапия»,
   у каждого число записей. Сам список и карточка — классами «Заболеваний». */
.pt-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pt-kind {
  display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  padding: 4px 11px; border-radius: 999px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--line-2); background: transparent; color: var(--muted);
}
.pt-kind:hover { border-color: var(--ink-2); color: var(--ink-2); }
.pt-kind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pt-kind.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.pt-kind-n { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.pt-row .sy-what { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.pt-count {
  flex: none; margin-left: auto; color: var(--muted); font-size: 11.5px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Раздел «Методы психотерапии» в карточке заболевания: у метода бывает несколько
   цитат из разных КР — каждая своим куском со строкой источника под ней. */
.db-psy-item + .db-psy-item { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.db-psy-src { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.db-psy-against { color: var(--warn); }
/* ── единая таблица показаний (карточка метода и карточка заболевания) ──
   Четыре столбца: первый · статус · цитата · рекомендация. Первый столбец
   объединён на всю группу; новая группа отделена линией потемнее. */
.db-tbl.pt-tbl td.pt-c1, .db-tbl.pt-tbl th:nth-child(1) { width: 21%; min-width: 150px; }
.db-tbl.pt-tbl td.pt-st-cell, .db-tbl.pt-tbl th:nth-child(2) { width: 12%; min-width: 108px; }
.db-tbl.pt-tbl .sy-tbl-s, .db-tbl.pt-tbl th:nth-child(3) { width: 45%; }
.db-tbl.pt-tbl td.pt-src, .db-tbl.pt-tbl th:nth-child(4) { width: 22%; min-width: 150px; }
.db-tbl.pt-tbl td { vertical-align: top; }
.db-tbl.pt-tbl td.pt-c1 { padding-right: 14px; }
.db-tbl.pt-tbl tr.pt-grp-start > td { border-top: 1px solid var(--line-2); }
.pt-st {
  display: inline-block; white-space: nowrap; border-radius: 999px; padding: 1px 8px;
  font-size: 11px; line-height: 1.5; border: 1px solid var(--line-2); color: var(--dim);
}
.pt-st.for { color: var(--accent); border-color: var(--accent-line); }
.pt-st.against { color: var(--warn); border-color: var(--warn-line); font-weight: 600; }
.pt-st-cell .pt-grade { margin-top: 5px; flex-wrap: wrap; }
.pt-src-name { display: flex; align-items: baseline; gap: 5px; }
/* Знак российской клинической рекомендации — флаг вместо прежнего «!».
   Смысл тот же: документ одобрен Научно-практическим советом Минздрава России
   и на него можно сослаться в медицинской карте. Флаг рисуется тремя полосами
   в CSS, а не картинкой: одна разметка на все места, где знак стоит, и ничего
   не нужно подгружать. Рамка обязательна — без неё белая полоса пропадает
   на светлой теме. */
.pt-kr {
  flex: none; display: inline-block; box-sizing: border-box;
  width: 18px; height: 12px; border-radius: 2px; overflow: hidden;
  border: 1px solid var(--line-2); transform: translateY(2px);
  background: linear-gradient(to bottom,
    #ffffff 0, #ffffff 33.33%,
    #0039a6 33.33%, #0039a6 66.66%,
    #d52b1e 66.66%, #d52b1e 100%);
  font-size: 0; line-height: 0;
}
.pt-sum { margin: 2px 0 4px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.pt-sum-for { color: var(--accent); }
.pt-sum-against { color: var(--warn); font-weight: 600; }
.pt-sum-against.none { color: var(--muted); font-weight: 400; }
.pt-sum .none { color: var(--dim); }
.pt-legend { display: flex; align-items: baseline; gap: 4px; margin: 0 0 8px; color: var(--dim); font-size: 11.5px; line-height: 1.45; }

.pt-against {
  flex: none; font-size: 11px; white-space: nowrap; border-radius: 999px; padding: 0 7px;
  border: 1px solid var(--warn-line); color: var(--warn);
}
.pt-block-against > .sy-block-t { color: var(--warn); }
.pt-block-against .sy-tbl { border-left: 2px solid var(--warn); }
.pt-parent { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pt-est { margin-top: 8px; }
.pt-aka { margin: 6px 0 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.pt-dz-row { line-height: 1.45; }
.pt-dz-row + .pt-dz-row { margin-top: 3px; }
.pt-dz { font-weight: 600; text-align: left; }
.pt-named { margin: 0 0 3px; color: var(--dim); font-size: 11.5px; }
/* Столбец рекомендации: название КР видно словами, раздел и страница под ним. */
.db-tbl td.pt-src { width: 24%; min-width: 150px; vertical-align: top; }
.db-tbl .sy-tbl-q { width: 26%; }
.db-tbl .sy-tbl-s { width: 50%; }
.pt-src b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.pt-src-part { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; line-height: 1.4; }
.pt-src-page { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.pt-grade { display: flex; gap: 6px; margin: 2px 0 0; }
.pt-grade span {
  font-size: 11px; color: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums;
}

/* ─────────────── Заболевания: оглавление слева ───────────────
   Липкая панель по образцу «Отмечено» в «Симптом-чеке»: стоит под шапкой
   (высота замеряется), прокручивается сама, если разделов больше экрана.
   На узком экране встаёт над карточкой и не липнет — иначе заслоняла бы текст. */
.db-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 22px; align-items: start; }
.db-body { min-width: 0; }
.db-toc {
  position: sticky; top: calc(var(--topbar-h, 64px) + 12px);
  max-height: calc(100vh - var(--topbar-h, 64px) - 28px);
  overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 10px 6px 8px;
}
.db-toc-t {
  margin: 0 8px 6px; color: var(--muted); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.db-toc button {
  display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 0;
  margin: 0; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: 12.5px; line-height: 1.35; text-align: left; cursor: pointer;
}
.db-toc button:hover { background: var(--panel-2); color: var(--ink); }
.db-toc button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.db-toc button.sub { padding-left: 20px; color: var(--muted); font-size: 12px; }
.db-toc button.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.db-toc button.sub.on { color: var(--ink); }
.db-toc .t { min-width: 0; }
.db-toc button.against .n { color: var(--warn); font-weight: 600; }
.db-toc .n { margin-left: auto; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Подсветка записи, к которой привела ссылка «[N, с. X]»: без неё читатель
   попадает в список и не понимает, какая из десяти строк — та самая. Гаснет
   сама через пару секунд, чтобы не остаться навсегда. */
.sy-lit-hit {
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--panel-2);
  background: var(--panel-2);
  transition: background .3s ease, box-shadow .3s ease;
}
@media (prefers-reduced-motion: reduce) { .sy-lit-hit { transition: none; } }

/* ПОКАЗАНИЯ СПИСКОМ (карточка метода, с 19.09.2026): одна запись на заболевание.
   Заголовок — болезнь с кодом, под ним общий статус с уровнями, дальше связный
   текст указаний. Дословная цитата — КУРСИВОМ: это общее правило оформления,
   курсив отделяет текст источника от нашего. */
.pt-items { display: flex; flex-direction: column; gap: 18px; margin: 6px 0 14px; }
.pt-item { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pt-items .pt-item:last-child { border-bottom: 0; padding-bottom: 0; }
.pt-item-t { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.pt-item-t .db-code { color: var(--muted); font-weight: 500; font-size: 13px; }
.pt-item-t .pt-dz { font-size: 15px; font-weight: 600; }
.pt-item-st { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 9px; }
.pt-item-grade { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pt-item-also { color: var(--dim); font-size: 12.5px; }
.pt-item-say { margin: 0 0 7px; line-height: 1.6; font-size: 13.5px; color: var(--ink-2); }
.pt-item-say-st { font-weight: 600; }
.pt-item-say-st.for { color: var(--ok, var(--accent)); }
.pt-item-say-st.against { color: var(--warn); }
.pt-item-say-st.mention { color: var(--muted); }
.pt-quote { color: var(--ink); font-style: italic; }
.pt-named-inline { color: var(--muted); font-size: 12.5px; }
.pt-item-note { color: var(--muted); font-size: 12.5px; }
.pt-item-src { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 8px;
               color: var(--muted); font-size: 12.5px; }
.pt-item-src b { color: var(--ink-2); font-weight: 600; }

/* ТАБЛИЦА КЛЮЧЕВЫХ РУКОВОДСТВ и таблица эффективности (карточка метода,
   с 19.09.2026). Обе — обычные таблицы карточки (.db-tbl), но со своими
   ширинами: у показаний четыре столбца другого назначения, и наследовать
   их раскладку нельзя. Степень подробности — чип, а не просто слово:
   врач читает столбец по цвету, а не вчитываясь. */
.pt-guides th, .pt-eff th {
  padding: 6px 12px 6px 0; text-align: left; vertical-align: bottom;
  color: var(--muted); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--line);
}
.pt-guides td, .pt-eff td { padding: 9px 12px 9px 0; vertical-align: top; font-size: 13px; line-height: 1.5; }
.pt-guides th:nth-child(1), .pt-guides td:nth-child(1) { width: 22%; min-width: 160px; }
.pt-guides th:nth-child(2), .pt-guides td:nth-child(2) { width: 58%; }
.pt-guides th:nth-child(3), .pt-guides td:nth-child(3) { width: 20%; min-width: 132px; }
.pt-guide-name b { display: inline; margin-right: 2px; }
.pt-guide-what { margin: 0; line-height: 1.55; }
.pt-guide-pages { margin: 5px 0 0; color: var(--dim); font-size: 12px; }
/* Оговорки — строка во всю ширину под своим руководством, свёрнутая. */
.pt-guides tr.pt-guide-caut > td { padding-top: 2px; border-top: 0; }
.pt-guides tr.pt-guide-caut summary { color: var(--todo); font-weight: 500; }
.pt-c-year { font-variant-numeric: tabular-nums; color: var(--muted); }
.pt-rep {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.pt-rep-full { border-color: var(--ok-line, var(--line-2)); color: var(--accent); }
.pt-rep-idea { color: var(--muted); }
.pt-rep-note { margin-top: 4px; color: var(--muted); font-size: 12px; }
.pt-rep-where { margin-top: 4px; color: var(--dim); font-size: 12px; line-height: 1.45; }
.pt-eff th:nth-child(1), .pt-eff td:nth-child(1) { width: 26%; }
.pt-eff th:nth-child(2), .pt-eff td:nth-child(2) { width: 26%; }
.pt-eff th:nth-child(3), .pt-eff td:nth-child(3) { width: 8%; min-width: 54px; }
.pt-eff th:nth-child(4), .pt-eff td:nth-child(4) { width: 40%; }
.pt-eff-empty { color: var(--muted); font-style: italic; }

/* ВНИМАНИЕ к селекторам: каждый несёт «.db-toc». Правило «.db-toc button»
   выше имеет специфичность (0,1,1), и одиночный класс «.tc-tw» ему проигрывает —
   кружок получал ширину во всю колонку и прямоугольные углы, а стили при этом
   выглядели написанными и применёнными. Найдено замером computed styles. */
/* ОГЛАВЛЕНИЕ КАРТОЧКИ ДЕРЕВОМ (карточка метода, с 19.09.2026) — тот же строй
   и тот же вид, что у рельса классов раздела: круглая кнопка раскрывает ярус,
   подпункты идут вдоль тонкой направляющей, текущий отмечен отрезком акцента
   на ней. Раскрыт ярус того раздела, в котором сейчас текст, — остальные
   свёрнуты, иначе оглавление длиннее экрана и липкость теряет смысл. */
.db-toc.tc-tree { padding: 10px 6px 10px; }
.db-toc .tc-sec { display: flex; flex-direction: column; }
.db-toc .tc-sec + .tc-sec { margin-top: 2px; }
.db-toc .tc-h { display: flex; align-items: center; gap: 6px; }
.db-toc .tc-tw {
  flex: 0 0 auto; width: 16px; height: 16px; padding: 0; margin-left: 2px;
  border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .16s ease, color .16s ease, border-color .16s ease;
}
.db-toc .tc-tw::after {
  content: ''; width: 4px; height: 4px; margin-left: -1px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg);
}
.db-toc .tc-sec.open .tc-tw { transform: rotate(90deg); }
.db-toc .tc-tw:hover { color: var(--ink); border-color: var(--muted); }
.db-toc .tc-sec.open .tc-tw { color: var(--accent); border-color: var(--accent); }
/* Раздел без подпунктов: кружка нет, но место под него сохранено —
   иначе названия разъезжаются по левому краю. */
.db-toc .tc-plain .tc-tw { visibility: hidden; }
.db-toc .tc-b { flex: 1 1 auto; min-width: 0; }
.db-toc .tc-k { padding-left: 8px; font-size: 12px; color: var(--muted); position: relative; }
.db-toc .tc-kids {
  display: none; flex-direction: column; gap: 1px;
  margin: 2px 0 2px 11px; padding-left: 9px; border-left: 1px solid var(--line);
}
.db-toc .tc-sec.open .tc-kids { display: flex; }
.db-toc .tc-k.on {
  background: none; box-shadow: none; color: var(--accent); font-weight: 500;
}
.db-toc .tc-k.on::before {
  content: ''; position: absolute; left: -10px; top: 4px; bottom: 4px;
  width: 2px; border-radius: 1px; background: var(--accent);
}
.db-toc .tc-b.on { background: var(--panel-2); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
@media (prefers-reduced-motion: reduce) { .db-toc .tc-tw { transition: none; } }
/* При печати оглавление и так не выводится (no-print), но если его когда-нибудь
   начнут печатать — свёрнутые ярусы обязаны раскрыться, как у описаний методик. */
@media print { .db-toc .tc-kids { display: flex !important; } }

@media (max-width: 980px) {
  .db-layout { grid-template-columns: 1fr; }
  /* overflow и overscroll — как у .sy-groups: иначе палец на оглавлении
     не прокручивал страницу. */
  .db-toc { position: static; max-height: none; overflow-y: visible;
            overscroll-behavior: auto; }
}

/* ─────────────── Заболевания: полоса из двух ячеек ───────────────
   Слева — российская клиническая рекомендация, справа — зарубежная. Обе могут быть
   пустыми, и пустая ячейка — такой же ответ, как заполненная: карточка без
   рекомендации иначе выглядела бы так же, как карточка с нею. */
.db-tier {
  font-size: 11px; border-radius: 999px; padding: 0 7px; white-space: nowrap;
  border: 1px solid var(--warn-line); color: var(--warn);
}
.db-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 4px;
}
@media (max-width: 720px) { .db-strip { grid-template-columns: 1fr; } }
.db-cell {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); padding: 10px 12px;
}
.db-cell.empty { border-style: dashed; background: transparent; }
.db-cell-t {
  color: var(--muted); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
}
.db-cell-v { margin-top: 4px; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.db-cell-v.none { color: var(--warn); font-weight: 500; }
.db-cell-w { margin-top: 5px; color: var(--dim); font-size: 11.5px; line-height: 1.45; }

/* «Особенности» — список того, что предстоит разобрать: расхождения источников,
   их дефекты, оговорки кодирования. Раздел растёт и читается по пунктам. */
.db-feats { margin: 6px 0 0; padding-left: 0; list-style: none; }
.db-feats > li {
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 2px solid var(--warn-line);
  border-radius: 10px; background: var(--panel);
}
.db-feats > li.done { border-left-color: var(--accent-line); opacity: .75; }
.db-feat-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.db-feat-h b { color: var(--ink); font-size: 13px; }
.db-feat-kind {
  color: var(--muted); font-size: 11px; border: 1px solid var(--line-2);
  border-radius: 999px; padding: 0 7px; white-space: nowrap;
}
.db-feat-subj { margin: 6px 0 4px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.db-feat-diff { margin: 6px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; font-weight: 500; }
.db-feat-note {
  margin: 6px 0 0; padding-left: 10px; color: var(--warn);
  font-size: 12.5px; line-height: 1.5; border-left: 2px solid var(--warn-line);
}
/* Решение по разобранному пункту: черта в цвет разобранного, а не предупреждения —
   пункт закрыт, и выглядеть тревогой ему незачем. */
.db-feat-res {
  margin: 6px 0 2px; padding-left: 10px; color: var(--ink-2);
  font-size: 12.5px; line-height: 1.5; border-left: 2px solid var(--accent-line);
}
.db-feat-res b { color: var(--ink); font-weight: 600; }

/* ─────────────── Симптом-чек: уточнения ───────────────
   Вопрос об эпизоде отвечается так же, как отмечается симптом: «+» или «−»,
   и третьим состоянием остаётся «не спрошено». Блок «Об эпизоде» стоит над
   карточками, потому что его вопросы относятся ко всему случаю; уточнения
   к отдельному симптому идут подсписком под самим симптомом слева. */
.ck-qual {
  border: 1px solid var(--line); border-left: 2px solid var(--accent-line);
  border-radius: 12px; background: var(--panel);
  padding: 14px 16px 8px; margin: 0 0 16px;
}
.ck-q-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ck-q-head b { color: var(--ink); font-size: 14px; }
.ck-q-cnt { color: var(--dim); font-size: 11.5px; }
.ck-q-lead { margin: 5px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ck-q {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px dashed var(--line);
}
.ck-q-t { flex: 1; min-width: 0; }
.ck-q-t b { display: block; color: var(--ink-2); font-size: 13px; font-weight: 500; line-height: 1.4; }
.ck-q.answered .ck-q-t b { color: var(--ink); }
.ck-q-why { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; line-height: 1.4; }
.ck-qbtns { display: flex; gap: 5px; flex: none; }
.ck-qb {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1.5px solid var(--line-2); background: transparent;
  color: var(--dim); font: inherit; font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ck-qb:hover { border-color: var(--ink-2); color: var(--ink-2); }
/* Выбранный ответ виден издалека: залитый кружок в цвет ответа. */
.ck-qb.on-yes {
  color: var(--on-accent); border-color: var(--accent); background: var(--accent); font-weight: 600;
}
.ck-qb.on-no {
  color: var(--bg); border-color: var(--warn); background: var(--warn); font-weight: 600;
}
.ck-q.mini .ck-qb { width: 24px; height: 24px; font-size: 13px; }

/* Подсписок под симптомом в левой панели. */
.ck-pick-q { margin: -2px 0 8px 12px; padding-left: 10px; border-left: 1px dashed var(--line-2); }
.ck-q.mini { padding: 6px 0; border-top: 0; gap: 8px; }
.ck-q.mini .ck-q-t b { font-size: 12.5px; }

/* ─────────────── Карточка симптома: раздел «Заболевания» ───────────────
   Строка на заболевание: слева название с кодом и ролью признака, посередине
   дословная цитата источника, справа уточняющие критерии — то, чем один и тот же
   симптом при разных болезнях различается. Где их нет, так и написано. */
.sy-dz-tbl { margin: 6px 0 4px; }
.sy-dz-tbl .sy-tbl-q { width: 27%; min-width: 190px; }
.sy-dz-tbl .sy-tbl-s { width: 43%; }
.sy-dz-tbl .sy-dz-q { width: 30%; min-width: 200px; padding: 9px 0 9px 0; vertical-align: top; }
.sy-dz-tbl .sy-tbl-q b { display: block; color: var(--ink); font-weight: 600; }
.sy-dz-code {
  display: inline-block; margin-top: 3px; margin-right: 6px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.sy-dz-role {
  display: inline-block; font-size: 11px; color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px;
}
.sy-dz-role.core { color: var(--accent); border-color: var(--accent-line); }
.sy-dz-qlist { margin: 0; padding-left: 0; list-style: none; }
.sy-dz-qlist li {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px; color: var(--ink-2); font-size: 12.5px; line-height: 1.45;
}
.sy-dz-qlist li:last-child { margin-bottom: 0; }
.sy-dz-ans {
  flex: none; width: 15px; text-align: center; border-radius: 3px;
  font-style: normal; font-size: 12px;
}
.sy-dz-ans.yes { color: var(--accent); background: var(--accent-soft); }
.sy-dz-ans.no { color: var(--warn); background: var(--warn-soft); }
.sy-dz-hard {
  font-size: 10.5px; color: var(--warn); border: 1px solid var(--warn-line);
  border-radius: 999px; padding: 0 6px; white-space: nowrap;
}
.sy-dz-none { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.45; font-style: italic; }
/* Порог, уступивший по рангу источника: виден, но не считается. */
.db-superseded {
  display: inline-block; margin-top: 3px;
  font-size: 10.5px; color: var(--dim);
  border: 1px dashed var(--line-2); border-radius: 999px; padding: 0 7px;
  white-space: nowrap;
}

/* Отмеченный симптом с уточняющими критериями: нажатие раскрывает список
   прямо под ним. Открыт всегда один — при девяти отмеченных симптомах
   развёрнутые списки заняли бы панель целиком. */
.ck-pick.has-q { cursor: pointer; }
.ck-pick.has-q:hover { border-color: var(--accent-line); }
.ck-pick.open { border-color: var(--accent-line); background: var(--accent-soft); }
.ck-pick-cnt {
  font-size: 10.5px; color: var(--warn); white-space: nowrap;
  border: 1px solid var(--warn-line); border-radius: 999px; padding: 0 6px;
}
.ck-pick-cnt.done { color: var(--accent); border-color: var(--accent-line); }

/* ─────────────── Клинические рекомендации и руководства ───────────────
   Раздел устроен как «Диагностика»: поиск сверху, фасеты слева, список
   справа, карточка на месте списка. Собственных стилей у него немного —
   всё остальное берётся у .facet, .sy-row, .sy-card и .pt-*: вторая копия
   разошлась бы с первой при первой же правке. */

/* Переключатель вида документа — над строкой поиска раздела: «Клинические
   рекомендации» или «Руководства». Вид кнопок берётся у общего `.seg`,
   своя здесь только ширина: `.seg` рассчитан на панель фасетов в 258 px
   и тянет кнопки поровну на всю строку, а во всю ширину списка две кнопки
   выглядели бы двумя плашками. */
.gl-kinds { display: inline-flex; max-width: 100%; margin-bottom: 12px; }
.gl-kinds button {
  flex: 0 1 auto; min-width: 0; padding: 9px 16px; font-size: 13px;
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
.gl-kinds button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-kind-n { flex: 0 0 auto; font-style: normal; font-variant-numeric: tabular-nums; font-size: 12px; opacity: .75; }
@media (max-width: 640px) {
  .gl-kinds { display: flex; }
  .gl-kinds button { padding: 9px 10px; font-size: 12.5px; }
}

.gl-facet + .gl-facet { margin-top: 14px; }
.gl-facet-h {
  margin-bottom: 5px; padding: 0 10px;
  color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
}
/* Списку фасета высота ограничена своя: четыре группы подряд иначе
   не помещаются на экран и ищутся прокруткой всей страницы. */
.gl-facet .facet-list { max-height: 30vh; }

/* Страна в строке списка — короткая метка постоянной ширины, чтобы названия
   документов начинались на одной вертикали и список читался столбцом. */
.gl-tag {
  flex: 0 0 auto; min-width: 104px;
  color: var(--dim); font-size: 11.5px;
}
.gl-row b { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-row .sy-what { flex: 0 1 auto; }

.gl-block h3 { margin: 0 0 8px; font-size: 13.5px; color: var(--ink); }
.gl-h4 { margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.gl-h4-against { color: var(--bad, #c2453d); }

.gl-tbl { width: 100%; border-collapse: collapse; }
.gl-tbl td, .gl-tbl th { padding: 5px 8px; font-size: 13px; line-height: 1.5; vertical-align: top; text-align: left; }
.gl-th { width: 190px; color: var(--muted); font-weight: 500; }
.gl-link { color: var(--accent); }

.gl-methods { margin: 0 0 4px; font-size: 13px; line-height: 1.8; }
.gl-method { font-size: 13px; }
.gl-against { margin-bottom: 10px; padding-left: 10px; border-left: 2px solid var(--bad, #c2453d); }
.gl-against-h { margin: 0 0 2px; font-size: 13px; }
.gl-gost { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

/* Пустой раздел показывается и объясняет, почему он пуст: спрятанный раздел
   делает карточку на вид полной — правило проекта. */
.sy-empty { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; font-style: italic; }
.sy-card-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 18px; color: var(--ink); }
.sy-card-sub { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; }

/* Колонка списка не должна растягиваться под самое длинное название: у грида
   min-width колонки по умолчанию auto, и строка в 2600 px уносила список
   за край экрана вместе с горизонтальной прокруткой. Тот же дефект уже
   ловился у классификатора групп в «Симптомах» — лечится minmax(0, 1fr). */
#tab-gl .dx-body { grid-template-columns: 258px minmax(0, 1fr); }
@media (max-width: 820px) { #tab-gl .dx-body { grid-template-columns: minmax(0, 1fr); } }
#tab-gl .dx-main { min-width: 0; }

/* Пометка «В стадии доработки». Синим — чтобы её было видно, но она не читалась
   как ошибка (красный) и не спорила с акцентом приложения (зелёный). Ставится
   там, где раздел заведён, а данные ещё не внесены; там, где данных нет
   и не будет по свойству источника, пишется факт, а не эта пометка. */
:root { --todo: #2f6fd0; --todo-soft: rgba(47, 111, 208, .10); --todo-line: rgba(47, 111, 208, .35); }
:root[data-theme="dark"] { --todo: #7fb2ff; --todo-soft: rgba(127, 178, 255, .12); --todo-line: rgba(127, 178, 255, .32); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --todo: #7fb2ff; --todo-soft: rgba(127, 178, 255, .12); --todo-line: rgba(127, 178, 255, .32); }
}
.todo { margin: 0; font-size: 12.5px; line-height: 1.6; }
.todo-mark {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  background: var(--todo-soft); border: 1px solid var(--todo-line);
  color: var(--todo); font-weight: 600; font-size: 12px;
}
.todo-what { color: var(--muted); }

/* Строка списка документов — две строки: название переносится (не более двух
   строк), под ним коды МКБ-10, издатель и число методов. В одну строку название
   наркологической рекомендации обрезалось многоточием на середине, а коды —
   то, по чему документ опознают, — уходили за край. */
.gl-row { align-items: flex-start; padding: 11px 14px; gap: 10px; }
.gl-row-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gl-row-b b {
  white-space: normal; font-size: 13px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gl-row-meta { color: var(--muted); font-size: 11.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.gl-tag { padding-top: 1px; }
.gl-year { flex: 0 0 auto; padding-top: 1px; }

/* Методы зарубежной рекомендации — списком. Английское название идёт первым
   (так метод назван в самом документе), русское имя — в скобках, а метод,
   которого ещё нет в перечне проекта, помечен прямо в строке: без пометки
   список выглядит полным, хотя часть названий никуда не ведёт. */
.gl-psy { margin: 2px 0 8px; padding-left: 20px; }
.gl-psy li { margin-bottom: 5px; font-size: 13px; line-height: 1.5; }
.gl-psy-en { color: var(--ink-2); }
.gl-psy-ru { color: var(--muted); }
.gl-psy-nobase { color: var(--todo); font-size: 12px; }
.gl-psy-part { color: var(--dim); font-size: 11.5px; }

/* Показание из зарубежной рекомендации: заболевания у него нет по устройству —
   заболевания проекта размечены по российским документам. */
.pt-foreign { color: var(--muted); font-size: 12px; font-style: italic; }

/* Класс метода и его состав. Класс — независимое от направления отношение,
   поэтому стоит отдельной строкой под видом метода, а не рядом с ним. */
.pt-class { margin: 6px 0 2px; font-size: 13px; }
.pt-class-why { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
/* Унаследованное отнесение читается тише собственного: об этом методе источник
   ничего не говорил, он в классе как ветвь своего направления. */
.pt-class-via { color: var(--muted); font-size: 12.5px; }
.pt-members { margin: 4px 0 8px; padding-left: 18px; }
.pt-members li { margin-bottom: 8px; }
.pt-member-name { font-size: 13.5px; }
.pt-member-kind { color: var(--dim); font-size: 11.5px; }
.pt-member-why { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Раздел «Психотерапия»: рельс классов слева. Пока класс в перечне один,
   колонка узкая — она для ориентации, а не для отбора; когда классов станет
   больше, ширина та же, что у классификатора групп в «Симптомах».
   Нет ни одного класса — колонка не рисуется вовсе (pt-no-classes). */
#ptBody.pt-no-classes { display: block; }

/* РЕЛЬС РАЗДЕЛА «ПСИХОТЕРАПИЯ» — дерево систематики, а не ряд плашек.
   Два яруса: ось и класс; самих методов в рельсе нет (они справа списком).
   Ось раскрывается круглой кнопкой, классы идут под ней вдоль тонкой
   направляющей, а выбранный отмечен отрезком НА этой направляющей —
   заливка во всю ширину при семи строках превращала рельс в набор плиток
   и спорила с выделением строки списка. */
.pt-rail { gap: 1px; padding: 8px 6px 10px; }
.pt-rail-all,
.pt-rail-k {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 6px 8px; text-align: left; border: none; border-radius: 8px;
  background: none; color: var(--ink); font-size: 13px; line-height: 1.35;
}
.pt-rail-all span, .pt-rail-k span { flex: 1 1 auto; min-width: 0; }
.pt-rail-all { font-weight: 500; }
.pt-rail-all:hover, .pt-rail-k:hover { background: var(--panel-2); }
.pt-rail-all.on { color: var(--accent); }
.pt-rail-n {
  flex: 0 0 auto; font-style: normal; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pt-rail-all.on .pt-rail-n, .pt-rail-k.on .pt-rail-n { color: var(--accent); }

.pt-rail-sec { display: flex; flex-direction: column; margin-top: 7px; }
.pt-rail-h {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px 5px 5px; text-align: left; border: none; border-radius: 8px;
  background: none; color: var(--muted);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
}
.pt-rail-h:hover { color: var(--ink); }
.pt-rail-ax { flex: 1 1 auto; min-width: 0; }
.pt-rail-tw {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .16s ease, color .16s ease, border-color .16s ease;
}
/* Галочка рисуется углом рамки: одна разметка, обе темы, и поворот круга
   поворачивает её вместе с собой — вправо у свёрнутой оси, вниз у раскрытой. */
.pt-rail-tw::after {
  content: ''; width: 4px; height: 4px; margin-left: -1px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg);
}
.pt-rail-sec.open .pt-rail-tw { transform: rotate(90deg); }
.pt-rail-h:hover .pt-rail-tw { color: var(--ink); border-color: var(--muted); }
.pt-rail-h.sel .pt-rail-tw { color: var(--accent); border-color: var(--accent); }

.pt-rail-kids {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 0 13px; padding-left: 10px; border-left: 1px solid var(--line);
}
.pt-rail-k { position: relative; }
.pt-rail-k.on { color: var(--accent); font-weight: 500; }
.pt-rail-k.on::before {
  content: ''; position: absolute; left: -11px; top: 5px; bottom: 5px;
  width: 2px; border-radius: 1px; background: var(--accent);
}
@media (prefers-reduced-motion: reduce) { .pt-rail-tw { transition: none; } }
@media (max-width: 820px) {
  /* Рельс встаёт в поток (см. правило .sy-groups выше), но строй остаётся
     деревом: перенос строкой перемешал бы два яруса между собой. */
  .pt-rail { flex-direction: column; flex-wrap: nowrap; }
  .pt-rail-all, .pt-rail-sec { width: 100%; }
}
.sy-groups-t { margin: 0 0 6px; padding: 0 10px; color: var(--dim);
               font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* Карточка заболевания: заголовок закреплён при прокрутке. У длинных карточек
   (F06 — двадцать семь признаков плюс источники) врач, уйдя вниз, переставал
   видеть, о какой болезни речь. Отступ сверху — под замеренную высоту шапки
   приложения (--topbar-h), иначе заголовок уезжает под неё. */
.db-h-sticky {
  position: sticky; top: calc(var(--topbar-h, 64px) + 4px); z-index: 3;
  margin: 0 0 2px; padding: 6px 0 6px;
  background: var(--panel);
  box-shadow: 0 6px 10px -10px rgba(0, 0, 0, .5);
}
@media (max-width: 980px) { .db-h-sticky { position: static; } }

/* Оговорка о характере сведений — под заголовком карточки, а не полосой над
   разделом. Курсив и приглушённый цвет: она не должна спорить с названием. */
.db-caveat {
  margin: 0 0 12px; color: var(--muted); font-size: 12.5px;
  font-style: italic; line-height: 1.5;
}

/* «Пояснения» — последний раздел: как пользоваться и чего здесь нет. */
.db-explain-p { margin: 0 0 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.6; }
.db-explain-p:last-child { margin-bottom: 0; }

/* Описание методики: сворачиваемые блоки (возврат механизма 16.09.2026, узко —
   только описание и особенности по авторам). При печати раскрываются: см. app.js,
   обработчик beforeprint — иначе на бумаге остались бы одни заголовки. */
.pt-fold { margin: 6px 0; border-left: 2px solid var(--line); padding-left: 10px; }
.pt-fold > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 2px 0; }
.pt-fold > summary:hover { text-decoration: underline; }
.pt-fold-body { padding: 4px 0 2px; }
.pt-howto { white-space: pre-line; margin: 4px 0; }
.pt-quote { margin: 6px 0; color: var(--muted); font-style: italic; }
.pt-quote-src { font-style: normal; font-size: 0.9em; }
.pt-desc-head, .pt-desc-ind { margin: 4px 0; }
.pt-desc-gist { margin: 6px 0; }
/* Подзаголовок раздела внутри «Полного описания методики» — из капс-фразы
   в начале абзаца («Дегипнотизация», «Условия сеанса»). */
.pt-howto-h { margin: 10px 0 2px; font-weight: 600; font-size: 13px; color: var(--muted); }
.pt-basis { margin: 10px 0 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.pt-repro { margin: 6px 0; }
.pt-hyg { margin: 4px 0; }
@media print { .pt-fold > summary { list-style: none; } }
.pt-caution { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--warn, #c86); background: var(--bg-soft, rgba(200,136,102,.08)); }
.pt-caution-t { font-weight: 600; margin-bottom: 4px; }
.pt-caution-list { margin: 0; padding-left: 18px; }
.pt-caution-list li { margin: 3px 0; }
.db-hist { border-left: 3px solid var(--warn, #c86); }
.db-hist-why { margin: 4px 0 8px; }
.db-hist-sub { font-size: 0.95em; margin-top: 6px; }
.db-hist-list { margin: 4px 0; padding-left: 18px; }
.db-hist-list li { margin: 6px 0; }
.db-hist-quote { color: var(--muted); font-style: italic; margin: 2px 0 0; }
.db-hist-used { margin-top: 8px; }
.db-tier-hist { color: var(--warn, #c86); }
.db-hist-meant { margin: 4px 0; }
.db-hist-note { margin-top: 8px; }