/* Разбор теста: сводка, список вопросов с ответами, анкета перед тестом.
   Всё остальное — кнопки, поля, карточки, иконки — берётся из /shared. */

/* Контейнер результата набивается скриптом, поэтому в разметке он без класса
   и по умолчанию block: без этого правила карточки встают вплотную (у .card,
   .questions, .btn и .alert своих margin нет). */
#result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

/* Сводка — панель показателей: ровные ячейки в две колонки вместо
   переносимой строки, где «максимум баллов» уезжал под «вопросов»
   и цифры вставали вразнобой */
.card-summary {
  gap: 14px;
}
/* Название курса и дата — по центру: показатели под ними тоже отцентрованы */
.card-summary .title,
.card-summary .hint {
  text-align: center;
}
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  text-align: center;
}
.stat-num {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 12px;
  line-height: 1.2;
  color: var(--muted-foreground);
}

.questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Номер вопроса стоит слева от текста, как маркер списка: бейджа с типом
   вопроса больше нет, и отдельная строка под шапку не нужна. Плакаты
   «перетаскивания» при этом занимают всю ширину карточки. */
.q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  padding: 16px;
  align-items: start;
}
.q-head {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.q-text {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-line;
}
.choices,
.dnd {
  grid-column: 1 / -1;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Вариант ответа — плашка как в самом тесте: галочка, картинка и текст
   в одну строку, картинка частью блока, а не отдельным рисунком под ним. */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted-foreground);
}
/* Неверный вариант — красный крестик, верный — зелёная галочка: серый
   крестик в приглушённой плашке читался хуже, чем заслуживает */
.choice .icon {
  flex: none;
  color: var(--destructive);
}
/* Верный вариант — единственный, что светится цветом: остальное приглушено.
   Красим и саму плашку, а не только галочку: так верный ответ видно, даже
   когда плашка попала в периферийное зрение. Смешиваем в sRGB: в oklch
   серый тянет оттенок к своему (нулевому) и зелёный уходит в рыжий. */
.choice.ok {
  color: var(--foreground);
  background: color-mix(in srgb, var(--success) 18%, var(--muted));
}
.choice.ok .icon {
  color: var(--success);
}
.choice-img {
  flex: none;
  height: 46px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
}
.choice-text {
  min-width: 0;
}

/* «Перетаскивание»: плакат с пронумерованными местами и список пар под ним.
   Места — рамки в координатах холста, поэтому лежат абсолютно и в процентах */
.dnd {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dnd-plate {
  position: relative;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--muted);
}
.dnd-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dnd-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--success);
  border-radius: 6px;
  background: color-mix(in oklch, var(--success) 25%, transparent);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dnd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dnd-pair {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 1.35;
}
.dnd-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--success);
  color: var(--background);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.form-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.form-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.presets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preset {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}
/* Название курса сжимается и обрезается: кнопка не переносит строку
   (.btn с nowrap), поэтому длинное имя иначе выдавило бы дату за край */
.preset-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Дата курса прижимается к правому краю кнопки: название слева, дата справа */
.preset-date {
  margin-left: auto;
  padding-left: 12px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Сводка, анкета, кнопка и отчёт складываются в .side. На телефоне он не
   существует как блок (display: contents): его содержимое — обычные строки
   колонки, а порядок держит order, чтобы кнопка копирования осталась после
   вопросов. На широком экране .side становится правой колонкой. */
.side {
  display: contents;
}
/* Порядок один для телефона и компьютера: сводка, анкета, куда уходит отчёт,
   кнопка копирования и уже потом длинный список вопросов — иначе до кнопки
   приходится листать через двадцать карточек. В правой колонке тот же порядок:
   кнопка там последняя. */
.card-summary {
  order: 1;
}
.card-form {
  order: 2;
}
.card-report {
  order: 3;
}
.questions {
  order: 5;
}
.warning {
  order: 6;
}

/* Ноутбук и монитор: длинный список вопросов уходит в левую колонку, а
   сводка с кнопкой прилипают справа и остаются под рукой при прокрутке.
   Контейнер расширяем вместе с --content-w: по нему выравнивается шапка. */
@media (min-width: 900px) {
  :root {
    --content-w: 900px;
  }
  .wrap {
    max-width: 900px;
  }
  .main {
    padding: 32px 24px;
  }
  /* Кнопки тестов на телефоне на всю ширину — по ним удобно попадать
     пальцем. Здесь растягивать короткие незачем: между названием и датой
     остаётся дыра, поэтому идут в строку по своему размеру. */
  .presets {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .preset {
    width: auto;
  }
  #result {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 16px 20px;
    align-items: start;
  }
  #result.solo > .card {
    grid-column: 1 / -1;
  }
  .side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + 16px);
  }
  .questions {
    grid-column: 2;
    grid-row: 1;
  }
}