/* Shared shell and close control for native dialogs and the sign-in panel. */
:root{--dialog-backdrop:rgba(4,15,12,.76);--dialog-blur:6px}
.site-dialog{position:relative;box-sizing:border-box;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgba(0,0,0,.4);font-family:var(--font);text-align:left;overscroll-behavior:contain}
dialog.site-dialog{position:fixed;inset:0;height:fit-content;margin:auto;max-height:calc(100dvh - 40px)}
dialog.site-dialog:not([open]){display:none}
dialog.site-dialog::backdrop{background:var(--dialog-backdrop);backdrop-filter:blur(var(--dialog-blur))}
.site-dialog-close{position:absolute;top:12px;right:12px;z-index:1;display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--soft);color:var(--muted);font:inherit;font-size:24px;line-height:1;cursor:pointer}
.site-dialog-close:hover{color:var(--ink);border-color:var(--water)}
.site-dialog :focus-visible{outline:2px solid var(--water);outline-offset:3px}
.site-dialog .site-dialog-heading{padding-right:48px;min-height:32px}
@media(max-width:420px){.site-dialog{border-radius:20px}dialog.site-dialog{max-height:calc(100dvh - 24px)}}