Add collaborative legislation summary again

It was removed in commit 128a8164 because we hadn't reviewed it nor
tested it properly. We're now adding it again, fixing the issues we've
found while reviewing.

app/assets/stylesheets/legislation_process.scss

@@ -1006,3 +1006,84 @@
     font-weight: bold;
   }
 }
+
+// 10. Legislation summary
+// -------------------------
+
+.process-summary {
+  > section {
+    @include grid-row;
+    margin-top: $line-height * 1.5;
+    padding: 0 rem-calc(16);
+
+    > header {
+      background: none;
+      border: 0;
+      margin: 0;
+    }
+  }
+
+  h4,
+  p {
+    margin-bottom: 0;
+  }
+
+  > section > header,
+  .question-title,
+  .annotation-title,
+  .comment-summary,
+  .proposal-summary {
+    @include breakpoint(medium) {
+      align-items: center;
+      display: flex;
+
+      > :first-child {
+        $margin: rem-calc(map-get($grid-column-gutter, "medium"));
+
+        margin-right: $margin;
+        width: calc(75% - #{$margin});
+      }
+    }
+  }
+
+  .debate-summary,
+  .proposal-summary,
+  .annotation-summary {
+    @extend %panel;
+    min-height: auto;
+    padding-bottom: rem-calc(16);
+    padding-top: rem-calc(16);
+
+    &:not(:last-child) {
+      margin-bottom: $line-height / 2;
+    }
+  }
+
+  .comments-count {
+    @include has-fa-icon(comments, r);
+  }
+
+  .question-title:not(:only-child) {
+    margin-bottom: $line-height / 2;
+  }
+
+  .annotation-title {
+    margin-bottom: $line-height / 2;
+    margin-top: $line-height / 2;
+  }
+
+  .annotation-quote {
+    border: 1px solid $black;
+    padding: rem-calc(10);
+  }
+
+  .comment-summary {
+    margin-bottom: $line-height / 2;
+
+    > :first-child {
+      background-color: rgba(217, 216, 243, 0.2);
+      border-radius: rem-calc(10);
+      padding: rem-calc(12);
+    }
+  }
+}

app/assets/stylesheets/participation.scss

@@ -612,6 +612,45 @@
   }
 }
 
+%panel {
+  background: #fff;
+  border: 1px solid;
+  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
+  border-radius: 0;
+  box-shadow: 0 1px 3px 0 $border;
+  margin-bottom: rem-calc(12);
+  min-height: rem-calc(192);
+  padding: rem-calc(12) rem-calc(12) 0;
+
+  @include breakpoint(medium) {
+    margin-bottom: rem-calc(-1);
+    padding-bottom: rem-calc(12);
+  }
+
+  @include breakpoint(medium) {
+    .divider {
+      display: inline-block;
+    }
+  }
+
+  h3 {
+    font-weight: bold;
+    margin-top: $line-height / 2;
+
+    a {
+      color: $text;
+    }
+  }
+
+  &.past-budgets {
+    min-height: 0;
+
+    .button ~ .button {
+      margin-left: $line-height / 2;
+    }
+  }
+}
+
 .debate,
 .proposal,
 .investment-project,
@@ -621,42 +660,7 @@
   margin: $line-height / 4 0;
 
   .panel {
-    background: #fff;
-    border: 1px solid;
-    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-    border-radius: 0;
-    box-shadow: 0 1px 3px 0 $border;
-    margin-bottom: rem-calc(12);
-    min-height: rem-calc(192);
-    padding: rem-calc(12) rem-calc(12) 0;
-
-    @include breakpoint(medium) {
-      margin-bottom: rem-calc(-1);
-      padding-bottom: rem-calc(12);
-    }
-
-    @include breakpoint(medium) {
-      .divider {
-        display: inline-block;
-      }
-    }
-
-    h3 {
-      font-weight: bold;
-      margin-top: $line-height / 2;
-
-      a {
-        color: $text;
-      }
-    }
-
-    &.past-budgets {
-      min-height: 0;
-
-      .button ~ .button {
-        margin-left: $line-height / 2;
-      }
-    }
+    @extend %panel;
   }
 
   .debate-content,