/* ============================================================
   ФОРМЫ И СТРАНИЦЫ-СОСТОЯНИЯ — «Школа Юлии Корниловой»

   Подключается ПОСЛЕ site.css:
     <link rel="stylesheet" href="{% static 'css/forms.css' %}">   (блок extra_css)

   Что здесь:
     1. Общие примитивы полей — .field, .field-label, .field-hint, .field-error…
        Ими пользуются обе формы сайта: заявка (templates/leads/_lead_form.html)
        и подписка на материалы (templates/materials/partials/subscribe_form.html).
     2. Форма заявки: сетка полей, сегменты «куда написать», согласие, кнопка.
     3. Состояния: «отправляем», inline-успех, блок ошибок формы.
     4. Форма подписки: однострочная раскладка «поле + кнопка».
     5. Страницы-состояния: «Спасибо» и 404 (500 самодостаточна, стили у неё свои).

   Правила проекта: mobile-first, только существующие токены из :root site.css,
   новых цветов нет, контраст текста ≥ 4.5:1, границы полей ≥ 3:1,
   цели нажатия ≥ 44px, анимации отключаются под prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   1. ОБЩИЕ ПРИМИТИВЫ ПОЛЕЙ
   ============================================================ */

.form-wrap{ display: block; }

/* fieldset используется как обычный контейнер поля (радиогруппа) */
.field{ min-width: 0; border: 0; }

.field-label{
  display: block; padding: 0;
  font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--c-ink);
  margin-bottom: 6px;
}
/* Звёздочка обязательного поля: смысл дублируется атрибутом required */
.field-req{ margin-left: 3px; font-weight: 700; color: var(--c-note); }

/* Базовый вид ввода. `.field-input` — для разметки, где класс задан явно. */
.field > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field > select,
.field-input{
  width: 100%; height: 52px; padding: 0 16px;
  background: #FFFFFF; color: var(--c-ink);
  /* --c-muted (#6B6B6B) на белом = 5.33:1 — граница видна (WCAG 1.4.11);
     --line-strong (1.42:1) для полей запрещён. */
  border: 1.5px solid var(--c-muted);
  border-radius: var(--r-sm);
  /* 16px обязательно: при меньшем размере iOS зумит страницу на фокусе */
  font: 500 16px/1.4 var(--font-sans);
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
}
.field > textarea{
  width: 100%; min-height: 104px; padding: 14px 16px;
  background: #FFFFFF; color: var(--c-ink);
  border: 1.5px solid var(--c-muted); border-radius: var(--r-sm);
  font: 500 16px/1.5 var(--font-sans);
  resize: vertical;
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
}

.field ::placeholder{ color: var(--c-muted); opacity: 1; }  /* 5.33:1 */

