/* Orbita — documentation.

   Loads after styles.css and borrows its palette, its type and its .brand mark,
   so the docs are recognisably the same product as the landing page. Everything
   below is either layout the landing page does not have (three columns, sticky
   rails, a command palette) or the three things a reference page lives or dies
   by: code blocks, tables, and the anchor you can point a colleague at. */

/* Prose runs a shade softer than a heading, and the docs carry three states
   the landing page does not have: a notice flag, a yes and a no. */
:root{--prose:#453d70;--prose-soft:#5b5386;--flag:#ffe9a866;--flag-line:#e6c86a80;--yes:#2f9e6e;--no:#b5493c}
:root[data-theme=dark]{--prose:#cdc3ee;--prose-soft:#b3a9dc;--flag:#3a2f0e;--flag-line:#7a6524;--yes:#4fd39c;--no:#ff8a76}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--prose:#cdc3ee;--prose-soft:#b3a9dc;--flag:#3a2f0e;--flag-line:#7a6524;--yes:#4fd39c;--no:#ff8a76}}

body.doc { background: var(--cream); }

/* styles.css sizes every nav/main/footer as a centred 1220px column, and makes
   nav a 90px flex row. The docs are a three-column app whose sidebar is a real
   <nav>, so all three have to be released from those rules. */
main.doc-body, .doc-foot, .doc-nav nav { width: auto; margin: 0; }
.doc-nav nav { display: block; height: auto; border-bottom: 0; }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.doc-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  height: 64px; padding: 0 26px;
  background: color-mix(in srgb,var(--cream) 90%,transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.doc-top .brand { font-size: 21px; }
.doc-top .brand svg { width: 25px; height: 25px; }

/* The mark is the way back to the site. On a wide screen the rest of the bar
   makes that obvious; once those links collapse it is the only exit, so it says
   so out loud. */
.doc-back { font-style: normal; font-size: 17px; color: var(--muted); margin-right: 2px; transition: transform .22s cubic-bezier(.2,.8,.3,1), color .22s; }
.doc-top .brand:hover .doc-back { transform: translateX(-3px); color: var(--coral); }
.brand-tag { font: 500 9px DM Mono, monospace; letter-spacing: .13em; text-transform: uppercase; color: #fff; background: var(--btn); padding: 4px 6px; border-radius: 3px; margin-left: 2px; }

.doc-find {
  display: flex; align-items: center; gap: 9px; margin-left: 12px;
  min-width: 230px; padding: 7px 9px 7px 11px;
  font: 500 11px DM Mono, monospace; color: var(--muted); text-align: left;
  background: color-mix(in srgb,var(--ink) 4%,transparent); border: 1px solid var(--line); border-radius: 5px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.doc-find:hover { border-color: color-mix(in srgb,var(--ink) 33%,transparent); background: color-mix(in srgb,var(--ink) 7%,transparent); }
.doc-find svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.doc-find span { flex: 1; }
.doc-find kbd, .doc-finder kbd { font: 500 9.5px DM Mono, monospace; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: 2px 5px; }

.doc-top-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.doc-top-right a { font: 500 11px DM Mono, monospace; color: var(--ink); text-decoration: none; opacity: .7; transition: opacity .2s; }
.doc-top-right a:hover { opacity: 1; }
.doc-cta { background: var(--coral); color: #fff !important; opacity: 1 !important; padding: 9px 12px; border-radius: 4px; display: flex; gap: 14px; transition: transform .2s, box-shadow .2s !important; }
.doc-cta:hover { transform: translateY(-2px); box-shadow: 0 9px 16px color-mix(in srgb,var(--coral) 25%,transparent); }

.doc-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
.doc-burger i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ── Shell ─────────────────────────────────────────────────────────────── */

.doc-shell {
  display: grid; grid-template-columns: 236px minmax(0, 1fr) 210px;
  gap: 46px; width: min(1400px, calc(100% - 52px)); margin: 0 auto; align-items: start;
}

.doc-nav, .doc-rail { position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto; padding: 34px 0 60px; }
.doc-nav::-webkit-scrollbar, .doc-rail::-webkit-scrollbar { width: 3px; }
.doc-nav::-webkit-scrollbar-thumb, .doc-rail::-webkit-scrollbar-thumb { background: color-mix(in srgb,var(--ink) 13%,transparent); border-radius: 3px; }

.doc-group { font: 500 9.5px DM Mono, monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 26px 0 9px; }
.doc-group:first-child { margin-top: 0; }
.doc-nav a {
  display: block; padding: 6px 12px; margin-left: -12px;
  font-size: 13.5px; color: var(--ink); text-decoration: none; border-radius: 4px;
  border-left: 2px solid transparent; opacity: .74;
  transition: opacity .18s, background .18s, border-color .18s;
}
.doc-nav a:hover { opacity: 1; background: color-mix(in srgb,var(--ink) 5%,transparent); }
.doc-nav a.on { opacity: 1; font-weight: 600; color: var(--purple); background: color-mix(in srgb,var(--purple) 7%,transparent); border-left-color: var(--coral); }

/* ── Body ──────────────────────────────────────────────────────────────── */

.doc-body { max-width: 812px; padding: 46px 0 90px; font-size: 15.5px; line-height: 1.72; color: var(--prose); }
.doc-body > section { padding-top: 34px; margin-top: 44px; border-top: 1px solid var(--line); }
.doc-eyebrow { font: 500 10px DM Mono, monospace; letter-spacing: .14em; color: var(--muted); margin: 0; }
.doc-body h1 { font-size: clamp(38px, 4.4vw, 56px); line-height: .98; letter-spacing: -.055em; color: var(--ink); margin: 16px 0 20px; }
.doc-body h1 em { font-family: "Playfair Display", serif; font-weight: 500; letter-spacing: -.04em; color: var(--coral); }
.doc-body h2 { font-size: 31px; line-height: 1.08; letter-spacing: -.045em; color: var(--ink); margin: 0 0 14px; scroll-margin-top: 84px; }
.doc-body h3 { font-size: 18.5px; letter-spacing: -.025em; color: var(--ink); margin: 38px 0 10px; scroll-margin-top: 84px; }
.doc-body section { scroll-margin-top: 84px; }
.doc-lede { font-size: 17.5px; line-height: 1.66; color: var(--prose-soft); max-width: 700px; }
.doc-body p { margin: 0 0 15px; }
.doc-body a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb,var(--purple) 32%,transparent); }
.doc-body a:hover { text-decoration-color: var(--purple); }
.doc-body em { font-style: italic; }
.doc-small { font-size: 13px; color: var(--muted); }

/* An anchor you can hand to someone. Appears on hover, always reachable by
   keyboard — a heading link nobody can focus is decoration, not navigation. */
.doc-anchor { margin-left: 9px; font: 500 15px DM Mono, monospace; color: var(--coral); text-decoration: none !important; opacity: 0; transition: opacity .18s; }
h2:hover .doc-anchor, h3:hover .doc-anchor, .doc-anchor:focus-visible { opacity: 1; }

.doc-body code { font: 12.5px DM Mono, monospace; background: color-mix(in srgb,var(--ink) 7%,transparent); color: var(--ink); padding: 2px 5px; border-radius: 3px; word-break: break-word; }
.doc-body pre code { background: none; padding: 0; color: inherit; font-size: 12.5px; word-break: normal; }

/* ── Callouts ──────────────────────────────────────────────────────────── */

.doc-flag, .doc-note, .doc-warn { padding: 17px 20px; border-radius: 6px; font-size: 14px; line-height: 1.66; margin: 22px 0; }
.doc-flag { background: var(--flag); border: 1px solid var(--flag-line); }
.doc-note { background: color-mix(in srgb,var(--purple) 5%,transparent); border-left: 3px solid var(--purple); }
.doc-warn { background: color-mix(in srgb,var(--coral) 8%,transparent); border-left: 3px solid var(--coral); }
.doc-flag b, .doc-note b, .doc-warn b { color: var(--ink); }

/* ── Jump cards ────────────────────────────────────────────────────────── */

.doc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin: 30px 0 6px; }
.doc-card {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px;
  padding: 17px 18px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px;
  text-decoration: none !important; transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.doc-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--ink) 24%,transparent); box-shadow: 0 12px 24px color-mix(in srgb,var(--ink) 8%,transparent); }
.doc-card b { font-size: 15px; color: var(--ink); letter-spacing: -.02em; }
.doc-card span { grid-column: 1; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.doc-card i { font-style: normal; color: var(--coral); font-size: 15px; }

/* ── Facts ─────────────────────────────────────────────────────────────── */

.doc-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; margin: 26px 0 10px; }
.doc-facts > div { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); }
.doc-facts dt { font: 600 21px "DM Sans", sans-serif; letter-spacing: -.045em; color: var(--coral); }
.doc-facts dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ── Steps ─────────────────────────────────────────────────────────────── */

