Consolidate list card dialog interaction into layout 3

styles/27-patterns-delete-confirmation.css

@@ -21,10 +21,14 @@
   position: absolute;
   inset: 0;
   background: var(--surface-delete-confirmation-target-dim-overlay);
-  opacity: var(--layout-delete-confirmation-target-dim-opacity);
+  opacity: 0;
   pointer-events: none;
 }
 
+.sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
+  opacity: var(--layout-delete-confirmation-target-dim-opacity);
+}
+
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
   top: 50%;
@@ -37,6 +41,10 @@
   box-shadow: var(--shadow-overlay);
 }
 
+.sg-delete-confirmation-pattern__floating-card[hidden] {
+  display: none;
+}
+
 .sg-delete-confirmation-pattern__body {
   display: flex;
   flex-direction: column;