/* Оформление интерактивных графиков заметки.
 *
 * Живёт отдельным файлом, а не в components.css, потому что нужен только на
 * страницах заметок с расчётами: класть его в общий лист значило бы отдавать
 * правила всем страницам ради нескольких.
 *
 * Цвета берутся из токенов проекта. Прямых значений здесь нет ровно по той
 * причине, по которой их нет в контракте: цвет, вписанный в компонент, потом
 * невозможно поменять из одного места.
 */

.ttchart {
  margin: 32px 0;
  border: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  padding: 16px 16px 12px;
  background: var(--tt-bg-raised, transparent);
}

.ttchart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ttchart figcaption,
.ttchart .ttc-cap {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.55;
  color: var(--tt-text-muted, #8a948c);
  margin-top: 10px;
  letter-spacing: .02em;
}

.ttchart .ttc-ax {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  fill: var(--tt-text-muted, #8a948c);
}

.ttchart .ttc-val {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  fill: var(--tt-text, #e8ece9);
}

.ttchart .ttc-big {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--tt-text, #e8ece9);
}

/* Наведение и фокус, а не только наведение: график, который отвечает лишь мыши,
   для клавиатуры не существует. */
.ttchart .ttc-bar rect,
.ttchart .ttc-dot circle {
  transition: opacity 150ms ease;
}

.ttchart .ttc-bar { cursor: default; }
.ttchart .ttc-bar.on rect { opacity: 1; }
.ttchart .ttc-bar:not(.on) rect { opacity: .85; }
.ttchart .ttc-dot.on circle:last-of-type { r: 5.5; }

.ttchart .ttc-bar:focus,
.ttchart .ttc-dot:focus {
  outline: none;
}

.ttchart .ttc-bar:focus-visible rect,
.ttchart .ttc-dot:focus-visible circle:last-of-type {
  outline: 2px solid var(--tt-brand, #33ff66);
  outline-offset: 2px;
}

/* Подсказка одна на документ, поэтому и правило одно. */
.ttc-tip {
  position: absolute;
  z-index: 40;
  display: none;
  pointer-events: none;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--tt-line-strong, rgba(232, 236, 233, .24));
  background: var(--tt-bg, #0a0c0a);
  color: var(--tt-text, #e8ece9);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.ttc-tip b { color: var(--tt-text, #e8ece9); font-weight: 600; }
.ttc-tip span { color: var(--tt-text-muted, #8a948c); }

/* Рисовальщик сломался. Пустое место читалось бы как «данных нет», а это
   разные вещи: данные есть, не сработал показ. */
.ttchart[data-ttchart-error]::after {
  content: "график не построился; числа остаются в таблице ниже";
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 12px;
  color: var(--tt-warning, #ffce54);
  padding: 12px 0;
}

/* Таблица под графиком: те же числа, доступные без скрипта и для чтения с
   экрана. Свернута по умолчанию на широком экране, раскрыта на узком, где
   график читается хуже. */
.ttchart-data {
  margin: 0 0 32px;
  border: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  border-top: 0;
}

.ttchart-data > summary {
  cursor: pointer;
  padding: 10px 16px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tt-text-muted, #8a948c);
}

.ttchart-data > summary:hover { color: var(--tt-brand, #33ff66); }
.ttchart-data table { width: 100%; border-collapse: collapse; }
.ttchart-data td, .ttchart-data th {
  padding: 7px 16px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  text-align: left;
}
.ttchart-data th { color: var(--tt-text-muted, #8a948c); font-weight: 500; }
.ttchart-data td:not(:first-child), .ttchart-data th:not(:first-child) { text-align: right; }

@media (max-width: 767px) {
  .ttchart { padding: 12px 10px 10px; }
  /* На телефоне подпись столбика не помещается под графиком, поэтому числа
     читаются из таблицы, и прятать её нельзя. */
  .ttchart-data { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ttchart .ttc-bar rect,
  .ttchart .ttc-dot circle { transition: none; }
}

html.tt-light .ttchart { border-color: #aabdaf; }
html.tt-light .ttchart .ttc-ax,
html.tt-light .ttchart figcaption { fill: #43584a; color: #43584a; }
html.tt-light .ttchart .ttc-val,
html.tt-light .ttchart .ttc-big { fill: #102017; }
html.tt-light .ttc-tip { background: #f2f5f2; border-color: #aabdaf; color: #102017; }
html.tt-light .ttc-tip span { color: #43584a; }