/*
 * МИКС — единый слой оформления сайта. Подключается ПОСЛЕДНИМ (partials/_site_head.html),
 * поэтому переопределяет общие mx_tokens.css / mx_public.css без правок в них.
 */

/* ===== Токены ===== */
:root {
  --mx-ink: #15181c;
  --mx-muted: #5b6472;
  --mx-line: #e4e6ea;
  --mx-bg: #f2f1ee;
  --mx-surface: #ffffff;
  --mx-surface-soft: #f7f7f5;
  --mx-brand: #c4f044;
  --mx-brand-hover: #b3e02f;
  --mx-brand-soft: #f1fbd2;
  --mx-on-brand: #15181c;
  --mx-link: #0b67b2;
  --mx-accent: #0b67b2;
  --mx-accent-hover: #084f87;
  --mx-accent-strong: #15181c;
  --mx-danger: #c62828;
  --mx-highlight: var(--mx-brand-soft);
  --mx-radius-sm: 8px;
  --mx-radius-md: 12px;
  --mx-radius-lg: 16px;
  /* Цвета состояний (Студия и кабинеты): успех, предупреждение, ошибка, подсказка. */
  --studio-success: #2f6b12;
  --studio-warning-bg: #fff8dd;
  --studio-warning-line: #d9bd5a;
  --studio-warning-ink: #654d00;
  --studio-danger-bg: #fff4f2;
  --studio-danger-line: #e5b2aa;
  --studio-info-bg: #e8f4fb;
  --studio-info-ink: #174761;
  --mx-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Старые имена из mx_tokens.css: без красного, синего и жёлтого. */
  --c-brutal: var(--mx-ink);
  --c-marker: var(--mx-brand-soft);
  --c-accent: var(--mx-ink);
  --c-secondary: var(--mx-link);
  --c-bg: var(--mx-bg);
  --c-card-bg: var(--mx-surface);
  --c-primary: var(--mx-link);
  --primary: var(--mx-link);
  --accent: var(--mx-link);
  --accent-hover: var(--mx-accent-hover);
  --accent-light: var(--mx-brand-soft);
  --text: var(--mx-ink);
  --text-secondary: var(--mx-muted);
  --border: var(--mx-line);
  --border-light: var(--mx-line);
  --separator: var(--mx-line);
  --radius: var(--mx-radius-md);
}

body {
  background: var(--mx-bg);
  color: var(--mx-ink);
  font-family: var(--mx-font-family);
}

a {
  color: var(--mx-link);
}

/* ===== Кнопки ===== */
.mx-btn {
  align-items: center;
  background: var(--mx-surface);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-md);
  box-shadow: none;
  color: var(--mx-ink);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.1rem;
  text-decoration: none;
}

.mx-btn:hover {
  background: var(--mx-surface-soft);
  border-color: var(--mx-muted);
  opacity: 1;
}

.mx-btn:focus-visible {
  outline: 3px solid var(--mx-ink);
  outline-offset: 2px;
}

.mx-btn-primary,
.mx-btn-accent {
  background: var(--mx-brand);
  border-color: transparent;
  color: var(--mx-on-brand);
}

.mx-btn-primary:hover,
.mx-btn-accent:hover {
  background: var(--mx-brand-hover);
  border-color: transparent;
}

.mx-btn-secondary {
  background: var(--mx-ink);
  border-color: transparent;
  color: #fff;
}

.mx-btn-secondary:hover {
  background: var(--mx-ink);
  opacity: 0.88;
  border-color: transparent;
}

.mx-btn-white {
  background: var(--mx-surface);
  border-color: var(--mx-line);
  color: var(--mx-ink);
}

.mx-btn.is-liked {
  background: var(--mx-danger);
  border-color: transparent;
  color: #fff;
}

.mx-btn-sm {
  font-size: 0.875rem;
  min-height: 44px;
  padding: 0 0.85rem;
}

