/* ═══ Адаптивная лента MVQ: три колонки, две и одна ══════════════════════════
 *
 * Один файл на одно решение: как трёхколоночный сайт сужается до ноутбука,
 * планшета и телефона. Ни один экран здесь не переписан — лента, «Обзор»,
 * сообщества, события, профиль и настройки рисуются теми же модулями и по тем
 * же адресам. Меняются только ширины, поля и зоны нажатия.
 *
 * Подключается ТОЛЬКО из `web.html` и идёт ПОСЛЕДНИМ среди стилей. Оба условия
 * существенны:
 *
 *   • окно настольной программы (`index.html`) этого файла не грузит, и ни одна
 *     строка отсюда его не касается ни при каком размере окна;
 *   • переопределения работают обычным каскадом, по порядку файлов. Правил
 *     `!important` здесь нет ни одного, а специфичность нигде не выше той, что
 *     нужна, чтобы перебить `shell.css` — он объявляет те же колонки и ту же
 *     пристань, но стоит в списке раньше.
 *
 * Откат — снять одну строку из `web.html`: продукт вернётся ровно к прежнему
 * поведению, потому что каждое правило здесь только уточняет чужое, а не
 * заводит новых частей разметки.
 *
 * # Лестница ширин
 *
 *   ≤ 400        тесный телефон: поля и просветы ужимаются, зоны нажатия — нет
 *   ≤ 900        телефон: одна колонка, нижняя пристань, полноэкранные разделы
 *   901 … 1180   средняя ширина: рейка значков и лента, правой колонки нет
 *   ≥ 1181       три колонки: рейка, лента, контекст
 *
 * Числа не подобраны на глаз, а согласованы с тем, что уже есть:
 *
 *   900  — граница пристани и рейки (`shell.css`, `alpha2.css`, `social.js`);
 *   1180 — граница правой колонки в самом `social.js` (см. ниже);
 *   400  — ширина, ниже которой четыре пункта и кнопка создания перестают
 *          помещаться без ужимания полей (`shell.css`).
 */

/* ── 1. Правая колонка: там и только там, где её наполняют ───────────────────
 *
 * ⭐ Здесь чинится расхождение разметки и стилей, а не наводится красота.
 *
 * `shell.css` возвращает правую колонку с 1080 точек. А `social.js` (`loadSide`)
 * отказывается спрашивать для неё данные раньше 1181:
 *
 *     if (window.innerWidth <= 1180) return;   // колонки нет — и спрашивать нечего
 *
 * То есть у открытой на 1081–1180 страницы колонка **оставалась пустой**: три
 * серых заглушки «Возможно, вы знаете», которые никогда не превращаются в
 * людей, потому что спросить о них никто не собирался. (Пришедший с широкого
 * окна и сузивший его видел настоящих людей — данные уже лежали в памяти. Одно
 * и то же место выглядело по-разному в зависимости от того, как человек до
 * него добрался, и это худший род поломки: невоспроизводимый.)
 * Заглушка, которая не сменяется содержимым, читается как зависшая загрузка —
 * и это ровно то место, где человек решает, что продукт сломан.
 *
 * Чинится со стороны стилей, потому что 1180 — не случайное число: на него же
 * подписан `app.js` (`matchMedia('(max-width: 1180px)')`), и переход через эту
 * границу перерисовывает ленту. Двигать порог в сценарии значило бы двигать
 * три места сразу; согласовать стили с одним уже существующим — одно.
 *
 * Заодно это и есть «на средней ширине правая колонка скрывается автоматически»
 * из брифа: между 901 и 1180 её нет, и место целиком у чтения. */
