/* ============================================================
   Компоненты дизайн-системы. Эталон - карточки в claude.ai/design
   (зеркало в design-sync/previews). Цвета, шрифты, отступы, радиусы -
   только переменные из tokens.css; страницы своего CSS не имеют.
   Структурная геометрия компонентов (иконки 16/20px, высоты
   контролов, толщина линий) задаётся здесь же, как в эталоне.
   ============================================================ */

/* ---------- Иконки: Lucide, контур 2px, currentColor ---------- */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon-s { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- Каркас страницы ---------- */
.wrap {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--s4);
}
body { padding-bottom: 76px; } /* место под нижнюю навигацию */
@media (min-width: 768px) {
  body { padding-bottom: var(--s6); }
}

/* ---------- Шапка ---------- */
.site-head {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-top: var(--s3);
  padding-bottom: var(--s1);
}
.logo {
  font-family: var(--font-display);
  font-size: 22px; /* логотип - не текстовая шкала */
  font-weight: 700;
  text-decoration: none;
}
.logo em { font-style: normal; color: var(--fire); }
/* спрайт иконок: атрибут hidden на svg работает не во всех браузерах */
.iconsprite { display: none; }
.head-actions {
  position: relative; /* якорь для оверлея поиска */
  margin-left: auto;
  display: flex;
  gap: var(--s2);
  color: var(--muted);
}
.iconbtn {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill); /* иконки-кнопки круглые */
  color: var(--muted);
}
.iconbtn:hover { background: var(--accent-soft); }
/* ---------- Поиск в шапке (эталон «Шапка с поиском») ----------
   Поле - оверлей: absolute от правого края ряда, раскрывается ПОВЕРХ
   иконок; сами иконки лишь гаснут по opacity - раскладка не двигается
   ни на пиксель, display:none в анимации не участвует. */
.search { display: flex; align-items: center; }
.searchform {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none; /* свёрнут: клики проходят к иконкам под ним */
}
.site-head.searching .searchform { pointer-events: auto; }
.searchin {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 9px 16px;
  min-height: var(--tap);
  width: 0;
  opacity: 0;
  transition: width .25s ease, opacity .2s ease;
}
.searchin:focus { outline: none; border-color: var(--text); }
.site-head.searching .searchin { width: min(340px, 74vw); opacity: 1; }
.head-actions .iconbtn { transition: opacity .2s ease; }
.site-head.searching .head-actions .iconbtn {
  opacity: 0;
  pointer-events: none;
}
.searchdrop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(360px, 86vw);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  overflow: hidden;
  z-index: 50;
}
.searchdrop a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: var(--tap);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-meta);
}
.sthumb {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.searchdrop a:hover { background: var(--accent-soft); }
.searchdrop .k {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.searchdrop .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchdrop .agebadge { font-size: var(--fs-label); }
.searchdrop .sec {
  font-size: var(--fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 14px 2px;
}
.searchpage { margin-bottom: var(--s4); }

/* «Закинуть тему» в шапке - плюсик, только десктоп (на мобиле - внизу) */
.newbtn { display: none; }
@media (min-width: 768px) { .newbtn { display: inline-flex; } }
/* На телефоне поиск, колокольчик и профиль живут в нижней навигации и
   в шапке не дублируются (правило пользователя). Шапка одинаковая на
   всех страницах - переход в пост её больше не «раздувает». */
@media (max-width: 767px) {
  .dupnav { display: none; }
}

/* ---------- Нижняя навигация (мобайл) ---------- */
.bnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--s2) var(--s1) var(--s3);
}
.bnav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: var(--tap);
  color: var(--muted);
}
.bnav a.on { color: var(--text); }
.bnav .add {
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-pill);
  width: 54px;
  height: 42px;
  min-width: 0;
  min-height: 0;
}
@media (min-width: 768px) { .bnav { display: none; } }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 10px 20px;
  font-weight: 600;
  border-radius: var(--r-pill);
  text-decoration: none;
  border: 1px solid transparent; /* у всех кнопок одна геометрия */
}
.btn-primary { color: var(--bg); background: var(--text); }
.btn-ghost { color: var(--muted); border-color: var(--line); }
.btn-wide { width: 100%; font-weight: 700; }

/* Огонёк поста */
.fire {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 var(--s3);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--muted);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
/* выделение только цветом: вес шрифта не трогаем, цифра не прыгает */
.fire[data-on="1"] { color: var(--fire); border-color: var(--fire); }

