/* ==============================================
   ボタンの共通部品 (chub-btn)
   ==============================================

   window.buttonHtml() / buttonEl() 専用の内部クラス。
   **手書き禁止** (check-design-tokens.mjs が止める)。
   設計: docs/design/2026-08-08_button_component_design.md
   値はデザイン設計図 (docs/DESIGN_TOKENS.md) の段階から選ぶ。

   軸は 2 つ:
   - 強さ  --fill (塗り) / --outline (枠) / --quiet (控えめ)
   - 意味  --danger (危ない) / --positive (承認などの肯定)。 無指定 = 普通
   組み合わせ自由 (例: quiet + danger = 控えめな削除)。

   処理中 (loading) と押せない (disabled) は ui.css の
   button.loading / button[disabled] が要素単位で面倒を見る。 */

.chub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  /* 枠のある / 無いで大きさがガタつかないよう、 枠は常に 1px 確保して色だけ変える */
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  /* base (設計図 3.2)。 rem なので文字サイズ設定に追従する */
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none; /* a をボタンの見た目にしたとき用 */
  transition:
    background var(--animation-duration, 0.2s) ease,
    border-color var(--animation-duration, 0.2s) ease,
    color var(--animation-duration, 0.2s) ease;
}

/* 中のアイコンの大きさ。 **部品が自分で面倒を見る**。
   getIcon 経由なら svg に width/height が付くが、 HTML に直書きされた svg には
   寸法が無く、 **親いっぱいに広がって崩れる** (2026-08-12 の実験台で実際に踏んだ:
   アイコンが 122px になりボタンの高さが 132px になった)。
   旧クラス側が `svg { width: 13px }` で抑えていたのを、 部品へ引き継ぐ。 */
.chub-btn > svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.chub-btn--sm > svg {
  width: 14px;
  height: 14px;
}

/* アイコンだけのときは 20px (設計 doc 0-2b) -- サイズ指定より後に書いて勝たせる */
.chub-btn--icon > svg {
  width: 20px;
  height: 20px;
}

.chub-btn:focus-visible {
  outline: 2px solid var(--color-accent-bg);
  outline-offset: 2px;
}

/* ---- 強さ ---- */

.chub-btn--fill {
  background: var(--color-accent-bg);
  color: var(--color-button-text);
}

