.mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--mn-text-sm)/1 var(--mn-font-body);
  padding: 14px 20px; border-radius: var(--mn-radius); cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.mn-btn { transition: background var(--mn-dur-xs) ease, color var(--mn-dur-xs) ease,
                      transform var(--mn-dur-xs) ease, opacity var(--mn-dur-xs) ease; }

.mn-btn--primary { background: var(--mn-violet); color: #fff; }
.mn-btn--primary:active { background: var(--mn-violet-strong); transform: scale(.96); }

.mn-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--mn-dark-fg);
  outline: 2px solid var(--mn-ink);
  outline-offset: 3px;
}

.mn-btn--on-violet { background: #fff; color: var(--mn-violet); }
.mn-btn--on-violet:active { background: var(--mn-violet-tint); transform: scale(.96); }

@media (hover: hover) {
  .mn-btn--primary:hover { background: var(--mn-violet-strong); color:#fff; }

  .mn-btn--on-violet:hover { background: var(--mn-violet-tint); color: var(--mn-violet-strong); }
}

@media (prefers-reduced-motion: reduce) {
  .mn-btn--primary:active, .mn-btn--on-violet:active { transform: none; }
}

.mn-btn:disabled, .mn-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none;
}
.mn-btn:disabled:hover, .mn-btn[aria-disabled="true"]:hover {
  background: var(--mn-violet); color: #fff;
}
.mn-btn--on-violet:disabled:hover { background: #fff; color: var(--mn-violet); }

.mn-btn[data-busy] { opacity: .7; cursor: progress; }

.mn-input { font: 400 var(--mn-text-sm)/1 var(--mn-font-body); color: var(--mn-ink); background: var(--mn-surface);
  border: 1px solid var(--mn-hairline); border-radius: var(--mn-radius); padding: 14px 16px; }
.mn-input { transition: border-color var(--mn-dur-xs) ease, box-shadow var(--mn-dur-xs) ease,
                        background var(--mn-dur-xs) ease; }
@media (hover: hover) {
  .mn-input:hover:not(:focus):not(:disabled) { border-color: #DDD8EA; }
}
.mn-input:focus { outline: none; border-color: var(--mn-violet); box-shadow: 0 0 0 3px var(--mn-violet-tint); }

.mn-input:user-invalid {
  border-color: var(--mn-coral-ink);
  box-shadow: 0 0 0 3px var(--mn-coral-tint);
}

.mn-input:disabled {
  opacity: .55; cursor: not-allowed; background: var(--mn-hairline);
}
.mn-input:read-only:not(:disabled) { background: var(--mn-hairline); }

.mn-input::placeholder { color: var(--mn-faint); opacity: 1; }

.mn-input:-webkit-autofill,
.mn-input:-webkit-autofill:hover,
.mn-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--mn-ink);
  -webkit-box-shadow: 0 0 0 100px var(--mn-surface) inset;
  caret-color: var(--mn-ink);
}

.mn-input:user-valid:not(:focus):not(:placeholder-shown) {
  border-color: var(--mn-teal-ink);
}

.mn-section { padding: var(--mn-section-y) 0; }
.mn-section--surface { background: var(--mn-surface); }