/* Графики по месяцам (plans/dashboards разделы 3 и 12; ChartsHelper):
   колонки-ссылки, линия SVG, подсказка, bullet на <progress>; статус
   светофора и компоненты дашбордов по ролям (06-improvement-plan §4 Д1).
   Цвет — по смыслу: выбранный месяц — акцент, остальные — графит
   (--chart-column, 3,4 : 1 к белому), бюджет — тёмная черта на уровне
   бюджета шире колонки (--chart-plan), идущий месяц — штриховка, прогноз —
   светлая штриховка (IBCS), минус — мягкая красная заливка с краем тона
   (Л3 08.11.2026: графики легче, одна система с лендингом; доводка 1:
   бюджет — чертой, а не коробкой, колонка — от 3 : 1). Высоты — классы шага 1 %, ноль — шага 5 %: без
   инлайн-стилей (CSP). */
.col-chart {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2-5);
  margin-top: var(--space-2);
}

.col-chart__axis {
  position: relative;
  min-width: 44px;
  height: 132px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Подписи оси — на своих линиях: верх, ноль (у графика с минусом — по
   классу шага 5 %), низ */
.col-chart__tick {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.col-chart__tick--top {
  top: 0;
}

.col-chart__tick--bottom {
  top: 100%;
}

.col-chart--signed .col-chart__plot {
  background: linear-gradient(var(--border-soft), var(--border-soft)) 0 0 / 100% 1px no-repeat;
}

.col-chart--signed .col-chart__plot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--text-faint);
  pointer-events: none;
}

.col-chart__plot {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-1-5);
  height: 132px;
  border-bottom: 1px solid var(--border-panel);
  background: linear-gradient(var(--border-soft), var(--border-soft)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--border-soft), var(--border-soft)) 0 50% / 100% 1px no-repeat;
}

.col-chart__col {
  position: relative;
  display: grid;
  min-width: 0;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  outline-offset: 2px;
}

.col-chart__col:hover,
.col-chart__col:focus-visible {
  background: var(--surface-subtle);
}

.col-chart__col--selected {
  background: var(--accent-bg);
}

.col-chart__pos,
.col-chart__neg {
  position: relative;
  display: block;
}

.col-chart__bar {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--chart-column);
}

.col-chart__bar--base {
  background: var(--neutral-border);
}

.col-chart__col--selected .col-chart__bar:not(.col-chart__bar--base) {
  background: var(--accent);
}

.col-chart__bar--neg {
  top: 0;
  bottom: auto;
  border-radius: 0 0 4px 4px;
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px var(--danger-edge);
}

.col-chart__col--current .col-chart__bar:not(.col-chart__bar--base) {
  background: repeating-linear-gradient(135deg, var(--accent) 0 3px, var(--accent-border) 3px 6px);
}

.col-chart__col--forecast .col-chart__bar:not(.col-chart__bar--base) {
  background: repeating-linear-gradient(135deg, var(--text-faint) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 0 0 1px var(--text-faint);
}

/* Минус остаётся красным и у выбранного, и у идущего месяца: выбранный — край толще */
.col-chart__col--selected .col-chart__bar.col-chart__bar--neg {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 2px var(--danger-edge);
}

.col-chart__col--current .col-chart__bar.col-chart__bar--neg {
  background: repeating-linear-gradient(135deg, var(--danger) 0 3px, var(--danger-border) 3px 6px);
}

.col-chart__months {
  grid-column: 2;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--space-1-5);
  margin-top: var(--space-1-5);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.col-chart__month--selected {
  color: var(--text);
  font-weight: 600;
}

/* Линия: SVG растянут на всю область, колонки-ссылки — прозрачным слоем;
   подписи оси — верх, середина, низ */
.col-chart--line .col-chart__axis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
}

.col-chart--line .col-chart__axis span:nth-child(1) {
  top: 0;
}

.col-chart--line .col-chart__axis span:nth-child(2) {
  top: 50%;
}

.col-chart--line .col-chart__axis span:nth-child(3) {
  top: 100%;
}
.col-chart__plot--line {
  border-bottom: none;
  background: none;
}

