/*
 * Оформление. ТЗ §18.
 *
 * Отталкиваемся не от дашборда, а от бланка медицинского протокола:
 * заполненная форма, поля с подчёркиванием, штампы, бирка с номером.
 * Ровно шесть цветов — седьмого не будет.
 */

:root {
  --tile:   #DFE4E2;  /* кафель, фон приложения */
  --form:   #F6F7F5;  /* бумага бланка, карточки */
  --ink:    #17211D;  /* текст */
  --steel:  #7C8783;  /* вторичный текст, линии */
  --green:  #0F5C3F;  /* зелёнка: акцент, действия, бирка */
  --iodine: #8C3A16;  /* йод: падения, тревога */

  --gap:    16px;
  --line:   1px solid var(--steel);
  --line-thin: 1px solid rgba(124, 135, 131, 0.35);
  --measure: 68ch;
}

/*
 * Шрифты по ТЗ §18.2: Golos Text для интерфейса, JetBrains Mono для табличных
 * данных. Оба под SIL OFL 1.1, лицензии лежат рядом с файлами.
 *
 * Кириллица и латиница разнесены по unicode-range: браузер тянет только тот
 * кусок, который реально нужен странице. Для русского интерфейса это 7 КБ
 * вместо 19 КБ на начертание. Сторонние CDN исключены — политика
 * безопасности §16.2 разрешает шрифты только со своего домена.
 */
