/* Оформление площадки — перенос вида «Заметок» love.ngs.ru.
 *
 * Мера тут не «красиво», а «человек не заметил переезда»: колонка автора слева
 * с квадратным аватаром и ником под ним, нумерованная постраничка, дата вида
 * 14.08.2026, 18:30:04, дерево с отступами по уровням. Числа и цвета взяты из
 * настоящих стилей сайта (index.css/main.css, снято 18.08.2026), а не на глаз:
 * разделитель #c7d3d9, текст #3d4952, служебное #999, ник женский #ef4e4f,
 * мужской #448dc8, аватар 100×100, комментарий с отступом слева на 115px.
 *
 * Чего из оригинала нет и не будет: лайки, жалобы, «онлайн»-огонёк, боковая
 * колонка новостей НГС. Первые три — функции, которых у площадки нет по
 * решению (эпик E), последняя — чужой раздел.
 *
 * Тема живёт в токенах :root, а какая именно — говорит атрибут data-theme.
 * Стоит он на КАЖДОЙ странице: не выбиравший получает тему по умолчанию
 * (web.defaultTheme, «Графит»), поэтому prefers-color-scheme площадка не
 * спрашивает нигде. Палитр четыре, и они двух родов:
 * «Светлая» (она же голый :root) и «Тёмная» — это НГС, их числа с сайта и
 * закреплены fidelity_test; «Бумага» и «Графит» — наши, и мера у них другая,
 * читаемость вместо соответствия. Правило набора одно, и оплачено оно
 * сокращением с четырёх тем до двух: КАЖДАЯ кнопка обязана показывать то, чего
 * не показывает другая, — прежние «Классика» и «Светлая» отдавали одну и ту же
 * палитру, и нажатие это не подтверждало.
 *
 * ОГРАНИЧЕНИЕ: CSP без 'unsafe-inline' запрещает атрибут style, поэтому
 * отступ ветки задаётся классом d1…d12, а расстояние считает calc(). На самом
 * НГС это inline padding-left — нам так нельзя. */

/* color-scheme — не украшение: он говорит браузеру, какими рисовать ПОЛОСЫ
   ПРОКРУТКИ, галочки и поле выбора файла. Раньше это решала система читателя,
   и на тёмной теме со светлой системой полоса прокрутки оставалась белой; с
   тех пор как тёмная тема стала умолчанием, такой она была бы у КАЖДОГО гостя.
   Стоит внутри палитры, потому что это её собственное свойство, а не отдельная
   настройка рядом. */
:root {
  color-scheme: light;
  --page: #e9edf0;
  --card: #fff;
  --ink: #3d4952;
  --meta: #999;
  --rule: #c7d3d9;
  --link: #448dc8;
  --male: #448dc8;
  --female: #ef4e4f;
  --anon: #4a545c;
  --nav: #4ba3dd;
  --nav-ink: #fff;
  --accent: #82b541;
  --btn: #f4f6f7;
  --bb-red: red;
  --bb-green: green;
  --bb-blue: blue;
  --bb-purple: purple;
  --bb-orange: orange;
  --bb-pink: pink;
  --hl: #f3f6f9;
  --step: 14px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #15181c;
  --card: #1d2126;
  --ink: #dbe2e8;
  --meta: #8c959d;
  --rule: #2e353c;
  --link: #6fadde;
  --male: #6fadde;
  --female: #ef6f70;
  --anon: #a8b1b9;
  --nav: #23527a;
  --btn: #242a30;
  --bb-red: #ef6f70;
  --bb-green: #7fbf5a;
  --bb-blue: #6fadde;
  --bb-purple: #b48ae6;
  --bb-orange: #e39a45;
  --bb-pink: #f0a0c0;
  --hl: #232a31;
  --sil-fade: .72;
}

/* «Бумага» — не перенос, а своё оформление, и потому единственное, чем оно
   обязано себя оправдывать, — тем, что показывает не то же самое: тёплый лист
   вместо голубоватого экрана НГС, тёмная шапка вместо синей, глубокая бирюза
   вместо салатового акцента. Мера здесь не «как на сайте», а читаемость, и
   числа лучше исходных: служебный текст 4,6:1 против 2,85:1 у НГС, белая
   подпись на акценте 6,0:1 против 2,4:1 (расчёт WCAG, 18.08.2026).
   Цвета разметки ранних лет достаются от светлой намеренно: лист почти белый,
   и «розовый» здесь виден ровно так же еле-еле, как автору в 2013-м. */
:root[data-theme="paper"] {
  color-scheme: light;
  --page: #f4f1ec;
  --card: #fffdf9;
  --ink: #26231e;
  --meta: #7a7367;
  --rule: #e3ded4;
  --link: #1a6b86;
  --male: #2b6f9e;
  --female: #b23a63;
  --anon: #6b6459;
  --nav: #2b2822;
  --accent: #1a6b86;
  --btn: #efece5;
  --hl: #fdf2d8;
}

/* «Графит» — тоже своё: тёмная тема НГС уходит в чёрный и оставляет синюю
   шапку сайта, а эта стоит на нейтральном сланце, шапку красит в тот же
   графит и берёт бирюзовый акцент. Текст приглушён (#cfd6dd, а не белый):
   на тёмном фоне чистый белый даёт ореол вокруг букв.
   Цвета разметки ПРИХОДИТСЯ повторить: наследуются они от голого :root, где
   стоят словами автора (blue, purple), а на тёмной карточке эти слова не
   читаются вовсе — ровно та причина, по которой их поднимает тёмная тема.
   Акцент выбран между двумя своими работами: он и фон под белой подписью
   (3,9:1), и сам текст на карточке (3,7:1) — палитры, где обе роли брали бы
   4,5:1, не существует, и размен сделан в пользу равенства. */
:root[data-theme="graphite"] {
  color-scheme: dark;
  --page: #1c2126;
  --card: #252b32;
  --ink: #cfd6dd;
  --meta: #8a949e;
  --rule: #39424b;
  --link: #7ab8e8;
  --male: #7ab8e8;
  --female: #ef8ba4;
  --anon: #a3adb7;
  --nav: #2f363e;
  --nav-ink: #e6ebf0;
  --accent: #348f84;
  --btn: #2d343b;
  --bb-red: #ef6f70;
  --bb-green: #7fbf5a;
  --bb-blue: #6fadde;
  --bb-purple: #b48ae6;
  --bb-orange: #e39a45;
  --bb-pink: #f0a0c0;
  --hl: #2f3841;
  --sil-fade: .72;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Подвал прижат к низу окна. На короткой странице — а самая частая короткая
   это заметка без комментариев — он иначе повисает посередине, и под ним
   остаётся полэкрана пустоты, будто страница не догрузилась.
   Тянется при этом СОДЕРЖИМОЕ (.main), а не распорка: карточка с текстом
   доходит до подвала, и низ страницы выглядит законченным, а не оборванным.
   dvh — ради телефонов, где адресная строка ест часть vh; vh оставлен ниже
   первым, он и есть запасной вариант для браузеров без dvh. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font: 14px/1.45 Arial, "Helvetica Neue", Helvetica, sans-serif;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 910px; margin: 0 auto; padding: 0 10px; }

/* ---------------------------------------------------------------- шапка */

/* Шапка ЛИПКАЯ (23.08.2026, просьба владельца: «из треда неудобно мотать наверх
   к меню, чтобы куда-то перейти»). Тред у нас показывается ЦЕЛИКОМ — 891 реплика
   на самой длинной заметке зеркала, — и дорога до навигации из его середины
   измеряется экранами.
   Липкость ничего не стоит: шапка это одна строка в 44px, своё место в потоке
   она сохраняет, а `position: sticky` остаётся позиционированным элементом —
   выпадающее меню участника, привязанное к ней, стоит где стояло. */
.top { background: var(--nav); position: sticky; top: 0; z-index: 20; }
/* Якорь под липкой шапкой. Без этого отступа реплика, на которую пришли по
   ссылке «#», встаёт ПОД шапкой — а именно её человек и шёл читать. */
.c, .cttl, .notebox, .replyrow { scroll-margin-top: 60px; }
/* flex-wrap обязателен: без него на узком экране вкладки шапки наезжают на
   название, а «Вход» уезжает за край (жалоба 18.08.2026). */
.topin { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; min-height: 44px; padding: 5px 0; }
/* Название площадки — ЗНАКОМ и словом. Знак стоит всегда, слово уходит на узком
   экране (правило при 460px ниже): «Зазеркалье» занимает там четверть строки
   шапки. Знак это зеркало — рамка с бликом; называет он себя сам, title и
   aria-label стоят на ссылке. */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--nav-ink); font-size: 17px; font-weight: 700;
}
.brand:hover { color: var(--nav-ink); text-decoration: none; }
/* Знак не ужимается вместе со строкой: он и есть то последнее, что от названия
   остаётся. */
.brand .mark { flex: none; }
.tab {
  color: var(--nav-ink); background: rgba(255, 255, 255, .18);
  padding: 5px 14px; border-radius: 3px; font-size: 14px;
}

