/*
 * Legal, support and help pages (page.html) and the 404 page. Loads after styles.css and product.css and uses only
 * their tokens: reading text at 16px in one 720px column, a contents list beside it on wide screens, hairline tables.
 */
.page main { padding-block: var(--s-xxl) var(--s-section) }
.page-layout { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: var(--s-xxl); align-items: start }
.page-layout:not(:has(.doc-toc)) { grid-template-columns: minmax(0, 720px) }

/* contents: sticky beside the text on wide screens, left out on narrow ones */
.doc-toc { position: sticky; top: calc(var(--s-xl) + 64px); font-size: 13px; line-height: 1.4 }
.doc-toc h2 { font-size: 11px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-sm) }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.doc-toc a { display: block; padding: 4px 8px; margin-left: -8px; border-radius: var(--r-sm); color: var(--body); text-decoration: none }
.doc-toc a:hover { color: var(--ink); background: var(--hairline-soft) }

.doc { color: var(--body); font-size: 16px; line-height: 1.65 }
.doc-head { margin-bottom: var(--s-xl); padding-bottom: var(--s-lg); border-bottom: 1px solid var(--hairline) }
.doc-head h1 { font-size: 44px; line-height: 1.1; letter-spacing: -1.1px; font-weight: 400 }
.doc-updated { margin: var(--s-sm) 0 0; font-size: 14px; color: var(--muted) }
.doc-lede { margin: var(--s-base) 0 0; font-size: 18px; line-height: 1.55; color: var(--body); max-width: 620px }
.doc h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.3px; margin: var(--s-xxl) 0 var(--s-sm); scroll-margin-top: 88px }
.doc h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: var(--s-lg) 0 var(--s-xs) }
.doc p, .doc ul, .doc ol { margin: 0 0 var(--s-base) }
.doc ul, .doc ol { padding-left: 1.25em }
.doc li + li { margin-top: 6px }
.doc strong { color: var(--ink); font-weight: 600 }
.doc table { margin: var(--s-sm) 0 var(--s-lg); font-size: 14px; line-height: 1.5 }
.doc .table-scroll { overflow-x: auto; margin: 0 0 var(--s-base) }
.doc code { font-size: .875em; background: var(--surface-strong); border-radius: var(--r-xs); padding: 1px 5px }
.doc-actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-xl) }

/* until counsel's review (INVIX_LEGAL_REVIEWED), legal text says it is a draft */
.doc-draft { margin: 0 0 var(--s-xl); padding: var(--s-sm) var(--s-base); border-radius: var(--r-md); background: var(--warning-tint); color: var(--warning); font-size: 14px; line-height: 1.5 }
.doc-draft strong { color: inherit }

@media (max-width: 960px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg) }
  /* above the title, a long list would push the page below the fold: narrow screens just scroll */
  .doc-toc { display: none }
}
@media (max-width: 640px) {
  .page main { padding-block: var(--s-xl) var(--s-xxl) }
  .doc-head h1 { font-size: 34px; letter-spacing: -.8px }
  .doc h2 { font-size: 21px }
}