/* ============================================================
   components.css – компоненты Design.md
   ============================================================ */

/* ---------- Контролы шапки ---------- */
/* Кнопка поиска – DocSearch-Button, стили в vp-search.css */

.vp-version-switcher select {
  appearance: none;
  padding: 6px 28px 6px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  background-color: var(--vp-c-bg-alt);
  /* стрелка на CSS-градиентах */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--vp-c-text-2) 50%),
    linear-gradient(135deg, var(--vp-c-text-2) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.vp-version-switcher select:hover { border-color: var(--vp-c-brand-1); }

.vp-theme-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--vp-c-text-2);
  background: transparent;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  cursor: pointer;
}

/* Мобильная шапка: селектор версий не сжимается,
   шрифт ≥16px – иначе iOS Safari зумит страницу при фокусе */
@media (max-width: 959px) {
  .vp-version-switcher { flex: 0 0 auto; }
  .vp-version-switcher select {
    font-size: 16px;
    padding: 8px 24px 8px 10px;
    background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  }
  .vp-theme-toggle { width: 40px; height: 40px; }
}
.vp-theme-toggle:hover { background: var(--vp-c-bg-soft); color: var(--vp-c-text-1); }
html.dark .vp-theme-toggle .icon-moon { display: none; }
html:not(.dark) .vp-theme-toggle .icon-sun { display: none; }

/* Кнопка режима «оригинал рядом» – в один ряд с переключателем темы. */
.vp-en-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--vp-c-text-2);
  background: transparent;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  cursor: pointer;
}
.vp-en-toggle:hover { background: var(--vp-c-bg-soft); color: var(--vp-c-text-1); }
.vp-en-toggle.is-active {
  color: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
}
.vp-en-toggle.is-loading { opacity: .5; cursor: progress; }
@media (max-width: 959px) {
  .vp-en-toggle { width: 40px; height: 40px; }
}

/* ---------- Сайдбар ---------- */
.vp-sidebar-nav {
  font-size: 13.3333px;
  line-height: 20px;
  font-weight: 500;
}
.vp-sidebar-version {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vp-c-brand-1);
  text-decoration: none;
}
.vp-sidebar-group { border-top: 1px solid var(--vp-c-divider); padding: 10px 0; }
.vp-sidebar-group:first-of-type { border-top: none; }
.vp-sidebar-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  gap: 8px;
}
.vp-sidebar-group-title a {
  color: var(--vp-c-text-1);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
}
.vp-sidebar-group-title a:hover { color: var(--vp-c-brand-1); }
.vp-caret {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.vp-caret::before {
  content: "";
  position: absolute;
  top: 7px; left: 7px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--vp-c-text-3);
  border-bottom: 1.5px solid var(--vp-c-text-3);
  transform: rotate(-45deg);
  transition: transform .15s;
}
.vp-sidebar-group.is-open > .vp-sidebar-group-title .vp-caret::before,
.vp-sidebar-sub.is-open > .vp-caret::before { transform: rotate(45deg); }
.vp-sidebar-group ul {
  display: none;
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 12px;
}
.vp-sidebar-group.is-open > ul { display: block; }
/* Третий уровень: страницы модулей внутри пункта второго уровня */
.vp-sidebar-sub { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 4px; }
/* basis 0: длинный заголовок переносится внутри ссылки, каретка не уезжает вниз */
.vp-sidebar-sub > a { flex: 1 1 0; min-width: 0; }
.vp-sidebar-sub > ul {
  flex-basis: 100%;
  margin: 4px 0 2px;
  padding-left: 10px;
  border-left: 1px solid var(--vp-c-divider);
}
.vp-sidebar-sub > ul a { font-size: 13px; }
.vp-sidebar-sub > ul li { margin-top: 6px; }
.vp-sidebar-sub.is-open > ul { display: block; }
.vp-sidebar-group li { margin-top: 8px; }
.vp-sidebar-group li a {
  display: block;
  color: var(--vp-c-text-2);
  text-decoration: none;
  line-height: 1.35;
}
.vp-sidebar-group li a:hover { color: var(--vp-c-brand-1); }
.vp-sidebar-group li a.is-active { color: var(--vp-c-brand-1); font-weight: 600; }

/* Мобильный ящик: шрифт как на десктопе, но просторнее пункты
   и каретки под палец (≥40px) */
@media (max-width: 959px) {
  .vp-sidebar-group { padding: 12px 0; }
  .vp-sidebar-group li { margin-top: 12px; }
  .vp-sidebar-sub > ul li { margin-top: 10px; }
  .vp-caret { width: 40px; height: 40px; margin: -10px 0; }
  .vp-caret::before {
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    margin: -6px 0 0 -4px;
  }
}

/* ---------- Мобильное оглавление страницы ----------
   Правое оглавление скрыто на <1280px – вместо него свёрнутый блок
   «Содержание страницы» в начале статьи. */
