/* «Системы, которые управляют спросом» — блок главной и страница /ii-otdel/sistemy-sprosa/ (спека 183, 05.10.2026).
   Только токены --sq-* из sq-theme.css: светлая и тёмная тема — автоматически. Без картинок: схемы — встроенные SVG. */
.sqd{--sqd-spring:cubic-bezier(.34,1.4,.64,1);--sqd-ease:cubic-bezier(.22,.8,.24,1)}
.sqd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 32px;padding:0;list-style:none;counter-reset:sqd}
.sqd-steps li{position:relative;padding:4px 18px 4px 0;counter-increment:sqd}
.sqd-steps li::before{content:counter(sqd);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sq-teal-soft);color:var(--sq-teal);font:600 13px/1 var(--sq-f-display);margin-bottom:10px}
.sqd-steps li::after{content:"";position:absolute;top:17px;left:34px;right:8px;height:1px;background:var(--sq-line)}
.sqd-steps li:last-child::after{display:none}
.sqd-steps b{display:block;font:500 15px/1.3 var(--sq-f-display);color:var(--sq-ink);margin-bottom:4px}
.sqd-steps span{display:block;font-size:14px;line-height:1.5;color:var(--sq-ink-3)}
.sqd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.sqd-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 18px 16px;background:var(--sq-panel);border:1px solid var(--sq-line);border-radius:20px;color:inherit;transition:transform .45s var(--sqd-spring),box-shadow .35s var(--sqd-ease),border-color .25s var(--sqd-ease)}
.sqd-card[hidden]{display:none}
.sqd-card-link{color:inherit;text-decoration:none}
.sqd-card-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
.sqd-card-link:focus-visible{outline:none}
.sqd-card:has(.sqd-card-link:focus-visible){outline:3px solid color-mix(in srgb,var(--sq-teal) 40%,transparent);outline-offset:2px}
.sqd-card:hover{transform:translateY(-3px);border-color:var(--sq-line-2);box-shadow:var(--sq-shadow)}
.sqd-card:active{transform:scale(.985)}
.sqd-chip:focus-visible,.sqd-add:focus-visible,.sqd-fchips button:focus-visible{outline:3px solid color-mix(in srgb,var(--sq-teal) 40%,transparent);outline-offset:2px}
.sqd-n{font:600 12px/1 var(--sq-f-display);color:var(--sq-ink-4);letter-spacing:.04em}
.sqd-viz{display:grid;place-items:center;padding:12px;border-radius:14px;background:var(--sq-soft)}
.sqd-sch{display:block;width:100%;max-width:210px;height:auto;aspect-ratio:120/56;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sqd-sch .a{stroke:var(--sq-teal)}.sqd-sch .b{stroke:var(--sq-lamp)}.sqd-sch .m{stroke:var(--sq-line-2)}
.sqd-sch .d{stroke-dasharray:3 4}
.sqd-sch .fa{fill:var(--sq-teal);stroke:none}.sqd-sch .fb{fill:var(--sq-lamp);stroke:none}.sqd-sch .fm{fill:var(--sq-line-2);stroke:none}
.sqd-card h3{font:500 17px/1.3 var(--sq-f-display);letter-spacing:-.01em;margin:2px 0 0;color:var(--sq-ink);text-wrap:balance}
.sqd-card p{font-size:14.5px;line-height:1.5;color:var(--sq-ink-3);margin:0}
.sqd-ex{padding:10px 12px;border-radius:12px;background:var(--sq-teal-soft);color:var(--sq-ink-2)!important;font-size:13.5px!important}
.sqd-ex small{display:block;margin-top:3px;font-size:12px;color:var(--sq-ink-3)}
.sqd-bars{display:grid;gap:4px;margin:8px 0 2px}
.sqd-bars i{display:block;height:6px;width:var(--w);border-radius:3px;background:var(--sq-line-2)}
.sqd-bars i.ev{background:var(--sq-lamp)}
.sqd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.sqd-tag{padding:3px 10px;border-radius:999px;font:500 12px/1.4 var(--sq-f-body);color:var(--sq-ink-3);border:1px solid var(--sq-line)}
.sqd-wave{align-self:flex-start;padding:3px 10px;border-radius:999px;font:600 12px/1.4 var(--sq-f-body);background:var(--sq-soft);color:var(--sq-ink-3)}
.sqd-wave[data-wave="first"]{background:var(--sq-teal-soft);color:var(--sq-teal)}
.sqd-wave[data-wave="data"]{background:var(--sq-lamp-soft);color:var(--sq-warn)}
.sqd-note{max-width:70ch;margin:22px 0 0;font-size:14.5px;line-height:1.55;color:var(--sq-ink-3)}
.sqd-more{display:inline-flex;margin-top:18px;font:600 15px/1 var(--sq-f-body);color:var(--sq-teal);text-decoration:none}
.sqd-more:hover{text-decoration:underline}
.sqd-nichegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sqd-niche{display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px;background:var(--sq-panel);border:1px solid var(--sq-line);border-radius:20px}
.sqd-niche h3{font:500 17px/1.3 var(--sq-f-display);letter-spacing:-.01em;margin:0;color:var(--sq-ink);text-wrap:balance}
.sqd-niche .sig{font-size:14px;line-height:1.5;color:var(--sq-ink-3);margin:0}
.sqd-niche .xp{align-self:flex-start;padding:3px 10px;border-radius:999px;font:600 12px/1.4 var(--sq-f-body);background:var(--sq-ok-bg);color:var(--sq-ok)}
.sqd-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sqd-chip{display:inline-flex;padding:6px 11px;border-radius:999px;border:1px solid var(--sq-line);background:var(--sq-bg);font:500 13px/1.2 var(--sq-f-body);color:var(--sq-ink-2);text-decoration:none;transition:border-color .2s,color .2s}
.sqd-chip:hover{border-color:var(--sq-teal);color:var(--sq-teal)}
.sqd-niche .sq-btn{margin-top:auto;align-self:stretch;justify-content:center;text-align:center}
.sqd-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sqd-nichegrid+.sqd-modes{margin-top:28px}
.sqd-mode{padding:20px;border:1px dashed var(--sq-line-2);border-radius:20px}
.sqd-mode b{display:block;font:500 17px/1.3 var(--sq-f-display);color:var(--sq-ink);margin-bottom:6px}
.sqd-mode span{font-size:14.5px;line-height:1.5;color:var(--sq-ink-3)}
/* конструктор: кнопка «в набор», отмеченная карточка, фильтры, плашка набора */
.sqd-add{position:absolute;z-index:2;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--sq-line-2);background:var(--sq-panel);cursor:pointer;display:grid;place-items:center;transition:background .3s var(--sqd-ease),border-color .3s var(--sqd-ease),transform .45s var(--sqd-spring)}
.sqd-add[hidden]{display:none}
.sqd-add span{position:relative;width:14px;height:14px}
.sqd-add span::before,.sqd-add span::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;border-radius:1px;background:var(--sq-ink-2);transition:transform .45s var(--sqd-spring),width .3s,background .3s}
.sqd-add span::after{transform:rotate(90deg)}
.sqd-add:hover{transform:scale(1.08);border-color:var(--sq-teal)}
.sqd-add[aria-pressed="true"]{background:var(--sq-teal);border-color:var(--sq-teal)}
.sqd-add[aria-pressed="true"] span::before{width:6px;margin-left:-6px;transform:translate(0,3px) rotate(45deg);background:var(--sq-on-teal)}
.sqd-add[aria-pressed="true"] span::after{width:11px;margin-left:-3px;transform:translate(0,0) rotate(-50deg);background:var(--sq-on-teal)}
.sqd-card.is-picked{border-color:var(--sq-teal);box-shadow:0 0 0 1px var(--sq-teal),var(--sq-shadow)}
.sqd-builder.is-live .sqd-card{animation:sqd-in .5s var(--sqd-ease) backwards}
@keyframes sqd-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.sqd-filters{display:grid;gap:10px;margin:0 0 22px;padding:16px 18px;border-radius:22px;background:var(--sq-panel);border:1px solid var(--sq-line)}
.sqd-filters[hidden]{display:none}
.sqd-frow{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;min-width:0}
.sqd-flabel{font:600 12px/1.3 var(--sq-f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--sq-ink-4)}
.sqd-fchips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.sqd-fchips button{appearance:none;font:500 14px/1 var(--sq-f-body);color:var(--sq-ink-2);background:var(--sq-soft);border:1px solid transparent;border-radius:999px;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:background .25s var(--sqd-ease),color .25s var(--sqd-ease),transform .45s var(--sqd-spring)}
.sqd-fchips button:hover{transform:translateY(-1px);color:var(--sq-ink)}
.sqd-fchips button[aria-pressed="true"]{background:var(--sq-teal);color:var(--sq-on-teal)}
.sqd-fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px;border-top:1px solid var(--sq-line)}
.sqd-count{margin:0;font:600 14px/1.3 var(--sq-f-body);color:var(--sq-ink-2)}
.sqd-reset,.sqd-clear{appearance:none;border:0;background:none;font:600 14px/1 var(--sq-f-body);color:var(--sq-teal);cursor:pointer;padding:6px 0}
.sqd-fnote{margin:0;font-size:13px;line-height:1.5;color:var(--sq-ink-4)}
.sqd-empty{margin:18px 0 0;padding:18px;border-radius:16px;background:var(--sq-soft);color:var(--sq-ink-2);font-size:15px;text-align:center}
.sqd-empty[hidden]{display:none}
.sqd-basket{position:sticky;z-index:5;bottom:16px;margin:22px auto 0;max-width:820px;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 20px;border-radius:999px;background:color-mix(in srgb,var(--sq-panel) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--sq-line);box-shadow:0 18px 40px -18px rgba(15,23,28,.35);animation:sqd-up .5s var(--sqd-spring)}
.sqd-basket[hidden]{display:none}
.sqd-basket p{flex:1;min-width:0;margin:0;font:500 14px/1.35 var(--sq-f-body);color:var(--sq-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sqd-basket .sq-btn{border-radius:999px;white-space:nowrap}
@keyframes sqd-up{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
/* страница: подробности по каждой системе */
.sqd-mod{border-top:1px solid var(--sq-line)}
.sqd-modgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
.sqd-modgrid h2{font:500 clamp(22px,2.8vw,30px)/1.2 var(--sq-f-display);letter-spacing:-.015em;margin:8px 0 14px;color:var(--sq-ink);text-wrap:balance}
.sqd-modgrid dl{margin:0;display:grid;gap:12px}
.sqd-modgrid dt{font:600 12px/1.3 var(--sq-f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--sq-ink-4)}
.sqd-modgrid dd{margin:2px 0 0;font-size:16px;line-height:1.55;color:var(--sq-ink-2)}
.sqd-modviz{display:grid;place-items:center;padding:28px;border-radius:24px;background:var(--sq-soft);border:1px solid var(--sq-line)}
.sqd-modviz .sqd-sch{max-width:320px}
.sqd-modviz .cap{margin:12px 0 0;font-size:13px;color:var(--sq-ink-4);text-align:center}
.sqd-modtext .sqd-ex{margin-top:14px}
.sqd-modtext .sqd-chips{margin-top:14px}
@media (max-width:900px){.sqd-steps{grid-template-columns:repeat(2,1fr);gap:18px 0}.sqd-steps li:nth-child(2)::after{display:none}.sqd-modes{grid-template-columns:1fr}.sqd-modgrid{grid-template-columns:1fr;gap:20px}}
@media (max-width:640px){
  .sqd-steps{grid-template-columns:1fr 1fr;gap:16px 14px;margin-bottom:24px}.sqd-steps li{padding-right:0}.sqd-steps li::after{display:none}.sqd-steps b{font-size:14px}.sqd-steps span{font-size:13px;line-height:1.4}
  .sqd-grid,.sqd-nichegrid{grid-template-columns:1fr}
  .sqd-card{display:grid;grid-template-columns:104px 1fr;column-gap:14px;row-gap:6px;padding:14px}
  .sqd-card .sqd-n{grid-column:2;grid-row:1}.sqd-card .sqd-viz{grid-column:1;grid-row:1/4;padding:8px;align-self:start}
  .sqd-card h3,.sqd-card p,.sqd-card .sqd-tags{grid-column:2}.sqd-card .sqd-ex{grid-column:1/3}
  .sqd-card h3{padding-right:38px}.sqd-add{top:10px;right:10px}
  .sqd-filters{padding:14px 0 12px;border-radius:18px}
  .sqd-frow{grid-template-columns:1fr;gap:6px}.sqd-flabel{padding:0 14px}
  .sqd-fchips{flex-wrap:nowrap;overflow-x:auto;padding:2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.sqd-fchips::-webkit-scrollbar{display:none}
  .sqd-fbar,.sqd-fnote{padding-left:14px;padding-right:14px}
  .sqd-basket{bottom:calc(84px + env(safe-area-inset-bottom));border-radius:20px;flex-wrap:wrap;padding:12px 14px}.sqd-basket p{flex-basis:100%;white-space:normal}.sqd-basket .sq-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.sqd-card,.sqd-chip,.sqd-add,.sqd-fchips button{transition:none}.sqd-card:hover{transform:none}.sqd-builder.is-live .sqd-card,.sqd-basket{animation:none}}