/* Фирменный слой поверх Tabler.
 *
 * Здесь только переменные и несколько своих правил. Tabler не
 * переписывается и не форкается: он обновляется, а форк пришлось бы
 * переносить руками при каждом обновлении.
 *
 * ## Откуда взяты цвета
 *
 * Со study.it-ontime.ru, а не придуманы: тёмная база #0A0F17, синий
 * #0088FF, лайм #C1F742, серый текст #C4C6CF, светлая поверхность
 * #F5F5F8. Кабинет, оформленный иначе, чем сайт, читается учеником
 * как чужой продукт — он приходит по ссылке с того же сайта.
 *
 * ## Тёмная тема основная
 *
 * Потому что сайт школы тёмный. Светлая — выбором, а не наоборот.
 *
 * ## Шрифт не меняется
 *
 * Решение владельца от 11.08: платформой будут пользоваться разные
 * школы, и характерный шрифт одной из них — чужая одежда на всех
 * остальных. Остаётся системный набор Tabler.
 */

/* ------------------------------------------------- размер и воздух */

/* База Tabler — 14px с межстрочным 1.43. Это плотность админ-панели:
 * там смотрят таблицы, а не читают. У нас читают часами, и мелко здесь
 * не ощущение, а факт.
 *
 * Размер задаётся КОРНЮ, а не только тексту. Отступы у Tabler заданы
 * в `rem`, поэтому вместе с буквами растёт и воздух между блоками —
 * иначе крупный текст просто слипается в тех же тесных карточках.
 *
 * Единицы `rem`, а не `px`: на корневом элементе `rem` означает размер,
 * выбранный человеком в настройках браузера. Пиксели обнулили бы этот
 * выбор — а его делают именно те, кому мелко.
 *
 * `clamp` даёт плавный рост от узкого экрана к широкому: на телефоне
 * лишний размер съедает строку, на большом мониторе его не хватает.
 */
/* Селектор `:root`, а не `html`: у Tabler стоит `:root{font-size:16px}`,
   и он весомее по специфичности — правило через `html` не применялось бы
   вовсе, сколько бы файл ни грузился позже. Проверено в браузере:
   размер оставался 16px на любом экране. */
:root {
  font-size: calc(clamp(0.875rem, 0.84rem + 0.15vw, 0.99rem) * var(--ui-scale, 1));
}

/* Масштаб интерфейса — выбор человека. Множитель, а не отдельный
   размер: он умножается на плавную базу выше и потому работает
   одинаково на телефоне и на мониторе.
 *
 * Шаг 6%, а не 12%. Первый набор был вдвое крупнее нужного: владелец
 * посмотрел и сказал, что «плотно» у него читается как «обычно»,
 * а две верхние ступени — «вообще мимо». База опущена на ту же
 * величину, так что нынешнее «обычно» — это прежнее «плотно».
 *
 * Шаг мельче 5% не имеет смысла: разницу в полпикселя человек
 * не увидит, а список из восьми ступеней сделает выбор работой.
 */
:root {
  --ui-scale: 1;
}

[data-ui-scale="compact"] { --ui-scale: 0.94; }
[data-ui-scale="large"] { --ui-scale: 1.06; }
[data-ui-scale="huge"] { --ui-scale: 1.12; }

:root {
  /* Текст — в размер корня, а не 0.875 от него. */
  --tblr-body-font-size: 1rem;
  /* 1.43 — межстрочный для таблиц. Для чтения нужно просторнее. */
  --tblr-body-line-height: 1.55;
}

:root {
  /* Фирменные цвета. Не используются напрямую в разметке — только
     через переменные Tabler ниже: так правка цвета остаётся правкой
     одной строки. */
  --brand-ink: #0a0f17; /* почти чёрный с синевой */
  --brand-blue: #0088ff;
  --brand-blue-deep: #0071d6; /* для светлой темы: белый текст на нём читается */
  --brand-lime: #c1f742;
  --brand-mute: #c4c6cf;
  --brand-surface: #f5f5f8;

  /* Скругления с сайта: 8 у кнопок, 10 у карточек. У Tabler по
     умолчанию 6 — мельче и суше. */
  --tblr-border-radius: 8px;
  --tblr-border-radius-sm: 6px;
  --tblr-border-radius-lg: 10px;
  --tblr-border-radius-xl: 20px;

  /* Цвет курса. Подменяется на странице курса; здесь — запасной,
     чтобы правила ниже работали и там, где курса нет. */
  --course-color: var(--brand-blue);
}

/* ---------------------------------------------------------- светлая */

[data-bs-theme="light"] {
  --tblr-primary: var(--brand-blue-deep);
  --tblr-primary-rgb: 0, 113, 214;
  --tblr-body-bg: var(--brand-surface);
  --tblr-body-color: #1a1f28;
  --tblr-secondary: #6b7280;
  --tblr-border-color: #e4e5ea;
  --tblr-link-color: var(--brand-blue-deep);
  --tblr-link-hover-color: #005bb0;
}

/* ----------------------------------------------------------- тёмная */