.vp-toc-mobile {
  display: none;
  margin: 0 0 24px;
  border: 1px solid var(--vp-c-border-card);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
}
@media (max-width: 1279px) {
  .vp-toc-mobile { display: block; }
}
.vp-toc-mobile summary {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vp-c-text-1);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.vp-toc-mobile summary::-webkit-details-marker { display: none; }
.vp-toc-mobile summary::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-right: 1.5px solid var(--vp-c-text-3);
  border-bottom: 1.5px solid var(--vp-c-text-3);
  transform: rotate(-45deg) translateY(-2px);
  transition: transform .15s;
}
.vp-toc-mobile[open] summary::before { transform: rotate(45deg) translateY(-2px); }
.vp-toc-mobile-nav {
  padding: 0 16px 12px;
  font-size: 14px;
  line-height: 1.5;
  max-height: 50vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vp-toc-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.vp-toc-mobile-nav ul ul { padding-left: 16px; }
.vp-toc-mobile-nav li { margin-top: 8px; }
.vp-toc-mobile-nav a {
  display: block;
  color: var(--vp-c-text-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.vp-toc-mobile-nav a:hover { color: var(--vp-c-brand-1); }
.vp-toc-mobile-nav code {
  font-family: var(--vp-font-family-mono);
  font-size: .875em;
}

/* ---------- Хлебные крошки и пейджер ---------- */
.vp-breadcrumbs {
  font-size: 13.3333px;
  line-height: 20px;
  font-weight: 500;
  color: var(--vp-c-text-3);
  margin-bottom: 24px;
  border-bottom: 1px solid var(--vp-c-divider);
  padding-bottom: 12px;
}
.vp-breadcrumbs a { color: var(--vp-c-text-2); text-decoration: none; }
.vp-breadcrumbs a:hover { color: var(--vp-c-brand-1); }
.vp-breadcrumbs .sep { margin: 0 8px; }

/* ---------- Действия страницы: «Копировать страницу» ----------
   Кнопка под заголовком (app.js переносит блок за h1) раскрывает
   меню действий: копировать Markdown, открыть, скачать. */
.vp-page-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
/* Внутри контента блок вставляется перед h1 (app.js) и обтекается
   справа: кнопка стоит на строке заголовка, не задевая текст статьи
   (как «Copy page» на docs.anthropic.com). На узких экранах, где рядом
   с заголовком места нет, – обычный блок под ним. */
.vp-content .vp-page-actions {
  float: right;
  margin: 6px 0 12px 16px;
}
@media (max-width: 639px) {
  .vp-content .vp-page-actions {
    float: none;
    justify-content: flex-start;
    margin: 4px 0 16px;
  }
}
.vp-md-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--vp-c-border-card);
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  color: var(--vp-c-text-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.vp-md-btn:hover,
.vp-md-btn[aria-expanded="true"] {
  color: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
}

.vp-copy-split { position: relative; display: inline-flex; }
.vp-copy-caret { margin-left: 2px; transition: transform .2s; }
.vp-copy-main[aria-expanded="true"] .vp-copy-caret { transform: rotate(180deg); }

.vp-copy-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 4px;
  background: var(--vp-c-bg-elv);
  border: 1px solid var(--vp-c-border-card);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  z-index: 70;
}
.vp-copy-menu[hidden] { display: none; }
/* Селектор с родителем перекрывает стили контентных ссылок
   (.vp-content a) – пункты меню не подчёркиваются и не перекрашиваются. */
.vp-copy-menu .vp-copy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--vp-c-text-1);
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
}
.vp-copy-menu .vp-copy-item:hover {
  background: var(--vp-c-bg-soft);
  color: var(--vp-c-brand-1);
  text-decoration: none;
}
.vp-copy-menu .vp-copy-item svg { color: var(--vp-c-text-3); flex: none; }
.vp-copy-menu .vp-copy-item:hover svg { color: var(--vp-c-brand-1); }

/* Крошки просмотрщика исходников: сегменты пути разделяются «/» плотнее. */
.vp-breadcrumbs-src { display: flex; align-items: center; flex-wrap: wrap; }
.vp-breadcrumbs-src .sep { margin: 0 6px; }

/* Кнопка «назад» на страницах исходников. */
.vp-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  flex: 0 0 auto;
  border: 1px solid var(--vp-c-border-card);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  color: var(--vp-c-text-2);
}
.vp-back:hover {
  color: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
  background: var(--vp-c-bg-soft);
}
@media (hover: none) {
  .vp-back { width: 36px; height: 36px; }
}

.vp-pager {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 32px;
}
.vp-pager-link {
  display: block;
  flex: 1;
  max-width: 48%;
  padding: 12px 16px;
  border: 1px solid var(--vp-c-border-card);
  border-radius: 8px;
  text-decoration: none;
}
.vp-pager-link:hover { border-color: var(--vp-c-brand-1); }
.vp-pager-link.next { text-align: right; }
.vp-pager-label {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--vp-c-text-2);
}
.vp-pager-title {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}

/* В узкой статье (телефон или узкая колонка) пейджер складывается в столбик –
   реагирует на ширину контейнера «doc», а не окна */
@container doc (max-width: 480px) {
  .vp-pager { flex-direction: column; gap: 10px; }
  .vp-pager-link { max-width: 100%; }
  .vp-pager-link.next { text-align: left; }
}

/* ---------- Типографика контента ----------
   Fluid typography: размер заголовков плавно масштабируется по ширине
   контейнера «doc» (cqi = 1% inline-размера контейнера), а не экрана.
   Первая строка font-size – px-фолбэк для браузеров без container queries:
   объявление с cqi там не парсится и берётся предыдущее. */
.vp-content h1 {
  font-size: 32px;
  font-size: clamp(25px, 1.9cqi + 19px, 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.vp-content h2 {
  font-size: 27px;
  font-size: clamp(22px, 1.36cqi + 17.6px, 27px);
  line-height: 1.2;
  font-weight: 600;
  margin: 32px 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--vp-c-divider);
}
.vp-content h3 {
  font-size: 23px;
  font-size: clamp(19px, 1.09cqi + 15.5px, 23px);
  line-height: 1.22;
  font-weight: 600;
  margin: 32px 0 12px;
}
.vp-content h4 {
  font-size: 19px;
  font-size: clamp(17px, .54cqi + 15.3px, 19px);
  line-height: 1.27;
  font-weight: 600;
  margin: 24px 0 8px;
}
.vp-content h5, .vp-content h6 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }

