/*
  Toast-style flash notifications (login/signup/dashboard — shared globally
  via base.html). Replaces the old full-width top-of-page alert bar, which
  read as a generic browser-alert strip rather than something styled to the
  brand (punch-list item 5).

  Pattern follows the brandbook's status-badge primitive (Section 4.4 /
  6.5): dim-background + solid-color-as-accent-stripe, not a plain colored
  bar. Category -> status token mapping:
    error   -> --open       (feedback needs attention)
    success -> --resolved   (action completed)
    info    -> --progress   (neutral/in-progress-style notice)
  Uses --surface-raised as the toast body per Section 4.1 (cards float on
  --surface, and here the toast floats on top of the whole page, i.e. --bg).
*/

.toast-stack {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(360px, calc(100vw - var(--space-5) * 2));
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-left: calc(var(--space-4) + 3px);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  animation: toast-in 0.25s ease, toast-out 0.25s ease 5.75s forwards;
}

/* Left accent stripe carrying the status color — same "solid color as the
   identifying signal" convention as pin lines / status pills (Section 4.4),
   applied here to a notification instead of a task card. */
.toast::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--text-secondary);
}

.toast--error::before   { background: var(--open); }
.toast--success::before { background: var(--resolved); }
.toast--info::before    { background: var(--progress); }
.toast--message::before { background: var(--progress); }

.toast__icon {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.toast--error   .toast__icon { background: var(--open); }
.toast--success .toast__icon { background: var(--resolved); }
.toast--info    .toast__icon { background: var(--progress); }
.toast--message .toast__icon { background: var(--progress); }

.toast__message {
  flex: 1 1 auto;
  font-size: var(--type-body);
  color: var(--text);
}

.toast__dismiss {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: var(--space-1);
  transition: color 0.15s ease;
}

.toast__dismiss:hover,
.toast__dismiss:focus-visible {
  color: var(--text);
}

.toast__dismiss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (max-width: 480px) {
  .toast-stack {
    left: var(--space-4);
    right: var(--space-4);
    max-width: none;
  }
}