/* ---------- Toast ---------- */

#toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  background: var(--ink);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow);
  animation: toast-in 0.2s ease-out;
  max-width: 90vw;
  text-align: center;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* PWA "update available" banner, shown by the service-worker update flow. */
#updateBanner {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 3000;
  border: none;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
#updateBanner[hidden] { display: none; }