/* Английский оригинал заголовка (python/scripts/add_en_subtitles.py) –
   отдельной строкой под русским текстом, серым и заметно мельче. */
.vp-content :is(h1, h2, h3, h4, h5, h6) .heading-en {
  display: block;
  font-size: max(12px, .38em);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--vp-c-text-3);
  margin-top: 3px;
  text-wrap: balance;
}

/* То же в навигации: правое и мобильное оглавления страницы (span добавляет
   _extract_toc в app/parser.py), левый сайдбар (title_en в app/navigation.py)
   и пейджер «Назад/Далее» (title_en у Link в app/parser.py). */
.vp-aside-nav .toc-en,
.vp-toc-mobile-nav .toc-en,
.vp-sidebar-nav .nav-en,
.vp-pager .nav-en {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--vp-c-text-3);
  margin-top: 1px;
}

/* …и в навигационных списках внутри контента: toctree-оглавления глав
   и списки-ссылки вроде индекса HOWTO (_enrich_toctree и
   _enrich_link_lists в app/parser.py). Отрицательный отступ прижимает
   строку к русскому названию (у того просторный line-height). */
.vp-content .toctree-en {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--vp-c-text-3);
  margin: -4px 0 0;
}

/* Режим «оригинал рядом»: английский оригинал текстового блока
   (вставляет app.js из /api/en/…). Виден только при body.en-mode. */
.vp-content .en-original { display: none; }
body.en-mode .vp-content .en-original {
  display: block;
  font-size: .875em;
  line-height: 1.55;
  color: var(--vp-c-text-3);
  border-left: 2px solid var(--vp-c-divider);
  padding-left: 12px;
  margin: 6px 0 8px;
}
body.en-mode .vp-content .en-original a { color: inherit; }
body.en-mode .vp-content .en-original code {
  color: var(--vp-c-text-2);
  font-size: .95em;
}
/* Оригинал абзаца стоит следом за <p> – прижимаем его к своему абзацу. */
body.en-mode .vp-content p[data-en] { margin-bottom: 4px; }
body.en-mode .vp-content p[data-en] + .en-original { margin-top: 0; }

/* Длинные идентификаторы (importlib.metadata и т. п.) не распирают колонку */
.vp-content { overflow-wrap: break-word; }

/* Якоря не должны прятаться под фиксированной шапкой. */
.vp-content [id] { scroll-margin-top: calc(var(--vp-nav-height) + 16px); }

.vp-content p { margin: 16px 0; }
.vp-content a {
  color: var(--vp-c-brand-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vp-content a:hover { text-decoration-thickness: 2px; }

/* Якорные ссылки (переход внутри страницы) – пунктирное подчёркивание. */
.vp-content a[href^="#"]:not(.headerlink):not(.src-lineno) {
  text-decoration-style: dotted;
}

.vp-content a.headerlink {
  margin-left: 6px;
  color: var(--vp-c-text-3);
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s;
}
/* В заголовках якорь стоит первым (app.js переносит) – отступ справа */
.vp-content h1 > a.headerlink,
.vp-content h2 > a.headerlink,
.vp-content h3 > a.headerlink,
.vp-content h4 > a.headerlink,
.vp-content h5 > a.headerlink,
.vp-content h6 > a.headerlink {
  margin-left: 0;
  margin-right: 6px;
}
.vp-content :hover > a.headerlink,
.vp-content a.headerlink:focus { opacity: 1; }
.vp-content a.headerlink:hover { color: var(--vp-c-brand-1); }
/* Иконка цепочки (app.js заменяет «¶») масштабируется вместе с заголовком */
.vp-content a.headerlink svg {
  width: .62em;
  height: .62em;
  min-width: 12px;
  min-height: 12px;
}

/* Тост «скопировано» (ссылки на разделы и другие подтверждения) */
.vp-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 8px);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vp-c-bg);
  background: var(--vp-c-text-1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 90;
}
.vp-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.vp-content ul, .vp-content ol { padding-left: 24px; margin: 16px 0; }
.vp-content li { margin: 6px 0; }
/* «Простые» списки Sphinx (class="simple") – компактные: абзац-обёртка
   пункта не должен добавлять свои поля (16px давали двойной зазор). */
.vp-content :is(ul, ol).simple > li > p { margin: 0; }
.vp-content :is(ul, ol).simple > li > p + p { margin-top: 8px; }

/* Пункты-ссылки с английской подписью – навигация, как toctree:
   без постоянного подчёркивания, наведение подсвечивается цветом. */
.vp-content a:has(+ .toctree-en) { text-decoration: none; }
.vp-content a:has(+ .toctree-en):hover { color: var(--vp-c-brand-2); }

/* Оглавление версии (главная страница версии): подпись под ссылкой. */
.vp-content li.biglink { line-height: 1.45; }
.vp-content .linkdescr {
  font-size: .9em;
  line-height: 1.3;
}

.vp-content hr { border: none; border-top: 1px solid var(--vp-c-divider); margin: 20px 0; }

.vp-content blockquote {
  margin: 16px 0;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--vp-c-divider);
  color: var(--vp-c-text-2);
}

.vp-content .rubric { font-weight: 600; font-size: 19px; margin: 24px 0 8px; }