/* Пары шапки живут ОДНИМ блоком с перегородкой: «Лента / Справка» — один
   переключатель разделов, колокольчик с меню участника — один угол «про меня».
   Порознь они читались как четыре несвязанные кнопки (жалоба владельца
   23.08.2026).

   Фон красит сам блок, а плашки внутри становятся прозрачными, поэтому
   перегородка — одна линия, а не стык двух прямоугольников. overflow: hidden
   тут нельзя: под .acct выпадает меню, и блок обрезал бы его. Значит скругление
   ставится КРАЙНИМ элементам, а красит их та же поверхность, что и hover. */
.grp {
  display: flex; align-items: stretch;
  background: rgba(255, 255, 255, .18); border-radius: 3px;
}
.grp > *, .grp > .acct > .acctbtn { background: none; border-radius: 0; }
.grp > * + * { border-left: 1px solid rgba(255, 255, 255, .22); }
.grp > :first-child, .grp > :first-child > .acctbtn { border-radius: 3px 0 0 3px; }
.grp > :last-child, .grp > :last-child > .acctbtn { border-radius: 0 3px 3px 0; }
.grp > a:hover, .grp > .acct > .acctbtn:hover, .grp > .acct[open] > .acctbtn {
  background: rgba(255, 255, 255, .2);
}
/* Автоматическое поле переезжает на блок целиком: у двух элементов подряд их
   было бы два, и flex поделил бы свободное место пополам — угол уехал бы в
   середину шапки. */
.uctl { margin-left: auto; }
.grp .acct, .grp .bell { margin-left: 0; }

/* Вход — в правом верхнем углу, как на НГС. margin-left:auto прижимает его к
 * краю без распорок; на узком экране flex перенесёт его строкой ниже, а не
 * выдавит наружу. Ссылка и кнопка выглядят одинаково: выход обязан быть POST
 * (GET-ссылку браузер нажимает сам в префетче), но человеку это знать незачем. */
.acct { position: relative; margin-left: auto; }
.acct form { margin: 0; }

/* Меню участника: значок в углу, под ним список. Раскрывает его сам браузер
   (details/summary), поэтому оно работает и без скрипта.
   Треугольник-маркер снимаем: на НГС в этом углу только значок. */
.acctbtn {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--nav-ink); background: rgba(255, 255, 255, .18);
  padding: 5px 12px; border-radius: 3px; list-style: none;
}
.acctbtn::-webkit-details-marker { display: none; }
.acctbtn:hover, .acct[open] .acctbtn { background: rgba(255, 255, 255, .3); }
.acctbtn .who { font-weight: 600; }

/* Список выпадает ПОД кнопкой и поверх страницы, прижатый к правому краю —
   как на НГС. z-index нужен вместе с ним и на самой шапке: без него список
   уезжает под первую же заметку. */
.acctmenu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  min-width: 190px; background: var(--card);
  border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
/* :not(.tbtn) — не придирка. Пункт меню занимает всю ширину и несёт
   разделитель сверху; кнопки оформления внутри одного пункта — ряд, и под этим
   правилом они вытянулись бы в четыре полосы с четырьмя линиями, а hover пункта
   стёр бы подсветку выбранной темы. Исключение стоит здесь, чтобы весь набор
   правил про .tbtn остался прежним и общим. */
.acctmenu a, .acctmenu button:not(.tbtn) {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 12px 18px; color: var(--ink); background: none;
  border: 0; border-top: 1px solid var(--rule); cursor: pointer;
}
.acctmenu > :first-child, .acctmenu > form:first-child button { border-top: 0; }
.acctmenu a:hover, .acctmenu button:not(.tbtn):hover { background: var(--btn); text-decoration: none; }

/* Оформление — пункт меню участника, а не подвал (решение владельца
   23.08.2026): тема это настройка «про меня». Ряд кнопок — ОДИН пункт, поэтому
   разделитель ставится блоку, а не каждой кнопке; две колонки, потому что
   четыре имени в строку не встают в ширину выпадашки. */
.themes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px 18px 12px; border-top: 1px solid var(--rule);
}
.themes .lbl { grid-column: 1 / -1; color: var(--meta); font-size: 12px; }
.tbtn {
  font: inherit; font-size: 12px; padding: 5px 8px; cursor: pointer; text-align: center;
  background: var(--btn); color: var(--ink); border: 1px solid var(--rule); border-radius: 3px;
}
.tbtn:hover { border-color: var(--meta); }
/* Подсвечена та тема, которая сейчас на экране, и называет её РАЗМЕТКА:
   класс on ставит шаблон. Пока умолчания не было, «сейчас на экране» знал
   один браузер — сервер prefers-color-scheme не видит, — и ту же подсветку
   приходилось повторять отдельными правилами для страницы без атрибута. С
   темой по умолчанию (30.08.2026) сервер знает её всегда, и повторять стало
   нечего. */
.tbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.enter {
  display: inline-block; font: inherit; font-size: 14px; line-height: 1.45;
  color: var(--nav-ink); background: rgba(255, 255, 255, .18);
  padding: 5px 14px; border: 0; border-radius: 3px; cursor: pointer;
}
.enter:hover {
  color: var(--nav-ink); text-decoration: none; background: rgba(255, 255, 255, .3);
}

/* Колокольчик — единственный элемент шапки, которого на НГС не было вовсе, и
 * поэтому единственный, который приходится объяснять (правило Ш5з о собственных
 * метках: title здесь, слова в /help).
 *
 * margin-left:auto переезжает на него, а у соседнего .acct снимается: два
 * автоматических поля во flex делят свободное место ПОПОЛАМ, и колокольчик уехал
 * бы в середину шапки. Когда колокольчика нет (гость, шина не подключена),
 * правило не срабатывает и .acct прижимается к краю сам, как раньше.
 *
 * Значок стоит и при нуле: элемент, пропадающий с шапки, дёргает вёрстку на
 * каждом переходе. */
/* Счётчик реплик в шапке — спутник липкости: до заголовка «Комментарии N» из
   середины треда уже не домотать. Значком с числом, а не словом: ширина строки
   на телефоне кончается раньше всего, а объяснение живёт в title. */
.hcount {
  display: flex; align-items: center; gap: 5px;
  color: var(--nav-ink); background: rgba(255, 255, 255, .18);
  padding: 5px 10px; border-radius: 3px; font-size: 13px; font-weight: 700;
}
.hcount:hover { color: var(--nav-ink); text-decoration: none; background: rgba(255, 255, 255, .3); }

.bell {
  position: relative; display: flex; align-items: center; margin-left: auto;
  color: var(--nav-ink); background: rgba(255, 255, 255, .18);
  padding: 5px 12px; border-radius: 3px;
}
.bell:hover { color: var(--nav-ink); text-decoration: none; background: rgba(255, 255, 255, .3); }
.bell + .acct { margin-left: 0; }
/* Число непрочитанного. Кружок накладывается на значок, а не встаёт рядом:
   ширина шапки на телефоне и без того спорная. */
.bell .cnt {
  position: absolute; top: 0; right: 2px;
  min-width: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--accent); color: #fff;
  font-size: 10px; line-height: 15px; text-align: center; font-weight: 700;
}

/* Страница «События». Список, а не таблица: строки разной длины, и читают их
   сверху вниз, а не сравнивают между собой. */
.evs { list-style: none; margin: 0; padding: 0; }
.ev {
  padding: 12px 0 14px; border-bottom: 1px solid var(--rule);
}
.ev:last-child { border-bottom: 0; }
/* Непрочитанное помечено полосой слева, а не фоном: фон на карточке с текстом
   спорит с самим текстом, а полоса видна и в тёмной палитре. */
.ev.new { border-left: 3px solid var(--accent); padding-left: 11px; }
.evt { font-weight: 600; }
.evx { margin: 6px 0 0; color: var(--ink); }
.evr { margin: 6px 0 0; color: var(--meta); font-size: 12px; }
.evx.gone { color: var(--meta); font-style: italic; }
.readall { margin: 0 0 14px; }

/* Живое дописывание (fresh.go, app.js). Новая реплика или заметка появляется
   сама, без перезагрузки и без нажатий, — и отличается от соседних ровно
   одним: короткой подсветкой, которая гаснет.
   Цвет тот же --hl, что и у подсветки по анкору, а не свой: «на это стоит
   посмотреть» на странице значит одно и то же, откуда бы указание ни пришло.
   Гасит подсветку САМА анимация (both), поэтому скрипту не нужен таймер, а
   классу — снятие: свою работу он к тому времени уже сделал.
   Сдвиг страницы, когда строка встаёт ВЫШЕ прочитанного, разбирает браузер сам
   (overflow-anchor: auto по умолчанию) — и именно поэтому его здесь никто не
   отключает. */
@keyframes fresh-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fresh-glow {
  from { background-color: var(--hl); }
  to   { background-color: transparent; }
}
.c.fresh, .note.fresh { animation: fresh-in .28s ease-out, fresh-glow 6s ease-out .28s both; }

/* Кому движение мешает — тому только подсветка: она не движение, а указание,
   и без неё новая строка появлялась бы вовсе незаметно. */
@media (prefers-reduced-motion: reduce) {
  .c.fresh, .note.fresh { animation: fresh-glow 6s linear both; }
}

