/* /terms and /privacy.
 *
 * A legal document is read, not scanned, so this is the one public page that
 * is a column of prose rather than a grid of widgets. Measure is capped near
 * 70 characters, headings are quiet, and nothing competes with the text.
 *
 * The two notices at the top are the exception: a draft and a document with
 * gaps in it both need to be impossible to miss.
 */

.lg-main { padding-bottom: 0; }

.lg-doc {
  padding-block: clamp(40px, 5vw, 76px) clamp(56px, 7vw, 104px);
}

.lg-shell { max-width: 780px; }

/* ---- heading ------------------------------------------------------------- */

.lg-head {
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: .5px solid var(--border);
}

.lg-h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 680;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 8px 0 0;
}

.lg-updated {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.lg-lang {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.lg-lang svg { flex: none; margin-top: 3px; }

/* ---- notices ------------------------------------------------------------- */

/* Both say the document is not finished. They are bordered rather than merely
   tinted, so they survive a reader who cannot separate the colours. */
.lg-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.55;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.lg-notice svg { flex: none; margin-top: 2px; }

.lg-notice.is-draft {
  border-color: color-mix(in srgb, var(--amber) 55%, var(--border-strong));
  color: var(--text);
}

.lg-notice.is-gap {
  border-color: color-mix(in srgb, var(--red) 45%, var(--border-strong));
}

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

/* The chrome follows the reader's language. The document does not: it is
   published in English and the page says so, so it is laid out as English.
   Inheriting RTL here would put "1." after its heading and every full stop on
   the wrong side of its sentence — the text would still be English and would
   simply be harder to read. */
.lg-body {
  direction: ltr;
  text-align: start;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.lg-body h2 {
  margin: 38px 0 12px;
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--text);
}

.lg-body h2:first-child { margin-top: 0; }

.lg-body h3 {
  margin: 26px 0 10px;
  font-size: 15.5px;
  font-weight: 620;
  color: var(--text);
}

.lg-body p { margin: 0 0 14px; }

.lg-body strong { color: var(--text); font-weight: 620; }

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

.lg-body li { margin-bottom: 8px; }

.lg-body code {
  font-size: 13px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: .5px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  /* An identifier is the same string in every language and does not mirror. */
  direction: ltr;
  unicode-bidi: isolate;
}

.lg-body a { color: var(--cyan); }

/* ---- foot ---------------------------------------------------------------- */

.lg-foot {
  margin-top: 44px;
  padding-top: 26px;
  border-top: .5px solid var(--border);
}