refactor #558: collapse secondary UI guidance

src/main/resources/static/css/app.css

@@ -209,6 +209,55 @@ body {
   margin: .35rem 0 0;
 }
 
+/* Keep the main task visible while moving background guidance out of the way. */
+.context-summary {
+  color: var(--rw-muted);
+  margin: .35rem 0 0;
+}
+
+.explanation-details {
+  background: var(--rw-surface-muted);
+  border: 1px solid var(--rw-border);
+  border-radius: 8px;
+  margin-top: .7rem;
+  padding: .65rem .8rem;
+}
+
+.explanation-details > summary {
+  color: var(--rw-primary);
+  cursor: pointer;
+  font-size: .84rem;
+  font-weight: 800;
+  list-style-position: inside;
+}
+
+.explanation-details[open] > summary {
+  border-bottom: 1px solid var(--rw-border);
+  margin-bottom: .65rem;
+  padding-bottom: .55rem;
+}
+
+.explanation-details p,
+.explanation-details ul,
+.explanation-details ol {
+  color: var(--rw-muted);
+  line-height: 1.55;
+  margin: .35rem 0 0;
+}
+
+.explanation-details > :last-child {
+  margin-bottom: 0;
+}
+
+.content-band > .explanation-details:first-child {
+  margin-top: 0;
+}
+
+.explanation-details.explanation-warning {
+  background: #fff8e8;
+  border-color: #e7d29c;
+}
+
 .architecture-strip {
   align-items: stretch;
   display: grid;