/*
 Нативный слой (native.js): касание, переходы, листы, «потянуть — обновить», суммы.
 Подключается после style.css и правит только то, что выдаёт «это сайт».
*/

/* ─── касание ───
   Долгое нажатие на кнопке не выделяет подпись и не открывает меню ссылки, двойной тап
   не приближает страницу. Текст в полях, таблицах и карточках выделяется как раньше —
   IMEI и телефон должны копироваться. */
html.nv { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
html.nv :is(button, a, label, summary, nav, header, img, svg, [role="button"], [role="tab"],
  .saroom, .sabar, .sasegs, .sasheet__card, .satile, .chip, .pill, .tag) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
html.nv :is(input, textarea, [contenteditable]) { -webkit-user-select: text; user-select: text; }

/* Нажатие видно сразу, пальцем, а не после отпускания. scale, а не transform: у части
   кнопок transform уже занят положением, и он бы сбросился. */
@media (hover: none) {
  html.nv :is(button, a[href], [role="button"], summary, .satile, .sastage__i):not(:disabled) {
    transition: scale 120ms ease, opacity 120ms ease, background-color 160ms;
  }
  html.nv :is(button, [role="button"], .satile, .sastage__i):not(:disabled):active { scale: .96; }
  html.nv :is(a[href], summary):active { opacity: .55; }
  html.nv .saroom :is(a, button):active { scale: .9; }
}

/* Поле меньше 16px iPhone приближает при фокусе — и страница остаётся увеличенной. */
@media (max-width: 760px) {
  html.nv :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: max(16px, 1em); }
}