@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-cyrillic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-cyrillic-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Golos Text';
  src: url('/assets/fonts/golos-text-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-cyrillic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tile);
  color: var(--ink);
  font-family: 'Golos Text', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Моноширинный — только там, где цифры выстраиваются в колонку, и нигде больше. */
.mono, .num, td.num, th.num, .tag-number {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Видимый фокус на клавиатуре — требование §18.4. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

h1, h2, h3 { font-weight: 500; line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p  { margin: 0 0 12px; max-width: var(--measure); }

/* ── Каркас ──────────────────────────────────────────────────────────────── */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

.top {
  border-bottom: var(--line);
  background: var(--form);
}
/*
 * space-between вместо margin-left:auto у меню. Раньше меню прижималось
 * вправо даже когда переносилось на свою строку, и оставалось висеть у
 * правого края в отрыве от знака; так каждая строка раскладывается сама,
 * и перенесённое меню встаёт по левому краю без отдельной точки перелома.
 */
.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
  /*
   * Только вертикаль: краткая форма padding обнуляла боковые поля «.wrap»,
   * и знак в шапке стоял вплотную к краю экрана, на 20 px левее всего
   * содержимого под ним. Из-за этого шапка выглядела отклеившейся от страницы.
   */
  padding-block: 14px;
}
/*
 * Знак и слоган — одна колонка, слоган под логотипом. Ширина колонки равна
 * содержимому (align-items: flex-start), иначе ссылка-знак растянулась бы
 * по слогану и кликабельной стала бы пустота справа от логотипа.
 */
.top__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
/*
 * Фирменный знак вместо текстового начертания. Пропорции, кернинг и точка
 * в словесном знаке не меняются — брендбук v1.0 это запрещает, поэтому
 * задаётся только ширина, высота считается сама.
 */
.top__mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Охранное поле: не меньше диаметра регистрационной точки. */
  padding: 2px 4px 2px 0;
}
.top__logo {
  display: block;
  width: 150px;      /* минимум по брендбуку — 120 px */
  height: auto;
}
.top__tagline {
  color: var(--steel);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.top__nav {
  display: flex;
  gap: 10px 18px;
  flex-wrap: wrap;
  align-items: baseline;
}
.top__nav a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.top__nav a:hover, .top__nav a[aria-current='page'] { border-bottom-color: var(--green); }

/* Две группы: слева работа, справа сам аккаунт. Разделены не линией,
   а весом: личное набрано тише рабочего, чтобы не спорить с ним за внимание. */
/* Межстрочный зазор тот же, что у самого меню: иначе при переносе
   строки внутри группы расходились шире, чем строки между группами,
   и меню читалось как два разных списка. */
.top__group { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: baseline; }
.top__group--user { gap: 10px 14px; font-size: 14px; }
.top__group--user a { color: var(--steel); }
.top__group--user a:hover, .top__group--user a[aria-current='page'] { color: var(--ink); }
.top__logout { display: inline; margin: 0; }
.top__logout .btn--link { font-size: 14px; text-decoration: none; }
.top__logout .btn--link:hover { color: var(--iodine); }
/* Специфичность вместо !important: правило ниже по файлу и с тем же
   весом проиграло бы «.top__group--user a», поэтому селектор длиннее. */
.top__group--user a.top__cta {
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 4px 12px;
  color: var(--green);
}
.top__group--user a.top__cta:hover { background: var(--green); color: var(--form); }

main { padding: 32px 0 56px; }

.foot {
  border-top: var(--line);
  padding: 20px 0 40px;
  color: var(--steel);
  font-size: 14px;
}
.foot a { color: var(--steel); }

/* ── Бланк ───────────────────────────────────────────────────────────────── */

/* Карточка-бланк: скругления нет, тени нет. Глубина задаётся линиями и фоном. */
.form-sheet {
  background: var(--form);
  border: var(--line);
  padding: 20px;
  margin-bottom: var(--gap);
}
.form-sheet__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: var(--line);
  margin: -20px -20px 16px;
  padding: 12px 20px;
}
.form-sheet__title { font-weight: 500; margin: 0; font-size: 15px; }
.form-sheet__aside { margin-left: auto; color: var(--steel); font-size: 14px; }

/* Поле бланка: подпись сверху, значение на линии — как в бумажном протоколе. */
.field { margin-bottom: 14px; }
.field__label {
  display: block;
  font-size: 13px;
  color: var(--steel);
  margin-bottom: 2px;
}
.field__value {
  display: block;
  border-bottom: var(--line-thin);
  padding-bottom: 3px;
  min-height: 1.5em;
}

/* ── Индекс шторма ───────────────────────────────────────────────────────── */

.flux {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.flux__value {
  font-size: 72px;
  line-height: 0.9;
  font-weight: 400;
}
.flux__verdict { font-size: 18px; padding-bottom: 6px; }
.flux--calm    .flux__value { color: var(--ink); }
.flux--rough   .flux__value { color: var(--iodine); }
.flux--storm   .flux__value { color: var(--iodine); }
.flux--storm   .flux__verdict { color: var(--iodine); font-weight: 500; }

.stamp {
  display: inline-block;
  border: 2px solid var(--iodine);
  color: var(--iodine);
  padding: 2px 10px;
  font-size: 13px;
  letter-spacing: 0.04em;
  transform: rotate(-2deg);
  text-transform: uppercase;
}
.stamp--green { border-color: var(--green); color: var(--green); }

/* ── Таблицы ─────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

table.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.sheet th,
table.sheet td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: var(--line-thin);
  vertical-align: baseline;
}
table.sheet th {
  font-weight: 400;
  color: var(--steel);
  font-size: 13px;
  border-bottom: var(--line);
  white-space: nowrap;
}
table.sheet td.num, table.sheet th.num { text-align: right; padding-right: 24px; }
/* Крайняя правая колонка прижимается к краю бланка, остальные держат отступ,
   иначе число слипается с соседним столбцом. */
table.sheet td.num:last-child, table.sheet th.num:last-child { padding-right: 0; }
table.sheet tr:last-child td { border-bottom: none; }

.delta-up   { color: var(--green); }
.delta-down { color: var(--iodine); }

/* ── График ──────────────────────────────────────────────────────────────── */

.chart {
  width: 100%;
  height: 180px;
  display: block;
  background: var(--form);
  border: var(--line);
}
.chart__line { fill: none; stroke: var(--green); stroke-width: 1.5; }
.chart__area { fill: rgba(15, 92, 63, 0.08); stroke: none; }
.chart__threshold { stroke: var(--steel); stroke-width: 1; stroke-dasharray: 3 3; }
.chart__update { fill: var(--iodine); }
.chart__label { fill: var(--steel); font-size: 11px; }

/* ── Сетки и кнопки ──────────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* На экране ровно одно основное действие, и оно единственное залито цветом. */
.btn {
  display: inline-block;
  border: 1px solid var(--green);
  border-radius: 2px;
  padding: 9px 18px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--green);
}
.btn--primary { background: var(--green); color: var(--form); }

/* Опасное действие отличается от соседнего на вид, а не только по подписи.
   Две одинаковые кнопки подряд — «Заблокировать» и «Удалить аккаунт» —
   это приглашение промахнуться. Йод, шестой цвет палитры (§18.2),
   он же цвет падений и тревоги. */
.btn--danger { background: var(--iodine); color: var(--form); }
/*
 * Наведение затемняет зелёнку подмешиванием текстового цвета, а не седьмым
 * оттенком: §18.2 — «ровно шесть цветов, седьмого не будет». Там, где
 * color-mix не поддерживается, кнопка просто остаётся зелёной.
 */
.btn--primary:hover { background: color-mix(in srgb, var(--green) 84%, var(--ink)); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Действие внутри строки списка: кнопка по смыслу, ссылка по весу. */
.btn--link {
  border: none;
  background: none;
  padding: 0;
  color: var(--steel);
  text-decoration: underline;
  min-height: 0;
}
.btn--link:hover { color: var(--iodine); background: none; }

input[type='text'], input[type='email'], input[type='password'], input[type='number'],
input[type='url'], input[type='search'], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--form);
  border: var(--line);
  border-radius: 2px;
  padding: 8px 10px;
  width: 100%;
}
textarea { min-height: 140px; resize: vertical; }
label { display: block; margin-bottom: 4px; font-size: 14px; }

