/* ============================================================================
   Update notice — a quiet bar, not a modal. It must never sit on top of the
   question someone is answering, and it must never block the page.
   Tokens only.
   ========================================================================= */

.updbar {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  z-index: 40;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;

  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px 16px;

  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);

  animation: updbar-in var(--speed) ease-out;
}

@keyframes updbar-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.updbar__text {
  flex: 1 1 220px;
  min-width: 0;
  font-size: .95rem;
  line-height: 1.45;
}

.updbar__sub { color: var(--text-muted); }

.updbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.updbar__status {
  color: var(--text-muted);
  font-size: .87rem;
}

.updbar__btn {
  min-height: var(--tap);
  padding: 0 16px;
  white-space: nowrap;
}

.updbar__later {
  min-height: var(--tap);
  padding: 0 12px;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.updbar__later:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.updbar__later:disabled { opacity: .5; cursor: not-allowed; }

/* One-handed: stack, and let the primary action span the width. */
@media (max-width: 460px) {
  .updbar__actions { width: 100%; margin-left: 0; }
  .updbar__btn { flex: 1 1 auto; }
  .updbar__status { flex: 1 0 100%; order: -1; }
}