/* Shared modal bounds follow the visible viewport, including an open keyboard. */
#dialog, #resources-reader {
  max-height: calc(var(--dialog-viewport-height, 100dvh) - 24px);
  max-width: calc(100vw - 24px);
  overscroll-behavior: contain;
}
#dialog .dialog-bar, #resources-reader .resource-reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
}
#dialog .dialog-bar .icon-button, #resources-reader .resource-reader-close,
#commune-sheet .sheet-top .icon-button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
#dialog-body { overflow-wrap: anywhere; }
#commune-sheet .sheet-share { width: 100%; margin: 12px 0; min-height: 46px; }
#commune-sheet .sheet-top { position: sticky; top: 0; background: inherit; z-index: 3; }
#commune-sheet .sheet-info summary { min-height: 44px; padding-block: 12px; }
@media (max-width: 820px), (max-width: 1000px) and (max-height: 560px) {
  #dialog, #dialog:has(.share-composer), #resources-reader {
    position: fixed;
    inset: var(--dialog-viewport-top, 0px) 0 auto;
    margin: 12px auto;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    max-height: calc(var(--dialog-viewport-height, 100dvh) - 24px);
    border-radius: 18px;
  }
  #dialog .dialog-bar { min-height: 62px; padding: 8px 12px; }
  #dialog:has(.share-composer) #dialog-body { padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
  #dialog .share-preview-stage { height: min(240px, 34dvh); min-height: 120px; }
  #dialog .share-composer .share-intro { margin-bottom: 14px; }
  #dialog .share-workspace { gap: 16px; }
  #dialog .share-link-actions { align-items: stretch; }
  #dialog .share-link-actions .button { min-width: 115px; }
  #resources-reader .resource-reader-scroll { max-height: calc(var(--dialog-viewport-height, 100dvh) - 94px); }
}
@media (max-width: 400px) {
  #dialog .share-formats button { flex-direction: column; gap: 7px; padding-inline: 4px; }
  #dialog .share-formats button[aria-pressed=true] { padding-inline: 3px; }
  #dialog .share-formats strong { white-space: nowrap; font-size: 11px; }
  #dialog .share-format-shape { height: 20px; }
}