@charset "UTF-8";
/* ───────── 13.10.2026 (#109, этап 1): график по дням под таблицей на листах РК (chart.js) ─────────
   Макет: import/redant-dashboard-mockups/handoff/README.md «График по дням под таблицей», разд. 13 (CSS макета), снимки 56–58.
   Все правила ограничены #chartbox (блок в #content) и #chartmenu (меню показателей в body): имена макета (.seg, .lb, .tip, .cb, .bk …)
   на странице уже заняты шапкой, сеткой и меню «Каналы» / «Столбцы». Каркас меню — как #colmenu (columns.css), кнопка — .btn.chanbtn
   (style.css), подсказка точки — своя (#tip сайта всегда с задержкой 1 с). Темной темы на сайте нет — цвета числами, как в остальных файлах.
   13.10.2026 (#109, этап «основные листы»): ступенька «внесено по неделе» (.ch-st), «*» у итога легенды (.wem), строки подсказки «по неделе»
   (.twe) и «неполная сумма» (.tpq со значком «?» таблицы). Имена сверены со всеми css сайта (.st занят «Каналами» — поэтому .ch-st).
   13.10.2026 (#109, этап «сравнение периодов»): кнопка .ch-cmpb (как «Каналы» с фильтром — .chanbtn.flt), образец периодов и янтарная пометка
   (.ch-cl, .ckk, .cnone), пунктир (.lnp, ступенька .ch-st.cmp), ось в две строки (.xax.two), подсказка в три столбца (.ch-tip.tc, .trh), точки
   прошлого (.hdp), разница в легенде (.li .dif), меню #chartcmpmenu (.cmh, .ci, .ck2, .cnote) — по CSS макета (project/ChartCompare.dc.html). */

/* ── блок: 16 px фона страницы перед ним (фон #content белый — полоса своим элементом), прилипает к левому краю при прокрутке вбок ── */
#chartbox{position:sticky;left:0;box-sizing:border-box;color:#1c1e22;font-size:13px;line-height:1.35}
#chartbox [hidden]{display:none !important}
#chartbox .ch-gap{height:16px;background:#f4f4f1}
#chartbox .chs{position:relative;background:#ffffff;border-top:1px solid #e4e4df;border-bottom:1px solid #e4e4df;font-variant-numeric:tabular-nums}

/* строка названия, 48 px: «ГРАФИК» · кнопка-список · «Дни | Недели | Месяцы» · … · «Значения | % от среднего» · «Обновляю…» */
#chartbox .chh{height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;min-width:0}
#chartbox .ch-lb{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#6f737a;font-weight:600;white-space:nowrap;flex-shrink:0}
#chartbox .ch-btn{max-width:420px;min-width:0;flex-shrink:1}
#chartbox .ch-btn.on{background:#ebebe6}
#chartbox .ch-btn .muted{color:#6f737a;white-space:nowrap}
#chartbox .ch-sp{flex:1 1 auto;min-width:0}
#chartbox .gseg{position:relative;display:flex;padding:2px;background:#ebebe6;border-radius:7px;flex-shrink:0}
#chartbox .gseg button{position:relative;z-index:1;width:76px;height:28px;border:0;background:transparent;font:inherit;font-size:13px;font-weight:500;
  color:#4a4e55;cursor:pointer;padding:0;border-radius:5px;white-space:nowrap;transition:color .2s}   /* 14.10.2026 (владелец): как .seg-b шапки (style.css) — 0,2 с */
#chartbox .gseg.wide button{width:112px}
#chartbox .gseg button.on{color:#1c1e22;cursor:default}
#chartbox .gseg button:not(.on):hover{color:#1c1e22}
#chartbox .gseg button:focus-visible{outline:2px solid #1f4fb8;outline-offset:-2px}
#chartbox .gseg .gthumb{position:absolute;top:2px;left:2px;width:76px;height:28px;border-radius:5px;background:#ffffff;box-shadow:0 1px 2px rgba(0,0,0,.14);
  transition:transform .24s cubic-bezier(.3,.7,.2,1)}
