/* Inter — теми же файлами @fontsource, что у лендинга и кабинета (OFL,
   лицензия в assets/fonts/LICENSE). Свой хост, не CDN. Пути относительные:
   стиль отдаётся с /docs/assets/style.css, значит fonts/... это
   /docs/assets/fonts/... где бы ни был смонтирован роутер. Подмножества с
   unicode-range: латиница и кириллица грузятся отдельно, лишнего браузер не
   тянет. Лицензия — /docs/assets/fonts/LICENSE, отдаётся рядом со шрифтом,
   как того требует OFL. */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/inter-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/inter-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/inter-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/inter-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/inter-cyrillic-800-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/inter-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Внешний вид документации внешнего API ПерфектПак.
   Палитра и структура продолжают internal/api/docs.html: те же переменные,
   тот же язык компонентов (.callout/.status/.table-wrap/.endpoint), плюс то,
   чего в одностраничнике не было — сайтовая левая навигация, переключатель
   языков в примерах кода и подсветка токенов JSON/HTTP. */
:root{
  --bg:#f8fafc; --surface:#fff; --surface-2:#eef2f7; --border:#e2e8f0; --hover:#f1f5f9;
  --text:#0f172a; --muted:#5b6472; --faint:#5f6f87;
  --navy:#0b1220; --navy-2:#1b2a4a;
  --primary:#2e75b6; --primary-weak:#eaf2fb; --accent:#e8590c; --accent-weak:#fdeee5;
  --ok:#0f9d58; --ok-bg:#e5f6ec; --info:#2e75b6; --info-bg:#e8f1fb; --warn:#c9781f; --warn-bg:#fbf1e1;
  --danger:#d64545; --danger-bg:#fbe9e9;
  /* --faint замерен, а не подобран на глаз: старые #94a3b8 (светлая) и
     #6c7fa3 (тёмная) давали 2.3–3.5:1 на наших же подложках — ниже порога
     AA 4.5:1, а этим цветом набраны подписи методов в меню, тип параметра и
     примечания у полей. Текущие значения: 5.11/4.54 на светлой, 5.38/4.68 на
     тёмной (белый/surface-2 и surface/surface-2 соответственно). */
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
  --r:12px;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --nav-w:250px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:var(--navy); --surface:var(--navy-2); --surface-2:#22335c; --border:#2c3f66; --hover:#233257;
    --text:#e7edf6; --muted:#9aabc7; --faint:#8ea0c0;
    --primary:#5b9fd8; --primary-weak:rgba(91,159,216,.16); --accent:#ff8a3d; --accent-weak:rgba(255,138,61,.16);
    --ok:#34c77b; --ok-bg:rgba(52,199,123,.14); --info:#5b9fd8; --info-bg:rgba(91,159,216,.14); --warn:#e0a852; --warn-bg:rgba(224,168,82,.14);
    --danger:#f0736f; --danger-bg:rgba(240,115,111,.14);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:15.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);}
/* Клавиатурный фокус: браузерная обводка по умолчанию на тёмно-синем фоне
   почти не видна, а справочник целиком проходится с клавиатуры (меню, фильтр,
   вкладки примеров, «Попробовать»). */
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:6px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}
h1,h2,h3,h4{line-height:1.25; font-weight:700; scroll-margin-top:16px;}
h1{font-size:26px; margin:0 0 10px;}
h2{font-size:20px; margin:36px 0 12px; padding-top:8px; border-top:1px solid var(--border);}
h2:first-of-type{border-top:none; padding-top:0;}
h3{font-size:16px; margin:26px 0 10px;}
h4{font-size:12.5px; margin:18px 0 8px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
p{margin:0 0 14px;}
ul,ol{margin:0 0 14px; padding-left:22px;}
li{margin-bottom:6px;}

code{font-family:var(--mono); font-size:.92em;}
:not(pre)>code{background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px;}
pre{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  padding:14px 16px; overflow-x:auto; font-size:12.8px; line-height:1.6; margin:0 0 16px;
}
pre code{background:none; border:none; padding:0; font-size:1em;}

.table-wrap{overflow-x:auto; margin:0 0 18px; border:1px solid var(--border); border-radius:var(--r);}
table{width:100%; border-collapse:collapse; font-size:13.2px; min-width:520px;}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:last-child td{border-bottom:none;}
th{background:var(--surface-2); font-weight:600; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.02em;}
td code{white-space:nowrap;}

.callout{border-left:3px solid var(--info); background:var(--info-bg); border-radius:0 8px 8px 0; padding:12px 16px; margin:0 0 16px;}
.callout p:last-child{margin-bottom:0;}
.callout.warn{border-left-color:var(--accent); background:var(--accent-weak);}
.callout.danger{border-left-color:var(--danger); background:var(--danger-bg);}
.callout strong.tag{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; color:var(--muted);}

.method{
  display:inline-block; font-family:var(--mono); font-size:12px; font-weight:700;
  padding:3px 9px; border-radius:6px; background:var(--info-bg); color:var(--primary);
  margin-right:10px; vertical-align:middle; letter-spacing:.02em;
}
.status{
  display:inline-block; font-family:var(--mono); font-size:12px; font-weight:700;
  padding:2px 8px; border-radius:6px; margin:2px 4px 2px 0;
}
.status.ok{background:var(--ok-bg); color:var(--ok);}
.status.neutral{background:var(--surface-2); color:var(--muted); border:1px solid var(--border);}
.status.warn{background:var(--accent-weak); color:var(--accent);}
.status.danger{background:var(--danger-bg); color:var(--danger);}

.endpoint{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:20px 22px; margin:0 0 20px; box-shadow:var(--shadow);
}
.endpoint h3{margin-top:0;}

/* --- shell: top bar + left nav + main ---------------------------------- */
.shell{max-width:1320px; margin:0 auto; display:flex; min-height:100vh;}
header.topbar{
  position:fixed; top:0; left:0; right:0; height:56px; z-index:20;
  display:flex; align-items:center; gap:14px; padding:0 18px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.wordmark{font-weight:800; font-size:14.5px; letter-spacing:.01em; white-space:nowrap;}
.wordmark .pak{color:var(--primary);}
.topbar .version-pill{
  font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
  background:var(--primary-weak); color:var(--primary);
}
.topbar-spacer{flex:1;}
.topbar-link{font-size:13px; color:var(--muted); text-decoration:none; white-space:nowrap;}
.topbar-link:hover{color:var(--text);}
.nav-toggle{
  display:none; background:none; border:1px solid var(--border); border-radius:8px;
  width:34px; height:34px; color:var(--text); font-size:16px; cursor:pointer;
}

nav.sitenav{
  position:fixed; top:56px; bottom:0; left:0; width:var(--nav-w);
  overflow-y:auto; padding:18px 14px 40px; border-right:1px solid var(--border);
  background:var(--surface);
}
nav.sitenav .group-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
  margin:18px 8px 6px; font-weight:700;
}
nav.sitenav .group-label:first-child{margin-top:4px;}
nav.sitenav a{
  display:block; padding:7px 10px; font-size:13.6px; color:var(--muted); text-decoration:none;
  border-radius:8px; margin-bottom:1px;
}
nav.sitenav a:hover{color:var(--text); background:var(--hover);}
nav.sitenav a.active{color:var(--primary); background:var(--primary-weak); font-weight:600;}

main.content{margin-left:var(--nav-w); padding:88px 40px 80px; flex:1; min-width:0;}
main.content.full{padding-left:0; padding-right:0; padding-top:56px;}
main.content.full .content-pad{padding:32px 40px 0;}
.container{max-width:820px;}

.page-toc{
  border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  padding:12px 16px; margin:0 0 28px; font-size:13px;
}
.page-toc-title{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:6px; font-weight:700;}
.page-toc ul{margin:0; padding-left:18px; columns:2; column-gap:18px;}
.page-toc li{margin-bottom:3px;}
.page-toc a{color:var(--muted);}
.page-toc a:hover{color:var(--primary);}

footer.site{padding:30px 0 10px; color:var(--faint); font-size:12px;}

/* --- landing cards ------------------------------------------------------ */
.hero p.lead{max-width:66ch; color:var(--muted); font-size:15.5px;}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 32px;}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card h3{margin-top:0;}
.card p{color:var(--muted); font-size:13.8px; flex:1;}
.badge-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 18px;}
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:4px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--muted);
}
.pill.accent{background:var(--primary-weak); color:var(--primary); border-color:transparent;}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:13.6px;
  padding:9px 16px; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--hover);}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-accent:hover{filter:brightness(1.06);}
