/* © 2025-2026 Brayon Pieske — HexStellar. All rights reserved.
   The ONE stylesheet every documentation page uses, so the error reference and the index can never drift into
   looking like two different products.

   Light is the default on purpose. A quiet neutral canvas keeps the technical content legible while a white sheet
   creates hierarchy. Gold is the product accent; blue is reserved for links and information. */
:root{
  --canvas:#ecece9; --sheet:#ffffff; --panel:#f8f8f6; --panel-2:#f1f1ef;
  --ink:#111111; --dim:#666660; --line:#e3e3df; --line-strong:#c9c9c3;
  --accent:#765b18; --gold:#c9a84c; --ok:#0a7d33;
  /* A code BLOCK is an editor surface: dark in BOTH themes, so a JSON payload looks identical to every
     reader and in every screenshot. An INLINE chip is punctuation inside a sentence and stays light —
     a dark chip mid-paragraph reads like a redaction. */
  --code-bg:#1b1b1b; --code-ink:#d4d4d4; --code-line:#2d2d2d; --chip-bg:#f0f1f4; --chip-ink:#16191e;
  --sheet-shadow:0 1px 3px rgba(0,0,0,.08), 0 14px 44px rgba(0,0,0,.09);
  --card-shadow:0 1px 2px rgba(0,0,0,.04);
}
/* Dark mode uses the product's exact #1b1b1b base with one-step-lighter elevated surfaces. */
:root[data-theme="dark"]{
  /* Anchored on #1b1b1b — the same ground as the brand banner, so the page and the artwork are one
     surface. The scale climbs from there in small steps: canvas < sheet < panel, separated by a line
     that is visible without glowing. Code panes stay at the anchor colour in BOTH themes (see below). */
  --canvas:#1b1b1b; --sheet:#232323; --panel:#272727; --panel-2:#2a2a2a;
  --ink:#f4f4f2; --dim:#aaa9a3; --line:#393936; --line-strong:#50504a;
  --accent:#e7d39a; --gold:#c9a84c; --ok:#62d28b; --code-bg:#1b1b1b; --code-ink:#d4d4d4; --code-line:#383834;
  --chip-bg:#2a2a2d; --chip-ink:#e4e4e8;
  --sheet-shadow:0 14px 44px rgba(0,0,0,.45); --card-shadow:none;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);
  font:16px/1.65 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}

/* the sheet — every page is one document laid on the canvas */
.sheet{max-width:1080px;margin:0 auto;background:var(--sheet);min-height:100vh;box-shadow:var(--sheet-shadow)}
@media (min-width:1140px){ .sheet{margin:26px auto;min-height:calc(100vh - 52px);border-radius:16px} }
.wrap{padding:0 34px}
@media (max-width:640px){ .wrap{padding:0 18px} }

a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}

/* header */
header.site{border-bottom:1px solid var(--line);background:var(--sheet);position:sticky;top:0;z-index:10}
@media (min-width:1140px){ header.site{border-radius:16px 16px 0 0} }
.top{display:flex;align-items:center;gap:20px;padding:14px 34px;flex-wrap:wrap}
@media (max-width:640px){ .top{padding:12px 18px;gap:12px} }
.brand{display:flex;align-items:center;gap:9px;font-weight:660;font-size:16.5px;color:var(--ink)}
.brand .mark{width:24px;height:24px;color:var(--gold)}
.nav{display:flex;gap:17px;font-size:14.5px;flex-wrap:wrap}
.nav a{color:var(--dim)}
.nav a:hover{color:var(--accent)}
.nav a.here{color:var(--ink);font-weight:600}
.toggle{margin-left:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);
  border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit;font-size:13.5px;white-space:nowrap}
.toggle:hover{border-color:var(--accent);color:var(--accent)}

/* type */
.hero{padding:52px 0 10px}
.eyebrow{color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:650}
h1{font-size:2.3rem;line-height:1.15;margin:.32em 0 .34em;letter-spacing:-.022em;max-width:21ch}
h2{font-size:1.32rem;margin:2.3em 0 .55em;letter-spacing:-.012em}
h3{font-size:.8rem;margin:0 0 .7em;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;font-weight:650}
.lede{color:var(--dim);max-width:76ch}
.crumb{color:var(--dim);font-size:13.5px}
section{padding-bottom:8px}
section:last-of-type{padding-bottom:26px}

/* badges */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 6px;align-items:center}
.badges img{height:20px;display:block}

/* surfaces */
.grid{display:grid;gap:16px}
.cols2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.cols3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:18px 20px;
  box-shadow:var(--card-shadow)}

/* code */
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--code-line);border-radius:10px;padding:14px;overflow:auto;
  font-size:13.5px;line-height:1.58;margin:0}
