/* Оформление готового разбора анализов.
 *
 * Общее для инструмента на /ai и публичной страницы /analiz/{token}: разметка
 * у них одна (frontend/templates/partials/blood_result.html), значит и стили
 * должны быть одни. Отдельный файл, а не <style> в шаблоне, потому что разметка
 * рендерится внутри <template x-if> — оттуда стили не применяются. */

/* Цвета статусов показателя. В токенах их нет — они нужны только здесь,
   и одинаковы в обеих темах, чтобы «красное» читалось красным на белом фоне. */
:root {
  --bl-ok: #22c55e;
  --bl-ok-bg: rgba(34, 197, 94, .10);
  --bl-warn: #f59e0b;
  --bl-warn-bg: rgba(245, 158, 11, .10);
  --bl-bad: #ef4444;
  --bl-bad-bg: rgba(239, 68, 68, .10);
  --bl-sport: #3b82f6;
  --bl-sport-bg: rgba(59, 130, 246, .10);
}

/* Шкала показателя: серая полоса — весь размах, зелёная вставка — норма,
   точка — где стоит значение. */
.bl-scale { position: relative; height: 6px; border-radius: 3px; background: var(--color-border); }
.bl-scale-norm { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: rgba(34, 197, 94, .35); }
.bl-scale-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.bl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}

.bl-marker-row { border-top: 1px solid var(--color-border); padding: 16px 0; }
.bl-marker-row:first-child { border-top: none; }

/* «Почему так» — причины отклонения показателя. Приглушённый блок: это не
   действие, а объяснение, и оно не должно спорить с рекомендацией ниже. */
.bl-causes {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-surface-alt);
}
.bl-causes-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 5px;
}
.bl-causes ul { padding-left: 18px; }
.bl-causes li { font-size: .85rem; line-height: 1.65; list-style: disc; }
.bl-causes li + li { margin-top: 3px; }

/* План приёма: название — доза — зачем. Первая строка выделена, потому что
   именно её ищут глазами. */
.bl-plan-row { border-top: 1px solid var(--color-border); padding: 14px 0; }
.bl-plan-row:first-child { border-top: none; padding-top: 0; }

.bl-flag {
  border-left: 3px solid var(--bl-bad);
  background: var(--bl-bad-bg);
  border-radius: 0 12px 12px 0;
  padding: 16px 18px;
}
.bl-flag.soon { border-left-color: var(--bl-warn); background: var(--bl-warn-bg); }
.bl-flag.monitor { border-left-color: var(--bl-sport); background: var(--bl-sport-bg); }

/* Поле с публичной ссылкой: адрес длинный, ломать его переносами нельзя. */
.bl-share-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  overflow-x: auto;
  white-space: nowrap;
}

/* Разбор печатают, чтобы взять с собой к врачу — кнопки и ссылки на бумаге лишние. */
@media print {
  .bl-no-print { display: none !important; }
}