/* Пошаговый первый вход. Структура снята с Duolingo (полоса прогресса,
   маскот с репликой, липкая кнопка внизу), палитра и типографика — наши.
   Мобильный размер основной: с телефона заходит большинство. */

.ob-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* ── Шапка: назад + прогресс ── */

.ob-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 6px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.ob-back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.ob-back:hover { background: var(--surface-2); color: var(--ink); }
.ob-back[hidden] { visibility: hidden; display: grid; }

/* Приветствие идёт без полосы прогресса, но высота шапки остаётся — иначе
   первый переход дёргает весь экран вверх. */
.ob-head-plain { min-height: 54px; }

.ob-progress {
  flex: 1;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  overflow: hidden;
}

.ob-progress span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 78%, white), var(--brand));
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .28);
  transition: width var(--dur-slow) var(--ease-spring);
}

/* ── Тело шага ── */

.ob-body {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: ob-step-in var(--dur-smooth) var(--ease-spring) both;
}

.ob-body-center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}

@keyframes ob-step-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

.ob-hero {
  width: min(240px, 58vw);
  height: auto;
  flex: 0 0 auto;
  animation: ob-float 3.4s var(--ease-spring) infinite alternate;
}

@keyframes ob-float {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-10px) rotate(1deg); }
}

.ob-lead {
  margin: 0;
  color: var(--ink-3);
  font-size: 15px;
  max-width: 340px;
}

/* ── Миша с репликой ── */

.ob-speech {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ob-mascot {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(140, 84, 34, .16));
}

.ob-bubble {
  position: relative;
  flex: 1;
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface);
}

.ob-bubble::before,
.ob-bubble::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 26px;
  border: 9px solid transparent;
  border-right-color: var(--line-2);
  border-left: 0;
}

.ob-bubble::after {
  left: -6px;
  border-right-color: var(--surface);
}

/* Unbounded — акцидентный шрифт: он хорош в двух-трёх словах и в числах, но
   реплику или условие задания в нём читать тяжело. Здесь работает Manrope в
   плотном начертании, а Unbounded остаётся на цифрах и коротких заголовках. */
.ob-bubble p {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 700;
  min-height: 1.45em;
}

/* Ширина задана жёстко, а не по содержимому: реплика набирается посимвольно, и
   пузырь по max-width раздувался бы вместе с текстом — прыгал бы на каждом
   слове. */
.ob-bubble-wide {
  width: min(420px, 100%);
  flex: 0 0 auto;
  text-align: center;
}

.ob-bubble-wide::before,
.ob-bubble-wide::after { display: none; }

.ob-hint {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
}

/* ── Варианты ответа ── */

.ob-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ob-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 14px 16px;
  text-align: left;
  border: 2px solid var(--line-2);
  border-bottom-width: 4px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), background var(--dur-fast);
}

.ob-option:hover { border-color: var(--brand-soft); }
.ob-option:active { transform: translateY(2px); border-bottom-width: 2px; }

.ob-option-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: var(--bg-warm);
  color: var(--brand-ink);
}

.ob-option-icon .icon { width: 20px; height: 20px; }

.ob-option-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  flex: 1;
}

.ob-option-note {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
}

.ob-option.is-picked {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand-soft) 60%, var(--surface));
}

.ob-option.is-picked .ob-option-icon { background: var(--brand); color: #fff; }

.ob-option.is-right {
  border-color: var(--good);
  background: color-mix(in oklab, var(--good) 14%, var(--surface));
}

.ob-option.is-wrong {
  border-color: var(--bad);
  background: color-mix(in oklab, var(--bad) 12%, var(--surface));
  animation: ob-shake .4s var(--ease-bounce);
}

@keyframes ob-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.ob-option-date {
  cursor: default;
  justify-content: space-between;
}

.ob-option-date input {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: right;
  min-width: 130px;
}

/* ── Выбор предмета ── */

.ob-subjects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ob-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--line-2);
  border-bottom-width: 4px;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), background var(--dur-fast);
}

.ob-subject:active { transform: translateY(2px); border-bottom-width: 2px; }

.ob-subject-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--subj) 18%, transparent);
  color: var(--subj);
  /* Знак предмета — эмодзи: системный эмодзи-шрифт идёт раньше Unbounded,
     чтобы на iPhone рисовался эпловский глиф. */
  font-family: var(--font-emoji);
  font-size: 20px;
  line-height: 1;
  -webkit-text-fill-color: initial;
}

.ob-subject-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
}

