/* Шаги в карточках сценариев: первый → промежуточные → итог (04.10.2026).
   Страницы: /service/razrabotka-po-s-ii (.w2ai-case__body), /service/razrabotka-baz-dannyh/sed
   (.w2sed-case__body), /service/razrabotka-baz-dannyh/erp (.w2erp-case__body).
   Цвет и иконка — по ПОЗИЦИИ шага, а не по тексту подписи: первый <dt> — коралловый
   (исходная ситуация / с чего начинаем), средние — фиолетовые (что делаем / добавляем дальше),
   последний — зелёный итог (что меняется / что получает бизнес). Любые формулировки подхватятся.
   Блок включается классом *-case__body у <dl> или явным классом .w2st (для новых блоков).
   Подключение — одной строкой в page_loader.php (все /service/* на JSON-CMS).
   Только цвет, фон, иконки, раскладка шагов и анимация. Размер шрифта и интерлиньяж НЕ задаём —
   их ведёт общая шкала типографики (typo-2026.css).
   Без JS и при prefers-reduced-motion всё видно сразу: прячем элементы только под классом
   .w2st--anim, который вешает steps-2026.js. */

dl:is(.w2st,[class*="-case__body"]){
  position:relative;
  padding-left:26px;
  --w2st-warm:#c2410c;  --w2st-warm-bg:rgba(234,88,12,.12);
  --w2st-do:#8f42ec;    --w2st-do-bg:rgba(143,66,236,.12);
  --w2st-ok:#1f9d61;    --w2st-ok-bg:rgba(31,157,97,.13);
}

/* Вертикальная линия-цепочка: коралл → фиолетовый → зелёный */
dl:is(.w2st,[class*="-case__body"])::before{
  content:''; position:absolute; left:7px; top:16px; bottom:24px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, var(--w2st-warm) 0%, var(--w2st-do) 50%, var(--w2st-ok) 100%);
  opacity:.45; transform-origin:top center;
}

/* Подпись шага — плашка с иконкой. По умолчанию (средние шаги) — фиолетовая, гаечный ключ */
dl:is(.w2st,[class*="-case__body"]) > dt{
  position:relative;
  display:flex; align-items:center; gap:6px; width:max-content; max-width:100%;
  padding:4px 10px; border-radius:8px;
  font-weight:700;
  color:var(--w2st-do); background:var(--w2st-do-bg);
  --w2st-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}
dl:is(.w2st,[class*="-case__body"]) > dt::before{
  content:''; flex:0 0 auto; width:1.25em; height:1.25em;
  background-color:currentColor;
  -webkit-mask:var(--w2st-ic) center / contain no-repeat; mask:var(--w2st-ic) center / contain no-repeat;
}
/* Точка-маркер на линии */
dl:is(.w2st,[class*="-case__body"]) > dt::after{
  content:''; position:absolute; left:-23px; top:50%; width:10px; height:10px; margin-top:-5px;
  border-radius:50%; background:currentColor; box-shadow:0 0 0 3px #fff;
}

/* Первый шаг — коралловый, треугольник-предупреждение (исходная ситуация / с чего начинаем) */
dl:is(.w2st,[class*="-case__body"]) > dt:first-of-type{
  color:var(--w2st-warm); background:var(--w2st-warm-bg);
  --w2st-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 2.4 17.6A2 2 0 0 0 4.1 20.6h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.2'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
}
/* Последний шаг — зелёный итог, галочка в круге */
dl:is(.w2st,[class*="-case__body"]) > dt:last-of-type:not(:first-of-type){
  color:var(--w2st-ok); background:var(--w2st-ok-bg);
  --w2st-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.3 12.4 2.6 2.6 5-5.4'/%3E%3C/svg%3E");
}

/* Итог — лёгкая зелёная подложка */
dl:is(.w2st,[class*="-case__body"]) > dd:last-of-type:not(:first-of-type){
  margin-top:8px; padding:10px 12px; border-radius:10px;
  background:rgba(31,157,97,.07); border:1px solid rgba(31,157,97,.2);
  color:#131727;
}

/* Карточка: подъём и акцентная рамка на ховер (box-shadow — без сдвига раскладки) */
:is(.w2ai-case,.w2sed-case,.w2erp-case,.w2st-card){
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
@media (hover:hover){
  :is(.w2ai-case,.w2sed-case,.w2erp-case,.w2st-card):hover{
    transform:translateY(-4px);
    box-shadow:0 0 0 1.5px #8f42ec, 0 16px 36px rgba(19,23,39,.10);
  }
}

/* ---------- Анимация появления (только когда JS повесил .w2st--anim) ----------
   Задержку каждому шагу ставит steps-2026.js инлайн-переменной --w2st-d — по позиции. */
@media (prefers-reduced-motion: no-preference){
  dl.w2st--anim > dt, dl.w2st--anim > dd{
    opacity:0; transform:translateY(10px);
    transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  dl.w2st--anim::before{ transform:scaleY(0); transition:transform .8s cubic-bezier(.4,0,.2,1); }
  dl.w2st--anim.w2st--in::before{ transform:scaleY(1); }
  dl.w2st--anim.w2st--in > dt, dl.w2st--anim.w2st--in > dd{ opacity:1; transform:none; transition-delay:var(--w2st-d, 0ms); }
  dl.w2st--anim.w2st--in > dt:last-of-type:not(:first-of-type){ animation:w2st-pulse .9s ease-out .8s 1; }
  dl.w2st--anim.w2st--in > dt:last-of-type:not(:first-of-type)::after{ animation:w2st-dot .9s ease-out .8s 1; }
}
@keyframes w2st-pulse{
  0%  { box-shadow:0 0 0 0 rgba(31,157,97,.45); }
  100%{ box-shadow:0 0 0 9px rgba(31,157,97,0); }
}
@keyframes w2st-dot{
  0%  { box-shadow:0 0 0 3px #fff, 0 0 0 3px rgba(31,157,97,.5); }
  100%{ box-shadow:0 0 0 3px #fff, 0 0 0 10px rgba(31,157,97,0); }
}
@media (prefers-reduced-motion: reduce){
  :is(.w2ai-case,.w2sed-case,.w2erp-case,.w2st-card){ transition:none; }
  :is(.w2ai-case,.w2sed-case,.w2erp-case,.w2st-card):hover{ transform:none; }
}

@media (max-width:767px){
  dl:is(.w2st,[class*="-case__body"]){ padding-left:22px; }
  dl:is(.w2st,[class*="-case__body"])::before{ left:5px; }
  dl:is(.w2st,[class*="-case__body"]) > dt::after{ left:-21px; }
}

/* brand.css красит «#__nuxt .working dt» в серый с !important, шаблоны страниц — в
   rgba(19,23,39,.45). Перебиваем весом id (:is() берёт специфичность самого тяжёлого
   аргумента) и тем же !important. */
:is(#__nuxt,#w2main,body) dl:is(.w2st,[class*="-case__body"]) > dt{ color:var(--w2st-do) !important; }
:is(#__nuxt,#w2main,body) dl:is(.w2st,[class*="-case__body"]) > dt:first-of-type{ color:var(--w2st-warm) !important; }
:is(#__nuxt,#w2main,body) dl:is(.w2st,[class*="-case__body"]) > dt:last-of-type:not(:first-of-type){ color:var(--w2st-ok) !important; }
:is(#__nuxt,#w2main,body) dl:is(.w2st,[class*="-case__body"]) > dd:last-of-type:not(:first-of-type){ color:#131727 !important; }