/* The static site pages: about, api, commands, contact, docs, faq, invite,
   privacy, support, terms.
 *
 * These are plain HTML served straight off the CDN, with no build step, so this
 * is one hand-written stylesheet. It deliberately matches the homepage rather
 * than the signed-in dashboard: flat black, hairline rules, square corners,
 * serif headings, mono for anything machine-shaped, left aligned. No gradients,
 * no glow, no shadows, no icon tiles.
 *
 * The floating capsule nav is the one rounded thing here, same as on the
 * homepage, which is what makes it read as the bar rather than part of the
 * page. Keep it that way. */

:root {
  color-scheme: dark;

  --canvas: #000;
  --panel: #0a0a0a;
  --fg: #fafafa;
  --mut: #8a8a8a;
  --line: #262626;
  --line-2: #3a3a3a;

  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The bar floats over the page, so an anchor has to stop short of it or the
     heading it jumped to is the thing hidden underneath. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--mut);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--fg); color: var(--canvas); }

/* One focus style for the whole site, and it is always visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* The same column the bar and the footer use, so every page lines up down its
   left edge rather than the body floating in the middle of its own narrower
   box. Readability comes from a measure cap on the text itself, below, which
   lets headings, tables and code blocks use the full width. */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 24px; }
.wrap p, .wrap li { max-width: 46em; }

/* Nav ---------------------------------------------------------------------- */

.bar { position: sticky; top: 0; z-index: 20; padding: 14px 24px; }
.bar-in {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #0d0d0d;
}
.bar a.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--fg); font-weight: 500; font-size: 15px;
}
.bar .brand img { width: 20px; height: 20px; border-radius: 2px; }
.bar nav { display: flex; gap: 22px; margin-right: auto; }
.bar nav a { color: var(--mut); text-decoration: none; font-size: 14px; }
.bar nav a:hover,
.bar nav a[aria-current="page"] { color: var(--fg); }
.bar .cta {
  background: var(--fg); color: var(--canvas); font-weight: 500; font-size: 14px;
  padding: 9px 17px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.bar .cta:hover { background: #fff; }

/* Type --------------------------------------------------------------------- */

/* The eyebrow names the section the page belongs to. Mono, because it is a
   label rather than a sentence. */
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px;
  color: var(--mut); margin: 44px 0 14px;
}
h1, h2, h3 { color: var(--fg); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-family: var(--serif); font-size: clamp(38px, 6vw, 56px); line-height: 1.03; margin: 0 0 14px; }
h2 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin: 48px 0 12px; }
h3 { font-size: 15px; font-weight: 500; margin: 26px 0 6px; }

p, li { color: var(--mut); }
a { color: var(--fg); }
.lead { color: var(--mut); font-size: 17px; margin: 0 0 8px; max-width: 42em; }
.updated { font-family: var(--mono); color: var(--line-2); font-size: 12px; margin: 0 0 8px; }
ul, ol { padding-left: 20px; }
li { margin: 5px 0; }
strong { color: var(--fg); font-weight: 500; }

code {
  color: var(--fg); background: transparent;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 1px 6px; font-family: var(--mono); font-size: 0.88em;
}
hr { border: none; border-top: 1px solid var(--line); margin: 44px 0; }

/* Example requests and payloads on the API page. Scrolls sideways inside its
   own box rather than pushing the page wide on a phone. */
pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
  padding: 14px 16px; margin: 16px 0; overflow-x: auto; line-height: 1.55;
}
pre code {
  background: none; border: none; padding: 0;
  color: var(--mut); font-size: 12.5px; white-space: pre;
}

/* Buttons are rectangles. The filled one is the only bright surface on a page,
   which is what makes it read as the thing to press. */
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 2px; text-decoration: none;
  font-size: 14px; line-height: 1; border: 1px solid var(--line-2); color: var(--fg);
}
.btn:hover { border-color: var(--fg); }
.btn.primary { background: var(--fg); color: var(--canvas); border-color: var(--fg); font-weight: 500; }
.btn.primary:hover { background: #fff; }

/* Ruled lists, not cards. Used for the docs index and the feature rundowns. */
.grid { display: grid; gap: 0; margin: 24px 0; }
.card {
  display: block; text-decoration: none;
  border-top: 1px solid var(--line); padding: 18px 0;
}
.grid .card:last-child { border-bottom: 1px solid var(--line); }
a.card:hover .t { text-decoration: underline; text-underline-offset: 3px; }
/* Both are spans in the markup, so they need telling to stack: as inline they
   ran together and the card read "DocsHow each module works". */
.card .t { display: block; color: var(--fg); font-family: var(--serif); font-size: 19px; }
.card .d { display: block; color: var(--mut); font-size: 14px; margin-top: 3px; }

/* Tables: command and purpose reference rows. */
.tw { overflow-x: auto; margin: 20px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--mono); color: var(--mut); font-weight: 400;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
td { color: var(--mut); }
td code { white-space: nowrap; }

/* FAQ: native details so it works with no JavaScript at all. */
details.q { border-top: 1px solid var(--line); }
details.q:last-of-type { border-bottom: 1px solid var(--line); }
details.q summary {
  cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative;
  color: var(--fg); font-size: 16px;
}
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after {
  content: "+"; position: absolute; right: 2px; top: 16px;
  color: var(--line-2); font-family: var(--mono); font-size: 18px;
}
details.q[open] summary::after { content: "\2212"; }
details.q p { margin: 0 0 18px; color: var(--mut); font-size: 15px; max-width: 46em; }

/* Commands page ------------------------------------------------------------ */

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 8px; }
.filters input, .filters select {
  background: var(--panel); border: 1px solid var(--line); color: var(--fg);
  border-radius: 2px; padding: 11px 14px; font: inherit; font-size: 14px;
}
.filters input { flex: 1 1 280px; }
.filters input::placeholder { color: var(--line-2); }
.count { font-family: var(--mono); color: var(--mut); font-size: 12px; margin: 0 0 24px; }

