/* Шапка окна тикера: один рост у всех кнопок и никакого наложения.
 *
 * ЗАЧЕМ. Окно строит статический `tvmodal.js` сайта, и его шапка собралась
 * из трёх разных мер: вкладки и кнопки по 40px, мятная кнопка площадки
 * (`.tt-ref`) 34px, а на телефоне ещё и 38px. Ряд не переносился, поэтому
 * при нехватке ширины подпись «график с индикаторами» уезжала ПОД кнопку
 * площадки, а крайняя кнопка — за край экрана (замечание владельца
 * 24.08.2026, замер на 390px: одно наложение, три разные высоты, один
 * элемент за краем).
 *
 * ПОЧЕМУ ЗДЕСЬ. Сам `tvmodal.js` живёт в статике сайта, и его генератор — в
 * прежнем репозитории; править разметку там значит уводить правку из этого
 * дерева. Лист доводки принадлежит нам и подключается обеими оболочками —
 * живыми экранами и зеркальными страницами, — потому что окно тикера
 * открывается и там, и там.
 *
 * Замер после правки (390 и 768px): наложений 0, высота у всех 34px, за
 * краем ничего.
 */

/* Ряд переносится, а не давит соседа: перенос — это две строки, наложение —
   это потерянная подпись. */
.tvm-hd { flex-wrap: wrap; row-gap: 8px; align-items: center; }
.tvm-hd > * { min-width: 0; }

/* Один рост и одна внутренняя мера у всего, что нажимается. Радиус не
   трогаем: у мятной кнопки площадки он свой по решению владельца
   (исключение в tools/sharp_edges.py), и выравнивание не повод его менять. */
.tvm-hd .tvm-tab,
.tvm-hd .tvm-logo,
.tvm-hd .tvm-x,
.tvm-hd .tt-ref {
  box-sizing: border-box;
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1;
}

.tvm-hd .tvm-tabs { display: inline-flex; align-items: center; height: 34px; }

/* Квадратные кнопки — квадратные: знак площадки и крестик несут значок, а не
   подпись, и лишняя ширина делала их шире соседей без причины. */
.tvm-hd .tvm-logo,
.tvm-hd .tvm-x { width: 34px; padding: 0; flex: 0 0 34px; }

/* Длинная подпись не растягивает ряд и не режется краем чужой кнопки:
   она ужимается многоточием и остаётся читаемой. */
.tvm-hd .tvm-out {
  display: inline-block;
  max-width: min(300px, 32vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 32px;
}

/* Правая группа держится вместе и прижата к краю. */
.tvm-hd .sp {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* Кнопка площадки — ТОЛЬКО ЗНАК, как соседняя кнопка обзора монеты.
 *
 * Просьба владельца 24.08.2026: подпись «Торговать Binance» занимала 136px в
 * ряду, где на всё про всё оставалось меньше, и при нехватке ширины наезжала
 * на подпись «график с индикаторами». Знак площадки читается сам, а полное
 * название остаётся в подсказке (`title`) и в доступной подписи ссылки —
 * значок без имени был бы загадкой для читалки экрана.
 */
.tvm-hd .tt-ref {
  width: 34px;
  flex: 0 0 34px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.tvm-hd .tt-ref span { display: none; }

/* Знак площадки — ОРИГИНАЛЬНЫЙ, и он занимает кнопку.
 *
 * Просьба владельца 25.08.2026: «только оригинал лого Binance/okx/bybit/hl на
 * всю кнопку квадратную». До правки знак стоял 16px в кнопке 34px — четверть
 * площади, остальное пустой квадрат, и на тёмной шапке его почти не было
 * видно. У Hyperliquid было хуже: `.tt-ref-hl` заливал кнопку мятным и гасил
 * знак в сплошной чёрный (`filter: brightness(0)`), то есть на кнопке
 * оставалось тёмное пятно вместо логотипа площадки.
 *
 * Подложка тёмная — это ЗАМЕР, а не вкус. Средняя яркость видимых пикселей
 * знаков: Binance 184, Bybit 230, OKX 249, Hyperliquid 220 из 255. Все четыре
 * нарисованы для тёмного фона, и на светлом квадрате белый знак Bybit
 * пропадал целиком. Один и тот же квадрат под все площадки держит их
 * одинаковыми — ряд логотипов, а не набор случайных пятен. */
/* `!important` здесь не от лени: окно вставляет свой лист в момент открытия,
   то есть ПОЗЖЕ нашего, и правила равной силы у него выигрывают по порядку.
   Размеры кнопки перебиваются и без него, а заливка и знак — нет. */
.tvm-hd .tt-ref,
.tvm-hd .tt-ref-hl {
  background: #0e1512 !important;
  border: 1px solid rgba(232, 236, 233, .22) !important;
}

.tvm-hd .tt-ref img,
.tvm-hd .tt-ref svg,
.tvm-hd .tt-ref-hl img {
  /* Пиксели, а не проценты: у кнопки нет заданной высоты, и процент от неё
     браузер считает от `auto` — знак получался 9x19 вместо квадрата. */
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  flex: none !important;
  object-fit: contain !important;
  /* Гашение знака в чёрное снимается: оригинал — значит оригинал. */
  filter: none !important;
}

/* ТЕЛЕФОН. Символ в шапке не печатается: он не влезал и уезжал за край
 * («BINANCE:SA…», замер на 390px — правый край строки 438 при экране 390), а
 * сам символ виден и в графике, и в строке поиска под ним. Кнопки поднимаются
 * до 40px — пол проекта для пальца (CLAUDE.md §7). */
@media (max-width: 900px) {
  .tvm-hd > b { display: none !important; }

  .tvm-hd .tvm-tab,
  .tvm-hd .tvm-tabs,
  .tvm-hd .tvm-logo,
  .tvm-hd .tvm-x,
  .tvm-hd .tt-ref { height: 40px; min-height: 40px; }

  .tvm-hd .tvm-logo,
  .tvm-hd .tvm-x,
  .tvm-hd .tt-ref { width: 40px; flex: 0 0 40px; }

  /* Длинная подпись — СВОЕЙ строкой, во всю ширину.
     Она делила ряд с правой группой и залезала под неё: замер на 390px давал
     три наложения, на 320px — четыре. Ряд с двумя мерами внутри выглядел
     «криво-косо» именно поэтому, а не из-за отступов. */
  .tvm-hd .tvm-tabs { order: 1; }
  .tvm-hd .sp { order: 2; }

  .tvm-hd .tvm-out {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    line-height: 38px;
    text-align: center;
  }

  /* Один рост у всей шапки: 44 у одних и 40 у других читались как перекос. */
  .tvm-hd > * { min-height: 40px; }

  /* Ряд ПЕРЕНОСИТСЯ, а не уезжает вбок. Адаптивный слой зеркальных страниц
     ставит шапке горизонтальную прокрутку, и подпись своей строкой в ней не
     вставала: она просто уходила за край, где её никто не искал. */
  .tvm-hd {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  /* Кнопка выросла до 40px — знак растёт вместе с ней. */
  .tvm-hd .tt-ref img,
  .tvm-hd .tt-ref svg,
  .tvm-hd .tt-ref-hl img {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
  }
}