/* Shared action hierarchy. Filled buttons are reserved for the single
   dominant action in a page-level group; repeated inline actions use the
   quieter secondary treatment. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:hover { background: var(--surface-sunken); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

.btn-secondary { border-color: var(--border-strong); }

.btn-danger {
  border-color: var(--danger);
  background: var(--danger-tint);
  color: var(--danger);
}

.btn-danger:hover { background: var(--danger); color: var(--surface); }