/* packages/ui/myfunctions.css — раздел «Мои функции».
 *
 * Раскладка повторяет «Создать тикет» (`newticket.css`) и «Сервисы», и это
 * несущее, а не косметика: `#content` — это `.panel` с `overflow: hidden`
 * (shell.css). Раздел, положивший содержимое прямо в панель, не
 * прокручивается вовсе. Прокручиваемый узел ровно один (`.mf-body`), у шапки
 * `flex: none`.
 *
 * Таблица — общий примитив `.tbl` (`table.css`), своей копии здесь нет: ни
 * рамок, ни отбивок ячеек, ни чередования строк. Свои правила — только то,
 * чего у примитива нет: список функций, подписи качества и основания.
 *
 * Только токены темы, ни одного литерального цвета (гейты
 * tests/test_ui_assets.py и tests/test_ui_myfunctions.py).
 */

.mf-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.mf-screen .page-head {
  flex: none;
}

/* Единственный прокручиваемый узел раздела. `position: relative` — чтобы
   `.state` (states.css) позиционировался относительно него, а не всей
   страницы: плашка «сервис недоступен» рисуется именно сюда. */
.mf-body {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 1.1rem;
  overflow-y: auto;
}

.mf-block {
  margin-bottom: 1.4rem;
  max-width: 900px;
}

.mf-block:last-child {
  margin-bottom: 0;
}

.mf-block-title {
  margin: 0 0 .6rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}

.mf-note {
  margin: 0;
  color: var(--ink-2);
  font-size: .86rem;
}

/* Список функций — строками, а не таблицей: у функции ровно три вещи
   (название, качество, откуда досталось), и колонки под них выглядели бы
   пустой сеткой. */
.mf-functions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mf-function {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--divider);
}

.mf-function:last-child {
  border-bottom: none;
}

.mf-function-name {
  font-weight: 600;
  color: var(--ink);
}

/* Качество участия — не украшение, а вторая половина строки: одно и то же
   название функции значит разное для того, кто за неё отвечает, и того, кто
   на неё смотрит. */
.mf-mode {
  color: var(--ink-2);
  font-size: .86rem;
}

.mf-inherited {
  color: var(--ink-3);
  font-size: .82rem;
}

/* Название ресурса — главное в строке, основание — приписка к ней. */
.mf-table td:nth-child(2) {
  color: var(--ink);
}

.mf-basis {
  color: var(--ink-2);
  font-size: .86rem;
}

/* Строка владельца одна на всю таблицу, и читаться она должна как итог, а не
   как ещё один ресурс. */
.mf-all {
  font-weight: 600;
  color: var(--ink);
}