/* ==========================================================================
   TEYLL（assets/css/teyll/）— Component（c-: アイコン・画面の見本・フォームの部品）
   - このフォルダの CSS は TEYLL のページだけで読み込む（inc/setup.php）
   - SP は同じファイルの中で @media (max-width: 767px) に書く
   ========================================================================== */

/* ---------- アイコン（Figma c-icon/*。SVG を mask で描き、色は文字の色） ---------- */
/* 大きさは使う所のクラスで決める（:where で詳細度を 0 にして、どのクラスでも上書きできるようにする） */
:where(.c-teyll-icon) {
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.c-teyll-icon--arrow-right { --icon: url("../../img/teyll/icons/arrow-right.svg"); }
.c-teyll-icon--arrow-left { --icon: url("../../img/teyll/icons/arrow-left.svg"); }
.c-teyll-icon--chevron-right { --icon: url("../../img/teyll/icons/chevron-right.svg"); }
.c-teyll-icon--chevron-down { --icon: url("../../img/teyll/icons/chevron-down.svg"); }
.c-teyll-icon--home { --icon: url("../../img/teyll/icons/home.svg"); }
.c-teyll-icon--menu { --icon: url("../../img/teyll/icons/menu.svg"); }
.c-teyll-icon--x { --icon: url("../../img/teyll/icons/x.svg"); }
.c-teyll-icon--external { --icon: url("../../img/teyll/icons/external.svg"); }
.c-teyll-icon--phone { --icon: url("../../img/teyll/icons/phone.svg"); }
.c-teyll-icon--check { --icon: url("../../img/teyll/icons/check.svg"); }
.c-teyll-icon--plus { --icon: url("../../img/teyll/icons/plus.svg"); }
.c-teyll-icon--minus { --icon: url("../../img/teyll/icons/minus.svg"); }
.c-teyll-icon--bar-chart { --icon: url("../../img/teyll/icons/bar-chart.svg"); }
.c-teyll-icon--zap { --icon: url("../../img/teyll/icons/zap.svg"); }
.c-teyll-icon--award { --icon: url("../../img/teyll/icons/award.svg"); }
.c-teyll-icon--users { --icon: url("../../img/teyll/icons/users.svg"); }
.c-teyll-icon--chat { --icon: url("../../img/teyll/icons/chat.svg"); }
.c-teyll-icon--file { --icon: url("../../img/teyll/icons/file.svg"); }
.c-teyll-icon--monitor { --icon: url("../../img/teyll/icons/monitor.svg"); }

/* ---------- 見出しの語のまとまり（truss_teyll_heading()。途中で折り返さず、まとまりの境目で折り返す） ---------- */
.c-teyll-phrase {
	display: inline-block;
}

/* ---------- Web サイトの画面の見本（SVG。図の中で使う） ---------- */
.c-teyll-screen {
	display: block;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   フォーム（inc/forms/render.php が出すマークアップ c-form-field などに、TEYLL の見た目を当てる。Figma p-teyll-contact 212:3413）
   ========================================================================== */
.c-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.c-form-field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.c-form-field__label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 var(--space-sm);
	padding: 0;
}

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

/* 「必須」は紺の地に白い文字。任意の項目は札を出さない（Figma） */
.c-form-field__badge {
	display: inline-block;
	padding: 1px 6px;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	white-space: nowrap;
	border-radius: var(--radius-sm);
}

.c-form-field__badge--required {
	color: var(--teyll-text-on-dark);
	background: var(--teyll-bg-navy);
}

.c-form-field__badge--optional {
	display: none;
}

/* 選択肢の項目：見出し（legend）の右に補足（複数選択可）を並べる */
.c-form-field--choices > .c-form-field__label-row {
	float: left;
	margin-right: var(--space-xs);
}

.c-form-field--choices > .c-form-field__note {
	display: flex;
	align-items: center;
	min-height: 25px;
	margin: 0 0 var(--space-sm);
}

.c-form-field--choices > .c-form-field__choices {
	clear: both;
}

.c-form-field__note,
.c-form-field__meta {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.c-form-field--input > .c-form-field__note,
.c-form-field--textarea > .c-form-field__note {
	margin-top: var(--space-xs);
}

/* 入力欄（iPhone で拡大されないよう、文字は SP でも 16px） */
.c-form-field__field {
	display: block;
	width: 100%;
	min-height: 64px;
	padding: 15px 18px;
	font: var(--text-teyll-body);
	font-size: 16px;
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
	background: var(--teyll-bg-canvas);
	border: 1.5px solid var(--teyll-border-input);
	border-radius: var(--radius-md);
	appearance: none;
}

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

.c-form-field__field:hover {
	border-color: var(--teyll-text-secondary);
}

.c-form-field__field:focus-visible {
	border-color: var(--teyll-action-cta);
	outline-offset: 1px;
}

textarea.c-form-field__field {
	height: 160px;
	min-height: 160px;
	resize: vertical;
}

/* 誤りのある項目は枠を赤に（入力欄・選んでいない選択肢・同意のチェックボックス） */
.c-form-field.is-error .c-form-field__field,
.c-form-field.is-error .c-teyll-choice:not(.is-checked, :has(:checked)),
.c-form-field.is-error .c-checkbox__input:not(:checked) {
	border-color: var(--teyll-red-600);
}

/* 選択肢（チェックボックス・ラジオ。高さ 48・文字 16。選んだ状態は枠と印をインディゴ） */
.c-form-field__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.c-teyll-choice {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px 0 var(--space-md);
	font: var(--text-teyll-body);
	font-size: 16px;
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-primary);
	cursor: pointer;
	background: var(--teyll-bg-canvas);
	border: 1.5px solid var(--teyll-border-input);
	border-radius: var(--radius-md);
}

.c-teyll-choice:hover {
	border-color: var(--teyll-text-secondary);
}

.c-teyll-choice.is-checked,
.c-teyll-choice:has(:checked) {
	border-color: var(--teyll-action-cta);
}

.c-teyll-choice__input,
.c-checkbox__input {
	position: relative;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	cursor: pointer;
	background: var(--teyll-bg-canvas);
	border: 1.5px solid var(--teyll-text-secondary);
	border-radius: var(--radius-sm);
	appearance: none;
}

.c-teyll-choice__input[type="radio"] {
	border-radius: 50%;
}

.c-teyll-choice__input:checked,
.c-checkbox__input:checked {
	background: var(--teyll-action-cta);
	border-color: var(--teyll-action-cta);
}

.c-teyll-choice__input[type="checkbox"]:checked::after,
.c-checkbox__input:checked::after {
	position: absolute;
	inset: 0;
	content: "";
	background: var(--teyll-text-on-dark);
	-webkit-mask: url("../../img/teyll/icons/check.svg") center / 16px no-repeat;
	mask: url("../../img/teyll/icons/check.svg") center / 16px no-repeat;
}

.c-teyll-choice__input[type="radio"]:checked {
	background: var(--teyll-bg-canvas);
	box-shadow: inset 0 0 0 3.5px var(--teyll-bg-canvas), inset 0 0 0 10px var(--teyll-action-cta);
}

.c-teyll-choice__input:focus-visible,
.c-checkbox__input:focus-visible {
	outline: 3px solid var(--focus-color);
	outline-offset: 2px;
}

/* 同意（プライバシーポリシーに同意する） */
.c-form-field--agree {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-sm);
	padding-block: var(--space-xs);
}

