.btn {
  /* inline-flex, not inline-block: an <a> and a <button> with identical padding
     still render at different heights as inline-block, because the button's
     default line-height and baseline alignment differ. Cancel is a link and
     Save is a submit, so they have to be normalised to match. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  min-height: 2.25rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}
.btn:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-alt); }

/* A disabled action still shows (so the reader knows it exists) but reads as
   unavailable and cannot be hovered or clicked. */
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Row-level actions need to sit inside a table row without dominating it. */
.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: 600; }
.btn-link {
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  color: var(--accent);
  text-decoration: underline;
  font-size: var(--text-xs);
}