.memory-button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-paper);
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  font: 600 1rem/1.25 var(--font-hand);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.memory-button:hover:not(:disabled) {
  border-color: var(--warm-yellow);
  box-shadow: 0 0 0 3px rgb(242 198 109 / 28%), var(--shadow-paper);
  transform: translateY(-1px);
}

.memory-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgb(91 64 44 / 16%);
}

.memory-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.memory-button:disabled {
  color: var(--muted-brown);
  border-color: rgb(167 155 134 / 60%);
  background: rgb(241 228 200 / 55%);
  cursor: not-allowed;
  box-shadow: none;
}

.memory-button--secondary {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--paper-edge);
  text-underline-offset: 5px;
}

.memory-button--utility {
  min-width: 44px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgb(91 64 44 / 12%);
}

@media (prefers-reduced-motion: reduce) {
  .memory-button { transition: none; }

  .memory-button:hover:not(:disabled),
  .memory-button:active:not(:disabled) { transform: none; }
}