.btn:disabled{opacity:.6; cursor:default;}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}

.key-status{display:block; margin-top:10px; font-size:13px; color:var(--muted);}
.key-status code{word-break:break-all;}
.key-box{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
.key-box code{background:none; border:none; padding:0; word-break:break-all;}

/* --- language tabs for code samples -------------------------------------- */
.code-tabs{border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin:0 0 16px; background:var(--surface-2);}
.code-tabs .tabs-head{display:flex; gap:2px; padding:6px 6px 0; overflow-x:auto;}
.code-tabs .tab-btn{
  font:inherit; font-size:12.5px; font-weight:600; color:var(--muted); background:none; border:none;
  padding:8px 12px; cursor:pointer; border-radius:8px 8px 0 0; white-space:nowrap;
}
.code-tabs .tab-btn.active{color:var(--text); background:var(--surface);}
.code-tabs .tab-panel{display:none;}
.code-tabs .tab-panel.active{display:block;}
.code-tabs pre{margin:0; border:none; border-radius:0; background:var(--surface);}

/* --- syntax tokens (hand-rolled, no highlighter library) ----------------- */
.tok-key{color:var(--primary);}
.tok-str{color:var(--ok);}
.tok-num{color:var(--accent);}
.tok-bool,.tok-null{color:#8957c9;}
.tok-punc{color:var(--faint);}
.tok-method{color:var(--primary); font-weight:700;}
.tok-status-ok{color:var(--ok); font-weight:700;}
.tok-status-err{color:var(--danger); font-weight:700;}
.tok-header{color:var(--muted);}

/* --- /docs/reference: наш собственный справочник методов ----------------
   Раскладка повторяет справочники WB и Ozon, потому что читатель приходит
   оттуда и знает её наизусть: слева меню (общее + подменю методов), по
   центру адрес, описание, параметры и схемы ответов, справа — примеры
   запроса и ответа. Один метод — одна страница; всё, что было простынёй из
   двадцати аккордеонов, теперь выбирается меню. */

/* Раздел справочника шире остальных: в нём три колонки, а не одна. */
body.wide-nav{--nav-w:296px;}

.ref-intro{padding:0 40px 8px; max-width:900px;}
.ref-intro .ref-lead{color:var(--muted);}

/* --- подменю методов внутри общего меню -------------------------------- */
.nav-methods{margin:6px 0 10px; padding-left:10px; border-left:2px solid var(--border);}
.nav-methods .ref-filter-input{
  width:100%; font:inherit; font-size:12.5px; padding:6px 9px; margin:2px 0 8px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text);
}
.ref-filter-input::placeholder{color:var(--faint);}
.nav-methods-group{
  font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
  font-weight:700; margin:12px 8px 4px;
}
.nav-methods-group:first-child{margin-top:2px;}
nav.sitenav .nav-methods .ref-toc-link{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 7px; align-items:center;
  padding:5px 8px; border-radius:7px; text-decoration:none; margin-bottom:1px;
}
nav.sitenav .nav-methods .ref-toc-link:hover{background:var(--hover);}
nav.sitenav .nav-methods .ref-toc-link.is-current{background:var(--primary-weak);}
.nav-methods .method{font-size:9.5px; padding:1px 5px; margin:0;}
.ref-toc-path{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--mono); color:var(--muted); font-size:11.8px;
}
.ref-toc-link.is-current .ref-toc-path{color:var(--primary); font-weight:600;}
.ref-toc-summary{
  grid-column:2; font-size:11px; line-height:1.35; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ref-empty{padding:10px 12px; color:var(--faint); font-size:12.5px;}

/* --- /reference: список методов ---------------------------------------- */
.ref-index{padding:0 40px 60px; max-width:1000px;}
.ref-index-group h2{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.ref-tag-kicker{
  font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--faint); background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:2px 7px;
}
.ref-index-list{
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow); margin-bottom:8px;
}
.ref-index-row{
  display:grid; grid-template-columns:64px minmax(150px,260px) minmax(0,1fr) auto;
  align-items:center; gap:12px; padding:11px 16px; text-decoration:none; color:inherit;
}
.ref-index-row + .ref-index-row{border-top:1px solid var(--border);}
.ref-index-row:hover{background:var(--hover);}
.ref-index-row .method{margin:0; text-align:center;}
.ref-index-path{font-size:13.4px; font-weight:600;}
.ref-index-summary{color:var(--muted); font-size:13.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* --- /reference/{метод}: шапка ----------------------------------------- */
.op{padding:0 40px 64px;}
.op-head{max-width:1000px; margin-bottom:24px;}
.op-crumbs{font-size:12.5px; color:var(--faint); margin-bottom:10px;}
.op-crumbs a{text-decoration:none;}
.op-crumbs-sep{margin:0 6px;}
.op-head h1{font-size:29px; margin:0 0 12px; letter-spacing:-.01em;}
.op-head-path{display:flex; align-items:center; gap:2px; flex-wrap:wrap;}
.op-head-path code{
  font-size:15px; font-weight:600; background:none; border:none; padding:0; color:var(--muted);
}

/* --- /reference/{метод}: три части страницы ---------------------------- */
.op-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,430px); gap:34px; align-items:start;}
.op-main{min-width:0; max-width:740px;}
.op-side{
  min-width:0; position:sticky; top:72px;
  max-height:calc(100vh - 88px); overflow-y:auto; display:grid; gap:12px; align-content:start;
}

