/* Отклик и «живость»: нажатия, окно записи, загрузка, переходы страниц, щадящий режим. Подключать последним. */

a,
button,
label {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Нажатие (на iOS :active работает благодаря touchstart в app.js) ---------- */
.btn,
.chip,
.kpi,
.payment-chip span,
.week-day,
.calendar-event {
  transition: transform var(--press) var(--ease-out), background-color var(--press) ease, filter var(--press) ease;
}

.btn:active,
.chip:active,
a.kpi:active,
.payment-chip:active span {
  transform: scale(.97);
}

.btn.primary:active { background: var(--accent-hover); }
.calendar-event:active { transform: scale(.98); filter: brightness(.95); }
.week-day:active { transform: scale(.92); }
.tab:active .icon { transform: scale(.9); }

.list-row,
.upcoming-row {
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

a.list-row:active,
button.list-row:active,
button.upcoming-row:active {
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 0 0 10px var(--surface-2);
}

/* ---------- Окно записи: снизу на телефоне, проявляется на компьютере. Закрытие мгновенное. ---------- */
.sheet-dialog[open] {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 280ms var(--ease-drawer);
}

.sheet-dialog[open]::backdrop {
  opacity: 1;
  transition: opacity 200ms ease;
}

@starting-style {
  .sheet-dialog[open] { opacity: 0; transform: translateY(16px) scale(.98); }
  .sheet-dialog[open]::backdrop { opacity: 0; }
}

@media(max-width:679px) {
  @starting-style {
    .sheet-dialog[open] { opacity: 1; transform: translateY(100%); }
  }
}

/* Окно открывается сразу по нажатию, пока идёт запрос */
.sheet-loading {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 48px 0 56px;
  color: var(--muted);
  font-size: 15px;
}

.sheet-loading::before {
  content: "";
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* Смена содержимого окна (запись → закрыть визит): мягкая подмена, htmx ставит .htmx-added */
#sheet-content > * { transition: opacity 160ms ease; }
#sheet-content > .htmx-added { opacity: 0; }

.toast {
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

@starting-style {
  .toast { opacity: 0; transform: translateY(-8px); }
}

/* ---------- Загрузка ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes reveal { to { opacity: 1; } }
@keyframes nav-progress { from { transform: scaleX(0); } to { transform: scaleX(.85); } }

/* Кнопка, по которой идёт запрос: кольцо через 150 мс, быстрые ответы не мигают */
.btn.htmx-request,
form.htmx-request .btn.primary {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.htmx-request::after,
form.htmx-request .btn.primary::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0;
  animation: spin 650ms linear infinite, reveal 1ms 150ms forwards;
}

.btn.primary.htmx-request::after,
form.htmx-request .btn.primary::after {
  border-color: var(--accent-ink);
  border-right-color: transparent;
}

/* Строка или событие, открывающее окно: приглушить, пока грузится */
.upcoming-row.htmx-request,
.calendar-event.htmx-request,
.list-row.htmx-request {
  opacity: .55;
  transition: opacity 150ms ease 120ms;
}

/* Полоса сверху при переходе: в приложении с экрана «Домой» своей полосы загрузки нет */
html.is-leaving::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: var(--accent);
  transform-origin: left;
  animation: nav-progress 2.4s var(--ease-out) 120ms both;
}

/* ---------- Переходы страниц без вспышки (Safari 18.2+, Chrome 126+; в старых — обычный переход) ---------- */
@view-transition { navigation: auto; }

.tab-bar { view-transition-name: tab-bar; }
.sidebar { view-transition-name: sidebar; }
.mobile-top { view-transition-name: top-bar; }
.floating-action { view-transition-name: fab; }

::view-transition-group(tab-bar),
::view-transition-group(sidebar),
::view-transition-group(top-bar),
::view-transition-group(fab) { animation: none; }

::view-transition-old(root) { animation: 120ms ease-out both vt-out; }
::view-transition-new(root) { animation: 200ms var(--ease-out) both vt-in; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Меньше движения: прозрачность и цвет остаются, сдвигов и масштаба нет ---------- */
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }

  html {
    scroll-behavior: auto;
  }

  .sheet-dialog[open] { transition: opacity 150ms ease; }

  @starting-style {
    .sheet-dialog[open] { transform: none; }
    .toast { transform: none; }
  }

  .btn:active,
  .chip:active,
  a.kpi:active,
  .payment-chip:active span,
  .calendar-event:active,
  .week-day:active,
  .tab:active .icon { transform: none; }

  .sheet-loading::before { animation-duration: 1.6s; }

  html.is-leaving::before { animation-duration: 1ms; transform: scaleX(.85); }
}