/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* ───────────── Таблица монет (сайдбар) ───────────── */

/* Единая геометрия таблицы: шаблон колонок, зазоры и боковые отступы
   заданы один раз и общие для шапки и строк — колонки стоят строго
   друг под другом на любой ширине сайдбара */
.sidebar {
  --coin-inset: 4px;    /* боковой отступ строк-карточек */
  --coin-pad-x: 10px;   /* внутренний боковой паддинг строк и шапки */
  --coin-gap: 6px;      /* зазор между колонками: проценты не сливаются с соседями */
}
.coin-headers,
.coin-item {
  /* пропорциональные колонки: ничего не прячется и не вылезает,
     ширина каждой масштабируется вместе с сайдбаром.
     24ч % — широкая дорожка: знак + максимум цифр, не ужимается. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.95fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 0.78fr);
  gap: var(--coin-gap);
}
.coin-headers {
  display: grid;
  /* боковой паддинг = отступ строки + её внутренний паддинг:
     текст шапки начинается и кончается ровно над текстом строк */
  padding: 9px calc(var(--coin-inset) + var(--coin-pad-x));
  border-bottom: 1px solid var(--border);
  background: var(--panel-tint);
  flex-shrink: 0;
  align-items: center;
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.coin-headers .header-cell {
  cursor: pointer;
  padding: 2px 0;
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 3px;
  user-select: none;
  white-space: nowrap;
  text-align: right;
  justify-content: flex-end;
}
.coin-headers .header-cell:first-child {
  justify-content: flex-start;
  text-align: left;
}
/* ещё чуть левее: правый край заголовка не впечёрен в край цифр,
   между ними воздушный зазор (трекинг капса + оптически плотнее текст) */
.coin-headers .header-cell:not(:first-child) { padding-right: 3px; }
.coin-headers .header-cell:hover { color: var(--text-secondary); }
.coin-headers .header-cell.active { color: var(--accent); }
/* ── фильтр «минимальный объём за 24ч» — тонкая полоса над шапкой списка ──
   В язык шапки, а не «виджет из браузера»: полоса ~20px, капс как у
   заголовков колонок, трек — 2px волосинка с акцентной заливкой до
   ползунка (процент --p ставит JS), ползунок — 9px точка с пружинным
   scale на hover/drag. accent-color не использовал сознательно: дефолтный
   нативный слайдер толстый, неанимируемый и выбивается из обшей сетки */
.vol-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px calc(var(--coin-inset) + var(--coin-pad-x)) 4px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-tint);
  flex-shrink: 0;
  /* опорный бокс для линзы значения (см. .vf-val) */
  position: relative;
  /* паддинг + бордер значения: ширина .vf-num считается в ch по числу
     знаков (ставит JS), и «незнаковую» часть надо где-то держать.
     Здесь, а не в JS — чтобы правка паддинга не разъехалась с шириной. */
  --vf-pad: 12px;              /* 5px ×2 паддинг + 1px ×2 бордер */
}
.vol-filter .vf-cap {
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--transition);
}
.vol-filter.on .vf-cap { color: var(--text-secondary); }
.vol-filter input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 16px;              /* зона попадания пальца, визуально — 2px;
                                16px, а не 14: ореол ползунка не должен
                                срезаться верхней кромкой полосы */
  background: transparent;
  cursor: pointer;
  margin: 0;
}
/* трек WebKit: серая волосинка, левее ползунка — акцент */
.vol-filter input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--accent) 0 var(--p, 0%), var(--border) var(--p, 0%) 100%);
}
.vol-filter input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: transform 0.16s var(--ease-spring), box-shadow var(--transition);
}
/* трек Firefox: та же геометрия, заливку ведёт тем же --p-градиентом */
.vol-filter input[type="range"]::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--accent) 0 var(--p, 0%), var(--border) var(--p, 0%) 100%);
}
.vol-filter input[type="range"]::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: transform 0.16s var(--ease-spring), box-shadow var(--transition);
}
/* ореол сознательно маленький (3/4px): больше — упирается в кромку полосы */
.vol-filter input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.vol-filter input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.45);
  box-shadow: 0 0 0 4px var(--accent-soft-2);
}
.vol-filter input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.vol-filter input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.45);
}
/* ── значение порога ──
   Здесь только колонка под цифры; сама «лупа» — внутренний .vf-num ниже.
   Ширина фиксированная и ровно под максимум «$500M»: значение формата
   (js/utils.js formatVolThreshold — целые в единице шкалы) шире него не
   бывает, поэтому лупа физически не может вылезти за знаки.
   Фиксированная, а не по контенту — иначе на каждом шаге драга флекс-строка
   пересобиралась бы, трек дёргался, а ползунок уезжал из-под курсора.
   min-width обязателен: у флекс-элемента min-width:auto — контентный
   минимум, и он перебивает width (замер: width:54px давал бокс 77px).
   59px = максимальная «лупа»: 5 знаков моно 10px (30) + паддинг (10) +
   бордер (2) = 42, это же ×1.4 = 58.8. Резерв именно под УВЕЛИЧЕННУЮ
   плашку — тогда она растёт внутри колонки и не заезжает на трек:
   иначе на максимуме она накрывала бы ползунок (он выступает за конец
   трека на половину своей ширины). */
