/* Терминал на телефоне: внутренности панелей (списки, таблицы, кнопки под палец).
   Каркас экранов (нижняя панель, data-mpane, высоты) — в terminal.css, то же условие: до 1100 px
   (телефон и планшет в обеих ориентациях). Здесь только то, что внутри панелей; десктоп этот файл
   не трогает. */
/* Элементы только для телефона (создаёт terminal_mobile.js): кнопка «Слои», лист слоёв с подложкой,
   подсказка по тапу. На десктопе (в т.ч. после растяжения окна) они остаются в разметке — спрятаны. */
.mlay, .msheet, .mback, .mtip, .mnote { display: none; }
@media (max-width: 1100px) {
  /* ── Общее: без синей вспышки на тап, прокрутка панелей не тянет страницу ───────── */
  .trm button, .trm .wl__r, .trm .cmd__row, .trm table.t tr, .trm .side__sec > .ph {
    -webkit-tap-highlight-color: transparent; }
  .wl__b, .work__b, .side, .cmd__drop { -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    scrollbar-width: thin; }
  .work__b { touch-action: pan-x pan-y; }
  .trm .empty { font-size: 12px; padding: 12px; }

  /* ── Список наблюдения ───────────────────────────────────────────────────────────── */
  .wl__cls { height: 40px; }
  .wl__cls button { font-size: 13px; }
  .wl__f { height: auto; flex-wrap: wrap; gap: 6px 6px; padding: 6px 8px; }
  .wl__f input { flex: 1 1 100%; height: 34px; padding: 0 10px; font-size: 16px;
    border: 1px solid var(--line2); background: var(--pane); }
  .wl__f button { height: 30px; padding: 0 11px; border: 1px solid var(--line2); border-radius: 15px;
    background: var(--pane); color: var(--tx2); font-size: 12px; font-weight: 600; }
  /* Текст на акцентной кнопке — тёмный, как у остальных кнопок .on (переменной --bg в
     terminal.css нет, var(--bg) там же в .sigf button.on — пустая ссылка). */
  .wl__f button.on, .sigf button.on { color: #06090f; background: var(--acc); border-color: var(--acc); }
  .wl__hd { height: 26px; font-size: 11px; }
  .wl__hd .so { font-size: 9px; margin-left: 4px; }
  .wl__g { height: 28px; font-size: 11px; }
  /* Строка 44px: тикер, цена и изменение читаются без прицеливания. Спарклайн на этой
     ширине уже скрыт (terminal.css ≤1500), его трек убран из сетки. Звёздочка избранного
     без наведения — всегда видна, бледно, и шире под палец. */
  .wl__hd, .wl__r { grid-template-columns: minmax(0, 1fr) 72px 64px; gap: 6px; padding: 0 10px 0 26px; }
  .wl.bonds .wl__hd, .wl.bonds .wl__r { grid-template-columns: minmax(0, 1fr) 72px 56px; }
  .wl__r { height: 44px; }
  .wl__r .st { left: 4px; width: 20px; font-size: 14px; opacity: .45; }
  .wl__r .st.on { opacity: 1; }
  .wl__r .s { font-size: 14px; gap: 7px; }
  .wl__r .s i { font-size: 12px; }
  .wl__r .r { font-size: 14px; }
  .wl__empty { font-size: 12px; padding: 16px 12px; }

  /* ── Рабочая панель: табы-чипы, подтабы, фильтр, таблицы ─────────────────────────── */
  .work__hd { height: 36px; }
  .work__hd button { height: 36px; font-size: 12px; }
  .work__tabs { scrollbar-width: thin; }
  .work__tabs::-webkit-scrollbar { height: 3px; }
  .work__tabs::-webkit-scrollbar-thumb { background: var(--line2); }
  .work__tabs button, .work__tabs.tight button { height: 36px; padding: 0 12px; font-size: 13px;
    letter-spacing: 0; }
  .work__tabs button i, .work__tabs.tight button i { display: none; }
  .scr__views { padding: 6px 8px; gap: 4px; }
  .scr__views button { height: 30px; padding: 0 12px; font-size: 12px; }
  /* Поле условий — во всю ширину, кнопки-чипы и счётчик второй строкой. */
  .sigf { gap: 6px; padding: 6px 8px 8px; }
  .sigf input { flex: 1 1 100%; width: auto; height: 36px; padding: 0 10px; font-size: 16px; }
  .sigf button { height: 30px; padding: 0 10px; font-size: 12px; }
  .sigf__n { margin-left: 0; flex: 1 1 100%; font-size: 12px; }
  /* Таблица остаётся широкой и крутится внутри панели по горизонтали, но колонка тикера
     липнет слева: иначе, домотав до «Год, %», не видно, чья это строка. Угловая ячейка
     шапки — поверх обеих липких осей. */
  table.t th { height: 32px; padding: 0 10px; font-size: 11px; }
  table.t td { height: 40px; padding: 0 10px; font-size: 13px; }
  table.t td.s, table.t th:first-child { position: sticky; left: 0; background: var(--pane); z-index: 1;
    box-shadow: 1px 0 0 var(--line); }
  table.t th:first-child { background: var(--pane2); z-index: 3; }
  table.t tr.on td.s, table.t tr:hover td.s { background: var(--pane2); }
  table.t tr.on td { background: var(--acc-soft); }
  .t.cor th, .t.cor td { height: 34px; padding: 0 8px; font-size: 12px; }  /* матрица — компактнее таблиц */
  /* Портфель, календарь и прочие вкладки: панели действий переносятся, кнопки под палец. */
  .pf__top { height: auto; flex-wrap: wrap; gap: 6px 14px; padding: 6px 10px; font-size: 12px; }
  .cal__bar { height: auto; flex-wrap: wrap; gap: 4px; padding: 6px; }
  /* Липкие сверху панели (наборы скринера, сводка портфеля, фильтр календаря) липнут и слева:
     таблица под ними листается по горизонтали, и панель уезжала за левый край вместе с ней. */
  .scr__views, .pf__top, .cal__bar { left: 0; }
  .cal__bar button { height: 28px; padding: 0 10px; font-size: 11px; }
  .cor__note { font-size: 12px; }

  /* ── Боковая панель (экран «Инфо»): заголовки-аккордеон, крупнее текст ───────────── */
  .side .ph { height: 40px; padding: 0 12px; font-size: 13px; cursor: pointer; }
  .side .ph .n { font-size: 12px; }
  /* Индикатор сворачивания — уголок у правого края заголовка, а не после текста: у секций
     без подписи справа он прыгал бы к названию. Заголовок липкий (как в каркасе) — он же
     и опора для абсолютного уголка. Глиф каркаса заменён этим же уголком, содержимое
     свёрнутой секции прячем и здесь, чтобы вид не зависел от порядка загрузки стилей. */
  .side .side__sec > .ph { position: sticky; top: 0; z-index: 3; padding-right: 32px; }
  .side .side__sec > .ph::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
    margin: -6px 0 0; border-right: 1.5px solid var(--tx3); border-bottom: 1.5px solid var(--tx3);
    transform: rotate(45deg); transition: transform .15s; }
  .side .side__sec.collapsed > .ph::after { margin-top: -4px; transform: rotate(-45deg); }  /* свёрнута: уголок вправо */
  .side .side__sec.collapsed > :not(.ph) { display: none; }
  .kv { grid-template-columns: minmax(108px, auto) minmax(0, 1fr); }
  .kv dt, .kv dd { font-size: 13px; }
  .rng__t { font-size: 11px; }
  .rng__l { font-size: 11px; }
  .prf div { padding: 8px 2px; }
  .prf-note, .fin__note, .peer__note, .cv__note, .season__sum, .bcr__s, .bcr__l { font-size: 12px; }
  .fin__r { grid-template-columns: 44px 1fr 1fr 1fr; }
  .fin__r span, .fin__r i { font-size: 12px; }
  .fin__r.hd span { font-size: 11px; }
  .fin__m .fin__r { grid-template-columns: 104px repeat(3, 1fr); }  /* «Дивдоходность» целиком */
  .peer__r { grid-template-columns: 76px repeat(3, 1fr); min-height: 30px; }
  .peer__r span, .peer__r i { font-size: 12px; }
  .peer__r.hd span, .peer__r.hd i { font-size: 11px; }
  .cv__r, .cv__hd { grid-template-columns: 64px repeat(4, 1fr); }
  .cv__r span, .cv__r i { font-size: 12px; }
  .cv__hd { font-size: 11px; }
  .mtf__r { min-height: 28px; }
  .mtf__r b { font-size: 14px; }
  .bcr__qr { grid-template-columns: 96px 1fr 28px; min-height: 26px; }
  .bcr__v { font-size: 22px; }
  .season i { height: 40px; }
  .risk label { font-size: 11px; }
  .risk input { font-size: 16px; padding: 6px 7px; }
  #noteBox { font-size: 16px; }

  /* ── Шапка инструмента и тулбар графика ──────────────────────────────────────────── */
  .inst__s { font-size: 18px; }
  .inst__n { font-size: 13px; }
  .inst__p { font-size: 22px; }
  .inst__c { font-size: 15px; }
  .inst__sec { font-size: 12px; }
  /* Тулбар переносится в несколько строк (26 кнопок): кнопки компактнее, чтобы строк было
     меньше и холсту досталось больше высоты; 28px под палец ещё хватает. */
  .chart__tf button { height: 28px; padding: 0 8px; font-size: 11.5px; }
  .chart__ohlc { font-size: 12px; white-space: normal; line-height: 1.5; }

  /* ── Поиск: строки выпадающего списка под палец (сам список на всю ширину экрана
     ставит каркас, terminal.css) ───────────────────────────────────────────────────── */
  .cmd__drop b.grp { padding: 8px 12px 4px; font-size: 11px; }
  .cmd__row { min-height: 44px; align-items: center; padding: 6px 12px; font-size: 14px; }
  .cmd__row i { min-width: 64px; font-size: 14px; }
  .cmd__row.bond i { min-width: 118px; }
  .cmd__more { padding: 8px 12px; font-size: 12px; }

  /* ── Всплывающие элементы: в пределах экрана, над нижней панелью ────────────────── */
  .settip { max-width: calc(100vw - 16px); font-size: 12px; }
  .shmenu { max-width: calc(100vw - 16px); flex-wrap: wrap; }
  .shmenu button { width: 28px; height: 28px; }
  .al-note { max-width: calc(100vw - 24px); bottom: calc(66px + env(safe-area-inset-bottom)); font-size: 12px; }
  .bstat { left: 8px; right: 8px; bottom: 28px; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; }
  .cmpleg { left: 8px; right: 8px; top: auto; bottom: 28px; flex-wrap: wrap; max-width: calc(100vw - 16px); }
  /* ── Таблицы: без десктопной минимальной ширины 860 px ─────────────────────────── */
  /* Узкие таблицы («Секторы», «Движения», «Дивиденды») растягивались до 860 и уводили числа
     за край; теперь ширина — по содержимому, широкие по-прежнему листаются. */
  .work__b table.t { min-width: 0; }
  /* Строка-заголовок на всю ширину таблицы (день в календаре, «Лидеры роста», пояснение во
     «Всплесках»): таблица листается по горизонтали, а текст липнет к левому краю и переносится
     в пределах экрана — иначе, домотав вправо, читаешь пустую полосу. */
  table.t td .tnote { position: sticky; left: 10px; display: inline-block;
    max-width: calc(100vw - 20px); white-space: normal; line-height: 1.35; padding: 5px 0; }
  /* Лента: заголовок события переносится, а не уезжает на 1400 px вправо. */
  table.t td.tx { white-space: normal; min-width: 220px; line-height: 1.3;
    padding-top: 6px; padding-bottom: 6px; }
  /* Алерты ставятся инструментами рисования, которых на телефоне нет, и хранятся в браузере,
     где поставлены: на телефоне вкладка была бы всегда пустой. */
  .trm[data-mpane] #wtabs button[data-tab="alr"] { display: none; }

  /* ── Кнопка «Слои · N» в тулбаре и лист слоёв (terminal_mobile.js) ──────────────── */
  .trm[data-mpane] .mlay { display: inline-flex; align-items: center; gap: 5px; height: 28px;
    padding: 0 10px; border: 1px solid var(--line2); background: var(--pane2); color: var(--tx2);
    font: 600 11.5px/1 var(--sans); white-space: nowrap; cursor: pointer; }
  .trm[data-mpane] .mlay b { color: var(--acc); font: 600 11.5px/1 var(--mono); }
  .trm[data-mpane] .mlay[disabled] { opacity: .35; }
  /* Выпуск и пай: виды графика и слои terminal.js гасит (disabled). На телефоне ряд погашенных
     кнопок не держим — тулбар из режимов графика и сроков. 2×2 не гасится, но на телефоне скрыт. */
  .trm[data-mpane] #view:not(:has(button:not([disabled]):not([data-view="grid"]))),
  .trm[data-mpane] .mlay[disabled] { display: none; }
  .trm[data-mpane] .mback:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 20;
    background: rgba(3, 6, 12, .55); }
  .trm[data-mpane] .msheet:not([hidden]) { display: flex; flex-direction: column; position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 21; max-height: 72vh; max-height: 72dvh;
    background: var(--pane2); border-top: 1px solid var(--line2); border-radius: 12px 12px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -8px 32px rgba(0, 0, 0, .45); }
  .msheet__h { display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600;
    color: var(--tx); }
  .msheet__x { height: 32px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--acc);
    color: #06090f; font: 600 13px/1 var(--sans); cursor: pointer; }
  .msheet__b { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* Строка листа: код слоя, пояснение из title кнопки, переключатель. */
  .msheet__r { display: grid; grid-template-columns: 76px minmax(0, 1fr) 36px; align-items: center;
    gap: 10px; width: 100%; min-height: 50px; padding: 7px 14px; border: 0;
    border-bottom: 1px solid var(--line); background: none; color: var(--tx2); text-align: left;
    font-family: var(--sans); cursor: pointer; }
  .msheet__r b { font: 600 12px/1.2 var(--mono); color: var(--tx); letter-spacing: .04em; }
  .msheet__r span { font-size: 12px; line-height: 1.3; }
  .msheet__r i { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--line2); }
  .msheet__r i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--tx3); transition: left .15s; }
  .msheet__r.on i { background: var(--acc); }
  .msheet__r.on i::after { left: 16px; background: #06090f; }
  .msheet__r[disabled] { opacity: .4; cursor: default; }

  /* ── Подсказка по тапу: текст title элемента над нижней панелью ──────────────────── */
  .trm[data-mpane] .mtip:not([hidden]) { display: block; position: fixed; left: 8px; right: 8px;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 19; padding: 10px 12px;
    background: var(--pane2); border: 1px solid var(--line2); border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .45); color: var(--tx); font-size: 12px; line-height: 1.4;
    white-space: pre-line; }
  /* ── Окошко «терминал рассчитан на большой экран» (terminal_mobile.js) ──────────────── */
  .trm[data-mpane] .mback--note:not([hidden]) { z-index: 30; }
  .trm[data-mpane] .mnote:not([hidden]) { display: block; position: fixed; left: 16px; right: 16px;
    top: 50%; transform: translateY(-50%); z-index: 31; max-width: 400px; margin: 0 auto;
    padding: 18px 16px 14px; background: var(--pane2); border: 1px solid var(--line2);
    border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); color: var(--tx); }
  .mnote__t { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
  .mnote p { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--tx2); }
  .mnote__x { width: 100%; height: 38px; border: 0; border-radius: 19px; background: var(--acc);
    color: #06090f; font: 600 13px/1 var(--sans); cursor: pointer; }
  /* ── Планшет (761–1100 px): лист слоёв и подсказка не на всю ширину ───────────────── */
  .msheet, .mtip { max-width: 560px; margin: 0 auto; }
  /* iOS Safari увеличивает страницу при фокусе на поле с кеглем меньше 16 px — в приложении с
     фиксированным каркасом это ломает экран. Все поля ввода — 16 px. */
  .trm input:not([type="checkbox"]):not([type="radio"]), .trm textarea, .trm select { font-size: 16px; }
  .hk { display: none !important; }
}

/* Ландшафт телефона (режим приложения, как в terminal.css): холсту мало высоты — строка OHLC
   скрыта, тулбар одной прокручиваемой строкой, таймфреймы в ней первыми. */
@media (max-width: 1000px) and (max-height: 500px) {
  .trm[data-mpane] .chart__ohlc { display: none; }
  .trm[data-mpane] .chart__bar { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .trm[data-mpane] .mlay { flex: none; }
  .trm[data-mpane] .chart__bar::-webkit-scrollbar { display: none; }
  .trm[data-mpane] .chart__tf { flex: none; flex-wrap: nowrap; }
  .trm[data-mpane] #tf { order: -1; }
}