#chartbox .gseg.wide .gthumb{width:112px}
#chartbox .ch-busy{display:flex;align-items:center;gap:6px;color:#5a5e65;font-size:12.5px;white-space:nowrap;flex-shrink:0}
#chartbox .ch-busy svg{animation:chSpin 1s linear infinite}
@keyframes chSpin{to{transform:rotate(360deg)}}

/* поле 300 px: шкала слева (и справа при второй единице), подпись единицы над шкалой, сетка, линии; ось X 30 px; легенда */
#chartbox .plot{position:relative;height:300px;box-shadow:inset 0 1px 0 #eeeeea;z-index:2}
#chartbox .ch-svg{position:absolute;top:0;overflow:visible}
#chartbox .ch-svg .gl{stroke:#eeeeea}
#chartbox .ch-svg .gz{stroke:#d6d6d0}
#chartbox .ch-svg .vg{stroke:#f3f3ef}
#chartbox .ch-svg .vm{stroke:#e4e4df}
#chartbox .ch-svg .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;transition:opacity .14s,stroke-width .14s}
#chartbox .ch-svg .cd,#chartbox .ch-svg .cp{transition:opacity .14s}
/* «внесено по неделе» в «Днях» (README разд. 5, 58i): бледная ступенька на дни недели — 3 px, прозрачность 0,45, цвет линии */
#chartbox .ch-svg .ch-st{stroke-width:3;stroke-linecap:butt;opacity:.45;transition:opacity .14s}
#chartbox .yt{position:absolute;font-size:11px;line-height:16px;color:#8a8e95;white-space:nowrap}
#chartbox .ycap{position:absolute;top:4px;font-size:10.5px;font-weight:600;color:#8a8e95;white-space:nowrap}
#chartbox .ch-nod{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;font-size:12.5px;
  color:#5a5e65;pointer-events:none;padding:0 20px;box-sizing:border-box}
#chartbox .ch-nod b{font-size:13px;color:#1c1e22;font-weight:600}
#chartbox .xax{position:relative;height:30px;box-shadow:inset 0 1px 0 #e4e4df;z-index:1}
#chartbox .xt{position:absolute;top:6px;transform:translateX(-50%);font-size:11px;line-height:15px;color:#6f737a;white-space:nowrap}
#chartbox .xt.ms{transform:none;padding-left:4px}
#chartbox .xt.we{color:#b4473f}

/* легенда (как в Grafana): отрезок цвета 16 × 3, «блок · столбец», метка «справа», итог за период; крестик «Убрать с графика» по наведению */
#chartbox .lgd{display:flex;flex-wrap:wrap;gap:4px 6px;padding:6px 16px 12px 62px}
#chartbox .li{position:relative;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 26px 0 8px;border-radius:5px;font-size:12px;color:#33373d;
  max-width:460px;min-width:0;box-sizing:border-box;cursor:default;transition:opacity .14s,background-color .14s}
#chartbox .li:hover{background:#f2f2ee}
#chartbox .li > i{width:16px;height:3px;border-radius:2px;flex-shrink:0}
#chartbox .li .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chartbox .li b{font-weight:600;color:#1c1e22;white-space:nowrap}
#chartbox .li b.nil{color:#8a8e95;font-weight:500}
/* итог с числами, внесенными по неделе: серая «*» у значения, пояснение — data-tip значения */
#chartbox .li b .wem{margin-left:1px;color:#8a8e95;font-weight:600}
#chartbox .li .sd{font-size:11px;color:#8a8e95;border:1px solid #e0e0da;border-radius:4px;padding:0 4px;line-height:16px;white-space:nowrap}
#chartbox .li.dim{opacity:.4}
#chartbox .li.off .nm{text-decoration:line-through;color:#8a8e95}
#chartbox .li .why{color:#8a8e95;white-space:nowrap}
/* #131 (14.10.2026): подписи линий (chLabels в chart.js) — общее у всех линий пишется один раз (строка .tbk под датой в подсказке, кнопка
   названия), в строке — то, чем линии различаются. «блок · показатель» (.sp, легенда и подсказка) — сжимается только блок (.nb, многоточие);
   « · показатель» (.nq) не сжимается вовсе (даже доля пикселя сжатия рисует многоточие — первая версия), его предел — «ширина − 1,5em»:
   длиннее — многоточие и у показателя, от блока видно начало. Блок не уже 1,5em («Бот» шире; 2em давали просвет после «Бот»): иначе у короткого блока («Итого») предел срезал бы показатель,
   которому место есть (вторая версия с пределом «− 4em» резала «Итого · Цена розн. со скидкой, …» в легенде) */