.vol-filter .vf-val {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 59px;
  min-width: 59px;
  height: 16px;
  cursor: pointer;
  /* поверх трека и ползунка: линза раскрывается на них, а не под ними */
  position: relative;
  z-index: 2;
}
/* ── «лупа»: растёт ровно этот бокс, а не вся колонка ──
   Поэтому плашка облегает цифры симметрично — без пустого поля слева,
   которое давала подсветка всей колонки (просьба владельца 23.09).
   Геометрия посчитана заранее: line-height:1 + паддинг 2px + бордер 1px =
   ровно 16px, столько же, сколько у самого range. Это не косметика —
   полоса стоит первым элементом .sidebar, а у того overflow:hidden, и
   выросшая линза срезалась бы верхней кромкой панели. 16px в 23px строки
   дают запас ровно под scale(1.4) + translateY(2px) (см. .dragging ниже).
   Ширина задана в ch и переставляется из JS по числу знаков (paint).
   Шрифт моноширинный, поэтому ширина строки = знаки × 1ch — точно.
   Явная ширина нужна ради АНИМАЦИИ: на auto переход не работает, и при
   смене разрядности ($9M → $10M) плашка прыгала на 6px прямо посреди
   драга — это и читалось как «дёргано». */
.vol-filter .vf-num {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
  /* стартовое значение = максимум: до первого paint() ширина не скачет */
  width: calc(5ch + var(--vf-pad));
  /* правый край — ось роста: линза раскрывается ВЛЕВО, поверх трека, и
     никогда не выходит за правую кромку сайдбара */
  transform-origin: right center;
  /* transform и width — на --ease (штатная кривая сайта), а не на
     --ease-spring: пружина (0.34, 1.4, 0.64, 1) давала перелёт до 1.42
     и хвост доседания ~80мс — рост читался как «резиновый», а не линзовый.
     --ease идёт без перелёта и доседает заметно раньше. 0.2s — чтобы
     увеличение успевало «прочитаться», а не мигало. */
  transition: transform 0.2s var(--ease),
              width 0.2s var(--ease),
              color var(--transition),
              background var(--transition),
              border-color var(--transition),
              box-shadow var(--transition);
}
.vol-filter.on .vf-num { color: var(--accent); }
/* ── линза: пока порог тянут, значение крупнеет и подсвечивается ──
   Класс .dragging ставит JS (buildVolFilter), а не :active на самом range:
   в WebKit :active слетает, стоит курсору выйти за пределы контрола, и
   цифры «сдувались» на середине жеста.
   scale, а не font-size: смена кегля пересобрала бы флекс-строку, трек
   дрогнул бы и ползунок уехал из-под курсора прямо во время драга.
   translateY на два пикселя — чтобы ореол не резался верхней кромкой
   панели (см. комментарий выше).
   Ховер-масштаба здесь СОЗНАТЕЛЬНО нет: он давал вторую ступеньку на
   отпускании (1.4 → 1.08 под курсором, потом 1.08 → 1.0 при уходе) —
   два подряд подрагивания вместо одного чистого доседания. Курсор
   pointer на .vf-val о доступности сброса и так сообщает. */