/* Заголовок раздела с короткой акцентной чертой — как «Описание метода» в
   справочнике WB: раздел видно на скролле, а страница не превращается в
   набор одинаковых абзацев. */
.op-h{
  position:relative; font-size:17px; margin:34px 0 14px; padding:0 0 9px;
  border-top:none; border-bottom:1px solid var(--border);
}
.op-h::after{content:""; position:absolute; left:0; bottom:-1px; width:64px; height:2px; background:var(--primary);}
.op-h-req{font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); font-weight:700; vertical-align:middle;}
.op-desc{color:var(--muted);}
.op-desc :last-child{margin-bottom:0;}

/* Адрес запроса — первое, что нужно разработчику. */
.op-endpoint{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--shadow);
}
.op-endpoint-label{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint);
  font-weight:700; margin-bottom:8px;
}
.op-endpoint-row{display:flex; align-items:center; gap:10px; min-width:0;}
.op-endpoint-row .method{margin:0;}
.op-endpoint-url{
  flex:1; min-width:0; overflow-x:auto; white-space:nowrap; font-size:13.2px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:6px 10px;
}
.op-endpoint-note{font-size:12.4px; color:var(--muted); margin:10px 0 0;}
.op-auth-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px 13px;
}
.op-auth-row code{background:var(--surface); }
.op-auth-note,.op-auth{font-size:12.6px; color:var(--muted); margin:0;}

