/* Поля будь-якої форми сайту (план 07, задача 6).

   Числа — з tests/design/partnership-form/spec-1440.json і spec-390.json
   (вузли `3789:15828` і `4436:34500`), плюс варіанти компонентів «Label»
   `3219:8418` і «send» `4277:28249`, у яких макет тримає стани, яких немає в
   кадрі сторінки:

   | стан                  | вузол        | що саме                           |
   |---|---|---|
   | поле у фокусі         | `3219:8423`  | обведення 0.8px #12AD99           |
   | поле з помилкою       | `3219:8436`  | 0.8px #991B1B + рядок XS #991B1B  |
   | те саме на 390        | `4277:28342` | той самий колір, текст 12/15      |
   | кнопка «надсилається» | `4309:29977` | 1px #D0D5DC, текст #697482        |

   Тобто «стан помилки поля» і «стан надсилання», які бриф вважав відсутніми,
   у макеті Є — і взяті звідти, а не з голови.

   ЧОГО В МАКЕТІ СПРАВДІ НЕМАЄ і що тому зафіксовано письмово (ТЗ §8):

   · ширини 768 і 1920. Картка не росте за 662 (ширина картки кадру 1440:
     598 полів + 2×32), відступи тримає контейнер сайту (container.css). Друга
     колонка секції з'являється з 1440, бо саме там макет її малює. Поля
     всередині картки стоять ОДНІЄЮ колонкою на обох кадрах, тож ділити
     ім'я з організацією на дві колонки від 768 було б вигадкою;

   · тривалість переходів. Прототип не має жодної взаємодії для полів
     (перевірено `fig-canvas.js interactions` по .fig 2026-09-21: у зведенні
     немає ні «Label», ні «send», ні «Checkbox»), тож діє правило
     animations.md для решти інтерактивних елементів — 150–300 мс,
     `ease-out`. Питання дизайнеру записане в designer-questions.md;

   · позначка «обов'язково». Кадр маркує НЕобов'язкові поля в самій назві
     («Організація (необов'язково)») і нічим не маркує обов'язкові. Текстова
     позначка додана поруч із назвою, у тому ж рядку, тож жодна рамка нижче
     не рухається (accessibility-ua.md §3.5 — не лише колір).

   44 px цілі (ТЗ §9): поле — 48, кнопка — 56/64, згода — рядок тексту плюс
   падінг навколо нього. */

/* Компоненти нижче ставлять власний `display`, а він перебиває браузерний
   `[hidden] { display: none }`. Тож «приховано» вимикається явно — інакше
   подяка стояла б на місці порожньою, а поля не зникали б після надсилання. */
.c-form [hidden] {
	display: none;
}

.c-form {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;

	/* Ширина картки кадру 1440 (`Form Fields Block` 662 = 598 + 2×32).
	   Вище 1440 картка не росте. */
	max-width: 662px;
	padding: 32px 12px;

	/* `Form Fields Block` gap=32. Прихований блок (`hidden`) проміжку не дає. */
	gap: 32px;
	background: var(--color-base-white);
}

/* Те, що зникає після надсилання: поля і кнопка. Проміжок між ними — ті самі
   32 (`Form Fields Block` gap=32), тож рамка кнопки стоїть там, де в кадрі. */
.c-form__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* `Form Fields` — flex-col gap=20, одна колонка на обох кадрах. */
.c-form__fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 20px;
}

/* Пастка для ботів: за екраном, поза Tab-циклом і під `aria-hidden`, тож ні
   читач екрана, ні власний Tab-цикл модалки (assets/js/focus.js) її
   не бачать. */
.c-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* «Label» — flex-col gap=4 між назвою, полем і рядком помилки. */
.c-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.c-field__label {
	display: block;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-transform: uppercase;
}

/* Текстова позначка обов'язковості — слово, не колір і не зірочка. */
.c-field__required {
	color: var(--color-neutral-500);
	font-size: var(--fs-xs-text);
	font-weight: 400;

	/* Власний, менший рядок: інакше піврядок 14-го кегля в 22-піксельному
	   рядку назви розтягує її з 22 до 23 і зсуває все поле. */
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-transform: none;
	white-space: nowrap;
}

/* `Text Input` 598×48, pad=12/14, border 0.8px, radius 2. */
.c-field__control {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 0.8px solid var(--color-neutral-300);
	border-radius: 2px;
	background: var(--color-base-white);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	transition: border-color 150ms ease-out;
}

.c-field__control::placeholder {
	color: var(--color-neutral-500);
	opacity: 1;
}

/* `Text Input` варіанта Variant4 — 4 рядки тексту плюс той самий падінг
   (113.6 на 1440, 97.6 на 390), тобто rows="4". */
textarea.c-field__control {
	min-height: auto;
	resize: vertical;
}

/* Фокус: обведення #12AD99 (`3219:8423`). Спільний видимий фокус base.css
   лишається поверх — колір обведення сам по собі не є індикацією фокусу. */
.c-field__control:focus-visible {
	border-color: var(--color-primary-500);
}