/* ── Служебные состояния ─────────────────────────────────────────────────── */

.muted { color: var(--steel); }
.note {
  border-left: 3px solid var(--steel);
  padding: 2px 0 2px 14px;
  color: var(--steel);
  margin: 0 0 var(--gap);
  max-width: var(--measure);
}
.note--alarm { border-left-color: var(--iodine); color: var(--iodine); }
/* Находка, а не тревога: продвигают одну страницу, ранжируется другая. */
.note--warn { border-left-color: var(--iodine); color: var(--ink); }
.note--warn strong { color: var(--iodine); font-weight: 500; }

/* Возврат на уровень выше. Страница протокола и заключения открывается
   по прямой ссылке, и без этой строки уйти с неё можно только назад
   в браузере — а из печатной версии и оттуда некуда. */
.crumbs {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 var(--gap);
  font-size: 14px;
}
.crumbs a { color: var(--ink); }

/* Шаги «с чего начать». Подсвечен ровно один — текущий; иначе экран
   превращается в список задач, а не в подсказку. */
/*
 * Полоса прогресса: не проценты, а отрезки по числу шагов. Проценты
 * на шести пунктах врут — «33%» не отвечает на вопрос «сколько осталось»,
 * а четыре пустых отрезка отвечают сразу.
 */
.progress {
  display: flex;
  gap: 4px;
  margin: 0 0 var(--gap);
}
.progress__seg {
  flex: 1 1 0;
  height: 6px;
  background: var(--tile);
  border: 1px solid var(--steel);
}
.progress__seg--done { background: var(--green); border-color: var(--green); }
.progress__seg--now { background: var(--form); border-color: var(--green); border-width: 2px; }

/*
 * Что делать прямо сейчас. Первый экран должен отвечать на этот вопрос,
 * а не предлагать поискать ответ в списке из шести карточек.
 */