/* ===== Карточки ===== */
.mx-card {
  background: var(--mx-surface);
  border: 1px solid var(--mx-line);
  border-radius: var(--mx-radius-lg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.mx-card:hover {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transform: none;
}

/* ===== Старые украшения ===== */
.mx-marker-highlight {
  background: none;
  color: inherit;
  display: inline;
  padding: 0;
}

[class*="mx-rotate-"][class*="mx-rotate-"] {
  transform: none;
}

/* Старая пунктирная рамка блока цифр на лендингах. */
.mx-stats-section.mx-stats-section {
  border-bottom: 1px solid var(--mx-line);
  border-top: 1px solid var(--mx-line);
}

/* ===== Логотип ===== */
.mx-logo {
  align-items: center;
  display: flex;
  gap: 10px;
  text-decoration: none;
}

.mx-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.mx-logo-word {
  color: var(--mx-ink);
  display: inline-flex;
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .mx-logo img {
    height: 42px;
  }

  .mx-logo-word {
    font-size: 1.18rem;
  }
}

/* ===== Хлебные крошки ===== */
.breadcrumb-bar {
  border-bottom: 1px solid var(--mx-line);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.55rem 0;
}

.breadcrumb {
  align-items: center;
  color: var(--mx-muted);
  gap: 0.4rem;
}

.breadcrumb a {
  color: var(--mx-muted);
}

.breadcrumb a:hover {
  color: var(--mx-ink);
  text-decoration: underline;
}

.breadcrumb li:not(:last-child)::after {
  content: "\203A";
  font-weight: 400;
  margin-left: 0.4rem;
}

.breadcrumb li:last-child {
  color: var(--mx-ink);
}

.breadcrumb-current {
  max-width: min(60vw, 520px);
}

@media (max-width: 640px) {
  .breadcrumb li {
    display: none;
  }

  .breadcrumb li.breadcrumb-parent {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumb li.breadcrumb-parent::before {
    content: "\2190\00a0";
  }

  .breadcrumb li.breadcrumb-parent::after {
    content: none;
  }
}

/* ===== Левая колонка и ряд тем ===== */
/* Подписи разделов («Темы», «Смотреть и читать»): не мельче 13px, с разрядкой. */
.home-navigation-title,
.home-topic-title,
.home-block-head.home-block-head {
  color: var(--mx-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  opacity: 1;
}

.nav-link-small {
  color: var(--mx-ink);
  font-size: 15px;
  opacity: 1;
}

.nav-link-small:hover {
  background: var(--mx-surface-soft);
  color: var(--mx-muted);
}

@media (max-width: 980px) {
  .home-topic-nav {
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
  }

  .topic-chip.is-active {
    background: var(--mx-ink);
  }
}

/* ===== Рекламное место: рамка только после показа ===== */
.mx-ad-slot.is-ad-pending {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mx-ad-slot.is-ad-empty {
  display: none !important;
}

/* ===== Описание: «Ещё» ===== */
/* Обрезаем только при работающем скрипте: без него текст виден целиком. */
html.js [data-mx-clamp]:not(.is-expanded) {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--mx-clamp-lines, 4);
  display: -webkit-box;
  overflow: hidden;
}

.mx-clamp-toggle {
  background: none;
  border: 0;
  color: var(--mx-link);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 0;
}

.mx-clamp-toggle[hidden] {
  display: none;
}

/* ===== Действия автора ===== */
.mx-author-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.mx-author-actions .mx-author-quiet-link {
  align-items: center;
  color: var(--mx-muted);
  display: inline-flex;
  font-size: 15px;
  gap: 0.4rem;
  min-height: 44px;
  text-decoration: none;
}

.mx-author-quiet-link:hover {
  color: var(--mx-ink);
  text-decoration: underline;
}

.mx-author-quiet-link svg {
  flex: none;
  height: 18px;
  width: 18px;
}

/* ===== Подвал: ряд ссылок ===== */
.mx-footer-nav {
  display: flex;
  flex-wrap: wrap;
  font-weight: 600;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
}

.mx-footer-nav a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

/* ===== Шапка страницы: заголовок и пояснение (главная, тема, «Авторы») ===== */
.mx-page-head {
  margin: 0 0 1rem;
}

.mx-page-head-title {
  color: var(--mx-ink);
  font-family: var(--mx-font-family);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.mx-page-head-lead {
  color: var(--mx-muted);
  font-size: 1.0625rem;
  line-height: 1.5;
  margin: 0;
  max-width: 44rem;
}

/* ===== Боковые отступы страниц ===== */
/* .mx-section (padding: 4rem 0) обнуляла боковой отступ у .mx-container; возвращаем его.
   Главная и тема держат свою белую панель, запись — свою вёрстку (картинка во всю ширину). */
.mx-container.mx-section:not(:has(.home-discovery-panel)):not(:has(.post-page-layout)) {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 600px) {
  /* Единый левый край 16px: шапка, крошки, заголовки, темы, карточки. */
  .mx-container:not(.mx-section) {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .home-discovery-panel.home-discovery-panel {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Ряд тем на всю ширину экрана, свой отступ 16px у самого ряда. */
  .mx-container.mx-section:not(:has(.home-discovery-panel)):not(:has(.post-page-layout)) .home-topic-nav {
    margin-left: -1rem;
    margin-right: -1rem;
    max-width: none;
  }
}

/* ===== Подвал прижат к низу на коротких страницах ===== */
body:has(.mx-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has(.mx-footer) > .mx-footer {
  margin-top: auto;
}

/* ===== Тихая ссылка «Канал автора в МАКС»: подчёркнут только текст ===== */
.mx-author-quiet-link,
.mx-author-quiet-link:hover {
  text-decoration: none;
}

.mx-author-quiet-link span {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mx-author-quiet-link:focus-visible {
  outline: 3px solid var(--mx-ink);
  outline-offset: 2px;
}

/* Подсказка про вход под кнопкой «Подписаться» занимает всю строку. */
.mx-author-actions .reader-follow-hint {
  flex-basis: 100%;
}

/* ===== Служебные страницы (404, ошибка, сообщение) ===== */
.sys-card {
  margin: 3rem auto 4rem;
  max-width: 640px;
  padding: 2rem;
}

.sys-text {
  color: var(--mx-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0.75rem 0 1.5rem;
}

.sys-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sys-note {
  font-size: 1rem;
  margin: 1.25rem 0 0;
}

.sys-note a {
  color: var(--mx-link);
  text-underline-offset: 3px;
}

/* ===== Переход «к содержанию»: виден только при фокусе с клавиатуры ===== */
.mx-skip-link {
  background: var(--mx-ink);
  border-radius: var(--mx-radius-sm);
  color: #fff;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  position: absolute;
  top: -4rem;
  z-index: 100;
}

.mx-skip-link:focus {
  outline: 3px solid var(--mx-brand);
  outline-offset: 2px;
  top: 0.5rem;
}