/* Application form questions, as applicants see them - drawn by
   form-blocks.js for the employer's preview and the student's apply form
   alike, so this file is shared by both sides. Every colour is a token from
   styles.css.

   The trap here is styles.css's `input { width: 100% }`: every radio and
   checkbox below sets its own width, or it would stretch across its row. */

.form-q { margin: 0 0 20px; }
.form-q-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-q-label {
  display: block; padding: 0; margin: 0 0 6px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45;
}
.form-q-required { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.form-q-help { font-size: 13px; color: var(--muted); line-height: 1.5; margin: -2px 0 8px; }
.form-q-note { font-size: 12.5px; color: var(--accent2-dark); margin: -2px 0 8px; }
.form-q-error { font-size: 12.5px; color: var(--danger); margin-top: 6px; }
.form-q-error:empty { display: none; }
.form-q-short { max-width: 240px; }
.form-q input[type="file"] { padding: 7px 9px; background: var(--surface); }

.form-choices { display: flex; flex-direction: column; gap: 6px; }
.form-choices.is-inline { flex-direction: row; flex-wrap: wrap; }
.form-choice {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--text);
}
.form-choices.is-inline .form-choice { min-width: 96px; }
.form-choice:has(input:checked) { border-color: var(--accent2); background: var(--accent2-soft); color: var(--accent2-dark); }
.form-choice input,
.form-scale-point input,
.form-skill-level input { width: auto; flex: none; margin: 0; accent-color: var(--accent2); }

/* The points share the row, so the end labels sit under the first and last point. */
.form-scale { display: flex; gap: 6px; }
.form-scale-point {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 8px 0; flex: 1 1 0; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.form-scale-point:has(input:checked) { border-color: var(--accent2); background: var(--accent2-soft); color: var(--accent2-dark); }
.form-scale-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }

.form-skill-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 10px;
  border: 0; border-top: 1px solid var(--border); margin: 0; padding: 10px 0; min-width: 0;
}
/* A legend will not sit in a grid cell, so it floats into the first one. */
.form-skill-row legend { float: left; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.form-skill-levels { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; }
.form-skill-level {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--text);
}
.form-skill-level:has(input:checked) { border-color: var(--accent2); background: var(--accent2-soft); color: var(--accent2-dark); }

.form-section { margin: 4px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.form-section h3 { margin: 0; font-size: 17px; color: var(--ink); }
.form-section p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 760px) {
  .form-skill-row { grid-template-columns: 1fr; }
  .form-skill-row legend { float: none; margin-bottom: 6px; }
  .form-skill-levels { grid-column: 1; }
  .form-q-short { max-width: none; }
  .form-scale { gap: 4px; }
}