code{background:var(--chip-bg);color:var(--chip-ink);padding:.12em .38em;border-radius:5px;font-size:.92em}
pre code{background:none;padding:0;color:inherit;font-size:inherit}
pre code{background:none;padding:0}
.card pre{white-space:pre-wrap;overflow-wrap:break-word;padding-left:32px;text-indent:-18px}
/* Syntax colours belong to the pane, not to the page. The pane is #1b1b1b in both themes, so a comment
   painted in the light theme's grey and a string painted in its dark green were unreadable there —
   these are the editor's own values and hold their contrast whichever theme the reader chose. */
.c{color:#6a9955}
.s{color:#ce9178}

/* tables */
.tablecard{border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:var(--card-shadow);margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--panel)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
th{color:var(--dim);font-weight:650;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--panel-2)}
tbody tr:hover{background:var(--panel-2)}
tr.hit,tr:target{background:color-mix(in srgb, var(--accent) 11%, var(--panel))}
.codecell{font-family:ui-monospace,monospace;font-size:13px;white-space:nowrap}

/* pills */
.pill{display:inline-block;padding:.12em .62em;border-radius:999px;font-size:12.5px;border:1px solid var(--line-strong);
  background:var(--panel-2);white-space:nowrap}
.pill.ok,.pill.yes{color:var(--ok);border-color:color-mix(in srgb, var(--ok) 45%, var(--line-strong))}
.pill.no{color:var(--dim)}

/* lists */
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:9px 0;border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:none}

/* footer */
footer.site{margin-top:52px;border-top:1px solid var(--line);background:var(--panel-2)}
@media (min-width:1140px){ footer.site{border-radius:0 0 16px 16px} }
footer.site .inner{padding:24px 34px;color:var(--dim);font-size:13.5px}
@media (max-width:640px){ footer.site .inner{padding:20px 18px} }

/* ── the viewer modal ──────────────────────────────────────────────────────────────────────────────
   Menus and footers must never dump a raw .md or a wall of JSON on a reader: those files exist for
   machines, and a human who clicks "Agent spec" deserves a document. Links INSIDE the prose keep
   pointing at the raw files on purpose — that is what agents and crawlers follow. Only navigation
   chrome opens this viewer, which fetches the same file and renders it. */
.vw-back{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:100;
  display:none;align-items:center;justify-content:center;padding:24px}
.vw-back.open{display:flex}
.vw{background:var(--sheet);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  width:min(940px,100%);max-height:min(84vh,900px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.45)}
.vw-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:var(--panel)}
.vw-title{font-weight:640;font-size:15px}
.vw-src{color:var(--dim);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.vw-actions{margin-left:auto;display:flex;gap:8px}
.vw-btn{border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);border-radius:8px;
  padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;text-decoration:none;line-height:1.7}
.vw-btn:hover{border-color:var(--accent);color:var(--accent)}
.vw-body{padding:18px 22px;overflow:auto;font-size:14.5px;line-height:1.7}
.vw-body h1{font-size:1.35rem;margin:.2em 0 .5em;max-width:none}
/* The page headline is deliberately narrow (21ch reads as a statement); a document title inside the
   viewer is not that headline and must use the width it is given. */
.vw-body h2,.vw-body h3{max-width:none}
.vw-body h2{font-size:1.1rem;margin:1.5em 0 .4em}
.vw-body h3{font-size:1rem;margin:1.2em 0 .3em}
.vw-body p{margin:.7em 0}
.vw-body ul,.vw-body ol{padding-left:1.3em;margin:.6em 0}
.vw-body li{margin:.25em 0}
.vw-body table{width:100%;border-collapse:collapse;font-size:13px;margin:.8em 0;display:block;overflow-x:auto}
.vw-body th,.vw-body td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.vw-body th{color:var(--ink);font-weight:640;white-space:nowrap}
.vw-body td{color:var(--dim)}
.vw-body pre{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--code-line);
  border-radius:9px;padding:12px 14px;overflow:auto;font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.vw-body pre code{background:none;padding:0;color:inherit}
