:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, a.period-button, a.slot-create, a.js-appointment-card, [role="button"]) {
  transition: transform 140ms ease-out, opacity 140ms ease-out, background-color 140ms ease-out, box-shadow 140ms ease-out;
  cursor: pointer;
}
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, a.period-button, a.slot-create, a.js-appointment-card, [role="button"]):hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgb(16 32 24 / 18%);
}
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, a.period-button, a.slot-create, a.js-appointment-card, [role="button"]):is(:active, [data-feedback="pressed"]) {
  transform: scale(.98);
  box-shadow: inset 0 0 0 2px var(--color-primary-text);
}
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, a.period-button, a.slot-create, a.js-appointment-card, [role="button"]):focus-visible {
  outline: 3px solid var(--color-primary-text);
  outline-offset: 3px;
}
:is(button, input[type="submit"], input[type="button"], input[type="reset"], a.button, a.period-button, a.slot-create, a.js-appointment-card, [role="button"]):is(:disabled, [aria-disabled="true"]) {
  opacity: .62;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
[data-feedback="loading"] { cursor: progress !important; }
[data-feedback="success"] { box-shadow: inset 0 0 0 2px #087443 !important; }
[data-feedback="error"] { box-shadow: inset 0 0 0 2px #b42318 !important; }
.button-feedback-notice {
  position: fixed;
  z-index: 10000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  width: max-content;
  padding: 12px 18px;
  border: 1px solid #bfe8d0;
  border-radius: 8px;
  background: #eaf7f0;
  color: #17202a;
  box-shadow: 0 4px 16px rgb(16 32 24 / 18%);
  pointer-events: none;
  animation: feedback-enter 160ms ease-out;
}
.button-feedback-notice[data-state="error"], .message.error {
  background: #fef3f2;
  border-color: #fecdca;
  color: #b42318;
}
@keyframes feedback-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :is(button, input, a.button, a.period-button, a.slot-create, a.js-appointment-card, [role="button"]), .button-feedback-notice {
    animation: none !important;
    transition: none !important;
  }
  :is(button, input, a.button, a.period-button, a.slot-create, a.js-appointment-card, [role="button"]) { transform: none !important; }
}