/* ==========================================================================
   Экран «Обсуждения»: строка темы (Flarum DiscussionListItem), страница
   раздела (TagHero + sideNav + IndexPage-toolbar + DiscussionList),
   «Что нового», новая тема (DiscussionComposer как страница).
   Разметка и размеры перенесены из Flarum 2 (MIT, Stichting Flarum / Toby Zerner):
   DiscussionListItem.less, DiscussionList.less, IndexPage.less, TagLabel.less,
   Composer.less, TextEditor.less.
   ========================================================================== */

/* -------------------- 1. Строка темы (DiscussionListItem) ----------------- */
/* Строка сама — контейнер: в узкой колонке (главная, профиль) она
   перестраивается по своей ширине, а не по ширине окна */
.thr {
  container-type: inline-size;
  border-radius: var(--border-radius);
  color: var(--muted-color);
  transition: background-color var(--transition);
}
.thr:hover { background: var(--discussion-list-item-bg-hover); }
.thr a { text-decoration: none; }
.thr__in {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  grid-template-areas: "author main tags stats";
  align-items: start;
  column-gap: 16px;
  padding: 12px 15px;
  border-radius: inherit;
}

/* Автор: аватар 36px и маленькие круглые значки у его правого края */
.thr__author { grid-area: author; position: relative; }
.thr__av { position: relative; z-index: 1; display: block; width: 36px; height: 36px; border-radius: 50%; }
.thr__av .av { display: block; }
.thr__av.tip[data-tip]::after { max-width: 260px; }
/* Flarum DiscussionListItem-badges вынесены из-под аватара: значки 16px
   столбиком у правого края, заходят на аватар не больше чем на 7px —
   лицо остаётся видно даже с двумя-тремя значками */