/* ⛔ ЛЕСТНИЦА КОЛОНОК ОТСЮДА СНЯТА ПРИ СБОРКЕ (02.09.2026).
 *
 * Здесь стояли две ступени: «901–1180 — колонки нет», «с 1181 — есть». Они
 * были верны для той раскладки, которую этот срез видел: слева всегда узкая
 * рейка в 76 точек, и тогда порог у колонки действительно один.
 *
 * Но срез `shell` сделал левую колонку **сворачиваемой**: 232 точки с
 * подписями или 76 значками, по выбору человека. Порог перестал быть одним
 * числом. Колонка справа должна возвращаться не на заранее известной ширине
 * окна, а когда после неё центру остаётся не меньше 680 — то есть 232 + 680 +
 * 320 ≈ 1240 с широкой навигацией и 76 + 680 + 320 ≈ 1080 со свёрнутой.
 * Свернувший меню получает контекст раньше — ровно за то, чем заплатил.
 *
 * Этого этот срез знать не мог: он писался одновременно с `shell` и в другом
 * каталоге. Ступени теперь живут в одном месте — в `shell.css`, — потому что
 * они завязаны на ширину навигации, которой отсюда никто не управляет. Оба
 * потока предложили ровно это, каждый со своей стороны.
 *
 * Что осталось здесь и почему: всё, что ниже 901 (телефон), безопасные поля,
 * запрет горизонтальной прокрутки, ширина карточек, зоны нажатия и ширина
 * чтения. Ступеней видимости колонки — ни одной.
 *
 * Вилка ширины самой колонки из брифа (288 минимум, 320 предел) снята вместе
 * со ступенью: `--side` объявлен в `tokens.css` и читается обеими
 * поверхностями, а `clamp` с `25vw` в окне программы дал бы колонку, которая
 * едет за шириной окна. Число сайта — `--side-site`, и распоряжается им
 * `shell.css`. */

/* Ширина чтения там, где правой колонки нет. Условия — те же, что у ступеней
 * в `shell.css`, слово в слово: иначе лента расширится там, где колонка стоит,
 * или останется узкой там, где её нет. */
@media (min-width: 901px) and (max-width: 1079px) {
  .social { --feed: var(--feed-wide); }
}
@media (min-width: 1080px) and (max-width: 1239px) {
  /* Со свёрнутой навигацией колонка на этой ширине уже стоит — расширять
   * нечего. С широкой её ещё нет, и место отдаётся чтению. */
  :root[data-nav="wide"] .social { --feed: var(--feed-wide); }
}

/* ── 2. Ширина чтения, когда колонки справа нет ──────────────────────────────
 *
 * «При скрытии боковых колонок центр расширяется, но строки текста не
 * становятся чрезмерно длинными» — бриф. Поэтому не `1fr` во всю ширину окна,
 * а второе число вилки: 700 → 760. Шестьдесят точек забирает лента, остальное
 * остаётся полями.
 *
 * Объявляется на `.social`, а не на `:root`: `--feed` наследуется всеми
 * карточками ленты, но за пределами социальной сети (дверь входа, гостевой
 * просмотр) ширина чтения своя, и трогать её этот срез не собирался. */
/* ⭐ Сшивка трёх срезов, которую не мог сделать ни один из них.
 *
 * Колонки справа не бывает по трём разным причинам: она не помещается по
 * ширине (`shell.css`), сводке нечего сказать (`no-side`, ставит `social.js`)
 * и человек убрал её сам (`rrl-off`, ставит `right-rail.js`). Первая причина
 * расширяла ленту до 760, вторая тоже, а третья оставляла 700 — то есть при
 * одинаковой картинке на экране строка читалась по-разному в зависимости от
 * того, почему колонки нет. Ни один из потоков этого видеть не мог: они
 * писались порознь и друг о друге не знали.
 *
 * Бриф требует расширения при скрытии боковых колонок и причин не различает.
 * Теперь все три дают одну ширину чтения. */
@media (min-width: 901px) {
  .social.no-side,
  .social.rrl-off { --feed: var(--feed-wide); }
}

/* ── 2б. Полоса сообщений не накрывает левую колонку ─────────────────────────
 *
 * `.pwa-bar` — «вышло обновление», «нет сети», «поставить на домашний экран» —
 * стоит `position: fixed` от края до края окна (`pwa.css`, `pwa-shell.css`).
 * На телефоне это верно: колонка там одна, и полоса обязана лечь поперёк неё.
 *
 * На столе колонок три, и та же полоса накрывала низ **левой навигации** — то
 * есть свою карточку человека и кнопку «Свернуть меню». Найдено живым кадром
 * 02.09.2026: подсказка про ярлык стояла поверх обеих, и свернуть меню было
 * нечем, пока её не закроешь.
 *
 * Полоса начинается после навигации. Ширину берём из `--nav-w` (`shell.css`),
 * а не числом: человек сворачивает колонку 232 ↔ 76, и число разошлось бы с
 * ней на первом же нажатии. Запасное значение — на случай отката среза
 * `shell`, когда `--nav-w` объявлять станет некому.
 *
 * Безопасные поля сохранены: слева к отступу по-прежнему прибавляется
 * `--safe-l`, справа правило не трогаем вовсе. На столе оба равны нулю, но
 * большой телефон в альбомной ориентации бывает шире 900 — и тогда они
 * работают.
 *
 * Переход по `left` идёт тем же временем, что и сама сетка (`shell.css`,
 * `transition: grid-template-columns var(--mid)`), иначе полоса прыгает на
 * место рывком, когда колонка ещё едет. `--mid` при просьбе двигаться меньше
 * уже сведён к нулю в `tokens.css` — отдельного правила не нужно. */
