/*
 * Точка входа backend. Ядро лежит в kiln-backend/ и копируется из
 * основного репозитория как есть.
 */
@import "kiln-backend/tokens.css";
@import "kiln-backend/blocks/sidebar.css";
@import "kiln-backend/blocks/section.css";
@import "kiln-backend/blocks/labeled-content.css";
@import "kiln-backend/blocks/status-bar.css";
@import "kiln-backend/blocks/action-button.css";
@import "kiln-backend/blocks/toolbar-button.css";
@import "kiln-backend/blocks/search-field.css";
@import "kiln-backend/blocks/toolbar.css";
@import "kiln-backend/blocks/split-view.css";
@import "kiln-backend/blocks/inspector-sheet.css";
@import "kiln-backend/blocks/table.css";
@import "kiln-backend/blocks/outline-table.css";
@import "kiln-backend/blocks/image-grid.css";
@import "kiln-backend/blocks/prose.css";
@import "kiln-backend/blocks/sign-in.css";

:root {
  /* Строка формы: высота и ширина колонки подписи. */
  --native-field-height: 30px;
  --native-field-label: 140px;
}

/*
 * Раскладка окна. В пакет не входит: пакету принадлежит то, что внутри,
 * а расстановка колонок это дело проекта.
 */
body.backend {
  display: flex;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: var(--native-content);
  color: var(--native-label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: var(--native-text);
  -webkit-font-smoothing: antialiased;
}

.window {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

/*
 * Строка формы: подпись слева, поле справа, линия снизу.
 *
 * Верстка одна на настройки, инспектор и блоки. Класс поля ввода не
 * заводится: строка это labeled-content из ядра, в котором значение
 * заменено полем.
 *
 * Два режима. По умолчанию подпись держит свою колонку, поле занимает
 * остаток и читается слева: так вводят. Модификатор split разносит
 * подпись и значение по краям, как в инспекторе на просмотре.
 */
.form-row {
  display: flex;
  align-items: center;
  min-height: var(--native-field-height);
  gap: var(--native-row-gap);
  border-bottom: var(--native-line) solid var(--native-separator);
}

.form-row:last-child {
  border-bottom: 0;
}

.form-row > span {
  flex: 0 0 var(--native-field-label);
  color: var(--native-label-tertiary);
}

.form-row input,
.form-row textarea,
.form-row select {
  box-sizing: border-box;
  min-width: 0;
  flex: 1;
  align-self: stretch;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
}

/*
 * Многострочное поле по высоте текста: её задаёт autosize.js. Здесь
 * только нижняя граница в одну строку и запрет ручного растягивания —
 * тянуть нечего, поле и так по содержимому.
 */
.form-row textarea {
  overflow: hidden;
  min-height: var(--native-field-height);
  padding-block: 6px;
  resize: none;
}

/* Значение прижато к правому краю: подпись и значение по разным краям. */
.form-row--split > span {
  flex: 0 0 auto;
}

.form-row--split input,
.form-row--split textarea,
.form-row--split select {
  text-align: right;
}

/* Текст во всю ширину: справа его не прочитать и не набрать. */
.form-row--wide {
  display: block;
  padding-block: 8px;
}

.form-row--wide > span {
  display: block;
  margin-bottom: 4px;
}

.form-row--wide textarea {
  width: 100%;
}

/*
 * Строка пары: слева название, справа значение, оба поля ввода. Из
 * таких строк собираются факты и ссылки. Первое поле держит колонку
 * подписи, иначе столбцы пляшут от строки к строке, но красится как
 * обычное поле: серым идут только подписи, которые не правятся, и
 * левое поле в этом цвете читалось как подпись.
 */
.form-row--pair > input:first-child {
  flex: 0 0 var(--native-field-label);
}

/*
 * Заголовок группы в форме делит страницу, а не подписывает список.
 * Линия рисуется у строки заголовка, а не у самого p: рядом с ним
 * стоит крестик удаления, и линия должна проходить под обоими.
 */
.form-group > p:first-child,
.form-group__head {
  padding: 0 0 8px;
  border-bottom: var(--native-line) solid var(--native-separator);
}

.form-group > p:first-child,
.form-group__head > p {
  /*
   * Ядро гасит отступ у подзаголовка правилом «.section > p:first-child»,
   * но здесь p лежит внутри строки с кнопками и первым потомком секции
   * не приходится. Браузерный отступ абзаца остаётся и разводит строку
   * заголовка вдвое против такой же строки без кнопок, поэтому гасится
   * тут же.
   */
  margin: 0;
  color: var(--native-label);
  font-size: var(--native-text);
  font-weight: 600;
}

/* Заголовок группы со своими действиями: название слева, крестик справа. */
.form-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.form-group__head > p {
  flex: 1;
}

.form-group__actions {
  display: flex;
  gap: 2px;
}

/*
 * Кнопка выше строчки текста, поэтому распирала бы строку заголовка и
 * ставила её вразнобой с заголовком без кнопок. Высота остаётся ради
 * места под курсор, а лишнее уходит отрицательным полем: подложка при
 * наведении сохраняется, высота строки задаётся текстом.
 */
.form-group__button {
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  margin-block: -3px;
  border-radius: var(--native-radius-small);
  color: var(--native-label-tertiary);
}

.form-group__button:hover {
  background: var(--native-control-fill);
  color: var(--native-label);
}

.form-group__button--delete:hover {
  color: var(--native-red, #e5484d);
}

.form-group__button svg {
  width: 14px;
  height: 14px;
}

/*
 * Кнопка отправки: заметная, того же роста, что поля.
 *
 * Кнопки панели исключены: действие, меняющее данные, приходит формой,
 * и её кнопка тоже submit. Без исключения значок в панели получал бы
 * боковые поля и выпадал из ряда.
 */
.form-submit,
[type="submit"]:not(.toolbar-button):not(.sidebar-signout) {
  height: var(--native-control-height);
  padding-inline: 16px;
  border: 0;
  border-radius: var(--native-radius-control);
  background: var(--native-accent);
  color: var(--native-accent-foreground);
  font: inherit;
  font-weight: 500;
}

/*
 * Кнопка сохранения в панели. Действия страницы стоят в toolbar, как
 * в окнах macOS, а не внизу формы.
 */
.toolbar-save {
  display: flex;
  height: var(--native-control-height);
  align-items: center;
  text-decoration: none;
  padding-inline: 14px;
  border: 0;
  border-radius: var(--native-radius-control);
  background: var(--native-accent);
  color: var(--native-accent-foreground);
  font: inherit;
  font-weight: 500;
}

/* Ошибки формы: список над полями, красным. */
.form-errors {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: var(--native-radius-control);
  background: color-mix(in srgb, var(--native-red, #e5484d) 12%, transparent);
  color: var(--native-red, #e5484d);
  font-size: var(--native-text-section);
  list-style: none;
}

.form-errors li + li {
  margin-top: 2px;
}

/*
 * Страница формы во всю ширину окна: настройки. Отбивку между
 * группами держит раскладка, а не марджины у соседей.
 */
.form-page {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  padding: 0 var(--native-gutter) var(--native-gutter);
  gap: 12px;
}

/* Содержимое инспектора отбито от краёв: у ядра своих отступов нет. */
.split-view > aside {
  padding: 0 var(--native-gutter) var(--native-gutter);
}

.split-view > aside form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
 * Предпросмотр в инспекторе: живая страница сайта в рамке. Колонка
 * шире обычного инспектора: в 340 пикселях сайт сжимается до полосы.
 */
.split-view > aside.preview {
  width: min(46vw, 640px);
  padding: 0;
  background: var(--native-content);
}

/*
 * Страница показывается уменьшенной, а не сжатой: ширина рамки задана
 * настоящей, а масштаб убавлен. Иначе сработали бы медиазапросы, и в
 * предпросмотре оказалась бы мобильная раскладка вместо той, что
 * увидит посетитель.
 */
.preview__frame {
  width: 143%;
  height: 143%;
  border: 0;
  transform: scale(0.7);
  transform-origin: 0 0;
}

/* Блоки страницы. */
.blocks {
  display: flex;
  flex-direction: column;
  padding: 0 var(--native-gutter) var(--native-gutter);
  gap: 12px;
}

/* Кнопка сохранения страницы: внизу инспектора, под свойствами. */
.form-actions {
  padding-top: 12px;
}

.form-actions [type="submit"] {
  width: 100%;
}

/* Кнопки добавления блоков: в строку, поровну на всю ширину. */
.blocks__add {
  display: flex;
  padding-top: 12px;
  gap: 6px;
}

.blocks__add .action-button {
  flex: 1;
  gap: 6px;
}

/* Ссылки-кнопки не подчёркиваются: они кнопки, а не текст. */
.action-button,
.form-group__button {
  text-decoration: none;
}

/*
 * Строка таблицы целиком ведёт на запись: щёлкать по строке привычнее,
 * чем попадать в название.
 */
.table td > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.outline-table .node .title {
  color: inherit;
  text-decoration: none;
}

/*
 * Шапка сайдбара продолжает панель инструментов: та же высота, та же
 * линия снизу. Иначе граница между колонками ломается на стыке.
 */
.sidebar > header {
  border-bottom: var(--native-line) solid var(--native-separator);
}

/*
 * Границы колонок. Полоса шириной в несколько пикселей поверх края:
 * своей ширины у неё нет, чтобы раскладка не смещалась.
 */
.sidebar,
.split-view > aside {
  position: relative;
}

.pane-handle {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
}

.sidebar .pane-handle {
  right: -4px;
}

.split-view > aside .pane-handle {
  left: -4px;
}

.pane-handle:hover {
  background: color-mix(in srgb, var(--native-accent) 30%, transparent);
}

/* При перетаскивании курсор не должен прыгать по тексту. */
body.is-resizing {
  cursor: col-resize;
  user-select: none;
}

/* Свёрнутый сайдбар: колонка убирается совсем. */
body.sidebar-hidden .sidebar {
  display: none;
}

/*
 * Строка с галочкой: отметка слева, подпись за ней. Подпись здесь не
 * держит колонку, как в обычной строке формы, — она читается как
 * продолжение галочки, а не как название поля.
 */
.form-row--check {
  gap: 8px;
}

.form-row--check > span {
  flex: 1 1 auto;
  color: var(--native-label);
}

.form-row--check input[type="checkbox"] {
  flex: 0 0 auto;
  align-self: center;
}

/* Вложенная строка: записи лежат внутри своей страницы, и отступ
   показывает это так же, как в дереве разделов. */
.form-row--nested {
  padding-left: var(--native-node-step);
}

/*
 * Отключённый список целей: правило «везде» отбор не использует.
 * Гасится, а не прячется, чтобы было видно, что он есть.
 */
.area-targets {
  padding: 0;
  border: 0;
  margin: 0;
}

.area-targets[disabled] {
  opacity: 0.4;
}