/* Графики панели и кабинета — разметку строит chart.js, почему так — там же.
   Цвета — только токенами страницы: один файл служит и панели (styles.css),
   и кабинету ученика (learn.css), и обеим темам каждого. */

.tch {
  position: relative;
  /* Поля под подписи: слева шкала, справа подпись опорной линии, сверху —
     число над верхней точкой, снизу — подписи оси. */
  padding: 22px 60px 26px 34px;
  color: var(--accent);
}
.tch__plot { position: relative; height: 132px; }
.tch--cols .tch__plot { height: 116px; }
.tch__plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* Сетка молчит: три волосяные линии, нижняя — база, чуть заметнее. */
.tch__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.tch__grid.is-base { border-top-color: var(--line-2); }
.tch__y {
  position: absolute; right: calc(100% + 8px); transform: translateY(50%);
  font: 500 10px/1 var(--mono); color: var(--text-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Опорная линия утверждает — поэтому пунктир, в отличие от сетки. */
.tch__ref { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--text-3); }
.tch__ref.is-goal { border-top: 1.5px dashed var(--brass); }
.tch__refl {
  position: absolute; left: calc(100% + 10px); transform: translateY(50%);
  font: 500 10.5px/1.2 var(--ui); color: var(--text-3); white-space: nowrap;
}
.tch__refl b { display: block; font: 600 11px/1.25 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.tch__refl.is-goal, .tch__refl.is-goal b { color: var(--brass); }

/* Линия роста. */
.tch__line { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.tch__pt {
  position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px;
  border-radius: 50%; background: currentColor; cursor: default;
}
/* Цель для пальца и мыши больше самой точки. */
.tch__pt::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.tch__pt.is-last {
  width: 12px; height: 12px; margin: 0 0 -6px -6px;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 24%, transparent);
}

/* Столбики: скруглён верх, низ стоит на базе. */
.tch__col {
  position: absolute; top: 0; bottom: 0; transform: translateX(-50%);
  display: flex; align-items: flex-end; justify-content: center; cursor: default;
}
.tch__bar {
  display: block; width: min(26px, 62%);
  background: currentColor; border-radius: 4px 4px 0 0;
  opacity: .78; transition: opacity .12s ease;
}
.tch__bar.is-last { opacity: 1; }
.tch__bar.is-flag { background: var(--warn); }
.tch__col:hover .tch__bar { opacity: 1; }

/* Числа на графике — только ключевые (см. keyPoints). */
.tch__v {
  position: absolute; transform: translate(-50%, -11px); pointer-events: none;
  font: 600 11px/1 var(--mono); color: var(--text-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tch--trend .tch__v { transform: translate(-50%, -13px); }
.tch__v.is-last { font-size: 12.5px; font-weight: 700; color: var(--text); }
.tch__v.is-up { color: var(--ok); }

/* Шрифтом интерфейса: «№» в моноширинном рисуется похожим на «%». */
.tch__x {
  position: absolute; top: calc(100% + 9px); transform: translateX(-50%);
  font: 500 10.5px/1 var(--ui); color: var(--text-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Подсказка — негативом страницы: читается в обеих темах. */
.tch__tip {
  position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 9px));
  padding: 6px 9px; border-radius: 8px;
  background: var(--text); color: var(--bg);
  font: 500 11.5px/1.3 var(--ui); white-space: nowrap;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
  transition: opacity .1s ease;
}
.tch__tip.is-on { opacity: 1; }

@media (max-width: 480px) {
  .tch { padding-right: 54px; padding-left: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .tch__bar, .tch__tip { transition: none; }
}

/* ── несколько рядов столбиков ─────────────────────────────────────────
   Столбики группы — рядом, с зазором в 2 px: слитые вместе они читались
   бы одним широким. Цвета рядов: первый — акцент, второй — «хорошо»,
   третий — предупреждение (долг). */
.tch--multi .tch__col { gap: 2px; }
.tch--multi .tch__bar { width: min(14px, calc(80% / 3)); opacity: .9; }
.tch__bar.is-s1, .tch__key.is-s1 { background: var(--accent); }
.tch__bar.is-s2, .tch__key.is-s2 { background: var(--ok); }
.tch__bar.is-s3, .tch__key.is-s3 { background: var(--warn); }
/* Легенда — ниже подписей оси: они висят в нижнем поле графика. */
.tch__legend {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 26px 0 -12px;
  font: 500 11.5px/1.2 var(--ui); color: var(--text-3);
}
.tch__legend span { display: inline-flex; align-items: center; gap: 6px; }
.tch__key { display: inline-block; width: 9px; height: 9px; border-radius: 3px; }

/* ── горизонтальные полосы ─────────────────────────────────────────────
   Строка: метка (номер задания, день) · название · полоса · значение.
   На узком экране название уходит второй строкой под метку — иначе
   полосе не оставалось бы места. */
.tchb { position: relative; display: grid; gap: 7px; color: var(--accent); }
.tchb__row {
  display: grid; align-items: center; gap: 4px 10px;
  grid-template-columns: 2.4em minmax(0, 1.1fr) minmax(90px, 1.6fr) 5.6em;
  cursor: default;
}
.tchb__k { font: 650 13px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.tchb__n { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchb__track {
  position: relative; height: 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  overflow: hidden;
}
.tchb__bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: currentColor; }
.tchb__row.is-flag .tchb__bar { background: var(--warn); }
.tchb__v {
  text-align: right; font: 600 12.5px/1.15 var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tchb__v small { display: block; font: 500 10.5px/1.2 var(--ui); color: var(--text-3); }
.tchb__row:hover .tchb__track { background: color-mix(in srgb, var(--line-2) 80%, transparent); }
.tchb .tch__tip { z-index: 6; }
.tchb--bare .tchb__row { grid-template-columns: 2.4em minmax(90px, 1fr) 5.6em; }
.tchb--bare .tchb__n { display: none; }

@media (max-width: 560px) {
  .tchb:not(.tchb--bare) .tchb__row { grid-template-columns: 2.4em minmax(0, 1fr) 5.2em; grid-template-areas: "k track v" "k name v"; }
  .tchb:not(.tchb--bare) .tchb__k { grid-area: k; align-self: start; padding-top: 1px; }
  .tchb:not(.tchb--bare) .tchb__track { grid-area: track; }
  .tchb:not(.tchb--bare) .tchb__n { grid-area: name; font-size: 11.5px; }
  .tchb:not(.tchb--bare) .tchb__v { grid-area: v; align-self: start; }
}

/* Печать (отчёт для родителя): цвета графиков — как на экране. */
@media print {
  .tch, .tchb { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tch__tip { display: none; }
}