/* Keep every native lightbox centered in the current viewport. */
dialog:modal {
  position:fixed;
  inset:0;
  margin:auto!important;
  box-sizing:border-box;
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
}
dialog:modal:not(.trade-info-dialog) {overflow:auto}

/* Draw the close mark independently of the text font's baseline. */
dialog:modal :is(.dialog-heading,.membership-dialog-heading)>button[aria-label] {
  position:relative;
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  font-size:0!important;
  line-height:1;
}
dialog:modal :is(.dialog-heading,.membership-dialog-heading)>button[aria-label]::before {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  margin:auto;
  width:16px;
  height:16px;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Preserve the icon when the page applies its action-label typography. */
.app-shell[data-page] dialog:modal :is(.dialog-heading,.membership-dialog-heading)>button[aria-label] {font-size:0!important}
dialog:modal .trade-info-close {display:grid;place-items:center;padding:0;line-height:1}