/*
 * Фирменный стиль ATEK: зелёная палитра логотипа + Mulish. План 003.
 *
 * Форма живёт на отдельном домене (forms.awt.kz), человек попадает сюда кликом с awt.kz —
 * она обязана читаться как продолжение сайта, иначе переход становится точкой отвала.
 * При этом заполняемость пальцем (план 002) важнее оформления: размеры зон нажатия,
 * 16px базового шрифта и 44px `--tap` — результат 002, перекраска их не трогает.
 *
 * Мобильная раскладка делается CSS, а не JS: переключение раскладки кодом означало бы пересборку
 * DOM при повороте телефона — потеря фокуса, каретки, а при ошибке и введённого. JS про ширину
 * экрана не знает и слушателя `resize` не имеет.
 */

/* Шрифт — локальными файлами, без обращения к CDN Google по сети. Внешний запрос тормозит
   первый экран, спорит с security-заголовками Caddy и водит персданные клиента мимо стороннего
   CDN. Mulish — переменный шрифт: один файл на подмножество покрывает все веса 200–1000,
   поэтому файлов два (латиница + кириллица), а не шесть. `unicode-range` следит, чтобы
   кириллический файл не грузился ради латиницы и наоборот. */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/mulish-var-latin.woff2') format('woff2');
  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: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/fonts/mulish-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Бренд. Яркий набор из логотипа: Pantone 349 C / 362 C.
     Белый на #178420 — 4.82:1, WCAG AA проходит.
     Белый на #3BA21B — 3.30:1, для текста НЕ проходит: это цвет только для декора. */
  --brand: #178420;         /* Pantone 349 C — кнопки, ссылки, фокус, галочки */
  --brand-2: #3BA21B;       /* Pantone 362 C — только градиент и декор, текста на нём быть не должно */
  --brand-dark: #0F6B18;    /* затемнение 349 C — hover/active */
  --brand-tint: #EAF5EA;    /* светлая подложка — блок согласия */

  --accent: var(--brand);   /* акцент формы = бренд; имя оставлено, чтобы не трогать полфайла */
  --text: #1c2024;
  --muted: #5c6570;
  --line: #d5dbe1;
  --error: #b3261e;
  --bg: #ffffff;
  --tap: 44px;              /* минимальная область нажатия */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 'Mulish', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* 16px — не вкусовщина: при меньшем размере Safari на iOS зумит страницу при фокусе в поле,
     и человек оказывается на увеличенной анкете, которую надо отматывать руками. */
}

/* --- шапка бренда ---
   Живёт в index.html вне #app: движок формы очищает только #app, поэтому шапка переживает
   и рендер листа, и экран «спасибо», и фатальную ошибку. */

.site-head {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%) 1;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-head-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Явные width/height у <img> в разметке держат место до загрузки (без сдвига layout),
   а высота здесь пересчитывается по пропорции 770×343 (фирменный пакет ATEK). */
.site-logo-link {
  flex: 0 0 auto;
  display: block;
  line-height: 0;   /* иначе строчный <img> тянет за собой хвост базовой линии */
}
.site-logo {
  width: 180px;
  height: auto;
}
/* Ссылка назад на сайт — прижата к правому краю колонки. Область нажатия полные 44px:
   в отличие от подвала, это единственный выход со страницы, промахиваться по нему нельзя. */
.site-back {
  margin-left: auto;
  color: var(--brand);
  font-size: 14px;
  display: flex;
  align-items: center;
  min-height: var(--tap);
}

/* --- подвал с реквизитами ---
   Пара к шапке: тоже статика в index.html вне #app, чтобы контакты пережили аварийный экран.
   Оформление намеренно тихое — подвал не должен спорить с кнопкой отправки: текст --muted,
   отбивка --line, цветом выделены только ссылки. Не липкий: `position: fixed` съел бы высоту
   экрана у анкеты на 45 полей. Колонка — те же 720px, что у .page и .site-head-inner. */

