/* Cosmify shared UI kit — toasts, skeletons, spinners, empty states.
   Include with <link rel="stylesheet" href="/ui.css"> on any page. Uses the
   same design tokens (--blue/--navy/--line) each page already defines; falls
   back to sensible defaults so it works even where a token is missing. */

/* ── Toasts (replaces alert() + inline status text) ── */
.amp-toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:92vw;}
.amp-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:#0B1B33;color:#fff;border-radius:12px;padding:12px 18px;font:600 .96rem/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",Helvetica,Arial,sans-serif;box-shadow:0 10px 30px rgba(11,27,51,.28);opacity:0;transform:translateY(12px) scale(.97);transition:opacity .22s,transform .22s;max-width:min(440px,92vw);}
.amp-toast.show{opacity:1;transform:translateY(0) scale(1);}
.amp-toast .i{font-size:1.15rem;line-height:1;flex-shrink:0;}
.amp-toast--ok{background:#0f7a44;}
.amp-toast--err{background:#b3261e;}
.amp-toast--info{background:#12356b;}
.amp-toast a{color:#fff;text-decoration:underline;font-weight:700;}

/* ── Skeleton loaders (replaces "—" while data loads) ── */
.amp-skel{position:relative;overflow:hidden;background:#e9edf2;border-radius:8px;display:inline-block;}
.amp-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:amp-shimmer 1.2s infinite;}
@keyframes amp-shimmer{100%{transform:translateX(100%);}}
.amp-skel--line{height:.9em;width:100%;vertical-align:middle;}
.amp-skel--pill{height:1.6em;width:90px;border-radius:100px;}
.amp-skel--num{height:2rem;width:70px;}

/* ── Inline spinner for buttons/status ── */
.amp-spin{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:amp-rot .7s linear infinite;vertical-align:-2px;}
@keyframes amp-rot{100%{transform:rotate(360deg);}}

/* ── Empty state ── */
.amp-empty{text-align:center;padding:48px 24px;color:#5b6472;}
.amp-empty .ic{font-size:2.6rem;margin-bottom:10px;opacity:.8;}
.amp-empty h3{font-size:1.15rem;color:#0B1B33;margin-bottom:6px;}
.amp-empty p{font-size:.95rem;margin-bottom:16px;max-width:340px;margin-left:auto;margin-right:auto;}

/* ── Confetti (first-post celebration, #93) ── */
.amp-confetti{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden;}
.amp-confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:amp-fall linear forwards;}
@keyframes amp-fall{to{transform:translateY(105vh) rotate(720deg);opacity:.9;}}

@media (prefers-reduced-motion: reduce){
  .amp-skel::after,.amp-spin,.amp-confetti i{animation:none;}
  .amp-toast{transition:opacity .01s;}
}