/* ============================================================
   P2P-стакан объявлений — переиспользуемый виджет (js/ui/orderbook/).

   Свой корень токенов и СВОЯ тема: панель может стоять на любой странице
   портала, и её тема переключается в собственной шапке, независимо от темы
   оболочки. Поэтому ни одна переменная проекта здесь не используется — все
   цвета объявлены на .obk и продублированы на .obk-layer: оверлеи живут в
   body и переменных страницы не получают.

   Числа (44 / 31 / 19 / 27, 244px, 62/76px, плотности) — из документации
   макета «P2P Стакан» от 26.08.2026. Менять их вслепую нельзя: на них стоит
   расчёт ширины панели и порога мобильного вида в index.js.
   ============================================================ */

.obk,
.obk-layer {
  /* Светлая тема — значения по умолчанию. */
  --obk-panel: #ffffff;
  --obk-ctl: rgba(15, 23, 42, 0.055);
  --obk-line: rgba(15, 23, 42, 0.07);
  --obk-line2: rgba(15, 23, 42, 0.12);
  --obk-fg: #111827;
  --obk-fg2: #4b5565;
  --obk-fg3: #8a94a6;
  --obk-hov: rgba(15, 23, 42, 0.045);
  --obk-mine: #a4670a;
  --obk-mineBg: rgba(245, 182, 42, 0.16);
  --obk-mer1: rgba(99, 102, 241, 0.35);
  --obk-mer2: #6366f1;
  --obk-sell: #d0402f;
  --obk-buy: #0e8a5a;
  --obk-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 44px -16px rgba(15, 23, 42, 0.2);
}

.obk[data-theme="dark"],
.obk-layer[data-theme="dark"] {
  --obk-panel: #14181f;
  --obk-ctl: rgba(255, 255, 255, 0.07);
  --obk-line: rgba(255, 255, 255, 0.07);
  --obk-line2: rgba(255, 255, 255, 0.12);
  --obk-fg: #eef1f6;
  --obk-fg2: #9ba7b8;
  --obk-fg3: #6b7686;
  --obk-hov: rgba(255, 255, 255, 0.05);
  --obk-mine: #f5b62a;
  --obk-mineBg: rgba(245, 182, 42, 0.12);
  --obk-mer1: rgba(129, 140, 248, 0.4);
  --obk-mer2: #818cf8;
  --obk-sell: #fb7185;
  --obk-buy: #34d399;
  --obk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 44px -16px rgba(0, 0, 0, 0.55);
}

/* ---------- плотность: строка, кегль и ширина колонки разом ----------

   Высоты строки здесь НЕТ намеренно. Раскладка ленты арифметическая: позиции
   строк считает rows.js, и высота обязана быть одним числом, иначе строки
   разъедутся с собственным контейнером. Живёт она в DENSITY (js/ui/orderbook/
   index.js) и оттуда же ставится переменной --obk-row на корень панели. */

.obk[data-density="normal"] {
  --obk-fs: 12.5px;
  --obk-fsPrice: 13px;
  --obk-priceW: 62px;
  --obk-limW: 76px;
}
.obk[data-density="compact"] {
  --obk-fs: 11px;
  --obk-fsPrice: 11.5px;
  --obk-priceW: 62px;
  --obk-limW: 76px;
}
.obk[data-density="ultra"] {
  --obk-fs: 9.5px;
  --obk-fsPrice: 10px;
  --obk-priceW: 54px;
  --obk-limW: 66px;
}

/* ---------- панель ---------- */

.obk {
  --obk-h: max(340px, calc(100vh - 80px));

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: var(--obk-w, 491px);
  height: var(--obk-h);
  overflow: hidden;
  border: 1px solid var(--obk-line2);
  border-radius: 12px;
  background: var(--obk-panel);
  color: var(--obk-fg);
  font-family: "Golos Text", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--obk-fs);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.obk *,
.obk-layer * {
  box-sizing: border-box;
}

.obk [hidden],
.obk-layer [hidden] {
  display: none !important;
}

/* ---------- шапка и фильтры ---------- */

.obk-head,
.obk-filters {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  border-bottom: 1px solid var(--obk-line);
}

.obk[data-narrow="1"] .obk-head,
.obk[data-narrow="1"] .obk-filters {
  height: auto;
  flex-wrap: wrap;
  padding: 7px 10px;
  row-gap: 6px;
}

