/* Главный экран ленты: вкладки, чтение, быстрые действия карточки, плотность.
 *
 * Два слоя, и они разные по природе. Первый — про поведение: подписка из
 * карточки, «не интересно», причина показа, место чтения, прочитанное.
 * Второй (со второй половины файла) — про вид: сколько записей помещается в
 * кадр, как читается иерархия карточки, как выглядят полка историй, строка
 * «что нового», полка вкладок и полоса откликов. Второй слой описан своим
 * заголовком; там же записаны четыре правила, которым он подчиняется.
 *
 * Отдельным файлом, а не строками по app.css: это одна тема — «как человек
 * читает главный экран», — и растащенная по общему листу она расходится с
 * первой же правкой. Подключается последним (web.html), поэтому здесь можно
 * поправить то, что общий лист задал раньше, не расставляя !important.
 *
 * Собственных цветов тут нет ни одного: всё берётся из tokens.css, иначе
 * тёмная тема и крупный шрифт обошли бы этот файл стороной.
 */

/* ── Шапка карточки: подписка и «не интересно» ──────────────────────────────
 *
 * Общий лист задаёт три колонки (лицо, имя, меню). Здесь их пять: между именем
 * и меню помещаются «Подписаться» и крестик. Пустые колонки схлопываются в
 * ноль, поэтому карточка без этих кнопок выглядит ровно как раньше. */
.post-head { grid-template-columns: 44px minmax(0, 1fr) repeat(3, auto); }

.post-sub {
  white-space: nowrap;
  align-self: center;
}

/* «Подписаны» — не кнопка: нажимать больше не на что. Слово со знаком, чтобы
 * человек увидел следствие своего нажатия, а не просто исчезновение кнопки. */
.post-subbed {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: var(--fs-sm); white-space: nowrap;
}

/* Крестик «не интересно» приглушён: он рядом с меню, и два одинаково ярких
 * значка в углу карточки спорят друг с другом. */
.post-nope { color: var(--muted); }
.post-nope:hover { color: var(--text); }

/* ── Причина: строка, которая открывается ───────────────────────────────────
 *
 * Выглядит той же приглушённой строкой, что и раньше, — но это кнопка, и знак
 * вопроса рядом об этом говорит. Без знака человек не догадается нажать, а
 * подчёркивание сделало бы из объяснения ссылку, которой оно не является. */
.post-why.why-open {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; padding: 2px 0;
  color: var(--muted); font-size: var(--fs-xs);
  cursor: pointer; text-align: left;
}
.post-why.why-open:hover { color: var(--text); }
.post-why.why-open .ic { opacity: .7; }

/* ── Прочитанное ────────────────────────────────────────────────────────────
 *
 * Прочитанная карточка не прячется и не сереет целиком — она лишь чуть тише:
 * человек должен отличать её взглядом, не вчитываясь, и при этом по-прежнему
 * мочь её прочитать. Полупрозрачность возвращается к единице при наведении и
 * при попадании фокуса внутрь: приглушённая карточка, в которой стоит курсор,
 * читается как недоступная. */
.post.seen { opacity: .72; transition: opacity .18s ease; }
.post.seen:hover, .post.seen:focus-within { opacity: 1; }

/* Прочитанное скрыто — тихая строка над лентой с выключателем. */
.read-hidden-note {
  display: flex; align-items: center; gap: 8px;
  max-width: var(--feed); margin: 0 auto 10px; padding: 8px 16px;
  color: var(--muted); font-size: var(--fs-sm);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface2);
}

/* ── Место чтения ───────────────────────────────────────────────────────────
 *
 * Черта поперёк ленты со словом посередине. Не значок у карточки: человеку
 * нужна граница, а не отметка на каждой записи. Цвет — акцентный, потому что
 * это единственная линия в ленте, которую он ищет глазами. */
.read-line {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--feed); margin: 6px auto 14px; padding: 0 16px;
}
.read-line::before,
.read-line::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--accent); opacity: .45;
}
.read-line-word {
  color: var(--accent); font-size: var(--fs-xs); font-weight: 600;
  white-space: nowrap;
}
.read-line .link { flex: 0 0 auto; }

