/* Mentor-application-only readability and responsive corrections. */

body.mentor-application-page .mentor-application-app .registration-field {
  font-weight: 400;
}

body.mentor-application-page .mentor-application-app .registration-field input,
body.mentor-application-page .mentor-application-app .registration-field select,
body.mentor-application-page .mentor-application-app .registration-field textarea {
  font-weight: 500;
}

/*
 * Choice text should read as ordinary form copy, not as a heading. The
 * application builds several checkbox and radio systems dynamically, so keep
 * both the named component selectors and the direct label/input fallback.
 */
body.mentor-application-page .mentor-application-app .registration-radio-option,
body.mentor-application-page .mentor-application-app .registration-checkbox-option,
body.mentor-application-page .mentor-application-app .mentor-agreement-row,
body.mentor-application-page .mentor-application-app .vri-prep-check-option,
body.mentor-application-page .mentor-application-app .vri-software-option,
body.mentor-application-page .mentor-application-app .vri-schedule-option,
body.mentor-application-page .mentor-application-app label:has(> input[type="checkbox"]),
body.mentor-application-page .mentor-application-app label:has(> input[type="radio"]),
body.mentor-application-page .mentor-application-app label > input[type="checkbox"] + span,
body.mentor-application-page .mentor-application-app label > input[type="radio"] + span {
  font-weight: 400 !important;
}

body.mentor-application-page .mentor-application-app .mentor-review-value {
  font-weight: 500;
}

body.mentor-application-page .mentor-application-app .vri-review-preparation-value {
  font-weight: 400 !important;
}

/*
 * Keep acknowledgment checkboxes aligned with the first line of their copy at
 * every width. Explicit dimensions and margins prevent inherited mobile rules
 * from shifting the control relative to a multiline label.
 */
body.mentor-application-page .mentor-application-app .mentor-agreement-row {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start !important;
  min-width: 0;
}

body.mentor-application-page .mentor-application-app .mentor-agreement-row > input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 0.2em 0 0 !important;
  align-self: start !important;
  flex: 0 0 16px !important;
}

/*
 * Select fields must remain anchored to the top of their own grid cell. The
 * older stretch + margin-top:auto rule made an otherwise-valid select drop to
 * the bottom of a row whenever a neighboring field gained a validation box.
 * Keeping each field at intrinsic height makes errors expand downward without
 * moving any neighboring control.
 */
body.mentor-application-page .mentor-application-app .mentor-form-grid > .registration-field:has(> select) {
  display: flex !important;
  flex-direction: column;
  align-self: start !important;
  min-width: 0;
  height: auto !important;
}

body.mentor-application-page .mentor-application-app .mentor-form-grid > .registration-field:has(> select) > select {
  width: 100%;
  margin-top: 0 !important;
}

/*
 * Step 3 desktop layout: availability gets half of the row so all four session
 * choices fit horizontally; the two compact selects share the upper-right
 * half and scheduling constraints sits directly below them. At narrower
 * widths the existing responsive rules expand these fields to full/half rows.
 */
@media (min-width: 1181px) {
  body.mentor-application-page #mentor-application-app .mentor-choice-field:has(input[name="availabilityTerms"]) {
    grid-column: 1 / 7 !important;
    grid-row: 1 / span 2 !important;
  }

  body.mentor-application-page #mentor-application-app .registration-field:has(select[name="weeklyAvailability"]) {
    grid-column: 7 / 10 !important;
    grid-row: 1 !important;
  }

  body.mentor-application-page #mentor-application-app .registration-field:has(select[name="annualPoolInterest"]) {
    grid-column: 10 / -1 !important;
    grid-row: 1 !important;
  }

  body.mentor-application-page #mentor-application-app .registration-field:has(textarea[name="schedulingConstraints"]) {
    grid-column: 7 / -1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
  }

  body.mentor-application-page #mentor-application-app .mentor-choice-options[data-vri-term-session-inline="true"] > .registration-checkbox-option {
    grid-template-columns: minmax(108px, 132px) minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.mentor-application-page #mentor-application-app .mentor-inline-session-preference {
    display: grid !important;
    grid-template-columns: repeat(4, max-content) !important;
    column-gap: 11px !important;
    row-gap: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 0.86rem !important;
  }

  body.mentor-application-page #mentor-application-app .mentor-inline-session-preference label {
    white-space: nowrap !important;
  }
}

