/* Финтабло, главная версии 5: мега-меню.
   На компьютере под шапкой одна стеклянная подложка (.mm-plate), она перетекает между разделами.
   Содержимое панелей прозрачное и лежит поверх подложки. Подсветка пункта (.mm-hl) скользит
   за курсором, по стеклу и краю подложки идёт свет. Подключается после shapka.css.
   30.10, Иван: пункты без подписей, без вводных блоков слева и без карточек; между группами воздух.
   30.10, Миша: все панели одной системы. Слева списки, справа витрина 340 px на всю высоту панели,
   картинка в ней одной высоты во всех разделах. Колонки списков подобраны под высоту витрины. */
:root { --mm-ease: cubic-bezier(.22, 1, .36, 1); }

/* Затемнение страницы под меню: легче, с размытием, страница читается сквозь него */
.sj-scrim { background: rgba(9, 26, 78, .14); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- Подложка ---------- */
.mm-plate {
  position: fixed; left: 0; top: 0; z-index: 39; width: 0; height: 0; pointer-events: none;
  border-radius: 22px; opacity: 0; scale: .985; transform-origin: 50% 0;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(15, 26, 61, .08), 0 36px 72px -36px rgba(15, 26, 61, .42), 0 12px 24px -18px rgba(15, 26, 61, .2);
  transition: transform .3s var(--mm-ease), width .3s var(--mm-ease), height .3s var(--mm-ease), opacity .18s var(--mm-ease), scale .25s var(--mm-ease);
}
.mm-plate.is-on { opacity: 1; scale: 1; }
.mm-plate.mm-snap { transition: opacity .18s var(--mm-ease), scale .25s var(--mm-ease); }
/* мягкий свет по стеклу за курсором */
.mm-plate::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(65, 131, 212, .1), transparent 60%); }
/* и светящаяся кромка рядом с курсором */
.mm-plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(65, 131, 212, .75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ---------- Панели на компьютере ---------- */
@media (min-width: 1024px) {
  /* закрытая панель шириной с шапку, чтобы страница не уезжала вбок; при открытии ширину ставит menu.js */
  .sj-header .sj-panel {
    top: 100%; left: 0; right: auto; width: 100%; max-width: none; margin: 0; padding: 8px 0 0; transform: none; z-index: 2;
    transition: opacity .1s var(--mm-ease), visibility 0s linear .1s;
  }
  .sj-header .sj-panel.is-open { transform: none; transition: opacity .15s var(--mm-ease), visibility 0s; }
  .sj-header .mm-box {
    position: relative; display: grid; gap: 24px 40px; align-items: start;
    max-height: calc(100vh - 120px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 28px; border: 0; border-radius: 22px; background: transparent; box-shadow: none;
  }
  /* группы слева, витрина справа на всю высоту панели; строка «Все …» под группами */
  .mm-box.has-aside { grid-template-columns: minmax(0, 1fr) 340px; }
  .mm-box.has-aside .sj-aside--preview { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .mm-box.has-aside .mm-more { grid-column: 1; align-self: end; }
  .mm-groups { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 32px; align-content: start; padding-top: 4px; }
  .mm-box .sj-group { gap: 12px; }
  .mm-box .sj-group__list { gap: 4px 28px; }

  /* подсветка пункта: одна на панель, скользит от строки к строке */
  .mm-hl { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 12px; pointer-events: none; opacity: 0;
    background: #EEF3FF; box-shadow: inset 0 0 0 1px rgba(41, 81, 202, .1);
    transition: transform .34s var(--mm-ease), width .34s var(--mm-ease), height .34s var(--mm-ease), opacity .2s var(--mm-ease); }
  .mm-hl.is-on { opacity: 1; }
  .mm-hl.mm-snap { transition: opacity .2s var(--mm-ease); }
  .mm-box > :not(.mm-hl) { position: relative; z-index: 1; }

  /* содержимое въезжает по очереди: при первом открытии снизу, при смене раздела сбоку.
     30.10, Миша: при переходе между разделами анимация мешала, ускорена почти вдвое */
  .sj-panel.is-enter .mm-in { animation: mm-in .3s var(--mm-ease) both; animation-delay: calc(var(--k, 0) * 25ms + 10ms); }
}
@keyframes mm-in { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 8px)); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mm-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mm-bar { from { transform: scaleY(.06); } to { transform: none; } }
@keyframes mm-barh { from { transform: scaleX(.04); } to { transform: none; } }

/* ---------- Подписи групп: моноширинным, как подписи разделов на странице ---------- */
.mm-box .sj-group__head { min-height: 22px; }
.mm-box .sj-group__title { font: 500 11px/1.4 var(--num, "Geist Mono", monospace); letter-spacing: .08em; text-transform: uppercase; color: #5F667F; }

/* ---------- Пункт списка: значок и название ---------- */
.mm-box .sj-link { position: relative; align-items: center; gap: 12px; margin-inline: -10px; padding: 8px 10px; border-radius: 12px; }
.mm-box .sj-link--list:hover, .mm-box .sj-link--list.is-current { background: transparent; }
.mm-box .sj-link__body { flex: 1; gap: 1px; }
.mm-box .sj-link__title { font: 500 15px/1.3 var(--font); color: #091A4E; }
.mm-box .sj-link:hover .sj-link__title { color: #091A4E; }
.mm-box .sj-link__icon { width: 34px; height: 34px; margin: 0; border-radius: 10px; background: #EDF2FE; color: #2951CA;
  transition: background-color .25s var(--mm-ease), color .25s var(--mm-ease), transform .4s var(--mm-ease); }
.mm-box .sj-link__icon .sj-i { width: 19px; height: 19px; }
.mm-box .sj-link--list:hover .sj-link__icon, .mm-box .sj-link--list.is-current .sj-link__icon { background: #2951CA; color: #fff; transform: scale(1.06); }
.mm-box .sj-link__badge { min-height: 20px; padding: 2px 7px; font-size: 11px; }

/* пункты без значка (отрасли в «Кейсах») выше, чтобы список вставал вровень с витриной */
.mm-box .sj-link--list:not(:has(.sj-link__icon)) { padding-block: 11px; }

/* ---------- Строка «Все …» внизу панели ---------- */
.mm-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 32px; }
.mm-more .sj-more { min-height: 40px; font: 500 15px/1.2 var(--font); color: #2951CA; }
.mm-more .sj-more:hover { color: #1C3C9B; }
.mm-more .mm-note { flex-basis: 100%; max-width: 62ch; margin: 0; font: 400 12px/1.5 var(--font); color: #5F667F; }

/* ---------- Превью справа: столбики растут, сумма досчитывается ---------- */
.mm-box .sj-preview { min-height: 410px; border: 0; border-radius: 16px; background: rgba(244, 247, 255, .92); }
.mm-box .sj-preview__num { font: 600 36px/1.05 var(--num, "Geist Mono", monospace); letter-spacing: -.04em; }
.sj-preview.is-play > * { animation: mm-up .3s var(--mm-ease) both; }
.sj-preview.is-play > :nth-child(2) { animation-delay: 40ms; }
.sj-preview.is-play > :nth-child(3) { animation-delay: 80ms; }
.sj-preview.is-play > :nth-child(n+4) { animation-delay: 120ms; }
.sj-preview .mm-bar { transform-box: fill-box; transform-origin: 50% 100%; }
.sj-preview .mm-bar.is-down { transform-origin: 50% 0; }
.sj-preview .mm-bar.is-h { transform-origin: 0 50%; }
.sj-preview.is-play .mm-bar { animation: mm-bar .5s var(--mm-ease) both; animation-delay: calc(var(--i, 0) * 18ms + 80ms); }
.sj-preview.is-play .mm-bar.is-h { animation-name: mm-barh; }

/* ---------- Ноутбук 1024–1279: превью уходит, колонки групп остаются ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .mm-box.has-aside { grid-template-columns: minmax(0, 1fr); }
  .mm-box .sj-aside--preview { display: none; }
  /* общее правило шапки ставит здесь одну колонку: списки в две и три колонки оставляем как есть */
  .mm-box .sj-group__list[style*="--cols:2"] { --cols: 2 !important; }
  .mm-box .sj-group__list[style*="--cols:3"] { --cols: 3 !important; }
}

/* ---------- Телефон и планшет: лист меню, без подложки и подсветки ---------- */
@media (max-width: 1023.98px) {
  .mm-plate, .mm-hl, .sj-aside--preview { display: none !important; }
  .sj-sheet .mm-box { display: flex; flex-direction: column; gap: 20px; }
  .sj-sheet .mm-groups { display: flex; flex-direction: column; gap: 24px; }
  .sj-sheet .sj-group { grid-column: auto !important; grid-row: auto !important; }
  .sj-sheet .sj-group__title { font: 500 11px/1.4 var(--num, "Geist Mono", monospace); letter-spacing: .08em; text-transform: uppercase; color: #5F667F; }
  .sj-sheet .sj-link__icon { width: 34px; height: 34px; border-radius: 10px; background: #EDF2FE; color: #2951CA; }
  .sj-sheet .sj-link__icon .sj-i { width: 19px; height: 19px; }
  .sj-sheet .mm-more { flex-direction: column; gap: 0; }
  .sj-sheet .mm-more .sj-more { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-plate, .mm-hl, .mm-box .sj-link__icon { transition: none !important; }
  .sj-panel.is-enter .mm-in, .sj-preview.is-play > *, .sj-preview.is-play .mm-bar { animation: none !important; }
}

/* ---------- Выравнивание (28.10, по скриншоту Миши) ---------- */
/* крупные цифры: обычный шрифт с цифрами одной ширины. У моноширинного пробел шириной в цифру, «2 630» разъезжалось */
.mm-box .sj-preview__num { font-family: var(--font); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
/* витрина на всю высоту панели и не ниже 440 px: подложка не прыгает, когда наводят на разные пункты */
.mm-box .sj-preview { height: 100%; min-height: 480px; overflow: hidden; }
.mm-box--cases .sj-preview { min-height: 384px; }

/* 29.10, Иван: в меню графики не должны тянуть внимание. Цвета денег те же, что на странице, только приглушённые */
.sj-preview .sj-c-pos, .sj-preview .sj-c-neg, .sj-preview .sj-legend__dot { opacity: .7; }

/* ---------- Картинка витрины: одной высоты во всех разделах ----------
   обложка истории клиента, фото услуги, мини-график инструмента или крупный значок */
.sj-preview__media { display: flex; align-items: center; justify-content: center; flex: 1 0 156px; min-height: 156px; max-height: 300px; margin: 6px 0 10px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #DCE6FF 0%, #EEF3FF 60%, #F7F9FF 100%); }
.sj-preview__media img { display: block; }
.sj-preview__media.is-photo { align-items: flex-end; }
.sj-preview__media.is-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* обложки историй целиком, в своей пропорции: текст на них вшит в картинку, обрезать нельзя */
.sj-preview__media.is-cover { flex: none; height: auto; min-height: 0; aspect-ratio: 968 / 504; background: #E4EAFB; }
.sj-preview__media.is-cover img { width: 100%; height: 100%; object-fit: cover; }
.sj-preview__media.is-icon { max-height: 220px; }
.sj-preview__media.is-icon .sj-i { width: 64px; height: 64px; color: #2951CA; }
.sj-preview__media.is-viz { padding: 18px 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(41, 81, 202, .1); }
.sj-preview__media.is-viz svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sj-preview .v-axis { stroke: #DDE6FF; stroke-width: 1; }
.sj-preview .v-main { fill: #2951CA; }
.sj-preview .v-soft { fill: #86B1E8; }
.sj-preview .v-neg { fill: #EB3C23; }
.sj-preview .v-cut { fill: #C7CFE4; }
.sj-preview .v-pos { fill: #299F51; }
.sj-preview .v-track { fill: none; stroke: #EDF2FE; stroke-width: 8; }
.sj-preview .arc { fill: none; stroke-width: 8; stroke-linecap: round; }
.sj-preview .arc.v-main { stroke: #2951CA; }
.sj-preview .arc.v-soft { stroke: #86B1E8; }
.sj-preview .arc.v-line { stroke: #C7CFE4; }
.sj-preview .v-label { font: 500 10px var(--num, "Geist Mono", monospace); fill: #5F667F; }
.mm-box .sj-preview__title { font-size: 22px; }

/* витрина без ссылок и кнопок, только промо того, что внутри пункта (Иван, 30.10): мышь проходит её насквозь */
.sj-aside--preview { pointer-events: none; }
.sj-preview__card { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
.sj-preview__card > .sj-preview__title, .sj-preview__card > .sj-preview__q, .sj-preview__card > .sj-preview__cap { display: block; }
.sj-preview__story { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  font: 600 17px/1.4 var(--font); letter-spacing: -.01em; color: #091A4E; }
.sj-preview__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.sj-preview__fact { font-size: 12px; line-height: 1.3; padding: 5px 10px; border-radius: 8px; background: #fff; color: var(--color-text-secondary, #404C72);
  box-shadow: inset 0 0 0 1px rgba(41, 81, 202, .12); }

/* подпись «Учебные данные» у отчётов внизу витрины, на одной линии со строкой «Все …» слева */
.mm-box .sj-preview__foot { margin-top: auto !important; }