/* Heaven's API docs. Layout and type follow PlanetScale's docs: a quiet
   three-column page, a sidebar with method badges, and examples beside the
   endpoints they show. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-raised: #fafbfc;
  --bg-hover: rgba(129, 129, 129, 0.1);
  --border: #e6e8eb;
  --border-soft: #eef0f3;
  --heading: #17191c;
  --text: #3e4244;
  --muted: #6b7075;
  --faint: #8e949a;
  --link: #0e73cc;
  --code-bg: #f7f8fa;
  --code-inline: rgba(234, 237, 241, 0.7);
  --code-text: #1f2328;
  --get: #22a565;
  --get-text: #ffffff;
  --post-bg: rgba(59, 130, 246, 0.14);
  --post-text: #1d4ed8;
  --req-bg: rgba(248, 113, 113, 0.14);
  --req-text: #dc2626;
  --tok-key: #0b5cad;
  --tok-str: #0a7a46;
  --tok-num: #b45309;
  --tok-flag: #7c3aed;
  --tok-comment: #8e949a;
  --note-bg: #f5f8fe;
  --note-border: #d6e4fb;
  --warn-bg: #fff8eb;
  --warn-border: #f6dfb0;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Paper Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --topbar: 56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0c0d0f;
    --bg-raised: #121417;
    --bg-hover: rgba(160, 160, 160, 0.12);
    --border: #24272c;
    --border-soft: #1c1f23;
    --heading: #f2f3f5;
    --text: #c5c9ce;
    --muted: #8f959c;
    --faint: #6d737a;
    --link: #58a8f2;
    --code-bg: #121417;
    --code-inline: rgba(60, 64, 70, 0.55);
    --code-text: #e3e6ea;
    --get: #1f9d5f;
    --post-bg: rgba(96, 165, 250, 0.16);
    --post-text: #93c5fd;
    --req-bg: rgba(248, 113, 113, 0.16);
    --req-text: #fca5a5;
    --tok-key: #7cc0ff;
    --tok-str: #7ee2a8;
    --tok-num: #f6b26b;
    --tok-flag: #c4a5ff;
    --tok-comment: #6d737a;
    --note-bg: #0f1724;
    --note-border: #1d2c45;
    --warn-bg: #1c1608;
    --warn-border: #3d2f10;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar) + 24px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: var(--topbar); padding: 0 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
/* The logo stands alone, without the name, centred on "Docs" beside it.
   It leads to the dashboard or the front page; "Docs" to the docs. */
.brand, .brand-home { display: flex; align-items: center; gap: 8px; }
.brand { color: var(--heading); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand-home { color: inherit; }
.brand a:hover { text-decoration: none; }
.mark { width: 24px; height: 24px; }
/* The logo is drawn black; a dark page shows it white. */
@media (prefers-color-scheme: dark) { .mark { filter: invert(1); } }
.brand-docs { color: var(--muted); font-weight: 500; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--border); }
.private { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 500; }
.private svg { width: 12px; height: 12px; }
.topnav { margin-left: auto; display: flex; gap: 8px; }
.pill { padding: 6px 14px; border-radius: 10px; background: var(--bg-hover); color: var(--heading); font-size: 14px; font-weight: 500; white-space: nowrap; }
.pill:hover { text-decoration: none; background: color-mix(in srgb, var(--bg-hover) 100%, var(--border)); }
.menu { display: none; padding: 6px; margin-left: -6px; border: 0; border-radius: 8px; background: none; color: var(--heading); cursor: pointer; }
.menu svg { display: block; width: 20px; height: 20px; }

/* Columns */
.shell { display: grid; grid-template-columns: 272px minmax(0, 1fr) 232px; max-width: 1480px; margin: 0 auto; }
.shell.reference { grid-template-columns: 272px minmax(0, 1fr); }
.sidebar { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow-y: auto; padding: 24px 16px 48px; border-right: 1px solid var(--border-soft); }
.content { min-width: 0; padding: 40px 56px 64px; }
.shell:not(.reference) .content { max-width: 800px; width: 100%; justify-self: center; }
.toc { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow-y: auto; padding: 40px 24px 40px 8px; }

