/* ---- legal pages (privacy policy, cookies): link colour, tables, scroll wrappers. Tokens only, every selector starts with .mh- ---- */

.mh-legal h2 {
  margin: var(--mh-space-8) 0 var(--mh-space-3);
  font-family: var(--mh-font-display);
  font-size: 1.3rem;
}

/* an unclassed link would be browser-blue (2.04:1 on the dark page), so legal links get the accent and an underline */
.mh-legal a {
  color: var(--mh-accent);
  text-decoration: underline;
}

.mh-legal a:hover {
  color: var(--mh-accent-hover);
}

.mh-legal__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--mh-tap);
}

.mh-legal__link:focus-visible,
.mh-legal a:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-legal__table-wrap {
  max-width: 100%;
  margin: 0 0 var(--mh-space-6);
  overflow-x: auto;
}

.mh-legal__table-wrap:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 2px;
}

.mh-legal__table {
  width: 100%;
  min-width: 34rem;                  /* four columns stay readable on a phone; the wrapper scrolls, the page does not */
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.5;
}

.mh-legal__table caption {
  padding: 0 0 var(--mh-space-2);
  text-align: left;
  font-family: var(--mh-font-display);
  font-weight: 700;
  font-size: 1rem;
}

.mh-legal__table th,
.mh-legal__table td {
  padding: var(--mh-space-2) var(--mh-space-3);
  border-bottom: 1px solid var(--mh-surface-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.mh-legal__table thead th {
  color: var(--mh-text-muted);
  font-weight: 600;
}

.mh-legal__note {
  display: block;
  margin-top: var(--mh-space-1);
  color: var(--mh-text-muted);
}

/* ---- no layout shift while the scripts fill the page (CLS) ----
   Identity values, the storage tables, the host list and the info paragraphs are written by scripts after the first paint, and
   everything below them would jump. So, until the scripts have run (class mh-ready on <html>, set by facts.js at DOMContentLoaded),
   the first such block, everything after it and what follows main (the crossroads and the footer) is invisible. visibility keeps the
   place, and an element that was not visible in the previous frame is not counted as moved. The text above the first block, the
   largest paint of the page, stays visible. If no script ever sets the class, a CSS timer reveals the page after 3 s; without
   JavaScript at all the noscript style in the head reveals it at once. */
.mh-root:not(.mh-ready) .mh-legal > [data-mh-needs-js],
.mh-root:not(.mh-ready) .mh-legal > [data-mh-needs-js] ~ *,
.mh-root:not(.mh-ready) .mh-legal ~ .mh-crossroads,
.mh-root:not(.mh-ready) .mh-legal ~ .mh-footer {
  visibility: hidden;
  animation: mh-legal-reveal 0s linear 3s forwards;
}

@keyframes mh-legal-reveal {
  to {
    visibility: visible;
  }
}