/* ПЕРЕЕЗД: строка стояла в угаданной ветке, обход мобильной версии заменил
   догадку настоящим ребром, и она встала на своё место (X-Fresh-Moved, app.js).
   Метка отличается от `fresh` намеренно: там появилось НОВОЕ и подсветка зовёт
   прочесть, здесь текст прежний, и вопрос у читателя другой — «почему вокруг
   всё поменялось». Поэтому не заливка, а рамка, и гаснет она вчетверо быстрее:
   строку человек уже читал, звать его к ней второй раз незачем.
   Движения тут нет вовсе (одна рамка), поэтому и ветки prefers-reduced-motion
   у неё нет: гасить нечего. */
@keyframes moved-mark {
  from { box-shadow: inset 0 0 0 2px var(--accent); }
  to   { box-shadow: inset 0 0 0 2px transparent; }
}
.c.moved { animation: moved-mark 1.6s ease-out both; }


/* Ширина карточки постоянная и от содержимого не зависит — как на НГС.
   width:100% здесь обязателен ВМЕСТЕ с `margin: … auto`: у flex-элемента с
   автоматическими полями поперёк оси растяжение отменяется, и карточка
   съёживается по содержимому. На ленте этого не видно (текст заметок и так
   шире 910px), а страница новой заметки схлопнулась в колонку 266px вокруг
   пустого поля ввода — по ширине textarea в 20 знаков (экран владельца,
   18.08.2026). */
.main {
  flex: 1 0 auto; width: 100%; max-width: 910px; margin: 10px auto;
  background: var(--card); padding: 16px 20px 28px;
}
.ttl { font-size: 30px; font-weight: 400; margin: 0 0 16px; color: var(--ink); }

/* ---------------------------------------------------------------- лента */

.notes { list-style: none; margin: 0; padding: 0; }

.note {
  border-top: 1px solid var(--rule);
  padding: 20px 0 15px;
  min-height: 135px;
  display: flex;
  gap: 20px;
  position: relative;
}
.notes .note:last-child { border-bottom: 1px solid var(--rule); }
.notebox { border-top: 0; padding-top: 6px; }
/* Под переключателем вида текст не идёт: на НГС он тоже стоит в своём углу.
   Резерв 76px — под ДВЕ ИКОНКИ; словами переключатель требовал 150px, и на
   узком экране от колонки текста не оставалось ничего. */
.nblock { position: relative; }
.notebox .nbody { padding-right: 76px; }

/* Колонка автора: 100px в ширину, ник под аватаром и по центру. */
.author { width: 100px; flex: 0 0 100px; text-align: center; }
.ava {
  width: 100px; height: 100px; display: block;
  object-fit: cover; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--btn);
}
/* Силуэт — это ОТСУТСТВИЕ фото, и светить он не должен: фото у площадки далеко
   не у всех (байты приносило зеркало, у теней архива их нет), так что в тёмной
   теме страница иначе превращается в решётку светлых квадратов ярче собственного
   текста. Гасится он только там: --sil-fade объявлен в тёмных палитрах, у
   светлых его нет вовсе, и картинка сайта показывается ровно такой, какая она
   на НГС. Настоящее фото не трогаем никогда — оно содержание, а не фон. */
.ava.sil { opacity: var(--sil-fade, 1); }
.author .nick { display: inline-block; max-width: 100px; margin-top: 5px; overflow-wrap: anywhere; }

/* Ник полужирный, 14px — .lv-note .lv-people__nickname { font-weight:600 }
   в стилях сайта. Он тут главная опора взгляда: по нику ищут своих в треде. */
.nick { color: var(--link); font-weight: 600; }
.nick.anon { color: var(--anon); }
/* Цвет ника по полу — как на НГС. Пол приехал даром вместе с обходом дерева
   ответов (Ш6): он стоит в разметке десктопной страницы комментариев, обход
   анкет для него не нужен. Неизвестен — ник остаётся ссылочно-синим. */
.nick._female { color: var(--female); }
.nick._male { color: var(--male); }

.nbody { flex: 1 1 auto; min-width: 0; }
.text { overflow-wrap: anywhere; }
.text p { margin: 0 0 .8em; }
.text p:last-child { margin-bottom: 0; }

/* Разметка ранних лет НГС: [b], [i], [u], [s], [color=…] в текстах архива.
   Цвет приезжает КЛАССОМ, а не атрибутом style — CSP без 'unsafe-inline'
   его запрещает (та же причина, что у отступа ветки d1…d12).
   В светлой теме стоит ровно то ключевое слово, которое назвал автор: сайт
   был светлым, и «розовый» там был так же еле виден, как здесь, — чужой
   выбор мы не поправляем. В тёмной те же цвета подняты по светлоте: на
   #1d2126 blue и purple не читаются вовсе. */
.bb-red { color: var(--bb-red); }
.bb-green { color: var(--bb-green); }
.bb-blue { color: var(--bb-blue); }
.bb-purple { color: var(--bb-purple); }
.bb-orange { color: var(--bb-orange); }
.bb-pink { color: var(--bb-pink); }

/* Смайлы НГС в тексте (:::popcorn:::). Размер у каждого свой (от 15×15 до
   100×20) и приезжает атрибутами width/height из самого файла, поэтому стилю
   остаётся немного: не дать картинке распереть узкий экран. Выравнивание
   оставлено браузерное, по базовой линии, — таким его давал <img> без класса,
   а проверить, как ровно смайл стоял на НГС, больше негде: сайт эти коды не
   показывает с 2017 года. */
.sm { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- реакции */

/* Кнопки-фишки под заметкой и под репликой. Смайлы в наборе разнокалиберные
   (15×15 … 100×20), поэтому в фишке задана высота, а ширина считается: иначе
   ряд фишек прыгал бы по высоте вслед за картинками. */
.rx { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0 0; }
.rxb {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px;
  border: 1px solid var(--rule); border-radius: 11px; background: var(--btn);
  color: var(--ink); font: inherit; font-size: 12px; line-height: 20px; cursor: pointer;
}
.rxb .sm { height: 18px; width: auto; }
.rxb b { font-weight: 600; }
/* Своя реакция подсвечена рамкой, а не заливкой: заливка спорит со смайлом. */
.rxb.mine { border-color: var(--accent); }
span.rxb { cursor: default; }
.rxadd {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; border: 1px solid var(--rule); border-radius: 11px;
  background: var(--btn); color: var(--meta); text-decoration: none; font-size: 14px;
}
.rxpick { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Выбиралка смайлов под формой. Закрыта по умолчанию: пришли писать, а не
   разглядывать шестьдесят четыре картинки. Сетка на auto-fill, потому что
   знаки разнокалиберные (от 12×25 до 100×20) и колонка по самому широкому
   оставила бы половину панели пустой. */
.smbox { margin: 6px 0 0; }
.smbox summary { cursor: pointer; color: var(--link); font-size: 13px; }
.smgrid {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin-top: 8px; padding: 8px; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--btn); max-height: 220px; overflow-y: auto;
}
/* Без скрипта это справочник: картинка и код рядом, код набирается руками.
   Со скриптом код прячется, остаётся кнопка. */
.smgrid .smi {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px;
  border: 1px solid transparent; border-radius: 4px; font-size: 11px; color: var(--meta);
}
.smgrid button.smi { background: var(--card); border-color: var(--rule); cursor: pointer; }
.smgrid button.smi:hover { border-color: var(--accent); }
.smgrid .smi .sm { height: 20px; width: auto; }

/* Справочник разметки под той же кнопкой-раскладушкой. Список, а не сетка:
   строк пять, и в каждой две части — как набирают и что выйдет. Код набран
   моноширинным, чтобы скобки не сливались с образцом рядом. */
.mkref {
  margin: 8px 0 0; padding: 8px 8px 8px 24px; list-style: disc;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--btn);
  font-size: 13px; color: var(--meta);
}
.mkref li { margin: 2px 0; }
.mkref code { font-size: 12px; color: var(--fg); }

/* Закреплённая заметка. Отличается меткой и полосой слева, а не цветом фона:
   лента и так пёстрая от аватаров, а закреплённых бывает не больше пяти. */
.pin {
  margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: .04em;
}
.note.pinned { border-left: 3px solid var(--accent); padding-left: 10px; }

.nfoot { margin-top: 10px; color: var(--meta); font-size: 12px; }
.date { color: var(--meta); }
/* Время, снятое зеркалом, а не отданное сайтом: настоящего НГС не публикует.
   Пунктир — единственный видимый след, чтобы вид не расходился с правдой. */
.date._approx { border-bottom: 1px dotted var(--meta); cursor: help; }
/* «Исправлено» — метка площадки, которой на НГС не было: там заметку не правил
   никто. Стоит рядом с датой и тем же тихим цветом, потому что это уточнение к
   ней, а не отдельная новость; объясняет себя заголовком при наведении. */
.edited { margin-left: 10px; font-size: 11px; color: var(--meta); cursor: help; }

