/* =============================================================================
   NDPC notifications — toasts and inline messages.

   Loaded by every shell (staff, auth, portal, public) so a confirmation looks the
   same wherever it appears. Consumes ndpc-tokens.css; declares no new colour.

   THE RULE THIS FILE EXISTS TO ENFORCE:

     * A toast is for a transient confirmation — "signed in", "file uploaded",
       "authenticator enrolled". It auto-dismisses, because nothing is lost if it
       is missed: the thing it confirms already happened and is visible elsewhere.

     * Anything the user must read stays INLINE and does not auto-dismiss:
       errors, validation failures, warnings, and state the user has to act on
       ("this file could not be read: missing column"). Auto-dismissing those
       would hide the reason something failed.

   The split is made in _messages.html by message tag, not by the caller.
   ============================================================================= */

/* -------------------------------------------------------------------------
   Toasts — top right, stacked, self-dismissing.
   ------------------------------------------------------------------------- */
.ndpc-toasts {
  position: fixed;
  top: 1rem; right: 1rem;
  z-index: 1080;                 /* above Bootstrap modals' backdrop-adjacent chrome */
  display: flex; flex-direction: column; gap: .6rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;          /* the strip never blocks the page… */
}
.ndpc-toast {
  pointer-events: auto;          /* …but each toast is dismissible */
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .8rem .9rem;
  background: var(--ndpc-surface);
  border: 1px solid var(--ndpc-line);
  border-left: 3px solid var(--ndpc-green);
  border-radius: var(--ndpc-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  font-size: var(--ndpc-fs-body);
  color: var(--ndpc-ink);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.ndpc-toast.is-visible { opacity: 1; transform: translateY(0); }
.ndpc-toast.is-leaving { opacity: 0; transform: translateY(-6px); }

.ndpc-toast__icon { color: var(--ndpc-green); font-size: 1.05rem; line-height: 1.35; flex-shrink: 0; }
.ndpc-toast__body { flex: 1; min-width: 0; }
.ndpc-toast__close {
  flex-shrink: 0;
  background: none; border: 0; padding: 0 .1rem;
  color: var(--ndpc-muted); font-size: 1rem; line-height: 1.35;
  cursor: pointer;
}
.ndpc-toast__close:hover { color: var(--ndpc-ink); }

/* Info confirmations ("a verification email is on its way") read calmer than a
   completed action, but they are still transient. */
.ndpc-toast--info { border-left-color: var(--ndpc-muted); }
.ndpc-toast--info .ndpc-toast__icon { color: var(--ndpc-muted); }

@media (prefers-reduced-motion: reduce) {
  .ndpc-toast { transition: none; }
}

/* -------------------------------------------------------------------------
   Inline messages — persistent. No auto-dismiss, no timer, ever.
   ------------------------------------------------------------------------- */
.ndpc-inline-messages { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.ndpc-inline {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .85rem 1rem;
  border: 1px solid var(--ndpc-line);
  border-left: 3px solid var(--ndpc-muted);
  border-radius: var(--ndpc-radius);
  background: var(--ndpc-field-bg);
  color: var(--ndpc-body);
  font-size: var(--ndpc-fs-body);
  line-height: 1.5;
}
.ndpc-inline .bi { flex-shrink: 0; line-height: 1.4; }
.ndpc-inline--error {
  border-left-color: var(--ndpc-status-revoked);
  background: #FBF3F3;
  color: #7A2828;
}
.ndpc-inline--error .bi { color: var(--ndpc-status-revoked); }
.ndpc-inline--warning {
  border-left-color: var(--ndpc-status-expired);
  background: #FCF8EF;
  color: #7A5B12;
}
.ndpc-inline--warning .bi { color: var(--ndpc-status-expired); }