/* ============================================================
   cab-mobile.css — кабинет на телефоне: то, из-за чего им неудобно
   пользоваться с маленького экрана. Помощник М1, 07.09.2026.

   Здесь только оболочка кабинета (классы cab-*). Дизайн-система
   (mpr-*, np-*) и app.css не правятся: файл подключается последним и
   уточняет их поведение на узком экране, а не переписывает.
   ============================================================ */

/* ---------- 1. Лента вкладок карточки проекта ----------
   Как было. Вкладок десять («Карточка … Команда»), лента — flex с
   overflow-x:auto и спрятанной полоской прокрутки (mpr-nonpublic.css).
   Замер 07.09.2026 безголовым Edge на 390 px: ширина ленты 1056 px при
   видимых 362 px. То есть за краем оставалось две трети вкладок, в том
   числе «Поручения» (начинается на 628-м пикселе) — и человек их просто
   не находил: полоски прокрутки не видно, намёка на движение нет.

   Почему не «подматывать к активной». Подмотка к активной вкладке этой
   беды не лечит: на карточке проекта активна первая вкладка, лента и так
   стоит в начале, а «Поручения» как были за краем, так и остаются.
   Прокрутка помогает только тому, кто уже знает, что там что-то есть.

   Что сделано. Лента переносится на следующую строку вместо того, чтобы
   уезжать за край: видно все десять вкладок сразу, ничего не спрятано,
   двигать ничего не нужно. На широком экране лента помещается в одну
   строку — там перенос ничего не меняет, вид прежний. */
.cab-tabs > .np-tabs {
  flex-wrap: wrap;
  row-gap: 6px;
  /* перенос убрал горизонтальное переполнение — обрезать больше нечего,
     а видимый overflow не срезает подсветку фокуса у крайних вкладок */
  overflow-x: visible;
}

/* На телефоне вкладки чуть компактнее, чтобы десять штук уложились в три
   строки, а не в четыре. Высота 38 px — та же, что у «подвкладок»
   дизайн-системы (np-tabs--sub), палец попадает уверенно. */
@media (max-width: 760px) {
  .cab-tabs { margin-top: 14px; }
  .cab-tabs > .np-tabs { gap: 5px; row-gap: 5px; }
  .cab-tabs > .np-tabs > .np-tab {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 12.5px;
    gap: 5px;
  }
}

/* Ленты вкладок, которые всё-таки прокручиваются (например, вкладки внутри
   окна инфоповода — там своя раскладка): пусть открываются на активной
   вкладке, а не в начале. Свойство новое (Chromium 133+); там, где его нет,
   всё остаётся как было — лишнего оно не делает. */
.np-tabs > .np-tab.is-active { scroll-start-target: auto; }

/* ---------- 2. Полоса «Ближайшие сроки» ----------
   Название поручения в таблетке срока обрезано многоточием: у .cab-due-chip
   span стоит max-width 260 px и white-space:nowrap (app.css, раздел 20).
   На компьютере, где полоса занимает четверть ширины, это разумно. На
   телефоне полоса — во всю ширину и стоит одна, места хватает: показываем
   название целиком, в две-три строки, а не первые 260 пикселей с многоточием.
   Приставку «Пункт плана 1 · …» из этого текста сняли отдельно (project.js),
   так что обрезалось как раз то, ради чего поручение и открывают. */
@media (max-width: 760px) {
  .cab-due-chip { align-items: flex-start; text-align: left; }
  .cab-due-chip span {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}