/* --- параметры: имя слева, тип и описание справа (как в WB) ------------- */
.params{border-left:1px solid var(--border); margin:0 0 8px;}
.param{
  position:relative; display:grid; grid-template-columns:minmax(110px,180px) minmax(0,1fr);
  gap:6px 16px; padding:12px 0 12px 18px;
}
.param + .param{border-top:1px solid var(--border);}
.param::before{content:""; position:absolute; left:0; top:23px; width:11px; border-top:1px solid var(--border);}
.param-key{display:flex; flex-direction:column; align-items:flex-start; gap:3px;}
.param-name{font-size:13.4px; font-weight:600; background:none; border:none; padding:0;}
.param-req{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--danger); font-weight:700;}
.param-in{font-size:10.5px; color:var(--faint);}
.param-body{min-width:0;}
.param-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px;}
.param-type,.param-constraint{font-family:var(--mono); font-size:11.5px; color:var(--muted);}
.param-constraint{background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:1px 6px;}
.param-desc{font-size:13.4px; color:var(--muted);}
.param-desc p:last-child{margin-bottom:0;}
.param-note{font-size:12.4px; color:var(--muted); margin-top:4px;}

/* --- ответы: свёрнутые строки со статусом ------------------------------ */
.resps{display:grid; gap:8px;}
.resp{
  border:1px solid var(--border); border-left:3px solid var(--faint);
  border-radius:9px; overflow:hidden; background:var(--surface);
}
.resp-ok{border-left-color:var(--ok);}
.resp-warn{border-left-color:var(--warn);}
.resp-danger{border-left-color:var(--danger);}
.resp-neutral{border-left-color:var(--faint);}
.resp > summary{
  display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; list-style:none;
  font-size:13.4px;
}
.resp > summary::-webkit-details-marker{display:none;}
.resp > summary::after{content:"⌄"; margin-left:auto; color:var(--faint); transition:transform .12s ease;}
.resp[open] > summary::after{transform:rotate(180deg);}
.resp > summary .status{margin:0;}
.resp-title{color:var(--muted); min-width:0;}
.resp-body{padding:6px 16px 14px; border-top:1px solid var(--border);}

