/* TundraLabs — финальный visual polish.
 *
 * Этот слой намеренно не меняет контент, цены и поведение продукта. Он собирает
 * уже существующие страницы в одну более цельную материальную систему: тёмный
 * графит, аккуратный фирменный акцент, читаемые уровни поверхности и спокойная
 * тактильная реакция. Все эффекты работают только через opacity/transform и
 * отключаются системной настройкой reduced motion.
 */

/* Кто за что отвечает в трёх «финальных» слоях — они грузятся подряд, и без
 * этой договорённости одно и то же правило оказывается в двух файлах сразу:
 *
 *   polish.css        — эргономика: безопасные зоны, размеры зон нажатия,
 *                       перестроение hero-полосы на узком экране.
 *   brand-system.css  — знак и сцена бренда: логотип, печать, схема доступа.
 *   experience.css    — общий материал публичных страниц, свет за курсором,
 *                       реакция на наведение и нажатие.
 *
 * Правило живёт ровно в одном из них. Если нужно поменять вид компонента —
 * меняем у хозяина, а не дописываем перекрытие в файл, который грузится
 * позже: именно так три слоя и разъехались. */

/* iPhone не должен давать стандартную серую вспышку поверх фирменных кнопок. */
a, button, input, select, summary { -webkit-tap-highlight-color: transparent; }

/* Поверхности получают свет сверху и мягкую глубину снизу, а не тяжёлые
 * градиенты. Это работает на всех публичных страницах и не создаёт новую тему. */
.card,
.panel,
.install-picker,
.install-panel,
.code,
.drawer {
  background-image:
    linear-gradient(180deg, var(--c-surface-highlight), transparent 5.5rem),
    linear-gradient(112deg, transparent 58%, var(--c-surface-shade));
}

.card--raised,
.install-picker,
.install-panel,
.drawer {
  box-shadow: var(--sh-float);
}

.card::before,
.install-picker::before,
.install-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.018);
}

/* Нажатие на вкладках установщика. Кнопки, чипы и бургер получают свой
   press ниже по каскаду, в experience.css — держать их ещё и здесь значит
   иметь два разных ответа на один вопрос. */
.install-tabs button:active {
  transform: translateY(1px) scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  .card--interactive,
  .install-app,
  .nav__link,
  .nav-toggle,
  .btn,
  .chip {
    will-change: transform;
  }

  .header[data-scrolled="true"] .header__inner:hover {
    border-color: var(--c-border-strong);
  }

  .install-app:hover {
    transform: translateX(2px);
    border-color: var(--c-border-strong);
  }

  .btn--hero:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-inset-top), 0 12px 26px color-mix(in srgb, var(--c-accent-dim) 23%, transparent);
  }
}

/* Шапка выглядит как цельный floating object и не теряет воздушность в hero. */
.header {
  padding-top: max(var(--s-3), env(safe-area-inset-top));
}

.header__inner {
  position: relative;
  isolation: isolate;
}

.header[data-scrolled="true"] .header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.035), transparent 38%, color-mix(in srgb, var(--c-accent) 4.5%, transparent));
}

.nav__link[aria-current="page"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Приводим интерактивные списки к одной логике: выбранное состояние видно
 * линией и тоном, но основной фон остаётся спокойным. */
.install-app[aria-pressed="true"] {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c-accent) 48%, transparent), var(--sh-inset-top);
}

.install-app[aria-pressed="true"] .install-app__mode {
  color: var(--c-accent);
}

.install-app__icon {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 5px 13px rgba(0, 0, 0, 0.18);
}

/* Главная: статусная полоса выглядит как единый data rail, а не три случайные
 * цифры. На мобильном сохраняются два плотных столбца без горизонтального
 * выезда за край. Сама панель и её сетка описаны в experience.css. */
.hero__inner,
.hero__strip { position: relative; z-index: 1; }

.hero__stat {
  min-width: 0;
  padding-inline: var(--s-3);
}

.hero__stat + .hero__stat {
  border-left: 1px solid var(--c-glass-border);
}

.hero__stat-value {
  text-shadow: 0 1px 18px color-mix(in srgb, var(--c-accent) 12%, transparent);
}

/* Контрастная граница помогает пользователю заметить настоящее действие,
 * но не превращает интерфейс в набор неоновых панелей. */
.btn--secondary,
.btn--ghost,
.nav-toggle {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

@media (pointer: coarse) {
  .btn--sm { --btn-h: 2.5rem; }
  .nav-toggle { width: 2.5rem; height: 2.5rem; }
  .chip { min-height: 2.25rem; }
  .install-app { min-height: 4.5rem; }
}

@media (max-width: 34rem) {
  .header { padding-inline: 0; }
  .header__inner { padding-left: var(--s-3); }

  .hero__panel { border-radius: var(--r-xl); }
  .hero__inner { padding-inline: var(--s-5); }
  .hero__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) 0;
    padding: var(--s-3) var(--s-2);
  }
  .hero__stat { padding: var(--s-2) var(--s-3); }
  .hero__stat:nth-child(odd) { border-left: 0; }
  .hero__stat:nth-child(n + 3) { border-top: 1px solid var(--c-glass-border); }
  .hero__stat-label { line-height: 1.25; }

  .install-picker,
  .install-panel { border-radius: var(--r-lg); }
  .install-app { border-radius: var(--r-md); }
}

@media (prefers-reduced-motion: reduce) {
  .card--interactive,
  .install-app,
  .btn,
  .chip,
  .nav-toggle { transition: none; }
}