#chartbox .sp{display:flex;min-width:0}
#chartbox .sp .nb{flex:0 1 auto;min-width:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chartbox .sp .nq{display:flex;flex:0 0 auto;min-width:0;max-width:calc(100% - 1.5em)}
#chartbox .sp .ns{flex:none;white-space:pre}
#chartbox .sp .nt{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chartbox .ch-btn .muted{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* «6 показателей · <длинный блок>» не выходит за кнопку */
#chartbox .li.gone .why{color:#b4473f}
#chartbox .li .x{position:absolute;right:3px;top:3px;width:20px;height:20px;border:0;background:transparent;border-radius:4px;display:none;align-items:center;
  justify-content:center;color:#8a8e95;cursor:pointer;padding:0}
#chartbox .li:hover .x,#chartbox .li .x:focus-visible,#chartbox .li.gone .x{display:flex}
#chartbox .li .x:hover{background:#fdecea;color:#8c1d15}
#chartbox .li .x:focus-visible{outline:2px solid #1f4fb8;outline-offset:0}
#chartbox .ch-note{display:flex;align-items:flex-start;gap:8px;padding:8px 16px;border-top:1px solid #ebebe6;background:#fafaf8;font-size:12px;line-height:16px;color:#5a5e65}
#chartbox .ch-note svg{flex-shrink:0;color:#8a8e95;margin-top:1px}
#chartbox .ch-note span{display:block}

/* «Обновление» (58m): прежний график бледнее, наведение выключено, без скелета */
#chartbox .chs.ld .plot,#chartbox .chs.ld .xax,#chartbox .chs.ld .lgd{opacity:.45}
#chartbox .chs.ld .ch-ov{pointer-events:none}

/* «Все снято» (58b): значок, заголовок, три быстрых показателя первого блока */
#chartbox .ch-empty{padding:28px 20px 32px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#5a5e65;font-size:12.5px;
  box-shadow:inset 0 1px 0 #eeeeea}
#chartbox .ch-empty > svg{color:#b3b6bc}
#chartbox .ch-empty b{font-size:13px;color:#1c1e22;font-weight:600}
#chartbox .ch-empty .qk{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
#chartbox .ch-empty .qk .btn{height:30px;font-size:12.5px;color:#33373d}
#chartbox .ch-empty .qk .btn svg{color:#6f737a}

/* наведение (README разд. 9): слой над полем, линия наведения 1 px, точки 9 px с белым кольцом, подсказка без задержки. Элементы постоянные —
   меняются только left / top (иначе переход не сработает); переезд — 0,2 с (линия, точки) и 0,24 с (подсказка), появление — 0,15 с.
   .mv — переезд включен (первое появление встает на место сразу, без «прилета» с прежнего места). */
#chartbox .ch-ov{position:absolute;top:0;height:300px;cursor:crosshair;outline:none;z-index:3}
#chartbox .ch-ov:focus-visible{box-shadow:inset 0 0 0 2px #1f4fb8}
#chartbox .cross{position:absolute;top:0;height:300px;width:1px;background:#9aa0a8;pointer-events:none;opacity:0;transition:opacity .15s ease-out;z-index:2}
#chartbox .hd{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;box-shadow:0 0 0 2px #ffffff;pointer-events:none;opacity:0;
  transition:opacity .15s ease-out;z-index:2}
