/*
 * Анкета — модальное окно (таск 03). Компонент «Модальное окно» и «Поле формы» из design.md.
 * Только токены :root из design.md (их подключает css/style.css); своих цветов нет.
 * Стили замкнуты на .modal, чтобы не спорить со стилями лендинга.
 * Форматы: ≥ 1024 — окно 610 px по центру; 768–1023 — лист снизу до 90svh; < 768 — полноэкранный лист.
 */

html.survey-open,
html.survey-open body { overflow: hidden; }

/* ---------- панель ---------- */

dialog.modal {
  --modal-pad: var(--space-2xl);
  box-sizing: border-box;
  width: min(var(--modal-w), 100% - 2 * var(--space-gutter));
  max-width: none;               /* сброс встроенного calc(100% - 6px - 2em) */
  max-height: 89svh;
  margin: auto;
  padding: 0 var(--modal-pad);
  overflow: auto;
  overscroll-behavior: contain;
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 80% 55% at 50% 100%, rgb(var(--rgb-copper) / 0.28), transparent 70%),
    var(--color-glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  backdrop-filter: blur(var(--glass-blur-strong));
  box-shadow: var(--shadow-panel);
  color: var(--text-primary);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  scrollbar-width: thin;
  scrollbar-color: var(--color-line) transparent;
}
dialog.modal *, dialog.modal *::before, dialog.modal *::after { box-sizing: border-box; }
dialog.modal :where(h2, h3, p) { margin: 0; }
dialog.modal a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.2em; }
dialog.modal a:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }

dialog.modal::backdrop {
  background: var(--color-overlay);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* ---------- движение: «восход» / «заход» ---------- */

dialog.modal[open] { animation: survey-panel-in-rise var(--dur-5) var(--ease-out); }
dialog.modal[open]::backdrop { animation: survey-backdrop-in var(--dur-5) var(--ease-out); }
dialog.modal.is-closing { animation: survey-panel-out-rise var(--dur-4) var(--ease-in-out) forwards; pointer-events: none; }
dialog.modal.is-closing::backdrop { animation: survey-backdrop-out var(--dur-4) var(--ease-in-out) forwards; }

@keyframes survey-panel-in-rise {
  from { clip-path: circle(0% at 50% 100%); translate: 0 var(--reveal-shift); }
  to   { clip-path: circle(150% at 50% 100%); translate: 0 0; }
}
@keyframes survey-panel-out-rise {
  from { clip-path: circle(150% at 50% 100%); translate: 0 0; }
  to   { clip-path: circle(0% at 50% 100%); translate: 0 var(--reveal-shift); }
}
@keyframes survey-panel-in-sheet { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes survey-panel-out-sheet { from { translate: 0 0; } to { translate: 0 100%; } }
@keyframes survey-panel-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes survey-panel-out-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes survey-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes survey-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- шапка: микроподпись, двухголосый заголовок, «×» ---------- */

.modal .modal__head {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: var(--space-s) var(--space-m);
  margin: 0 calc(-1 * var(--modal-pad)) var(--space-l);
  padding: var(--modal-pad) var(--modal-pad) var(--space-m);
  background: var(--color-glass-strong);
  border-bottom: 1px solid transparent;
}
.modal .modal__handle {
  display: none; grid-column: 1 / -1; justify-self: center;
  width: var(--space-xl); height: var(--space-2xs);
  border-radius: var(--radius-pill); background: var(--color-line);
}
.modal .caption {
  grid-column: 1; align-self: center;
  font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-sans);
  letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--text-tertiary);
}
.modal .h-duo {
  grid-column: 1;
  font: var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-sans);
  letter-spacing: var(--ls-h2); color: var(--text-primary);
}
.modal .h-duo__accent {
  display: block;
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-accent);
  font-size: var(--fs-accent); line-height: var(--lh-accent); letter-spacing: var(--ls-accent);
  color: var(--text-primary);
}
.modal .icon-btn {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: var(--control-touch); height: var(--control-touch); padding: 0;
  border: 1px solid var(--color-line); border-radius: var(--radius-circle);
  background: transparent; color: var(--text-primary); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.modal .icon-btn:hover { border-color: var(--color-line-strong); background: var(--color-line-subtle); }
.modal .icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- тело: вступление, форма, «Спасибо» ---------- */

.modal .modal__body { display: grid; gap: var(--space-xl); padding-bottom: var(--modal-pad); }
.modal .modal__loading { color: var(--text-secondary); }
.modal .modal__intro { display: grid; gap: var(--space-m); }
.modal .modal__lead { color: var(--text-secondary); }
.modal .modal__why { border-top: 1px solid var(--color-line-subtle); border-bottom: 1px solid var(--color-line-subtle); }
.modal .modal__why summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  min-height: var(--control-touch); padding-block: var(--space-s);
  font-weight: var(--fw-button); color: var(--text-primary); cursor: pointer; list-style: none;
}
.modal .modal__why summary::-webkit-details-marker { display: none; }
.modal .modal__why summary::after {
  content: ""; flex: none; width: var(--space-s); height: var(--space-s);
  border-right: 1.5px solid var(--color-beige); border-bottom: 1.5px solid var(--color-beige);
  rotate: 45deg; translate: 0 -25%;
  transition: rotate var(--dur-3) var(--ease-out);
}
.modal .modal__why[open] summary::after { rotate: -135deg; translate: 0 25%; }
.modal .modal__why summary:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }
.modal .modal__why p { padding-bottom: var(--space-m); color: var(--text-secondary); }