/* Метка происхождения (origin.go, правило Ш5з) — ЗНАЧКОМ, а не словом
   (решение владельца 26.08.2026): подпись печатала имя чужого сайта на каждой
   карточке ленты, а вопрос «откуда это» задают редко. Своё — знак самой
   площадки, чужое — два листа, знак копии; имя остаётся в заголовке и в
   спрятанной подписи для читалки. Тихим цветом, потому что спорить с датой за
   внимание ей по-прежнему незачем; пунктир снизу снят — подчёркивать больше
   нечего. Правил для ссылки здесь больше нет: с 27.08.2026 метка никуда не
   ведёт, и курсор у неё один — «help». */
.orig { margin-left: 10px; color: var(--meta); display: inline-flex; align-items: center; vertical-align: -2px; cursor: help; }
.orig .ico { width: 14px; height: 14px; }
.clink { margin-left: 18px; }
/* «Добавить комментарий» стоит той же строкой, что и ссылка на обсуждение, и
   тем же кеглем: это второй вход в тот же разговор, а не отдельное действие. */
.addc { margin-left: 18px; }
.cnt { font-size: 10px; color: var(--meta); }

.shots { margin-top: 12px; }
.shots img { max-width: 100%; height: auto; display: block; border: 1px solid var(--rule); }

/* Иллюстрация в ЛЕНТЕ. Потолок по высоте, а не по ширине: в ленте двадцать
   карточек, и вертикальный снимок с телефона иначе занимает экран целиком —
   ровно то, из-за чего длинный текст здесь сворачивается показом.

   Файл при этом один и тот же, полного размера: второй, уменьшенной копии
   площадка не хранит. Цена названа честно — читатель ленты качает картинку
   целиком, — и она принята: своих картинок сотни, а не миллионы, а вторая
   копия это второй файл на диске без уборки и второй проход ffmpeg. */
.thumb { display: block; margin-top: 12px; }
.thumb img {
  max-width: 100%; max-height: 320px; width: auto; height: auto;
  display: block; border: 1px solid var(--rule);
}

/* ------------------------------------------------------------------- ролик

   Карточка ролика: наше превью, значок «play» и адрес. Плеера тут нет и не
   будет — довод в web/video.go, он про согласие, а не про вёрстку.

   Кадр держит aspect-ratio, а не width/height у картинки: превью приезжает с
   разных площадок и разной формы (у YouTube это 480×360 с чёрными полями), и
   единственный способ не дать странице прыгать при загрузке — задать место
   заранее, а саму картинку вписать кадрированием. Поля при этом срезаются, что
   и нужно. */

.vid {
  display: block; max-width: 420px; margin: 12px 0 0;
  border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
  background: var(--card); color: var(--ink);
}
.vid:hover { text-decoration: none; border-color: var(--link); }
/* Фон чёрный, а не по теме: пока превью не загрузилось, на его месте обязан
   быть кадр, а не дыра цвета карточки. */
.vidpic { position: relative; display: block; background: #000; aspect-ratio: 16 / 9; }
.vidpic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Значок нарисован рамками, а не картинкой: файл ради треугольника — это ещё
   один запрос и ещё одно место, где однажды разойдутся тема и содержимое. */
.vidplay {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 38px;
  margin: -19px 0 0 -27px; border-radius: 8px;
  background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .35);
}
.vidplay::after {
  content: ""; position: absolute; left: 20px; top: 10px;
  border: 8px solid transparent; border-left: 13px solid #fff; border-right: 0;
}
.vidfoot {
  display: flex; gap: 8px; align-items: baseline; overflow: hidden;
  padding: 7px 10px; font-size: 12px;
}
.vidfoot b { flex: 0 0 auto; }
.vidurl { color: var(--meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty { color: var(--meta); padding: 20px 0; }

/* ---------------------------------------------------------------- постраничка */

.pages { margin: 14px 0; }
.pg {
  display: inline-block; min-width: 26px; padding: 5px 9px; margin: 0 3px 4px 0;
  text-align: center; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--btn); color: var(--ink);
}
.pg:hover { text-decoration: none; border-color: var(--link); color: var(--link); }
.pg.cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg.gap { border-color: transparent; background: none; }
.pg.off { color: var(--meta); background: none; border-color: transparent; }
/* Многоточие для узкого экрана: на широком его место занимают сами номера. */
.pg.gap.mob { display: none; }

/* ---------------------------------------------------------------- тред */

/* Переключатель вида — иконками, как на НГС (там два пустых <a> с title, а
   картинку рисует CSS). Цвет значка = currentColor, поэтому «выбрано» и смена
   темы работают одним свойством. */
.switch { position: absolute; top: 12px; right: 0; display: flex; gap: 4px; }
.switch .sw {
  display: block; padding: 5px 7px; line-height: 0; color: var(--meta);
  border: 1px solid transparent; border-radius: 3px;
}
.switch .sw:hover { color: var(--link); }
.switch .sw.on { color: var(--ink); border-color: var(--rule); background: var(--btn); }

.cttl { font-size: 20px; font-weight: 700; margin: 22px 0 4px; }
.cttl .cnt { font-size: 13px; font-weight: 400; }
.cttl .closed { font-size: 13px; font-weight: 400; color: var(--meta); margin-left: 14px; }
.foldall { float: right; font-weight: 400; margin-top: 4px; }

.thread { list-style: none; margin: 0; padding: 0; }

/* Отступ ветки: класс несёт только НОМЕР уровня, расстояние считает calc.
   На НГС это inline padding-left, но inline-стиль запрещён нашим CSP. */
.d1 { --d: 0 } .d2 { --d: 1 } .d3 { --d: 2 } .d4 { --d: 3 }
.d5 { --d: 4 } .d6 { --d: 5 } .d7 { --d: 6 } .d8 { --d: 7 }
.d9 { --d: 8 } .d10 { --d: 9 } .d11 { --d: 10 } .d12 { --d: 11 }

.c {
  display: flex; gap: 15px;
  padding: 14px 0 12px;
  margin-left: calc(var(--d, 0) * var(--step));
  border-bottom: 1px solid var(--rule);
}
/* Свёрнутая ветка убирается атрибутом hidden, и правило для него нужно СВОЁ:
   браузерное `[hidden] { display: none }` живёт в таблице агента, а любой
   авторский display её перебивает — с `display: flex` выше сворачивание не
   работало вовсе (жалоба 18.08.2026: «не работает „Свернуть все ответы“»).
   Селектор с атрибутом весит больше `.c`, поэтому !important не нужен. */
.c[hidden] { display: none; }
.c:first-child { border-top: 1px solid var(--rule); }
/* Подсветка комментария, на который пришли по анкору. Цвет — токеном: он
   свой у каждой палитры, а селектор на тему держал бы его только у той, про
   которую вспомнили, — светлая подсветка на тёмной странице засвечивает
   реплику целиком. */
.c:target { background: var(--hl); }
.thread.linear .c { margin-left: 0; }

/* Строка треда с формой ответа. Отступ — как у реплики, которой отвечают: форма
   про неё, и вровень с корнем ветки она читалась бы как ответ не тому. В
   линейном виде отступов нет вовсе, значит нет и здесь. */
.replyrow { margin-left: calc(var(--d, 0) * var(--step)); list-style: none; }
.thread.linear .replyrow { margin-left: 0; }

/* Аватар комментария такой же, как у заметки: .lv-comment__avatar
   { width:100px; height:100px }, а тело — с отступом 115px. Мельче он делает
   тред плотнее, но лица в ленте реплик — это половина узнавания собеседника. */
.cava { flex: 0 0 100px; }
.cava .ava { width: 100px; height: 100px; }
.cbody { flex: 1 1 auto; min-width: 0; }
/* Ник, под ним дата — как в комментариях на сайте. */
.chead { margin-bottom: 6px; }
.cdate { font-size: 12px; margin-top: 1px; }
.anchor { color: var(--meta); font-size: 12px; margin-left: 8px; visibility: hidden; }
.c:hover .anchor, .c:target .anchor { visibility: visible; }

/* Простыня (реплика длиннее longBodyRunes) показывается началом, остальное — по
   кнопке. Ограничение стоит ПОКАЗОМ, а не запретом писать: в базе 10,7 млн
   зеркальных реплик, переписать их нельзя, а живому автору длину мысли мы не
   назначаем.

   Разворачивает галочка, а не скрипт: без JS страница обязана оставаться
   рабочей. Сама галочка спрятана размером в пиксель, но НЕ display:none — иначе
   она выпала бы и из порядка обхода клавиатурой, и из дерева доступности вместе
   со своей подписью. */
.expand {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}
.clip { max-height: 20em; overflow: hidden; position: relative; }
/* Затухание вниз говорит «текст продолжается» — обрыв на полуслове читается как
   поломка. Цвет — та поверхность, на которой текст ЛЕЖИТ, а лежит он на
   карточке: фон красит .main, у самой реплики и у заметки своего фона нет.
   Было --page (фон за карточкой), и в светлой теме затухание уходило в серую
   полосу поверх белого листа. */
.clip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em;
  background: linear-gradient(to bottom, transparent, var(--card)); pointer-events: none;
}
.expand:checked ~ .clip { max-height: none; }
.expand:checked ~ .clip::after { display: none; }
.more { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--link); cursor: pointer; }
.more:hover { text-decoration: underline; }
.more .mc { display: none; }
.expand:checked ~ .more .mo { display: none; }
.expand:checked ~ .more .mc { display: inline; }
/* Фокус виден на ПОДПИСИ: сама галочка размером в пиксель, и обводка на ней
   означала бы, что клавиатурой страница проходится вслепую. */
