/* ------------------------------------------------------------------ *
 * TONCO docs — custom style overrides.
 *
 * This file is copied into the build by scripts/convert.py and loaded
 * AFTER the mdBook theme, so anything here wins. Edit freely.
 *
 * The active theme is "light" (set in book.toml). mdBook exposes all
 * colours as CSS variables on the theme root, so the easiest way to
 * recolour is to override those variables. A few common ones:
 *
 *   --bg                 page background
 *   --fg                 body text
 *   --sidebar-bg         left navigation background
 *   --sidebar-fg         left navigation text
 *   --links              link colour
 *   --inline-code-color  inline `code`
 *   --content-max-width  text column width
 *
 * Example (uncomment / tweak):
 *
 *   .light {
 *     --links: #009269;          // TONCO teal
 *     --sidebar-bg: #f9fafa;
 *   }
 *
 *   .content { max-width: 900px; }   // wider text column
 * ------------------------------------------------------------------ */

/* Put your overrides below this line. */

/* ------------------------------------------------------------------ *
 * Body font: Inter (same as the GitBook reference). Self-hosted
 * variable woff2, @font-face lives in theme/fonts/fonts.css (which
 * also suppresses mdBook's bundled Open Sans). Code blocks keep the
 * mdBook mono stack. Inter wants ligatures + contextual alternates.
 * ------------------------------------------------------------------ */
