/* Палитра Envela поверх темы Material.
 *
 * Значения взяты один в один из frontend/src/index.css (Brand v3.0), чтобы
 * справка и кабинет выглядели одним продуктом: человек уходит по ссылке из
 * сайдбара и не должен почувствовать, что попал на чужой сайт.
 *
 * Меняем только цвета. Раскладку, типографику и поведение темы не трогаем —
 * это её сильная часть, и любая правка тут превращается в поддержку форка.
 */

:root {
  --envela-blue: #142e4d;
  --envela-blue-hover: #0d1f37;
  --envela-amber: #ef9f27;
  --envela-accent: #2563eb;
  --envela-accent-hover: #1d4ed8;
}

/* Светлая тема */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--envela-blue);
  --md-primary-fg-color--light: #1f3d63;
  --md-primary-fg-color--dark: var(--envela-blue-hover);
  --md-accent-fg-color: var(--envela-accent);
  --md-accent-fg-color--transparent: #eef4ff;
  --md-typeset-a-color: var(--envela-accent);
}

/* Тёмная тема: шапка почти сливалась бы с фоном, поэтому берём более
   светлый оттенок бренда, а не основной. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1f3d63;
  --md-primary-fg-color--light: #2c5286;
  --md-primary-fg-color--dark: var(--envela-blue);
  --md-accent-fg-color: #60a5fa;
  --md-typeset-a-color: #60a5fa;
}

/* Скриншоты. Рамка обязательна: кабинет светлый, и кадр без границы
   растворяется в фоне страницы — непонятно, где кончается статья и
   начинается картинка.
   Селектор по классу `.shot`, который проставляется в статьях, плюс запасной
   по пути — чтобы кадр не остался без рамки, если класс забыли. */
.md-typeset .shot,
.md-typeset img[src*="/screenshots/"] {
  max-width: 100%;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
}

/* Подпись под скриншотом — курсивом сразу после картинки. */
.md-typeset img[src*="/screenshots/"] + em {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* Плашка «кому эта статья» в шапке каждой статьи. */
.md-typeset .admonition.info > .admonition-title {
  background-color: rgb(37 99 235 / 8%);
}

/* Таблицы «что видите / что это значит / что делать» — читаются построчно,
   поэтому левая колонка должна быть заметно уже остальных. */
.md-typeset table:not([class]) th:first-child {
  min-width: 9rem;
}