/* Toast: a stack in the bottom-right corner, newest at the bottom. Its tone is the rule down its
   left edge: ink for news and for success, the danger colour for a failure. The region is always in the
   document so a screen reader is already listening when the first toast arrives; it is
   pointer-transparent when empty so it cannot swallow a click on the page under it. */
.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--layer-toast);
  display: grid;
  gap: var(--space-2);
  justify-items: end;
  pointer-events: none;
  max-width: calc(100vw - var(--space-8));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  pointer-events: auto;
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-line);
  border-left: var(--space-1) solid var(--color-muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: var(--space-3) var(--space-4);
  max-width: 28rem;
}

.toast-info { border-left-color: var(--color-info); }
.toast-success { border-left-color: var(--color-success); }
.toast-error { border-left-color: var(--color-danger); }

/* The sentence and, for a refusal, the reference line under it — one column beside the dismiss
   button, so the button stays in the corner however many lines the body runs to. */
.toast-body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.toast-message {
  margin: 0;
  font-size: var(--text-control-small);
}

.toast-dismiss {
  font: inherit;
  font-size: var(--text-md);
  line-height: 1;
  color: var(--color-muted);
  background: none;
  border: none;
  border-radius: var(--radius);
  padding: 0 var(--space-1);
  cursor: pointer;
}

.toast-dismiss:hover {
  color: var(--color-ink);
}

.toast-dismiss:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}