/* --- дерево полей: верхний уровень открыт, вложенные — по клику -------- */
.fields{list-style:none; margin:0; padding:0;}
.fields .fields{margin-top:8px; padding-left:14px; border-left:1px dotted var(--border);}
.field{margin:0; padding:10px 0;}
.field + .field{border-top:1px solid var(--border);}
.field-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.field-name{font-size:13.2px; font-weight:600; background:none; border:none; padding:0;}
.field-type{font-family:var(--mono); font-size:11.5px; color:var(--muted);}
.field-ref{font-size:11px; color:var(--primary); background:var(--primary-weak); border:none; padding:1px 6px; border-radius:5px;}
.field-req{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--danger); font-weight:700;}
.field-desc{font-size:13.2px; color:var(--muted); margin-top:3px;}
.field-desc p:last-child{margin-bottom:0;}
.field-note{font-size:12.2px; color:var(--faint); margin-top:3px;}
.field-more > summary{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  font-size:11.5px; font-weight:600; color:var(--primary); background:var(--primary-weak);
  border-radius:6px; padding:2px 9px; margin-top:6px;
}
.field-more > summary::-webkit-details-marker{display:none;}
.field-more > summary::before{content:"+"; font-weight:700;}
.field-more[open] > summary::before{content:"−";}

.ref-required{font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--accent); font-weight:700;}
.ref-enum,.ref-constraints{font-size:12.6px; color:var(--muted); margin:0 0 6px;}
.ref-schema-name{font-size:12.4px; color:var(--muted); margin:8px 0;}
.ref-schema-desc{font-size:13.2px; color:var(--muted); margin:0 0 8px;}
.ref-array-marker{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin:2px 0 6px;}
.ref-capped{font-size:12.6px; color:var(--muted); font-style:italic;}