.next {
  border-left: 3px solid var(--green);
  padding: 4px 0 4px 16px;
  margin: 0 0 4px;
}
.next__label {
  display: block;
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.02em;
}
.next__title { font-size: 20px; margin: 2px 0 6px; }
.next__where { max-width: var(--measure); margin-bottom: 12px; }

.step__num {
  display: inline-block;
  min-width: 1.6em;
  color: var(--steel);
}
.step__mark { font-size: 13px; letter-spacing: 0.02em; }
.step__mark--now { color: var(--green); font-weight: 500; }
.step__mark--done { color: var(--steel); }
.step--now { border-left: 3px solid var(--green); }

/* Ожидание — не задача и не «дальше»: заключение выходит само, когда позиции
   упадут. Помечено пунктиром, чтобы не читалось как невыполненное дело. */
.step--awaited { border-left: 3px dashed var(--steel); }
.step__mark--awaited { color: var(--steel); font-style: italic; }
.step--done .form-sheet__title { color: var(--steel); }
.step--later { opacity: 0.75; }

/*
 * Предупреждение, которое обязаны заметить. Не тревога — сообщение о том,
 * что дальше ждать, а не нажимать. Мягкая пульсация рамки идёт три цикла
 * и останавливается: бесконечное мигание раздражает и его перестают видеть.
 */
.notice {
  border: 2px solid var(--green);
  background: var(--form);
  padding: 14px 16px;
  margin: var(--gap) 0 0;
  max-width: var(--measure);
  animation: notice-pulse 1.6s ease-in-out 3;
}
.notice strong { color: var(--green); font-weight: 500; }

@keyframes notice-pulse {
  0%, 100% { border-color: var(--green); }
  50%      { border-color: var(--iodine); }
}

@media (prefers-reduced-motion: reduce) {
  .notice { animation: none; }
}

/*
 * Раскрывающийся блок для того, что нужно не всем. Прятать — не значит
 * скрывать: заголовок виден, содержимое в одном клике.
 */
.details { margin: var(--gap) 0 0; max-width: var(--measure); }
.details > summary {
  cursor: pointer;
  color: var(--steel);
  font-size: 14px;
  padding: 6px 0;
  border-top: var(--line-thin);
}
.details > summary:hover { color: var(--ink); }
.details[open] > summary { color: var(--ink); }

/* Пустое состояние объясняет, что произойдёт дальше, а не извиняется. */
.empty {
  border: 1px dashed var(--steel);
  padding: 24px;
  color: var(--steel);
  max-width: var(--measure);
}

.flash { border: var(--line); padding: 10px 14px; margin-bottom: var(--gap); background: var(--form); }
.flash--error { border-color: var(--iodine); color: var(--iodine); }
.flash--ok { border-color: var(--green); color: var(--green); }

/* Пояснение к термину при первом использовании — требование §18.4. */
.term {
  border-bottom: 1px dotted var(--steel);
  cursor: help;
}

/* Пронумерованные шаги в тексте: цифра слева, объяснение справа. */
.list-steps { margin: 0 0 var(--gap); padding-left: 1.4em; max-width: var(--measure); }
.list-steps li { padding: 4px 0; }

.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: 6px 0; border-bottom: var(--line-thin); }
.list-plain li:last-child { border-bottom: none; }

/* ── Ядро запросов: снятие фраз с наблюдения ─────────────────────────────── */

.keylist { margin-top: 6px; }
.keylist__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: var(--line-thin);
}
.keylist__all {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}
.keylist__filter { flex: 1 1 180px; width: auto; min-width: 0; }
.keylist__count { margin-left: auto; white-space: nowrap; }

/* Ядро бывает и на тысячу фраз: список прокручивается внутри себя,
   чтобы кнопка снятия и расчёт цены оставались на виду. */