#chartbox .ch-tip{position:absolute;left:0;top:0;width:340px;box-sizing:border-box;background:#1c1e22;color:#ffffff;font-size:12px;line-height:1.4;padding:8px 10px 9px;
  border-radius:5px;box-shadow:0 8px 24px rgba(20,20,19,.2);pointer-events:none;opacity:0;z-index:4;transition:opacity .15s ease-out}
#chartbox .plot.hov .cross,#chartbox .plot.hov .ch-tip,#chartbox .plot.hov .hd.has:not(.nil){opacity:1}
#chartbox .plot.mv .cross{transition:left .2s cubic-bezier(.2,.8,.3,1),opacity .15s ease-out}
#chartbox .plot.mv .hd{transition:left .2s cubic-bezier(.2,.8,.3,1),top .2s cubic-bezier(.2,.8,.3,1),opacity .15s ease-out}
#chartbox .plot.mv .ch-tip{transition:left .24s cubic-bezier(.2,.8,.3,1),top .24s cubic-bezier(.2,.8,.3,1),opacity .15s ease-out}
#chartbox .ch-tip .th{font-weight:600;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chartbox .ch-tip .th .tp{font-weight:400;color:#c7cad0}
#chartbox .ch-tip .ta{color:#f2b766;margin:-2px 0 5px}
#chartbox .ch-tip .tbk{font-size:11px;line-height:15px;color:#a3a7ad;margin:-3px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* общее у линий (#131) */
#chartbox .ch-tip .tr{display:grid;grid-template-columns:10px minmax(0,1fr) auto;column-gap:8px;align-items:center;min-height:20px}
#chartbox .ch-tip .tr > i{width:10px;height:3px;border-radius:2px}
#chartbox .ch-tip .tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e6e7ea}
#chartbox .ch-tip .tv{font-weight:600;text-align:right;white-space:nowrap}
#chartbox .ch-tip .tv.nil{color:#8a8e95;font-weight:500}
#chartbox .ch-tip .tno{grid-column:2 / 4;font-size:11px;line-height:15px;color:#a3a7ad;margin:-2px 0 2px}
/* «неделя 15–21.06.2026: 50 434 · внесено по неделе…» / «включая внесенное по неделе»; неполная сумма — значок «?» таблицы (grid.css .gt .pq) и причина */
#chartbox .ch-tip .twe,#chartbox .ch-tip .tpq{grid-column:2 / 4;font-size:11px;line-height:15px;color:#a3a7ad;margin:-2px 0 2px}
#chartbox .ch-tip .tpq .pqi{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-right:5px;border-radius:50%;
  background:#d9730d;color:#ffffff;font:700 9.5px/13px 'IBM Plex Sans',system-ui,sans-serif;vertical-align:-2px}
#chartbox .ch-tip .tr.dim{opacity:.45}

/* ── сравнение периодов (README разд. 10; 56g, 57j–57n): кнопка справа в строке названия, образец периодов, янтарная пометка ── */
#chartbox .ch-cmpb{flex-shrink:0;max-width:300px}
#chartbox .ch-cmpb > svg{flex-shrink:0;color:#6f737a}
#chartbox .ch-cmpb .k{color:#6f737a}
#chartbox .ch-cmpb .cv{overflow:hidden;text-overflow:ellipsis}
#chartbox .ch-cmpb.on{background:#ebebe6}
#chartbox .ch-cmpb.flt{background:#eaf0fb;border-color:#c9d6f0;color:#173c8c}
#chartbox .ch-cmpb.flt:hover,#chartbox .ch-cmpb.flt.on{background:#e0e9f8;border-color:#b9c9ec}
#chartbox .ch-cmpb.flt .k,#chartbox .ch-cmpb.flt > svg:first-child{color:#4a6bb0}
/* образец периодов — столбиком (две строки по 15 px в строке 48 px): в одну строку на 1366 не помещается вместе с кнопками; от 1680 px — в строку,
   как в макете; без пустого хвоста (перенос flex-wrap оставлял за собой ширину одной строки) */
