/* © SNDR FX 2026 — All rights reserved · проприетарный код, копирование запрещено */
/* Только внутренности Обзора, без внешних подложек и рамок. */
.summary-canvas { display: block; width: 100%; height: 260px; }
.summary-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 8px; }
.summary-legend button { border: none; background: transparent; padding: 4px 0; font: inherit; font-size: var(--fs-small); cursor: pointer; }
.summary-legend button[aria-pressed="false"] { opacity: .35; text-decoration: line-through; }
.summary-legend button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.summary-detail { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.summary-detail span { font-size: var(--fs-mini); }
.summary-tip { min-height: 36px; line-height: 1.6; }

/* ─── FormationsChart: ТФ-фильтр, плитки, график, тултип ─── */

/* ТФ-фильтр: ряд пилюль «Все · 1m · 5m · …» — та же семья, что чипы
   фильтров в колокольчике (.upd-chip) и чипы меню: UI-шрифт, прозрачная
   пилюля, актив — акцентная заливка. Свои моно-шрифт и color-mix-рамка
   убраны — ряд выбивался из общей стилистики сайта. */
.fm-tf-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.fm-tf-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font: 600 var(--fs-small)/1 var(--font);
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.fm-tf-chip:hover { color: var(--text-primary); border-color: var(--border-light); }
.fm-tf-chip.active {
  background: var(--accent-soft);
  color: var(--text-primary);
  border-color: var(--accent-soft-2);
}
.fm-tf-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Плитки вплотную к ТФ-ряду. Вторая половина селектора — потому что между
   рядом и плитками встал ползунок объёма: без неё соседство рвалось и плитки
   получали лишний отступ сверху (регрессия от вставки .fm-vol-filter). */
.fm-tf-row + .sm-tiles,
.fm-tf-row + .fm-vol-filter + .sm-tiles { margin-top: 0; }

/* ─── фильтр «минимальный объём за 24ч» в виджете «Формации» ───
   Ползунок — тот же самый виджет, что над правым списком монет
   (css/coinlist.css .vol-filter: трек-волосинка с акцентной заливкой,
   9px-точка, капс-подпись). Здесь только посадка в карточку настроек:
   без «панельной» подложки и боковых отступов списка, с воздухом снизу
   до плиток. Ничего своего в геометрии ползунка не заводим — иначе он
   разъехался бы с главным меню. */
.fm-vol-filter {
  padding: 0 0 12px;
  border-bottom: 0;
  background: transparent;
}
.fm-vol-filter .vf-cap { letter-spacing: 0.6px; }
/* ширина значения — общая с главным меню (css/coinlist.css .vf-val):
   своей геометрии у этого ползунка нет намеренно, см. комментарий выше */

/* ─── кнопка «Биржи» в конце ТФ-ряда + её поповер (общий мультивыбор) ───
   Сам поповер носит класс sm-tfdd-panel (сидемenu.css) — ровно тот же
   стиль выпадающего списка с чекбоксами, что ТФ-дропдаун в
   Настройки→Формации. Здесь только надбавки: z-слой поверх бокового меню
   и раздел «Биржи» фьючерсный — спот-оси в нём нет. */
.fm-ven-btn { margin-left: auto; }
.fm-ven-pop {
  z-index: 600;               /* поверх бокового меню (sm-tfdd-panel: 500) */
  min-width: 158px;
  max-width: min(320px, calc(100vw - 20px));
  user-select: none;
}
/* JS прячет поповер свойством hidden (venPop.hidden = true). Без этого
   правила display:flex из .sm-tfdd-panel перебивает UA-правило
   [hidden]{display:none} — окно оставалось висеть поверх меню после «закрытия». */
.fm-ven-pop[hidden] { display: none; }
/* «Все биржи» горит акцентом, когда включены все доступные площадки */
.fm-ven-pop .sm-tfdd-all-btn.on { color: var(--accent); font-weight: 600; }

/* плитки счётчиков: единая приборная панель с волосяными
   разделителями (язык строк-родителей сайта), а не россыпь карточек.
   Число — моно в цвете категории, подпись — с цветной точкой. */
.sm-tiles { grid-template-columns: repeat(4, 1fr) !important; }
.sm-tiles.fm-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.fm-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px 10px;
  position: relative;
  overflow: hidden;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
/* разделители — тенями, а не рамками: без задвоений на внешнем контуре
   и без серых заплат в неполном последнем ряду */
.sm-tiles.fm-tiles .fm-tile {
  box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
  align-items: center;
  text-align: center;
}
.sm-tiles.fm-tiles .fm-tile:hover { background: var(--menu-hover); }
.sm-tiles.fm-tiles .fm-tile.active { background: var(--accent-soft); }
.fm-tile .fm-tile-num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.fm-tile-label {
  display: block;
  max-width: 100%;
  font-size: var(--fs-mini);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── список формаций категории ─── */
.fm-list { margin-top: 10px; }
.fm-list.hidden { display: none; }
.fm-list-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 2px 8px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-primary);
}
.fm-list-head i { width: 10px; height: 10px; border-radius: 3px; }
.fm-list-close {
  margin-left: auto;
  border: none; background: transparent;
  color: var(--text-muted);
  font-size: 16px; line-height: 1;
  padding: 2px 8px;
  cursor: pointer;
  border-radius: 6px;
}
.fm-list-close:hover { color: var(--text-primary); background: var(--menu-hover); }
.fm-list-body {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fm-li {
  display: grid;
  grid-template-columns: 80px 44px 1fr 84px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
}
.fm-li:hover { background: var(--menu-hover); }
.fm-li b { font-weight: 700; font-size: var(--fs-small); display: flex; align-items: center; gap: 6px; min-width: 0; }
/* группа монеты: CSS-треугольник (вправо — свернуто, вниз — раскрыто) */
.fm-exp { width: 0; height: 0; flex-shrink: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--accent); }
/* заглушка для одиночных строк: место под треугольник, имена вровень с группами */
.fm-exp.ghost { visibility: hidden; }
.fm-li.open .fm-exp { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--accent); border-bottom: none; }
/* вложенная строка ТФ: метка вложенности */
.fm-li.sub .fm-li-submark { color: var(--text-muted); font-weight: 400; }
.fm-li-tf { font: 600 10px var(--font-mono); color: var(--text-muted); }
/* счётчик ТФ сгруппированной монеты — акцент актуальной темы */
.fm-li-tf.fm-grp-x { color: var(--accent); }
.fm-li-price { font-family: var(--font-mono); font-size: var(--fs-mini); color: var(--text-secondary); text-align: center; width: 100px; justify-self: end; }
.fm-li i { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-mini); color: var(--text-muted); text-align: center; }
.fm-list-cols {
  display: grid;
  grid-template-columns: 80px 44px 1fr 84px;
  gap: 10px;
  padding: 2px 10px 6px;
  font-size: var(--fs-mini);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--menu-hover);
  margin-bottom: 4px;
  /* липкая шапка внутри скролла: фон карточки, чтобы строки не просвечивали */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}