/* Инлайн-код: чип с брендовым цветом, отличимый от текста (как в VitePress).
   Полупрозрачный фон работает и в тёмной теме, и внутри цветных плашек. */
.vp-content code, .vp-content tt {
  font-family: var(--vp-font-family-mono);
  font-size: .875em;
  color: var(--vp-code-color);
  background: var(--vp-code-bg);
  padding: 3px 6px;
  border-radius: 4px;
}
.vp-content a code, .vp-content a tt { color: var(--vp-c-brand-1); }
.vp-content pre code, .vp-content pre tt {
  font-size: 1em;
  color: inherit;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Клавиши (kbd) – «кнопка», а не чип */
.vp-content kbd {
  font-family: var(--vp-font-family-mono);
  font-size: .8em;
  padding: 2px 6px;
  background: var(--vp-c-bg-alt);
  border: 1px solid var(--vp-c-divider);
  border-bottom-width: 2px;
  border-radius: 6px;
}
.vp-content kbd.compound,
.vp-content kbd kbd { border: none; background: transparent; padding: 0; }

/* Код в правом оглавлении (вне .vp-content) – моноширинный, без чипа */
.vp-aside-nav code, .vp-aside-nav tt {
  font-family: var(--vp-font-family-mono);
  font-size: .875em;
}

/* ---------- Код-блоки ---------- */
.vp-content [class*="language-"] {
  position: relative;
  margin: 16px 0;
  background: var(--vp-c-bg-alt);
  border-left: 3px solid var(--vp-c-brand-1);
  border-radius: 0 6px 6px 0;
}
.vp-content [class*="language-"] .highlight { background: transparent; }
.vp-content [class*="language-"] pre,
.vp-content .highlight pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--vp-font-family-mono);
  font-size: .9em;
  line-height: 1.7;
  background: transparent;
}
/* pre вне language-контейнеров (старые страницы) */
.vp-content > pre,
.vp-content section > pre,
.vp-content .section > pre,
.vp-content dd > pre {
  margin: 16px 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--vp-font-family-mono);
  font-size: .9em;
  line-height: 1.7;
  background: var(--vp-c-bg-alt);
  border-left: 3px solid var(--vp-c-brand-1);
  border-radius: 0 6px 6px 0;
}

/* Кнопка копирования */
.vp-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vp-c-text-2);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.vp-content [class*="language-"]:hover .vp-copy { opacity: 1; }
.vp-copy:hover { border-color: var(--vp-c-brand-1); }
/* На тач-устройствах hover нет – кнопка копирования видна всегда */
@media (hover: none) {
  .vp-copy { opacity: 1; }
  .vp-content a.headerlink { opacity: .4; }
}
.vp-copy.copied { color: var(--vp-c-green-1); border-color: var(--vp-c-green-1); }
.vp-copy.copied::after {
  content: "Скопировано";
  position: absolute;
  right: calc(100% + 8px);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-green-1);
}

/* ---------- Запускаемые примеры (Pyodide) ---------- */
/* Кнопка ▶ – слева от кнопки копирования, тот же стиль. */
.vp-run {
  position: absolute;
  top: 8px;
  right: 48px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vp-c-text-2);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.vp-content [class*="language-"]:hover .vp-run { opacity: 1; }
.vp-run:hover { color: var(--vp-c-green-1); border-color: var(--vp-c-green-1); }
@media (hover: none) { .vp-run { opacity: 1; } }

/* Открытый редактор: подсвеченный пример и кнопки прячутся, их место
   занимает панель (textarea + управление + вывод). */
.pyrun-open > .highlight,
.pyrun-open > pre,
.pyrun-open > .vp-run,
.pyrun-open > .vp-copy { display: none; }

/* Панель живёт в DOM после первого открытия – без pyrun-open прячется */
.pyrun { display: none; padding: 10px 12px 12px; }
.pyrun-open > .pyrun { display: block; }
.pyrun-editor {
  display: block;
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  font-family: var(--vp-font-family-mono);
  font-size: .9em;
  line-height: 1.7;
  color: var(--vp-c-text-1);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  white-space: pre;
  overflow-x: auto;
}
.pyrun-editor:focus {
  outline: none;
  border-color: var(--vp-c-brand-1);
}

.pyrun-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pyrun-btn {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--vp-c-text-1);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  cursor: pointer;
}
.pyrun-btn:hover { border-color: var(--vp-c-brand-1); }
.pyrun-run { color: var(--vp-c-green-1); }
.pyrun-stop { display: none; color: var(--vp-c-red-1); }
.is-running .pyrun-stop { display: inline-block; }
.is-running .pyrun-run { opacity: .5; pointer-events: none; }

.pyrun-status {
  font-size: 12px;
  color: var(--vp-c-text-3);
  margin-left: auto;
}
.pyrun-status.is-ok { color: var(--vp-c-green-1); }
.pyrun-status.is-err { color: var(--vp-c-red-1); }