/* «Вы остановились здесь» — предложение, а не прыжок. Стоит над лентой, чтобы
 * человек увидел его до того, как начнёт листать заново. */
.read-continue {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--feed); margin: 0 auto 12px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--muted); font-size: var(--fs-sm);
}
.read-continue .btn { flex: 0 0 auto; }

/* Строка отмены на месте спрятанной карточки.
 *
 * Той же ширины и того же отступа, что и карточка: лента не должна дёргаться
 * оттого, что одна запись стала строкой. */
.post.hidden-note {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: var(--fs-sm);
}
.post.hidden-note .btn { flex: 0 0 auto; }

/* Ссылка-слово внутри строк: не кнопка и не подчёркнутая ссылка, а третье —
 * действие рядом с текстом. */
.read-line .link,
.card-note .link,
.read-hidden-note .link {
  border: 0; background: transparent; padding: 0;
  color: var(--accent); font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.read-line .link:hover,
.card-note .link:hover,
.read-hidden-note .link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ════════════════════════════════════════════════════════════════════════════
 * ПЛОТНАЯ ЛЕНТА (02.09.2026)
 *
 * Ниже — второй слой этого же файла: не «что человек делает с карточкой», а
 * «как главный экран выглядит и сколько его помещается в окно». Одно от другого
 * не отделить, поэтому лежит рядом, но своим куском.
 *
 * Задача была сформулирована так: плотнее нынешнего экрана, сильнее иерархия,
 * крупнее полезное медиа, карточка читается как содержимое, а не как панель
 * управления. Отсюда четыре решения, которые дальше повторяются везде:
 *
 *  1. Рамки вокруг каждого элемента почти нет: она ослаблена до 45 %, и
 *     карточка отличается от фона слоем, а не обводкой. Полная рамка остаётся
 *     ровно там, где она что-то значит: у записи в очереди (`.post.queued`,
 *     пунктир) и у вложенного перепоста (`.repost`).
 *
 *     Тень, подсвеченную грань и подъём под указателем даёт `brand.css`, а он
 *     подключается ПОСЛЕ этого файла. Отсюда правило для всего куска: то, что
 *     фирменный слой уже назначил — тень карточки, радиус кнопки отклика,
 *     междустрочие текста, заливка выбранной вкладки, — здесь не назначается
 *     вовсе. Написанное тут проиграло бы порядком и осталось бы мёртвой
 *     строкой, которую следующий читатель принял бы за работающую.
 *  2. Плотность берётся отступами, а не размером текста и не зонами нажатия.
 *     `--fs-sm` — нижняя граница подписи, `--tap` — нижняя граница цели: и то
 *     и другое здесь не уменьшается ни на одной ширине. Ужимаются поля,
 *     промежутки и высота полок.
 *  3. Тёмная пелена поверх снимка берётся из `--rail-bg`, а не из `--bg`.
 *     Это единственный токен, тёмный в обеих темах (полоса пространств —
 *     край продукта), а подпись поверх фотографии обязана быть светлой и
 *     днём: `--bg` в светлой теме выбелил бы кадр и убил бы текст на нём.
 *     Пара к нему — `--rail-ink-on`, светлый в обеих темах.
 *  4. Своих цветов по-прежнему нет ни одного: только токены и `color-mix`
 *     от них. Иначе светлая тема и крупный шрифт обойдут этот файл стороной.
 *
 * Почти всё, что ниже, стоит в `@media (min-width: 901px)` — и это не
 * осторожность, а необходимость: `app.css` правит полку историй, полосу
 * действий и поля карточек в своих `@media (max-width: 900px)`, а медиазапрос
 * веса селектора не добавляет. Безусловное правило здесь победило бы их
 * порядком и снесло бы телефону и кружки историй, и сорокавосьмиточечные цели.
 * Своё для узкого экрана — в конце файла, отдельным запросом.
 */

/* ── Ритм страницы ──────────────────────────────────────────────────────────
 *
 * Между карточками было 14 точек (поля соседей схлопываются: 14 и 14 дают 14,
 * а не 28), внутри — по 16 со всех сторон. Стало 10 между, 14 сверху и 10
 * снизу. Нижнее поле ужато сильнее прочих не для ровного счёта: под ним стоит
 * полоса действий на своих сорока точках, и своё воздушное пространство она
 * несёт с собой — добавлять его второй раз незачем.
 *
 * Итого двенадцать точек с каждой записи. Это не «чуть плотнее»: на экране в
 * 900 точек высоты помещается примерно на треть записи больше, а из таких
 * третей и набирается разница между «листаю ленту» и «прокручиваю пустоту». */
@media (min-width: 901px) {
  .social-compose, .post { margin: 10px auto; padding: 16px 16px 12px; }
}
/* Поля самой страницы здесь не трогаются: их держит `shell.css`
 * (`.social-page { padding: 12px 24px 32px }`), и он подключается после этого
 * файла — заодно ровняя поля страницы с полями шапки над ней. Своё значение
 * тут проиграло бы порядком. */

/* Карточка — слой, а не обведённый прямоугольник.
 *
 * Тень и подсвеченную верхнюю грань карточке даёт фирменный слой (`brand.css`,
 * `inset 0 1px 0 --mv-edge` + `--mv-e1`), и он подключается после этого файла:
 * своё `box-shadow` здесь было бы мёртвой строкой. Остаётся рамка — она ничья,
 * и ослабляется до 45 %: двадцать обведённых прямоугольников подряд читаются
 * таблицей, а совсем убрать её нельзя — `brand.css` под указателем красит её в
 * акцент (`.post:hover`), и переход «из ничего в линию» на каждой карточке
 * мигал бы сильнее, чем помогал. */
.social-compose, .post {
  border-color: color-mix(in srgb, var(--line) 45%, transparent);
}
/* Пунктир очереди и рамка перепоста — единственные, что здесь значат. Оба
 * задают цвет сами и весом селектора берут своё; `box-shadow` у вложенной
 * карточки снимается: тень внутри тени читается как грязь. */
.repost .post { box-shadow: none; padding: 12px; }

/* ── Полка историй ──────────────────────────────────────────────────────────
 *
 * Была плитка 104 × 148 с лицом посередине и подписью под ним. Обложка при
 * этом лежала фоном и наполовину закрывалась кружком в 62 точки: место под
 * кадр было, а кадра видно не было. Стало: обложка во всю плитку, лицо —
 * кружком 38 в углу, подпись — понизу на пелене. Разметка и классы те же
 * (`stories.js`, `полкаИсторий`), двух наборов узлов здесь по-прежнему нет.
 *
 * Плитка крупнее — 112 × 172 вместо 104 × 148, — и это сознательный размен:
 * в ряд их влезает пять с половиной вместо шести. Полка от этого не беднеет,
 * а богатеет: показанного кадра в каждой плитке стало вчетверо больше, а
 * початая шестая у правого края честно говорит, что полка листается — ровно
 * шесть штук встык выглядели концом списка. */
@media (min-width: 901px) {
  .stories { gap: 12px; padding: 12px 0 2px; }

  .story-dot, .story-add { width: 112px; height: 172px; }

  .story-dot {
    border: 0;
    align-content: end; justify-items: stretch; gap: 0;
    padding: 12px;
    background: var(--surface2);
  }
  /* Кадр под пеленой: снизу почти непрозрачно, к середине сходит на нет.
   * `--rail-bg` — тёмный в обеих темах (см. верхнее пояснение). */
  .story-cover::after {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--rail-bg) 92%, transparent) 0,
      color-mix(in srgb, var(--rail-bg) 52%, transparent) 38%,
      transparent 72%);
  }
  .story-cover img { transition: transform var(--slow) var(--ease); }
  .story-dot:hover .story-cover img { transform: scale(1.06); }

  /* Лицо — в углу и небольшое: на плитке главное это кадр, а чьё — второе.
   * Кольцо остаётся акцентным у непросмотренного и серым у просмотренного,
   * как и было: это единственный признак «есть новое» на полке. */
  .story-dot .ring {
    position: absolute; top: 9px; left: 9px; z-index: 1;
    width: 38px; height: 38px; padding: 2px;
  }
  .story-dot .ring .avatar { width: 100%; height: 100%; border-width: 2px; }

  /* Подпись прижата к левому нижнему углу — там, где её ищет глаз, дочитав
   * кадр. По центру она читалась подписью к кружку, а не к плитке. */
  .story-dot small {
    max-width: 100%; text-align: left;
    font-size: var(--fs-sm); line-height: 1.25;
  }
  .story-dot:not(.plain) small { color: var(--rail-ink-on); }

  /* «Создать историю» — та же плитка, но пустая и своим узором: это действие,
   * а не чужой кадр, и путать их нельзя даже боковым зрением. */
  .story-add {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--line-strong) 80%, transparent);
    gap: 12px;
  }
  .story-add .plus { width: 46px; height: 46px; }
  .story-add small { font-weight: 600; }
  .story-add:hover { background: var(--surface2); border-color: var(--accent); }
}