.modal .modal__form { display: grid; gap: var(--space-l); }
dialog.modal [hidden] { display: none !important; }
/* Поле-ловушка для ботов: человек его не видит и не может на него попасть */
.modal .modal__trap {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.modal .modal__note { font: var(--fw-small) var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-tertiary); }

/* Поле формы — design.md «Поле формы» */
.modal .field { display: grid; gap: var(--space-s); }
.modal .field__label { font: var(--fw-nav) var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-secondary); }
.modal .field__hint { margin-top: calc(-1 * var(--space-xs)); font: var(--fw-small) var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-tertiary); }
.modal .field__input {
  width: 100%; min-width: 0; height: var(--control-lg); margin: 0; padding: 0 var(--space-l);
  background: var(--color-field); color: var(--text-primary);
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.modal .field__input::placeholder { color: var(--text-tertiary); }
.modal .field__input:hover { border-color: var(--color-line-strong); }
.modal .field__input:focus-visible,
.modal .field__input:focus { outline: none; border-color: var(--color-beige); box-shadow: var(--glow-blue); }
.modal .field__input[aria-invalid="true"] { background: var(--color-copper-tint); border-color: var(--color-copper); }
.modal .field__input:disabled { opacity: 0.45; cursor: not-allowed; border-style: dashed; }
.modal textarea.field__input { height: auto; min-height: var(--space-4xl); padding: var(--space-m) var(--space-l); resize: vertical; }
.modal .field__error { font: var(--fw-body) var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-primary); }
.modal .field__error::before {
  content: ""; display: inline-block; width: var(--space-s); aspect-ratio: 1; margin-right: var(--space-s);
  border-radius: var(--radius-circle); background: var(--color-copper);
}

/* Select: стрелка — уголок из двух бежевых рамок на обёртке */
.modal .field__control { position: relative; display: block; }
.modal .field__control::after {
  content: ""; position: absolute; right: var(--space-l); top: 50%;
  width: var(--space-s); height: var(--space-s);
  border-right: 1.5px solid var(--color-beige); border-bottom: 1.5px solid var(--color-beige);
  rotate: 45deg; translate: 0 -75%; pointer-events: none;
}
.modal select.field__input { appearance: none; -webkit-appearance: none; padding-right: var(--space-2xl); cursor: pointer; }
.modal select.field__input option { background: var(--color-navy); color: var(--text-primary); }

/* Чекбокс согласия — design.md «Select/Чекбокс» */
.modal .field--check { gap: 0; }
.modal .check-label {
  display: flex; align-items: flex-start; gap: var(--space-m);
  min-height: var(--control-touch); padding-block: var(--space-s);
  cursor: pointer;
}
.modal .check {
  flex: none; appearance: none; -webkit-appearance: none; margin: 0.15em 0 0;
  width: var(--space-l); height: var(--space-l);
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs);
  background: var(--color-field); cursor: pointer; position: relative;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.modal .check:hover { border-color: var(--color-beige); }