.pyrun-out {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-family: var(--vp-font-family-mono);
  font-size: .85em;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.pyrun-stderr { color: var(--vp-c-red-1); }

/* ---------- Плашки (custom-block) ---------- */
.vp-content .custom-block {
  margin: 16px 0;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 24px;
}
.vp-content .custom-block p { margin: 8px 0; }
.vp-content .custom-block > :last-child { margin-bottom: 0; }
.vp-content .custom-block .custom-block-title {
  margin: 0 0 4px;
  font-weight: 600;
}
/* Иконка перед заголовком плашки: маска закрашивается currentColor,
   поэтому наследует цвет заголовка своего типа (в т.ч. в тёмной теме). */
.vp-content .custom-block .custom-block-title::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2.5px;
  background: currentColor;
  -webkit-mask: var(--block-icon) no-repeat center / contain;
  mask: var(--block-icon) no-repeat center / contain;
}
.vp-content .custom-block.note,
.vp-content .custom-block.info {
  background: var(--vp-c-default-soft);
  --block-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.vp-content .custom-block.tip {
  background: var(--vp-c-tip-soft);
  --block-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}
.vp-content .custom-block.tip .custom-block-title { color: var(--vp-c-green-1); }
.vp-content .custom-block.warning,
.vp-content .custom-block.caution {
  background: var(--vp-c-warning-soft);
  --block-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.vp-content .custom-block.warning .custom-block-title,
.vp-content .custom-block.caution .custom-block-title { color: var(--vp-c-yellow-1); }
.vp-content .custom-block.danger {
  background: var(--vp-c-danger-soft);
  --block-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16h.01'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/%3E%3C/svg%3E");
}
.vp-content .custom-block.danger .custom-block-title { color: var(--vp-c-red-1); }

/* Списки ссылок внутри плашек («См. также»): вместо браузерных отступов
   dl по умолчанию – компактные пары «ссылка + описание». */
.vp-content .custom-block dl { margin: 8px 0 0; }
.vp-content .custom-block dt { margin-top: 10px; font-weight: 500; }
.vp-content .custom-block dt:first-child { margin-top: 0; }
.vp-content .custom-block dd { margin: 2px 0 0 16px; color: var(--vp-c-text-2); }
.vp-content .custom-block dd p { margin: 0; }

/* ---------- API-сигнатуры ---------- */
.vp-content dl.py > dt, .vp-content dl.c > dt, .vp-content dl.std > dt,
.vp-content dl.function > dt, .vp-content dl.method > dt, .vp-content dl.class > dt,
.vp-content dl.classmethod > dt, .vp-content dl.staticmethod > dt,
.vp-content dl.exception > dt, .vp-content dl.attribute > dt,
.vp-content dl.data > dt, .vp-content dl.describe > dt, .vp-content dl.cmdoption > dt,
.vp-content dt.sig {
  font-family: var(--vp-font-family-mono);
  font-size: .9em;
  line-height: 1.7;
  padding: 8px 12px 8px calc(12px + 2.5em);
  text-indent: -2.5em;
  background: var(--vp-c-bg-alt);
  border-left: 3px solid var(--vp-c-brand-1);
  border-radius: 0 6px 6px 0;
  margin-top: 24px;
  overflow-x: auto;
}
.vp-content dl.py > dd, .vp-content dl.c > dd, .vp-content dl.std > dd,
.vp-content dl.function > dd, .vp-content dl.method > dd, .vp-content dl.class > dd,
.vp-content dl.classmethod > dd, .vp-content dl.staticmethod > dd,
.vp-content dl.exception > dd, .vp-content dl.attribute > dd,
.vp-content dl.data > dd, .vp-content dl.describe > dd, .vp-content dl.cmdoption > dd {
  margin: 8px 0 24px 12px;
  padding-left: 16px;
  border-left: 1px solid var(--vp-c-divider);
}

/* Внутри сигнатур инлайн-код не превращаем в чип: фон там уже серый.
   Цвет не сбрасываем – его задают токены ниже (.sig-name, .descname …). */
.vp-content dt.sig code, .vp-content dt.sig tt,
.vp-content :is(dl.py, dl.c, dl.std, dl.function, dl.method, dl.class,
  dl.classmethod, dl.staticmethod, dl.exception, dl.attribute,
  dl.data, dl.describe, dl.cmdoption) > dt :is(code, tt) {
  font-size: 1em;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Токены сигнатур: современный Sphinx */
.vp-content dt .sig-prename { color: var(--sig-namespace); }
.vp-content dt .sig-name { color: var(--sig-func); font-weight: 600; }
.vp-content dt .sig-paren { color: var(--sig-operator); }
.vp-content dt em.property { color: var(--sig-keyword); font-style: normal; font-weight: 600; }
.vp-content dt em.sig-param, .vp-content dt em.sig-param .n { color: var(--sig-param); font-style: normal; }
.vp-content dt em.sig-param .o { color: var(--sig-operator); }
.vp-content dt em.sig-param .default_value { color: var(--sig-default); }
.vp-content dt .sig-return-icon { color: var(--sig-operator); }
.vp-content dt .sig-return-typehint,
.vp-content dt .sig-return-typehint * { color: var(--sig-type) !important; }

/* Токены сигнатур: старый Sphinx (tt.descname / big / em) */
.vp-content dt .descclassname { color: var(--sig-namespace); background: transparent; padding: 0; }
.vp-content dt .descname { color: var(--sig-func); font-weight: 600; background: transparent; padding: 0; }
.vp-content dt big { color: var(--sig-operator); font-size: 1em; }
.vp-content dt > em, .vp-content dt .optional { color: var(--sig-param); font-style: normal; }

/* Упоминание параметра сигнатуры в тексте описания – как в самой сигнатуре */
.vp-content em.sig-param-ref {
  font-family: var(--vp-font-family-mono);
  font-size: .875em;
  font-style: normal;
  color: var(--sig-param);
}

/* field-list («Параметры», «Возвращает») */
.vp-content dl.field-list {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 4px 16px;
  margin: 16px 0;
}
.vp-content dl.field-list > dt { font-weight: 600; }
.vp-content dl.field-list > dd { margin: 0; }
.vp-content dl.field-list > dd > p:first-child { margin-top: 0; }
.vp-content dl.field-list > dd > p:last-child { margin-bottom: 0; }

/* В узкой статье «Параметры/Возвращает» складываются в одну колонку */
@container doc (max-width: 480px) {
  .vp-content dl.field-list { grid-template-columns: 1fr; gap: 2px; }
  .vp-content dl.field-list > dd { margin-bottom: 8px; }
}

/* ---------- Директивы версий ---------- */
.vp-content .versionadded,
.vp-content .versionchanged,
.vp-content .deprecated,
.vp-content .deprecated-removed,
.vp-content .versionremoved {
  margin: 16px 0;
  padding: 0 0 0 12px;
  font-size: .9em;
  border-left: 2px solid var(--vp-ver-added);
}
.vp-content .versionchanged { border-left-color: var(--vp-ver-changed); }
.vp-content .deprecated,
.vp-content .deprecated-removed,
.vp-content .versionremoved { border-left-color: var(--vp-ver-removed); }
.vp-content .versionmodified { font-weight: 600; color: var(--vp-c-text-2); }
.vp-content .versionadded p, .vp-content .versionchanged p,
.vp-content .deprecated p, .vp-content .deprecated-removed p,
.vp-content .versionremoved p { margin: 4px 0; }

/* ---------- Таблицы ---------- */
.vp-content table.docutils {
  border-collapse: collapse;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.55;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  width: fit-content;
}
.vp-content table.docutils th {
  background: var(--vp-c-bg-alt);
  font-weight: 600;
  text-align: left;
}
/* Только горизонтальные разделители + зебра: сетка из вертикальных линий
   перегружала таблицу. Выравнивание по верху связывает многострочные ячейки. */
.vp-content table.docutils th,
.vp-content table.docutils td {
  padding: 8px 16px;
  border: none;
  border-bottom: 1px solid var(--vp-c-divider);
  vertical-align: top;
}
.vp-content table.docutils tr:last-child td { border-bottom: none; }
.vp-content table.docutils tbody tr:nth-child(even) td {
  background: var(--vp-c-bg-soft);
}
/* Абзацы и списки в ячейках без внешних полей – их отступ раздувал строки. */
.vp-content table.docutils th p,
.vp-content table.docutils td p { margin: 0; }
.vp-content table.docutils td p + p { margin-top: 8px; }
.vp-content table.docutils td ul,
.vp-content table.docutils td ol { margin: 4px 0; }
/* Код в ячейках не переносится: чип, разорванный на две строки, читается
   плохо; широкой таблице поможет горизонтальная прокрутка. */
.vp-content table.docutils code,
.vp-content table.docutils tt { white-space: nowrap; }
/* Таблицы с объединёнными ячейками (colspan/rowspan): без вертикальных
   линий группировка не читается – возвращаем полную сетку, а зебру,
   которая режет объединённые ячейки поперёк, убираем. */
.vp-content table.docutils:has([colspan], [rowspan]) th,
.vp-content table.docutils:has([colspan], [rowspan]) td {
  border: 1px solid var(--vp-c-divider);
}
.vp-content table.docutils:has([colspan], [rowspan]) tbody tr:nth-child(even) td {
  background: transparent;
}
.vp-content table.footnote,
.vp-content table.footnote td,
.vp-content table.footnote th { border: none; }
.vp-content table.footnote tbody tr:nth-child(even) td { background: transparent; }

/* ---------- genindex / modindex ---------- */
.vp-content table.genindextable { width: 100%; }
.vp-content table.genindextable td { vertical-align: top; padding: 0 14px 0 0; }
.vp-content table.genindextable dl { margin: 0; }
.vp-content table.genindextable dd { margin-left: 20px; }
.vp-content .genindex-jumpbox,
.vp-content .modindex-jumpbox {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--vp-c-border-card);
  border-radius: 8px;
  line-height: 2;
  color: var(--vp-c-text-3); /* приглушает разделители « | » между буквами */
}

/* ---------- Указатель модулей (py-modindex) ---------- */
.vp-content table.modindextable { width: 100%; border-collapse: collapse; }
.vp-content table.modindextable td {
  padding: 8px 12px 8px 0;
  border: none;
  border-top: 1px solid var(--vp-c-divider);
  vertical-align: top;
}
.vp-content table.modindextable img { vertical-align: middle; }
/* Колонка с именем модуля сжимается по содержимому – описания выровнены. */
.vp-content table.modindextable td:nth-child(2) { width: 1%; white-space: nowrap; }
.vp-content table.modindextable td:first-child { width: 0; padding: 0; }
/* Пустые строки-распорки между буквами не нужны. */
.vp-content table.modindextable tr.pcap { display: none; }
/* Буква – заголовок раздела, без линии сверху. */
.vp-content table.modindextable tr.cap td {
  border-top: none;
  padding-top: 28px;
  padding-bottom: 2px;
  font-size: 20px;
}
/* Описание модуля: обычное начертание читается лучше курсива. */
.vp-content table.modindextable em {
  font-style: normal;
  font-size: .95em;
  color: var(--vp-c-text-2);
}
/* Узкий контейнер: имя модуля и описание в столбик, без таблицы. */
@container doc (max-width: 560px) {
  .vp-content table.modindextable,
  .vp-content table.modindextable tbody,
  .vp-content table.modindextable tr,
  .vp-content table.modindextable td {
    display: block;
    width: auto;
    white-space: normal;
  }
  .vp-content table.modindextable td { border: none; padding: 0; }
  .vp-content table.modindextable td:first-child { display: none; }
  .vp-content table.modindextable td + td + td { margin-top: 2px; }
  .vp-content table.modindextable tr {
    padding: 10px 0;
    border-top: 1px solid var(--vp-c-divider);
  }
  .vp-content table.modindextable tr.cap { border-top: none; padding: 20px 0 2px; }
  .vp-content table.modindextable tr.cap td { padding: 0; }
}

/* ---------- Toctree на index/contents ---------- */
.vp-content .toctree-wrapper { margin: 20px 0; }
.vp-content .toctree-wrapper ul { list-style: none; padding-left: 0; margin: 0; }
.vp-content .toctree-wrapper a { text-decoration: none; }
/* Наведение подсвечивается цветом; подчёркивание залезало бы и на
   английский подзаголовок (.toctree-en) – декорация ссылки
   распространяется на всё её содержимое. */
.vp-content .toctree-wrapper a:hover { color: var(--vp-c-brand-2); }

/* Верхний уровень – заголовок группы, группы разделены воздухом. */
.vp-content .toctree-wrapper li.toctree-l1 { margin: 18px 0; }
.vp-content .toctree-wrapper li.toctree-l1 > a { font-weight: 600; }

/* Вложенные уровни: отступ и направляющая линия, как в дереве файлов. */
.vp-content .toctree-wrapper li ul {
  margin: 6px 0 2px 4px;
  padding-left: 16px;
  border-left: 1px solid var(--vp-c-divider);
}
.vp-content .toctree-wrapper li li { margin: 5px 0; }
.vp-content .toctree-wrapper li li a {
  font-size: .95em;
  line-height: 1.5;
}
.vp-content .caption, .vp-content .caption-text { font-weight: 600; }

/* ---------- Главная ----------
   .vp-home – контейнер «home»: сетка карточек подстраивается под его ширину.
   Каждая .vp-card – тоже контейнер: её текст масштабируется от ширины
   самой карточки (cqi), где бы она ни лежала. */
.vp-home {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(24px, 3vw + 12px, 48px) 0 clamp(56px, 5vw + 40px, 96px);
  container: home / inline-size;
}
.vp-home h1 {
  font-size: 32px;
  font-size: clamp(25px, 1.9cqi + 19px, 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.vp-home-lead { color: var(--vp-c-text-2); margin: 0 0 clamp(28px, 3cqi + 12px, 48px); max-width: 720px; }
.vp-home-h2 {
  font-size: 20px;
  font-size: clamp(18px, .55cqi + 16.2px, 20px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.vp-home-h2-hint { font-size: 14px; font-weight: 500; color: var(--vp-c-text-2); }
.vp-home-sections { margin-bottom: clamp(36px, 4cqi, 56px); }
.vp-card-desc {
  font-size: 13.3333px;
  font-size: clamp(12px, 1.2cqi + 10.5px, 13.3333px);
  line-height: 1.35;
  color: var(--vp-c-text-2);
}
.vp-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
/* Узкая главная (телефон): карточки версий в две колонки вместо одной */
@container home (max-width: 430px) {
  .vp-home-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
}
.vp-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(12px, 4cqi, 16px);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-border-card);
  border-radius: 8px;
  text-decoration: none;
  container-type: inline-size;
}
.vp-card:hover { border-color: var(--vp-c-brand-1); }
.vp-card-version {
  font-size: 16px;
  font-size: clamp(14px, 1.6cqi + 11.5px, 16px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--vp-c-text-1);
}
.vp-card-hint {
  font-size: 13.3333px;
  font-size: clamp(12px, 1.2cqi + 10.5px, 13.3333px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}

/* ---------- Поиск ----------
   Модалка – VPLocalSearchBox (vp-search.css); здесь только страница /search.html */
.vp-search-results {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.vp-search-results li a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--vp-c-text-1);
  text-decoration: none;
}
.vp-search-results li a mark {
  background: transparent;
  color: var(--vp-c-brand-1);
  font-weight: 600;
}
.vp-search-results li a .kind {
  float: right;
  margin-left: 8px;
  font-size: 11px;
  line-height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  color: var(--vp-c-text-2);
  background: var(--vp-c-default-soft);
}
.vp-search-results li a .kind-api {
  color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
}
.vp-search-results li a .title.mono {
  font-family: var(--vp-font-family-mono);
  font-size: 13px;
}
.vp-search-results li a .snippet {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--vp-c-text-2);
}
.vp-search-results li a .snippet mark { font-weight: 500; }
.vp-search-results li a .path {
  display: block;
  font-size: 12px;
  color: var(--vp-c-text-3);
}
.vp-search-results li a:hover,
.vp-search-results li.selected a { background: var(--vp-c-bg-soft); }
.vp-search-hint {
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--vp-c-text-3);
  border-top: 1px solid var(--vp-c-divider);
}
.vp-search-page-input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--vp-c-text-1);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-border);
  border-radius: 8px;
  outline: none;
}
.vp-search-page-input:focus { border-color: var(--vp-c-brand-1); }
.vp-search-page-results { padding: 16px 0; }