.col-chart__svg {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.col-chart__grid {
  stroke: var(--border-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.col-chart__line {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Полоса нормы у линии (chart_line norm:): от нижней границы нормы до верха
   шкалы — серая подложка и черта границы (02-roles §6 «полоса нормы 90 %») */
.col-chart__norm {
  fill: var(--neutral-bg);
  fill-opacity: 0.6;
}

.col-chart__norm-line {
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

/* Остаток по дням (chart_days_line): «ожидается» — пунктиром, черта
   «сегодня» — акцентом, ноль — красной чертой, если линия уходит в минус;
   подписи дней — неделями */
.col-chart__line--forecast {
  stroke: var(--text-muted);
  stroke-dasharray: 5 4;
}

.col-chart__today {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

.col-chart__zero-line {
  stroke: var(--danger);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.col-chart--days .col-chart__plot,
.col-chart--days .col-chart__months {
  gap: 0;
}

.col-chart__day--hidden {
  visibility: hidden;
}

.col-chart__col--overlay {
  z-index: 1;
}

.col-chart__col--overlay.col-chart__col--selected {
  background: var(--accent-bg);
}

/* Подсказка */
.chart-tip {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius);
  background: var(--brand-dark);
  color: #fff;
  font-size: var(--font-size-hint);
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
}

/* Bullet: факт против начисленного на <progress>, подпись рядом */
.bullet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.bullet__bar {
  flex: 1 1 120px;
  min-width: 120px;
  height: 8px;
  appearance: none;
  border: none;
  border-radius: 4px;
  background: var(--neutral-bg);
  overflow: hidden;
}

.bullet__bar::-webkit-progress-bar {
  background: var(--neutral-bg);
}

.bullet__bar::-webkit-progress-value {
  background: var(--text);
  border-radius: 4px;
}

.bullet__bar::-moz-progress-bar {
  background: var(--text);
  border-radius: 4px;
}

.bullet__label {
  min-width: 0;
  font-size: var(--font-size-hint);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Заливка — тоном статуса (Metrics::Status::LEVEL_TONES), слово и иконка —
 * рядом (ui_status): цвет не один */
.bullet--tone-success .bullet__bar::-webkit-progress-value { background: var(--success); }
.bullet--tone-success .bullet__bar::-moz-progress-bar { background: var(--success); }
.bullet--tone-warning .bullet__bar::-webkit-progress-value { background: var(--warning); }
.bullet--tone-warning .bullet__bar::-moz-progress-bar { background: var(--warning); }
.bullet--tone-danger .bullet__bar::-webkit-progress-value { background: var(--danger); }
.bullet--tone-danger .bullet__bar::-moz-progress-bar { background: var(--danger); }
.bullet--tone-neutral .bullet__bar::-webkit-progress-value { background: var(--text-muted); }
.bullet--tone-neutral .bullet__bar::-moz-progress-bar { background: var(--text-muted); }

/* Бюджет месяца — тёмная черта 2 px на уровне бюджета, шире колонки (IBCS:
   факт сплошной, план — отметка). Высота класса h-N — до уровня бюджета,
   видна только верхняя грань: факт около бюджета не превращается в колонку
   в рамке (Л3, доводка 1) */
.col-chart__plan {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  border-top: 2px solid var(--chart-plan);
  pointer-events: none;
}

.col-chart__neg .col-chart__plan {
  top: 0;
  bottom: auto;
  border-top: 0;
  border-bottom: 2px solid var(--chart-plan);
}

/* ============================================================
 * Статус светофора (ui_status, Metrics::Status): иконка и слово, цвет —
 * никогда не один (С-5, WCAG 1.4.1). Цвет — только по тону (--tone-*,
 * Metrics::Status::LEVEL_TONES) у бейджа, знаковых баров, точек и зон
 * bullet; класс уровня (status--normal…) цвета не несёт: ответ «в норме
 * без цвета» — одна константа, не правка CSS. Здесь, а не в ui.css:
 * лендинг подключает charts.css без стилей CRM. Контраст текста — токены
 * --success 5,4 : 1, --warning 5,2 : 1, --danger 6,0 : 1, --text-muted
 * 6,0 : 1 на белом
 * ============================================================ */
.status {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  /* слово — текстом и в моноширинной ячейке суммы */
  font-family: var(--font-sans);
  font-size: var(--font-size-hint);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Иконка — по центру строки, слово — на базовой линии: в строке «число ·
   статус» слово стоит на одной линии с числом (Л3, доводка 1: было на 2–3 px
   выше) */
.status__icon {
  flex: none;
  align-self: center;
}

.status--tone-success { color: var(--success); }
.status--tone-warning { color: var(--warning); }
.status--tone-danger { color: var(--danger); }
.status--tone-neutral { color: var(--text-muted); }

/* ============================================================
 * Компоненты дашбордов по ролям (ChartsHelper: chart_bullet,
 * chart_variance_bars, chart_chain, chart_bridge, chart_dots). Геометрия —
 * атрибуты SVG на шкале 0–1000, растянутой по ширине; линии и точки — без
 * растяжения толщины. Строка: подпись, число и статус сверху, график под
 * ними — так же на телефоне
 * ============================================================ */
.chart-bullets,
.chart-bars,
.chart-bridge,
.chart-dots,
.chart-chain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-bullets,
.chart-bars,
.chart-bridge,
.chart-dots {
  display: grid;
  gap: var(--space-2);
}

.chart-link {
  display: block;
  margin: calc(-1 * var(--space-1));
  padding: var(--space-1);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  outline-offset: 2px;
}

.chart-link:hover,
.chart-link:focus-visible {
  background: var(--surface-subtle);
}

.chart-bullet,
.chart-bars__row,
.chart-bridge__row,
.chart-dots__row {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.chart-bullet__head,
.chart-bars__head,
.chart-bridge__head,
.chart-dots__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.chart-bullet__label,
.chart-bars__label,
.chart-bridge__label,
.chart-dots__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-hint);
  color: var(--text-secondary);
}

.chart-bullet__value,
.chart-bars__value,
.chart-bridge__value,
.chart-dots__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-hint);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.chart-bullet__note,
.chart-bars__note,
.chart-bridge__note,
.chart-dots__note {
  font-size: var(--font-size-hint);
  color: var(--text-muted);
}

.chart-bullet__svg,
.chart-bars__svg,
.chart-bridge__svg,
.chart-dots__svg {
  display: block;
  width: 100%;
  height: 20px;
  overflow: visible;
}

/* Тонкие полосы (Л3): bullet и знаковые бары — 14 px по высоте строки (факт bullet — 40 % высоты, бар — 70 %),
   мост — 16 px. Геометрия — та же шкала SVG 0–1000 × 0–20, растянутая по ширине */
.chart-bullet__svg,
.chart-bars__svg {
  height: 14px;
}

.chart-bridge__svg {
  height: 16px;
}

.chart-bars__svg--none {
  height: 0;
}

/* Bullet: зоны — мягкие подложки тона статуса (без зон — серая дорожка;
   зона «против нас» обычно самая широкая — самая бледная), факт — тонкая
   полоса графитом, цель — тёмная черта во всю высоту, «где надо быть
   сегодня» — черта акцента (Л3: было — чёрная полоса и яркие зоны).
   Без зон (деньги против бюджета) факт красит тон статуса строки — как у
   знаковых баров (Р-674, план-факт светофором, слово рядом): мягкая заливка
   и край тона от 3 : 1, «месяц идёт» и «срок не наступил» — светлый графит;
   с зонами или без статуса — графит (слияние лендинга Л3 и dash, 08.11.2026).
   Факт без зон лежит на дорожке --neutral-bg, а не на белом: край тона и
   светлый графит — от 3 : 1 к ней (тест design_tokens_contrast_test) */
.chart-bullet__zone--tone-danger { fill: var(--danger-bg); }
.chart-bullet__zone--tone-warning { fill: var(--warning-soft); }
.chart-bullet__zone--tone-success { fill: var(--success-soft); }
.chart-bullet__zone--tone-neutral,
.chart-bullet__zone--track { fill: var(--neutral-bg); }

.chart-bullet__bar {
  fill: var(--chart-fact);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.chart-bullet__bar--tone-neutral { fill: var(--chart-column); stroke: none; }
.chart-bullet__bar--tone-danger { fill: var(--danger-soft); stroke: var(--danger-edge); }
.chart-bullet__bar--tone-warning { fill: var(--warning-soft); stroke: var(--warning-edge); }
.chart-bullet__bar--tone-success { fill: var(--success-soft); stroke: var(--success-edge); }

.chart-bullet__target,
.chart-bullet__today,
.chart-bars__zero,
.chart-bridge__zero,
.chart-dots__track,
.chart-dots__target,
.chart-dots__dot {
  vector-effect: non-scaling-stroke;
}

.chart-bullet__target {
  stroke: var(--chart-plan);
  stroke-width: 2px;
}

.chart-bullet__today {
  stroke: var(--accent);
  stroke-width: 2px;
}

/* Знаковые бары — тон статуса, как у бейджа рядом: мягкая заливка и край
   тона от 3 : 1 (Л3: было — насыщенная заливка во всю высоту): красный —
   против нас, янтарный — внимание, зелёный — «в норме» и в нашу пользу
   (пока LEVEL_TONES красит «в норме» зелёным); без статуса — сплошной
   графит (величина, а не пустое поле; доводка 1) */
.chart-bars__bar {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.chart-bars__bar,
.chart-bars__bar--tone-neutral { fill: var(--chart-column); stroke: none; }
.chart-bars__bar--tone-danger { fill: var(--danger-soft); stroke: var(--danger-edge); }
.chart-bars__bar--tone-warning { fill: var(--warning-soft); stroke: var(--warning-edge); }
.chart-bars__bar--tone-success { fill: var(--success-soft); stroke: var(--success-edge); }

.chart-bars__zero,
.chart-bridge__zero {
  stroke: var(--text-muted);
  stroke-width: 1px;
}

/* Мост: итоги — графит от нуля, изменения — светлый графит между итогами */
.chart-bridge__bar--total { fill: var(--chart-fact); }
.chart-bridge__bar--delta { fill: var(--chart-column); }

.chart-bridge__row--total .chart-bridge__label {
  color: var(--text);
  font-weight: 600;
}

/* Точки на шкале: точка — нулевая линия с круглым концом (Chrome и WebKit
   рисуют круг), цвет — тон статуса */
.chart-dots__track {
  stroke: var(--border-panel);
  stroke-width: 2px;
}

.chart-dots__target {
  stroke: var(--chart-plan);
  stroke-width: 2px;
}

.chart-dots__dot {
  stroke: var(--text-faint);
  stroke-width: 10px;
  stroke-linecap: round;
}

.chart-dots__dot--tone-success { stroke: var(--success-edge); }
.chart-dots__dot--tone-warning { stroke: var(--warning-edge); }
.chart-dots__dot--tone-danger { stroke: var(--danger-edge); }
.chart-dots__dot--tone-neutral { stroke: var(--neutral-edge); }

/* Цепочка: узлы слева направо одной строкой, стрелка в зазоре перед узлом;
   ветка — под узлом, боковой узел — пунктиром (другая база). Переноса строк
   нет: колонок столько, сколько узлов (chart-chain--nN), а когда узлам
   (от 160 px и зазоры 24 px) тесно в контейнере, цепочка идёт сверху вниз
   целиком — стрелка не повисает у края второй строки. --chain-v: 0 —
   слева направо, 1 — сверху вниз */
.chart-chain-box {
  container: chart-chain / inline-size;
  width: 100%;
  min-width: 0;
}

.chart-chain {
  --chain-cols: 1;
  --chain-v: 0;
  display: grid;
  grid-template-columns: repeat(var(--chain-cols), minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3) var(--space-6);
}

.chart-chain--n2 { --chain-cols: 2; }
.chart-chain--n3 { --chain-cols: 3; }
.chart-chain--n4 { --chain-cols: 4; }
.chart-chain--n5 { --chain-cols: 5; }
.chart-chain--n6 { --chain-cols: 6; }
.chart-chain--n7 { --chain-cols: 7; }
.chart-chain--n8 { --chain-cols: 8; }

/* Порог: 160 × N + 24 × (N − 1) px — уже него узлы не помещаются */
@container chart-chain (max-width: 1447px) { .chart-chain--n8 { --chain-cols: 1; --chain-v: 1; } }
@container chart-chain (max-width: 1263px) { .chart-chain--n7 { --chain-cols: 1; --chain-v: 1; } }
@container chart-chain (max-width: 1079px) { .chart-chain--n6 { --chain-cols: 1; --chain-v: 1; } }
@container chart-chain (max-width: 895px) { .chart-chain--n5 { --chain-cols: 1; --chain-v: 1; } }
@container chart-chain (max-width: 711px) { .chart-chain--n4 { --chain-cols: 1; --chain-v: 1; } }
@container chart-chain (max-width: 527px) { .chart-chain--n3 { --chain-cols: 1; --chain-v: 1; } }
@container chart-chain (max-width: 343px) { .chart-chain--n2 { --chain-cols: 1; --chain-v: 1; } }

.chart-chain__step {
  position: relative;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* Стрелка: слева от узла вправо (--chain-v: 0) или над узлом вниз (1) */
.chart-chain__step + .chart-chain__step::before {
  content: "";
  position: absolute;
  top: calc(22px - var(--chain-v) * (22px + var(--space-2-5)));
  left: calc(-1 * var(--space-4) + var(--chain-v) * 2 * var(--space-4));
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--text-muted);
  border-right: 1.5px solid var(--text-muted);
  transform: rotate(calc(45deg + var(--chain-v) * 90deg));
}

.chart-chain__step--side::before {
  display: none;
}

/* Пояснение последним пунктом (after): не узел — без стрелки, во всю ширину */
.chart-chain__after {
  grid-column: 1 / -1;
  font-size: var(--font-size-hint);
  color: var(--text-muted);
}

.chart-chain__node {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2-5) var(--space-3);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius);
  background: var(--surface);
  min-width: 0;
}

.chart-chain__node.chart-link {
  margin: 0;
}

.chart-chain__node--branch {
  border-left: 3px solid var(--border-panel);
}

.chart-chain__node--side {
  border-style: dashed;
}

.chart-chain__title {
  font-size: var(--font-size-hint);
  color: var(--text-secondary);
}

.chart-chain__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.chart-chain__note {
  font-size: var(--font-size-hint);
  color: var(--text-muted);
}

/* Телефон — сверху вниз и без поддержки container queries */
@media (max-width: 767px) {
  .chart-chain[class*="chart-chain--n"] {
    --chain-cols: 1;
    --chain-v: 1;
  }
}

@media (max-width: 767px) {
  .col-chart__month:nth-child(even):not(.col-chart__month--selected) {
    visibility: hidden;
  }
}

@media print {
  .col-chart__bar {
    background: none;
    border: 1px solid var(--text);
  }
}

.col-chart--z0 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 0fr 100fr; }
.col-chart--z5 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 5fr 95fr; }
.col-chart--z10 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 10fr 90fr; }
.col-chart--z15 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 15fr 85fr; }
.col-chart--z20 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 20fr 80fr; }
.col-chart--z25 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 25fr 75fr; }
.col-chart--z30 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 30fr 70fr; }
.col-chart--z35 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 35fr 65fr; }
.col-chart--z40 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 40fr 60fr; }
.col-chart--z45 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 45fr 55fr; }
.col-chart--z50 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 50fr 50fr; }
.col-chart--z55 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 55fr 45fr; }
.col-chart--z60 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 60fr 40fr; }
.col-chart--z65 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 65fr 35fr; }
.col-chart--z70 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 70fr 30fr; }
.col-chart--z75 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 75fr 25fr; }
.col-chart--z80 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 80fr 20fr; }
.col-chart--z85 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 85fr 15fr; }
.col-chart--z90 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 90fr 10fr; }
.col-chart--z95 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 95fr 5fr; }
.col-chart--z100 .col-chart__col:not(.col-chart__col--overlay) { grid-template-rows: 100fr 0fr; }

