/* Графики (ТЗ, 8.6). Префикс ch-. Компоненты — js/core/charts.js. */

.ch { position: relative; font-family: var(--font); color: var(--gray-900); }
.ch-svg { display: block; overflow: visible; }
.ch-svg text { font-family: var(--font); font-variant-numeric: tabular-nums; }

/* ——— Оси и подписи ——— */
.ch-tick { font-size: 12px; fill: var(--gray-600); }
.ch-tick--date { font-size: 11px; fill: var(--gray-400); }
.ch-tick--cat { font-size: 13px; fill: var(--gray-900); }
.ch-axis-title { font-size: 12px; fill: var(--gray-600); }
.ch-caption { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--gray-600); }

/* ——— Легенда ——— */
.ch-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--gray-600); }
.ch-legend__title { font-weight: 600; color: var(--gray-900); }
.ch-legend__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ch-legend__item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ——— Подсказка: белая карточка, тень 2, радиус 8, появление 150 мс ——— */
.ch-tip {
  position: absolute; z-index: 40; pointer-events: none;
  padding: 8px 12px; border-radius: 8px; background: var(--white); box-shadow: var(--sh-2);
  font-size: 13px; line-height: 1.4; color: var(--gray-900); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: translate(-50%, -100%); transition: opacity 150ms var(--ease-in);
}
.ch-tip.is-on { opacity: 1; }
.ch-tip[data-align="start"] { transform: translate(-16px, -100%); }
.ch-tip[data-align="end"] { transform: translate(calc(-100% + 16px), -100%); }
.ch-tip[data-place="below"] { transform: translate(-50%, 12px); }
.ch-tip--card { width: 280px; min-height: 120px; padding: 14px 16px; white-space: normal; font-size: 13px; }

/* ——— Траектория ——— */
.ch-traj__layer { position: absolute; inset: 0; }
.ch-goal__label { font-size: 12px; font-weight: 600; fill: var(--success-700); }
.ch-start__label { font-size: 13px; font-weight: 600; fill: var(--navy-900); }
.ch-pt.is-click, .ch-flag.is-click { cursor: pointer; }
.ch-callout { position: absolute; width: 0; height: 0; pointer-events: none; }
.ch-callout__box {
  position: absolute; right: -8px; bottom: 14px;
  padding: 6px 10px; border-radius: 8px; background: var(--white); box-shadow: var(--sh-2);
  border-left: 3px solid var(--teal-700);
  font-size: 13px; font-weight: 600; color: var(--teal-700); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ch-callout.is-below .ch-callout__box { bottom: auto; top: 14px; }

.ch-flag { position: absolute; width: 0; height: 0; z-index: 5; }
.ch-flag__fly { position: absolute; left: 0; bottom: 10px; transform-origin: 0 100%; }
.ch-flag__body {
  position: relative; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: 6px; background: var(--danger-700); color: var(--white);
  font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--sh-1);
}
.ch-flag__body::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px;
  border: 5px solid transparent; border-bottom: 0; border-top-color: var(--danger-700);
}
.ch-flag.is-resolved .ch-flag__body { background: var(--gray-400); }
.ch-flag.is-resolved .ch-flag__body::after { border-top-color: var(--gray-400); }

/* ——— Индикатор шкалы ——— */
.ch-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ch-gauge__value { font-size: 32px; font-weight: 700; fill: var(--navy-900); }
.ch-gauge__range { font-size: 12px; fill: var(--gray-600); }
.ch-gauge__label { margin-top: 4px; font-size: 13px; color: var(--gray-900); }
.ch-gauge__note { margin-top: 2px; font-size: 11px; color: var(--gray-600); }

/* ——— Парные полосы ——— */
.ch-bars { display: flex; flex-direction: column; gap: 6px; }
.ch-bars > .ch-legend { margin-bottom: 6px; }
.ch-bars__row { display: grid; align-items: center; column-gap: 12px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; }
.ch-bars__row.is-hl { background: var(--teal-100); }
.ch-bars__label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.3; color: var(--gray-900); }
.ch-bars__note { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--white); color: var(--teal-700); font-size: 11px; font-weight: 600; }
.ch-bars__track { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.ch-bars__bar { border-radius: 0 4px 4px 0; transform-origin: 0 50%; min-width: 0; }
.ch-bars__tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--navy-900); }
.ch-bars__val { display: flex; align-items: baseline; gap: 6px; font-size: 13px; white-space: nowrap; }
.ch-bars__val b { font-weight: 700; color: var(--navy-900); }
.ch-bars__before { color: var(--gray-600); font-size: 12px; }
.ch-bars__arrow { color: var(--teal-700); font-size: 12px; }

/* ——— Кольцо ——— */
.ch-donut { display: inline-flex; align-items: center; gap: 20px; }
.ch-donut__ring { position: relative; flex: none; }
.ch-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.ch-donut__big { font-weight: 700; color: var(--navy-900); line-height: 1.1; }
.ch-donut__sub { margin-top: 2px; font-size: 12px; color: var(--gray-600); }
.ch-donut__sub:empty { display: none; }
.ch-donut__legend { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.ch-donut__li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }
.ch-donut__li i { width: 10px; height: 10px; border-radius: 3px; }
.ch-donut__li-label { color: var(--gray-900); }
.ch-donut__li b { font-weight: 600; color: var(--gray-600); }

/* ——— Торнадо ——— */
.ch-torn__rows { position: relative; }
.ch-torn__axis { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gray-300); }
.ch-torn__row { display: grid; align-items: center; }
.ch-torn__label { padding-right: 12px; font-size: 13px; line-height: 1.3; color: var(--gray-900); }
.ch-torn__area { position: relative; align-self: stretch; }
.ch-torn__bar { position: absolute; border-radius: 3px; }
.ch-torn__bar.is-pos { transform-origin: 0 50%; border-radius: 0 3px 3px 0; }
.ch-torn__bar.is-neg { transform-origin: 100% 50%; border-radius: 3px 0 0 3px; }
.ch-torn__val { position: absolute; top: 50%; margin-top: -9px; line-height: 18px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ch-torn__val.is-pos { color: var(--teal-700); }
.ch-torn__val.is-neg { color: #A35D16; }

/* ——— Столбцы ——— */
.ch-col__val { font-size: 13px; font-weight: 600; fill: var(--navy-900); paint-order: stroke; stroke: var(--white); stroke-width: 3px; stroke-linejoin: round; }
.ch-threshold__label { font-size: 12px; font-weight: 600; }

/* ——— Гекс-карта ——— */
.ch-hex { display: inline-flex; flex-direction: column; gap: 12px; }
.ch-hex__map { position: relative; }
.ch-hex__cell.is-region { cursor: pointer; }
.ch-hex__outline { opacity: 0; transition: opacity 150ms var(--ease-in); pointer-events: none; }
.ch-hex__cell.is-region:hover .ch-hex__outline { opacity: 0.5; }
.ch-hex__cell.is-selected .ch-hex__outline { opacity: 1; }
.ch-hex__abbr { font-size: 10px; font-weight: 600; pointer-events: none; letter-spacing: 0.02em; }
.ch-hex__over { pointer-events: none; }
.ch-hex__note {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); max-width: 360px;
  padding: 10px 14px; border-radius: 8px; background: var(--white); box-shadow: var(--sh-2);
  font-size: 13px; line-height: 1.4; color: var(--gray-900); text-align: center; pointer-events: none;
}
.ch-hex__legend { padding-left: 4px; }

/* ——— Сканирование, спарклайн ——— */
.ch-scan, .ch-spark { flex: none; }