/* Документация: каркас в три колонки (меню разделов · статья · навигация по статье)
   и блоки статьи. Размеры и цвета — только переменные из shared.css. */

.docs-body{background:var(--bg2)}

/* ── каркас ────────────────────────────────────────────────────────────── */
.docs-layout{display:grid;grid-template-columns:272px minmax(0,1fr) 220px;max-width:1320px;margin:0 auto;padding:75px 24px 0}
.docs-layout.no-toc{grid-template-columns:272px minmax(0,1fr)}
.docs-layout.no-toc .docs-toc{display:none}
.docs-side{position:sticky;top:75px;align-self:start;height:calc(100vh - 75px);overflow-y:auto;overscroll-behavior:contain;padding:24px 16px 48px 0;border-right:1px solid var(--border)}
.docs-side-toggle{display:none}
.docs-main{min-width:0;padding:28px clamp(24px,4vw,56px) 80px}
.docs-main > .crumbs{margin-bottom:22px}
.docs-toc{position:sticky;top:75px;align-self:start;max-height:calc(100vh - 75px);overflow-y:auto;padding:36px 0 40px}

/* ── меню: уровень 1 — раздел, уровень 2 — статья ──────────────────────── */
.docs-nav{display:flex;flex-direction:column;gap:2px;line-height:1.45}
.docs-icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor}
.docs-nav-section{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-size:var(--fs-md);font-weight:700;color:var(--heading);user-select:none;transition:background .15s}
.docs-nav-section .docs-icon{color:var(--text3)}
.docs-nav-name{flex:1;min-width:0}
.docs-chevron{width:14px;height:14px;flex-shrink:0;fill:none;stroke:var(--text3);transition:transform .15s}
/* шеврон вниз — раздел, в котором читатель; у остальных вправо: клик ведёт на первую статью */
.docs-nav-group.is-current > .docs-nav-section .docs-chevron{transform:rotate(90deg)}
.docs-nav-section:hover{background:var(--bg3)}
.docs-nav-group.is-current > .docs-nav-section .docs-icon{color:var(--accent)}
.docs-nav-section.is-soon{cursor:default;font-weight:600;color:var(--text3)}
.docs-nav-section.is-soon:hover{background:none}
/* статьи раздела — со сдвигом и направляющей линией: видно, чьи они */
.docs-nav-pages{display:flex;flex-direction:column;gap:1px;margin:2px 0 10px 19px;padding-left:10px;border-left:1px solid var(--border2)}
.docs-nav-link{position:relative;padding:6px 10px;border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text2);transition:color .15s,background .15s}
.docs-nav-link:hover{color:var(--heading);background:var(--bg3)}
.docs-nav-link.active{color:var(--accent);background:var(--accent-light);font-weight:600}
.docs-nav-link.active::before{content:'';position:absolute;left:-11px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--accent)}

/* пометка «скоро»: и в меню, и на карточках разделов */
.docs-soon{flex-shrink:0;padding:1px 8px;border:1px solid var(--border2);border-radius:999px;font-size:var(--fs-xs);font-weight:500;line-height:1.6;color:var(--text3)}

/* ── навигация по статье: справа на широких экранах, в теле — на узких ── */
.docs-toc-title{margin-bottom:10px;font-size:var(--fs-xs);font-weight:600;color:var(--text3)}
.docs-toc-list{display:flex;flex-direction:column;border-left:1px solid var(--border)}
.docs-toc-list a{margin-left:-1px;padding:5px 0 5px 12px;border-left:2px solid transparent;font-size:var(--fs-sm);line-height:1.45;color:var(--text2);transition:color .15s,border-color .15s}
.docs-toc-list a:hover{color:var(--heading)}
.docs-toc-list a.active{color:var(--accent);border-left-color:var(--accent)}
.doc-toc-inline{display:none}

