/*
 * The legal pages (privacy.html, terms.html, dpa.html, imprint.html), loaded after style.css, whose
 * tokens, face, title, links and foot they share: the coming-soon page's family as a long-form
 * column, the cat on top linking home, then the page's title, its date line and the text. 640 px
 * wide, the width less 16 px a side on phones; light and dark by the device's scheme. No script.
 */

/* The Console's chrome gray and quiet rule, which the coming-soon page itself doesn't need. */
:root {
  --chrome: #f5f6f8;
  --rule: #e3e6ea;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chrome: #15181d;
    --rule: #23272d;
  }
}

/* The column: 640 px of text with 16 px a side (so a phone keeps 16 px), 96 px from the top (64 on
   phones). Replaces style.css's 400 px column. */
main.doc {
  display: block;
  flex: 1 0 auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 672px;
  min-width: 0;
  margin: 0 auto;
  padding: 96px 16px 64px;
}

/* Its left on a whole pixel where the browser can round (an odd window would put it on a half). */
@supports (margin-left: max(0px, round(down, 1.5px, 1px))) {
  main.doc {
    margin-right: 0;
    margin-left: max(0px, round(down, (100% - 672px) / 2, 1px));
  }
}

.doc .home {
  display: block;
  width: fit-content;
  text-decoration: none;
}

.doc article {
  margin-top: 24px;
}

/* The date line under the title, 4 px down (the coming-soon page's head). */
.doc .effective {
  margin-top: 4px;
  font: 400 13px/20px var(--sans);
  color: var(--ink-3);
}

/* The imprint's: two parts apart by a short rule. */
.doc .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.doc .meta .rule {
  flex: none;
  width: 1px;
  height: 12px;
  background: var(--rule-strong);
}

/* The page in a few sentences, above the full text. */
.doc .summary {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--chrome);
  font: 400 14px/22px var(--sans);
  color: var(--ink);
  text-wrap: pretty;
}

/* A link to a section (/privacy#google-analytics) leaves it 24 px of room. */
.doc [id] {
  scroll-margin-top: 24px;
}

.doc h2 {
  margin: 40px 0 0;
  font: 600 16px/24px var(--sans);
  color: var(--ink);
}

.doc h3 {
  margin: 24px 0 0;
  font: 600 14px/22px var(--sans);
  color: var(--ink);
}

.doc h2 + h3 {
  margin-top: 12px;
}

.doc p,
.doc ul,
.doc table,
.doc dl {
  margin: 12px 0 0;
}

.doc :is(h2, h3) + :is(p, ul, table, dl) {
  margin-top: 8px;
}

.doc article p,
.doc li {
  font: 400 14px/22px var(--sans);
  color: var(--ink-2);
}

.doc ul {
  padding-left: 20px;
  list-style: disc;
}

.doc li::marker {
  color: var(--ink-3);
}

.doc li + li {
  margin-top: 6px;
}

.doc strong {
  font-weight: 600;
  color: var(--ink);
}

.doc code {
  padding: 0 4px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--chrome);
  font: 400 12px/20px var(--mono);
  color: var(--ink);
}

/* Tables: 1 px rules between rows, no fill. */
.doc table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/20px var(--sans);
  color: var(--ink-2);
}

.doc th,
.doc td {
  padding: 8px 16px 8px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.doc :is(th, td):last-child {
  padding-right: 0;
}

.doc th {
  font-weight: 600;
  color: var(--ink);
}

.doc td ul {
  margin-top: 0;
}

.doc td li {
  font-size: 13px;
  line-height: 20px;
}

/* The imprint's facts: a name on the left, its value on the right, 1 px rules between. */
.doc .kv {
  border-top: 1px solid var(--rule);
}

.doc .kv > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.doc .kv dt {
  padding-top: 1px;
  font: 400 13px/20px var(--sans);
  color: var(--ink-3);
}

.doc .kv dd {
  margin: 0;
  font: 400 14px/22px var(--sans);
  color: var(--ink);
}

.doc .kv .sub {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-3);
}

.doc .kv .mono {
  font: 400 13px/22px var(--mono);
}

@media (max-width: 767px) {
  main.doc {
    padding-top: 64px;
    padding-bottom: 48px;
  }

  /* The imprint's date line takes two lines rather than leave its rule at a line's end. */
  .doc .meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .doc .meta .rule {
    display: none;
  }

  .doc .kv > div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .doc .kv dt {
    padding-top: 0;
  }
}