/* stepforge_site/assets/css/forum.css
 *
 * Форум + тир-виджеты + кастомизация страницы приложения (Phase 6 пивота,
 * design/FORUM_SPEC.md §6). Вынесено из marketplace.css отдельным файлом
 * из-за объёма новых классов — подключать ПОСЛЕ marketplace.css (см.
 * _chrome.php). Использует только существующие --sf-* токены из
 * sf-tokens.css плюс новые СКОУПНЫЕ (не глобальные) кастомные свойства
 * --mk-app-accent / --mk-app-accent-text, проставляемые инлайново на
 * конкретной странице приложения (design/FORUM_SPEC.md §2.5) — ничего сюда
 * не добавлено в :root sf-tokens.css.
 */

/* ── Утилита: визуально скрыто, доступно для скринридеров ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Хлебные крошки (§2.1-2.4, §3.1-3.3) ──────────────────────────────────
   Дефолт: --sf-ink-soft для ссылок, --sf-ink для текущей страницы. Внутри
   темизированной страницы приложения (--mk-app-accent задан инлайново)
   эмфазис текущей страницы окрашивается акцентом — единственное место, где
   тема "просачивается" в саму крошку, остальные ссылки остаются нейтральными. */
.mk-breadcrumb {
  margin-bottom: var(--sf-space-4);
  font-size: 14px;
}
.mk-breadcrumb a {
  color: var(--sf-ink-soft);
  text-decoration: none;
}
.mk-breadcrumb a:hover { color: var(--sf-ink); }
.mk-breadcrumb__sep { color: var(--sf-ink-soft); opacity: .6; }
.mk-breadcrumb__current {
  color: var(--mk-app-accent, var(--sf-ink));
  font-weight: 700;
}

/* ── Кнопки, окрашенные акцентом приложения (§2.5: "Новая тема"/"Ответить") ──
   Намеренно узкий список мест применения — НЕ блочное правило на все
   .sf-btn внутри .mk-forum, чтобы кнопка "Войти" в .mk-login-gate и прочие
   нейтральные действия не перекрашивались акцентом чужого приложения. */
.mk-btn-accent {
  background: var(--mk-app-accent, var(--sf-primary));
  color: var(--mk-app-accent-text, #fff);
}

/* ── Плашка перехода на форум приложения (app_detail.php, §2.5) ──────────── */
.mk-forum-entry-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sf-space-6);
  padding: var(--sf-space-4) var(--sf-space-5);
  text-decoration: none;
  color: var(--sf-ink);
  font-weight: 700;
  font-family: var(--sf-font-display);
}
.mk-forum-entry-link:hover { background: var(--sf-bg-2); }

/* ── Акцентная полоска под head-блоком страницы приложения (§2.5) ── */
.mk-app-detail__accent-strip {
  height: 4px;
  border-radius: var(--sf-radius-pill);
  background: var(--mk-app-accent, var(--sf-primary));
  margin-top: var(--sf-space-4);
}

/* ── Паттерны баннера head-блока (§2.5/§4) — чистый CSS, opacity ≤ 8%,
   никогда не темнее контента (реализовано отдельным ::before слоем, а не
   opacity на самом блоке, чтобы иконка/название/теглайн оставались
   полностью непрозрачными). ── */
.mk-app-detail__head--dots,
.mk-app-detail__head--diagonal {
  position: relative;
  overflow: hidden;
}
.mk-app-detail__head--dots::before,
.mk-app-detail__head--diagonal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mk-app-detail__head--dots::before {
  opacity: .08;
  background-image: radial-gradient(var(--sf-ink-soft) 1px, transparent 1.5px);
  background-size: 14px 14px;
}
.mk-app-detail__head--diagonal::before {
  opacity: .08;
  background-image: repeating-linear-gradient(
    45deg,
    var(--mk-app-accent, var(--sf-primary)) 0px,
    var(--mk-app-accent, var(--sf-primary)) 6px,
    transparent 6px,
    transparent 12px
  );
}
.mk-app-detail__head--dots > *,
.mk-app-detail__head--diagonal > * {
  position: relative;
  z-index: 1;
}