.site-foot {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.site-foot-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}
.foot-org { margin: 0 0 10px; font-weight: 600; color: var(--text); }
/* Две колонки, пока влезают; на узком экране `wrap` сам ставит их друг под друга. */
.foot-cols { display: flex; flex-wrap: wrap; gap: 8px 48px; }
.foot-list { margin: 0; padding: 0; list-style: none; }
.foot-list li { margin: 0 0 4px; }
/* Область нажатия у ссылок-телефонов: на телефоне это основной способ связаться. */
.site-foot a {
  color: var(--brand);
  display: inline-block;
  padding: 3px 0;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* Semibold 600 — по брендбуку (Proxima Nova Semibold, здесь её бесплатная замена Mulish). */
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 8px; font-weight: 600; }
h2 { font-size: 19px; margin: 32px 0 4px; font-weight: 600; }
.subtitle, .step-hint, .hint, .small { color: var(--muted); font-size: 14px; }
.subtitle { margin: 0 0 8px; }
.step-hint { margin: 0 0 16px; }

.loading { color: var(--muted); }

/* --- поля --- */

.field { margin: 0 0 18px; }
.field[hidden] { display: none; }

.label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}
.req { color: var(--error); }
.hint { margin: -2px 0 6px; }

input[type=text], input[type=tel], input[type=email], input[type=date],
input[type=datetime-local], input[type=file], textarea, select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
textarea { resize: vertical; min-height: 96px; }

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color: var(--error);
}
.field-error {
  color: var(--error);
  font-size: 14px;
  margin-top: 4px;
  min-height: 0;
}
.field-error:empty { display: none; }

/* Галочка: подпись справа, вся строка кликабельна, область нажатия не меньше 44 px. */
.field-inline .inline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
}
.field-inline .label { margin: 0; font-weight: 500; }
input[type=checkbox], input[type=radio] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.choice-group { display: flex; flex-direction: column; gap: 4px; }
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  cursor: pointer;
}

/* Число с единицей: поле тянется, выбор единицы — по содержимому. */
.with-unit-row { display: flex; gap: 8px; }
.with-unit-row input { flex: 1 1 auto; }
.with-unit-row select.unit { flex: 0 0 auto; width: auto; min-width: 110px; }
.unit-hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
.unit-hint:empty { display: none; }

.dimensions { display: flex; gap: 8px; }
.dimension { flex: 1 1 0; min-width: 0; }
.dimension label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }

/* --- свёрнутое поле (`collapsed`) ---
   Заголовок — <summary>, поэтому те же размеры, что у .label, плюс область нажатия 44 px:
   это единственный способ добраться до содержимого. */
.field-fold > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  color: var(--accent);
}
/* Пометка в подписи: сколько внутри данных. Видна и когда блок свёрнут — иначе человек,
   заполнивший часть таблицы и свернувший её, признака своих данных не увидит вовсе. */
.field-badge {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  white-space: nowrap;
}
.field-badge:empty { display: none; }

/* --- таблица анализа воды (`water_table`) ---
   Раскладка целиком здесь: JS про ширину экрана не знает. Разметка одна и та же всегда,
   меняется только CSS — узлы те же самые, поэтому поворот телефона физически не может
   потерять фокус, каретку или введённое.

   По умолчанию (узкий экран) строка — карточка: подпись параметра сверху, под ней два поля
   со своими подписями друг под другом. Рядом на 375 px они дают ~140 px на поле вместе
   с подписью: попасть пальцем можно, прочитать нельзя. */

.wt-note { margin: 4px 0 10px; color: var(--muted); font-size: 14px; }
.wt-head { display: none; }

.wt-row { padding: 10px 0; border-top: 1px solid var(--line); }
.wt-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 15px;
  /* Длинная подпись без пробелов не имеет права распереть колонку — это прямой путь
     к горизонтальной прокрутке. */
  overflow-wrap: anywhere;
}
.wt-unit { color: var(--muted); font-weight: 400; font-size: 13px; white-space: nowrap; }

.wt-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wt-cell + .wt-cell { margin-top: 6px; }
.wt-col { flex: 0 0 8.5em; color: var(--muted); font-size: 14px; }
/* `min-width: 0` обязателен: у <input> есть собственный размер по умолчанию (size=20),
   и внутри flex/grid он до нуля не сжимается — поле распирает строку наружу.
   16px — не вкусовщина: при меньшем Safari на iOS зумит страницу при фокусе. */
