/* Оформление интерактивных графиков заметки.
 *
 * Живёт отдельным файлом, а не в 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; }

/* ------------------------------------------------------------------------ *
 * Блоки, которые читатель нажимает (решение владельца 2026-08-19).
 *
 * Форма — та же, что у поверхностей с деньгами: метка прописными 11px,
 * значение крупное с `tabular-nums`, один акцент на блок, прямые углы. Радиуса
 * здесь нет намеренно: скруглены только поверхности из «Стандарта фронта»,
 * и свип `sharp_edges.py` про этот файл не знает.
 * ------------------------------------------------------------------------ */

.ttchart .ttw { font-family: 'Space Grotesk', system-ui, sans-serif; }

.ttchart .ttw-head { margin: 0 0 14px; }

.ttchart .ttw-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tt-text-subtle, #5a635c);
  margin-bottom: 6px;
}

.ttchart .ttw-q {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tt-text, #e8ece9);
}

/* Ряд переключателей */
.ttchart .ttw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.ttchart .ttw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  color: var(--tt-text-muted, #8a948c);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
  min-height: 32px;
}

.ttchart .ttw-chip:hover { border-color: var(--tt-line-strong, rgba(232, 236, 233, .24)); }
.ttchart .ttw-chip:focus-visible {
  outline: none;
  box-shadow: var(--tt-focus, 0 0 0 3px rgba(51, 255, 102, .28));
}

.ttchart .ttw-chip[aria-pressed="true"] {
  border-color: var(--tt-brand, #33ff66);
  color: var(--tt-brand, #33ff66);
}

.ttchart .ttw-chip-n { font-weight: 500; }

.ttchart .ttw-chip-c,
.ttchart .ttw-chip-b {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--tt-text-subtle, #5a635c);
  font-variant-numeric: tabular-nums;
}

.ttchart .ttw-chip-b { text-transform: uppercase; }

/* Плитки метрик */
.ttchart .ttw-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--tt-line, rgba(232, 236, 233, .14));
  border: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
}

.ttchart .ttw-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--tt-bg, #0a0c0a);
}

.ttchart .ttw-tile-k {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tt-text-muted, #8a948c);
}

.ttchart .ttw-tile-v {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tt-text, #e8ece9);
  line-height: 1.1;
}