.fm-list-cols-price { text-align: center; width: 100px; justify-self: end; }
/* Колонка «Биржа»: появляется только когда в срезе есть уникальные
   листинги (нет пары на Binance). Пятая колонка втиснута между ценой
   и возрастом; без неё сетка остаётся прежней 80/44/1fr/84.
   Ширина 74px — под самое длинное название в Venues.TITLES
   («Hyperliquid», 11 знаков моно 9px = 59.4px + паддинги/рамка ≈ 71px):
   на 64px оно обрезалось многоточием. */
.fm-li.has-ven, .fm-list-cols.has-ven { grid-template-columns: 80px 44px 1fr 74px 84px; }
.fm-li-ven {
  font: 600 9px var(--font-mono);
  color: var(--text-secondary);
  text-align: center;
  padding: 2px 5px;
  border: 1px solid var(--menu-hover);
  border-radius: 6px;
  justify-self: center;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fm-list-cols-ven { text-align: center; }
/* «Время жизни» — кнопка сортировки: сброс дефолтных стилей кнопки,
   текст + стрелка прижаты вправо, как значения в строках */
.fm-list-cols-age {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 0;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.fm-list-cols-age:hover { color: var(--text-primary); }
/* стрелка сортировки — CSS-треугольник (не глиф шрифта: мелкий ▾
   выглядел как точка). Направление — классом desc/asc на кнопке */
.fm-sort-arr {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.fm-list-cols-age.desc .fm-sort-arr { border-top: 5px solid var(--text-secondary); }
.fm-list-cols-age.asc .fm-sort-arr { border-bottom: 5px solid var(--text-secondary); }
.fm-list-empty { padding: 10px 2px; font-size: var(--fs-small); color: var(--text-muted); }
.fm-list-empty { text-align: center; padding: 14px 0; }
.fm-list-host:empty { display: none; }

/* график */
/* биржевой срез: «Биржи: Bybit · OKX — 2 из 7» — как статус, но с акцентом,
   потому что это охват чисел, а не техническое состояние виджета */
.fm-ven-hint {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-family: var(--font-mono, inherit);
}
.fmchart-legend { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; }
.fm-leg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--menu-hover);
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-mini);
  color: var(--text-secondary);
  cursor: pointer;
  transition: opacity var(--transition), border-color var(--transition);
}
.fm-leg-chip i { display: inline-block; width: 14px; height: 0; margin-right: 6px; border-top: 2px solid transparent; border-radius: 2px; }
.fm-leg-chip span { color: var(--text-primary); }
.fm-leg-chip b { font: 600 11px var(--font-mono); color: var(--text-primary); margin-left: 2px; }
.fm-leg-chip[aria-pressed="false"] { opacity: .38; }
.fm-leg-chip[aria-pressed="false"] span { text-decoration: line-through; }
.fm-leg-chip:hover { border-color: var(--border-light); }

.fmchart-wrap { position: relative; }
.fmchart-canvas { display: block; width: 100%; height: 300px; }

/* тултип-карточка кроссхейра */
.fmchart-tipbox {
  position: absolute;
  top: 10px;
  left: 0;
  min-width: 130px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--popup-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 5;
}
.fmchart-tipbox.hidden { display: none; }
.fm-tip-time { font: 600 10px var(--font-mono); color: var(--text-muted); margin-bottom: 6px; letter-spacing: .3px; }
.fm-tip-row { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; font-size: var(--fs-mini); }
.fm-tip-row i { width: 8px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.fm-tip-row span { color: var(--text-secondary); }
.fm-tip-row b { margin-left: auto; font-family: var(--font-mono); font-weight: 600; padding-left: 14px; }

/* ─── компакт под ноутбуки: низкие экраны (график сползал вниз) ─── */
@media (max-height: 800px) {
  .fm-tile { padding: 10px 12px; }
  .fm-tile .fm-tile-num { font-size: 18px; }
  .sm-tiles { gap: 8px; }
  .fm-tf-row { margin-bottom: 8px; }
  .fmchart-legend { margin-bottom: 6px; }
  .fm-list { margin-top: 8px; }
  .fm-list-body { max-height: 220px; }
}
@media (max-height: 700px) {
  .fm-tile .fm-tile-num { font-size: 16px; }
  .fm-list-body { max-height: 180px; }
}