/* "New version" banner: fixed at the top, above everything, tap to hard-reload. */
.update {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 2 * var(--gutter)); padding: 10px 16px;
  border: 0; border-radius: 999px; background: var(--select); color: #fff; font: 600 14px/1.2 var(--font);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.4); cursor: pointer; text-align: left; animation: update-in 0.3s ease-out;
}
.update[hidden] { display: none; }
.update:disabled { cursor: progress; opacity: 0.85; }
.update__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.update__action { flex: none; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.2); }
@keyframes update-in { from { transform: translate(-50%, -12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .update { animation: none; } }