/* ─────────────────────────────────────────────────────────────
   Текстовые страницы: оферта, поиск, вход в результаты, 404.
   ───────────────────────────────────────────────────────────── */

/* ── Правовой документ ──────────────────────────────────────── */
.doc { padding-bottom: 110px; }

.doc__grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}

/* Оглавление едет вместе со страницей */
.doc__toc {
  position: sticky;
  top: 24px;
  padding: 24px 26px 26px;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.doc__toc-title {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand);
}
.doc__toc ul { margin-top: 14px; }
.doc__toc li + li { margin-top: 10px; }
.doc__toc a {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}
.doc__toc a:hover { color: var(--brand); }

.doc__lead {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 32px;
  font-weight: 600;
  color: var(--ink);
}

.doc__section { margin-top: 40px; }
.doc__section:first-of-type { margin-top: 30px; }

.doc__title {
  margin-bottom: 14px;
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--ink);
  /* Якорь не должен уезжать под шапку при переходе из оглавления */
  scroll-margin-top: 24px;
}
.doc__body p {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  color: var(--muted);
}
.doc__list { margin-top: 12px; }
.doc__list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 26px;
  font-weight: 400;
  color: var(--muted);
}
.doc__list li + li { margin-top: 6px; }
.doc__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--brand);
  border-radius: 50%;
}

/* ── Результаты анализов ────────────────────────────────────────
   Два экрана в одной карточке: вход и список документов. Список шире
   формы, поэтому карточка меняет ширину вместе с экраном. */
.lab {
  max-width: 460px;
  margin: 0 auto;
  padding: 36px 38px 38px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: max-width 0.3s ease;
}
.lab:has(.lab__screen--wide:not([hidden])) { max-width: 860px; }
.lab__screen[hidden] { display: none; }

.lab__title {
  outline-offset: 4px;
  font-family: var(--font-ui);
  font-size: 21px;
  line-height: 30px;
  font-weight: 600;
  color: var(--ink);
}

/* Пока спрашиваем сервер, вошёл ли пациент */
.lab__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}
.lab__spin {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: lab-spin 0.7s linear infinite;
}
@keyframes lab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lab__spin { animation-duration: 2.4s; }
}

.lab__form { margin-top: 22px; }
.lab__field { display: block; }
.lab__field + .lab__field { margin-top: 14px; }
.lab__label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--muted);
}
.lab__input {
  width: 100%;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lab__input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.1);
}
.lab__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: center;
  margin-top: 22px;
  padding: 14px 24px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--white);
  background: var(--brand);
  border-radius: var(--radius-pill);
  transition: background 0.25s;
}
.lab__btn svg { width: 15px; height: 15px; flex: none; }
.lab__btn:hover { background: var(--brand-deep); }
.lab__btn:disabled { opacity: 0.6; cursor: default; }

/* Сообщение об ошибке и подсказки */
.lab__msg {
  margin-top: 16px;
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  color: #8a2b2b;
  background: #fdf0f0;
  border-radius: var(--radius-sm);
}
.lab__msg--ok { color: var(--brand-deep); background: var(--badge-bg); }
.lab__msg[hidden] { display: none; }

.lab__note {
  margin-top: 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.lab__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--brand-deep);
}
.lab__call svg { width: 16px; height: 16px; }

/* Когда JavaScript выключен: показываем это вместо вечного «Проверяем…» */
.lab__noscript p {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 25px;
  color: var(--muted);
}
.lab__noscript p:first-child {
  font-weight: 600;
  color: var(--ink);
}
.lab__noscript p + p { margin-top: 8px; }
/* ── Экран со списком ──────────────────────────────────────────── */
.lab__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lab__exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: var(--brand-deep);
  background: var(--badge-bg);
  border-radius: var(--radius-pill);
  transition: background 0.2s, color 0.2s;
}
.lab__exit svg { width: 14px; height: 14px; }
.lab__exit:hover { color: var(--white); background: var(--brand); }

.lab__filter {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 22px;
}
.lab__field--date { flex: 1 1 0; min-width: 0; }
.lab__show {
  flex: none;
  padding: 13px 26px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--white);
  background: var(--brand);
  border-radius: var(--radius-btn);
  transition: background 0.25s;
}
.lab__show:hover { background: var(--brand-deep); }

