/* Минимальные добавки поверх дизайна Stitch.
   Всё оформление приходит из tokens.css и стилей макетов — здесь только то,
   без чего страница не работает как приложение, а не как витрина. */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

/* Каркас был нарисован как макет телефона внутри страницы-витрины.
   В приложении он занимает весь экран. */
body > div[class*="w-[390px]"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

#screen { min-height: 0; }
#screen:focus { outline: none; }

/* На широком экране контент не растягивается на всю ширину монитора:
   длинные клинические описания нечитаемы строкой в 1900 пикселей. */
@media (min-width: 1024px) {
  body > div[class*="w-[390px]"] { max-width: 1120px !important; margin: 0 auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}