/* ── типографика статьи ────────────────────────────────────────────────── */
.doc{max-width:760px}
.doc h1{font-size:var(--fs-d5);font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:12px}
.doc-lead{margin-bottom:24px;font-size:var(--fs-lg);line-height:1.6;color:var(--text2)}
.doc h2{position:relative;margin:56px 0 14px;font-size:var(--fs-d2);font-weight:800;letter-spacing:-.02em;line-height:1.25;scroll-margin-top:96px}
.doc h3{margin:28px 0 10px;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;line-height:1.35;scroll-margin-top:96px}
.doc p{margin:0 0 14px;line-height:1.7}
.doc > ul,.doc > ol,.doc-note ul{margin:0 0 16px;padding-left:22px}
.doc > ul li,.doc > ol li,.doc-note li{margin-bottom:6px;line-height:1.65}
.doc a:not([class]),.doc-foot-text a:not([class]),.doc-alt-card a:not([class]){color:var(--accent);box-shadow:inset 0 -1px 0 var(--accent-border);transition:box-shadow .15s}
.doc a:not([class]):hover,.doc-foot-text a:not([class]):hover,.doc-alt-card a:not([class]):hover{box-shadow:inset 0 -2px 0 var(--accent)}
.doc b,.doc strong{color:var(--heading);font-weight:700}
.doc code,.doc-foot code{padding:1px 6px;border-radius:4px;background:var(--bg3);font-family:var(--mono);font-size:var(--fs-sm);color:var(--heading)}
.doc kbd{display:inline-block;padding:0 6px;border:1px solid var(--border2);border-bottom-width:2px;border-radius:4px;background:var(--bg2);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.7;color:var(--heading)}
.doc-anchor{margin-left:8px;font-weight:500;color:var(--text3);opacity:0;transition:opacity .15s}
.doc h2:hover .doc-anchor,.doc h3:hover .doc-anchor,.doc-anchor:focus{opacity:1}

/* надпись интерфейса — кнопка, пункт меню, поле: как в кабинете, дословно */
.ui{display:inline;padding:1px 6px;border:1px solid var(--border);border-radius:4px;background:var(--bg);font-weight:600;color:var(--heading);white-space:nowrap;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* образцы ввода: что можно вставить в поле */
.doc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.doc-chip{padding:2px 10px;border:1px solid var(--border2);border-radius:999px;background:var(--bg2);font-family:var(--mono);font-size:var(--fs-xs);line-height:1.8;color:var(--heading)}
.doc-chip.is-no{color:var(--text3);text-decoration:line-through}

/* ── «где в кабинете» и пометки ────────────────────────────────────────── */
.doc-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 20px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);font-size:var(--fs-md);line-height:1.6}
.doc-where-label{margin-right:4px;color:var(--text3)}
.doc-where i{font-style:normal;color:var(--text3)}
.doc-tag{display:inline-flex;align-items:center;vertical-align:middle;padding:1px 9px;border:1px solid var(--border2);border-radius:999px;font-size:var(--fs-xs);font-weight:600;line-height:1.6;color:var(--text2);letter-spacing:0}
.doc-tag.is-paid{border-color:var(--accent-border);background:var(--accent-light);color:var(--accent)}
.doc-tag.is-ai{border-color:color-mix(in srgb,var(--green) 30%,transparent);background:color-mix(in srgb,var(--green) 7%,var(--bg2));color:var(--green)}
.doc h2 .doc-tag{margin-left:10px}

/* навигация по статье в теле: только на узких экранах */
.doc-toc-inline-title{width:100%;font-size:var(--fs-xs);font-weight:600;color:var(--text3)}

/* ── способы: карточки-развилки в начале статьи ────────────────────────── */
.doc-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 24px}
.doc-way{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);transition:border-color .15s,box-shadow .15s}
.doc-way:hover{border-color:var(--accent-border);box-shadow:var(--shadow)}
.doc-way b{font-size:var(--fs-base)}
.doc-way span{font-size:var(--fs-sm);line-height:1.5;color:var(--text2)}

