/* Crono — shared toast styles, used on every page (record/undo on the app, the
   "new version" update prompt + "Updated" confirmation everywhere). Token-driven; one
   source of truth so the three pages can't drift. App-only toast bits (.toast-action /
   .toast-btn for the Undo action) stay in app.css. */
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1300;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; max-width: 92vw; }
/* The update prompt + the "Updated" confirmation sit near the top (more visible than bottom). */
.toasts-top { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }
.toast { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm); padding: 10px 16px; font-size: .92rem; box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.toast.in { opacity: 1; transform: none; }
.toast.error { border-left-color: var(--danger); }
.toast-amber { border-left-color: var(--accent-3); }   /* update prompt + its confirmation */
/* "Updated" confirmation — same width as the update prompt so the two don't look mismatched. */
.toast-confirm { width: min(380px, 88vw); text-align: center; }
/* "New version available" prompt — interactive (toasts container is pointer-events:none); amber to stand out. */
.toast-update { pointer-events: auto; display: flex; align-items: center; gap: 12px; width: min(380px, 88vw); border-left-color: var(--accent-3); }
.toast-update span { flex: 1 1 auto; min-width: 0; }
.toast-update .toast-reload, .toast-update .toast-dismiss { flex: 0 0 auto; }
.toast-reload { border: 1px solid var(--accent-3); background: var(--accent-3); color: var(--on-accent);
  padding: 5px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.toast-dismiss { border: none; background: transparent; color: var(--muted);
  font-size: 1.2rem; line-height: 1; padding: 2px 4px; border-radius: 999px; cursor: pointer; }
.toast-dismiss:hover { color: var(--text); background: transparent; }