.expand:focus-visible ~ .more { outline: 2px solid var(--link); outline-offset: 2px; }
/* Пришли по ссылке на саму реплику (анкор, уведомление, ответ) — она
   разворачивается сразу: человек шёл читать именно её, и лишнее нажатие тут
   было бы издевательством. */
.c:target .clip { max-height: none; }
.c:target .clip::after { display: none; }
.c:target .more { display: none; }

/* Обращение «Ник, » — ребро, а не часть текста: в базе его нет, здесь оно
   дорисовано из ТЕКУЩЕГО ника адресата. На сайте оно выделено жирным. */
.to { font-weight: 700; color: var(--ink); }
.to:hover { text-decoration: underline; }

/* Подвал комментария: «Ответить» и число ответов в одной строке. «Ответить»
   первым — на сайте оно тоже слева и это главное действие; «Ответы N» скрипт
   подменяет кнопкой сворачивания, поэтому вид у них общий. */
.cact { margin: 8px 0 0; font-size: 12px; color: var(--meta); display: flex; gap: 14px; }
.rcount { cursor: default; }
.rep { color: var(--link); }
.rep:hover { text-decoration: underline; }
.fold {
  font: inherit; font-size: 12px; color: var(--link);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.fold:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- запись */

/* Заголовок ленты и «Написать заметку» в одной строке: на НГС кнопка публикации
   стоит над лентой, справа, и это первое, что ищет глазами вернувшийся автор. */
.feedhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.newnote {
  font-size: 13px; padding: 7px 16px; border-radius: 3px;
  background: var(--accent); color: #fff; white-space: nowrap;
}
.newnote:hover { text-decoration: none; opacity: .9; }
.editlink { font-size: 12px; margin-left: 14px; }

/* Мордолента — полоса лиц жителей НАД карточкой ленты (faces.go; имя не
   выдумано, так её звали на НГС). Вид снят с записанной ленты сайта, а не
   придуман: там это section.lv-top-tape перед блоком содержимого, внутри —
   div.lv-top-tape__visible-part с одним рядом ul.lv-top-tape__list, фото
   70×70 (замер по index.css НГС, см. ниже) и БЕЗ подписей: имя всплывает
   при наведении (на сайте это qtip, у нас title — он же работает без JS).

   Ряд НЕ ПЕРЕНОСИТСЯ на второй этаж: тридцать лиц в три ряда над лентой — уже
   не лента, а стена. Листается он при этом по-настоящему — пальцем на
   телефоне, тачпадом и стрелками на десктопе, — а вот ПОЛОСЫ ПРОКРУТКИ не
   видно: она разрезала бы ряд лиц пополам, и на НГС её тоже не было (там ряд
   двигали тень со стрелкой). Прячется полоса тремя разными свойствами, потому
   что браузеры договориться о ней так и не смогли.

   Ширина и поля — как у .main, потому что полоса ему СОСЕДКА, а не часть: на
   сайте она тоже стоит над блоком, а не внутри него. */
.faceband { position: relative; width: 100%; max-width: 910px; margin: 10px auto 0; }
.faces {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.faces::-webkit-scrollbar { width: 0; height: 0; }
.faces li { flex: 0 0 auto; padding: 5px; }
.faces a { display: block; line-height: 0; }

/* РАЗМЕР ЛИЦА В ПОЛОСЕ — 70×70, и это ЗАМЕР, а не глазомер (31.08.2026,
   замечание владельца «в оригинальной мордоленте аватары меньше аватаров
   авторов заметок»). Снято с живого index.css НГС, где полоса описана так:

     .lv-top-tape__visible-part { height: 82px }
     .lv-top-tape__item         { height: 82px; width: 82px }
     .lv-top-tape__link         { padding: 5px; height: 70px; width: 70px }
     .lv-top-tape__userpic      { width: 100%; height: 100%; border-radius: 3px }
     .lv-top-tape__link:hover   { padding: 0; width: 80px; height: 80px }

   Стояло у нас 100×100 — размер САМОГО ФАЙЛА (аватары НГС лежат как
   `..._100_100_c.jpg`), и записанная страница называет именно его. Отсюда и
   ошибка: разметка говорит про файл, размер показа задаёт таблица стилей, и
   первого без второго мало. Полоса от этого весила ровно столько же, сколько
   колонка автора, — то есть переставала быть полосой.

   Отступ 5px у гнезда и НУЛЕВОЙ зазор дают те же 10px между лицами, что и
   раньше, а заодно место для роста при наведении: лицо занимает собственные
   поля и НЕ двигает соседей — так это и сделано на сайте. */
.faces .ava { width: 70px; height: 70px; }
.faces a:hover .ava { width: 80px; height: 80px; margin: -5px; }

/* КАРТОЧКА ДВОЙНИКА — смежного обсуждения (parts/synth.gohtml).

   Знак площадки занимает место аватара: у двойника нет автора-человека, и
   квадрат ровно того же размера держит колонку, чтобы соседние карточки ленты
   не разъезжались. Ник под ним — имя площадки, приглушённое и без ссылки: это
   не тот, к кому идут знакомиться.

   Цитата — линейка слева и приглушённая шапка, как у всякой цитаты: она обязана
   читаться как ЧУЖИЕ слова, а не как текст этой записи. Отступ у текста тот же,
   что у линейки, чтобы вложенная в цитату разметка не липла к ней. */
.sitemark {
  width: 100px; height: 100px; display: flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--btn); color: var(--meta);
}
.sitemark .ico { width: 44px; height: 44px; }
.nick._site { color: var(--meta); font-weight: 600; }
.synthcap { margin: 0 0 10px; color: var(--meta); font-size: 13px; }
.synthq { margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--rule); }
.synthq .qhead { margin: 0 0 6px; color: var(--meta); font-size: 13px; }
.synthq .qnick { font-weight: 600; }
.synthq .date { color: inherit; }

/* Стрелки листания — те самые lv-top-tape__nav с сайта: тень и стрелка у края.
   Рисует их СКРИПТ, а не сервер, и по общему правилу площадки: без JS ряд
   листается пальцем и тачпадом, а мёртвых кнопок на странице не бывает.
   Показываются они по одной и только когда есть куда ехать.

   [hidden] названо явно, потому что display: flex сильнее правила из таблицы
   браузера — та же грабля, что со свёрнутой веткой в треде. */
.tnav {
  position: absolute; top: 0; bottom: 0; width: 44px; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink);
}
.tnav[hidden] { display: none; }
.tprev { left: 0; background: linear-gradient(to right, var(--page) 55%, transparent); }
.tnext { right: 0; background: linear-gradient(to left, var(--page) 55%, transparent); }

/* Форма записи — одна на всё: новая заметка, правка, ответ в тред. */
.wform { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; }
.wform textarea {
  font: inherit; width: 100%; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--card); color: var(--ink);
}
.wact { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wact button {
  font: inherit; padding: 8px 24px; cursor: pointer; border: 0; border-radius: 3px;
  background: var(--accent); color: #fff;
}
.wact .alt { color: var(--meta); font-size: 13px; }
.chk { font-size: 13px; color: var(--meta); display: flex; gap: 6px; align-items: center; }

/* Приложенная картинка: полоса закачки и карточка с превью (shotdraft.go).
   Обе строки нарисованы сервером заранее и скрыты — скрипт их только
   показывает, поэтому без JS они молчат и ничего не занимают.

   Превью НЕ во всю ширину формы: это не иллюстрация, а подтверждение выбора, и
   рядом с ним обязаны помещаться слова о том, что уйдёт с заметкой. Отсюда же
   потолок по высоте — вертикальный снимок с телефона иначе выдавил бы кнопку
   «Опубликовать» за нижний край экрана. */
.shotwait { font-size: 13px; color: var(--meta); display: flex; gap: 10px; align-items: center; margin: 0; }
.shotwait progress { flex: 1; max-width: 16rem; height: 8px; }
.shotbox:empty { display: none; }
.shotbox { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.shotbox .fine { margin: 0; flex: 1; min-width: 12rem; }
.shotprev {
  max-width: 220px; max-height: 220px; width: auto; height: auto;
  border: 1px solid var(--rule); border-radius: 3px; display: block;
}
.shotdrop {
  font: inherit; font-size: 13px; padding: 2px 10px; margin-left: 6px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--card); color: var(--meta);
}

.compose { max-width: 44rem; }
.compose .bad, .replybox .bad { margin: 10px 0 0; }

/* Форма ответа. Внизу треда она отвечает ЗАМЕТКЕ, а под репликой (.replyrow) —
   своему адресату; отступ сверху меньше в треде, где она стоит вплотную к
   реплике, — большой зазор там читался бы как конец разговора. */
.replybox { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.replyrow .replybox { margin-top: 0; padding-bottom: 16px; }
.repto { margin: 0; font-size: 13px; color: var(--meta); }
.repto a { color: var(--link); }

.nickform { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 20px 0 0; }
.nickform label { color: var(--meta); font-size: 13px; }
.nickform input {
  font: inherit; padding: 7px 10px; min-width: 14rem;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--card); color: var(--ink);
}
.nickform button {
  font: inherit; padding: 7px 18px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--btn); color: var(--ink);
}