.c-form-field--agree > .c-form-field__note {
	flex-basis: 100%;
}

.c-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font: var(--text-teyll-body);
	font-size: 16px;
	letter-spacing: var(--ls-teyll);
	cursor: pointer;
}

.c-checkbox__box {
	display: none; /* 入力欄そのものを箱として描く */
}

.c-checkbox__label a {
	color: var(--teyll-text-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 入力の誤り（赤 teyll/red-600 で理由を出す） */
.c-form-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: var(--space-xs) 0 0;
	font: var(--text-teyll-body-s);
	font-weight: 700;
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-red-600);
}

.c-form-field--agree > .c-form-field__error {
	flex-basis: 100%;
	margin-top: 0;
}

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

.c-form-field__error-icon {
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1;
	color: var(--teyll-text-on-dark);
	background: var(--teyll-red-600);
	border-radius: 50%;
}

.c-form-errors {
	padding: var(--space-md) var(--space-lg);
	color: var(--teyll-red-600);
	background: var(--teyll-bg-canvas);
	border: 2px solid var(--teyll-red-600);
	border-radius: var(--radius-md);
}

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

.c-form-errors__list {
	margin: var(--space-xs) 0 0;
	padding-left: 1.2em;
	font: var(--text-teyll-body-s);
}

.c-form-errors__list a {
	color: inherit;
}

/* 送信の前の確認（Turnstile。キーがあるときだけ出る） */
.c-form-guard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	font: var(--text-teyll-body-s);
	color: var(--teyll-text-secondary);
}

@media (max-width: 767px) {
	.c-form {
		gap: var(--space-xl);
	}

	.c-form-field__label-row {
		margin-bottom: var(--space-sm);
	}

	.c-form-field__field {
		min-height: 60px;
		padding: 13px var(--space-md);
	}

	.c-form-field__choices {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.c-teyll-choice {
		display: flex;
		width: 100%;
		font-size: 15px; /* TEYLL/SP/Body（入力欄ではないので 16px にしなくても拡大されない） */
	}

	.c-checkbox {
		gap: var(--space-xs);
		font-size: 15px;
	}

	/* 同意の行：チェック → 文 → 「必須」を1行に（Figma 242:3671。幅 303 に収める） */
	.c-form-field--agree {
		column-gap: var(--space-xs);
	}

	.c-form-field--agree > .c-form-field__badge {
		padding-inline: 4px;
	}
}