/* Alert dialogs + toasts (alert.js) — uses tokens from style.css */
body.al-open { overflow: hidden; }
.al-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .78); animation: al-fade .18s ease-out;
}
.al-box {
  position: relative; width: 100%; max-width: 400px; padding: 28px 22px 20px; text-align: center;
  background: var(--panel); border: 1px solid var(--line-2); border-top: 4px solid var(--gold);
  box-shadow: 8px 8px 0 #000; animation: al-pop .28s cubic-bezier(.2, 1.4, .4, 1);
}
.al-box.al-t-success { border-top-color: var(--green); }
.al-box.al-t-error { border-top-color: var(--red-2); }
.al-box h2 { font: 700 21px/1.3 var(--head); color: #fff; margin: 14px 0 6px; }
.al-box p { color: var(--muted); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.al-actions { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.al-btn {
  flex: 1; max-width: 170px; height: 44px; padding: 0 16px; font: 500 15px var(--head);
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); cursor: pointer;
}
.al-btn:hover { border-color: var(--gold); color: var(--gold); }
.al-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.al-ok { background: var(--gold); border-color: var(--gold); color: #000; }
.al-ok:hover { background: var(--gold-2); color: #000; }
.al-ok.al-danger { background: var(--red); border-color: var(--red); color: #fff; }
.al-ok.al-danger:hover { background: var(--red-2); color: #fff; }
.al-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; animation: al-shrink linear forwards; }

/* Square icon frame with a stroke that draws itself */
.al-icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border: 3px solid currentColor; color: var(--gold); animation: al-icon .35s ease-out; }
.al-icon svg { width: 60%; height: 60%; }
.al-icon.sm { width: 26px; height: 26px; border-width: 2px; flex: none; animation: none; }
.al-success { color: var(--green); }
.al-error { color: var(--red-2); }
.al-warning { color: var(--gold); }
.al-info { color: #4aa3ff; }
.al-question { color: #b58cff; }
.al-draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: al-draw .35s .15s ease-out forwards; }
.al-d2 { animation-delay: .3s; }
.al-icon.sm .al-draw { stroke-dashoffset: 0; animation: none; }

/* Toasts */
.al-toasts { position: fixed; top: 16px; right: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.al-toast {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--panel); border: 1px solid var(--line-2); border-left: 4px solid var(--gold);
  box-shadow: 5px 5px 0 #000; font: 500 14px/1.35 var(--head); color: var(--text);
  pointer-events: auto; cursor: pointer; animation: al-slide .25s ease-out;
}
.al-toast.al-t-success { border-left-color: var(--green); }
.al-toast.al-t-error { border-left-color: var(--red-2); }
.al-toast.al-t-info { border-left-color: #4aa3ff; }
.al-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .5; transform-origin: left; animation: al-shrink linear forwards; }
.al-toast.al-t-success .al-bar { color: var(--green); }
.al-toast.al-t-error .al-bar { color: var(--red-2); }
.al-toast.al-t-warning .al-bar { color: var(--gold); }
.al-toast.al-t-info .al-bar { color: #4aa3ff; }

.al-out { animation: al-fade .16s ease-in reverse forwards; }
.al-toast.al-out { animation: al-slide .2s ease-in reverse forwards; }

@keyframes al-fade { from { opacity: 0; } }
@keyframes al-pop { from { opacity: 0; transform: scale(.85) translateY(10px); } }
@keyframes al-icon { from { transform: rotate(-90deg) scale(.4); opacity: 0; } }
@keyframes al-draw { to { stroke-dashoffset: 0; } }
@keyframes al-shrink { to { transform: scaleX(0); } }
@keyframes al-slide { from { opacity: 0; transform: translateX(40px); } }

@media (max-width: 720px) {
  .al-toasts { top: auto; bottom: calc(var(--tabbar, 0px) + 12px); right: 50%; transform: translateX(50%); }
  .al-box { padding: 24px 18px 18px; }
  .al-box h2 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-backdrop, .al-box, .al-icon, .al-toast { animation: none; }
  .al-draw { animation: none; stroke-dashoffset: 0; }
}