/* ============================================================
   Alfred Design System — Messages
   Status messaging at three levels:
     1. .field-error / .field-success — inline, under a single input
     2. .alert — block message attached to a form or section
     3. .toast — transient, floating confirmation
   All four tones map 1:1 to the semantic tokens. Never invent.
   ============================================================ */

/* ============ 1 · Inline field message ============ */
.field-msg {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: var(--text-11);
  line-height: 1.45;
  margin-top: 6px;
}
.field-msg svg { flex-shrink: 0; margin-top: 1px; }
.field-error   { color: var(--danger); }
.field-success { color: var(--success); }
.field-warning { color: var(--warning); }

/* ============ 2 · Alert / banner ============ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid;
  background: var(--surface);
  font-size: var(--text-13);
  line-height: 1.5;
}
.alert__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.alert__body { flex: 1; min-width: 0; }
.alert__title {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  letter-spacing: -0.1px;
}
.alert__text {
  color: var(--text-secondary);
  margin-top: 2px;
}
.alert__title + .alert__text { margin-top: 3px; }
.alert__text a,
.alert__link {
  color: inherit;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.alert__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.alert__dismiss {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: -2px -4px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background 100ms var(--ease), color 100ms var(--ease);
}
.alert__dismiss:hover { background: rgba(15, 23, 42, 0.06); color: var(--text-primary); }
[data-theme="dark"] .alert__dismiss:hover { background: rgba(255, 255, 255, 0.08); }

/* Tone mapping — soft fill + matching border + icon color */
.alert--danger  { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger)  28%, transparent); }
.alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.alert--info    { background: var(--info-soft);    border-color: color-mix(in srgb, var(--info)    28%, transparent); }
.alert--neutral { background: var(--surface-2);    border-color: var(--border); }

.alert--danger  .alert__icon { color: var(--danger); }
.alert--warning .alert__icon { color: var(--warning); }
.alert--success .alert__icon { color: var(--success); }
.alert--info    .alert__icon { color: var(--info); }
.alert--neutral .alert__icon { color: var(--text-secondary); }

/* Subtle variant — no fill, just a colored left rule. For inline page use. */
.alert--subtle {
  background: var(--surface);
  border-color: var(--border);
  border-left-width: 2px;
}
.alert--subtle.alert--danger  { border-left-color: var(--danger); }
.alert--subtle.alert--warning { border-left-color: var(--warning); }
.alert--subtle.alert--success { border-left-color: var(--success); }
.alert--subtle.alert--info    { border-left-color: var(--info); }

/* Compact single-line alert (form-top errors) */
.alert--sm {
  padding: 9px 12px;
  font-size: var(--text-12);
  gap: 9px;
}
.alert--sm .alert__icon { width: 16px; height: 16px; }

/* ============ 3 · Toast ============ */
.toast-region {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  font-size: var(--text-13);
  pointer-events: auto;
  animation: toast-in 200ms var(--ease);
}
.toast.is-leaving { animation: toast-out 160ms var(--ease) forwards; }
.toast__icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  margin-top: 1px;
}
.toast__body { flex: 1; min-width: 0; }
/* Title and text stack as their own rows: the title sits above, the message
   below. Both are block so the inline spans don't run together on one line. */
.toast__title { display: block; font-weight: var(--weight-medium); color: var(--text-primary); }
.toast__text { display: block; color: var(--text-secondary); font-size: var(--text-12); margin-top: 2px; }
.toast__dismiss {
  flex-shrink: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-xs);
  color: var(--text-tertiary); cursor: pointer;
  transition: background 100ms var(--ease), color 100ms var(--ease);
}
.toast__dismiss:hover { background: var(--surface-2); color: var(--text-primary); }
/* The one in-toast action (an Undo, typically): a real button, not a link,
   because it competes with the auto-dismiss timer and must be an easy target. */
.toast__action {
  flex-shrink: 0;
  height: var(--control-h-sm); padding: 0 10px;
  display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: var(--text-11); font-weight: var(--weight-medium);
  color: var(--text-primary); cursor: pointer; white-space: nowrap;
}
.toast__action:hover { background: var(--surface-2); border-color: var(--border-strong); }
.toast--danger  .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--success .toast__icon { color: var(--success); }
.toast--info    .toast__icon { color: var(--info); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation: none; }
}