/* ---------- Fallback и 404 ---------- */
.vp-404 { text-align: center; padding: 96px 0; }
.vp-404 h1 { font-size: 64px; margin: 0; }
.vp-fallback img { max-width: 100%; }

/* ---------- Просмотр исходников (/src/…) ---------- */
.vp-source { max-width: 100%; }
.vp-source .vp-content h1 { margin-bottom: 4px; }
.vp-source .vp-content h1 code {
  background: transparent; padding: 0; font-size: 28px; color: inherit;
}
.vp-source-meta {
  color: var(--vp-c-text-2); font-size: 14px; margin-top: 0;
}
.vp-source-code {
  margin: 24px 0; background: var(--vp-c-bg-alt);
  border-left: 3px solid var(--vp-c-brand-1);
  border-radius: 0 6px 6px 0;
  overflow-x: auto;
}
.vp-source-code pre {
  margin: 0; padding: 16px 0; font-size: 13px; line-height: 1.6;
}
.vp-source-code code { display: block; min-width: max-content; }
.src-line { display: block; padding: 0 24px 0 0; }
.src-line:target { background: rgba(52, 81, 178, 0.12); }
html.dark .src-line:target { background: rgba(165, 180, 252, 0.14); }
.src-lineno {
  display: inline-block; width: 56px; padding-right: 16px;
  text-align: right; color: var(--vp-c-text-3);
  text-decoration: none; user-select: none;
  position: sticky; left: 0; background: var(--vp-c-bg-alt);
}
.src-lineno:hover { color: var(--vp-c-brand-1); }

