/* Скринер акций в облике Coinbase - тот же язык, что у скринера облигаций.
 * Общая основа (палитра, шрифт, заголовок, шапка, подвал) - в cb-skin.css,
 * панель поиска, пилюли и всплывающее окно фильтра - в cb-controls.css
 * (их же использует крипта). Здесь только своё: таблица акций.
 *
 * Прежний вид держался на «приподнятой плашке»: выбранное значение - белый
 * сегмент с тенью на серой подложке. Здесь выбранное говорит цветом, как в
 * облигациях: мягкая синяя заливка и синий текст. Пилюли показателей стоят
 * отдельными кнопками, а не сегментами одной ленты: их тринадцать, и лента
 * на всю ширину читалась как вкладки, хотя это независимые фильтры.
 */

/* ── таблица ───────────────────────────────────────────────────────────── */
html.cb main .results-head { margin: 0 2px 10px; font-size: 13px; color: var(--c-ink3); }
html.cb main #resultCount { font-size: 13px; }
html.cb main .stocks-tablewrap { border-radius: 20px; border-color: var(--line); background: var(--pnl); }
html.cb main .stocks-tablewrap::after { background: linear-gradient(to right, transparent, var(--pnl)); }
html.cb main .scroll { scrollbar-color: var(--line2) transparent; }
html.cb main .scroll::-webkit-scrollbar-track { background: transparent; }
html.cb main .scroll::-webkit-scrollbar-thumb { background: var(--line2); border: 3px solid var(--pnl); border-radius: 99px; }
html.cb main .hbar { height: 12px; margin: 6px 18px -4px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
html.cb main .hbar::-webkit-scrollbar { height: 6px; }
html.cb main .hbar::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px; }

html.cb main table { font-size: 14px; }
html.cb main thead th { background: var(--pnl); border-bottom-color: var(--line); font-size: 13px; font-weight: 500; color: var(--c-ink3); }
html.cb main .sort-btn { min-height: 50px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--c-ink3); }
html.cb main .sort-btn:hover { color: var(--c-ink); }
html.cb main th[aria-sort="ascending"] .sort-btn, html.cb main th[aria-sort="descending"] .sort-btn { color: var(--c-ink); font-weight: 600; }
html.cb main .sort-arrow { color: var(--acc); }
html.cb main .sort-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; border-radius: 8px; }
html.cb main thead th:first-child .th-inner { padding-left: 10px; }
html.cb main thead th .bc-q { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line2);
  background: none; color: var(--c-ink3); font-size: 9.5px; font-style: normal; font-weight: 700; }
html.cb main thead th .bc-q:hover, html.cb main thead th .bc-q:focus-visible { border-color: var(--acc);
  background: var(--acc-soft); color: var(--acc); }

html.cb main tbody td { height: 60px; padding: 10px 12px; border-bottom-color: var(--line); background: var(--pnl);
  color: var(--c-ink); font-weight: 450; }
