/* Финтабло, мега-меню: витрина справа (согласована клиентом 02.11).
   Подключается после menu.css. Витрина = карточка главной версии 5 (.bc и .frag в v5.css), по брендбуку 1.0:
   подложка в цвете продукта, скругление 16, без теней; подпись 12 px, заголовок Geist 650 20 px,
   текст 14 px; внизу кусок экрана: белая плашка, рамка #DDE6FF, строки через тонкую линию,
   суммы Geist Mono, плюс #1B7138, минус #A92816. Пилюль, кружков и рамок в рамке нет (Миша, 30.10). */
:root { --vt-ease: cubic-bezier(.2, .7, .2, 1); --vt-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }

/* ---------- Карточка ---------- */
.mm-box .sj-preview.vt-host { gap: 0; padding: 0; border: 0; border-radius: 16px; background: transparent; min-height: 470px; overflow: hidden; }
.mm-box--cases .sj-preview.vt-host { min-height: 378px; }
/* высоту витрины задаёт панель (списки слева), витрина её не раздувает: экран сжимается, отчёт уменьшается */
.mm-box .sj-preview.vt-host { position: relative; }
.vt-host > .vt { position: absolute; inset: 0; }
.vt { position: relative; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding: 24px; overflow: hidden; border-radius: 16px;
  background: #E8EEFC; color: #091A4E; font-family: var(--font-base); }
.vt p { margin: 0; }
.vt--violet { background: #EEE7FC; }
.vt--green { background: #E3F3E8; }
.vt--dark { background: #142969; color: #fff; }
.vt-k { font: 500 12px/16px var(--font-base); color: #2951CA; }
.vt--violet .vt-k { color: #8520B8; }
.vt--green .vt-k { color: #1B7138; }
.vt--dark .vt-k { color: #BFCCF5; }
.vt-h { font: 650 20px/1.15 var(--font-base); letter-spacing: -.025em; color: #091A4E; text-wrap: balance; }
.vt-p { font: 400 14px/1.45 var(--font-base); color: #404C72; text-wrap: pretty; }
.vt--dark .vt-h { color: #fff; }
.vt--dark .vt-p { color: #C9D4F6; }
.vt--case .vt-p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-vis { position: relative; }

/* человек стоит перед окном на нижнем крае карточки. Голова по центру на 262 px от левого края, но:
   голова целиком в карточке (правый край головы не дальше 332 px) и фото не левее 136 px, где кончаются строки отчёта.
   Если оба условия не сходятся, важнее голова. --k: масштаб фото в «Кейсах», там оно ниже */
.vt-photo { --k: 1; position: absolute; bottom: 0; z-index: 3; height: 225px; width: auto; max-width: none; pointer-events: none;
  right: clamp(calc(8px - var(--w) * var(--k) * (1 - var(--hr))), calc(78px - var(--w) * var(--k) * (1 - var(--hx))), calc(204px - var(--w) * var(--k))); }
/* в «Услугах» и «Решениях» фото на 12% меньше и прижато к правому краю (голова в 20 px от края): колонке отчёта
   остаётся больше места, и текст крупнее (Миша, 03.11: «текст слишком мельчит, внизу пусто») */
.vt--person .vt-photo { --k: .88; height: 198px; right: calc(20px - var(--w) * var(--k) * (1 - var(--hr))); }
.mm-box--cases .vt-photo { --k: .871; height: 196px; }
/* в «Решениях» карточка ниже, чем в «Услугах», и то же фото забирало половину её ширины: у Яхонтовой отчёт
   мельчил до 11 px. Фото чуть меньше, колонка отчёта шире */
.mm-box--solutions .vt--person .vt-photo { --k: .78; height: 176px; }
/* на экране слева колонка коротких строк, справа перед экраном стоит человек */
.vt--person .vt-app__body { padding-right: 180px; }
.vt--person .vt-big b { font-size: 18px; }
/* в узкой колонке у фото подпись строки переносится, а не мельчит (подбор размера в vitrina.js, fit) */
.vt--person .vt-r { flex-wrap: wrap; row-gap: 2px; }
.vt--person .vt-r > span:first-child { white-space: normal; text-overflow: clip; }
.vt--person .vt-fitw .vt-r > span:first-child { width: min-content; }
/* короткий отчёт у фото: каждая строка в одну линию, если так текст выходит крупнее (vitrina.js, fit) */
.vt--person .vt-line .vt-r { flex-wrap: nowrap; }
.vt--person .vt-line .vt-r > span:first-child { white-space: nowrap; text-overflow: ellipsis; }
/* имя и должность у самого человека внизу фото, как подпись в видеозвонке (Миша, 03.11: «меньше и около неё»).
   По ширине место ставит vitrina.js (fit) под центром головы; без скрипта подпись у правого края */
.vt-who.is-tag { position: absolute; right: 14px; bottom: 14px; z-index: 4; padding: 5px 9px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(15, 26, 61, .08), 0 8px 18px -10px rgba(15, 26, 61, .35);
  font-size: 11px; line-height: 14px; white-space: nowrap; }
.vt-who.is-tag b { font-size: 12px; line-height: 16px; color: #091A4E; }
/* вариант «фото в окне» (?foto=okno, Миша 03.11): человек в рамке внутри окна, строки отчёта во всю ширину */
.vt-tile { --th: 112px; position: relative; flex: none; height: var(--th); margin: 12px 12px 0; overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #F3F6FE, #DCE5FB); }
.mm-box--cases .vt-tile { --th: 80px; }
.vt--violet .vt-tile { background: linear-gradient(180deg, #F7F3FD, #E4D9F8); }
.vt--green .vt-tile { background: linear-gradient(180deg, #F1F9F3, #D3ECDB); }
.vt-tile__img { position: absolute; top: calc(var(--th) * .05); height: calc(var(--th) * 1.45); width: auto; max-width: none; pointer-events: none;
  left: calc(66% - var(--th) * 1.45 * var(--ar) * var(--hx)); }  /* лицо правее центра: слева подпись с именем */
.vt-tile .vt-who { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 4px 8px; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .92); font-size: 11px; line-height: 14px; }

/* ---------- Устройство: экран включён, на нём кусок продукта. Занимает всё место под текстом ---------- */
.vt-dev { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 auto; min-height: 0; margin-top: 4px; }
.vt-app { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; overflow: hidden; border-radius: 8px; background: #fff; }
.vt-app__bar { display: flex; flex: none; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-bottom: 1px solid #ECEDF1; font: 600 11px/1 var(--font-base); color: #2F3258; }
.vt-app__bar.is-web { gap: 8px; background: #F7F8FB; }
.vt-app__dots { flex: none; width: 26px; height: 6px; background: radial-gradient(circle 3px at 3px 3px, #D3D8E4 98%, transparent) 0 0 / 10px 6px repeat-x; }
.vt-app__url { flex: 1; min-width: 0; overflow: hidden; padding: 3px 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #E4E7EF; font: 400 11px/14px var(--font-base); color: #5F667F; white-space: nowrap; text-overflow: ellipsis; }
.vt-app__head { flex: none; margin: 0; padding: 10px 12px 0; font: 650 15px/1.2 var(--font-base); letter-spacing: -.02em; color: #2E3346; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt--dark .vt-app__head { color: #2E3346; }
.vt-app > .vt-app__head:first-child { padding-top: 14px; }
.vt-app > .vt-app__body:first-child { padding-top: 14px; }
.vt-app__body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 10px 12px 12px; }
.vt-app .vt-frag { padding: 0; border: 0; border-radius: 0; background: none; }

/* окно продукта на всё место под текстом, как кусок экрана в карточках главной, только крупнее */
.vt-dev--win { margin-top: 6px; }
.vt-dev--win .vt-app { flex: 1 1 auto; border: 1px solid #DDE6FF; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 26, 61, .04); }

/* ---------- Кусок экрана продукта ---------- */
.vt-frag { display: flex; flex-direction: column; padding: 14px; border: 1px solid #DDE6FF; border-radius: 12px; background: #fff;
  font: 400 12px/16px var(--font-base); color: #091A4E; }
.vt-frag > * { flex-shrink: 0; }
.vt-r { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid #DDE6FF; }
.vt-frag > :first-child { border-top: 0; padding-top: 0; }
.vt-r > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-r.is-head { padding-top: 0; border-top: 0; color: #5F667F; font-size: 11px; }
.vt-r.is-head + .vt-r { border-top: 0; padding-top: 4px; }
.vt-r.is-tot { font-weight: 600; }
.vt-r.is-mut { color: #5F667F; }
.vt-r.is-hl { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; border-top-color: transparent; background: #FAEFED; }
.vt-r.is-hl + .vt-r { border-top-color: transparent; }
.vt-r3 { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; }
.vt-r3 > :nth-child(n+2) { text-align: right; }
.vt-txt { font-weight: 500; white-space: nowrap; }
.vt-frag .vt-txt.pos { color: #1B7138; }
.vt-num { font-family: var(--vt-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.vt-frag .pos { color: #1B7138; }
.vt-frag .neg { color: #A92816; }
.vt-frag .muted { color: #9AA3BF; }
.vt-tag { padding: 2px 7px; border-radius: 6px; background: #F4F7FF; color: #404C72; font: 400 11px/15px var(--font-base); white-space: nowrap; }
.vt-tag.is-pos { background: #E1FAE5; color: #1B7138; }
.vt-tag.is-neg { background: #FAEFED; color: #A92816; }
.vt-tag.is-strike { color: #A92816; background: #FAEFED; text-decoration: line-through; }
.vt-tag.is-new { background: #F5F0FA; color: #8520B8; }
.vt-big { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.vt-big span { font-size: 12px; color: #5F667F; }
.vt-big b { font: 500 24px/1.15 var(--vt-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-frag > svg { display: block; width: 100%; height: auto; margin: 2px 0 6px; overflow: visible; }
.vt-split { display: flex; gap: 2px; height: 10px; margin: 2px 0 8px; overflow: hidden; border-radius: 3px; }
.vt-split i { display: block; height: 100%; }
.vt-mbar { display: inline-block; flex: none; width: 40px; height: 6px; margin-left: auto; overflow: hidden; border-radius: 3px; background: #E4EAFB; }
.vt-mbar i { display: block; height: 100%; border-radius: 3px; background: #2951CA; }
.vt-mbar.is-neg { background: #FAEFED; }
.vt-mbar.is-neg i { background: #EB3C23; }
.vt-mbar.is-quiet i { background: #C9D5F5; }
.vt-field { padding: 2px 8px; border-radius: 6px; background: #F4F7FF; box-shadow: inset 0 0 0 1px #DDE6FF; font: 500 12px/18px var(--font-base); white-space: nowrap; }
.vt-field.is-num { font-family: var(--vt-mono); letter-spacing: -.02em; }
.vt-who { display: flex; flex-direction: column; padding-top: 8px; border-top: 1px solid #DDE6FF; font-size: 12px; line-height: 16px; }
.vt-who b { font-weight: 600; }
.vt-who span { color: #5F667F; }
.vt-doc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 10px; }
.vt-doc b { font: 650 15px/1.25 var(--font-base); letter-spacing: -.015em; }
.vt-code { margin: 0 0 8px; padding: 10px; border-radius: 8px; background: #F4F7FF; font: 400 11px/16px var(--vt-mono); color: #091A4E; white-space: pre; overflow: hidden; }
.vt-mods { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; width: 100%; }
.vt-mods i { display: block; height: 6px; border-radius: 3px; background: #E4EAFB; }
.vt-mods i.is-on { background: #2951CA; }
.vt-legend { display: flex; align-items: center; gap: 4px; color: #5F667F; font-size: 11px; white-space: nowrap; }
.vt-legend i { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 2px; }
.vt-legend i:first-child { margin-left: 0; }
.vt-legend i.is-quiet { background: #C9D5F5; }
.vt-legend i.is-main { background: #2951CA; }
.vt-legend i.is-soft { background: #86B1E8; }

/* цепочка шагов и список источников, как .pipe на главной */
.vt-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vt-pipe span { padding: 6px 10px; border: 1px solid #DDE6FF; border-radius: 8px; background: #fff; font-size: 12px; line-height: 16px; white-space: nowrap; }
.vt-pipe span.a-on { border-color: #1B7138; background: #1B7138; color: #fff; }
.vt-pipe i { font-style: normal; color: #5F667F; }
.vt-stack { display: flex; flex-direction: column; gap: 10px; }
.vt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-chips span { padding: 6px 10px; border: 1px solid #DDE6FF; border-radius: 8px; background: #fff; font-size: 12px; line-height: 16px; }

/* переписка, как .tg-chat и .airec на главной */
.vt-chat { display: flex; flex-direction: column; gap: 8px; }
.vt-b { align-self: flex-start; max-width: 92%; padding: 8px 12px; border: 1px solid #DDE6FF; border-radius: 12px 12px 12px 4px; background: #fff; font-size: 12px; line-height: 16px; }
.vt-b.is-me { align-self: flex-end; border-color: #E4EAFB; border-radius: 12px 12px 4px 12px; background: #E4EAFB; }
.vt--blue .vt-b.is-me { border-color: #D4DEF8; background: #D4DEF8; }
.vt--dark .vt-b.is-me { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .12); color: #fff; }
.vt-chat__meta { align-self: flex-start; font-size: 11px; color: #5F667F; }
.vt-airec { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid #DDE6FF; border-radius: 12px; background: #fff; color: #091A4E; }
.vt-airec__who { display: flex; gap: 6px; font-size: 12px; font-weight: 600; color: #8520B8; }
.vt-airec__who::before { content: "✦"; }
.vt-airec p { font-size: 13px; line-height: 1.5; }
.vt-airec__meta { font-size: 11px; color: #5F667F; }

/* ---------- Графики: цвета денег главной, ось и подписи серые ---------- */
.vt-svg { overflow: visible; }
.vt .f-main { fill: #2951CA; background: #2951CA; }
.vt .f-pos { fill: #299F51; background: #299F51; }
.vt .f-neg { fill: #EB3C23; background: #EB3C23; }
.vt .f-quiet { fill: #C9D5F5; background: #C9D5F5; }
.vt .f-soft { fill: #86B1E8; background: #86B1E8; }
.vt .f-band { fill: #E1FAE5; }
.vt .f-negzone { fill: rgba(235, 60, 35, .14); }
.vt .f-negdot { fill: #EB3C23; stroke: #fff; stroke-width: 2; }
.vt .f-dot { fill: #2951CA; stroke: #fff; stroke-width: 2; }
.vt .vt-axis { stroke: #DDE6FF; stroke-width: 1; }
.vt .vt-zero { stroke: #C9D5F5; stroke-width: 1; stroke-dasharray: 3 3; }
.vt .vt-plan { stroke: #5F667F; stroke-width: 1.5; stroke-linecap: round; }
.vt .vt-line, .vt .vt-line2, .vt .vt-line3 { fill: none; stroke-width: 2; stroke-linecap: round; }
.vt .vt-line { stroke: #2951CA; }
.vt .vt-line2 { stroke: #86B1E8; }
.vt .vt-line3 { stroke: #C9D5F5; }
.vt .vt-lab { font: 400 11px var(--vt-mono); fill: #5F667F; letter-spacing: -.02em; }

/* ---------- Наполнение: строки проявляются, полосы растут, шаги загораются. 400 мс, разбег до 100 мс ----------
   Без класса is-play витрина стоит готовой: так при быстром проходе мышью ничего не мелькает */
.vt .a-grow { transform-box: fill-box; transform-origin: 50% 100%; }
.vt .a-grow-dn { transform-box: fill-box; transform-origin: 50% 0; }
.vt .a-grow-x { transform-origin: 0 50%; }
.vt .a-draw { stroke-dasharray: 1; }
.vt-vis.is-play :is(.a-row, .a-grow, .a-grow-dn, .a-grow-x, .a-draw, .a-fade, .a-on) {
  animation-duration: .4s; animation-timing-function: var(--vt-ease); animation-fill-mode: both;
  animation-delay: calc(var(--d0, 0ms) + var(--d, 0ms));
}
.vt-vis.is-play .a-row { animation-name: vt-row; }
.vt-vis.is-play :is(.a-grow, .a-grow-dn) { animation-name: vt-grow-y; }
.vt-vis.is-play .a-grow-x { animation-name: vt-grow-x; }
.vt-vis.is-play .a-draw { animation-name: vt-draw; }
.vt-vis.is-play .a-fade { animation-name: vt-fade; }
.vt-vis.is-play .a-on { animation-name: vt-on; }
@keyframes vt-row { from { opacity: 0; transform: translateY(6px); } }
@keyframes vt-grow-y { from { transform: scaleY(.04); } }
@keyframes vt-grow-x { from { transform: scaleX(.03); } }
@keyframes vt-draw { from { stroke-dashoffset: 1; } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-on { from { border-color: #DDE6FF; background: #fff; color: #091A4E; } }
@media (prefers-reduced-motion: reduce) {
  .vt-vis.is-play * { animation: none !important; }
}