/* ── Строка «Что нового?» ───────────────────────────────────────────────────
 *
 * Была в две строки: поле на 44 точки, под ним ряд значков ещё на 44, плюс по
 * 16 полей — около 120 точек высоты у двери, за которой ничего ещё не
 * написано. Стала одной строкой: лицо, поле капсулой, значки справа — около
 * 60. Сама дверь при этом на месте и работает так же: нажатие в поле
 * раскрывает редактор прямо в ленте, значок — его же, но сразу к своему делу.
 *
 * Значков стало пять (снимок, видео, опрос, история, событие) — и все пять
 * ведут в редактор сразу к своему делу, а не «куда-нибудь». Это условие, а не
 * оформление: см. `composer()` в `social.js`. */
@media (min-width: 901px) {
  .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: 8px; min-width: 0; }

  /* Поле — капсула на подложке `--field`, а не прозрачная строка: прозрачная
   * не отличалась от текста записи под ней, и человек не понимал, куда
   * нажимать. Рамки нет, пока в поле не встали. */
  .social-compose textarea.field {
    flex: 1 1 auto; min-width: 0;
    min-height: 40px; padding: 8px 16px;
    border-color: transparent; border-radius: 999px;
    background: var(--field);
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .social-compose textarea.field:hover { background: var(--surface2); }
  .social-compose textarea.field:focus {
    background: var(--field);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  }

  .compose-row { flex: none; margin-top: 0; gap: 0; }
  .compose-row .icon-btn { width: 36px; height: 36px; }
}

