/* =========================================================================
   Standalone pages — Privacy, About, Contact
   -------------------------------------------------------------------------
   These are separate documents, not views inside index.html, on purpose: a
   reviewer (and a crawler) needs each one to have its own URL that returns
   its own content. A #hash view inside the app would serve the same HTML for
   all three and look, correctly, like they do not exist.

   Uses the same tokens as the app so they do not read as bolted on.
   ========================================================================= */

/* base.css makes <body> a two-column app grid: [sidebar 15rem] [1fr]. The app
   pages put <aside id="app-sidebar"> in column 1 and their content in column 2.
   These doc pages have NO sidebar, so their <main> became the first child, landed
   in column 1, and the whole page rendered inside a 15rem (240px) strip down the
   left. max-width could not rescue it: max-width is a ceiling, and it cannot make
   a box wider than the column holding it. Spanning every column hands the page its
   full width back, and the max-width below then centres it at a readable measure.
   1 / -1 means "first grid line to last", so it stays correct if the app grid
   ever gains a column. */
.doc-page {
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 90px;
  color: var(--text-main, #e6e8ef);
  font: 15px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
}

.doc-page .doc-back {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--accent-green, #7ac943);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.doc-page .doc-back:hover { text-decoration: underline; }

.doc-page h1 {
  font-size: 30px;
  letter-spacing: -.4px;
  margin: 0 0 8px;
}
.doc-page .doc-updated {
  color: var(--text-dim, #9aa3b8);
  font-size: 13.5px;
  margin: 0 0 34px;
}
.doc-page h2 {
  font-size: 18px;
  margin: 34px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #262b36);
}
.doc-page h2:first-of-type { border-top: 0; padding-top: 0; }
.doc-page p, .doc-page li { color: var(--text-main, #d7dbe8); }
.doc-page ul { padding-left: 22px; }
.doc-page li { margin-bottom: 8px; }
.doc-page a { color: var(--accent-green, #7ac943); }
.doc-page code {
  background: var(--bg-inset, #1a1f29);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
.doc-page .doc-note {
  background: var(--bg-card, #161b22);
  border: 1px solid var(--line, #262b36);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 26px 0;
}