/* ── Список категорий форума (публичная сторона, §2.1) ── */
.mk-forum-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
  margin-top: var(--sf-space-4);
}
.mk-forum-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-3);
  padding: var(--sf-space-4) var(--sf-space-5);
  text-decoration: none;
  color: var(--sf-ink);
  font-weight: 600;
}
a.mk-forum-category-row:hover { background: var(--sf-bg-2); }
.mk-forum-category-row__name { font-weight: 600; }
.mk-forum-category-row__count { color: var(--sf-ink-soft); font-weight: 500; font-size: 13px; white-space: nowrap; }

/* Админ-вариант той же строки: реордер-стрелки + "Удалить" вместо
   ссылки-обёртки на всю строку (§3.1, §6: "plain row + divider (admin)"). */
/* flex, не grid — количество дочерних элементов варьируется (реордер-
   стрелки и "Удалить" рендерятся только при canCrud, §3.1), grid с
   фиксированными колонками сломал бы порядок при их отсутствии на tier 1. */
.mk-forum-category-row--admin {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  padding: var(--sf-space-3) var(--sf-space-4);
  border-bottom: 1px solid var(--sf-bg-2);
}
.mk-forum-category-row--admin:last-child { border-bottom: none; }
.mk-forum-category-row--admin .mk-forum-category-row__name { flex: 1; }
.mk-forum-category-row--admin .mk-forum-category-row__count { flex: 0 0 auto; white-space: nowrap; }
.mk-forum-category-row__reorder { display: flex; flex-direction: column; flex: 0 0 auto; }
.mk-forum-category-row__reorder form { display: contents; }

.mk-forum-reorder-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--sf-ink-soft);
  padding: 2px 6px;
}
.mk-forum-reorder-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.mk-forum-counter { color: var(--sf-ink-soft); font-size: 13px; }

.mk-forum-create-row {
  display: flex;
  gap: var(--sf-space-3);
  align-items: flex-end;
  margin-top: var(--sf-space-4);
  max-width: 480px;
}
.mk-forum-create-row .mk-field { flex: 1; margin-bottom: 0; }

/* ── Список тем (публичная + админ сторона, §2.2/§3.2) ── */
.mk-forum-thread-list {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
  margin-top: var(--sf-space-4);
}
.mk-forum-pinned-section { margin-top: var(--sf-space-4); }
.mk-forum-pinned-section__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sf-ink-soft);
  margin-bottom: var(--sf-space-2);
}
.mk-forum-thread-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-3);
  padding: var(--sf-space-4) var(--sf-space-5);
  text-decoration: none;
  color: var(--sf-ink);
  flex-wrap: wrap;
}
a.mk-forum-thread-row:hover { background: var(--sf-bg-2); }
.mk-forum-thread-row__title { font-weight: 700; flex: 1; min-width: 160px; }
.mk-forum-thread-row__meta {
  display: flex;
  gap: var(--sf-space-3);
  color: var(--sf-ink-soft);
  font-size: 13px;
  white-space: nowrap;
}
.mk-forum-thread-row__actions {
  display: flex;
  gap: var(--sf-space-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Админ-вариант: плоская строка с разделителем, не sf-card (§6). */
.mk-forum-thread-row--admin {
  border-bottom: 1px solid var(--sf-bg-2);
  padding: var(--sf-space-3) var(--sf-space-4);
}
.mk-forum-thread-row--admin:last-child { border-bottom: none; }

/* Закреплённая тема — фиксированный янтарный цвет, универсальное значение,
   никогда не перекрашивается акцентом приложения (§2.5: "color reserved for
   operationally meaningful things"). */
.mk-badge--pinned {
  background: var(--sf-accent-amber);
  color: var(--sf-ink);
  font-weight: 700;
}

.mk-forum-pin-btn {
  font-family: var(--sf-font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--sf-radius-pill);
  border: 1.5px solid var(--sf-line);
  background: var(--sf-surface);
  color: var(--sf-ink);
  cursor: pointer;
}
.mk-forum-pin-btn:hover { background: var(--sf-bg-2); }
.mk-forum-pin-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Тема + посты (§2.4/§3.3) ── */
.mk-forum-post-list { margin-top: var(--sf-space-4); }
.mk-forum-post {
  padding: var(--sf-space-4) var(--sf-space-5);
  border-bottom: 1px solid var(--sf-line);
}
.mk-forum-post:last-child { border-bottom: none; }
.mk-forum-post__meta {
  display: flex;
  gap: var(--sf-space-2);
  color: var(--sf-ink-soft);
  font-size: 13px;
  margin-bottom: var(--sf-space-2);
}
.mk-forum-post__author { font-weight: 600; color: var(--sf-ink); }
.mk-forum-post__body { white-space: pre-line; }
.mk-forum-post__deleted {
  color: var(--sf-ink-soft);
  font-style: italic;
}
.mk-forum-post__actions { margin-top: var(--sf-space-2); text-align: right; }

.mk-forum-reply { margin-top: var(--sf-space-6); }
.mk-forum-reply h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sf-ink-soft);
  margin-bottom: var(--sf-space-3);
}