.modal .check:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal .check:checked { background: var(--accent-primary); border-color: var(--accent-primary); }
.modal .check:checked::before {
  content: ""; position: absolute; left: 27%; top: 12%; width: 30%; height: 55%;
  border-right: 1.5px solid var(--color-beige); border-bottom: 1.5px solid var(--color-beige);
  rotate: 40deg;
}
.modal .check[aria-invalid="true"] { border-color: var(--color-copper); }
.modal .check-text { color: var(--text-secondary); font: var(--fw-body) var(--fs-small)/var(--lh-small) var(--font-sans); }
.modal .check-link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--color-beige); text-decoration: underline; text-underline-offset: 0.2em;
}
.modal .check-link:hover { color: var(--text-primary); }
.modal .check-link:focus-visible { outline: none; border-radius: var(--radius-xs); box-shadow: var(--focus-ring); }
.modal .field--check .field__error { margin-left: calc(var(--space-l) + var(--space-m)); }

/* Кнопки — design.md «Кнопки» */
.modal .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-s);
  min-height: var(--control-lg); padding: 0 var(--space-xl);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: var(--fw-button) var(--fs-button)/var(--lh-button) var(--font-sans); letter-spacing: var(--ls-button);
  color: var(--text-primary); cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out), translate var(--dur-1) var(--ease-out);
}
.modal .btn:active:not(:disabled) { translate: 0 1px; }
.modal .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal .btn--primary { background: var(--accent-primary); }
.modal .btn--primary:hover:not(:disabled) { background: var(--color-copper-deep); box-shadow: var(--glow-copper); }
.modal .btn--ghost { background: transparent; border-color: var(--color-line-strong); }
.modal .btn--ghost:hover { background: var(--color-line-subtle); border-color: var(--color-beige); }
.modal .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.modal .btn[aria-busy="true"], .modal form[aria-busy="true"] .btn--primary { cursor: progress; }

.modal .modal__actions { display: grid; justify-items: start; gap: var(--space-m); padding-top: var(--space-s); }
.modal .modal__status:empty { display: none; }
.modal .modal__status { font: var(--fw-body) var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--text-primary); }
.modal .modal__status.is-error {
  padding: var(--space-m) var(--space-l);
  background: var(--color-copper-tint); border: 1px solid var(--color-copper); border-radius: var(--radius-m);
  font-size: var(--fs-body); line-height: var(--lh-body);
}

.modal .modal__thanks { display: grid; gap: var(--space-l); justify-items: center; text-align: center; padding-block: var(--space-xl); }
.modal .modal__thanks-title { font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); }
.modal .modal__thanks-title:focus { outline: none; }
.modal .modal__thanks-text { display: grid; gap: var(--space-m); color: var(--text-secondary); }

/* Подтверждение закрытия при введённых данных — прилипает к низу панели */
.modal .modal__confirm {
  position: sticky; bottom: 0; z-index: 3;
  display: grid; gap: var(--space-m);
  margin: 0 calc(-1 * var(--modal-pad));
  padding: var(--space-l) var(--modal-pad) calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
  background: var(--color-glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  backdrop-filter: blur(var(--glass-blur-strong));
  border-top: 1px solid var(--color-line);
}
.modal .modal__confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-m); }

/* ---------- вид документа внутри модалки (js/legal.js) ---------- */
/* Бежит поверх остальных детей диалога на всю его ширину/высоту: containing block для
   position:absolute — это padding-box диалога, а его внешний край совпадает с border-box
   (рамки у диалога нет), так что inset:0 покрывает диалог целиком, включая зону паддинга
   --modal-pad — поэтому свой горизонтальный паддинг тем же токеном возвращаем в head/body
   ниже. Отрицательные отступы (уход ЗА padding-box) не нужны и раздувают scrollWidth
   диалога — горизонтальная прокрутка появляется даже без видимого переполнения. */

