/* Legal documents: dark site chrome, light paper.
 *
 * These pages break the theme deliberately. /privacy/ and /terms_of_service/
 * are registered in Google Play Console and linked from inside shipped app
 * binaries, and someone arriving from a Settings dialog is reading, not
 * browsing. Long-form text on a near-black ground is the wrong instrument for
 * that, so the document itself is a light sheet and only the frame stays dark.
 *
 * The wording of these documents is not ours to change. Nothing in here does
 * anything but present it.
 */

.legal-head {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.legal-head h1 { font-size: var(--step-5); }

.legal-head__meta {
  margin-block-start: var(--sp-3);
  color: var(--text-dim);
}

.legal-layout { padding-block: var(--sp-7) var(--sp-8); }

.legal-layout .shell {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 62rem) {
  .legal-layout .shell {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }
}

/* ------------------------------------------------------------------ toc --- */

.toc { font-size: var(--step--1); }

@media (min-width: 62rem) {
  .toc {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.toc h2 {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-block-end: var(--sp-3);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.toc a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 8px;
  border-inline-start: 2px solid var(--line);
  color: var(--text-dim);
  text-decoration: none;
  line-height: 1.35;
}

.toc a:hover {
  color: var(--text);
  border-inline-start-color: var(--cyan);
  background: var(--surface);
}

/* ------------------------------------------------------------- document --- */

/* The light sheet. Colors here are local rather than tokens: the site tokens
 * are all built for a dark ground, and re-pointing them for one component
 * would leak into the chrome that surrounds it. */
.doc {
  --paper: #FBFAF7;
  --paper-edge: #E3E0D8;
  --paper-ink: #1B1F24;
  --paper-ink-2: #4A525B;

  padding: clamp(var(--sp-5), 5vw, var(--sp-8));
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -30px #000;
  /* A comfortable measure regardless of how wide the column gets. */
  font-size: 1.0625rem;
  line-height: 1.7;
}

.doc > * { max-width: 40rem; }

.doc p,
.doc li { color: var(--paper-ink); }

.doc p + p,
.doc ul + p,
.doc ol + p { margin-block-start: 1em; }

.doc h2,
.doc h3 {
  color: var(--paper-ink);
  font-stretch: 108%;
  margin-block: 2em 0.6em;
  scroll-margin-top: 6rem;      /* clears the sticky header when anchored to */
}

.doc h2 { font-size: 1.5rem; }
.doc h3 { font-size: 1.2rem; }
.doc h2:first-child,
.doc h3:first-child { margin-block-start: 0; }

.doc ul,
.doc ol { margin-block: 1em; padding-inline-start: 1.3em; }
.doc li + li { margin-block-start: 0.6em; }

.doc a { color: var(--cyan-ink); text-underline-offset: 0.15em; }
.doc a:hover { color: #063f5e; }

.doc strong { color: #000; }

.doc table { border-collapse: collapse; margin-block: 1.5em; }
.doc th, .doc td { border: 1px solid var(--paper-edge); padding: 0.5em 0.75em; text-align: left; }

/* The dateline the documents open with. */
.doc__date {
  color: var(--paper-ink-2);
  font-size: var(--step--1);
  padding-block-end: 1em;
  border-bottom: 1px solid var(--paper-edge);
  margin-block-end: 1.5em;
}

/* A heading anchor that appears on hover and is reachable by keyboard, so a
 * clause can be linked to — which is the whole reason /privacy/#crash-reports
 * exists. */
.doc .anchor {
  margin-inline-start: 0.4em;
  color: var(--paper-ink-2);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
}

.doc h2:hover .anchor,
.doc h3:hover .anchor,
.doc .anchor:focus-visible { opacity: 1; }

@media (hover: none) {
  .doc .anchor { opacity: 0.4; }
}

.legal-footnote {
  margin-block-start: var(--sp-5);
  color: var(--text-faint);
  font-size: var(--step--1);
  max-width: var(--measure);
}