/* ---------------------------------------------------------------- вход и ошибки */

.enterbox, .oops { max-width: 34rem; margin: 5vh auto; text-align: center; }
.enterbox h1, .doctext h1 { margin: 0 0 12px; font-weight: 400; font-size: 26px; }
.enterbox .lead { color: var(--ink); margin: 0 0 18px; }
.enterbox .alt { margin-top: 26px; }
.enterbox .step { color: var(--meta); font-size: 12px; margin: 0 0 6px; text-transform: uppercase; }

/* Код показывается один раз и его переписывают руками — отсюда моноширинный
 * шрифт, крупный кегль и разрядка: «0 или O» человек не должен решать. */
.code {
  font: 700 24px/1.3 "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  letter-spacing: 2px; margin: 18px 0; padding: 14px 10px;
  background: var(--btn); border: 1px dashed var(--rule); border-radius: 3px;
  user-select: all;
}

/* Шаги входа названы заранее: человеку идти на НГС, и он должен знать это до
 * того, как начнёт. */
.steps { text-align: left; margin: 18px auto; padding-left: 22px; max-width: 26rem; color: var(--ink); }
.steps li { margin: 6px 0; }

.whoami { display: flex; gap: 15px; align-items: center; justify-content: center; margin: 18px 0; }
.whoami .nick { display: block; font-size: 18px; font-weight: 600; }
.whoami .fine { display: block; }

/* «Обновить аватар» стоит под ником, у самой карточки: она про то, что видно
 * рядом, — а не в общем ряду кнопок страницы. Мельче кнопки смены ника, потому
 * что нажимают её изредка. */
/* Настройка «про меня» на /me: слева название и текущее состояние, справа
 * кнопка. Ряд, а не форма со «сохранить», потому что состояний два и нажатие
 * само и есть выбор: экрана подтверждения тут не бывает, промах отменяется
 * вторым нажатием. */
.pref {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin: 20px 0 0;
}
.pref .fine { display: block; margin: 2px 0 0; }
.pref button {
  font: inherit; padding: 7px 18px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--btn); color: var(--ink);
}

/* Кнопки про фото стоят В РЯД, а не столбиком: они про одно и то же место на
 * странице, и разнесённые по строкам читались бы как две разные настройки. На
 * узком экране ряд переносится — тем же flex-wrap, что в шапке. */
.avarow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.avaform button {
  font: inherit; font-size: 13px; padding: 4px 12px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--btn); color: var(--ink);
}

.warn {
  text-align: left; margin: 14px 0; padding: 10px 12px;
  border-left: 3px solid var(--accent); background: var(--btn);
}

/* Документ согласия читают, а не проглядывают: текст слева, обычной длины
 * строки, без сворачивания. */
.doc { max-width: 44rem; text-align: left; }
.doctext h2 { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
.doctext p { margin: 8px 0; }

/* Документы отдельными страницами (соглашения, политика, отказ от
 * ответственности). Та же колонка, что на экране входа, но без «карточки»:
 * это не шаг, который проходят, а текст, который читают подряд.
 *
 * Соглашений на странице ДВА, и каждое остаётся собой — со своим заголовком
 * первой строки, как в экране входа: сводить их под один заголовок значило бы
 * показывать вместо двух документов один пересказ. Разделяет их линия. */
.docpage { max-width: 44rem; margin: 0 auto; }
.docpage .lead { margin: 0 0 22px; }
.docsec + .docsec { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }
.agree { margin: 24px 0 8px; }
.agree button {
  font: inherit; font-size: 16px; padding: 10px 30px; cursor: pointer;
  border: 0; border-radius: 3px; background: var(--accent); color: #fff;
}
.refuse { margin: 0 0 18px; }
.linkish {
  font: inherit; background: none; border: 0; color: var(--meta);
  cursor: pointer; text-decoration: underline; padding: 4px;
}

.sub { font-size: 20px; font-weight: 400; margin: 26px 0 10px; }
.consents { list-style: none; margin: 0; padding: 0; }
.consent {
  border-top: 1px solid var(--rule); padding: 12px 0;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.consent .cname { flex: 1 1 20rem; }
.consent button {
  font: inherit; padding: 6px 16px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--btn); color: var(--ink);
}
.consent button.danger { border-color: var(--female); color: var(--female); }
.keyform { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 18px 0; }
.keyform label { color: var(--meta); }
.keyform input {
  font: inherit; width: 100%; max-width: 22rem; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--card); color: var(--ink);
}
.keyform button, .oops a.back {
  font: inherit; padding: 8px 22px; cursor: pointer; border: 0; border-radius: 3px;
  background: var(--link); color: #fff;
}
.bad { color: var(--female); }
.oops .code { font-size: 40px; margin: 0; color: var(--meta); }
.oops .msg { margin: 4px 0 18px; }

/* ---------------------------------------------------------------- модерация */

/* Полоска действий под публикацией. Мелкая и приглушённая намеренно: она стоит
   под КАЖДОЙ репликой, и если её видно так же, как текст, страница перестаёт
   быть разговором и становится пультом. */
.modbar { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.minline { display: inline-flex; gap: 6px; align-items: center; margin: 6px 0 0; }
.mbtn {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--btn); color: var(--ink);
}
.mbtn.danger { border-color: var(--female); color: var(--female); }
.mlink { font-size: 12px; color: var(--meta); }
/* Значки полоски действий и значок реплики отправляются НА ТЕЛЕФОН, а на
   десктопе не показываются: там места хватает, и слово точнее знака. Разметка
   несёт и то и другое, потому что ширины экрана сервер не знает, — тот же
   приём, что у постранички, где лишние номера прячет CSS. */
.modbar .ico, .clink .ico { display: none; }
/* Два тихих слова подряд читаются как ОДНА фраза: «Поправить Автор» — это
   заметил владелец на снимке 26.08.2026, и на десктопе оно выглядит так же.
   Разделяет их точка, а не подчёркивание: ссылки на НГС не подчёркнуты, и
   заводить подчёркивание ради двух слов значило бы менять язык страницы. На
   телефоне точка снимается — там у ссылок рамка, и разделять уже нечего. */
.mlink + .mlink::before { content: "·"; margin-right: 8px; color: var(--rule); }
.mtag {
  font-size: 11px; color: var(--meta); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 6px;
}
.mtag.warnbadge { border-color: var(--accent); color: var(--accent); }

/* Скрытое модерацией видно ТОЛЬКО модератору (запрос отдаёт его лишь ему), и
   отличаться оно обязано с одного взгляда — иначе он вернёт скрытое, приняв за
   живое, или скроет дважды. Отсюда ЗАТЕНЕНИЕ: не убрано, но и не в разговоре.
   У ЗАМЕТКИ гасится содержимое, а не строка целиком, и это не придирка к виду:
   opacity заводит свой слой, и вернуть полоске действий полную силу изнутри
   потом нечем, — а ею скрытое и возвращают. У реплики полоска короче и правило
   осталось прежним, на всю строку. */
.chid { opacity: .55; }
.nhid .author, .nhid .nbody > :not(.modbar) { opacity: .55; }
.chid .text, .nhid .text { text-decoration-line: line-through; text-decoration-color: var(--rule); }

.modsum { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; margin: 12px 0 18px; }
.modq, .myhid { list-style: none; margin: 0; padding: 0; }
.mitem { border-top: 1px solid var(--rule); padding: 12px 0; }
.mitem.mhid { opacity: .8; }
.mhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.mwhy { margin: 6px 0 0; }
.mquote {
  margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--female);
  color: var(--meta);
}
.mrep { margin: 4px 0 0; color: var(--meta); font-size: 13px; }
/* Текст показывается ЦЕЛИКОМ и с сохранением переносов: решать по обрезанной
   цитате — ровно та ошибка, ради которой кнопки продублированы на странице
   заметки. */
.mtext { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.mdec { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; }
/* Текст заметки в форме, где его не правят: администратор у ЗЕРКАЛЬНОЙ заметки
   ставит одну картинку, а видеть, к чему он её ставит, обязан. Не textarea и не
   поле ввода: править нечего, и вид должен об этом говорить сам — тот же лист,
   что и на странице, только приглушённой рамкой. */
.lockedtext { border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px;
  background: var(--card); color: var(--ink); max-height: 40vh; overflow-y: auto; }
.lockedtext p { margin: 0 0 10px; }
.lockedtext p:last-child { margin-bottom: 0; }
.mreason, .mdays, .mrole {
  font: inherit; font-size: 13px; padding: 5px 8px; flex: 1 1 16rem;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--card); color: var(--ink);
}
.mdays { flex: 0 0 5rem; }
.mnum { flex: 0 0 8rem; }
.mrole { flex: 0 0 12rem; }

/* Выданный код. Показывается ОДИН раз, поэтому отделён рамкой от всего
   остального на странице: пропустить его глазами нельзя — второго показа не
   будет. Числа те же, что у экрана входа (.code): его тоже переписывают руками. */
