/* Cashflow Pro - скринер облигаций на телефоне.
   Таблица из восемнадцати колонок на 375 пикселях требовала огромной прокрутки
   вправо, и фильтры до неё были не видны. Здесь тот же скринер показан списком:
   слева выпуск и его свойства, справа доходность и цена, фильтры - кнопкой в
   начале строки наборов.

   Модуль ничего не фильтрует сам: он переключает те же контролы, что на
   десктопе, и рисует те же строки, которые отобрал render(). Одна логика,
   два вида. Создано 19.09.2026. */

.mscr{display:none}

@media (max-width:767px){
  body.mscr-on .filters,
  body.mscr-on .filters-toggle,
  body.mscr-on .tablewrap{display:none}
  body.mscr-on .mscr{display:block}

  /* Шапка держится у верха: поиск и фильтры нужны в любой точке списка. */
  /* Сайтовая шапка тоже липкая, поэтому своя встаёт ровно под ней:
     высоту подставляет скрипт, она зависит от того, вошёл человек или нет. */
  .mscr-top{position:sticky;top:var(--mscr-off,0px);z-index:20;scroll-margin-top:var(--mscr-off,0px);margin:0 -16px;padding:10px 16px 0;
    background:var(--header-bg);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--g200)}
  .mscr-count{font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--g500)}
  .mscr-count b{color:var(--lime-line);font-weight:700}

  .mscr-search{position:relative;margin-top:9px}
  .mscr-search input{width:100%;height:44px;padding:0 13px 0 38px;border:1px solid var(--g300);
    border-radius:12px;background:var(--white);color:var(--ink);font:500 15px inherit}
  .mscr-search input::placeholder{color:var(--g400)}
  .mscr-search input:focus{outline:none;border-color:var(--lime-line)}
  .mscr-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--g400)}

  /* Кнопка фильтров стоит первой и не уезжает вместе с лентой наборов:
     иначе до главного элемента экрана пришлось бы домотать вправо. */
  .mscr-bar{display:flex;gap:8px;align-items:center;margin-top:9px;padding-bottom:10px}
  .mscr-fbtn{flex:0 0 auto;height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;
    border:1px solid var(--g300);border-radius:999px;background:var(--white);color:var(--ink);
    font:700 13.5px inherit;cursor:pointer;
    transition:background 150ms cubic-bezier(.23,1,.32,1),border-color 150ms cubic-bezier(.23,1,.32,1),transform 110ms cubic-bezier(.23,1,.32,1)}
  .mscr-fbtn:active{transform:scale(.97)}
  .mscr-fbtn[aria-expanded="true"],.mscr-fbtn.on{background:var(--lime);border-color:var(--lime);color:var(--ink)}
  :root[data-theme="dark"] .mscr-fbtn[aria-expanded="true"],
  :root[data-theme="dark"] .mscr-fbtn.on{color:#14170d}
  .mscr-fbtn i{display:grid;place-items:center;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
  .mscr-fbtn[aria-expanded="true"] i{transform:rotate(180deg)}
  .mscr-fbtn b{font:700 11px 'JetBrains Mono',ui-monospace,monospace;padding:2px 6px;border-radius:99px;
    background:var(--lime-soft);color:var(--lime-line)}
  .mscr-fbtn.on b,.mscr-fbtn[aria-expanded="true"] b{background:rgba(12,12,14,.14);color:inherit}

  .mscr-presets{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .mscr-presets::-webkit-scrollbar{display:none}
  .mscr-chip{flex:0 0 auto;height:38px;padding:0 13px;display:inline-flex;align-items:center;
    border:1px solid var(--g300);border-radius:999px;background:var(--white);color:var(--g700);
    font:600 13.5px inherit;white-space:nowrap;cursor:pointer;
    transition:background 150ms cubic-bezier(.23,1,.32,1),color 150ms cubic-bezier(.23,1,.32,1)}
  .mscr-chip:active{transform:scale(.97)}
  .mscr-chip[aria-pressed="true"]{background:var(--g100);color:var(--ink);border-color:var(--g300)}

  /* Панель раскрывается по высоте, а не появляется рывком: иначе список
     под пальцем прыгает и теряется место, куда человек смотрел. */
  .mscr-panel{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows 220ms cubic-bezier(.23,1,.32,1)}
  .mscr-panel.open{grid-template-rows:1fr}
  .mscr-panel-in{overflow:hidden}
  /* С раскрытыми дополнительными фильтрами панель выше экрана, поэтому тело
     прокручивается само, а «Показать N» прилипает к низу: это выход из
     панели, и он не должен уезжать за край. */
  .mscr-panel-body{max-height:calc(100vh - var(--mscr-off,0px) - 210px);overflow-y:auto;overscroll-behavior:contain;
    padding:12px 16px 14px;margin:0 -16px;border-top:1px solid var(--g200);background:var(--g50)}
  .mscr-grp{margin-bottom:11px}
  .mscr-grp-t{display:block;margin-bottom:7px;font:700 10px/1 inherit;letter-spacing:.12em;
    text-transform:uppercase;color:var(--g500)}
  .mscr-opts{display:flex;flex-wrap:wrap;gap:6px}
  .mscr-opt{height:34px;padding:0 11px;display:inline-flex;align-items:center;border:1px solid var(--g300);
    border-radius:9px;background:var(--white);color:var(--g700);font:600 13px inherit;cursor:pointer;
    transition:background 150ms cubic-bezier(.23,1,.32,1),color 150ms cubic-bezier(.23,1,.32,1)}
  .mscr-opt:active{transform:scale(.97)}
  .mscr-opt[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
  :root[data-theme="dark"] .mscr-opt[aria-pressed="true"]{color:#14170d}
  .mscr-opt.sm{height:30px;padding:0 9px;font-size:12px}
  .mscr-range{display:flex;align-items:center;gap:8px}
  .mscr-range input{width:100%;height:36px;padding:0 11px;border:1px solid var(--g300);border-radius:9px;
    background:var(--white);color:var(--ink);font:600 13.5px 'JetBrains Mono',ui-monospace,monospace}
  .mscr-range input:focus{outline:none;border-color:var(--lime-line)}
  .mscr-range span{color:var(--g400);font-size:13px}

  .mscr-more{width:100%;min-height:40px;margin-top:12px;display:flex;align-items:center;
    justify-content:center;gap:7px;border:1px dashed var(--g300);border-radius:10px;
    background:transparent;color:var(--g700);font:700 13px inherit;cursor:pointer}
  .mscr-more:active{transform:scale(.99)}
  .mscr-more[aria-expanded="true"]{color:var(--ink);border-style:solid}
  .mscr-more i{display:grid;place-items:center;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
  .mscr-more[aria-expanded="true"] i{transform:rotate(180deg)}
  .mscr-more b{font:700 11px 'JetBrains Mono',ui-monospace,monospace;padding:2px 6px;border-radius:99px;
    background:var(--lime-soft);color:var(--lime-line)}
  .mscr-extra{display:grid;grid-template-rows:0fr;
    transition:grid-template-rows 220ms cubic-bezier(.23,1,.32,1)}
  .mscr-extra.open{grid-template-rows:1fr}
  .mscr-extra-in{overflow:hidden}
  .mscr-extra-body{padding-top:12px}

  .mscr-acts{display:flex;gap:9px;margin-top:13px;position:sticky;bottom:0;padding-top:11px;
    background:linear-gradient(180deg,transparent 0,var(--g50) 11px)}
  .mscr-acts button{flex:1;min-height:44px;border-radius:11px;border:1px solid var(--g300);
    background:var(--white);color:var(--ink);font:700 14.5px inherit;cursor:pointer}
  .mscr-acts button:active{transform:scale(.98)}
  .mscr-acts button.main{background:var(--lime);border-color:var(--lime);color:var(--ink)}
  :root[data-theme="dark"] .mscr-acts button.main{color:#14170d}

  /* Шапка колонок: без неё плотный список читается как набор цифр.
     Разрядка у числовых подписей убрана: с ней «ДОХОД» и «ЦЕНА» слипались
     в одно слово, потому что подпись шире своей колонки. */
  .mscr-cols{display:grid;grid-template-columns:24px 1fr 48px 49px 54px;gap:5px;padding:9px 0 8px;
    font:700 9px/1 inherit;letter-spacing:.1em;text-transform:uppercase;color:var(--g500)}
  .mscr-cols span:first-child{grid-column:1 / 3}
  .mscr-cols span:nth-child(n+2){text-align:right;letter-spacing:0;overflow:hidden;white-space:nowrap}
  /* Кегль шапки задаётся явно: общий стиль кнопок страницы перебивал
     font:inherit и подпись становилась вдвое шире своей колонки. */
  .mscr-sort{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:inherit;
    font-family:inherit;font-size:9px;font-weight:700;line-height:1;letter-spacing:0;
    text-transform:uppercase;padding:0;cursor:pointer}
  .mscr-sort[data-on="1"]{color:var(--lime-line)}

  .mscr-list{margin:0 -16px}
  /* Цена 49px: «100,1%» шире 44px, и знак процента обрезался. */
  .mscr-row{display:grid;grid-template-columns:24px 1fr 48px 49px 54px;gap:5px;align-items:center;
    padding:9px 16px;border-bottom:1px solid var(--g100);text-decoration:none;color:inherit;
    background:var(--white)}
  /* Знак эмитента: та же аватарка, что в таблице, только меньше. */
  .mscr-row .issuer-ava{width:24px;height:24px;flex:0 0 24px}
  .mscr-row .issuer-logo{width:24px;height:24px}
  .mscr-row:active{background:var(--g50)}
  .mscr-who{min-width:0}
  /* Метки стоят у имени, а не во второй строке: имя выпуска короткое, справа
     от него всё равно пустое место, а вторая строка из-за меток теряла
     последнее слово - именно срок. */
  .mscr-nm{display:flex;align-items:center;gap:4px;min-width:0;
    font:700 14.5px/1.2 inherit;letter-spacing:-.02em}
  .mscr-nm .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Вторая строка: рейтинг, тип ставки и срок текстом; оферта и амортизация -
     метками, потому что это свойства выпуска, а не его значения. */
  .mscr-sub{display:flex;align-items:center;gap:6px;margin-top:3px;min-width:0}
  .mscr-sub .t{font:500 10.5px/1.25 'JetBrains Mono',ui-monospace,monospace;color:var(--g500);letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mscr-rt{font:700 10.5px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--g700);white-space:nowrap}
  .mscr-mk{flex:0 0 auto;font:700 9px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;
    text-transform:uppercase;padding:3px 4px;border-radius:4px;white-space:nowrap}
  /* Пут и колл названы по-разному намеренно: это противоположные права.
     Пут защищает держателя, колл работает против него. */
  .mscr-mk.put{background:var(--info-bg);color:var(--info-ink)}
  .mscr-mk.call{background:var(--warn-bg);color:var(--warn-ink)}
  .mscr-mk.amort{background:var(--pri-bg);color:var(--pri-lb)}
  .mscr-mk.more{background:var(--g100);color:var(--g500)}
  .mscr-ytm{text-align:right;font:800 16px/1 'JetBrains Mono',ui-monospace,monospace;
    letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .mscr-ytm .pc{font-size:10px;font-weight:700;color:var(--g400);margin-left:1px}
  /* Такое число - артефакт формулы, а не доходность: показываем его тише,
     чтобы оно не читалось как лучшая бумага списка. */
  .mscr-ytm.huge{color:var(--g400);font-weight:700}
  .mscr-ytm.w1{font-size:14px}
  .mscr-ytm.w2{font-size:12.5px}
  /* Страховка на случай ещё более длинного значения: ячейка обрежет его,
     но не наедет на соседнюю колонку. */
  .mscr-ytm,.mscr-px,.mscr-vol{min-width:0;overflow:hidden;text-overflow:clip}
  .mscr-ytm .nd{color:var(--g400);font-weight:500}
  .mscr-vol{text-align:right;font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;
    color:var(--g500);font-variant-numeric:tabular-nums;white-space:nowrap}
  /* Изменение за день под ценой: r.day - готовая разметка cf-delta из bonds.html. */
  .mscr-day{display:block;margin-top:3px;font-size:10px}
  .mscr-day .cf-delta{gap:0;font-weight:600}
  .mscr-px .pc{font-size:9px;font-weight:700;color:var(--g400);margin-left:1px}
  .mscr-px{text-align:right;font:500 12px/1 'JetBrains Mono',ui-monospace,monospace;color:var(--g700);
    font-variant-numeric:tabular-nums}
  .mscr-empty{padding:44px 16px;text-align:center;color:var(--g500)}

  /* Звезда избранного слева от строки (25.09.2026). Шапка колонок сдвинута
     на её ширину, чтобы подписи стояли над своими числами. */
  .mscr-item{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;
    border-bottom:1px solid var(--g100);background:var(--white)}
  .mscr-item>.mscr-row{padding-left:2px;border-bottom:0;background:none}
  .mscr-cols{padding-left:32px}
  .mscr-item>.fav-star.mscr-fav{display:grid;place-items:center;width:32px;height:46px;margin:0 0 0 4px;
    padding:0;border:0;border-radius:10px;background:none;color:var(--g400);-webkit-tap-highlight-color:transparent}
  .mscr-item>.fav-star.mscr-fav svg{width:17px;height:17px}
  .mscr-item>.fav-star.mscr-fav:active{transform:scale(.88)}
  .mscr-item>.fav-star.mscr-fav.on,.mscr-item>.fav-star.mscr-fav[aria-pressed="true"]{color:var(--cf-star,#e8a400);background:none}
  .mscr-item>.fav-star.mscr-fav.on svg path,.mscr-item>.fav-star.mscr-fav[aria-pressed="true"] svg path{fill:var(--cf-star,#e8a400);stroke:var(--cf-star,#e8a400)}
}