/* mod_blog_toc — base */
.mod-blog-toc {
  font-size: var(--mod-toc-fs-h2, 0.875rem);
  --blog-accent: var(--c-accent, var(--bs-link-color, var(--bs-primary, #16456b)));
  --blog-muted: var(--c-muted, var(--bs-secondary-color, #4a5c72));
  --blog-text: var(--c-text, var(--bs-body-color, #18181b));
  --blog-border: var(--c-border-strong, var(--bs-border-color, #cbd5e1));
  --blog-bg: var(--c-bg, var(--bs-tertiary-bg, #f1f5f9));
  --blog-surface: var(--c-surface-solid, var(--bs-body-bg, #fff));
  --mod-toc-sticky-offset: 0px;
  --mod-toc-inactive-weight: 400;
  --mod-toc-active-weight: 400;
  --mod-toc-inactive-opacity: 1;
  --mod-toc-active-opacity: 1;
  --mod-toc-active-color: var(--blog-accent, #2563eb);
  --mod-toc-row-min: 1.75rem;
  --mod-toc-item-gap: 0.125rem;
  --mod-toc-plate-pad-y: 0.625rem;
  --mod-toc-line-height: 1.35;
}

.mod-blog-toc__title {
  font-family: var(--font-heading, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mod-toc-title-letter-spacing, 0.06em);
  color: var(--blog-muted, #64748b);
  margin: 0 0 0.75rem;
}

.mod-blog-toc--font-custom,
.mod-blog-toc--font-custom .mod-blog-toc__title {
  font-family: var(--mod-toc-font-family, inherit);
}

.mod-blog-toc-host {
  max-width: var(--mod-toc-max-width, none);
}

.mod-blog-toc-host .mod-blog-toc.mod-blog-toc--item-clamp .mod-blog-toc__item a,
.mod-blog-toc.mod-blog-toc--item-clamp .mod-blog-toc__item a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--mod-toc-item-clamp);
  line-clamp: var(--mod-toc-item-clamp);
  overflow: hidden;
  /* Ellipsis on the last visible line; the box model above needs the link to
     stay a block, so any flex alignment from a preset must not win here. */
  text-overflow: ellipsis;
  white-space: normal;
  /* Measured: with the density min-height on the link itself the box is taller
     than the clamped text (1.58 lines at "relaxed", clamp=1), and the surplus is
     where a sliver of the next line showed through. The link is now exactly N
     lines tall; the row height moves to the item below, so the density setting
     still controls it. */
  min-height: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.mod-blog-toc-host .mod-blog-toc.mod-blog-toc--item-clamp .mod-blog-toc__item,
.mod-blog-toc.mod-blog-toc--item-clamp .mod-blog-toc__item {
  display: flex;
  align-items: center;
  min-height: var(--mod-toc-row-min, 1.75rem);
}

.mod-blog-toc.mod-blog-toc--underline-inactive .mod-blog-toc__item a:not(.is-active) {
  text-decoration-line: underline;
  text-decoration-style: var(--mod-toc-underline-inactive-style, solid);
  text-decoration-thickness: var(--mod-toc-underline-inactive-thickness, auto);
  text-underline-offset: var(--mod-toc-underline-inactive-offset, auto);
}

.mod-blog-toc.mod-blog-toc--underline-hover .mod-blog-toc__item a:hover:not(.is-active) {
  text-decoration-line: underline;
  text-decoration-style: var(--mod-toc-underline-hover-style, var(--mod-toc-underline-inactive-style, solid));
  text-decoration-thickness: var(--mod-toc-underline-hover-thickness, var(--mod-toc-underline-inactive-thickness, auto));
  text-underline-offset: var(--mod-toc-underline-hover-offset, var(--mod-toc-underline-inactive-offset, auto));
}

.mod-blog-toc.mod-blog-toc--underline-active .mod-blog-toc__item a.is-active {
  text-decoration-line: underline;
  text-decoration-style: var(--mod-toc-underline-active-style, var(--mod-toc-underline-inactive-style, solid));
  text-decoration-thickness: var(--mod-toc-underline-active-thickness, var(--mod-toc-underline-inactive-thickness, auto));
  text-underline-offset: var(--mod-toc-underline-active-offset, var(--mod-toc-underline-inactive-offset, auto));
}

.mod-blog-toc--hover-weight .mod-blog-toc__item a:hover:not(.is-active) {
  font-weight: var(--mod-toc-hover-weight);
}

.mod-blog-toc--hover-opacity .mod-blog-toc__item a:hover:not(.is-active) {
  opacity: var(--mod-toc-hover-opacity, 85%);
}

.mod-blog-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mod-toc-item-gap, 0.125rem);
}

.mod-blog-toc__item--top-icon a {
  justify-content: flex-start;
}

/* Which "back to top" item belongs to the current viewport. This is a
   visibility gate, not layout, so it must outrank any display rule a layout
   feature sets on items — the clamp row rule below is one such. */
.mod-blog-toc-host--mobile-active .mod-blog-toc__item--top-desktop {
  display: none !important;
}

.mod-blog-toc-host:not(.mod-blog-toc-host--mobile-active) .mod-blog-toc__item--top-mobile {
  display: none !important;
}

.mod-blog-toc__item--top-custom a {
  font-size: var(--mod-toc-fs-top, var(--mod-toc-fs-h2, 0.875rem));
  font-weight: var(--mod-toc-inactive-weight-top, 400);
  color: var(--mod-toc-inactive-color-top, var(--blog-muted, #64748b));
}

.mod-blog-toc__item--top-custom a.is-active {
  font-weight: var(--mod-toc-active-weight-top, 400);
  color: var(--mod-toc-active-color-top, var(--blog-accent, #2563eb));
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item--top-custom a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-top, var(--mod-toc-hover-color-h2, var(--blog-accent, #2563eb)));
}

.mod-blog-toc__item--top-mobile-custom a {
  font-size: var(--mod-toc-fs-top-mobile, var(--mod-toc-fs-h2, 0.875rem));
  font-weight: var(--mod-toc-inactive-weight-top-mobile, 400);
  color: var(--mod-toc-inactive-color-top-mobile, var(--blog-muted, #64748b));
}

.mod-blog-toc__item--top-mobile-custom a.is-active {
  font-weight: var(--mod-toc-active-weight-top-mobile, 400);
  color: var(--mod-toc-active-color-top-mobile, var(--blog-accent, #2563eb));
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item--top-mobile-custom a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-top-mobile, var(--mod-toc-hover-color-h2, var(--blog-accent, #2563eb)));
}

.mod-blog-toc__top-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  display: block;
  color: currentColor;
  opacity: var(--mod-toc-inactive-opacity, 1);
}

.mod-blog-toc__item--top a.is-active .mod-blog-toc__top-icon,
.mod-blog-toc__item--top-custom a.is-active .mod-blog-toc__top-icon {
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  text-decoration: none;
  line-height: var(--mod-toc-line-height, 1.35) !important;
  min-height: var(--mod-toc-row-min, 1.75rem);
}

.mod-blog-toc--smooth-highlight .mod-blog-toc__item a {
  transition:
    color var(--mod-toc-highlight-transition, 220ms) ease,
    border-color var(--mod-toc-highlight-transition, 220ms) ease,
    background-color var(--mod-toc-highlight-transition, 220ms) ease,
    opacity var(--mod-toc-highlight-transition, 220ms) ease;
}

.mod-blog-toc__item a:hover {
  color: var(--blog-accent, #2563eb);
}

.mod-blog-toc__item--h2 a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-h2, var(--blog-accent, #2563eb));
}

.mod-blog-toc__item--h3 a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-h3, var(--mod-toc-hover-color-nested, var(--blog-accent, #2563eb)));
}

.mod-blog-toc__item--h4 a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-h4, var(--mod-toc-hover-color-nested, var(--blog-accent, #2563eb)));
}

.mod-blog-toc__item--h5 a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-h5, var(--mod-toc-hover-color-nested, var(--blog-accent, #2563eb)));
}

.mod-blog-toc__item--h6 a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-h6, var(--mod-toc-hover-color-nested, var(--blog-accent, #2563eb)));
}

.mod-blog-toc__item--anchor a:hover:not(.is-active) {
  color: var(--mod-toc-hover-color-anchor, var(--mod-toc-hover-color-nested, var(--blog-accent, #2563eb)));
}

.mod-blog-toc__item--h2 a {
  font-size: var(--mod-toc-fs-h2, 0.875rem);
  font-weight: var(--mod-toc-inactive-weight-h2, 400);
  color: var(--mod-toc-inactive-color-h2, var(--blog-muted, #64748b));
}

.mod-blog-toc__item--h2 a.is-active {
  font-weight: var(--mod-toc-active-weight-h2, 400);
  color: var(--mod-toc-active-color-h2, var(--blog-accent, #2563eb));
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item--h3 a {
  padding-left: 1.25rem;
  font-size: var(--mod-toc-fs-h3, 0.8125rem);
  font-weight: var(--mod-toc-inactive-weight-h3, 400);
  color: var(--mod-toc-inactive-color-h3, var(--blog-muted, #64748b));
}

.mod-blog-toc__item--h3 a.is-active {
  font-weight: var(--mod-toc-active-weight-h3, 400);
  color: var(--mod-toc-active-color-h3, var(--blog-accent, #2563eb));
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item--h4 a {
  padding-left: 1.75rem;
  font-size: var(--mod-toc-fs-h4, 0.8125rem);
  font-weight: var(--mod-toc-inactive-weight-h4, 400);
  color: var(--mod-toc-inactive-color-h4, var(--blog-muted, #64748b));
}

.mod-blog-toc__item--h4 a.is-active {
  font-weight: var(--mod-toc-active-weight-h4, 400);
  color: var(--mod-toc-active-color-h4, var(--blog-accent, #2563eb));
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item--h5 a {
  padding-left: 2.125rem;
  font-size: var(--mod-toc-fs-h5, 0.8125rem);
  font-weight: var(--mod-toc-inactive-weight-h5, 400);
  color: var(--mod-toc-inactive-color-h5, var(--blog-muted, #64748b));
}

.mod-blog-toc__item--h5 a.is-active {
  font-weight: var(--mod-toc-active-weight-h5, 400);
  color: var(--mod-toc-active-color-h5, var(--blog-accent, #2563eb));
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item--h6 a {
  padding-left: 2.5rem;
  font-size: var(--mod-toc-fs-h6, 0.8125rem);
  font-weight: var(--mod-toc-inactive-weight-h6, 400);
  color: var(--mod-toc-inactive-color-h6, var(--blog-muted, #64748b));
}

.mod-blog-toc__item--h6 a.is-active {
  font-weight: var(--mod-toc-active-weight-h6, 400);
  color: var(--mod-toc-active-color-h6, var(--blog-accent, #2563eb));
  opacity: var(--mod-toc-active-opacity, 1);
}

.mod-blog-toc__item--h2 a:not(.is-active),
.mod-blog-toc__item--h3 a:not(.is-active),
.mod-blog-toc__item--h4 a:not(.is-active),
.mod-blog-toc__item--h5 a:not(.is-active),
.mod-blog-toc__item--h6 a:not(.is-active) {
  opacity: var(--mod-toc-inactive-opacity, 1);
}

.mod-blog-toc__item--anchor a {
  padding-left: 1rem;
  font-size: var(--mod-toc-fs-anchor, 0.8125rem);
  font-weight: var(--mod-toc-inactive-weight-anchor, var(--mod-toc-inactive-weight-h3, 400));
  color: var(--mod-toc-inactive-color-anchor, var(--mod-toc-inactive-color-h3, var(--blog-muted, #64748b)));
  font-style: var(--mod-toc-anchor-font-style, normal);
}

.mod-blog-toc__item--anchor a.is-active {
  font-weight: var(--mod-toc-active-weight-anchor, var(--mod-toc-active-weight-h3, 400));
  color: var(--mod-toc-active-color-anchor, var(--mod-toc-active-color-h3, var(--blog-accent, #2563eb)));
  opacity: var(--mod-toc-active-opacity, 1);
}

/* Per-level hover weight */
.mod-blog-toc__item--h2 a:hover:not(.is-active) {
  font-weight: var(--mod-toc-hover-weight-h2, var(--mod-toc-hover-weight, inherit));
}

.mod-blog-toc__item--h3 a:hover:not(.is-active) {
  font-weight: var(--mod-toc-hover-weight-h3, var(--mod-toc-hover-weight, inherit));
}

.mod-blog-toc__item--h4 a:hover:not(.is-active) {
  font-weight: var(--mod-toc-hover-weight-h4, var(--mod-toc-hover-weight, inherit));
}

.mod-blog-toc__item--h5 a:hover:not(.is-active) {
  font-weight: var(--mod-toc-hover-weight-h5, var(--mod-toc-hover-weight, inherit));
}

.mod-blog-toc__item--h6 a:hover:not(.is-active) {
  font-weight: var(--mod-toc-hover-weight-h6, var(--mod-toc-hover-weight, inherit));
}

.mod-blog-toc__item--anchor a:hover:not(.is-active) {
  font-weight: var(--mod-toc-hover-weight-anchor, var(--mod-toc-hover-weight, inherit));
}

.mod-blog-toc__item--anchor a:not(.is-active) {
  opacity: var(--mod-toc-inactive-opacity, 1);
}

.mod-blog-toc__item--anchor a::before {
  content: "↗ ";
  font-style: normal;
  opacity: 0.55;
}

/* "Show arrow symbol" — off */
.mod-blog-toc--anchor-arrow-off .mod-blog-toc__item--anchor:not(.mod-blog-toc__item--anchor-numbered) a::before {
  content: none;
}

/* Numbered anchors: class mod-blog-toc__item--anchor-numbered (see toc.js) */
.mod-blog-toc__item--anchor-numbered a::before {
  content: attr(data-toc-num);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72em;
  font-weight: 600;
  font-style: normal;
  opacity: 0.8;
  white-space: nowrap;
}

.mod-blog-toc__item--anchor-numbered a::after {
  content: "↗";
  margin-left: 0.25rem;
  font-style: normal;
  opacity: 0.55;
}

.mod-blog-toc--numbering-flat .mod-blog-toc__item--anchor-numbered a,
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--anchor-numbered a {
  position: relative;
  padding-left: 2.25rem;
}

.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--anchor-numbered a {
  padding-left: 2.75rem;
}

/* --- Style: default (accent border) ------------------------- */

/* --- Sliding highlight --------------------------------------- *   One element travels between items and borrows the look of the preset's own
   active decoration; the item's static decoration is suppressed meanwhile, so
   the accent is never drawn twice.
\* ------------------------------------------------------------- */

.mod-blog-toc--bar-slide .mod-blog-toc__list {
  position: relative;
}

.mod-blog-toc--bar-slide .mod-blog-toc__slider {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  transition: transform 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}

/* Дерево — едет подсвеченный отрезок линии */
.mod-blog-toc--style-dotted.mod-blog-toc--bar-slide .mod-blog-toc__item:has(a.is-active) {
  border-left-color: transparent;
}

.mod-blog-toc--style-dotted.mod-blog-toc--bar-slide .mod-blog-toc__slider {
  width: var(--mod-toc-dotted-line-width, 1px);
  background: color-mix(
    in srgb,
    var(--mod-toc-dotted-line-active-color, currentColor) var(--mod-toc-dotted-line-active-opacity, 100%),
    transparent
  );
}

/* Плашка — едет фон вместе с полосой слева */
.mod-blog-toc--style-plate.mod-blog-toc--bar-slide .mod-blog-toc__item a.is-active {
  border-left-color: transparent;
  background: transparent;
}

.mod-blog-toc--style-plate.mod-blog-toc--bar-slide .mod-blog-toc__slider {
  right: 0;
  width: auto;
  background: color-mix(in srgb, var(--mod-toc-plate-active-bg, var(--c-accent-soft, color-mix(in srgb, var(--blog-accent, #16456b) 8%, transparent))) var(--mod-toc-plate-bg-opacity, 100%), transparent);
  border-left: 3px solid var(--mod-toc-plate-active-bar, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

/* Капсулы — едет сама капсула */
.mod-blog-toc--style-pills.mod-blog-toc--bar-slide .mod-blog-toc__item a.is-active {
  background: transparent;
}

.mod-blog-toc--style-pills.mod-blog-toc--bar-slide .mod-blog-toc__slider {
  right: 0;
  width: auto;
  background: var(--mod-toc-pills-active-bg, var(--blog-accent, #2563eb));
  border-radius: var(--mod-toc-pills-radius, 999px);
}

/* Рамки — едет рамка вместе с фоном */
.mod-blog-toc--style-boxed.mod-blog-toc--bar-slide .mod-blog-toc__item a.is-active {
  background: transparent;
  border-color: var(--mod-toc-boxed-border, transparent);
}

.mod-blog-toc--style-boxed.mod-blog-toc--bar-slide .mod-blog-toc__slider {
  right: 0;
  width: auto;
  background: var(--mod-toc-boxed-active-bg, transparent);
  border: var(--mod-toc-boxed-border-width, 1px) var(--mod-toc-boxed-border-style, solid) var(--mod-toc-boxed-active-border, currentColor);
  border-radius: var(--mod-toc-boxed-radius, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .mod-blog-toc-details,
  .mod-blog-toc-details *,
  nav[data-mod-blog-toc],
  nav[data-mod-blog-toc] * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- Style: minimal ----------------------------------------- */

.mod-blog-toc--style-minimal .mod-blog-toc__title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8125rem;
}

.mod-blog-toc--style-minimal .mod-blog-toc__item a {
  padding-top: 0;
  padding-bottom: 0;
}

.mod-blog-toc--style-minimal .mod-blog-toc__item a:hover {
  text-decoration: var(--mod-toc-minimal-hover-decor, underline);
  text-decoration-color: var(--mod-toc-minimal-hover-color, var(--blog-accent, #2563eb));
  text-decoration-thickness: var(--mod-toc-minimal-hover-width, 1px);
  text-underline-offset: 2px;
}

.mod-blog-toc--style-minimal .mod-blog-toc__item--h3 a,
.mod-blog-toc--style-minimal .mod-blog-toc__item--h4 a,
.mod-blog-toc--style-minimal .mod-blog-toc__item--h5 a,
.mod-blog-toc--style-minimal .mod-blog-toc__item--h6 a,
.mod-blog-toc--style-minimal .mod-blog-toc__item--anchor a {
  padding-left: 0.875rem;
}

/* --- Style: dotted (tree) ----------------------------------- */
/*
 * Rail: border-left on each li (same margin-left → one vertical line, gap: 0).
 * Text indent: padding-left on the link only (nested or flat).
 */

.mod-blog-toc--style-dotted .mod-blog-toc__list {
  gap: 0;
}

.mod-blog-toc--style-dotted .mod-blog-toc__item {
  margin-left: var(--mod-toc-dotted-rail-offset, 0.35rem);
  border-left-width: var(--mod-toc-dotted-line-width, 1px);
  border-left-style: var(--mod-toc-dotted-line-style, dotted);
  border-left-color: color-mix(
    in srgb,
    var(--mod-toc-dotted-line-color, var(--blog-border, #cbd5e1)) var(--mod-toc-dotted-line-opacity, 100%),
    transparent
  );
}

.mod-blog-toc--style-dotted .mod-blog-toc__item:has(a:hover):not(:has(a.is-active)) {
  border-left-style: var(--mod-toc-dotted-line-hover-style, var(--mod-toc-dotted-line-style, dotted));
  border-left-color: color-mix(
    in srgb,
    var(--mod-toc-dotted-line-hover-color, var(--mod-toc-dotted-line-color, var(--blog-border, #cbd5e1)))
      var(--mod-toc-dotted-line-opacity, 100%),
    transparent
  );
}

.mod-blog-toc--style-dotted.mod-blog-toc--smooth-highlight .mod-blog-toc__item {
  transition: border-color var(--mod-toc-highlight-transition, 220ms) ease;
}

.mod-blog-toc--style-dotted .mod-blog-toc__item:has(a.is-active) {
  border-left-style: var(--mod-toc-dotted-line-active-style, solid);
  border-left-color: color-mix(
    in srgb,
    var(--mod-toc-dotted-line-active-color, currentColor) var(--mod-toc-dotted-line-active-opacity, 100%),
    transparent
  );
}

.mod-blog-toc--style-dotted .mod-blog-toc__item--h2:has(a.is-active) {
  color: var(--mod-toc-active-color-h2, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-dotted .mod-blog-toc__item--h3:has(a.is-active) {
  color: var(--mod-toc-active-color-h3, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-dotted .mod-blog-toc__item--h4:has(a.is-active) {
  color: var(--mod-toc-active-color-h4, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-dotted .mod-blog-toc__item--h5:has(a.is-active) {
  color: var(--mod-toc-active-color-h5, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-dotted .mod-blog-toc__item--h6:has(a.is-active) {
  color: var(--mod-toc-active-color-h6, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-dotted .mod-blog-toc__item--anchor:has(a.is-active) {
  color: var(--mod-toc-active-color-h3, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-dotted .mod-blog-toc__item a {
  margin-left: 0;
  border-left: none;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-right: 0;
  padding-left: var(--mod-toc-dotted-text-indent, 1rem);
}

.mod-blog-toc--style-dotted.mod-blog-toc--density-compact .mod-blog-toc__item a {
  padding-top: 0.0625rem;
  padding-bottom: 0.0625rem;
}

.mod-blog-toc--style-dotted.mod-blog-toc--density-relaxed .mod-blog-toc__item a {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.mod-blog-toc--style-dotted:not(.mod-blog-toc--dotted-flat) .mod-blog-toc__item--h3 a {
  padding-left: 1.5rem;
}

.mod-blog-toc--style-dotted:not(.mod-blog-toc--dotted-flat) .mod-blog-toc__item--h4 a {
  padding-left: 2rem;
}

.mod-blog-toc--style-dotted:not(.mod-blog-toc--dotted-flat) .mod-blog-toc__item--h5 a {
  padding-left: 2.375rem;
}

.mod-blog-toc--style-dotted:not(.mod-blog-toc--dotted-flat) .mod-blog-toc__item--h6 a {
  padding-left: 2.75rem;
}

.mod-blog-toc--style-dotted:not(.mod-blog-toc--dotted-flat) .mod-blog-toc__item--anchor a {
  padding-left: 1.25rem;
  font-style: var(--mod-toc-anchor-font-style, normal);
}

.mod-blog-toc--style-dotted.mod-blog-toc--dotted-flat .mod-blog-toc__item a {
  padding-left: var(--mod-toc-dotted-flat-padding-left, 1rem);
}

/* --- Style: pills ------------------------------------------- */

.mod-blog-toc--style-pills .mod-blog-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mod-blog-toc--style-pills .mod-blog-toc__item a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0.35rem 0.75rem;
  border-radius: var(--mod-toc-pills-radius, 999px);
  margin-bottom: 0;
  text-align: left;
}

.mod-blog-toc--style-pills .mod-blog-toc__item a {
  background: var(--mod-toc-pills-bg, transparent);
}

.mod-blog-toc--style-pills .mod-blog-toc__item a:hover:not(.is-active) {
  background: var(--mod-toc-pills-hover-bg, var(--blog-bg, #f1f5f9));
  color: var(--mod-toc-hover-color-h2, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-pills .mod-blog-toc__item a.is-active {
  color: var(--mod-toc-pills-active-text, #fff);
  background: var(--mod-toc-pills-active-bg, var(--mod-toc-active-color-h2, var(--blog-accent, #2563eb)));
}

.mod-blog-toc--style-pills .mod-blog-toc__item--h3 a.is-active,
.mod-blog-toc--style-pills .mod-blog-toc__item--h4 a.is-active,
.mod-blog-toc--style-pills .mod-blog-toc__item--h5 a.is-active,
.mod-blog-toc--style-pills .mod-blog-toc__item--h6 a.is-active,
.mod-blog-toc--style-pills .mod-blog-toc__item--anchor a.is-active {
  background: var(--mod-toc-pills-active-bg, var(--mod-toc-active-color-h3, var(--blog-accent, #2563eb)));
}

.mod-blog-toc--style-pills .mod-blog-toc__item--h2 a {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.mod-blog-toc--style-pills .mod-blog-toc__item--h3 a {
  padding-left: 1.25rem;
  padding-right: 0.75rem;
}

.mod-blog-toc--style-pills .mod-blog-toc__item--h4 a {
  padding-left: 1.625rem;
  padding-right: 0.75rem;
}

.mod-blog-toc--style-pills .mod-blog-toc__item--h5 a {
  padding-left: 2rem;
  padding-right: 0.75rem;
}

.mod-blog-toc--style-pills .mod-blog-toc__item--h6 a {
  padding-left: 2.375rem;
  padding-right: 0.75rem;
}

.mod-blog-toc--style-pills .mod-blog-toc__item--anchor a {
  padding-left: 1.125rem;
  padding-right: 0.75rem;
  font-style: var(--mod-toc-anchor-font-style, normal);
}

/* --- Style: numbered ---------------------------------------- */

.mod-blog-toc--style-numbered .mod-blog-toc__list {
  counter-reset: mod-toc;
}

.mod-blog-toc--style-numbered .mod-blog-toc__item {
  counter-increment: mod-toc;
}

.mod-blog-toc--style-numbered .mod-blog-toc__item a {
  padding-left: 1.75rem;
  position: relative;
}

.mod-blog-toc--style-numbered .mod-blog-toc__item a::before {
  content: counter(mod-toc) ".";
  position: absolute;
  left: 0;
  font-weight: var(--mod-toc-numbered-marker-weight, 600);
  font-size: var(--mod-toc-numbered-marker-size, 0.75rem);
  color: var(--mod-toc-numbered-marker-color, var(--blog-muted, #64748b));
  font-style: normal;
  opacity: 1;
}

.mod-blog-toc--style-numbered .mod-blog-toc__item a.is-active::before {
  color: var(--mod-toc-numbered-marker-active-color, currentColor);
}

.mod-blog-toc--numbering-flat.mod-blog-toc--style-numbered .mod-blog-toc__item a::before,
.mod-blog-toc--numbering-hierarchical.mod-blog-toc--style-numbered .mod-blog-toc__item a::before {
  content: none;
}

.mod-blog-toc--style-numbered .mod-blog-toc__item--anchor-numbered a::before {
  content: attr(data-toc-num);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* --- Style: underline --------------------------------------- */

/* --- Style: boxed ------------------------------------------- */

.mod-blog-toc--style-boxed .mod-blog-toc__item a {
  padding: 0.5rem 0.625rem;
  margin-bottom: 0.35rem;
  border-width: var(--mod-toc-boxed-border-width, 1px);
  border-style: var(--mod-toc-boxed-border-style, solid);
  border-color: var(--mod-toc-boxed-border-color, var(--blog-border, #e2e8f0));
  border-radius: var(--mod-toc-boxed-radius, 8px);
  background: var(--mod-toc-boxed-bg, var(--blog-surface, #fff));
}

.mod-blog-toc--style-boxed .mod-blog-toc__item a:hover:not(.is-active) {
  border-color: var(--mod-toc-boxed-hover-border, var(--blog-accent, #2563eb));
  background: var(--mod-toc-boxed-hover-bg, var(--blog-bg, #f8f9fb));
  color: var(--mod-toc-hover-color-h2, var(--blog-accent, #2563eb));
}

.mod-blog-toc--style-boxed .mod-blog-toc__item a.is-active {
  border-color: var(--mod-toc-boxed-active-border, currentColor);
  background: var(--mod-toc-boxed-active-bg, var(--blog-bg, #f1f5f9));
}

/* --- Item state (active / inactive) ------------------------- */

/* --- Item state fallbacks (borders use currentColor) ---------- */

/* --- JS numbering (flat / hierarchical) --------------------- */

.mod-blog-toc--numbering-flat .mod-blog-toc__item a[data-toc-num],
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item a[data-toc-num] {
  position: relative;
  padding-left: 2.25rem;
}

.mod-blog-toc--numbering-flat .mod-blog-toc__item a[data-toc-num]::before,
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item a[data-toc-num]::before {
  content: attr(data-toc-num);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--mod-toc-numbered-marker-size, 0.72em);
  font-weight: var(--mod-toc-numbered-marker-weight, 600);
  font-style: normal;
  color: var(--mod-toc-numbered-marker-color, var(--blog-muted, #64748b));
  opacity: 0.8;
  white-space: nowrap;
}

.mod-blog-toc--numbering-flat .mod-blog-toc__item--anchor-numbered a[data-toc-num]::before,
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--anchor-numbered a[data-toc-num]::before {
  content: attr(data-toc-num);
}

.mod-blog-toc--numbering-flat .mod-blog-toc__item a.is-active[data-toc-num]::before,
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item a.is-active[data-toc-num]::before {
  color: var(--mod-toc-numbered-marker-active-color, inherit);
  opacity: 0.95;
}

.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--h4 a[data-toc-num],
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--h5 a[data-toc-num],
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--h6 a[data-toc-num] {
  padding-left: 2.75rem;
}

.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--h5 a[data-toc-num],
.mod-blog-toc--numbering-hierarchical .mod-blog-toc__item--h6 a[data-toc-num] {
  padding-left: 3.25rem;
}

/* --- Style: plate ------------------------------------------- */

.mod-blog-toc--style-plate .mod-blog-toc__list {
  gap: 0;
}

.mod-blog-toc--style-plate .mod-blog-toc__item a {
  min-height: var(--mod-toc-row-min, 1.75rem);
  padding: var(--mod-toc-plate-pad-y, 0.625rem) 0.75rem var(--mod-toc-plate-pad-y, 0.625rem) 1rem;
  border-bottom: 1px solid var(--mod-toc-plate-sep, rgb(203 213 225 / 55%));
  border-left: 3px solid var(--mod-toc-plate-bar, transparent);
  margin-left: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--mod-toc-plate-bg, transparent) var(--mod-toc-plate-bg-opacity, 100%), transparent);
}

.mod-blog-toc--style-plate .mod-blog-toc__item:last-child a {
  border-bottom: none;
}

.mod-blog-toc--style-plate .mod-blog-toc__item a.is-active {
  border-left-color: var(--mod-toc-plate-active-bar, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
  background: color-mix(in srgb, var(--mod-toc-plate-active-bg, var(--c-accent-soft, color-mix(in srgb, var(--blog-accent, #16456b) 8%, transparent))) var(--mod-toc-plate-bg-opacity, 100%), transparent);
  color: var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb)));
  font-weight: var(--mod-toc-active-weight-h2, 500);
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h3 a.is-active {
  color: var(--mod-toc-active-color-h3, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h4 a.is-active {
  color: var(--mod-toc-active-color-h4, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h5 a.is-active {
  color: var(--mod-toc-active-color-h5, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h6 a.is-active {
  color: var(--mod-toc-active-color-h6, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h3 a {
  padding-left: 1.5rem;
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h4 a {
  padding-left: 2rem;
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h5 a {
  padding-left: 2.5rem;
}

.mod-blog-toc--style-plate .mod-blog-toc__item--h6 a {
  padding-left: 3rem;
}

.mod-blog-toc--style-plate .mod-blog-toc__item a:hover:not(.is-active) {
  background: color-mix(in srgb, var(--mod-toc-plate-hover-bg, rgb(241 245 249 / 65%)) var(--mod-toc-plate-bg-opacity, 100%), transparent);
  border-left-color: var(--mod-toc-plate-hover-bar, var(--mod-toc-plate-bar, transparent));
}

/* --- Style: feed / feed_plain ------------------------------- */

.mod-blog-toc--style-feed .mod-blog-toc__list,
.mod-blog-toc--style-feed_plain .mod-blog-toc__list {
  gap: 0;
}

.mod-blog-toc--style-feed_plain .mod-blog-toc__list {
  gap: var(--mod-toc-item-gap, 0.1875rem);
}

.mod-blog-toc--style-feed .mod-blog-toc__item a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item a {
  display: block;
  padding: 0.5rem 0;
  margin-left: 0;
  text-decoration: none !important;
  border-radius: 0;
  color: var(--mod-toc-inactive-color-h2, var(--c-text-2, var(--blog-text, #1a1a2e)));
  line-height: var(--mod-toc-line-height, 1.5) !important;
}

.mod-blog-toc--style-feed .mod-blog-toc__item a {
  border-bottom: 1px solid rgb(24 24 27 / 6%);
}

.mod-blog-toc--style-feed_plain .mod-blog-toc__item a {
  border-bottom: none;
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h2 a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h2 a {
  font-size: var(--mod-toc-fs-h2, 0.81rem);
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h3 a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h3 a {
  font-size: var(--mod-toc-fs-h3, 0.75rem);
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h4 a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h4 a {
  font-size: var(--mod-toc-fs-h4, 0.7rem);
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h5 a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h5 a {
  font-size: var(--mod-toc-fs-h5, 0.7rem);
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h6 a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h6 a {
  font-size: var(--mod-toc-fs-h6, 0.65rem);
}

.mod-blog-toc--style-feed .mod-blog-toc__item--anchor a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--anchor a {
  font-size: var(--mod-toc-fs-anchor, 0.75rem);
}

.mod-blog-toc--style-feed .mod-blog-toc__item:last-child a {
  border-bottom: 0;
  padding-bottom: 0.125rem;
}

.mod-blog-toc--style-feed .mod-blog-toc__item a:hover:not(.is-active),
.mod-blog-toc--style-feed .mod-blog-toc__item a:focus-visible:not(.is-active),
.mod-blog-toc--style-feed_plain .mod-blog-toc__item a:hover:not(.is-active),
.mod-blog-toc--style-feed_plain .mod-blog-toc__item a:focus-visible:not(.is-active) {
  color: var(--mod-toc-hover-color-h2, var(--c-accent, var(--blog-accent, #2563eb)));
  text-decoration: underline dotted !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.mod-blog-toc--style-feed .mod-blog-toc__item a.is-active,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item a.is-active {
  color: var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb)));
  font-weight: var(--mod-toc-active-weight-h2, 500);
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h3 a:not(.is-active),
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h3 a:not(.is-active) {
  color: var(--mod-toc-inactive-color-h3, var(--mod-toc-inactive-color-h2, var(--c-text-2, var(--blog-text, #1a1a2e))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h3 a.is-active,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h3 a.is-active {
  color: var(--mod-toc-active-color-h3, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h4 a:not(.is-active),
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h4 a:not(.is-active) {
  color: var(--mod-toc-inactive-color-h4, var(--mod-toc-inactive-color-h2, var(--c-text-2, var(--blog-text, #1a1a2e))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h4 a.is-active,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h4 a.is-active {
  color: var(--mod-toc-active-color-h4, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h5 a:not(.is-active),
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h5 a:not(.is-active) {
  color: var(--mod-toc-inactive-color-h5, var(--mod-toc-inactive-color-h2, var(--c-text-2, var(--blog-text, #1a1a2e))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h5 a.is-active,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h5 a.is-active {
  color: var(--mod-toc-active-color-h5, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h6 a:not(.is-active),
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h6 a:not(.is-active) {
  color: var(--mod-toc-inactive-color-h6, var(--mod-toc-inactive-color-h2, var(--c-text-2, var(--blog-text, #1a1a2e))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item--h6 a.is-active,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h6 a.is-active {
  color: var(--mod-toc-active-color-h6, var(--mod-toc-active-color-h2, var(--c-accent, var(--blog-accent, #2563eb))));
}

.mod-blog-toc--style-feed .mod-blog-toc__item:first-child a,
.mod-blog-toc--style-feed_plain .mod-blog-toc__item:first-child a {
  padding-top: 0.125rem;
}

/* --- Mobile font size override -------------------------------- */

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-fs-custom {
  --mod-toc-fs-h2: var(--mod-toc-mobile-fs-h2);
  --mod-toc-fs-h3: var(--mod-toc-mobile-fs-h3);
  --mod-toc-fs-h4: var(--mod-toc-mobile-fs-h4);
  --mod-toc-fs-h5: var(--mod-toc-mobile-fs-h5);
  --mod-toc-fs-h6: var(--mod-toc-mobile-fs-h6);
  --mod-toc-fs-anchor: var(--mod-toc-mobile-fs-anchor);
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-fs-custom .mod-blog-toc__item--h2 a {
  font-size: var(--mod-toc-mobile-fs-h2, var(--mod-toc-fs-h2, 0.875rem)) !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-fs-custom .mod-blog-toc__item--h3 a {
  font-size: var(--mod-toc-mobile-fs-h3, var(--mod-toc-fs-h3, 0.8125rem)) !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-fs-custom .mod-blog-toc__item--h4 a {
  font-size: var(--mod-toc-mobile-fs-h4, var(--mod-toc-fs-h4, 0.8125rem)) !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-fs-custom .mod-blog-toc__item--h5 a {
  font-size: var(--mod-toc-mobile-fs-h5, var(--mod-toc-fs-h5, 0.8125rem)) !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-fs-custom .mod-blog-toc__item--h6 a {
  font-size: var(--mod-toc-mobile-fs-h6, var(--mod-toc-fs-h6, 0.8125rem)) !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-fs-custom .mod-blog-toc__item--anchor a {
  font-size: var(--mod-toc-mobile-fs-anchor, var(--mod-toc-fs-anchor, 0.8125rem)) !important;
}

/* Mobile list density — row padding/min-height for touch-friendly styles */
.mod-blog-toc-host--mobile-active .mod-blog-toc--density-ultra_compact {
  --mod-toc-mobile-link-pad-y: 0.3125rem;
  --mod-toc-mobile-link-min-h: 2rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--density-compact {
  --mod-toc-mobile-link-pad-y: 0.4375rem;
  --mod-toc-mobile-link-min-h: 2.25rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--density-normal {
  --mod-toc-mobile-link-pad-y: 0.625rem;
  --mod-toc-mobile-link-min-h: 2.75rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--density-relaxed {
  --mod-toc-mobile-link-pad-y: 0.875rem;
  --mod-toc-mobile-link-min-h: 3rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--density-ultra_relaxed {
  --mod-toc-mobile-link-pad-y: 1rem;
  --mod-toc-mobile-link-min-h: 3.25rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--density-custom {
  /* Overridden by inline vars when mobile_density=custom. */
  --mod-toc-mobile-link-pad-y: 0.625rem;
  --mod-toc-mobile-link-min-h: 2.75rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--style-plate .mod-blog-toc__item a {
  min-height: var(--mod-toc-mobile-link-min-h, 3rem);
  padding-top: var(--mod-toc-mobile-link-pad-y, 0.875rem);
  padding-bottom: var(--mod-toc-mobile-link-pad-y, 0.875rem);
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--style-feed .mod-blog-toc__item a,
.mod-blog-toc-host--mobile-active .mod-blog-toc--style-feed_plain .mod-blog-toc__item a {
  padding-top: var(--mod-toc-mobile-link-pad-y, 0.5rem);
  padding-bottom: var(--mod-toc-mobile-link-pad-y, 0.5rem);
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--style-dotted.mod-blog-toc--density-compact .mod-blog-toc__item a {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--style-dotted.mod-blog-toc--density-relaxed .mod-blog-toc__item a {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--style-minimal .mod-blog-toc__item a,
.mod-blog-toc-host--mobile-active .mod-blog-toc--style-pills .mod-blog-toc__item a,
.mod-blog-toc-host--mobile-active .mod-blog-toc--style-numbered .mod-blog-toc__item a,
.mod-blog-toc-host--mobile-active .mod-blog-toc--style-boxed .mod-blog-toc__item a {
  min-height: var(--mod-toc-row-min, 1.75rem);
}

/* --- Left alignment (desktop) -------------------------------- */

.mod-blog-toc.mod-blog-toc--flat .mod-blog-toc__item--h2 a,
.mod-blog-toc.mod-blog-toc--flat .mod-blog-toc__item--h3 a,
.mod-blog-toc.mod-blog-toc--flat .mod-blog-toc__item--h4 a,
.mod-blog-toc.mod-blog-toc--flat .mod-blog-toc__item--h5 a,
.mod-blog-toc.mod-blog-toc--flat .mod-blog-toc__item--h6 a,
.mod-blog-toc.mod-blog-toc--flat .mod-blog-toc__item--anchor a {
  padding-left: var(--mod-toc-flat-padding-left, 0) !important;
  margin-left: 0 !important;
}

.mod-blog-toc.mod-blog-toc--flat.mod-blog-toc--style-dotted .mod-blog-toc__item {
  margin-left: 0;
}

/* --- Density ------------------------------------------------ */

.mod-blog-toc--density-ultra_compact {
  --mod-toc-row-min: 1.5rem;
  --mod-toc-item-gap: 0.0625rem;
  --mod-toc-plate-pad-y: 0.375rem;
  --mod-toc-line-height: 1.2;
}

.mod-blog-toc--density-compact {
  --mod-toc-row-min: 1.625rem;
  --mod-toc-item-gap: 0.125rem;
  --mod-toc-plate-pad-y: 0.5rem;
  --mod-toc-line-height: 1.25;
}

.mod-blog-toc--density-normal {
  --mod-toc-row-min: 1.75rem;
  --mod-toc-item-gap: 0.1875rem;
  --mod-toc-plate-pad-y: 0.625rem;
  --mod-toc-line-height: 1.35;
}

.mod-blog-toc--density-relaxed {
  --mod-toc-row-min: 2rem;
  --mod-toc-item-gap: 0.3125rem;
  --mod-toc-plate-pad-y: 0.875rem;
  --mod-toc-line-height: 1.45;
}

.mod-blog-toc--density-ultra_relaxed {
  --mod-toc-row-min: 2.25rem;
  --mod-toc-item-gap: 0.4375rem;
  --mod-toc-plate-pad-y: 1rem;
  --mod-toc-line-height: 1.55;
}

.mod-blog-toc--density-custom {
  /* Values come from inline style (toc_density_custom_scale). */
  --mod-toc-row-min: 1.75rem;
  --mod-toc-item-gap: 0.1875rem;
  --mod-toc-plate-pad-y: 0.625rem;
  --mod-toc-line-height: 1.35;
}

/* Dotted tree: continuous rail — no gap between items */
.mod-blog-toc--style-dotted.mod-blog-toc--density-ultra_compact,
.mod-blog-toc--style-dotted.mod-blog-toc--density-compact,
.mod-blog-toc--style-dotted.mod-blog-toc--density-normal,
.mod-blog-toc--style-dotted.mod-blog-toc--density-relaxed,
.mod-blog-toc--style-dotted.mod-blog-toc--density-ultra_relaxed,
.mod-blog-toc--style-dotted.mod-blog-toc--density-custom {
  --mod-toc-item-gap: 0;
}

.mod-blog-toc--style-dotted .mod-blog-toc__list {
  gap: 0;
}

/* --- Inner title style -------------------------------------- */

.mod-blog-toc--inner-title-normal .mod-blog-toc__title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}

.mod-blog-toc--inner-title-hidden .mod-blog-toc__title {
  display: none;
}

/* Font-size per level — doubled .mod-blog-toc beats theme without a template class */
.mod-blog-toc.mod-blog-toc .mod-blog-toc__item--h2 a {
  font-size: var(--mod-toc-fs-h2, 0.875rem);
}

.mod-blog-toc.mod-blog-toc .mod-blog-toc__item--h3 a {
  font-size: var(--mod-toc-fs-h3, 0.8125rem);
}

.mod-blog-toc.mod-blog-toc .mod-blog-toc__item--h4 a {
  font-size: var(--mod-toc-fs-h4, 0.8125rem);
}

.mod-blog-toc.mod-blog-toc .mod-blog-toc__item--h5 a {
  font-size: var(--mod-toc-fs-h5, 0.8125rem);
}

.mod-blog-toc.mod-blog-toc .mod-blog-toc__item--h6 a {
  font-size: var(--mod-toc-fs-h6, 0.8125rem);
}

.mod-blog-toc.mod-blog-toc .mod-blog-toc__item--anchor a {
  font-size: var(--mod-toc-fs-anchor, 0.8125rem);
}

/* --- Sticky sidebar (desktop — when mobile layout is inactive) */

.mod-blog-toc-host:has(.mod-blog-toc--sticky):has(.mod-blog-toc__list a):not(.mod-blog-toc-host--mobile-active):not(.mod-blog-toc-host--mobile-hidden) {
  position: sticky;
  top: calc(var(--blog-header-height, 64px) + 1.5rem + var(--mod-toc-sticky-offset, 0px));
  z-index: 10;
  max-height: calc(100dvh - var(--blog-header-height, 64px) - 2rem - var(--mod-toc-sticky-offset, 0px));
  overflow-x: hidden;
  overflow-y: auto;
}

.mod-blog-toc-host:has(.mod-blog-toc--sticky):not(.mod-blog-toc-host--mobile-active):not(.mod-blog-toc-host--mobile-hidden) {
  overflow: visible;
}

/* --- Hidden on mobile (breakpoint set in module) ---------------- */

.mod-blog-toc-host--mobile-hidden {
  display: none !important;
}

/* --- Mobile layout (class toggled by JS via breakpoint) ------- */

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--mobile-sized {
  width: var(--mod-toc-mobile-width, 100%);
  max-width: 100%;
  box-sizing: border-box;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--mobile-sized:not(.mod-blog-toc-host--above) {
  margin-left: auto;
  margin-right: auto;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--mobile-card-inner {
  margin-bottom: 1.5rem;
  padding: 1rem 1.125rem;
  background: color-mix(in srgb, var(--mod-toc-mobile-card-inner-bg, var(--blog-bg, #f8f9fb)) var(--mod-toc-mobile-card-inner-bg-opacity, 100%), transparent);
  border-radius: var(--mod-toc-mobile-card-inner-radius, var(--blog-radius, 12px));
  border: 1px solid var(--mod-toc-mobile-card-inner-border, var(--blog-border, #e2e8f0));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--mobile-card-inner.mod-blog-toc--mobile-card-inner-no-border {
  border: none;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--mobile-card-module {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc--mobile-card-none {
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--flat.card {
  border: none;
  box-shadow: none;
  background: transparent;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--shell-flat.card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--shell-flat.card > .card-body {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--flat.card .card-header {
  display: none;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--flat.card .card-body {
  padding: 0;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--above {
  margin-bottom: 1.25rem;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--above.card {
  width: 100%;
}

.mod-blog-toc-host--mobile-active.card:has(.mod-blog-toc-details) > .card-header {
  display: none;
}

.mod-blog-toc-host--mobile-active.card:has(.mod-blog-toc-details) > .card-body {
  padding: 0;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details {
  margin-bottom: 1.25rem;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading, inherit);
  font-size: var(--mod-toc-mobile-toggle-fs, 0.9375rem);
  font-weight: var(--mod-toc-mobile-toggle-weight, 500);
  color: var(--mod-toc-mobile-toggle-text, var(--c-accent, var(--blog-accent, #2563eb)));
  min-height: var(--mod-toc-mobile-toggle-min-h, 2.75rem);
  padding: var(--mod-toc-mobile-toggle-pad-y, 0.7rem) var(--mod-toc-mobile-toggle-pad-x, 1.45rem);
  line-height: 1.2;
  border: 1px solid var(--mod-toc-mobile-toggle-border, color-mix(in srgb, var(--mod-toc-mobile-toggle-border-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 38%)) var(--mod-toc-mobile-toggle-border-opacity, 100%), transparent));
  border-radius: var(--mod-toc-mobile-toggle-radius, var(--r-lg, 12px));
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 6%));
  background: var(--mod-toc-mobile-toggle-bg, color-mix(in srgb, var(--mod-toc-mobile-toggle-bg-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 7%)) var(--mod-toc-mobile-toggle-bg-opacity, 100%), transparent));
  user-select: none;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease, color 0.15s ease;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary:hover {
  border-color: var(--mod-toc-mobile-toggle-hover-border, var(--mod-toc-mobile-toggle-hover-border-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 55%)));
  background: var(--mod-toc-mobile-toggle-hover-bg, color-mix(in srgb, var(--mod-toc-mobile-toggle-hover-bg-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 12%)) var(--mod-toc-mobile-toggle-hover-bg-opacity, 100%), transparent));
  color: var(--mod-toc-mobile-toggle-hover-text, var(--mod-toc-mobile-toggle-text, var(--c-accent-hover, var(--blog-accent, #2563eb))));
  font-weight: var(--mod-toc-mobile-toggle-hover-weight, var(--mod-toc-mobile-toggle-weight, 500));
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 6%));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary:focus-visible {
  border-color: var(--blog-action-border-hover, rgb(31 78 121 / 22%));
  background: var(--mod-toc-mobile-toggle-bg, color-mix(in srgb, var(--mod-toc-mobile-toggle-bg-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 7%)) var(--mod-toc-mobile-toggle-bg-opacity, 100%), transparent));
  color: var(--mod-toc-mobile-toggle-hover-text, var(--mod-toc-mobile-toggle-text, var(--c-accent-hover, var(--blog-accent, #2563eb))));
  outline: 2px solid var(--c-accent, var(--blog-accent, #2563eb));
  outline-offset: 2px;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details[open] .mod-blog-toc__summary:not(:hover):not(:focus-visible) {
  color: var(--mod-toc-mobile-toggle-open-text, var(--mod-toc-mobile-toggle-text, var(--c-accent, var(--blog-accent, #2563eb))));
  font-weight: var(--mod-toc-mobile-toggle-open-weight, var(--mod-toc-mobile-toggle-weight, 500));
  border-color: var(--mod-toc-mobile-toggle-open-border, var(--mod-toc-mobile-toggle-open-border-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 55%)));
  background: var(--mod-toc-mobile-toggle-open-bg, color-mix(in srgb, var(--mod-toc-mobile-toggle-open-bg-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 12%)) var(--mod-toc-mobile-toggle-open-bg-opacity, 100%), transparent));
}

/* Hovering an already-open toggle uses the hover fill, not the open one —
   otherwise the hover settings would silently stop applying once expanded. */
.mod-blog-toc-host--mobile-active .mod-blog-toc-details[open] .mod-blog-toc__summary:hover {
  border-color: var(--mod-toc-mobile-toggle-hover-border, var(--mod-toc-mobile-toggle-hover-border-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 55%)));
  background: var(--mod-toc-mobile-toggle-hover-bg, color-mix(in srgb, var(--mod-toc-mobile-toggle-hover-bg-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 12%)) var(--mod-toc-mobile-toggle-hover-bg-opacity, 100%), transparent));
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 6%));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details[open] .mod-blog-toc__summary:focus-visible {
  border-color: var(--blog-action-border-hover, rgb(31 78 121 / 22%));
  background: var(--mod-toc-mobile-toggle-open-bg, color-mix(in srgb, var(--mod-toc-mobile-toggle-open-bg-color, rgb(var(--c-accent-rgb, var(--bs-primary-rgb, 37 99 235)) / 7%)) var(--mod-toc-mobile-toggle-open-bg-opacity, 100%), transparent));
  box-shadow:
    var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 6%)),
    0 0 0 var(--blog-action-ring-size, 3px) var(--blog-action-ring, rgb(31 78 121 / 8%));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary::-webkit-details-marker {
  display: none;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: inherit;
}

/* The caption ("Своё значение текста кнопки") can override the button's own
   weight and colour; the dynamic current-item part below keeps its own look. */
.mod-blog-toc-host--mobile-active .mod-blog-toc__summary-text,
.mod-blog-toc-host--mobile-active .mod-blog-toc__summary-caption {
  font-weight: var(--mod-toc-mobile-toggle-label-weight, inherit);
  color: var(--mod-toc-mobile-toggle-label-text, inherit);
}

/* Dynamic toggle caption: fixed label + current TOC item, clipped with an
   ellipsis so a long heading can never wrap or stretch the button. */
.mod-blog-toc-host--mobile-active .mod-blog-toc-details--dynamic .mod-blog-toc__summary-text {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  text-align: left;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary-caption {
  flex: 0 0 auto;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary-current {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Defaults keep the current item visually subordinate to the fixed label;
     each is overridable from its own settings. */
  font-weight: var(--mod-toc-mobile-toggle-current-weight, 400);
  color: var(--mod-toc-mobile-toggle-current-text, inherit);
  opacity: var(--mod-toc-mobile-toggle-current-opacity, 85%);
}

.mod-blog-toc-host--mobile-active .mod-blog-toc__summary-icon {
  flex: 0 0 auto;
  width: var(--mod-toc-mobile-toggle-icon-size, 0.75rem);
  height: var(--mod-toc-mobile-toggle-icon-size, 0.75rem);
  position: relative;
  color: var(--blog-muted, #64748b);
  transition: transform 0.2s ease, color 0.15s ease;
}

.mod-blog-toc-details--icon-pos-left .mod-blog-toc__summary {
  flex-direction: row;
}

.mod-blog-toc-details--icon-pos-right .mod-blog-toc__summary {
  flex-direction: row;
}

/* Text switched off with "none": the caption used to stretch and hold the icon
   against its edge, so the icon has to be pinned there itself. "icon_only" is a
   different setting and keeps its centred round button. */
.mod-blog-toc-host--mobile-active .mod-blog-toc-details--no-caption.mod-blog-toc-details--icon-pos-right .mod-blog-toc__summary {
  justify-content: flex-end;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details--no-caption.mod-blog-toc-details--icon-pos-left .mod-blog-toc__summary {
  justify-content: flex-start;
}

/* Chevrons are drawn as a polygon, not as two borders of a rotated square.
   A border has a fixed width while the square scales with the icon size, so at
   the real 0.75rem icon the border is a quarter of the side — the ink centre
   drifts far from the box centre and the 180° open-state turn swings the shape
   instead of spinning it. The polygon below is symmetric about both axes by
   construction, at any size. */
.mod-blog-toc-details--icon-chevron .mod-blog-toc__summary-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(8% 20%, 50% 62%, 92% 20%, 92% 38%, 50% 80%, 8% 38%);
}

.mod-blog-toc-details--icon-chevron_bold .mod-blog-toc__summary-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(8% 16%, 50% 58%, 92% 16%, 92% 42%, 50% 84%, 8% 42%);
}

.mod-blog-toc-details--icon-chevron_up .mod-blog-toc__summary-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(8% 80%, 50% 38%, 92% 80%, 92% 62%, 50% 20%, 8% 62%);
}


.mod-blog-toc-details--icon-arrow .mod-blog-toc__summary-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(50% 23%, 88% 67%, 78% 77%, 50% 49%, 22% 77%, 12% 67%);
}


/* Arrow pointing down — the up arrow's polygon mirrored on the Y axis. */
.mod-blog-toc-details--icon-arrow_down .mod-blog-toc__summary-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(50% 77%, 88% 33%, 78% 23%, 50% 51%, 22% 23%, 12% 33%);
}

.mod-blog-toc-details--icon-plus .mod-blog-toc__summary-icon::before,
.mod-blog-toc-details--icon-plus .mod-blog-toc__summary-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

/* Percentages, so the plus follows the icon-size setting like the others. */
.mod-blog-toc-details--icon-plus .mod-blog-toc__summary-icon::before {
  width: 100%;
  height: 17%;
}

.mod-blog-toc-details--icon-plus .mod-blog-toc__summary-icon::after {
  width: 17%;
  height: 100%;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details[open] .mod-blog-toc__summary-icon {
  transform: rotate(180deg);
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details--icon-plus[open] .mod-blog-toc__summary-icon {
  transform: none;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details--icon-plus[open] .mod-blog-toc__summary-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.mod-blog-toc-host--mobile-active:not(.mod-blog-toc-host--toggle-sticky) .mod-blog-toc-details .mod-blog-toc {
  margin-top: 0.75rem;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--toggle-sticky .mod-blog-toc-details {
  position: relative;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--toggle-sticky .mod-blog-toc-details .mod-blog-toc {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  margin-top: 0;
  box-shadow: var(--shadow-md, 0 8px 24px rgb(15 23 42 / 14%));
  max-height: calc(100dvh - var(--mod-toc-mobile-sticky-offset, 0px) - 4rem);
  overflow: auto;
  z-index: 9;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--toggle-sticky .mod-blog-toc-details .mod-blog-toc:not(.mod-blog-toc--mobile-card-inner):not(.mod-blog-toc--mobile-card-module):not(.mod-blog-toc--mobile-card-none) {
  background: var(--blog-surface, #fff);
  border: 1px solid var(--blog-border, #e2e8f0);
  border-radius: var(--r-lg, 12px);
}

.mod-blog-toc-host--mobile-active .mod-blog-toc-details .mod-blog-toc--mobile-card-module,
.mod-blog-toc-host--mobile-active .mod-blog-toc-details .mod-blog-toc--mobile-card-none {
  padding: 0 0.25rem;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--above .mod-blog-toc-details {
  margin-bottom: 0;
}

/* Sticky toggle: host stays in view collapsed and expanded.
   Gated by JS class (configurable mobile_breakpoint), not a fixed @media.
   The open list is an overlay panel, so the sticky host stays button-height. */
.mod-blog-toc-host--mobile-active.mod-blog-toc-host--toggle-sticky {
  position: sticky;
  top: var(--mod-toc-mobile-sticky-offset, 0px);
  z-index: 10;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--above .card-body {
  padding: 0;
}

/* Mobile position "reveal from the top": absent until JS marks it revealed, then
   it fades in. Taken out of the flow entirely (fixed, not sticky) — otherwise
   appearing above the article would reserve space and shove the text down.
   JS feeds left/width from the article body so it still lines up with it. */
.mod-blog-toc-host--mobile-active.mod-blog-toc-host--reveal:not(.is-revealed) {
  display: none;
}

.mod-blog-toc-host--mobile-active.mod-blog-toc-host--reveal.is-revealed {
  position: fixed;
  top: var(--mod-toc-mobile-sticky-offset, 0px);
  left: var(--mod-toc-reveal-left, 0px);
  width: var(--mod-toc-reveal-width, 100%);
  margin: 0;
  z-index: 10;
  animation: mod-blog-toc-reveal 0.25s ease both;
}

@keyframes mod-blog-toc-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mod-blog-toc-host--mobile-active.mod-blog-toc-host--reveal.is-revealed {
    animation: none;
  }
}

/* Collapsible: desktop — always expanded, no toggle button */

.mod-blog-toc-details--desktop,
.mod-blog-toc-host:not(.mod-blog-toc-host--mobile-active) .mod-blog-toc-details {
  display: block;
}

.mod-blog-toc-details--desktop > .mod-blog-toc__summary,
.mod-blog-toc-host:not(.mod-blog-toc-host--mobile-active) .mod-blog-toc__summary {
  display: none !important;
}

.mod-blog-toc-details--desktop > .mod-blog-toc,
.mod-blog-toc-host:not(.mod-blog-toc-host--mobile-active) .mod-blog-toc-details > .mod-blog-toc {
  display: block !important;
}

/* --- Mobile inner title overrides ----------------------------- */

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-inner-hidden .mod-blog-toc__title {
  display: none !important;
}

/* An explicit mobile style overrides a desktop "hidden" — otherwise the
   desktop rule's display:none would leak into the mobile context. */
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-inner-caps .mod-blog-toc__title {
  display: block !important;
  text-transform: uppercase;
  letter-spacing: var(--mod-toc-mobile-title-letter-spacing, 0.06em);
  font-size: 0.75rem;
  font-weight: 600;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-inner-normal .mod-blog-toc__title {
  display: block !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* --- Mobile-only link colors ---------------------------------- */

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom {
  --mod-toc-inactive-weight-h2: var(--mod-toc-mobile-inactive-weight, 400);
  --mod-toc-inactive-weight-h3: var(--mod-toc-mobile-inactive-weight, 400);
  --mod-toc-inactive-weight-h4: var(--mod-toc-mobile-inactive-weight, 400);
  --mod-toc-inactive-weight-h5: var(--mod-toc-mobile-inactive-weight, 400);
  --mod-toc-inactive-weight-h6: var(--mod-toc-mobile-inactive-weight, 400);
  --mod-toc-active-weight-h2: var(--mod-toc-mobile-active-weight, 500);
  --mod-toc-active-weight-h3: var(--mod-toc-mobile-active-weight, 500);
  --mod-toc-active-weight-h4: var(--mod-toc-mobile-active-weight, 500);
  --mod-toc-active-weight-h5: var(--mod-toc-mobile-active-weight, 500);
  --mod-toc-active-weight-h6: var(--mod-toc-mobile-active-weight, 500);
  --mod-toc-inactive-color-h2: var(--mod-toc-mobile-inactive-color, var(--blog-muted, #64748b));
  --mod-toc-inactive-color-h3: var(--mod-toc-mobile-inactive-color, var(--blog-muted, #64748b));
  --mod-toc-inactive-color-h4: var(--mod-toc-mobile-inactive-color, var(--blog-muted, #64748b));
  --mod-toc-inactive-color-h5: var(--mod-toc-mobile-inactive-color, var(--blog-muted, #64748b));
  --mod-toc-inactive-color-h6: var(--mod-toc-mobile-inactive-color, var(--blog-muted, #64748b));
  --mod-toc-active-color-h2: var(--mod-toc-mobile-active-color, var(--blog-accent, #2563eb));
  --mod-toc-active-color-h3: var(--mod-toc-mobile-active-color, var(--blog-accent, #2563eb));
  --mod-toc-active-color-h4: var(--mod-toc-mobile-active-color, var(--blog-accent, #2563eb));
  --mod-toc-active-color-h5: var(--mod-toc-mobile-active-color, var(--blog-accent, #2563eb));
  --mod-toc-active-color-h6: var(--mod-toc-mobile-active-color, var(--blog-accent, #2563eb));
  --mod-toc-hover-color-h2: var(--mod-toc-mobile-hover-color, var(--blog-accent, #2563eb));
  --mod-toc-hover-color-nested: var(--mod-toc-mobile-hover-color, var(--blog-accent, #2563eb));
  --mod-toc-inactive-color-anchor: var(--mod-toc-mobile-inactive-color, var(--blog-muted, #64748b));
  --mod-toc-active-color-anchor: var(--mod-toc-mobile-active-color, var(--blog-accent, #2563eb));
  --mod-toc-inactive-opacity: var(--mod-toc-mobile-inactive-opacity, 100%);
  --mod-toc-active-opacity: var(--mod-toc-mobile-active-opacity, 100%);
  --mod-toc-hover-opacity: var(--mod-toc-mobile-hover-opacity, 100%);
}

/* Mobile underline per state — the desktop rules read these through the
   generic variables, so only the mobile-specific values are mapped here. */
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--underline-inactive .mod-blog-toc__item a:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--underline-hover .mod-blog-toc__item a:hover:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--underline-active .mod-blog-toc__item a.is-active {
  text-decoration-line: underline;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-underline-inactive .mod-blog-toc__item a:not(.is-active) {
  text-decoration-line: underline;
  text-decoration-style: var(--mod-toc-mobile-underline-inactive-style, solid);
  text-decoration-thickness: var(--mod-toc-mobile-underline-inactive-thickness, auto);
  text-underline-offset: var(--mod-toc-mobile-underline-inactive-offset, auto);
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-underline-hover .mod-blog-toc__item a:hover:not(.is-active) {
  text-decoration-line: underline;
  text-decoration-style: var(--mod-toc-mobile-underline-hover-style, var(--mod-toc-mobile-underline-inactive-style, solid));
  text-decoration-thickness: var(--mod-toc-mobile-underline-hover-thickness, var(--mod-toc-mobile-underline-inactive-thickness, auto));
  text-underline-offset: var(--mod-toc-mobile-underline-hover-offset, var(--mod-toc-mobile-underline-inactive-offset, auto));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-underline-active .mod-blog-toc__item a.is-active {
  text-decoration-line: underline;
  text-decoration-style: var(--mod-toc-mobile-underline-active-style, var(--mod-toc-mobile-underline-inactive-style, solid));
  text-decoration-thickness: var(--mod-toc-mobile-underline-active-thickness, var(--mod-toc-mobile-underline-inactive-thickness, auto));
  text-underline-offset: var(--mod-toc-mobile-underline-active-offset, var(--mod-toc-mobile-underline-inactive-offset, auto));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom .mod-blog-toc__item a:hover:not(.is-active) {
  font-weight: var(--mod-toc-mobile-hover-weight, var(--mod-toc-mobile-inactive-weight, 400));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom .mod-blog-toc__item a:not(.is-active) {
  color: var(--mod-toc-mobile-inactive-color, var(--mod-toc-inactive-color-h2, var(--blog-muted, #64748b)));
  font-weight: var(--mod-toc-mobile-inactive-weight, var(--mod-toc-inactive-weight-h2, 400));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom .mod-blog-toc__item a.is-active {
  color: var(--mod-toc-mobile-active-color, var(--mod-toc-active-color-h2, var(--blog-accent, #2563eb)));
  font-weight: var(--mod-toc-mobile-active-weight, var(--mod-toc-active-weight-h2, 400));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom .mod-blog-toc__item a:hover:not(.is-active) {
  color: var(--mod-toc-mobile-hover-color, var(--mod-toc-hover-color-h2, var(--blog-accent, #2563eb)));
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat .mod-blog-toc__item--h2 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat .mod-blog-toc__item--h3 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat .mod-blog-toc__item--h4 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat .mod-blog-toc__item--h5 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat .mod-blog-toc__item--h6 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat .mod-blog-toc__item--anchor a {
  padding-left: var(--mod-toc-mobile-flat-padding-left, 0) !important;
  margin-left: 0 !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-dotted .mod-blog-toc__item {
  margin-left: 0;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-plate .mod-blog-toc__item a:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed .mod-blog-toc__item a:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed_plain .mod-blog-toc__item a:not(.is-active) {
  color: var(--mod-toc-mobile-inactive-color, var(--mod-toc-inactive-color-h2, var(--blog-muted, #64748b))) !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-plate .mod-blog-toc__item a.is-active,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed .mod-blog-toc__item a.is-active,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed_plain .mod-blog-toc__item a.is-active {
  color: var(--mod-toc-mobile-active-color, var(--mod-toc-active-color-h2, var(--blog-accent, #2563eb))) !important;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-plate .mod-blog-toc__item a:hover:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed .mod-blog-toc__item a:hover:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed .mod-blog-toc__item a:focus-visible:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed_plain .mod-blog-toc__item a:hover:not(.is-active),
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-highlight-custom.mod-blog-toc--style-feed_plain .mod-blog-toc__item a:focus-visible:not(.is-active) {
  color: var(--mod-toc-mobile-hover-color, var(--mod-toc-hover-color-h2, var(--blog-accent, #2563eb))) !important;
  text-decoration: underline dotted !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed .mod-blog-toc__item--h3 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed .mod-blog-toc__item--h4 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed .mod-blog-toc__item--h5 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed .mod-blog-toc__item--h6 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h3 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h4 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h5 a,
.mod-blog-toc-host--mobile-active .mod-blog-toc.mod-blog-toc--mobile-flat.mod-blog-toc--style-feed_plain .mod-blog-toc__item--h6 a {
  padding-left: var(--mod-toc-mobile-flat-padding-left, 0) !important;
}

@media print {
  .mod-blog-toc,
  .mod-blog-toc-details,
  .mod-blog-toc-host {
    display: none !important;
  }

  .mod-blog-toc--sticky,
  .card:has(.mod-blog-toc--sticky),
  .mod-blog-toc-host--toggle-sticky {
    position: static !important;
    top: auto !important;
  }
}

/* "Italic anchors" — opt-in; the presets read the variable above. */
.mod-blog-toc.mod-blog-toc--anchor-italic {
  --mod-toc-anchor-font-style: italic;
}

/* Пустое оглавление: модуль убирает за собой обёртку шаблона сам, не полагаясь
   на CSS конкретного сайта. */
.mod-blog-toc-host--empty {
  display: none !important;
}