.issued {
  margin: 14px 0 22px; padding: 2px 16px 10px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--card);
}
.issued .code { text-align: center; }

/* ---------------------------------------------------------------- страница участника

   Шапка повторяет колонку автора у заметки: то же квадратное фото слева, то же
   имя рядом. Своего вида профиль не заводит намеренно — иначе он оказался бы
   чужим той самой странице, с которой на него приходят.

   Список публикаций — строки, а не карточки: это «чем человек занят», а не
   вторая лента, и карточка с телом заметки превратила бы двадцать строк в
   двадцать экранов. */

.uhead { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 14px; }
.umeta { min-width: 0; }
.umeta .ttl { margin: 0 0 4px; }
.ucnt { margin: 6px 0 0; color: var(--meta); }
.ubio { margin: 0 0 14px; }
.ubio .text { margin: 8px 0 0; }
.mdecs { margin: 0 0 18px; }

.upub { list-style: none; margin: 0 0 18px; padding: 0; }
.upub li {
  border-top: 1px solid var(--rule); padding: 8px 0;
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
}
.upub a { overflow-wrap: anywhere; }

/* Жители в панели администратора: фото слева, как везде, чтобы менять его
   глядя ровно на то, что меняешь. */
.plist { list-style: none; margin: 0; padding: 0; }
.pitem { border-top: 1px solid var(--rule); padding: 12px 0; display: flex; gap: 16px; }
.pbody { min-width: 0; flex: 1; }

.modlog { list-style: none; margin: 0; padding: 0; }
.lgi {
  border-top: 1px solid var(--rule); padding: 6px 0; font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.lgact { font-weight: 600; }
.lgwho { color: var(--meta); }
.lgwhy { color: var(--meta); }

/* ---------------------------------------------------------------- справка */

/* Справка — единственная страница, которую пишет человек, а не запрос. Мера
   здесь другая, чем в ленте: не «как на НГС», а «читается с экрана телефона».
   Отсюда узкая колонка (44rem — примерно 70 знаков в строке) и крупный
   межстрочный интервал. */
.help { max-width: 44rem; }
.help .lead { font-size: 16px; margin: 0 0 20px; }
.help section { margin: 0 0 26px; }
.help h2 { font-size: 20px; font-weight: 600; margin: 26px 0 10px; }
.help p { margin: 10px 0; line-height: 1.55; }
.help ul, .help ol { margin: 10px 0; padding-left: 22px; line-height: 1.55; }
.help li { margin: 6px 0; }
/* Оглавление — плитками, а не списком: на телефоне список из девяти пунктов
   занимает экран целиком, и до первого раздела человек доходит прокруткой. */
.toc { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 24px; }
.toc a {
  font-size: 13px; padding: 4px 10px; border: 1px solid var(--rule);
  border-radius: 3px; background: var(--btn);
}
.toc a:hover { text-decoration: none; border-color: var(--link); }
/* Номер правила виден: на него ссылаются в решениях модератора. */
.rules li { margin: 8px 0; }
.help code {
  font: 90%/1 "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  padding: 1px 4px; border-radius: 3px; background: var(--btn);
}

/* ---------------------------------------------------------------- подвал */

.foot { flex: 0 0 auto; border-top: 1px solid var(--rule); background: var(--card); padding: 12px 0 24px; }
/* Ряд документов. Разделитель между ссылками рисуется не символом в разметке
   (точку или палку читалка озвучит), а промежутком: на узком экране ряд
   переносится строкой, и в вертикальном списке разделитель был бы лишним.
   Цвет ссылок обычный, а не приглушённый «служебный»: мелкий текст цветом
   --meta на карточке даёт 2,85:1 в палитре НГС, и политику пришлось бы
   разглядывать. */
.fnav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; }
.fine { color: var(--meta); font-size: 11px; margin: 10px 0 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* На телефоне колонка автора ужимается, а отступ ветки уменьшается вчетверо:
   иначе десятый уровень уезжает за край экрана. Отдельной мобильной вёрстки
   у нас нет — в отличие от НГС, где их две и правки в них расходятся. */
@media (max-width: 700px) {
  :root { --step: 8px; }
  /* ПОЛЕ СЛЕВА ОДНО, А НЕ ДВА ВЛОЖЕННЫХ (жалоба владельца 26.08.2026:
     «большой промежуток между краем экрана и полосой закрепления»). Полей тут
     стояло две штуки одно в другом — 10px у .main и ещё 10px у .wrap внутри,
     — итого 40px на обе стороны, десятая часть экрана в 389 пикселей.
     На десктопе внешнее поле осмысленно: карточка ЛЕЖИТ на странице, и вокруг
     неё видна подложка. На телефоне карточка идёт от края до края (margin: 0
     строкой ниже), подложки не видно вовсе — и второе поле держало пустоту
     ради вида, которого нет. */
  .main { padding: 12px 12px 20px; margin: 0; }
  .main .wrap { padding: 0; }
  /* ЧИТАЕМОСТЬ ПРОТИВ ПУСТОТЫ (жалоба владельца 23.08.2026: «слишком мелко и
     при этом слишком много свободного пространства»). Числа НГС здесь не указ:
     14px и три отдельные строки служебного под каждой репликой — это мера
     десктопа, где строка втрое длиннее, а курсор точнее пальца. На телефоне
     тот же набор давал однострочную реплику высотой в четыре строки: текст,
     реакции, «Ответить», полоска модератора.
     Текст читают — ему 16px, столько же, сколько браузер считает нормой для
     страницы вообще; служебное вокруг остаётся мелким, потому что оно и есть
     служебное. */
  .text { font-size: 16px; line-height: 1.5; }
  .chead .nick { font-size: 15px; }
  .cact { font-size: 13px; gap: 12px; }
  /* Реакции, «Ответить» и полоска модератора идут ОДНОЙ строкой. inline-flex, а
     не flex: так они текут в общей строке и переносятся сами, когда не
     помещаются, — то есть на узком экране это по-прежнему их собственный
     порядок, а не сетка, которую надо было бы держать руками. */
  .rx, .cact, .modbar { display: inline-flex; vertical-align: middle; margin: 8px 12px 0 0; }
  .c { gap: 12px; padding: 10px 0 8px; }
  .ttl { font-size: 22px; }
  .note { min-height: 0; }
  /* КОЛОНКА АВТОРА ЗАПОЛНЯЕТСЯ ЦЕЛИКОМ (второй заход, 26.08.2026: «слева много
     места теряется, аватарку можно увеличить, и чтобы Паноптикум влезал в одну
     строку»). Три просьбы разом решаются одним: аватар становится РАВЕН
     колонке. Пустые поля по бокам маленькой картинки и были тем самым
     потерянным местом — колонка при этом не выросла, выросла картинка.
     Заодно ник получает всю её ширину и перестаёт рваться посреди слова
     («Панопт/икум» с первого снимка). */
  .author { width: 84px; flex-basis: 84px; }
  .ava { width: 84px; height: 84px; }
  .author .nick { max-width: 100%; font-size: 13px; }
  /* Зазор между колонкой автора и текстом, наоборот, РАСТЁТ (та же жалоба:
     «между аватаром и текстом кажется можно увеличить»). Первым заходом он был
     ужат до 8px ради ширины текста — платить за неё было больше нечем; теперь
     есть, её вернуло снятое второе поле, и с запасом. 14px — это видимая
     граница двух столбцов: ниже десяти они читаются как один. */
  .note { gap: 14px; }
  .note.pinned { padding-left: 8px; }
  .cava { flex-basis: 56px; }
  .cava .ava { width: 56px; height: 56px; }
  /* СЛУЖЕБНАЯ СТРОКА ПОД ЗАМЕТКОЙ — ОДНА, А НЕ ТРИ (жалоба владельца
     26.08.2026: «элементы слишком мелкие, какие-то съехали в асимметричную
     кучку»). До этого дня «Комментарии N» и «Добавить комментарий» стояли
     display:block каждый со своей строки — три этажа по 12px под каждой из
     двадцати заметок ленты. Теперь это ряд, который переносится сам.

     И это ряд ПОД ПАЛЕЦ: 14px вместо 12 и высота 34px у нажимаемого. Цифра не
     из воздуха — палец накрывает около 9 мм, а 12px-ссылка высотой 16px
     означает «целься». Строка от этого не выросла: три этажа занимали больше,
     чем один ряд с запасом. */
  .nfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 13px; }
  .date, .orig, .edited { margin-left: 0; }
  .clink, .addc {
    margin-left: 0; display: inline-flex; align-items: center; gap: 5px;
    min-height: 34px; font-size: 14px;
  }
  /* «Комментарии» становится значком: тем же самым, что стоит в липкой шапке,
     — человек видит его там всё время, пока читает тред. Слово не удаляется, а
     прячется .sr-only: оно остаётся именем ссылки для читалки, а объяснение
     для глаза даёт title (правило Ш5з). */
  .modbar .ico, .clink .ico { display: inline-block; }
  .modbar .lbl, .clink .lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  /* ПОЛОСКА МОДЕРАТОРА — ЗНАЧКАМИ И В ОДНУ СТРОКУ (решение владельца
     26.08.2026). Пять подписей словами в строку не помещались и складывались
     кучей: «Скрыть» и «Закрыть обсуждение» в первый ряд, «Открепить» и два
     серых слова во второй. Значками пять кнопок это 5×40 + 4×6 = 224px, а под
     полоску на экране в 360 CSS-пикселей остаётся 254 — помещается.

     flex-wrap оставлен СТРАХОВКОЙ, а не отменён: на 288 пикселях (аппарат с
     крупным системным шрифтом) ряд не влезает и переносится. Перенос честнее
     прокрутки вбок: уехавшую за край кнопку не видно вовсе, а искать её внутри
     ленты никто не станет.

     40px — это и есть размер под палец; у кнопок он берётся минимумами, а не
     кеглем, потому что содержимое у них теперь значок, а не текст. */
  .modbar { gap: 6px; }
  .minline { margin: 0; }
  .mbtn, .mlink {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 40px; min-height: 40px; padding: 0 9px; font-size: 13px;
  }
  .mbtn .ico, .mlink .ico { width: 20px; height: 20px; }
  /* «Поправить» и «Автор» на телефоне тоже нажимают пальцем, поэтому получают
     рамку: серое слово без границ на сенсорном экране не читается как кнопка —
     и именно поэтому «Поправить Автор» слипались в одну фразу. */
  .mlink { border: 1px solid var(--rule); border-radius: 3px; }
  .mlink + .mlink::before { content: none; }
  /* Шапка и подвал выровнены по КОЛОНКЕ ТЕКСТА, а не по краю экрана: название
     площадки и значок участника упирались в самый край (жалоба владельца
     18.08.2026). Число здесь ОДНО с полем .main выше и обязано ехать вместе с
     ним — было 20px, стало 12: шапка, отбитая не по тексту, читается как
     съехавшая. Ширины у заметки это по-прежнему не отнимает: отступ выдан
     шапке и подвалу поимённо, а не всем .wrap разом. */
  .top .wrap, .foot .wrap { padding: 0 12px; }
  /* Ник рядом со значком уступает место: меню и без него понятно, а ширина в
     шапке кончается раньше всего. */
  .acctbtn .who { display: none; }
  /* Переключатель уходит из угла в свою строку, а резерв под него снимается
     совсем: 76px на телефоне — это треть строки. */
  .switch { position: static; justify-content: flex-end; margin: 0 0 6px; }
  .notebox .nbody { padding-right: 0; }
  /* Вкладки шапки ужимаются вместе с названием: «Зазеркалье», «Лента» и
     «Справка» в прежнем кегле не оставляли места значку участника, и он уезжал
     второй строкой. Переносу это не мешает — flex-wrap остаётся страховкой. */
  .brand { font-size: 16px; }
  .topin { gap: 8px 10px; }
  .tab { padding: 5px 8px; font-size: 13px; }
  /* Счётчик реплик ужимается вместе с ними, и по той же причине: строка шапки на
     телефоне считается по знакам. Со счётчиком в ней пять элементов вместо
     четырёх, и лишние десять пикселей у каждого — это перенос на вторую строку,
     то есть липкая шапка в пол-экрана. */
  .hcount { padding: 4px 8px; font-size: 12px; gap: 4px; }
  .hcount .ico { width: 16px; height: 16px; }
  /* ПОСТРАНИЧКА — НА ВСЮ ШИРИНУ И ПОД ПАЛЕЦ (просьба владельца 26.08.2026:
     «слишком мелкий, растяни на всю ширину и сделай кнопки крупнее»). До этого
     дня это была десктопная строка, ужатая до телефона: кегль 13, высота 26,
     кучка в левом углу — а справа полстроки пустоты. Мимо такой кнопки
     промахнуться легче, чем попасть, и промах тут дороже обычного: уехал не в
     ту страницу ленты, а вернуться нечем — «назад» у постранички нет.

     Растягивает её flex, и доли получаются НЕРОВНЫЕ нарочно: flex-basis auto
     оставляет каждому номеру его собственную ширину («5887» шире единицы и
     обязан остаться шире), а поровну делится только свободное место. Ровные
     доли порвали бы четырёхзначный номер либо раздули одноклеточную единицу на
     пол-экрана.

     Одной строкой она держится с 23.08.2026 («5867» и «След. »» уезжали вниз,
     отрываясь от номеров), и держат её по-прежнему разметка и показ: дальние
     номера и слова у стрелок снимаются, а вместо спрятанного хвоста встаёт своё
     многоточие. flex-wrap не заводится НАРОЧНО — перенос вернул бы ровно тот
     обломок второй строки, из-за которого правило и появилось; overflow-x
     остаётся страховкой на системный шрифт вдвое крупнее обычного. */
  .pages { display: flex; gap: 4px; white-space: nowrap; overflow-x: auto; }
  .pg {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 40px; padding: 0 8px; margin: 0; font-size: 15px;
  }
  /* Многоточие и погашенная стрелка — знаки, а не кнопки: нажимать в них
     некуда, и доля общей ширины, которую они бы забрали, отнялась бы у номеров,
     то есть у единственного, во что здесь целятся. */
  .pg.gap, .pg.off { flex: 0 0 auto; min-width: 0; }
  .pg.arr .wd { display: none; }
  .pg.far { display: none; }
  .pg.gap.mob { display: flex; }
}