.ttchart .ttw-tile-d { font-size: 12px; font-variant-numeric: tabular-nums; }
.ttchart .ttw-up { color: var(--tt-brand, #33ff66); }
.ttchart .ttw-dn { color: var(--tt-risk, #ff5c5c); }
.ttchart .ttw-flat { color: var(--tt-text-muted, #8a948c); }
.ttchart .ttw-tile-h { font-size: 11px; color: var(--tt-text-subtle, #5a635c); line-height: 1.4; }

/* Сравнение с эталоном */
.ttchart .ttw-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--tt-line, rgba(232, 236, 233, .14));
  border: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
}

.ttchart .ttw-pane { padding: 14px; background: var(--tt-bg, #0a0c0a); }

.ttchart .ttw-pane-n {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-text, #e8ece9);
}

.ttchart .ttw-badge {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tt-brand, #33ff66);
  border: 1px solid var(--tt-brand, #33ff66);
  padding: 2px 5px;
}

.ttchart .ttw-pane-v {
  display: block;
  margin: 6px 0 2px;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tt-brand, #33ff66);
  line-height: 1.05;
}

.ttchart .ttw-rows { margin-top: 10px; }

.ttchart .ttw-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  font-size: 12.5px;
}

.ttchart .ttw-row-k {
  color: var(--tt-text-muted, #8a948c);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .08em;
  padding-top: 2px;
}

.ttchart .ttw-row-v { text-align: right; font-variant-numeric: tabular-nums; }
.ttchart .ttw-row-v b { color: var(--tt-text, #e8ece9); font-weight: 600; }
.ttchart .ttw-row-v i { font-style: normal; color: var(--tt-text-subtle, #5a635c); }

/* Список участников */
.ttchart .ttw-search {
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  color: var(--tt-text, #e8ece9);
  font: inherit;
  font-size: 13px;
}

.ttchart .ttw-search:focus-visible {
  outline: none;
  box-shadow: var(--tt-focus, 0 0 0 3px rgba(51, 255, 102, .28));
}

/* Линии рисуют САМИ клетки, а не просвет между ними. Просвет в сетке с
   переменным числом клеток красит и хвост последнего ряда: под списком из трёх
   имён висел серый прямоугольник в две клетки, читавшийся как пустая карточка. */
.ttchart .ttw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-top: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  border-left: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  max-height: 420px;
  overflow-y: auto;
}

.ttchart .ttw-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  background: var(--tt-bg, #0a0c0a);
  border-right: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  border-bottom: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
}

.ttchart .ttw-item-n { font-size: 13px; font-weight: 600; color: var(--tt-text, #e8ece9); }
.ttchart a.ttw-item-n { text-decoration: none; border-bottom: 1px solid var(--tt-line-strong, rgba(232, 236, 233, .24)); align-self: flex-start; }
.ttchart a.ttw-item-n:hover { color: var(--tt-brand, #33ff66); border-color: var(--tt-brand, #33ff66); }

.ttchart .ttw-item-g {
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tt-text-subtle, #5a635c);
}

.ttchart .ttw-item-h { font-size: 11px; line-height: 1.45; color: var(--tt-text-muted, #8a948c); }

.ttchart .ttw-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 14px;
  background: var(--tt-bg, #0a0c0a);
  font-size: 12.5px;
  color: var(--tt-text-muted, #8a948c);
}

/* Карточка участника */
.ttchart .ttw-card-top { display: flex; gap: 14px; align-items: flex-start; }
.ttchart .ttw-card-img { width: 56px; height: 56px; object-fit: cover; flex: none; }
.ttchart .ttw-card-side { min-width: 0; }
.ttchart .ttw-card-n { display: block; font-size: 17px; font-weight: 600; color: var(--tt-text, #e8ece9); }
.ttchart .ttw-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.ttchart .ttw-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
  font-size: 11px;
}

.ttchart .ttw-meta i { font-style: normal; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; color: var(--tt-text-subtle, #5a635c); }
.ttchart .ttw-meta b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tt-text, #e8ece9); }
.ttchart a.ttw-link { color: var(--tt-text-muted, #8a948c); text-decoration: none; }
.ttchart a.ttw-link:hover { color: var(--tt-brand, #33ff66); border-color: var(--tt-brand, #33ff66); }

.ttchart .ttw-verdict {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--tt-line, rgba(232, 236, 233, .14));
}

.ttchart .ttw-verdict-k {
  display: block;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tt-brand, #33ff66);
  margin-bottom: 5px;
}

.ttchart .ttw-verdict p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--tt-text, #e8ece9); max-width: none; }

.ttchart .ttw-case-n { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: var(--tt-text-muted, #8a948c); max-width: none; }

/* Подпись, которая едет вместе с состоянием. Отдельным цветом, потому что это
   не пояснение автора, а факт текущего вида блока. */
.ttchart figcaption .ttw-state { color: var(--tt-text-subtle, #5a635c); }

@media (max-width: 640px) {
  .ttchart .ttw-tiles { grid-template-columns: 1fr; }
  .ttchart .ttw-two { grid-template-columns: 1fr; }
  .ttchart .ttw-pane-v { font-size: 22px; }
}

/* Оглавление статьи. Рельса слева, только на широком экране: ужимать колонку
   чтения ради навигации значит менять статью местами с меню. */
.ttoc { display: none; }

@media (min-width: 1180px) {
  .ttoc {
    display: block;
    position: fixed;
    top: 132px;
    left: max(16px, calc(50% - 620px));
    width: 176px;
    max-height: 68vh;
    overflow-y: auto;
    font-family: 'Space Grotesk', system-ui, sans-serif;
  }
  .ttoc ul { margin: 0; padding: 0; list-style: none; }
  .ttoc li { margin: 0 0 10px; }
  .ttoc a {
    display: block;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--tt-text-subtle, #5a635c);
    text-decoration: none;
    border-left: 1px solid transparent;
    padding-left: 10px;
  }
  .ttoc a:hover { color: var(--tt-text-muted, #8a948c); }
  .ttoc a[aria-current="true"] {
    color: var(--tt-brand, #33ff66);
    border-left-color: var(--tt-brand, #33ff66);
  }
  .ttoc a:focus-visible { outline: none; box-shadow: var(--tt-focus, 0 0 0 3px rgba(51, 255, 102, .28)); }
}

html.tt-light .ttchart .ttw-q,
html.tt-light .ttchart .ttw-tile-v,
html.tt-light .ttchart .ttw-pane-n,
html.tt-light .ttchart .ttw-card-n,
html.tt-light .ttchart .ttw-item-n,
html.tt-light .ttchart .ttw-row-v b,
html.tt-light .ttchart .ttw-meta b,
html.tt-light .ttchart .ttw-verdict p { color: #102017; }
html.tt-light .ttchart .ttw-tile,
html.tt-light .ttchart .ttw-pane,
html.tt-light .ttchart .ttw-item,
html.tt-light .ttchart .ttw-empty { background: #ffffff; }
/* Сетка списка красится клетками, поэтому фон линии ей не нужен: он и красил
   хвост последнего ряда. */
html.tt-light .ttchart .ttw-item,
html.tt-light .ttchart .ttw-grid { border-color: #aabdaf; background-color: transparent; }
html.tt-light .ttchart .ttw-item { background: #ffffff; }
html.tt-light .ttchart .ttw-tiles,
html.tt-light .ttchart .ttw-two,
html.tt-light .ttchart .ttw-chip,
html.tt-light .ttchart .ttw-search,
html.tt-light .ttchart .ttw-meta { border-color: #aabdaf; background-color: #aabdaf; }
html.tt-light .ttchart .ttw-chip,
html.tt-light .ttchart .ttw-search,
html.tt-light .ttchart .ttw-meta { background-color: transparent; color: #43584a; }
html.tt-light .ttchart .ttw-row { border-color: #aabdaf; }
html.tt-light .ttchart .ttw-pane-v,
html.tt-light .ttchart .ttw-verdict-k,
html.tt-light .ttchart .ttw-chip[aria-pressed="true"] { color: #087a3a; }
html.tt-light .ttchart .ttw-chip[aria-pressed="true"] { border-color: #087a3a; }
html.tt-light .ttchart .ttw-up { color: #087a3a; }
html.tt-light .ttchart .ttw-dn { color: #b32020; }
html.tt-light .ttoc a[aria-current="true"] { color: #087a3a; border-left-color: #087a3a; }