/* ==========================================================================
   TEYLL — フォームの部品（Figma 02 Components の c-teyll-form-field 1335:1592・c-teyll-form-steps 1330:1360・c-teyll-form-alert 1330:1373 と -sp）
   お問い合わせ（page-teyll-contact.php）で使う。項目のマークアップは template-parts/teyll/form-field.php
   - c-teyll-form-field：ラベル（H4）と「必須」の札（Gradient/Action に白。任意は札なし）→ 入力欄（高さ 56・角 16・枠 1px border/input）→ 補足（Body-S）→ エラー（赤い文とアイコン）
     State＝Focus：枠 2px action/cta（ラジオ・チェックは空色の輪）／Error（is-error）：枠 2px border/error。押せる所は高さ 44 以上
     SP：入力欄の文字は 16px（SP/Input＝iPhone で拡大されない）・左右の余白 16
   - c-teyll-form-steps：入力 → 確認 → 完了（ol。いまの段＝Gradient/Action の丸に白い番号・aria-current="step"／済んだ段＝白に Ring の輪とチェック／
     まだの段＝灰色の輪）。段のあいだの線は済んだところまで Ring（PC 112・SP 88）
   - c-teyll-form-alert：--error＝白に赤の輪 2px・赤い題（role="alert"）／--info＝淡い空色（確認の画面。role="status"）。高さは中身なり
   ========================================================================== */

/* ---------- c-teyll-form-field ---------- */
.c-teyll-form-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	/* エラーのまとめのリンクで移ったとき、浮いたヘッダーに隠れないのは html の scroll-padding-top（--header-height） */
}

.c-teyll-form-field__label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	float: none; /* legend の既定の置き方を外す */
	width: 100%;
	margin: 0;
	padding: 0;
}

/* fieldset の legend は flex の並びに入らない（gap が効かない）ので、下の間 12 を margin で */
legend.c-teyll-form-field__label-row {
	margin-bottom: 12px;
}

.c-teyll-form-field__label {
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
}

.c-teyll-form-field__required {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--radius-full);
	background: var(--teyll-gradient-action);
	font: var(--text-teyll-label);
	font-size: 14px; /* SP も同じ大きさ（Figma） */
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-on-dark);
}

/* 入力欄（input・select・textarea） */
.c-teyll-form-field__control {
	display: block;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 11px 16px 11px 24px;
	border: 1px solid var(--teyll-border-input);
	border-radius: 16px;
	background: var(--teyll-bg-canvas);
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	appearance: none;
}

.c-teyll-form-field__control::placeholder {
	color: var(--teyll-text-secondary);
	opacity: 1;
}

textarea.c-teyll-form-field__control {
	min-height: 200px;
	padding: 16px 24px;
	resize: vertical;
}

/* 枠の太さは box-shadow で足す（2px にしても中の文字が動かないように） */
.c-teyll-form-field__control:focus {
	border-color: var(--teyll-action-cta);
	outline: none;
	box-shadow: inset 0 0 0 1px var(--teyll-action-cta);
}

.c-teyll-form-field__control:focus-visible {
	outline: none;
}

.c-teyll-form-field.is-error .c-teyll-form-field__control {
	border-color: var(--teyll-border-error);
	box-shadow: inset 0 0 0 1px var(--teyll-border-error);
}

/* select：右に ⌄ */
.c-teyll-form-field__select {
	position: relative;
	display: block;
}

.c-teyll-form-field__select .c-teyll-form-field__control {
	padding-right: 52px;
	cursor: pointer;
}

.c-teyll-form-field__select .c-teyll-form-field__control:invalid,
.c-teyll-form-field__select .c-teyll-form-field__control:has(option[value=""]:checked) {
	color: var(--teyll-text-secondary); /* 「選んでください」のときは見本の色 */
}

.c-teyll-form-field__chevron {
	position: absolute;
	top: 50%;
	right: 16px;
	color: var(--teyll-text-primary);
	transform: translateY(-50%);
	pointer-events: none;
}

/* 選択肢（ラジオ・チェック。1つの行は高さ 44） */
.c-teyll-form-field__options {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
}

.c-teyll-form-field__option {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
	cursor: pointer;
}

.c-teyll-form-field__input {
	position: absolute;
	top: 6px;
	left: 0;
	width: 32px;
	height: 32px;
	margin: 0;
	opacity: 0; /* 見た目は隣の __check・__radio。押せる・読み上げられるのは本物の input */
	cursor: pointer;
}

.c-teyll-form-field__check,
.c-teyll-form-field__radio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	margin: 5px; /* 32 の枠（フォーカスの輪の場所）の中に 22 */
	border: 2px solid var(--teyll-border-input);
	border-radius: 4px;
	background: var(--teyll-bg-canvas);
	color: var(--teyll-text-on-dark);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.c-teyll-form-field__radio {
	border-radius: 50%;
}

.c-teyll-form-field__check-icon {
	opacity: 0;
}

.c-teyll-form-field__input:checked + .c-teyll-form-field__check {
	border-color: var(--teyll-action-cta);
	background: var(--teyll-action-cta);
}

.c-teyll-form-field__input:checked + .c-teyll-form-field__check .c-teyll-form-field__check-icon {
	opacity: 1;
}