@media (min-width: 901px) {
  .pwa-bar {
    left: calc(var(--nav-w, var(--rail-w, 76px)) + 12px + var(--safe-l, 0px));
    transition: bottom var(--mid) ease, left var(--mid) ease;
  }
}

/* ── 3. Вырез на широком экране ──────────────────────────────────────────────
 *
 * Телефон в альбомной ориентации бывает шире 900 точек: у больших iPhone это
 * 926–956, то есть раскладка «рейка + лента», а не пристань. Вырез при этом
 * никуда не девается — он переезжает в левый край, ровно туда, где стоит рейка
 * со значками разделов.
 *
 * Поля даются всей сетке разом, а не каждой колонке по отдельности: колонок
 * три, края всего два, и считать их в трёх местах — значит однажды разойтись.
 * На экране без выреза все три значения равны нулю, и раскладка остаётся
 * прежней до пикселя. */
@media (min-width: 901px) {
  .social {
    padding-left: var(--safe-l);
    padding-right: var(--safe-r);
    padding-bottom: var(--safe-b);
  }
}

/* ── 4. Телефон: одна колонка — одна ширина ──────────────────────────────────
 *
 * ⭐ Здесь чинится то, что видно на первом же кадре телефона.
 *
 * Лента собрана из двух родов частей. Записи лежат внутри `.social-page`, и у
 * страницы есть боковое поле — 12 точек или вырез, смотря что больше. А строка
 * «Что нового?», полоса «нет связи», «Вы остановились здесь», «Прочитанное
 * скрыто» и полоса эфиров стоят прямо в `.social-main`, минуя страницу, и
 * поля у них нет вовсе: `max-width: var(--feed)` при ширине экрана 390 не
 * ограничивает ничего, и карточка растягивается **от края до края**.
 *
 * На экране это выглядит так: composer шире записей под ним на 24 точки, его
 * рамка упирается в стекло, а в альбомной ориентации левый край уходит под
 * вырез. Две ширины карточек в одной колонке читаются как сбой вёрстки, и это
 * ровно то, что задание называет «нормальной шириной карточек».
 *
 * Одно правило вместо шести: всё, что стоит в колонке само по себе, получает
 * ту же ширину и то же поле, что и страница с записями.
 *
 * Что исключено и почему:
 *   `.social-head`  — шапка приклеена к верху и обязана доходить до краёв,
 *                     иначе размытая подложка обрывается посреди экрана;
 *   `.social-page`  — у неё своё поле, и второе стало бы двойным;
 *   `.clips-wrap`   — ролики идут во весь экран, полей у них нет по замыслу;
 *   `.modes-row`,
 *   `.stories`      — полки, которые прокручиваются вбок: поле у них внутри
 *                     (`pwa.css`), чтобы первая плитка начиналась от края, а
 *                     не висела в воздухе;
 *   `.queue-bar`    — полоса очереди отправки с нижней чертой во всю ширину:
 *                     ужатая до ленты, её черта превратилась бы в огрызок.
 *
 * `width`, а не `max-width`, — тоже не вкус. Часть полос приезжает из модулей
 * со встроенным `style="max-width:680px"` (`live.js`, `social.js`), а встроенный
 * стиль перебивает файл целиком и без `!important` не снимается. `width`
 * ограничивает и их: используется меньшее из двух, и это ровно то, что нужно.
 *
 * Специфичность цепочки `:not()` — 0,7,0. Она высокая намеренно: правило
 * обязано перебить `margin: 0 auto` и собственные поля пяти разных частей,
 * объявленных в четырёх файлах. Это единственное место файла, где так. */
