/* Small opt-in primitives, currently used only by the client shell. */
.mint-ui :where(.mint-ui-button, .mint-icon-button) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 15px; border: 1px solid var(--mint-ui-control);
  border-radius: 9px; color: var(--mint-ui-text); background: var(--mint-ui-surface);
  font: 600 15px/1.4 var(--mint-ui-font); letter-spacing: 0; text-transform: none;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.mint-ui :where(.mint-ui-button, .mint-icon-button):hover { background: var(--mint-ui-soft); }
.mint-ui .mint-ui-primary { background: var(--mint-ui-accent); border-color: var(--mint-ui-accent); color: var(--mint-ui-on-accent); }
.mint-ui .mint-ui-primary:hover { background: #35cc9c; border-color: #35cc9c; }
.mint-ui .mint-icon-button { padding: 10px; width: 44px; flex: 0 0 44px; border-color: transparent; }
.mint-ui .mint-icon { width: 20px; height: 20px; flex: none; display: block; }
.mint-ui :where(button, a, input, select):focus-visible { outline: 3px solid var(--mint-ui-focus); outline-offset: 3px; }
.mint-ui button:disabled { cursor: not-allowed; color: var(--mint-ui-muted); background: #e9eeeb; }
@media (prefers-reduced-motion: reduce) { .mint-ui *, .mint-ui *::before, .mint-ui *::after { transition: none; animation: none; } }