/* ---------------------------------------------------------------------------
   archfoundry.ai/docs. Copied to dist/docs/docs.css by build-docs.mjs.

   The tokens are site.css's, by value: the docs pages do not load the site
   bundle (they are plain HTML, no React), so they cannot read its custom
   properties, and these must be changed together with those.

   The fonts are the copies web/public/email/fonts/ already serves for the
   signup email, so the docs add no font files and load nothing from Google
   (tests/prerender.test.mjs fails any page that does).
   --------------------------------------------------------------------------- */

@font-face { font-family: "Geist"; font-weight: 400; font-display: swap; src: url("/email/fonts/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-weight: 500 700; font-display: swap; src: url("/email/fonts/geist-500.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-display: swap; src: url("/email/fonts/geist-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("/email/fonts/space-grotesk-600.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --bg-inset: #eef0f5;
  --line: #dce0ea;
  --ink: #0a0c12;
  --ink-body: #3f4654;
  --ink-muted: #565e6d;
  --brand: #5e6ad2;
  --brand-ink: #363f9c;
  --brand-soft: #eef0fb;
  /* The button fill, NOT redefined for dark: the dark --brand (#9392ff) is a
     text colour, and white on it is 2.6:1. White on this is 4.6:1 in both. */
  --cta: #5e6ad2;
  --code-bg: #0b0d12;
  --code-ink: #e6e8ee;
  --code-bar: #13161c;
  --code-line: #23252a;

  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --radius: 8px;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", var(--sans);
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b0d12;
    --bg-alt: #13161c;
    --bg-inset: #1a1d24;
    --line: #262a33;
    --ink: #f7f8fc;
    --ink-body: #c4c9d4;
    --ink-muted: #9aa1ae;
    --brand: #9392ff;
    --brand-ink: #b4b3ff;
    --brand-soft: #1c1f3a;
    --code-bg: #07080c;
    --code-bar: #101218;
    --code-line: #23252a;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body.docs {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font: 400 var(--fs-base)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.docs a { color: var(--brand-ink); text-underline-offset: 2px; }

.docs-skip { position: absolute; left: -9999px; }
.docs-skip:focus { left: var(--sp-4); top: var(--sp-4); z-index: 10; background: var(--bg); padding: var(--sp-2) var(--sp-3); }

/* ---- top bar ---- */
.docs-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-3);
  height: 56px; padding: 0 var(--sp-5);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.docs-brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); text-decoration: none; font: 600 var(--fs-md) var(--display); }
.docs-brand-sub { color: var(--ink-muted); text-decoration: none; padding-left: var(--sp-3); border-left: 1px solid var(--line); }
.docs .docs-brand-sub { color: var(--ink-muted); }
.docs-cta {
  margin-left: auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  background: var(--cta); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
}
/* `.docs a` gives every link the accent colour; these two are chrome, not links in prose. */
.docs .docs-cta { color: #ffffff; }
.docs .docs-brand { color: var(--ink); }

/* ---- layout ---- */
.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: 1200px; margin: 0 auto; }

.docs-side {
  position: sticky; top: 56px; align-self: start;
  max-height: calc(100vh - 56px); overflow-y: auto;
  padding: var(--sp-5) var(--sp-4); border-right: 1px solid var(--line);
}
.docs-search {
  width: 100%; margin-bottom: var(--sp-5); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-alt); color: var(--ink); font: inherit; font-size: var(--fs-sm);
}
.docs-group + .docs-group { margin-top: var(--sp-5); }
.docs-group-label { margin-bottom: var(--sp-2); color: var(--ink); font-weight: 500; font-size: var(--fs-sm); }
.docs-side ul { list-style: none; margin: 0; padding: 0; }
.docs-side li a {
  display: block; padding: var(--sp-1) var(--sp-3); border-radius: 6px;
  color: var(--ink-muted); text-decoration: none; font-size: var(--fs-sm); line-height: 1.45;
}
.docs-side li a:hover { color: var(--ink); background: var(--bg-alt); }
.docs-side li a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); font-weight: 500; }
.docs-none { color: var(--ink-muted); font-size: var(--fs-sm); }

/* ---- article ---- */
.docs-main { min-width: 0; padding: var(--sp-8) var(--sp-8) 96px; }
.docs-main article { max-width: 760px; }
.docs-main h1 { margin: 0 0 var(--sp-2); color: var(--ink); font: 600 var(--fs-2xl)/1.15 var(--display); letter-spacing: -0.01em; }
.docs-meta { margin: 0 0 var(--sp-6); color: var(--ink-muted); font-size: var(--fs-sm); }
.docs-main h2 { margin: var(--sp-8) 0 var(--sp-3); color: var(--ink); font: 600 var(--fs-xl)/1.25 var(--display); scroll-margin-top: 72px; }
.docs-main h3 { margin: var(--sp-6) 0 var(--sp-2); color: var(--ink); font-size: var(--fs-lg); scroll-margin-top: 72px; }
.docs-main h2:first-of-type { margin-top: 0; }
.docs .docs-anchor { color: inherit; text-decoration: none; }
.docs-main p, .docs-main li { color: var(--ink-body); }
.docs-main strong { color: var(--ink); font-weight: 500; }
.docs-main ol, .docs-main ul { padding-left: var(--sp-5); }
.docs-main li + li { margin-top: var(--sp-2); }
.docs-main :not(pre) > code {
  padding: 1px 6px; border-radius: 4px; background: var(--bg-inset); color: var(--ink);
  font: 0.9em var(--mono);
}
.docs-main table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.docs-main th, .docs-main td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; }
.docs-main th { color: var(--ink); font-weight: 500; }

/* ---- code ---- */
.docs-code { margin: var(--sp-4) 0; border: 1px solid var(--code-line); border-radius: var(--radius); overflow: hidden; background: var(--code-bg); }
.docs-code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-4);
  background: var(--code-bar); border-bottom: 1px solid var(--code-line);
  color: #9aa1ae; font: var(--fs-sm) var(--mono);
}
.docs-copy {
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--code-line); border-radius: 6px;
  background: transparent; color: var(--code-ink); font: var(--fs-sm) var(--sans); cursor: pointer;
}
.docs-copy:hover { background: var(--code-line); }
.docs-code pre { margin: 0; padding: var(--sp-4); overflow-x: auto; }
.docs-code code { color: var(--code-ink); font: var(--fs-sm)/1.6 var(--mono); }

/* ---- phone ---- */
@media (max-width: 860px) {
  .docs-top { padding: 0 var(--sp-4); }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .docs-main { padding: var(--sp-6) var(--sp-4) var(--sp-8); }
  .docs-main h1 { font-size: var(--fs-xl); }
  .docs-main h2 { font-size: var(--fs-lg); }
}