/*
 * v2（Salon Workspace）のフォーム。正は DES-UX-020 §8.3。
 * 色の生値を書かない。トークンだけを参照する。
 */

.v2-field { min-width: 0; }

/* 縦積みの間隔は容器（.v2-form の gap）が持つ。
   `.v2-field + .v2-field` の兄弟マージンにしない。**横並び（コマンドバー、
   2 列のグリッド）でも 2 個目以降に縦の余白が掛かり、欄がずれる**
   （2026-08-11 のレビューで発覚。氏名/所属・承認のプルダウンがずれた） */
.v2-form { display: grid; gap: 18px; align-content: start; }

/* fieldset の既定の枠を使わない。区画は見出し（legend）と余白で分ける */
fieldset.v2-field { margin: 0; padding: 0; border: 0; }
fieldset.v2-field legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
}

.v2-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* 必須の印。色だけに頼らず文言で示す */
.v2-field__required {
  margin-left: 6px;
  color: var(--cocpi-v2-error);
  font-size: 11px;
  font-weight: 400;
}

.v2-field__hint {
  margin: -2px 0 6px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
}

/* 入力欄。境界は border-input（3:1 以上。DES-UX-010 §10.3）
   **幅の上限はここが持つ**（§8.1.2。2026-08-15 改訂）。本文はキャンバス
   いっぱいに広がるため、上限を置かないと 1600px の画面で欄が 1300px になり、
   **始点と終点が視線の移動 1 回で結べない。** 絞るのは欄だけであり、
   見出し・区切り線・表は広がる */
.v2-input,
.v2-select,
.v2-textarea {
  width: 100%;
  max-width: 32rem;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--cocpi-v2-border-input);
  border-radius: var(--cocpi-v2-radius-control);
  color: var(--cocpi-v2-text);
  background: var(--cocpi-v2-bg-canvas);
}

.v2-textarea { min-height: 96px; resize: vertical; }

/* 短い値の欄（時間・分など）。**幅いっぱいにしない。**
   `0:30` の 4 文字に画面の全幅を与えると、入る値の桁数が読み取れない */
.v2-input--narrow { max-width: 8em; }

@media (hover: hover) {
  .v2-input:hover:not(:read-only):not(:disabled),
  .v2-select:hover:not(:disabled),
  .v2-textarea:hover:not(:read-only):not(:disabled) {
    border-color: var(--cocpi-v2-text-secondary);
  }
}

/* 参照のみは readonly（disabled は Tab で辿れず読み上げも飛ばす。§4.6） */
.v2-input:read-only,
.v2-textarea:read-only {
  border-style: dashed;
  background: var(--cocpi-v2-bg-subtle);
}

.v2-input[aria-invalid="true"],
.v2-select[aria-invalid="true"],
.v2-textarea[aria-invalid="true"] {
  border-color: var(--cocpi-v2-error);
}

.v2-field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--cocpi-v2-error);
  font-size: 13px;
  font-weight: 700;
}

.v2-field__error svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* パスワードの表示・非表示（DES-UX-020 §4.26）。
   ボタンは `password-toggle.js` が作る。器は入力欄を包むだけ */
.password-field { position: relative; display: block; }
.password-field .v2-input { padding-right: 52px; }

.password-field__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--cocpi-v2-text-secondary);
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-field__toggle:hover { background: var(--cocpi-v2-bg-hover); }

/* 選択欄。native の矢印を消す場合は必ず自前の印を置く（v1 検査 3.3 の教訓）。
   v2 では消さず、native の矢印をそのまま使う。appearance を触らない */

/* 幅は使う側が決める（§4.5.1 の判断を維持）。既定は器いっぱい、
   短い値の欄は囲む側で絞る */
.v2-field--narrow .v2-input,
.v2-field--narrow .v2-select { max-width: 12rem; }

/* narrow では切れるが、既定の 32rem ほどは要らない欄（DES-UX-020 §8.1.3）。
   選択肢の文言が値だけでなく補足を持つとき（「2026年7月（未処理 12）」）、
   12rem では末尾が切れる。実測 238px */
.v2-field--medium .v2-input,
.v2-field--medium .v2-select { max-width: 15rem; }

/* 数個の短い欄を横に並べる（期間、勤務時間など）。狭い幅で折り返す。
   下端で揃える（補足文の有無で高さが変わっても入力欄の位置を保つ） */
.v2-field-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.v2-field-row > .v2-field { flex: 0 1 12rem; }

