/* Документация Stilo — одна таблица стилей на переменных Consta (значения тем gpnDefault / gpnDark, переписаны сюда:
   кит целиком не подключаем — страница открывается и там, где внешние адреса закрыты). Правится руками; страницы
   собирает agent-ui-app/scripts/site-docs.mjs. */
:root {
  --color-bg-default: #fff;
  --color-bg-secondary: #ecf1f4;
  --color-bg-stripe: rgba(0, 32, 51, .05);
  --color-bg-border: rgba(0, 65, 102, .2);
  --color-bg-brand: #0071b2;
  --color-typo-primary: #002033;
  --color-typo-secondary: rgba(0, 32, 51, .6);
  --color-typo-link: #0078d2;
  --color-typo-link-hover: #008efa;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --size-text-xs: 12px;
  --size-text-s: 14px;
  --size-text-m: 16px;
  --size-text-xl: 20px;
  --size-text-2xl: 24px;
  --size-text-3xl: 32px;
  --line-height-text-m: 1.5em;
  --control-radius: 4px;
  --font-primary: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-default: #22272b;
    --color-bg-secondary: #161a1d;
    --color-bg-stripe: rgba(246, 251, 253, .06);
    --color-bg-border: hsla(0, 0%, 100%, .2);
    --color-typo-primary: #fafafa;
    --color-typo-secondary: hsla(0, 0%, 100%, .6);
    --color-typo-link: #0f9fff;
    --color-typo-link-hover: #6fa5c8;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--color-bg-default);
  color: var(--color-typo-primary);
  font: var(--size-text-m)/var(--line-height-text-m) var(--font-primary);
}
a { color: var(--color-typo-link); }
a:hover { color: var(--color-typo-link-hover); }

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-xl);
  padding: var(--space-s) var(--space-xl);
  border-bottom: 1px solid var(--color-bg-border);
}
.logo { font-weight: 700; }
.pages { display: flex; flex-wrap: wrap; gap: var(--space-m); font-size: var(--size-text-s); }
.pages a { text-decoration: none; }
.pages a[aria-current="page"] { color: var(--color-typo-primary); font-weight: 600; }

.layout {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--space-3xl);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
}
main { flex: 1; min-width: 0; max-width: 760px; }
.toc { flex: 0 0 240px; position: sticky; top: var(--space-xl); align-self: flex-start; font-size: var(--size-text-s); }
.toc-title { margin: 0 0 var(--space-xs); color: var(--color-typo-secondary); font-size: var(--size-text-xs); text-transform: uppercase; letter-spacing: .04em; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: var(--space-2xs) 0; }
.toc .toc-3 { padding-left: var(--space-s); }
.toc a { text-decoration: none; }

h1 { font-size: var(--size-text-3xl); line-height: 1.2; margin: 0 0 var(--space-xl); }
h2 { font-size: var(--size-text-2xl); line-height: 1.3; margin: var(--space-3xl) 0 var(--space-s); }
h3 { font-size: var(--size-text-xl); margin: var(--space-2xl) 0 var(--space-xs); }
p, ul, ol { margin: 0 0 var(--space-m); }
li { margin: var(--space-2xs) 0; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--color-bg-stripe); padding: 1px var(--space-2xs); border-radius: var(--control-radius); }
pre { background: var(--color-bg-secondary); padding: var(--space-m); border-radius: var(--control-radius); overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { margin: 0 0 var(--space-m); padding: var(--space-xs) var(--space-m); border-left: 4px solid var(--color-bg-brand); background: var(--color-bg-stripe); }
table { border-collapse: collapse; margin: 0 0 var(--space-m); }
th, td { border: 1px solid var(--color-bg-border); padding: var(--space-xs) var(--space-s); text-align: left; }
img { max-width: 100%; height: auto; }

@media (max-width: 800px) {
  .layout { flex-direction: column; gap: var(--space-xl); padding: var(--space-xl) var(--space-m); }
  .toc { position: static; flex-basis: auto; }
  .top { padding: var(--space-s) var(--space-m); }
}