/* Анкета консультации сомнолога.

   ИСТОЧНИК — _shared/somnolog/somnolog.css. В public/ каждого сайта лежит копия,
   которую кладёт sync_somnolog.py. Копию не править: следующий прогон разносчика
   вернёт её назад, и правка исчезнет молча (так пропала первая правка карточек
   07.08.2026).

   ВИД ЗАДАН СЛОВАМИ АЙГУЛЬ 01.09.2026: «чётко, не размашисто, по-врачебному».
   Отсюда три решения, каждое против привычного продающего вида:

     · колонка узкая (34rem ≈ 545 px). Не для красоты: бланк, который читают
       сверху вниз одним проходом, не должен заставлять глаз возвращаться
       через весь экран. Широкая форма читается как анкета на сайте, узкая —
       как бланк у врача;
     · поля стоят вплотную, шаг 14 px вместо секционных 40. Воздух между
       полями — приём витрины, где каждый блок продаёт себя отдельно. В бланке
       он растягивает семь полей на два экрана телефона;
     · ни одной рамки, тени и заливки вокруг формы. Бланк — это строки, а не
       карточка.

   Что при этом НЕ уплотняется: высота поля и кнопки. 44 px — предел, ниже
   которого палец промахивается (var(--tap-min) в home.css, WCAG 2.5.5). Ровно
   на этом стоит вторая половина check_plotnost.py, и уплотнять «ещё немного»
   тут нельзя.

   Значения берутся из токенов сайта. Своих цветов и своих размеров файл не
   заводит: на HOME он должен выглядеть как HOME, на Med — как Med. */

.sm {
  /* 34rem — та же мера, что у kt-zapros (--measure 65ch), только уже: в бланке
     строки короткие, до 65 знаков не дотягивают, и полная мера дала бы пустую
     правую половину. */
  max-width: 34rem;
  margin: 0 auto;
  /* 02.09.2026: «плотнее межстрочные и плотнее вообще вся анкета — не
     размазывай». Поля страницы срезаны, промежутки граф уменьшены ниже. */
  padding: var(--space-3, 24px) var(--gutter, 32px) var(--space-4, 40px);
}

/* Заголовок анкеты набран ступенью h3 и шрифтом ТЕКСТА, а не крупным Playfair
   сайта. Крупная засечка во всю ширину — приём витрины: она зовёт читать
   дальше. Здесь читать дальше не надо, надо заполнять, и заголовок работает
   подписью к бланку. Тот же довод, по которому 28.08.2026 по слову Айгуль
   уменьшили заголовок формы на карточке товара.
   Проверено на живом: та же строка крупным Playfair вставала на 375 px в
   четыре строки и занимала треть экрана до первого поля. */
.sm h1 {
  font-family: var(--sans, inherit);
  font-size: var(--fs-h3, 1.375rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0 0 var(--space-2, 16px);
}

/* Строка под заголовком. Красной строки НЕ получает: по границе, названной
   Айгуль 29.08.2026, отступ достаётся тому, что читают подряд, а подпись под
   заголовком ищут глазами. В home.css в этой же группе исключений стоят
   .sec-head p и .hero .sub — та же роль. */
/* 02.09.2026, слово Айгуль: «Подбор бесплатный… — курсив и мельче». */
.sm .sm-lid {
  color: var(--slate, currentColor);
  font-style: italic;
  font-size: .9375rem;
  line-height: 1.4;
  margin: 0 0 var(--space-2, 16px);
  text-indent: 0;
}

/* Строка «зачем эти данные». Стоит над полями и набрана как проза — красную
   строку сохраняет намеренно: её читают подряд, а не ищут глазами. */
.sm .sm-zachem {
  margin: 0 0 var(--space-3, 24px);
  padding: 10px 14px;
  border-left: 2px solid var(--gold, currentColor);
  background: var(--bg2, transparent);
  /* 02.09.2026, слово Айгуль: «шрифт другой и мельче». Засечка отделяет
     пояснение от бланка: поля набраны рубленым, пояснение — нет. */
  font-family: var(--serif, Georgia, serif);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--slate, currentColor);
}