.cmds { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cmd { border-top: 1px solid var(--line); padding: 18px 20px 18px 0; }
/* The card header: the command on the left, a copy button pinned right. The
   button is only in the DOM once the page's script has shown it, so no-JS
   readers never see one. */
.cmd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cmd h3 {
  margin: 0; color: var(--fg); font-size: 15px; font-weight: 500;
  font-family: var(--mono);
  /* A long command wraps rather than squeezing the button off the row. */
  min-width: 0; overflow-wrap: anywhere;
}
.copy {
  flex: none; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--mut); font: inherit; font-size: 11.5px; line-height: 1;
  /* Tall enough to hit with a thumb without making the row taller. */
  min-height: 28px; padding: 7px 10px;
  transition: color .12s ease, border-color .12s ease;
}
.copy:hover { color: var(--fg); border-color: var(--line-2); }
.copy.ok, .copy.bad { color: var(--fg); border-color: var(--line-2); }
@media (prefers-reduced-motion: reduce) { .copy { transition: none; } }

.cmd .desc { color: var(--mut); font-size: 14px; margin: 7px 0 0; }
.cmd .meta { margin-top: 13px; }
.cmd .lbl {
  font-family: var(--mono); color: var(--line-2);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px;
}
.cmd .meta + .meta { margin-top: 10px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  padding: 2px 8px; font-size: 11.5px; color: var(--mut); font-family: var(--mono);
  /* A long argument must wrap rather than push the page sideways. */
  max-width: 100%; overflow-wrap: anywhere;
}
.chip.perm { font-family: var(--sans); font-size: 12px; }
.chip.none { color: var(--line-2); }
.empty { color: var(--mut); padding: 28px 0; }

/* The pager. Ships hidden and the page's own script reveals it, so a reader
   with no JavaScript sees the whole list and no controls that cannot work. */
.pager { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
/* `display: flex` beats the browser's own `[hidden] { display: none }`, so the
   attribute has to be honoured explicitly or the pager shows on a single page. */
.pager[hidden] { display: none; }
.pgbtn {
  cursor: pointer; background: transparent; border: 1px solid var(--line-2);
  border-radius: 2px; color: var(--fg); font: inherit; font-size: 13px;
  line-height: 1; padding: 11px 16px;
}
.pgbtn:hover:not(:disabled) { border-color: var(--fg); }
.pgbtn:disabled { color: var(--line-2); border-color: var(--line); cursor: default; }
.pglabel { font-family: var(--mono); font-size: 12px; color: var(--mut); }

/* Docs: sections down the left, content on the right. Collapses to one column
   on a phone, where the list becomes a plain table of contents. */
.docs { display: grid; grid-template-columns: 210px 1fr; gap: 56px; align-items: start; }
.docs-nav { position: sticky; top: 96px; }
.docs-nav .g {
  font-family: var(--mono); color: var(--line-2);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; margin: 22px 0 8px;
}
.docs-nav .g:first-child { margin-top: 0; }
.docs-nav a { display: block; color: var(--mut); text-decoration: none; font-size: 14px; padding: 4px 0; }
.docs-nav a:hover { color: var(--fg); }
.docs-body h2 { scroll-margin-top: 96px; }
.docs-body h2:first-child { margin-top: 0; }
.note {
  border-left: 1px solid var(--line-2); padding: 2px 0 2px 16px;
  color: var(--mut); font-size: 14px; margin: 18px 0;
}

/* Footer ------------------------------------------------------------------- */

footer.site { border-top: 1px solid var(--line); margin-top: 72px; padding: 52px 24px 36px; }
footer.site .fin { max-width: 1120px; margin: 0 auto; }
footer.site .fcols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 200px));
  gap: 48px; justify-content: start;
}
footer.site .fcols > div { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
footer.site .fh {
  font-family: var(--mono); color: var(--fg);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 3px;
}
footer.site a { color: var(--mut); text-decoration: none; font-size: 14px; }
footer.site a:hover { color: var(--fg); }
footer.site .fend {
  margin: 44px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--mut);
}

/* Narrow screens ----------------------------------------------------------- */

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 28px; }
  .docs-nav { position: static; }
  .docs-nav a { display: inline-block; margin-right: 14px; }
  .bar { padding: 10px 16px; }
  .bar-in { gap: 14px; padding: 7px 7px 7px 14px; }
  /* Seven links do not fit beside the button on a phone, and a hamburger for
     seven links is worse than not having them: the footer carries the same set. */
  .bar nav { display: none; }
  .bar .cta { margin-left: auto; }
  .wrap { padding: 0 20px 20px; }
  footer.site { padding: 44px 20px 32px; }
  footer.site .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 16px 16px; }
  .cmds { grid-template-columns: 1fr; }
  footer.site .fcols { grid-template-columns: 1fr; }
}