/* ── Полка вкладок ──────────────────────────────────────────────────────────
 *
 * Полка ужата: подложка 3 вместо 4, фишка 32 точки высоты вместо 34, поля по
 * 14, подпись — `--fs-sm`. Шапка от этого не становится ниже (её высоту
 * держит `--head`), но полка перестаёт быть в ней самым крупным предметом и
 * пропускает вперёд название раздела.
 *
 * ⚠️ Цвет выбранной вкладки здесь НЕ трогается, и это решение, а не пропуск.
 * Первый заход менял заливку на мягкую пару акцента (`--accent-soft`) — чтобы
 * вкладка не спорила с залитой кнопкой создания рядом. Так делать нельзя по
 * двум причинам сразу. Во-первых, `brand.css` подключается позже и рисует
 * выбранной фишке фирменную ось (`--mv-sweep`) поверх любой заливки: вышла бы
 * ось поверх мягкого фона со светлой буквой от нас, то есть непосчитанный
 * контраст. Во-вторых, там это записано как принятое решение — «залито
 * целиком, потому что на `--surface2` пелена в 18 % не видна вовсе», — и
 * менять его надо в фирменном слое и целиком, а не одной строкой из файла
 * ленты. Меняется только то, что ничьё: размеры и отклик на указатель. */
@media (min-width: 901px) {
  .social-head .chips { padding: 4px; }
  .social-head .chip {
    min-height: 32px; padding: 0 16px;
    font-size: var(--fs-sm);
  }
  /* Невыбранная фишка отзывается на указатель. Выбранная — нет: она и так
   * залита, и подсветка под курсором читалась бы вторым состоянием. */
  .social-head .chip:hover:not(.active) { background: color-mix(in srgb, var(--surface) 70%, transparent); }
}

/* ── Шапка карточки ─────────────────────────────────────────────────────────
 *
 * Три мелких правки, и все три про одно: чтобы наверху карточки было видно
 * имя, а не панель.
 *
 *  • Промежуток 10 вместо 12, лицо 42 вместо 44 — шапка становится ниже на
 *    строку подписи, и текст записи поднимается выше сгиба.
 *  • Имя — 650, домашняя ступень полужирного (та же, что у заголовков карточек
 *    справа). Обычный `b` даёт 700: на 15 точках это уже плакат, и рядом с ним
 *    приглушённая подпись читается не тише, а мельче.
 *  • Кнопки угла (крестик «не интересно» и три точки) приглушены до `--muted`
 *    и возвращают полный цвет под курсором. Зона нажатия при этом прежняя,
 *    `var(--tap)`: тише становится цвет, а не цель. */
.post-head { gap: 12px; }
.post-name b { font-weight: 650; letter-spacing: -.01em; }

/* ── Имя автора не рвётся посреди слова ──────────────────────────────────────
 *
 * `app.css` разрешает шапке записи перенос внутри слова
 * (`.post-head b { overflow-wrap: anywhere }`), и это не ошибка: имя человек
 * придумывает сам, и одно слово в сорок букв обязано переноситься, а не
 * вылезать за карточку.
 *
 * Но `anywhere` делает и второе, менее очевидное: он обнуляет min-content
 * колонки — считается, что слово можно порвать где угодно, значит минимальная
 * ширина равна одной букве. Дорожка `minmax(0, 1fr)` схлопывается до того,
 * что осталось от соседей, и рвёт имя, даже когда до тесноты далеко.
 *
 * `break-word` защищает ровно так же (слишком длинное слово всё равно
 * переносится и за карточку не выходит), но min-content считает по самому
 * длинному слову — и дорожка имени перестаёт схлопываться первой. */
.post-head b { overflow-wrap: break-word; }

/* Через `.post-head`, а не одним классом: поле сверху задано в общем листе
 * селектором `.post-head small`, и правило из одного класса его не перебьёт —
 * вес меньше, а порядок файлов тут ни при чём. */
.post-head .post-meta { margin-top: 1px; line-height: 1.3; }
.post-head .post-meta > span { white-space: nowrap; }

.post-head > .icon-btn { color: var(--muted); }
.post-head > .icon-btn:hover { color: var(--text); }

@media (min-width: 901px) {
  .post-head { grid-template-columns: 42px minmax(0, 1fr) repeat(3, auto); }
  .post-head > .avatar { width: 42px; height: 42px; }
}

/* ── Телефон: имя обрывается многоточием, а не столбиком ─────────────────────
 *
 * Замер на 390 в румынском (02.09.2026): шапка 336 точек делится как
 * 44 (лицо) + 61 (имя) + 95 (кнопка «Abonați-vă») + 48 + 48 (крестик и три
 * точки) + 40 (просветы). Имени достаётся **61 точка** — меньше, чем занимает
 * одно слово «Кожокару». «Андрей Кожокару» вставало тремя строками с разрывом
 * «Кожока / ру»: имя человека, разрезанное посередине.
 *
 * Одного `break-word` тут мало: дорожка объявлена `minmax(0, 1fr)`, её нижняя
 * граница — ноль, и до min-content дело не доходит. Раздвинуть дорожку тоже
 * нечем: у кнопки `min-width: max-content` (`app.css`), она не сжимается, а
 * зоны нажатия крестика и меню — 48 точек, и отнимать у пальца нельзя.
 *
 * Одним обрывом это не лечится. Замер после первой попытки: имя встало в
 * строку, но строка эта — «Анд…». Сорок семь точек не показывают имени, они
 * показывают, что оно есть; в русском кнопка «Подписаться» ещё шире
 * румынской (109 против 95), и колонка сжимается до неузнаваемости.
 *
 * Поэтому на телефоне кнопка подписки уходит **строкой ниже**, под имя и
 * подпись. Тогда наверху остаются лицо, имя и две зоны нажатия по 48, а имени
 * достаётся 166 точек вместо 47 — «Андрей Кожокару» помещается целиком в
 * обоих языках.
 *
 * Ничего при этом не пропадает и не урезается: ни «не интересно», ни меню, ни
 * подпись действия. Карточка неподписанного автора становится выше на одну
 * строку — это и есть цена, и она честная.
 *
 * Обрыв многоточием оставлен страховкой на случай выдуманного имени в сорок
 * букв: `overflow: hidden` не выпустит его за карточку так же, как раньше не
 * выпускал перенос. */
@media (max-width: 900px) {
  .post-head { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  .post-head > .post-sub {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    margin-top: 2px;
  }

  .post-name { min-width: 0; }
  .post-name b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── Текст записи ───────────────────────────────────────────────────────────
 *
 * Отдельного ограничения длины строки здесь нет, и это решение, а не
 * упущение. Требование задания «центр расширяется, но строки не становятся
 * чрезмерно длинными» уже выполнено токеном `--feed`: карточка не бывает шире
 * 700 точек ни при каком окне и ни при какой скрытой колонке, а это около 88
 * знаков — длинновато, но в пределах читаемого. Отдельный `max-width` на
 * тексте сузил бы его до 66 знаков и оставил справа сто точек пустоты, при
 * том что снимок под ним идёт во всю ширину: получилась бы не колонка для
 * чтения, а обрубленный абзац.
 *
 * Междустрочие здесь тоже не назначается: 1,55 и `text-wrap: pretty` тексту
 * записи уже даёт фирменный слой (`brand.css`), и он подключается позже.
 * Правится ровно два: поле сверху (6 вместо 8 — подпись автора и первая
 * строка текста принадлежат одному человеку и не должны стоять как два
 * абзаца) и перенос — длинная ссылка без пробелов раньше растягивала
 * карточку по ширине. */
.post-text {
  margin-top: 4px;
  overflow-wrap: anywhere;
}

/* Статья в ленте — блок, а не две строки подряд с остальным текстом: у неё
 * своё имя, своё время чтения и своя дверь. */
.article-lead {
  margin-top: 8px; padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--surface2);
  transition: background-color var(--fast) var(--ease);
}
.article-lead b { font-size: var(--fs-md); font-weight: 650; line-height: 1.3; }
.article-lead small { color: var(--muted); font-size: var(--fs-sm); }
.article-lead:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); }

/* Причина, закрепление и правка — одна приглушённая строка со значком, а не
 * три разных. */