.ob-subject.is-picked {
  border-color: var(--subj);
  background: color-mix(in oklab, var(--subj) 10%, var(--surface));
}

/* ── Согласие ── */

.ob-consent {
  border: 2px solid var(--line-2);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ob-consent h2 {
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
}

.ob-consent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-consent-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.ob-consent-list .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--good);
  margin-top: 2px;
}

.ob-consent-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.ob-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}

.ob-check:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand-soft) 45%, transparent);
}

.ob-check input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: var(--brand);
  margin: 0;
}

.ob-check a,
.ob-consent-note a {
  color: var(--brand-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Интересы ── */

.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ob-chip {
  padding: 10px 14px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}

.ob-chip:active { transform: scale(.96); }

.ob-chip.is-picked {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

/* ── Прогноз ── */

.ob-forecast {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--surface), var(--bg-warm));
}

.ob-forecast-main strong {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--brand-ink);
}

.ob-forecast-main span {
  font-size: 13px;
  color: var(--ink-3);
}

.ob-forecast-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 76px;
}

.ob-forecast-bars i {
  width: 12px;
  height: var(--h);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-ink));
  transform-origin: bottom;
  animation: ob-bar-grow .6s var(--ease-spring) both;
  animation-delay: var(--d);
}

@keyframes ob-bar-grow {
  from { transform: scaleY(0); opacity: .2; }
  to { transform: scaleY(1); opacity: 1; }
}

.ob-plan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ob-plan li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

.ob-plan li:last-child { border-bottom: 0; }

.ob-plan .icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--brand-ink);
  margin-top: 2px;
}

.ob-plan strong {
  display: block;
  font-size: 15px;
}

.ob-plan span {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* ── Первое задание ── */

.ob-task {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ob-task-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-deep);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ob-task-question {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
}

.ob-options-answers .ob-option-title { font-weight: 600; }

/* ── Сводка перед входом ── */

/* auto-fit, а не repeat(3, 1fr): ячейка серии появляется только когда серия
   действительно начата, и при двух ячейках ряд не должен зиять третьей долей. */
.ob-save-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px;
}

.ob-save-summary div {
  padding: 14px 10px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.ob-save-summary strong {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: 22px;
  line-height: 1.15;
  color: var(--brand-ink);
}

/* Название предмета в той же ячейке, что и числа: в акцидентном шрифте оно
   заметно длиннее цифры, поэтому набирается мельче — иначе средняя ячейка
   распирает ряд и ломает равные доли. */
.ob-save-summary div:nth-child(2) strong {
  font-size: 17px;
}

.ob-save-summary span {
  font-size: 12px;
  color: var(--ink-3);
}

.ob-auth {
  border: 2px solid var(--line-2);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 16px;
}

.ob-auth .auth-panel-head h2 {
  font-size: 18px;
  margin: 0 0 4px;
}

/* ── Низ экрана ── */

.ob-foot {
  position: sticky;
  bottom: 0;
  width: 100%;
  padding: 12px 16px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}

.ob-foot-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.ob-cta {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: var(--radius-btn);
  /* Фон брендовый тёмный: на светло-оранжевом белая надпись давала контраст
     2.4:1 — на телефоне при солнце главная кнопка просто не читалась. */
  background: var(--brand-deep);
  box-shadow: 0 4px 0 color-mix(in oklab, var(--brand-deep) 70%, black);
  color: #fff;
  font-family: "Unbounded", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), box-shadow var(--dur-fast);
}

.ob-cta:hover:not(:disabled) { background: color-mix(in oklab, var(--brand-deep) 88%, black); }
.ob-cta:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }

/* Тихий вариант: «пока без аккаунта» на последнем шаге должно быть заметным и
   нажимаемым, но не ярче самого входа. */
.ob-cta-quiet {
  background: var(--surface);
  box-shadow: 0 4px 0 var(--line-2);
  color: var(--brand-deep);
}

.ob-cta-quiet:hover:not(:disabled) { background: var(--bg-warm); }

.ob-cta:disabled {
  background: var(--bg-deep);
  box-shadow: none;
  color: var(--ink-3);
  cursor: not-allowed;
}

.ob-link {
  align-self: center;
  border: 0;
  background: transparent;
  /* brand-ink на тёплом фоне давал 3.5:1 — ниже нормы для мелкого текста. */
  color: var(--brand-deep);
  font-size: 14px;
  font-weight: 700;
  padding: 8px;
  cursor: pointer;
}

