/* Позиционирование рынка: вид панели в окне тикера и блока под графиком.
 *
 * Отдельным файлом, а не строками внутри скрипта: разметку кладёт накладка
 * `app/assets/javascripts/chart_positioning.js`, а вид страницы — дело
 * стилей. Значения цветов взяты из опубликованной палитры зеркальных
 * страниц, как и у соседнего `mirror_mobile_polish.css`; новых тем здесь нет.
 *
 * Своей сетки у блока НАРОЧНО нет: под графиком он ложится в ту же колонку,
 * что и остальные разделы страницы, а в окне тикера — в ту же колонку метрик
 * токена. Две раскладки под одними числами читались бы как два разных прибора.
 */

.tt-pos { display: block; }

/* Заголовок панели в окне тикера — тем же кеглем, что и прочие подзаголовки
   колонки: позиционирование не важнее и не менее важно, чем эмиссия рядом. */
.tt-pos h4 {
  margin: 18px 0 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a948c;
}

/* Строка отказа: почему ряда нет — словами, а не пустотой. Пустое поле и ноль
   выглядят одинаково, и первое обязано быть написано. */
.tt-pos-say {
  margin: 8px 0 0;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: #8a948c;
}

/* Подпись под числами деска обязательна: чей это файл и когда собран. */
.tt-pos-src {
  margin: 10px 0 0;
  font-size: 11px;
  color: #5a635c;
}

/* Блок под графиком на /chart/. */
.tt-pos-section {
  margin: 26px 0 0;
  max-width: 100%;
}

.tt-pos-section h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: #e8ece9;
}

.tt-pos-how {
  margin: 0 0 12px;
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: #8a948c;
}

/* Ряды блока под графиком: подпись слева, число справа, моноширинные цифры —
   столбец чисел обязан читаться столбцом, а не лесенкой. */
.tt-pos-section .tt-pos-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(232, 236, 233, .07);
  font-size: 13.5px;
  color: #8a948c;
}

.tt-pos-section .tt-pos-row b {
  color: #e8ece9;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Оговорка про собственный сбор ликвидаций — последняя строка блока, зелёной
   планкой слева: это не выходные данные, а часть ответа, и читатель обязан
   увидеть её раньше, чем решит, что перед ним вся история рынка. */
.tt-pos .tt-pos-say:last-of-type {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 2px solid rgba(51, 255, 102, .55);
  background: rgba(51, 255, 102, .045);
}