/* ————— Дополнения для страниц тестов ————— */
/* Подключается всеми тестами и страницами их ответов, поверх общего style.css.
   Живёт отдельно, чтобы правки оформления в style.css и правки механики тестов
   не мешали друг другу. */

/* ————— Экран «кто отвечает» ————— */
.who-pick { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 560px) { .who-pick { grid-template-columns: 1fr 1fr; } }
.pick {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 20px 22px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 16px; font-size: 17px; font-weight: 600;
  transition: border-color .15s, background .15s, transform .08s;
}
.pick:hover { border-color: var(--accent); background: var(--surface-2); }
.pick:active { transform: translateY(1px); }
.pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pico {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 21px; line-height: 1;
}

/* ————— Строка о сохранении ————— */
/* Тон намеренно спокойный: сохранение — служебный факт, а не результат теста.
   Ошибку выделяем, потому что от неё зависит, придёт ли ответ автору вообще. */
.save { margin-top: 22px; font-size: 14px; color: var(--text-faint); min-height: 1.4em; }
.save-bad { color: var(--text); font-weight: 600; }
#retry { margin-top: 10px; }

/* ————— Ссылки в тексте ————— */
/* Браузерный синий здесь выбивается из палитры, а подчёркивание оставляем:
   без него ссылка в абзаце перестаёт читаться как ссылка. */
.card a:not(.btn) { color: var(--accent); text-underline-offset: 3px; }

/* ————— Карточка теста на главной ————— */
/* Вся карточка кликается ссылкой «Пройти тест»: её ::after растянут на всю
   карточку. Поэтому ссылка на ответы и отметка лежат выше этого слоя —
   иначе по ним не попасть. */
.tcard { position: relative; }
.tcard .go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.tfoot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tans {
  position: relative; z-index: 1; margin-left: auto;
  font-size: 14px; font-weight: 600; color: var(--text-dim);
  text-decoration: none; white-space: nowrap;
}
a.tans:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tans-empty { color: var(--text-faint); font-weight: 500; }

/* Отметка о своём прохождении. Заодно подсвечиваем рамку карточки: по одному
   значку в подвале пройденный тест в списке взглядом не выхватывается. */
.tdone {
  position: relative; z-index: 1;
  padding: 5px 11px; border-radius: 99px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  background: var(--accent); color: var(--surface);
}
.tdone-part { background: var(--surface-2); color: var(--text-dim); }
.tcard.done { border-color: var(--accent); }

/* ————— Стена сообщений ————— */
.wall { margin-top: clamp(40px, 7vw, 72px); }
.wall > .lede { max-width: 56ch; margin-top: 10px; }
.wform {
  margin-top: 20px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.wwho { display: flex; gap: 8px; margin-bottom: 12px; }
.wpick {
  padding: 8px 16px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--border); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--text-dim);
  transition: border-color .15s, background .15s, color .15s;
}
.wpick:hover { border-color: var(--border-strong); }
.wpick.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#wtext {
  display: block; width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 15px; resize: vertical;
}
#wtext:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.wrow { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.wrow .save { margin-top: 0; }
.wlist { display: grid; gap: 12px; margin-top: 20px; }
.wmsg { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.wmeta { font-size: 13px; font-weight: 650; color: var(--text-faint); margin-bottom: 5px; }
/* pre-wrap, чтобы переносы строк из поля ввода сохранялись как их набрали */
.wtextbody { font-size: 15px; white-space: pre-wrap; word-break: break-word; }

/* Подпись поля, нужная только для чтения с экрана */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Свой ответ в тесте-ситуациях: вариант длинный, поэтому уходит под вопрос */
.row.rchoice { grid-template-columns: 34px 1fr; }
.rchoice .a { grid-column: 2; display: flex; align-items: baseline; gap: 9px; margin-top: 5px; text-align: left; white-space: normal; }
.rchoice .a b { margin: 0; flex: none; }