/*
 * 最小限の構造CSS。出典: 仕様書 7章冒頭の方針（見た目の作り込みはテーマ側の責務。
 * レイアウトの土台のみをここで提供する）、10章 prefers-reduced-motion。
 *
 * ビルド工程は持たない（confirm.js冒頭コメント参照。assets/distは本ファイルの単純コピー）。
 */

.vpform-row {
	margin: 0 0 1em;
}

.vpform-label,
.vpform-group legend.vpform-label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: bold;
}

.vpform-required {
	margin-left: 0.5em;
	font-size: 0.8em;
	color: #b30000;
}

.vpform-input {
	display: block;
	width: 100%;
	max-width: 32em;
	box-sizing: border-box;
}

.vpform-choice {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	margin-right: 1em;
}

.vpform-error {
	margin: 0.25em 0 0;
	color: #b30000;
}

.vpform-error[hidden] {
	display: none;
}

.vpform-error-summary {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border: 1px solid #b30000;
	background: #fff4f4;
	color: #b30000;
}

.vpform-error-summary[hidden] {
	display: none;
}

/*
 * issue #34: テーマ側の `section { display: block; }` 等のリセットCSSは、要素セレクタ+属性セレクタの
 * 組み合わせでもUAスタイル（[hidden] { display: none }）と同等以上の詳細度になり得るため、
 * hidden属性だけでは非表示が保証されない。vpformが生成する全セクション相当要素を明示的に固定する。
 */
.vpform[hidden],
.vpform-confirm[hidden],
.vpform-thanks[hidden] {
	display: none !important;
}

.vpform-actions {
	margin-top: 1.5em;
}

.vpform-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * 確認画面の一覧は既定を縦積み（項目名の下に値）にする。狭い画面で「項目名 max-content ＋
 * 値 1fr」にすると、長い項目名（例:「プライバシーポリシーに同意する」）が1列目を押し広げ、
 * 値の列が数十pxまで潰れて1〜2文字ずつ折り返す（issue #46。実機で発覚）。
 * 横に並べるのは幅に余裕がある画面だけにする。
 */
.vpform-confirm-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5em 1em;
}

@media (min-width: 768px) {
	.vpform-confirm-list {
		grid-template-columns: max-content 1fr;
	}
}

.vpform-confirm-list dt {
	font-weight: bold;
}

.vpform-confirm-list dd {
	margin: 0;
}

.vpform-confirm-actions {
	margin-top: 1.5em;
	display: flex;
	gap: 1em;
}

@media (prefers-reduced-motion: reduce) {
	.vpform,
	.vpform-confirm,
	.vpform-thanks {
		transition: none !important;
		animation: none !important;
	}
}