/* ── место под скриншот ────────────────────────────────────────────────── */
.doc-shot{margin:20px 0 24px}
.doc-shot-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:16/10;padding:20px;border:1.5px dashed var(--border2);border-radius:var(--r);background:repeating-linear-gradient(135deg,var(--bg) 0 12px,var(--bg2) 12px 24px);text-align:center}
.doc-shot-frame svg{width:26px;height:26px;fill:none;stroke:var(--text3)}
.doc-shot-what{max-width:440px;font-size:var(--fs-md);font-weight:600;line-height:1.5;color:var(--text2)}
.doc-shot-id{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text3)}
.doc-shot img{width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.doc-shot.is-modal .doc-shot-frame,.doc-shot.is-modal img{max-width:560px}
.doc-shot.is-modal .doc-shot-frame{aspect-ratio:4/3}
/* скриншот внутри шага: меньше и ближе к тексту шага */
.doc-shot.is-step{margin:10px 0 4px}
.doc-shot.is-step .doc-shot-frame,.doc-shot.is-step img{max-width:520px}
.doc-shot.is-step .doc-shot-frame{aspect-ratio:16/9;padding:16px}
.doc-shot.is-narrow .doc-shot-frame,.doc-shot.is-narrow img{max-width:380px}
.doc-shot.is-step .doc-shot-what{font-size:var(--fs-sm)}

/* ── шаги по порядку ───────────────────────────────────────────────────── */
.doc-steps{margin:10px 0 24px;padding:0;list-style:none;counter-reset:step}
.doc-steps > li{position:relative;padding:0 0 22px 44px;line-height:1.65;counter-increment:step}
.doc-steps > li::before{content:counter(step);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bg3);font-size:var(--fs-sm);font-weight:700;line-height:1;color:var(--heading)}
.doc-steps > li::after{content:'';position:absolute;left:14px;top:34px;bottom:6px;width:1px;background:var(--border2)}
.doc-steps > li:last-child{padding-bottom:0}
.doc-steps > li:last-child::after{display:none}

/* ── врезки ────────────────────────────────────────────────────────────── */
.doc-note{margin:16px 0 22px;padding:12px 16px;border:1px solid var(--accent-border);border-left-width:3px;border-radius:var(--r-sm);background:var(--accent-light);font-size:var(--fs-md);line-height:1.6}
.doc-note p:last-child,.doc-note ul:last-child{margin-bottom:0}
.doc-note-title{color:var(--heading);font-weight:700}
.doc-note.is-warn{border-color:color-mix(in srgb,var(--yellow) 40%,transparent);background:color-mix(in srgb,var(--yellow) 8%,var(--bg2))}
.doc-note.is-danger{border-color:color-mix(in srgb,var(--red) 35%,transparent);background:color-mix(in srgb,var(--red) 5%,var(--bg2))}

/* ── таблицы и перечни ─────────────────────────────────────────────────── */
.doc-table-wrap{margin:12px 0 22px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r)}
.doc-table{width:100%;border-collapse:collapse;font-size:var(--fs-md);line-height:1.55}
.doc-table th{padding:9px 14px;border-bottom:1px solid var(--border);background:var(--bg);text-align:left;font-size:var(--fs-sm);font-weight:600;color:var(--text2);white-space:nowrap}
.doc-table td{padding:10px 14px;border-top:1px solid var(--border);vertical-align:top;color:var(--text2)}
.doc-table tr:first-child td{border-top:none}
.doc-table td:first-child{font-weight:600;color:var(--heading)}
.doc-table code{white-space:nowrap}
.doc-table td code + code{margin-left:4px}
/* строка-подзаголовок внутри таблицы: делит длинный перечень на группы */
.doc-table tr.doc-table-group td{padding:7px 14px;background:var(--bg);font-size:var(--fs-xs);font-weight:600;color:var(--text3)}
.doc-fields{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);margin:12px 0 22px;overflow:hidden;border:1px solid var(--border);border-radius:var(--r);font-size:var(--fs-md);line-height:1.55}
.doc-fields dt,.doc-fields dd{padding:10px 14px;border-top:1px solid var(--border)}
.doc-fields dt:first-of-type,.doc-fields dt:first-of-type + dd{border-top:none}
.doc-fields dt{background:var(--bg);font-weight:600;color:var(--heading)}
.doc-fields dd{color:var(--text2)}