#chartbox .ch-cl{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;font-size:12px;line-height:15px;color:#5a5e65;min-width:0;flex:0 1 auto}
#chartbox .ch-cl .ckk{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#chartbox .ch-cl .ckk i{display:block;width:18px;height:0;border-top:2px solid #6f737a}
#chartbox .ch-cl .ckk i.d{border-top:1.5px dashed #6f737a}
#chartbox .ch-cl .cnone{display:inline-flex;align-items:flex-start;gap:5px;color:#8a4b0a;max-width:300px;min-width:0}
#chartbox .ch-cl .cnone > span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#chartbox .ch-cl .cnone svg{flex-shrink:0;margin-top:0.5px}
@media (min-width:1680px){
  #chartbox .ch-cl{flex-direction:row;align-items:center;gap:12px}
  #chartbox .ch-cl .cnone{max-width:330px;align-items:center}
}
/* окно уже 1520 px: у включенного сравнения слово «Сравнение:» скрыто — значок, режим и подкраска остаются (полный текст — aria-label, data-tip) */
@media (max-width:1519px){ #chartbox .ch-cmpb.flt .k{display:none} }
#chartbox .ch-cl .cld{display:inline-flex;align-items:center;gap:5px;color:#6f737a;white-space:nowrap}
#chartbox .ch-cl .cld svg{animation:chSpin 1s linear infinite}
/* пунктир прошлого периода — та же линия того же цвета, 5 4, 1,5 px; ступенька «по неделе» прошлого — тоже пунктиром */
#chartbox .ch-svg .lnp{fill:none;stroke-width:1.5;stroke-dasharray:5 4;stroke-linejoin:round;transition:opacity .14s}
#chartbox .ch-svg .ch-st.cmp{stroke-dasharray:5 4}
#chartbox .ch-svg .cpp{transition:opacity .14s}
/* ось в две строки: под подписью серым дата прошлого периода, «нет» — пары нет */
#chartbox .xax.two{height:44px}
#chartbox .xt.c2{display:flex;flex-direction:column;align-items:center}
#chartbox .xt.c2.ms{align-items:flex-start}
#chartbox .xt.c2 b{font-weight:400}
#chartbox .xt.c2 em{font-style:normal;color:#a3a7ad}
#chartbox .xt.c2.we{color:#6f737a}
#chartbox .xt.c2.we b{color:#b4473f}
/* разница итогов в легенде — серым, без зеленого / красного */
#chartbox .li .dif{font-style:normal;font-size:11.5px;color:#6f737a;white-space:nowrap}
#chartbox .li .dif.na{color:#8a8e95}
/* точка прошлого периода при наведении — пустой кружок 7 px с кольцом цвета линии (кольцо — box-shadow из chart.js) */
#chartbox .hdp{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#ffffff;pointer-events:none;opacity:0;
  transition:opacity .15s ease-out;z-index:2}
#chartbox .plot.hov .hdp.has:not(.nil){opacity:1}
#chartbox .plot.mv .hdp{transition:left .2s cubic-bezier(.2,.8,.3,1),top .2s cubic-bezier(.2,.8,.3,1),opacity .15s ease-out}
/* подсказка со сравнением — 480 px, три столбца «18.09 | 19.08 | Разница» (64 / 64 / 72, как в макете) */
#chartbox .ch-tip.tc{width:480px}
#chartbox .ch-tip.tc .tr,#chartbox .ch-tip .trh{grid-template-columns:10px minmax(0,1fr) 64px 64px 72px}
#chartbox .ch-tip .trh{display:grid;column-gap:8px;font-size:11px;line-height:15px;color:#9aa0a8;padding-bottom:3px;margin-bottom:3px;border-bottom:1px solid #3a3d43}
#chartbox .ch-tip .trh span{text-align:right;white-space:nowrap;overflow:hidden}
#chartbox .ch-tip .tpv{text-align:right;white-space:nowrap;color:#c7cad0}
#chartbox .ch-tip .tdf{text-align:right;white-space:nowrap;color:#9aa0a8}
#chartbox .ch-tip.tc .tno,#chartbox .ch-tip.tc .twe,#chartbox .ch-tip.tc .tpq{grid-column:2 / 6}

