/* Оформление прототипа psyaiassistant Редакция 3 от 24.08.2026 Две темы на одних и тех же токенах: тёмная по умолчанию, светлая по выбору. Правило: цвет в правилах ниже задаётся ТОЛЬКО переменной. Захардкоженный #fff в одном месте ломает вторую тему молча — сбой видно лишь глазами и лишь в той теме, которую в этот момент не смотрят. Тему ставит shell.js атрибутом data-theme на ; выбор запоминается. Без выбора берётся системная (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; } } /* ── узкий экран ── Рельс не адаптировался вовсе: 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; } /* ── раздел «Симптомы и синдромы» ── */ /* Каталог — список строк, а не плитки. При полусотне записей плитки занимают несколько экранов, и результат отбора перестаёт быть виден целиком; строка держит название, англоязычное имя и начало описания в одну линию. */ .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; } .sy-fold.off { max-height: 4.7em; overflow: hidden; position: relative; } .sy-fold.off::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(to bottom, transparent, var(--panel-2)); pointer-events: none; } .sy-more { margin-top: 8px; font-size: 11.5px; padding: 3px 10px; min-height: 26px; } /* На бумаге сворачивать нечего: печатается всё. */ @media print { .sy-fold.off { max-height: none; } .sy-fold.off::after { display: none; } } .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; } @media (max-width: 820px) { .ck-side { position: static; } } .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; } .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; } .pt-kr { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 700; line-height: 1; transform: translateY(1px); } .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; } @media (max-width: 980px) { .db-layout { grid-template-columns: 1fr; } .db-toc { position: static; max-height: none; } } /* ─────────────── Заболевания: полоса из двух ячеек ─────────────── Слева — российская клиническая рекомендация, справа — зарубежная. Обе могут быть пустыми, и пустая ячейка — такой же ответ, как заполненная: карточка без рекомендации иначе выглядела бы так же, как карточка с нею. */ .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); } /* ─────────────── Симптом-чек: уточнения ─────────────── Вопрос об эпизоде отвечается так же, как отмечается симптом: «+» или «−», и третьим состоянием остаётся «не спрошено». Блок «Об эпизоде» стоит над карточками, потому что его вопросы относятся ко всему случаю; уточнения к отдельному симптому идут подсписком под самим симптомом слева. */ .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); }