/* Keep the generated paper's alpha silhouette. Only the centre and straight edges stretch;
   the corner pieces retain the same geometry on a tall phone and a short landscape screen. */
.dialog,.fl-sheet{position:relative;isolation:isolate;background:none;border-radius:0;box-shadow:none;overflow:visible}
.dialog::before,.fl-sheet::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  border:solid transparent;border-width:36px 36px 54px;
  border-image-source:url('/assets/ui/harbor/panel.png');border-image-slice:64 64 96 fill;border-image-width:36px 36px 54px;border-image-repeat:stretch;
  filter:drop-shadow(0 8px 13px #123d3a45)}
.dialog{padding:26px 24px 58px}
.paper-dialog-body{display:flex;flex-direction:column;align-items:center;width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8da89c transparent}
.paper-dialog-body>*{flex-shrink:0}
.fl-sheet{padding:24px 24px 58px}
.fl-scroll{border-radius:0}
.fl-foot{position:relative;color:#4c6662}
@media(max-width:345px){.dialog{padding:24px 20px 56px}.fl-sheet{padding:22px 20px 56px}}
@media(max-height:480px){
  .overlay{padding:10px}
  .dialog{padding:18px 22px 48px;max-height:calc(100dvh - 20px)}
  .fl-sheet{padding:16px 20px 48px}
  .dialog::before,.fl-sheet::before{filter:drop-shadow(0 4px 6px #123d3a45)}
}