.thr__badges {
  position: absolute;
  top: -3px;
  right: -9px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.thr__badges > li { display: block; }
.thr__badges .ibadge {
  --size: 16px;
  position: relative;
  pointer-events: auto;
  box-shadow: 0 0 0 2px var(--body-bg);
  transition: box-shadow var(--transition);
}
.thr__badges .ibadge .ic { width: 10px; height: 10px; }
.thr:hover .thr__badges .ibadge { box-shadow: 0 0 0 2px var(--discussion-list-item-bg-hover); }

/* Заголовок и строка «↩ Ник ответил(а) …» */
.thr__main { grid-area: main; min-width: 0; }
.thr__title {
  margin: 0 0 3px;
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.3;
  color: var(--heading-color);
  overflow-wrap: anywhere;
}
.thr__title a { color: inherit; }
/* Вся строка кликабельна, как во Flarum: ссылка заголовка растянута на строку */
.thr__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.thr__title a:focus-visible { outline: none; }
.thr__title a:focus-visible::after { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.thr--read .thr__title { color: var(--discussion-title-color); }
.thr--unread .thr__title { font-weight: 600; }

.thr__info {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--muted-more-color);
}
.thr__info .ic { width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; }
.thr__user { font-weight: 700; color: inherit; }
.thr__sep { margin: 0 4px; }
.thr__when { color: inherit; }
a.thr__user:hover, a.thr__when:hover { color: var(--text-color); text-decoration: underline; }

/* Статус обращения — тихий текст в строке меты (цвет только у 12px иконки) */
.thr__status { white-space: nowrap; }
.thr__info .thr__status .ic { color: var(--st-c, currentColor); }
/* Если статус переносится на вторую строку, его «·» не должна начинать строку:
   мета сдвинута влево на ширину разделителя, первая строка — обратно отступом,
   а всё левее колонки срезано */
.thr__info:has(.thr__status) {
  max-width: calc(100% + 14px);
  margin-left: -14px;
  text-indent: 14px;
  clip-path: inset(-4px -4px -4px 14px);
}
.thr__status .thr__sep { display: inline-block; width: 14px; margin: 0; text-align: center; text-indent: 0; }

/* Ярлыки: префикс и раздел — одна склеенная группа Flarum TagsLabel.
   Оба нейтральные и одного веса: цвет префикса — квадратик перед текстом,
   цвет раздела — только у иконки */
.thr__tags {
  grid-area: tags;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 5px;
  max-width: 300px;
  padding-top: 1px;
}
.thr__labels { display: inline-flex; gap: 1px; min-width: 0; max-width: 100%; }
.thr__label.badge { border-radius: 0; font-size: var(--font-size-sm); }
.thr__label.badge:first-child { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
.thr__label.badge:last-child { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
.thr__label.badge { --tag-bg: var(--control-bg); font-weight: 500; }
.thr__prefix.badge { flex-shrink: 0; --tag-color: var(--text-color); }
.thr__prefix.badge .badge__dot { --dot-color: var(--prefix-c, currentColor); }
.thr__forum.badge { position: relative; --tag-color: var(--muted-color); min-width: 0; }
.thr__forum.badge:hover { --tag-bg: var(--control-bg-light); color: var(--text-color); }
.thr__forum.badge .ic { color: var(--forum-c, currentColor); }
.thr__forum.badge .badge__dot { --dot-color: var(--forum-c, currentColor); }

/* Счётчики справа (Flarum DiscussionListItem-stats) */
.thr__stats { grid-area: stats; display: flex; align-items: center; gap: 14px; padding-top: 1px; }
.thr__stat {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 50px;
  font-size: var(--font-size);
  line-height: 20px;
  color: var(--muted-color);
  font-variant-numeric: tabular-nums;
}
.thr__stat .ic { width: 16px; height: 16px; flex-shrink: 0; }
.thr__views { color: var(--muted-more-color); }
a.thr__count:hover { color: var(--link-color); }
.thr--unread .thr__count { color: var(--heading-color); font-weight: 700; }
.thr--unread .thr__count .ic { color: var(--primary-color); }

/* Список тем (DiscussionList): строки выходят за край колонки на 15px,
   чтобы аватары стояли на одной линии с панелью над списком */
.dlist { margin: 0 -15px; padding: 0; list-style: none; }

body.compact .thr__in { padding-top: 7px; padding-bottom: 7px; }
body.no-avatars .thr__in { grid-template-columns: auto minmax(0, 1fr) auto auto; }
body.no-avatars .thr__av { display: none; }
body.no-avatars .thr__badges { position: static; flex-direction: row; padding-top: 1px; }
body.no-avatars .thr__author:not(:has(.thr__badges)) { display: none; }

/* Средняя ширина (колонка главной ~700px): просмотры прячем, ярлыки остаются
   справа в строке заголовка, длинное имя раздела обрезается */
@container (max-width: 780px) {
  .thr__views { display: none; }
  .thr__stat { min-width: 0; }
  .thr__tags { max-width: 230px; }
  .thr__forum.badge { flex-shrink: 1; }
}
/* Узкая строка (карточки, телефон): ярлыки — под мету */
@container (max-width: 560px) {
  .thr__in { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "author main stats" "author tags tags"; }
  body.no-avatars .thr__in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .thr__tags { justify-content: flex-start; max-width: none; margin-top: 5px; padding-top: 0; }
}

/* Совсем узко — как Flarum @phone: аватар 32; счётчик — та же иконка с числом, что на широком экране */
@container (max-width: 520px) {
  .thr__in { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; }
  .thr__av, .thr__av .av { width: 32px; height: 32px; }
  .thr__badges { right: -6px; }
  .thr__title { font-size: var(--font-size); }
  .thr__info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Строка со статусом переносится по группам, чтобы статус не съедался многоточием */
  .thr__info:has(.thr__status) { white-space: normal; }
  .thr__info:has(.thr__status) .thr__user,
  .thr__info:has(.thr__status) .thr__when { white-space: nowrap; }
  .thr__count { gap: 5px; font-size: var(--font-size-sm); }
  .thr__count .ic { width: 14px; height: 14px; }
}
@media (max-width: 767.98px) {
  .thr { border-radius: 0; }
  .thr:hover { background: none; }
  .thr:active { background: var(--control-bg); }
  .thr:hover .thr__badges .ibadge { box-shadow: 0 0 0 2px var(--body-bg); }
  .thr__av.tip[data-tip]::after,
  .thr__av.tip[data-tip]::before { display: none; }
}
/* Большие цели на сенсорных экранах: зона нажатия шире видимой плашки */
@media (pointer: coarse) {
  .thr__count::before,
  .thr__forum::before { content: ""; position: absolute; inset: -13px -4px; }
}

/* ------------------------ 2. Раздел (TagHero) ----------------------------- */
.tag-hero .hero__title { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tag-hero__ic { display: inline-flex; flex-shrink: 0; color: var(--muted-color); }
.tag-hero__ic .ic { width: 22px; height: 22px; }
.tag-hero__meta { color: var(--muted-color); }
.tag-hero__meta > span + span::before { content: "·"; margin-right: 6px; margin-left: -9px; color: var(--muted-more-color); }

@media (max-width: 767.98px) {
  .tag-hero__meta > span:nth-child(3) { flex-basis: 100%; }
  .tag-hero__meta > span:nth-child(3)::before { content: none; }
}

/* Разделов в категории больше, чем помещается в окно: список не липнет и не обрезается */
@media (min-width: 992px) {
  .page__nav > .sidenav.sidenav--long { position: static; max-height: none; overflow: visible; }
}
/* Разделитель перед «Все разделы» */
@media (min-width: 992px) {
  .forum-page .sidenav__sep { margin: 10px 0; background: var(--control-bg); }
}

/* Кнопка «Только чтение» без действия */
.sidenav__primary.btn[aria-disabled="true"] { cursor: default; }

/* «Поиск по разделу» в sideNav — только в телефонном меню: на широком экране есть поле в панели */
@media (min-width: 768px) {
  .sidenav .sidenav__list > li.forum-nav__search { display: none; }
}
/* Телефон: одна строка — выпадающий список разделов + квадратная «Начать тему» */
@media (max-width: 767.98px) {
  .forum-page .sidenav__primary.btn { width: 36px; padding-inline: 0; justify-content: center; }
  .forum-page .sidenav__primary .btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 767.98px) and (pointer: coarse) {
  .forum-page .sidenav__primary.btn { width: 44px; }
}

.forum-note { margin-bottom: 20px; }
.forum-note__link { display: inline-block; margin-left: 4px; }

/* --------------------- 3. Панель над списком (IndexPage-toolbar) ---------- */
.dl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 15px; }
.dl-toolbar__view { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.dl-toolbar__action { display: flex; align-items: center; gap: 5px; margin: 0 0 0 auto; }
.dl-toolbar__title { margin: 0; font-size: var(--font-size-md); font-weight: 700; color: var(--heading-color); }
.dl-toolbar__count { margin: 0; font-size: var(--font-size-sm); color: var(--muted-color); }
.wn-page .dl-toolbar { min-height: 36px; }
.dl-toolbar__reset.btn { --button-color: var(--muted-color); }

/* Dropdown--select: активный пункт отмечен галочкой слева */
.dl-select { position: relative; }
.dl-select > .btn .btn__label { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-select--on.btn { color: var(--text-color); }
.dl-select__menu.drop { min-width: 210px; }
.dl-select__menu.drop a:not(.btn) { position: relative; padding-left: 40px; }
.dl-select__menu.drop a:not(.btn) > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-color); }
.dl-select__menu.drop a.active { font-weight: 700; color: var(--text-color); }
.dl-select__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--dot-color, currentColor);
}

.dl-search .inp-icon { width: 200px; }
.dl-search .inp { width: 100%; }

@media (max-width: 767.98px) {
  /* Поиск есть в шапке и в меню раздела — отдельное поле в панели не занимает строку */
  .dl-search { display: none; }
  .dl-select { min-width: 0; }
  .dl-select > .btn { max-width: 100%; }
  .dl-select > .btn .btn__label { max-width: 150px; }
  .wn-page .dl-toolbar { min-height: 0; }
}

/* ---------------------------- 4. Что нового ------------------------------- */
.wn-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "media main side";
  align-items: start;
  column-gap: 16px;
  padding: 12px 15px;
  border-radius: var(--border-radius);
  color: var(--muted-color);
  transition: background-color var(--transition);
}
.wn-row:hover { background: var(--discussion-list-item-bg-hover); }
.wn-row a { text-decoration: none; }
.wn-row__media { grid-area: media; display: block; width: 36px; height: 36px; border-radius: 50%; }
.wn-row__media .av { display: block; }
.wn-row__media .medal { --ms: 36px; }
.wn-row__main { grid-area: main; min-width: 0; }
.wn-row__title {
  margin: 0 0 3px;
  font-size: var(--font-size-md);
  font-weight: 400;
  line-height: 1.3;
  color: var(--heading-color);
  overflow-wrap: anywhere;
}
.wn-row__title a { color: inherit; }
.wn-row__title a:hover { text-decoration: underline; }
.wn-row__verb { color: var(--muted-color); }
.wn-row__user { font-weight: 700; color: inherit; }
.wn-row__user--lg { font-size: var(--font-size-md); }
.wn-row__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--muted-more-color);
}
.wn-row__info .ic { width: 12px; height: 12px; flex-shrink: 0; margin-right: 1px; }
a.wn-row__user:hover { text-decoration: underline; }
/* Flarum DiscussionListItem-info .item-excerpt */
.wn-row__excerpt {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--muted-more-color);
  overflow-wrap: anywhere;
}
.wn-row__side { grid-area: side; display: flex; align-items: center; gap: 14px; padding-top: 1px; }
.wn-row__time { font-size: var(--font-size-sm); color: var(--muted-more-color); white-space: nowrap; }
body.compact .wn-row { padding-top: 7px; padding-bottom: 7px; }

