/* Страница загрузки клиента. Одна карточка по центру пустой страницы, больше на ней нет ничего.
 *
 * Свой маленький словарь, а не кит клиента. Кит собран под окно приложения: там сайдбар, полосы,
 * таблицы и полсотни ролей, из которых здесь нужны четыре. Тянуть его целиком ради одной карточки
 * значит завести у страницы зависимость, которая будет меняться вместе с окном и ломать её без
 * повода. Значения повторены сознательно и названы здесь же.
 *
 * Тёмной темы у страницы нет намеренно. Её открывают один раз, чтобы скачать файл, и вид карточки
 * задан владельцем прямо: белая на светло-сером.
 */

:root {
  color-scheme: light;

  --фон: #f3f4f6;
  --карточка: #ffffff;
  --текст: #1a1c1f;
  --текст-тусклый: #6b7280;
  --текст-бледный: #9ca3af;
  /* Поле белое, а не серое. На карточке серое отделялось бы от белой подложки, но форма входа
     стоит прямо на сером фоне страницы, и серое поле на нём сливается с ним начисто. */
  --поле: #ffffff;
  --марка: #ffdd2d;
  --марка-текст: #333333;
  --марка-наведение: #f8d21e;
  --марка-нажатие: #edc417;
  --сбой: #d64545;
  --обводка-фокуса: #c8cdd4;

  --радиус: 20px;
  --радиус-поля: 12px;
  --знак: 76px;
  /* Знак над формой входа. Тот же размер, что в окне приложения: страница и окно показывают одну
     и ту же марку, и разные размеры читались бы как две разные вещи. */
  --знак-входа: 44px;
  /* Отступ знака от формы больше общего шага: вплотную знак читается частью формы. */
  --знак-отступ: 44px;

  --шрифт: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui,
    sans-serif;

  /* Тень собрана из двух слоёв. Ближний отделяет карточку от фона, дальний даёт ей вес; одним
     слоем получается либо обводка, либо клякса. Значения слабые намеренно — владелец просил тень
     мягкую и еле заметную. */
  --тень: 0 1px 2px rgba(16, 20, 28, .04), 0 10px 28px rgba(16, 20, 28, .07);
  /* Наведение заметно контрастнее покоя: карточка целиком и есть кнопка, и отклик у неё один на
     всю площадь. Слабая разница на такой площади не читается вовсе. */
  --тень-наведения: 0 3px 6px rgba(16, 20, 28, .07), 0 22px 52px rgba(16, 20, 28, .16);
}

* { box-sizing: border-box; }

/* Содержимое стоит выше геометрической середины. Ровный центр по числу читается ниже центра
   глазом, и карточка кажется съехавшей вниз — замер 03.09.2026 показал ровно 320 из 640, а
   владелец всё равно назвал это «не по центру». Подъём задан разницей полей долей высоты: окно
   тянут, и постоянное число на высоком окне подняло бы карточку к самой шапке. */
body {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100dvh;
  margin: 0;
  padding: 24px 24px calc(24px + 6vh);
  background: var(--фон);
  color: var(--текст);
  font-family: var(--шрифт);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* Карточка одна на оба состояния страницы, вход и загрузку. Ширина у них разная только потому,
   что форма уже: два поля в столбик читаются хуже, когда растянуты на всю карточку загрузки. */
.карточка {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Ширина считается от окна, а не долей от места. Колонка сетки у страницы авторазмерная, и
     `100%` внутри неё разрешается в ширину самого содержимого — предел в пикселях тогда не
     срабатывает вовсе, а карточка молча остаётся по размеру текста. */
  width: min(520px, calc(100vw - 48px));
  padding: 22px 24px;
  border-radius: var(--радиус);
  background: var(--карточка);
  box-shadow: var(--тень);
  color: inherit;
  text-decoration: none;
}

/* Вся карточка и есть кнопка: отдельной кнопки владелец не просил, а два места для нажатия на
   одной карточке всегда оставляют вопрос, куда именно жать. Курсор здесь стрелка, как в
   приложении, а не палец: страница выглядит окном, а не сайтом со ссылками. */
a.карточка {
  cursor: default;
  transition: box-shadow .18s ease, transform .18s ease;
}

a.карточка:hover { box-shadow: var(--тень-наведения); transform: translateY(-1px); }
a.карточка:active { box-shadow: var(--тень); transform: translateY(0); }

.знак {
  flex: none;
  width: var(--знак);
  height: var(--знак);
  /* Картинка приложения несёт собственную тень с полями по краям. Отрицательные поля убирают
     воздух, который иначе читается как лишний отступ слева и сверху. */
  margin: -6px;
}

.подписи { min-width: 0; }

.заголовок {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Подзаголовок не переносится: три коротких факта о файле, разорванные по строкам, читаются как
   список, а не как одна подпись. Карточка вместо этого шире. */
.подзаголовок {
  margin: 6px 0 0;
  overflow: hidden;
  color: var(--текст-тусклый);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Размер и дата отделены точкой-разделителем, а не запятой: это три равноправных факта о файле,
   а не перечисление внутри одной мысли. */
.подзаголовок .точка { margin: 0 6px; color: var(--текст-бледный); }

/* Стрелка загрузки прижата к правому краю карточки. Своего нажатия у неё нет, она только
   называет, что случится по нажатию на карточку. */
.стрелка {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: auto;
  opacity: .9;
}

/* ── вход ───────────────────────────────────────────────────────────────────
   Карточки у формы входа нет. Карточка отделяет предмет от того, что лежит вокруг, а вокруг формы
   пусто: страница до входа не показывает больше ничего. Правило то же, по которому карточку сняли
   с экрана входа в самом приложении. */

.вход {
  display: grid;
  justify-items: center;
  gap: var(--знак-отступ);
}

.вход .знак-марки {
  width: auto;
  height: var(--знак-входа);
}

.вход form {
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 48px));
}

.поле {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--радиус-поля);
  background: var(--поле);
  color: var(--текст);
  font: inherit;
  appearance: none;
}

.поле::placeholder { color: var(--текст-бледный); }

/* Обводка внутренней тенью, а не контуром: контур лежит снаружи коробки и на поле со скруглением
   выпирает за его край. */
.поле:focus { outline: none; box-shadow: inset 0 0 0 1px var(--обводка-фокуса); }

.кнопка {
  height: 44px;
  margin-top: 6px;
  border: 0;
  border-radius: var(--радиус-поля);
  background: var(--марка);
  color: var(--марка-текст);
  font: inherit;
  font-weight: 500;
  cursor: default;
}

.кнопка:hover:not(:disabled) { background: var(--марка-наведение); }
.кнопка:active:not(:disabled) { background: var(--марка-нажатие); }
.кнопка:disabled { opacity: .55; }

/* Место под отказ занято всегда: появление строки иначе двигает кнопку ровно тогда, когда по ней
   собираются нажать второй раз. */
.отказ {
  margin: 0;
  min-height: 18px;
  color: var(--сбой);
  font-size: 12px;
  text-align: center;
}