.col-chart .h-0 { height: 0%; }
.col-chart .h-1 { height: 1%; }
.col-chart .h-2 { height: 2%; }
.col-chart .h-3 { height: 3%; }
.col-chart .h-4 { height: 4%; }
.col-chart .h-5 { height: 5%; }
.col-chart .h-6 { height: 6%; }
.col-chart .h-7 { height: 7%; }
.col-chart .h-8 { height: 8%; }
.col-chart .h-9 { height: 9%; }
.col-chart .h-10 { height: 10%; }
.col-chart .h-11 { height: 11%; }
.col-chart .h-12 { height: 12%; }
.col-chart .h-13 { height: 13%; }
.col-chart .h-14 { height: 14%; }
.col-chart .h-15 { height: 15%; }
.col-chart .h-16 { height: 16%; }
.col-chart .h-17 { height: 17%; }
.col-chart .h-18 { height: 18%; }
.col-chart .h-19 { height: 19%; }
.col-chart .h-20 { height: 20%; }
.col-chart .h-21 { height: 21%; }
.col-chart .h-22 { height: 22%; }
.col-chart .h-23 { height: 23%; }
.col-chart .h-24 { height: 24%; }
.col-chart .h-25 { height: 25%; }
.col-chart .h-26 { height: 26%; }
.col-chart .h-27 { height: 27%; }
.col-chart .h-28 { height: 28%; }
.col-chart .h-29 { height: 29%; }
.col-chart .h-30 { height: 30%; }
.col-chart .h-31 { height: 31%; }
.col-chart .h-32 { height: 32%; }
.col-chart .h-33 { height: 33%; }
.col-chart .h-34 { height: 34%; }
.col-chart .h-35 { height: 35%; }
.col-chart .h-36 { height: 36%; }
.col-chart .h-37 { height: 37%; }
.col-chart .h-38 { height: 38%; }
.col-chart .h-39 { height: 39%; }
.col-chart .h-40 { height: 40%; }
.col-chart .h-41 { height: 41%; }
.col-chart .h-42 { height: 42%; }
.col-chart .h-43 { height: 43%; }
.col-chart .h-44 { height: 44%; }
.col-chart .h-45 { height: 45%; }
.col-chart .h-46 { height: 46%; }
.col-chart .h-47 { height: 47%; }
.col-chart .h-48 { height: 48%; }
.col-chart .h-49 { height: 49%; }
.col-chart .h-50 { height: 50%; }
.col-chart .h-51 { height: 51%; }
.col-chart .h-52 { height: 52%; }
.col-chart .h-53 { height: 53%; }
.col-chart .h-54 { height: 54%; }
.col-chart .h-55 { height: 55%; }
.col-chart .h-56 { height: 56%; }
.col-chart .h-57 { height: 57%; }
.col-chart .h-58 { height: 58%; }
.col-chart .h-59 { height: 59%; }
.col-chart .h-60 { height: 60%; }
.col-chart .h-61 { height: 61%; }
.col-chart .h-62 { height: 62%; }
.col-chart .h-63 { height: 63%; }
.col-chart .h-64 { height: 64%; }
.col-chart .h-65 { height: 65%; }
.col-chart .h-66 { height: 66%; }
.col-chart .h-67 { height: 67%; }
.col-chart .h-68 { height: 68%; }
.col-chart .h-69 { height: 69%; }
.col-chart .h-70 { height: 70%; }
.col-chart .h-71 { height: 71%; }
.col-chart .h-72 { height: 72%; }
.col-chart .h-73 { height: 73%; }
.col-chart .h-74 { height: 74%; }
.col-chart .h-75 { height: 75%; }
.col-chart .h-76 { height: 76%; }
.col-chart .h-77 { height: 77%; }
.col-chart .h-78 { height: 78%; }
.col-chart .h-79 { height: 79%; }
.col-chart .h-80 { height: 80%; }
.col-chart .h-81 { height: 81%; }
.col-chart .h-82 { height: 82%; }
.col-chart .h-83 { height: 83%; }
.col-chart .h-84 { height: 84%; }
.col-chart .h-85 { height: 85%; }
.col-chart .h-86 { height: 86%; }
.col-chart .h-87 { height: 87%; }
.col-chart .h-88 { height: 88%; }
.col-chart .h-89 { height: 89%; }
.col-chart .h-90 { height: 90%; }
.col-chart .h-91 { height: 91%; }
.col-chart .h-92 { height: 92%; }
.col-chart .h-93 { height: 93%; }
.col-chart .h-94 { height: 94%; }
.col-chart .h-95 { height: 95%; }
.col-chart .h-96 { height: 96%; }
.col-chart .h-97 { height: 97%; }
.col-chart .h-98 { height: 98%; }
.col-chart .h-99 { height: 99%; }
.col-chart .h-100 { height: 100%; }

