/* One D22 toast family for the site and the component library. */
.notification-region {
  position:fixed;z-index:40;right:var(--gutter);bottom:var(--space-3);
  width:min(420px,calc(100vw - var(--gutter) * 2));display:grid;
  gap:var(--space-1);pointer-events:none;
}
.notification-region[hidden] {display:none}
.app-notification-region {bottom:calc(var(--notification-safe-bottom,0px) + var(--space-3))}
.notification-toast.notification-toast {
  --notification-color:var(--info);--notification-soft:var(--info-soft);
  display:grid;grid-template-columns:32px minmax(0,1fr) var(--target-min);
  align-items:start;gap:var(--space-detail);padding:var(--space-2);
  background:var(--surface-raised);color:var(--ink);
  border:var(--border-width) solid var(--line-strong);border-left:3px solid var(--notification-color);
  border-radius:var(--radius-3);box-shadow:var(--shadow-raised);pointer-events:auto;
  font-family:var(--font-ui);line-height:var(--line-body);
  animation:notification-enter var(--motion-card) cubic-bezier(.16,1,.3,1) both;
}
.notification-toast.toast-success {--notification-color:var(--success);--notification-soft:var(--success-soft)}
.notification-toast.toast-warning {--notification-color:var(--warning);--notification-soft:var(--warning-soft)}
.notification-toast.toast-danger {--notification-color:var(--danger);--notification-soft:var(--danger-soft)}
.notification-toast .notification-mark {display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-circle);color:var(--notification-color);background:var(--notification-soft);margin-top:var(--space-subtle)}
.notification-toast .notification-mark>.icon {width:var(--icon-size-lg);height:var(--icon-size-lg);color:inherit}
.notification-copy {min-width:0;overflow-wrap:anywhere}
.notification-title {display:block;font-size:var(--type-ui);font-weight:var(--weight-semibold);color:var(--ink);margin:0}
.notification-message {font-size:var(--type-xs);color:var(--ink-secondary);margin:var(--space-subtle) 0 0;line-height:var(--line-body)}
.notification-toast .notification-close {width:var(--target-min);height:var(--target-min);min-width:var(--target-min);min-height:var(--target-min);padding:0;border:0;border-radius:var(--radius-2);color:var(--ink-secondary);background:transparent;display:grid;place-items:center}
.notification-toast .notification-close>.icon {color:inherit;width:var(--icon-size-md);height:var(--icon-size-md)}
.notification-toast .notification-close:hover {background:var(--surface-soft);color:var(--ink)}
.notification-toast .notification-close:focus-visible {outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
.notification-region-in-dialog {position:sticky;inset:auto;bottom:0;width:100%;margin-top:var(--space-2);z-index:3}
@keyframes notification-enter {from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:760px) {
  .notification-toast.notification-toast {padding:var(--space-detail);gap:var(--space-1)}
}
[data-reduce-motion=true] .notification-toast,[data-reduced-motion=true] .notification-toast {animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce) {.notification-toast {animation:none!important;transition:none!important}}