/* =========================================================================
   Интерактивные схемы в статьях (inc/ix.php, assets/js/ix.js).
   Подключает inc/head.php на страницах из IX_PAGES.
   ========================================================================= */

.ix{margin:1.4em 0 2em;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.ix__h{margin:0 0 12px;font-weight:700;font-size:1.02rem}
/* Сцена нарисована под тёмную тему, как схемы-картинки: светлой её
   переворачивает тот же фильтр. Побежалость — цвет и есть содержание. */
.ix__svg{display:block;width:100%;height:auto;border-radius:10px;filter:var(--fig-filter)}
.ix__svg--true{filter:none}

.ix__ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px 20px;margin:14px 0 12px}
.ix__f{min-width:0}
.ix__f[hidden]{display:none}
.ix__f label{display:flex;justify-content:space-between;gap:8px;font-size:.88rem;color:var(--fg-2);margin-bottom:4px}
.ix__f output{font-weight:700;color:var(--accent-ink);white-space:nowrap}
.ix__f input[type=range]{display:block;width:100%;margin:0;min-height:28px;accent-color:var(--accent)}

.ix__seg{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ix__seg input{position:absolute;opacity:0;pointer-events:none}
.ix__seg label{display:block;margin:0;padding:7px 10px;border:1px solid var(--line);border-radius:7px;font-size:.84rem;cursor:pointer;color:var(--fg-2)}
.ix__seg input:checked+label{border-color:var(--accent);color:var(--accent-ink);background:rgba(255,152,0,.08)}
.ix__seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}

.ix__k{display:block;font-size:.78rem;color:var(--fg-3);line-height:1.3}
.ix__hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:8px}
.ix__i{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0}
.ix__v{display:block;font-weight:700;overflow-wrap:anywhere}
.ix__i--main .ix__v{color:var(--accent-ink);font-size:1.08rem}
.ix__i--warn .ix__v{color:var(--warn)}
.ix__i--bad .ix__v{color:var(--bad)}
.ix__msg{margin:10px 0 0;font-size:.92rem}
.ix__msg--warn{color:var(--warn)}
.ix__note{margin:6px 0 0;font-size:.8rem;color:var(--fg-3)}