/* =========================================================================
   Прототип WebView с четырёхнаправленной жестовой навигацией
   Слои: сброс → метрики viewport → сцена/слайды → блоки → служебные экраны
   ========================================================================= */

/* --- Метрики и базовые переменные -------------------------------------- */

:root {
  /* Высота приложения: 100dvh с fallback для WebView без динамических единиц
     (ТЗ §8). JS дополнительно подставляет px там, где dvh не поддержан. */
  --app-height: 100vh;

  /* Флюидные единицы, ограниченные шириной телефона: не дают тексту
     «раздуваться» при просмотре в desktop-браузере. Значения задаёт JS. */
  --u: 3.75px;   /* min(ширина слайда, 560) / 100 */
  --vh: 8px;     /* высота слайда / 100 — база для maxHeightVh */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --screen-bg: #10131a;
  --screen-fg: #f4f6fb;
  --screen-muted: #8b93a7;
  --accent: #76d7c4;
}

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

/* --- Сброс и запрет системных жестов ------------------------------------ */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--screen-bg);
  color: var(--screen-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Отключение нативного bounce/overscroll и выделения в области навигации
   (ТЗ §7.10). position: fixed страхует WebView от прокрутки страницы. */
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Сцена и слайды ------------------------------------------------------ */

.app {
  position: relative;
  width: 100%;
  height: var(--app-height);
  overflow: hidden;
}

.viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Фон совпадает с фоном слайда — исключает белые вспышки (ТЗ §11). */
  background: var(--screen-bg);
}

/* Сцена двигается целиком: текущий и целевой слайды следуют за пальцем 1:1
   (ТЗ §7.4). Анимируется только transform (ТЗ §7.9). */
.stage {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  background-color: #10131a;
  /* Позиция задаётся модификатором; собственных переходов у слайда нет,
     чтобы пересборка соседей проходила без видимого скачка (ТЗ §8). */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.slide--center { transform: translate3d(0, 0, 0); }
.slide--left   { transform: translate3d(-100%, 0, 0); }
.slide--right  { transform: translate3d(100%, 0, 0); }
.slide--up     { transform: translate3d(0, -100%, 0); }
.slide--down   { transform: translate3d(0, 100%, 0); }

/* Фоновое изображение и overlay (ТЗ §5.3) */

.slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.slide__bg--cover { object-fit: cover; }
.slide__bg--contain { object-fit: contain; }

.slide__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Контентная колонка */

.slide__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  /* safe area прибавляется к padding из JSON автоматически (ТЗ §5.4). */
  padding-top: calc(var(--pad-top, 24px) + var(--safe-top));
  padding-right: calc(var(--pad-right, 20px) + var(--safe-right));
  padding-bottom: calc(var(--pad-bottom, 24px) + var(--safe-bottom));
  padding-left: calc(var(--pad-left, 20px) + var(--safe-left));
}

.slide__column {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--max-content-width, 720px);
  margin-inline: auto;
  gap: var(--gap, 16px);
  /* Прокрутки внутри слайда нет по условиям прототипа (ТЗ §2.3). */
  overflow: hidden;
}

/* justify → главная ось, align → поперечная */
.slide__content[data-justify="start"] { justify-content: flex-start; }
.slide__content[data-justify="center"] { justify-content: center; }
.slide__content[data-justify="end"] { justify-content: flex-end; }
.slide__content[data-justify="space-between"] { justify-content: space-between; }
.slide__content[data-justify="space-between"] .slide__column { flex: 1 1 auto; justify-content: space-between; }

.slide__content[data-align="start"] { align-items: flex-start; }
.slide__content[data-align="center"] { align-items: center; }
.slide__content[data-align="end"] { align-items: flex-end; }
.slide__content[data-align="stretch"] { align-items: stretch; }

.slide__content[data-text-align="left"] .slide__column { text-align: left; }
.slide__content[data-text-align="center"] .slide__column { text-align: center; }
.slide__content[data-text-align="right"] .slide__column { text-align: right; }

/* --- Контентные блоки (ТЗ §5.5) ------------------------------------------ */

.block { margin: 0; min-width: 0; }

