/* ==========================================================================
   .bp-toast — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   Transient confirmations: "Contribution recorded", "Export queued". Django
   messages render either as toasts or as inline notices; _messages.html
   chooses, and both carry the type as an icon and a word, never as colour
   alone (ACC-004).

   Variants   --success  --warning  --danger  --info
   Elements   __region  __icon  __body  __title  __message  __dismiss
   States     .bp-is-leaving  :hover  :focus-visible  :disabled

   The region is a polite live region in the template. A toast is never the
   only record of an outcome: anything worth a toast is also visible in the
   page it returns to, because a toast a user did not see is a toast that never
   happened.
   ========================================================================== */

/* The fixed stack. Bottom-end so it never covers the page heading or the
   primary action, and inset by a full gutter so it clears a 320px viewport. */
.bp-toast__region {
  position: fixed;
  inset-block-end: var(--bp-space-4);
  inset-inline-end: var(--bp-space-4);
  z-index: var(--bp-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--bp-space-2);
  width: min(var(--bp-space-toast-width), calc(100vw - var(--bp-space-7)));
  /* The region itself must never intercept clicks meant for the page. */
  pointer-events: none;
}

.bp-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--bp-space-3);
  padding: var(--bp-space-4);
  border: var(--bp-border-width-hairline) solid var(--bp-color-border-subtle);
  border-inline-start: var(--bp-border-width-thick) solid var(--bp-color-border-strong);
  border-radius: var(--bp-radius-md);
  background-color: var(--bp-color-surface-overlay);
  color: var(--bp-color-text-primary);
  box-shadow: var(--bp-shadow-lg);
  pointer-events: auto;
  animation: bp-toast-enter var(--bp-motion-duration-slow)
    var(--bp-motion-ease-emphasized);
}

.bp-toast.bp-is-leaving {
  animation: bp-toast-leave var(--bp-motion-duration-base)
    var(--bp-motion-ease-standard) forwards;
}

/* --------------------------------------------------------------------------
   Elements
   -------------------------------------------------------------------------- */

.bp-toast__icon {
  flex: none;
  width: var(--bp-space-icon-lg);
  height: var(--bp-space-icon-lg);
  margin-top: var(--bp-space-1);
  color: var(--bp-color-text-secondary);
}

.bp-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* The word that names the type — "Saved", "Warning", "Error". This is the
   non-colour signal ACC-004 requires, and it is not optional. */
.bp-toast__title {
  color: var(--bp-color-text-primary);
  font-size: var(--bp-text-sm);
  font-weight: var(--bp-weight-bold);
  line-height: var(--bp-leading-tight);
}

.bp-toast__message {
  margin-top: var(--bp-space-1);
  color: var(--bp-color-text-secondary);
  font-size: var(--bp-text-sm);
  line-height: var(--bp-leading-normal);
  overflow-wrap: break-word;
}

.bp-toast__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--bp-space-target-min);
  height: var(--bp-space-target-min);
  border-radius: var(--bp-radius-sm);
  color: var(--bp-color-text-muted);
  cursor: pointer;
}

.bp-toast__dismiss:hover {
  background-color: var(--bp-color-surface-sunken);
  color: var(--bp-color-text-primary);
}

.bp-toast__dismiss:active {
  background-color: var(--bp-color-accent-subtle);
}

.bp-toast__dismiss:disabled {
  opacity: var(--bp-opacity-disabled);
  cursor: not-allowed;
}

.bp-toast__dismiss:focus-visible {
  outline-offset: 0;
}

.bp-toast__dismiss-icon {
  width: var(--bp-space-icon);
  height: var(--bp-space-icon);
}

/* --------------------------------------------------------------------------
   Types
   -------------------------------------------------------------------------- */

.bp-toast--success {
  border-inline-start-color: var(--bp-color-state-success);
}

.bp-toast--success .bp-toast__icon {
  color: var(--bp-color-state-success);
}

.bp-toast--warning {
  border-inline-start-color: var(--bp-color-state-warning);
}

.bp-toast--warning .bp-toast__icon {
  color: var(--bp-color-state-warning);
}

.bp-toast--danger {
  border-inline-start-color: var(--bp-color-state-danger);
}

.bp-toast--danger .bp-toast__icon {
  color: var(--bp-color-state-danger);
}

.bp-toast--info {
  border-inline-start-color: var(--bp-color-state-info);
}

.bp-toast--info .bp-toast__icon {
  color: var(--bp-color-state-info);
}

/* --------------------------------------------------------------------------
   Motion — both animations are removed entirely by the reduced-motion block in
   utilities.css (ACC-005). A toast still appears and still leaves.
   -------------------------------------------------------------------------- */

@keyframes bp-toast-enter {
  from {
    opacity: 0;
    transform: translateY(var(--bp-space-3));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bp-toast-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(var(--bp-space-2));
  }
}

/* At 320px a fixed-width stack would overhang the viewport; full width with
   gutters is the only arrangement that cannot produce horizontal scroll. */
@media (max-width: 30rem) {
  .bp-toast__region {
    inset-inline: var(--bp-space-3);
    width: auto;
  }
}