/* Short message above the bottom edge. */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-4) + var(--safe-bottom));
  z-index: 50;
  max-width: calc(100% - 2 * var(--gutter));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-float);
  font-size: var(--text-small);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: 0.24s ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}