/* Слово «Зазеркалье» уходит из шапки, знак остаётся. Порог считается по самой
   тесной шапке — странице заметки у вошедшего: название, «Лента / Справка»,
   счётчик реплик, колокольчик и меню участника. На 360 CSS-пикселях им нужно
   на полсотни больше, чем есть, и угол «про меня» уезжал второй строкой
   (жалоба владельца 23.08.2026): липкая шапка в две строки съедает пол-экрана
   треда. Выше 460px слово помещается — и остаётся: имя площадки читают, а не
   опознают по значку. */
@media (max-width: 460px) {
  .brand .bname { display: none; }
  /* Знак остаётся один, и нажимать теперь надо в него: без слова у ссылки
     осталось бы 20 пикселей на палец. Растёт при этом высота, а не ширина —
     ширина здесь и есть дефицит. */
  .brand .mark { width: 22px; height: 22px; }
  .brand { padding: 6px 2px; }
  /* Тем же заходом ужимается угол «про меня»: 12px по бокам у двух значков —
     это ещё четверть того, что дало снятое слово. */
  .bell, .acctbtn { padding-left: 9px; padding-right: 9px; }
}

/* Совсем узкий экран — не редкость: аппарат 1080px с крупным системным шрифтом
   даёт viewport 288 CSS-пикселей. Отступ ветки и аватар реплики ужимаются ещё,
   иначе от колонки текста в глубине треда остаётся полслова. */
@media (max-width: 400px) {
  :root { --step: 6px; }
  .c { gap: 10px; }
  .cava { flex-basis: 48px; }
  .cava .ava { width: 48px; height: 48px; }
  /* На 288 CSS-пикселях (аппарат с крупным системным шрифтом) колонка ужимается
     вместе со всем прочим, но правило то же: аватар равен колонке, пустых полей
     нет. Ник здесь на кегль мельче — иначе «Паноптикум» опять не помещается. */
  .note { gap: 10px; }
  .note.pinned { padding-left: 6px; }
  .author { width: 72px; flex-basis: 72px; }
  .ava { width: 72px; height: 72px; }
  .author .nick { font-size: 12px; }
  /* 288 CSS-пикселей — реальный viewport телефона с крупным системным шрифтом.
     Постраничка на нём считается по знакам: пять кнопок, из них одна с
     четырёхзначным номером. Ужимаются ширина и кегль, а ВЫСОТА не трогается:
     сорок пикселей — это палец, и на узком экране он не худеет. */
  .pg { min-width: 30px; padding: 0 6px; font-size: 14px; }
  /* Шапка на этой ширине считается по знакам так же, как постраничка: у вкладок
     снимается ещё по паре пикселей, у счётчика — кегль. Знак площадки при этом
     не трогается: он последнее, что от названия осталось. */
  .tab { padding: 5px 7px; font-size: 12px; }
  .hcount { padding: 4px 7px; }
}

@media (min-width: 900px) {
  :root { --step: 40px; }
}

/* Согласие отзывается необратимо, и кнопка обязана выглядеть иначе
   остальных: та же краска, что у «Отозвать» в списке согласий. */
.wact button.danger { border-color: var(--female); color: var(--female); }
.revlist { margin: 14px 0 0; padding-left: 20px; line-height: 1.5; }
.revlist li { margin-bottom: 8px; }

/* Картинка заметки в очереди модератора. Миниатюрой и с потолком по высоте:
   очередь обязана читаться за минуту, а не пролистываться. */
.mshot { display: block; margin: 8px 0; }
.mshot img { max-width: 100%; max-height: 200px; width: auto; height: auto; display: block; border: 1px solid var(--rule); }

/* Ссылка на смежное обсуждение — строка под заголовком треда. Значок и текст в
   одной строке, поэтому inline-flex: иконка внутри ссылки не должна съезжать
   относительно текста. Число — той же плашкой, что счётчик в шапке. */
.synth { margin: 0 0 10px; }
.synth a { display: inline-flex; align-items: center; gap: 6px; }
.synth .cnt { font-weight: 600; }