:root { --drawer-time: 260ms; --drawer-ease: cubic-bezier(.22,.7,.25,1); }

.edit_panel.open, dialog.auditDrawer[open] {
  translate: 0 0;
  transition: translate var(--drawer-time) var(--drawer-ease);
}
body > .edit_panel_backdrop, dialog.auditDrawer[open]::backdrop {
  background-color: rgb(0 0 0 / 50%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background-color var(--drawer-time), backdrop-filter var(--drawer-time), -webkit-backdrop-filter var(--drawer-time);
}
@starting-style {
  .edit_panel.open, dialog.auditDrawer[open] { translate: 100% 0; }
  body > .edit_panel_backdrop, dialog.auditDrawer[open]::backdrop {
    background-color: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  }
}
.edit_panel.open[data-closing], dialog.auditDrawer[open][data-closing] { translate: 100% 0; }
body > .edit_panel_backdrop:has(+ [data-closing]), dialog.auditDrawer[data-closing]::backdrop {
  background-color: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
}
@media (max-width: 768px) {
  /* The form follows the visual viewport, but Safari's translucent keyboard
     controls can reveal the layout viewport beneath it. Keep that area white. */
  body > .edit_panel_backdrop {
    min-height: 100lvh;
    background-color: white;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .edit_panel { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { :root { --drawer-time: 0s; } }