/* Dialog chrome never scrolls away; only long content has one scroll area. */
dialog[data-responsive-dialog]{box-sizing:border-box;position:fixed;inset:auto;margin:0;left:50%;top:calc(var(--dialog-top,0px) + var(--dialog-height,100dvh)/2);transform:translate(-50%,-50%);max-width:calc(100vw - 24px);max-height:calc(var(--dialog-height,100dvh) - 24px)!important;padding:0!important;overflow:hidden!important;border-radius:12px}
dialog[data-responsive-dialog][open]{display:flex;flex-direction:column}
dialog[data-responsive-dialog] .dialog-frame{display:flex;flex-direction:column;min-height:0;max-height:inherit;overflow:hidden;width:100%}
dialog[data-responsive-dialog] .dialog-heading{flex:none;margin:0;padding:16px 20px;border-bottom:1px solid var(--line);gap:12px;min-width:0}
dialog[data-responsive-dialog] .dialog-heading h2{font-size:clamp(17px,2.5vw,22px);margin:0;overflow-wrap:anywhere;min-width:0}
dialog[data-responsive-dialog] .dialog-heading button{min-width:44px;min-height:44px;padding:4px;flex:none}
dialog[data-responsive-dialog] .dialog-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-block:12px;padding:16px 20px;overflow-wrap:anywhere}
dialog[data-responsive-dialog] .dialog-actions{flex:none;margin:0;padding:12px 20px;border-top:1px solid var(--line);gap:8px;flex-wrap:wrap;background:var(--panel)}
dialog[data-responsive-dialog] .dialog-actions button{min-height:44px;white-space:normal;max-width:100%;font-size:14px;padding:8px 12px}
dialog[data-responsive-dialog] fieldset{max-height:none;overflow:visible}
dialog[data-responsive-dialog] input,dialog[data-responsive-dialog] select,dialog[data-responsive-dialog] textarea{min-width:0;max-width:100%}
@media(max-width:600px),(max-height:500px){dialog[data-responsive-dialog]{max-width:calc(100vw - 16px);max-height:calc(var(--dialog-height,100dvh) - 16px)!important}dialog[data-responsive-dialog] .dialog-heading{padding:8px 12px}dialog[data-responsive-dialog] .dialog-body{padding:12px}dialog[data-responsive-dialog] .dialog-actions{padding:8px 12px}dialog[data-responsive-dialog] label{margin:12px 0}dialog[data-responsive-dialog] .form-columns{gap:0}dialog[data-responsive-dialog] input,dialog[data-responsive-dialog] select,dialog[data-responsive-dialog] textarea{font-size:16px}dialog[data-responsive-dialog] .dialog-actions button{flex:1 1 auto}}