/* Cashflow Pro - мобильный вид скринеров: список строк и нижняя шторка.
 *
 * Общая основа для акций, БПИФ и недвижимости (облигации живут на своём
 * bonds-mobile.css, из него взят образец строки). На телефоне таблица на
 * десяток колонок - это прокрутка вбок на несколько экранов, поэтому до
 * 767 пикселей страница рисует список: знак, имя и одна строка контекста
 * слева, главная цифра справа. Правило отбора и сортировки одно на оба вида -
 * список получает от страницы уже отобранные строки.
 *
 * Только токены дизайн-системы (/lib/cf/tokens.css). Создано 25.09.2026.
 */

.ml, .ml-sortbtn, .ml-searchrow, .ml-pophead, .ml-popfoot { display: none; }

@media (max-width: 767px) {
  /* ---------- Шапка списка: сколько нашлось и как отсортировано ---------- */
  .ml-sortbtn {
    display: inline-flex; align-items: center; gap: var(--cf-space-6);
    flex: none; min-height: var(--cf-h-pill); 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: 500 13px/1.2 var(--font-sans); white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--cf-dur) var(--cf-ease-std), transform var(--cf-dur-press) var(--cf-ease);
  }
  .ml-sortbtn:active { transform: scale(.97); background: var(--cf-surface-2); }
  .ml-sortbtn svg { flex: none; color: var(--cf-accent); }
  .ml-sortbtn .ml-sorticon { color: var(--cf-ink-3); }
  .ml-sortbtn:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }

  /* ---------- Список ---------- */
  .ml { display: block; }
  .ml-list {
    overflow: hidden;
    border: 1px solid var(--cf-line); border-radius: var(--cf-radius-xl);
    background: var(--cf-surface);
  }
  .ml-row {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center;
    column-gap: var(--cf-space-10);
    min-height: 64px; padding: var(--cf-space-10) var(--cf-space-16);
    color: var(--cf-ink); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--cf-dur-fast) var(--cf-ease-std);
  }
  .ml-row + .ml-row, .ml-list > .ml-skel + .ml-skel { box-shadow: inset 0 1px 0 var(--cf-line); }
  .ml-row:active { background: var(--cf-surface-2); }
  .ml-row:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: -2px; border-radius: var(--cf-radius-md); }
  .ml-row.has-spark { grid-template-columns: 36px minmax(0, 1fr) 44px auto; }

  /* Строка с избранным: звезда слева, как в таблицах на десктопе, дальше
     ссылка на бумагу. Звезда - своя кнопка 40 × 48 (палец), значок 18 px. */
  .ml-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; padding-left: var(--cf-space-4); }
  .ml-item.no-fav { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .ml-item + .ml-item { box-shadow: inset 0 1px 0 var(--cf-line); }
  .ml-item > .ml-row { padding-left: var(--cf-space-4); box-shadow: none; }
  .ml-item.no-fav > .ml-row { padding-left: var(--cf-space-16); }
  .ml-item:has(> .ml-row:active) { background: var(--cf-surface-2); }
  .ml-item > .ml-row:active { background: none; }
  .ml-item > .fav-star.ml-fav {
    display: grid; place-items: center; width: 34px; height: 48px; margin: 0; padding: 0;
    border: 0; border-radius: var(--cf-radius-md); background: none; color: var(--cf-ink-3);
    -webkit-tap-highlight-color: transparent;
  }
  .ml-item > .fav-star.ml-fav svg { width: 18px; height: 18px; }
  .ml-item > .fav-star.ml-fav:active { transform: scale(.88); background: var(--cf-surface-2); }
  .ml-item > .fav-star.ml-fav.on, .ml-item > .fav-star.ml-fav[aria-pressed="true"] { color: var(--cf-star); background: none; }
  .ml-item > .fav-star.ml-fav.on svg path, .ml-item > .fav-star.ml-fav[aria-pressed="true"] svg path { fill: var(--cf-star); stroke: var(--cf-star); }
  .ml-item > .fav-star.ml-fav:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: -2px; }
  .ml-item .ml-row { grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: var(--cf-space-8); padding-right: var(--cf-space-14); }
  .ml-item .ml-row.has-spark { grid-template-columns: 34px minmax(0, 1fr) 44px auto; }
  .ml-item .ml-logo { width: 34px; height: 34px; }

  /* Знак: монограмма под картинкой. Пустой круг запрещён - пока картинка
     грузится или если её нет, видны буквы. */
  .ml-logo {
    position: relative; display: grid; place-items: center;
    width: 36px; height: 36px; overflow: hidden; border-radius: 50%;
    background: var(--cf-surface-2); color: var(--cf-ink-2);
    font: 600 12.5px/1 var(--font-sans); letter-spacing: 0;
  }
  .ml-logo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; border-radius: 50%;
  }
  /* Картинка пришла - буквы под ней убираем: у прозрачного PNG они
     просвечивали бы сквозь знак (так было в таблице акций). */
  .ml-logo.has-img { color: transparent; background: var(--cf-surface); box-shadow: inset 0 0 0 1px var(--cf-line); }
  .ml-logo img.is-fit { object-fit: cover; }
  .ml-logo.is-gov { background: var(--cf-accent-soft); color: var(--cf-accent); }

  .ml-who { display: grid; gap: 3px; min-width: 0; }
  .ml-nm {
    display: flex; align-items: center; gap: var(--cf-space-6); min-width: 0;
    font: 600 15px/1.25 var(--font-sans); letter-spacing: -0.01em;
  }
  .ml-nm .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ml-nm .fav { flex: none; width: 13px; height: 13px; color: var(--cf-star); }
  .ml-sub {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--cf-ink-3); font: 400 13px/1.3 var(--font-sans);
    font-variant-numeric: tabular-nums;
  }
  .ml-sub b { color: var(--cf-ink-2); font-weight: 600; }
  .ml-sub .hl { color: var(--cf-ink); font-weight: 600; }

  .ml-spark { display: block; width: 44px; height: 22px; }
  .ml-spark svg { display: block; width: 44px; height: 22px; overflow: visible; }

  .ml-val { display: grid; justify-items: end; gap: 3px; min-width: 0; text-align: right; }
  .ml-main {
    font: 600 15.5px/1.2 var(--font-sans); letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .ml-cap {
    color: var(--cf-ink-3); font: 500 13px/1.25 var(--font-sans);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .ml-up { color: var(--cf-up); }
  .ml-down { color: var(--cf-down); }
  .ml-nd { color: var(--cf-ink-3); font-weight: 400; }

  /* Метка у имени: вид бумаги, «аморт», «для квалов». Одна, остальное - «+N». */
  .ml-tag {
    flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
    border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); color: var(--cf-ink-2);
    font: 600 11.5px/1 var(--font-sans);
  }
  .ml-tag.amber { background: var(--cf-amber-soft); color: var(--cf-amber); }
  .ml-tag.violet { background: var(--cf-violet-soft); color: var(--cf-violet); }
  .ml-tag.teal { background: var(--cf-teal-soft); color: var(--cf-teal); }

  .ml-empty {
    padding: var(--cf-space-32) var(--cf-space-20); text-align: center;
    color: var(--cf-ink-2); font: 400 15px/1.5 var(--font-sans);
  }
  .ml-empty b { display: block; margin-bottom: var(--cf-space-4); color: var(--cf-ink); font-weight: 600; }
  .ml-empty button {
    margin-top: var(--cf-space-14); min-height: var(--cf-h-button); padding: 0 var(--cf-space-18);
    border: 0; border-radius: var(--cf-radius-pill); background: var(--cf-accent-fill); color: var(--cf-on-accent);
    font: 600 14px/1 var(--font-sans); cursor: pointer;
  }

  /* Скелет строки: форма будущего содержимого, а не спиннер. */
  .ml-skel .ml-logo, .ml-skel i {
    background: linear-gradient(90deg, var(--cf-surface-2) 25%, var(--cf-surface-3) 50%, var(--cf-surface-2) 75%);
    background-size: 220% 100%; animation: ml-skel 1.2s linear infinite;
  }
  .ml-skel i { display: block; height: 12px; border-radius: var(--cf-radius-bar); }
  .ml-skel .ml-who i:first-child { width: 62%; height: 14px; }
  .ml-skel .ml-who i + i { width: 40%; }
  .ml-skel .ml-val i { width: 64px; height: 14px; }
  .ml-skel .ml-val i + i { width: 44px; height: 12px; }
  @keyframes ml-skel { to { background-position: -220% 0; } }

  /* ---------- Нижняя шторка ---------- */
  .ml-scrim {
    position: fixed; inset: 0; z-index: calc(var(--cf-z-modal) - 1);
    background: var(--cf-scrim); opacity: 0; pointer-events: none;
    transition: opacity var(--cf-dur-slow) var(--cf-ease-std);
  }
  .ml-scrim.is-on { opacity: 1; pointer-events: auto; }
  .ml-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--cf-z-modal);
    display: flex; flex-direction: column; max-height: min(86dvh, 720px);
    border-radius: var(--cf-radius-xl) var(--cf-radius-xl) 0 0;
    background: var(--cf-surface); color: var(--cf-ink); box-shadow: var(--cf-shadow-modal);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%); visibility: hidden;
    transition: transform 280ms var(--cf-ease), visibility 0s linear 280ms;
  }
  .ml-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform 280ms var(--cf-ease), visibility 0s; }
  .ml-sheet.is-drag { transition: none; }
  .ml-grab {
    flex: none; display: grid; place-items: center; height: 22px; cursor: grab; touch-action: none;
  }
  .ml-grab::before { content: ""; width: 36px; height: 4px; border-radius: var(--cf-radius-pill); background: var(--cf-line-strong); }
  .ml-sheet-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12);
    padding: 0 var(--cf-space-12) var(--cf-space-8) var(--cf-space-20); touch-action: none;
  }
  .ml-sheet-head h2, .ml-sheet-head h3 { margin: 0; font: 600 18px/1.3 var(--font-sans); letter-spacing: -0.02em; }
  .ml-x {
    display: grid; place-items: center; width: var(--cf-tap-min); height: var(--cf-tap-min); flex: none;
    border: 0; border-radius: 50%; background: var(--cf-surface-2); color: var(--cf-ink-2); cursor: pointer;
  }
  .ml-x:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
  .ml-sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--cf-space-8) var(--cf-space-12); }

  /* Варианты сортировки: строка на всю ширину, выбранная - синяя с галкой. */
  .ml-opt {
    display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12);
    width: 100%; min-height: 48px; padding: 0 var(--cf-space-12);
    border: 0; border-radius: var(--cf-radius-md); background: transparent; color: var(--cf-ink);
    font: 500 15px/1.3 var(--font-sans); text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ml-opt:active { background: var(--cf-surface-2); }
  .ml-opt[aria-checked="true"] { background: var(--cf-accent-soft); color: var(--cf-accent); font-weight: 600; }
  .ml-opt small { color: var(--cf-ink-3); font: 400 13px/1.2 var(--font-sans); }
  .ml-opt[aria-checked="true"] small { color: var(--cf-accent); }
  .ml-opt:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: -2px; }
  .ml-dir {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--cf-space-4);
    margin: var(--cf-space-4) var(--cf-space-4) var(--cf-space-10); padding: var(--cf-space-4);
    border-radius: var(--cf-radius-pill); background: var(--cf-surface-2);
  }
  .ml-dir button {
    min-height: var(--cf-h-sm); border: 0; border-radius: var(--cf-radius-pill); background: transparent;
    color: var(--cf-ink-2); font: 600 13.5px/1 var(--font-sans); cursor: pointer;
  }
  .ml-dir button[aria-pressed="true"] { background: var(--cf-surface); color: var(--cf-ink); box-shadow: var(--cf-shadow-thumb); }

  html.ml-lock, html.ml-lock body { overflow: hidden; }

  .ml-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12);
    margin: 0 0 var(--cf-space-10);
  }
  .ml-count { min-width: 0; color: var(--cf-ink-2); font: 400 13.5px/1.3 var(--font-sans); }

  /* ---------- Фильтры на мультиселектах (БПИФ, недвижимость) ----------
     Страница ставит html.ml-page. Поиск - своей строкой, под ним лента
     пилюль, прокручивается вбок. Окно выбора - нижняя шторка. */
  .ml-page .filters-toggle { display: none !important; }
  .ml-page .ml-searchrow { display: block; position: relative; margin: var(--cf-space-16) 0 var(--cf-space-10); }
  .ml-page .ml-searchrow::before {
    content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    z-index: 1; background: var(--cf-ink-3); pointer-events: none;
    -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' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%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' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .ml-page .ml-searchrow input {
    box-sizing: border-box; width: 100% !important; height: var(--cf-h-control); min-height: var(--cf-h-control);
    padding: 0 var(--cf-space-16) 0 42px !important; border: 1px solid transparent; border-radius: var(--cf-radius-pill);
    background: var(--cf-surface-2) !important;
    color: var(--cf-ink); font: 400 16px/1.2 var(--font-sans);
  }
  .ml-page .ml-searchrow .sc-wrap { display: block; position: relative; width: 100%; }
  .ml-page .ml-searchrow input:focus { outline: none; border-color: var(--cf-accent); background: var(--cf-surface) !important; box-shadow: var(--cf-shadow-focus); }
  html.ml-page main .filters, html.ml-page main .filters.is-collapsed {
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--cf-space-6);
    margin: 0 calc(-1 * var(--cf-space-16)) var(--cf-space-14); padding: var(--cf-space-2) var(--cf-space-16);
    overflow-x: auto; scrollbar-width: none;
    border: 0; border-radius: 0; background: none; box-shadow: none;
  }
  html.ml-page main .filters::-webkit-scrollbar { display: none; }
  html.ml-page main .filters > * { flex: none; }
  html.ml-page main .filters .tag { display: none; }
  html.ml-page main .filters .msel-btn, html.ml-page main .filters input, html.ml-page main .filters .resetbtn {
    height: var(--cf-h-pill) !important; min-height: var(--cf-h-pill) !important;
    padding: 0 var(--cf-space-14); border: 1px solid var(--cf-line-strong) !important; border-radius: var(--cf-radius-pill);
    background-color: var(--cf-surface) !important; color: var(--cf-ink); font-size: 14px !important; font-weight: 500;
  }
  html.ml-page main .filters input { width: 168px !important; font-size: 16px !important; }
  html.ml-page main .filters .msel.has-val .msel-btn, html.ml-page main .filters input.on {
    border-color: transparent !important; background-color: var(--cf-accent-soft) !important; color: var(--cf-accent) !important;
  }
  html.ml-page main .filters .resetbtn { display: none; }
  /* flex: none - иначе общее «.filters:not(:has(.fg)) .resetbtn» (flex 50%, min-width 0) сжимало кнопку до 30px и текст налезал на первый фильтр */
  html.ml-page main .filters .resetbtn.show { display: inline-flex; align-items: center; order: -1; flex: none; font-weight: 600; background-color: var(--cf-surface-2) !important; }

  html.ml-page .msel-pop:not([hidden]) {
    position: fixed !important; z-index: var(--cf-z-modal); left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    width: auto !important; max-width: none !important; max-height: min(86dvh, 720px);
    display: flex; flex-direction: column; margin: 0; padding: 0 var(--cf-space-16);
    overflow: hidden; border: 0; border-radius: var(--cf-radius-xl) var(--cf-radius-xl) 0 0;
    background: var(--cf-surface); box-shadow: var(--cf-shadow-modal);
    animation: ml-sheet-in 280ms var(--cf-ease);
  }
  html.ml-page .msel-pop .msel-grid { max-height: none; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; padding-bottom: var(--cf-space-8); }
  html.ml-page .msel-pop .ml-pophead { display: block; padding: 0 var(--cf-space-4) var(--cf-space-12); }
  html.ml-page .msel-pop .ml-pophead .ml-grab { display: grid; }
  html.ml-page .msel-pop .ml-pophead b { font: 600 18px/1.3 var(--font-sans); letter-spacing: -0.02em; color: var(--cf-ink); }
  html.ml-page .msel-pop .ml-popfoot {
    display: block; flex: none; margin: 0 calc(-1 * var(--cf-space-16)); padding: var(--cf-space-12) var(--cf-space-16) calc(var(--cf-space-12) + env(safe-area-inset-bottom));
    box-shadow: inset 0 1px 0 var(--cf-line); background: var(--cf-surface);
  }
  .ml-done {
    width: 100%; min-height: var(--cf-h-control); border: 0; border-radius: var(--cf-radius-pill);
    background: var(--cf-accent-fill); color: var(--cf-on-accent); font: 600 15px/1 var(--font-sans); cursor: pointer;
  }
  .ml-done:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
  html.ml-page .msel-pop .chip { min-height: var(--cf-tap-min); font-size: 14.5px; }
  html.ml-page:has(.msel-pop:not([hidden])), html.ml-page:has(.msel-pop:not([hidden])) body { overflow: hidden; }
  html.ml-page:has(.msel-pop:not([hidden])) body::after {
    content: ""; position: fixed; inset: 0; z-index: calc(var(--cf-z-modal) - 1); background: var(--cf-scrim);
    animation: ml-fade-in var(--cf-dur-slow) var(--cf-ease-std);
  }
  @keyframes ml-sheet-in { from { transform: translateY(100%); } }
  @keyframes ml-fade-in { from { opacity: 0; } }

  html.ml-page main { padding-left: var(--cf-space-16); padding-right: var(--cf-space-16); }
  html.ml-page main h1 { font-size: 28px; line-height: 1.12; letter-spacing: -0.03em; }
  html.ml-page main .sub { font-size: 14.5px; }

  /* Таблица на телефоне не нужна: её место занимает список. */
  html.ml-page main .tablewrap, html.ml-page main .click-hint, html.ml-page main .count { display: none; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .ml-sheet, .ml-sheet.is-open, .ml-scrim, .ml-row, .ml-sortbtn { transition: none; }
  .ml-skel .ml-logo, .ml-skel i { animation: none; }
}
/* Самые узкие телефоны: линия уступает место имени. */
@media (max-width: 374px) {
  .ml-row.has-spark, .ml-item .ml-row.has-spark { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .ml-row.has-spark .ml-spark { display: none; }
}