@media (max-width: 900px) {
  .social {
    --gutter-l: max(12px, var(--safe-l));
    --gutter-r: max(12px, var(--safe-r));
  }

  .social-main > :not(.social-head):not(.social-page):not(.clips-wrap):not(.modes-row):not(.stories):not(.queue-bar) {
    width: min(var(--feed), 100% - var(--gutter-l) - var(--gutter-r));
    margin-inline: auto;
  }

  /* ── Место под пристанью ──────────────────────────────────────────────────
   *
   * Запас снизу держит `.social-page` (`pwa-shell.css`, `--nav-space`). Но
   * страница не всегда последняя: в ленте под ней стоит строка «Скрыто вами»,
   * а в «Студии» — вторая и третья страницы подряд. Значит, запас оказывался
   * то посреди колонки (пустая полоса в 90 точек между лентой и строкой под
   * ней), то не в конце вовсе — и последняя строка пряталась под капсулой.
   *
   * Правило простое: запас всегда у последнего, и ровно один. */
  .social-main > .social-page:not(:last-child) { padding-bottom: 12px; }
  .social-main > :last-child:not(.social-page):not(.social-head):not(.clips-wrap) {
    margin-bottom: calc(var(--nav-space) + 24px);
  }
}

/* ── 5. Нижняя пристань: палец, вырез, край экрана ───────────────────────────
 *
 * Сама пристань собрана в `shell.css` — капсула разделов и отдельная кнопка
 * создания. Здесь только то, что относится к краям экрана и к размеру цели. */
@media (max-width: 900px) {
  .a2-dock {
    /* Центр — по безопасной области, а не по стеклу.
     *
     * В альбомной ориентации вырез забирает край с одной стороны: середина
     * стекла и середина того, что человек видит, расходятся на два-три
     * десятка точек, и пристань стоит заметно не по центру. Сдвиг ровно на
     * половину разницы полей ставит её посередине видимого. В книжной
     * ориентации оба поля равны нулю, и слагаемое исчезает само. */
    left: calc(50% + (var(--safe-l) - var(--safe-r)) / 2);

    /* Ширину меряем в процентах от окна, а не в `vw`.
     *
     * `100vw` — это ширина стекла вместе с полосой прокрутки, и на раскладках,
     * где полоса занимает место, пристань шире окна ровно на её толщину: она
     * вылезает правым краем и тянет за собой горизонтальную прокрутку. У
     * прибитого элемента проценты считаются от той же области, но без полосы. */
    max-width: calc(100% - 16px - var(--safe-l) - var(--safe-r));
  }

  /* 48 точек — нижняя граница цели нажатия, а не пожелание. Ниже начинаются
   * промахи, и это одинаково верно для всех четырёх разделов. */
  .a2-nav button {
    min-width: var(--nav-btn);
    min-height: var(--nav-btn);
  }
}

/* Тесный телефон: 320 точек и крупный текст.
 *
 * Экономим на полях, просветах и подписи — но не на пальце. `shell.css` на этой
 * ширине опускал пункт капсулы до 44 точек; здесь он возвращается к 48, а
 * недостающая ширина забирается у внутренних полей кнопки.
 *
 * Считано, а не подобрано (320 точек, вырез 0):
 *   пристань 308 = кнопка создания 48 + просвет 6 + капсула 254;
 *   капсула 254 = обводка 2 + поля 8 + четыре пункта 244;
 *   244 = три неактивных по 48 (144) + активный 100 (значок 24, просвет 4,
 *   поля 16, подпись 56 с обрывом многоточием).
 *
 * Поле капсулы остаётся тем же, что и в `shell.css` (4 точки): высота капсулы
 * записана числом в `--nav-h`, и от неё отмеряет себя весь низ — лента, полоса
 * сообщений, всплывающие сообщения и подписи роликов. Сэкономить здесь две
 * точки значило бы развести настоящую высоту с той, по которой считают
 * остальные. */
@media (max-width: 400px) {
  .a2-dock {
    gap: 8px;
    max-width: calc(100% - 12px - var(--safe-l) - var(--safe-r));
  }
  .a2-nav { gap: 0; padding: 4px; }
  .a2-nav button { min-width: var(--nav-btn); padding: 0 2px; gap: 4px; }
  .a2-nav button.active { padding: 0 8px; }
}

