/* Tester application page */

.apply-banner .wrap { padding-block: 56px 52px; }
.apply-banner h1 { margin-bottom: 10px; font-size: clamp(36px, 6vw, 60px); line-height: 1; }
.apply-banner p { margin: 0; font-weight: 600; }

.form-area { padding-block: 32px 72px; }

/* one question per row: the question on the left, the answer on the right */
.row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.row.tall { align-items: start; }
.question { font: 700 16px/1.35 var(--font); }
.question small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--soft); }
.required { color: var(--accent); font-weight: 900; }

input[type=text], select, textarea {
  width: 100%;
  max-width: 560px;
  font: 600 16px/1.4 var(--font);
  color: var(--primary);
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 13px 16px;
}
input[type=text]:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
input::placeholder, textarea::placeholder { color: var(--soft); opacity: .6; }
textarea { min-height: 110px; resize: vertical; }

/* pick-one or pick-several answers shown as buttons */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice span { display: block; font: 700 15px/1 var(--font); padding: 13px 18px; border: 2px solid var(--line); border-radius: 999px; }
.choice:hover span { border-color: var(--soft); }
.choice input:checked + span { background: var(--accent); border-color: var(--accent); }
.choice:focus-within span { outline: 3px solid var(--accent); outline-offset: 2px; }

.rules { display: grid; gap: 12px; }
.tick { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.tick input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--accent); flex: none; }

/* hidden from people; bots fill it in and Formspree drops the entry */
.trap { position: absolute; left: -9999px; }

.result { margin-top: 18px; }
.send-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.note { font-size: 14px; color: var(--soft); }

.message { max-width: 720px; padding: 14px 18px; border-radius: 16px; border-left: 5px solid var(--accent); background: rgba(92, 209, 120, .12); font-weight: 700; }
.message.error { border-left-color: var(--primary); background: rgba(28, 74, 44, .07); }
.answers { max-width: 720px; max-height: 260px; overflow: auto; margin: 12px 0; padding: 14px; border: 2px solid var(--line); border-radius: 16px; white-space: pre-wrap; font: 500 14px/1.5 ui-monospace, Menlo, monospace; }

@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 10px; }
}