.vw-body .k{color:#9cdcfe} .vw-body .s{color:#ce9178} .vw-body .n{color:#b5cea8} .vw-body .b{color:#569cd6}
.vw-loading{padding:34px;text-align:center;color:var(--dim);font-size:14px}
@media (max-width:640px){ .vw-back{padding:0} .vw{max-height:100vh;border-radius:0;width:100%} }

/* ── call-to-action buttons ────────────────────────────────────────────────────────────────────────
   This documentation is written for machines first, which made every route a small inline link. A
   human arriving here still needs one obvious next step per section — a real target, not a hyperlink
   buried mid-sentence. The inline links stay exactly where they are: agents follow those. */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.cta{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:11px;
  font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;transition:all .16s ease}
.cta-primary{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.cta-primary:hover{opacity:.88;text-decoration:none}
.cta-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.cta-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.cta small{display:block;font-weight:450;font-size:12.5px;opacity:.72;margin-top:1px}
.cta-arrow{width:16px;height:16px;flex:none;transition:transform .16s ease}
.cta:hover .cta-arrow{transform:translateX(3px)}
@media (max-width:560px){ .cta{width:100%;justify-content:space-between} }

/* ── prose measure ─────────────────────────────────────────────────────────────────────────────────
   Tables, grids and code keep the whole sheet; running text does not. A line of body copy stops at the
   same width as the lede above it, so a section reads as one column instead of two different ones. */
.wrap section > p, .wrap section > ul, .wrap section > ol{max-width:78ch}

/* ── copy affordance on every code pane ────────────────────────────────────────────────────────────
   The button is added by script, so a reader without JavaScript still sees the command exactly as it
   is — nothing here is required to read the page. */
.pre-wrap{position:relative}
.pre-copy{position:absolute;top:8px;right:8px;background:rgba(40,40,40,.86);border:1px solid #3a3a3a;
  color:#c8c8c8;border-radius:6px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer;
  opacity:0;transition:opacity .14s ease}
.pre-wrap:hover .pre-copy,.pre-copy:focus{opacity:1}
.pre-copy:hover{border-color:#5a5a5a;color:#fff}
.pre-copy.done{border-color:#3f7f4f;color:#7fd39a;opacity:1}
@media (hover:none){ .pre-copy{opacity:1} }

/* A hairline between the links that move within this page and the two that open a reference of their
   own. The menu was mixing both without saying so, which is what made a documentation site of one long
   page plus two references read as a scattering of pages. */
.nav-sep{width:1px;height:15px;background:var(--line-strong);flex:none;opacity:.8}
@media (max-width:720px){ .nav-sep{display:none} }

/* ── install banner ─────────────────────────────────────────────────────────────────────────────────
   The dark artwork reads well on both themes, so it shows in both. It is a square, so it is sized by
   viewport: on a phone it fills the column and carries the section, and on a wide sheet it settles to a
   centred card rather than a small block adrift on the left of a lot of empty space. */
.install-banner{display:block;width:100%;height:auto;border-radius:16px;
  margin:14px auto 24px;box-shadow:0 10px 30px rgba(0,0,0,.24)}
@media (min-width:641px){
  .install-banner{max-width:480px}
}
/* The documentation root intentionally mirrors every agent document and worked example. Standalone URLs remain
   canonical; these compact rules keep the one-fetch edition readable without hiding its text from crawlers. */
.agent-documents-mirror,.examples-mirror{margin-top:72px;padding-top:34px;border-top:2px solid var(--line)}
.agent-doc{margin:12px 0;border:1px solid var(--line);border-radius:11px;background:var(--panel);overflow:hidden}
.agent-doc summary{cursor:pointer;padding:14px 16px;color:var(--ink)}
.agent-doc>p{padding:0 16px}
.agent-doc>pre{margin:0;max-height:620px;overflow:auto;border-radius:0;border-width:1px 0 0}
.examples-mirror .ex{margin:22px 0;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--card-shadow)}
.examples-mirror .ex h3{margin:0 0 2px;font-size:1.12rem}
.examples-mirror .ex h4{margin:14px 0 4px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.examples-mirror .meta{color:var(--dim);font-size:.86rem;margin:0 0 10px}
.examples-mirror .tag{margin:0 0 8px;font-weight:600}
.examples-mirror .cb{margin:8px 0 0;border:1px solid #2d2d2d;border-radius:10px;overflow:hidden;background:#1b1b1b}
.examples-mirror .cb-bar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#232323;border-bottom:1px solid #2d2d2d}
.examples-mirror .cb-lang{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:#8b8b8b}
.examples-mirror .cb-copy{margin-left:auto;border:1px solid #3a3a3a;background:#2a2a2a;color:#cfcfcf;border-radius:6px;padding:3px 10px;font:inherit;font-size:11.5px;cursor:pointer}
.examples-mirror .cb-body{margin:0;padding:14px 16px;max-height:460px;overflow:auto;background:#1b1b1b;color:#d4d4d4;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.65;border:0;border-radius:0}
.examples-mirror .cb-raw{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.examples-mirror .k{color:#9cdcfe}.examples-mirror .s{color:#ce9178}.examples-mirror .n{color:#b5cea8}.examples-mirror .b{color:#569cd6}.examples-mirror .c{color:#6a9955}
.examples-mirror .also{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.examples-mirror .also li{border:1px solid var(--line);border-radius:9px;padding:10px 13px;background:var(--panel)}
.examples-mirror .as-p{font-weight:570}.examples-mirror .as-d{margin-left:9px;font-size:.72rem;text-transform:uppercase;color:var(--dim)}
.examples-mirror .as-m{margin-top:5px;color:var(--dim);font-size:.87rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.examples-mirror .measured{border:1px solid var(--line);border-radius:11px;padding:14px 16px;background:var(--panel);margin-top:8px}
.examples-mirror .ms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px}
.examples-mirror .ms-cell{border-left:2px solid var(--line-strong);padding-left:10px}.examples-mirror .ms-k{font-size:.68rem;text-transform:uppercase;color:var(--dim)}
.examples-mirror .ms-v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600}