/* Sidebar */
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar-links { display: none; }
.nav-group { margin: 22px 0 6px; padding: 0 12px; color: var(--heading); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.nav-group:first-child { margin-top: 0; }
.nav-page { display: block; padding: 5px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.nav-page:hover { color: var(--heading); text-decoration: none; background: var(--bg-hover); }
.nav-page.active { color: var(--heading); background: var(--bg-hover); font-weight: 500; }
.nav-endpoints { margin: 4px 0 8px !important; }
.nav-endpoints a { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 16px; border-radius: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.nav-endpoints a:hover, .nav-endpoints a.current { color: var(--heading); text-decoration: none; background: var(--bg-hover); }

/* Method badges */
.method { display: inline-block; flex: none; min-width: 34px; padding: 1px 4px; border-radius: 6px; font: 700 9px/1.6 var(--sans); letter-spacing: 0.02em; text-align: center; }
.method.GET { background: var(--get); color: var(--get-text); }
.method.POST { background: var(--post-bg); color: var(--post-text); }

/* Type */
.eyebrow { margin: 0 0 6px; color: var(--link); font-size: 14px; font-weight: 500; }
h1, h2, h3, h4 { color: var(--heading); font-weight: 600; line-height: 1.25; }
h1 { margin: 0; font-size: 36px; letter-spacing: -0.025em; }
h1[tabindex="-1"]:focus { outline: none; }
.lead { margin: 10px 0 36px; color: var(--muted); font-size: 18px; line-height: 1.6; }
h2 { margin: 48px 0 12px; font-size: 24px; letter-spacing: -0.015em; }
h3 { margin: 32px 0 8px; font-size: 18px; letter-spacing: -0.01em; }
h4 { margin: 24px 0 6px; font-size: 15px; }
h2 a.anchor, h3 a.anchor { margin-left: 8px; color: var(--faint); opacity: 0; font-weight: 400; }
h2:hover a.anchor, h3:hover a.anchor { opacity: 1; text-decoration: none; }
p, ul, ol { margin: 0 0 16px; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
li::marker { color: var(--faint); }
strong { color: var(--heading); font-weight: 600; }
hr { margin: 40px 0; border: 0; border-top: 1px solid var(--border); }
code { padding: 1.5px 5px; border-radius: 6px; background: var(--code-inline); color: var(--code-text); font: 500 0.86em/1.5 var(--mono); overflow-wrap: break-word; }
a code { color: var(--link); }

/* Code panels */
.code { margin: 0 0 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--code-bg); overflow: hidden; }
.code-head { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--border); color: var(--heading); font-size: 12.5px; font-weight: 600; }
.code-head .status { color: var(--link); font-weight: 500; }
.code-head .status.err { color: var(--req-text); }
.copy { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 12px var(--sans); cursor: pointer; }
.copy:hover { color: var(--heading); background: var(--bg-hover); }
.copy svg { width: 14px; height: 14px; }
pre { margin: 0; padding: 14px 16px; overflow-x: auto; color: var(--code-text); font: 12.5px/1.75 var(--mono); tab-size: 2; }
pre code { padding: 0; background: none; font: inherit; }
.tok-key { color: var(--tok-key); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-flag { color: var(--tok-flag); }
.tok-cmd { color: var(--heading); font-weight: 600; }
.tok-comment { color: var(--tok-comment); font-style: italic; }

/* Callouts */
.note, .warn { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--note-border); border-radius: 12px; background: var(--note-bg); font-size: 15px; }
.warn { border-color: var(--warn-border); background: var(--warn-bg); }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }

/* Tables */
.table { margin: 0 0 24px; overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
th { padding: 9px 14px; background: var(--bg-raised); color: var(--heading); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; }
td { padding: 9px 14px; border-top: 1px solid var(--border-soft); vertical-align: top; }
td:first-child { white-space: nowrap; }
td code, th code { font-size: 12.5px; }

/* Parameters */
.params-title { margin: 28px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 15px; }
dl.params { margin: 0 0 24px; }
dl.params dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 14px; }
dl.params dt code { padding: 0; background: none; color: var(--link); font-size: 14px; font-weight: 600; }
dl.params dt span { color: var(--muted); font: 500 12px var(--mono); }
dl.params dt em { padding: 0 7px; border-radius: 6px; background: var(--req-bg); color: var(--req-text); font: 500 11.5px/1.7 var(--mono); font-style: normal; }
dl.params dd { margin: 4px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); font-size: 15px; }
dl.params dd p { margin: 0 0 6px; }
dl.params dd p:last-child { margin: 0; }

