/* ═══ THE READING PAGES — docs, status, terms, privacy, the DPA ══════════
   In the Vesper design system (11 Oct 2026): black like the home page, a
   sidebar with the pages and "On this page", one readable column of Inter.
   Loads after console.css and page.css and re-points their tokens, so every
   page-specific rule picks up the new colours on its own. */
:root{
  --onyx:#000000; --lift:#0B0B0B; --panel:#121212; --raise:#171717; --sunk:#0D0D0D;
  --champagne:#F5F3EF; --champagne-soft:#F5F3EF; --champagne-deep:#DADAD8;
  --hairline:#2A2A2A; --oxblood:transparent;
  --text:#F5F3EF; --text-2:#D9D9D7; --text-muted:#A8A8A8; --text-faint:#8C8C8C; --text-ghost:#6E6E6E;
  --border:#262626; --border-2:#1E1E1E; --border-3:#191919;
  --ok:#6DAA78; --ok-bg:rgba(109,170,120,.12); --warn:#D7AD72; --warn-bg:rgba(215,173,114,.10);
  --danger:#C8706F; --danger-bg:rgba(200,112,111,.12);
  --r:14px;
  --side:264px;
}
html{color-scheme:dark;background:#000}
body{background:#000 !important;background-image:none !important;color:var(--text);font:400 16px/1.6 "Inter",-apple-system,"Segoe UI",system-ui,sans-serif !important;-webkit-font-smoothing:antialiased}
body::before,body::after{display:none !important}
a{color:inherit}

/* ── the sidebar ────────────────────────────────────────────────────── */
.sitebar{position:fixed !important;left:0;top:0;bottom:0;z-index:40;width:var(--side);border:0 !important;border-right:1px solid #151515 !important;background:#000 !important;backdrop-filter:none !important;overflow-y:auto}
.sitebar-in{max-width:none !important;height:100% !important;padding:10px 10px 14px !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;gap:0 !important}
.sitebar a.brand{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;margin-bottom:14px;color:#F5F3EF;font:700 15px "Inter",sans-serif;text-decoration:none}
.sitebar a.brand img{display:none}
.sitebar a.brand::before{content:"";width:20px;height:20px;background:#F5F3EF;-webkit-mask:url("/brand/vesper-mark-64.png?v=chevron-2026-09-14") center/contain no-repeat;mask:url("/brand/vesper-mark-64.png?v=chevron-2026-09-14") center/contain no-repeat}
.sitebar a.brand::after{content:"Vesper"}
.sitebar nav{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:stretch !important;gap:2px !important}
.sitebar nav a{display:flex !important;align-items:center;gap:12px;height:38px;padding:0 10px;border:0 !important;border-radius:10px;color:#E3E3E3 !important;font:400 14px "Inter",sans-serif !important;letter-spacing:0 !important;text-transform:none !important;text-decoration:none}
.sitebar nav a::before{content:"";flex:none;width:18px;height:18px;background:#BDBDBD;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.sitebar nav a:hover{background:#1B1B1B;color:#F5F3EF !important}
.sitebar nav a[aria-current="page"]{background:#1B1B1B;color:#F5F3EF !important;font-weight:500 !important}
.sitebar nav a.btn{order:99;justify-content:center;height:40px;margin-top:14px;border-radius:999px;background:#F5F3EF !important;color:#000 !important;font-weight:600 !important;box-shadow:none !important}
.sitebar nav a.btn::before{display:none}
.sitebar nav a.btn:hover{background:#fff !important}

/* "On this page", carried into the sidebar by site.js */
.sitebar .toc{position:static !important;display:flex !important;flex-direction:column !important;gap:1px !important;margin:18px 0 0;padding:14px 0 0;border-top:1px solid #151515}
.sitebar .toc b{margin:0 10px 6px !important;font:500 12.5px "Inter",sans-serif !important;letter-spacing:0 !important;text-transform:none !important;color:#8F8F8F !important}
.sitebar .toc a{display:flex;align-items:center;min-height:32px;padding:5px 10px !important;border:0 !important;border-radius:9px;color:#A8A8A8 !important;font:400 13.5px/1.35 "Inter",sans-serif !important;text-decoration:none}
.sitebar .toc a:hover{background:#141414;color:#F5F3EF !important}
.sitebar .toc a.on{color:#F5F3EF !important;background:#141414}

/* ── the reading column ─────────────────────────────────────────────── */
.page{padding-left:var(--side)}
.doc{max-width:860px !important;margin:0 auto !important;padding:56px 56px 96px !important}
.doc-head{gap:12px !important;margin-bottom:40px !important}
.doc-head h1{font:600 34px/1.15 "Inter",sans-serif !important;letter-spacing:-.02em !important;color:#F5F3EF !important;font-style:normal !important}
.doc-head p{font-size:16.5px !important;line-height:1.65 !important;color:#A8A8A8 !important;max-width:64ch}
.doc-meta{gap:8px !important;padding-top:6px !important;border:0 !important;font:500 12px "Inter",sans-serif !important;letter-spacing:0 !important;color:#8C8C8C !important}
.doc-meta span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:#141414;box-shadow:inset 0 0 0 1px #222}
.doc-meta b{color:#6E6E6E !important;font-weight:500 !important}
.doc-meta a{color:#F5F3EF;text-decoration:none}
.doc-body{display:block !important}
.prose{max-width:none !important;gap:44px !important}
.prose section{gap:14px !important;scroll-margin-top:24px !important}
.prose h2{font:600 22px/1.3 "Inter",sans-serif !important;letter-spacing:-.01em !important;color:#F5F3EF !important;padding-top:4px}
.prose h2 .n{font:500 13px "JetBrains Mono",monospace !important;color:#6E6E6E !important;margin-right:12px !important}
.prose h3{font:600 16px "Inter",sans-serif !important;color:#ECECEC !important;margin:10px 0 0 !important}
.prose p{font-size:15.5px !important;line-height:1.75 !important;color:#B9B9B9 !important}
.prose strong{color:#F5F3EF !important;font-weight:600 !important}
.prose li{font-size:15.5px !important;line-height:1.7 !important;color:#B9B9B9 !important;padding-left:18px !important}
.prose li::before{width:5px !important;height:5px !important;border-radius:50%;transform:none !important;background:#6E6E6E !important;top:.72em !important}
.prose a{color:#F5F3EF;text-decoration:underline;text-decoration-color:#555;text-underline-offset:3px;border:0 !important}
.prose a:hover{text-decoration-color:#F5F3EF}
.callout{border-left:2px solid #333 !important;padding:2px 0 2px 18px !important}
.needs{border:1px solid rgba(215,173,114,.28) !important;background:rgba(215,173,114,.07) !important;border-radius:12px !important;color:#E7D3B0 !important}
.pre{background:#0D0D0D !important;border:1px solid #1F1F1F !important;border-radius:14px !important;padding:18px 20px !important}
.pre code{font:400 13px/1.75 "JetBrains Mono",monospace !important;color:#E6E6E6 !important}
.pre .c{color:#6A6A6A !important}
.pre .k{color:#F5F3EF !important;font-weight:600}
.pre .s{color:#B7B7B7 !important}
code.inline{background:#1A1A1A !important;border:0 !important;border-radius:6px !important;padding:2px 6px !important;color:#F5F3EF !important;font-size:13px !important}
.endpoint{background:#0D0D0D !important;border:1px solid #1F1F1F !important;border-radius:14px !important;color:#D9D9D7 !important}
.endpoint .verb{background:#F5F3EF !important;color:#000 !important;border-radius:6px !important;font-weight:600 !important;letter-spacing:.04em !important}
table.api th{color:#8C8C8C !important;font:600 11px "Inter",sans-serif !important;letter-spacing:.04em !important}
table.api td{color:#B9B9B9 !important}
table.api td.mono{color:#ECECEC !important}
table.api td.code{color:#E59A99 !important}
table.api th,table.api td{border-bottom-color:#1C1C1C !important}

/* status */
.overall{background:#121212 !important;border:1px solid #1E1E1E !important;border-radius:16px !important}
.overall .txt b{font:600 24px/1.2 "Inter",sans-serif !important;font-style:normal !important;color:#F5F3EF !important}
.components{border:1px solid #1E1E1E !important;border-radius:16px !important;background:#121212}
.comp{background:#121212 !important;border-bottom-color:#1A1A1A !important}
.comp .n b{color:#F5F3EF !important;font-weight:500 !important}

.sitefoot{max-width:860px !important;margin:0 auto !important;padding:28px 56px 48px !important;border-top:1px solid #151515 !important;color:#6E6E6E !important;font-size:12.5px !important}
.sitefoot a{color:#A8A8A8;text-decoration:none}
.sitefoot a:hover{color:#F5F3EF}

/* the phone's menu button, added by site.js */
.sitemenu{display:none}
@media (max-width:860px){
  .page{padding-left:0}
  .sitebar{transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.6);width:min(300px,86vw)}
  body.sideopen .sitebar{transform:none}
  .sitemenu{display:flex;position:fixed;z-index:39;left:0;right:0;top:0;height:54px;align-items:center;gap:10px;padding:0 12px;background:rgba(0,0,0,.86);backdrop-filter:blur(10px);border-bottom:1px solid #151515}
  .sitemenu button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:none;color:#DDD;cursor:pointer}
  .sitemenu button svg{width:20px;height:20px}
  .sitemenu b{font:700 15px "Inter",sans-serif;color:#F5F3EF}
  .sitescrim{position:fixed;inset:0;z-index:38;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s}
  body.sideopen .sitescrim{opacity:1;pointer-events:auto}
  .doc{padding:84px 18px 72px !important}
  .doc-head h1{font-size:28px !important}
  .sitefoot{padding:24px 18px 40px !important}
}

/* the sidebar icons, by where each link goes */
.sitebar nav a{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M14 3.5v5h5M9 13h6M9 16.5h6'/%3E%3C/svg%3E")}
.sitebar nav a[href="/"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20a8 8 0 1 0-7.1-4.3L4 20l4.3-.9A8 8 0 0 0 12 20z'/%3E%3C/svg%3E")}
.sitebar nav a[href$="docs.html"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h10.5a3 3 0 0 1 3 3v12H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 16.5a3 3 0 0 1 3-3h10.5'/%3E%3C/svg%3E")}
.sitebar nav a[href$="status.html"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h4l2.5-6 4 12 2.5-6h4'/%3E%3C/svg%3E")}
.sitebar nav a[href$="terms.html"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M14 3.5v5h5M9 13h6M9 16.5h6'/%3E%3C/svg%3E")}
.sitebar nav a[href$="privacy.html"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 19 6v6c0 4.5-3 7.5-7 8.5-4-1-7-4-7-8.5V6z'/%3E%3C/svg%3E")}
.sitebar nav a[href$="dpa.html"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z'/%3E%3Cpath d='M14 3.5v5h5'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E")}
.sitebar nav a[href$="product"]{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6v.4'/%3E%3C/svg%3E")}

/* the old light theme drew a white inner highlight on its boxes; none here */
html body .overall,html body .components,html body .comp,html body .pre,html body .endpoint,html body .needs,html body code.inline,html body .sitebar,html body .toc a,html body .doc-meta span{box-shadow:none !important}
html body .doc-meta span{box-shadow:inset 0 0 0 1px #222 !important}
html body .overall .dot{box-shadow:0 0 0 5px rgba(255,255,255,.04) !important}
html body .overall.up .dot{box-shadow:0 0 0 5px rgba(109,170,120,.16) !important}
html body .overall.part .dot{box-shadow:0 0 0 5px rgba(215,173,114,.16) !important}
html body .overall.down .dot{box-shadow:0 0 0 5px rgba(200,112,111,.16) !important}