.c-field__control[aria-invalid="true"],
.c-field__group[aria-invalid="true"] .c-field__choices {
	border-color: var(--color-error-800);
}

/* Помилка: рядок XS кольору #991B1B, вирівняний по тексту поля (`pad=0/14`
   рамки помилки). Ховається атрибутом `hidden`, не класом, тож і gap за нею
   зникає разом із нею. */
.c-field__error {
	margin: 0;
	padding-inline: 14px;
	color: var(--color-error-800);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

.c-field__note {
	margin: 0;
	padding-inline: 14px;
	color: var(--color-neutral-500);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

/* Вибір теми: власна стрілка замість системної (`icons / arrow down` —
   трикутник 15×10 #12AD99, 17 px від правого краю поля). */
.c-field__select {
	position: relative;
	display: flex;
	min-width: 0;
}

.c-field__select .c-field__control {
	padding-right: 44px;
	appearance: none;
}

.c-field__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 17px;
	width: 15px;
	height: 10px;
	background: var(--color-primary-500);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateY(-50%);
	pointer-events: none;
}

/* Радіо-група (відгук, задача 8): стан помилки несе група, бо полем є група,
   а не окреме коло. */
.c-field__group {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Рамка прозора завжди, а не з'являється в помилці: інакше стан помилки
   радіо-групи було б видно лише текстом (обведення нема на чому фарбувати),
   а сама поява рамки зсувала б рядок на 1.6 px. Від'ємний зовнішній відступ
   тримає ліву межу там само, де в решти полів. */
.c-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-inline: -8px;
	padding: 4px 8px;
	border: 0.8px solid transparent;
	border-radius: 2px;
}

.c-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
}

.c-choice__input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-primary-500);
}

/* Згода: `Data Processing Consent` — flex-row gap=8, квадрат 13×13, текст XS
   #697482. 44 px цілі дає падінг навколо рядка, а не збільшений квадрат. */
.c-consent {
	box-sizing: border-box;
	display: grid;

	/* `Checkbox:margin` — 20 px (pad 4 злiва, 3 справа навколо квадрата 13),
	   і вже від цієї колонки йде проміжок 8 до тексту. */
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 8px;
	align-items: start;

	/* ТЗ §9: 44 px цілі. Рядок згоди в кадрі — 19 px, бо там стоїть коротке
	   демо-формулювання; ціль добирається мінімальною висотою й падінгом
	   навколо рядка, а не збільшеним квадратом. */
	min-height: 44px;
	padding-block: 6px;
	align-content: center;
	cursor: pointer;
}

/* Квадрат 13×13 у своїй 20-піксельній колонці: pad=3/3/3/4 кадру. Позначений
   стан макет малює синім #0075FF — це стокова заливка Figma, якої немає в
   палітрі театру, тож позначка теальна (`accent-color`), як решта керувань. */
.c-consent__input {
	width: 13px;
	height: 13px;
	margin: 3px 3px 0 4px;
	background: var(--color-base-white);
	accent-color: var(--color-primary-500);
}

.c-consent__text {
	color: var(--color-neutral-500);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

.c-consent__text a {
	color: var(--color-neutral-700);
}

/* `Submit Button` — на всю ширину полів; висоту й обведення 2px дає
   c-ticket. */
.c-form__submit {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 56px;
	padding: 0 16px;
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	white-space: normal;
}

/* `send / Inactive` (`4309:29977`): обведення 1px #D0D5DC, текст #697482. */
.c-form[data-state="sending"] .c-form__submit {
	box-shadow: inset 0 0 0 1px var(--color-neutral-300);
	color: var(--color-neutral-500);
	cursor: progress;
}

.c-form__status {
	margin: 0;
	color: var(--color-error-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.c-form__done {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-form__done-title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-h4);
	text-transform: uppercase;
}

.c-form__done-text {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.c-form__captcha {
	min-height: 65px;
}

.c-form__captcha-note {
	margin: 0;
	color: var(--color-neutral-500);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

@media (min-width: 768px) {

	.c-form {
		padding: 32px;
	}

	/* `Submit Button` 598×64 у кадрі 1440; 390 має 56 (`4277:28253`), між
	   ними кадру немає. */
	.c-form__submit {
		min-height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.c-form *,
	.c-form *::before,
	.c-form *::after {
		/* stylelint-disable-next-line declaration-no-important -- reduced motion */
		transition: none !important;

		/* stylelint-disable-next-line declaration-no-important -- reduced motion */
		animation: none !important;
	}
}

/* Режим високої контрастності: стани полів лишаються видимими без кольорів
   теми. */
@media (forced-colors: active) {

	.c-field__control {
		border: 1px solid ButtonBorder;
	}

	.c-field__control[aria-invalid="true"],
	.c-field__group[aria-invalid="true"] .c-field__choices {
		border: 2px solid Mark;
	}

	.c-field__control:focus-visible {
		border-color: Highlight;
	}

	.c-field__select::after {
		background: CanvasText;
	}

	.c-form__status,
	.c-field__error {
		color: Mark;
	}
}