/* Endpoints: text beside its example */
.endpoint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; padding: 8px 0 40px; border-bottom: 1px solid var(--border); }
.endpoint + .endpoint, .endpoint + h2 { margin-top: 40px; }
.endpoint:last-of-type { border-bottom: 0; }
.endpoint > div:first-child > h2:first-child { margin-top: 8px; }
.endpoint-code { position: sticky; top: calc(var(--topbar) + 24px); align-self: start; min-width: 0; }
.endpoint-code pre { max-height: min(52vh, 540px); }
.shell:not(.reference) .endpoint { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 24px; border-top: 1px solid var(--border); }
.shell:not(.reference) .endpoint-code { position: static; }
.route { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-raised); font: 500 13.5px var(--mono); overflow-x: auto; }
.route .method { font-size: 10px; min-width: 40px; padding: 2px 6px; }
.route code { padding: 0; background: none; white-space: nowrap; }
.route .action { color: var(--muted); white-space: nowrap; }

/* "On this page" */
.toc-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--heading); font-size: 13px; font-weight: 600; }
.toc-title svg { width: 14px; height: 14px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc a { display: block; margin-left: -1px; padding: 4px 0 4px 14px; border-left: 1px solid transparent; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.toc a.sub { padding-left: 26px; font-size: 13px; }
.toc a:hover { color: var(--heading); text-decoration: none; }
.toc a.current { color: var(--link); border-left-color: var(--link); }

/* Steps */
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 24px; }
ol.steps > li { position: relative; counter-increment: step; margin: 0; padding: 0 0 8px 44px; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-raised); color: var(--heading); font-size: 13px; font-weight: 600; }
ol.steps > li::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; border-left: 1px solid var(--border); }
ol.steps > li:last-child::after { display: none; }
ol.steps h3 { margin: 2px 0 8px; font-size: 16px; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 24px; }
.card { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); }
.card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--link) 45%, var(--border)); }
.card strong { display: block; margin-bottom: 2px; font-size: 15px; }
.card span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
.pager a { padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--heading); font-weight: 500; }
.pager a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--link) 45%, var(--border)); }
.pager span { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.pager .next { grid-column: 2; text-align: right; }

details { margin: 0 0 20px; border: 1px solid var(--border); border-radius: 12px; }
summary { padding: 10px 14px; color: var(--heading); font-weight: 500; cursor: pointer; }
details[open] summary { border-bottom: 1px solid var(--border); }
details > :not(summary) { margin: 14px; }

/* The page menu: copy the page, or hand it or the MCP server to a tool */
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.title-row h1 { min-width: 0; }
.page-menu { position: relative; flex: none; display: flex; margin-top: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.page-copy { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 0; border-right: 1px solid var(--border); border-radius: 11px 0 0 11px; background: none; color: var(--heading); font: 500 14px/1.5 var(--sans); cursor: pointer; }
.page-copy svg { width: 15px; height: 15px; }
.page-more { margin: 0; border: 0; border-radius: 0; }
.page-more summary { display: flex; align-items: center; height: 100%; padding: 0 9px; border-radius: 0 11px 11px 0; color: var(--muted); list-style: none; }
.page-more summary::-webkit-details-marker { display: none; }
.page-more[open] summary { border-bottom: 0; color: var(--heading); background: var(--bg-hover); }
.page-more summary svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.page-more[open] summary svg { transform: rotate(180deg); }
.page-copy:hover, .page-more summary:hover { color: var(--heading); background: var(--bg-hover); }
.page-more > .page-items { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: 330px; margin: 0; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14); }
.page-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 11px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.page-item:hover, .page-item:focus-visible { background: var(--bg-hover); text-decoration: none; }
.page-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; color: var(--heading); }
.page-icon svg { width: 17px; height: 17px; }
svg.brand-icon { fill: currentColor; stroke: none; }
.page-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.page-text strong { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; }
.page-text > span { color: var(--muted); font-size: 13.5px; }
.page-text .out { width: 12px; height: 12px; color: var(--muted); }