/* ── меню показателей (README разд. 8): каркас «Столбцов» (#colmenu), 440 px, вне #content, position:fixed по кнопке ── */
#chartmenu{position:fixed;left:16px;top:120px;width:440px;max-width:calc(100vw - 16px);max-height:520px;background:#ffffff;border:1px solid #d9d9d3;border-radius:8px;
  box-shadow:0 10px 30px rgba(20,20,19,.16);display:flex;flex-direction:column;z-index:45;overflow:hidden;color:#1c1e22;font-size:13px;line-height:1.35;
  animation:chmIn .16s cubic-bezier(.2,.8,.3,1) both}
#chartmenu[hidden]{display:none}
#chartmenu.ch-up{animation-name:chmInUp}
#chartmenu.closing{animation:chmOut .12s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes chmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes chmInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes chmOut{from{opacity:1}to{opacity:0}}
#chartmenu [hidden]{display:none !important}
:where(#chartmenu) button{font:inherit;color:inherit}
:where(#chartmenu) button:focus-visible{outline:2px solid #1f4fb8;outline-offset:1px}
#chartmenu .tools{padding:12px 16px 8px;border-bottom:1px solid #ebebe6}
/* вкладки «Показатели N | Товары M» — только у рядов с сервера (юнитка, «Товары»; README разд. 8, 59b, 59d): сегмент, как .gseg блока */
#chartmenu .ch-tabs{display:flex;padding:2px;margin-bottom:8px;background:#ebebe6;border-radius:7px}
#chartmenu .ch-tabs button{flex:1 1 0;min-width:0;height:28px;border:0;background:transparent;border-radius:5px;font-size:13px;font-weight:500;color:#4a4e55;cursor:pointer;
  padding:0 8px;white-space:nowrap;transition:color .14s,background-color .14s}
#chartmenu .ch-tabs button:not(.on):hover{color:#1c1e22}
#chartmenu .ch-tabs button.on{background:#ffffff;color:#1c1e22;box-shadow:0 1px 2px rgba(0,0,0,.14);cursor:default}
#chartmenu .ch-tabs button i{font-style:normal;color:#8a8e95;margin-left:2px;font-variant-numeric:tabular-nums}
#chartmenu .ch-tabs button:focus-visible{outline:2px solid #1f4fb8;outline-offset:-2px}
#chartmenu .cr.tot .t{font-weight:600}   /* «Итого по всем товарам» / «Итого по выбранным» — жирным, как строка «Итого» таблицы (59b) */
#chartmenu .srch{position:relative;display:flex;align-items:center}
#chartmenu .srch > svg{position:absolute;left:9px;color:#8a8e95;pointer-events:none}
#chartmenu .srch input{width:100%;height:32px;border:1px solid #d6d6d0;border-radius:6px;padding:0 30px 0 32px;font:inherit;font-size:13px;color:#1c1e22;
  background:#ffffff;outline:none;box-sizing:border-box;transition:border-color .14s,box-shadow .14s}
#chartmenu .srch input::placeholder{color:#9a9ea5}
#chartmenu .srch input:focus{border-color:#1f4fb8;box-shadow:0 0 0 2px rgba(31,79,184,.15)}
#chartmenu .srch .clr{position:absolute;right:4px;width:24px;height:24px;border:0;background:transparent;border-radius:4px;display:flex;align-items:center;
  justify-content:center;color:#8a8e95;cursor:pointer;padding:0}
#chartmenu .srch .clr:hover{background:#f0f0ec;color:#1c1e22}
#chartmenu .list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 8px 8px;overscroll-behavior:contain}
#chartmenu .sec{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 8px 4px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:#8a8e95}
#chartmenu .lnk{border:0;background:transparent;padding:0;color:#1f4fb8;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap;letter-spacing:0;
  text-transform:none;transition:color .14s}