.water input {
  width: 100%;
  min-width: 0;
  font-size: 16px;
}

/* Широкий экран — три колонки с общей шапкой. Брейкпойнт свой, не общий 480: у таблицы
   ограничение другое. При 481 px на колонку параметра остаётся ~150 px, и «Окисляемость
   перманганатная» ломается в четыре строки. Колонки выравниваются между строками без subgrid:
   две правые заданы фиксированной шириной, левая забирает остаток. */
@media (min-width: 600px) {
  .wt-head, .wt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10rem 10rem;
    gap: 8px;
    align-items: center;
  }
  .wt-head { color: var(--muted); font-size: 13px; padding-bottom: 6px; }
  /* Единица прижимается к названию, а не улетает к правому краю широкой колонки: оторванная
     на 300 px «мг/л» читается как подпись соседней колонки, а не как единица параметра. */
  .wt-name { margin-bottom: 0; justify-content: flex-start; }
  .wt-cell + .wt-cell { margin-top: 0; }
  /* Подпись колонки на широком экране даёт шапка. Убираем её с глаз, но НЕ из документа:
     `display: none` вырезал бы её и из дерева доступности, а она — подпись поля. */
  .wt-col {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.field-skipped {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
}
.field-skipped .label { color: var(--text); }
.field-skipped .note { font-size: 14px; }

/* --- honeypot ---
   Уводим за экран, а не `display:none`: часть ботов такие поля пропускает, и приманка
   перестаёт работать. `tabindex="-1"` и `aria-hidden` — чтобы под неё не попал живой человек
   с клавиатурой или скринридером. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* --- согласие --- */

.consent {
  margin: 24px 0 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--brand-tint);
}
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--tap);
  cursor: pointer;
}
.consent-label span { padding-top: 1px; }
.consent.has-error { border-color: var(--error); }
.consent-broken { background: #fdf2f2; border-color: var(--error); }

.consent-text { margin-top: 10px; }
.consent-text summary {
  cursor: pointer;
  color: var(--accent);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.consent-body {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}
.consent-body h2, .consent-body h3 { font-size: 15px; margin: 12px 0 4px; }
.consent-body p, .consent-body li { margin: 6px 0; }

/* --- подвал и статусы --- */

.form-footer { margin-top: 24px; }
/* Заливка сплошная и только --brand. Градиент 349→362 здесь запрещён осознанно: белым по
   #3BA21B контраст 3.30:1, нижняя часть подписи оказалась бы нечитаемой (WCAG AA — 4.5:1). */
.submit {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.submit:hover:not(:disabled) { background: var(--brand-dark); }
.submit:active:not(:disabled) { background: var(--brand-dark); }
.submit:disabled { background: #b6bcc2; cursor: default; }
.form-status { margin-top: 10px; color: var(--error); font-size: 15px; }
.form-status:empty { display: none; }

.notice {
  margin: 16px 0;
  padding: 12px 14px;
  background: #fff8e6;
  border: 1px solid #e8d9a8;
  border-radius: 10px;
  font-size: 14px;
}
.notice p { margin: 0 0 8px; }
.link {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
  min-height: 32px;
}

.thanks, .fatal { padding: 24px 0; }
.thanks a, .fatal a { color: var(--accent); }
.turnstile { margin: 16px 0; }

/* На узком экране ничего не режем и не прокручиваем вбок: горизонтальный скролл на телефоне —
   худший из вариантов, половина полей всегда за краем. */
@media (max-width: 480px) {
  .page { padding: 16px 12px 48px; }
  .site-head-inner { padding: 12px; gap: 10px; }
  .site-logo { width: 135px; }
  .site-back { font-size: 13px; }
  .site-foot-inner { padding: 16px 12px 24px; }
  .foot-cols { gap: 0; }
  h1 { font-size: 21px; }
  .dimensions { flex-direction: column; }
  .with-unit-row { flex-wrap: wrap; }
  .with-unit-row select.unit { width: 100%; }
}