/* ═══ Фирменный слой MVQ для веба и приложения на телефоне ═══════════════════
 *
 * Последний файл стилей веб-клиента. Он не переставляет ни одного экрана и не
 * трогает ни одного адреса: разделы, вкладки, порядок карточек и все состояния
 * остались ровно теми же. Здесь решается только одно — **как продукт выглядит
 * и как он отзывается на прикосновение**.
 *
 * Подключается ТОЛЬКО из `web.html`. Окно настольной программы (`index.html`)
 * его не грузит, и ни одна строка отсюда не касается ни окна, ни телефонного
 * приложения, ни мессенджера. Откат — снять одну строку из `web.html`.
 *
 * # Что здесь за характер
 *
 * Тот же, что задан в `tokens.css`, только сказанный до конца: графитово-синяя
 * глубина, спокойная бирюза и полевая олива второй дуги знака. Поверхности
 * лежат слоями и отличаются светлотой, а не рамкой; цветом залит только один
 * предмет на экране — главное действие; выбранное узнаётся мягкой плашкой и
 * бирюзовыми чернилами, а не заливкой во всю строку.
 *
 * Фирменная ось — переход от бирюзы к оливе — осталась там, где продукту нужно
 * назвать себя, и ушла оттуда, где ей положено молчать: обложка человека,
 * кольцо непросмотренной истории, история из букв и медальон пустого экрана
 * — да; кнопки, фишки и плашки — нет. Спокойный акцент — это плоский акцент.
 *
 * # Пять состояний, одно решение
 *
 *   покой      → цвет из токена, без рамки
 *   наведение  → пелена `--hover` (6 % цветом текста) — одинакова на карточке,
 *                фоне и всплывшем меню; только там, где есть указатель
 *   нажатие    → пелена `--press` и сжатие .98 (`app.css`) — «нажатие дошло»
 *   выбрано    → плашка `--active-bg`, чернила `--active-ink`, вес 620 —
 *                три признака сразу, потому что часть людей цвета не увидит
 *   фокус      → обводка `--focus` 2 px с отступом 2 и ореол `--focus-halo`
 *
 * # Чего здесь нет намеренно
 *
 * Ни одного внешнего запроса и ни одного своего числа цвета: цвет — только
 * из токенов, а значит, читаемость посчитана один раз. Скругления — только из
 * `--r-*`, длительности — только `--fast` / `--mid` / `--slow`, отступы — по
 * сетке 4/8. Движение объясняет переход и никогда не развлекает; всё, что
 * движется, замирает по `prefers-reduced-motion`.
 *
 * И ни одной чужой формы. У продукта своя ось цвета, свой знак, свой мотив и
 * своя геометрия карточки. Совпадать с другими он имеет право лишь там, где
 * форма не принадлежит никому, — круглый значок человека и ряд разделов.
 */

/* ── Ось фирмы ───────────────────────────────────────────────────────────────
 *
 * Три остановки и один наклон. Наклон 135° — сверху слева вниз направо, по
 * ходу чтения: так свет ложится на предмет, а не поперёк него.
 *
 * Середина считается в oklab, а не в sRGB: смешение бирюзы с оливой в sRGB
 * проходит через грязный серо-зелёный провал. В oklab дорога идёт по светлоте
 * ровно, и середина остаётся живой.
 *
 * `--mv-e*`, `--mv-edge`, `--mv-shade-rgb`, `--mv-halo`, `--mv-hair` остались
 * именами: их читают соседние файлы. Значения теперь берутся из `tokens.css`
 * (`--e1…--e3`, `--edge`, `--shade-rgb`, `--halo`, `--accent-line`), и второго
 * списка чисел здесь больше нет. */
:root {
  --mv-b1: var(--accent);
  --mv-b2: color-mix(in oklab, var(--accent) 52%, var(--brand-arc));
  --mv-b3: var(--brand-arc);

  /* Фирменная заливка большого предмета: обложка, кольцо истории, история
   * из букв. Не «кнопка с отливом» — кнопок это не касается. */
  --mv-sweep: linear-gradient(135deg, var(--mv-b1) 0%, var(--mv-b2) 58%, var(--mv-b3) 100%);

  /* Та же ось, приглушённая до подложки: медальон, значок без снимка. */
  --mv-veil: linear-gradient(135deg,
    color-mix(in srgb, var(--mv-b1) 18%, transparent) 0%,
    color-mix(in srgb, var(--mv-b3) 14%, transparent) 100%);
  --mv-veil-soft: linear-gradient(135deg,
    color-mix(in srgb, var(--mv-b1) 10%, transparent) 0%,
    color-mix(in srgb, var(--mv-b3) 7%, transparent) 100%);

  --mv-hair: var(--accent-line);
  --mv-halo: var(--halo);
  --mv-ink: var(--active-ink);

  --mv-shade-rgb: var(--shade-rgb);
  --mv-e1: var(--e1);
  --mv-e2: var(--e2);
  --mv-e3: var(--e3);
  --mv-edge: var(--edge);

  /* Высота знака в шапке. Одна на все места, где знак стоит. */
  --mv-mark: 32px;
}