.obk-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: var(--obk-ctl);
  color: var(--obk-fg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.obk-pair {
  gap: 2px;
  padding: 0 4px;
}

.obk-pair__sep {
  color: var(--obk-fg3);
}

.obk-pill__b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.obk-pill__b:hover,
.obk-pill__b.is-open {
  background: var(--obk-panel);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

/* Пилюля порядка: режим выбирают меню, состояний disabled у неё нет. */
.obk-caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.45;
}

.obk-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--obk-ctl);
}

.obk-seg button {
  height: 22px;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--obk-fg3);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.obk-seg button.is-active {
  background: var(--obk-panel);
  color: var(--obk-fg);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.obk-amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--obk-ctl);
}

.obk-amount input {
  width: 84px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--obk-fg);
  font: inherit;
  font-size: 12px;
  outline: none;
}

.obk-amount input::placeholder {
  color: var(--obk-fg3);
}

.obk-amount__cur {
  color: var(--obk-fg3);
  font-size: 12px;
}

.obk-toggle {
  height: 26px;
  min-height: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: var(--obk-ctl);
  color: var(--obk-fg2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.obk-toggle.is-active {
  background: color-mix(in srgb, var(--obk-mer2) 11%, transparent);
  color: var(--obk-mer2);
}

/* ---------- тело: колонки и корешок ---------- */

.obk-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.obk-pane {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: var(--obk-col, 244px);
  min-width: 0;
  min-height: 0;
}

.obk-pane + .obk-pane {
  border-left: 1px solid var(--obk-line);
}

/* Корешок скрытой колонки: панель ужимается, оставшаяся не растягивается. */
.obk-rail {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--obk-line);
  background: var(--obk-ctl);
  color: var(--obk-fg2);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.obk-rail:hover {
  color: var(--obk-fg);
}

.obk-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.04em;
}

.obk-rail[data-rail="buy"] {
  border-right: 0;
  border-left: 1px solid var(--obk-line);
}

/* ---------- заголовок колонки ---------- */

.obk-switch {
  display: flex;
  flex: 0 0 22px;
  gap: 2px;
  margin: 4px 6px 0;
  padding: 2px;
  border-radius: 8px;
  background: var(--obk-ctl);
}

.obk-switch button {
  flex: 1 1 0;
  height: 18px;
  min-height: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--obk-fg3);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.obk-switch button.is-active {
  background: var(--obk-panel);
  color: var(--obk-fg);
  font-weight: 600;
}

.obk-paneHead {
  display: flex;
  flex: 0 0 31px;
  align-items: center;
  gap: 6px;
  padding: 0 6px 0 10px;
}

.obk-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--obk-fg3);
}

.obk-pane[data-side="sell"] .obk-dot { background: var(--obk-sell); }
.obk-pane[data-side="buy"] .obk-dot { background: var(--obk-buy); }

.obk-paneHead__t {
  font-weight: 600;
}

.obk-paneHead__count {
  color: var(--obk-fg3);
  font-size: 11px;
}

/* «Своё» — указатель на наше объявление. Появился вместе с показом ВСЕЙ книги:
   строк стало под две тысячи, и подсветки своей строки мало, если до неё надо
   доскроллить тысячу чужих. */
/* «Наверх» — перемотка колонки к лучшим курсам. Прячется ВИДИМОСТЬЮ, а не
   display: шапка колонки флексовая, и исчезающий бокс сдвигал бы счётчик и
   «своё» вбок при каждой прокрутке. Переход перечислен поимённо: `all` вернул
   бы мерцание через подсветку наведения. */
.obk-paneHead__up {
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--obk-fg3);
  font: inherit;
  font-size: 11px;
  line-height: 15px;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity 140ms ease, background-color 140ms ease, color 140ms ease;
}

.obk-paneHead__up.is-on {
  visibility: visible;
  opacity: 1;
}

.obk-paneHead__up:hover {
  background: var(--obk-ctl);
  color: var(--obk-fg);
}

.obk-paneHead__own {
  height: 15px;
  min-height: 0;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: var(--obk-mineBg);
  color: var(--obk-mine);
  font: inherit;
  font-size: 10px;
  line-height: 15px;
  cursor: pointer;
}

.obk-paneHead__own:hover {
  filter: brightness(1.15);
}