@media (max-width: 767.98px) {
  .wn-row {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: "media main" "media side";
    column-gap: 12px;
    border-radius: 0;
  }
  .wn-row:hover { background: none; }
  .wn-row__media, .wn-row__media .av { width: 32px; height: 32px; }
  .wn-row__media .medal { --ms: 32px; }
  .wn-row__title { font-size: var(--font-size); }
  .wn-row__side { margin-top: 5px; padding-top: 0; flex-wrap: wrap; gap: 5px 12px; }
}

/* ------------------- 5. Новая тема (DiscussionComposer) ------------------- */
.composer-crumbs { margin-bottom: 20px; }
.composer { position: relative; }
.composer__av { float: left; }
.composer__body { margin-left: 85px; }
.composer__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 24px;
  margin: 0 0 12px;
}
.composer__heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.5;
  color: var(--control-color);
}
.composer__heading .ic { width: 14px; height: 14px; }
.composer__in { color: var(--muted-color); }
.composer__forum.badge { font-size: var(--font-size-sm); }
.composer__cancel.btn { margin-left: auto; --button-color: var(--muted-color); }

.composer__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin-bottom: 10px; }
.composer__fields--prefix { grid-template-columns: 170px minmax(0, 1fr); }
.composer__fields .field { margin: 0; }
.composer__title .inp { height: 44px; font-size: 18px; color: var(--heading-color); }
.composer__title .inp::placeholder { color: var(--muted-color); }
.composer__prefix .sel { height: 44px; }

.composer__editor { margin-top: 10px; }
.composer__poll { margin-bottom: 0; }
.composer__options { margin: 0 0 18px; padding: 0; border: 0; }
.composer__options .inp { margin-bottom: 5px; }
.composer__poll-opts { align-items: end; }

.composer-aside__block + .composer-aside__block { margin-top: 30px; }
.composer-aside__list { margin: 0 0 8px; padding-left: 18px; color: var(--muted-color); }
.composer-aside__list li + li { margin-top: 6px; }
.composer-aside__list code { font-size: var(--font-size-sm); white-space: nowrap; }
.composer-aside__text { margin: 0 0 8px; color: var(--muted-color); }
.composer-aside__link.btn { padding-inline: 0; --button-color: var(--link-color); }
.composer-aside__link.btn:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .composer__av { display: none; }
  .composer__body { margin-left: 0; }
  .composer__fields--prefix { grid-template-columns: minmax(0, 1fr); }
  .composer__title .inp { font-size: 16px; }
}