/* #region zone:desk.version-banner.style — กล่องกลางจอใช้ token ของแต่ละเว็บ ไม่เปลี่ยน layout */
/* Shared component tokens bridge each web's existing design system. */
:root {
  --version-space-sm: var(--s-2, var(--sp-2, 8px));
  --version-space-md: var(--s-3, var(--sp-3, 12px));
  --version-space-lg: var(--s-4, var(--sp-4, 16px));
  --version-space-xl: var(--s-6, var(--sp-6, 24px));
  --version-dialog-width: 360px;
  --version-tap: var(--tap-min, 44px);
  --version-font: var(--font-sans, Anuphan, sans-serif);
  --version-label-size: 12px;
  --version-on-accent: #ffffff;
  --version-title-size: 20px;
  --version-body-size: 14px;
  --version-radius: var(--r-lg, var(--r-card, 16px));
  --version-button-radius: var(--r-sm, var(--r-control, 8px));
  --version-shadow: var(--shadow-raised, var(--pop-shadow, var(--shadow-2, var(--shadow))));
}
.web-version {
  display: block;
  margin-block: var(--version-space-sm);
  color: var(--text-2, var(--muted));
  font: 400 var(--version-label-size)/1.5 var(--version-font);
  white-space: nowrap;
}
.web-version-footer {
  padding-inline: var(--version-space-lg);
}
dialog.version-banner {
  position: fixed;
  inset: 0;
  margin: auto;
  transform: none;
  width: calc(100vw - 2 * var(--version-space-lg));
  max-width: var(--version-dialog-width);
  height: fit-content;
  max-height: calc(100dvh - 2 * var(--version-space-lg));
  overflow: auto;
  box-sizing: border-box;
  padding: var(--version-space-xl);
  border: 1px solid var(--border, var(--line));
  border-radius: var(--version-radius);
  background: var(--surface-1, var(--panel, var(--bg)));
  color: var(--text-1, var(--text));
  box-shadow: var(--version-shadow);
  font: 500 var(--version-body-size)/1.5 var(--version-font);
}
dialog.version-banner:not([open]) {
  display: none;
}
dialog.version-banner::backdrop {
  background: var(
    --scrim-strong,
    var(--scrim, color-mix(in srgb, var(--text-1, var(--text)) 45%, transparent))
  );
}
.version-banner h2 {
  margin: 0 0 var(--version-space-md);
  font: 700 var(--version-title-size)/1.4 var(--version-font);
  overflow-wrap: anywhere;
}
.version-banner p {
  margin: 0 0 var(--version-space-xl);
}
.version-banner-actions {
  display: flex;
  gap: var(--version-space-md);
}
.version-banner button {
  min-height: var(--version-tap);
  min-width: var(--version-tap);
  flex: 1;
  padding: var(--version-space-sm) var(--version-space-md);
  border: 1px solid var(--border, var(--line));
  border-radius: var(--version-button-radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.version-banner button.version-banner-reload {
  background: var(--accent);
  color: var(--on-accent, var(--accent-fg, var(--text-on-accent, var(--version-on-accent))));
  border-color: transparent;
}
.version-banner button:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
}
dialog.version-banner[data-web='disaster'],
dialog.version-banner[data-web='map'] {
  background: var(--glass-strong);
}
@media (prefers-reduced-motion: reduce) {
  dialog.version-banner,
  .version-banner button,
  dialog.version-banner::backdrop {
    animation: none;
    transition: none;
  }
}
/* #endregion */