/* ── футер статьи: отдельные карточки под текстом, не часть статьи ─────── */
.doc-foot{max-width:760px;margin-top:72px;padding-top:40px;border-top:1px solid var(--border2);display:flex;flex-direction:column;gap:16px}
.doc-foot-block{--foot-pad:24px;overflow:hidden;padding:22px var(--foot-pad) var(--foot-pad);border:1px solid var(--border);border-radius:var(--r);background:var(--bg2)}
.doc-foot-title{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v16H5.5A1.5 1.5 0 0 1 4 18.5z'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H13v16h5.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E");display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:var(--fs-lg);font-weight:700;line-height:1.3;color:var(--heading)}
.doc-foot-title::before{content:'';flex:none;width:20px;height:20px;background:var(--accent);-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.doc-foot-block:has(.doc-alt) .doc-foot-title{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E")}
.doc-foot-block:has(.doc-foot-text) .doc-foot-title{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.7M12 16.8v.01'/%3E%3C/svg%3E")}
.doc-foot-text{margin:0;font-size:var(--fs-md);line-height:1.65;color:var(--text2)}
.doc-alt{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.doc-alt-card{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:var(--r);background:var(--bg);font-size:var(--fs-md);line-height:1.6;color:var(--text2)}
.doc-alt-kind{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--text3)}
.doc-prompt{display:block;padding-left:14px;border-left:2px solid var(--accent);font-size:var(--fs-base);line-height:1.6;color:var(--heading)}
.doc-alt-card p{margin:0}
.doc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:16px}
.doc-cta .btn-primary{height:42px;padding:0 20px;font-size:var(--fs-md)}
.doc-cta-link{font-size:var(--fs-md);font-weight:600;color:var(--accent);transition:color .15s}
.doc-cta-link::after{content:' →'}
.doc-cta-link:hover{color:var(--accent-h)}
.doc-mcp{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;margin:0 0 32px;padding:22px 24px 24px;border:1px solid var(--accent-border);border-radius:var(--r);background:var(--accent-light)}
.doc-mcp-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--accent-border);border-radius:var(--r);background:var(--bg2)}
.doc-mcp-icon::before{content:'';width:22px;height:22px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E") center/contain no-repeat}
.doc .doc-mcp-title{margin:0 0 6px;font-size:var(--fs-lg);font-weight:700;line-height:1.35;color:var(--heading)}
.doc .doc-mcp-body p:not(.doc-mcp-title){margin:0;font-size:var(--fs-md);line-height:1.65;color:var(--text2)}
.doc-related{display:flex;flex-direction:column;margin:0 calc(var(--foot-pad) * -1) calc(var(--foot-pad) * -1)}
.doc-related a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:2px;align-items:center;padding:14px var(--foot-pad);border-top:1px solid var(--border);transition:background .15s}
.doc-related a::after{content:'→';grid-column:2;grid-row:1 / span 2;font-size:var(--fs-lg);color:var(--text3);transition:transform .15s,color .15s}
.doc-related a:hover{background:var(--bg)}
.doc-related a:hover::after{color:var(--accent);transform:translateX(3px)}
.doc-related b{grid-column:1;font-size:var(--fs-base);font-weight:700;color:var(--heading)}
.doc-related span{grid-column:1;font-size:var(--fs-sm);line-height:1.5;color:var(--text2)}
.docs-pager-link{border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);transition:border-color .15s,box-shadow .15s}
.docs-pager-link:hover{border-color:var(--accent-border);box-shadow:var(--shadow)}
.docs-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.docs-pager-link{display:flex;flex-direction:column;gap:4px;padding:16px 20px}
.docs-pager-link.is-next{text-align:right}
.docs-pager-dir{font-size:var(--fs-sm);color:var(--text3)}
.docs-pager-link:hover .docs-pager-dir{color:var(--accent)}
.docs-pager-title{font-size:var(--fs-base);font-weight:700;color:var(--heading)}