/* Баннер согласия на аналитику тоже живёт внизу экрана. В кабинете он поднят
   над нижним меню, но в первом входе меню ещё нет — есть своя липкая панель.
   Поэтому подъём баннера здесь обнуляем, а панель поднимаем ровно на его
   высоту: иначе карточка накрывает кнопку «Начать» и ссылку под ней. */
body.nm-consent-open:has(.ob-screen) {
  --nm-consent-lift: 0px;
  padding-bottom: 0;
}

body.nm-consent-open .ob-foot {
  bottom: var(--nm-consent-h, 0px);
}

/* И столько же отступа самому содержимому: без этого последние карточки в
   длинном списке (предметы, интересы) остаются под баннером — прокрутка
   упирается в его край, и нажать их нечем. */
body.nm-consent-open .ob-body {
  padding-bottom: calc(24px + var(--nm-consent-h, 0px));
}

.ob-link:hover { text-decoration: underline; }

/* Разбор ответа занимает нижнюю панель целиком — как в Duolingo: взгляд уже
   внизу, у кнопки, и вердикт попадает ровно туда. */
.ob-verdict.is-good { background: var(--good-soft); border-top-color: var(--good); }
.ob-verdict.is-bad { background: var(--bad-soft); border-top-color: var(--bad); }

.ob-verdict {
  animation: ob-verdict-in var(--dur-smooth) var(--ease-spring) both;
}

@keyframes ob-verdict-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.ob-verdict-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ob-verdict-face {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
}

.ob-verdict-row strong {
  display: block;
  font-family: "Unbounded", sans-serif;
  font-size: 16px;
}

.ob-verdict-row span {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

.ob-verdict.is-good .ob-cta { background: var(--good); box-shadow: 0 4px 0 color-mix(in oklab, var(--good) 70%, black); }
.ob-verdict.is-bad .ob-cta { background: var(--bad); box-shadow: 0 4px 0 color-mix(in oklab, var(--bad) 70%, black); }

/* ── Десктоп ── */

/* ── Десктоп ──
   Раскладка снята с десктопного Duolingo: полоса прогресса тянется почти во
   всю ширину, Миша с репликой прижат к левому краю колонки, варианты идут в
   две колонки по центру, а нижняя линия проходит через весь экран — кнопка
   при этом компактная и стоит справа, а не растягивается на всю ширину. */
@media (min-width: 900px) {
  .ob-head {
    max-width: 1080px;
    padding: 24px 32px 10px;
    gap: 16px;
  }

  .ob-body {
    max-width: 1080px;
    padding: 14px 32px 40px;
    gap: 26px;
  }

  .ob-body-center { gap: 18px; }

  .ob-mascot { width: 128px; height: 128px; flex-basis: 128px; }
  .ob-bubble { min-height: 72px; }
  .ob-bubble p { font-size: 18px; }
  .ob-speech { max-width: 640px; }

  .ob-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
  }

  .ob-subjects {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }

  .ob-consent,
  .ob-forecast,
  .ob-plan,
  .ob-task,
  .ob-save-summary,
  .ob-auth {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  .ob-chips { max-width: 780px; margin: 0 auto; width: 100%; }
  .ob-hint { max-width: 780px; margin: 0 auto; width: 100%; }
  .ob-task-question { font-size: 23px; }
  .ob-hero { width: 260px; }
  .ob-plan li { padding: 18px 2px; gap: 16px; }
  .ob-plan strong { font-size: 17px; }
  .ob-plan span { font-size: 14px; }
  .ob-plan .icon { width: 26px; height: 26px; flex-basis: 26px; }
  .ob-forecast { padding: 22px 24px; }
  .ob-forecast-main strong { font-size: 48px; }

  .ob-foot { padding: 14px 32px; }

  .ob-foot-inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    max-width: 1080px;
  }

  .ob-cta {
    width: auto;
    min-width: 240px;
    padding: 0 32px;
  }

  .ob-verdict .ob-foot-inner { justify-content: space-between; }
  .ob-verdict-row { flex: 1; }
  .ob-link { align-self: center; margin-right: auto; }
}

/* Промежуточная ширина: планшет и узкое окно на ноутбуке */
@media (min-width: 640px) and (max-width: 899px) {
  .ob-head, .ob-body { max-width: 720px; }
  .ob-foot-inner { max-width: 720px; }
  .ob-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ob-subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ob-body,
  .ob-hero,
  .ob-forecast-bars i,
  .ob-verdict,
  .ob-option.is-wrong { animation: none; }
}