.obk-paneHead__best {
  margin-left: auto;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.obk-pane[data-side="sell"] .obk-paneHead__best { color: var(--obk-sell); }
.obk-pane[data-side="buy"] .obk-paneHead__best { color: var(--obk-buy); }

.obk-paneHead__x {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--obk-fg3);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.obk-paneHead__x:hover {
  background: var(--obk-ctl);
  color: var(--obk-fg);
}

.obk-caps {
  display: flex;
  flex: 0 0 19px;
  align-items: center;
  color: var(--obk-fg2);
  font-size: calc(var(--obk-fs) - 1.5px);
}

.obk-caps span:nth-child(1) {
  flex: 0 0 calc(var(--obk-priceW) + 12px);
  padding-left: 12px;
}
.obk-caps span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}
.obk-caps span:nth-child(3) {
  flex: 0 0 var(--obk-limW);
  padding-right: 6px;
  text-align: right;
}

/* ---------- лента объявлений ---------- */

/* Невидимый и независимый скролл: полоса не рисуется, ширина содержимого не
   меняется, прокрутка одной колонки не двигает другую. */
.obk-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.obk-list::-webkit-scrollbar {
  display: none;
}

/* Лента абсолютная: строки стоят на transform внутри контейнера известной
   высоты (см. rows.js). Смена порядка становится анимацией, а не перестановкой
   узлов, и ни появление, ни уход не дёргают прокрутку. */
.obk-listInner {
  position: relative;
}

.obk-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  height: var(--obk-row);
  cursor: default;

  /* Свойства ПЕРЕЧИСЛЕНЫ поимённо. `all` анимировал бы и подсветку наведения,
     и подложку своего аккаунта — то самое мерцание, которое макет запрещает,
     вернулось бы через чёрный ход. */
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms linear;
}

/* Рождение и уход — только прозрачностью. Уходящая строка своё место уже
   отдала: соседи доезжают, она гаснет там, где стояла, и никого не двигает. */
.obk-row.is-enter {
  opacity: 0;
}

.obk-row.is-leave {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .obk-row {
    transition: none;
  }
}

/* Подсветка наведения — только цветом и только через CSS: список при этом не
   перерисовывается, а размер строки не меняется (иначе список «убегает»
   из-под курсора, ловушка 19.08.2026). Внутренняя тень, а не background:
   иначе она стёрла бы подложку помеченного аккаунта. */
.obk-row:hover {
  box-shadow: inset 0 0 0 999px var(--obk-hov);
}

.obk-row.is-mine {
  background: var(--obk-mineBg);
}

/* Разделитель групп: 1px после каждых N объявлений, без номеров и подписей.
   Промежуток под него даёт РАСКЛАДКА (GROUP_GAP в rows.js), а не margin:
   у абсолютной строки внешних отступов нет. */
.obk-row.is-cut::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -4px;
  left: 10px;
  height: 1px;
  background: var(--obk-line);
}

.obk-row__bar {
  flex: 0 0 2px;
  align-self: stretch;
  margin: 3px 5px;
  border-radius: 2px;
  background: transparent;
}

/* Блок-мерчант заметнее мерчанта — решение владельца 27.08.2026. Токены mer1 и
   mer2 это ОТТЕНКИ (бледный и плотный), а не номера ступеней: связывать их с
   data-tier по совпадению цифры было бы ловушкой. */
.obk-row__bar[data-tier="1"] { background: var(--obk-mer2); }
.obk-row__bar[data-tier="2"] { background: var(--obk-mer1); }