.chub-btn--fill:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.chub-btn--outline {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.chub-btn--outline:hover:not(:disabled) {
  border-color: var(--color-accent-bg);
}

/* 控えめ。 枠は残す (枠なしだとボタンと分かりにくい、 2026-06-04 ラケ指摘の踏襲) */
.chub-btn--quiet {
  background: rgba(var(--color-fg-rgb, 44, 62, 80), 0.06);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.chub-btn--quiet:hover:not(:disabled) {
  background: rgba(var(--color-fg-rgb, 44, 62, 80), 0.12);
  color: var(--color-text);
}

/* ---- 意味 ---- */

/* 危ない: 文字と**枠**を赤にする。
   枠の色は本来「強さ」 が決めるが、 危ない操作の赤枠だけは例外にしている。
   2026-08-11 ラケ判断「赤枠を取ったのだけやばいかも。 注意喚起弱くなる」。
   赤枠は強さの情報ではなく**警告そのもの**なので、 意味 (tone) が枠まで支配する。 */
.chub-btn--danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.chub-btn--danger:hover:not(:disabled) {
  color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

/* 塗り x 危ない: 塗り用の赤 (文字用と分離済み、 2026-08 の色監査) */
.chub-btn--fill.chub-btn--danger {
  background: var(--color-danger-fill);
  /* 枠は塗りと同色にする。 --danger の赤枠をそのまま残すと、
     塗り (濃い赤) の外側に明るい赤の輪郭が出て二重に見える */
  border-color: var(--color-danger-fill);
  color: var(--color-button-text);
}

.chub-btn--fill.chub-btn--danger:hover:not(:disabled) {
  background: var(--color-danger-fill-hover);
  border-color: var(--color-danger-fill-hover);
  color: var(--color-button-text);
}

/* 肯定 (承認・出勤など常設の緑) */
.chub-btn--positive {
  color: var(--color-success);
}

.chub-btn--positive:hover:not(:disabled) {
  color: var(--color-success-hover);
}

.chub-btn--fill.chub-btn--positive {
  background: var(--color-success);
  color: var(--color-button-text);
}

.chub-btn--fill.chub-btn--positive:hover:not(:disabled) {
  background: var(--color-success-hover);
  color: var(--color-button-text);
}

/* ---- 大きさ・折り返し ---- */

.chub-btn--sm {
  padding: 4px 10px;
  font-size: 0.75rem;
}

/* 指で押す前提の場所 (モバイルのヘッダー、 一覧の並び替えなど)。
   WCAG 2.5.5 のタッチターゲット 44px に近い、 **意図的に大きくしてある**場所のための段。

   なぜ 2 段あるか (2026-08-13 に追加、 設計 doc 0-2b):
   デスクトップの密な操作 (メッセージの操作ボタンなど) は 30px (--icon) が正しい --
   本文より操作ボタンが目立って邪魔にならないため。 一方でタッチ主体の場所は指で押せる
   必要があり、 30px では小さい。 **どちらが正しいかは場所で決まる**ので段を 2 つ持つ。

   **アイコンの見た目 (svg 20px) はどちらも同じ**。 広がるのは操作領域だけ。 */
.chub-btn--touch {
  min-height: 44px;
  padding: 12px 20px;
}

.chub-btn--icon.chub-btn--touch {
  width: 40px;
  height: 40px;
  min-height: 0; /* アイコンだけのときは正方形を保つ (上の 44px に負けさせない) */
  padding: 8px;
}

.chub-btn--nowrap {
  white-space: nowrap;
}

/* ---- アイコンだけのボタン (2026-08-12) ----

   ラケ判断 (設計 doc 0-2b): **見た目の大きさと操作領域を分ける**。

   小さいのは欠点ではなく**本文より操作ボタンが目立って邪魔にならないため**の意図なので、
   アイコンは 20px 前後のまま大きくしない。 押しにくさは**周りの余白**で解く
   (見た目 20px / 押せる範囲 28〜32px 相当)。

   **透明なまま広げるのはやらない**。 勤怠の `::after { inset: -8px -4px }` は
   押せる場所が最後まで分からない。 ここでは hover / focus / 押下で
   **その領域に背景を出す** -- 触れたときに「ここが操作領域」 と分かるのが肝。

   狙い: 普段は邪魔をしないが、 使おうとしたときには操作できると分かる */

/* 強さ (fill / outline) と組み合わせたときは、 そちらの背景を尊重する。
   ここで background を指定しているのは「強さの指定が無いとき」 の既定として。
   **--icon は --fill より後に書いてあるので、 素朴に background を書くと塗りを消す**
   (2026-08-13 に送信ボタンの絵を作って気づいた) */
.chub-btn--icon:not(.chub-btn--fill):not(.chub-btn--outline) {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.chub-btn--icon {
  /* この padding が操作領域。 アイコン 20px + 上下 4px + 枠 1px で **30px**
     (ラケ指定の 28〜32px の真ん中)。 6px にすると 34px になり指定を超える */
  padding: 4px;
  /* **JS が style="display: inline-block" を直接付けてくる画面がある**
     (ノート詳細の表示制御など 13 箇所)。 インラインスタイルは CSS より強いので
     .chub-btn の inline-flex が負けて中身が縦に潰れる。
     大きさを明示して、 どの display でも形が保たれるようにする (2026-08-12 に実際に踏んだ) */
  width: 30px;
  height: 30px;
}

/* アイコンだけのときの小さい段 (2026-08-17 ラケ判断)。

   本文にぴったり寄り添う密な場所 -- チャットのメッセージ操作 (コピー / 編集 / 返信 /
   固定 / 削除 / ノート化) -- は 30px でも大きい。 実機で並べたら、 部品へ移していない
   AI ボタン (旧 .message__action-btn = 20px) だけが小さく、 **移行した側が揃わなかった**。
   ラケの判断は「AI ボタンに合わせる」。

   これで アイコンだけのボタンの段が 3 つ揃う:
     sm    20px  本文の邪魔をしない密な場所 (メッセージの操作)
     md    30px  既定。 ふつうの画面の操作
     touch 40px  指で押す前提の場所

   呼び出し側は前から size: 'sm' を渡していたが、 アイコンだけのときは寸法が
   決まっておらず **宣言が効いていなかった**。 ここで意味を与える
   (呼び出し側の書き換えは不要)。 */
.chub-btn--icon.chub-btn--sm {
  padding: 2px;
  width: 20px;
  height: 20px;
}

/* 箱が 20px なので、 中は 16px。 20px のままだと箱からはみ出す */
.chub-btn--icon.chub-btn--sm > svg {
  width: 16px;
  height: 16px;
}

/* 触れたときに操作領域が見える (「透明なだけ」 との決定的な違い)。
   fill / outline と組み合わせたときは、 そちらの hover に任せる */
.chub-btn--icon:not(.chub-btn--fill):not(.chub-btn--outline):hover:not(:disabled),
.chub-btn--icon:not(.chub-btn--fill):not(.chub-btn--outline):focus-visible,
.chub-btn--icon:not(.chub-btn--fill):not(.chub-btn--outline):active:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* 危ない操作は触れたときに赤で分かる */
.chub-btn--icon.chub-btn--danger:hover:not(:disabled),
.chub-btn--icon.chub-btn--danger:focus-visible {
  color: var(--color-danger);
}

/* 並ぶときは間を空ける (誤操作しにくく)。 入れ物が gap を持たない場合の保険 */
.chub-btn--icon + .chub-btn--icon {
  margin-left: 2px;
}
/* ---- 押し込み状態 (aria-pressed="true") ----
   切り替えボタンで「今これが選ばれている」 を示す。 属性で効くので、 呼び出し側は
   attrs: { 'aria-pressed': 'true' } を渡すだけでいい (見た目クラスを足さない)。

   2026-08-11 に色覚シミュレーションの切り替えで実際に踏んだ穴を塞ぐもの。
   そこは aria-pressed を付けたうえで admin-action-button--active も付けていたが、
   **そのクラスの CSS がどこにも無く**、 選択中が目で見て分からなかった
   (読み上げソフトには伝わるが画面では分からない、 という片肺状態)。
   色だけに頼らないルール (設計図 1.1) に従い、 背景と枠と文字の太さの 3 つで変える */

.chub-btn[aria-pressed='true'] {
  background: var(--color-accent-bg);
  border-color: var(--color-accent-bg);
  color: var(--color-button-text);
  font-weight: 600;
}

.chub-btn[aria-pressed='true']:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ---- 完了の一時表示 (buttonDone) ----
   数秒だけ「できた」 を合図する。 色だけに頼らず文字も変わる (buttonDone 側で 'OK' 等へ)。
   強さ指定より後に書いて、 一時的にどの見た目にも勝つ */

.chub-btn--done,
.chub-btn--done:hover {
  background: transparent;
  border-color: var(--color-success);
  color: var(--color-success);
}