/* v6.331.0: 一括処理の「テスト／業務」選択（4 画面共有）。
   採用サンプル docs/samples/bulk_test_mode_samples.html の【案 B】準拠。

   【DESIGN.md 準拠のための調整】
     サンプルは警告帯にリテラルカラー（#fff8e6 / #7a4a00）を使っていたが、DESIGN.md §1 は
     「各ページでは CSS 変数のみを使い、リテラルカラーの直書きは避ける」と定めている。
     既に 4 モーダルの注意書きが rgba(242,153,0,.10) + var(--color-amber) で組まれているので
     そちらに揃える（見た目は同じ・新規色トークンを作らない #92）。

   クラス名は kbm- プレフィックス。3 種類の基盤 CSS（.modal-overlay / .cc-overlay / <dialog>）の
   どれに置かれても衝突しないようにしている。 */

.kbm-wrap {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 6px;
  margin: 0 0 12px;
  background: var(--color-surface-2);
}

.kbm-legend {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 2px;
  padding: 8px 14px 0;
}

.kbm-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 14px;
  border-radius: 11px;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.2, 0, 0, 1);
}

.kbm-row:hover { background: var(--color-surface); }

.kbm-row input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.kbm-t {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

.kbm-x {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 3px;
}

.kbm-x b { color: var(--color-text); }

/* 選択中: 塗りではなく内側 1px の線で示す（DESIGN.md §0-2「塗りタイルを並べない」） */
.kbm-row.is-on {
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

/* 業務モード選択時の注意（既存モーダルの注意書きと同じアンバー系） */
.kbm-warn {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--color-text);
  background: rgba(242, 153, 0, 0.10);
  border: 1px solid rgba(242, 153, 0, 0.25);
  border-left: 4px solid var(--color-amber);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
}

.kbm-warn[hidden] { display: none; }