/* Buttons size to their label (Spanish runs ~30% longer). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 500; line-height: 1.2; white-space: nowrap;
  padding: 10px 22px; border-radius: var(--radius-control); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled { cursor: not-allowed; opacity: .5; }

/* Primary: the brand-deep pill with ivory text (brand book). `--ink` is the same button. */
.btn--primary, .btn--ink { background: var(--brand-deep); color: var(--ivory); font-weight: 600; border-radius: var(--radius-tag); }
.btn--primary:hover, .btn--ink:hover { background: var(--topbar-active); }
.btn--outline { background: var(--panel); color: var(--ink); border-color: var(--border); }
.btn--outline:hover { background: var(--panel-sunken); }
.btn--danger-text { background: transparent; color: var(--danger-text); padding-inline: 14px; }
.btn--danger-text:hover { background: var(--failed-tint); }
.btn--link { background: transparent; color: var(--accent); padding-inline: 14px; }

.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--block { width: 100%; padding-block: 11px; }

/* button_to wraps a button in a form; keep it inline. */
form.button_to { display: inline; }