.sm form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Подпись графы — тот же ярлык, что в форме карточки: мелко, вразрядку, капсом.
   Читается как графа бланка, а не как заголовок раздела. Один класс на все виды
   граф — текстовую, числовую, выбор и снимок: иначе четыре одинаковых набора
   правил разошлись бы при первой же правке. */
.sm .sm-shapka {
  /* 02.09.2026, слово Айгуль: «не заглавными, но через Вам, ярче». Капс снят,
     разрядка убрана, цвет поднят с приглушённого до основного: подпись графы
     человек читает, а не опознаёт как ярлык. */
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink, currentColor);
  line-height: 1.25;
}

.sm label.sm-pole,
.sm .sm-vybor,
.sm .sm-foto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Подпись ОБЯЗАНА быть одним элементом внутри такого label. Голый текст рядом с
   вложенным <span> колоночный флекс разложил бы на две строки: «Возраст» и
   «(лет)» вставали друг под другом, пока разносчик не начал заворачивать
   подпись в .sm-shapka целиком (поймано на живом 01.09.2026). */

.sm input[type="text"],
.sm input[type="tel"],
.sm input[type="number"],
.sm textarea {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink, currentColor);
  /* 11 px по вертикали при 16 px строки — поле выходит 44 px вместе с рамкой,
     ровно в предел области нажатия. Ниже не опускать. */
  padding: 11px 14px;
  border: 1px solid var(--line, currentColor);
  border-radius: var(--radius-btn, 12px);
  background: var(--paper, transparent);
  width: 100%;
}
.sm textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

.sm input:focus, .sm textarea:focus {
  outline: 2px solid var(--gold, currentColor);
  outline-offset: 1px;
  border-color: transparent;
}

/* Возраст и вес — короткие числа, в строку. На телефоне тоже в строку: два
   поля по половине ширины занимают одну строку вместо двух, и это единственное
   место, где уплотнение ничего не стоит — обе графы короткие. */
.sm .sm-para { display: flex; gap: 12px; }
.sm .sm-para > label { flex: 1 1 0; min-width: 0; }

/* Единица измерения приписана к подписи графы, а не подставлена в поле
   заглушкой: заглушка в поле исчезает при первом нажатии, и человек уже не
   видит, спрашивают у него килограммы или фунты. */
.sm .sm-ed { text-transform: none; letter-spacing: 0; color: var(--muted, currentColor); }

/* Пол — две кнопки-переключателя вместо выпадающего списка. Список на телефоне
   открывает системное колесо и стоит трёх касаний; здесь одно. */
.sm .sm-knopki { display: flex; gap: 8px; }
.sm .sm-knopki label {
  flex: 1 1 0;
  min-height: var(--tap-min, 44px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, currentColor);
  border-radius: var(--radius-btn, 12px);
  cursor: pointer;
  background: var(--paper, transparent);
}
.sm .sm-knopki input { position: absolute; opacity: 0; pointer-events: none; }
.sm .sm-knopki input:checked + span { font-weight: 600; }
.sm .sm-knopki label:has(input:checked) {
  border-color: var(--gold, currentColor);
  box-shadow: inset 0 0 0 1px var(--gold, currentColor);
}
/* :has() поддержан не везде. Запасной путь — класс, который ставит скрипт:
   без него выбранный пол ничем не отличался бы от невыбранного, и человек
   нажимал бы дважды. */
.sm .sm-knopki label.sm-vybran {
  border-color: var(--gold, currentColor);
  box-shadow: inset 0 0 0 1px var(--gold, currentColor);
}
.sm .sm-knopki input:focus-visible + span { outline: 2px solid var(--gold, currentColor); outline-offset: 4px; }

/* Снимок. Своя кнопка вместо системной «Выберите файл»: системная на телефоне
   подписана по-английски и не говорит, что именно от человека хотят. */
