/* ============================================================
   パスワード入力欄の共通スタイル（マザーDESIGN.md 1章の配布アセット、issue #61）
   ラベル・入力欄ラッパー・文字数カウンター・マスク切替アイコンの構造を定義する。

   背景: GiftLink_mock PR #522で、この部分のCSSが画面ごと（user/auth/配下の
   login.html・accept-invite.html・register-complete.html・reset-password.html）の
   <style>タグ内に重複コピペされ、「マスク切替アイコンの色・太さが画面間でズレる」という
   同期崩れが実際に起きた。1ファイルへ集約し、各画面は
     <link rel="stylesheet" href="/shared/password-field.css">
   のように読み込むだけにする（画面ごとの<style>タグ内へ同じ定義を再度書かない）。

   GiftLink_mock PR #522はあくまで「共通CSSファイルに集約し、linkタグで読み込むだけにする」
   というやり方（パターン）の参考であり、色・数値・クラス名をそのまま転用したものではない。

   ---- CSS変数について ----
   色・角丸・フォントサイズ等の具体的な値は、プロダクトごとのデザインシステム（CSS変数）に
   依存する部分が大きく完全な決め打ちが難しいため、すべて var(--c-xxx, フォールバック値) の
   形で書いてある（templates/shared/modal.cssと同じ方針）。ここで使っている
   --c-primary・--c-err・--c-ok・--c-ink-900・--c-ink-500・--c-line・--c-line-soft・--r-md
   は、megria-salon-system・GiftLink_mockが実際に使っている変数名の例を踏まえた「一般的な
   命名の一例」であり、automation-core側がこの命名を強制するものではない。
   導入先に同名の変数体系が既にあればそのまま自動的に使われ、無ければ後述のフォールバック値が
   使われるので、CSS変数を用意しなくても最低限は動く。導入先の命名がこれと異なる場合は、
   このファイルをコピーした後に導入先の変数名へ読み替える（var(--c-primary, #2563EB) の
   --c-primaryの部分を導入先の変数名に変更する、または導入先の:root側で
   --c-primary: var(--導入先の変数名); のようにエイリアスしてもよい）。

   ---- レイアウト崩れを避ける設計（重要） ----
   megria-salon-systemへの導入で、パスワード欄をラップする要素（.pwd-field-wrap）を
   親の<label>要素（多くのプロダクトでdisplay未指定＝ブラウザ既定のinlineのまま使われている）の
   中に追加した際、ラップ要素をdisplay:block や display:inline-block にすると、親要素が
   複数の断片（anonymous block）に分割されて描画され、パスワード欄が潰れて表示される、という
   レイアウト崩れが実際に何度も発生した（getClientRects()で検証したところ、本来1つのはずの
   親<label>が3つの矩形に分かれていた）。
   最終的に機能した解決策は、.pwd-field-wrapを display: inline-flex にすることで、
   親要素（<label>等）側をdisplay:blockに変更する必要をなくし、既存のinlineフローを
   壊さずに済ませる、というもの。そのため、このファイルでは
     .pwd-field-wrap { display: inline-flex; }
   をデフォルトの設計として採用している（display:block・inline-blockや、親要素の
   display変更を前提にした設計は避けている）。導入先で意図的にブロック要素として
   扱いたい場合（親が既にdisplay:blockのlabelやdivである場合など）は、
   .pwd-field-wrap に対して個別に width:100% を指定すれば、inline-flexのままでも
   ブロック要素同様に横幅いっぱいに広げられる（下記コメント参照）。

   ---- レイアウトパターンは2種類（issue #64、row-variant） ----
   カウンター・マスク切替ボタンの配置には2パターンある。どちらも
   .pwd-field-wrap { display: inline-flex; } という上記の安全設計は共通で満たす。

   1. 重ね表示パターン（デフォルト。.pwd-field-wrapに何も修飾クラスを付けない）
      入力欄に padding-right を確保し、カウンター・トグルボタンを position:absolute で
      入力欄の上に重ねて表示する。GiftLink_mockが採用（PR #522由来）。
   2. 横並びパターン（.pwd-field-wrap--row 修飾クラスを追加）
      入力欄・カウンター・トグルボタンを .pwd-field-wrap（inline-flex）の
      flex子要素として横に並べる。megria-salon-systemが採用（issue #64で
      正式パターン化）。入力欄自体が枠線・背景を持たない透明input（親の<label>等が
      デザインを担う構成）だと、重ね表示のpadding-right計算がズレやすいため、
      このパターンの方が安全に導入できることが多い。

   どちらを選ぶべきかの判断基準は skills/password-form-setup/SKILL.md
   「3. 対象プロダクトの既存デザインシステムを先に調査する」を参照。
   既存導入済みプロダクト（GiftLink_mock＝重ね表示、megria-salon-system＝横並び）の
   見た目・挙動を変えないよう、デフォルト（無修飾）は重ね表示のまま維持している。
   ============================================================ */

.pwd-field-wrap {
  /* 親要素がinlineのままでも安全に機能させるための設計（上記コメント参照）。
     block/inline-blockにしないこと。横幅いっぱいに広げたい場合はこの要素自体に
     width:100% を追加で指定する（displayをinline-flexのまま保つ）。 */
  display: inline-flex;
  align-items: center;
  position: relative;
}