/* ═══ Буквы ═════════════════════════════════════════════════════════════════
 *
 * Onest уже лежит рядом со страницей. Меняется то, как он поставлен: текст на
 * 450 (экран тоньше бумаги, и книжные 400 на нём бледнеют), выделенное на
 * 620, заголовок на 680 плотной посадкой. Всё — из `--fw-*`. */
body { font-weight: var(--fw-body); }
b, strong, .btn, .chip.active, .head-title { font-weight: var(--fw-strong); }

.social-page h1,
.social-page h2,
.head-title,
.auth-card h1,
.guest-body h1,
.state strong,
.card-title {
  letter-spacing: var(--ls-head);
  font-weight: var(--fw-head);
  text-wrap: balance;
}
.social-page h1,
.auth-card h1,
.guest-body h1 { line-height: var(--lh-tight); }

/* Строчный текст читают, а не разглядывают: ему нужен воздух между строк и
 * ровный правый край без одиноких слогов. */
.post-text,
.state p,
.auth-card .lead,
.card-note {
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

/* Подписи и метаданные — плотнее и тише. */
.post-head small,
.side-row small,
.card-row small,
.post-why { line-height: var(--lh-snug); }

/* Числа рядом со знаками: отклики, отметки, непрочитанное. Табличные цифры не
 * дёргают строку, когда «нравится» с 9 становится 10. */
.post-action span,
.react-chip,
.react-total,
.badge,
.side-date b,
.chip span {
  font-variant-numeric: tabular-nums;
}

/* Заголовок карточки правой колонки — прописными вразрядку: полка служебных
 * сводок обязана звучать тише того, ради чего человек пришёл. */
.side-card > header b {
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--muted);
}

/* Ссылки в тексте и «Все» у полок — бирюзовые чернила, не подчёркивание. */
.post-text a,
.side-card > header .link-btn,
.link-btn { color: var(--link); }
.post-text a:hover,
.side-card > header .link-btn:hover,
.link-btn:hover { color: var(--link-hover); }

/* ═══ Знак и пиктограммы ════════════════════════════════════════════════════
 *
 * # Знак
 *
 * Один размер на все места веб-клиента: 32 точки. Ширина не назначается
 * ни разу: на рейке знак намеренно сжат по ширине (`app.css`).
 *
 * ⚠️ Шапка выписана в трёх ступенях (`.social-head .head-brand .mvq-mark`):
 * `app.css` держит там свои 30 точек ровно таким же селектором.
 * ⚠️ Одно исключение оставлено: в окне ниже 560 точек знак над дверью входа
 * остаётся 26 (`app.css`, `@media (max-height: 560px)`) ради кнопки «Открыть». */
.social-head .head-brand .mvq-mark,
.head-brand .mvq-mark,
.guest-mark .mvq-mark,
.auth-brand .mvq-mark { height: var(--mv-mark); }

.mvq-mark .mark-name { font-weight: 750; letter-spacing: -.03em; }

/* # Пиктограммы
 *
 * Набор нарисован контуром на клетке 24 (`js/icons.js`). Размер и толщина —
 * из токенов `--ic-*`: три размера 16 / 20 / 24 ложатся на сетку 4, и
 * толщина идёт против размера — мелкому чуть добавить, крупному чуть снять,
 * иначе в ряду мелкий бледнеет, а крупный грубеет.
 *
 * `app.css` ставит 21 / 17 / 26: числа не с сетки, и рядом с 20-точечной
 * подписью 21-точечный знак стоял на полпикселя ниже строки. */
svg.ic {
  width: var(--ic); height: var(--ic);
  stroke-width: var(--ic-stroke);
  vertical-align: middle;
}
svg.ic.sm { width: var(--ic-sm); height: var(--ic-sm); stroke-width: var(--ic-stroke-sm); }
svg.ic.lg { width: var(--ic-lg); height: var(--ic-lg); stroke-width: var(--ic-stroke-lg); }
svg.ic.xl { width: var(--ic-xl); height: var(--ic-xl); stroke-width: var(--ic-stroke-lg); }
svg.ic.solid { stroke: none; }

/* Знак в шапке, на рейке и в двери входа: бирюзовая дуга — акцент, оливковая
 * — вторая дуга, точка — акцент. На тёмной полосе мессенджера знак светлеет
 * (`app.css`). Здесь только одно: слово рядом со знаком не белее текста. */