.lab__hint {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

/* Появляется, когда лаборатория отказала: возможно, истёк сеанс */
.lab__again {
  margin-top: 12px;
  padding: 11px 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: var(--brand-deep);
  background: var(--badge-bg);
  border-radius: var(--radius-pill);
  transition: background 0.2s, color 0.2s;
}
.lab__again:hover { color: var(--white); background: var(--brand); }
.lab__again[hidden] { display: none; }

/* Кнопка ждёт ответа: фокус остаётся на ней, повторное нажатие гасит скрипт */
.lab__btn.is-busy,
.lab__row-btn.is-busy,
.lab__show.is-busy { opacity: 0.6; cursor: progress; }

.lab__rows { margin-top: 20px; }
.lab__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.lab__row + .lab__row { margin-top: 10px; }
.lab__row-name {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
}
.lab__row-date {
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.lab__row-btn {
  flex: none;
  padding: 11px 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: var(--white);
  background: var(--brand);
  border-radius: var(--radius-pill);
  transition: background 0.2s;
}
.lab__row-btn:hover { background: var(--brand-deep); }
.lab__row-btn:disabled { opacity: 0.6; cursor: default; }

.lab__empty {
  margin-top: 20px;
  padding: 24px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.lab__empty[hidden] { display: none; }

/* ── Поиск по сайту ─────────────────────────────────────────── */
.srch { max-width: 780px; margin: 0 auto; }

.srch__field { position: relative; }
.srch__field > svg {
  position: absolute;
  left: 24px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.srch__input {
  width: 100%;
  padding: 18px 58px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 26px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(var(--brand-rgb), 0.2);
  border-radius: var(--radius-pill);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.srch__input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.1);
}
.srch__clear {
  position: absolute;
  right: 20px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  color: var(--muted);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.srch__clear svg { width: 12px; height: 12px; }
.srch__clear:hover { color: var(--ink); background: var(--line); }

.srch__meta {
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--muted);
}

.srch__results { display: grid; gap: 10px; margin-top: 26px; }
.srch__item {
  display: block;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.srch__item:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--brand-rgb), 0.4);
  box-shadow: 0 14px 30px rgba(var(--ink-rgb), 0.07);
}
.srch__kind {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand);
}
.srch__name {
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--ink);
}
.srch__desc {
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.srch__hit { background: rgba(var(--brand-rgb), 0.18); border-radius: 3px; }

/* ── 404 ────────────────────────────────────────────────────── */
.nf { padding: 190px 0 120px; }
.nf__inner { max-width: 720px; margin: 0 auto; text-align: center; }

.nf__code {
  font-family: var(--font-body);
  font-size: 120px;
  line-height: 1;
  font-weight: 700;
  color: rgba(var(--brand-rgb), 0.16);
}
.nf__title {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 44px;
  line-height: 54px;
  font-weight: 700;
  color: var(--ink);
}
.nf__text {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  color: var(--muted);
}

.nf__search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.nf__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--white);
  background: var(--brand);
  border-radius: var(--radius-pill);
  transition: background 0.25s, color 0.25s;
}
.nf__btn svg { width: 15px; height: 15px; flex: none; }
.nf__btn:hover { background: var(--brand-deep); }
.nf__btn--ghost {
  color: var(--brand-deep);
  background: var(--badge-bg);
}
.nf__btn--ghost:hover { color: var(--white); background: var(--brand); }

.nf__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 44px;
  text-align: left;
}
.nf__links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  transition: background 0.25s, color 0.25s;
}
.nf__links svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.nf__links a:hover { color: var(--brand); background: var(--badge-bg); }

/* ── Планшет ────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .doc { padding-bottom: 70px; }
  .doc__grid { grid-template-columns: 1fr; gap: 26px; }
  .doc__toc { position: static; }
  .doc__toc ul { columns: 2; column-gap: 24px; }

  .nf { padding: 60px 0 80px; }
  .nf__code { font-size: 88px; }
  .nf__title { font-size: 32px; line-height: 42px; }
}

/* ── Телефон ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .doc__toc { padding: 18px 20px 20px; }
  .doc__toc ul { columns: 1; }
  .doc__lead { font-size: 18px; line-height: 28px; }
  .doc__title { font-size: 18px; line-height: 26px; }

  .lab { padding: 24px 20px 26px; }
  .lab__title { font-size: 19px; line-height: 27px; }
  /* 16px — порог, ниже которого iOS зумит страницу при касании поля */
  .lab__input { font-size: 16px; }
  .lab__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Поля дат в строку не влезают — ставим их друг под другом */
  .lab__filter { flex-direction: column; align-items: stretch; gap: 10px; }
  .lab__show { width: 100%; padding: 14px 20px; }
  .lab__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .lab__row-btn { width: 100%; padding: 13px 20px; }
  .srch__input { padding: 15px 50px; font-size: 16px; }

  .nf { padding: 44px 0 60px; }
  .nf__code { font-size: 64px; }
  .nf__title { font-size: 25px; line-height: 34px; }
  .nf__text { font-size: 16px; line-height: 26px; }
  .nf__btn { flex: 1 1 100%; justify-content: center; }
  .nf__links { grid-template-columns: 1fr; }
}