/* Топ обменников и динамика курса — два блока над списком (G05, G06).
   Оформление блока (фон, граница, радиус, тень, отступ) и заголовок блока
   (.dash-title — с таска 19 общий для шапки, топа, графика и списка) задаются
   в styles.css; здесь только внутренности. Палитра и шкала — токены styles.css
   поверх --tg-theme-*. */

.dash-hint {
  color: var(--hint-strong); font-size: var(--fs-sm); line-height: 1.4;
  padding: var(--sp-2) 0;
}

/* --- топ: строка = имя + критерий словами + курс крупно ---------------------- */
.top-row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.top-row + .top-row { border-top: var(--bw) solid var(--border); }
.top-main { flex: 1 1 auto; min-width: 0; }
.top-name {
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-meta {
  /* Переносится, а не обрезается: возраст курса — не украшение, его читают */
  margin-top: 3px; font-size: var(--fs-xs); line-height: 1.35;
  color: var(--hint-strong);
}
.top-reason {
  display: inline-block;
  margin-right: var(--sp-2); padding: 1px var(--sp-2);
  border: var(--bw) solid currentColor; border-radius: var(--r-pill);
  color: var(--link-strong); font-size: var(--fs-xs); font-weight: 600;
}
.top-rate {
  flex: 0 0 auto;
  font-size: var(--fs-xl); font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* С суммой (G23): сверху «сколько получу», под ним курс мелко — «по 1 535» */
.top-rate-sub {
  margin-top: 2px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0;
  color: var(--hint-strong);
}

/* --- динамика: переключатель периода, SVG, подпись изменения ------------------ */
/* .period-chip берёт вид .chip из styles.css — один чип на весь экран */
.period-row { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); flex-wrap: wrap; }

/* Подписи внутри SVG живут в единицах viewBox (320 в ширину), поэтому вместе
   с растяжением svg растёт и текст: на 640 px «10 px» превращались в 18.
   Ширина графика ограничена шириной viewBox — тогда единица равна пикселю
   и подпись равна шагу шкалы --fs-xs на любом экране. */
.history-chart { width: 100%; max-width: 320px; margin: 0 auto; }
.history-svg { display: block; width: 100%; height: auto; overflow: visible; }
.history-svg text {
  font-size: var(--fs-xs); font-weight: 600; fill: var(--hint-strong);
}
.history-grid { stroke: var(--border); stroke-width: 1; }
.history-line {
  fill: none; stroke: var(--link); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.history-dot { fill: var(--link); stroke: var(--card); stroke-width: 1.5; }
.history-change {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--border);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.history-change:empty { display: none; }