/* Primary button — opt in via .btn class or `f.submit` (which renders <input type="submit">).
   `<button type="submit">` from `button_to` is intentionally NOT styled globally; those
   buttons either get the `.btn` class explicitly or have their own component styling
   (e.g. .quest-card__marker). */
.btn,
input[type="submit"] {
  font: inherit;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  min-height: 44px;       /* WCAG touch target */
  transition: transform 120ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.btn:hover,
input[type="submit"]:hover { box-shadow: var(--shadow-md); }

.btn:active,
input[type="submit"]:active { transform: scale(0.98); }

.btn--ghost {
  background: var(--color-card);
  color: var(--color-primary);
}

.btn[disabled],
input[type="submit"][disabled] { opacity: 0.5; cursor: default; }

/* Visible keyboard focus on every interactive element. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}