.sm .sm-foto input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sm .sm-foto .sm-vzyat {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min, 44px);
  padding: 0 18px;
  border: 1px dashed var(--line, currentColor);
  border-radius: var(--radius-btn, 12px);
  cursor: pointer;
  color: var(--slate, currentColor);
  background: var(--paper, transparent);
}
.sm .sm-foto .sm-vzyat:hover { border-color: var(--gold, currentColor); }
.sm .sm-foto input[type="file"]:focus-visible + .sm-vzyat { outline: 2px solid var(--gold, currentColor); outline-offset: 2px; }

.sm .sm-podskazka {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--muted, currentColor);
  text-transform: none;
  letter-spacing: 0;
  text-indent: 0;
  margin: 0;
}

/* Показ выбранного снимка. Маленький — 72 px: это подтверждение «взялся тот
   файл», а не просмотр. Крупная фотография спины, развёрнутая на пол-экрана в
   кафе или в офисе, человеку не нужна. */
.sm .sm-vybran-fajl { display: none; align-items: center; gap: 10px; margin-top: 4px; }
.sm .sm-vybran-fajl.on { display: flex; }
.sm .sm-vybran-fajl img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line, currentColor);
}
.sm .sm-vybran-fajl .sm-imya {
  font-size: .875rem; color: var(--slate, currentColor);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sm .sm-snyat {
  font: inherit; font-size: .875rem; background: none; border: 0;
  color: var(--gold-deep, currentColor); cursor: pointer;
  text-decoration: underline; padding: 8px 4px; margin-left: auto;
}

/* Согласие. Отметка крупнее обычной: по маленькому квадрату на телефоне не
   попасть, а нажать её обязан сам человек — за него этого не сделает никто. */
.sm .sm-soglasie {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .875rem; line-height: 1.45;
  color: var(--slate, currentColor);
  text-transform: none; letter-spacing: 0;
  margin-top: 2px;
}
.sm .sm-soglasie input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; }
/* Ссылка на политику обязана ВЫГЛЯДЕТЬ ссылкой. В общем тексте согласия она
   набрана тем же цветом, и без подчёркивания человек её не видит — а именно на
   неё он и должен нажать, прежде чем отметить согласие на передачу данных о
   здоровье. Чек-лист нового сайта, раздел A: согласие перечисляет поля и
   получателей, а документ, где это расписано, должен открываться. */
.sm .sm-soglasie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.sm .sm-otpravit {
  font: inherit; font-weight: 600;
  min-height: var(--tap-min, 44px);
  padding: 12px 22px;
  border: 0; border-radius: var(--radius-btn, 12px);
  background: var(--ink, currentColor); color: var(--bg, #fff);
  cursor: pointer;
  margin-top: var(--space-1, 8px);
}
.sm .sm-otpravit:disabled { opacity: .55; cursor: not-allowed; }

/* Строка при заблокированной кнопке. Заблокированная кнопка без объяснения
   читается как сломанный сайт — человек уходит, так и не поняв, чего от него
   хотели. Строка исчезает, как только оба снимка приложены. */
.sm .sm-zamok {
  margin: var(--space-1, 8px) 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--gold-deep, currentColor);
  text-indent: 0;
}
.sm .sm-zamok[hidden] { display: none; }

.sm .sm-status { margin: 0; font-size: .9375rem; line-height: 1.45; text-indent: 0; }
.sm .sm-status[hidden] { display: none; }
.sm .sm-status.err { color: var(--color-error, #a5321f); }
/* Запасной выход в WhatsApp живёт внутри строки сбоя. Подчёркнут: это
   единственный путь, который у человека остался, и он должен читаться как
   ссылка, а не как часть предложения. */
.sm .sm-status.err a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sm .sm-status.ok  { color: var(--color-success, #3d6b3d); }

/* Экран телефона. Боковой отступ меньше — на 375 px тридцать два пикселя с
   каждой стороны съедают шестую часть строки. */
@media (max-width: 640px) {
  .sm { padding: var(--space-3, 24px) 20px var(--space-4, 40px); }
}