/* витрина/style.css — основа оформления витрины. Заведён 15.08.2026, шаг 1 сборки.
 *
 * Тема ВСЕГДА тёмная — решение владельца 15.08.2026. Под тему Telegram не
 * подстраиваемся сознательно: вся цветовая система «холод и тепло» (Р9) построена
 * на приглушённых цветах поверх почти чёрного, и на белом фоне тот же коралловый
 * читается тревожнее, чем задумано. Светлый вариант — это не перекраска, а второй
 * подбор цвета, и макета под него нет.
 *
 * Цвета взяты из утверждённых макетов (раздел 6 docs/Витрина_решения.md), не
 * подобраны заново. Здесь лежат только те, что каркас действительно использует.
 * Смысловые цвета — янтарный «сегодня», синий «в планах» и «ниже нормы», зелёный
 * «в норме», серый «сравнить не с чем» — появятся вместе с экранами, на которых их
 * будет видно глазами. Заводить их заранее незачем: непроверяемый цвет — тот же
 * непроверяемый код.
 *
 * Стили лежат отдельным файлом, а не внутри разметки. Правило CSP на nginx
 * (style-src 'self' 'unsafe-inline') встроенные стили как раз разрешает, так что
 * это не вынужденно, а по смыслу: палитра одна на восемь экранов и обязана жить в
 * одном месте.
 */

