/*
 * The legal pages (/privacy/, /terms/, /owner-agreement/), generated by
 * scripts/gen-legal-pages.mjs, on top of site.css (the palette, fonts,
 * header, theme button and footer the landing page shares). A plain reading
 * layout: one measure-width column on the white page, the drafts'
 * [brackets] highlighted until legal review fills them in.
 */

/* The header: the logo, the three documents, the theme button. */
.legal-nav { display: flex; gap: 2px; margin-left: auto; font-size: var(--body-s); }
.legal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--text-3); text-decoration: none; font-weight: var(--w-semi); white-space: nowrap; }
.legal-nav a:hover { color: var(--text); background: var(--well); }
.legal-nav a[aria-current='page'] { color: var(--accent); background: var(--tint); }

.doc { max-width: 760px; margin: 0 auto; padding: 64px 32px 96px; color: var(--text-2); }
.doc h1 { font-size: var(--hero-3); line-height: var(--lh-heading); letter-spacing: var(--track-heading); margin: 0 0 24px; color: var(--text); }
.doc h2 { font-size: var(--h-3); line-height: var(--lh-heading); letter-spacing: var(--track-heading); margin: 56px 0 14px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text); }
.doc h3 { font-size: var(--h-4); line-height: var(--lh-heading); letter-spacing: var(--track-heading); margin: 32px 0 8px; color: var(--text); }
.doc strong { color: var(--text); }
.doc p, .doc ul, .doc ol { margin: 0 0 16px; line-height: 1.6; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc blockquote { margin: 0 0 32px; padding: 16px 20px; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px; color: var(--text); }
.doc blockquote p { margin: 0; }
.doc code { font-size: var(--body-s); background: var(--well); color: var(--text); padding: 1px 6px; border-radius: 6px; }
.doc .tbd { background: var(--warn-bg); color: var(--warn); border-radius: 4px; padding: 0 4px; }
.doc .table { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 14px; }
.doc table { border-collapse: collapse; width: 100%; font-size: var(--body-s); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.doc tr:last-child td { border-bottom: 0; }
.doc th { color: var(--text); font-weight: var(--w-semi); background: var(--subtle); }

.foot__nav a[aria-current='page'] { color: var(--text); }

@media (max-width: 860px) {
  .top__bar { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-top: 10px; padding-bottom: 10px; row-gap: 4px; }
  .top__bar .theme { margin-left: auto; }
  .legal-nav { order: 3; width: calc(100% + 24px); margin: 0 -12px; flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .doc { padding: 40px 16px 64px; }
  .doc h1 { font-size: var(--h-2); }
  .doc h2 { font-size: var(--h-4); margin-top: 40px; }
}