/* ============================================================
   Шаблоны.doc — руководство. Техническая документация.
   Шрифты IBM Plex (self-hosted). Акцент — синий Word #2B579A,
   вторичный — жёлтый 1С #FFD500.
   ============================================================ */

/* ---------- Шрифты ---------- */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/plex-sans-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/plex-sans-400-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/plex-sans-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url(fonts/plex-sans-600-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/plex-sans-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:700; font-display:swap;
  src:url(fonts/plex-sans-700-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/plex-mono-400-latin.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(fonts/plex-mono-500-latin.woff2) format('woff2'); }

/* ---------- Токены ---------- */
:root {
  --paper:#FFFFFF;
  --ink:#1A1D21;
  --muted:#5C6570;
  --faint:#8A929C;
  --hairline:#E6E8EC;
  --wash:#F6F8FB;
  --wash2:#EEF2F8;
  --accent:#2B579A;          /* синий Word */
  --accent-dk:#1F3F72;
  --accent-soft:#E7EEF8;
  --yellow:#FFD500;          /* жёлтый 1С */
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'Consolas', monospace;
  --topbar-h:56px;
  --sidebar-w:300px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none !important;} }

body {
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.skip {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 6px 0;
}
.skip:focus { left:0; }

/* ---------- Верхняя панель ---------- */
.topbar {
  position:sticky; top:0; z-index:40;
  height:var(--topbar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 20px;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:600; }
.brand:hover { text-decoration:none; }
.brand-mark {
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:6px;
  background:var(--accent); color:#fff;
  font-weight:700; font-size:18px; line-height:1;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);
}
.brand-text { display:flex; flex-direction:column; line-height:1.1; font-size:16px; }
.brand-sub {
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.product-link {
  margin-left:auto;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--muted); white-space:nowrap;
  padding:7px 12px; border:1px solid var(--hairline); border-radius:6px;
}
.product-link:hover { color:var(--accent); border-color:var(--accent); text-decoration:none; background:var(--accent-soft); }

.burger {
  display:none;
  width:38px; height:38px; border:1px solid var(--hairline); border-radius:8px;
  background:var(--paper); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.burger span { display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Раскладка ---------- */
.layout { display:flex; align-items:flex-start; }

.sidebar {
  position:sticky; top:var(--topbar-h);
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  height:calc(100vh - var(--topbar-h));
  overflow-y:auto;
  border-right:1px solid var(--hairline);
  background:var(--wash);
  padding:22px 14px 60px;
}
.scrim { display:none; }

/* дерево навигации */
.tree-section {
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  padding:16px 12px 6px;
}
.tree-section:first-child { padding-top:2px; }
.tree-list, .tree-sub { list-style:none; }
.tree-list a, .tree-sub a {
  display:block; padding:6px 12px; border-radius:7px;
  color:var(--ink); font-size:14.5px; line-height:1.35;
  border-left:2px solid transparent;
}
.tree-list a:hover { background:var(--accent-soft); text-decoration:none; }
.tree-list a.active {
  background:#fff; color:var(--accent-dk); font-weight:600;
  border-left:2px solid var(--accent);
  box-shadow:0 1px 2px rgba(27,61,114,.08);
}
.tree-sub { margin:2px 0 6px 12px; border-left:1px solid var(--hairline); padding-left:6px; }
.tree-sub a { font-size:13.5px; color:var(--muted); padding:5px 10px; }
.tree-sub a:hover { color:var(--ink); }
.tree-sub a.active { color:var(--accent-dk); }

/* ---------- Контент ---------- */
.content { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:calc(100vh - var(--topbar-h)); }
.doc { width:100%; max-width:840px; margin:0 auto; padding:34px 40px 30px; flex:1 0 auto; }

.crumbs {
  font-family:var(--mono); font-size:12px; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:16px;
}
.crumbs .sep { color:var(--faint); }
.crumbs .here { color:var(--ink); }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--accent); }

.doc h1 {
  font-size:clamp(27px,4vw,36px); font-weight:700; line-height:1.15;
  letter-spacing:-.015em; color:var(--ink);
  padding-bottom:18px; margin-bottom:8px;
  border-bottom:3px solid var(--yellow);
  display:inline-block;
}

/* оглавление страницы */
.page-toc {
  background:var(--wash); border:1px solid var(--hairline); border-radius:10px;
  padding:16px 20px; margin:22px 0 6px;
}
.page-toc-title {
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.page-toc ul { list-style:none; }
.page-toc li { line-height:1.5; }
.page-toc li.toc-h3 { padding-left:18px; font-size:14px; }
.page-toc li a { color:var(--accent-dk); font-size:14.5px; }

/* тело статьи */
.body { padding-top:14px; }
.body p { margin:0 0 15px; }
.body h2 {
  font-size:23px; font-weight:600; line-height:1.25; letter-spacing:-.01em;
  margin:34px 0 12px; padding-top:10px; color:var(--ink);
  border-top:1px solid var(--hairline); padding-top:20px;
}
.body h3 { font-size:18.5px; font-weight:600; margin:26px 0 10px; color:var(--ink); }
.body h4 { font-size:16px; font-weight:600; margin:20px 0 8px; }
.body h2:first-child, .body h3:first-child { margin-top:0; border-top:0; padding-top:0; }

.body ul, .body ol { margin:0 0 16px; padding-left:24px; }
.body li { margin:5px 0; }
.body li > ul, .body li > ol { margin:5px 0 6px; }

.body a.ext-link { color:var(--accent); }
.body a.ext-link::after {
  content:"\2197"; font-size:.8em; margin-left:2px;
  color:var(--faint); vertical-align:baseline;
}

.body b, .body strong { font-weight:600; }
.body code, .body tt {
  font-family:var(--mono); font-size:.88em;
  background:var(--wash2); padding:1px 5px; border-radius:4px;
}
.body dl { margin:0 0 16px; }
.body dd { margin:0 0 8px 20px; color:var(--muted); }

.body hr { border:0; border-top:1px solid var(--hairline); margin:26px 0; }

/* определения-строки, часто «Результат — …» */
.body ul li b, .body ul li strong { color:var(--accent-dk); }

/* красный текст-предупреждение из вики (span style color:#ff0000) — мягкая плашка */
.body span[style*="#ff0000"], .body span[style*="#FF0000"], .body span[style*="red"] {
  color:#8a1c1c !important;
  background:#fdeeee; border-left:3px solid #d64545;
  padding:2px 8px; border-radius:0 4px 4px 0;
  display:inline-block;
}

/* ---------- Изображения / скриншоты ---------- */
.shot { margin:18px 0 22px; }
.shot-thumb {
  display:inline-block; max-width:100%;
  border:1px solid var(--hairline); border-radius:10px; overflow:hidden;
  background:#fff; box-shadow:0 1px 3px rgba(26,29,33,.07);
  cursor:zoom-in; line-height:0;
}
.shot-thumb img { display:block; max-width:100%; height:auto; }
.shot-thumb:hover { border-color:var(--accent); box-shadow:0 4px 14px rgba(43,87,154,.16); }
.shot figcaption {
  font-size:13px; color:var(--muted); margin-top:8px; line-height:1.4;
  font-style:italic;
}

/* лайтбокс на чистом CSS (:target) */
.lightbox {
  position:fixed; inset:0; z-index:80;
  display:none; align-items:center; justify-content:center;
  background:rgba(20,26,36,.86); padding:28px; cursor:zoom-out;
}
.lightbox:target { display:flex; }
.lightbox img {
  max-width:96vw; max-height:92vh; width:auto; height:auto;
  border-radius:6px; box-shadow:0 12px 48px rgba(0,0,0,.5);
}

/* ---------- Таблицы ---------- */
.body .table-wrap { overflow-x:auto; margin:18px 0 22px; }
.body table, .body .doc-table {
  border-collapse:collapse; width:100%; font-size:15px;
  border:1px solid var(--hairline); border-radius:8px; overflow:hidden;
}
.body th, .body td { border:1px solid var(--hairline); padding:9px 13px; text-align:left; vertical-align:top; }
.body thead th, .body th { background:var(--wash2); font-weight:600; }
.body tbody tr:nth-child(even) td { background:var(--wash); }

/* ---------- Пейджер ---------- */
.pager {
  display:flex; gap:14px; margin-top:44px; padding-top:22px;
  border-top:1px solid var(--hairline);
}
.pager > span { flex:1; }
.pager a {
  flex:1; display:flex; flex-direction:column; gap:3px;
  padding:14px 18px; border:1px solid var(--hairline); border-radius:10px;
  color:var(--ink); background:var(--paper); transition:.15s;
}
.pager a:hover { border-color:var(--accent); background:var(--accent-soft); text-decoration:none; }
.pager-next { text-align:right; align-items:flex-end; }
.pager-dir { font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }
.pager-title { font-weight:600; font-size:15px; color:var(--accent-dk); }

/* ---------- Подвал ---------- */
.foot {
  flex:0 0 auto;
  border-top:1px solid var(--hairline);
  padding:22px 40px; margin-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  background:var(--wash);
}
.foot a { color:var(--muted); }
.foot a:hover { color:var(--accent); }

/* ---------- Адаптив ---------- */
@media (max-width:900px) {
  .doc { padding:26px 22px 24px; }
  .burger { display:flex; }
  .sidebar {
    position:fixed; top:var(--topbar-h); left:0; z-index:35;
    height:calc(100vh - var(--topbar-h));
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:2px 0 16px rgba(0,0,0,.12);
    width:min(84vw,320px); flex-basis:min(84vw,320px);
  }
  body.nav-open .sidebar { transform:translateX(0); }
  body.nav-open .scrim {
    display:block; position:fixed; inset:var(--topbar-h) 0 0 0; z-index:34;
    background:rgba(20,26,36,.4);
  }
  .foot { padding:22px; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .product-link { font-size:0; padding:8px; }
  .product-link::before { content:"\2197"; font-size:15px; }
  .doc { padding:22px 16px 20px; }
  .pager { flex-direction:column; }
  .pager > span { display:none; }
}