/* Синяя "пилюля"-бейдж для таблиц (например, тип компонента). */
.badge {
  display: inline-block;
  padding: 0.15em 0.65em;
  border-radius: 0.4rem;
  background-color: var(--md-primary-fg-color); /* цвет из темы (indigo) */
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* Вариант бейджа другого цвета — например, для статуса "deprecated". */
.badge.gray  { background-color: #6b7280; }
.badge.green { background-color: #16a34a; }
.badge.red   { background-color: #dc2626; }

/* «Свойства» страницы (поля front-matter) — как панель Properties в Obsidian. */
.page-props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  align-items: center;
  margin: 0 0 1.2rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  font-size: 0.75rem;
}
.page-prop { display: contents; }           /* ключ и значения — как ячейки общей сетки */
.page-prop__key {
  color: var(--md-default-fg-color--light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.page-prop__vals { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.page-prop__val {
  background-color: var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  padding: 0.05rem 0.45rem;
}
.page-prop__val--link {
  color: var(--md-primary-fg-color);
  text-decoration: none;
}
.page-prop__val--link:hover { text-decoration: underline; }
.page-prop__val--empty { color: var(--md-default-fg-color--light); background: none; padding-left: 0; }

/* Скрытый блок только для поискового индекса (значения свойств страницы). */
.search-terms { display: none; }

/* Компактный отступ под заголовками — ближе к Obsidian.
   ВАЖНО: видимый зазор = максимум из нижнего отступа заголовка и ВЕРХНЕГО
   отступа следующего элемента (margin collapsing). У абзаца сверху 16px, поэтому
   одного уменьшения заголовка мало — обнуляем верхний отступ элемента после
   заголовка, и тогда зазором управляет только margin-bottom заголовка ниже. */
.md-typeset :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol, table, pre, blockquote) {
  margin-top: 0;
}
.md-typeset h1 { margin-bottom: 0.3em; }
.md-typeset h2 { margin-bottom: 0.3em; }
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 { margin-bottom: 0.25em; }

/* Рамка вокруг картинок: у скриншотов интерфейса фон белый, и без рамки
   не видно, где кончается изображение и начинается страница.
   Иконки в тексте (высота задана атрибутом) не трогаем. */
.md-typeset img:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
}

/* Две-три небольшие картинки в ряд (например, соседние фильтры интерфейса). */
.md-typeset .img-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-start;
}

/* Заголовок первого уровня внутри текста отделяется от предыдущего раздела:
   у Material верхний отступ h1 обнулён (он рассчитан на заголовок страницы),
   и подряд идущие разделы сливались. Берём примерно 1,75 отступа h2.
   Первый заголовок на странице — сразу после панели свойств или самый первый —
   отступа не получает. */
.md-typeset h1 { margin-top: 2.5em; }
.md-typeset > h1:first-child,
.md-typeset > .page-props + h1 { margin-top: 0; }