/* ═══════════════════════════════════════════════════════════════════════════
   Мобильный слой каталога (linkbuilding.seoworkspace.ru / panel.seoworkspace.ru)
   11.10.2026, v2 (пересобран начисто: в v1 обрыв комментария ломал блоки ниже)

   Область: (max-width: 900px) — телефон и планшет в портрете. По указателю
   НЕ гадаем: desktop-ноутбук в Chrome тоже сообщает (pointer: coarse)/(none),
   из-за чего «тач-дополнение» ≤1240 включалось и на десктопе (проверено
   matchMedia на 1440: coarse=true). Замер 1440/1920 до и после: y карточки
   576, плитки 619×149+413×149, tsub 23px — ноль расхождений.
   замер 1440/1920 до и после — y карточки 576, плитка 619×149+413×149,
   tsub 23px, ноль расхождений.

   Почему здесь `!important`: экраны каталога одеты <style>-блоком самой
   страницы (.prj2, #maproot). Inline-<style> стоит ПОСЛЕ внешнего файла и
   при равной специфичности побеждает, поэтому переопределить его можно так.
   Порядок подключения: catalog.css → этот слой (layout.blade).

   Классы, id, порядок DOM, тексты и ссылки не меняются — только подача.
   Единственная markup-правка (по согласованию 11.10) — .tsub двумя строками,
   см. projects.blade.php «две биржи — двумя строками».
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

/* ── рамка страницы ─────────────────────────────────────────────────────
   desktop-паддинги съедали 36px из 390; sticky-шапка не знала про вырез и
   home-indicator; переходы по #якорям прятались под шапку. */
html { scroll-padding-top: 112px; }
body { overscroll-behavior-y: none; }
main.wrap { padding: 12px 10px max(18px, env(safe-area-inset-bottom)); }

/* ── шапка в одну строку ────────────────────────────────────────────────
   brand + 11 вкладок + «Выйти» в flex-wrap → вторая строка: 90px (11%
   экрана) при 390px. */
