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

/* ── заголовок и строка свежести ───────────────────────────────────────── */
html.cb main .stocks-head { margin-bottom: 24px; align-items: flex-end; }
html.cb main .sub { font-size: 15px; line-height: 1.55; max-width: 110ch; }
html.cb main .sub a { color: var(--acc); }
html.cb main .sub a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Точка, «live» и источник - одна строка. В прежнем виде они вставали
   столбиком: блок выравнивался вправо и переносил каждый кусок отдельно. */
html.cb main .trust-line { display: inline-flex; flex: none; flex-wrap: nowrap; white-space: nowrap;
  gap: 6px; font-size: 13px; font-weight: 500; color: var(--c-ink3); text-align: right; }
html.cb main .trust-line .live { color: var(--c-up); font-weight: 600; }
html.cb main .trust-line .live-src { margin-left: 0; font-size: 13px; color: var(--c-ink3); }
html.cb main .live-dot { width: 7px; height: 7px; background: var(--c-up); box-shadow: 0 0 0 3px var(--c-up-soft); }

/* ── верхние поля ──────────────────────────────────────────────────────── */
html.cb main .stock-controls { margin-bottom: 18px; background: var(--pnl); border: 1px solid var(--line);
  border-radius: 20px; padding: 18px 20px 20px; }
html.cb main .controls-top { gap: 12px; }
html.cb main .search-field > label, html.cb main .field-block > label {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--c-ink3); }
html.cb main .search-field, html.cb main .field-block { gap: 7px; }
html.cb main .search-box svg { left: 14px; color: var(--c-ink3); }
html.cb main .search-box input, html.cb main .field-button, html.cb main .field-button.metric-pill {
  min-height: 44px; border-radius: 12px; border: 1px solid transparent; background: var(--pnl2);
  color: var(--c-ink); font-size: 14.5px; font-weight: 500; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
html.cb main .search-box input { padding-left: 42px; }
html.cb main .search-box input::placeholder { color: var(--c-ink3); }
html.cb main .search-box input:hover, html.cb main .field-button:hover,
html.cb main .field-button.metric-pill:hover { background: var(--pnl3); }
html.cb main .search-box input:focus-visible, html.cb main .field-button[aria-expanded="true"] {
  outline: none; background: var(--pnl); border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); }
html.cb main .field-button { padding: 0 14px; }
html.cb main .field-button b, html.cb main .field-button.metric-pill b { font-size: 14.5px; font-weight: 500; color: var(--c-ink); }
html.cb main .field-button::after { border-color: var(--c-ink3); }
html.cb main .field-button.is-active, html.cb main .field-button.metric-pill.is-active {
  background: var(--acc-soft); color: var(--acc); box-shadow: none; }
html.cb main .field-button.is-active b { font-weight: 600; color: var(--acc); }
html.cb main .field-button.is-active::after { border-color: var(--acc); }

/* Переключатель ₽ / $ - сегмент-пилюля, как у Coinbase. */
html.cb main .money-switch { padding: 3px; border-radius: 999px; background: var(--pnl2); }
html.cb main .money-switch button { min-width: 38px; min-height: 38px; border-radius: 999px; font-size: 14px;
  font-weight: 600; color: var(--c-ink3); }
html.cb main .money-switch button[aria-pressed="true"] { background: var(--pnl); color: var(--c-ink);
  box-shadow: 0 1px 2px rgba(10,11,13,.12), 0 1px 1px rgba(10,11,13,.06); }
:root[data-theme="dark"].cb main .money-switch button[aria-pressed="true"] { background: var(--pnl3); box-shadow: none; }
html.cb main .money-switch button:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
html.cb main .filter-count { font-size: 13px; font-weight: 600; color: var(--acc); }
html.cb main .reset-inline { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--pnl); color: var(--c-ink2); font-size: 14px; font-weight: 600; }
html.cb main .reset-inline:hover { background: var(--acc-soft); border-color: transparent; color: var(--acc); }

