dialog.panel{width:min(32rem,calc(100vw - 2*var(--float)));max-height:calc(100dvh - 2*var(--float-top));margin:auto;padding:var(--s5);
  border:0;border-radius:var(--radius-l);background:var(--surface);color:var(--text);box-shadow:var(--shadow);
  overflow:auto;overscroll-behavior:contain;font-size:var(--fs-input);line-height:var(--lh-dense);
  opacity:0;transform:translateY(var(--s2));
  transition:transform var(--t-slow) var(--ease),opacity var(--t-slow),overlay var(--t-slow) allow-discrete,display var(--t-slow) allow-discrete}
dialog.panel[open]{opacity:1;transform:none}
@starting-style{ dialog.panel[open]{opacity:0;transform:translateY(var(--s2))} }
dialog.panel::backdrop{background:var(--scrim);opacity:0;transition:opacity var(--t-slow),overlay var(--t-slow) allow-discrete,display var(--t-slow) allow-discrete}
dialog.panel[open]::backdrop{opacity:1}
@starting-style{ dialog.panel[open]::backdrop{opacity:0} }
dialog.panel>:first-child{margin-top:0}
dialog.panel h2{font-size:var(--fs-h3);margin:0 0 var(--s3)}
dialog.panel>.panel-head{position:sticky;top:calc(-1*var(--s5));z-index:1;display:flex;align-items:flex-start;gap:var(--s2);margin:calc(-1*var(--s5)) calc(-1*var(--s5)) var(--s3);padding:var(--s5) var(--s5) var(--s2);background:var(--surface)}
dialog.panel>.panel-head>:first-child{flex:1 1 auto;min-width:0;margin:0}
dialog.panel>.panel-head h2{margin:0;padding-top:calc((var(--h-control) - 1lh)/2)}
dialog.panel>.panel-head>.icon-button:last-child{flex:none;margin-inline-end:calc(-1*var(--s2))}
dialog.panel p{text-align:start;color:var(--text-2)}
dialog.panel .fields{margin:var(--s4) 0;grid-template-columns:minmax(0,1fr)}
dialog.panel .buttons{justify-content:flex-end;margin:var(--s5) 0 0}
dialog.panel .buttons [data-kind="danger"]:first-child{margin-right:auto}
@media (max-width:40rem){
  dialog.panel{width:100%;max-width:none;margin:auto 0 0;padding-bottom:max(var(--s5),env(safe-area-inset-bottom));
    border-radius:var(--radius-l) var(--radius-l) 0 0;transform:translateY(var(--s5))}
  @starting-style{ dialog.panel[open]{transform:translateY(var(--s5))} }
  dialog.panel[open]{transform:none}
  dialog.panel .buttons>*{flex:1}
}