/* =============================================================================
   Vault — постраничные дополнения к app.css.
   Здесь только то, что нужно одной-двум страницам: раскладка первого экрана,
   экран входа, страница ошибки, служебные хелперы ширины.
   Инлайновых стилей на страницах нет — политика безопасности их запрещает,
   поэтому любые проценты и позиционирование живут классами здесь.
   ========================================================================== */

/* Контейнер для inline-<symbol> и SVG-фильтра: не занимает места, не мешает. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Первый экран обзора -------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--sp-4xl);
  padding-bottom: var(--sp-4xl);
}

.hero__in {
  position: relative;
  z-index: 2;
}

/* В app.css правило `.tinted > *` поднимает всех прямых детей в relative,
   и с той же специфичностью гасит `position: absolute` у фоновых слоёв —
   сетка начинает занимать место в потоке и уносит контент вниз.
   Возвращаем слоям абсолютное позиционирование более специфичным селектором. */
.tinted > .tilebg,
.tinted > .vignette {
  position: absolute;
}

/* Плитки из app.css рассчитаны на крупную сетку. Для первого экрана и экрана
   входа нужна мелкая фактура, иначе плитка читается как обои, а не как фон. */
.tilebg--fine {
  grid-template-rows: repeat(9, 1fr);
  gap: 12px;
  opacity: 0.34;
}

.tilebg--fine .tilebg__row {
  grid-template-columns: repeat(14, 1fr);
  gap: 12px;
}

.hero h1 {
  max-width: 15ch;
}

.hero .lede {
  max-width: 46ch;
}

@media (max-width: 900px) {
  .hero .mock {
    display: none;
  }
}

/* Таблица внутри макета кабинета живёт в узкой колонке: базовый min-width
   в 520px обрезал бы правые столбцы. Здесь он не нужен — колонок мало. */
.mock table {
  min-width: 0;
}

.mock table td {
  padding: 7px 10px;
}

/* --- Полосы прогресса: ширина классом, не атрибутом ----------------------- */

.progress--28 > i {
  width: 28%;
}
.progress--47 > i {
  width: 47%;
}
.progress--63 > i {
  width: 63%;
}
.progress--91 > i {
  width: 91%;
}

/* --- Экран входа ---------------------------------------------------------- */

.enter {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--sp-4xl) var(--sp-lg);
}

.enter__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 428px;
  padding: var(--sp-3xl);
}

.enter__mark {
  width: 42px;
  height: auto;
  color: var(--text-primary);
  margin-bottom: var(--sp-lg);
}

.enter__card h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-sm);
}

.enter__card .lede {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2xl);
}

.enter__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-xl);
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}

@media (max-width: 480px) {
  .enter__card {
    padding: var(--sp-xl);
  }
}

/* --- Страница ошибки ------------------------------------------------------ */

.oops {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: var(--sp-4xl) 0;
}

.oops__code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-faint);
  letter-spacing: 2px;
  margin-bottom: var(--sp-md);
}

/* Второй заголовок в оглавлении документации прижимался к списку: у
   `.doc__toc h2` margin задан шорткатом, и он перебивает утилиту .mt-xl. */
.doc__toc h2.mt-xl {
  margin-top: var(--sp-xl);
}

/* --- Переключатель темы в футере ------------------------------------------ */

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color var(--t-normal), border-color var(--t-normal);
}

.theme-switch:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* --- Мелочи --------------------------------------------------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-lg);
  margin-top: var(--sp-lg);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.legend i.ok {
  background: var(--ok);
  opacity: 0.72;
}
.legend i.warn {
  background: var(--warn);
}
.legend i.err {
  background: var(--error);
}