.vol-filter.dragging .vf-num {
  transform: translateY(2px) scale(1.4);
  color: var(--accent);
  background: var(--surface);
  border-color: var(--accent-glow);
  /* Ободок в 2px (бордер 1px + кольцо 1px), а не в 3px: на 1.4× тройной
     акцентный кант читался как тяжёлая рамка и давал «дёшево». Плашку на
     тёмной теме и так отделяет непрозрачная подложка, кант — только акцент. */
  box-shadow: 0 0 0 1px var(--accent-glow), 0 3px 12px rgba(0, 0, 0, 0.42);
}
/* стрелка сортировки — ТОЛЬКО у активной колонки: неактивные заголовки
   стоят правым краем ровно над правым краем цифр (общая сетка колонок),
   ничего не сдвигает — идеальная симметрия шапки и строк.
   У числовых колонок стрелка встаёт ПЕРЕД текстом (order:-1): текст
   сохраняет общий правый край с данными; у «Монета» (левый край) —
   после текста, сохраняя общий левый край */
.coin-headers .header-cell .arrow {
  font-size: 9px;
  transition: transform var(--transition);
  display: none;
  flex-shrink: 0;
}
.coin-headers .header-cell.active .arrow { display: inline-block; order: -1; }
.coin-headers .header-cell:first-child .arrow { order: 1; }
.coin-headers .header-cell.desc .arrow { transform: rotate(0deg); }
.coin-headers .header-cell.asc .arrow { transform: rotate(180deg); }

/* кастомные иконки колонок: в узком сайдбаре заменяют текст */
.coin-headers .hc-ico {
  display: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.coin-headers .hc-ico svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* упор сжатия (270px — заголовки перестают влезать): текст скрывается, остаются только иконки (сортировка работает) */
.sidebar.icons .hc-txt { display: none; }
.sidebar.icons .hc-ico { display: inline-flex; }
/* иконки вместо текстов: в числовых колонках — по центру колонки
   (прямо над значениями), правый край для них не опора;
   «Монета» остаётся по левому краю, как тикеры в строках */
.sidebar.icons .header-cell:not(:first-child) {
  justify-content: center;
  padding-right: 0;
}
/* в иконочном режиме стрелки сортировки не показываем вовсе:
   в колонке остаётся только знак — строго по центру */
.sidebar.icons .header-cell .arrow { display: none !important; }
/* узкий сайдбар: те же переменные — шапка и строки сужаются синхронно,
   боковые отступы остаются равными с обеих сторон */
.sidebar.icons {
  --coin-inset: 2px;
  --coin-pad-x: 6px;
}
/* упор сжатия: компактные, но строго симметричные отступы —
   лево и право одинаковы, шапка и строки едут вместе */
.sidebar.skinny {
  --coin-inset: 2px;
  --coin-pad-x: 4px;
}

.coin-item {
  display: grid;
  align-items: center;
  padding: 6px var(--coin-pad-x);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.08s var(--ease),
              box-shadow 0.08s ease;
  border-radius: 7px;
  margin: 0 var(--coin-inset);
  position: relative;
  contain: layout style;
}
.coin-item:hover {
  background: var(--surface-hover);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.coin-item .symbol {
  font-weight: 700;
  font-size: var(--fs-h);
  letter-spacing: 0;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.coin-item .volume {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.coin-item .change {
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.coin-item .change.positive { color: var(--positive); }
.coin-item .change.negative { color: var(--negative); }
.coin-item .trades {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.coin-item .corr-label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* значения не вылезают за свои колонки при узком сайдбаре */
.coin-item .volume,
.coin-item .change,
.coin-item .trades,
.coin-item .corr-label,
.coin-headers .header-cell { overflow: hidden; white-space: nowrap; }

@media (max-width: 1512px) {
  .coin-item { padding-top: 5px; padding-bottom: 5px; }
}
@media (max-width: 900px) {
  .coin-item { padding-top: 4px; padding-bottom: 4px; }
  /* зазор сужается через переменную — у шапки и строк одновременно */
  .sidebar { --coin-gap: 3px; }
}
@media (max-width: 600px) {
  /* телефонная тема — css/mobile.css (data-layout="mobile") */
  .coin-item { padding-top: 3px; padding-bottom: 3px; }
}

/* ── низкие экраны (≤900px по высоте): строки плотнее ── */
@media (max-height: 900px) {
  .coin-headers { padding-top: 8px; padding-bottom: 8px; }
  .coin-item { padding-top: 4px; padding-bottom: 4px; }
}