.block-heading {
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.block-heading--sm { font-size: clamp(17px, calc(5 * var(--u)), 26px); }
.block-heading--md { font-size: clamp(20px, calc(6 * var(--u)), 32px); }
.block-heading--lg { font-size: clamp(23px, calc(7 * var(--u)), 38px); }
.block-heading--xl { font-size: clamp(26px, calc(8.4 * var(--u)), 46px); }

.block-text {
  line-height: 1.45;
  /* plain-текст сохраняет переносы строк из JSON без вставки HTML. */
  white-space: pre-line;
  overflow-wrap: break-word;
  hyphens: auto;
}

.block-text--sm { font-size: clamp(12px, calc(3.5 * var(--u)), 16px); line-height: 1.4; letter-spacing: 0.01em; }
.block-text--md { font-size: clamp(14px, calc(4.15 * var(--u)), 19px); }
.block-text--lg { font-size: clamp(16px, calc(4.9 * var(--u)), 23px); }

/* markdown-подмножество: абзацы, переносы, списки, bold/italic (ТЗ §5.5) */
.block-text--markdown { white-space: normal; }
.block-text--markdown p { margin: 0 0 0.6em; }
.block-text--markdown p:last-child { margin-bottom: 0; }
.block-text--markdown ul,
.block-text--markdown ol { margin: 0 0 0.6em; padding-left: 1.35em; }
.block-text--markdown li { margin-bottom: 0.25em; }
.block-text--markdown ul:last-child,
.block-text--markdown ol:last-child { margin-bottom: 0; }

.block-image {
  display: block;
  width: 100%;
  border: 0;
  background-color: rgba(255, 255, 255, 0.06);
}

.block-image--cover { object-fit: cover; }
.block-image--contain { object-fit: contain; background-color: transparent; }

/* Нейтральная заглушка сохраняет заданный размер и alt-текст (ТЗ §6.3) */
.block-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(11px, calc(3.2 * var(--u)), 14px);
  line-height: 1.35;
  text-align: center;
}

/* --- Служебные экраны ---------------------------------------------------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
  background: var(--screen-bg);
  text-align: center;
}

.screen[hidden] { display: none; }

.screen--boot {
  transition: opacity 220ms ease;
}

.screen--boot.is-hiding { opacity: 0; pointer-events: none; }

.screen__inner {
  width: 100%;
  max-width: 340px;
}

.boot-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: boot-spin 900ms linear infinite;
}

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

.boot-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--screen-fg);
}

.boot-bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.boot-bar__fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 180ms ease;
}

.boot-progress {
  margin: 10px 0 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--screen-muted);
}

.screen--error { background: #1a1113; }

.error-title {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: #ffd7d7;
}

.error-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--screen-muted);
}

.error-details {
  margin: 18px 0 0;
  padding: 12px;
  max-height: 42vh;
  overflow: auto;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  color: #ffb4b4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
  touch-action: pan-y;
}

.error-details[hidden] { display: none; }

/* --- Debug-панель (ТЗ §12) ----------------------------------------------- */

.debug {
  position: absolute;
  z-index: 30;
  top: calc(var(--safe-top) + 6px);
  right: calc(var(--safe-right) + 6px);
  max-width: min(320px, calc(100% - 12px));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.45;
}

.debug[hidden] { display: none; }

.debug__toggle {
  display: block;
  margin-left: auto;
  padding: 4px 9px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #7ef2d5;
  font: inherit;
  cursor: pointer;
}

.debug__body {
  margin-top: 5px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #d8dee9;
  touch-action: pan-y;
}

.debug__body[hidden] { display: none; }

.debug__stats {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: #7ef2d5;
  white-space: pre-wrap;
}

.debug__log {
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.debug__row { padding: 1px 0; }
.debug__row--warn { color: #ffd479; }
.debug__row--error { color: #ff9f9f; }

/* --- Уменьшенная анимация (ТЗ §7.11) ------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .boot-spinner { animation-duration: 2.4s; }
  .screen--boot { transition-duration: 80ms; }
  .boot-bar__fill { transition-duration: 0ms; }
}