:root {
  color-scheme: dark;

  --фон:          #0C0F11;  /* фон всего экрана */
  --карточка:     #161A1D;  /* обычный блок с содержимым */
  --карточка-тихая: #141719; /* блок, который говорит о пустоте или о служебном */
  --выбрано:      #232A2F;  /* выбранная вкладка */

  --текст:        #E7EBEC;  /* главное */
  --текст-2:      #A8B0B5;  /* обычное */
  --текст-3:      #8A949A;  /* второстепенное */
  --текст-4:      #71797E;  /* даты, единицы, подписи */
  --текст-5:      #5E666B;  /* заголовки разделов, самое тихое */
  --линия:        #22282C;

  /* Коралловый. Он же цвет просрочки на вкладке «Сегодня», он же цвет отказа и
   * неполноты. Совмещение сознательное и по смыслу одно: коралловый означает
   * «единственное, что требует действия». Пустой или молчащий экран владелец
   * прочтёт как «всё в порядке» (грабля №34), поэтому у беды обязан быть голос. */
  --беда:         #F09A82;
  --беда-2:       #C87F68;
  --беда-фон:     #1A1210;
  --беда-край:    #C8553D;

  /* Цветовая система «холод и тепло» — вариант C, выбран владельцем (Р9).
   * Цвет кодирует СРОЧНОСТЬ и только её: приглушённо-синее «в планах» → янтарное
   * «сегодня» → коралловое «просрочено». Отсюда следствие, которое видно ниже:
   * блок «Помнить» цвета не имеет вовсе — он бессрочный и на этой шкале не стоит.
   *
   * Известное совмещение, оставленное владельцем сознательно: синий работает в двух
   * смыслах — «в планах» здесь и «ниже нормы» в показателях. Если начнёт путать,
   * выход записан в Р9. */
  --план:         #88B6E0;
  --план-метка:   #6E93B8;
  --план-фон:     #131A20;
  --план-край:    #4E7096;

  --сегодня:      #E0B978;
  --сегодня-метка:#C79A4E;
  --сегодня-фон:  #1D1810;
  --сегодня-край: #C79A4E;

  --приём-текст:  #C4CACE;
  --помнить-край: #39424A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--фон);
  color: var(--текст);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;

  /* Высота именно 100dvh: в мобильном браузере адресная строка то появляется, то
   * прячется, и 100vh при этом врёт — низ экрана уезжает под неё вместе с
   * вкладками. Строка с vh оставлена запасной для старых webview, где dvh не
   * понимают: браузер возьмёт последнюю из тех, что понял. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Шапка --- */

.шапка {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 15px 10px;
  flex: none;
}

.шапка-имя {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.шапка-дата {
  font-size: 12px;
  color: var(--текст-4);
  white-space: nowrap;
}

/* --- Полотно экрана --- */
/* Прокручивается только оно. Шапка и вкладки стоят на месте: вкладки — единственный
 * способ уйти с экрана, и уплывать вместе с содержимым они не должны. */

.экран {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 15px 16px;
}

/* --- Вкладки внизу --- */

.вкладки {
  flex: none;
  display: flex;
  gap: 4px;
  background: var(--карточка-тихая);
  border-radius: 12px;
  padding: 4px;
  margin: 0 15px 12px;

  /* Отступ снизу под «домашнюю полоску» айфона: без него нижняя вкладка попадает
   * ровно под неё и не нажимается. */
  margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.вкладка {
  flex: 1;
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--текст-4);
  padding: 8px 0;
  border-radius: 9px;
  cursor: pointer;
}

.вкладка[aria-selected="true"] {
  background: var(--выбрано);
  color: var(--текст);
}

/* --- Заголовок раздела внутри экрана --- */

.раздел {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--текст-5);
  margin: 18px 2px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* --- Строка «название — число» --- */
/* Каркасу больше ничего и не нужно: он показывает СКОЛЬКО чего пришло, а не что
 * именно. Настоящие карточки придут вместе со своими экранами. */

.счёт {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: var(--карточка);
  border-radius: 12px;
  padding: 10px 13px;
  margin-bottom: 7px;
}

.счёт-имя { font-size: 13px; color: var(--текст-2); }

.счёт-число {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Словом вместо числа — «не прочитан», «не спрашивали». Тише и мельче: это не
 * величина, а состояние. */
.счёт-словом { font-size: 12px; color: var(--текст-4); white-space: nowrap; }

/* --- Состояния: жду, не пустили, сбой --- */

.состояние {
  background: var(--карточка-тихая);
  border-radius: 13px;
  padding: 13px 14px;
  font-size: 13px;
  color: var(--текст-3);
  line-height: 1.55;
  margin: 14px 0 0;
}

.состояние.беда {
  background: var(--беда-фон);
  box-shadow: inset 2px 0 0 var(--беда-край);
  color: var(--беда);
}

/* Приписка под состоянием — куда смотреть, если это увидели. Владельцу она не
 * нужна каждый день, поэтому тихая, но она обязана быть: отказ без адреса
 * причины заставляет искать вслепую. */
.состояние-куда {
  font-size: 11.5px;
  color: var(--текст-5);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* --- Неполнота --- */
/* Данные пришли, но собрались не целиком: какой-то файл не прочитался. Экран при
 * этом выглядит нормальным, и в этом вся опасность (грабля №34). */

.неполно {
  background: var(--беда-фон);
  box-shadow: inset 2px 0 0 var(--беда-край);
  border-radius: 13px;
  padding: 11px 13px;
  font-size: 12px;
  color: var(--беда);
  line-height: 1.5;
  margin: 14px 0 0;
}

/* --- Пометка про каркас --- */
/* Стоит внизу каждой вкладки и уйдёт вместе с последним собранным экраном.
 * Проверочную страницу шага 2 нарочно оставили без оформления, чтобы её нельзя
 * было принять за витрину. У каркаса оформление уже есть — значит спутать можно,
 * и он обязан сказать о себе сам. */

.каркас {
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--линия);
  font-size: 11px;
  color: var(--текст-5);
  line-height: 1.55;
}

/* =====================================================================
 * ВКЛАДКА «СЕГОДНЯ»
 * ===================================================================== */

/* --- Крупный блок наверху --- */
/* Синий, когда впереди «ближайшее»; янтарный, когда дело стоит на сегодня. */

.герой {
  border-radius: 16px;
  padding: 13px 14px;
  margin-top: 14px;
}

.герой-метка {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.герой-имя {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 3px;
}

.герой-подпись {
  font-size: 13px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.герой-план {
  background: var(--план-фон);
  box-shadow: inset 2px 0 0 var(--план-край);
}
.герой-план .герой-метка { color: var(--план-метка); }
.герой-план .герой-подпись { color: var(--план); }

.герой-сегодня {
  background: var(--сегодня-фон);
  box-shadow: inset 2px 0 0 var(--сегодня-край);
}
.герой-сегодня .герой-метка { color: var(--сегодня-метка); }
.герой-сегодня .герой-подпись { color: var(--сегодня); }

/* --- Строка списка сроков --- */

.дело {
  background: var(--карточка);
  border-radius: 13px;
  padding: 11px 13px;
  margin-bottom: 8px;
}

.дело-верх {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.дело-имя { font-size: 14.5px; min-width: 0; }

.дело-когда {
  font-size: 11.5px;
  color: var(--текст-4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.дело-низ {
  font-size: 11.5px;
  color: var(--текст-3);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.дело.просрочено {
  background: var(--беда-фон);
  box-shadow: inset 2px 0 0 var(--беда-край);
}
.дело.просрочено .дело-когда { color: var(--беда); }
.дело.просрочено .дело-низ { color: var(--беда-2); }

/* --- Привычки: россыпь ярлыков --- */
/* Цвета у них нет нарочно: привычка бессрочна, на шкале срочности не стоит. */

.пилюля {
  display: inline-block;
  font-size: 11.5px;
  background: var(--карточка);
  color: var(--текст-2);
  border-radius: 20px;
  padding: 5px 11px;
  margin: 0 5px 6px 0;
}

/* --- Приём --- */
/* Состав и дозы показываются КАК ЗАПИСАНЫ в добавки_протокол.md, без сокращений.
 * Соблазн ужать «Thorne B-Complex — 1 капс» до «B-комплекс» велик и экран бы
 * почистил, но это медицинский факт, а не подпись к картинке: сокращать его —
 * решать за владельца, какая часть дозы неважна. */

.приём-группа { margin-bottom: 10px; }

.приём-когда {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--текст-4);
  margin-bottom: 2px;
}

.приём-что {
  font-size: 12.5px;
  color: var(--приём-текст);
  line-height: 1.6;
}

/* Прекращённое. Тише действующего, но видно: «перестал принимать 1 августа» — это
 * то, о чём врача предупреждают, а не то, что стирают. */
.приём-прекращено {
  font-size: 11.5px;
  color: var(--текст-4);
  line-height: 1.55;
  margin-top: 4px;
}

/* --- Помнить --- */
/* Цвет отдан сознательно (Р9): флаги бессрочны и кричать не должны. Линейка слева
 * отделяет их от списка, не повышая голоса. */

/* Свёрнут до заголовка, полный текст открывается тычком — так же, как у показателя
 * (Р3). Свернулось при этом ровно то, что автор памятки сам пометил жирным как
 * главное, а не первые сколько-то знаков. */

.помнить {
  border-left: 2px solid var(--помнить-край);
  padding-left: 11px;
  margin-bottom: 10px;
}

.помнить-кнопка,
.помнить-текст {
  font: inherit;
  font-size: 12px;
  color: var(--текст-3);
  line-height: 1.5;
  padding: 2px 0;
  width: 100%;
  text-align: left;
}

.помнить-кнопка {
  appearance: none;
  border: none;
  background: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

/* Знак «плюс» — единственное, что говорит: тут есть продолжение. Без него свёрнутый
 * флаг не отличить от короткого, и полный текст никто не откроет. */
.помнить-знак {
  flex: none;
  color: var(--текст-5);
  font-size: 13px;
  line-height: 1.4;
}

/* --- Пусто и горизонт --- */

.пусто {
  background: var(--карточка-тихая);
  border-radius: 13px;
  padding: 12px 13px;
  font-size: 12px;
  color: var(--текст-4);
  line-height: 1.55;
  margin-top: 14px;
}

/* Строка под списком сроков: что лежит ЗА горизонтом. Без неё список выглядит как
 * «это всё, что есть», а он — «это всё, что в пределах 180 дней». */
.горизонт {
  font-size: 11.5px;
  color: var(--текст-5);
  line-height: 1.5;
  margin: 2px 2px 0;
}

/* ============================================================
 * ВКЛАДКА «ПОКАЗАТЕЛИ»
 * ============================================================
 * Размеры и цвета выписаны из утверждённого макета «Показатели: список и
 * карточка» (левая половина), а не подобраны заново.
 *
 * Цвет здесь означает ОТНОШЕНИЕ К НОРМЕ, а не срочность. На вкладке «Сегодня»
 * та же палитра кодирует срочность — это две разные шкалы, и совмещение синего
 * («в планах» там, «ниже нормы» здесь) оставлено владельцем сознательно (Р9).
 * Если начнёт путать, выход записан там же.
 */

:root {
  --выше:        #F09A82;  /* он же коралловый «беда» — тот же цвет, другой смысл */
  --выше-фон:    #3A211C;
  --ниже:        #88B6E0;
  --ниже-фон:    #1B2C3A;
  --в-норме:     #6FCFA6;
  --в-норме-фон: #16261F;
  --молча:       #8A949A;  /* сравнить не с чем: цвета нет, есть приглушение */
  --молча-фон:   #22282C;

  --дорожка:     #22282C;
  --зона:        #333C42;
  --пунктир:     #2E353A;
}

/* Шапка вкладки: слева заголовок, справа «119 всего». */
.пок-шапка {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 2px 2px;
}

.пок-заголовок {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.пок-всего {
  font-size: 12px;
  color: var(--текст-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Строка списка — карточка из четырёх ярусов. */
.показатель {
  background: var(--карточка);
  border-radius: 14px;
  padding: 13px;
  margin-bottom: 9px;
}

.пок-верх {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

/* Имена бывают длинные («Нормальные сперматозоиды (морфология по Крюгеру)») —
 * перенос по словам разрешён, а чип рядом не должен ужиматься до многоточия:
 * «выше норм…» на медицинском экране читается хуже, чем перенесённое имя. */
.пок-имя {
  font-size: 13px;
  color: var(--текст-2);
  min-width: 0;
}

.чип {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.чип-выше  { background: var(--выше-фон);    color: var(--выше); }
.чип-ниже  { background: var(--ниже-фон);    color: var(--ниже); }
.чип-норма { background: var(--в-норме-фон); color: var(--в-норме); }
.чип-молча { background: var(--молча-фон);   color: var(--молча); }

.пок-знач {
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Число красится ТОЛЬКО при отклонении и при «сравнить не с чем». В норме оно
 * остаётся обычным светлым — так нарисовано в разметке макета. Подпись под
 * макетом утверждает обратное («цвет красит и число, и деление»), но собираем
 * по нарисованному: в карточке показателя число «в норме» цветное, в списке —
 * нет, и разница между экранами в макете есть. */
.пок-знач-выше  { color: var(--выше); }
.пок-знач-ниже  { color: var(--ниже); }
.пок-знач-молча { color: var(--текст-2); }

/* Шкала: дорожка, серая зона нормы, засечка значения. */
.дорожка {
  position: relative;
  height: 5px;
  background: var(--дорожка);
  border-radius: 3px;
  margin-top: 12px;
}

.зона {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--зона);
  border-radius: 3px;
}

/* Засечка сдвинута на половину своей ширины влево: иначе значение «ровно на
 * границе нормы» вставало бы правее границы на всю толщину палочки. */
.засечка {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 11px;
  margin-left: -1.5px;
  border-radius: 2px;
}

.засечка-выше  { background: var(--выше); }
.засечка-ниже  { background: var(--ниже); }
.засечка-норма { background: var(--в-норме); }
.засечка-молча { background: var(--молча); }

/* Нормы нет — шкалы нет, стоит пунктир (Р6). Пустое место на этом ярусе
 * прочиталось бы как «шкала не загрузилась». */
.пунктир {
  height: 0;
  border-top: 2px dashed var(--пунктир);
  margin-top: 15px;
}

.пок-низ {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  color: var(--текст-4);
  margin-top: 6px;
}

.пок-низ span:last-child { white-space: nowrap; }

/* Разъехавшиеся единицы и спор слоёв пометки. Оба случая редки до того, что в
 * сегодняшней базе не встречаются ни разу, — и оба обязаны быть видны, когда
 * встретятся: тихо выбранная сторона это грабля №34. */
.пок-тревога {
  margin-top: 8px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--беда-2);
  border-left: 2px solid var(--беда-край);
  padding-left: 8px;
}

/* Тихое пояснение внутри карточки: почему на шкале чего-то нет. Не тревога —
 * поэтому без коралловой полосы слева, просто мельче и глуше. */
.пок-тихо {
  margin-top: 7px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--текст-5);
}

/* --- Поиск и разделы вкладки «Показатели» --- */

.поиск { margin: 10px 0 4px; }

.поиск-поле {
  width: 100%;
  appearance: none;
  font: inherit;
  font-size: 14px;
  color: var(--текст);
  background: var(--карточка);
  border: 1px solid var(--линия);
  border-radius: 11px;
  padding: 9px 12px;
}

.поиск-поле::placeholder { color: var(--текст-5); }
.поиск-поле:focus { outline: none; border-color: var(--выбрано); }

.поиск-итог {
  font-size: 11px;
  color: var(--текст-4);
  margin: 6px 2px 10px;
}

/* Верхний уровень: «Анализы» и «Осмотры и измерения». Тише подразделов и не
 * нажимается — это разделитель, а не кнопка. */
.верх-раздел {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--текст-5);
  margin: 20px 2px 8px;
}

/* Подраздел свёрнут по умолчанию: пока он закрыт, счётчик со словами «N вне нормы»
 * — единственное, что о нём известно. Без него, чтобы понять, есть ли внутри
 * важное, пришлось бы открыть все пятнадцать. */
.подраздел {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  appearance: none;
  border: none;
  text-align: left;
  font: inherit;
  background: var(--карточка-тихая);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 7px;
  color: var(--текст);
  cursor: pointer;
}

.подраздел-имя { flex: 1; font-size: 13.5px; min-width: 0; }

.подраздел-счёт {
  font-size: 11px;
  color: var(--текст-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.подраздел-знак {
  font-size: 14px;
  color: var(--текст-5);
  width: 12px;
  text-align: center;
  flex: none;
}

/* Отклонения у свёрнутого раздела — единственное цветное пятно в закрытом списке.
 * Цвет тот же коралловый, что у отклонения в карточке: одна вещь — один цвет. */
.подраздел-откл {
  font-size: 11px;
  color: var(--выше);
  white-space: nowrap;
}

/* ============================================================
 * КАРТОЧКА ПОКАЗАТЕЛЯ (шаг 4)
 * ============================================================ */

/* Строка списка стала кнопкой — сбрасываем всё, что браузер даёт кнопке по
 * умолчанию, и возвращаем вид карточки. */
button.показатель {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  font: inherit;
  color: var(--текст);
  cursor: pointer;
}

.назад {
  display: flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--текст-4);
  padding: 12px 2px;
  margin-bottom: 3px;
  cursor: pointer;
}

.назад-знак { font-size: 16px; line-height: 1; }

/* Шапка карточки — три строки одной мыслью: специальность, когда приём, кто пациент.
 * Внутри тесно, а зазор до следующего блока задаёт стопка. */
.карточка-шапка > * + * { margin-top: 3px; }

/* СТОПКА КАРТОЧКИ ВРАЧА. Зазор между блоками задаётся ЗДЕСЬ и только здесь.
 *
 * До 17.08.2026 каждый блок носил свои margin, и на стыке «повод обращения» с первой
 * строкой оглавления зазор пропал: у одного был нижний отступ, у другого только верхний.
 * Владелец увидел это на телефоне первым же взглядом. Патч одного стыка ничего бы не
 * гарантировал — любой новый блок повторил бы ошибку. Здесь зазор один на всех, и
 * собственные отступы детей гасятся, чтобы не складывались с ним. */
.карточка-стопка {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 14px;
}

/* Селектор с типом элемента нарочно: `.карточка-стопка > *` имеет ту же специфичность,
 * что `.карточка-мета` или `.повод`, и проигрывал бы им по порядку в файле — то есть
 * гашение молча не срабатывало бы. Проверено: без `div` отступы детей выживали. */
div.карточка-стопка > * {
  margin-top: 0;
  margin-bottom: 0;
}

.карточка-имя {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.карточка-знач-строка {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.карточка-знач {
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* В карточке число «в норме» ЗЕЛЁНОЕ — в отличие от списка, где оно остаётся
 * белым. Разница есть в самом макете и она осмысленна: в списке цветное число
 * означало бы «посмотри сюда» на каждой второй строке. */
.карточка-знач-выше  { color: var(--выше); }
.карточка-знач-ниже  { color: var(--ниже); }
.карточка-знач-норма { color: var(--в-норме); }
.карточка-знач-молча { color: var(--текст-2); }

.карточка-мета {
  font-size: 12px;
  color: var(--текст-4);
  margin-top: 7px;
}

/* Крупная шкала: та же конструкция, что в списке, но толще. */
.дорожка.крупная { height: 11px; border-radius: 6px; margin-top: 20px; background: #1B2126; }
.дорожка.крупная .зона { background: #303D44; border-radius: 6px; }
.дорожка.крупная .засечка { top: -5px; width: 4px; height: 21px; margin-left: -2px; }
.пунктир.крупная { margin-top: 20px; border-top-color: #2A3238; }

.шкала-подписи {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--текст-4);
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}

/* Норма словами — тише чисел по краям: это подпись к ним, а не третья величина. */
.шкала-норма { font-size: 10.5px; color: #4E565C; text-align: center; }

.раздел-карточки {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--текст-5);
  margin: 22px 2px 9px;
}

/* Заглушка на месте графика. Объясняет, ПОЧЕМУ линии нет. */
.заглушка {
  background: var(--карточка-тихая);
  border-radius: 12px;
  padding: 12px 13px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--текст-5);
}

.график-обёртка { background: var(--карточка); border-radius: 12px; padding: 10px 8px 6px; }
.график { display: block; width: 100%; height: auto; }
.график-коридор { fill: #1B2126; }
/* Числа границ нормы прямо на картинке: без них точки висят без опоры — видно,
 * что значение выше нормы, и не видно, насколько. */
/* Числа границ нормы. Мельче подписей под шкалой нарочно: это опора для глаза,
 * а не величина, которую читают. Размер понижен по замечанию владельца. */
.график-число { fill: #6B747A; font-size: 6.5px; font-family: inherit; }

/* Число выбранной точки — прямо на графике, у самой точки. Крупнее границ нормы:
 * это ответ на тычок, ради него в точку и целились. */
.график-значение { font-size: 10px; font-weight: 600; font-family: inherit; }
.график-значение-выше  { fill: var(--выше); }
.график-значение-ниже  { fill: var(--ниже); }
.график-значение-норма { fill: var(--в-норме); }
.график-значение-молча { fill: var(--молча); }

/* Зона нажатия поверх точки. Невидима нарочно: на вид график не меняется, а
 * пальцем попасть можно — сама точка радиусом 2,6 в картинке шириной 280 это
 * меньше миллиметра на экране телефона. */
.график-мишень { fill: transparent; cursor: pointer; }

.график-кольцо { fill: none; stroke-width: 1.5; }
.график-кольцо-выше  { stroke: var(--выше); }
.график-кольцо-ниже  { stroke: var(--ниже); }
.график-кольцо-норма { stroke: var(--в-норме); }
.график-кольцо-молча { stroke: var(--молча); }

/* Подсказка «ткни точку». Уходит после первого тычка — дальше это шум. */
.график-точка-подпись {
  font-size: 11px;
  color: var(--текст-5);
  margin: 7px 2px 0;
}

.график-линия { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.график-линия-выше  { stroke: var(--выше); }
.график-линия-ниже  { stroke: var(--ниже); }
.график-линия-норма { stroke: var(--в-норме); }
.график-линия-молча { stroke: var(--молча); }

.график-точка-выше  { fill: var(--выше); }
.график-точка-ниже  { fill: var(--ниже); }
.график-точка-норма { fill: var(--в-норме); }
.график-точка-молча { fill: var(--молча); }

/* Даты по краям картинки: без них непонятно, какой отрезок времени она накрывает. */
.график-края {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: #4E565C;
  margin-top: 2px;
  padding: 0 2px;
}

/* Список замеров: строка на замер, у каждой своя мини-шкала — именно в ней видно,
 * что коридор нормы переехал вместе с лабораторией. */
.замер {
  border-top: 1px solid #1E2429;
  padding: 9px 0;
}

.замер:first-of-type { border-top: none; padding-top: 0; }

.замер-верх {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.замер-дата { font-size: 12px; color: var(--текст-2); }

.замер-знач {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.замер-знач-выше  { color: var(--выше); }
.замер-знач-ниже  { color: var(--ниже); }
.замер-знач-норма { color: var(--в-норме); }
.замер-знач-молча { color: var(--текст-2); }

.замер-подпись { font-size: 9.5px; color: var(--текст-5); margin-top: 5px; }

.сноска {
  font-size: 10.5px;
  line-height: 1.5;
  color: #4E565C;
  margin-top: 18px;
}

/* =====================================================================
 * ВКЛАДКА «ВРАЧУ» (шаг 5)
 * =====================================================================
 * Два уровня: выбор визита и сводка. Сводка показатели НЕ переоформляет — там те же
 * карточки `.показатель`, что во вкладке «Показатели» (Р8). Своего вида здесь только
 * то, чего в «Показателях» нет вовсе: строка визита, блок повода, флаги и оглавление. */

.врач-шапка { margin-bottom: 2px; }

.врач-подзаголовок {
  font-size: 12px;
  color: var(--текст-4);
  margin-top: 1px;
}

/* Строка визита. Кнопка, а не блок: по ней нажимают, и экранный диктор обязан
 * назвать её нажимаемой — тот же довод, что у карточки показателя. */
.визит {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  font: inherit;
  color: var(--текст);
  background: var(--карточка);
  border-radius: 14px;
  padding: 12px 13px;
  margin-bottom: 8px;
  cursor: pointer;
}

/* Ближайший визит: фон и полоса слева. Полоса сделана внутренней тенью, а не рамкой,
 * — рамка добавила бы карточке ширины, и соседние строки разъехались бы на пиксель. */
.визит-ближайший {
  background: var(--план-фон);
  box-shadow: inset 2px 0 0 var(--план-край);
}

.визит-тело { flex: 1; min-width: 0; }

.визит-верх {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.визит-кто { font-size: 15px; min-width: 0; }

.визит-когда {
  flex: none;
  font-size: 11.5px;
  color: var(--текст-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Повод — одной строкой: в списке нужен ответ «зачем иду», полный текст ждёт в сводке.
 * Обрезка многоточием тут честнее переноса на три строки: карточек несколько, и
 * список должен листаться, а не читаться. */
.визит-повод {
  font-size: 11.5px;
  color: var(--текст-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.визит-чип {
  display: inline-block;
  margin-top: 7px;
}

.визит-шеврон {
  flex: none;
  font-size: 16px;
  line-height: 1.1;
  color: #454D53;
}

/* Блок повода в шапке сводки. Здесь заметка стоит ЦЕЛИКОМ и переносится: по этому
 * тексту отобраны показатели ниже, и обрезать его — значит спрятать основание. */
/* ПОВОД ОБРАЩЕНИЯ — не кнопка, и выглядеть кнопкой не должен.
 *
 * Замечание владельца 17.08.2026: с фоном карточки и закруглением повод был неотличим от
 * строк оглавления, то есть обещал нажатие, которого нет. Фон убран совсем; вместо него
 * повод выделяется тем, чем и должен выделяться текст, — размером, яркостью и полосой
 * слева. Черта снизу отделяет его от строк, которые ниже И нажимаются.
 *
 * Полоса цвета «в планах»: по Р9 цвет кодирует срочность, а повод визита — это именно
 * запланированный разговор, не тревога и не просрочка. */
.повод {
  box-shadow: inset 2px 0 0 var(--план-край);
  padding: 2px 0 2px 11px;
}

.повод-метка {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--текст-5);
  margin-bottom: 3px;
}

/* Текст повода ярче и крупнее строк оглавления: провалившись к врачу, первым читают
 * именно его. Это и есть «выделяется», без фона и без вида кнопки. */
.повод-текст {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--текст);
}

/* Здесь стоял переключатель «По поводу» / «Все 119». Убран пересборкой карточки врача
 * (Р43): он делал в одном месте две работы — отбирал и навигировал — и обе плохо. Его
 * место заняли строки оглавления, стили которых лежат в конце файла. */

/* ============================================================
 * ИССЛЕДОВАНИЯ В СВОДКЕ (Р39)
 * ============================================================ */

/* Строка исследования устроена как карточка визита, а не как подраздел показателей:
 * у неё есть содержимое (вывод врача), а не только имя со счётчиком. Кнопка — потому
 * что по строке нажимают, и диктор обязан назвать её нажимаемой. */
.иссл {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  font: inherit;
  color: var(--текст);
  background: var(--карточка);
  border-radius: 14px;
  padding: 12px 13px;
  margin-bottom: 8px;
  cursor: pointer;
}

/* Не кнопка (раскрывать нечего) — тот же вид, но без пальца: нажимаемое, которое
 * ничего не делает, читается как поломка. */
div.иссл { cursor: default; }

.иссл-имя { font-size: 14.5px; line-height: 1.35; }

/* Дата и клиника. Табличные цифры — чтобы две даты подряд стояли столбиком. */
.иссл-когда {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--текст-4);
  font-variant-numeric: tabular-nums;
}

/* «ещё одно: 26 октября 2023» — тише даты последнего: это подсказка, что история
 * глубже, а не вторая равноправная дата. */
.иссл-ещё { color: var(--текст-5); }

/* Вывод врача — то, ради чего строка вообще существует. Стоит целиком и переносится:
 * обрезать заключение многоточием значит спрятать половину ответа. */
.иссл-вывод {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--текст-2);
}

.иссл-раскрыть {
  margin-top: 8px;
  font-size: 11px;
  color: var(--текст-5);
}

.иссл-тихо {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--текст-5);
}

/* РАСКРЫТОЕ ИССЛЕДОВАНИЕ. Первая версия ставила каждую находку отдельным блоком, и они
 * сливались со списком: было не видно, что это содержимое строки выше, а не следующие
 * строки (замечание владельца 17.08.2026).
 *
 * Устройство: у открытой строки срезаются нижние углы, у группы — верхние, и вместе они
 * читаются одной раскрытой карточкой. Полоса слева проходит через обе. */
.иссл-открыта {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  box-shadow: inset 2px 0 0 var(--план-край);
}

.иссл-группа {
  background: var(--карточка-тихая);
  border-radius: 0 0 14px 14px;
  box-shadow: inset 2px 0 0 var(--план-край);
  padding: 4px 13px 12px;
  margin-bottom: 10px;
}

/* Внутри группы находки разделены волосяной линией: две даты подряд надо ОТЛИЧАТЬ, иначе
 * протокол 2023 года читается как продолжение протокола 2025-го. */
.иссл-находка + .иссл-находка {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--линия);
}

.иссл-находка-когда {
  font-size: 11px;
  color: var(--текст-4);
  font-variant-numeric: tabular-nums;
  margin: 8px 0 7px;
}

/* Текст бланка. Размер меньше вывода, а межстрочие крупнее: это чтение абзацем, а не
 * взгляд на строку. */
.иссл-протокол {
  font-size: 12px;
  line-height: 1.6;
  color: var(--текст-3);
}

.иссл-абзац + .иссл-абзац,
.иссл-абзац + .иссл-пункт,
.иссл-пункт + .иссл-абзац,
.иссл-пункт + .иссл-пункт { margin-top: 5px; }

.иссл-заголовок {
  margin-top: 9px;
  color: var(--текст-4);
}

/* Пункт бланка со своим маркером: в архиве он записан дефисом, и дефис в начале строки
 * на экране читается как перенос, а не как перечисление. */
.иссл-пункт { padding-left: 12px; position: relative; }

.иссл-пункт::before {
  content: '·';
  position: absolute;
  left: 3px;
  color: var(--текст-5);
}

/* Жирное из бланка — акцент, расставленный ВРАЧОМ: находки вне нормы, строка
 * «Заключение». Цвет обычного текста, а не яркий: выделяет вес, а не тревогу. */
.иссл-протокол strong {
  font-weight: 600;
  color: var(--текст-2);
}

/* ============================================================
 * КАРТОЧКА ВРАЧА: ФЛАГИ И ОГЛАВЛЕНИЕ (Р43)
 * ============================================================ */

/* Флаги под шапкой: аллергии и приём. Врач спрашивает про них первым делом, а лежали
 * они после сорока карточек показателей. Рядом в строку, потому что это не разделы, а
 * два коротких факта. */
.флаги {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.флаг {
  flex: 1 1 auto;
  background: var(--карточка);
  border-radius: 11px;
  padding: 9px 11px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--текст-3);
  text-align: left;
}

/* Приём нажимаемый, аллергии нет — и это видно по шеврону, а не только на ощупь.
 * Сбрасываем всё, что браузер даёт кнопке, и возвращаем вид плашки. */
button.флаг-нажимаемый {
  display: flex;
  align-items: baseline;
  gap: 8px;
  appearance: none;
  border: none;
  font: inherit;
  font-size: 11.5px;
  color: var(--текст-2);
  cursor: pointer;
}

.флаг-текст { flex: 1; min-width: 0; }

.флаг-шеврон {
  flex: none;
  font-size: 14px;
  line-height: 1;
  color: #454D53;
}

/* Строка оглавления. Отличается от карточки визита нарочно: у визита слева содержимое и
 * шеврон справа во всю высоту, а здесь шеврон в одном ряду с заголовком и счётчиком —
 * тогда подпись и превью читаются как содержимое строки, а не как второй столбец. */
.оглавление {
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  font: inherit;
  color: var(--текст);
  background: var(--карточка);
  border-radius: 13px;
  padding: 12px 13px;
  margin-bottom: 8px;
  cursor: pointer;
}

.оглавление-верх {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.оглавление-имя {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
}

.оглавление-счёт {
  flex: none;
  font-size: 13px;
  color: var(--текст-4);
  font-variant-numeric: tabular-nums;
}

.оглавление-шеврон {
  flex: none;
  font-size: 15px;
  line-height: 1;
  color: #454D53;
}

/* Тревожное число на строке: сколько за ней вне нормы. Коралловый по Р9 — «единственное,
 * что требует внимания». На тихой карточке одно цветное число видно раньше любого
 * заголовка, и именно оно заменило три убранных блока отклонений. */
.оглавление-тревога {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--беда-2);
  font-variant-numeric: tabular-nums;
}

/* Подпись объясняет, ЧТО за строкой («8 были вне нормы раньше»). Превью показывает
 * ИМЕНА. Разные вещи и разный цвет: подпись — про множество, превью — про его состав. */
.оглавление-подпись {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--текст-5);
}

.оглавление-превью {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--текст-4);
}

/* =====================================================================
 * ВКЛАДКА «ПРОФИЛЬ» (Р44)
 * =====================================================================
 * Устойчивое о пациенте. Своей плотной вёрстки не заводим: блок — та же карточка,
 * что на остальных вкладках, чтобы экран читался как часть одного приложения.
 */

.проф-шапка {
  background: var(--карточка);
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 4px;
}

/* Имя крупно — довод записан в Р44: сводку смотрит врач, и сводка без имени пациента
 * не сводка. В карточке врача имя стояло тихой строкой в шапке и терялось. */
.проф-имя {
  font-size: 17px;
  line-height: 1.25;
  color: var(--текст);
}

.проф-кто {
  font-size: 12px;
  color: var(--текст-4);
  margin-top: 4px;
}

.проф-вступление {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--текст-3);
  margin: 0 2px 10px;
}

.проф-группа {
  background: var(--карточка);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.проф-группа-имя {
  font-size: 12px;
  color: var(--текст-4);
  margin-bottom: 8px;
}

/* Пункты внутри группы разделены волосяной линией: в «Активных проблемах» их три, и
 * без границы они читаются одним абзацем — а это три разных факта с разными датами.
 * Тот же приём, что у находок внутри раскрытого исследования. */
.проф-пункт {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--текст-2);
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--линия);
}

.проф-пункт:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.проф-пункт strong {
  color: var(--текст);
  font-weight: 600;
}

/* Оговорка — не факт в списке, а «имей в виду». Поэтому она стоит отдельной тихой
 * карточкой, а не пунктом: приравняв её к пунктам, мы сказали бы, что «FVL отсутствует»
 * это такая же строка анамнеза, как «операций не было», — а она про чужую ошибку. */
.проф-оговорка {
  background: var(--карточка-тихая);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--текст-3);
}

.проф-оговорка strong {
  color: var(--текст-2);
  font-weight: 600;
}