[data-bs-theme="dark"] {
  --tblr-primary: var(--brand-blue);
  --tblr-primary-rgb: 0, 136, 255;

  /* Три уровня поверхности, а не два. Тёмная тема без градации
     превращается в плоское пятно, где карточка неотличима от фона,
     и глазу не за что зацепиться. */
  --tblr-body-bg: var(--brand-ink); /* страница */
  --tblr-bg-surface: #121a26; /* карточка */
  --tblr-bg-surface-secondary: #0d141d;
  --tblr-bg-surface-tertiary: #1a2432; /* приподнятое: шапка, наведение */

  --tblr-body-color: #e8eaf0;
  --tblr-secondary: var(--brand-mute);
  --tblr-border-color: rgba(255, 255, 255, 0.08);
  --tblr-link-color: #4da6ff;
  --tblr-link-hover-color: #80c0ff;
}

/* Тени в темноте не работают: тень — это затемнение, а темнее уже
   некуда. Границу даёт светлая линия, как на сайте школы. */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .navbar {
  box-shadow: none;
  border: 1px solid var(--tblr-border-color);
}

/* Editor.js: значок «+» и значок настроек/перетаскивания блока
   нарисованы фиксированным #1d202b — почти чёрным, для страницы
   на белом фоне. На нашей тёмной поверхности это тёмное на тёмном,
   и оба значка видны только тогда, когда наведение подсвечивает
   область вокруг них своим hover-фоном. Библиотека не берёт цвет
   из CSS-переменных для этих двух кнопок (только popover настроек
   и inline-панель уже параметризованы через --color-*), поэтому
   переопределяем классы напрямую, а не одну переменную. */
[data-bs-theme="dark"] .ce-toolbar__plus,
[data-bs-theme="dark"] .ce-toolbar__settings-btn {
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .ce-toolbar__plus:hover,
[data-bs-theme="dark"] .ce-toolbar__plus--active,
[data-bs-theme="dark"] .ce-toolbar__settings-btn:hover,
[data-bs-theme="dark"] .ce-toolbar__settings-btn--active {
  background-color: var(--tblr-bg-surface-tertiary);
}

/* Попап настроек блока (Выше / Ниже / Удалить) и инлайн-панель
   выделения текста (Ж / К / ссылка) уже читают цвет через
   собственные CSS-переменные Editor.js — их достаточно
   переопределить, классы внутри трогать не нужно. */
[data-bs-theme="dark"] .ce-popover {
  --color-background: var(--tblr-bg-surface);
  --color-text-primary: var(--tblr-body-color);
  --color-text-secondary: var(--brand-mute);
  --color-border: var(--tblr-border-color);
  --color-background-item-hover: var(--tblr-bg-surface-tertiary);
}

[data-bs-theme="dark"] .ce-inline-toolbar {
  --color-text-primary: var(--tblr-body-color);
}

/* --------------------------------------------------- цвет курса */

/* Подпись оформления: курс узнаётся по цвету раньше, чем прочитано
   название. Взято из системы школы — на сайте у каждого курса свой
   цвет: Windows+Linux синий, MikroTik лаймовый, Zabbix красный.
   Это навигация, а не украшение: ученик с тремя курсами различает их
   боковым зрением. */
.course-card {
  position: relative;
  overflow: hidden;
}

.course-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--course-color);
}

/* Полоса под шапкой урока: та же метка курса, что и на карточке,
   чтобы вкладка с уроком узнавалась без чтения. */
.course-rule {
  height: 3px;
  border-radius: 3px;
  background: var(--course-color);
}

.progress-course .progress-bar {
  background-color: var(--course-color);
}

.badge-course {
  background: color-mix(in srgb, var(--course-color) 18%, transparent);
  color: var(--course-color);
  border: 1px solid color-mix(in srgb, var(--course-color) 35%, transparent);
}

/* ------------------------------------------------------- мелочи */

/* Кнопка-переключатель темы: круглая, без рамки, как иконки в шапке. */
.theme-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0.25rem 0.5rem;
  border-radius: 100px;
  cursor: pointer;
  line-height: 1;
}

.theme-toggle:hover {
  background: var(--tblr-bg-surface-tertiary, rgba(0, 0, 0, 0.06));
}

/* Значки (см. templates/core/_icon.html).
 *
 * Размер в `em`, а не в пикселях: значок стоит рядом с текстом кнопки
 * и должен расти вместе с ним — у нас есть настройка масштаба, и
 * в пикселях выбравший крупный шрифт получил бы прежние крошечные
 * картинки рядом с выросшими буквами.
 *
 * `stroke-width` уменьшен: набор нарисован для 24 пикселей, а мы
 * показываем его меньше — при том же весе линии значок становится
 * жирным пятном.
 */
.lms-icon {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.75;
  vertical-align: -0.2em;
}

/* Кнопка-значок не должна быть меньше пальца. 2.25rem — нижняя граница
   удобного нажатия; без неё ряд из пяти значков превращается в игру
   «попади в нужный», а промах здесь удаляет урок. */
.btn-icon.btn-sm {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

/* Уважение к настройке «меньше движения» — не украшение, а условие
   доступности: анимация мешает людям с вестибулярными нарушениями. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}