/* ── Гейт "войдите, чтобы ответить" (§2.4 — новый компонент) ── */
.mk-login-gate {
  text-align: center;
  padding: var(--sf-space-5);
}
.mk-login-gate p { color: var(--sf-ink-soft); margin: 0 0 var(--sf-space-3); }

/* ── Локап/апселл-компонент .mk-tier-lock (§5) — расширяет визуальный язык
   .mk-placeholder-page (тот же solid --sf-bg-2 card, тот же слот иконки),
   не переопределяя сам .mk-placeholder-page. ── */
.mk-tier-lock {
  max-width: 480px;
  margin: var(--sf-space-6) auto;
  background: var(--sf-bg-2);
  border-radius: var(--sf-radius-md);
  padding: var(--sf-space-7) var(--sf-space-5);
  text-align: center;
  color: var(--sf-ink);
}
.mk-tier-lock__icon { font-size: 40px; margin-bottom: var(--sf-space-3); }
.mk-tier-lock h2 { margin: 0 0 var(--sf-space-2); }
.mk-tier-lock p { color: var(--sf-ink-soft); }
.mk-tier-lock .sf-btn { margin-top: var(--sf-space-4); }

/* Компактный вариант (§3.3 — баннер над списком постов, не заменяет секцию). */
.mk-tier-lock--compact {
  max-width: none;
  margin: 0 0 var(--sf-space-4);
  padding: var(--sf-space-3) var(--sf-space-4);
  text-align: left;
  background: var(--sf-bg-2);
  border-radius: var(--sf-radius-sm);
}
.mk-tier-lock--compact p { color: var(--sf-ink); margin: 0; font-size: 13px; }

/* Инлайн-вариант: один заблокированный контрол внутри обычной строки (§3.2). */
.mk-tier-lock--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  flex-wrap: wrap;
}
.mk-tier-lock--inline__caption {
  color: var(--sf-ink-soft);
  font-size: 12px;
}

/* ── Кастомизация — акцентные свотчи (§4) ── */
.mk-theme-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-3);
  margin: var(--sf-space-3) 0 var(--sf-space-5);
}
.mk-theme-swatch {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--sf-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mk-theme-swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.mk-theme-swatch__check {
  opacity: 0;
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
}
/* Кольцо выбора — фиксированный --sf-ink, НЕ цветное (§4: не должно
   визуально конфликтовать ни с одним из 8 цветов заливки). */
.mk-theme-swatch--selected { box-shadow: 0 0 0 2.5px var(--sf-ink); }
.mk-theme-swatch--selected .mk-theme-swatch__check { opacity: 1; }

/* ── Кастомизация — баннер (пилюли, зеркалят .mk-pill, §4) ── */
.mk-theme-banner-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-2);
  margin: var(--sf-space-3) 0 var(--sf-space-5);
}
.mk-theme-banner-option {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--sf-radius-pill);
  border: var(--sf-border-width) solid var(--sf-line);
  background: var(--sf-surface);
  color: var(--sf-ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mk-theme-banner-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.mk-theme-banner-option--active {
  background: var(--sf-primary);
  color: #fff;
  border-color: var(--sf-line);
}

/* ── Кастомизация — предпросмотр (§4: "мирroring .mk-app-detail__head в
   уменьшенном масштабе") — простое transform:scale поверх реальной
   разметки head-блока, достаточно для скелетной фазы. ── */
.mk-theme-preview {
  margin: var(--sf-space-3) 0 var(--sf-space-5);
  max-width: 420px;
  overflow: hidden;
}
.mk-theme-preview__inner {
  transform: scale(.72);
  transform-origin: top left;
  width: 139%;
}
.mk-app-detail__head--preview { pointer-events: none; }