#client-update-root,
.client-update-owner { display: contents; }

/* The archived stylesheet forces every dialog to display as a grid, which
   overrides the browser's hidden state after close() for persistent Rixel views. */
dialog.common-modal:not([open]) { display: none; }

.client-update-notice {
  position: fixed;
  inset-block: auto max(1rem, env(safe-area-inset-bottom));
  z-index: 110;
  inset-inline: max(1rem, calc((100vw - 73.75rem) / 2));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
  border-radius: 1.125rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 96%, var(--brand));
  box-shadow: 0 1.125rem 3.125rem rgb(54 38 29 / 20%);
  margin: 0;
}

.client-update-notice > span { color: var(--brand); font-size: 1.3rem; }
.client-update-notice > div:nth-child(2) { display: grid; gap: .125rem; font-size: .875rem; line-height: 1.35; }
.client-update-notice > div:nth-child(2) span { color: var(--muted); }
.client-update-actions { display: flex; align-items: center; gap: .5rem; }
.client-update-actions button { min-height: 2.75rem; border: 0; border-radius: 999px; padding: 0 .95rem; font: inherit; font-weight: 800; }
.client-update-actions button:first-child { color: var(--muted); background: transparent; }
.client-update-actions button:last-child { color: var(--surface); background: var(--brand); }
.client-update-actions button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body:has(.local-order-simulator) .client-update-notice { bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 5.5rem)); }

@media (width <= 640px) {
  .client-update-notice { grid-template-columns: auto minmax(0, 1fr); gap: .625rem .75rem; padding: .8125rem; border-radius: 1rem; }
  .client-update-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .client-update-notice > div:nth-child(2) span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .client-update-notice { scroll-behavior: auto; }
}