/* Главная и экраны перед тестом: выбор цели и интересов.
   Рамка экрана (верх, волна, нижняя кнопка) — в flow.css. */

/* --- Главная --- */
.hero-title { font-size: clamp(2.1rem, 9vw, 3.2rem); margin-bottom: 16px; }
.lead { font-size: 1.15rem; margin: 0; color: var(--muted); animation-delay: 80ms; }

.levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px; padding: 0; list-style: none; }
.levels li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: .85rem; font-weight: 700;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  animation: enter var(--speed) cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i) * 50ms);
}
.levels li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

/* --- Общее для экранов выбора --- */
.choose fieldset, fieldset.choose { margin: 0; padding: 0; border: 0; min-width: 0; }
.choose legend { padding: 0; }
.choose .question { margin-bottom: 8px; }
.sub { margin: 0 0 20px; color: var(--muted); }

/* Сам флажок прячем (но оставляем для клавиатуры и экранных чтецов), рисуем карточку */
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-body {
  position: relative; isolation: isolate;
  background: var(--option); box-shadow: 0 2px 10px #33221D0D;
  transition: transform var(--speed) cubic-bezier(.2,.8,.2,1);
}
/* Подсветка выбранного — отдельный слой, плавно проявляется (меняем только opacity) */
.choice-body::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent);
  opacity: 0; transition: opacity var(--speed);
}
.choice input:checked + .choice-body::before { opacity: 1; }
.choice input:focus-visible + .choice-body { outline: 3px solid var(--accent-2); outline-offset: 3px; }
@media (hover: hover) { .choice:hover .choice-body { transform: translateY(-2px); } }
.choice:active .choice-body { transform: scale(.97); }
.choice-label { font-weight: 600; line-height: 1.3; }

/* --- Цели: крупные плитки в две колонки --- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tile .choice-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  height: 100%; min-height: 104px; padding: 14px; border-radius: var(--radius-button);
}
.tile-icon {
  width: 40px; height: 40px; padding: 8px; border-radius: 12px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.tick {
  position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line);
}
.tick svg {
  position: absolute; inset: -2px; width: 24px; height: 24px; padding: 4px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--speed), transform var(--speed) cubic-bezier(.3,1.6,.5,1);
}
.choice input:checked + .choice-body .tick svg { opacity: 1; transform: scale(1); }

/* --- Интересы: «таблетки», переносятся по строкам --- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip .choice-body {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px 8px 12px; border-radius: 999px;
}
.chip-icons { position: relative; width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }
.chip-icons svg { position: absolute; inset: 0; width: 20px; height: 20px; transition: opacity var(--speed), transform var(--speed) cubic-bezier(.3,1.6,.5,1); }
.chip-ok { opacity: 0; transform: scale(.4); }
.choice input:checked + .choice-body .chip-topic { opacity: 0; transform: scale(.4); }
.choice input:checked + .choice-body .chip-ok { opacity: 1; transform: scale(1); }

/* --- Поле «о себе» --- */
.about { margin-top: 28px; }
.about-label { display: block; font-family: var(--font-headings); font-weight: 800; font-size: 1.15rem; }
.about-hint { margin: 2px 0 10px; font-size: .9rem; color: var(--muted); }
.about .textarea { min-height: 96px; }

/* --- Компьютер: цели в три колонки --- */
@media (min-width: 768px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile:last-child:nth-child(odd) { grid-column: auto; }
  .tile:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}