/* Tabs (docs.js): without the script, each section shows with its heading */
.tabs.ready > .tab > h3 { display: none; }
.tab-bar { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-bar button { margin-bottom: -1px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 500 14.5px var(--sans); white-space: nowrap; cursor: pointer; }
.tab-bar button:hover { color: var(--heading); }
.tab-bar button[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--link); }
.tab { margin-bottom: 8px; }

@media (max-width: 1280px) {
  .shell { grid-template-columns: 260px minmax(0, 1fr); }
  .toc { display: none; }
  .content { padding: 36px 40px 56px; }
  .endpoint { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .endpoint-code { position: static; }
}
@media (max-width: 900px) {
  .topbar { padding: 0 16px; }
  .menu { display: block; }
  .private { display: none; }
  .shell, .shell.reference { display: block; }
  .sidebar { position: fixed; z-index: 15; top: var(--topbar); left: 0; width: min(300px, 86vw); background: var(--bg); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.18s ease; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); }
  .content { padding: 28px 16px 48px; }
  h1 { font-size: 30px; }
  .lead { font-size: 17px; }
  .title-row { flex-direction: column; gap: 12px; }
  .page-menu { margin-top: 0; }
  .page-more > .page-items { left: 0; right: auto; width: min(330px, calc(100vw - 32px)); }
}
/* A phone's top bar has room for the menu and the brand only: its links
   move into the navigation drawer. */
@media (max-width: 600px) {
  .topnav { display: none; }
  .sidebar-links { display: flex; gap: 8px; margin: 0 0 20px; padding: 0 4px 20px; border-bottom: 1px solid var(--border-soft); }
}
.op { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font: 600 10px/1.6 var(--sans); letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 1px; }
.shell.reference .content > :is(p, h3, .table, .code, ul) { max-width: 780px; }

/* The reference (reference-page.html): each read or action a section, its
   group's name above them, and the sidebar's labels between its links. */
.nav-heading { margin: 10px 0 2px; padding: 0 12px 0 16px; color: var(--faint); font-size: 12.5px; font-weight: 600; }
.nav-endpoints .nav-heading:first-child { margin-top: 4px; }
h2.ref-group { margin: 56px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.endpoint.ref { padding-bottom: 32px; }
.endpoint > div:first-child > h3:first-child { margin-top: 32px; }
.ref-notes { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; }
.ref-notes li { margin: 4px 0; }
dl.params dd dl.params { margin: 6px 0 0; padding-left: 14px; border-left: 2px solid var(--border-soft); }
dl.params dd dl.params dd:last-child { border-bottom: 0; padding-bottom: 4px; }
@media (max-width: 900px) {
  .endpoint.ref .route { flex-wrap: wrap; row-gap: 4px; }
}

/* Public policies share the docs' type and colours, without its sidebar. */
.policy-page { max-width: 52rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.policy-page h1, .policy-page h2 { color: var(--heading); line-height: 1.3; }
.policy-page h2 { margin-top: 2rem; }
.policy-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }