/* pwa.css — экран звонка, подсказка об установке и уведомлениях, шаги
   установки, окно подтверждения. Основной вид приложения — css/styles.css;
   здесь добавки в том же языке: без коробок с тенью, строки на линейках,
   тёмные капсулы. */

/* ── Вход: кнопки по центру ───────────────────────────────────── */
/* Одной ширины, как пара кнопок на «Связи» (264px). */
html:root .auth-card .btn {
  display: flex; width: 264px; max-width: 100%;
  margin-inline: auto; align-self: center; justify-content: center; gap: 8px;
}
.auth-card .btn .ic { width: 18px; height: 18px; }
/* Значок трубки в поле номера и на экране кода */
.auth-logo { color: var(--forest); }

/* ── Подсказка вверху Главной (установка, уведомления) ────────── */
.pwa-hint {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.pwa-hint .ph-ic { flex: 0 0 auto; color: var(--forest); display: flex; }
.pwa-hint .ph-txt { flex: 1 1 auto; min-width: 0; }
.pwa-hint .ph-t { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pwa-hint .ph-s { font-size: 12px; color: var(--ink3); line-height: 1.4; margin-top: 2px; }
html:root .pwa-hint .ph-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 13px; align-self: center; }
.pwa-hint .ph-x {
  flex: 0 0 auto; width: 32px; height: 32px; margin-right: -8px;
  border: 0; background: none; color: var(--ink3); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.pwa-hint .ph-x:active { background: var(--bg-soft); }
/* Сразу под строкой — карточка со своей верхней линией: вторая не нужна. */
.pwa-hint.no-rule { border-bottom: 0; padding-bottom: 4px; }
@media (max-width: 360px) {
  .pwa-hint { flex-wrap: wrap; }
  .pwa-hint .ph-txt { flex-basis: calc(100% - 80px); }
}

/* ── Шаги установки на iPhone ─────────────────────────────────── */
.install-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
.install-step:last-child { border-bottom: 0; }
.install-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--p-base, #fff);
  font-family: var(--font-serif); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ── Заставка при запуске ────────────────────────────────────────
   Лежит поверх приложения (выше таб-бара и окон), пока оно собирается под
   ней; уходит плавно — классом .out из инлайн-скрипта в index.html. */
.boot-splash {
  z-index: 120;
  background: var(--p-base, var(--bg));
  transition: opacity .4s var(--ease-out), visibility 0s linear .4s;
}
.boot-splash.out { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── «Вышла новая версия · Обновить» ─────────────────────────────
   Появляется, когда новая версия уже скачана, а перезагрузить сами не можем:
   человек что-то делает. Над таб-баром, по центру; под шторками. */
.update-bar {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; z-index: 40;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 11px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--p-base, #fff);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  animation: fade .2s ease;
}
.update-bar b { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Переключатель, пока ждём ответа браузера или сервера ─────── */
.ios-switch[disabled] { opacity: .5; pointer-events: none; }

/* ── Окно подтверждения (вместо системного confirm) ───────────── */
.confirm-backdrop {
  position: absolute; inset: 0; z-index: 90;
  background: rgba(20, 30, 25, .4);
  display: flex; align-items: center; justify-content: center;
  padding: 24px var(--screen-pad);
  opacity: 0; transition: opacity .18s ease;
}
.confirm-backdrop.show { opacity: 1; }
.confirm-box {
  width: 100%; max-width: 360px;
  background: var(--glass-strong, #fff); border-radius: 24px;   /* как у шторок */
  padding: 24px 22px 20px;
  transform: scale(.96); transition: transform .2s cubic-bezier(.3, .8, .3, 1);
}
.confirm-backdrop.show .confirm-box { transform: scale(1); }
.confirm-text { font-size: 15px; line-height: 1.5; color: var(--ink); }
.confirm-actions { display: flex; gap: 10px; margin-top: 20px; }
html:root .confirm-actions .btn { flex: 1 1 0; min-width: 0; padding: 13px 16px; align-self: stretch; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .confirm-backdrop, .confirm-box { transition: none; }
}