/* ── пилюли показателей ────────────────────────────────────────────────── */
html.cb main .metric-pills { gap: 10px; margin-top: 16px; }
html.cb main .pills-label { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--c-ink3); margin-right: 2px; }
html.cb main .pill-group { gap: 6px; padding: 0; background: none; border-radius: 0; }
html.cb main :is(.pill-group, #pillRow) .metric-pill { min-height: 36px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--pnl); color: var(--c-ink2); font-size: 13.5px; font-weight: 500;
  box-shadow: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
html.cb main :is(.pill-group, #pillRow) .metric-pill:hover { background: var(--pnl2); color: var(--c-ink); }
/* Стрелка у пилюли появляется только у заданной или открытой: в покое
   она пряталась прозрачностью, но место занимала, и справа у каждой
   пилюли висел пустой хвост. Пустое значение тоже не должно давать отступ. */
html.cb main :is(.pill-group, #pillRow) .metric-pill::after { display: none; }
html.cb main :is(.pill-group, #pillRow) .metric-pill:is(.is-active, [aria-expanded="true"])::after { display: block; opacity: .6; }
html.cb main :is(.pill-group, #pillRow) .metric-pill b:empty { display: none; }
html.cb main :is(.pill-group, #pillRow) .metric-pill b { font-size: 13px; font-weight: 600; color: var(--acc); }
html.cb main :is(.pill-group, #pillRow) .metric-pill.is-active { background: var(--acc-soft); border-color: transparent;
  color: var(--acc); font-weight: 600; }
html.cb main :is(.pill-group, #pillRow) .metric-pill[aria-expanded="true"] { border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-ring); background: var(--pnl); }
html.cb main .metric-pill:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── всплывающее окно фильтра ──────────────────────────────────────────── */
html.cb main .pill-popover { --seg-bed: var(--pnl2); --seg-bed-hover: var(--pnl3); --seg-top: var(--pnl);
  width: min(340px, calc(100vw - 24px)); padding: 16px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--pnl); box-shadow: 0 2px 6px rgba(10,11,13,.05), 0 18px 44px rgba(10,11,13,.14); }
:root[data-theme="dark"].cb main .pill-popover { background: var(--pnl); border-color: var(--line);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.55); }
html.cb main .pill-popover h3 { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
html.cb main .pill-popover-close { width: 30px; height: 30px; border-radius: 50%; color: var(--c-ink3); }
html.cb main .pill-presets { gap: 6px; padding: 0; background: none; border-radius: 0; margin-top: 14px; }
html.cb main .pill-presets button { min-height: 36px; border-radius: 999px; background: var(--pnl2);
  color: var(--c-ink2); font-size: 13px; font-weight: 600; box-shadow: none; }
html.cb main .pill-presets button:hover { background: var(--pnl3); color: var(--c-ink); }
html.cb main .pill-presets button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); box-shadow: none; }
html.cb main .pill-presets button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html.cb main .pill-range, html.cb main .pill-extra, html.cb main .pill-popover footer { border-top-color: var(--line); }
html.cb main .pill-range > p { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink3); }
html.cb main .pill-range label { font-size: 12.5px; color: var(--c-ink3); }
html.cb main .pill-range input, html.cb main .pill-extra .single-field select {
  min-height: 40px; border-radius: 10px; border: 1px solid transparent; background: var(--pnl2);
  color: var(--c-ink); font-size: 14px; font-weight: 500; -moz-appearance: textfield; }
html.cb main .pill-range input::-webkit-outer-spin-button,
html.cb main .pill-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html.cb main .pill-range input:hover { background: var(--pnl3); }
html.cb main .pill-range input:focus-visible, html.cb main .pill-extra .single-field select:focus-visible {
  outline: none; background: var(--pnl); border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-ring); }
html.cb main .pill-extra .single-field { font-size: 12.5px; font-weight: 600; color: var(--c-ink3); }
html.cb main .pill-extra .choice-list label, html.cb main .pill-extra .include-missing { font-size: 14px; font-weight: 500; }
html.cb main .pill-extra .choice-list input, html.cb main .pill-extra .include-missing input,
html.cb main .choice-list input, html.cb main .include-missing input { accent-color: var(--acc); }
html.cb main .pill-extra .sector-only { border-radius: 999px; font-size: 12px; color: var(--c-ink3); }
html.cb main .pill-extra .sector-only:hover { background: var(--acc-soft); color: var(--acc); }
html.cb main .market-choice span b, html.cb main .market-tag { font-size: 12px; }
html.cb main .market-tag { border-radius: 999px; padding: 1px 7px; border-color: var(--line2); color: var(--c-ink3); }
html.cb main .pill-clear { font-size: 14px; font-weight: 600; color: var(--c-ink2); }
html.cb main .pill-clear:hover { color: var(--c-dn); }
html.cb main .pill-apply { min-height: 40px; padding: 0 20px; border-radius: 999px; background: var(--acc);
  color: var(--acc-ink); font-size: 14px; font-weight: 600; }
html.cb main .pill-apply:hover { background: var(--acc2); }
:root[data-theme="dark"].cb main .pill-apply { background: #2f6fe0; }
:root[data-theme="dark"].cb main .pill-apply:hover { background: #3f7ef0; }

/* ── телефон: окно показателя - нижняя шторка (25.09.2026) ──────────────
   Общее для акций и крипты. Положение, которое скрипт считает от кнопки,
   на телефоне не нужно: шторка всегда у нижнего края, под ней затемнение.
   Токены - /lib/cf/tokens.css (обе страницы его подключают). */
@media (max-width: 767px) {
  /* Окно показателя - нижняя шторка. Положение, которое скрипт считает от
     кнопки, на телефоне не нужно: шторка всегда у нижнего края. */
  html.cb main .pill-popover {
    position: fixed; z-index: var(--cf-z-modal); left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto; max-height: min(86dvh, 720px); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--cf-space-8) var(--cf-space-20) calc(var(--cf-space-16) + env(safe-area-inset-bottom));
    border: 0; border-radius: var(--cf-radius-xl) var(--cf-radius-xl) 0 0; box-shadow: var(--cf-shadow-modal);
    animation: cb-sheet-in 280ms var(--cf-ease);
  }
  html.cb main .pill-popover::before {
    content: ""; display: block; width: 36px; height: 4px; margin: 0 auto var(--cf-space-10);
    border-radius: var(--cf-radius-pill); background: var(--cf-line-strong);
  }
  html.cb main .pill-popover h3 { font-size: 18px; font-weight: 600; }
  html.cb main .pill-popover-close { width: var(--cf-tap-min); height: var(--cf-tap-min); background: var(--cf-surface-2); font-size: 20px; }
  html.cb main .pill-presets button { min-height: var(--cf-h-button); font-size: 14px; }
  html.cb main .pill-range input { min-height: var(--cf-h-control); font-size: 16px; }
  html.cb main .pill-extra .choice-list label { min-height: var(--cf-tap-min); display: flex; align-items: center; gap: var(--cf-space-10); font-size: 15px; }
  html.cb main .pill-extra .choice-list input { width: 20px; height: 20px; }
  html.cb main .pill-popover footer {
    position: sticky; bottom: calc(-1 * (var(--cf-space-16) + env(safe-area-inset-bottom)));
    margin: var(--cf-space-12) calc(-1 * var(--cf-space-20)) calc(-1 * (var(--cf-space-16) + env(safe-area-inset-bottom)));
    padding: var(--cf-space-12) var(--cf-space-20) calc(var(--cf-space-12) + env(safe-area-inset-bottom));
    background: var(--cf-surface);
  }
  html.cb main .pill-apply { min-height: var(--cf-h-control); flex: 1; }
  html.cb main .pill-clear { min-height: var(--cf-h-control); padding: 0 var(--cf-space-16); }
  html.cb:has(main .pill-popover:not([hidden])), html.cb:has(main .pill-popover:not([hidden])) body { overflow: hidden; }
  html.cb:has(main .pill-popover:not([hidden])) body::after {
    content: ""; position: fixed; inset: 0; z-index: calc(var(--cf-z-modal) - 1); background: var(--cf-scrim);
    animation: cb-fade-in var(--cf-dur-slow) var(--cf-ease-std);
  }
  @keyframes cb-sheet-in { from { transform: translateY(100%); } }
  @keyframes cb-fade-in { from { opacity: 0; } }

}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.cb main .pill-popover, html.cb body::after { animation: none !important; }
}