.mvq-mark .mark-name { fill: var(--text); }

/* ═══ Состояния ═════════════════════════════════════════════════════════════
 *
 * Одно решение на весь продукт — см. шапку файла. Ниже оно разложено по
 * предметам: кнопка, значок-кнопка, фишка, пункт навигации, строка меню,
 * действие под записью, поле.
 *
 * Наведение — только там, где есть указатель: на пальце «наведение» залипает
 * после нажатия, и предмет оставался бы подсвеченным до следующего касания
 * где-нибудь ещё. */

/* ── След клавиатуры ─────────────────────────────────────────────────────────
 * Обводка и ореол. Обводка — для контраста (её толщину и отступ считали),
 * ореол — чтобы предмет принадлежал этому продукту. */
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-off);
  box-shadow: 0 0 0 4px var(--focus-halo);
}

/* ── Кнопки ──────────────────────────────────────────────────────────────────
 *
 * Обычная — контурная: линия и буквы, без подложки. На карточке она читается
 * как действие рядом с содержимым («Добавить», «Вступить»), а не как вторая
 * карточка внутри первой.
 *
 * Главная — плоская бирюза. Единственный залитый предмет на экране; оттого её
 * находят глазом, не читая. Верхняя грань чуть светлее — это не блик, а
 * признак того, что предмет лежит на поверхности, а не нарисован на ней.
 *
 * Мягкая (`.soft`) — плашка акцента и бирюзовые чернила: «Опубликовать» в
 * композере, «Подписаны», всё, что уже сделано или делается внутри своего. */
.btn {
  background: transparent;
  border-color: var(--line-strong);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not([disabled]) {
    background: var(--hover);
    border-color: color-mix(in srgb, var(--text) 32%, transparent);
  }
}
.btn:active:not([disabled]) { background: var(--press); }
.btn[disabled] { opacity: var(--disabled); box-shadow: none; }

.btn.primary,
.a2-publish {
  background-color: var(--accent);
  background-image: none;
  color: var(--accentText);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), var(--e1);
}
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover:not([disabled]),
  .a2-publish:hover:not([disabled]) {
    background-color: var(--accent-hover);
    background-image: none;
    filter: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), var(--e2);
  }
}
.btn.primary:active:not([disabled]),
.a2-publish:active:not([disabled]) {
  background-color: var(--accent-active);
  box-shadow: var(--e1);
}
.btn.primary[disabled],
.a2-publish[disabled] { box-shadow: none; filter: none; }

.btn.soft {
  background: var(--active-bg);
  color: var(--active-ink);
  border-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .btn.soft:hover:not([disabled]) { background: var(--active-bg-hover); border-color: transparent; }
}
.btn.soft:active:not([disabled]) { background: var(--press-accent); }

.btn.ghost { border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn.ghost:hover:not([disabled]) { background: var(--hover); border-color: transparent; }
}

.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line-strong)); }
@media (hover: hover) and (pointer: fine) {
  .btn.danger:hover:not([disabled]) {
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    border-color: var(--bad);
  }
}
.btn.danger.fill { background: var(--bad); color: var(--surface); border-color: transparent; }

/* Кнопка создания — плоская бирюза и ореол из акцента: серая тень под
 * цветной кнопкой выглядит грязью. На рейке и на телефоне — одна и та же.
 *
 * ⚠️ Заливка повторена в правиле наведения не по забывчивости: `shell.css`
 * гасит наведение сокращённым `background: …`, а сокращённая запись
 * сбрасывает всё, что стояло, — и притом с большей специфичностью. */
.social-head .head-compose,
.rail-new,
.a2-new {
  background-color: var(--accent);
  background-image: none;
  color: var(--accentText);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 6px 18px var(--halo), var(--e1);
}
@media (hover: hover) and (pointer: fine) {
  .social-head .head-compose:hover,
  .rail-new:hover,
  .a2-new:hover {
    background-color: var(--accent-hover);
    background-image: none;
    filter: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 8px 22px var(--halo), var(--e2);
  }
}
.social-head .head-compose:active,
.rail-new:active,
.a2-new:active { background-color: var(--accent-active); }
/* Своё сжатие кнопки создания снято: то же, только одинаково со всеми
 * кнопками, делает `.mv-press` (см. «Движение»). Два ответа на один вопрос
 * «нажатие дошло» играли бы подряд, и палец чувствовал бы два толчка. */
@media (max-width: 900px) {
  .a2-new:active { transform: none; }
}

/* ── Значок-кнопка ───────────────────────────────────────────────────────── */
.icon-btn { transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--hover); }
}
.icon-btn:active { background: var(--press); }
.icon-btn.on { background: var(--active-bg); color: var(--active-ink); }

