/* Общая «рамка» пошаговых экранов: главная, цель, знакомство, тест.
   Сверху — «назад», название шага, тема и прогресс-волна. Снизу — главная кнопка.
   Сначала телефон, ниже — правки для компьютера. */

.flow {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  max-width: var(--content-width); margin: 0 auto;
  padding: 12px 16px 0;
}

/* --- Верх --- */
.top-row { display: flex; align-items: center; gap: 12px; }
.part { flex: 1; text-align: center; font-size: .9rem; font-weight: 600; color: var(--muted); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--option); color: var(--text);
  transition: transform var(--speed);
}
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-spacer { width: 44px; height: 44px; flex: 0 0 auto; }

.progress { margin-top: 14px; height: 14px; position: relative; }
.counter { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }

/* Волна: тонкая линия, которая слегка колышется.
   Заполнение двигаем через transform: внешний слой сдвигается влево, внутренний — обратно */
.p-wave { position: relative; height: 14px; overflow: hidden; }
.p-wave svg { display: block; width: 200%; height: 14px; animation: wave 6s linear infinite; }
.p-wave path { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wave-track path { stroke: var(--line); }
.wave-fill path { stroke: url(#wave-grad); }
.wave-fill, .wave-fill-inner { position: absolute; inset: 0; overflow: hidden; }
.wave-fill { transform: translateX(calc((var(--p, 0) - 1) * 100%)); transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.wave-fill-inner { transform: translateX(calc((1 - var(--p, 0)) * 100%)); transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
@keyframes wave { to { transform: translateX(-50%); } }

/* --- Середина --- */
.stage { flex: 1; display: flex; align-items: center; padding: 20px 0; }
.stage > * { width: 100%; }

.task { margin: 0 0 10px; font-size: .9rem; font-weight: 600; color: var(--accent); letter-spacing: .01em; }
.question { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 24px; overflow-wrap: anywhere; }

/* Поле для текста (о себе, письмо) */
.textarea {
  display: block; width: 100%; padding: 12px 16px; resize: vertical;
  font: inherit; color: var(--text); background: var(--option);
  border: 2px solid var(--line); border-radius: var(--radius-button);
}
.textarea::placeholder { color: var(--muted); opacity: .8; }
.textarea:focus { outline: none; border-color: var(--accent); }

/* Второстепенная кнопка в виде ссылки («Пропустить», «Пройти заново») */
.link-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}

/* Экран «часть пройдена» */
.w-done { text-align: center; }
.w-done p { margin: 0 0 8px; }
.w-muted { color: var(--muted); }
.w-done-icon {
  width: 64px; height: 64px; padding: 16px; margin-bottom: 16px; border-radius: 50%;
  color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Содержимое экрана мягко поднимается при открытии */
.enter { animation: enter var(--speed) cubic-bezier(.2,.8,.2,1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }

/* Плавная смена страниц в браузерах, которые это умеют (остальные просто открывают страницу) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* --- Низ: кнопка прилипает к низу экрана --- */
.flow-bottom {
  position: sticky; bottom: 0; z-index: 1;
  margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  text-align: center;
}
.btn-main { width: 100%; }
.hint { margin: 0 0 8px; min-height: 1.4em; font-size: .9rem; color: var(--wrong-text); }
.kbd-hint, .note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.note a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
@media (hover: none) { .kbd-hint { display: none; } }

/* --- Компьютер и планшет --- */
@media (min-width: 768px) {
  .flow { padding-top: 32px; }
  .stage { padding: 40px 0; }
  .flow-bottom { position: static; margin: 0; padding: 0 0 32px; background: none; }
  .btn-main { width: auto; min-width: 220px; }
}

/* Телефон боком: экономим высоту */
@media (max-height: 500px) and (orientation: landscape) {
  .stage { padding: 8px 0; }
  .question { margin-bottom: 12px; }
}