/* ═════ Sentos · Вход, регистрация и экран установки ═════
   Правила те же, что во всём приложении: единственный акцент,
   пилюльная геометрия, никаких рамок и теней, группировка
   расстоянием и тональными заливками.

   На компьютере форма лежит в отдельном тональном блоке, на телефоне
   блок раскрывается в фон страницы, а сама форма стоит чуть выше
   геометрического центра: под ней остаётся место для клавиатуры. */

.auth,
.gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--page);
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.auth-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  height: 60px;
}

.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Ошибки не подписываются под полями: они собираются в одно
   уведомление под шапкой. Так человек читает их в одном месте, а не
   собирает взглядом по форме. */
.auth-alert {
  flex: none;
  max-width: 372px;
  width: 100%;
  margin: 0 auto 4px;
  padding: 10px 16px;
  border-radius: 16px;
  background: var(--error-50);
  color: #a52020;
  font-size: 13px;
  animation: auth-alert-in 220ms var(--ease);
}

:root.dark .auth-alert {
  background: var(--error-950);
  color: #ff8a8a;
}

@keyframes auth-alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.auth-stage {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

.auth-panel {
  width: 100%;
  max-width: 372px;
  /* Чуть выше центра: ровно по центру форма кажется опущенной, а на
     телефоне её накрывает клавиатура. */
  transform: translateY(-4vh);
}

.auth-title {
  margin: 0 0 6px;
  font-family: "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.auth-lead {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-field {
  height: 46px;
  background: var(--field);
}

.auth-field-action { padding-right: 4px; }

.field-action {
  width: 38px;
  height: 38px;
  color: var(--muted);
}

/* Ошибочное поле — своя заливка и красная подсказка: одного текста
   сверху мало, надо видеть, куда возвращаться. */
.auth-field:has(input[aria-invalid="true"]) {
  background: var(--error-50);
}

:root.dark .auth-field:has(input[aria-invalid="true"]) {
  background: var(--error-950);
}

.auth-field input[aria-invalid="true"]::placeholder { color: var(--error-500); }

.auth-submit {
  height: 46px;
  margin-top: 6px;
}

.auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Луна и солнце меняются так же, как микрофон в звонке: уходящая
   иконка сжимается, приходящая вырастает на её месте. */
.theme-icons .icon-off { display: none; }
:root.dark .theme-icons .icon-on { display: none; }
:root.dark .theme-icons .icon-off { display: block; }

/* ─────────────────── Экран установки ───────────────────
   Не декоративный экран: на iOS уведомления приходят только в
   приложении, добавленном на главный экран, — во вкладке Safari их
   не существует. На Android установка тоже не формальность: вкладку
   система усыпляет охотнее, чем отдельное приложение.

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

.gate {
  align-items: center;
  justify-content: center;
  z-index: 45;
  /* На коротком экране (iPhone SE, ландшафт) карточка выше окна.
     Пусть прокручивается вся страница: обрезать нижнюю кнопку нельзя,
     без неё из экрана не выйти. */
  overflow-y: auto;
}

.gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 372px;
  /* auto вместо центрирования флексом: при переполнении флекс срезает
     верх карточки, и до неё уже не долистать. */
  margin: auto;
  text-align: center;
}

/* Иконка приложения — та же, что ляжет на главный экран. Скругление
   как у значков системы, не круг: круглым значок не станет ни на
   Android, ни на iOS, и обещать этого не нужно. */
.gate-icon {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 22px;
}

.gate-title {
  margin: 18px 0 6px;
  font-family: "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.4px;
}

.gate-lead {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Три колонки, а не список строк: подписи короткие, и в столбик они
   растянули бы экран на пустом месте — а под ними ещё шаги и кнопка. */
.gate-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.gate-perks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 12px;
  border-radius: 20px;
  /* На телефоне блок лежит прямо на фоне страницы, а --field от него
     в светлой теме отличается на один тон из 255 — плитки пропадали.
     Правило в проекте общее: на странице --panel, внутри окна --field
     (см. .theme-card и .list-group в settings.css). */
  background: var(--panel);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.2;
}

.gate-perk-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.gate-perk-icon .icon {
  width: 18px;
  height: 18px;
}

/* Шаги нужны там, где кнопки не будет никогда: на iOS добавляет на
   экран сам человек, и три строки — это весь путь. */
.gate-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  /* Номера считает браузер, а не разметка: средний шаг виден только на
     iOS 26, и с проставленными руками цифрами на прежних версиях
     получилось бы «1, 3». Скрытый шаг счётчик не увеличивает. */
  counter-reset: gate-step;
}

.gate-steps li {
  counter-increment: gate-step;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--panel);
  font-size: 13px;
  line-height: 1.4;
}

.gate-steps b { font-weight: 500; }

.gate-steps .icon,
.gate-hint .icon {
  display: inline-block;
  vertical-align: -3px;
  color: var(--muted);
}

.gate-step-num::before { content: counter(gate-step); }

.gate-step-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

/* Кнопка на всю ширину: это главное действие экрана, и промахнуться
   мимо неё нельзя. */
.gate-install {
  gap: 8px;
  width: 100%;
  height: 48px;
  /* Появляется не сразу — браузер решает, можно ли ставить приложение,
     уже после загрузки. Растворение, а не рывок. */
  animation: gate-install-in 240ms var(--ease);
}

@keyframes gate-install-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Запасной путь на Android — строка, а не шаги: рядом с кнопкой три
   пронумерованных пункта читались бы как второй, настоящий способ. */
.gate-hint {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.gate-hint b {
  color: var(--text-soft);
  font-weight: 500;
}

.gate-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.gate-note.warn { color: var(--danger); }

.gate-note:empty { display: none; }

/* Отказ — .text-btn, как и задумано в app.css. Заливки у неё нет, но
   промахнуться нельзя: расширяем область нажатия, а не рисуем вторую
   кнопку рядом с главной. */
.gate-skip {
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  margin-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .gate-install { animation-duration: 1ms; }
}

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

   Экрана установки на компьютере не бывает (pwa.js его не показывает),
   но правила ему заданы: в узком окне браузера на ПК его видно при
   отладке, и он не должен разъезжаться. */

@media (min-width: 760px) {
  .auth-panel,
  .gate-card {
    padding: 32px 32px 28px;
    border-radius: 28px;
    background: var(--panel);
  }

  .auth-panel { max-width: 436px; }

  .auth-field,
  .gate-steps li,
  .gate-perks li { background: var(--field); }
}

/* ───────── Приглашение в группу ─────────
   Та же сцена, что у входа, только вместо формы — карточка группы:
   фото, «Вас пригласили в группу», название, сколько людей, описание и
   две кнопки во всю ширину. */
.invite-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.invite-panel .avatar { margin-bottom: 14px; overflow: hidden; }
.invite-panel .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.invite-lead { margin-bottom: 6px; }

.invite-count {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.invite-about {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
}

.invite-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 24px;
}

.invite-btn {
  width: 100%;
  text-decoration: none;
}

.invite-btn[hidden] { display: none; }