html {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Language dropdown = FIRST breadcrumb crumb (как в рефе: селектор варианта
   сайта висит на «TONCO Docs EN»). Открывается по hover/фокусу; на таче
   первый тап открывает меню (custom.js вешает .open), клик мимо закрывает. */
.bc-dropdown { position: relative; display: inline-block; }
.bc-menu {                      /* общий для .bc-dropdown и .sb-lang */
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  padding-top: 0.4rem;          /* мостик, чтобы hover не рвался по пути к меню */
}
.bc-dropdown:hover .bc-menu,
.bc-dropdown:focus-within .bc-menu,
.bc-dropdown.open .bc-menu { display: block; }
.bc-menu-card {
  min-width: 16rem;
  padding: 0.4rem;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
/* Пункты карточки — общие для breadcrumb-дропдауна, кнопки в сайдбаре и
   «⋯»-меню шапки (ссылки и кнопки). Префикс .content у первого селектора
   обязателен: перебивает `.content a` (teal + underline) независимо от
   порядка правил. */
.content .bc-menu-card a,
.sb-lang .bc-menu-card a,
.hdr-more .bc-menu-card a,
.hdr-more .bc-menu-card button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 1.4rem;
  color: var(--fg);
  text-decoration: none;
}
.content .bc-menu-card a:hover,
.sb-lang .bc-menu-card a:hover,
.hdr-more .bc-menu-card a:hover,
.hdr-more .bc-menu-card button:hover {
  background: var(--tint-hover-bg);
  text-decoration: none;
}
/* кнопка «Сменить тему» в карточке — как остальные пункты */
.hdr-more .bc-menu-card button {
  width: 100%;
  font: inherit;
  font-size: 1.4rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.content .bc-menu-card a.active::after,
.sb-lang .bc-menu-card a.active::after {
  content: "\f00c";             /* fa-check у активного языка */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--tonco-teal);
}

/* Тот же селектор В НАЧАЛЕ САЙДБАРА — основное место в рефе (GitBook
   space-dropdown-button, замер CDP): кнопка на всю ширину, 14px #68706D,
   паддинг 6×12, radius 12px, рамка 1px #D4DBD8, bg base; шеврон 12px справа,
   разворачивается при открытии. Открытие — по клику (как в рефе). */
/* Кнопка живёт СНАРУЖИ scrollbox (сосед сверху) и не скроллится с toc — для
   этого сайдбар становится flex-колонкой, а стоковый absolute-скроллбокс
   (inset:0) — обычным flex-ребёнком, иначе сосед сверху им игнорируется. */
#sidebar { display: flex; flex-direction: column; }
#sidebar .sidebar-scrollbox {
  position: static;
  flex: 1 1 auto;
  min-height: 0;                /* без этого flex не даёт скроллу сжиматься */
}
.sb-lang {
  position: relative;
  flex: 0 0 auto;
  /* Реф (CDP): кнопка в 32px под шапкой (aside pt-6 24px + скролл-паддинг 8px);
     прежние 8px были на глаз. Снизу до первого пункта списка у рефа 36px
     (замер при scrollTop=0!): 12 здесь + 10 паддинг .sidebar-scrollbox +
     14 собственных отступов первой группы (margin li + строка группы). */
  margin: 3.2rem 1rem 1.2rem;
}
.sb-lang-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  padding: 0.6rem 1.2rem;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1.5;             /* реф: высота кнопки 35px (6+21+6 + рамка 2) */
  text-align: left;
  color: var(--sidebar-fg);
  opacity: 0.9;
  background: var(--bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 12px;
  cursor: pointer;
}
.light .sb-lang-btn { color: var(--tint-muted); opacity: 1; }
.sb-lang-btn:hover { border-color: color-mix(in srgb, var(--sidebar-fg) 32%, transparent); }
.light .sb-lang-btn:hover { border-color: #b9c4c0; }
.sb-lang-btn i {
  font-size: 1.2rem;
  opacity: 0.6;
  transition: transform 0.15s;
}
.sb-lang.open .sb-lang-btn i { transform: rotate(180deg); }
.sb-lang .bc-menu { left: 0; right: 0; }
.sb-lang.open .bc-menu { display: block; }
/* пункты карточки — общие с breadcrumb-дропдауном, см. .bc-menu-card выше */

/* ------------------------------------------------------------------ *
 * Design tokens (единственный :root файла).
 * Бренд teal-green (реф docs.tonco.io): primary #10B68B, darker #009269.
 * Tint-серые: в light — ТОЧНЫЕ токены GitBook, в остальных темах — та же
 * роль через color-mix от переменных mdBook (--fg = текст контента,
 * --sidebar-fg = текст сайдбара — в rust они разные, не путать).
 * Метрики раскладки (--menu-bar-height и др.) — тоже здесь: они общие для
 * ВСЕХ тем (см. NB про --content-max-width ниже).
 * ------------------------------------------------------------------ */
:root {
  --tonco-teal:      #10B68B;   /* primary brand accent            */
  --tonco-teal-dark: #009269;   /* hover / stronger accent         */
  --tonco-teal-soft: #4E7968;   /* muted brand text                */

  /* реф: шапка ровно 64px (сток mdBook: 50px). Переменная тянет за собой и
     смещение сайдбара, и line-height кнопок chrome.css. */
  --menu-bar-height: 64px;
  /* реф: сайдбар 288px (w-72; сток mdBook 300) — иначе всё содержимое сайдбара
     и старт контента смещены на 12px по X относительно рефа. */
  --sidebar-target-width: 288px;
  /* Реф: колонка текста 768px (max-w-3xl, замер CDP на 1600px). +10px на
     паддинги .content (5px с каждой стороны) → main получается ровно 768.
     NB: обязана жить в :root, НЕ в .light — это метрика раскладки; из .light
     тёмные темы получали дефолт 750px и геометрия колонок зависела от
     ЦВЕТОВОЙ темы. */
  --content-max-width: 778px;

  /* tint-роли (GitBook), дефолт для тёмных тем: */
  --tint-strong:        var(--fg);                                        /* полный текст     */
  --tint-muted:         color-mix(in srgb, var(--fg) 75%, transparent);   /* вторичный текст  */
  --tint-border:        color-mix(in srgb, var(--fg) 14%, transparent);   /* рамки карточек   */
  --tint-border-strong: color-mix(in srgb, var(--fg) 22%, transparent);   /* рамки кнопок     */
  --tint-hover-bg:      color-mix(in srgb, var(--fg) 8%, transparent);    /* ховер в контенте */
  --sidebar-hover-bg:   color-mix(in srgb, var(--sidebar-fg) 8%, transparent); /* ховер в сайдбаре */
  --sidebar-border:     color-mix(in srgb, var(--sidebar-fg) 18%, transparent); /* рамка кнопки языка */
}
.light {
  --tint-strong:        rgb(28, 29, 29);   /* tint-12 */
  --tint-muted:         #68706d;           /* tint-11 */
  --tint-border:        #e1e7e5;           /* tint-6  */
  --tint-border-strong: #d4dbd8;           /* tint-7  */
  --tint-hover-bg:      #f0f3f2;           /* tint-4  */
  --sidebar-hover-bg:   #f0f3f2;
  --sidebar-border:     #d4dbd8;
}

.light {
  --links: var(--tonco-teal-dark);      /* body links               */
  --sidebar-active: var(--tonco-teal);  /* active nav item          */
  /* Реф: у сайдбара НЕТ своего фона (aside прозрачный, body белый, границы
     справа тоже нет) — #f9fafa (tint-2) был ошибкой: это GitBook-стиль
     «sidebar-filled», а сайт использует sidebar-default. */
  --sidebar-bg: #ffffff;
  /* NB: do NOT override --sidebar-fg globally — it's the sidebar text colour and
     other themes (e.g. rust) have a DARK sidebar needing a light --sidebar-fg.
     We dim the 2nd-level items with opacity instead (see below), which works in
     every theme. */
  --fg: #1c1d1d;                        /* softened near-black text */
  --inline-code-color: #1c1d1d;
  /* search result highlight -> brand */
  --searchbar-border-color: var(--tonco-teal);
  --searchresults-header-fg: var(--tonco-teal-soft);
}

/* Second-level items (pages inside a section's <ol class="section">). Dimmed
   sidebar text; brand on hover/active. In other themes use --sidebar-fg + opacity
   so it adapts; in LIGHT pin the exact reference grey (#68706d) instead — opacity
   on light's black --sidebar-fg wouldn't match the reference tint. */
/* Ховер пунктов сайдбара, как в рефе: подсвечивается ВСЯ строка пункта
   (от левого края списка до правого, включая стрелку коллапса), bg = GitBook
   tint-4 (#F0F3F2 в light; для тёмных тем — color-mix), radius 6px.
   Для этого отступ вложенности переносится с ol.section (padding 20px) ВНУТРЬ
   ссылок (2.8rem / 4.8rem на уровень) — иначе строка начинается с отступа и
   прямоугольник не дотягивается до края. li — flex; flex:1 растягивает ссылку
   на всю строку (стрелка-toggle остаётся справа внутри той же строки).
   :has(> a) — капс-заголовки секций (div) НЕ подсвечиваются, как в рефе. */
/* Интервалы как в рефе (CDP): 2px между пунктами (сток mdBook: 0.6em≈8px),
   6px перед заголовком группы (верхний уровень). */
#sidebar .chapter li.chapter-item {
  border-radius: 6px;
  margin-block-start: 0.2rem;
}
#sidebar ol.chapter > li.chapter-item { margin-block-start: 0.6rem; }
#sidebar .chapter li.chapter-item:has(> a:not(.toggle)):hover {
  background: var(--sidebar-hover-bg);
}
#sidebar .chapter li.chapter-item > a:not(.toggle) {
  flex: 1 1 auto;
  padding: 0.6rem 0.8rem;       /* реф: 6px блок-паддинг (высота строки 32px) */
  /* Реф: ссылка — flex items-center; при переносе пункта на 2 строки иконка
     висит по вертикальному ЦЕНТРУ всего текста, а не в первой строке. */
  display: flex;
  align-items: center;
}
#sidebar .chapter a .toc-fa-icon { flex: 0 0 auto; }
#sidebar .chapter ol.section { padding-inline-start: 0; }
/* Отступ пунктов 2-го уровня = реф (CDP, при scrollTop=0): ИКОНКА пункта
   выравнена ровно по тексту заголовка группы, текст пункта на +28 (иконка
   16 + зазор 12), ховер-пилюля выступает на 12px левее иконки (pl-3 рефа).
   Реализация: паддинг ссылки 1.2rem + сдвиг li на -1.2rem (в паддинг
   скроллбокса, БЕЗ выхода за его бокс — h-скролла нет). Было 2.8rem —
   пункты сильно утоплены относительно рефа. Вложенный уровень: +8px (pl-5). */