/* ---------- Табы ---------- */
.tabs {
  display: flex;
  gap: 20px;
  /* Разделов в админке пять, и на 390px они в строку не помещаются.
     Перенос второй строкой честнее обрезки: до вкладки, уехавшей за
     край, иначе не добраться. row-gap: 0 - на десктопе строка одна и
     ничего не меняется. */
  flex-wrap: wrap;
  row-gap: 0;
  border-bottom: 1px solid var(--line);
}
.tab {
  font-size: var(--fs-body);
  color: var(--muted);
  padding: var(--s2) 2px 10px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  min-height: var(--tap);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* название вкладки не рвём: «Review · 12» в две строки нечитаемо */
  white-space: nowrap;
}
.tab.on, .tab[aria-current] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--text);
}

/* ---------- Чипы тегов ---------- */
.chips {
  display: flex;
  gap: var(--s2);
  padding-block: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  font-size: var(--fs-meta);
  color: var(--muted);
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  white-space: nowrap;
  text-decoration: none;
}
.chip.on, .chip[aria-current] {
  color: var(--text);
  background: var(--accent-soft);
  border-color: transparent;
  font-weight: 600;
}

/* ---------- Карточка поста ---------- */
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-block: var(--s1) var(--s4);
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--card);
}
.kicker {
  display: flex;
  /* на узком экране подпись автора уходит на вторую строку,
     а не вылезает за карточку (проверено на 320px) */
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 10px;
  font-size: var(--fs-label);
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kicker b { font-weight: 700; letter-spacing: .1em; color: var(--text); }
.kicker a { text-decoration: none; color: inherit; }

.card .thesis, .card .title { margin: 0; line-height: var(--lh-tight); }
.card .thesis {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
}
.card .title { font-size: var(--fs-title); font-weight: 650; }
.card .thesis a, .card .title a { text-decoration: none; }
.card .excerpt { margin: 0; color: var(--muted); font-size: var(--fs-body); }

/* Заглушки картинок подборки; у настоящих картинок всегда aspect-ratio */
.ths { display: flex; gap: 6px; }
.th { flex: 1; aspect-ratio: 16/10; border-radius: 7px; background: var(--accent-soft); }
.th img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }

/* страховка от «простыней», загруженных до кропа пропорций */
.postimg { max-height: 80vh; object-fit: cover; }

/* ---------- Видео: фасад в ленте, плеер на странице ---------- */
.yt {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--accent-soft);
}
.yt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ytplay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, .25);
  transition: background .15s ease;
}
.yt:hover .ytplay { background: rgba(0, 0, 0, .4); }
.ytplay .icon {
  width: 56px;
  height: 56px;
  padding: 14px 12px 14px 18px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .6);
  fill: currentColor;
}
/* Вертикальные площадки (шортсы, тикток). На странице спора кадр честный
   9:16, но с потолком по высоте: ширину считаем от экрана, чтобы ролик
   не занимал два экрана телефона. В ленте превью ещё компактнее - 4:5 и
   узкое: лента должна листаться, а не упираться в каждое видео. */
.yt.vert { aspect-ratio: 9/16; width: min(340px, 33vh); margin-inline: auto; }
.card:not(.postcard) .yt.vert { aspect-ratio: 4/5; width: 180px; }
/* фасад: пока не нажали, к площадке не уходит ни одного запроса */
.yt.facade:not(.vert) { width: 100%; }
.yt.link:not(.vert) { width: 100%; }
.yt.facade,
.yt.link,
.yt.tg:not(.playing) {
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
}
.yt.facade .ythint,
.yt.link .ythint,
.yt.tg:not(.playing) .ythint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-meta);
  color: #fff;
  background: rgba(0, 0, 0, .55);
}
.yt.playing iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- 18+: бейдж и размытие медиа ---------- */
.agebadge {
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 4px;
  padding: 0 5px;
  font-weight: 700;
}
/* блюр не выходит за границы картинки: clip-path режет ореол */
.card.nsfw .postimg,
.card.nsfw .yt img,
.card.nsfw .yt iframe,
.card.nsfw .th img,
.card.nsfw .optimg {
  filter: blur(22px);
  clip-path: inset(0 round var(--r-ctl));
}
.card.nsfw .yt { overflow: hidden; }

/* плашка «18+» на каждой замазанной картинке */
.card.nsfw a:has(> .postimg),
.card.nsfw .yt,
.card.nsfw .th {
  position: relative;
}
.card.nsfw a:has(> .postimg)::after,
.card.nsfw .yt::after,
.card.nsfw .th::after {
  content: "18+";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 700;
  pointer-events: none;
}
/* миниатюра позиции подборки: маленькая плашка поверх 72px-фото */
.card.nsfw .opt.withimg::before {
  content: "18+";
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: var(--fs-label);
  font-weight: 700;
  pointer-events: none;
}