/* Невидимый системный переключатель — источник щелчка на iPhone. */
.nv-haptic { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ─── переходы между экранами ───
   Панели стоят, едет только содержимое. push — вглубь (карточка заявки), back — обратно,
   side — соседняя полка, fade — другой раздел. */
html.nv .saroom { view-transition-name: nv-dock; }
html.nv .sabar { view-transition-name: nv-bar; }
html.nv #toast { view-transition-name: nv-toast; }
::view-transition-group(*) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 340ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

html[data-nv="push"]::view-transition-old(root) { animation-name: nv-out-left; }
html[data-nv="push"]::view-transition-new(root) { animation-name: nv-in-right; }
html[data-nv="back"]::view-transition-old(root) { animation-name: nv-out-right; z-index: 2; }
html[data-nv="back"]::view-transition-new(root) { animation-name: nv-in-left; }
html[data-nv="side"]::view-transition-old(root) { animation: 200ms ease-in both nv-fade-out; }
html[data-nv="side"]::view-transition-new(root) { animation: 260ms cubic-bezier(.2, .8, .2, 1) both nv-rise; }
html[data-nv="fade"]::view-transition-old(root) { animation: 160ms ease-in both nv-fade-out; }
html[data-nv="fade"]::view-transition-new(root) { animation: 280ms cubic-bezier(.2, .8, .2, 1) both nv-rise; }

@keyframes nv-in-right { from { transform: translateX(100%); box-shadow: -20px 0 40px rgba(10, 11, 13, .18); } }
@keyframes nv-out-left { to { transform: translateX(-28%); filter: brightness(.92); } }
@keyframes nv-in-left { from { transform: translateX(-28%); filter: brightness(.92); } }
@keyframes nv-out-right { to { transform: translateX(100%); box-shadow: -20px 0 40px rgba(10, 11, 13, .18); } }
@keyframes nv-fade-out { to { opacity: 0; } }
@keyframes nv-rise { from { opacity: 0; transform: translateY(10px); } }

/* ─── окна: лист снизу ───
   На телефоне окно поднимается снизу и прилипает к нижнему краю — до кнопок дотягивается
   большой палец. Длинная форма прокручивается вместе с затемнением, как и раньше:
   margin-top: auto прижимает короткую карточку вниз, а длинную не обрезает сверху. */
@media (max-width: 560px) {
  html.nv .modal:not(.mwsheet):not(.printsheet) {
    display: flex; flex-direction: column; align-items: stretch;
    padding: calc(28px + env(safe-area-inset-top)) 0 0;
    background: rgba(10, 11, 13, calc(.5 * var(--nv-dim, 1)));
    backdrop-filter: none;
  }
  html.nv .modal:not(.mwsheet):not(.printsheet) > :first-child {
    margin: auto 0 0; max-width: none; width: 100%;
    border-radius: 26px 26px 0 0;   /* как у листа «Ещё» (.sasheet__card) */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    animation: nv-sheet-up 380ms cubic-bezier(.2, .9, .25, 1) both;
    transition: transform 280ms cubic-bezier(.2, .9, .25, 1);
  }
  /* Ручка: видно, что лист можно стянуть вниз. */
  html.nv .modal:not(.mwsheet):not(.printsheet) > :first-child::before {
    content: ''; display: block; width: 38px; height: 5px; margin: -6px auto 10px;
    border-radius: 9px; background: var(--line-strong);
  }
  html.nv .sasheet__card { transition: transform .34s cubic-bezier(.2, .9, .25, 1); }
}
@keyframes nv-sheet-up { from { transform: translateY(100%); } }

/* ─── потянуть — обновить ─── */
.nv-ptr {
  --p: 0;
  position: fixed; z-index: 80; left: 50%; top: calc(env(safe-area-inset-top) + 10px);
  width: 36px; height: 36px; margin-left: -18px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 6px 18px -6px rgba(10, 11, 13, .35), 0 0 0 1px var(--line);
  opacity: var(--p);
  transform: translateY(calc(var(--p) * 34px - 40px)) rotate(calc(var(--p) * 270deg));
  pointer-events: none;
}
.nv-ptr::after {
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  border: 2.5px solid var(--accent); border-right-color: transparent;
}
.nv-ptr.is-ready { background: var(--accent); }
.nv-ptr.is-ready::after { border-color: var(--accent-ink); border-right-color: transparent; }
.nv-ptr.is-spin { --p: 1; transition: none; }
.nv-ptr.is-spin::after { animation: nv-spin .7s linear infinite; }
@keyframes nv-spin { to { transform: rotate(360deg); } }

/* ─── суммы ─── */
[data-roll] { font-variant-numeric: tabular-nums; }
[data-roll].is-up { color: var(--go); transition: color .4s; }
[data-roll].is-down { transition: color .4s; }

/* ─── решение без ожидания ───
   «Разрешаю» — строка сразу зеленеет и складывается, сервер подтверждает уже в фоне.
   Ошибка вернёт строку на место (app.js снимает класс). */
.sadec__i { transition: opacity .3s, transform .3s, max-height .35s ease .15s, padding .35s ease .15s, margin .35s ease .15s; max-height: 400px; }
.sadec__i.is-yes, .sadec__i.is-no { pointer-events: none; }
.sadec__i.is-yes { background: var(--go-bg) !important; }
.sadec__i.is-yes .sadec__act, .sadec__i.is-no .sadec__act { opacity: 0; }
.sadec__i.is-gone { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.nv .modal > :first-child { animation: none; }
  .sadec__i, [data-roll] { transition: none; }
}

/* ─── дверь: Face ID ───
   Кнопка — светлая, над формой: на тёмной двери это первое, куда смотрит глаз.
   Пароль остаётся ниже, под «или паролем». */
body.door .door__card button.door__bio {
  width: 100%; margin: 4px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--surface); color: var(--ink); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6);
}
body.door .door__card button.door__bio:hover { filter: brightness(.96); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .6); }
.door__or {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 4px;
  color: #8e9a94; font-size: .82rem;
}
.door__or::before, .door__or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }

/* «Входить по Face ID?» — лист снизу поверх двери после входа паролем. */
.door__offer {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10, 11, 13, .5); animation: fade 160ms ease-out;
}
.door__offer-card {
  width: 100%; max-width: 440px; padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0; background: var(--surface); color: var(--ink);
  display: grid; gap: 10px; text-align: center;
  animation: nv-sheet-up 380ms cubic-bezier(.2, .9, .25, 1) both;
}
.door__offer-card b { font-size: 1.2rem; letter-spacing: -.01em; }
.door__offer-card p { margin: 0 0 8px; color: var(--ink-2); line-height: 1.5; }
.door__offer-card button { min-height: 50px; border-radius: 12px; font-size: 1rem; }
@media (min-width: 561px) { .door__offer { align-items: center; } .door__offer-card { border-radius: 26px; } }