#sidebar .chapter ol.section li.chapter-item { margin-inline-start: -1.2rem; }
#sidebar .chapter ol.section li.chapter-item > a:not(.toggle) { padding-inline-start: 1.2rem; }
#sidebar .chapter ol.section ol.section li.chapter-item { margin-inline-start: 0; }
#sidebar .chapter ol.section ol.section li.chapter-item > a:not(.toggle) { padding-inline-start: 2rem; }

.chapter ol.section li.chapter-item a { color: var(--sidebar-fg); opacity: 0.82; }
/* light: реф — нейтральный tint-strong/64% (замер rgba(28,29,29,.64)),
   НЕ зеленоватый #68706d (тот — цвет кнопки выбора языка, не пунктов) */
.light .chapter ol.section li.chapter-item a { color: rgba(28, 29, 29, 0.64); opacity: 1; }
/* ховер: реф просто доводит текст до полного тёмного (teal — только active) */
.chapter ol.section li.chapter-item a:hover { color: var(--sidebar-fg); opacity: 1; }
.light .chapter ol.section li.chapter-item a:hover { color: var(--tint-strong); }
.chapter ol.section li.chapter-item a.active { color: var(--tonco-teal); opacity: 1; font-weight: 600; }

/* Top-level sections are now collapsible draft chapters: their label sits in a
   <div> (direct child of the top-level <li.chapter-item>), with a toggle arrow.
   UPPERCASE + full-strength --sidebar-fg (the theme's SIDEBAR text colour) so it
   contrasts the sidebar bg in EVERY theme: black on light's white sidebar, light
   on rust's dark-brown sidebar. (2nd-level items use the same var, dimmed via
   opacity.) NB: must be --sidebar-fg, NOT --fg — in rust the content --fg is dark
   but the sidebar is dark too, so --fg made these invisible. */
.chapter > li.chapter-item > div,
.chapter > li.chapter-item > a {
  text-transform: uppercase;
  /* реф (замер CDP): 12px, weight 600, letter-spacing 0.3px, полный tint-strong */
  letter-spacing: 0.03rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sidebar-fg);
}
.light .chapter > li.chapter-item > div,
.light .chapter > li.chapter-item > a { color: var(--tint-strong); }
/* a top-level section that IS a real page (has a link) — keep it clickable-teal
   on hover but still uppercase/dark by default */
.chapter > li.chapter-item > a:hover { color: var(--tonco-teal-dark); }
.chapter > li.chapter-item > a.active { color: var(--tonco-teal); }

/* Header logo — sits inside .menu-title, left of the "TONCO Docs" text and at
   the same height (injected by custom.js). */
#menu-bar .menu-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* ref title: 18px / 600 / -0.025em, near-black (stock: 2.4rem w200) */
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
}
#menu-bar .menu-title .tonco-logo {
  height: 1.4em;
  width: 1.4em;
  vertical-align: middle;
}

/* Web App + Socials nav buttons, between the title and the right buttons. */
#menu-bar .tonco-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;          /* push the nav (and right buttons) to the right */
  margin-right: 0.75rem;
}
/* Размеры = реф (замер CDP): высота 39px из паддинга 8×16 + шрифта 14px/21
   (lh 1.5), radius 12px, weight 400. NB rem-ловушка: прежние 0.5rem/1rem были
   переводом Tailwind при базе 16px, а в mdBook 1rem=10px — кнопки выходили
   27px высотой со шрифтом 10px. */
#menu-bar .tonco-nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.6rem;      /* реф: 8px 16px            */
  font-size: 1.4rem;           /* реф: 14px                */
  font-weight: 400;
  line-height: 1.5;            /* реф: 21px                */
  border-radius: 1.2rem;       /* реф: 12px                */
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  color: #fff;
  background: var(--tonco-teal);
  transition: background 0.15s, border-color 0.15s;
}
#menu-bar .tonco-nav-btn:hover { background: var(--tonco-teal-dark); }
/* Второй (Socials) — как в рефе НЕЙТРАЛЬНЫЙ outline, не teal: текст #68706d,
   рамка #d4dbd8 (tint-7). Тёмные темы — те же роли через color-mix от --fg. */
#menu-bar .tonco-nav-btn:last-child {
  color: var(--tint-muted);
  background: transparent;
  border-color: var(--tint-border-strong);
}
#menu-bar .tonco-nav-btn:last-child:hover {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

/* «⋯»-меню шапки (строит custom.js buildHeader): на широких экранах скрыто,
   кнопки сворачиваются в него СТУПЕНЧАТО, как в рефе (на 768 у него Web App
   ещё в шапке, Socials уже в «⋯»; на 390 — всё в «⋯»):
     ≤899px  — Socials, тема и печать → в меню, появляется «⋯»;
     ≤599px  — Web App тоже → в меню.
   Пункты меню (.mi-*) показываются ровно тогда, когда их кнопка скрыта. */
.hdr-more { position: relative; display: none; }
.hdr-more .bc-menu { left: auto; right: 0; }
.hdr-more.open .bc-menu { display: block; }
.hdr-more .hdr-more-btn i { font-size: 1.6rem; }
.hdr-more .bc-menu-card .mi { display: none; }
@media (max-width: 899px) {
  #menu-bar .tonco-nav-btn:last-child { display: none; }   /* Socials */
  #menu-bar #theme-toggle { display: none; }
  #menu-bar .right-buttons > a[href$="print.html"] { display: none; }
  .hdr-more { display: inline-block; }
  .hdr-more .bc-menu-card :is(.mi-socials, .mi-theme, .mi-print) { display: flex; }
}
@media (max-width: 599px) {
  #menu-bar .tonco-nav { display: none; }                   /* и Web App */
  .hdr-more .bc-menu-card .mi-webapp { display: flex; }
}
/* Заголовок «TONCO Docs»: сток режет его ellipsis'ом в одну строку (на совсем
   узких текст исчезал целиком — flex ужимал его до нуля). Если места нет —
   текст переносится на вторую строку (заголовок остаётся flex: лого слева,
   текст — анонимный flex-элемент, переносится внутри себя; «TONCO Docs» —
   два слова, больше двух строк не бывает). Вертикальный центр держит
   align-items шапки. */