/* Просмотр .md (?view=1): длинные абзацы переносятся, а не уезжают вбок.
   Висячий отступ равен ширине номера строки (56 + 16), поэтому
   продолжение перенесённой строки выравнивается за номером. */
.vp-md-source code { min-width: 0; }
.vp-md-source .src-line {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding-left: 72px;
  text-indent: -72px;
}

/* Листинг каталога исходников (/src/…/Lib/multiprocessing) */
.vp-source-listing {
  list-style: none;
  margin: 24px 0;
  padding: 8px 0;
  border: 1px solid var(--vp-c-border-card);
  border-radius: 8px;
  font-family: var(--vp-font-family-mono);
  font-size: 14px;
}
.vp-source-listing li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 6px 16px;
}
.vp-source-listing li:hover { background: var(--vp-c-bg-soft); }
.vp-source-listing a {
  text-decoration: none;
  overflow-wrap: anywhere;
}
.vp-source-listing li.dir a { font-weight: 600; }
.vp-source-listing li.dir a::before { content: "📁 "; }
.vp-source-listing li.file a::before { content: "📄 "; }
.vp-source-listing .size {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--vp-c-text-3);
  font-size: 12px;
}

/* ---------- Возврат после перехода по якорю ---------- */
.vp-anchor-back {
  position: fixed;
  bottom: calc(24px + var(--vp-safe-bottom));
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px 4px 8px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 24px;
  background: var(--vp-c-bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.25s, transform 0.25s;
}
.vp-anchor-back.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.vp-anchor-back button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: none;
  border-radius: 16px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--vp-c-text-1);
  cursor: pointer;
}
.vp-anchor-back button:hover { background: var(--vp-c-bg-alt); }
.vp-anchor-back .vp-anchor-back-go { color: var(--vp-c-brand-1); font-weight: 500; }
.vp-anchor-back .vp-anchor-back-close { padding: 4px 6px; color: var(--vp-c-text-3); }
.vp-anchor-back .vp-anchor-back-close:hover { color: var(--vp-c-text-1); }