#chartmenu .lnk:hover{color:#163a88;text-decoration:underline;text-underline-offset:2px}
#chartmenu .bk{margin-top:4px;outline:none}
#chartmenu .gb{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s ease}
#chartmenu .gb.closed{grid-template-rows:0fr}
#chartmenu .gbi{overflow:clip;min-height:0}
#chartmenu .gb.closed .gbi{visibility:hidden;transition:visibility 0s .24s}
#chartmenu .bkh{display:flex;align-items:flex-start;gap:6px;padding:5px 8px 5px 4px;border-radius:6px;cursor:pointer;user-select:none;transition:filter .14s}
#chartmenu .bkh:hover{filter:brightness(.98)}
#chartmenu .bkh .tg{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#6f737a;flex-shrink:0}
#chartmenu .bkh .tg svg{transition:transform .16s cubic-bezier(.2,.8,.3,1)}
#chartmenu .bkh.open .tg svg{transform:rotate(90deg)}
#chartmenu .bkh .nm{flex-grow:1;min-width:0;font-size:13px;font-weight:600;line-height:18px;padding-top:1px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;word-break:break-word}
#chartmenu .bkh .nm.noname{color:#8a8e95;font-weight:500}
#chartmenu .bkh .n{flex-shrink:0;font-size:11.5px;color:#6f737a;font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap}
#chartmenu .bkh .n.part{color:#173c8c;font-weight:500}
#chartmenu .cr{display:flex;align-items:center;gap:8px;min-height:28px;padding:4px 8px 4px 32px;border-radius:5px;cursor:pointer;user-select:none;font-size:13px;
  line-height:17px;transition:background-color .14s;outline:none}
#chartmenu .cr.sel{padding-left:8px}
#chartmenu .cr:hover{background:#f2f2ee}
#chartmenu .cr .t{flex-grow:1;min-width:0;word-break:break-word}
#chartmenu .cr .why{flex-shrink:0;font-size:11px;color:#a3a7ad;white-space:nowrap}
#chartmenu .cr .u{flex-shrink:0;font-size:11px;color:#a3a7ad;white-space:nowrap}
#chartmenu .cr .ch-sw{flex-shrink:0;width:14px;height:3px;border-radius:2px;display:block}
#chartmenu .cr .ch-sw.no{background:transparent}
#chartmenu .cr.dis{cursor:default}
#chartmenu .cr.dis:hover{background:transparent}
#chartmenu .cr.dis .t{color:#a3a7ad}
#chartmenu .cr.dis .u.bad{color:#b4473f}
#chartmenu .cr.gone .t{text-decoration:line-through;color:#8a8e95}
#chartmenu .cr.gone .why{color:#b4473f}
#chartmenu .bk:focus-visible > .bkh,#chartmenu .cr:focus-visible{box-shadow:inset 0 0 0 2px #1f4fb8}
#chartmenu mark{background:#ffe38a;color:inherit;border-radius:2px;padding:0 1px}
/* флажок — как в меню «Каналы» / «Столбцы» (разметка CHAN_CB, channels.js) */
#chartmenu .cb{position:relative;width:16px;height:16px;border-radius:4px;border:1.5px solid #b3b6bc;background:#ffffff;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;color:#ffffff;box-sizing:border-box;transition:background-color .1s,border-color .1s}
#chartmenu .cb svg{position:absolute;opacity:0}
#chartmenu .cb.on{background:#1f4fb8;border-color:#1f4fb8}
#chartmenu .cb.on svg.ck{opacity:1}
#chartmenu .cr.dis .cb{background:#f3f3ef;border-color:#dcdcd6}
#chartmenu .empty{padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#5a5e65;font-size:12.5px;line-height:1.45}
#chartmenu .empty > svg{color:#b3b6bc}
#chartmenu .empty b{color:#1c1e22;font-size:13px;font-weight:600;word-break:break-word}
#chartmenu .cm-f{border-top:1px solid #ebebe6;background:#fafaf8;padding:10px 12px 12px 16px;display:flex;align-items:center;gap:8px;flex-shrink:0}
#chartmenu .cm-f .hint{flex-grow:1;font-size:12px;color:#5a5e65}
#chartmenu .btn.sm{height:28px;padding:0 10px;font-size:12.5px}
#chartmenu .btn.primary{align-self:auto;font-weight:500;padding:0 12px;color:#ffffff}
#chartmenu .btn[disabled]{opacity:.5;cursor:default}

