/* =====================================================================
   ARTICLE MINIMAP TOC — sticky-sidebar для статей блога
   Активация: добавить body-class `has-minimap-toc` и контейнер `.mm-wrap`.
   Скрывается на мобиле (≤980px), там работает обычный pill-toolbar темы.
   ===================================================================== */

.mm-overlay{
  position:fixed;inset:0;
  background:rgba(20,16,10,.55);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  z-index:50;
}
body.is-mm-hover .mm-overlay{ opacity:1 }

/* обёртка фиксирует TOC у левого края + центр по Y */
.mm-wrap{
  position:fixed;
  left:max(20px, calc((100vw - 1320px) / 2 + 28px));
  top:0;height:100vh;
  display:flex;align-items:center;
  z-index:60;
  pointer-events:none;
}
.mm-wrap > *{ pointer-events:auto }
@media (min-width: 1500px){
  .mm-wrap{ left:32px }
}

.mm{
  position:relative;
  padding:0;
  user-select:none;
  --mm-color:#4A4740;
}
body.is-mm-hover .mm{ --mm-color:#fff }

/* колонка ПОЛОСОК + actions */
.mm__bars-wrap{display:flex;flex-direction:column;align-items:flex-start}

.mm__bars{
  list-style:none;
  margin:0 0 0 4px;
  padding:0;
  display:block;
}
.mm__bar-item{
  position:relative;
  display:block;
  width:120px;
  height:13px;
  padding:5px 0;
  cursor:pointer;
  text-decoration:none;
  color:var(--mm-color);
  margin:0;
}
.mm__bar{
  display:block;
  width:var(--w, 16px);
  height:3px;
  background:currentColor;
  opacity:.45;
  border-radius:999px;
  will-change:width;
  transition:width .06s linear, opacity .15s, background .15s, height .15s;
  max-width:120px;
  cursor:pointer;
}
.mm__bar-item.is-active .mm__bar{
  background:#3a7a52;       /* активная по scroll */
  opacity:1;
  height:4px;
}
body.is-mm-hover .mm__bar{ opacity:.4 }
body.is-mm-hover .mm__bar-item.is-near .mm__bar{ opacity:1 }
/* активная под курсором в раскрытом меню — более насыщенный зелёный */
body.is-mm-hover .mm__bar-item.is-active.is-near .mm__bar{ background:#2e9f56 }
body.is-mm-hover .mm__bar-item.is-active .mm__bar{ background:#3a7a52 }

/* labels — fixed, рядом с полосками */
.mm__labels{
  position:fixed;
  left:max(170px, calc((100vw - 1320px) / 2 + 170px));
  top:50vh;
  transform:translateY(-50%);
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;gap:4px;
}
@media (min-width: 1500px){ .mm__labels{ left:170px } }

.mm__label-item{
  display:inline-block;
  font:500 16px/1.2 "Manrope", system-ui, sans-serif;
  color:#666;
  text-decoration:none;
  white-space:nowrap;
  padding:6px 14px;
  border-radius:13px;
  background:#fff;
  border:0;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  transition:color .25s, font-size .2s, transform .2s, box-shadow .2s;
  align-self:flex-start;
}
.mm__label-item.is-near{
  color:#111;
  font-size:21px;
  font-weight:600;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
  transform:translateX(4px);
}

/* PANELS общее */
.mm__panel{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
body.is-mm-hover .mm[data-mode="bars"]  .mm__panel--labels,
body.is-mm-hover .mm[data-mode="like"]  .mm__panel--like,
body.is-mm-hover .mm[data-mode="share"] .mm__panel--share{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* like открывается вверх */
.mm__panel--like{
  position:absolute;
  left:calc(100% + 20px);
  bottom:50%;
  transform:translate(-6px, 50%);
  z-index:5;
  display:flex;flex-direction:column;
}
body.is-mm-hover .mm[data-mode="like"] .mm__panel--like{ transform:translate(0, 50%) }

.mm__panel--share{
  position:absolute;
  left:calc(100% + 20px);
  top:0;
  transform:translate(-6px, -8px);
  z-index:5;
  display:flex;flex-direction:column;
}
body.is-mm-hover .mm[data-mode="share"] .mm__panel--share{ transform:translate(0, -8px) }

/* ─── ACTIONS ─── */
.mm__actions{
  margin:22px 0 0 4px;
  display:flex;flex-direction:column;gap:10px;
}
.mm__like-zone, .mm__share-zone{position:relative}

.mm__action{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;border:0;padding:0;cursor:pointer;
  color:var(--mm-color);
  font:500 13px/1 "Manrope", system-ui, sans-serif;
  transition:opacity .2s;
}
body.is-mm-hover .mm__action{ font-size:14px }

/* круглый фон под иконкой (как pill-кнопка в мобильной версии) */
.mm__icon-circle{
  width:34px;height:34px;flex:none;
  border-radius:50%;
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  transition:box-shadow .2s, background .2s;
}
.mm__icon-circle svg{width:17px;height:17px}
.mm__action:hover .mm__icon-circle{ box-shadow:0 4px 14px rgba(0,0,0,.18) }

/* сердечко — насыщенный красный всегда */
.mm__like .mm__icon-circle svg{ color:#e85a5a;fill:none;stroke:#e85a5a;stroke-width:1.8 }
.mm__like.is-liked .mm__icon-circle svg{ fill:#e85a5a }
.mm__like:hover .mm__icon-circle{ background:#fff5f5 }

/* поделиться — тёмная иконка */
.mm__share .mm__icon-circle svg{ color:#1a1a1a }

/* LIKE-CTA — белая плашка */
.mm__like-cta{
  display:inline-flex;align-items:center;gap:12px;
  background:#fff;
  border:0;
  box-shadow:0 4px 18px rgba(0,0,0,.12);
  border-radius:16px;
  padding:10px 18px 10px 14px;
  cursor:pointer;
  color:#111;
  font:400 16px/1.2 "Forum", Georgia, serif;
  transition:box-shadow .2s, color .2s;
  white-space:nowrap;
}
.mm__like-cta:hover{ box-shadow:0 6px 22px rgba(0,0,0,.18) }
.mm__like-cta__heart{
  width:36px;height:36px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid currentColor;border-radius:50%;
  transition:transform .2s, background .2s, border-color .2s;
}
.mm__like-cta:hover .mm__like-cta__heart{ animation:mmHeartBeat .65s ease infinite; color:#e85a5a; border-color:#e85a5a }
.mm__like-cta.is-liked .mm__like-cta__heart{ background:#e85a5a;border-color:#e85a5a }
.mm__like-cta__heart svg{width:19px;height:19px}
.mm__like-cta.is-liked .mm__like-cta__heart svg{fill:#fff;stroke:#fff}
.mm__like-cta__count{font:400 24px/1 "Forum", Georgia, serif;display:block;margin-bottom:2px}
.mm__like-cta__label{font:500 10.5px/1 "Manrope", system-ui, sans-serif;opacity:.55;text-transform:uppercase;letter-spacing:.1em}

@keyframes mmHeartBeat{
  0%,100%{ transform:scale(1) }
  20%{ transform:scale(1.22) }
  40%{ transform:scale(.96) }
  60%{ transform:scale(1.15) }
  80%{ transform:scale(1) }
}

/* SHARE-OPTIONS — белые плашки с брендовыми иконками */
.mm__share-options{
  list-style:none;margin:0;padding:0;
  flex-direction:column;gap:8px;
}
.mm__share-options a{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:12px;
  color:#111;text-decoration:none;
  font:500 14.5px/1 "Manrope", system-ui, sans-serif;
  white-space:nowrap;
  background:#fff;
  border:0;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  transition:box-shadow .2s, transform .2s;
}
.mm__share-options a:hover{
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  transform:translateX(3px);
}
.mm__share-options svg{width:20px;height:20px;flex:none}
.mm__share-options a[data-share="copy"] svg{color:#7a7466}
.mm__share-options a[data-share="wa"]   svg{color:#25d366}
.mm__share-options a[data-share="tg"]   svg{color:#34a8e9}
.mm__share-options a[data-share="vk"]   svg{color:#5b88c1}

/* при активной minimap скрываем штатный article__aside на десктопе
   и центрируем article__part-content */
@media (min-width: 981px){
  body.has-minimap-toc .article__aside{ display:none }
  body.has-minimap-toc .article__main{ display:block }
  body.has-minimap-toc .article__part-content{ max-width:760px;margin:0 auto }
}

/* на мобиле — minimap полностью скрыт, оставляем штатный pill-toolbar */
@media (max-width: 980px){
  .mm-wrap, .mm__labels, .mm-overlay{ display:none !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   ТЕМА «TARO» — фиолетовый акцент + LIKE-блок скрыт (на /taro/ и подстраницах
   нет статейного API лайков, оставляем только share). Активируется через
   body.mm-theme-taro. */
body.mm-theme-taro .mm__like-zone{ display:none }
body.mm-theme-taro .mm__bar{ background:rgba(170,130,232,0.55) }
body.mm-theme-taro .mm__bar-item.is-active .mm__bar{ background:#8a50d8 }
body.is-mm-hover[data-mm-theme="taro"] .mm__bar{ background:rgba(170,130,232,0.45) }
body.is-mm-hover[data-mm-theme="taro"] .mm__bar-item.is-near .mm__bar{ background:#7a3fc8 }
body.is-mm-hover[data-mm-theme="taro"] .mm__bar-item.is-active .mm__bar{ background:#8a50d8 }
body.is-mm-hover[data-mm-theme="taro"] .mm__bar-item.is-active.is-near .mm__bar{ background:#a560e8 }
body.mm-theme-taro .mm__label-item.is-near{
  color:#5a2da0;
  box-shadow:0 6px 22px rgba(140,80,220,.22);
}
body.mm-theme-taro .mm__share .mm__icon-circle svg{ color:#5a2da0 }
body.mm-theme-taro .mm__share:hover .mm__icon-circle{ background:#f3edff }