/*
 * The four workload controls remain one aligned row while there is room, then
 * reflow as a complete two-column or one-column grid instead of drifting into
 * uneven positions. Label space is equalized within every row.
 */
body.mentor-application-page .mentor-application-app .vri-preparation-section .vri-prep-stage:last-of-type > .mentor-form-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px 22px !important;
  align-items: stretch !important;
}

body.mentor-application-page .mentor-application-app .vri-preparation-section .vri-prep-stage:last-of-type > .mentor-form-grid > .registration-field {
  grid-column: auto !important;
  min-width: 0;
  height: 100%;
}

body.mentor-application-page .mentor-application-app .vri-preparation-section .vri-prep-stage:last-of-type > .mentor-form-grid > .registration-field > span {
  display: block;
  min-height: 2.8em;
  font-size: 0.72rem;
  line-height: 1.25;
  letter-spacing: 0.09em;
}

/*
 * Step 4 and other standard field rows keep their controls top-aligned when a
 * validation message appears under one member of the row. Error copy remains
 * directly under its own control and cannot change the baseline of siblings.
 */
body.mentor-application-page #mentor-application-app .mentor-form-grid {
  align-items: start !important;
  grid-auto-flow: row !important;
}

body.mentor-application-page #mentor-application-app .mentor-form-grid > .registration-field,
body.mentor-application-page #mentor-application-app .mentor-form-grid > .mentor-choice-field {
  align-self: start !important;
  min-width: 0;
}

body.mentor-application-page #mentor-application-app .registration-validation-message {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px !important;
}

/*
 * Step 6 summary cards must be able to contract without a long label forcing
 * either grid column outside its card. At intermediate widths the cards stack
 * first; individual label/value rows stack only on small screens.
 */
body.mentor-application-page .mentor-application-app .mentor-review-grid,
body.mentor-application-page .mentor-application-app .mentor-review-card,
body.mentor-application-page .mentor-application-app .mentor-review-row,
body.mentor-application-page .mentor-application-app .mentor-review-label,
body.mentor-application-page .mentor-application-app .mentor-review-value {
  min-width: 0;
}

body.mentor-application-page .mentor-application-app .mentor-review-row {
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
}

body.mentor-application-page .mentor-application-app .mentor-review-label {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

body.mentor-application-page .mentor-application-app .vri-editorial-clear {
  font-weight: 400 !important;
}

body.mentor-application-page .mentor-application-app .registration-step {
  min-width: 0;
  width: 100%;
}

body.mentor-application-page .mentor-application-app .registration-step-label {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  body.mentor-application-page .mentor-application-app .registration-step-indicator {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.mentor-application-page #mentor-application-app .mentor-inline-session-preference {
    white-space: nowrap;
  }
}

@media (max-width: 1040px) {
  body.mentor-application-page .mentor-application-app .mentor-review-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 840px) {
  body.mentor-application-page .mentor-application-app .vri-preparation-section .vri-prep-stage:last-of-type > .mentor-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  body.mentor-application-page #mentor-application-app .mentor-inline-session-preference {
    display: grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    gap: 8px 16px !important;
    align-items: center !important;
    white-space: normal !important;
  }
}

@media (max-width: 540px) {
  body.mentor-application-page .mentor-application-app .vri-preparation-section .vri-prep-stage:last-of-type > .mentor-form-grid {
    grid-template-columns: 1fr !important;
  }

  body.mentor-application-page .mentor-application-app .vri-preparation-section .vri-prep-stage:last-of-type > .mentor-form-grid > .registration-field > span {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  body.mentor-application-page .mentor-application-app .registration-step-indicator,
  body.mentor-application-page .mentor-application-app .mentor-review-row {
    grid-template-columns: 1fr !important;
  }
}