.c-teyll-form-field__input:checked + .c-teyll-form-field__radio {
	border-color: var(--teyll-action-cta);
	background: radial-gradient(circle, var(--teyll-action-cta) 0 5px, var(--teyll-bg-canvas) 5.5px);
}

/* フォーカス：32 の丸・角の枠に空色の輪 2px（Figma の State=Focus） */
.c-teyll-form-field__input:focus-visible + .c-teyll-form-field__check,
.c-teyll-form-field__input:focus-visible + .c-teyll-form-field__radio {
	box-shadow: 0 0 0 3px var(--teyll-bg-canvas), 0 0 0 5px var(--teyll-accent-sky);
}

.c-teyll-form-field.is-error .c-teyll-form-field__check,
.c-teyll-form-field.is-error .c-teyll-form-field__radio {
	border-color: var(--teyll-border-error);
}

.c-teyll-form-field.is-error .c-teyll-form-field__input:checked + .c-teyll-form-field__check {
	border-color: var(--teyll-action-cta);
}

/* 補足・エラー */
.c-teyll-form-field__help {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.c-teyll-form-field__link {
	color: var(--teyll-text-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.c-teyll-form-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-error);
}

.c-teyll-form-field__error[hidden] {
	display: none;
}

.c-teyll-form-field__error-icon {
	flex: none;
	margin-top: 1.5px;
}

/* ---------- c-teyll-form-steps ---------- */
.c-teyll-form-steps {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	--teyll-step-line: 112px;
}

.c-teyll-form-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 48px;
}

.c-teyll-form-steps__item + .c-teyll-form-steps__item {
	margin-left: var(--teyll-step-line);
}

/* 段のあいだの線（前の段からこの段まで。済んだ段・いまの段までは Ring） */
.c-teyll-form-steps__item + .c-teyll-form-steps__item::before {
	content: "";
	position: absolute;
	top: 23px;
	right: 100%;
	width: var(--teyll-step-line);
	height: 2px;
	background: var(--teyll-border-default);
}

.c-teyll-form-steps__item.is-done + .c-teyll-form-steps__item::before {
	background: var(--teyll-gradient-ring);
}

.c-teyll-form-steps__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--teyll-border-default);
	border-radius: 50%;
	background: var(--teyll-bg-canvas);
	color: var(--teyll-text-secondary);
}

.c-teyll-form-steps__item.is-current .c-teyll-form-steps__circle {
	border: 0;
	background: var(--teyll-gradient-action);
	color: var(--teyll-text-on-dark);
}

.c-teyll-form-steps__item.is-done .c-teyll-form-steps__circle {
	border-color: transparent;
	background:
		linear-gradient(var(--teyll-bg-canvas), var(--teyll-bg-canvas)) padding-box,
		var(--teyll-gradient-ring) border-box;
	color: var(--teyll-text-primary);
}

.c-teyll-form-steps__number {
	font: var(--text-teyll-en-label);
	letter-spacing: var(--ls-teyll-en-label);
}

.c-teyll-form-steps__label {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-secondary);
	white-space: nowrap;
}

.c-teyll-form-steps__item.is-current .c-teyll-form-steps__label {
	color: var(--teyll-text-primary);
}

/* ---------- c-teyll-form-alert ---------- */
.c-teyll-form-alert {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	padding: 24px;
	border-radius: 16px;
}

.c-teyll-form-alert--error {
	border: 2px solid var(--teyll-border-error);
	padding: 22px; /* 輪の 2px の分を引く */
	background: var(--teyll-bg-canvas);
}

.c-teyll-form-alert--info {
	background: var(--teyll-bg-sky-pale);
}

/* お知らせは JS がフォーカスを移して読み上げさせるだけ（押せる物ではない）ので、フォーカスの輪は出さない */
.c-teyll-form-alert:focus,
.c-teyll-form-alert:focus-visible {
	outline: none;
}

.c-teyll-form-alert__icon {
	flex: none;
	margin-top: 2px;
	color: var(--teyll-text-primary);
}

.c-teyll-form-alert--error .c-teyll-form-alert__icon {
	color: var(--teyll-text-error);
}

.c-teyll-form-alert__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.c-teyll-form-alert__title {
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
}

.c-teyll-form-alert--error .c-teyll-form-alert__title {
	color: var(--teyll-text-error);
}

.c-teyll-form-alert__text {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
}

.c-teyll-form-alert__link {
	color: var(--teyll-text-link);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.c-teyll-form-field__control {
		padding-inline: 16px;
		font: var(--text-teyll-input); /* 16px（iPhone で入力欄が拡大されない） */
		letter-spacing: var(--ls-teyll);
	}

	textarea.c-teyll-form-field__control {
		padding: 16px;
	}

	.c-teyll-form-field__select .c-teyll-form-field__control {
		padding-right: 48px;
	}

	.c-teyll-form-field__options {
		gap: 0 24px;
	}

	.c-teyll-form-steps {
		--teyll-step-line: 88px;
	}

	.c-teyll-form-alert {
		padding: 16px;
	}

	.c-teyll-form-alert--error {
		padding: 14px;
	}
}