.keylist__items {
  max-height: 320px;
  overflow-y: auto;
  margin: 0 0 12px;
  padding-right: 6px;
}
.keylist__item { display: flex; align-items: baseline; gap: 10px; }
.keylist__item[hidden] { display: none; }
.keylist__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: inherit;
}
.keylist__label input { flex: none; }
.keylist__label span { overflow-wrap: anywhere; }
/* Адрес посадочной обрезаем: важно видеть, есть он вообще, а не читать целиком. */
.keylist__url {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lede { font-size: 18px; max-width: var(--measure); }

/* ── Адаптив до 380px ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 23px; }
  .flux__value { font-size: 54px; }
  .wrap { padding: 0 14px; }
  .form-sheet { padding: 14px; }
  .form-sheet__head { margin: -14px -14px 12px; padding: 10px 14px; }
  .table-scroll { margin: 0 -14px; padding: 0 14px; }
  .top__nav, .top__group { gap: 8px 12px; }
  .top__group--user { gap: 8px 10px; }
  .top__nav { width: 100%; }
  .top__logo { width: 128px; }
}

/* Движение — только как ответ на действие пользователя. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body { background: #fff; }
  .top__nav, .foot { display: none; }
  .form-sheet { border-color: #000; }
  /* Брендбук: на монохромную печать идёт отдельное начертание, а не
     обесцвеченное фильтром цветное. */
  .top__logo { content: url('/assets/img/morg-logo-horizontal-mono-ink.svg'); }
}

/* ── Утилиты отступов и размеров ─────────────────────────────────────────── */
/*
 * Политика безопасности §16.2 запрещает встроенные стили так же, как и скрипты,
 * поэтому даже разовый отступ оформляется классом.
 */
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 20px; }
.pb-2 { padding-bottom: 10px; }
.text-sm { font-size: 14px; }
.text-lg { font-size: 22px; }

pre.code {
  background: var(--tile);
  border: var(--line-thin);
  padding: 12px;
  overflow-x: auto;
  margin: 0 0 12px;
}

/* ── Кабинет ─────────────────────────────────────────────────────────────── */

.subnav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: var(--line);
  padding-bottom: 8px;
  margin-bottom: var(--gap);
}
.subnav a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 6px; }
.subnav a:hover, .subnav a[aria-current='page'] { border-bottom-color: var(--green); }

/* Хвост журнала. Моноширинный, с горизонтальной прокруткой: строку лога
   нельзя переносить — теряется столбец, по которому её и читают. */
.logtail {
  border: var(--line);
  background: var(--form);
  max-height: 60vh;
  overflow: auto;
  padding: 8px 10px;
}
.logtail__line {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  color: var(--steel);
}
.logtail__line--bad { color: var(--iodine); }

/* Заключение о вскрытии. ТЗ §18.3. */
.verdict-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.verdict-head__title { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.verdict-head__tag { margin-left: auto; }

.verdict-cause {
  font-size: 22px;
  line-height: 1.35;
  max-width: var(--measure);
  margin: 0 0 14px;
}
.verdict-meta { color: var(--steel); font-size: 15px; }
.verdict-meta .mono { color: var(--ink); }

.version {
  border-top: var(--line);
  padding: 16px 0;
}
.version:first-of-type { border-top: 2px solid var(--ink); }
.version__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.version__no {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}
.version__score { margin-left: auto; color: var(--steel); font-size: 14px; }
.version__title { font-weight: 500; font-size: 17px; margin: 0; }
.version__body { max-width: var(--measure); margin: 0 0 8px; }
.version__advice {
  border-left: 3px solid var(--green);
  padding: 2px 0 2px 12px;
  color: var(--ink);
  max-width: var(--measure);
  margin: 8px 0 0;
}
.version__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.version--llm .version__no { color: var(--green); }

.badge {
  display: inline-block;
  border: 1px solid var(--steel);
  border-radius: 2px;
  padding: 1px 7px;
  font-size: 12px;
  color: var(--steel);
}
.badge--alarm { border-color: var(--iodine); color: var(--iodine); }
.badge--ok { border-color: var(--green); color: var(--green); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions form { display: inline; }