/* **中身の長さが決まらない欄は伸ばす**（DES-UX-020 §8.1.3。2026-09-04 追加）。
   `.v2-field-row` の子は `flex-grow: 0` であり、**`--medium` を付けても
   12rem（192px）のまま伸びない。** カテゴリの選択欄がこれで、階層が深く
   なるほど長くなる（「サロンの決まりごと > 予約と受付 > 電話の取り方」は
   407px。実測）。**上限は欄の既定の 32rem に任せる。**

   **`.v2-field-row >` からも書く。** 修飾子だけでは
   `.v2-field-row > .v2-field`（詳細度 0,2,0）に負け、**行の中で効かない**
   （実測。付けても 192px のままだった。§4.5「詳細度で土台に負ける」と同じ形）。
   **行の外でも使う** —— 契約・支払いのプランの選択欄は行に入っていないが、
   `--medium`（240px）では「プラン名（月額 X 円）」が収まらない（実測 577px）。
   行の外では `flex` は効かず、上限が欄の既定（32rem）へ戻ることで広がる */
.v2-field--grow,
.v2-field-row > .v2-field--grow { flex: 1 1 20rem; }

/* 探す欄。条件の中で最も長い値が入るため一段広い */
.v2-field--search { flex: 1 1 14rem; min-width: 12rem; }
.v2-field--search .v2-input { max-width: 22rem; }

/* ラジオの選択肢をカードで並べる（在籍・区分の選択など） */
/* 選択カードも**入力欄と同じ幅で止める**（§8.1.2。2026-08-15）。
   本文が全幅になったため、上限が無いと 1240px の枠に 20 文字の選択肢が
   1 つだけ載り、**押せる範囲と読む文字の量が釣り合わない** */
.v2-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 32rem;
  padding: 12px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-control);
  cursor: pointer;
}

.v2-radio-card + .v2-radio-card { margin-top: 8px; }

@media (hover: hover) {
  .v2-radio-card:hover { background: var(--cocpi-v2-bg-subtle); }
}

.v2-radio-card:has(input:checked) {
  border-color: var(--cocpi-v2-brand);
  background: var(--cocpi-v2-brand-soft);
}

.v2-radio-card input { margin-top: 4px; accent-color: var(--cocpi-v2-brand); }
.v2-radio-card__meta {
  display: block;
  margin-top: 2px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
}

/* チェックボックス・ラジオは native を使い、色だけ合わせる（v2 は
   appearance を消さない。消すと代わりの印を全部自前で描くことになる） */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cocpi-v2-brand);
}

/* 打鍵域の確保（REQ-UX-002）。見た目は 18px、当たりは 44px */
.v2-check {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -13px;
  cursor: pointer;
}

/* 単独のチェックボックス。**選択カード（.v2-radio-card）にしない。**
   面が付くと「選ばれた 1 つ」に見え、排他の選択肢と区別できなくなる */
.v2-checkline {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}

/* 曜日など、短いチェックボックスを横に並べる。狭い幅で折り返す */
.v2-daypicker { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---- フォームの中の小区画（DES-UX-020 §8.19。2026-09-04、オーナー指摘） ----
 *
 * **同じ欄の並びが続くと、性質の違う入力が地続きに見える。** 所定勤務パターンの
 * 「毎月の例外」は、上の平日・土日・定休曜日とは効き方が違う（毎週ではなく
 * 毎月）のに、見出しが `.v2-field__label` で同じ 13px、間隔も他の欄と同じ
 * 18px で、**区切りが 1 つも無かった**（実測）。
 *
 * 面で括る。中の入力欄は白のままなので、**塗った側が地、白が入力**と読める。
 */
.v2-formblock {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--cocpi-v2-border-strong);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-subtle);
}

/* **`legend` を枠の切れ目に置かない。** 区画の中の見出しにする。
   `float` は `legend` を通常の流れへ戻す確実な手段（`display: block` は
   ブラウザによって「描かれる legend」の扱いが残る） */
.v2-formblock__title {
  float: left;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
}

.v2-formblock__title + * { clear: left; }

.v2-formblock__lead {
  margin: 0 0 4px;
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
}

/* 毎月の例外の 1 行（DES-ATT-010 §6.0.3、ADR-0038）。曜日・第 N・扱い・時刻を
   横に並べ、狭い幅では折り返す。**行どうしを線で区切る** —— 欄が多く、
   どこまでが 1 つの規則かが読めなくなる。
   **線は `border-strong`** —— 塗った面（`bg-subtle`）の上では `border` が沈む */
.v2-monthly__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--cocpi-v2-border-strong);
}

.v2-monthly__row:first-of-type { border-top: 0; }

/* 時短の 3 欄（開始・終了・休憩）を 1 つの組にする（DES-UX-020 §8.25）。
   **折り返す位置を意味の切れ目に合わせる** —— 素で並べると 1440px では
   「時短の休憩」だけ、1280px では「終了・休憩」が次の行へ落ち、割れ方が
   幅任せになる（2026-09-04 の実測）。組にすると、割れるときは 3 つまとめて落ちる。

   **中はさらに折り返してよい**（390px では 3 つが 1 行に入らない）。
   組の意味は「一緒に落ちる」ことであって、1 行に留まることではない */
