/*
  Анкета /report — только то, чего нет в app.css. Владелец — B.
  Плакатный стиль: рамки, тени, шрифты и цвета — из токенов app.css.
*/

/* Наклейки под заголовком: «6 QUESTIONS · 30 SEC · ANONYMOUS». */
.report-stickers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-2);
}
.report-sticker--tilt { transform: rotate(-1.5deg); }

.report-noscript,
.report-already { margin-bottom: var(--s-5); }

/* Номер вопроса 1–6 перед подписью: декоративный, aria-hidden. */
.report-q {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.report-qnum {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--bw) solid var(--c-ink);
  background: var(--c-pop);
  box-shadow: var(--shadow-sm);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

/* Сводка ошибок: ссылки на поля в строку. */
ul.report-errlist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
}
.report-errlist a { color: inherit; font-weight: 700; }

/* Блок отправки: виджет Turnstile (виден только при проверке), ошибка, кнопка, статус. */
.report-submit {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.report-submit > .alert { justify-self: stretch; }
.report-captcha { max-width: 100%; }
.report-captcha:empty { display: none; }

/* Экран «спасибо». */
.report-thanks h1:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 6px; }
.report-thanks__actions { margin-top: var(--s-6); }
.report-thanks__links { margin-top: var(--s-7); }

/* Плашки-ссылки — одна под другой на всю ширину колонки; заголовок любой длины переносится и не заходит на стрелку. */
.report-thanks .linkcard__title {
  grid-row: 1 / -1;          /* строки текста нет — заголовок по центру по вертикали, вровень со стрелкой */
  min-width: 0;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Сразу после отправки курсор оказывается над плашкой, на которой только что была кнопка:
   до первого настоящего движения мыши ховер не показываем (иначе жёлтая плашка выглядит белой). */
.report-thanks.is-hover-locked .linkcard:hover {
  transform: none;
  box-shadow: var(--shadow);
  background: var(--c-surface);
}
.report-thanks.is-hover-locked .linkcard--pop:hover { background: var(--c-pop); }
.report-thanks.is-hover-locked .linkcard:hover .linkcard__arrow { transform: none; }

/* Уровень: колонки пошире, чтобы длинные подписи («Руководитель», «Lead / principal») помещались в плитку. */
#g-seniority .choices__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }

/* Числа «спасибо»: ячейка не уже 12rem — на телефоне по одной в строке, в колонке формы — три в ряд.
   (.metrics в app.css — flex с переносом, поэтому управляем flex-basis.) */
.report-counts > .metric { flex-basis: 12rem; }
.report-counts .metric__label { overflow-wrap: break-word; hyphens: auto; }

/* Телефон: уровень — в одну колонку, чтобы длинные подписи не слипались. */
@media (max-width: 36rem) {
  #g-seniority .choices__list { grid-template-columns: minmax(0, 1fr); }
}