/* Выпадающий список: своя стрелка (инлайновый data-URI, ни одного запроса) */
.field > select{
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

@media (hover: hover) and (pointer: fine){
  .field > input:not([type="checkbox"]):not([type="radio"]):hover,
  .field > select:hover,
  .field > textarea:hover,
  .field-input:hover{ border-color: var(--c-ink-2); }
}

.field > input:focus-visible,
.field > select:focus-visible,
.field > textarea:focus-visible,
.field-input:focus-visible{
  outline: 3px solid var(--focus-color); outline-offset: 2px;
  border-color: var(--c-ink);
}

/* Ошибка передаётся не только цветом: рамка + иконка + текст */
.field--invalid > input:not([type="checkbox"]):not([type="radio"]),
.field--invalid > select,
.field--invalid .field-input{
  border-color: var(--c-note); border-width: 2px; padding: 0 15.5px;
  box-shadow: 0 0 0 3px rgba(160, 92, 0, .12);
}
.field--invalid > textarea{
  border-color: var(--c-note); border-width: 2px; padding: 13.5px 15.5px;
  box-shadow: 0 0 0 3px rgba(160, 92, 0, .12);
}
.field--invalid > select{ padding-right: 43.5px; }

.field-hint{
  margin-top: 6px; max-width: none;
  font-size: var(--fs-caption); line-height: 1.45; color: var(--c-muted-strong);  /* 5.92:1 */
}
.field-hint a{
  font-weight: 600; color: var(--c-ink);
  text-decoration: underline; text-decoration-color: var(--c-brand);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}

.field-error{
  margin-top: 8px; max-width: none;
  display: flex; align-items: flex-start; gap: 8px;
  font-weight: 600; font-size: 14px; line-height: 1.4;
  color: var(--c-note);                                  /* 5.22:1 на белом, 4.84:1 на креме */
}
.field-error .icon{
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; stroke: var(--c-note);
}

/* Honeypot в разметке, где он текстовый: уводим за экран,
   а не display:none — так его не видно, но боты поле находят. */
.hp-field{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   2. ФОРМА ЗАЯВКИ
   ============================================================ */

.lead-form{ display: grid; gap: var(--sp-5); }

.form-grid{ display: grid; gap: 18px; }
@media (min-width: 640px){
  .form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .field--wide{ grid-column: 1 / -1; }
}

/* --- Куда написать: сегменты с иконками --- */
.field--channel{ margin: 0; padding: 0; }
.field--channel > .field-label{ margin-bottom: 10px; }

.seg-group{ display: grid; gap: 10px; }
@media (min-width: 480px){ .seg-group{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px){ .seg-group{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.seg{ position: relative; display: block; }
/* Нативная радиокнопка остаётся в дереве доступности и в порядке фокуса,
   но не видна: её роль играет .seg-box с собственной меткой-точкой. */
.seg input{
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.seg-box{
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 14px;
  background: #FFFFFF; border: 1.5px solid var(--c-muted); border-radius: var(--r-sm);
  font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--c-ink);
  transition: background-color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard);
}
/* Метка выбора — не цветовой признак: пустое кольцо → закрашенная точка */
.seg-mark{
  position: relative; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--c-muted-strong); color: var(--c-ink);
}
.seg-mark::after{
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: currentColor; opacity: 0; transform: scale(.5);
  transition: opacity var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}
.seg-logo{ width: 20px; height: 20px; flex-shrink: 0; fill: var(--c-muted-strong); }
.seg-icon{ width: 20px; height: 20px; flex-shrink: 0; }
.seg-text{ min-width: 0; }

.seg input:checked + .seg-box{ border-color: var(--c-ink); }
.seg input:checked + .seg-box .seg-mark{ border-color: var(--c-ink); }
.seg input:checked + .seg-box .seg-mark::after{ opacity: 1; transform: none; }
.seg input:focus-visible + .seg-box{ outline: 3px solid var(--focus-color); outline-offset: 2px; }

/* Тон выбранного канала — из уже существующих токенов мессенджеров */
.seg--tg   input:checked + .seg-box{ background: var(--c-tg-tint); }
.seg--wa   input:checked + .seg-box{ background: var(--c-wa-tint); }
.seg--max  input:checked + .seg-box{ background: var(--c-max-tint); }
.seg--phone input:checked + .seg-box{ background: var(--c-brand-tint); }
.seg--tg  .seg-logo{ fill: var(--c-tg); }
.seg--wa  .seg-logo{ fill: var(--c-wa); }
.seg--max .seg-logo{ fill: var(--c-max); }

@media (hover: hover) and (pointer: fine){
  .seg input:not(:checked):hover + .seg-box{ border-color: var(--c-ink-2); background: var(--s-cream); }
}
/* Режим высокой контрастности: тон фона там игнорируется, поэтому
   выбранный сегмент отмечается системным цветом выделения. */
@media (forced-colors: active){
  .seg input:checked + .seg-box{ border-color: Highlight; border-width: 2px; padding: 7.5px 13.5px; }
}

/* --- Согласие на обработку персональных данных --- */
.field--consent{ display: block; }
.consent{
  display: flex; align-items: flex-start; gap: 10px;
  padding-block: 11px;                       /* строка целиком ≥ 44px */
  font-size: 14px; line-height: 1.45; color: var(--c-ink-2); cursor: pointer;
}
.consent input{
  width: 22px; height: 22px; flex-shrink: 0; margin: 1px 0 0;
  accent-color: var(--c-brand); cursor: pointer;
}
.consent input:focus-visible{ outline: 3px solid var(--focus-color); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){
  .consent:hover{ color: var(--c-ink); }
}
.field--consent .field-hint{ margin-top: 2px; padding-left: 32px; }
.field--consent .field-error{ padding-left: 32px; }

/* --- Кнопка отправки --- */
.form-actions{ display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.form-submit{ width: 100%; }
.form-note{ max-width: none; font-size: var(--fs-caption); color: var(--c-muted-strong); }
@media (min-width: 560px){
  .form-actions{ flex-direction: row; align-items: center; gap: 20px; }
  .form-submit{ width: auto; min-width: 240px; }
  .form-note{ flex: 1; }
}

.form-fallback{ font-weight: 500; color: var(--c-ink-2); }
.form-fallback a{ font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   3. СОСТОЯНИЯ ФОРМЫ
   ============================================================ */

/* «Отправляем»: кнопка блокируется, вместо самолётика — крутилка */
.form-spinner{
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(28, 28, 28, .28); border-top-color: var(--c-ink);
  animation: form-spin 700ms linear infinite;
}
form.is-sending .form-spinner{ display: block; }
form.is-sending .form-submit .icon{ display: none; }
form.is-sending .form-submit{ opacity: .8; cursor: progress; }
form.is-sending .form-submit:active{ transform: none; }
@keyframes form-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  form.is-sending .form-spinner{ display: none; }   /* остаётся текст «Отправляем…» */
}

/* Сводка ошибок формы (не привязанных к полю) */
.form-errors{
  display: flex; align-items: flex-start; gap: 10px;
  background: #FFFFFF; border: 1px solid var(--line-strong);
  border-left: 4px solid var(--c-note); border-radius: var(--r-md);
  padding: 14px 16px;
  font-weight: 600; color: var(--c-ink);
}
.form-errors p{ max-width: none; }
.form-errors .icon{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; stroke: var(--c-note); }
.form-errors:focus{ outline: 3px solid var(--focus-color); outline-offset: 2px; }

/* Inline-успех: подставляется вместо формы скриптом forms.js */
.form-success{
  display: flex; align-items: flex-start; gap: 12px; max-width: none;
  background: #FFFFFF; border: 1px solid var(--line-strong);
  border-left: 4px solid var(--c-brand); border-radius: var(--r-md);
  padding: 18px 20px;
}
.form-success .icon-check{ width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.form-success-title{ max-width: none; font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.form-success-text{ max-width: none; margin-top: 6px; color: var(--c-ink-2); }
.form-success:focus{ outline: 3px solid var(--focus-color); outline-offset: 2px; }

/* ============================================================
   4. ФОРМА ПОДПИСКИ НА МАТЕРИАЛЫ
   Раскладка «поле + кнопка»; окружение блока (.subscribe-band, .sub-note,
   .sub-title) — за страницей материалов, здесь только сама форма.
   ============================================================ */

.sub-form{ margin-top: 18px; display: grid; gap: 12px; }
.field-row{ display: grid; gap: 12px; }
@media (min-width: 560px){
  .field-row{ grid-template-columns: 1fr auto; align-items: end; }
  .sub-submit{ width: auto; min-width: 180px; }
}
@media (min-width: 900px) and (max-width: 1023.98px){
  /* в двухколоночной полосе на планшете места мало — возвращаем одну колонку */
  .field-row{ grid-template-columns: 1fr; }
  .sub-submit{ width: 100%; }
}
.sub-form .form-success{ margin-top: 18px; }

/* ============================================================
   5. СТРАНИЦЫ-СОСТОЯНИЯ: «Спасибо» и 404
   ============================================================ */

.pagestate{ padding-block: var(--section-y); }
.pagestate-panel{
  max-width: 720px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* Галочка на странице «Спасибо» */
.pagestate-mark{
  width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
}
.pagestate-mark .icon-check{ width: 34px; height: 34px; }

/* Код ошибки: --c-note даёт 4.84:1 на креме, жёлтый здесь был бы нечитаем */
.pagestate-code{
  font-family: var(--font-serif); font-weight: 700; line-height: 1;
  font-size: clamp(3rem, 2.2rem + 3.4vw, 4.5rem);
  color: var(--c-note);
}
.pagestate-title{ margin-top: 12px; font-size: var(--fs-h2); }
.pagestate-panel .h2-dash{ margin-top: 14px; }
.pagestate-text{
  margin-top: 20px; max-width: 52ch;
  font-size: var(--fs-lead); line-height: 1.6; color: var(--c-ink-2);
}

.pagestate-contacts{
  margin-top: 28px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pagestate-contacts-lead{ max-width: none; font-size: var(--fs-small); color: var(--c-muted-strong); }
.pagestate-contacts .pills{ margin-top: 4px; }
/* Канал без ссылки в админке: подпись вместо битой ссылки */
.pill--muted{
  background: #FFFFFF; border: 1.5px solid var(--line-strong);
  color: var(--c-muted-strong); cursor: default;
}
.pill--muted svg{ fill: var(--c-muted-strong); }

.pagestate-actions{
  margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.pagestate-actions .btn{ width: 100%; }
@media (min-width: 560px){
  .pagestate-actions{ flex-direction: row; justify-content: center; gap: 24px; }
  .pagestate-actions .btn{ width: auto; }
}
.pagestate-link{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-inline: 4px;
  font-weight: 600; color: var(--c-ink); text-decoration: underline;
  text-decoration-color: var(--c-brand); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.pagestate-link .icon{ width: 18px; height: 18px; transition: transform 200ms var(--ease-standard); }
@media (hover: hover) and (pointer: fine){
  .pagestate-link:hover .icon{ transform: translateX(3px); }
}
.pagestate-note{ margin-top: 24px; font-size: var(--fs-small); color: var(--c-muted-strong); }
.pagestate-phone{
  font-weight: 700; color: var(--c-ink); white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--c-brand);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* Мессенджеры на /thanks/: до 480px — один столбец на всю ширину.
   На трёх пилюлях разной длины `flex-wrap` давал раскладку 1+2 («Telegram»
   отдельной строкой, ниже «WhatsApp» и «MAX») — это читается как ошибка вёрстки. */
@media (max-width: 480px){
  .pagestate-contacts .pills{ flex-direction: column; align-items: stretch; gap: 10px; }
  .pagestate-contacts .pill{ justify-content: center; width: 100%; }
}

/* Отписка от рассылки: кнопка на всю ширину панели, как остальные действия */
.unsub-form{ margin-top: 28px; width: 100%; display: flex; justify-content: center; }
.unsub-form .btn{ width: 100%; }
@media (min-width: 560px){ .unsub-form .btn{ width: auto; } }


/* ============================================================
   6. ЮРИДИЧЕСКИЕ ДОКУМЕНТЫ: /legal/<slug>/
   ============================================================ */

.legal-panel{ max-width: 860px; margin-inline: auto; }
.legal-kicker{
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--c-note);
}
.legal-title{ margin-top: 8px; font-size: var(--fs-h2); }
.legal-head .h2-dash{ margin-top: 14px; }
.legal-meta{ margin-top: 14px; font-size: var(--fs-small); color: var(--c-muted-strong); }

/* Предупреждение про черновик: тот же тон, что у блока ошибок формы */
.legal-draft{
  margin-top: 24px; display: flex; gap: 12px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--s-info); border: 1px solid var(--line-strong);
}
.legal-draft .icon{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; stroke: var(--c-note); }
.legal-draft p{ max-width: none; font-size: var(--fs-small); line-height: 1.55; color: var(--c-ink-2); }

.legal-toolbar{ margin-top: 20px; display: flex; gap: 12px; }
.legal-print{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  background: #FFFFFF; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  font: inherit; font-weight: 600; font-size: var(--fs-small); color: var(--c-ink); cursor: pointer;
}
.legal-print:hover{ border-color: var(--c-brand); }
.legal-print .icon{ width: 18px; height: 18px; }
/* Без JS кнопка печати бесполезна — не показываем её вовсе */
.no-js .legal-print{ display: none; }

.legal-toc{
  margin-top: 28px; padding: 18px 20px;
  background: var(--s-cream); border: 1px solid var(--line); border-radius: var(--r-md);
}
.legal-toc-title{ font-weight: 700; }
/* В site.css у списков снят маркер — здесь он нужен: это документ */
.legal-toc ol{ margin-top: 10px; padding-left: 20px; list-style: decimal; }
.legal-toc li + li{ margin-top: 6px; }
.legal-toc li{ font-size: var(--fs-small); }
.legal-toc-l3{ padding-left: 16px; }
.legal-toc a{ color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-toc a:hover{ color: var(--c-ink); text-decoration-color: var(--c-brand); }

.legal-body{ margin-top: 32px; }
.legal-body h2{
  margin-top: 36px; font-size: var(--fs-h3); line-height: var(--lh-heading);
  scroll-margin-top: 90px;
}
.legal-body h3{ margin-top: 24px; font-size: var(--fs-body); font-weight: 700; scroll-margin-top: 90px; }
.legal-body p{ margin-top: 14px; max-width: var(--measure); line-height: var(--lh-body); color: var(--c-ink-2); }
.legal-body ul,
.legal-body ol{ margin-top: 14px; padding-left: 22px; max-width: var(--measure); }
.legal-body li + li{ margin-top: 8px; }
.legal-body li{ line-height: var(--lh-body); color: var(--c-ink-2); }
.legal-body ul{ list-style: disc; }
.legal-body ol{ list-style: decimal; }
.legal-body strong{ color: var(--c-ink); }
.legal-body a{ color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-brand); text-underline-offset: 3px; }

.legal-foot{ margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal-others{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal-others a{
  font-size: var(--fs-small); font-weight: 600; color: var(--c-ink);
  text-decoration: underline; text-decoration-color: var(--c-brand); text-underline-offset: 3px;
}
.legal-back{ margin-top: 20px; }

/* Печать: остаётся только сам документ */
@media print{
  .legal-toolbar,
  .legal-toc,
  .legal-others,
  .legal-back{ display: none; }
  .legal-panel{ box-shadow: none; border: 0; padding: 0; }
  .legal-body a{ text-decoration: none; }
}