@media (max-width: 599px) {
  #menu-bar .menu-title {
    white-space: normal;
    line-height: 1.25;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
    text-align: left;
  }
}

/* ------------------------------------------------------------------ *
 * Content links — matched to the reference: muted brand colour with a thin
 * underline (offset), brighter + thicker underline on hover. External links
 * get an ↗ icon and open in a new tab (see custom.js markExternalLinks).
 * ------------------------------------------------------------------ */
.content a {
  color: var(--tonco-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--tonco-teal) 40%, transparent);
  transition: color 0.1s, text-decoration-color 0.1s,
              text-decoration-thickness 0.1s;
}
/* :focus-visible, не :focus — иначе клик мышью оставлял hover-стиль до потери фокуса */
.content a:hover,
.content a:focus-visible {
  color: var(--tonco-teal);
  text-decoration-color: var(--tonco-teal);
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}
/* don't underline links that are just wrapping an image/figure */
.content a:has(> img),
.content a:has(> figure) { text-decoration: none; }

/* GitBook-подписи под картинками: текст уехал в alt (convert.py
   process_figcaptions), сам <figcaption> остаётся в DOM ради SEO, но не
   показывается и не читается скринридером — display:none убирает его и из
   accessibility-дерева, так что дубля с alt нет. */
.content figure .gb-figcaption { display: none; }

/* external-link ↗ icon (appended by custom.js) */
.content a.external-link .external-icon {
  font-size: 0.72em;
  margin-left: 0.25em;
  vertical-align: baseline;
  text-decoration: none;
  opacity: 0.7;
}
.content a.external-link:hover .external-icon { opacity: 1; }

/* ------------------------------------------------------------------ *
 * Text highlights. GitBook exports <mark style="background-color:yellow"> with
 * raw CSS colour names (yellow=#FF0, orange, red, green, purple) — harsh/acid.
 * The reference uses soft pastel tints (e.g. GitBook's yellow-100 = #fdf9e8).
 * Override the inline styles (need !important) with a consistent pastel set at
 * the same lightness, plus a slightly darker text for contrast.
 * ------------------------------------------------------------------ */