/* ---------- Редактор аватарки: перемещение и масштаб ---------- */
.avamodal {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, .8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
}
.avapanel {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: center;
}
.avabox {
  width: 280px;
  height: 280px;
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
  background: var(--accent-soft);
  touch-action: none;
  cursor: grab;
}
.avabox img {
  position: absolute;
  left: 50%;
  top: 50%;
  /* сдвиг и масштаб кропа приходят из JS данными (--ax/--ay/--as) */
  transform: translate(calc(-50% + var(--ax, 0px)), calc(-50% + var(--ay, 0px))) scale(var(--as, 1));
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  max-width: none;
}
.avazoom { width: 280px; accent-color: var(--text); }
.avabtns { display: flex; gap: var(--s2); width: 100%; }
.nsfwpanel { max-width: 360px; text-align: center; }
.reportpanel { width: min(360px, 86vw); }
.repreason { width: 100%; min-height: 84px; resize: vertical; font-size: var(--fs-body); }
.nsfwpanel p { margin: 0; color: var(--muted); font-size: var(--fs-meta); }
/* в модалке кнопки делят узкий ряд: боковые поля поджаты, чтобы
   подпись шла в одну строку (кегль и высота тапа - как у всех) */
.avabtns .btn { flex: 1; padding-inline: var(--s3); white-space: nowrap; }

/* ---------- Лайтбокс: фото на весь экран ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: var(--s4);
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-ctl);
}
a.zoom { cursor: zoom-in; display: block; }
.optimg { cursor: zoom-in; }

/* позиция фото-подборки: миниатюра слева от названия */
.opt.withimg { min-height: 64px; }
.opt.withimg .t { padding: 6px 14px 6px 6px; gap: var(--s3); justify-content: flex-start; }
.optimg {
  width: 72px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.opt .optname { flex: 1; text-align: left; }
.opt .pct { margin-left: auto; }
.ths { text-decoration: none; }

/* ---------- Шкала раскола ---------- */
.splitbar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--disagree);
  border: 1px solid var(--text);
}
.splitbar .yes { background: var(--agree); width: var(--w, 0%); }
.splitnums {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}
.splitnums .y { color: var(--text); font-weight: 700; }

/* ---------- Голосовалка «за/против» ----------
   Граница всегда 2px: выделение меняет только цвет, толщина
   постоянная - никакого дрожания и разнобоя на ретине. */
.votepair { display: flex; gap: var(--s2); }
.votebtn {
  flex: 1;
  min-height: var(--tap);
  font-weight: 600;
  text-align: center;
  border-radius: var(--r-ctl);
  border: 2px solid var(--line);
  color: var(--muted);
}
.votebtn.yes[data-on="1"] {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
.votebtn.no[data-on="1"] {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text); /* выбор одинаков с обеих сторон (решение пользователя) */
}

/* ---------- Опрос ----------
   Как у .votebtn: граница всегда 2px, выделение - только цветом. */