.v2-monthly__short {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 16px;
}

/* **`hidden` をクラス側にも明示する**（DES-UX-020 §4.6.1）。地の
   `[hidden] { display: none !important }` はあるが、`display` を持つクラスに
   負ける形を残さない */
.v2-monthly__short[hidden] { display: none; }

/* パスワードの条件（DES-AUTH-010 §4.1）。**入力前に条件を出す。**
   送信してから拒否されるより、入力中に分かるほうが手戻りが少ない */
.v2-rules {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-card);
  background: var(--cocpi-v2-bg-subtle);
  font-size: 13px;
}

.v2-rules__title { margin: 0 0 6px; font-weight: 700; }
.v2-rules ul { margin: 0; padding-left: 1.2em; }
.v2-rules li + li { margin-top: 4px; }
.v2-rules code {
  font-family: inherit;
  color: var(--cocpi-v2-text-secondary);
  word-break: break-all;
}

/* パスワードの強度（DES-UX-020 §4.27）。**強度は目安であり、拒否の根拠にしない。**
   帯とラベルは `password-strength.js` が作る */
.v2-strength { margin-top: 8px; }

.v2-strength__bars { display: flex; gap: 4px; }

.v2-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: var(--cocpi-v2-radius-pill);
  background: var(--cocpi-v2-border);
}

.v2-strength__label { margin: 4px 0 0; font-size: 12px; font-weight: 700; }

/* **色だけで強さを示さない。** 文言（弱い / ふつう / 強い）を必ず伴う */
.v2-strength[data-level="weak"] .v2-strength__bar[data-on] { background: var(--cocpi-v2-error); }
.v2-strength[data-level="weak"] .v2-strength__label { color: var(--cocpi-v2-error); }
.v2-strength[data-level="fair"] .v2-strength__bar[data-on] { background: var(--cocpi-v2-warning); }
.v2-strength[data-level="fair"] .v2-strength__label { color: var(--cocpi-v2-warning); }
.v2-strength[data-level="strong"] .v2-strength__bar[data-on] { background: var(--cocpi-v2-success); }
.v2-strength[data-level="strong"] .v2-strength__label { color: var(--cocpi-v2-success); }

/* 2 列のフォーム。狭い幅では 1 列に落とす。
   前後との間隔は容器（.v2-form の gap）が持つ */
.v2-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* **入力欄の下端を列どうしで揃える。** 片方だけ補足文を持つと、
   ラベルの高さが違って入力欄の位置がずれる（レビューで指摘された
   「所属が下にずれる」と同じ family）。ラベルと補足は上に置いたまま、
   操作部品を下端へ寄せる */
.v2-form-grid > .v2-field {
  display: flex;
  flex-direction: column;
}

.v2-form-grid > .v2-field > :is(.v2-input, .v2-select, .v2-textarea, .v2-unit) {
  margin-top: auto;
}

/* **列の中身が列より広がらない**（`min-width: 0`）。`1fr` の列は既定で中身の
   最小幅より狭くならない。**iPad（iOS の WebKit。Chrome も同じエンジン）の
   時間の欄は独自の最小幅を持ち `width: 100%` でも縮まず**、日別編集の出勤・
   退勤と休憩の欄が列を押し広げてダイアログの右へはみ出し、境目で重なった
   （2026-09-13 のオーナー指摘。PC の Chrome では起きない）。DES-UX-020 §8.30 */
.v2-form-grid > * { min-width: 0; }

/* **日付と時間の欄は、器より少し狭い決まった幅**（DES-UX-020 §8.30。2026-09-14 の
   オーナー選択）。**iPad の WebKit は、日付と時間の欄を CSS で決めた幅より約
   15〜22px 広く描いた** —— 1 列にした日別編集の時間の欄が「休暇にする」の枠より
   右へ出てダイアログの端まで届き、残業の申請の「日」（12rem の器）が隣の欄へ
   食い込んだ（スクリーンショットから測った値。2 列でも 1 列でも足される量が同じ）。
   手元の WebKit 26.4 と Chromium では再現せず、原因を確かめられない。**足されても
   器に収まる幅にする。** 欠勤・特別交通費の短い欄と見た目も揃う。
   値は他の欄と同じく左に揃える（WebKit の既定では中央に寄る）。選ぶ仕組み
   （ホイール・カレンダー）は標準のまま使う（appearance を触らない。§4.5 の方針） */
.v2-input[type="time"] { width: 9rem; min-width: 0; max-width: 100%; }
/* 日付は `10.5rem`（168px）。**よく入る器は `.v2-field--narrow`（12rem）で、余りを
   24px 取る**（iPad で足される 15〜22px を越える）。11rem では余りが 16px だった
   （実測）。PC の Chromium で「2026/09/14」とカレンダーの印の間に空きが残る */
