/* ═══════════════════════════════════════════════════════════
   Shared chrome for the reading pages — terms, privacy, the
   DPA, the docs and the status page.

   Loads on top of console.css, which holds the tokens, so the
   palette and type are the same objects the console uses
   rather than a second set that will drift from it.
   ═══════════════════════════════════════════════════════════ */

body { font-size: 16px; }

/* ── header ─────────────────────────────────────────────── */

.sitebar {
  border-bottom: 1px solid var(--border-2);
  background: rgba(6,6,7,.72);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 40;
}
.sitebar-in {
  max-width: 1180px; margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.sitebar a.brand { text-decoration: none; }
.sitebar nav { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.sitebar nav a { font-size: 12.5px; color: var(--text-muted); letter-spacing: .04em; }
.sitebar nav a:hover { color: var(--champagne); }
.sitebar nav a[aria-current="page"] { color: var(--champagne); }

/* ── the page ───────────────────────────────────────────── */

.doc { max-width: 1180px; margin: 0 auto; padding: clamp(34px,5vw,64px) var(--gutter) 90px; }

.doc-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(30px,4vw,48px); }
.doc-head h1 {
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300;
  font-size: clamp(36px,5.4vw,60px); line-height: 1.02; color: var(--champagne-soft);
  margin: 0; letter-spacing: -.012em;
}
.doc-head p { font-size: clamp(16px,1.8vw,18.5px); color: var(--text-muted); max-width: 62ch; line-height: 1.6; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px; padding-top: 18px;
  border-top: 1px solid var(--border-2);
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: var(--text-ghost); letter-spacing: .04em;
}
.doc-meta b { color: var(--text-muted); font-weight: 400; }

/* Two columns: contents rail, then the prose. */
.doc-body { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: clamp(24px,4vw,56px); align-items: start; }

.toc { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 3px; }
.toc b {
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-ghost); font-weight: 500; margin-bottom: 8px;
}
.toc a {
  font-size: 13px; color: var(--text-faint); padding: 5px 0 5px 12px;
  border-left: 1px solid var(--border-2); line-height: 1.4;
}
.toc a:hover { color: var(--champagne); border-left-color: var(--hairline); }

.prose { display: flex; flex-direction: column; gap: 34px; max-width: 74ch; }
.prose section { display: flex; flex-direction: column; gap: 13px; scroll-margin-top: 88px; }
.prose h2 {
  font-family: "Jost", sans-serif; font-weight: 500; font-size: 17px;
  color: var(--text); margin: 0; letter-spacing: .004em;
}
.prose h2 .n {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--champagne); margin-right: 11px;
}
.prose h3 { font-family: "Jost", sans-serif; font-weight: 500; font-size: 14.5px; color: var(--text-2); margin: 6px 0 0; }
.prose p { font-size: 15.5px; color: var(--text-muted); line-height: 1.72; margin: 0; }
.prose strong { color: var(--text-2); font-weight: 500; }
.prose ul { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.prose li { font-size: 15px; color: var(--text-muted); line-height: 1.62; padding-left: 17px; position: relative; }
.prose li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 5px; height: 5px; background: var(--champagne); transform: rotate(45deg);
}
.prose a { border-bottom: 1px solid var(--hairline); }

.callout {
  border-left: 2px solid var(--hairline); padding: 4px 0 4px 20px;
  display: flex; flex-direction: column; gap: 9px;
}
.callout p { color: var(--text-2); }

.needs {
  border: 1px solid rgba(201,162,39,.34); background: var(--warn-bg);
  border-radius: var(--r); padding: 16px 19px;
  font-size: 14.5px; color: #E4CE8E; line-height: 1.6;
}
.needs b { color: var(--warn); font-weight: 500; }

.pre {
  background: var(--sunk); border: 1px solid var(--border-2); border-radius: var(--r);
  padding: 18px 20px; overflow-x: auto;
}
.pre code {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px;
  line-height: 1.8; color: var(--text-2); white-space: pre; display: block;
}
.pre .c { color: var(--text-ghost); }
.pre .k { color: var(--champagne); }
.pre .s { color: #9BB8A6; }
code.inline {
  font-family: "JetBrains Mono", monospace; font-size: 13px;
  background: var(--sunk); border: 1px solid var(--border-3);
  padding: 1px 6px; border-radius: 2px; color: var(--champagne);
}

/* ── site footer ────────────────────────────────────────── */

.sitefoot {
  border-top: 1px solid var(--border-2);
  max-width: 1180px; margin: 0 auto;
  padding: 30px var(--gutter) 56px;
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  align-items: baseline; justify-content: space-between;
  font-size: 12.5px; color: var(--text-ghost); line-height: 1.7;
}
.sitefoot .legal { max-width: 46ch; }
.sitefoot nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }

@media (max-width: 860px) {
  .doc-body { grid-template-columns: 1fr; }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
  .toc b { width: 100%; margin: 0; }
  .toc a { border-left: 0; padding: 0; }
  .sitebar nav a:not(.btn) { display: none; }
}