html.cb main tbody tr:hover td { background: var(--pnl2); }
html.cb main tbody td:first-child { padding-left: 16px; }
html.cb main .stock-link { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
html.cb main .stock-link:hover { color: var(--acc); text-decoration: none; }
html.cb main .stock-meta { gap: 6px; margin-top: 2px; font-size: 12px; color: var(--c-ink3); }
/* Строка под названием «тикер · биржа · тип · отрасль» у мировых бумаг
   занимала 200-270 px при 118 px места и наезжала на колонку цены. Теперь:
   - на широком экране колонка шире (у таблицы там сотни пикселей запаса;
     до 1560 px расширение скромнее, иначе на ноутбуке 1440 появится
     горизонтальная прокрутка);
   - строка строго одна: биржа и отрасль сжимаются с многоточием, а если
     отрасли не хватает даже 52 px, она уходит на скрытую вторую строку
     целиком - вместо огрызка «Т…». У обрезанной полное имя в подсказке. */
@media (min-width: 1100px) {
  html.cb main tbody td:first-child { width: 228px; min-width: 228px; max-width: 228px; }
  html.cb main .stock-cell { width: 204px; }
}
/* С колонкой «Рост выручки» (25.09.2026) базовый вид на ноутбуке 1440 уходил
   в горизонтальную прокрутку на 106 px. Заголовки из двух слов переносятся
   на вторую строку, а до 1560 px ячейки чуть плотнее - и таблица снова
   помещается целиком. */
html.cb main thead th, html.cb main thead .sort-btn span { white-space: normal; }
html.cb main thead .sort-btn span { line-height: 1.2; }
@media (min-width: 1100px) and (max-width: 1559px) {
  html.cb main tbody td { padding-left: 9px; padding-right: 9px; }
  html.cb main tbody td:first-child { padding-left: 16px; }
  html.cb main thead .sort-btn { padding-left: 6px; padding-right: 6px; }
}
@media (min-width: 1560px) {
  html.cb main tbody td:first-child { width: 288px; min-width: 288px; max-width: 288px; }
  html.cb main .stock-cell { width: 260px; }
}
html.cb main .stock-meta { min-width: 0; height: 18px; overflow: hidden; flex-wrap: wrap; align-content: flex-start;
  white-space: nowrap; }
html.cb main .stock-meta > * { flex: none; }
html.cb main .stock-meta > .market-tag, html.cb main .stock-meta > .stock-sector { flex: 1 1 52px; max-width: max-content;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.cb main .kind-tag { padding: 0 6px; border-radius: 999px; background: var(--pnl2); color: var(--c-ink2);
  font-size: 11px; font-weight: 600; }
html.cb main .stock-mark { font-size: 12px; font-weight: 700; background: var(--pnl2); }
html.cb main .metric-main { font-size: 14px; font-weight: 500; color: var(--c-ink); }
html.cb main .metric-note { font-size: 11.5px; font-weight: 400; color: var(--c-ink3); margin-top: 2px; }
html.cb main .metric-state { font-size: 12.5px; font-weight: 500; }
html.cb main .event-date { font-size: 13.5px; font-weight: 500; }
html.cb main .event-label, html.cb main .report-label { font-size: 12px; font-weight: 400; color: var(--c-ink3); }
html.cb main .event-status { font-size: 11.5px; }
html.cb main .change.up { color: var(--c-up); }
html.cb main .change.down { color: var(--c-dn); }

html.cb main .table-state { border-radius: 20px; border-color: var(--line); }
html.cb main .table-state button { border-radius: 999px; border-color: var(--line2); font-weight: 600; }
html.cb main .data-notice { border-radius: 14px; font-weight: 500; }

/* Подсказки к колонкам и карточка точки на графике живут вне main. */
html.cb .bc-tip, html.cb .spark-tip, html.cb .stock-toast { font-family: 'Public Sans', system-ui, sans-serif !important; }
html.cb .bc-tip * , html.cb .spark-tip * { font-family: inherit !important; }
html.cb .spark-tip { border-radius: 12px; }

@media (max-width: 860px) {
  html.cb main .stock-controls { padding: 14px; border-radius: 16px; }
  html.cb main table { font-size: 13px; }
  html.cb main .stock-link { font-size: 13.5px; }
}
@media (max-width: 700px) {
  html.cb main .pill-group .metric-pill { min-height: 40px; }
  html.cb main .search-box input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html.cb main * { transition: none !important; }
}

/* ── телефон: список вместо таблицы (25.09.2026) ─────────────────────────
   Список и шторка - общие, lib/m-list.css; здесь только то, как на них
   садится именно этот скринер. Панель фильтров перестаёт быть карточкой с
   подписями над полями: поиск на всю ширину и под ним одна лента пилюль,
   первым экраном человек видит акции, а не форму. Окно показателя
   становится нижней шторкой. Новое пишется на токенах /lib/cf/tokens.css. */
.m-lbl { display: none; }
@media (max-width: 767px) {
  html.cb main { padding-left: var(--cf-space-16); padding-right: var(--cf-space-16); }
  html.cb main .stocks-head { margin-bottom: var(--cf-space-14); gap: var(--cf-space-8); }
  html.cb main .stocks-head .sub { font-size: 14.5px; line-height: 1.5; color: var(--cf-ink-2); }
  html.cb main .stocks-head .trust-line { align-self: flex-start; text-align: left; }

  html.cb main .stock-controls {
    margin: 0 calc(-1 * var(--cf-space-16)) var(--cf-space-12); padding: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  html.cb main .controls-top { display: block; padding: 0 var(--cf-space-16); }
  html.cb main .controls-top .field-block, html.cb main .controls-top .search-field > label { display: none; }
  html.cb main .search-box input { min-height: var(--cf-h-control); font-size: 16px; }
  /* Кнопки валюты нужны только с мировыми рынками - встают отдельной
     строкой под лентой, пустая строка не занимает места. */
  html.cb main .controls-actions { margin-top: var(--cf-space-10); }
  html.cb main .controls-actions:not(:has(> :not([hidden]))) { display: none; }

  html.cb main .metric-pills { display: block; margin-top: var(--cf-space-10); }
  html.cb main .metric-pills .pills-label { display: none; }
  /* display:flex обязателен: базовый стиль даёт ленте inline-flex, и она
     растягивалась на все 1 460 px пилюль - прокрутки не было, хвост просто
     обрезался краем экрана. */
  html.cb main #stockControls .pill-group {
    display: flex; width: auto; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: var(--cf-space-2) var(--cf-space-16); scroll-padding: 0 var(--cf-space-16);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  html.cb main #stockControls .pill-group::-webkit-scrollbar { display: none; }
  html.cb main #stockControls .pill-group > * { flex: none; }
  /* Все показатели доступны: на десктопной ширине ниже 560 px их прятали,
     а на телефоне лента прокручивается и места хватает всем. */
  html.cb main #stockControls .pill-group .metric-pill[data-pill] { display: inline-flex; }
  html.cb main #stockControls .pill-group .metric-pill { min-height: var(--cf-h-pill); padding: 0 var(--cf-space-14); font-size: 14px; }

  /* Рынок, сектор и капитализация в ленте: пустое условие называет себя,
     заданное - показывает значение. У рынка значение есть всегда. */
  html.cb main #stockControls .pill-group .field-button.m-moved {
    min-height: var(--cf-h-pill); width: auto; padding: 0 var(--cf-space-12) 0 var(--cf-space-14);
    border: 1px solid var(--cf-line-strong); border-radius: var(--cf-radius-pill);
    background: var(--cf-surface); color: var(--cf-ink); font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; gap: var(--cf-space-6);
  }
  html.cb main #stockControls .pill-group .field-button.m-moved .m-lbl { display: inline; }
  html.cb main #stockControls .pill-group .field-button.m-moved b { font-size: 14px; font-weight: 600; }
  html.cb main #stockControls .pill-group .field-button.m-moved:not(.is-active) b { display: none; }
  html.cb main #stockControls .pill-group .field-button.m-moved[data-pill="market"] .m-lbl,
  html.cb main #stockControls .pill-group .field-button.m-moved[data-pill="sector"].is-active .m-lbl { display: none; }
  html.cb main #stockControls .pill-group .field-button.m-moved[data-pill="market"] b { display: inline; color: var(--cf-ink); }
  html.cb main #stockControls .pill-group .field-button.m-moved.is-active { border-color: transparent; background: var(--cf-accent-soft); }
  html.cb main #stockControls .pill-group .field-button.m-moved.is-active b,
  html.cb main #stockControls .pill-group .field-button.m-moved[data-pill="market"].is-active b { color: var(--cf-accent); }
  html.cb main #stockControls .pill-group .field-button.m-moved::after { position: static; margin-left: var(--cf-space-2); }
  html.cb main #stockControls .pill-group .reset-inline.m-moved {
    display: inline-flex; align-items: center; gap: var(--cf-space-4);
    min-height: var(--cf-h-pill); padding: 0 var(--cf-space-14) 0 var(--cf-space-10);
    border: 1px solid var(--cf-line-strong); border-radius: var(--cf-radius-pill);
    background: var(--cf-surface-2); color: var(--cf-ink); font-size: 14px; font-weight: 600;
  }
  html.cb main #stockControls .pill-group .reset-inline.m-moved[hidden] { display: none; }
  html.cb main #stockControls .pill-group .reset-inline.m-moved::before {
    content: ""; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html.cb main .pill-popover:focus { outline: none; }

  html.cb main .results-head {
    flex-direction: row; align-items: center; justify-content: space-between; gap: var(--cf-space-12);
    margin: 0 0 var(--cf-space-10);
  }
  html.cb main #resultCount { min-width: 0; color: var(--cf-ink-2); font-size: 13.5px; }
  html.cb main #viewDescription { display: none; }

  html.cb main .stocks-tablewrap { border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; }
  html.cb main .stocks-tablewrap::after, html.cb main .stocks-tablewrap .scroll,
  html.cb main .stocks-tablewrap .hbar, html.cb main .table-scroll-hint { display: none; }

  html.cb main .seo-block, html.cb .seo-block { margin-left: 0; margin-right: 0; }
}

/* Строка итога с «Моими фильтрами» и «Поделиться» (lib/screen-share.js) сама
   пишет число бумаг и условия, поэтому строка «Найдено N акций» под ней на
   компьютере лишняя (на телефоне в ней кнопка сортировки, там она остаётся).
   Таблица ровно на экран
   (Женя, 28.09.2026, как у облигаций): 86 = отступ под шапкой 12 + строка
   итога 32 и 10 под ней + рамка и полоса прокрутки 16 + отступ снизу 16. */
@media (min-width: 768px) {
  html.cb main .ss-bar ~ .results-head { display: none; }
  html.cb main .ss-bar ~ .stocks-tablewrap .scroll { max-height: max(360px, calc(100dvh - var(--ss-hdr, 71px) - 86px)); }
  /* Верхнюю полосу прокрутки ui-scroll.js прячет, когда таблица влезает по
     ширине (узкие колонки после фильтра): тогда её 14 пикселей отдаём таблице. */
  html.cb main .ss-bar ~ .stocks-tablewrap:has(> .hbar[style*="none"]) .scroll { max-height: max(360px, calc(100dvh - var(--ss-hdr, 71px) - 72px)); }
}