/* ── Фишки ───────────────────────────────────────────────────────────────────
 *
 * Полок в продукте три, и у каждой своя причина выглядеть иначе.
 *
 * Свободная фишка (интерес, вид жалобы, выбор оформления, язык) — предмет,
 * который лежит на поверхности и отличается от неё светлотой, а не рамкой:
 * рамка вокруг каждого предмета — не наш способ (`tokens.css`, правило 3).
 * Ряд одинаковых капсул в обводке, каждая со значком, — это то, как выглядит
 * любой интерфейс, собранный из первых попавшихся деталей; в нём нет ничего
 * своего, и человек это чувствует раньше, чем может назвать. Покой — плашка
 * `--surface2` и приглушённые буквы; выбрано — плашка акцента и чернила.
 *
 * Сегментированная капсула — полка отборов в шапке и ряд режимов — стоит
 * внутри своей подложки. Подложка утоплена (`--surface-muted`), выбранная
 * фишка приподнята: плашка акцента, чернила, волосяная линия и тень первой
 * высоты. Залита целиком только кнопка, и у продукта одно «залито».
 *
 * Вкладки чертой — третья полка, ниже. */
.chip {
  border-color: transparent;
  background: var(--surface2);
  border-radius: var(--r-md);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { background: var(--surface3); color: var(--text); }
}
.chip.active,
.chip[aria-selected="true"] {
  background: var(--active-bg);
  background-image: none;
  border-color: transparent;
  color: var(--active-ink);
  font-weight: var(--fw-strong);
}

.social-head .chips,
.modes-row .chips { background: var(--surface-muted); }
.social-head .chip.active,
.modes-row .chip.active {
  background: var(--active-bg);
  background-image: none;
  color: var(--active-ink);
  box-shadow: inset 0 0 0 1px var(--accent-line), var(--e1);
}

/* ── Вкладки чертой ──────────────────────────────────────────────────────────
 *
 * Оглавление раздела — «Обзор», поиск, сообщество, материалы, числа, центр
 * уведомлений — это слова на одной линии, а не ряд кнопок. Выбранное слово
 * темнее и подчёркнуто акцентом (`--active-bar` — та же полоса-метка, что у
 * пункта навигации), остальные тише; под всей полкой волосяная линия. Ни
 * рамки, ни заливки: заливка означала бы «нажми», а вкладка говорит «ты
 * здесь». Значков у вкладок нет: слово со значком в каждой из шести вкладок
 * превращает оглавление в панель инструментов.
 *
 * Полка названа ролью (`[role="tablist"]`) и именем отбора поиска
 * (`.find-tabs`), а не классом `.chips`: под тем же классом живут списки —
 * интересы, виды жалоб, — и список, вытянутый в оглавление, был бы ошибкой.
 * Дверь в настройку, стоящая в той же строке («Интересы» в «Обзоре», «Отбор»
 * в поиске), — не вкладка: у неё нет черты, есть значок, и она отодвинута к
 * правому краю (`.tab-door`). */
.chips[role="tablist"],
.chips.find-tabs {
  gap: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: stretch;
  background: transparent;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--line);
}
.chips[role="tablist"]::-webkit-scrollbar,
.chips.find-tabs::-webkit-scrollbar { display: none; }
.chips[role="tablist"] > .chip,
.chips.find-tabs > .chip {
  position: relative;
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-weight: var(--fw-medium);
}
.chips[role="tablist"] > .chip:first-child,
.chips.find-tabs > .chip:first-child { padding-left: 0; }
.chips[role="tablist"] > .chip::after,
.chips.find-tabs > .chip::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background-color var(--fast) var(--ease);
}
.chips[role="tablist"] > .chip:first-child::after,
.chips.find-tabs > .chip:first-child::after { left: 0; }
@media (hover: hover) and (pointer: fine) {
  .chips[role="tablist"] > .chip:hover,
  .chips.find-tabs > .chip:hover { background: transparent; color: var(--text); }
}
.chips[role="tablist"] > .chip.active,
.chips[role="tablist"] > .chip[aria-selected="true"],
.chips.find-tabs > .chip.active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text);
  font-weight: var(--fw-strong);
}
.chips[role="tablist"] > .chip.active::after,
.chips[role="tablist"] > .chip[aria-selected="true"]::after,
.chips.find-tabs > .chip.active::after { background: var(--active-bar); }
.chips[role="tablist"] > .chip[role="tab"] > .ic { display: none; }
/* Вкладка, где ждут решения (модерация с очередью) или где неудачи (материалы),
 * отмечена и цветом, и числом рядом: обводки у вкладки больше нет, цвет
 * переходит на слово. */
