/**
 * asbsb-form-confirm.css — 日本式「確認画面」レイヤー（M7-4。asbsb:form の confirm 宣言）。
 *
 * 静的（assemble）と WP（plugin-scaffold → サイトプラグイン）へ対称に注入される共有アセット。
 * 確認ビュー（.asbsb-fc）は asbsb-form-confirm.js が操作時に生成する＝素の描画には一切影響しない
 * （measure の静的==WP を壊さない。ここのセレクタは操作後にしか存在しない要素だけを指す）。
 *
 * 調整用変数（decorations.css の :root で上書き可）:
 *   --asbsb-fc-border … 枠と罫線の色（既定は薄いグレー＝明暗どちらの背景でも破綻しない）
 *   --asbsb-fc-bg     … 確認ビューの背景（既定 transparent）
 *   --asbsb-fc-radius … 角丸
 */

/* 確認中はフォーム本体を隠す（同一ページ内ビュー切替。marker クラスは form.mjs が外枠へ付ける） */
.asbsb-form-confirm.asbsb-fc-confirming form.kb-advanced-form { display: none; }

.asbsb-fc {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--asbsb-fc-border, rgba(125, 125, 125, .35));
  border-radius: var(--asbsb-fc-radius, 10px);
  background: var(--asbsb-fc-bg, transparent);
}
.asbsb-fc:focus { outline: none; }

.asbsb-fc-title { margin: 0 0 .4em; font-size: 1.15em; }
.asbsb-fc-note { margin: 0 0 1.3em; font-size: .92em; opacity: .8; }

.asbsb-fc-list { margin: 0 0 1.5em; }
.asbsb-fc-row {
  display: grid;
  grid-template-columns: minmax(7em, max-content) 1fr;
  gap: 4px 20px;
  padding: .7em 2px;
  margin: 0;
  border-bottom: 1px solid var(--asbsb-fc-border, rgba(125, 125, 125, .25));
}
.asbsb-fc-row:first-child { border-top: 1px solid var(--asbsb-fc-border, rgba(125, 125, 125, .25)); }
.asbsb-fc-row dt { margin: 0; font-weight: 600; }
/* textarea の改行を保つ＋長い連続文字列（URL等）で横にあふれない */
.asbsb-fc-row dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.asbsb-fc-actions { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; }
/* 戻る＝控えめなアウトライン。送信＝JS がフォーム実物の送信ボタンを clone するので装飾はサイト側と同一になる */
.asbsb-fc-back {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--asbsb-fc-border, rgba(125, 125, 125, .5));
  border-radius: 6px;
  padding: .55em 1.4em;
  font: inherit;
  color: inherit;
  opacity: .85;
  cursor: pointer;
}
.asbsb-fc-back:hover { opacity: 1; }
.asbsb-fc-send { cursor: pointer; }
.asbsb-fc-send[disabled] { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  .asbsb-fc-row { grid-template-columns: 1fr; padding: .55em 2px; }
  .asbsb-fc-row dt { font-size: .85em; opacity: .75; }
  .asbsb-fc-actions { flex-direction: column-reverse; align-items: stretch; }
  .asbsb-fc-actions .asbsb-fc-back,
  .asbsb-fc-actions .asbsb-fc-send { width: 100%; text-align: center; justify-content: center; }
}