/* ===== COMPARE.CSS =====
   Сравнение эмитентов (/board) и бумаг (главная) — до 5 штук, см.
   public/js/compare.js. Мокап согласован 2026-08-31
   (https://claude.ai/code/artifact/d5a1be3c-e09a-47d6-9627-c673cb425f7e).
   Проверено на коллизии bare-класса (grep по всем public/css/*.css) перед
   добавлением - .cmp-* нигде не занят. */

/* ---- переключатель "в сравнение" — тот же визуальный язык, что
   .favorite-star (table.css), но свой акцентный цвет (--accent), не
   --star: это не "избранное", отдельное понятие рядом в той же строке. ---- */
.cmp-toggle {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1.4px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
}

.cmp-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.cmp-toggle svg {
    width: 11px;
    height: 11px;
}

.cmp-toggle svg rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.cmp-toggle.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.cmp-toggle.is-active svg rect {
    fill: currentColor;
    stroke: currentColor;
}

.cmp-toggle[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* Выбранная для сравнения строка карточки риска (.yr-row, board.css) /
   строка главной таблицы - тот же accent-soft, что и .row.expanded
   (table.css), но своим классом: это независимые состояния, могут
   совпасть на одной строке. */
.yr-row.cmp-selected-row {
    background: var(--accent-soft);
    margin: 0 -10px;
    padding: 9px 10px;
    border-radius: 8px;
    border-bottom-color: transparent;
}

.bonds-table tbody tr.row.cmp-selected-row {
    background: var(--accent-soft);
}

/* ---- секция сравнения (пустое состояние + таблица) ---- */
.cmp-section {
    margin: 16px 0;
    scroll-margin-top: 16px;
}

.cmp-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.cmp-section-head h2 {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0;
}

.cmp-section-head .hint {
    font-size: 11px;
    color: var(--text-faint);
}

.cmp-empty {
    border: 1.5px dashed var(--border-strong);
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    color: var(--text-faint);
    font-size: 12.5px;
    line-height: 1.6;
}

.cmp-empty b {
    color: var(--text-muted);
}

/* .cmp-table-wrap не скроллит сам - скролл на вложенном .cmp-scroll,
   чтобы .cmp-fade (затухающий край, мобильная раскладка ниже) мог быть
   несдвигаемым соседом, а не уезжать вместе с содержимым. */
.cmp-table-wrap {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cmp-table th,
.cmp-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td {
    border-bottom: none;
}

.cmp-table thead th {
    background: var(--surface-2);
    vertical-align: top;
}

.cmp-table .cmp-row-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-faint);
    white-space: nowrap;
    background: var(--surface);
    position: sticky;
    left: 0;
}

.cmp-table thead .cmp-row-label {
    background: var(--surface-2);
}

.cmp-table td {
    min-width: 128px;
}

.cmp-col-head {
    min-width: 150px;
}

.cmp-col-head-inner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cmp-col-head-inner .bond-logo-icon {
    margin-top: 1px;
}

.cmp-col-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}

.cmp-col-sub {
    font-size: 10px;
    color: var(--text-faint);
    margin-top: 2px;
}

