/* Support and legal pages: intro, contents navigation and prose. Load after site.css. */

.page-intro {
  margin-bottom: 40px;
  padding: 48px 0 38px;
  border-bottom: 1px solid var(--color-border);
}

.page-intro .app-identity {
  margin-bottom: 16px;
  color: var(--color-text);
}

.app-identity a {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  min-height: var(--target-min);
}

.page-intro h1 {
  margin: 16px 0 20px;
  color: var(--color-silver);
  font-size: clamp(2.5rem, 2.129rem + 1.524vw, 3.5rem);
}

.page-purpose {
  max-width: 680px;
  font-size: 1.125rem;
}

.updated {
  margin-top: 16px;
  font-size: 0.875rem;
}

.document-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  padding-bottom: 64px;
}

/* Topic navigation */

.topic-nav {
  align-self: start;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
}

.topic-nav h2 {
  margin-bottom: 14px;
  font-size: 1.0625rem;
  letter-spacing: 0;
}

.topic-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-nav a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 8px 0;
  color: var(--color-silver);
  font-size: 0.875rem;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Article */

.prose {
  max-width: 740px;
  min-width: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.prose section,
.policy-routing {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  scroll-margin-top: 24px;
}

/* App policy links above the general privacy policy */

.prose .policy-routing ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose .policy-routing li {
  margin: 0;
  padding: 0;
}

.policy-routing a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

.prose h2 {
  margin-bottom: 20px;
  font-size: 1.875rem;
  line-height: 1.2;
}

.prose h3 {
  margin: 24px 0 12px;
  font-size: 1.4375rem;
  line-height: 1.25;
}

.prose p,
.prose ol,
.prose ul {
  margin: 0 0 20px;
  color: var(--color-muted);
}

.prose ol,
.prose ul {
  padding-left: 1.5em;
}

.prose li {
  margin-bottom: 14px;
  padding-left: 4px;
}

.prose li > p,
.prose li > ul {
  margin-bottom: 10px;
}

.prose li > ul > li {
  margin-bottom: 6px;
}

.prose li > :last-child,
.prose section > :last-child {
  margin-bottom: 0;
}

.prose strong,
.prose em {
  color: var(--color-text);
}

.prose em {
  font-style: normal;
  font-weight: 600;
}

.prose a {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.prose .path {
  padding: 10px 14px;
  border-left: 2px solid var(--color-gold-border);
  border-radius: 0 10px 10px 0;
  background: var(--color-surface);
  color: var(--color-silver);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.standalone-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

/* Contact callout */

.prose .help-callout {
  margin-bottom: 0;
  padding: 26px;
  border: 1px solid var(--color-gold-border);
  border-radius: 22px;
  background: var(--color-surface);
}

.help-callout h2 {
  font-size: 1.6875rem;
}

.prose .callout-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.prose .callout-links li {
  margin: 0;
  padding: 0;
}

.callout-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  color: var(--color-silver);
}

@media (max-width: 1100px) {
  .document-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .topic-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
  }
}

@media (max-width: 760px) {
  .page-intro {
    margin-bottom: 28px;
    padding: 28px 0;
  }

  .page-intro h1 {
    margin: 14px 0 18px;
  }

  .page-purpose {
    font-size: 1rem;
  }

  .updated {
    font-size: 0.8125rem;
  }

  .document-layout {
    gap: 28px;
    padding-bottom: 40px;
  }

  .topic-nav ul {
    display: block;
  }

  .prose {
    font-size: 1rem;
  }

  .prose section,
  .policy-routing {
    margin-bottom: 26px;
    padding-bottom: 26px;
  }

  .prose h2 {
    font-size: 1.625rem;
  }

  .prose h3 {
    font-size: 1.3125rem;
  }

  .prose .path {
    font-size: 0.875rem;
  }

  .prose .help-callout {
    padding: 22px;
  }
}

@media print {
  :root {
    --color-bg: #fff;
    --color-text: #000;
    --color-muted: #000;
    --color-silver: #000;
    --color-gold: #000;
    --color-surface: #fff;
    --color-frame: #fff;
    --color-border: #999;
    --color-gold-border: #999;
  }

  .topic-nav,
  .policy-routing,
  .footer-nav,
  .brand-mark,
  .app-identity img {
    display: none;
  }

  .document-layout {
    display: block;
  }
}