.chips[role="tablist"] > .chip.com-tab-alert { color: var(--warn); }
.chips[role="tablist"] > .chip.bad { color: var(--bad); }

.chips[role="tablist"] > .chip.tab-door,
.chips.find-tabs > .chip.tab-door {
  margin-left: auto;
  padding: 0 8px 0 16px;
  gap: 8px;
  font-weight: var(--fw-medium);
}
.chips[role="tablist"] > .chip.tab-door::after,
.chips.find-tabs > .chip.tab-door::after { display: none; }
.chips[role="tablist"] > .chip.tab-door.active,
.chips.find-tabs > .chip.tab-door.active { color: var(--active-ink); }

/* ── Навигация ───────────────────────────────────────────────────────────────
 *
 * Пункт: значок приглушён, подпись — текстом. Наведение — пелена. Выбранное —
 * плашка, чернила, значок цветом акцента и вес 620; заливки во всю строку
 * больше нет: она была громче главного действия, которое стоит над ней.
 *
 * Значок выбранного пункта может быть заливаемым (`icon(имя, '', {active:
 * true})`, `js/icons.js`): контур для нажатого слишком тих. */
.social-nav-btn {
  color: var(--text);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.social-nav-btn .ic { color: var(--muted); transition: color var(--fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .social-nav-btn:hover { background: var(--hover); }
  .social-nav-btn:hover .ic { color: var(--text); }
}
.social-nav-btn:active { background: var(--press); }
.social-nav-btn.active,
.social-nav-btn[aria-current="page"] {
  background: var(--active-bg);
  background-image: none;
  color: var(--active-ink);
  font-weight: var(--fw-strong);
}
.social-nav-btn.active .ic,
.social-nav-btn[aria-current="page"] .ic { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .social-nav-btn.active:hover,
  .social-nav-btn[aria-current="page"]:hover { background: var(--active-bg-hover); }
}
.social-me:hover { background: var(--hover); }

/* Метка непрочитанного на пункте и в шапке — акцентом, не красным: красный
 * это «не вышло», а непрочитанное — это «есть что посмотреть». */
.social-nav-btn .badge,
.social-head .icon-btn .dot {
  background: var(--accent);
  color: var(--accentText);
  border-color: transparent;
  border-radius: var(--r-pill);
}

/* ── Меню и всплывшее ──────────────────────────────────────────────────────
 * Третий слой: светлее карточки, тень третьей высоты, без рамки. */
.menu,
.menu-sheet {
  background: var(--surface3);
  border-color: transparent;
  box-shadow: var(--e3);
}
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover:not([disabled]) { background: var(--hover); }
}
.menu-item:active:not([disabled]) { background: var(--press); }
.menu-check { color: var(--accent); }

/* ── Поле ввода ──────────────────────────────────────────────────────────────
 * Утопленный слой без рамки; в фокусе — линия акцентом и ореол. Подсказка
 * в поле — третичным цветом: она не текст, а место для него. */
.field {
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.field::placeholder { color: var(--faint); }
.field:focus,
.field:focus-visible {
  border-color: transparent;
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 3px var(--focus-halo);
}
.field[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bad); }

/* ── Действия под записью ────────────────────────────────────────────────────
 * Плашка появляется только у отмеченного: плашка под каждой из пяти кнопок
 * превратила бы подпись записи в панель. «Нравится» — тёплым акцентом: это
 * единственное место в ленте, где тёплый цвет уместен, и он здесь редкий. */
.post-action {
  position: relative;
  border-radius: var(--radius);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .post-action:hover { background: var(--hover); color: var(--text); }
}
.post-action:active { background: var(--press); }
.post-action.on { color: var(--accent); background: var(--hover-accent); }
.post-action.like.on { color: var(--warm); background: color-mix(in srgb, var(--warm) 12%, transparent); }

/* ── Окно и лист ─────────────────────────────────────────────────────────────
 * Слой над страницей отличается от неё светлотой и тенью, а не рамкой:
 * рамка вокруг окна — та же коробка, что вокруг фишки, только больше. */
.modal,
.sheet { border-color: transparent; }

/* ── Окно создания записи ────────────────────────────────────────────────────
 *
 * Лист, а не анкета. Текст лежит прямо на поверхности окна, без коробки
 * вокруг: человек пишет на листе, а не заполняет поле формы. Инструменты
 * («Фото · Видео · Файл · Опрос · Ещё») — ряд слов со значками, без клеток и
 * перегородок; время выхода стоит в том же ряду справа. Аудитория — тихая
 * плашка акцента (это выбор, а не кнопка), время — плашка поверхности, пока
 * не назначено. Залито одно — «Опубликовать». Счётчик байтов появляется с
 * трёх четвертей предела: «0 / 20 000» над пустым листом только шумит. */
.modal .compose-editor,
.sheet .compose-editor {
  border-color: transparent;
  background: transparent;
  border-radius: 0;
  padding: 4px 0 8px;
}
.modal .compose-editor textarea,
.sheet .compose-editor textarea {
  min-height: 132px;
  line-height: var(--lh-loose);
}
.compose-editor textarea::placeholder { color: var(--faint); }
.compose-count:empty { display: none; }
.compose-count.over { color: var(--bad); }

.audience-btn {
  min-height: 36px;
  border-color: transparent;
  border-radius: var(--r-pill);
  background: var(--active-bg);
  color: var(--active-ink);
  font-weight: var(--fw-medium);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.audience-btn:hover { background: var(--active-bg-hover); }
.compose-when .audience-btn { background: var(--surface2); color: var(--muted); }
.compose-when .audience-btn:hover { background: var(--surface3); color: var(--text); }
.compose-when .audience-btn.on { background: var(--active-bg); color: var(--active-ink); border-color: transparent; }

.compose-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 8px;
  box-shadow: inset 0 1px 0 var(--line);
}
.compose-toolbar .compose-tools { flex: 0 1 auto; min-width: 0; }
.compose-toolbar .compose-when { flex: none; margin: 0; }
.compose-tools {
  border-color: transparent;
  border-radius: 0;
  overflow: visible;
  gap: 4px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.compose-tools button {
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: var(--muted);
  font-weight: var(--fw-medium);
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.compose-tools button + button { border-left: 0; }
.compose-tools button:first-child { padding-left: 4px; }
.compose-tools button:hover { background: var(--hover); color: var(--text); }
.compose-fold { color: var(--muted); font-weight: var(--fw-medium); }
.compose-fold:hover { color: var(--text); }
/* Плитка «добавить» — мягкая плашка, а не пунктирный контур: пунктир говорит
 * «здесь пусто», а рядом уже лежит снимок. */
.attach-add { border-color: transparent; background: var(--surface2); }
.attach-add:hover { background: var(--surface3); }

/* ── Недоступное — одна прозрачность на всё ───────────────────────────────── */
button[disabled],
.btn[disabled],
.chip[disabled] { opacity: var(--disabled); }

/* ═══ Поверхности ═══════════════════════════════════════════════════════════
 *
 * Слои, а не рамки. Карточка ленты, композер, карточка страницы и карточка
 * правой колонки — второй слой над фоном: чуть светлее, грань сверху,
 * тень первой высоты. Линия вокруг снята (цветом, не шириной: коробка не
 * меняется, и сетка не дёргается).
 *
 * Угол — `--r-xl`, крупнее общего: карточка — главный предмет продукта.
 * Вложенный снимок — на ступень меньше (`--r-tile`): угол снимка, равный
 * углу карточки, выглядит наклейкой поверх неё. */
.post,
.social-compose,
.social-page > .card,
.side-card {
  background: var(--surface);
  border-color: transparent;
  border-radius: var(--r-xl);
  box-shadow: inset 0 1px 0 var(--edge), var(--e1);
  transition: box-shadow var(--mid) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .post:hover,
  .side-card:hover { box-shadow: inset 0 1px 0 var(--edge), var(--e2); }
}
/* Запись внутри записи (репост) — не второй лист поверх первого, а вложенная
 * плашка: без тени, с волосяной линией, углом на ступень меньше. */
.repost .post,
.repost .post:hover {
  box-shadow: inset 0 0 0 1px var(--hairline);
  border-radius: var(--r-lg);
}

/* Стопки карточек дышат по плотности из настроек. */
.social-side,
.side-stack { gap: var(--gap-stack); }

/* Снимок внутри карточки обведён изнутри: внешняя рамка прибавляет предмету
 * размер и ломает сетку плиток. Подложка под ним — чтобы на месте ещё не
 * приехавшего снимка не вспыхивал светлый прямоугольник. */
.post-media { position: relative; border-radius: var(--r-tile); }
.post-media > * { background: var(--surface-muted); }
.post-media img,
.post-media video { display: block; }
.post-media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.mv-tile { border-radius: var(--r-tile); }

/* Значок человека. Заливка под буквами — фирменная ось в четверть силы:
 * место без снимка перестаёт быть серым кружком. Кольцо по краю отделяет
 * светлый снимок от светлой карточки. */
.avatar {
  background-image: var(--mv-veil-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Обложка человека — единственное большое цветное пятно продукта, и на нём
 * фирменная ось звучит в полную силу. Поверх — тканый мотив: обложка без
 * снимка остаётся молдавской, а не «сине-зелёным градиентом». */
.profile-cover {
  position: relative;
  background: var(--mv-sweep);
  overflow: hidden;
}
/* ⭐ Лицо человека — поверх обложки, а не под ней.
 *
 * Найдено на фотографиях iPhone от 02.09.2026 (кадр 4): круглое лицо на
 * странице человека срезано снизу — видна только его нижняя треть, а верх
 * закрашен обложкой.
 *
 * Причина — прямо в правиле выше. Лицо заходит на обложку снизу вверх
 * (`.profile-avatar { margin-top: -44px }`, `app.css`) и стоит в обычном
 * потоке. Обложка же получила здесь `position: relative` — ради тканого
 * мотива в `::after`, которому нужен предок с координатами. А
 * позиционированный элемент рисуется ПОЗЖЕ непозиционированного соседа, даже
 * если тот идёт после него в разметке и никаких `z-index` вокруг нет. Обложка
 * стала краской поверх лица.
 *
 * Лечится не порядком в разметке и не `z-index` у обложки (мотив внутри неё
 * уехал бы вместе с ней), а тем, что лицо тоже становится позиционированным и
 * встаёт слоем выше. Ровно одно объявление на два свойства, ничего вокруг не
 * двигается: `position: relative` без смещений оставляет лицо на прежнем
 * месте до пикселя.
 *
 * ⚠️ То же самое есть и в окне программы, но по другой строке: там обложка
 * получает `position: relative` из `app.css` (`.profile-cover.has-image`) —
 * то есть только у человека со своим снимком на обложке. Окно этот файл не
 * подключает, и здесь до него не дотянуться; починка на той стороне — эта же
 * пара свойств рядом с `.profile-avatar` в `app.css`. */
.profile-avatar {
  position: relative;
  z-index: 1;
}

/* ⚠️ Только у обложки без снимка: `::after` ложится поверх всего, в том числе
 * поверх фотографии человека (`profile.js`, класс `has-image`). */
.profile-cover:not(.has-image)::after {
  content: "";
  position: absolute; inset: 0;
  background-color: rgb(255 255 255 / .10);
  -webkit-mask-image: var(--weave);
  mask-image: var(--weave);
  -webkit-mask-size: var(--weave-size) var(--weave-size);
  mask-size: var(--weave-size) var(--weave-size);
}

/* Плашки состояния — мягкая подложка и чернила того же тона. Для полос
 * «нет сети», «черновик сохранён», «ограничено» и карточек-уведомлений:
 * модуль ставит класс тона, цвет приходит из токенов. */
.tone-good { background: var(--good-soft); color: var(--good-ink); }
.tone-warn { background: var(--warn-soft); color: var(--warn-ink); }
.tone-bad  { background: var(--bad-soft);  color: var(--bad-ink); }
.tone-warm { background: var(--warm-soft); color: var(--warm-ink); }
.tone-accent { background: var(--active-bg); color: var(--active-ink); }

/* ═══ Пустые экраны ═════════════════════════════════════════════════════════
 *
 * Медальон из двух слоёв в одной клетке сетки: фирменная плашка и поверх неё
 * молдавское древо. Знак состояния встаёт третьим — он и остаётся главным.
 * Через `:has()`: медальон рисуется только там, где знак действительно есть. */
.social-page .state:has(> svg.ic.lg) { grid-auto-flow: row; }
.social-page .state:has(> svg.ic.lg)::before,
.social-page .state:has(> svg.ic.lg)::after {
  content: "";
  grid-area: 1 / 1;
  place-self: center;
  width: 104px; height: 104px;
  border-radius: 50%;
  pointer-events: none;
}
.social-page .state:has(> svg.ic.lg)::before {
  background-image: var(--mv-veil);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.social-page .state:has(> svg.ic.lg)::after {
  background-color: color-mix(in srgb, var(--accent) 22%, transparent);
  -webkit-mask-image: var(--weave);
  mask-image: var(--weave);
  -webkit-mask-size: 104px 104px;
  mask-size: 104px 104px;
  -webkit-mask-position: center;
  mask-position: center;
}
.social-page .state:has(> svg.ic.lg) > svg.ic.lg {
  grid-area: 1 / 1;
  place-self: center;
  position: relative;
  z-index: 1;
  width: var(--ic-xl); height: var(--ic-xl);
  opacity: 1;
  color: var(--active-ink);
}
.social-page .state:has(> svg.ic.lg) > strong { margin-top: 4px; }

/* ═══ Движение ══════════════════════════════════════════════════════════════
 *
 * Четыре движения на весь продукт, и каждое отвечает на вопрос человека.
 *
 *   переход раздела  — «я оказался в другом месте»
 *   отметка          — «нажатие дошло»
 *   отклик           — «отметка поставлена именно этой записи»
 *   отправка         — «оно ушло»
 *
 * Классы навешивает `js/brand.js` на короткое время и снимает сам. Через
 * класс, а не через `:active` и не через появление узла в разметке: лента
 * перерисовывается целиком на каждое изменение.
 *
 * `prefers-reduced-motion` гасит здесь всё дважды: правилом из `tokens.css`
 * и в самом `brand.js`, который в этом случае классов не навешивает вовсе. */

/* Переход раздела: содержимое проявляется и подходит снизу на шесть точек. */
@keyframes mv-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.social-page.mv-enter { animation: mv-page-in var(--mid) var(--ease-out) both; }

/* Нажатие: короткое сжатие с возвратом чуть выше исходного. */
@keyframes mv-press {
  0%   { transform: scale(1); }
  38%  { transform: scale(.9); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.mv-press { animation: mv-press var(--mid) var(--ease); }

/* Отклик: от знака расходится одно кольцо и гаснет. Название содержит
 * «pulse» — так проверка ритма узнаёт движение, которому положена своя
 * длительность: 420 мс это не отклик интерфейса, а затухание. */
@keyframes mv-react-pulse {
  from { transform: translate(-50%, -50%) scale(.6); opacity: .55; }
  to   { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}
.post-action.mv-lit::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid currentColor;
  animation: mv-react-pulse 420ms var(--ease) forwards;
}

/* Отправка: по кнопке проходит волна света слева направо. */
@keyframes mv-send-wave {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}
.mv-send {
  position: relative;
  overflow: hidden;
}
.mv-send::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 34%,
    rgb(255 255 255 / .34) 50%,
    transparent 66%);
  background-size: 220% 100%;
  animation: mv-send-wave 520ms var(--ease) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .social-page.mv-enter { animation: none; }
  .mv-press { animation: none; }
  .post-action.mv-lit::after { display: none; }
  .mv-send::after { display: none; }
}

/* ═══ Медиа ═════════════════════════════════════════════════════════════════
 *
 * Половина площади продукта — чужие снимки, и одно правило на весь раздел:
 * **фирменный цвет не ложится поверх снимка**. Всё, что стоит над кадром,
 * остаётся белым на затемнении и здесь не тронуто. Фирменным становится
 * ровно то, где снимка нет: место под кадром, кольцо непросмотренной истории
 * и история из одних букв. */

/* Кольцо истории. Непросмотренная — фирменная ось по кругу (`conic`, не
 * диагональ: 135° на кружке в 62 точки выглядит косой заплаткой);
 * просмотренная — линия. */
.story-dot .ring {
  background: conic-gradient(from 135deg,
    var(--mv-b1), var(--mv-b2), var(--mv-b3), var(--mv-b1));
}
.story-dot.seen .ring { background: var(--line-strong); }

/* История из одних букв — та же ось и тот же тканый мотив, только вдвое
 * крупнее: полотно во весь экран телефона. `::before` — под словами. */
.mv-story-box.textual .mv-story-media { background: var(--mv-sweep); }
.mv-story-box.textual .mv-story-media::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-color: rgb(255 255 255 / .08);
  -webkit-mask-image: var(--weave);
  mask-image: var(--weave);
  -webkit-mask-size: 256px 256px;
  mask-size: 256px 256px;
}

/* ═══ Мелочи, без которых система разъезжается ══════════════════════════════ */

/* Заглушка загрузки — из акцента, а не из серого: серая полоса в светлой теме
 * читается грязным пятном, в тёмной — дырой. */
.skeleton,
.guest-card .sk {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface2)) 25%,
    color-mix(in srgb, var(--accent) 20%, var(--surface2)) 37%,
    color-mix(in srgb, var(--accent) 7%, var(--surface2)) 63%);
}
.skeleton { border-radius: var(--r-tile); }

/* Метка непрочитанного и состояние связи: одна форма на обе. */
.badge,
.net-chip { border-radius: var(--r-pill); }
.badge.quiet { color: var(--muted); border-color: var(--line-strong); }

/* Полка отборов и вкладки не должны показывать полосу прокрутки. */
.social-page > .chips,
.social-head .chips { scrollbar-width: none; }
.social-page > .chips::-webkit-scrollbar,
.social-head .chips::-webkit-scrollbar { display: none; }

/* Разделительная линия под шапкой гаснет к краям: линия во всю ширину режет
 * экран пополам; растворяющаяся — отделяет, не разрезая. */
.social-head {
  box-shadow: none;
  background-image: linear-gradient(90deg,
    transparent 0%, var(--line) 12%, var(--line) 88%, transparent 100%);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
}

/* Левая колонка — тот же холст, что и страница, без своей подложки: слоёв
 * на экране три (фон, карточка, всплывшее), и колонка — не четвёртый. */
.social-nav { background: var(--bg); }