/* ── 6. Ни одной горизонтальной прокрутки ────────────────────────────────────
 *
 * Страница целиком уехать вбок не может: `html, body` заперты `overflow:
 * hidden` (`app.css`). А вот колонки прокручиваются сами и объявлены `overflow:
 * auto` — то есть вбок тоже. Одна карточка, одна картинка или одно длинное
 * слово шире колонки — и лента начинает ездить вбок, унося шапку и пристань в
 * сторону от содержимого.
 *
 * `overflow-x: hidden` при `overflow-y: auto` ничего не обрезает сверх того,
 * что уже обрезает `auto`: отсекается только сама возможность увезти колонку
 * вбок. Полки, которым прокрутка нужна по замыслу (отборы ленты, истории,
 * плитки медиа), — отдельные ящики со своим `overflow-x: auto`, и это правило
 * их не касается. */
.social-main,
.social-side { overflow-x: hidden; }

/* Страховка от того, что шире своего места. Не «на всякий случай»: карточка
 * ленты приезжает с сервера вместе с медиа, и его размеры продукту заранее не
 * известны — снимок 4000 точек в ширину рисуется своим размером, если ему не
 * сказать иначе.
 *
 * Названы именно вложения, а не «всё подряд»: правило вида `.social-main > *`
 * перебило бы `max-width: var(--feed)` у полки историй, у отборов и у полос
 * ленты — они объявлены раньше и той же специфичности, — и на столе лента
 * растянулась бы во всю ширину колонки. Ширины расставлены по замыслу, а
 * страховка нужна только тому, чей размер приходит извне. */
.social-main img,
.social-main video,
.social-main canvas,
.social-main iframe,
.social-main pre,
.social-side img { max-width: 100%; }

/* ── 7. Крупные цели на телефоне ─────────────────────────────────────────────
 *
 * Общее правило «не меньше 48» для кнопок и значков есть в `app.css`, а полный
 * набор 44-точечных целей — только ниже 700. Между 701 и 900 (планшет в
 * книжной ориентации, телефон в альбомной) раскладка уже телефонная, палец
 * тот же, а цели оставались настольными. Здесь эта щель закрыта.
 *
 * Слова-действия внутри полос («Ещё раз», «Показать», «Вернуть») — тоже цели:
 * они выглядят текстом, но нажимают их пальцем. */
@media (max-width: 900px) {
  .social-head .chip,
  .modes-row .chip { min-height: 44px; }

  /* ⭐ Найдено живым кадром 02.09.2026: полка вкладок ломалась надвое.
   *
   * На широком экране четыре вкладки ленты стоят в шапке, и `app.css` держит
   * их в одну строку правилом `.social-head .chips { flex-wrap: nowrap;
   * overflow-x: auto }`. Но на телефоне `social.js` (`modesRow()`) переносит
   * их из шапки в `.modes-row` посреди колонки — а туда это правило не
   * достаёт: оно выписано от `.social-head`.
   *
   * Итог на 390 точках: `.chips` наследовал общий `flex-wrap: wrap`, четыре
   * вкладки не помещались в 310 точек, «События» уезжали на вторую строку —
   * и вываливались за скруглённую подложку капсулы, которая рассчитана на
   * одну строку. Полка становилась 98 точек высотой вместо 44 и читалась
   * сломанной вёрсткой.
   *
   * Лечится тем же приёмом, что и в шапке: не помещается — прокручивается
   * вбок, подпись при этом всегда целая. Полоску прокрутки прячем, как это
   * уже сделано для полок в `brand.css`. */
  .modes-row .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .modes-row .chips::-webkit-scrollbar { display: none; }

  /* ── Плитка «Создать историю» читается в одну строку ──────────────────────
   *
   * На телефоне полка историй — кружки, а не карточки (`app.css`): плитка 74
   * точки, подпись под ней. Соседям этого хватает: «Игорь», «Марина» — одно
   * короткое слово. А у первой плитки подпись из двух слов («Создать
   * историю», «Create a story»), и в 74 точки она не влезала никогда: рвалась
   * на две строки, первая плитка становилась выше остальных, и ровный ряд
   * кружков шёл уступом.
   *
   * Плитке создания дано 96 точек — только ей, соседей не трогаем: их
   * подписи и так стоят в строку, а шире кружки на 390 не нужны. Кегль
   * подписи — 11 вместо 13, как у полки при крупном тексте (`alpha2.css`).
   *
   * Числа не на глаз, а замерены в браузере на 390 при обычном кегле:
   * «Создать историю» — 93 точки, «Creați o poveste» — 85, «Create a story» —
   * 77. Самый длинный из трёх языков помещается в 96 с запасом в три точки.
   * Шире плитку не делаем: она и так на 22 точки шире соседних кружков, и
   * лишние тридцать превратили бы ровный ряд в уступ ради запаса, который
   * ничем не подтверждён.
   *
   * ⚠️ Переносы **разрешены**, просто перестали быть нужны. `nowrap` здесь
   * был бы ловушкой: при 200 % кегля подпись не влезет ни в какую ширину, и
   * жёсткая строка вылезла бы за плитку или обрезалась. Вместо этого — запрет
   * рвать слово посередине и `balance`, чтобы редкий перенос шёл по словам и
   * ровными строками.
   *
   * ⚠️ Ниже 381 точки правило не действует намеренно: там своё, выверенное
   * лечение обрезки на 320 × 200 % (`alpha2.css`, «Точечная причина обрезки»),
   * и перебивать его отсюда значило бы чинить одно, ломая другое. */
  .stories { align-items: start; }
}

