/* Shared pieces the server rendered pages add on top of the prototype styles. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
button.busy, button[aria-busy="true"] { cursor: progress; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.toasts { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: min(92vw, 26rem); }
.toasts .toast { pointer-events: auto; background: #F2F2F2; color: #0D0D0D; font: 600 .95rem/1.35 'DM Sans', 'Segoe UI', Roboto, Arial, sans-serif; padding: 12px 16px; border-radius: 12px; border: 2px solid #0D0D0D; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: toastIn .22s cubic-bezier(.2,.9,.3,1.2) both; transition: opacity .3s, transform .3s; }
.toasts .toast.bad { background: #FF7A6B; }
.toasts .toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .toasts .toast { animation: none; transition: none; } }
picture { display: contents; } /* {% picture %} wrappers must not change how the img is laid out */