/* Страница загрузки приложения: карточка сборки посреди пустой страницы. Цвета, шрифт, поля, кнопка и форма входа
   из кита, `/kit/kit.css`; своё здесь только вкладки систем, карточки сборок и их тени, числа этих предметов стоят
   токенами в шапке их правил. Тема только светлая, `data-theme="light"` в разметке: белая карточка на светло-сером,
   вид задан владельцем. */

@layer layout {
  /* Содержимое прижато к верху, положение задаёт `.download`: карточка и вкладки стоят на месте, предыдущие версии
     раскрываются вниз, правка владельца 06.09.2026. По ширине центрирует `main`. */
  body {
    --page-padding: var(--space-7);
    --page-bottom-share: 6vh;

    display: grid;
    align-content: start;
    min-height: 100dvh;
    padding: var(--page-padding) var(--page-padding) calc(var(--page-padding) + var(--page-bottom-share));
    font-size: var(--font-size-name);
  }

  main {
    display: grid;
    justify-items: center;
    min-width: 0;
  }

  /* ── раздача ──────────────────────────────────────────────────────────────── */
  /* Столбец постоянной ширины для вкладок, карточек и кнопки предыдущих версий, макет владельца 06.09.2026. Свёрнутый
     блок стоит серединой на 47dvh; 179 это половина его высоты 310 (замер 06.09.2026) плюс верхнее поле страницы. */
  .download {
    --download-width: 640px;
    --download-center-share: 47dvh;
    --download-half-height: 179px;

    display: grid;
    width: min(var(--download-width), 100%);
    margin-top: max(0px, calc(var(--download-center-share) - var(--download-half-height)));
    margin-bottom: var(--space-7);
  }

  /* Отказ действия встаёт под свежей карточкой, пустой список стоит на месте карточки по центру. */
  .download-refusal { margin-top: var(--space-6); }
  .download > .empty { justify-self: center; }

  /* Вкладки систем: дорожка чуть темнее страницы, выбранная вкладка белая с лёгкой тенью. */
  .download-tabs {
    --download-tabs-inset: 3px;
    --download-tabs-radius: var(--radius-image);
    /* Число макета владельца 06.09.2026 вне шкалы, входит в замер `--download-half-height`. */
    --download-tabs-gap: 20px;

    display: inline-flex;
    gap: var(--space-1);
    margin: 0 auto var(--download-tabs-gap);
    padding: var(--download-tabs-inset);
    border-radius: var(--download-tabs-radius);
    background: var(--color-track);
  }

  .download-tab {
    --download-tab-padding-block: 7px;
    --download-tab-padding-inline: 18px;
    --download-tab-radius: 9px;
    --download-tab-shadow: 0 1px 2px var(--shadow-color-2);

    padding: var(--download-tab-padding-block) var(--download-tab-padding-inline);
    border: 0;
    border-radius: var(--download-tab-radius);
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: normal;
    transition: var(--motion-state);
  }

  .download-tab:hover { color: var(--color-text); }

  .download-tab[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--download-tab-shadow);
  }

  /* Карточка сборки. Картинка слева, справа столбец подписей: строка заголовка, строка сведений,
     список изменений. */
  .build-card {
    --build-card-padding: 22px;
    --build-card-gap: 20px;
    --build-card-radius: 20px;
    /* Тень из двух слоёв, ближнего и дальнего; мягкая и еле заметная по просьбе владельца. */
    --build-card-shadow: 0 1px 2px var(--shadow-color-1), 0 10px 28px var(--shadow-color-2);
    /* Тень наведения, заметно контрастнее тени покоя. */
    --build-card-shadow-hover: 0 3px 6px var(--shadow-color-2), 0 22px 52px var(--shadow-color-4);
    --build-card-lift: -1px;
    --build-card-motion: box-shadow var(--duration-short) var(--easing), transform var(--duration-short) var(--easing),
      background-color var(--duration-short) var(--easing);

    display: flex;
    /* Картинка и плитка вровень с заголовком, как в карточках раздела ассетов; правка владельца 04.09.2026. */
    align-items: flex-start;
    gap: var(--build-card-gap);
    width: 100%;
    padding: var(--build-card-padding);
    border-radius: var(--build-card-radius);
    background: var(--color-surface);
    box-shadow: var(--build-card-shadow);
    color: inherit;
    line-height: normal;
    text-decoration: none;
    transition: var(--build-card-motion);
  }

  /* Вся карточка и есть кнопка, курсор над ней стрелкой, как в приложении. */
  a.build-card:hover { box-shadow: var(--build-card-shadow-hover); transform: translateY(var(--build-card-lift)); }
  a.build-card:active { box-shadow: var(--build-card-shadow); transform: none; }

  /* Картинка несёт свою тень полем 2,5% с каждой стороны (замер по альфе файла), отрицательные поля его снимают:
     видимое тело 80, как `.build-tile`, и стоит вровень с отступом карточки. */
  .build-app-image {
    --build-app-image-size: 84px;
    --build-app-image-bleed: -2px;

    flex: none;
    width: var(--build-app-image-size);
    height: var(--build-app-image-size);
    margin: 0 var(--build-app-image-bleed);
  }

  .build-text { flex: 1; min-width: 0; }

  /* Строка заголовка: слева имя, справа номер с каналом, вес и стрелка, выровнены по середине. */
  .build-head {
    --build-head-gap: 18px;

    display: flex;
    align-items: center;
    gap: var(--build-head-gap);
    margin: 0;
  }

  /* Заголовок карточки, начертание жирнее шкалы кита. */
  .build-title {
    --build-title-size: 21px;
    --build-title-weight: 700;
    --build-title-tracking: -0.02em;

    margin-right: auto;
    min-width: 0;
    overflow: hidden;
    font-size: var(--build-title-size);
    font-weight: var(--build-title-weight);
    letter-spacing: var(--build-title-tracking);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .build-version {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .build-size {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  /* Стрелка загрузки у правого края, своего нажатия у неё нет. Размер владельца 06.09.2026, в обеих карточках. */
  .build-arrow {
    --build-arrow-size: 20px;

    flex: none;
    width: var(--build-arrow-size);
    height: var(--build-arrow-size);
    color: var(--color-link);
  }

  /* Система и время выкладки, система чуть плотнее. */
  .build-meta {
    --build-meta-gap: 10px;

    display: flex;
    gap: var(--build-meta-gap);
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
  }

  .build-platform { font-weight: var(--font-weight-medium); }
  .build-when { white-space: nowrap; }

  /* Что изменилось, по строке на изменение, без маркеров; правило письма в app-release/references/release-notes.md.
     Потолок четыре строки на экране, дальше многоточие [Solution 267]. */
  .build-notes {
    --build-notes-line-height: 1.6;
    --build-notes-lines: 4;

    display: -webkit-box;
    overflow: hidden;
    margin: var(--space-6) 0 0;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--build-notes-line-height);
    list-style: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--build-notes-lines);
    line-clamp: var(--build-notes-lines);
  }

  /* Строка требуемого действия темнее и жирнее остальных, заказ владельца 08.09.2026. */
  .build-notes [data-kind="action"] {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
  }

  /* Метка пакета интерфейса стоит ближе к своему списку, чем к описанию ядра над собой. */
  .build-package { margin-top: var(--space-6); }
  .build-package + .build-notes { margin-top: var(--space-2); }

  /* ── предыдущие версии ────────────────────────────────────────────────────── */
  /* Кнопка раскрытия между свежей карточкой и предыдущими, без подчёркивания; наведение меняет цвет, раскрытие
     поворачивает шеврон. */
  .download-more {
    --download-more-gap: 28px;
    --download-more-motion: transform var(--duration-short) var(--easing);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--download-more-gap) auto;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    line-height: normal;
    transition: var(--motion-state);
  }

  .download-more:hover { color: var(--color-text); }

  .download-more svg {
    width: var(--size-icon-control);
    height: var(--size-icon-control);
    transition: var(--download-more-motion);
  }

  .download-more[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* Предыдущие версии равной высоты по самой высокой, ряды `1fr`; свежей карточки правило не касается
     [Solution 267]. */
  .download-previous {
    display: grid;
    grid-auto-rows: 1fr;
    gap: var(--space-7);
  }

  /* `display` блока перебивает `hidden` из стилей браузера, скрытие задаёт это правило [Issue 132]. */
  .download-previous[hidden] { display: none; }

  /* Карточка предыдущей версии цвета фона, с обводкой, без тени и подъёма; наведение даёт только лёгкую белую
     заливку, правка владельца 06.09.2026. */
  .build-card[data-variant="previous"] {
    --build-card-shadow: none;
    --build-card-shadow-hover: none;
    --build-card-lift: 0px;

    border: 1px solid var(--color-border);
    background: var(--color-page);
  }

  /* Белая заливка в четверть силы. */
  a.build-card[data-variant="previous"]:is(:hover, :active) { background: var(--color-surface-veil); }

  /* Заголовок предыдущей версии, номер с каналом, мельче свежего; вес и стрелка рядом приглушены. */
  .build-card[data-variant="previous"] .build-title {
    --build-title-size: 16px;
    --build-title-tracking: -0.01em;
  }

  .build-card[data-variant="previous"] .build-size,
  .build-card[data-variant="previous"] .build-arrow { color: var(--color-text-secondary); }

  /* Плитка вместо картинки приложения: квадрат приглушённого цвета со знаком архива.
     Сторона 80 равна видимому телу `.build-app-image`. */
  .build-tile {
    --build-tile-size: 80px;
    --build-tile-glyph: 28px;

    display: grid;
    place-items: center;
    flex: none;
    width: var(--build-tile-size);
    height: var(--build-tile-size);
    border-radius: var(--radius-image);
    background: var(--color-accent-soft);
    color: var(--color-accent-glyph);
  }

  .build-tile svg { width: var(--build-tile-glyph); height: var(--build-tile-glyph); }

  /* ── вход ─────────────────────────────────────────────────────────────────── */

  /* Форма входа `.signin-form` кита, как в приложении, без карточки, поле `data-variant="raised"`.
     Форма стоит посередине высоты страницы за вычетом полей `body`. */
  .download-signin {
    display: grid;
    align-content: center;
    min-height: calc(100dvh - var(--page-padding) * 2 - var(--page-bottom-share));
    width: 100%;
  }
}