@media (min-width: 381px) and (max-width: 900px) {
  .story-add { width: 96px; }
  .story-add small {
    max-width: 96px;
    font-size: calc(11px * var(--scale));
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    text-wrap: balance;
  }

  .social-offline .link-btn,
  .read-continue .link,
  .read-line .link,
  .read-hidden-note .link,
  .social-page .state .link-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 8. Кегль не назначает себе браузер ──────────────────────────────────────
 *
 * Правило-сторож, а не починка увиденного, и разница названа честно.
 *
 * # Что на кадре
 *
 * На фотографиях iPhone от 02.09.2026 кадр 1 показывает ту же ленту, что и
 * кадр 2, но крупнее примерно в полтора раза: «Сообщества» уходит за правый
 * край, «Продолжить чтение» обрезано, значков шапки не видно вовсе.
 *
 * Это **не** автоувеличение. Проверяется переносами: на обоих кадрах строки
 * ломаются в одних и тех же местах («События» второй строкой полки, «Вы
 * остановились здесь / 19:12» в две строки, подпись истории в две). Увеличь
 * кегль — разметка пересчиталась бы и переносы разъехались. Одинаковые
 * переносы при разном размере означают ровно одно: человек развёл экран
 * пальцами. Это его право, и отбирать его нельзя — `maximum-scale` и
 * `user-scalable=no` здесь не появятся ни при каких обстоятельствах.
 *
 * # Зачем тогда правило
 *
 * Затем, что второй способ увеличить текст у WebKit есть, и он наш: «text
 * autosizing». По умолчанию (`text-size-adjust: auto`) браузер, увидев блок
 * шире видимой области, решает, что страница не приспособлена к телефону, и
 * увеличивает кегль внутри такого блока сам, множителем, которого нет ни в
 * одном файле. Достаточно одной карточки, на миг оказавшейся шире экрана —
 * карусель вложений, длинная ссылка, полка до того, как получила свою ширину,
 * — и текст вокруг остаётся раздутым до следующей перерисовки.
 *
 * Наша раскладка приспособлена к телефону от начала до конца: ширины,
 * безопасные поля и зоны нажатия расставлены здесь и в `shell.css` руками.
 * Второе мнение браузера о кегле ей не нужно.
 *
 * `100%`, а не `none`: `none` в старом WebKit заодно запрещал щипок, то есть
 * отнимал ровно то, чем человек на кадре 1 и воспользовался.
 *
 * Только веб: файл подключает один `web.html`. Окно программы и Android
 * автоувеличения не знают вовсе. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── 9. Полка вкладок — одна строка на любой ширине телефона ─────────────────
 *
 * ⭐ Найдено на фотографиях iPhone от 02.09.2026 (кадр 3, «Обзор»).
 *
 * Вкладки ленты полкой уже стали (пункт 7 выше). А на «Обзоре» их две — отбор
 * поиска и разделы обзора, — и обе складывались на 390 точках в **три
 * строки**: 148 и 136 точек, вместе больше четверти экрана, ещё до первой
 * найденной строки. Ниже 381 точки это уже лечится (`alpha2.css`), и оттого
 * поломка была видна ровно на самых ходовых телефонах — 390 и 430, — а на
 * самом узком не воспроизводилась.
 *
 * Лечение то же, что у вкладок ленты, и по той же причине: не помещается —
 * прокручивается вбок, подпись при этом всегда целая. Полоску прокрутки
 * прячем, как это уже сделано для полок в `brand.css`.
 *
 * Названы ровно полки вкладок, а не `.chips` вообще. Разница существенна: под
 * тем же именем живут списки — сохранённые интересы, виды жалоб, полки
 * материалов. Список, свёрнутый в горизонтальную полку, прячет половину себя
 * за краем экрана, и это было бы не починкой, а второй поломкой. Списки
 * по-прежнему переносятся по строкам.
 *
 *   `[role="tablist"]` — вкладки ленты и разделы «Обзора» (`social.js`,
 *                        `discover.js`): это вкладки и по разметке;
 *   `.find-tabs`       — отбор поиска (`social.js`, `drawTabs`): по смыслу
 *                        та же полка, но кнопки там переключатели
 *                        (`aria-pressed`), и звать их вкладками нельзя. */
@media (max-width: 900px) {
  .chips[role="tablist"],
  .chips.find-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chips[role="tablist"]::-webkit-scrollbar,
  .chips.find-tabs::-webkit-scrollbar { display: none; }
  .chips[role="tablist"] > *,
  .chips.find-tabs > * { flex: 0 0 auto; }

  /* «Интересы» стоят в конце ряда и отодвинуты `margin-left: auto`
   * (`discover.css`). В полке, которая прокручивается, «прижать к правому
   * краю» смысла не имеет: край у неё не там, где край экрана. Отодвигаем
   * просветом — он виден и в начале полки, и в её конце. */
  .dsc-tabs .dsc-tab-interests { margin-left: 8px; }
}

/* ── 10. Подпись вкладки страницы человека ───────────────────────────────────
 *
 * Три вкладки делят ширину поровну (`flex: 1`, `app.css`), и в свою треть от
 * 320 точек не помещаются ни «Evenimente», ни «Publications»: слово одно, и
 * переноситься ему негде — оно вылезало за кнопку.
 *
 * Обрыв многоточием, как у заголовка раздела и у подписи активного пункта
 * капсулы: подпись действия не переносится вовсе, а не помещается — обрывается
 * (`app.css`, «Подпись действия не переносится»).
 *
 * ⚠️ Имени автора здесь нет намеренно. Оно лечится в `home.css` — там же, где
 * лежит вся шапка записи, и вместе с переносом кнопки подписки на свою строку,
 * без которого одного обрыва мало (замер на 390 в румынском: имени доставалось
 * 47 точек). Второе правило о том же в этом файле перебивало бы то по порядку
 * файлов и однажды разошлось бы с ним. */
@media (max-width: 900px) {
  .profile-tab { min-width: 0; }
  .profile-tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══ Телефон по эталону 2027 (03.09.2026) ═══════════════════════════════════
 *
 * Вадим с айфона: «не нравится, как выглядит». Сверено с эталонами
 * `docs/MVQ-FINAL-DESIGN-2027/01-mobile-social-light.png` и `05-…-dark.png`:
 * там нижняя полоса разделов во всю ширину и с подписями, строка «Что
 * нового?» в одну линию с двумя значками, плитка «История» квадратом со
 * скруглением. У нас же были плавающая капсула с отдельной круглой кнопкой,
 * композер в два этажа с пятью значками и одинокий серый круг «Создать
 * историю» — предметы, собранные из первых попавшихся деталей. Здесь телефон
 * приводится к эталону без единой новой строки текста и без правки разметки. */
@media (max-width: 900px) {
  /* ── Нижняя полоса разделов во всю ширину ────────────────────────────────
   * Плавающая капсула читалась плавающей, но прятала под собой текст записи
   * и отдавала «Создать» отдельным кругом с ореолом. Полоса стоит на своём
   * месте, подписи есть у всех разделов, «Создать» — в той же полосе справа. */
  .a2-dock {
    left: 0; right: 0; bottom: 0;
    transform: none;
    width: 100%; max-width: none;
    gap: 0;
    padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
    pointer-events: auto;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--line);
  }
  .a2-nav {
    flex: 1 1 auto; width: auto; max-width: none; min-width: 0;
    justify-content: space-around; gap: 0; padding: 8px 4px 8px;
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .a2-nav button,
  .a2-nav button.active {
    flex: 1 1 0; min-width: 0; min-height: 52px;
    flex-direction: column; gap: 4px; padding: 4px 2px;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
  }
  .a2-nav button .a2-label,
  .a2-nav button.active .a2-label {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Активный пункт плоский: подпись акцентом и вес, без плашки и без тени —
   * капсула здесь развёрнута в ровную полосу, и приподнятый пункт ломал бы
   * её ряд. Поэтому `box-shadow: none` и `outline: 0`.
   *
   * ⚠️ Но эти два свойства гасили и **след клавиатуры**: продукт рисует его
   * как раз обводкой и ореолом (`brand.css`, `:focus-visible`), а правило
   * ниже сильнее (0,2,1 против 0,1,0) и стоит позже по списку файлов. Выходило
   * так: по Tab доходишь до текущего раздела — и перестаёшь понимать, где ты.
   * У соседних пунктов след был, у активного пропадал, то есть терялся ровно
   * на том, который чаще всего и получает фокус при возврате на страницу.
   *
   * Гасим только в покое. Пара `:focus-visible` ниже длиннее на один класс
   * (0,3,1) и возвращает ровно тот же след, что у всех прочих кнопок
   * продукта: `!important` для этого не нужен. */
  .a2-nav button.active { color: var(--accent); font-weight: var(--fw-strong); box-shadow: none; outline: 0; }
  .a2-nav button.active:focus-visible {
    outline: var(--focus-w) solid var(--focus);
    outline-offset: var(--focus-off);
    box-shadow: 0 0 0 4px var(--focus-halo);
  }
  .a2-nav .a2-glyph { width: 26px; height: 26px; }
  .a2-nav .a2-glyph .ic { width: 24px; height: 24px; }
  .a2-new {
    width: 44px; height: 44px; margin: 0 8px 0 4px;
    box-shadow: none;
  }
  .a2-new .ic { width: 22px; height: 22px; }

  /* ── Плитка «Создать историю» — квадрат со скруглением, как на эталоне ─── */
  .stories { padding: 12px 12px 4px; }
  .story-add .plus {
    width: 64px; height: 64px;
    border-radius: var(--r-lg);
    background: var(--surface2); color: var(--text);
  }
  .story-add small, .story-dot small {
    font-size: var(--fs-xs); font-weight: var(--fw-medium);
    white-space: normal; text-align: center; line-height: 1.2; max-width: 80px;
  }
  .story-add, .story-dot { width: 84px; justify-items: center; }
  /* Подпись — блоком по центру: `-webkit-box` из `alpha2.css` не центрирует. */
  .stories .story-add small, .stories .story-dot small { display: block; text-align: center; }

  /* ── «Что нового?» — одна строка ─────────────────────────────────────────
   * Лицо, поле капсулой, два значка. Из пяти значков остаются камера и
   * снимок: остальные ждут в самом редакторе, куда ведёт поле. `:has` знают
   * все браузеры телефонов с 2022 года; где не знают — останутся все пять. */
  .social-compose {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px; padding: 12px 12px; align-items: center;
  }
  .social-compose > .avatar { width: 40px; height: 40px; }
  .compose-body { display: flex; align-items: center; gap: 2px; min-width: 0; }
  .social-compose textarea.field {
    flex: 1 1 auto; min-width: 0;
    min-height: 44px; padding: 12px 16px;
    border-color: transparent; border-radius: 999px;
    background: var(--field);
  }
  .compose-row { flex: none; margin: 0; gap: 0; flex-wrap: nowrap; }
  .compose-row .icon-btn { width: 44px; height: 44px; }
  .compose-row .icon-btn:not(:has(svg[data-icon="camera"])):not(:has(svg[data-icon="image"])) { display: none; }

  /* ── Вкладки ленты делят ширину поровну ─────────────────────────────────
   * Четыре слова на 390 точках помещаются мелким кеглем; не поместились
   * (другой язык, крупный шрифт) — полка по-прежнему прокручивается. */
  .modes-row { padding: 8px 12px 0; }
  .modes-row .chips[role="tablist"] > .chip {
    flex: 1 0 auto; min-width: 0; justify-content: center;
    padding: 0 8px; font-size: var(--fs-sm);
  }
  .modes-row .chips[role="tablist"] > .chip:first-child { padding-left: 8px; }
  .modes-row .chips[role="tablist"] > .chip::after,
  .modes-row .chips[role="tablist"] > .chip:first-child::after { left: 6px; right: 6px; }

  /* ── Шапка записи: «Подписаться» словом, без коробки ──────────────────── */
  .post-head > .post-sub {
    border-color: transparent; background: transparent;
    color: var(--link); padding: 0; min-height: 32px; justify-content: flex-start;
  }
}