/* Terms and Privacy. Loaded after styles.css, which supplies the fonts, palette tokens and
   the wordmark; everything here is the long-form reading layout. */

.doc,
.doc body {
  overscroll-behavior-y: auto;
}

.doc body {
  font-synthesis: none;
}

.doc ::selection {
  background: #e2d6fa;
}

@media (prefers-reduced-motion: no-preference) {
  .doc {
    scroll-behavior: smooth;
  }
}

/* Top bar, reading layout and footer share one width: a 220px contents rail, an 80px gap and
   a 680px reading column (about 70 characters a line), plus the page gutters. */
.doc {
  --doc-width: 1076px;
}

/* Top bar: the site wordmark, and the two documents. */
.doc-top {
  display: flex;
  max-width: var(--doc-width);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 auto;
  padding: 36px 48px 0;
}

.doc .wordmark {
  position: static;
}

.doc-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--wash);
  border-radius: 1000px;
}

.doc-switch a {
  padding: 8px 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  border-radius: 1000px;
}

.doc-switch a:hover {
  color: var(--ink);
}

.doc-switch a[aria-current="page"] {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(52, 40, 90, 0.12);
}

.doc a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Layout: one reading column; on wide screens the contents move into a sticky rail beside it. */
.doc-layout {
  max-width: var(--doc-width);
  margin: 0 auto;
  padding: 72px 48px 96px;
}

.doc-main {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.doc-head {
  position: relative;
  margin-bottom: 40px;
}

.doc h1 {
  margin: 0;
  font-size: 64px;
  line-height: 1.02;
  text-wrap: balance;
}

.doc-updated {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.doc-lede {
  margin: 24px 0 0;
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* One sticker beside the title, from the landing page's wall. */
.doc-sticker {
  position: absolute;
  top: -18px;
  right: -8px;
  width: 104px;
  transform: rotate(var(--r, 8deg));
  pointer-events: none;
}

.doc-sticker img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* The short version: the app's card surface. */
.doc-summary {
  margin: 0 0 40px;
  padding: 28px 32px 30px;
  background: var(--wash);
  border-radius: 24px;
}

.doc-summary h2 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--accent);
}

.doc-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-summary li {
  position: relative;
  padding-inline-start: 28px;
  font-size: 17px;
  line-height: 1.55;
}

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

.doc-summary li::before {
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 14px;
  height: 14px;
  content: "";
  background: var(--decorative);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5C6.6 16.8 3 13.6 3 9.4 3 6.6 5.1 4.5 7.7 4.5c1.8 0 3.3 1 4.3 2.5 1-1.5 2.5-2.5 4.3-2.5 2.6 0 4.7 2.1 4.7 4.9 0 4.2-3.6 7.4-9 11.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5C6.6 16.8 3 13.6 3 9.4 3 6.6 5.1 4.5 7.7 4.5c1.8 0 3.3 1 4.3 2.5 1-1.5 2.5-2.5 4.3-2.5 2.6 0 4.7 2.1 4.7 4.9 0 4.2-3.6 7.4-9 11.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Contents. */
.doc-toc {
  margin: 0 0 56px;
  padding: 0 0 36px;
  border-bottom: 1px solid #e4dcf5;
}

.doc-toc h2 {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.doc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}

.doc-toc li {
  break-inside: avoid;
}

.doc-toc a {
  display: block;
  padding: 5px 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.doc-toc a:hover {
  color: var(--ink);
}

/* The document. */
.doc-body section {
  scroll-margin-top: 32px;
}

.doc-body section + section {
  margin-top: 56px;
}

.doc h1,
.doc-body h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.doc-body h2 {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.15;
  text-wrap: balance;
}

.doc-body h3 {
  margin: 32px 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.doc-body p,
.doc-body li {
  font-size: 17px;
  line-height: 1.65;
}

.doc-body p {
  margin: 0 0 16px;
}

.doc-body ul {
  margin: 0 0 16px;
  padding-inline-start: 22px;
}

.doc-body li {
  padding-inline-start: 4px;
}

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

.doc-body li::marker {
  color: var(--decorative);
}

.doc-body strong {
  font-weight: 700;
}

.doc-body a,
.doc-lede a {
  color: var(--accent);
  overflow-wrap: break-word;
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}

.doc-body a:hover,
.doc-lede a:hover {
  color: var(--ink);
}

/* A plain callout for the one thing nobody should miss. */
.doc-note {
  margin: 0 0 16px;
  padding: 20px 24px;
  background: var(--tint-moment);
  border-radius: 18px;
}

.doc-note p:last-child {
  margin-bottom: 0;
}

.doc-contact {
  margin: 0 0 16px;
  font-style: normal;
  font-size: 17px;
  line-height: 1.65;
}

/* Footer. */
.doc-foot {
  display: flex;
  max-width: var(--doc-width);
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin: 0 auto;
  padding: 32px 48px calc(40px + env(safe-area-inset-bottom));
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  border-top: 1px solid #e4dcf5;
}

.doc-foot a {
  color: var(--muted);
  text-decoration: none;
  border-radius: 4px;
}

.doc-foot a:hover,
.doc-foot a[aria-current="page"] {
  color: var(--ink);
}

/* Wide screens: the reading column steps right and the contents follow it down the left rail. */
@media (min-width: 1100px) {
  .doc-main {
    margin: 0 0 0 300px;
  }

  .doc-toc {
    position: absolute;
    top: 0;
    right: calc(100% + 80px);
    bottom: 0;
    width: 220px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .doc-toc-inner {
    position: sticky;
    top: 40px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .doc-toc ol {
    columns: 1;
  }

  .doc-toc a {
    padding: 6px 0;
    font-size: 14px;
  }
}

/* Phones and small tablets. */
@media (max-width: 719.98px) {
  .doc-top {
    padding: calc(22px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left));
  }

  .doc-switch a {
    padding: 7px 12px;
    font-size: 13px;
  }

  .doc-layout {
    padding: 44px calc(24px + env(safe-area-inset-right)) 72px calc(24px + env(safe-area-inset-left));
  }

  .doc h1 {
    font-size: 44px;
  }

  .doc-lede {
    font-size: 17px;
  }

  .doc-sticker {
    display: none;
  }

  .doc-summary {
    margin-inline: -8px;
    padding: 22px 22px 24px;
    border-radius: 20px;
  }

  .doc-summary li {
    font-size: 16px;
  }

  .doc-toc ol {
    columns: 1;
  }

  .doc-body h2 {
    font-size: 27px;
  }

  .doc-body p,
  .doc-body li,
  .doc-contact {
    font-size: 16px;
  }

  .doc-foot {
    padding-inline: 24px;
  }
}

@media print {
  .doc-switch,
  .doc-toc,
  .doc-sticker,
  .doc-foot {
    display: none;
  }

  .doc-layout {
    display: block;
    padding: 24px 0;
  }

  .doc-summary,
  .doc-note {
    border: 1px solid #d8cfe8;
  }

  .doc-body a::after {
    content: " (" attr(href) ")";
    color: var(--muted);
    font-size: 0.85em;
  }

  .doc-body a[href^="#"]::after {
    content: "";
  }
}