/* ボタン。ふつう（白い地に枠）・主（案件の色）・削除・小さい・文字だけ。
   文字は箱の上下の真ん中。ホバーは背景に溶けないよう枠の色も変える。押した時の色は角丸に沿う（タップの四角い色を出さない）。
   使えない時は opacity で薄くせず、専用の文字色と背景で比 3 前後を保つ（メモ ui-review-checks-green-tests-miss）。 */
.hk-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--hk-sp-2);
  height: var(--hk-ctl-h); padding: 0 var(--hk-sp-6); margin: 0;
  border: var(--hk-bw) solid var(--hk-line-ctl); border-radius: var(--hk-radius); background: var(--hk-surface); color: var(--hk-text);
  font-family: var(--hk-font); font-size: var(--hk-fs-sm); font-weight: var(--hk-fw-md); line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--hk-t-fast) var(--hk-ease-out), border-color var(--hk-t-fast) var(--hk-ease-out), transform var(--hk-t-fast) var(--hk-ease-out); }
.hk-btn:hover { background: var(--hk-surface-3); border-color: var(--hk-text-2); }
.hk-btn:active { transform: scale(.98); }
.hk-btn:focus-visible { outline: var(--hk-focus); outline-offset: 2px; }
.hk-btn-primary { background: var(--hk-accent); border-color: var(--hk-accent); color: var(--hk-on-accent); }
.hk-btn-primary:hover { background: var(--hk-accent-strong); border-color: var(--hk-accent-strong); }
/* 削除など、戻せない操作 */
.hk-btn-danger { background: var(--hk-surface); border-color: var(--hk-danger-dot); color: var(--hk-danger); }
.hk-btn-danger:hover { background: var(--hk-danger-soft); border-color: var(--hk-danger); }
.hk-btn-sm { height: var(--hk-ctl-h-sm); padding: 0 var(--hk-sp-4); }
.hk-btn:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background: var(--hk-surface-3); border-color: var(--hk-line-strong); color: var(--hk-mark); cursor: default; transform: none; }
.hk-btn > svg { flex: none; width: 16px; height: 16px; }
/* 処理中（aria-busy）は押せないが、見た目は元のまま（読み込み中の印を中に置く。loading.css） */
.hk-btn[aria-busy="true"] { cursor: progress; transform: none; }
/* 文字だけのボタン（リンクと同じ見た目で、押すと画面の中で何かが起きる物） */
.hk-link { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--hk-accent-strong); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hk-link:focus-visible { outline: var(--hk-focus); outline-offset: 2px; border-radius: var(--hk-radius-sm); }