/* ============================================================
   URBINO · TOAST
   Molecule. Transient notification surface.

   Manager: corner-card (360px fixed), bottom-right by default.
   Citizen: top banner (full-width minus margin).

   Four intents (info / success / warning / danger) — the intent
   colours only the leading icon and a 4px left strip; the toast
   surface stays neutral so citizens never feel scolded by a red
   background.

   Composition:
     .u-toast-container (positioned wrapper)
       └─ .u-toast (one entry)
            ├─ .u-toast__icon       — leading status icon
            ├─ .u-toast__body
            │    ├─ .u-toast__title  — optional headline
            │    └─ .u-toast__text   — main message
            ├─ .u-toast__action      — optional inline action button
            └─ .u-toast__close       — close X
   ============================================================ */


/* ============================================================
   CONTAINER — positioned wrapper that pile toasts inside
   Default position: bottom-right (manager).
   Use modifiers to move it.
   ============================================================ */

.u-toast-container {
  position: fixed;
  bottom: var(--u-toast-container-py);
  right:  var(--u-toast-container-px);
  z-index: var(--u-toast-container-z);
  display: flex;
  flex-direction: column;
  gap: var(--u-toast-stack-gap);
  pointer-events: none;            /* so the container doesn't block clicks; toasts re-enable */
  max-width: var(--u-toast-max-width);
}

.u-toast-container--top-right {
  top: var(--u-toast-container-py);
  right: var(--u-toast-container-px);
  bottom: auto;
}
.u-toast-container--top-left {
  top: var(--u-toast-container-py);
  left: var(--u-toast-container-px);
  bottom: auto;
  right: auto;
}
.u-toast-container--bottom-left {
  bottom: var(--u-toast-container-py);
  left: var(--u-toast-container-px);
  right: auto;
}
.u-toast-container--top {
  top: var(--u-toast-container-py);
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  align-items: stretch;
}
.u-toast-container--bottom {
  bottom: var(--u-toast-container-py);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  align-items: stretch;
}

/* Citizen default — full-width top banner */
.u-toast-container--cit {
  top: var(--u-toast-container-py);
  left: var(--u-toast-container-px);
  right: var(--u-toast-container-px);
  bottom: auto;
  align-items: stretch;
}


/* ============================================================
   THE TOAST
   ============================================================ */

.u-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--u-toast-gap);
  background: var(--u-toast-bg);
  color: var(--u-toast-fg);
  border: var(--u-toast-border);
  border-radius: var(--u-toast-radius);
  box-shadow: var(--u-toast-shadow);
  padding: var(--u-toast-py) var(--u-toast-px);
  width: var(--u-toast-width);
  max-width: var(--u-toast-max-width);
  font-family: var(--u-font-sans);
  font-size: var(--u-toast-body-font-size);
  line-height: 1.5;
  pointer-events: auto;            /* re-enable inside the container */
  box-sizing: border-box;
  /* Subtle entrance — consumers can animate `transform/opacity` from JS */
  transition:
    opacity var(--u-dur-base) var(--u-ease-out),
    transform var(--u-dur-base) var(--u-ease-out);
}

/* The 4px left intent-color strip — drawn as an inset border */
.u-toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--u-toast-accent-w);
  background: var(--u-toast-accent, var(--u-toast-info-accent));
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}


/* ============================================================
   WORLD SHORTCUT
   ============================================================ */

.u-toast--mgr {
  /* :root defaults already match manager */
}

.u-toast--cit {
  --u-toast-radius:          var(--u-radius-xl);
  --u-toast-py:              var(--u-space-4);
  --u-toast-px:              var(--u-space-5);
  --u-toast-width:           100%;
  --u-toast-icon-size:       24px;
  --u-toast-title-font-size: 16px;
  --u-toast-body-font-size:  15px;
}


/* ============================================================
   INTENT VARIANTS
   The intent only colours the icon and the 4px left strip;
   the toast surface stays neutral.
   ============================================================ */

.u-toast--info    { --u-toast-accent: var(--u-toast-info-accent); }
.u-toast--success { --u-toast-accent: var(--u-toast-success-accent); }
.u-toast--warning { --u-toast-accent: var(--u-toast-warning-accent); }
.u-toast--danger  { --u-toast-accent: var(--u-toast-danger-accent); }


/* ============================================================
   ANATOMY
   ============================================================ */

.u-toast__icon {
  flex-shrink: 0;
  width: var(--u-toast-icon-size);
  height: var(--u-toast-icon-size);
  color: var(--u-toast-accent, var(--u-toast-info-accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;            /* optical baseline against the title */
}
.u-toast__icon img,
.u-toast__icon svg { width: 100%; height: 100%; display: block; }

.u-toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--u-space-1);       /* 4 — title → text */
}
.u-toast__title {
  font-family: var(--u-font-sans);
  font-size: var(--u-toast-title-font-size);
  font-weight: 600;
  line-height: 1.3;
  color: var(--u-toast-fg);
  margin: 0;
}
.u-toast__text {
  font-size: var(--u-toast-body-font-size);
  color: var(--u-toast-fg-muted);
  line-height: 1.5;
  margin: 0;
}
.u-toast__text > a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.u-toast__action {
  align-self: flex-start;
  margin-top: var(--u-space-2);
}

.u-toast__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--u-radius-xs);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--u-fg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: -4px -4px -4px 0;     /* expand hit area into the padding */
  transition: background var(--u-dur-fast) var(--u-ease-out), color var(--u-dur-fast) var(--u-ease-out);
}
.u-toast__close:hover { background: var(--u-surface-sunk); color: var(--u-fg-1); }
.u-toast__close:focus-visible {
  outline: none;
  box-shadow: var(--u-focus-ring);
}
.u-toast__close img,
.u-toast__close svg { width: 14px; height: 14px; display: block; }


/* ============================================================
   STACKING — when multiple toasts are visible
   The container's `gap` handles vertical spacing; each toast
   keeps its own shape.
   ============================================================ */

.u-toast + .u-toast { /* no extra rule — container's gap handles it */ }


/* ============================================================
   ENTRY / EXIT ANIMATION HOOKS
   Apply via `.u-toast--enter` and `.u-toast--leave` from JS.
   The container's position drives the slide direction.
   ============================================================ */

.u-toast--enter {
  opacity: 0;
  transform: translateY(8px);
}
.u-toast-container--top .u-toast--enter,
.u-toast-container--cit .u-toast--enter {
  transform: translateY(-8px);
}
.u-toast-container--top-right .u-toast--enter,
.u-toast-container--bottom-left .u-toast--enter,
.u-toast-container--top-left .u-toast--enter {
  transform: translateX(8px);
}

.u-toast--leave {
  opacity: 0;
  transform: scale(0.98);
}


/* ============================================================
   REDUCED MOTION — disable slide / scale entry animations
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .u-toast { transition: opacity var(--u-dur-fast); }
  .u-toast--enter,
  .u-toast--leave { transform: none; }
}