/* ---------------------------------------------------------------------------
 * notifications.css — toast notification styles (CSP-safe, no JS injection)
 *
 * Purpose:
 *   URIP.showNotification() previously injected a <style> tag with @keyframes
 *   into <head> on first call (frontend/js/api.js). That worked while CSP
 *   allowed style-src 'unsafe-inline', but would break silently if CSP is
 *   tightened (DeepSeek v3 audit, frontend.md, P1).
 *
 *   This stylesheet hosts all toast styles statically so showNotification()
 *   only attaches CSS class names — no inline <style> tag, no inline
 *   style="..." for layout (severity color is set via class, not style.color).
 *
 * Loaded via <link rel="stylesheet" href="css/components/notifications.css">
 * on every page that uses showNotification (i.e. every page loading js/api.js).
 *
 * Class contract (consumed by api.js):
 *   .urip-toast                  → root container
 *   .urip-toast--success / --error / --info → severity (icon colour)
 *   .urip-toast.is-leaving       → triggers slide-out animation
 *   .urip-toast__wrapper, __icon, __body, __title, __msg → internal nodes
 * --------------------------------------------------------------------------- */

@keyframes uripSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes uripSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

.urip-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--u-card, #fff);
  color: var(--u-fg, #1E293B);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  min-width: 300px;
  max-width: 420px;
  animation: uripSlideIn 0.3s ease;
}

.urip-toast.is-leaving {
  animation: uripSlideOut 0.3s ease;
}

.urip-toast__wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.urip-toast__icon {
  font-size: 20px;
  margin-top: 2px;
  /* color set by severity modifier below */
}

.urip-toast--success .urip-toast__icon { color: #27AE60; }
.urip-toast--error   .urip-toast__icon { color: #E74C3C; }
.urip-toast--info    .urip-toast__icon { color: #1ABC9C; }

.urip-toast__body {
  /* flex child; no extra rules required */
}

.urip-toast__title {
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 4px;
}

.urip-toast__msg {
  font-size: 14px;
  color: #64748B;
}
