/*
 * Точка входа frontend.
 *
 * Ядро лежит в kiln-frontend/ и копируется из основного репозитория как есть:
 * править его здесь нельзя, иначе полигон перестанет быть эталоном.
 * Порядок тот же, что в оригинальном index.css.
 */
/*= require kiln-frontend/variables.css */
/*= require kiln-frontend/base.css */
/*= require kiln-frontend/blocks/menu.css */
/*= require kiln-frontend/blocks/search.css */
/*= require kiln-frontend/blocks/aside.css */
/* После колонки: нижнее меню отменяет её полосу внизу, а не наоборот. */
/*= require kiln-frontend/blocks/tabbar.css */
/*= require kiln-frontend/blocks/crumbs.css */
/*= require kiln-frontend/blocks/headings.css */
/*= require kiln-frontend/blocks/rows.css */
/*= require kiln-frontend/blocks/forms.css */
/*= require kiln-frontend/blocks/footer.css */
/*= require kiln-frontend/blocks/area.css */
/*= require kiln-frontend/blocks/gallery.css */
/*= require kiln-frontend/blocks/article.css */
/*= require kiln-frontend/blocks/popup.css */
/*= require kiln-frontend/blocks/filters.css */
/*= require kiln-frontend/blocks/debug.css */

/*
 * Ссылки под текстом. Блока в ядре нет: это раскладка страницы, а не
 * элемент вёрстки, поэтому живёт в проекте.
 */
.row-links {
  display: flex;
  margin-bottom: var(--gap);
}

/*
 * Строкой: коротким названиям так теснее и они читаются как один ряд
 * действий. Перенос по мере заполнения.
 */
.row-links.row {
  flex-flow: row wrap;
  gap: 8px var(--icon-space);
}

/*
 * Столбцом: по ссылке на строку. Нужно там, где название длиннее пары
 * слов — «2.37.58, ремкомплект для X51». В ряду такие названия встают
 * вплотную и сливаются в сплошной текст, где границу между соседями
 * приходится угадывать.
 *
 * Строка того же роста, что в списках и в левой колонке: перечни на
 * одной странице должны стоять одинаково.
 */
.row-links.column {
  flex-direction: column;
}

.row-links.column a {
  display: flex;
  min-height: calc(var(--line) + var(--step) * 2);
  align-items: center;
}

/*
 * Разделитель между строками, как в перечне фактов: без него столбец
 * ссылок читается сплошным блоком синего текста.
 */
.row-links.column a:not(:last-child) {
  border-bottom: var(--hairline) solid var(--separator);
}

/*
 * Правая колонка: оглавление страницы.
 *
 * В ядре её нет, там описана только левая, поэтому раскладка живёт
 * здесь. Ядро при этом не правится: грид переопределяется целиком для
 * страниц с классом with-outline, а переменные левой колонки остаются
 * теми же.
 *
 *     body.with-aside.with-outline
 *         nav.menu
 *         aside                    ← разделы сайта
 *         aside.outline-column     ← оглавление
 *         main
 *         footer
 *
 * Колонки независимы: страница объявляет любую из четырёх пар.
 */

/*
 * Ширина оглавления и просвет перед ним. Заданы здесь, а не в ядре: у
 * ядра своих переменных под правую колонку нет.
 */
:root {
  --outline-width: 200px;
  --outline-space: 40px;

  /*
   * Ширина полосы содержимого, как её задало ядро. Запоминается здесь,
   * потому что на странице с двумя колонками --site-width
   * переопределяется через саму себя, а так ссылка на исходное
   * значение сохраняется и число из ядра не дублируется.
   */
  --site-width-base: var(--site-width);
}

