/* One visual language for temporary toasts and persistent page alerts.
   Token fallbacks keep public pages (landing.css) compatible. */
.tb-alert {
    --alert-bg: var(--blue-50, #f0f9ff);
    --alert-color: var(--blue-700, #0369a1);
    display: flex; align-items: flex-start; gap: var(--sp-3, .75rem);
    padding: var(--sp-4, 1rem); border: 1px solid currentColor;
    border-radius: var(--r-lg, .75rem); background: var(--alert-bg); color: var(--alert-color);
    font-family: var(--font, Inter, sans-serif); font-size: var(--text-sm, .875rem); line-height: 1.5;
    text-align: left; box-sizing: border-box;
}
.tb-alert.success { --alert-bg: var(--green-100, #dcfce7); --alert-color: var(--green-700, #15803d); }
.tb-alert.warning { --alert-bg: var(--orange-100, #fff7ed); --alert-color: var(--orange-700, #c2410c); }
.tb-alert.error { --alert-bg: var(--red-100, #fee2e2); --alert-color: var(--red-700, #b91c1c); }
.tb-alert-icon { display: grid; place-items: center; flex: 0 0 1.5rem; height: 1.5rem; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 700; }
.tb-alert-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tb-alert-title { display: block; margin-bottom: var(--sp-1, .25rem); color: inherit; font-weight: var(--fw-semi, 600); }
.tb-alert p { margin: 0; color: inherit; }
.tb-page-alert { margin-bottom: var(--sp-5, 1.25rem); }
.tb-alert-action { margin-top: var(--sp-3, .75rem); white-space: normal; }
.tb-alert-action:disabled { opacity: .55; cursor: default; pointer-events: none; }
.tb-toast-wrap {
    position: fixed; bottom: calc(var(--sp-4, 1rem) + env(safe-area-inset-bottom));
    right: var(--sp-4, 1rem); left: var(--sp-4, 1rem); z-index: 1100;
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2, .5rem);
    pointer-events: none;
}
.tb-toast { pointer-events: auto; width: 100%; box-shadow: var(--shadow-md, 0 4px 12px rgba(15,23,42,.09)); }
.tb-toast-close { flex: 0 0 2rem; width: 2rem; min-height: 2rem; padding: 0; border: 0; border-radius: var(--r-sm, .375rem); background: transparent; color: inherit; font: inherit; font-size: 1.5rem; cursor: pointer; }
.tb-toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tb-toast-close:hover { background: rgba(0,0,0,.06); }
@media (min-width: 640px) { .tb-toast-wrap { left: auto; width: min(26rem, calc(100vw - 2rem)); } }
/* Keep app navigation reachable on small screens, also during onboarding. */
@media (max-width: 768px), (max-width: 1024px) and (hover: none) and (pointer: coarse) {
    body:has(.tabbar) .tb-toast-wrap { bottom: calc(var(--tabbar-h, 4.25rem) + var(--sp-4, 1rem) + env(safe-area-inset-bottom)); }
}

body:has(.flow-tabbar) .tb-toast-wrap { bottom: calc(var(--tabbar-h, 4.25rem) + var(--sp-4, 1rem) + env(safe-area-inset-bottom)); }