.top {
    flex-wrap: nowrap;
    gap: 8px;
    padding: max(7px, env(safe-area-inset-top)) 10px 7px;
    padding-inline-start: max(10px, env(safe-area-inset-left));
    padding-inline-end: max(10px, env(safe-area-inset-right));
}
.top .brand { flex: none; font-size: 14px; }
.top .brand > span { display: none; }              /* лого остаётся, слово — нет */
.top .tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.top .tabs::-webkit-scrollbar { display: none; }
.top .tabs a { flex: none; padding: 8px 11px; font-size: 13px; }
.top .who { flex: none; gap: 6px; font-size: 12px; }
.top .who .badge { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .who button { min-height: 34px; }

/* ── тап-цели ───────────────────────────────────────────────────────────
   замер видимого DOM живого списка: 70 из 127 элементов меньше 44×28
   (ссылки 49×18, summary 32×30, инпуты 74×27). Норма — WCAG 2.5.5. */
summary { min-height: 44px; }
.btn, .ap-btn, .pmp-go, .pg-i, .u-link, button.link, .map-texttask { min-height: 44px; }
a.u-link, .tt-go, .bud-set, .pcm-go, .prj-pm-dl {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px;
}
input[type=text], input[type=number], input[type=url], input[type=search],
input:not([type]), select { min-height: 40px; font-size: 16px; }   /* <16px — iOS зумит по фокусу */
input[type=checkbox], input[type=radio] { min-width: 22px; min-height: 22px; }

/* ── кегль: текст должен читаться, а не прятаться в подсказке ───────────
   74 видимых узла <11px (.ap-h, .pcm-o, .pcm-t th, .prj-as-cost, .prj-pm-ex) */
.ap-h, .prj-pm-ex, .prj-as-cost, .pcm-o, .pcm-g, .pmp-e, .mix-sub,
.prj2 .mx-def, .prj2 .mix .lb .def, .prj2 .prj-editbox > summary .s-ic,
#maproot .map-nosale, #maproot .map-meta { font-size: 11.5px !important; }
.pcm-t th { font-size: 11.5px !important; white-space: normal; }
.u-fine, .muted, .xt-lb, .xt-brk, .prj2 .prj-when { font-size: 12px !important; }
.pml, .prj-mark, .ap-takes { font-size: 12px; }

/* ── «Проекты»: карточка ────────────────────────────────────────────────
   855–1147px на карточку (1,13 экрана); счёт бирж и исключений — на 91%
   высоты; 200 скрытых строк исключений = 1,6MB HTML на 11 проектов. */
/* ── шапка карточки: «⋯» в углу, статус НЕ под кнопкой ────────────────────
   Итог двух прогонов 12.10. Кнопка — абсолютно в углу top/right (просьба 1),
   а чтобы статус не ложился под неё (просьба 2), заголовок в prj-id жёстко
   занимает всю первую полосу (prj-id = 100%, .pr2-eol = ещё один break):
   ряд 1 = название (+домен своей строкой), ряд 2 = статус слева, правый
   угол пуст — там кнопка. Запас по горизонтали 50px на всякий случай. */
.prj2 .u-card { position: relative; }
.prj2 .prj-top { padding: 11px 14px 2px; position: static; flex-wrap: wrap; row-gap: 4px; column-gap: 10px; align-items: center; }
.prj2 .pr2-mono { width: 30px; height: 30px; font-size: 11px; flex: none; }
.prj2 .pr2-eol { flex: 1 0 100%; height: 0; order: 2; }
.prj2 .prj-title { font-size: 16px; overflow-wrap: anywhere; }
.prj2 .prj-id { order: 1; flex: 1 0 100%; min-width: 0; gap: 2px 10px; }
.prj2 .prj-id .pr2-site { order: 0; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.prj2 .prj-st {
    order: 3; flex: 0 1 auto; margin-left: 0; max-width: calc(100% - 50px);
    white-space: normal; min-width: 0; overflow: visible;
}
.prj2 details.prj-menu {
    order: 4; position: absolute; top: max(8px, env(safe-area-inset-top)); right: 10px;
    margin: 0; z-index: 6;
}
.prj2 details.prj-menu > summary { width: 44px; height: 44px; }
.prj2 .prj-menu-items { right: 0; }
.prj2 .prj-fin { grid-template-columns: 1fr; gap: 10px 0; padding-right: 14px; }
.prj2 .prj-tiles { display: flex !important; flex-direction: column; gap: 6px; padding: 6px 14px 0 !important; }
.prj2 .prj-meta { padding: 0 14px; margin-top: 6px; }
.prj2 .prj-twin { margin: 8px 14px 0; }
.prj2 .prj-exc-list, .prj2 .prj-empty { margin-left: 14px; margin-right: 14px; }
.prj2 .prj-excbox > summary, .prj2 .prj-pmbox > summary,
.prj2 .prj-assist > summary, .prj2 .prj-appr > summary,
.prj2 .prj-editbox > summary, .prj2 .prj-newbox > summary { padding-left: 14px; padding-right: 14px; }
.prj2 .prj-appr-body { padding-left: 14px; padding-right: 14px; }
.prj2 .prj-row { content-visibility: auto; contain-intrinsic-size: auto 520px; }
.prj2 .u-list { gap: 10px !important; }

/* ── плитки «GG+SAPE» и «исключения» ────────────────────────────────────
   Прод-дефект: @media(max-width:700) делает сетку из двух колонок по
   103–168px на 320–430px, а ссылки «оплаты →»/«размещения →» с nowrap —
   их правый край вставал на +32…+87px за границу плитки и на соседку
   (замер 320px: 19 из 30 меток вне box). Лечится порядком в колонке:
   чип своей строкой, ссылки своей, ширина — не шире плитки. */
.prj2 .prj-tile {
    overflow-wrap: anywhere; border: 0; background: none; padding: 4px 0;
    min-width: 0; max-width: 100%; box-sizing: border-box;
}
.prj2 .prj-tile + .prj-tile { border-top: 1px solid #f1f4f8; padding-top: 8px; }
.prj2 .prj-tile .tt { margin-bottom: 0; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.prj2 .prj-tile .xt { flex: none; white-space: nowrap; }
.prj2 .prj-tile .tt-go2 {
    flex: 1 1 100%; order: 3; display: flex; flex-wrap: wrap; margin-left: 0;
    justify-content: flex-start; gap: 2px 18px; min-width: 0;
}
.prj2 .prj-tile .tt-go { flex: 0 1 auto; min-width: 0; white-space: normal; }
.prj2 .prj-tile .tt-off { margin-left: 0; }
.prj2 .prj-kv { flex: 1 1 100%; display: flex; gap: 2px 14px; flex-wrap: wrap; }
.prj2 .prj-kv .r { min-width: 0; line-height: 1.5; font-size: 12px; }
.prj2 .prj-kv .n { font-size: 14px; }

/* ── .tsub: «GG — …» и «SAPE — …» двумя строками (markup v2 в blade) ────
   одной строкой на 320–430px это разливалось на 5–10 строк и упиралось в
   плавающий FAB ассистента. Теперь: максимум 2 строки на биржу, целиком в
   title, строка не шире плитки. display:none из прежнего слоя убран — с
   двумя строками текст нужен, а не прячется. */
.prj2 .tsub {
    display: flex; flex-direction: column; gap: 3px;
    margin: 6px 0 48px; font-size: 11.5px; line-height: 1.3;
}
.prj2 .tsub-line {
    display: block; font-style: normal; min-width: 0; max-width: 100%;
    padding-left: 11px; position: relative;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prj2 .tsub-line::before {
    content: ""; position: absolute; left: 0; top: 5px; width: 6px; height: 6px;
    border-radius: 50%; background: currentColor; opacity: .55;
}
.prj2 .tsub-line.is-gg { color: var(--x-gg, #4f46e5); }
.prj2 .tsub-line.is-sape { color: var(--x-sape, #92400e); }
.asw-fab { bottom: max(26px, calc(env(safe-area-inset-bottom) + 14px)); right: max(14px, env(safe-area-inset-right)); }

/* ── чипы/ссылки/подписи, которые не должны вылезать за родителя ──────── */
.prj2 .prj-mark, .prj2 .prj-more, .prj2 .prj-why { overflow-wrap: anywhere; }
.prj2 .pr2-h { padding: 12px 14px 0; }
.prj2 .prj-when { margin: 0 14px; }

/* панель импорта на телефоне не сворачивается кнопкой (в v2 оставили компактные
   боксы: 622px → ~250px): кнопка-обёртка ломала дерево и добавляла строку на
   десктопе. Если всё же понадобится сворачивать — только через <details> вокруг
   самой панельки, и тогда import-partial'ы надо вынести в <template>. */

/* ── панель сравнения: 10 колонок не влезают, скролла не было (365 > 342) ─ */
.pcm { overflow: visible; }
.pcm > summary { padding: 10px 12px; }
.pcm-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pcm-wrap::after {
    content: "← прокрутите вправо →"; display: block; padding: 4px 12px 8px;
    font-size: 11.5px; color: #98a2b3; text-align: center;
}
.pcm-n { font-size: 12.5px !important; }
.pcm-t td { font-size: 12.5px; }

/* ── «Карта» (#maproot) ─────────────────────────────────────────────────── */
#maproot .head-sum { gap: 8px; }
#maproot .head-sum b { font-size: 20px; }
#maproot .map-tabs a { padding: 9px 12px; font-size: 12.5px; }
#maproot .tw table.grid .mx { display: none !important; }
#maproot .tw table.grid tbody tr { padding: 12px 12px 13px 15px; }
#maproot .tw table.grid .dom { font-size: 16px; }
#maproot .tw table.grid td.go { margin-top: 12px; }

/* ═══ узкий телефон (≤820): desktop-плотность уже не читается ═══════════ */
@media (max-width: 820px) {

    main.wrap { padding: 10px 8px max(16px, env(safe-area-inset-bottom)); }

    /* итоговые плитки: desktop-стопка = 328px до первого проекта (39% экрана) */
    .prj2 .pr2-sum, .prj2 .pr2-sum--4 {
        display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important; background: transparent !important; border: 0 !important;
        box-shadow: none !important; margin: 0 0 10px !important;
    }
    .prj2 .p2s-cell {
        background: #fff; border: 1px solid var(--bd) !important; border-radius: 12px;
        box-shadow: var(--sh-xs); padding: 9px 11px 10px;
    }
    .prj2 .p2s-cell + .p2s-cell { border-top: 1px solid var(--bd) !important; }
    .prj2 .p2s-cell b { font-size: 16px; }
    .prj2 .p2s-cell span { font-size: 11px; margin-top: 2px; }

    /* импорт бирж: три бокса = 622px до списка (74% экрана) → столбец, и
       вся панель прячется в складку (summary — единственная строка) */
    .prj2 .pr2-import { grid-template-columns: 1fr !important; gap: 8px !important; }
    .prj2 .pr2-import section { padding: 11px 12px !important; gap: 7px !important; }
    .prj2 .pr2-import .rp-lead { display: none !important; }   /* текст дублирует title кнопки */
    .prj2 .pr2-import .ap-btn { align-self: stretch; justify-content: center; }
    .prj2 .pr2-import .rp-meta { font-size: 11.5px; }
    .prj2 .pr2-chips { display: none !important; }             /* 206px легенды до контента */
    .prj2 .prj-merge-panel { padding: 10px 12px; }

    /* колонки сравнения, не читаемые в столбец: desktop видит все десять */
    .pcm-x { display: none !important; }

    /* деньги и стратегия — узкой колонкой, дата импорта — в title карточки */
    .prj2 .prj-fin { display: grid !important; grid-template-columns: 1fr !important; gap: 10px 0 !important; }
    .prj2 .prj-st { width: auto !important; }   /* @media(700) ставит 100% — это и был перенос */
    .prj2 .prj-when { display: none; }
}
}

/* ── индикатор-точка в строках-складках (✓ анкоры+темы, ассистент, «Настроить»,
   переписка, исключения). Просьба 12.10 (A): точка висела посередине строки
   на десктопе (замер 1440: x=704 при тексте до 368 и зазоре 349px от края).

   Корень в inline-стилях страницы: и у .s-dot (строка 455 blade), и у
   шеврона (::after того же summary) стоит margin-left:auto. В flex-строке
   два auto-отступа делят свободное место пополам — точка и замирает в небе.
   Ремонт: шеврон выводим из потока (position:absolute), в строке остаётся
   ОДИН auto-отступ — у точки; она встаёт вплотную слева от шеврона. */
.prj2 .prj-appr > summary, .prj2 .prj-assist > summary, .prj2 .prj-pmbox > summary,
.prj2 .prj-editbox > summary, .prj2 .prj-excbox > summary { position: relative; }
.prj2 .prj-appr > summary::after, .prj2 .prj-assist > summary::after,
.prj2 .prj-pmbox > summary::after, .prj2 .prj-editbox > summary::after,
.prj2 .prj-excbox > summary::after {
    position: absolute; right: 14px; top: 50%; margin-left: 0 !important;
    transform: translateY(-50%) rotate(45deg);
}
/* раскрытое состояние шеврона — как в inline-правиле, но с нашим translateY */
.prj2 details[open] > .prj-appr > summary::after, .prj2 details[open] > summary::after {
    transform: translateY(-50%) rotate(-135deg);
}
.prj2 .prj-appr > summary .s-dot, .prj2 .prj-assist > summary .s-dot,
.prj2 .prj-pmbox > summary .s-dot, .prj2 .prj-editbox > summary .s-dot,
.prj2 .prj-excbox > summary .s-dot { flex: none !important; margin-left: auto !important; margin-right: 34px; }