.pwd-field-wrap .input,
.pwd-field-wrap input[type="password"],
.pwd-field-wrap input[type="text"] {
  /* カウンター・トグルボタン分の右余白。カウンターだけ／トグルだけの画面でも
     余白が余るだけで見た目上の実害はほぼ無いため、両方分を確保する固定値にしている */
  padding-right: 76px;
  box-sizing: border-box;
}

.pwd-field-wrap .input-counter {
  position: absolute;
  right: 40px;
  font-size: 12px;
  line-height: 1;
  color: var(--c-ink-500, #6B7280);
  pointer-events: none;
  white-space: nowrap;
}
/* password-field.js の wirePasswordField() が付け外しするクラス。
   is-touched が付く前（未入力・未フォーカス）はグレーのまま、
   フォーカス後は充足状況に応じて ok/err の色に切り替わる */
.pwd-field-wrap .input-counter.is-ok { color: var(--c-ok, #16A34A); }
.pwd-field-wrap .input-counter.is-touched:not(.is-ok) { color: var(--c-err, #DC2626); }

.pwd-toggle {
  position: absolute;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--r-md, 8px);
  color: var(--c-ink-500, #6B7280);
  /* トグルボタン自体もinline-flexにしておくことで、中のアイコン(material symbols等)を
     中央揃えしつつ、外側の.pwd-field-wrapと同じinline系統のレイアウトに揃える */
}
.pwd-toggle:hover { background: var(--c-line-soft, #F3F4F6); }
.pwd-toggle:focus-visible { outline: 2px solid var(--c-primary, #2563EB); outline-offset: 1px; }

/* マスク切替アイコンの色・太さが画面間でズレていた実例（GiftLink_mock PR #522）を踏まえ、
   フォントサイズ・太さ(font-variation-settings)をここで固定する。Material Symbols以外の
   アイコン手段（SVG等）を使う場合は、.pwd-toggle svg 等に読み替えて同様に固定するとよい */
.pwd-toggle .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: inherit;
}

/* ============================================================
   横並びパターン（.pwd-field-wrap--row 修飾クラス、issue #64）

   上のコメント「レイアウトパターンは2種類」参照。.pwd-field-wrap に
   このクラスを追加するだけで、重ね表示から横並びに切り替わる
   （HTML構造・付ける他のクラスは変えなくてよい。megria-salon-systemの
   実装を一般化したもの）。デフォルト（.pwd-field-wrap単体）の重ね表示は
   このブロックの影響を受けず、GiftLink_mock等の既存導入には影響しない。

   .pwd-field-wrap.pwd-field-wrap--row のように2クラスを連ねたセレクタに
   しているのは、単純に .pwd-field-wrap .input-counter 等（上のデフォルト
   ルール）と同じ詳細度になり、CSSの読み込み順序に結果が左右されるのを
   避けるため（詳細度を1段階上げて確実にこちらを勝たせる）。

   重要（2026-08-20、megria-salon-systemへのリハーサル導入で実際に発生）:
   デフォルトの.pwd-field-wrapとは異なり、このパターンはwidth:100%を
   デフォルトで持つ。親要素（<label>等）がdisplay未指定（inline既定）の
   ままだと、widthを持つinline-flex子要素の存在によって親がanonymous
   blockに分割され、レイアウトが崩れることがある（getClientRects()で
   親要素が複数矩形に分かれることで確認できる。デフォルトの重ね表示
   パターンはwidthを持たないためこの問題が起きにくいが、横並びパターンは
   width:100%を持つぶんこの崩れが起きやすい）。
   横並びパターンを選ぶ画面では、親要素（<label>等）を display: block
   にすること（対象プロダクト全体のlabelスタイルに影響させたくない場合は、
   パスワード欄の親要素だけに限定したモディファイアクラスを別途用意して
   block化するとよい。skills/password-form-setup/SKILL.md「3. 対象
   プロダクトの既存デザインシステムを先に調査する」も参照）。
   ============================================================ */
.pwd-field-wrap.pwd-field-wrap--row {
  /* 重ね表示のposition:relativeはそのままでよい（横並びでは使わないが害もない） */
  gap: var(--pwd-field-row-gap, 4px);
  width: 100%;
}

.pwd-field-wrap.pwd-field-wrap--row .input,
.pwd-field-wrap.pwd-field-wrap--row input[type="password"],
.pwd-field-wrap.pwd-field-wrap--row input[type="text"] {
  /* 横並びではカウンター・トグル分の余白をpadding-rightで確保する必要が無い。
     デフォルトルールが入れた padding-right:76px を打ち消し、入力欄自身の
     クラス（導入先の.input等）が本来持っている値に戻す */
  padding-right: revert;
  flex: 1 1 auto;
  min-width: 0;
}

.pwd-field-wrap.pwd-field-wrap--row .input-counter,
.pwd-field-wrap.pwd-field-wrap--row .pwd-toggle {
  /* absoluteでの重ね書きをやめ、通常のflex子要素として横に並べる
     （position:staticにするとtop/right/bottom/leftの指定は無視される） */
  position: static;
  flex: none;
}

/* ラベルは「一例」の提供に留める（多くのプロダクトは既にフォーム全体共通のラベルスタイルを
   持っており、パスワード欄専用のラベルスタイルを別途強制すると衝突しやすいため）。
   .pwd-label クラスを使わず、導入先の既存ラベルクラスをそのまま使ってよい */
.pwd-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-900, #1A1A1A);
  margin-bottom: 6px;
}