/* Shared popup polish: comfortable viewport fit and touch-friendly close controls. */
dialog {
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(36px, env(safe-area-inset-bottom, 0px));
  scroll-padding-block: 24px;
}
/* A real trailing box preserves breathing room at the scroll end in mobile Safari. */
dialog::after { content: ''; display: block; height: 12px; flex-shrink: 0; }
dialog :is(.dialog-close, .close) {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
}
dialog :is(.dialog-close, .close):is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow: none;
}
html[data-ui-input='keyboard'] dialog :is(.dialog-close, .close):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  background: #ffffff18;
}
#member-dialog > .eyebrow, #listen-dialog > .eyebrow, #track-dialog > .eyebrow {
  display: block;
  padding-right: 38px;
}
@media (max-width: 700px) {
  #member-dialog { padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
  #member-dialog > .button { width: 100%; justify-content: center; text-align: center; }
  .welcome { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
  .welcome > .welcome-light { order: -1; flex: 0 0 auto; width: min(100%, 430px); height: clamp(160px, 43vw, 230px); margin: 0 auto 12px; }
  .welcome > div:not(.welcome-light) { width: 100%; }
}