/*
 * 申込フォームの体裁 — **1 実装**。console.html (タグ発行の申請・会社情報) と
 * admin.html (運営代理の組織登録) が同じ形を使う。段の進行表示 (.form-steps) は
 * 末尾にあり、index.html (アカウント発行の申込) もそれだけを使う。
 *
 * 1 カラムの中央寄せ・太字ラベル + 必須/任意チップ・青の縦棒の見出し・下部に
 * 「戻る / 次へ」。もとは console.html の <style> の中にあり、index.html の
 * 申込フォームから**目で写した**ものだった。運営側にも同じ体裁が要ることに
 * なったので (2026-09-01)、**写しをもう 1 枚作らずにここへ出した** — 同型コピペは
 * 修正が全箇所に伝播しない (CLAUDE.md 穴 7)。
 *
 * 読み込む位置は datepicker.css / perf.css と同じ列で、**brand.css より前**。
 * brand.css はトークンとコンポーネント形状を後から上書きする層なので、順番を
 * 入れ替えると入力欄の角丸・枠色が変わる。
 *
 * ここに置くのは**フォームの骨格だけ**。同意チェック (.agree)・規約の本文
 * (.legal-doc / .terms-*) は申込フローにしか無いので console.html 側に残す。
 */

.apply-form { max-width: 640px; margin: 0 auto; }
.apply-form .card { padding: 24px; }
.apply-form label {
  display: block; font-weight: 700; font-size: 15px; margin: 20px 0 8px; color: var(--ink);
}
.apply-form label:first-of-type { margin-top: 0; }
/* 補足文言は**項目名と別の行**に置く (2026-08-27 の要件) — 名前のうしろに続けると
   長い補足で行が折り返し、どこまでが項目名か読み取れない。必須/任意のチップは
   項目名と同じ行に残す (欄の性質は名前と一体で読むもの)。 */
.apply-form .hint {
  display: block; font-weight: 400; font-size: 12px; line-height: 1.6;
  color: var(--muted); margin: 4px 0 0;
}
.apply-form .req, .apply-form .opt {
  font-size: 11px; font-weight: 700; padding: 1px 6px; margin-left: 6px; border-radius: 4px;
}
.apply-form .req { color: #fff; background: var(--bad); }
.apply-form .opt { color: var(--ink-2); background: color-mix(in srgb, var(--grid) 45%, var(--surface)); }
.apply-form .section-label {
  font-size: 17px; font-weight: 700; color: var(--ink);
  margin: 4px 0 18px; padding: 1px 0 1px 10px; border-left: 4px solid var(--accent);
}
.apply-form input[type="text"], .apply-form input:not([type]), .apply-form select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--page); border: 1px solid var(--grid); border-radius: 8px;
}
.apply-form input[type="text"]:focus,
.apply-form input:not([type]):focus, .apply-form select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
.apply-form .lead { font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }
.apply-form .error { color: var(--bad); font-size: 13px; margin-top: 12px; display: none; }
/* ページ送り (戻る + 次へ/送信) — 申込フォームと同じ並び */
.apply-form .page-nav { display: flex; gap: 10px; margin-top: 22px; }
.apply-form .page-nav .back {
  flex: none; padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--accent); background: var(--surface); border: 1px solid var(--accent); border-radius: 8px;
}
.apply-form .page-nav .primary {
  flex: 1; padding: 11px; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 8px;
}
.apply-form .page-nav .primary:disabled { opacity: .45; cursor: not-allowed; }
/* hidden は UA の display:none で効くので、display を明示した要素では自分で消す
   (これが無いと、確認のチェックが最初から見えてしまう) */
.apply-form [hidden] { display: none !important; }

/*
 * 段の進行表示 (.form-steps) — **1 実装**。タグ発行の申請 (console.html) と
 * アカウント発行の申込 (index.html) が同じ形を使う。もとは console.html の
 * <style> の中に `.nt-steps` として在ったものを、2 枚目を写す前にここへ出した
 * (CLAUDE.md 穴 7)。名前から `nt-` (new tag) を落としてあるのは、申込にも
 * 使うため — 名前が片方の文脈を指したままだと、次の人が写しを作る。
 *
 * **`.apply-form` の外でも効くように、ここだけは無スコープ**にしてある
 * (index.html は `.apply-form` で包んでいない)。
 *
 * 番号を線でつないで、**今どこか / あと何段あるか**を一目で分かるように。
 * 色はアクセント 1 色の濃淡だけで表す (済んだ段に別の色を持ち込むと、ブランドの
 * 配色に無い色が増えるうえ、視線が散る)。
 */
.form-steps {
  display: flex; list-style: none; margin: 0 0 22px; padding: 0;
}
.form-steps li {
  flex: 1; position: relative; text-align: center; min-width: 0;
}
/* 前の丸との間をつなぐ線。丸の中心 (14px) に合わせる */
.form-steps li::before {
  content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px;
  background: var(--grid);
}
.form-steps li:first-child::before { display: none; }
.form-steps .n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  /* 行のベースラインに載せない (載せると段ごとに丸の高さがずれる) */
  vertical-align: middle;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--muted); background: var(--surface); border: 2px solid var(--grid);
}
.form-steps .t {
  display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted);
  overflow-wrap: anywhere;
}
/* 済んだ段: アクセントの淡い塗り。線も塗って「ここまで来た」を示す */
.form-steps li.is-done::before { background: color-mix(in srgb, var(--accent) 45%, var(--grid)); }
.form-steps li.is-done .n {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--grid));
}
.form-steps li.is-done .t { color: var(--ink-2); }
/* いまの段: アクセントで塗りつぶす */
.form-steps li.is-current .n {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-steps li.is-current .t { color: var(--ink); }
@media (max-width: 480px) {
  .form-steps .t { font-size: 11px; }
}