/* ---------- Hover-превью внутренних ссылок ---------- */
.vp-link-preview {
  position: fixed;
  z-index: 70;
  width: min(420px, calc(100vw - 24px));
  padding: 14px 16px 10px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 10px;
  background: var(--vp-c-bg-elv);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.vp-link-preview.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vp-link-preview { transition: none; }
}
.vp-link-preview-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vp-c-text-1);
}
.vp-link-preview.is-api .vp-link-preview-title {
  font-family: var(--vp-font-family-mono);
  font-size: 13px;
  font-weight: 500;
  word-break: break-word;
}
/* Тело прокручивается; прокрутка не «протекает» на страницу */
.vp-link-preview-body {
  max-height: 230px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vp-c-text-2);
}
.vp-link-preview-body p { margin: 0 0 8px; }
.vp-link-preview-body p:last-child { margin-bottom: 0; }
/* Код-блоки – как в документе, но компактнее */
.vp-link-preview-body [class*="highlight-"],
.vp-link-preview-body > .highlight {
  margin: 8px 0;
  border-radius: 6px;
  background: var(--vp-c-bg-alt);
  overflow-x: auto;
}
.vp-link-preview-body .highlight pre {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.55;
}
.vp-link-preview-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--vp-c-divider);
  font-size: 12px;
  color: var(--vp-c-text-3);
}
.vp-link-preview-from {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vp-link-preview-open {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--vp-c-brand-1);
  text-decoration: none;
  white-space: nowrap;
}
.vp-link-preview-open:hover { text-decoration: underline; }

/* ---------- Блок «Оригинал на английском» ---------- */
.vp-origin {
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: var(--vp-c-bg-alt);
  font-size: 13.3333px;
  line-height: 20px;
  color: var(--vp-c-text-2);
}
.vp-origin p { margin: 0; }
.vp-origin a { color: var(--vp-c-brand-1); text-decoration: none; }
.vp-origin a:hover { text-decoration: underline; }

.vp-aside-origin {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--vp-c-divider);
}
.vp-aside-origin a { color: var(--vp-c-text-2); }
.vp-aside-origin a:hover { color: var(--vp-c-brand-1); }

.vp-footer a { color: var(--vp-c-text-2); text-decoration: underline; text-underline-offset: 2px; }
.vp-footer a:hover { color: var(--vp-c-brand-1); }