Convert <details> on API page to macro HTML

The GOV.UK Frontend details component macro
  wraps its `<summary>` text in a `<span>`.

  We put a `<h3>` in the `<summary>` (actually valid
  use, based on the spec) so this breaks when the
  `<span>` wraps it.

  This converts the existing `<details>` tag to use
  all the class names the macro creates, but with
  all the `<summary>` contents in the `<h3>`.

  Also adds font-smoothing to the messages on the
  API page. This was previously set globally for
  all fonts in the GOV.UK Template CSS but is now
  just set for the New Transport 'nta' font.
  Included because the messages use the monospace
  font so don't have it by default.

app/assets/stylesheets/views/api.scss

@@ -1,6 +1,8 @@
 .api-notifications {
 
   font-family: monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   border-bottom: 1px solid $border-colour;
 
   &-item {
@@ -8,38 +10,59 @@
     border-top: 1px solid $border-colour;
     padding: 10px 0 0 0;
 
-    &-title {
-      color: $link-colour;
+    &__heading,
+    &__data,
+    &__view {
+      font-family: monospace;
+    }
+
+    &__heading {
+      display: block;
+      margin-bottom: $gutter-half;
+
+      &::before {
+        top: -1.3em;
+      }
+    }
+
+    &__meta {
+
+      display: block;
+      color: $secondary-text-colour;
       text-decoration: none;
-      display: block;
+
+      &-key,
+      &-time {
+        color: $secondary-text-colour;
+        display: inline-block;
+        width: auto;
+      }
+
+      @include govuk-media-query($from: tablet) {
+        &-key,
+        &-time {
+          width: 50%;
+        }
+
+        &-time {
+          text-align: right;
+        }
+      }
+
     }
 
-    &-recipient {
-      display: inline;
-    }
+    &__data {
 
-    &-meta {
-      display: block;
-      color: $secondary-text-colour;
-    }
+      border-left: none;
+      padding-left: 25px;
 
-    &-time {
-      text-align: right;
-    }
+      &-name {
+        color: $secondary-text-colour;
+      }
 
-    &-key {
-      display: inline-block;
-      padding-left: 46px;
-    }
-
-    &-data {
-
-      padding-left: 31px;
-      color: $secondary-text-colour;
-
-      &-item {
-        padding-bottom: 15px;
+      &-value {
         color: $text-colour;
+        padding-bottom: 15px;
       }
 
     }