/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 44px; padding: 0.75rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--radius-control);
  font: 500 0.9375rem/1 var(--font-body);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn:active { transform: scale(0.98); }
.btn--icon { padding-right: 0.5rem; }
.btn__icon { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-left: var(--space-xs); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-accent-ink) 18%, transparent); font-size: 0.875rem; transition: transform var(--dur-mid) var(--ease-out); }
.btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.05); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--outline { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent-2); }
.link {
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
  background: linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-mid) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.link:hover { background-size: 100% 2px; color: var(--color-accent-2); }