/* Энергорынок: дополняет fuel.css (общие .tf-*) цветами линий и полосой структуры генерации. */
.tf {
  --tp-cons: var(--tk-air, #2C67D8);
  --tp-gen: var(--tk-vest, #FF6B1A);
  --tp-z1: var(--tk-air, #2C67D8);
  --tp-sib: var(--tk-water, #2E8B57);
  --tp-dv: var(--tk-steam, #D6332A);
  --tp-reg: var(--tk-vest, #FF6B1A);
  --tp-zone: var(--tk-ink, #16181B);
  --tp-thermal: var(--tk-oil, #7A4A2A);
  --tp-hydro: var(--tk-air, #2C67D8);
  --tp-nuclear: #7A4FD0;
  --tp-res: var(--tk-water, #2E8B57);
}

/* Линии графиков: tf-<класс> как в fuel.css */
.tf-line.tf-cons, .tf-dot.tf-cons, .tf-line.tf-consy, .tf-dot.tf-consy { stroke: var(--tp-cons); }
.tf-dot.tf-cons, .tf-end.tf-cons, .tf-dot.tf-consy, .tf-end.tf-consy { fill: var(--tp-cons); }
.tf-line.tf-gen, .tf-dot.tf-gen, .tf-line.tf-geny, .tf-dot.tf-geny { stroke: var(--tp-gen); }
.tf-dot.tf-gen, .tf-end.tf-gen, .tf-dot.tf-geny, .tf-end.tf-geny { fill: var(--tp-gen); }
.tf-line.tf-z1, .tf-dot.tf-z1 { stroke: var(--tp-z1); } .tf-dot.tf-z1, .tf-end.tf-z1 { fill: var(--tp-z1); }
.tf-line.tf-sib, .tf-dot.tf-sib { stroke: var(--tp-sib); } .tf-dot.tf-sib, .tf-end.tf-sib { fill: var(--tp-sib); }
.tf-line.tf-dv, .tf-dot.tf-dv { stroke: var(--tp-dv); } .tf-dot.tf-dv, .tf-end.tf-dv { fill: var(--tp-dv); }
.tf-line.tf-reg, .tf-dot.tf-reg { stroke: var(--tp-reg); } .tf-dot.tf-reg, .tf-end.tf-reg { fill: var(--tp-reg); }
.tf-line.tf-zone, .tf-dot.tf-zone { stroke: var(--tp-zone); } .tf-dot.tf-zone, .tf-end.tf-zone { fill: var(--tp-zone); }
/* Вчера — тоньше и пунктиром, чтобы не спорить с сегодняшней линией */
.tf-line.tf-consy, .tf-line.tf-geny { stroke-opacity: .55; }
.tf-key.tf-cons i, .tf-key.tf-consy i { color: var(--tp-cons); }
.tf-key.tf-gen i, .tf-key.tf-geny i { color: var(--tp-gen); }
.tf-key.tf-z1 i { color: var(--tp-z1); } .tf-key.tf-sib i { color: var(--tp-sib); } .tf-key.tf-dv i { color: var(--tp-dv); }
.tf-key.tf-reg i { color: var(--tp-reg); } .tf-key.tf-zone i { color: var(--tp-zone); }

/* Структура генерации: полоса из долей ТЭС/ГЭС/АЭС/ВИЭ */
.tp-mix { display: flex; height: .8rem; min-width: 7rem; background: var(--tf-ground); overflow: hidden; border: 1.5px solid var(--tf-ink); border-radius: 999px; }
.tp-mix span { display: block; height: 100%; }
.tp-mix-lg { height: 1.4rem; margin-bottom: .6rem; }
.tp-thermal { background: var(--tp-thermal); }
.tp-hydro { background: var(--tp-hydro); }
.tp-nuclear { background: var(--tp-nuclear); }
.tp-res { background: var(--tp-res); }
.tp-keys { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.tp-keys li { display: inline-flex; align-items: center; gap: .35rem; }
.tp-keys i { width: .75rem; height: .75rem; display: inline-block; }
.tp-none { color: var(--tf-muted); font-size: .85rem; }

/* Подпись под заголовком секции */
.tp-note { margin: -.5rem 0 1rem; color: var(--tf-muted); font-size: .9rem; max-width: 72ch; }
.tf-table tr.tp-total td { font-weight: 600; background: var(--tf-ground); }
.tf-tile-name small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.tp-after { margin: .6rem 0 0; }
.tp-gap { margin-top: 1rem; }

/* SVG масштабируется вместе с шириной: на телефоне подписи осей увеличиваем, иначе они ~5 px */
@media (max-width: 560px) {
  .tp-chart .tf-axis { font-size: 17px; }
  .tp-chart .tf-end { font-size: 18px; }
  .tp-chart { padding: .75rem .5rem .5rem; }
}

/* Рейтинг на телефоне: главное — регион, цена, отклонение, потребление и структура */
@media (max-width: 560px) {
  .tf-table .tp-wide { display: none; }
  .tf-table { min-width: 0; }
  .tf-table th, .tf-table td { padding: .45rem .5rem; }
  .tp-mix { min-width: 4.5rem; }
}
.tp-nowrap { white-space: nowrap; }