.cmp-remove {
    margin-left: auto;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmp-remove:hover {
    background: var(--poor-soft);
    color: var(--poor);
}

/* Максимум в строке (сейчас применяется только к YTM бумаг - см.
   index-compare.js) - информационная стрелка, не оценка "хорошо/плохо". */
.cmp-best {
    position: relative;
}

.cmp-best::before {
    content: '▲';
    font-size: 7px;
    color: var(--good);
    margin-right: 4px;
    position: relative;
    top: -1px;
}

.cmp-sig-cell {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.cmp-sig-text {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Короткая (2-3 слова) версия текста сигнала - см. board-compare.js
   SIG_SHORT. Полная версия (.cmp-sig-text) остаётся в разметке и видна на
   десктопе, где на неё есть место (уже проверено на реальных данных);
   переключение видимости - только в мобильном блоке ниже. */
.cmp-sig-short {
    display: none;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Короткая версия подписи строки (см. cmp-label-full/-short в
   board-compare.js/index-compare.js) - та же логика: полная подпись видна
   на десктопе, короткая - только в мобильном блоке ниже. */
.cmp-label-short {
    display: none;
}

/* ---- плавающий трей ---- */
.cmp-tray {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: var(--shadow);
    padding: 8px 10px 8px 16px;
    z-index: 40;
    max-width: calc(100% - 32px);
}

.cmp-tray[hidden] {
    display: none;
}

.cmp-tray-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.cmp-tray-label .n {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

.cmp-tray-chips {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    max-width: 320px;
}

.cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 4px 3px 10px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.cmp-chip button {
    border: 0;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 12px;
}

.cmp-chip button:hover {
    background: var(--poor-soft);
    color: var(--poor);
}

.cmp-tray-cta {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-contrast);
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    white-space: nowrap;
}

.cmp-tray-cta:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.cmp-toast {
    position: fixed;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    z-index: 41;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.cmp-toast.show {
    opacity: 1;
}

/* Затухающий градиент у правого края .cmp-scroll - сигнал "дальше есть
   колонки" без стрелок/подписей, гаснет сам через wireScrollFade
   (compare.js), когда докрутили до конца. Скрыт на десктопе (там таблица
   auto-layout и все выбранные обычно видно без скролла) - см. мобильный
   блок ниже, где включается вместе с фиксированной шириной колонок. */
.cmp-fade {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
    transition: opacity .15s;
}

.cmp-fade.hidden {
    opacity: 0;
}

@media (max-width: 640px) {
    .cmp-tray-chips {
        max-width: none;
    }

    /* Мокап 2026-08-31 (https://claude.ai/code/artifact/29847325-da2d-4841-8123-77323e68b58b),
       три захода по фидбеку: (1) карусель "по одному объекту" отклонена -
       сравнение должно показывать несколько объектов одновременно; (2)
       крестик удаления - над названием, не внахлёст; (3) крестик - по
       центру, не прижат к краю (справа "раздувал" колонку); (4) длинные
       названия эмитентов - перенос по словам (и, где слово само длиннее
       строки, внутри слова), не однострочное многоточие; (5) текст
       сигнала внутри таблицы - перенос по словам, не молчаливый overflow
       (флекс-потомок без min-width:0 не сжимался и вылезал за колонку -
       тот же трюк, что overflow_axis_leak_pitfall, только для flex, не
       grid). Итог - таблица остаётся таблицей (несколько бумаг/эмитентов
       видно рядом), но: колонки фиксированной ширины (табличная
       раскладка целиком под colgroup из board-compare.js/
       index-compare.js), видно ~2 целиком + кусок 3-й (.cmp-fade
       подсказывает, что дальше есть ещё), длинные подписи строк и текст
       сигналов заменены на короткие (.cmp-label-short/.cmp-sig-short),
       полные версии остаются в title (тап-и-удержание). */
    .cmp-fade {
        display: block;
    }

    .cmp-col-label-el {
        width: 56px;
    }

    .cmp-col-item-el {
        width: 108px;
    }

    .cmp-table {
        table-layout: fixed;
        font-size: 11px;
    }

    .cmp-table th,
    .cmp-table td {
        padding: 5px 6px;
        line-height: 1.25;
    }

    .cmp-table thead th {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .cmp-row-label {
        font-size: 8.5px;
        line-height: 1.2;
        white-space: normal;
    }

    .cmp-label-full {
        display: none;
    }

    .cmp-label-short {
        display: block;
    }

    /* Крестик - своя строка НАД названием, по центру (не сбоку, см.
       правку (3) выше). Логотип бумаги скрыт - при такой ширине колонки
       вместе с центрированным именем он больше мешает, чем помогает
       опознать бумагу, а имя и так короткое (тикер MOEX). */
    .cmp-col-head-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px;
    }

    .cmp-col-head-inner .bond-logo-icon {
        display: none;
    }

    .cmp-remove {
        order: -1;
        margin: 0 0 1px;
    }

    /* Перенос по словам, а где слово само длиннее строки ("Новосибирск-
       автодор") - перенос внутри слова, вместо однострочного многоточия
       (было хуже читаемо, чем перенос - правка (4) выше). До 3 строк,
       дальше - многоточие как крайний случай; полное официальное
       название (с формой собственности) - в title самого <th>, см.
       shortEmitterName() в board-compare.js. */
    .cmp-col-name {
        width: 100%;
        font-size: 10.5px;
        overflow-wrap: anywhere;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cmp-col-sub {
        font-size: 9px;
    }

    .sig-chip {
        width: 14px;
        height: 14px;
        font-size: 8px;
    }

    .cmp-sig-cell {
        gap: 4px;
    }

    /* min-width:0 - без него флекс-потомок по умолчанию min-width:auto
       (не может сжаться уже своего "неразрывного" контента) и не
       переносится по словам, а вылезает за границу фиксированной
       колонки - правка (5) выше. На десктопе не нужно: там колонка
       auto-layout и просто растёт под контент. */
    .cmp-sig-text,
    .cmp-sig-short {
        min-width: 0;
    }

    .cmp-sig-text {
        display: none;
    }

    .cmp-sig-short {
        display: block;
    }
}

/* Тот же брейкпоинт и та же цифра (72px высота пилюли + 12px зазора =
   84px), что уже использует .scroll-top-btn (index.css) для той же
   проблемы - .bottom-nav (mobile-nav.css) плавает fixed, bottom:
   env(safe-area-inset-bottom), z-index:60, на всём ≤768px. Без этой
   поправки трей садится прямо на пилюлю (см. чат 2026-08-31, замечено
   на мокапе до внедрения). */
@media (max-width: 768px) {
    .cmp-tray {
        left: 12px;
        right: 12px;
        transform: none;
        bottom: calc(84px + env(safe-area-inset-bottom));
        z-index: 55;
    }

    .cmp-toast {
        bottom: calc(146px + env(safe-area-inset-bottom));
    }
}