/* Server-rendered pages (share, pending, not found, privacy): layout on top
   of the widget stylesheet, which supplies the brand tokens, fonts and the
   card, tile, verdict, meta and notice components.

   Theme: the widget stylesheet keys its dark tokens on html.dark, which the
   server sets for ?theme=dark. Without an explicit theme the page follows
   the viewer's preference through the media query below, which repeats
   the dark triplets of the brand token table. */

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: 14 16 32;
    --surface: 26 26 46;
    --surface-2: 34 38 64;
    --text: 240 244 250;
    --muted: 158 167 188;
    --border: 46 54 88;
    --accent: 0 217 167;
    --accent-ink: 0 217 167;
    --accent-2: 110 144 219;
    --accent-contrast: 26 26 46;
    --success: 89 186 65;
    --warn: 251 191 36;
    --danger: 248 113 113;
    --warm: 32 34 48;
    --sage: 28 40 36;
    color-scheme: dark;
  }
}

body.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.page .footer {
  margin-top: auto;
}

.share {
  padding: 1.5rem 0 3rem;
}

@media (min-width: 640px) {
  .share {
    padding: 2.5rem 0 4rem;
  }
}

.share__card {
  max-width: 56rem;
  margin: 0 auto;
}

a.btn-run,
a.btn-secondary {
  text-decoration: none;
}

.share__chip {
  margin-top: 1.25rem;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
}

.share .meta time {
  font-variant-numeric: tabular-nums;
}

.prose {
  max-width: 44rem;
  margin: 0 auto;
  line-height: 1.65;
}

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgb(var(--text));
}

.prose h2 {
  margin-top: 2rem;
  font-size: 1.5rem;
}

.prose h3 {
  margin-top: 1.5rem;
  font-size: 1.125rem;
}

.prose h4 {
  margin-top: 1.25rem;
  font-size: 1rem;
}

.prose p,
.prose ul {
  margin-top: 0.875rem;
  color: rgb(var(--text) / 0.85);
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.375rem;
}

.prose .section__title {
  margin-top: 0;
}

/* Licence credit for the ASN data (templates/attribution.html), /privacy only. */
.prose .attribution {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: rgb(var(--text) / 0.7);
}