/* ── меню «Сравнение» (README разд. 10, 57k): 340 px, вне #content, position:fixed по кнопке правым краем ── */
#chartcmpmenu{position:fixed;left:16px;top:120px;width:340px;max-width:calc(100vw - 16px);box-sizing:border-box;padding:4px;background:#ffffff;border:1px solid #d9d9d3;
  border-radius:8px;box-shadow:0 10px 30px rgba(20,20,19,.16);z-index:45;color:#1c1e22;font-size:13px;line-height:1.35;animation:chmIn .16s cubic-bezier(.2,.8,.3,1) both}
#chartcmpmenu[hidden]{display:none}
#chartcmpmenu.ch-up{animation-name:chmInUp}
#chartcmpmenu.closing{animation:chmOut .12s cubic-bezier(.4,0,1,1) both;pointer-events:none}
#chartcmpmenu .cmh{padding:8px 8px 4px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a8e95}
#chartcmpmenu .ci{display:flex;align-items:flex-start;gap:8px;width:100%;border:0;background:transparent;text-align:left;padding:7px 8px;border-radius:5px;cursor:pointer;
  font:inherit;color:inherit;transition:background-color .14s}
#chartcmpmenu .ci:hover,#chartcmpmenu .ci:focus-visible{background:#f2f2ee}
#chartcmpmenu .ci:focus-visible{outline:2px solid #1f4fb8;outline-offset:-2px}
#chartcmpmenu .ck2{width:16px;height:18px;display:flex;align-items:center;justify-content:center;color:#1f4fb8;flex-shrink:0}
#chartcmpmenu .ck2 svg{opacity:0}
#chartcmpmenu .ci.on .ck2 svg{opacity:1}
#chartcmpmenu .ct{display:flex;flex-direction:column;gap:1px;min-width:0}
#chartcmpmenu .ct b{font-weight:500;font-size:13px;line-height:18px}
#chartcmpmenu .ci.on .ct b{color:#173c8c}
#chartcmpmenu .ct span{font-size:11.5px;color:#7a7e85;line-height:16px}
#chartcmpmenu .ci.dis{cursor:default}
#chartcmpmenu .ci.dis:hover{background:transparent}
#chartcmpmenu .ci.dis .ct b{color:#a3a7ad}
#chartcmpmenu .cnote{margin:4px 4px 2px;padding:8px 8px 6px;border-top:1px solid #ebebe6;font-size:11.5px;line-height:16px;color:#7a7e85}

@media (prefers-reduced-motion: reduce){
  #chartbox *,#chartbox .plot.mv .cross,#chartbox .plot.mv .hd,#chartbox .plot.mv .hdp,#chartbox .plot.mv .ch-tip{transition:none !important;animation:none !important}
  #chartmenu,#chartmenu *,#chartcmpmenu,#chartcmpmenu *{transition:none !important;animation:none !important}
}