/* Общая тема параграфов (подключается в content.published_page после стилей шаблона).
   У 13 предметов свои шаблоны: разные шрифты, фоны, серые тона и нижние меню. Здесь — одно оформление для всех:
   системный шрифт, тёплый фон и белые карточки как на сайте, одинаковые тёмный и серый текст, одинаковое
   нижнее меню на телефоне. У предмета остаётся свой акцентный цвет (--accent, --green, --teal, --blue шаблона).
   Только цвета, шрифт и вид меню: разметка, тексты, задания, раскладка и видимость блоков не меняются. */

:root {
  --site-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --site-ink: #22201c;
  --site-muted: #5d574f;
  --site-bg: #f7f5f0;
  --site-card: #fff;
  --site-line: #e6e0d6;
  --site-accent: var(--accent, var(--green, var(--teal, var(--blue, #42634d))));

  /* Нейтральные цвета шаблонов: у каждого предмета свои имена переменных. */
  --ink: var(--site-ink) !important;
  --text: var(--site-ink) !important;
  --muted: var(--site-muted) !important;
  --bg: var(--site-bg) !important;
  --paper: var(--site-card) !important;
  --surface: var(--site-card) !important;
  --line: var(--site-line) !important;
}

html body {
  background: var(--site-bg) !important;
  color: var(--site-ink);
}

/* Один шрифт. Код, формулы и рисунки — своим шрифтом. */
body,
body :where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, a, span, div, strong, b, em, i, small, label, summary, button, input,
  select, textarea, td, th, caption, figcaption, blockquote, section, article, aside, header, nav):not(code *, pre *, kbd *, samp *, math *, svg *, .katex *, .MathJax *) {
  font-family: var(--site-font) !important;
}

/* Нижнее меню параграфа на телефоне: у шаблонов пять разных разметок, вид — один.
   Показ и скрытие меню (display) остаются за шаблоном. */
@media (max-width: 760px) {
  nav:is(.mobile-dock, .dock, .mobile, .mobile-nav) {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 2px !important;
    padding: 6px !important;
    border: 1px solid var(--site-line) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 8px 28px rgba(24, 18, 14, .14) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  nav:is(.mobile-dock, .dock, .mobile, .mobile-nav) > :is(a, button) {
    min-height: 48px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: var(--site-muted) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em !important;
    /* Шесть пунктов на экране 375 px: обычные слова («Примеры», «Практика») помещаются целиком, а слово длиннее
       «таблетки» («1. Равнобедренный», «Объяснения») переносится по слогам внутри неё, а не обрезается краем панели. */
    min-width: 0 !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
    overflow-wrap: anywhere !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }

  nav:is(.mobile-dock, .dock, .mobile, .mobile-nav) > :is(a, button):not(.done) {
    background: transparent !important;
  }

  nav:is(.mobile-dock, .dock, .mobile, .mobile-nav) > :is(a, button) :is(span, small) {
    color: inherit !important;
    font-size: inherit !important;
  }

  nav:is(.mobile-dock, .dock, .mobile, .mobile-nav) > :is(a, button) strong {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  nav:is(.mobile-dock, .dock, .mobile, .mobile-nav) > :is(a, button):is(.active, [aria-current], [aria-expanded="true"]) {
    border-color: color-mix(in srgb, var(--site-accent) 30%, #fff) !important;
    background: color-mix(in srgb, var(--site-accent) 12%, #fff) !important;
    color: var(--site-accent) !important;
  }
}

/* Тёмная тема (menu.css — инверсия цветов): акцентный текст на светлой подложке акцента после инверсии
   теряет контраст, поэтому подсвеченный пункт меню пишется основным цветом; акцент остаётся в рамке. */
@media (max-width: 760px) {
  html[data-theme="dark"] nav:is(.mobile-dock, .dock, .mobile, .mobile-nav) > :is(a, button):is(.active, [aria-current], [aria-expanded="true"]) {
    border-color: var(--site-accent) !important;
    color: var(--site-ink) !important;
  }
}

/* Всемирная история 9, § 22–27 (шаблоны kh<N>-): «.khN-page a { color: inherit }» шаблона перебивал белый текст
   тёмной кнопки «Начать →» — тёмный текст на тёмном фоне. */
[class$="-page"] a[class*="-btn-dark"] {
  color: #fff !important;
}