.post-why { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.post-why .ic { opacity: .7; }

/* Опрос: ступень поля та же, что у карточки, столбик заливки — акцент темы. */
.poll { margin-top: 8px; gap: 8px; }
.poll-option { min-height: 42px; border-radius: var(--r-md); }
.post-place { margin-top: 8px; }

/* ── Отклики и полоса действий ──────────────────────────────────────────────
 *
 * Полоса стоит ближе к содержимому (8 вместо 12) и жмётся плотнее внутри, но
 * цели остаются во весь `--tap`: плотность берётся полями, а не размером
 * кнопки. Наведение у каждого знака своего цвета — «нравится» краснеет,
 * «обсудить», «поделиться» и закладка берут акцент: цвет здесь подсказывает,
 * что случится, ещё до нажатия. Отмеченное по-прежнему отличается и формой
 * знака, и цветом — одним цветом состояние не кодируется. */
.post-foot { margin-top: 2px; }
.post-actions { margin-top: 8px; }

@media (min-width: 901px) {
  .post-actions { gap: 2px; }
  /* Радиус здесь не назначается: его держит фирменный слой (`brand.css`,
   * `.post-action { border-radius: var(--radius) }`), и он подключается
   * позже — своё значение было бы мёртвой строкой. */
  .post-action {
    padding: 0 12px; gap: 8px;
    font-size: var(--fs-sm); font-weight: 600;
  }
  .post-action.like:hover {
    color: var(--bad);
    background: color-mix(in srgb, var(--bad) 14%, transparent);
  }
  .post-action.talk:hover,
  .post-action.share:hover,
  .post-action.save:hover,
  .post-action.pick:hover {
    color: var(--accent-soft-ink);
    background: var(--accent-soft);
  }
}

/* Свод откликов: те же капсулы, но с волоском по краю — на подложке карточки
 * заливка `--surface2` местами почти сливается с ней, и счётчики расплывались
 * в одно серое пятно. */
.post-reacts { margin-top: 8px; gap: 4px; }
.react-chip {
  padding: 4px 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

/* Полоска выбора знака. Имена под знаками остаются — без них полоска это
 * ребус, — а сам знак подрастает под курсором: шесть одинаковых кружков
 * иначе не показывают, на каком из них стоит указатель, пока не прочитаешь
 * подпись. Выбранный по-прежнему отмечен рамкой, а не только размером:
 * состояние движением не кодируется. */
.react-pick { border-radius: var(--r-md); }
.react-pick .react-glyph { transition: transform var(--fast) var(--ease); }
.react-pick:hover .react-glyph { transform: scale(1.18); }
.react-pick.on { background: var(--accent-soft); }

/* ── Телефон ────────────────────────────────────────────────────────────────
 *
 * Полка вкладок и кнопка настройки в одной строке. Вкладок стало четыре, и на
 * узком экране они прокручиваются вбок, а кнопка настройки остаётся на месте:
 * уехав вместе с ними, она пропала бы с экрана первой. */
@media (max-width: 900px) {
  .modes-row { display: flex; align-items: center; gap: 8px; }
  .modes-row .chips { flex: 1 1 auto; min-width: 0; }
  .modes-row > .icon-btn { flex: 0 0 auto; }
  .read-continue, .read-hidden-note, .read-line { padding-left: 12px; padding-right: 12px; }

  /* Плотность узкому экрану — теми же полями, что и широкому, и по той же
   * причине. Зоны нажатия при этом не трогаются вовсе: `app.css` держит здесь
   * свои 48 точек, а всё, что написано выше про полосу действий, полку историй
   * и строку «что нового», заперто в `min-width: 901px` именно ради этого. */
  .social-compose, .post { margin: 8px auto; padding: 12px 16px 8px; }
  .stories { padding-top: 12px; }
  /* Пять целей по 48 точек рядом с лицом не помещаются в 320 точек ширины —
   * без переноса пятая уезжала бы за край карточки. */
  .compose-row { flex-wrap: wrap; }
}

/* Совсем узко (320 точек, крупный шрифт): вкладки листаются, подписи не
 * режутся, кнопка настройки не выдавливает их за край. */
@media (max-width: 420px) {
  .modes-row .chip { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
  .post-sub { padding-left: 12px; padding-right: 12px; }
  .read-continue { flex-wrap: wrap; }
  .read-continue .btn { margin-left: auto; }
}

/* Крупный текст: строка «Вы остановились здесь» переносится, а не режется. */
@media (max-width: 380px) {
  .read-line { flex-wrap: wrap; }
  .read-line::before, .read-line::after { min-width: 16px; }
  .read-line-word { white-space: normal; }
}

/* Меньше движения — меньше движения. Приглушение прочитанного остаётся
 * (это цвет, а не движение), а плавный переход и плавная прокрутка к черте
 * выключаются: их просили не показывать. */
@media (prefers-reduced-motion: reduce) {
  .post.seen { transition: none; }
  /* Наплыв обложки истории, подсветка статьи, подрастающий знак отклика и
   * переливание поля «что нового» — украшение, и по просьбе они выключаются.
   * Плотность, иерархия и цвета остаются: это не движение. */
  .story-cover img,
  .article-lead,
  .react-pick .react-glyph,
  .social-compose textarea.field { transition: none; }
  .story-dot:hover .story-cover img { transform: none; }
  .react-pick:hover .react-glyph { transform: none; }
}

/* «Новые записи» — над лентой, заметно, но без крика.
 *
 * Липкой не делается намеренно: полоса, висящая над лентой всё время чтения,
 * превращается в рекламный баннер внутри своего же приложения. Она стоит там,
 * где человек её встретит, поднявшись наверх. */
.feed-fresh {
  margin: 4px 0 8px;
  background: var(--accent);
  color: var(--accentText);
  border: 0;
  font-weight: 600;
}
.feed-fresh:hover { background: var(--accent-hover); }
.feed-fresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }