/* База: сброс, типографика, состояния фокуса, скроллбар, анимации макета. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--base-size);
  /* Safari на iOS: адресная строка сжимается на ходу, и высота, посчитанная
     в vh, не совпадает с видимой областью — снизу остаётся пустая полоса.
     -webkit-fill-available даёт реальную высоту, dvh перекрывает его там, где
     поддерживается. */
  height: -webkit-fill-available;
  /* Оттянутая страница не должна показывать белое из-под фона */
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  /* Как в прототипе: межстрочный по умолчанию и обычное сглаживание.
     antialiased отключал субпиксельный рендер и делал текст заметно тоньше
     при тех же метриках шрифта. */
  line-height: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 22px;
}
h2 {
  font-size: 14px;
}
h3 {
  font-size: 15px;
}

p {
  margin: 0 0 var(--r-md);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-700);
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Атрибут hidden должен побеждать display из компонентных классов. */
[hidden] {
  display: none !important;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 110, 130, 0.28);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 110, 130, 0.45);
  background-clip: padding-box;
}

/* Приложение с домашнего экрана: полос прокрутки не показываем нигде — ни у
   страницы, ни у логов, панелей и модалок. Полоса сразу выдаёт веб: в
   нативных списках её нет, а что список прокручивается, видно по содержимому.
   Признак ставит app.js: медиазапросу `display-mode` старые iOS не отвечают,
   там есть только navigator.standalone. */
html[data-standalone],
html[data-standalone] * {
  scrollbar-width: none;
  /* Место под полосу держать больше не нужно: без неё резерв — просто поле,
     из-за которого содержимое стоит не по центру */
  scrollbar-gutter: auto;
}

html[data-standalone]::-webkit-scrollbar,
html[data-standalone] *::-webkit-scrollbar {
  display: none;
}

/* Долгое нажатие на элемент управления в нативном приложении ничего не
   выделяет и не подсвечивает; текст и значения выделяются как раньше —
   адреса и ключи из интерфейса копируют */
html[data-standalone] :is(a, button, .nav-item, .tab, .seg-opt, .console-btn) {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* — анимации макета — */

@keyframes pa-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@keyframes pa-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pa-bar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

@keyframes pa-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes pa-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* То же появление без сдвига: на страницу высотой во весь экран сдвиг вниз
   вылезает за скроллер, и на время анимации мигает полоса прокрутки */
/* Окно, выезжающее снизу: лог задачи на телефоне. Сдвиг в пикселях, а не в
   процентах высоты: в фоновой вкладке анимации замирают на первом кадре, и от
   процента окно уезжало бы вниз на добрую сотню пикселей вместе с кнопками */
@keyframes pa-sheet {
  from {
    transform: translateY(28px);
  }

  to {
    transform: none;
  }
}

@keyframes pa-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}