/* WAI toast — the one notification style for every portal (resort, admin,
   shopkeeper, applicant form, login pages). Loaded with wai-toast.js, which
   builds the markup. Dark pill, bottom centre.
   Prefix .wt-* on purpose: Bootstrap 5 already owns .toast. The bare .wt rules are
   scoped under .wt-stack because the Incident dashboard has its own .wt heading.
   Safari: only transform/opacity are animated, the stack is centred with
   left/right + flex (no transformed parent), no backdrop-filter / blur. */
.wt-stack{position:fixed;left:0;right:0;bottom:24px;z-index:1090;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px;pointer-events:none}
.wt-stack .wt{pointer-events:auto;position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:10px;max-width:min(540px,100%);
  background:#013a46;color:#fff;border-radius:14px;padding:11px 10px 11px 16px;box-shadow:0 12px 30px rgba(1,30,36,.32);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  animation:wt-in .3s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}
.wt-stack .wt.t-err{animation:wt-in .3s cubic-bezier(.16,1,.3,1) both,wt-shake .4s ease .3s}
.wt-stack .wt.is-out{animation:wt-out .22s ease forwards}

/* status dot — lines up with the first text line */
.wt-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px}
.t-ok .wt-dot{background:#E0FF02}.t-err .wt-dot{background:#ff8f78}.t-warn .wt-dot{background:#D99A2B}.t-info .wt-dot{background:#7FBEC6}

/* text: title + message on one line; stacks when there's a list */
.wt-b{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:12.5px;line-height:18px;overflow-wrap:anywhere}
.wt-stack .wt.has-list .wt-b{display:block}
.wt-t{font-weight:600;color:#fff}
.wt-m{color:rgba(255,255,255,.72)}
.wt-stack .wt.has-list .wt-m{display:block;margin-top:2px}

/* validation list */
.wt-list{list-style:none;margin:8px 0 0;padding:8px 4px 0 0;border-top:1px solid rgba(255,255,255,.12);max-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.wt-list li{position:relative;padding-left:14px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.85)}
.wt-list li::before{content:"";position:absolute;left:3px;top:7px;width:5px;height:5px;border-radius:50%;background:#ff8f78}

/* undo + close */
.wt-undo{font:inherit;font-weight:600;color:#E0FF02;background:none;border:0;padding:0;margin-left:4px;cursor:pointer}
.wt-undo:hover{text-decoration:underline}
.wt-x{flex:none;width:26px;height:26px;margin-top:-4px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;display:grid;place-items:center}
.wt-x:hover{background:rgba(255,255,255,.1);color:#fff}
.wt-x svg{width:13px;height:13px;display:block}
.wt-x:focus-visible,.wt-undo:focus-visible{outline:2px solid #E0FF02;outline-offset:2px}

/* countdown bar — pauses while hovered or focused */
.wt-p{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left center;animation:wt-shrink var(--wt-dur,5s) linear forwards;will-change:transform}
.t-ok .wt-p{background:#E0FF02}.t-err .wt-p{background:#ff8f78}.t-warn .wt-p{background:#D99A2B}.t-info .wt-p{background:#7FBEC6}
.wt-stack .wt:hover .wt-p,.wt-stack .wt:focus-within .wt-p{animation-play-state:paused}

/* motion: transform + opacity only (smooth in Safari) */
@keyframes wt-in{from{opacity:0;transform:translate3d(0,14px,0) scale(.97)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes wt-out{to{opacity:0;transform:translate3d(0,10px,0) scale(.97)}}
@keyframes wt-shake{0%,100%{translate:0}20%{translate:-6px}40%{translate:5px}60%{translate:-3px}80%{translate:2px}}
@keyframes wt-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.wt-stack .wt,.wt-stack .wt.t-err{animation:none}.wt-stack .wt.is-out{animation:none;opacity:0}}