.v2-input[type="date"] { width: 10.5rem; min-width: 0; max-width: 100%; }
.v2-input:is([type="date"], [type="time"])::-webkit-date-and-time-value { text-align: left; }

/* **条件で見せる欄は `hidden` で消せること**（DES-UX-020 §4.6.1）。
   `hidden` は作者の `display` に負ける（cocpi-v2-tables.css の同じ規則を参照）。
   地には `[hidden] { display: none !important }` があるが、**欄の側にも
   明示する**（地の規則が変わっても、ここだけで閉じている） */
.v2-field[hidden] { display: none; }

@media (max-width: 480px) {
  .v2-form-grid { grid-template-columns: 1fr; }
}

/* **時間の組は、タッチ端末とタブレット幅以下で縦 1 列**（DES-UX-020 §8.30。
   2026-09-13 のオーナー選択）。上の `min-width: 0` を置いても、**iPad の WebKit
   の時間の欄は列より縮まず**、日別編集で右へはみ出して重なった（手元の WebKit
   26.4 と Chromium では再現しない。iPad の版が古い）。列の幅に頼らない形にする。
   **タッチ端末（`pointer: coarse`）は幅によらず 1 列** —— iPad の横向きは
   1194px 以上あり、幅だけで分けると 2 列に残る。PC の 1280px 以上は 2 列のまま */
@media (pointer: coarse), (max-width: 1024px) {
  .v2-form-grid--time { grid-template-columns: 1fr; }
}

/* 畳める区画（DES-ATT-010 §4.0.1.1）。大半の日は選ぶことがない項目を、
   既定で閉じておく。**畳んだ状態でもいまの値が要約に出る** */
.v2-disclosure {
  border: 1px solid var(--cocpi-v2-border);
  border-radius: var(--cocpi-v2-radius-control);
  background: var(--cocpi-v2-bg-subtle);
}

.v2-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 700;
}

.v2-disclosure__value {
  margin-left: auto;
  color: var(--cocpi-v2-text-secondary);
  font-weight: 400;
  font-size: 13px;
}

.v2-disclosure[open] > summary { border-bottom: 1px solid var(--cocpi-v2-border); }
.v2-disclosure > .v2-field { margin: 12px; }

/* 時間 + 分（DES-ATT-010 §4.0.1.2）。**1 欄の HH:MM をやめた。**
   コロンを打つ必要があり、`030` も `0.5` も弾いていた。
   並びは `.v2-field-row` に相乗りし、欄の幅だけをここで決める */
.v2-duration .v2-unit { flex: 0 1 9rem; }
.v2-duration .v2-input { min-width: 0; }

/* ---- 期間の入力（開始 〜 終了）。DES-UX-020 §8.14 --------------- */

/* **組であることを枠で示す。** 2 列のグリッドへ素で並べると、同じ期間の
   開始と終了が**別の行・別の列へ割れる**（労務情報の休業で実測。産前産後
   休業の開始が右上、終了が左下に出た）。

   `fieldset` にするのは、**読み上げが legend を各欄の前に読む**ため。
   見出しが「何の期間か」、小さい見出しが「どちらの端か」を言う */
.v2-daterange { grid-column: 1 / -1; }

/* **欄の上限は 32rem のまま**（§8.1.2）。組で 1 つの欄とみなし、
   2 つの日付で 32rem を分ける —— 片側だけ広げると、どちらが主か読めなくなる */
.v2-daterange__pair {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 32rem;
}

.v2-daterange__slot {
  display: grid;
  gap: 4px;
  flex: 1 1 11rem;
  min-width: 0;
}

.v2-daterange__sub {
  color: var(--cocpi-v2-text-secondary);
  font-size: 12px;
}

/* 区切りは飾りであり読み上げから外す（markup 側で `aria-hidden`）。
   欄の下端に合わせる */
.v2-daterange__sep {
  padding-bottom: 10px;
  color: var(--cocpi-v2-text-secondary);
}

/* **折り返したら区切りを出さない。** 行頭に「〜」だけが残る。
   小さい見出し（開始・終了）が組を保つ */
@media (max-width: 519px) {
  .v2-daterange__slot { flex: 1 1 100%; }
  .v2-daterange__sep { display: none; }
}

/* 期間ではない組（出産予定日と出産日、加入と資格取得日）。**「〜」を出さない**
   —— 期間だと読ませない。枠と見出しだけで組を示す */
.v2-fieldgroup { grid-column: 1 / -1; }

.v2-fieldgroup__pair {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-width: 32rem;
}

.v2-fieldgroup__pair > .v2-field { flex: 1 1 11rem; }

/* 押している間（DES-UX-020 §8.29。2026-09-13）。ホバーと違う色 */
.v2-radio-card:active { background: var(--cocpi-v2-brand-soft-strong); }