fix(accordion): place children inside content div and add group wrapper

Children were appended to the outer <details> element instead of inside
the .accordion-content div, causing text to render outside the accordion
box. Also adds .accordion-group wrapper to eliminate parent gap between
stacked items, and styles content with smaller font and muted color.

src/ui/dialog.css

@@ -17,6 +17,8 @@
 .dialog[open] {
   display: flex;
   flex-direction: column;
+  gap: var(--size-3);
+  padding: var(--size-6);
 }
 
 .dialog::backdrop {
@@ -28,8 +30,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--size-1);
-  padding: var(--size-6);
-  padding-bottom: 0;
 }
 
 .dialog-header h1,
@@ -48,14 +48,14 @@
 }
 
 .dialog-body {
-  padding: var(--size-6);
   overflow-y: auto;
 }
 
+.dialog-body > *:first-child { margin-top: 0; }
+.dialog-body > *:last-child { margin-bottom: 0; }
+
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
   gap: var(--size-2);
-  padding: var(--size-6);
-  padding-top: 0;
 }