Fix UI spacing issues

web/static/style.css

@@ -289,10 +289,36 @@ button.small { padding: .2rem .5rem; font-size: .75rem; }
 
 .cli code, .hint code { background: var(--bg); padding: .1rem .3rem; border-radius: 4px; }
 
-/* One-off token, tucked away so the common path stays a single button. */
-.onceoff { margin-bottom: 1rem; }
-.onceoff summary { font-weight: 400; font-size: .875rem; color: var(--muted); }
-.onceoff .field { max-width: 24rem; }
+/* Disclosure panels: the one-off token on the upload form, "Remove this file"
+   on the info page. Closed, a panel is a single line and needs nothing; open,
+   it needs an edge, or its contents read as loose page furniture and there is
+   no telling where it ends. */
+details.panel {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  margin-bottom: 1rem;
+}
+details.panel > summary {
+  padding: .625rem .75rem;
+  font-weight: 400;
+  font-size: .875rem;
+  color: var(--muted);
+  cursor: pointer;
+}
+details.panel[open] > summary {
+  border-bottom: 1px solid var(--line);
+  margin-bottom: .75rem;
+}
+/* The summary carries the panel's padding itself; everything else is inset to
+   match, and the panel closes the gap under the last of them. */
+details.panel > :not(summary) { padding-left: .75rem; padding-right: .75rem; }
+details.panel[open] { padding-bottom: .75rem; }
+details.panel > :last-child { margin-bottom: 0; }
+details.panel .field { max-width: 24rem; }
+
+/* A hint that introduces a control is an instruction for what follows, not a
+   caption for what came before, so it must not sit against it. */
+.hint + form, .hint + .field { margin-top: .75rem; }
 
 .limits .hint { margin-top: .75rem; }
 .limits dl, .card dl { row-gap: .375rem; }