/* ── обзор раздела: порядок работы ─────────────────────────────────────── */
.doc .doc-flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin:16px 0 28px;padding:22px 22px 20px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg2);list-style:none;counter-reset:flow}
.doc .doc-flow > li{position:relative;margin:0;padding-right:18px;counter-increment:flow}
.doc-flow > li::before{content:counter(flow);position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin-bottom:12px;border:1px solid var(--accent-border);border-radius:50%;background:var(--accent-light);font-size:var(--fs-sm);font-weight:700;line-height:1;color:var(--accent)}
.doc-flow > li:not(:last-child)::after{content:'';position:absolute;top:16px;left:44px;right:12px;height:1px;background:var(--border2)}
.doc-flow-name{display:block;margin-bottom:4px;font-size:var(--fs-base);font-weight:700;line-height:1.35;color:var(--heading)}
a.doc-flow-name{transition:color .15s}
a.doc-flow-name:hover{color:var(--accent)}
.doc-flow-desc{display:block;font-size:var(--fs-sm);line-height:1.5;color:var(--text2)}

/* ── узкие экраны ──────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .docs-layout,.docs-layout.no-toc{grid-template-columns:252px minmax(0,1fr)}
  .docs-toc{display:none}
  .doc-toc-inline{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0 0 24px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r)}
  .doc-toc-inline a{padding:2px 10px;border-radius:999px;background:var(--bg3);font-size:var(--fs-sm);color:var(--heading);transition:background .15s}
  .doc-toc-inline a:hover{background:var(--accent-light);color:var(--accent)}
  .doc-ways{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .docs-layout,.docs-layout.no-toc{display:block;padding:75px 16px 0}
  .docs-side{position:static;height:auto;overflow:visible;padding:16px 0 0;border-right:none}
  .docs-side-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--bg);font-family:var(--display);font-size:var(--fs-md);font-weight:600;color:var(--heading);cursor:pointer}
  .docs-side-toggle svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor}
  .docs-side-panel{display:none;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:var(--r)}
  .docs-side.open .docs-side-panel{display:block}
  .docs-main{padding:20px 0 64px}
  .doc h1{font-size:var(--fs-d4)}
  .doc h2{margin-top:44px;font-size:var(--fs-d1)}
  .doc-alt,.docs-pager{grid-template-columns:minmax(0,1fr)}
  .doc .doc-flow{grid-auto-flow:row;row-gap:20px;padding:20px}
  .doc .doc-flow > li{min-height:32px;padding:4px 0 0 46px}
  .doc-flow > li::before{position:absolute;top:0;left:0;margin:0}
  .doc-flow > li:not(:last-child)::after{top:40px;bottom:-16px;left:16px;right:auto;width:1px;height:auto}
  .doc-mcp{grid-template-columns:minmax(0,1fr)}
  .doc-mcp-icon{margin-bottom:14px}
  .doc-fields{grid-template-columns:minmax(0,1fr)}
  .doc-fields dd{border-top:none;padding-top:0;background:var(--bg)}
  .doc-fields dt{padding-bottom:4px}
  .doc-foot{margin-top:56px;padding-top:28px}
  .doc-foot-block{--foot-pad:16px;padding:18px var(--foot-pad) var(--foot-pad)}
  .doc-shot-frame{aspect-ratio:4/3}
}