/* One button system for the web app (docs/superpowers/specs/2026-10-14-buttons-and-
   navigation-design.md). Five kinds on one base class, two sizes, and 44px on touch
   screens whatever the size. Reads the app's tokens (--fill, --ink-2, --rule-2, ...),
   which the standalone pages define too (templates/_page_tokens.html). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 32px;
  padding: 5px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius, 6px);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* .btn's display would otherwise beat the browser's own rule for [hidden]. */
.btn[hidden] { display: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: default; pointer-events: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary { color: var(--on-fill); background: var(--fill); border-color: var(--fill); }
.btn-primary:hover { background: var(--fill-hover); border-color: var(--fill-hover); }
.btn-primary:active { background: var(--fill-press); border-color: var(--fill-press); }

.btn-secondary { color: var(--ink); background: var(--bg-raised); border-color: var(--rule-2); }
.btn-secondary:hover { background: var(--bg-2); border-color: var(--ink-3); }
.btn-secondary:active { background: var(--bg-3); }

.btn-quiet { padding-left: 8px; padding-right: 8px; }
.btn-quiet:hover { color: var(--ink); background: var(--bg-2); }
.btn-quiet:active { background: var(--bg-3); }

.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.btn-danger:hover { background: var(--red-soft); }
.btn-danger.is-filled { color: var(--on-accent); background: var(--red); border-color: var(--red); }
.btn-danger.is-filled:hover { filter: brightness(0.94); background: var(--red); }

.btn-icon { width: 32px; min-width: 32px; padding: 0; }
.btn-icon:hover { color: var(--ink); background: var(--bg-2); }
.btn-icon:active { background: var(--bg-3); }
.btn-icon .icon { width: 18px; height: 18px; }
/* An icon button that is also primary (the chat's send) keeps the primary's colours. */
.btn-icon.btn-primary:hover { color: var(--on-fill); background: var(--fill-hover); }

.btn-sm { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
.btn-icon.btn-sm { width: 28px; min-width: 28px; padding: 0; }
.btn-icon.btn-sm .icon { width: 16px; height: 16px; }

.btn-round { border-radius: 50%; }

@media (pointer: coarse) {
  .btn, .btn-sm { min-height: 44px; }
  .btn-icon, .btn-icon.btn-sm { width: 44px; min-width: 44px; }
}