/* Графики (SPEC §5): серверный SVG, цвета — классы серий через токены. Плоскость тянется
   на всю ширину (preserveAspectRatio="none"), линии не толстеют (non-scaling-stroke),
   подписи осей — HTML рядом с плоскостью: текст не искажается. Справочник — COMPONENTS.md. */

/* --- цвета серий ------------------------------------------------------------------------------ */

.c-1 {
  color: var(--chart-1);
}

.c-2 {
  color: var(--chart-2);
}

.c-in {
  color: var(--chart-in);
}

.c-out {
  color: var(--chart-out);
}

.c-warn {
  color: var(--warn-mark);
}

.c-grid {
  color: var(--chart-grid);
}

.c-axis {
  color: var(--chart-axis);
}

/* --- спарклайн -------------------------------------------------------------------------------- */

.spark {
  display: block;
  width: 100%;
  height: var(--spark-h);
  overflow: visible;
}

.spark__line {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--line-thin);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.spark__area {
  fill: currentColor;
  fill-opacity: var(--fill-area);
  stroke: none;
}

.spark--none {
  height: var(--spark-h);
}

/* --- плоскость с осями ------------------------------------------------------------------------- */

.chart {
  margin: var(--space-0);
  min-width: var(--space-0);
}

.chart__frame {
  display: grid;
  grid-template-columns: minmax(var(--space-10), auto) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-2);
}

.chart__y {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  /* подпись по центру своей линии сетки: половина строки выходит за плоскость */
  margin: calc(var(--space-2) * -1) var(--space-0);
  color: var(--chart-axis);
  font-size: var(--fs-11);
  line-height: var(--space-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart__plot {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: var(--space-0);
}

.chart__svg {
  display: block;
  width: 100%;
  height: var(--chart-h-md);
  overflow: visible;
}

.chart--sm .chart__svg,
.no-data.chart--sm {
  height: var(--chart-h-sm);
}

.chart--md .chart__svg,
.no-data.chart--md {
  height: var(--chart-h-md);
}

.chart--lg .chart__svg,
.no-data.chart--lg {
  height: var(--chart-h-lg);
}

.chart__x {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding-top: var(--space-2);
  color: var(--chart-axis);
  font-size: var(--fs-11);
  line-height: var(--space-4);
  font-variant-numeric: tabular-nums;
}

/* Подпись шире своей полосы: стоит по центру полосы и выходит в соседние. */
.chart__x span {
  display: flex;
  justify-content: center;
  min-width: var(--space-0);
  white-space: nowrap;
}

.chart__grid {
  stroke: var(--chart-grid);
  stroke-width: var(--hairline);
}

.chart__zero {
  stroke: var(--chart-axis);
  stroke-width: var(--hairline);
  stroke-opacity: var(--zero-opacity);
}

.chart__line {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--line-w);
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart__line.dash {
  stroke-dasharray: var(--dash);
}

.chart__line.thin {
  stroke-width: var(--line-thin);
}

.chart__area {
  fill: currentColor;
  fill-opacity: var(--fill-area);
  stroke: none;
}

.chart__bar {
  fill: currentColor;
}

.chart__bar:hover {
  fill-opacity: var(--hover-opacity);
}

.chart__zone {
  fill: currentColor;
  fill-opacity: var(--fill-soft);
}

.chart__threshold {
  stroke: currentColor;
  stroke-width: var(--hairline);
  stroke-dasharray: var(--dash);
}

.chart__hit {
  fill: transparent;
}

.chart__hit:hover {
  fill: var(--chart-axis);
  fill-opacity: var(--fill-soft);
}

/* --- легенда ------------------------------------------------------------------------------------- */

.chart figcaption {
  margin-top: var(--space-3);
}

.chart__legend,
.progress__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: var(--lh-text);
}

.chart__legend li,
.progress__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chart__key {
  flex: none;
  display: inline-block;
  width: var(--space-4);
}

.chart__key--line {
  height: 0;
  border-top: var(--line-w) solid currentColor;
}

.chart__key--thin {
  border-top-width: var(--hairline);
}

.chart__key--dash {
  border-top-style: dashed;
}

.chart__key--box {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--rule-thick);
  background: currentColor;
}

/* --- горизонтальные столбцы --------------------------------------------------------------------- */

.hbars {
  list-style: none;
  margin: var(--space-0);
  padding: var(--space-0);
  display: grid;
  gap: var(--space-3);
}

.hbars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
}

.hbars__label {
  min-width: var(--space-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-13);
  color: var(--text);
}

.hbars__label a {
  color: inherit;
}

.hbars__label a:hover {
  color: var(--accent-text);
}

.hbars__value {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

.hbars__bar {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: var(--hbar-h);
  border-radius: var(--r-pill);
}

.hbars__track,
.progress__track {
  fill: var(--chart-track);
}

.hbars__fill {
  fill: currentColor;
}

/* --- доля ---------------------------------------------------------------------------------------- */

.progress {
  display: grid;
  gap: var(--space-3);
}

.progress__bar {
  display: block;
  width: 100%;
  height: var(--progress-h);
  border-radius: var(--r-pill);
}

.progress__seg {
  fill: currentColor;
}

.progress__legend {
  display: grid;
  gap: var(--space-2);
}

.progress__legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.progress__name {
  color: var(--text);
  font-size: var(--fs-13);
}

.progress__value {
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

/* --- телефон: та же картинка, подписи оси X реже --------------------------------------------- */

@media (max-width: 599px) {
  .chart__x span.minor {
    visibility: hidden;
  }

  .chart--lg .chart__svg {
    height: var(--chart-h-md);
  }
}