.doc-steps { list-style: none; counter-reset: step; margin: 26px 0 0; padding: 0; }
.doc-steps > li { counter-increment: step; position: relative; padding: 0 0 26px 46px; border-left: 1px solid var(--line); margin-left: 13px; }
.doc-steps > li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.doc-steps > li:before {
  content: counter(step); position: absolute; left: -13px; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--btn); color: #fff;
  font: 500 11px DM Mono, monospace; display: grid; place-items: center;
}
.doc-steps > li > b { display: block; font-size: 16px; color: var(--ink); letter-spacing: -.02em; margin: 2px 0 7px; }

/* ── Code ──────────────────────────────────────────────────────────────── */

.code { margin: 18px 0 22px; background: var(--slab); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 26px color-mix(in srgb,var(--ink) 12%,transparent); }
.code-bar { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 14px; min-height: 38px; border-bottom: 1px solid color-mix(in srgb,var(--onslab) 11%,transparent); }
.code-name { font: 500 10px DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; color: #a49ccd; }
.code-tabs { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; flex: 1; }
.code-tabs button {
  font: 500 11px DM Mono, monospace; color: #a49ccd; background: none; border: 0; cursor: pointer;
  padding: 11px 11px 10px; border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.code-tabs button:hover { color: #ded8ff; }
.code-tabs button[aria-selected=true] { color: #fff; border-bottom-color: var(--yellow); }
.code-copy {
  margin-left: auto; font: 500 10px DM Mono, monospace; letter-spacing: .06em; color: #a49ccd;
  background: color-mix(in srgb,var(--onslab) 7%,transparent); border: 1px solid color-mix(in srgb,var(--onslab) 12%,transparent); border-radius: 4px; padding: 5px 9px; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}
.code-copy:hover { background: color-mix(in srgb,var(--onslab) 13%,transparent); color: #fff; }
.code-copy.done { color: var(--ink); background: var(--yellow); border-color: var(--yellow); }
.code pre, .doc-agent pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; color: #ded8ff; line-height: 1.62; }
.code pre[hidden] { display: none; }

.tk-str { color: #ffd75b; }
.tk-num { color: #8ee6c0; }
.tk-key { color: #ff9d8f; }
.tk-kw  { color: #b0a4ff; }
.tk-com { color: #7d76a8; font-style: italic; }
.tk-fn  { color: #7ecbff; }

/* ── The agent brief ───────────────────────────────────────────────────── */

/* Deliberately one block, one button. An agent that has to stitch six snippets
   together will get one of them wrong. */
.doc-agent { margin: 24px 0; background: var(--slab); border-radius: 6px; overflow: hidden; box-shadow: 12px 13px var(--coral); }
.doc-agent-bar { display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 16px; border-bottom: 1px solid color-mix(in srgb,var(--onslab) 11%,transparent); }
.doc-agent-bar b { font: 500 10px DM Mono, monospace; letter-spacing: .12em; color: var(--yellow); }
.doc-agent pre { font-size: 11.6px; color: #ded8ff; max-height: 480px; overflow-y: auto; }

.doc-links { margin: 14px 0 0; padding-left: 20px; }
.doc-links li { margin-bottom: 7px; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.doc-table-wrap { overflow-x: auto; margin: 20px 0 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--sheet); }
/* Below this the columns stop being readable, so the wrapper scrolls instead of
   squashing — a default of "text" broken across two lines is worse than a swipe. */
.doc-table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 13.5px; }
.doc-table code { white-space: nowrap; word-break: normal; }
.doc-table th {
  font: 500 9.5px DM Mono, monospace; letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.doc-table td { padding: 13px 15px; border-bottom: 1px solid color-mix(in srgb,var(--ink) 8%,transparent); vertical-align: top; line-height: 1.55; }
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table tbody tr:hover { background: color-mix(in srgb,var(--ink) 3%,transparent); }
.doc-table tr.us { background: color-mix(in srgb,var(--coral) 6%,transparent); }
.doc-table tr.us:hover { background: color-mix(in srgb,var(--coral) 9%,transparent); }
.doc-table td:first-child { white-space: nowrap; }
.doc-table td.gap { color: var(--faint); }
.doc-table td.yes { color: var(--yes); font-weight: 600; }
.doc-table td.no { color: var(--no); }
.req { font: 500 8.5px DM Mono, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); vertical-align: middle; margin-left: 5px; }
.doc-target, .doc-small-tag { font: 500 8.5px DM Mono, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); background: color-mix(in srgb,var(--ink) 7%,transparent); padding: 2px 5px; border-radius: 3px; margin-left: 5px; }
.doc-migrate td { white-space: nowrap; }
.doc-migrate td:first-child { background: color-mix(in srgb,var(--coral) 4%,transparent); }

/* ── Recipes ───────────────────────────────────────────────────────────── */

.doc-recipes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin-top: 22px; }
.doc-recipes article { padding: 18px 19px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }
.doc-kicker { font: 500 9.5px DM Mono, monospace; letter-spacing: .12em; color: var(--muted); margin: 0 0 11px !important; }
.doc-recipes p { font-size: 13px; line-height: 1.6; margin-bottom: 9px; }
.doc-recipes p:last-child { margin-bottom: 0; color: var(--muted); }
.doc-bad { color: var(--no); }
.doc-good { color: var(--yes); }
.doc-recipes code { font-size: 12px; }

/* ── Endpoint line ─────────────────────────────────────────────────────── */

.doc-endpoint { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; margin-bottom: 18px !important; }
.doc-endpoint b { font: 500 10px DM Mono, monospace; letter-spacing: .08em; color: #fff; background: var(--yes); padding: 5px 8px; border-radius: 3px; }
.doc-endpoint code { background: none; font-size: 13.5px; padding: 0; }

/* ── Changelog + outro ─────────────────────────────────────────────────── */

.doc-log { margin: 20px 0 0; }
.doc-log dt { font: 500 10px DM Mono, monospace; letter-spacing: .08em; color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line); }
.doc-log dd { margin: 6px 0 16px; font-size: 14px; }

.doc-out { display: inline-flex; align-items: center; gap: 9px; font: 500 11px DM Mono, monospace; text-decoration: none !important; color: var(--ink) !important; border-bottom: 1px solid var(--coral); padding-bottom: 3px; }
.doc-out b { color: var(--coral); }

.doc-foot { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); font: 500 10px DM Mono, monospace; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.doc-foot a { color: var(--muted) !important; text-decoration: none !important; }
.doc-foot a:hover { color: var(--ink) !important; }

/* ── On-this-page rail ─────────────────────────────────────────────────── */

.doc-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.doc-rail a { display: block; padding: 5px 0 5px 13px; margin-left: -1px; border-left: 2px solid transparent; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-decoration: none; transition: color .18s, border-color .18s; }
.doc-rail a:hover { color: var(--ink); }
.doc-rail a.on { color: var(--purple); border-left-color: var(--coral); }
.doc-rail li.sub a { padding-left: 24px; font-size: 12px; }

/* ── Command palette ───────────────────────────────────────────────────── */

.doc-finder { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb,var(--ink) 25%,transparent); backdrop-filter: blur(3px); display: grid; place-items: start center; padding-top: 13vh; }
.doc-finder[hidden] { display: none; }
.doc-finder-box { width: min(560px, calc(100% - 36px)); background: var(--sheet); border: 1px solid color-mix(in srgb,var(--ink) 20%,transparent); border-radius: 9px; box-shadow: 0 26px 60px color-mix(in srgb,var(--ink) 24%,transparent); overflow: hidden; }
.doc-finder input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 17px 19px; font: 400 16px "DM Sans", sans-serif; color: var(--ink); outline: none; }
.doc-finder input::placeholder { color: var(--faint); }
.doc-finder ol { list-style: none; margin: 0; padding: 7px; max-height: 46vh; overflow-y: auto; }
.doc-finder li a { display: flex; align-items: baseline; gap: 11px; padding: 9px 12px; border-radius: 5px; text-decoration: none; color: var(--ink); font-size: 14px; }
.doc-finder li.on a, .doc-finder li a:hover { background: var(--btn); color: #fff; }
.doc-finder li i { font: 500 9px DM Mono, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-left: auto; }
.doc-finder li.on i { color: #a49ccd; }
.doc-finder-foot { display: flex; gap: 7px; align-items: center; margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font: 500 9.5px DM Mono, monospace; color: var(--muted); }
.doc-finder-empty { padding: 22px 19px; font-size: 13.5px; color: var(--muted); }

/* ── Reveal ────────────────────────────────────────────────────────────── */

html.motion .doc-body > section { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .55s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.16,.86,.28,1); }
html.motion .doc-body > section.in { opacity: 1; transform: none; }

/* A transition cannot advance while the document is hidden, and an embedded
   browser view can report hidden while it is on screen — which would leave
   every section at opacity 0 for good. While that is true, drop transitions
   entirely so the reveal resolves straight to its target. It must be the
   property, not the duration: pending transitions in a hidden document are not
   shortened by a clock that never ticks. Same rule as motion.css; the docs do
   not load that file. */
html.motion.still, html.motion.still * { transition: none !important; }

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .doc-shell { grid-template-columns: 224px minmax(0, 1fr); }
  .doc-rail { display: none; }
}

@media (max-width: 880px) {
  .doc-top { gap: 12px; padding: 0 18px; }
  .doc-find { display: none; }
  .doc-top-right a:not(.doc-cta) { display: none; }
  .doc-burger { display: flex; }
  .doc-shell { grid-template-columns: minmax(0, 1fr); width: calc(100% - 36px); }
  .doc-nav {
    position: fixed; inset: 64px auto 0 0; z-index: 19; width: 254px; padding: 22px 20px;
    background: var(--cream); border-right: 1px solid var(--line); max-height: none; height: calc(100vh - 64px);
    transform: translateX(-100%); transition: transform .3s cubic-bezier(.16,.86,.28,1);
  }
  .doc-nav[data-open] { transform: none; box-shadow: 22px 0 50px color-mix(in srgb,var(--ink) 12%,transparent); }
  .doc-body { padding-top: 30px; }
  .doc-cards, .doc-facts, .doc-recipes { grid-template-columns: 1fr; }
  .doc-facts > div { grid-template-columns: 70px 1fr; }
  .doc-body h1 { font-size: 34px; }
  .doc-body h2 { font-size: 26px; }
}