/* --- правая колонка: примеры ------------------------------------------- */
.ref-samples{border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface);}
.ref-samples-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700;
  padding:10px 14px 0;
}
.ref-samples-tabs{display:flex; flex-wrap:wrap; gap:2px; padding:8px 8px 0;}
.ref-samples-tab{
  font:inherit; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer;
  background:none; border:1px solid transparent; border-radius:7px; padding:4px 10px;
}
.ref-samples-tab:hover{color:var(--text); background:var(--hover);}
.ref-samples-tab.is-on{color:var(--text); background:var(--surface-2); border-color:var(--border);}
.ref-samples-tab .status{font-size:11px; margin:0;}
.ref-samples-meta{font-size:11.5px; color:var(--faint); padding:8px 14px 0;}
.ref-samples-meta code{background:none; border:none; padding:0;}
.ref-samples-panes{padding:8px;}
.ref-samples-pane{display:none;}
.ref-samples-pane.is-on{display:block;}
.ref-samples-pane pre{
  margin:0; border-radius:9px; max-height:420px; overflow:auto; font-size:12.2px;
}
.ref-example-summary{font-size:12.4px; color:var(--muted); margin:0 4px 6px;}
.ref-example-case{color:var(--text); font-weight:600;}
.ref-sample-json{position:relative; margin-bottom:8px;}
.ref-sample-json:last-child{margin-bottom:0;}
.copy-btn{
  font:inherit; font-size:11px; font-weight:600; color:var(--muted); cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:3px 9px;
}
.copy-btn:hover{color:var(--text); background:var(--hover);}
.copy-pre{position:absolute; top:7px; right:7px; opacity:0; transition:opacity .12s ease;}
.ref-sample-json:hover .copy-pre,.copy-pre:focus-visible{opacity:1;}

.ref-try-wrap{border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface);}
.ref-try-wrap > summary{
  padding:10px 14px; cursor:pointer; list-style:none; font-size:13px; font-weight:600;
}
.ref-try-wrap > summary::-webkit-details-marker{display:none;}
.ref-try-wrap .ref-try{border:none; border-radius:0; border-top:1px solid var(--border);}
.ref-try-key{padding:12px 14px 0;}
.ref-try-key .key-status{font-size:12px;}

.ref-try{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); padding:14px 16px;}
.ref-try-fields{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.ref-try-field{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted);}
.ref-try-field input{font:inherit; font-size:13px; padding:6px 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); min-width:150px;}
.ref-try-body-field{width:100%;}
.ref-try-body{font:inherit; font-family:var(--mono); font-size:12.6px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); resize:vertical; width:100%;}
.ref-try-actions{display:flex; align-items:center; gap:12px; margin-top:4px;}
.ref-try-meta{font-size:12.6px; color:var(--muted);}
.ref-try-result{margin:12px 0 0; max-height:300px;}
.ref-try-hint{font-size:11.8px; color:var(--faint); margin:8px 0 0;}

@media (max-width:1240px){
  /* Три колонки живут только на широком экране: ниже примеры уходят под
     описание, иначе колонка с параметрами сжимается до нечитаемого. */
  .op-grid{grid-template-columns:1fr;}
  .op-side{position:static; max-height:none; overflow:visible;}
  .op{padding:0 24px 48px;}
  .ref-index{padding:0 24px 48px;}
  .ref-intro{padding:0 24px 8px;}
}

.method-get{background:var(--info-bg); color:var(--info);}
.method-post{background:var(--ok-bg); color:var(--ok);}
.method-put,.method-patch{background:var(--warn-bg); color:var(--warn);}
.method-delete{background:var(--danger-bg); color:var(--danger);}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:960px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center;}
  nav.sitenav{
    transform:translateX(-100%); transition:transform .15s ease; box-shadow:var(--shadow); z-index:15;
  }
  nav.sitenav.open{transform:translateX(0);}
  main.content{margin-left:0; padding:80px 20px 60px;}
  main.content.full .content-pad{padding:24px 16px 0;}
  .cards{grid-template-columns:1fr;}
  .page-toc ul{columns:1;}
  .ref-intro{padding:0;}
  .ref-index{padding:0 0 40px;}
  .op{padding:0 0 40px;}
  .ref-index-row{grid-template-columns:56px minmax(0,1fr); gap:6px 10px;}
  .ref-index-summary{grid-column:2;}
  .op-head h1{font-size:23px;}
}