.formstudio .fs-error,
.mw_wp_form .error { display: block; font-size: 93%; color: #b70000; }
.formstudio .fs-vertical-item,
.mw_wp_form .vertical-item { display: block; }
.formstudio .fs-vertical-item + .fs-vertical-item,
.mw_wp_form .vertical-item + .vertical-item { margin-top: 5px; }
.formstudio .fs-horizontal-item + .fs-horizontal-item,
.mw_wp_form .horizontal-item + .horizontal-item { margin-left: 10px; }
.fs-checkbox-field label, .fs-radio-field label,
.mwform-checkbox-field label, .mwform-radio-field label { font-weight: normal; margin-bottom: 0; }
.fs-checkbox-field input, .fs-radio-field input,
.mwform-checkbox-field input, .mwform-radio-field input { margin-right: 5px; }
.fs-tel-field input[type="text"], .fs-zip-field input[type="text"],
.mwform-tel-field input[type="text"], .mwform-zip-field input[type="text"] { display: inline-block; width: auto; }
.formstudio input[type="file"] { display: inline-block; }
.formstudio .fs-file-delete { cursor: pointer; visibility: hidden; }
.formstudio .fs-file-delete.is-visible { visibility: visible; }
.formstudio .fs-image-preview { max-width: 200px; height: auto; display: block; margin-top: 4px; }

/* ------------------------------------------------------------------
 * レイアウト（§5.0.2）。`label` / `width` 属性とフォーム単位のプリセット用。
 *
 * 決めごと:
 *   - `!important` と ID セレクタを使わない（テーマ側が上書きできる余地を残す）
 *   - 色・フォント・角丸には触れない。並びと余白だけ扱う
 *   - すべて `.formstudio` 配下に閉じる
 *   - 論理プロパティを使う（縦書き・RTL で壊れない）
 *   - 既定のプリセット（label-top / gap-normal / btn-auto / btn-left）には
 *     見た目を変える規則を置かない。ここが既存フォームの互換の要
 *   - `.fs-field` は `label` か `width` が付いた項目にしか出ない新しい要素なので、
 *     ここに規則を置いても既存フォームは変わらない
 * ------------------------------------------------------------------ */

.formstudio {
	--fs-gap: 1rem;
	--fs-gutter: 1rem;
	--fs-label-size: 8em;
}
.formstudio--gap-tight { --fs-gap: 0.5rem; }
.formstudio--gap-normal { --fs-gap: 1rem; }
.formstudio--gap-loose { --fs-gap: 1.75rem; }

/* 項目のラッパー。親（利用者のマークアップ）に手を入れずに横並びできるよう
   inline-block にする。分割幅は隙間ぶんを引いて、タグの間の改行が空白文字に
   なっても折り返さないようにしてある。 */
.formstudio .fs-field {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	inline-size: 100%;
	margin-block-end: var(--fs-gap);
}
.formstudio .fs-label { display: block; }
.formstudio .fs-control { display: block; }
.formstudio .fs-required { margin-inline-start: 0.35em; }

.formstudio .fs-w-full { inline-size: 100%; }
.formstudio .fs-w-half { inline-size: calc(50% - var(--fs-gutter)); }
.formstudio .fs-w-third { inline-size: calc(33.333% - var(--fs-gutter)); }
.formstudio .fs-w-two-thirds { inline-size: calc(66.666% - var(--fs-gutter)); }

/* ラベルの位置。`top` は既定なので規則を持たない（.fs-label が block のまま）。 */
.formstudio--label-left .fs-field {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--fs-gutter);
}
.formstudio--label-left .fs-label { flex: 0 0 var(--fs-label-size); inline-size: var(--fs-label-size); }
.formstudio--label-left .fs-control { flex: 1 1 0; min-inline-size: 0; }

/* `inside` は CSS だけでは作れないので、描画側がラベルを placeholder に写して
   .fs-label-inside を付ける。ここではそのラベルを視覚的に隠すだけ（読み上げには残す）。
   placeholder を持てない項目（選択・ファイル等）には付かないので、ラベルは見えたままになる。 */
.formstudio--label-inside .fs-label-inside {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 送信ボタン。`auto` と `left` は今と同じ見え方なので規則を持たない。 */
.formstudio--btn-full input[type="submit"],
.formstudio--btn-full button[type="submit"] { inline-size: 100%; }
/* 寄せはボタンの親に効かせる。:has() が無い環境では今までどおり（左）になる。 */
.formstudio--btn-center :has(> input[type="submit"]),
.formstudio--btn-center :has(> button[type="submit"]) { text-align: center; }
.formstudio--btn-right :has(> input[type="submit"]),
.formstudio--btn-right :has(> button[type="submit"]) { text-align: end; }

/* 段落をまたいでも幅が効くようにする。
   `wpautop()` は項目を 1 つずつ別の <p> に入れるので、inline-block だけでは
   「同じ行に続けて書いた項目どうし」しか並ばない。選んだのに並ばない、が
   一番まずいので、項目を含む段落だけ箱を消してフォームのグリッドに直接載せる。
   prose の段落（項目を含まない <p>）はそのまま残る。
   `:has()` が無い環境では上の inline-block のまま。並びは変わるが壊れない。 */
@supports selector(:has(*)) {
	.formstudio form {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--fs-gutter);
		row-gap: var(--fs-gap);
		align-items: start;
	}
	/* 項目以外（見出し・prose・ボタンの段落）は全幅のまま。 */
	.formstudio form > * { grid-column: 1 / -1; }
	/* 隠し項目がグリッドの行を 1 つ食わないように。 */
	.formstudio form > input[type="hidden"] { display: none; }
	.formstudio form p:has(> .fs-field) { display: contents; }

	.formstudio .fs-field { inline-size: auto; margin-block-end: 0; grid-column: span 12; }
	.formstudio .fs-w-full { inline-size: auto; grid-column: span 12; }
	.formstudio .fs-w-half { inline-size: auto; grid-column: span 6; }
	.formstudio .fs-w-third { inline-size: auto; grid-column: span 4; }
	.formstudio .fs-w-two-thirds { inline-size: auto; grid-column: span 8; }
}

/* 画面が狭いときは分割をやめて全幅にする。3 分割のまま潰れると入力できない。 */
@media (max-width: 600px) {
	.formstudio .fs-field { display: block; inline-size: 100%; }
	.formstudio--label-left .fs-label { flex-basis: auto; inline-size: auto; }
}

@supports selector(:has(*)) {
	@media (max-width: 600px) {
		.formstudio .fs-field,
		.formstudio .fs-w-full,
		.formstudio .fs-w-half,
		.formstudio .fs-w-third,
		.formstudio .fs-w-two-thirds { inline-size: auto; grid-column: 1 / -1; }
	}
}

/* ------------------------------------------------------------------
 * スパム対策（#5）。ウィジェットの前後に少し余白を取る。ハニーポットは
 * 同梱 CSS を読まない設定でも効くよう、位置はインラインで指定している。
 * ------------------------------------------------------------------ */
.formstudio .fs-captcha { margin-block: 0.75em; }
.formstudio .fs-captcha:empty { display: none; }