.obk-row__price {
  flex: 0 0 var(--obk-priceW);
  font-size: var(--obk-fsPrice);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.obk-pane[data-side="sell"] .obk-row__price { color: var(--obk-sell); }
.obk-pane[data-side="buy"] .obk-row__price { color: var(--obk-buy); }

.obk-row__nick {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.obk-row__nick.is-mine {
  color: var(--obk-mine);
  font-weight: 600;
}

.obk-row__nick.is-tagged {
  font-weight: 600;
}

/* Лимиты — В ОДНУ строку и без переносов: колонка 76px, а диапазон вида
   «1,233млн–321,3к» в неё не влезает и уезжал второй строкой поверх соседней
   записи. Полные числа всё равно показывает карточка по наведению. */
.obk-row__lim {
  flex: 0 0 var(--obk-limW);
  overflow: hidden;
  padding-right: 6px;
  color: var(--obk-fg2);
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* В мобильном виде колонка одна, и крестик её бы просто потерял: корешка,
   которым её возвращают, там нет. */
.obk[data-mobile="1"] .obk-paneHead__x {
  display: none;
}

/* Пустая колонка без объяснения читается как сбой портала — говорим причину. */
.obk-empty {
  padding: 14px 12px;
  color: var(--obk-fg3);
  font-size: calc(var(--obk-fs) - 0.5px);
  line-height: 1.45;
  text-align: center;
}

/* ---------- подвал ---------- */

.obk-foot {
  display: flex;
  flex: 0 0 27px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-top: 1px solid var(--obk-line);
  color: var(--obk-fg3);
  font-size: 11px;
}

.obk-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.obk-legend .obk-row__bar {
  flex: 0 0 2px;
  height: 10px;
  margin: 0 3px 0 0;
  align-self: auto;
}

.obk-foot__state {
  margin-left: auto;
  white-space: nowrap;
}

.obk-foot__state[data-bad="1"] {
  color: var(--obk-sell);
}

/* ---------- оверлеи в body ---------- */

.obk-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  /* Этаж слоя ОБЯЗАТЕЛЕН, и вот почему.
     position: fixed сам по себе создаёт контекст наложения. Слой без z-index
     получал уровень auto, его дети со своими 10040+ оставались ВНУТРИ этого
     контекста, а .content у оболочки стоит на z-index: 1 с transform — то есть
     выше. Оверлей уезжал под страницу, и заметно это было только там, где он
     накрывает саму панель: меню метки по правому клику открывалось за стаканом.
     Переезд слоя в body от этого не спасал — спасает этаж. */
  z-index: 10040;
  color: var(--obk-fg);
  font-family: "Golos Text", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.obk-shield {
  position: fixed;
  inset: 0;
  z-index: 10040;
}

.obk-menu {
  position: fixed;
  z-index: 10041;
  padding: 4px;
  border: 1px solid var(--obk-line2);
  border-radius: 9px;
  background: var(--obk-panel);
  box-shadow: var(--obk-shadow);
}

.obk-menu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  min-height: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--obk-fg2);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.obk-menu__item:hover {
  background: var(--obk-ctl);
}

.obk-menu__item.is-active {
  color: var(--obk-fg);
  font-weight: 600;
}

.obk-menu__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
}

.obk-menu__item.is-active .obk-menu__dot {
  background: var(--obk-mer2);
}

.obk-tagMenu {
  padding: 8px;
}

.obk-tagMenu__nick {
  overflow: hidden;
  margin-bottom: 7px;
  color: var(--obk-fg);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.obk-tagMenu__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.obk-swatch {
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.obk-swatch.is-active {
  box-shadow: 0 0 0 2px var(--obk-panel), 0 0 0 4px var(--obk-fg2);
}

.obk-tagMenu__clear {
  width: 100%;
  height: 26px;
  min-height: 0;
  margin-top: 7px;
  border: 0;
  border-radius: 7px;
  background: var(--obk-ctl);
  color: var(--obk-fg2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.obk-card {
  position: fixed;
  z-index: 10042;
  display: flex;
  width: 296px;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--obk-line2);
  border-radius: 12px;
  background: var(--obk-panel);
  box-shadow: var(--obk-shadow);
  font-size: 12.5px;
  pointer-events: none;
}

.obk-card__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.obk-card__nick {
  overflow: hidden;
  color: var(--obk-fg);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.obk-card__tier {
  margin-left: auto;
  color: var(--obk-fg3);
  font-size: 11px;
  white-space: nowrap;
}

/* Та же лестница, что у полоски: обычный (fg3) → мерчант (fg2) →
   блок-мерчант (mer2). Разойдись эти два места — одна строка показывала бы
   яркую полоску блок-мерчанта и блёклую подпись. */
.obk-card__tier[data-tier="1"] { color: var(--obk-mer2); }
.obk-card__tier[data-tier="2"] { color: var(--obk-fg2); }

.obk-card__rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.obk-card__row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.obk-card__row span {
  color: var(--obk-fg3);
}

.obk-card__row b {
  color: var(--obk-fg);
  font-weight: 500;
}

/* Условия мерчанта бывают на пол-экрана. Обрезаем СТРОКАМИ и с многоточием:
   жёсткий срез по высоте посреди буквы читается как поломка вёрстки. */
.obk-card__terms {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  color: var(--obk-fg2);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.obk-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.obk-chip {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--obk-ctl);
  color: var(--obk-fg2);
  font-size: 11px;
}

/* Тач-высота кнопок оболочки (mobile.css поднимает всем button min-height:40px)
   раздула бы сегменты 18–26px в блоки в пол-экрана. Отбиваем СПЕЦИФИЧНОСТЬЮ и
   ВНЕ media-запроса — там выигрывает не порядок файлов, а вес селектора
   (ловушка 23.08.2026, шкалы «Приёма v2»). */
.obk button,
.obk-layer button {
  min-height: 0;
}