.opts { display: flex; flex-direction: column; gap: var(--s2); }
.opt {
  position: relative;
  border: 2px solid var(--line);
  border-radius: var(--r-ctl);
  min-height: var(--tap);
  overflow: hidden;
  text-align: left;
}
.opt .fill { position: absolute; inset: 0; width: var(--w, 0%); background: var(--accent-soft); }
.opt .t {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-weight: 600;
}
.opt .t span { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.opt[data-on="1"] { border-color: var(--text); }
.opt[data-on="1"] .t { font-weight: 700; }
.multi { font-size: var(--fs-meta); color: var(--muted); }

/* Пустой шкалы не бывает: расклад скрыт или голосов ещё нет - шкалы нет
   вовсе (правило пользователя). Появляется вместе с первым раскладом. */
.splitwrap.nosplit { display: none; }

/* инлайн-форма ответа под комментом */
.inlinereply { margin: var(--s2) 0 var(--s2); }

/* ---------- Мета-строка карточки ---------- */
.meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.meta b { color: var(--text); font-weight: 600; }
.meta a { text-decoration: none; color: inherit; }
/* Кикер: слева тип, тег и 18+, подпись «автор · возраст» прижата к правому
   краю (решение пользователя). Одинаково в ленте и на странице спора. */
.kicker .kickerby {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}
.kicker .kickertype {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
/* ссылка автора в кикере - свой флекс: ава и ник с воздухом */
.kickerby .authlink { display: inline-flex; align-items: center; gap: 5px; }
.kickerby .cm-ava { margin-right: 0; }
.cmlink { display: inline-flex; align-items: center; gap: 4px; }
/* мой коммент в споре - «я участвую», подсветка огнём как у огонька */
.cmlink.on { color: var(--fire); font-weight: 600; }
.stat .mycmt { color: var(--fire); }

/* ---------- Страница спора ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s3) var(--s2);
  color: var(--muted);
  font-size: var(--fs-meta);
}
.topbar .share { margin-left: auto; }
.thesis-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-thesis);
  line-height: var(--lh-tight);
  font-weight: 700;
  margin: var(--s2) 0 var(--s3);
}
/* пост на своей странице - в той же карточке, что и в ленте */
.postcard { margin-top: var(--s1); }
.postcard .thesis-h1 { margin: 0; }
article > .excerpt { margin: 0 0 var(--s3); color: var(--muted); }
article > .splitwrap { margin-bottom: var(--s3); }
article > .votepair { margin-bottom: var(--s2); }
article > .opts { margin-bottom: var(--s2); }
.stat {
  font-size: var(--fs-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.stat b { color: var(--text); font-weight: 600; }
.sort {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  margin-top: var(--s4);
}
.sort a {
  font-size: var(--fs-meta);
  color: var(--muted);
  padding: 6px 2px 9px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.sort a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
/* переключатель порядка подборки: воздух до списка позиций,
   чтобы подчёркивание вкладки не сливалось с рамкой варианта */
.ordertoggle { margin-top: var(--s2); margin-bottom: var(--s4); }
.comments {
  padding-bottom: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s3);
}
/* ветка комментов - своя карточка, как у постов в ленте */
.cmcard {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  padding: var(--s1) 14px;
}
.cmcard > .cm:first-child { padding-top: var(--s2); }
.continue {
  font-size: var(--fs-meta);
  color: var(--muted);
  text-underline-offset: 3px;
  display: inline-block;
  padding: var(--s2) 0;
}
.argbar {
  display: flex;
  gap: 10px;
  margin-top: var(--s4);
}
.replychip {
  font-size: var(--fs-meta);
  color: var(--muted);
  margin: var(--s4) 0 calc(-1 * var(--s2));
}
.replychip b { color: var(--text); }
.replychip a { text-underline-offset: 3px; }
.arginput {
  flex: 1;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 11px 18px;
  min-height: var(--tap);
  width: 100%;
}
.arginput:focus { outline: none; border-color: var(--text); }
.sendbtn {
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sendbtn .icon { width: 20px; height: 20px; }

/* ---------- Комментарии ----------
   Коммент - две колонки: аватарка с линией и всё остальное. Вложенность
   показывает линия от аватарки, а не отступ вправо (эталон «Комменты:
   ветка на линии»): на четвёртом уровне текст сохраняет ширину. */
.cm { position: relative; display: flex; gap: var(--s3); padding: var(--s2) 0 2px; }
/* Линия родителя тянется на всю высоту ветки, поэтому её хвост гасит
   последний элемент ветки - каким бы он ни был. У коммента гасим строго
   ниже аватарки (сама аватарка на линии и должна стоять), у свёрнутой
   плашки - от её верха: аватарки у неё нет. */
.cm-kids > :last-child::after {
  content: "";
  position: absolute;
  left: calc(var(--ava-cm) / 2 - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--card);
}
.cm-kids > .cm:last-child::after { top: calc(var(--s2) + var(--ava-cm)); }
.cm-gut { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: var(--ava-cm); }
.cm-main { flex: 1; min-width: 0; }
/* имя cm-ava занято мелким кружком рядом с ником - у аватарки ветки своё */
.cm-face {
  width: var(--ava-cm);
  height: var(--ava-cm);
  border-radius: var(--r-pill);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  /* кольцо цветом карточки: линия обрывается перед аватаркой и
     продолжается после неё - получается зазор, а не наезд */
  box-shadow: 0 0 0 var(--s2) var(--card);
}
.cm-face.letter {
  background: var(--accent-soft);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* линия идёт от аватарки вниз и держит всю ветку; волосяная, как все
   разделители системы - она подсказка, а не элемент интерфейса */
.cm-line {
  flex: 1;
  width: 1px;
  min-height: 12px;
  margin-top: var(--s2);
  background: var(--line);
}
.cm-head { font-size: var(--fs-meta); color: var(--muted); }
.cm-head b { color: var(--text); font-weight: 600; }
.cm-author { text-decoration: none; }
.cm-author:hover b { text-decoration: underline; text-underline-offset: 3px; }
.authlink { color: inherit; text-decoration: none; }
.authlink:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Цитата оригинала над ответом (эталон «Ответ с цитатой»): автор и первая
   строка. Полоска волосяная, как все вертикальные линии системы. */
.cm-quote {
  display: block;
  margin-top: var(--s1);
  padding-left: var(--s2);
  border-left: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.cm-quote .qwho {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text);
}
.cm-quote .qtxt {
  font-size: var(--fs-meta);
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cm-quote.dead .qtxt { font-style: italic; }
.cm-quote:hover { border-left-color: var(--text); }
.cm-body { margin: var(--s1) 0; }
.cm-body.deadbody { color: var(--muted); font-style: italic; }
.cm-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-meta);
  color: var(--muted);
  /* иконка стрелки выравнивается с текстом коммента, а подсветка
     нажатия не утыкается в линию ветки/границу карточки */
  margin-left: -8px;
}
/* Капсула оценки (эталон «Оценки коммента» в claude.ai/design):
   стрелка, счёт, стрелка - без разделителя между ними. Мой голос
   показывает сама стрелка: заливается и красит счёт. */
.votegroup {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 1px var(--s2);
  gap: var(--s1);
}
.cm-actions .arr {
  position: relative;
  min-width: 26px;
  min-height: 26px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* компактный вид, честная тап-зона: невидимое поле до ~44px */
.cm-actions .arr::after { content: ""; position: absolute; inset: -9px; }
/* стрелки оценки без подложки вовсе: ни на наведении, ни нажатыми -
   голос показывает заливка самой стрелки. Кружок остаётся только у
   иконок-действий (удалить, пожаловаться). */
.cm-actions .arr[data-v]:hover { color: var(--text); }
.cm-actions .arr.rep:hover { background: var(--accent-soft); }
/* мой голос - залитая стрелка: плюс жаром, минус чернилами. Второй цвет
   интерфейсу не заводим, различие держат цвет и контраст. */
.cm-actions .arr[aria-pressed="true"] .icon { fill: currentColor; }
.cm-actions .arr[data-v="1"][aria-pressed="true"],
.cm-actions[data-my="1"] .score { color: var(--fire); }
.cm-actions .arr[data-v="-1"][aria-pressed="true"],
.cm-actions[data-my="-1"] .score { color: var(--text); }
.cm-actions .score {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 22px;
  text-align: center;
  padding: 0 2px;
}
.cm-actions .reply {
  margin-left: var(--s2);
  min-height: 40px;
  padding: 0 var(--s2);
  display: inline-flex;      /* ссылка, а не кнопка: без флекса висела выше ряда */
  align-items: center;
  text-decoration: none;
}
/* Ответы встают в ту же колонку, что и линия родителя: аватарка ответа
   оказывается прямо на линии. Отрицательный отступ ровно вычитает
   колонку родителя, поэтому текст ответов не съезжает вправо. */
.cm-kids {
  margin-top: var(--s2);
  margin-left: calc(-1 * (var(--ava-cm) + var(--s3)));
}
.cm-kids > .cm:first-child { padding-top: var(--s1); }
.cm-kids > .cm:last-child { padding-bottom: 0; }
.cm-hidden { position: relative; padding: 2px 0; }
/* мелкий серый - только у плашки «комментарий скрыт»,
   раскрытый текст и ответы под ним - обычные */
.cm-hidden > summary {
  font-size: var(--fs-meta);
  color: var(--muted);
}
.cm-hidden .n { color: var(--danger); }
.cm-hidden summary {
  cursor: pointer;
  list-style: none;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.cm-hidden summary::-webkit-details-marker { display: none; }
/* Плашка «комментарий скрыт» - не полноценный коммент, колонки аватарки
   у неё нет. Сдвигаем её на ширину этой колонки, иначе текст начинается
   левее ветки и лезет на линию. */
/* плашка «комментарий скрыт» - без колонки аватарки, сдвигаем её на
   ширину этой колонки, чтобы текст встал по тексту ответов */
.cm-kids > .cm-hidden > summary { padding-left: calc(var(--ava-cm) + var(--s3)); }
.cm-hidden .show { text-decoration: underline; text-underline-offset: 3px; }
/* у раскрытого свёрнутого коммента подпись меняется на «свернуть»:
   иначе закрыть его обратно нечем */
.cm-hidden .hide { display: none; text-decoration: underline; text-underline-offset: 3px; }
.cm-hidden[open] .show { display: none; }
.cm-hidden[open] .hide { display: inline; }


/* ---------- Тост ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 8px);
  background: var(--text);
  color: var(--bg);
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  max-width: calc(100vw - var(--s6));
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Плашка про куки ---------- */
/* Сообщает, а не спрашивает: сайт работает и с открытой плашкой. На
   телефоне стоит над нижней навигацией, на компьютере у нижнего края. */
.cookienote {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: calc(var(--tap) + var(--s5) + var(--s2));
  z-index: 50;
  max-width: 648px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.cookienote p { margin: 0; flex: 1; font-size: var(--fs-meta); color: var(--muted); line-height: var(--lh-tight); }
.cookienote a { color: var(--text); }
.cookienote .btn { flex: none; }
@media (min-width: 768px) { .cookienote { bottom: var(--s4); } }

/* ---------- Профиль ---------- */
.prow { display: flex; align-items: center; gap: 14px; }
.ava {
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; /* буква-аватар, не текстовая шкала */
  font-weight: 700;
  position: relative;
  flex-shrink: 0;
}
.ava i {
  position: absolute;
  right: 1px; bottom: 1px;
  width: 13px; height: 13px;
  border-radius: var(--r-pill);
  background: var(--fire);
  border: 2px solid var(--bg);
}
.ava img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-pill); }
/* аватарка-кнопка: клик = загрузка, при наведении - камера */
.avaedit { cursor: pointer; }
.avaedit .avafile { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avacam {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: var(--bg);
}
.avaedit:hover img { opacity: .55; }
.avaedit:hover .avacam { display: block; }
.bioform { margin-top: var(--s3); }
.biofield { min-height: 64px; resize: vertical; font-size: var(--fs-body); }
.biorow { display: flex; justify-content: flex-end; margin-top: var(--s2); }
.bio { margin: var(--s1) 0 0; font-size: var(--fs-meta); color: var(--muted); max-width: 48ch; }
.avadel { margin-top: var(--s2); color: var(--muted); }
/* Действия аккаунта отделены от формы «о себе»: сохранение - основное
   действие (залито), выход - редкое и тихое, за разделительной линией.
   Раньше обе кнопки были призрачными и стояли вплотную - сливались. */
/* своя почта в профиле: тихая строка, чужим её не отдаём вовсе */
.myemail { margin: var(--s4) 0 0; font-size: var(--fs-meta); color: var(--muted); overflow-wrap: anywhere; }
.myemail b { color: var(--text); font-weight: 600; }
.acctbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s4);
  row-gap: var(--s2);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.acctbox .avadel { margin-top: 0; }
.acctbox .logoutform { margin-left: auto; }
.cm-ava { width: 18px; height: 18px; border-radius: var(--r-pill); object-fit: cover; vertical-align: -4px; margin-right: 4px; }
.pinfo .nick { font-size: var(--fs-title); font-weight: 700; }
.pinfo .since { font-size: var(--fs-meta); color: var(--muted); }
.stats { display: flex; gap: var(--s5); margin: var(--s4) 0; font-variant-numeric: tabular-nums; }
.st b { display: block; font-size: var(--fs-title); }
.st span { font-size: var(--fs-label); color: var(--muted); }
.ptabs { margin-top: var(--s5); }

/* ---------- Закинуть тему ---------- */
.pagetitle { font-size: var(--fs-title); font-weight: 650; margin: 0; }
.topbar .pagetitle { color: var(--text); }
.flabel { font-size: var(--fs-meta); font-weight: 600; margin: var(--s4) 0 var(--s2); }
.types { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tp {
  font-size: var(--fs-meta);
  color: var(--muted);
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  min-height: 40px;
}
.tp.on {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
  font-weight: 600;
}
.compose {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 14px;
  min-height: 120px;
  resize: none;
}
.compose::placeholder { color: var(--muted); font-weight: 400; }
.compose:focus { outline: none; border-color: var(--text); }
.cnt {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.go { margin-top: var(--s5); }

/* ---------- Вход / 404 ---------- */
.auth { max-width: 420px; margin-inline: auto; padding-block: var(--s6); }
.biglogo {
  font-family: var(--font-display);
  font-size: 30px; /* крупный логотип, не текстовая шкала */
  font-weight: 700;
  text-align: center;
}
.biglogo em { font-style: normal; color: var(--fire); }
.authtitle { font-size: var(--fs-title); font-weight: 650; text-align: center; margin: var(--s5) 0 var(--s1); }
/* верхний отступ заголовка отталкивал его от крупного логотипа; там, где
   логотипа нет (вход и регистрация - он уже в шапке), отступ лишний */
.auth .authtitle:first-child { margin-top: 0; }
.authsub { font-size: var(--fs-meta); color: var(--muted); text-align: center; margin: 0 0 var(--s5); }
.auth .btn { margin-top: var(--s2); }
.center { text-align: center; }
.guest { margin-top: var(--s5); line-height: 1.6; }

/* ---------- Статические страницы ---------- */
.prose { max-width: 62ch; padding-bottom: var(--s6); }
.prose h1 { font-size: var(--fs-thesis); font-family: var(--font-display); margin: var(--s2) 0 var(--s4); }
.prose p { margin: 0 0 var(--s4); }

/* ---------- Формы ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.field label { font-size: var(--fs-meta); font-weight: 600; }
.input {
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  padding: 12px 14px;
  min-height: var(--tap);
  width: 100%;
}
.input:focus { outline: none; border-color: var(--text); }
.hint { font-size: var(--fs-meta); color: var(--muted); }
.field.error .input { border-color: var(--danger); }
.field.error .hint { color: var(--danger); }
.formerr { color: var(--danger); }

/* ---------- Тело поста с разметкой ----------
   Набор тегов ровно тот, что умеет internal/markup. Заголовков внутри
   поста нет: h1 у страницы один и это тезис. */
.ptext { margin: 0 0 var(--s3); color: var(--muted); }
.ptext p { margin: 0 0 var(--s3); }
.ptext p:last-child { margin-bottom: 0; }
.ptext blockquote {
  margin: var(--s3) 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--line);
}
.ptext ul { margin: var(--s3) 0; padding-left: 20px; }
.ptext a { color: var(--text); }
/* спойлер: плашка до нажатия, размер тот же - строка не прыгает */
.spoiler {
  background: var(--accent-soft);
  color: transparent;
  border-radius: 4px;
  cursor: pointer;
}
.spoiler.on { color: inherit; background: none; cursor: auto; }

/* загруженные фото под редактором: номер = токен в тексте */
.staged { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.stagedimg { margin: 0; width: 64px; font-size: var(--fs-label); color: var(--muted); text-align: center; }
.stagedimg img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-ctl); display: block; }
.stagedimg figcaption { margin-top: 4px; font-variant-numeric: tabular-nums; }
/* поле выбора файла прячем от глаз, но не от программ чтения с экрана */
.offscreen {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Редактор текста: панель разметки над полем ----------
   Рамку держит обёртка, поле и панель внутри без своих границ - панель
   и текст читаются как один элемент. Без JS остаётся голая textarea. */
.editor {
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--card);
}
.editor:focus-within { border-color: var(--text); }
.etools {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1);
  border-bottom: 1px solid var(--line);
  /* девять кнопок по 44px в 390px не влезают: одна строка со сдвигом
     пальцем честнее, чем перенос «семь и одна» */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.etools::-webkit-scrollbar { display: none; }
.etool {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  border-radius: var(--r-ctl);
  cursor: pointer;
}
.etool:hover { color: var(--text); background: var(--accent-soft); }
.etool:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.etool[aria-pressed="true"] { color: var(--text); background: var(--accent-soft); }
.esep {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  align-self: center;
  margin: 0 var(--s1);
  background: var(--line);
}
.editor .compose,
.editor .input {
  border: none;
  border-radius: 0 0 var(--r-ctl) var(--r-ctl);
  background: transparent;
}
.editor .compose:focus,
.editor .input:focus { outline: none; border: none; }

/* чипы-радио в формах */
.chip input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.chip { position: relative; cursor: pointer; display: inline-flex; align-items: center; }
.chip:has(input:checked) {
  color: var(--text);
  background: var(--accent-soft);
  border-color: transparent;
  font-weight: 600;
}
/* Сам радио-переключатель спрятан, поэтому рамку фокуса рисует чип:
   без неё человек с клавиатуры не видит, где он находится. */
.chip:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.optlines { min-height: 120px; resize: vertical; font-family: var(--font-ui); font-weight: 400; }
.maxch { max-width: 260px; margin-top: var(--s3); }
.del { margin-top: var(--s3); color: var(--danger); border-color: var(--danger); }
.focusnote a { text-underline-offset: 3px; }
.authcall { text-align: center; text-decoration: none; color: var(--muted); display: flex; align-items: center; justify-content: center; }
/* honeypot: людям не видно, боты заполняют */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.guesthint { padding-bottom: var(--s2); }
.guesthint a { text-underline-offset: 3px; }
.argerr { padding-bottom: var(--s2); }
/* живой хинт ника и генератор пароля */
[data-nickhint][data-state="free"] { color: var(--text); font-weight: 600; }
[data-nickhint][data-state="taken"],
[data-nickhint][data-state="bad"] { color: var(--danger); }
.passrow { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.linklike {
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 24px;
}

/* админка: форма модераторов и строки очереди посева */
.modsform { display: flex; gap: var(--s2); max-width: 480px; }
.modsform .btn { flex-shrink: 0; }
.staffrow { flex-direction: row; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.staffrow form { margin-left: auto; }
.staffrow a { text-decoration: none; }

.ruleschk { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s2) 0; cursor: pointer; }
.ruleschk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--text); }
.ruleschk a { text-underline-offset: 3px; }
/* пояснение под подписью: что именно включает эта галочка. Отдельной
   строкой, иначе длинное объяснение читается как часть подписи */
.ruleschk .hint { display: block; margin-top: var(--s1); }
.adminacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s1);
}
.adminacts .btn {
  min-height: 40px;
  margin: 0;
  padding: 6px 16px;
  font-size: var(--fs-meta);
}
.adminacts .danger { color: var(--danger); border-color: var(--danger); }
.cm-actions .rep { color: var(--muted); opacity: .6; }
.cm-actions .rep:hover { opacity: 1; }

/* ---------- Картинка поста ---------- */
.postimg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
  background: var(--accent-soft);
}
.imgreplace {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s3);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.imgreplace .btn { min-height: 40px; padding: 6px 14px; font-size: var(--fs-meta); }
.filein { padding: 10px; }

/* ---------- Таблица просмотров (админ) ---------- */
.statstable { border-collapse: collapse; width: 100%; max-width: 420px; font-variant-numeric: tabular-nums; }
.statstable td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.statstable td:last-child { text-align: right; font-weight: 600; }
.statstable td:first-child { color: var(--muted); font-size: var(--fs-meta); }

/* ---------- Бейдж уведомлений ---------- */
.iconbtn, .bnav a { position: relative; }
.badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--fire);
  color: var(--bg);
  font-size: var(--fs-label);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- Уведомления ---------- */
.notifs { display: flex; flex-direction: column; }
.notif {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  min-height: var(--tap);
}
.notif .ntext { font-size: var(--fs-meta); color: var(--muted); }
.notif.unread .ntext { color: var(--text); font-weight: 600; }
.notif .ntitle { font-weight: 600; }
.notif .nage { font-size: var(--fs-label); color: var(--muted); }

/* ---------- вставка поста телеграма ----------
   Карточка сама сообщает высоту, но вертикальный ролик просит столько,
   что съедает экран. Потолок ставим здесь, прокрутка внутри рамки нам
   не нужна: телеграм сам покажет обрезанное по клику у себя. */
.yt.tg { display: block; width: 100%; }
.yt.tg.playing {
  padding: 0;
  background: none;
  aspect-ratio: auto;
  border-radius: var(--r-card);
  overflow: hidden;
}
.yt.tg.playing iframe {
  display: block;
  width: 100%;
  height: 420px; /* до первого сообщения о размере; дальше высоту ставит js */
  border: 0;
  background: var(--paper-2, transparent);
}

/* ---------- готовые картинки в форме посева (после предпросмотра) ---------- */
.readyshelf { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.readypic { position: relative; display: block; cursor: pointer; }
.readypic img {
  display: block;
  width: 104px;
  height: 78px;
  object-fit: cover;
  border-radius: var(--r-ctl);
  border: 1px solid var(--line);
}
/* снятая галочка = картинку не берём, и это видно без чтения подписи */
.readypic input[type="checkbox"] { position: absolute; top: var(--s1); left: var(--s1); margin: 0; }
.readypic:has(input[type="checkbox"]:not(:checked)) img { opacity: .35; }

/* ---------- предпросмотр заготовки в посеве ---------- */
.previewbox {
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  padding: var(--s3);
  margin-bottom: var(--s3);
}
/* карточка внутри просмотра не кликается: смотреть - не значит уйти */
.previewbox a { pointer-events: none; }
.seedgo { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.seedgo .go { flex: 1; }

/* ---------- проверка заготовок: карточка и решение под ней ---------- */
.reviewitem { margin-bottom: var(--s6); }
.reviewitem .seedgo { margin-top: 0; }
.reviewitem .seedgo form { display: flex; margin: 0; }
.reviewitem .seedgo .btn { margin: 0; }