.content mark { border-radius: 3px; padding: 0.05em 0.15em; color: #1c1d1d; }
.content mark[style*="yellow"] { background-color: #fdf9e8 !important; }
.content mark[style*="orange"] { background-color: #fdf0e6 !important; }
.content mark[style*="red"]    { background-color: #fdecec !important; }
.content mark[style*="green"]  { background-color: #eafaf0 !important; }
.content mark[style*="purple"] { background-color: #f3eefd !important; }
/* Тёмные темы: те же пастельные оттенки, но приглушённые к --bg (иначе яркие
   светлые плашки), текст — темовый. */
:is(.coal, .navy, .ayu, .rust) .content mark { color: var(--fg); }
:is(.coal, .navy, .ayu, .rust) .content mark[style*="yellow"] { background-color: color-mix(in srgb, #fdf9e8 22%, var(--bg)) !important; }
:is(.coal, .navy, .ayu, .rust) .content mark[style*="orange"] { background-color: color-mix(in srgb, #fdf0e6 22%, var(--bg)) !important; }
:is(.coal, .navy, .ayu, .rust) .content mark[style*="red"]    { background-color: color-mix(in srgb, #fdecec 22%, var(--bg)) !important; }
:is(.coal, .navy, .ayu, .rust) .content mark[style*="green"]  { background-color: color-mix(in srgb, #eafaf0 22%, var(--bg)) !important; }
:is(.coal, .navy, .ayu, .rust) .content mark[style*="purple"] { background-color: color-mix(in srgb, #f3eefd 22%, var(--bg)) !important; }

/* ------------------------------------------------------------------ *
 * Типографика по референсу docs.tonco.io (точные значения сняты через
 * CDP getComputedStyle, см. STYLE-CHANGES П2-4). База mdBook: 1rem=10px.
 * Реф: H1 36/45 w700; H2 30/36 w600, зазор сверху ~40; H3 24/32 w600;
 * p 16/26 c интервалом блоков 20.
 * ------------------------------------------------------------------ */
/* Реф: контент начинается в 32px под шапкой (main py-8; замер CDP на
   /concentrated-liquidity/fees). NB: первый замер «90px» был снят с
   /tonco/fees — это СТРАНИЦА 404 (main py-[10vh] = 90 при 900px вьюпорте);
   у 404 и статей разные layout'ы — проверять классы main! */
.content main { padding-block-start: 3.2rem; }
/* Переход по #якорю (клик в правой колонке, поиск, прямая ссылка с хэшем)
   прокручивает заголовок к САМОМУ верху вьюпорта — липкая шапка 64px его
   накрывала. scroll-margin-top оставляет заголовок под шапкой + 16px воздуха. */
.content main :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: calc(var(--menu-bar-height) + 1.6rem);
}
.content main h1 { font-size: 3.6rem; line-height: 1.25; }
.content main h2 {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 600;
  margin-block-start: 4rem;
  margin-block-end: 1.6rem;
}
.content main h3 { font-size: 2.4rem; line-height: 1.33; font-weight: 600; }
.content main p { line-height: 1.625; margin-block-start: 2rem; margin-block-end: 0; }
/* Списки как в рефе (CDP): 20px до списка, 0 после (следующий абзац даёт свои
   20px), пункты через 8px, интерлиньяж 1.5 (сток наследовал 1.45 от .content p). */
.content main ul,
.content main ol { margin-block: 2rem 0; }
.content main li { line-height: 1.5; margin-block-end: 0.8rem; }
.content main li ul,
.content main li ol { margin-block: 0.8rem 0; }  /* вложенный список внутри пункта */

/* Иконка страницы в заголовке (та же, что в сайдбаре; вставляет custom.js) */
.content main .tonco-h1-icon {   /* первый заголовок страницы — не всегда h1 */
  /* Реф — SVG 36×36, чернила заполняют весь бокс. У FA-ШРИФТА глиф занимает
     лишь ~0.806em (замер canvas: 29px чернил при font-size 36px) — поэтому
     «1em» всё равно выглядел мельче рефа. 1.24em даёт видимые ~36px чернил. */
  font-size: 1.24em;
  vertical-align: -0.1em;        /* реф центрирует иконку по тексту (flex) */
  margin-inline-end: 1.8rem;     /* реф: gap .5em заголовка = 18px */
  opacity: 0.45;
}
/* Первый заголовок после H1: у нас h1 mb 24 и стоковый mt заголовка (40-60)
   схлопывались в 60px. У рефа НЕ 24: page-header mb-6 (24) + у заголовка
   mt 0, НО внутренний padding-top ≈19px (якорный приём GitBook: бокс 51px
   при lh 32) — ТЕКСТ первого заголовка стоит в 43px под H1. Наш эквивалент
   без паддинга: margin 4.3rem (collapse с 24 → 43). */
.content main h1:first-of-type + :is(h2, h3, h4),
.content main .tonco-subtitle + :is(h2, h3, h4) { margin-block-start: 4.3rem; }
/* Первый СПОЙЛЕР после H1 — та же история: у рефа зазор 44 (замер lps-faq),
   у нас h1 mb 24 схлопывался с details mt 20 в 24. */
.content main h1:first-of-type + details,
.content main .tonco-subtitle + details { margin-block-start: 4.4rem; }

/* Подзаголовок из frontmatter description (вставляет convert.py) */
.content main .tonco-subtitle {
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--fg);
  opacity: 0.68;
  margin-block-start: -1rem;
  margin-block-end: 0.4rem;
}

/* Breadcrumb над заголовком (вставляет custom.js buildBreadcrumb).
   Реф (CDP): 12px, ссылки бирюзовые (#10B68B) w400 без подчёркивания
   (hover — подчёркивание), шеврон 8px серо-зелёный #758A82 с mx 8px,
   зазор до H1 — 12px. Драфт-разделы (без страницы) — span тем же цветом. */
.content main .tonco-breadcrumb {
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 0 1.2rem;
}
.content main .tonco-breadcrumb a,
.content main .tonco-breadcrumb span {
  color: var(--tonco-teal);
  font-weight: 400;
  text-decoration: none;
}
.content main .tonco-breadcrumb a:hover { text-decoration: underline; }
.content main .tonco-breadcrumb .bc-sep {
  font-size: 0.8rem;
  margin: 0 0.8rem;
  color: var(--fg);
  opacity: 0.45;
}
.light .content main .tonco-breadcrumb .bc-sep { color: #758a82; opacity: 1; }
/* заголовок сразу после breadcrumb не добавляет свой верхний отступ —
   иначе зазор 12px (реф) превращается в ~36px */
.content main .tonco-breadcrumb + h1,
.content main .tonco-breadcrumb + h2,
.content main .tonco-breadcrumb + h3 { margin-block-start: 0; }

/* ------------------------------------------------------------------ *
 * Сайдбар: лифт и стрелки коллапса видны только под мышью (как в рефе).
 * Лифт: ширина «thin» + scrollbar-gutter:stable зарезервированы ВСЕГДА,
 * под мышью появляется только цвет ползунка (scrollbar-color). Прежний
 * вариант (scrollbar-width: none → thin на ховере) менял ширину колонки
 * и пункты оглавления перескакивали. Реф делает ровно так же
 * (.hide-scrollbar: scrollbar-color transparent → unset на :hover).
 * Стрелки — только для устройств с курсором; на таче видны всегда,
 * иначе разделы нельзя было бы свернуть/развернуть.
 * ------------------------------------------------------------------ */
.sidebar .sidebar-scrollbox {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease-in-out;
}
.sidebar .sidebar-scrollbox:hover {
  scrollbar-color: color-mix(in srgb, var(--sidebar-fg) 35%, transparent) transparent;
}
/* light: реф красит ползунок в tint-7 #d4dbd8 */
.light .sidebar .sidebar-scrollbox:hover { scrollbar-color: #d4dbd8 transparent; }

@media (hover: hover) and (pointer: fine) {
  #sidebar .chapter .toggle { opacity: 0; transition: opacity 0.15s; }
  #sidebar .chapter li.chapter-item:hover > .toggle,
  #sidebar .chapter li.chapter-item:focus-within > .toggle { opacity: 1; }
}

/* ------------------------------------------------------------------ *
 * Хинты (mdbook-admonish) в точности как GitBook-плашка референса.
 * Замер CDP (docs.tonco.io, hint info «Toncoin is now Gram»): серый
 * скруглённый бокс #F7F7F7 r6 БЕЗ рамки/тени/заголовка «Info»; grid
 * [иконка | текст]; иконка circle-info ~17px #787878, ячейка pad
 * 16/0/16/16; текст 14px/20px #1c1d1d, pad 16/16/16/12, абзацы через
 * 12px. В исходниках все 63 хинта — style="info", поэтому одним стилем
 * накрываем все .admonition (дефолт admonish: голубой border-left,
 * тень, синяя титульная строка — всё перекрывается).
 * Тёмные темы: тот же приём через color-mix от --fg/--bg.
 * ------------------------------------------------------------------ */
.content .admonition {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin: 2rem 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 5%, var(--bg));
  font-size: 1.4rem;
  line-height: 2rem;
}
.light .content .admonition { background: #f7f7f7; }
.content .admonition::before {          /* иконка = первая grid-ячейка */
  content: "\f05a";                     /* fa-circle-info */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 2rem;
  padding: 1.6rem 0 0 1.6rem;
  color: color-mix(in srgb, var(--fg) 55%, var(--bg));
}
.light .content .admonition::before { color: #787878; }
.content .admonition > .admonition-title { display: none; }  /* нет «Info» */
.content .admonition > div:not(.admonition-title) {
  grid-column: 2;
  padding: 1.6rem 1.6rem 1.6rem 1.2rem;
}
.content .admonition > :last-child { margin-bottom: 0; }  /* admonish давал 1.2rem */
.content .admonition p { margin: 0; line-height: 2rem; }
.content .admonition p + p { margin-top: 1.2rem; }

/* ------------------------------------------------------------------ *
 * GitBook-style child-page cards on empty group pages, emitted by
 * convert.py as <div class="tonco-cards"><a class="tonco-card">…
 * Reference: 2-col grid, icon + title + chevron, bordered rounded row.
 * ------------------------------------------------------------------ */
.content .tonco-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 2rem 0;
}
@media (max-width: 700px) {
  .content .tonco-cards { grid-template-columns: 1fr; }
}
.content a.tonco-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 1.6rem;
  border: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
}
.content a.tonco-card:hover {
  color: var(--fg);
  border-color: var(--tonco-teal);
}
.tonco-card .tonco-card-icon {
  width: 2rem;
  text-align: center;
  opacity: 0.55;                     /* muted icon, like the reference */
}
.tonco-card .tonco-card-title { flex: 1; }
.tonco-card .tonco-card-chevron { font-size: 1.2rem; opacity: 0.4; }
.content a.tonco-card:hover .tonco-card-chevron {
  color: var(--tonco-teal);
  opacity: 1;
}

/* ------------------------------------------------------------------ *
 * GitBook {% embed %} → live iframe (Figma viewer), emitted by
 * convert.py as <figure class="tonco-embed"><iframe…><figcaption…>.
 * Remember: mdBook base font-size is 10px → 1.6rem = 16px.
 * ------------------------------------------------------------------ */
.content figure.tonco-embed { margin: 1.6rem 0; }
.content .tonco-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--table-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  background: var(--bg);
}
.content .tonco-embed figcaption {
  margin-top: 0.6rem;
  font-size: 1.3rem;                /* 13px */
  opacity: 0.75;
}
/* PDF viewer (same-origin /assets/audits/…): portrait, page-like proportions */
.content .tonco-embed-pdf iframe { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------------------ *
 * Spoilers / expandable sections (<details><summary>…) = GitBook expandable
 * (замер CDP, lps-faq): рамка tint-6, СТОПКА — соседние спойлеры сливаются
 * в единый блок (зазор 0, разделитель — общая рамка, скругление 8px только
 * у внешних углов первого/последнего); summary 16/26 w400 приглушённый
 * tint-11, паддинг 16 (справа 40), шеврон 12px СЛЕВА тем же серым,
 * разворачивается вниз; тело — паддинг 0 40 20 (текст в линию с summary,
 * т.к. шеврон 12 + gap 12 + паддинг 16 = 40). Открытие не меняет цвет
 * summary и не рисует линию под ним.
 * ------------------------------------------------------------------ */
.content details {
  border: 1px solid var(--tint-border);
  border-radius: 8px;
  margin: 2rem 0 0;
  background: var(--bg);
  overflow: hidden;
}
/* стопка соседних спойлеров */
.content details + details {
  margin-top: -1px;                 /* общая 1px-граница, не двойная */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.content details:has(+ details) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.content details > summary {
  cursor: pointer;
  list-style: none;                 /* remove default triangle (we add our own) */
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 4rem 1.6rem 1.6rem;
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: var(--tint-muted);
  user-select: none;
}
.content details > summary::-webkit-details-marker { display: none; }
/* шеврон слева, поворачивается вниз при открытии */
.content details > summary::before {
  content: "\f054";                 /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
  flex: 0 0 auto;
  transition: transform 0.15s;
}
.content details[open] > summary::before { transform: rotate(90deg); }
.content details > summary:hover { color: var(--tint-strong); }
/* the body: текст в линию с текстом summary (40px), низ 20px */
.content details > summary ~ * {
  margin-left: 4rem;
  margin-right: 4rem;
}
.content details > summary + * { margin-block-start: 0; }
.content details > *:last-child:not(summary) { margin-bottom: 2rem; }

/* ------------------------------------------------------------------ *
 * GitBook-like page frame (paired with the forked theme/index.hbs):
 *   #site-header  — full-width band, ALWAYS sticky on top;
 *   #site-columns — flex row [sidebar | page], centered on wide screens;
 *   #sidebar      — sticky IN FLOW next to the content (not fixed left).
 * ------------------------------------------------------------------ */
/* Header band: always sticky. book.js keeps writing inline `top:Npx` on
   #menu-bar to play the stock hide-on-scroll game — irrelevant now: the bar is
   static inside the sticky band, and the !importants below beat the leftovers
   of chrome.css (html.sidebar-visible #menu-bar { position:sticky; top:0 }). */
#site-header {
  position: sticky;
  top: 0;
  z-index: 150;                       /* over content AND sidebar */
  /* реф: полупрозрачный фон (88%) + blur — контент слегка просвечивает при
     скролле; разделитель — box-shadow, а НЕ border: тень не входит в высоту,
     итого шапка ровно 64px (= --menu-bar-height), как в рефе. */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent);
}
#site-header #menu-bar {
  position: static !important;
  top: auto !important;
  /* ref: header CONTENT is capped at 1440px and centered (band stays full
     width); side padding 32px. Measured on docs.tonco.io via CDP. */
  max-width: 144rem;
  margin: 0 auto;                     /* also kills chrome.css negative margins */
  padding: 0 3.2rem;
  border-block-end: none;             /* the band draws the hairline itself */
  background: transparent;
  /* высота фиксируется здесь, а не line-height'ом заголовка (сток даёт +2px) */
  height: var(--menu-bar-height);
  align-items: center;
}
/* theme popup: custom.js buildHeader() переносит кнопку и попап в
   .right-buttons — открываем под кнопкой у правого края, а не по
   захардкоженному chrome.css left:10px */
#menu-bar .right-buttons { position: relative; }
#site-header .theme-popup { left: auto; right: 0; }
/* stock hover-placeholder остался в разметке (минимальный дифф форка index.hbs
   со стоком), но при всегда-липкой шапке он не нужен */
#menu-bar-hover-placeholder { display: none; }
/* The menu bar (and its hover-placeholder) left .page — undo the stock -50px
   pull that compensated for the placeholder's height. */
.page { margin-block-start: 0; }
/* Sidebar starts UNDER the header at every width (mobile keeps stock fixed
   positioning, so without this it would slide beneath the sticky band). */
#sidebar { top: var(--menu-bar-height); }

/* Wide screens: [sidebar | content+toc] centered as ONE unit, sidebar sticky
   in flow — the GitBook behavior. Below 1200px stock mdBook stays: fixed
   sidebar + margin-pushed page (only shifted down by the sticky header). */
@media (min-width: 1200px) {
  #site-columns {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Реф: ВИДИМЫЙ зазор сайдбар→контент 48px (main.left - aside.right, CDP).
       У нас до main ещё паддинги .page (15px) + .content (5px) = 20px,
       поэтому flex-gap = 48 - 20 = 28px. Прежние 4.8rem давали 68px. */
    column-gap: 2.8rem;
    padding: 0 3.2rem;
  }
  #sidebar {
    position: sticky;                 /* stock: fixed left:0 top:0 bottom:0 */
    bottom: auto;
    height: calc(100vh - var(--menu-bar-height));
    flex: 0 0 var(--sidebar-width);
    transform: none !important;       /* stock hide-animation is a translateX */
  }
  /* Collapsed sidebar leaves the flow entirely (no slide animation here). */
  #sidebar-toggle-anchor:not(:checked) ~ #sidebar { display: none; }
  /* Правый паддинг .page убран: у рефа toc-колонка — самый край ряда;
     15px справа расширяли бокс и сдвигали центрированную связку на ~8px
     влево от рефа. В basis соответственно ОДИН --page-padding (левый). */
  .page { padding-inline-end: 0; }
  #page-wrapper {
    /* content column + toc grid (256px + 1.1rem gap) + left .page padding */
    flex: 0 1 calc(var(--content-max-width) + 1.1rem + 256px + var(--page-padding));
    min-width: 0;
    margin-inline-start: 0 !important; /* stock pushes it by sidebar width */
    transform: none !important;
  }
  /* Когда вьюпорту тесно и wrapper сжат (flex 0 1), сток центрирует main
     (margin-inline:auto) и раздувает зазор сайдбар→контент (на 1366: 119px
     против 48 у рефа). Реф прижимает колонку влево и сжимает её ширину —
     повторяем: слева всегда ровно 48px, слабина уходит вправо к TOC.
     .nav-wrapper (prev/next) прижимаем так же — на страницах БЕЗ правой
     колонки (<2 заголовков, has-page-toc не ставится) он центрировался
     в полной ширине и уезжал вправо относительно прижатого main. */
  .content main { margin-inline-start: 0; }
  .content .nav-wrapper { margin-inline: 0; }
}

/* ------------------------------------------------------------------ *
 * Right-hand "On this page" column (built by custom.js buildPageToc).
 * Fixed to the right edge; hidden below 1200px so it never crowds the text.
 * ------------------------------------------------------------------ */
/* Two-column layout when a page-toc exists: [content column][toc column], laid
   out with CSS grid inside .content. This keeps the content column its normal
   width and puts the toc to its RIGHT with a real gap — no margin hacks, no
   fixed positioning, no left-side void. <main> and .nav-wrapper (prev/next) sit
   in column 1; .page-toc in column 2. The whole grid is centered as a unit. */
/* Standard 3-column docs layout (sidebar is mdBook's; here we add content + toc).
   Grid lives on .page (which has NO overflow), toc is a SIBLING of #content, so
   the sticky toc's scroll root is .page-wrapper — #content's own overflow can't
   trap it. align-items:start is REQUIRED or the toc cell stretches to full height
   and sticky never engages. (Best-practice recipe: grid + align-items:start +
   sticky, no overflow ancestor between the sticky element and its scroll root.)
   NB: the menu bar is NOT in .page anymore — the forked theme/index.hbs moved it
   to #site-header — so the only other in-flow child is #search-wrapper (row 1). */
.page.has-page-toc {
  display: grid;
  /* Реф (CDP, 1600): колонка 256px, ВИДИМЫЙ зазор контент→toc 16px =
     grid-gap 11px + 5px паддинга .content. Прежние 260px + 3rem сдвигали
     всю центрированную связку на ~19px левее рефа. */
  grid-template-columns: minmax(0, 1fr) 256px;   /* px: fixed toc width */
  grid-template-rows: auto 1fr;
  column-gap: 1.1rem;
  align-items: start;
}
.page.has-page-toc > #search-wrapper { grid-column: 1 / -1; grid-row: 1; }
.page.has-page-toc > #content { grid-column: 1; grid-row: 2; min-width: 0; }
.page.has-page-toc > .page-toc { grid-column: 2; grid-row: 2; }

.page-toc {
  position: sticky;
  top: calc(var(--menu-bar-height) + 1.5rem);
  max-height: calc(100vh - var(--menu-bar-height) - 3rem);
  overflow-y: auto;
  padding: 0.5rem 0 1rem;
  /* NB: mdBook sets html font-size:62.5% (1rem=10px) and body 1.6rem(=16px).
     So toc items 1.4rem = 14px — just under body text, readable (was 0.95rem=9.5px). */
  font-size: 1.4rem;
}
.page-toc-title {
  display: flex;
  align-items: center;          /* иконка центрируется по ВЫСОТЕ блока — если
                                   лейбл переносится на 2 строки, она остаётся
                                   по центру, а не липнет к первой строке */
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.15rem;           /* ~11.5px uppercase label */
  font-weight: 700;
  color: var(--fg);
  opacity: 0.55;                /* muted label, theme-adaptive */
  margin-bottom: 0.75rem;
}
.page-toc-icon {
  flex: none;                   /* иконку не сжимать при переносе текста */
  font-size: 1em;               /* в размер лейбла */
  line-height: 1;
}
/* Иерархия как в рефе: верхний уровень БЕЗ линии; вложенная группа H3 —
   отдельный <ul> с серой линией слева (строит buildPageToc относительно
   предыдущего H2). Активный вложенный пункт перекрывает линию бирюзой. */
.page-toc ul { list-style: none; margin: 0; padding: 0; }
.page-toc li { margin: 0; }
.page-toc li a {
  display: block;
  /* реф: строка 28px (паддинг 4 + lh 20), между верхнеуровневыми пунктами 10px
     (см. правило ниже); у нас было 26px и 0. */
  padding: 0.4rem 0 0.4rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--fg);
  opacity: 0.7;                 /* dimmed, theme-adaptive */
  text-decoration: none;
  line-height: 2rem;
}
.page-toc > ul > li + li { margin-block-start: 1rem; }
.page-toc > ul > li > a {       /* верхний уровень: без отступа и без бара */
  padding-left: 0;
  margin-left: 0;
  border-left: none;
}
.page-toc ul ul {               /* вложенные H3 */
  border-left: 1px solid color-mix(in srgb, var(--tonco-teal) 18%, transparent);
  margin: 0.2rem 0;
}
.page-toc li a:hover { color: var(--tonco-teal-dark); opacity: 1; }
.page-toc li a.active {
  color: var(--tonco-teal-dark);
  opacity: 1;
  border-left-color: var(--tonco-teal);
  font-weight: 600;
}
/* Not enough room for the toc column -> drop it, content spans full width.
   Реф держит колонку до tailwind xl (1280): на 1366 она видна, контент
   сжимается (у нас main прижат влево и minmax(0,1fr) сжимает его так же);
   прежний порог 1439 прятал её уже на 1366. */
@media (max-width: 1279px) {
  .page.has-page-toc { display: block; }
  .page-toc { display: none; }
}

/* ------------------------------------------------------------------ *
 * Prev/next navigation.
 * Hide mdBook's big floating side arrows; keep the bottom nav and turn it into
 * two labelled cards ("Previous / <title>", "Next / <title>") — see custom.js
 * buildPrevNext(). Reference-style.
 * ------------------------------------------------------------------ */
.nav-wide-wrapper { display: none !important; }   /* no floating side arrows */

.nav-wrapper {
  /* grid of 2 equal columns: cards fill exactly, reaching both content edges
     (flex left a rounding gap on the right). Aligned to the centered text
     column via same max-width + auto margins. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;                       /* реф: gap-2 = 8px между карточками */
  max-width: var(--content-max-width);
  margin: 3rem auto 1rem;
  /* mdBook may hide this on wide screens; force it visible as our main nav */
  visibility: visible !important;
}
.mobile-nav-chapters.tonco-prevnext {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.4rem 1.6rem;
  /* Реф: рамка нейтральная tint-6 (teal — только на ховере) */
  border: 1px solid var(--tint-border);
  border-radius: 4px;                /* реф: rounded-sm */
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  /* reset mdBook's fixed/absolute positioning for these arrows */
  position: static;
  width: auto;
  height: auto;
}
.mobile-nav-chapters.tonco-prevnext.next { text-align: right; align-items: flex-end; }
.mobile-nav-chapters.tonco-prevnext:hover {
  border-color: var(--tonco-teal);   /* реф: hover:border-primary */
}
/* NB: mdBook base 10px! Реф: метка 12px (text-xs), название 16px (md:text-base).
   Было 0.75rem/0.98rem = 7.5/9.8px — rem-ловушка, шрифт был вдвое мельче рефа. */
/* Реф: метка tint-11, название полным tint-strong; teal у названия ТОЛЬКО
   на ховере (group-hover:text-primary). */
.tonco-prevnext .pn-dir {
  font-size: 1.2rem;                 /* реф: text-xs, БЕЗ капса */
  color: var(--tint-muted);
}
.tonco-prevnext .pn-title {
  font-size: 1.6rem;
  font-weight: 400;                  /* реф: обычное начертание */
  color: var(--tint-strong);
  line-height: 1.3;
}
.tonco-prevnext:hover .pn-title { color: var(--tonco-teal); }

/* ------------------------------------------------------------------ *
 * Remove the automatic chapter numbering in the sidebar.
 * mdBook renders it as <strong aria-hidden="true">1.2.</strong> inside
 * each nav link; hide it (kept in DOM for a11y ordering but not shown).
 * ------------------------------------------------------------------ */
.chapter li.chapter-item strong[aria-hidden="true"] {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Sidebar icons (injected by custom.js from frontmatter `icon:`).
 *   .toc-fa-icon   — a real Font Awesome Free icon before the item text.
 *   .toc-icon-todo — red "❗name" flag for FA Pro icons (not self-hostable);
 *                    editor replaces the frontmatter icon with a Free FA
 *                    analog (add it to FA_FREE_ICONS in convert.py) or emoji.
 * ------------------------------------------------------------------ */
.toc-fa-icon {
  /* реф: иконка 16px + зазор 12 до текста (текст пункта на +28 от иконки) */
  width: 1.6rem;
  margin-right: 1.2rem;
  text-align: center;
  opacity: 0.85;
}
.toc-icon-todo {
  color: #e5484d;          /* red */
  font-weight: 600;
  font-size: 0.8em;
}