/* The heading stays in reach while a long dialog scrolls. */
dialog{max-height:92dvh;overflow:auto}
dialog>form{background:inherit}
dialog .modal-heading{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;background:inherit;padding:0 0 14px;margin-bottom:18px;flex-shrink:0}
dialog .modal-heading h2{margin:0;min-width:0;flex:1;overflow-wrap:anywhere}
dialog .modal-heading:before{content:'';position:absolute;inset:-32px -2px 0;background:inherit;z-index:-1;pointer-events:none}
dialog .modal-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer;margin-left:auto;order:2;align-self:flex-start}
dialog .modal-close svg{width:22px;height:22px;stroke-width:2}
dialog .modal-close:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
dialog .modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
dialog .finance-dialog-head select{order:1;flex:0 1 320px;max-width:320px}
@media(max-width:760px){dialog .modal-heading{gap:12px}dialog .modal-heading h2{font-size:18px}dialog .finance-dialog-head select{order:3;flex-basis:100%;max-width:none}dialog .modal-close{flex-basis:44px}}