.col-chart--z0 .col-chart__tick--zero, .col-chart--z0.col-chart--signed .col-chart__plot::after { top: 0%; }
.col-chart--z5 .col-chart__tick--zero, .col-chart--z5.col-chart--signed .col-chart__plot::after { top: 5%; }
.col-chart--z10 .col-chart__tick--zero, .col-chart--z10.col-chart--signed .col-chart__plot::after { top: 10%; }
.col-chart--z15 .col-chart__tick--zero, .col-chart--z15.col-chart--signed .col-chart__plot::after { top: 15%; }
.col-chart--z20 .col-chart__tick--zero, .col-chart--z20.col-chart--signed .col-chart__plot::after { top: 20%; }
.col-chart--z25 .col-chart__tick--zero, .col-chart--z25.col-chart--signed .col-chart__plot::after { top: 25%; }
.col-chart--z30 .col-chart__tick--zero, .col-chart--z30.col-chart--signed .col-chart__plot::after { top: 30%; }
.col-chart--z35 .col-chart__tick--zero, .col-chart--z35.col-chart--signed .col-chart__plot::after { top: 35%; }
.col-chart--z40 .col-chart__tick--zero, .col-chart--z40.col-chart--signed .col-chart__plot::after { top: 40%; }
.col-chart--z45 .col-chart__tick--zero, .col-chart--z45.col-chart--signed .col-chart__plot::after { top: 45%; }
.col-chart--z50 .col-chart__tick--zero, .col-chart--z50.col-chart--signed .col-chart__plot::after { top: 50%; }
.col-chart--z55 .col-chart__tick--zero, .col-chart--z55.col-chart--signed .col-chart__plot::after { top: 55%; }
.col-chart--z60 .col-chart__tick--zero, .col-chart--z60.col-chart--signed .col-chart__plot::after { top: 60%; }
.col-chart--z65 .col-chart__tick--zero, .col-chart--z65.col-chart--signed .col-chart__plot::after { top: 65%; }
.col-chart--z70 .col-chart__tick--zero, .col-chart--z70.col-chart--signed .col-chart__plot::after { top: 70%; }
.col-chart--z75 .col-chart__tick--zero, .col-chart--z75.col-chart--signed .col-chart__plot::after { top: 75%; }
.col-chart--z80 .col-chart__tick--zero, .col-chart--z80.col-chart--signed .col-chart__plot::after { top: 80%; }
.col-chart--z85 .col-chart__tick--zero, .col-chart--z85.col-chart--signed .col-chart__plot::after { top: 85%; }
.col-chart--z90 .col-chart__tick--zero, .col-chart--z90.col-chart--signed .col-chart__plot::after { top: 90%; }
.col-chart--z95 .col-chart__tick--zero, .col-chart--z95.col-chart--signed .col-chart__plot::after { top: 95%; }
.col-chart--z100 .col-chart__tick--zero, .col-chart--z100.col-chart--signed .col-chart__plot::after { top: 100%; }