dialog.modal.legal-open > :not(.legal-view) { display: none !important; }
.modal .legal-view {
  position: absolute; inset: 0;
  z-index: 6; display: flex; flex-direction: column;
  background: var(--color-glass-strong);
  animation: legal-view-in var(--dur-3) var(--ease-out);
}
.modal .legal-view.is-leaving { animation: legal-view-out var(--dur-2) var(--ease-in-out) forwards; }
@keyframes legal-view-in { from { translate: var(--space-2xl) 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes legal-view-out { from { translate: 0 0; opacity: 1; } to { translate: var(--space-2xl) 0; opacity: 0; } }

.modal .legal-view__head {
  position: sticky; top: 0; z-index: 1; flex: none;
  display: flex; align-items: center; gap: var(--space-m);
  padding: var(--modal-pad) var(--modal-pad) var(--space-m);
  background: var(--color-glass-strong);
  border-bottom: 1px solid var(--color-line-subtle);
}
.modal .legal-view__back { flex: none; }
.modal .legal-view__title {
  flex: 1 1 auto; margin: 0; min-width: 0;
  font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3);
  color: var(--text-primary);
}
.modal .legal-view__title:focus { outline: none; }
.modal .legal-view__body {
  flex: 1 1 auto; overflow: auto; overscroll-behavior: contain;
  padding: var(--space-l) var(--modal-pad) calc(var(--modal-pad) + env(safe-area-inset-bottom, 0px));
  display: grid; gap: var(--space-m); align-content: start;
  color: var(--text-secondary);
}
.modal .legal-view__body p { margin: 0; }
.modal .legal-view__body ul { margin: 0; padding-left: var(--space-xl); display: grid; gap: var(--space-s); }

/* Диалог без вида документа держит высоту по контенту (max-height — только потолок).
   .legal-view сам вне потока (position:absolute), а на время его показа все остальные дети
   диалога — display:none (см. выше), поэтому «контента» для auto-высоты не остаётся и панель
   схлопывается до пары пикселей. На время показа документа фиксируем высоту явно — тем же
   значением, что и max-height на этой ширине (на телефоне высота и так задана явно, 100svh). */
dialog.modal.legal-open { height: 89svh; }

/* ---------- планшет: 1024–1199 — окно по центру, поле 34 px ---------- */

@media (min-width: 1024px) and (max-width: 1199.98px) {
  dialog.modal { --modal-pad: var(--space-xl); }
}

/* ---------- планшет-портрет 768–1023 и телефон: лист снизу ---------- */

@media (max-width: 1023.98px) {
  dialog.modal {
    --modal-pad: var(--space-xl);
    width: 100%;
    max-width: 100%;
    max-height: 90svh;
    margin: auto 0 0;
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  dialog.modal.legal-open { height: 90svh; }
  dialog.modal[open] { animation: survey-panel-in-sheet var(--dur-5) var(--ease-out); }
  dialog.modal.is-closing { animation: survey-panel-out-sheet var(--dur-4) var(--ease-in-out) forwards; }
  .modal .modal__body { padding-bottom: calc(var(--modal-pad) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- телефон: полноэкранный лист ---------- */

@media (max-width: 767.98px) {
  dialog.modal {
    --modal-pad: var(--space-l);
    height: 100svh;
    max-height: none;
    margin: 0;
    border: 0;                   /* лист во весь экран — кромка не нужна */
  }
  .modal .modal__head { padding-top: var(--space-m); border-bottom-color: var(--color-line-subtle); }
  .modal .modal__handle { display: block; }
  .modal .h-duo { font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); }
  .modal .modal__form { gap: var(--space-m); }
  .modal .modal__body { gap: var(--space-l); padding-bottom: 0; }
  .modal .modal__thanks { padding-bottom: calc(var(--modal-pad) + env(safe-area-inset-bottom, 0px)); }
  .modal .modal__actions {
    position: sticky; bottom: 0; z-index: 2;
    justify-items: stretch;
    margin: 0 calc(-1 * var(--modal-pad));
    padding: var(--space-m) var(--modal-pad) calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
    background: var(--color-glass-strong);
    border-top: 1px solid var(--color-line-subtle);
  }
  .modal .modal__actions .btn, .modal .modal__thanks .btn { width: 100%; }
  .modal .modal__confirm-actions .btn { flex: 1 1 0; }
}

/* ---------- prefers-reduced-motion: без clip-path и сдвигов, только прозрачность ---------- */

@media (prefers-reduced-motion: reduce) {
  dialog.modal[open] { animation: survey-panel-in-fade var(--dur-2) linear; }
  dialog.modal[open]::backdrop { animation: survey-backdrop-in var(--dur-2) linear; }
  dialog.modal.is-closing { animation: survey-panel-out-fade var(--dur-2) linear forwards; }
  dialog.modal.is-closing::backdrop { animation: survey-backdrop-out var(--dur-2) linear forwards; }
  .modal .btn, .modal .icon-btn, .modal .field__input, .modal .modal__why summary::after, .modal .check { transition: none; }
  .modal .legal-view { animation: legal-view-in-fade var(--dur-2) linear; }
  .modal .legal-view.is-leaving { animation: legal-view-out-fade var(--dur-2) linear forwards; }
}

@keyframes legal-view-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes legal-view-out-fade { from { opacity: 1; } to { opacity: 0; } }