@media (min-width: 900px) {
  /*
   * Только оглавление, без разделов слева. Крайние доли забирают
   * остаток и потому равны: содержимое стоит посередине экрана, как и
   * на странице с левой колонкой.
   */
  .with-outline:not(.with-aside) {
    display: grid;
    grid-template-areas:
      'menu menu menu menu menu'
      '. main gap outline .';
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns:
      minmax(var(--site-gutter), 1fr)
      minmax(0, calc(var(--site-width) - var(--outline-width) - var(--outline-space)))
      var(--outline-space)
      var(--outline-width)
      minmax(var(--site-gutter), 1fr);
  }

  /*
   * Обе колонки: разделы слева, текст посередине, оглавление справа.
   * Текст берёт остаток полосы содержимого, а не свою ширину: сумма
   * трёх столбцов держится внутри --site-width, поэтому сайт от второй
   * колонки не расширяется.
   */
  .with-outline.with-aside {
    /*
     * Полоса содержимого шире обычной: --site-width рассчитана на текст
     * с одной колонкой, и вычесть из неё вторую значит оставить строку
     * в сорок знаков, которую невозможно читать. Прибавка равна ровно
     * второй колонке с её просветом, поэтому сам текст остаётся той же
     * ширины, что и на странице с одной колонкой.
     */
    --site-width: calc(
      var(--site-width-base) + var(--outline-width) + var(--outline-space)
    );

    grid-template-areas:
      'menu menu menu menu menu menu menu'
      '. aside gap main gap-right outline .';
    grid-template-columns:
      minmax(var(--site-gutter), 1fr)
      var(--aside-width)
      var(--aside-space)
      minmax(
        0,
        calc(
          var(--site-width) - var(--aside-width) - var(--aside-space) -
            var(--outline-width) - var(--outline-space)
        )
      )
      var(--outline-space)
      var(--outline-width)
      minmax(var(--site-gutter), 1fr);
  }

  /*
   * Меню, подвал и текст по своим областям. Ядро назначает их только
   * для .with-aside, поэтому на странице с одним оглавлением без этих
   * правил они разъезжаются по свободным ячейкам: меню налезает на
   * текст, подвал встаёт в колонку оглавления.
   */
  .with-outline > .menu {
    grid-area: menu;
  }

  .with-outline > .page-column {
    grid-area: main;
  }

  .with-outline.with-aside > .page-column {
    grid-row: 1 / -1;
  }

  .with-outline > .page-column > main {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .with-outline > .outline-column {
    grid-area: outline;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-self: start;
    max-height: 100%;
    padding-block: var(--site-space-top);
  }
}

/*
 * Узкий экран: оглавление не показывается вовсе.
 *
 * Внизу уже стоит полоса разделов, и вторая полоса заняла бы половину
 * экрана. Свернуть его в «details» тоже не выход: на телефоне до
 * заголовка проще доехать пальцем, чем открывать список и целиться в
 * строку.
 */
@media (max-width: 899px) {
  .outline-column {
    display: none;
  }
}

/*
 * Список заголовков. Строки того же роста и кегля, что в левой
 * колонке: обе стоят на одной странице, и разный рост у одинаковых по
 * смыслу строк сразу заметен.
 */
/*
 * Подпись колонки: краска и вес заголовка, а не приглушённый текст.
 * Серым идут сами пункты, и подпись в том же цвете терялась среди них
 * вместо того, чтобы их возглавлять.
 */
.outline > p {
  margin: 0 0 8px;
  padding: 0 var(--field-space);
  color: var(--color-title);
  font-size: var(--text);
  font-weight: 600;
}

.outline menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.outline li:not(:last-child) {
  margin-bottom: 2px;
}

.outline a {
  display: flex;
  min-height: calc(var(--line) + var(--step) * 2);
  align-items: center;
  padding: 0 var(--field-space);
  border-radius: var(--surface-radius);
  color: var(--color-muted);
  font-size: var(--text);
  text-decoration: none;
}

.outline a:hover {
  color: var(--color-text);
  text-decoration: none;
}

/* Подзаголовок: тот же отступ, что у вложенного раздела слева. */
.outline .nested a {
  padding-left: calc(var(--field-space) + var(--nest-space));
}