/*
 * Тема Инфенги поверх токенов Lumen (подключается ПОСЛЕ lumen.css).
 * lumen.css не правим — копия DS остаётся чистой, бренд живёт здесь.
 *
 * Принцип: поверхности светлые (белые карточки на #F4F4F4), тёплый песок
 * работает точечно — акценты, фокус, хедеры таблиц, активные состояния.
 */
:root {
  /* Глобальный фон страницы */
  --bg-page: #f9f9f7;
  --bg-canvas: #f9f9f7;

  /* Акцент (кнопки, чекбоксы, свитчи, выделение поля) — вместо синего */
  --accent: #ae9b79;
  --accent-strong: #97835f;  /* hover primary-кнопок */
  --accent-soft: #efe9dd;    /* мягкие подложки бейджей/подсветок */
  --accent-fg: #ffffff;

  /* Фокус-кольцо — тёплое, вместо синего из DS */
  --ring-focus: 0 0 0 3px rgb(174 155 121 / 0.28);

  /* Поверхности светлые: карточки и формы — белые */
  --surface-card: #ffffff;
  /* Песок — только точечно: хедеры таблиц, активная навигация, wells */
  --surface-inset: #ebe2d3;
  /* Hover — едва тёплый */
  --surface-hover: #f3f0ec;

  /*
   * Крупнее и контрастнее, чем в DS по умолчанию.
   *
   * Админкой пользуются часами и с расстояния вытянутой руки, а не как
   * лендингом. Дефолтная шкала (12/13.5/14.5) на таких сессиях мелкая, а
   * светло-серый #8D8D86 на белом просто пропадает. Поднимаем всю шкалу на
   * ступень и затемняем вторичный текст: иерархия «главное — второе — третье»
   * остаётся, но третье теперь ВИДНО, а не угадывается.
   */
  --size-body: 17px;
  --size-sm: 15.5px;
  --size-xs: 14px;
  --size-micro: 13px;
  --text-2: #55534d;
  --text-3: #757369;
}

body {
  background: var(--bg-page);
}

/*
 * Визуальный редактор текстов (src/ui/rich.tsx).
 *
 * Стили здесь, а не инлайном: у панели есть hover, :disabled и «включено», у
 * текста — вложенная разметка (списки, разделители, ссылки), а contenteditable
 * рисует редактор, и достучаться до него можно только селектором.
 *
 * Поле показывает текст ПРИМЕРНО так, как его увидят на сайте: тот же размер,
 * та же межстрочная плотность, те же отступы абзацев. «Примерно» — потому что
 * ширина колонки в админке своя; точная сверка — на самом сайте.
 */
.rte {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
}
.rte:focus-within { box-shadow: var(--ring-focus); border-color: var(--accent); }

/* Панель липкая: тексты толкований длинные, и кнопка нужна там, где правят, а
   не там, где начинается запись. */
.rte-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--border-1);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-card);
  /* Липкость считается от прокрутки СТРАНИЦЫ, поэтому у .rte нет overflow:
     любой overflow у предка делает панель обычной и она уезжает вверх. */
  position: sticky;
  top: 0;
  z-index: 2;
}
.rte-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font: inherit;
}
.rte-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-1); }
.rte-btn:disabled { opacity: 0.35; cursor: default; }
/* Включённое состояние — подложкой И цветом: одной подложки на песочном фоне
   не видно, одного цвета не хватает на мелкой иконке. */
.rte-btn[data-on="true"] { background: var(--surface-inset); color: var(--text-1); }
.rte-h { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.rte-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--border-1); }

/* Цвет: квадратик под иконкой показывает текущий, не открывая палитру. */
.rte-colors { position: relative; display: inline-flex; }
.rte-chip { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
.rte-pop {
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, 22px);
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  box-shadow: var(--shadow-card, 0 6px 20px rgb(0 0 0 / 0.12));
}
.rte-swatch {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
  cursor: pointer;
}
.rte-swatch[data-on="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.rte-clear {
  grid-column: 1 / -1;
  padding: 5px 6px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  cursor: pointer;
}
.rte-clear:hover { background: var(--surface-hover); }

.rte-body .tiptap {
  /* Отступ и высота — на самом редактируемом блоке, а не на обёртке: иначе
     щелчок по пустому месту под текстом не ставит курсор. */
  min-height: var(--rte-min, 120px);
  padding: 12px 14px;
  outline: 0;
  font-size: var(--size-sm);
  line-height: var(--leading-body);
  color: var(--text-1);
  overflow-wrap: anywhere;
}
.rte-body .tiptap > :first-child { margin-top: 0; }
.rte-body .tiptap > :last-child { margin-bottom: 0; }
.rte-body p { margin: 0 0 10px; }
.rte-body h2 { font-size: var(--size-h3); font-weight: 600; margin: 18px 0 8px; }
.rte-body h3 { font-size: var(--size-body); font-weight: 600; margin: 16px 0 6px; }
.rte-body ul, .rte-body ol { margin: 0 0 10px; padding-left: 22px; }
.rte-body li { margin: 0 0 4px; }
.rte-body hr { height: 1px; border: 0; margin: 14px 0; background: var(--border-1); }
.rte-body a { color: var(--accent-strong); }

/* Значок благоприятности: файл лежит на проде и здесь не откроется, поэтому
   в редакторе он рисуется кружком — цветом, который значит то же самое.
   В сохранённый текст уходит исходная картинка, со всеми атрибутами. */
.rte-sign {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  vertical-align: baseline;
  margin: 0 2px;
}

/* Режим разметки — та же старая «правка тегами», на случай разбирательств. */
.rte-code {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 0;
  background: var(--surface-card);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  line-height: 1.55;
  resize: vertical;
  outline: 0;
}